/* ============================================================================
   REM-Frontend — GLASui-Theme-Tokens auf Radzen.
   Brand: Primär #0F7BC0, Sekundär #E91E63 (Audit Token-Tabelle: Sekundärfarbe war
   im Next.js-FE NICHT definiert → hier eingeführt). Font Roboto, Icons Material Symbols.
   Bindet sich über --rz-* an Radzen an, ergänzt eigene --rem-* Tokens.

   MERGE-MAP: Beim Lift kommen Tokens aus dem Portal-Theme (DefaultTheme.cs / --rz-*);
   diese Datei ist die standalone-Entsprechung.
   ============================================================================ */

:root {
    /* Brand */
    --rem-primary: #0F7BC0;
    --rem-primary-dark: #05314D;
    --rem-primary-light: #3F98D6;
    --rem-primary-25: #F0F7FC;
    --rem-secondary: #E91E63;
    --rem-secondary-dark: #B0003A;

    /* Neutrals */
    --rem-ink: #1D1D1B;
    --rem-grey-700: #4A4A49;
    --rem-grey-500: #9D9D9C;
    --rem-grey-200: #E6E6E6;
    --rem-grey-150: #F1F2F2;
    --rem-grey-100: #F6F6F6;
    --rem-surface: #FFFFFF;

    /* Semantik */
    --rem-success: #2E7D32;
    --rem-warning: #F9A825;
    --rem-danger: #C62828;
    --rem-info: #0288D1;

    /* Spacing / Radius / Shadow */
    --rem-space-xs: 4px;
    --rem-space-s: 8px;
    --rem-space-m: 12px;
    --rem-space-l: 16px;
    --rem-space-xl: 24px;
    --rem-space-xxl: 32px;
    --rem-radius: 8px;
    --rem-shadow-1: 0 1px 2px rgba(0, 0, 0, .08);
    --rem-shadow-2: 0 2px 8px rgba(0, 0, 0, .10);

    /* Radzen-Brand-Override */
    --rz-primary: var(--rem-primary);
    --rz-secondary: var(--rem-secondary);
    --rz-text-font-family: "Roboto", "Segoe UI", system-ui, sans-serif;
}

body {
    font-family: var(--rz-text-font-family);
    color: var(--rem-ink);
    background: var(--rem-grey-100);
}

/* ── Utilities ───────────────────────────────────────────────────────────── */
.rem-muted { color: var(--rem-grey-500); }
.rem-overline {
    color: var(--rem-primary);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
}

/* ── PageHeader ──────────────────────────────────────────────────────────── */
.rem-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--rem-space-l);
    flex-wrap: wrap;
    margin-bottom: var(--rem-space-xl);
}
.rem-page-header__title { margin: var(--rem-space-xs) 0; }
.rem-page-header__actions { display: flex; gap: var(--rem-space-s); align-items: center; }

/* ── KPI-Tile ────────────────────────────────────────────────────────────── */
.rem-kpi { box-shadow: var(--rem-shadow-1); border-radius: var(--rem-radius); }
.rem-kpi__row { display: flex; align-items: center; gap: var(--rem-space-m); }
.rem-kpi__icon {
    width: 44px; height: 44px; border-radius: var(--rem-radius);
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--rem-kpi-accent) 12%, transparent);
    color: var(--rem-kpi-accent);
}
.rem-kpi__value { margin: 0; font-weight: 600; }

/* ── EmptyState ──────────────────────────────────────────────────────────── */
.rem-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: var(--rem-space-s); padding: var(--rem-space-xxl) var(--rem-space-l);
    color: var(--rem-grey-700);
}
.rem-empty__icon {
    width: 64px; height: 64px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--rem-grey-150); color: var(--rem-grey-500);
    margin-bottom: var(--rem-space-s);
}
.rem-empty__icon .rz-icon { font-size: 32px; }
.rem-empty__desc { max-width: 420px; }
.rem-empty__action { margin-top: var(--rem-space-m); }

