* {
    box-sizing: border-box;
}

:root {
    color-scheme: light dark;
    --bg: #f5f6fb;
    --panel: #ffffff;
    --panel-2: #f0f3fa;
    --text: #111827;
    --muted: #6b7280;
    --border: #dce2ee;
    --accent: #6d5dfc;
    --accent-2: #4538c9;
    --danger: #ef4444;
    --warning: #f59e0b;
    --ok: #22c55e;
    --shadow: 0 12px 28px rgba(15, 23, 42, .08);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #06101f;
        --panel: #0e1b2d;
        --panel-2: #12243a;
        --text: #f8fafc;
        --muted: #9ca3af;
        --border: #233750;
        --accent: #7c5cff;
        --accent-2: #5a42dc;
        --shadow: 0 18px 38px rgba(0, 0, 0, .35);
    }
}

html, body {
    margin: 0;
    min-height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: radial-gradient(circle at top, rgba(109,93,252,.16), transparent 35%), var(--bg);
    color: var(--text);
}

a {
    color: var(--accent);
    text-decoration: none;
}

.app-shell {
    min-height: 100vh;
    display: flex;
}

.main-content {
    flex: 1;
    padding: 24px;
    max-width: 1240px;
    margin: 0 auto;
    width: 100%;
}

.sidebar {
    width: 270px;
    background: rgba(2, 6, 23, .88);
    border-right: 1px solid var(--border);
    padding: 22px 16px;
    position: sticky;
    top: 0;
    height: 100vh;
    color: white;
}

.brand {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 28px;
}

.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: var(--accent);
    display: grid;
    place-items: center;
    font-weight: 800;
}

.brand span {
    display: block;
    color: #a8b3c7;
    font-size: 13px;
}

.side-nav {
    display: grid;
    gap: 8px;
}

.side-nav a {
    color: #dbe4f3;
    display: flex;
    gap: 12px;
    padding: 14px 12px;
    border-radius: 14px;
}

.side-nav a:hover {
    background: rgba(255,255,255,.08);
}

.sidebar-user {
    position: absolute;
    bottom: 20px;
    left: 16px;
    right: 16px;
    background: rgba(255,255,255,.06);
    padding: 14px;
    border-radius: 16px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.topbar h1 {
    margin: 0;
    font-size: 30px;
}

.menu-btn {
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 28px;
    display: none;
}

.round-btn {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    font-size: 26px;
    box-shadow: var(--shadow);
}

.card, .auth-card {
    background: linear-gradient(180deg, var(--panel), var(--panel-2));
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 20px;
    box-shadow: var(--shadow);
    margin-bottom: 16px;
}

.auth-card {
    width: min(420px, calc(100% - 32px));
    margin: 10vh auto;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 18px;
}

.vehicle-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vehicle-switch-left {
    display: flex;
    gap: 12px;
    align-items: center;
}

.vehicle-switch-left span,
.vehicle-switch-left small {
    display: block;
    color: var(--muted);
}

.vehicle-switch-left small {
    margin-top: 3px;
    font-size: 13px;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vehicle-icon {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    display: grid;
    place-items: center;
    color: white;
    box-shadow: 0 10px 22px rgba(109, 93, 252, .25);
}

.vehicle-icon svg {
    width: 44px;
    height: 34px;
}

.vehicle-select-form {
    min-width: 190px;
}

.vehicle-select-form select {
    font-weight: 700;
}

.vehicle-card,
.car-visual,
.car-placeholder,
.vehicle-info,
.plate {
    display: none;
}

.mileage-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mileage-card h2 {
    font-size: 34px;
    margin: 8px 0 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.stat {
    margin: 0;
    min-height: 116px;
}

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

.stat strong {
    display: block;
    font-size: 24px;
    margin: 10px 0 4px;
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.section-head h2, .section-head h3 {
    margin: 0;
}

.service-row, .table-row, .list-item, .fuel-entry, .object-card {
    border-top: 1px solid var(--border);
    padding: 14px 0;
}

.service-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
}

.service-row span {
    display: block;
    color: var(--muted);
    margin-top: 4px;
}

.service-row.ok strong, .good {
    color: var(--ok);
}

.service-row.warning strong, .object-card.warning h3 {
    color: var(--warning);
}

.service-row.danger strong, .object-card.danger h3 {
    color: var(--danger);
}

.table-row, .list-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.form {
    display: grid;
    gap: 14px;
}

.form.compact {
    margin-top: 14px;
}

label {
    display: grid;
    gap: 7px;
    color: var(--muted);
}

input, select, textarea {
    width: 100%;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    padding: 12px 14px;
    border-radius: 12px;
    font: inherit;
}

textarea {
    min-height: 90px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 13px;
    padding: 12px 16px;
    color: var(--text);
    background: var(--panel-2);
    cursor: pointer;
    font-weight: 650;
}

.btn.primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: white;
}

.btn.secondary {
    background: rgba(109,93,252,.14);
    color: var(--accent);
}

.btn.danger, .link-danger {
    color: var(--danger);
}

.btn.small {
    padding: 8px 10px;
    font-size: 13px;
}

.link-danger {
    border: none;
    background: transparent;
    cursor: pointer;
}

.alert {
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 12px;
}

.alert.danger {
    background: rgba(239,68,68,.12);
    color: var(--danger);
}

.muted {
    color: var(--muted);
}

.empty-state {
    text-align: center;
    padding: 70px 20px;
}

.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 20;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.modal.open {
    display: flex;
}

.modal-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 22px;
    width: min(420px, 100%);
    padding: 20px;
    box-shadow: var(--shadow);
}

.form-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.bottom-nav {
    display: none;
}

@media (max-width: 900px) {
    .main-content {
        padding: 18px 14px 92px;
    }

    .sidebar {
        position: fixed;
        transform: translateX(-110%);
        transition: transform .2s ease;
        z-index: 30;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .menu-btn {
        display: block;
    }

    .topbar h1 {
        font-size: 24px;
    }

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

    .vehicle-switch {
        align-items: stretch;
        gap: 12px;
    }

    .vehicle-switch-left {
        flex: 1;
        min-width: 0;
    }

    .vehicle-switch-left strong {
        font-size: 20px;
    }

    .vehicle-icon {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
        border-radius: 20px;
    }

    .vehicle-icon svg {
        width: 40px;
        height: 30px;
    }

    .vehicle-select-form {
        min-width: 0;
        width: 100%;
    }

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

    .stat {
        min-height: 96px;
    }

    .mileage-card h2 {
        font-size: 32px;
    }

    .bottom-nav {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        position: fixed;
        bottom: 12px;
        left: 12px;
        right: 12px;
        background: rgba(14, 27, 45, .92);
        backdrop-filter: blur(18px);
        border: 1px solid var(--border);
        border-radius: 24px;
        padding: 10px 8px;
        z-index: 10;
        box-shadow: var(--shadow);
    }

    .bottom-nav a {
        color: #dbe4f3;
        display: grid;
        place-items: center;
        gap: 3px;
        font-size: 18px;
    }

    .bottom-nav span {
        font-size: 11px;
    }
}

@media (max-width: 420px) {
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stat strong {
        font-size: 20px;
    }

    .vehicle-switch {
        flex-direction: column;
    }
}


/* Minimal UI patch */
.main-content {
    padding: 18px;
}

.card, .auth-card {
    border-radius: 18px;
    padding: 16px;
    margin-bottom: 12px;
}

.topbar {
    margin-bottom: 14px;
}

.topbar h1 {
    font-size: 24px;
    line-height: 1.15;
}

.round-btn {
    width: 42px;
    height: 42px;
    font-size: 24px;
}

.vehicle-icon {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
    border-radius: 18px;
}

.vehicle-icon svg {
    width: 38px;
    height: 28px;
}

.vehicle-switch-left strong {
    font-size: 18px;
    line-height: 1.2;
}

.vehicle-switch-left span {
    font-size: 15px;
}

.vehicle-switch-left small {
    font-size: 12px;
}

.mileage-card h2 {
    font-size: 28px;
    line-height: 1.15;
}

.stat {
    min-height: 92px;
}

.stat strong {
    font-size: 20px;
}

.stat span,
.stat small,
.muted,
label {
    font-size: 14px;
}

.section-head h2 {
    font-size: 19px;
}

.section-head h3 {
    font-size: 17px;
}

.btn {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
}

input, select, textarea {
    padding: 10px 12px;
    border-radius: 11px;
    font-size: 15px;
}

.service-row, .table-row, .list-item, .fuel-entry, .object-card {
    padding: 12px 0;
}

.side-nav a {
    padding: 12px 10px;
    font-size: 15px;
}

.brand strong {
    font-size: 16px;
}

.brand span {
    font-size: 12px;
}

@media (max-width: 900px) {
    .main-content {
        padding: 14px 12px 86px;
    }

    .card, .auth-card {
        border-radius: 17px;
        padding: 14px;
        margin-bottom: 11px;
    }

    .topbar h1 {
        font-size: 28px;
    }

    .menu-btn {
        font-size: 25px;
    }

    .round-btn {
        width: 42px;
        height: 42px;
        font-size: 24px;
    }

    .vehicle-switch-left strong {
        font-size: 18px;
    }

    .vehicle-switch-left span {
        font-size: 15px;
    }

    .vehicle-icon {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
        border-radius: 17px;
    }

    .vehicle-icon svg {
        width: 36px;
        height: 27px;
    }

    .mileage-card h2 {
        font-size: 30px;
    }

    .stats-grid {
        gap: 10px;
    }

    .stat {
        min-height: 84px;
    }

    .stat strong {
        font-size: 20px;
        margin: 7px 0 2px;
    }

    .bottom-nav {
        bottom: 10px;
        left: 10px;
        right: 10px;
        border-radius: 22px;
        padding: 8px 6px;
    }

    .bottom-nav a {
        font-size: 16px;
    }

    .bottom-nav span {
        font-size: 10px;
    }
}

@media (max-width: 420px) {
    .topbar h1 {
        font-size: 26px;
    }

    .mileage-card h2 {
        font-size: 28px;
    }

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

    .stat span,
    .stat small,
    .muted {
        font-size: 13px;
    }
}


/* Admin patch */
.admin-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.admin-stats {
    grid-template-columns: repeat(4, 1fr);
}

.admin-table {
    display: grid;
    gap: 0;
}

.admin-row {
    border-top: 1px solid var(--border);
    padding: 12px 0;
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
}

.admin-row span,
.admin-row small {
    display: block;
    color: var(--muted);
    margin-top: 3px;
}

.admin-row p {
    margin: 8px 0 0;
}

.admin-row select {
    min-width: 96px;
    padding: 8px 10px;
}

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

@media (max-width: 900px) {
    .admin-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-row .actions {
        width: 100%;
    }

    .admin-row .actions form {
        flex: 1;
    }
}


/* Dbalnyk logo branding */
.brand-logo {
    object-fit: cover;
    background: #fff;
    padding: 0;
}

.auth-logo {
    width: 74px;
    height: 74px;
    border-radius: 22px;
    object-fit: cover;
    display: block;
    margin-bottom: 14px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
}

@media (max-width: 900px) {
    .auth-logo {
        width: 64px;
        height: 64px;
        border-radius: 20px;
        margin-bottom: 10px;
    }
}


/* App version label */
.page-title-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.page-title-block h1 {
    margin: 0;
}

.app-version {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
}

@media (max-width: 900px) {
    .app-version {
        font-size: 11px;
    }
}


/* v0.5.0: compact home/admin redesign */
.main-content {
    padding: 14px;
}

.card,
.auth-card {
    border-radius: 16px;
    padding: 12px;
    margin-bottom: 10px;
}

.topbar-compact {
    margin-bottom: 10px;
}

.topbar-compact h1 {
    font-size: 24px;
    line-height: 1.1;
}

.page-title-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.page-title-block h1 {
    margin: 0;
}

.app-version {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
}

.compact-card {
    padding: 11px 12px;
    border-radius: 15px;
}

.vehicle-switch {
    align-items: center;
}

.vehicle-switch-left {
    gap: 10px;
    width: 100%;
}

.vehicle-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 15px;
}

.vehicle-icon svg {
    width: 32px;
    height: 24px;
}

.vehicle-main-info {
    min-width: 0;
    flex: 1;
}

.vehicle-title-line {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.vehicle-title-line strong {
    font-size: 16px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inline-select {
    margin-left: auto;
    min-width: 36px;
}

.inline-select select {
    width: 36px;
    min-width: 36px;
    padding: 4px;
    border-radius: 9px;
    font-size: 0;
    color: transparent;
}

.inline-select select option {
    font-size: 14px;
    color: var(--text);
}

.vehicle-switch-left span,
.vehicle-switch-left small {
    font-size: 12px;
    line-height: 1.25;
}

.vehicle-mini-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.vehicle-mini-stats span {
    display: inline-flex;
    width: auto;
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(109,93,252,.12);
    color: var(--text);
    font-size: 12px;
    font-weight: 650;
}

.mileage-card {
    min-height: auto;
}

.mileage-card h2 {
    font-size: 25px;
    line-height: 1.1;
    margin: 5px 0 0;
}

.mileage-card p {
    margin: 3px 0 0;
}

.btn-mini {
    padding: 8px 11px;
    font-size: 13px;
    border-radius: 10px;
}

.compact-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.compact-stats .stat {
    min-height: 68px;
}

.stat span,
.stat small,
.muted,
label {
    font-size: 12px;
}

.stat strong {
    font-size: 17px;
    margin: 5px 0 0;
}

.section-head h2 {
    font-size: 16px;
}

.section-head a {
    font-size: 13px;
}

.compact-row {
    padding: 9px 0;
    font-size: 13px;
}

.compact-row strong {
    font-size: 14px;
}

.compact-row span,
.compact-row small {
    font-size: 12px;
}

.btn {
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 10px;
}

input,
select,
textarea {
    padding: 9px 10px;
    border-radius: 10px;
    font-size: 14px;
}

.round-btn {
    width: 38px;
    height: 38px;
    font-size: 22px;
}

.menu-btn {
    font-size: 22px;
}

.brand-logo {
    object-fit: cover;
    background: #fff;
    padding: 0;
}

.auth-logo {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    object-fit: cover;
    display: block;
    margin-bottom: 12px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
}

.admin-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.admin-stats {
    grid-template-columns: repeat(4, 1fr);
}

.admin-row,
.compact-admin-row {
    border-top: 1px solid var(--border);
    padding: 9px 0;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.admin-row span,
.admin-row small {
    display: block;
    color: var(--muted);
    margin-top: 2px;
    font-size: 12px;
}

.admin-row strong {
    font-size: 13px;
}

.compact-actions {
    gap: 6px;
}

.admin-row select {
    min-width: 86px;
    padding: 7px 8px;
    font-size: 12px;
}

.audit-line {
    display: grid;
    grid-template-columns: 122px 1fr;
    gap: 10px;
    border-top: 1px solid var(--border);
    padding: 8px 0;
}

.audit-time {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.25;
}

.audit-body strong {
    font-size: 12px;
}

.audit-body span,
.audit-body small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.25;
    margin-top: 2px;
}

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

@media (max-width: 900px) {
    .main-content {
        padding: 10px 10px 78px;
    }

    .card,
    .auth-card {
        border-radius: 15px;
        padding: 11px;
        margin-bottom: 9px;
    }

    .topbar-compact h1 {
        font-size: 22px;
    }

    .app-version {
        font-size: 10px;
    }

    .vehicle-switch {
        gap: 8px;
    }

    .vehicle-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 14px;
    }

    .vehicle-icon svg {
        width: 29px;
        height: 22px;
    }

    .mileage-card h2 {
        font-size: 24px;
    }

    .compact-stats {
        gap: 7px;
    }

    .compact-stats .stat {
        min-height: 62px;
    }

    .bottom-nav {
        bottom: 8px;
        left: 8px;
        right: 8px;
        border-radius: 18px;
        padding: 7px 5px;
    }

    .bottom-nav a {
        font-size: 15px;
    }

    .bottom-nav span {
        font-size: 10px;
    }

    .admin-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-row .actions {
        width: 100%;
    }

    .audit-line {
        grid-template-columns: 1fr;
        gap: 3px;
    }
}


/* v0.6.0: dashboard unit toggle + brand logos + compact vehicle card */
.brand-vehicle-icon img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: block;
}

.vehicle-change-btn {
    width: 31px;
    height: 31px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(109, 93, 252, .12);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    cursor: pointer;
}

.vehicle-change-btn svg {
    width: 20px;
    height: 20px;
}

.vehicle-change-btn.disabled,
.vehicle-change-btn:disabled {
    opacity: .38;
    cursor: not-allowed;
}

.vehicle-dropdown {
    display: none;
    margin-top: 7px;
}

.vehicle-dropdown.open {
    display: block;
}

.vehicle-dropdown select {
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
}

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

.vehicle-mini-stats-grid span {
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

.section-head-with-units {
    grid-template-columns: 1fr auto auto;
    gap: 8px;
}

.unit-toggle {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px;
    border-radius: 999px;
    background: rgba(109, 93, 252, .10);
}

.unit-toggle a {
    min-width: 30px;
    text-align: center;
    padding: 4px 8px;
    border-radius: 999px;
    color: var(--muted);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}

.unit-toggle a.active {
    background: var(--accent);
    color: #fff;
}

@media (max-width: 900px) {
    .brand-vehicle-icon img {
        width: 30px;
        height: 30px;
    }

    .vehicle-mini-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    .vehicle-mini-stats-grid span {
        font-size: 11px;
        padding: 4px 5px;
    }

    .vehicle-change-btn {
        width: 29px;
        height: 29px;
    }

    .section-head-with-units {
        gap: 6px;
    }

    .unit-toggle a {
        min-width: 26px;
        padding: 4px 6px;
        font-size: 11px;
    }
}


/* v0.7.0: remember-me, theme settings, brand infrastructure */
html[data-theme="light"] {
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b1120;
    --card: #111827;
    --text: #f8fafc;
    --muted: #94a3b8;
    --border: #263246;
    --accent: #64748b;
    --accent-2: #475569;
}

.remember-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--muted);
    margin: 4px 0 2px;
}

