:root {
    --brand: #93c120;
    --brand-dark: #6f9415;
    --navy: #172033;
    --navy-2: #202a40;
    --bg: #f4f6f8;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --text: #172033;
    --muted: #667085;
    --border: #e4e7ec;
    --danger: #b42318;
    --danger-bg: #fef3f2;
    --warning: #b54708;
    --warning-bg: #fff6ed;
    --success: #027a48;
    --success-bg: #ecfdf3;
    --shadow: 0 10px 30px rgba(16, 24, 40, .08);
}

html[data-theme="dark"] {
    --bg: #0d1422;
    --surface: #151e2e;
    --surface-2: #1b2638;
    --text: #f3f6fb;
    --muted: #a7b0c0;
    --border: #2b374b;
    --danger-bg: #35191b;
    --warning-bg: #362718;
    --success-bg: #153224;
    --shadow: 0 10px 30px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
textarea { resize: vertical; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 260px 1fr; }
.sidebar { background: linear-gradient(180deg, var(--navy), #101728); color: white; padding: 24px 18px; display: flex; flex-direction: column; }
.brand { display: flex; gap: 12px; align-items: center; padding: 4px 8px 28px; }
.brand strong { display: block; font-size: 19px; }
.brand small { color: #aeb8c8; }
.brand-mark { width: 42px; height: 42px; background: var(--brand); color: #132000; border-radius: 12px; display: grid; place-items: center; font-weight: 900; }
.brand-mark.large { width: 62px; height: 62px; border-radius: 18px; font-size: 20px; margin: 0 auto; }

nav { display: grid; gap: 7px; }
.nav-link { padding: 12px 14px; border-radius: 9px; color: #d8deea; }
.nav-link:hover { background: rgba(255,255,255,.08); color: white; }
.sidebar-bottom { margin-top: auto; display: grid; gap: 10px; }
.theme-toggle, .logout-button, .public-form-link { width: 100%; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.05); color: white; border-radius: 9px; padding: 11px; cursor: pointer; text-align: center; }

.main-area { min-width: 0; }
.topbar { min-height: 82px; display: flex; align-items: center; justify-content: space-between; padding: 18px 30px; background: var(--surface); border-bottom: 1px solid var(--border); }
.topbar h1 { margin: 0; font-size: 24px; }
.user-chip { display: flex; gap: 10px; align-items: center; }
.user-chip small { display: block; color: var(--muted); text-transform: capitalize; }
.avatar { width: 38px; height: 38px; background: var(--brand); color: #162400; display: grid; place-items: center; border-radius: 50%; font-weight: 800; }

.page-content { padding: 30px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 22px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); padding: 22px; border-radius: 15px; }
.stat-card span { color: var(--muted); display: block; margin-bottom: 12px; }
.stat-card strong { font-size: 34px; }
.stat-card.danger strong { color: var(--danger); }
.stat-card.warning strong { color: var(--warning); }

.dashboard-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 22px; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 15px; box-shadow: var(--shadow); overflow: hidden; }
.panel-header { padding: 22px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.panel-header h2 { margin: 0 0 5px; font-size: 18px; }
.panel-header p, .page-actions p { margin: 0; color: var(--muted); }
.page-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 15px; }

.quick-actions { padding: 16px; display: grid; gap: 12px; }
.quick-action { border: 1px solid var(--border); background: var(--surface-2); padding: 16px; border-radius: 11px; }
.quick-action strong, .quick-action span { display: block; }
.quick-action span { color: var(--muted); margin-top: 4px; font-size: 14px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
tbody tr:hover { background: var(--surface-2); }
.table-subtext { display: block; color: var(--muted); margin-top: 3px; }
.table-link { color: #527400; font-weight: 800; }

.button { display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; padding: 11px 16px; border: 0; cursor: pointer; font-weight: 700; }
.button-primary { background: var(--brand); color: #172500; }
.button-primary:hover { background: var(--brand-dark); color: white; }
.button-secondary { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.button-large { min-height: 52px; font-size: 17px; width: 100%; }

.empty-state { padding: 45px 24px; text-align: center; }
.empty-state strong { display: block; font-size: 18px; margin-bottom: 8px; }
.empty-state p { color: var(--muted); margin: 0 0 18px; }

.form-panel { padding: 24px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
label { display: grid; gap: 7px; font-weight: 700; font-size: 14px; }
input, select, textarea { width: 100%; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 9px; padding: 12px; }
.form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; padding-top: 8px; }

.alert { border-radius: 9px; padding: 13px 15px; margin-bottom: 18px; }
.alert-danger { background: var(--danger-bg); color: var(--danger); border: 1px solid #fecdca; }
.alert-success { background: var(--success-bg); color: var(--success); border: 1px solid #abefc6; }

.status { display: inline-flex; padding: 5px 9px; border-radius: 999px; background: var(--success-bg); color: var(--success); font-size: 12px; font-weight: 800; }
.status-in_garage, .status-probable_match, .status-to_be_verified, .status-information_requested { background: var(--warning-bg); color: var(--warning); }
.status-off_road, .status-rejected, .status-manual_review { background: var(--danger-bg); color: var(--danger); }
.status-verified, .status-manually_verified { background: var(--success-bg); color: var(--success); }
.status-cancelled { background: var(--surface-2); color: var(--muted); }

.health-list { padding: 10px 22px 22px; }
.health-row { display: grid; grid-template-columns: 14px 1fr auto; gap: 12px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--border); }
.health-row small { color: var(--muted); display: block; margin-top: 3px; }
.health-dot { width: 10px; height: 10px; border-radius: 50%; }
.health-dot.ok { background: #12b76a; }
.health-dot.fail { background: #f04438; }
.health-state { color: var(--muted); font-size: 13px; }

.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: linear-gradient(135deg, #101728, #25324b); }
.auth-panel { width: min(440px, 100%); background: var(--surface); color: var(--text); border-radius: 18px; padding: 32px; box-shadow: 0 25px 80px rgba(0,0,0,.28); }
.auth-brand { text-align: center; margin-bottom: 25px; }
.auth-brand h1 { margin: 14px 0 6px; }
.auth-brand p, .sso-placeholder p { color: var(--muted); }
.stacked-form { display: grid; gap: 16px; }
.sso-placeholder { border-top: 1px solid var(--border); margin-top: 24px; padding-top: 20px; text-align: center; }
.sso-placeholder span { font-weight: 800; }

.filter-bar { display: grid; grid-template-columns: minmax(240px, 1fr) 230px auto; gap: 12px; padding: 18px; border-bottom: 1px solid var(--border); }
.text-danger { color: var(--danger); font-weight: 800; }

.fuel-detail-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 22px; margin-bottom: 22px; }
.fuel-side-column { display: grid; gap: 22px; align-content: start; }
.detail-list { margin: 0; padding: 8px 22px 22px; }
.detail-list > div { display: grid; grid-template-columns: 190px 1fr; gap: 15px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.detail-list dt { color: var(--muted); }
.detail-list dd { margin: 0; font-weight: 700; }
.panel-form { padding: 20px; }
.timeline-panel { margin-top: 22px; }
.timeline-list { padding: 22px; }
.timeline-item { display: grid; grid-template-columns: 18px 1fr; gap: 12px; position: relative; padding-bottom: 24px; }
.timeline-item:not(:last-child)::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 0; width: 2px; background: var(--border); }
.timeline-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--brand); margin-top: 4px; z-index: 1; }
.timeline-item p { margin: 6px 0; color: var(--muted); }
.timeline-item small { color: var(--muted); }

.migration-actions { padding: 18px; display: flex; justify-content: flex-end; }

.public-body { min-height: 100vh; background: linear-gradient(160deg, #101728 0%, #1c2942 42%, #eff4e5 42%, #f7f9f4 100%); }
.public-fuel-shell { width: min(720px, calc(100% - 28px)); margin: 0 auto; padding: 28px 0; }
.public-fuel-header { color: white; display: flex; align-items: center; gap: 18px; padding: 12px 4px 26px; }
.public-fuel-header .brand-mark { margin: 0; flex: 0 0 auto; }
.public-fuel-header h1 { margin: 0 0 6px; font-size: clamp(26px, 5vw, 38px); }
.public-fuel-header p { margin: 0; color: #d7deea; }
.public-fuel-card { background: var(--surface); border-radius: 20px; padding: clamp(20px, 5vw, 36px); box-shadow: 0 25px 80px rgba(7, 16, 33, .24); }
.fuel-form { display: grid; gap: 18px; }
.form-section { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; margin-top: 10px; }
.form-section:first-of-type { margin-top: 0; }
.form-section h2 { margin: 0 0 4px; font-size: 19px; }
.form-section p { margin: 0; color: var(--muted); font-size: 14px; }
.form-step { width: 34px; height: 34px; display: grid; place-items: center; background: var(--brand); color: #182400; font-weight: 900; border-radius: 50%; }
.fuel-two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.upload-box { border: 2px dashed var(--border); background: var(--surface-2); padding: 22px; border-radius: 14px; text-align: center; cursor: pointer; }
.upload-box input { border: 0; padding: 10px 0; background: transparent; }
.upload-title { display: block; font-size: 17px; }
.upload-help, .upload-filename { display: block; color: var(--muted); font-weight: 500; font-size: 13px; margin-top: 5px; }
.upload-filename { color: #527400; font-weight: 800; }
.checkbox-card { display: grid; grid-template-columns: 22px 1fr; align-items: start; gap: 11px; border: 1px solid var(--border); border-radius: 12px; padding: 15px; background: var(--surface-2); }
.checkbox-card input { width: 18px; height: 18px; margin-top: 2px; }
.checkbox-card small { display: block; color: var(--muted); margin-top: 4px; line-height: 1.35; }
.is-hidden { display: none !important; }
.honeypot { position: absolute !important; left: -9999px !important; opacity: 0 !important; }
.submission-review { background: #f3f8e8; border: 1px solid #d6e8a8; padding: 15px; border-radius: 12px; color: #35470b; }
.submission-review p { margin: 5px 0 0; font-size: 14px; }
.public-fuel-footer { display: flex; justify-content: space-between; color: #667085; font-size: 13px; padding: 18px 4px; }
.thank-you-card { text-align: center; margin-top: 8vh; }
.success-icon { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 18px; display: grid; place-items: center; background: var(--success-bg); color: var(--success); font-size: 38px; font-weight: 900; }
.thank-you-card h1 { margin: 0 0 8px; font-size: 34px; }
.thank-you-card > p { color: var(--muted); }
.confirmation-reference { background: var(--navy); color: white; border-radius: 14px; padding: 18px; margin: 24px 0; }
.confirmation-reference span, .confirmation-reference strong { display: block; }
.confirmation-reference span { color: #cbd3df; font-size: 13px; margin-bottom: 5px; }
.confirmation-reference strong { color: var(--brand); font-size: 25px; letter-spacing: .03em; }
.confirmation-list { text-align: left; margin: 0 0 24px; }
.confirmation-list > div { display: grid; grid-template-columns: 130px 1fr; padding: 12px 0; border-bottom: 1px solid var(--border); }
.confirmation-list dt { color: var(--muted); }
.confirmation-list dd { margin: 0; font-weight: 800; }

@media (max-width: 980px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { position: static; }
    .sidebar nav { grid-template-columns: repeat(3, 1fr); }
    .sidebar-bottom { margin-top: 20px; grid-template-columns: 1fr 1fr 1fr; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .dashboard-grid, .fuel-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .filter-bar { grid-template-columns: 1fr; }
    .fuel-two-column { grid-template-columns: 1fr 1fr; }
    .detail-list > div { grid-template-columns: 1fr; gap: 5px; }
}

@media (max-width: 640px) {
    .page-content { padding: 18px; }
    .topbar { padding: 16px 18px; align-items: flex-start; gap: 12px; }
    .user-chip div { display: none; }
    .stat-grid, .form-grid { grid-template-columns: 1fr; }
    .sidebar nav { grid-template-columns: 1fr; }
    .sidebar-bottom { grid-template-columns: 1fr; }
    .page-actions { align-items: stretch; flex-direction: column; }
    .page-actions .button { width: 100%; }
    .public-fuel-header { align-items: flex-start; }
    .public-fuel-header .brand-mark { width: 52px; height: 52px; }
}

@media (max-width: 430px) {
    .fuel-two-column { grid-template-columns: 1fr; }
    .public-fuel-footer { flex-direction: column; gap: 5px; text-align: center; }
}


/* Pack 003.1 employee experience */
.field-help { color: var(--muted); font-weight: 500; }
.vehicle-quick-card {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 18px;
    padding: 16px;
    border: 1px solid var(--border);
    background: linear-gradient(145deg, var(--surface-2), var(--surface));
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .06);
}
.vehicle-photo-shell {
    min-height: 140px;
    border-radius: 13px;
    overflow: hidden;
    background: linear-gradient(145deg, #e8eedc, #d6e8a8);
    display: grid;
    place-items: center;
}
.vehicle-photo { width: 100%; height: 100%; object-fit: cover; }
.vehicle-photo-placeholder { font-size: 56px; }
.vehicle-card-heading {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
}
.vehicle-card-heading h3 { margin: 5px 0 2px; font-size: 24px; }
.vehicle-card-heading p { margin: 0; color: var(--muted); }
.assigned-badge {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eef7d8;
    color: #4b6800;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.vehicle-card-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0 0;
}
.vehicle-card-details div {
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.vehicle-card-details dt { color: var(--muted); font-size: 12px; }
.vehicle-card-details dd { margin: 4px 0 0; font-weight: 800; font-size: 13px; }

.camera-icon { display: block; font-size: 38px; margin-bottom: 5px; }
.receipt-preview {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface-2);
}
.receipt-preview img {
    display: block;
    width: 100%;
    max-height: 480px;
    object-fit: contain;
    background: #111827;
}
.receipt-preview-actions { padding: 12px; display: flex; justify-content: flex-end; }

.warning-card, .review-warning {
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #fedf89;
    background: #fffaeb;
    color: #93370d;
}
.warning-card strong { display: block; margin-bottom: 4px; }
.warning-card p { margin: 0; font-size: 14px; }

.submission-readiness {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.submission-readiness div {
    padding: 10px 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}
.submission-readiness div span { display: block; font-size: 18px; margin-bottom: 3px; }
.submission-readiness .is-ready { background: var(--success-bg); color: var(--success); border-color: #abefc6; }

.review-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 18px;
}
.review-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 16, 33, .72);
    backdrop-filter: blur(6px);
}
.review-dialog {
    position: relative;
    width: min(560px, 100%);
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    background: var(--surface);
    color: var(--text);
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 30px 100px rgba(0, 0, 0, .36);
}
.review-close {
    position: absolute;
    top: 12px;
    right: 14px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 30px;
    cursor: pointer;
}
.review-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    background: var(--brand);
    color: #162400;
    border-radius: 50%;
    font-size: 28px;
    font-weight: 900;
}
.review-dialog h2 { margin: 15px 0 5px; }
.review-dialog > p { color: var(--muted); margin-top: 0; }
.review-list { margin: 20px 0; }
.review-list > div {
    display: grid;
    grid-template-columns: 145px 1fr;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
}
.review-list dt { color: var(--muted); }
.review-list dd { margin: 0; font-weight: 800; }
.review-warning { margin: 12px 0; }
.review-warning > p { margin: 0 0 10px; font-weight: 700; }
.review-warning .checkbox-card { background: rgba(255,255,255,.55); }
.review-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.review-error { color: var(--danger); font-weight: 800; text-align: center; }
.modal-open { overflow: hidden; }

@media (max-width: 640px) {
    .vehicle-quick-card { grid-template-columns: 1fr; }
    .vehicle-photo-shell { min-height: 180px; }
    .vehicle-card-details { grid-template-columns: 1fr; }
    .submission-readiness { grid-template-columns: repeat(2, 1fr); }
    .review-dialog { padding: 22px 18px; }
    .review-list > div { grid-template-columns: 1fr; gap: 4px; }
    .review-actions { grid-template-columns: 1fr; }
}


/* Pack 003.1a branded public fuel form */
.public-body {
    background: #f3f4f7;
}

.branded-fuel-shell {
    width: min(780px, calc(100% - 24px));
    padding-top: 24px;
}

.branded-fuel-header {
    text-align: center;
    padding: 10px 20px 24px;
}

.tsb-form-logo {
    display: block;
    width: min(500px, 82%);
    max-height: 155px;
    object-fit: contain;
    margin: 0 auto 22px;
}

.branded-fuel-header h1 {
    margin: 0;
    color: #111827;
    font-size: clamp(28px, 5vw, 42px);
    line-height: 1.1;
}

.branded-fuel-header h1 span {
    color: #78ad11;
}

.title-underline {
    display: block;
    width: 54px;
    height: 3px;
    background: #78ad11;
    margin: 17px auto 0;
    border-radius: 999px;
}

.branded-fuel-card {
    border: 1px solid #dfe3e8;
    box-shadow: 0 16px 50px rgba(16, 24, 40, .09);
}

.branded-fuel-form {
    gap: 22px;
}

.branded-fuel-form label {
    color: #111827;
    font-size: 16px;
}

.inline-label-help {
    color: #7b8190;
    font-size: 15px;
    font-weight: 500;
}

.branded-fuel-form input,
.branded-fuel-form select,
.branded-fuel-form textarea {
    min-height: 56px;
    border-color: #d7dbe2;
    border-radius: 11px;
    background: #fff;
    color: #111827;
    font-size: 16px;
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, .03);
}

.branded-fuel-form input:focus,
.branded-fuel-form select:focus,
.branded-fuel-form textarea:focus {
    outline: 0;
    border-color: #78ad11;
    box-shadow: 0 0 0 3px rgba(120, 173, 17, .13);
}

.branded-two-column {
    gap: 18px;
}

.mileage-summary {
    border: 1px solid #cfe0ad;
    border-radius: 13px;
    background: linear-gradient(135deg, #f9fbf5, #f2f7e9);
    padding: 10px 22px 15px;
}

.mileage-summary > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 13px 0;
    border-bottom: 1px solid #dce4d0;
}

.mileage-summary > div span {
    color: #222b36;
    font-weight: 600;
}

.mileage-summary > div strong {
    font-size: 18px;
    color: #172033;
}

.mileage-summary > div strong:not(.negative) {
    color: #6ea20b;
}

.mileage-summary > div:first-child strong {
    color: #172033;
}

.mileage-summary > div strong.negative {
    color: #b42318;
}

.mileage-message {
    margin: 13px 0 0;
    color: #667085;
    font-weight: 700;
}

.mileage-message::before {
    content: "i";
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-right: 9px;
    border-radius: 50%;
    background: #98c62d;
    color: #fff;
    font-style: normal;
    font-weight: 900;
}

.mileage-message.positive {
    color: #659609;
}

.mileage-message.warning {
    color: #b54708;
}

.receipt-heading {
    margin-bottom: -12px;
}

.branded-upload-box {
    min-height: 240px;
    border: 2px dashed #7fb126;
    background: #fff;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
}

.branded-upload-box .camera-icon {
    font-size: 46px;
    margin: 0;
}

.branded-upload-box .upload-title {
    font-size: 22px;
    color: #111827;
}

.upload-divider {
    color: #515866;
    font-weight: 500;
    margin: 2px 0;
}

.choose-photo-text {
    color: #76aa14;
    font-size: 18px;
    font-weight: 800;
}

.branded-upload-box input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.branded-upload-box .upload-filename {
    margin-top: 6px;
}

.missing-receipt-block {
    display: grid;
    gap: 10px;
}

.missing-receipt-block > strong {
    color: #111827;
    font-size: 16px;
}

.branded-checkbox-card {
    border: 0;
    background: transparent;
    padding: 2px 0;
}

.branded-checkbox-card input {
    width: 22px;
    height: 22px;
    min-height: 0;
}

.branded-submit-button {
    min-height: 62px;
    border-radius: 11px;
    background: linear-gradient(90deg, #78ad11, #92c51c, #75aa10);
    color: #fff;
    font-size: 21px;
    box-shadow: 0 10px 25px rgba(120, 173, 17, .22);
}

.branded-submit-button:hover {
    background: linear-gradient(90deg, #68980d, #83b414, #66960c);
    color: #fff;
}

.branded-fuel-footer {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 18px 4px 4px;
    color: #454c59;
    font-size: 14px;
}

@media (max-width: 640px) {
    .branded-fuel-shell {
        width: min(100%, calc(100% - 16px));
        padding-top: 14px;
    }

    .branded-fuel-header {
        padding-bottom: 18px;
    }

    .tsb-form-logo {
        width: min(450px, 92%);
        margin-bottom: 16px;
    }

    .branded-fuel-card {
        padding: 22px 17px;
        border-radius: 16px;
    }

    .branded-two-column {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .mileage-summary {
        padding-inline: 16px;
    }

    .branded-upload-box {
        min-height: 215px;
    }
}

@media (max-width: 430px) {
    .branded-two-column {
        grid-template-columns: 1fr;
    }

    .branded-fuel-header h1 {
        font-size: 30px;
    }

    .tsb-form-logo {
        width: 100%;
    }
}


/* Pack 003.1b refinement */
.vehicle-model-display {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    margin-top: 3px;
    border-radius: 9px;
    background: #f4f8ea;
    border: 1px solid #d7e7b6;
}

.vehicle-model-display strong {
    color: #588400;
    font-size: 13px;
}

.vehicle-model-display span {
    color: #4c5564;
    font-size: 13px;
    font-weight: 600;
}

.odometer-section {
    display: grid;
    gap: 14px;
}

.odometer-label > span {
    display: grid;
    gap: 2px;
}

.odometer-label > span small {
    color: #7a8190;
    font-weight: 500;
}

.odometer-label input {
    min-height: 76px;
    padding: 13px 18px;
    border: 2px solid #87ba26;
    border-radius: 13px;
    font-size: clamp(28px, 6vw, 40px);
    font-weight: 800;
    letter-spacing: .02em;
    color: #172033;
    background: #fff;
}

.odometer-label input::placeholder {
    color: #a7adba;
    font-weight: 600;
}

.odometer-summary {
    overflow: hidden;
    border: 1px solid #cfe0ad;
    border-radius: 14px;
    background: linear-gradient(135deg, #fbfdf8, #f2f7e9);
}

.odometer-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 15px 19px;
    border-bottom: 1px solid #dde6d1;
}

.odometer-stat span {
    color: #253040;
    font-weight: 700;
}

.odometer-stat strong {
    color: #172033;
    font-size: 20px;
}

.odometer-stat strong:not(.negative):last-child {
    color: #6ea20b;
}

.odometer-stat:first-child strong {
    color: #172033;
}

.odometer-stat strong.negative {
    color: #b42318;
}

.odometer-summary .mileage-message {
    padding: 14px 19px;
    margin: 0;
}

.receipt-section {
    display: grid;
    gap: 12px;
}

.receipt-preview {
    border: 1px solid #b9d47b;
    background: #f7faef;
    padding: 14px;
}

.receipt-preview-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.receipt-preview-status div {
    display: grid;
}

.receipt-preview-status strong {
    color: #4f7900;
}

.receipt-preview-status small {
    color: #667085;
}

.receipt-tick {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #7fb126;
    color: #fff;
    font-weight: 900;
}

.receipt-preview img {
    width: min(220px, 100%);
    max-height: 260px;
    margin: 0 auto;
    border-radius: 10px;
    object-fit: contain;
    background: #fff;
    border: 1px solid #d9dfd0;
}

.receipt-preview-actions {
    justify-content: center;
}

.branded-submit-button {
    position: relative;
    overflow: hidden;
}

.branded-submit-button::after {
    content: "→";
    position: absolute;
    right: 22px;
    font-size: 26px;
    line-height: 1;
}

.branded-thank-you-card {
    max-width: 660px;
    margin: 4vh auto 0;
}

.verification-progress {
    margin: 24px 0;
    padding: 20px;
    border: 1px solid #d6e5b8;
    border-radius: 15px;
    background: #f8fbf2;
    text-align: left;
}

.verification-progress h2 {
    margin: 0 0 17px;
    font-size: 18px;
    color: #172033;
}

.verification-step {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 11px;
    padding: 12px 0;
    border-bottom: 1px solid #dfe7d2;
}

.verification-step:last-child {
    border-bottom: 0;
}

.verification-step > span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-weight: 900;
}

.verification-step.is-complete > span {
    background: #7fb126;
    color: #fff;
}

.verification-step.is-pending > span {
    background: #fff4d5;
    color: #b54708;
}

.verification-step div {
    display: grid;
    gap: 2px;
}

.verification-step small {
    color: #667085;
}

@media (max-width: 640px) {
    .odometer-label input {
        min-height: 68px;
        font-size: 31px;
    }

    .vehicle-model-display {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .odometer-stat {
        padding: 13px 15px;
    }

    .odometer-stat strong {
        font-size: 18px;
    }
}


/* Pack 004 user and vehicle administration */
.login-logo {
    width: min(330px, 90%);
    max-height: 110px;
    object-fit: contain;
    margin: 0 auto 12px;
}

.button-full {
    width: 100%;
}

.button-microsoft {
    width: 100%;
    min-height: 50px;
    gap: 12px;
    background: #2f2f2f;
    color: #fff;
}

.button-microsoft:hover {
    background: #111;
}

.microsoft-mark {
    display: grid;
    grid-template-columns: repeat(2, 8px);
    gap: 2px;
}

.microsoft-mark i {
    display: block;
    width: 8px;
    height: 8px;
}

.microsoft-mark i:nth-child(1) { background: #f25022; }
.microsoft-mark i:nth-child(2) { background: #7fba00; }
.microsoft-mark i:nth-child(3) { background: #00a4ef; }
.microsoft-mark i:nth-child(4) { background: #ffb900; }

.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted);
    margin: 22px 0;
    font-size: 13px;
}

.login-divider::before,
.login-divider::after {
    content: "";
    height: 1px;
    background: var(--border);
    flex: 1;
}

.row-editor summary {
    cursor: pointer;
    color: #5f8c05;
    font-weight: 800;
}

.inline-editor {
    min-width: 270px;
    display: grid;
    gap: 11px;
    padding: 14px;
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.sync-history-panel {
    margin-top: 22px;
}

.sync-summary-row td {
    background: var(--surface-2);
    color: var(--muted);
    font-size: 13px;
}

.vehicle-admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 18px;
}

.vehicle-admin-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
    background: var(--surface);
}

.vehicle-admin-card.is-archived {
    opacity: .65;
}

.vehicle-admin-heading {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: flex-start;
}

.vehicle-admin-heading h2 {
    margin: 10px 0 0;
    font-size: 19px;
}

.registration-plate {
    display: inline-flex;
    padding: 6px 11px;
    border-radius: 6px;
    background: #f7df3c;
    color: #111;
    font-weight: 900;
    letter-spacing: .05em;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}

.vehicle-admin-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0;
}

.vehicle-admin-details div {
    padding: 11px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 10px;
}

.vehicle-admin-details dt {
    color: var(--muted);
    font-size: 12px;
}

.vehicle-admin-details dd {
    margin: 4px 0 0;
    font-weight: 800;
}

.vehicle-admin-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.button-danger {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid #fecdca;
}

.vehicle-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.form-section-title {
    grid-column: 1 / -1;
    margin-top: 8px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--border);
    color: #5f8c05;
    font-size: 16px;
    font-weight: 900;
}

.full-width-field,
.form-checkbox,
.vehicle-form-grid .form-actions {
    grid-column: 1 / -1;
}

.form-checkbox {
    align-self: end;
}

@media (max-width: 850px) {
    .vehicle-admin-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .vehicle-form-grid {
        grid-template-columns: 1fr;
    }

    .form-section-title,
    .full-width-field,
    .form-checkbox,
    .vehicle-form-grid .form-actions {
        grid-column: auto;
    }

    .vehicle-admin-details {
        grid-template-columns: 1fr;
    }

    .vehicle-admin-actions {
        flex-direction: column;
    }

    .vehicle-admin-actions .button,
    .vehicle-admin-actions form,
    .vehicle-admin-actions form button {
        width: 100%;
    }
}


/* Pack 005 People and Import Centre */
.import-upload-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    padding: 20px;
    align-items: center;
}

.mapping-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.mapping-list {
    display: grid;
    gap: 0;
}

.mapping-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 14px;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
}

.mapping-row strong {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #5f8c05;
}

.mapping-actions {
    display: flex;
    justify-content: flex-end;
    margin: 20px 0;
}

.import-run-panel {
    margin-top: 22px;
    padding: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.import-run-panel h2 {
    margin: 0 0 5px;
}

.import-run-panel p {
    margin: 0;
    color: var(--muted);
}

button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

@media (max-width: 900px) {
    .mapping-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .import-upload-form {
        grid-template-columns: 1fr;
    }

    .mapping-row {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .import-run-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .import-run-panel button {
        width: 100%;
    }
}


/* Pack 006 Non-Fleet Fuel */
.non-fleet-panel {
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid #cfe0ad;
    border-radius: 14px;
    background: linear-gradient(145deg, #fbfdf8, #f2f7e9);
}

.non-fleet-heading {
    display: grid;
    gap: 3px;
}

.non-fleet-heading strong {
    color: #172033;
    font-size: 17px;
}

.non-fleet-heading span {
    color: #667085;
    font-size: 13px;
}

.non-fleet-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.non-fleet-option {
    position: relative;
    display: block;
    cursor: pointer;
}

.non-fleet-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.non-fleet-option span {
    min-height: 94px;
    display: grid;
    align-content: center;
    gap: 4px;
    padding: 14px;
    border: 2px solid #d8dfcc;
    border-radius: 12px;
    background: #fff;
    text-align: center;
    transition: .16s ease;
}

.non-fleet-option strong {
    color: #172033;
}

.non-fleet-option small {
    color: #667085;
    font-weight: 500;
    line-height: 1.3;
}

.non-fleet-option input:checked + span {
    border-color: #7fb126;
    background: #f3f8e7;
    box-shadow: 0 0 0 3px rgba(127, 177, 38, .12);
}

.non-fleet-fields {
    display: grid;
    gap: 14px;
    padding-top: 4px;
}

.fuel-type-badge {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    background: #eef2f6;
    color: #344054;
}

.fuel-type-fleet_vehicle {
    background: #ecfdf3;
    color: #027a48;
}

.fuel-type-hire_vehicle {
    background: #eff8ff;
    color: #175cd3;
}

.fuel-type-jerry_can {
    background: #fff6ed;
    color: #b54708;
}

.fuel-type-other {
    background: #fef3f2;
    color: #b42318;
}

.panel-header p .fuel-type-badge,
.panel-header p .status {
    margin-right: 6px;
}

@media (max-width: 640px) {
    .non-fleet-options {
        grid-template-columns: 1fr;
    }

    .non-fleet-option span {
        min-height: 72px;
    }
}


/* Pack 007 Legacy Receipt Import */
.receipt-path-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: end;
    padding: 20px;
}

.path-guidance {
    margin: 0 20px 20px;
    padding: 14px;
    border: 1px solid #d6e5b8;
    border-radius: 10px;
    background: #f8fbf2;
    color: #475467;
}

.path-guidance code {
    color: #5f8c05;
}

.receipt-import-stats {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-bottom: 22px;
}

.receipt-import-actions {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    padding: 22px;
    margin-bottom: 22px;
}

.receipt-import-actions h2 {
    margin: 0 0 5px;
}

.receipt-import-actions p {
    margin: 0;
    color: var(--muted);
}

.receipt-action-buttons {
    display: flex;
    gap: 10px;
}

.receipt-import-status {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    background: #eef2f6;
    color: #344054;
}

.receipt-import-status-matched {
    background: #eff8ff;
    color: #175cd3;
}

.receipt-import-status-imported,
.receipt-import-status-already_imported {
    background: #ecfdf3;
    color: #027a48;
}

.receipt-import-status-missing,
.receipt-import-status-error {
    background: #fef3f2;
    color: #b42318;
}

.receipt-import-status-duplicate_source {
    background: #fff6ed;
    color: #b54708;
}

.receipt-import-status-unused {
    background: #f2f4f7;
    color: #475467;
}

.path-cell {
    max-width: 420px;
    word-break: break-word;
    color: var(--muted);
    font-size: 12px;
}

@media (max-width: 1000px) {
    .receipt-import-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .receipt-path-form {
        grid-template-columns: 1fr;
    }

    .receipt-import-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .receipt-import-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .receipt-action-buttons {
        flex-direction: column;
    }

    .receipt-action-buttons form,
    .receipt-action-buttons button {
        width: 100%;
    }
}


/* Pack 007e Receipt Preview Lightbox */
.receipt-detail-row {
    align-items: start;
}

.receipt-thumbnail-button {
    position: relative;
    display: block;
    width: min(300px, 100%);
    padding: 0;
    overflow: hidden;
    border: 1px solid #e4e7ec;
    border-radius: 14px;
    background: #ffffff;
    cursor: zoom-in;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .10);
    transition: transform .18s ease, box-shadow .18s ease;
}

.receipt-thumbnail-button:hover,
.receipt-thumbnail-button:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(16, 24, 40, .16);
}

.receipt-detail-thumbnail {
    display: block;
    width: 100%;
    height: 320px;
    object-fit: contain;
    object-position: center;
    background: #ffffff;
}

.receipt-thumbnail-overlay {
    position: absolute;
    inset: auto 0 0;
    display: grid;
    gap: 2px;
    padding: 12px 14px;
    color: #fff;
    text-align: left;
    opacity: 0;
    background: linear-gradient(transparent, rgba(10, 18, 32, .88));
    transition: opacity .18s ease;
}

.receipt-thumbnail-button:hover .receipt-thumbnail-overlay,
.receipt-thumbnail-button:focus-visible .receipt-thumbnail-overlay {
    opacity: 1;
}

.receipt-thumbnail-overlay strong {
    font-size: 14px;
}

.receipt-thumbnail-overlay small {
    color: rgba(255,255,255,.78);
}

.receipt-document-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(320px, 100%);
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface-2);
    color: var(--text);
    text-decoration: none;
}

.receipt-document-card:hover {
    border-color: #8fbd36;
    background: #f6faee;
}

.receipt-document-card > span:last-child {
    display: grid;
    gap: 2px;
}

.receipt-document-card small {
    color: var(--muted);
    word-break: break-word;
}

.receipt-document-icon {
    min-width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #172033;
    color: #93c120;
    font-size: 11px;
    font-weight: 900;
}

.receipt-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 20px;
}

.receipt-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 11, 22, .84);
    backdrop-filter: blur(8px);
}

.receipt-lightbox-dialog {
    position: relative;
    width: min(1050px, 100%);
    max-height: calc(100vh - 40px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 30px 120px rgba(0, 0, 0, .5);
}

.receipt-lightbox-header,
.receipt-lightbox-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: var(--surface);
}

.receipt-lightbox-header {
    border-bottom: 1px solid var(--border);
}

.receipt-lightbox-footer {
    justify-content: flex-end;
    border-top: 1px solid var(--border);
}

.receipt-lightbox-header h2 {
    margin: 0;
    font-size: 19px;
}

.receipt-lightbox-header p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.receipt-lightbox-close {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
}

.receipt-lightbox-content {
    min-height: 0;
    overflow: auto;
    padding: 20px;
    background: #101828;
    text-align: center;
}

.receipt-lightbox-content img {
    display: block;
    max-width: 100%;
    height: auto;
    max-height: calc(100vh - 210px);
    margin: 0 auto;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
}

@media (max-width: 640px) {
    .receipt-thumbnail-button {
        width: 100%;
    }

    .receipt-detail-thumbnail {
        height: 280px;
    }

    .receipt-lightbox {
        padding: 8px;
    }

    .receipt-lightbox-dialog {
        max-height: calc(100vh - 16px);
        border-radius: 13px;
    }

    .receipt-lightbox-header,
    .receipt-lightbox-footer {
        padding: 13px;
    }

    .receipt-lightbox-footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .receipt-lightbox-footer .button {
        width: 100%;
    }

    .receipt-lightbox-content {
        padding: 10px;
    }

    .receipt-lightbox-content img {
        max-height: calc(100vh - 190px);
    }
}


/* Pack 008 Radius Velocity Integration */
.radius-stat-grid {
    margin-bottom: 22px;
}

.radius-connection-state {
    font-size: 25px !important;
}

.radius-state-success {
    color: var(--success);
}

.radius-state-failed {
    color: var(--danger);
}

.radius-state-never {
    color: var(--muted);
}

.radius-layout,
.radius-transaction-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr);
    gap: 22px;
    margin-bottom: 22px;
}

.radius-side-stack {
    display: grid;
    align-content: start;
    gap: 22px;
}

.radius-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 20px;
}

.radius-actions form,
.radius-actions button {
    width: 100%;
}

.radius-status-list {
    margin: 0;
    padding: 0 20px 20px;
}

.radius-status-list > div {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.radius-status-list dt {
    color: var(--muted);
}

.radius-status-list dd {
    margin: 0;
    font-weight: 800;
}

.radius-code-block {
    padding: 20px;
}

.radius-code-block code {
    display: block;
    padding: 13px;
    border-radius: 9px;
    background: #101828;
    color: #d6f29d;
    overflow-wrap: anywhere;
}

.radius-code-block p {
    margin: 12px 0 0;
    color: var(--muted);
}

.radius-sample-panel {
    margin-bottom: 22px;
}

.radius-sample-panel pre,
.radius-raw-panel pre {
    max-height: 600px;
    overflow: auto;
    margin: 0;
    padding: 20px;
    background: #101828;
    color: #d0d5dd;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.radius-class,
.radius-match {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.radius-class-fuel {
    background: #ecfdf3;
    color: #027a48;
}

.radius-class-charge_fee {
    background: #fff6ed;
    color: #b54708;
}

.radius-class-ev {
    background: #eff8ff;
    color: #175cd3;
}

.radius-class-unknown {
    background: #f2f4f7;
    color: #475467;
}

.radius-match-exact,
.radius-match-confirmed {
    background: #ecfdf3;
    color: #027a48;
}

.radius-match-probable {
    background: #eff8ff;
    color: #175cd3;
}

.radius-match-manual_review {
    background: #fff6ed;
    color: #b54708;
}

.radius-match-unmatched,
.radius-match-dismissed {
    background: #fef3f2;
    color: #b42318;
}

.radius-match-card {
    display: grid;
    gap: 17px;
    padding: 20px;
}

.radius-match-card > strong {
    font-size: 26px;
}

.radius-match-card > p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.radius-score-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.radius-score-grid div {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
}

.radius-score-grid span,
.radius-score-grid strong {
    display: block;
}

.radius-score-grid span {
    color: var(--muted);
    font-size: 12px;
}

.radius-score-grid strong {
    margin-top: 4px;
    font-size: 20px;
}

@media (max-width: 1000px) {
    .radius-layout,
    .radius-transaction-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .radius-actions {
        grid-template-columns: 1fr;
    }

    .radius-status-list > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}


/* Pack 009 Radius Reconciliation & Fuel Cards */
.review-tabs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.review-tab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface);
    color: var(--muted);
    font-weight: 800;
}

.review-tab strong {
    min-width: 27px;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--surface-2);
    text-align: center;
}

.review-tab.is-active {
    border-color: var(--brand);
    color: var(--text);
    box-shadow: 0 0 0 3px rgba(147,193,32,.12);
}

.reconciliation-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
    padding: 17px 20px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
}

.reconciliation-heading > div {
    display: flex;
    align-items: center;
    gap: 13px;
}

.reconciliation-heading > div > strong {
    font-size: 24px;
}

.reconciliation-heading p {
    margin: 0;
    color: var(--muted);
}

.reconciliation-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-bottom: 22px;
}

.comparison-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--border);
    background: #f8fbf2;
}

.radius-comparison-title {
    background: #eff8ff;
}

.comparison-title span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.comparison-title strong {
    font-size: 19px;
}

.comparison-list {
    margin: 0;
    padding: 8px 22px 22px;
}

.comparison-list > div {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
}

.comparison-list dt {
    color: var(--muted);
}

.comparison-list dd {
    margin: 0;
    font-weight: 800;
}

.confidence-panel {
    margin-bottom: 22px;
}

.confidence-signals {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 20px;
}

.confidence-signal {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface-2);
}

.confidence-signal div {
    display: grid;
    gap: 4px;
}

.confidence-signal span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.4;
}

.confidence-signal b {
    font-size: 21px;
}

.confidence-signal-positive {
    border-color: #abefc6;
    background: var(--success-bg);
}

.confidence-signal-warning {
    border-color: #fedf89;
    background: var(--warning-bg);
}

.confidence-warnings {
    margin: 0 20px 20px;
    padding: 12px 15px;
    border-radius: 10px;
    background: var(--warning-bg);
    color: var(--warning);
}

.confidence-warnings p {
    margin: 5px 0;
}

.reconciliation-actions-panel {
    margin-bottom: 22px;
}

.review-action-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 13px;
    align-items: end;
    padding: 20px;
}

