/* ============================================
   FinStatement Pro - Metronic v9 Demo6 Style
   Clean white/zinc theme matching keenthemes.com/metronic/tailwind/demo6
   Applied over Metronic v8 Bootstrap
   ============================================ */

/* -- Inter font (matching demo6) -- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* -- Demo6 Design Tokens -- */
:root {
    /* Zinc palette (demo6 core) */
    --d6-zinc-50: #FAFAFA;
    --d6-zinc-100: #F4F4F5;
    --d6-zinc-200: #E4E4E7;
    --d6-zinc-300: #D4D4D8;
    --d6-zinc-400: #A1A1AA;
    --d6-zinc-500: #71717A;
    --d6-zinc-600: #52525B;
    --d6-zinc-700: #3F3F46;
    --d6-zinc-800: #27272A;
    --d6-zinc-900: #18181B;
    --d6-zinc-950: #09090B;
    /* Blue accent */
    --d6-blue-50: #EFF6FF;
    --d6-blue-100: #DBEAFE;
    --d6-blue-500: #3B82F6;
    --d6-blue-600: #2563EB;
    --d6-blue-700: #1D4ED8;
    /* Functional colors */
    --d6-green-500: #22C55E;
    --d6-green-600: #16A34A;
    --d6-green-50: #F0FDF4;
    --d6-red-500: #EF4444;
    --d6-red-600: #DC2626;
    --d6-red-50: #FEF2F2;
    --d6-amber-500: #F59E0B;
    --d6-amber-50: #FFFBEB;
    --d6-violet-500: #8B5CF6;
    --d6-violet-50: #F5F3FF;
    /* Layout */
    --d6-bg: var(--d6-zinc-100);
    --d6-card: #FFFFFF;
    --d6-sidebar: var(--d6-zinc-100);
    --d6-border: var(--d6-zinc-200);
    --d6-text: var(--d6-zinc-950);
    --d6-text-secondary: var(--d6-zinc-500);
    --d6-text-muted: var(--d6-zinc-400);
    --d6-radius: 0.5rem;
    /* Financial palette (on top of demo6) */
    --fs-blue: #185FA5;
    --fs-blue-light: #E6F1FB;
    --fs-green: #3B6D11;
    --fs-green-light: #EAF3DE;
    --fs-amber: #854F0B;
    --fs-amber-light: #FAEEDA;
    --fs-red: #A32D2D;
    --fs-red-light: #FCEBEB;
    --fs-purple: #3C3489;
    --fs-purple-light: #EEEDFE;
    --fs-ai-purple: #7F77DD;
}

/* ==========================================
   GLOBAL - Inter font + zinc bg
   ========================================== */

body {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
    background-color: var(--d6-bg) !important;
    color: var(--d6-text) !important;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================
   DEMO6 LAYOUT - Full layout overrides
   ========================================== */

/* Hide ALL v8 Metronic layout elements - demo6 uses custom layout */
#kt_app_header,
.app-header,
.app-toolbar,
.app-footer,
.app-sidebar-toggle,
.app-sidebar.flex-column[data-kt-drawer],
#kt_app_sidebar.app-sidebar,
.app-page > .app-header,
[data-kt-sticky="true"] { display: none !important; }

/* Remove v8 wrapper/page interference */
.app-root, .app-page, .app-wrapper, .app-main, .app-content,
#kt_app_page, #kt_app_wrapper, #kt_app_main,
#kt_app_content, #kt_app_content_container {
    padding: 0 !important;
    margin: 0 !important;
    background: #F4F4F5 !important;
    min-height: auto !important;
    border: none !important;
    box-shadow: none !important;
}
/* Kill any v8 sidebar completely */
div.app-sidebar[data-kt-drawer] {
    display: none !important;
    width: 0 !important;
    visibility: hidden !important;
}
/* Our custom aside sidebar should show */
aside#kt_app_sidebar {
    display: flex !important;
    visibility: visible !important;
}
/* Responsive: hide aside on mobile, show on lg */
@media (max-width: 991.98px) {
    aside#kt_app_sidebar:not(.demo6-mobile-open) {
        display: none !important;
    }
}

/* Body */
body { background-color: var(--d6-bg) !important; }

/* ==========================================
   COMPACT PAGE HEADERS
   Keeps top page headers and card headers dense across modules.
   ========================================== */

.d6-page-root h1 {
    font-size: 16px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 2px !important;
}