.remember-line input {
    width: 16px;
    height: 16px;
}

.theme-options {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

.theme-option {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 10px;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px;
    cursor: pointer;
}

.theme-option input {
    grid-row: span 2;
    width: 16px;
    height: 16px;
}

.theme-option span {
    font-weight: 700;
}

.theme-option small {
    color: var(--muted);
}

.brand-vehicle-icon img {
    color: currentColor;
}


/* v0.7.1: larger vehicle switch button, floating unit toggle, bottom TO badge */
.vehicle-switch {
    position: relative;
    padding-right: 112px;
}

.vehicle-change-large {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    min-width: 86px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

.vehicle-change-large svg {
    width: 17px;
    height: 17px;
}

.vehicle-change-large.disabled,
.vehicle-change-large:disabled {
    opacity: .38;
    cursor: not-allowed;
}

.section-head-with-units {
    position: relative;
    min-height: 28px;
    padding-top: 6px;
}

.unit-toggle {
    position: absolute;
    top: -22px;
    right: 38px;
    z-index: 2;
    padding: 5px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
}

.unit-toggle a {
    min-width: 42px;
    padding: 7px 12px;
    font-size: 13px;
}

.nav-label-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-badge {
    position: absolute;
    top: -18px;
    right: -18px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    font-weight: 800;
    box-shadow: 0 0 0 2px var(--card, #fff);
}

@media (max-width: 900px) {
    .vehicle-switch {
        padding-right: 96px;
    }

    .vehicle-change-large {
        right: 10px;
        min-width: 78px;
        height: 34px;
        font-size: 12px;
        padding: 7px 9px;
    }

    .vehicle-change-large svg {
        width: 15px;
        height: 15px;
    }

    .unit-toggle {
        top: -20px;
        right: 34px;
        padding: 4px;
    }

    .unit-toggle a {
        min-width: 36px;
        padding: 6px 9px;
        font-size: 12px;
    }

    .nav-badge {
        top: -16px;
        right: -15px;
        min-width: 17px;
        height: 17px;
        font-size: 10px;
        line-height: 17px;
    }
}

@media (max-width: 390px) {
    .vehicle-switch {
        padding-right: 0;
        padding-bottom: 48px;
    }

    .vehicle-change-large {
        top: auto;
        bottom: 10px;
        transform: none;
    }
}


/* v0.7.2: consolidated dashboard fixes */
.topbar-compact .page-title-block,
.page-title-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.page-title-block h1 {
    margin: 0;
}

.app-version {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
}

.vehicle-switch {
    position: relative;
    padding-right: 112px;
}

.vehicle-main-info {
    min-width: 0;
    width: 100%;
}

.vehicle-mini-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 7px;
}

.vehicle-mini-stats-grid span {
    width: auto;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    font-size: 12px;
    padding: 4px 7px;
}

.vehicle-change-large {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    min-width: 86px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

.vehicle-change-large svg {
    width: 17px;
    height: 17px;
}

.vehicle-change-large.disabled,
.vehicle-change-large:disabled {
    opacity: .38;
    cursor: not-allowed;
}

.brand-vehicle-icon img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: block;
}

.to-card {
    margin-top: 18px;
}

.section-head-with-units {
    position: relative;
    min-height: 28px;
    padding-top: 6px;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
}

.unit-toggle {
    position: absolute;
    top: -22px;
    right: 38px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 5px;
    border-radius: 999px;
    background: rgba(109, 93, 252, .10);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
}

.unit-toggle a {
    min-width: 42px;
    text-align: center;
    padding: 7px 12px;
    border-radius: 999px;
    color: var(--muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}

.unit-toggle a.active {
    background: var(--accent);
    color: #fff;
}

.nav-label-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-badge {
    position: absolute;
    top: -18px;
    right: -18px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    font-weight: 800;
    box-shadow: 0 0 0 2px var(--card, #fff);
}

@media (max-width: 900px) {
    .topbar-compact h1 {
        font-size: 22px;
    }

    .app-version {
        font-size: 10px;
    }

    .vehicle-switch {
        padding-right: 96px;
    }

    .vehicle-mini-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    .vehicle-mini-stats-grid span {
        font-size: 11px;
        padding: 4px 5px;
    }

    .vehicle-change-large {
        right: 10px;
        min-width: 78px;
        height: 34px;
        font-size: 12px;
        padding: 7px 9px;
    }

    .vehicle-change-large svg {
        width: 15px;
        height: 15px;
    }

    .brand-vehicle-icon img {
        width: 30px;
        height: 30px;
    }

    .unit-toggle {
        top: -20px;
        right: 34px;
        padding: 4px;
    }

    .unit-toggle a {
        min-width: 36px;
        padding: 6px 9px;
        font-size: 12px;
    }

    .nav-badge {
        top: -16px;
        right: -15px;
        min-width: 17px;
        height: 17px;
        font-size: 10px;
        line-height: 17px;
    }
}

@media (max-width: 390px) {
    .vehicle-switch {
        padding-right: 0;
        padding-bottom: 48px;
    }

    .vehicle-change-large {
        top: auto;
        bottom: 10px;
        transform: none;
    }
}


/* v0.8.0: captcha, email activation, admin filters */
.filter-row { display:flex; align-items:end; gap:8px; flex-wrap:wrap; margin:10px 0 12px; }
.filter-row label { min-width:190px; }
.filter-row select { width:100%; }
.status-pill { display:inline-flex !important; width:fit-content; border-radius:999px; padding:3px 8px; margin:4px 0; font-size:11px !important; font-weight:800; }
.status-pill.ok { background:rgba(34,197,94,.14); color:#16a34a !important; }
.status-pill.warn { background:rgba(245,158,11,.16); color:#d97706 !important; }
.alert.success { background:rgba(34,197,94,.12); color:#16a34a; border:1px solid rgba(34,197,94,.25); }


/* v0.8.1: login/logout/admin visibility fixes */
.auth-card h1 + p {
    margin-top: 8px;
}

.auth-card {
    max-width: 420px;
}

body.auth-page .sidebar,
body.auth-page .bottom-nav {
    display: none !important;
}

body.auth-page .main-content {
    margin-left: 0 !important;
    width: 100% !important;
}


/* v0.9.0: quick add, solid toggle, system-neutral accent, TO badge restore */
:root {
    --accent: #334155;
    --accent-2: #475569;
}

@media (prefers-color-scheme: dark) {
    html[data-theme-preference="system"] {
        --accent: #94a3b8;
        --accent-2: #64748b;
    }
}

.unit-toggle {
    background: var(--card) !important;
    border: 1px solid var(--border);
    opacity: 1 !important;
    backdrop-filter: none !important;
}

.unit-toggle a {
    opacity: 1 !important;
}

.unit-toggle a.active {
    background: var(--accent) !important;
    color: #fff !important;
}

.quick-add-wrap {
    position: relative;
    display: inline-flex;
}

.quick-add-menu {
    display: none;
    position: absolute;
    top: 48px;
    right: 0;
    min-width: 180px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .16);
    padding: 6px;
    z-index: 20;
}

.quick-add-menu.open {
    display: grid;
    gap: 4px;
}

.quick-add-menu a {
    display: block;
    padding: 9px 10px;
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}

.quick-add-menu a:hover {
    background: rgba(100, 116, 139, .12);
}

.nav-label-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-badge {
    position: absolute;
    top: -18px;
    right: -18px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    font-weight: 800;
    box-shadow: 0 0 0 2px var(--card, #fff);
}

.vehicle-change-large {
    top: 42% !important;
    min-width: 42px !important;
    width: 42px !important;
    height: 34px !important;
    padding: 0 !important;
    font-size: 0 !important;
}

.vehicle-change-large svg {
    width: 20px !important;
    height: 20px !important;
}

@media (max-width: 900px) {
    .quick-add-menu {
        top: 44px;
        right: 0;
    }

    .vehicle-change-large {
        top: 34px !important;
        right: 12px !important;
    }
}


/* v1.0.0: i18n, logo on login, quick add, expanded TO list */
.auth-brand-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.auth-brand-title h1 {
    margin: 0;
}

.auth-logo-small {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    object-fit: cover;
}

.language-switch {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: var(--card);
    border: 1px solid var(--border);
    margin: 8px 0 12px;
}

.language-switch a {
    border-radius: 999px;
    padding: 6px 10px;
    color: var(--muted);
    font-weight: 700;
    text-decoration: none;
    font-size: 12px;
}

.language-switch a.active {
    background: var(--accent);
    color: #fff;
}

.logout-link {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}

.logout-link svg {
    width: 16px;
    height: 16px;
}

.quick-add-wrap {
    position: relative;
    display: inline-flex;
}

.quick-add-menu {
    display: none;
    position: absolute;
    top: 48px;
    right: 0;
    min-width: 190px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .16);
    padding: 6px;
    z-index: 30;
}

.quick-add-menu.open {
    display: grid;
    gap: 4px;
}

.quick-add-menu a {
    display: block;
    padding: 9px 10px;
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}

.unit-toggle,
.expand-to-btn {
    background: var(--card) !important;
    border: 1px solid var(--border);
    opacity: 1 !important;
    backdrop-filter: none !important;
}

.expand-to-wrap {
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
    padding-right: 44px;
}

.expand-to-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
}

.expand-to-btn svg {
    width: 18px;
    height: 18px;
}

.vehicle-change-large {
    top: 34px !important;
    min-width: 40px !important;
    width: 40px !important;
    height: 32px !important;
    padding: 0 !important;
    font-size: 0 !important;
}

.vehicle-change-large svg {
    width: 20px !important;
    height: 20px !important;
}

@media (max-width: 900px) {
    .expand-to-wrap {
        padding-right: 34px;
    }

    .quick-add-menu {
        top: 44px;
    }

    .vehicle-change-large {
        top: 28px !important;
    }
}


/* v1.0.1: admin device and OS statistics */
.admin-tech-stats {
    margin-top: 10px;
}

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

.tech-stats-grid h3 {
    margin: 0 0 8px;
    font-size: 14px;
}

.tech-stat-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.tech-stat-row strong {
    font-size: 13px;
}

.tech-stat-row small {
    color: var(--muted);
}

@media (max-width: 700px) {
    .tech-stats-grid {
        grid-template-columns: 1fr;
    }
}


/* v1.0.3: UI cleanup for sidebar stray char, expand/collapse, solid quick-add */
.quick-add-menu {
    background: var(--card) !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .24) !important;
}

html[data-theme="light"] .quick-add-menu,
html[data-theme-preference="system"] .quick-add-menu {
    background: #ffffff !important;
}

.quick-add-menu.open {
    z-index: 80 !important;
}

body.quick-add-open .vehicle-change-large {
    visibility: hidden;
    pointer-events: none;
}

.expand-to-wrap {
    display: flex;
    justify-content: flex-end;
    padding-top: 0 !important;
    padding-right: 54px !important;
    margin-top: -2px;
    margin-bottom: -17px;
    position: relative;
    z-index: 3;
}

.expand-to-btn.icon-only {
    width: 44px;
    height: 32px;
    padding: 0 !important;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    opacity: 1 !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
}

.expand-to-btn.icon-only span {
    display: none !important;
}

.expand-to-btn.icon-only svg {
    width: 19px;
    height: 19px;
}

@media (max-width: 900px) {
    .expand-to-wrap {
        padding-right: 46px !important;
        margin-bottom: -15px;
    }

    .expand-to-btn.icon-only {
        width: 42px;
        height: 31px;
    }
}


/* v1.1.0: currency preference */
.form select {
    min-height: 38px;
}


/* v1.1.1: i18n coverage fix */


/* v1.1.2: system-like quick action menu, active navigation, logout clarity */
.quick-add-button .quick-minus {
    display: none;
}

body.quick-add-open .quick-add-button .quick-plus {
    display: none;
}

body.quick-add-open .quick-add-button .quick-minus {
    display: inline;
}

.quick-add-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .26);
    z-index: 70;
}

.quick-add-backdrop.open {
    display: block;
}

.quick-add-sheet {
    display: none;
    position: fixed;
    left: 50%;
    top: 86px;
    transform: translateX(-50%);
    width: min(330px, calc(100vw - 34px));
    z-index: 90;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 22px 55px rgba(15, 23, 42, .24);
    padding: 8px;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.quick-add-sheet.open {
    display: grid;
    gap: 6px;
}

.quick-add-sheet a,
.quick-add-sheet button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: var(--text);
    text-decoration: none;
    font-size: 15px;
    font-weight: 800;
    font-family: inherit;
}

.quick-add-sheet a:hover,
.quick-add-sheet button:hover {
    background: rgba(100, 116, 139, .12);
}

.quick-add-sheet button {
    color: var(--muted);
}

body.quick-add-open .vehicle-change-large {
    visibility: hidden;
    pointer-events: none;
}

.bottom-nav a.active {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border-radius: 18px;
}

.bottom-nav a.active span {
    font-weight: 800;
}

.bottom-nav a.active::after {
    content: "";
    width: 18px;
    height: 3px;
    border-radius: 999px;
    background: currentColor;
    opacity: .9;
    margin-top: 4px;
}

.side-nav a.active {
    background: rgba(255, 255, 255, .10);
    border-radius: 12px;
}

.sidebar-user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sidebar-user .logout-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
    color: #fff !important;
    font-weight: 800;
    text-decoration: none;
}

.sidebar-user .logout-link svg {
    width: 18px;
    height: 18px;
    color: #fff;
    opacity: 1;
}

@media (max-width: 900px) {
    .quick-add-sheet {
        top: auto;
        bottom: calc(92px + env(safe-area-inset-bottom));
        width: min(360px, calc(100vw - 28px));
    }
}


/* v1.4.7: admin logs, desktop sidebar logo, desktop left-nav text-only */
.admin-content-card .admin-download-icon-btn + .admin-download-icon-btn,
.admin-content-card > .admin-download-icon-btn:not(.admin-log-tabs .admin-download-icon-btn) {
    display: none !important;
}

.admin-log-tabs {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
}

.admin-log-tab-buttons {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.admin-download-icon-btn {
    margin-left: auto !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 999px !important;
    border: 1px solid var(--border) !important;
    background: var(--card) !important;
    color: var(--text) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08) !important;
}

.audit-log-list,
.connection-log-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.audit-log-row,
.connection-log-row {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.connection-log-row {
    grid-template-columns: 1fr 1.25fr;
}

.audit-log-row > div,
.connection-log-row > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.audit-log-row strong,
.connection-log-row strong {
    font-size: 13px;
}

.connection-log-row.success strong {
    color: #16a34a;
}

.connection-log-row.failed strong {
    color: #ef4444;
}

.audit-log-row span,
.audit-log-row small,
.connection-log-row span,
.connection-log-row small {
    color: var(--muted);
    overflow-wrap: anywhere;
}

/* Restore site logo in desktop sidebar. Previous vehicle-logo rules must not hide app branding. */
.sidebar .brand .brand-logo,
.sidebar .brand .brand-mark,
.sidebar .brand img.brand-logo,
.sidebar .brand img.brand-mark {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    object-fit: contain !important;
    border-radius: 12px !important;
}

.sidebar .brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Desktop left sidebar: hide only menu item icons, keep mobile bottom navigation unchanged. */
@media (min-width: 901px) {
    .sidebar .side-nav a {
        display: flex !important;
        align-items: center !important;
        gap: 0 !important;
    }

    .sidebar .side-nav a > span {
        margin-left: 0 !important;
    }
}

@media (max-width: 700px) {
    .audit-log-row,
    .connection-log-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}


/* v1.4.8: restore clickable admin top cards and mobile layout */
.admin-top-grid,
.admin-stats-grid,
.admin-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.admin-toggle-card,
.online-toggle-card {
    cursor: pointer !important;
    position: relative !important;
    z-index: 3 !important;
}

.admin-toggle-card.open,
.online-toggle-card.open {
    outline: 3px solid rgba(99, 102, 241, .28) !important;
    box-shadow: 0 12px 28px rgba(99, 102, 241, .14) !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-color: transparent !important;
}

.admin-expand-panel {
    position: relative !important;
    margin-top: -1px !important;
    margin-bottom: 14px !important;
    overflow: visible !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    z-index: 2 !important;
}

.admin-expand-panel[hidden],
.inline-user-sessions-card[hidden] {
    display: none !important;
}

.admin-toggle-card.open::after,
.online-toggle-card.open::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -18px;
    height: 20px;
    background: var(--card);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    z-index: 4;
    pointer-events: none;
}

.admin-users-panel,
.online-details-card {
    border-top: 1px solid transparent !important;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .08) !important;
}

