/* =====================================================================
   Government of Sindh Domicile & PRC MIS — Official UI Theme
   ===================================================================== */
:root {
    --primary: #1d4ed8;
    --primary-dark: #1e40af;
    --primary-deep: #0f2b66;
    --primary-soft: #eff6ff;
    --nav: #0f2557;
    --nav-deep: #0a1735;
    --bg: #f4f7fb;
    --surface: #ffffff;
    --border: #cbd5e1;
    --border-strong: #94a3b8;
    --text: #0f172a;
    --muted: #64748b;
    --success: #059669;
    --success-dark: #047857;
    --warning: #d97706;
    --warning-dark: #b45309;
    --danger: #dc2626;
    --danger-dark: #b91c1c;
    --info: #0284c7;
    --radius: 12px;
    --shadow: 0 8px 24px rgba(15, 23, 42, 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: var(--warning);
    --ui-danger: var(--danger);
    --ui-info: var(--info);
    --ui-text: var(--text);
    --ui-muted: var(--muted);
    --ui-border: var(--border);
    --ui-border-dark: var(--border-strong);
    --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: 29, 78, 216;
    --bs-success: var(--success);
    --bs-success-rgb: 5, 150, 105;
    --bs-warning: var(--warning);
    --bs-warning-rgb: 217, 119, 6;
    --bs-danger: var(--danger);
    --bs-danger-rgb: 220, 38, 38;
    --bs-info: var(--info);
    --bs-info-rgb: 2, 132, 199;
    --bs-body-color: var(--text);
    --bs-body-bg: var(--bg);
    --bs-border-color: var(--border);
}

* { 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; }

/* ------------------------------ UNIVERSAL BUTTON SYSTEM -------------------------------- */
.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-weight: 700 !important;
    border-radius: 8px;
    font-size: 13.5px;
    height: 42px;
    padding: 0 18px;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    white-space: nowrap;
}
.btn-sm {
    height: 36px !important;
    min-height: 36px !important;
    font-size: 12.5px !important;
    padding: 0 14px !important;
    border-radius: 999px;
}
.btn-lg {
    height: 48px !important;
    font-size: 15px !important;
    padding: 0 24px !important;
    border-radius: 10px;
}

/* Primary Button (Sindh Royal Blue 3D) */
.btn-primary,
.primary-btn {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
    border: 1px solid #1e3a8a !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.primary-btn:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    border-color: #1e3a8a !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(29, 78, 216, 0.4) !important;
}

/* Success Button (Emerald 3D) */
.btn-success {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    border: 1px solid #065f46 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}
.btn-success:hover,
.btn-success:focus {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: #065f46 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(5, 150, 105, 0.4) !important;
}

/* Warning Button (Amber 3D) */
.btn-warning {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
    border: 1px solid #78350f !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}
.btn-warning:hover,
.btn-warning:focus {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    border-color: #78350f !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(217, 119, 6, 0.4) !important;
}

/* Danger Button (Rose Red 3D) */
.btn-danger {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    border: 1px solid #991b1b !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}
.btn-danger:hover,
.btn-danger:focus {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    border-color: #991b1b !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.4) !important;
}

/* Secondary Button (Crisp White/Slate Border) */
.btn-secondary,
.secondary-btn,
.btn-light {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #1e293b !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
}
.btn-secondary:hover,
.secondary-btn:hover,
.btn-light:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
    transform: translateY(-1px) !important;
}

/* Outline Buttons */
.btn-outline-primary {
    background: #ffffff !important;
    border: 1.5px solid #1d4ed8 !important;
    color: #1d4ed8 !important;
    box-shadow: 0 2px 6px rgba(29, 78, 216, 0.08) !important;
}
.btn-outline-primary:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
    border-color: #1e3a8a !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.35) !important;
}
.btn-outline-secondary {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #475569 !important;
}
.btn-outline-secondary:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

/* =========================================================================
   Universal Table Action Icon Buttons (3D, high contrast, highly visible)
   ========================================================================= */
.btn-action-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border: 1.5px solid transparent !important;
    padding: 0 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255,255,255,0.4) !important;
}

/* Edit / Primary Action */
.btn-action-edit,
.btn-action-primary {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    border-color: #93c5fd !important;
}
.btn-action-edit:hover,
.btn-action-primary:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
    color: #ffffff !important;
    border-color: #1e3a8a !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 14px rgba(29, 78, 216, 0.35) !important;
}

