/* =========================================================================
   Destinity Inspire Fleet Management — Refined UI Theme
   Loaded last, so it intentionally overrides bootstrap & style.css.
   No class names removed — every selector that exists in the views still
   resolves; only their visual treatment is upgraded.
   ========================================================================= */

/* ---------- Design tokens -------------------------------------------------- */
:root {
    --brand-50:  #e6f5f3;
    --brand-100: #c1e6e1;
    --brand-200: #8fd2c9;
    --brand-300: #5fbeb1;
    --brand-400: #2faa9d;
    --brand-500: #00a79d;   /* legacy brand teal — kept */
    --brand-600: #008f86;
    --brand-700: #076c64;
    --brand-800: #054b45;

    --ink-900: #0f1722;
    --ink-800: #1c2733;
    --ink-700: #2c3744;
    --ink-600: #495260;
    --ink-500: #6b7480;
    --ink-400: #94a0ad;
    --ink-300: #c4ccd6;
    --ink-200: #e3e8ee;
    --ink-100: #f0f3f7;
    --ink-50:  #f7f9fc;

    --danger:  #d24545;
    --danger-soft: #fbe9e9;
    --success: #1f9d6a;
    --success-soft: #e4f6ee;
    --warning: #c98a14;
    --warning-soft: #fdf3dc;
    --info:    #2c6ad1;
    --info-soft: #e3edfa;

    --shadow-xs: 0 1px 2px rgba(15, 23, 34, 0.04);
    --shadow-sm: 0 2px 6px rgba(15, 23, 34, 0.06), 0 1px 2px rgba(15, 23, 34, 0.04);
    --shadow-md: 0 8px 24px -8px rgba(15, 23, 34, 0.12), 0 2px 6px rgba(15, 23, 34, 0.06);
    --shadow-lg: 0 18px 48px -16px rgba(15, 23, 34, 0.18), 0 4px 12px rgba(15, 23, 34, 0.06);
    --shadow-brand: 0 8px 22px -10px rgba(0, 167, 157, 0.55);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --radius-pill: 999px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    --font-display: "Plus Jakarta Sans", "Mukta Vaani", "Segoe UI Variable",
                    "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont,
                    "Helvetica Neue", Arial, sans-serif;
    --font-body:    "Inter Tight", "Mukta Vaani", "Segoe UI Variable",
                    "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont,
                    "Helvetica Neue", Arial, sans-serif;

    --transition: 180ms cubic-bezier(.4,.0,.2,1);
}

/* ---------- Base ----------------------------------------------------------- */
html, body {
    background: linear-gradient(180deg, #f6f8fa 0%, #eef1f5 100%) !important;
    color: var(--ink-800);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss01", "cv11";
}

* { box-sizing: border-box; }

/* Tabular figures everywhere a digit might appear in a "value" position.
   Numbers in tables, badges, doc-codes, fuel/meter/date values stay aligned. */
.doc-number,
.detail-text,
.receipt-amount,
.receipt-doc,
.vehicle-status-value,
.table td,
.table th,
.badge,
.form-control[type="number"],
.form-control[type="date"],
.form-control[type="time"],
input[type="number"].form-control,
input[type="date"].form-control,
input[type="time"].form-control,
.input-suffix {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum", "lnum";
}

a {
    color: var(--brand-600);
    text-decoration: none;
    transition: color var(--transition);
}
    a:hover { color: var(--brand-700); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--ink-900);
    letter-spacing: -0.01em;
    font-weight: 700;
}

::selection { background: var(--brand-100); color: var(--brand-800); }

/* ---------- Container chrome ---------------------------------------------- */
.contentbar {
    padding: 24px 18px 32px;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}

.back-button {
    background: #fff;
    border: 1px solid var(--ink-200);
    color: var(--ink-700);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    cursor: pointer;
    box-shadow: var(--shadow-xs);
}
    .back-button:hover {
        background: var(--brand-50);
        border-color: var(--brand-300);
        color: var(--brand-700);
        transform: translateX(-2px);
        box-shadow: 0 6px 14px -8px rgba(0, 167, 157, 0.4);
    }
    .back-button:active { transform: translateX(-1px); }
    .back-button:focus-visible {
        outline: 0;
        box-shadow: 0 0 0 4px rgba(0, 167, 157, 0.22);
    }
    .back-button i { font-size: 16px; }

.main-title-img {
    width: 220px;
    max-width: 70vw;
    height: auto;
    display: block;
    margin: 4px auto;
}

/* The greeting card (logo + welcome line) */
.app-header-card {
    border: 1px solid var(--ink-200);
    background: #fff;
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
    .app-header-card hr {
        border: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--ink-200), transparent);
        margin: 14px 0 10px;
    }

.app-header-bar {
    display: flex;
    align-items: center;
    gap: 12px;
}
.app-header-logo {
    flex: 1;
    display: flex;
    justify-content: center;
}
.app-header-spacer { width: 40px; flex: 0 0 40px; }

.app-welcome {
    text-align: center;
    margin: 0;
    color: var(--ink-500);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.01em;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
}
    .app-welcome strong {
        color: var(--ink-900);
        font-weight: 700;
        letter-spacing: -0.005em;
    }
    .app-welcome-vehicle {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 3px 10px 3px 8px;
        border-radius: var(--radius-pill);
        background: var(--brand-50);
        color: var(--brand-700);
        font-weight: 700;
        font-size: 11.5px;
        letter-spacing: 0.08em;
        border: 1px solid var(--brand-100);
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
    }
        .app-welcome-vehicle::before {
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--brand-500);
            box-shadow: 0 0 0 2px rgba(0, 167, 157, 0.18);
        }

/* Legacy fallback if a view still uses the original wrapper structure */
.contentbar > .row:first-child .card .card-title {
    color: var(--ink-600);
    font-weight: 500;
    letter-spacing: 0.02em;
    font-size: 13px !important;
}

