/* ============================================
   Car Rental Management System - Main Stylesheet
   Optimized for usability, clarity & accessibility
   ============================================ */

/* CSS Variables / Theme */
:root {
    --sidebar-width: 260px;
    --sidebar-collapsed: 0px;
    --topbar-height: 56px;
    --primary: #3b82f6;
    --primary-dark: #2563eb;
    --primary-light: #dbeafe;
    --success: #22c55e;
    --success-light: #dcfce7;
    --warning: #f59e0b;
    --warning-light: #fef3c7;
    --danger: #ef4444;
    --danger-light: #fee2e2;
    --info: #06b6d4;
    --info-light: #cffafe;
    --sidebar-bg: #1e293b;
    --sidebar-hover: #334155;
    --sidebar-text: #cbd5e1;
    --sidebar-active: #3b82f6;
    --bg: #f1f5f9;
    --bg-card: #ffffff;
    --text: #1e293b;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --shadow: 0 1px 3px rgba(0,0,0,.08);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.12);
    --radius: 10px;
    --transition-speed: .2s;
}

[data-theme="dark"] {
    --sidebar-bg: #0f172a;
    --sidebar-hover: #1e293b;
    --bg: #0f172a;
    --bg-card: #1e293b;
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --border: #334155;
    --shadow: 0 1px 3px rgba(0,0,0,.3);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.25);
    --primary-light: #1e3a5f;
    --success-light: #14532d;
    --warning-light: #78350f;
    --danger-light: #7f1d1d;
    --info-light: #164e63;
}

[data-theme="dark"] .card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .table { background: var(--bg-card); color: var(--text); }
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .input-group-text { background: #334155; border-color: #475569; color: var(--text); }
[data-theme="dark"] .btn-outline-secondary { color: var(--text-muted); border-color: #475569; }
[data-theme="dark"] .table { --bs-table-bg: var(--bg-card); --bs-table-striped-bg: #1a2332; --bs-table-hover-bg: #253447; }
[data-theme="dark"] .breadcrumb-item a { color: var(--text-muted); }
[data-theme="dark"] .list-group-item { background: var(--bg-card); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .offcanvas, [data-theme="dark"] .offcanvas-header { background: var(--bg-card); color: var(--text); }
[data-theme="dark"] .text-dark { color: var(--text) !important; }
[data-theme="dark"] .bg-light { background: #334155 !important; color: var(--text) !important; }
[data-theme="dark"] .text-muted { color: var(--text-muted) !important; }
[data-theme="dark"] .table td,
[data-theme="dark"] .table th,
[data-theme="dark"] .table small { color: var(--text) !important; }
[data-theme="dark"] .alert { color: var(--text); border-color: var(--border); }
[data-theme="dark"] .alert-light { background: #334155; color: var(--text); }
[data-theme="dark"] .badge.bg-light.text-dark { background: #475569 !important; color: #f1f5f9 !important; }

/* Reset & Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); margin: 0; overflow-x: hidden; line-height: 1.6; }
a { color: var(--primary); text-decoration: none; transition: color var(--transition-speed); }
a:hover { color: var(--primary-dark); }

/* Focus ring for accessibility */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
button:focus-visible, .btn:focus-visible { box-shadow: 0 0 0 3px rgba(59,130,246,.35); outline: none; }

/* Selection style */
::selection { background: var(--primary-light); color: var(--primary-dark); }

/* Login Screen */
.login-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1e293b 0%, #3b82f6 100%);
    animation: loginFadeIn .6s ease;
}
@keyframes loginFadeIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
.login-card {
    background: white;
    border-radius: 16px;
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 25px 50px rgba(0,0,0,.25);
    animation: loginSlideUp .5s ease;
}
@keyframes loginSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.login-logo { font-size: 3rem; color: var(--primary); animation: logoPulse 2s ease-in-out infinite; }
@keyframes logoPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes loginShake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* Sidebar */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    z-index: 1040;
    display: flex;
    flex-direction: column;
    transition: transform .3s ease;
    overflow-y: auto;
}
.sidebar-header {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: white;
    border-bottom: 1px solid rgba(255,255,255,.1);
    white-space: nowrap;
}
.sidebar-title { flex: 1; }
.sidebar-edit-top-btn {
    border-color: rgba(255,255,255,.35);
    color: #fff;
    padding: .15rem .45rem;
}
.sidebar-edit-top-btn:hover { color: #fff; border-color: rgba(255,255,255,.65); }
#sandboxSidebarLabel {
    font-size: .62rem;
    letter-spacing: .04em;
    white-space: nowrap;
}
#sandboxBanner {
    position: sticky;
    top: 0;
    z-index: 1080;
    background: #dc3545 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    font-weight: 600;
    font-size: 1rem;
    padding: .65rem 1rem;
    text-align: center;
}
#sandboxBannerLogin {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #dc3545;
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    padding: .65rem 1rem;
    text-align: center;
}
.sidebar-menu { flex: 1; padding: .5rem 0; overflow-y: auto; }
.sidebar-footer { padding: .75rem 1.25rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .85rem; }
.user-info { display: flex; align-items: center; color: var(--sidebar-text); }

.nav-section { padding: .5rem 1.25rem .25rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #64748b; font-weight: 600; }
.nav-item {
    display: flex;
    align-items: center;
    padding: .6rem 1.25rem;
    color: var(--sidebar-text);
    cursor: pointer;
    transition: all var(--transition-speed);
    font-size: .9rem;
    border-left: 3px solid transparent;
    border-radius: 0 6px 6px 0;
    margin: 1px 8px 1px 0;
}
.nav-item:hover { background: var(--sidebar-hover); color: white; transform: translateX(2px); }
.nav-item.active { background: rgba(59,130,246,.15); color: #60a5fa; border-left-color: var(--sidebar-active); font-weight: 600; }
.nav-item i { width: 24px; margin-right: .75rem; font-size: 1rem; text-align: center; }
.nav-item .badge { margin-left: auto; font-size: .65rem; }

.sidebar-edit-controls {
    margin: .35rem .75rem .5rem;
    padding: .55rem;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: .5rem;
    background: rgba(15,23,42,.4);
}
.nav-edit-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 .55rem .35rem;
    padding: .35rem .45rem;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: .45rem;
    background: rgba(255,255,255,.03);
}
.nav-edit-section {
    border-style: dashed;
    border-color: rgba(148,163,184,.45);
}
.nav-drag-handle {
    color: #94a3b8;
    cursor: grab;
    font-size: .95rem;
}
.nav-edit-row:active .nav-drag-handle { cursor: grabbing; }
.nav-edit-icon {
    width: 20px;
    text-align: center;
    color: #cbd5e1;
}
.nav-edit-input {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.16);
    color: #e2e8f0;
    font-size: .82rem;
}
.nav-edit-input:focus {
    background: rgba(255,255,255,.12);
    color: #f8fafc;
    border-color: rgba(96,165,250,.65);
    box-shadow: none;
}
.nav-edit-input-section {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
}

/* Main Wrapper */
.main-wrapper {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left .3s ease;
}

/* Dashboard V4 */
.dashboard-v4-shell { display: grid; gap: 1rem; }
.dashboard-v4-header { margin-bottom: 0; }
.dashboard-v4-notifications .card-body { padding: .9rem 1rem; }
.dashboard-v4-notification-row {
    display: flex;
    gap: .65rem;
    overflow-x: auto;
    padding-bottom: .15rem;
}
.dashboard-v4-notification-row::-webkit-scrollbar { height: 6px; }
.dashboard-v4-notification-row::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }

.dashboard-v4-search .card-body { padding: .9rem 1rem; }
.dashboard-v4-search .input-group-text { background: color-mix(in srgb, var(--bg) 88%, white 12%); }

.dashboard-v2-notif-pill {
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    border-radius: 999px;
    min-height: 42px;
    padding: .45rem .85rem;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    white-space: nowrap;
    transition: all var(--transition-speed);
}
.dashboard-v2-notif-pill:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}
.dashboard-v2-notif-pill.is-danger { border-color: var(--danger); }
.dashboard-v2-notif-pill.is-warning { border-color: var(--warning); }
.dashboard-v2-notif-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    color: var(--primary-dark);
}
.dashboard-v2-notif-pill.is-danger .dashboard-v2-notif-icon {
    background: var(--danger-light);
    color: var(--danger);
}
.dashboard-v2-notif-pill.is-warning .dashboard-v2-notif-icon {
    background: var(--warning-light);
    color: var(--warning);
}
.dashboard-v2-notif-empty {
    background: var(--success-light);
    color: var(--success);
    border-radius: 999px;
    padding: .5rem .9rem;
    white-space: nowrap;
}

