/* =====================================================================
   AGS SmartDealer — UI THEME & DESIGN STANDARD
   Load this AFTER task-manager.css. Change the whole look for another
   project by editing ONLY the variables in :root below.
   ===================================================================== */
:root {
    --primary: #059669;
    --primary-dark: #047857;
    --primary-soft: #ECFDF5;
    --nav: #065F46;
    --nav-deep: #044E3A;
    --bg: #F4FBF7;
    --surface: #FFFFFF;
    --border: #D1FAE5;
    --text: #064E3B;
    --muted: #4B7A6E;
    --success: #10B981;
    --danger: #b42318;
    --radius: 14px;
    --shadow: 0 8px 24px rgba(6, 95, 70, 0.08);

    /* Legacy mapping for UI compatibility */
    --ui-primary: var(--primary);
    --ui-primary-dark: var(--primary-dark);
    --ui-primary-soft: var(--primary-soft);
    --ui-success: var(--success);
    --ui-warning: #f59e0b;
    --ui-danger: var(--danger);
    --ui-info: #059669;
    --ui-text: var(--text);
    --ui-muted: var(--muted);
    --ui-border: var(--border);
    --ui-border-dark: #A7F3D0;
    --ui-background: var(--bg);
    --ui-card-background: var(--surface);

    /* Bootstrap bridge so btn-primary etc. follow the theme */
    --bs-primary: var(--primary);
    --bs-primary-rgb: 5, 150, 105;
    --bs-body-color: var(--text);
    --bs-body-bg: var(--bg);
    --bs-border-color: var(--border);

    /* Sidebar Theme Palette - Dark Teal System */
    --sidebar-primary: #0C6B61;
    --sidebar-secondary: #0F7A6D;
    --sidebar-accent: #14877A;
    --sidebar-surface: #0E6B5F;
    --sidebar-active: #E8F7F5;
    --sidebar-hover: #14877A;
    --sidebar-text: #FFFFFF;
    --sidebar-muted: #E6F8F5;
    --sidebar-heading: #8CCFC6;
    --sidebar-border: rgba(255, 255, 255, 0.12);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}

/* ------------------------------ typography ------------------------------ */
.tm-page-header h1, .page-header h1 { font-size: 24px; font-weight: 800; color: var(--text); }
.tm-ph-desc, .page-header p { font-size: 13px; color: var(--muted); margin: 5px 0 0; }
.card-header { font-size: 16px; font-weight: 700; color: var(--text); }
.table thead th { font-size: 12px; }
.table tbody td { font-size: 13px; }
.form-label, label { font-size: 12px; font-weight: 700; color: #344054; margin-bottom: 6px; }
.form-control, .form-select, input, select, textarea { font-size: 13px; }
.btn { font-size: 13px; font-weight: 600; }
.badge { font-size: 12px; }
.form-text { font-size: 12px; color: var(--muted); }
.modal-title { font-size: 19px; font-weight: 700; }
.tm-summary-value, .summary-value { font-size: 24px; font-weight: 800; color: var(--text); }
.tm-summary-label, .summary-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }

/* ------------------------------ buttons -------------------------------- */
button, .btn-primary, .primary-btn {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
    border-radius: 8px;
    font-weight: 700;
}
button:hover, .btn-primary:hover, .btn-primary:focus, .primary-btn:hover {
    background: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    color: #ffffff !important;
}
.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
    border-radius: 8px;
    font-weight: 700;
}
.btn-outline-primary:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}
.secondary-btn, .btn-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #344054;
    background: #ffffff;
    border: 1px solid #bdcbe0;
    border-radius: 8px;
    font-weight: 700;
}
.text-primary { color: var(--primary) !important; }
a { color: var(--primary); }

/* ------------------------------ Layout & Top Spacing Removal ---------------------------- */
.app-main > .app-content,
.app-content {
    padding-top: 6px !important;
}
.app-main > .app-content > .container-fluid,
.app-content > .container-fluid {
    padding-top: 0 !important;
}

/* ------------------------------ Mobile page-background fix (central) ----------------------
   The main content wrapper is transparent by default (AdminLTE), so whatever sits behind it
   shows through. On desktop that is the light body; on mobile the dark sidebar bleeds (see the
   sidebar media-query fix below). Painting the main wrapper with the intended light page colour
   guarantees every shared page keeps the correct background on all breakpoints. Desktop colour is
   unchanged (same light tone as the body). No card/page-specific colours are touched. */
.app-main {
    background: var(--bg) !important;
}

/* ------------------------------ Central Page Hero Header (Executive Dark Cyan/Navy Banner) ---------------------------- */
.page-header,
.tm-page-header {
    background: radial-gradient(circle at 85% 15%, rgba(56, 189, 248, 0.18), transparent 45%), radial-gradient(circle at 10% 90%, rgba(37, 99, 235, 0.14), transparent 45%), linear-gradient(135deg, #071f29 0%, #092736 50%, #0b1a38 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-bottom: 3.5px solid #020c12 !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 32px -4px rgba(0, 0, 0, 0.38), 0 4px 12px -2px rgba(0, 0, 0, 0.22) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding: 14px 22px !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    color: #ffffff !important;
}.tm-ph-icon,
.page-header-icon {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #38bdf8 !important;
    border: 1.5px solid rgba(56, 189, 248, 0.35) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.tm-ph-icon i,
.page-header-icon i {
    color: #38bdf8 !important;
    font-size: 22px !important;
}

.tm-page-header h1,
.page-header h1,
.tm-ph-title {
    margin: 0 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: -0.015em !important;
    line-height: 1.2 !important;
}

.tm-ph-desc,
.page-header p {
    margin: 3px 0 0 !important;
    color: #cbd5e1 !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
}

.tm-ph-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

/* ── Centralized Header Button System (Ensures 100% High-Contrast Visibility on Every Page) ── */
.tm-page-header .btn,
.page-header .btn,
.tm-ph-actions .btn {
    height: 36px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
    text-decoration: none !important;
}

.tm-page-header .btn i,
.page-header .btn i,
.tm-ph-actions .btn i {
    font-size: 14px !important;
    line-height: 1 !important;
}

/* Prevent dark/muted icon classes from hiding icons inside dark header */
.tm-page-header .btn .text-muted,
.tm-page-header .btn .text-dark,
.tm-page-header .btn .text-secondary,
.page-header .btn .text-muted,
.page-header .btn .text-dark,
.page-header .btn .text-secondary,
.tm-ph-actions .btn .text-muted,
.tm-ph-actions .btn .text-dark,
.tm-ph-actions .btn .text-secondary {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* 1. Frosted White Buttons (Fixes invisible dark/secondary outline buttons like Account Statements) */
.tm-page-header .btn-outline-dark,
.tm-page-header .btn-outline-secondary,
.tm-page-header .btn-outline-light,
.tm-page-header .btn-secondary,
.tm-page-header .btn-light,
.page-header .btn-outline-dark,
.page-header .btn-outline-secondary,
.page-header .btn-outline-light,
.page-header .btn-secondary,
.page-header .btn-light,
.tm-ph-actions .btn-outline-dark,
.tm-ph-actions .btn-outline-secondary,
.tm-ph-actions .btn-outline-light,
.tm-ph-actions .btn-secondary,
.tm-ph-actions .btn-light {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    backdrop-filter: blur(8px) !important;
}
.tm-page-header .btn-outline-dark:hover,
.tm-page-header .btn-outline-secondary:hover,
.tm-page-header .btn-outline-light:hover,
.tm-page-header .btn-secondary:hover,
.tm-page-header .btn-light:hover,
.page-header .btn-outline-dark:hover,
.page-header .btn-outline-secondary:hover,
.page-header .btn-outline-light:hover,
.page-header .btn-secondary:hover,
.page-header .btn-light:hover,
.tm-ph-actions .btn-outline-dark:hover,
.tm-ph-actions .btn-outline-secondary:hover,
.tm-ph-actions .btn-outline-light:hover,
.tm-ph-actions .btn-secondary:hover,
.tm-ph-actions .btn-light:hover {
    background: rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

/* 2. Frosted Sky Blue Buttons (Fixes invisible Internal Transfer / outline-primary buttons) */
.tm-page-header .btn-outline-primary,
.tm-page-header .btn-outline-info,
.page-header .btn-outline-primary,
.page-header .btn-outline-info,
.tm-ph-actions .btn-outline-primary,
.tm-ph-actions .btn-outline-info {
    background: rgba(56, 189, 248, 0.14) !important;
    color: #f0f9ff !important;
    border: 1.5px solid #38bdf8 !important;
}
.tm-page-header .btn-outline-primary:hover,
.tm-page-header .btn-outline-info:hover,
.page-header .btn-outline-primary:hover,
.page-header .btn-outline-info:hover,
.tm-ph-actions .btn-outline-primary:hover,
.tm-ph-actions .btn-outline-info:hover {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #38bdf8 !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.45) !important;
}

/* 3. Solid Primary Action (+ New Account, Create, Save) */
.tm-page-header .btn-primary,
.page-header .btn-primary,
.tm-ph-actions .btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    border: 1px solid #3b82f6 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45) !important;
}
.tm-page-header .btn-primary:hover,
.page-header .btn-primary:hover,
.tm-ph-actions .btn-primary:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
    border-color: #60a5fa !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.6) !important;
}

/* 4. Danger Action (Export PDF, Delete) */
.tm-page-header .btn-danger,
.tm-page-header .btn-outline-danger,
.page-header .btn-danger,
.page-header .btn-outline-danger,
.tm-ph-actions .btn-danger,
.tm-ph-actions .btn-outline-danger,
.tm-page-header [style*="background:#dc2626"],
.page-header [style*="background:#dc2626"],
.tm-ph-actions [style*="background:#dc2626"],
.tm-page-header [style*="background: #dc2626"],
.page-header [style*="background: #dc2626"],
.tm-ph-actions [style*="background: #dc2626"] {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    border: 1px solid #ef4444 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.45) !important;
}
.tm-page-header .btn-danger:hover,
.tm-page-header .btn-outline-danger:hover,
.page-header .btn-danger:hover,
.page-header .btn-outline-danger:hover,
.tm-ph-actions .btn-danger:hover,
.tm-ph-actions .btn-outline-danger:hover,
.tm-page-header [style*="background:#dc2626"]:hover,
.page-header [style*="background:#dc2626"]:hover,
.tm-ph-actions [style*="background:#dc2626"]:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%) !important;
    border-color: #f87171 !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 6px 18px rgba(220, 38, 38, 0.55) !important;
}

