/**
 * AgriTrack 2026 - Global Dynamic UI & Responsive Interactivity Engine
 * Delivers premium micro-animations, tactile feedback, fluid responsiveness,
 * live state transitions, and interactive components across the platform.
 */

:root {
    --dyn-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --dyn-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dyn-duration: 0.22s;
    --dyn-green-glow: rgba(22, 163, 74, 0.2);
    --dyn-gold-glow: rgba(244, 180, 26, 0.25);
    --dyn-navy-glow: rgba(10, 25, 49, 0.15);
}

/* ============================================================
   1. Interactive Button Micro-Animations & Tactile States
   ============================================================ */
button,
.btn,
.btn-action,
.btn-action-sec,
.btn-primary,
.btn-with-icon,
.action-icon-btn,
.map-filter-chip,
.role-card,
.portal-card {
    position: relative;
    overflow: hidden;
    transition: transform var(--dyn-duration) var(--dyn-ease),
                box-shadow var(--dyn-duration) var(--dyn-ease),
                background-color 0.18s ease,
                border-color 0.18s ease,
                color 0.18s ease !important;
}

/* Hover elevation */
button:not(:disabled):hover,
.btn:not(:disabled):hover,
.btn-action:not(:disabled):hover,
.btn-primary:not(:disabled):hover {
    transform: translateY(-1.5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Press tactile feedback */
button:not(:disabled):active,
.btn:not(:disabled):active,
.btn-action:not(:disabled):active,
.btn-primary:not(:disabled):active {
    transform: translateY(0.5px) scale(0.985) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

/* Material Ripple Wave Effect */
.dyn-ripple-wave {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: dynRipple 0.55s ease-out;
    background-color: rgba(255, 255, 255, 0.35);
    pointer-events: none;
    z-index: 10;
}

button.btn-action-sec .dyn-ripple-wave,
.action-icon-btn .dyn-ripple-wave {
    background-color: rgba(22, 163, 74, 0.25);
}

@keyframes dynRipple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Loading button spinner state */
.btn-is-submitting {
    pointer-events: none !important;
    opacity: 0.82 !important;
    position: relative;
}

.btn-is-submitting::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: middle;
    animation: dynSpin 0.7s linear infinite;
}

@keyframes dynSpin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   2. Dynamic Cards, Metric Tiles & Interactive Elevation
   ============================================================ */
.stat-card,
.kpi-banner-card,
.w-stat-card,
.card,
.w-card,
.mgmt-card,
.survey-score-card,
.rpt-kpi-pill,
.rpt-chart-box,
.rpt-table-box {
    transition: transform var(--dyn-duration) var(--dyn-ease),
                box-shadow var(--dyn-duration) var(--dyn-ease),
                border-color 0.2s ease;
}

.stat-card:hover,
.kpi-banner-card:hover,
.w-stat-card:hover {
    transform: translateY(-2.5px);
    box-shadow: 0 10px 25px -4px rgba(10, 25, 49, 0.08), 0 4px 10px -2px rgba(10, 25, 49, 0.04);
}

.survey-score-card:hover {
    transform: translateY(-2px);
    border-color: #F4B41A;
    box-shadow: 0 6px 16px rgba(244, 180, 26, 0.12);
}

/* ============================================================
   Unified Dashboard-Standard KPI Banner Cards System
   ============================================================ */
.kpi-banner-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px 18px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kpi-banner-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.kpi-banner-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #FACC15 0%, #0B132B 100%) !important;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    z-index: 2;
}
.kpi-banner-card.has-alert {
    border-left: 3.5px solid #dc2626;
}

.kpi-banner-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    flex: 1;
}
.kpi-banner-label {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #000000 !important;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.kpi-banner-val,
.kpi-val,
.w-stat-value,
.m-stat-value,
.maint-kpi-val,
.flt-kpi-val,
.it-stat-val,
.it-metric-value,
.it-user-stat-val,
.tractor-stat-card strong,
.rpt-card-val,
.rpt-kpi-pill .number {
    color: #000000 !important;
}

.kpi-banner-val {
    font-size: 26px;
    font-weight: 800;
    color: #000000 !important;
    line-height: 1.1;
    display: flex;
    align-items: baseline;
    gap: 3px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.kpi-banner-unit {
    font-size: 11px;
    font-weight: 700;
    color: #000000 !important;
}
.kpi-banner-sub {
    font-size: 11px;
    font-weight: 600;
    color: #000000;
    margin-top: 3px;
    white-space: nowrap;
    line-height: 1.2;
    min-height: 14px;
}

.kpi-banner-icon-box {
    width: 44px;
    height: 44px;
    background: #0B132B !important; /* USTP Deep Navy Blue */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(11, 19, 43, 0.22);
}
.kpi-banner-icon-box svg,
.kpi-banner-icon-box i {
    color: #FACC15 !important; /* Solid Yellow */
    stroke: #FACC15 !important;
}

/* ── Clickable KPI & Stat Cards Standard Styling ────────────── */
a.kpi-banner-card,
a.it-metric-card,
a.it-user-stat-card,
a.it-stat-card,
a.w-stat-card,
a.tractor-stat-card,
a.flt-kpi-card,
a.kpi-card,
a.summary-card,
a.rpt-card,
a.metric-card,
a.mgmt-stat-compact-card {
    text-decoration: none !important;
    color: inherit !important;
    cursor: pointer !important;
    user-select: none;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.18s ease !important;
}

a.kpi-banner-card:hover,
a.it-metric-card:hover,
a.it-user-stat-card:hover,
a.it-stat-card:hover,
a.w-stat-card:hover,
a.tractor-stat-card:hover,
a.flt-kpi-card:hover,
a.kpi-card:hover,
a.summary-card:hover,
a.rpt-card:hover,
a.metric-card:hover,
a.mgmt-stat-compact-card:hover {
    text-decoration: none !important;
    transform: translateY(-2.5px) !important;
    box-shadow: 0 10px 24px -3px rgba(10, 25, 49, 0.12), 0 4px 10px -2px rgba(10, 25, 49, 0.05) !important;
    border-color: #cbd5e1 !important;
}

a.kpi-banner-card:active,
a.it-metric-card:active,
a.it-user-stat-card:active,
a.it-stat-card:active,
a.w-stat-card:active,
a.tractor-stat-card:active,
a.flt-kpi-card:active,
a.kpi-card:active,
a.summary-card:active,
a.rpt-card:active,
a.metric-card:active,
a.mgmt-stat-compact-card:active {
    transform: translateY(0) scale(0.99) !important;
}

a.kpi-banner-card:hover .kpi-banner-icon-box,
a.it-metric-card:hover .kpi-banner-icon-box,
a.it-user-stat-card:hover .kpi-banner-icon-box,
a.it-stat-card:hover .kpi-banner-icon-box,
a.w-stat-card:hover .w-stat-icon,
a.tractor-stat-card:hover .tractor-stat-icon,
a.flt-kpi-card:hover .flt-kpi-icon,
a.summary-card:hover .summary-icon-box,
a.rpt-card:hover .kpi-banner-icon-box,
a.metric-card:hover .metric-icon,
a.mgmt-stat-compact-card:hover .mgmt-stat-compact-icon {
    transform: scale(1.06);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

a.kpi-banner-card:focus-visible,
a.it-metric-card:focus-visible,
a.it-user-stat-card:focus-visible,
a.it-stat-card:focus-visible,
a.w-stat-card:focus-visible,
a.tractor-stat-card:focus-visible,
a.flt-kpi-card:focus-visible,
a.kpi-card:focus-visible,
a.summary-card:focus-visible,
a.rpt-card:focus-visible,
a.metric-card:focus-visible,
a.mgmt-stat-compact-card:focus-visible {
    outline: 2px solid #F4B41A !important;
    outline-offset: 2px !important;
}

/* Active filter highlight state for in-page KPI cards */
a.kpi-banner-card.is-active,
a.tractor-stat-card.is-active,
a.summary-card.is-active,
a.mgmt-stat-compact-card.is-active {
    border-color: #F4B41A !important;
    background: #fffdf5 !important;
    box-shadow: 0 0 0 1.5px #F4B41A, 0 4px 14px rgba(244, 180, 26, 0.15) !important;
}

/* IT Management & Toolbar KPI Cards: Clean standard neutral border matching dashboard command center */
a.it-user-stat-card.is-active,
a.it-metric-card.is-active,
a.it-stat-card.is-active,
.it-user-stat-card.is-active,
.it-metric-card.is-active,
.it-stat-card.is-active {
    border-color: #cbd5e1 !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(10, 25, 49, 0.05) !important;
}

/* ============================================================
   Unified Dashboard-Standard Command Header Card System
   ============================================================ */
.command-header-card {
    background: linear-gradient(135deg, #fffef5 0%, #fbfdf9 40%, #ffffff 100%);
    border: 1px solid #e7f0e0;
    border-radius: 18px;
    padding: 22px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 22px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.025);
    position: relative;
    box-sizing: border-box;
    width: 100%;
}
@media (max-width: 768px) {
    .command-header-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px 20px;
        gap: 16px;
    }
}
.command-header-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    flex: 1;
}
.command-header-kicker {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #2e7d32;
    margin-bottom: 6px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
}
.command-header-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.command-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #16a34a;
    flex-shrink: 0;
}
.command-header-icon svg,
.command-header-icon i {
    width: 24px;
    height: 24px;
    stroke: #16a34a;
    color: #16a34a;
    stroke-width: 2.2;
}
.command-header-title {
    font-size: 24px;
    font-weight: 900;
    color: #0A1931;
    margin: 0;
    letter-spacing: -0.02em;
    font-family: 'Plus Jakarta Sans', sans-serif;
    line-height: 1.2;
}
.command-header-sub {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    line-height: 1.45;
    font-family: 'Plus Jakarta Sans', sans-serif;
    max-width: 820px;
}
.command-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.command-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 9999px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(22, 163, 74, 0.08);
}
.command-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
    animation: livePulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}



/* ============================================================
   3. Interactive Form Inputs with Dynamic Glow Rings
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
select,
textarea {
    transition: border-color 0.2s ease,
                box-shadow 0.2s ease,
                background-color 0.2s ease,
                transform 0.15s ease !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
    border-color: #16a34a !important;
    box-shadow: 0 0 0 3.5px var(--dyn-green-glow) !important;
    outline: none !important;
}

/* Shake animation for input errors */
@keyframes dynShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

.dyn-input-error {
    animation: dynShake 0.4s ease-in-out;
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2) !important;
}

/* ============================================================
   4. Interactive Tables & Instant Live Row Highlighting
   ============================================================ */
table tbody tr {
    transition: background-color 0.15s ease, transform 0.15s ease;
}

table tbody tr:hover {
    background-color: rgba(240, 253, 244, 0.65) !important;
}

/* Scrollable table containers with smooth scroll & scrollbar */
.table-responsive,
.mgmt-table-wrap,
.w-table-wrap,
.tbl-scroll-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    position: relative;
}

.table-responsive::-webkit-scrollbar,
.mgmt-table-wrap::-webkit-scrollbar,
.w-table-wrap::-webkit-scrollbar {
    height: 6px;
}

.table-responsive::-webkit-scrollbar-thumb,
.mgmt-table-wrap::-webkit-scrollbar-thumb,
.w-table-wrap::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 9999px;
}

.table-responsive::-webkit-scrollbar-track,
.mgmt-table-wrap::-webkit-scrollbar-track,
.w-table-wrap::-webkit-scrollbar-track {
    background: transparent;
}

/* Empty search filter notification */
.dyn-empty-search-row td {
    text-align: center;
    padding: 32px 16px !important;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    background: #f8fafc;
}

/* ============================================================
   5. Dynamic Modals, Backdrops & Dialog Transitions
   ============================================================ */
.modal-backdrop,
.mgmt-modal,
.faculty-modal-overlay,
.dialog-overlay,
.geofence-modal-backdrop,
.driver-modal-backdrop {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* Modal Backdrops & Dialog Elevation: Always Layer in Front of Sticky Topbars (950) & Sidebars (1000) */
.geofence-modal-backdrop,
.driver-modal-backdrop,
.modal-backdrop,
.mgmt-modal,
.faculty-modal-overlay {
    z-index: 99995 !important;
}

.geofence-modal,
.driver-modal,
.modal-dialog,
.mgmt-modal-card,
.faculty-modal-card {
    position: relative;
    z-index: 99996 !important;
}

.geofence-modal-backdrop.open,
.driver-modal-backdrop.open,
.modal-backdrop.open {
    display: flex !important;
}

.geofence-modal-header {
    flex-shrink: 0 !important;
    background: #ffffff !important;
}

.mgmt-modal-dialog,
.modal-dialog,
.faculty-modal-card {
    transform: translateY(14px) scale(0.97);
    transition: transform 0.25s var(--dyn-ease-bounce), opacity 0.25s ease;
}

.mgmt-modal.is-open .mgmt-modal-dialog,
.modal.show .modal-dialog,
.faculty-modal-overlay.is-active .faculty-modal-card {
    transform: translateY(0) scale(1) !important;
}

/* ============================================================
   6. Live Status Radar Pulse & Real-Time Indicators
   ============================================================ */
.dyn-pulse-radar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dyn-pulse-radar::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: inherit;
    animation: dynRadarWave 2s cubic-bezier(0.2, 0.8, 0.4, 1) infinite;
    z-index: 1;
}

@keyframes dynRadarWave {
    0% {
        transform: scale(1);
        opacity: 0.85;
    }
    70% {
        transform: scale(2.6);
        opacity: 0;
    }
    100% {
        transform: scale(2.6);
        opacity: 0;
    }
}

/* ============================================================
   7. Alert Banners with Interactive Close & Slide-in
   ============================================================ */