/* Copy / Credentials Action */
.btn-action-copy,
.btn-action-copy-active {
    background: #f5f3ff !important;
    color: #6366f1 !important;
    border-color: #c4b5fd !important;
}
.btn-action-copy:hover,
.btn-action-copy-active:hover {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    color: #ffffff !important;
    border-color: #4338ca !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 14px rgba(99, 102, 241, 0.35) !important;
}

/* WhatsApp / Direct Message Action */
.btn-action-wa,
.btn-action-wa-active {
    background: #ecfdf5 !important;
    color: #059669 !important;
    border-color: #6ee7b7 !important;
}
.btn-action-wa:hover,
.btn-action-wa-active:hover {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    border-color: #047857 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 14px rgba(5, 150, 105, 0.35) !important;
}

/* Inactive / Muted Action Button (Clear and readable, NOT invisible) */
.btn-action-inactive {
    background: #f8fafc !important;
    color: #64748b !important;
    border-color: #cbd5e1 !important;
    opacity: 0.75 !important;
    cursor: not-allowed !important;
}
.btn-action-inactive:hover {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border-color: #94a3b8 !important;
    opacity: 0.9 !important;
    transform: none !important;
}

.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;
}

/* ------------------------------ Page Hero Header (Dark Teal/Navy Banner) ---------------------------- */
.page-header,
.tm-page-header {
    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.12), transparent 35%), linear-gradient(135deg, #05212b 0%, #082a36 60%, #0a1735 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-bottom: 3.5px solid #020e14 !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.38), 0 6px 14px -2px rgba(0, 0, 0, 0.22), 0 1px 4px 0 rgba(0, 0, 0, 0.30) !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: 12px !important;
    color: #ffffff !important;
}
.tm-ph-icon {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #38bdf8 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.22) !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-page-header h1,
.page-header h1 {
    margin: 0 !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: -0.02em !important;
}

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

.tm-page-header .btn-primary,
.page-header .btn-primary {
    background: #155eef !important;
    border: 1px solid #3b82f6 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(21, 94, 239, 0.4) !important;
    border-radius: 9px !important;
    font-weight: 700 !important;
}
.tm-page-header .btn-primary:hover,
.page-header .btn-primary:hover {
    background: #104cc3 !important;
    border-color: #155eef !important;
    transform: translateY(-1px);
}

/* ------------------------------ 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: linear-gradient(135deg, #181534 0%, #2e2863 100%) !important;
    color: #ffffff !important;
    border: 1px solid #3b357a !important;
    border-bottom: 3.5px solid #14112e !important;
    border-radius: 16px !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.10) !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,
.table-admin-users {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    --bs-table-striped-bg: #f8fafc;
}

table thead th,
table thead tr th,
table thead td,
.table thead th,
.table thead tr th,
.table thead td,
.tm-table thead th,
.table-admin-users thead th,
.table-ledger thead th,
.table-header-fb th {
    background: #1470E8 !important;
    background-color: #1470E8 !important;
    background-image: none !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 13px 16px !important;
    border: 1px solid #1470E8 !important;
    border-bottom: 2px solid #0f5bc0 !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

/* Table cells with clear grid lines */
.table tbody td,
.tm-table tbody td,
.table-admin-users tbody td {
    padding: 12px 16px !important;
    border: 1px solid #cbd5e1 !important;
    vertical-align: middle !important;
    font-size: 13px !important;
    color: #0f172a !important;
}

/* 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 {
    background: var(--primary);
    color: #fff;
}
.tm-modal-green .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 (Clean White Cards) ---------------------- */
.sd-kpi,
.sd-kpi-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-bottom: 3.5px solid #94a3b8 !important;
    border-radius: 14px !important;
    padding: 14px 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    overflow: hidden;
    height: 100%;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.sd-kpi:hover,
.sd-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important;
}
.sd-kpi .sd-kpi-icon,
.sd-kpi-card .sd-kpi-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ffffff;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}
.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.15rem;
    font-weight: 800;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #0f172a;
}
.sd-kpi .sd-kpi-label,
.sd-kpi-card .sd-kpi-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #64748b;
    margin-top: 3px;
    font-weight: 700;
    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: #155eef; }