/* 5. Success Action (Export CSV, Excel) */
.tm-page-header .btn-success,
.tm-page-header .btn-outline-success,
.page-header .btn-success,
.page-header .btn-outline-success,
.tm-ph-actions .btn-success,
.tm-ph-actions .btn-outline-success,
.tm-page-header [style*="background:#16a34a"],
.page-header [style*="background:#16a34a"],
.tm-ph-actions [style*="background:#16a34a"],
.tm-page-header [style*="background: #16a34a"],
.page-header [style*="background: #16a34a"],
.tm-ph-actions [style*="background: #16a34a"] {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    border: 1px solid #22c55e !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.45) !important;
}
.tm-page-header .btn-success:hover,
.tm-page-header .btn-outline-success:hover,
.page-header .btn-success:hover,
.page-header .btn-outline-success:hover,
.tm-ph-actions .btn-success:hover,
.tm-ph-actions .btn-outline-success:hover,
.tm-page-header [style*="background:#16a34a"]:hover,
.page-header [style*="background:#16a34a"]:hover,
.tm-ph-actions [style*="background:#16a34a"]:hover {
    background: linear-gradient(135deg, #15803d 0%, #166534 100%) !important;
    border-color: #4ade80 !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 6px 18px rgba(22, 163, 74, 0.55) !important;
}

/* 6. Warning / Amber Action */
.tm-page-header .btn-warning,
.tm-page-header .btn-outline-warning,
.page-header .btn-warning,
.page-header .btn-outline-warning,
.tm-ph-actions .btn-warning,
.tm-ph-actions .btn-outline-warning {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
    border: 1px solid #f59e0b !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.45) !important;
}
.tm-page-header .btn-warning:hover,
.tm-page-header .btn-outline-warning:hover,
.page-header .btn-warning:hover,
.page-header .btn-outline-warning:hover,
.tm-ph-actions .btn-warning:hover,
.tm-ph-actions .btn-outline-warning:hover {
    background: linear-gradient(135deg, #b45309 0%, #92400e 100%) !important;
    border-color: #fbbf24 !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 6px 18px rgba(217, 119, 6, 0.55) !important;
}

/* 7. Universal Header Button Fallback (Guarantees zero unreadable buttons on any page) */
.tm-page-header .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-outline-primary):not(.btn-outline-info):not([style*="background:#dc2626"]):not([style*="background:#16a34a"]),
.page-header .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-outline-primary):not(.btn-outline-info):not([style*="background:#dc2626"]):not([style*="background:#16a34a"]),
.tm-ph-actions .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-outline-primary):not(.btn-outline-info):not([style*="background:#dc2626"]):not([style*="background:#16a34a"]) {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    backdrop-filter: blur(8px) !important;
}
.tm-page-header .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-outline-primary):not(.btn-outline-info):not([style*="background:#dc2626"]):not([style*="background:#16a34a"]):hover,
.page-header .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-outline-primary):not(.btn-outline-info):not([style*="background:#dc2626"]):not([style*="background:#16a34a"]):hover,
.tm-ph-actions .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-outline-primary):not(.btn-outline-info):not([style*="background:#dc2626"]):not([style*="background:#16a34a"]):hover {
    background: rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

/* Responsive Header */
@media (max-width: 768px) {
    .page-header,
    .tm-page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
        padding: 14px 16px !important;
    }
    .tm-ph-actions {
        width: 100% !important;
        margin-left: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
}

/* ------------------------------ 3D Realistic Box Shading ---------------------------- */
.page-card,
.tm-card:not(.hero-banner-dark):not(.adc-card),
.card.tm-card:not(.hero-banner-dark):not(.adc-card),
.stat-card,
.card:not(.hero-banner-dark):not(.adc-card):not(.bg-dark):not(.bg-primary):not([style*="linear-gradient"]) {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-bottom: 3.5px solid #94a3b8 !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 26px -4px rgba(0, 0, 0, 0.16),
                0 4px 10px -2px rgba(0, 0, 0, 0.10),
                0 1px 3px 0 rgba(0, 0, 0, 0.14) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ------------------------------ Dark Hero Banner Component ---------------------------- */
.hero-banner-dark,
.card.hero-banner-dark,
div.hero-banner-dark {
    background: #000000 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-bottom: 3.5px solid #000000 !important;
    border-radius: 16px !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22), 0 6px 12px rgba(0, 0, 0, 0.14) !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

.hero-banner-dark h1,
.hero-banner-dark h2,
.hero-banner-dark h3,
.hero-banner-dark h4,
.hero-banner-dark h5,
.hero-banner-dark h6,
.hero-banner-dark strong,
.hero-banner-dark b {
    color: #ffffff !important;
}

.hero-banner-dark p,
.hero-banner-dark small,
.hero-banner-dark .hero-subtext,
.hero-banner-dark .text-white-50 {
    color: rgba(255, 255, 255, 0.88) !important;
}

.hero-banner-dark .badge {
    background: rgba(255, 255, 255, 0.20) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
}

/* ------------------------------ High-Contrast Crisp Form Controls ---------------------------- */
.form-control,
.form-select {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1.5px solid #94a3b8 !important;
    border-radius: 8px !important;
    font-weight: 550 !important;
    font-size: 13.5px !important;
    padding: 8px 12px !important;
}
.form-control:focus,
.form-select:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.20) !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
}
.form-control[readonly],
.form-control:disabled {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    border-color: #cbd5e1 !important;
}
.form-label {
    color: #0f172a !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    margin-bottom: 5px !important;
}
.input-group-text {
    background-color: #f8fafc !important;
    color: #475569 !important;
    border: 1.5px solid #94a3b8 !important;
    font-weight: 600 !important;
}

.page-card,
.tm-card,
.card.tm-card {
    padding: 20px;
    margin-bottom: 16px;
}

.sd-kpi:hover,
.sd-kpi-card:hover,
.stat-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 18px 36px -4px rgba(0, 0, 0, 0.22),
                0 8px 16px -3px rgba(0, 0, 0, 0.14),
                0 2px 5px 0 rgba(0, 0, 0, 0.16) !important;
}