/* KPI visual overhaul: larger cards, stacked centered value + label, improved icon/badge */
.dashboard-v4-kpi .stat-card,
.dashboard-v4-stat {
    /* increased height to provide more vertical room for numbers and the percent badge */
    min-height: 400px;
    height: 400px !important;
    border-radius: 14px;
    background: var(--bg-card);
    box-shadow: 0 6px 18px rgba(16,24,40,0.04);
    border: 1px solid var(--border);
    position: relative;
}
.dashboard-v4-stat {
    display: grid !important;
    grid-template-columns: 84px 1fr;
    /* allocate more vertical space to the top area (value) */
    grid-template-rows: 1.4fr auto;
    grid-template-areas:
        "icon value"
        "label label";
    gap: 0.5rem 1rem;
    /* increase right padding to reserve room for the percent-change badge */
    padding: 1.15rem 2.5rem 1.15rem 1.25rem;
}
.dashboard-v4-stat .stat-icon {
    grid-area: icon;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    font-size: 1.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--primary-light) 60%, white 40%);
    color: var(--primary-dark);
    box-shadow: 0 6px 12px rgba(59,130,246,0.06);
}

/* Hide icons inside KPI cards when the design requires no icons */
.dashboard-v4-kpi-card .dashboard-v4-stat .stat-icon,
.dashboard-v4-kpi .dashboard-v4-stat .stat-icon {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.dashboard-v4-stat .stat-value {
    grid-area: value;
    /* responsive scaling to avoid letterbox/clipping for long numbers */
    font-size: clamp(2.6rem, 4.5vw, 5.2rem);
    line-height: 1;
    letter-spacing: -0.02em;
    font-weight: 800;
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center; /* center horizontally */
    text-align: center;
    /* keep the metric on a single line to avoid vertical stacking/wrap */
    white-space: nowrap; /* prevents line breaks inside the number */
    overflow: hidden; /* clip any overflow instead of wrapping */
    text-overflow: ellipsis; /* show ellipsis when truncated */
    margin: 0;
    max-width: calc(100% - 1rem);
    word-break: normal;
}

/* Center the numeric value across the full card (span both columns) */
.dashboard-v4-stat .stat-value {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    place-self: center;
}

/* Move the icon to the top-left so it doesn't overlap the centered value */
.dashboard-v4-stat .stat-icon {
    justify-self: start;
    align-self: start;
    margin-top: 6px;
    margin-left: 6px;
}

/* Ensure value and icon are visually centered within the top area */
.dashboard-v4-stat .stat-value {
    justify-self: center;
    align-self: center;
}
.dashboard-v4-stat .stat-icon {
    justify-self: center;
    align-self: center;
}
.dashboard-v4-stat .stat-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px; /* fixed distance from the card bottom */
    margin: 0 auto;
    text-align: center;
    font-size: 1.12rem;
    color: var(--text-muted);
    font-weight: 600;
    pointer-events: none;
}

/* Make specific KPI labels larger for better legibility */
.stat-label--large {
    font-size: calc(1.12rem * 2) !important; /* roughly 2.24rem */
}
@media (max-width: 991.98px) {
    .stat-label--large { font-size: calc(0.95rem * 2) !important; }
}

/* percentage/badge in top-right corner */
.dashboard-v4-stat .stat-change {
    position: absolute;
    /* position the badge closer to the top-right but further from the numeric value */
    top: 18px;
    right: 18px;
    z-index: 6;
    box-shadow: 0 6px 12px rgba(16,24,40,0.06);
}

@media (max-width: 991.98px) {
    .dashboard-v4-stat {
        grid-template-columns: 56px 1fr;
        /* keep extra right padding on medium screens as well */
        padding: .9rem 1.6rem;
        min-height: 280px;
        height: 280px !important;
    }
    .dashboard-v4-stat .stat-icon { width: 48px; height: 48px; }
    .dashboard-v4-stat .stat-value { font-size: 3.2rem; }
    .dashboard-v4-stat .stat-label { font-size: 0.95rem; }
}

/* Place small/meta lines (eg. TX count, month label) into the same grid area
   so KPI cards maintain consistent heights and alignment. */
.dashboard-v4-stat > small {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 34px; /* above the main label */
    display: block;
    margin: 0 auto;
    font-size: .72rem;
    color: var(--text-muted);
    text-align: center;
    pointer-events: none;
}

.dashboard-v4-shell .card {
    border-radius: 14px;
    border-color: var(--border);
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.dashboard-v4-shell .card-header {
    background: transparent;
    border-bottom-color: var(--border);
    font-weight: 600;
}
.dashboard-v4-chart .card-body,
.dashboard-v4-side-card .card-body {
    padding: 1rem;
}
.dashboard-v4-shell .table thead th {
    background: color-mix(in srgb, var(--bg) 88%, white 12%);
    font-size: .78rem;
    color: var(--text-muted);
}

.dashboard-v4-reminders {
    max-height: 430px;
    overflow-y: auto;
    padding: .75rem;
}

/* Ensure consistent vertical spacing for stacked cards in the left column
   (fixes extra bottom gap between "Top Cars This Month" and "Reminders") */
.dashboard-v4-shell .col-xxl-8 > .card {
    margin-bottom: 1rem;
}
.dashboard-v4-shell .col-xxl-8 > .card + .card {
    margin-top: 1rem;
}
.dashboard-v4-reminders .border,
.dashboard-v4-reminders .border-danger-subtle {
    padding: .55rem .65rem !important;
    margin-bottom: .45rem !important;
}
.dashboard-v4-reminders .fw-semibold,
.dashboard-v4-reminders .text-danger {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.2;
}
.dashboard-v4-reminders .small.text-muted {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.dashboard-v4-reminders .btn {
    flex-shrink: 0;
}
.dashboard-v4-shell .card-header {
    font-size: 1rem;
    padding: .85rem 1rem;
}
.dashboard-v4-shell .table td,
.dashboard-v4-shell .table th {
    padding-top: .45rem;
    padding-bottom: .45rem;
}

@media (max-width: 991.98px) {
    .dashboard-v4-notification-row { gap: .5rem; }
    .dashboard-v2-notif-pill { min-height: 38px; padding: .35rem .75rem; font-size: .85rem; }
    .dashboard-v2-notif-icon { width: 20px; height: 20px; }
    .dashboard-v4-reminders { max-height: none; overflow-y: visible; }
    .dashboard-v4-stat {
        grid-template-columns: 40px 1fr;
        /* slightly reduced padding on small screens as well */
        padding: .45rem .95rem;
        min-height: 240px;
        height: 240px !important;
    }
    .dashboard-v4-stat .stat-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        font-size: .95rem;
    }
    .dashboard-v4-stat .stat-value { font-size: 1.28rem; }
    .dashboard-v4-stat .stat-label { font-size: .76rem; }
}

/* Topbar */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--topbar-height);
    padding: 0 1.5rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1020;
}
.topbar-left { display: flex; align-items: center; }
.topbar-right { display: flex; align-items: center; }
.topbar-actions { display: flex; align-items: center; gap: .25rem; }