.d6-page-root h1 + p {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.d6-page-root .d-flex.justify-content-between:has(h1) {
    margin-bottom: 12px !important;
    gap: 12px !important;
}

.d6-page-root .card-header {
    min-height: 46px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.d6-page-root .card-header.border-0 {
    padding-top: 12px !important;
}

.d6-page-root .card-title h2,
.d6-page-root .card-title h3,
.d6-page-root .card-title .card-label {
    font-size: 14px !important;
    line-height: 1.3 !important;
    margin-bottom: 0 !important;
}

.d6-page-root .card-toolbar .btn,
.d6-page-root .card-header .btn,
.d6-page-root .d-flex.justify-content-between:has(h1) .btn {
    min-height: 30px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    font-size: 12px !important;
}

@media (max-width: 767.98px) {
    .d6-page-root h1 { font-size: 15px !important; }
    .d6-page-root h1 + p { font-size: 11px !important; }
    .d6-page-root .d-flex.justify-content-between:has(h1) {
        align-items: flex-start !important;
        flex-direction: column !important;
    }
}

/* ==========================================
   DEMO6 SIDEBAR MENU STYLES
   ========================================== */

/* Demo6 menu item */
.d6-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-family: Inter, sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    color: #3F3F46;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
    background: none;
    width: 100%;
    text-align: left;
    letter-spacing: -0.01em;
}
.d6-menu-item:hover {
    background: #FFFFFF;
    border-color: #E4E4E7;
    color: #09090B;
    text-decoration: none;
}
.d6-menu-item.active {
    background: #FFFFFF;
    border-color: #E4E4E7;
    color: #09090B;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.d6-menu-icon {
    font-size: 17px;
    color: #A1A1AA;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    transition: color 0.15s;
}
.d6-menu-item:hover .d6-menu-icon { color: #52525B; }
.d6-menu-item.active .d6-menu-icon { color: #09090B; }
.d6-menu-item span:not([class]) { flex: 1; }
button.d6-menu-toggle {
    background: none;
    outline: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
}
/* Section-label collapsible: no indent, items use full d6-menu-item style */
.d6-section-label + .d6-menu-group .d6-menu-sub {
    padding-left: 0;
}
.d6-section-label + .d6-menu-group .d6-menu-sub .d6-menu-item {
    padding: 7px 10px;
}
/* Arrow rotation on section label click */
.d6-section-label + .d6-menu-group.open ~ .d6-section-label i,
.d6-menu-group.open > .d6-menu-sub ~ i { transform: rotate(180deg); }
.d6-arrow {
    font-size: 9px;
    color: #D4D4D8;
    margin-left: auto;
    transition: transform 0.2s, color 0.15s;
}
.d6-menu-item:hover .d6-arrow { color: #A1A1AA; }
.d6-menu-group.open .d6-arrow { transform: rotate(180deg); color: #71717A; }

/* Sub-menu */
.d6-menu-sub {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding-left: 28px;
    margin-top: 4px;
    margin-bottom: 2px;
}
.d6-menu-sub.show,
.d6-menu-group.open .d6-menu-sub { display: flex; }
.d6-menu-subitem {
    display: flex;
    align-items: center;
    padding: 5px 8px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: var(--d6-zinc-500);
    text-decoration: none;
    transition: all 0.15s ease;
}
.d6-menu-subitem:hover {
    background: var(--d6-card);
    border-color: var(--d6-border);
    color: var(--d6-text);
    text-decoration: none;
}
.d6-menu-subitem:hover span[style*="background:#E4E4E7"] {
    background: var(--d6-card) !important;
    border-color: transparent !important;
}
.d6-menu-subitem.active {
    background: var(--d6-card);
    border-color: var(--d6-border);
    color: var(--d6-text);
    font-weight: 500;
}
.d6-menu-subitem.active span[style*="background:#E4E4E7"] {
    background: var(--d6-card) !important;
    border-color: transparent !important;
}

/* Section labels */
.d6-section-label {
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #52525B;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 6px 10px 4px;
}

/* ── Sidebar Badges ─────────────────────────────────── */

/* Count — small neutral circle with number */
.d6-badge-count {
    margin-left: auto !important;
    flex: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 5px !important;
    border-radius: 10px !important;
    background: #E4E4E7 !important;
    color: #52525B !important;
    font-family: Inter, sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    border: none !important;
    box-shadow: none !important;
}
.d6-menu-item.active .d6-badge-count,
.d6-menu-item:hover .d6-badge-count {
    background: #D4D4D8 !important;
    color: #3F3F46 !important;
}

/* Danger — solid red circle, high-signal */
.d6-badge-danger {
    margin-left: auto !important;
    flex: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 5px !important;
    border-radius: 10px !important;
    background: #E5383B !important;
    color: #FFFFFF !important;
    font-family: Inter, sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(229, 56, 59, 0.35) !important;
}

/* Soon — plain muted text, no background */
.d6-badge-soon {
    margin-left: auto !important;
    flex: none !important;
    display: inline !important;
    background: none !important;
    border: none !important;
    color: #A1A1AA !important;
    font-family: Inter, sans-serif !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.d6-menu-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Mobile sidebar open state */
.demo6-mobile-open {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 105 !important;
    box-shadow: 10px 0 40px rgba(0,0,0,0.15) !important;
}

/* ==========================================
   HEADER - White, clean, no shadow
   ========================================== */

.app-header {
    background-color: var(--d6-card) !important;
    border-bottom: 1px solid var(--d6-border) !important;
    box-shadow: none !important;
}

/* ==========================================
   MAIN CONTENT AREA - Zinc-100 bg
   ========================================== */

.app-content {
    background-color: var(--d6-bg) !important;
}

.app-toolbar {
    background-color: var(--d6-bg) !important;
}

/* ==========================================
   CARDS - White, rounded, thin border (demo6)
   ========================================== */

.card {
    background-color: var(--d6-card) !important;
    border: 1px solid var(--d6-border) !important;
    box-shadow: none !important;
    border-radius: var(--d6-radius) !important;
}

.card-header {
    border-bottom-color: var(--d6-border) !important;
    background-color: transparent !important;
}

.card-footer {
    border-top-color: var(--d6-border) !important;
    background-color: transparent !important;
}

/* ==========================================
   STAT CARDS
   ========================================== */

.fs-stat-card {
    transition: border-color 0.15s ease;
    cursor: pointer;
}
.fs-stat-card:hover {
    border-color: var(--d6-zinc-300) !important;
}
.fs-stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.fs-stat-label {
    font-size: 0.6875rem;
    color: var(--d6-text-secondary);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 500;
}
.fs-stat-sub {
    font-size: 0.625rem;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 20px;
    display: inline-block;
    font-weight: 500;
}

/* Sub-badge variants */
.fs-sub-blue { background: var(--fs-blue-light); color: var(--fs-blue); }
.fs-sub-green { background: var(--fs-green-light); color: var(--fs-green); }
.fs-sub-amber { background: var(--fs-amber-light); color: var(--fs-amber); }
.fs-sub-red { background: var(--fs-red-light); color: var(--fs-red); }
.fs-sub-purple { background: var(--fs-purple-light); color: var(--fs-purple); }
.fs-sub-gray { background: var(--d6-zinc-100); color: var(--d6-zinc-600); }

/* ==========================================
   KANBAN BOARD
   ========================================== */

.fs-kanban-col {
    background: var(--d6-card);
    border-radius: var(--d6-radius);
    padding: 12px;
    min-height: 280px;
    border: 1px solid var(--d6-border);
}
.fs-kanban-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--d6-border);
}
.fs-kanban-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
    flex-shrink: 0;
}
.fs-kanban-card {
    background: var(--d6-zinc-50);
    border: 1px solid var(--d6-border);
    border-radius: var(--d6-radius);
    padding: 10px 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.fs-kanban-card:hover {
    border-color: var(--d6-zinc-300);
    background: var(--d6-card);
}
.fs-kanban-card.fs-reconsider {
    border-left: 3px solid var(--d6-red-500);
}
.fs-kanban-card.fs-partner-review {
    border-left: 3px solid var(--d6-violet-500);
}

/* ==========================================
   MAPPING GRID - Color coded headers
   ========================================== */

.fs-grp-imported { background: var(--d6-blue-50) !important; }
.fs-grp-imported th { color: var(--d6-blue-700) !important; }
.fs-grp-bifurcate { background: var(--d6-amber-50) !important; }
.fs-grp-bifurcate th { color: var(--fs-amber) !important; }
.fs-grp-mapping { background: var(--d6-green-50) !important; }
.fs-grp-mapping th { color: var(--fs-green) !important; }
.fs-grp-statutory { background: var(--d6-violet-50) !important; }
.fs-grp-statutory th { color: var(--fs-purple) !important; }

/* Row states */
.fs-row-mapped { background: var(--d6-card); }
.fs-row-ai { background: var(--d6-violet-50); }
.fs-row-unmapped { background: var(--d6-amber-50); }
.fs-row-critical { background: var(--d6-red-50); }
.fs-row-selected { background: var(--d6-blue-50) !important; outline: 1px solid var(--d6-blue-500); }

.fs-cell-needs-mapping {
    border: 1px dashed var(--d6-amber-500) !important;
    background: var(--d6-amber-50);
}
.fs-cell-critical-mapping {
    border: 1px dashed var(--d6-red-500) !important;
    background: var(--d6-red-50);
}

.fs-group-separator td {
    background: var(--d6-zinc-100) !important;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--d6-zinc-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 12px !important;
}

.fs-ai-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fs-ai-purple);
    margin-right: 4px;
    vertical-align: middle;
}

/* ==========================================
   STATUS BADGES
   ========================================== */

.fs-badge-generate { background: var(--d6-blue-50); color: var(--d6-blue-600); font-weight: 500; }
.fs-badge-reconsider { background: var(--d6-red-50); color: var(--d6-red-600); font-weight: 500; }
.fs-badge-am-review { background: var(--d6-amber-50); color: var(--fs-amber); font-weight: 500; }
.fs-badge-partner { background: var(--d6-violet-50); color: var(--d6-violet-500); font-weight: 500; }
.fs-badge-approved { background: var(--d6-green-50); color: var(--d6-green-600); font-weight: 500; }
.fs-badge-locked { background: var(--d6-zinc-100); color: var(--d6-zinc-600); font-weight: 500; }

/* ==========================================
   ACTION BUTTONS
   ========================================== */

.fs-btn-prepare { background: var(--d6-blue-500); color: white; border: none; border-radius: var(--d6-radius); font-weight: 500; font-size: 12px; transition: background 0.15s; }
.fs-btn-prepare:hover { background: var(--d6-blue-700); color: white; }
.fs-btn-correct { background: var(--d6-red-500); color: white; border: none; border-radius: var(--d6-radius); font-weight: 500; font-size: 12px; }
.fs-btn-correct:hover { background: var(--d6-red-600); color: white; }
.fs-btn-review { background: var(--d6-violet-500); color: white; border: none; border-radius: var(--d6-radius); font-weight: 500; font-size: 12px; }
.fs-btn-review:hover { background: var(--d6-violet-500); color: white; }
.fs-btn-review-am { background: var(--d6-amber-500); color: white; border: none; border-radius: var(--d6-radius); font-weight: 500; font-size: 12px; }
.fs-btn-view-fs { background: var(--d6-green-50); color: var(--d6-green-600); border: 1px solid #BBF7D0; border-radius: var(--d6-radius); font-weight: 500; font-size: 12px; }
.fs-btn-view-fs:hover { background: var(--d6-green-500); color: white; }
.fs-btn-submit { background: var(--d6-blue-50); color: var(--d6-blue-600); border: 1px solid var(--d6-blue-100); border-radius: var(--d6-radius); font-weight: 500; }

/* ==========================================
   PROGRESS SEGMENTS
   ========================================== */

.fs-progress-seg { height: 4px; width: 12px; border-radius: 2px; display: inline-block; }
.fs-seg-done { background: var(--d6-green-500); }
.fs-seg-active { background: var(--d6-blue-500); }
.fs-seg-pending { background: var(--d6-zinc-300); }

/* ==========================================
   ENTITY TYPE BADGES
   ========================================== */

.fs-entity-npo { background: var(--d6-green-50); color: var(--d6-green-600); }
.fs-entity-llp { background: var(--d6-blue-50); color: var(--d6-blue-600); }
.fs-entity-corporate { background: var(--d6-amber-50); color: var(--fs-amber); }
.fs-entity-trust { background: var(--d6-violet-50); color: var(--d6-violet-500); }
.fs-entity-society { background: #FFF7ED; color: #9A3412; }

.fs-task-row { transition: background 0.1s ease; }
.fs-task-row:hover { background: var(--d6-zinc-50) !important; }

/* ==========================================
   QUICK ACTION BUTTONS
   ========================================== */

.fs-quick-btn {
    border: 1px solid var(--d6-border);
    border-radius: var(--d6-radius);
    padding: 12px 8px;
    font-size: 0.8rem;
    color: var(--d6-text-secondary);
    cursor: pointer;
    text-align: center;
    background: var(--d6-card);
    transition: all 0.15s;
}
.fs-quick-btn:hover { background: var(--d6-zinc-50); color: var(--d6-text); border-color: var(--d6-zinc-300); }
.fs-quick-btn-primary { background: var(--d6-blue-50); color: var(--d6-blue-600); border-color: var(--d6-blue-100); }
.fs-quick-btn-primary:hover { background: var(--d6-blue-500); color: white; }

/* ==========================================
   TABLES
   ========================================== */

.table > :not(caption) > * > * { padding: 0.65rem 0.75rem; }
.table-bordered > :not(caption) > * > * { border-width: 1px; border-color: var(--d6-border); }

/* ==========================================
   FORM CONTROLS - Match demo6 zinc inputs
   ========================================== */

.form-control-solid, .form-select-solid {
    background-color: var(--d6-zinc-50) !important;
    border-color: var(--d6-border) !important;
    border-radius: var(--d6-radius) !important;
}
.form-control-solid:focus, .form-select-solid:focus {
    background-color: var(--d6-card) !important;
    border-color: var(--d6-blue-500) !important;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.15) !important;
}

/* ==========================================
   BUTTONS - Demo6 blue primary
   ========================================== */

.btn-primary { background-color: var(--d6-blue-500) !important; border-color: var(--d6-blue-500) !important; border-radius: var(--d6-radius) !important; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--d6-blue-700) !important; border-color: var(--d6-blue-700) !important; }
.btn-light-primary { background-color: var(--d6-blue-50) !important; color: var(--d6-blue-600) !important; border-radius: var(--d6-radius) !important; }
.btn-light-primary:hover { background-color: var(--d6-blue-500) !important; color: white !important; }
.btn-light { background-color: var(--d6-zinc-50) !important; border-color: var(--d6-border) !important; color: var(--d6-zinc-600) !important; border-radius: var(--d6-radius) !important; }
.btn-light:hover { background-color: var(--d6-zinc-100) !important; color: var(--d6-text) !important; }
.btn { border-radius: var(--d6-radius) !important; }

/* ==========================================
   BADGES - Softer demo6 style
   ========================================== */

.badge { border-radius: 20px; font-weight: 500; }
.badge-light-primary { background-color: var(--d6-blue-50) !important; color: var(--d6-blue-600) !important; }
.badge-light-success { background-color: var(--d6-green-50) !important; color: var(--d6-green-600) !important; }
.badge-light-warning { background-color: var(--d6-amber-50) !important; color: var(--fs-amber) !important; }
.badge-light-danger { background-color: var(--d6-red-50) !important; color: var(--d6-red-600) !important; }
.badge-light-info { background-color: var(--d6-violet-50) !important; color: var(--d6-violet-500) !important; }
.badge-light-secondary { background-color: var(--d6-zinc-100) !important; color: var(--d6-zinc-600) !important; }

/* ==========================================
   PROGRESS BARS
   ========================================== */

.progress { background-color: var(--d6-zinc-200) !important; border-radius: 99px !important; }

/* ==========================================
   PAGINATION
   ========================================== */

.page-item.active .page-link { background-color: var(--d6-blue-500) !important; border-color: var(--d6-blue-500) !important; }

/* ==========================================
   NAV TABS - Demo6 clean underline
   ========================================== */

.nav-line-tabs .nav-link.active { border-bottom-color: var(--d6-blue-500) !important; color: var(--d6-text) !important; }
.nav-line-tabs .nav-link { color: var(--d6-text-secondary) !important; }
.nav-line-tabs .nav-link:hover { color: var(--d6-text) !important; }

/* ==========================================
   SEPARATOR / FOOTER
   ========================================== */

.separator { border-color: var(--d6-border) !important; }
.app-footer { background-color: var(--d6-bg) !important; border-top: 1px solid var(--d6-border) !important; }

/* ==========================================
   SCROLLBAR - Thin
   ========================================== */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--d6-zinc-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--d6-zinc-400); }

