/* ============================================================
   CleoTask app.css v2 — "Clean SaaS"
   Handwritten, no frameworks, no CDN. Mobile-first (375px ref),
   breakpoint at 720px. Inter self-hosted (variable, latin).
   Light + dark (auto via prefers-color-scheme, overridable via
   html[data-theme]) — toggle remembered in localStorage.
   Brand color still injected by the app: :root { --brand: #2563eb }
   ============================================================ */

/* ------------------------------------------------ font */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/inter-var-latin.woff2') format('woff2-variations');
}

/* ------------------------------------------------ tokens: light */
:root {
    color-scheme: light;
    --brand: #2563eb;
    --brand-contrast: #ffffff;

    --bg: #f6f7f9;
    --card: #ffffff;
    --surface: #f1f3f6;            /* subtle filled areas (inputs, code) */
    --line: #e5e9f0;
    --line-strong: #d4dae3;
    --txt: #101828;
    --muted: #667085;

    --red: #dc2626;
    --orange: #f59e0b;
    --yellow: #eab308;
    --green: #16a34a;
    --blue: #2563eb;
    --amber: #d97706;
    --violet: #7c3aed;

    --radius: 14px;
    --radius-sm: 10px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-md: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 14px rgba(16, 24, 40, .06);
    --shadow-lg: 0 4px 10px rgba(16, 24, 40, .06), 0 16px 28px rgba(16, 24, 40, .08);
    --shadow: var(--shadow-md);
    --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
    /* near-opaque on purpose: sticky bars stay readable WITHOUT backdrop-filter
       (GPU cost on low-end devices made scrolling laggy) */
    --glass: rgba(255, 255, 255, .94);
    --hover: #f4f6f9;
}

/* ------------------------------------------------ tokens: dark */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b0f1a;
    --card: #111827;
    --surface: #1a2334;
    --line: #232d42;
    --line-strong: #313d58;
    --txt: #e6eaf2;
    --muted: #94a3b8;

    --red: #f87171;
    --orange: #fbbf24;
    --yellow: #facc15;
    --green: #4ade80;
    --blue: #60a5fa;
    --amber: #fbbf24;
    --violet: #a78bfa;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, .30), 0 4px 16px rgba(0, 0, 0, .35);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, .35), 0 18px 50px rgba(0, 0, 0, .45);
    --glass: rgba(17, 24, 39, .93);
    --hover: #1a2334;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #0b0f1a;
        --card: #111827;
        --surface: #1a2334;
        --line: #232d42;
        --line-strong: #313d58;
        --txt: #e6eaf2;
        --muted: #94a3b8;

        --red: #f87171;
        --orange: #fbbf24;
        --yellow: #facc15;
        --green: #4ade80;
        --blue: #60a5fa;
        --amber: #fbbf24;
        --violet: #a78bfa;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
        --shadow-md: 0 1px 2px rgba(0, 0, 0, .30), 0 4px 16px rgba(0, 0, 0, .35);
        --shadow-lg: 0 4px 12px rgba(0, 0, 0, .35), 0 18px 50px rgba(0, 0, 0, .45);
        --glass: rgba(17, 24, 39, .93);
        --hover: #1a2334;
    }
}

/* ------------------------------------------------ base */
* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--txt);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); transition: background .25s ease, color .25s ease; }

h1 { font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .5rem; }
h2 { font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; margin: 0; }
h3 { font-size: 1.02rem; font-weight: 650; margin: 0 0 .6rem; }
h4 { font-size: .78rem; margin: 1rem 0 .4rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
code {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 6px; padding: .1em .4em; font-size: .85em; word-break: break-all;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
small { font-size: .82rem; }
::selection { background: color-mix(in srgb, var(--brand) 25%, transparent); }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

.muted { color: var(--muted); }
.small { font-size: .84rem; }
.inline { display: inline; }
.hot { color: var(--red); font-weight: 600; }

/* ------------------------------------------------ layout */
.container { max-width: 980px; margin: 0 auto; padding: 1rem; }

.topbar {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between;
    background: var(--glass);
    border-bottom: 1px solid var(--line);
    padding: .65rem 1rem;
}
.brand { display: flex; align-items: center; gap: .55rem; color: var(--txt); font-weight: 700; letter-spacing: -.01em; }
.brand:hover { text-decoration: none; }
.brand-logo { height: 28px; width: auto; display: block; }
.logo-fallback { height: 28px; width: 28px; border-radius: 8px; }
.topbar-right { display: flex; align-items: center; gap: .55rem; }

.lang-toggle, .theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .74rem; font-weight: 700; letter-spacing: .05em;
    border: 1px solid var(--line); border-radius: 999px;
    padding: .34rem .68rem; color: var(--muted); background: var(--card);
    cursor: pointer; transition: color .15s, border-color .15s, background .15s;
    font-family: inherit;
}
.lang-toggle:hover, .theme-toggle:hover { color: var(--txt); border-color: var(--line-strong); background: var(--hover); }
.theme-toggle { width: 34px; height: 34px; padding: 0; }
.theme-toggle svg { width: 17px; height: 17px; display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
.theme-toggle .icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
    :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
}

.page-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: .8rem; margin: .5rem 0 1rem; flex-wrap: wrap;
}
.page-head h1 { margin: 0; }
.head-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.back-link {
    display: inline-flex; align-items: center; gap: .3rem;
    margin: .7rem .2rem .2rem; font-size: .9rem; color: var(--muted); font-weight: 500;
}
.back-link:hover { color: var(--txt); text-decoration: none; }

.page-foot {
    max-width: 980px; margin: 1.4rem auto 0; padding: .9rem 1rem 1.4rem;
    color: var(--muted); font-size: .86rem; text-align: center;
}
/* v1.12.3: on mobile the fixed bottom-nav IS the menu — the footer shows
   only the brand line. The pill menu appears from 720px up. */