/* Content Area */
.content-area {
    flex: 1;
    padding: 1.5rem;
    max-width: 100%;
    overflow-x: auto;
    animation: pageSlideIn .25s ease;
}
@keyframes pageSlideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Cards */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--border);
    padding: 1rem 1.25rem;
    font-weight: 600;
}

/* Stat Cards */
.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) * 1.1);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.stat-card::after { content: ''; position: absolute; inset: 0; background: transparent; pointer-events: none; }
.stat-card { box-shadow: none; }
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

/* Inventory unified page */
.inventory-expand-row {
    background: rgba(148, 163, 184, 0.12);
}
.inventory-expand-cell {
    padding: 0 !important;
    border-top: none !important;
}
.inventory-expand-wrap {
    padding: .85rem 1rem;
    background: rgba(148, 163, 184, 0.10);
}
.inventory-stat-card {
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.inventory-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}
[data-theme="dark"] .inventory-expand-row,
[data-theme="dark"] .inventory-expand-wrap {
    background: rgba(51, 65, 85, 0.65) !important;
}
.stat-icon.blue { background: var(--primary-light); color: var(--primary); }
.stat-icon.green { background: var(--success-light); color: var(--success); }
.stat-icon.yellow { background: var(--warning-light); color: var(--warning); }
.stat-icon.red { background: var(--danger-light); color: var(--danger); }
.stat-icon.cyan { background: var(--info-light); color: var(--info); }
.stat-value { font-size: 2rem; font-weight: 700; line-height: 1; }
.stat-label { font-size: .9rem; color: var(--text-muted); margin-top: .15rem; }

/* Notification list tweaks for dashboard */
.list-group .list-group-item { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; }
.list-group .list-group-item i { font-size: 1.1rem; margin-right: .6rem; }
.list-group .list-group-item .badge { font-weight: 600; }

/* Mobile polish: more compact cards, larger tap targets, stacked lists */
@media (max-width: 768px) {
    .page-header { padding-bottom: .5rem; }
    .page-header .d-flex { gap: .5rem; flex-wrap: wrap; }

    .stat-card { padding: .75rem; gap: .6rem; }
    .stat-icon { width: 48px; height: 48px; border-radius: 10px; font-size: 1.15rem; }
    .stat-value { font-size: 1.4rem; }
    .stat-label { font-size: .82rem; }

    /* Make notification items full-width and taller for touch */
    .list-group .list-group-item { flex-direction: column; align-items: flex-start; gap: .4rem; padding: .9rem 1rem; }
    .list-group .list-group-item i { margin-right: .4rem; }

    /* Quick actions: make grid single column on very small screens */
    @media (max-width: 420px) {
        .card .row.g-2 > .col-6 { flex: 0 0 100%; max-width: 100%; }
        .card .row.g-2 .btn { padding-top: .8rem; padding-bottom: .8rem; }
    }

    /* Chart and table containers: ensure responsive heights */
    canvas { max-width: 100% !important; height: auto !important; }
    .card.h-100 { min-height: auto; }
}