.alert,
.w-card[style*="border-left:4px"],
.card[style*="border-left:4px"] {
    animation: dynSlideDown 0.35s var(--dyn-ease);
    position: relative;
}

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

/* Alert & Notification Cards relative positioning & dismiss padding */
.content-inner > .card[style*="border-left"],
.w-content > .w-card[style*="border-left"],
.dyn-alert-card,
.dyn-dismissible-alert,
.alert-dismissible {
    position: relative !important;
    padding-right: 48px !important;
    box-sizing: border-box !important;
}

.dyn-alert-close-btn {
    position: absolute !important;
    right: 12px !important;
    top: 12px !important;
    transform: none !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    color: inherit !important;
    opacity: 0.65 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 50 !important;
    pointer-events: auto !important;
    transition: opacity 0.15s ease, background 0.15s ease, transform 0.15s ease !important;
    padding: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    line-height: 1 !important;
    margin: 0 !important;
}

.dyn-alert-close-btn:hover {
    opacity: 1 !important;
    background: rgba(0, 0, 0, 0.08) !important;
    transform: scale(1.1) !important;
    box-shadow: none !important;
}

.dyn-alert-close-btn:active {
    transform: scale(0.92) !important;
    background: rgba(0, 0, 0, 0.15) !important;
}

.dyn-alert-close-btn svg,
.dyn-alert-close-btn * {
    pointer-events: none !important;
}

/* Modal X Close Buttons Standard */
.it-btn-close,
.mgmt-modal-close,
.modal-close,
.cal-modal-close,
.rpt-modal-close,
.rpt-studio-close-btn,
.geofence-modal-close,
.faculty-modal-close {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 60 !important;
    transition: transform 0.15s ease, color 0.15s ease, background 0.15s ease !important;
    box-shadow: none !important;
}

.it-btn-close:hover,
.mgmt-modal-close:hover,
.modal-close:hover,
.cal-modal-close:hover,
.rpt-modal-close:hover,
.rpt-studio-close-btn:hover,
.geofence-modal-close:hover,
.faculty-modal-close:hover {
    transform: scale(1.12) !important;
    box-shadow: none !important;
}

.it-btn-close:active,
.mgmt-modal-close:active,
.modal-close:active,
.cal-modal-close:active,
.rpt-modal-close:active,
.rpt-studio-close-btn:active,
.geofence-modal-close:active,
.faculty-modal-close:active {
    transform: scale(0.95) !important;
}

.it-btn-close svg,
.mgmt-modal-close svg,
.modal-close svg,
.cal-modal-close svg,
.rpt-modal-close svg,
.rpt-studio-close-btn svg,
.geofence-modal-close svg,
.faculty-modal-close svg {
    pointer-events: none !important;
}

/* ============================================================
   8. Floating Quick-Action "Scroll to Top"
   ============================================================ */
.dyn-back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #0A1931 !important;
    color: #F4B41A !important;
    border: 1.5px solid rgba(244, 180, 26, 0.6) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(10, 25, 49, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all 0.25s var(--dyn-ease);
    z-index: 999;
}

.dyn-back-to-top.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.dyn-back-to-top svg,
.dyn-back-to-top polyline {
    color: #F4B41A !important;
    stroke: #F4B41A !important;
    fill: none !important;
    stroke-width: 2.75 !important;
    display: block !important;
}

.dyn-back-to-top:hover {
    background: #14284d !important;
    border-color: #F4B41A !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(10, 25, 49, 0.45), 0 0 14px rgba(244, 180, 26, 0.35) !important;
}

.dyn-back-to-top:hover svg {
    stroke: #F4B41A !important;
    transform: translateY(-2px);
}

/* ============================================================
   Unified Dark Navy Blue + Gold/Yellow Border Button Architecture
   Requirements:
   - Background: Dark navy blue (#0A1931)
   - Border: Gold / Yellow (#F4B41A)
   - Text: White (#ffffff)
   ============================================================ */
.btn-navy-gold,
.w-btn-navy-gold,
a.btn-navy-gold,
button.btn-navy-gold {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 18px !important;
    background: #0A1931 !important;
    border: 1.5px solid #F4B41A !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    box-shadow: 0 3px 8px rgba(10, 25, 49, 0.25) !important;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.btn-navy-gold:hover,
.w-btn-navy-gold:hover,
a.btn-navy-gold:hover,
button.btn-navy-gold:hover {
    background: #142746 !important;
    border-color: #ffd056 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 14px rgba(10, 25, 49, 0.35) !important;
}

.btn-navy-gold:active,
.w-btn-navy-gold:active,
a.btn-navy-gold:active,
button.btn-navy-gold:active {
    transform: scale(0.98) !important;
}

.btn-navy-gold svg,
.btn-navy-gold i,
.w-btn-navy-gold svg,
.w-btn-navy-gold i {
    color: #ffffff !important;
    stroke: #ffffff !important;
    flex-shrink: 0 !important;
}

/* Table action compact pill variation */
.btn-navy-gold-sm,
button.btn-navy-gold-sm,
a.btn-navy-gold-sm {
    padding: 6px 12px !important;
    font-size: 11.5px !important;
    border-radius: 7px !important;
    gap: 5px !important;
    box-shadow: 0 1px 3px rgba(10, 25, 49, 0.2) !important;
}

/* ============================================================
   9. Mobile Fluidity & Dynamic Breakpoints
   ============================================================ */
@media (max-width: 992px) {
    /* Mobile drawer backdrop */
    .dyn-mobile-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(10, 25, 49, 0.5);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        opacity: 0;
        visibility: hidden;
        transition: all 0.25s ease;
        z-index: 998;
    }

    body.mobile-nav-active .dyn-mobile-backdrop {
        opacity: 1;
        visibility: visible;
    }

    body.mobile-nav-active {
        overflow: hidden !important;
    }

    /* Mobile drawer smooth slide */
    .sidebar,
    #sidebar,
    #w-sidebar {
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        z-index: 1000 !important;
    }
}

@media (max-width: 640px) {
    /* Fluid responsive cards */
    .command-header-card {
        padding: 16px 18px !important;
    }

    .kpi-banner-card {
        padding: 14px 14px 12px !important;
    }

    .kpi-banner-val {
        font-size: 22px !important;
    }

    .kpi-banner-icon-box {
        width: 38px !important;
        height: 38px !important;
    }

    .kpi-banner-icon-box svg {
        width: 18px !important;
        height: 18px !important;
    }
}

/* ============================================================
   10. UNIVERSAL DYNAMIC LAYOUT & ZOOM-RESILIENCE ENGINE
   Eliminates all fixed-pixel lockups, enforces fluid scaling,
   guarantees zero clipping/overflow across 50% - 200% zoom levels,
   and standardizes container constraints, padding, and alignments.
   ============================================================ */

/* ── 10.1 Root Resiliency & Universal Box-Sizing ────────────── */
html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: clip !important;
    scroll-padding-top: calc(var(--topbar-h, 76px) + 16px);
    width: 100%;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    overflow-x: clip !important;
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    line-height: 1.5;
}

/* ── 10.2 Universal Fluid Typography & Zero Text-Clipping ───── */
h1, h2, h3, h4, h5, h6, p, span, a, label, td, th, div {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Eliminate grid and flex child blowout where default min-width: auto overflows */
.layout, .w-layout,
.content, .w-content, .main-content,
.content-inner, .w-content-inner,
.card, .w-card, .it-profile-card, .stat-card,
.kpi-banner-card, .command-header-card,
.form-group, .it-form-group,
.grid, [class*="grid-"], .flex-col {
    min-width: 0;
}

/* ── 10.3 Dynamic Layout Runway & Centered Constraints ──────── */
.layout, .w-layout {
    width: calc(100% - var(--sidebar-w, 75px)) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 100vh !important;
    margin-left: var(--sidebar-w, 75px) !important;
    display: flex !important;
    flex-direction: column !important;
    transition: margin-left 0.25s ease, width 0.25s ease;
    box-sizing: border-box !important;
}

body.admin-sidebar-ui .layout,
body.admin-sidebar-ui .w-layout {
    width: calc(100% - var(--sidebar-open-w, 260px)) !important;
    margin-left: var(--sidebar-open-w, 260px) !important;
}

body.admin-sidebar-ui .sidebar.collapsed ~ .layout,
body.admin-sidebar-ui .sidebar.collapsed ~ .w-layout,
body.admin-sidebar-ui .w-sidebar.collapsed ~ .w-layout,
body.admin-sidebar-ui .layout.expanded,
body.admin-sidebar-ui .w-layout.expanded {
    width: calc(100% - var(--sidebar-closed-w, 75px)) !important;
    margin-left: var(--sidebar-closed-w, 75px) !important;
}

body.admin-sidebar-ui .content,
body.admin-sidebar-ui .w-content,
body.admin-sidebar-ui .main-content,
body.admin-dashboard .content,
body.admin-dashboard .w-content,
body.admin-dashboard .main-content {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 6px 10px 10px 10px !important;
    box-sizing: border-box !important;
}

body.admin-sidebar-ui .content-inner,
body.admin-sidebar-ui .w-content-inner,
body.admin-sidebar-ui .main-container,
body.admin-dashboard .content-inner,
body.admin-dashboard .w-content-inner,
body.admin-dashboard .main-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.content, .w-content, .main-content {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 6px 10px 10px 10px !important;
    box-sizing: border-box !important;
}

.content-inner, .w-content-inner, .main-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* ── Unified Clean Green Active Sidebar Styling ── */
body.admin-sidebar-ui .sidebar .nav-item.active,
body.admin-sidebar-ui .nav-item.active,
body.admin-sidebar-ui .w-nav-item.active,
body.admin-dashboard .sidebar .nav-item.active,
body.admin-dashboard .nav-item.active,
.sidebar .nav-item.active {
    background: rgba(59, 109, 17, 0.35) !important;
    color: #ffffff !important;
    border-left: 3px solid var(--green-fresh) !important;
    box-shadow: none !important;
}

body.admin-sidebar-ui .sidebar .nav-item.active::before,
body.admin-sidebar-ui .nav-item.active::before,
body.admin-sidebar-ui .w-nav-item.active::before,
body.admin-dashboard .sidebar .nav-item.active::before,
body.admin-dashboard .nav-item.active::before,
.sidebar .nav-item.active::before {
    content: none !important;
    display: none !important;
}

body.admin-sidebar-ui .sidebar .nav-item.active .nav-icon,
body.admin-sidebar-ui .nav-item.active .nav-icon,
body.admin-sidebar-ui .w-nav-item.active .w-nav-icon,
body.admin-dashboard .sidebar .nav-item.active .nav-icon,
body.admin-dashboard .nav-item.active .nav-icon,
.sidebar .nav-item.active .nav-icon {
    color: #7dcc5a !important;
}

/* ── 10.4 Universal Faculty-Standard Topbar Design System ─────── */
:root {
    --topbar-h: 54px;
}

body.admin-sidebar-ui {
    --topbar-h: 54px;
}

.topbar, .w-topbar,
body.admin-sidebar-ui .topbar,
body.admin-sidebar-ui .w-topbar,
body.admin-dashboard .topbar,
body.faculty-dashboard .w-topbar,
body.auxiliary-dashboard .w-topbar,
body.auxiliary-dashboard .topbar,
body.command-center-page .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 950 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 10px rgba(10, 25, 49, 0.05) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    box-sizing: border-box !important;
}

.topbar-left, .w-topbar-left,
body.admin-dashboard .topbar-left,
body.faculty-dashboard .w-topbar-left,
body.auxiliary-dashboard .w-topbar-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.collapse-btn, .w-collapse-btn,
body.admin-dashboard .collapse-btn,
body.faculty-dashboard .w-collapse-btn,
body.auxiliary-dashboard .w-collapse-btn,
body.admin-sidebar-ui .collapse-btn,
body.admin-sidebar-ui .w-collapse-btn {
    order: 1 !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    border-radius: 8px !important;
    background: #0A1931 !important;
    color: #ffffff !important;
    border: none !important;
    border-bottom: 2px solid #F4B41A !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    transition: background 0.15s ease !important;
}

.collapse-btn:hover, .w-collapse-btn:hover,
body.admin-dashboard .collapse-btn:hover,
body.faculty-dashboard .w-collapse-btn:hover,
body.auxiliary-dashboard .w-collapse-btn:hover {
    background: #172a48 !important;
}

.collapse-btn svg, .w-collapse-btn svg {
    width: 17px !important;
    height: 17px !important;
    stroke: #ffffff !important;
    display: block !important;
}

.topbar-command-brand,
.faculty-topbar-brand,
.admin-topbar-brand,
.auxiliary-topbar-brand,
.it-topbar-brand,
.rpt-topbar-brand,
.mgmt-topbar-brand,
.booking-topbar-brand {
    order: 2 !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    margin-left: 10px !important;
    padding-left: 10px !important;
    border-left: 1.5px solid #e2e8f0 !important;
    min-width: 0 !important;
}

.topbar-title-wrap {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
}

.topbar-title-kicker {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: #16a34a !important;
    line-height: 1 !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
}

.topbar-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
}

.topbar-title-icon {
    width: 15px !important;
    height: 15px !important;
    color: #16a34a !important;
    stroke: #16a34a !important;
    flex-shrink: 0 !important;
    display: block !important;
}

.topbar-page-heading {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    color: #0A1931 !important;
    margin: 0 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.015em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.faculty-header-badge,
.admin-header-badge,
.auxiliary-header-badge,
.it-header-badge,
.feedback-header-badge,
.booking-header-badge,
.command-live-pill,
.rpt-header-badge,
.mgmt-header-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    color: #166534 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2.5px 8px !important;
    border-radius: 9999px !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 2px rgba(22, 163, 74, 0.06) !important;
    line-height: 1.2 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    flex-shrink: 0 !important;
}