.page-foot .foot-nav { display: none; }
.foot-nav a {
    display: inline-block; padding: .32rem .78rem;
    background: var(--card); border: 1px solid var(--line); border-radius: 999px;
    color: var(--muted); font-weight: 600; font-size: .84rem; text-decoration: none;
    transition: color .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.foot-nav a:hover { color: var(--brand); border-color: var(--brand); text-decoration: none; }
.foot-brand { font-size: .78rem; letter-spacing: .05em; }

/* ------------------------------------------------ bottom nav (mobile) */
.bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: flex;
    background: var(--glass);
    border-top: 1px solid var(--line);
    padding: .3rem .4rem calc(.3rem + env(safe-area-inset-bottom));
}
.bn-item {
    flex: 1; min-height: 56px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    font-size: .68rem; font-weight: 600; letter-spacing: .01em;
    color: var(--muted); border-radius: 10px;
    transition: color .15s, background .15s;
}
.bn-item svg { width: 21px; height: 21px; display: block; }
.bn-item:hover { color: var(--txt); text-decoration: none; background: var(--hover); }
.bn-active { color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); }
.bn-active:hover { color: var(--brand); }

/* ------------------------------------------------ cards & groups */
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 1.05rem;
    margin-bottom: 1rem;
    transition: background .25s ease, border-color .25s ease;
}
.task-card { padding: .85rem .95rem; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease, background .18s ease; }
a .task-card:hover, .task-card:hover { border-color: color-mix(in srgb, var(--brand) 26%, var(--line)); box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.task-card.is-unread { border-left: 3px solid var(--brand); }

.task-group { margin-bottom: 1.15rem; }
.group-title {
    font-size: .95rem; font-weight: 650; margin: 1rem .15rem .55rem;
    display: flex; align-items: center; gap: .5rem;
}
.group-title .count {
    background: var(--surface); color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 999px; font-size: .72rem; font-weight: 600; padding: .06rem .55rem;
}
.task-group[data-group="overdue"] .group-title { color: var(--red); }
.task-group[data-group="overdue"] .group-title .count { background: color-mix(in srgb, var(--red) 12%, transparent); border-color: transparent; color: var(--red); }
.empty-card { text-align: center; color: var(--muted); padding: 1.6rem 1rem; }

/* task card internals */
.tc-top { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.tc-title {
    display: block; font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em;
    margin: .4rem 0 .32rem; color: var(--txt);
}
.tc-meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.tc-foot { display: flex; align-items: center; gap: .35rem; margin-top: .55rem; min-height: 26px; }
.tc-foot .small { margin-left: auto; }

.unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); display: inline-block; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }

/* ------------------------------------------------ badges & dots */
.badge {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .73rem; font-weight: 600; letter-spacing: .01em;
    padding: .16rem .6rem; border-radius: 999px; white-space: nowrap;
    border: 1px solid transparent;
}
.st-offen      { background: var(--surface); color: var(--muted); border-color: var(--line); }
.st-in_arbeit  { background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--blue); }
.st-wartet     { background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--amber); }
.st-erledigt   { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
.st-abgebrochen{ background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }

.badge.role-admin       { background: color-mix(in srgb, var(--violet) 12%, transparent); color: var(--violet); }
.badge.role-member      { background: var(--surface); color: var(--muted); border-color: var(--line); }
.badge.role-superadmin  { background: var(--txt); color: var(--card); }
.badge.lock             { background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--amber); font-size: .68rem; }

.prio { display: inline-flex; align-items: center; gap: .32rem; font-size: .8rem; color: var(--muted); }
.prio-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.prio-dringend .prio-dot { background: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 18%, transparent); }
.prio-hoch .prio-dot     { background: var(--orange); }
.prio-normal .prio-dot   { background: var(--yellow); }
.prio-niedrig .prio-dot  { background: var(--green); }

.due { font-size: .78rem; font-weight: 600; display: inline-flex; align-items: center; gap: .28rem; }
.due-overdue { color: var(--red); }
.due-today   { color: var(--amber); }
.due-soon    { color: var(--muted); }
.due-ok      { color: var(--muted); font-weight: 400; }

