/* ============================================================
   ParkAxle Smart Parking Platform — Theme Root
   Shared design tokens & component styles used by ALL themes
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root{
    /* Typography — Compact Enterprise */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-secondary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-xs: 11.5px;
    --font-sm: 12.5px;
    --font-base: 13.5px;
    --font-md: 14px;
    --font-lg: 15px;
    --font-xl: 17px;
    --font-2xl: 20px;
    --font-3xl: 24px;
    --font-4xl: 32px;
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Enterprise Color Palette — Cool Neutral */
    --primary: #0f172a;
    --primary-rgb: 15, 23, 42;
    --primary-dark: #000000;
    --primary-light: #334155;

    --accent: #d4af37;
    --accent-dark: #b5952f;
    --accent-light: #fef08a;

    /* Surface & Backgrounds — Clean, flat */
    --body-bg: #f1f3f5;
    --body-bg-gradient: #f1f3f5;
    --card-bg: #ffffff;
    --card-bg-gradient: #ffffff;
    --sidebar-bg: #faf9f7;
    --header-bg: #ffffff;

    --text-primary: #1a1a2e;
    --text-secondary: #5a6178;
    --text-muted: #8b92a5;

    --border-color: #e2e5ea;
    --border-light: rgba(0, 0, 0, 0.06);

    /* Accents / Status */
    --accent-success: #16a34a;
    --accent-warning: #d97706;
    --accent-danger: #dc2626;
    --accent-info: #2563eb;

    /* Spacing — Comfortable Enterprise */
    --space-xs: 4px;
    --space-sm: 6px;
    --space-md: 8px;
    --space-base: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-2xl: 28px;
    --space-3xl: 36px;
    --space-4xl: 48px;

    /* Border Radius — Clean Enterprise */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 10px;
    --radius-full: 50%;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.35s ease;

    /* Shadows — Subtle, functional */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.10);
    --shadow-glow: none;

    /* Z-index scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /* Layout — Compact */
    --header-height: 48px;
    --sidebar-width: 220px;
    --sidebar-collapsed-width: 48px;

    /* Containers */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;

    /* Form — Enterprise Controls */
    --input-height: 32px;
    --btn-height: 32px;
    --input-padding: 6px 10px;

    /* Shared Grays — Cool Neutral */
    --gray-50: #f8f9fa;
    --gray-100: #f1f3f5;
    --gray-200: #e2e5ea;
    --gray-300: #ced3da;
    --gray-400: #98a1b0;
    --gray-500: #6b7385;
    --gray-600: #4a5063;
    --gray-700: #343a4d;
    --gray-800: #21263a;
    --gray-900: #11141f;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*,