.sd-kpi.k-primary,
.sd-kpi-card.k-primary { border-bottom-color: #155eef !important; }

.sd-kpi.k-success .sd-kpi-icon,
.sd-kpi-card.k-success .sd-kpi-icon-box { background: #059669; }
.sd-kpi.k-success,
.sd-kpi-card.k-success { border-bottom-color: #059669 !important; }

.sd-kpi.k-warning .sd-kpi-icon,
.sd-kpi-card.k-warning .sd-kpi-icon-box { background: #f59e0b; }
.sd-kpi.k-warning,
.sd-kpi-card.k-warning { border-bottom-color: #f59e0b !important; }

.sd-kpi.k-danger  .sd-kpi-icon,
.sd-kpi-card.k-danger  .sd-kpi-icon-box { background: #dc2626; }
.sd-kpi.k-danger,
.sd-kpi-card.k-danger  { border-color: #e2e8f0 !important; border-bottom: 3.5px solid #dc2626 !important; }

.sd-kpi.k-info    .sd-kpi-icon,
.sd-kpi-card.k-info    .sd-kpi-icon-box { background: #0284c7; }
.sd-kpi.k-info,
.sd-kpi-card.k-info    { border-bottom-color: #0284c7 !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; }
}

/* =====================================================================
   Sidebar Layout Fixes & Custom Buttons (Green Dashboard, Red Logout)
   ===================================================================== */
/* =====================================================================
   Sidebar Layout Fixes & Custom Buttons (Dark Grey Sidebar)
   ===================================================================== */
.app-sidebar,
.app-sidebar.tm-sidebar,
.main-sidebar {
    background-color: #1B806E !important;
    background: #1B806E !important;
    min-height: 100vh !important;
    height: 100vh !important;
    position: sticky !important;
    top: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 1038 !important;
}

.app-sidebar .sidebar-brand,
.tm-sidebar .sidebar-brand {
    height: auto !important;
    min-height: auto !important;
    padding: 18px 12px 14px 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.app-sidebar .sidebar-wrapper,
.tm-sidebar .sidebar-wrapper {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background-color: #1B806E !important;
    background: #1B806E !important;
    padding-bottom: 30px !important;
}

/* Custom scrollbar for sidebar */
.app-sidebar .sidebar-wrapper::-webkit-scrollbar {
    width: 6px;
}
.app-sidebar .sidebar-wrapper::-webkit-scrollbar-track {
    background: #156d5e !important;
}
.app-sidebar .sidebar-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

/* Sidebar navigation links */
.sidebar-menu .nav-link,
.tm-sidebar .nav-link {
    color: #e5ecfb !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 9px !important;
    transition: all 0.15s ease-in-out !important;
    padding: 9px 12px !important;
}


/* ==========================================================================
   OFFICIAL SINDH E-SERVICES SIDEBAR COLOR SCHEME (CENTRALIZED)
   - Sidebar Background (Top to Bottom): #0C6B61 -> #08564E
   - Profile Box: #0F7A6D
   - Menu Normal State: Background #0E6B5F, Text #E6F8F5, Icon #D1F3ED
   - Menu Hover State: Background #14877A, Text #FFFFFF, Icon #FFFFFF
   - Menu Selected/Active State: Background #E8F7F5, Left Border #10B981, Text #0F3D37
   - Section Title: #8CCFC6
   - Logout Button: Normal #DC2626, Hover #B91C1C
   ========================================================================== */

aside.app-sidebar,
.tm-sidebar,
.app-sidebar[data-bs-theme="dark"],
.app-sidebar {
    background: #0C6B61 !important;
    background-color: #0C6B61 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.sidebar-brand,
.sidebar-brand-unified {
    background: transparent !important;
    border-bottom: none !important;
}

.sidebar-wrapper {
    height: auto !important;
    overflow-y: visible !important;
}

/* User Identity / Profile Box */
.sidebar-profile-box {
    background: #0F7A6D !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    margin: 8px 6px 12px !important;
    width: calc(100% - 12px) !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

.sidebar-profile-avatar {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    background: #0C6B61 !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
}

.sidebar-profile-badge {
    background: rgba(0, 0, 0, 0.22) !important;
    color: #E6F8F5 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 2px 7px !important;
    border-radius: 6px !important;
    display: inline-block !important;
}

/* Section Title Headers */
.sidebar-menu .nav-header {
    color: #8CCFC6 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    padding: 14px 10px 6px !important;
    display: flex !important;
    align-items: center !important;
}
.sidebar-menu .nav-header::after {
    content: "" !important;
    flex: 1 !important;
    height: 1px !important;
    background: rgba(140, 207, 198, 0.25) !important;
    margin-left: 10px !important;
}

/* Navigation Links — Normal State (Background #0E6B5F, Text #ffffff, Icon #ffffff) */
.sidebar-menu .nav-link:not(.sd-nav-logout) {
    background: #0E6B5F !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 9px !important;
    margin: 4px 6px !important;
    padding: 9px 12px !important;
    display: flex !important;
    align-items: center !important;
    min-height: 40px !important;
    width: calc(100% - 12px) !important;
    box-sizing: border-box !important;
    text-align: left !important;
    border: 0 !important;
    border-left: 4px solid transparent !important;
    box-shadow: none !important;
    position: relative !important;
    transition: background 0.15s ease-in-out, color 0.15s ease-in-out !important;
}

.sidebar-menu .nav-link .nav-icon {
    background: transparent !important;
    background-color: transparent !important;
    font-size: 15px !important;
    margin-right: 10px !important;
    min-width: 20px !important;
    text-align: center !important;
    transition: none !important;
}

/* Wese White: All unselected icons are pure white */
.sidebar-menu .nav-link:not(.active):not(.sd-nav-logout) .nav-icon {
    color: #ffffff !important;
}

.sidebar-menu .nav-link:not(.sd-nav-logout) p {
    color: #ffffff !important;
    margin: 0 !important;
    flex-grow: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Right Chevron Arrow on Links */
.sidebar-menu .nav-link:not(.sd-nav-logout)::after {
    content: "\F285" !important;
    font-family: "bootstrap-icons" !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    transition: color 0.15s ease-in-out, transform 0.15s ease-in-out !important;
}

/* Navigation Links — Hover State (Halka poora background button pr shade, icon stays pure white) */
.sidebar-menu .nav-link:not(.active):not(.sd-nav-logout):hover {
    background: #14877A !important;
    color: #ffffff !important;
    border-left-color: transparent !important;
}
.sidebar-menu .nav-link:not(.active):not(.sd-nav-logout):hover .nav-icon {
    color: #ffffff !important;
    background: transparent !important;
}
.sidebar-menu .nav-link:not(.active):not(.sd-nav-logout):hover p {
    color: #ffffff !important;
}
.sidebar-menu .nav-link:not(.active):not(.sd-nav-logout):hover::after {
    color: #ffffff !important;
    transform: translateX(2px) !important;
}

/* Selected / Active State: Background #E8F7F5, Left Border 4px #10B981, Icon & Text Black */
.sidebar-menu .nav-link.active:not(.sd-nav-logout),
.sidebar-menu .nav-link.active:not(.sd-nav-logout):hover {
    background: #E8F7F5 !important;
    background-color: #E8F7F5 !important;
    color: #000000 !important;
    font-weight: 700 !important;
    border-left: 4px solid #10B981 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}
.sidebar-menu .nav-link.active:not(.sd-nav-logout) .nav-icon,
.sidebar-menu .nav-link.active:not(.sd-nav-logout):hover .nav-icon {
    color: #000000 !important;
    font-weight: 800 !important;
    background: transparent !important;
}
.sidebar-menu .nav-link.active:not(.sd-nav-logout) p,
.sidebar-menu .nav-link.active:not(.sd-nav-logout):hover p {
    color: #000000 !important;
    font-weight: 700 !important;
}
.sidebar-menu .nav-link.active:not(.sd-nav-logout)::after,
.sidebar-menu .nav-link.active:not(.sd-nav-logout):hover::after {
    color: #000000 !important;
    font-weight: 700 !important;
}

/* Dashboard Button follows standard menu states */
.nav-link.sd-nav-dashboard {
    box-shadow: none !important;
}

/* Logout Container and Form */
#sidebar-logout-form {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* Logout Button — Exact Same Size and Full Width as other menu links */
.sidebar-menu .nav-link.sd-nav-logout {
    background: #DC2626 !important;
    color: #FFFFFF !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 9px !important;
    box-shadow: 0 3px 10px rgba(220, 38, 38, 0.3) !important;
    cursor: pointer !important;
    outline: none !important;
    display: flex !important;
    align-items: center !important;
    min-height: 40px !important;
    padding: 9px 12px !important;
    margin: 4px 6px !important;
    width: calc(100% - 12px) !important;
    box-sizing: border-box !important;
    text-align: left !important;
    border: 0 !important;
    position: relative !important;
    transition: background 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}
.sidebar-menu .nav-link.sd-nav-logout .nav-icon,
.sidebar-menu .nav-link.sd-nav-logout p {
    color: #FFFFFF !important;
    margin: 0 !important;
}
.sidebar-menu .nav-link.sd-nav-logout p {
    flex-grow: 1 !important;
}
.sidebar-menu .nav-link.sd-nav-logout::after {
    content: "\F285" !important;
    font-family: "bootstrap-icons" !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}
.sidebar-menu .nav-link.sd-nav-logout:hover,
.sidebar-menu .nav-link.sd-nav-logout:focus {
    background: #B91C1C !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(185, 28, 28, 0.45) !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;
}



/* Fancy Header Quick Action Buttons */
.hdr-shortcut-btn {
    display: inline-flex;
    align-items: center;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 50px;
    padding: 6px 14px;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.hdr-shortcut-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}
.hdr-shortcut-btn i {
    font-size: 13px;
    margin-right: 5px;
}
.hdr-btn-fb {
    background: #1877F2 !important;
    color: #ffffff !important;
    border: 1px solid #1877F2 !important;
}
.hdr-btn-fb:hover {
    background: #1364d1 !important;
    color: #ffffff !important;
    border-color: #1364d1 !important;
}
.hdr-btn-green {
    background: #1B806E !important;
    color: #ffffff !important;
    border: 1px solid #1B806E !important;
}
.hdr-btn-green:hover {
    background: #146657 !important;
    color: #ffffff !important;
    border-color: #146657 !important;
}
.hdr-btn-slate {
    background: #f8fafc !important;
    color: #1e293b !important;
    border: 1px solid #cbd5e1 !important;
}
.hdr-btn-slate:hover {
    background: #1e293b !important;
    color: #ffffff !important;
    border-color: #1e293b !important;
}
.hdr-btn-amber {
    background: #fffbeb !important;
    color: #92400e !important;
    border: 1px solid #fcd34d !important;
}
.hdr-btn-amber:hover {
    background: #d97706 !important;
    color: #ffffff !important;
    border-color: #d97706 !important;
}
.hdr-btn-purple {
    background: #f5f3ff !important;
    color: #6d28d9 !important;
    border: 1px solid #c4b5fd !important;
}
.hdr-btn-purple:hover {
    background: #7c3aed !important;
    color: #ffffff !important;
    border-color: #7c3aed !important;
}
.hdr-btn-teal {
    background: #f0fdfa !important;
    color: #0f766e !important;
    border: 1px solid #99f6e4 !important;
}
.hdr-btn-teal:hover {
    background: #0d9488 !important;
    color: #ffffff !important;
    border-color: #0d9488 !important;
}

/* Header Shortcuts Dropdown */
.hdr-shortcuts-dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 50px;
    padding: 5px 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-decoration: none !important;
}
.hdr-shortcuts-dropdown-btn:hover,
.hdr-shortcuts-dropdown-btn:focus,
.hdr-shortcuts-dropdown-btn[aria-expanded="true"] {
    background: #f8fafc;
    border-color: #2563eb !important;
    color: #1d4ed8 !important;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.15);
}
.hdr-shortcuts-dropdown-btn .bi-grid-3x3-gap-fill {
    font-size: 14px;
}

.hdr-shortcuts-menu {
    border-radius: 12px !important;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16), 0 4px 10px rgba(15, 23, 42, 0.08) !important;
    border: 1px solid #e2e8f0 !important;
    overflow: hidden;
}
.hdr-shortcuts-menu .dropdown-item {
    border-radius: 8px;
    margin: 2px 8px;
    width: calc(100% - 16px);
    padding: 7px 10px;
    transition: background-color 0.15s ease, transform 0.15s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}
.hdr-shortcuts-menu .dropdown-item:hover {
    background-color: #f1f5f9;
    transform: translateX(3px);
}
.hdr-shortcuts-menu .dropdown-item:active {
    background-color: #e2e8f0;
    color: inherit;
}
.hdr-shortcuts-menu .icon-tile {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.hdr-shortcuts-menu .item-title {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.25;
}
.hdr-shortcuts-menu .item-subtitle {
    font-size: 11px;
    color: #64748b;
    line-height: 1.2;
}
.hdr-shortcuts-menu .section-header {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #94a3b8;
    padding: 8px 16px 4px 16px;
}

/* 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;
}

@media print {
    body.tm-privacy-on .tm-private-amount,
    body.tm-privacy-on .tm-amount-input { filter: none !important; opacity: 1 !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;
}

.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;
}

.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;
}

/* ==========================================================================
   Centralized KPI & Metric Tiles Styling (Clean Flat & Modern)
   ========================================================================== */
.card-3d-box,
.kpi-card,
.stat-card,
.tile-box {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.11), 0 2px 6px -1px rgba(0, 0, 0, 0.06) !important;
    padding: 1.1rem 1.25rem !important;
    transition: all 0.2s ease !important;
}

.card-3d-box:hover,
.kpi-card:hover,
.stat-card:hover,
.tile-box:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px -3px rgba(0, 0, 0, 0.16), 0 4px 8px -2px rgba(0, 0, 0, 0.08) !important;
    border-color: #cbd5e1 !important;
}

.icon-box-3d,
.kpi-icon-box {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    border: none !important;
}

.card-3d-green .icon-box-3d { background: #dcfce7 !important; color: #15803d !important; }
.card-3d-emerald .icon-box-3d { background: #d1fae5 !important; color: #047857 !important; }
.card-3d-amber .icon-box-3d { background: #fef3c7 !important; color: #b45309 !important; }
.card-3d-rose .icon-box-3d { background: #ffe4e6 !important; color: #be123c !important; }
.card-3d-navy .icon-box-3d { background: #e2e8f0 !important; color: #1e293b !important; }
.card-3d-blue .icon-box-3d { background: #dbeafe !important; color: #1d4ed8 !important; }
.card-3d-slate .icon-box-3d { background: #f1f5f9 !important; color: #475569 !important; }
.card-3d-teal .icon-box-3d { background: #ccfbf1 !important; color: #0f766e !important; }

/* ==========================================================================
   CENTRALIZED GLOBAL TABLE HEADERS (ROYAL BLUE #1470E8)
   ========================================================================== */
table thead th,
table thead tr th,
table thead td,
.table thead th,
.table thead tr th,
.table thead td,
.table-header-fb th,
.table-ledger thead th,
.tm-table thead th,
.table-admin-users thead th {
    background: #1470E8 !important;
    background-color: #1470E8 !important;
    background-image: none !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 14px !important;
    border: 1px solid #1470E8 !important;
    border-bottom: 2px solid #0f5bc0 !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

/* ==========================================================================
   CENTRALIZED FULL-WIDTH CARDS & SECTION TAB CARD HEADERS (#1470E8)
   ========================================================================== */
.card-title-box,
.card-title-box-1,
.card-title-box-2,
.card-title-box-3,
.card-title-box-4,
.full-width-card-header,
.card-header-blue,
.app-header-banner {
    background: linear-gradient(135deg, #1470e8 0%, #0d65d9 100%) !important;
    background-color: #1470E8 !important;
    color: #ffffff !important;
}

.card-title-box .card-title-heading,
.card-title-box-1 .card-title-heading,
.card-title-box-2 .card-title-heading,
.card-title-box-3 .card-title-heading,
.card-title-box-4 .card-title-heading {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.card-title-box .card-title-sub,
.card-title-box-1 .card-title-sub,
.card-title-box-2 .card-title-sub,
.card-title-box-3 .card-title-sub,
.card-title-box-4 .card-title-sub {
    color: rgba(255, 255, 255, 0.88) !important;
}

.card-title-box .card-title-badge,
.card-title-box-1 .card-title-badge,
.card-title-box-2 .card-title-badge,
.card-title-box-3 .card-title-badge,
.card-title-box-4 .card-title-badge,
.section-num-badge,
.badge-step-1,
.badge-step-2,
.badge-step-3,
.badge-step-4 {
    background: rgba(255, 255, 255, 0.22) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
}

.card-header-pill {
    background: rgba(255, 255, 255, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
}