/* Page-title gradient strip */
.title-header-style {
    background: linear-gradient(120deg, #0f4d47 0%, var(--brand-700) 35%, var(--brand-500) 75%, #14c6b9 100%) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-brand) !important;
    border: none;
    position: relative;
    overflow: hidden;
}
    .title-header-style::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 85% -20%, rgba(255,255,255,0.22), transparent 55%),
            radial-gradient(circle at 0% 120%, rgba(255,255,255,0.10), transparent 50%);
        pointer-events: none;
    }
    .title-header-style::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 64px;
        height: 3px;
        transform: translateX(-50%);
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent);
        border-radius: 3px;
    }
    .title-header-style .card-body { padding: 16px 20px; }
    .title-header-style h3 {
        margin: 0;
        color: #fff;
        font-family: var(--font-display);
        font-size: 1.05rem;
        font-weight: 700;
        letter-spacing: 0.20em;
        text-transform: uppercase;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }

/* ---------- Cards ---------------------------------------------------------- */
.card {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm);
    padding: 0;
    transition: box-shadow var(--transition), transform var(--transition);
}
    .card:hover { box-shadow: var(--shadow-md); }
    .card .card-body { padding: 22px; }

.iw-card { background: #fff; }

/* Form section divider */
.iw-form-row {
    border-bottom: 1px dashed var(--ink-200);
    padding-bottom: 18px;
    margin-bottom: 18px;
}

/* ---------- Typography helpers -------------------------------------------- */
.text-muted { color: var(--ink-500) !important; }
.text-danger { color: var(--danger) !important; }

label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-700);
    letter-spacing: 0.01em;
    margin-bottom: 6px;
    display: inline-block;
}

.required-asterisk,
.required-star {
    color: var(--danger);
    font-weight: 700;
    margin-left: 2px;
    font-size: 14px;
}

.iw-input-help-text { font-size: 12px; color: var(--ink-500); }

/* ---------- Form controls ------------------------------------------------- */
.form-control {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--ink-900);
    background-color: #fff;
    border: 1.5px solid var(--ink-200);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    height: 48px;
    width: 100%;
    margin-bottom: 4px;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
    box-shadow: var(--shadow-xs);
    -webkit-appearance: none;
    appearance: none;
}
    .form-control::placeholder { color: var(--ink-400); }
    .form-control:hover:not(:focus) { border-color: var(--ink-300); }
    .form-control:focus {
        border-color: var(--brand-500);
        outline: 0;
        box-shadow: 0 0 0 1px var(--brand-500), 0 0 0 5px rgba(0, 167, 157, 0.15);
        background: #fff;
    }
    .form-control:focus-visible {
        border-color: var(--brand-500);
        outline: 0;
        box-shadow: 0 0 0 1px var(--brand-500), 0 0 0 5px rgba(0, 167, 157, 0.15);
    }
    .form-control[readonly] {
        background: var(--ink-50);
        color: var(--ink-700);
        border-color: var(--ink-200);
    }

textarea.form-control { height: auto; min-height: 120px; padding: 12px 14px; resize: vertical; }