.faculty-badge-dot,
.admin-badge-dot,
.auxiliary-badge-dot,
.it-badge-dot,
.feedback-badge-dot,
.booking-badge-dot,
.command-live-dot,
.rpt-badge-dot,
.mgmt-badge-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #22c55e !important;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25) !important;
    animation: facultyPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
    flex-shrink: 0 !important;
}

@keyframes facultyPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.2); }
}

.topbar-right, .w-topbar-right,
body.admin-dashboard .topbar-right,
body.faculty-dashboard .w-topbar-right,
body.auxiliary-dashboard .w-topbar-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
    flex-wrap: nowrap !important;
}

.topbar-bell, .w-bell, .m-icon-btn,
body.admin-dashboard .topbar-bell,
body.faculty-dashboard .w-bell,
body.auxiliary-dashboard .w-bell {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    border-radius: 8px !important;
    background: #fff7e0 !important;
    border: 1px solid rgba(244, 180, 26, 0.45) !important;
    color: #0A1931 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
}

.topbar-bell:hover, .w-bell:hover,
body.admin-dashboard .topbar-bell:hover,
body.faculty-dashboard .w-bell:hover,
body.auxiliary-dashboard .w-bell:hover {
    background: #fef3c7 !important;
    border-color: rgba(244, 180, 26, 0.7) !important;
}

.topbar-bell svg, .w-bell svg, .m-icon-btn svg {
    width: 16px !important;
    height: 16px !important;
    color: #0A1931 !important;
    stroke: #0A1931 !important;
    display: block !important;
}

.topbar-bell .dot, .w-bell .dot, .topbar-bell .badge, .m-notif-dot,
body.admin-dashboard .topbar-bell .dot,
body.admin-dashboard .topbar-bell .badge {
    display: none !important;
}

.topbar-profile-link, .w-profile-link,
body.admin-dashboard .topbar-profile-link,
body.faculty-dashboard .w-profile-link,
body.auxiliary-dashboard .w-profile-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.topbar-greeting, .w-greeting,
body.admin-dashboard .topbar-greeting,
body.faculty-dashboard .w-greeting,
body.auxiliary-dashboard .w-greeting {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.topbar-greeting strong, .w-greeting strong {
    color: #0A1931 !important;
    font-weight: 700 !important;
}

.topbar-avatar, .w-avatar, .m-avatar,
body.admin-dashboard .topbar-avatar,
body.faculty-dashboard .w-avatar,
body.auxiliary-dashboard .w-avatar {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    background: #2E7D32 !important;
    border: 1px solid rgba(46, 125, 50, 0.25) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

.btn-logout, .w-btn-logout,
body.admin-dashboard .btn-logout,
body.faculty-dashboard .w-btn-logout,
body.auxiliary-dashboard .w-btn-logout {
    min-height: 32px !important;
    height: 32px !important;
    gap: 5px !important;
    padding: 0 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #0A1931 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
}

.btn-logout svg, .w-btn-logout svg {
    width: 13px !important;
    height: 13px !important;
    stroke: #0A1931 !important;
    display: block !important;
}

.btn-logout:hover, .w-btn-logout:hover,
body.admin-dashboard .btn-logout:hover,
body.faculty-dashboard .w-btn-logout:hover,
body.auxiliary-dashboard .w-btn-logout:hover {
    border-color: rgba(244, 180, 26, 0.7) !important;
    background: #fffaf0 !important;
    color: #0A1931 !important;
}

@media (max-width: 850px) {
    .topbar-title-kicker { display: none !important; }
    .faculty-header-badge,
    .admin-header-badge,
    .auxiliary-header-badge,
    .it-header-badge,
    .feedback-header-badge,
    .booking-header-badge,
    .command-live-pill,
    .rpt-header-badge,
    .mgmt-header-badge { display: none !important; }
}

@media (max-width: 640px) {
    .topbar-greeting, .w-greeting { display: none !important; }
}

/* ── 10.5 Cards, Panels & Sections (Zero Fixed Pixel Locks) ─── */
.card:not(.rpt-card):not(.rpt-filter-card):not(.rpt-export-card):not(.mgmt-card):not(.metrics-card):not(#accounts):not(#devices):not(#audits):not(.it-table-card), 
.w-card, .it-profile-card, .stat-card,
.command-header-card, 
.kpi-banner-card:not(.command-kpi-grid .kpi-banner-card):not(.flt-kpi-row .kpi-banner-card):not(.rpt-card):not(.rpt-filter-card):not(.rpt-export-card) {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important; /* Eliminates fixed pixel height traps */
    min-width: 0 !important;
    box-sizing: border-box !important;
    border-radius: clamp(12px, 1.4vw, 18px) !important;
    padding: clamp(16px, 1.8vw, 24px) !important;
    margin-bottom: clamp(16px, 1.8vw, 24px) !important;
    background: #ffffff !important;
    border: 1px solid var(--green-border, #e2e8f0) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

.card:hover, .w-card:hover, .it-profile-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07) !important;
}

/* Standardized Card Headers */
.card-header, .w-card-header, .it-profile-card-header {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 0 0 clamp(10px, 1.2vw, 16px) 0 !important;
    margin-bottom: clamp(14px, 1.5vw, 20px) !important;
    border-bottom: 1px solid var(--green-border, #f1f5f9) !important;
    box-sizing: border-box !important;
}

.card-title-row, .w-card-title-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    min-width: 0 !important;
}

.card-title, .w-card-title, .it-profile-card-title {
    font-size: clamp(14.5px, 1.1vw, 17px) !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
}

/* Card bodies seamlessly flex and scale */
.card-body, .w-card-body, .it-profile-card-body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* ── 10.6 Dynamic CSS Grid Systems with Auto-Fit & MinMax ───── */
.stats-grid,
.flt-kpi-row,
.kpi-grid,
.grid-4 {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
    gap: clamp(12px, 1.5vw, 20px) !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: stretch !important;
}

.it-metrics-grid,
.it-shortcuts-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: stretch !important;
}

.it-users-metrics,
.it-logs-metrics,
.grid-3 {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
    gap: clamp(14px, 1.5vw, 20px) !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: stretch !important;
}

.it-activity-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: stretch !important;
}

.it-profile-grid,
.form-grid,
.form-grid-2,
.grid-2 {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)) !important;
    gap: clamp(16px, 1.8vw, 24px) !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: stretch !important;
}

/* Metric card internal flex balance */
.it-metric-card, .it-stat-card, .it-user-stat-card {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    box-sizing: border-box !important;
}

.it-metric-body, .it-stat-body, .it-user-stat-body {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.it-metric-value, .it-stat-val, .it-user-stat-val {
    font-size: clamp(22px, 1.8vw, 28px) !important;
    line-height: 1.15 !important;
}

.it-metric-label, .it-stat-label, .it-user-stat-label {
    font-size: clamp(10px, 0.75vw, 11px) !important;
    letter-spacing: 0.5px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ── 10.7 Responsive Media & Relative Aspect Ratios ─────────── */
img, picture, video, canvas {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain;
}

svg {
    flex-shrink: 0 !important;
}

/* Relative Aspect Ratio Containers */
.aspect-video, .media-ratio-16-9 {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    overflow: hidden !important;
}

.media-ratio-4-3 {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
    overflow: hidden !important;
}

.media-ratio-square {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    overflow: hidden !important;
}

/* ── 10.8 Responsive Tables & Horizontal Protection ─────────── */
.table-responsive,
.it-audit-table-wrap,
.table-wrap,
div:has(> table) {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
}

table {
    width: 100% !important;
    border-collapse: collapse !important;
    min-width: min(100%, 540px) !important;
}

table th, table td {
    padding: clamp(8px, 1vw, 12px) clamp(8px, 1.2vw, 14px) !important;
    vertical-align: middle !important;
}

/* ── 10.9 Standardized Form Groups & Sizing ─────────────────── */
.form-group, .it-form-group {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    box-sizing: border-box !important;
}

.form-group.full-width, .it-form-group.full-width {
    grid-column: 1 / -1 !important;
}

.form-control, .it-form-control, .it-form-input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    min-height: 42px !important;
    font-size: clamp(12.5px, 0.95vw, 14px) !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
}

:where(.form-group, .it-form-group) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    min-height: 42px;
    font-size: clamp(12.5px, 0.95vw, 14px);
    padding: 8px 12px;
    border-radius: 8px;
}

input:not([type="checkbox"]):not([type="radio"]),
select, textarea {
    box-sizing: border-box !important;
}

/* ── Search Input & Icon Left-Padding Protection (All Portals) ── */
.driver-search-wrap,
.tractor-search-wrap,
.search-input-wrap,
.faculty-search-wrap,
.live-search-wrap {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
}

