/* ─────────────────────────────────────────
   Layout
───────────────────────────────────────── */
body {
    font-size: 0.875rem;
    background-color: #f8f9fc;
}

.wrapper {
    min-height: 100vh;
}

/* ─────────────────────────────────────────
   Sidebar
───────────────────────────────────────── */
.sidebar {
    width: 240px;
    min-width: 240px;
    min-height: 100vh;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.25s ease, min-width 0.25s ease;
    z-index: 100;
    flex-shrink: 0;
}

/* ── Collapsed state ── */
.sidebar.collapsed {
    width: 60px;
    min-width: 60px;
}
.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .sidebar-brand-text,
.sidebar.collapsed .sidebar-version,
.sidebar.collapsed #extLinksCollapse,
.sidebar.collapsed #extLinksChevron,
.sidebar.collapsed .nav-label {
    display: none !important;
}
.sidebar.collapsed .sidebar-header {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.sidebar.collapsed .sidebar-header .sidebar-shield {
    display: none;
}
.sidebar.collapsed .nav-link {
    justify-content: center;
    padding: 0.5rem;
}
.sidebar.collapsed .nav-link i.bi {
    margin-right: 0 !important;
    font-size: 1rem;
}
.sidebar.collapsed .nav-link[data-bs-toggle="collapse"] {
    justify-content: center;
}
.sidebar.collapsed .px-3.py-3 {
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
}
#sidebarCollapseBtn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    padding: 4px 7px;
    border-radius: 6px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}
#sidebarCollapseBtn:hover {
    color: #fff;
    background: rgba(255,255,255,0.12);
}
.sidebar.collapsed #sidebarCollapseIcon {
    transform: rotate(180deg);
}
#sidebarCollapseIcon {
    transition: transform 0.25s ease;
    display: block;
}

/* Section labels (Main, Observations, etc.) — sidebar is always dark,
   so text-muted (near-black in light mode) needs a light override */
.sidebar .nav-section-label {
    color: rgba(255,255,255,0.38) !important;
}

/* sidebar-muted: theme-safe muted text for the sidebar (always light, regardless of day/dark mode) */
.sidebar-muted {
    color: rgba(255,255,255,0.45) !important;
}

.sidebar .nav-link {
    color: rgba(255,255,255,0.75);
    padding: 0.45rem 0.75rem;
    border-radius: 8px;
    font-size: 0.82rem;
    transition: all 0.15s;
    display: flex;
    align-items: center;
}

.sidebar .nav-link:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
}

.sidebar .nav-link.active {
    color: #fff;
    background: rgba(99,102,241,0.85);
    font-weight: 600;
}

/* ─────────────────────────────────────────
   Main Content
───────────────────────────────────────── */
.main-content {
    min-width: 0;
    overflow-x: auto;
}

.content-area {
    min-height: calc(100vh - 56px);
}

/* ─────────────────────────────────────────
   Stats Cards
───────────────────────────────────────── */
.stat-card {
    transition: transform 0.15s;
    height: 100%;
    min-height: 84px;
    display: flex;
    align-items: center;
}

.stat-card:hover {
    transform: translateY(-2px);
}

.stat-card-inner {
    width: 100%;
}

.stat-card-text {
    min-width: 0;
}