select.form-control {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath fill='none' stroke='%23495260' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

input[type="date"].form-control,
input[type="time"].form-control { padding-right: 12px; }

input[type="file"].form-control { padding: 11px 12px; }

.form-group { margin-bottom: 14px; }

/* Inline label-input rows (used in approve/reject) */
.form-inline {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
    .form-inline label { margin-bottom: 0; flex: 0 0 auto; }
    .form-inline .form-control { flex: 1 1 auto; }

/* select2 alignment */
.select2-container .select2-selection--single {
    height: 48px !important;
    border: 1.5px solid var(--ink-200) !important;
    border-radius: var(--radius-md) !important;
    padding: 10px 12px !important;
    background-color: #fff !important;
    box-shadow: var(--shadow-xs);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--ink-900) !important;
    line-height: 1.5 !important;
    padding-left: 0 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px !important;
    right: 12px !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default .select2-selection--single:focus {
    border-color: var(--brand-400) !important;
    box-shadow: 0 0 0 4px rgba(0, 167, 157, 0.18) !important;
}

/* ---------- Buttons -------------------------------------------------------- */
.btn {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: 0.01em;
    padding: 12px 22px;
    border-radius: var(--radius-md);
    border: 1.5px solid transparent;
    transition: all var(--transition);
    line-height: 1.2;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
    .btn:focus, .btn.focus {
        outline: 0;
        box-shadow: 0 0 0 4px rgba(0, 167, 157, 0.22);
    }
    .btn:disabled, .btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.btn-lg { padding: 14px 26px; font-size: 16px; border-radius: var(--radius-md); }
.btn-sm { padding: 8px 14px; font-size: 13px; border-radius: var(--radius-sm); }
.btn-block { width: 100%; }
.font-18 { font-size: 16px !important; }

.btn-primary {
    background: linear-gradient(180deg, var(--brand-500) 0%, var(--brand-600) 100%);
    border-color: var(--brand-600);
    color: #fff;
    box-shadow: var(--shadow-brand);
    position: relative;
    overflow: hidden;
}
    .btn-primary::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 50%);
        pointer-events: none;
    }
    .btn-primary:hover, .btn-primary:focus {
        background: linear-gradient(180deg, var(--brand-600) 0%, var(--brand-700) 100%);
        border-color: var(--brand-700);
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 14px 30px -12px rgba(0, 167, 157, 0.55);
    }
    .btn-primary:active { transform: translateY(0); }

.btn-secondary {
    background: #fff;
    border-color: var(--ink-300);
    color: var(--ink-700);
}
    .btn-secondary:hover, .btn-secondary:focus {
        background: var(--ink-100);
        border-color: var(--ink-400);
        color: var(--ink-800);
    }

.btn-success {
    background: linear-gradient(180deg, var(--brand-500) 0%, var(--brand-600) 100%);
    border-color: var(--brand-600);
    color: #fff;
}
    .btn-success:hover, .btn-success:focus {
        background: linear-gradient(180deg, var(--brand-600) 0%, var(--brand-700) 100%);
        border-color: var(--brand-700);
        color: #fff;
    }

.btn-danger {
    background: linear-gradient(180deg, #e25555 0%, var(--danger) 100%);
    border-color: var(--danger);
    color: #fff;
    box-shadow: 0 8px 22px -10px rgba(210, 69, 69, 0.55);
}
    .btn-danger:hover, .btn-danger:focus {
        background: linear-gradient(180deg, var(--danger) 0%, #b53737 100%);
        border-color: #b53737;
        color: #fff;
        transform: translateY(-1px);
    }

.btn-info {
    background: var(--info);
    border-color: var(--info);
    color: #fff;
}
    .btn-info:hover { background: #234fa3; border-color: #234fa3; color: #fff; }

.btn-black {
    background: linear-gradient(180deg, var(--ink-800) 0%, var(--ink-900) 100%);
    border-color: var(--ink-900);
    color: #fff;
    box-shadow: 0 10px 28px -14px rgba(15, 23, 34, 0.6);
}
    .btn-black:hover, .btn-black:focus {
        background: linear-gradient(180deg, var(--ink-900) 0%, #050a12 100%);
        color: #fff;
        transform: translateY(-1px);
    }

/* ---------- Service-list dashboard --------------------------------------- */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.dash-tile {
    --tile-bg-1: var(--brand-500);
    --tile-bg-2: var(--brand-700);
    --tile-fg: #fff;
    --tile-glow: rgba(0, 167, 157, 0.45);

    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    min-height: 150px;
    padding: 18px !important;
    text-align: left;
    border: none !important;
    border-radius: var(--radius-lg) !important;
    background: linear-gradient(150deg, var(--tile-bg-1) 0%, var(--tile-bg-2) 100%) !important;
    color: var(--tile-fg) !important;
    box-shadow: 0 12px 28px -16px var(--tile-glow), var(--shadow-xs);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--transition), box-shadow var(--transition);
    cursor: pointer;
}
    .dash-tile::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 88% -10%, rgba(255,255,255,0.28), transparent 55%),
            radial-gradient(circle at 0% 110%, rgba(0,0,0,0.18), transparent 50%);
        z-index: -1;
        pointer-events: none;
    }
    .dash-tile:hover, .dash-tile:focus {
        transform: translateY(-3px);
        box-shadow: 0 18px 36px -16px var(--tile-glow), var(--shadow-md);
        color: var(--tile-fg) !important;
        outline: 0;
    }
    .dash-tile:active { transform: translateY(-1px); }

.dash-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    margin-bottom: auto;
}
    .dash-tile-icon img {
        width: 28px !important;
        height: 28px;
        object-fit: contain;
        margin: 0 !important;
        filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,0.18));
        transition: transform var(--transition);
    }
.dash-tile:hover .dash-tile-icon img { transform: scale(1.06); }

.dash-tile-label {
    display: flex !important;
    flex-direction: column;
    margin: 14px 0 0 !important;
    color: var(--tile-fg) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    padding: 0 !important;
    background: transparent !important;
}
.dash-tile-title {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.78;
    line-height: 1.2;
}
.dash-tile-sub {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin-top: 4px;
    color: #fff;
}
.dash-tile-arrow {
    position: absolute;
    right: 16px;
    bottom: 14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.28);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    color: #fff;
    transition: transform var(--transition), background var(--transition);
}
.dash-tile:hover .dash-tile-arrow {
    background: rgba(255, 255, 255, 0.28);
    transform: translateX(2px);
}