.driver-search-wrap .driver-search-icon,
.tractor-search-wrap .tractor-search-icon,
.faculty-search-wrap svg,
.live-search-wrap svg,
.driver-search-icon,
.tractor-search-icon {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 13px !important;
    height: 13px !important;
    color: #94a3b8 !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

input.driver-search-input,
input.tractor-search-input,
.driver-search-wrap input[type="text"],
.driver-search-wrap input[type="search"],
.tractor-search-wrap input[type="text"],
.tractor-search-wrap input[type="search"],
.faculty-search-wrap input[type="text"],
.faculty-search-wrap input[type="search"],
.live-search-wrap input[type="text"],
.live-search-wrap input[type="search"],
input#liveTractorSearchInput,
input.has-search-icon {
    padding-left: 30px !important;
    padding-right: 10px !important;
    text-indent: 0 !important;
}

.search-input-wrap input[type="text"],
.search-input-wrap input[type="search"],
.search-input-wrap input {
    padding-left: 44px !important;
}

textarea {
    min-height: 85px !important;
    resize: vertical !important;
}

/* ── 10.10 Modals & Overlays Responsive Clamping ────────────── */
.modal, .it-modal, .mgmt-modal {
    padding: 16px !important;
    box-sizing: border-box !important;
}

.modal.show, .modal.active, .modal.is-open, .modal.open,
.it-modal.show, .it-modal.active, .it-modal.is-open, .it-modal.open,
.mgmt-modal.show, .mgmt-modal.active, .mgmt-modal.is-open, .mgmt-modal.open {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.modal-content, .it-modal-content, .geofence-modal,
.mgmt-modal-dialog, [class*="modal-dialog"] {
    width: 100% !important;
    max-width: min(720px, calc(100vw - 32px)) !important;
    max-height: calc(100vh - 40px) !important;
    overflow-y: auto !important;
    margin: auto !important;
    box-sizing: border-box !important;
    border-radius: clamp(12px, 1.5vw, 18px) !important;
}

/* ── 10.11 Maps Resiliency ──────────────────────────────────── */
#live-map, #map, .leaflet-container:not(#dashboard-map):not(#auxiliary-dashboard-map) {
    width: 100% !important;
    max-width: 100% !important;
    min-height: clamp(340px, 45vh, 650px) !important;
    height: auto !important;
    border-radius: clamp(10px, 1.2vw, 14px) !important;
    box-sizing: border-box !important;
}

/* ── 10.12 Adaptive Zoom-In / Narrow Viewport Breakpoints ───── */
@media (max-width: 1024px) {
    body.admin-sidebar-ui .sidebar,
    body.admin-sidebar-ui .w-sidebar {
        width: var(--sidebar-closed-w, 75px) !important;
    }

    body.admin-sidebar-ui .sidebar ~ .layout,
    body.admin-sidebar-ui .w-sidebar ~ .w-layout,
    body.admin-sidebar-ui .layout,
    body.admin-sidebar-ui .w-layout {
        margin-left: var(--sidebar-closed-w, 75px) !important;
        width: calc(100% - var(--sidebar-closed-w, 75px)) !important;
    }

    .sidebar-brand-name, .w-brand-name,
    .nav-label, .w-nav-label,
    .sidebar-footer, .w-sidebar-footer,
    .sidebar-section-label {
        display: none !important;
    }

    .it-profile-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    body.admin-sidebar-ui .sidebar,
    body.admin-sidebar-ui .w-sidebar {
        transform: translateX(-100%);
        width: 260px !important;
    }

    body.admin-sidebar-ui.mobile-nav-active .sidebar,
    body.admin-sidebar-ui.mobile-nav-active .w-sidebar {
        transform: translateX(0) !important;
        display: flex !important;
    }

    body.admin-sidebar-ui.mobile-nav-active .nav-label,
    body.admin-sidebar-ui.mobile-nav-active .sidebar-brand-name {
        display: block !important;
    }

    body.admin-sidebar-ui .layout,
    body.admin-sidebar-ui .w-layout,
    .layout, .w-layout {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .content, .w-content, .main-content {
        padding: 1rem !important;
    }

    .page-header, .w-page-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .page-actions {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    .btn-action-pri, .btn-action-sec, .btn-refresh, .btn-navy-gold {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ── 10.13 Zoom-Out (Large / Ultra-Wide Viewport Balancing) ─── */
@media (min-width: 1800px) {
    .content-inner, .w-content-inner {
        max-width: 1720px !important;
    }
    
    .card, .w-card {
        padding: 28px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   11. AGRITRACK REPORT STUDIO & LIVE PRINT PREVIEW MODAL
   ═══════════════════════════════════════════════════════════════════════ */
.rpt-studio-overlay {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    background: rgba(10, 25, 49, 0.78) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(14px, 2.5vh, 28px) clamp(14px, 2.5vw, 32px) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.rpt-studio-overlay.is-open {
    display: flex !important;
    animation: rptStudioFadeIn 0.22s ease-out !important;
}

@keyframes rptStudioFadeIn {
    from { opacity: 0; transform: scale(0.985); }
    to { opacity: 1; transform: scale(1); }
}

/* Ensure background navigation layers stay behind the report studio */
html.rpt-studio-open,
body.rpt-studio-open {
    overflow: hidden !important;
}

body.rpt-studio-open .sidebar,
body.rpt-studio-open .w-sidebar,
body.rpt-studio-open .topbar,
body.rpt-studio-open .w-topbar,
body.rpt-studio-open #sidebar,
body.rpt-studio-open #w-sidebar,
body.rpt-studio-open .layout,
body.rpt-studio-open .w-layout {
    z-index: 10 !important;
}

.rpt-studio-dialog {
    width: min(92vw, 1360px) !important;
    max-width: 1360px !important;
    height: min(88vh, 860px) !important;
    max-height: calc(100vh - 44px) !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    box-shadow: 0 25px 60px -12px rgba(10, 25, 49, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
    margin: auto !important;
    box-sizing: border-box !important;
    z-index: 1000000 !important;
}

/* Topbar */
.rpt-studio-header {
    background: #0A1931 !important;
    color: #ffffff !important;
    padding: 10px 20px !important;
    min-height: 52px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    border-bottom: 2px solid #2E7D32 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

.rpt-studio-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
}

.rpt-studio-brand-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, #2E7D32, #1B5E20) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 8px rgba(46, 125, 50, 0.35) !important;
}

.rpt-studio-kicker {
    font-size: 8.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    color: #4ade80 !important;
    line-height: 1.1 !important;
    margin-bottom: 2px !important;
}

.rpt-studio-title {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.rpt-studio-header-right {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
}

/* Zoom Controls */
.rpt-studio-zoom-bar {
    display: inline-flex !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    padding: 2px !important;
    gap: 2px !important;
}

.rpt-studio-tool-btn {
    background: transparent !important;
    border: none !important;
    color: #94a3b8 !important;
    padding: 4px 9px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.15s ease !important;
}

.rpt-studio-tool-btn:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

.rpt-studio-tool-btn.active {
    background: #2E7D32 !important;
    color: #ffffff !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Header Action Buttons */
.rpt-studio-btn {
    height: 32px !important;
    padding: 0 13px !important;
    border-radius: 7px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    border: none !important;
    transition: all 0.18s ease !important;
    white-space: nowrap !important;
}

.rpt-studio-btn-csv {
    background: #059669 !important;
    color: #ffffff !important;
}

.rpt-studio-btn-csv:hover {
    background: #047857 !important;
    transform: translateY(-1px) !important;
}

.rpt-studio-btn-print {
    background: linear-gradient(135deg, #16a34a, #15803d) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.35) !important;
}

.rpt-studio-btn-print:hover {
    background: linear-gradient(135deg, #15803d, #166534) !important;
    transform: translateY(-1px) !important;
}

.rpt-studio-close-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
    border: none !important;
    font-size: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    line-height: 1 !important;
}

.rpt-studio-close-btn:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
}

/* Modal Body (Split) */
.rpt-studio-body {
    display: flex !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    background: #f1f5f9 !important;
    overflow: hidden !important;
}

/* Sidebar Controls */
.rpt-studio-sidebar {
    width: 380px !important;
    min-width: 360px !important;
    max-width: 400px !important;
    background: #ffffff !important;
    border-right: 1px solid #e2e8f0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
}

.rpt-studio-sidebar-scroll {
    padding: 16px 16px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.rpt-studio-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #0A1931;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e2e8f0;
}

.rpt-studio-reset-link {
    background: none;
    border: none;
    color: #2E7D32;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    text-transform: none;
    padding: 0;
}

.rpt-studio-reset-link:hover {
    text-decoration: underline;
}

.rpt-studio-field {
    margin-bottom: 14px;
    width: 100%;
    box-sizing: border-box;
}

.rpt-studio-field-group {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.rpt-studio-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #475569;
    margin-bottom: 5px;
}

.rpt-studio-presets-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.rpt-studio-preset-pill {
    padding: 5px 11px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
}

.rpt-studio-preset-pill:hover {
    background: #E8F5E9;
    color: #2E7D32;
    border-color: #a5d6a7;
}

.rpt-studio-preset-pill.active {
    background: #2E7D32;
    color: #ffffff;
    border-color: #2E7D32;
    box-shadow: 0 1px 4px rgba(46, 125, 50, 0.3);
}

.rpt-studio-input,
.rpt-studio-select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    color: #0f172a !important;
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
    min-height: 38px !important;
}

.rpt-studio-input[type="date"] {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #0f172a !important;
    color-scheme: light !important;
    padding: 6px 8px !important;
    font-size: 11.5px !important;
    letter-spacing: -0.2px !important;
}

.rpt-studio-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: none !important;
    cursor: pointer !important;
    opacity: 0.65 !important;
}

.rpt-studio-input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1 !important;
}

.rpt-studio-input:focus,
.rpt-studio-select:focus {
    border-color: #2E7D32 !important;
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.15) !important;
}

/* Sorting Box */
.rpt-studio-sort-box {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 16px;
    border-left: 3px solid #2E7D32;
}

.rpt-studio-sort-title {
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #0A1931;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

.rpt-studio-dir-toggle {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.rpt-studio-dir-btn {
    padding: 7px 10px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
    text-align: left;
}

.rpt-studio-dir-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.rpt-studio-dir-btn.active {
    background: #E8F5E9;
    color: #1b5e20;
    border-color: #2E7D32;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px #2E7D32;
}

/* Update Button */
.rpt-studio-btn-update {
    width: 100%;
    height: 40px;
    background: #0A1931;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 16px;
    transition: background 0.18s, transform 0.15s;
}

.rpt-studio-btn-update:hover {
    background: #1e3a5f;
    transform: translateY(-1px);
}

/* Audit Info Card */
.rpt-studio-audit-card {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.rpt-studio-audit-icon {
    color: #16a34a;
    flex-shrink: 0;
    margin-top: 1px;
}

.rpt-studio-audit-text {
    font-size: 10.5px;
    color: #166534;
    line-height: 1.35;
}

/* Right Stage: Canvas Viewport */
.rpt-studio-stage {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    background: #0f172a !important;
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px) !important;
    background-size: 20px 20px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: relative !important;
    padding: 24px 20px 48px !important;
    display: flex !important;
    justify-content: center !important;
}

.rpt-studio-stage-inner {
    width: 100% !important;
    max-width: 900px !important;
    position: relative !important;
    margin: 0 auto !important;
}

/* Loader */
.rpt-studio-loader {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 10;
    border-radius: 8px;
}

.rpt-studio-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #4ade80;
    border-radius: 50%;
    animation: rptSpin 0.75s linear infinite;
}

@keyframes rptSpin {
    to { transform: rotate(360deg); }
}

.rpt-studio-loading-text {
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Paper Container */
.rpt-studio-paper-shadow {
    width: 100% !important;
    min-height: 1050px !important;
    background: #ffffff !important;
    border-radius: 4px !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden !important;
    transition: transform 0.2s ease-out !important;
}

.rpt-studio-iframe {
    width: 100% !important;
    height: 1050px !important;
    border: none !important;
    display: block !important;
    background: #ffffff !important;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
    .rpt-studio-overlay {
        padding: 10px !important;
    }
    .rpt-studio-dialog {
        width: 96vw !important;
        height: 94vh !important;
        max-width: 100% !important;
        max-height: calc(100vh - 20px) !important;
        border-radius: 10px !important;
    }
    .rpt-studio-sidebar {
        width: 350px !important;
        min-width: 330px !important;
    }
}

@media (max-width: 860px) {
    .rpt-studio-overlay {
        padding: 0 !important;
    }
    .rpt-studio-dialog {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }
    .rpt-studio-body {
        flex-direction: column !important;
    }
    .rpt-studio-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 240px !important;
        border-right: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }
    .rpt-studio-field-group {
        grid-template-columns: 1fr !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   AGRITRACK ADMIN PORTAL - UNIVERSAL CARD UI MINIMIZATION & SPACE MAXIMIZATION
   Applies high-density spatial minimization across all Administrator pages
   Ensures snug card enclosures, tight padding, compact headers & maximized space
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Content Viewport Zero-Waste Containment ─────────────────────────────── */
body.admin-dashboard .content,
body.admin-dashboard .w-content,
body.admin-dashboard .main-content {
    padding: 6px 8px 8px 8px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

body.admin-dashboard .content-inner,
body.admin-dashboard .w-content-inner,
body.admin-dashboard .main-container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* ── 2. Universal Minimized Card Enclosures ──────────────────────────────────── */
body.admin-dashboard .card,
body.admin-dashboard .w-card,
body.admin-dashboard .panel,
body.admin-dashboard .mgmt-card,
body.admin-dashboard .notif-list-card,
body.admin-dashboard .booking-main-card,
body.admin-dashboard .survey-card,
body.admin-dashboard .tractors-card,
body.admin-dashboard .create-card,
body.admin-dashboard .booking-create-card,
body.admin-dashboard .rpt-filter-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 3px rgba(10, 25, 49, 0.04) !important;
    margin-bottom: 4px !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Hover elevation */
body.admin-dashboard .card:hover,
body.admin-dashboard .w-card:hover,
body.admin-dashboard .mgmt-card:hover,
body.admin-dashboard .booking-main-card:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 3px 8px rgba(10, 25, 49, 0.07) !important;
}

/* ── 3. High-Density Card Headers ───────────────────────────────────────────── */
body.admin-dashboard .card-header,
body.admin-dashboard .w-card-header,
body.admin-dashboard .booking-card-header,
body.admin-dashboard .tractor-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 14px !important;
    min-height: 38px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: #ffffff !important;
    gap: 8px !important;
    box-sizing: border-box !important;
}

body.admin-dashboard .card-title-row,
body.admin-dashboard .w-card-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
}

body.admin-dashboard .card-title,
body.admin-dashboard .w-card-title,
body.admin-dashboard .mgmt-card-title,
body.admin-dashboard .booking-card-title,
body.admin-dashboard .section-title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #0A1931 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

body.admin-dashboard .card-icon {
    width: 26px !important;
    height: 26px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
    background: #f0fdf4 !important;
    border: 1px solid #dcfce7 !important;
    color: #16a34a !important;
}

body.admin-dashboard .card-icon svg,
body.admin-dashboard .card-icon i {
    width: 14px !important;
    height: 14px !important;
    color: #16a34a !important;
    stroke: #16a34a !important;
}

/* ── 4. Card Body & Inner Content Sizing ────────────────────────────────────── */
body.admin-dashboard .card-body,
body.admin-dashboard .w-card-body {
    padding: 10px 14px !important;
    box-sizing: border-box !important;
}

body.admin-dashboard.tractor-location-map .metrics-panel .card,
body.tractor-location-map .metrics-panel .card {
    padding: 6px 7px !important;
}
body.admin-dashboard.tractor-location-map .metrics-panel .card-body,
body.tractor-location-map .metrics-panel .card-body {
    padding: 0 !important;
}

/* System Management Page Cards & Mini Cards Minimized Margins */
body.system-management-page .mgmt-card-title {
    font-size: 15px !important;
}
body.system-management-page .mgmt-card-head {
    padding: 6px 8px 5px 8px !important;
}
body.system-management-page .mgmt-card-body {
    padding: 6px 8px 8px 8px !important;
}
body.system-management-page .mgmt-pills {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 5px !important;
    margin: 5px 0 !important;
}
body.system-management-page .mgmt-pill {
    padding: 3px 6px 4px 6px !important;
    border-radius: 6px !important;
}
body.system-management-page .mgmt-survey-kpis {
    gap: 6px !important;
    margin-bottom: 8px !important;
}
body.system-management-page .mgmt-survey-kpi {
    padding: 5px 8px !important;
    border-radius: 7px !important;
}

/* ── 5. Page Headers & Banners Minimization ─────────────────────────────────── */
body.admin-dashboard .page-header,
body.admin-dashboard .w-page-header,
body.admin-dashboard .tractor-header,
body.admin-dashboard .survey-hero {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 14px !important;
    margin-bottom: 6px !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(10, 25, 49, 0.04) !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    flex-wrap: wrap !important;
}

body.admin-dashboard .page-title,
body.admin-dashboard .w-page-title,
body.admin-dashboard .tractor-header h1,
body.admin-dashboard .survey-hero h1 {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0A1931 !important;
    letter-spacing: -0.015em !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

body.admin-dashboard .page-kicker,
body.admin-dashboard .survey-kicker {
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    color: #16a34a !important;
    line-height: 1 !important;
    margin-bottom: 2px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

body.admin-dashboard .page-sub,
body.admin-dashboard .w-page-sub,
body.admin-dashboard .tractor-header p,
body.admin-dashboard .survey-hero p {
    font-size: 11.5px !important;
    color: #64748b !important;
    line-height: 1.3 !important;
    margin-top: 2px !important;
}

/* ── 6. KPI & Metric Stat Cards Snug Geometry ───────────────────────────────── */
body.admin-dashboard .stat-card,
body.admin-dashboard .w-stat-card,
body.admin-dashboard .tractor-stat-card,
body.admin-dashboard .booking-stat-card {
    min-height: 44px !important;
    max-height: 48px !important;
    padding: 6px 12px 5px 12px !important;
    border-radius: 7px !important;
    margin-bottom: 0 !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(10, 25, 49, 0.04) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
}

body.admin-dashboard .stat-card:hover,
body.admin-dashboard .w-stat-card:hover,
body.admin-dashboard .tractor-stat-card:hover,
body.admin-dashboard .booking-stat-card:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px rgba(10, 25, 49, 0.07) !important;
    border-color: #cbd5e1 !important;
}

body.admin-dashboard .stat-card::before,
body.admin-dashboard .w-stat-card::before,
body.admin-dashboard .tractor-stat-card::before,
body.admin-dashboard .booking-stat-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2.5px !important;
    background: linear-gradient(90deg, #FACC15 0%, #0B132B 100%) !important;
    border-top-left-radius: 7px !important;
    border-top-right-radius: 7px !important;
}

body.admin-dashboard .stat-label,
body.admin-dashboard .tractor-stat-card span {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: #000000 !important;
    line-height: 1.1 !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.admin-dashboard .stat-value,
body.admin-dashboard .tractor-stat-card strong {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #000000 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.015em !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

body.admin-dashboard .tractor-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
}

/* ── 7. Compact Tables: Perfectly Fitted Contents ───────────────────────────── */
body.admin-dashboard table tbody td,
body.admin-dashboard .data-table tbody td {
    padding: 6px 10px !important;
    font-size: 11.5px !important;
    line-height: 1.3 !important;
    vertical-align: middle !important;
}

body.admin-dashboard table thead th,
body.admin-dashboard .data-table thead th {
    padding: 7px 10px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    color: #475569 !important;
    background: #f8fafc !important;
    border-bottom: 1.5px solid #e2e8f0 !important;
}

body.admin-dashboard .table-wrap {
    margin: 0 !important;
    border-radius: 0 0 8px 8px !important;
}

/* ── 8. Compact Filter Bars & Controls ──────────────────────────────────────── */
body.admin-dashboard .table-filters,
body.admin-dashboard .notif-toolbar {
    padding: 6px 10px !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
    border-radius: 8px !important;
}

body.admin-dashboard .table-filters input,
body.admin-dashboard .table-filters select {
    height: 30px !important;
    min-height: 30px !important;
    padding: 4px 8px !important;
    font-size: 11.5px !important;
    border-radius: 6px !important;
}

body.admin-dashboard .notif-select,
.notif-select {
    width: 145px !important;
    min-width: 145px !important;
    max-width: 145px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    line-height: 26px !important;
    padding: 0 22px 0 8px !important;
    font-size: 11px !important;
    font-family: inherit !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 5px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 7px center !important;
    background-size: 11px 11px !important;
    cursor: pointer !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

body.admin-dashboard .notif-select:focus,
.notif-select:focus {
    border-color: #16a34a !important;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.15) !important;
    outline: none !important;
}

/* ── 9. Form Cards (Bookings Create, Tractors Create/Edit) ──────────────────── */
body.admin-dashboard .booking-create-shell,
body.admin-dashboard .create-shell {
    max-width: 960px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-bottom: 20px !important;
}

body.admin-dashboard .booking-create-card,
body.admin-dashboard .create-card {
    padding: 14px 20px !important;
    margin-top: 6px !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(10, 25, 49, 0.04) !important;
}

body.admin-dashboard .section-heading,
body.admin-dashboard .create-section-label {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #16a34a !important;
    margin-bottom: 10px !important;
    padding-bottom: 5px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

body.admin-dashboard .form-grid,
body.admin-dashboard .create-grid {
    gap: 10px 14px !important;
    margin-bottom: 12px !important;
}

body.admin-dashboard .form-field,
body.admin-dashboard .form-group {
    gap: 4px !important;
}

body.admin-dashboard .form-field label,
body.admin-dashboard .form-group label {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    margin-bottom: 0 !important;
}

body.admin-dashboard .form-field input,
body.admin-dashboard .form-field select,
body.admin-dashboard .form-field textarea,
body.admin-dashboard .form-control {
    padding: 7px 10px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    font-size: 12.5px !important;
    min-height: 34px !important;
    box-sizing: border-box !important;
}

body.admin-dashboard .form-field textarea,
body.admin-dashboard textarea.form-control {
    min-height: 60px !important;
}

/* ── 10. Tractor Directory Cards & Items ─────────────────────────────────────── */
body.admin-dashboard .tractor-list {
    display: grid !important;
    gap: 6px !important;
    padding: 6px 8px !important;
}

body.admin-dashboard .tractor-item {
    border: 1px solid #e2e8f0 !important;
    border-radius: 7px !important;
    background: #f8fafc !important;
    padding: 8px 12px !important;
    box-shadow: 0 1px 3px rgba(10, 25, 49, 0.03) !important;
    transition: all 0.15s ease !important;
}

body.admin-dashboard .tractor-item:hover {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 2px 6px rgba(10, 25, 49, 0.06) !important;
}

body.admin-dashboard .tractor-title-row {
    margin-bottom: 4px !important;
    gap: 8px !important;
}

body.admin-dashboard .tractor-title-row h3 {
    font-size: 13.5px !important;
    font-weight: 800 !important;
}

body.admin-dashboard .tractor-title-row strong {
    font-size: 11.5px !important;
}

body.admin-dashboard .tractor-item dl {
    gap: 4px 14px !important;
    font-size: 11px !important;
}

/* ── 11. Surveys / Feedback Compact Geometry ───────────────────────────────── */
body.admin-dashboard .survey-shell {
    display: grid !important;
    gap: 6px !important;
}

body.admin-dashboard .survey-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .55fr) !important;
    gap: 6px !important;
    align-items: start !important;
}

body.admin-dashboard .survey-card {
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(10, 25, 49, 0.04) !important;
}

body.admin-dashboard .survey-form {
    display: grid !important;
    gap: 12px !important;
    padding: 12px 16px !important;
}

body.admin-dashboard .survey-section {
    display: grid !important;
    gap: 10px !important;
}

body.admin-dashboard .survey-section-head {
    gap: 8px !important;
}

body.admin-dashboard .survey-section-head > span {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
    font-size: 11px !important;
}

body.admin-dashboard .survey-section h2 {
    font-size: 14px !important;
    font-weight: 800 !important;
}

body.admin-dashboard .survey-section p {
    font-size: 11.5px !important;
}

body.admin-dashboard .survey-rating-grid {
    gap: 8px !important;
    grid-auto-rows: 1fr !important;
    align-items: stretch !important;
}

body.admin-dashboard .survey-rating {
    padding: 8px 10px !important;
    border-radius: 7px !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

body.admin-dashboard .survey-rating p {
    flex: 1 1 auto !important;
    margin: 0 0 8px 0 !important;
}

body.admin-dashboard .survey-rating label,
body.admin-dashboard .survey-label,
body.admin-dashboard .survey-check-grid legend {
    font-size: 11.5px !important;
    margin-bottom: 4px !important;
}

body.admin-dashboard .survey-rating select,
body.admin-dashboard .survey-two-col select,
body.admin-dashboard .survey-followup input[type="text"],
body.admin-dashboard .survey-form textarea {
    padding: 6px 10px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
}

body.admin-dashboard .survey-rating select {
    margin-top: auto !important;
}

body.admin-dashboard .survey-check-grid,
body.admin-dashboard .survey-two-col {
    gap: 10px !important;
}

body.admin-dashboard .survey-check-grid fieldset {
    padding: 10px 12px !important;
    border-radius: 8px !important;
    gap: 6px !important;
}

body.admin-dashboard .survey-check {
    font-size: 11.5px !important;
    gap: 6px !important;
}

body.admin-dashboard .survey-chip span {
    padding: 5px 10px !important;
    font-size: 11px !important;
}

body.admin-dashboard .survey-side {
    padding: 12px !important;
    gap: 8px !important;
}

body.admin-dashboard .survey-bubble {
    padding: 10px 12px !important;
    border-radius: 8px !important;
}

body.admin-dashboard .survey-bubble strong,
body.admin-dashboard .survey-side h3 {
    font-size: 13px !important;
    margin-bottom: 4px !important;
}

body.admin-dashboard .survey-summary-title {
    font-size: 13px !important;
}
body.admin-dashboard .survey-summary-row {
    padding: 2.5px 0 !important;
}
body.admin-dashboard .survey-summary-row .row-label {
    font-size: 11px !important;
}
body.admin-dashboard .survey-summary-row .row-badge {
    font-size: 10.5px !important;
    padding: 1px 6px !important;
}

body.admin-dashboard .survey-bubble p,
body.admin-dashboard .survey-side li {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
}

body.admin-dashboard .survey-actions {
    gap: 8px !important;
}

body.admin-dashboard .survey-actions button,
body.admin-dashboard .survey-actions .survey-submit-btn {
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-size: 12.5px !important;
}

body.admin-dashboard .survey-reset-btn {
    padding: 8px 14px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    color: #1e293b !important;
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
}
body.admin-dashboard .survey-reset-btn span {
    color: #1e293b !important;
    font-weight: 700 !important;
}
body.admin-dashboard .survey-reset-btn i,
body.admin-dashboard .survey-reset-btn svg {
    color: #334155 !important;
    stroke: #334155 !important;
}

/* ── 12. Profile Page Snug UI ───────────────────────────────────────────────── */
body.admin-profile-page .w-card {
    padding: 14px 16px !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
}
body.admin-profile-page .w-card > div:first-child {
    font-size: 14px !important;
    margin-bottom: 10px !important;
    padding-bottom: 6px !important;
}
body.admin-profile-page input {
    padding: 7px 10px !important;
    border-radius: 6px !important;
    font-size: 12.5px !important;
}
body.admin-profile-page button[type="submit"] {
    padding: 8px 18px !important;
    border-radius: 6px !important;
    font-size: 12.5px !important;
}

/* ── 13. Tractor Items Snug UI ──────────────────────────────────────────────── */
body.admin-dashboard .tractor-item {
    padding: 8px 12px !important;
    border-radius: 8px !important;
    margin-bottom: 6px !important;
}
body.admin-dashboard .tractor-title-row {
    margin-bottom: 6px !important;
    gap: 8px !important;
}
body.admin-dashboard .tractor-title-row h3 {
    font-size: 13.5px !important;
}
body.admin-dashboard .tractor-title-row strong {
    font-size: 12px !important;
}
body.admin-dashboard .tractor-item dl {
    gap: 4px 16px !important;
    font-size: 11.5px !important;
}
body.admin-dashboard .tractor-item dt,
body.admin-dashboard .tractor-item dd {
    font-size: 11.5px !important;
}

/* ── 14. Report Cards & Generate Center Snug UI ─────────────────────────────── */
body.admin-dashboard .rpt-gen-header {
    padding: 10px 14px !important;
    margin-bottom: 6px !important;
    border-radius: 8px !important;
}
body.admin-dashboard .rpt-cards-grid-5 {
    gap: 6px !important;
}
body.admin-dashboard .rpt-export-card {
    padding: 10px 14px !important;
    border-radius: 8px !important;
}
body.admin-dashboard .rpt-kpi-banner {
    gap: 6px !important;
    margin-bottom: 6px !important;
}
body.admin-dashboard .rpt-kpi-pill {
    padding: 8px 12px !important;
    border-radius: 8px !important;
}
body.admin-dashboard .rpt-chart-box,
body.admin-dashboard .rpt-table-box {
    padding: 10px 12px !important;
    border-radius: 8px !important;
}

/* ── 15. Geofencing Portal Minimization ─────────────────────────────────────── */
body.geofence-management .content,
body.geofence-management .main-content {
    padding: 4px 8px 6px 8px !important;
}

body.geofence-management .geo-stats-bar {
    gap: 6px !important;
    margin-top: 0 !important;
    margin-bottom: 4px !important;
}

body.geofence-management .card,
body.geofence-management .geofence-main-card,
body.geofence-management .geofence-list-card {
    border-radius: 9px !important;
    box-shadow: 0 1px 3px rgba(10, 25, 49, 0.04) !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.geofence-management .card-header-clean,
body.geofence-management .geofence-card-header {
    padding: 6px 12px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    min-height: 36px !important;
}

body.geofence-management .card-header-clean .card-title,
body.geofence-management .geofence-card-header .card-title {
    font-size: 13.5px !important;
}

body.geofence-management .zone-item {
    margin-bottom: 5px !important;
    padding: 7px 12px !important;
    border-radius: 7px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

body.geofence-management .zone-name {
    font-size: 12.5px !important;
    font-weight: 700 !important;
}

body.geofence-management .zone-details {
    font-size: 11px !important;
    margin-top: 2px !important;
}

body.geofence-management .zone-type-badge {
    font-size: 10px !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
}

body.geofence-management .icon-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    padding: 0 !important;
}

body.geofence-management .icon-btn svg {
    width: 13px !important;
    height: 13px !important;
}

body.geofence-management .btn-refresh-pill {
    padding: 4px 10px !important;
    font-size: 11.5px !important;
    border-radius: 6px !important;
}

body.geofence-management .geo-stats-create-btn {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
}

body.geofence-management .geofence-modal {
    border-radius: 12px !important;
    max-width: 900px !important;
}

body.geofence-management #zoneModal.geofence-modal-backdrop {
    padding: clamp(12px, 2vh, 24px) !important;
}

body.map-big-window-open #zoneModal.geofence-modal-backdrop {
    z-index: 100010 !important;
}

body.geofence-management #zoneModal .geofence-modal {
    width: clamp(840px, 64vw, 1220px) !important;
    max-width: min(94vw, 1220px) !important;
    height: min(88vh, 860px) !important;
    max-height: 92vh !important;
    border-radius: 14px !important;
    box-shadow: 0 25px 70px rgba(10, 25, 49, 0.35) !important;
    transform: none !important;
}

body.map-big-window-open #zoneModal .geofence-modal,
body.map-big-window-open .geofence-modal {
    transform: none !important;
    animation: none !important;
    overflow: visible !important;
}

body.map-big-window-open #zoneModal .geofence-modal-body,
body.map-big-window-open .geofence-modal-body {
    overflow: visible !important;
}

body.geofence-management #viewZoneModal .geofence-modal {
    width: min(720px, 94vw) !important;
    max-width: 720px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 92vh !important;
}

body.geofence-management #deleteZoneModal .geofence-modal {
    width: min(440px, 94vw) !important;
    max-width: 440px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 90vh !important;
}

body.geofence-management .geofence-modal-header {
    padding: 10px 14px !important;
}

body.geofence-management #zoneModal .geofence-modal-header {
    flex-shrink: 0 !important;
    padding: 10px 16px !important;
}

body.geofence-management .geofence-modal-header h2 {
    font-size: 14.5px !important;
}

body.geofence-management .geofence-modal-header p {
    font-size: 11px !important;
}

body.geofence-management .geofence-modal-body {
    padding: 10px 12px !important;
    gap: 8px !important;
}

body.geofence-management #zoneModal .geofence-modal-body {
    display: grid !important;
    grid-template-columns: 360px minmax(0, 1fr) !important;
    padding: 8px 12px 10px 12px !important;
    gap: 10px !important;
    height: calc(100% - 48px) !important;
    max-height: none !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

body.geofence-management #zoneModal .zone-control-panel {
    width: 360px !important;
    min-width: 360px !important;
    max-width: 360px !important;
    height: 100% !important;
    max-height: 100% !important;
    padding: 12px 14px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

body.geofence-management #zoneModal .zone-map-workspace {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
}

body.geofence-management #zoneModal #zoneMap {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
}

body.geofence-management .geofence-modal .toolbox-grid {
    gap: 4px !important;
    margin-bottom: 6px !important;
}

body.geofence-management .geofence-modal .tool-btn {
    padding: 4px 8px !important;
    font-size: 10.5px !important;
    border-radius: 6px !important;
}

body.geofence-management .geofence-modal .instruction-card {
    padding: 6px 10px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
    margin-bottom: 6px !important;
}

body.geofence-management .geofence-modal .form-group {
    margin-bottom: 6px !important;
}

body.geofence-management .geofence-modal label {
    font-size: 10.5px !important;
    margin-bottom: 2px !important;
}

body.geofence-management .geofence-modal input[type="text"],
body.geofence-management .geofence-modal select,
body.geofence-management .geofence-modal textarea {
    padding: 5px 8px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
}

body.geofence-management .geofence-modal .action-footer {
    padding-top: 8px !important;
    margin-top: 8px !important;
}

body.geofence-management .geofence-modal .btn-action {
    padding: 6px 14px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
}

/* ── 16. Report Management Portal Minimization ───────────────────────────────── */
body.report-management-page .content,
body.report-management-page .main-content {
    padding: 6px 8px 8px 8px !important;
}

body.report-management-page .rpt-tabs-nav {
    gap: 4px !important;
    margin-bottom: 4px !important;
    padding-bottom: 2px !important;
    border-bottom: 1.5px solid #e2e8f0 !important;
}

body.report-management-page .rpt-tab-btn {
    padding: 4px 10px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    border-radius: 5px 5px 0 0 !important;
    gap: 4px !important;
}

body.report-management-page .rpt-tab-badge {
    font-size: 9.5px !important;
    padding: 1px 5px !important;
    border-radius: 8px !important;
}

body.report-management-page .rpt-cards-row,
body.report-management-page .rpt-alerts-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
    width: 100% !important;
    align-items: stretch !important;
}

@media (max-width: 1200px) {
    body.report-management-page .rpt-cards-row,
    body.report-management-page .rpt-alerts-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    body.report-management-page .rpt-cards-row,
    body.report-management-page .rpt-alerts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 480px) {
    body.report-management-page .rpt-cards-row,
    body.report-management-page .rpt-alerts-grid {
        grid-template-columns: 1fr !important;
    }
}

body.report-management-page .rpt-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    padding: 5px 10px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    box-shadow: 0 1px 3px rgba(11, 19, 43, 0.04) !important;
    position: relative !important;
    overflow: hidden !important;
    height: 100% !important;
    min-height: 42px !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}

body.report-management-page .rpt-card:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px rgba(11, 19, 43, 0.09) !important;
    border-color: #cbd5e1 !important;
}