/* ==========================================
   NUMBER FORMATTING
   ========================================== */

.fs-num { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.fs-num-credit { color: var(--d6-green-600); }
.fs-num-debit { color: var(--d6-blue-600); }
.fs-num-negative { color: var(--d6-red-600); }
.fs-nat-dr { color: var(--d6-blue-600); font-size: 0.7rem; font-weight: 500; }
.fs-nat-cr { color: var(--d6-green-600); font-size: 0.7rem; font-weight: 500; }

/* ==========================================
   BULK ACTION BAR
   ========================================== */

.fs-bulk-bar { background: var(--d6-blue-500); color: white; border-radius: var(--d6-radius); padding: 8px 16px; }

/* ==========================================
   SELECT2 - Match demo6 inputs
   ========================================== */

.select2-container--bootstrap5 .select2-selection {
    background-color: var(--d6-zinc-50) !important;
    border-color: var(--d6-border) !important;
    border-radius: var(--d6-radius) !important;
}
.select2-container--bootstrap5.select2-container--focus .select2-selection {
    border-color: var(--d6-blue-500) !important;
}

/* ==========================================
   LEGEND BOX
   ========================================== */

.fs-legend { background: var(--d6-zinc-50); border: 1px solid var(--d6-border); border-radius: var(--d6-radius); padding: 8px 14px; }

/* ==========================================
   TEXT UTILITY OVERRIDES
   ========================================== */

.text-gray-900, .text-gray-800 { color: var(--d6-zinc-900) !important; }
.text-gray-700 { color: var(--d6-zinc-700) !important; }
.text-gray-600 { color: var(--d6-zinc-600) !important; }
.text-gray-500, .text-muted { color: var(--d6-zinc-500) !important; }
.text-gray-400 { color: var(--d6-zinc-400) !important; }
.text-primary { color: var(--d6-blue-500) !important; }
.bg-light { background-color: var(--d6-zinc-50) !important; }
.bg-light-primary { background-color: var(--d6-blue-50) !important; }
.bg-light-success { background-color: var(--d6-green-50) !important; }
.bg-light-warning { background-color: var(--d6-amber-50) !important; }
.bg-light-danger { background-color: var(--d6-red-50) !important; }
.bg-light-info { background-color: var(--d6-violet-50) !important; }

/* ==========================================
   DEMO6: Main content wrapper = rounded white card
   ========================================== */

.app-main {
    background-color: var(--d6-bg) !important;
}

.app-wrapper {
    background-color: var(--d6-bg) !important;
}

/* Remove inner card borders/shadow when nested inside the content container */
#kt_app_content_container > .card {
    border: 1px solid var(--d6-border) !important;
    box-shadow: none !important;
}