/* Tile color variants */
.dash-tile--primary { --tile-bg-1: #14c2b3; --tile-bg-2: var(--brand-700); --tile-glow: rgba(0,167,157,0.5); }
.dash-tile--ink     { --tile-bg-1: #2c3744; --tile-bg-2: #0f1722;       --tile-glow: rgba(15,23,34,0.45); }
.dash-tile--info    { --tile-bg-1: #3776e0; --tile-bg-2: #1c4796;       --tile-glow: rgba(55,118,224,0.45); }
.dash-tile--accent  { --tile-bg-1: #6b50d4; --tile-bg-2: #38258a;       --tile-glow: rgba(107,80,212,0.45); }
.dash-tile--warn    { --tile-bg-1: #e08a2c; --tile-bg-2: #a35a07;       --tile-glow: rgba(224,138,44,0.45); }

.dash-tile--full { grid-column: span 2; min-height: 130px; }
    .dash-tile--full .dash-tile-icon { margin-bottom: 12px; }

/* Legacy .btn-action-btn rule kept for any view that still uses it without
   the new tile structure. */
.btn-action-btn:not(.dash-tile) {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 140px;
    padding: 22px 14px !important;
    border-radius: var(--radius-lg) !important;
    color: #fff;
    font-weight: 600;
    border: none !important;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
    .btn-action-btn:not(.dash-tile)::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 80% 0%, rgba(255,255,255,0.18), transparent 60%);
        z-index: -1;
        pointer-events: none;
    }
    .btn-action-btn:not(.dash-tile):hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
        color: #fff;
    }
    .btn-action-btn:not(.dash-tile) img,
    .btn-action-btn:not(.dash-tile) .btn-icon-img {
        width: 46px !important;
        height: 46px;
        object-fit: contain;
        margin: 0 0 4px !important;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12));
    }
    .btn-action-btn:not(.dash-tile) .btn-icon-text,
    .btn-action-btn:not(.dash-tile) p {
        font-size: 12.5px !important;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-weight: 700;
        line-height: 1.35;
        margin: 0;
    }

.btn-icon-img {
    transition: filter var(--transition), transform var(--transition);
}
.btn-icon-text {
    font-size: 14px;
    color: var(--ink-800);
}
.btn-icon-col-img {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
}

/* Pastel buttons (kept names for compatibility) */
.btn-pastel {
    color: #fff;
    border: none;
    transition: all var(--transition);
}
    .btn-pastel:hover {
        background-color: #fff;
        color: var(--ink-900);
        border: 1px solid var(--ink-300);
    }
    .btn-pastel:hover .btn-icon-img { filter: invert(1); }

.btn-pastel-color-1 { background-color: var(--brand-300); }
.btn-pastel-color-2 { background-color: #f7c7a3; }
.btn-pastel-color-3 { background-color: #c6a6e1; }
.btn-pastel-color-4 { background-color: #ff8a8a; }
.btn-pastel-color-5 { background-color: #80c6e9; }
.btn-pastel-color-6 { background-color: #b5f3b5; }

.btn-pastel-color-outline {
    background-color: #fff;
    color: var(--brand-600);
    border: 1.5px solid var(--brand-500);
    font-weight: 600;
    box-shadow: var(--shadow-xs);
}
    .btn-pastel-color-outline:hover,
    .btn-pastel-color-outline:focus {
        background: var(--brand-50);
        color: var(--brand-700);
        border-color: var(--brand-600);
    }

/* File upload control */
.btn-file-upload {
    background: #fff;
    border: 1.5px dashed var(--brand-400);
    color: var(--brand-700);
    font-weight: 600;
    border-radius: var(--radius-md);
    padding: 12px 18px;
    cursor: pointer;
    transition: all var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
    .btn-file-upload:hover {
        background: var(--brand-50);
        border-style: solid;
        color: var(--brand-800);
    }
    .btn-file-upload i { font-size: 18px; }

.custom-file-upload, .iw-custom-choose-file {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
    .custom-file-upload #fileName,
    .iw-custom-choose-file #fileName,
    .custom-file-upload .ml-2 {
        font-size: 13px;
        color: var(--ink-600);
        word-break: break-all;
    }
    .custom-file-upload img#mainImagePreview {
        margin-top: 12px;
        border-radius: var(--radius-md);
        border: 1px solid var(--ink-200);
        box-shadow: var(--shadow-sm);
    }

.iw-custom-choose-file {
    padding: 10px 14px;
    background: #fff;
    color: var(--brand-700);
    font-size: 14px;
    font-weight: 600;
    border: 1.5px dashed var(--brand-400);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: center;
    height: 44px;
    transition: all var(--transition);
}
    .iw-custom-choose-file i { margin-right: 8px; font-size: 18px; }
    .iw-custom-choose-file:hover {
        background: var(--brand-50);
        color: var(--brand-800);
        border-style: solid;
    }

/* Return-home tile */
.btn-return-home {
    width: 65% !important;
    min-height: 180px;
    padding: 24px !important;
    flex-direction: column;
    background: linear-gradient(160deg, var(--brand-500) 0%, var(--brand-700) 100%) !important;
    border: none !important;
    color: #fff !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-brand) !important;
}
    .btn-return-home:hover { transform: translateY(-2px); }
    .btn-return-home img { width: 60px !important; }
    .btn-return-home .btn-icon-text {
        color: #fff !important;
        font-size: 14px !important;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        margin-top: 8px;
    }

/* ---------- Alerts -------------------------------------------------------- */
.alert {
    width: auto;
    border-radius: var(--radius-md);
    padding: 14px 16px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 16px;
    box-shadow: var(--shadow-xs);
}

.alert-danger {
    color: #8a2727;
    background: var(--danger-soft);
    border-color: rgba(210, 69, 69, 0.25);
}
.alert-success {
    color: #0c5e3f;
    background: var(--success-soft);
    border-color: rgba(31, 157, 106, 0.25);
}
.alert-info {
    color: #244e96 !important;
    background: var(--info-soft);
    border-color: rgba(44, 106, 209, 0.25);
}
.alert ul { margin: 0; padding-left: 18px; }

/* ---------- Badges -------------------------------------------------------- */
.badge {
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
}
.badge-info {
    background: var(--warning-soft);
    color: #8a5b0a;
    border-color: rgba(201, 138, 20, 0.25);
}
.badge-success {
    background: var(--success-soft);
    color: #0c5e3f;
    border-color: rgba(31, 157, 106, 0.25);
}
.badge-danger {
    background: var(--danger-soft);
    color: #8a2727;
    border-color: rgba(210, 69, 69, 0.25);
}
.badge-secondary {
    background: var(--ink-100);
    color: var(--ink-700);
    border-color: var(--ink-200);
}
.badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.8;
}

.account-data-status { font-size: 14px; float: right; display: block; }
.status-badge {
    display: inline-block;
    color: #fff !important;
    font-size: 12px !important;
    float: right;
    margin-top: 0px !important;
}

/* ---------- Tables -------------------------------------------------------- */
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    font-size: 14px;
}
    .table th, .table td {
        padding: 12px 14px;
        vertical-align: middle;
        border-bottom: 1px solid var(--ink-200);
    }
    .table th { font-weight: 600; color: var(--ink-700); }
    .table tbody tr:last-child td,
    .table tbody tr:last-child th { border-bottom: none; }
    .table tbody tr { transition: background var(--transition); }
    .table tbody tr:hover { background: var(--ink-50); }

.table-bordered { border: 1px solid var(--ink-200); }
.table-bordered th, .table-bordered td { border: 1px solid var(--ink-200); }

.table .thead-dark th,
.thead-dark th {
    color: #fff !important;
    background: linear-gradient(180deg, var(--brand-600) 0%, var(--brand-700) 100%) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    font-weight: 600;
    letter-spacing: 0.04em;
    font-size: 12.5px;
    text-transform: uppercase;
}

.table-responsive { -webkit-overflow-scrolling: touch; }

/* ---------- Submission list cards (mobile) -------------------------------- */
.card-list-border {
    border: 1px solid var(--ink-200) !important;
    border-left: 4px solid var(--brand-500) !important;
    transition: box-shadow var(--transition), transform var(--transition);
}
    .card-list-border:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-1px);
    }

.card-list-card-body { padding: 16px !important; }

/* New mobile receipt list */
.receipt-list { display: flex; flex-direction: column; gap: 12px; }

.receipt-card {
    --status-color: var(--ink-400);
    --status-soft: var(--ink-100);
    border: 1px solid var(--ink-200) !important;
    border-left: 4px solid var(--status-color) !important;
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
    position: relative;
    overflow: hidden;
}
    .receipt-card::before {
        content: "";
        position: absolute;
        left: 0; top: 0; bottom: 0;
        width: 4px;
        background: var(--status-color);
        opacity: 0.15;
        filter: blur(8px);
        pointer-events: none;
    }
.receipt-card--pending  { --status-color: var(--warning); --status-soft: var(--warning-soft); }
.receipt-card--approved { --status-color: var(--success); --status-soft: var(--success-soft); }
.receipt-card--reject   { --status-color: var(--danger);  --status-soft: var(--danger-soft); }
.receipt-card--default  { --status-color: var(--ink-400); --status-soft: var(--ink-100); }

.receipt-card:hover {
    box-shadow: 0 12px 28px -16px rgba(15,23,34,0.18), var(--shadow-sm);
    transform: translateY(-2px);
}
.receipt-card:active { transform: translateY(-1px); }

.receipt-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--ink-200);
}
    .receipt-card-head > div:first-child { display: flex; flex-direction: column; }

.receipt-card-eyebrow { display: block; }

.receipt-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 12px;
    margin-bottom: 14px;
}
    .receipt-card-grid > div { display: flex; flex-direction: column; }
    .receipt-card-grid > div:nth-child(3) { grid-column: 1 / -1; }

