/* Shared Liquid Glass design system. Loaded after module-local CSS. */
:root {
    --module-page: #eaf3f9;
    --module-surface: #fff;
    --module-surface-strong: #fff;
    --module-surface-soft: #f5f9fc;
    --module-line: #c6d5e0;
    --module-line-soft: #d9e5ed;
    --module-glass-edge: #d9e5ed;
    --module-glass-highlight: #fff;
    --module-shadow: 0 4px 14px rgba(37,55,70,.07);
    --module-shadow-strong: 0 14px 32px rgba(37,55,70,.13);
    --module-tile-shadow: 0 8px 24px rgba(37,55,70,.08);
    --module-tile-shadow-hover: 0 14px 32px rgba(37,55,70,.13);
    --module-blur: blur(22px) saturate(145%);
    --module-control-neutral: #eef2f5;
    --module-control-neutral-hover: #e4ebf0;
    --module-control-border: #b8c6d1;
    --module-icon-neutral: #f1f4f6;
    --module-icon-border: #c6d2db;

    /* Keep module-local work surfaces white; glass remains on controls/navigation. */
    --page: var(--module-page);
    --header: #d7e9f6;
    --surface: var(--module-surface);
    --surface-soft: var(--module-surface-soft);
    --line: #c6d5e0;
    --line-soft: var(--module-line-soft);
    --shadow: var(--module-shadow);
    --shadow-hover: var(--module-shadow-strong);
    --tile-shadow: var(--module-shadow);
    --time-panel: #fff;
    --time-glass: #fff;
    --leave-panel: #fff;
}

html { background: var(--module-page); }
body {
    background: #eaf3f9;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
}

button,
input,
select,
textarea {
    font-family: inherit;
    letter-spacing: 0;
}

.content,
.todo-content {
    width: min(1480px, calc(100% - 48px));
    padding-top: 26px;
}

.workspace-head,
.hero {
    min-height: 104px;
    align-items: center;
    margin: 2px 0 18px;
    padding: 20px 22px;
    border: 1px solid var(--module-line-soft);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--module-shadow);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.workspace-head h1,
.hero h1 {
    margin-top: 4px;
    color: #172b3b;
    font-size: 30px;
    line-height: 1.12;
    font-weight: 750;
    letter-spacing: 0;
}

.workspace-note,
.hero p {
    color: var(--muted);
    line-height: 1.55;
}

.button,
.button.secondary,
.button.ghost,
.mini-button,
.quick-filter,
.modal-close {
    border-radius: 11px;
    min-height: 38px;
    box-shadow: none;
}

.button {
    border-color: rgba(6,91,186,.5);
    background: linear-gradient(145deg, rgba(24,126,226,.96), rgba(7,92,191,.96));
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 20px rgba(10,110,209,.16);
}