.admin-users-compact-list {
    display: grid;
    gap: 0;
}

.admin-user-compact-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 88px 18px 0;
    border-bottom: 1px solid var(--border);
}

@media (max-width: 700px) {
    .admin-top-grid,
    .admin-stats-grid,
    .admin-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .admin-top-grid .card,
    .admin-stats-grid .card,
    .admin-summary-grid .card {
        min-height: 92px !important;
    }

    .admin-expand-panel {
        margin-top: -1px !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }

    .admin-toggle-card.open::after,
    .online-toggle-card.open::after {
        bottom: -16px;
        height: 18px;
    }

    .admin-user-compact-row {
        grid-template-columns: 1fr;
        padding-right: 80px !important;
    }
}


/* v1.4.8.1: mobile admin top cards typography only */
@media (max-width: 700px) {
    .admin-top-grid,
    .admin-stats-grid,
    .admin-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
        align-items: stretch !important;
    }

    .admin-top-grid .card,
    .admin-stats-grid .card,
    .admin-summary-grid .card {
        min-height: 78px !important;
        padding: 10px 8px !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }

    .admin-top-grid .card span,
    .admin-stats-grid .card span,
    .admin-summary-grid .card span {
        font-size: clamp(10px, 2.65vw, 13px) !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
    }

    .admin-top-grid .card strong,
    .admin-stats-grid .card strong,
    .admin-summary-grid .card strong {
        font-size: clamp(20px, 5vw, 26px) !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
    }

    .admin-top-grid .card small,
    .admin-stats-grid .card small,
    .admin-summary-grid .card small {
        font-size: clamp(9px, 2.45vw, 12px) !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
    }

    #usersToggleCard > span,
    #usersToggleCard .stat-title,
    #usersToggleCard .label {
        font-size: 0 !important;
    }

    #usersToggleCard > span::after,
    #usersToggleCard .stat-title::after,
    #usersToggleCard .label::after {
        content: attr(data-short-label);
        font-size: clamp(10px, 2.65vw, 13px) !important;
        line-height: 1.15 !important;
    }
}


/* v1.4.8.2: rollback Admin online/users panels to the previous readable card UI */

/* Top opened panel should be a normal rounded card again, not a flat text block */
.admin-expand-panel,
.admin-users-panel,
.online-details-card {
    border-radius: 22px !important;
    padding: 16px !important;
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .08) !important;
    overflow: hidden !important;
}

/* Keep a subtle visual connection with the selected top card */
.admin-toggle-card.open,
.online-toggle-card.open {
    outline: 3px solid rgba(99, 102, 241, .25) !important;
    box-shadow: 0 12px 28px rgba(99, 102, 241, .14) !important;
    border-radius: 18px !important;
}

.admin-toggle-card.open::after,
.online-toggle-card.open::after {
    display: none !important;
}

.admin-details-pointer {
    display: block !important;
    position: absolute !important;
    top: -10px !important;
    width: 20px !important;
    height: 20px !important;
    background: var(--card) !important;
    border-left: 1px solid var(--border) !important;
    border-top: 1px solid var(--border) !important;
    transform: rotate(45deg) !important;
    z-index: 1 !important;
}

.admin-details-pointer.users-pointer {
    left: 12% !important;
}

.admin-details-pointer.online-pointer {
    right: 12% !important;
}

/* Online panel: restore grouped user card + individual session cards */
.online-details-card .online-user-group,
.online-details-card .online-user,
.online-details-card .online-user-row,
.online-details-card .online-group {
    display: grid !important;
    gap: 10px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--border) !important;
}

.online-details-card .online-session,
.online-details-card .session-card,
.online-details-card .online-session-card,
.online-details-card .session-row {
    display: grid !important;
    gap: 3px !important;
    padding: 12px 14px !important;
    margin: 8px 0 !important;
    border-radius: 16px !important;
    background: rgba(100, 116, 139, .10) !important;
    border: 0 !important;
    box-shadow: none !important;
}

.online-details-card strong,
.admin-users-panel strong {
    display: block !important;
    font-size: clamp(18px, 4vw, 24px) !important;
    line-height: 1.15 !important;
    margin-bottom: 2px !important;
}

.online-details-card span,
.online-details-card small,
.admin-users-panel span,
.admin-users-panel small {
    display: block !important;
    color: var(--muted) !important;
    line-height: 1.3 !important;
}

/* Users panel: restore compact readable grouping */
.admin-users-compact-list {
    display: grid !important;
    gap: 0 !important;
}

.admin-user-compact-row,
.admin-user-row {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 12px !important;
    align-items: start !important;
    padding: 12px 86px 18px 0 !important;
    border-bottom: 1px solid var(--border) !important;
    background: transparent !important;
    border-radius: 0 !important;
}

.admin-user-compact-row > div,
.admin-user-row > div {
    display: grid !important;
    gap: 5px !important;
    min-width: 0 !important;
}

