/* BESTAND: public_html/assets/app.css */
/* Native app-look & feel (phone-first) */

:root {
    color-scheme: only light;
    --bg: #f5f6f8;
    --bg-elevated: #ffffff;
    --card: #ffffff;
    --text: #0b1220;
    --muted: #667085;
    --line: rgba(16, 24, 40, 0.08);
    --line-strong: rgba(16, 24, 40, 0.14);
    --shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
    --shadow2: 0 1px 3px rgba(15, 23, 42, 0.06);
    --primary: #2b6cff;
    --primary2: #1b56f4;
    --ok: #12b76a;
    --bad: #f04438;
    --warn: #f79009;
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 15px;
    --radius: 15px;
    --radius2: 12px;
    --tap: 44px;
    --appbar-height: 64px;
    --transition: 120ms ease-out;
    --border: 1px solid var(--line);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    height: 100%;
    background: var(--bg);
    color: var(--text);
}

body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

a {
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

svg {
    max-width: 100%;
    height: auto;
}

summary {
    list-style: none;
}

summary::-webkit-details-marker {
    display: none;
}

summary::marker {
    content: "";
}

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

.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 18px 16px calc(120px + env(safe-area-inset-bottom));
}

.landing-page .container,
.landing-container {
    padding-bottom: 32px;
}

.appbar + .container {
    padding-top: 18px;
}

.appbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(245, 246, 248, 0.96);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--line);
}

.appbar-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
    display: grid;
    gap: 10px;
}

.appbar-primary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.topbar-inner {
    flex-wrap: wrap;
    align-items: flex-start;
}

.year-form {
    display: grid;
    gap: 4px;
    justify-items: start;
}

.year-select {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: var(--shadow2);
    font-size: 13px;
}

.year-label {
    font-weight: 900;
    color: var(--text);
}

.year-select select {
    min-height: 32px;
    border: 0;
    padding: 0 6px;
    font-size: 14px;
    box-shadow: none;
}

.year-helper {
    font-size: 11px;
    color: var(--muted);
}

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

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.brand--icon-only {
    gap: 0;
}

.logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    flex: 0 0 auto;
    padding: 5px;
    display: grid;
    place-items: center;
}

.logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brand-title {
    min-width: 0;
}

.brand-title b {
    display: block;
    font-size: 15px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-title span {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toolbar,
.top-right {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    border: var(--border);
    background: #fff;
    box-shadow: var(--shadow-sm);
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
}

.chip b {
    color: var(--text);
}

.card {
    background: var(--card);
    border: var(--border);
    border-radius: var(--radius-lg);
    box-shadow: none;
    overflow: hidden;
}

.hero-shell {
    display: grid;
    grid-template-columns: 1.2fr 0.9fr;
    gap: 16px;
    align-items: start;
}

.hero-panel {
    border-radius: 22px;
    border: 1px solid rgba(15, 23, 42, 0.07);
    padding: 24px;
    box-shadow: var(--shadow);
    background: linear-gradient(145deg, #ffffff 0%, #f6f9ff 100%);
}

.hero-panel-accent {
    background:
        radial-gradient(420px 220px at 100% 0%, rgba(43, 108, 255, 0.16), transparent 72%),
        linear-gradient(145deg, #ffffff 0%, #eef4ff 100%);
}

.hero-panel h1 {
    margin: 8px 0 10px;
    font-size: clamp(28px, 5vw, 46px);
    line-height: 0.96;
    letter-spacing: -0.04em;
}

.hero-panel p {
    margin: 0;
    max-width: 62ch;
    color: var(--muted);
    font-size: 15px;
}

.hero-stack {
    display: grid;
    gap: 16px;
}

.eyebrow {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(11, 18, 32, 0.06);
    color: var(--text);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.stat-pill {
    min-width: 0;
    padding: 9px 11px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(15, 23, 42, 0.07);
    box-shadow: var(--shadow2);
}

.stat-pill b,
.stat-pill span {
    display: block;
}

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

.module-grid {
    display: grid;
    gap: 12px;
    margin-top: 22px;
}

.module-card {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 12px;
    padding: 13px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(15, 23, 42, 0.07);
}

.module-card strong,
.module-card span {
    display: block;
}

.module-card span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 13px;
}

.module-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--primary), #7ec8ff);
    color: #fff;
    font-weight: 900;
    box-shadow: var(--shadow2);
}

.module-list {
    display: grid;
    gap: 10px;
}

.module-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: #f8faff;
    font-weight: 700;
    text-decoration: none;
}

.module-link:hover {
    border-color: rgba(43, 108, 255, 0.35);
    background: #eef4ff;
}

.card-hd {
    padding: var(--sp-4) var(--sp-4) var(--sp-3);
    border-bottom: var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

@media (max-width: 920px) {
    .hero-shell {
        grid-template-columns: 1fr;
    }

    .hero-panel {
        padding: 22px;
    }
}

@media (max-width: 640px) {
    .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .appbar-inner {
        padding-left: 14px;
        padding-right: 14px;
    }

    .appbar-primary {
        align-items: flex-start;
    }

    .logo {
        width: 34px;
        height: 34px;
        border-radius: 9px;
    }

    .brand {
        gap: 10px;
        min-width: 0;
    }

    .brand-title b {
        font-size: 13px;
    }

    .brand-title span {
        font-size: 11px;
    }

    .hero-panel h1 {
        font-size: clamp(24px, 8vw, 34px);
        line-height: 1.02;
    }

    .hero-panel,
    .card-bd {
        padding: 18px;
    }

    .stat-row {
        display: grid;
    }

    .landing-page .link-row {
        justify-content: flex-start;
    }

    .hero-stack .btn,
    .hero-stack .btn2,
    .module-link {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .brand-title b {
        display: none;
    }

    .brand-title span {
        display: none;
    }
}

.card-hd b {
    font-size: 14px;
}

.card-bd {
    padding: var(--sp-4);
}

.app-hero {
    position: relative;
    overflow: hidden;
    border-color: rgba(16, 24, 40, 0.08);
    border-radius: 18px;
    background: #fff;
}

.app-hero.is-planning {
    border-color: var(--line);
    background: #fff;
}

.app-hero.is-team {
    border-color: var(--line);
    background: #fff;
}

.app-hero.is-admin {
    border-color: var(--line);
    background: #fff;
}

.app-hero.is-photo {
    border-color: var(--line);
    background: #fff;
}

.app-section,
.accent-card {
    position: relative;
    overflow: hidden;
}

.app-section::before,
.accent-card::before {
    display: none;
    content: none;
}

.app-section.is-planning::before,
.accent-card.is-planning::before,
.accent-item.is-planning::before {
    background: #2b6cff;
}

.app-section.is-team::before,
.accent-card.is-team::before,
.accent-item.is-team::before {
    background: #16a34a;
}

.app-section.is-action::before,
.accent-card.is-action::before,
.accent-item.is-action::before {
    background: #f59e0b;
}

.app-section.is-admin::before,
.accent-card.is-admin::before,
.accent-item.is-admin::before {
    background: #7c3aed;
}

.app-section.is-photo::before,
.accent-card.is-photo::before,
.accent-item.is-photo::before {
    background: #0e7490;
}

.app-section.is-danger::before,
.accent-card.is-danger::before,
.accent-item.is-danger::before {
    background: #dc2626;
}

.app-section.is-planning .card-hd,
.accent-card.is-planning {
    background: linear-gradient(115deg, rgba(239, 246, 255, 0.96), #fff 52%);
}

.app-section.is-team .card-hd,
.accent-card.is-team {
    background: linear-gradient(115deg, rgba(240, 253, 244, 0.9), #fff 52%);
}

.app-section.is-action .card-hd,
.accent-card.is-action {
    background: linear-gradient(115deg, rgba(255, 251, 235, 0.95), #fff 52%);
}

.app-section.is-admin .card-hd,
.accent-card.is-admin {
    background: linear-gradient(115deg, rgba(245, 243, 255, 0.96), #fff 52%);
}

.app-section.is-photo .card-hd,
.accent-card.is-photo {
    background: linear-gradient(115deg, rgba(236, 254, 255, 0.95), #fff 52%);
}

.accent-item {
    position: relative;
    overflow: hidden;
    border-left: 0;
}

.accent-item::before {
    display: none;
    content: none;
}

.accent-item .item-main,
.accent-item > div {
    position: relative;
}

.accent-type-vakantie,
.accent-type-vakantie .badge,
.type-chip.type-vakantie {
    border-color: rgba(43, 108, 255, 0.20);
    background-color: rgba(239, 246, 255, 0.88);
}

.accent-type-vakantie::before {
    display: none;
}

.accent-type-zakelijk,
.accent-type-zakelijk .badge,
.type-chip.type-zakelijk {
    border-color: rgba(245, 158, 11, 0.24);
    background-color: rgba(255, 251, 235, 0.92);
}

.accent-type-zakelijk::before {
    display: none;
}

.accent-type-doktersbezoek,
.accent-type-doktersbezoek .badge,
.type-chip.type-doktersbezoek {
    border-color: rgba(16, 185, 129, 0.22);
    background-color: rgba(236, 253, 245, 0.92);
}

.accent-type-doktersbezoek::before {
    display: none;
}

.accent-type-anders,
.accent-type-anders .badge,
.type-chip.type-anders {
    border-color: rgba(14, 116, 144, 0.20);
    background-color: rgba(236, 254, 255, 0.9);
}

.accent-type-anders::before {
    display: none;
}

.empty-state {
    display: grid;
    gap: 12px;
    justify-items: start;
}

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

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

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-bd.tight {
    padding: 12px;
}

.grid {
    display: grid;
    gap: 12px;
}

@media (min-width: 980px) {
    .grid.two {
        grid-template-columns: 1.05fr 0.95fr;
    }

    .grid.two-eq {
        grid-template-columns: 1fr 1fr;
    }
}

.stack {
    display: grid;
    gap: 12px;
}

.stack-sm {
    display: grid;
    gap: 8px;
}

.link-row {
    display: flex;
    justify-content: flex-end;
}

.link-muted {
    color: var(--muted);
    text-decoration: none;
    font-size: 12px;
}

.link-muted:hover {
    color: var(--text);
    text-decoration: underline;
}

.form-grid {
    display: grid;
    gap: 12px;
}

/* Compact filters + switches */
.filter-panel {
    border: var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.filter-panel summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    font-weight: 900;
    color: var(--text);
}

.filter-panel summary::-webkit-details-marker {
    display: none;
}

.filter-panel summary::marker {
    content: "";
}

.filtersSummary {
    border-radius: var(--radius-md);
    min-height: var(--tap);
    user-select: none;
}

.filter-summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.filtersSummary .icon,
.filtersSummary svg {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px;
    display: block;
}

.filter-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(43, 108, 255, 0.12);
    color: var(--primary);
    font-size: 12px;
    font-weight: 900;
}

.filter-body {
    padding: 12px;
    border-top: var(--border);
    background: rgba(248, 250, 255, 0.6);
}

.switches {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.switch {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.switch:hover {
    border-color: rgba(43, 108, 255, 0.2);
    background: #fff;
}

.form-switch {
    -webkit-appearance: none;
    appearance: none;
    width: 44px;
    height: 26px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(203, 213, 225, 0.95), rgba(186, 197, 212, 0.95));
    position: relative;
    border: 1px solid rgba(148, 163, 184, 0.45);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
    cursor: pointer;
    flex: 0 0 auto;
}

.form-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: linear-gradient(180deg, #fff, #f8fafc);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
    transition: transform var(--transition), box-shadow var(--transition);
}

.form-switch:checked {
    background: linear-gradient(180deg, rgba(76, 126, 255, 0.98), rgba(31, 111, 255, 0.98));
    border-color: rgba(43, 108, 255, 0.42);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08), 0 0 0 4px rgba(43, 108, 255, 0.08);
}

.form-switch:checked::after {
    transform: translateX(18px);
}

.form-switch:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(43, 108, 255, 0.12);
}

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

.mt-8 {
    margin-top: 8px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-12 {
    margin-top: 12px;
}

.msg {
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: var(--shadow2);
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 12px;
    position: relative;
}

.msg::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 999px;
    background: var(--line-strong);
}

.msg.ok {
    border-color: rgba(18, 183, 106, 0.35);
    background: rgba(18, 183, 106, 0.08);
    color: #067647;
}

.msg.ok::before {
    background: rgba(18, 183, 106, 0.7);
}

.msg.bad {
    border-color: rgba(240, 68, 56, 0.35);
    background: rgba(240, 68, 56, 0.06);
    color: #b42318;
}

.msg.bad::before {
    background: rgba(240, 68, 56, 0.7);
}

.msg.no-margin {
    margin: 0;
}

.toast {
    animation: toast-in var(--transition);
}

@keyframes toast-in {
    from {
        transform: translateY(-4px);
        opacity: 0.8;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

label {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 6px;
}

input,
select,
textarea {
    width: 100%;
    min-height: 44px;
    padding: 0 13px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.94);
    color: var(--text);
    font-size: 15px;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

textarea {
    padding: 11px 13px;
    min-height: 96px;
    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    color: rgba(102, 112, 133, 0.75);
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(43, 108, 255, 0.55);
    box-shadow: 0 0 0 3px rgba(43, 108, 255, 0.1);
}

input:disabled,
select:disabled,
textarea:disabled {
    background: rgba(15, 23, 42, 0.04);
    color: rgba(15, 23, 42, 0.45);
}

.row2 {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
}

.check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 7px 11px;
    border-radius: 11px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow2);
    font-weight: 600;
    color: var(--text);
}

.check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    flex: 0 0 auto;
}

.planner-mode-intro {
    display: grid;
    gap: 4px;
    margin-bottom: 2px;
}

.planner-mode-title {
    font-size: 14px;
    font-weight: 900;
    color: var(--text);
}

.planner-mode-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr 1fr;
}

.planner-mode-option {
    display: grid;
    gap: 0;
    align-content: center;
    min-height: 56px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 15px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, #fff, #fcfdff);
    box-shadow: var(--shadow2);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition), background var(--transition);
}

.planner-mode-option:hover {
    border-color: rgba(43, 108, 255, 0.35);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.planner-mode-copy {
    display: grid;
    gap: 0;
    min-width: 0;
}

.planner-mode-heading {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
}

.planner-mode-option.is-active {
    border-color: rgba(43, 108, 255, 0.45);
    background: linear-gradient(180deg, rgba(43, 108, 255, 0.04), #fff);
    box-shadow: 0 10px 20px rgba(43, 108, 255, 0.1);
}

.row3 {
    display: grid;
    gap: 10px;
    grid-template-columns: 1.2fr 0.9fr 0.9fr;
}

@media (max-width: 520px) {
    .row2,
    .row3,
    .planner-mode-grid {
        grid-template-columns: 1fr;
    }
}

.btn,
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    border: 1px solid var(--primary);
    border-radius: 10px;
    padding: 0 14px;
    font-weight: 800;
    font-size: 13px;
    text-decoration: none;
    background: var(--primary);
    color: #fff;
    box-shadow: none;
    cursor: pointer;
    transition: transform var(--transition), background var(--transition), border-color var(--transition), filter var(--transition);
    touch-action: manipulation;
}

.btn:active {
    transform: scale(0.98);
    filter: brightness(0.98);
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn2,
.btn-secondary {
    min-height: 40px;
    border-radius: 10px;
    padding: 0 13px;
    border: var(--border);
    background: #fff;
    box-shadow: none;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    touch-action: manipulation;
}

/* Chip bar (snelle tijdsselecties) */
.chipbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin: 8px 0 16px;
}

.chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    font-weight: 700;
    font-size: 12px;
    text-decoration: none;
    color: var(--text);
    box-shadow: var(--shadow2);
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.chip.active {
    background: rgba(43, 108, 255, 0.12);
    border-color: rgba(43, 108, 255, 0.35);
    color: var(--primary);
}

.btnOutline {
    min-height: 42px;
    border-radius: 12px;
    padding: 0 14px;
    border: 1px solid rgba(43, 108, 255, 0.22);
    background: #fff;
    font-weight: 700;
    font-size: 14px;
    box-shadow: var(--shadow2);
    text-decoration: none;
    color: #1247d6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.btnOutline:active {
    transform: scale(0.98);
}

.btnSmall {
    min-height: 34px;
    font-size: 12px;
    padding: 0 10px;
}

.btn2:active {
    transform: scale(0.98);
}

.btn2:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btnDanger {
    border-color: rgba(240, 68, 56, 0.3);
    background: rgba(240, 68, 56, 0.06);
    color: #b42318;
}

.btn-danger {
    border-color: rgba(240, 68, 56, 0.3);
    background: rgba(240, 68, 56, 0.06);
    color: #b42318;
}

.btn-pill {
    min-height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 13px;
}

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

.qbtn {
    min-height: 36px;
    padding: 0 11px;
    border-radius: 999px;
    border: var(--border);
    background: #fff;
    box-shadow: var(--shadow-sm);
    font-weight: 700;
    font-size: 12px;
    color: var(--text);
    cursor: pointer;
    transition: transform var(--transition), border-color var(--transition);
    touch-action: manipulation;
}

.qbtn:active {
    transform: scale(0.98);
}

.qbtn.primary {
    border-color: rgba(43, 108, 255, 0.28);
    background: rgba(43, 108, 255, 0.06);
    color: #1247d6;
}

.time-presets {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.time-presets .qbtn {
    min-width: 96px;
}

.qbtn.ok {
    border-color: rgba(18, 183, 106, 0.28);
    background: rgba(18, 183, 106, 0.06);
    color: #067647;
}

.list {
    display: grid;
    gap: 12px;
}

.item-actions {
    display: grid;
    gap: 8px;
    justify-items: end;
}

.item-main {
    min-width: 0;
}

.menu {
    position: relative;
}

.menu summary {
    list-style: none;
}

.menu summary::-webkit-details-marker {
    display: none;
}

.menu summary::marker {
    content: "";
}

.menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 20;
    width: min(240px, 80vw);
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--shadow2);
    padding: 12px;
    display: grid;
    gap: 8px;
}

.menu-title {
    font-size: 12px;
    color: var(--muted);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.menu-link {
    text-decoration: none;
    font-weight: 900;
    font-size: 13px;
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid transparent;
}

.menu-link:hover {
    border-color: var(--line);
    background: rgba(15, 23, 42, 0.04);
}

.collapse summary {
    cursor: pointer;
    list-style: none;
}

.collapse summary::-webkit-details-marker {
    display: none;
}

.collapse summary::marker {
    content: "";
}

.collapse-icon {
    font-size: 18px;
    color: var(--muted);
    transition: transform var(--transition);
}

.collapse[open] .collapse-icon {
    transform: rotate(180deg);
}

.feed-mini {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: var(--shadow2);
    flex-wrap: wrap;
}

.feed-mini-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.mini-help summary {
    cursor: pointer;
}

.mini-help summary::marker {
    content: "";
}

/* Alleen native <dialog>-vensters. Een algemene .modal-selector botst met
   Bootstrap en beperkt diens schermvullende modallaag tot de linkerbovenhoek. */
dialog.modal {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: min(640px, 96vw);
    width: 100%;
}

dialog.modal::backdrop {
    background: rgba(15, 23, 42, 0.35);
}

.modal-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: 14px;
    display: grid;
    gap: 14px;
}

.modal-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.modal-title {
    font-weight: 900;
    font-size: 16px;
}

.field-error {
    color: #b42318;
    font-size: 12px;
    margin-top: 4px;
}

.feed-list {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
}

.item,
.list-item {
    border: var(--border);
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 14px;
    display: grid;
    gap: 10px;
}

.employee-card {
    padding: 0;
}

.employee-card summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 14px;
}

.employee-card summary::-webkit-details-marker {
    display: none;
}

.employee-card summary::marker {
    content: "";
}

.employee-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.employee-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.employee-name {
    font-weight: 950;
    font-size: 15px;
}

.employee-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
}

.pill.status-active {
    color: #0b6b3a;
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.08);
}

.pill.status-inactive {
    color: #b42318;
    border-color: rgba(180, 35, 24, 0.3);
    background: rgba(180, 35, 24, 0.08);
}

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

.employee-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.actionsRow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.actionsRow form,
.actionsRow .menuWrap {
    margin: 0;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.iconBtn,
.btn-icon,
.iconbtn {
    width: 40px;
    height: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: var(--border);
    background: rgba(248, 250, 255, 0.9);
    color: var(--text);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
    text-decoration: none;
    cursor: pointer;
    padding: 0;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
    touch-action: manipulation;
    vertical-align: middle;
}

.iconBtn svg,
.btn-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

.iconBtn.warn {
    color: #b42318;
    border-color: rgba(180, 35, 24, 0.3);
    background: rgba(180, 35, 24, 0.08);
}

.iconBtn.moreBtn {
    background: #fff;
}

.iconBtn.is-loading {
    opacity: 0.65;
    cursor: wait;
}

.iconBtn:active {
    transform: scale(0.96);
}

.iconBtn[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
    box-shadow: none;
}

.btn-icon.warn {
    color: #b42318;
    border-color: rgba(180, 35, 24, 0.3);
    background: rgba(180, 35, 24, 0.08);
}

.btn-icon:active {
    transform: scale(0.96);
}

.menuWrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.menu {
    position: absolute;
    right: 0;
    top: 48px;
    z-index: 50;
    min-width: 220px;
    max-width: min(260px, 86vw);
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--shadow2);
    padding: 8px;
    display: grid;
    gap: 6px;
}

.menu[hidden] {
    display: none;
}

.menuItem {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #fff;
    text-decoration: none;
    color: var(--text);
    font-weight: 600;
    text-align: left;
    width: 100%;
    min-height: var(--tap);
}

.menuItem:hover {
    border-color: rgba(43, 108, 255, 0.3);
}

.menuItem.danger {
    color: #b42318;
    border-color: rgba(180, 35, 24, 0.3);
}

.menuItem.disabled {
    color: var(--muted);
    border-style: dashed;
    cursor: not-allowed;
    pointer-events: none;
}

.menuLinkInput {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    height: 0;
    width: 0;
}

.chevron {
    font-size: 16px;
    color: var(--muted);
    transition: transform var(--transition);
}

.employee-card[open] .chevron {
    transform: rotate(180deg);
}

.employee-body {
    padding: 0 14px 14px;
    display: grid;
    gap: 12px;
}

.employee-details {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.employee-details .meta {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.employee-body-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.action-menu,
.link-popover {
    position: relative;
}

.action-menu summary,
.link-popover summary {
    list-style: none;
}

.action-menu summary::-webkit-details-marker,
.link-popover summary::-webkit-details-marker {
    display: none;
}

.action-menu summary::marker,
.link-popover summary::marker {
    content: "";
}

.action-panel,
.link-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 12;
    width: min(320px, 86vw);
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--shadow2);
    padding: 12px;
    display: grid;
    gap: 8px;
}

.link-panel {
    width: min(360px, 90vw);
}

.link-panel input {
    height: 40px;
    font-size: 12px;
}

.action-item {
    display: block;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #fff;
    text-decoration: none;
    color: var(--text);
    font-weight: 600;
    text-align: left;
}

.action-item:hover {
    border-color: rgba(43, 108, 255, 0.3);
}

.action-item.danger {
    color: #b42318;
    border-color: rgba(180, 35, 24, 0.3);
}

.action-item.disabled {
    color: var(--muted);
    border-style: dashed;
    cursor: not-allowed;
}

.wa-status {
    font-size: 12px;
    color: var(--muted);
}

.wa-status.ok {
    color: #0b6b3a;
}

.wa-status.error {
    color: #b42318;
}