.receipt-card-actions {
    display: flex;
    gap: 8px;
}
    .receipt-card-actions .btn {
        flex: 1;
        padding: 10px 14px !important;
        border-radius: var(--radius-md) !important;
        font-size: 12.5px !important;
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 0.06em;
        margin-top: 0 !important;
    }

.receipt-unit {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-left: 2px;
}

/* Desktop receipt table */
.receipt-table { font-size: 14px; }
    .receipt-table tbody tr {
        transition: background var(--transition), box-shadow var(--transition);
    }
    .receipt-table tbody tr:hover {
        background: var(--brand-50) !important;
        box-shadow: inset 3px 0 0 0 var(--brand-500);
    }
    .receipt-table .receipt-doc {
        font-family: var(--font-display);
        font-weight: 700;
        color: var(--brand-700);
        font-size: 14.5px;
        letter-spacing: -0.01em;
    }
    .receipt-table .receipt-amount {
        font-family: var(--font-display);
        font-weight: 700;
        color: var(--ink-900);
        font-size: 14.5px;
        letter-spacing: -0.01em;
    }
    .receipt-table .text-right { text-align: right; }
    .receipt-table .text-center { text-align: center; }

.receipt-actions {
    display: inline-flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
}
    .receipt-actions .btn { min-width: 90px; }

/* Empty state */
.empty-state {
    text-align: center;
    padding: 40px 24px !important;
}
.empty-state-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--brand-50);
    color: var(--brand-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    border: 1px solid var(--brand-100);
}
.empty-state h5 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--ink-900);
    margin: 0 0 8px;
}
.empty-state p {
    color: var(--ink-500);
    font-size: 14px;
    margin: 0 auto 22px;
    max-width: 320px;
}

.detail-text-div {
    font-size: 12px;
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    line-height: 1.4;
}
.detail-text {
    font-size: 17px;
    color: var(--ink-900);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    display: inline-block;
    margin-top: 2px;
}
.detail-status {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

.doc-number {
    font-size: 22px;
    color: var(--brand-700);
    font-weight: 800;
    letter-spacing: -0.01em;
    display: inline-block;
    margin-top: 2px;
}

.view-receipt-btn,
.delete-receipt-btn {
    min-width: 110px;
    padding: 8px 14px !important;
    font-size: 12.5px !important;
    border-radius: var(--radius-md) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}
.delete-receipt-btn {
    background: linear-gradient(180deg, #e25555 0%, var(--danger) 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 6px 18px -10px rgba(210, 69, 69, 0.5);
}
    .delete-receipt-btn:hover {
        background: linear-gradient(180deg, var(--danger) 0%, #b53737 100%) !important;
        color: #fff !important;
    }

/* ---------- Last meter / fuel summary tile (legacy) ---------------------- */
.last-meter-reading {
    display: flex;
    justify-content: center;
    align-items: center;
}
    .last-meter-reading p {
        margin-bottom: 0;
        padding: 14px 28px;
        border: 1px solid var(--brand-300);
        border-radius: var(--radius-md);
        width: 100%;
        background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%);
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        text-align: center;
        box-shadow: var(--shadow-brand);
    }

/* ---------- Vehicle status summary (FuelReceiptSubmit) ------------------- */
.vehicle-status {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 8px;
    padding: 22px 18px;
    margin-bottom: 22px;
    background:
        linear-gradient(135deg, #0f4d47 0%, var(--brand-700) 45%, var(--brand-500) 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-brand);
    position: relative;
    overflow: hidden;
}
    .vehicle-status::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 90% -20%, rgba(255,255,255,0.22), transparent 55%),
            radial-gradient(circle at 0% 120%, rgba(0,0,0,0.22), transparent 55%);
        pointer-events: none;
    }
    .vehicle-status::after {
        content: "";
        position: absolute;
        inset: auto -40% -60% -40%;
        height: 200px;
        background: radial-gradient(ellipse at center top, rgba(255,255,255,0.06), transparent 70%);
        pointer-events: none;
    }

.vehicle-status-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    position: relative;
    padding: 0 4px;
}