/* Restore old rounded expand/collapse button style */
.user-row-toggle-icon {
    position: absolute !important;
    right: 12px !important;
    bottom: 14px !important;
    min-width: 58px !important;
    width: 58px !important;
    height: 42px !important;
    border: 1px solid var(--border) !important;
    border-radius: 999px !important;
    background: var(--card) !important;
    color: var(--text) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 900 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .10) !important;
    opacity: 1 !important;
}

.user-row-toggle-icon .toggle-up {
    display: none !important;
}

.admin-user-compact-row.open .user-row-toggle-icon .toggle-down,
.admin-user-row.open .user-row-toggle-icon .toggle-down,
article.open .user-row-toggle-icon .toggle-down {
    display: none !important;
}

.admin-user-compact-row.open .user-row-toggle-icon .toggle-up,
.admin-user-row.open .user-row-toggle-icon .toggle-up,
article.open .user-row-toggle-icon .toggle-up {
    display: inline !important;
}

/* Restored old session cards under a user */
.inline-user-sessions-card {
    margin: 10px 0 14px 0 !important;
    padding: 12px !important;
    border-radius: 18px !important;
    background: rgba(100, 116, 139, .06) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
}

.inline-user-sessions-card[hidden],
.admin-expand-panel[hidden] {
    display: none !important;
}

.inline-sessions-list,
.sessions-list {
    display: grid !important;
    gap: 8px !important;
}

.inline-sessions-list .session-row,
.sessions-list .session-row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 12px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--border) !important;
}

/* Mobile: smaller typography only, keep card UI */
@media (max-width: 700px) {
    .admin-expand-panel,
    .admin-users-panel,
    .online-details-card {
        padding: 14px !important;
        border-radius: 20px !important;
    }

    .admin-details-pointer.users-pointer {
        left: 13% !important;
    }

    .admin-details-pointer.online-pointer {
        right: 13% !important;
    }

    .online-details-card strong,
    .admin-users-panel strong {
        font-size: 17px !important;
        line-height: 1.15 !important;
    }

    .online-details-card span,
    .online-details-card small,
    .admin-users-panel span,
    .admin-users-panel small {
        font-size: 13px !important;
        line-height: 1.25 !important;
    }

    .online-details-card .online-session,
    .online-details-card .session-card,
    .online-details-card .online-session-card,
    .online-details-card .session-row {
        padding: 10px 12px !important;
        border-radius: 15px !important;
        font-size: 13px !important;
    }

    .admin-user-compact-row,
    .admin-user-row {
        grid-template-columns: 1fr !important;
        padding: 10px 76px 16px 0 !important;
    }

    .inline-sessions-list .session-row,
    .sessions-list .session-row {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        font-size: 13px !important;
    }

    .user-row-toggle-icon {
        right: 8px !important;
        bottom: 12px !important;
        min-width: 54px !important;
        width: 54px !important;
        height: 38px !important;
    }
}


/* v1.4.8.3: more minimal mobile Admin top cards only */
@media (max-width: 700px) {
    .admin-top-grid,
    .admin-stats-grid,
    .admin-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        align-items: stretch !important;
    }

    .admin-top-grid .card,
    .admin-stats-grid .card,
    .admin-summary-grid .card {
        min-height: 58px !important;
        padding: 7px 6px !important;
        border-radius: 14px !important;
        box-shadow: 0 8px 18px rgba(15, 23, 42, .055) !important;
    }

    .admin-top-grid .card span,
    .admin-stats-grid .card span,
    .admin-summary-grid .card span {
        font-size: 10px !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }

    .admin-top-grid .card strong,
    .admin-stats-grid .card strong,
    .admin-summary-grid .card strong {
        font-size: 19px !important;
        line-height: 1 !important;
        margin-top: 2px !important;
        white-space: nowrap !important;
    }

    .admin-top-grid .card small,
    .admin-stats-grid .card small,
    .admin-summary-grid .card small {
        font-size: 9px !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }

    /* Short mobile-only labels for compact cards */
    #usersToggleCard > span,
    #usersToggleCard .stat-title,
    #usersToggleCard .label {
        font-size: 0 !important;
    }

    #usersToggleCard > span::after,
    #usersToggleCard .stat-title::after,
    #usersToggleCard .label::after {
        content: attr(data-compact-label);
        font-size: 10px !important;
        line-height: 1.05 !important;
    }

    #onlineToggleCard > span,
    #onlineToggleCard .stat-title,
    #onlineToggleCard .label {
        font-size: 0 !important;
    }

    #onlineToggleCard > span::after,
    #onlineToggleCard .stat-title::after,
    #onlineToggleCard .label::after {
        content: attr(data-short-label);
        font-size: 10px !important;
        line-height: 1.05 !important;
    }

    /* Make DB/site size card text smaller without touching desktop */
    .admin-top-grid .card:nth-child(2) span,
    .admin-stats-grid .card:nth-child(2) span,
    .admin-summary-grid .card:nth-child(2) span,
    .admin-top-grid .card:nth-child(2) small,
    .admin-stats-grid .card:nth-child(2) small,
    .admin-summary-grid .card:nth-child(2) small {
        font-size: 9px !important;
        line-height: 1.08 !important;
    }
}


/* v1.4.8.4: mobile Admin top cards — compact one-row layout */
@media (max-width: 700px) {
    .admin-top-grid,
    .admin-stats-grid,
    .admin-summary-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    .admin-top-grid .card,
    .admin-stats-grid .card,
    .admin-summary-grid .card {
        min-height: 62px !important;
        height: 62px !important;
        padding: 6px 5px !important;
        border-radius: 13px !important;
        overflow: hidden !important;
        display: grid !important;
        align-content: center !important;
        gap: 2px !important;
        box-shadow: 0 6px 14px rgba(15, 23, 42, .05) !important;
    }

    .admin-top-grid .card span,
    .admin-stats-grid .card span,
    .admin-summary-grid .card span,
    .admin-top-grid .card small,
    .admin-stats-grid .card small,
    .admin-summary-grid .card small {
        font-size: 8.5px !important;
        line-height: 1.05 !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        max-width: 100% !important;
    }

    .admin-top-grid .card strong,
    .admin-stats-grid .card strong,
    .admin-summary-grid .card strong {
        font-size: 18px !important;
        line-height: 1 !important;
        margin: 0 !important;
        white-space: nowrap !important;
        letter-spacing: -0.03em !important;
    }

    /* Card 1 requested mobile label is provided through data-mobile-label. */
    #usersToggleCard > span,
    #usersToggleCard .stat-title,
    #usersToggleCard .label {
        font-size: 0 !important;
    }

    #usersToggleCard > span::after,
    #usersToggleCard .stat-title::after,
    #usersToggleCard .label::after {
        content: attr(data-mobile-label);
        display: block;
        font-size: 8.5px !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
    }

    /* Card 3 requested mobile label is provided through data-mobile-label. */
    #onlineToggleCard > span,
    #onlineToggleCard .stat-title,
    #onlineToggleCard .label {
        font-size: 0 !important;
    }

    #onlineToggleCard > span::after,
    #onlineToggleCard .stat-title::after,
    #onlineToggleCard .label::after {
        content: attr(data-mobile-label);
        display: block;
        font-size: 8.5px !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
    }

    /* Card 2: keep size / db / site very compact. */
    .admin-top-grid .card:nth-child(2),
    .admin-stats-grid .card:nth-child(2),
    .admin-summary-grid .card:nth-child(2) {
        gap: 1px !important;
    }

    .admin-top-grid .card:nth-child(2) span,
    .admin-stats-grid .card:nth-child(2) span,
    .admin-summary-grid .card:nth-child(2) span,
    .admin-top-grid .card:nth-child(2) small,
    .admin-stats-grid .card:nth-child(2) small,
    .admin-summary-grid .card:nth-child(2) small {
        font-size: 8px !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
    }

    /* Card 3: hide total big value if present and keep users/guests lines compact */
    #onlineToggleCard strong {
        font-size: 0 !important;
        line-height: 0 !important;
        margin: 0 !important;
    }

    #onlineToggleCard small {
        font-size: 0 !important;
        line-height: 0 !important;
    }

    #onlineToggleCard small::before {
        content: attr(data-mobile-online);
    }
}


/* v1.4.8.5: force Admin top cards into one compact mobile row */
@media (max-width: 700px) {
    body .main-content .admin-top-grid,
    body .main-content .admin-stats-grid,
    body .main-content .admin-summary-grid,
    body .main-content .stats-grid:first-of-type {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 4px !important;
        width: 100% !important;
        max-width: 100% !important;
        align-items: stretch !important;
    }

    body .main-content .admin-top-grid > .card,
    body .main-content .admin-stats-grid > .card,
    body .main-content .admin-summary-grid > .card,
    body .main-content .stats-grid:first-of-type > .card {
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        min-height: 48px !important;
        height: 48px !important;
        padding: 5px 4px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 1px !important;
        box-shadow: 0 5px 12px rgba(15, 23, 42, .045) !important;
    }

    body .main-content .admin-top-grid > .card span,
    body .main-content .admin-stats-grid > .card span,
    body .main-content .admin-summary-grid > .card span,
    body .main-content .stats-grid:first-of-type > .card span,
    body .main-content .admin-top-grid > .card small,
    body .main-content .admin-stats-grid > .card small,
    body .main-content .admin-summary-grid > .card small,
    body .main-content .stats-grid:first-of-type > .card small {
        display: block !important;
        font-size: 7.5px !important;
        line-height: 1.05 !important;
        letter-spacing: -0.02em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    body .main-content .admin-top-grid > .card strong,
    body .main-content .admin-stats-grid > .card strong,
    body .main-content .admin-summary-grid > .card strong,
    body .main-content .stats-grid:first-of-type > .card strong {
        display: block !important;
        font-size: 15px !important;
        line-height: .95 !important;
        margin: 0 !important;
        white-space: nowrap !important;
        letter-spacing: -0.04em !important;
    }

    #usersToggleCard > span,
    #usersToggleCard .stat-title,
    #usersToggleCard .label {
        font-size: 0 !important;
        line-height: 0 !important;
    }

    #usersToggleCard > span::after,
    #usersToggleCard .stat-title::after,
    #usersToggleCard .label::after {
        content: attr(data-mobile-label);
        display: block !important;
        font-size: 7.5px !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
    }

    body .main-content .admin-top-grid > .card:nth-child(2),
    body .main-content .admin-stats-grid > .card:nth-child(2),
    body .main-content .admin-summary-grid > .card:nth-child(2),
    body .main-content .stats-grid:first-of-type > .card:nth-child(2) {
        gap: 0 !important;
    }

    body .main-content .admin-top-grid > .card:nth-child(2) span,
    body .main-content .admin-stats-grid > .card:nth-child(2) span,
    body .main-content .admin-summary-grid > .card:nth-child(2) span,
    body .main-content .stats-grid:first-of-type > .card:nth-child(2) span,
    body .main-content .admin-top-grid > .card:nth-child(2) small,
    body .main-content .admin-stats-grid > .card:nth-child(2) small,
    body .main-content .admin-summary-grid > .card:nth-child(2) small,
    body .main-content .stats-grid:first-of-type > .card:nth-child(2) small {
        font-size: 7px !important;
        line-height: 1.02 !important;
        white-space: nowrap !important;
    }

    #onlineToggleCard > span,
    #onlineToggleCard .stat-title,
    #onlineToggleCard .label {
        font-size: 0 !important;
        line-height: 0 !important;
    }

    #onlineToggleCard > span::after,
    #onlineToggleCard .stat-title::after,
    #onlineToggleCard .label::after {
        content: attr(data-mobile-label);
        display: block !important;
        font-size: 7.5px !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
    }

    #onlineToggleCard strong {
        display: none !important;
    }

    #onlineToggleCard small {
        font-size: 0 !important;
        line-height: 0 !important;
    }

    #onlineToggleCard small[data-mobile-online]::before {
        content: attr(data-mobile-online);
        display: block !important;
        white-space: pre-line !important;
        font-size: 7.5px !important;
        line-height: 1.08 !important;
        letter-spacing: -0.02em !important;
    }

    #onlineToggleCard small:not([data-mobile-online]) {
        display: none !important;
    }

    .admin-toggle-card.open,
    .online-toggle-card.open {
        outline-width: 2px !important;
        border-radius: 12px !important;
    }
}


/* v1.4.8.6: Home vehicle icon cleanup */
.vehicle-default-icon {
    display: inline-flex !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    color: var(--text) !important;
    opacity: .82 !important;
    background: currentColor;
    -webkit-mask: url("../img/default-vehicle.svg") center / contain no-repeat;
    mask: url("../img/default-vehicle.svg") center / contain no-repeat;
}

.vehicle-logo img,
.vehicle-icon img,
.car-logo img,
.brand-badge img,
.vehicle-avatar img {
    display: none !important;
}