body.report-management-page .rpt-card::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    height: 2.5px !important;
    background: linear-gradient(90deg, #FACC15 0%, #0B132B 100%) !important;
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
    z-index: 2 !important;
}

body.report-management-page .rpt-card-body {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
}

body.report-management-page .rpt-card-lbl {
    font-size: 8px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #000000 !important;
    line-height: 1 !important;
    margin-bottom: 1px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

body.report-management-page .rpt-card-val {
    font-size: 14.5px !important;
    font-weight: 800 !important;
    color: #000000 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: baseline !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    white-space: nowrap !important;
}

body.report-management-page .rpt-card-sub {
    display: none !important;
}

body.report-management-page .rpt-card-icon {
    width: 24px !important;
    height: 24px !important;
    border-radius: 5px !important;
    background: #0B132B !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 1px 3px rgba(11, 19, 43, 0.15) !important;
}

body.report-management-page .rpt-card-icon svg {
    width: 13px !important;
    height: 13px !important;
    color: #FACC15 !important;
    stroke: #FACC15 !important;
}

body.report-management-page .rpt-section {
    margin-bottom: 5px !important;
}

body.report-management-page .rpt-section-title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    margin-bottom: 3px !important;
    padding-bottom: 2px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
}

body.report-management-page .rpt-section-title .card-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