.group-hd {
    margin: 10px 4px 0;
    font-size: 12px;
    font-weight: 900;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.itemTop {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.feed-item {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--shadow2);
    padding: 10px 12px;
}

.feed-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

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

.iconbtn {
    font-size: 18px;
}

.feed-more {
    position: relative;
}

.feed-more summary {
    list-style: none;
}

.feed-more summary::-webkit-details-marker {
    display: none;
}

.feed-more summary::marker {
    content: "";
}

.feed-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 10;
    width: min(320px, 80vw);
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--shadow2);
    padding: 12px;
    display: grid;
    gap: 8px;
}

.feed-panel input {
    height: 38px;
    font-size: 12px;
}

.badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    border: var(--border);
    background: #fff;
    box-shadow: var(--shadow-sm);
    font-size: 12px;
    font-weight: 900;
    color: var(--muted);
}

.badge b {
    color: var(--text);
}

.meta {
    color: var(--muted);
    font-size: 12px;
}

.range {
    font-weight: 950;
    font-size: 15px;
    letter-spacing: 0.1px;
}

.copyrow {
    display: grid;
    gap: 8px;
}

.copyrow input {
    height: 44px;
    font-size: 13px;
}

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

.actions-col {
    display: grid;
    gap: 8px;
    justify-items: end;
}

.form-actions {
    display: grid;
    gap: 8px;
    justify-items: end;
}

.form-actions.wide {
    justify-items: stretch;
}

.form-actions.wide .btn,
.form-actions.wide .btn2,
.form-actions.wide .btnOutline {
    width: 100%;
}

@media (min-width: 720px) {
    .form-actions.wide {
        grid-auto-flow: column;
        justify-items: end;
        justify-content: end;
    }

    .form-actions.wide .btn,
    .form-actions.wide .btn2,
    .form-actions.wide .btnOutline {
        width: auto;
        min-width: 160px;
    }
}

@media (min-width: 560px) {
    .actions {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: saturate(160%) blur(14px);
    border-top: 1px solid var(--line);
}

.bottom-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 8px 14px calc(10px + env(safe-area-inset-bottom));
    display: flex;
    gap: 10px;
}

.navbtn {
    flex: 1 1 0;
    min-height: 52px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: var(--shadow2);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 950;
    font-size: 13px;
    color: var(--muted);
    transition: transform var(--transition), border-color var(--transition), background var(--transition);
    touch-action: manipulation;
}

.navbtn.active {
    color: #1247d6;
    border-color: rgba(43, 108, 255, 0.3);
    background: rgba(43, 108, 255, 0.08);
}

.navbtn:active {
    transform: scale(0.98);
}

.navbtn svg {
    width: 20px;
    height: 20px;
    opacity: 0.85;
}

.kpi {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
}

@media (min-width: 700px) {
    .kpi {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

.kpi .k {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--shadow2);
    padding: 12px;
}

.filter-caret {
    font-size: 20px;
}

@media (max-width: 600px) {
    .container {
        padding: 12px 12px calc(112px + env(safe-area-inset-bottom));
    }

    .card-hd {
        padding: 12px 12px 8px;
    }

    .card-bd,
    .card-bd.tight {
        padding: 12px;
    }

    .item {
        padding: 12px;
    }

    .employee-card summary {
        padding: 10px 12px;
    }

    .filter-body {
        padding: 10px;
    }

    .seg,
    .segmented {
        gap: 6px;
    }
}

@media (max-width: 820px) {
    .employee-summary {
        align-items: flex-start;
    }

    .employee-actions {
        align-items: flex-start;
        width: 100%;
    }

    .actionsRow {
        justify-content: flex-start;
    }

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

.k .t {
    font-size: 12px;
    color: var(--muted);
}

.k .v {
    margin-top: 6px;
    font-size: 20px;
    font-weight: 950;
    letter-spacing: 0.2px;
}

/* Segmented control (tabs) */
.seg,
.segmented {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.seg a,
.segmented a {
    min-height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: var(--shadow2);
    text-decoration: none;
    font-weight: 950;
    font-size: 13px;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform var(--transition), border-color var(--transition), background var(--transition);
    touch-action: manipulation;
}

.seg a.active,
.segmented a.active {
    color: #1247d6;
    border-color: rgba(43, 108, 255, 0.3);
    background: rgba(43, 108, 255, 0.08);
}

.seg a:active,
.segmented a:active {
    transform: scale(0.98);
}

.seg svg,
.segmented svg {
    width: 18px;
    height: 18px;
    opacity: 0.9;
}

.seg svg,
.navbtn svg,
.btn2 svg,
.btn svg,
.iconBtn svg,
.btn-icon svg,
.filtersSummary svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

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

.icon svg {
    width: 22px;
    height: 22px;
}

/* Sticky filter bar */
.stickyFilter {
    position: sticky;
    top: calc(var(--appbar-height) + env(safe-area-inset-top));
    z-index: 40;
    background: rgba(242, 243, 247, 0.9);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--line);
    padding: 10px 0;
    margin-bottom: 12px;
}

/* Weekgrid */
.weekwrap {
    position: relative;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
}

.weekwrap::before,
.weekwrap::after {
    content: "";
    position: sticky;
    top: 0;
    bottom: 0;
    width: 18px;
    pointer-events: none;
    z-index: 3;
}

.weekwrap::before {
    left: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0));
}

.weekwrap::after {
    right: 0;
    background: linear-gradient(270deg, rgba(242, 243, 247, 0.9), rgba(242, 243, 247, 0));
}

.weekgrid {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
    font-size: 12px;
    transform: translateZ(0);
}

.weekgrid th,
.weekgrid td {
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
    padding: 8px 6px;
    background: #fff;
    background-clip: padding-box;
}

.weekgrid th {
    position: sticky;
    top: 0;
    z-index: 4;
    background: #fff;
    font-weight: 900;
    text-align: center;
    padding: 10px 6px;
}

.weekgrid th .sub {
    display: block;
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
    font-weight: 700;
}

.weekgrid .namecol {
    position: sticky;
    left: 0;
    z-index: 3;
    background: #ffffff;
    min-width: 200px;
    width: 200px;
    max-width: 200px;
    text-align: left;
    border-right: 1px solid rgba(16, 24, 40, 0.12);
    box-shadow: 12px 0 22px rgba(15, 23, 42, 0.08);
}

.weekgrid thead .namecol {
    z-index: 5;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.weekgrid tbody .namecol {
    background: linear-gradient(180deg, #ffffff, #fcfcfd);
}

.name {
    font-weight: 950;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dept {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wcol {
    width: 1%;
    min-width: 72px;
    scroll-snap-align: start;
}

.weekcell {
    cursor: pointer;
}

.is-current {
    background: rgba(15, 23, 42, 0.04);
}

.fixedMark {
    height: 6px;
    width: 100%;
    border-radius: 999px;
    background: rgba(18, 183, 106, 0.18);
    border: 1px solid rgba(18, 183, 106, 0.22);
    margin-top: 6px;
}

.dots {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    justify-items: center;
}

.dot {
    width: 8px;
    height: 14px;
    border-radius: 4px;
    background: transparent;
    border: 1px solid rgba(16, 24, 40, 0.12);
}

.dot.v {
    background: rgba(43, 108, 255, 0.7);
    border-color: rgba(43, 108, 255, 0.3);
}

.dot.z {
    background: rgba(247, 144, 9, 0.78);
    border-color: rgba(247, 144, 9, 0.3);
}

.dot.d {
    background: rgba(16, 185, 129, 0.72);
    border-color: rgba(16, 185, 129, 0.3);
}

.dot.a {
    background: rgba(102, 112, 133, 0.55);
    border-color: rgba(102, 112, 133, 0.22);
}

.count {
    margin-top: 8px;
    font-size: 11px;
    color: var(--muted);
    text-align: center;
}

.weekview {
    display: flex;
    flex-direction: column;
}

.weekview.is-board .week-table,
.weekview.is-board .weeklist,
.weekview.is-board .week-swipe {
    display: none;
}

.weekview.is-board .weekboard-wrap {
    display: block;
}

.weekview.is-grid .weekboard-wrap,
.weekview.is-grid .weeklist {
    display: none;
}

.weekview.is-cards .weekwrap,
.weekview.is-cards .weekboard-wrap,
.weekview.is-cards .week-swipe {
    display: none;
}

.weekview.is-cards .weeklist {
    display: flex;
}

.weekview.is-grid .weeklist {
    display: none;
}

.weekboard-wrap {
    display: none;
    position: relative;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
}

.weekboard-grid {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
    font-size: 12px;
}

.weekboard-grid th,
.weekboard-grid td {
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
    background: #fff;
    background-clip: padding-box;
}

.weekboard-grid th {
    position: sticky;
    top: 0;
    z-index: 4;
    padding: 9px 8px;
    background: #fff;
    font-weight: 900;
    text-align: left;
}

.weekboard-grid .namecol {
    position: sticky;
    left: 0;
    z-index: 3;
    min-width: 210px;
    width: 210px;
    max-width: 210px;
    padding: 10px 12px;
    background: #fff;
    border-right: 1px solid rgba(16, 24, 40, 0.12);
    box-shadow: 12px 0 22px rgba(15, 23, 42, 0.07);
}

.weekboard-grid thead .namecol {
    z-index: 5;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.weekboard-grid tbody .namecol {
    background: linear-gradient(180deg, #ffffff, #fcfcfd);
}

.weekboard-week {
    min-width: 136px;
    width: 136px;
    vertical-align: top;
}

.weekboard-week-label,
.weekboard-week-total {
    display: block;
}

.weekboard-week-total {
    margin-top: 5px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 750;
}

.weekboard-cell {
    min-width: 136px;
    width: 136px;
    padding: 6px;
    cursor: pointer;
}

.weekboard-cell-inner {
    min-height: 48px;
    display: grid;
    align-content: center;
    gap: 6px;
    padding: 7px 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #fff;
}

.weekboard-cell.has-leave .weekboard-cell-inner {
    border-color: rgba(16, 24, 40, 0.08);
    background: #f8fafc;
}

.weekboard-cell:hover .weekboard-cell-inner,
.weekboard-cell:focus-within .weekboard-cell-inner {
    border-color: rgba(20, 89, 215, 0.26);
    box-shadow: 0 0 0 2px rgba(20, 89, 215, 0.08);
}

.weekboard-cell-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.weekboard-days {
    color: var(--text);
    font-weight: 900;
    white-space: nowrap;
}

.weekboard-types {
    min-width: 0;
    color: var(--muted);
    font-size: 10px;
    font-weight: 750;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weekboard-bar {
    height: 7px;
    display: flex;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(16, 24, 40, 0.06);
}

.weekboard-segment {
    display: block;
    min-width: 2px;
    height: 100%;
}

.weekboard-segment.type-vakantie,
.weekboard-day.v {
    background: rgba(43, 108, 255, 0.62);
}

.weekboard-segment.type-doktersbezoek,
.weekboard-day.d {
    background: rgba(16, 185, 129, 0.58);
}

.weekboard-segment.type-zakelijk,
.weekboard-day.z {
    background: rgba(245, 158, 11, 0.62);
}

.weekboard-segment.type-anders,
.weekboard-day.a {
    background: rgba(102, 112, 133, 0.44);
}

.weekboard-days-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.weekboard-day {
    height: 5px;
    border-radius: 999px;
    background: rgba(16, 24, 40, 0.08);
}

.weekboard-empty {
    width: 28px;
    height: 1px;
    display: block;
    margin: 0 auto;
    background: rgba(16, 24, 40, 0.12);
}

.view-toggle {
    display: flex;
    gap: 8px;
    margin: 8px 0 12px;
    flex-wrap: wrap;
}

.week-detail {
    position: fixed;
    inset: 0;
    z-index: 60;
}

.week-detail[hidden] {
    display: none;
}

.week-detail-backdrop {
    position: absolute;
    inset: 0;
    border: none;
    background: rgba(15, 23, 42, 0.3);
}

.week-detail-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -16px 30px rgba(15, 23, 42, 0.18);
    padding: 16px;
    max-height: 70vh;
    overflow-y: auto;
}

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

.week-detail-title {
    font-weight: 900;
}

.week-detail-sub {
    color: var(--muted);
    font-size: 12px;
    margin-top: 2px;
}

.week-detail-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.week-detail-item {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    padding: 10px 12px;
    background: rgba(248, 250, 255, 0.8);
}

.week-detail-item-top {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
}

/* Mobiele lijstweergave */
.weeklist {
    display: none;
    margin-top: 12px;
    flex-direction: column;
    gap: 12px;
}

.weekcard {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px;
    background: #fff;
    box-shadow: var(--shadow2);
}

.weekcard-hd {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.weekcard-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.weekcard-reg {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    padding: 8px 10px;
    background: rgba(248, 250, 255, 0.7);
}

.weekcard-reg-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
}

.weekcard-sep {
    color: var(--muted);
    font-size: 12px;
}

.weekcard-duration {
    margin-left: auto;
    font-size: 12px;
    color: var(--muted);
}

.weekcard-reg-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 6px;
}

.type-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid transparent;
}

.type-vakantie {
    background: rgba(43, 108, 255, 0.14);
    border-color: rgba(43, 108, 255, 0.28);
    color: #1d4ed8;
}

.type-zakelijk {
    background: rgba(247, 144, 9, 0.14);
    border-color: rgba(247, 144, 9, 0.28);
    color: #b45309;
}

.type-anders {
    background: rgba(102, 112, 133, 0.18);
    border-color: rgba(102, 112, 133, 0.28);
    color: #475467;
}

/* Legenda */
.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
    font-size: 12px;
    color: var(--muted);
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    display: inline-block;
    border: 1px solid rgba(15, 23, 42, 0.12);
}

.legend-swatch.v {
    background: rgba(43, 108, 255, 0.7);
    border-color: rgba(43, 108, 255, 0.3);
}

.legend-swatch.z {
    background: rgba(247, 144, 9, 0.78);
    border-color: rgba(247, 144, 9, 0.3);
}

.legend-swatch.d {
    background: rgba(16, 185, 129, 0.72);
    border-color: rgba(16, 185, 129, 0.3);
}

.legend-swatch.a {
    background: rgba(102, 112, 133, 0.55);
    border-color: rgba(102, 112, 133, 0.22);
}

@media (max-width: 520px) {
    :root {
        --appbar-height: 60px;
    }

    .topbar-inner {
        align-items: stretch;
    }

    .year-form {
        width: 100%;
        order: 3;
    }

    .topbar-actions {
        width: 100%;
        justify-content: space-between;
    }

    .bottom-inner {
        gap: 6px;
        overflow-x: auto;
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
        scrollbar-width: none;
    }

    .bottom-inner::-webkit-scrollbar {
        display: none;
    }

    .navbtn {
        flex: 0 0 auto;
        min-width: 90px;
        padding: 0 10px;
        font-size: 12px;
        gap: 6px;
    }

    .navbtn svg {
        width: 16px;
        height: 16px;
    }

    .stickyFilter {
        position: static;
        padding: 6px 0 0;
        margin-bottom: 16px;
    }

    .stickyFilter .seg {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 6px;
        scrollbar-width: none;
    }

    .stickyFilter .seg::-webkit-scrollbar {
        display: none;
    }

    .stickyFilter .seg a {
        flex: 0 0 auto;
        min-height: 36px;
        padding: 0 10px;
        font-size: 12px;
        gap: 6px;
    }

    .stickyFilter .seg svg {
        width: 16px;
        height: 16px;
    }

    .stickyFilter form.form-grid {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 10px;
        box-shadow: var(--shadow2);
    }

    .weekgrid .namecol {
        min-width: 180px;
        width: 180px;
        max-width: 180px;
    }

    .wcol {
        width: 72px;
        min-width: 72px;
        max-width: 72px;
    }

    .dot {
        width: 7px;
        height: 13px;
    }
}

@media (max-width: 768px) {
    .week-swipe {
        display: none;
    }

    .chipbar {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 6px;
        scrollbar-width: none;
    }

    .chipbar::-webkit-scrollbar {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* Layout refresh */
:root {
    --bg: #f3f4f6;
    --bg-elevated: #ffffff;
    --card: #ffffff;
    --text: #111827;
    --muted: #6b7280;
    --line: rgba(17, 24, 39, 0.08);
    --line-strong: rgba(17, 24, 39, 0.14);
    --shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
    --shadow2: 0 4px 14px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.04);
    --primary: #1459d7;
    --primary2: #0f4fca;
    --ok: #15803d;
    --bad: #dc2626;
    --warn: #b45309;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius: 12px;
    --radius2: 10px;
}

body {
    background: #f3f4f6;
}

.container {
    max-width: 1480px;
}

.appbar {
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--line);
}

.appbar-inner {
    max-width: 1480px;
}

.appbar + .container {
    padding-top: 20px;
}

.logo {
    background: #fff;
    border-color: var(--line);
    box-shadow: none;
    position: relative;
}

.logo img {
    opacity: 1;
}

.brand-title b {
    font-size: 15px;
}

.brand-title span {
    font-size: 13px;
}

.card,
.item,
.list-item,
.filter-panel,
.weekwrap,
.weekcard,
.feed-mini,
.modal-card,
.kpi .k,
.hero-panel,
.module-card,
.planner-mode-option,
.switch {
    box-shadow: var(--shadow);
}

.card,
.item,
.list-item,
.filter-panel,
.weekwrap,
.weekcard,
.feed-mini,
.modal-card,
.kpi .k,
.hero-panel,
.module-card,
.planner-mode-option {
    border-color: var(--line);
}

.card,
.item,
.list-item,
.feed-mini,
.modal-card,
.weekcard,
.hero-panel,
.module-card {
    border-radius: 12px;
}

.chip,
.btn2,
.btn-secondary,
.btnOutline,
.navbtn,
.seg a,
.segmented a,
.badge,
.qbtn,
.module-link,
.year-select,
.filter-panel,
.switch,
.menu,
.menu-panel,
.action-panel,
.link-panel,
.feed-panel {
    box-shadow: none;
}

.chip,
.badge,
.year-select,
.module-link,
.navbtn,
.seg a,
.segmented a {
    background: #fff;
}

.card-hd {
    padding: 16px 18px 14px;
}

.card-bd {
    padding: 18px;
}

.hero-panel,
.hero-panel-accent {
    background: #fff;
}

.hero-panel h1 {
    font-size: clamp(24px, 4vw, 36px);
    line-height: 1.04;
}

.hero-panel p,
.meta,
.k .t,
label {
    color: var(--muted);
}

.btn,
.btn-primary {
    background: var(--primary);
    box-shadow: none;
}

.btn:hover,
.btn-primary:hover {
    background: var(--primary2);
}

.btn2,
.btn-secondary,
.btnOutline {
    border-color: var(--line);
    color: var(--text);
}

.btnOutline {
    color: var(--primary);
}

.btnDanger,
.btn-danger {
    border-color: rgba(220, 38, 38, 0.2);
    background: rgba(220, 38, 38, 0.05);
    color: #b91c1c;
}

input,
select,
textarea {
    background: #fff;
    border-color: rgba(17, 24, 39, 0.12);
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(20, 89, 215, 0.4);
    box-shadow: 0 0 0 3px rgba(20, 89, 215, 0.08);
}

.msg {
    box-shadow: none;
    border-radius: 12px;
}

.filter-body,
.stickyFilter {
    background: transparent;
}

.stickyFilter {
    position: static;
    top: auto;
    display: grid;
    gap: 12px;
    padding: 0;
    margin-bottom: 18px;
    border-bottom: 0;
    background: transparent;
    backdrop-filter: none;
}

.bottom-nav {
    background: rgba(250, 251, 252, 0.96);
}

.weekwrap::before {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0));
}

.weekwrap::after {
    background: linear-gradient(270deg, rgba(245, 246, 248, 0.94), rgba(245, 246, 248, 0));
}

.weekgrid .namecol {
    box-shadow: 8px 0 18px rgba(15, 23, 42, 0.04);
}

.page-stack {
    display: grid;
    gap: 20px;
}

.page-header {
    display: grid;
    gap: 14px;
    padding: 4px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.page-header-main {
    display: grid;
    gap: 8px;
    max-width: 72ch;
}

.page-brand-logo {
    width: min(230px, 68vw);
}

.page-brand-logo img {
    width: 100%;
    height: auto;
}

.page-header h1 {
    margin: 0;
    font-size: clamp(26px, 3.5vw, 36px);
    line-height: 1.06;
    letter-spacing: -0.03em;
}

.page-header p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
}

.page-kpis {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.page-kpi {
    display: grid;
    gap: 3px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: none;
}

.page-kpi-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}

.page-kpi-value {
    font-size: 20px;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -0.02em;
}

.page-kpi-sub {
    font-size: 12px;
    color: var(--muted);
}

.quick-links {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.quick-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--text);
    text-decoration: none;
}

.quick-link:hover {
    border-color: rgba(17, 24, 39, 0.16);
}

.quick-link-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(17, 24, 39, 0.06);
    color: var(--text);
}

.quick-link-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.quick-link.is-action .quick-link-icon,
.accent-card.is-action .quick-link-icon {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

.quick-link.is-team .quick-link-icon,
.accent-card.is-team .quick-link-icon {
    background: rgba(22, 163, 74, 0.12);
    color: #15803d;
}

.quick-link-kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}

.quick-link-title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.quick-link-copy {
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}

.leave-request-summary {
    align-items: center;
}

.surface {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: none;
    overflow: hidden;
}

.surface-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}

.surface-header-main {
    display: grid;
    gap: 4px;
}