.secondary-review-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    padding: 0 20px 20px;
}

.secondary-review-actions form {
    display: grid;
    gap: 10px;
}

.secondary-review-actions textarea {
    min-height: 90px;
}

.fuel-card-status {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.fuel-card-status-active {
    background: var(--success-bg);
    color: var(--success);
}

.fuel-card-status-blocked,
.fuel-card-status-lost {
    background: var(--danger-bg);
    color: var(--danger);
}

.fuel-card-status-cancelled,
.fuel-card-status-expired {
    background: var(--surface-2);
    color: var(--muted);
}

.radius-linked-panel {
    margin-top: 22px;
}

.radius-linked-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 20px;
}

.radius-linked-grid > div {
    display: grid;
    gap: 4px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface-2);
}

.radius-linked-grid span,
.radius-linked-grid small {
    color: var(--muted);
}

.radius-linked-grid strong {
    font-size: 17px;
}

@media (max-width: 1100px) {
    .review-tabs {
        grid-template-columns: repeat(3, 1fr);
    }

    .reconciliation-grid {
        grid-template-columns: 1fr;
    }

    .review-action-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .review-tabs {
        grid-template-columns: 1fr 1fr;
    }

    .confidence-signals,
    .secondary-review-actions,
    .radius-linked-grid {
        grid-template-columns: 1fr;
    }

    .reconciliation-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .comparison-list > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}


