/* ═══════════════════════════════════════════════════════════════
   AZURE-INSPIRED THEME OVERRIDE  (HSO brand colors)
   Applies on top of app.css / app2.css / admin.css
   ═══════════════════════════════════════════════════════════════ */

/* ── Color palette ─────────────────────────────────────────────── */
:root {
    /* Sidebar – retain original HSO navy */
    --az-sidebar:        #002d5c;
    --az-sidebar-deep:   #001f40;
    --az-sidebar-border: rgba(255, 255, 255, 0.1);
    --az-sidebar-text:   rgba(255, 255, 255, 0.72);
    --az-sidebar-text-h: #ffffff;

    /* Surfaces – warm light gray (kept from azure redesign) */
    --bg-primary:        #f3f2f1;
    --bg-secondary:      #ffffff;
    --bg-tertiary:       #faf9f8;
    --border-color:      #edebe9;
    --border-light:      #f3f2f1;

    /* Text – kept from azure redesign */
    --text-primary:      #323130;
    --text-secondary:    #605e5c;
    --text-muted:        #8a8886;

    /* HSO brand colors – unchanged */
    --hso-primary:       #002d5c;
    --hso-primary-dark:  #001f40;
    --hso-primary-light: #003d7a;
    --hso-accent:        #e85a24;
    --hso-accent-hover:  #d14d1a;

    /* Layout – tighter sidebar */
    --sidebar-width:           220px;
    --sidebar-collapsed-width: 48px;
}

/* Dark mode */
[data-theme="dark"] {
    --az-sidebar:       #1a1f2e;
    --az-sidebar-deep:  #141821;
    --bg-primary:       #0f1419;
    --bg-secondary:     #1a1f2e;
    --bg-tertiary:      #252d3d;
    --border-color:     #3a3f4b;
    --border-light:     #2d3340;
    --text-primary:     #e4e6eb;
    --text-secondary:   #b0b3b8;
    --text-muted:       #8a8d91;
    --hso-primary:      #4a90e2;
    --hso-primary-dark: #357abd;
    --hso-primary-light:#6ba3e8;
    --hso-accent:       #ff7043;
    --hso-accent-hover: #ff5722;
}

/* ── Global reset tweaks ────────────────────────────────────────── */
html, body {
    font-size: 14px;
}

/* Scrollbars – thinner */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { border-radius: 0; background: #c8c6c4; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #484644; }

/* Focus outline */
*:focus-visible {
    outline: 1px solid #002d5c;
    outline-offset: 1px;
}
[data-theme="dark"] *:focus-visible { outline-color: #4a90e2; }

/* ── Sidebar ────────────────────────────────────────────────────── */
.sidebar {
    background: var(--az-sidebar);
    width: var(--sidebar-width);
    border-right: none;
}
.sidebar.collapsed { width: var(--sidebar-collapsed-width); }

[data-theme="dark"] .sidebar { background: var(--az-sidebar); }

.sidebar-header {
    background: var(--az-sidebar-deep);
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--az-sidebar-border);
}
.sidebar.collapsed .sidebar-header { padding: 0.875rem 0.5rem; }
[data-theme="dark"] .sidebar-header { background: var(--az-sidebar-deep); }

/* Nav items – compact, left-border active indicator */
.sidebar-nav { padding: 0.5rem 0; }
.sidebar.collapsed .sidebar-nav { padding: 0.5rem 0; }

.nav-section { margin-bottom: 0.25rem; }

.nav-section-title {
    font-size: 0.625rem;
    letter-spacing: 1.25px;
    padding: 0.75rem 0.875rem 0.25rem;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 0;
}
.sidebar.collapsed .nav-section-title { display: none; }

.sidebar .nav-item {
    padding: 0.5rem 0.875rem;
    border-radius: 0;
    margin-bottom: 0;
    border-left: 2px solid transparent;
    font-size: 0.8125rem;
    color: var(--az-sidebar-text);
}
.sidebar.collapsed .nav-item {
    padding: 0.625rem;
    justify-content: center;
    border-left: 2px solid transparent;
}
.sidebar .nav-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--az-sidebar-text-h);
}
.sidebar .nav-item.active {
    background: rgba(232, 90, 36, 0.18);
    border-left-color: #e85a24;
    color: #ffffff;
    box-shadow: none;
    padding-left: calc(0.875rem - 2px);
}
.sidebar.collapsed .nav-item.active {
    padding-left: 0.625rem;
    border-left-color: #e85a24;
}

.nav-text { font-size: 0.8125rem; }
.nav-icon { width: 16px; height: 16px; }
.nav-icon svg { width: 15px; height: 15px; }

.nav-badge { border-radius: 2px; font-size: 0.65rem; padding: 1px 5px; }

/* Sidebar footer */
.sidebar-footer {
    background: var(--az-sidebar-deep);
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--az-sidebar-border);
}
.sidebar.collapsed .sidebar-footer { padding: 0.75rem 0.5rem; }