.sd-kpi.k-primary { border-bottom-color: #155eef !important; }
.sd-kpi.k-info    { border-bottom-color: #0284c7 !important; }
.sd-kpi.k-success { border-bottom-color: #059669 !important; }
.sd-kpi.k-danger  { border-bottom-color: #dc2626 !important; }
.sd-kpi.k-warning { border-bottom-color: #d97706 !important; }

/* ------------------------------ tables & alternating row colors ---------------- */
.table-wrap,
.table-responsive {
    overflow-x: auto;
}

.table,
.tm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    --bs-table-striped-bg: #f6f9fd;
}

.table thead th,
.table thead tr th,
.table thead td,
.tm-table thead th {
    background: linear-gradient(180deg, #155eef 0%, #104cc3 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 11px 14px !important;
    border: 1px solid #104cc3 !important;
    vertical-align: middle !important;
    white-space: nowrap;
}

/* Table cells */
.table tbody td,
.tm-table tbody td {
    padding: 10px 14px !important;
    border: 1px solid var(--border) !important;
    vertical-align: middle !important;
    font-size: 13px;
    color: var(--text);
}

/* Odd rows: pure white */
.table tbody tr:nth-child(odd) > *,
.tm-table tbody tr:nth-child(odd) > *,
tbody tr:nth-child(odd) {
    background-color: #ffffff !important;
    color: var(--text) !important;
}

/* Even rows: clean soft cool tone */
.table tbody tr:nth-child(even) > *,
.tm-table tbody tr:nth-child(even) > *,
tbody tr:nth-child(even) {
    background-color: #f6f9fd !important;
    color: var(--text) !important;
}

/* Row Hover: subtle primary soft highlight */
.table tbody tr:hover > *,
.table-hover tbody tr:hover > *,
.tm-table tbody tr:hover > *,
tbody tr:hover {
    background-color: #eaf2ff !important;
    cursor: default;
}

/* ------------------------------ modals --------------------------------- */
.tm-modal-green, .modal-header.tm-modal-green,
.tm-modal-primary, .modal-header.tm-modal-primary {
    background: linear-gradient(135deg, var(--nav) 0%, var(--primary) 100%);
    color: #fff;
}
.tm-modal-green .btn-close,
.tm-modal-primary .btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* ------------------------------ tabs & pills ----------------------------------- */
.nav-tabs {
    border-bottom: 2px solid var(--border) !important;
    gap: 6px;
}
.nav-tabs .nav-link {
    color: var(--muted) !important;
    border: 1px solid transparent !important;
    border-bottom: none !important;
    background: transparent !important;
    font-weight: 600 !important;
    border-radius: 10px 10px 0 0 !important;
    padding: 9px 18px !important;
    transition: all 0.15s ease-in-out;
}
.nav-tabs .nav-link:hover {
    color: var(--primary) !important;
    background: var(--primary-soft) !important;
    border-color: var(--border) !important;
}
.nav-tabs .nav-link.active {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(21, 94, 239, 0.25) !important;
}

.nav-pills .nav-link {
    color: var(--muted) !important;
    font-weight: 600 !important;
    border-radius: 9px !important;
    padding: 8px 16px !important;
    transition: all 0.15s ease-in-out;
}
.nav-pills .nav-link:hover {
    color: var(--primary) !important;
    background: var(--primary-soft) !important;
}
.nav-pills .nav-link.active {
    background: var(--primary) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(21, 94, 239, 0.25) !important;
}

/* ------------------------------ stats & hero --------------------------- */
.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
}
.stat-card span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 7px; font-weight: 600; }
.stat-card strong { font-size: 21px; font-weight: 800; color: var(--text); }
.stat-card small { display: block; margin-top: 5px; color: var(--muted); }

.fy-badge, .primary-link {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 9px;
    background: var(--primary-soft);
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.finance-hero {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 24px;
    border-radius: 18px;
    color: #fff;
    background: radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 35%), linear-gradient(135deg, #0a1735, #0f2557 60%, #155eef);
    box-shadow: 0 20px 45px rgba(21,94,239,.22);
}
.finance-kicker {
    margin-bottom: 8px;
    color: #cfe0ff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
}
.finance-hero h1 { margin: 0; font-size: 28px; font-weight: 800; }
.finance-hero p { margin: 7px 0 0; color: #dce8ff; font-size: 13px; }
.finance-meta { display: flex; gap: 10px; }
.finance-meta-box {
    min-width: 120px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.18);
}
.finance-meta-box span, .finance-meta-box small { display: block; color: #dce8ff; font-size: 10px; }
.finance-meta-box strong { display: block; margin: 4px 0; font-size: 17px; font-weight: 800; }

.alert-success { background: #ecfdf3; color: #067647; border: 1px solid #abefc6; border-radius: 10px; padding: 12px 14px; font-size: 13px; font-weight: 600; }
.alert-error, .alert-danger { background: #fef3f2; color: #b42318; border: 1px solid #fecdca; border-radius: 10px; padding: 12px 14px; font-size: 13px; font-weight: 600; }

/* ------------------------------ summary/KPI cards (3D Executive Stat Cards) ---------------------- */
.sd-kpi,
.sd-kpi-card {
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 55%, #f4f6f9 100%) !important;
    border: 1.5px solid #e2e8f0 !important;
    border-bottom: 3.5px solid #94a3b8 !important;
    border-radius: 14px !important;
    padding: 14px 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07),
                0 10px 18px -3px rgba(0, 0, 0, 0.08),
                0 2px 4px rgba(0, 0, 0, 0.04),
                inset 0 1px 0 #ffffff,
                inset 0 -2px 0 rgba(0, 0, 0, 0.04) !important;
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    overflow: hidden;
    height: 100%;
    position: relative;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.sd-kpi:hover,
.sd-kpi-card:hover {
    transform: translateY(-4px) scale(1.008) !important;
    box-shadow: 0 14px 28px -4px rgba(0, 0, 0, 0.13),
                0 8px 16px -2px rgba(0, 0, 0, 0.07),
                inset 0 1px 0 #ffffff !important;
}
.sd-kpi:active,
.sd-kpi-card:active {
    transform: translateY(-1px) scale(0.995) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08), inset 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}
.sd-kpi .sd-kpi-icon,
.sd-kpi-card .sd-kpi-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ffffff;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.18),
                inset 0 1.5px 1px rgba(255, 255, 255, 0.5),
                inset 0 -2px 3px rgba(0, 0, 0, 0.22) !important;
    transition: transform 0.2s ease;
}
.sd-kpi:hover .sd-kpi-icon,
.sd-kpi-card:hover .sd-kpi-icon-box {
    transform: scale(1.08) rotate(2deg);
}
.sd-kpi > div:last-child,
.sd-kpi-card > div:last-child { min-width: 0; flex: 1; overflow: hidden; }
.sd-kpi .sd-kpi-value,
.sd-kpi-card .sd-kpi-value {
    font-size: 1.18rem;
    font-weight: 850;
    line-height: 1.25;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #0f172a;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
.sd-kpi .sd-kpi-label,
.sd-kpi-card .sd-kpi-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #64748b;
    margin-top: 3px;
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sd-kpi.k-primary .sd-kpi-icon,
.sd-kpi-card.k-primary .sd-kpi-icon-box { background: linear-gradient(145deg, #2563eb, #155eef) !important; }
.sd-kpi.k-primary,
.sd-kpi-card.k-primary {
    border-top: 3.5px solid #155eef !important;
    border-bottom: 3.5px solid #155eef !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07),
                0 10px 18px -3px rgba(21, 94, 239, 0.16),
                inset 0 1px 0 #ffffff,
                inset 0 -2px 0 rgba(21, 94, 239, 0.08) !important;
}

.sd-kpi.k-success .sd-kpi-icon,
.sd-kpi-card.k-success .sd-kpi-icon-box { background: linear-gradient(145deg, #10b981, #059669) !important; }
.sd-kpi.k-success,
.sd-kpi-card.k-success {
    border-top: 3.5px solid #059669 !important;
    border-bottom: 3.5px solid #059669 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07),
                0 10px 18px -3px rgba(5, 150, 105, 0.16),
                inset 0 1px 0 #ffffff,
                inset 0 -2px 0 rgba(5, 150, 105, 0.08) !important;
}

.sd-kpi.k-warning .sd-kpi-icon,
.sd-kpi-card.k-warning .sd-kpi-icon-box { background: linear-gradient(145deg, #f59e0b, #d97706) !important; }
.sd-kpi.k-warning,
.sd-kpi-card.k-warning {
    border-top: 3.5px solid #f59e0b !important;
    border-bottom: 3.5px solid #f59e0b !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07),
                0 10px 18px -3px rgba(245, 158, 11, 0.18),
                inset 0 1px 0 #ffffff,
                inset 0 -2px 0 rgba(245, 158, 11, 0.08) !important;
}

.sd-kpi.k-danger  .sd-kpi-icon,
.sd-kpi-card.k-danger  .sd-kpi-icon-box { background: linear-gradient(145deg, #ef4444, #dc2626) !important; }
.sd-kpi.k-danger,
.sd-kpi-card.k-danger  {
    border-color: #e2e8f0 !important;
    border-top: 3.5px solid #dc2626 !important;
    border-bottom: 3.5px solid #dc2626 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07),
                0 10px 18px -3px rgba(220, 38, 38, 0.16),
                inset 0 1px 0 #ffffff,
                inset 0 -2px 0 rgba(220, 38, 38, 0.08) !important;
}

.sd-kpi.k-info    .sd-kpi-icon,
.sd-kpi-card.k-info    .sd-kpi-icon-box { background: linear-gradient(145deg, #0ea5e9, #0284c7) !important; }
.sd-kpi.k-info,
.sd-kpi-card.k-info    {
    border-top: 3.5px solid #0284c7 !important;
    border-bottom: 3.5px solid #0284c7 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07),
                0 10px 18px -3px rgba(2, 132, 199, 0.16),
                inset 0 1px 0 #ffffff,
                inset 0 -2px 0 rgba(2, 132, 199, 0.08) !important;
}

/* ==========================================================================
   Amount in Words Hover Popup / Tooltip System
   ========================================================================== */
.tm-amount-tip {
    cursor: pointer;
    font-weight: inherit;
    text-decoration: underline dotted rgba(15, 23, 42, 0.32);
    text-underline-offset: 3px;
    transition: all 0.15s ease-in-out;
    display: inline-block;
}

.tm-amount-tip:hover {
    color: inherit;
    text-decoration-color: currentColor;
    transform: translateY(-1px);
}

.tooltip.tm-words-tooltip .tooltip-inner,
.tooltip .tooltip-inner {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%) !important;
    color: #ffffff !important;
    font-size: 0.88rem !important;
    padding: 8px 14px !important;
    border-radius: 9px !important;
    border: 1px solid #3b82f6 !important;
    box-shadow: 0 10px 25px -3px rgba(15, 23, 42, 0.45) !important;
    line-height: 1.35 !important;
    text-align: center !important;
}

.tooltip.tm-words-tooltip .tooltip-arrow::before,
.tooltip .tooltip-arrow::before {
    border-top-color: #1e3a8a !important;
}

/* ------------------------------ filter card ---------------------------- */
.sd-filter .card-header { cursor: pointer; background: color-mix(in srgb, var(--ui-primary) 8%, #fff); color: var(--ui-primary); }

/* ------------------------------ status badges -------------------------- */
.sd-badge { font-size: 12px; padding: .3em .6em; border-radius: 6px; font-weight: 600; }
.sd-b-instock { background: color-mix(in srgb, var(--ui-info) 16%, #fff); color: var(--ui-info); }
.sd-b-booked  { background: color-mix(in srgb, var(--ui-warning) 18%, #fff); color: #92600a; }
.sd-b-sold    { background: color-mix(in srgb, var(--ui-success) 16%, #fff); color: #0f7a44; }

/* ------------------------------ responsive ----------------------------- */
@media (max-width: 576px) {
    .tm-page-header h1 { font-size: 24px; }
    .table thead th { font-size: 13px; }
}

/* =====================================================================
   Enterprise Modern Sidebar (Dark Teal & Mint System)
   ===================================================================== */
aside.app-sidebar,
.app-sidebar.tm-sidebar,
.tm-sidebar,
.main-sidebar {
    width: 260px !important;
    min-height: 100vh !important;
    height: 100vh !important;
    position: sticky !important;
    top: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #0C6B61 !important;
    background-color: #0C6B61 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    z-index: 1038 !important;
    font-family: inherit;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
.app-sidebar .sidebar-wrapper,
.tm-sidebar .sidebar-wrapper,
.sidebar-wrapper {
    flex: 1 1 auto !important;
    height: auto !important;
    padding: 10px 8px 24px !important;
    background: transparent !important;
    background-color: transparent !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

/* ----------------------------------------------------------------------------------------
   ROOT-CAUSE FIX for the mobile dark-background bleed.
   The sidebar rule above forces `position: sticky !important` for ALL widths. On desktop that
   matches AdminLTE, so desktop is correct. But below the lg breakpoint AdminLTE turns the sidebar
   into an off-canvas drawer (`position: fixed; margin-left: -sidebar-width`) so it leaves the flow
   and the content area becomes full-width over the light background. The forced `sticky` overrode
   that, keeping the dark 260px / 100vh sidebar in the layout and bleeding its colour behind the
   content on phones/tablets. Restore the off-canvas behaviour on small screens only. */
@media (max-width: 991.98px) {
    aside.app-sidebar,
    .app-sidebar.tm-sidebar,
    .tm-sidebar,
    .main-sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        margin-left: -260px !important;   /* slide off-screen (matches the 260px sidebar width) */
        z-index: 1045 !important;
    }
    /* Slide back in when the hamburger opens the mobile menu. */
    .sidebar-open aside.app-sidebar,
    .sidebar-open .app-sidebar.tm-sidebar,
    .sidebar-open .tm-sidebar,
    .sidebar-open .main-sidebar {
        margin-left: 0 !important;
    }
}

/* Custom scrollbar for sidebar: Hidden by default */
aside.app-sidebar::-webkit-scrollbar,
.app-sidebar::-webkit-scrollbar,
.tm-sidebar::-webkit-scrollbar,
.sidebar-wrapper::-webkit-scrollbar,
.app-sidebar .sidebar-wrapper::-webkit-scrollbar,
.tm-sidebar .sidebar-wrapper::-webkit-scrollbar {
    width: 5px !important;
    background: #156D5E !important;
}
aside.app-sidebar::-webkit-scrollbar-track,
.app-sidebar::-webkit-scrollbar-track,
.tm-sidebar::-webkit-scrollbar-track,
.sidebar-wrapper::-webkit-scrollbar-track,
.app-sidebar .sidebar-wrapper::-webkit-scrollbar-track,
.tm-sidebar .sidebar-wrapper::-webkit-scrollbar-track {
    background: #156D5E !important;
}
aside.app-sidebar::-webkit-scrollbar-thumb,
.app-sidebar::-webkit-scrollbar-thumb,
.tm-sidebar::-webkit-scrollbar-thumb,
.sidebar-wrapper::-webkit-scrollbar-thumb,
.app-sidebar .sidebar-wrapper::-webkit-scrollbar-thumb,
.tm-sidebar .sidebar-wrapper::-webkit-scrollbar-thumb {
    background: transparent !important;
    border-radius: 10px !important;
    transition: background 0.2s ease-in-out !important;
}

/* Show scrollbar ONLY on mouse hover */
aside.app-sidebar:hover,
.app-sidebar:hover,
.tm-sidebar:hover,
.sidebar-wrapper:hover,
aside.app-sidebar:hover .sidebar-wrapper,
.app-sidebar:hover .sidebar-wrapper,
.tm-sidebar:hover .sidebar-wrapper {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 255, 255, 0.4) #156D5E !important;
}
aside.app-sidebar:hover::-webkit-scrollbar-thumb,
.app-sidebar:hover::-webkit-scrollbar-thumb,
.tm-sidebar:hover::-webkit-scrollbar-thumb,
.sidebar-wrapper:hover::-webkit-scrollbar-thumb,
aside.app-sidebar:hover .sidebar-wrapper::-webkit-scrollbar-thumb,
.app-sidebar:hover .sidebar-wrapper::-webkit-scrollbar-thumb,
.tm-sidebar:hover .sidebar-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.4) !important;
}
aside.app-sidebar:hover .sidebar-wrapper::-webkit-scrollbar-thumb:hover,
.sidebar-wrapper:hover::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.7) !important;
}

/* ==========================================================================
   SINDH GOVERNMENT / DOMICILE TEAL SIDEBAR THEME
   ========================================================================== */
.tm-sidebar,
.app-sidebar,
aside.app-sidebar,
.app-sidebar.tm-sidebar {
    background: #1e7868 !important;
    background-color: #1e7868 !important;
    color: #ffffff !important;
    border-right: 1px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.15) !important;
}

.tm-sidebar .sidebar-wrapper,
.app-sidebar .sidebar-wrapper {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
.tm-sidebar .sidebar-wrapper::-webkit-scrollbar,
.app-sidebar .sidebar-wrapper::-webkit-scrollbar {
    width: 5px;
}
.tm-sidebar .sidebar-wrapper::-webkit-scrollbar-thumb,
.app-sidebar .sidebar-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 4px;
}

/* 1. Logo Brand Unified */
.sidebar-brand-unified,
.app-sidebar .sidebar-brand,
.tm-sidebar .sidebar-brand {
    padding: 20px 14px 14px !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    margin-bottom: 8px;
}
.sidebar-brand-unified img,
.app-sidebar .sidebar-brand img,
.tm-sidebar .sidebar-brand img {
    max-height: 76px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
}

/* 2. User Profile Box */
.sidebar-profile-box {
    background: rgba(0, 0, 0, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 14px !important;
    padding: 10px 14px !important;
    margin: 6px 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}
.sidebar-profile-avatar {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 50% !important;
    background: #0f4c3f !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}
.sidebar-profile-name {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    line-height: 1.25 !important;
    margin-bottom: 3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.sidebar-profile-badge {
    background: rgba(0, 0, 0, 0.32) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #a7f3d0 !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    padding: 2.5px 8px !important;
    border-radius: 6px !important;
    text-transform: uppercase !important;
    display: inline-block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

/* 3. Section Titles (Headers) */
.sidebar-menu .nav-header,
.tm-sidebar .nav-header,
.app-sidebar .nav-header {
    color: #7de3cb !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    padding: 14px 10px 6px !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    list-style: none !important;
}
.sidebar-menu .nav-header::after,
.tm-sidebar .nav-header::after,
.app-sidebar .nav-header::after {
    content: '' !important;
    display: block !important;
    flex-grow: 1 !important;
    height: 1px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    margin-left: 10px !important;
}

/* 4. Menu Links (Regular Items) */
.sidebar-menu {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.sidebar-menu > .nav-item {
    list-style: none !important;
    margin: 0 !important;
    position: relative !important;
}
.sidebar-menu > .nav-item > .nav-link,
.tm-sidebar .sidebar-menu > .nav-item > .nav-link,
.app-sidebar .sidebar-menu > .nav-item > .nav-link {
    width: calc(100% - 12px) !important;
    box-sizing: border-box !important;
    background: rgba(0, 0, 0, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 9px !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 9px 12px !important;
    margin: 4px 6px !important;
    display: flex !important;
    align-items: center !important;
    min-height: 40px !important;
    transition: all 0.15s ease-in-out !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
.sidebar-menu > .nav-item > .nav-link:hover,
.tm-sidebar .sidebar-menu > .nav-item > .nav-link:hover,
.app-sidebar .sidebar-menu > .nav-item > .nav-link:hover {
    background: rgba(0, 0, 0, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    transform: translateX(2px) !important;
}
.sidebar-menu > .nav-item > .nav-link .nav-icon,
.tm-sidebar .sidebar-menu > .nav-item > .nav-link .nav-icon,
.app-sidebar .sidebar-menu > .nav-item > .nav-link .nav-icon {
    color: #ffffff !important;
    font-size: 15px !important;
    margin-right: 10px !important;
    opacity: 0.95 !important;
    flex-shrink: 0 !important;
    min-width: 20px !important;
    text-align: center !important;
}
.sidebar-menu > .nav-item > .nav-link p,
.tm-sidebar .sidebar-menu > .nav-item > .nav-link p,
.app-sidebar .sidebar-menu > .nav-item > .nav-link p {
    color: #ffffff !important;
    margin: 0 !important;
    flex-grow: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.sidebar-menu > .nav-item > .nav-link .nav-arrow-right,
.sidebar-menu > .nav-item > .nav-link .dropdown-arrow,
.sidebar-menu > .nav-item > .nav-link .nav-arrow {
    color: #ffffff !important;
    opacity: 0.75 !important;
    font-size: 12.5px !important;
    margin-left: auto !important;
    transition: transform 0.2s ease !important;
    flex-shrink: 0 !important;
}
.sidebar-menu > .nav-item.menu-open > .nav-link .dropdown-arrow,
.sidebar-menu > .nav-item.menu-open > .nav-link .nav-arrow {
    transform: rotate(90deg) !important;
    opacity: 1 !important;
}

/* 5. Active Menu Item (Off-white / Mint Highlight like Dashboard in Domicile) */
.sidebar-menu > .nav-item > .nav-link.active,
.tm-sidebar .sidebar-menu > .nav-item > .nav-link.active,
.app-sidebar .sidebar-menu > .nav-item > .nav-link.active {
    background: #ebf7f3 !important;
    border: 1px solid #ffffff !important;
    border-radius: 9px !important;
    color: #083329 !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
    transform: none !important;
}
.sidebar-menu > .nav-item > .nav-link.active .nav-icon,
.tm-sidebar .sidebar-menu > .nav-item > .nav-link.active .nav-icon,
.app-sidebar .sidebar-menu > .nav-item > .nav-link.active .nav-icon {
    color: #083329 !important;
    font-weight: 800 !important;
}
.sidebar-menu > .nav-item > .nav-link.active p,
.tm-sidebar .sidebar-menu > .nav-item > .nav-link.active p,
.app-sidebar .sidebar-menu > .nav-item > .nav-link.active p {
    color: #083329 !important;
    font-weight: 800 !important;
}
.sidebar-menu > .nav-item > .nav-link.active .nav-arrow-right,
.sidebar-menu > .nav-item > .nav-link.active .dropdown-arrow,
.sidebar-menu > .nav-item > .nav-link.active .nav-arrow {
    color: #083329 !important;
    opacity: 0.9 !important;
    font-weight: 800 !important;
}

/* 6. Sub-Menu / Treeview: Completely Remove Connecting Tree Lines */
.sidebar-menu .nav-treeview,
.tm-sidebar .nav-treeview,
.app-sidebar .nav-treeview {
    list-style: none !important;
    padding-left: 0 !important;
    padding: 4px 0 !important;
    margin: 4px 12px 8px !important;
    background: rgba(0, 0, 0, 0.14) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    position: relative !important;
}
.sidebar-menu .nav-treeview::before,
.tm-sidebar .nav-treeview::before,
.app-sidebar .nav-treeview::before,
.sidebar-menu .nav-treeview::after,
.tm-sidebar .nav-treeview::after,
.app-sidebar .nav-treeview::after,
.sidebar-menu .nav-treeview .nav-item > .nav-link::before,
.tm-sidebar .nav-treeview .nav-item > .nav-link::before,
.app-sidebar .nav-treeview .nav-item > .nav-link::before,
.sidebar-menu .nav-treeview .nav-item > .nav-link::after,
.tm-sidebar .nav-treeview .nav-item > .nav-link::after,
.app-sidebar .nav-treeview .nav-item > .nav-link::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    border: none !important;
}

.sidebar-menu .nav-treeview .nav-item,
.tm-sidebar .nav-treeview .nav-item,
.app-sidebar .nav-treeview .nav-item {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.sidebar-menu .nav-treeview .nav-link,
.tm-sidebar .nav-treeview .nav-link,
.app-sidebar .nav-treeview .nav-link {
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 13px !important;
    font-weight: 550 !important;
    min-height: 36px !important;
    padding: 8px 12px 8px 18px !important;
    margin: 2px 6px !important;
    width: calc(100% - 12px) !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: none !important;
    transition: all 0.15s ease !important;
}
.sidebar-menu .nav-treeview .nav-link:hover,
.tm-sidebar .nav-treeview .nav-link:hover,
.app-sidebar .nav-treeview .nav-link:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}
.sidebar-menu .nav-treeview .nav-link .nav-icon,
.tm-sidebar .nav-treeview .nav-link .nav-icon,
.app-sidebar .nav-treeview .nav-link .nav-icon {
    font-size: 13px !important;
    margin-right: 10px !important;
    color: #ffffff !important;
    opacity: 0.9 !important;
}
.sidebar-menu .nav-treeview .nav-link p,
.tm-sidebar .nav-treeview .nav-link p,
.app-sidebar .nav-treeview .nav-link p {
    color: #ffffff !important;
    margin: 0 !important;
    font-size: 13px !important;
}

.sidebar-menu .nav-treeview .nav-link.active,
.tm-sidebar .nav-treeview .nav-link.active,
.app-sidebar .nav-treeview .nav-link.active {
    background: #ebf7f3 !important;
    color: #083329 !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
    border-left: none !important;
}
.sidebar-menu .nav-treeview .nav-link.active .nav-icon,
.sidebar-menu .nav-treeview .nav-link.active p,
.tm-sidebar .nav-treeview .nav-link.active .nav-icon,
.tm-sidebar .nav-treeview .nav-link.active p,
.app-sidebar .nav-treeview .nav-link.active .nav-icon,
.app-sidebar .nav-treeview .nav-link.active p {
    color: #083329 !important;
    font-weight: 700 !important;
}

/* 7. Logout Button (Red pill at bottom) */
.sd-nav-logout-btn,
.sidebar-menu .sd-nav-logout,
.tm-sidebar .sd-nav-logout,
.nav-link.sd-nav-logout {
    width: calc(100% - 12px) !important;
    background: #dc2626 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 9px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 9px 12px !important;
    margin: 8px 6px 20px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    outline: none !important;
    text-align: left;
}
.sd-nav-logout-btn:hover,
.sidebar-menu .sd-nav-logout:hover,
.tm-sidebar .sd-nav-logout:hover,
.nav-link.sd-nav-logout:hover {
    background: #b91c1c !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(220, 38, 38, 0.45) !important;
    color: #ffffff !important;
}

/* 8. Quick Menu Button (Facebook Blue #1877F2) */
#headerQuickMenuBtn,
.btn-quick-menu,
#headerQuickMenuContainer > button {
    background-color: #1877F2 !important;
    background: #1877F2 !important;
    border-color: #1877F2 !important;
    color: #FFFFFF !important;
}
#headerQuickMenuBtn:hover,
#headerQuickMenuBtn:focus,
#headerQuickMenuBtn:active,
#headerQuickMenuBtn[aria-expanded="true"],
.btn-quick-menu:hover {
    background-color: #166FE5 !important;
    background: #166FE5 !important;
    border-color: #166FE5 !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.35) !important;
}
#headerQuickMenuBtn .badge {
    background-color: rgba(255, 255, 255, 0.25) !important;
    color: #FFFFFF !important;
}
#headerQuickMenuDropdown .bg-primary {
    background-color: #1877F2 !important;
    background: #1877F2 !important;
}
#headerQuickMenuDropdown .bg-primary .badge {
    color: #1877F2 !important;
}

/* App Header / Topbar Navbar */
.app-header,
.app-header.navbar {
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid var(--border, #dbe4f0) !important;
    min-height: 56px !important;
    box-shadow: 0 2px 10px rgba(16, 24, 40, 0.04) !important;
}

/* Table Action Buttons Pill Styling */
.table .btn-outline-secondary,
.tm-table .btn-outline-secondary,
.table .btn-edit,
.tm-table .btn-edit {
    background: #eff6ff !important;
    color: #155eef !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    padding: 5px 9px !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: all 0.15s ease !important;
}
.table .btn-outline-secondary:hover,
.tm-table .btn-outline-secondary:hover,
.table .btn-edit:hover,
.tm-table .btn-edit:hover {
    background: #155eef !important;
    color: #ffffff !important;
    border-color: #155eef !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(21, 94, 239, 0.25) !important;
}

.table .btn-outline-danger,
.tm-table .btn-outline-danger,
.table .btn-delete,
.tm-table .btn-delete {
    background: #fef3f2 !important;
    color: #b42318 !important;
    border: 1px solid #fecdca !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    padding: 5px 9px !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: all 0.15s ease !important;
}
.table .btn-outline-danger:hover,
.tm-table .btn-outline-danger:hover,
.table .btn-delete:hover,
.tm-table .btn-delete:hover {
    background: #b42318 !important;
    color: #ffffff !important;
    border-color: #b42318 !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(180, 35, 24, 0.25) !important;
}

/* Active link styling is defined in Emerald Government Theme Sidebar above */

/* Red Logout Button */
.btn-logout-red {
    background: #dc2626 !important;
    border: 1px solid #b91c1c !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    transition: background 0.15s ease-in-out, transform 0.1s ease !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35) !important;
}
.btn-logout-red:hover {
    background: #b91c1c !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* ==========================================================================
   Searchable Dropdown / Live Combobox Component (Compact & Legible)
   ========================================================================== */
select,
.form-select,
.form-select-sm {
    font-size: 0.82rem !important;
    padding: 6px 10px !important;
    min-height: 36px !important;
    border: 1.5px solid #94a3b8 !important;
    border-radius: 9px !important;
}

.tm-ss-wrapper {
    position: relative;
    width: 100%;
}

.tm-ss-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 12px !important;
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    cursor: pointer;
    font-size: 0.85rem;
    color: #1e293b !important;
    transition: all 0.18s ease-in-out;
    user-select: none;
    text-align: left;
    box-sizing: border-box !important;
}

.tm-ss-trigger:hover,
.tm-ss-trigger:focus,
.tm-ss-wrapper.open .tm-ss-trigger {
    background: #155eef !important;
    border-color: #155eef !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.22) !important;
}

.tm-ss-trigger:hover *,
.tm-ss-trigger:focus *,
.tm-ss-wrapper.open .tm-ss-trigger * {
    color: #ffffff !important;
}

.tm-ss-trigger:hover .text-muted,
.tm-ss-trigger:hover .text-dark,
.tm-ss-trigger:hover .text-secondary,
.tm-ss-trigger:hover strong,
.tm-ss-trigger:hover span,
.tm-ss-trigger:hover i,
.tm-ss-trigger:focus .text-muted,
.tm-ss-trigger:focus .text-dark,
.tm-ss-trigger:focus .text-secondary,
.tm-ss-trigger:focus strong,
.tm-ss-trigger:focus span,
.tm-ss-trigger:focus i,
.tm-ss-wrapper.open .tm-ss-trigger .text-muted,
.tm-ss-wrapper.open .tm-ss-trigger .text-dark,
.tm-ss-wrapper.open .tm-ss-trigger .text-secondary,
.tm-ss-wrapper.open .tm-ss-trigger strong,
.tm-ss-wrapper.open .tm-ss-trigger span,
.tm-ss-wrapper.open .tm-ss-trigger i {
    color: #ffffff !important;
}

.tm-ss-trigger-content {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-grow: 1;
}

.tm-ss-trigger-icon {
    font-size: 0.98rem;
    color: #2563eb;
    flex-shrink: 0;
    transition: color 0.18s ease;
}

.tm-ss-trigger-text {
    min-width: 0;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.82rem;
    color: #1e293b;
}

.tm-ss-trigger-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: 6px;
}

.tm-ss-btn-clear {
    border: 0;
    background: transparent;
    color: #94a3b8;
    padding: 0 4px;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.15s ease;
}

.tm-ss-btn-clear:hover {
    color: #dc2626;
}

.tm-ss-trigger:hover .tm-ss-btn-clear,
.tm-ss-trigger:focus .tm-ss-btn-clear,
.tm-ss-wrapper.open .tm-ss-trigger .tm-ss-btn-clear {
    color: rgba(255, 255, 255, 0.85) !important;
}

.tm-ss-trigger:hover .tm-ss-btn-clear:hover,
.tm-ss-trigger:focus .tm-ss-btn-clear:hover,
.tm-ss-wrapper.open .tm-ss-trigger .tm-ss-btn-clear:hover {
    color: #fee2e2 !important;
}

.tm-ss-chevron {
    color: #64748b;
    font-size: 0.78rem;
    transition: transform 0.2s ease, color 0.18s ease;
}

.tm-ss-wrapper.open .tm-ss-chevron {
    transform: rotate(180deg);
}

/* Floating Dropdown Panel */
.tm-ss-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: auto;
    min-width: 100%;
    width: max(100%, 360px);
    max-width: min(95vw, 480px);
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 12px;
    box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.25), 0 6px 12px -2px rgba(15, 23, 42, 0.1);
    z-index: 1065;
    overflow: hidden;
    display: none;
    animation: tmFadeInDown 0.15s ease-out;
}

.tm-ss-wrapper.open .tm-ss-dropdown {
    display: block;
}

@keyframes tmFadeInDown {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tm-ss-search-wrap {
    padding: 7px 9px;
    background: #f8fafc;
    border-bottom: 1.5px solid #e2e8f0;
}

.tm-ss-search-input {
    width: 100%;
    height: 33px;
    border-radius: 7px;
    border: 1px solid #cbd5e1;
    padding: 5px 9px 5px 30px;
    font-size: 0.82rem;
    outline: none;
    transition: border-color 0.15s ease;
    background: #ffffff !important;
    color: #0f172a !important;
}

.tm-ss-search-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.tm-ss-search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
    font-size: 0.82rem;
}

.tm-ss-list {
    max-height: 280px;
    overflow-y: auto;
    padding: 3px 0;
    margin: 0;
    list-style: none;
}

.tm-ss-list::-webkit-scrollbar {
    width: 6px;
}
.tm-ss-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.tm-ss-option {
    padding: 7px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.80rem;
    transition: background-color 0.12s ease, color 0.12s ease;
    color: #1e293b;
}

.tm-ss-option:last-child {
    border-bottom: 0;
}

.tm-ss-option:hover,
.tm-ss-option.highlighted {
    background-color: #155eef !important;
    color: #ffffff !important;
}

.tm-ss-option:hover *,
.tm-ss-option.highlighted * {
    color: #ffffff !important;
}

.tm-ss-option:hover .text-muted,
.tm-ss-option:hover .text-secondary,
.tm-ss-option.highlighted .text-muted,
.tm-ss-option.highlighted .text-secondary {
    color: #e0e7ff !important;
}

.tm-ss-option:hover .badge.bg-light,
.tm-ss-option.highlighted .badge.bg-light {
    background-color: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    color: #ffffff !important;
}

.tm-ss-option:hover .badge.bg-success,
.tm-ss-option.highlighted .badge.bg-success {
    background-color: #16a34a !important;
    border: 1px solid #22c55e !important;
    color: #ffffff !important;
}

.tm-ss-option:hover .badge.bg-danger,
.tm-ss-option.highlighted .badge.bg-danger {
    background-color: #dc2626 !important;
    border: 1px solid #ef4444 !important;
    color: #ffffff !important;
}

.tm-ss-option:hover .badge.bg-warning,
.tm-ss-option.highlighted .badge.bg-warning {
    background-color: #f59e0b !important;
    border: 1px solid #fbbf24 !important;
    color: #0f172a !important;
}

.tm-ss-option.selected {
    background-color: #dbeafe;
    border-left: 3.5px solid #2563eb;
    color: #1e40af;
}

.tm-ss-option.selected:hover,
.tm-ss-option.selected.highlighted {
    background-color: #155eef !important;
    border-left-color: #ffffff !important;
    color: #ffffff !important;
}

.tm-ss-empty {
    padding: 20px 14px;
    text-align: center;
    color: #64748b;
    font-size: 0.82rem;
}

.tm-ss-footer {
    padding: 5px 11px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    font-size: 0.72rem;
    color: #64748b;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ==========================================================================
   Collapsible Search & Filter Bar (Collapsed by Default, Unified Control Sizes)
   ========================================================================== */
.tm-filter-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-bottom: 3.5px solid #072633 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06) !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
    transition: all 0.2s ease-in-out !important;
}

.tm-filter-card:hover {
    border-color: #94a3b8 !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10) !important;
}

.tm-filter-header {
    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.10), transparent 40%), linear-gradient(135deg, #072633 0%, #0b3749 60%, #0d2a45 100%) !important;
    color: #ffffff !important;
    padding: 10px 18px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    user-select: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
    transition: all 0.18s ease !important;
}

.tm-filter-header:hover {
    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.14), transparent 40%), linear-gradient(135deg, #093142 0%, #0e445b 60%, #103456 100%) !important;
}

.tm-filter-card.open .tm-filter-header {
    border-bottom: 2px solid #155eef !important;
    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.14), transparent 40%), linear-gradient(135deg, #082d3d 0%, #0c3f55 60%, #123e66 100%) !important;
}

.tm-filter-header .tm-fh-icon-badge {
    width: 34px !important;
    height: 34px !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #38bdf8 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

.tm-filter-header .tm-fh-title {
    font-weight: 700 !important;
    font-size: 0.94rem !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
}

.tm-filter-header .tm-fh-sub {
    font-size: 0.78rem !important;
    color: #cbd5e1 !important;
    margin-top: 2px !important;
}

.tm-filter-header .tm-fh-toggle-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 5px 14px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    backdrop-filter: blur(4px) !important;
}

.tm-filter-header:hover .tm-fh-toggle-btn {
    background: #155eef !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
    box-shadow: 0 3px 8px rgba(21, 94, 239, 0.35) !important;
}

.tm-filter-header .tm-fh-chevron,
.tm-filter-header .bi-chevron-down {
    font-size: 0.88rem !important;
    color: #cbd5e1 !important;
    transition: transform 0.25s ease !important;
}

.tm-filter-header:hover .tm-fh-chevron,
.tm-filter-header:hover .bi-chevron-down {
    color: #ffffff !important;
}

.tm-filter-card.open .tm-filter-header .tm-fh-chevron,
.tm-filter-card.open .tm-filter-header .bi-chevron-down {
    transform: rotate(180deg) !important;
    color: #38bdf8 !important;
}

/* Collapsed by default across all pages */
.tm-filter-body,
.tm-filter-card:not(.open) .tm-filter-body {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: #ffffff !important;
    padding: 0 !important;
}

/* Expanded state when .open is toggled */
.tm-filter-card.open .tm-filter-body {
    max-height: 1200px !important;
}

.tm-filter-body .tm-filter-inner {
    padding: 16px 18px !important;
}

/* ==========================================================================
   Unified Search / Filter Controls (Consistent Height, Font, Borders & Radius)
   ========================================================================== */
.tm-filter-card .form-label,
.tm-filter-inner .form-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #475467 !important;
    margin-bottom: 5px !important;
    display: block !important;
    line-height: 1.2 !important;
}

/* Match exact 38px height and 8px radius on all inputs, selects, input-groups, and buttons */
.tm-filter-card .form-control,
.tm-filter-card .form-select,
.tm-filter-card .input-group,
.tm-filter-card .input-group-text,
.tm-filter-card .btn,
.tm-filter-inner .form-control,
.tm-filter-inner .form-select,
.tm-filter-inner .input-group,
.tm-filter-inner .input-group-text,
.tm-filter-inner .btn {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    font-size: 13.5px !important;
    box-sizing: border-box !important;
}

/* Standalone form controls (inputs & native selects) */
.tm-filter-card input.form-control:not(.input-group input),
.tm-filter-card select.form-select,
.tm-filter-inner input.form-control:not(.input-group input),
.tm-filter-inner select.form-select {
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
    background-color: #ffffff !important;
    padding: 6px 12px !important;
    line-height: 1.5 !important;
}

.tm-filter-card select.form-select,
.tm-filter-inner select.form-select {
    padding: 6px 30px 6px 12px !important;
    background-position: right 10px center !important;
    background-size: 16px 12px !important;
}

/* Input groups (search icon + input field) */
.tm-filter-card .input-group,
.tm-filter-inner .input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    border-radius: 8px !important;
}

.tm-filter-card .input-group > .input-group-text,
.tm-filter-inner .input-group > .input-group-text {
    border-radius: 8px 0 0 8px !important;
    border: 1px solid #cbd5e1 !important;
    border-right: none !important;
    background: #ffffff !important;
    color: #64748b !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    font-size: 14px !important;
}

.tm-filter-card .input-group > .form-control,
.tm-filter-inner .input-group > .form-control {
    border-radius: 0 8px 8px 0 !important;
    border: 1px solid #cbd5e1 !important;
    border-left: none !important;
    padding-left: 2px !important;
    color: #1e293b !important;
    background: #ffffff !important;
    flex: 1 1 auto !important;
}

/* Focus highlighting */
.tm-filter-card .form-control:focus,
.tm-filter-card .form-select:focus,
.tm-filter-inner .form-control:focus,
.tm-filter-inner .form-select:focus {
    border-color: #155eef !important;
    box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.12) !important;
    outline: none !important;
}

.tm-filter-card .input-group:focus-within > .input-group-text,
.tm-filter-inner .input-group:focus-within > .input-group-text {
    border-color: #155eef !important;
}

.tm-filter-card .input-group:focus-within > .form-control,
.tm-filter-inner .input-group:focus-within > .form-control {
    border-color: #155eef !important;
    box-shadow: none !important;
}

/* Select2 container sizing inside filter cards */
.tm-filter-card .select2-container,
.tm-filter-inner .select2-container {
    width: 100% !important;
    height: 38px !important;
    display: block !important;
}

.tm-filter-card .select2-container .select2-selection--single,
.tm-filter-inner .select2-container .select2-selection--single {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    background-color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
}

.tm-filter-card .select2-container .select2-selection--single .select2-selection__rendered,
.tm-filter-inner .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 36px !important;
    font-size: 13.5px !important;
    color: #1e293b !important;
    padding-left: 0 !important;
    padding-right: 20px !important;
}

.tm-filter-card .select2-container .select2-selection--single .select2-selection__arrow,
.tm-filter-inner .select2-container .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
    top: 0 !important;
    right: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.tm-filter-card .select2-container.select2-container--focus .select2-selection,
.tm-filter-inner .select2-container.select2-container--focus .select2-selection,
.tm-filter-card .select2-container--bootstrap-5.select2-container--focus .select2-selection,
.tm-filter-inner .select2-container--bootstrap-5.select2-container--focus .select2-selection {
    border-color: #155eef !important;
    box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.12) !important;
}

/* Buttons inside filter cards (Reset, Search, Apply) */
.tm-filter-card .btn,
.tm-filter-inner .btn,
.tm-filter-card .tm-reset-btn,
.tm-filter-inner .tm-reset-btn {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 16px !important;
    gap: 6px !important;
    border-width: 1px !important;
    border-style: solid !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease-in-out !important;
}

/* Reset button */
.tm-reset-btn,
.tm-filter-card .tm-reset-btn,
.tm-filter-inner .tm-reset-btn,
.tm-filter-card .btn-outline-secondary,
.tm-filter-inner .btn-outline-secondary {
    background: #ffffff !important;
    border: 1px solid #1877f2 !important;
    color: #1877f2 !important;
    border-radius: 8px !important;
}

.tm-reset-btn:hover,
.tm-filter-card .tm-reset-btn:hover,
.tm-filter-inner .tm-reset-btn:hover,
.tm-filter-card .btn-outline-secondary:hover,
.tm-filter-inner .btn-outline-secondary:hover {
    background: #1877f2 !important;
    color: #ffffff !important;
    border-color: #1877f2 !important;
    box-shadow: 0 4px 10px rgba(24, 119, 242, 0.25) !important;
    transform: translateY(-1px) !important;
}

/* Search / Apply button */
.tm-filter-card .btn-primary,
.tm-filter-inner .btn-primary {
    background: #155eef !important;
    border: 1px solid #155eef !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 0 18px !important;
}

.tm-filter-card .btn-primary:hover,
.tm-filter-inner .btn-primary:hover {
    background: #104cc3 !important;
    border-color: #104cc3 !important;
    box-shadow: 0 4px 10px rgba(21, 94, 239, 0.25) !important;
    transform: translateY(-1px) !important;
}

/* ==========================================================================
   High-Contrast Fancy Modal System (Shared across all Add/Edit Dialogs)
   ========================================================================== */
.modal-content.fancy-modal,
.modal-content.sd-fancy-modal,
#custModal .modal-content,
#accModal .modal-content,
#supModal .modal-content,
#purModal .modal-content,
#bkModal .modal-content,
#rozModal .modal-content,
#saleModal .modal-content {
    border: 2px solid #64748b !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.45) !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

.fancy-modal .modal-header,
.modal-content.fancy-modal .modal-header,
#custModal .modal-header,
#accModal .modal-header,
#supModal .modal-header,
#purModal .modal-header,
#bkModal .modal-header,
#rozModal .modal-header,
#saleModal .modal-header {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #2563eb 100%) !important;
    color: #ffffff !important;
    padding: 18px 24px !important;
    border-bottom: 2px solid #3b82f6 !important;
    display: flex !important;
    align-items: center !important;
}

.fancy-modal .modal-title,
#custModal .modal-title,
#accModal .modal-title,
#supModal .modal-title,
#purModal .modal-title,
#bkModal .modal-title,
#rozModal .modal-title,
#saleModal .modal-title {
    color: #ffffff !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.fancy-modal .fancy-modal-sub,
#custModal .fancy-modal-sub,
#accModal .fancy-modal-sub,
#supModal .fancy-modal-sub,
#purModal .fancy-modal-sub,
#bkModal .fancy-modal-sub,
#rozModal .fancy-modal-sub,
#saleModal .fancy-modal-sub {
    font-size: 0.82rem !important;
    color: #bfdbfe !important;
    margin-top: 3px !important;
    display: block !important;
    font-weight: 500 !important;
}

.fancy-modal .fancy-modal-icon-badge,
#custModal .fancy-modal-icon-badge,
#accModal .fancy-modal-icon-badge,
#supModal .fancy-modal-icon-badge,
#purModal .fancy-modal-icon-badge,
#bkModal .fancy-modal-icon-badge,
#rozModal .fancy-modal-icon-badge,
#saleModal .fancy-modal-icon-badge {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.35rem !important;
    color: #ffffff !important;
    flex-shrink: 0 !important;
    margin-right: 14px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.fancy-modal .btn-close-fancy,
#custModal .btn-close-fancy,
#accModal .btn-close-fancy,
#supModal .btn-close-fancy,
#purModal .btn-close-fancy,
#bkModal .btn-close-fancy,
#rozModal .btn-close-fancy,
#saleModal .btn-close-fancy {
    width: 34px !important;
    height: 34px !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 50% !important;
    opacity: 0.95 !important;
    filter: invert(1) grayscale(100%) brightness(200%) !important;
    margin-left: auto !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
}

.fancy-modal .btn-close-fancy:hover,
#custModal .btn-close-fancy:hover,
#accModal .btn-close-fancy:hover,
#supModal .btn-close-fancy:hover,
#purModal .btn-close-fancy:hover,
#bkModal .btn-close-fancy:hover,
#rozModal .btn-close-fancy:hover,
#saleModal .btn-close-fancy:hover {
    background-color: rgba(255, 255, 255, 0.35) !important;
    transform: rotate(90deg) !important;
    opacity: 1 !important;
}

.fancy-modal .modal-body,
#custModal .modal-body,
#accModal .modal-body,
#supModal .modal-body,
#purModal .modal-body,
#bkModal .modal-body,
#rozModal .modal-body,
#saleModal .modal-body {
    padding: 24px !important;
    background: #ffffff !important;
    max-height: calc(85vh - 125px) !important;
    overflow-y: auto !important;
}

.fancy-modal .form-label,
#custModal .form-label,
#accModal .form-label,
#supModal .form-label,
#purModal .form-label,
#bkModal .form-label,
#rozModal .form-label,
#saleModal .form-label {
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 6px !important;
}

.fancy-modal .input-group-text,
#custModal .input-group-text,
#accModal .input-group-text,
#supModal .input-group-text,
#purModal .input-group-text,
#bkModal .input-group-text,
#rozModal .input-group-text,
#saleModal .input-group-text {
    background: #f1f5f9 !important;
    border: 1.5px solid #94a3b8 !important;
    border-right: none !important;
    border-radius: 10px 0 0 10px !important;
    color: #334155 !important;
    font-weight: 600 !important;
    padding: 10px 14px !important;
    font-size: 0.95rem !important;
}

.fancy-modal .form-control,
.fancy-modal .form-select,
#custModal .form-control,
#custModal .form-select,
#accModal .form-control,
#accModal .form-select,
#supModal .form-control,
#supModal .form-select,
#purModal .form-control,
#purModal .form-select,
#bkModal .form-control,
#bkModal .form-select,
#rozModal .form-control,
#rozModal .form-select,
#saleModal .form-control,
#saleModal .form-select {
    border: 1.5px solid #94a3b8 !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 0.94rem !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    font-weight: 500 !important;
    transition: all 0.15s ease-in-out !important;
}

.fancy-modal .input-group > .form-control,
#custModal .input-group > .form-control,
#accModal .input-group > .form-control,
#supModal .input-group > .form-control,
#purModal .input-group > .form-control,
#bkModal .input-group > .form-control,
#rozModal .input-group > .form-control,
#saleModal .input-group > .form-control {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: 1.5px solid #94a3b8 !important;
}

.fancy-modal .form-control:focus,
.fancy-modal .form-select:focus,
#custModal .form-control:focus,
#custModal .form-select:focus,
#accModal .form-control:focus,
#accModal .form-select:focus,
#supModal .form-control:focus,
#supModal .form-select:focus,
#purModal .form-control:focus,
#purModal .form-select:focus,
#bkModal .form-control:focus,
#bkModal .form-select:focus,
#rozModal .form-control:focus,
#rozModal .form-select:focus,
#saleModal .form-control:focus,
#saleModal .form-select:focus {
    background-color: #ffffff !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
}

.fancy-modal .input-group:focus-within .input-group-text,
#custModal .input-group:focus-within .input-group-text,
#accModal .input-group:focus-within .input-group-text,
#supModal .input-group:focus-within .input-group-text,
#purModal .input-group:focus-within .input-group-text,
#bkModal .input-group:focus-within .input-group-text,
#rozModal .input-group:focus-within .input-group-text,
#saleModal .input-group:focus-within .input-group-text {
    border-color: #2563eb !important;
    background-color: #eff6ff !important;
    color: #2563eb !important;
}