.vehicle-logo,
.vehicle-icon,
.car-logo,
.brand-badge,
.vehicle-avatar {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Show a neutral system-like car icon instead of temporary brand/initials. */
.vehicle-logo::before,
.vehicle-icon::before,
.car-logo::before,
.brand-badge::before,
.vehicle-avatar::before {
    content: "" !important;
    display: inline-flex !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    color: var(--text) !important;
    opacity: .82 !important;
    background: currentColor;
    -webkit-mask: url("../img/default-vehicle.svg") center / contain no-repeat;
    mask: url("../img/default-vehicle.svg") center / contain no-repeat;
}

.vehicle-logo .vehicle-default-icon,
.vehicle-icon .vehicle-default-icon,
.car-logo .vehicle-default-icon,
.brand-badge .vehicle-default-icon,
.vehicle-avatar .vehicle-default-icon {
    width: 38px !important;
    height: 38px !important;
}

/* Better switch-car button: no squeezed icon, use the provided two-arrow idea. */
.change-vehicle,
.switch-vehicle,
.vehicle-switch,
.car-switch,
.change-vehicle-btn,
.switch-vehicle-btn {
    min-width: 52px !important;
    width: 52px !important;
    height: 52px !important;
    padding: 0 !important;
    border-radius: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.change-vehicle svg,
.switch-vehicle svg,
.vehicle-switch svg,
.car-switch svg,
.change-vehicle-btn svg,
.switch-vehicle-btn svg {
    display: none !important;
}

.switch-vehicle-icon,
.change-vehicle::before,
.switch-vehicle::before,
.vehicle-switch::before,
.car-switch::before,
.change-vehicle-btn::before,
.switch-vehicle-btn::before {
    content: "" !important;
    display: block !important;
    width: 30px !important;
    height: 30px !important;
    color: var(--text) !important;
    opacity: .75 !important;
    background: currentColor !important;
    -webkit-mask: url("../img/switch-vehicle.svg") center / contain no-repeat !important;
    mask: url("../img/switch-vehicle.svg") center / contain no-repeat !important;
}

.change-vehicle .switch-vehicle-icon,
.switch-vehicle .switch-vehicle-icon,
.vehicle-switch .switch-vehicle-icon,
.car-switch .switch-vehicle-icon,
.change-vehicle-btn .switch-vehicle-icon,
.switch-vehicle-btn .switch-vehicle-icon {
    width: 30px !important;
    height: 30px !important;
}

@media (max-width: 700px) {
    .vehicle-default-icon,
    .vehicle-logo::before,
    .vehicle-icon::before,
    .car-logo::before,
    .brand-badge::before,
    .vehicle-avatar::before {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
    }

    .change-vehicle,
    .switch-vehicle,
    .vehicle-switch,
    .car-switch,
    .change-vehicle-btn,
    .switch-vehicle-btn {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        border-radius: 15px !important;
    }

    .switch-vehicle-icon,
    .change-vehicle::before,
    .switch-vehicle::before,
    .vehicle-switch::before,
    .car-switch::before,
    .change-vehicle-btn::before,
    .switch-vehicle-btn::before {
        width: 28px !important;
        height: 28px !important;
    }
}


/* v1.4.8.7: Home cleanup — remove top + and align TO expand button */

/* Hide the floating/top plus button only on Home/Dashboard. 
   Admin back button and mobile bottom navigation are not affected. */
body.home-dashboard-page .floating-add,
body.home-dashboard-page .fab-add,
body.home-dashboard-page .quick-add-fab,
body.home-dashboard-page .quick-add-button,
body.home-dashboard-page .top-add-button,
body.home-dashboard-page .add-menu-toggle,
body.home-dashboard-page .page-add-button,
body.home-dashboard-page .header-add-button,
body.home-dashboard-page .app-fab,
body.home-dashboard-page .btn-add,
body.home-dashboard-page button[aria-label="Add"],
body.home-dashboard-page a[aria-label="Add"],
body.home-dashboard-page a[aria-label="Add"] {
    display: none !important;
}

/* Fallback for the visible round + in dashboard header.
   Kept narrow to avoid affecting normal Add buttons inside forms. */
body.home-dashboard-page .page-header > a:has(+ *),
body.home-dashboard-page .page-header > button:has(+ *) {
    /* no-op fallback selector block for browsers that support :has */
}

body.home-dashboard-page .page-header a[href*="add"],
body.home-dashboard-page .page-header button[type="button"] {
    display: none !important;
}

/* Keep the TO expand/collapse button at the bottom of the list,
   but align its center to the vertical axis of the RIGHT EDGE of the mi/km toggle. */
.nearest-maintenance-card,
.nearest-to-card,
.dashboard-maintenance-card,
.card:has(.unit-toggle),
.card:has(.mileage-toggle),
.card:has(.distance-toggle) {
    position: relative !important;
}

/* The mi/km toggle usually sits close to the right side of the card.
   Use the same right offset for the expand button, so its center aligns
   with the right edge of the toggle control. */
.nearest-maintenance-card .expand-collapse-btn,
.nearest-maintenance-card .toggle-more-btn,
.nearest-maintenance-card .maintenance-expand-btn,
.nearest-maintenance-card .show-more-btn,
.nearest-maintenance-card .expand-btn,
.nearest-to-card .expand-collapse-btn,
.nearest-to-card .toggle-more-btn,
.nearest-to-card .maintenance-expand-btn,
.nearest-to-card .show-more-btn,
.nearest-to-card .expand-btn,
.dashboard-maintenance-card .expand-collapse-btn,
.dashboard-maintenance-card .toggle-more-btn,
.dashboard-maintenance-card .maintenance-expand-btn,
.dashboard-maintenance-card .show-more-btn,
.dashboard-maintenance-card .expand-btn,
.card:has(.unit-toggle) .expand-collapse-btn,
.card:has(.unit-toggle) .toggle-more-btn,
.card:has(.unit-toggle) .maintenance-expand-btn,
.card:has(.unit-toggle) .show-more-btn,
.card:has(.unit-toggle) .expand-btn,
.card:has(.mileage-toggle) .expand-collapse-btn,
.card:has(.mileage-toggle) .toggle-more-btn,
.card:has(.mileage-toggle) .maintenance-expand-btn,
.card:has(.mileage-toggle) .show-more-btn,
.card:has(.mileage-toggle) .expand-btn,
.card:has(.distance-toggle) .expand-collapse-btn,
.card:has(.distance-toggle) .toggle-more-btn,
.card:has(.distance-toggle) .maintenance-expand-btn,
.card:has(.distance-toggle) .show-more-btn,
.card:has(.distance-toggle) .expand-btn {
    position: absolute !important;
    right: 86px !important;
    left: auto !important;
    transform: translateX(50%) !important;
    bottom: -18px !important;
    margin: 0 !important;
    z-index: 5 !important;
}

/* Common class fallback used by the previous TO expand button. */
.to-expand-button,
.to-collapse-button,
.to-more-button,
.maintenance-more-toggle {
    right: 86px !important;
    left: auto !important;
    transform: translateX(50%) !important;
}

@media (max-width: 700px) {
    body.home-dashboard-page .floating-add,
    body.home-dashboard-page .fab-add,
    body.home-dashboard-page .quick-add-fab,
    body.home-dashboard-page .quick-add-button,
    body.home-dashboard-page .top-add-button,
    body.home-dashboard-page .add-menu-toggle,
    body.home-dashboard-page .page-add-button,
    body.home-dashboard-page .header-add-button,
    body.home-dashboard-page .app-fab,
    body.home-dashboard-page .btn-add,
    body.home-dashboard-page button[aria-label="Add"],
        body.home-dashboard-page a[aria-label="Add"],
    body.home-dashboard-page a[aria-label="Add"] {
        display: none !important;
    }

    body.home-dashboard-page .page-header a[href*="add"],
    body.home-dashboard-page .page-header button[type="button"] {
        display: none !important;
    }

    .nearest-maintenance-card .expand-collapse-btn,
    .nearest-maintenance-card .toggle-more-btn,
    .nearest-maintenance-card .maintenance-expand-btn,
    .nearest-maintenance-card .show-more-btn,
    .nearest-maintenance-card .expand-btn,
    .nearest-to-card .expand-collapse-btn,
    .nearest-to-card .toggle-more-btn,
    .nearest-to-card .maintenance-expand-btn,
    .nearest-to-card .show-more-btn,
    .nearest-to-card .expand-btn,
    .dashboard-maintenance-card .expand-collapse-btn,
    .dashboard-maintenance-card .toggle-more-btn,
    .dashboard-maintenance-card .maintenance-expand-btn,
    .dashboard-maintenance-card .show-more-btn,
    .dashboard-maintenance-card .expand-btn,
    .card:has(.unit-toggle) .expand-collapse-btn,
    .card:has(.unit-toggle) .toggle-more-btn,
    .card:has(.unit-toggle) .maintenance-expand-btn,
    .card:has(.unit-toggle) .show-more-btn,
    .card:has(.unit-toggle) .expand-btn,
    .card:has(.mileage-toggle) .expand-collapse-btn,
    .card:has(.mileage-toggle) .toggle-more-btn,
    .card:has(.mileage-toggle) .maintenance-expand-btn,
    .card:has(.mileage-toggle) .show-more-btn,
    .card:has(.mileage-toggle) .expand-btn,
    .card:has(.distance-toggle) .expand-collapse-btn,
    .card:has(.distance-toggle) .toggle-more-btn,
    .card:has(.distance-toggle) .maintenance-expand-btn,
    .card:has(.distance-toggle) .show-more-btn,
    .card:has(.distance-toggle) .expand-btn,
    .to-expand-button,
    .to-collapse-button,
    .to-more-button,
    .maintenance-more-toggle {
        right: 86px !important;
        left: auto !important;
        transform: translateX(50%) !important;
        bottom: -18px !important;
    }
}


/* v1.4.8.8: corrected switch vehicle icon */
.switch-vehicle-icon,
.change-vehicle::before,
.switch-vehicle::before,
.vehicle-switch::before,
.car-switch::before,
.change-vehicle-btn::before,
.switch-vehicle-btn::before {
    -webkit-mask: url("../img/switch-vehicle.svg") center / contain no-repeat !important;
    mask: url("../img/switch-vehicle.svg") center / contain no-repeat !important;
    width: 32px !important;
    height: 32px !important;
    opacity: .72 !important;
}

@media (max-width: 700px) {
    .switch-vehicle-icon,
    .change-vehicle::before,
    .switch-vehicle::before,
    .vehicle-switch::before,
    .car-switch::before,
    .change-vehicle-btn::before,
    .switch-vehicle-btn::before {
        width: 30px !important;
        height: 30px !important;
    }
}


/* v1.4.8.10: dashboard render restore */
/* Dashboard no longer renders quick-add markup, but keep safe CSS fallback. */
.quick-add-wrap,
.quick-add-backdrop,
.quick-add-sheet {
    display: none !important;
}

/* Keep TO expand/collapse button at bottom and aligned by the right edge axis of the mi/km toggle. */
.to-card {
    position: relative !important;
}

.to-card .to-expand-toggle,
.to-card .to-list-toggle,
.to-card .expand-toggle,
.to-card .expand-btn,
.to-card .show-more-btn,
.to-card .maintenance-more-toggle,
.to-card a[href*="expand_to"] {
    right: 86px !important;
    left: auto !important;
    transform: translateX(50%) !important;
}

@media (max-width: 700px) {
    .to-card .to-expand-toggle,
    .to-card .to-list-toggle,
    .to-card .expand-toggle,
    .to-card .expand-btn,
    .to-card .show-more-btn,
    .to-card .maintenance-more-toggle,
    .to-card a[href*="expand_to"] {
        right: 86px !important;
        left: auto !important;
        transform: translateX(50%) !important;
    }
}


/* v1.4.8.11: restore selected vehicle card layout on Home */
.vehicle-card,
.selected-vehicle-card,
.vehicle-summary-card,
.car-card {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 18px !important;
    min-height: 132px !important;
    padding: 22px 26px !important;
    border-radius: 24px !important;
    overflow: visible !important;
}

.vehicle-card > *,
.selected-vehicle-card > *,
.vehicle-summary-card > *,
.car-card > * {
    min-width: 0 !important;
}

.vehicle-card .vehicle-info,
.selected-vehicle-card .vehicle-info,
.vehicle-summary-card .vehicle-info,
.car-card .vehicle-info,
.vehicle-card .vehicle-main,
.selected-vehicle-card .vehicle-main,
.vehicle-summary-card .vehicle-main,
.car-card .vehicle-main {
    display: grid !important;
    gap: 4px !important;
    align-items: center !important;
}

.vehicle-card h2,
.selected-vehicle-card h2,
.vehicle-summary-card h2,
.car-card h2,
.vehicle-card .vehicle-title,
.selected-vehicle-card .vehicle-title,
.vehicle-summary-card .vehicle-title,
.car-card .vehicle-title {
    font-size: 28px !important;
    line-height: 1.05 !important;
    margin: 0 !important;
    font-weight: 800 !important;
}

.vehicle-card .muted,
.selected-vehicle-card .muted,
.vehicle-summary-card .muted,
.car-card .muted,
.vehicle-card .vehicle-number,
.selected-vehicle-card .vehicle-number,
.vehicle-summary-card .vehicle-number,
.car-card .vehicle-number,
.vehicle-card .vehicle-vin,
.selected-vehicle-card .vehicle-vin,
.vehicle-summary-card .vehicle-vin,
.car-card .vehicle-vin {
    font-size: 18px !important;
    line-height: 1.15 !important;
    color: var(--muted) !important;
    margin: 0 !important;
}

/* Default neutral vehicle icon: keep it inside the normal square badge, not as a broken tiny floating block. */
.vehicle-logo,
.vehicle-icon,
.car-logo,
.brand-badge,
.vehicle-avatar {
    width: 74px !important;
    height: 74px !important;
    min-width: 74px !important;
    border-radius: 22px !important;
    background: var(--accent-soft, rgba(99,102,241,.16)) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 12px 28px rgba(79, 70, 229, .18) !important;
    overflow: hidden !important;
    color: var(--text) !important;
    opacity: 1 !important;
}

.vehicle-logo::before,
.vehicle-icon::before,
.car-logo::before,
.brand-badge::before,
.vehicle-avatar::before,
.vehicle-default-icon {
    content: "" !important;
    display: block !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    color: var(--text) !important;
    opacity: .78 !important;
    background: currentColor !important;
    -webkit-mask: url("../img/default-vehicle.svg") center / contain no-repeat !important;
    mask: url("../img/default-vehicle.svg") center / contain no-repeat !important;
}

.vehicle-logo img,
.vehicle-icon img,
.car-logo img,
.brand-badge img,
.vehicle-avatar img {
    display: none !important;
}

/* Stats pills inside selected vehicle card */
.vehicle-card .vehicle-stats,
.selected-vehicle-card .vehicle-stats,
.vehicle-summary-card .vehicle-stats,
.car-card .vehicle-stats,
.vehicle-card .car-stats,
.selected-vehicle-card .car-stats,
.vehicle-summary-card .car-stats,
.car-card .car-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(120px, 1fr)) !important;
    gap: 8px 12px !important;
    max-width: 520px !important;
    width: 100% !important;
}