/* Pack 009b Registration Intelligence, Amount Comparison & Compact Search */
.amount-saving-note,
.amount-match-note {
    display: block;
    margin-top: 4px;
    font-size: 12px;
}

.amount-saving-note {
    color: var(--success);
}

.amount-match-note {
    color: var(--muted);
}

.manual-match-summary {
    margin-bottom: 22px;
}

.top-alternatives {
    padding: 18px 20px 20px;
}

.top-alternatives h3 {
    margin: 0 0 12px;
    font-size: 15px;
}

.alternative-card {
    display: inline-grid;
    gap: 3px;
    min-width: 200px;
    margin: 0 8px 8px 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.alternative-card:hover,
.alternative-card:focus-visible {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(147,193,32,.12);
}

.alternative-card span,
.alternative-card small {
    color: var(--muted);
}

.manual-match-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: grid;
    place-items: center;
    padding: 20px;
}

.manual-match-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 11, 22, .78);
    backdrop-filter: blur(6px);
}

.manual-match-dialog {
    position: relative;
    width: min(1400px, 100%);
    max-height: calc(100vh - 40px);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 30px 120px rgba(0,0,0,.45);
}

.manual-match-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
}

.manual-match-modal-header h2,
.manual-match-modal-header p {
    margin: 0;
}