/* ==========================================
   MODALS - Demo6 clean style
   ========================================== */

.modal-content {
    background-color: var(--d6-card) !important;
    border: 1px solid var(--d6-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 25px 50px rgba(0,0,0,0.12) !important;
}
.modal-header {
    border-bottom: 1px solid var(--d6-border) !important;
    padding: 16px 20px !important;
}
.modal-header .modal-title { font-weight: 600 !important; font-size: 15px !important; color: var(--d6-text) !important; }
.modal-footer {
    border-top: 1px solid var(--d6-border) !important;
    padding: 12px 20px !important;
}
.modal-body { padding: 20px !important; }
.btn-close { opacity: 0.4 !important; }
.btn-close:hover { opacity: 0.7 !important; }
.modal-backdrop.show { opacity: 0.3 !important; }

/* ==========================================
   DROPDOWNS - Demo6 style
   ========================================== */

.dropdown-menu {
    background-color: var(--d6-card) !important;
    border: 1px solid var(--d6-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
    padding: 6px !important;
    font-size: 13px !important;
    z-index: 1060 !important;
}
/* Ensure dropdowns are not clipped by parent containers */
.btn-group, .dropdown { position: static !important; }
.btn-group .dropdown-menu,
.dropdown .dropdown-menu,
.dropdown-menu.show {
    position: fixed !important;
    z-index: 1080 !important;
}
.dropdown-item {
    border-radius: 6px !important;
    padding: 7px 12px !important;
    color: var(--d6-zinc-600) !important;
    font-size: 13px !important;
}
.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--d6-zinc-50) !important;
    color: var(--d6-text) !important;
}
.dropdown-divider {
    border-color: var(--d6-border) !important;
    margin: 4px 0 !important;
}