.vehicle-card .vehicle-stats > *,
.selected-vehicle-card .vehicle-stats > *,
.vehicle-summary-card .vehicle-stats > *,
.car-card .vehicle-stats > *,
.vehicle-card .car-stats > *,
.selected-vehicle-card .car-stats > *,
.vehicle-summary-card .car-stats > *,
.car-card .car-stats > * {
    min-height: 30px !important;
    border-radius: 999px !important;
    background: var(--accent-soft, rgba(99,102,241,.14)) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 12px !important;
    font-size: 15px !important;
    font-weight: 750 !important;
    white-space: nowrap !important;
}

/* Change vehicle button: keep normal size and icon proportion. */
.change-vehicle,
.switch-vehicle,
.vehicle-switch,
.car-switch,
.change-vehicle-btn,
.switch-vehicle-btn {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    border-radius: 18px !important;
    align-self: start !important;
    justify-self: end !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.switch-vehicle-icon,
.change-vehicle::before,
.switch-vehicle::before,
.vehicle-switch::before,
.car-switch::before,
.change-vehicle-btn::before,
.switch-vehicle-btn::before {
    width: 34px !important;
    height: 34px !important;
    opacity: .72 !important;
    -webkit-mask: url("../img/switch-vehicle.svg") center / contain no-repeat !important;
    mask: url("../img/switch-vehicle.svg") center / contain no-repeat !important;
}

/* Make sure header/vehicle card content starts directly under title, no orphan tiny card. */
.topbar + .vehicle-card,
.topbar + .selected-vehicle-card,
.topbar + .vehicle-summary-card,
.topbar + .car-card {
    margin-top: 14px !important;
}

@media (max-width: 700px) {
    .vehicle-card,
    .selected-vehicle-card,
    .vehicle-summary-card,
    .car-card {
        grid-template-columns: auto 1fr auto !important;
        gap: 12px !important;
        min-height: 136px !important;
        padding: 18px 16px !important;
        border-radius: 22px !important;
    }

    .vehicle-logo,
    .vehicle-icon,
    .car-logo,
    .brand-badge,
    .vehicle-avatar {
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        border-radius: 18px !important;
    }

    .vehicle-logo::before,
    .vehicle-icon::before,
    .car-logo::before,
    .brand-badge::before,
    .vehicle-avatar::before,
    .vehicle-default-icon {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }

    .vehicle-card h2,
    .selected-vehicle-card h2,
    .vehicle-summary-card h2,
    .car-card h2,
    .vehicle-card .vehicle-title,
    .selected-vehicle-card .vehicle-title,
    .vehicle-summary-card .vehicle-title,
    .car-card .vehicle-title {
        font-size: 24px !important;
    }

    .vehicle-card .muted,
    .selected-vehicle-card .muted,
    .vehicle-summary-card .muted,
    .car-card .muted,
    .vehicle-card .vehicle-number,
    .selected-vehicle-card .vehicle-number,
    .vehicle-summary-card .vehicle-number,
    .car-card .vehicle-number,
    .vehicle-card .vehicle-vin,
    .selected-vehicle-card .vehicle-vin,
    .vehicle-summary-card .vehicle-vin,
    .car-card .vehicle-vin {
        font-size: 15px !important;
    }

    .vehicle-card .vehicle-stats,
    .selected-vehicle-card .vehicle-stats,
    .vehicle-summary-card .vehicle-stats,
    .car-card .vehicle-stats,
    .vehicle-card .car-stats,
    .selected-vehicle-card .car-stats,
    .vehicle-summary-card .car-stats,
    .car-card .car-stats {
        grid-template-columns: repeat(2, minmax(80px, 1fr)) !important;
        gap: 7px 8px !important;
    }

    .vehicle-card .vehicle-stats > *,
    .selected-vehicle-card .vehicle-stats > *,
    .vehicle-summary-card .vehicle-stats > *,
    .car-card .vehicle-stats > *,
    .vehicle-card .car-stats > *,
    .selected-vehicle-card .car-stats > *,
    .vehicle-summary-card .car-stats > *,
    .car-card .car-stats > * {
        min-height: 28px !important;
        font-size: 13px !important;
        padding: 4px 8px !important;
    }

    .change-vehicle,
    .switch-vehicle,
    .vehicle-switch,
    .car-switch,
    .change-vehicle-btn,
    .switch-vehicle-btn {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        border-radius: 16px !important;
    }

    .switch-vehicle-icon,
    .change-vehicle::before,
    .switch-vehicle::before,
    .vehicle-switch::before,
    .car-switch::before,
    .change-vehicle-btn::before,
    .switch-vehicle-btn::before {
        width: 30px !important;
        height: 30px !important;
    }
}


/* v1.4.8.12: repair Home selected vehicle card and independent TO controls */

/* IMPORTANT:
   .vehicle-switch is the selected vehicle CARD, not the switch icon.
   Previous icon CSS accidentally attached ::before to this whole card and broke the layout. */
section.vehicle-switch::before,
section.vehicle-switch::after {
    content: none !important;
    display: none !important;
}

section.vehicle-switch.card,
section.vehicle-switch.compact-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: 100% !important;
    min-height: 150px !important;
    padding: 22px 126px 22px 26px !important;
    margin: 0 0 16px 0 !important;
    border-radius: 24px !important;
    overflow: visible !important;
    position: relative !important;
}

section.vehicle-switch .vehicle-switch-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 18px !important;
    width: 100% !important;
    min-width: 0 !important;
}

section.vehicle-switch .vehicle-main-info {
    display: grid !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
}

section.vehicle-switch .vehicle-title-line strong {
    display: block !important;
    font-size: 28px !important;
    line-height: 1.05 !important;
    font-weight: 850 !important;
    margin: 0 !important;
    color: var(--text) !important;
}

section.vehicle-switch .vehicle-main-info > span,
section.vehicle-switch .vehicle-main-info > small {
    display: block !important;
    font-size: 18px !important;
    line-height: 1.15 !important;
    color: var(--muted) !important;
    margin: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: unset !important;
}

section.vehicle-switch .vehicle-icon,
section.vehicle-switch .brand-vehicle-icon {
    width: 74px !important;
    height: 74px !important;
    min-width: 74px !important;
    flex: 0 0 74px !important;
    border-radius: 22px !important;
    background: var(--accent-soft, rgba(100, 116, 139, .16)) !important;
    color: var(--text) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .10) !important;
    opacity: 1 !important;
    overflow: hidden !important;
}

section.vehicle-switch .vehicle-icon img,
section.vehicle-switch .brand-vehicle-icon img {
    display: none !important;
}

section.vehicle-switch .vehicle-icon::before,
section.vehicle-switch .brand-vehicle-icon::before {
    content: "" !important;
    display: block !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    background: currentColor !important;
    opacity: .78 !important;
    -webkit-mask: url("../img/default-vehicle.svg") center / contain no-repeat !important;
    mask: url("../img/default-vehicle.svg") center / contain no-repeat !important;
}

section.vehicle-switch .vehicle-mini-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(120px, 1fr)) !important;
    gap: 8px 12px !important;
    max-width: 520px !important;
    width: 100% !important;
    margin-top: 8px !important;
}

section.vehicle-switch .vehicle-mini-stats-grid span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 30px !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    background: var(--accent-soft, rgba(99, 102, 241, .14)) !important;
    color: var(--text) !important;
    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    text-align: center !important;
    white-space: nowrap !important;
}

section.vehicle-switch .vehicle-change-large {
    position: absolute !important;
    right: 22px !important;
    top: 22px !important;
    transform: none !important;
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    padding: 0 !important;
    border-radius: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    font-size: 0 !important;
    color: var(--text) !important;
}

section.vehicle-switch .vehicle-change-large svg {
    display: none !important;
}

section.vehicle-switch .vehicle-change-large::before {
    content: "" !important;
    display: block !important;
    width: 34px !important;
    height: 34px !important;
    background: currentColor !important;
    opacity: .72 !important;
    -webkit-mask: url("../img/switch-vehicle.svg") center / contain no-repeat !important;
    mask: url("../img/switch-vehicle.svg") center / contain no-repeat !important;
}

/* Keep the mi/km toggle independent from expand/collapse state.
   Do not allow generic expand_to link rules to move unit-toggle links. */
.to-card {
    position: relative !important;
    overflow: visible !important;
}

.to-card .section-head-with-units {
    position: relative !important;
    min-height: 34px !important;
    padding-top: 6px !important;
}

.to-card .unit-toggle {
    position: absolute !important;
    top: -22px !important;
    right: 38px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 4 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    margin: 0 !important;
}