/* ── App-Shell ───────────────────────────────────────────────────────────── */
.rem-shell__header {
    display: flex; align-items: center; gap: var(--rem-space-m);
    padding: 0 var(--rem-space-l); height: 56px; width: 100%;
    background: var(--rem-surface); color: var(--rem-ink);
}
.rem-shell__header .rz-icon { color: var(--rem-grey-700); }
.rem-shell__brand { display: flex; align-items: center; gap: var(--rem-space-s); font-weight: 700; color: var(--rem-ink); white-space: nowrap; }
.rem-shell__brand-dot { width: 12px; height: 12px; border-radius: 3px; background: var(--rem-primary); flex-shrink: 0; }
.rem-shell__spacer { flex: 1; }
.rem-content { padding: var(--rem-space-xl); max-width: 1320px; margin: 0 auto; }

/* Programmatischer Fokus auf Überschriften (FocusOnNavigate) zeigt sonst einen
   Outline-Kasten um jeden Seitentitel — bei nicht-interaktiven Headings unerwünscht. */
.rem-page-header__title:focus,
.rem-page-header__title:focus-visible,
h1:focus, h1:focus-visible { outline: none; }

/* Quick-Action-Kacheln (Dashboard „Schnellzugriff") — Card-Links mit Hover-Lift. */
.rem-quick { display: flex; flex-direction: column; gap: var(--rem-space-s); margin-top: var(--rem-space-s); }
.rem-quick__item {
    display: flex; align-items: center; gap: var(--rem-space-m);
    padding: var(--rem-space-m); border: 1px solid var(--rem-grey-200);
    border-radius: var(--rem-radius); background: var(--rem-surface);
    cursor: pointer; text-align: left; transition: box-shadow .12s, transform .12s, border-color .12s;
}
.rem-quick__item:hover { box-shadow: var(--rem-shadow-2); transform: translateY(-1px); border-color: var(--rem-primary); }
.rem-quick__icon {
    width: 38px; height: 38px; border-radius: var(--rem-radius); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--rem-primary-25); color: var(--rem-primary);
}
.rem-quick__label { font-weight: 500; color: var(--rem-ink); flex: 1; }

/* „Zuletzt angelegt"-Zeile: Name links, kompaktes Badge rechts (nicht gestreckt). */
.rem-recent__row { display: flex; align-items: center; justify-content: space-between; gap: var(--rem-space-s); padding: 4px 0; border-bottom: 1px solid var(--rem-grey-150); }
.rem-recent__row:last-child { border-bottom: none; }