/* ==========================================
   ALERTS / NOTICES - Demo6 rounded
   ========================================== */

.alert, .notice {
    border-radius: 8px !important;
    font-size: 13px !important;
}
.alert-success { background-color: var(--d6-green-50) !important; border-color: #BBF7D0 !important; color: var(--d6-green-600) !important; }
.alert-danger { background-color: var(--d6-red-50) !important; border-color: #FECACA !important; color: var(--d6-red-600) !important; }
.alert-warning { background-color: var(--d6-amber-50) !important; border-color: #FDE68A !important; color: var(--fs-amber) !important; }
.alert-info, .alert-primary { background-color: var(--d6-blue-50) !important; border-color: var(--d6-blue-100) !important; color: var(--d6-blue-700) !important; }

/* ==========================================
   TABLES - Demo6 clean, no heavy borders
   ========================================== */

.table {
    font-size: 13px !important;
    color: var(--d6-text) !important;
}
.table > thead > tr > th {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--d6-zinc-500) !important;
    background-color: var(--d6-zinc-50) !important;
    border-bottom: 1px solid var(--d6-border) !important;
    padding: 10px 12px !important;
    white-space: nowrap;
}
.table > tbody > tr {
    border-bottom: 1px solid var(--d6-border) !important;
}
.table > tbody > tr:last-child {
    border-bottom: none !important;
}
.table > tbody > tr:hover {
    background-color: var(--d6-zinc-50) !important;
}
.table > tbody > tr > td {
    padding: 10px 12px !important;
    vertical-align: middle !important;
    color: var(--d6-zinc-700) !important;
}

/* Table row bordered - thinner borders */
.table-row-bordered > tbody > tr {
    border-bottom-width: 1px !important;
    border-bottom-color: var(--d6-border) !important;
}

/* ==========================================
   TOOLTIPS
   ========================================== */

.tooltip-inner {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    border-radius: 6px !important;
    padding: 5px 10px !important;
    background-color: var(--d6-zinc-900) !important;
}

/* ==========================================
   SWAL (SweetAlert2) - Match demo6
   ========================================== */

.swal2-popup {
    border-radius: 12px !important;
    font-family: 'Inter', sans-serif !important;
    border: 1px solid var(--d6-border) !important;
}
.swal2-title { font-weight: 600 !important; font-size: 18px !important; color: var(--d6-text) !important; }
.swal2-html-container { font-size: 14px !important; color: var(--d6-zinc-600) !important; }
.swal2-confirm { border-radius: 8px !important; }
.swal2-cancel { border-radius: 8px !important; }

/* ==========================================
   TOASTR - Demo6 style
   ========================================== */

.toast { border-radius: 8px !important; font-family: 'Inter', sans-serif !important; }

/* ==========================================
   ACCORDION / COLLAPSE
   ========================================== */

.accordion-button {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--d6-text) !important;
    background-color: var(--d6-card) !important;
    border-radius: 8px !important;
}
.accordion-button:not(.collapsed) {
    background-color: var(--d6-zinc-50) !important;
    color: var(--d6-text) !important;
    box-shadow: none !important;
}
.accordion-item {
    border-color: var(--d6-border) !important;
    border-radius: 8px !important;
}

/* ==========================================
   TABS - Demo6 underline style
   ========================================== */

.nav-tabs {
    border-bottom: 1px solid var(--d6-border) !important;
}
.nav-tabs .nav-link {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--d6-text-secondary) !important;
    border: none !important;
    padding: 10px 16px !important;
}
.nav-tabs .nav-link.active {
    color: var(--d6-text) !important;
    border-bottom: 2px solid var(--d6-blue-500) !important;
    background: transparent !important;
}
.nav-tabs .nav-link:hover {
    color: var(--d6-text) !important;
    border-color: transparent !important;
}