.chip {
    display: inline-flex; align-items: center; gap: .3rem;
    background: var(--surface); color: var(--muted);
    border: 1px solid var(--line); border-radius: 999px;
    font-size: .75rem; font-weight: 500; padding: .14rem .62rem; white-space: nowrap;
}
.chip-money { background: color-mix(in srgb, var(--green) 12%, transparent); border-color: transparent; color: var(--green); font-weight: 650; }
.chip-btn { cursor: pointer; transition: border-color .15s, color .15s, background .15s; font-family: inherit; }
.chip-btn:hover { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); background: color-mix(in srgb, var(--brand) 8%, transparent); }
/* v1.20: team badge (coloured crew dot) */
.team-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.chip-team { font-weight: 600; }
.team-box { border: 1px solid var(--line); border-radius: 10px; padding: .6rem .8rem; margin: .5rem 0; }
.team-box > summary { cursor: pointer; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.team-form { margin-top: .6rem; }

/* v1.23: private-task badge (vertraulich) — muted red, unmistakable */
.chip-private {
    background: color-mix(in srgb, var(--red, #c0392b) 10%, transparent);
    border-color: transparent;
    color: var(--red, #c0392b);
    font-weight: 650;
}
.chk-private { margin-top: .2rem; }

/* ------------------------------------------------ avatars */
.avatar {
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: .8rem; font-weight: 700; flex: none;
    box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--line);
}
.av-0 { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.av-1 { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.av-2 { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.av-3 { background: linear-gradient(135deg, #f59e0b, #d97706); }
.av-4 { background: linear-gradient(135deg, #ec4899, #db2777); }
.av-sm { width: 26px; height: 26px; font-size: .66rem; box-shadow: none; }
.av-lg { width: 56px; height: 56px; font-size: 1.25rem; }

/* ------------------------------------------------ buttons & forms */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-height: 44px; padding: .55rem 1.05rem;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--card); color: var(--txt);
    font-size: .94rem; font-weight: 600; font-family: inherit;
    cursor: pointer; text-align: center; text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: background .15s, border-color .15s, box-shadow .15s, transform .15s, color .15s;
}
.btn:hover { background: var(--hover); text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn-primary {
    background: var(--brand); border-color: color-mix(in srgb, var(--brand) 82%, #000);
    color: var(--brand-contrast);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--brand) 40%, transparent), 0 4px 12px color-mix(in srgb, var(--brand) 24%, transparent);
}
.btn-primary:hover { background: color-mix(in srgb, var(--brand) 90%, #000); }
.btn-secondary {
    background: color-mix(in srgb, var(--brand) 9%, var(--card));
    border-color: color-mix(in srgb, var(--brand) 28%, transparent);
    color: var(--brand);
}
.btn-secondary:hover { background: color-mix(in srgb, var(--brand) 15%, var(--card)); }
.btn-danger { background: var(--card); border-color: color-mix(in srgb, var(--red) 35%, transparent); color: var(--red); }
.btn-danger:hover { background: color-mix(in srgb, var(--red) 8%, var(--card)); }
.btn-sm { min-height: 38px; padding: .3rem .75rem; font-size: .85rem; border-radius: 9px; }
.btn-block { width: 100%; }
.btn-link { background: none; border: 0; color: var(--brand); cursor: pointer; padding: 0; font-size: .84rem; font-family: inherit; box-shadow: none; }
.btn-link:hover { text-decoration: underline; transform: none; background: none; }
.btn-link.danger { color: var(--red); }

input, select, textarea {
    width: 100%;
    font-size: 16px;                 /* >= 16px: prevents iOS zoom */
    font-family: inherit;
    color: var(--txt);
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: .6rem .75rem;
    min-height: 44px;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
textarea { min-height: 0; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--muted) 45%, var(--line-strong)); }
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--brand); box-shadow: var(--ring);
}
input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; accent-color: var(--brand); }
input[type="color"] { padding: .2rem; height: 44px; }
input[type="file"] { padding: .45rem .5rem; font-size: .9rem; }

label { display: block; margin-bottom: .75rem; font-weight: 600; font-size: .88rem; color: var(--txt); }
label input, label select, label textarea { margin-top: .35rem; font-weight: 400; }

.stack > * + * { margin-top: .25rem; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 0 .9rem; }

fieldset.assignee-box {
    border: 1px solid var(--line); border-radius: var(--radius);
    margin: 0 0 .9rem; padding: .8rem .9rem; background: color-mix(in srgb, var(--surface) 45%, var(--card));
}
fieldset.assignee-box legend { font-weight: 600; padding: 0 .35rem; font-size: .88rem; }
.assignee-box .chk { display: flex; align-items: center; gap: .55rem; margin: .4rem 0; font-weight: 400; }

.chk { display: flex; align-items: center; gap: .55rem; font-weight: 400; }

/* ------------------------------------------------ filters & bulk */
.filter-bar { margin-bottom: 1rem; }
.filter-bar .search { margin-bottom: .55rem; border-radius: 999px; padding-left: 1rem; }
.filter-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.filter-row select, .filter-row .btn { width: auto; flex: 1 1 40%; min-width: 140px; }

.bulk-bar {
    display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: .7rem .9rem; margin-bottom: .7rem;
    box-shadow: var(--shadow-md); position: sticky; top: 62px; z-index: 30;
}
.bulk-row { display: flex; gap: .55rem; align-items: flex-start; margin-bottom: .6rem; }
.bulk-row input { width: 22px; margin-top: 1.05rem; }
.bulk-row .bulk-card { flex: 1; }
.bulk-row .bulk-card .card { margin-bottom: 0; }

/* ------------------------------------------------ stats row */
.stat-row {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem;
    margin-bottom: 1.1rem;
}
.stat {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-md);
    padding: .8rem .3rem; text-align: center;
    transition: transform .15s ease, box-shadow .15s ease;
}
.stat:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.stat strong { display: block; font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; }
.stat span { font-size: .7rem; color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* ------------------------------------------------ task detail */
.task-head h1.task-title { margin: .5rem 0 .45rem; font-size: 1.3rem; }
.task-desc { white-space: pre-line; }
.head-actions { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .7rem; }
.head-actions .inline { display: inline-flex; }

/* v1.12 category rows (superadmin > Kategorien) */
.cat-row { align-items: center; margin-top: .55rem; }
.cats-edit input[type="text"] { flex: 1 1 180px; width: auto; }
.cats-edit input[type="number"] { flex: 0 0 92px; width: auto; }
.cat-row .muted { white-space: nowrap; }

.assignee-row {
    /* v1.19.1: wrap is required so .as-status (width:100%) drops to its own
       line on phones — without it the status form squeezed over the name */
    display: flex; flex-wrap: wrap; gap: .65rem; align-items: flex-start;
    padding: .7rem 0; border-top: 1px solid var(--line);
}
.assignee-row:first-of-type { border-top: 0; }
.as-main { flex: 1; min-width: 0; }
.as-main strong { font-size: .95rem; }
.as-main > div { margin-top: .22rem; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.as-status { display: flex; gap: .45rem; width: 100%; margin-top: .55rem; }
.as-status select { flex: 1; min-width: 0; }
.reason-input { flex: 1; min-width: 0; }

/* v1.19.1 mobile: status form gets its own rows — select + save on one line,
   reason input full-width below (readable placeholder, roomy touch target) */
@media (max-width: 719.98px) {
    .as-status { flex-wrap: wrap; margin-top: 0; }
    .as-status .reason-input { flex: 1 1 100%; }
}

.file-list { list-style: none; margin: 0 0 .65rem; padding: 0; }
.file-list li {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    padding: .55rem .2rem; border-top: 1px solid var(--line); font-size: .92rem;
    border-radius: 6px;
}
.file-list li:first-child { border-top: 0; }
.file-list li:hover { background: var(--hover); }
.upload-form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.upload-form input[type="file"] { flex: 1 1 200px; width: auto; }

.comment-form { margin-top: 1rem; }
.mention-hint { display: flex; gap: .4rem; flex-wrap: wrap; margin: .45rem 0 .65rem; }

/* timeline */
.timeline { list-style: none; margin: 0; padding: 0; }
.tl-item {
    position: relative;
    padding: .7rem 0 .7rem 1.35rem;
}
.tl-item::before {
    content: ''; position: absolute; left: 5px; top: 1.15rem;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--line-strong);
    box-shadow: 0 0 0 3px var(--card);
}
.tl-item::after {
    content: ''; position: absolute; left: 8.5px; top: 1.9rem; bottom: -.35rem;
    width: 1px; background: var(--line);
}
.tl-item:last-child::after { display: none; }
.tl-comment::before { background: var(--brand); }
.tl-status::before  { background: var(--amber); }
.tl-file::before    { background: var(--violet); }
.tl-create::before  { background: var(--green); }
.tl-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.tl-head time { margin-left: auto; }
.tl-what { color: var(--muted); font-size: .88rem; }
.tl-body {
    margin-top: .4rem; background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px; padding: .6rem .7rem; font-size: .93rem;
    overflow-wrap: break-word;
}
.tl-reason { background: color-mix(in srgb, var(--amber) 8%, var(--card)); }
mark { background: color-mix(in srgb, var(--yellow) 55%, transparent); color: inherit; border-radius: 3px; padding: 0 .12em; }

/* sticky mobile action bar */
.sticky-actions {
    position: fixed; left: 0; right: 0; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 45;
    display: flex; gap: .5rem; padding: .55rem .9rem;
    background: var(--glass);
    border-top: 1px solid var(--line);
}
.sticky-actions .btn { flex: 1; }
#status-anchor { display: block; height: 90px; }

/* ------------------------------------------------ flash (toast-like) */
.flash {
    display: flex; align-items: flex-start; gap: .55rem;
    border-radius: var(--radius-sm); padding: .75rem .95rem; margin: .7rem 0;
    font-size: .93rem; border: 1px solid;
    box-shadow: var(--shadow-md);
    animation: flash-in .3s cubic-bezier(.21, 1.02, .73, 1) both;
}
@keyframes flash-in {
    from { opacity: 0; transform: translateY(-8px) scale(.985); }
    to   { opacity: 1; transform: none; }
}
.flash-success, .flash-error, .flash-info { position: relative; }
.flash-success { background: color-mix(in srgb, var(--green) 9%, var(--card)); border-color: color-mix(in srgb, var(--green) 30%, transparent); color: color-mix(in srgb, var(--green) 70%, var(--txt)); }
.flash-error   { background: color-mix(in srgb, var(--red) 9%, var(--card)); border-color: color-mix(in srgb, var(--red) 32%, transparent); color: color-mix(in srgb, var(--red) 72%, var(--txt)); }
.flash-info    { background: color-mix(in srgb, var(--blue) 9%, var(--card)); border-color: color-mix(in srgb, var(--blue) 30%, transparent); color: color-mix(in srgb, var(--blue) 72%, var(--txt)); }

/* icon via masked SVG — no PHP changes needed */
.flash-success::before, .flash-error::before, .flash-info::before {
    content: ''; flex: none; width: 18px; height: 18px; margin-top: .1rem;
    background-color: currentColor;
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
}
.flash-success::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8.5 12.5 2.5 2.5 5-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8.5 12.5 2.5 2.5 5-6'/%3E%3C/svg%3E"); }
.flash-error::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.8h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.8h.01'/%3E%3C/svg%3E"); }
.flash-info::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 11v5.5'/%3E%3Cpath d='M12 7.6h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 11v5.5'/%3E%3Cpath d='M12 7.6h.01'/%3E%3C/svg%3E"); }

/* ------------------------------------------------ centered pages (login/install) */
.center-page {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 1.2rem;
    background:
        radial-gradient(700px 340px at 12% -8%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 65%),
        radial-gradient(700px 340px at 95% 8%, color-mix(in srgb, var(--violet) 7%, transparent), transparent 60%),
        var(--bg);
}
.login-card, .install-card { width: 100%; max-width: 430px; margin: 0; padding: 1.5rem; box-shadow: var(--shadow-lg); }
.install-card { max-width: 580px; }
.brand-row { display: flex; align-items: center; gap: .65rem; margin-bottom: .4rem; font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
.brand-row .logo-fallback { height: 34px; width: 34px; }

.pw-table { width: 100%; border-collapse: collapse; margin: .7rem 0; }
.pw-table th, .pw-table td { text-align: left; padding: .55rem .45rem; border-top: 1px solid var(--line); font-weight: 400; }
.pw-table th { width: 45%; font-weight: 600; }
.pw-code { font-size: 1.02rem; font-weight: 700; letter-spacing: .05em; color: var(--brand); }
.steps { padding-left: 1.3rem; }
.steps li { margin: .3rem 0; }

/* ------------------------------------------------ lists & tables */
.user-list { display: block; }
.user-row {
    display: flex; gap: .75rem; align-items: center; flex-wrap: wrap;
    padding: .8rem .35rem; border-top: 1px solid var(--line);
    transition: background .15s;
    border-radius: 8px;
}
.user-row:first-child { border-top: 0; }
.user-row:hover { background: var(--hover); }
.user-row.is-inactive { opacity: .55; }
.ur-main { flex: 1; min-width: 140px; display: flex; flex-direction: column; }
.ur-meta { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; width: 100%; }
.ur-actions { display: flex; gap: .45rem; flex-wrap: wrap; width: 100%; }

.profile-head { display: flex; align-items: center; gap: .9rem; margin-bottom: .7rem; }

.tab-bar { display: flex; gap: .35rem; overflow-x: auto; margin-bottom: .9rem; padding-bottom: .25rem; }
.tab-bar a {
    flex: none; padding: .5rem .95rem; border-radius: 999px;
    border: 1px solid var(--line); background: var(--card);
    font-size: .88rem; font-weight: 600; color: var(--muted);
    transition: color .15s, border-color .15s, background-color .15s, box-shadow .15s;
}
.tab-bar a:hover { color: var(--txt); border-color: var(--line-strong); text-decoration: none; }
.tab-bar a.on {
    background: var(--brand); border-color: color-mix(in srgb, var(--brand) 82%, #000); color: var(--brand-contrast);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--brand) 28%, transparent);
}

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.table-wrap .data-table { margin: 0; }
.data-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.data-table th, .data-table td { text-align: left; padding: .68rem .8rem; border-bottom: 1px solid var(--line); }
.data-table th {
    color: var(--muted); font-weight: 650; font-size: .72rem;
    text-transform: uppercase; letter-spacing: .06em;
    background: color-mix(in srgb, var(--surface) 55%, var(--card));
}
.data-table tbody tr { transition: background .12s; }
.data-table tbody tr:hover { background: var(--hover); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table td:first-child { display: flex; align-items: center; gap: .5rem; }

.cron-url { display: block; padding: .7rem .8rem; margin: .45rem 0 .9rem; font-size: .8rem; }
.perm-group-title { margin-top: 1.05rem; }
.perm-grid { display: grid; grid-template-columns: 1fr; }
.perm-grid .chk {
    padding: .42rem .55rem; margin: 0 -.55rem; border-radius: 8px;
    transition: background .12s;
}
.perm-grid .chk:hover { background: var(--hover); }

/* subtle scrollbars (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* motion preferences */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ============================================================
   v1.6.1 PERFORMANCE MODE (Superadmin > Design > "Performance-Modus")
   html[data-perf="1"]: system font stack (zero webfont bytes), flat
   surfaces (no large shadows, no gradients). One compact block, no
   extra request. The @font-face below never downloads because no
   element uses the 'Inter' family in this mode.
   ============================================================ */
html[data-perf="1"] body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
html[data-perf="1"] .card,
html[data-perf="1"] .login-card,
html[data-perf="1"] .install-card {
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
html[data-perf="1"] .topbar,
html[data-perf="1"] .bottom-nav,
html[data-perf="1"] .sticky-actions {
    box-shadow: none;
}
html[data-perf="1"] .topbar {
    background: var(--card);
}
html[data-perf="1"] .bottom-nav {
    background: var(--card);
}
html[data-perf="1"] .btn-primary,
html[data-perf="1"] .tab-bar a.on {
    box-shadow: none;
}
html[data-perf="1"] .foot-nav a {
    box-shadow: none;
}
html[data-perf="1"] #swapbar {
    background: var(--brand);
}

/* ============================================================
   Desktop (>= 720px): airy two-column dashboard, full tables
   ============================================================ */
@media (min-width: 720px) {
    .container { padding: 1.5rem 1.5rem 2rem; }
    body { padding-bottom: 1.5rem; }
    .bottom-nav, .sticky-actions { display: none; }
    h1 { font-size: 1.55rem; }
    .card { padding: 1.2rem; }

    .form-grid { grid-template-columns: 1fr 1fr; }
    .perm-grid { grid-template-columns: 1fr 1fr; }
    .filter-row select, .filter-row .btn { flex: 0 1 auto; min-width: 160px; }
    .stat-row { gap: .8rem; }

    .as-status { width: auto; margin-top: 0; }
    .assignee-row { align-items: center; flex-wrap: nowrap; }
    .ur-actions { width: auto; margin-left: auto; }
    .ur-meta { width: auto; }

    /* two-column group layout on the dashboard */
    main[data-active="dashboard"] { column-count: 2; column-gap: 1.3rem; }
    main[data-active="dashboard"] .page-head,
    main[data-active="dashboard"] .stat-row { column-span: all; }
    .task-group, .card { break-inside: avoid; }

    main[data-active="tasks"] .bulk-row .bulk-card .task-card { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem 1rem; }
    main[data-active="tasks"] .bulk-row .bulk-card .task-card .tc-title { grid-column: 1 / -1; margin: .2rem 0; }

    /* footer menu v1.12.2: centered pills, brand line alone underneath */
    .page-foot { margin-top: 2.2rem; padding-bottom: 2rem; text-align: center; }
    /* .page-foot prefix matches the base hide rule's specificity — required,
       otherwise display:none would win at every width (caught by E2E) */
    .page-foot .foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
    .foot-nav a { font-size: .9rem; padding: .5rem 1.05rem; box-shadow: var(--shadow-sm); }
    .foot-nav a:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
    .foot-brand { margin-top: 1.1rem; font-size: .82rem; }
}

@media print {
    .topbar, .bottom-nav, .sticky-actions, .page-foot, .head-actions, .theme-toggle,
    .cal-nav, .cal-form-card, .cal-toolbar .cal-nav { display: none; }
    body { padding-bottom: 0; }
    .card { box-shadow: none; border-color: #ccc; }
}

/* Superadmin > Mail: system status list */
.sys-list { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .35rem; }
.sys-list li { display: flex; gap: .5rem; align-items: baseline; padding: .3rem .55rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: .85rem; flex-wrap: wrap; }
.sys-list li strong { color: var(--txt); }

/* ============================================================
   v1.6 Instant UI: slim top progress bar shown while an
   in-page navigation (swap) fetches the next page.
   ============================================================ */
#swapbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 9999;
    background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 55%, #fff));
    transform-origin: 0 50%;
    transform: scaleX(0);
    opacity: 0;
    pointer-events: none;
    border-radius: 0 999px 999px 0;
}
#swapbar.on {
    opacity: 1;
    animation: swapbar-run 1.4s cubic-bezier(.2, .6, .35, 1) forwards;
}
@keyframes swapbar-run {
    0%   { transform: scaleX(0); }
    55%  { transform: scaleX(.72); }
    100% { transform: scaleX(.92); }
}

/* ============================================================
   Demo mode (v1.8): thin sandbox banner + login page buttons
   ============================================================ */
.demo-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .15rem .9rem;
    background: var(--brand);
    color: var(--brand-contrast);
    font-size: .78rem;
    line-height: 1.4;
    padding: .38rem 1rem;
    text-align: center;
}
.demo-bar .demo-tag {
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.demo-bar a {
    color: var(--brand-contrast);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* v1.24: language row on the login page (Deutsch / English / Română) */
.login-langs {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: .9rem;
}
.login-langs .lang-toggle {
    min-width: 64px;
    padding: .42rem .8rem;
}
.login-langs .lang-toggle.on {
    color: var(--brand);
    border-color: var(--brand);
    background: var(--hover);
}

.login-divider {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 1rem 0 .7rem;
    color: var(--muted);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .07em;
}
.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line-strong);
}
.demo-btns { display: flex; flex-direction: column; gap: .5rem; }
.demo-note { margin-top: .65rem; }

/* ============================================================
   v1.10 "Chef-Paket": Cockpit (management KPIs) + Kanban board
   ============================================================ */

/* ------------------------------------------------ cockpit */
.kpi-row { flex-wrap: wrap; }
.kpi-row .stat { flex: 1 1 calc(33.33% - .5rem); }
.kpi-red strong   { color: var(--red); }
.kpi-green strong { color: var(--green); }
.kpi-money strong { color: var(--brand); font-size: 1.15rem; }
.chart-card svg.bars { display: block; width: 100%; height: auto; margin-top: .4rem; }
.card h3 { margin: 0 0 .6rem; font-size: .95rem; }

.stack-bar {
    display: flex; height: 14px; border-radius: 999px; overflow: hidden;
    background: var(--surface); border: 1px solid var(--line);
}
.stack-bar .seg { height: 100%; }
.stack-bar .seg + .seg { box-shadow: inset 1px 0 0 var(--card); }
.seg-open { background: var(--blue); }
.seg-wip  { background: var(--amber); }
.seg-wait { background: var(--violet); }
.mix-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: .65rem; font-size: .84rem; color: var(--muted); }
.mix-legend b { color: var(--txt); }
.mix-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .35rem; }

.load-list { display: grid; gap: .7rem; }
.load-row { display: flex; align-items: center; gap: .6rem; }
.load-row.is-inactive { opacity: .55; }
.load-main { flex: 1; min-width: 0; }
.load-head { display: flex; justify-content: space-between; gap: .6rem; font-size: .86rem; margin-bottom: .25rem; }
.load-name { font-weight: 600; }
.load-nums { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.load-nums .hot { color: var(--red); }
.load-bar { height: 7px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.load-fill { height: 100%; border-radius: 999px; background: var(--brand); transition: width .3s ease; }

.overdue-list { display: grid; gap: .45rem; }
.ov-row {
    display: flex; align-items: center; gap: .7rem;
    padding: .45rem .6rem; border: 1px solid color-mix(in srgb, var(--red) 18%, var(--line));
    border-radius: var(--radius-sm); background: color-mix(in srgb, var(--red) 4%, var(--card));
}
.ov-days {
    flex: 0 0 auto; font-size: .74rem; font-weight: 700; color: var(--red);
    background: color-mix(in srgb, var(--red) 12%, transparent);
    padding: .18rem .5rem; border-radius: 999px; white-space: nowrap;
}
.ov-days.sev { background: var(--red); color: #fff; }
.ov-main { min-width: 0; display: grid; }
.ov-main a { font-weight: 600; color: var(--txt); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-main a:hover { color: var(--brand); }

@media (min-width: 720px) {
    .kpi-row .stat { flex: 1 1 0; }
}

/* ------------------------------------------------ board */
.board-hint { margin: -.4rem .1rem .7rem; }
.board {
    display: grid; grid-auto-flow: column;
    grid-auto-columns: minmax(228px, 1fr);
    gap: .7rem; overflow-x: auto;
    padding-bottom: .6rem; align-items: start;
}
.board-col {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: .55rem;
    display: flex; flex-direction: column; gap: .55rem;
    min-height: 150px; transition: outline-color .12s, background .12s;
    outline: 2px dashed transparent; outline-offset: -3px;
}
.board-col.drop-hot {
    outline-color: var(--brand);
    background: color-mix(in srgb, var(--brand) 7%, var(--surface));
}
.board-col header {
    display: flex; align-items: center; justify-content: space-between;
    padding: .15rem .3rem 0;
}
.board-col h2 {
    margin: 0; font-size: .74rem; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .06em;
}
.board-col .count {
    background: var(--card); border: 1px solid var(--line); color: var(--muted);
    border-radius: 999px; font-size: .72rem; font-weight: 600; padding: .05rem .55rem;
}
.col-body { display: flex; flex-direction: column; gap: .55rem; min-height: 64px; }
.board-empty {
    color: var(--muted); font-size: .8rem; text-align: center;
    padding: 1.1rem .4rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
}
.board-card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
    padding: .6rem .7rem; cursor: grab;
    touch-action: none;               /* long-press drag owns the gesture */
    user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
    transition: box-shadow .15s ease, transform .15s ease;
}
.board-card:hover { box-shadow: var(--shadow-md); }
.board-card.drag-src { opacity: .38; border-style: dashed; }
.board-ghost {
    position: fixed; z-index: 999; pointer-events: none;
    opacity: .96; box-shadow: var(--shadow-lg); transform: rotate(2.5deg) scale(1.02);
}
body.is-dragging { user-select: none; -webkit-user-select: none; cursor: grabbing; }
body.is-dragging .board-card { cursor: grabbing; }
.bc-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 18px; }
.bc-title {
    display: block; margin: .3rem 0 .35rem; font-weight: 600; font-size: .88rem;
    line-height: 1.35; color: var(--txt); text-decoration: none;
}
.bc-title:hover { color: var(--brand); text-decoration: none; }
.bc-meta { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; min-height: 22px; }
.bc-meta .due { font-size: .74rem; }
.bc-meta .avatar { margin-left: auto; }
.bc-meta .avatar + .avatar { margin-left: -.55rem; }
.due-wait { color: var(--violet); }
.dlg-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .9rem; }

dialog.board-dialog {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--card); color: var(--txt);
    box-shadow: var(--shadow-lg); padding: 1.1rem 1.2rem;
    width: min(92vw, 400px);
}
dialog.board-dialog::backdrop { background: rgba(10, 14, 20, .45); }
dialog.board-dialog h3 { margin: 0 0 .7rem; font-size: 1rem; }
dialog.board-dialog input[type="text"] { width: 100%; }

/* 6 nav items (admins): slightly tighter bottom-nav labels */
.bottom-nav:has(.bn-item:nth-child(6)) .bn-item { font-size: .62rem; }
.bottom-nav:has(.bn-item:nth-child(6)) .bn-item svg { width: 19px; height: 19px; }

/* 7 nav items (admins with Termine, v1.14): tighter still */
.bottom-nav:has(.bn-item:nth-child(7)) .bn-item { font-size: .56rem; }
.bottom-nav:has(.bn-item:nth-child(7)) .bn-item svg { width: 18px; height: 18px; }

/* ============================================================
   Calendar module (v1.14) — month grid, day panel, rights matrix.
   Event chips use --cal (calendar colour) set inline per chip.
   ============================================================ */
.cal-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .7rem; margin-bottom: .75rem; }
.cal-nav { display: flex; gap: .35rem; }
.cal-month { margin: 0; font-size: 1.02rem; font-weight: 700; }
.cal-legend {
    display: flex; flex-wrap: wrap; gap: .3rem .85rem; margin-left: auto;
    font-size: .74rem; color: var(--muted);
}
.cal-lg-item { display: inline-flex; align-items: center; gap: .32rem; }
.cal-dot {
    width: .64rem; height: .64rem; border-radius: 50%;
    display: inline-block; flex: 0 0 auto;
}

.cal-weekhead {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 3px;
}
.cal-weekhead span {
    text-align: center; font-size: .66rem; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .05em; padding: .12rem 0;
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-cell {
    background: var(--surface); border-radius: 8px; min-height: 64px;
    padding: 3px; display: flex; flex-direction: column; gap: 2px;
    overflow: hidden; min-width: 0;
}
.cal-cell.cal-out { opacity: .42; }
.cal-cell.cal-sel { outline: 2px solid var(--brand); outline-offset: -2px; background: var(--card); }
.cal-cell.cal-today { box-shadow: inset 0 0 0 2px var(--brand); }
.cal-daynum {
    font-size: .7rem; font-weight: 700; color: var(--muted);
    text-decoration: none; padding: 0 4px 1px; align-self: flex-start;
    border-radius: 6px; line-height: 1.5;
}
.cal-daynum:hover { color: var(--txt); text-decoration: none; }
.cal-cell.cal-today .cal-daynum { background: var(--brand); color: var(--brand-contrast); }
.cal-ev {
    display: block; font-size: .66rem; line-height: 1.3; font-weight: 600;
    color: #fff; background: var(--cal, var(--brand));
    border-radius: 5px; padding: 1px 5px; text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.cal-ev:hover { text-decoration: none; filter: brightness(1.09); }
.cal-ev-t { font-weight: 700; margin-right: 2px; opacity: .85; font-variant-numeric: tabular-nums; }
.cal-more {
    font-size: .64rem; font-weight: 700; color: var(--muted);
    text-decoration: none; padding: 0 3px 1px;
}
.cal-more:hover { color: var(--txt); text-decoration: none; }

/* selected-day panel */
.cal-evrow {
    display: flex; align-items: flex-start; gap: .55rem;
    padding: .6rem 0; border-bottom: 1px solid var(--line);
}
.cal-evrow:last-of-type { border-bottom: 0; }
.cal-ev-time {
    font-variant-numeric: tabular-nums; font-size: .76rem; font-weight: 700;
    color: var(--muted); min-width: 6.2rem; padding-top: .12rem; white-space: nowrap;
}
.cal-evrow .cal-dot { margin-top: .3rem; }
.cal-ev-body { flex: 1; min-width: 0; }
.cal-ev-body strong { display: block; font-size: .92rem; line-height: 1.35; }
.cal-ev-body .muted { margin-top: .1rem; }
.cal-ev-desc { margin: .3rem 0 0; font-size: .8rem; color: var(--muted); }
.cal-evrow .head-actions { gap: .35rem; margin-top: 0; align-items: center; }

/* event form: the all-day switch hides the two time fields */
#cal-form.cal-allday-on .cal-only-time { display: none; }
.cal-form-card { border-left: 4px solid var(--brand); }

/* superadmin calendar rows */
.cal-row { align-items: center; margin-top: .55rem; }
.cal-edit input[type="text"] { flex: 1 1 170px; width: auto; }
.cal-edit select { width: auto; }
.cal-edit input[type="number"] { flex: 0 0 88px; width: auto; }
.cal-row .muted { white-space: nowrap; }
.cal-chk { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; font-size: .82rem; }

/* rights matrix (superadmin only) */
.rights-matrix th.rm-cal { font-size: .8rem; }
.rights-matrix th.rm-cal .cal-dot { margin-right: .3rem; }
.rights-matrix th.rm-l { text-align: center; font-size: .68rem; color: var(--muted); font-weight: 700; }
.rights-matrix td.rm-cell { text-align: center; padding: .32rem .3rem; }
.rights-matrix td.rm-cell label { display: inline-flex; margin: 0; }
.rights-matrix td.rm-cell input[type="checkbox"] {
    width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--brand);
}
.rights-matrix .rm-sa-row th, .rights-matrix .rm-sa-row td { background: var(--surface); }
.rights-matrix .rm-sa-row td { color: var(--muted); font-style: italic; font-size: .82rem; }
.rights-matrix .rm-sa { text-align: center; color: var(--green); font-weight: 700; font-style: normal; }

@media (max-width: 719px) {
    .cal-cell { min-height: 54px; }
    .cal-ev { font-size: .58rem; padding: 1px 3px; }
    .cal-legend { margin-left: 0; width: 100%; }
    .cal-ev-time { min-width: 4.6rem; }
}

/* v1.15 CalDAV sync (superadmin > Kalender > Sync) */
.caldav-card { border-left: 4px solid var(--violet); }
.caldav-paused { font-weight: 600; }
.caldav-status { margin-top: .9rem; }
.caldav-ok { color: var(--green); font-weight: 700; }
.caldav-err { color: var(--red); font-weight: 700; }
.caldav-log { margin-top: .8rem; border-top: 1px solid var(--line); padding-top: .55rem; }
.caldav-log summary { cursor: pointer; font-size: .84rem; font-weight: 600; color: var(--muted); }
.caldav-log ul { margin-top: .5rem; font-size: .8rem; }
.caldav-maps .caldav-map-row { align-items: center; margin-top: .55rem; }
.caldav-map-name { font-weight: 600; min-width: 9.5rem; }
.caldav-map-row select { flex: 1 1 15rem; max-width: 100%; min-width: 0; }
@media (max-width: 719px) {
    .caldav-map-row { align-items: flex-start; }
    .caldav-map-name { min-width: 0; flex: 1 1 100%; }
    /* v1.15: the inline calendar edit row must wrap on narrow screens
       (name/color/sort/active/save otherwise overflow at 375px) */
    .cal-row { flex-wrap: wrap; }
    .cal-edit { flex-wrap: wrap; row-gap: .4rem; }
    .cal-edit input[type="text"] { flex: 1 1 100%; }
    .cal-edit select { flex: 1 1 auto; }
}

/* v1.17: per-user email notification switch (superadmin > Mail) */
.mailpref-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; flex-wrap: wrap;
    padding: .55rem 0; border-bottom: 1px solid var(--line);
}
.mailpref-row:last-child { border-bottom: 0; }
.mailpref-row .head-actions { margin-left: auto; align-items: center; }
@media (max-width: 719px) {
    .mailpref-row .head-actions { margin-left: 0; }
}

/* ===================== v1.18: notification center ===================== */
.notif-wrap { position: relative; }
.notif-bell {
    position: relative; width: 34px; height: 34px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1px solid var(--line); background: var(--card);
    color: var(--muted); cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}
.notif-bell:hover { color: var(--txt); border-color: var(--line-strong); background: var(--hover); }
.notif-bell:focus-visible { outline: none; box-shadow: var(--ring); }
.notif-bell svg { width: 17px; height: 17px; display: block; }
.notif-bell.has-unread { color: var(--brand); }
.notif-badge {
    position: absolute; top: -4px; right: -5px; min-width: 17px; height: 17px;
    padding: 0 4px; border-radius: 9px; background: var(--red); color: #fff;
    font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
    box-shadow: 0 0 0 2px var(--card);
}
.notif-panel {
    position: absolute; right: 0; top: calc(100% + 10px);
    width: min(360px, calc(100vw - 24px));
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
    z-index: 90; overflow: hidden;
    animation: notif-panel-in .16s ease;
}
@keyframes notif-panel-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.notif-head {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .6rem .9rem; border-bottom: 1px solid var(--line);
}
.notif-head strong { font-size: .85rem; }
.notif-markall {
    border: 0; background: none; color: var(--brand); font-size: .78rem;
    font-weight: 600; cursor: pointer; padding: 2px 4px; border-radius: 6px;
}
.notif-markall:hover { background: var(--hover); }
.notif-list { max-height: min(55vh, 420px); overflow-y: auto; overscroll-behavior: contain; }
.notif-item {
    display: block; position: relative;
    padding: .6rem .9rem .6rem 1.15rem;
    border-bottom: 1px solid var(--line);
    color: var(--txt); text-decoration: none;
}
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--hover); }
.notif-item .notif-text { display: block; font-size: .84rem; line-height: 1.4; }
.notif-item .notif-time { display: block; font-size: .72rem; color: var(--muted); margin-top: 2px; }
.notif-item.unread .notif-text { font-weight: 600; }
.notif-item.unread::before {
    content: ''; position: absolute; left: .42rem; top: .95rem;
    width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
}
.notif-empty { padding: 1.2rem .9rem; color: var(--muted); font-size: .82rem; text-align: center; }
.notif-toasts {
    position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 300;
    display: flex; flex-direction: column; gap: 8px;
    width: min(420px, calc(100vw - 24px)); pointer-events: none;
}
.notif-toast {
    pointer-events: auto; cursor: pointer;
    background: var(--card); border: 1px solid var(--line);
    border-left: 3px solid var(--brand); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg); padding: .6rem .85rem;
    animation: notif-toast-in .25s ease;
}
@keyframes notif-toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.notif-toast .notif-toast-text { display: block; font-size: .85rem; line-height: 1.4; }
.notif-sound-row { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.notif-sound-row input { width: 17px; height: 17px; accent-color: var(--brand); }

/* v1.19: Web Push opt-in card (profile) */
.push-status { margin: .2rem 0 .8rem; font-size: .84rem; line-height: 1.45; }
.push-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.push-actions .btn[hidden] { display: none; }
/* v1.19.7: live notification-permission indicator */
.push-perm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .35rem; }
.push-perm-granted { background: #1a9c5d; }
.push-perm-default { background: #d9a11a; }
.push-perm-denied { background: #c0392b; }
@media print {
    .notif-wrap, .notif-toasts { display: none !important; }
}

/* ===== v1.21: QR login card (print page) ===== */
.qr-stage { background: var(--bg); }

/* ===== v1.21: worker view - big buttons for the crew ===== */
.worker-body { background: var(--bg); padding-bottom: 2rem; }
.wv-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    padding: 1.1rem 1rem .4rem; max-width: 640px; margin: 0 auto;
}
.wv-greeting { font-size: 1.35rem; font-weight: 700; }
.wv-date { color: var(--muted); font-size: .92rem; margin-top: .15rem; }
.wv-head-actions { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
.wv-link { font-size: .85rem; color: var(--brand); text-decoration: none; }
.wv-link:hover { text-decoration: underline; }
.wv-main { max-width: 640px; margin: 0 auto; padding: .6rem 1rem 2rem; }
.wv-done-count {
    background: color-mix(in srgb, var(--green) 12%, transparent);
    color: var(--green); font-weight: 600; font-size: .92rem;
    border-radius: 10px; padding: .55rem .8rem; margin: .4rem 0 .8rem; text-align: center;
}
.wv-group { margin: 1.2rem .1rem .6rem; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.wv-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 16px;
    padding: 1rem 1rem .9rem; margin-bottom: 1rem; box-shadow: var(--shadow-sm);
}
.wv-card.wv-overdue { border-color: color-mix(in srgb, var(--red) 55%, transparent); border-width: 2px; }
.wv-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-bottom: .35rem; }
.wv-card-title { font-size: 1.18rem; font-weight: 700; line-height: 1.3; margin: .1rem 0 .3rem; }
.wv-card-desc { color: var(--muted); font-size: .92rem; line-height: 1.45; margin: .2rem 0 .6rem; }
.wv-actions { display: flex; gap: .7rem; margin-top: .7rem; }
.wv-actions form { flex: 1 1 0; display: flex; }
.wv-actions form:last-child { flex: 1.35 1 0; }
.wv-btn {
    width: 100%; min-height: 58px; border-radius: 14px; border: 2px solid transparent;
    font-size: 1.08rem; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.wv-btn:active { transform: scale(.98); }
.wv-btn-accept {
    background: color-mix(in srgb, var(--brand) 10%, var(--card));
    color: var(--brand); border-color: color-mix(in srgb, var(--brand) 45%, transparent);
}
.wv-btn-done { background: var(--brand); color: #fff; }
.wv-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    font-weight: 700; font-size: 1rem; border-radius: 12px; padding: .8rem 1rem;
}
.wv-badge-accepted {
    background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand);
    flex: 1 1 0; justify-content: center; border: 2px dashed color-mix(in srgb, var(--brand) 40%, transparent);
}
.wv-badge-done {
    background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green);
    width: 100%; justify-content: center;
}
.wv-details { display: inline-block; margin-top: .55rem; font-size: .85rem; color: var(--muted); }
.wv-flash { max-width: 640px; margin: .4rem auto .2rem; padding: .6rem .9rem; border-radius: 12px; font-size: .92rem; }
.wv-flash-success { background: color-mix(in srgb, var(--green) 13%, transparent); color: var(--green); }
.wv-flash-error { background: color-mix(in srgb, var(--red) 13%, transparent); color: var(--red); }
.wv-empty { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.wv-empty-icon {
    width: 64px; height: 64px; border-radius: 50%; margin: 0 auto .8rem;
    background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green);
    display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 700;
}
/* The worker page intentionally has no bottom-nav chrome of its own; hide
   the app's nav there is unnecessary because worker.php renders standalone. */

/* v1.22.0: Superadmin > Reset - two-column wiped/kept comparison */
.reset-cols { display: grid; grid-template-columns: 1fr; gap: .8rem; margin: .9rem 0; }
@media (min-width: 720px) { .reset-cols { grid-template-columns: 1fr 1fr; } }