.manual-match-modal-header p {
    margin-top: 4px;
    color: var(--muted);
}

.manual-match-close {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
}

.manual-match-search {
    display: grid;
    grid-template-columns: minmax(260px, 2fr) repeat(5, minmax(130px, 1fr)) auto;
    gap: 12px;
    align-items: end;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}

.manual-search-wide {
    grid-column: span 2;
}

.manual-include-linked {
    min-height: 49px;
    margin: 0;
}

.manual-match-results {
    min-height: 0;
    overflow: auto;
}

.manual-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 14px;
    border-top: 1px solid var(--border);
}

.manual-pagination a {
    min-width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    background: var(--surface);
}

.manual-pagination a.is-active {
    border-color: var(--brand);
    background: var(--brand);
    color: #172033;
    font-weight: 900;
}

.button-small {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 12px;
}

.sticky-review-actions {
    position: sticky;
    bottom: 16px;
    z-index: 40;
    box-shadow: 0 18px 50px rgba(16,24,40,.18);
}

@media (max-width: 1200px) {
    .manual-match-search {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .manual-search-wide {
        grid-column: span 2;
    }
}

@media (max-width: 720px) {
    .manual-match-modal {
        padding: 8px;
    }

    .manual-match-dialog {
        max-height: calc(100vh - 16px);
        border-radius: 13px;
    }

    .manual-match-search {
        grid-template-columns: 1fr;
    }

    .manual-search-wide {
        grid-column: auto;
    }

    .alternative-card {
        width: 100%;
        margin-right: 0;
    }

    .sticky-review-actions {
        position: static;
    }
}


/* Pack 009c Confidence Engine v2 */
.why-not-perfect {
    margin: 0 20px 20px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
}

.why-not-perfect h3 {
    margin: 0 0 12px;
    font-size: 16px;
}

.why-not-perfect > div {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.why-not-perfect > div:last-child {
    border-bottom: 0;
}

.why-not-perfect span {
    display: grid;
    gap: 3px;
}

.why-not-perfect small {
    color: var(--muted);
    line-height: 1.4;
}

.why-not-perfect b {
    color: var(--warning);
    font-size: 17px;
}


/* Pack 009d Management Fee Closeout */
.management-fee-complete {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 20px;
}

.management-fee-complete > div {
    display: grid;
    gap: 4px;
    padding: 14px;
    border: 1px solid #abefc6;
    border-radius: 11px;
    background: var(--success-bg);
}

.management-fee-complete span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.management-fee-complete strong {
    color: var(--text);
}

.management-fee-notes {
    grid-column: 1 / -1;
}

@media (max-width: 760px) {
    .management-fee-complete {
        grid-template-columns: 1fr;
    }
}


/* Pack 009e Admin Skip & Receipt Review Lightbox */
.receipt-review-link {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.admin-skip-panel {
    margin-bottom: 22px;
    border-color: #fecdca;
}

.admin-skip-form {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(300px, 1.5fr) auto;
    gap: 14px;
    align-items: end;
    padding: 20px;
}

.admin-skip-warning {
    display: grid;
    gap: 3px;
    min-height: 49px;
    padding: 10px 13px;
    border: 1px solid #fecdca;
    border-radius: 10px;
    background: var(--danger-bg);
}

.admin-skip-warning strong {
    color: var(--danger);
}

.admin-skip-warning span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

.skipped-transaction-panel {
    margin-bottom: 22px;
}

.skipped-transaction-summary {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
}

.skipped-transaction-summary strong {
    display: block;
}

.skipped-transaction-summary p {
    margin: 4px 0 0;
    color: var(--muted);
}

.radius-match-skipped {
    background: #f2f4f7;
    color: #475467;
}

.review-receipt-modal {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: grid;
    place-items: center;
    padding: 18px;
}

.review-receipt-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 11, 22, .84);
    backdrop-filter: blur(8px);
}

.review-receipt-dialog {
    position: relative;
    width: min(1100px, 100%);
    height: min(900px, calc(100vh - 36px));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 30px 120px rgba(0,0,0,.5);
}

.review-receipt-header,
.review-receipt-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--surface);
}