.fancy-modal .modal-footer,
#custModal .modal-footer,
#accModal .modal-footer,
#supModal .modal-footer,
#purModal .modal-footer,
#bkModal .modal-footer,
#rozModal .modal-footer,
#saleModal .modal-footer {
    padding: 16px 24px !important;
    background: #f8fafc !important;
    border-top: 2px solid #cbd5e1 !important;
    border-radius: 0 0 16px 16px !important;
}

.fancy-modal .btn-cancel,
#custModal .btn-cancel,
#accModal .btn-cancel,
#supModal .btn-cancel,
#purModal .btn-cancel,
#bkModal .btn-cancel,
#rozModal .btn-cancel,
#saleModal .btn-cancel {
    border-radius: 9px !important;
    padding: 9px 22px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    border: 1.5px solid #94a3b8 !important;
    background: #ffffff !important;
    color: #334155 !important;
    transition: all 0.15s ease !important;
}

.fancy-modal .btn-cancel:hover,
#custModal .btn-cancel:hover,
#accModal .btn-cancel:hover,
#supModal .btn-cancel:hover,
#purModal .btn-cancel:hover,
#bkModal .btn-cancel:hover,
#rozModal .btn-cancel:hover,
#saleModal .btn-cancel:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #64748b !important;
}

.fancy-modal .btn-save,
#custModal .btn-save,
#accModal .btn-save,
#supModal .btn-save,
#purModal .btn-save,
#bkModal .btn-save,
#rozModal .btn-save,
#saleModal .btn-save {
    background: #2563eb !important;
    border: 1.5px solid #1d4ed8 !important;
    border-radius: 9px !important;
    padding: 9px 26px !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
    transition: all 0.18s ease !important;
}