/* Status Badges */
.badge-status { font-size: .75rem; padding: .3em .6em; border-radius: 4px; font-weight: 500; text-transform: capitalize; }
.badge-available { background: var(--success-light); color: #15803d; }
.badge-rented { background: var(--primary-light); color: #1d4ed8; }
.badge-rto { background: #1e293b; color: #ffffff; }
.badge-maintenance { background: var(--warning-light); color: #b45309; }
.badge-pending_cleaning, .badge-pending-cleaning { background: #fef9c3; color: #a16207; }
.badge-blocked { background: var(--danger-light); color: #dc2626; }
.badge-pending_registration, .badge-pending-registration { background: #e0e7ff; color: #3730a3; }
.badge-retired, .badge-sold { background: #f1f5f9; color: #475569; }

/* KPI size override: ensure dashboard KPI numeric value stays large
   even when compact/kpi-compact utilities are present. */
.dashboard-v4-kpi .dashboard-v4-stat .stat-value {
    font-size: 4.5rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}
/* Slightly smaller sizes when the compact KPI grid is used (prevents large numbers overflowing) */
.kpi-compact .dashboard-v4-stat .stat-value {
    font-size: clamp(2.2rem, 3.2vw, 3.2rem) !important;
    line-height: 1 !important;
}
/* Stronger override when the KPI area is in compact mode inside the dashboard-v4-kpi
   Use higher specificity to beat earlier !important rules and force smaller sizes. */
.dashboard-v4-kpi .kpi-compact .dashboard-v4-stat .stat-value {
    font-size: clamp(1.6rem, 2.6vw, 2.4rem) !important;
    line-height: 1 !important;
}

/* Fallback very-conservative size for deeply nested/overriding rules */
.dashboard-v4-kpi.kpi-compact .dashboard-v4-stat .stat-value {
    font-size: 2.2rem !important;
}
.badge-unavailable { background: #f1f5f9; color: #94a3b8; }
.badge-reserved { background: var(--primary-light); color: #1d4ed8; }
.badge-reserved_confirmed { background: var(--success-light); color: #15803d; }
.badge-reserved_not_confirmed { background: var(--warning-light); color: #b45309; }
.badge-draft { background: #f1f5f9; color: #64748b; }
.badge-quoted { background: #ede9fe; color: #5b21b6; }
.badge-active { background: #dbeafe; color: #1d4ed8; }
.badge-completed { background: #f1f5f9; color: #475569; }
.badge-cancelled { background: var(--danger-light); color: #dc2626; }
.badge-scheduled { background: var(--info-light); color: #0e7490; }
.badge-in_progress, .badge-in-progress { background: var(--warning-light); color: #b45309; }
.badge-queued { background: var(--info-light); color: #0e7490; }
.badge-sent { background: var(--success-light); color: #15803d; }
.badge-failed { background: var(--danger-light); color: #dc2626; }
.badge-pending { background: var(--warning-light); color: #b45309; }
.badge-vip { background: #fef3c7; color: #92400e; }
.badge-blacklisted { background: #1e293b; color: white; }

/* Badge contrast helper (adapts to light/dark using CSS variables) */
.badge-contrast {
    background: var(--bg-card) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none;
}

[/* Improve badge appearance when placed inside tables (keep neutral/readable)
    Light theme: subtle white background with dark text
    Dark theme: subtle translucent background with light text
*/]
.table .badge { padding: .2rem .45rem; border-radius: 6px; }
/* Do not force neutral backgrounds for status badges — only apply to non-status badges */
.table .badge:not(.badge-status) { background: rgba(255,255,255,0.95); color: #111; border: 1px solid rgba(0,0,0,0.06); }
[data-theme="dark"] .table .badge { background: rgba(255,255,255,0.06) !important; color: var(--text) !important; border: 1px solid var(--border) !important; }

/* Dark-mode table row color adjustments to keep text readable on colored rows */
[data-theme="dark"] .table-success { background-color: rgba(34,197,94,0.06) !important; }
[data-theme="dark"] .table-warning { background-color: rgba(245,158,11,0.06) !important; }
[data-theme="dark"] .table-danger { background-color: rgba(239,68,68,0.06) !important; }
[data-theme="dark"] .table-info { background-color: rgba(6,182,212,0.06) !important; }
[data-theme="dark"] .table-success td, [data-theme="dark"] .table-success th,
[data-theme="dark"] .table-warning td, [data-theme="dark"] .table-warning th,
[data-theme="dark"] .table-danger td, [data-theme="dark"] .table-danger th,
[data-theme="dark"] .table-info td, [data-theme="dark"] .table-info th {
    color: var(--text) !important;
}

/* Ensure status text inside table cells uses the theme text color */
.table tbody tr td .fw-semibold { color: var(--text) !important; }

/* RTO Upcoming Schedule - high-contrast overrides to ensure readability */
.rto-upcoming-schedule .card-header .legend { color: var(--text) !important; }
.rto-upcoming-schedule .table th,
.rto-upcoming-schedule .table td { color: var(--text) !important; }
.rto-upcoming-schedule .table td { background-clip: padding-box; }

/* Slightly stronger row tints but keep text readable */
.rto-upcoming-schedule .table-success { background-color: rgba(34,197,94,0.10) !important; }
.rto-upcoming-schedule .table-warning { background-color: rgba(245,158,11,0.10) !important; }
.rto-upcoming-schedule .table-danger { background-color: rgba(239,68,68,0.10) !important; }
.rto-upcoming-schedule .table-info { background-color: rgba(6,182,212,0.10) !important; }

.rto-upcoming-schedule .table .badge { background: var(--bg-card) !important; color: var(--text) !important; border: 1px solid var(--border) !important; box-shadow: none; }
.rto-upcoming-schedule .table .badge.bg-light { background: var(--bg-card) !important; }
.rto-upcoming-schedule .table .badge.bg-info { background: var(--info-light) !important; }

[data-theme="dark"] .rto-upcoming-schedule .table-success { background-color: rgba(34,197,94,0.08) !important; }
[data-theme="dark"] .rto-upcoming-schedule .table-warning { background-color: rgba(245,158,11,0.06) !important; }
[data-theme="dark"] .rto-upcoming-schedule .table-danger { background-color: rgba(239,68,68,0.06) !important; }
[data-theme="dark"] .rto-upcoming-schedule .table-info { background-color: rgba(6,182,212,0.06) !important; }

[data-theme="dark"] .rto-upcoming-schedule .table .badge { background: rgba(255,255,255,0.06) !important; color: var(--text) !important; border: 1px solid var(--border) !important; }

.rto-upcoming-schedule .table td .fw-semibold { color: var(--text) !important; font-weight: 700; }

/* Strong readability overrides for tinted rows and badges in the Upcoming Schedule */
.rto-upcoming-schedule .table-success td, .rto-upcoming-schedule .table-success th {
    color: #08332a !important; /* dark green for contrast on pale green rows */
}
.rto-upcoming-schedule .table-warning td, .rto-upcoming-schedule .table-warning th {
    color: #6b4a00 !important; /* dark amber for contrast on pale yellow rows */
}
.rto-upcoming-schedule .table-danger td, .rto-upcoming-schedule .table-danger th {
    color: #6b0b0b !important; /* dark red for contrast on pale red rows */
}
.rto-upcoming-schedule .table-info td, .rto-upcoming-schedule .table-info th {
    color: #054f57 !important; /* dark teal for contrast on pale info rows */
}

/* Make badges in the Upcoming Schedule bright with dark text for legibility */
.rto-upcoming-schedule .table .badge {
    background: #ffffff !important;
    color: #08332a !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: none !important;
}
[data-theme="dark"] .rto-upcoming-schedule .table .badge {
    background: rgba(255,255,255,0.92) !important;
    color: #08332a !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
}

/* Ensure normal (non-tinted) rows keep the theme text color */
.rto-upcoming-schedule .table tbody tr:not(.table-success):not(.table-warning):not(.table-danger):not(.table-info) td {
    color: var(--text) !important;
}

/* Aggressive RTO Upcoming Schedule readability overrides
   Force solid, high-contrast backgrounds and dark text for tinted rows
   and ensure all inner elements inherit readable colors. These rules
   target only the RTO schedule to avoid touching other pages. */
.rto-upcoming-schedule .table tbody tr.table-success td,
.rto-upcoming-schedule .table tbody tr.table-success th {
    background-color: #e6f5ee !important;
    color: #08332a !important;
}
.rto-upcoming-schedule .table tbody tr.table-warning td,
.rto-upcoming-schedule .table tbody tr.table-warning th {
    background-color: #fff7e6 !important;
    color: #6b4a00 !important;
}
.rto-upcoming-schedule .table tbody tr.table-danger td,
.rto-upcoming-schedule .table tbody tr.table-danger th {
    background-color: #fff0f0 !important;
    color: #6b0b0b !important;
}
.rto-upcoming-schedule .table tbody tr.table-info td,
.rto-upcoming-schedule .table tbody tr.table-info th {
    background-color: #e6fbff !important;
    color: #054f57 !important;
}

/* Make all cell text and descendants inherit the forced color for readability */
.rto-upcoming-schedule .table td,
.rto-upcoming-schedule .table th { color: #08332a !important; }
.rto-upcoming-schedule .table td *,
.rto-upcoming-schedule .table th * { color: inherit !important; }

/* Bright badges with dark text inside the upcoming schedule */
.rto-upcoming-schedule .table .badge {
    background: #ffffff !important;
    color: #08332a !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: none !important;
}

/* Dark theme equivalents: use slightly translucent tints but keep dark text */
[data-theme="dark"] .rto-upcoming-schedule .table tbody tr.table-success td,
[data-theme="dark"] .rto-upcoming-schedule .table tbody tr.table-success th {
    background-color: transparent !important;
    color: var(--text) !important;
}
[data-theme="dark"] .rto-upcoming-schedule .table tbody tr.table-success td:first-child {
    border-left: 6px solid #10b981 !important;
    padding-left: .5rem !important;
}
[data-theme="dark"] .rto-upcoming-schedule .table tbody tr.table-warning td,
[data-theme="dark"] .rto-upcoming-schedule .table tbody tr.table-warning th {
    background-color: transparent !important;
    color: var(--text) !important;
}
[data-theme="dark"] .rto-upcoming-schedule .table tbody tr.table-warning td:first-child {
    border-left: 6px solid #f59e0b !important;
    padding-left: .5rem !important;
}
[data-theme="dark"] .rto-upcoming-schedule .table tbody tr.table-danger td,
[data-theme="dark"] .rto-upcoming-schedule .table tbody tr.table-danger th {
    background-color: transparent !important;
    color: var(--text) !important;
}
[data-theme="dark"] .rto-upcoming-schedule .table tbody tr.table-danger td:first-child {
    border-left: 6px solid #ef4444 !important;
    padding-left: .5rem !important;
}
[data-theme="dark"] .rto-upcoming-schedule .table tbody tr.table-info td,
[data-theme="dark"] .rto-upcoming-schedule .table tbody tr.table-info th {
    background-color: transparent !important;
    color: var(--text) !important;
}
[data-theme="dark"] .rto-upcoming-schedule .table tbody tr.table-info td:first-child {
    border-left: 6px solid #06b6d4 !important;
    padding-left: .5rem !important;
}
[data-theme="dark"] .rto-upcoming-schedule .table td,
[data-theme="dark"] .rto-upcoming-schedule .table th { color: var(--text) !important; }
[data-theme="dark"] .rto-upcoming-schedule .table td *,
[data-theme="dark"] .rto-upcoming-schedule .table th * { color: inherit !important; }
[data-theme="dark"] .rto-upcoming-schedule .table .badge { background: rgba(255,255,255,0.95) !important; color: #08332a !important; }

/* Tables */
.table { font-size: .875rem; }
.table th { font-weight: 600; color: var(--text-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; border-bottom-width: 2px; white-space: nowrap; }
.table td { vertical-align: middle; }
.table-hover tbody tr { cursor: pointer; transition: background var(--transition-speed); }
.table-hover tbody tr:hover { background: rgba(59,130,246,.06); }
.table-actions { white-space: nowrap; }
.table-actions .btn { padding: .25rem .5rem; font-size: .8rem; transition: all var(--transition-speed); }
.table-actions .btn:hover { transform: scale(1.1); }

/* Final override: force compact KPI sizes — placed at end to beat prior !important rules */
body .dashboard-v4-kpi-card .kpi-compact .dashboard-v4-stat .stat-value {
    font-size: clamp(1.4rem, 2.2vw, 2.2rem) !important;
    line-height: 1 !important;
}


#mainContent img,
#generalModal .modal-body img {
    cursor: zoom-in;
}

/* Forms */
.form-label { font-weight: 500; font-size: .875rem; color: var(--text); margin-bottom: .35rem; }
.form-control, .form-select { border-radius: 8px; border-color: var(--border); font-size: .9rem; transition: all var(--transition-speed); padding: .5rem .75rem; }
.form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
.form-control::placeholder { color: #94a3b8; }
.form-text { font-size: .8rem; }
.required::after { content: ' *'; color: var(--danger); }

/* Buttons - improved transitions */
.btn { transition: all var(--transition-speed); font-weight: 500; border-radius: 8px; }
.btn:active { transform: scale(.97); }
.btn-primary { box-shadow: 0 1px 3px rgba(59,130,246,.3); }
.btn-primary:hover { box-shadow: 0 4px 12px rgba(59,130,246,.35); transform: translateY(-1px); }
.btn-success:hover { box-shadow: 0 4px 12px rgba(34,197,94,.35); }
.btn-danger:hover { box-shadow: 0 4px 12px rgba(239,68,68,.35); }
.btn-lg { padding: .6rem 1.5rem; font-size: 1rem; }

/* Page Header */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: .75rem;
}
.page-title { font-size: 1.5rem; font-weight: 700; margin: 0; }
.page-subtitle { font-size: .9rem; color: var(--text-muted); margin: 0; }
.checkout-page-header .checkout-back-btn { white-space: nowrap; }
.checkout-actions-row { align-items: center; }

/* Filter Bar */
.filter-bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.filter-bar .form-control,
.filter-bar .form-select { max-width: 200px; font-size: .85rem; height: 36px; }

/* Wizard */
.wizard-steps {
    display: flex;
    margin-bottom: 2rem;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

/* Ensure inline confirm dialog stacks above other modals/backdrops */
#confirmModal { z-index: 20000 !important; }
.confirm-backdrop { z-index: 19999 !important; }
/* Print / invoice dividers */
.print-divider { border-top: 2px solid rgba(0,0,0,0.08); margin: 12px 0; }
@media print {
    .print-divider { border-top: 2px solid #000 !important; }
    .wiz-invoice-override { box-shadow: none !important; background: #fff !important; color: #000 !important; }
    .wiz-invoice-override * { color: inherit !important; }
}

/* Absolute EOF: Final responsive KPI override to ensure numbers/labels shrink
   on narrow viewports and to defeat earlier conflicting !important rules. */
body .dashboard-v4-kpi-card .dashboard-v4-stat:not(.stat-net-revenue) .stat-value,
body .dashboard-v4-kpi-card .dashboard-v4-stat.stat-net-revenue .stat-value,
body .dashboard-v4-kpi-card .dashboard-v4-stat .stat-label {
    /* Use clamp tied to viewport but with a conservative max so values reduce
       on narrow devices and don't overflow their cards. High specificity +
       !important ensures this wins over prior rules. */
    font-size: clamp(1.1rem, 3.2vw, 2.4rem) !important;
    font-weight: 700 !important;
    line-height: 1.02 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Make non-Net-Revenue values slightly bolder for emphasis while still responsive */
body .dashboard-v4-kpi-card .dashboard-v4-stat:not(.stat-net-revenue) .stat-value {
    font-weight: 800 !important;
}

/* Slightly reduce labels on small screens specifically */
@media (max-width: 575.98px) {
    body .dashboard-v4-kpi-card .dashboard-v4-stat .stat-label {
        font-size: clamp(0.65rem, 2.4vw, 0.95rem) !important;
    }
}

/* Final override: ensure KPI numeric font-size is applied after all utility rules */
.dashboard-v4-stat .stat-value {
    font-size: 4.5rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

/* Chart container defaults: enforce predictable sizing to avoid Chart.js resize loops */
.chart-container {
    position: relative;
    min-height: 220px;
    height: 220px;
}
.chart-container canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}
.card-body > canvas,
#reportContent > canvas,
.report-card canvas {
    width: 100% !important;
    display: block;
}

/* Smaller charts can opt-out by overriding with a smaller fixed height */
.chart-small { min-height: 120px !important; height: 120px !important; }

/* Photo row for thumbnails (horizontal scroll) */
.photo-row { display:flex; gap:8px; overflow-x:auto; padding:8px 4px; align-items:center; }
.photo-row .thumb { flex: 0 0 auto; }
.photo-row .thumb img { border-radius:6px; box-shadow: var(--shadow); }
.photo-row::-webkit-scrollbar { height:8px; }
.photo-row::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius:4px; }
/* Invoice preview enhancements for wizard step 4 */
.preview-divider { border-top: 1px solid rgba(0,0,0,0.08); margin: 18px 0 12px; }
.preview-heading { font-size: 1.05rem; font-weight: 700; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.preview-container { border: 1px solid var(--border); border-radius: 8px; padding: 10px; background: var(--bg-card); box-shadow: var(--shadow); }

[data-theme="dark"] .preview-divider { border-top-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .preview-container { background: var(--bg-card); border-color: var(--border); }
.wizard-step {
    flex: 1;
    text-align: center;
    position: relative;
    padding-top: 2.5rem;
    font-size: .85rem;
    color: var(--text-muted);
}
.wizard-step::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--border);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: .85rem;
}
.wizard-step.active::before { background: var(--primary); color: white; }
.wizard-step.completed::before { background: var(--success); color: white; content: '✓'; }
.wizard-step.active { color: var(--primary); font-weight: 600; }
.wizard-step.completed { color: var(--success); }
.wizard-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 15px;
    left: calc(50% + 20px);
    width: calc(100% - 40px);
    height: 2px;
    background: var(--border);
}
.wizard-step.completed:not(:last-child)::after { background: var(--success); }

/* Collapsible */
.more-options-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--primary);
    cursor: pointer;
    font-size: .9rem;
    font-weight: 500;
    padding: .5rem 0;
    user-select: none;
}
.more-options-toggle:hover { color: var(--primary-dark); }
.more-options-content { display: none; }
.more-options-content.show { display: block; }

/* Alerts on Dashboard */
.alert-item {
    display: flex;
    align-items: center;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border);
    font-size: .875rem;
    gap: .75rem;
}
.alert-item:last-child { border-bottom: none; }
.alert-item i { font-size: 1rem; }

/* Calendar Overrides */
.fc { font-size: .85rem; }
.fc .fc-toolbar-title { font-size: 1.2rem; }
.fc .fc-button { font-size: .8rem; }
.fc-event { cursor: pointer; border: none; padding: 2px 4px; font-size: .75rem; border-radius: 3px; }

/* Pagination */
.pagination-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    font-size: .85rem;
}
.pagination .page-item .page-link { font-size: .85rem; }

/* Responsive */
@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,.3); }
    .main-wrapper { margin-left: 0; }
    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.5);
        z-index: 1035;
        display: none;
        backdrop-filter: blur(2px);
    }
    .sidebar-overlay.show { display: block; animation: fadeIn .2s ease; }
    .content-area { padding: 1rem; }
    .page-header { flex-direction: column; align-items: flex-start; }
    .page-header .d-flex { width: 100%; flex-wrap: wrap; }
    .topbar-actions .btn span.d-md-inline { display: none; }
}

@media (max-width: 575.98px) {
    .content-area { padding: .75rem; }
    .stat-card { padding: .75rem; }
    .stat-value { font-size: 1.35rem; }
    .page-title { font-size: 1.25rem; }
    .filter-bar { flex-direction: column; }
    .filter-bar .form-control, .filter-bar .form-select { max-width: 100%; }
    .btn { min-height: 44px; }
    .form-control, .form-select, .input-group-text { min-height: 44px; }
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .modal-dialog { margin: .5rem; max-width: calc(100% - 1rem); }
    .modal-content { max-height: calc(100vh - 1rem); overflow: hidden; }
    .modal-body { overflow-y: auto; }

/* Slightly reduce modal font size for denser content (decrease by ~1pt) */
.modal .modal-content,
#generalModal .modal-content {
    font-size: calc(1rem - 1pt);
}


    .page-header .btn { width: 100%; }
    .row.g-3 > [class*="col-"] { width: 100%; }
}

@media (max-width: 767.98px) {
    .table { font-size: .82rem; }
    .btn-sm { min-height: 40px; }
    .input-group > .btn { min-height: 44px; }
}

/* Quick Action Buttons */
.quick-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.quick-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-card);
    cursor: pointer;
    transition: all var(--transition-speed);
    min-width: 100px;
    text-align: center;
    font-size: .8rem;
    color: var(--text);
}
.quick-action-btn:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(59,130,246,.15); }
.quick-action-btn i { font-size: 1.5rem; margin-bottom: .5rem; }

/* Compact dashboard side cards (Rent Status + Quick Actions) */
.small-card .card-header { font-size: .92rem; padding: .45rem .75rem; }
.small-card .card-body { padding: .45rem; }
.small-card .btn { padding-top: .35rem; padding-bottom: .35rem; font-size: .88rem; }
.dashboard-v4-side-card.small-card .card-header i { margin-right: .5rem; }

/* Ensure side-by-side cards match the original Rent Status size */
.side-equal-card { min-height: 220px; display: flex; flex-direction: column; }


.side-equal-card .card-body { flex: 1 1 auto; }
.side-equal-card .btn-sm { font-size: .9rem; padding-top: .4rem; padding-bottom: .4rem; }

@media (max-width: 1199.98px) {
    /* Stack side cards on smaller viewports */
    .col-12.col-xxl-4.d-flex { flex-direction: column; }
    .col-12.col-xxl-4.d-flex .me-2 { margin-right: 0 !important; margin-bottom: .75rem; }
}

/* Custom responsive column widths for dashboard top row (40% / 30% / 30%) */
@media (min-width: 1200px) {
    .col-xxl-40 { flex: 0 0 40%; max-width: 40%; }
    .col-xxl-30 { flex: 0 0 30%; max-width: 30%; }
    .col-xxl-70 { flex: 0 0 70%; max-width: 70%; }
}

@media (max-width: 1199.98px) {
    /* ensure our custom classes fall back to full width on smaller screens */
    .col-xxl-40, .col-xxl-30 { flex: 0 0 100% !important; max-width: 100% !important; }
    .col-xxl-70 { flex: 0 0 100% !important; max-width: 100% !important; }
}

/* Hide scroll-to-top floating button per request (keeps layout width unchanged) */
.scroll-top-btn { display: none !important; }

/* Compact KPI card grid */
.dashboard-v4-kpi-card .card-body { padding: .6rem; }
.kpi-compact .stat-card { padding: .5rem .6rem; min-height: 72px; }
.kpi-compact .stat-icon { width: 46px; height: 46px; font-size: 1.05rem; }
.kpi-compact .stat-value { font-size: 1.15rem; }
.kpi-compact .stat-label { font-size: .78rem; }

.dashboard-v4-kpi-card { margin-bottom: .75rem; }

/* Top layout: use Bootstrap rows/columns for stability (remove custom grid) */
.dashboard-top-grid { display: block; }

@media (max-width: 1199.98px) {
    .dashboard-top-grid { display: block; }
    .dashboard-top-grid-kpis, .dashboard-top-grid-rent, .dashboard-top-grid-quick, .dashboard-top-grid-earnings, .dashboard-top-grid-checklist { width: 100%; }
}

/* Percent change badge for stat cards (global) */
.stat-change {
    position: absolute;
    top: .5rem;
    right: .6rem;
    font-size: .78rem;
    padding: .22rem .45rem;
    border-radius: 999px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    line-height: 1;
}
.stat-card { position: relative; }
.stat-change i.bi { font-size: 1.05rem; vertical-align: text-top; }
.stat-pos { background: #dcfce7; color: #14532d; font-weight: 600; }
.stat-neg { background: #fee2e2; color: #7f1d1d; font-weight: 600; }
.stat-neutral { background: #f1f5f9; color: #475569; font-weight: 600; }


/* Misc */
.text-truncate-2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.cursor-pointer { cursor: pointer; }
.min-h-200 { min-height: 200px; }
.gap-3 { gap: 1rem; }
.no-data { text-align: center; padding: 3rem; color: var(--text-muted); animation: fadeIn .4s ease; }
.no-data i { font-size: 3.5rem; display: block; margin-bottom: 1rem; opacity: .4; }
.no-data h4, .no-data h5 { margin-bottom: .5rem; color: var(--text); }
.no-data p { margin-bottom: 1rem; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.loading-spinner { text-align: center; padding: 3rem; animation: fadeIn .3s ease; }
.loading-spinner .spinner-border { width: 2.5rem; height: 2.5rem; }
.clickable-row { cursor: pointer; transition: background var(--transition-speed); }
.clickable-row:hover { background: rgba(59,130,246,.06) !important; }
.separator { height: 1px; background: var(--border); margin: 1rem 0; }
.detail-label { font-size: .8rem; color: var(--text-muted); font-weight: 500; margin-bottom: .15rem; text-transform: uppercase; letter-spacing: .03em; }
.detail-value { font-size: .95rem; }
.chart-container { position: relative; height: 300px; }

/* Smooth card hover */
.card { transition: box-shadow var(--transition-speed); }
.hover-shadow:hover { box-shadow: var(--shadow-lg) !important; transform: translateY(-2px); transition: all var(--transition-speed); }

/* Toast improvements */
.toast { border-radius: var(--radius); border: none; box-shadow: var(--shadow-lg); animation: toastSlideIn .3s ease; }
@keyframes toastSlideIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }

/* Breadcrumb improvements */
.breadcrumb { font-size: .875rem; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); }

/* Badge improvements */
.badge { font-weight: 500; letter-spacing: .02em; }

/* Alert improvements */
.alert { border-radius: var(--radius); border: none; font-size: .9rem; }
.alert-danger { background: var(--danger-light); color: #b91c1c; }
.alert-warning { background: var(--warning-light); color: #92400e; }
.alert-success { background: var(--success-light); color: #15803d; }
.alert-info { background: var(--info-light); color: #0e7490; }

/* Kbd shortcuts help */
.kbd { display: inline-block; padding: 2px 6px; font-size: .75rem; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; font-family: monospace; color: var(--text-muted); }

/* Scroll-to-top button */
.scroll-top-btn {
    position: fixed; bottom: 2rem; right: 2rem; z-index: 1050;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--primary); color: white; border: none;
    display: none; align-items: center; justify-content: center;
    font-size: 1.2rem; cursor: pointer;
    box-shadow: 0 4px 12px rgba(59,130,246,.4);
    transition: all var(--transition-speed);
}
.scroll-top-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(59,130,246,.5); }
.scroll-top-btn.visible { display: flex; animation: fadeIn .3s ease; }

/* Keyboard shortcuts modal */
.shortcut-list { list-style: none; padding: 0; }
.shortcut-list li { display: flex; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--border); }
.shortcut-list li:last-child { border-bottom: none; }

/* ========== REPORTS ========== */
/* Report cards on home page */
.report-card { transition: all .2s ease; }
.report-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.1) !important; }

/* Date preset buttons */
.date-preset { font-size: .75rem; padding: .25rem .5rem; }
.date-preset.active { background: var(--primary); color: white; border-color: var(--primary); }

/* Chart containers */
canvas { max-width: 100%; }
.revenue-chart-container { height: 320px; min-height: 320px; }
.revenue-method-container { height: 220px; min-height: 220px; }

/* Progress bars in fleet usage */
.progress { background: var(--bg); }

/* ============================================
   HIGH-VISIBILITY KPI CARDS (user-provided)
   Replaces previous KPI visuals with bold, high-contrast design
   ============================================ */

.dashboard-v4-kpi {
    --card-bg: #ffffff;
    --card-border: #e9eef3;
    --card-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.1);
    --icon-bg: linear-gradient(135deg, #f0f4ff, #e0e7ff);
    --icon-color: #3b82f6;
    --value-color: #0f172a;
    --label-color: #475569;
    --pos-bg: #e6f7e6;
    --pos-color: #15803d;
    --neg-bg: #fee2e2;
    --neg-color: #b91c1c;
}

[data-theme="dark"] .dashboard-v4-kpi {
    --card-bg: #1e293b;
    --card-border: #334155;
    --card-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.4);
    --icon-bg: linear-gradient(135deg, #2d3a5e, #1e2a4a);
    --icon-color: #818cf8;
    --value-color: #f1f5f9;
    --label-color: #cbd5e1;
    --pos-bg: #14532d;
    --pos-color: #86efac;
    --neg-bg: #7f1d1d;
    --neg-color: #fca5a5;
}

.dashboard-v4-stat {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 1.5rem;
    box-shadow: var(--card-shadow);
    padding: 1.5rem 1rem;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.dashboard-v4-stat:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 28px -16px rgba(0, 0, 0, 0.15);
}

.stat-icon {
    width: 70px;
    height: 70px;
    background: var(--icon-bg);
    border-radius: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--icon-color);
    margin-bottom: 1rem;
    transition: transform 0.2s;
}

.dashboard-v4-stat:hover .stat-icon {
    transform: scale(1.02);
}

.stat-value {
    font-size: 3.8rem;
    font-weight: 800;
    line-height: 1;
    color: var(--value-color);
    margin: 0.5rem 0 0.25rem;
    letter-spacing: -0.02em;
    word-break: break-word;
}

.stat-label {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--label-color);
    margin-bottom: 0.5rem;
}

.stat-change {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 2rem;
    background: var(--pos-bg);
    color: var(--pos-color);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    backdrop-filter: blur(4px);
}

.stat-pos { background: var(--pos-bg); color: var(--pos-color); }
.stat-neg { background: var(--neg-bg); color: var(--neg-color); }

@media (max-width: 768px) {
    .dashboard-v4-stat { padding: 1rem; }
    .stat-icon { width: 56px; height: 56px; font-size: 2rem; }
    .stat-value { font-size: 2.8rem; }
    .stat-label { font-size: 0.85rem; }
    .stat-change { font-size: 0.7rem; top: 0.75rem; right: 0.75rem; }
}

@media (max-width: 480px) {
    .dashboard-v4-stat { padding: 0.75rem; }
    .stat-value { font-size: 2.2rem; }
    .stat-label { font-size: 0.75rem; }
    .stat-icon { width: 48px; height: 48px; font-size: 1.6rem; }
}


/* =========================
   MODERN KPI CARDS (from user-provided design)
   Inserted: modern glassmorphism, icon gradients, hover, dark-mode support
   ========================= */

/* Base card styling */
.dashboard-v4-stat {
    --stat-card-bg: rgba(255, 255, 255, 0.8);
    --stat-border: rgba(0, 0, 0, 0.05);
    --stat-shadow: 0 8px 20px rgba(0, 0, 0, 0.03), 0 2px 6px rgba(0, 0, 0, 0.05);
    --stat-icon-bg: linear-gradient(135deg, #f0f4ff 0%, #e9edff 100%);
    --stat-icon-color: #4f46e5;
    --stat-value-color: #1e293b;
    --stat-label-color: #64748b;
    --stat-change-pos-bg: #e6f7e6;
    --stat-change-pos-color: #2e7d32;
    --stat-change-neg-bg: #ffe6e6;
    --stat-change-neg-color: #c62828;
}

[data-theme="dark"] .dashboard-v4-stat {
    --stat-card-bg: rgba(30, 41, 59, 0.8);
    --stat-border: rgba(255, 255, 255, 0.05);
    --stat-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    --stat-icon-bg: linear-gradient(135deg, #2d3748 0%, #1e293b 100%);
    --stat-icon-color: #818cf8;
    --stat-value-color: #f1f5f9;
    --stat-label-color: #94a3b8;
    --stat-change-pos-bg: #1b3a1f;
    --stat-change-pos-color: #81c784;
    --stat-change-neg-bg: #4a1a1a;
    --stat-change-neg-color: #ef9a9a;
}

.dashboard-v4-stat {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--stat-card-bg);
    backdrop-filter: blur(8px);
    border-radius: 1.5rem;
    border: 1px solid var(--stat-border);
    box-shadow: var(--stat-shadow);
    padding: 1.25rem 1rem;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.dashboard-v4-stat:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 30px -12px rgba(0, 0, 0, 0.15);
    border-color: rgba(79, 70, 229, 0.3);
}

/* Icon styling */
.stat-icon {
    width: 52px;
    height: 52px;
    background: var(--stat-icon-bg);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: var(--stat-icon-color);
    margin-bottom: 1rem;
    transition: transform 0.2s;
}

.dashboard-v4-stat:hover .stat-icon {
    transform: scale(1.05);
}

/* Value (big number) */
.stat-value {
    font-size: 4rem; /* increased for stronger presence */
    font-weight: 800;
    line-height: 1.05;
    color: var(--stat-value-color);
    margin: 0.25rem 0 0.25rem;
    letter-spacing: -0.02em;
}

/* Label */
.stat-label {
    font-size: 1.05rem; /* slightly larger label */
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.2px;
    color: var(--stat-label-color);
    margin-bottom: 0.6rem;
}

/* Change indicator (badge) */
.stat-change {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 20px;
    background: var(--stat-change-pos-bg);
    color: var(--stat-change-pos-color);
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.stat-pos {
    background: var(--stat-change-pos-bg);
    color: var(--stat-change-pos-color);
}

.stat-neg {
    background: var(--stat-change-neg-bg);
    color: var(--stat-change-neg-color);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .dashboard-v4-stat {
        padding: 1rem;
    }
    .stat-value {
        font-size: 2.8rem;
    }
    .stat-icon {
        width: 44px;
        height: 44px;
        font-size: 1.4rem;
    }
    .stat-label {
        font-size: 0.75rem;
    }
    .stat-change {
        font-size: 0.65rem;
        top: 0.75rem;
        right: 0.75rem;
    }
}

/* Optional compact version */
.kpi-compact .dashboard-v4-stat { min-height: 110px; height: 110px !important; padding: .5rem; }
.kpi-compact .dashboard-v4-stat .stat-value { font-size: clamp(1.1rem, 2.5vw, 2.8rem) !important; }
.kpi-compact .dashboard-v4-stat .stat-value {
    font-size: clamp(1.1rem, 2.5vw, 2.8rem) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
}
.kpi-compact .dashboard-v4-stat .stat-label {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
}
/* Force KPI card heights even when the compact utility is present.
   This override uses higher specificity and appears after the compact
   rules so it reliably wins and restores the taller, glanceable cards. */
.dashboard-v4-kpi-card .row.kpi-compact .dashboard-v4-stat,
.dashboard-v4-kpi .row.kpi-compact .dashboard-v4-stat {
    min-height: 160px !important;
    height: 160px !important;
    padding: 1.15rem 2.5rem !important;
}

/* Responsive auto-shrink for KPI text: allow numbers/labels to scale down
   on narrow viewports while keeping them readable on larger screens. Placed
   at EOF for maximum specificity to win the cascade. */
.dashboard-v4-kpi-card .dashboard-v4-stat .stat-value,
.dashboard-v4-kpi-card .dashboard-v4-stat .stat-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Numeric values: larger on wide screens, shrink on small screens.
   Exclude `.stat-net-revenue` from being enlarged but allow it to shrink. */
.dashboard-v4-kpi-card .dashboard-v4-stat:not(.stat-net-revenue) .stat-value {
    font-size: clamp(1.4rem, 4.5vw, 2.8rem) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
}
.dashboard-v4-kpi-card .dashboard-v4-stat.stat-net-revenue .stat-value {
    /* Keep Net Revenue visually restrained but responsive */
    font-size: clamp(1.1rem, 3.2vw, 1.8rem) !important;
    font-weight: 700 !important;
}

/* Labels scale down smoothly */
.dashboard-v4-kpi-card .dashboard-v4-stat .stat-label {
    font-size: clamp(0.75rem, 1.6vw, 1.25rem) !important;
    font-weight: 600 !important;
}
@media (max-width: 991.98px) {
    .dashboard-v4-kpi-card .row.kpi-compact .dashboard-v4-stat,
    .dashboard-v4-kpi .row.kpi-compact .dashboard-v4-stat {
        min-height: 112px !important;
        height: 112px !important;
        padding: .9rem 1.6rem !important;
    }
}
@media (max-width: 575.98px) {
    .dashboard-v4-kpi-card .row.kpi-compact .dashboard-v4-stat,
    .dashboard-v4-kpi .row.kpi-compact .dashboard-v4-stat {
        min-height: 96px !important;
        height: 96px !important;
    }
}
.dashboard-v4-kpi .dashboard-v4-stat .stat-value,
.dashboard-v4-stat .stat-value {
    /* reduced max size to keep numbers visually balanced */
    font-size: clamp(2.4rem, 3.6vw, 4rem) !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
}

/* Make KPI numeric values larger for compact KPI rows, but exclude Net Revenue */
.dashboard-v4-kpi-card .row.kpi-compact .dashboard-v4-stat .stat-value:not(.stat-net-revenue .stat-value) {
    font-size: clamp(2.8rem, 4.2vw, 4.8rem) !important;
}
/* Specifically ensure Net Revenue keeps the baseline size */
.dashboard-v4-stat.stat-net-revenue .stat-value {
    font-size: clamp(2.4rem, 3.6vw, 4rem) !important;
}
.dashboard-v4-kpi .dashboard-v4-stat .stat-label,
.dashboard-v4-stat .stat-label {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
}
.kpi-compact .dashboard-v4-stat .stat-label { font-size: .78rem !important; }

/* High-specificity override for the few KPI labels we want larger.
   Targets the compact KPI row and the specific modifier class so it
   beats earlier .kpi-compact rules that use higher specificity. */
.dashboard-v4-kpi-card .row.kpi-compact .dashboard-v4-stat .stat-label.stat-label--large,
.dashboard-v4-kpi .row.kpi-compact .dashboard-v4-stat .stat-label.stat-label--large {
    /* reduced by 20% (2.0 * 0.8 = 1.6) */
    font-size: calc(1.12rem * 1.6) !important;
    line-height: 1 !important;
}
@media (max-width: 991.98px) {
    .dashboard-v4-kpi-card .row.kpi-compact .dashboard-v4-stat .stat-label.stat-label--large,
    .dashboard-v4-kpi .row.kpi-compact .dashboard-v4-stat .stat-label.stat-label--large {
        font-size: calc(0.95rem * 1.6) !important;
    }
}

/* Stat cards in reports */
.stat-card-report { border: none; border-radius: var(--radius); transition: transform .15s ease; }
.stat-card-report:hover { transform: translateY(-1px); }

/* Table hover enhancements for reports */
.table-hover tbody tr:hover { background: rgba(59,130,246,.04); }
.table-hover tbody tr { transition: background .15s ease; }

/* Tab content for vehicle dossier */
.tab-content > .tab-pane { animation: fadeIn .2s ease; }

/* ========== PRINT STYLES ========== */
@media print {
    /* Hide non-printable elements */
    .sidebar, .topbar, .page-header > div:last-child, .date-preset,
    .btn, .nav-tabs, #reportFilters, .scroll-top-btn, .toast-container,
    #toastContainer, .breadcrumb-wrapper, .no-print { display: none !important; }

    /* Full width layout */
    body { background: white; }
    .main-wrapper { margin-left: 0 !important; }
    .main-content { margin-left: 0 !important; padding: 0 !important; }
    .content-area { padding: 0 !important; }
    .container-fluid { padding: 0 !important; }

    /* Card simplification */
    .card { border: none !important; box-shadow: none !important; }
    .card-body { padding: .5rem 0 !important; }

    /* Table print optimization */
    .table { font-size: .8rem; }
    .table th { background: #f1f5f9 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    /* Badge print cleanup */
    .badge { border: 1px solid #999; background: white !important; color: #333 !important; -webkit-print-color-adjust: exact; }

    /* Stat cards for print */
    .bg-opacity-10 { background: white !important; border: 1px solid #ddd; }

    /* Chart sizing for print */
    canvas { max-height: 200px !important; }

    /* Page breaks */
    .card { page-break-inside: avoid; }
    h6 { page-break-after: avoid; }
    table { page-break-inside: auto; }
    tr { page-break-inside: avoid; }
}

/* ==================== Admin Inline Edit ==================== */
.admin-edit-btn {
    padding: 0.1rem 0.35rem;
    line-height: 1;
    opacity: 0.5;
    transition: opacity 0.15s;
    vertical-align: middle;
}
.admin-edit-btn:hover {
    opacity: 1;
}
tr:hover .admin-edit-btn,
td:hover .admin-edit-btn,
.card-body:hover > .admin-edit-btn,
.d-flex:hover > .admin-edit-btn {
    opacity: 0.8;
}
.admin-edit-record-form .card-header {
    background: #f8f9fa;
    font-size: 0.85rem;
}
.admin-edit-record-form .form-label {
    color: #6c757d;
    font-size: 0.78rem;
}
.admin-edit-record-form .form-control-sm {
    font-size: 0.85rem;
}
@media print {
    .admin-edit-btn { display: none !important; }
}