.to-card .unit-toggle a {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

/* Expand/collapse button stays at the bottom of TO list.
   Its center is aligned with the right edge of the mi/km toggle. */
.to-card .expand-to-wrap {
    position: relative !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.to-card .expand-to-btn {
    position: absolute !important;
    right: 38px !important;
    left: auto !important;
    bottom: -24px !important;
    transform: translateX(50%) !important;
    margin: 0 !important;
    z-index: 5 !important;
}

/* Remove risky generic rules from previous patch by overriding only the actual unit links. */
.to-card a[href*="expand_to"] {
    position: static;
}

.to-card .unit-toggle a[href*="expand_to"] {
    position: static !important;
    transform: none !important;
}

@media (max-width: 700px) {
    section.vehicle-switch.card,
    section.vehicle-switch.compact-card {
        min-height: 150px !important;
        padding: 18px 84px 18px 16px !important;
        border-radius: 22px !important;
        gap: 12px !important;
    }

    section.vehicle-switch .vehicle-switch-left {
        gap: 12px !important;
    }

    section.vehicle-switch .vehicle-icon,
    section.vehicle-switch .brand-vehicle-icon {
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        flex-basis: 64px !important;
        border-radius: 18px !important;
    }

    section.vehicle-switch .vehicle-icon::before,
    section.vehicle-switch .brand-vehicle-icon::before {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }

    section.vehicle-switch .vehicle-title-line strong {
        font-size: 24px !important;
    }

    section.vehicle-switch .vehicle-main-info > span,
    section.vehicle-switch .vehicle-main-info > small {
        font-size: 15px !important;
    }

    section.vehicle-switch .vehicle-mini-stats-grid {
        grid-template-columns: repeat(2, minmax(82px, 1fr)) !important;
        gap: 7px 8px !important;
    }

    section.vehicle-switch .vehicle-mini-stats-grid span {
        min-height: 28px !important;
        padding: 4px 8px !important;
        font-size: 13px !important;
    }

    section.vehicle-switch .vehicle-change-large {
        right: 16px !important;
        top: 18px !important;
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        border-radius: 16px !important;
    }

    section.vehicle-switch .vehicle-change-large::before {
        width: 30px !important;
        height: 30px !important;
    }

    .to-card .unit-toggle {
        top: -20px !important;
        right: 38px !important;
    }

    .to-card .expand-to-btn {
        right: 38px !important;
        bottom: -23px !important;
    }
}


/* v1.4.8.13: Home typography normalization */
/* Use a consistent compact font scale on Home instead of oversized vehicle card text. */
:root {
    --db-font-body: 14px;
    --db-font-small: 12px;
    --db-font-section: 20px;
    --db-font-title: 26px;
}

body {
    font-size: var(--db-font-body);
}

/* Selected vehicle card: compact, readable, consistent with the rest of the app. */
section.vehicle-switch.card,
section.vehicle-switch.compact-card {
    min-height: 126px !important;
    padding: 18px 104px 18px 22px !important;
    gap: 14px !important;
}

section.vehicle-switch .vehicle-switch-left {
    gap: 14px !important;
}

section.vehicle-switch .vehicle-title-line strong {
    font-size: var(--db-font-title) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
}

section.vehicle-switch .vehicle-main-info > span,
section.vehicle-switch .vehicle-main-info > small {
    font-size: var(--db-font-body) !important;
    line-height: 1.18 !important;
}

section.vehicle-switch .vehicle-icon,
section.vehicle-switch .brand-vehicle-icon {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    flex-basis: 62px !important;
    border-radius: 18px !important;
}

section.vehicle-switch .vehicle-icon::before,
section.vehicle-switch .brand-vehicle-icon::before {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
}

section.vehicle-switch .vehicle-mini-stats-grid {
    grid-template-columns: repeat(2, minmax(94px, 1fr)) !important;
    gap: 6px 8px !important;
    max-width: 420px !important;
    margin-top: 6px !important;
}

section.vehicle-switch .vehicle-mini-stats-grid span {
    min-height: 26px !important;
    padding: 4px 8px !important;
    font-size: var(--db-font-small) !important;
    line-height: 1 !important;
    font-weight: 750 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

section.vehicle-switch .vehicle-change-large {
    right: 18px !important;
    top: 18px !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    border-radius: 16px !important;
}

section.vehicle-switch .vehicle-change-large::before {
    width: 28px !important;
    height: 28px !important;
}

/* Dashboard cards and lists: keep common typography compact. */
.mileage-card h2 {
    font-size: 28px !important;
    line-height: 1.05 !important;
}

.mileage-card .muted,
.service-row span,
.list-item span,
.fuel-entry span,
.object-card span {
    font-size: var(--db-font-body) !important;
}

.section-head h2,
.section-head h3 {
    font-size: var(--db-font-section) !important;
    line-height: 1.15 !important;
}

.service-row strong,
.table-row strong,
.list-item strong,
.fuel-entry strong,
.object-card strong {
    font-size: var(--db-font-body) !important;
    line-height: 1.2 !important;
}

@media (max-width: 700px) {
    :root {
        --db-font-body: 13px;
        --db-font-small: 11px;
        --db-font-section: 20px;
        --db-font-title: 25px;
    }

    section.vehicle-switch.card,
    section.vehicle-switch.compact-card {
        min-height: 126px !important;
        padding: 16px 76px 16px 14px !important;
        gap: 10px !important;
    }

    section.vehicle-switch .vehicle-switch-left {
        gap: 10px !important;
        align-items: center !important;
    }

    section.vehicle-switch .vehicle-title-line strong {
        font-size: var(--db-font-title) !important;
    }

    section.vehicle-switch .vehicle-main-info > span,
    section.vehicle-switch .vehicle-main-info > small {
        font-size: var(--db-font-body) !important;
    }

    section.vehicle-switch .vehicle-icon,
    section.vehicle-switch .brand-vehicle-icon {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        flex-basis: 56px !important;
        border-radius: 17px !important;
    }

    section.vehicle-switch .vehicle-icon::before,
    section.vehicle-switch .brand-vehicle-icon::before {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
    }

    section.vehicle-switch .vehicle-mini-stats-grid {
        grid-template-columns: repeat(2, minmax(76px, 1fr)) !important;
        gap: 6px !important;
        max-width: 100% !important;
    }

    section.vehicle-switch .vehicle-mini-stats-grid span {
        min-height: 25px !important;
        padding: 4px 7px !important;
        font-size: var(--db-font-small) !important;
        letter-spacing: -0.02em !important;
    }

    section.vehicle-switch .vehicle-change-large {
        right: 14px !important;
        top: 16px !important;
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        border-radius: 15px !important;
    }

    section.vehicle-switch .vehicle-change-large::before {
        width: 26px !important;
        height: 26px !important;
    }

    .mileage-card h2 {
        font-size: 26px !important;
    }

    .section-head h2,
    .section-head h3 {
        font-size: 20px !important;
    }
}


/* v1.4.8.14: compact selected vehicle stats pills */
section.vehicle-switch .vehicle-mini-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px 8px !important;
    width: 100% !important;
    max-width: 430px !important;
    margin-top: 6px !important;
}

section.vehicle-switch .vehicle-mini-stats-grid span {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 24px !important;
    height: 24px !important;
    padding: 3px 7px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 650 !important;
    letter-spacing: -0.04em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
}

@media (max-width: 700px) {
    section.vehicle-switch .vehicle-mini-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px 6px !important;
        max-width: 100% !important;
        margin-top: 6px !important;
    }

    section.vehicle-switch .vehicle-mini-stats-grid span {
        min-height: 23px !important;
        height: 23px !important;
        padding: 3px 5px !important;
        font-size: 10px !important;
        font-weight: 650 !important;
        letter-spacing: -0.055em !important;
    }

    /* Slightly reduce surrounding vehicle card text so the stats have more space. */
    section.vehicle-switch .vehicle-title-line strong {
        font-size: 23px !important;
    }

    section.vehicle-switch .vehicle-main-info > span,
    section.vehicle-switch .vehicle-main-info > small {
        font-size: 12px !important;
        line-height: 1.12 !important;
    }
}

@media (max-width: 390px) {
    section.vehicle-switch .vehicle-mini-stats-grid span {
        font-size: 9px !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        letter-spacing: -0.06em !important;
    }
}


/* v1.4.8.16: simpler selected vehicle stats, especially for desktop */
section.vehicle-switch .vehicle-mini-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px 8px !important;
    width: 100% !important;
    max-width: 360px !important;
    margin-top: 5px !important;
}

section.vehicle-switch .vehicle-mini-stats-grid span {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 22px !important;
    min-height: 22px !important;
    padding: 2px 6px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    letter-spacing: -0.035em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
}

@media (min-width: 701px) {
    section.vehicle-switch.card,
    section.vehicle-switch.compact-card {
        min-height: 116px !important;
        padding: 14px 88px 14px 18px !important;
    }

    section.vehicle-switch .vehicle-switch-left {
        gap: 12px !important;
    }

    section.vehicle-switch .vehicle-title-line strong {
        font-size: 22px !important;
        line-height: 1.05 !important;
    }

    section.vehicle-switch .vehicle-main-info > span,
    section.vehicle-switch .vehicle-main-info > small {
        font-size: 11px !important;
        line-height: 1.08 !important;
    }

    section.vehicle-switch .vehicle-icon,
    section.vehicle-switch .brand-vehicle-icon {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        flex-basis: 48px !important;
        border-radius: 14px !important;
    }

    section.vehicle-switch .vehicle-icon::before,
    section.vehicle-switch .brand-vehicle-icon::before {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
    }

    section.vehicle-switch .vehicle-change-large {
        right: 18px !important;
        top: 16px !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        border-radius: 13px !important;
    }

    section.vehicle-switch .vehicle-change-large::before {
        width: 22px !important;
        height: 22px !important;
    }
}

@media (max-width: 700px) {
    section.vehicle-switch .vehicle-mini-stats-grid {
        max-width: 100% !important;
        gap: 5px 6px !important;
    }

    section.vehicle-switch .vehicle-mini-stats-grid span {
        height: 23px !important;
        min-height: 23px !important;
        padding: 3px 5px !important;
        font-size: 10px !important;
        font-weight: 550 !important;
        letter-spacing: -0.05em !important;
    }
}

@media (max-width: 390px) {
    section.vehicle-switch .vehicle-mini-stats-grid span {
        font-size: 9px !important;
        letter-spacing: -0.06em !important;
    }
}


/* v1.4.8.18: combined UI positioning fixes */

/* 1) Admin top info cards: centered, consistent desktop/mobile, online card full text on mobile */
.admin-top-cards,
.admin-stats-row,
.admin-summary-grid,
.admin-kpi-grid,
.admin-dashboard-cards {
    align-items: stretch !important;
}

.admin-top-card,
.admin-stat-card,
.admin-kpi-card,
.admin-summary-card,
.admin-card-mini,
.admin-metric-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 4px !important;
    padding: 14px 16px !important;
    min-height: 86px !important;
    overflow: hidden !important;
}

.admin-top-card *,
.admin-stat-card *,
.admin-kpi-card *,
.admin-summary-card *,
.admin-card-mini *,
.admin-metric-card * {
    max-width: 100% !important;
}