/* User avatar */
.user-avatar {
    border-radius: 50%;
    background: #e85a24;
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
}

.logout-btn { border-radius: 2px; width: 28px; height: 28px; }

/* Active view card in sidebar */
.active-view-card {
    background: rgba(232, 90, 36, 0.12);
    border-color: rgba(232, 90, 36, 0.25);
    border-radius: 2px;
    margin: 0 0.5rem;
}

/* Admin link */
.admin-link { background: rgba(232, 90, 36, 0.08); border-radius: 0; }
.admin-link:hover { background: rgba(232, 90, 36, 0.14); }

.stat-card { border-radius: 2px; }

/* ── Main content ───────────────────────────────────────────────── */
.main-content { background: var(--bg-primary); }

/* ── Page headers ───────────────────────────────────────────────── */
.header-content h1 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}
.subtitle { font-size: 0.875rem; }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
    padding: 5px 12px;
    font-size: 0.8125rem;
    font-weight: 400;
    border-radius: 2px;
    gap: 6px;
    letter-spacing: 0;
}
.btn svg { width: 14px; height: 14px; }

.btn-primary {
    background: #e85a24;
    color: #fff;
}
.btn-primary:hover:not(:disabled) {
    background: #d14d1a;
    box-shadow: none;
}

.btn-secondary {
    background: var(--bg-secondary);
    border: 1px solid #8a8886;
    color: var(--text-primary);
}
.btn-secondary:hover {
    background: var(--bg-tertiary);
    border-color: #605e5c;
}
[data-theme="dark"] .btn-secondary {
    background: var(--bg-tertiary);
    border-color: #484644;
    color: var(--text-primary);
}

.btn-ghost {
    padding: 4px 8px;
    border-radius: 2px;
    color: var(--text-secondary);
}
.btn-ghost:hover { background: var(--bg-tertiary); color: var(--text-primary); }