.vehicle-status-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    backdrop-filter: blur(2px);
}
    .vehicle-status-icon--alert {
        background: rgba(255, 59, 59, 0.22);
        border-color: rgba(255, 120, 120, 0.55);
        color: #ffd5d5;
        animation: fmGlowPulse 2.4s ease-in-out infinite;
    }

.vehicle-status-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.78;
    line-height: 1;
}
.vehicle-status-value {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}
    .vehicle-status-value small {
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.08em;
        opacity: 0.7;
        text-transform: uppercase;
    }
    .vehicle-status-value--alert {
        color: #ff5757;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    }
        .vehicle-status-value--alert small {
            color: #ff8a8a;
            opacity: 0.95;
        }

.vehicle-status-divider {
    width: 1px;
    align-self: center;
    height: 72px;
    background: linear-gradient(180deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.45) 30%,
        rgba(255,255,255,0.45) 70%,
        rgba(255,255,255,0) 100%);
    margin: 0 4px;
    position: relative;
}
    .vehicle-status-divider::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.65);
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
    }

@media (max-width: 480px) {
    .vehicle-status { padding: 18px 12px; gap: 4px; }
    .vehicle-status-icon { width: 32px; height: 32px; }
    .vehicle-status-value { font-size: 24px; }
    .vehicle-status-divider { height: 64px; }
}

/* ---------- Form sections ------------------------------------------------ */
.form-card .card-body { padding: 22px; }

.form-section {
    margin-bottom: 24px;
    padding-bottom: 22px;
    border-bottom: 1px dashed var(--ink-200);
}
    .form-section:last-of-type { border-bottom: none; padding-bottom: 0; margin-bottom: 8px; }

.form-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.form-section-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #fff 0%, var(--brand-50) 100%);
    color: var(--brand-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid var(--brand-100);
    box-shadow: 0 2px 6px -2px rgba(0, 167, 157, 0.18), inset 0 1px 0 #fff;
}
.form-section-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink-800);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 540px) {
    .form-grid { grid-template-columns: 1fr 1fr; }
    .form-grid .form-group--full { grid-column: 1 / -1; }
}

/* ---------- Input group with suffix -------------------------------------- */
.input-group {
    position: relative;
    display: flex;
    align-items: stretch;
}
    .input-group .form-control {
        flex: 1 1 auto;
        padding-right: 60px;
    }
.input-suffix {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-500);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    pointer-events: none;
}

/* ---------- Upload dropzone ---------------------------------------------- */
.upload-dropzone {
    border: 1.5px dashed var(--ink-300);
    border-radius: var(--radius-lg);
    background: var(--ink-50);
    padding: 22px 18px;
    text-align: center;
    transition: all var(--transition);
    flex-direction: column;
    gap: 12px;
}
    .upload-dropzone:hover {
        border-color: var(--brand-400);
        background: var(--brand-50);
    }

.upload-dropzone-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto;
}

.upload-filename {
    font-size: 13px;
    color: var(--ink-700);
    font-weight: 500;
    word-break: break-all;
}

.upload-preview-wrap {
    width: 100%;
    margin-top: 4px;
}
.upload-preview {
    width: 100%;
    max-height: 320px;
    object-fit: contain;
    border-radius: var(--radius-md);
    background: #fff;
    border: 1px solid var(--ink-200);
    box-shadow: var(--shadow-sm);
}

/* ---------- Form actions footer ----------------------------------------- */
.form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--ink-200);
}
    .form-actions .btn { min-width: 120px; }
@media (max-width: 540px) {
    .form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
        .form-actions .btn { width: 100%; }
}

/* ---------- Receipt image lightbox (custom overlay) --------------------- */
.receipt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    /* Use the small viewport height so the overlay never extends behind
       a mobile browser's URL bar (iOS Safari, Android Chrome). */
    height: 100vh;
    height: 100svh;
    max-height: 100svh;
    z-index: 1080;
    background: rgba(15, 23, 34, 0.92);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 16px 24px; /* extra top padding so X button never overlaps the image */
    box-sizing: border-box;
    overflow: hidden;
    animation: receiptOverlayIn 200ms ease-out;
    cursor: zoom-out;
}
    .receipt-overlay[hidden] { display: none !important; }

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

.receipt-overlay-img {
    display: block;
    max-width: 100%;
    /* Explicit numeric ceiling so the image never grows taller than the
       safe content area, even if a parent's height resolves oddly. */
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
    background: #fff;
    cursor: default;
    /* Stop image clicks from triggering the overlay's "close on backdrop" */
}