.admin-top-card .label,
.admin-stat-card .label,
.admin-kpi-card .label,
.admin-summary-card .label,
.admin-card-mini .label,
.admin-metric-card .label {
    font-size: 13px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.admin-top-card .value,
.admin-stat-card .value,
.admin-kpi-card .value,
.admin-summary-card .value,
.admin-card-mini .value,
.admin-metric-card .value {
    font-size: 24px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
}

.admin-top-card .sub,
.admin-stat-card .sub,
.admin-kpi-card .sub,
.admin-summary-card .sub,
.admin-card-mini .sub,
.admin-metric-card .sub {
    display: block !important;
    font-size: 12px !important;
    line-height: 1.12 !important;
    white-space: normal !important;
}

@media (max-width: 700px) {
    .admin-top-cards,
    .admin-stats-row,
    .admin-summary-grid,
    .admin-kpi-grid,
    .admin-dashboard-cards {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .admin-top-card,
    .admin-stat-card,
    .admin-kpi-card,
    .admin-summary-card,
    .admin-card-mini,
    .admin-metric-card {
        min-width: 0 !important;
        min-height: 72px !important;
        padding: 10px 8px !important;
        gap: 3px !important;
    }

    .admin-top-card .label,
    .admin-stat-card .label,
    .admin-kpi-card .label,
    .admin-summary-card .label,
    .admin-card-mini .label,
    .admin-metric-card .label {
        font-size: 10px !important;
        line-height: 1.05 !important;
    }

    .admin-top-card .value,
    .admin-stat-card .value,
    .admin-kpi-card .value,
    .admin-summary-card .value,
    .admin-card-mini .value,
    .admin-metric-card .value {
        font-size: 20px !important;
        line-height: 1 !important;
    }

    .admin-top-card .sub,
    .admin-stat-card .sub,
    .admin-kpi-card .sub,
    .admin-summary-card .sub,
    .admin-card-mini .sub,
    .admin-metric-card .sub {
        display: block !important;
        font-size: 9px !important;
        line-height: 1.08 !important;
        white-space: normal !important;
    }
}

/* 2) Home mobile header title: geometric center, menu stays independent */
@media (max-width: 700px) {
    .topbar,
    .topbar.topbar-compact,
    header.topbar {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 86px !important;
        padding-left: 56px !important;
        padding-right: 56px !important;
    }

    .topbar .menu-btn,
    .topbar .hamburger,
    .topbar .sidebar-toggle,
    .topbar button[aria-label*="menu" i],
    .topbar button[data-menu-toggle="1"] {
        position: absolute !important;
        left: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 4 !important;
    }

    .topbar .page-title,
    .topbar .title-block,
    .topbar .topbar-title,
    .topbar .header-title,
    .topbar h1 {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: max-content !important;
        max-width: calc(100vw - 128px) !important;
        text-align: center !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    .topbar .version,
    .topbar .app-version,
    .topbar small {
        display: block !important;
        text-align: center !important;
        margin-top: 2px !important;
    }
}

/* 3) TO expand/collapse button: fixed coordinates, independent from list height.
   It stays visually at the bottom edge of the first compact TO card and does not follow expanded content. */
.to-card {
    position: relative !important;
    overflow: visible !important;
}

.to-card .section-head-with-units {
    position: relative !important;
    min-height: 34px !important;
}

.to-card .unit-toggle {
    position: absolute !important;
    top: -22px !important;
    right: 38px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 4 !important;
    margin: 0 !important;
}

.to-card .unit-toggle a {
    position: static !important;
    transform: none !important;
}

.to-card .expand-to-wrap {
    position: absolute !important;
    top: 458px !important;
    right: 38px !important;
    left: auto !important;
    bottom: auto !important;
    width: 64px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 6 !important;
    pointer-events: none !important;
}

.to-card .expand-to-btn {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    transform: translateX(50%) !important;
    margin: 0 !important;
    pointer-events: auto !important;
}

@media (max-width: 700px) {
    .to-card .unit-toggle {
        top: -18px !important;
        right: 38px !important;
    }

    .to-card .expand-to-wrap {
        top: 462px !important;
        right: 38px !important;
    }
}

@media (max-width: 390px) {
    .to-card .expand-to-wrap {
        top: 454px !important;
    }
}

/* 4) Change vehicle button: use user's two-way arrow icon, high contrast, thin outline. */
section.vehicle-switch .vehicle-change-large,
.change-vehicle,
.switch-vehicle,
.vehicle-change-large,
.change-vehicle-btn,
.switch-vehicle-btn {
    border: 1.5px solid rgba(74, 85, 104, .42) !important;
    background: rgba(244, 242, 255, .96) !important;
    color: #3f3f3f !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .08) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

section.vehicle-switch .vehicle-change-large svg,
.change-vehicle svg,
.switch-vehicle svg,
.vehicle-change-large svg,
.change-vehicle-btn svg,
.switch-vehicle-btn svg {
    display: none !important;
}

section.vehicle-switch .vehicle-change-large::before,
.change-vehicle::before,
.switch-vehicle::before,
.vehicle-change-large::before,
.change-vehicle-btn::before,
.switch-vehicle-btn::before {
    content: "" !important;
    display: block !important;
    width: 30px !important;
    height: 30px !important;
    background: currentColor !important;
    opacity: .92 !important;
    -webkit-mask: url("../icons/switch-vehicle-user.svg") center / contain no-repeat !important;
    mask: url("../icons/switch-vehicle-user.svg") center / contain no-repeat !important;
}

@media (max-width: 700px) {
    section.vehicle-switch .vehicle-change-large::before,
    .change-vehicle::before,
    .switch-vehicle::before,
    .vehicle-change-large::before,
    .change-vehicle-btn::before,
    .switch-vehicle-btn::before {
        width: 28px !important;
        height: 28px !important;
    }
}


/* v1.4.8.20: admin header/top-card/panel rollback and alignment fix */

/* Restore real labels on mobile. Previous CSS replaced them with short pseudo-labels. */
@media (max-width: 700px) {
    #usersToggleCard > span,
    #usersToggleCard .stat-title,
    #usersToggleCard .label,
    #onlineToggleCard > span,
    #onlineToggleCard .stat-title,
    #onlineToggleCard .label {
        font-size: 10px !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #usersToggleCard > span::after,
    #usersToggleCard .stat-title::after,
    #usersToggleCard .label::after,
    #onlineToggleCard > span::after,
    #onlineToggleCard .stat-title::after,
    #onlineToggleCard .label::after {
        content: none !important;
        display: none !important;
    }

    #onlineToggleCard strong,
    #onlineToggleCard .value {
        display: block !important;
        font-size: 18px !important;
        line-height: 1 !important;
        margin: 2px 0 !important;
    }

    #onlineToggleCard small,
    #onlineToggleCard .sub {
        display: block !important;
        font-size: 9px !important;
        line-height: 1.08 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* Top cards: keep text vertically centered inside cards, without changing desktop proportions. */
.admin-top-stats > .card,
.admin-stats.compact-stats > .card,
.stats-grid.admin-top-stats > .card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 3px !important;
    overflow: hidden !important;
}

.admin-top-stats > .card > span,
.admin-top-stats > .card > strong,
.admin-top-stats > .card > small,
.admin-stats.compact-stats > .card > span,
.admin-stats.compact-stats > .card > strong,
.admin-stats.compact-stats > .card > small {
    max-width: 100% !important;
}

@media (max-width: 700px) {
    .admin-top-stats,
    .stats-grid.admin-top-stats,
    .admin-stats.compact-stats {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        align-items: stretch !important;
    }

    .admin-top-stats > .card,
    .stats-grid.admin-top-stats > .card,
    .admin-stats.compact-stats > .card {
        min-width: 0 !important;
        min-height: 70px !important;
        padding: 9px 8px !important;
        border-radius: 14px !important;
    }

    .admin-top-stats > .card > strong,
    .admin-stats.compact-stats > .card > strong {
        font-size: 19px !important;
        line-height: 1 !important;
    }

    .size-stat-card small {
        font-size: 9px !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
    }
}

/* Restore old white/solid opened panels for users and online blocks. */
.admin-expand-panel,
.admin-users-panel,
.online-details-card,
#usersPanel,
#onlineDetailsCard {
    background: var(--card, #ffffff) !important;
    background-color: var(--card, #ffffff) !important;
    border: 1px solid var(--border, #d8deea) !important;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.admin-expand-panel::before,
.admin-users-panel::before,
.online-details-card::before,
#usersPanel::before,
#onlineDetailsCard::before {
    background: var(--card, #ffffff) !important;
}

.admin-details-pointer,
.users-pointer,
.online-pointer {
    background: var(--card, #ffffff) !important;
    border-color: var(--border, #d8deea) !important;
}

.admin-user-compact-row,
.online-group,
.online-device-card,
.inline-user-sessions-card,
.user-session-card {
    background-color: transparent !important;
}

.admin-user-compact-row .inline-user-sessions-card,
.inline-user-sessions-card,
.user-session-card,
.online-device-card {
    background: rgba(245, 247, 252, .86) !important;
    border: 1px solid var(--border, #d8deea) !important;
}

/* Header/title: fix overlap between page title and version on mobile.
   Only the title block is absolutely centered; inner h1/version remain normal flow. */
@media (max-width: 700px) {
    .topbar,
    .topbar.topbar-compact,
    header.topbar {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 86px !important;
        padding-left: 56px !important;
        padding-right: 56px !important;
    }

    .topbar .menu-btn,
    .topbar .hamburger,
    .topbar .sidebar-toggle,
    .topbar button[aria-label*="menu" i],
    .topbar button[data-menu-toggle="1"] {
        position: absolute !important;
        left: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 5 !important;
    }

    .topbar .page-title-block,
    .topbar .title-block,
    .topbar .topbar-title,
    .topbar .header-title {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        width: max-content !important;
        max-width: calc(100vw - 128px) !important;
        text-align: center !important;
        margin: 0 !important;
        z-index: 2 !important;
    }

    .topbar .page-title-block h1,
    .topbar .title-block h1,
    .topbar .topbar-title h1,
    .topbar .header-title h1,
    .topbar h1 {
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        text-align: center !important;
        white-space: nowrap !important;
        line-height: 1.05 !important;
    }

    .topbar .app-version,
    .topbar .version,
    .topbar small {
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        display: block !important;
        margin: 0 !important;
        text-align: center !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .topbar .round-btn {
        position: absolute !important;
        right: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 5 !important;
    }
}


/* v1.4.8.21: TO expand/collapse button back to nearest-TO card boundary */
/* Previous fixed top positioning could visually move the button into the next block.
   Keep the button attached to the bottom border of the nearest maintenance card. */
.to-card {
    position: relative !important;
    overflow: visible !important;
}

.to-card .expand-to-wrap {
    position: absolute !important;
    top: auto !important;
    left: auto !important;
    right: 38px !important;
    bottom: -24px !important;
    width: 64px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 8 !important;
    pointer-events: none !important;
}

.to-card .expand-to-btn {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    transform: translateX(50%) !important;
    margin: 0 !important;
    pointer-events: auto !important;
}

@media (max-width: 700px) {
    .to-card .expand-to-wrap {
        top: auto !important;
        right: 38px !important;
        bottom: -24px !important;
    }
}

@media (max-width: 390px) {
    .to-card .expand-to-wrap {
        top: auto !important;
        bottom: -23px !important;
    }
}


/* v1.4.8.22: email diagnostics block */
.admin-email-card {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
}

.email-admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 12px;
    margin-top: 8px;
}

.email-admin-box {
    border: 1px solid var(--border);
    background: rgba(245, 247, 252, .72);
    border-radius: 14px;
    padding: 12px;
}

.email-admin-box h3,
.email-log-mini h3 {
    margin: 0 0 8px;
    font-size: 15px;
}

.email-admin-box p {
    margin: 4px 0;
}

.inline-form,
.email-template-form {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.pending-email-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-top: 1px solid var(--border);
}

.pending-email-row:first-of-type {
    border-top: none;
}

.pending-email-row span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.pending-email-row strong,
.pending-email-row small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.email-template-details {
    margin-top: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px 12px;
    background: rgba(245, 247, 252, .5);
}

.email-template-details summary {
    cursor: pointer;
    font-weight: 700;
}

.email-template-form textarea {
    width: 100%;
    resize: vertical;
}

.email-log-mini {
    margin-top: 12px;
}

.email-log-row {
    display: grid;
    grid-template-columns: 150px 200px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 8px 0;
    border-top: 1px solid var(--border);
}

.email-log-row.sent strong {
    color: #149447;
}

.email-log-row.failed strong {
    color: #d64545;
}

.email-log-row small {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 700px) {
    .email-admin-grid,
    .email-log-row,
    .pending-email-row {
        grid-template-columns: 1fr;
    }

    .email-log-row {
        gap: 2px;
    }
}


/* v1.4.8.23: manual admin user activation */
.admin-user-status-form {
    margin-top: 8px;
    max-width: 220px;
}

.admin-user-status-form label {
    display: grid;
    gap: 4px;
    font-size: 12px;
    color: var(--muted);
}

.admin-user-status-form select {
    min-height: 36px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, .74);
    color: var(--text);
    padding: 6px 10px;
    font-size: 14px;
}

.status-pill.danger {
    background: rgba(231, 76, 60, .14);
    color: #c0392b;
}

@media (max-width: 700px) {
    .admin-user-status-form {
        max-width: 180px;
    }

    .admin-user-status-form label {
        font-size: 11px;
    }

    .admin-user-status-form select {
        min-height: 32px;
        font-size: 13px;
        padding: 4px 8px;
    }
}


/* v1.5.0: Dbalnyk System Theme baseline
   Minimal system theme. No new decorative animations.
   Purpose: centralize typography, spacing, forms, cards and buttons. */

:root {
    --db-theme-name: "Dbalnyk System";

    --db-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --db-font-size: 13px;
    --db-font-size-small: 11px;
    --db-font-size-title: 20px;
    --db-line-height: 1.35;

    --db-space-1: 4px;
    --db-space-2: 8px;
    --db-space-3: 12px;
    --db-space-4: 16px;

    --db-radius-sm: 8px;
    --db-radius-md: 12px;
    --db-radius-lg: 14px;

    --db-card-padding: 12px;
    --db-btn-height: 34px;
    --db-input-height: 34px;

    --db-color-bg: #f5f6fb;
    --db-color-card: #ffffff;
    --db-color-text: #1f2937;
    --db-color-muted: #6b7280;
    --db-color-border: #d8deea;
    --db-color-primary: #3f4f7f;
    --db-color-danger: #c0392b;
    --db-color-success: #149447;
    --db-shadow-card: none;
}

/* Global theme baseline */
html,
body {
    font-family: var(--db-font-family) !important;
    font-size: var(--db-font-size) !important;
    line-height: var(--db-line-height) !important;
}

body {
    background: var(--db-color-bg) !important;
    color: var(--db-color-text) !important;
}

/* Disable accidental decorative animations/transitions in the system theme. */
*,
*::before,
*::after {
    animation: none !important;
    transition: none !important;
}

/* Cards */
.card,
.auth-card,
.compact-card,
.admin-content-card,
.admin-users-panel,
.online-details-card,
.admin-tech-stats {
    background: var(--db-color-card) !important;
    border: 1px solid var(--db-color-border) !important;
    border-radius: var(--db-radius-lg) !important;
    padding: var(--db-card-padding) !important;
    box-shadow: var(--db-shadow-card) !important;
}

/* Typography */
h1 {
    font-size: 22px !important;
    line-height: 1.15 !important;
}

h2,
.section-head h2 {
    font-size: var(--db-font-size-title) !important;
    line-height: 1.15 !important;
}

h3,
.section-head h3 {
    font-size: 15px !important;
    line-height: 1.2 !important;
}

p,
span,
small,
label,
input,
select,
textarea,
button,
.btn {
    font-size: var(--db-font-size) !important;
}

small,
.muted,
.card small,
.status-pill {
    font-size: var(--db-font-size-small) !important;
}

/* Buttons */
.btn,
button,
.round-btn,
.menu-btn,
.admin-download-icon-btn {
    min-height: var(--db-btn-height) !important;
    border-radius: var(--db-radius-md) !important;
    font-family: var(--db-font-family) !important;
}

/* Forms */
input,
select,
textarea {
    min-height: var(--db-input-height) !important;
    border-radius: var(--db-radius-md) !important;
    border: 1px solid var(--db-color-border) !important;
    font-family: var(--db-font-family) !important;
}

/* Tables/lists/rows */
.audit-log-row,
.connection-log-row,
.admin-user-compact-row,
.session-row,
.tech-stat-row,
.list-row,
.table-row {
    border-color: var(--db-color-border) !important;
}

/* Admin theme card */
.admin-theme-card {
    margin-top: var(--db-space-3) !important;
    margin-bottom: var(--db-space-3) !important;
}

.theme-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--db-space-2);
    margin-top: var(--db-space-2);
}

.theme-info-item {
    border: 1px solid var(--db-color-border);
    border-radius: var(--db-radius-md);
    padding: var(--db-space-2);
    background: var(--db-color-card);
}

.theme-info-item strong,
.theme-info-item span {
    display: block;
}

.theme-info-item strong {
    font-size: var(--db-font-size-small) !important;
    color: var(--db-color-muted);
    font-weight: 600;
}

.theme-info-item span {
    font-size: var(--db-font-size) !important;
    color: var(--db-color-text);
    margin-top: 2px;
}

@media (max-width: 700px) {
    :root {
        --db-font-size: 12px;
        --db-font-size-small: 10px;
        --db-font-size-title: 18px;
        --db-card-padding: 10px;
        --db-btn-height: 32px;
        --db-input-height: 32px;
    }

    .theme-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* v1.5.1: admin theme selector */
.theme-select-form {
    margin-top: var(--db-space-3, 12px);
    max-width: 360px;
}

.theme-select-form label {
    display: grid;
    gap: var(--db-space-1, 4px);
}

.theme-description {
    margin-top: var(--db-space-2, 8px);
}


/* v2.0.0: phpBB-style theme template block support */
.autotrack-theme-admin-card {
    padding: 14px !important;
}

.autotrack-theme-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.autotrack-theme-head h2 {
    margin: 2px 0 0;
}

.autotrack-theme-head small {
    text-transform: uppercase;
    letter-spacing: .04em;
}

.autotrack-theme-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.autotrack-theme-grid > div {
    border: 1px solid var(--db-color-border, #26364a);
    border-radius: var(--db-radius-md, 12px);
    padding: 8px;
}

.autotrack-theme-grid strong,
.autotrack-theme-grid small {
    display: block;
}

@media (max-width: 700px) {
    .autotrack-theme-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}