.btn-success { border-radius: 2px; }
.btn-create-view { border-radius: 2px; background: linear-gradient(135deg, #002d5c, #001f40); }
.btn-create-view:hover { transform: none; box-shadow: none; background: #001f40; }

/* Notification bell */
.btn-notifications {
    width: 32px;
    height: 32px;
    border-radius: 2px;
    border: 1px solid var(--border-color);
}
.btn-notifications:hover { border-color: #002d5c; color: #002d5c; }
.btn-notifications svg { width: 16px; height: 16px; }

/* ── Grid / table ───────────────────────────────────────────────── */
.grid-container { border-radius: 2px; }

/* ── Cards ──────────────────────────────────────────────────────── */
.alert-card { border-radius: 2px; }
.alert-card:hover { transform: none; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }

.view-card { border-radius: 2px; }
.view-card:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.view-card.active { border-color: #e85a24; box-shadow: 0 0 0 1px rgba(232,90,36,0.3); }

/* ── Dropdowns ──────────────────────────────────────────────────── */
.dropdown-trigger {
    border-radius: 2px;
    padding: 4px 8px;
    font-size: 0.8125rem;
}
.dropdown-trigger.active { background: rgba(232,90,36,0.06); border-color: #e85a24; color: #e85a24; }

.dropdown-menu { border-radius: 2px; box-shadow: 0 4px 8px rgba(0,0,0,0.14), 0 0 2px rgba(0,0,0,0.12); }
.dropdown-item { border-radius: 0; }
.dropdown-item.selected { background: rgba(0,45,92,0.06); }

/* ── Search boxes ───────────────────────────────────────────────── */
.search-box input {
    border-radius: 2px;
    padding: 0.5rem 0.75rem 0.5rem 2.5rem;
    font-size: 0.875rem;
    border-color: #8a8886;
}
.search-box input:focus { border-color: #002d5c; box-shadow: 0 0 0 1px #002d5c; }
.search-box > svg { left: 0.625rem; }

/* ── Filters ────────────────────────────────────────────────────── */
.filter-bar { gap: 0.5rem; }
.filter-count { border-radius: 2px; }

/* ── Action buttons in table rows ───────────────────────────────── */
.action-btn { width: 24px; height: 24px; border-radius: 2px; }
.action-btn svg { width: 12px; height: 12px; }

/* ── Panels / modals ────────────────────────────────────────────── */
.close-btn { border-radius: 2px; width: 28px; height: 28px; }
.close-btn svg { width: 14px; height: 14px; }

.detail-panel { box-shadow: -4px 0 12px rgba(0,0,0,0.12); }

.view-modal { border-radius: 2px; box-shadow: 0 8px 20px rgba(0,0,0,0.18); }

.select-field { border-radius: 2px; }

/* ── Badges / pills ─────────────────────────────────────────────── */
.severity-badge { border-radius: 2px; padding: 1px 5px; font-size: 0.6875rem; }
.StatusName-badge { border-radius: 2px; }
.category-badge { border-radius: 2px; }
.case-number-badge { border-radius: 2px; }
.case-status { border-radius: 2px; }

/* ── Comments ───────────────────────────────────────────────────── */
.comment { border-radius: 2px; }
.comment-avatar { border-radius: 2px; }

/* ── Notifications dropdown ─────────────────────────────────────── */
.notifications-dropdown { border-radius: 2px; box-shadow: 0 4px 12px rgba(0,0,0,0.14); }

/* ── Admin sidebar ──────────────────────────────────────────────── */
.admin-sidebar { background: #001f40; }
.admin-sidebar.collapsed { background: #001f40; }

.admin-sidebar-header {
    background: #001f40;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.admin-nav-item {
    border-radius: 0;
    border-left: 2px solid transparent;
    padding: 0.5rem 1.25rem;
    font-size: 0.8125rem;
}
.admin-nav-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-left-color: transparent;
}
.admin-nav-item.active {
    background: rgba(232, 90, 36, 0.15);
    border-left-color: #e85a24;
    color: #e85a24;
}
.admin-nav-item.active svg { color: #e85a24; }

.admin-sidebar-footer { background: #001f40; border-top: 1px solid rgba(255,255,255,0.1); }
.back-to-app { border-radius: 0; }
.admin-user-avatar { border-radius: 50%; }

/* ── Admin content cards ────────────────────────────────────────── */
.admin-stat-card { border-radius: 2px; box-shadow: none; }
.chart-card { border-radius: 2px; box-shadow: none; }
.table-container { border-radius: 2px; }
.cs-chart-card { border-radius: 2px; box-shadow: none; }
.cs-kpi-card { border-radius: 2px; box-shadow: none; }
.overview-card { border-radius: 2px; }
.stats-card { border-radius: 2px; }
.settings-section { border-radius: 2px; }
.activity-card, .metrics-card { border-radius: 2px; }
.group-card { border-radius: 2px; }
.users-table-container { border-radius: 2px; }

/* Admin table – more compact */
.admin-table th { font-size: 0.6875rem; padding: 0.5rem 1rem; }
.admin-table td { padding: 0.5rem 1rem; font-size: 0.875rem; }

/* Table icon buttons */
.table-actions .icon-btn { border-radius: 2px; width: 28px; height: 28px; }

/* ── Portal page ────────────────────────────────────────────────── */
.portal-card { border-radius: 4px; }

/* ── Login page ─────────────────────────────────────────────────── */
.login-container { border-radius: 4px; }

/* ── Custom views ───────────────────────────────────────────────── */
.btn-activate { border-radius: 2px; }

/* ── Theme toggle button ────────────────────────────────────────── */
.theme-toggle-btn {
    width: 40px;
    height: 40px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.theme-toggle-btn:hover { transform: none; }

/* ── MudBlazor overrides ────────────────────────────────────────── */
.mud-button-root.mud-button {
    border-radius: 2px !important;
    text-transform: none !important;
    font-size: 0.8125rem !important;
    padding: 4px 12px !important;
    min-height: 28px !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
}

.mud-button-root.mud-button.mud-button-filled.mud-button-filled-primary {
    background-color: #e85a24 !important;
}
.mud-button-root.mud-button.mud-button-filled.mud-button-filled-primary:hover {
    background-color: #d14d1a !important;
    box-shadow: none !important;
}

.mud-button-root.mud-button.mud-button-outlined { border-radius: 2px !important; }

.mud-table-cell {
    padding: 6px 14px !important;
    font-size: 0.875rem !important;
}
.mud-table-head .mud-table-cell {
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--text-secondary) !important;
    background: var(--bg-tertiary) !important;
}

.mud-paper {
    border-radius: 2px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1) !important;
}
.mud-card { border-radius: 2px !important; }
.mud-input-outlined .mud-input-outlined-border { border-radius: 2px !important; }
.mud-select-input { border-radius: 2px !important; }
.mud-popover { border-radius: 2px !important; }
.mud-chip { border-radius: 2px !important; font-size: 0.75rem !important; }

/* Tabs */
.mud-tabs .mud-tab.mud-tab-active { color: #002d5c !important; }
.mud-tab-slider { background: #e85a24 !important; height: 2px !important; }

/* ── Misc accent propagation ────────────────────────────────────── */
.select-field:focus,
.filter-input-field:focus { border-color: #002d5c; box-shadow: 0 0 0 1px #002d5c; }

.dropdown-item input[type="checkbox"] { accent-color: #002d5c; }
.checkbox-wrapper input[type="checkbox"] { accent-color: #002d5c; }

.autocomplete-input-wrapper input:focus {
    border-color: #002d5c;
    box-shadow: 0 0 0 1px #002d5c;
}

.toggle input:checked + .toggle-slider { background: #002d5c; }
input:checked + .slider { background-color: #002d5c; }

.period-btn.active { background: var(--bg-secondary); color: #002d5c; }
.sort-btn.active { background: #002d5c; }
.cs-tab-active { color: #002d5c; border-bottom-color: #002d5c; }
.cs-tab:hover { color: #002d5c; }