.review-receipt-header {
    border-bottom: 1px solid var(--border);
}

.review-receipt-footer {
    justify-content: flex-end;
    border-top: 1px solid var(--border);
}

.review-receipt-header h2,
.review-receipt-header p {
    margin: 0;
}

.review-receipt-header p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 13px;
}

.review-receipt-close {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
}

.review-receipt-content {
    min-height: 0;
    padding: 12px;
    background: #101828;
}

.review-receipt-content iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 9px;
    background: #ffffff;
}

@media (max-width: 900px) {
    .admin-skip-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .review-receipt-modal {
        padding: 8px;
    }

    .review-receipt-dialog {
        height: calc(100vh - 16px);
        border-radius: 13px;
    }

    .review-receipt-footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .review-receipt-footer .button {
        width: 100%;
    }
}


/* Pack 009f Fuel Submission Filters & Sorting */
.fuel-filter-form {
    border-bottom: 1px solid var(--border);
}

.fuel-filter-primary {
    display: grid;
    grid-template-columns: minmax(320px, 2fr) minmax(190px, .7fr) minmax(210px, .75fr) auto;
    gap: 12px;
    align-items: end;
    padding: 16px;
}

.fuel-filter-form label {
    display: grid;
    gap: 6px;
    font-size: 13px;
    font-weight: 800;
}

.fuel-filter-form label > span {
    color: var(--muted);
}

.fuel-filter-search {
    min-width: 0;
}

.fuel-advanced-filters {
    margin: 0 16px 16px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface-2);
}

.fuel-advanced-filters summary {
    padding: 12px 14px;
    color: var(--text);
    font-weight: 800;
    cursor: pointer;
}

.fuel-advanced-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 0 14px 14px;
}

.fuel-filter-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 0 16px 16px;
    color: var(--muted);
    font-size: 13px;
}

.table-empty-state {
    display: grid;
    justify-items: center;
    gap: 7px;
    padding: 48px 20px;
    text-align: center;
}

.table-empty-state strong {
    font-size: 18px;
}

.table-empty-state p {
    margin: 0 0 6px;
    color: var(--muted);
}

@media (max-width: 1100px) {
    .fuel-filter-primary {
        grid-template-columns: 1fr 1fr;
    }

    .fuel-advanced-filter-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .fuel-filter-primary,
    .fuel-advanced-filter-grid {
        grid-template-columns: 1fr;
    }

    .fuel-filter-primary .button {
        width: 100%;
    }

    .fuel-filter-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .fuel-filter-footer .button {
        width: 100%;
    }
}


/* Pack 010 Email Notifications */
.notification-admin-layout {
    display:grid;
    grid-template-columns:minmax(0,1.4fr) minmax(300px,.6fr);
    gap:22px;
    margin-bottom:22px;
}
.notification-preview-card {align-self:start;padding:28px;text-align:center}
.notification-preview-icon {
    width:78px;height:78px;margin:0 auto 18px;border-radius:50%;
    background:#edf6df;color:#6ba800;font-size:38px;line-height:78px
}
.notification-preview-card h2 {margin:0}
.notification-preview-card>p {margin:9px 0 22px;color:var(--muted)}
.notification-preview-card dl {margin:0;text-align:left}
.notification-preview-card dl>div {
    display:grid;grid-template-columns:90px 1fr;gap:12px;
    padding:11px 0;border-bottom:1px solid var(--border)
}
.notification-preview-card dt {color:var(--muted)}
.notification-preview-card dd {margin:0;font-weight:800;overflow-wrap:anywhere}
.notification-status {
    display:inline-flex;padding:5px 9px;border-radius:999px;
    font-size:12px;font-weight:800
}
.notification-status-sent {background:var(--success-bg);color:var(--success)}
.notification-status-failed {background:var(--danger-bg);color:var(--danger)}
.notification-status-pending {background:var(--warning-bg);color:var(--warning)}
.notification-error-cell {
    max-width:330px;color:var(--muted);font-size:12px;overflow-wrap:anywhere
}
@media(max-width:1000px){.notification-admin-layout{grid-template-columns:1fr}}


/* Pack 010.1 Notification Test Submission Mode */
.test-mode-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding: 14px 18px;
    border: 1px solid #fedf89;
    border-radius: 12px;
    background: #fffaeb;
    color: #7a4d00;
}

.test-mode-banner strong {
    padding: 5px 9px;
    border-radius: 999px;
    background: #f79009;
    color: #fff;
    font-size: 12px;
}

.test-submission-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 22px;
}

.test-submission-form label {
    display: grid;
    gap: 7px;
    font-weight: 800;
}

.test-dynamic-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.test-submission-summary {
    display: grid;
    gap: 7px;
    padding: 16px;
    border: 1px solid #abefc6;
    border-radius: 11px;
    background: var(--success-bg);
}

.test-submission-summary span {
    color: var(--muted);
    font-size: 13px;
}

.test-review-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.test-receipt-panel {
    align-self: start;
}

.test-receipt-button {
    width: calc(100% - 40px);
    display: grid;
    justify-items: center;
    gap: 7px;
    margin: 20px;
    padding: 36px 20px;
    border: 2px dashed var(--brand);
    border-radius: 13px;
    background: var(--surface-2);
    color: var(--text);
    cursor: zoom-in;
}

.test-receipt-button span {
    font-size: 38px;
}

.test-receipt-button small {
    color: var(--muted);
}

.test-expired-panel {
    max-width: 650px;
    margin: 70px auto;
    padding: 45px;
    text-align: center;
}

.test-expired-icon {
    font-size: 55px;
}

.test-expired-panel h1 {
    margin-bottom: 10px;
}

.test-expired-panel p {
    margin-bottom: 22px;
    color: var(--muted);
}

@media (max-width: 850px) {
    .test-submission-form,
    .test-dynamic-grid,
    .test-review-grid {
        grid-template-columns: 1fr;
    }
}


/* Pack 010.2 Editable Email Template & Preview */
.email-template-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, .5fr);
    gap: 22px;
    align-items: start;
}

.email-template-editor-panel {
    min-width: 0;
}

.email-template-fields {
    display: grid;
    gap: 18px;
    padding: 20px;
}

.email-template-fields > label {
    display: grid;
    gap: 7px;
    font-weight: 800;
}

.email-template-fields textarea {
    min-height: 720px;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre;
    tab-size: 2;
}

.email-template-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 20px 20px;
}

.email-template-sidebar {
    position: sticky;
    top: 18px;
}

.template-variable-list {
    display: grid;
    gap: 8px;
    padding: 16px;
}

.template-variable {
    display: grid;
    gap: 4px;
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.template-variable:hover {
    border-color: var(--brand);
}

.template-variable code {
    color: var(--brand-dark, #5f8f00);
    font-weight: 900;
}

.template-variable span {
    color: var(--muted);
    font-size: 12px;
}

.template-test-note {
    margin: 0 16px 16px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
}

.template-test-note p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.template-test-note dl {
    margin: 0;
}

.template-test-note dl > div {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 8px;
    padding: 6px 0;
}

.template-test-note dt {
    color: var(--muted);
}

.template-test-note dd {
    margin: 0;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.email-template-preview-panel {
    grid-column: 1 / -1;
}

.email-preview-frame-wrap {
    padding: 18px;
    background: #dfe3e8;
}

.email-preview-frame {
    display: block;
    width: 100%;
    min-height: 900px;
    border: 0;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 12px 34px rgba(16, 24, 40, .16);
}

@media (max-width: 1050px) {
    .email-template-workspace {
        grid-template-columns: 1fr;
    }

    .email-template-sidebar {
        position: static;
    }
}

@media (max-width: 650px) {
    .email-template-actions {
        display: grid;
    }

    .email-template-actions .button {
        width: 100%;
    }

    .email-preview-frame {
        min-height: 720px;
    }
}


/* Pack 010.2a Notification Page Rendering Fix */
.notification-admin-layout .vehicle-form-grid {
    padding: 20px;
}

.notification-admin-layout .vehicle-form-grid > label {
    min-width: 0;
}

.notification-admin-layout .vehicle-form-grid input,
.notification-admin-layout .vehicle-form-grid textarea {
    width: 100%;
}


/* Pack 010.2b Template Editor Rendering Fix */
.notification-template-error {
    max-width: 760px;
    margin: 55px auto;
    padding: 36px;
}

.notification-template-error-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--danger-bg);
    color: var(--danger);
    font-size: 34px;
    font-weight: 900;
}

.notification-template-error h1 {
    margin: 0 0 10px;
}

.notification-template-error > p {
    color: var(--muted);
}

.notification-template-error dl {
    margin: 24px 0;
    border: 1px solid var(--border);
    border-radius: 11px;
    overflow: hidden;
}

.notification-template-error dl > div {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 14px;
    padding: 13px 15px;
    border-bottom: 1px solid var(--border);
}

.notification-template-error dl > div:last-child {
    border-bottom: 0;
}

.notification-template-error dt {
    color: var(--muted);
    font-weight: 800;
}

.notification-template-error dd {
    margin: 0;
    overflow-wrap: anywhere;
}


/* Simple Fuel Submission Email Template */
.simple-email-template-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, .5fr);
    gap: 22px;
    align-items: start;
}

.simple-email-editor {
    min-width: 0;
}

.simple-email-fields {
    display: grid;
    gap: 17px;
    padding: 20px;
}

.simple-email-fields > label,
.simple-email-recipient-grid label,
.simple-test-panel label {
    display: grid;
    gap: 7px;
    font-weight: 800;
}

.simple-email-recipient-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.simple-email-fields textarea[name="html_template"] {
    min-height: 760px;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre;
    tab-size: 2;
}

.simple-email-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 20px 20px;
}

.simple-email-sidebar {
    display: grid;
    gap: 18px;
    position: sticky;
    top: 18px;
}

.simple-test-panel {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.simple-delivery-history {
    margin-top: 22px;
}

.simple-email-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 20px;
}

.simple-email-modal.is-hidden {
    display: none;
}

.simple-email-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 11, 22, .78);
}

.simple-email-modal-dialog {
    position: relative;
    width: min(920px, 100%);
    height: min(880px, calc(100vh - 40px));
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .35);
}

.simple-email-modal-dialog > header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
}

.simple-email-modal-dialog > header h2,
.simple-email-modal-dialog > header p {
    margin: 0;
}

.simple-email-modal-dialog > header p {
    margin-top: 3px;
    color: var(--muted);
}

.simple-email-modal-dialog > header button {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 26px;
    cursor: pointer;
}

