/* OmniChannel AHR Web - Custom Styles
   Matches the Tkinter GUI theme colours for consistency.
   Copyright (c) 2024-2026 OmniSolution Srl. All rights reserved. */

:root {
    --omni-primary: #2c5aa0;
    --omni-primary-dark: #1e3f73;
    --omni-secondary: #34495e;
    --omni-success: #27ae60;
    --omni-warning: #f39c12;
    --omni-error: #e74c3c;
    --omni-bg-light: #f5f6fa;
    --omni-bg-dark: #2c3e50;
    --omni-text-dark: #2c3e50;
    --omni-text-light: #ecf0f1;
}

body {
    background: var(--omni-bg-light);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding-bottom: 40px; /* space for fixed statusbar */
    font-size: 0.9rem;
    min-height: 100vh;
}

/* Ensure content fills available space (especially inside iframes) */
.container-fluid.p-3 {
    min-height: calc(100vh - 140px); /* header ~50px + tabs ~42px + statusbar ~30px + padding */
}

/* Header */
.omni-header {
    background: var(--omni-primary);
    padding: 0.6rem 1rem;
}
.omni-header .navbar-brand {
    font-size: 1.3rem;
    font-weight: 700;
}
.text-light-muted {
    color: #b0c4de !important;
}

/* Tab navigation */
.omni-tabs {
    background: white;
    border-bottom: 2px solid var(--omni-primary);
}
.omni-tabs .nav-link {
    color: var(--omni-secondary);
    font-size: 0.85rem;
    padding: 0.5rem 0.8rem;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    transition: all 0.2s;
}
.omni-tabs .nav-link:hover {
    color: var(--omni-primary);
    background: var(--omni-bg-light);
    border-bottom-color: #b0c4de;
}
.omni-tabs .nav-link.active {
    color: var(--omni-primary);
    font-weight: 600;
    background: white;
    border-bottom-color: var(--omni-primary);
}

/* Status bar */
.omni-statusbar {
    background: var(--omni-secondary);
    color: var(--omni-text-light);
    font-size: 0.78rem;
    z-index: 1030;
}
.status-item {
    color: var(--omni-text-light);
}

/* Cards */
.omni-card {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 1.2rem;
    margin-bottom: 1rem;
}
.omni-card-header {
    font-size: 1rem;
    font-weight: 600;
    color: var(--omni-primary);
    border-bottom: 1px solid #eee;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

/* Buttons */
.btn-omni-primary {
    background: var(--omni-primary);
    color: white;
    border: none;
}
.btn-omni-primary:hover {
    background: var(--omni-primary-dark);
    color: white;
}
.btn-omni-success {
    background: var(--omni-success);
    color: white;
    border: none;
}
.btn-omni-success:hover {
    background: #1e8449;
    color: white;
}
.btn-omni-danger {
    background: var(--omni-error);
    color: white;
    border: none;
}
.btn-omni-danger:hover {
    background: #c0392b;
    color: white;
}

/* Status indicator */
.status-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 6px;
}
.status-dot.ok { background: var(--omni-success); }
.status-dot.warning { background: var(--omni-warning); }
.status-dot.error { background: var(--omni-error); }
.status-dot.unknown { background: #95a5a6; }

/* Log panel */
.log-panel {
    background: #1e1e2e;
    color: #cdd6f4;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.82rem;
    padding: 0.8rem;
    border-radius: 4px;
    max-height: 300px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Form tweaks */
.form-label {
    font-weight: 500;
    color: var(--omni-secondary);
    font-size: 0.85rem;
    margin-bottom: 0.2rem;
}
.form-control, .form-select {
    font-size: 0.88rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--omni-primary);
    box-shadow: 0 0 0 0.2rem rgba(44, 90, 160, 0.15);
}

/* Table styling */
.table-omni {
    font-size: 0.85rem;
}
.table-omni thead th {
    background: var(--omni-primary);
    color: white;
    font-weight: 500;
    border: none;
    padding: 0.5rem 0.6rem;
}
.table-omni tbody tr:hover {
    background: #e8f0fe;
}
.table-omni tbody td {
    padding: 0.4rem 0.6rem;
    vertical-align: middle;
}

/* HTMX loading indicator */
.htmx-indicator {
    display: none;
}
.htmx-request .htmx-indicator {
    display: inline-block;
}
.htmx-request .htmx-hide-on-request {
    display: none;
}

/* Spinner */
.spinner-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}