body.report-management-page .rpt-section-title .card-icon {
    width: 18px !important;
    height: 18px !important;
    border-radius: 4px !important;
    background: #f0fdf4 !important;
    border: 1px solid #dcfce7 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    color: #16a34a !important;
}

body.report-management-page .rpt-section-title .card-icon i,
body.report-management-page .rpt-section-title .card-icon svg {
    width: 11px !important;
    height: 11px !important;
    color: #16a34a !important;
    stroke: #16a34a !important;
}

body.report-management-page .rpt-section-title .card-title {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #0A1931 !important;
}

body.report-management-page .rpt-section-subtitle {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #64748b !important;
}

/* ── Filter Card Minimization ────────────────────────────────────────────── */
body.report-management-page .rpt-filter-card {
    background: #ffffff !important;
    border: 1px solid var(--green-border, #cde3bc) !important;
    border-radius: 6px !important;
    padding: 5px 8px !important;
    margin-bottom: 5px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

body.report-management-page .rpt-filter-topbar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding-bottom: 3px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    margin-bottom: 3px !important;
}

body.report-management-page .rpt-filter-heading-title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

body.report-management-page .rpt-filter-heading-title i,
body.report-management-page .rpt-filter-heading-title svg {
    width: 12px !important;
    height: 12px !important;
    color: #16a34a !important;
}

body.report-management-page .rpt-match-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    background: var(--agri-green-light, #E8F5E9) !important;
    color: var(--agri-green, #2E7D32) !important;
    border: 1px solid rgba(46, 125, 50, 0.25) !important;
    border-radius: 8px !important;
    padding: 1px 5px !important;
    font-size: 9.5px !important;
    font-weight: 600 !important;
}

body.report-management-page .pulse-dot {
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: var(--agri-green, #2E7D32) !important;
    display: inline-block !important;
}

body.report-management-page .rpt-preset-lbl {
    font-size: 8.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #94a3b8 !important;
    margin-right: 1px !important;
}

body.report-management-page .rpt-preset-btn {
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #475569 !important;
    padding: 1px 5px !important;
    border-radius: 8px !important;
    font-size: 9.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

body.report-management-page .rpt-preset-btn:hover {
    background: var(--agri-green-light, #E8F5E9) !important;
    color: #1b5e20 !important;
    border-color: rgba(46, 125, 50, 0.35) !important;
}

body.report-management-page .rpt-preset-btn.active {
    background: var(--agri-green, #2E7D32) !important;
    color: #ffffff !important;
    border-color: var(--agri-green, #2E7D32) !important;
}

body.report-management-page .rpt-filter-tier-1 {
    display: grid !important;
    grid-template-columns: 160px 160px 160px 1fr !important;
    gap: 8px !important;
    align-items: flex-end !important;
    margin-bottom: 6px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px dashed #e2e8f0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

body.report-management-page .rpt-filter-tier-2 {
    display: grid !important;
    grid-template-columns: 160px 160px 160px 1fr auto !important;
    gap: 8px !important;
    align-items: flex-end !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 1100px) and (min-width: 769px) {
    body.report-management-page .rpt-filter-tier-1 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    body.report-management-page .rpt-filter-tier-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 768px) {
    body.report-management-page .rpt-filter-tier-1,
    body.report-management-page .rpt-filter-tier-2 { grid-template-columns: 1fr !important; }
}

body.report-management-page .rpt-field-wrap label {
    font-size: 8.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #64748b !important;
    letter-spacing: 0.3px !important;
    display: block !important;
    margin-bottom: 2px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.report-management-page .rpt-field-wrap select,
body.report-management-page .rpt-field-wrap input {
    width: 100% !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    line-height: 26px !important;
    padding: 0 8px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 5px !important;
    font-size: 11px !important;
    font-family: inherit !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    background-color: #ffffff !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

body.report-management-page .rpt-field-wrap select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 11px 11px !important;
    padding-right: 24px !important;
    cursor: pointer !important;
}

body.report-management-page .rpt-field-wrap select::-ms-expand {
    display: none !important;
}

body.report-management-page .rpt-field-wrap input[type="date"] {
    position: relative !important;
    cursor: pointer !important;
    padding: 0 6px 0 8px !important;
}

body.report-management-page .rpt-field-wrap input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.55 !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    transition: opacity 0.15s ease !important;
}

body.report-management-page .rpt-field-wrap input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1 !important;
}

body.report-management-page .rpt-field-wrap input[type="date"]::-webkit-datetime-edit {
    padding: 0 !important;
    line-height: normal !important;
}

body.report-management-page .rpt-field-wrap input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    padding: 0 !important;
}

body.report-management-page .rpt-field-wrap input[type="text"]::placeholder {
    color: #94a3b8 !important;
    opacity: 0.85 !important;
    font-size: 11px !important;
}

body.report-management-page .rpt-field-wrap select:focus,
body.report-management-page .rpt-field-wrap input:focus {
    border-color: var(--agri-green, #2E7D32) !important;
    box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.15) !important;
    outline: none !important;
}

body.report-management-page .rpt-reporting-window {
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    line-height: 28px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11px !important;
    color: #64748b !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
}

body.report-management-page .rpt-btn-submit {
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    line-height: 28px !important;
    padding: 0 12px !important;
    border-radius: 5px !important;
    background: var(--agri-green, #2E7D32) !important;
    color: #ffffff !important;
    border: 1px solid var(--agri-green, #2E7D32) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease !important;
}

body.report-management-page .rpt-btn-submit:hover {
    background: #256629 !important;
    border-color: #256629 !important;
}

body.report-management-page .rpt-btn-reset {
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    line-height: 26px !important;
    padding: 0 9px !important;
    border-radius: 5px !important;
    background: #f8fafc !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease !important;
}

body.report-management-page .rpt-btn-reset:hover {
    background: #f1f5f9 !important;
    color: #1e293b !important;
    border-color: #94a3b8 !important;
}

body.report-management-page .rpt-active-tags {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    flex-wrap: wrap !important;
    margin-top: 3px !important;
    padding-top: 3px !important;
    border-top: 1px dashed #e2e8f0 !important;
    font-size: 9.5px !important;
}

body.report-management-page .rpt-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    background: var(--agri-green-light, #E8F5E9) !important;
    color: var(--agri-green, #2E7D32) !important;
    border: 1px solid rgba(46, 125, 50, 0.25) !important;
    border-radius: 3px !important;
    padding: 1px 5px !important;
    font-size: 9px !important;
    font-weight: 600 !important;
}

/* ── Secondary KPI Banner ────────────────────────────────────────────────── */
body.report-management-page .rpt-kpi-banner {
    display: flex !important;
    gap: 4px !important;
    margin-bottom: 5px !important;
    flex-wrap: wrap !important;
}

body.report-management-page .rpt-kpi-pill {
    flex: 1 !important;
    min-width: 170px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    padding: 3px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
    box-sizing: border-box !important;
}

body.report-management-page .rpt-kpi-pill .title {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    line-height: 1.1 !important;
}

body.report-management-page .rpt-kpi-pill .sub {
    font-size: 8.5px !important;
    color: #94a3b8 !important;
    line-height: 1.1 !important;
    margin-top: 1px !important;
}

body.report-management-page .rpt-kpi-pill .number {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

/* ── Charts & Tables ─────────────────────────────────────────────────────── */
body.report-management-page .rpt-grid-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 5px !important;
}

body.report-management-page .rpt-chart-box {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    padding: 5px 8px !important;
    min-height: 155px !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
}

body.report-management-page .rpt-chart-box h4 {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    margin: 0 0 3px 0 !important;
}

body.report-management-page .rpt-canvas-wrap {
    flex: 1 !important;
    position: relative !important;
    min-height: 130px !important;
}

body.report-management-page .rpt-table-box {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    padding: 5px 8px !important;
    overflow-x: auto !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
}

body.report-management-page .rpt-table-box h4 {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    margin: 0 0 3px 0 !important;
}

body.report-management-page .rpt-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 11px !important;
}

body.report-management-page .rpt-table th {
    background: #f8fafc !important;
    padding: 3px 6px !important;
    text-align: left !important;
    font-weight: 700 !important;
    color: #64748b !important;
    font-size: 9.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

body.report-management-page .rpt-table td {
    padding: 3px 6px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #334155 !important;
    vertical-align: middle !important;
}

/* ── Tab 3: Generate Reports Center ──────────────────────────────────────── */
body.report-management-page .rpt-gen-header {
    background: linear-gradient(135deg, #ffffff 0%, var(--agri-green-light, #E8F5E9) 100%) !important;
    border: 1px solid var(--green-border, #cde3bc) !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    margin-bottom: 6px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

body.report-management-page .rpt-gen-header-title {
    font-size: 12.5px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
}

body.report-management-page .rpt-gen-header-desc {
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    margin-top: 1px !important;
    max-width: 620px !important;
    color: #64748b !important;
}

body.report-management-page .rpt-gen-modal-trigger {
    background: var(--agri-green, #2E7D32) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 5px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

body.report-management-page .rpt-cards-grid-5 {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 6px !important;
}

body.report-management-page .rpt-export-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
    box-sizing: border-box !important;
}

body.report-management-page .rpt-export-card-top {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 4px !important;
}

body.report-management-page .rpt-export-card-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
}

body.report-management-page .rpt-export-card-icon svg {
    width: 15px !important;
    height: 15px !important;
}

body.report-management-page .rpt-export-card-title {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
}

body.report-management-page .rpt-export-card-desc {
    font-size: 10px !important;
    color: #64748b !important;
    line-height: 1.25 !important;
    margin-top: 1px !important;
}

body.report-management-page .rpt-export-card-meta {
    font-size: 9px !important;
    color: #94a3b8 !important;
    margin: 4px 0 6px !important;
    padding: 3px 6px !important;
    border-top: 1px dashed #f1f5f9 !important;
}

body.report-management-page .rpt-card-actions {
    display: flex !important;
    gap: 5px !important;
}

body.report-management-page .rpt-card-actions .btn-action-csv,
body.report-management-page .rpt-card-actions .btn-action-pdf,
body.report-management-page .btn-action-csv,
body.report-management-page .btn-action-pdf {
    height: 25px !important;
    padding: 0 8px !important;
    font-size: 10.5px !important;
    border-radius: 4px !important;
}

body.report-management-page .rpt-modal-box {
    padding: 14px 18px !important;
    border-radius: 8px !important;
    max-width: 480px !important;
}

body.report-management-page .rpt-modal-title {
    font-size: 14px !important;
    margin-bottom: 2px !important;
}

body.report-management-page .rpt-modal-sub {
    font-size: 10.5px !important;
    margin-bottom: 10px !important;
}

body.report-management-page .rpt-modal-grid {
    gap: 6px 8px !important;
    margin-bottom: 10px !important;
}

body.report-management-page .rpt-modal-field label {
    font-size: 9.5px !important;
    margin-bottom: 2px !important;
}

body.report-management-page .rpt-modal-field select,
body.report-management-page .rpt-modal-field input {
    height: 26px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    border-radius: 4px !important;
}

/* ==========================================================================
   SYSTEM-WIDE KPI & STAT CARD UNIFIED DESIGN SYSTEM
   - Split-Accent Top Border: #FACC15 (Solid Yellow) -> #0B132B (Navy Blue)
   - Uniform Icon Styling: #0B132B background with #FACC15 icon
   - High Contrast Typography: Solid Black (#000000) for labels & values
   - Grid Alignment & Card Cleanliness
   ========================================================================== */

/* 1. Split-Accent Top Border on all KPI / Stat cards across the system */
.kpi-banner-card::before,
.rpt-card::before,
.booking-stat-card::before,
.mgmt-stat-compact-card::before,
.tractor-stat-card::before,
.driver-stat-card::before,
.user-stat-card::before,
.summary-card::before,
.stat-card::before,
.it-metric-card::before,
.it-stat-card::before,
.it-user-stat-card::before,
.w-stat-card::before,
.m-stat-card::before,
.flt-kpi-card::before,
.kpi-card::before,
body .kpi-banner-card::before,
body .rpt-card::before,
body .booking-stat-card::before,
body .mgmt-stat-compact-card::before,
body .tractor-stat-card::before,
body .driver-stat-card::before,
body .user-stat-card::before,
body .summary-card::before,
body.admin-dashboard .stat-card::before,
body.admin-dashboard .w-stat-card::before,
body.admin-dashboard .tractor-stat-card::before,
body.admin-dashboard .booking-stat-card::before,
body.report-management-page .rpt-card::before,
body.geofence-management .summary-card::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2.5px !important;
    background: linear-gradient(90deg, #FACC15 0%, #0B132B 100%) !important;
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
    z-index: 2 !important;
}

/* 2. High-Contrast Solid Black Typography for Labels */
.kpi-banner-label,
.rpt-card-lbl,
.booking-stat-label,
.mgmt-stat-compact-label,
.tractor-stat-label,
.driver-stat-label,
.user-stat-card span,
.summary-label,
.stat-label,
.it-metric-label,
.it-stat-label,
.it-user-stat-label,
.w-stat-label,
.m-stat-label,
.flt-kpi-lbl,
.kpi-lbl,
body .kpi-banner-label,
body .rpt-card-lbl,
body .booking-stat-label,
body .mgmt-stat-compact-label,
body .tractor-stat-label,
body .driver-stat-label,
body.report-management-page .rpt-card-lbl,
body.admin-dashboard .stat-label,
body.admin-dashboard .tractor-stat-card span,
body.geofence-management .summary-label {
    color: #000000 !important;
    font-weight: 700 !important;
}

/* 3. High-Contrast Solid Black Typography for Values & Numbers */
.kpi-banner-val,
.kpi-banner-val *,
.kpi-banner-unit,
.kpi-banner-sub-inline,
.rpt-card-val,
.booking-stat-num,
.booking-stat-val,
.booking-stat-desc,
.mgmt-stat-compact-val,
.tractor-stat-number,
.tractor-stat-sub-inline,
.driver-stat-number,
.driver-stat-sub-inline,
.user-stat-card strong,
.summary-value,
.summary-val,
.stat-value,
.stat-number,
.it-metric-value,
.it-stat-val,
.it-user-stat-val,
.w-stat-value,
.m-stat-value,
.flt-kpi-val,
.kpi-val,
body .kpi-banner-val,
body .rpt-card-val,
body .booking-stat-num,
body .mgmt-stat-compact-val,
body .tractor-stat-number,
body .driver-stat-number,
body.report-management-page .rpt-card-val,
body.admin-dashboard .stat-value,
body.admin-dashboard .tractor-stat-card strong,
body.geofence-management .summary-value {
    color: #000000 !important;
    font-weight: 800 !important;
}

/* 4. Standardized Uniform Icon Containers: Navy Blue (#0B132B) + Solid Yellow (#FACC15) */
.kpi-banner-icon,
.kpi-banner-icon-box,
.rpt-card-icon,
.booking-stat-icon,
.mgmt-stat-compact-icon,
.tractor-stat-icon,
.driver-stat-icon,
.summary-icon-box,
.stat-icon,
.it-metric-icon,
.it-stat-icon,
.it-user-stat-icon,
.flt-kpi-icon,
.command-kpi-grid .kpi-banner-icon,
.command-kpi-grid .kpi-banner-icon-box,
body.report-management-page .rpt-card-icon,
body.geofence-management .summary-icon-box {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    background: #0B132B !important;
    background-color: #0B132B !important;
    border: none !important;
    border-radius: 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    opacity: 1 !important;
    box-shadow: 0 1px 3px rgba(11, 19, 43, 0.15) !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
}

.kpi-banner-icon svg,
.kpi-banner-icon i,
.kpi-banner-icon-box svg,
.kpi-banner-icon-box i,
.rpt-card-icon svg,
.rpt-card-icon i,
.booking-stat-icon svg,
.booking-stat-icon i,
.mgmt-stat-compact-icon svg,
.mgmt-stat-compact-icon i,
.tractor-stat-icon svg,
.tractor-stat-icon i,
.driver-stat-icon svg,
.driver-stat-icon i,
.summary-icon-box svg,
.summary-icon-box i,
.stat-icon svg,
.stat-icon i,
.it-metric-icon svg,
.it-metric-icon i,
.it-stat-icon svg,
.it-stat-icon i,
.it-user-stat-icon svg,
.it-user-stat-icon i,
.flt-kpi-icon svg,
.flt-kpi-icon i,
.command-kpi-grid .kpi-banner-icon svg,
.command-kpi-grid .kpi-banner-icon-box svg,
body.report-management-page .rpt-card-icon svg,
body.geofence-management .summary-icon-box svg {
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    color: #FACC15 !important;
    stroke: #FACC15 !important;
    fill: none !important;
    stroke-width: 2 !important;
    display: block !important;
}

/* ============================================================
   11. Unified Map Viewport Expander Engine (Big Window & Fullscreen)
   ============================================================ */
body.map-big-window-open {
    overflow: hidden !important;
}

/* Stacking Context Reset: Ensure floating map window and backdrop cleanly elevate above headers and sidebars */
body.map-big-window-open .layout,
body.map-big-window-open .w-layout,
body.map-big-window-open .content,
body.map-big-window-open .w-content,
body.map-big-window-open .main-content,
body.map-big-window-open .content-inner,
body.map-big-window-open .w-content-inner,
body.map-big-window-open .main-container,
body.map-big-window-open .command-hero-grid,
body.map-big-window-open .hero-map-col,
body.map-big-window-open .desktop-grid {
    z-index: auto !important;
}

/* Ensure sticky topbar and sidebar remain beneath the floating window & backdrop */
body.map-big-window-open .topbar,
body.map-big-window-open .w-topbar,
body.map-big-window-open body.admin-dashboard .topbar,
body.map-big-window-open body.command-center-page .topbar {
    z-index: 10 !important;
}
body.map-big-window-open .sidebar,
body.map-big-window-open .w-sidebar,
body.map-big-window-open body.admin-sidebar-ui .sidebar {
    z-index: 10 !important;
}

.map-big-window-backdrop {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(10, 25, 49, 0.72) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    z-index: 99995 !important;
    opacity: 0;
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}
.map-big-window-backdrop.active {
    display: block !important;
    opacity: 1 !important;
}

/* ── Leaflet Viewport Expander Controls (Big Window & Fullscreen Control on Map) ── */
.leaflet-control-map-expander.leaflet-bar {
    margin-top: 6px !important;
    margin-left: 10px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    z-index: 800 !important;
}

.map-expander-buttons {
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25) !important;
    overflow: hidden !important;
    z-index: 2 !important;
}

.map-expander-buttons a.leaflet-control-btn {
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #ffffff !important;
    color: #1e293b !important;
    border-bottom: 1px solid #e2e8f0 !important;
    cursor: pointer !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.leaflet-touch .map-expander-buttons a.leaflet-control-btn {
    width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
}

.map-expander-buttons a.leaflet-control-btn:last-child {
    border-bottom: none !important;
}

.map-expander-buttons a.leaflet-control-btn:hover,
.map-expander-buttons a.leaflet-control-btn.is-hovered {
    background-color: #f1f5f9 !important;
    color: #0284c7 !important;
}

.map-expander-buttons a.btn-fullscreen-view {
    color: #0284c7 !important;
}

.map-expander-buttons a.leaflet-control-btn svg,
.map-expander-buttons a.leaflet-control-btn i {
    width: 15px !important;
    height: 15px !important;
    stroke: currentColor !important;
    stroke-width: 2.2 !important;
    display: inline-block !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.leaflet-touch .map-expander-buttons a.leaflet-control-btn svg,
.leaflet-touch .map-expander-buttons a.leaflet-control-btn i {
    width: 17px !important;
    height: 17px !important;
}

.map-expander-buttons a.leaflet-control-btn .btn-icon-holder {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

/* Expand View active state (Big Window Mode Active) */
.map-expander-buttons a.btn-expand-window.is-active {
    background-color: #e0f2fe !important;
    color: #0284c7 !important;
}
.map-expander-buttons a.btn-expand-window.is-active:hover {
    background-color: #bae6fd !important;
    color: #0369a1 !important;
}

/* Full Screen View active state (Monitor Fullscreen Active) */
.map-expander-buttons a.btn-fullscreen-view.is-active {
    background-color: #fef08a !important;
    color: #854d0e !important;
}
.map-expander-buttons a.btn-fullscreen-view.is-active:hover {
    background-color: #fde047 !important;
    color: #713f12 !important;
}

/* Slide-out Label Panel to the Right (Individual Hover Floating Tooltips) */
.map-expander-slide-panel {
    position: absolute !important;
    left: calc(100% + 5px) !important;
    top: 0 !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    opacity: 1 !important;
    pointer-events: none !important;
    transform: none !important;
    z-index: 1005 !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

.slide-panel-item {
    height: 30px !important;
    min-height: 30px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 0 10px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    cursor: pointer !important;
    user-select: none !important;
    box-sizing: border-box !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(-8px) scale(0.97) !important;
    transform-origin: left center !important;
    transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.15s ease, color 0.15s ease !important;
    position: relative !important;
}

/* Invisible hover bridge to prevent flicker when moving cursor between button and panel */
.slide-panel-item::before {
    content: '' !important;
    position: absolute !important;
    right: 100% !important;
    top: 0 !important;
    width: 8px !important;
    height: 100% !important;
    background: transparent !important;
}

/* Slide out ONLY the individual panel of the specific icon being hovered */
.leaflet-control-map-expander:has(.btn-expand-window:hover) #slideLabelExpand,
.leaflet-control-map-expander:has(.btn-expand-window:hover) .slide-item-expand,
.slide-panel-item#slideLabelExpand:hover,
.slide-panel-item.slide-item-expand:hover,
.slide-panel-item#slideLabelExpand.is-hovered,
.slide-panel-item.slide-item-expand.is-hovered {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(0) scale(1) !important;
}

.leaflet-control-map-expander:has(.btn-fullscreen-view:hover) #slideLabelFullscreen,
.leaflet-control-map-expander:has(.btn-fullscreen-view:hover) .slide-item-fs,
.slide-panel-item#slideLabelFullscreen:hover,
.slide-panel-item.slide-item-fs:hover,
.slide-panel-item#slideLabelFullscreen.is-hovered,
.slide-panel-item.slide-item-fs.is-hovered {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(0) scale(1) !important;
}

.leaflet-control-map-expander:has(.btn-map-filters:hover) #slideLabelFilter,
.slide-panel-item#slideLabelFilter:hover,
.slide-panel-item#slideLabelFilter.is-hovered {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(0) scale(1) !important;
}

.leaflet-touch .slide-panel-item {
    height: 34px !important;
    min-height: 34px !important;
}

.slide-panel-divider {
    display: none !important;
}

.slide-panel-text {
    letter-spacing: -0.01em !important;
}

.slide-panel-badge {
    font-size: 9px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    background: #f1f5f9 !important;
    padding: 1.5px 6px !important;
    border-radius: 4px !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    transition: all 0.15s ease !important;
}

/* Row 1 / Expand hover */
.slide-panel-item#slideLabelExpand:hover,
.slide-panel-item.slide-item-expand:hover,
.slide-panel-item#slideLabelExpand.is-hovered,
.slide-panel-item.slide-item-expand.is-hovered {
    background-color: #f0f9ff !important;
    color: #0284c7 !important;
}
.slide-panel-item#slideLabelExpand:hover .slide-panel-badge,
.slide-panel-item.slide-item-expand:hover .slide-panel-badge,
.slide-panel-item#slideLabelExpand.is-hovered .slide-panel-badge,
.slide-panel-item.slide-item-expand.is-hovered .slide-panel-badge {
    background-color: #e0f2fe !important;
    color: #0369a1 !important;
}

/* Row 2 / Fullscreen hover */
.slide-panel-item#slideLabelFullscreen:hover,
.slide-panel-item.slide-item-fs:hover,
.slide-panel-item#slideLabelFullscreen.is-hovered,
.slide-panel-item.slide-item-fs.is-hovered {
    background-color: #fefce8 !important;
    color: #854d0e !important;
}
.slide-panel-item#slideLabelFullscreen:hover .slide-panel-badge,
.slide-panel-item.slide-item-fs:hover .slide-panel-badge,
.slide-panel-item#slideLabelFullscreen.is-hovered .slide-panel-badge,
.slide-panel-item.slide-item-fs.is-hovered .slide-panel-badge {
    background-color: #fef08a !important;
    color: #713f12 !important;
}

/* Big Window Floating Modal in-page overlay (nearly covering the whole page) */
.map-container.is-big-window,
.card-map-hero.is-big-window,
.zone-map-workspace.is-big-window,
[data-map-container].is-big-window {
    position: fixed !important;
    top: clamp(16px, 3.5vh, 32px) !important;
    bottom: clamp(16px, 3.5vh, 32px) !important;
    left: clamp(16px, 3.5vw, 48px) !important;
    right: clamp(16px, 3.5vw, 48px) !important;
    width: auto !important;
    height: auto !important;
    max-width: 1720px !important;
    max-height: 980px !important;
    min-height: 0 !important;
    margin: auto !important;
    padding: 10px 14px 14px 14px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    box-shadow: 0 25px 65px -10px rgba(10, 25, 49, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.3), 0 12px 28px -4px rgba(0, 0, 0, 0.25) !important;
    z-index: 99998 !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    animation: bigWindowZoomIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden !important;
}

@keyframes bigWindowZoomIn {
    0% { opacity: 0; transform: scale(0.96); }
    100% { opacity: 1; transform: scale(1); }
}

/* Floating Window Header Styling */
.card-map-hero.is-big-window .map-hero-header {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 2px 8px 2px !important;
    margin-bottom: 8px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}
.card-map-hero.is-big-window .map-hero-header .card-title {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #0A1931 !important;
}
.card-map-hero.is-big-window .dash-map-btn {
    height: 28px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
}
.card-map-hero.is-big-window .dash-map-btn.btn-expand-window.is-active,
.map-container.is-big-window .btn-expand-window.is-active {
    background: #0f172a !important;
    color: #ffffff !important;
    border-color: #0f172a !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25) !important;
}
.card-map-hero.is-big-window .dash-map-btn.btn-expand-window.is-active:hover,
.map-container.is-big-window .btn-expand-window.is-active:hover {
    background: #dc2626 !important;
    border-color: #b91c1c !important;
    color: #ffffff !important;
}

/* Ensure map child containers expand to fill 100% height in Floating Window */
.map-container.is-big-window #live-map,
.card-map-hero.is-big-window .dashboard-map-container,
.zone-map-workspace.is-big-window #zoneMap,
[data-map-container].is-big-window .leaflet-container {
    width: 100% !important;
    flex: 1 1 0% !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 8px !important;
}

@media (max-width: 768px) {
    .map-container.is-big-window,
    .card-map-hero.is-big-window,
    .zone-map-workspace.is-big-window,
    [data-map-container].is-big-window {
        top: 10px !important;
        bottom: 10px !important;
        left: 8px !important;
        right: 8px !important;
        padding: 8px !important;
        border-radius: 10px !important;
    }
    .card-map-hero.is-big-window .map-hero-header {
        height: auto !important;
        min-height: 36px !important;
        max-height: none !important;
        flex-wrap: wrap !important;
    }
}

/* Native Monitor Full Screen View */
.map-container:fullscreen,
.map-container:-webkit-full-screen,
.map-container.is-native-fullscreen,
.card-map-hero:fullscreen,
.card-map-hero:-webkit-full-screen,
.card-map-hero.is-native-fullscreen,
.zone-map-workspace:fullscreen,
.zone-map-workspace:-webkit-full-screen,
.zone-map-workspace.is-native-fullscreen,
[data-map-container]:fullscreen,
[data-map-container]:-webkit-full-screen,
[data-map-container].is-native-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    border: none !important;
    margin: 0 !important;
    padding: 8px 10px 10px 10px !important;
    background: #ffffff !important;
    z-index: 2147483647 !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

/* Ensure map child containers expand in native Fullscreen */
.map-container:fullscreen #live-map,
.map-container:-webkit-full-screen #live-map,
.map-container.is-native-fullscreen #live-map,
.card-map-hero:fullscreen .dashboard-map-container,
.card-map-hero:-webkit-full-screen .dashboard-map-container,
.card-map-hero.is-native-fullscreen .dashboard-map-container,
.zone-map-workspace:fullscreen #zoneMap,
.zone-map-workspace:-webkit-full-screen #zoneMap,
.zone-map-workspace.is-native-fullscreen #zoneMap,
[data-map-container]:fullscreen .leaflet-container,
[data-map-container]:-webkit-full-screen .leaflet-container,
[data-map-container].is-native-fullscreen .leaflet-container {
    width: 100% !important;
    flex: 1 1 0% !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
}

/* Toolbar / Header Flex Resiliency */
.map-hero-header,
body.auxiliary-dashboard .aux-map-card .map-hero-header,
.aux-dashboard-grid .aux-map-card .map-hero-header,
#auxHeroMapCard .map-hero-header {
    height: auto !important;
    min-height: 30px !important;
    max-height: none !important;
    flex-wrap: wrap !important;
    row-gap: 6px !important;
    margin-bottom: 12px !important;
}
.map-hero-actions {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}

/* Expand View button styling (Sky / Ocean Blue) */
.btn-expand-window,
.map-toolbar button.btn-expand-window,
.map-hero-actions .btn-expand-window,
.dash-map-btn.btn-expand-window,
.tool-btn.btn-expand-window {
    background: #0284c7 !important;
    border-color: #0369a1 !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}
.btn-expand-window:hover,
.map-toolbar button.btn-expand-window:hover,
.map-hero-actions .btn-expand-window:hover,
.dash-map-btn.btn-expand-window:hover,
.tool-btn.btn-expand-window:hover {
    background: #0369a1 !important;
    border-color: #075985 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3) !important;
    transform: translateY(-1px) !important;
}
.btn-expand-window.is-active,
.map-toolbar button.btn-expand-window.is-active,
.map-hero-actions .btn-expand-window.is-active,
.dash-map-btn.btn-expand-window.is-active,
.tool-btn.btn-expand-window.is-active {
    background: #e0f2fe !important;
    border-color: #0284c7 !important;
    color: #0369a1 !important;
    box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.25) !important;
}

/* Full Screen View button styling (USTP Navy & Gold) */
.btn-fullscreen-view,
.map-toolbar button.btn-fullscreen-view,
.map-hero-actions .btn-fullscreen-view,
.dash-map-btn.btn-fullscreen-view,
.tool-btn.btn-fullscreen-view {
    background: #0A1931 !important;
    border-color: #1e293b !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}
.btn-fullscreen-view:hover,
.map-toolbar button.btn-fullscreen-view:hover,
.map-hero-actions .btn-fullscreen-view:hover,
.dash-map-btn.btn-fullscreen-view:hover,
.tool-btn.btn-fullscreen-view:hover {
    background: #142746 !important;
    border-color: #F4B41A !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(10, 25, 49, 0.35) !important;
    transform: translateY(-1px) !important;
}
.btn-fullscreen-view.is-active,
.map-toolbar button.btn-fullscreen-view.is-active,
.map-hero-actions .btn-fullscreen-view.is-active,
.dash-map-btn.btn-fullscreen-view.is-active,
.tool-btn.btn-fullscreen-view.is-active {
    background: #fef08a !important;
    border-color: #eab308 !important;
    color: #854d0e !important;
    box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.3) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   12. GEOFENCE MAP LANDSCAPE, EXPAND/FULLSCREEN & VERTICAL DOCK TOOLS
   ═══════════════════════════════════════════════════════════════════════ */

/* Modal Title Map Pin Badge */
.modal-title-pin-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    background: rgba(22, 163, 74, 0.12) !important;
    color: #16a34a !important;
    flex-shrink: 0 !important;
}
.modal-title-pin-badge svg {
    width: 16px !important;
    height: 16px !important;
    stroke: #16a34a !important;
}

/* Zone Map Floating Action Bar (Top Right) */
.zone-map-floating-bar {
    position: absolute !important;
    top: 12px !important;
    right: 14px !important;
    z-index: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    pointer-events: auto !important;
}

.zone-map-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(10, 25, 49, 0.25) !important;
    transition: all 0.15s ease !important;
    line-height: 1 !important;
    border: 1px solid transparent !important;
}

/* Zone Map Workspace Big Window Mode - Functioning identically to Admin Dashboard map */
.zone-map-workspace.is-big-window {
    position: fixed !important;
    top: clamp(16px, 3.5vh, 32px) !important;
    bottom: clamp(16px, 3.5vh, 32px) !important;
    left: clamp(16px, 3.5vw, 48px) !important;
    right: clamp(16px, 3.5vw, 48px) !important;
    width: auto !important;
    height: auto !important;
    max-width: 1720px !important;
    max-height: 980px !important;
    min-height: 0 !important;
    margin: auto !important;
    padding: 10px 14px 14px 14px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    box-shadow: 0 25px 65px -10px rgba(10, 25, 49, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.3), 0 12px 28px -4px rgba(0, 0, 0, 0.25) !important;
    z-index: 100020 !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    animation: bigWindowZoomIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.zone-map-workspace.is-big-window #zoneMap,
.zone-map-workspace:fullscreen #zoneMap,
.zone-map-workspace:-webkit-full-screen #zoneMap {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    flex: 1 1 0% !important;
    border: none !important;
    border-radius: 8px !important;
}

.zone-map-workspace.is-big-window .map-coordinates-badge,
.zone-map-workspace:fullscreen .map-coordinates-badge {
    left: 215px !important;
    bottom: 18px !important;
    z-index: 500 !important;
}

/* Vertical Dock for the 6 Geofence Buttons on Side in Expand / Fullscreen Mode */
.geofence-toolbox-container.is-expanded-vertical-dock {
    position: absolute !important;
    top: 58px !important;
    left: 20px !important;
    z-index: 500 !important;
    width: 180px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1.2px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 12px !important;
    padding: 10px !important;
    box-shadow: 0 12px 36px -4px rgba(10, 25, 49, 0.35) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    max-height: calc(100% - 130px) !important;
    overflow-y: auto !important;
    animation: geofenceDockIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) both !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}
    border-radius: 12px !important;
    padding: 10px !important;
    box-shadow: 0 12px 36px -4px rgba(10, 25, 49, 0.35) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    max-height: calc(100% - 130px) !important;
    overflow-y: auto !important;
    animation: geofenceDockIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

@keyframes geofenceDockIn {
    from {
        opacity: 0;
        transform: translateX(-16px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.geofence-toolbox-container.is-expanded-vertical-dock .dock-header {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: #475569 !important;
    padding: 2px 4px 6px 4px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    margin-bottom: 2px !important;
}

.geofence-toolbox-container.is-expanded-vertical-dock .toolbox-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 0 !important;
}

.geofence-toolbox-container.is-expanded-vertical-dock .tool-btn {
    width: 100% !important;
    min-height: 36px !important;
    padding: 7px 12px !important;
    justify-content: flex-start !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-align: left !important;
    transition: transform 0.15s ease, filter 0.15s ease !important;
}

.geofence-toolbox-container.is-expanded-vertical-dock .tool-btn:hover {
    transform: translateX(2px) !important;
    filter: brightness(1.08) !important;
}

.geofence-toolbox-container.is-expanded-vertical-dock .polygon-status-bar {
    margin: 4px 0 0 0 !important;
    font-size: 11px !important;
    padding: 6px 8px !important;
    border-radius: 6px !important;
}