.simple-email-modal-dialog iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: #eef1f5;
}

@media (max-width: 1050px) {
    .simple-email-template-grid {
        grid-template-columns: 1fr;
    }

    .simple-email-sidebar {
        position: static;
    }
}

@media (max-width: 720px) {
    .simple-email-recipient-grid {
        grid-template-columns: 1fr;
    }

    .simple-email-actions {
        display: grid;
    }

    .simple-email-actions .button,
    .simple-test-panel .button {
        width: 100%;
    }

    .simple-email-modal {
        padding: 0;
    }

    .simple-email-modal-dialog {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
}


/* Vehicle fuel receipt QR codes */
.vehicle-qr-layout {
    display: grid;
    grid-template-columns: minmax(300px, .78fr) minmax(420px, 1.22fr);
    gap: 22px;
    align-items: start;
}
.vehicle-qr-information-column { display: grid; gap: 22px; }
.vehicle-qr-details { margin: 0; }
.vehicle-qr-details > div {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 13px 18px;
    border-top: 1px solid var(--border);
}
.vehicle-qr-details dt { color: var(--muted); font-weight: 700; }
.vehicle-qr-details dd { margin: 0; font-weight: 750; }
.vehicle-qr-url-box { padding: 18px; }
.vehicle-qr-url-box label { display: block; margin-bottom: 8px; font-weight: 800; }
.vehicle-qr-url-box > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.vehicle-qr-preview-panel { padding-bottom: 20px; }
.vehicle-qr-label {
    width: min(440px, calc(100% - 40px));
    margin: 22px auto;
    padding: 28px 30px 30px;
    border: 5px solid #93c120;
    border-radius: 28px;
    background: #fff;
    color: #0f1b33;
    box-shadow: 0 18px 45px rgba(15, 27, 51, .14);
    text-align: center;
}
.vehicle-qr-logo { display: block; max-width: 82%; max-height: 120px; margin: 0 auto 18px; object-fit: contain; }
.vehicle-qr-divider { height: 3px; margin: 13px 0 18px; background: #93c120; }
.vehicle-qr-code { display: grid; place-items: center; min-height: 360px; }
.vehicle-qr-code canvas, .vehicle-qr-code img { display: block; width: min(360px, 100%) !important; height: auto !important; image-rendering: pixelated; }
.vehicle-qr-registration { margin: 20px 0 12px; font-size: clamp(44px, 7vw, 72px); line-height: 1; font-weight: 950; letter-spacing: .035em; white-space: nowrap; }
.vehicle-qr-instruction { font-size: clamp(24px, 3.2vw, 34px); line-height: 1.12; font-weight: 950; letter-spacing: .02em; }
.vehicle-qr-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0 20px; }
.fuel-qr-selected-notice {
    display: grid;
    gap: 3px;
    margin-bottom: 18px;
    padding: 13px 15px;
    border: 1px solid #b8da76;
    border-radius: 12px;
    background: #f2f9e6;
    color: #365400;
}
.fuel-qr-selected-notice strong { font-size: 15px; }
.fuel-qr-selected-notice span { font-size: 13px; }
@media (max-width: 1050px) { .vehicle-qr-layout { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
    .vehicle-qr-details > div { grid-template-columns: 1fr; gap: 4px; }
    .vehicle-qr-url-box > div { grid-template-columns: 1fr; }
    .vehicle-qr-label { width: calc(100% - 24px); padding: 22px 18px 24px; }
    .vehicle-qr-code { min-height: 280px; }
}
@media print {
    body:has([data-printable-qr-label]) * { visibility: hidden !important; }
    body:has([data-printable-qr-label]) [data-printable-qr-label],
    body:has([data-printable-qr-label]) [data-printable-qr-label] * { visibility: visible !important; }
    body:has([data-printable-qr-label]) [data-printable-qr-label] {
        position: fixed;
        inset: 0;
        width: 105mm;
        min-height: 148mm;
        margin: 0 auto;
        padding: 8mm;
        border-width: 1.5mm;
        border-radius: 6mm;
        box-shadow: none;
        break-inside: avoid;
    }
    .vehicle-qr-logo { max-height: 28mm; }
    .vehicle-qr-code { min-height: 70mm; }
    .vehicle-qr-code canvas, .vehicle-qr-code img { width: 70mm !important; height: 70mm !important; }
    .vehicle-qr-registration { font-size: 15mm; }
    .vehicle-qr-instruction { font-size: 7mm; }
    @page { size: A6 portrait; margin: 0; }
}


/* Vehicle QR batch printing */
.vehicle-qr-batch {
    display: grid;
    gap: 22px;
}

.vehicle-qr-selection-count {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #edf7d8;
    color: #557700;
    font-weight: 850;
}

.vehicle-qr-batch-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.vehicle-qr-search {
    display: grid;
    gap: 7px;
    flex: 1;
    max-width: 620px;
    font-weight: 800;
}

.vehicle-qr-selection-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vehicle-qr-select-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
    padding: 20px;
}

.vehicle-qr-select-card {
    position: relative;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 11px;
    min-height: 92px;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.vehicle-qr-select-card:hover {
    border-color: #93c120;
    box-shadow: 0 8px 24px rgba(15, 27, 51, .08);
}

.vehicle-qr-select-card:has(input:checked) {
    border-color: #93c120;
    background: #f7fbef;
    box-shadow: 0 0 0 2px rgba(147, 193, 32, .15);
}

.vehicle-qr-select-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.vehicle-qr-select-check {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border: 2px solid #c9d0da;
    border-radius: 7px;
    color: transparent;
    font-size: 16px;
    font-weight: 950;
}

.vehicle-qr-select-card:has(input:checked) .vehicle-qr-select-check {
    border-color: #93c120;
    background: #93c120;
    color: #0f1b33;
}

.vehicle-qr-select-content {
    display: grid;
    align-content: center;
    gap: 4px;
    min-width: 0;
}

.vehicle-qr-select-content strong {
    color: var(--text);
    font-size: 20px;
}

.vehicle-qr-select-content small {
    overflow: hidden;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vehicle-qr-option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(280px, 1fr);
    gap: 14px;
    padding: 20px;
}

.vehicle-qr-option-grid > label:not(.checkbox-card) {
    display: grid;
    gap: 7px;
    font-weight: 800;
}

.vehicle-qr-cut-guide-option {
    margin: 0;
}

.vehicle-qr-print-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 9px;
    padding: 0 20px 20px;
}

.vehicle-qr-sheet-empty {
    padding: 52px 20px;
    color: var(--muted);
    text-align: center;
}

.vehicle-qr-sheet-empty strong {
    display: block;
    margin-bottom: 5px;
    color: var(--text);
    font-size: 19px;
}

.vehicle-qr-sheet-preview {
    display: grid;
    gap: 28px;
    padding: 24px;
    overflow: auto;
    background: #dfe3e8;
}

.vehicle-qr-print-sheet {
    --sheet-width: 210mm;
    --sheet-height: 297mm;
    --sheet-padding: 4mm;
    --sheet-gap: 4mm;
    display: grid;
    place-items: center;
    width: var(--sheet-width);
    min-width: var(--sheet-width);
    height: var(--sheet-height);
    margin: 0 auto;
    padding: var(--sheet-padding);
    gap: var(--sheet-gap);
    background: #fff;
    box-shadow: 0 12px 34px rgba(15, 27, 51, .18);
    box-sizing: border-box;
}

.vehicle-qr-print-sheet.is-landscape {
    --sheet-width: 297mm;
    --sheet-height: 210mm;
}

.vehicle-qr-print-sheet.labels-1 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.vehicle-qr-print-sheet.labels-2 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
}

.vehicle-qr-print-sheet.labels-4 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.vehicle-qr-print-sheet.labels-6 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

.vehicle-qr-print-sheet.labels-8 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