/* ==========================================
   BREADCRUMBS - Demo6 minimal
   ========================================== */

.breadcrumb {
    font-size: 12px !important;
}
.breadcrumb-item a {
    color: var(--d6-text-secondary) !important;
}
.breadcrumb-item.active {
    color: var(--d6-text) !important;
}
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--d6-zinc-400) !important;
}

/* ==========================================
   NOTICE / INFO BOXES - Demo6
   ========================================== */

.notice.bg-light-primary,
.notice.bg-light-info {
    background-color: var(--d6-blue-50) !important;
    border-color: var(--d6-blue-100) !important;
}
.notice.bg-light-danger {
    background-color: var(--d6-red-50) !important;
    border-color: #FECACA !important;
}
.notice.bg-light-warning {
    background-color: var(--d6-amber-50) !important;
    border-color: #FDE68A !important;
}
.notice.bg-light-success {
    background-color: var(--d6-green-50) !important;
    border-color: #BBF7D0 !important;
}

/* ==========================================
   CHECKBOX / SWITCH - Demo6 style
   ========================================== */

.form-check-input {
    border-color: var(--d6-zinc-300) !important;
    border-radius: 4px !important;
}
.form-check-input:checked {
    background-color: var(--d6-blue-500) !important;
    border-color: var(--d6-blue-500) !important;
}

/* ==========================================
   CARD HEADER COLLAPSE ICONS
   ========================================== */

.card-header.collapsible {
    cursor: pointer;
}
.card-header .card-toolbar .rotate-180 {
    transition: transform 0.2s ease;
}

/* ==========================================
   PAGE TITLE - Demo6 style
   ========================================== */

h1, .fs-2x {
    font-weight: 600 !important;
    letter-spacing: -0.02em;
}

/* ==========================================
   TOOLBAR AREA
   ========================================== */

.app-toolbar {
    border-bottom: none !important;
}

/* ==========================================
   PAGINATION - Demo6 rounded
   ========================================== */

.pagination .page-link {
    border-radius: 6px !important;
    border-color: var(--d6-border) !important;
    color: var(--d6-zinc-600) !important;
    font-size: 12px !important;
    margin: 0 2px !important;
}
.pagination .page-item.active .page-link {
    background-color: var(--d6-blue-500) !important;
    border-color: var(--d6-blue-500) !important;
    color: white !important;
}
.pagination .page-link:hover {
    background-color: var(--d6-zinc-50) !important;
}

/* ==========================================
   FOOTER - Clean
   ========================================== */

.app-footer {
    background-color: transparent !important;
    border-top: none !important;
}