.surface-title {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.surface-subtitle {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.surface-body {
    padding: 16px;
}

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

.surface-divider {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.subtle-box {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fafc;
}

.detail-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.detail-item {
    display: grid;
    gap: 4px;
}

.detail-item dt {
    margin: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}

.detail-item dd {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

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

.simple-list {
    display: grid;
}

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

.simple-list .simple-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.simple-list .simple-row:last-child {
    padding-bottom: 0;
}

.simple-row-main {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.simple-row-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
}

.simple-row-meta {
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}

.simple-row-end {
    display: grid;
    gap: 4px;
    justify-items: end;
    text-align: right;
    flex: 0 0 auto;
}

.section-kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.status-pill.ok {
    border-color: rgba(21, 128, 61, 0.18);
    background: rgba(21, 128, 61, 0.06);
    color: #166534;
}

.status-pill.warn {
    border-color: rgba(180, 83, 9, 0.22);
    background: rgba(180, 83, 9, 0.08);
    color: #92400e;
}

.status-pill.bad {
    border-color: rgba(220, 38, 38, 0.18);
    background: rgba(220, 38, 38, 0.06);
    color: #b91c1c;
}

.status-pill.neutral {
    border-color: var(--line);
    background: #fff;
    color: var(--text);
}

.planning-work-card {
    --team-accent: rgba(16, 24, 40, 0.22);
    display: grid;
    gap: 8px;
    padding: 11px 12px;
    border-color: rgba(17, 24, 39, 0.10);
    background: #fff;
}

.planning-work-card[data-team-accent="0"] { --team-accent: #2b6cff; }
.planning-work-card[data-team-accent="1"] { --team-accent: #12b76a; }
.planning-work-card[data-team-accent="2"] { --team-accent: #f79009; }
.planning-work-card[data-team-accent="3"] { --team-accent: #7a5af8; }
.planning-work-card[data-team-accent="4"] { --team-accent: #ef6820; }
.planning-work-card[data-team-accent="5"] { --team-accent: #0ba5ec; }
.planning-work-card[data-team-accent="6"] { --team-accent: #ee46bc; }
.planning-work-card[data-team-accent="7"] { --team-accent: #4e7a1f; }
.planning-work-card[data-team-accent="8"] { --team-accent: rgba(16, 24, 40, 0.22); }

.planning-work-card .planning-card-title .surface-title {
    display: flex;
    align-items: center;
    gap: 7px;
}

.planning-work-card .planning-card-title .surface-title::before {
    content: "";
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: var(--team-accent);
}


.planning-summary {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
    padding: 11px 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: #fff;
}

.planning-summary-hd {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.planning-summary-label {
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.planning-summary-hd b {
    color: var(--text);
    font-size: 15px;
    font-weight: 950;
}

.planning-summary-empty {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 750;
}

.planning-summary-list {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.planning-summary-row {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    align-items: baseline;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 8px;
}

.planning-summary-row + .planning-summary-row {
    border-top: 1px solid var(--line);
}

.planning-summary-row.is-today {
    background: rgba(244, 173, 56, 0.14);
    background: color-mix(in srgb, var(--primary) 14%, transparent);
}

.planning-summary-day {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
}

.planning-summary-day b {
    color: var(--text);
    font-size: 13px;
    font-weight: 950;
}

.planning-summary-day span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.planning-summary-what {
    min-width: 0;
    color: var(--text);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.planning-summary-what i {
    color: var(--muted);
    font-style: normal;
    font-weight: 750;
}

.planning-summary-what em {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.planning-days {
    display: grid;
    gap: 16px;
}

.planning-day {
    display: grid;
    gap: 8px;
    padding: 10px 10px 12px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: rgba(16, 17, 20, 0.02);
}

.planning-day.is-weekend {
    border-left-color: var(--line-strong);
    background: rgba(16, 17, 20, 0.045);
}

.planning-day.is-today {
    border-color: rgba(244, 173, 56, 0.32);
    border-color: color-mix(in srgb, var(--primary) 32%, transparent);
    border-left-color: var(--primary);
    background: rgba(244, 173, 56, 0.08);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.planning-day-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 0 2px 6px;
    border-bottom: 1px solid var(--line-strong);
}

.planning-day-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.planning-day-weekday {
    color: var(--text);
    font-size: 19px;
    line-height: 1.1;
    font-weight: 950;
    letter-spacing: -0.01em;
}

.planning-day-header h2 {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.2;
    font-weight: 850;
}

.planning-day-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.planning-day-relative,
.planning-day-mine,
.planning-day-count {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.planning-day-relative {
    background: var(--primary);
    color: #3d2a05;
}

.planning-day-mine {
    border: 1px solid rgba(21, 128, 61, 0.35);
    border-color: color-mix(in srgb, var(--ok) 35%, transparent);
    background: rgba(21, 128, 61, 0.12);
    background: color-mix(in srgb, var(--ok) 12%, transparent);
    color: var(--ok);
}

.planning-day-count {
    border: 1px solid var(--line-strong);
    background: #fff;
    color: var(--muted);
}

.planning-day-body {
    display: grid;
    gap: 8px;
}

.planning-member-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.planning-member-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 2px 8px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: #fff;
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.planning-member-chip.is-you {
    border-color: rgba(21, 128, 61, 0.45);
    border-color: color-mix(in srgb, var(--ok) 45%, transparent);
    background: rgba(21, 128, 61, 0.12);
    background: color-mix(in srgb, var(--ok) 12%, transparent);
    color: var(--ok);
}

.planning-member-chip.is-you b {
    padding: 0 5px;
    border-radius: 999px;
    background: var(--ok);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.planning-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.planning-card-title .surface-title {
    margin: 0;
    font-size: 17px;
    line-height: 1.2;
}

.planning-team-pill {
    min-height: 24px;
    padding-inline: 8px;
    font-size: 10px;
}

.planning-card-title {
    min-width: 0;
}

.planning-main-task {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: baseline;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
}

.planning-main-task span,
.planning-info-label {
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.planning-main-task b {
    color: var(--text);
    font-size: 15px;
    line-height: 1.25;
    font-weight: 950;
    overflow-wrap: anywhere;
}

.planning-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 7px;
}

.planning-info-panel {
    display: grid;
    align-content: start;
    gap: 4px;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
}

.planning-info-panel-wide {
    grid-column: 1 / -1;
}

.planning-info-panel p {
    margin: 0;
    color: #334155;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.planning-info-panel .planning-compact-values {
    color: var(--text);
    font-weight: 800;
}

.planning-info-panel .planning-info-empty {
    color: var(--muted);
    font-weight: 700;
}

.planning-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.planning-tag-list span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    max-width: 100%;
    padding: 0 9px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 999px;
    background: #f8fafc;
    color: #1f2937;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.planning-team-task-list {
    display: grid;
    gap: 8px;
}

.planning-team-task-row {
    display: grid;
    gap: 4px;
    padding: 10px 11px;
    border: 1px solid rgba(245, 158, 11, 0.22);
    border-radius: 8px;
    background: #fffaf0;
}

.planning-team-task-row b {
    color: var(--text);
    font-size: 14px;
    line-height: 1.3;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.planning-team-task-row span,
.planning-team-task-row p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.planning-detail-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 8px;
}

.planning-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    max-width: 100%;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
    color: #334155;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 700;
}

.planning-chip b {
    color: #0f172a;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.planning-chip-members {
    align-items: flex-start;
    padding-top: 7px;
    padding-bottom: 7px;
}

.planning-member-list {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.planning-member-list span {
    display: block;
}

.planning-department-toggle {
    margin-top: 12px;
}

.planning-department-toggle summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
    list-style: none;
}

.planning-toggle-open {
    display: none;
}

.planning-department-toggle[open] .planning-toggle-closed {
    display: none;
}

.planning-department-toggle[open] .planning-toggle-open {
    display: inline;
}

.planning-toggle-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 11px;
    font-weight: 900;
}

.planning-department-toggle summary::-webkit-details-marker {
    display: none;
}

.planning-department-toggle summary::after {
    content: "+";
    color: var(--muted);
    font-weight: 900;
}

.planning-department-toggle[open] summary::after {
    content: "-";
}

.planning-department-grid {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.planning-department-team {
    display: grid;
    gap: 6px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
}

.planning-department-team.is-own-team {
    border-color: rgba(43, 108, 255, 0.20);
    background: #f8fbff;
}

.planning-department-team-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.planning-department-team h3 {
    margin: 0;
    color: var(--text);
    font-size: 14px;
    line-height: 1.2;
    font-weight: 900;
}

.planning-own-team {
    flex: 0 0 auto;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.planning-department-work {
    margin: 0;
    color: var(--text);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 800;
}

.planning-department-meta,
.planning-department-members,
.planning-department-note,
.planning-department-empty {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

.planning-department-meta b {
    color: var(--text);
}

.planning-task-block {
    display: grid;
    gap: 9px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--line);
}

.planning-task-block.is-standalone {
    margin-top: 8px;
    padding-top: 0;
    border-top: 0;
}

.planning-task-heading {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.planning-task-list {
    display: grid;
    gap: 8px;
}

.planning-task-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
}

.planning-task-main {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.planning-task-badge {
    width: fit-content;
    max-width: 100%;
    padding: 3px 7px;
    border-radius: 7px;
    background: #e0f2fe;
    color: #075985;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.planning-task-title {
    margin: 0;
    color: var(--text);
    font-size: 14px;
    line-height: 1.35;
    font-weight: 850;
}

.planning-task-meta {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.planning-task-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

@media (max-width: 640px) {
    .planning-card-head {
        align-items: center;
        flex-direction: row;
    }

    .planning-summary-row {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .planning-day {
        padding: 9px 8px 10px;
    }

    .planning-day-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .planning-day-weekday {
        font-size: 17px;
    }

    .planning-work-card {
        padding: 10px;
    }

    .planning-info-grid {
        grid-template-columns: 1fr;
    }

    .planning-info-panel-wide {
        grid-column: 1 / -1;
    }

    .planning-task-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .planning-task-link {
        width: 100%;
    }
}

.auth-layout {
    display: grid;
    gap: 20px;
}

.auth-steps {
    display: grid;
    gap: 14px;
}

.auth-steps.is-verifying {
    grid-template-columns: 1fr;
    gap: 12px;
}

.auth-step {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f8fafc;
}

.auth-step-code {
    border-color: rgba(43, 108, 255, 0.42);
    background: linear-gradient(180deg, rgba(43, 108, 255, 0.06), #fff);
    box-shadow: 0 0 0 1px rgba(43, 108, 255, 0.08);
}

.auth-step-code .surface-title {
    font-size: 22px;
}

.auth-step-code .btn {
    min-height: 48px;
    font-size: 15px;
}

.auth-code-field label {
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
}

.auth-code-field input {
    height: 64px;
    min-height: 64px;
    text-align: center;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 0;
}

.auth-code-note {
    margin: 8px 0 0;
    color: var(--primary);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
}

.auth-step-resend {
    gap: 12px;
    border-style: dashed;
    background: #fff;
}

.auth-step-resend .surface-title {
    font-size: 15px;
}

.auth-resend-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f8fafc;
}

.auth-resend-summary span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.auth-resend-summary strong {
    color: var(--text);
    font-size: 14px;
}

body .auth-code-field input {
    height: 64px !important;
    min-height: 64px !important;
    border-radius: 12px !important;
}

.auth-single {
    max-width: 680px;
    margin: 0 auto;
}

.auth-links {
    display: grid;
    gap: 8px;
}

.link-list {
    display: grid;
    gap: 10px;
}

.link-list a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 700;
}

.link-list a:hover {
    text-decoration: underline;
}

.flow {
    display: grid;
    gap: 12px;
}

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

.section-stack {
    display: grid;
    gap: 18px;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    font-size: 14px;
    color: var(--text);
}

.checkbox-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--primary);
    flex: 0 0 auto;
}

.surface-note {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.top-right,
.topbar-actions {
    gap: 10px;
}

.seg,
.segmented,
.chipbar,
.view-toggle {
    gap: 8px;
    margin: 0;
}

.seg a,
.segmented a,
.chip,
.btn2,
.btn-secondary,
.btnOutline,
.badge,
.year-select {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
}

.seg a,
.segmented a {
    color: var(--text);
}

.seg a.active,
.segmented a.active {
    background: #111827;
    border-color: #111827;
    color: #fff;
}

.chip {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
}

.chip.active {
    background: rgba(20, 89, 215, 0.08);
    border-color: rgba(20, 89, 215, 0.32);
    color: var(--primary);
}

.view-toggle .chip.active {
    background: #111827;
    border-color: #111827;
    color: #fff;
}

.badge {
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
}

.filter-panel {
    border-radius: 12px;
}

.filter-panel summary {
    min-height: 48px;
    padding: 0 16px;
}

.filter-body {
    padding: 14px 16px 16px;
}

.kpi {
    gap: 12px;
}

.kpi .k {
    border-radius: 12px;
    padding: 14px;
}

.weeklist {
    gap: 10px;
}

.weekcard {
    padding: 0;
    border-radius: 12px;
    overflow: hidden;
}

.weekcard-hd {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--line);
}

.weekcard-person {
    min-width: 0;
}

.weekcard-total {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
}

.weekcard .name {
    font-size: 16px;
    font-weight: 800;
}

.weekcard .dept {
    margin-top: 4px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.weekcard-body {
    gap: 0;
    padding: 0 18px 8px;
}

.weekcard-reg {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 16px;
    padding: 14px 0;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
}

.weekcard-body .weekcard-reg:first-child {
    border-top: 0;
}

.weekcard-reg-left {
    min-width: 0;
    display: grid;
    gap: 8px;
}

.weekcard-reg-weeks {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.weekcard-reg-dates {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
}

.weekcard-reg-right {
    display: grid;
    gap: 8px;
    justify-items: end;
    align-content: start;
    text-align: right;
}

.weekcard-note {
    grid-column: 1 / -1;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
}

.weekcard-duration {
    margin-left: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
}

.weekcard-sep {
    font-size: 12px;
}

.type-chip {
    min-height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: 0.02em;
}

@media (min-width: 720px) {
    .surface-actions.align-end {
        justify-content: flex-end;
    }
}

@media (min-width: 900px) {
    .auth-layout {
        grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
        align-items: start;
    }

    .auth-steps {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .surface-body,
    .surface-header {
        padding-left: 16px;
        padding-right: 16px;
    }

    .page-header {
        gap: 12px;
        padding: 0;
    }

    .page-header h1 {
        font-size: 24px;
    }

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

    .simple-row {
        flex-direction: column;
    }

    .simple-row-end {
        justify-items: start;
        text-align: left;
    }

    .weekcard-hd {
        flex-direction: column;
        align-items: flex-start;
    }

    .weekcard-reg {
        grid-template-columns: 1fr;
    }

    .weekcard-reg-right {
        justify-items: start;
        text-align: left;
    }

    .page-header-actions {
        justify-content: flex-start;
    }
}

.page-header-compact {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

.page-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.toolbar-shell {
    display: grid;
    gap: 12px;
}

.toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.toolbar-row-secondary {
    padding-bottom: 2px;
}

.weekcard-col {
    min-width: 0;
}

.weekcard-col-type {
    display: flex;
    align-items: center;
}

.weekcard-col-duration {
    white-space: nowrap;
}

.vacation-layout {
    gap: 16px;
}

.vacation-layout .page-header {
    padding: 18px 20px;
}

.vacation-layout .stickyFilter.toolbar-shell {
    position: static;
    top: auto;
    margin: 0;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: none;
}

.vacation-layout .card,
.vacation-layout .filter-panel,
.vacation-layout .weekboard-wrap,
.vacation-layout .weekwrap,
.vacation-layout .weekcard {
    box-shadow: none;
}

.vacation-layout .card {
    border-radius: 14px;
}

.vacation-layout .card-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--line);
    background: #fcfcfd;
}

.vacation-layout .card-bd.tight {
    padding-top: 0;
}

.vacation-layout .filter-panel {
    border-radius: 12px;
    background: #fcfcfd;
}

.vacation-layout .filter-panel summary {
    min-height: 46px;
}

.vacation-layout .filter-body {
    padding: 16px;
}

.vacation-layout .seg,
.vacation-layout .chipbar,
.vacation-layout .view-toggle {
    margin: 0;
}

.vacation-layout .seg a,
.vacation-layout .chip,
.vacation-layout .btn2,
.vacation-layout .btn-secondary,
.vacation-layout .btnOutline {
    border-radius: 10px;
}

.vacation-layout .seg a {
    min-height: 38px;
}

.vacation-layout .chip {
    min-height: 34px;
    padding: 0 11px;
    border-radius: 10px;
    background: #f8fafc;
}

.vacation-layout .chipbar .chip.active {
    background: rgba(20, 89, 215, 0.08);
    border-color: rgba(20, 89, 215, 0.24);
    color: var(--primary);
}

.vacation-layout .view-toggle .chip.active {
    background: #111827;
    border-color: #111827;
    color: #fff;
}

.vacation-layout .badge {
    min-height: 28px;
    padding: 0 9px;
    border-radius: 8px;
    background: #f8fafc;
}

.vacation-layout .weeklist {
    gap: 0;
    margin-top: 0;
}

.vacation-layout .weekcard-total,
.vacation-layout .weekcard-col-weeks {
    letter-spacing: 0.01em;
}

.vacation-layout .weekcard > .meta {
    display: block;
    padding: 0 20px 16px;
}

.vacation-layout .type-chip {
    min-height: 24px;
    padding: 0 8px;
    border-radius: 8px;
}

@media (min-width: 900px) {
    .vacation-layout .weekview.is-cards .weeklist {
        display: block;
    }

    .vacation-layout .weekview.is-cards .weekcard {
        border: 0;
        border-top: 1px solid var(--line);
        border-radius: 0;
        background: transparent;
    }

    .vacation-layout .weekview.is-cards .weeklist .weekcard:first-child {
        border-top: 0;
    }

    .vacation-layout .weekview.is-cards .weekcard-hd {
        padding: 18px 20px 12px;
        background: transparent;
    }

    .vacation-layout .weekview.is-cards .weekcard-body {
        padding: 0 20px 14px;
    }

    .vacation-layout .weekview.is-cards .weekcard-reg {
        grid-template-columns: 110px minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 10px 16px;
        padding: 10px 0;
    }

    .vacation-layout .weekview.is-cards .weekcard-col-weeks {
        font-size: 13px;
        font-weight: 800;
        color: var(--text);
    }

    .vacation-layout .weekview.is-cards .weekcard-col-dates {
        font-size: 13px;
        color: var(--muted);
    }

    .vacation-layout .weekview.is-cards .weekcard-col-type {
        justify-self: start;
    }

    .vacation-layout .weekview.is-cards .weekcard-col-duration {
        font-size: 12px;
        font-weight: 700;
        color: var(--muted);
        text-align: right;
    }

    .vacation-layout .weekview.is-cards .weekcard-note {
        grid-column: 2 / -1;
        padding-top: 2px;
    }
}

@media (max-width: 899px) {
    .page-header-compact {
        grid-template-columns: 1fr;
    }

    .page-header-actions {
        justify-content: flex-start;
    }

    .vacation-layout .page-header,
    .vacation-layout .stickyFilter.toolbar-shell {
        padding: 14px 16px;
    }

    .vacation-layout .toolbar-row-secondary {
        align-items: flex-start;
    }

    .vacation-layout .weekcard-hd {
        padding: 14px 16px;
    }

    .vacation-layout .weekcard > .meta {
        padding: 0 16px 14px;
    }

    .vacation-layout .weekcard-body {
        padding: 0 16px 10px;
    }

    .vacation-layout .weekcard-reg {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px 0;
    }

    .vacation-layout .weekcard-col-duration {
        font-size: 12px;
        font-weight: 700;
        color: var(--muted);
    }
}

.appbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
}

.module-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.module-nav-shell {
    display: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.module-nav-shell::-webkit-scrollbar {
    display: none;
}

.module-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: #475467;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.module-tab:hover {
    border-color: rgba(17, 24, 39, 0.16);
    color: var(--text);
}

.module-tab.active {
    border-color: rgba(43, 108, 255, 0.24);
    background: rgba(43, 108, 255, 0.08);
    color: var(--primary);
}

.module-tab > span {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appbar-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.pwa-install-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(244, 173, 56, 0.48);
    border-radius: 999px;
    background: rgba(244, 173, 56, 0.16);
    color: #6f4500;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.pwa-install-button:hover {
    border-color: rgba(244, 173, 56, 0.62);
    background: rgba(244, 173, 56, 0.24);
}

.pwa-install-button[hidden] {
    display: none;
}

.pwa-install-nudge {
    position: fixed;
    left: max(14px, env(safe-area-inset-left));
    right: max(14px, env(safe-area-inset-right));
    bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 240;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: min(620px, calc(100vw - 28px));
    margin: 0 auto;
    padding: 14px;
    border: 1px solid rgba(43, 108, 255, 0.18);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.22);
}

.pwa-install-nudge-main {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.pwa-install-nudge-main strong {
    color: var(--text);
    font-size: 15px;
    font-weight: 950;
}

.pwa-install-nudge-main span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;
}

.pwa-install-nudge-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.pwa-install-nudge-primary,
.pwa-install-nudge-secondary,
.pwa-install-nudge-close {
    min-height: 40px;
    border: 0;
    border-radius: 12px;
    padding: 0 13px;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
}

.pwa-install-nudge-primary {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 12px 26px rgba(43, 108, 255, 0.24);
}

.pwa-install-nudge-secondary,
.pwa-install-nudge-close {
    background: #f1f5f9;
    color: #0f172a;
}

.pwa-install-nudge-close {
    width: 40px;
    padding: 0;
}

.pwa-install-nudge-primary:disabled {
    opacity: 0.68;
    cursor: wait;
}

.pwa-push-toast {
    position: fixed;
    left: max(14px, env(safe-area-inset-left));
    right: max(14px, env(safe-area-inset-right));
    bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 255;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    width: min(560px, calc(100vw - 28px));
    margin: 0 auto;
    padding: 12px;
    border: 1px solid rgba(43, 108, 255, 0.22);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.22);
    animation: toast-in var(--transition);
}

.pwa-push-toast.is-urgent {
    border-color: rgba(220, 38, 38, 0.34);
    background: #fffafa;
}

.pwa-push-toast.is-replay {
    border-color: rgba(16, 17, 20, 0.12);
}

.pwa-push-toast-main {
    display: grid;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.pwa-push-toast-label {
    color: #6f737c;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.pwa-push-toast-main strong {
    color: var(--text);
    font-size: 15px;
    font-weight: 950;
}

.pwa-push-toast-main span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;
}

.pwa-push-toast-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.pwa-push-toast-open,
.pwa-push-toast-close {
    min-height: 40px;
    border: 0;
    border-radius: 12px;
    padding: 0 13px;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
}

.pwa-push-toast-open {
    background: var(--primary);
    color: #111;
}

.pwa-push-toast.is-urgent .pwa-push-toast-open {
    background: #dc2626;
    color: #fff;
}

.pwa-push-toast-close {
    width: 40px;
    padding: 0;
    background: #f1f5f9;
    color: #0f172a;
}

.is-push-target {
    scroll-margin-top: 96px;
    outline: 3px solid rgba(43, 108, 255, 0.26);
    outline-offset: 4px;
    transition: outline-color var(--transition), box-shadow var(--transition);
}

.appbar-bhv-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(220, 38, 38, 0.28);
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 12px;
    font-weight: 950;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(220, 38, 38, 0.18);
}

.appbar-bhv-button:hover {
    background: #b91c1c;
}

.appbar-bhv-button.is-alarm {
    min-height: 38px;
    padding: 0 14px;
    border-color: rgba(127, 29, 29, 0.4);
    background: #b91c1c;
    color: #fff;
    animation: bhvAlarmPulse 900ms ease-in-out infinite;
}

.bhv-alarm-banner {
    position: sticky;
    top: var(--appbar-height);
    z-index: 49;
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    background: #b91c1c;
    color: #fff;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(127, 29, 29, 0.28);
}

.bhv-alarm-banner strong {
    font-size: 18px;
    line-height: 1.1;
    letter-spacing: 0;
}

.bhv-alarm-banner span {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
}

@keyframes bhvAlarmPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55), 0 8px 18px rgba(220, 38, 38, 0.18);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.12), 0 12px 24px rgba(220, 38, 38, 0.28);
    }
}

.appmenu {
    position: relative;
    flex: 0 0 auto;
}

.appmenu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    list-style: none;
}

.appmenu-trigger::-webkit-details-marker {
    display: none;
}

.appmenu-trigger::before {
    content: "";
    width: 14px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 -4px 0 currentColor, 0 4px 0 currentColor;
}

.appmenu-trigger-text {
    line-height: 1;
}

.appmenu[open] .appmenu-trigger,
.appmenu-trigger[aria-expanded="true"] {
    border-color: rgba(17, 24, 39, 0.18);
    background: #f8fafc;
}

.appmenu-panel {
    position: fixed;
    top: calc(var(--appbar-height) + 8px + env(safe-area-inset-top));
    right: max(16px, calc((100vw - 1480px) / 2 + 16px));
    width: min(360px, calc(100vw - 24px));
    max-height: calc(100vh - var(--appbar-height) - 28px - env(safe-area-inset-bottom));
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
    display: grid;
    gap: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 260;
}

.appmenu-panel[hidden] {
    display: none !important;
}

.appmenu-panel.is-open {
    display: grid !important;
}

html.has-open-appmenu body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 238;
    background: rgba(15, 23, 42, 0.18);
}

.appmenu-section {
    display: grid;
    gap: 6px;
}

.appmenu-section + .appmenu-section {
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.appmenu-panel .appbar-meta {
    display: flex;
    justify-content: flex-start;
}

.appmenu-label {
    padding: 0 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.appmenu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}

.appmenu-link::before {
    content: attr(data-nav-icon);
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #f3f4f6;
    color: #5f646d;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}

.appmenu-link[data-nav-key]::before {
    content: "";
    background-image: var(--app-shell-menu-icon);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 19px 19px;
    font-size: 0;
}

.appmenu-link[data-nav-key="home"] {
    --app-shell-menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5.5 9.5V21h13V9.5'/%3E%3Cpath d='M9.5 21v-6h5v6'/%3E%3C/svg%3E");
}

.appmenu-link[data-nav-key="calendar"] {
    --app-shell-menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M4 10h16M8 14h3M13 14h3M8 17h3'/%3E%3C/svg%3E");
}

.appmenu-link[data-nav-key="ritten"] {
    --app-shell-menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3zM14 9h3l4 4v3h-7z'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Cpath d='M9 18h6'/%3E%3C/svg%3E");
}

.appmenu-link[data-nav-key="drivers"] {
    --app-shell-menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 19c0-2.2-1.8-4-4-4s-4 1.8-4 4'/%3E%3Ccircle cx='12' cy='8.5' r='3.2'/%3E%3Cpath d='M19 7.5c1.2.8 2 2.1 2 3.6 0 3.5-4 6.9-4 6.9s-1.2-1-2.3-2.5M5 7.5c-1.2.8-2 2.1-2 3.6 0 3.5 4 6.9 4 6.9s1.2-1 2.3-2.5'/%3E%3C/svg%3E");
}

.appmenu-link[data-nav-key="leave"] {
    --app-shell-menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M4 10h16M8 14l2 2 4-4M15 17h1'/%3E%3C/svg%3E");
}

.appmenu-link[data-nav-key="tasks"] {
    --app-shell-menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2.5'/%3E%3Cpath d='m8 12 2.2 2.2L16.5 8M8 17h8'/%3E%3C/svg%3E");
}

.appmenu-link[data-nav-key="tellingen"] {
    --app-shell-menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E");
}

.appmenu-link[data-nav-key="poort"] {
    --app-shell-menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V9l9-6 9 6v12'/%3E%3Cpath d='M7 21V11h10v10'/%3E%3Cpath d='M8 14h8M8 17h8'/%3E%3C/svg%3E");
}

.appmenu-link[data-nav-key="users"] {
    --app-shell-menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20c0-2.2-1.8-4-4-4s-4 1.8-4 4'/%3E%3Ccircle cx='12' cy='9' r='3.5'/%3E%3Cpath d='M20 18c-.2-1.8-1.5-3.1-3.1-3.6M16.5 6.2a3 3 0 0 1 0 5.6'/%3E%3C/svg%3E");
}

.appmenu-link[data-nav-key="clipboard"] {
    --app-shell-menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5h6a2 2 0 0 1 2 2v1H7V7a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M8 6H6a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-2M8 13h8M8 17h5'/%3E%3C/svg%3E");
}

.appmenu-link[data-nav-key="phonebook"] {
    --app-shell-menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h4'/%3E%3C/svg%3E");
}

.appmenu-link[data-nav-key="spray"] {
    --app-shell-menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5h4M11 5v4h2V5M9 9h6l1 3v7a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-7l1-3Z'/%3E%3Cpath d='M16 7h3M19 7v4M19 11h-3M5 7h1M3 11h2M5 15h1'/%3E%3C/svg%3E");
}

.appmenu-link[data-nav-key="camera"] {
    --app-shell-menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 6 10 4h4l1.5 2H19a2 2 0 0 1 2 2v9.5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3.5Z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E");
}

.appmenu-link[data-nav-key="settings"] {
    --app-shell-menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v3M12 18v3M4.8 7.2l2.1 2.1M17.1 14.7l2.1 2.1M3 12h3M18 12h3M4.8 16.8l2.1-2.1M17.1 9.3l2.1-2.1'/%3E%3Ccircle cx='12' cy='12' r='3.3'/%3E%3C/svg%3E");
}

.appmenu-link[data-nav-key="bell"] {
    --app-shell-menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 9a6 6 0 0 0-12 0c0 7-3 7-3 7h18s-3 0-3-7'/%3E%3Cpath d='M10 20a2.5 2.5 0 0 0 4 0'/%3E%3C/svg%3E");
}

.appmenu-link[data-nav-key="grid"] {
    --app-shell-menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6' height='6' rx='1.5'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1.5'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1.5'/%3E%3Crect x='14' y='14' width='6' height='6' rx='1.5'/%3E%3C/svg%3E");
}

.appmenu-link > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appmenu-link:hover {
    background: #f8fafc;
}

.appmenu-link.active {
    border-color: rgba(17, 24, 39, 0.1);
    background: #f8fafc;
}

.appmenu-link.active::before {
    background-color: rgba(43, 108, 255, 0.12);
    color: var(--primary);
}

.appmenu-link.danger {
    color: #b91c1c;
}

.appbar-share-button {
    border: 1px solid rgba(16, 24, 40, 0.10);
    background: #fff;
    color: #111827;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 850;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
    white-space: nowrap;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.appbar-share-button:hover {
    border-color: rgba(43, 108, 255, 0.26);
    color: var(--primary);
}

.appbar-share-button[hidden] {
    display: none !important;
}


.appmenu-link-notice {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 20px;
    text-align: center;
}

.pwa-bottom-link .appmenu-link-notice {
    margin-left: 0;
    margin-top: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    font-size: 10px;
    line-height: 16px;
}
.pwa-bottom-nav {
    display: none;
}

.pwa-bottom-link {
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    display: grid;
    place-items: center;
    position: relative;
    align-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 50px;
    padding: 8px 6px;
    border-radius: 13px;
    color: #475467;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.12;
}

.pwa-bottom-link::before {
    content: "";
    display: none;
    width: 20px;
    height: 20px;
    background: currentColor;
    mask: var(--app-icon) center / 20px 20px no-repeat;
    -webkit-mask: var(--app-icon) center / 20px 20px no-repeat;
}

.pwa-bottom-link[href*="mijn.php"]::before,
.pwa-bottom-link[data-nav-key="home"]::before,
.pwa-bottom-link[href*="planning.php"]::before,
.pwa-bottom-link[data-nav-key="planning"]::before,
.pwa-bottom-link[href*="ritten.php"]::before,
.pwa-bottom-link[data-nav-key="ritten"]::before,
.pwa-bottom-link[href*="chauffeurs_volgen.php"]::before,
.pwa-bottom-link[data-nav-key="drivers"]::before,
.pwa-bottom-link[href*="planner.php"]::before,
.pwa-bottom-link[href*="vakantie.php"]::before,
.pwa-bottom-link[data-nav-key="leave"]::before,
.pwa-bottom-link[href*="taken.php"]::before,
.pwa-bottom-link[data-nav-key="tasks"]::before,
.pwa-bottom-link[href*="groeitellingen.php"]::before,
.pwa-bottom-link[data-nav-key="tellingen"]::before,
.pwa-bottom-link[href*="poort.php"]::before,
.pwa-bottom-link[data-nav-key="poort"]::before,
.pwa-bottom-link[href*="meldingen.php"]::before,
.pwa-bottom-link[data-nav-key="meldingen"]::before,
.pwa-bottom-link[href*="bezoekverslagen.php"]::before,
.pwa-bottom-link[data-nav-key="visits"]::before,
.pwa-bottom-link[href*="floraclick"]::before,
.pwa-bottom-link[data-nav-key="photo"]::before,
.pwa-bottom-link[href*="apps/invoer.php"]::before,
.pwa-bottom-link[href*="invoer.php"]::before,
.pwa-bottom-link[data-nav-key="spuiten"]::before,
.pwa-bottom-menu-button::before {
    display: block;
}

.pwa-bottom-link[href*="mijn.php"],
.pwa-bottom-link[data-nav-key="home"],
.mijn-page-button[data-card-icon="home"] {
    --app-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5.5 9.5V21h13V9.5'/%3E%3Cpath d='M9.5 21v-6h5v6'/%3E%3C/svg%3E");
}

.pwa-bottom-link[href*="planning.php"],
.pwa-bottom-link[data-nav-key="planning"],
.mijn-page-button[data-card-icon="planning"] {
    --app-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M4 10h16M8 14h3M13 14h3M8 17h3'/%3E%3C/svg%3E");
}

.pwa-bottom-link[href*="ritten.php"],
.pwa-bottom-link[data-nav-key="ritten"],
.mijn-page-button[data-card-icon="ritten"] {
    --app-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3zM14 9h3l4 4v3h-7z'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Cpath d='M9 18h6'/%3E%3C/svg%3E");
}

.pwa-bottom-link[href*="chauffeurs_volgen.php"],
.pwa-bottom-link[data-nav-key="drivers"],
.mijn-page-button[data-card-icon="drivers"] {
    --app-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 19c0-2.2-1.8-4-4-4s-4 1.8-4 4'/%3E%3Ccircle cx='12' cy='8.5' r='3.2'/%3E%3Cpath d='M19 7.5c1.2.8 2 2.1 2 3.6 0 3.5-4 6.9-4 6.9s-1.2-1-2.3-2.5M5 7.5c-1.2.8-2 2.1-2 3.6 0 3.5 4 6.9 4 6.9s1.2-1 2.3-2.5'/%3E%3C/svg%3E");
}

.pwa-bottom-link[href*="planner.php"],
.pwa-bottom-link[href*="vakantie.php"],
.pwa-bottom-link[data-nav-key="leave"],
.mijn-page-button[data-card-icon="leave"] {
    --app-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M4 10h16M8 14l2 2 4-4M15 17h1'/%3E%3C/svg%3E");
}

.pwa-bottom-link[href*="taken.php"],
.pwa-bottom-link[data-nav-key="tasks"],
.mijn-page-button[data-card-icon="tasks"] {
    --app-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2.5'/%3E%3Cpath d='m8 12 2.2 2.2L16.5 8M8 17h8'/%3E%3C/svg%3E");
}

.pwa-bottom-link[href*="groeitellingen.php"],
.pwa-bottom-link[data-nav-key="tellingen"],
.mijn-page-button[data-card-icon="tellingen"] {
    --app-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E");
}

.pwa-bottom-link[href*="poort.php"],
.pwa-bottom-link[data-nav-key="poort"],
.mijn-page-button[data-card-icon="poort"] {
    --app-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V9l9-6 9 6v12'/%3E%3Cpath d='M7 21V11h10v10'/%3E%3Cpath d='M8 14h8M8 17h8'/%3E%3C/svg%3E");
}

.pwa-bottom-link[href*="meldingen.php"],
.pwa-bottom-link[data-nav-key="meldingen"],
.mijn-page-button[data-card-icon="meldingen"] {
    --app-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 9a6 6 0 0 0-12 0c0 7-3 7-3 7h18s-3 0-3-7'/%3E%3Cpath d='M10 20a2.5 2.5 0 0 0 4 0'/%3E%3C/svg%3E");
}

.pwa-bottom-link[href*="bezoekverslagen.php"],
.pwa-bottom-link[data-nav-key="visits"],
.mijn-page-button[data-card-icon="clipboard"] {
    --app-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5h6a2 2 0 0 1 2 2v1H7V7a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M8 6H6a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-2M8 13h8M8 17h5'/%3E%3C/svg%3E");
}

.mijn-page-button[data-card-icon="time"] {
    --app-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

.mijn-page-button[data-card-icon="sick"] {
    --app-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E");
}

.mijn-page-button[data-card-icon="team"] {
    --app-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20c0-2.2-1.8-4-4-4s-4 1.8-4 4'/%3E%3Ccircle cx='12' cy='9' r='3.5'/%3E%3Cpath d='M20 18c-.2-1.8-1.5-3.1-3.1-3.6M16.5 6.2a3 3 0 0 1 0 5.6'/%3E%3C/svg%3E");
}

.pwa-bottom-link[href*="floraclick"],
.pwa-bottom-link[data-nav-key="photo"],
.mijn-page-button[data-card-icon="camera"] {
    --app-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 6 10 4h4l1.5 2H19a2 2 0 0 1 2 2v9.5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3.5Z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E");
}

.pwa-bottom-link[href*="apps/invoer.php"],
.pwa-bottom-link[href*="invoer.php"],
.pwa-bottom-link[data-nav-key="spuiten"] {
    --app-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5h4M11 5v4h2V5M9 9h6l1 3v7a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-7l1-3Z'/%3E%3Cpath d='M16 7h3M19 7v4M19 11h-3M5 7h1M3 11h2M5 15h1'/%3E%3C/svg%3E");
}

.pwa-bottom-menu-button {
    --app-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
}

.pwa-bottom-menu-button[aria-expanded="true"] {
    background: rgba(43, 108, 255, 0.10);
    color: var(--primary);
}

.mijn-page-button[data-card-icon="settings"] {
    --app-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v3M12 18v3M4.8 7.2l2.1 2.1M17.1 14.7l2.1 2.1M3 12h3M18 12h3M4.8 16.8l2.1-2.1M17.1 9.3l2.1-2.1'/%3E%3Ccircle cx='12' cy='12' r='3.3'/%3E%3C/svg%3E");
}

.pwa-bottom-link > span:first-child,
.pwa-bottom-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pwa-bottom-link.active {
    background: rgba(43, 108, 255, 0.10);
    color: var(--primary);
}

.floraclick-shell {
    gap: 20px;
}

.floraclick-header-note {
    max-width: 72ch;
}

.floraclick-app {
    color: var(--text);
}

.fc-stage-card {
    position: relative;
    overflow: hidden;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: none;
}

.fc-stage-card::before,
.fc-panel-muted::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: transparent;
}

.fc-stage-card.is-batch {
    border-color: rgba(43, 108, 255, 0.18);
    background: linear-gradient(115deg, rgba(239, 246, 255, 0.9), #fff 48%);
}

.fc-stage-card.is-batch::before {
    background: #2b6cff;
}

.fc-stage-card.is-upload {
    border-color: rgba(14, 116, 144, 0.20);
    background: linear-gradient(115deg, rgba(236, 254, 255, 0.9), #fff 48%);
}

.fc-stage-card.is-upload::before {
    background: #0e7490;
}

.fc-stage-card.is-gallery {
    border-color: rgba(124, 58, 237, 0.18);
    background: linear-gradient(115deg, rgba(245, 243, 255, 0.92), #fff 48%);
}

.fc-stage-card.is-gallery::before {
    background: #7c3aed;
}

.fc-stage-card-tight {
    padding: 16px;
}

.fc-active-batch-notice {
    display: grid;
    gap: 14px;
    padding: 14px;
    border: 1px solid rgba(14, 116, 144, 0.22);
    border-radius: 16px;
    background: linear-gradient(115deg, rgba(236, 254, 255, 0.92), #fff 58%);
}

.fc-active-batch-notice.hidden {
    display: none;
}

.fc-active-batch-notice h3 {
    margin: 6px 0 2px;
    color: var(--text);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.2;
}

.fc-active-batch-notice p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.fc-active-batch-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.fc-batch-status-row {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #0f766e;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.fc-batch-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #0f766e;
}

.fc-recent-note {
    padding: 4px 8px;
    border-radius: 999px;
    background: #f8fafc;
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.fc-batch-list-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.fc-batch-list-card.is-closed {
    border-color: rgba(100, 116, 139, 0.18);
    background: linear-gradient(115deg, rgba(248, 250, 252, 0.96), #fff 52%);
}

.fc-batch-list-card.is-closed::before {
    background: #94a3b8;
}

.fc-batch-list-card.is-closing {
    border-color: rgba(245, 158, 11, 0.24);
    background: linear-gradient(115deg, rgba(255, 251, 235, 0.96), #fff 52%);
}

.fc-batch-list-card.is-closing::before {
    background: #f59e0b;
}

.fc-batch-list-main {
    min-width: 0;
}

.fc-batch-list-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.fc-batch-list-head h3 {
    margin: 0;
    min-width: 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 900;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fc-batch-pill,
.fc-upload-batch-state {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.fc-batch-pill.is-open,
.fc-upload-batch-state {
    background: #ecfeff;
    color: #0f766e;
}

.fc-batch-pill.is-closed {
    background: #f1f5f9;
    color: #64748b;
}

.fc-batch-pill.is-closing {
    background: #fffbeb;
    color: #b45309;
}

.fc-batch-list-meta,
.fc-batch-list-count {
    margin-top: 5px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
}

.fc-batch-list-count {
    color: #94a3b8;
    font-size: 10px;
    text-transform: uppercase;
}

.fc-batch-list-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.fc-icon-btn {
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--muted);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.fc-icon-btn:hover {
    color: var(--primary);
    border-color: rgba(43, 108, 255, 0.24);
}

.fc-icon-btn.is-danger:hover {
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.2);
}

.fc-finish-batch-btn {
    background: #0f766e;
    border-color: #0f766e;
    box-shadow: 0 14px 28px rgba(15, 118, 110, 0.22);
}

.fc-finish-batch-btn:hover {
    background: #115e59;
}

.fc-panel-muted {
    position: relative;
    overflow: hidden;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f8fafc;
}

.fc-panel-muted.is-upload {
    border-color: rgba(14, 116, 144, 0.16);
    background: linear-gradient(115deg, rgba(236, 254, 255, 0.88), #f8fafc 54%);
}

.fc-panel-muted.is-upload::before {
    background: #0e7490;
}

.fc-upload-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 180px;
    padding: 32px 24px;
    border-radius: 18px;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
    text-align: center;
    transition: background var(--transition), transform var(--transition);
}

.fc-upload-dropzone:hover {
    background: var(--primary2);
}

.fc-upload-dropzone:active {
    transform: scale(0.99);
}

.fc-secondary-dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 56px;
    padding: 0 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--text);
    cursor: pointer;
    font-size: 15px;
    font-weight: 800;
    transition: background var(--transition), transform var(--transition), border-color var(--transition);
}

.fc-secondary-dropzone:hover {
    background: #f8fafc;
}

.fc-secondary-dropzone:active {
    transform: scale(0.99);
}

.fc-secondary-dropzone i {
    width: 22px;
    height: 22px;
}

.fc-empty-state {
    padding: 18px;
    border: 1px dashed var(--line-strong);
    border-radius: 16px;
    background: #fff;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
}

.fc-flow-link {
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    font-weight: 700;
}

.fc-flow-link.is-active {
    border-color: #111827;
    background: #111827;
    color: #fff;
}

.fc-flow-button.is-active {
    border-color: #111827;
    background: #111827;
    color: #fff;
}

.fc-inline-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fc-mobile-dock {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    pointer-events: none;
    z-index: 50;
}

.fc-mobile-dock-nav {
    max-width: 420px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
    pointer-events: auto;
}

.fc-mobile-nav-btn {
    flex: 1 1 0;
    min-height: 46px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
}

.fc-mobile-nav-label {
    font-size: 11px;
    font-weight: 850;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: none;
}

.fc-mobile-nav-btn.is-active {
    background: #f3f4f6;
    color: var(--text);
}

.fc-mobile-nav-btn-center {
    flex: 0 0 auto;
    width: 56px;
    min-width: 56px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
}

.fc-mobile-nav-btn-center.is-active {
    background: var(--primary2);
    color: #fff;
}

.fc-mobile-nav-btn-save {
    color: #0f766e;
}

.fc-mobile-nav-btn-save.is-active {
    background: #ecfeff;
    color: #0f766e;
}

.fc-modal-card {
    border-radius: 20px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.16);
}

@media (max-width: 979px), (hover: none), (pointer: coarse) {
    .appbar-actions {
        gap: 6px;
    }

    .appbar-meta {
        display: none;
    }

    .appmenu-panel {
        position: fixed;
        top: calc(var(--appbar-height) + 10px + env(safe-area-inset-top));
        right: max(10px, env(safe-area-inset-right));
        bottom: auto;
        left: max(10px, env(safe-area-inset-left));
        width: auto;
        min-width: 0;
        max-height: calc(100vh - var(--appbar-height) - 104px - env(safe-area-inset-bottom));
        box-sizing: border-box;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        z-index: 220;
    }

    .appmenu[open]::after {
        content: none;
        display: none;
    }

    .appmenu[open] .appmenu-trigger {
        position: relative;
        z-index: 230;
    }

    .appmenu-link {
        min-height: 48px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .appmenu-link > span:first-child {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        line-height: 1.2;
    }

    .appmenu-link-notice {
        flex: 0 0 auto;
    }

    .pwa-install-button {
        min-height: 32px;
        padding: 0 10px;
        font-size: 12px;
    }

    .pwa-install-nudge {
        display: grid;
        gap: 12px;
        bottom: calc(96px + env(safe-area-inset-bottom));
    }

    .pwa-push-toast {
        display: grid;
        gap: 12px;
        bottom: calc(96px + env(safe-area-inset-bottom));
    }

    .pwa-install-nudge,
    .pwa-push-toast {
        max-height: calc(100vh - 96px - env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .pwa-install-nudge-actions {
        display: grid;
        grid-template-columns: 1fr 1fr 40px;
        width: 100%;
    }

    .pwa-push-toast-actions {
        display: grid;
        grid-template-columns: 1fr 40px;
        width: 100%;
    }

    .pwa-install-nudge-primary,
    .pwa-install-nudge-secondary {
        width: 100%;
        justify-content: center;
    }

    .pwa-push-toast-open {
        width: 100%;
    }

    .module-nav {
        gap: 6px;
    }

    .module-tab,
    .appmenu-trigger {
        min-height: 32px;
        font-size: 12px;
    }

    .module-tab {
        padding: 0 12px;
    }

    .pwa-bottom-nav,
    .is-standalone .pwa-bottom-nav {
        position: fixed;
        left: max(10px, env(safe-area-inset-left));
        right: max(10px, env(safe-area-inset-right));
        bottom: calc(10px + env(safe-area-inset-bottom));
        z-index: 90;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: 6px;
        padding: 7px;
        border: 1px solid rgba(15, 23, 42, 0.10);
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18);
    }

    .is-standalone body::after {
        content: "";
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 89;
        height: calc(28px + env(safe-area-inset-bottom));
        background: #fff;
        pointer-events: none;
    }

    .fc-stage-card,
    .fc-panel-muted {
        padding: 16px;
        border-radius: 14px;
    }

    .fc-upload-dropzone {
        min-height: 170px;
        padding: 28px 20px;
        border-radius: 16px;
    }

    .fc-secondary-dropzone {
        min-height: 64px;
        border-radius: 14px;
        font-size: 16px;
    }

    .fc-active-batch-actions,
    .fc-batch-list-actions {
        width: 100%;
    }

    .fc-active-batch-actions .btn,
    .fc-active-batch-actions .btn2,
    .fc-batch-list-actions .btn,
    .fc-batch-list-actions .btn2 {
        flex: 1 1 auto;
    }

    .fc-batch-list-card {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 12px;
    }

    .fc-batch-list-card img,
    .fc-batch-list-card > div:first-child {
        width: 56px;
        height: 56px;
    }
}

@supports (height: 100dvh) {
    @media (max-width: 979px), (hover: none), (pointer: coarse) {
        .appmenu-panel {
            max-height: calc(100dvh - var(--appbar-height) - 104px - env(safe-area-inset-bottom));
        }

        .pwa-install-nudge,
        .pwa-push-toast {
            max-height: calc(100dvh - 96px - env(safe-area-inset-bottom));
        }
    }
}

@media (max-width: 380px) {
    .appmenu-trigger {
        width: 34px;
        padding: 0;
    }

    .appmenu-trigger-text {
        display: none;
    }
}

/* Professional minimal UI layer
   Keeps the app visually uniform across older page-specific styles. */
:root {
    --bg: #f6f6f8;
    --bg-elevated: #ffffff;
    --card: #ffffff;
    --text: #101114;
    --muted: #6f737c;
    --line: rgba(16, 17, 20, 0.08);
    --line-strong: rgba(16, 17, 20, 0.14);
    --shadow: 0 12px 34px rgba(16, 17, 20, 0.05);
    --shadow2: 0 8px 22px rgba(16, 17, 20, 0.04);
    --shadow-sm: 0 1px 2px rgba(16, 17, 20, 0.03);
    --primary: #f4ad38;
    --primary2: #eba02b;
    --ok: #15803d;
    --bad: #dc2626;
    --warn: #b45309;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius: 18px;
    --radius2: 14px;
}

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

.container {
    max-width: 1160px;
    padding-top: 18px;
}

.appbar {
    background: rgba(246, 246, 248, 0.94);
    border-bottom-color: rgba(16, 17, 20, 0.06);
}

.appbar-inner {
    gap: 8px;
}

.brand-title b,
.surface-title,
.page-header h1,
.hero-panel h1,
.mijn-hero-title,
.keuring-hero-card h1,
.bhv-focus-title,
.taken-hero-title {
    letter-spacing: 0 !important;
}

.page-header,
.app-hero,
.hero-panel,
.taken-hero-panel,
.keuring-hero-card,
.surface.app-hero {
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: var(--shadow) !important;
}

.page-header,
.app-hero {
    padding: 16px !important;
}

.page-header h1,
.hero-panel h1,
.mijn-hero-title,
.keuring-hero-card h1,
.taken-hero-title {
    font-size: clamp(24px, 3.2vw, 34px) !important;
    line-height: 1.08 !important;
}

.page-header p,
.surface-subtitle,
.surface-note,
.hero-panel p,
.mijn-hero-subtitle,
.keuring-note,
.bhv-note {
    color: var(--muted) !important;
    line-height: 1.5;
}

.card,
.surface,
.item,
.list-item,
.filter-panel,
.weekwrap,
.weekcard,
.feed-mini,
.modal-card,
.kpi .k,
.module-card,
.planner-mode-option,
.quick-link,
.mijn-kpi-card,
.mijn-page-button,
.mijn-focus-card,
.mijn-card-list,
.keuring-panel,
.keuring-card,
.keuring-plan-card,
.keuring-history-card,
.keuring-kpi,
.bhv-panel,
.bhv-alert-card,
.bhv-fact,
.melding-card,
.taken-board,
.taken-item {
    border-color: var(--line) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: var(--shadow2) !important;
}

.card-hd,
.surface-header,
.taken-board-header,
.weekcard-hd {
    min-height: 0;
    padding: 16px 18px !important;
    background: #fff !important;
    border-bottom: 1px solid var(--line) !important;
}

.card-bd,
.surface-body {
    padding: 16px !important;
}

.app-section::before,
.accent-card::before,
.accent-item::before,
.mijn-focus-card::before,
.keuring-card::before,
.keuring-plan-card::before,
.keuring-history-card::before,
.taken-item::before {
    width: 3px !important;
    border-radius: 99px !important;
}

.app-section::before,
.accent-card::before {
    inset: 12px auto 12px 8px !important;
}

.app-section,
.accent-card,
.accent-item,
.mijn-focus-card,
.keuring-card,
.keuring-plan-card,
.keuring-history-card,
.taken-item {
    overflow: hidden;
}

.mijn-focus-card,
.keuring-card,
.keuring-plan-card,
.keuring-history-card,
.taken-item {
    padding-left: max(var(--sp-4), 18px);
}

.mijn-focus-card.is-alert,
.mijn-focus-card.is-warn,
.mijn-focus-card.is-primary,
.mijn-focus-card.is-ok,
.mijn-page-button.is-primary,
.mijn-page-button.is-alert,
.mijn-page-button.is-ok,
.keuring-plan-card.is-bad,
.keuring-plan-card.is-warn,
.keuring-plan-card.is-ok,
.keuring-history-card.is-bad,
.keuring-history-card.is-warn,
.keuring-history-card.is-ok,
.keuring-card[data-current-status="goed"],
.keuring-card[data-current-status="niet_goed"],
.keuring-card[data-current-status="nvt"],
.taken-item.is-bad,
.taken-item.is-warn,
.taken-item.is-ok,
.bhv-emergency,
.bhv-focus {
    background: #fff !important;
}

.btn,
.btn-primary,
.btn2,
.btn-secondary,
.btnOutline,
.btnDanger,
.btn-danger,
.qbtn,
.chip,
.badge,
.module-tab,
.module-link,
.seg a,
.segmented a,
.year-select,
.status-pill,
.taken-chip,
.taken-accent-chip,
.keuring-tag,
.keuring-status-badge,
.bhv-status-badge,
.mijn-task-chip,
.pwa-install-button,
.appmenu-trigger {
    border-radius: 12px !important;
    box-shadow: none !important;
    letter-spacing: 0 !important;
}

.btn,
.btn-primary {
    min-height: 42px;
    border-color: var(--primary);
    background: var(--primary);
    color: #111 !important;
    font-weight: 800;
}

.btn:hover,
.btn-primary:hover {
    background: var(--primary2) !important;
    border-color: var(--primary2) !important;
    color: #111 !important;
}

.btn2,
.btn-secondary,
.btnOutline,
.qbtn,
.module-link,
.planner-mode-option {
    background: #fff !important;
    border-color: var(--line) !important;
    color: var(--text) !important;
}

.btn2:hover,
.btn-secondary:hover,
.btnOutline:hover,
.module-link:hover,
.quick-link:hover,
.planner-mode-option:hover {
    border-color: var(--line-strong) !important;
    background: #f9fafb !important;
    transform: none !important;
}

.module-tab.active,
.seg a.active,
.segmented a.active,
.view-toggle .chip.active,
.fc-flow-link.is-active,
.fc-flow-button.is-active {
    border-color: rgba(147, 51, 234, 0.35) !important;
    background: rgba(147, 51, 234, 0.08) !important;
    color: #6b21a8 !important;
}

.chip,
.badge,
.status-pill,
.taken-chip,
.keuring-tag,
.keuring-status-badge,
.mijn-task-chip,
.bhv-status-badge {
    min-height: 28px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    font-weight: 750 !important;
}

.page-kpis,
.mijn-kpi-grid,
.keuring-kpis,
.kpi {
    gap: 10px !important;
}

.page-kpi,
.mijn-kpi-card,
.keuring-kpi,
.kpi .k {
    padding: 14px 16px !important;
}

.page-kpi-value,
.mijn-kpi-card b,
.keuring-kpi b,
.kpi .v {
    font-size: 20px !important;
    letter-spacing: 0 !important;
}

input,
select,
textarea,
.keuring-field input,
.keuring-field textarea,
.keuring-field select,
.bhv-field input,
.bhv-field textarea {
    min-height: 42px !important;
    border-radius: 8px !important;
    border-color: var(--line-strong) !important;
    background: #fff !important;
}

label,
.keuring-field label,
.bhv-field span,
.taken-reassign-field span {
    color: #344054 !important;
    font-weight: 750 !important;
}

.filter-panel summary {
    min-height: 44px !important;
}

.simple-row,
.weekcard-reg,
.mijn-task-row {
    border-radius: 0 !important;
    background: transparent !important;
}

.list,
.taken-list,
.keuring-plan-list,
.keuring-history-list,
.keuring-action-list,
.mijn-card-list .simple-list {
    gap: 8px !important;
}

.mijn-page-button {
    min-height: 108px !important;
    padding: 16px !important;
}

.mijn-page-button-title {
    font-size: 20px !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
}

.mijn-focus-title,
.taken-item-title,
.keuring-card-head h3,
.keuring-plan-card h3,
.keuring-history-card h3,
.bhv-alert-title {
    letter-spacing: 0 !important;
}

.mijn-focus-title,
.taken-item-title {
    font-size: 18px !important;
}

.keuring-hero,
.keuring-grid,
.mijn-main-grid,
.vacation-layout,
.page-stack,
.section-stack {
    gap: 14px !important;
}

.keuring-panel,
.bhv-panel {
    padding: 16px !important;
}

.status-choice span {
    min-height: 44px !important;
    border-radius: 8px !important;
}

.keuring-submit-bar,
.keuring-modal-dialog,
.fc-stage-card,
.fc-panel-muted,
.fc-mobile-dock-nav,
.pwa-install-nudge {
    border-radius: 18px !important;
    box-shadow: var(--shadow) !important;
    background: #fff !important;
}

.keuring-submit-bar button,
.bhv-button,
.pwa-install-nudge-primary {
    border-radius: 12px !important;
    background: var(--primary) !important;
    color: #111 !important;
    box-shadow: none !important;
}

.bhv-button,
.bhv-call-112,
.appbar-bhv-button,
.appbar-bhv-button.is-alarm {
    background: #dc2626 !important;
}

.bhv-warning,
.bhv-notice.error,
.btnDanger,
.btn-danger {
    border-color: rgba(220, 38, 38, 0.22) !important;
    background: #fef2f2 !important;
    color: #991b1b !important;
}

.bhv-notice.success {
    border-color: rgba(21, 128, 61, 0.22) !important;
    background: #f0fdf4 !important;
    color: #166534 !important;
}

.bottom-nav,
.pwa-bottom-nav,
.is-standalone .pwa-bottom-nav,
.fc-mobile-dock-nav {
    border-color: var(--line) !important;
    background: #fff !important;
}

@media (max-width: 979px), (hover: none), (pointer: coarse) {
    .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .page-header,
    .app-hero {
        padding: 14px !important;
    }

    .card-hd,
    .surface-header,
    .taken-board-header,
    .weekcard-hd {
        padding: 12px 14px !important;
    }

    .card-bd,
    .surface-body,
    .keuring-panel,
    .bhv-panel {
        padding: 14px !important;
    }

    .surface-actions,
    .bhv-actions,
    .bhv-primary-actions,
    .bhv-quick-actions,
    .taken-actions {
        display: grid !important;
        grid-template-columns: 1fr;
    }

    .surface-actions .btn,
    .surface-actions .btn2,
    .bhv-actions .btn,
    .bhv-actions .btn2,
    .bhv-button,
    .taken-actions .btn,
    .taken-actions .btn2 {
        width: 100%;
    }
}

@media (min-width: 980px) and (hover: hover) and (pointer: fine) {
    body {
        min-height: 100%;
        padding: 96px 0 0 128px;
        background:
            linear-gradient(90deg, #ffffff 0 128px, transparent 128px),
            var(--bg);
    }

    .appbar {
        position: fixed;
        inset: 0 0 auto 0;
        height: 96px;
        width: auto;
        border: 0;
        border-radius: 0;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: none;
        backdrop-filter: saturate(160%) blur(10px);
    }

    .appbar-inner {
        height: 96px;
        max-width: none;
        padding: 0 34px 0 168px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
    }

    .appbar-primary {
        width: auto;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        flex: 1 1 auto;
    }

    .brand {
        display: flex;
        gap: 14px;
        justify-items: initial;
    }

    .brand-title {
        display: block;
    }

    .logo {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: #fff;
        box-shadow: none;
    }

    .logo img {
        opacity: 1;
    }

    .module-nav-shell {
        position: fixed;
        left: 24px;
        top: 120px;
        bottom: 28px;
        width: 80px;
        display: grid;
        align-content: start;
        gap: 22px;
        overflow-y: auto;
        padding: 0;
    }

    .module-tab {
        position: relative;
        width: 100%;
        min-height: 72px;
        padding: 52px 0 0;
        display: grid;
        place-items: start center;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #4d5159 !important;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.15;
        text-align: center;
        white-space: normal;
        box-shadow: none !important;
    }

    .module-tab::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 50px;
        height: 50px;
        transform: translateX(-50%);
        display: grid;
        place-items: center;
        border: 1px solid rgba(16, 17, 20, 0.07);
        border-radius: 13px;
        background: #fff;
        box-shadow: none;
    }

    .module-tab::after {
        content: "";
        position: absolute;
        top: 13px;
        left: 50%;
        width: 24px;
        height: 24px;
        transform: translateX(-50%);
        background: #5f646d;
        mask: var(--nav-icon-grid) center / 24px 24px no-repeat;
        -webkit-mask: var(--nav-icon-grid) center / 24px 24px no-repeat;
        pointer-events: none;
    }

    .module-tab.active {
        color: #5f2387 !important;
        background: transparent !important;
    }

    .module-tab.active::before {
        border-color: rgba(147, 51, 234, 0.42);
        background: rgba(147, 51, 234, 0.08);
    }

    .module-tab.active::after {
        background: #8b35c9;
    }

    .module-tab[data-nav-key="home"] {
        --nav-icon-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5.5 9.5V21h13V9.5'/%3E%3Cpath d='M9.5 21v-6h5v6'/%3E%3C/svg%3E");
    }

    .module-tab[data-nav-key="calendar"] {
        --nav-icon-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M4 10h16M8 14h3M13 14h3M8 17h3'/%3E%3C/svg%3E");
    }

    .module-tab[data-nav-key="ritten"] {
        --nav-icon-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3zM14 9h3l4 4v3h-7z'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Cpath d='M9 18h6'/%3E%3C/svg%3E");
    }

    .module-tab[data-nav-key="drivers"] {
        --nav-icon-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 19c0-2.2-1.8-4-4-4s-4 1.8-4 4'/%3E%3Ccircle cx='12' cy='8.5' r='3.2'/%3E%3Cpath d='M19 7.5c1.2.8 2 2.1 2 3.6 0 3.5-4 6.9-4 6.9s-1.2-1-2.3-2.5M5 7.5c-1.2.8-2 2.1-2 3.6 0 3.5 4 6.9 4 6.9s1.2-1 2.3-2.5'/%3E%3C/svg%3E");
    }

    .module-tab[data-nav-key="leave"] {
        --nav-icon-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M4 10h16M8 14l2 2 4-4M15 17h1'/%3E%3C/svg%3E");
    }

    .module-tab[data-nav-key="tasks"] {
        --nav-icon-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2.5'/%3E%3Cpath d='m8 12 2.2 2.2L16.5 8M8 17h8'/%3E%3C/svg%3E");
    }

    .module-tab[data-nav-key="tellingen"] {
        --nav-icon-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E");
    }

    .module-tab[data-nav-key="users"] {
        --nav-icon-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20c0-2.2-1.8-4-4-4s-4 1.8-4 4'/%3E%3Ccircle cx='12' cy='9' r='3.5'/%3E%3Cpath d='M20 18c-.2-1.8-1.5-3.1-3.1-3.6M16.5 6.2a3 3 0 0 1 0 5.6'/%3E%3C/svg%3E");
    }

    .module-tab[data-nav-key="clipboard"] {
        --nav-icon-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5h6a2 2 0 0 1 2 2v1H7V7a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M8 6H6a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-2M8 13h8M8 17h5'/%3E%3C/svg%3E");
    }

    .module-tab[data-nav-key="spray"] {
        --nav-icon-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5h4M11 5v4h2V5M9 9h6l1 3v7a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-7l1-3Z'/%3E%3Cpath d='M16 7h3M19 7v4M19 11h-3M5 7h1M3 11h2M5 15h1'/%3E%3C/svg%3E");
    }

    .module-tab[data-nav-key="camera"] {
        --nav-icon-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 6 10 4h4l1.5 2H19a2 2 0 0 1 2 2v9.5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3.5Z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E");
    }

    .module-tab[data-nav-key="settings"] {
        --nav-icon-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v3M12 18v3M4.8 7.2l2.1 2.1M17.1 14.7l2.1 2.1M3 12h3M18 12h3M4.8 16.8l2.1-2.1M17.1 9.3l2.1-2.1'/%3E%3Ccircle cx='12' cy='12' r='3.3'/%3E%3C/svg%3E");
    }

    .module-tab[data-nav-key="bell"] {
        --nav-icon-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 9a6 6 0 0 0-12 0c0 7-3 7-3 7h18s-3 0-3-7'/%3E%3Cpath d='M10 20a2.5 2.5 0 0 0 4 0'/%3E%3C/svg%3E");
    }

    .module-tab[data-nav-key="grid"] {
        --nav-icon-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6' height='6' rx='1.5'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1.5'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1.5'/%3E%3Crect x='14' y='14' width='6' height='6' rx='1.5'/%3E%3C/svg%3E");
    }

    .appbar-actions {
        width: auto;
        margin-top: auto;
        display: flex;
        gap: 10px;
        justify-items: initial;
        flex: 0 0 auto;
    }

    .appbar-meta {
        display: flex !important;
    }

    .pwa-install-button {
        display: inline-flex;
    }

    .appmenu,
    .appmenu-trigger,
    .appbar-bhv-button {
        width: auto;
    }

    .appmenu-trigger,
    .appbar-bhv-button {
        min-height: 40px;
        padding: 0 13px;
        border-radius: 12px !important;
        font-size: 12px;
    }

    .appmenu-trigger::before {
        content: none;
    }

    .appbar-bhv-button {
        font-size: 12px;
        line-height: 1.2;
        text-align: center;
    }

    .appmenu-panel {
        left: auto;
        right: 0;
        bottom: auto;
        top: calc(100% + 10px);
        min-width: 230px;
        border-radius: 18px;
        box-shadow: var(--shadow);
    }

    .container {
        max-width: none;
        min-height: calc(100vh - 96px);
        margin: 0;
        padding: 32px 38px calc(96px + env(safe-area-inset-bottom));
    }

    .appbar + .container {
        padding-top: 32px;
    }

    .page-stack,
    .taken-page,
    .mijn-page,
    .meldingen-page,
    .keuring-page,
    .bhv-page {
        max-width: 980px;
        margin: 0 auto;
        padding: 24px;
        border: 1px solid rgba(16, 17, 20, 0.06);
        border-radius: 30px;
        background: rgba(255, 255, 255, 0.72);
        box-shadow: 0 24px 70px rgba(16, 17, 20, 0.05);
    }

    .surface,
    .card,
    .taken-board,
    .keuring-panel,
    .bhv-panel {
        border-radius: 18px !important;
        box-shadow: none !important;
    }

    .page-header,
    .app-hero,
    .taken-hero-panel,
    .keuring-hero-card {
        border-radius: 20px !important;
        padding: 22px 24px !important;
        box-shadow: none !important;
    }

    .page-header,
    .app-hero,
    .taken-hero-panel,
    .keuring-hero-card,
    .surface,
    .card,
    .taken-board,
    .keuring-panel,
    .bhv-panel {
        border-color: rgba(16, 17, 20, 0.07) !important;
    }

    .page-header h1,
    .taken-hero-title,
    .mijn-hero-title,
    .keuring-hero-card h1 {
        font-size: clamp(22px, 2.5vw, 30px) !important;
        font-weight: 850 !important;
    }

    .surface-title,
    .card-hd b,
    .taken-board-header h2,
    .keuring-panel-header h2 {
        font-size: 16px !important;
        font-weight: 850 !important;
    }

    .page-kpis,
    .mijn-kpi-grid,
    .keuring-kpis,
    .quick-links,
    .mijn-nav-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    }

    .page-kpi,
    .mijn-kpi-card,
    .keuring-kpi,
    .quick-link,
    .mijn-page-button,
    .mijn-focus-card {
        border-radius: 16px !important;
        box-shadow: none !important;
    }

    .quick-link,
    .mijn-page-button {
        min-height: auto !important;
        padding: 16px !important;
        align-content: start;
    }

    .quick-link-title,
    .mijn-page-button-title {
        font-size: 16px !important;
        font-weight: 850 !important;
    }

    .page-kpi-label,
    .quick-link-kicker,
    .mijn-page-button-kicker,
    .mijn-focus-label,
    .section-kicker {
        letter-spacing: 0 !important;
        text-transform: none !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #8a8e96 !important;
    }

    .page-kpi-value,
    .mijn-kpi-card b,
    .keuring-kpi b {
        font-size: 18px !important;
        font-weight: 850 !important;
    }

    .btn,
    .btn-primary,
    .btn2,
    .btn-secondary,
    .btnOutline {
        min-height: 42px !important;
        border-radius: 10px !important;
        font-weight: 750 !important;
    }

    input,
    select,
    textarea {
        border-radius: 10px !important;
        background: #fbfbfc !important;
    }
}

@media (min-width: 980px) and (hover: hover) and (pointer: fine) {
    body {
        padding-left: 128px;
        background: #f5f5f7;
    }

    body::before {
        content: "";
        position: fixed;
        z-index: 4;
        inset: 96px auto 0 0;
        width: 128px;
        background: #f0f0f3;
        border-right: 1px solid rgba(16, 17, 20, 0.05);
        pointer-events: none;
    }

    .appbar {
        z-index: 60;
        height: 96px;
        background: #fff;
        border-bottom: 1px solid rgba(16, 17, 20, 0.06);
    }

    .appbar::after {
        content: "";
        position: absolute;
        left: 404px;
        top: 28px;
        bottom: 28px;
        width: 1px;
        background: rgba(16, 17, 20, 0.08);
    }

    .appbar--compact-title::after {
        display: none;
    }

    .appbar--compact-title {
        height: 80px;
    }

    .appbar--compact-title .appbar-inner {
        height: 80px;
    }

    .appbar--compact-title + .bhv-alarm-banner + .container,
    .appbar--compact-title + .container {
        padding-top: 32px;
    }

    .appbar-inner {
        padding-left: 158px;
        padding-right: 42px;
    }

    .logo {
        position: relative;
        border: 1px solid rgba(16, 17, 20, 0.07);
        background: #fff;
        padding: 4px;
    }

    .brand-title b {
        font-size: 14px;
        font-weight: 850;
        color: #17181b;
    }

    .brand-title span {
        margin-top: 5px;
        font-size: 13px;
        color: #6d7078;
    }

    .module-nav-shell {
        z-index: 50;
        left: 24px;
        top: 128px;
        bottom: 32px;
        width: 80px;
        gap: 22px;
    }

    .module-tab {
        min-height: 76px;
        padding-top: 54px;
        color: #555962 !important;
        font-size: 12px;
    }

    .module-tab > span {
        width: 100%;
        padding: 0 2px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        white-space: normal;
        line-height: 1.12;
    }

    .module-tab::before {
        width: 52px;
        height: 52px;
        border-radius: 12px;
        border-color: rgba(16, 17, 20, 0.06);
        background-color: #fff;
    }

    .module-tab::after {
        top: 14px;
    }

    .module-tab.active::before {
        border-color: rgba(150, 82, 186, 0.48);
        background: rgba(150, 82, 186, 0.08);
    }

    .module-tab.active {
        color: #5f2387 !important;
    }

    .container {
        display: grid;
        justify-items: center;
        padding: 48px 42px calc(96px + env(safe-area-inset-bottom));
    }

    .page-stack,
    .taken-page,
    .mijn-page,
    .meldingen-page,
    .keuring-page,
    .bhv-page {
        width: min(100%, 760px);
        max-width: 760px;
        gap: 0 !important;
        padding: 0;
        border: 1px solid rgba(16, 17, 20, 0.08);
        border-radius: 22px;
        background: #fff;
        box-shadow: 0 18px 46px rgba(16, 17, 20, 0.07);
        overflow: hidden;
    }

    .planner-page,
    .vacation-layout,
    .keuring-page {
        width: min(100%, 1080px);
        max-width: 1080px;
    }

    .container.page-stack,
    .container.planner-page,
    .container.vacation-layout {
        margin-top: 48px;
        margin-bottom: calc(96px + env(safe-area-inset-bottom));
    }

    .page-stack > .page-header,
    .mijn-page > .app-hero,
    .taken-page > .taken-hero-panel,
    .keuring-page .keuring-hero-card,
    .bhv-page > .page-header {
        border: 0 !important;
        border-bottom: 1px solid rgba(16, 17, 20, 0.07) !important;
        border-radius: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
        text-align: center;
    }

    .page-stack > .surface,
    .page-stack > .card,
    .page-stack > details.card,
    .taken-page > .taken-board,
    .mijn-page > .surface,
    .mijn-page > details.surface,
    .meldingen-page > .surface,
    .keuring-page .keuring-panel,
    .bhv-page > .bhv-panel,
    .bhv-page > .bhv-alert-card {
        border: 0 !important;
        border-top: 1px solid rgba(16, 17, 20, 0.07) !important;
        border-radius: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
    }

    .page-stack > .page-header + .surface,
    .page-stack > .page-header + .card,
    .taken-page > .taken-hero-panel + .taken-board,
    .mijn-page > .app-hero + .mijn-main-grid,
    .meldingen-page > .page-header + .surface,
    .bhv-page > .page-header + .bhv-panel {
        border-top: 0 !important;
    }

    .surface-header,
    .card-hd,
    .taken-board-header,
    .keuring-panel-header {
        padding: 22px 26px 16px !important;
        border-bottom-color: rgba(16, 17, 20, 0.07) !important;
    }

    .surface-body,
    .card-bd,
    .taken-list {
        padding: 24px 26px !important;
    }

    .page-header h1,
    .taken-hero-title,
    .mijn-hero-title,
    .keuring-hero-card h1 {
        font-size: 20px !important;
        font-weight: 850 !important;
        line-height: 1.2 !important;
    }

    .page-header p,
    .taken-hero-copy,
    .mijn-hero-subtitle,
    .surface-subtitle {
        font-size: 14px !important;
    }

    .page-kpis,
    .mijn-kpi-grid,
    .keuring-kpis {
        display: grid;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    .page-kpi,
    .mijn-kpi-card,
    .keuring-kpi,
    .quick-link,
    .mijn-page-button,
    .mijn-focus-card,
    .taken-item,
    .keuring-plan-card,
    .keuring-history-card,
    .bhv-alert-card {
        border-radius: 14px !important;
        border-color: rgba(16, 17, 20, 0.07) !important;
        box-shadow: none !important;
    }

    .page-kpi,
    .mijn-kpi-card,
    .keuring-kpi {
        background: #fbfbfc !important;
    }

    .btn,
    .btn-primary {
        min-height: 46px !important;
        border-radius: 10px !important;
        background: #f4ad38 !important;
        border-color: #f4ad38 !important;
    }

    .btn2,
    .btn-secondary,
    .btnOutline {
        border-radius: 10px !important;
        background: #fff !important;
    }
}

/* iOS zoomt automatisch in op focusbare form fields onder 16px. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea,
.ts-control,
.ts-control input,
.plugin-dropdown_input .dropdown-input {
    font-size: 16px !important;
}

/* Voorkom dat formulierdelen op kleine schermen buiten het viewport duwen. */
.container,
.page-stack,
.surface,
.card,
.app-section,
.card-bd,
.surface-body,
form,
fieldset,
.page-header-main,
.page-header-actions,
.card-hd > *,
.surface-header > *,
.ts-wrapper,
.ts-control,
.ts-dropdown {
    min-width: 0;
    max-width: 100%;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea,
.ts-wrapper,
.ts-control {
    max-width: 100%;
}

.btn,
.btn2,
.btn-primary,
.btn-secondary,
.btnOutline,
button {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .page-header,
    .page-header-actions,
    .surface-header,
    .card-hd,
    .settings-actions,
    .bezoek-actions,
    .toolbar,
    .topbar-actions {
        min-width: 0;
        max-width: 100%;
    }

    .page-header-actions,
    .settings-actions,
    .bezoek-actions {
        width: 100%;
    }

    .page-header-actions > *,
    .settings-actions > *,
    .bezoek-actions > * {
        min-width: 0;
    }
}

.leave-request-panel .card-bd {
    padding-top: 18px !important;
}

.leave-request-summary {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center !important;
    gap: 12px !important;
}

.leave-request-titleblock {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.leave-request-titleblock b {
    font-size: 16px !important;
    line-height: 1.2;
}

.leave-request-summary .collapse-icon {
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--muted);
    font-size: 14px;
    line-height: 1;
}

.leave-request-form {
    display: grid;
    gap: 14px;
}

.leave-request-form .form-grid {
    gap: 14px;
}

.leave-mode-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fafafa;
}

.leave-mode-label {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.leave-request-panel .planner-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    width: min(320px, 100%);
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
}

.leave-request-panel .planner-mode-option {
    min-height: 36px;
    padding: 7px 10px;
    border-radius: 8px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center;
}

.leave-request-panel .planner-mode-heading {
    font-size: 13px;
    font-weight: 850;
}

.leave-request-panel .planner-mode-option.is-active {
    background: rgba(244, 173, 56, 0.18) !important;
    color: #5f3b00 !important;
}

.leave-request-panel .row2 {
    gap: 12px;
}

.leave-request-panel .align-end {
    align-self: center;
}

.leave-request-panel .time-presets {
    padding: 4px 0 0;
}

.leave-request-panel .time-presets .qbtn {
    min-width: 104px;
    min-height: 38px;
}

.leave-request-panel .time-presets .qbtn.is-active {
    border-color: rgba(244, 173, 56, 0.55) !important;
    background: rgba(244, 173, 56, 0.18) !important;
    color: #5f3b00 !important;
}

.leave-advanced {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fafafa;
    overflow: hidden;
}

.leave-advanced summary {
    list-style: none;
    cursor: pointer;
    padding: 11px 12px;
    font-size: 13px;
    font-weight: 850;
}

.leave-advanced summary::-webkit-details-marker {
    display: none;
}

.leave-advanced summary::marker {
    content: "";
}

.leave-advanced .row2 {
    padding: 0 12px 12px;
}

@media (max-width: 640px) {
    .leave-request-summary {
        padding: 14px !important;
    }

    .leave-mode-row {
        display: grid;
        gap: 8px;
    }

    .leave-request-panel .planner-mode-grid {
        width: 100%;
    }
}

.vacation-layout .app-section.is-team::before,
.vacation-layout .accent-item::before,
.vacation-layout .accent-card::before {
    display: none !important;
}

.vacation-layout .app-section.is-team .card-hd,
.vacation-layout .accent-card.is-team {
    background: #fff !important;
}

.vacation-layout .leave-row {
    border-left: 0 !important;
    background: #fff !important;
}

.vacation-layout .leave-row .range {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.vacation-layout .leave-row.is-own-leave {
    border-color: var(--line) !important;
    background: #fff !important;
    box-shadow: var(--shadow2) !important;
}

.vacation-layout .own-label {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    margin-left: 8px;
    padding: 0 7px;
    border: 1px solid rgba(43, 108, 255, 0.24);
    border-radius: 999px;
    background: rgba(43, 108, 255, 0.08);
    color: #1247d6;
    font-size: 11px;
    font-weight: 850;
    vertical-align: middle;
}

.vacation-layout .weekgrid tr.is-own-leave .namecol,
.vacation-layout .weekboard-grid tr.is-own-leave .namecol {
    background: #f8fafc !important;
    box-shadow: none;
}

.vacation-layout .weekgrid tr.is-own-leave .weekcell,
.vacation-layout .weekboard-grid tr.is-own-leave .weekboard-cell {
    background: #f8fafc !important;
}

.vacation-layout .weekcard.is-own-leave {
    border-color: var(--line) !important;
    background: #fff !important;
    box-shadow: var(--shadow2) !important;
}

.vacation-layout .weekcard.is-own-leave .weekcard-hd {
    background: #f8fafc !important;
}

.vacation-layout .type-chip {
    border-color: rgba(16, 24, 40, 0.10) !important;
    background: #f8fafc !important;
    color: #344054;
}

.vacation-layout .type-chip.type-vakantie {
    border-color: rgba(43, 108, 255, 0.18) !important;
    background: rgba(239, 246, 255, 0.82) !important;
    color: #1d4ed8;
}

.vacation-layout .type-chip.type-zakelijk {
    border-color: rgba(245, 158, 11, 0.18) !important;
    background: rgba(255, 251, 235, 0.82) !important;
    color: #92400e;
}

.vacation-layout .type-chip.type-doktersbezoek {
    border-color: rgba(16, 185, 129, 0.16) !important;
    background: rgba(236, 253, 245, 0.78) !important;
    color: #047857;
}

.vacation-layout .type-chip.type-anders {
    border-color: rgba(102, 112, 133, 0.18) !important;
    background: rgba(248, 250, 252, 0.92) !important;
    color: #475467;
}

.vacation-layout .dot.v {
    background: rgba(43, 108, 255, 0.48);
    border-color: rgba(43, 108, 255, 0.22);
}

.vacation-layout .dot.z {
    background: rgba(245, 158, 11, 0.48);
    border-color: rgba(245, 158, 11, 0.22);
}

.vacation-layout .dot.d {
    background: rgba(16, 185, 129, 0.46);
    border-color: rgba(16, 185, 129, 0.20);
}

.vacation-layout .dot.a {
    background: rgba(102, 112, 133, 0.36);
    border-color: rgba(102, 112, 133, 0.18);
}

/* Calm accent treatment: no colored content stripes, use chips and labels for meaning. */
.app-hero,
.app-hero.is-planning,
.app-hero.is-team,
.app-hero.is-admin,
.app-hero.is-photo {
    border-color: var(--line) !important;
    background: #fff !important;
}

.app-section::before,
.accent-card::before,
.accent-item::before,
.mijn-focus-card::before,
.keuring-card::before,
.keuring-plan-card::before,
.keuring-history-card::before,
.taken-item::before,
.msg::before,
.fc-stage-card::before,
.fc-panel-muted::before,
.fc-batch-list-card::before {
    display: none !important;
    content: none !important;
}

.accent-item,
.mijn-task-row,
.planning-main-task,
.planning-team-task-row {
    border-left: 0 !important;
}

.app-section.is-planning .card-hd,
.app-section.is-team .card-hd,
.app-section.is-action .card-hd,
.app-section.is-admin .card-hd,
.app-section.is-photo .card-hd,
.accent-card.is-planning,
.accent-card.is-team,
.accent-card.is-action,
.accent-card.is-admin,
.accent-card.is-photo,
.fc-stage-card.is-batch,
.fc-stage-card.is-upload,
.fc-stage-card.is-gallery,
.fc-panel-muted.is-upload {
    border-color: var(--line) !important;
    background: #fff !important;
}

.accent-item.accent-type-vakantie,
.accent-item.accent-type-zakelijk,
.accent-item.accent-type-doktersbezoek,
.accent-item.accent-type-anders,
.planning-main-task,
.planning-team-task-row {
    border-color: var(--line) !important;
    background: #fff !important;
}

.vacation-layout .app-section.is-team::before,
.vacation-layout .accent-item::before,
.vacation-layout .accent-card::before {
    display: none !important;
    content: none !important;
}

.vacation-layout .leave-row,
.vacation-layout .leave-row.is-own-leave,
.vacation-layout .weekcard.is-own-leave {
    border-left: 0 !important;
    border-color: var(--line) !important;
    background: #fff !important;
    box-shadow: var(--shadow2) !important;
}

.vacation-layout .weekgrid tr.is-own-leave .namecol,
.vacation-layout .weekgrid tr.is-own-leave .weekcell,
.vacation-layout .weekboard-grid tr.is-own-leave .namecol,
.vacation-layout .weekboard-grid tr.is-own-leave .weekboard-cell,
.vacation-layout .weekcard.is-own-leave .weekcard-hd {
    background: #f8fafc !important;
    box-shadow: none !important;
}

.vacation-layout .own-label {
    border-color: var(--line) !important;
    background: #f8fafc !important;
    color: var(--text) !important;
}

.planner-page #teamverlof {
    scroll-margin-top: calc(var(--appbar-height) + 20px);
}

.planner-page .leave-item-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.planner-page .leave-row-main {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.planner-page .leave-row-person {
    color: var(--text);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.25;
}

.planner-page .leave-row-period {
    color: var(--text);
    font-size: 14px;
    font-weight: 750;
    line-height: 1.35;
}

.planner-page .leave-row-meta,
.planner-page .leave-row-note {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.planner-page .leave-row-note {
    overflow-wrap: anywhere;
}

.planner-page .accent-item.is-own-leave {
    border-color: rgba(244, 173, 56, 0.42) !important;
    background: #fffaf1 !important;
}

.planner-page .accent-item.is-own-leave .status-pill {
    border-color: rgba(244, 173, 56, 0.42) !important;
    background: #fff4d8 !important;
    color: #7a4a06 !important;
}

.vacation-layout .weekgrid tr.is-own-leave .namecol,
.vacation-layout .weekgrid tr.is-own-leave .weekcell,
.vacation-layout .weekboard-grid tr.is-own-leave .namecol,
.vacation-layout .weekboard-grid tr.is-own-leave .weekboard-cell,
.vacation-layout .weekcard.is-own-leave,
.vacation-layout .weekcard.is-own-leave .weekcard-hd {
    border-color: rgba(244, 173, 56, 0.36) !important;
    background: #fffaf1 !important;
}

.vacation-layout .own-label {
    border-color: rgba(244, 173, 56, 0.42) !important;
    background: #fff4d8 !important;
    color: #7a4a06 !important;
}

.floraclick-app .fc-active-batch-notice,
.floraclick-app .fc-batch-list-card.is-open,
.floraclick-app .fc-batch-list-card.is-closed,
.floraclick-app .fc-batch-list-card.is-closing {
    border-color: var(--line) !important;
    background: #fff !important;
}

.floraclick-app .fc-batch-status-row {
    color: var(--muted) !important;
    letter-spacing: 0 !important;
}

.floraclick-app .fc-batch-status-dot {
    background: #9ca3af !important;
}

/* Foto app: make the workflow feel like the rest of the personnel app. */
.floraclick-app {
    --fc-ink: #111827;
    --fc-primary: #f4ad38;
    --fc-primary-hover: #d98a15;
}

.fc-flow-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
}

.fc-flow-step {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f8fafc;
    color: var(--muted);
}

.fc-flow-step span {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    color: inherit;
    font-size: 11px;
    font-weight: 900;
}

.fc-flow-step b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.1;
}

.fc-flow-step.is-active {
    border-color: rgba(17, 24, 39, 0.28);
    background: #fff;
    color: var(--fc-ink);
}

.fc-flow-step.is-complete span {
    border-color: var(--fc-ink);
    background: var(--fc-ink);
    color: #fff;
}

.fc-flow-step.is-next {
    border-style: dashed;
}

.floraclick-app .fc-stage-card,
.floraclick-app .fc-panel-muted,
.floraclick-app .fc-active-batch-notice,
.floraclick-app .fc-modal-card {
    border-radius: 12px !important;
    border-color: var(--line) !important;
    background: #fff !important;
    box-shadow: var(--shadow2) !important;
}

.floraclick-app .fc-flow-button,
.floraclick-app .fc-active-batch-actions .btn,
.floraclick-app .fc-active-batch-actions .btn2,
.floraclick-app .fc-batch-list-actions .btn,
.floraclick-app .fc-batch-list-actions .btn2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.floraclick-app .btn-primary,
.floraclick-app .btn.btn-primary {
    border-color: var(--fc-primary) !important;
    background: var(--fc-primary) !important;
    color: #111827 !important;
    box-shadow: var(--shadow2) !important;
}

.floraclick-app .btn-primary:hover,
.floraclick-app .btn.btn-primary:hover {
    border-color: var(--fc-primary-hover) !important;
    background: var(--fc-primary-hover) !important;
}

#setup-icon {
    border: 1px solid var(--line) !important;
    background: #f8fafc !important;
    color: var(--fc-ink) !important;
}

#setup-submit-btn {
    border: 1px solid var(--fc-primary) !important;
    border-radius: 10px !important;
    background: var(--fc-primary) !important;
    color: #111827 !important;
    box-shadow: var(--shadow2) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

#setup-submit-btn:hover {
    border-color: var(--fc-primary-hover) !important;
    background: var(--fc-primary-hover) !important;
}

.fc-batch-status-row {
    color: var(--muted) !important;
}

.fc-batch-status-dot,
.fc-upload-status-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--fc-ink);
}

.fc-batch-pill.is-open,
.fc-upload-batch-state,
.fc-batch-pill.is-closed {
    border: 1px solid var(--line);
    background: #f8fafc !important;
    color: var(--text) !important;
}

.fc-batch-pill.is-closing {
    border: 1px solid rgba(245, 158, 11, 0.28);
    background: #fffbeb !important;
    color: #b45309 !important;
}

.fc-upload-dropzone {
    border: 1px solid rgba(17, 24, 39, 0.14);
    border-radius: 12px !important;
    background: var(--fc-ink) !important;
    box-shadow: var(--shadow2);
}

.fc-upload-dropzone:hover {
    background: #0f172a !important;
}

.fc-secondary-dropzone,
.fc-icon-btn,
.fc-empty-state {
    border-radius: 10px !important;
}

.fc-finish-batch-btn {
    border-color: var(--fc-ink) !important;
    background: var(--fc-ink) !important;
    color: #fff !important;
    box-shadow: var(--shadow2) !important;
}

.fc-finish-batch-btn:hover {
    background: #0f172a !important;
}

.fc-finish-batch-btn:disabled,
.fc-finish-batch-btn.is-disabled {
    border-color: var(--line) !important;
    background: #f8fafc !important;
    color: var(--muted) !important;
    box-shadow: none !important;
    cursor: default !important;
}

.floraclick-app .fc-finish-floating {
    bottom: calc(18px + env(safe-area-inset-bottom));
    width: min(448px, calc(100vw - 28px));
    max-width: calc(100vw - 28px);
    box-sizing: border-box;
}

@media (max-width: 1023px) {
    .floraclick-app .fc-finish-floating {
        display: none;
    }
}

.fc-mobile-nav-btn-center {
    background: var(--fc-ink) !important;
}

.fc-mobile-nav-btn-center.is-active {
    background: #0f172a !important;
}

.fc-mobile-nav-btn-save {
    color: var(--fc-ink) !important;
}

.fc-mobile-nav-btn-save.is-active {
    background: #f8fafc !important;
    color: var(--fc-ink) !important;
}

#progress-bar {
    background: var(--fc-ink) !important;
}

.floraclick-app .ts-dropdown .active {
    background-color: #f8fafc !important;
    color: var(--fc-ink) !important;
}

/* Android/PWA navigation guard: keep touch devices in the app-style navigation. */
@media (max-width: 979px), (hover: none) and (pointer: coarse) {
    body {
        padding-left: 0 !important;
        padding-top: 0 !important;
        background: var(--bg) !important;
    }

    body::before {
        content: none !important;
        display: none !important;
    }

    .appbar {
        position: sticky !important;
        top: 0 !important;
        height: auto !important;
        width: auto !important;
    }

    .appbar::after {
        content: none !important;
        display: none !important;
    }

    .appbar-inner {
        height: auto !important;
        max-width: 1120px !important;
        padding: calc(10px + env(safe-area-inset-top)) 14px 10px !important;
        display: grid !important;
        gap: 8px !important;
    }

    .appbar-primary {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    .brand {
        min-width: 0;
    }

    .brand-title {
        min-width: 0;
    }

    .brand-title b,
    .brand-title span {
        max-width: 58vw;
    }

    .appbar-actions {
        flex: 0 0 auto !important;
        gap: 6px !important;
    }

    .appbar-meta {
        display: none !important;
    }

    .module-nav-shell {
        display: none !important;
    }

    .container {
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-bottom: calc(98px + env(safe-area-inset-bottom)) !important;
        display: block !important;
        justify-items: initial !important;
    }

    .container.page-stack,
    .container.planner-page,
    .container.vacation-layout {
        margin-top: 0 !important;
        margin-bottom: calc(98px + env(safe-area-inset-bottom)) !important;
    }

    .appmenu-panel {
        position: fixed !important;
        top: calc(var(--appbar-height) + 10px + env(safe-area-inset-top)) !important;
        right: max(10px, env(safe-area-inset-right)) !important;
        bottom: auto !important;
        left: max(10px, env(safe-area-inset-left)) !important;
        width: auto !important;
        min-width: 0 !important;
        max-height: calc(100vh - var(--appbar-height) - 106px - env(safe-area-inset-bottom)) !important;
        max-height: calc(100dvh - var(--appbar-height) - 106px - env(safe-area-inset-bottom)) !important;
        padding: 10px !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 18px !important;
        box-shadow: 0 18px 46px rgba(15, 23, 42, 0.16) !important;
        z-index: 220 !important;
    }

    .appmenu-section:first-child {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .appmenu-section:first-child .appmenu-label {
        grid-column: 1 / -1;
    }

    .appmenu-section:first-child .appmenu-link {
        position: relative;
        min-width: 0;
        min-height: 82px;
        padding: 10px 8px;
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        align-content: center;
        gap: 7px;
        text-align: center;
    }

    .appmenu-section:first-child .appmenu-link::before {
        flex-basis: auto;
        width: 36px;
        height: 36px;
        border: 1px solid var(--line);
        border-radius: 11px;
        background-color: #f8fafc;
        background-size: 21px 21px;
    }

    .appmenu-section:first-child .appmenu-link > span:first-child {
        max-width: 100%;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 12px;
        line-height: 1.15;
    }

    .appmenu-section:first-child .appmenu-link-notice {
        position: absolute;
        top: 7px;
        right: 7px;
        margin: 0;
    }

    .appmenu-section:not(:first-child) .appmenu-link {
        min-height: 48px;
    }

    .appmenu-section:not(:first-child) .appmenu-link > span:first-child {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        line-height: 1.2;
    }

    .pwa-bottom-nav,
    .is-standalone .pwa-bottom-nav {
        position: fixed !important;
        left: max(10px, env(safe-area-inset-left)) !important;
        right: max(10px, env(safe-area-inset-right)) !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        z-index: 90 !important;
        display: grid !important;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: 6px;
        padding: 7px;
        border: 1px solid rgba(15, 23, 42, 0.10);
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18);
    }
}

html.is-android body {
    padding-left: 0 !important;
    padding-top: 0 !important;
    background: var(--bg) !important;
}

html.is-android body::before,
html.is-android .appbar::after {
    content: none !important;
    display: none !important;
}

html.is-android .module-nav-shell {
    display: none !important;
}

html.is-android .pwa-bottom-nav {
    position: fixed !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    z-index: 90 !important;
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 7px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18);
}

html.is-android .appbar {
    position: sticky !important;
    top: 0 !important;
    height: auto !important;
    width: auto !important;
}

html.is-android .appbar-inner {
    height: auto !important;
    max-width: 1120px !important;
    padding: calc(10px + env(safe-area-inset-top)) 14px 10px !important;
    display: grid !important;
    gap: 8px !important;
}

html.is-android .appbar-primary {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

html.is-android .brand,
html.is-android .brand-title {
    min-width: 0;
}

html.is-android .brand-title b,
html.is-android .brand-title span {
    max-width: 58vw;
}

html.is-android .appbar-actions {
    flex: 0 0 auto !important;
    gap: 6px !important;
}

html.is-android .appbar-meta {
    display: none !important;
}

html.is-android .container {
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: calc(98px + env(safe-area-inset-bottom)) !important;
    display: block !important;
    justify-items: initial !important;
}

html.is-android .appmenu-panel {
    position: fixed !important;
    top: calc(var(--appbar-height) + 10px + env(safe-area-inset-top)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    bottom: auto !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    width: auto !important;
    min-width: 0 !important;
    max-height: calc(100vh - var(--appbar-height) - 106px - env(safe-area-inset-bottom)) !important;
    max-height: calc(100dvh - var(--appbar-height) - 106px - env(safe-area-inset-bottom)) !important;
    padding: 10px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.16) !important;
    z-index: 220 !important;
}

html.is-android .appmenu-section:first-child {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

html.is-android .appmenu-section:first-child .appmenu-label {
    grid-column: 1 / -1;
}

html.is-android .appmenu-section:first-child .appmenu-link {
    position: relative;
    min-width: 0;
    min-height: 82px;
    padding: 10px 8px;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: center;
    gap: 7px;
    text-align: center;
}

html.is-android .appmenu-section:first-child .appmenu-link::before {
    flex-basis: auto;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background-color: #f8fafc;
    background-size: 21px 21px;
}

html.is-android .appmenu-section:first-child .appmenu-link > span:first-child {
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 12px;
    line-height: 1.15;
}

html.is-android .appmenu-section:first-child .appmenu-link-notice {
    position: absolute;
    top: 7px;
    right: 7px;
    margin: 0;
}

html.is-android .appmenu-section:not(:first-child) .appmenu-link {
    min-height: 48px;
}

html.is-android .appmenu-section:not(:first-child) .appmenu-link > span:first-child {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    line-height: 1.2;
}

@media (max-width: 979px), (hover: none), (pointer: coarse) {
    .floraclick-app .pwa-bottom-nav {
        display: none !important;
    }

    .floraclick-app .fc-mobile-dock {
        z-index: 95;
    }

    .floraclick-app .container {
        padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
    }
}

html.is-android .floraclick-app .pwa-bottom-nav {
    display: none !important;
}

html.is-android .floraclick-app .fc-mobile-dock {
    z-index: 95;
}

html.is-standalone body.floraclick-app::after {
    content: none !important;
    display: none !important;
}

/* Readable app menu: mobile uses one clear sheet, desktop labels get enough room. */
@media (max-width: 979px), (hover: none), (pointer: coarse) {
    .appmenu-panel {
        top: auto !important;
        right: max(10px, env(safe-area-inset-right)) !important;
        bottom: calc(88px + env(safe-area-inset-bottom)) !important;
        left: max(10px, env(safe-area-inset-left)) !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100vh - 118px - env(safe-area-inset-bottom)) !important;
        padding: 12px !important;
        box-sizing: border-box !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .appmenu-section,
    .appmenu-section:first-child {
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .appmenu-section:first-child .appmenu-label {
        grid-column: auto !important;
    }

    .appmenu-link,
    .appmenu-section:first-child .appmenu-link,
    .appmenu-section:not(:first-child) .appmenu-link {
        min-height: 52px !important;
        padding: 8px 10px !important;
        display: flex !important;
        width: 100% !important;
        box-sizing: border-box !important;
        grid-template-columns: none !important;
        align-items: center !important;
        justify-content: flex-start !important;
        justify-items: initial !important;
        align-content: center !important;
        gap: 10px !important;
        text-align: left !important;
    }

    .appmenu-link::before,
    .appmenu-section:first-child .appmenu-link::before {
        flex: 0 0 34px !important;
        width: 34px !important;
        height: 34px !important;
        border-radius: 10px !important;
        background-size: 20px 20px !important;
    }

    .appmenu-link > span:first-child,
    .appmenu-section:first-child .appmenu-link > span:first-child,
    .appmenu-section:not(:first-child) .appmenu-link > span:first-child {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
    }

    .appmenu-link-notice,
    .appmenu-section:first-child .appmenu-link-notice {
        position: static !important;
        margin: 0 0 0 auto !important;
        flex: 0 0 auto !important;
    }

    .floraclick-app #upload-plant-name,
    .floraclick-app .fc-flow-step b,
    .floraclick-app .fc-batch-list-head h3 {
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
}

@supports (height: 100dvh) {
    @media (max-width: 979px), (hover: none), (pointer: coarse) {
        .appmenu-panel {
            max-height: calc(100dvh - 118px - env(safe-area-inset-bottom)) !important;
        }
    }
}

html.is-android .appmenu-panel {
    top: auto !important;
    bottom: calc(88px + env(safe-area-inset-bottom)) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 118px - env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

html.is-android .appmenu-section,
html.is-android .appmenu-section:first-child {
    min-width: 0 !important;
    grid-template-columns: 1fr !important;
}

html.is-android .appmenu-link,
html.is-android .appmenu-section:first-child .appmenu-link,
html.is-android .appmenu-section:not(:first-child) .appmenu-link {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 52px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

html.is-android .appmenu-link > span:first-child,
html.is-android .appmenu-section:first-child .appmenu-link > span:first-child,
html.is-android .appmenu-section:not(:first-child) .appmenu-link > span:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

@media (max-width: 979px), (hover: none), (pointer: coarse) {
    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    html.has-open-appmenu,
    html.has-open-appmenu body {
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    .appmenu-link span,
    .pwa-bottom-link span,
    .module-tab span {
        min-width: 0;
    }

    .appbar,
    .appbar-inner,
    .container,
    .page-stack,
    .page-header,
    .card,
    .card-hd,
    .card-bd,
    .surface,
    .app-section,
    .accent-card,
    .mijn-page,
    .mijn-workflow-grid,
    .mijn-workflow-card,
    .mijn-news-list,
    .mijn-news-item,
    .simple-row,
    .item,
    .itemTop,
    .list,
    .planner-page,
    .vacation-layout,
    .floraclick-shell,
    .floraclick-app .fc-stage-card,
    .floraclick-app .fc-panel-muted,
    .floraclick-app .fc-active-batch-notice,
    .floraclick-app .fc-batch-list-card {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .card-hd,
    .simple-row,
    .itemTop,
    .mijn-status-callout,
    .fc-batch-list-head {
        flex-wrap: wrap;
    }

    .surface-title,
    .page-header h1,
    .card-hd b,
    .simple-row-title,
    .simple-row-meta,
    .range,
    .meta,
    .fc-batch-list-head h3,
    .fc-batch-list-meta {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .pwa-bottom-nav,
    .is-standalone .pwa-bottom-nav {
        box-sizing: border-box !important;
        max-width: calc(100vw - 20px) !important;
    }
}

/* Final mobile menu shape: one complete, readable sheet. */
@media (max-width: 979px), (hover: none), (pointer: coarse) {
    html.has-open-appmenu .appbar {
        z-index: 240 !important;
    }

    .pwa-bottom-nav,
    .is-standalone .pwa-bottom-nav {
        grid-template-columns: none !important;
        grid-auto-flow: column !important;
        grid-auto-columns: minmax(0, 1fr) !important;
        width: auto !important;
        max-width: calc(100vw - 20px) !important;
        overflow: hidden !important;
    }

    .pwa-bottom-link {
        min-width: 0 !important;
        padding: 7px 4px !important;
        overflow: hidden !important;
    }

    .pwa-bottom-link > span:first-child,
    .pwa-bottom-label {
        max-width: 100% !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        font-size: 11.5px !important;
        line-height: 1.08 !important;
    }

    .appmenu-panel {
        top: calc(var(--appbar-height) + 8px + env(safe-area-inset-top)) !important;
        right: max(10px, env(safe-area-inset-right)) !important;
        bottom: calc(84px + env(safe-area-inset-bottom)) !important;
        left: max(10px, env(safe-area-inset-left)) !important;
        width: auto !important;
        max-width: calc(100vw - 20px) !important;
        max-height: none !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 12px !important;
        border-radius: 16px !important;
        box-shadow: 0 18px 46px rgba(15, 23, 42, 0.16) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        z-index: 280 !important;
    }

    .appmenu-label {
        padding: 0 2px !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        font-size: 12px !important;
        font-weight: 800 !important;
    }

    .appmenu-section,
    .appmenu-section:first-child {
        display: grid !important;
        grid-template-columns: 1fr !important;
        min-width: 0 !important;
        gap: 6px !important;
    }

    .appmenu-link,
    .appmenu-section:first-child .appmenu-link,
    .appmenu-section:not(:first-child) .appmenu-link {
        width: 100% !important;
        min-height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        padding: 8px 10px !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }

    .appmenu-link::before,
    .appmenu-section:first-child .appmenu-link::before {
        flex: 0 0 34px !important;
        width: 34px !important;
        height: 34px !important;
    }

    .appmenu-link > span:first-child,
    .appmenu-section:first-child .appmenu-link > span:first-child,
    .appmenu-section:not(:first-child) .appmenu-link > span:first-child {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        font-size: 13px !important;
        line-height: 1.22 !important;
    }

    .appmenu-link-notice,
    .appmenu-section:first-child .appmenu-link-notice {
        position: static !important;
        margin: 0 0 0 auto !important;
        flex: 0 0 auto !important;
    }
}

.appmenu-panel.is-open {
    display: grid !important;
}

.appmenu-panel[hidden] {
    display: none !important;
}

html.has-open-appmenu body::before {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 238 !important;
    background: rgba(15, 23, 42, 0.18) !important;
}

html.is-android .appmenu-panel {
    z-index: 280 !important;
}

@media (min-width: 980px) and (hover: hover) and (pointer: fine) {
    .appmenu-panel {
        position: fixed !important;
        top: 108px !important;
        right: 34px !important;
        bottom: auto !important;
        left: auto !important;
        width: min(360px, calc(100vw - 68px)) !important;
        min-width: 280px !important;
        max-height: calc(100vh - 124px) !important;
        z-index: 260 !important;
    }

    .module-nav-shell {
        left: 16px;
        width: 96px;
        gap: 16px;
    }

    .module-tab {
        min-height: 82px;
        padding: 52px 4px 0;
    }

    .module-tab > span {
        display: block !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: initial !important;
        max-width: 96px;
        max-height: none !important;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: normal;
        line-height: 1.16;
    }
}

/* Mobile menu hardening: keep the appbar compact and show one readable More sheet. */
.appmenu-panel,
.appmenu-link {
    box-sizing: border-box;
}

.appmenu-link {
    min-width: 0;
}

.appmenu-link > span:first-child {
    display: block;
}

@media (max-width: 979px), (hover: none), (pointer: coarse) {
    .appbar-primary {
        min-width: 0 !important;
    }

    .brand,
    .brand-title {
        flex: 1 1 auto !important;
    }

    .appbar-actions {
        min-width: 0 !important;
        max-width: 52vw !important;
    }

    .appbar .pwa-install-button {
        min-width: 0 !important;
        max-width: 108px !important;
        padding-left: 9px !important;
        padding-right: 9px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .appbar .appmenu-trigger {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        border-radius: 12px !important;
    }

    .appbar .appmenu-trigger::before {
        content: "" !important;
        display: block !important;
        width: 18px !important;
        height: 2px !important;
        border-radius: 999px !important;
        background: currentColor !important;
        box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor !important;
    }

    .appbar .appmenu-trigger-text {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
    }

    .appmenu-panel {
        top: auto !important;
        right: max(10px, env(safe-area-inset-right)) !important;
        bottom: calc(84px + env(safe-area-inset-bottom)) !important;
        left: max(10px, env(safe-area-inset-left)) !important;
        width: auto !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100vh - 116px - env(safe-area-inset-bottom)) !important;
        padding: 12px !important;
        grid-template-columns: 1fr !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .appmenu-section,
    .appmenu-section:first-child,
    .appmenu-section:not(:first-child) {
        display: grid !important;
        grid-template-columns: 1fr !important;
        min-width: 0 !important;
    }

    .appmenu-link,
    .appmenu-section:first-child .appmenu-link,
    .appmenu-section:not(:first-child) .appmenu-link {
        min-width: 0 !important;
        width: 100% !important;
        min-height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }

    .appmenu-link > span:first-child,
    .appmenu-section:first-child .appmenu-link > span:first-child,
    .appmenu-section:not(:first-child) .appmenu-link > span:first-child {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        line-height: 1.22 !important;
    }
}

@supports (height: 100dvh) {
    @media (max-width: 979px), (hover: none), (pointer: coarse) {
        .appmenu-panel {
            max-height: min(72dvh, calc(100dvh - 116px - env(safe-area-inset-bottom))) !important;
        }
    }
}

html.is-android .appbar .appmenu-trigger {
    width: 40px !important;
    min-width: 40px !important;
}

html.is-android .appmenu-panel {
    top: auto !important;
    bottom: calc(84px + env(safe-area-inset-bottom)) !important;
    max-height: calc(100vh - 116px - env(safe-area-inset-bottom)) !important;
}

/* Live-app menu: one complete sheet, short dock, no clipped labels. */
.appmenu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 2px 2px 10px;
    border-bottom: 1px solid var(--line);
}

.appmenu-head strong {
    min-width: 0;
    color: var(--text);
    font-size: 15px;
    font-weight: 950;
    line-height: 1.2;
}

.appmenu-head button {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--muted);
    font: inherit;
    font-size: 0;
    cursor: pointer;
}

.appmenu-head button::before {
    content: "X";
    display: grid;
    place-items: center;
    font-size: 16px;
    font-weight: 850;
    line-height: 1;
}

@media (max-width: 979px), (hover: none), (pointer: coarse) {
    .pwa-bottom-nav,
    .is-standalone .pwa-bottom-nav,
    html.is-android .pwa-bottom-nav {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        grid-auto-flow: initial !important;
        grid-auto-columns: initial !important;
        gap: 5px !important;
        padding: 6px !important;
    }

    .pwa-bottom-link {
        min-height: 54px !important;
        padding: 6px 3px !important;
        gap: 2px !important;
    }

    .pwa-bottom-link::before {
        width: 21px !important;
        height: 21px !important;
        mask-size: 21px 21px !important;
        -webkit-mask-size: 21px 21px !important;
    }

    .pwa-bottom-link > span:first-child,
    .pwa-bottom-label {
        display: block !important;
        max-width: 100% !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        font-size: 11.5px !important;
        line-height: 1.05 !important;
    }

    .appmenu-panel,
    html.is-android .appmenu-panel {
        top: auto !important;
        right: max(10px, env(safe-area-inset-right)) !important;
        bottom: calc(82px + env(safe-area-inset-bottom)) !important;
        left: max(10px, env(safe-area-inset-left)) !important;
        width: auto !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100vh - 116px - env(safe-area-inset-bottom)) !important;
        padding: 12px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 11px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 18px !important;
    }

    .appmenu-head {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #fff;
    }

    .appmenu-section,
    .appmenu-section:first-child,
    .appmenu-section:not(:first-child) {
        display: grid !important;
        grid-template-columns: 1fr !important;
        min-width: 0 !important;
        gap: 6px !important;
        padding: 0 !important;
    }

    .appmenu-label {
        padding: 2px 2px 0 !important;
        color: var(--muted) !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }

    .appmenu-link,
    .appmenu-section:first-child .appmenu-link,
    .appmenu-section:not(:first-child) .appmenu-link {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        padding: 8px 10px !important;
        border: 1px solid var(--line) !important;
        border-radius: 12px !important;
        background: #fff !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }

    .appmenu-link::before,
    .appmenu-section:first-child .appmenu-link::before {
        flex: 0 0 34px !important;
        width: 34px !important;
        height: 34px !important;
        border-radius: 10px !important;
        background-color: #f8fafc !important;
        background-size: 20px 20px !important;
    }

    .appmenu-link > span:first-child,
    .appmenu-section:first-child .appmenu-link > span:first-child,
    .appmenu-section:not(:first-child) .appmenu-link > span:first-child {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        line-height: 1.22 !important;
    }

    .appmenu-link.active,
    .appmenu-link:hover {
        background: rgba(43, 108, 255, 0.08) !important;
        border-color: rgba(43, 108, 255, 0.24) !important;
        color: var(--primary) !important;
    }

    .appmenu-link-notice,
    .appmenu-section:first-child .appmenu-link-notice {
        position: static !important;
        margin: 0 0 0 auto !important;
        flex: 0 0 auto !important;
    }
}

@supports (height: 100dvh) {
    @media (max-width: 979px), (hover: none), (pointer: coarse) {
        .appmenu-panel,
        html.is-android .appmenu-panel {
            max-height: calc(100dvh - 116px - env(safe-area-inset-bottom)) !important;
        }
    }
}

/* Menu source of truth: closed means hidden; open means one readable sheet. */
.appmenu-panel[hidden],
html.is-android .appmenu-panel[hidden] {
    display: none !important;
}

@media (max-width: 979px), (hover: none), (pointer: coarse) {
    .appmenu-panel,
    html.is-android .appmenu-panel {
        position: fixed !important;
        top: calc(var(--appbar-height, 74px) + 8px + env(safe-area-inset-top)) !important;
        right: max(10px, env(safe-area-inset-right)) !important;
        bottom: calc(82px + env(safe-area-inset-bottom)) !important;
        left: max(10px, env(safe-area-inset-left)) !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 20px) !important;
        height: auto !important;
        max-height: none !important;
        display: none !important;
        align-content: start !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 12px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 18px !important;
        box-sizing: border-box !important;
        z-index: 280 !important;
    }

    .appmenu-panel.is-open,
    html.is-android .appmenu-panel.is-open {
        display: grid !important;
    }

    .appmenu-panel[hidden],
    html.is-android .appmenu-panel[hidden] {
        display: none !important;
    }

    .appmenu-section,
    .appmenu-section:first-child,
    .appmenu-section:not(:first-child) {
        display: grid !important;
        grid-template-columns: 1fr !important;
        min-width: 0 !important;
        gap: 6px !important;
        padding: 0 !important;
    }

    .appmenu-link,
    .appmenu-section:first-child .appmenu-link,
    .appmenu-section:not(:first-child) .appmenu-link {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 52px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        padding: 9px 10px !important;
        overflow: visible !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    .appmenu-link > span:first-child,
    .appmenu-section:first-child .appmenu-link > span:first-child,
    .appmenu-section:not(:first-child) .appmenu-link > span:first-child {
        display: block !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        font-size: 13px !important;
        line-height: 1.22 !important;
    }
}

/* Authoritative app menu: one readable list, never clipped. */
.appmenu-panel,
html.is-android .appmenu-panel {
    position: fixed !important;
    top: calc(var(--appbar-height, 64px) + 12px + env(safe-area-inset-top)) !important;
    right: max(18px, calc((100vw - 1480px) / 2 + 18px)) !important;
    bottom: auto !important;
    left: auto !important;
    width: min(440px, calc(100vw - 36px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 36px) !important;
    max-height: calc(100vh - var(--appbar-height, 64px) - 36px - env(safe-area-inset-bottom)) !important;
    display: none !important;
    grid-template-columns: 1fr !important;
    align-content: start !important;
    gap: 10px !important;
    padding: 14px !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.16) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
    z-index: 320 !important;
}

.appmenu-panel.is-open:not([hidden]),
html.is-android .appmenu-panel.is-open:not([hidden]) {
    display: grid !important;
}

.appmenu-panel[hidden],
html.is-android .appmenu-panel[hidden] {
    display: none !important;
}

html.has-open-appmenu body::before {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 300 !important;
    background: rgba(15, 23, 42, 0.18) !important;
}

.appmenu-head {
    position: sticky !important;
    top: -14px !important;
    z-index: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 40px !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    margin: -2px -2px 2px !important;
    padding: 4px 2px 12px !important;
    border-bottom: 1px solid var(--line) !important;
    background: #fff !important;
}

.appmenu-head strong {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--text) !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    line-height: 1.2 !important;
}

.appmenu-head button {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    position: static !important;
    transform: none !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid var(--line) !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: var(--text) !important;
    font: inherit !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

.appmenu-head button::before {
    content: none !important;
}

.appmenu-section,
.appmenu-section:first-child,
.appmenu-section:not(:first-child) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
    gap: 7px !important;
    padding: 0 !important;
}

.appmenu-section + .appmenu-section {
    padding-top: 10px !important;
    border-top: 1px solid var(--line) !important;
}

.appmenu-label {
    padding: 2px 2px 0 !important;
    color: var(--muted) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.2 !important;
}

.appmenu-link,
.appmenu-section:first-child .appmenu-link,
.appmenu-section:not(:first-child) .appmenu-link {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 12px !important;
    border: 1px solid var(--line) !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: var(--text) !important;
    overflow: visible !important;
    text-align: left !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

.appmenu-link::before,
.appmenu-section:first-child .appmenu-link::before {
    grid-column: 1 !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background-color: #f8fafc !important;
    background-size: 20px 20px !important;
}

.appmenu-link > span:first-child,
.appmenu-section:first-child .appmenu-link > span:first-child,
.appmenu-section:not(:first-child) .appmenu-link > span:first-child {
    display: block !important;
    grid-column: 2 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.22 !important;
}

.appmenu-link.active,
.appmenu-link:hover {
    border-color: rgba(43, 108, 255, 0.24) !important;
    background: rgba(43, 108, 255, 0.08) !important;
    color: var(--primary) !important;
}

.appmenu-link-notice,
.appmenu-section:first-child .appmenu-link-notice {
    grid-column: 3 !important;
    position: static !important;
    margin: 0 0 0 auto !important;
    justify-self: end !important;
}

@media (max-width: 979px), (hover: none), (pointer: coarse) {
    html.has-open-appmenu,
    html.has-open-appmenu body {
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    html.has-open-appmenu .pwa-bottom-nav,
    html.has-open-appmenu.is-standalone .pwa-bottom-nav,
    html.is-android.has-open-appmenu .pwa-bottom-nav {
        display: none !important;
    }

    .appmenu-panel,
    html.is-android .appmenu-panel {
        top: calc(var(--appbar-height, 64px) + env(safe-area-inset-top)) !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: auto !important;
        max-width: none !important;
        max-height: none !important;
        min-height: 0 !important;
        gap: 10px !important;
        padding: 12px 12px calc(18px + env(safe-area-inset-bottom)) !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;
        border-radius: 18px 18px 0 0 !important;
        box-shadow: 0 -18px 46px rgba(15, 23, 42, 0.16) !important;
    }

    .appmenu-head {
        grid-template-columns: 40px minmax(0, 1fr) !important;
        top: -12px !important;
        margin: 0 -2px 2px !important;
        padding: 8px 2px 12px !important;
    }

    .appmenu-head strong {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    .appmenu-head button {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: start !important;
        position: static !important;
        transform: none !important;
        z-index: 322 !important;
        background: #f8fafc !important;
    }

    .appmenu-link,
    .appmenu-section:first-child .appmenu-link,
    .appmenu-section:not(:first-child) .appmenu-link {
        min-height: 52px !important;
        padding: 10px !important;
    }
}

@supports (height: 100dvh) {
    @media (max-width: 979px), (hover: none), (pointer: coarse) {
        .appmenu-panel,
        html.is-android .appmenu-panel {
            bottom: auto !important;
            height: calc(100dvh - var(--appbar-height, 64px) - env(safe-area-inset-top)) !important;
            max-height: calc(100dvh - var(--appbar-height, 64px) - env(safe-area-inset-top)) !important;
        }
    }
}

/* Photo app dock: same predictable action set on every mobile view. */
.floraclick-app .fc-mobile-dock,
html.is-android .floraclick-app .fc-mobile-dock {
    left: 0 !important;
    right: auto !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.floraclick-app .fc-mobile-dock-nav,
html.is-android .floraclick-app .fc-mobile-dock-nav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, clamp(64px, 21vw, 84px))) !important;
    gap: 5px !important;
    width: fit-content !important;
    max-width: calc(100vw - 16px) !important;
    margin: 0 !important;
    padding: 5px !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
}

.floraclick-app .fc-mobile-nav-btn,
html.is-android .floraclick-app .fc-mobile-nav-btn {
    min-width: 0 !important;
    min-height: 54px !important;
    padding: 6px 3px !important;
    border-radius: 13px !important;
    gap: 3px !important;
}

.floraclick-app .fc-mobile-nav-btn-center,
html.is-android .floraclick-app .fc-mobile-nav-btn-center {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    background: #f8fafc !important;
    color: var(--fc-ink, #0f172a) !important;
}

.floraclick-app .fc-mobile-nav-btn-center.is-active,
html.is-android .floraclick-app .fc-mobile-nav-btn-center.is-active {
    background: var(--fc-ink, #0f172a) !important;
    color: #fff !important;
}

.floraclick-app .fc-mobile-nav-btn-save.is-ready,
html.is-android .floraclick-app .fc-mobile-nav-btn-save.is-ready {
    color: #0f766e !important;
}

.floraclick-app .fc-mobile-nav-btn-save.is-ready.is-active,
html.is-android .floraclick-app .fc-mobile-nav-btn-save.is-ready.is-active {
    background: #ecfeff !important;
    color: #0f766e !important;
}

.floraclick-app .fc-mobile-nav-btn.is-disabled,
html.is-android .floraclick-app .fc-mobile-nav-btn.is-disabled {
    opacity: 0.44 !important;
    cursor: default !important;
}

.floraclick-app .fc-mobile-nav-label,
html.is-android .floraclick-app .fc-mobile-nav-label {
    display: block !important;
    max-width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: 10.5px !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
}

/* Final Android/PWA menu guard: the menu owns the visible viewport. */
@media (max-width: 979px), (hover: none), (pointer: coarse) {
    html.has-open-appmenu,
    html.has-open-appmenu body {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .appmenu-panel,
    html.is-android .appmenu-panel {
        top: calc(var(--pwa-visual-offset-top, 0px) + var(--appbar-height, 64px) + env(safe-area-inset-top)) !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: calc(var(--pwa-visual-height, 100vh) - var(--appbar-height, 64px) - env(safe-area-inset-top)) !important;
        max-height: calc(var(--pwa-visual-height, 100vh) - var(--appbar-height, 64px) - env(safe-area-inset-top)) !important;
        min-height: 0 !important;
        padding: 12px 12px calc(18px + env(safe-area-inset-bottom)) !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;
        border-radius: 18px 18px 0 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .appmenu-head {
        top: -12px !important;
        margin: -2px -2px 2px !important;
        padding: 8px 2px 12px !important;
    }

    .appmenu-link,
    .appmenu-section:first-child .appmenu-link,
    .appmenu-section:not(:first-child) .appmenu-link {
        grid-template-columns: 38px minmax(0, 1fr) auto !important;
        min-height: 56px !important;
        gap: 10px !important;
        padding: 9px 10px !important;
    }

    .appmenu-link::before,
    .appmenu-section:first-child .appmenu-link::before {
        width: 38px !important;
        height: 38px !important;
        border-radius: 12px !important;
    }

    .appmenu-link > span:first-child,
    .appmenu-section:first-child .appmenu-link > span:first-child,
    .appmenu-section:not(:first-child) .appmenu-link > span:first-child {
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        font-size: 13.5px !important;
        line-height: 1.2 !important;
    }

    .pwa-bottom-link > span:first-child,
    .pwa-bottom-label {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: break-word !important;
    }
}

/* Native mobile dock: keep the tab bar attached to the screen edge.
   iOS safe-area space belongs inside the dock, not as dead space below it. */
@media (max-width: 979px), (hover: none), (pointer: coarse) {
    .pwa-bottom-nav,
    .is-standalone .pwa-bottom-nav,
    html.is-ios .pwa-bottom-nav,
    html.is-android .pwa-bottom-nav {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: auto !important;
        max-width: none !important;
        padding: 5px max(8px, env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;
        border-radius: 18px 18px 0 0 !important;
        box-shadow: 0 -10px 28px rgba(15, 23, 42, 0.14) !important;
    }

    .pwa-bottom-link {
        min-height: 48px !important;
        border-radius: 14px !important;
    }

    .container,
    html.is-ios .container,
    html.is-android .container,
    html.is-standalone .container {
        padding-bottom: calc(66px + env(safe-area-inset-bottom)) !important;
    }

    .container.page-stack,
    .container.planner-page,
    .container.vacation-layout,
    html.is-ios .container.page-stack,
    html.is-android .container.page-stack,
    html.is-standalone .container.page-stack,
    html.is-ios .container.planner-page,
    html.is-android .container.planner-page,
    html.is-standalone .container.planner-page,
    html.is-ios .container.vacation-layout,
    html.is-android .container.vacation-layout,
    html.is-standalone .container.vacation-layout {
        margin-bottom: 0 !important;
    }

    html.is-standalone body::after {
        content: none !important;
        display: none !important;
    }
}

/* App-brede scroll rust: interne knoppen landen onder de appbar en grote
   mobiele functiestukken krijgen net genoeg ademruimte om niet te voelen
   alsof je door meerdere workflows tegelijk schiet. */
html {
    scroll-padding-top: calc(var(--appbar-height) + 18px);
}

:target,
.app-section[id],
.surface[id],
.card[id],
details[id],
form[id],
[data-scroll-section] {
    scroll-margin-top: calc(var(--appbar-height) + 20px);
}

@media (max-width: 979px), (hover: none), (pointer: coarse) {
    body:not(.login-page) .page-stack,
    .mijn-page,
    .meldingen-page,
    .keuring-page,
    .bhv-page,
    .taken-page,
    .planner-page,
    .vacation-layout {
        gap: 18px !important;
    }

    .page-stack > .surface,
    .page-stack > .card,
    .page-stack > details.card,
    .mijn-page > .surface,
    .mijn-page > details.surface,
    .meldingen-page > .surface,
    .taken-page > .taken-board,
    .keuring-page .keuring-panel,
    .bhv-page > .bhv-panel,
    .bhv-page > .bhv-alert-card,
    .app-section {
        scroll-margin-top: calc(var(--appbar-height) + 18px);
    }
}

/* Login has one job on a phone: get the SMS code request into view quickly. */
body.login-page .appbar {
    position: static;
}

body.login-page-code .page-header {
    display: none;
}

body.login-page .auth-input-help {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.4;
}

body.login-page .container {
    padding-top: 10px;
}

body.login-page .page-stack {
    gap: 12px;
}

body.login-page .page-header {
    gap: 10px;
    padding: 12px !important;
}

body.login-page .page-brand-logo {
    width: min(160px, 50vw);
}

body.login-page .page-header h1 {
    font-size: clamp(22px, 6vw, 30px) !important;
    line-height: 1.12 !important;
}

body.login-page .page-header p,
body.login-page .surface-subtitle {
    font-size: 13px;
    line-height: 1.4;
}

body.login-page .page-kpi {
    padding: 10px 12px;
}

body.login-page .surface-header,
body.login-page .surface-body {
    padding: 12px !important;
}

body.login-page .auth-step {
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
}

body.login-page .auth-step .flow {
    gap: 10px;
}

body.login-page .auth-step input,
body.login-page .auth-step button {
    min-height: 46px;
}

@media (max-width: 640px) {
    body.login-page .page-kpis {
        display: none;
    }

    body.login-page .page-brand-logo {
        width: min(132px, 42vw);
    }
}

/* Pilot 2026: betrouwbare tikvlakken op iPad en andere touchschermen. */
@media (pointer: coarse), (max-width: 1280px) {
    .appbar .brand,
    .appbar .appbar-bhv-button,
    .appbar .pwa-install-button,
    .appbar .appmenu-trigger,
    body.login-page input,
    body.login-page select,
    body.login-page button,
    body.login-page .btn {
        min-height: 44px !important;
    }

    .appbar .brand,
    .appbar .appbar-bhv-button,
    .appbar .pwa-install-button,
    .appbar .appmenu-trigger {
        align-items: center;
    }

    .appbar .appmenu-trigger {
        width: 44px !important;
        min-width: 44px !important;
    }
}

/* Houd de secundaire kopknoppen leesbaar op smalle werktelefoons. */
@media (max-width: 480px) {
    .appbar-actions {
        max-width: calc(100vw - 76px) !important;
    }
}

/* Werkplanning: eigen team herkenbaar houden binnen de vlakke kaartstijl. */
.planning-work-card.is-mine {
    border-color: rgba(21, 128, 61, 0.42) !important;
    border-color: color-mix(in srgb, var(--ok) 42%, transparent) !important;
    background: rgba(21, 128, 61, 0.05) !important;
    background: color-mix(in srgb, var(--ok) 5%, #fff) !important;
    box-shadow: 0 0 0 1px rgba(21, 128, 61, 0.18) !important;
}

.planning-mine-pill {
    border-color: rgba(21, 128, 61, 0.35) !important;
    background: rgba(21, 128, 61, 0.12) !important;
    color: #15803d !important;
}

/* Planning cockpit: dezelfde taakgerichte hiërarchie als de rittenmodule. */
.container.planning-shell {
    display: grid;
    gap: 10px;
    max-width: 920px;
    margin-inline: auto;
    padding-top: 10px;
}

.planning-shell [id] {
    scroll-margin-top: 86px;
}

.planning-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 12px;
    border: 1px solid #dbe4ea;
    border-radius: 12px;
    background: linear-gradient(145deg, #fff 0%, #f7fbfa 100%);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}

.planning-hero-main {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.planning-hero-eyebrow,
.planning-workspace-head span,
.planning-focus-eyebrow {
    color: #0f766e;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.planning-hero h1 {
    margin: 0;
    color: #132033;
    font-size: 20px;
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: -0.02em;
}

.planning-hero p {
    margin: 0;
    color: #64748b;
    font-size: 12.5px;
    line-height: 1.3;
    font-weight: 750;
}

.planning-quicklinks {
    display: flex;
    align-items: stretch;
    gap: 5px;
    flex: none;
}

.planning-quicklinks a {
    display: grid;
    place-items: center;
    align-content: center;
    min-width: 58px;
    min-height: 46px;
    padding: 4px 8px;
    border: 1px solid #d9e2e8;
    border-radius: 9px;
    background: #fff;
    color: #475569;
    text-decoration: none;
}

.planning-quicklinks a:hover,
.planning-quicklinks a:focus-visible {
    border-color: #0f766e;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.10);
}

.planning-quicklinks b {
    color: #132033;
    font-size: 15px;
    line-height: 1;
    font-weight: 950;
}

.planning-quicklinks span {
    margin-top: 3px;
    font-size: 9.5px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.planning-workspace {
    display: grid;
    gap: 8px;
}

.planning-workspace-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    padding-inline: 2px;
}

.planning-workspace-head > div {
    display: grid;
    gap: 1px;
}

.planning-workspace-head h2 {
    margin: 0;
    color: #132033;
    font-size: 17px;
    line-height: 1.1;
    font-weight: 950;
}

.planning-workspace-head p {
    margin: 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 750;
    text-align: right;
}

.planning-day-tabs {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 2px;
    margin: -2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.planning-day-tabs::-webkit-scrollbar {
    display: none;
}

.planning-day-tab {
    flex: 0 0 auto;
    display: grid;
    gap: 1px;
    min-width: 130px;
    padding: 7px 10px 8px;
    border: 1px solid #d7dfe9;
    border-radius: 11px;
    background: #fff;
    color: #64748b;
    text-decoration: none;
}

.planning-day-tab > span {
    font-size: 10px;
    line-height: 1.1;
    font-weight: 950;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.planning-day-tab > b {
    color: #132033;
    font-size: 14px;
    line-height: 1.15;
    font-weight: 950;
}

.planning-day-tab > small {
    color: #64748b;
    font-size: 10.5px;
    line-height: 1.2;
    font-weight: 750;
}

.planning-day-tab.is-active {
    border-color: #0c4f4a;
    background: linear-gradient(160deg, #12655e 0%, #0b433f 100%);
    box-shadow: 0 5px 14px rgba(9, 60, 55, 0.18);
}

.planning-day-tab.is-active > span {
    color: #7ee8d8;
}

.planning-day-tab.is-active > b {
    color: #fff;
}

.planning-day-tab.is-active > small {
    color: #b6dcd6;
}

.planning-empty {
    display: grid;
    gap: 3px;
    padding: 20px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #fff;
    color: #64748b;
    text-align: center;
}

.planning-empty b {
    color: #132033;
    font-size: 16px;
    font-weight: 950;
}

.planning-days {
    display: grid;
    gap: 8px;
}

.planning-day {
    display: grid;
    gap: 8px;
    padding: 0;
    border: 1px solid #d7dfe9;
    border-left: 1px solid #d7dfe9;
    border-radius: 13px;
    background: #fff;
    overflow: hidden;
}

.planning-day.is-focus,
.planning-day.is-focus.is-today,
.planning-day.is-focus.is-weekend {
    gap: 9px;
    padding: 12px;
    border-color: #0a3733;
    background: radial-gradient(130% 150% at 100% 0%, #17706a 0%, #0e514b 48%, #0a3a36 100%);
    box-shadow: 0 10px 24px rgba(9, 60, 55, 0.22);
}

.planning-day.is-collapsed[open] {
    padding-bottom: 9px;
    border-color: #b9c9ce;
    box-shadow: 0 5px 16px rgba(15, 23, 42, 0.06);
}

.planning-day.is-collapsed > summary {
    cursor: pointer;
    list-style: none;
}

.planning-day.is-collapsed > summary::-webkit-details-marker {
    display: none;
}

.planning-day-header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    padding: 9px 11px;
    border: 0;
    border-bottom: 0;
    background: #fff;
}

.planning-day.is-focus .planning-day-header {
    padding: 0 1px 2px;
    background: transparent;
}

.planning-day-heading {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.planning-day-title-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 7px;
}

.planning-day-weekday {
    color: #132033;
    font-size: 17px;
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: -0.01em;
}

.planning-day-header h2 {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 850;
}

.planning-day.is-focus .planning-focus-eyebrow {
    color: #7ee8d8;
}

.planning-day.is-focus .planning-day-weekday {
    color: #fff;
    font-size: 22px;
}

.planning-day.is-focus .planning-day-header h2 {
    color: #b6dcd6;
    font-size: 15px;
}

.planning-day-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.planning-day-mine,
.planning-day-count,
.planning-day-open {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 0 8px;
    border: 1px solid #d7dfe9;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-size: 10.5px;
    line-height: 1;
    font-weight: 900;
    white-space: nowrap;
}

.planning-day-mine {
    border-color: rgba(22, 163, 74, 0.28);
    background: #dcfce7;
    color: #166534;
}

.planning-day.is-focus .planning-day-count {
    border-color: rgba(255, 255, 255, 0.20);
    background: rgba(255, 255, 255, 0.10);
    color: #d9f3ee;
}

.planning-day.is-focus .planning-day-mine {
    border-color: rgba(167, 243, 201, 0.38);
    background: rgba(167, 243, 201, 0.14);
    color: #bbf7d0;
}

.planning-day-open {
    gap: 5px;
    border-color: transparent;
    background: #eef4f5;
    color: #0f766e;
}

.planning-day-open::after {
    content: "+";
    font-size: 14px;
    line-height: 1;
}

.planning-day[open] .planning-day-open::after {
    content: "−";
}

.planning-close-label,
.planning-day[open] .planning-open-label {
    display: none;
}

.planning-day[open] .planning-close-label {
    display: inline;
}

.planning-day-body {
    display: grid;
    gap: 7px;
    padding: 0 9px;
}

.planning-day.is-focus .planning-day-body {
    padding: 0;
}

.planning-work-card {
    --team-accent: #5f7d83;
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 11px 12px 12px;
    border: 1px solid #dce4e8;
    border-left: 4px solid var(--team-accent);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06);
}

.planning-work-card.is-mine {
    border-color: #86cfad !important;
    border-left-color: #16a34a !important;
    background: linear-gradient(145deg, #fff 0%, #f3fff8 100%) !important;
    box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.12), 0 4px 12px rgba(15, 23, 42, 0.07) !important;
}

.planning-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
}

.planning-team-name {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: #475569;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.planning-team-name > span {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: var(--team-accent);
}

.planning-team-name b {
    min-width: 0;
    overflow-wrap: anywhere;
}

.planning-mine-pill {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 0 8px;
    border: 1px solid rgba(22, 163, 74, 0.30) !important;
    border-radius: 999px;
    background: #dcfce7 !important;
    color: #166534 !important;
    font-size: 10px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.planning-work-title {
    margin: 0;
    color: #132033;
    font-size: 17px;
    line-height: 1.22;
    font-weight: 950;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.planning-facts {
    display: grid;
    grid-template-columns: minmax(110px, 0.75fr) minmax(0, 1.5fr);
    margin: 0;
    border-top: 1px solid #e7ecef;
}

.planning-fact {
    display: grid;
    align-content: start;
    gap: 3px;
    min-width: 0;
    padding: 8px 8px 0 0;
}

.planning-fact + .planning-fact {
    padding-left: 10px;
    border-left: 1px solid #e7ecef;
}

.planning-fact-people {
    min-width: 0;
}

.planning-fact dt {
    color: #64748b;
    font-size: 9.5px;
    line-height: 1.2;
    font-weight: 950;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.planning-fact dd {
    min-width: 0;
    margin: 0;
    color: #243447;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.planning-member-chips {
    gap: 4px;
}

.planning-member-chip {
    min-height: 23px;
    padding: 2px 7px;
    border-color: #dce4e8;
    background: #f8fafc;
    font-size: 11px;
    line-height: 1.15;
}

.planning-card-missing {
    margin: 0;
    padding-top: 7px;
    border-top: 1px solid #e7ecef;
    color: #94a3b8;
    font-size: 11.5px;
    line-height: 1.3;
    font-weight: 750;
}

.planning-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 7px;
    padding: 7px 9px;
    border-left: 3px solid #f59e0b;
    border-radius: 7px;
    background: #fffbeb;
    color: #78350f;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 750;
}

.planning-note b {
    font-weight: 950;
}

.planning-card-extra {
    border-top: 1px solid #e7ecef;
    padding-top: 7px;
}

.planning-card-extra > summary {
    display: flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    color: #0f766e;
    font-size: 11.5px;
    font-weight: 900;
    cursor: pointer;
    list-style: none;
}

.planning-card-extra > summary::-webkit-details-marker {
    display: none;
}

.planning-card-extra > summary::after {
    content: "+";
    font-size: 14px;
}

.planning-card-extra[open] > summary::after {
    content: "−";
}

.planning-card-extra > summary span {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding-inline: 5px;
    border-radius: 999px;
    background: #dff6f2;
    color: #0f766e;
    font-size: 10px;
}

.planning-card-extra .planning-team-task-list {
    margin-top: 7px;
}

.planning-team-task-row {
    gap: 2px;
    padding: 8px 9px;
}

.planning-task-block {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 9px;
    border: 1px solid #d9e2e8;
    border-radius: 10px;
    background: #f8fafc;
}

.planning-day.is-focus .planning-task-block {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.09);
}

.planning-task-heading {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: #475569;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.planning-day.is-focus .planning-task-heading {
    color: #d9f3ee;
}

.planning-task-heading span {
    display: inline-grid;
    place-items: center;
    min-width: 21px;
    height: 21px;
    padding-inline: 6px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 10px;
}

.planning-task-list {
    gap: 5px;
}

.planning-task-row {
    gap: 8px;
    padding: 8px 9px;
    border-color: #dce4e8;
    border-radius: 8px;
    background: #fff;
}

.planning-task-title {
    font-size: 13px;
}

.planning-task-badge {
    padding: 2px 6px;
    font-size: 9px;
}

.planning-task-link {
    min-height: 28px;
    padding-inline: 9px;
    color: #0f766e;
}

.planning-department-toggle {
    margin: 0;
}

.planning-day.is-focus .planning-department-toggle summary {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
}

.planning-day.is-focus .planning-department-toggle summary::after {
    color: #b6dcd6;
}

.planning-department-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.planning-department-team {
    padding: 9px 10px;
    background: #fff;
}

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

.planning-secondary {
    min-width: 0;
    border: 1px solid #d7dfe9;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.planning-secondary > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 66px;
    padding: 9px 11px;
    cursor: pointer;
    list-style: none;
}

.planning-secondary > summary::-webkit-details-marker {
    display: none;
}

.planning-secondary > summary > span {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.planning-secondary > summary small {
    color: #0f766e;
    font-size: 9.5px;
    font-weight: 950;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.planning-secondary > summary b {
    color: #132033;
    font-size: 15px;
    line-height: 1.15;
    font-weight: 950;
}

.planning-secondary > summary em {
    color: #64748b;
    font-size: 11px;
    line-height: 1.2;
    font-style: normal;
    font-weight: 750;
}

.planning-secondary > summary strong {
    display: inline-grid;
    place-items: center;
    min-width: 31px;
    height: 31px;
    padding-inline: 8px;
    border-radius: 999px;
    background: #eef4f5;
    color: #0f766e;
    font-size: 12px;
    font-weight: 950;
}

.planning-secondary > summary::after {
    content: "+";
    color: #0f766e;
    font-size: 18px;
    font-weight: 900;
}

.planning-secondary[open] > summary {
    border-bottom: 1px solid #e7ecef;
    background: #f8fbfb;
}

.planning-secondary[open] > summary::after {
    content: "−";
}

.planning-secondary-body {
    display: grid;
    gap: 8px;
    padding: 9px;
}

.planning-secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 32px;
    padding-inline: 11px;
    border-radius: 8px;
    background: #0f766e;
    color: #fff;
    font-size: 11.5px;
    font-weight: 900;
    text-decoration: none;
}

.planning-secondary-empty {
    margin: 0;
    padding: 9px;
    border-radius: 8px;
    background: #f8fafc;
    color: #64748b;
    font-size: 12px;
    font-weight: 750;
}

.planning-compact-list {
    display: grid;
    gap: 6px;
}

.planning-compact-row {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 10px;
    padding: 8px 9px;
    border: 1px solid #e1e7eb;
    border-radius: 9px;
    background: #fff;
}

.planning-compact-row.is-important {
    border-left: 3px solid #f59e0b;
    background: #fffdf6;
}

.planning-compact-date {
    display: grid;
    align-content: start;
    gap: 1px;
    color: #64748b;
}

.planning-compact-date b {
    color: #0f766e;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.planning-compact-date span {
    color: #132033;
    font-size: 12px;
    font-weight: 900;
}

.planning-compact-date small {
    font-size: 10.5px;
    font-weight: 750;
}

.planning-compact-main {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.planning-compact-main > span {
    color: #64748b;
    font-size: 9.5px;
    font-weight: 950;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.planning-compact-main h3 {
    margin: 0;
    color: #132033;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.planning-compact-main p {
    margin: 0;
    color: #64748b;
    font-size: 11.5px;
    line-height: 1.3;
    font-weight: 700;
    overflow-wrap: anywhere;
}

@media (min-width: 760px) {
    .planning-day-body {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .planning-task-block,
    .planning-department-toggle {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .container.planning-shell {
        gap: 8px;
        padding-top: 7px;
    }

    .planning-hero {
        display: grid;
        gap: 8px;
        padding: 8px 9px;
    }

    .planning-hero h1 {
        font-size: 18px;
    }

    .planning-quicklinks {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: 100%;
    }

    .planning-quicklinks a {
        min-width: 0;
        min-height: 42px;
    }

    .planning-workspace-head {
        align-items: start;
    }

    .planning-workspace-head p {
        max-width: 170px;
        font-size: 10.5px;
    }

    .planning-day-tab {
        min-width: 116px;
        padding: 6px 9px 7px;
    }

    .planning-day.is-focus,
    .planning-day.is-focus.is-today,
    .planning-day.is-focus.is-weekend {
        padding: 9px;
    }

    .planning-day-header {
        align-items: center;
        flex-direction: row;
        padding: 8px 9px;
    }

    .planning-day.is-focus .planning-day-weekday {
        font-size: 19px;
    }

    .planning-day.is-focus .planning-day-header h2 {
        font-size: 13px;
    }

    .planning-day-tags {
        justify-content: flex-end;
    }

    .planning-day-mine {
        display: none;
    }

    .planning-day-open .planning-open-label,
    .planning-day-open .planning-close-label {
        display: none;
    }

    .planning-work-card {
        padding: 10px;
    }

    .planning-work-title {
        font-size: 16px;
    }

    .planning-facts {
        grid-template-columns: 1fr;
    }

    .planning-fact + .planning-fact {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid #edf1f3;
    }

    .planning-secondary-grid {
        grid-template-columns: 1fr;
    }

    .planning-secondary > summary {
        min-height: 58px;
        padding: 8px 10px;
    }

    .planning-compact-row {
        grid-template-columns: 70px minmax(0, 1fr);
        gap: 8px;
    }

    .planning-department-grid {
        grid-template-columns: 1fr;
    }

    .planning-task-row {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .planning-task-link {
        width: auto;
    }
}

@media (max-width: 390px) {
    .planning-hero p,
    .planning-workspace-head p {
        display: none;
    }

    .planning-day-count:nth-of-type(n + 2) {
        display: none;
    }

    .planning-compact-row {
        grid-template-columns: 1fr;
    }

    .planning-compact-date {
        display: flex;
        align-items: baseline;
        gap: 5px;
    }
}