.vehicle-qr-print-sheet.is-landscape.labels-6 {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.vehicle-qr-print-sheet.is-landscape.labels-8 {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

/*
 * Every batch label keeps the exact 105 × 148 A6 proportion used by the
 * individual vehicle label. It is scaled uniformly to fit its grid cell.
 */
.vehicle-qr-sheet-label {
    container-type: size;
    display: grid;
    grid-template-rows: 15% .45% 53% 11% .45% 12%;
    align-items: center;
    justify-items: center;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 105 / 148;
    padding: 4.8cqw 6cqw 5.2cqw;
    overflow: hidden;
    border: .75cqw solid #93c120;
    border-radius: 4.8cqw;
    background: #fff;
    color: #0f1b33;
    text-align: center;
    box-sizing: border-box;
}

.vehicle-qr-print-sheet.has-cut-guides .vehicle-qr-sheet-label {
    outline: .2mm dashed #9da5b1;
    outline-offset: 2mm;
}

.vehicle-qr-sheet-logo {
    display: block;
    width: 82%;
    height: 100%;
    margin: 0 auto;
    object-fit: contain;
}

.vehicle-qr-sheet-divider {
    width: 100%;
    height: 100%;
    margin: 0;
    background: #93c120;
}

.vehicle-qr-sheet-code {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.vehicle-qr-sheet-code canvas,
.vehicle-qr-sheet-code img {
    display: block;
    width: auto !important;
    height: 96% !important;
    max-width: 96% !important;
    max-height: 96% !important;
    aspect-ratio: 1;
    image-rendering: pixelated;
}

.vehicle-qr-sheet-registration {
    align-self: center;
    max-width: 100%;
    overflow: hidden;
    font-size: 11.2cqw;
    line-height: .95;
    font-weight: 950;
    letter-spacing: .025em;
    text-overflow: clip;
    white-space: nowrap;
}

.vehicle-qr-sheet-instruction {
    align-self: center;
    font-size: 5.1cqw;
    line-height: 1.08;
    font-weight: 950;
    letter-spacing: .01em;
}

/* More compact text only where the physical label becomes very small. */
.vehicle-qr-print-sheet.labels-6 .vehicle-qr-sheet-registration,
.vehicle-qr-print-sheet.labels-8 .vehicle-qr-sheet-registration {
    font-size: 10.4cqw;
}

.vehicle-qr-print-sheet.labels-6 .vehicle-qr-sheet-instruction,
.vehicle-qr-print-sheet.labels-8 .vehicle-qr-sheet-instruction {
    font-size: 4.7cqw;
}

@media (max-width: 1000px) {
    .vehicle-qr-batch-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .vehicle-qr-search {
        max-width: none;
    }

    .vehicle-qr-option-grid {
        grid-template-columns: 1fr;
    }

    .vehicle-qr-sheet-preview {
        padding: 14px;
    }

    .vehicle-qr-print-sheet {
        transform-origin: top left;
    }
}

@media print {
    @page {
        size: A4 portrait;
        margin: 0;
    }

    body:has([data-vehicle-qr-batch]) .app-sidebar,
    body:has([data-vehicle-qr-batch]) .app-header,
    body:has([data-vehicle-qr-batch]) .page-title,
    body:has([data-vehicle-qr-batch]) .page-actions,
    body:has([data-vehicle-qr-batch]) .vehicle-qr-batch-controls,
    body:has([data-vehicle-qr-batch]) .vehicle-qr-print-options,
    body:has([data-vehicle-qr-batch]) .vehicle-qr-sheet-preview-panel > .panel-header {
        display: none !important;
    }

    body:has([data-vehicle-qr-batch]),
    body:has([data-vehicle-qr-batch]) .app-shell,
    body:has([data-vehicle-qr-batch]) .app-main,
    body:has([data-vehicle-qr-batch]) .content,
    body:has([data-vehicle-qr-batch]) .panel,
    body:has([data-vehicle-qr-batch]) .vehicle-qr-batch,
    body:has([data-vehicle-qr-batch]) .vehicle-qr-sheet-preview {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
    }

    .vehicle-qr-print-sheet {
        width: 210mm !important;
        min-width: 210mm !important;
        height: 297mm !important;
        margin: 0 !important;
        box-shadow: none !important;
        break-after: page;
        page-break-after: always;
    }

    .vehicle-qr-print-sheet.is-landscape {
        width: 297mm !important;
        min-width: 297mm !important;
        height: 210mm !important;
    }

    .vehicle-qr-print-sheet:last-child {
        break-after: auto;
        page-break-after: auto;
    }
}


/*
 * Vehicle QR batch print master-label correction.
 *
 * Every batch slot now contains the same fixed 105 × 148 mm label used by
 * the individual QR page. The whole master label is scaled as one object.
 */
.vehicle-qr-sheet-label {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    container-type: normal !important;
    aspect-ratio: auto !important;
}

.vehicle-qr-print-sheet.has-cut-guides
.vehicle-qr-sheet-label {
    outline: .2mm dashed #9da5b1 !important;
    outline-offset: -1mm !important;
}

.vehicle-qr-fixed-label {
    --label-scale: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 105mm;
    height: 148mm;
    padding: 6mm;
    overflow: hidden;
    border: 1.5mm solid #93c120;
    border-radius: 6mm;
    background: #fff;
    color: #0f1b33;
    text-align: center;
    box-sizing: border-box;
    transform:
        translate(-50%, -50%)
        scale(var(--label-scale));
    transform-origin: center center;
}

.vehicle-qr-fixed-logo {
    display: block;
    flex: 0 0 auto;
    width: 82mm;
    height: 24mm;
    margin: 0 auto 3mm;
    object-fit: contain;
}

.vehicle-qr-fixed-divider {
    flex: 0 0 auto;
    width: 100%;
    height: .7mm;
    margin: 0 0 4mm;
    background: #93c120;
}

.vehicle-qr-fixed-code {
    display: grid;
    flex: 0 0 67mm;
    place-items: center;
    width: 67mm;
    height: 67mm;
    min-width: 67mm;
    min-height: 67mm;
    margin: 0 auto;
    overflow: hidden;
}

.vehicle-qr-fixed-code canvas,
.vehicle-qr-fixed-code img {
    display: block;
    width: 67mm !important;
    height: 67mm !important;
    max-width: none !important;
    max-height: none !important;
    image-rendering: pixelated;
}

.vehicle-qr-fixed-registration {
    display: block;
    flex: 0 0 auto;
    max-width: 100%;
    margin: 4mm 0 2mm;
    overflow: hidden;
    color: #0f1b33;
    font-size: 15mm;
    line-height: .92;
    font-weight: 950;
    letter-spacing: .025em;
    text-overflow: clip;
    white-space: nowrap;
}

.vehicle-qr-fixed-registration
+ .vehicle-qr-fixed-divider {
    margin-bottom: 3mm;
}

.vehicle-qr-fixed-instruction {
    display: block;
    flex: 0 0 auto;
    color: #0f1b33;
    font-size: 6.8mm;
    line-height: 1.08;
    font-weight: 950;
    letter-spacing: .01em;
}

/* Disable the earlier independently-resized batch elements. */
.vehicle-qr-sheet-logo,
.vehicle-qr-sheet-divider,
.vehicle-qr-sheet-code,
.vehicle-qr-sheet-registration,
.vehicle-qr-sheet-instruction {
    display: none !important;
}

@media print {
    .vehicle-qr-sheet-label {
        overflow: hidden !important;
    }

    .vehicle-qr-fixed-label {
        box-shadow: none !important;
    }
}


/*
 * Vehicle QR batch printing — live FleetHub layout isolation.
 *
 * The application layout uses .sidebar, .topbar, .main-area and
 * .page-content. Earlier print rules referenced non-existent class names,
 * causing the whole administration interface to be printed.
 */
@media print {
    @page {
        size: A4 portrait;
        margin: 0;
    }

    html,
    body {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
    }

    body.vehicle-qr-print-mode .sidebar,
    body.vehicle-qr-print-mode .topbar,
    body.vehicle-qr-print-mode .page-actions,
    body.vehicle-qr-print-mode .vehicle-qr-batch-controls,
    body.vehicle-qr-print-mode .vehicle-qr-print-options,
    body.vehicle-qr-print-mode
        .vehicle-qr-sheet-preview-panel > .panel-header,
    body.vehicle-qr-print-mode .vehicle-qr-sheet-empty {
        display: none !important;
    }

    body.vehicle-qr-print-mode .app-shell,
    body.vehicle-qr-print-mode .main-area,
    body.vehicle-qr-print-mode .page-content,
    body.vehicle-qr-print-mode .vehicle-qr-batch,
    body.vehicle-qr-print-mode .vehicle-qr-sheet-preview-panel,
    body.vehicle-qr-print-mode .vehicle-qr-sheet-preview {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #ffffff !important;
        overflow: visible !important;
    }

    body.vehicle-qr-print-mode .main-area {
        margin-left: 0 !important;
    }

    body.vehicle-qr-print-mode .page-content {
        position: static !important;
    }

    body.vehicle-qr-print-mode
        .vehicle-qr-sheet-preview-panel {
        page-break-inside: auto !important;
        break-inside: auto !important;
    }

    body.vehicle-qr-print-mode .vehicle-qr-print-sheet {
        display: grid !important;
        width: 210mm !important;
        min-width: 210mm !important;
        max-width: 210mm !important;
        height: 297mm !important;
        min-height: 297mm !important;
        max-height: 297mm !important;
        margin: 0 !important;
        padding: 5mm !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #ffffff !important;
        transform: none !important;
        break-after: page !important;
        page-break-after: always !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    body.vehicle-qr-print-mode
        .vehicle-qr-print-sheet.is-landscape {
        width: 297mm !important;
        min-width: 297mm !important;
        max-width: 297mm !important;
        height: 210mm !important;
        min-height: 210mm !important;
        max-height: 210mm !important;
    }

    body.vehicle-qr-print-mode
        .vehicle-qr-print-sheet:last-child {
        break-after: auto !important;
        page-break-after: auto !important;
    }

    body.vehicle-qr-print-mode .vehicle-qr-sheet-label {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
}


/* Vehicle QR isolated preview v5 */
.vehicle-qr-isolated-preview {
    display: block;
    width: 100%;
    min-height: 680px;
    border: 0;
    background: #dfe3e8;
}
.vehicle-qr-isolated-preview[hidden] { display:none !important; }
.vehicle-qr-sheet-preview-panel { overflow:hidden; }


/* Fuel Card Custody module */
.fuel-custody-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.fuel-custody-stat-out {
    border-color: rgba(245, 158, 11, .4);
}

.fuel-custody-status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.fuel-custody-status.is-office {
    background: rgba(147, 193, 32, .16);
    color: #4d7100;
}

.fuel-custody-status.is-out {
    background: rgba(245, 158, 11, .17);
    color: #9a5700;
}

.fuel-custody-inline-form,
.fuel-custody-signout-form {
    margin: 0;
}

.fuel-custody-signout-form {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-width: 270px;
}

.fuel-custody-signout-form select {
    min-height: 38px;
}

.fuel-custody-history-header {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.fuel-custody-history-header > div {
    display: grid;
    gap: 5px;
}

.fuel-custody-history-header span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.fuel-custody-history-header strong {
    font-size: 19px;
}

.fuel-custody-timeline {
    position: relative;
    display: grid;
    gap: 0;
    padding: 8px 20px 20px;
}

.fuel-custody-history-item {
    position: relative;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 14px;
    padding: 0 0 22px;
}

.fuel-custody-history-item:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 13px;
    bottom: -1px;
    left: 6px;
    width: 2px;
    background: var(--border);
}

.fuel-custody-history-marker {
    position: relative;
    z-index: 1;
    width: 14px;
    height: 14px;
    margin-top: 5px;
    border: 3px solid var(--surface);
    border-radius: 50%;
    background: #93c120;
    box-shadow: 0 0 0 2px #93c120;
}

.fuel-custody-history-content {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
}

.fuel-custody-history-content header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.fuel-custody-history-content dl {
    display: grid;
    gap: 8px;
    margin: 0;
}

.fuel-custody-history-content dl > div {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 12px;
}

.fuel-custody-history-content dt {
    color: var(--muted);
    font-weight: 800;
}

.fuel-custody-history-content dd {
    margin: 0;
}

@media (max-width: 960px) {
    .fuel-custody-stats,
    .fuel-custody-history-header {
        grid-template-columns: 1fr;
    }

    .fuel-custody-table th:nth-child(5),
    .fuel-custody-table td:nth-child(5) {
        display: none;
    }
}

@media (max-width: 720px) {
    .fuel-custody-signout-form {
        grid-template-columns: 1fr;
        min-width: 210px;
    }

    .fuel-custody-signout-form .button,
    .fuel-custody-inline-form .button {
        width: 100%;
    }

    .fuel-custody-history-content header {
        align-items: flex-start;
        flex-direction: column;
    }

    .fuel-custody-history-content dl > div {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}


/* Vehicle Registration History — Build 2 */
.vehicle-identity-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid rgba(147, 193, 32, .3);
    border-radius: 16px;
    background:
        linear-gradient(
            135deg,
            rgba(147, 193, 32, .1),
            rgba(255, 255, 255, .96)
        );
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
}

.vehicle-identity-current {
    display: flex;
    align-items: center;
    gap: 13px;
}

.vehicle-identity-icon,
.registration-change-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(147, 193, 32, .16);
    color: #648c00;
    font-size: 19px;
}

.vehicle-identity-current small,
.vehicle-identity-copy span {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.vehicle-identity-current .registration-plate {
    display: inline-flex;
    margin-top: 5px;
}

.vehicle-identity-copy strong {
    display: block;
    font-size: 17px;
}

.vehicle-identity-copy span {
    margin-top: 4px;
}

.registration-history-panel {
    margin-top: 20px;
}

.registration-history-panel .panel-header h2 {
    display: flex;
    align-items: center;
    gap: 9px;
}

.registration-history-list {
    display: grid;
    gap: 12px;
    padding: 18px;
}

.registration-history-item {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface-2);
}

.registration-history-item.is-current {
    border-color: rgba(147, 193, 32, .45);
    background: rgba(147, 193, 32, .07);
}

.registration-history-plate {
    display: flex;
    align-items: center;
    gap: 10px;
}

.registration-current-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(147, 193, 32, .18);
    color: #557700;
    font-size: 11px;
    font-weight: 850;
}

.registration-history-item dl {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 14px 0 0;
}

.registration-history-item dt {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.registration-history-item dd {
    margin: 5px 0 0;
    font-size: 13px;
    font-weight: 750;
}

.registration-history-notes {
    margin: 13px 0 0;
    padding-top: 13px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.registration-change-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    gap: 20px;
    align-items: start;
}

.registration-change-panel {
    padding: 22px;
}

.registration-change-heading {
    display: flex;
    gap: 14px;
    align-items: center;
}

.registration-change-heading h2 {
    margin: 0;
}

.registration-change-heading p {
    margin: 5px 0 0;
    color: var(--muted);
    line-height: 1.5;
}

.registration-change-route {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    margin: 24px 0;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-2);
    text-align: center;
}

.registration-change-route > i {
    color: #93c120;
    font-size: 22px;
}

.registration-change-route small {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.registration-plate.is-preview {
    opacity: .72;
}

.registration-change-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.registration-change-form label {
    display: grid;
    gap: 7px;
}

.registration-change-form label > small {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}

.registration-change-warning {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    grid-column: 1 / -1;
    padding: 14px;
    border: 1px solid rgba(147, 193, 32, .32);
    border-radius: 12px;
    background: rgba(147, 193, 32, .08);
}

.registration-change-warning > i {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(147, 193, 32, .17);
    color: #648c00;
}

.registration-change-warning strong,
.registration-change-warning span {
    display: block;
}

.registration-change-warning span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
}

.registration-change-history-list {
    display: grid;
    gap: 10px;
    padding: 16px;
}

.registration-change-history-list article {
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface-2);
}

.registration-change-history-list article > div {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
}

.registration-change-history-list article > span,
.registration-change-history-list article > small {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 11px;
}

@media (max-width: 1040px) {
    .registration-change-layout {
        grid-template-columns: 1fr;
    }

    .registration-history-item dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .vehicle-identity-banner {
        grid-template-columns: 1fr;
    }

    .vehicle-identity-banner .button {
        width: 100%;
    }

    .registration-change-form {
        grid-template-columns: 1fr;
    }

    .registration-change-route {
        grid-template-columns: 1fr;
    }

    .registration-change-route > i {
        transform: rotate(90deg);
    }

    .registration-history-item dl {
        grid-template-columns: 1fr;
    }
}


/* FleetHub Enterprise 2.0.1 — Administration Control Centre */
.admin-hero {
    padding: 28px;
    margin-bottom: 20px;
    border: 1px solid rgba(147, 193, 32, .24);
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(147, 193, 32, .18), transparent 34%),
        linear-gradient(135deg, #ffffff, #f8fbf2);
}
.admin-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #648c00;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.admin-hero h2 {
    margin: 10px 0 6px;
    font-size: 30px;
}
.admin-hero p {
    margin: 0;
    color: var(--muted);
}
.admin-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.admin-card {
    display: grid;
    gap: 8px;
    min-height: 160px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
    transition: transform 180ms ease, box-shadow 180ms ease;
}
a.admin-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .1);
}
.admin-card.is-coming {
    opacity: .64;
}
.admin-card-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(147, 193, 32, .14);
    color: #648c00;
    font-size: 19px;
}
.admin-card strong {
    font-size: 16px;
}
.admin-card > span:last-child {
    color: var(--muted);
    font-size: 12px;
}
.admin-audit-list {
    display: grid;
}
.admin-audit-list article {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}
.admin-audit-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(147, 193, 32, .13);
    color: #648c00;
}
.admin-audit-list strong,
.admin-audit-list small {
    display: block;
}
.admin-audit-list small {
    margin-top: 4px;
    color: var(--muted);
}