.fancy-modal .btn-save:hover,
#custModal .btn-save:hover,
#accModal .btn-save:hover,
#supModal .btn-save:hover,
#purModal .btn-save:hover,
#bkModal .btn-save:hover,
#rozModal .btn-save:hover,
#saleModal .btn-save:hover {
    background: #1d4ed8 !important;
    border-color: #1e40af !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Amount Words Card & Type Guide Box (Full Width Colspan)
   ========================================================================== */
.amount-words-card {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1.5px solid #bae6fd;
    border-radius: 12px;
    padding: 12px 16px;
    transition: all 0.2s ease-in-out;
}

.amount-words-badge {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #0369a1;
    background: #e0f2fe;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid #bae6fd;
}

.amount-words-icon {
    font-size: 1.25rem;
    color: #0284c7;
}

.amount-words-text {
    font-size: 0.98rem;
    font-weight: 700;
    color: #0369a1;
    line-height: 1.4;
    word-break: break-word;
}

.type-guide-box {
    border-radius: 12px;
    padding: 12px 16px;
    transition: all 0.22s ease-in-out;
}

/* ------------------------------ Select2 Live Search Styling ---------------------------- */
.select2-container {
    width: 100% !important;
}
.select2-container--bootstrap-5 .select2-selection--single,
.select2-container--bootstrap-5 .select2-selection {
    min-height: 38px !important;
    height: 38px !important;
    font-size: 0.84rem !important;
    border-color: #cbd5e1 !important;
    border-radius: 9px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0.35rem 0.65rem !important;
    background-color: #ffffff !important;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    font-size: 0.84rem !important;
    color: #1e293b !important;
    line-height: normal !important;
    padding-left: 2px !important;
    padding-right: 20px !important;
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: #155eef !important;
    box-shadow: 0 0 0 0.2rem rgba(21, 94, 239, 0.15) !important;
}
select.is-invalid + .select2-container--bootstrap-5 .select2-selection,
.select2-container.is-invalid .select2-selection,
.select2-selection.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15) !important;
}
.input-group > .select2-container--bootstrap-5 {
    flex: 1 1 auto !important;
    width: 1% !important;
}
.input-group > select:first-child + .select2-container--bootstrap-5 .select2-selection,
.input-group > .select2-container--bootstrap-5:first-child .select2-selection {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.input-group > .input-group-text + select + .select2-container--bootstrap-5 .select2-selection,
.input-group > .input-group-text + .select2-container--bootstrap-5 .select2-selection {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.input-group > select:not(:first-child) + .select2-container--bootstrap-5:not(:last-child) .select2-selection {
    border-radius: 0 !important;
}
.select2-dropdown {
    z-index: 1085 !important;
    border-color: #cbd5e1 !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.18), 0 4px 8px -2px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden !important;
}
.select2-container--bootstrap-5 .select2-search--dropdown {
    padding: 8px 10px !important;
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
    border-radius: 7px !important;
    border: 1px solid #cbd5e1 !important;
    font-size: 0.84rem !important;
    padding: 6px 12px !important;
    background: #ffffff !important;
}
.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field:focus {
    border-color: #155eef !important;
    box-shadow: 0 0 0 2px rgba(21, 94, 239, 0.15) !important;
    outline: none !important;
}
.select2-container--bootstrap-5 .select2-results__option {
    font-size: 0.84rem !important;
    padding: 7px 12px !important;
    color: #334155 !important;
}
.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected],
.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected] * {
    background-color: #155eef !important;
    color: #ffffff !important;
}