.button:hover {
    border-color: #075aab;
    background: linear-gradient(180deg, #0f6fcf, #075aab);
    box-shadow: 0 10px 22px rgba(10,110,209,.18);
}

.button.ghost,
.button.secondary,
.mini-button,
.quick-filter {
    border-color: var(--module-control-border);
    background: linear-gradient(180deg, #f5f7f9, var(--module-control-neutral));
    color: #253746;
    box-shadow: inset 0 1px 0 #fff, 0 2px 5px rgba(35,61,91,.055);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.button.ghost:hover,
.button.secondary:hover,
.mini-button:hover,
.quick-filter:hover,
.quick-filter.active {
    border-color: #8faabd;
    background: var(--module-control-neutral-hover);
    color: var(--accent-dark);
}

.modal-close {
    border: 1px solid var(--module-control-border);
    background: var(--module-control-neutral);
    color: #40576a;
}

.modal-close:hover {
    border-color: #8faabd;
    background: var(--module-control-neutral-hover);
    color: var(--accent-dark);
}

.button.danger {
    border-color: #b95249;
    background: linear-gradient(180deg, #c86f67, #a94036);
    color: #fff;
}

.button.danger:hover {
    border-color: #8d2f27;
    background: linear-gradient(180deg, #b85d55, #8d2f27);
}

.button.ghost.danger,
.button.secondary.danger,
.mini-button.danger {
    border-color: #d7a29d;
    background: #fff8f7;
    color: var(--danger);
}

.button.ghost.danger:hover,
.button.secondary.danger:hover,
.mini-button.danger:hover {
    border-color: var(--danger);
    background: #faecea;
    color: var(--danger);
}

input,
select,
textarea,
.search-input {
    border-color: rgba(119,154,185,.34);
    border-radius: 11px;
    background: #fff;
    box-shadow: inset 0 1px 0 #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

input:focus,
select:focus,
textarea:focus,
.search-input:focus {
    border-color: #69a9dc;
    box-shadow: 0 0 0 3px rgba(10,110,209,.12);
}

.card,
.panel,
.trend-card,
.month-highlight,
.preview-card,
.ticket-list-panel,
.ticket-detail,
.invoice-card,
.invoice-pivot-grid .card,
.time-layout .card,
.leave-layout .card,
.leave-form-card,
.qr-section,
.settings-card,
.login-card,
.portal-tile,
.module-card,
.stat-card,
.mail-metric,
.user-card,
.dashboard-chart-card,
.dashboard-scroll-card,
.customer-summary-card,
.customer-balance-card,
.expense-summary-card,
.invoice-editor-overview-card,
.invoice-editor-customer-card,
.customer-list-card,
.custom-design-card,
.invoice-activity-card,
.invoice-documents-card,
.archive-card {
    border-color: var(--module-line-soft);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--module-shadow);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.card-head,
.panel-head,
.ticket-list-head,
.ticket-detail-head,
.highlight-title,
.modal-head {
    border-bottom-color: var(--module-line-soft);
    background: #f7fafc;
}

.card-head h2,
.card-head h3,
.panel-head h2,
.panel-head h3,
.ticket-list-head h2,
.ticket-detail-head h2,
.highlight-title strong {
    color: #172b3b;
    font-weight: 750;
    letter-spacing: 0;
}

.time-nav,
.ticket-nav,
.invoice-nav,
.qr-nav,
.module-tabs {
    display: inline-flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
    gap: 5px;
    margin-bottom: 16px;
    padding: 5px;
    border: 1px solid rgba(255,255,255,.86);
    border-radius: 999px;
    background: linear-gradient(145deg, rgba(255,255,255,.54), rgba(241,247,255,.38));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 10px 26px rgba(35,61,91,.08), 0 0 0 1px rgba(119,154,185,.14);
    -webkit-backdrop-filter: blur(20px) saturate(145%);
    backdrop-filter: blur(20px) saturate(145%);
    overflow-x: auto;
    scrollbar-width: none;
}

.time-nav::-webkit-scrollbar,
.ticket-nav::-webkit-scrollbar,
.invoice-nav::-webkit-scrollbar,
.qr-nav::-webkit-scrollbar,
.module-tabs::-webkit-scrollbar {
    display: none;
}

.nav-pill,
.module-tab {
    position: relative;
    flex: 0 0 auto;
    min-height: 34px;
    border-radius: 999px;
    padding: 0 14px;
    letter-spacing: 0;
    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.nav-pill:hover,
.module-tab:hover {
    border-color: rgba(255,255,255,.9);
    background: rgba(255,255,255,.72);
    color: var(--accent-dark);
    transform: translateY(-1px);
}

.nav-pill.active,
.module-tab.active {
    border-color: rgba(255,255,255,.96);
    background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(238,246,255,.76));
    color: var(--accent-dark);
    box-shadow: 0 7px 18px rgba(35,61,91,.12), inset 0 1px 0 #fff, 0 0 0 1px rgba(119,154,185,.14);
    transform: translateY(-1px);
}

.nav-pill:focus-visible,
.module-tab:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(10,110,209,.12);
}

.tabs,
.driver-tabs,
.leave-tabs,
.withdrawal-tabs {
    gap: 12px;
}

.tab,
.driver-tab,
.leave-tab,
.withdrawal-tab {
    border-color: var(--module-glass-edge);
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(255,255,255,.7), rgba(248,252,255,.46));
    box-shadow: var(--module-shadow);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    backdrop-filter: blur(18px) saturate(135%);
}

.tab:hover,
.driver-tab:hover,
.leave-tab:hover,
.withdrawal-tab:hover {
    border-color: #9bc4e2;
    box-shadow: var(--module-shadow-strong);
}

.time-metric,
.invoice-metric,
.leave-metric,
.todo-metric,
.driver-metric,
.withdrawal-metric,
.rental-metric,
.metric,
.mail-metric,
.archive-metrics article,
.archive-status-metrics article,
.module-metric,
.qr-dashboard > article.module-metric,
.revenue-card,
.team-card,
.person-card,
.approval-card,
.invoice-company-card,
.option-card {
    border-color: var(--module-line-soft);
    border-radius: 15px;
    background: #fff;
    box-shadow: var(--module-tile-shadow);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.time-metric:hover,
.invoice-metric:hover,
.leave-metric:hover,
.todo-metric:hover,
.driver-metric:hover,
.withdrawal-metric:hover,
.rental-metric:hover,
.metric:hover,
.mail-metric:hover,
.archive-metrics article:hover,
.archive-status-metrics article:hover,
.module-metric:hover,
.qr-dashboard > article.module-metric:hover,
.revenue-card:hover,
.team-card:hover,
.person-card:hover,
.approval-card:hover,
.invoice-company-card:hover,
.option-card:hover {
    border-color: #9bc4e2;
    box-shadow: var(--module-tile-shadow-hover);
}

.time-metric strong,
.invoice-metric strong,
.leave-metric strong,
.todo-metric strong,
.driver-metric strong,
.withdrawal-metric strong,
.rental-metric strong,
.archive-metrics strong,
.archive-status-metrics strong,
.metric-value,
.metric strong,
.revenue-card strong {
    color: #10283a;
    font-weight: 720;
    letter-spacing: 0;
}

/* Shared semantic metric layout with module-specific iconography. */
.module-metric {
    --module-metric-tone: #176fca;
    --module-metric-tone-soft: rgba(23,111,202,.15);
    position: relative;
    min-height: 112px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px;
    grid-template-rows: auto auto auto;
    align-content: center;
    align-items: center;
    gap: 5px 14px;
    padding: 15px 16px;
    overflow: hidden;
    text-align: left;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.module-metric::before {
    content: "";
    position: absolute;
    inset: -54px -40px auto auto;
    width: 148px;
    height: 148px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--module-metric-tone-soft), transparent 68%);
    pointer-events: none;
}

.module-metric::after { content: none; }
.module-metric:hover { transform: translateY(-2px); }

.module-metric > span:first-child,
.module-metric > .metric-label {
    grid-column: 1;
    position: relative;
    z-index: 1;
    display: block;
    min-width: 0;
    margin: 0;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.25;
    font-weight: 750;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.module-metric > strong,
.module-metric > .metric-value {
    grid-column: 1;
    position: relative;
    z-index: 1;
    align-self: auto;
    display: block;
    min-width: 0;
    max-width: 100%;
    margin: 2px 0 0;
    overflow: hidden;
    color: #10283a;
    font-size: clamp(21px, 2vw, 27px);
    line-height: 1.08;
    font-weight: 760;
    letter-spacing: -.03em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.module-metric > small,
.module-metric > .metric-note {
    grid-column: 1;
    position: relative;
    z-index: 1;
    display: block;
    min-width: 0;
    margin: 1px 0 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.module-metric > .module-metric-icon {
    grid-column: 2;
    grid-row: 1 / -1;
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    margin: 0;
    border: 1px solid rgba(255,255,255,.94);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(255,255,255,.9), var(--module-metric-tone-soft));
    color: var(--module-metric-tone);
    box-shadow: inset 0 1px 0 #fff, 0 10px 24px rgba(35,61,91,.09);
}

.module-metric-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.qr-dashboard > article.module-metric > strong {
    color: #10283a;
    font-weight: 760;
    letter-spacing: -.03em;
}

.module-metric.green,
.module-metric.valid,
.module-metric.received,
.module-metric.refund,
.module-metric.closed,
.module-metric.highlighted { --module-metric-tone:#16864b; --module-metric-tone-soft:rgba(22,134,75,.15); }
.module-metric.orange,
.module-metric.amber,
.module-metric.pending,
.module-metric.question { --module-metric-tone:#a87318; --module-metric-tone-soft:rgba(168,115,24,.15); }
.module-metric.red,
.module-metric.overdue,
.module-metric.blocked,
.module-metric.rejected { --module-metric-tone:#b1443b; --module-metric-tone-soft:rgba(177,68,59,.14); }
.module-metric.gray { --module-metric-tone:#687e90; --module-metric-tone-soft:rgba(104,126,144,.14); }
.module-metric.cyan { --module-metric-tone:#078f9e; --module-metric-tone-soft:rgba(7,143,158,.15); }

@media (max-width: 760px) {
    .module-metric {
        min-height: 96px;
        grid-template-columns: minmax(0, 1fr) 48px;
        gap: 4px 10px;
        padding: 12px;
    }

    .module-metric > .module-metric-icon {
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }

    .module-metric-icon svg { width: 22px; height: 22px; }
    .module-metric > strong,
    .module-metric > .metric-value { font-size: clamp(19px, 6vw, 24px); }
    .todo-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .todo-metric { min-height: 96px; }
}

table {
    border-collapse: separate;
    border-spacing: 0;
}

th {
    background: #f5f9fc;
    color: #5b7284;
    font-weight: 750;
    letter-spacing: 0;
}

td {
    background: #fff;
}

tbody tr:hover,
tbody tr:hover td {
    background: #f7fafc;
}

.notice {
    border-radius: 8px;
}

.portal-toast-region {
    position: fixed;
    z-index: 2147483000;
    top: 72px;
    right: 18px;
    width: min(430px, calc(100vw - 28px));
    display: grid;
    gap: 10px;
    pointer-events: none;
}

.portal-toast {
    --portal-toast-accent: #16864b;
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 10px;
    min-height: 60px;
    overflow: hidden;
    padding: 12px 10px 12px 12px;
    border: 1px solid rgba(22,134,75,.34);
    border-radius: 15px;
    background: rgba(252,255,253,.96);
    color: #183b2b;
    box-shadow: 0 18px 42px rgba(35,61,91,.18);
    pointer-events: auto;
    animation: portal-toast-in .22s ease-out both;
}

.portal-toast.error {
    --portal-toast-accent: #b1443b;
    border-color: rgba(177,68,59,.38);
    background: rgba(255,251,250,.97);
    color: #71312b;
}

.portal-toast-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: color-mix(in srgb, var(--portal-toast-accent) 12%, white);
    color: var(--portal-toast-accent);
}

.portal-toast-icon svg,
.portal-toast-close svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.portal-toast-message {
    min-width: 0;
    color: inherit;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.portal-toast-close {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 9px;
    padding: 0;
    background: transparent;
    color: currentColor;
    opacity: .66;
}

.portal-toast-close:hover { background: rgba(35,61,91,.08); opacity: 1; }
.portal-toast-close svg { width: 17px; height: 17px; }

.portal-toast-progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--portal-toast-accent);
    transform-origin: left;
    animation: portal-toast-progress 5s linear both;
}

.portal-toast.is-leaving {
    pointer-events: none;
    animation: portal-toast-out .18s ease-in both;
}

@keyframes portal-toast-in {
    from { opacity: 0; transform: translate3d(18px, -8px, 0) scale(.97); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes portal-toast-out {
    from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    to { opacity: 0; transform: translate3d(18px, -5px, 0) scale(.97); }
}

@keyframes portal-toast-progress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

.dialog,
.modal-panel,
.drawer,
.review-dialog,
.archive-dialog,
.invoice-dialog {
    border-color: var(--module-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 22px 56px rgba(37,55,70,.24);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.dialog-backdrop,
.modal-backdrop,
.drawer-backdrop {
    background: rgba(32,52,67,.42);
    -webkit-backdrop-filter: blur(5px) saturate(110%);
    backdrop-filter: blur(4px);
}

/*
 * Portal-wide overlay layer: backdrops and their panels deliberately share the
 * same high stacking level. Their DOM order then keeps nested dialogs (for
 * example a confirmation opened from a task dialog) above the parent dialog,
 * while every overlay remains above sticky module headers and navigation.
 */
.dialog-backdrop,
.dialog,
.modal-backdrop,
.modal-panel,
.drawer-backdrop,
.drawer {
    z-index: 2147482000;
}

.ticket-message,
.ticket-row,
.todo-card,
.todo-column,
.todo-done-group,
.active-job,
.import-item,
.rule-item,
.case-link-box,
.event-list article,
.attachment,
.company-signal,
.vehicle-requirement,
.legal-note,
.case-declaration {
    border-radius: 10px;
}

.module-footer {
    border-top-color: rgba(198,213,224,.72);
}

/* Portal overview: the same material language as the modules it opens. */
.login-card {
    border-radius: 20px;
}

.portal-tile,
.module-card {
    border-radius: 18px;
}

.portal-tile:hover,
.module-card:hover,
.user-card:hover,
.mail-metric:hover {
    border-color: #9bc4e2;
    box-shadow: var(--module-shadow-strong);
}

.portal-tile:after {
    border-color: var(--module-line-soft);
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
}

.tile-icon,
.module-icon,
.metric-icon,
.user-avatar {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 22px rgba(35,61,91,.11);
}

.portal-footer,
.module-footer {
    border-top-color: rgba(99,137,168,.34);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.48);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    :root {
        --module-surface: rgba(255,255,255,.94);
        --module-surface-strong: #fff;
        --module-surface-soft: rgba(248,252,255,.94);
    }

    .topbar,
    .workspace-head,
    .hero,
    .card,
    .panel,
    .login-card,
    .portal-tile,
    .module-card {
        background-color: rgba(250,252,255,.96);
    }
}

@media (prefers-contrast: more) {
    :root {
        --module-line: rgba(74,111,143,.58);
        --module-line-soft: rgba(95,130,159,.42);
    }

    .card,
    .panel,
    .login-card,
    .portal-tile,
    .module-card,
    input,
    select,
    textarea {
        background: rgba(255,255,255,.92);
        border-color: var(--module-line);
    }
}

@media (prefers-reduced-transparency: reduce) {
    :root {
        --module-surface: #fff;
        --module-surface-strong: #fff;
        --module-surface-soft: #f7fbfe;
    }

    .topbar,
    .workspace-head,
    .hero,
    .card,
    .panel,
    .login-card,
    .portal-tile,
    .module-card,
    .time-nav,
    .ticket-nav,
    .invoice-nav,
    .qr-nav,
    .module-tabs {
        background: #f9fcff;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@media (max-width: 760px) {
    :root {
        --module-blur: blur(14px) saturate(130%);
    }

    body {
        background-attachment: scroll;
    }

    .content,
    .todo-content {
        width: min(100% - 20px, 1480px);
        padding-top: 16px;
    }

    .workspace-head,
    .hero {
        min-height: 0;
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        padding: 16px;
    }

    .workspace-head h1,
    .hero h1 {
        font-size: 24px;
    }

    .time-nav,
    .ticket-nav,
    .invoice-nav,
    .qr-nav,
    .module-tabs {
        width: 100%;
        border-radius: 999px;
    }

    .nav-pill,
    .module-tab {
        flex: 1 1 auto;
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tab:hover,
    .driver-tab:hover,
    .leave-tab:hover,
    .withdrawal-tab:hover,
    .time-metric:hover,
    .invoice-metric:hover,
    .leave-metric:hover,
    .todo-metric:hover,
    .driver-metric:hover,
    .withdrawal-metric:hover,
    .metric:hover,
    .revenue-card:hover,
    .team-card:hover,
    .person-card:hover,
    .approval-card:hover,
    .invoice-company-card:hover,
    .option-card:hover {
        transform: none;
    }
}

/* Keep inactive navigation, filter and choice controls visibly separated on light glass. */
:is(
    .invoice-nav-link,
    .project-task-archive-toggle,
    .status-summary-item,
    .content-type-option,
    .form-option,
    .corner-option,
    .option-card,
    .custom-design-card
):not(.active):not(.selected):not([aria-current="page"]):not([aria-selected="true"]):not([aria-pressed="true"]) {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: rgba(24,43,58,.28) !important;
}

:is(
    .customer-detail-tabs,
    .settings-nav,
    .company-settings-tabs,
    .email-template-tabs,
    .email-template-subtabs,
    .account-tabs,
    .localization-tabs,
    .invoice-editor-tabs,
    .kosovo-tax-tabs,
    .germany-tax-tabs,
    .number-tabs,
    .design-tabs
) button:not(.active):not(.selected):not([aria-current="page"]):not([aria-selected="true"]):not([aria-pressed="true"]) {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: rgba(24,43,58,.28) !important;
}

:is(
    .invoice-nav-link,
    .project-task-archive-toggle,
    .status-summary-item,
    .content-type-option,
    .form-option,
    .corner-option,
    .option-card,
    .custom-design-card
):not(.active):not(.selected):hover {
    border-color: rgba(24,43,58,.46) !important;
}

:is(
    .customer-detail-tabs,
    .settings-nav,
    .company-settings-tabs,
    .email-template-tabs,
    .email-template-subtabs,
    .account-tabs,
    .localization-tabs,
    .invoice-editor-tabs,
    .kosovo-tax-tabs,
    .germany-tax-tabs,
    .number-tabs,
    .design-tabs
) button:not(.active):not(.selected):hover {
    border-color: rgba(24,43,58,.46) !important;
}

@media (max-width: 760px) {
    .portal-toast-region {
        top: 66px;
        right: 10px;
        left: 10px;
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .portal-toast,
    .portal-toast.is-leaving,
    .portal-toast-progress {
        animation: none;
    }
}

/* Keep semantic icon colors, but remove tinted metric-icon surfaces and halos. */
.module-metric:not(.invoice-metric)::before,
.rental-metric::before {
    background: none;
}

.module-metric:not(.invoice-metric) > .module-metric-icon,
.rental-metric > .rental-metric-visual,
.mail-metric > .metric-icon {
    border-color: var(--module-icon-border);
    background: var(--module-icon-neutral);
    box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(35,61,91,.06);
}

:is(.tile-icon, .module-icon, .metric-icon, .module-metric-icon, .rental-metric-visual) {
    border: 1px solid var(--module-icon-border);
}

:is(.rental-icon-button, .icon-button, .dashboard-settings-button) {
    border-color: var(--module-control-border);
    background: var(--module-control-neutral);
}

:is(.rental-icon-button, .icon-button, .dashboard-settings-button):hover {
    border-color: #8faabd;
    background: var(--module-control-neutral-hover);
}

/* One clear tab-bar language for every module except the invoice manager. */
:is(
    .time-nav,
    .ticket-nav,
    .qr-nav,
    .module-tabs,
    .rental-tabs,
    .todo-segments,
    .todo-project-filter,
    .archive-nav,
    .archive-language,
    .leave-tabs,
    .withdrawal-main-nav,
    .withdrawal-status-nav,
    .section-nav,
    .proof-tabs,
    .status-filters,
    .quick-filters,
    .product-mode-switch,
    .tabs,
    .driver-tabs
) {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    max-width: 100% !important;
    min-height: 48px;
    gap: 4px !important;
    margin-bottom: 16px;
    padding: 5px !important;
    overflow-x: auto;
    border: 1px solid rgba(116,148,172,.34) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.82) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    scrollbar-width: none;
}

:is(
    .time-nav,
    .ticket-nav,
    .qr-nav,
    .module-tabs,
    .rental-tabs,
    .todo-segments,
    .todo-project-filter,
    .archive-nav,
    .archive-language,
    .leave-tabs,
    .withdrawal-main-nav,
    .withdrawal-status-nav,
    .section-nav,
    .proof-tabs,
    .status-filters,
    .quick-filters,
    .product-mode-switch,
    .tabs,
    .driver-tabs
)::-webkit-scrollbar {
    display: none;
}

:is(
    .nav-pill,
    .module-tab,
    .rental-tabs > button,
    .todo-segments > button,
    .todo-project-filter > button,
    .archive-nav > .archive-pill,
    .archive-language > .archive-pill,
    .leave-tabs > .leave-tab,
    .proof-tabs > .mini-button,
    .status-filters > .quick-filter,
    .quick-filters > .quick-filter,
    .product-mode-switch > .product-mode-button,
    .tabs > .tab,
    .driver-tabs > .driver-tab
) {
    position: relative;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: auto !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 0 15px !important;
    overflow: visible !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #586f81 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    font-weight: 750 !important;
    line-height: 1.2;
    text-align: center !important;
    white-space: nowrap;
    transform: none !important;
}

:is(
    .nav-pill,
    .module-tab,
    .rental-tabs > button,
    .todo-segments > button,
    .todo-project-filter > button,
    .archive-nav > .archive-pill,
    .archive-language > .archive-pill,
    .leave-tabs > .leave-tab,
    .proof-tabs > .mini-button,
    .status-filters > .quick-filter,
    .quick-filters > .quick-filter,
    .product-mode-switch > .product-mode-button,
    .tabs > .tab,
    .driver-tabs > .driver-tab
):not(.active):hover {
    border-color: rgba(111,153,187,.35) !important;
    background: #fff !important;
    color: var(--accent-dark, #075aab) !important;
}

:is(
    .nav-pill,
    .module-tab,
    .rental-tabs > button,
    .todo-segments > button,
    .todo-project-filter > button,
    .archive-nav > .archive-pill,
    .archive-language > .archive-pill,
    .leave-tabs > .leave-tab,
    .proof-tabs > .mini-button,
    .status-filters > .quick-filter,
    .quick-filters > .quick-filter,
    .product-mode-switch > .product-mode-button,
    .tabs > .tab,
    .driver-tabs > .driver-tab
).active {
    border-color: #1768b8 !important;
    background: linear-gradient(180deg, #347fd1, #2169ba) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(15,91,169,.2) !important;
}

:is(
    .nav-pill,
    .module-tab,
    .rental-tabs > button,
    .todo-segments > button,
    .todo-project-filter > button,
    .archive-pill,
    .leave-tab,
    .mini-button,
    .quick-filter,
    .product-mode-button,
    .tab,
    .driver-tab
):focus-visible {
    outline: 2px solid rgba(10,110,209,.32) !important;
    outline-offset: 2px;
}

.tabs > .tab > strong,
.tabs > .tab > small,
.driver-tabs > .driver-tab > strong,
.driver-tabs > .driver-tab > small {
    display: none !important;
}

.tabs > .tab::before,
.driver-tabs > .driver-tab::before,
.driver-tabs > .driver-tab::after {
    content: none !important;
}

.tabs > .tab > span,
.driver-tabs > .driver-tab .driver-label {
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-size: 12px;
}

.driver-tabs > .driver-tab.active .driver-icon {
    color: #fff !important;
}

:is(
    .nav-pill.active > .nav-count,
    .nav-pill.active > strong,
    .module-tab.active > span,
    .leave-tab.active > span,
    .todo-project-filter > button.active > span
) {
    background: rgba(255,255,255,.18) !important;
    color: #fff !important;
}

.proof-tabs,
.status-filters,
.quick-filters,
.product-mode-switch,
.archive-language {
    min-height: 42px;
    margin-bottom: 0;
    padding: 3px !important;
}

.proof-tabs {
    width: calc(100% - 32px) !important;
    margin: 0 16px 12px;
}

@media (max-width: 760px) {
    .module-nav,
    .reviews-content > .module-tabs {
        display: none !important;
    }

    :is(
        .time-nav,
        .ticket-nav,
        .qr-nav,
        .module-tabs,
        .rental-tabs,
        .todo-segments,
        .todo-project-filter,
        .archive-nav,
        .leave-tabs,
        .withdrawal-main-nav,
        .withdrawal-status-nav,
        .section-nav,
        .tabs,
        .driver-tabs
    ) {
        width: 100% !important;
    }

    :is(.rental-tabs, .todo-segments) > button {
        flex: 1 1 0 !important;
    }

    :is(.status-filters, .product-mode-switch) {
        width: 100% !important;
    }

    .product-mode-switch > .product-mode-button {
        flex: 1 1 0 !important;
    }
}

/* Shared portal header for the portal and every module, including invoices. */
:root {
    --portal-header-height: 78px;
    --portal-header-line: rgba(105,142,170,.20);
    --portal-header-surface: #d7e9f6;
}

.invoice-shell {
    background: #eaf3f9 !important;
}

.topbar,
body .topbar.admin-mode,
.invoice-topbar {
    position: sticky !important;
    z-index: 50;
    top: 0;
    min-height: var(--portal-header-height) !important;
    border: 0 !important;
    border-top: 1px solid rgba(255,255,255,.58) !important;
    border-bottom: 1px solid var(--portal-header-line) !important;
    background: var(--portal-header-surface) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: blur(18px) saturate(110%) !important;
    backdrop-filter: blur(18px) saturate(110%) !important;
}

.topbar,
body .topbar.admin-mode {
    gap: 14px;
    padding: 8px max(18px, calc((100vw - 1400px) / 2)) !important;
}

.topbar:not(.with-admin-controls) {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.invoice-topbar {
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 22px !important;
}

.topbar > .brand {
    min-width: 0;
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.topbar .brand :is(.portal-mark, .brand-mark) {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px;
    margin: 0 !important;
    background-size: 94% auto;
    filter: none;
}

.topbar .brand > :last-child {
    min-width: 0;
}

.topbar .brand strong {
    display: block;
    overflow: hidden;
    color: #213547;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar .brand small,
.topbar .brand > :last-child > span {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: #6b7f90;
    font-size: 10.5px;
    line-height: 1.25;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar .top-actions,
.invoice-top-actions {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-height: 54px;
    padding: 5px;
    border: 1px solid rgba(255,255,255,.58);
    border-radius: 16px;
    background: rgba(255,255,255,.22);
}

.topbar .top-actions:has(> :only-child) {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.topbar .user-chip,
.invoice-user-chip {
    min-height: 42px;
    display: grid;
    align-content: center;
    gap: 1px;
    margin: 0;
    padding: 2px 11px;
    border-left: 1px solid rgba(105,142,170,.22);
    background: transparent;
}

.topbar .user-chip strong,
.invoice-user-chip strong {
    overflow: hidden;
    color: #213547;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar .user-chip small,
.invoice-user-chip small {
    overflow: hidden;
    color: #728595;
    font-size: 10px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar :is(.button, .button.ghost, .button.secondary),
.invoice-modules-button,
.invoice-menu-button,
.topbar .tenant-pill {
    min-height: 42px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 15px;
    border: 1px solid rgba(255,255,255,.76) !important;
    border-radius: 11px;
    background: rgba(255,255,255,.52) !important;
    color: #294052 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    font-size: 12px;
    font-weight: 740;
    text-decoration: none;
    transform: none !important;
}

.invoice-modules-button,
.topbar .tenant-pill {
    display: inline-flex;
}

.topbar :is(.button, .button.ghost, .button.secondary):hover,
.invoice-modules-button:hover,
.invoice-menu-button:hover {
    border-color: rgba(10,110,209,.5) !important;
    background: rgba(255,255,255,.88) !important;
    color: var(--accent-dark, #075aab) !important;
    box-shadow: none !important;
    transform: none !important;
}

.topbar :is(.support-top-button, .admin-control, .superadmin-pill, .superadmin-controls select) {
    min-height: 42px;
    border-color: rgba(255,255,255,.76) !important;
    background: rgba(255,255,255,.52) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.topbar .superadmin-controls {
    min-height: 54px;
    padding: 5px 12px;
    border-right-color: rgba(105,142,170,.18);
    border-left-color: rgba(105,142,170,.18);
}

.topbar :is(.admin-control.superadmin-entry, .admin-control.vault-entry) {
    width: 42px;
    min-width: 42px;
    height: 42px;
}

.topbar :is(.support-top-button, .admin-control, .superadmin-pill):hover,
.topbar :is(.admin-control, .superadmin-pill).active {
    box-shadow: none !important;
    transform: none !important;
}

.topbar .logout-button {
    width: 46px;
    min-width: 46px;
    padding: 0 !important;
}

.topbar .logout-button svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 760px) {
    .topbar,
    body .topbar.admin-mode,
    .invoice-topbar {
        min-height: 62px !important;
        padding: 7px 10px !important;
    }

    .topbar .brand :is(.portal-mark, .brand-mark) {
        width: 38px !important;
        height: 38px !important;
        flex-basis: 38px;
    }

    .topbar .brand strong { font-size: 13px; }
    .topbar .brand small,
    .topbar .brand > :last-child > span { font-size: 9px; }

    .topbar .user-chip,
    .invoice-user-chip,
    .topbar .archive-language {
        display: none !important;
    }

    .topbar :is(.button, .button.ghost, .button.secondary),
    .invoice-modules-button,
    .invoice-menu-button {
        min-height: 36px;
        padding: 0 10px;
    }
}

/*
 * Calm workspace layer: the page keeps its fixed blue background while every
 * structural tile and working surface returns to a clear, opaque white.
 * Buttons, tab bars, status badges and preview canvases intentionally remain
 * outside this rule so their Liquid Glass interaction language stays intact.
 */
:is(
    .workspace-head,
    .hero,
    .card,
    .panel,
    .trend-card,
    .month-highlight,
    .preview-card,
    .ticket-list-panel,
    .ticket-detail,
    .invoice-card,
    .invoice-pivot-grid .card,
    .time-layout .card,
    .leave-layout .card,
    .leave-form-card,
    .qr-section,
    .settings-card,
    .login-card,
    .portal-tile,
    .module-card,
    .stat-card,
    .mail-metric,
    .user-card,
    .dashboard-chart-card,
    .dashboard-scroll-card,
    .customer-summary-card,
    .customer-balance-card,
    .expense-summary-card,
    .invoice-editor-overview-card,
    .invoice-editor-customer-card,
    .customer-list-card,
    .custom-design-card,
    .invoice-activity-card,
    .invoice-documents-card,
    .archive-card,
    .vault-card,
    .superadmin-feature,
    .admin-review-card,
    .group-card,
    .platform-panel,
    .invitation-panel,
    .api-connection-panel,
    .liquid-code-panel,
    .other-platforms-panel
) {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

:is(
    .time-metric,
    .invoice-metric,
    .leave-metric,
    .todo-metric,
    .driver-metric,
    .withdrawal-metric,
    .rental-metric,
    .metric,
    .mail-metric,
    .archive-metrics article,
    .archive-status-metrics article,
    .module-metric,
    .qr-dashboard > article.module-metric,
    .revenue-card,
    .team-card,
    .person-card,
    .approval-card,
    .invoice-company-card,
    .option-card
) {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

:is(
    .todo-column,
    .todo-card,
    .todo-done-group,
    .ticket-message,
    .ticket-row,
    .active-job,
    .import-item,
    .rule-item,
    .rental-item,
    .work-item,
    .event-list article,
    .attachment,
    .case-facts,
    .case-link-box,
    .company-signal,
    .vehicle-requirement,
    .legal-note,
    .case-declaration,
    .task-item,
    .system-status-grid article,
    .detail-grid article,
    .company-facts div,
    .mini-list div,
    .profile-summary,
    .module-option,
    .module-catalog-list article
) {
    background: #fff;
}

:is(
    .time-filters,
    .leave-filters,
    .team-hero,
    .archive-filter,
    .request-row,
    .skipped-detail-item,
    .todo-attachment,
    .mobile-entry-card,
    .mobile-more-links > button,
    .mobile-more-links > a,
    .summary-list span,
    .team-facts span
) {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.revenue-section-sales .revenue-card.highlighted,
.revenue-section-costs .revenue-card.highlighted,
.module-catalog-list article.enabled,
.module-catalog-list article.available,
.module-catalog-list article.pending,
body .card.vault-shell {
    background: #fff;
}

body .admin-page .superadmin-feature,
.approval-dashboard > .card,
.settings-dashboard .card,
.overview-dashboard .card,
.time-layout td {
    background: #fff;
}

:is(
    .card-head,
    .panel-head,
    .ticket-list-head,
    .ticket-detail-head,
    .highlight-title,
    .modal-head,
    .todo-column-head,
    .qr-section-head,
    .archive-card .card-head
) {
    background: #f7fafc;
}

body .admin-page .card-head {
    background: #f7fafc;
}