:root {
    --brand-primary: #2563eb;
    --brand-secondary: #7c3aed;
    --brand-accent: #facc15;
    --bg: #f4f6fb;
    --card: #ffffff;
    --text: #1f2a44;
    --muted: #6b7280;
    --success: #22c55e;
    --danger: #ef4444;
    --warning: #f59e0b;
    --border: #dbe3f0;
    --shadow: 0 12px 30px rgba(31, 42, 68, 0.08);
    --radius: 18px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: "Poppins", "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.container {
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto;
}

.flash {
    width: min(1200px, calc(100% - 32px));
    margin: 16px auto;
    padding: 14px 16px;
    border-radius: 14px;
    font-weight: 600;
}
.flash-success { background: #dcfce7; color: #166534; }
.flash-error { background: #fee2e2; color: #991b1b; }

.topbar {
    background: linear-gradient(120deg, var(--brand-secondary), var(--brand-primary));
    color: #fff;
    box-shadow: var(--shadow);
}
.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 0;
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 1.75rem;
}
.brand-icon {
    font-size: 2.1rem;
    background: rgba(255,255,255,0.14);
    border-radius: 14px;
    padding: 10px 12px;
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.nav-links a,
.nav-links button,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    cursor: pointer;
    border-radius: 14px;
    padding: 12px 18px;
    font-weight: 700;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.nav-links a:hover,
.nav-links button:hover,
.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.btn-primary { background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); color: #fff; }
.btn-accent { background: linear-gradient(135deg, #fde047, var(--brand-accent)); color: #172554; }
.btn-success { background: linear-gradient(135deg, #84cc16, var(--success)); color: #fff; }
.btn-danger { background: linear-gradient(135deg, #fb7185, var(--danger)); color: #fff; }
.btn-muted { background: #eef2ff; color: #3730a3; }
.btn-outline { background: #fff; color: var(--text); border: 1px solid var(--border); }
.btn-sm { padding: 8px 12px; border-radius: 10px; font-size: 0.9rem; }

.hero {
    margin: 22px auto 18px;
    background: linear-gradient(120deg, #ec4899 0%, #f97316 60%, #facc15 100%);
    color: #fff;
    padding: 32px 28px;
    border-radius: 18px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}
.hero::before,
.hero::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
}
.hero::before { width: 280px; height: 280px; left: -90px; top: -130px; }
.hero::after { width: 360px; height: 360px; right: -120px; bottom: -160px; }
.hero h1 {
    margin: 0;
    font-size: clamp(2rem, 4.6vw, 4rem);
    line-height: 1.05;
    text-align: center;
    text-shadow: 0 4px 10px rgba(0,0,0,0.14);
}
.hero h1 span { color: #fef08a; }
.hero p {
    margin: 12px 0 0;
    text-align: center;
    font-size: clamp(1rem, 2.1vw, 1.6rem);
    opacity: 0.96;
}

.booking-card,
.card {
    background: var(--card);
    border-radius: 18px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(219, 227, 240, 0.7);
}
.booking-card {
    padding: 30px;
}
.booking-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr 1fr;
    gap: 28px;
}
.section-title {
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 16px;
    color: #243b74;
}
.input, .select, .textarea {
    width: 100%;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 1rem;
    color: var(--text);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}
.textarea { min-height: 110px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus {
    outline: 3px solid rgba(59,130,246,0.14);
    border-color: var(--brand-primary);
}
.input-group { margin-bottom: 16px; }
.input-label { display: block; font-weight: 700; margin-bottom: 8px; }
.help-text { color: var(--muted); font-size: 0.92rem; }

.service-stack {
    display: grid;
    gap: 10px;
}
.service-option {
    border: 0;
    border-radius: 14px;
    color: #fff;
    font-weight: 800;
    text-align: left;
    padding: 16px 18px;
    box-shadow: 0 10px 24px rgba(31,42,68,0.14);
    cursor: pointer;
    opacity: 0.92;
}
.service-option:hover,
.service-option.active { transform: translateY(-1px) scale(1.01); opacity: 1; }
.service-option .meta { font-size: 0.88rem; opacity: 0.92; font-weight: 600; display: block; margin-top: 4px; }
.service-option.oil { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.service-option.brake { background: linear-gradient(135deg, #fb7185, #ef4444); }
.service-option.full { background: linear-gradient(135deg, #84cc16, #22c55e); }
.service-option.other { background: linear-gradient(135deg, #c4b5fd, #8b5cf6); }

.booking-actions {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}
.booking-actions .btn-success {
    font-size: 1.45rem;
    padding: 18px 42px;
    border-radius: 999px;
    min-width: 260px;
}

.trust-row {
    margin: 22px 0 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 18px;
    text-align: center;
}
.trust-item .icon { font-size: 2.5rem; }
.trust-item strong { font-size: 1.35rem; color: #243b74; }

.layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 12px;
    padding: 26px 0 38px;
}
.sidebar {
    background: linear-gradient(180deg, #1e3a8a, #312e81);
    color: #fff;
    padding: 22px;
    border-radius: 24px;
    box-shadow: var(--shadow);
    align-self: start;
    position: sticky;
    top: 18px;
}
.sidebar h3 { margin-top: 0; margin-bottom: 12px; font-size: 1.4rem; }
.sidebar nav { display: grid; gap: 10px; }
.sidebar a {
    background: rgba(255,255,255,0.1);
    padding: 12px 14px;
    border-radius: 12px;
    font-weight: 700;
}
.sidebar a.active,
.sidebar a:hover { background: rgba(255,255,255,0.2); }
.sidebar small { color: rgba(255,255,255,0.82); }
.main-content { display: grid; gap: 20px; }
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.stat-card {
    padding: 22px;
    min-height: 140px;
}
.stat-card h4 { margin: 0; color: var(--muted); font-size: 0.95rem; }
.stat-card .value { font-size: 2.2rem; font-weight: 800; margin-top: 10px; }
.stat-card .hint { font-size: 0.92rem; color: var(--muted); }

.card { padding: 22px; }
.card h2, .card h3 { margin-top: 0; }

.table-wrap { overflow: auto; }
table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}
th, td {
    padding: 12px 10px;
    border-bottom: 1px solid #edf2fb;
    text-align: left;
    vertical-align: top;
}
th { color: #334155; font-size: 0.95rem; }
.status {
    display: inline-flex;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 800;
}
.status-pending { background: #fef3c7; color: #92400e; }
.status-confirmed { background: #dbeafe; color: #1d4ed8; }
.status-in_progress { background: #ede9fe; color: #6d28d9; }
.status-completed { background: #dcfce7; color: #166534; }
.status-cancelled { background: #fee2e2; color: #991b1b; }

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.muted { color: var(--muted); }
.badge {
    display: inline-block;
    background: #eef2ff;
    color: #3730a3;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 6px 10px;
}
.empty-state {
    padding: 22px;
    border: 1px dashed var(--border);
    border-radius: 14px;
    text-align: center;
    color: var(--muted);
}

.landing {
    padding: 60px 0 70px;
}
.landing-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 12px;
    align-items: center;
}
.feature-list {
    display: grid;
    gap: 12px;
    margin-top: 22px;
}
.feature-item {
    display: flex;
    gap: 12px;
    align-items: center;
    background: #fff;
    padding: 14px 16px;
    border-radius: 14px;
    box-shadow: var(--shadow);
}
.hero-card {
    padding: 24px;
    background: linear-gradient(135deg, #1d4ed8, #a855f7);
    color: #fff;
    border-radius: 24px;
    box-shadow: var(--shadow);
}
.hero-card ul { padding-left: 18px; }

.login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}
.login-card {
    width: min(460px, 100%);
    padding: 20px;
}
.login-card h1 { margin-top: 0; }
.small-note { font-size: 0.88rem; color: var(--muted); }

.hours-table td, .hours-table th { min-width: 120px; }
hr.soft {
    border: 0;
    border-top: 1px solid #ecf1fa;
    margin: 24px 0;
}

@media (max-width: 1100px) {
    .booking-grid, .stats-grid, .landing-grid, .layout, .form-grid, .form-grid-3, .trust-row {
        grid-template-columns: 1fr;
    }
    .sidebar { position: static; }
}

@media (max-width: 680px) {
    .topbar-inner,
    .nav-links,
    .inline-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .brand { font-size: 1.35rem; }
    .hero { padding: 26px 18px; }
    .booking-card { padding: 20px; }
    .booking-actions .btn-success {
        width: 100%;
        min-width: 0;
        font-size: 1rem;
    }
}


/* Public booking page refinement to closely match the reference mockup */
.public-page {
    background: #f3f2f7;
}

.public-page .container,
.public-topbar .container {
    width: min(1320px, calc(100% - 32px));
}

.icon-svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    line-height: 0;
    flex: 0 0 auto;
}

.icon-svg svg {
    width: 100%;
    height: 100%;
    display: block;
}

.public-topbar {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 32% -18%, rgba(255,255,255,0.15) 0, rgba(255,255,255,0) 32%),
        linear-gradient(100deg, #5731b9 0%, #6d34bb 38%, #3d65d8 72%, #37afe8 100%);
    box-shadow: 0 8px 18px rgba(35, 43, 88, 0.14);
}

.public-topbar::before,
.public-topbar::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.public-topbar::before {
    inset: 0 auto auto 22%;
    width: 340px;
    height: 160px;
    background: linear-gradient(130deg, rgba(255,255,255,0.10), rgba(255,255,255,0));
    transform: skewX(-34deg);
}

.public-topbar::after {
    width: 320px;
    height: 200px;
    right: -100px;
    top: -92px;
    background: radial-gradient(circle, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 70%);
    opacity: 0.9;
}

.public-topbar .topbar-inner {
    min-height: 88px;
    padding: 16px 0;
    position: relative;
    z-index: 1;
}

.public-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: #fff;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 8px rgba(18, 26, 60, 0.22);
}

.public-brand-logo,
.public-brand .brand-icon-svg {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    filter: drop-shadow(0 8px 12px rgba(19, 18, 66, 0.22));
}

.public-brand .brand-icon-svg {
    color: #ff5f3d;
}

.public-brand-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255,255,255,0.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 10px 18px rgba(19, 18, 66, 0.16);
    overflow: hidden;
}

.public-brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.brand-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 4px;
}

.public-brand .brand-label {
    display: block;
    font-size: clamp(1.55rem, 2.25vw, 1.95rem);
    font-weight: 800;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.94rem;
    font-weight: 500;
    color: rgba(255,255,255,0.94);
}

.brand-meta-item {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.brand-meta-item + .brand-meta-item::before {
    content: "";
    width: 1px;
    height: 14px;
    margin-right: 10px;
    background: rgba(255,255,255,0.32);
}

.public-nav-links {
    gap: 12px;
    color: rgba(255,255,255,0.96);
    font-size: 0.95rem;
    font-weight: 700;
}

.public-topbar .nav-link {
    color: #fff;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.public-topbar .nav-link:hover {
    box-shadow: none;
    transform: none;
    opacity: 0.92;
}

.public-topbar .nav-divider {
    width: 1px;
    height: 24px;
    background: rgba(255,255,255,0.28);
}

.public-topbar .login-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 118px;
    padding: 13px 24px;
    border-radius: 14px;
    font-weight: 800;
    color: #17397a;
    background: linear-gradient(180deg, #ffd83d 0%, #f8bf1f 100%);
    border: 1px solid rgba(171, 119, 14, 0.18);
    box-shadow: 0 8px 16px rgba(51, 61, 112, 0.18);
}

.public-topbar .login-pill:hover {
    transform: translateY(-1px);
}

.booking-page-shell {
    padding: 18px 0 22px;
}

.booking-card-public {
    padding: 20px 24px 18px;
    border-radius: 14px;
    background: #f5f5fa;
    box-shadow: 0 8px 18px rgba(55, 59, 93, 0.09);
    border: 1px solid #dadde8;
}

.booking-grid-public {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 12px;
}

.booking-column {
    min-width: 0;
}

.public-section-title {
    margin-bottom: 10px;
    font-size: 1.05rem;
    font-weight: 800;
    color: #2d447f;
}

.section-rule {
    height: 2px;
    margin-bottom: 14px;
    background: linear-gradient(90deg, #d7dbe7 0%, #eaedf5 100%);
}

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

.booking-field {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 58px;
    border-radius: 10px;
    background: #fff;
    border: 1.5px solid #d8dce8;
    box-shadow: 0 4px 10px rgba(42, 54, 95, 0.07);
}

.booking-field .field-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #1f63c6;
}

.booking-field .field-icon .icon-svg {
    width: 22px;
    height: 22px;
}

.vehicle-field-icon-wrap {
    left: 12px;
}

.booking-field .field-icon .vehicle-field-icon {
    width: 22px;
    height: 22px;
}

.booking-field .field-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #38508e;
    pointer-events: none;
}

.booking-field .field-arrow .icon-svg {
    width: 18px;
    height: 18px;
}

.field-control {
    min-height: 58px;
    padding: 13px 44px 13px 50px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    font-family: "Poppins", "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 0.97rem;
    font-weight: 500;
    color: #344b79;
    letter-spacing: -0.01em;
}

.field-control-strong,
.field-control-strong option {
    font-family: "Poppins", "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 0.97rem;
    font-weight: 500;
    color: #344b79;
}

.field-control option {
    font-family: "Poppins", "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 0.97rem;
    font-weight: 500;
    color: #344b79;
    padding: 10px 12px;
    line-height: 1.35;
}

.field-control-date,
.field-control-date option,
.field-control-time,
.field-control-time option {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.field-control:focus {
    outline: none;
    border: 0;
    box-shadow: none;
}

.select-shell .field-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

#vehicle_type,
#booking_date,
#booking_time {
    text-align: left;
}

#vehicle_type option,
#booking_date option,
#booking_time option {
    background: #ffffff;
}

.service-stack-public {
    gap: 12px;
}

.service-option-public {
    padding: 0;
    min-height: 58px;
    border-radius: 9px;
    opacity: 1;
    box-shadow: 0 5px 12px rgba(53, 56, 99, 0.11);
}

.service-option-public .service-option-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 0 16px 0 18px;
}

.service-icon-wrap,
.service-tail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: #fff;
    opacity: 0.98;
}

.service-label {
    font-size: 0.97rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1;
}

.service-tail {
    margin-left: auto;
}

.service-option-public.other {
    color: #4a4b8d;
    background: linear-gradient(180deg, #f0eef9 0%, #ddd8ef 100%);
}

.service-option-public.other .service-icon-wrap,
.service-option-public.other .service-tail {
    color: #5653a8;
}

.service-option-public {
    position: relative;
    overflow: hidden;
}

.service-option-public::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, rgba(255,255,255,0) 22%, rgba(255,255,255,0.24) 45%, rgba(255,255,255,0) 68%);
    transform: translateX(-135%);
    opacity: 0;
    pointer-events: none;
}

.service-option-public.active {
    transform: translateY(-2px) scale(1.025);
    filter: saturate(1.08) brightness(1.03);
}

.service-option-public.active::after {
    opacity: 1;
    animation: serviceShine 1.1s ease;
}

.service-option-public.active .service-label {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.service-option-public.active .service-icon-wrap,
.service-option-public.active .service-tail {
    transform: scale(1.12);
}

.service-option-public.active .service-tail {
    width: 22px;
    height: 22px;
    border-radius: 999px;
}

.service-option-public.active .service-tail::before {
    content: "";
    width: 8px;
    height: 14px;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    display: block;
}

.service-option-public.oil.active {
    box-shadow: 0 0 0 4px rgba(180, 107, 0, 0.24), 0 14px 28px rgba(166, 105, 5, 0.28);
}

.service-option-public.oil.active .service-tail {
    background: rgba(122, 74, 0, 0.16);
    box-shadow: 0 0 0 2px rgba(122, 74, 0, 0.22);
}

.service-option-public.brake.active {
    box-shadow: 0 0 0 4px rgba(183, 33, 54, 0.22), 0 14px 28px rgba(164, 28, 53, 0.28);
}

.service-option-public.brake.active .service-tail {
    background: rgba(122, 13, 31, 0.18);
    box-shadow: 0 0 0 2px rgba(122, 13, 31, 0.22);
}

.service-option-public.full.active {
    box-shadow: 0 0 0 4px rgba(38, 132, 38, 0.22), 0 14px 28px rgba(31, 129, 40, 0.28);
}

.service-option-public.full.active .service-tail {
    background: rgba(15, 97, 31, 0.16);
    box-shadow: 0 0 0 2px rgba(15, 97, 31, 0.22);
}

.service-option-public.other.active {
    color: #3f428d;
    box-shadow: 0 0 0 4px rgba(86, 83, 168, 0.18), 0 14px 28px rgba(80, 78, 145, 0.20);
}

.service-option-public.other.active .service-tail {
    background: rgba(86, 83, 168, 0.10);
    box-shadow: 0 0 0 2px rgba(86, 83, 168, 0.18);
}

@keyframes serviceShine {
    0% { transform: translateX(-135%); }
    100% { transform: translateX(135%); }
}

.slot-info {
    min-height: 14px;
    margin-top: -2px;
    font-size: 0.78rem;
    font-weight: 500;
    color: #5f6e95;
}

.booking-divider {
    margin: 10px 0 18px;
    border-top: 1px solid #dbdee8;
}

.booking-actions-public {
    margin-top: 0;
}

.public-submit-btn {
    min-width: 310px;
    min-height: 52px;
    padding: 12px 30px;
    border-radius: 999px;
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(180deg, #8bd72a 0%, #63c41e 50%, #4caf25 100%);
    color: #fff;
    box-shadow: 0 10px 20px rgba(78, 168, 44, 0.22);
}

.public-submit-btn:hover {
    box-shadow: 0 12px 22px rgba(78, 168, 44, 0.26);
}

.trust-strip {
    margin: 16px 0 0;
    padding: 10px 14px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-radius: 14px;
    background: #fbfbfd;
}

.trust-strip-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 66px;
    text-align: center;
}

.trust-strip-item + .trust-strip-item {
    border-left: 1px solid rgba(47, 58, 92, 0.18);
}

.trust-strip-item strong {
    color: #28427c;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.trust-icon {
    width: 38px;
    height: 38px;
}

.trust-icon.shield {
    color: #63c12e;
}

.trust-icon.speed {
    color: #1e63c8;
}

.trust-icon.thumb {
    color: #f29955;
}

.public-page .flash {
    border-radius: 12px;
}

@media (max-width: 1180px) {
    .public-page .container,
    .public-topbar .container {
        width: min(1320px, calc(100% - 28px));
    }

    .booking-grid-public,
    .trust-strip {
        grid-template-columns: 1fr 1fr;
    }

    .trust-strip-item:nth-child(3) {
        grid-column: 1 / -1;
        border-left: 0;
        border-top: 1px solid rgba(47, 58, 92, 0.18);
    }
}

@media (max-width: 860px) {
    .public-topbar .topbar-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .public-brand {
        justify-content: flex-start;
        align-items: flex-start;
        gap: 12px;
        text-align: left;
    }

    .public-brand .brand-icon-svg,
    .public-brand-logo {
        width: 38px;
        height: 38px;
        margin-top: 2px;
    }

    .brand-copy {
        align-items: flex-start;
        gap: 2px;
    }

    .public-brand .brand-label {
        white-space: normal;
        font-size: 1.18rem;
        line-height: 1.14;
    }

    .brand-meta {
        justify-content: flex-start;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
        font-size: 0.88rem;
        font-weight: 500;
        line-height: 1.25;
    }

    .brand-meta-item {
        display: inline-flex;
        align-items: center;
    }

    .brand-meta-item + .brand-meta-item::before {
        height: 12px;
        margin-right: 6px;
    }

    .public-nav-links {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 10px;
    }

    .public-topbar .login-pill {
        order: -1;
        width: 100%;
        min-width: 0;
        min-height: 58px;
        border-radius: 14px;
        font-size: 1rem;
    }

    .public-topbar .nav-link {
        flex: 1 1 calc(50% - 5px);
        min-height: 54px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        color: #fff;
        background: linear-gradient(180deg, rgba(77, 96, 229, 0.35) 0%, rgba(48, 74, 212, 0.25) 100%);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 6px 14px rgba(34, 44, 99, 0.14);
    }

    .public-topbar .nav-divider {
        display: none;
    }

    .booking-grid-public,
    .trust-strip {
        grid-template-columns: 1fr;
    }

    .trust-strip-item + .trust-strip-item,
    .trust-strip-item:nth-child(3) {
        border-left: 0;
        border-top: 1px solid rgba(47, 58, 92, 0.18);
    }

    .booking-card-public {
        padding: 18px;
    }

    .public-submit-btn {
        min-width: 0;
        width: 100%;
        min-height: 50px;
        font-size: .96rem;
    }
}

@media (max-width: 480px) {
    .public-topbar .topbar-inner {
        gap: 12px;
    }

    .public-brand .brand-icon-svg,
    .public-brand-logo {
        width: 34px;
        height: 34px;
    }

    .public-brand .brand-label {
        font-size: .96rem;
    }

    .brand-meta {
        gap: 4px;
        font-size: 0.82rem;
        line-height: 1.2;
    }

    .brand-meta-item + .brand-meta-item::before {
        margin-right: 4px;
    }

    .public-topbar .login-pill {
        min-height: 54px;
        border-radius: 14px;
    }

    .public-topbar .nav-link {
        min-height: 50px;
        font-size: 0.95rem;
    }

    .booking-card-public {
        padding: 16px 14px;
    }
}

.nav-link-button {
    appearance: none;
    border: 0;
    cursor: pointer;
    font: inherit;
}

.language-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.language-trigger-icon .icon-svg,
.language-trigger-icon svg {
    width: 16px;
    height: 16px;
}

.language-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1200;
}

.language-modal.is-open {
    display: flex;
}

.language-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(18, 26, 53, 0.48);
    backdrop-filter: blur(3px);
}

.language-modal-card {
    position: relative;
    z-index: 1;
    width: min(420px, calc(100vw - 28px));
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 24px 64px rgba(23, 36, 82, 0.28);
    padding: 24px 22px 20px;
}

.language-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: #f2f5fb;
    color: #38508e;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.language-modal-title {
    margin: 0 0 8px;
    font-size: 1.25rem;
    font-weight: 800;
    color: #223b73;
}

.language-modal-subtitle {
    margin: 0 0 18px;
    color: #5d6d90;
    font-size: 0.95rem;
    line-height: 1.5;
}

.language-options {
    display: grid;
    gap: 12px;
}

.language-option {
    min-height: 56px;
    border-radius: 14px;
    border: 1px solid #d8dceb;
    background: linear-gradient(180deg, #ffffff 0%, #f5f7fc 100%);
    color: #274889;
    font-family: "Poppins", "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(57, 71, 114, 0.08);
}

body.language-modal-open {
    overflow: hidden;
}

@media (max-width: 760px) {
    .language-trigger {
        width: 100%;
        justify-content: center;
    }

    .language-modal-card {
        width: min(380px, calc(100vw - 20px));
        padding: 22px 16px 16px;
    }
}


.account-auth-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.account-hero-card {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}
.account-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: 10px;
    margin-top: 18px;
}
.account-grid-full {
    grid-column: 1 / -1;
}
.account-list {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}
.account-list-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
}
.account-prefill-banner {
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #eef6ff;
    border: 1px solid #cfe1ff;
    color: #244173;
    font-size: 0.95rem;
}
.account-saved-vehicle-note .help-text {
    padding-top: 4px;
}
@media (max-width: 1100px) {
    .account-auth-grid,
    .account-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 680px) {
    .account-hero-card,
    .account-list-item {
        flex-direction: column;
        align-items: stretch;
    }
}

.account-page-shell {
    padding-bottom: 34px;
}
.account-card-shell {
    padding: 22px 24px 24px;
}
.account-auth-header,
.account-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}
.account-page-title {
    margin: 0;
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    font-weight: 800;
    color: #223d77;
    letter-spacing: -0.03em;
}
.account-page-subtitle {
    margin-top: 8px;
    max-width: 720px;
}
.account-auth-booking-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.account-dashboard-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    margin-top: 22px;
}
.account-panel {
    background: rgba(255,255,255,0.72);
    border: 1px solid #dbe0ea;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 6px 14px rgba(53, 59, 94, 0.06);
}
.account-panel-wide {
    grid-column: 1 / -1;
}
.account-form-stack {
    display: block;
}
.account-actions {
    justify-content: flex-start;
    margin-top: 18px;
}
.account-submit-btn {
    min-width: 220px !important;
    font-size: 1rem !important;
    padding: 15px 28px !important;
}
.account-stats-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.account-stat-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(246,248,253,0.98) 100%);
    border: 1px solid #dbe1ef;
    box-shadow: 0 8px 16px rgba(45, 58, 104, 0.08);
    text-align: center;
}
.account-stat-card h4,
.account-stat-card .value,
.account-stat-card .hint {
    text-align: center;
}
.account-stat-card-upcoming {
    background: linear-gradient(180deg, #eef6ff 0%, #dbeafe 100%);
    border-color: #bfdbfe;
}
.account-stat-card-history {
    background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
    border-color: #fdba74;
}
.account-stat-card-vehicles {
    background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
    border-color: #86efac;
}
.account-record-list {
    display: grid;
    gap: 12px;
}
.account-record-card {
    padding: 14px 16px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #dbe0ea;
    box-shadow: 0 4px 12px rgba(51, 60, 98, 0.06);
    text-align: center;
}
.account-record-card-history {
    padding: 10px 12px;
    border-radius: 10px;
}
.account-record-top {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    text-align: center;
}
.account-record-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    align-items: start;
}
.account-record-card-history .account-record-grid {
    gap: 8px 12px;
}
.account-record-grid span {
    display: block;
    text-align: center;
}
.account-record-label {
    margin-bottom: 4px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7183a8;
    text-align: center;
}
.account-record-card-history .account-record-label {
    margin-bottom: 2px;
    font-size: 0.72rem;
}
.account-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}
.account-field-disabled {
    opacity: 0.8;
}
.account-header-btn {
    white-space: nowrap;
}
.account-panel-gap {
    margin-top: 16px;
}
.account-trust-strip {
    margin-top: 18px;
}
@media (max-width: 1100px) {
    .account-auth-booking-grid,
    .account-dashboard-grid,
    .account-stats-row {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 680px) {
    .account-card-shell {
        padding: 18px 16px 20px;
    }
    .account-auth-header,
    .account-dashboard-header,
    .account-record-top,
    .account-list-item {
        flex-direction: column;
        align-items: stretch;
    }
    .account-record-grid {
        grid-template-columns: 1fr;
    }
    .account-actions,
    .account-inline-actions {
        justify-content: stretch;
    }
    .account-inline-actions .btn,
    .account-header-btn,
    .account-submit-btn,
    .account-actions .btn {
        width: 100%;
        min-width: 0 !important;
    }
}


.account-card-shell {
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(245,248,255,0.98) 100%);
    border: 1px solid rgba(202, 214, 236, 0.9);
    box-shadow: 0 18px 40px rgba(31, 51, 102, 0.08);
}
.account-dashboard-header {
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(25, 61, 138, 0.96) 0%, rgba(71, 121, 236, 0.92) 55%, rgba(101, 64, 233, 0.92) 100%);
    color: #fff;
    box-shadow: 0 18px 30px rgba(55, 84, 162, 0.22);
}
.account-hero-copy {
    display: grid;
    gap: 12px;
}
.account-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.22);
    color: rgba(255,255,255,0.95);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.account-hero-badge .icon-svg,
.account-stat-icon .icon-svg {
    width: 18px;
    height: 18px;
}
.account-hero-main {
    display: flex;
    align-items: center;
    gap: 12px;
}
.account-avatar,
.account-profile-avatar {
    width: 66px;
    height: 66px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.34) 100%);
    border: 1px solid rgba(255,255,255,0.28);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
    color: #fff;
    font-size: 1.65rem;
    font-weight: 800;
}
.account-profile-avatar {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    background: linear-gradient(135deg, #1f6cf0 0%, #6c4cf1 100%);
    border-color: rgba(255,255,255,0.2);
    box-shadow: 0 14px 28px rgba(67, 92, 172, 0.2);
}
.account-dashboard-header .account-page-title,
.account-dashboard-header .account-page-subtitle {
    color: #fff;
}
.account-dashboard-header .account-page-subtitle {
    margin-top: 6px;
    color: rgba(255,255,255,0.82);
    max-width: 720px;
}
.account-header-btn {
    border-color: rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.12);
    color: #fff;
    box-shadow: none;
}
.account-header-btn:hover {
    background: rgba(255,255,255,0.2);
    color: #fff;
}
.account-stat-card {
    padding: 24px 22px 22px;
    border-radius: 26px;
    position: relative;
    overflow: hidden;
    text-align: left;
    isolation: isolate;
}
.account-stat-card::after {
    content: '';
    position: absolute;
    inset: auto -18px -28px auto;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.08) 62%, rgba(255,255,255,0) 100%);
    z-index: 0;
}
.account-stat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}
.account-stat-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.76);
    color: #17305e;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255,255,255,0.56);
    backdrop-filter: blur(8px);
}
.account-stat-card h4,
.account-stat-card .value,
.account-stat-card .hint {
    text-align: left;
    position: relative;
    z-index: 1;
}
.account-stat-card .value {
    font-size: clamp(2.1rem, 4vw, 2.9rem);
    line-height: 1;
}
.account-panel {
    border-radius: 14px;
    padding: 20px;
}
.account-panel .section-title {
    font-size: 1.18rem;
}
.account-record-card {
    padding: 16px 18px;
    border-radius: 14px;
    border-left: 4px solid #2f6cf0;
    text-align: left;
}
.account-record-card-history {
    border-left-color: #7c4dff;
}
.account-record-top {
    justify-content: space-between;
    text-align: left;
}
.account-record-grid span,
.account-record-label {
    text-align: left;
}
.account-list {
    gap: 10px;
}
.account-list-item {
    border-radius: 14px;
    padding: 16px 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
    box-shadow: 0 8px 20px rgba(49, 66, 116, 0.07);
}
.account-profile-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, #edf4ff 0%, #f5f0ff 100%);
    border: 1px solid #dbe3f6;
}
.account-profile-summary strong {
    display: block;
    margin-bottom: 4px;
    color: #1f3563;
    font-size: 1.05rem;
}
.account-inline-actions .btn {
    min-width: 180px;
}
@media (max-width: 680px) {
    .account-dashboard-header {
        padding: 18px;
    }
    .account-hero-main,
    .account-profile-summary {
        align-items: flex-start;
    }
    .account-stat-card,
    .account-record-card,
    .account-list-item,
    .account-panel {
        border-radius: 14px;
    }
    .account-stat-card::after {
        width: 88px;
        height: 88px;
    }
}


.account-record-top .status-badge,
.account-record-top .badge,
.account-record-top [class*="status"] {
    text-align: center;
    justify-content: center;
}

.account-record-top .status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


@media (min-width: 681px) {
    .account-record-card-history {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas:
            "service center date"
            "vehicle center notes";
        column-gap: 20px;
        row-gap: 8px;
        align-items: center;
    }
    .account-record-card-history .account-record-top {
        grid-area: center;
        justify-content: center;
        align-self: center;
        margin-bottom: 0;
    }
    .account-record-card-history .account-record-top strong {
        min-width: 0;
        text-align: center;
    }
    .account-record-card-history .account-record-grid {
        display: contents;
    }
    .account-record-card-history .account-record-grid > div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 44px;
    }
    .account-record-card-history .account-record-grid > div:nth-child(1) {
        grid-area: service;
    }
    .account-record-card-history .account-record-grid > div:nth-child(2) {
        grid-area: date;
    }
    .account-record-card-history .account-record-grid > div:nth-child(3) {
        grid-area: vehicle;
    }
    .account-record-card-history .account-record-grid > div:nth-child(4) {
        grid-area: notes;
    }
    .account-record-card-history .account-record-top .status-badge,
    .account-record-card-history .account-record-top .badge,
    .account-record-card-history .account-record-top [class*="status"] {
        min-width: 110px;
        text-align: center;
    }
}


@media (min-width: 681px) {
    .table-wrap table th:nth-child(5),
    .table-wrap table td:nth-child(5) {
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
    }
}

.sidebar-plan {
    margin-top: 16px;
    padding: 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.14);
}
.sidebar-plan-label {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.75;
    margin-bottom: 4px;
}
.sidebar-plan-meta {
    display: block;
    margin-top: 4px;
    font-size: 0.88rem;
    opacity: 0.9;
}
.sidebar a.locked {
    opacity: 0.88;
}
.admin-hero-card {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    background: linear-gradient(135deg, rgba(37,99,235,0.10), rgba(124,58,237,0.14));
}
.eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #4338ca;
}
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.addon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.addon-card {
    border-radius: 14px;
    padding: 18px;
    border: 1px solid var(--border);
    background: #fff;
}
.addon-card-enabled {
    background: linear-gradient(180deg, #ffffff, #f5faff);
}
.addon-card-locked {
    background: linear-gradient(180deg, #ffffff, #fff9eb);
}
.addon-category {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 0.8rem;
    font-weight: 700;
}


body { font-family: Inter, Poppins, Arial, sans-serif; }
.sidebar h3 i { margin-right: 8px; }
.stack-actions { display:flex; flex-direction:column; gap:8px; }
.feature-checkbox-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-top:12px; }
.feature-checkbox-card { display:flex; gap:10px; align-items:flex-start; border:1px solid #e2e8f0; border-radius:14px; padding:14px; background:#fff; }
.feature-checkbox-card small { display:block; color:#64748b; margin-top:4px; }
.dashboard-split { display:grid; grid-template-columns:1.35fr .8fr; gap:20px; }
.calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px; }
.calendar-cell { border:1px solid #e2e8f0; border-radius:14px; padding:12px; min-height:86px; background:#fff; display:flex; flex-direction:column; gap:8px; text-decoration:none; color:#0f172a; }
.calendar-head { min-height:auto; background:#f8fafc; font-weight:700; align-items:center; justify-content:center; }
.calendar-empty { background:transparent; border-style:dashed; }
.calendar-date:hover { border-color:#93c5fd; box-shadow:0 8px 24px rgba(15,23,42,.06); }
.calendar-date-has-bookings { border-color:#c7d2fe; background:linear-gradient(180deg, #ffffff 0%, #f8faff 100%); }
.calendar-date-has-bookings strong { color:#3730a3; }
.calendar-selected { border-color:var(--brand-primary,#2563eb); box-shadow:0 0 0 2px rgba(37,99,235,.12); }
.calendar-pill { display:inline-flex; align-self:flex-start; padding:4px 8px; border-radius:999px; background:#eff6ff; color:#1d4ed8; font-size:.78rem; }
.calendar-pill-booked { background:#ede9fe; color:#6d28d9; font-weight:700; }
.calendar-month-title { font-weight:700; padding:0 8px; }
.upcoming-booking-item { padding:12px 0; border-bottom:1px solid #e2e8f0; display:flex; flex-direction:column; gap:4px; }
.upcoming-booking-item:last-child { border-bottom:none; }
@media (max-width: 980px) { .dashboard-split { grid-template-columns:1fr; } }
@media (max-width: 760px) { .calendar-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .calendar-head { display:none; } }


.settings-inline-actions {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 16px;
    margin-bottom: 6px;
}
.smtp-test-actions { display:flex; align-items:flex-end; }
.smtp-test-actions .btn { width:100%; }



/* Admin panel refresh based on provided dashboard reference */
.admin-panel-page {
    background: #eef1f7;
    color: #233247;
}
.admin-panel-page .flash { width: min(1360px, calc(100% - 32px)); }
.dashboard-topbar {
    background: #263246;
    color: #fff;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18);
}
.dashboard-topbar-inner {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.dashboard-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .01em;
}
.dashboard-brand-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.12);
    font-size: 1.05rem;
}
.dashboard-topnav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 1;
    flex-wrap: wrap;
}
.dashboard-topnav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,.88);
    padding: 10px 12px;
    border-radius: 10px;
    font-weight: 700;
}
.dashboard-topnav a.active,
.dashboard-topnav a:hover { background: rgba(255,255,255,.10); color: #fff; }
.dashboard-userchip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
}
.dashboard-avatar {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: #fff;
}
.dashboard-content-shell {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 22px;
    padding: 18px 0 32px;
    align-items: start;
}
.dashboard-sidebar-card,
.dashboard-panel,
.dashboard-stat-card {
    background: #fff;
    border: 1px solid #dde3ee;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
}
.dashboard-sidebar-card { padding: 12px; }
.dashboard-side-nav { display: grid; gap: 6px; }
.dashboard-side-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 6px;
    color: #4b5b73;
    font-weight: 700;
}
.dashboard-side-nav a.active,
.dashboard-side-nav a:hover {
    background: #1f75db;
    color: #fff;
}
.dashboard-side-nav a.locked { opacity: .85; }
.dashboard-main { display: grid; gap: 20px; }
.dashboard-stat-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #dde3ee;
}
.dashboard-stat-card {
    padding: 18px 22px 14px;
    min-height: 98px;
    border-radius: 0;
    border: 0;
    border-right: 1px solid #dde3ee;
    position: relative;
}
.dashboard-stat-card:last-child { border-right: 0; }
.dashboard-stat-card::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: #38b24a;
}
.dashboard-stat-card.tone-orange::after { background: #f0a33a; }
.dashboard-stat-card.tone-blue::after { background: #2d8ad3; }
.dashboard-stat-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #233247;
    font-weight: 700;
    font-size: 1rem;
}
.dashboard-stat-head i { color: #a1adbf; }
.dashboard-stat-value {
    margin-top: 8px;
    font-size: 2.15rem;
    line-height: 1;
    font-weight: 800;
}
.dashboard-stat-card.tone-green .dashboard-stat-value { color: #38b24a; }
.dashboard-stat-card.tone-orange .dashboard-stat-value { color: #f0a33a; }
.dashboard-stat-card.tone-blue .dashboard-stat-value { color: #2d8ad3; }
.dashboard-grid-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 10px;
}
.dashboard-bottom-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}
.dashboard-side-stack { display: grid; gap: 18px; }
.dashboard-panel { padding: 0; overflow: hidden; }
.dashboard-panel > .panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 18px 20px;
    border-bottom: 1px solid #e5eaf3;
}
.dashboard-panel > .panel-header h2 {
    margin: 0;
    font-size: 1rem;
}
.dashboard-table table { min-width: 100%; }
.dashboard-table th,
.dashboard-table td { padding: 14px 16px; }
.dashboard-table th { background: #fafbfd; color: #55657d; }
.dashboard-table tbody tr:hover { background: #fafcff; }
.quick-link-stack {
    display: grid;
    gap: 12px;
    padding: 16px 20px 20px;
}
.quick-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #fff;
    padding: 14px 16px;
    border-radius: 6px;
    font-weight: 800;
}
.quick-link.blue { background: #1f75db; }
.quick-link.green { background: #38b24a; }
.quick-link.orange { background: #f0a33a; }
.compact-list { padding: 12px 20px 18px; display: grid; gap: 12px; }
.compact-item { padding: 10px 0; border-bottom: 1px solid #e5eaf3; display: grid; gap: 3px; }
.compact-item:last-child { border-bottom: 0; }
.compact-item strong { font-size: .98rem; }
.compact-item span, .compact-item small { color: #64748b; }
.mini-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0,1fr));
    gap: 6px;
    padding: 14px 16px 18px;
}
.mini-calendar-header {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.05rem;
    margin-bottom: 6px;
}
.mini-calendar-label,
.mini-calendar-day {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: .88rem;
}
.mini-calendar-label { color: #55657d; font-weight: 700; }
.mini-calendar-day { background: #f8fafc; color: #334155; }
.mini-calendar-day.empty { background: transparent; }
.mini-calendar-day.today { background: #1f75db; color: #fff; font-weight: 800; }
.status-overview-wrap {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 12px;
    align-items: center;
    padding: 20px;
}
.status-donut {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto;
}
.status-donut span {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e5eaf3;
}
.status-legend { display: grid; gap: 16px; font-weight: 700; }
.status-legend div { display: flex; align-items: center; gap: 10px; color: #334155; }
.legend-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-block;
}
.legend-dot.blue { background: #2d8ad3; }
.legend-dot.green { background: #38b24a; }
.legend-dot.orange { background: #f0a33a; }
.revenue-figure { font-size: 1.05rem; color: #111827; }
.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    min-height: 180px;
    padding: 20px;
}
.bar-item {
    display: grid;
    gap: 6px;
    justify-items: center;
    min-width: 24px;
}
.bar-col {
    width: 24px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, #5ca6eb, #2d8ad3);
}
.bar-item span { color: #475569; font-weight: 700; font-size: .82rem; }
.admin-panel-page .table-wrap,
.admin-panel-page .empty-state { margin: 0 20px 20px; }
.admin-panel-page .empty-state { padding: 18px; }
.admin-panel-page .btn { border-radius: 6px; }
.admin-panel-page .btn-primary { background: #1f75db; }
.admin-panel-page .btn-outline { background: #fff; }
.admin-panel-page .status-confirmed { background: #38b24a; color: #fff; }
.admin-panel-page .status-pending { background: #f0a33a; color: #fff; }
.admin-panel-page .status-in_progress { background: #2d8ad3; color: #fff; }
.admin-panel-page .status-completed { background: #38b24a; color: #fff; }
.admin-panel-page .status-cancelled { background: #d9534f; color: #fff; }
.admin-panel-page .input,
.admin-panel-page .select,
.admin-panel-page .textarea { border-radius: 6px; }
.admin-panel-page .sidebar,
.admin-panel-page .layout { all: unset; }
@media (max-width: 1180px) {
    .dashboard-content-shell,
    .dashboard-grid-main,
    .dashboard-bottom-grid,
    .status-overview-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .dashboard-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-topbar-inner { flex-wrap: wrap; padding: 12px 0; }
    .dashboard-topnav { order: 3; width: 100%; justify-content: flex-start; }
}
@media (max-width: 640px) {
    .dashboard-stat-row { grid-template-columns: 1fr; }
    .dashboard-content-shell { grid-template-columns: 1fr; }
    .dashboard-side-nav a span { font-size: .95rem; }
    .status-donut { width: 150px; height: 150px; }
    .status-donut span { width: 76px; height: 76px; }
}

.mini-calendar-day {
    position: relative;
    flex-direction: column;
    gap: 4px;
}
.mini-calendar-number {
    line-height: 1;
}
.mini-calendar-day.has-booking .mini-calendar-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #1f75db;
    display: inline-block;
}
.mini-calendar-day.today.has-booking .mini-calendar-dot {
    background: rgba(255,255,255,.95);
}
.dashboard-stat-card-centered {
    text-align: center;
}
.dashboard-stat-card-centered .dashboard-stat-head {
    justify-content: center;
}
.booking-action-form,
.booking-action-form .select,
.booking-action-form .btn,
.admin-panel-page .btn,
.admin-panel-page button,
.admin-panel-page input,
.admin-panel-page select,
.admin-panel-page textarea {
    font-family: inherit;
}
.booking-action-form .select,
.booking-action-form .btn {
    font-size: .95rem;
    font-weight: 600;
}
.table-wrap {
    -webkit-overflow-scrolling: touch;
}
.dashboard-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 42px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,.14);
    font-weight: 700;
}
@media (max-width: 900px) {
    .dashboard-menu-toggle { display: inline-flex; }
    .dashboard-sidebar { display: none; }
    .dashboard-sidebar.is-open { display: block; }
    .dashboard-topnav a { flex: 1 1 calc(50% - 10px); justify-content: center; }
    .dashboard-userchip { margin-left: auto; }
}
@media (max-width: 760px) {
    .admin-panel-page .card { padding: 18px; }
    .dashboard-panel > .panel-header,
    .card > .inline-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .calendar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .calendar-cell { min-height: 96px; }
    .mini-calendar { padding: 12px; gap: 4px; }
    .mini-calendar-label, .mini-calendar-day { min-height: 30px; font-size: .78rem; }
    .admin-panel-page .table-wrap,
    .admin-panel-page .empty-state { margin: 0 12px 12px; }
    .hours-table td, .hours-table th { min-width: 96px; }
}
@media (max-width: 560px) {
    .dashboard-topnav a { flex: 1 1 100%; }
    .dashboard-menu-toggle,
    .dashboard-userchip { justify-content: center; }
    .dashboard-topbar-inner { gap: 12px; }
}


.nowrap-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.booking-notes-inline {
    display: block;
    margin-top: 4px;
}
.appointment-action-wrap,
.service-action-wrap {
    justify-content: center;
}
.dashboard-upcoming-table td,
.owner-bookings-table td,
.service-catalog-table td,
.calendar-day-bookings-table td {
    vertical-align: middle;
}
.dashboard-upcoming-table td strong,
.owner-bookings-table td strong,
.service-catalog-table td strong,
.calendar-day-bookings-table td strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .95rem;
}
.dashboard-upcoming-table td,
.dashboard-upcoming-table th {
    padding-top: 12px;
    padding-bottom: 12px;
}
.booking-action-form {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: nowrap;
}
.booking-action-form .select {
    min-width: 160px;
}
.booking-action-form .btn,
.booking-action-form .select,
.appointment-action-wrap .btn,
.admin-panel-page .btn,
.admin-panel-page .select {
    font-family: 'Inter', sans-serif;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.2;
}
.sidebar-plan {
    display: grid;
    gap: 10px;
}
.sidebar-plan-feature-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.sidebar-plan-feature-list span {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(31, 117, 219, 0.08);
    color: #1d4ed8;
    font-size: 0.76rem;
    font-weight: 700;
}
.sidebar-upgrade-btn {
    width: 100%;
}
.plan-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
}
.plan-modal.is-open {
    display: block;
}
.plan-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
}
.plan-modal-dialog {
    position: relative;
    width: min(1080px, calc(100% - 32px));
    max-height: calc(100vh - 48px);
    overflow: auto;
    margin: 24px auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
    padding: 20px;
}
.plan-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    background: #f1f5f9;
    color: #0f172a;
    font-size: 1.6rem;
    line-height: 1;
}
.plan-modal-eyebrow {
    display: inline-flex;
    margin-bottom: 6px;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #1d4ed8;
}
.plan-modal-header h2 {
    margin: 0 0 10px;
    font-size: clamp(1.35rem, 2.5vw, 2rem);
}
.plan-compare-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}
.plan-card {
    border: 1px solid #dbe5f1;
    border-radius: 14px;
    padding: 18px;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    display: grid;
    gap: 12px;
}
.plan-card-current {
    border-color: #1f75db;
    box-shadow: 0 0 0 2px rgba(31,117,219,0.12);
}
.plan-card-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: #e0ecff;
    color: #1d4ed8;
    font-weight: 800;
    font-size: 0.78rem;
}
.plan-card h3 {
    margin: 10px 0 6px;
    font-size: 1.4rem;
}
.plan-feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.plan-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #334155;
}
.plan-feature-list i {
    color: #16a34a;
    margin-top: 2px;
}
.plan-card-actions {
    margin-top: auto;
}
.plan-card-actions .btn {
    width: 100%;
}
.plan-modal-footer {
    margin-top: 16px;
    color: #475569;
    font-size: 0.92rem;
}
.booking-notes-label {
    margin-bottom: 5px;
}
.notes-shell {
    width: 100%;
    min-height: 176px;
    align-items: stretch;
}
.booking-notes-icon {
    top: 18px !important;
    transform: none !important;
}
.booking-notes-textarea {
    min-height: 176px;
    padding-top: 16px;
    padding-right: 18px;
    padding-bottom: 16px;
    line-height: 1.6;
    resize: vertical;
    overflow-y: auto;
}
.booking-notes-textarea::placeholder {
    color: #5f6f97;
    opacity: 1;
}
.smtp-help-text {
    margin-top: 8px;
    line-height: 1.5;
}
.dashboard-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
    z-index: 40;
}
@media (max-width: 900px) {
    body.dashboard-sidebar-open,
    body.plan-modal-open {
        overflow: hidden;
    }
    body.dashboard-sidebar-open .dashboard-sidebar-overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    .dashboard-topnav {
        display: none;
    }
    .dashboard-userchip {
        margin-left: auto;
    }
    .dashboard-content-shell {
        grid-template-columns: 1fr;
    }
    .dashboard-sidebar {
        display: block;
        position: fixed;
        top: 78px;
        left: 12px;
        right: 12px;
        z-index: 55;
        transform: translateY(12px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform .22s ease, opacity .22s ease, visibility .22s ease;
        max-height: calc(100vh - 90px);
        overflow: auto;
    }
    .dashboard-sidebar.is-open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    .dashboard-sidebar-card {
        border-radius: 14px;
        box-shadow: 0 20px 60px rgba(15, 23, 42, 0.28);
    }
}
@media (max-width: 760px) {
    .dashboard-panel > .panel-header {
        gap: 10px;
    }
    .responsive-stack-table table,
    .responsive-stack-table thead,
    .responsive-stack-table tbody,
    .responsive-stack-table tr,
    .responsive-stack-table th,
    .responsive-stack-table td {
        display: block;
        width: 100%;
    }
    .responsive-stack-table thead {
        display: none;
    }
    .responsive-stack-table tbody {
        display: grid;
        gap: 12px;
    }
    .responsive-stack-table tr {
        border: 1px solid #dde3ee;
        border-radius: 14px;
        padding: 12px 14px;
        background: #fff;
    }
    .responsive-stack-table td {
        padding: 8px 0;
        border: 0;
    }
    .responsive-stack-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        color: #64748b;
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .calendar-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .calendar-cell {
        min-height: 96px;
        padding: 10px;
    }
    .dashboard-stat-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .dashboard-stat-card {
        min-height: 86px;
        padding: 16px;
    }
    .service-action-wrap,
    .booking-action-form {
        width: 100%;
        justify-content: flex-start;
    }
}
@media (max-width: 560px) {
    .dashboard-menu-toggle,
    .dashboard-userchip {
        width: auto;
    }
    .dashboard-topbar-inner {
        flex-wrap: nowrap;
        align-items: center;
    }
    .dashboard-brand {
        font-size: 1rem;
        min-width: 0;
    }
    .dashboard-brand span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .calendar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .plan-compare-grid {
        grid-template-columns: 1fr;
    }
    .plan-modal-dialog {
        width: min(100%, calc(100% - 20px));
        margin: 10px auto;
        padding: 22px 16px;
        max-height: calc(100vh - 20px);
    }
}

/* v5 targeted refinements */
html { scroll-behavior: smooth; }

.admin-panel-page .dashboard-topbar {
    position: sticky;
    top: 0;
    z-index: 60;
}

.dashboard-brand-logo,
.sidebar-plan-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid rgba(255,255,255,.35);
    overflow: hidden;
}
.dashboard-brand-logo img,
.sidebar-plan-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.dashboard-brand-logo {
    padding: 6px;
}
.sidebar-plan {
    position: relative;
    gap: 6px;
    background: linear-gradient(180deg, #f8fbff 0%, #edf5ff 100%);
    border: 1px solid #d9e7fb;
    color: #173b6d;
}
.sidebar-plan-logo {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 10px 24px rgba(31, 117, 219, 0.12);
}
.sidebar-plan-label { color: #6a7a94; opacity: 1; }
.sidebar-plan-meta { color: #4f6787; opacity: 1; }
.sidebar-upgrade-btn {
    margin-top: 6px;
    min-height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #1f75db, #7c3aed) !important;
}

.plan-modal-dialog {
    background: linear-gradient(180deg, #f7fbff 0%, #ffffff 28%);
    border: 1px solid #dbe7fb;
}
.plan-modal-header-rich {
    padding: 10px 4px 8px;
}
.plan-modal-header-rich h2 {
    color: #163766;
    letter-spacing: -0.02em;
}
.plan-modal-header-rich .muted {
    color: #55657d;
    font-size: 1rem;
}
.plan-compare-grid {
    align-items: stretch;
}
.plan-card {
    gap: 10px;
    border-radius: 18px;
    padding: 22px 20px;
    box-shadow: 0 18px 44px rgba(27, 51, 86, 0.08);
}
.plan-card .muted { color: #51627c; }
.plan-card.tone-basic {
    background: linear-gradient(180deg, #fff8dd 0%, #ffffff 36%);
    border-color: #f5d773;
}
.plan-card.tone-pro {
    background: linear-gradient(180deg, #eaf4ff 0%, #ffffff 36%);
    border-color: #8fc4ff;
}
.plan-card.tone-enterprise {
    background: linear-gradient(180deg, #eafcf1 0%, #ffffff 36%);
    border-color: #7fd29d;
}
.plan-card-current {
    box-shadow: 0 0 0 3px rgba(31, 117, 219, 0.16), 0 24px 54px rgba(31, 117, 219, 0.12);
}
.plan-card-badge {
    box-shadow: 0 10px 20px rgba(31, 117, 219, 0.14);
}
.plan-card.tone-basic .plan-card-badge { background: #ffe38f; color: #875600; }
.plan-card.tone-pro .plan-card-badge { background: #dcebff; color: #1f5fbf; }
.plan-card.tone-enterprise .plan-card-badge { background: #dff6e7; color: #0d7a46; }
.plan-card h3 {
    font-size: 1.55rem;
    color: #102b4e;
}
.plan-feature-list li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(221, 232, 244, 0.7);
}
.plan-feature-list li:last-child { border-bottom: 0; }
.plan-card-actions .btn {
    min-height: 46px;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 700;
}
.plan-card-actions .btn.is-selected-plan {
    box-shadow: 0 0 0 3px rgba(31,117,219,.16);
}
.plan-modal-footer {
    margin-top: 22px;
}
.plan-upgrade-note {
    border-radius: 14px;
    border: 1px solid #d9e7fb;
    background: linear-gradient(135deg, #eff6ff 0%, #f5f3ff 100%);
    padding: 18px;
    display: grid;
    gap: 10px;
    transition: box-shadow .2s ease, transform .2s ease;
}
.plan-upgrade-note.is-active {
    box-shadow: 0 16px 34px rgba(31, 117, 219, 0.12);
    transform: translateY(-1px);
}
.plan-upgrade-note-title {
    font-size: 1rem;
    font-weight: 800;
    color: #173b6d;
}
.plan-upgrade-copy {
    margin: 0;
    color: #4e6284;
}
.plan-upgrade-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.plan-upgrade-actions .btn {
    min-height: 44px;
    border-radius: 12px;
}

.calendar-date-has-bookings {
    border-color: #9fdfb3;
    background: linear-gradient(180deg, #ffffff 0%, #f0fbf4 100%);
}
.calendar-date-has-bookings strong {
    color: #157347;
}
.calendar-pill-booked {
    background: #dcfce7;
    color: #166534;
}
.mini-calendar-day.has-booking {
    background: #eefbf1;
    color: #166534;
    font-weight: 700;
}
.mini-calendar-day.has-booking .mini-calendar-dot {
    background: #22c55e;
}
.mini-calendar-day.today.has-booking {
    background: #16a34a;
    color: #fff;
}
.mini-calendar-day.today.has-booking .mini-calendar-dot {
    background: rgba(255,255,255,.95);
}

.service-editor-card,
.settings-card {
    overflow: visible;
}
.service-form-actions,
.bookings-filter-form,
.smtp-test-actions,
.settings-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.service-action-wrap {
    flex-wrap: wrap;
    gap: 6px;
}
.service-action-wrap form {
    margin: 0;
}
.logo-upload-panel {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}
.logo-preview-card {
    display: grid;
    gap: 10px;
}
.logo-preview-frame {
    min-height: 92px;
    border-radius: 14px;
    border: 1px dashed #bdd4f2;
    background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
}
.logo-preview-frame img {
    max-width: 100%;
    max-height: 62px;
    object-fit: contain;
}
.logo-upload-copy {
    display: grid;
    gap: 6px;
}
.logo-remove-toggle {
    justify-content: flex-start;
}
.smtp-help-card {
    margin-top: 12px;
    border-radius: 14px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #fff8e5 0%, #eef5ff 100%);
    border: 1px solid #dbe7fb;
    box-shadow: 0 12px 28px rgba(38, 50, 70, 0.06);
}
.smtp-help-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff;
    color: #1d4ed8;
    font-size: .76rem;
    font-weight: 800;
    border: 1px solid #d8e4f7;
}
.smtp-help-title {
    margin-top: 12px;
    font-size: 1rem;
    font-weight: 800;
    color: #193760;
}
.smtp-help-steps {
    margin: 12px 0 0;
    padding-left: 18px;
    color: #475569;
}
.smtp-help-steps li + li { margin-top: 8px; }

.owner-bookings-table td[data-label="Action"],
.dashboard-upcoming-table td[data-label="Actions"] {
    text-align: center;
}
.owner-bookings-table .booking-action-form,
.dashboard-upcoming-table .appointment-action-wrap {
    justify-content: center;
}
.booking-action-form .select,
.booking-action-form .btn,
.dashboard-upcoming-table .btn,
.service-catalog-table .btn,
.owner-bookings-table .btn,
.owner-bookings-table .select {
    min-height: 40px;
    font-family: inherit;
}
.settings-card .form-grid,
.settings-card .form-grid-3 {
    align-items: start;
}
.settings-card .input[type="color"] {
    min-height: 48px;
    padding: 8px;
}

@media (max-width: 900px) {
    .dashboard-sidebar {
        top: 76px;
    }
    .logo-upload-panel {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .dashboard-topbar-inner {
        flex-wrap: nowrap;
        gap: 10px;
    }
    .dashboard-brand {
        min-width: 0;
        gap: 10px;
        font-size: .98rem;
    }
    .dashboard-brand-icon,
    .dashboard-brand-logo {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }
    .dashboard-menu-toggle {
        min-width: 108px;
        margin-left: auto;
    }
    .dashboard-userchip {
        display: none;
    }
    .responsive-stack-table tr {
        padding: 14px;
        border-radius: 14px;
        box-shadow: 0 8px 22px rgba(38, 50, 70, 0.05);
    }
    .owner-bookings-table td[data-label="Action"],
    .service-catalog-table td[data-label="Display"],
    .dashboard-upcoming-table td[data-label="Actions"] {
        padding-top: 12px;
    }
    .booking-action-form,
    .service-action-wrap,
    .appointment-action-wrap,
    .smtp-test-actions,
    .service-form-actions {
        width: 100%;
        justify-content: stretch;
        align-items: stretch;
    }
    .booking-action-form {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .booking-action-form .select,
    .booking-action-form .btn,
    .service-action-wrap .btn,
    .service-action-wrap form,
    .appointment-action-wrap .btn,
    .smtp-test-actions .btn,
    .service-form-actions .btn,
    .service-form-actions a {
        flex: 1 1 100%;
        width: 100%;
    }
    .service-action-wrap form {
        display: flex;
    }
    .service-action-wrap form .btn { width: 100%; }
    .settings-card .form-grid,
    .settings-card .form-grid-3 {
        grid-template-columns: 1fr;
    }
    .settings-card .hours-table td::before {
        content: attr(data-label);
    }
    .plan-upgrade-actions {
        flex-direction: column;
    }
    .plan-upgrade-actions .btn {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .calendar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }
    .calendar-cell {
        min-height: 84px;
        padding: 10px 8px;
    }
    .mini-calendar {
        grid-template-columns: repeat(7, minmax(0,1fr));
    }
    .dashboard-stat-row {
        grid-template-columns: 1fr;
    }
}

/* v7 targeted plan request + mobile table refinements */
.plan-card-top {
    display: grid;
    justify-items: start;
    align-content: start;
    gap: 6px;
    text-align: left;
}
.plan-card-top > * {
    margin-left: 0;
    margin-right: 0;
}
.plan-price-stack {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    width: 100%;
    border-radius: 14px;
    background: rgba(255,255,255,.76);
    border: 1px solid rgba(201, 215, 235, .9);
}
.plan-price-main {
    font-size: 2rem;
    line-height: 1;
    font-weight: 800;
    color: #102b4e;
    letter-spacing: -0.03em;
}
.plan-price-main span {
    margin-left: 6px;
    font-size: .76rem;
    font-weight: 700;
    color: #5b6f8f;
}
.plan-price-sub {
    color: #6a7a94;
    font-size: .76rem;
    font-weight: 600;
}
.plan-feature-list {
    align-content: start;
    text-align: left;
}
.plan-card-actions form {
    margin: 0;
}
.plan-upgrade-copy strong {
    color: #173b6d;
}

/* v9 targeted desktop fix for Basic plan card content start position */
@media (min-width: 769px) {
    .plan-card.tone-basic {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 12px;
    }
    .plan-card.tone-basic .plan-card-top,
    .plan-card.tone-basic .plan-feature-list,
    .plan-card.tone-basic .plan-feature-list li,
    .plan-card.tone-basic .plan-feature-list li span {
        width: 100%;
        text-align: left;
        justify-content: flex-start;
        justify-items: start;
        align-items: flex-start;
    }
    .plan-card.tone-basic .plan-card-top .muted {
        margin: 0;
    }
    .plan-card.tone-basic .plan-feature-list {
        margin-top: 0;
        flex: 1 1 auto;
    }
    .plan-card.tone-basic .plan-feature-list li span {
        display: block;
    }
}
.request-review-actions {
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 760px) {
    .responsive-stack-table {
        overflow: visible !important;
    }
    .responsive-stack-table table {
        width: 100% !important;
        min-width: 0 !important;
    }
    .responsive-stack-table td,
    .responsive-stack-table td > * {
        max-width: 100%;
    }
    .responsive-stack-table .muted,
    .responsive-stack-table .nowrap-inline {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .owner-bookings-table td,
    .service-catalog-table td,
    .hours-table td,
    .hours-table th {
        min-width: 0 !important;
    }
    .owner-bookings-table .booking-action-form,
    .service-action-wrap,
    .request-review-actions {
        width: 100%;
        justify-content: stretch;
        align-items: stretch;
    }
    .owner-bookings-table .booking-action-form .select,
    .owner-bookings-table .booking-action-form .btn,
    .service-action-wrap .btn,
    .service-action-wrap form,
    .request-review-actions form,
    .request-review-actions .btn {
        width: 100%;
        flex: 1 1 100%;
    }
    .settings-card .smtp-help-card,
    .settings-card .logo-upload-panel,
    .settings-card .logo-upload-copy,
    .settings-card .smtp-test-actions,
    .settings-card .input,
    .settings-card .select,
    .settings-card .textarea {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    .plan-price-main {
        font-size: 1.8rem;
    }
}

.flash {
    transition: opacity .35s ease, transform .35s ease, max-height .35s ease, margin .35s ease, padding .35s ease;
}
.flash.is-hiding {
    opacity: 0;
    transform: translateY(-8px);
}
.status {
    align-items: center;
    justify-content: center;
    line-height: 1.1;
}
.account-dashboard-grid {
    align-items: start;
}
.account-panel-upcoming .account-record-card {
    padding: 12px 14px;
    text-align: left;
}
.account-panel-upcoming .account-record-top {
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
    text-align: left;
}
.account-panel-upcoming .account-record-top strong {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
}
.account-panel-upcoming .account-record-top .status {
    align-self: center;
    min-width: 96px;
}
.account-panel-upcoming .account-record-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 12px;
}
.account-panel-upcoming .account-record-grid span,
.account-panel-upcoming .account-record-label {
    text-align: left;
}
.account-panel-upcoming .account-record-label {
    margin-bottom: 2px;
}
.account-panel-upcoming .account-record-grid > div {
    min-width: 0;
}
.account-stat-card {
    position: relative;
    overflow: hidden;
    box-shadow: 0 14px 24px rgba(45, 58, 104, 0.12);
}
.account-stat-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 5px;
    opacity: .95;
}
.account-stat-card-upcoming {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 55%, #c7e4ff 100%);
    border-color: #7db8ff;
}
.account-stat-card-upcoming::before {
    background: linear-gradient(90deg, #2563eb, #38bdf8);
}
.account-stat-card-history {
    background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 55%, #fdba74 100%);
    border-color: #fb923c;
}
.account-stat-card-history::before {
    background: linear-gradient(90deg, #f97316, #fb7185);
}
.account-stat-card-vehicles {
    background: linear-gradient(135deg, #ecfdf5 0%, #bbf7d0 55%, #86efac 100%);
    border-color: #37d27a;
}
.account-stat-card-vehicles::before {
    background: linear-gradient(90deg, #16a34a, #10b981);
}
.booking-confirmation-card {
    position: relative;
    overflow: hidden;
    margin: 6px 0 18px;
    padding: 20px;
    border-radius: 32px;
    background: linear-gradient(180deg, #f4f3fb 0%, #eceff6 100%);
    border: 1px solid #d9dfeb;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.10);
    color: #0f172a;
}
.booking-confirmation-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 30%);
    pointer-events: none;
}
.booking-confirmation-brand,
.booking-confirmation-hero,
.booking-confirmation-grid,
.booking-confirmation-cta-slot {
    position: relative;
    z-index: 1;
}
.booking-confirmation-brand {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 8px;
}
.booking-confirmation-branding {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.booking-confirmation-branding strong {
    display: block;
    font-size: 1.18rem;
    font-weight: 800;
    color: #1f3f92;
}
.booking-confirmation-branding span {
    display: block;
    margin-top: 2px;
    font-size: .84rem;
    color: #7b849a;
}
.booking-confirmation-logo {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border-radius: 14px;
    object-fit: cover;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}
.booking-confirmation-logo-fallback {
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(135deg, #4338ca, #0ea5e9);
}
.booking-confirmation-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr);
    gap: 18px;
    align-items: center;
    padding: 26px 24px 74px;
    border-radius: 30px;
    background:
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.30), transparent 24%),
        linear-gradient(135deg, #6422bd 0%, #3753d6 42%, #1697ea 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
}
.booking-confirmation-hero::before {
    content: '';
    position: absolute;
    right: -120px;
    bottom: -120px;
    width: 520px;
    height: 280px;
    background:
        radial-gradient(ellipse at bottom left, transparent 0 47%, rgba(255,255,255,0.34) 47.5% 48.3%, transparent 48.8%),
        radial-gradient(ellipse at bottom left, transparent 0 58%, rgba(255,255,255,0.22) 58.5% 59.2%, transparent 59.8%),
        radial-gradient(ellipse at bottom left, transparent 0 69%, rgba(255,255,255,0.15) 69.5% 70.2%, transparent 70.8%);
    opacity: .9;
    pointer-events: none;
}
.booking-confirmation-hero::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 58%;
    width: 190px;
    height: 72px;
    background-image:
        radial-gradient(circle, rgba(255,206,84,.95) 0 3px, transparent 3.6px),
        radial-gradient(circle, rgba(34,211,238,.95) 0 3px, transparent 3.6px),
        radial-gradient(circle, rgba(244,114,182,.92) 0 3px, transparent 3.6px),
        radial-gradient(circle, rgba(74,222,128,.92) 0 3px, transparent 3.6px),
        radial-gradient(circle, rgba(250,204,21,.92) 0 3px, transparent 3.6px),
        radial-gradient(circle, rgba(192,132,252,.9) 0 3px, transparent 3.6px);
    background-size: 34px 24px;
    background-position: 0 0, 24px 10px, 50px 2px, 78px 18px, 116px 4px, 148px 16px;
    background-repeat: no-repeat;
    opacity: .95;
    pointer-events: none;
}
.booking-confirmation-copy {
    position: relative;
    z-index: 1;
    color: #ffffff;
}
.booking-confirmation-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(20,184,166,.44), rgba(59,130,246,.36));
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: #ecfeff;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.booking-confirmation-copy h2 {
    margin: 18px 0 10px;
    font-size: clamp(2.2rem, 2.7vw, 3rem);
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #ffffff;
}
.booking-confirmation-copy p {
    max-width: 52ch;
    margin: 0;
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.90);
}
.booking-confirmation-visual {
    position: relative;
    z-index: 1;
    min-height: 170px;
    display: grid;
    place-items: center;
}
.booking-confirmation-checkmark {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 124px;
    height: 124px;
    border-radius: 50%;
    background: linear-gradient(180deg, #33d2a1 0%, #2563eb 100%);
    border: 8px solid rgba(255, 255, 255, 0.90);
    box-shadow: 0 18px 42px rgba(37, 99, 235, 0.24), 0 0 0 8px rgba(255,255,255,0.08);
    font-size: 2.9rem;
    color: #ffffff;
}
.booking-confirmation-rings {
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border: 2px dashed rgba(255, 255, 255, 0.34);
    transform: rotate(-8deg);
}
.booking-confirmation-rings::before,
.booking-confirmation-rings::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.booking-confirmation-rings::before {
    inset: -24px;
}
.booking-confirmation-rings::after {
    inset: 32px;
}
.booking-confirmation-grid {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}
.booking-confirmation-grid-primary {
    position: relative;
    z-index: 2;
    margin-top: -38px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.booking-confirmation-grid-secondary {
    grid-template-columns: 1.12fr .72fr 1.28fr auto;
    align-items: stretch;
}
.booking-confirmation-item {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 82px;
    padding: 16px 18px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(249,250,255,0.98) 0%, rgba(238,243,255,0.96) 100%);
    border: 1px solid rgba(167, 180, 219, 0.18);
    box-shadow: 0 10px 22px rgba(148, 163, 184, 0.08);
}







.booking-confirmation-item-name { background: linear-gradient(180deg, #efe9ff 0%, #e5ddff 100%); }
.booking-confirmation-item-vehicle { background: linear-gradient(180deg, #e7f1ff 0%, #dceaff 100%); }
.booking-confirmation-item-datetime { background: linear-gradient(180deg, #efe9ff 0%, #e5ddff 100%); }
.booking-confirmation-item-reference { background: linear-gradient(180deg, #e7f1ff 0%, #dceaff 100%); }
.booking-confirmation-item-service { background: linear-gradient(180deg, #efe9ff 0%, #e5ddff 100%); }
.booking-confirmation-item-status { background: linear-gradient(180deg, #e7f1ff 0%, #dceaff 100%); }
.booking-confirmation-item-reminder { background: linear-gradient(180deg, #efe9ff 0%, #e5ddff 100%); }

.booking-confirmation-item span {
    display: block;
    margin-bottom: 6px;
    font-size: .9rem;
    color: #6d7790;
}
.booking-confirmation-item strong {
    display: block;
    font-size: 1.08rem;
    line-height: 1.32;
    font-weight: 800;
    color: #111b3a;
    word-break: break-word;
}
.booking-confirmation-icon {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    box-shadow: none;
}
.booking-confirmation-icon svg {
    width: 24px;
    height: 24px;
}
.booking-confirmation-icon-user { background: #e7ddff; color: #6d28d9; }
.booking-confirmation-icon-plate { background: #dbeafe; color: #2563eb; }
.booking-confirmation-icon-calendar { background: #e7ddff; color: #6d28d9; }
.booking-confirmation-icon-note { background: #dbeafe; color: #2563eb; }
.booking-confirmation-icon-service { background: #e7ddff; color: #6d28d9; }
.booking-confirmation-icon-status { background: #dbeafe; color: #2563eb; }
.booking-confirmation-icon-reminder { background: #e7ddff; color: #6d28d9; }
.booking-confirmation-status {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: .95rem;
    font-weight: 800;
}
.booking-confirmation-cta-slot {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
}
.booking-confirmation-download-inline {
    width: 100%;
    min-width: 240px;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    border-radius: 24px;
    background: linear-gradient(135deg, #6d28d9 0%, #1d9bf0 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    font-weight: 800;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.18);
}
.booking-confirmation-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 300px;
    padding: 15px 24px;
    border-radius: 999px;
    background: linear-gradient(135deg, #6d28d9 0%, #1d9bf0 100%);
    color: #ffffff;
    font-size: 1.02rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.18);
    transition: transform .18s ease, box-shadow .18s ease;
}
.booking-confirmation-link:hover,
.booking-confirmation-link:focus {
    transform: translateY(-1px);
    box-shadow: 0 22px 38px rgba(37, 99, 235, 0.24);
}
.booking-confirmation-download {
    position: static;
    z-index: 3;
    align-self: center;
    white-space: nowrap;
    margin-left: auto;
    padding: 12px 20px;
    border-radius: 18px;
    background: #ffffff !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    color: #111827 !important;
    font-weight: 800;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.10);
}
.booking-confirmation-download:hover,
.booking-confirmation-download:focus {
    transform: translateY(-1px);
    filter: brightness(0.99);
}
@media (max-width: 1120px) {
    .booking-confirmation-hero {
        grid-template-columns: 1fr;
        padding-bottom: 28px;
    }
    .booking-confirmation-visual {
        min-height: 132px;
    }
    .booking-confirmation-grid-primary,
    .booking-confirmation-grid-secondary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .booking-confirmation-cta-slot {
        grid-column: 1 / -1;
        justify-content: stretch;
    }
    .booking-confirmation-download-inline {
        width: 100%;
        min-width: 0;
    }
}
@media (max-width: 900px) {
    .booking-confirmation-brand {
        flex-direction: column;
        align-items: stretch;
    }
    .booking-confirmation-download {
        position: static;
        width: 100%;
        margin-left: 0;
        margin-top: 2px;
    }
}
@media (max-width: 680px) {
    .account-panel-upcoming .account-record-card {
        text-align: center;
    }
    .account-panel-upcoming .account-record-top {
        justify-content: center;
        text-align: center;
    }
    .account-panel-upcoming .account-record-grid span,
    .account-panel-upcoming .account-record-label {
        text-align: center;
    }
    .booking-confirmation-card {
        padding: 16px 14px 14px;
        border-radius: 24px;
    }
    .booking-confirmation-hero {
        padding: 18px 16px 26px;
        border-radius: 24px;
    }
    .booking-confirmation-checkmark {
        width: 92px;
        height: 92px;
        border-width: 6px;
        font-size: 2rem;
    }
    .booking-confirmation-rings {
        inset: 6px;
    }
    .booking-confirmation-grid-primary,
    .booking-confirmation-grid-secondary {
        grid-template-columns: 1fr;
    }
    .booking-confirmation-grid-primary {
        margin-top: 14px;
    }
    .booking-confirmation-cta-slot {
        grid-column: auto;
        justify-content: stretch;
    }
    .booking-confirmation-item {
        min-height: 0;
        padding: 14px;
        border-radius: 20px;
    }
    .booking-confirmation-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        border-radius: 50%;
    }
    .booking-confirmation-icon svg {
        width: 20px;
        height: 20px;
    }
    .booking-confirmation-link {
        font-size: .95rem;
        padding: 13px 18px;
    }
}

/* Admin module refinements for colourful single-row listings */
.module-toolbar {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}
.module-title h2 { margin-bottom: 6px; }
.module-title p { margin: 0; }
.admin-table-modern {
    border: 1px solid rgba(99, 102, 241, 0.14);
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,247,255,0.98));
    box-shadow: 0 18px 34px rgba(37, 99, 235, 0.08);
}
.admin-table-modern table { min-width: 980px; }
.admin-table-modern thead {
    background: linear-gradient(120deg, #312e81, #2563eb, #7c3aed);
    color: #fff;
}
.admin-table-modern th {
    color: rgba(255,255,255,0.92);
    font-size: 0.86rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: none;
    white-space: nowrap;
}
.admin-table-modern td {
    padding: 16px 12px;
    border-bottom: 1px solid #e8eefb;
    vertical-align: middle;
}
.admin-table-modern tbody tr:nth-child(even) { background: rgba(99, 102, 241, 0.03); }
.admin-table-modern tbody tr:hover { background: rgba(37, 99, 235, 0.06); }
.entity-main {
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width: 0;
}
.entity-name {
    font-weight: 800;
    color: #172554;
    font-size: 1rem;
}
.entity-sub,
.entity-meta {
    font-size: 0.88rem;
    color: var(--muted);
    word-break: break-word;
}
.entity-stack { display:grid; gap:6px; }
.metric-pill,
.color-pill {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}
.metric-pill {
    background: linear-gradient(135deg, #dbeafe, #ede9fe);
    color: #3730a3;
}
.color-pill.green { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color:#166534; }
.color-pill.blue { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color:#1d4ed8; }
.color-pill.orange { background: linear-gradient(135deg, #fed7aa, #fde68a); color:#9a3412; }
.color-pill.pink { background: linear-gradient(135deg, #fbcfe8, #e9d5ff); color:#9d174d; }
.color-pill.red { background: linear-gradient(135deg, #fee2e2, #fecaca); color:#b91c1c; }
.status-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    padding:8px 13px;
    font-size:0.82rem;
    font-weight:800;
    text-transform: capitalize;
}
.status-badge.draft { background: linear-gradient(135deg, #e2e8f0, #cbd5e1); color:#334155; }
.status-badge.unpaid { background: linear-gradient(135deg, #fee2e2, #fecaca); color:#b91c1c; }
.status-badge.partial { background: linear-gradient(135deg, #fde68a, #fdba74); color:#9a3412; }
.status-badge.paid { background: linear-gradient(135deg, #bbf7d0, #86efac); color:#166534; }
.action-cluster {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
}
.btn-info { background: linear-gradient(135deg, #22d3ee, #2563eb); color:#fff; }
.btn-warning { background: linear-gradient(135deg, #fbbf24, #f97316); color:#fff; }
.btn-purple { background: linear-gradient(135deg, #a78bfa, #7c3aed); color:#fff; }
.btn-teal { background: linear-gradient(135deg, #2dd4bf, #14b8a6); color:#fff; }
.report-tool-grid {
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.report-tool-card {
    border-radius: 14px;
    padding: 20px;
    color: #fff;
    box-shadow: 0 18px 30px rgba(31,42,68,0.12);
}
.report-tool-card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.report-tool-card p { margin: 0 0 14px; font-size: 0.92rem; opacity: 0.95; }
.report-tool-card.customer { background: linear-gradient(135deg, #2563eb, #7c3aed); }
.report-tool-card.revenue { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.report-tool-card.service { background: linear-gradient(135deg, #d97706, #f59e0b); }
.report-tool-card.inventory { background: linear-gradient(135deg, #db2777, #ec4899); }
.report-tool-card.invoice { background: linear-gradient(135deg, #16a34a, #84cc16); }
.report-tool-card.workorder { background: linear-gradient(135deg, #7c2d12, #f97316); }
.report-actions { display:flex; flex-wrap:wrap; gap:10px; }
.report-filter-bar {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    margin-top: 8px;
}
.report-summary {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:12px;
}
.report-summary .metric-pill { font-size: 0.88rem; padding: 9px 14px; }
.nowrap-inline { display:block; margin-top:4px; }
@media (max-width: 680px) {
    .module-toolbar { align-items:stretch; }
    .action-cluster { flex-direction: column; align-items: stretch; }
}


.report-stats-grid .stat-card,
.report-tool-card,
.report-results-card .module-title,
.report-results-card .empty-state,
.report-date-filter,
.report-date-note {
  text-align: center;
}

.report-stats-grid .stat-card .hint,
.report-tool-card p {
  margin-left: auto;
  margin-right: auto;
}

.report-date-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: end;
  gap: 14px;
  margin: 18px 0 20px;
}

.report-filter-fields {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.report-filter-fields > div {
  min-width: 210px;
}

.report-filter-fields label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
}

.report-date-note {
  width: 100%;
  color: #5b6b90;
  font-weight: 600;
}


/* Final responsive + desktop stretch pass for garage and super admin panels */
.admin-panel-page .container,
.admin-panel-page .flash {
    width: min(1680px, calc(100% - 24px));
}

.admin-panel-page .dashboard-content-shell {
    grid-template-columns: minmax(220px, 250px) minmax(0, 1fr);
    align-items: start;
}

.admin-panel-page .dashboard-main,
.admin-panel-page .dashboard-panel,
.admin-panel-page .dashboard-sidebar,
.admin-panel-page .dashboard-sidebar-card,
.admin-panel-page .card,
.admin-panel-page .table-wrap,
.admin-panel-page .module-toolbar,
.admin-panel-page .form-grid,
.admin-panel-page .form-grid-3,
.admin-panel-page .report-tool-grid,
.admin-panel-page .report-filter-bar,
.admin-panel-page .report-summary,
.admin-panel-page .dashboard-grid-main,
.admin-panel-page .dashboard-bottom-grid {
    min-width: 0;
}

.admin-panel-page .dashboard-grid-main {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 23vw);
}

.admin-panel-page .dashboard-bottom-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-panel-page .dashboard-panel,
.admin-panel-page .card,
.admin-panel-page .dashboard-sidebar-card,
.admin-panel-page .dashboard-stat-card {
    width: 100%;
    max-width: 100%;
}

.admin-panel-page .table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
}

.admin-panel-page .dashboard-table table,
.admin-panel-page .admin-table-modern table,
.admin-panel-page .table-wrap table {
    width: 100%;
}

.admin-panel-page .input,
.admin-panel-page .select,
.admin-panel-page .textarea,
.admin-panel-page input,
.admin-panel-page select,
.admin-panel-page textarea {
    max-width: 100%;
}

.admin-panel-page .inline-actions,
.admin-panel-page .action-cluster,
.admin-panel-page .booking-action-form,
.admin-panel-page .service-action-wrap,
.admin-panel-page .report-actions,
.admin-panel-page .settings-inline-actions,
.admin-panel-page .service-form-actions,
.admin-panel-page .smtp-test-actions {
    flex-wrap: wrap;
}

.admin-panel-page .calendar-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

@media (min-width: 1500px) {
    .admin-panel-page .container,
    .admin-panel-page .flash {
        width: min(1800px, calc(100% - 28px));
    }

    .admin-panel-page .dashboard-content-shell {
        grid-template-columns: minmax(230px, 260px) minmax(0, 1fr);
    }

    .admin-panel-page .dashboard-grid-main {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 24vw);
    }
}

@media (max-width: 1200px) {
    .admin-panel-page .container,
    .admin-panel-page .flash {
        width: min(100%, calc(100% - 20px));
    }

    .admin-panel-page .dashboard-content-shell,
    .admin-panel-page .dashboard-grid-main,
    .admin-panel-page .dashboard-bottom-grid,
    .admin-panel-page .form-grid,
    .admin-panel-page .form-grid-3 {
        grid-template-columns: 1fr;
    }

    .admin-panel-page .dashboard-stat-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .admin-panel-page .container,
    .admin-panel-page .flash {
        width: min(100%, calc(100% - 16px));
    }

    .admin-panel-page .dashboard-content-shell {
        padding: 14px 0 24px;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .admin-panel-page .dashboard-grid-main,
    .admin-panel-page .dashboard-bottom-grid,
    .admin-panel-page .status-overview-wrap,
    .admin-panel-page .logo-upload-panel,
    .admin-panel-page .booking-grid,
    .admin-panel-page .plan-compare-grid,
    .admin-panel-page .booking-confirmation-grid {
        grid-template-columns: 1fr;
    }

    .admin-panel-page .dashboard-topbar-inner {
        flex-wrap: wrap;
        align-items: center;
    }

    .admin-panel-page .dashboard-menu-toggle {
        display: inline-flex;
        margin-left: auto;
    }

    .admin-panel-page .dashboard-userchip {
        display: none;
    }

    .admin-panel-page .dashboard-sidebar {
        left: 8px;
        right: 8px;
        width: auto;
        max-width: none;
    }

    .admin-panel-page .dashboard-panel > .panel-header,
    .admin-panel-page .module-toolbar,
    .admin-panel-page .card > .inline-actions,
    .admin-panel-page .report-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-panel-page .report-filter-bar > *,
    .admin-panel-page .inline-actions > *,
    .admin-panel-page .action-cluster > *,
    .admin-panel-page .booking-action-form > *,
    .admin-panel-page .service-action-wrap > *,
    .admin-panel-page .report-actions > *,
    .admin-panel-page .settings-inline-actions > *,
    .admin-panel-page .service-form-actions > *,
    .admin-panel-page .smtp-test-actions > * {
        width: 100%;
        max-width: 100%;
    }

    .admin-panel-page .dashboard-stat-row {
        grid-template-columns: 1fr;
    }

    .admin-panel-page .mini-calendar {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .admin-panel-page .container,
    .admin-panel-page .flash {
        width: min(100%, calc(100% - 12px));
    }

    .admin-panel-page .dashboard-topbar-inner {
        gap: 10px;
        padding: 10px 0;
    }

    .admin-panel-page .dashboard-brand {
        min-width: 0;
        max-width: calc(100% - 116px);
    }

    .admin-panel-page .dashboard-brand span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .admin-panel-page .dashboard-menu-toggle {
        min-width: 102px;
    }

    .admin-panel-page .dashboard-panel > .panel-header,
    .admin-panel-page .card,
    .admin-panel-page .dashboard-sidebar-card,
    .admin-panel-page .dashboard-stat-card {
        padding-left: 14px;
        padding-right: 14px;
    }

    .admin-panel-page .dashboard-panel {
        overflow: hidden;
    }

    .admin-panel-page .table-wrap {
        margin-left: 0;
        margin-right: 0;
    }

    .admin-panel-page .calendar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .admin-panel-page .calendar-cell {
        min-height: 88px;
        padding: 10px 8px;
    }

    .admin-panel-page .responsive-stack-table table,
    .admin-panel-page .responsive-stack-table thead,
    .admin-panel-page .responsive-stack-table tbody,
    .admin-panel-page .responsive-stack-table tr,
    .admin-panel-page .responsive-stack-table th,
    .admin-panel-page .responsive-stack-table td {
        display: block;
        width: 100%;
    }

    .admin-panel-page .responsive-stack-table thead {
        display: none;
    }

    .admin-panel-page .responsive-stack-table tbody {
        display: grid;
        gap: 12px;
    }

    .admin-panel-page .responsive-stack-table tr {
        border: 1px solid #dde3ee;
        border-radius: 14px;
        padding: 14px;
        background: #fff;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
    }

    .admin-panel-page .responsive-stack-table td {
        padding: 8px 0;
        border: 0;
        min-width: 0;
    }

    .admin-panel-page .responsive-stack-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        color: #64748b;
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .admin-panel-page .admin-table-modern,
    .admin-panel-page .dashboard-table,
    .admin-panel-page .table-wrap {
        overflow: visible;
    }
}

@media (max-width: 520px) {
    .admin-panel-page .container,
    .admin-panel-page .flash {
        width: min(100%, calc(100% - 10px));
    }

    .admin-panel-page .calendar-grid {
        grid-template-columns: 1fr;
    }

    .admin-panel-page .mini-calendar {
        gap: 3px;
        padding: 10px;
    }

    .admin-panel-page .mini-calendar-label,
    .admin-panel-page .mini-calendar-day {
        min-height: 28px;
        font-size: 0.72rem;
    }
}


/* Account page beautification */
.account-page .booking-page-shell,
.account-page-shell {
    max-width: 1360px;
}
.account-page {
    background:
        radial-gradient(circle at top left, rgba(37,99,235,0.10), transparent 28%),
        radial-gradient(circle at top right, rgba(14,165,233,0.10), transparent 24%),
        linear-gradient(180deg, #f5f8ff 0%, #eef4ff 100%);
}
.account-page .booking-card-public.account-card-shell,
.account-card-shell {
    border-radius: 26px;
    border: 1px solid rgba(148,163,184,0.22);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(247,250,255,0.96) 100%);
    box-shadow: 0 20px 44px rgba(30,41,59,0.10);
    backdrop-filter: blur(8px);
}
.account-auth-header,
.account-dashboard-header {
    padding: 0 2px 6px;
    margin-bottom: 24px;
}
.account-page-title {
    color: #102a56;
    font-weight: 900;
    letter-spacing: -0.04em;
}
.account-page-subtitle {
    color: #5a6f95;
    font-size: 1rem;
    line-height: 1.7;
}
.account-panel {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(148,163,184,0.24);
    background:
        radial-gradient(circle at top right, rgba(255,255,255,0.55), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(244,248,255,0.98) 100%);
    box-shadow: 0 16px 34px rgba(51,65,85,0.09);
}
.account-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, #2563eb, #06b6d4, #22c55e);
    opacity: 0.95;
}
.account-panel .section-title {
    color: #14315f;
    font-weight: 900;
    letter-spacing: -0.02em;
}
.account-panel .section-rule {
    background: linear-gradient(90deg, rgba(37,99,235,0.28), rgba(14,165,233,0.14), transparent);
    height: 2px;
    border: 0;
}
.account-panel .input-label {
    font-size: 0.79rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5f749b;
    font-weight: 800;
}
.account-panel .booking-field,
.account-panel .input,
.account-panel select,
.account-panel textarea {
    border-radius: 14px;
    border-color: #d7e2f3;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 4px 10px rgba(37,99,235,0.04);
}
.account-panel .booking-field:focus-within,
.account-panel .input:focus,
.account-panel select:focus,
.account-panel textarea:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 4px rgba(59,130,246,0.14), inset 0 1px 0 rgba(255,255,255,0.9);
}
.account-panel .field-icon {
    color: #2563eb;
}
.account-header-btn,
.account-submit-btn,
.account-inline-actions .btn,
.account-actions .btn {
    border-radius: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em;
    box-shadow: 0 10px 18px rgba(37,99,235,0.12);
}
.account-header-btn.btn-outline,
.account-inline-actions .btn.btn-outline {
    border-color: #bfdbfe;
    color: #1d4ed8;
    background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
}
.account-submit-btn,
.account-actions .btn.btn-success,
.account-inline-actions .btn.btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.account-submit-btn:hover,
.account-actions .btn.btn-success:hover,
.account-inline-actions .btn.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 24px rgba(37,99,235,0.18);
}
.account-stat-card {
    border-radius: 26px;
    padding: 24px 22px 22px;
    min-height: 186px;
    border-width: 1px;
    transform: translateY(0);
    transition: transform .18s ease, box-shadow .22s ease, filter .22s ease;
}
.account-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 38px rgba(37, 99, 235, 0.18);
    filter: saturate(1.03);
}
.account-stat-card h4 {
    color: #17305e;
    font-weight: 900;
    letter-spacing: 0.01em;
    font-size: 1.05rem;
}
.account-stat-card .value {
    color: #081226;
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 900;
    letter-spacing: -0.05em;
    margin: 2px 0 8px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}
.account-stat-card .hint {
    color: #425372;
    font-size: 0.98rem;
    line-height: 1.35;
    max-width: 23ch;
}
.account-record-card,
.account-list-item,
.account-trust-strip {
    border-radius: 14px;
    border: 1px solid rgba(148,163,184,0.22);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 10px 22px rgba(51,65,85,0.07);
}
.account-record-card-history {
    border-radius: 14px;
}
.account-record-top strong,
.account-list-item strong {
    color: #17305d;
    font-weight: 900;
}
.account-record-label {
    color: #6a7ea5;
}
.account-field-disabled {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 14px;
}
.account-trust-strip {
    padding: 18px 20px;
}
.account-trust-strip .trust-item {
    border-radius: 14px;
    background: rgba(255,255,255,0.74);
    border: 1px solid rgba(191,219,254,0.55);
}
@media (max-width: 680px) {
    .account-page .booking-card-public.account-card-shell,
    .account-card-shell,
    .account-panel,
    .account-stat-card,
    .account-record-card,
    .account-list-item,
    .account-trust-strip {
        border-radius: 14px;
    }
}


/* Customer My Account — Compact Table + Cards Hybrid */
.account-hybrid-shell{padding:32px!important}
.account-dashboard-header-hybrid{margin-bottom:24px}
.account-hybrid-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0 0 24px}
.account-hybrid-stat-card{display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:22px;color:#fff;box-shadow:0 18px 40px rgba(15,23,42,.12)}
.account-hybrid-stat-card.tone-upcoming{background:linear-gradient(135deg,#2563eb,#1d4ed8)}
.account-hybrid-stat-card.tone-history{background:linear-gradient(135deg,#7c3aed,#6d28d9)}
.account-hybrid-stat-card.tone-vehicles{background:linear-gradient(135deg,#059669,#047857)}
.account-hybrid-stat-icon{width:56px;height:56px;border-radius:18px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;flex:0 0 56px}
.account-hybrid-stat-icon svg{width:24px;height:24px;stroke:currentColor}
.account-hybrid-stat-copy{display:flex;flex-direction:column;gap:2px}
.account-hybrid-stat-label{font-size:.86rem;text-transform:uppercase;letter-spacing:.12em;opacity:.86}
.account-hybrid-stat-copy strong{font-size:2rem;line-height:1;font-weight:800;color:#fff}
.account-hybrid-stat-copy small{font-size:.9rem;opacity:.92}
.account-hybrid-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(320px,.95fr);gap:24px;align-items:start}
.account-hybrid-main,.account-hybrid-side{display:grid;gap:24px}
.account-panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.account-panel-head .section-title{margin-bottom:6px}
.account-panel.account-panel-table,.account-panel.account-panel-profile,.account-panel.account-panel-vehicles,.account-panel.account-panel-compact-list{padding:24px;border-radius:24px;background:#fff;box-shadow:0 14px 34px rgba(15,23,42,.08)}
.account-table-wrap{overflow:auto;border:1px solid #e2e8f0;border-radius:20px}
.account-booking-table{width:100%;border-collapse:collapse;min-width:720px;background:#fff}
.account-booking-table th,.account-booking-table td{padding:16px 18px;text-align:left;border-bottom:1px solid #eef2f7;vertical-align:middle}
.account-booking-table th{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:#64748b;background:#f8fafc}
.account-booking-table tbody tr:hover{background:#f8fbff}
.account-table-subline{display:block;margin-top:4px;color:#94a3b8;font-size:.82rem;line-height:1.4}
.account-compact-list{display:grid;gap:14px}
.account-compact-item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border:1px solid #e2e8f0;border-radius:18px;background:linear-gradient(180deg,#fff,#f8fafc)}
.account-compact-item-main{display:flex;flex-direction:column;gap:6px}
.account-compact-item-main strong{font-size:1rem;color:#0f172a}
.account-compact-item-main span{font-size:.9rem;color:#64748b}
.account-compact-item-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end;color:#334155}
.account-profile-summary-hybrid{padding:16px 18px;border:1px solid #e2e8f0;border-radius:20px;background:linear-gradient(180deg,#fff,#f8fafc);margin-bottom:18px}
.account-list-hybrid{gap:12px}
.account-list-hybrid .account-list-item{padding:14px 16px;border-radius:18px;border:1px solid #e2e8f0;background:linear-gradient(180deg,#fff,#f8fafc)}
.account-list-hybrid .account-list-item form{margin-left:12px}
@media (max-width: 1024px){.account-hybrid-grid{grid-template-columns:1fr}.account-hybrid-side{grid-template-columns:1fr 1fr}.account-booking-table{min-width:640px}}
@media (max-width: 768px){.account-hybrid-shell{padding:22px!important}.account-hybrid-stats{grid-template-columns:1fr}.account-hybrid-side{grid-template-columns:1fr}.account-panel-head,.account-compact-item{flex-direction:column;align-items:flex-start}.account-compact-item-meta{justify-content:flex-start}.account-booking-table{min-width:560px}}

/* Customer My Account - Layout 1 (Compact Dashboard) */
.account-dashboard-v1{padding:22px!important;background:linear-gradient(180deg,#f8efe8 0%,#f7f8fc 28%,#f3f5fb 100%);border-radius:32px;box-shadow:0 24px 50px rgba(15,23,42,.08)}
.account-layout-v1{display:grid;grid-template-columns:250px minmax(0,1fr);gap:24px;align-items:start}
.account-sidebar-v1{position:sticky;top:18px;background:rgba(255,255,255,.82);border:1px solid rgba(217,119,6,.10);box-shadow:0 18px 40px rgba(15,23,42,.08);border-radius:28px;padding:20px;display:grid;gap:20px}
.account-sidebar-brand{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid #eceff7}
.account-sidebar-logo{width:54px;height:54px;border-radius:18px;background:linear-gradient(135deg,#fb923c,#f97316);display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:800;color:#fff;box-shadow:0 10px 20px rgba(249,115,22,.25)}
.account-sidebar-brand strong{display:block;color:#142c63;font-size:1.04rem}
.account-sidebar-brand small,.account-sidebar-label{display:block;color:#7182ab}
.account-sidebar-label{text-transform:uppercase;font-size:.72rem;letter-spacing:.14em;margin-bottom:4px}
.account-sidebar-nav{display:grid;gap:6px}
.account-sidebar-nav a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;color:#4b5f88;font-weight:700;text-decoration:none;transition:.2s ease}
.account-sidebar-nav a svg{width:18px;height:18px;stroke:currentColor}
.account-sidebar-nav a:hover,.account-sidebar-nav a.is-active{background:linear-gradient(135deg,#fff7ed,#ffedd5);color:#ea580c;box-shadow:inset 0 0 0 1px rgba(249,115,22,.14)}
.account-sidebar-help{display:grid;gap:10px;padding:16px;border-radius:20px;background:linear-gradient(135deg,#172554,#1d4ed8);color:#fff}
.account-sidebar-help span{font-weight:700}
.account-main-v1{display:grid;gap:20px}
.account-topbar-v1{display:flex;align-items:center;justify-content:space-between;gap:16px}
.account-search-v1{flex:1;max-width:520px;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.88);border:1px solid #e8edf6;border-radius:18px;padding:0 14px;box-shadow:0 12px 28px rgba(15,23,42,.05)}
.account-search-v1 .field-icon{position:static;width:18px;height:18px;color:#9aa7c2}
.account-search-v1 input{border:none;background:transparent;color:#8c98b2;font-weight:600;padding:14px 0;box-shadow:none}
.account-search-v1 input:focus{outline:none}
.account-topbar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.account-day-chip,.account-icon-chip{display:inline-flex;align-items:center;justify-content:center;border-radius:14px;background:#fff;color:#f97316;border:1px solid #fbd1b0;box-shadow:0 8px 18px rgba(249,115,22,.12)}
.account-day-chip{padding:11px 16px;font-weight:800}
.account-icon-chip{width:44px;height:44px}
.account-icon-chip svg{width:18px;height:18px;stroke:currentColor}
.account-hero-v1{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 6px 2px}
.account-hero-kicker,.account-section-kicker{display:inline-block;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:800;color:#f97316;margin-bottom:8px}
.account-hero-v1 .account-page-title{margin:0 0 8px;color:#142c63;font-size:2.2rem;line-height:1.1}
.account-hero-v1 .account-page-subtitle{max-width:680px;color:#64759a;font-size:1rem}
.account-hero-clear-btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:16px;background:linear-gradient(135deg,#fb923c,#f97316);color:#fff;text-decoration:none;font-weight:800;box-shadow:0 12px 22px rgba(249,115,22,.22)}
.account-metric-grid-v1{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.account-metric-card-v1{border-radius:24px;padding:20px 22px;min-height:144px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 18px 36px rgba(15,23,42,.08);border:1px solid rgba(255,255,255,.7)}
.account-metric-card-v1 .account-metric-title{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;font-weight:800;opacity:.86}
.account-metric-card-v1 strong{font-size:2.25rem;line-height:1;color:#142c63}
.account-metric-card-v1 small{color:#6d7d9e;font-weight:600}
.account-metric-card-v1.tone-income{background:linear-gradient(135deg,#fb923c,#f97316);color:#fff}
.account-metric-card-v1.tone-income strong,.account-metric-card-v1.tone-income small{color:#fff}
.account-metric-card-v1.tone-expense{background:linear-gradient(135deg,#ffffff,#fff7ed)}
.account-metric-card-v1.tone-operations{background:linear-gradient(135deg,#ffffff,#eff6ff)}
.account-metric-card-v1.tone-summary{background:linear-gradient(135deg,#ffffff,#ecfccb)}

.account-metric-link-v1{display:block;color:inherit;text-decoration:none}
.account-metric-link-v1 .account-metric-card-v1{height:100%;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.account-metric-link-v1:hover .account-metric-card-v1,.account-metric-link-v1:focus-visible .account-metric-card-v1{transform:translateY(-2px);box-shadow:0 22px 40px rgba(15,23,42,.1)}
.account-metric-link-v1:focus-visible{outline:none}
.account-page .account-metric-grid-v1 .account-metric-card-v1{align-items:center;text-align:center}
.account-content-grid-v1{display:grid;grid-template-columns:minmax(0,1.65fr) 320px;gap:20px;align-items:start}
.account-booking-board-v1,.account-panel-v1{background:rgba(255,255,255,.88);border:1px solid #ebeff7;border-radius:28px;padding:22px;box-shadow:0 16px 36px rgba(15,23,42,.07)}
.account-section-head-v1{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.account-section-head-v1.compact h2,.account-section-head-v1 h2{margin:0;color:#142c63;font-size:1.2rem}
.account-link-chip{display:inline-flex;align-items:center;padding:10px 14px;border-radius:14px;background:#fff7ed;color:#f97316;text-decoration:none;font-weight:800}
.account-table-board-v1{overflow:auto}
.account-booking-table-v1{width:100%;border-collapse:separate;border-spacing:0 10px;min-width:760px}
.account-booking-table-v1 thead th{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:#7c8cae;padding:0 14px 8px;text-align:left}
.account-booking-table-v1 tbody td{background:#fff;padding:16px 14px;vertical-align:top;border-top:1px solid #edf1f7;border-bottom:1px solid #edf1f7}
.account-booking-table-v1 tbody td:first-child{border-left:1px solid #edf1f7;border-radius:18px 0 0 18px}
.account-booking-table-v1 tbody td:last-child{border-right:1px solid #edf1f7;border-radius:0 18px 18px 0}
.account-table-note-v1{display:block;margin-top:4px;color:#8a97b2;font-size:.84rem}
.account-booking-filters-v1{display:grid;grid-template-columns:minmax(180px,1.2fr) minmax(160px,1fr) minmax(160px,1fr) auto;gap:12px;align-items:end;margin-bottom:12px}
.account-filter-group-v1{margin:0}
.account-filter-label-v1{display:block;margin:0 0 7px;padding-left:2px;font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7b8cad}
.account-filter-actions-v1{display:flex;align-items:flex-end;justify-content:flex-end;min-height:58px}
.account-filter-reset-v1{min-height:58px;padding:0 18px;border-radius:16px;border:1px solid #d9e3f3;background:#fff;color:#23448a;font-family:"Poppins","Segoe UI",Roboto,Arial,sans-serif;font-size:.93rem;font-weight:700;cursor:pointer;box-shadow:0 8px 20px rgba(33,72,143,.08);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.account-filter-reset-v1:hover{transform:translateY(-1px);border-color:#bfd1ef;box-shadow:0 12px 24px rgba(33,72,143,.12)}
.account-filter-date-input-v1{font-variant-numeric:tabular-nums}
.account-filter-date-input-v1::-webkit-calendar-picker-indicator{opacity:.78;cursor:pointer}
.account-booking-filter-feedback-v1{margin:0 0 14px;padding-left:2px;color:#6f809f;font-size:.92rem;font-weight:600}
.account-booking-filter-empty-v1{display:flex;align-items:center;justify-content:center;min-height:120px;padding:18px 20px;border:1px dashed #d6deee;border-radius:20px;background:rgba(248,250,255,.95);color:#5d7092;font-weight:600;text-align:center;margin-bottom:14px}
.account-booking-filter-empty-v1[hidden]{display:none!important}
.account-side-stack-v1{display:grid;gap:20px}
.account-upcoming-list-v1,.account-vehicle-list-v1,.account-inline-list-v1{display:grid;gap:12px}
.account-upcoming-item-v1,.account-vehicle-row-v1,.account-inline-list-row-v1{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;background:#fff;border:1px solid #edf1f7;border-radius:18px}
.account-upcoming-item-v1 strong,.account-vehicle-row-v1 strong,.account-inline-list-row-v1 strong{display:block;color:#142c63}
.account-upcoming-item-v1 span,.account-vehicle-row-v1 span,.account-inline-list-row-v1 span{display:block;color:#7a89a8;font-size:.92rem;margin-top:4px}
.account-upcoming-meta-v1{display:grid;justify-items:end;gap:10px}
.account-upcoming-meta-v1 small{color:#8a97b2;font-weight:700}
.account-vehicle-thumb-v1{width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,#eff6ff,#dbeafe);display:flex;align-items:center;justify-content:center;color:#2563eb;flex:0 0 48px}
.account-vehicle-thumb-v1 svg{width:20px;height:20px;stroke:currentColor}
.account-vehicle-row-v1{justify-content:flex-start}
.account-vehicle-form-panel-v1,.account-profile-panel-v1{min-height:100%}
.account-bottom-grid-v1{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.account-form-v1 .booking-field,.account-form-v1 .input,.account-form-v1 .select{background:#fff}
.account-form-grid-v1{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.account-inline-form-v1{margin:0}
.account-dashboard-v1 .status{white-space:nowrap;border-radius:999px;padding:7px 12px;font-weight:800}
@media (max-width: 1180px){.account-layout-v1{grid-template-columns:1fr}.account-sidebar-v1{position:relative;top:auto}.account-content-grid-v1{grid-template-columns:1fr}.account-bottom-grid-v1{grid-template-columns:1fr}.account-metric-grid-v1{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 1024px){.account-booking-filters-v1{grid-template-columns:repeat(2,minmax(0,1fr))}.account-filter-actions-v1{justify-content:flex-start}}
@media (max-width: 768px){.account-dashboard-v1{padding:16px!important;border-radius:22px}.account-topbar-v1,.account-hero-v1,.account-section-head-v1,.account-upcoming-item-v1,.account-inline-list-row-v1{flex-direction:column;align-items:flex-start}.account-search-v1{max-width:none;width:100%}.account-upcoming-meta-v1{justify-items:start}.account-metric-grid-v1,.account-form-grid-v1,.account-booking-filters-v1{grid-template-columns:1fr}.account-booking-table-v1{min-width:640px}.account-filter-actions-v1{width:100%}.account-filter-reset-v1{width:100%}}


/* Customer account mobile freeze fix - scoped only to customer account dashboard */
@media (max-width: 860px) {
    .account-page .account-layout-v1 {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .account-page .account-layout-v1 > * {
        min-width: 0;
    }
    .account-page .account-main-v1 {
        order: 2;
        min-width: 0;
    }
    .account-page .account-sidebar-v1 {
        order: 1;
        position: static;
        top: auto;
        gap: 10px;
        padding: 16px;
        box-shadow: 0 10px 24px rgba(15,23,42,.06);
    }
    .account-page .account-sidebar-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .account-page .account-sidebar-nav a {
        min-width: 0;
        justify-content: center;
        text-align: center;
        padding: 12px;
    }
    .account-page .account-topbar-v1,
    .account-page .account-hero-v1,
    .account-page .account-section-head-v1,
    .account-page .account-upcoming-item-v1,
    .account-page .account-inline-list-row-v1 {
        flex-direction: column;
        align-items: stretch;
    }
    .account-page .account-topbar-actions {
        width: 100%;
    }
    .account-page .account-topbar-actions form,
    .account-page .account-topbar-actions .account-header-btn {
        width: 100%;
    }
    .account-page .account-search-v1 {
        display: none;
    }
    .account-page .account-content-grid-v1,
    .account-page .account-bottom-grid-v1,
    .account-page .account-metric-grid-v1,
    .account-page .account-form-grid-v1 {
        grid-template-columns: 1fr;
    }
    .account-page .account-table-board-v1,
    .account-page .account-booking-board-v1,
    .account-page .account-panel-v1 {
        min-width: 0;
    }
    .account-page .account-table-board-v1 {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .account-page .account-card-shell,
    .account-page .booking-card-public.account-card-shell {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

@media (max-width: 560px) {
    .account-page .account-sidebar-nav {
        grid-template-columns: 1fr;
    }
}


/* Customer account page mobile-friendly refinements - scoped only to customer account dashboard */
@media (max-width: 860px) {
    .account-page .account-dashboard-v1 {
        padding: 14px !important;
        border-radius: 14px;
    }
    .account-page .account-main-v1 {
        gap: 10px;
    }
    .account-page .account-sidebar-v1,
    .account-page .account-booking-board-v1,
    .account-page .account-panel-v1,
    .account-page .account-metric-card-v1 {
        border-radius: 14px;
    }
    .account-page .account-sidebar-v1 {
        width: min(100%, 520px);
        margin-inline: auto;
        justify-self: center;
    }
    .account-page .account-sidebar-brand {
        align-items: center;
    }
    .account-page .account-sidebar-brand > div:last-child {
        min-width: 0;
    }
    .account-page .account-sidebar-brand strong,
    .account-page .account-sidebar-brand small {
        overflow-wrap: anywhere;
    }
    .account-page .account-topbar-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }
    .account-page .account-day-chip,
    .account-page .account-icon-chip,
    .account-page .account-topbar-actions form,
    .account-page .account-topbar-actions .account-header-btn {
        width: 100%;
        margin: 0;
    }
    .account-page .account-topbar-actions form {
        grid-column: 1 / -1;
    }
    .account-page .account-hero-v1 {
        padding: 4px 0 0;
        gap: 10px;
    }
    .account-page .account-hero-v1 .account-page-title {
        font-size: 1.55rem;
        line-height: 1.15;
    }
    .account-page .account-hero-v1 .account-page-subtitle {
        font-size: .95rem;
        line-height: 1.55;
    }
    .account-page .account-hero-clear-btn,
    .account-page .account-link-chip,
    .account-page .account-actions .btn,
    .account-page .account-inline-form-v1 .btn {
        width: 100%;
        justify-content: center;
    }
    .account-page .account-metric-grid-v1 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .account-page .account-metric-card-v1 {
        min-height: 0;
        padding: 16px;
        gap: 6px;
    }
    .account-page .account-metric-card-v1 strong {
        font-size: 1.7rem;
    }
    .account-page .account-section-head-v1.compact h2,
    .account-page .account-section-head-v1 h2 {
        font-size: 1.05rem;
    }
    .account-page .account-booking-board-v1,
    .account-page .account-panel-v1 {
        padding: 16px;
    }
    .account-page .account-upcoming-item-v1,
    .account-page .account-inline-list-row-v1,
    .account-page .account-vehicle-row-v1 {
        padding: 14px;
    }
    .account-page .account-vehicle-row-v1 {
        align-items: flex-start;
    }
    .account-page .account-upcoming-meta-v1 {
        width: 100%;
        justify-items: start;
    }
    .account-page .account-upcoming-meta-v1 .status {
        align-self: flex-start;
    }
    .account-page .account-inline-form-v1 {
        width: 100%;
    }
    .account-page .account-form-v1 .booking-field,
    .account-page .account-form-v1 .input,
    .account-page .account-form-v1 .select {
        min-height: 50px;
    }
    .account-page .account-booking-table-v1 {
        min-width: 0;
        border-spacing: 0;
    }
    .account-page .account-booking-table-v1 thead {
        display: none;
    }
    .account-page .account-booking-table-v1,
    .account-page .account-booking-table-v1 tbody,
    .account-page .account-booking-table-v1 tr,
    .account-page .account-booking-table-v1 td {
        display: block;
        width: 100%;
    }
    .account-page .account-booking-table-v1 tbody {
        display: grid;
        gap: 12px;
    }
    .account-page .account-booking-table-v1 tr {
        background: #fff;
        border: 1px solid #edf1f7;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 8px 20px rgba(15,23,42,.05);
    }
    .account-page .account-booking-table-v1 tbody td,
    .account-page .account-booking-table-v1 tbody td:first-child,
    .account-page .account-booking-table-v1 tbody td:last-child {
        border: 0;
        border-radius: 0;
        padding: 10px 14px;
        background: transparent;
    }
    .account-page .account-booking-table-v1 tbody td + td {
        border-top: 1px solid #f1f5f9;
    }
    .account-page .account-booking-table-v1 tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #7c8cae;
    }
    .account-page .account-booking-table-v1 tbody td:first-child {
        padding-top: 14px;
    }
    .account-page .account-booking-table-v1 tbody td:last-child {
        padding-bottom: 14px;
    }
    .account-page .account-table-note-v1 {
        margin-top: 6px;
        line-height: 1.35;
    }
}

@media (max-width: 560px) {
    .account-page .account-topbar-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .account-page .account-metric-grid-v1,
    .account-page .account-sidebar-nav {
        grid-template-columns: 1fr;
    }
    .account-page .account-sidebar-nav a {
        justify-content: flex-start;
        text-align: left;
    }
    .account-page .account-sidebar-logo {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        font-size: 1.1rem;
    }
}

/* Customer account mobile compact navigation only */
@media (max-width: 860px) {
    .account-page .account-sidebar-v1 {
        width: 100%;
        max-width: none;
        margin-inline: 0;
        padding: 12px 14px;
        gap: 12px;
        border-radius: 14px;
    }
    .account-page .account-sidebar-brand {
        gap: 10px;
        padding-bottom: 10px;
    }
    .account-page .account-sidebar-logo {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        border-radius: 14px;
        font-size: 1.05rem;
    }
    .account-page .account-sidebar-label {
        margin-bottom: 2px;
        font-size: .64rem;
        letter-spacing: .12em;
    }
    .account-page .account-sidebar-brand strong {
        font-size: 1rem;
        line-height: 1.15;
    }
    .account-page .account-sidebar-brand small {
        font-size: .76rem;
        line-height: 1.2;
    }
    .account-page .account-sidebar-nav {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }
    .account-page .account-sidebar-nav a {
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        min-height: 58px;
        padding: 10px 8px;
        border-radius: 14px;
        text-align: center;
        font-size: .78rem;
        line-height: 1.05;
    }
    .account-page .account-sidebar-nav a span {
        white-space: normal;
    }
    .account-page .account-sidebar-nav a svg {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 560px) {
    .account-page .account-sidebar-v1 {
        padding: 12px;
    }
    .account-page .account-sidebar-brand {
        padding-bottom: 8px;
    }
    .account-page .account-sidebar-nav {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .account-page .account-sidebar-nav a {
        justify-content: center;
        text-align: center;
    }
}

/* Customer account mobile overview compact refinement only */
@media (max-width: 560px) {
    .account-page #accountOverview.account-hero-v1 {
        padding: 0;
        gap: 12px;
    }
    .account-page .account-hero-copy-v1 {
        display: grid;
        gap: 4px;
    }
    .account-page .account-hero-kicker {
        margin-bottom: 2px;
        font-size: .66rem;
        letter-spacing: .12em;
    }
    .account-page .account-hero-v1 .account-page-title {
        font-size: 1.4rem;
        line-height: 1.08;
        max-width: 11ch;
        margin-bottom: 4px;
    }
    .account-page .account-hero-v1 .account-page-subtitle {
        margin: 0;
        font-size: .9rem;
        line-height: 1.35;
        max-width: none;
    }
    .account-page .account-hero-clear-btn {
        width: auto;
        min-width: 0;
        padding: 10px 16px;
        border-radius: 14px;
        font-size: .82rem;
        box-shadow: 0 10px 18px rgba(249,115,22,.18);
    }
    .account-page .account-metric-grid-v1 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .account-page .account-metric-card-v1 {
        min-height: 118px;
        padding: 14px;
        gap: 6px;
        border-radius: 14px;
        box-shadow: 0 12px 24px rgba(15,23,42,.06);
    }
    .account-page .account-metric-card-v1 .account-metric-title {
        font-size: .68rem;
        letter-spacing: .11em;
    }
    .account-page .account-metric-card-v1 strong {
        font-size: 1.5rem;
        line-height: 1;
    }
    .account-page .account-metric-card-v1 small {
        font-size: .82rem;
        line-height: 1.3;
    }
}


/* Customer account mobile bookings compact + back to top - scoped only to mobile account page */
.account-back-to-top-btn{display:none}
@media (max-width: 860px) {
    .account-page .account-booking-board-v1 .account-section-head-v1 {
        margin-bottom: 14px;
        gap: 10px;
    }
    .account-page .account-booking-table-v1 tbody {
        gap: 10px;
    }
    .account-page .account-booking-table-v1 tr {
        border-radius: 14px;
        box-shadow: 0 6px 16px rgba(15,23,42,.05);
    }
    .account-page .account-booking-table-v1 tbody td,
    .account-page .account-booking-table-v1 tbody td:first-child,
    .account-page .account-booking-table-v1 tbody td:last-child {
        padding: 8px 12px;
    }
    .account-page .account-booking-table-v1 tbody td:first-child {
        padding-top: 12px;
    }
    .account-page .account-booking-table-v1 tbody td:last-child {
        padding-bottom: 12px;
    }
    .account-page .account-booking-table-v1 tbody td::before {
        margin-bottom: 3px;
        font-size: .68rem;
        letter-spacing: .07em;
    }
    .account-page .account-booking-table-v1 tbody td strong {
        font-size: .98rem;
        line-height: 1.25;
        color: #142c63;
    }
    .account-page .account-booking-table-v1 tbody td {
        font-size: .76rem;
        line-height: 1.35;
    }
    .account-page .account-table-note-v1 {
        margin-top: 4px;
        font-size: .76rem;
        line-height: 1.35;
    }
    .account-page #accountBookings .status,
    .account-page #accountBookings .status-badge,
    .account-page #accountBookings .badge {
        padding: 5px 10px;
        font-size: .74rem;
    }
    .account-page .account-back-to-top-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        position: fixed;
        right: 14px;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        z-index: 999;
        border: 0;
        border-radius: 999px;
        padding: 11px 14px;
        background: #142c63;
        color: #fff;
        font-size: .82rem;
        font-weight: 800;
        line-height: 1;
        box-shadow: 0 12px 26px rgba(20,44,99,.28);
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    }
    .account-page .account-back-to-top-btn.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}


/* Customer account mobile booking rows compact refinement only */
@media (max-width: 560px) {
    .account-page .account-booking-table-v1 tbody {
        gap: 6px;
    }
    .account-page .account-booking-table-v1 tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 12px;
        padding: 10px 12px;
        border-radius: 14px;
        box-shadow: 0 8px 18px rgba(15,23,42,.05);
    }
    .account-page .account-booking-table-v1 tbody td,
    .account-page .account-booking-table-v1 tbody td:first-child,
    .account-page .account-booking-table-v1 tbody td:last-child {
        width: auto;
        min-width: 0;
        padding: 5px 0;
        border: 0;
        background: transparent;
    }
    .account-page .account-booking-table-v1 tbody td + td {
        border-top: 0;
    }
    .account-page .account-booking-table-v1 tbody td:first-child {
        grid-column: 1 / -1;
        padding-top: 0;
        padding-bottom: 6px;
    }
    .account-page .account-booking-table-v1 tbody td:last-child {
        padding-bottom: 0;
    }
    .account-page .account-booking-table-v1 tbody td::before {
        margin-bottom: 2px;
        font-size: .63rem;
        letter-spacing: .08em;
    }
    .account-page .account-booking-table-v1 tbody td strong {
        font-size: .95rem;
        line-height: 1.2;
    }
    .account-page .account-booking-table-v1 tbody td {
        font-size: .88rem;
        line-height: 1.25;
    }
    .account-page .account-table-note-v1 {
        display: block;
        margin-top: 2px;
        font-size: .73rem;
        line-height: 1.3;
    }
    .account-page #accountBookings .status,
    .account-page #accountBookings .status-badge,
    .account-page #accountBookings .badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        max-width: fit-content;
        padding: 4px 9px;
        font-size: .72rem;
    }
}

/* Targeted garage owner booking/calendar compact layout updates */
.dashboard-topbar-tools {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}
.owner-language-select-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.16);
    color: #fff;
}
.owner-language-select-wrap .owner-language-select {
    min-height: 34px;
    padding: 6px 28px 6px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,0.92);
    color: #0f172a;
    border: 0;
    font-size: .88rem;
    font-weight: 700;
}
.dashboard-panel-compact,
.dashboard-table-compact {
    --compact-cell-y: 8px;
}
.dashboard-table-compact th,
.dashboard-table-compact td {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-size: .76rem;
}
.dashboard-table-compact td .muted {
    font-size: .79rem;
}
.compact-action-btn {
    min-height: 34px !important;
    padding: 7px 12px !important;
    font-size: .86rem !important;
    border-radius: 10px !important;
}
.owner-bookings-table .booking-action-form,
.dashboard-upcoming-table .appointment-action-wrap {
    gap: 6px;
}
.owner-bookings-table .booking-action-form .select,
.owner-bookings-table .booking-action-form .btn {
    min-height: 34px;
}
.owner-bookings-table .booking-action-form .select {
    min-width: 136px;
    padding-top: 6px;
    padding-bottom: 6px;
}
.bookings-filter-form-compact {
    gap: 10px;
    align-items: end;
}
.bookings-date-range {
    display: inline-flex;
    align-items: end;
    gap: 10px;
    flex-wrap: wrap;
}
.compact-date-field {
    display: grid;
    gap: 6px;
    min-width: 148px;
    color: #475569;
    font-size: .8rem;
    font-weight: 700;
}
.compact-date-field .input {
    min-height: 38px;
    padding: 8px 10px;
}
.calendar-grid .calendar-date {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 6px;
    min-height: 118px;
}
.calendar-grid .calendar-date strong {
    font-size: .96rem;
}
.calendar-grid .calendar-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: .82rem;
    padding: 6px 10px;
}
.calendar-day-bookings-centered th,
.calendar-day-bookings-centered td {
    text-align: center;
}
.mini-calendar,
.mini-calendar-header,
.mini-calendar-label,
.mini-calendar-day {
    text-align: center;
}
.mini-calendar-day {
    min-height: 42px;
}
.mini-calendar-number {
    font-size: 1rem;
    font-weight: 800;
}
@media (max-width: 900px) {
    .dashboard-topbar-tools {
        width: 100%;
        justify-content: flex-end;
        margin-left: 0;
    }
    .owner-language-select-wrap {
        flex: 1 1 auto;
        justify-content: center;
    }
    .bookings-filter-form-compact,
    .bookings-date-range {
        width: 100%;
    }
    .compact-date-field {
        flex: 1 1 140px;
    }
}
@media (max-width: 760px) {
    .dashboard-topbar-tools {
        order: 3;
        justify-content: stretch;
    }
    .owner-language-select-wrap {
        width: 100%;
    }
    .owner-language-select-wrap .owner-language-select {
        width: 100%;
    }
    .bookings-date-range {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }
    .dashboard-table-compact th,
    .dashboard-table-compact td {
        font-size: .9rem;
    }
    .calendar-grid .calendar-date {
        min-height: 96px;
        padding: 10px 8px;
    }
}
@media (max-width: 520px) {
    .bookings-date-range {
        grid-template-columns: 1fr;
    }
    .compact-date-field {
        min-width: 100%;
    }
}

/* Manage Bookings filter panel beautification */
.bookings-filter-form-compact {
    position: relative;
    display: grid;
    grid-template-columns: minmax(220px, 1.1fr) minmax(280px, 1fr);
    gap: 14px 16px;
    align-items: end;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(59, 130, 246, 0.16);
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.96), rgba(248, 250, 252, 0.98));
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}
.bookings-filter-form-compact::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.12), transparent 36%),
                radial-gradient(circle at bottom left, rgba(14, 165, 233, 0.12), transparent 34%);
}
.bookings-filter-form-compact > * {
    position: relative;
    z-index: 1;
}
.bookings-filter-form-compact > .select,
.bookings-date-range .input {
    width: 100%;
    min-height: 48px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 16px rgba(148, 163, 184, 0.12);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.bookings-filter-form-compact > .select {
    padding-left: 16px;
    padding-right: 38px;
    font-weight: 700;
    color: #1e3a8a;
}
.bookings-filter-form-compact > .select:focus,
.bookings-date-range .input:focus {
    border-color: rgba(59, 130, 246, 0.45);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12), 0 12px 24px rgba(59, 130, 246, 0.12);
    transform: translateY(-1px);
}
.bookings-date-range {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 12px;
    width: 100%;
}
.compact-date-field {
    gap: 6px;
    min-width: 0;
    padding: 10px 12px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(59, 130, 246, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
.compact-date-field span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #475569;
}
.compact-date-field span::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
}
.compact-date-field .input {
    min-height: 44px;
    padding: 8px 12px;
}
@media (max-width: 900px) {
    .bookings-filter-form-compact {
        grid-template-columns: 1fr;
        width: 100%;
    }
}
@media (max-width: 760px) {
    .bookings-filter-form-compact {
        padding: 14px;
        border-radius: 14px;
    }
    .bookings-date-range {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 520px) {
    .bookings-date-range {
        grid-template-columns: 1fr;
    }
    .compact-date-field {
        padding: 10px;
    }
}


/* Manage Bookings filter stretch + centered action cell */
.card > .inline-actions > .bookings-filter-form-compact {
    flex: 1 1 760px;
    width: 100%;
    max-width: none;
    margin-left: auto;
    grid-template-columns: minmax(260px, 1.35fr) minmax(430px, 1.65fr);
    align-items: center;
}
.owner-bookings-table td[data-label="Action"],
.owner-bookings-table th:last-child {
    vertical-align: middle;
}
.owner-bookings-table td[data-label="Action"] .booking-action-form {
    min-height: 100%;
    align-items: center;
}
.owner-bookings-table td[data-label="Action"] .booking-action-form .select,
.owner-bookings-table td[data-label="Action"] .booking-action-form .btn {
    align-self: center;
}
@media (max-width: 900px) {
    .card > .inline-actions > .bookings-filter-form-compact {
        flex-basis: 100%;
        grid-template-columns: 1fr;
    }
}

.card > .inline-actions > .bookings-filter-form-compact > .select,
.card > .inline-actions > .bookings-filter-form-compact > .bookings-date-range {
    align-self: center;
}


/* Booking search addition for owner + super admin */
.bookings-search-group {
    grid-column: 1 / -1;
    min-width: 0;
}
.compact-search-field {
    gap: 6px;
}
.bookings-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}
.bookings-search-row .input {
    min-width: 0;
    min-height: 44px;
}
.bookings-search-row .btn {
    min-height: 44px;
    padding-inline: 18px;
    white-space: nowrap;
}
.booking-search-toolbar {
    margin-bottom: 14px;
    gap: 10px;
    flex-wrap: wrap;
}
.booking-search-toolbar .input {
    flex: 1 1 240px;
    min-width: 220px;
}
@media (max-width: 640px) {
    .bookings-search-row {
        grid-template-columns: 1fr;
    }
    .bookings-search-row .btn {
        width: 100%;
    }
    .booking-search-toolbar .input,
    .booking-search-toolbar .btn {
        width: 100%;
    }
}

/* Work order inline editor */
.admin-inline-editor > summary{list-style:none;}
.admin-inline-editor > summary::-webkit-details-marker{display:none;}
.admin-inline-editor[open] > summary{margin-bottom:8px;}
.admin-inline-editor form .input-label{display:block;margin:0 0 6px;}


/* v10 targeted mobile/admin refinements requested by user */
.calendar-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}
.calendar-nav-controls {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.calendar-grid .calendar-pill {
    align-self: center;
    gap: 4px;
}
.calendar-pill-count,
.calendar-pill-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.service-catalog-table td[data-label="Duration"] .color-pill,
.service-catalog-table td[data-label="Display Style"] .color-pill,
.service-catalog-table td[data-label="Status"] .status-badge,
.payment-history-table td[data-label="Method"] .color-pill,
.payment-history-table td[data-label="Amount"] .color-pill {
    justify-self: start;
}

@media (max-width: 760px) {
    .admin-panel-page .owner-bookings-table tbody,
    .admin-panel-page .service-catalog-table tbody,
    .admin-panel-page .payment-history-table tbody,
    .admin-panel-page .hours-table tbody {
        gap: 10px;
    }

    .admin-panel-page .owner-bookings-table tr,
    .admin-panel-page .service-catalog-table tr,
    .admin-panel-page .payment-history-table tr,
    .admin-panel-page .hours-table tr {
        padding: 12px 12px 10px;
        border-radius: 14px;
    }

    .admin-panel-page .owner-bookings-table td,
    .admin-panel-page .service-catalog-table td,
    .admin-panel-page .payment-history-table td,
    .admin-panel-page .hours-table td {
        padding: 6px 0;
    }

    .admin-panel-page .owner-bookings-table td::before,
    .admin-panel-page .service-catalog-table td::before,
    .admin-panel-page .payment-history-table td::before,
    .admin-panel-page .hours-table td::before {
        margin-bottom: 5px;
        font-size: 0.76rem;
    }

    .admin-panel-page .owner-bookings-table td[data-label="Booking"] strong {
        font-size: 0.95rem;
        line-height: 1.2;
    }

    .admin-panel-page .owner-bookings-table td[data-label="Booking"],
    .admin-panel-page .owner-bookings-table td[data-label="Customer"],
    .admin-panel-page .owner-bookings-table td[data-label="Vehicle"],
    .admin-panel-page .owner-bookings-table td[data-label="Schedule"],
    .admin-panel-page .service-catalog-table td .entity-main,
    .admin-panel-page .service-catalog-table td .entity-stack,
    .admin-panel-page .payment-history-table td .entity-main,
    .admin-panel-page .payment-history-table td .entity-stack {
        gap: 5px;
    }

    .admin-panel-page .owner-bookings-table .booking-action-form {
        gap: 6px;
    }

    .admin-panel-page .owner-bookings-table .booking-action-form .select,
    .admin-panel-page .owner-bookings-table .booking-action-form .btn {
        min-height: 38px;
    }

    .calendar-toolbar {
        gap: 10px;
        margin-bottom: 10px;
    }

    .calendar-toolbar > div:first-child p {
        margin-bottom: 0;
    }

    .calendar-nav-controls {
        width: 100%;
        justify-content: space-between;
        gap: 6px;
    }

    .calendar-nav-controls .calendar-month-title {
        flex: 1 1 auto;
        margin: 0;
        padding: 0;
        text-align: center;
        font-size: 0.95rem;
    }

    .admin-panel-page .booking-calendar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px;
        align-items: stretch;
    }

    .admin-panel-page .booking-calendar-grid .calendar-cell {
        min-height: 84px;
        padding: 10px 8px;
    }

    .admin-panel-page .booking-calendar-grid .calendar-date {
        min-height: 84px;
        gap: 6px;
    }

    .admin-panel-page .booking-calendar-grid .calendar-pill {
        width: 100%;
        max-width: 100%;
        padding: 6px 8px;
        font-size: 0.76rem;
    }

    .admin-panel-page .service-catalog-table td[data-label="Actions"] .action-cluster {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
        width: 100%;
    }

    .admin-panel-page .service-catalog-table td[data-label="Duration"],
    .admin-panel-page .service-catalog-table td[data-label="Display Style"],
    .admin-panel-page .service-catalog-table td[data-label="Status"],
    .admin-panel-page .payment-history-table td[data-label="Method"],
    .admin-panel-page .payment-history-table td[data-label="Amount"] {
        display: grid;
        justify-items: start;
    }

    .admin-panel-page .service-catalog-table .color-pill,
    .admin-panel-page .service-catalog-table .status-badge,
    .admin-panel-page .payment-history-table .color-pill {
        min-height: 34px;
    }

    .admin-panel-page .settings-card .hours-table td {
        display: grid;
        gap: 6px;
        align-items: start;
    }

    .admin-panel-page .settings-card .hours-table td[data-label="Open"] {
        justify-items: start;
    }

    .admin-panel-page .settings-card .hours-table td input[type="checkbox"] {
        width: 18px;
        height: 18px;
        margin-top: 4px;
    }

    .admin-panel-page .settings-card .hours-table td .input {
        min-height: 40px;
        padding: 8px 10px;
    }

    .admin-panel-page .settings-card .table-wrap {
        overflow: visible;
    }

    .admin-panel-page .super-bookings-panel .compact-list {
        padding: 6px 0 0;
        gap: 10px;
    }

    .admin-panel-page .super-bookings-panel .compact-item {
        padding: 12px 14px;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        background: linear-gradient(180deg, #fff, #f8fafc);
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
    }

    .admin-panel-page .super-bookings-panel .compact-item:last-child {
        border-bottom: 1px solid #e2e8f0;
    }
}

@media (max-width: 520px) {
    .admin-panel-page .booking-calendar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .calendar-nav-controls .btn {
        min-width: 0;
        padding-inline: 10px;
    }

    .calendar-nav-controls .calendar-month-title {
        font-size: 0.9rem;
    }

    .admin-panel-page .settings-card .hours-table tr {
        padding: 10px 12px;
    }
}

/* Mobile-only: bookings info split clearly between left and right sides */
@media (max-width: 760px) {
    .admin-panel-page .owner-bookings-table tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 16px;
        row-gap: 8px;
        align-items: start;
    }

    .admin-panel-page .owner-bookings-table td {
        display: grid;
        width: auto;
        min-width: 0;
        align-content: start;
        padding: 4px 0;
    }

    .admin-panel-page .owner-bookings-table td[data-label="Booking"],
    .admin-panel-page .owner-bookings-table td[data-label="Vehicle"] {
        grid-column: 1;
        justify-items: start;
        text-align: left;
    }

    .admin-panel-page .owner-bookings-table td[data-label="Customer"],
    .admin-panel-page .owner-bookings-table td[data-label="Schedule"] {
        grid-column: 2;
        justify-items: end;
        text-align: right;
    }

    .admin-panel-page .owner-bookings-table td[data-label="Customer"]::before,
    .admin-panel-page .owner-bookings-table td[data-label="Schedule"]::before {
        text-align: right;
        width: 100%;
    }

    .admin-panel-page .owner-bookings-table td[data-label="Status"],
    .admin-panel-page .owner-bookings-table td[data-label="Action"] {
        grid-column: 1 / -1;
    }

    .admin-panel-page .owner-bookings-table td[data-label="Status"] {
        text-align: left;
        justify-items: stretch;
    }

    .admin-panel-page .owner-bookings-table td[data-label="Action"] {
        text-align: center;
        justify-items: center;
    }

    .admin-panel-page .owner-bookings-table td[data-label="Action"]::before {
        width: 100%;
        text-align: center;
    }

    .admin-panel-page .owner-bookings-table td[data-label="Action"] .booking-action-form,
    .admin-panel-page .dashboard-upcoming-table td[data-label="Actions"] .appointment-action-wrap {
        width: auto;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
    }

    .admin-panel-page .owner-bookings-table td[data-label="Action"] .booking-action-form > *,
    .admin-panel-page .dashboard-upcoming-table td[data-label="Actions"] .appointment-action-wrap > * {
        width: auto;
        max-width: 100%;
    }

    .admin-panel-page .owner-bookings-table td[data-label="Status"] {
        text-align: center;
        justify-items: center;
    }

    .admin-panel-page .owner-bookings-table td[data-label="Status"]::before {
        width: 100%;
        text-align: center;
    }

    .admin-panel-page .owner-bookings-table td[data-label="Status"] .status,
    .admin-panel-page .owner-bookings-table td[data-label="Status"] .status-badge,
    .admin-panel-page .owner-bookings-table td[data-label="Action"] .booking-action-form .select {
        text-align: center;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }

    .admin-panel-page .owner-bookings-table td[data-label="Action"] .booking-action-form .select {
        text-align-last: center;
    }

    .admin-panel-page .super-bookings-panel .compact-item {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 12px;
        row-gap: 6px;
        align-items: start;
    }

    .admin-panel-page .super-bookings-panel .compact-item strong,
    .admin-panel-page .super-bookings-panel .compact-item span,
    .admin-panel-page .super-bookings-panel .compact-item small {
        min-width: 0;
    }

    .admin-panel-page .super-bookings-panel .compact-item strong {
        grid-column: 1;
        text-align: left;
    }

    .admin-panel-page .super-bookings-panel .compact-item span {
        grid-column: 2;
        justify-self: end;
        text-align: right;
    }

    .admin-panel-page .super-bookings-panel .compact-item small {
        grid-column: 1 / -1;
        text-align: left;
    }
}

/* Mobile-only: 2-column layouts for overview/services/work orders/invoices/payments/inventory/whatsapp/settings */
@media (max-width: 760px) {
    .admin-panel-page .overview-directory-table thead {
        display: none;
    }

    .admin-panel-page .overview-directory-table,
    .admin-panel-page .overview-directory-table tbody,
    .admin-panel-page .overview-directory-table tr,
    .admin-panel-page .overview-directory-table td {
        display: block;
        width: 100%;
    }

    .admin-panel-page .overview-directory-table tbody,
    .admin-panel-page .dashboard-upcoming-table tbody,
    .admin-panel-page .service-catalog-table tbody,
    .admin-panel-page .work-orders-table tbody,
    .admin-panel-page .invoice-list-table tbody,
    .admin-panel-page .payment-history-table tbody,
    .admin-panel-page .inventory-list-table tbody,
    .admin-panel-page .whatsapp-log-table tbody,
    .admin-panel-page .hours-table tbody {
        display: grid;
        gap: 10px;
    }

    .admin-panel-page .overview-directory-table tr,
    .admin-panel-page .dashboard-upcoming-table tr,
    .admin-panel-page .service-catalog-table tr,
    .admin-panel-page .work-orders-table tr,
    .admin-panel-page .invoice-list-table tr,
    .admin-panel-page .payment-history-table tr,
    .admin-panel-page .inventory-list-table tr,
    .admin-panel-page .whatsapp-log-table tr,
    .admin-panel-page .hours-table tr {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 14px;
        align-items: start;
    }

    .admin-panel-page .work-orders-table tr {
        grid-template-columns: 1fr;
    }

    .admin-panel-page .overview-directory-table td,
    .admin-panel-page .dashboard-upcoming-table td,
    .admin-panel-page .service-catalog-table td,
    .admin-panel-page .work-orders-table td,
    .admin-panel-page .invoice-list-table td,
    .admin-panel-page .payment-history-table td,
    .admin-panel-page .inventory-list-table td,
    .admin-panel-page .whatsapp-log-table td,
    .admin-panel-page .hours-table td {
        width: auto !important;
        min-width: 0;
        border: 0;
        padding: 6px 0;
    }

    .admin-panel-page .overview-directory-table td:nth-child(4),
    .admin-panel-page .dashboard-upcoming-table td:nth-child(5) {
        text-align: center;
    }

    .admin-panel-page .overview-directory-table td:nth-child(4) .status,
    .admin-panel-page .overview-directory-table td:nth-child(4) .status-badge,
    .admin-panel-page .dashboard-upcoming-table td:nth-child(5) .status,
    .admin-panel-page .dashboard-upcoming-table td:nth-child(5) .status-badge {
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
        text-align: center;
    }

    .admin-panel-page .service-catalog-table td:nth-child(6),
    .admin-panel-page .work-orders-table td:nth-child(7),
    .admin-panel-page .invoice-list-table td:nth-child(5) {
        text-align: center;
    }

    .admin-panel-page .service-catalog-table td:nth-child(6) .action-cluster,
    .admin-panel-page .invoice-list-table td:nth-child(5) .action-cluster {
        width: min(100%, 220px);
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
        align-items: center;
    }

    .admin-panel-page .work-orders-table td:nth-child(7) .admin-inline-editor,
    .admin-panel-page .work-orders-table td:nth-child(7) .admin-inline-editor > summary {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .admin-panel-page .work-orders-table td:nth-child(7) details[open] {
        grid-column: 1 / -1;
    }

    .admin-panel-page .hours-table td:nth-child(2) {
        justify-self: start;
    }
}

/* Mobile-only: targeted left/right alignment refinements for overview/services/work orders/payments/inventory/whatsapp/settings */
@media (max-width: 760px) {
    .admin-panel-page .dashboard-upcoming-table td:nth-child(2),
    .admin-panel-page .dashboard-upcoming-table td:nth-child(4),
    .admin-panel-page .overview-directory-table td:nth-child(2),
    .admin-panel-page .service-catalog-table td:nth-child(2),
    .admin-panel-page .service-catalog-table td:nth-child(4),
    .admin-panel-page .payment-history-table td:nth-child(2),
    .admin-panel-page .payment-history-table td:nth-child(4),
    .admin-panel-page .inventory-list-table td:nth-child(2),
    .admin-panel-page .inventory-list-table td:nth-child(4),
    .admin-panel-page .inventory-list-table td:nth-child(6),
    .admin-panel-page .whatsapp-log-table td:nth-child(2),
    .admin-panel-page .whatsapp-log-table td:nth-child(4),
    .admin-panel-page .whatsapp-log-table td:nth-child(6),
    .admin-panel-page .settings-card .hours-table td:nth-child(2),
    .admin-panel-page .settings-card .hours-table td:nth-child(4) {
        text-align: right;
        justify-items: end;
    }

    .admin-panel-page .dashboard-upcoming-table td:nth-child(2)::before,
    .admin-panel-page .dashboard-upcoming-table td:nth-child(4)::before,
    .admin-panel-page .overview-directory-table td:nth-child(2)::before,
    .admin-panel-page .service-catalog-table td:nth-child(2)::before,
    .admin-panel-page .service-catalog-table td:nth-child(4)::before,
    .admin-panel-page .payment-history-table td:nth-child(2)::before,
    .admin-panel-page .payment-history-table td:nth-child(4)::before,
    .admin-panel-page .inventory-list-table td:nth-child(2)::before,
    .admin-panel-page .inventory-list-table td:nth-child(4)::before,
    .admin-panel-page .inventory-list-table td:nth-child(6)::before,
    .admin-panel-page .whatsapp-log-table td:nth-child(2)::before,
    .admin-panel-page .whatsapp-log-table td:nth-child(4)::before,
    .admin-panel-page .whatsapp-log-table td:nth-child(6)::before,
    .admin-panel-page .settings-card .hours-table td:nth-child(2)::before,
    .admin-panel-page .settings-card .hours-table td:nth-child(4)::before {
        width: 100%;
        text-align: right;
    }

    .admin-panel-page .dashboard-upcoming-table td:nth-child(2) .entity-main,
    .admin-panel-page .dashboard-upcoming-table td:nth-child(4) .entity-main,
    .admin-panel-page .overview-directory-table td:nth-child(2) .entity-main,
    .admin-panel-page .overview-directory-table td:nth-child(2) .entity-stack,
    .admin-panel-page .service-catalog-table td:nth-child(2) .entity-main,
    .admin-panel-page .service-catalog-table td:nth-child(2) .entity-stack,
    .admin-panel-page .service-catalog-table td:nth-child(4) .entity-main,
    .admin-panel-page .service-catalog-table td:nth-child(4) .entity-stack,
    .admin-panel-page .payment-history-table td:nth-child(2) .entity-main,
    .admin-panel-page .payment-history-table td:nth-child(4) .entity-main,
    .admin-panel-page .inventory-list-table td:nth-child(2) .entity-main,
    .admin-panel-page .inventory-list-table td:nth-child(2) .entity-stack,
    .admin-panel-page .inventory-list-table td:nth-child(4) .entity-main,
    .admin-panel-page .inventory-list-table td:nth-child(4) .entity-stack,
    .admin-panel-page .whatsapp-log-table td:nth-child(2) .entity-main,
    .admin-panel-page .whatsapp-log-table td:nth-child(2) .entity-stack,
    .admin-panel-page .whatsapp-log-table td:nth-child(4) .entity-main,
    .admin-panel-page .whatsapp-log-table td:nth-child(4) .entity-stack {
        align-items: flex-end;
        text-align: right;
    }

    .admin-panel-page .service-catalog-table td:nth-child(4) .color-pill,
    .admin-panel-page .payment-history-table td:nth-child(4) .color-pill,
    .admin-panel-page .inventory-list-table td:nth-child(6) .status-badge,
    .admin-panel-page .whatsapp-log-table td:nth-child(6) .status-badge,
    .admin-panel-page .whatsapp-log-table td:nth-child(6) .color-pill,
    .admin-panel-page .settings-card .hours-table td:nth-child(2) input[type="checkbox"],
    .admin-panel-page .settings-card .hours-table td:nth-child(4) .input {
        justify-self: end;
    }

    .admin-panel-page .service-catalog-table td:nth-child(6),
    .admin-panel-page .service-catalog-table td:nth-child(6)::before {
        text-align: center;
        justify-items: center;
    }

    .admin-panel-page .service-catalog-table td:nth-child(6) .action-cluster {
        width: min(100%, 220px);
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
        align-items: center;
    }

    .admin-panel-page .work-orders-table tbody {
        gap: 12px;
    }

    .admin-panel-page .work-orders-table tr {
        grid-template-columns: 1fr !important;
        gap: 6px;
        padding: 14px 14px 12px;
        border: 1px solid #dbe5f4;
        border-radius: 14px;
        background: linear-gradient(180deg, #ffffff, #f8fbff);
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
        justify-items: center;
        text-align: center;
    }

    .admin-panel-page .work-orders-table td {
        text-align: center;
        justify-items: center;
        width: 100% !important;
    }

    .admin-panel-page .work-orders-table td::before,
    .admin-panel-page .work-orders-table td .entity-main,
    .admin-panel-page .work-orders-table td .entity-stack,
    .admin-panel-page .work-orders-table td .muted,
    .admin-panel-page .work-orders-table td .status-badge,
    .admin-panel-page .work-orders-table td .color-pill,
    .admin-panel-page .work-orders-table td .admin-inline-editor,
    .admin-panel-page .work-orders-table td .admin-inline-editor > summary {
        text-align: center;
        justify-content: center;
        justify-self: center;
        align-items: center;
    }

    .admin-panel-page .work-orders-table td::before {
        width: 100%;
        text-align: center;
    }
}

/* Mobile-only: overview status/actions pill layout for garage + super admin */
@media (max-width: 760px) {
    .admin-panel-page .overview-directory-table td:nth-child(3) {
        grid-column: 1 / -1;
    }

    .admin-panel-page .dashboard-upcoming-table td[data-label="Status"],
    .admin-panel-page .overview-directory-table td:nth-child(4) {
        grid-column: 1;
        text-align: left;
        justify-items: start;
    }

    .admin-panel-page .dashboard-upcoming-table td[data-label="Status"]::before,
    .admin-panel-page .overview-directory-table td:nth-child(4)::before {
        width: 100%;
        text-align: left;
    }

    .admin-panel-page .dashboard-upcoming-table td[data-label="Status"] .status,
    .admin-panel-page .dashboard-upcoming-table td[data-label="Status"] .status-badge,
    .admin-panel-page .overview-directory-table td:nth-child(4) .status,
    .admin-panel-page .overview-directory-table td:nth-child(4) .status-badge {
        margin-left: 0;
        margin-right: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 120px;
        max-width: 100%;
        text-align: center;
        white-space: nowrap;
    }

    .admin-panel-page .dashboard-upcoming-table td[data-label="Actions"],
    .admin-panel-page .overview-directory-table td:nth-child(5) {
        grid-column: 2;
        text-align: right;
        justify-items: end;
    }

    .admin-panel-page .dashboard-upcoming-table td[data-label="Actions"]::before,
    .admin-panel-page .overview-directory-table td:nth-child(5)::before {
        width: 100%;
        text-align: right;
    }

    .admin-panel-page .dashboard-upcoming-table td[data-label="Actions"] .appointment-action-wrap,
    .admin-panel-page .overview-directory-table td:nth-child(5) .inline-actions {
        width: auto;
        max-width: 100%;
        margin-left: auto;
        margin-right: 0;
        justify-content: flex-end;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
    }

    .admin-panel-page .dashboard-upcoming-table td[data-label="Actions"] .compact-action-btn,
    .admin-panel-page .overview-directory-table td:nth-child(5) .btn {
        display: inline-flex !important;
        min-height: 0 !important;
        width: 120px;
        max-width: 100%;
        padding: 8px 13px !important;
        border: 0 !important;
        border-radius: 999px !important;
        color: #ffffff !important;
        background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
        box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18) !important;
        justify-content: center;
        align-items: center;
        line-height: 1.1 !important;
        text-align: center;
        white-space: nowrap;
        font-size: 0.82rem !important;
        font-weight: 800 !important;
    }

    .admin-panel-page .overview-directory-table td:nth-child(5) .btn:nth-child(2) {
        background: linear-gradient(135deg, #14b8a6, #0f766e);
        box-shadow: 0 8px 18px rgba(15, 118, 110, 0.18);
    }
}



/* Mobile-only: bookings status/actions layout aligned like overview for garage admin */
@media (max-width: 760px) {
    .admin-panel-page .owner-bookings-table td[data-label="Status"] {
        grid-column: 1;
        text-align: left;
        justify-items: start;
    }

    .admin-panel-page .owner-bookings-table td[data-label="Status"]::before {
        width: 100%;
        text-align: left;
    }

    .admin-panel-page .owner-bookings-table td[data-label="Status"] .status,
    .admin-panel-page .owner-bookings-table td[data-label="Status"] .status-badge {
        margin-left: 0;
        margin-right: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 120px;
        max-width: 100%;
        text-align: center;
        white-space: nowrap;
    }

    .admin-panel-page .owner-bookings-table td[data-label="Action"] {
        grid-column: 2;
        text-align: right;
        justify-items: end;
    }

    .admin-panel-page .owner-bookings-table td[data-label="Action"]::before {
        width: 100%;
        text-align: right;
    }

    .admin-panel-page .owner-bookings-table td[data-label="Action"] .booking-action-form {
        width: auto;
        max-width: 100%;
        margin-left: auto;
        margin-right: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-end;
        gap: 6px;
    }

    .admin-panel-page .owner-bookings-table td[data-label="Action"] .booking-action-form > * {
        width: 120px;
        max-width: 100%;
        flex: 0 0 auto;
    }

    .admin-panel-page .owner-bookings-table td[data-label="Action"] .booking-action-form .select {
        min-height: 0 !important;
        width: 120px;
        max-width: 100%;
        padding: 6px 12px !important;
        border: 0 !important;
        border-radius: 999px !important;
        text-align: center;
        text-align-last: center;
        color: #ffffff !important;
        background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
        box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18) !important;
        line-height: 1.1 !important;
        font-size: 0.82rem !important;
        font-weight: 800 !important;
        -webkit-appearance: none;
        appearance: none;
        background-repeat: no-repeat !important;
        background-position: right 12px center !important;
        background-size: auto !important;
    }

    .admin-panel-page .owner-bookings-table td[data-label="Action"] .booking-action-form .select[data-mobile-booking-status="confirmed"] {
        background: linear-gradient(135deg, #38b24a, #2e9a3e) !important;
        box-shadow: 0 8px 18px rgba(56, 178, 74, 0.18) !important;
    }

    .admin-panel-page .owner-bookings-table td[data-label="Action"] .booking-action-form .select[data-mobile-booking-status="pending"] {
        background: linear-gradient(135deg, #f0a33a, #d98c23) !important;
        box-shadow: 0 8px 18px rgba(240, 163, 58, 0.18) !important;
    }

    .admin-panel-page .owner-bookings-table td[data-label="Action"] .booking-action-form .select[data-mobile-booking-status="in_progress"] {
        background: linear-gradient(135deg, #2d8ad3, #1f73b5) !important;
        box-shadow: 0 8px 18px rgba(45, 138, 211, 0.18) !important;
    }

    .admin-panel-page .owner-bookings-table td[data-label="Action"] .booking-action-form .select[data-mobile-booking-status="completed"] {
        background: linear-gradient(135deg, #38b24a, #2e9a3e) !important;
        box-shadow: 0 8px 18px rgba(56, 178, 74, 0.18) !important;
    }

    .admin-panel-page .owner-bookings-table td[data-label="Action"] .booking-action-form .select[data-mobile-booking-status="cancelled"] {
        background: linear-gradient(135deg, #d9534f, #c63f3b) !important;
        box-shadow: 0 8px 18px rgba(217, 83, 79, 0.18) !important;
    }

    .admin-panel-page .owner-bookings-table td[data-label="Action"] .booking-action-form .compact-action-btn {
        display: inline-flex !important;
        min-height: 0 !important;
        width: 120px;
        max-width: 100%;
        padding: 8px 13px !important;
        border: 0 !important;
        border-radius: 999px !important;
        color: #ffffff !important;
        background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
        box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18) !important;
        justify-content: center;
        align-items: center;
        line-height: 1.1 !important;
        text-align: center;
        white-space: nowrap;
        font-size: 0.82rem !important;
        font-weight: 800 !important;
    }
}


/* Mobile-only: service catalog rebalanced to match the approved reference layout */
@media (max-width: 760px) {
    .admin-panel-page .service-catalog-table td:nth-child(4),
    .admin-panel-page .service-catalog-table td:nth-child(6) {
        text-align: right;
        justify-items: end;
    }

    .admin-panel-page .service-catalog-table td:nth-child(4)::before,
    .admin-panel-page .service-catalog-table td:nth-child(6)::before {
        width: 100%;
        text-align: right;
    }

    .admin-panel-page .service-catalog-table td:nth-child(5) {
        grid-column: 1;
        text-align: left;
        justify-items: start;
    }

    .admin-panel-page .service-catalog-table td:nth-child(5)::before {
        width: 100%;
        text-align: left;
    }

    .admin-panel-page .service-catalog-table td:nth-child(3) .color-pill,
    .admin-panel-page .service-catalog-table td:nth-child(4) .color-pill,
    .admin-panel-page .service-catalog-table td:nth-child(5) .status-badge,
    .admin-panel-page .service-catalog-table td:nth-child(6) .btn.btn-info {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 120px;
        max-width: 100%;
        min-height: 0 !important;
        padding: 6px 12px !important;
        border-radius: 999px !important;
        line-height: 1.1 !important;
        text-align: center;
        white-space: nowrap;
    }

    .admin-panel-page .service-catalog-table td:nth-child(5) .status-badge {
        margin-left: 0;
        margin-right: 0;
    }

    .admin-panel-page .service-catalog-table td:nth-child(6) .action-cluster {
        width: auto;
        max-width: 100%;
        margin-left: auto;
        margin-right: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-end;
        gap: 0;
    }

    .admin-panel-page .service-catalog-table td:nth-child(6) .action-cluster form {
        display: none !important;
    }

    .admin-panel-page .service-catalog-table td:nth-child(6) .btn {
        display: inline-flex !important;
        min-height: 0 !important;
        width: 120px;
        max-width: 100%;
        padding: 6px 12px !important;
        border: 0 !important;
        border-radius: 999px !important;
        justify-content: center;
        align-items: center;
        line-height: 1.1 !important;
        text-align: center;
        white-space: nowrap;
        font-size: 0.82rem !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18) !important;
    }

    .admin-panel-page .service-catalog-table td:nth-child(6) .btn.btn-info {
        background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    }
}

/* Mobile-only: compact single-column work orders cards for garage + super admin */
@media (max-width: 760px) {
    .admin-panel-page .work-orders-table tbody {
        gap: 6px;
    }

    .admin-panel-page .work-orders-table tr {
        gap: 6px;
        padding: 10px 12px;
        border-radius: 14px;
    }

    .admin-panel-page .work-orders-table td {
        padding: 3px 0;
    }

    .admin-panel-page .work-orders-table td::before {
        margin-bottom: 2px;
    }

    .admin-panel-page .work-orders-table td .entity-main,
    .admin-panel-page .work-orders-table td .entity-stack {
        gap: 3px;
    }

    .admin-panel-page .work-orders-table td .entity-name,
    .admin-panel-page .work-orders-table td .entity-meta,
    .admin-panel-page .work-orders-table td .entity-sub,
    .admin-panel-page .work-orders-table td .muted {
        line-height: 1.25;
    }

    .admin-panel-page .work-orders-table td .status-badge,
    .admin-panel-page .work-orders-table td .color-pill,
    .admin-panel-page .work-orders-table td .admin-inline-editor > summary {
        margin-top: 2px;
        margin-bottom: 2px;
    }

    .admin-panel-page .work-orders-table td:nth-child(7) details[open] {
        margin-top: 2px;
    }
}

/* Mobile-only: invoices aligned like overview for garage + super admin */
@media (max-width: 760px) {
    .admin-panel-page .invoice-list-table td:nth-child(3) {
        grid-column: 1 / -1;
    }

    .admin-panel-page .invoice-list-table td:nth-child(4) {
        grid-column: 1;
        text-align: left;
        justify-items: start;
        align-self: start;
    }

    .admin-panel-page .invoice-list-table td:nth-child(4)::before {
        width: 100%;
        text-align: left;
    }

    .admin-panel-page .invoice-list-table td:nth-child(4) .status,
    .admin-panel-page .invoice-list-table td:nth-child(4) .status-badge {
        margin-left: 0;
        margin-right: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 120px;
        min-height: 38px;
        max-width: 100%;
        text-align: center;
        white-space: nowrap;
        padding: 8px 13px;
        line-height: 1.1;
    }

    .admin-panel-page .invoice-list-table td:nth-child(5) {
        grid-column: 2;
        text-align: right;
        justify-items: end;
        align-self: start;
    }

    .admin-panel-page .invoice-list-table td:nth-child(5)::before {
        width: 100%;
        text-align: right;
        margin-bottom: 5px;
    }

    .admin-panel-page .invoice-list-table td:nth-child(5) .action-cluster {
        width: min(230px, 100%);
        max-width: 100%;
        margin-left: auto;
        margin-right: 0;
        display: grid;
        grid-template-columns: minmax(86px, 1fr) minmax(78px, 94px);
        gap: 6px;
        align-items: center;
        justify-items: stretch;
    }

    .admin-panel-page .invoice-list-table td:nth-child(5) .action-cluster .input,
    .admin-panel-page .invoice-list-table td:nth-child(5) .action-cluster .select {
        min-height: 38px !important;
        margin: 0 !important;
        border-radius: 999px !important;
        line-height: 1.1 !important;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        box-sizing: border-box;
    }

    .admin-panel-page .invoice-list-table td:nth-child(5) .action-cluster .input {
        grid-column: 1;
        width: 100% !important;
        min-width: 0;
        padding: 8px 13px !important;
        text-align: center;
    }

    .admin-panel-page .invoice-list-table td:nth-child(5) .action-cluster .select {
        grid-column: 2;
        width: 100% !important;
        min-width: 0;
        padding: 8px 28px 8px 12px !important;
        text-align: center;
        text-align-last: center;
    }

    .admin-panel-page .invoice-list-table td:nth-child(5) .action-cluster .btn {
        grid-column: 1 / -1;
        width: 170px !important;
        max-width: 100% !important;
        min-height: 38px !important;
        margin: 2px auto 0 !important;
        padding: 8px 16px !important;
        border: 0 !important;
        border-radius: 999px !important;
        color: #ffffff !important;
        background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
        box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18) !important;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        line-height: 1.1 !important;
        text-align: center;
        white-space: nowrap;
        font-size: 0.82rem !important;
        font-weight: 800 !important;
    }
}


/* Mobile-only: final invoice quick-payment rebalance for garage + super admin */
@media (max-width: 760px) {
    .admin-panel-page .invoice-list-table td:nth-child(4) .status-badge,
    .admin-panel-page .invoice-list-table td:nth-child(4) .status {
        width: 112px !important;
        min-height: 36px !important;
        padding: 7px 12px !important;
        font-size: 0.8rem !important;
    }

    .admin-panel-page .invoice-list-table td:nth-child(5) {
        align-self: center !important;
    }

    .admin-panel-page .invoice-list-table td:nth-child(5)::before {
        margin-bottom: 6px !important;
    }

    .admin-panel-page .invoice-list-table td:nth-child(5) .action-cluster {
        width: 210px !important;
        max-width: 100% !important;
        grid-template-columns: minmax(112px, 1fr) 82px !important;
        gap: 6px !important;
        align-items: center !important;
    }

    .admin-panel-page .invoice-list-table td:nth-child(5) .action-cluster .input,
    .admin-panel-page .invoice-list-table td:nth-child(5) .action-cluster .select {
        min-height: 36px !important;
        height: 36px !important;
        font-size: 0.78rem !important;
        font-weight: 700 !important;
    }

    .admin-panel-page .invoice-list-table td:nth-child(5) .action-cluster .input {
        padding: 7px 10px !important;
    }

    .admin-panel-page .invoice-list-table td:nth-child(5) .action-cluster .select {
        padding: 7px 22px 7px 8px !important;
        font-size: 0.76rem !important;
        background-position: right 8px center !important;
    }

    .admin-panel-page .invoice-list-table td:nth-child(5) .action-cluster .btn {
        width: 154px !important;
        min-height: 36px !important;
        padding: 7px 14px !important;
        margin-top: 4px !important;
        font-size: 0.8rem !important;
        box-shadow: 0 6px 14px rgba(37, 99, 235, 0.16) !important;
    }
}

/* Mobile-only: invoice quick-payment final balance pass for garage + super admin */
@media (max-width: 760px) {
    .admin-panel-page .invoice-list-table td:nth-child(4) .status-badge,
    .admin-panel-page .invoice-list-table td:nth-child(4) .status {
        width: 118px !important;
        min-height: 40px !important;
        height: 40px !important;
        padding: 8px 12px !important;
        font-size: 0.82rem !important;
    }

    .admin-panel-page .invoice-list-table td:nth-child(5) {
        text-align: center !important;
        justify-items: center !important;
        align-self: start !important;
    }

    .admin-panel-page .invoice-list-table td:nth-child(5)::before {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 8px !important;
    }

    .admin-panel-page .invoice-list-table td:nth-child(5) .action-cluster {
        width: min(204px, 100%) !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        grid-template-columns: minmax(108px, 1fr) 94px !important;
        gap: 8px !important;
        justify-items: stretch !important;
        align-items: center !important;
    }

    .admin-panel-page .invoice-list-table td:nth-child(5) .action-cluster .input,
    .admin-panel-page .invoice-list-table td:nth-child(5) .action-cluster .select {
        min-height: 40px !important;
        height: 40px !important;
        border-radius: 999px !important;
        font-size: 0.8rem !important;
        font-weight: 700 !important;
    }

    .admin-panel-page .invoice-list-table td:nth-child(5) .action-cluster .input {
        padding: 8px 12px !important;
        text-align: center !important;
    }

    .admin-panel-page .invoice-list-table td:nth-child(5) .action-cluster .select {
        padding: 8px 24px 8px 10px !important;
        text-align: center !important;
        text-align-last: center !important;
        background-position: right 10px center !important;
    }

    .admin-panel-page .invoice-list-table td:nth-child(5) .action-cluster .btn {
        width: 160px !important;
        max-width: 100% !important;
        min-height: 38px !important;
        margin: 8px auto 0 !important;
        padding: 8px 14px !important;
        font-size: 0.82rem !important;
        box-shadow: 0 6px 14px rgba(37, 99, 235, 0.14) !important;
    }
}

/* Invoice quick-payment mockup implementation: mobile-only for garage + super admin */
.invoice-quickpay-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.invoice-quickpay-combo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
    min-width: 0;
    border: 1px solid #d8e2ef;
    border-radius: 999px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
}

.invoice-quickpay-amount,
.invoice-quickpay-method {
    margin: 0 !important;
    min-height: 42px;
    height: 42px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0.84rem;
    font-weight: 700;
}

.invoice-quickpay-amount {
    width: 100%;
    min-width: 0;
    padding: 0 14px !important;
    text-align: center;
}

.invoice-quickpay-method {
    width: 112px;
    min-width: 112px;
    padding: 0 30px 0 14px !important;
    border-left: 1px solid #e2e8f0 !important;
    text-align: left;
    text-align-last: left;
    background-position: right 12px center !important;
    text-transform: capitalize;
}

.invoice-quickpay-submit {
    align-self: center;
    min-height: 40px;
    padding: 8px 18px !important;
    border-radius: 999px !important;
    font-size: 0.84rem !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18) !important;
}

@media (max-width: 760px) {
    .admin-panel-page .invoice-list-table tr {
        grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr) !important;
        gap: 10px 14px !important;
    }

    .admin-panel-page .invoice-list-table td:nth-child(3) {
        grid-column: 1 / -1 !important;
    }

    .admin-panel-page .invoice-list-table td:nth-child(4),
    .admin-panel-page .invoice-list-table td:nth-child(5) {
        align-self: start !important;
        padding-top: 4px !important;
        min-width: 0 !important;
    }

    .admin-panel-page .invoice-list-table td:nth-child(4) {
        text-align: left !important;
        justify-items: stretch !important;
    }

    .admin-panel-page .invoice-list-table td:nth-child(4)::before,
    .admin-panel-page .invoice-list-table td:nth-child(5)::before {
        width: 100% !important;
        margin-bottom: 8px !important;
        text-align: left !important;
    }

    .admin-panel-page .invoice-list-table td:nth-child(4) .status-badge,
    .admin-panel-page .invoice-list-table td:nth-child(4) .status {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 44px !important;
        height: 44px !important;
        padding: 8px 12px !important;
        border-radius: 999px !important;
        text-align: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    .admin-panel-page .invoice-list-table td:nth-child(5) .invoice-quickpay-form {
        align-items: stretch !important;
        gap: 8px !important;
    }

    .admin-panel-page .invoice-list-table td:nth-child(5) .invoice-quickpay-combo {
        width: 100% !important;
        max-width: none !important;
        min-height: 44px !important;
        height: auto !important;
        border-radius: 999px !important;
    }

    .admin-panel-page .invoice-list-table td:nth-child(5) .invoice-quickpay-amount,
    .admin-panel-page .invoice-list-table td:nth-child(5) .invoice-quickpay-method {
        min-height: 44px !important;
        height: 44px !important;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
    }

    .admin-panel-page .invoice-list-table td:nth-child(5) .invoice-quickpay-amount {
        padding: 0 12px !important;
        text-align: center !important;
    }

    .admin-panel-page .invoice-list-table td:nth-child(5) .invoice-quickpay-method {
        width: 98px !important;
        min-width: 98px !important;
        padding: 0 26px 0 12px !important;
        font-size: 0.78rem !important;
        background-position: right 10px center !important;
    }

    .admin-panel-page .invoice-list-table td:nth-child(5) .invoice-quickpay-submit {
        width: min(178px, 100%) !important;
        max-width: 100% !important;
        min-height: 40px !important;
        height: 40px !important;
        margin: 0 auto !important;
        padding: 8px 16px !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
    }
}




/* Mobile-only: invoices follow overview card rhythm */
@media (max-width: 760px) {
    .admin-panel-page .invoice-mobile-overview-table tr {
        grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr) !important;
        gap: 8px 14px !important;
        align-items: start !important;
        padding: 14px !important;
        border: 1px solid #dde3ee !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05) !important;
    }

    .admin-panel-page .invoice-mobile-overview-table td {
        width: auto !important;
        min-width: 0 !important;
        padding: 6px 0 !important;
        border: 0 !important;
    }

    .admin-panel-page .invoice-mobile-overview-table td:nth-child(2) {
        text-align: right !important;
        justify-items: end !important;
    }

    .admin-panel-page .invoice-mobile-overview-table td:nth-child(2)::before {
        width: 100% !important;
        text-align: right !important;
    }

    .admin-panel-page .invoice-mobile-overview-table td:nth-child(2) .entity-main {
        align-items: flex-end !important;
        text-align: right !important;
    }

    .admin-panel-page .invoice-mobile-overview-table td:nth-child(3) {
        grid-column: 1 / -1 !important;
    }

    .admin-panel-page .invoice-mobile-overview-table td:nth-child(3) .entity-stack {
        gap: 8px !important;
        align-items: flex-start !important;
    }

    .admin-panel-page .invoice-mobile-overview-table td:nth-child(3) .color-pill {
        width: fit-content !important;
        max-width: 100% !important;
    }

    .admin-panel-page .invoice-mobile-overview-table td:nth-child(4) {
        grid-column: 1 !important;
        text-align: left !important;
        justify-items: start !important;
        align-self: start !important;
        padding-top: 4px !important;
    }

    .admin-panel-page .invoice-mobile-overview-table td:nth-child(4)::before {
        width: 100% !important;
        text-align: left !important;
        margin-bottom: 6px !important;
    }

    .admin-panel-page .invoice-mobile-overview-table td:nth-child(4) .status,
    .admin-panel-page .invoice-mobile-overview-table td:nth-child(4) .status-badge {
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 96px !important;
        max-width: 100% !important;
        min-height: 36px !important;
        padding: 6px 12px !important;
        font-size: 0.76rem !important;
        line-height: 1 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    .admin-panel-page .invoice-mobile-overview-table td:nth-child(5) {
        grid-column: 2 !important;
        text-align: right !important;
        justify-items: stretch !important;
        align-self: start !important;
        padding-top: 4px !important;
        min-width: 0 !important;
    }

    .admin-panel-page .invoice-mobile-overview-table td:nth-child(5)::before {
        width: 100% !important;
        text-align: right !important;
        margin-bottom: 6px !important;
    }

    .admin-panel-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-form {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .admin-panel-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-combo {
        width: 100% !important;
        max-width: none !important;
        min-height: 42px !important;
        height: auto !important;
        border-radius: 999px !important;
    }

    .admin-panel-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-amount,
    .admin-panel-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-method {
        min-height: 42px !important;
        height: 42px !important;
        font-size: 0.81rem !important;
        font-weight: 700 !important;
    }

    .admin-panel-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-amount {
        padding: 0 12px !important;
        text-align: left !important;
    }

    .admin-panel-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-amount::placeholder {
        font-size: 0.76rem !important;
        font-weight: 700 !important;
        opacity: 0.72 !important;
    }

    .admin-panel-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-method {
        width: 86px !important;
        min-width: 86px !important;
        padding: 0 24px 0 10px !important;
        font-size: 0.75rem !important;
        background-position: right 8px center !important;
    }

    .admin-panel-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-submit {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 40px !important;
        height: 40px !important;
        margin: 0 auto !important;
        padding: 8px 16px !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
    }
}

/* Invoice mobile rebalance: garage admin + super admin only */
@media (max-width: 760px) {
    .garage-admin-page .invoice-mobile-overview-table tr,
    .super-admin-page .invoice-mobile-overview-table tr {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "invoice status"
            "customer customer"
            "amounts amounts"
            "payment payment" !important;
        gap: 10px 12px !important;
        padding: 16px !important;
        border-radius: 18px !important;
        align-items: start !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td,
    .super-admin-page .invoice-mobile-overview-table td {
        padding: 0 !important;
        min-width: 0 !important;
        text-align: left !important;
        justify-items: stretch !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td::before,
    .super-admin-page .invoice-mobile-overview-table td::before {
        margin-bottom: 6px !important;
        text-align: left !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(1),
    .super-admin-page .invoice-mobile-overview-table td:nth-child(1) {
        grid-area: invoice !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(1)::before,
    .garage-admin-page .invoice-mobile-overview-table td:nth-child(2)::before,
    .garage-admin-page .invoice-mobile-overview-table td:nth-child(4)::before,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(1)::before,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(2)::before,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(4)::before {
        display: none !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(1) .entity-main,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(1) .entity-main {
        gap: 2px !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(1) .entity-name,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(1) .entity-name {
        font-size: 0.98rem !important;
        line-height: 1.2 !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(2),
    .super-admin-page .invoice-mobile-overview-table td:nth-child(2) {
        grid-area: customer !important;
        text-align: left !important;
        justify-items: stretch !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(2) .entity-main,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(2) .entity-main {
        align-items: flex-start !important;
        text-align: left !important;
        gap: 2px !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(2) .entity-name,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(2) .entity-name {
        font-size: 0.9rem !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(3),
    .super-admin-page .invoice-mobile-overview-table td:nth-child(3) {
        grid-area: amounts !important;
        grid-column: auto !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(3)::before,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(3)::before {
        margin-bottom: 8px !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(3) .entity-stack,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(3) .entity-stack {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        align-items: stretch !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(3) .color-pill,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(3) .color-pill {
        width: 100% !important;
        min-height: 48px !important;
        border-radius: 14px !important;
        justify-content: center !important;
        text-align: center !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        padding: 10px 8px !important;
        font-size: 0.74rem !important;
        font-weight: 800 !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(4),
    .super-admin-page .invoice-mobile-overview-table td:nth-child(4) {
        grid-area: status !important;
        grid-column: auto !important;
        justify-items: end !important;
        align-self: start !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(4) .status,
    .garage-admin-page .invoice-mobile-overview-table td:nth-child(4) .status-badge,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(4) .status,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(4) .status-badge {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 94px !important;
        max-width: 100% !important;
        min-height: 34px !important;
        padding: 6px 12px !important;
        border-radius: 999px !important;
        font-size: 0.74rem !important;
        white-space: nowrap !important;
        margin: 0 !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(5),
    .super-admin-page .invoice-mobile-overview-table td:nth-child(5) {
        grid-area: payment !important;
        grid-column: auto !important;
        text-align: left !important;
        justify-items: stretch !important;
        padding-top: 2px !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(5)::before,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(5)::before {
        margin-bottom: 8px !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-form,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-form {
        width: 100% !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-combo,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-combo {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 104px !important;
        width: 100% !important;
        min-height: 46px !important;
        border-radius: 14px !important;
        overflow: hidden !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-amount,
    .garage-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-method,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-amount,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-method {
        min-height: 46px !important;
        height: 46px !important;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-amount,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-amount {
        padding: 0 14px !important;
        text-align: left !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-method,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-method {
        width: 104px !important;
        min-width: 104px !important;
        padding: 0 28px 0 12px !important;
        font-size: 0.77rem !important;
        background-position: right 10px center !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-submit,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-submit {
        width: 100% !important;
        min-height: 42px !important;
        height: 42px !important;
        border-radius: 14px !important;
        margin: 0 !important;
        justify-content: center !important;
    }
}

@media (max-width: 460px) {
    .garage-admin-page .invoice-mobile-overview-table td:nth-child(3) .entity-stack,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(3) .entity-stack {
        grid-template-columns: 1fr !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-combo,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-combo {
        grid-template-columns: 1fr !important;
        border-radius: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
        gap: 8px !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-amount,
    .garage-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-method,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-amount,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-method {
        width: 100% !important;
        min-width: 0 !important;
        border: 1px solid #d8e2ef !important;
        border-radius: 14px !important;
        background: #ffffff !important;
    }
}


/* Invoice mobile card fix: garage + super admin only */
.invoice-payment-drawer-mobile {
    display: none;
}

@media (max-width: 760px) {
    .garage-admin-page .invoice-mobile-overview-table tr,
    .super-admin-page .invoice-mobile-overview-table tr {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "invoice status"
            "customer customer"
            "amounts amounts"
            "payment payment" !important;
        gap: 12px 14px !important;
        padding: 18px 16px !important;
        border: 1px solid #dbe5f4 !important;
        border-radius: 22px !important;
        background: linear-gradient(180deg, #ffffff, #f8fbff) !important;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05) !important;
        align-items: start !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td,
    .super-admin-page .invoice-mobile-overview-table td {
        padding: 0 !important;
        min-width: 0 !important;
        width: 100% !important;
        border: 0 !important;
        text-align: left !important;
        justify-items: stretch !important;
        align-self: start !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td::before,
    .super-admin-page .invoice-mobile-overview-table td::before {
        display: none !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(1),
    .super-admin-page .invoice-mobile-overview-table td:nth-child(1) {
        grid-area: invoice !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(1) .entity-main,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(1) .entity-main {
        align-items: flex-start !important;
        gap: 4px !important;
        text-align: left !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(1) .entity-name,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(1) .entity-name {
        font-size: 1.08rem !important;
        line-height: 1.15 !important;
        font-weight: 800 !important;
        color: #1f2a44 !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(1) .entity-sub,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(1) .entity-sub {
        font-size: 0.84rem !important;
        color: #7b8190 !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(2),
    .super-admin-page .invoice-mobile-overview-table td:nth-child(2) {
        grid-area: customer !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(2) .entity-main,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(2) .entity-main {
        align-items: flex-start !important;
        gap: 4px !important;
        text-align: left !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(2) .entity-name,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(2) .entity-name {
        font-size: 0.98rem !important;
        line-height: 1.2 !important;
        font-weight: 800 !important;
        color: #1f2a44 !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(2) .entity-sub,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(2) .entity-sub {
        font-size: 0.84rem !important;
        color: #7b8190 !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(3),
    .super-admin-page .invoice-mobile-overview-table td:nth-child(3) {
        grid-area: amounts !important;
        margin-top: 2px !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(3) .entity-stack,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(3) .entity-stack {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(3) .color-pill,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(3) .color-pill {
        display: flex !important;
        width: 100% !important;
        min-height: 52px !important;
        border-radius: 12px !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        padding: 10px 8px !important;
        font-size: 0.78rem !important;
        font-weight: 800 !important;
        box-shadow: none !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(4),
    .super-admin-page .invoice-mobile-overview-table td:nth-child(4) {
        grid-area: status !important;
        justify-items: end !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(4) .status-badge,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(4) .status-badge {
        display: inline-flex !important;
        width: auto !important;
        min-width: 96px !important;
        min-height: 38px !important;
        padding: 8px 16px !important;
        border-radius: 999px !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 !important;
        font-size: 0.8rem !important;
        font-weight: 800 !important;
        box-shadow: none !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(5),
    .super-admin-page .invoice-mobile-overview-table td:nth-child(5) {
        grid-area: payment !important;
        margin-top: 2px !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-form-desktop,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-form-desktop {
        display: none !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-payment-drawer-mobile,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-payment-drawer-mobile {
        display: block !important;
        width: 100% !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-payment-drawer-mobile summary,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-payment-drawer-mobile summary {
        list-style: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: min(100%, 220px) !important;
        min-height: 44px !important;
        margin: 0 auto !important;
        padding: 10px 18px !important;
        border: 1px solid #d8e2ef !important;
        border-radius: 12px !important;
        background: #eff4fb !important;
        color: #2c5ea8 !important;
        font-size: 0.9rem !important;
        font-weight: 800 !important;
        cursor: pointer !important;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-payment-drawer-mobile summary::-webkit-details-marker,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-payment-drawer-mobile summary::-webkit-details-marker {
        display: none !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-payment-drawer-mobile summary::after,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-payment-drawer-mobile summary::after {
        content: "+";
        margin-left: 10px;
        font-size: 1.2rem;
        line-height: 1;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-payment-drawer-mobile[open] summary,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-payment-drawer-mobile[open] summary {
        margin-bottom: 10px !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-payment-drawer-mobile[open] summary::after,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-payment-drawer-mobile[open] summary::after {
        content: "−";
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-form-mobile,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-form-mobile {
        width: 100% !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-combo,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-combo {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 112px !important;
        width: 100% !important;
        min-height: 46px !important;
        border-radius: 14px !important;
        overflow: hidden !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-amount,
    .garage-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-method,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-amount,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-method {
        min-height: 46px !important;
        height: 46px !important;
        font-size: 0.84rem !important;
        font-weight: 700 !important;
        border-radius: 0 !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-amount,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-amount {
        padding: 0 14px !important;
        text-align: left !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-method,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-method {
        width: 112px !important;
        min-width: 112px !important;
        padding: 0 28px 0 12px !important;
        background-position: right 10px center !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-submit,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-submit {
        width: 100% !important;
        min-height: 42px !important;
        height: 42px !important;
        border-radius: 14px !important;
        margin: 0 !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

@media (max-width: 360px) {
    .garage-admin-page .invoice-mobile-overview-table td:nth-child(3) .entity-stack,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(3) .entity-stack {
        grid-template-columns: 1fr !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-combo,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-combo {
        grid-template-columns: 1fr !important;
        border-radius: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
        gap: 8px !important;
    }

    .garage-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-amount,
    .garage-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-method,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-amount,
    .super-admin-page .invoice-mobile-overview-table td:nth-child(5) .invoice-quickpay-method {
        width: 100% !important;
        min-width: 0 !important;
        border: 1px solid #d8e2ef !important;
        border-radius: 14px !important;
        background: #ffffff !important;
    }
}

@media (min-width: 761px) {
    .invoice-payment-drawer-mobile {
        display: none !important;
    }
}


/* Mobile-only targeted updates requested by user: overview, calendar, customers, vehicles */
@media (max-width: 760px) {
    .garage-admin-page .dashboard-stat-row,
    .super-admin-page .dashboard-stat-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        border: 0 !important;
        overflow: visible !important;
        background: transparent !important;
    }

    .garage-admin-page .dashboard-stat-card,
    .super-admin-page .dashboard-stat-card {
        border: 1px solid #dde3ee !important;
        border-right: 1px solid #dde3ee !important;
        border-radius: 16px !important;
        min-height: 96px;
        padding: 16px 14px 14px !important;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
    }

    .garage-admin-page .dashboard-stat-card:last-child,
    .super-admin-page .dashboard-stat-card:last-child {
        border-right: 1px solid #dde3ee !important;
    }

    .garage-admin-page .dashboard-stat-head,
    .super-admin-page .dashboard-stat-head {
        font-size: 0.9rem;
        line-height: 1.25;
    }

    .garage-admin-page .dashboard-stat-value,
    .super-admin-page .dashboard-stat-value {
        font-size: 1.9rem;
    }

    .garage-admin-page .calendar-toolbar {
        gap: 8px !important;
        margin-bottom: 4px !important;
    }

    .garage-admin-page .calendar-toolbar > div:first-child p {
        margin: 0 !important;
    }

    .garage-admin-page .booking-calendar-grid {
        margin-top: 0 !important;
    }

    .garage-admin-page .booking-calendar-grid .calendar-empty {
        display: none !important;
    }

    .garage-admin-page .booking-calendar-grid .calendar-date {
        min-height: 92px !important;
        gap: 8px !important;
    }

    .garage-admin-page .booking-calendar-grid .calendar-date strong {
        font-size: 1.2rem !important;
        line-height: 1 !important;
    }

    .garage-admin-page .booking-calendar-grid .calendar-pill {
        font-size: 0.8rem !important;
    }

    .admin-panel-page .customer-list-table tbody,
    .admin-panel-page .vehicle-list-table tbody {
        gap: 12px;
    }

    .admin-panel-page .customer-list-table tr,
    .admin-panel-page .vehicle-list-table tr {
        padding: 14px 14px 12px;
        border-radius: 14px;
        justify-items: center;
        text-align: center;
    }

    .admin-panel-page .customer-list-table td,
    .admin-panel-page .vehicle-list-table td {
        padding: 6px 0;
        text-align: center !important;
        justify-items: center !important;
    }

    .admin-panel-page .customer-list-table td::before,
    .admin-panel-page .vehicle-list-table td::before {
        width: 100%;
        text-align: center !important;
    }

    .admin-panel-page .customer-list-table td .entity-main,
    .admin-panel-page .customer-list-table td .entity-stack,
    .admin-panel-page .customer-list-table td .report-summary,
    .admin-panel-page .vehicle-list-table td .entity-main,
    .admin-panel-page .vehicle-list-table td .entity-stack,
    .admin-panel-page .vehicle-list-table td .report-summary {
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .admin-panel-page .customer-list-table td .entity-name,
    .admin-panel-page .customer-list-table td .entity-sub,
    .admin-panel-page .customer-list-table td .entity-meta,
    .admin-panel-page .vehicle-list-table td .entity-name,
    .admin-panel-page .vehicle-list-table td .entity-sub,
    .admin-panel-page .vehicle-list-table td .entity-meta {
        text-align: center !important;
    }

    .admin-panel-page .customer-list-table .report-summary,
    .admin-panel-page .vehicle-list-table .report-summary {
        justify-content: center;
    }

    .admin-panel-page .customer-list-table .color-pill,
    .admin-panel-page .vehicle-list-table .color-pill {
        min-height: 36px;
        padding: 9px 14px;
        border-radius: 999px;
        background: linear-gradient(135deg, #dbeafe, #ede9fe) !important;
        color: #3730a3 !important;
        box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.08);
    }

    .admin-panel-page .customer-list-table td:last-child,
    .admin-panel-page .vehicle-list-table td:last-child {
        justify-items: stretch !important;
        text-align: center !important;
    }

    .admin-panel-page .customer-list-table td:last-child .action-cluster,
    .admin-panel-page .vehicle-list-table td:last-child .action-cluster {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .admin-panel-page .customer-list-table td:last-child .action-cluster > *,
    .admin-panel-page .vehicle-list-table td:last-child .action-cluster > * {
        width: auto !important;
        max-width: none !important;
    }

    .admin-panel-page .customer-list-table td:last-child .action-cluster > :first-child,
    .admin-panel-page .vehicle-list-table td:last-child .action-cluster > :first-child {
        justify-self: start;
    }

    .admin-panel-page .customer-list-table td:last-child .action-cluster form,
    .admin-panel-page .vehicle-list-table td:last-child .action-cluster form {
        justify-self: end;
        margin: 0 !important;
    }

    .admin-panel-page .customer-list-table td:last-child .btn,
    .admin-panel-page .vehicle-list-table td:last-child .btn {
        min-width: 116px;
        justify-content: center;
    }
}

@media (max-width: 420px) {
    .garage-admin-page .dashboard-stat-row,
    .super-admin-page .dashboard-stat-row {
        gap: 8px !important;
    }

    .garage-admin-page .dashboard-stat-head,
    .super-admin-page .dashboard-stat-head {
        font-size: 0.84rem;
    }

    .garage-admin-page .dashboard-stat-value,
    .super-admin-page .dashboard-stat-value {
        font-size: 1.7rem;
    }

    .admin-panel-page .customer-list-table td:last-child .action-cluster > :first-child,
    .admin-panel-page .vehicle-list-table td:last-child .action-cluster > :first-child {
        justify-self: stretch;
    }

    .admin-panel-page .customer-list-table td:last-child .action-cluster form,
    .admin-panel-page .vehicle-list-table td:last-child .action-cluster form {
        justify-self: stretch;
    }

    .admin-panel-page .customer-list-table td:last-child .btn,
    .admin-panel-page .vehicle-list-table td:last-child .btn {
        min-width: 0;
        width: 100%;
    }
}


/* Mobile-only: payments match invoice card rhythm for garage + super admin */
@media (max-width: 760px) {
    .garage-admin-page .payment-mobile-overview-table tbody,
    .super-admin-page .payment-mobile-overview-table tbody {
        gap: 12px !important;
    }

    .garage-admin-page .payment-mobile-overview-table tr,
    .super-admin-page .payment-mobile-overview-table tr {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "invoice method"
            "customer customer"
            "date date"
            "amount amount" !important;
        gap: 10px 14px !important;
        align-items: start !important;
        padding: 14px !important;
        border: 1px solid #dde3ee !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05) !important;
    }

    .garage-admin-page .payment-mobile-overview-table td,
    .super-admin-page .payment-mobile-overview-table td {
        width: auto !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .garage-admin-page .payment-mobile-overview-table td::before,
    .super-admin-page .payment-mobile-overview-table td::before {
        display: none !important;
        content: none !important;
    }

    .garage-admin-page .payment-mobile-overview-table td:nth-child(1),
    .super-admin-page .payment-mobile-overview-table td:nth-child(1) {
        grid-area: date !important;
    }

    .garage-admin-page .payment-mobile-overview-table td:nth-child(2),
    .super-admin-page .payment-mobile-overview-table td:nth-child(2) {
        grid-area: invoice !important;
        text-align: left !important;
        justify-items: start !important;
    }

    .garage-admin-page .payment-mobile-overview-table td:nth-child(3),
    .super-admin-page .payment-mobile-overview-table td:nth-child(3) {
        grid-area: customer !important;
        text-align: left !important;
        justify-items: start !important;
    }

    .garage-admin-page .payment-mobile-overview-table td:nth-child(4),
    .super-admin-page .payment-mobile-overview-table td:nth-child(4) {
        grid-area: method !important;
        align-self: start !important;
        text-align: right !important;
        justify-items: end !important;
    }

    .garage-admin-page .payment-mobile-overview-table td:nth-child(5),
    .super-admin-page .payment-mobile-overview-table td:nth-child(5) {
        grid-area: amount !important;
        text-align: left !important;
        justify-items: stretch !important;
    }

    .garage-admin-page .payment-mobile-overview-table td .entity-main,
    .super-admin-page .payment-mobile-overview-table td .entity-main {
        gap: 4px !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .garage-admin-page .payment-mobile-overview-table td:nth-child(2) .entity-name,
    .super-admin-page .payment-mobile-overview-table td:nth-child(2) .entity-name {
        font-size: 1.02rem !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        color: #0f172a !important;
    }

    .garage-admin-page .payment-mobile-overview-table td:nth-child(2) .entity-sub,
    .super-admin-page .payment-mobile-overview-table td:nth-child(2) .entity-sub {
        display: none !important;
    }

    .garage-admin-page .payment-mobile-overview-table td:nth-child(3) .entity-name,
    .super-admin-page .payment-mobile-overview-table td:nth-child(3) .entity-name {
        font-size: 0.98rem !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        color: #1e293b !important;
    }

    .garage-admin-page .payment-mobile-overview-table td:nth-child(3) .entity-sub,
    .super-admin-page .payment-mobile-overview-table td:nth-child(3) .entity-sub {
        font-size: 0.84rem !important;
        font-weight: 600 !important;
        color: #64748b !important;
    }

    .garage-admin-page .payment-mobile-overview-table td:nth-child(1) .entity-main,
    .super-admin-page .payment-mobile-overview-table td:nth-child(1) .entity-main {
        gap: 2px !important;
    }

    .garage-admin-page .payment-mobile-overview-table td:nth-child(1) .entity-name,
    .super-admin-page .payment-mobile-overview-table td:nth-child(1) .entity-name {
        font-size: 0.84rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        color: #64748b !important;
    }

    .garage-admin-page .payment-mobile-overview-table td:nth-child(1) .entity-sub,
    .super-admin-page .payment-mobile-overview-table td:nth-child(1) .entity-sub {
        font-size: 0.8rem !important;
        line-height: 1.2 !important;
        color: #94a3b8 !important;
    }

    .garage-admin-page .payment-mobile-overview-table td:nth-child(4) .color-pill,
    .super-admin-page .payment-mobile-overview-table td:nth-child(4) .color-pill {
        min-height: 40px !important;
        padding: 8px 16px !important;
        border-radius: 999px !important;
        font-size: 0.82rem !important;
        font-weight: 800 !important;
        text-transform: capitalize !important;
        white-space: nowrap !important;
        justify-content: center !important;
        box-shadow: none !important;
    }

    .garage-admin-page .payment-mobile-overview-table td:nth-child(5) .color-pill,
    .super-admin-page .payment-mobile-overview-table td:nth-child(5) .color-pill {
        display: flex !important;
        width: 100% !important;
        min-height: 44px !important;
        padding: 10px 14px !important;
        border-radius: 12px !important;
        justify-content: center !important;
        text-align: center !important;
        font-size: 0.92rem !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        box-shadow: none !important;
    }
}

@media (max-width: 420px) {
    .garage-admin-page .payment-mobile-overview-table tr,
    .super-admin-page .payment-mobile-overview-table tr {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "invoice"
            "method"
            "customer"
            "date"
            "amount" !important;
        gap: 10px !important;
    }

    .garage-admin-page .payment-mobile-overview-table td:nth-child(4),
    .super-admin-page .payment-mobile-overview-table td:nth-child(4) {
        text-align: left !important;
        justify-items: start !important;
    }
}


/* Mobile-only: inventory follows the approved balanced card layout for garage + super admin */
.inventory-stock-mobile,
.inventory-reorder-mobile,
.inventory-price-mobile,
.inventory-cost-mobile {
    display: none;
}

@media (max-width: 760px) {
    .garage-admin-page .inventory-mobile-overview-table tbody,
    .super-admin-page .inventory-mobile-overview-table tbody {
        display: grid !important;
        gap: 18px !important;
    }

    .garage-admin-page .inventory-mobile-overview-table tr,
    .super-admin-page .inventory-mobile-overview-table tr {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-areas:
            "part part"
            "stock reorder"
            "price price"
            "actions actions" !important;
        gap: 12px !important;
        align-items: start !important;
        padding: 14px !important;
        border: 1px solid #d9e2ee !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
    }

    .garage-admin-page .inventory-mobile-overview-table.inventory-mobile-overview-no-actions tr,
    .super-admin-page .inventory-mobile-overview-table.inventory-mobile-overview-no-actions tr {
        grid-template-areas:
            "part part"
            "stock reorder"
            "price price" !important;
    }

    .garage-admin-page .inventory-mobile-overview-table td,
    .super-admin-page .inventory-mobile-overview-table td {
        width: auto !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        text-align: left !important;
        justify-items: stretch !important;
        background: transparent !important;
    }

    .garage-admin-page .inventory-mobile-overview-table td::before,
    .super-admin-page .inventory-mobile-overview-table td::before {
        display: none !important;
        content: none !important;
    }

    .garage-admin-page .inventory-mobile-overview-table td:nth-child(1),
    .super-admin-page .inventory-mobile-overview-table td:nth-child(1) {
        grid-area: part !important;
    }

    .garage-admin-page .inventory-mobile-overview-table td:nth-child(2),
    .super-admin-page .inventory-mobile-overview-table td:nth-child(2),
    .garage-admin-page .inventory-mobile-overview-table td:nth-child(6),
    .super-admin-page .inventory-mobile-overview-table td:nth-child(6) {
        display: none !important;
    }

    .garage-admin-page .inventory-mobile-overview-table td:nth-child(3),
    .super-admin-page .inventory-mobile-overview-table td:nth-child(3) {
        grid-area: stock !important;
    }

    .garage-admin-page .inventory-mobile-overview-table td:nth-child(4),
    .super-admin-page .inventory-mobile-overview-table td:nth-child(4) {
        grid-area: reorder !important;
    }

    .garage-admin-page .inventory-mobile-overview-table td:nth-child(5),
    .super-admin-page .inventory-mobile-overview-table td:nth-child(5) {
        grid-area: price !important;
    }

    .garage-admin-page .inventory-mobile-overview-table td:nth-child(7),
    .super-admin-page .inventory-mobile-overview-table td:nth-child(7) {
        grid-area: actions !important;
        margin-top: 2px !important;
        padding-top: 12px !important;
        border-top: 1px solid #e8edf5 !important;
    }

    .garage-admin-page .inventory-mobile-overview-table td:nth-child(1) .entity-main,
    .super-admin-page .inventory-mobile-overview-table td:nth-child(1) .entity-main {
        gap: 0 !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .garage-admin-page .inventory-mobile-overview-table td:nth-child(1) .entity-name,
    .super-admin-page .inventory-mobile-overview-table td:nth-child(1) .entity-name {
        font-size: 1.1rem !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        color: #1f2937 !important;
    }

    .garage-admin-page .inventory-mobile-overview-table td:nth-child(1) .inventory-reorder-desktop,
    .super-admin-page .inventory-mobile-overview-table td:nth-child(1) .inventory-reorder-desktop,
    .garage-admin-page .inventory-mobile-overview-table td:nth-child(2) .inventory-sku-stack,
    .super-admin-page .inventory-mobile-overview-table td:nth-child(2) .inventory-sku-stack,
    .garage-admin-page .inventory-mobile-overview-table td:nth-child(2) .inventory-sku-chip,
    .super-admin-page .inventory-mobile-overview-table td:nth-child(2) .inventory-sku-chip,
    .inventory-cost-mobile,
    .garage-admin-page .inventory-stock-desktop,
    .super-admin-page .inventory-stock-desktop,
    .garage-admin-page .inventory-cost-desktop,
    .super-admin-page .inventory-cost-desktop,
    .garage-admin-page .inventory-sell-desktop,
    .super-admin-page .inventory-sell-desktop {
        display: none !important;
    }

    .inventory-stock-mobile,
    .inventory-reorder-mobile,
    .inventory-price-mobile {
        display: flex !important;
    }

    .garage-admin-page .inventory-stock-mobile,
    .garage-admin-page .inventory-reorder-mobile,
    .super-admin-page .inventory-stock-mobile,
    .super-admin-page .inventory-reorder-mobile {
        width: 100% !important;
        min-height: 56px !important;
        padding: 10px 14px !important;
        border-radius: 8px !important;
        justify-content: space-between !important;
        align-items: center !important;
        text-align: left !important;
        font-size: 0.92rem !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
        box-shadow: none !important;
        white-space: normal !important;
    }

    .garage-admin-page .inventory-stock-mobile strong,
    .garage-admin-page .inventory-reorder-mobile strong,
    .super-admin-page .inventory-stock-mobile strong,
    .super-admin-page .inventory-reorder-mobile strong {
        font-size: 1.4rem !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        margin-left: 10px !important;
    }

    .garage-admin-page .inventory-price-mobile,
    .super-admin-page .inventory-price-mobile {
        align-items: baseline !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 0 2px !important;
        gap: 12px !important;
    }

    .garage-admin-page .inventory-price-mobile-label,
    .super-admin-page .inventory-price-mobile-label {
        font-size: 0.82rem !important;
        font-weight: 600 !important;
        color: #6b7280 !important;
    }

    .garage-admin-page .inventory-price-mobile-value,
    .super-admin-page .inventory-price-mobile-value {
        font-size: 1.05rem !important;
        font-weight: 900 !important;
        color: #0f766e !important;
        text-align: right !important;
    }

    .garage-admin-page .inventory-mobile-overview-table td:nth-child(7) .action-cluster,
    .super-admin-page .inventory-mobile-overview-table td:nth-child(7) .action-cluster {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        align-items: stretch !important;
    }

    .garage-admin-page .inventory-mobile-overview-table td:nth-child(7) .action-cluster > *,
    .super-admin-page .inventory-mobile-overview-table td:nth-child(7) .action-cluster > * {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .garage-admin-page .inventory-mobile-overview-table td:nth-child(7) .action-cluster form,
    .super-admin-page .inventory-mobile-overview-table td:nth-child(7) .action-cluster form {
        display: block !important;
    }

    .garage-admin-page .inventory-mobile-overview-table td:nth-child(7) .btn,
    .super-admin-page .inventory-mobile-overview-table td:nth-child(7) .btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 40px !important;
        border-radius: 6px !important;
        font-weight: 700 !important;
        justify-content: center !important;
        box-shadow: none !important;
        padding: 9px 12px !important;
    }

    .garage-admin-page .inventory-mobile-overview-table td:nth-child(7) .btn-info,
    .super-admin-page .inventory-mobile-overview-table td:nth-child(7) .btn-info {
        background: #eef3fd !important;
        border-color: #dbe6fa !important;
        color: #2d5bb3 !important;
    }

    .garage-admin-page .inventory-mobile-overview-table td:nth-child(7) .btn-danger,
    .super-admin-page .inventory-mobile-overview-table td:nth-child(7) .btn-danger {
        background: #fbecf0 !important;
        border-color: #f7d7df !important;
        color: #ef4444 !important;
    }
}

@media (max-width: 390px) {
    .garage-admin-page .inventory-mobile-overview-table tbody,
    .super-admin-page .inventory-mobile-overview-table tbody {
        gap: 14px !important;
    }

    .garage-admin-page .inventory-mobile-overview-table tr,
    .super-admin-page .inventory-mobile-overview-table tr {
        padding: 12px !important;
        gap: 10px !important;
    }

    .garage-admin-page .inventory-stock-mobile,
    .garage-admin-page .inventory-reorder-mobile,
    .super-admin-page .inventory-stock-mobile,
    .super-admin-page .inventory-reorder-mobile {
        min-height: 52px !important;
        padding: 9px 12px !important;
        font-size: 0.84rem !important;
    }

    .garage-admin-page .inventory-stock-mobile strong,
    .garage-admin-page .inventory-reorder-mobile strong,
    .super-admin-page .inventory-stock-mobile strong,
    .super-admin-page .inventory-reorder-mobile strong {
        font-size: 1.22rem !important;
        margin-left: 8px !important;
    }

    .garage-admin-page .inventory-mobile-overview-table td:nth-child(7) .btn,
    .super-admin-page .inventory-mobile-overview-table td:nth-child(7) .btn {
        min-height: 38px !important;
        font-size: 0.9rem !important;
    }
}


/* v6 mobile-only settings refresh for garage + super admin */
@media (max-width: 760px) {
    .garage-admin-page .settings-card,
    .super-admin-page .settings-card,
    .super-settings-card {
        padding: 16px;
        border-radius: 20px;
        overflow: visible;
    }

    .garage-admin-page .owner-settings-form,
    .super-admin-page .owner-settings-form,
    .super-settings-card .super-settings-form {
        display: grid;
        gap: 12px;
    }

    .garage-admin-page .settings-mobile-section,
    .super-admin-page .settings-mobile-section,
    .super-settings-card .settings-mobile-section {
        background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        border: 1px solid #dbe6f4;
        border-radius: 14px;
        padding: 14px;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    }

    .garage-admin-page .settings-mobile-titlebar,
    .super-admin-page .settings-mobile-titlebar,
    .super-settings-card .settings-mobile-titlebar {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 14px;
        padding-bottom: 12px;
        border-bottom: 1px solid #e5edf7;
    }

    .garage-admin-page .settings-mobile-titlebar::before,
    .super-admin-page .settings-mobile-titlebar::before,
    .super-settings-card .settings-mobile-titlebar::before {
        content: "";
        width: 12px;
        height: 12px;
        border-radius: 999px;
        background: linear-gradient(135deg, #60a5fa 0%, #8b5cf6 100%);
        box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.14);
        flex: 0 0 auto;
    }

    .garage-admin-page .settings-card h2,
    .garage-admin-page .settings-card h3,
    .super-admin-page .settings-card h2,
    .super-admin-page .settings-card h3,
    .super-settings-card h2,
    .super-settings-card h3 {
        margin: 0;
        font-size: 1.04rem;
        line-height: 1.2;
        font-weight: 800;
        color: #17345d;
    }

    .garage-admin-page .settings-brand-grid,
    .garage-admin-page .settings-smtp-grid,
    .super-admin-page .settings-brand-grid,
    .super-admin-page .settings-smtp-grid,
    .super-settings-card .super-settings-form {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .garage-admin-page .settings-brand-grid > div,
    .garage-admin-page .settings-smtp-grid > div,
    .super-admin-page .settings-brand-grid > div,
    .super-admin-page .settings-smtp-grid > div,
    .super-settings-card .settings-field-card {
        background: #f7faff;
        border: 1px solid #dce7f4;
        border-radius: 14px;
        padding: 12px;
        min-width: 0;
    }

    .garage-admin-page .settings-card .settings-logo-field,
    .super-admin-page .settings-card .settings-logo-field {
        background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
    }

    .garage-admin-page .settings-card .input-label,
    .super-admin-page .settings-card .input-label,
    .super-settings-card label {
        display: block;
        margin-bottom: 5px;
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #5d6e86;
    }

    .garage-admin-page .settings-card .input,
    .garage-admin-page .settings-card .select,
    .garage-admin-page .settings-card .textarea,
    .super-admin-page .settings-card .input,
    .super-admin-page .settings-card .select,
    .super-admin-page .settings-card .textarea,
    .super-settings-card .form-control {
        width: 100%;
        min-height: 52px;
        border-radius: 14px;
        border: 1px solid #d4deec;
        background: #fff;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
    }

    .garage-admin-page .settings-card .input[type="color"],
    .super-admin-page .settings-card .input[type="color"] {
        min-height: 56px;
        padding: 6px 8px;
        border-radius: 14px;
    }

    .garage-admin-page .settings-card .inline-actions,
    .super-admin-page .settings-card .inline-actions {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        width: 100%;
        justify-content: flex-start;
        line-height: 1.35;
    }

    .garage-admin-page .settings-card .inline-actions input[type="checkbox"],
    .super-admin-page .settings-card .inline-actions input[type="checkbox"] {
        margin-top: 2px;
        width: 18px;
        height: 18px;
        accent-color: #4f46e5;
    }

    .garage-admin-page .settings-card .logo-upload-panel,
    .super-admin-page .settings-card .logo-upload-panel {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .garage-admin-page .settings-card .logo-preview-frame,
    .super-admin-page .settings-card .logo-preview-frame {
        min-height: 86px;
        border-radius: 14px;
    }

    .garage-admin-page .settings-card .smtp-help-card,
    .super-admin-page .settings-card .smtp-help-card {
        margin-top: 12px;
        border-radius: 14px;
        padding: 14px;
    }

    .garage-admin-page .settings-card .hours-table thead,
    .super-admin-page .settings-card .hours-table thead {
        display: none;
    }

    .garage-admin-page .settings-card .hours-table,
    .garage-admin-page .settings-card .hours-table tbody,
    .garage-admin-page .settings-card .hours-table tr,
    .garage-admin-page .settings-card .hours-table td,
    .super-admin-page .settings-card .hours-table,
    .super-admin-page .settings-card .hours-table tbody,
    .super-admin-page .settings-card .hours-table tr,
    .super-admin-page .settings-card .hours-table td {
        display: block;
        width: 100%;
    }

    .garage-admin-page .settings-card .hours-table tbody,
    .super-admin-page .settings-card .hours-table tbody {
        display: grid;
        gap: 12px;
    }

    .garage-admin-page .settings-card .hours-table tr,
    .super-admin-page .settings-card .hours-table tr {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "day open"
            "start end";
        gap: 12px 14px;
        padding: 14px;
        border: 1px solid #dce7f4;
        border-radius: 14px;
        background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    }

    .garage-admin-page .settings-card .hours-table td,
    .super-admin-page .settings-card .hours-table td {
        padding: 0 !important;
        min-width: 0;
        border: 0;
    }

    .garage-admin-page .settings-card .hours-table td::before,
    .super-admin-page .settings-card .hours-table td::before {
        display: block;
        margin-bottom: 6px;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #7b8aa2;
    }

    .garage-admin-page .settings-card .hours-table td:nth-child(1),
    .super-admin-page .settings-card .hours-table td:nth-child(1) {
        grid-area: day;
        font-size: 1rem;
        font-weight: 800;
        color: #183b67;
    }

    .garage-admin-page .settings-card .hours-table td:nth-child(1)::before,
    .super-admin-page .settings-card .hours-table td:nth-child(1)::before {
        display: none;
    }

    .garage-admin-page .settings-card .hours-table td:nth-child(2),
    .super-admin-page .settings-card .hours-table td:nth-child(2) {
        grid-area: open;
        text-align: right;
        justify-items: end;
    }

    .garage-admin-page .settings-card .hours-table td:nth-child(3),
    .super-admin-page .settings-card .hours-table td:nth-child(3) {
        grid-area: start;
    }

    .garage-admin-page .settings-card .hours-table td:nth-child(4),
    .super-admin-page .settings-card .hours-table td:nth-child(4) {
        grid-area: end;
        text-align: right;
        justify-items: end;
    }

    .garage-admin-page .settings-card .hours-table td:nth-child(2) input[type="checkbox"],
    .super-admin-page .settings-card .hours-table td:nth-child(2) input[type="checkbox"] {
        width: 20px;
        height: 20px;
        accent-color: #4f46e5;
    }

    .garage-admin-page .settings-card .hours-table td:nth-child(3) .input,
    .garage-admin-page .settings-card .hours-table td:nth-child(4) .input,
    .super-admin-page .settings-card .hours-table td:nth-child(3) .input,
    .super-admin-page .settings-card .hours-table td:nth-child(4) .input {
        min-height: 48px;
        text-align: center;
    }

    .garage-admin-page .settings-card .settings-mobile-submit,
    .super-admin-page .settings-card .settings-mobile-submit,
    .super-settings-card .settings-mobile-submit {
        width: 100%;
        justify-content: stretch;
    }

    .garage-admin-page .settings-card .settings-mobile-submit .btn,
    .super-admin-page .settings-card .settings-mobile-submit .btn,
    .super-settings-card .settings-mobile-submit .btn {
        width: 100%;
        min-height: 50px;
        border-radius: 14px;
    }

    .super-settings-card .form-text {
        display: block;
        margin-top: 8px;
        color: #66768f;
        line-height: 1.35;
    }
}

/* WhatsApp live messaging module */
.admin-panel-page .whatsapp-connection-card .metric-pill,
.admin-panel-page .whatsapp-module-card .metric-pill {
    white-space: nowrap;
}

.admin-panel-page .whatsapp-settings-grid,
.admin-panel-page .whatsapp-compose-grid {
    align-items: start;
}

.admin-panel-page .whatsapp-open-card {
    border: 1px solid rgba(34, 197, 94, 0.22);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

.admin-panel-page .whatsapp-open-card .btn {
    min-width: 180px;
}

.admin-panel-page .whatsapp-error-text {
    color: #b91c1c;
}

.admin-panel-page .whatsapp-log-table .entity-sub {
    word-break: break-word;
}

.admin-panel-page .whatsapp-settings-form .muted,
.admin-panel-page .whatsapp-compose-form .muted {
    line-height: 1.5;
}


.admin-panel-page .whatsapp-template-select {
    margin-bottom: 12px;
}

.admin-panel-page .whatsapp-template-picker {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.admin-panel-page .whatsapp-template-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 16px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    color: #0f172a;
    text-align: left;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.admin-panel-page .whatsapp-template-card:hover,
.admin-panel-page .whatsapp-template-card:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(37, 211, 102, 0.45);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.1);
    outline: none;
}

.admin-panel-page .whatsapp-template-card.is-active {
    border-color: rgba(37, 211, 102, 0.58);
    background: linear-gradient(180deg, rgba(37, 211, 102, 0.12) 0%, rgba(255, 255, 255, 0.98) 100%);
    box-shadow: 0 18px 36px rgba(37, 211, 102, 0.16);
}

.admin-panel-page .whatsapp-template-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.06);
    font-size: 20px;
    line-height: 1;
}

.admin-panel-page .whatsapp-template-card.is-active .whatsapp-template-icon {
    background: rgba(37, 211, 102, 0.16);
}

.admin-panel-page .whatsapp-template-copy {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.admin-panel-page .whatsapp-template-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.admin-panel-page .whatsapp-template-description {
    color: #5f6f88;
    font-size: 13px;
    line-height: 1.55;
}

.admin-panel-page .whatsapp-message-shell {
    border: 1px solid rgba(37, 211, 102, 0.18);
    border-radius: 24px;
    padding: 18px;
    background: linear-gradient(180deg, rgba(37, 211, 102, 0.08) 0%, rgba(255, 255, 255, 0.98) 100%);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.06);
}

.admin-panel-page .whatsapp-message-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.admin-panel-page .whatsapp-message-kicker {
    display: inline-flex;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #16a34a;
}

.admin-panel-page .whatsapp-message-header h3 {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
    color: #0f172a;
}

.admin-panel-page .whatsapp-message-header p {
    margin: 8px 0 0;
    max-width: 620px;
    color: #5f6f88;
    line-height: 1.6;
}

.admin-panel-page .whatsapp-message-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.admin-panel-page .whatsapp-message-editor {
    min-height: 230px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: #ffffff;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.7;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.admin-panel-page .whatsapp-message-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}


@media (max-width: 760px) {
    .admin-panel-page .whatsapp-open-card .module-toolbar,
    .admin-panel-page .whatsapp-connection-card .module-toolbar,
    .admin-panel-page .whatsapp-compose-card .module-toolbar {
        align-items: flex-start;
    }

    .admin-panel-page .whatsapp-open-card .inline-actions,
    .admin-panel-page .whatsapp-connection-card .inline-actions,
    .admin-panel-page .whatsapp-compose-card .inline-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .admin-panel-page .whatsapp-open-card .btn,
    .admin-panel-page .whatsapp-connection-card .btn,
    .admin-panel-page .whatsapp-compose-card .btn {
        width: 100%;
        justify-content: center;
    }

    .admin-panel-page .whatsapp-template-picker {
        grid-template-columns: 1fr;
    }

    .admin-panel-page .whatsapp-template-card {
        border-radius: 14px;
    }

    .admin-panel-page .whatsapp-message-shell {
        padding: 16px;
        border-radius: 14px;
    }

    .admin-panel-page .whatsapp-message-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-panel-page .whatsapp-message-chip {
        white-space: normal;
    }

    .admin-panel-page .whatsapp-message-editor {
        min-height: 260px;
    }

    .admin-panel-page .whatsapp-log-table td:nth-child(5),
    .admin-panel-page .whatsapp-log-table td:nth-child(6) {
        text-align: left;
        justify-items: start;
    }

    .admin-panel-page .whatsapp-log-table td:nth-child(5)::before,
    .admin-panel-page .whatsapp-log-table td:nth-child(6)::before {
        text-align: left;
    }

    .admin-panel-page .whatsapp-log-table td:nth-child(5) .entity-main,
    .admin-panel-page .whatsapp-log-table td:nth-child(6) .entity-main {
        align-items: flex-start;
        text-align: left;
    }

    .admin-panel-page .whatsapp-log-table td:nth-child(6) .status-badge {
        justify-self: start;
    }
}

.admin-panel-page .whatsapp-webhook-card {
    border: 1px solid rgba(59, 130, 246, 0.18);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
}

.admin-panel-page .whatsapp-webhook-grid {
    align-items: start;
}

.admin-panel-page .whatsapp-code-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

/* Desktop-only overview appointment cards (garage + super admin overview widgets) */
.dashboard-upcoming-desktop {
    display: none;
}
.dashboard-upcoming-mobile {
    display: block;
}

@media (min-width: 761px) {
    .garage-admin-page .dashboard-grid-main {
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: 22px;
    }

    .dashboard-upcoming-desktop {
        display: grid;
        gap: 12px;
        padding: 14px 16px 18px;
    }

    .dashboard-upcoming-mobile {
        display: none;
    }

    .overview-appointment-card {
        display: grid;
        gap: 10px;
        padding: 18px 20px;
        background: #fff;
        border: 1px solid #dbe3ef;
        border-radius: 14px;
        box-shadow: 0 3px 12px rgba(15, 23, 42, 0.06);
    }

    .overview-appointment-card__top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        align-items: start;
    }

    .overview-appointment-card__identity {
        min-width: 0;
    }

    .overview-appointment-card__identity h3 {
        margin: 0;
        color: #1e293b;
        font-size: 1.04rem;
        line-height: 1.25;
        font-weight: 800;
    }

    .overview-appointment-card__identity p {
        margin: 7px 0 0;
        color: #64748b;
        font-size: .82rem;
        line-height: 1.35;
    }

    .overview-appointment-card__actions {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
        flex-wrap: nowrap;
    }

    .overview-appointment-card__actions .status {
        padding: 7px 12px;
        border-radius: 999px;
        font-size: .9rem;
        font-weight: 800;
        white-space: nowrap;
    }

    .overview-appointment-card__open {
        min-width: 94px;
        justify-content: center;
        white-space: nowrap;
        border-radius: 999px !important;
        padding-left: 18px;
        padding-right: 18px;
    }

    .overview-appointment-card__bottom {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 12px;
        align-items: center;
    }

    .overview-appointment-card__bottom--super {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .overview-appointment-card__meta {
        min-width: 0;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #475569;
        font-size: .98rem;
        font-weight: 500;
    }

    .overview-appointment-card__meta > span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .overview-appointment-card__separator {
        color: #94a3b8;
        font-weight: 700;
        flex: 0 0 auto;
    }

    .overview-appointment-card__icon,
    .overview-appointment-card__fa-icon {
        color: #94a3b8;
        flex: 0 0 auto;
    }

    .overview-appointment-card__schedule {
        color: #334155;
        font-size: 1rem;
        font-weight: 700;
        white-space: nowrap;
    }

    .overview-appointment-card__menu {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #94a3b8;
        line-height: 0;
    }

    .overview-appointment-card__menu .icon-svg {
        width: 18px;
        height: 18px;
    }

    .super-admin-overview-cards {
        padding-top: 12px;
    }
}


/* Desktop-only bookings redesign for garage + super admin */
.bookings-section-desktop-only {
    display: block;
}
.bookings-section-mobile-only {
    display: none;
}

@media (min-width: 761px) {
    .admin-panel-page .bookings-modern-shell {
        overflow: hidden;
    }

    .admin-panel-page .bookings-modern-header {
        padding: 20px 20px 0;
    }

    .admin-panel-page .bookings-summary-strip {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 12px;
        margin: 18px 20px 0;
    }

    .admin-panel-page .bookings-summary-card {
        min-height: 88px;
        padding: 18px 20px;
        border-radius: 14px;
        border: 1px solid #dde7f4;
        display: grid;
        align-content: center;
        gap: 6px;
        background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
    }

    .admin-panel-page .bookings-summary-card span {
        font-size: 0.92rem;
        font-weight: 800;
        color: #334155;
    }

    .admin-panel-page .bookings-summary-card strong {
        font-size: 2rem;
        line-height: 1;
        color: #0f172a;
    }

    .admin-panel-page .bookings-summary-card--orange {
        background: linear-gradient(180deg, #fff6ea 0%, #ffffff 100%);
        border-color: #f5d4a6;
    }

    .admin-panel-page .bookings-summary-card--orange span {
        color: #c67a12;
    }

    .admin-panel-page .bookings-summary-card--green {
        background: linear-gradient(180deg, #eefaf2 0%, #ffffff 100%);
        border-color: #b9e4c7;
    }

    .admin-panel-page .bookings-summary-card--green span {
        color: #1e8f49;
    }

    .admin-panel-page .bookings-summary-card--blue {
        background: linear-gradient(180deg, #edf5ff 0%, #ffffff 100%);
        border-color: #bfd7fb;
    }

    .admin-panel-page .bookings-summary-card--blue span {
        color: #1d63c7;
    }

    .admin-panel-page .bookings-summary-card--slate {
        background: linear-gradient(180deg, #f6f8fb 0%, #ffffff 100%);
        border-color: #dce3ee;
    }

    .admin-panel-page .bookings-summary-card--slate span,
    .admin-panel-page .bookings-summary-card--neutral span {
        color: #475569;
    }

    .admin-panel-page .bookings-modern-toolbar {
        display: grid;
        grid-template-columns: minmax(180px, 220px) minmax(320px, 1.15fr) auto minmax(240px, 320px);
        gap: 10px;
        align-items: center;
        margin: 18px 20px 0;
    }

    .admin-panel-page .bookings-modern-toolbar--super {
        grid-template-columns: minmax(260px, 1fr) auto;
    }

    .admin-panel-page .bookings-modern-select,
    .admin-panel-page .bookings-modern-search .input,
    .admin-panel-page .bookings-modern-range input,
    .admin-panel-page .bookings-modern-filter-btn {
        min-height: 54px;
        border-radius: 14px;
    }

    .admin-panel-page .bookings-modern-select,
    .admin-panel-page .bookings-modern-search .input,
    .admin-panel-page .bookings-modern-range input {
        border: 1px solid #d7e2f0;
        background: #fff;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.03);
    }

    .admin-panel-page .bookings-modern-range {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .admin-panel-page .bookings-modern-range label {
        display: grid;
        gap: 6px;
        color: #64748b;
        font-size: 0.84rem;
        font-weight: 700;
    }

    .admin-panel-page .bookings-modern-search {
        min-width: 0;
    }

    .admin-panel-page .bookings-modern-search .input {
        width: 100%;
        padding-inline: 16px;
    }

    .admin-panel-page .bookings-modern-filter-btn {
        min-width: 118px;
        padding-inline: 22px;
        border-radius: 14px !important;
        font-weight: 800;
        box-shadow: 0 12px 24px rgba(37, 99, 235, 0.18);
    }

    .admin-panel-page .bookings-modern-table-wrap {
        margin-top: 18px;
        overflow-x: auto;
    }

    .admin-panel-page .bookings-modern-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        min-width: 980px;
    }

    .admin-panel-page .bookings-modern-table thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        padding: 18px 22px;
        background: #f8fbff;
        color: #1e293b;
        font-size: 0.9rem;
        font-weight: 800;
        border-top: 1px solid #e2e8f0;
        border-bottom: 1px solid #e2e8f0;
    }

    .admin-panel-page .bookings-modern-table thead th:first-child {
        border-left: 1px solid #e2e8f0;
        border-top-left-radius: 18px;
    }

    .admin-panel-page .bookings-modern-table thead th:last-child {
        border-right: 1px solid #e2e8f0;
        border-top-right-radius: 18px;
    }

    .admin-panel-page .bookings-modern-table tbody td {
        padding: 18px 22px;
        border-bottom: 1px solid #e8eef6;
        background: #ffffff;
        vertical-align: middle;
    }

    .admin-panel-page .bookings-modern-table tbody tr:hover td {
        background: #fbfdff;
    }

    .admin-panel-page .bookings-cell-stack {
        display: grid;
        gap: 5px;
    }

    .admin-panel-page .bookings-cell-stack strong {
        margin: 0;
        font-size: 0.98rem;
        color: #0f172a;
    }

    .admin-panel-page .bookings-cell-stack .muted {
        font-size: 0.9rem;
        color: #64748b;
    }

    .admin-panel-page .bookings-modern-table td[data-label="Status"],
    .admin-panel-page .bookings-modern-table td:last-child,
    .admin-panel-page .bookings-modern-table th:last-child,
    .admin-panel-page .bookings-modern-table th:nth-last-child(2) {
        text-align: center;
    }

    .admin-panel-page .bookings-modern-table td[data-label="Status"] .status,
    .admin-panel-page .bookings-modern-table td:nth-last-child(2) .status,
    .admin-panel-page .bookings-modern-table td:nth-last-child(2) .status-badge,
    .admin-panel-page .bookings-modern-table td:last-child .status {
        display: inline-flex;
        min-width: 126px;
        justify-content: center;
        border-radius: 999px;
        padding: 10px 18px;
        font-weight: 800;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    }

    .admin-panel-page .bookings-modern-action-form {
        justify-content: center;
        gap: 10px;
        flex-wrap: nowrap;
    }

    .admin-panel-page .bookings-row-select {
        min-width: 158px;
        min-height: 44px;
        padding: 10px 42px 10px 14px;
        border-radius: 999px;
        border: 1px solid #cfd9e8;
        background: #ffffff;
        font-weight: 700;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
    }

    .admin-panel-page .bookings-row-btn {
        min-width: 112px;
        min-height: 44px;
        padding-inline: 18px !important;
        border-radius: 999px !important;
        font-weight: 800 !important;
        box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
        justify-content: center;
    }

    .admin-panel-page .bookings-modern-table--super {
        min-width: 920px;
    }

    .admin-panel-page .bookings-modern-table--super td:last-child .bookings-row-btn {
        display: inline-flex;
    }
}

@media (max-width: 760px) {
    .bookings-section-desktop-only {
        display: none;
    }

    .bookings-section-mobile-only {
        display: block;
    }
}


/* Desktop bookings refinement: align cards, toolbar, and table without overlap */
@media (min-width: 761px) {
    .admin-panel-page .bookings-modern-shell {
        overflow: visible;
    }

    .admin-panel-page .bookings-summary-strip {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
        gap: 12px;
        margin: 18px 20px 0;
        align-items: stretch;
    }

    .admin-panel-page .bookings-summary-strip > * {
        min-width: 0;
    }

    .admin-panel-page .bookings-summary-card {
        box-sizing: border-box;
        min-width: 0;
        min-height: 94px;
        padding: 18px 18px 16px;
        border-radius: 14px;
        box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
    }

    .admin-panel-page .bookings-summary-card span {
        font-size: 0.9rem;
        line-height: 1.2;
    }

    .admin-panel-page .bookings-summary-card strong {
        font-size: 1.95rem;
    }

    .admin-panel-page .bookings-modern-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 10px;
        margin: 20px 20px 0;
    }

    .admin-panel-page .bookings-modern-toolbar > * {
        min-width: 0;
    }

    .admin-panel-page .bookings-modern-select {
        flex: 0 1 220px;
    }

    .admin-panel-page .bookings-modern-range {
        flex: 1 1 320px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .admin-panel-page .bookings-modern-range label {
        min-width: 0;
    }

    .admin-panel-page .bookings-modern-range input {
        width: 100%;
        min-width: 0;
    }

    .admin-panel-page .bookings-modern-filter-btn {
        flex: 0 0 auto;
        min-width: 118px;
        white-space: nowrap;
    }

    .admin-panel-page .bookings-modern-search {
        flex: 1 1 250px;
        min-width: 220px;
        margin-left: auto;
    }

    .admin-panel-page .bookings-modern-toolbar--super {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }

    .admin-panel-page .bookings-modern-toolbar--super .bookings-modern-search {
        flex: 1 1 280px;
        margin-left: 0;
    }

    .admin-panel-page .bookings-modern-table-wrap {
        margin: 18px 20px 0;
        overflow-x: auto;
        border-radius: 20px 20px 0 0;
    }

    .admin-panel-page .bookings-modern-table {
        min-width: 0;
        table-layout: fixed;
    }

    .admin-panel-page .bookings-modern-table thead th,
    .admin-panel-page .bookings-modern-table tbody td {
        box-sizing: border-box;
    }

    .admin-panel-page .bookings-modern-table thead th:nth-child(1),
    .admin-panel-page .bookings-modern-table tbody td:nth-child(1) { width: 15%; }

    .admin-panel-page .bookings-modern-table thead th:nth-child(2),
    .admin-panel-page .bookings-modern-table tbody td:nth-child(2) { width: 17%; }

    .admin-panel-page .bookings-modern-table thead th:nth-child(3),
    .admin-panel-page .bookings-modern-table tbody td:nth-child(3) { width: 15%; }

    .admin-panel-page .bookings-modern-table thead th:nth-child(4),
    .admin-panel-page .bookings-modern-table tbody td:nth-child(4) { width: 14%; }

    .admin-panel-page .bookings-modern-table thead th:nth-child(5),
    .admin-panel-page .bookings-modern-table tbody td:nth-child(5) { width: 12%; }

    .admin-panel-page .bookings-modern-table thead th:nth-child(6),
    .admin-panel-page .bookings-modern-table tbody td:nth-child(6) { width: 27%; }

    .admin-panel-page .bookings-modern-table thead th {
        padding: 18px 20px;
        font-size: 0.92rem;
    }

    .admin-panel-page .bookings-modern-table tbody td {
        padding: 18px 20px;
    }

    .admin-panel-page .bookings-cell-stack {
        gap: 4px;
        min-width: 0;
    }

    .admin-panel-page .bookings-cell-stack strong,
    .admin-panel-page .bookings-cell-stack .muted {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .admin-panel-page .bookings-modern-table tbody td:nth-child(1) .bookings-cell-stack strong,
    .admin-panel-page .bookings-modern-table tbody td:nth-child(3) .bookings-cell-stack strong,
    .admin-panel-page .bookings-modern-table tbody td:nth-child(4) .bookings-cell-stack strong,
    .admin-panel-page .bookings-modern-table tbody td:nth-child(4) .bookings-cell-stack .muted {
        white-space: nowrap;
    }

    .admin-panel-page .bookings-modern-table td[data-label="Status"] .status,
    .admin-panel-page .bookings-modern-table td:nth-last-child(2) .status,
    .admin-panel-page .bookings-modern-table td:nth-last-child(2) .status-badge,
    .admin-panel-page .bookings-modern-table td:last-child .status {
        min-width: 112px;
        padding: 9px 16px;
        font-size: 0.9rem;
        line-height: 1.15;
        white-space: nowrap;
    }

    .admin-panel-page .bookings-modern-action-form {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 10px;
        flex-wrap: nowrap;
        width: 100%;
    }

    .admin-panel-page .bookings-row-select {
        min-width: 136px;
        width: 136px;
        max-width: 136px;
        min-height: 42px;
        font-size: 0.92rem;
    }

    .admin-panel-page .bookings-row-btn {
        min-width: 102px;
        min-height: 42px;
        font-size: 0.92rem !important;
        white-space: nowrap;
    }

    .admin-panel-page .bookings-modern-table--super td:last-child,
    .admin-panel-page .bookings-modern-table--super th:last-child {
        width: 18%;
    }

    .admin-panel-page .bookings-modern-table--super td:nth-child(1),
    .admin-panel-page .bookings-modern-table--super th:nth-child(1) { width: 16%; }
    .admin-panel-page .bookings-modern-table--super td:nth-child(2),
    .admin-panel-page .bookings-modern-table--super th:nth-child(2) { width: 18%; }
    .admin-panel-page .bookings-modern-table--super td:nth-child(3),
    .admin-panel-page .bookings-modern-table--super th:nth-child(3) { width: 17%; }
    .admin-panel-page .bookings-modern-table--super td:nth-child(4),
    .admin-panel-page .bookings-modern-table--super th:nth-child(4) { width: 15%; }
    .admin-panel-page .bookings-modern-table--super td:nth-child(5),
    .admin-panel-page .bookings-modern-table--super th:nth-child(5) { width: 14%; }

    .admin-panel-page .bookings-modern-table--super td:last-child .bookings-row-btn {
        min-width: 108px;
    }
}

@media (min-width: 761px) and (max-width: 1180px) {
    .admin-panel-page .bookings-modern-search {
        flex: 1 1 100%;
        min-width: 0;
        margin-left: 0;
    }

    .admin-panel-page .bookings-modern-toolbar--super .bookings-modern-search {
        flex: 1 1 100%;
    }
}

/* Desktop bookings micro-fix: center summary cards and keep status/action controls clean */
@media (min-width: 761px) {
    .admin-panel-page .bookings-summary-card {
        text-align: center;
        justify-items: center;
        justify-content: center;
    }

    .admin-panel-page .bookings-summary-card span,
    .admin-panel-page .bookings-summary-card strong {
        width: 100%;
        text-align: center;
    }

    .admin-panel-page .bookings-modern-table td[data-label="Status"] {
        padding-right: 14px;
    }

    .admin-panel-page .bookings-modern-table td[data-label="Action"] {
        padding-left: 14px;
    }

    .admin-panel-page .bookings-modern-action-form {
        display: inline-grid;
        grid-auto-flow: column;
        grid-template-columns: 156px 104px;
        align-items: center;
        justify-content: center;
        gap: 12px;
        width: auto;
        max-width: 100%;
        margin: 0 auto;
    }

    .admin-panel-page .bookings-row-select {
        min-width: 156px;
        width: 156px;
        max-width: 156px;
    }

    .admin-panel-page .bookings-row-btn {
        min-width: 104px;
        width: 84px;
    }
}

/* Final desktop bookings row control fix: prevent status/action overlap */
@media (min-width: 761px) {
    .admin-panel-page .owner-bookings-table.bookings-modern-table thead th:nth-child(1),
    .admin-panel-page .owner-bookings-table.bookings-modern-table tbody td:nth-child(1) { width: 15%; }
    .admin-panel-page .owner-bookings-table.bookings-modern-table thead th:nth-child(2),
    .admin-panel-page .owner-bookings-table.bookings-modern-table tbody td:nth-child(2) { width: 16%; }
    .admin-panel-page .owner-bookings-table.bookings-modern-table thead th:nth-child(3),
    .admin-panel-page .owner-bookings-table.bookings-modern-table tbody td:nth-child(3) { width: 15%; }
    .admin-panel-page .owner-bookings-table.bookings-modern-table thead th:nth-child(4),
    .admin-panel-page .owner-bookings-table.bookings-modern-table tbody td:nth-child(4) { width: 14%; }
    .admin-panel-page .owner-bookings-table.bookings-modern-table thead th:nth-child(5),
    .admin-panel-page .owner-bookings-table.bookings-modern-table tbody td:nth-child(5) { width: 11%; }
    .admin-panel-page .owner-bookings-table.bookings-modern-table thead th:nth-child(6),
    .admin-panel-page .owner-bookings-table.bookings-modern-table tbody td:nth-child(6) { width: 29%; }

    .admin-panel-page .owner-bookings-table.bookings-modern-table td[data-label="Status"] .status,
    .admin-panel-page .owner-bookings-table.bookings-modern-table td:nth-last-child(2) .status,
    .admin-panel-page .owner-bookings-table.bookings-modern-table td:nth-last-child(2) .status-badge {
        min-width: 108px;
        padding: 9px 14px;
    }

    .admin-panel-page .owner-bookings-table.bookings-modern-table td[data-label="Action"] {
        padding-left: 16px;
    }

    .admin-panel-page .owner-bookings-table.bookings-modern-table .bookings-modern-action-form {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 6px;
        width: 100%;
        max-width: 278px;
        margin-left: auto;
    }

    .admin-panel-page .owner-bookings-table.bookings-modern-table .bookings-row-select {
        flex: 0 0 168px;
        width: 168px;
        min-width: 168px;
        max-width: 168px;
    }

    .admin-panel-page .owner-bookings-table.bookings-modern-table .bookings-row-btn {
        flex: 0 0 102px;
        width: 102px;
        min-width: 102px;
    }
}


/* Desktop bookings action autosave select only */
@media (min-width: 769px) {
    .bookings-section-desktop-only .owner-bookings-table th[data-owner-i18n="table.action"],
    .bookings-section-desktop-only .owner-bookings-table th:last-child,
    .bookings-section-desktop-only .owner-bookings-table td[data-label="Action"] {
        width: 190px;
    }

    .bookings-section-desktop-only .owner-bookings-table td[data-label="Action"] {
        text-align: center;
    }

    .bookings-section-desktop-only .booking-action-form--autosave {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 0;
    }

    .bookings-section-desktop-only .booking-action-form--autosave .bookings-row-select {
        width: 100%;
        max-width: 170px;
        min-width: 170px;
        padding-right: 38px;
        border-radius: 999px;
        text-align: left;
    }
}


/* Desktop bookings autosave action pills: colored + centered */
@media (min-width: 769px) {
    .bookings-section-desktop-only .booking-action-form--autosave .bookings-row-select {
        width: 100%;
        max-width: 176px;
        min-width: 176px;
        min-height: 40px;
        border-radius: 999px;
        text-align: center;
        text-align-last: center;
        font-weight: 700;
        padding-left: 18px;
        padding-right: 40px;
        transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    }

    .bookings-section-desktop-only .booking-action-form--autosave .bookings-row-select option {
        color: #0f172a;
        background: #ffffff;
    }

    .bookings-section-desktop-only .booking-action-form--autosave .bookings-row-select[data-booking-action-status="pending"] {
        background: #FFF3E0;
        border-color: #F6C98A;
        color: #E6951A;
    }

    .bookings-section-desktop-only .booking-action-form--autosave .bookings-row-select[data-booking-action-status="confirmed"] {
        background: #E8F1FF;
        border-color: #BFD6FF;
        color: #2563EB;
    }

    .bookings-section-desktop-only .booking-action-form--autosave .bookings-row-select[data-booking-action-status="in_progress"] {
        background: #EEF2FF;
        border-color: #C7D2FE;
        color: #4F46E5;
    }

    .bookings-section-desktop-only .booking-action-form--autosave .bookings-row-select[data-booking-action-status="completed"] {
        background: #EAF8EE;
        border-color: #B7E4C2;
        color: #16A34A;
    }

    .bookings-section-desktop-only .booking-action-form--autosave .bookings-row-select[data-booking-action-status="cancelled"] {
        background: #FDECEC;
        border-color: #F7C1C1;
        color: #DC2626;
    }
}


/* Customers desktop refresh: match bookings-style directory layout; mobile stays unchanged */
@media (max-width: 760px) {
    .admin-panel-page .customers-attachment-desktop {
        display: none !important;
    }
}

@media (min-width: 761px) {
    .admin-panel-page .customers-mobile-legacy {
        display: none !important;
    }

    .admin-panel-page .customer-directory-card {
        padding: 0 !important;
        overflow: hidden;
    }

    .admin-panel-page .customer-directory-card .customer-directory-top {
        padding: 22px 28px 0;
    }

    .admin-panel-page .customer-directory-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 20px 0 22px;
    }

    .admin-panel-page .customers-search-form {
        flex: 1 1 620px;
        max-width: 620px;
        margin: 0;
    }

    .admin-panel-page .customers-search-input {
        min-height: 48px;
        border-radius: 14px;
        border: 1px solid #d9e2ee;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
        font-size: 0.97rem;
        color: #334155;
    }

    .admin-panel-page .customers-total {
        flex: 0 0 auto;
        color: #334155;
        font-size: 0.97rem;
        white-space: nowrap;
    }

    .admin-panel-page .customers-total strong {
        color: #0f172a;
        font-weight: 800;
    }

    .admin-panel-page .customers-attachment-wrap {
        border-top: 1px solid #e7edf5;
        overflow-x: auto;
    }

    .admin-panel-page .customers-attachment-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        table-layout: fixed;
    }

    .admin-panel-page .customers-attachment-table thead th {
        padding: 16px 16px;
        font-size: 0.91rem;
        font-weight: 800;
        color: #0f172a;
        background: #f8fafc;
        border-bottom: 1px solid #e7edf5;
        text-align: left;
    }

    .admin-panel-page .customers-attachment-table tbody td {
        padding: 22px 16px;
        border-bottom: 1px solid #e7edf5;
        vertical-align: middle;
        background: #ffffff;
    }

    .admin-panel-page .customers-attachment-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .admin-panel-page .customers-attachment-table thead th:nth-child(1),
    .admin-panel-page .customers-attachment-table tbody td:nth-child(1) { width: 20%; }
    .admin-panel-page .customers-attachment-table thead th:nth-child(2),
    .admin-panel-page .customers-attachment-table tbody td:nth-child(2) { width: 22%; }
    .admin-panel-page .customers-attachment-table thead th:nth-child(3),
    .admin-panel-page .customers-attachment-table tbody td:nth-child(3) { width: 14%; }
    .admin-panel-page .customers-attachment-table thead th:nth-child(4),
    .admin-panel-page .customers-attachment-table tbody td:nth-child(4) { width: 12%; }
    .admin-panel-page .customers-attachment-table thead th:nth-child(5),
    .admin-panel-page .customers-attachment-table tbody td:nth-child(5) { width: 8%; }
    .admin-panel-page .customers-attachment-table thead th:nth-child(6),
    .admin-panel-page .customers-attachment-table tbody td:nth-child(6) { width: 24%; }

    .admin-panel-page .customer-cell {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

    .admin-panel-page .customer-avatar {
        width: 56px;
        height: 56px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        font-weight: 800;
        letter-spacing: -0.03em;
        flex: 0 0 56px;
    }

    .admin-panel-page .customer-avatar.avatar-tone-0 { background: #dbeafe; color: #2563eb; }
    .admin-panel-page .customer-avatar.avatar-tone-1 { background: #e9d5ff; color: #7c3aed; }
    .admin-panel-page .customer-avatar.avatar-tone-2 { background: #ccfbf1; color: #0f766e; }
    .admin-panel-page .customer-avatar.avatar-tone-3 { background: #fce7f3; color: #be185d; }

    .admin-panel-page .customer-main,
    .admin-panel-page .customer-detail-stack {
        display: flex;
        flex-direction: column;
        gap: 5px;
        min-width: 0;
    }

    .admin-panel-page .customer-name-link {
        color: #0f172a;
        font-size: 1rem;
        font-weight: 800;
        line-height: 1.2;
        text-decoration: none;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .admin-panel-page .customer-name-link:hover {
        color: #2563eb;
    }

    .admin-panel-page .customer-id-line,
    .admin-panel-page .customer-detail-muted,
    .admin-panel-page .customer-detail-more {
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.3;
    }

    .admin-panel-page .customer-detail-strong {
        color: #0f172a;
        font-size: 0.96rem;
        font-weight: 800;
        line-height: 1.28;
        overflow-wrap: anywhere;
    }

    .admin-panel-page .customer-detail-more {
        font-weight: 700;
    }

    .admin-panel-page .customer-status-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 80px;
        padding: 8px 14px;
        border-radius: 999px;
        font-size: 0.9rem;
        font-weight: 800;
        border: 1px solid transparent;
        white-space: nowrap;
    }

    .admin-panel-page .customer-status-pill.is-active {
        background: #dcfce7;
        border-color: #bbf7d0;
        color: #15803d;
    }

    .admin-panel-page .customer-status-pill.is-inactive {
        background: #fef3c7;
        border-color: #fde68a;
        color: #b45309;
    }

    .admin-panel-page .customer-action-row {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .admin-panel-page .customer-action-row form {
        margin: 0;
    }

    .admin-panel-page .customer-outline-btn {
        min-width: 76px;
        height: 40px;
        padding: 0 14px;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.92rem;
        font-weight: 800;
        background: #ffffff;
        text-decoration: none;
        transition: transform 0.16s ease, box-shadow 0.16s ease;
    }

    .admin-panel-page .customer-outline-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    }

    .admin-panel-page .customer-outline-btn.edit-btn {
        border: 1.5px solid #2563eb;
        color: #2563eb;
    }

    .admin-panel-page .customer-outline-btn.delete-btn {
        border: 1.5px solid #ef4444;
        color: #ef4444;
    }
}


/* ============================================================
   Customer account page aligned with booking-page color system
   Applied only to logged-in customer account dashboard
============================================================ */
.account-page .account-dashboard-v1{
    padding:20px!important;
    background:#f5f5fa;
    border:1px solid #dadde8;
    border-radius:18px;
    box-shadow:0 8px 18px rgba(55,59,93,.09)
}
.account-page .account-layout-v1{gap:24px;align-items:start}
.account-page .account-sidebar-v1,
.account-page .account-booking-board-v1,
.account-page .account-panel-v1{
    background:#fff;
    border:1.5px solid #d8dce8;
    border-radius:16px;
    box-shadow:0 4px 10px rgba(42,54,95,.07)
}
.account-page .account-sidebar-v1{padding:18px;position:sticky;top:18px}
.account-page .account-sidebar-brand{
    padding-bottom:16px;
    border-bottom:2px solid #eef1f7;
    gap:14px
}
.account-page .account-sidebar-logo{
    width:64px;
    height:64px;
    border-radius:18px;
    background:linear-gradient(100deg,#5731b9 0%,#6d34bb 38%,#3d65d8 72%,#37afe8 100%);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.4rem;
    font-weight:800;
    box-shadow:0 10px 20px rgba(61,101,216,.22)
}
.account-page .account-sidebar-label{
    color:#677aa8;
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase
}
.account-page .account-sidebar-brand strong{color:#2d447f;font-size:1.08rem}
.account-page .account-sidebar-brand small{color:#6f7ea4}
.account-page .account-sidebar-nav{gap:10px}
.account-page .account-sidebar-nav a{
    min-height:52px;
    padding:13px 14px;
    border-radius:14px;
    color:#344b79;
    background:#fff;
    border:1px solid transparent;
    box-shadow:none
}
.account-page .account-sidebar-nav a:hover,
.account-page .account-sidebar-nav a.is-active{
    background:linear-gradient(180deg,#f1eefb 0%,#e6e1f7 100%);
    color:#4b4b8d;
    border-color:#d8d1ef;
    box-shadow:0 6px 14px rgba(86,83,168,.10)
}
.account-page .account-topbar-v1{gap:14px}
.account-page .account-search-v1{
    max-width:none;
    background:#fff;
    border:1.5px solid #d8dce8;
    border-radius:12px;
    box-shadow:0 4px 10px rgba(42,54,95,.07)
}
.account-page .account-search-v1 .field-icon{color:#1f63c6}
.account-page .account-search-v1 input{color:#7a89aa}
.account-page .account-day-chip,
.account-page .account-icon-chip,
.account-page .account-header-btn{
    background:#fff;
    color:#23408e;
    border:1.5px solid #d8dce8;
    box-shadow:0 4px 10px rgba(42,54,95,.07)
}
.account-page .account-header-btn{
    min-height:46px;
    padding:10px 18px;
    border-radius:12px;
    font-weight:800
}
.account-page .account-header-btn:hover{background:#f5f8ff}
.account-page .account-hero-v1{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:24px 26px;
    border-radius:18px;
    background:
        radial-gradient(circle at 24% -16%,rgba(255,255,255,.16) 0,rgba(255,255,255,0) 30%),
        linear-gradient(100deg,#5731b9 0%,#6d34bb 38%,#3d65d8 72%,#37afe8 100%);
    box-shadow:0 14px 28px rgba(61,101,216,.20)
}
.account-page .account-hero-kicker,
.account-page .account-section-kicker{color:#6d7db3}
.account-page .account-hero-v1 .account-hero-kicker{color:rgba(255,255,255,.88)}
.account-page .account-hero-v1 .account-page-title{
    margin:0 0 8px;
    color:#fff;
    font-size:2.05rem;
    line-height:1.08
}
.account-page .account-hero-v1 .account-page-subtitle{
    max-width:680px;
    color:rgba(255,255,255,.92)
}
.account-page .account-hero-clear-btn,
.account-page .account-dashboard-v1 .btn.btn-primary,
.account-page .account-dashboard-v1 .account-submit-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:50px;
    padding:12px 22px;
    border:none;
    border-radius:14px;
    background:linear-gradient(180deg,#ffd83d 0%,#f8bf1f 100%);
    color:#17397a;
    font-weight:800;
    text-decoration:none;
    box-shadow:0 8px 16px rgba(51,61,112,.18)
}
.account-page .account-hero-clear-btn:hover,
.account-page .account-dashboard-v1 .btn.btn-primary:hover,
.account-page .account-dashboard-v1 .account-submit-btn:hover{transform:translateY(-1px)}
.account-page .account-metric-grid-v1{gap:16px}
.account-page .account-metric-card-v1{
    min-height:132px;
    padding:18px 20px;
    border-radius:14px;
    border:none;
    box-shadow:0 8px 18px rgba(55,59,93,.12)
}
.account-page .account-metric-card-v1 .account-metric-title{
    font-size:.82rem;
    letter-spacing:.08em
}
.account-page .account-metric-card-v1 strong{font-size:2rem;line-height:1.02}
.account-page .account-metric-card-v1 small{font-weight:700}
.account-page .account-metric-card-v1.tone-income{background:linear-gradient(180deg,#f6b50f 0%,#f1a908 100%);color:#fff}
.account-page .account-metric-card-v1.tone-income strong,
.account-page .account-metric-card-v1.tone-income small{color:#fff}
.account-page .account-metric-card-v1.tone-expense{background:linear-gradient(180deg,#f45a64 0%,#ef4653 100%);color:#fff}
.account-page .account-metric-card-v1.tone-expense strong,
.account-page .account-metric-card-v1.tone-expense small{color:#fff}
.account-page .account-metric-card-v1.tone-operations{background:linear-gradient(180deg,#49c93f 0%,#39bd37 100%);color:#fff}
.account-page .account-metric-card-v1.tone-operations strong,
.account-page .account-metric-card-v1.tone-operations small{color:#fff}
.account-page .account-metric-card-v1.tone-summary{
    background:linear-gradient(180deg,#f0eef9 0%,#ddd8ef 100%);
    color:#4b4b8d
}
.account-page .account-metric-card-v1.tone-summary strong,
.account-page .account-metric-card-v1.tone-summary small{color:#4b4b8d}
.account-page .account-booking-board-v1,
.account-page .account-panel-v1{padding:22px}
.account-page .account-section-head-v1 h2,
.account-page .account-section-head-v1.compact h2{color:#2d447f;font-size:1.18rem}
.account-page .account-link-chip,
.account-page .account-filter-reset-v1,
.account-page .account-inline-form-v1 .btn.btn-outline{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:10px 16px;
    border-radius:12px;
    border:1.5px solid #d8dce8;
    background:#fff;
    color:#23408e;
    font-weight:800;
    text-decoration:none;
    box-shadow:0 4px 10px rgba(42,54,95,.07)
}
.account-page .account-filter-reset-v1:hover,
.account-page .account-inline-form-v1 .btn.btn-outline:hover,
.account-page .account-link-chip:hover{background:#f5f8ff;border-color:#cfd6e6}
.account-page .account-booking-filters-v1{gap:14px;margin-bottom:14px}
.account-page .account-booking-filters-v1 .booking-field,
.account-page .account-form-v1 .booking-field{
    min-height:58px;
    border:1.5px solid #d8dce8;
    box-shadow:0 4px 10px rgba(42,54,95,.07)
}
.account-page .account-booking-filters-v1 .field-control,
.account-page .account-form-v1 .field-control{
    color:#344b79;
    font-weight:500
}
.account-page .account-table-board-v1{
    border:1px solid #e3e7f0;
    border-radius:14px;
    background:#f7f8fc
}
.account-page .account-booking-table-v1{border-spacing:0 12px}
.account-page .account-booking-table-v1 thead th{
    color:#5f73a7;
    font-size:.76rem;
    letter-spacing:.10em;
    padding:0 14px 10px
}
.account-page .account-booking-table-v1 tbody td{
    background:#fff;
    border-top:1px solid #e6eaf2;
    border-bottom:1px solid #e6eaf2;
    padding:16px 14px
}
.account-page .account-booking-table-v1 tbody td:first-child{border-left:1px solid #e6eaf2;border-radius:14px 0 0 14px}
.account-page .account-booking-table-v1 tbody td:last-child{border-right:1px solid #e6eaf2;border-radius:0 14px 14px 0}
.account-page .account-table-note-v1{color:#6a7ca6}
.account-page .account-booking-filter-feedback-v1{color:#60729d;font-weight:700}
.account-page .account-booking-filter-empty-v1{
    border:1px dashed #cfd8eb;
    border-radius:14px;
    background:#f9fbff;
    color:#60729d
}
.account-page .account-upcoming-item-v1,
.account-page .account-vehicle-row-v1,
.account-page .account-inline-list-row-v1{
    background:#fff;
    border:1.5px solid #e2e7f0;
    border-radius:14px;
    box-shadow:0 4px 10px rgba(42,54,95,.05)
}
.account-page .account-upcoming-item-v1 strong,
.account-page .account-vehicle-row-v1 strong,
.account-page .account-inline-list-row-v1 strong{color:#2d447f}
.account-page .account-upcoming-item-v1 span,
.account-page .account-vehicle-row-v1 span,
.account-page .account-inline-list-row-v1 span,
.account-page .account-upcoming-meta-v1 small{color:#6f7ea4}
.account-page .account-vehicle-thumb-v1{
    width:46px;
    height:46px;
    border-radius:14px;
    background:#eef3ff;
    color:#1f63c6;
    border:1px solid #d7e2fb
}
.account-page .account-dashboard-v1 .status,
.account-page .account-dashboard-v1 .status-badge{
    border-radius:999px;
    padding:7px 12px;
    font-weight:800;
    box-shadow:none
}
.account-page .account-content-grid-v1,
.account-page .account-bottom-grid-v1{gap:24px}
.account-page .account-vehicle-form-panel-v1 .account-inline-list-v1{margin-top:16px}
@media (max-width:1180px){
    .account-page .account-layout-v1{grid-template-columns:1fr}
    .account-page .account-sidebar-v1{position:relative;top:auto}
    .account-page .account-content-grid-v1{grid-template-columns:1fr}
}
@media (max-width:768px){
    .account-page .account-dashboard-v1{padding:16px!important;border-radius:16px}
    .account-page .account-sidebar-v1,
    .account-page .account-booking-board-v1,
    .account-page .account-panel-v1,
    .account-page .account-metric-card-v1{border-radius:14px}
    .account-page .account-hero-v1{padding:18px 16px;border-radius:16px}
    .account-page .account-hero-v1 .account-page-title{font-size:1.6rem}
    .account-page .account-topbar-v1,
    .account-page .account-hero-v1,
    .account-page .account-upcoming-item-v1,
    .account-page .account-inline-list-row-v1{flex-direction:column;align-items:flex-start}
    .account-page .account-topbar-actions,
    .account-page .account-topbar-actions form,
    .account-page .account-topbar-actions .account-header-btn,
    .account-page .account-hero-clear-btn,
    .account-page .account-link-chip,
    .account-page .account-filter-reset-v1,
    .account-page .account-inline-form-v1,
    .account-page .account-inline-form-v1 .btn,
    .account-page .account-dashboard-v1 .btn.btn-primary,
    .account-page .account-dashboard-v1 .account-submit-btn{width:100%}
    .account-page .account-search-v1{width:100%}
    .account-page .account-metric-grid-v1,
    .account-page .account-booking-filters-v1,
    .account-page .account-form-grid-v1,
    .account-page .account-bottom-grid-v1{grid-template-columns:1fr}
    .account-page .account-booking-table-v1{min-width:640px}
}


/* ============================================================
   Logged-in customer account section mobile refinement only
   Scope: customer account page only
============================================================ */
@media (max-width: 768px) {
    .account-page .account-layout-v1 {
        gap: 12px;
    }

    .account-page .account-sidebar-v1,
    .account-page .account-booking-board-v1,
    .account-page .account-panel-v1 {
        padding: 16px;
    }

    .account-page .account-sidebar-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .account-page .account-sidebar-nav a {
        min-height: 54px;
        padding: 10px 8px;
        font-size: 0.82rem;
        line-height: 1.15;
    }

    .account-page .account-topbar-v1 {
        gap: 12px;
    }

    .account-page .account-topbar-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        width: 100%;
    }

    .account-page .account-topbar-actions > *,
    .account-page .account-topbar-actions form,
    .account-page .account-topbar-actions form > * {
        width: 100%;
    }

    .account-page .account-day-chip,
    .account-page .account-icon-chip,
    .account-page .account-header-btn,
    .account-page .account-hero-clear-btn {
        justify-content: center;
    }

    .account-page .account-hero-v1 {
        gap: 10px;
    }

    .account-page .account-hero-v1 .account-page-title {
        font-size: 1.45rem;
    }

    .account-page .account-booking-filters-v1,
    .account-page .account-form-grid-v1,
    .account-page .account-bottom-grid-v1,
    .account-page .account-content-grid-v1 {
        grid-template-columns: 1fr;
    }

    .account-page .account-table-board-v1 {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .account-page .account-booking-table-v1 {
        min-width: 0 !important;
        width: 100%;
        border-spacing: 0;
    }

    .account-page .account-booking-table-v1 thead {
        display: none;
    }

    .account-page .account-booking-table-v1,
    .account-page .account-booking-table-v1 tbody,
    .account-page .account-booking-table-v1 tr,
    .account-page .account-booking-table-v1 td {
        display: block;
        width: 100%;
    }

    .account-page .account-booking-table-v1 tbody {
        display: grid;
        gap: 10px;
    }

    .account-page .account-booking-table-v1 tr {
        background: #ffffff;
        border: 1px solid #e6eaf2;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 6px 16px rgba(42, 54, 95, 0.06);
    }

    .account-page .account-booking-table-v1 tbody td,
    .account-page .account-booking-table-v1 tbody td:first-child,
    .account-page .account-booking-table-v1 tbody td:last-child {
        border: 0;
        border-radius: 0;
        padding: 10px 12px;
        background: transparent;
        word-break: break-word;
    }

    .account-page .account-booking-table-v1 tbody td + td {
        border-top: 1px solid #eef2f7;
    }

    .account-page .account-booking-table-v1 tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 3px;
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #60729d;
    }

    .account-page .account-booking-table-v1 tbody td:first-child {
        padding-top: 12px;
    }

    .account-page .account-booking-table-v1 tbody td:last-child {
        padding-bottom: 12px;
    }

    .account-page .account-table-note-v1 {
        display: block;
        margin-top: 4px;
        line-height: 1.35;
    }

    .account-page .account-upcoming-item-v1,
    .account-page .account-inline-list-row-v1,
    .account-page .account-vehicle-row-v1 {
        gap: 10px;
    }
}

@media (max-width: 560px) {
    .account-page .account-sidebar-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-page .account-topbar-actions {
        grid-template-columns: 1fr;
    }

    .account-page .account-metric-grid-v1 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .account-page .account-metric-card-v1 {
        min-height: 112px;
        padding: 14px;
    }

    .account-page .account-metric-card-v1 strong {
        font-size: 1.45rem;
    }

    .account-page .account-booking-board-v1,
    .account-page .account-panel-v1,
    .account-page .account-sidebar-v1 {
        padding: 14px;
    }
}

@media (max-width: 380px) {
    .account-page .account-metric-grid-v1,
    .account-page .account-sidebar-nav {
        grid-template-columns: 1fr;
    }
}


/* Customer account mobile booking cards: labels left, content right only */
@media (max-width: 860px) {
    .account-page .account-booking-table-v1 tbody {
        gap: 10px;
    }
    .account-page .account-booking-table-v1 tr {
        border-radius: 14px;
    }
    .account-page .account-booking-table-v1 tbody td,
    .account-page .account-booking-table-v1 tbody td:first-child,
    .account-page .account-booking-table-v1 tbody td:last-child {
        display: grid;
        grid-template-columns: minmax(96px, 112px) minmax(0, 1fr);
        align-items: start;
        gap: 6px 12px;
        padding: 10px 14px;
    }
    .account-page .account-booking-table-v1 tbody td::before {
        margin: 0;
        align-self: center;
        line-height: 1.25;
    }
    .account-page .account-booking-table-v1 tbody td > * {
        grid-column: 2;
        min-width: 0;
    }
    .account-page .account-booking-table-v1 tbody td strong,
    .account-page .account-booking-table-v1 tbody td .status,
    .account-page .account-booking-table-v1 tbody td .nowrap-inline {
        align-self: start;
    }
    .account-page .account-booking-table-v1 tbody td .status {
        justify-self: start;
    }
    .account-page .account-table-note-v1 {
        margin-top: 2px;
        font-size: .82rem;
        line-height: 1.35;
    }
}

@media (max-width: 560px) {
    .account-page .account-booking-table-v1 tbody td,
    .account-page .account-booking-table-v1 tbody td:first-child,
    .account-page .account-booking-table-v1 tbody td:last-child {
        grid-template-columns: minmax(86px, 98px) minmax(0, 1fr);
        gap: 6px 10px;
        padding: 9px 12px;
    }
    .account-page .account-booking-table-v1 tbody td::before {
        font-size: .68rem;
    }
}

/* Customer account mobile booking labels: same font family and size as values only */
@media (max-width: 860px) {
    .account-page .account-booking-table-v1 tbody td::before {
        font-family: inherit;
        font-size: inherit;
    }
}

@media (max-width: 560px) {
    .account-page .account-booking-table-v1 tbody td::before {
        font-family: inherit;
        font-size: inherit;
    }
}


/* Mobile only: account shortcuts 2-column + colored nav tiles similar to booking page */
@media (max-width: 560px) {
    .account-page .account-topbar-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        width: 100%;
    }

    .account-page .account-topbar-actions > *,
    .account-page .account-topbar-actions form,
    .account-page .account-topbar-actions form > * {
        width: 100%;
    }

    .account-page .account-day-chip,
    .account-page .account-icon-chip,
    .account-page .account-header-btn {
        min-height: 52px;
        justify-content: center;
    }

    .account-page .account-sidebar-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .account-page .account-sidebar-nav a {
        min-height: 104px;
        padding: 14px 10px;
        border-radius: 14px;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 10px;
        border: 1px solid transparent;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    }

    .account-page .account-sidebar-nav a svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
    }

    .account-page .account-sidebar-nav a span {
        font-weight: 800;
    }

    .account-page .account-sidebar-nav a:nth-child(1) {
        background: linear-gradient(135deg, rgba(247, 181, 0, 0.18), rgba(247, 181, 0, 0.10));
        border-color: rgba(247, 181, 0, 0.26);
        color: #b56d00;
    }

    .account-page .account-sidebar-nav a:nth-child(2) {
        background: linear-gradient(135deg, rgba(244, 78, 99, 0.16), rgba(244, 78, 99, 0.10));
        border-color: rgba(244, 78, 99, 0.22);
        color: #c23b4d;
    }

    .account-page .account-sidebar-nav a:nth-child(3) {
        background: linear-gradient(135deg, rgba(76, 201, 87, 0.18), rgba(76, 201, 87, 0.10));
        border-color: rgba(76, 201, 87, 0.24);
        color: #259238;
    }

    .account-page .account-sidebar-nav a:nth-child(4) {
        background: linear-gradient(135deg, rgba(141, 77, 232, 0.16), rgba(141, 77, 232, 0.10));
        border-color: rgba(141, 77, 232, 0.22);
        color: #6f42c1;
    }

    .account-page .account-sidebar-nav a:hover,
    .account-page .account-sidebar-nav a.is-active {
        transform: none;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    }
}

/* Mobile only: hide Today, calendar, and shield chips in customer account topbar */
@media (max-width: 560px) {
    .account-page .account-day-chip,
    .account-page .account-icon-chip {
        display: none !important;
    }

    .account-page .account-topbar-actions form {
        grid-column: 1 / -1;
    }
}


/* Desktop only: customer account topbar keep only Sign Out button */
@media (min-width: 769px) {
    .account-page .account-search-v1,
    .account-page .account-day-chip,
    .account-page .account-icon-chip {
        display: none !important;
    }

    .account-page .account-topbar-v1 {
        justify-content: flex-end;
    }

    .account-page .account-topbar-actions {
        width: auto;
        margin-left: auto;
    }
}


/* Desktop only: move customer account sign out button into left sidebar */
.account-page .account-sidebar-logout-v1 {
    display: none;
}

@media (min-width: 769px) {
    .account-page .account-topbar-v1 {
        display: none !important;
    }

    .account-page .account-sidebar-logout-v1 {
        display: block;
        margin-top: 2px;
    }

    .account-page .account-sidebar-logout-v1 form,
    .account-page .account-sidebar-logout-v1 .account-sidebar-logout-btn-v1 {
        width: 100%;
    }

    .account-page .account-sidebar-logout-v1 .account-sidebar-logout-btn-v1 {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .account-page .account-sidebar-logout-v1 {
        display: none !important;
    }
}


/* Desktop only: keep customer account nav centered, reduce nav row height, and move Back to Top to floating right side */
.account-page .account-sidebar-backtotop-v1 {
    display: none !important;
}

@media (min-width: 769px) {
    .account-page .account-sidebar-nav {
        gap: 6px;
    }

    .account-page .account-sidebar-nav a {
        justify-content: center;
        text-align: center;
        min-height: 56px;
        padding: 8px 10px;
        gap: 6px;
    }

    .account-page .account-back-to-top-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        position: fixed;
        right: 24px;
        bottom: 24px;
        z-index: 999;
        border: 0;
        border-radius: 999px;
        padding: 12px 16px;
        background: #142c63;
        color: #fff;
        font-size: .76rem;
        font-weight: 800;
        line-height: 1;
        box-shadow: 0 12px 26px rgba(20,44,99,.28);
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    }

    .account-page .account-back-to-top-btn.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .account-page .account-sidebar-backtotop-v1 {
        display: none !important;
    }
}


/* ============================================================
   Logged-in customer account booking table desktop fit refinement only
   Scope: customer account page only, desktop only
============================================================ */
@media (min-width: 769px) {
    .account-page #accountBookings .account-table-board-v1 {
        overflow-x: hidden;
    }

    .account-page #accountBookings .account-booking-table-v1 {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
    }

    .account-page #accountBookings .account-booking-table-v1 thead th {
        padding: 0 10px 8px;
        font-size: 0.72rem;
    }

    .account-page #accountBookings .account-booking-table-v1 tbody td {
        padding: 14px 10px;
        font-size: 0.92rem;
    }

    .account-page #accountBookings .account-booking-table-v1 th:nth-child(1),
    .account-page #accountBookings .account-booking-table-v1 td:nth-child(1) {
        width: 20%;
    }

    .account-page #accountBookings .account-booking-table-v1 th:nth-child(2),
    .account-page #accountBookings .account-booking-table-v1 td:nth-child(2) {
        width: 17%;
    }

    .account-page #accountBookings .account-booking-table-v1 th:nth-child(3),
    .account-page #accountBookings .account-booking-table-v1 td:nth-child(3) {
        width: 16%;
    }

    .account-page #accountBookings .account-booking-table-v1 th:nth-child(4),
    .account-page #accountBookings .account-booking-table-v1 td:nth-child(4) {
        width: 17%;
    }

    .account-page #accountBookings .account-booking-table-v1 th:nth-child(5),
    .account-page #accountBookings .account-booking-table-v1 td:nth-child(5) {
        width: 18%;
    }

    .account-page #accountBookings .account-booking-table-v1 th:nth-child(6),
    .account-page #accountBookings .account-booking-table-v1 td:nth-child(6) {
        width: 12%;
    }

    .account-page #accountBookings .account-booking-table-v1 td:nth-child(1),
    .account-page #accountBookings .account-booking-table-v1 td:nth-child(2) {
        overflow-wrap: anywhere;
    }

    .account-page #accountBookings .account-booking-table-v1 td:nth-child(4),
    .account-page #accountBookings .account-booking-table-v1 td:nth-child(5),
    .account-page #accountBookings .account-booking-table-v1 td:nth-child(6) {
        white-space: nowrap;
    }

    .account-page #accountBookings .account-booking-table-v1 th:nth-child(3),
    .account-page #accountBookings .account-booking-table-v1 td:nth-child(3) {
        padding-right: 18px;
    }

    .account-page #accountBookings .account-booking-table-v1 th:nth-child(4),
    .account-page #accountBookings .account-booking-table-v1 td:nth-child(4) {
        padding-left: 18px;
    }

    .account-page #accountBookings .account-booking-table-v1 th:nth-child(5),
    .account-page #accountBookings .account-booking-table-v1 td:nth-child(5) {
        padding-left: 16px;
        padding-right: 16px;
        text-align: center;
        font-weight: 600;
    }

    .account-page #accountBookings .account-booking-table-v1 th:nth-child(6),
    .account-page #accountBookings .account-booking-table-v1 td:nth-child(6) {
        padding-left: 12px;
        text-align: center;
        font-weight: 700;
        color: #334155;
        font-variant-numeric: tabular-nums;
    }
}


/* Mobile-only booking history collapse toggle (customer account only) */
.account-booking-mobile-toggle-wrap-v1{display:none;margin-top:14px}
.account-booking-mobile-toggle-v1{
    appearance:none;
    border:1px solid #d7dfea;
    background:#fff;
    color:#1f4aa8;
    border-radius:999px;
    padding:12px 18px;
    font-weight:700;
    font-size:.95rem;
    line-height:1.2;
    box-shadow:0 10px 24px rgba(15,23,42,.08);
    cursor:pointer;
}
.account-booking-mobile-toggle-v1:hover{transform:translateY(-1px)}
@media (max-width: 900px){
    .account-page .account-booking-mobile-toggle-wrap-v1{display:flex;justify-content:center}
    .account-page .account-booking-table-v1 tr.booking-row-mobile-hidden{display:none!important}
}

.booking-confirmation-download-inline i { color: inherit; }

/* Monochrome booking confirmation theme */
.booking-confirmation-hero {
    background:
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.10), transparent 24%),
        linear-gradient(135deg, #111111 0%, #1a1a1a 48%, #2a2a2a 100%);
}
.booking-confirmation-hero::after {
    background-image:
        radial-gradient(circle, rgba(255,255,255,.95) 0 3px, transparent 3.6px),
        radial-gradient(circle, rgba(210,210,210,.95) 0 3px, transparent 3.6px),
        radial-gradient(circle, rgba(245,245,245,.92) 0 3px, transparent 3.6px),
        radial-gradient(circle, rgba(180,180,180,.92) 0 3px, transparent 3.6px),
        radial-gradient(circle, rgba(255,255,255,.92) 0 3px, transparent 3.6px),
        radial-gradient(circle, rgba(205,205,205,.9) 0 3px, transparent 3.6px);
}
.booking-confirmation-pill {
    background: rgba(255,255,255,0.12);
    color: #ffffff;
    border-color: rgba(255,255,255,0.18);
}
.booking-confirmation-item,
.booking-confirmation-item-name,
.booking-confirmation-item-vehicle,
.booking-confirmation-item-datetime,
.booking-confirmation-item-reference,
.booking-confirmation-item-service,
.booking-confirmation-item-status,
.booking-confirmation-item-reminder {
    background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%);
    border: 1px solid rgba(17, 17, 17, 0.08);
    box-shadow: 0 10px 22px rgba(17, 17, 17, 0.06);
}
.booking-confirmation-item span {
    color: #5b6472;
}
.booking-confirmation-item strong {
    color: #111111;
}
.booking-confirmation-icon-user,
.booking-confirmation-icon-plate,
.booking-confirmation-icon-calendar,
.booking-confirmation-icon-note,
.booking-confirmation-icon-service,
.booking-confirmation-icon-status,
.booking-confirmation-icon-reminder {
    background: #f3f4f6;
    color: #111111;
}
.booking-confirmation-status {
    background: #111111;
    color: #ffffff;
}
.booking-confirmation-download-inline {
    background: #111111 !important;
    color: #ffffff !important;
    border-color: #111111 !important;
    box-shadow: 0 12px 24px rgba(17, 17, 17, 0.16);
}

/* White cards with black text, keep colored icons */
.booking-confirmation-item,
.booking-confirmation-item-name,
.booking-confirmation-item-vehicle,
.booking-confirmation-item-datetime,
.booking-confirmation-item-reference,
.booking-confirmation-item-service,
.booking-confirmation-item-status,
.booking-confirmation-item-reminder {
    background: #ffffff;
    border: 1px solid rgba(17, 17, 17, 0.08);
    box-shadow: 0 10px 22px rgba(17, 17, 17, 0.05);
}
.booking-confirmation-item span,
.booking-confirmation-item strong,
.booking-confirmation-item-reminder strong,
.booking-confirmation-item-service strong {
    color: #111111;
}
.booking-confirmation-icon-user { background: #e7ddff; color: #6d28d9; }
.booking-confirmation-icon-plate { background: #dbeafe; color: #2563eb; }
.booking-confirmation-icon-calendar { background: #e7ddff; color: #6d28d9; }
.booking-confirmation-icon-note { background: #dbeafe; color: #2563eb; }
.booking-confirmation-icon-service { background: #e7ddff; color: #6d28d9; }
.booking-confirmation-icon-status { background: #dbeafe; color: #2563eb; }
.booking-confirmation-icon-reminder { background: #e7ddff; color: #6d28d9; }
.booking-confirmation-status {
    background: #f3f4f6;
    color: #111111;
}

/* Final booking confirmation card + button adjustments */
.booking-confirmation-item,
.booking-confirmation-item-name,
.booking-confirmation-item-vehicle,
.booking-confirmation-item-datetime,
.booking-confirmation-item-reference,
.booking-confirmation-item-service,
.booking-confirmation-item-status,
.booking-confirmation-item-reminder {
    background: #ffffff;
}
.booking-confirmation-item span,
.booking-confirmation-item strong,
.booking-confirmation-item-reminder strong,
.booking-confirmation-item-service strong {
    color: #111111;
}
.booking-confirmation-download-inline {
    min-width: 0;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    border-radius: 24px;
}
.booking-confirmation-download-inline span {
    display: inline-block;
}
@media (max-width: 680px) {
    .booking-confirmation-card {
        padding: 12px;
        border-radius: 20px;
    }
    .booking-confirmation-hero {
        padding: 18px 16px 22px;
        border-radius: 24px;
    }
    .booking-confirmation-copy h2 {
        font-size: 1.9rem;
        line-height: 1.12;
    }
    .booking-confirmation-grid {
        gap: 10px;
    }
    .booking-confirmation-item {
        padding: 14px 15px;
    }
    .booking-confirmation-download-inline {
        width: 100%;
        min-height: 58px;
        justify-content: center;
        text-align: center;
        font-size: .98rem;
        padding: 14px 16px;
    }
}

/* Restore original booking hero colors */
.booking-confirmation-hero {
    background:
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.30), transparent 24%),
        linear-gradient(135deg, #6422bd 0%, #3753d6 42%, #1697ea 100%);
}
.booking-confirmation-hero::after {
    background-image:
        radial-gradient(circle, rgba(255,206,84,.95) 0 3px, transparent 3.6px),
        radial-gradient(circle, rgba(34,211,238,.95) 0 3px, transparent 3.6px),
        radial-gradient(circle, rgba(244,114,182,.92) 0 3px, transparent 3.6px),
        radial-gradient(circle, rgba(74,222,128,.92) 0 3px, transparent 3.6px),
        radial-gradient(circle, rgba(250,204,21,.92) 0 3px, transparent 3.6px),
        radial-gradient(circle, rgba(192,132,252,.9) 0 3px, transparent 3.6px);
}
.booking-confirmation-pill {
    background: rgba(255,255,255,0.14);
    color: #ffffff;
    border-color: rgba(255,255,255,0.18);
}


.booking-calendar-field { position: relative; }
.booking-calendar-trigger {
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid rgba(31, 42, 68, 0.12);
  border-radius: 14px;
  min-height: 58px;
  padding: 0 16px 0 52px;
  font: inherit;
  color: #1f2a44;
  cursor: pointer;
}
.booking-calendar-trigger.is-placeholder { color: #6f7c96; }
.booking-calendar-popup {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  width: min(340px, 100%);
  background: #fff;
  border: 1px solid rgba(31, 42, 68, 0.12);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(24, 39, 75, 0.16);
  padding: 14px;
}
.booking-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.booking-calendar-header strong { font-size: 15px; color: #1f2a44; }
.booking-calendar-nav {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 999px;
  background: #eef3fb;
  color: #3558d4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.booking-calendar-nav svg { width: 16px; height: 16px; }
.booking-calendar-nav-next svg { transform: rotate(180deg); }
.booking-calendar-weekdays, .booking-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.booking-calendar-weekdays { margin-bottom: 8px; }
.booking-calendar-weekday { text-align: center; font-size: 12px; font-weight: 700; color: #6f7c96; padding: 4px 0; }
.booking-calendar-day, .booking-calendar-empty { height: 40px; }
.booking-calendar-day {
  border: none;
  border-radius: 12px;
  background: #f5f7fc;
  color: #1f2a44;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.booking-calendar-day:hover:not(:disabled) { background: #e7efff; }
.booking-calendar-day.is-selected { background: linear-gradient(135deg, #5f2dd0, #1fa0f2); color: #fff; }
.booking-calendar-day.is-disabled { background: #f5f7fc; color: #b3bdd0; cursor: not-allowed; }
.booking-calendar-day.is-today { box-shadow: inset 0 0 0 2px rgba(53, 88, 212, 0.2); }
@media (max-width: 768px) {
  .booking-calendar-popup { width: 100%; }
}

/* Booking confirmation refresh */
.booking-confirmation-card {
    margin: 14px 0 24px;
    padding: 24px;
    border-radius: 36px;
    background:
        radial-gradient(circle at top left, rgba(255,255,255,0.92), rgba(255,255,255,0) 32%),
        linear-gradient(180deg, #eef4ff 0%, #f7f9ff 44%, #eef2ff 100%);
    border: 1px solid rgba(129, 140, 248, 0.16);
    box-shadow: 0 24px 60px rgba(43, 71, 140, 0.14);
}
.booking-confirmation-card::before {
    background:
        radial-gradient(circle at 12% 10%, rgba(124, 58, 237, 0.14), transparent 24%),
        radial-gradient(circle at 88% 18%, rgba(14, 165, 233, 0.16), transparent 22%),
        radial-gradient(circle at 50% 100%, rgba(99, 102, 241, 0.10), transparent 30%);
}
.booking-confirmation-hero {
    grid-template-columns: minmax(0, 1.3fr) minmax(240px, 0.7fr);
    gap: 22px;
    padding: 32px 30px 92px;
    border-radius: 34px;
    background:
        radial-gradient(circle at 18% 12%, rgba(255,255,255,0.18), transparent 20%),
        radial-gradient(circle at 82% 18%, rgba(255,255,255,0.24), transparent 22%),
        linear-gradient(135deg, #5b21b6 0%, #3748db 42%, #0ea5e9 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.22),
        0 28px 60px rgba(37, 99, 235, 0.22);
}
.booking-confirmation-copy h2 {
    max-width: 11ch;
    margin: 16px 0 12px;
    font-size: clamp(2.35rem, 3vw, 3.25rem);
    line-height: 0.98;
}
.booking-confirmation-copy p {
    max-width: 54ch;
    font-size: 1.02rem;
    color: rgba(255, 255, 255, 0.92);
}
.booking-confirmation-kicker {
    padding: 10px 18px;
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.booking-confirmation-visual {
    min-height: 210px;
}
.booking-confirmation-checkmark {
    width: 136px;
    height: 136px;
    border-width: 9px;
    background: linear-gradient(180deg, #4ade80 0%, #2563eb 100%);
    box-shadow: 0 24px 50px rgba(14, 165, 233, 0.22), 0 0 0 10px rgba(255,255,255,0.08);
}
.booking-confirmation-rings {
    inset: 2px;
    border: 2px dashed rgba(255,255,255,0.30);
}
.booking-confirmation-grid {
    gap: 16px;
    margin-top: 18px;
}
.booking-confirmation-grid-primary {
    margin-top: -56px;
}
.booking-confirmation-grid-secondary {
    grid-template-columns: 1.15fr 0.74fr 1.3fr minmax(220px, 0.78fr);
}
.booking-confirmation-item,
.booking-confirmation-item-name,
.booking-confirmation-item-vehicle,
.booking-confirmation-item-datetime,
.booking-confirmation-item-reference,
.booking-confirmation-item-service,
.booking-confirmation-item-status,
.booking-confirmation-item-reminder {
    position: relative;
    overflow: hidden;
    align-items: flex-start;
    min-height: 112px;
    padding: 18px 18px 18px 20px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255,255,255,0.6);
    box-shadow:
        0 18px 34px rgba(76, 98, 146, 0.12),
        inset 0 1px 0 rgba(255,255,255,0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.booking-confirmation-item::before {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, rgba(99,102,241,0.9), rgba(14,165,233,0.9));
    opacity: 0.9;
}
.booking-confirmation-item:hover {
    transform: translateY(-2px);
    box-shadow:
        0 24px 38px rgba(76, 98, 146, 0.16),
        inset 0 1px 0 rgba(255,255,255,0.9);
    border-color: rgba(165, 180, 252, 0.46);
}
.booking-confirmation-item span {
    margin-bottom: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #66748f;
}
.booking-confirmation-item strong {
    font-size: 1.26rem;
    line-height: 1.3;
    color: #0f172a;
}
.booking-confirmation-item-reminder strong {
    font-size: 1.02rem;
    line-height: 1.5;
    font-weight: 700;
    color: #1e293b;
}
.booking-confirmation-item-reference strong {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    letter-spacing: -0.02em;
}
.booking-confirmation-item-status strong {
    margin-top: 2px;
}
.booking-confirmation-icon {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}
.booking-confirmation-icon-user { background: linear-gradient(180deg, #ede9fe 0%, #ddd6fe 100%); color: #6d28d9; }
.booking-confirmation-icon-plate { background: linear-gradient(180deg, #e0f2fe 0%, #dbeafe 100%); color: #2563eb; }
.booking-confirmation-icon-calendar { background: linear-gradient(180deg, #ede9fe 0%, #ddd6fe 100%); color: #6d28d9; }
.booking-confirmation-icon-note { background: linear-gradient(180deg, #e0f2fe 0%, #dbeafe 100%); color: #2563eb; }
.booking-confirmation-icon-service { background: linear-gradient(180deg, #ede9fe 0%, #ddd6fe 100%); color: #6d28d9; }
.booking-confirmation-icon-status { background: linear-gradient(180deg, #e0f2fe 0%, #dbeafe 100%); color: #2563eb; }
.booking-confirmation-icon-reminder { background: linear-gradient(180deg, #ede9fe 0%, #ddd6fe 100%); color: #6d28d9; }
.booking-confirmation-status {
    padding: 8px 14px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #1d4ed8;
    border: 1px solid rgba(59, 130, 246, 0.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}
.booking-confirmation-cta-slot {
    display: flex;
    min-height: 112px;
}
.booking-confirmation-download-inline {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-width: 0;
    border-radius: 26px;
    background: linear-gradient(135deg, #0f172a 0%, #111827 42%, #2563eb 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 20px 36px rgba(15, 23, 42, 0.24);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.booking-confirmation-download-inline::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.12) 35%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.45s ease;
}
.booking-confirmation-download-inline:hover,
.booking-confirmation-download-inline:focus {
    transform: translateY(-2px);
    box-shadow: 0 26px 42px rgba(15, 23, 42, 0.28);
    filter: saturate(1.05);
}
.booking-confirmation-download-inline:hover::before,
.booking-confirmation-download-inline:focus::before {
    transform: translateX(120%);
}
.booking-confirmation-download-inline span {
    position: relative;
    z-index: 1;
}
.booking-confirmation-download-inline i {
    position: relative;
    z-index: 1;
    font-size: 1rem;
}
@media (max-width: 1120px) {
    .booking-confirmation-grid-primary,
    .booking-confirmation-grid-secondary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .booking-confirmation-grid-primary {
        margin-top: -36px;
    }
    .booking-confirmation-cta-slot {
        min-height: 72px;
    }
}
@media (max-width: 680px) {
    .booking-confirmation-card {
        padding: 14px;
        border-radius: 24px;
    }
    .booking-confirmation-hero {
        padding: 22px 18px 28px;
        border-radius: 26px;
        gap: 10px;
    }
    .booking-confirmation-copy h2 {
        max-width: none;
        font-size: 2rem;
    }
    .booking-confirmation-visual {
        min-height: 130px;
    }
    .booking-confirmation-checkmark {
        width: 98px;
        height: 98px;
        border-width: 7px;
        font-size: 2rem;
    }
    .booking-confirmation-grid {
        gap: 12px;
    }
    .booking-confirmation-grid-primary {
        margin-top: 12px;
    }
    .booking-confirmation-item,
    .booking-confirmation-item-name,
    .booking-confirmation-item-vehicle,
    .booking-confirmation-item-datetime,
    .booking-confirmation-item-reference,
    .booking-confirmation-item-service,
    .booking-confirmation-item-status,
    .booking-confirmation-item-reminder {
        min-height: 0;
        padding: 16px;
        border-radius: 22px;
    }
    .booking-confirmation-icon {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
        border-radius: 16px;
    }
    .booking-confirmation-item strong {
        font-size: 1.08rem;
    }
    .booking-confirmation-item-reminder strong {
        font-size: 0.98rem;
    }
    .booking-confirmation-download-inline {
        min-height: 62px;
        border-radius: 22px;
    }
}

/* Dashboard-aligned booking confirmation */
.booking-confirmation-card {
    position: relative;
    max-width: 1080px;
    margin: 18px auto 26px;
    padding: 18px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(191, 201, 226, 0.78);
    box-shadow: 0 12px 30px rgba(40, 62, 122, 0.10);
}
.booking-confirmation-card::before {
    display: none;
}
.booking-confirmation-hero,
.booking-confirmation-grid,
.booking-confirmation-cta-slot {
    position: relative;
    z-index: 1;
}
.booking-confirmation-hero {
    grid-template-columns: minmax(0, 1.35fr) minmax(180px, 0.65fr);
    gap: 16px;
    align-items: center;
    padding: 24px 24px 22px;
    min-height: 174px;
    border-radius: 18px;
    background: linear-gradient(90deg, #6f28ce 0%, #4b4fd7 50%, #309de3 100%);
    box-shadow: none;
}
.booking-confirmation-hero::before {
    background:
        radial-gradient(circle at 75% 24%, rgba(255,255,255,0.16), transparent 20%),
        linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 100%);
}
.booking-confirmation-hero::after {
    background-image:
        radial-gradient(circle, rgba(255,206,84,.92) 0 3px, transparent 3.6px),
        radial-gradient(circle, rgba(34,211,238,.92) 0 3px, transparent 3.6px),
        radial-gradient(circle, rgba(244,114,182,.9) 0 3px, transparent 3.6px),
        radial-gradient(circle, rgba(74,222,128,.9) 0 3px, transparent 3.6px),
        radial-gradient(circle, rgba(250,204,21,.88) 0 3px, transparent 3.6px),
        radial-gradient(circle, rgba(192,132,252,.88) 0 3px, transparent 3.6px);
    opacity: .85;
}
.booking-confirmation-copy h2 {
    max-width: 14ch;
    margin: 12px 0 10px;
    font-size: clamp(2rem, 2.8vw, 3rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: #ffffff;
}
.booking-confirmation-copy p {
    max-width: 48ch;
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.92);
}
.booking-confirmation-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.22);
    color: #ffffff;
    box-shadow: none;
}
.booking-confirmation-visual {
    min-height: 128px;
}
.booking-confirmation-checkmark {
    width: 104px;
    height: 104px;
    border: 8px solid rgba(255,255,255,0.72);
    background: linear-gradient(180deg, #46d28d 0%, #247ee7 100%);
    box-shadow: none;
}
.booking-confirmation-rings {
    inset: 0;
    border-width: 2px;
    border-style: dashed;
    border-color: rgba(255,255,255,0.28);
}
.booking-confirmation-grid {
    gap: 14px;
}
.booking-confirmation-grid-primary {
    margin-top: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.booking-confirmation-grid-secondary {
    margin-top: 14px;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(220px, 0.9fr);
    align-items: stretch;
}
.booking-confirmation-item,
.booking-confirmation-item-name,
.booking-confirmation-item-vehicle,
.booking-confirmation-item-datetime,
.booking-confirmation-item-reference,
.booking-confirmation-item-service,
.booking-confirmation-item-status,
.booking-confirmation-item-reminder {
    min-height: 0;
    padding: 18px 18px 18px 16px;
    border-radius: 18px;
    background: #f6f5ff;
    border: 1px solid #dde3f3;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: hidden;
}
.booking-confirmation-item::before {
    display: none;
}
.booking-confirmation-item:hover {
    transform: none;
    box-shadow: none;
    border-color: #d6ddee;
}
.booking-confirmation-item span {
    margin-bottom: 6px;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7081ab;
}
.booking-confirmation-item strong {
    font-size: 0.98rem;
    line-height: 1.32;
    color: #20386f;
}
.booking-confirmation-item-name strong,
.booking-confirmation-item-vehicle strong,
.booking-confirmation-item-datetime strong,
.booking-confirmation-item-reference strong,
.booking-confirmation-item-service strong {
    font-size: 0.98rem;
    font-weight: 800;
}
.booking-confirmation-item-reference strong {
    font-family: inherit;
    letter-spacing: 0;
}
.booking-confirmation-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 16px;
    box-shadow: none;
}
.booking-confirmation-icon-user { background: #dceaff; color: #2e9b74; }
.booking-confirmation-icon-plate { background: #dceaff; color: #53657e; }
.booking-confirmation-icon-calendar { background: #e7ddff; color: #3d72d6; }
.booking-confirmation-icon-note { background: #dceaff; color: #536fb8; }
.booking-confirmation-icon-service { background: #f5e2d0; color: #ea8a13; }
.booking-confirmation-icon-status { background: #d9f3e4; color: #13a353; }
.booking-confirmation-icon-reminder { display: none; }
.booking-confirmation-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    min-width: 92px;
    border-radius: 999px;
    background: linear-gradient(180deg, #46c26e 0%, #14915d 100%);
    color: #ffffff;
    border: none;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.12);
}
.booking-confirmation-item-service,
.booking-confirmation-item-status {
    background: #ffffff;
    border-color: #d6ddee;
    box-shadow: 0 6px 18px rgba(40, 62, 122, 0.06);
}
.booking-confirmation-item-reminder {
    grid-column: 1 / 3;
    padding: 14px 8px 6px;
    border: none;
    border-top: 1px solid #d6ddee;
    border-radius: 0;
    background: transparent;
}
.booking-confirmation-item-reminder span {
    display: none;
}
.booking-confirmation-item-reminder strong {
    display: block;
    font-size: 0.98rem;
    line-height: 1.5;
    font-weight: 500;
    color: #5069a4;
}
.booking-confirmation-cta-slot {
    grid-column: 3;
    grid-row: 1 / span 2;
    display: flex;
    align-items: flex-end;
    min-height: 100%;
}
.booking-confirmation-download-inline {
    width: 100%;
    min-height: 72px;
    border-radius: 18px;
    background: #ffca28 !important;
    color: #173a88 !important;
    border: 1px solid #e9b019 !important;
    box-shadow: inset 0 -6px 0 rgba(173, 114, 10, 0.18);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0;
    justify-content: center;
}
.booking-confirmation-download-inline::before {
    display: none;
}
.booking-confirmation-download-inline:hover,
.booking-confirmation-download-inline:focus {
    transform: translateY(-1px);
    filter: brightness(1.02);
    box-shadow: inset 0 -6px 0 rgba(173, 114, 10, 0.18), 0 8px 18px rgba(229, 180, 35, 0.24);
}
.booking-confirmation-download-inline i,
.booking-confirmation-download-inline span {
    position: static;
    z-index: auto;
}
@media (max-width: 1120px) {
    .booking-confirmation-grid-primary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .booking-confirmation-grid-secondary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .booking-confirmation-item-reminder {
        grid-column: 1 / -1;
    }
    .booking-confirmation-cta-slot {
        grid-column: 1 / -1;
        grid-row: auto;
        min-height: auto;
    }
}
@media (max-width: 680px) {
    .booking-confirmation-card {
        margin: 12px auto 22px;
        padding: 12px;
        border-radius: 18px;
    }
    .booking-confirmation-hero {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 18px 16px;
        border-radius: 16px;
    }
    .booking-confirmation-copy h2 {
        max-width: none;
        font-size: 1.9rem;
    }
    .booking-confirmation-copy p {
        font-size: 0.96rem;
    }
    .booking-confirmation-visual {
        display: none;
    }
    .booking-confirmation-grid-primary,
    .booking-confirmation-grid-secondary {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .booking-confirmation-item,
    .booking-confirmation-item-name,
    .booking-confirmation-item-vehicle,
    .booking-confirmation-item-datetime,
    .booking-confirmation-item-reference,
    .booking-confirmation-item-service,
    .booking-confirmation-item-status,
    .booking-confirmation-item-reminder {
        padding: 14px;
        border-radius: 16px;
    }
    .booking-confirmation-item-reminder {
        padding: 8px 2px 0;
        border-radius: 0;
    }
    .booking-confirmation-cta-slot {
        grid-column: auto;
        width: 100%;
    }
    .booking-confirmation-download-inline {
        min-height: 58px;
        border-radius: 16px;
        font-size: 1rem;
    }
}

/* Booking confirmation refinement */
.booking-confirmation-card {
    max-width: 980px;
    padding: 14px;
    border-radius: 22px;
}
.booking-confirmation-hero {
    grid-template-columns: minmax(0, 1.55fr) 170px;
    gap: 10px 20px;
    min-height: 0;
    padding: 20px 22px;
    border-radius: 16px;
}
.booking-confirmation-copy h2 {
    max-width: 18ch;
    margin: 10px 0 8px;
    font-size: clamp(1.9rem, 2.15vw, 2.65rem);
}
.booking-confirmation-copy p {
    max-width: 52ch;
    font-size: 0.98rem;
}
.booking-confirmation-kicker {
    padding: 8px 14px;
    font-size: 0.78rem;
}
.booking-confirmation-visual {
    min-height: 108px;
}
.booking-confirmation-checkmark {
    width: 88px;
    height: 88px;
    border-width: 7px;
}
.booking-confirmation-grid {
    gap: 12px;
}
.booking-confirmation-grid-primary,
.booking-confirmation-grid-secondary {
    margin-top: 12px;
}
.booking-confirmation-item,
.booking-confirmation-item-name,
.booking-confirmation-item-vehicle,
.booking-confirmation-item-datetime,
.booking-confirmation-item-reference,
.booking-confirmation-item-service,
.booking-confirmation-item-status,
.booking-confirmation-item-reminder {
    padding: 16px;
    border-radius: 16px;
}
.booking-confirmation-item span {
    font-size: 0.72rem;
}
.booking-confirmation-item strong {
    font-size: 1rem;
}
.booking-confirmation-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 14px;
}
.booking-confirmation-item-reminder {
    padding-top: 12px;
}
.booking-confirmation-item-reminder strong {
    font-size: 0.94rem;
}
.booking-confirmation-download-inline {
    min-height: 68px;
    border-radius: 16px;
    font-size: 1rem;
}
@media (max-width: 980px) {
    .booking-confirmation-card {
        max-width: 100%;
    }
    .booking-confirmation-hero {
        grid-template-columns: 1fr;
        padding: 18px 18px;
    }
    .booking-confirmation-copy h2 {
        max-width: 22ch;
        font-size: 2rem;
    }
    .booking-confirmation-copy p {
        max-width: none;
    }
    .booking-confirmation-visual {
        display: none;
    }
    .booking-confirmation-grid-primary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .booking-confirmation-grid-secondary {
        grid-template-columns: 1fr 1fr;
    }
    .booking-confirmation-item-reminder {
        grid-column: 1 / -1;
    }
    .booking-confirmation-cta-slot {
        grid-column: 1 / -1;
        grid-row: auto;
        min-height: auto;
    }
}
@media (max-width: 640px) {
    .booking-confirmation-card {
        padding: 10px;
        border-radius: 18px;
    }
    .booking-confirmation-hero {
        padding: 16px 14px;
        border-radius: 14px;
    }
    .booking-confirmation-copy h2 {
        max-width: none;
        font-size: 1.72rem;
        line-height: 1.08;
    }
    .booking-confirmation-copy p {
        font-size: 0.93rem;
        line-height: 1.48;
    }
    .booking-confirmation-grid-primary,
    .booking-confirmation-grid-secondary {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .booking-confirmation-item,
    .booking-confirmation-item-name,
    .booking-confirmation-item-vehicle,
    .booking-confirmation-item-datetime,
    .booking-confirmation-item-reference,
    .booking-confirmation-item-service,
    .booking-confirmation-item-status,
    .booking-confirmation-item-reminder {
        padding: 14px;
        border-radius: 14px;
    }
    .booking-confirmation-item-reminder {
        padding-top: 10px;
    }
    .booking-confirmation-download-inline {
        min-height: 56px;
        width: 100%;
    }
}

/* Booking confirmation final polish */
.booking-confirmation-hero {
    grid-template-columns: minmax(0, 1fr) 124px;
    gap: 12px;
    align-items: center;
    padding: 18px 22px;
}
.booking-confirmation-copy {
    max-width: none;
}
.booking-confirmation-copy h2 {
    max-width: none;
    margin: 10px 0 8px;
    font-size: clamp(1.7rem, 1.05rem + 1.8vw, 2.7rem);
    line-height: 1.04;
    letter-spacing: -0.045em;
    text-wrap: balance;
}
.booking-confirmation-copy p {
    max-width: 46ch;
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.5;
}
.booking-confirmation-visual {
    min-height: 96px;
}
.booking-confirmation-checkmark {
    width: 78px;
    height: 78px;
}
.booking-confirmation-rings {
    transform: scale(.88);
}
.booking-confirmation-grid-primary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.booking-confirmation-grid-secondary {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 240px;
}
.booking-confirmation-item-name strong,
.booking-confirmation-item-vehicle strong,
.booking-confirmation-item-datetime strong,
.booking-confirmation-item-reference strong,
.booking-confirmation-item-service strong {
    font-size: 1.02rem;
}
.booking-confirmation-status {
    min-width: 106px;
}
.booking-confirmation-download-inline {
    min-height: 72px;
}
@media (max-width: 980px) {
    .booking-confirmation-hero {
        grid-template-columns: 1fr;
        padding: 18px;
    }
    .booking-confirmation-copy h2 {
        font-size: 1.92rem;
        text-wrap: pretty;
    }
    .booking-confirmation-copy p {
        max-width: none;
    }
    .booking-confirmation-visual {
        display: none;
    }
    .booking-confirmation-grid-primary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .booking-confirmation-grid-secondary {
        grid-template-columns: 1fr;
    }
    .booking-confirmation-item-reminder,
    .booking-confirmation-cta-slot {
        grid-column: auto;
        grid-row: auto;
    }
}
@media (max-width: 640px) {
    .booking-confirmation-copy h2 {
        font-size: 1.58rem;
    }
    .booking-confirmation-grid-primary {
        grid-template-columns: 1fr;
    }
    .booking-confirmation-download-inline {
        min-height: 56px;
    }
}

/* Exact booking confirmation mockup */
.booking-confirmation-exact-hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.booking-confirmation-exact-hero-copy {
    min-width: 0;
    flex: 1 1 620px;
}
.booking-confirmation-exact-hero-visual {
    position: relative;
    flex: 0 0 300px;
    min-height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    isolation: isolate;
}
.booking-confirmation-exact-hero-orb {
    position: relative;
    width: 188px;
    height: 188px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 34% 28%, rgba(88,255,210,0.98) 0%, rgba(42,205,199,0.9) 18%, rgba(24,124,255,0.95) 58%, rgba(60,76,222,0.98) 100%);
    box-shadow: 0 24px 40px rgba(24, 56, 138, 0.22), inset 0 -12px 24px rgba(29, 54, 154, 0.18);
    z-index: 2;
}
.booking-confirmation-exact-hero-orb::before,
.booking-confirmation-exact-hero-orb::after {
    content: '';
    position: absolute;
    border-radius: 50%;
}
.booking-confirmation-exact-hero-orb::before {
    inset: -7px;
    background: linear-gradient(135deg, rgba(255,255,255,0.96) 4%, rgba(255,223,139,0.94) 22%, rgba(255,147,245,0.85) 48%, rgba(155,255,221,0.92) 78%, rgba(255,255,255,0.9) 100%);
    filter: blur(0.5px);
    z-index: -2;
}
.booking-confirmation-exact-hero-orb::after {
    inset: 10px;
    background: radial-gradient(circle at 35% 28%, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.06) 26%, rgba(255,255,255,0) 55%);
    border: 1px solid rgba(255,255,255,0.14);
    z-index: -1;
}
.booking-confirmation-exact-hero-orb i {
    font-size: 4.7rem;
    color: #fff;
    text-shadow: 0 12px 24px rgba(21, 40, 118, 0.24);
    filter: drop-shadow(0 6px 10px rgba(21, 40, 118, 0.14));
}
.booking-confirmation-exact-hero-confetti {
    position: absolute;
    display: block;
    border-radius: 999px;
    opacity: 0.95;
    z-index: 1;
    box-shadow: 0 10px 18px rgba(17, 36, 112, 0.12);
}
.booking-confirmation-exact-hero-confetti-1 {
    top: 18px;
    left: 38px;
    width: 12px;
    height: 30px;
    background: linear-gradient(180deg, #d5c6ff 0%, #9f8cff 100%);
    transform: rotate(-38deg);
}
.booking-confirmation-exact-hero-confetti-2 {
    top: 58px;
    left: 16px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2fe182;
}
.booking-confirmation-exact-hero-confetti-3 {
    top: 28px;
    right: 18px;
    width: 12px;
    height: 28px;
    background: linear-gradient(180deg, #ffd94c 0%, #ffb11a 100%);
    transform: rotate(26deg);
}
.booking-confirmation-exact-hero-confetti-4 {
    right: 26px;
    bottom: 42px;
    width: 16px;
    height: 16px;
    border-radius: 6px;
    background: linear-gradient(180deg, #7ad3ff 0%, #37b7ff 100%);
    transform: rotate(-22deg);
}
.booking-confirmation-exact-hero-confetti-5 {
    left: 54px;
    bottom: 24px;
    width: 30px;
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(180deg, #ff8ac9 0%, #ff6da8 100%);
    transform: rotate(34deg);
}
.booking-confirmation-exact-hero-confetti-6 {
    top: 90px;
    right: 40px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #86efac;
}

@media (max-width: 1180px) {
    .booking-confirmation-exact-hero-visual {
        flex-basis: 220px;
        min-height: 132px;
    }
    .booking-confirmation-exact-hero-orb {
        width: 154px;
        height: 154px;
    }
    .booking-confirmation-exact-hero-orb i {
        font-size: 3.8rem;
    }
    .booking-confirmation-exact-hero-confetti-1,
    .booking-confirmation-exact-hero-confetti-3 {
        height: 24px;
    }
}
@media (max-width: 720px) {
    .booking-confirmation-exact-hero-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    .booking-confirmation-exact-hero-copy {
        flex: 0 1 auto;
    }
    .booking-confirmation-exact-hero-visual {
        display: none;
    }
}
.booking-confirmation-exact {
    max-width: 1330px;
    margin: 22px auto 26px;
}
.booking-confirmation-exact-hero {
    padding: 28px 30px 26px;
    border-radius: 22px;
    background: linear-gradient(90deg, #5d38d4 0%, #4651d8 52%, #39a0ea 100%);
    box-shadow: 0 16px 38px rgba(51, 76, 146, 0.12);
}
.booking-confirmation-exact-kicker {
    display: inline-flex;
    align-items: center;
    padding: 10px 30px;
    border-radius: 999px;
    border: 1.5px solid rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.06);
    color: #fff;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.booking-confirmation-exact-hero h2 {
    margin: 26px 0 18px;
    max-width: 22ch;
    color: #fff;
    font-size: clamp(2.15rem, 1.2rem + 2vw, 3.85rem);
    line-height: 1.08;
    letter-spacing: -0.04em;
    text-shadow: 0 3px 10px rgba(24, 28, 84, 0.28);
}
.booking-confirmation-exact-hero p {
    max-width: 33ch;
    margin: 0;
    color: rgba(255,255,255,0.95);
    font-size: 0.98rem;
    line-height: 1.58;
}
.booking-confirmation-exact-body {
    margin-top: 12px;
    padding: 18px 18px 20px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #d6dff1;
    box-shadow: 0 8px 24px rgba(53, 71, 124, 0.08);
}
.booking-confirmation-exact-top {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.booking-confirmation-exact-info-card,
.booking-confirmation-exact-feature-card {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
    border-radius: 18px;
    border: 1px solid #dfe4f3;
    background: #f7f6ff;
}
.booking-confirmation-exact-info-card {
    min-height: 112px;
    padding: 18px 20px;
}
.booking-confirmation-exact-info-icon,
.booking-confirmation-exact-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.booking-confirmation-exact-info-icon {
    width: 74px;
    height: 74px;
}
.booking-confirmation-exact-info-icon .icon-svg,
.booking-confirmation-exact-feature-icon .icon-svg,
.booking-confirmation-exact-feature-icon i {
    display: inline-flex;
    width: 54px;
    height: 54px;
    align-items: center;
    justify-content: center;
}
.booking-confirmation-exact-info-icon-user { color: #1eaf73; }
.booking-confirmation-exact-info-icon-plate { color: #5f7b97; }
.booking-confirmation-exact-info-icon-calendar { color: #2462cb; }
.booking-confirmation-exact-info-icon-note { color: #5873ba; }
.booking-confirmation-exact-info-copy,
.booking-confirmation-exact-feature-copy {
    min-width: 0;
    flex: 1;
}
.booking-confirmation-exact-info-copy span,
.booking-confirmation-exact-feature-heading span {
    display: block;
    color: #4a69b0;
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.2;
}
.booking-confirmation-exact-info-copy strong,
.booking-confirmation-exact-feature-copy strong {
    display: block;
    margin-top: 8px;
    color: #15367c;
    font-size: 1.12rem;
    font-weight: 800;
    line-height: 1.32;
}
.booking-confirmation-exact-info-copy strong span + span {
    margin-left: 0.18em;
}
.booking-confirmation-exact-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 400px;
    gap: 16px;
    align-items: end;
    margin-top: 20px;
}
.booking-confirmation-exact-feature-card {
    min-height: 144px;
    padding: 16px 18px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(68, 81, 130, 0.08);
}
.booking-confirmation-exact-feature-icon .icon-svg,
.booking-confirmation-exact-feature-icon i {
    width: 78px;
    height: 78px;
    border-radius: 50%;
}
.booking-confirmation-exact-feature-icon-service .icon-svg {
    padding: 16px;
    background: #fde7cf;
    color: #ef9305;
}
.booking-confirmation-exact-feature-icon-status i {
    font-size: 2.3rem;
    background: linear-gradient(180deg, #54d57d 0%, #129a56 100%);
    color: #fff;
}
.booking-confirmation-exact-feature-heading {
    display: flex;
    align-items: center;
    gap: 14px;
}
.booking-confirmation-exact-feature-heading b {
    flex: 1 1 auto;
    height: 1px;
    background: #d7dff1;
}
.booking-confirmation-exact-status-row {
    margin-top: 12px;
}
.booking-confirmation-exact-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 126px;
    padding: 8px 18px;
    border-radius: 999px;
    background: linear-gradient(180deg, #40cf73 0%, #149a57 100%);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}
.booking-confirmation-exact-feature-copy p {
    margin: 14px 0 0;
    color: #32549b;
    font-size: 0.88rem;
    line-height: 1.45;
}
.booking-confirmation-exact-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 76px;
    padding: 16px 26px;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffd640 0%, #f8c82c 100%);
    box-shadow: inset 0 -6px 0 rgba(177, 121, 20, 0.28);
    border: 2px solid #efb927;
    color: #083797;
    font-size: 1.06rem;
    font-weight: 900;
    text-decoration: none;
}
.booking-confirmation-exact-action:hover,
.booking-confirmation-exact-action:focus {
    color: #083797;
    transform: translateY(-1px);
}
.booking-confirmation-exact-note {
    margin: 22px 16px 0;
    padding: 0 0 14px;
    border-bottom: 1px solid #d7deef;
    color: #4a69b0;
    font-size: 0.94rem;
    line-height: 1.45;
}
@media (max-width: 1180px) {
    .booking-confirmation-exact-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .booking-confirmation-exact-bottom {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .booking-confirmation-exact-action {
        grid-column: 1 / -1;
    }
}
@media (max-width: 720px) {
    .booking-confirmation-exact {
        margin: 14px auto 20px;
    }
    .booking-confirmation-exact-hero {
        padding: 20px 18px;
        border-radius: 18px;
    }
    .booking-confirmation-exact-kicker {
        padding: 9px 20px;
    }
    .booking-confirmation-exact-hero h2 {
        margin: 18px 0 12px;
        max-width: none;
        font-size: 1.86rem;
    }
    .booking-confirmation-exact-hero p {
        max-width: none;
        font-size: 0.94rem;
    }
    .booking-confirmation-exact-body {
        padding: 14px;
        border-radius: 16px;
    }
    .booking-confirmation-exact-top,
    .booking-confirmation-exact-bottom {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .booking-confirmation-exact-info-card,
    .booking-confirmation-exact-feature-card {
        min-height: 0;
        padding: 14px 16px;
        gap: 14px;
        border-radius: 16px;
    }
    .booking-confirmation-exact-info-icon {
        width: 58px;
        height: 58px;
    }
    .booking-confirmation-exact-info-icon .icon-svg,
    .booking-confirmation-exact-feature-icon .icon-svg,
    .booking-confirmation-exact-feature-icon i {
        width: 44px;
        height: 44px;
    }
    .booking-confirmation-exact-feature-icon .icon-svg,
    .booking-confirmation-exact-feature-icon i {
        width: 62px;
        height: 62px;
    }
    .booking-confirmation-exact-action {
        min-height: 58px;
        font-size: 1rem;
    }
    .booking-confirmation-exact-note {
        margin: 18px 6px 0;
        padding-bottom: 10px;
    }
}

/* Exact confirmation small adjustments */
.booking-confirmation-exact-hero h2 {
    max-width: none;
    white-space: nowrap;
    font-size: clamp(1.9rem, 1rem + 1.55vw, 3rem);
}
.booking-confirmation-exact-bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.booking-confirmation-exact-feature-icon-service i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: #fde7cf;
    color: #ef9305;
    font-size: 2.1rem;
}
.booking-confirmation-exact-action {
    display: none !important;
}
@media (max-width: 1180px) {
    .booking-confirmation-exact-hero h2 {
        white-space: normal;
        font-size: 2.35rem;
    }
}
@media (max-width: 720px) {
    .booking-confirmation-exact-hero h2 {
        white-space: normal;
        font-size: 1.62rem;
    }
    .booking-confirmation-exact-bottom {
        grid-template-columns: 1fr;
    }
    .booking-confirmation-exact-feature-icon-service i {
        width: 62px;
        height: 62px;
        font-size: 1.7rem;
    }
}

/* Exact confirmation layout refinements */
.booking-confirmation-exact-hero p {
    max-width: 50ch;
    font-size: 1rem;
    text-wrap: balance;
}
.booking-confirmation-exact-top {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.booking-confirmation-exact-bottom {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
}
.booking-confirmation-exact-info-copy strong {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.2rem;
}
.booking-confirmation-exact-info-copy strong span {
    white-space: nowrap;
}
.booking-confirmation-exact-info-card-datetime strong {
    font-size: 1.1rem;
}
.booking-confirmation-exact-info-card-reference {
    min-height: 144px;
    padding: 18px 20px;
    background: #f7f6ff;
}
@media (max-width: 1180px) {
    .booking-confirmation-exact-top,
    .booking-confirmation-exact-bottom {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 720px) {
    .booking-confirmation-exact-hero p {
        max-width: none;
        text-wrap: pretty;
    }
    .booking-confirmation-exact-top,
    .booking-confirmation-exact-bottom {
        grid-template-columns: 1fr;
    }
    .booking-confirmation-exact-info-copy strong {
        flex-wrap: wrap;
    }
}

/* Exact confirmation compact spacing */
.booking-confirmation-exact-hero {
    padding: 22px 26px 20px;
}
.booking-confirmation-exact-hero h2 {
    margin: 18px 0 12px;
}
.booking-confirmation-exact-hero p {
    max-width: none;
    font-size: 1rem;
    line-height: 1.55;
}
.booking-confirmation-exact-body {
    padding: 14px 14px 16px;
}
.booking-confirmation-exact-info-card {
    min-height: 96px;
    padding: 14px 18px;
}
.booking-confirmation-exact-feature-card,
.booking-confirmation-exact-info-card-reference {
    min-height: 116px;
    padding: 14px 18px;
}
.booking-confirmation-exact-note {
    margin: 16px 10px 0;
    padding-bottom: 10px;
}
.booking-confirmation-exact-info-card-datetime strong,
.booking-confirmation-exact-info-card-datetime strong span {
    font-weight: 800;
    color: #15367c;
}
@media (max-width: 720px) {
    .booking-confirmation-exact-hero {
        padding: 18px 16px;
    }
    .booking-confirmation-exact-hero h2 {
        margin: 14px 0 10px;
    }
    .booking-confirmation-exact-hero p {
        max-width: none;
        font-size: 0.94rem;
    }
    .booking-confirmation-exact-body {
        padding: 12px;
    }
    .booking-confirmation-exact-info-card,
    .booking-confirmation-exact-feature-card,
    .booking-confirmation-exact-info-card-reference {
        min-height: 0;
        padding: 13px 14px;
    }
}

/* Match date/time value size with vehicle plate */
.booking-confirmation-exact-info-card-datetime strong,
.booking-confirmation-exact-info-card-datetime strong span {
    font-size: 1.12rem;
    line-height: 1.32;
}

/* Reduce second row height */
.booking-confirmation-exact-feature-card,
.booking-confirmation-exact-info-card-reference {
    min-height: 96px;
    padding: 12px 18px;
}
.booking-confirmation-exact-feature-icon .icon-svg,
.booking-confirmation-exact-feature-icon i,
.booking-confirmation-exact-feature-icon-service i {
    width: 64px;
    height: 64px;
}
.booking-confirmation-exact-feature-icon-status i {
    font-size: 1.95rem;
}
.booking-confirmation-exact-feature-copy p {
    margin-top: 8px;
}
@media (max-width: 720px) {
    .booking-confirmation-exact-feature-card,
    .booking-confirmation-exact-info-card-reference {
        min-height: 0;
        padding: 12px 14px;
    }
    .booking-confirmation-exact-feature-icon .icon-svg,
    .booking-confirmation-exact-feature-icon i,
    .booking-confirmation-exact-feature-icon-service i {
        width: 56px;
        height: 56px;
    }
}

/* Booking confirmation responsive sizing + top spacing fix */
.booking-confirmation-exact {
    width: 100%;
    max-width: 100%;
    margin: 0 0 18px;
}
.booking-confirmation-exact-hero,
.booking-confirmation-exact-body {
    width: 100%;
}
.booking-confirmation-exact-hero {
    padding: clamp(18px, 2vw, 24px) clamp(16px, 2.2vw, 26px);
}
.booking-confirmation-exact-hero h2 {
    margin: 14px 0 10px;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: clamp(1.8rem, 1.15rem + 1.8vw, 3rem);
}
.booking-confirmation-exact-hero p {
    max-width: min(100%, 56ch);
}
.booking-confirmation-exact-top {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.booking-confirmation-exact-bottom {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
}
.booking-confirmation-exact-info-card,
.booking-confirmation-exact-feature-card,
.booking-confirmation-exact-info-card-reference {
    min-width: 0;
}
.booking-confirmation-exact-info-copy strong,
.booking-confirmation-exact-feature-copy strong,
.booking-confirmation-exact-info-card-datetime strong {
    flex-wrap: wrap;
    overflow-wrap: anywhere;
}
@media (max-width: 1180px) {
    .booking-confirmation-exact-top,
    .booking-confirmation-exact-bottom {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 720px) {
    .booking-confirmation-exact {
        margin: 0 0 14px;
    }
    .booking-confirmation-exact-hero {
        padding: 18px 16px;
        border-radius: 18px;
    }
    .booking-confirmation-exact-hero h2 {
        font-size: 1.62rem;
    }
    .booking-confirmation-exact-body {
        padding: 12px;
    }
    .booking-confirmation-exact-top,
    .booking-confirmation-exact-bottom {
        grid-template-columns: 1fr;
    }
}

/* Booking confirmation desktop compact fit */
@media (min-width: 721px) {
    .booking-confirmation-exact {
        margin: 0 0 12px;
    }
    .booking-confirmation-exact-hero {
        padding: 16px 24px 18px;
    }
    .booking-confirmation-exact-kicker {
        padding: 8px 22px;
        font-size: 0.72rem;
    }
    .booking-confirmation-exact-hero h2 {
        margin: 12px 0 8px;
        font-size: clamp(1.72rem, 1.1rem + 1.45vw, 2.7rem);
        line-height: 1.04;
    }
    .booking-confirmation-exact-hero p {
        font-size: 0.95rem;
        line-height: 1.42;
    }
    .booking-confirmation-exact-body {
        margin-top: 10px;
        padding: 12px 12px 10px;
    }
    .booking-confirmation-exact-top,
    .booking-confirmation-exact-bottom {
        gap: 12px;
    }
    .booking-confirmation-exact-bottom {
        margin-top: 12px;
    }
    .booking-confirmation-exact-info-card,
    .booking-confirmation-exact-feature-card,
    .booking-confirmation-exact-info-card-reference {
        min-height: 84px;
        padding: 12px 16px;
        gap: 12px;
    }
    .booking-confirmation-exact-info-icon {
        width: 52px;
        height: 52px;
    }
    .booking-confirmation-exact-info-icon .icon-svg {
        width: 40px;
        height: 40px;
    }
    .booking-confirmation-exact-feature-icon .icon-svg,
    .booking-confirmation-exact-feature-icon i,
    .booking-confirmation-exact-feature-icon-service i {
        width: 52px;
        height: 52px;
    }
    .booking-confirmation-exact-feature-icon-status i,
    .booking-confirmation-exact-feature-icon-service i {
        font-size: 1.55rem;
    }
    .booking-confirmation-exact-info-copy span,
    .booking-confirmation-exact-feature-heading span {
        font-size: 0.8rem;
    }
    .booking-confirmation-exact-info-copy strong,
    .booking-confirmation-exact-feature-copy strong,
    .booking-confirmation-exact-info-card-datetime strong,
    .booking-confirmation-exact-info-card-datetime strong span {
        margin-top: 4px;
        font-size: 1rem;
        line-height: 1.2;
    }
    .booking-confirmation-exact-feature-heading {
        gap: 10px;
    }
    .booking-confirmation-exact-status-row {
        margin-top: 8px;
    }
    .booking-confirmation-exact-status-badge {
        min-width: 104px;
        padding: 6px 14px;
        font-size: 0.74rem;
    }
    .booking-confirmation-exact-feature-copy p {
        margin-top: 6px;
        font-size: 0.84rem;
        line-height: 1.34;
    }
    .booking-confirmation-exact-note {
        margin: 12px 10px 0;
        padding-bottom: 8px;
        font-size: 0.9rem;
        line-height: 1.35;
    }
}

/* Booking confirmation note removal + stronger mobile responsiveness */
.booking-confirmation-exact-note {
    display: none !important;
}
@media (max-width: 720px) {
    .booking-confirmation-exact {
        margin: 0 0 12px;
    }
    .booking-confirmation-exact-hero {
        padding: 16px 14px;
        border-radius: 16px;
    }
    .booking-confirmation-exact-kicker {
        padding: 8px 16px;
        font-size: 0.68rem;
    }
    .booking-confirmation-exact-hero h2 {
        margin: 12px 0 8px;
        font-size: clamp(1.42rem, 6.8vw, 1.72rem);
        line-height: 1.12;
    }
    .booking-confirmation-exact-hero p {
        font-size: 0.92rem;
        line-height: 1.48;
    }
    .booking-confirmation-exact-body {
        margin-top: 10px;
        padding: 10px;
        border-radius: 14px;
    }
    .booking-confirmation-exact-top,
    .booking-confirmation-exact-bottom {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .booking-confirmation-exact-bottom {
        margin-top: 10px;
    }
    .booking-confirmation-exact-info-card,
    .booking-confirmation-exact-feature-card,
    .booking-confirmation-exact-info-card-reference {
        min-height: 0;
        padding: 12px 13px;
        gap: 12px;
        border-radius: 14px;
    }
    .booking-confirmation-exact-info-icon {
        width: 46px;
        height: 46px;
    }
    .booking-confirmation-exact-info-icon .icon-svg {
        width: 34px;
        height: 34px;
    }
    .booking-confirmation-exact-feature-icon .icon-svg,
    .booking-confirmation-exact-feature-icon i,
    .booking-confirmation-exact-feature-icon-service i {
        width: 50px;
        height: 50px;
    }
    .booking-confirmation-exact-feature-icon-status i,
    .booking-confirmation-exact-feature-icon-service i {
        font-size: 1.45rem;
    }
    .booking-confirmation-exact-info-copy span,
    .booking-confirmation-exact-feature-heading span {
        font-size: 0.78rem;
    }
    .booking-confirmation-exact-info-copy strong,
    .booking-confirmation-exact-feature-copy strong,
    .booking-confirmation-exact-info-card-datetime strong,
    .booking-confirmation-exact-info-card-datetime strong span {
        margin-top: 4px;
        font-size: 0.98rem;
        line-height: 1.24;
    }
    .booking-confirmation-exact-feature-heading {
        gap: 8px;
    }
    .booking-confirmation-exact-status-row {
        margin-top: 6px;
    }
    .booking-confirmation-exact-status-badge {
        min-width: 96px;
        padding: 6px 12px;
        font-size: 0.72rem;
    }
    .booking-confirmation-exact-feature-copy p {
        margin-top: 6px;
        font-size: 0.82rem;
        line-height: 1.4;
    }
}
@media (max-width: 420px) {
    .booking-confirmation-exact-hero {
        padding: 14px 12px;
    }
    .booking-confirmation-exact-body {
        padding: 9px;
    }
    .booking-confirmation-exact-info-card,
    .booking-confirmation-exact-feature-card,
    .booking-confirmation-exact-info-card-reference {
        padding: 11px 12px;
    }
    .booking-confirmation-exact-feature-heading b {
        display: none;
    }
}

/* Targeted mobile fixes: booking confirmation + customer dashboard */
@media (max-width: 560px) {
    .booking-confirmation-exact {
        margin: 18px auto 22px;
    }

    .booking-confirmation-exact-hero {
        padding: 18px 16px 20px;
    }

    .booking-confirmation-exact-hero-inner,
    .booking-confirmation-exact-hero-copy {
        width: 100%;
        align-items: stretch;
    }

    .booking-confirmation-exact-hero-copy h2,
    .booking-confirmation-exact-hero-copy p {
        max-width: none;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .account-page #accountOverview.account-hero-v1 {
        padding: 16px !important;
        gap: 12px;
        align-items: stretch;
    }

    .account-page .account-hero-copy-v1 {
        width: 100%;
        min-width: 0;
    }

    .account-page .account-hero-v1 .account-page-title {
        width: 100%;
        max-width: none !important;
        font-size: clamp(1.18rem, 6.1vw, 1.48rem);
        line-height: 1.18;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .account-page .account-hero-v1 .account-page-subtitle,
    .account-page .account-sidebar-nav a span,
    .account-page .account-metric-card-v1 small {
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal;
    }

    .account-page .account-sidebar-nav a,
    .account-page .account-metric-card-v1 {
        min-width: 0;
    }
}

/* Super Admin tenant billing/dashboard refinements */
.dashboard-stat-card.dashboard-stat-card-centered {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.dashboard-stat-card.dashboard-stat-card-centered .dashboard-stat-head {
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.dashboard-stat-card.dashboard-stat-card-centered .dashboard-stat-value {
    width: 100%;
    text-align: center;
}
.tenant-link-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.tenant-link-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    min-height: 32px;
    padding: 7px 14px;
    border-radius: 999px;
    color: #fff;
    font-size: .84rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .12);
}
.tenant-link-pill.public { background: linear-gradient(135deg, #2563eb, #38bdf8); }
.tenant-link-pill.owner { background: linear-gradient(135deg, #7c3aed, #ec4899); }
.tenant-link-pill:hover { transform: translateY(-1px); color: #fff; }
.quick-link.teal { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.quick-link.purple { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.tenant-billing-note {
    display: grid;
    gap: 8px;
    padding: 16px 18px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(20,184,166,.12));
    border: 1px solid rgba(37,99,235,.18);
    color: #1e293b;
    margin-bottom: 18px;
}
.tenant-billing-note strong { color: #0f172a; }
.subscription-row-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr)) auto;
    gap: 8px;
    align-items: end;
}
.subscription-row-form .input,
.subscription-row-form .select { min-width: 120px; }
.tenant-powered-footer {
    position: relative;
    z-index: 5;
    padding: 8px 12px 10px;
    background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(168,85,247,.12), rgba(250,204,21,.16));
}
.tenant-powered-footer-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}
.tenant-powered-footer a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    padding: 7px 12px;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .10);
}
.tenant-powered-footer a i {
    font-size: 0.8rem;
}
.tenant-powered-brand {
    background: linear-gradient(135deg, #1d4ed8, #7c3aed);
    color: #fff;
}
.tenant-powered-email {
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
    color: #fff;
}
.tenant-powered-phone {
    background: linear-gradient(135deg, #16a34a, #f59e0b);
    color: #fff;
}
.tenant-powered-footer a:hover { transform: translateY(-2px); color: #fff; }
@media (max-width: 900px) {
    .subscription-row-form { grid-template-columns: 1fr; }
    .tenant-powered-footer-inner { align-items: center; }
    .tenant-powered-footer a { width: auto; justify-content: center; }
}

/* Super Admin dashboard/table refinements - scoped to the admin shell */
.super-admin-page .dashboard-stat-card.dashboard-stat-card-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 98px;
}

.super-admin-page .dashboard-stat-card.dashboard-stat-card-centered .dashboard-stat-card-icon {
    position: static;
    margin-bottom: 6px;
}

.super-admin-page .tenant-link-stack {
    gap: 8px;
}

.super-admin-page .tenant-link-pill,
.super-admin-page .tenant-link-pill:visited,
.super-admin-page button.tenant-link-pill {
    width: 92px;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.08);
}

.super-admin-page .tenant-link-pill.public,
.super-admin-page .tenant-link-pill.neutral {
    background: #eff6ff;
    color: #1d4ed8;
}

.super-admin-page .tenant-link-pill.owner {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fed7aa;
}

.super-admin-page .tenant-link-pill.success {
    background: #dcfce7;
    color: #15803d;
    border-color: #bbf7d0;
}

.super-admin-page .tenant-link-pill.danger {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fecaca;
}

.super-admin-page .tenant-link-pill.warning {
    background: #fef3c7;
    color: #a16207;
    border-color: #fde68a;
}

.super-admin-page .tenant-link-pill.history {
    background: #f3e8ff;
    color: #7e22ce;
    border-color: #e9d5ff;
}

.super-admin-page .super-modern-table-wrap {
    overflow-x: auto;
}

.super-admin-page .subscription-expiry-wrap {
    overflow: visible;
}

.super-admin-page .super-modern-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.super-admin-page .super-modern-table thead th {
    background: #f8fafc;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border: 0;
    padding: 12px 16px;
}

.super-admin-page .super-modern-table tbody tr {
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
}

.super-admin-page .super-modern-table tbody td {
    padding: 14px 16px;
    vertical-align: middle;
    border-top: 1px solid #eef2f7;
    border-bottom: 1px solid #eef2f7;
}

.super-admin-page .super-modern-table tbody td:first-child {
    border-left: 1px solid #eef2f7;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

.super-admin-page .super-modern-table tbody td:last-child {
    border-right: 1px solid #eef2f7;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

.super-admin-page .directory-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.super-admin-page .directory-cell strong {
    color: #0f172a;
    font-size: 0.95rem;
    line-height: 1.2;
}

.super-admin-page .directory-cell .muted {
    display: block;
    font-size: 0.84rem;
    color: #64748b;
}

.super-admin-page .pill-stack,
.super-admin-page .directory-action-stack,
.super-admin-page .subscription-action-stack {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.super-admin-page .directory-action-stack form {
    margin: 0;
}

.super-admin-page .subscription-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.super-admin-page .subscription-section-heading h2 {
    margin-bottom: 4px;
}

.super-admin-page .subscription-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}


.super-admin-page .status,
.super-admin-page .count-pill {
    min-width: 92px;
    min-height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.super-admin-page .count-pill {
    background: #f1f5f9;
    color: #0f172a;
}

.super-admin-page .row-action-details {
    position: relative;
}

.super-admin-page .row-action-details > summary {
    list-style: none;
}

.super-admin-page .row-action-details > summary::-webkit-details-marker {
    display: none;
}

.super-admin-page .row-action-details[open] > summary {
    margin-bottom: 10px;
}

.super-admin-page .subscription-row-form-compact {
    min-width: 260px;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #f8fafc;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.super-admin-page .subscription-row-form-compact .btn {
    grid-column: 1 / -1;
}


.super-admin-page .subscription-history-details {
    position: relative;
}

.super-admin-page .subscription-history-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    width: min(580px, calc(100vw - 48px));
    max-height: 320px;
    overflow: hidden;
    border: 1px solid #e9d5ff;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(88, 28, 135, 0.18);
}

.super-admin-page .subscription-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #faf5ff, #f8fafc);
    border-bottom: 1px solid #ede9fe;
}

.super-admin-page .subscription-history-head strong {
    color: #312e81;
    font-size: 0.92rem;
}

.super-admin-page .subscription-history-head span {
    color: #7e22ce;
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.super-admin-page .subscription-history-grid {
    max-height: 250px;
    overflow-y: auto;
}

.super-admin-page .subscription-history-grid-head,
.super-admin-page .subscription-history-grid-row {
    display: grid;
    grid-template-columns: minmax(110px, 1.2fr) 80px minmax(150px, 1.4fr) minmax(92px, auto);
    gap: 10px;
    align-items: center;
    padding: 9px 14px;
}

.super-admin-page .subscription-history-grid-head {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid #f1f5f9;
}

.super-admin-page .subscription-history-grid-row {
    color: #475569;
    font-size: 0.84rem;
    border-bottom: 1px solid #f1f5f9;
}

.super-admin-page .subscription-history-grid-row:last-child {
    border-bottom: 0;
}

.super-admin-page .subscription-history-grid-row .history-plan {
    color: #0f172a;
    font-weight: 800;
}

.super-admin-page .subscription-history-status.status {
    min-width: 84px;
    min-height: 26px;
    padding: 5px 10px;
    font-size: 0.75rem;
}

.super-admin-page .subscription-history-list {
    min-width: 280px;
    max-width: 420px;
    padding: 12px;
    border: 1px solid #e9d5ff;
    border-radius: 16px;
    background: #faf5ff;
    box-shadow: 0 18px 40px rgba(88, 28, 135, 0.12);
}

.super-admin-page .subscription-history-item {
    display: grid;
    gap: 4px;
    padding: 10px 0;
    border-bottom: 1px solid #eadcff;
}

.super-admin-page .subscription-history-item:last-child {
    border-bottom: 0;
}

.super-admin-page .subscription-history-item > span:not(.status) {
    color: #64748b;
    font-size: 0.83rem;
}

.super-admin-page .subtle-history-note {
    color: #94a3b8;
    font-size: 0.82rem;
    font-weight: 700;
}

.super-admin-page .tenant-invoice-create-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 55%, #fff7ed 100%);
    border: 1px solid #e0ecff;
}

.super-admin-page .section-title-row {
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
}

.super-admin-page .tenant-invoice-form {
    display: grid;
    gap: 16px;
}

.super-admin-page .invoice-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.super-admin-page .invoice-form-grid > div:nth-child(1),
.super-admin-page .invoice-form-grid > div:nth-child(2) {
    grid-column: span 2;
}

.super-admin-page .invoice-optional-panel {
    border: 1px dashed #bfdbfe;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.74);
    padding: 12px 14px;
}

.super-admin-page .invoice-optional-panel > summary {
    cursor: pointer;
    color: #1d4ed8;
    font-weight: 800;
    list-style: none;
}

.super-admin-page .invoice-optional-panel > summary::-webkit-details-marker {
    display: none;
}

.super-admin-page .invoice-optional-panel > summary::after {
    content: ' +';
    color: #f97316;
}

.super-admin-page .invoice-optional-panel[open] > summary::after {
    content: ' −';
}

.super-admin-page .invoice-form-grid-optional {
    margin-top: 14px;
}

.super-admin-page .invoice-form-actions {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 1024px) {
    .super-admin-page .invoice-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .super-admin-page .super-modern-table thead {
        display: none;
    }

    .super-admin-page .super-modern-table,
    .super-admin-page .super-modern-table tbody,
    .super-admin-page .super-modern-table tr,
    .super-admin-page .super-modern-table td {
        display: block;
        width: 100%;
    }

    .super-admin-page .super-modern-table {
        border-spacing: 0;
    }

    .super-admin-page .super-modern-table tbody tr {
        margin-bottom: 14px;
        border: 1px solid #e2e8f0;
        border-radius: 18px;
        overflow: hidden;
    }

    .super-admin-page .super-modern-table tbody td,
    .super-admin-page .super-modern-table tbody td:first-child,
    .super-admin-page .super-modern-table tbody td:last-child {
        border: 0;
        border-bottom: 1px solid #eef2f7;
        border-radius: 0;
        padding: 12px 14px;
    }

    .super-admin-page .super-modern-table tbody td:last-child {
        border-bottom: 0;
    }

    .super-admin-page .super-modern-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 6px;
        color: #64748b;
        font-size: 0.72rem;
        font-weight: 900;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .super-admin-page .pill-stack,
    .super-admin-page .directory-action-stack,
    .super-admin-page .subscription-action-stack {
        align-items: stretch;
    }

    .super-admin-page .tenant-link-pill,
    .super-admin-page button.tenant-link-pill,
    .super-admin-page .status,
    .super-admin-page .count-pill {
        width: 100%;
        min-width: 0;
    }

    .super-admin-page .subscription-row-form-compact,
    .super-admin-page .subscription-history-list {
        min-width: 0;
        width: 100%;
    }

    .super-admin-page .subscription-expiry-wrap {
        overflow-x: auto;
        overflow-y: visible;
    }

    .super-admin-page .subscription-section-heading {
        flex-direction: column;
        align-items: stretch;
    }

    .super-admin-page .subscription-export-btn {
        width: 100%;
        justify-content: center;
    }

    .super-admin-page .subscription-history-popover {
        position: static;
        width: 100%;
        max-height: none;
        margin-top: 10px;
        box-shadow: none;
    }

    .super-admin-page .subscription-history-grid {
        max-height: none;
    }

    .super-admin-page .subscription-history-grid-head {
        display: none;
    }

    .super-admin-page .subscription-history-grid-row {
        grid-template-columns: 1fr;
        gap: 5px;
        align-items: stretch;
        padding: 11px 14px;
    }

    .super-admin-page .subscription-history-status.status {
        width: fit-content;
        min-width: 84px;
    }
}

@media (max-width: 640px) {
    .super-admin-page .invoice-form-grid,
    .super-admin-page .invoice-form-grid > div:nth-child(1),
    .super-admin-page .invoice-form-grid > div:nth-child(2) {
        grid-template-columns: 1fr;
        grid-column: auto;
    }

    .super-admin-page .invoice-form-actions {
        justify-content: stretch;
    }

    .super-admin-page .invoice-form-actions .btn {
        width: 100%;
    }
}

/* Super Admin final dashboard and tenant directory polish */
.super-admin-page .overview-directory-table tbody td {
    vertical-align: middle;
}

.super-admin-page .overview-directory-table tbody tr {
    height: 72px;
}

.super-admin-page .overview-directory-table .tenant-link-stack {
    align-items: center;
    justify-content: flex-start;
}

.super-admin-page .overview-directory-table .tenant-link-pill,
.super-admin-page .overview-directory-table .status {
    width: 92px;
    min-width: 92px;
    min-height: 34px;
}

.super-admin-page .tenant-directory-table {
    min-width: 1080px;
}

.super-admin-page .tenant-directory-table thead th,
.super-admin-page .tenant-directory-table tbody td {
    white-space: nowrap;
}

.super-admin-page .tenant-directory-table tbody td {
    padding-top: 12px;
    padding-bottom: 12px;
}

.super-admin-page .tenant-directory-table .directory-cell-inline {
    display: block;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.super-admin-page .tenant-directory-text {
    display: inline-block;
    max-width: 205px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.super-admin-page .tenant-directory-table .tenant-directory-pill-stack,
.super-admin-page .tenant-directory-table .tenant-directory-actions {
    flex-wrap: nowrap;
    gap: 6px;
}

.super-admin-page .tenant-directory-table .tenant-link-pill,
.super-admin-page .tenant-directory-table button.tenant-link-pill,
.super-admin-page .tenant-directory-table .status,
.super-admin-page .tenant-directory-table .count-pill {
    width: auto;
    min-width: 68px;
    min-height: 30px;
    padding: 6px 10px;
    font-size: 0.76rem;
}

.super-admin-page .tenant-directory-table .count-pill {
    min-width: 54px;
}

@media (max-width: 1100px) and (min-width: 821px) {
    .super-admin-page .tenant-directory-table {
        min-width: 1020px;
    }

    .super-admin-page .tenant-directory-table .tenant-link-pill,
    .super-admin-page .tenant-directory-table button.tenant-link-pill,
    .super-admin-page .tenant-directory-table .status,
    .super-admin-page .tenant-directory-table .count-pill {
        min-width: 60px;
        padding-left: 8px;
        padding-right: 8px;
        font-size: 0.72rem;
    }

    .super-admin-page .tenant-directory-text {
        max-width: 175px;
    }
}

@media (max-width: 820px) {
    .super-admin-page .tenant-directory-table {
        min-width: 0;
    }

    .super-admin-page .tenant-directory-table thead th,
    .super-admin-page .tenant-directory-table tbody td {
        white-space: normal;
    }

    .super-admin-page .tenant-directory-table .directory-cell-inline,
    .super-admin-page .tenant-directory-text {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .super-admin-page .tenant-directory-table .tenant-directory-pill-stack,
    .super-admin-page .tenant-directory-table .tenant-directory-actions {
        flex-wrap: wrap;
    }

    .super-admin-page .tenant-directory-table .tenant-link-pill,
    .super-admin-page .tenant-directory-table button.tenant-link-pill,
    .super-admin-page .tenant-directory-table .status,
    .super-admin-page .tenant-directory-table .count-pill {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 760px) {
    .super-admin-page .overview-directory-table td:nth-child(5) .tenant-link-stack {
        width: 120px;
        margin-left: auto;
        margin-right: 0;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
    }

    .super-admin-page .overview-directory-table td:nth-child(5) .tenant-link-pill {
        width: 120px;
        min-width: 0;
        min-height: 34px;
    }
}

/* Super Admin requested compact layout refinements */
.super-admin-page .dashboard-stat-row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.super-admin-page .dashboard-stat-card {
    min-width: 0;
    padding-left: 12px;
    padding-right: 12px;
}

.super-admin-page .dashboard-stat-head {
    font-size: clamp(0.74rem, 0.9vw, 0.95rem);
    line-height: 1.15;
}

.super-admin-page .dashboard-stat-value {
    font-size: clamp(1.45rem, 2.2vw, 2rem);
}

.super-admin-page .tenant-directory-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

.super-admin-page .super-modern-table-wrap:has(.tenant-directory-table) {
    overflow-x: hidden;
}

.super-admin-page .tenant-directory-table th,
.super-admin-page .tenant-directory-table td {
    box-sizing: border-box;
}

.super-admin-page .tenant-directory-table th:nth-child(1),
.super-admin-page .tenant-directory-table td:nth-child(1) { width: 13%; }
.super-admin-page .tenant-directory-table th:nth-child(2),
.super-admin-page .tenant-directory-table td:nth-child(2) { width: 10%; }
.super-admin-page .tenant-directory-table th:nth-child(3),
.super-admin-page .tenant-directory-table td:nth-child(3) { width: 22%; }
.super-admin-page .tenant-directory-table th:nth-child(4),
.super-admin-page .tenant-directory-table td:nth-child(4) { width: 12%; }
.super-admin-page .tenant-directory-table th:nth-child(5),
.super-admin-page .tenant-directory-table td:nth-child(5) { width: 8%; text-align: center; }
.super-admin-page .tenant-directory-table th:nth-child(6),
.super-admin-page .tenant-directory-table td:nth-child(6) { width: 15%; }
.super-admin-page .tenant-directory-table th:nth-child(7),
.super-admin-page .tenant-directory-table td:nth-child(7) { width: 20%; }

.super-admin-page .tenant-directory-table thead th,
.super-admin-page .tenant-directory-table tbody td {
    padding: 10px 7px;
    font-size: 0.78rem;
    line-height: 1.2;
    overflow: hidden;
}

.super-admin-page .tenant-directory-table .directory-cell-inline,
.super-admin-page .tenant-directory-text {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.super-admin-page .tenant-directory-table .directory-cell strong {
    font-size: 0.78rem;
}

.super-admin-page .tenant-directory-table .tenant-directory-pill-stack,
.super-admin-page .tenant-directory-table .tenant-directory-actions {
    flex-wrap: nowrap;
    gap: 4px;
    justify-content: center;
    min-width: 0;
}

.super-admin-page .tenant-directory-table .tenant-link-pill,
.super-admin-page .tenant-directory-table button.tenant-link-pill,
.super-admin-page .tenant-directory-table .status,
.super-admin-page .tenant-directory-table .count-pill {
    width: auto;
    min-width: 46px;
    min-height: 28px;
    padding: 5px 7px;
    font-size: 0.66rem;
    line-height: 1;
    box-shadow: none;
}

.super-admin-page .tenant-directory-table .count-pill {
    min-width: 44px;
}

.super-admin-page .tenant-directory-table .tenant-directory-actions .tenant-link-pill,
.super-admin-page .tenant-directory-table .tenant-directory-actions button.tenant-link-pill {
    min-width: 48px;
}

@media (max-width: 1180px) and (min-width: 821px) {
    .super-admin-page .tenant-directory-table thead th,
    .super-admin-page .tenant-directory-table tbody td {
        padding-left: 5px;
        padding-right: 5px;
        font-size: 0.72rem;
    }

    .super-admin-page .tenant-directory-table .tenant-link-pill,
    .super-admin-page .tenant-directory-table button.tenant-link-pill,
    .super-admin-page .tenant-directory-table .status,
    .super-admin-page .tenant-directory-table .count-pill {
        min-width: 42px;
        padding-left: 5px;
        padding-right: 5px;
        font-size: 0.61rem;
    }
}

@media (max-width: 980px) and (min-width: 821px) {
    .super-admin-page .tenant-directory-table thead th,
    .super-admin-page .tenant-directory-table tbody td {
        font-size: 0.66rem;
    }

    .super-admin-page .tenant-directory-table .tenant-link-pill,
    .super-admin-page .tenant-directory-table button.tenant-link-pill,
    .super-admin-page .tenant-directory-table .status,
    .super-admin-page .tenant-directory-table .count-pill {
        min-width: 38px;
        min-height: 24px;
        padding: 4px 4px;
        font-size: 0.56rem;
    }
}

@media (max-width: 900px) {
    .super-admin-page .dashboard-stat-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .super-admin-page .dashboard-stat-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .super-admin-page .super-modern-table-wrap:has(.tenant-directory-table) {
        overflow-x: visible;
    }
}

.super-admin-page .tenant-directory-wrap {
    overflow-x: hidden;
}

@media (max-width: 820px) {
    .super-admin-page .tenant-directory-wrap {
        overflow-x: visible;
    }
}

/* Super Admin normal-size tenant directory and dashboard stats */
.super-admin-page .dashboard-stat-row {
    grid-template-columns: repeat(5, minmax(150px, 1fr));
}

.super-admin-page .dashboard-stat-card {
    padding: 18px 16px 14px;
}

.super-admin-page .dashboard-stat-head {
    font-size: 1rem;
    line-height: 1.2;
}

.super-admin-page .dashboard-stat-value {
    font-size: 2.15rem;
}

.super-admin-page .tenant-directory-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

.super-admin-page .tenant-directory-wrap,
.super-admin-page .super-modern-table-wrap:has(.tenant-directory-table) {
    overflow-x: hidden;
}

.super-admin-page .tenant-directory-table th:nth-child(1),
.super-admin-page .tenant-directory-table td:nth-child(1) { width: 16%; }
.super-admin-page .tenant-directory-table th:nth-child(2),
.super-admin-page .tenant-directory-table td:nth-child(2) { width: 12%; }
.super-admin-page .tenant-directory-table th:nth-child(3),
.super-admin-page .tenant-directory-table td:nth-child(3) { width: 25%; }
.super-admin-page .tenant-directory-table th:nth-child(4),
.super-admin-page .tenant-directory-table td:nth-child(4) { width: 13%; }
.super-admin-page .tenant-directory-table th:nth-child(5),
.super-admin-page .tenant-directory-table td:nth-child(5) { width: 8%; text-align: center; }
.super-admin-page .tenant-directory-table th:nth-child(6),
.super-admin-page .tenant-directory-table td:nth-child(6) { width: 17%; }
.super-admin-page .tenant-directory-table th:nth-child(7),
.super-admin-page .tenant-directory-table td:nth-child(7) { width: 9%; }

.super-admin-page .tenant-directory-table thead th,
.super-admin-page .tenant-directory-table tbody td {
    padding: 12px 8px;
    font-size: 0.95rem;
    line-height: 1.25;
    vertical-align: middle;
}

.super-admin-page .tenant-directory-table thead th {
    font-size: 0.78rem;
}

.super-admin-page .tenant-directory-table .directory-cell strong {
    font-size: 0.95rem;
}

.super-admin-page .tenant-directory-table .directory-cell-inline,
.super-admin-page .tenant-directory-text {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.super-admin-page .tenant-directory-table .tenant-directory-pill-stack,
.super-admin-page .tenant-directory-table .tenant-directory-actions {
    flex-wrap: nowrap;
    gap: 6px;
    justify-content: center;
    align-items: center;
}

.super-admin-page .tenant-directory-table .tenant-link-pill,
.super-admin-page .tenant-directory-table button.tenant-link-pill,
.super-admin-page .tenant-directory-table .status,
.super-admin-page .tenant-directory-table .count-pill {
    min-height: 32px;
    padding: 7px 10px;
    font-size: 0.78rem;
    line-height: 1;
    box-shadow: none;
}

.super-admin-page .tenant-directory-table .status {
    min-width: 68px;
}

.super-admin-page .tenant-directory-table .count-pill {
    min-width: 54px;
}

.super-admin-page .tenant-directory-table .tenant-directory-actions .tenant-link-pill,
.super-admin-page .tenant-directory-table .tenant-directory-actions button.tenant-link-pill {
    min-width: 68px;
}

.super-admin-page .tenant-more-actions {
    position: relative;
    display: inline-flex;
    margin: 0;
}

.super-admin-page .tenant-more-actions > summary {
    list-style: none;
}

.super-admin-page .tenant-more-actions > summary::-webkit-details-marker {
    display: none;
}

.super-admin-page .tenant-more-trigger {
    width: 34px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 900;
}

.super-admin-page .tenant-more-trigger:hover {
    background: #e0f2fe;
    color: #0369a1;
}

.super-admin-page .tenant-more-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 30;
    min-width: 132px;
    padding: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
    display: grid;
    gap: 8px;
}

.super-admin-page .tenant-more-menu form {
    margin: 0;
}

.super-admin-page .tenant-more-menu .tenant-link-pill,
.super-admin-page .tenant-more-menu button.tenant-link-pill {
    width: 100%;
    min-width: 112px;
}

@media (max-width: 1180px) and (min-width: 821px) {
    .super-admin-page .tenant-directory-table thead th,
    .super-admin-page .tenant-directory-table tbody td {
        padding-left: 7px;
        padding-right: 7px;
        font-size: 0.9rem;
    }

    .super-admin-page .tenant-directory-table thead th {
        font-size: 0.74rem;
    }

    .super-admin-page .tenant-directory-table .directory-cell strong {
        font-size: 0.9rem;
    }

    .super-admin-page .tenant-directory-table .tenant-link-pill,
    .super-admin-page .tenant-directory-table button.tenant-link-pill,
    .super-admin-page .tenant-directory-table .status,
    .super-admin-page .tenant-directory-table .count-pill {
        font-size: 0.74rem;
        padding-left: 8px;
        padding-right: 8px;
    }
}

@media (max-width: 980px) and (min-width: 821px) {
    .super-admin-page .tenant-directory-table thead th,
    .super-admin-page .tenant-directory-table tbody td {
        font-size: 0.84rem;
        padding-left: 6px;
        padding-right: 6px;
    }

    .super-admin-page .tenant-directory-table thead th {
        font-size: 0.7rem;
    }

    .super-admin-page .tenant-directory-table .directory-cell strong {
        font-size: 0.84rem;
    }

    .super-admin-page .tenant-directory-table .tenant-link-pill,
    .super-admin-page .tenant-directory-table button.tenant-link-pill,
    .super-admin-page .tenant-directory-table .status,
    .super-admin-page .tenant-directory-table .count-pill {
        min-height: 30px;
        font-size: 0.7rem;
        padding-left: 7px;
        padding-right: 7px;
    }

    .super-admin-page .tenant-directory-table .status {
        min-width: 62px;
    }
}

@media (max-width: 900px) {
    .super-admin-page .dashboard-stat-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .super-admin-page .tenant-directory-wrap,
    .super-admin-page .super-modern-table-wrap:has(.tenant-directory-table) {
        overflow-x: visible;
    }

    .super-admin-page .tenant-directory-table,
    .super-admin-page .tenant-directory-table tbody,
    .super-admin-page .tenant-directory-table tr,
    .super-admin-page .tenant-directory-table td {
        width: 100%;
    }

    .super-admin-page .tenant-directory-table thead th,
    .super-admin-page .tenant-directory-table tbody td {
        font-size: 0.95rem;
        white-space: normal;
    }

    .super-admin-page .tenant-directory-table .directory-cell-inline,
    .super-admin-page .tenant-directory-text {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .super-admin-page .tenant-directory-table .tenant-directory-pill-stack,
    .super-admin-page .tenant-directory-table .tenant-directory-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .super-admin-page .tenant-more-actions {
        width: auto;
    }
}

@media (max-width: 640px) {
    .super-admin-page .dashboard-stat-row {
        grid-template-columns: 1fr;
    }
}

/* Super Admin tenant directory final width balance */
.super-admin-page .tenant-directory-wrap,
.super-admin-page .super-modern-table-wrap:has(.tenant-directory-table) {
    overflow: visible;
}

.super-admin-page .tenant-directory-table th:nth-child(1),
.super-admin-page .tenant-directory-table td:nth-child(1) { width: 15%; }
.super-admin-page .tenant-directory-table th:nth-child(2),
.super-admin-page .tenant-directory-table td:nth-child(2) { width: 11%; }
.super-admin-page .tenant-directory-table th:nth-child(3),
.super-admin-page .tenant-directory-table td:nth-child(3) { width: 24%; }
.super-admin-page .tenant-directory-table th:nth-child(4),
.super-admin-page .tenant-directory-table td:nth-child(4) { width: 13%; }
.super-admin-page .tenant-directory-table th:nth-child(5),
.super-admin-page .tenant-directory-table td:nth-child(5) { width: 7%; text-align: center; }
.super-admin-page .tenant-directory-table th:nth-child(6),
.super-admin-page .tenant-directory-table td:nth-child(6) { width: 18%; }
.super-admin-page .tenant-directory-table th:nth-child(7),
.super-admin-page .tenant-directory-table td:nth-child(7) { width: 12%; }

/* Super Admin tenant action menu visibility fix */
.super-admin-page .tenant-directory-table td[data-label="Action"],
.super-admin-page .tenant-directory-table tbody td:last-child {
    overflow: visible !important;
    position: relative;
    z-index: 2;
}

.super-admin-page .tenant-directory-table tbody tr {
    position: relative;
}

.super-admin-page .tenant-directory-table tbody tr:has(.tenant-more-actions[open]) {
    z-index: 50;
}

.super-admin-page .tenant-more-actions[open] {
    z-index: 1000;
}

.super-admin-page .tenant-more-actions[open] .tenant-more-trigger {
    background: #e0f2fe;
    color: #0369a1;
}

.super-admin-page .tenant-more-actions[open] .tenant-more-menu {
    display: grid;
    pointer-events: auto;
}

/* Owner plan upgrade popup: show all 4 plans in one row and keep card content aligned */
.plan-modal-dialog {
    width: min(1320px, calc(100% - 24px));
    padding: 18px;
}

.plan-compare-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.plan-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    padding: 18px 16px;
}

.plan-card-top {
    flex: 0 0 auto;
}

.plan-card .muted {
    margin: 0;
}

.plan-feature-list {
    flex: 0 0 auto;
    margin-top: 0;
}

.plan-card-actions {
    margin-top: auto;
}

.plan-card h3 {
    margin: 8px 0 4px;
}

.plan-price-stack {
    padding: 10px 12px;
}

.plan-price-main {
    font-size: 1.72rem;
}

@media (max-width: 1100px) and (min-width: 761px) {
    .plan-modal-dialog {
        width: calc(100% - 20px);
        padding: 16px 12px;
    }

    .plan-compare-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .plan-card {
        padding: 16px 12px;
    }

    .plan-card h3 {
        font-size: 1.35rem;
    }

    .plan-price-main {
        font-size: 1.45rem;
    }

    .plan-price-main span {
        display: block;
        margin-left: 0;
        margin-top: 4px;
    }

    .plan-feature-list li {
        padding: 6px 0;
        font-size: 0.95rem;
    }
}

@media (max-width: 900px) {
    .plan-compare-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .plan-compare-grid {
        grid-template-columns: 1fr;
    }
}

/* Desktop-only public booking compact layout refinements */
@media (min-width: 1024px) {
    body.public-page:not(.account-page) .booking-page-shell {
        padding: 10px 0 12px;
    }

    body.public-page:not(.account-page) .booking-card-public {
        padding: 16px 24px 14px;
    }

    body.public-page:not(.account-page) .booking-grid-public {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
    }

    body.public-page:not(.account-page) .booking-card-public .public-section-title {
        margin-bottom: 8px;
        font-size: 1rem;
    }

    body.public-page:not(.account-page) .booking-card-public .section-rule {
        margin-bottom: 10px;
    }

    body.public-page:not(.account-page) .booking-card-public .input-group {
        margin-bottom: 10px;
    }

    body.public-page:not(.account-page) .booking-card-public .booking-field {
        min-height: 50px;
    }

    body.public-page:not(.account-page) .booking-card-public .field-control {
        min-height: 50px;
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 0.93rem;
    }

    body.public-page:not(.account-page) .booking-card-public .service-stack-public {
        gap: 10px;
    }

    body.public-page:not(.account-page) .booking-card-public .service-option-public,
    body.public-page:not(.account-page) .booking-card-public .service-option-public .service-option-inner {
        min-height: 50px;
    }

    body.public-page:not(.account-page) .booking-card-public .service-option-public .service-option-inner {
        padding: 0 14px 0 16px;
    }

    body.public-page:not(.account-page) .booking-card-public .service-label {
        font-size: 0.93rem;
    }

    body.public-page:not(.account-page) .booking-card-public .notes-shell {
        min-height: 94px;
    }

    body.public-page:not(.account-page) .booking-card-public .booking-notes-icon {
        top: 14px !important;
    }

    body.public-page:not(.account-page) .booking-card-public .booking-notes-textarea {
        min-height: 94px;
        max-height: 94px;
        padding-top: 12px;
        padding-bottom: 12px;
        line-height: 1.35;
        resize: none;
    }

    body.public-page:not(.account-page) .booking-card-public .booking-divider {
        margin: 6px 0 12px;
    }

    body.public-page:not(.account-page) .booking-card-public .public-submit-btn {
        min-width: 270px;
        min-height: 46px;
        padding: 10px 26px;
        font-size: 1rem;
    }
}

/* Booking confirmation JPG download button */
.booking-confirmation-exact-download {
    display: inline-flex !important;
    margin-top: 12px;
    cursor: pointer;
    border: 2px solid #efb927;
}
.booking-confirmation-exact-download:disabled {
    opacity: 0.72;
    cursor: progress;
    transform: none;
}
.booking-confirmation-exact-download i {
    margin-right: 8px;
}
@media (max-width: 720px) {
    .booking-confirmation-exact-download {
        width: 100%;
        min-height: 56px;
    }
}