*::before,
*::after{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html{
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body{
    font-family: var(--font-primary);
    font-size: var(--font-base);
    font-weight: var(--font-regular);
    line-height: 1.4;
    color: var(--text-primary);
    background: var(--body-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

a{
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover{
    color: var(--primary-dark);
}

img{
    max-width: 100%;
    height: auto;
    display: block;
    border: 0;
}

table{
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

ul,
ol{
    list-style: none;
}

input,
select,
textarea,
button{
    font-family: inherit;
    font-size: inherit;
    outline: none;
}

button{
    cursor: pointer;
    border: none;
    background: none;
}

h1,
h2,
h3,
h4,
h5,
h6{
    font-family: var(--font-primary);
    font-weight: var(--font-semibold);
    line-height: 1.25;
    color: var(--text-primary);
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

/* --- Margin --- */
.m-0{ margin: 0 !important; }
.m-1{ margin: var(--space-xs) !important; }
.m-2{ margin: var(--space-sm) !important; }
.m-3{ margin: var(--space-base) !important; }
.m-4{ margin: var(--space-xl) !important; }
.m-5{ margin: var(--space-2xl) !important; }
.ml-2{ margin-left: var(--space-sm) !important; }

/* --- Padding --- */
.p-0{ padding: 0 !important; }
.p-1{ padding: var(--space-xs) !important; }
.p-2{ padding: var(--space-sm) !important; }
.p-3{ padding: var(--space-base) !important; }
.p-4{ padding: var(--space-xl) !important; }
.p-5{ padding: var(--space-2xl) !important; }

/* --- Display --- */
.d-flex{ display: flex !important; }
.d-none{ display: none !important; }
.d-block{ display: block !important; }
.d-inline{ display: inline !important; }
.d-inline-flex{ display: inline-flex !important; }
.d-grid{ display: grid !important; }

.flex-wrap{ flex-wrap: wrap !important; }
.align-end{ align-items: flex-end !important; }

/* --- Text --- */
.text-center{ text-align: center !important; }
.text-right{ text-align: right !important; }
.text-left{ text-align: left !important; }
.font-semibold{ font-weight: var(--font-semibold) !important; }

.text-sm{ font-size: var(--font-sm) !important; }
.text-base{ font-size: var(--font-base) !important; }
.text-md{ font-size: var(--font-md) !important; }
.text-lg{ font-size: var(--font-lg) !important; }
.text-xl{ font-size: var(--font-xl) !important; }

.text-primary{ color: var(--primary) !important; }
.text-success{ color: var(--accent-success) !important; }
.text-danger{ color: var(--accent-danger) !important; }
.text-warning{ color: var(--accent-warning) !important; }
.text-info{ color: var(--accent-info) !important; }
.text-muted{ color: var(--text-muted) !important; }
.text-secondary{ color: var(--text-secondary) !important; }

/* --- Border --- */
.rounded{ border-radius: var(--radius-md) !important; }

/* --- Position --- */
.relative{ position: relative !important; }
.absolute{ position: absolute !important; }

/* ============================================================
   STATUS BADGES
   ============================================================ */
.badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: var(--font-semibold);
    padding: 1px 6px;
    border-radius: 3px;
    line-height: 1.5;
    white-space: nowrap;
    letter-spacing: 0.2px;
}

.badge-success{
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.badge-warning{
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

.badge-danger{
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

.badge-info{
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}

.badge-dark{
    background: var(--gray-800);
    color: #ffffff;
}

.badge-primary{
    background: rgba(var(--primary-rgb, 67, 56, 202), 0.12);
    color: var(--primary);
}

.badge-light{
    background: var(--gray-100);
    color: var(--gray-600);
}

.badge-orange{
    background: rgba(234, 88, 12, 0.12);
    color: #c2410c;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--btn-height);
    padding: 0 14px;
    font-family: var(--font-primary);
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    text-decoration: none;
    line-height: 1;
    position: relative;
    overflow: hidden;
}

.btn:active{
    transform: scale(0.98);
}

.btn:disabled{
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.btn-primary{
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}

.btn-primary:hover{
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.btn-danger{
    background: var(--accent-danger);
    color: #ffffff;
    border-color: var(--accent-danger);
}

.btn-danger:hover{
    background: #dc2626;
    border-color: #dc2626;
}

.btn-success{
    background: var(--accent-success);
    color: #ffffff;
    border-color: var(--accent-success);
}

.btn-success:hover{
    background: #059669;
    border-color: #059669;
}

.btn-outline{
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline:hover{
    background: var(--primary);
    color: #ffffff;
}

.btn-sm{
    height: 22px;
    padding: 0 6px;
    font-size: 10.5px;
    border-radius: var(--radius-sm);
}

.btn-icon{
    width: var(--btn-height);
    padding: 0;
    justify-content: center;
}

.btn-icon.btn-sm{
    width: 22px;
}

.btn-block{
    width: 100%;
    display: flex;
    justify-content: center;
}

/* ── Table Action Button Row ──────────────────────────────── */
.action-btns{
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: nowrap;
}

/* ── Outline Color Variants ───────────────────────────────── */
.btn-outline-info{
    background: transparent;
    color: var(--accent-info, #0ea5e9);
    border-color: var(--accent-info, #0ea5e9);
}

.btn-outline-info:hover{
    background: var(--accent-info, #0ea5e9);
    color: #ffffff;
}

.btn-outline-warning{
    background: transparent;
    color: var(--accent-warning, #f59e0b);
    border-color: var(--accent-warning, #f59e0b);
}

.btn-outline-warning:hover{
    background: var(--accent-warning, #f59e0b);
    color: #ffffff;
}

.btn-outline-success{
    background: transparent;
    color: var(--accent-success, #10b981);
    border-color: var(--accent-success, #10b981);
}

.btn-outline-success:hover{
    background: var(--accent-success, #10b981);
    color: #ffffff;
}

.btn-outline-danger{
    background: transparent;
    color: var(--accent-danger, #ef4444);
    border-color: var(--accent-danger, #ef4444);
}

.btn-outline-danger:hover{
    background: var(--accent-danger, #ef4444);
    color: #ffffff;
}

.btn-outline-primary{
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline-primary:hover{
    background: var(--primary);
    color: #ffffff;
}

.btn-outline-sm{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 10px;
    background: transparent;
    color: var(--primary);
    border: 1px dashed rgba(var(--primary-rgb), 0.35);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: var(--font-xs);
    font-weight: var(--font-medium);
    transition: all var(--transition-fast);
}
.btn-outline-sm:hover{
    background: rgba(var(--primary-rgb), 0.06);
    border-color: var(--primary);
    border-style: solid;
}

/* ── Mini Table (inline compact table for popups) ────────── */
.mini-table{
    border-collapse: collapse;
    font-size: var(--font-sm);
    width: 100%;
    margin-bottom: 10px;
}
.mini-table th,
.mini-table td{
    padding: 7px 10px;
    text-align: left;
    border-bottom: 1px solid var(--gray-100);
}
.mini-table th{
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.mini-table tbody tr:hover{
    background: var(--gray-50);
}
.mini-table .col-action{
    width: 40px;
}

/* ── Operating Days Pill Toggles ─────────────────────────── */
.operating-days-row{
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    padding: 2px 0;
}
.op-day-pill{
    position: relative;
    cursor: pointer;
    user-select: none;
}
.op-day-pill input[type="checkbox"]{
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.op-day-pill-label{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 28px;
    padding: 0 10px;
    font-size: 11px;
    font-weight: var(--font-semibold);
    letter-spacing: 0.02em;
    border-radius: var(--radius-sm);
    border: 1px solid var(--gray-200);
    background: var(--card-bg);
    color: var(--text-muted);
    transition: all 0.15s ease;
}
.op-day-pill input[type="checkbox"]:checked + .op-day-pill-label{
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}
.op-day-pill:hover .op-day-pill-label{
    border-color: rgba(var(--primary-rgb), 0.4);
    background: rgba(var(--primary-rgb), 0.04);
}
.op-day-pill input[type="checkbox"]:checked:hover + .op-day-pill-label{
    background: var(--primary-dark);
}
.op-day-pill input[type="checkbox"]:focus-visible + .op-day-pill-label{
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

/* ── Closed Days Section ─────────────────────────────────── */
.closed-days-section{
    margin-top: var(--space-base);
    margin-bottom: var(--space-base);
}
.closed-days-empty{
    margin-bottom: 10px;
}
.recurring-annual-icon{
    color: var(--primary);
    font-size: 11px;
}
.remove-row-btn{
    background: transparent;
    border: none;
    color: var(--danger);
    cursor: pointer;
    font-size: 14px;
    padding: 4px;
}

/* ── Floor Row ───────────────────────────────────────────── */
.floor-row{
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
    align-items: flex-end;
}
.floor-row .form-field-wrap{
    margin-bottom: 0;
}
.floor-col-name{ flex: 2; }
.floor-col-code,
.floor-col-level{ flex: 1; }
.floor-col-action{
    flex: 0 0 32px;
    padding-bottom: 1px;
    text-align: center;
}
.removeFloorBtn{
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    color: var(--gray-400);
    font-size: 12px;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.removeFloorBtn:hover{
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--accent-danger);
}
.floorsConfigWrap{
    margin-bottom: 14px;
    padding: 10px 12px;
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-sm);
}
.form-hint-inline{
    display: inline;
    margin-left: 4px;
}
.unit-type-spacer{
    margin-bottom: 14px;
}

/* ============================================================
   FORM COMPONENTS
   ============================================================ */
.form-field-wrap{
    margin-bottom: 10px;
    position: relative;
}

.form-type{
    display: block;
    font-family: var(--font-primary);
    font-size: var(--font-xs);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    margin-bottom: 4px;
    line-height: 1.3;
}

.form-type-xs{ font-size: var(--font-xs); margin-bottom: 4px; }
.form-field-compact{ margin: 0; }

.form-type .text-danger{
    color: var(--accent-danger);
}

.frm-txtbox{
    width: 100%;
    height: var(--input-height);
    padding: var(--input-padding);
    font-family: var(--font-primary);
    font-size: var(--font-sm);
    font-weight: var(--font-regular);
    color: var(--text-primary);
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    box-sizing: border-box;
}

.frm-txtbox::placeholder{
    color: var(--gray-400);
}

.frm-txtbox:focus,
.frm-focus{
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 67, 56, 202), 0.1);
}

.frm-txtbox:disabled,
.frm-txtbox[readonly]{
    background: var(--gray-50);
    color: var(--text-secondary);
    cursor: not-allowed;
}

/* Multi-select dropdown */
.frm-multiselect{
    height: auto;
    min-height: var(--input-height);
    max-height: 140px;
    overflow-y: auto;
    padding: var(--space-xs);
    background-image: none !important;
    border: 1px solid var(--gray-300);
}
.frm-multiselect option{
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    margin-bottom: 2px;
}
.frm-multiselect option:checked{
    background: rgba(var(--primary-rgb, 67, 56, 202), 0.15);
    color: var(--primary);
    font-weight: var(--font-medium);
}
select[multiple].frm-txtbox{
    background-image: none;
    padding-right: var(--input-padding);
}

.frm-txarea{
    width: 100%;
    min-height: 60px;
    padding: var(--input-padding);
    font-family: var(--font-primary);
    font-size: var(--font-sm);
    color: var(--text-primary);
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    resize: vertical;
    box-sizing: border-box;
}

.frm-txarea:focus{
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 67, 56, 202), 0.1);
}

.frm-select{
    width: 100%;
    height: var(--input-height);
    padding: 4px 26px 4px 8px;
    font-family: var(--font-primary);
    font-size: var(--font-sm);
    color: var(--text-primary);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath d='M6 8.825L1.175 4 2.238 2.938 6 6.7 9.763 2.937 10.825 4z' fill='%2394a3b8'/%3E%3C/svg%3E") no-repeat right 8px center;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    box-sizing: border-box;
}

.frm-select:focus{
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 67, 56, 202), 0.1);
}

select.frm-txtbox{
    background: var(--card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8.825L1.175 4 2.238 2.938 6 6.7 9.763 2.937 10.825 4z' fill='%2394a3b8'/%3E%3C/svg%3E") no-repeat right 14px center;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 36px;
    cursor: pointer;
}

.frm-error{
    border-color: var(--accent-danger) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08) !important;
}

.frm-er-msg{
    display: block;
    font-size: var(--font-xs);
    color: var(--accent-danger);
    margin-top: 4px;
    min-height: 0;
    line-height: 1.4;
}

.form-hint{
    display: block;
    font-size: 10px;
    color: var(--gray-400);
    margin-top: 3px;
    line-height: 1.4;
    font-style: italic;
}

/* When form-hint is used as a subtitle inside section labels */
.form-section-label .form-hint{
    display: inline;
    font-style: normal;
    font-weight: var(--font-regular);
    font-size: 10px;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: normal;
    margin: 0;
}

.fldrequired::after{
    content: '';
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */
.toast_wrapper{
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: var(--z-tooltip);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    pointer-events: none;
}

.toast_wrapper > div{
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    min-width: 300px;
    max-width: 460px;
    box-shadow: var(--shadow-lg);
    animation: toastSlideIn 0.35s ease forwards;
    line-height: 1.4;
}

.toast-grn{
    background: #ecfdf5;
    color: #065f46;
    border-left: 4px solid var(--accent-success);
}

.toast-red{
    background: #fef2f2;
    color: #991b1b;
    border-left: 4px solid var(--accent-danger);
}

.toast-warn{
    background: #fffbeb;
    color: #92400e;
    border-left: 4px solid var(--accent-warning);
}

.toast-info{
    background: #eff6ff;
    color: #1e40af;
    border-left: 4px solid var(--accent-info);
}

.toast-icon{
    flex-shrink: 0;
    font-size: var(--font-lg);
    display: flex;
    align-items: center;
}

.toast-msg{
    flex: 1;
    word-break: break-word;
}

.toast-close{
    margin-left: auto;
    background: none;
    border: none;
    color: inherit;
    opacity: 0.5;
    cursor: pointer;
    font-size: var(--font-md);
    padding: 0;
    flex-shrink: 0;
}

.toast-close:hover{
    opacity: 1;
}

@keyframes toastSlideIn {
    0% {
        opacity: 0;
        transform: translateX(80px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================================
   STAT CARDS
   ============================================================ */
.stat-card{
    background: var(--card-bg);
    border-radius: var(--radius-md);
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    transition: box-shadow var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.stat-card::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    border-radius: 4px 0 0 4px;
}

.stat-icon{
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

/* ============================================================
   CHART CARDS
   ============================================================ */
.chart-card{
    background: var(--card-bg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

/* ============================================================
   TABLE CARDS & TABLES
   ============================================================ */
.table-card{
    background: var(--card-bg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

.table-card-body{
    padding: 4px;
    overflow-x: auto;
}

/* Styled Table */
.data-table{
    width: 100%;
    border-collapse: collapse;
}

.data-table thead th{
    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: var(--gray-50);
    padding: 8px 12px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--gray-200);
    position: sticky;
    top: 0;
    z-index: 1;
}
.data-table thead th.th-sortable{
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease;
}
.data-table thead th.th-sortable:hover{
    color: var(--primary);
}
.data-table thead th.th-sortable::after{
    content: '⇅';
    margin-left: 4px;
    font-size: 10px;
    opacity: 0.35;
}
.data-table thead th.th-sortable.sort-asc::after{
    content: '▲';
    opacity: 0.8;
    color: var(--primary);
}
.data-table thead th.th-sortable.sort-desc::after{
    content: '▼';
    opacity: 0.8;
    color: var(--primary);
}

.data-table tbody td{
    font-size: var(--font-sm);
    color: var(--text-primary);
    padding: 7px 12px;
    border-bottom: 1px solid var(--gray-100);
    vertical-align: middle;
}

.data-table tbody tr:last-child td{
    border-bottom: none;
}

.data-table tbody tr:hover{
    background: var(--gray-50);
}

.data-table tbody tr.active{
    background: rgba(var(--primary-rgb, 67, 56, 202), 0.04);
}

.data-table .td-actions{
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.data-table .td-actions button{
    width: 26px;
    height: 26px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.data-table .td-actions button:hover{
    background: var(--gray-100);
    color: var(--text-primary);
}

/* ============================================================
   DIV TABLE (Virtual scrolling / responsive table)
   ============================================================ */
.containerDiv{
    width: 100%;
    overflow-x: auto;
}

.rowDiv{
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--gray-100);
    transition: background var(--transition-fast);
}

.rowDiv:hover{
    background: var(--gray-50);
}

.rowDiv:last-child{
    border-bottom: none;
}

.sort-header{
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sort-header:hover{
    color: var(--text-primary);
}

.sort-header::after{
    content: '\f0dc';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 10px;
    opacity: 0.4;
}

.sort-header.asc::after{
    content: '\f0de';
    opacity: 1;
    color: var(--primary);
}

.sort-header.desc::after{
    content: '\f0dd';
    opacity: 1;
    color: var(--primary);
}

/* ============================================================
   GRID LAYOUTS
   ============================================================ */
.dashboard-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.charts-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.tables-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.info-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-base);
}

.form-grid-2{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 var(--space-xl);
}

.form-grid-3{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 var(--space-xl);
}

.form-grid-4{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: var(--space-base);
}

.form-grid-5{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: var(--space-base);
}

/* ── Form Section Labels ────────────────────────────────── */
.form-section-label{
    margin-top: 14px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--gray-100);
    font-weight: var(--font-semibold);
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 6px;
}
.form-section-label i{
    font-size: 11px;
    color: var(--text-muted);
}

/* ── Exempt Vehicle Plate Rows ──────────────────────────── */
.exempt-plate-row{
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0 var(--space-md);
    align-items: start;
}

.exempt-plate-row .form-field-wrap:last-child{
    display: flex;
    align-items: center;
    padding-top: 2px;
}

.exempt-plate-row .removeExemptPlateBtn{
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--gray-200);
    background: var(--card-bg);
    color: var(--gray-400);
    font-size: var(--font-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.exempt-plate-row .removeExemptPlateBtn:hover{
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--accent-danger);
}

.exempt-plate-row .removeExemptPlateBtn:active{
    transform: scale(0.92);
}

/* ── Form Section Divider (centered text with line) ─────── */
.form-section-divider{
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin: var(--space-lg) 0 var(--space-md) 0;
}

.form-section-divider::before,
.form-section-divider::after{
    content: '';
    flex: 1;
    height: 1px;
    background: var(--gray-200);
}

.form-section-divider span{
    font-size: var(--font-xs);
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* ── Toggle Checkbox (inline label + checkbox) ──────────── */
.toggle-check{
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: var(--font-sm);
}

.toggle-check.toggle-check-offset{
    margin-top: 8px;
}

.toggle-check i{
    color: var(--text-secondary);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

/* ── Disabled state for toggle checkboxes (e.g.,
FASTag payment gate) ── */
.toggle-check.disabled-check,
label.disabled-check{
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Grid Responsive */
@media (max-width: 1200px){
    .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
    .charts-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
    .charts-grid{ grid-template-columns: 1fr; }
    .tables-grid{ grid-template-columns: 1fr; }
    .form-grid-3{ grid-template-columns: repeat(2, 1fr); }
    .form-grid-4{ grid-template-columns: repeat(2, 1fr); }
    .form-grid-5{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .dashboard-grid{ grid-template-columns: 1fr; }
    .form-grid-2{ grid-template-columns: 1fr; }
    .form-grid-3{ grid-template-columns: 1fr; }
    .form-grid-4{ grid-template-columns: 1fr; }
    .form-grid-5{ grid-template-columns: 1fr; }
    .info-grid{ grid-template-columns: 1fr; }
}

/* ============================================================
   POPUP / MODAL
   ============================================================ */
.bid-popup-loader{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
}

.bid-popup-container{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    animation: fadeIn 0.2s ease;
    padding: var(--space-base);
}

.bid-popup-content{
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.2s ease;
    overflow: hidden;
}

.bid-popup-content > form{
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.bid-popup-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--gray-200);
    flex-shrink: 0;
}

.bid-popup-title{
    font-family: var(--font-primary);
    font-size: var(--font-md);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bid-popup-title i{
    color: var(--primary);
    font-size: var(--font-md);
}

.bid-popup-close{
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
    font-size: 14px;
}

.bid-popup-close:hover{
    background: var(--gray-100);
    color: var(--text-primary);
}

.bid-popup-body{
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.bid-popup-footer{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--gray-200);
    flex-shrink: 0;
}

.bid-popup-btn-close{
    height: var(--btn-height);
    padding: 0 14px;
    font-family: var(--font-primary);
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.bid-popup-btn-close:hover{
    background: var(--gray-200);
    color: var(--text-primary);
}

.bid-popup-btn-save{
    height: var(--btn-height);
    padding: 0 16px;
    font-family: var(--font-primary);
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    color: #ffffff;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.bid-popup-btn-save:hover{
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.bid-popup-btn-save:disabled{
    opacity: 0.55;
    cursor: not-allowed;
}

/* ── Alert Message Box (popup inline alert) ──────────────────── */
.alert-message-box{
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
    line-height: 1.5;
    margin-bottom: var(--space-lg);
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    color: var(--text-secondary);
}
.alert-message-box.alert-warning{
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.2);
    color: #92400e;
}
.alert-message-box.alert-danger{
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
    color: #991b1b;
}
.alert-message-box.alert-success{
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.2);
    color: #166534;
}
.alert-message-box i{
    margin-right: 6px;
}
.alert-message-box p{
    margin: 0;
}

/* ── Split Payment Summary (popup summary rows) ──────────────── */
.split-payment-summary{
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
    overflow: hidden;
}
.split-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-bottom: 1px solid var(--gray-100);
    font-size: var(--font-sm);
}
.split-row:last-child{
    border-bottom: none;
}
.split-label{
    color: var(--text-secondary);
}
.split-value{
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}
.split-deducted .split-value{
    color: var(--accent-danger);
}
.split-remaining{
    background: rgba(var(--primary-rgb), 0.04);
}
.split-remaining .split-value{
    color: var(--primary);
}

/* ── Lost Ticket Fee Card (popup highlight card) ─────────────── */
.lost-ticket-fee-card{
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    margin-top: var(--space-lg);
}

/* ── Popup Info Box (informational callout inside popup body) ── */
.popup-info-box{
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
    line-height: 1.5;
    margin-bottom: var(--space-lg);
    background: rgba(var(--primary-rgb), 0.05);
    border: 1px solid rgba(var(--primary-rgb), 0.12);
    color: var(--text-secondary);
}
.popup-info-box i{
    color: var(--primary);
    margin-right: 6px;
}
.popup-info-box code{
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    background: rgba(0, 0, 0, 0.05);
    padding: 1px 5px;
    border-radius: 3px;
}

/* ── Popup Button Alt (secondary action e.g. Print) ──────────── */
.bid-popup-btn-alt{
    height: var(--btn-height);
    padding: 0 14px;
    font-family: var(--font-primary);
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.08);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bid-popup-btn-alt:hover{
    background: rgba(var(--primary-rgb), 0.14);
    border-color: rgba(var(--primary-rgb), 0.3);
}

/* ── Temp Password Display (Admin Reset Result) ──────────────── */
.temp-pwd-display{
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin: var(--space-lg) 0;
    text-align: center;
}

.temp-pwd-display code{
    font-size: 1.25rem;
    letter-spacing: 2px;
    color: var(--text-primary);
    font-weight: var(--font-bold);
    user-select: all;
    -webkit-user-select: all;
}

.temp-pwd-warning{
    font-size: var(--font-xs);
    line-height: 1.4;
    color: var(--text-muted);
}

.temp-pwd-warning i{
    color: var(--warning);
    margin-right: 4px;
}

.text-center{
    text-align: center;
}

/* ============================================================
   RIGHT PANEL (Slide-in Drawer)
   ============================================================ */
.right-popup-container{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    z-index: var(--z-modal);
    animation: fadeIn 0.2s ease;
}

/* Sub-popup (loaded into #rightPopup while main #popup is open) stacks above */
#rightPopup .bid-popup-container{
    z-index: var(--z-popover);
}

.right-popup-content{
    position: absolute;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 90vw;
    height: 100%;
    background: var(--card-bg);
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.10);
    display: flex;
    flex-direction: column;
    animation: slideInRight 0.2s ease;
}

@keyframes slideInRight {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}

/* ============================================================
   OVERLAY (AJAX Double-click Prevention)
   ============================================================ */
.act_btn_ovrly{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.4);
    z-index: var(--z-modal);
    cursor: wait;
    display: flex !important;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.act_btn_ovrly.is-active{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Button loading state (set by btnLoading / btnReset in common.js) */
.btn.is-loading,
.bid-popup-btn-save.is-loading{
    opacity: 0.75;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn.is-loading .loading-spinner,
.bid-popup-btn-save.is-loading .loading-spinner{
    vertical-align: middle;
    border-top-color: currentColor;
    border-color: rgba(255,255,255,0.35);
    border-top-color: #fff;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-2xl) var(--space-lg);
    text-align: center;
}

.empty-state-icon{
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-lg);
    color: var(--gray-400);
    margin-bottom: var(--space-base);
}

.empty-state-text{
    font-size: var(--font-sm);
    color: var(--text-secondary);
    max-width: 320px;
    line-height: 1.6;
}

.empty-state-text strong{
    display: block;
    font-size: var(--font-md);
    color: var(--text-primary);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-xs);
}

/* ============================================================
   LOADING SPINNER
   ============================================================ */
.loading-spinner{
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--gray-200);
    border-top-color: var(--primary);
    border-radius: var(--radius-full);
    animation: spin 0.7s linear infinite;
}

.loading-spinner.spinner-sm{
    width: 14px;
    height: 14px;
    border-width: 1.5px;
}

/* ============================================================
   WELCOME BANNER (Base)
   ============================================================ */
.welcome-banner{
    background: var(--gradient);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
    position: relative;
    overflow: hidden;
}

/* ============================================================
   CUSTOM SCROLLBAR
   ============================================================ */
::-webkit-scrollbar{
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track{
    background: transparent;
}

::-webkit-scrollbar-thumb{
    background: var(--gray-300);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover{
    background: var(--gray-400);
}

*{
    scrollbar-width: thin;
    scrollbar-color: var(--gray-300) transparent;
}

/* ============================================================
   TOGGLE SWITCH
   ============================================================ */
.toggle-switch{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    padding: 8px 0;
}

.toggle-switch input[type="checkbox"]{
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider{
    position: relative;
    display: inline-block;
    width: 32px;
    height: 18px;
    background: var(--gray-300);
    border-radius: 9px;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.toggle-slider::after{
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    transition: transform 0.2s ease;
}

.toggle-switch input:checked + .toggle-slider{
    background: var(--primary);
}

.toggle-switch input:checked + .toggle-slider::after{
    transform: translateX(14px);
}

.toggle-switch input:focus-visible + .toggle-slider{
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.toggle-label{
    font-size: var(--font-xs);
    color: var(--text-secondary);
    line-height: 1.4;
}

/* ============================================================
   UTILITY OVERRIDES
   ============================================================ */
.text-uppercase{ text-transform: uppercase; }
.form-section-title{ font-weight: var(--font-semibold); margin-bottom: var(--space-md); }

/* ============================================================
   POPUP SIZE VARIANTS
   ============================================================ */
.bid-popup-sm .bid-popup-content{ max-width: 400px; }
.bid-popup-md .bid-popup-content{ max-width: 500px; }
.bid-popup-base .bid-popup-content{ max-width: 600px; }
.bid-popup-lg .bid-popup-content{ max-width: 700px; }
.bid-popup-xl .bid-popup-content{ max-width: 800px; }

/* ============================================================
   PERMISSION MATRIX (Role Popup)
   ============================================================ */
.permission-matrix-wrap{
    margin-top: var(--space-lg);
}

.form-section-title{
    font-size: var(--font-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-base);
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--primary);
    display: inline-block;
}

.permission-module-group{
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
    overflow: hidden;
}

.permission-module-header{
    background: var(--gray-50);
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-light);
}

.permission-module-header label{
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    font-size: var(--font-sm);
    margin: 0;
}

.permission-module-body{
    display: flex;
    flex-wrap: wrap;
    padding: 10px 14px;
    gap: 8px 20px;
}

.permission-item{
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-xs);
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
}

.permission-item input[type="checkbox"]{
    margin: 0;
}

.checkbox-group-inline{
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    padding: 6px 0;
}

.checkbox-inline-item{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: var(--fs-sm, 13px);
    user-select: none;
}

.checkbox-label-wrap{
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 28px;
    cursor: pointer;
    user-select: none;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeIn{
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(24px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.pagination-info{
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

.pagination-btns{
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.pagination-btns button{
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-xs);
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--gray-200);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.pagination-btns button:hover{
    background: var(--gray-50);
    border-color: var(--gray-300);
    color: var(--text-primary);
}

.pagination-btns button.active{
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

.pagination-btns button:disabled{
    opacity: 0.4;
    cursor: not-allowed;
}

/* ============================================================
   LISTING TOOLBAR (Info + Per Page)
   ============================================================ */
.listing-toolbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 10px;
    background: var(--card-bg);
    border: 1px solid var(--gray-200);
    border-bottom: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.listing-info{
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

.listing-info strong{
    color: var(--text-primary);
    font-weight: 600;
}

.listing-per-page{
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

.listing-per-page select{
    width: auto;
    min-width: 64px;
    height: 30px;
    padding: 2px 28px 2px 10px;
    font-size: var(--font-xs);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    background: var(--card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8.825L1.175 4 2.238 2.938 6 6.7 9.763 2.937 10.825 4z' fill='%2394a3b8'/%3E%3C/svg%3E") no-repeat right 8px center;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

/* ── Sortable Headers ──────────────────────────────────────────── */
.data-table th[data-sort]{
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 24px;
    transition: color var(--transition-fast);
}

.data-table th[data-sort]:hover{
    color: var(--primary);
}

.data-table th[data-sort] .sort-icon{
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--gray-300);
    transition: color var(--transition-fast);
}

.data-table th[data-sort].sorted-asc .sort-icon,
.data-table th[data-sort].sorted-desc .sort-icon{
    color: var(--primary);
}

/* ── Listing Skeleton Loader ───────────────────────────────────── */
.listing-skeleton td{
    padding: var(--space-md) var(--space-base);
}

.skeleton-bar{
    height: 14px;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-50) 50%, var(--gray-100) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease infinite;
}

.skeleton-bar-sm{ width: 60px; }
.skeleton-bar-md{ width: 120px; }
.skeleton-bar-lg{ width: 200px; }

@keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Empty State for Listings ──────────────────────────────────── */
.listing-empty{
    text-align: center;
    padding: 40px var(--space-xl);
    color: var(--text-muted);
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.listing-empty > i{
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-md);
    color: var(--gray-300);
    margin-bottom: 12px;
}

.listing-empty p{
    margin: 0;
    font-size: var(--font-sm);
    color: var(--text-secondary);
    font-weight: var(--font-medium);
}

.listing-empty .listing-empty-sub{
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-top: 4px;
    max-width: 380px;
    line-height: 1.5;
    font-weight: var(--font-regular);
}

.listing-empty .listing-empty-action{
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-xs);
    padding: 6px 14px;
}
.listing-empty .listing-empty-action i{
    width: auto;
    height: auto;
    background: none;
    border: none;
    border-radius: 0;
    font-size: 10px;
    color: inherit;
    margin-bottom: 0;
    display: inline;
}

/* ── Listing Pagination (engine-rendered) ──────────────────────── */
.listing-pagination{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--gray-100);
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.listing-pagination .page-btns{
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.listing-pagination .page-btn{
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-xs);
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--gray-200);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.listing-pagination .page-btn:hover:not(:disabled):not(.active){
    background: var(--gray-50);
    border-color: var(--gray-300);
    color: var(--text-primary);
}

.listing-pagination .page-btn.active{
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
    font-weight: 600;
}

.listing-pagination .page-btn:disabled{
    opacity: 0.4;
    cursor: not-allowed;
}

.listing-pagination .page-ellipsis{
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-sm);
    color: var(--text-muted);
}

/* ── Table card with listing toolbar integration ───────────────── */
.listing-toolbar + .table-card{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* ============================================================
   FILTER BAR
   ============================================================ */
.filter-bar{
    display: flex;
    align-items: center;
    gap: var(--space-base);
    flex-wrap: wrap;
    margin-bottom: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.filter-bar .frm-select,
.filter-bar .frm-txtbox{
    width: auto;
    min-width: 200px;
    height: 38px;
    font-size: var(--font-sm);
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-200);
    background-color: var(--gray-50);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.filter-bar .frm-select:focus,
.filter-bar .frm-txtbox:focus{
    background-color: #fff;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.filter-bar .btn{
    height: 38px;
}
/* ============================================================
   DETAIL VIEW GRID (View Popups — key-value rows)
   ============================================================ */
.audit-detail-grid{
    display: flex;
    flex-direction: column;
    gap: 0;
}

.audit-detail-row{
    display: flex;
    align-items: flex-start;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-light);
    gap: 16px;
}

.audit-detail-row:last-child{
    border-bottom: none;
}

.audit-detail-row:nth-child(even){
    background: rgba(var(--primary-rgb, 99, 102, 241), 0.02);
}

.audit-detail-label{
    flex: 0 0 180px;
    font-size: var(--font-sm);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    letter-spacing: 0.01em;
}

.audit-detail-value{
    flex: 1;
    font-size: var(--font-sm);
    font-weight: var(--font-regular);
    color: var(--text-primary);
    word-break: break-word;
}

/* ── Audit JSON Display (Old/New values in view popups) ──────── */
.audit-json-section{
    margin-top: var(--space-lg);
}

.audit-json-display{
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    line-height: 1.6;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 260px;
    overflow-y: auto;
    margin: 0;
}

/* ── Form Help Text (popup descriptive text) ─────────────────── */
.form-help-text{
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}
.form-help-text code{
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    background: rgba(0, 0, 0, 0.05);
    padding: 1px 5px;
    border-radius: 3px;
}

/* ============================================================
   SEARCH INPUT
   ============================================================ */
.search-input-wrap{
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-wrap .frm-txtbox{
    padding-left: 36px;
}

.search-input-wrap .search-icon{
    position: absolute;
    left: 12px;
    color: var(--gray-400);
    font-size: var(--font-sm);
    pointer-events: none;
}

/* ============================================================
   PRINT UTILITY
   ============================================================ */
@media print{
    .sidebar,
    .header-fix,
    .bid-popup-container,
    .right-popup-container,
    .toast_wrapper,
    .act_btn_ovrly {
        display: none !important;
    }

    .wrapper {
        margin-left: 0 !important;
        padding: 0 !important;
    }

    body {
        background: #ffffff !important;
    }
}

/* ---------- Global Utility Classes ---------- */
.hide{ display: none; }
.hidden-initial{ display: none; }
.hidden{ display: none !important; }
.lt-entry-image-wrap{ margin-top: 12px; }
.lt-entry-image{ max-width: 200px; border-radius: var(--radius-sm); }

/* ── Zone Override Count Badge ──────────────────────────────────── */
.zoneOverridesBtn{
    position: relative;
}

.override-count-badge{
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--warning, #e67e22);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ── Tariff Listing Table ────────────────────────────────────────── */
.tariff-table{
    width: 100%;
}

/* Expand-toggle cell */
.tariff-table thead th:first-child,
.tariff-table tbody td:first-child{
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    text-align: center;
    padding-left: var(--space-xs);
    padding-right: var(--space-xs);
    box-sizing: border-box;
}

/* Base-rate header & cell — right-align,
fixed width */
.tariff-table th.th-rate,
.tariff-table .td-rate{
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    width: 100px;
}

/* Grace period — center,
fixed width */
.tariff-table th.th-grace,
.tariff-table .td-grace{
    text-align: center;
    white-space: nowrap;
    width: 90px;
}

/* Status — center,
fixed width */
.tariff-table th.th-status,
.tariff-table .td-status{
    text-align: center;
    width: 80px;
}

/* Actions — right-align,
fixed width for up to 4 buttons */
.tariff-table th.th-actions,
.tariff-table .td-actions{
    text-align: right;
    white-space: nowrap;
    width: 170px;
}

.tariff-table .td-actions .action-btns{
    justify-content: flex-end;
}

/* Plan name — bold with ellipsis on overflow */
.tariff-table .td-plan .text-bold{
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pricing model badge — center */
.tariff-table .td-model{
    text-align: center;
    white-space: nowrap;
}

/* ── Tariff Slab Inline Panel ────────────────────────────────────── */
.tariff-slabs-row td{
    padding: 0 !important;
}

.slab-detail-wrap{
    background: var(--gray-50);
    padding: 20px 24px;
    border-top: 2px solid var(--primary-light, #e0e7ef);
}

.slab-inline-panel{
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.slab-inline-panel .slab-panel-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-light);
}

.slab-inline-panel .slab-panel-title{
    font-weight: 600;
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.slab-inline-panel .data-table{
    margin-bottom: 0;
}

.slab-inline-panel .data-table th,
.slab-inline-panel .data-table td{
    font-size: 12px;
    padding: 8px 12px;
    vertical-align: middle;
}

.slab-inline-panel .data-table th{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    background: var(--gray-50);
}

.slab-inline-panel .data-table td.slab-col-order,
.slab-inline-panel .data-table td.slab-col-from,
.slab-inline-panel .data-table td.slab-col-to,
.slab-inline-panel .data-table td.slab-col-amount{
    text-align: center;
}

.slab-inline-panel .data-table th.slab-col-order,
.slab-inline-panel .data-table th.slab-col-from,
.slab-inline-panel .data-table th.slab-col-to,
.slab-inline-panel .data-table th.slab-col-type,
.slab-inline-panel .data-table th.slab-col-amount{
    text-align: center;
}

.slab-inline-panel .data-table td.slab-col-type{
    text-align: center;
}

.slab-inline-panel .data-table td.slab-col-actions{
    text-align: right;
}

.slab-inline-panel .data-table th.slab-col-actions{
    text-align: right;
}

.slab-loader{
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-sm);
}

/* ── Tab Bar ─────────────────────────────────────────────────────── */
.tab-bar{
    display: flex;
    gap: var(--space-xs);
    margin-bottom: var(--space-xl);
    border-bottom: 2px solid var(--border-light);
    padding-bottom: 0;
}

.tab-btn{
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-primary);
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.tab-btn:hover{
    color: var(--primary);
}

.tab-btn.active{
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: var(--font-semibold);
}

.tab-count{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 10px;
    font-weight: var(--font-bold);
    background: var(--primary);
    color: #ffffff;
    border-radius: 9px;
    margin-left: 4px;
}
.tab-btn:not(.active) .tab-count{
    background: var(--gray-300);
    color: #ffffff;
}

/* ── Password Toggle ─────────────────────────────────────────────── */
.pwd-toggle-wrap{
    position: relative;
    width: 100%;
}

.pwd-toggle-wrap .frm-txtbox{
    padding-right: 44px;
}

.pwd-toggle-icon{
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--font-sm);
    transition: color var(--transition-fast);
    z-index: 2;
}

.pwd-toggle-icon:hover{
    color: var(--text-primary);
}

/* ── Demo Mode Badge ─────────────────────────────────────────────── */
.parkaxle-demo-badge{
    position: fixed;
    bottom: 18px;
    right: 18px;
    background: var(--accent-warning);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    z-index: 999999;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    pointer-events: none;
    user-select: none;
}

/* ── jQuery UI Datepicker — Light Luxury Theme ───────────────────────────── */
.ui-datepicker{
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 0;
    width: 290px;
    font-family: var(--font-primary);
    z-index: 999999 !important;
}

.ui-datepicker .ui-datepicker-header{
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding: 12px 40px;
    position: relative;
    text-align: center;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next{
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: rgba(255,255,255,0.15);
}

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover{
    background: rgba(255,255,255,0.30);
}

.ui-datepicker .ui-datepicker-prev{ left: 8px; }
.ui-datepicker .ui-datepicker-next{ right: 8px; }

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span{
    display: none;
}

.ui-datepicker .ui-datepicker-prev::after,
.ui-datepicker .ui-datepicker-next::after{
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 12px;
    color: #fff;
}

.ui-datepicker .ui-datepicker-prev::after{
    content: '\f053';
}

.ui-datepicker .ui-datepicker-next::after{
    content: '\f054';
}

.ui-datepicker .ui-datepicker-title{
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.ui-datepicker .ui-datepicker-title select{
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: var(--radius-sm);
    padding: 5px 10px;
    font-size: var(--font-xs);
    font-family: var(--font-primary);
    font-weight: var(--font-medium);
    cursor: pointer;
    outline: none;
    appearance: auto;
}

.ui-datepicker .ui-datepicker-title select option{
    background: var(--primary);
    color: #fff;
}

span.ui-datepicker-month,
span.ui-datepicker-year{
    color: #fff;
    font-size: var(--font-sm);
    font-weight: var(--font-semibold);
    font-family: var(--font-primary);
}

.ui-datepicker table{
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 2px;
    padding: 8px 10px 10px;
}

.ui-datepicker th{
    color: var(--text-muted);
    font-size: 11px;
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 0;
    text-align: center;
    font-family: var(--font-primary);
    border: none;
}

.ui-datepicker td{
    border: none;
    padding: 1px;
}

.ui-datepicker td a,
.ui-datepicker td span{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0 auto;
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
    font-weight: var(--font-regular);
    color: var(--text-primary);
    text-align: center;
    text-decoration: none;
    transition: all var(--transition-fast);
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
}

/* Hover */
.ui-datepicker td a:hover{
    background: rgba(var(--primary-rgb), 0.06);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Today */
.ui-state-highlight,
.ui-widget-content .ui-state-highlight{
    background: rgba(212, 175, 55, 0.12) !important;
    border: 1px solid var(--accent) !important;
    color: var(--accent-dark) !important;
    font-weight: var(--font-semibold) !important;
}

/* Selected / Active */
.ui-state-active,
.ui-widget-content .ui-state-active{
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
    font-weight: var(--font-semibold) !important;
}

/* Disabled */
.ui-datepicker td .ui-state-disabled{
    opacity: 0.3;
    cursor: default;
}

.ui-datepicker td span.ui-state-default{
    color: var(--text-muted);
}

/* ── Timepicker overrides ────────────────────────────────────────────────── */
.ui-timepicker-wrapper{
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-family: var(--font-primary);
    z-index: 999999 !important;
}

.ui-timepicker-list li{
    font-size: var(--font-sm);
    padding: 6px 12px;
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    margin: 2px 4px;
}

.ui-timepicker-list li:hover,
li.ui-timepicker-selected{
    background: var(--primary);
    color: #fff;
}

/* ============================================================
   CHECKOUT POPUP — Session Info Card
   ============================================================ */
.checkout-info-card{
    background: linear-gradient(135deg, rgba(var(--primary-rgb, 99, 102, 241), 0.06) 0%, rgba(var(--primary-rgb, 99, 102, 241), 0.02) 100%);
    border: 1px solid rgba(var(--primary-rgb, 99, 102, 241), 0.12);
    border-radius: var(--radius-lg, 12px);
    padding: 20px;
    margin-bottom: 20px;
}

.checkout-info-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.checkout-info-item{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.checkout-label{
    font-size: 11px;
    font-weight: var(--font-semibold);
    color: var(--text-tertiary, #8b8fa3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.checkout-value{
    font-size: var(--font-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.checkout-duration{
    color: var(--primary);
    font-size: var(--font-base);
    font-weight: var(--font-bold);
}

/* ============================================================
   CHECKOUT POPUP — Tariff Breakdown
   ============================================================ */
.tariff-breakdown-wrap{
    margin-bottom: 20px;
}

.tariff-breakdown-table{
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    min-height: 48px;
}

.tariff-row{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border-light);
    font-size: var(--font-sm);
    gap: 12px;
}

.tariff-row:last-child{
    border-bottom: none;
}

.tariff-row-label{
    color: var(--text-secondary);
    font-weight: var(--font-regular);
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.tariff-row-value{
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    white-space: nowrap;
    text-align: right;
    flex-shrink: 0;
}

/* ── Duration badge ────────────────────────────────────── */
.tariff-duration{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(var(--primary-rgb, 99, 102, 241), 0.06);
    border-bottom: 1px solid var(--border-light);
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

.tariff-duration i{
    color: var(--primary);
    font-size: 14px;
}

.tariff-duration strong{
    color: var(--text-primary);
}

/* ── Plan header ───────────────────────────────────────── */
.tariff-header{
    padding: 10px 16px;
    background: rgba(var(--primary-rgb, 99, 102, 241), 0.04);
    border-bottom: 1px solid var(--border-light);
}

.tariff-header .tariff-row-label{
    flex-direction: row;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    font-weight: var(--font-semibold);
    font-size: var(--font-sm);
}

.tariff-header i{
    color: var(--primary);
    font-size: 13px;
}

.tariff-code{
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    background: rgba(var(--primary-rgb, 99, 102, 241), 0.1);
    color: var(--primary);
    border-radius: 10px;
    font-size: 11px;
    font-weight: var(--font-medium);
    letter-spacing: 0.02em;
}

/* ── Slab rows ─────────────────────────────────────────── */
.tariff-slab{
    padding: 6px 16px 6px 28px;
}

.tariff-slab-range{
    font-weight: var(--font-medium);
    color: var(--text-primary);
    font-size: var(--font-sm);
}

.tariff-sublabel{
    display: block;
    font-size: 11px;
    color: var(--text-tertiary, #8b8fa3);
    font-weight: var(--font-regular);
    margin-top: 1px;
}

/* ── Dividers ──────────────────────────────────────────── */
.tariff-divider{
    height: 1px;
    background: var(--border-light);
    margin: 0 16px;
}

.tariff-divider-total{
    height: 2px;
    background: linear-gradient(90deg, var(--primary), rgba(var(--primary-rgb, 99, 102, 241), 0.3));
    margin: 0;
}

/* ── Subtotal row ──────────────────────────────────────── */
.tariff-subtotal{
    border-bottom: none;
}

.tariff-subtotal .tariff-row-label{
    font-weight: var(--font-medium);
    color: var(--text-primary);
}

.tariff-subtotal .tariff-row-value{
    font-weight: var(--font-semibold);
}

/* ── Surge row ─────────────────────────────────────────── */
.tariff-surge{
    background: rgba(245, 158, 11, 0.04);
}

.tariff-surge i{
    color: var(--warning, #f59e0b);
    font-size: 12px;
}

.tariff-surge .tariff-row-label{
    color: var(--text-primary);
    font-weight: var(--font-medium);
}

/* ── Zone premium row ──────────────────────────────────── */
.tariff-zone{
    background: rgba(14, 165, 233, 0.04);
}

.tariff-zone i{
    color: var(--info, #0ea5e9);
    font-size: 12px;
}

/* ── Tax row ───────────────────────────────────────────── */
.tariff-tax{
    background: rgba(var(--primary-rgb, 99, 102, 241), 0.03);
}

.tariff-tax i{
    color: var(--text-tertiary, #8b8fa3);
    font-size: 12px;
}

/* ── Cap row ───────────────────────────────────────────── */
.tariff-cap{
    background: rgba(16, 185, 129, 0.06);
}

.tariff-cap i{
    color: var(--success, #10b981);
    font-size: 12px;
}

.tariff-cap .tariff-row-label{
    color: var(--success, #10b981);
    font-weight: var(--font-medium);
}

/* ── Total row ─────────────────────────────────────────── */
.tariff-total{
    padding: 12px 16px;
    border-bottom: none;
    background: linear-gradient(135deg, rgba(var(--primary-rgb, 99, 102, 241), 0.08) 0%, rgba(var(--primary-rgb, 99, 102, 241), 0.03) 100%);
}

.tariff-total .tariff-row-label{
    font-size: var(--font-base);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

.tariff-total .tariff-row-value{
    font-size: 18px;
    font-weight: var(--font-bold);
    color: var(--primary);
    letter-spacing: -0.01em;
}

/* ── Penalty row (lost ticket,
spillover) ──────────────── */
.tariff-penalty{
    background: rgba(239, 68, 68, 0.04);
}

.tariff-penalty i{
    color: var(--danger, #ef4444);
    font-size: 12px;
}

.tariff-penalty .tariff-row-label{
    color: var(--text-primary);
    font-weight: var(--font-medium);
}

/* ── EV charging row ───────────────────────────────────── */
.tariff-ev{
    background: rgba(16, 185, 129, 0.04);
}

.tariff-ev i{
    color: var(--success, #10b981);
    font-size: 12px;
}

/* ── Discount / deduction row ──────────────────────────── */
.tariff-discount{
    background: rgba(16, 185, 129, 0.04);
}

.tariff-discount i{
    color: var(--success, #10b981);
    font-size: 12px;
}

.tariff-discount .tariff-row-label{
    font-weight: var(--font-medium);
}

/* ── Tariff loading & error ────────────────────────────── */
.tariff-loading{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    color: var(--text-tertiary, #8b8fa3);
    font-size: var(--font-sm);
}

.tariff-loading .fa-spinner{
    color: var(--primary);
}

.tariff-error{
    padding: 12px 16px;
    color: var(--danger, #ef4444);
    font-size: var(--font-sm);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Tariff Total Row (Lost Ticket popup total summary) ──────── */
.tariff-total-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-top: 2px solid var(--gray-200);
    margin-top: var(--space-sm);
}
.tariff-total-label{
    font-size: var(--font-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.tariff-total-value{
    font-size: var(--font-lg);
    font-weight: var(--font-bold);
    color: var(--primary);
}

/* ── Checkout Exempt Badge (fee exempt banner) ───────────────── */
.checkout-exempt-badge{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
}
.checkout-exempt-badge i{
    font-size: 16px;
    color: var(--accent-success, #22c55e);
}

/* ── Checkout VIP Toggle ─────────────────────────────────────── */
.checkout-vip-toggle{
    padding-top: var(--space-sm);
}

/* ── View Empty Inline (placeholder in view popups) ──────────── */
.view-empty-inline{
    font-size: var(--font-sm);
    color: var(--text-muted);
    font-style: italic;
}

/* ============================================================
   FILTER BAR — Groups,
Labels & Controls (shared)
   ============================================================ */
.filter-group{
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.filter-label{
    font-family: var(--font-secondary);
    font-size: var(--font-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    white-space: nowrap;
    letter-spacing: 0.2px;
}

.filter-bar .filter-control{
    min-width: 140px;
}

@media (max-width: 768px) {
    .filter-bar{
        flex-direction: column;
        align-items: stretch;
    }
    .filter-group{
        width: 100%;
    }
    .filter-bar .frm-select,
.filter-bar .frm-txtbox,
.filter-bar .filter-control{
        width: 100%;
        min-width: 0;
    }
}

/* ============================================================
   ZONE SPOT INLINE-STYLE REPLACEMENTS
   ============================================================ */
.occupancy-bar-track{ width: 80px; }
.spot-summary-ev-icon{ color: #2196f3; font-size: 10px; }
.spot-summary-sensor-icon{ color: #4caf50; font-size: 10px; }

/* ============================================================
   MICRO-ANIMATIONS & TRANSITIONS
   ============================================================ */

@keyframes fadeIn{
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.3); }
    50%      { box-shadow: 0 0 0 6px rgba(var(--primary-rgb), 0); }
}

/* ── Stat Cards — Subtle border highlight ───────────────────── */
.stat-card{
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.stat-card:hover{
    border-color: var(--gray-300);
    box-shadow: var(--shadow-md);
}

/* ── Buttons — Functional only ────────────────────── */
.btn-primary:hover{
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.3);
}

.btn-primary:active{
    transform: translateY(0) scale(0.98);
}

.btn-danger:hover{
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25);
}

.btn-success:hover{
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25);
}

/* ── Table Rows ──────────────────────────────────────────── */
.data-table tbody tr{
    transition: background 0.1s ease;
}

/* ── Form Focus ──────────────────────────────────────────── */
.form-field-wrap:focus-within .form-type{
    color: var(--primary);
}

/* ── Modal ───────────────────────────────────────────────── */
.bid-popup-content{
    animation: fadeIn 0.15s ease;
}

.bid-popup-close:hover{
    background: rgba(239, 68, 68, 0.08);
    color: var(--accent-danger);
}

/* ── Toast — Glass ──────────────────────────────────────── */
.toast_wrapper > div{
    backdrop-filter: blur(8px);
}

/* ── Pagination — Springy ───────────────────────────────── */
.pagination-btns button:hover:not(:disabled):not(.active){
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* ── Slab Panel — Slide Open ────────────────────────────── */
.slab-detail-wrap{
    animation: fadeInUp 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
/* ============================================================
   PERIOD SHORTCUTS
   ============================================================ */

.period-shortcuts{
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}

.period-btn{
    padding: 6px 14px;
    font-size: var(--font-xs);
    font-weight: var(--font-medium);
    font-family: var(--font-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--card-bg);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.period-btn:hover{
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(var(--primary-rgb, 67, 56, 202), 0.04);
}

.period-btn.active{
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* ============================================================
   DATEPICKER READONLY (prevent text cursor on readonly date fields)
   ============================================================ */

input[readonly].spmdate,
input[readonly].sppsdate,
input[readonly].sppedate,
input[readonly].spmonth,
input[readonly].spwdate,
input[readonly].spdate{
    cursor: pointer;
    caret-color: transparent;
}

/* ── Reduced Motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   AUDIT LOG DETAIL EXPAND
   ============================================================ */
.audit-detail-expand-row td{ background: var(--gray-50, #fafbfc); }
.audit-diff-wrap{
    margin: 4px 12px 8px;
    border: 1px solid var(--gray-200);
    border-left: 3px solid var(--primary, #0d9488);
    border-radius: 0 6px 6px 0;
    overflow: hidden;
    max-height: 300px;
    overflow-y: auto;
}
.audit-diff-wrap table tr:hover{ background: rgba(0,0,0,0.02); }
.audit-diff-wrap table tr{ border-bottom: 1px solid var(--gray-100); }
.audit-diff-wrap table tr:last-child{ border-bottom: none; }
.audit-summary-text{ font-size: var(--font-xs, 12px); }

/* ============================================================
   TABLE COLUMN WIDTH UTILITIES
   ============================================================ */
.th-col-xs{ width: 40px; }
.th-col-sm{ width: 90px; }

/* ============================================================
   INLINE STYLE REPLACEMENTS — Utility Classes
   ============================================================ */
.pad-sm{ padding: 12px; }
.pad-md{ padding: 20px; }
.pad-lg{ padding: 24px; }
.pad-b-lg{ margin-bottom: var(--space-lg); }
.flex-end{ justify-content: flex-end; }
.cursor-ptr{ cursor: pointer; }
.fs-11{ font-size: 11px; }
.fs-12{ font-size: 12px; }
.fs-13{ font-size: 13px; }
.ml-xs{ margin-left: 4px; }
.mr-xs{ margin-right: 4px; }
.mb-xs{ margin-bottom: 4px; }
.mb-sm{ margin-bottom: 8px; }
.mb-md{ margin-bottom: 12px; }
.mt-xs{ margin-top: 4px; }
.mt-sm{ margin-top: 8px; }
.align-right{ text-align: right; }
.overflow-y-auto{ overflow-y: auto; flex: 1; }
.sms-tpl-form-actions{ text-align: right; display: flex; justify-content: flex-end; gap: 8px; }
/* ── Zone Override Popup ─────────────────────────────────── */
.zone-override-hint{
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-bottom: 12px;
    padding: 8px 10px;
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--primary);
}

/* Table layout — fixed columns */
.data-table-compact{ font-size: var(--font-sm); }
.data-table-compact colgroup .col-type{ width: 32%; }
.data-table-compact colgroup .col-action{ width: 18%; }

.data-table-compact thead th{
    font-size: var(--font-xs);
    padding: 6px 10px;
}
.data-table-compact tbody td{
    padding: 8px 10px;
    vertical-align: middle;
}

/* Zone name cell */
.zone-override-row td:first-child{
    white-space: nowrap;
}
.zone-override-row .text-bold{
    font-weight: var(--font-semibold);
    font-size: var(--font-sm);
}

/* Override controls — matching heights */
.zone-override-select{
    width: 100%;
    height: 32px;
    font-size: var(--font-sm);
    padding: 0 8px;
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
    background-image: none;
}
.zone-override-select option{
    color: var(--text-primary);
    background: var(--card-bg);
}
.zone-override-input{
    width: 100%;
    height: 32px;
    font-size: var(--font-sm);
}

/* Save button in row */
.zone-override-row .btn-sm{
    height: 28px;
    padding: 0 12px;
    font-size: var(--font-xs);
    white-space: nowrap;
}
.p-0{ padding: 0; }

/* ============================================================
   GAP REMEDIATION — Form Utility Classes
   ============================================================ */

/* Disabled / readonly form field appearance */
.frm-disabled,
.frm-txtbox[disabled],
.frm-txtbox[readonly]:not(.spadate):not(.spmdate):not(.spdate){
    background-color: var(--gray-100);
    cursor: not-allowed;
    opacity: 0.8;
}

/* Hide a field visually but keep it in DOM for accessibility */
.hidden-field{
    display: none !important;
}

/* Color picker input */
.frm-color{
    height: 40px;
    padding: 4px;
    cursor: pointer;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
}

.frm-color::-webkit-color-swatch-wrapper{
    padding: 2px;
}

.frm-color::-webkit-color-swatch{
    border: 1px solid var(--border-light);
    border-radius: calc(var(--radius-sm) - 2px);
}

/* Uppercase text transform */
.txt-uppercase{
    text-transform: uppercase;
}

/* ============================================================
   POPUP COMPONENT FILLS — Missing element definitions
   ============================================================ */

/* ── Button Variants (popup-specific) ────────────────────────── */
.btn-link{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--primary);
    font-family: var(--font-primary);
    font-size: var(--font-xs);
    font-weight: var(--font-medium);
    cursor: pointer;
    padding: 4px 0;
    text-decoration: none;
    transition: color var(--transition-fast);
}
.btn-link i{
    font-size: 10px;
}
.btn-link:hover{
    color: var(--primary-dark);
}

.btn-inline-action{
    height: var(--btn-height);
    padding: 0 12px;
    font-family: var(--font-primary);
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    color: #fff;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background var(--transition-fast);
}
.btn-inline-action:hover{
    background: var(--primary-dark);
}

/* ── Input with attached button ──────────────────────────────── */
.input-with-btn{
    display: flex;
    align-items: stretch;
}
.input-with-btn .frm-txtbox{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    flex: 1;
}

/* ── Badge Variants ──────────────────────────────────────────── */
.badge-action{
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
}
.badge-outline-success{
    background: transparent;
    border: 1px solid var(--accent-success, #22c55e);
    color: var(--accent-success, #22c55e);
}

/* ── Tag Pills (view popups — e.g. lane features) ────────────── */
.tag-list{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.tag-info{
    background: rgba(59, 130, 246, 0.08);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.2);
}
.tag-primary{
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
}

/* ── Shift Totals Breakdown (closeout popup) ─────────────────── */
.shift-totals-breakdown{
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--space-lg);
}

/* ── Timeline List (session events timeline) ─────────────────── */
.timeline-list{
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Text Utility ────────────────────────────────────────────── */
.text-muted-sm{
    font-size: var(--font-xs);
    color: var(--text-muted);
}

/* ── View Section Meta (metadata row in view popups) ─────────── */
.view-section-meta{
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
}

/* ── Checkbox Wrap (form checkbox container) ─────────────────── */
.frm-checkbox-wrap{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    cursor: pointer;
}
.frm-checkbox-wrap input[type="checkbox"]{
    margin: 0;
}

/* ── Code Textarea (JSON editing in Integrations popup) ───────── */
.code-textarea{
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    font-size: 13px;
    line-height: 1.5;
    tab-size: 2;
    white-space: pre;
    resize: vertical;
}

/* ── Spacing Utility ─────────────────────────────────────────── */
.mt-lg{ margin-top: var(--space-lg); }

/* ── Toggle Check Inline Variant ─────────────────────────────── */
.toggle-check-inline{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: var(--font-sm);
    user-select: none;
}
.toggle-check-inline i{
    color: var(--text-muted);
    transition: color var(--transition-fast);
}
.toggle-check-inline input:checked ~ i,
.toggle-check-inline input:checked + i{
    color: var(--accent-warning, #f59e0b);
}

/* ── Device Required Message ─────────────────────────────────── */
.dev_req_msg{
    font-size: var(--font-xs);
    color: var(--accent-danger);
    margin-top: 4px;
}

/* ── Permission Matrix (Role Popup extras) ───────────────────── */
.module-select-all{
    font-size: var(--font-xs);
    font-weight: var(--font-medium);
    cursor: pointer;
}
.perm-checkbox{
    margin: 0;
    cursor: pointer;
}

/* ── SMS Template (right panel popup) ────────────────────────── */
.sms-tpl-card{
    margin-bottom: var(--space-sm);
}
.sms-tpl-body{
    padding: 12px 14px;
}

/* ── Upload File Text ────────────────────────────────────────── */
.upld_file_txt{
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-top: 4px;
}