/* ---------------- Tracking Items Status Styles ---------------- */
.tracking-status-select,
select.tracking-status-select {
    font-weight: 700 !important;
    border-radius: 8px !important;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}
.tracking-status-select.status-received,
select.tracking-status-select.status-received,
.tracking-status-select[data-status="received"] {
    background-color: #16a34a !important;
    border-color: #15803d !important;
    color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}
.tracking-status-select.status-pending,
select.tracking-status-select.status-pending,
.tracking-status-select[data-status="pending"] {
    background-color: #dc2626 !important;
    border-color: #b91c1c !important;
    color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}
.tracking-status-select option {
    background-color: #ffffff !important;
    color: #1e293b !important;
    font-weight: 600 !important;
}
.tracking-status-select option[value="received"] {
    color: #16a34a !important;
    font-weight: 750 !important;
}
.tracking-status-select option[value="pending"] {
    color: #dc2626 !important;
    font-weight: 750 !important;
}

/* Hard suppression of Select2 containers for tracking items */
.tracking-intake-card .select2-container,
#veh_tracking_rows .select2-container {
    display: none !important;
}
.tracking-intake-card select.select2-hidden-accessible,
#veh_tracking_rows select.select2-hidden-accessible {
    display: block !important;
    position: static !important;
}
/* One-click privacy for owner meetings: values remain in the DOM/API but are
   unreadable on screen until the eye button is pressed again. */
