/* ============================================================
   CirroQueueAI - Deep Navy Command Theme
   Accent: Amber #f59e0b  |  Navy: #0f1e36  |  Body: #f1f5f9
   ============================================================ */

@import url('/static/css/fonts.css');

/* -- Base -- */
body {
    font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    background-color: #f1f5f9 !important;
}

/* -- Navbar -- */
.navbar {
    background: #0f1e36 !important;
    background-image: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}
.navbar-brand {
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    color: white !important;
    letter-spacing: -0.2px;
}
.navbar .nav-link {
    color: rgba(255,255,255,0.8) !important;
    font-weight: 500;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: #f59e0b !important;
    background-color: rgba(245,158,11,0.1) !important;
    border-radius: 6px;
}
/* Navbar user info text */
.navbar .text-white { color: rgba(255,255,255,0.9) !important; }

/* Assigned calls badge */
#assignedCallsBadge {
    background-color: #f59e0b !important;
    color: #0f1e36 !important;
    font-weight: 700 !important;
}

/* -- Sidebar -- */
.sidebar {
    background: #0f1e36 !important;
    border-right: none !important;
    box-shadow: 2px 0 12px rgba(0,0,0,0.25) !important;
}
.sidebar-link {
    color: rgba(255,255,255,0.62) !important;
    border-left: 3px solid transparent !important;
    margin: 1px 8px !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
}
.sidebar-link:hover {
    background-color: rgba(255,255,255,0.07) !important;
    color: rgba(255,255,255,0.95) !important;
    border-left-color: rgba(255,255,255,0.2) !important;
}
.sidebar-link.active {
    background-color: rgba(245,158,11,0.13) !important;
    color: #f59e0b !important;
    font-weight: 600 !important;
    border-left-color: #f59e0b !important;
}
.sidebar-link i {
    opacity: 0.75;
}
.sidebar-link.active i { opacity: 1; }

/* Sidebar section labels & status text */
.sidebar h6 { color: rgba(255,255,255,0.33) !important; }
.sidebar [style*="border-top"] { border-top-color: rgba(255,255,255,0.1) !important; }
.sidebar [style*="color: #718096"],
.sidebar [style*="color:#718096"],
.sidebar [style*="color: #4a5568"],
.sidebar [style*="color:#4a5568"] { color: rgba(255,255,255,0.38) !important; }
.sidebar [style*="color: #2d3748"],
.sidebar [style*="color:#2d3748"] { color: rgba(255,255,255,0.72) !important; }

/* -- Main content area -- */
.main-content { background-color: #f1f5f9 !important; }

/* -- Status indicators -- */
.status-green  { background-color: #22c55e !important; }
.status-yellow { background-color: #f59e0b !important; }
.status-red    { background-color: #ef4444 !important; }

/* -- Cards -- */
.card, .detail-card, .filter-card, .chart-container, .calls-table {
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04) !important;
}
.card-header {
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    font-weight: 600;
    color: #1e293b;
}

/* -- KPI cards -- */
.kpi-card { border-left: 4px solid; }
.kpi-card.primary { border-left-color: #0f1e36 !important; }
.kpi-card.danger  { border-left-color: #ef4444 !important; }
.kpi-card.warning { border-left-color: #f59e0b !important; }
.kpi-card.success { border-left-color: #22c55e !important; }
.kpi-card.info    { border-left-color: #3b82f6 !important; }

/* -- Urgency badges -- */
.urgency-critical { background-color: #fee2e2 !important; color: #991b1b !important; }
.urgency-urgent   { background-color: #fef3c7 !important; color: #92400e !important; }
.urgency-routine,
.urgency-low      { background-color: #dcfce7 !important; color: #166534 !important; }

/* Badge (Bootstrap) overrides */
.badge-critical { background-color: #dc2626 !important; }
.badge-urgent   { background-color: #d97706 !important; }

/* -- Buttons -- */
.btn-primary {
    background-color: #0f1e36 !important;
    border-color: #0f1e36 !important;
    color: white !important;
    font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: #1a2e4c !important;
    border-color: #1a2e4c !important;
}
.btn-outline-primary {
    color: #0f1e36 !important;
    border-color: #0f1e36 !important;
}
.btn-outline-primary:hover {
    background-color: #0f1e36 !important;
    color: white !important;
}

/* -- Tables -- */
.table-light th, thead.table-light tr th {
    background-color: #f8fafc !important;
    color: #475569 !important;
    font-size: 0.72rem !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700 !important;
    border-bottom: 2px solid #e2e8f0 !important;
}
.call-row:hover > td,
.table-hover > tbody > tr:hover > td {
    background-color: #eff6ff !important;
    cursor: pointer;
}

/* -- Bulk actions bar -- */
.bulk-actions-bar {
    background-color: #0f1e36 !important;
    color: white !important;
}

/* -- Pagination -- */
.page-link { color: #0f1e36 !important; }
.page-item.active .page-link {
    background-color: #0f1e36 !important;
    border-color: #0f1e36 !important;
    color: white !important;
}

/* -- Form focus -- */
.form-control:focus, .form-select:focus {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245,158,11,0.15) !important;
}

/* -- Page headings -- */
h1, h2 { color: #0f172a; font-weight: 700; }

/* -- Transcript / call-detail accents -- */
.transcript-timestamp { color: #d97706 !important; }

/* -- Login / auth pages -- */
.login-container, .auth-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(15,30,54,0.12);
}

/* -- Support / misc -- */
a { color: #0f1e36; }
a:hover { color: #f59e0b; }
.text-primary { color: #0f1e36 !important; }
.bg-primary { background-color: #0f1e36 !important; }
.border-primary { border-color: #0f1e36 !important; }