.access-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: end;
    padding: 16px;
    margin-bottom: 16px;
}
.access-toolbar form {
    min-width: min(420px, 100%);
}
.access-toolbar label {
    display: grid;
    gap: 6px;
}
.access-editor {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr) 320px;
    min-height: 720px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 14px 36px rgba(15, 23, 42, .07);
}
.access-modules-panel,
.access-summary-panel {
    background: var(--surface-2);
}
.access-modules-panel {
    border-right: 1px solid var(--border);
}
.access-summary-panel {
    border-left: 1px solid var(--border);
    padding: 18px;
}
.access-panel-heading {
    display: grid;
    gap: 10px;
    padding: 18px;
    border-bottom: 1px solid var(--border);
}
.access-panel-heading > span {
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.access-module-button {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 11px;
    width: 100%;
    padding: 13px 16px;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.access-module-button:hover,
.access-module-button.is-active {
    background: rgba(147, 193, 32, .1);
}
.access-module-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--module-colour) 14%, transparent);
    color: var(--module-colour);
}
.access-module-button strong,
.access-module-button small {
    display: block;
}
.access-module-button small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px;
}
.access-permissions-panel {
    min-width: 0;
    padding: 22px;
}
.access-module-permissions {
    display: none;
}
.access-module-permissions.is-active {
    display: block;
}
.access-module-permissions > header {
    display: flex;
    gap: 13px;
    align-items: center;
    margin-bottom: 18px;
}
.access-module-permissions h2 {
    margin: 0;
}
.access-module-permissions p {
    margin: 4px 0 0;
    color: var(--muted);
}
.access-permission-list {
    display: grid;
    gap: 10px;
}
.access-permission-card {
    display: grid;
    grid-template-columns: auto 34px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
    cursor: pointer;
}
.access-permission-card:hover {
    border-color: rgba(147, 193, 32, .45);
}
.access-permission-card > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.access-permission-check {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: 9px;
    color: transparent;
}
.access-permission-card > input:checked + .access-permission-check {
    border-color: #93c120;
    background: #93c120;
    color: #172033;
}
.access-permission-card strong,
.access-permission-card small,
.access-permission-card code {
    display: block;
}
.access-permission-card small {
    margin-top: 4px;
    color: var(--muted);
    line-height: 1.45;
}
.access-permission-card code {
    margin-top: 6px;
    color: #64748b;
    font-size: 10px;
}
.access-level {
    padding: 5px 8px;
    border-radius: 999px;
    background: #eef2f6;
    font-size: 10px;
    font-weight: 850;
}
.access-level-view { background: rgba(147,193,32,.14); color: #557700; }
.access-level-create { background: rgba(46,108,246,.12); color: #2e6cf6; }
.access-level-manage,
.access-level-approve { background: rgba(245,158,11,.14); color: #a45f00; }
.access-level-delete { background: rgba(220,38,38,.12); color: #dc2626; }
.access-level-admin { background: rgba(23,32,51,.12); color: #172033; }

.access-role-summary {
    text-align: center;
}
.access-role-shield {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 12px;
    border-radius: 18px;
    background: rgba(147, 193, 32, .15);
    color: #648c00;
    font-size: 25px;
}
.access-role-summary h2 {
    margin: 0;
}
.access-role-summary p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}
.access-summary-count {
    display: grid;
    gap: 4px;
    margin: 18px 0;
    padding: 16px;
    border-radius: 13px;
    background: var(--surface);
}
.access-summary-count strong {
    font-size: 30px;
}
.access-summary-count span {
    color: var(--muted);
    font-size: 11px;
}
.access-summary-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.access-summary-actions button {
    min-height: 42px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    cursor: pointer;
}
.access-save-button {
    width: 100%;
    margin-top: 12px;
}
.access-template-box,
.access-role-tools,
.access-protected-notice {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}
.access-template-box p,
.access-protected-notice span {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}
.access-template-box form,
.access-role-tools form {
    display: grid;
    gap: 9px;
}
.access-role-tools summary {
    cursor: pointer;
    font-weight: 800;
}
.access-tool-form {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.access-role-dialog {
    width: min(520px, calc(100vw - 32px));
    border: 0;
    border-radius: 16px;
    padding: 0;
}
.access-role-dialog::backdrop {
    background: rgba(15, 23, 42, .55);
}
.access-role-dialog form {
    display: grid;
    gap: 14px;
    padding: 20px;
}
.access-role-dialog header,
.access-role-dialog footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}
.access-role-dialog header h2 {
    margin: 0;
}
.access-role-dialog header button {
    border: 0;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
}
.access-editor.has-unsaved-changes {
    box-shadow:
        0 0 0 4px rgba(245, 158, 11, .14),
        0 14px 36px rgba(15, 23, 42, .08);
}

.user-role-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.user-access-grid {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 18px;
    margin-bottom: 18px;
}
.user-access-profile {
    display: grid;
    justify-items: center;
    align-content: start;
    padding: 24px;
    text-align: center;
}
.user-access-avatar {
    width: 68px;
    height: 68px;
    font-size: 24px;
}
.user-access-profile h2 {
    margin: 12px 0 4px;
}
.user-access-profile p {
    margin: 0 0 12px;
    color: var(--muted);
}
.user-access-roles form {
    padding: 16px;
}
.user-role-selector {
    display: grid;
    gap: 9px;
    margin-bottom: 14px;
}
.user-role-selector label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 11px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 11px;
}
.user-role-selector strong,
.user-role-selector small {
    display: block;
}
.user-role-selector small {
    margin-top: 3px;
    color: var(--muted);
}
.user-override-layout {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 18px;
    padding: 18px;
}
.user-override-form {
    display: grid;
    gap: 12px;
    align-content: start;
}
.user-override-list {
    display: grid;
    gap: 9px;
}
.user-override-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 11px;
}
.user-override-type {
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 850;
}
.user-override-type.is-allow {
    background: rgba(147,193,32,.14);
    color: #557700;
}
.user-override-type.is-deny {
    background: rgba(220,38,38,.12);
    color: #dc2626;
}
.user-override-item strong,
.user-override-item code,
.user-override-item small {
    display: block;
}
.user-override-item code,
.user-override-item small {
    margin-top: 4px;
    color: var(--muted);
}
.effective-permission-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 16px;
}
.effective-permission-cloud code {
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--surface-2);
    font-size: 10px;
}

@media (max-width: 1240px) {
    .access-editor {
        grid-template-columns: 230px minmax(0, 1fr);
    }
    .access-summary-panel {
        grid-column: 1 / -1;
        border-left: 0;
        border-top: 1px solid var(--border);
    }
}
@media (max-width: 820px) {
    .admin-card-grid,
    .user-access-grid,
    .user-override-layout {
        grid-template-columns: 1fr;
    }
    .access-editor {
        grid-template-columns: 1fr;
    }
    .access-modules-panel {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }
    .access-modules-panel nav {
        display: flex;
        overflow-x: auto;
    }
    .access-module-button {
        min-width: 210px;
        border-right: 1px solid var(--border);
    }
}


/* FleetHub 2.0.2 stability consolidation */
.access-permissions-panel {
    display: block;
}
.access-inline-save {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    margin: 22px -22px -22px;
    padding: 14px 22px;
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(8px);
}
.driver-history-notice {
    margin-bottom: 16px;
    padding: 13px 15px;
    border: 1px solid rgba(147, 193, 32, .32);
    border-radius: 12px;
    background: rgba(147, 193, 32, .08);
}


/* FleetHub 2.0.2 — Approved garage logo enhancement */
.radius-station-content {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    min-width: 0;
    margin-top: 3px;
}

.radius-station-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.radius-station-copy strong,
.radius-station-copy small {
    overflow-wrap: anywhere;
}

.radius-garage-logo {
    display: block;
    width: 54px;
    height: 54px;
    object-fit: contain;
    flex: 0 0 auto;
}

.radius-garage-logo-bp {
    width: 58px;
    height: 58px;
}

.radius-garage-logo-texaco {
    width: 56px;
    height: 56px;
}

.radius-site-detail-content {
    display: flex;
    gap: 12px;
    align-items: center;
}

.radius-site-detail-content strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 560px) {
    .radius-station-content {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 10px;
    }

    .radius-garage-logo,
    .radius-garage-logo-bp,
    .radius-garage-logo-texaco {
        width: 44px;
        height: 44px;
    }
}


/* FleetHub 2.1.0D — Radius Verification Workflow Fix */
.radius-readable-signals{display:grid;gap:8px;margin-top:14px}
.radius-readable-signal{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}
.radius-readable-signal span{display:grid;gap:3px;min-width:0}.radius-readable-signal strong{font-size:11px}.radius-readable-signal small{color:var(--muted);font-size:10px;line-height:1.4}.radius-readable-signal b{font-size:11px;white-space:nowrap}
.radius-readable-signal-positive{border-color:rgba(34,197,94,.22);background:rgba(34,197,94,.06)}
.radius-readable-signal-warning{border-color:rgba(217,119,6,.24);background:rgba(217,119,6,.06)}
.radius-readable-warnings{display:grid;gap:7px;margin-top:12px}.radius-readable-warnings p{margin:0;padding:9px 11px;border-radius:9px;background:rgba(217,119,6,.07);color:#9a5800;font-size:10px;line-height:1.4}.radius-readable-warnings i{margin-right:6px}
.radius-match-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}