body.tm-privacy-on .tm-private-amount,
body.tm-privacy-on .tm-amount-input,
body.tm-privacy-on [id*="amount_words"],
body.tm-privacy-on [id*="amount-badge"],
body.tm-privacy-on [id$="-words"],
body.tm-privacy-on .apexcharts-yaxis-label,
body.tm-privacy-on .apexcharts-datalabel,
body.tm-privacy-on .highcharts-data-label,
body.tm-privacy-on .highcharts-axis-labels text {
    filter: blur(9px) !important;
    user-select: none !important;
    opacity: 0.35 !important;
    pointer-events: none !important;
    transition: filter 0.2s ease, opacity 0.2s ease;
}

body.tm-privacy-on .tm-amount-input {
    -webkit-text-security: disc;
}

/* ═══════════════════════════════════════════════════════════════════════
   Universal Clean Print Engine (No Left Menu, No Header, No Footer)
   ═══════════════════════════════════════════════════════════════════════ */
@media print {
    /* 1. Completely hide Left Menu (Sidebar), Top Header, Footer & UI chrome */
    .app-sidebar,
    aside.app-sidebar,
    .tm-sidebar,
    .main-sidebar,
    .sidebar,
    .app-sidebar-wrapper,
    .app-header,
    nav.app-header,
    .navbar,
    .main-header,
    .app-footer,
    footer.app-footer,
    footer,
    .impersonation-banner,
    .shortcut-bar,
    #shortcut-bar,
    .tm-shortcut-bar,
    .no-print,
    .d-print-none,
    .btn:not(.d-print-inline):not(.d-print-block),
    button:not(.d-print-inline):not(.d-print-block),
    .dropdown,
    .dropdown-menu,
    .modal,
    .modal-backdrop,
    .toast,
    #toast-container,
    .alert-dismissible .btn-close,
    #tm-privacy-toggle,
    #tm-header-bell-item,
    .tm-header-quick-actions {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    /* 2. Reset Canvas to 100% Full-Width Paper Layout */
    html, body {
        background: #ffffff !important;
        background-color: #ffffff !important;
        color: #0f172a !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: auto !important;
        width: 100% !important;
        min-width: 100% !important;
        font-size: 10pt !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    body.layout-fixed,
    body.sidebar-expand-lg {
        overflow: visible !important;
        height: auto !important;
        min-height: auto !important;
    }

    .app-wrapper {
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: auto !important;
        position: static !important;
    }

    body.layout-fixed .app-main,
    .app-main,
    main.app-main,
    .app-content,
    .app-content > .container-fluid,
    .container-fluid,
    main {
        margin: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-inline-start: 0 !important;
        margin-inline-end: 0 !important;
        padding: 0 !important;
        padding-top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        float: none !important;
        position: static !important;
        transform: none !important;
        display: block !important;
    }

    /* 3. Privacy Override: Reveal figures on print */
    body.tm-privacy-on .tm-private-amount,
    body.tm-privacy-on .tm-amount-input {
        filter: none !important;
        opacity: 1 !important;
    }

    /* 4. Page Break Hygiene */
    @page {
        margin: 8mm 10mm;
        size: auto;
    }

    .card,
    .fo-card,
    .fo-hero-card,
    .sd-kpi,
    .table-responsive {
        box-shadow: none !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    table {
        width: 100% !important;
        page-break-inside: auto;
    }

    tr {
        page-break-inside: avoid !important;
        page-break-after: auto;
    }

    thead {
        display: table-header-group !important;
    }

    tfoot {
        display: table-footer-group !important;
    }
}

/* =====================================================================
   Top Navbar Quick Action Buttons (Daily Register, Add Vehicle, Sale Vehicle)
   ===================================================================== */
.tm-header-quick-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tm-hdr-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 0.8125rem;
    padding: 0.36rem 0.85rem;
    border-radius: 9999px;
    white-space: nowrap;
    text-decoration: none;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
    line-height: 1.25;
}
.tm-hdr-btn i {
    font-size: 0.95rem;
}
.tm-hdr-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}
.tm-hdr-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
}