.receipt-overlay-close {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 1090;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    font-weight: 300;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
    .receipt-overlay-close:hover,
    .receipt-overlay-close:focus {
        background: rgba(255, 255, 255, 0.32);
        border-color: rgba(255, 255, 255, 0.55);
        color: #fff;
        outline: 0;
        transform: scale(1.05);
    }
    .receipt-overlay-close:active { transform: scale(0.94); }

/* Lock body scroll while the lightbox is open */
body.receipt-overlay-open {
    overflow: hidden;
    position: fixed; /* prevent iOS rubber-band scrolling behind overlay */
    width: 100%;
}

@media (min-width: 768px) {
    .receipt-overlay { padding: 80px 32px 32px; }
    .receipt-overlay-close {
        top: 16px;
        right: 16px;
        width: 48px;
        height: 48px;
        font-size: 30px;
    }
}

/* Honour iOS notch / safe area */
@supports (padding: max(0px)) {
    .receipt-overlay-close {
        top: max(12px, env(safe-area-inset-top));
        right: max(12px, env(safe-area-inset-right));
    }
    .receipt-overlay {
        padding-top: max(64px, calc(env(safe-area-inset-top) + 56px));
        padding-bottom: max(24px, env(safe-area-inset-bottom));
    }
}

/* ---------- Login page ---------------------------------------------------- */
body.authenticate-bg {
    background:
        radial-gradient(ellipse 80% 60% at 20% 0%, rgba(0, 167, 157, 0.18), transparent 60%),
        radial-gradient(ellipse 70% 50% at 90% 100%, rgba(7, 108, 100, 0.18), transparent 55%),
        linear-gradient(180deg, #f6f8fa 0%, #e9eef3 100%) !important;
    min-height: 100vh;
}

.auth-box.login-box {
    width: 100%;
    max-width: 420px;
    padding: 24px 16px;
}
.auth-box-right .card {
    border-radius: var(--radius-xl) !important;
    border: 1px solid var(--ink-200);
    box-shadow: var(--shadow-lg);
    padding: 8px !important;
    animation: fmAuthIn 540ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes fmAuthIn {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.auth-box-right .card .card-body {
    padding: 28px 26px !important;
    text-align: center;
}
.logo-img {
    width: 200px;
    max-width: 70vw;
    height: auto;
    margin: 4px auto 18px;
    display: block;
}
.auth-box-right h4 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--ink-900);
    margin: 8px 0 22px;
    letter-spacing: -0.01em;
}
.auth-box-right .form-group { margin-bottom: 12px; text-align: left; }

.login-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--brand-700);
    text-transform: uppercase;
    margin: 4px 0 4px;
}
.login-title {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    color: var(--ink-900);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}
.login-sub {
    color: var(--ink-500);
    font-size: 14px;
    margin: 0 0 22px;
    line-height: 1.5;
}
.login-form { text-align: left; }
.login-submit {
    margin-top: 6px;
    width: 100%;
    padding: 14px 18px !important;
    letter-spacing: 0.04em;
}

.login-input {
    position: relative;
    display: flex;
    align-items: stretch;
}
    .login-input .form-control {
        padding-left: 44px;
        padding-right: 14px;
    }
    .login-input:has(.login-password-toggle) .form-control {
        padding-right: 48px;
    }

.login-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-400);
    pointer-events: none;
    transition: color var(--transition);
    z-index: 1;
}
.login-input:focus-within .login-input-icon { color: var(--brand-600); }

.login-password-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--ink-400);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
    z-index: 1;
}
    .login-password-toggle:hover { color: var(--brand-700); background: var(--ink-100); }
    .login-password-toggle:focus-visible {
        outline: 0;
        color: var(--brand-700);
        box-shadow: 0 0 0 3px rgba(0, 167, 157, 0.25);
    }

.login-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 4px;
    color: var(--ink-400);
}
    .login-or::before, .login-or::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--ink-200);
    }
    .login-or h6 {
        margin: 0;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.18em;
        color: var(--ink-400);
        text-transform: uppercase;
    }

.login-help {
    color: var(--ink-500);
    font-size: 13px;
    margin: 14px 0 0;
    line-height: 1.55;
    text-align: center;
}
.login-foot {
    font-size: 11.5px;
    color: var(--ink-400);
    margin: 22px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--ink-200);
    text-align: center;
    letter-spacing: 0.04em;
}

/* ---------- Error page --------------------------------------------------- */
.auth-box.error-box {
    width: 100%;
    max-width: 480px;
    padding: 24px 16px;
}
.error-state {
    text-align: center;
    padding: 28px 24px !important;
}
.error-state .logo-img { margin-bottom: 14px; }
.error-illustration {
    margin: 4px auto 18px;
    width: 100%;
    max-width: 280px;
}
    .error-illustration img { width: 100%; height: auto; }
.error-code {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--danger);
    background: var(--danger-soft);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    margin-bottom: 8px;
}
.error-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--ink-900);
    margin: 4px 0 8px;
    letter-spacing: -0.01em;
}
.error-sub {
    color: var(--ink-500);
    font-size: 14px;
    margin: 0 auto 22px;
    max-width: 320px;
    line-height: 1.55;
}

/* ---------- Thank-you / success page ------------------------------------ */
.thankyou-state {
    text-align: center;
    padding: 14px 8px 8px;
}
.thankyou-icon {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--success-soft);
    color: var(--success);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
    border: 1px solid rgba(31, 157, 106, 0.25);
    box-shadow: 0 12px 28px -16px rgba(31, 157, 106, 0.5);
    animation: thankyou-pop 360ms cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes thankyou-pop {
    from { transform: scale(0.6); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.thank-you-header {
    line-height: 1.45;
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--ink-900);
    margin: 8px 0 12px;
}
.thankyou-sub {
    color: var(--ink-500);
    font-size: 14px;
    margin: 0 auto 26px;
    max-width: 360px;
    line-height: 1.55;
}
.thankyou-home-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    padding: 14px 26px !important;
    border-radius: var(--radius-md) !important;
}
    .thankyou-home-btn img.btn-icon-img {
        width: 22px !important;
        height: 22px;
        filter: brightness(0) invert(1);
    }
    .thankyou-home-btn .btn-icon-text {
        font-size: 14.5px !important;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        margin: 0;
        color: #fff;
    }

/* ---------- Confirm dialog cards (RequestReload, RequestService) -------- */
.confirm-card .card-body {
    padding: 32px 24px;
    text-align: center;
}
.confirm-icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--brand-50);
    color: var(--brand-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    border: 1px solid var(--brand-100);
}
.confirm-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--ink-900);
    margin: 0 0 10px;
}
.confirm-message {
    font-size: 14.5px;
    color: var(--ink-600);
    line-height: 1.55;
    max-width: 380px;
    margin: 0 auto 26px;
}
.confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
    .confirm-actions .btn { min-width: 130px; }
    .confirm-actions-form { margin: 0; }