/* ── Login ───────────────────────────────────────────────────────────────── */
.rem-login { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.rem-login__hero {
    background: linear-gradient(135deg, var(--rem-primary), var(--rem-primary-dark));
    color: #fff; padding: var(--rem-space-xxl); display: flex; flex-direction: column; justify-content: center;
}
.rem-login__form { display: flex; align-items: center; justify-content: center; padding: var(--rem-space-xxl); }
.rem-login__card { width: 100%; max-width: 380px; }
.rem-login__bullets { list-style: none; padding: 0; margin: var(--rem-space-xl) 0 0; }
.rem-login__bullets li { display: flex; gap: var(--rem-space-s); align-items: center; margin-bottom: var(--rem-space-m); }

@media (max-width: 900px) {
    .rem-login { grid-template-columns: 1fr; }
    .rem-login__hero { display: none; }
}

/* Formular-Grid */
.rem-form { display: flex; flex-direction: column; gap: var(--rem-space-m); }
.rem-form__row { display: flex; gap: var(--rem-space-m); flex-wrap: wrap; }
.rem-form__row > * { flex: 1; min-width: 160px; }

/* KPI/Card-Raster */
.rem-grid { display: grid; gap: var(--rem-space-l); }
.rem-grid--kpi { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.rem-grid--cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ============================== Kalender =============================== */
.rem-cal-toolbar {
    display: flex; align-items: center; gap: var(--rem-space-l);
    background: var(--rem-surface); border: 1px solid var(--rem-grey-200);
    border-radius: var(--rem-radius); padding: var(--rem-space-s) var(--rem-space-m);
    box-shadow: var(--rem-shadow-1); flex-wrap: wrap;
}
.rem-cal-toolbar__nav { display: flex; align-items: center; gap: var(--rem-space-xs); }
.rem-cal-toolbar__spacer { flex: 1; }
.rem-cal-range { font-weight: 600; margin-left: var(--rem-space-s); }
.rem-cal-range small { color: var(--rem-grey-500); font-weight: 400; margin-left: 6px; }

.rem-cal-layout { display: flex; gap: var(--rem-space-l); align-items: flex-start; }
.rem-cal-main { flex: 1; min-width: 0; }
.rem-cal-side { width: 290px; flex-shrink: 0; }
@media (max-width: 1100px) { .rem-cal-layout { flex-direction: column; } .rem-cal-side { width: 100%; } }

.rem-cal {
    overflow: auto; border: 1px solid var(--rem-grey-200);
    border-radius: var(--rem-radius); background: var(--rem-surface); max-height: 70vh;
}
.rem-cal__grid { display: grid; position: relative; }
.rem-cal__corner { position: sticky; top: 0; left: 0; z-index: 30; background: var(--rem-surface); border-bottom: 1px solid var(--rem-grey-200); border-right: 1px solid var(--rem-grey-200); }
.rem-cal__dayhead {
    position: sticky; top: 0; z-index: 20; background: var(--rem-surface);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-bottom: 1px solid var(--rem-grey-200); border-right: 1px solid var(--rem-grey-200);
}
.rem-cal__dayhead--today { background: var(--rem-primary-25); }
.rem-cal__dayhead--weekend { background: var(--rem-grey-100); }
.rem-cal__dayhead .dow { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--rem-grey-500); }
.rem-cal__dayhead .dnum { font-weight: 700; }
.rem-cal__dayhead--today .dnum { color: var(--rem-primary); }
.rem-cal__lanehead {
    position: sticky; top: 0; z-index: 20; background: var(--rem-surface);
    display: flex; align-items: center; gap: var(--rem-space-s);
    border-bottom: 1px solid var(--rem-grey-200); border-right: 1px solid var(--rem-grey-200);
    padding: 0 var(--rem-space-s); overflow: hidden;
}
.rem-cal__avatar { width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rem-cal__timecell { position: sticky; left: 0; z-index: 10; background: var(--rem-surface); border-right: 1px solid var(--rem-grey-200); text-align: right; padding: 0 6px; font-size: 11px; color: var(--rem-grey-500); }
.rem-cal__timecell--hour { border-bottom: 1px solid var(--rem-grey-200); }
.rem-cal__col { position: relative; border-right: 1px solid var(--rem-grey-200); }
.rem-cal__col--weekend { background: var(--rem-grey-100); }
.rem-cal__slot { position: absolute; left: 0; right: 0; cursor: pointer; }
.rem-cal__slot--hour { border-bottom: 1px solid var(--rem-grey-200); }
.rem-cal__slot:hover { background: var(--rem-primary-25); }
.rem-cal__nowline { position: absolute; left: 0; right: 0; z-index: 6; border-top: 2px solid var(--rem-danger); pointer-events: none; }
.rem-cal__nowdot { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--rem-danger); }

.rem-cal-evt {
    position: absolute; overflow: hidden; border-radius: 6px; border-left: 3px solid;
    padding: 2px 6px; box-shadow: var(--rem-shadow-1); cursor: grab; user-select: none;
    display: flex; flex-direction: column; gap: 2px; transition: box-shadow .1s;
}
.rem-cal-evt:hover { box-shadow: var(--rem-shadow-2); }
.rem-cal-evt--selected { outline: 2px solid var(--rem-primary); outline-offset: 1px; }
.rem-cal-evt--dragging { opacity: .8; cursor: grabbing; outline: 2px solid var(--rem-primary); }
.rem-cal-evt__title { font-size: 12px; font-weight: 600; color: var(--rem-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rem-cal-evt__sub { font-size: 11px; color: var(--rem-grey-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rem-cal-evt__handle { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; cursor: ns-resize; }
.rem-cal-evt__handle:hover { background: color-mix(in srgb, var(--rem-primary) 30%, transparent); }
.rem-cal-evt--monteur   { background: color-mix(in srgb, var(--rem-primary) 12%, white); border-left-color: var(--rem-primary-dark); }
.rem-cal-evt--werkstatt { background: color-mix(in srgb, var(--rem-success) 14%, white); border-left-color: var(--rem-success); }
.rem-cal-evt--fahrzeug  { background: color-mix(in srgb, var(--rem-warning) 18%, white); border-left-color: var(--rem-warning); }
.rem-cal-evt--geraet    { background: color-mix(in srgb, #6A1B9A 14%, white); border-left-color: #6A1B9A; }
.rem-cal-evt--raum      { background: var(--rem-grey-100); border-left-color: var(--rem-grey-700); }
.rem-cal-evt--conflict  { background: color-mix(in srgb, var(--rem-danger) 16%, white); border-left-color: var(--rem-danger); }

/* Drag-Overlay (fängt pointermove/up während des Ziehens) */
.rem-cal-dragoverlay { position: fixed; inset: 0; z-index: 50; cursor: grabbing; }

/* Monatsansicht */
.rem-month { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--rem-grey-200); border-radius: var(--rem-radius); overflow: hidden; background: var(--rem-surface); }
.rem-month__dow { padding: 4px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--rem-grey-500); background: var(--rem-grey-100); border-bottom: 1px solid var(--rem-grey-200); }
.rem-month__cell { min-height: 110px; display: flex; flex-direction: column; gap: 3px; border-bottom: 1px solid var(--rem-grey-200); border-right: 1px solid var(--rem-grey-200); padding: 4px 6px; text-align: left; background: var(--rem-surface); cursor: pointer; }
.rem-month__cell--out { background: var(--rem-grey-100); opacity: .6; }
.rem-month__cell--today { outline: 2px solid var(--rem-primary); outline-offset: -2px; }
.rem-month__daynum { font-size: 12px; font-weight: 600; }
.rem-month__pill { font-size: 11px; border-radius: 4px; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Agenda */
.rem-agenda__day { border: 1px solid var(--rem-grey-200); border-radius: var(--rem-radius); overflow: hidden; margin-bottom: var(--rem-space-l); background: var(--rem-surface); }
.rem-agenda__dayhead { background: var(--rem-grey-100); border-bottom: 1px solid var(--rem-grey-200); padding: var(--rem-space-s) var(--rem-space-l); font-weight: 600; }
.rem-agenda__row { display: flex; align-items: center; gap: var(--rem-space-l); padding: var(--rem-space-m) var(--rem-space-l); border-bottom: 1px solid var(--rem-grey-150); cursor: pointer; }
.rem-agenda__row:hover { background: var(--rem-grey-100); }
.rem-agenda__time { width: 64px; display: flex; flex-direction: column; }

/* Legende + Filter-Chips */
.rem-chip { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--rem-grey-200); background: var(--rem-surface); font-size: 12px; cursor: pointer; }
.rem-chip--on { border-color: var(--rem-primary); background: var(--rem-primary-25); color: var(--rem-primary); }

/* Abwesenheits-Matrix (Urlaubsplaner) */
.rem-absmatrix { border-collapse: collapse; font-size: 12px; }
.rem-absmatrix th, .rem-absmatrix td { border: 1px solid var(--rem-grey-200); width: 24px; height: 26px; text-align: center; padding: 0; }
.rem-absmatrix__name { text-align: left !important; min-width: 150px; white-space: nowrap; padding: 0 10px !important; position: sticky; left: 0; z-index: 1; background: var(--rem-surface); }
.rem-absmatrix th { background: var(--rem-grey-100); font-weight: 600; }
.rem-absmatrix th.rem-absmatrix__name { z-index: 2; }
.rem-absmatrix__we { background: var(--rem-grey-100); }

/* Leihwagen-Planer: Fahrzeug-Zeilen × Wochentag-Spalten mit Buchungs-Chips */
.rem-vehplan { border-collapse: collapse; font-size: 12px; width: 100%; }
.rem-vehplan th, .rem-vehplan td { border: 1px solid var(--rem-grey-200); vertical-align: top; padding: 4px; min-width: 120px; }
.rem-vehplan th { background: var(--rem-grey-100); font-weight: 600; text-align: center; white-space: nowrap; }
.rem-vehplan__name { text-align: left !important; min-width: 170px; white-space: nowrap; position: sticky; left: 0; z-index: 1; background: var(--rem-surface); }
.rem-vehplan th.rem-vehplan__name { z-index: 2; }
.rem-vehplan__chip { border-radius: 6px; padding: 3px 6px; margin-bottom: 4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.rem-vehplan__chip:hover { filter: brightness(0.97); }

/* ── Standort-Portfolio (L1) ─────────────────────────────────────────────── */
.rem-portfolio { width: 100%; border-collapse: collapse; font-size: 13px; }
.rem-portfolio th, .rem-portfolio td { border: 1px solid var(--rem-grey-200); padding: 6px 8px; text-align: center; }
.rem-portfolio th { background: var(--rem-grey-100); font-weight: 600; }
.rem-portfolio__corner, .rem-portfolio__branch { text-align: left; }
.rem-portfolio__branch { min-width: 170px; }
.rem-portfolio__bname { font-weight: 600; color: var(--rem-ink); }
.rem-portfolio__cell { cursor: pointer; min-width: 66px; transition: outline .1s; }
.rem-portfolio__cell:hover { outline: 2px solid var(--rem-primary); outline-offset: -2px; }
.rem-portfolio__pct { font-weight: 700; }
.rem-portfolio__cnt { font-size: 11px; opacity: .85; }
.rem-portfolio__we { background: var(--rem-grey-100); }
.rem-portfolio__avg { font-weight: 600; color: var(--rem-ink); }
.rem-portfolio__legend { margin-top: var(--rem-space-m); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rem-portfolio__sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; margin-left: 6px; }

/* ── Kalender Scope-Bar (Standort-Auswahl / Portfolio-Link) ──────────────── */
.rem-cal-scopebar { display: flex; align-items: center; gap: var(--rem-space-s); margin: var(--rem-space-s) 0 var(--rem-space-m); flex-wrap: wrap; }
.rem-cal-scopebar__sep { color: var(--rem-grey-500); }
.rem-cal-scopebar__branch { font-weight: 600; color: var(--rem-ink); }

/* ── Responsive (global) ─────────────────────────────────────────────────── */

/* Tab-Leisten mit vielen Reitern (z. B. Ressourcen): umbrechen statt über den
   rechten Rand hinauslaufen. Zusätzlich horizontal scrollbar als Fallback. */
.rz-tabview-nav,
.rz-tabview-nav ul {
    flex-wrap: wrap !important;
    row-gap: 4px;
    max-width: 100%;
}

/* Breite DataGrids/Tabellen: innerhalb ihres Containers horizontal scrollen,
   niemals die Seite sprengen. */
.rz-datatable,
.rz-data-grid,
.rz-grid-table { max-width: 100%; }
.rz-datatable .rz-data-grid-data,
.rz-datatable-scrollable-body,
.rz-data-grid-data { overflow-x: auto; }

/* Eigene Tabellen (Portfolio etc.) scrollen bereits über ihren overflow-Container. */

/* Karten-/KPI-Raster passen sich via auto-fit bereits an (minmax). Dialoge deckeln. */
.rz-dialog { max-width: 96vw; }

/* Kleine Viewports: weniger Innenabstand, Kopfzeilen stapeln, Toolbars umbrechen. */
@media (max-width: 768px) {
    .rem-content { padding: var(--rem-space-m); }
    .rem-page-header { flex-direction: column; align-items: flex-start; }
    .rem-page-header__actions { flex-wrap: wrap; }
    .rem-cal-toolbar { gap: var(--rem-space-s); }
    .rem-cal-scopebar { gap: var(--rem-space-xs); }
    .rem-form__row { flex-direction: column; }
    .rem-form__row > * { min-width: 0; }
}