/* Daily Entery Register: Dark Slate / Navy with Cyan icon */
.tm-hdr-btn-daily {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
    color: #ffffff !important;
    border: 1px solid #475569 !important;
}
.tm-hdr-btn-daily i {
    color: #38bdf8 !important;
}
.tm-hdr-btn-daily:hover {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    color: #ffffff !important;
    border-color: #38bdf8 !important;
}

/* Add Vehicle: Emerald Green with Mint icon */
.tm-hdr-btn-vehicle {
    background: linear-gradient(135deg, #15803d 0%, #16a34a 100%) !important;
    color: #ffffff !important;
    border: 1px solid #16a34a !important;
}
.tm-hdr-btn-vehicle i {
    color: #bbf7d0 !important;
}
.tm-hdr-btn-vehicle:hover {
    background: linear-gradient(135deg, #166534 0%, #15803d 100%) !important;
    color: #ffffff !important;
    border-color: #86efac !important;
}

/* Sale Vehicle: Royal Blue with Light Blue icon */
.tm-hdr-btn-sale {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    border: 1px solid #2563eb !important;
}
.tm-hdr-btn-sale i {
    color: #bfdbfe !important;
}
.tm-hdr-btn-sale:hover {
    background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    border-color: #93c5fd !important;
}

@media (max-width: 767.98px) {
    .tm-header-quick-actions {
        gap: 5px;
    }
    .tm-hdr-btn {
        padding: 0.28rem 0.55rem;
        font-size: 0.75rem;
        gap: 4px;
    }
    .tm-hdr-btn i {
        font-size: 0.85rem;
    }
}
@media (max-width: 450px) {
    .tm-header-quick-actions {
        gap: 3px;
    }
    .tm-hdr-btn {
        padding: 0.24rem 0.4rem;
        font-size: 0.70rem;
    }
}

/* ==========================================================================
   Centralized Toolbar & Filter Form Control Heights (Executive Standard: 38px)
   ========================================================================== */
:root {
    --tm-ctrl-height: 38px;
    --tm-ctrl-radius: 8px;
    --tm-ctrl-font-size: 0.85rem;
}

/* Standardize all inputs, selects, triggers and buttons in filter toolbars */
.fancy-filter-card .fancy-input,
.fancy-filter-card .fancy-select,
.fancy-filter-card input.form-control,
.fancy-filter-card select.form-select,
.fancy-filter-card .tm-ss-trigger,
.fancy-filter-card .btn-fancy,
.card-filter input.form-control,
.card-filter select.form-select,
.card-filter .tm-ss-trigger,
.card-filter .btn,
.filter-row input.form-control,
.filter-row select.form-select,
.filter-row .tm-ss-trigger,
.filter-row .btn,
.tm-filter-card input.form-control,
.tm-filter-card select.form-select,
.tm-filter-card .input-group-text,
.tm-filter-card .btn,
.tm-reset-btn,
.tm-filter-ctrl {
    height: var(--tm-ctrl-height) !important;
    min-height: var(--tm-ctrl-height) !important;
    max-height: var(--tm-ctrl-height) !important;
    box-sizing: border-box !important;
}

/* Executive Fancy Buttons (View Ledger, Actions) */
.btn-fancy {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    height: var(--tm-ctrl-height) !important;
    min-height: var(--tm-ctrl-height) !important;
    max-height: var(--tm-ctrl-height) !important;
    padding: 0 1rem !important;
    border-radius: var(--tm-ctrl-radius) !important;
    border: 1px solid transparent !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    text-decoration: none !important;
    color: #ffffff !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-fancy:hover:not(:disabled) {
    transform: translateY(-1.5px);
    filter: brightness(1.08);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.btn-fancy:active:not(:disabled) {
    transform: translateY(0);
}
.btn-fancy:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.5);
    transform: none !important;
    box-shadow: none !important;
}

/* Centralized Fancy Inputs & Selects */
.fancy-input,
.fancy-select {
    height: var(--tm-ctrl-height) !important;
    min-height: var(--tm-ctrl-height) !important;
    max-height: var(--tm-ctrl-height) !important;
    padding: 0.4rem 0.75rem !important;
    font-size: var(--tm-ctrl-font-size) !important;
    font-weight: 500;
    color: #0f172a;
    background-color: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-radius: var(--tm-ctrl-radius) !important;
    box-sizing: border-box !important;
    line-height: normal !important;
    transition: all 0.2s ease;
}

.fancy-input:focus,
.fancy-select:focus {
    background-color: #ffffff;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Date input webkit reset for matching alignment */
.fancy-input[type="date"]::-webkit-calendar-picker-indicator,
input[type="date"].form-control::-webkit-calendar-picker-indicator {
    cursor: pointer;
    padding: 2px;
    margin: 0;
}

/* ==========================================================
   GLOBAL BULLETPROOF PRINT SYSTEM (Eliminates Blank Page 1 & Clutter)
   ========================================================== */
@media print {
    @page {
        margin: 8mm 8mm 8mm 8mm;
        size: auto;
    }

    html, body {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        background: #ffffff !important;
        color: #000000 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .app-wrapper {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        grid-template-rows: none !important;
        grid-template-columns: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .app-sidebar, aside.app-sidebar, .sidebar-wrapper, .sidebar-overlay,
    .app-header, nav.app-header, .navbar, .main-header,
    .app-footer, footer.app-footer, footer,
    .impersonation-banner, .shortcut-bar, #shortcut-bar,
    .skip-link, .no-print, .btn, button {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        position: static !important;
    }

    .app-main {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .app-content, .container-fluid {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    a[href^=http]::after {
        content: "" !important;
    }
}