.stat-card-count {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.stat-label {
    font-size: 0.6rem;
    line-height: 1.3;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-value {
    font-size: 1.55rem;
    line-height: 1.1;
    font-weight: 700;
}

.stat-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

/* ─────────────────────────────────────────
   Tables
───────────────────────────────────────── */
.table thead th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    white-space: nowrap;
}

.table-hover tbody tr:hover {
    background-color: rgba(99,102,241,0.04);
}

/* ─────────────────────────────────────────
   Cards
───────────────────────────────────────── */
.card {
    border: 1px solid rgba(0,0,0,.07);
    border-radius: 12px;
}

.card-header {
    border-radius: 12px 12px 0 0 !important;
}

/* ─────────────────────────────────────────
   Badges
───────────────────────────────────────── */
.badge {
    font-weight: 600;
    letter-spacing: 0.02em;
    font-size: 0.72rem;
    padding: 0.35em 0.65em;
}

/* Orange (not in Bootstrap defaults) */
.bg-orange {
    background-color: #f97316 !important;
    color: #fff !important;
}

/* Purple — used for "Partially Closed" status badge */
.bg-purple {
    background-color: #7c3aed !important;
    color: #fff !important;
}

/* ─────────────────────────────────────────
   Navbar
───────────────────────────────────────── */
.navbar {
    min-height: 56px;
    z-index: 99;
}

/* ─────────────────────────────────────────
   Follow-up Timeline
───────────────────────────────────────── */
.timeline-item {
    position: relative;
    padding-left: 1rem;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6366f1;
    border: 2px solid #fff;
    outline: 1px solid #6366f1;
}

/* ─────────────────────────────────────────
   Misc
───────────────────────────────────────── */
.cursor-pointer { cursor: pointer; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #c5c5c5; border-radius: 3px; }

/* ─────────────────────────────────────────
   Notification dropdown reply links
───────────────────────────────────────── */
.notif-reply-link {
    color: var(--bs-body-color);
    transition: background .15s;
}
.notif-reply-link:hover {
    background: #f8f9fa;
}

/* ─────────────────────────────────────────
   Dark Theme  (Bootstrap data-bs-theme="dark")
───────────────────────────────────────── */
[data-bs-theme="dark"] body {
    background-color: #0f172a;
}

/* ── Navbar & logo ── */
[data-bs-theme="dark"] .navbar {
    background-color: #1e293b !important;
    border-bottom-color: #2d3f55 !important;
}
/* Invert dark logo so it stays visible on the dark navbar */
[data-bs-theme="dark"] .navbar img[alt="CarDekho Group"] {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

/* ── Background utilities ── */
[data-bs-theme="dark"] .bg-white {
    background-color: #1e293b !important;
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .bg-light {
    background-color: #162032 !important;
    color: var(--bs-body-color);
}

/* ── Cards ── */
[data-bs-theme="dark"] .card {
    background-color: #1e293b;
    border-color: #2d3f55;
}
[data-bs-theme="dark"] .card-header {
    background-color: #1e293b !important;
    border-bottom-color: #2d3f55 !important;
}
[data-bs-theme="dark"] .card-footer {
    background-color: #162032;
    border-top-color: #2d3f55;
}

/* ── Tables ── */
[data-bs-theme="dark"] .table-hover tbody tr:hover {
    background-color: rgba(99,102,241,0.1);
}
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light > th,
[data-bs-theme="dark"] thead.table-light > tr > th {
    background-color: #162032 !important;
    color: var(--bs-body-color) !important;
    border-color: #2d3f55 !important;
}
[data-bs-theme="dark"] .table-warning {
    --bs-table-bg: rgba(245,158,11,0.12);
    --bs-table-color: var(--bs-body-color);
}
[data-bs-theme="dark"] .table {
    --bs-table-striped-bg: rgba(255,255,255,0.03);
    border-color: #2d3f55;
}

/* ── List groups ── */
[data-bs-theme="dark"] .list-group-item {
    background-color: #1e293b;
    border-color: #2d3f55;
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .list-group-item-action:hover,
[data-bs-theme="dark"] .list-group-item-action:focus {
    background-color: #243452;
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .list-group-item-warning {
    --bs-list-group-color: var(--bs-body-color);
    background-color: rgba(245,158,11,0.12) !important;
}

/* ── Dropdowns ── */
[data-bs-theme="dark"] .dropdown-menu {
    background-color: #1e293b;
    border-color: #2d3f55;
    --bs-dropdown-bg: #1e293b;
    --bs-dropdown-border-color: #2d3f55;
}
[data-bs-theme="dark"] .dropdown-item {
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: #243452;
    color: #e2e8f0;
}
[data-bs-theme="dark"] .dropdown-divider {
    border-color: #2d3f55;
}
[data-bs-theme="dark"] .dropdown-item.text-danger:hover {
    background-color: rgba(239,68,68,0.12);
    color: #f87171 !important;
}
/* Notification reply links */
[data-bs-theme="dark"] .notif-reply-link {
    color: var(--bs-body-color) !important;
}
[data-bs-theme="dark"] .notif-reply-link:hover {
    background: rgba(255,255,255,0.06) !important;
}

/* ── text-dark override (many views use this class on dark bg in dark mode) ── */
[data-bs-theme="dark"] .text-dark {
    color: #e2e8f0 !important;
}

/* ── Forms ── */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #0f172a;
    color: var(--bs-body-color);
    border-color: #2d3f55;
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: #0f172a;
    border-color: #6366f1;
    color: var(--bs-body-color);
    box-shadow: 0 0 0 .25rem rgba(99,102,241,.2);
}
[data-bs-theme="dark"] .form-control::placeholder {
    color: #475569;
}
[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-select:disabled {
    background-color: #162032;
    opacity: 0.7;
}
[data-bs-theme="dark"] .input-group-text {
    background-color: #1e293b;
    border-color: #2d3f55;
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .form-check-input {
    background-color: #0f172a;
    border-color: #475569;
}

/* ── DataTables ── */
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select {
    background-color: #0f172a;
    color: var(--bs-body-color);
    border-color: #2d3f55;
}
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter label,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length label {
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--bs-body-color) !important;
}
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #2d3f55 !important;
    border-color: #2d3f55 !important;
    color: #fff !important;
}
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #6366f1 !important;
    border-color: #6366f1 !important;
    color: #fff !important;
}

/* ── Modals ── */
[data-bs-theme="dark"] .modal-content {
    background-color: #1e293b;
    border-color: #2d3f55;
}
[data-bs-theme="dark"] .modal-header {
    border-bottom-color: #2d3f55;
}
[data-bs-theme="dark"] .modal-footer {
    border-top-color: #2d3f55;
}
[data-bs-theme="dark"] .modal-backdrop {
    --bs-backdrop-bg: #000;
}

/* ── Alerts ── */
[data-bs-theme="dark"] .alert-info {
    background-color: rgba(14,165,233,.12);
    border-color: rgba(14,165,233,.3);
    color: #7dd3fc;
}
[data-bs-theme="dark"] .alert-warning {
    background-color: rgba(245,158,11,.12);
    border-color: rgba(245,158,11,.3);
    color: #fcd34d;
}
[data-bs-theme="dark"] .alert-danger {
    background-color: rgba(239,68,68,.12);
    border-color: rgba(239,68,68,.3);
    color: #fca5a5;
}
[data-bs-theme="dark"] .alert-success {
    background-color: rgba(34,197,94,.12);
    border-color: rgba(34,197,94,.3);
    color: #86efac;
}
[data-bs-theme="dark"] .alert-secondary {
    background-color: rgba(100,116,139,.12);
    border-color: rgba(100,116,139,.3);
}

/* ── Badges ── */
[data-bs-theme="dark"] .badge.bg-light,
[data-bs-theme="dark"] .badge.text-dark {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}
[data-bs-theme="dark"] .badge.bg-secondary {
    background-color: #334155 !important;
}

/* ── Borders ── */
[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-start,
[data-bs-theme="dark"] .border-end {
    border-color: #2d3f55 !important;
}

/* ── Nav pills / tabs ── */
[data-bs-theme="dark"] .nav-pills .nav-link {
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .nav-pills .nav-link:hover {
    background-color: rgba(255,255,255,0.06);
}
[data-bs-theme="dark"] .nav-tabs {
    border-bottom-color: #2d3f55;
}
[data-bs-theme="dark"] .nav-tabs .nav-link {
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: #2d3f55 #2d3f55 transparent;
}
[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    background-color: #1e293b;
    border-color: #2d3f55 #2d3f55 #1e293b;
    color: #e2e8f0;
}

/* ── Accordion ── */
[data-bs-theme="dark"] .accordion-item {
    background-color: #1e293b;
    border-color: #2d3f55;
}
[data-bs-theme="dark"] .accordion-button {
    background-color: #1e293b;
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: #162032;
    color: #818cf8;
}
[data-bs-theme="dark"] .accordion-button::after {
    filter: invert(1);
}

/* ── Progress bars ── */
[data-bs-theme="dark"] .progress {
    background-color: #2d3f55;
}

/* ── Breadcrumbs ── */
[data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: #64748b;
}

/* ── Quill rich-text content areas ── */
[data-bs-theme="dark"] .ql-content {
    background-color: #0f172a !important;
    color: var(--bs-body-color);
    border-color: #2d3f55 !important;
}

/* ── Timeline ── */
[data-bs-theme="dark"] .timeline-item::before {
    border-color: #1e293b;
}

/* ── Scrollbars ── */
[data-bs-theme="dark"] ::-webkit-scrollbar-track {
    background: #1e293b;
}
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #475569;
}

/* ── Heatmap cells (audit_committee_dashboard) ── */
[data-bs-theme="dark"] .hm-critical { background: rgba(220,38,38,.22) !important; }
[data-bs-theme="dark"] .hm-high     { background: rgba(249,115,22,.18) !important; }
[data-bs-theme="dark"] .hm-medium   { background: rgba(234,179,8,.15) !important; }
[data-bs-theme="dark"] .hm-low      { background: rgba(14,165,233,.15) !important; }
[data-bs-theme="dark"] .hm-safe     { background: rgba(34,197,94,.15) !important; }
[data-bs-theme="dark"] .hm-critical .hm-count { color: #fca5a5 !important; }
[data-bs-theme="dark"] .hm-high .hm-count     { color: #fdba74 !important; }
[data-bs-theme="dark"] .hm-medium .hm-count   { color: #fde047 !important; }
[data-bs-theme="dark"] .hm-low .hm-count      { color: #7dd3fc !important; }
[data-bs-theme="dark"] .hm-safe .hm-count     { color: #86efac !important; }
[data-bs-theme="dark"] .hm-legend.hm-critical { background: rgba(220,38,38,.22) !important; color: #fca5a5 !important; }
[data-bs-theme="dark"] .hm-legend.hm-high     { background: rgba(249,115,22,.18) !important; color: #fdba74 !important; }
[data-bs-theme="dark"] .hm-legend.hm-medium   { background: rgba(234,179,8,.15) !important;  color: #fde047 !important; }
[data-bs-theme="dark"] .hm-legend.hm-low      { background: rgba(14,165,233,.15) !important; color: #7dd3fc !important; }
[data-bs-theme="dark"] .hm-legend.hm-safe     { background: rgba(34,197,94,.15) !important;  color: #86efac !important; }

/* ── Inline background overrides via attribute selectors ──────────────────
   Catches hardcoded light bg colors used as inline styles in views.
   These pastel backgrounds wash out on dark; replace with semi-transparent tints.
─────────────────────────────────────────────────────────────────────────── */
/* Filter cards */
[data-bs-theme="dark"] [style*="background:#f8f9fa"],
[data-bs-theme="dark"] [style*="background: #f8f9fa"] { background: #1a2744 !important; }
/* KPI icon backgrounds */
[data-bs-theme="dark"] [style*="background:#dbeafe"] { background: rgba(59,130,246,.18) !important; }
[data-bs-theme="dark"] [style*="background:#fee2e2"] { background: rgba(220,38,38,.18) !important; }
[data-bs-theme="dark"] [style*="background:#ede9fe"] { background: rgba(124,58,237,.18) !important; }
[data-bs-theme="dark"] [style*="background:#fef3c7"] { background: rgba(217,119,6,.18) !important; }
[data-bs-theme="dark"] [style*="background:#ffedd5"] { background: rgba(234,88,12,.18) !important; }
[data-bs-theme="dark"] [style*="background:#dcfce7"] { background: rgba(22,163,74,.18) !important; }
/* AC dashboard card backgrounds (yellow/green/cyan info cards) */
[data-bs-theme="dark"] [style*="background:#fff3cd"] { background: rgba(217,119,6,.15) !important; }
[data-bs-theme="dark"] [style*="background:#d1e7dd"] { background: rgba(22,163,74,.15) !important; }
[data-bs-theme="dark"] [style*="background:#cff4fc"] { background: rgba(14,165,233,.15) !important; }
/* Dark text-color values that become unreadable on dark backgrounds */
[data-bs-theme="dark"] [style*="color:#1e40af"] { color: #60a5fa !important; }
[data-bs-theme="dark"] [style*="color:#1d4ed8"] { color: #60a5fa !important; }
[data-bs-theme="dark"] [style*="color:#7d4000"] { color: #fdba74 !important; }
[data-bs-theme="dark"] [style*="color:#664d03"] { color: #fde047 !important; }
[data-bs-theme="dark"] [style*="color:#0c4a6e"] { color: #7dd3fc !important; }
[data-bs-theme="dark"] [style*="color:#155724"] { color: #86efac !important; }
[data-bs-theme="dark"] [style*="color:#842029"] { color: #fca5a5 !important; }

#themeToggleBtn {
    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
#themeToggleBtn:hover i {
    transform: rotate(20deg);
    display: inline-block;
    transition: transform 0.25s ease;
}

/* Mobile responsiveness */
@media (max-width: 992px) {
    .sidebar {
        position: fixed;
        left: -240px;
        transition: left 0.25s ease, width 0.25s ease, min-width 0.25s ease;
    }
    .sidebar.open {
        left: 0;
        box-shadow: 4px 0 20px rgba(0,0,0,.2);
    }
    /* On mobile, collapsed still fully hides (uses .open for show/hide) */
    .sidebar.collapsed {
        left: -60px;
    }
    .sidebar.collapsed.open {
        left: 0;
    }
}