@media (max-width: 480px) {
    .confirm-actions {
        flex-direction: column-reverse;
        gap: 8px;
    }
    .confirm-actions .btn,
    .confirm-actions-form .btn { width: 100%; }
}

/* ---------- KYC info list (legacy) --------------------------------------- */
.kyc-info { padding: 10px; }
    .kyc-info li { padding-bottom: 10px; }

/* ---------- Footer -------------------------------------------------------- */
footer {
    margin-top: 24px;
    padding: 18px !important;
    text-align: center;
    border-radius: var(--radius-lg) !important;
    background: #fff !important;
    border: 1px solid var(--ink-200);
    color: var(--ink-500);
    font-size: 12.5px;
    letter-spacing: 0.04em;
    box-shadow: var(--shadow-xs);
}

/* ---------- Misc legacy classes ------------------------------------------ */
.user-name {
    font-size: 24px;
    color: var(--brand-600);
    font-weight: 700;
}
.vehicle-number-p {
    float: right;
    margin-top: -15px;
    font-size: 12px;
    color: var(--ink-500);
}
.vehicle-number {
    font-size: 14px;
    color: var(--ink-700);
    font-weight: 600;
}
.header-div { padding: 0; }

.mb-30 { margin-bottom: 24px; }

/* ---------- Modal sizing override (kept) --------------------------------- */
@media (min-width: 576px) {
    .modal-dialog {
        max-width: 700px;
        margin: 1.75rem auto;
    }
}

/* ---------- Mobile (<= 767px) -------------------------------------------- */
@media (max-width: 767px) {
    body { font-size: 14.5px; }

    .contentbar {
        width: 100%;
        max-width: 100vw;
        padding: 16px 12px 24px;
    }

    .card .card-body { padding: 18px 16px; }

    .main-title-img { width: 65vw; max-width: 240px; }

    .title-header-style h3 {
        font-size: 0.92rem;
        letter-spacing: 0.14em;
    }

    .btn { padding: 12px 18px; font-size: 14.5px; }
    .btn-lg { padding: 14px 22px; font-size: 15.5px; }

    .dashboard-grid { gap: 12px; }
    .dash-tile { min-height: 138px; padding: 16px !important; }
        .dash-tile-icon { width: 46px; height: 46px; }
            .dash-tile-icon img { width: 24px !important; height: 24px; }
        .dash-tile-sub { font-size: 16px; }
        .dash-tile-arrow { width: 24px; height: 24px; font-size: 16px; right: 12px; bottom: 12px; }
    .dash-tile--full { min-height: 116px; }

    .btn-action-btn:not(.dash-tile) {
        min-height: 130px;
        padding: 18px 10px !important;
    }
        .btn-action-btn:not(.dash-tile) img,
        .btn-action-btn:not(.dash-tile) .btn-icon-img {
            width: 40px !important;
            height: 40px;
        }
        .btn-action-btn:not(.dash-tile) .btn-icon-text,
        .btn-action-btn:not(.dash-tile) p { font-size: 11.5px !important; }

    .btn-icon-text { font-size: 12px; }

    .alert { width: 100%; }

    .btn-return-home { width: 80% !important; }

    .form-control { font-size: 16px; height: 50px; } /* 16px prevents iOS zoom */

    .form-inline { flex-direction: column; align-items: stretch; }
        .form-inline .w-25, .form-inline .w-75 { width: 100% !important; }
        .form-inline label { margin-bottom: 4px; }

    .last-meter-reading p { font-size: 14.5px; padding: 12px 16px; }

    .doc-number { font-size: 20px; }
    .detail-text { font-size: 16px; }

    .auth-box.login-box { padding: 16px 12px; }
    .auth-box-right .card .card-body { padding: 22px 18px !important; }

    table[border="0"] { width: 100%; }
}

/* ---------- Very narrow phones ------------------------------------------- */
@media (max-width: 360px) {
    .dash-tile { min-height: 124px; padding: 14px !important; }
    .dash-tile-sub { font-size: 14.5px; }
    .btn-action-btn:not(.dash-tile) { min-height: 118px; padding: 14px 8px !important; }
    .btn-action-btn:not(.dash-tile) .btn-icon-text { font-size: 10.5px !important; }
    .main-title-img { width: 70vw; }
}

/* ---------- Entrance animations ------------------------------------------ */
@keyframes fmRiseIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fmFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fmGlowPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0); }
    50%      { box-shadow: 0 0 0 6px rgba(255, 59, 59, 0.25); }
}

.contentbar > .row {
    animation: fmRiseIn 460ms cubic-bezier(.16,1,.3,1) both;
}
.contentbar > .row:nth-child(1) { animation-delay: 0ms; }
.contentbar > .row:nth-child(2) { animation-delay: 70ms; }
.contentbar > .row:nth-child(3) { animation-delay: 140ms; }
.contentbar > .row:nth-child(4) { animation-delay: 210ms; }

.dashboard-grid .dash-tile {
    animation: fmRiseIn 480ms cubic-bezier(.16,1,.3,1) both;
}
.dashboard-grid .dash-tile:nth-child(1) { animation-delay: 60ms; }
.dashboard-grid .dash-tile:nth-child(2) { animation-delay: 120ms; }
.dashboard-grid .dash-tile:nth-child(3) { animation-delay: 180ms; }
.dashboard-grid .dash-tile:nth-child(4) { animation-delay: 240ms; }
.dashboard-grid .dash-tile:nth-child(5) { animation-delay: 300ms; }

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

/* ---------- Print --------------------------------------------------------- */
@media print {
    body { background: #fff !important; }
    .card { box-shadow: none; border-color: var(--ink-300); }
    .btn, .back-button, footer { display: none !important; }
}