/* ===================================================================
   DRK HOK – Schichtübersicht (aufgeräumt / konsolidiert)
   =================================================================== */

/* ---------- Root & Basics ---------- */
@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

:root { --toolbarH: 88px; }
html { overflow-y: scroll; }

.app-wrap{ width:min(1280px,100%); margin-inline:auto; padding-inline:1rem; }
/* Nur für Abschreibungen – Zeilen mit überfälliger Abschreibung leicht gelb hinterlegen */
.absschreibungen-overview .abschreibung-overdue {
    background-color: #fff3cd; /* ähnlich Bootstrap table-warning */
}
.sortable-header {
    font-weight: 600;   /* fett */
    color: #000;        /* schwarz */
    cursor: pointer;
}

.sortable-header:hover {
    text-decoration: underline;  /* optional: kleiner Hover-Hinweis */
}
/* Globaltypografie & Links (Blazor-CSS-Isolation) */
:global(html),
:global(body){ font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; }
:global(.nav-link){ color:#fff !important; }
:global(.nav-link:hover){ color:rgb(202,78,78); }
:global(h1:focus){ outline:none; }
:global(a), :global(.btn-link){ color:#000; }

:global(.content){ padding-top:1.1rem; }

/* Validierung */
:global(.valid.modified:not([type=checkbox])){ outline:1px solid #26b050; }
:global(.invalid){ outline:1px solid red; }
:global(.validation-message){ color:red; }

/* Blazor Error UI – hart ausgeblendet */
:global(#blazor-error-ui){
  display:none !important;
}

/* Bootstrap Badge (eine subtile Variante) */
:global(.badge.bg-danger-subtle){
  background-color:#f8d7da; color:#842029;
}

/* Primärbutton dezent */
:global(.btn-primary){
  color:#fff; background-color:#1b6ec2; border-color:#1861ac;
}

/* ---------- Top-Row (kompakt) ---------- */
:global(.top-row){
  position:sticky; top:0; z-index:1020;
  display:flex; align-items:center; gap:.5rem;
  height:2.6rem; padding:0 .75rem;
  background:#f8f9fa; border-bottom:1px solid #e9ecef;
}
:global(.top-row .current-page){ margin-right:auto; font-size:.9rem; font-weight:600; color:#495057; letter-spacing:.2px; }
:global(.top-row .external-links){ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
:global(.top-row .link-with-icon){ font-size:.85rem; opacity:.95; }
:global(.top-row .link-with-icon:hover){ opacity:1; }
:global(.top-row .link-with-icon img),
:global(.top-row .icon-placeholder){ width:16px; height:16px; border-radius:3px; object-fit:contain; display:block; }

/* ---------- Toolbar ---------- */
.toolbar{ display:flex; gap:.75rem; align-items:end; flex-wrap:wrap; margin-bottom:.6rem; }
.toolbar .stack{ display:flex; flex-direction:column; gap:.25rem; }
.toolbar .stack.grow{ flex:1 1 auto; }
.toolbar .btns{ display:flex; gap:.4rem; margin-left:auto; }

/* ===================================================================
   BOARD + PEOPLE + GRID
   =================================================================== */

/* Board: einspaltiges Layout (People-Bar oben, Grid darunter) */
.board.with-sidebar{
  display:grid; grid-template-columns:1fr; gap:.75rem; align-items:start; overflow:visible;
}

/* People-Bar (horizontal scollend, unter Toolbar) */
.people.modern.sidebar{
  grid-column:1 / -1; order:2;
  position:sticky; top:var(--toolbarH);
  background:#fff; border:1px solid var(--bs-border-color,#e9ecef);
  border-radius:.75rem; padding:.35rem .45rem;
  height:auto; max-height:172px; overflow:hidden;
}
.people.modern .people-head{
  padding:.3rem .35rem; border-bottom:1px solid #eef1f4;
}
.people.modern .title{ font-weight:700; }
.people.modern .sub{ font-size:.8rem; color:#6c757d; display:flex; align-items:center; gap:.4rem; }
.people.modern .sub .count{
  background:#f1f3f5; border:1px solid #e9ecef; padding:.05rem .4rem; border-radius:999px; font-weight:600; color:#495057;
}
.people.modern .people-list{
  display:flex; flex-wrap:nowrap; gap:.45rem;
  padding:.4rem .2rem; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity;
}
.people.modern .person.card{
  flex:0 0 auto; min-width:200px; max-width:260px;
  display:grid; grid-template-rows:auto auto; gap:.35rem;
  padding:.4rem .45rem; border-radius:.6rem; scroll-snap-align:start;
  background:#fff; border:1px solid #e9ecef;
}
.people.modern .row-top{ display:grid; grid-template-columns:28px 1fr 12px; gap:.35rem; align-items:center; }
.people.modern .avatar{
  width:28px; height:28px; border-radius:7px; display:grid; place-items:center;
  font-weight:700; font-size:.78rem;
  background:radial-gradient(120% 120% at 10% 10%,#e9f0ff 0,#eef2ff 60%,#fff 100%); color:#2b3a67;
}
.people.modern .name{ font-size:.9rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.people.modern .qual-badges{ display:flex; gap:.3rem; margin-top:.15rem; }
.people.modern .q-badge{
  font-size:.62rem; padding:.1rem .3rem; border-radius:999px;
  background:#f4f6ff; border:1px solid #dfe6ff; color:#2c3e50; font-weight:600;
}
.people.modern .row-bottom{ display:flex; gap:.3rem; }

/* Grid-Wrapper (scrollt horizontal/vertikal bei Bedarf) */
.grid-wrap{
  grid-column:1 / -1; order:3;
  background:#fff; border:1px solid #000 !important; border-radius:.75rem;
  padding:.45rem; max-height:calc(100vh - 140px); overflow:auto;
}

/* Grid */
.grid{ display:grid; gap:0; background:#fff; grid-auto-rows:minmax(90px,auto); }

/* Schicht-Grid – Spaltenanzahl wird dynamisch gesetzt (inline style) */
.grid.grid-shifts{ display:grid; gap:.5rem; }

/* Kopfzellen */
.grid.grid-shifts .grid-head{
  position:relative; top:var(--toolbarH,40px); color: black;
  background:#ffffff00; z-index:2;
  padding: 0.8rem .5rem; border:5px solid #eee; border-radius:.5rem; margin-top: -90px;
  font-weight:600; height: 70px;
}

/* ===================================================================
   ZELLEN / CHIPS / BADGES
   =================================================================== */

.cell, .cell-off{ border-right:3px solid #000 !important; border-bottom:1px solid #000 !important; }

/* Reihenaufbau: cell-top | mini-summary | roles | reqs | (hover) cell-more | note */
.cell{
  display:flex; flex-direction:column; gap:.35rem;
  padding:.5rem; background:#fff; border:1px solid #e9ecef; border-radius:.6rem;
}
.cell.ok{ outline:2px solid #e6ffe6; background:#fbfffb; }
.cell.warn{ border-color:#ffecb5; background:#fffdf6; }
.cell.danger{ border-color:#f8d7da; background:#fff7f8; }

/* Platzhalter im „Nur belegte“-Modus, damit das Grid nicht zerreißt */
.cell-spacer{ background:transparent; border:none; min-height:0; padding:0; }

/* Off-Zelle (grau) */
.cell.cell-off{
  background:#e9ecef !important; color:#333 !important;
  display:flex; align-items:center; justify-content:center; min-height:90px;
}
.cell-off .off-label{ background:transparent !important; color:#333 !important; border:0; font-weight:700; }

/* Kopf (Fahrzeug + Zeit) */
.cell-top{ display:flex; justify-content:space-between; align-items:center; }
.veh-tag{
  font-weight:700; font-size:.82rem; padding:.12rem .4rem; border-radius:999px;
  background:#f8f9fa; border:1px solid #d1d5db; color:#111;
}

/* Rollen */
.roles{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.35rem; grid-auto-rows:1fr; }

/* Slot-Button */
.btn-slot{
  width:100%; text-align:left; background:#fff; border:1px solid #e5e7eb; border-radius:.6rem;
  padding:.35rem .45rem; display:flex; flex-direction:column; gap:.25rem;
  transition:border-color .12s, background-color .12s;
}
.btn-slot:hover{ border-color:#cbd5e1; background:#fafbff; }
.btn-slot.filled{ background:#fbfdfc; }
.btn-slot .slot-head{ font-size:.78rem; color:#6b7280; display:flex; align-items:center; gap:.4rem; }
.btn-slot.role-notsan .slot-head::before,
.btn-slot.role-rs .slot-head::before,
.btn-slot.role-azubi .slot-head::before,
.btn-slot.role-na .slot-head::before{
  content:""; width:.5rem; height:.5rem; border-radius:999px; display:inline-block;
}
.btn-slot.role-notsan .slot-head::before{ background:#f59e0b; }
.btn-slot.role-rs     .slot-head::before{ background:#3b82f6; }
.btn-slot.role-azubi  .slot-head::before{ background:#8b5cf6; }
.btn-slot.role-na     .slot-head::before{ background:#ef4444; }

.btn-slot .slot-body.chip{
  display:grid; grid-template-columns:28px 1fr auto; gap:.45rem; align-items:center;
}
.btn-slot .chip-avatar{
  width:35px; height:28px; border-radius:8px; display:grid; place-items:center; font-weight:700; font-size:.78rem;
  background:radial-gradient(120% 120% at 10% 10%, #e9f0ff 0, #eef2ff 60%, #fff 100%); color:#2b3a67;
}
.btn-slot .chip-name{ font-size:.8rem; font-weight:700; color:#000; }
.btn-slot .chip-qual{ font-size:.68rem; padding:.12rem .34rem; border-radius:999px; background:#f4f6ff; border:1px solid #dfe6ff; }
.btn-slot .slot-body.hint{ color:#6b7280; opacity:.9; }

/* Mini-Übersicht / Chips */
.mini-summary{ display:flex; gap:.35rem; flex-wrap:wrap; align-items:center; font-size:.72rem; line-height:1; user-select:none; }
.sum-chip{
  display:inline-flex; align-items:center; gap:.25rem; padding:.12rem .4rem; border-radius:999px;
  background:#f8fafc; border:1px solid #e5e7eb; color:#111827;
}
.sum-chip .r{ font-weight:800; letter-spacing:.02em; }
.sum-empty{ color:#9aa0a6; }
.sum-chip.role-notsan{ border-color:#f59e0b33; background:#fff8eb; }
.sum-chip.role-rs    { border-color:#3b82f633; background:#eef6ff; }
.sum-chip.role-azubi { border-color:#8b5cf633; background:#f1ecff; }
.sum-chip.role-na    { border-color:#ef444433; background:#ffecef; }

/* Anforderungen / Flags / Notiz */
.reqs{ display:flex; gap:.3rem; flex-wrap:wrap; align-items:center; }
.badge.req-ok{ background:#20c997; color:#fff; }
.badge.req-miss{ background:#ffe8a1; color:#6c5d00; }
.badge.req-time{ background:#eef2ff; color:#ff0000 !important; }

.flags{ display:flex; gap:.35rem; flex-wrap:wrap; align-items:center; }
.flag.badge.warn{ background:#f7c00b; color:#111; border-color:#ffbf00; }
.flag.badge.danger{ background:#f90015; color:#fff; border-color:#ff0015; }

.note{ font-size:.78rem; padding:.24rem .36rem; }

/* Kompakte Zelle + Hover-Extras */
.cell-compact .roles{ display:flex; gap:.35rem; flex-wrap:wrap; }
.cell-compact .btn-slot{ padding:.25rem .4rem; border-radius:.5rem; font-size:.84rem; }
.cell-compact .slot-head{ font-size:.72rem; opacity:.75; }
.cell-compact .slot-body.hint{ font-size:.72rem; opacity:.55; }
.cell-compact .chip .chip-name{ font-size:.86rem; }
.cell-more{ display:none; gap:.35rem; align-items:center; }
.cell:hover .cell-more{ display:flex; }

/* ===================================================================
   KALENDER (Monat)
   =================================================================== */
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:.25rem; }
.cal-head{ font-weight:600; text-align:center; }
.cal-cell{
  border:1px solid #e1e1e1; border-radius:.375rem;
  padding:.4rem .2rem; text-align:center; background:#fff;
}
.cal-cell.other{ opacity:.45; }
.cal-cell.sel{ outline:2px solid #0d6efd; background:#e7f1ff; border-color:#0d6efd; }
.cal-cell.has-plan{ background:#e8f8ee; border-color:#7bd7a8; }
.legend{ display:inline-block; width:12px; height:12px; margin-right:.25rem; border:1px solid #ccc; vertical-align:middle; }
.legend.has-plan{ background:#e8f8ee; border-color:#7bd7a8; }
.legend.sel{ background:#e7f1ff; border-color:#0d6efd; }

/* Überflüssigen Scrollraum am Seitenende verhindern */
.page-schicht .calendar.card:last-child,
.page-schicht .board.with-sidebar:last-child{ margin-bottom:0 !important; }
.page-schicht main,
.page-schicht .grid-wrap,
.page-schicht .grid-shifts{ min-height:0 !important; }
.page-schicht .content-end-guard{ height:1px; }
.page-schicht{ padding-bottom:.5rem; }

/* ===================================================================
   FULLSCREEN (native)
   =================================================================== */
:fullscreen body,
:-webkit-full-screen body{ overflow:hidden !important; }
:fullscreen #boardWrap,
:-webkit-full-screen #boardWrap{
  margin:0 !important; padding:0 !important;
  display:flex; flex-direction:column; height:100vh; max-height:100vh;
}
:fullscreen #boardWrap .grid-wrap,
:-webkit-full-screen #boardWrap .grid-wrap{
  flex:1 1 auto; min-height:0; height:auto; max-height:none;
  overflow:auto; padding:.45rem; scrollbar-gutter:stable both-edges;
}
:fullscreen #boardWrap .grid-head,
:fullscreen #boardWrap .sticky,
:-webkit-full-screen #boardWrap .grid-head,
:-webkit-full-screen #boardWrap .sticky{
  top:0 !important;
}
:fullscreen .toolbar,
:fullscreen #calWrap{ display:none !important; }

/* ===================================================================
   RESPONSIVE
   =================================================================== */

/* Großgeräte leicht straffen */
@media (max-width:1200px){
  .app-wrap{ padding-inline:.75rem; }
}

/* Tablets (≤ 992px) */
@media (max-width:992px){
  :root{ --toolbarH:76px; }
  .toolbar{ gap:.6rem; }
  .toolbar .btns{ flex-wrap:wrap; gap:.35rem; }

  /* People-Bar kompakter */
  .people.modern.sidebar{ max-height:160px; }
  .people.modern .person.card{ min-width:200px; }

  .cell{ padding:.35rem; gap:.3rem; }
  .mini-summary{ font-size:.7rem; }

  /* Mobile Overflow nur im Grid erlauben */
  :global(html), :global(body){ max-width:100vw; overflow-x:hidden; }
  :global(main){ display:block; width:100%; max-width:100vw; overflow-x:hidden;
    padding-top:min(calc(var(--toolbarH,0px) * 1), 84px); }
  .app-wrap, :global(.content){ width:100%; max-width:100vw; overflow-x:hidden; }
  .grid-wrap{ max-width:100vw; overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
  :global(img), :global(svg), :global(canvas), :global(video){ max-width:100%; height:auto; }
  :global(table){ width:100%; max-width:100%; }
  :global(html) *, :global(html) *::before, :global(html) *::after{ box-sizing:border-box; }
}

/* Mittelgeräte / große Phones (≤ 768px) */
@media (max-width:768px){
  :root{ --toolbarH:72px; }
  .app-wrap{ padding-inline:.6rem; }
  .toolbar{ align-items:stretch; gap:.5rem; }
  .toolbar .stack, .toolbar .btns{ width:100%; }
  .people.modern.sidebar{ max-height:148px; }
  .people.modern .person.card{ min-width:170px; }
  .grid.grid-shifts .grid-head{ padding:.5rem .45rem; }
  .veh-tag{ font-size:.78rem; }
  .roles{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .btn-slot{ padding:.32rem .4rem; }
  .btn-slot .slot-head{ font-size:.76rem; }
  .btn-slot .chip-name{ font-size:.78rem; }
  .btn-slot .chip-qual{ font-size:.66rem; }
  .note{ font-size:.76rem; }
  .cal-grid{ gap:.2rem; }
  .cal-cell{ padding:.35rem .18rem; }
}

/* Kleine Phones (≤ 640px) */
@media (max-width:640px){
  :root{ --toolbarH:68px; }
  .people.modern.sidebar{ max-height:140px; }
  .people.modern .person.card{ min-width:160px; }
  .cell{ padding:.32rem; }
  .mini-summary{ gap:.3rem; }
  :global(.top-row .current-page){ font-size:.88rem; }
  :global(.top-row .link-with-icon){ font-size:.84rem; }
}

/* Sehr kleine Phones (≤ 480px) */
@media (max-width:480px){
  :root{ --toolbarH:64px; }
  .app-wrap{ padding-inline:.5rem; }
  .toolbar .stack.grow{ flex:1 1 100%; }
  .toolbar .btns{ gap:.3rem; }
  .people.modern.sidebar{ max-height:132px; }
  .people.modern .person.card{ min-width:150px; }
  .btn-slot{ padding:.3rem .38rem; }
  .btn-slot .slot-head{ font-size:.74rem; }
  .btn-slot .chip-qual{ font-size:.64rem; }
  .note{ font-size:.74rem; }
  .cal-cell{ padding:.3rem .16rem; }

  :global(main){ padding-top:min(calc(var(--toolbarH,0px) * 1), 72px); }
}

/* Ultra schmal (≤ 360px) */
@media (max-width:360px){
  .people.modern .person.card{ min-width:140px; }
  .mini-summary, .btn-slot .slot-head{ font-size:.72rem; }
}

/* Touch-Verbesserungen */
@media (hover:none) and (pointer:coarse){
  .btn-slot{ -webkit-tap-highlight-color:transparent; }
  .people.modern .people-list{ scroll-padding-left:.2rem; }
}

/* iOS Safe-Area Pads */
@supports(padding:max(0px)){
  @media (max-width:768px){
    body{ padding-bottom:max(env(safe-area-inset-bottom),0px); }
  }
}

/* ===================================================================
   LOCK-SCREEN (Login / gesperrt)
   =================================================================== */
.lock-wrap{ position:relative; min-height:calc(100vh - 60px); overflow:hidden; }
.lock-bg{
  position:absolute; inset:0;
  background:url('/img/embedded.png') center/cover no-repeat, linear-gradient(135deg,#e9efff,#f7f9ff);
  filter:blur(10px) saturate(80%) brightness(.9); transform:scale(1.05);
}
.lock-veil{ position:absolute; inset:0; background:rgba(0,0,0,.25); }
.lock-card{ position:relative; width:min(420px,92vw); margin:12vh auto 0; border-radius:16px; }

/* ===================================================================
   Badge-Global-Feintuning (am Ende, geringe Eingriffe)
   =================================================================== */
:global(.badge){
  --bs-badge-padding-x:.65em; --bs-badge-padding-y:.35em;
  --bs-badge-font-size:.75em; --bs-badge-font-weight:700;
  --bs-badge-border-radius:var(--bs-border-radius);
  display:inline-block; padding:var(--bs-badge-padding-y) var(--bs-badge-padding-x);
  font-size:var(--bs-badge-font-size); font-weight:var(--bs-badge-font-weight);
  line-height:1; text-align:center; white-space:nowrap; vertical-align:baseline;
  border-radius:var(--bs-badge-border-radius);
}
/* explizit Weiß lassen */
:global(.flag.badge.danger),
:global(.badge.req-ok){ color:#ffffff !important; }
.teamchat { display:flex; flex-direction:column; gap:.5rem; }
.teamchat-body{ overflow:auto; border:1px solid var(--bs-border-color,#e9ecef); border-radius:.5rem; padding:.5rem; background:#fff; }
.teamchat-body .empty{ padding:.25rem .5rem; }
.teamchat .msg{ margin-bottom:.35rem; }
.teamchat .msg .meta{ font-size:.75rem; color:#6c757d; display:flex; gap:.5rem; align-items:center; }
.teamchat .msg .bubble{ background:#f8f9fa; border-radius:.5rem; padding:.35rem .5rem; display:inline-block; }
.teamchat .msg.me .bubble{ background:#e7f1ff; }
.teamchat-input{ display:flex; gap:.4rem; align-items:center; }
.teamchat-input input{ flex:1 1 auto; }

.note-btn{ padding:.15rem .4rem; font-size:.8rem; }

/* MPG-Übersicht: Hersteller/Modell-Spalte */
.mpg-manufacturer-cell {
    max-width: 260px;          /* Breite der Spalte begrenzen – nach Bedarf anpassen */
}

.mpg-manufacturer-text {
    font-size: 0.9rem;         /* etwas kleiner als Standard */
    line-height: 1.2;
    white-space: normal;       /* Zeilenumbruch erlauben */
    word-break: break-word;    /* sehr lange Namen umbrechen */
}
.app-footer {
    background: #f8f9fa;
}

/* Vollbild-Overlay */
.support-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 2000;
}

/* Wrapper zentriert das Modal */
.support-modal-wrapper {
    position: fixed;
    inset: 0;
    z-index: 2001;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dialog-Container */
.support-modal-dialog {
    max-width: 480px;
    width: 100%;
    margin: 0 1rem;
}

/* Inhalt (Card) */
.support-modal-content {
    background: #ffffff;
    border-radius: .5rem;
}