/* ==========================================
   GLOBAL: All remaining Metronic components
   Ensures EVERY page looks elegant
   ========================================== */

/* -- Card titles -- */
.card-title { font-size: 15px !important; font-weight: 600 !important; color: var(--d6-text) !important; }
.card-title .fs-2x, .card-title .fs-2qx { font-size: 22px !important; }
.card-label { font-weight: 600 !important; color: var(--d6-text) !important; }

/* -- Form labels -- */
.form-label { font-size: 13px !important; font-weight: 500 !important; color: var(--d6-zinc-700) !important; }
.form-text { font-size: 12px !important; color: var(--d6-zinc-400) !important; }

/* -- All form controls (not just solid) -- */
.form-control, .form-select {
    border-color: var(--d6-border) !important;
    border-radius: var(--d6-radius) !important;
    font-size: 13px !important;
    color: var(--d6-text) !important;
}
.form-control:focus, .form-select:focus {
    border-color: var(--d6-blue-500) !important;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.12) !important;
}
.form-control::placeholder { color: var(--d6-zinc-400) !important; }

/* -- All button variants -- */
.btn { font-size: 13px !important; font-weight: 500 !important; border-radius: 8px !important; transition: all 0.15s !important; }
.btn-success { background-color: #10B981 !important; border-color: #10B981 !important; }
.btn-success:hover { background-color: #059669 !important; border-color: #059669 !important; }
.btn-danger { background-color: #EF4444 !important; border-color: #EF4444 !important; }
.btn-danger:hover { background-color: #DC2626 !important; border-color: #DC2626 !important; }
.btn-warning { background-color: #F59E0B !important; border-color: #F59E0B !important; color: #fff !important; }
.btn-warning:hover { background-color: #D97706 !important; }
.btn-info { background-color: #8B5CF6 !important; border-color: #8B5CF6 !important; color: #fff !important; }
.btn-info:hover { background-color: #7C3AED !important; }
.btn-dark { background-color: #18181B !important; border-color: #18181B !important; }
.btn-light-success { background-color: #F0FDF4 !important; color: #059669 !important; }
.btn-light-success:hover { background-color: #10B981 !important; color: #fff !important; }
.btn-light-danger { background-color: #FEF2F2 !important; color: #DC2626 !important; }
.btn-light-danger:hover { background-color: #EF4444 !important; color: #fff !important; }
.btn-light-warning { background-color: #FFFBEB !important; color: #D97706 !important; }
.btn-light-warning:hover { background-color: #F59E0B !important; color: #fff !important; }
.btn-light-info { background-color: #F5F3FF !important; color: #7C3AED !important; }
.btn-light-info:hover { background-color: #8B5CF6 !important; color: #fff !important; }
.btn-outline { border: 1px solid var(--d6-border) !important; color: var(--d6-zinc-600) !important; background: transparent !important; }
.btn-outline:hover { background: var(--d6-zinc-50) !important; }

/* -- Icon buttons -- */
.btn-icon { border-radius: 8px !important; }
.btn-active-light-primary:hover, .btn-active-light-primary.active { background-color: var(--d6-blue-50) !important; color: var(--d6-blue-600) !important; }

/* -- Dashed border cards (notice boxes) -- */
.border-dashed { border-style: dashed !important; }
.border-primary { border-color: var(--d6-blue-100) !important; }
.border-success { border-color: #BBF7D0 !important; }
.border-warning { border-color: #FDE68A !important; }
.border-danger { border-color: #FECACA !important; }
.border-info { border-color: #C4B5FD !important; }

/* -- Background light variants -- */
.bg-light-primary { background-color: var(--d6-blue-50) !important; }
.bg-light-success { background-color: #F0FDF4 !important; }
.bg-light-warning { background-color: #FFFBEB !important; }
.bg-light-danger { background-color: #FEF2F2 !important; }
.bg-light-info { background-color: #F5F3FF !important; }

/* -- Text colors for success/danger/info/warning -- */
.text-success { color: #10B981 !important; }
.text-danger { color: #EF4444 !important; }
.text-warning { color: #F59E0B !important; }
.text-info { color: #8B5CF6 !important; }

/* -- Card collapsible headers -- */
.card-header.collapsible .card-title { font-size: 14px !important; }
.card-header.collapsible:hover { background: var(--d6-zinc-50) !important; border-radius: 12px 12px 0 0 !important; }

/* -- List groups -- */
.list-group-item { border-color: var(--d6-border) !important; font-size: 13px !important; color: var(--d6-zinc-700) !important; }
.list-group-item.active { background-color: var(--d6-blue-50) !important; border-color: var(--d6-blue-100) !important; color: var(--d6-blue-600) !important; }

/* -- KT DataTables (Livewire tables) -- */
table.dataTable thead th { font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; color: var(--d6-zinc-500) !important; background: var(--d6-zinc-50) !important; }
table.dataTable tbody td { font-size: 13px !important; color: var(--d6-zinc-700) !important; }
table.dataTable tbody tr:hover { background: var(--d6-zinc-50) !important; }
.dataTables_wrapper .dataTables_info { font-size: 12px !important; color: var(--d6-zinc-500) !important; }

/* -- Metronic KPI cards (fs-2qx numbers) -- */
.fs-2qx { font-weight: 700 !important; letter-spacing: -0.02em; }
.fs-1 { font-weight: 600 !important; }

/* -- Section headings in task show page -- */
.fw-bolder { font-weight: 700 !important; }

/* -- Select2 dropdown -- */
.select2-dropdown { border-color: var(--d6-border) !important; border-radius: 8px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important; }
.select2-results__option--highlighted { background-color: var(--d6-blue-50) !important; color: var(--d6-blue-600) !important; }
.select2-results__option--selected { background-color: var(--d6-zinc-50) !important; }
.select2-search__field { border-color: var(--d6-border) !important; border-radius: 6px !important; }

/* -- Timeline / Activity elements -- */
.timeline-item .timeline-line { background-color: var(--d6-border) !important; }
.timeline-item .timeline-icon { border-color: var(--d6-border) !important; }

/* -- Stepper / Wizard -- */
.stepper .stepper-item .stepper-icon { border-color: var(--d6-border) !important; }
.stepper .stepper-item.current .stepper-icon { background-color: var(--d6-blue-500) !important; border-color: var(--d6-blue-500) !important; }
.stepper .stepper-item.completed .stepper-icon { background-color: #10B981 !important; border-color: #10B981 !important; }

/* -- Image/Avatar circles -- */
.symbol .symbol-label { border-radius: 8px !important; }
.symbol-circle .symbol-label { border-radius: 50% !important; }

/* -- Separator -- */
.separator.separator-dashed { border-style: dashed !important; border-color: var(--d6-border) !important; }

/* -- Scrollable areas -- */
.scroll-y::-webkit-scrollbar, .hover-scroll-overlay-y::-webkit-scrollbar { width: 5px; }
.scroll-y::-webkit-scrollbar-thumb, .hover-scroll-overlay-y::-webkit-scrollbar-thumb { background: var(--d6-zinc-300); border-radius: 3px; }

/* -- Link styling -- */
a.text-hover-primary:hover { color: var(--d6-blue-500) !important; }
a.text-primary:hover { color: var(--d6-blue-700) !important; }

/* -- Input groups -- */
.input-group-text { background-color: var(--d6-zinc-50) !important; border-color: var(--d6-border) !important; color: var(--d6-zinc-500) !important; border-radius: 8px !important; }

/* -- Spinner -- */
.spinner-border { color: var(--d6-blue-500) !important; }

/* ==========================================
   ICONS - Professional v9 filled style
   ========================================== */

/* Base icon styling - crisp, consistent */
[class*="ki-filled"],
[class*="ki-outline"],
[class*="ki-duotone"],
[class*="ki-solid"] {
    font-style: normal !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Default icon color: zinc-500 for subtle, professional look */
.menu-icon i,
.menu-icon [class*="ki-"] {
    color: var(--d6-zinc-400) !important;
    font-size: 18px !important;
    transition: color 0.15s ease !important;
}

/* Active/hover menu icon = darker */
.menu-link.active .menu-icon i,
.menu-link.active .menu-icon [class*="ki-"],
.menu-link:hover .menu-icon i,
.menu-link:hover .menu-icon [class*="ki-"],
.d6-menu-item.active .d6-menu-icon,
.d6-menu-item:hover .d6-menu-icon {
    color: var(--d6-text) !important;
}

/* Card header icons */
.card-title i,
.card-title [class*="ki-"] {
    color: var(--d6-blue-500) !important;
}

/* Button icons - inherit button color */
.btn i, .btn [class*="ki-"] {
    font-size: inherit !important;
}

/* Icon in badge - smaller */
.badge i, .badge [class*="ki-"] {
    font-size: 10px !important;
}

/* Table action icon buttons - clean look */
.btn-icon i,
.btn-icon [class*="ki-"] {
    font-size: 16px !important;
}

/* Notice/alert icons */
.notice i,
.notice [class*="ki-"],
.alert i,
.alert [class*="ki-"] {
    font-size: 20px !important;
}

/* Sidebar demo6 icons */
.d6-menu-icon {
    font-size: 18px !important;
    color: var(--d6-zinc-400) !important;
    width: 22px !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.15s ease !important;
}
.d6-menu-item.active .d6-menu-icon,
.d6-menu-item:hover .d6-menu-icon {
    color: var(--d6-zinc-900) !important;
}

/* Breadcrumb separator icon */
.breadcrumb-item + .breadcrumb-item::before {
    font-size: 10px !important;
}

/* KT icon sizes (fs-1 through fs-7) - refined scale */
i.fs-1, [class*="ki-"].fs-1 { font-size: 22px !important; }
i.fs-2, [class*="ki-"].fs-2 { font-size: 18px !important; }
i.fs-3, [class*="ki-"].fs-3 { font-size: 16px !important; }
i.fs-4, [class*="ki-"].fs-4 { font-size: 15px !important; }
i.fs-5, [class*="ki-"].fs-5 { font-size: 14px !important; }
i.fs-6, [class*="ki-"].fs-6 { font-size: 13px !important; }
i.fs-7, [class*="ki-"].fs-7 { font-size: 12px !important; }
i.fs-8, [class*="ki-"].fs-8 { font-size: 11px !important; }

/* Quick action panel icons */
.fs-quick-btn i,
.fs-quick-btn [class*="ki-"] {
    font-size: 20px !important;
    color: inherit !important;
    display: block !important;
    margin-bottom: 4px !important;
}

/* Dashboard stat icons */
.fs-stat-card i,
.fs-stat-card [class*="ki-"] {
    font-size: 14px !important;
}