/* ============================================================
   TeamPlaner 2.0 – Stylesheet v2
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #f4f5f7;
  --bg2:      #ffffff;
  --bg3:      #eef0f3;
  --border:   #dde0e6;
  --border2:  #c8ccd4;
  --text:     #1a1d23;
  --text2:    #5a6070;
  --text3:    #9099a8;
  --blue:     #185FA5;
  --blue-bg:  #E6F1FB;
  --blue-bd:  #85B7EB;
  --red:      #c0392b;

  /* Dynamische UI-Farben (werden per JS aus Einstellungen überschrieben) */
  --today-bg:      #E6F1FB;
  --today-tx:      #185FA5;
  --feiertag-bg:   #FAEEDA;
  --feiertag-tx:   #633806;
  --team-label-bg: #ffffff;
  --team-label-tx: #1a1d23;
  --slot-empty-bg: #f9fafb;
  --kw-bg:         #eef0f3;
  --kw-tx:         #5a6070;
  --samstag-bg:    #EAF3DE;
  --samstag-tx:    #3B6D11;

  /* ---- Rollen-Farben ---- */
  --c-vorarbeiter-bg: #534AB7; --c-vorarbeiter-tx: #EEEDFE;
  --c-facharbeiter-bg:#185FA5; --c-facharbeiter-tx:#E6F1FB;
  --c-azubi-bg:       #3B6D11; --c-azubi-tx:       #EAF3DE;
  --c-buero-bg:       #993556; --c-buero-tx:       #FBEAF0;
  --c-helfer-bg:      #BA7517; --c-helfer-tx:      #FAEEDA;
  --c-prakti-bg:      #0F6E56; --c-prakti-tx:      #E1F5EE;
  --c-sub-bg:         #5F5E5A; --c-sub-tx:         #F1EFE8;

  /* ---- Bereich-Farben ---- */
  --c-betrieb-bg:     #042C53; --c-betrieb-tx:     #B5D4F4;
  --c-pflege-bg:      #085041; --c-pflege-tx:      #9FE1CB;
  --c-bau-bg:         #412402; --c-bau-tx:         #FAC775;

  /* ---- Objekt-Farben ---- */
  --c-geraet-bg:      #1D9E75; --c-geraet-tx:      #E1F5EE;
  --c-kunde-bg:       #D85A30; --c-kunde-tx:       #FAECE7;
  --c-bemerk-bg:      #888780; --c-bemerk-tx:      #F1EFE8;

  /* ---- Status Mitarbeiter ---- */
  --c-urlaub-bg:  #9FE1CB; --c-urlaub-tx:  #04342C;
  --c-schule-bg:  #B5D4F4; --c-schule-tx:  #042C53;
  --c-weiter-bg:  #FAC775; --c-weiter-tx:  #412402;
  --c-krank-bg:   #F09595; --c-krank-tx:   #501313;
  --c-reserv-bg:  #D3D1C7; --c-reserv-tx:  #2C2C2A;

  /* ---- Status Geräte ---- */
  --c-werkst-bg:  #D3D1C7; --c-werkst-tx:  #2C2C2A;
  --c-gres-bg:    #FAC775; --c-gres-tx:    #412402;
  --c-defekt-bg:  #F09595; --c-defekt-tx:  #501313;

  --radius:   8px;
  --radius-lg:12px;
}

body { font-family: system-ui, -apple-system, sans-serif; font-size: 13px;
       background: var(--bg); color: var(--text); min-height: 100vh; }

/* ============================================================
   Login
   ============================================================ */
#login-screen { display:flex; align-items:center; justify-content:center;
                min-height:100vh; background:var(--bg); }
#login-box { background:var(--bg2); border:0.5px solid var(--border);
             border-radius:var(--radius-lg); padding:32px 28px;
             width:320px; display:flex; flex-direction:column; gap:12px; }
#login-logo { font-size:20px; font-weight:500; color:var(--blue);
              text-align:center; margin-bottom:8px; }
#login-box input { width:100%; padding:9px 12px; border:0.5px solid var(--border2);
                   border-radius:var(--radius); font-size:14px;
                   background:var(--bg); color:var(--text); }
#login-box input:focus { outline:none; border-color:var(--blue); }
#login-box button { padding:10px; background:var(--blue); color:#fff;
                    border:none; border-radius:var(--radius); font-size:14px;
                    cursor:pointer; font-weight:500; }
#login-box button:hover { background:#1450a3; }
#login-err { background:#ffebee; color:var(--red); padding:8px 12px;
             border-radius:var(--radius); font-size:13px; }

/* ============================================================
   Topbar
   ============================================================ */
#topbar { background:var(--bg2); border-bottom:0.5px solid var(--border);
          padding:6px 12px; display:flex; align-items:center; gap:8px;
          flex-wrap:wrap; position:sticky; top:0; z-index:100; }
#app-title { font-weight:500; font-size:15px; color:var(--blue); margin-right:4px; }
#kw-label  { font-size:12px; color:var(--text2); min-width:130px; }
#user-info { margin-left:auto; display:flex; align-items:center; gap:8px; }
#user-name { font-size:12px; color:var(--text2); }

.tbtn { background:transparent; border:0.5px solid var(--border2);
        border-radius:6px; padding:5px 10px; font-size:12px;
        cursor:pointer; color:var(--text); white-space:nowrap; }
.tbtn:hover  { background:var(--bg3); }
.tbtn.active { background:var(--blue-bg); border-color:var(--blue); color:var(--blue); }
.tbtn.danger { color:var(--red); border-color:#f09595; }
.tbtn.danger:hover { background:#ffebee; }

/* ============================================================
   Screens
   ============================================================ */
.screen  { height:calc(100vh - 43px); display:flex; flex-direction:column; }
.hidden  { display:none !important; }

/* ============================================================
   Kalender-Hauptansicht
   ============================================================ */
#kal-wrap { flex:1; overflow:auto; padding:8px; }
#kal-grid { min-width:600px; }

#legend { padding:5px 12px; background:var(--bg2);
          border-top:0.5px solid var(--border);
          display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.leg { display:flex; align-items:center; gap:4px; font-size:11px; color:var(--text2); }
.legdot { width:10px; height:10px; border-radius:2px; flex-shrink:0; }
.leg-sep { width:0.5px; height:14px; background:var(--border); margin:0 4px; }

.row-kw   { display:grid; background:var(--bg3); border-radius:6px 6px 0 0; margin-bottom:1px; }
.row-days { display:grid; margin-bottom:3px; }
.row-team { display:grid; margin-bottom:2px; align-items:stretch; }

.kw-cell { padding:3px 6px; font-size:11px; font-weight:500; color:var(--text2);
           text-align:center; border-right:0.5px solid var(--border); }
.kw-cell:last-child { border-right:none; }

.day-cell { padding:4px 5px; font-size:11px; text-align:center;
            background:var(--bg3); border-right:0.5px solid var(--border);
            border-bottom:0.5px solid var(--border); line-height:1.3; }
.day-cell.today    { background:var(--today-bg); color:var(--today-tx); font-weight:500; }
.day-cell.feiertag { background:var(--feiertag-bg); color:var(--feiertag-tx); }

.team-label { padding:5px 8px; font-size:12px; font-weight:500;
              background:var(--team-label-bg); color:var(--team-label-tx);
              border:0.5px solid var(--border);
              border-radius:6px 0 0 6px; display:flex; align-items:center;
              justify-content:space-between; min-height:34px; gap:4px; }
.team-label.active { background:var(--blue-bg); color:var(--blue); }
.team-add-btn { background:transparent; border:none; cursor:pointer;
                font-size:14px; color:var(--text3); padding:0 2px;
                line-height:1; border-radius:3px; }
.team-add-btn:hover { background:var(--bg3); color:var(--blue); }
.team-del-btn { background:transparent; border:none; cursor:pointer;
                font-size:12px; color:var(--text3); padding:0 2px;
                line-height:1; border-radius:3px; }
.team-del-btn:hover { color:var(--red); background:#ffebee; }

.day-slot { border:0.5px solid var(--border); border-left:none; min-height:34px;
            padding:2px 3px; background:var(--bg2); cursor:pointer;
            display:flex; flex-direction:column; gap:1px; }
.day-slot:hover    { background:var(--bg3); }
.day-slot.today-col{ background:#f5f9ff; }
.day-slot.empty-slot { background:var(--slot-empty-bg); }

/* ---- Chips ---- */
.chip { border-radius:3px; padding:2px 5px; font-size:10px; font-weight:500;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
        line-height:1.4; }

/* Rollen */
.chip-Vorarbeiter  { background:var(--c-vorarbeiter-bg);  color:var(--c-vorarbeiter-tx); }
.chip-Facharbeiter { background:var(--c-facharbeiter-bg); color:var(--c-facharbeiter-tx); }
.chip-Azubi        { background:var(--c-azubi-bg);        color:var(--c-azubi-tx); }
.chip-Büro         { background:var(--c-buero-bg);        color:var(--c-buero-tx); }
.chip-Helfer       { background:var(--c-helfer-bg);       color:var(--c-helfer-tx); }
.chip-Prakti       { background:var(--c-prakti-bg);       color:var(--c-prakti-tx); }
.chip-Sub          { background:var(--c-sub-bg);          color:var(--c-sub-tx); }

/* Geräte nach Bereich */
.chip-G-Betrieb    { background:var(--c-betrieb-bg);      color:var(--c-betrieb-tx); }
.chip-G-Pflege     { background:var(--c-pflege-bg);       color:var(--c-pflege-tx); }
.chip-G-Bau        { background:var(--c-bau-bg);          color:var(--c-bau-tx); }
.chip-G            { background:var(--c-geraet-bg);       color:var(--c-geraet-tx); }

/* Kunde & Bemerkung */
.chip-K            { background:var(--c-kunde-bg);        color:var(--c-kunde-tx); }
.chip-B            { background:var(--c-bemerk-bg);       color:var(--c-bemerk-tx); }

/* ============================================================
   Mitarbeiter / Geräte Kalender
   ============================================================ */
#mitkala-wrap, #gerkala-wrap { flex:1; overflow:auto; padding:8px; }
#mitkala-grid, #gerkala-grid { min-width:600px; }

.kal-name-cell { padding:5px 8px; font-size:inherit;
                 border:0.5px solid rgba(0,0,0,.18); border-radius:6px 0 0 6px;
                 display:flex; align-items:center; min-height:30px;
                 white-space:nowrap; overflow:hidden; }

.kal-day-slot { border:0.5px solid var(--border); border-left:none;
                min-height:30px; display:flex; align-items:center;
                justify-content:center; font-size:10px; font-weight:500;
                cursor:pointer; transition:opacity .1s; }
.kal-day-slot:hover { opacity:.8; }

.st-urlaub { background:var(--c-urlaub-bg); color:var(--c-urlaub-tx); }
.st-schule { background:var(--c-schule-bg); color:var(--c-schule-tx); }
.st-weiter { background:var(--c-weiter-bg); color:var(--c-weiter-tx); }
.st-krank  { background:var(--c-krank-bg);  color:var(--c-krank-tx);  }
.st-reserv { background:var(--c-reserv-bg); color:var(--c-reserv-tx); }
.st-team   { background:var(--blue-bg);     color:var(--blue); }

.gst-werkst { background:var(--c-werkst-bg); color:var(--c-werkst-tx); }
.gst-gres   { background:var(--c-gres-bg);   color:var(--c-gres-tx);   }
.gst-defekt { background:var(--c-defekt-bg); color:var(--c-defekt-tx); }

/* ============================================================
   Farb-Legende im Mitarbeiterkalender
   ============================================================ */
.status-legend { display:flex; gap:8px; flex-wrap:wrap; padding:5px 12px;
                 background:var(--bg2); border-top:0.5px solid var(--border); }
.sl-item { display:flex; align-items:center; gap:3px; font-size:11px; }
.sl-dot  { width:12px; height:12px; border-radius:2px; }

/* ============================================================
   Stammdaten
   ============================================================ */
#screen-stammdaten { padding:12px; overflow:auto; }
#stamm-tabs { display:flex; gap:8px; margin-bottom:12px; }
.stamm-toolbar { margin-bottom:8px; }

table.stamm { width:100%; border-collapse:collapse; background:var(--bg2);
              border-radius:var(--radius-lg); overflow:hidden;
              border:0.5px solid var(--border); }
table.stamm th { background:var(--bg3); padding:8px 10px; text-align:left;
                 font-weight:500; font-size:12px; border-bottom:0.5px solid var(--border); }
table.stamm td { padding:7px 10px; font-size:12px; border-bottom:0.5px solid var(--border); }
table.stamm tr:last-child td { border-bottom:none; }
table.stamm tr:hover td { background:var(--bg3); }

.act-btn { background:transparent; border:none; cursor:pointer; font-size:12px;
           color:var(--blue); padding:2px 6px; border-radius:4px; }
.act-btn:hover     { background:var(--blue-bg); }
.act-btn.del       { color:var(--red); }
.act-btn.del:hover { background:#ffebee; }

/* Rollen-Badges in Tabelle */
.rolle-badge { border-radius:3px; padding:2px 7px; font-size:11px; font-weight:500; }
.rb-Vorarbeiter  { background:var(--c-vorarbeiter-bg);  color:var(--c-vorarbeiter-tx); }
.rb-Facharbeiter { background:var(--c-facharbeiter-bg); color:var(--c-facharbeiter-tx); }
.rb-Azubi        { background:var(--c-azubi-bg);        color:var(--c-azubi-tx); }
.rb-Büro         { background:var(--c-buero-bg);        color:var(--c-buero-tx); }
.rb-Helfer       { background:var(--c-helfer-bg);       color:var(--c-helfer-tx); }
.rb-Prakti       { background:var(--c-prakti-bg);       color:var(--c-prakti-tx); }
.rb-Sub          { background:var(--c-sub-bg);          color:var(--c-sub-tx); }

/* Bereich-Badges */
.bereich-badge { border-radius:3px; padding:2px 7px; font-size:11px; font-weight:500; }
.bb-Betrieb { background:var(--c-betrieb-bg); color:var(--c-betrieb-tx); }
.bb-Pflege  { background:var(--c-pflege-bg);  color:var(--c-pflege-tx); }
.bb-Bau     { background:var(--c-bau-bg);     color:var(--c-bau-tx); }

/* ============================================================
   Modal
   ============================================================ */
#overlay { position:fixed; inset:0; background:rgba(0,0,0,.45);
           display:flex; align-items:center; justify-content:center; z-index:500; }
#modal-box { background:var(--bg2); border-radius:var(--radius-lg);
             border:0.5px solid var(--border); width:92%; max-width:540px;
             max-height:90vh; display:flex; flex-direction:column; overflow:hidden; }
#modal-head { padding:14px 16px; font-weight:500; font-size:14px;
              border-bottom:0.5px solid var(--border); background:var(--bg3);
              display:flex; align-items:center; justify-content:space-between; }
#modal-close { background:none; border:none; cursor:pointer; font-size:18px;
               color:var(--text2); line-height:1; padding:0 4px; }
#modal-close:hover { color:var(--text); }
#modal-body { padding:14px 16px; overflow-y:auto; flex:1; }
#modal-foot { padding:10px 16px; border-top:0.5px solid var(--border);
              display:flex; justify-content:flex-end; gap:8px; background:var(--bg3); }

/* Manager-Modal */
.mgr-cols { display:grid; grid-template-columns:1fr 1fr; gap:10px; min-height:200px; }
.mgr-col  { border:0.5px solid var(--border); border-radius:var(--radius); padding:10px;
             overflow-y:auto; max-height:360px; }
.mgr-col h4 { font-size:11px; font-weight:500; color:var(--text2);
              text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px;
              position:sticky; top:0; background:var(--bg2); padding-bottom:4px; }
.mgr-item { padding:4px 8px; border-radius:4px; font-size:12px;
            cursor:pointer; margin-bottom:2px; display:flex;
            align-items:center; gap:6px; }
.mgr-item:hover { filter:brightness(.92); }
.mgr-item .mgr-role { font-size:10px; opacity:.7; margin-left:auto; }
.mgr-item .mgr-x    { margin-left:auto; opacity:.5; font-size:13px; }
.mgr-sep  { font-size:10px; color:var(--text3); margin:8px 0 3px;
            text-transform:uppercase; letter-spacing:.04em;
            border-top:0.5px solid var(--border); padding-top:6px; }

/* Formular */
.form-row { margin-bottom:10px; }
.form-row label { display:block; font-size:12px; color:var(--text2); margin-bottom:3px; }
.form-row input, .form-row select, .form-row textarea {
  width:100%; padding:7px 10px; border:0.5px solid var(--border2);
  border-radius:var(--radius); font-size:13px;
  background:var(--bg); color:var(--text); font-family:inherit; }
.form-row input:focus, .form-row select:focus { outline:none; border-color:var(--blue); }
.form-2col { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* Passwort */
#pw-dialog input { width:100%; padding:7px 10px; border:0.5px solid var(--border2);
                   border-radius:var(--radius); font-size:13px; margin-bottom:8px;
                   background:var(--bg); color:var(--text); }

/* Team-Verwaltung im Kalender */
.team-mgmt-bar { display:flex; align-items:center; gap:8px; padding:5px 12px;
                 background:var(--bg2); border-top:0.5px solid var(--border);
                 font-size:12px; color:var(--text2); }

/* ---- Legende dynamisch ---- */
.leg-title { font-size:11px; font-weight:500; color:var(--text2); }

/* ---- Einstellungs-Screen ---- */
#screen-einstellungen { background:var(--bg); }
#screen-einstellungen h3 { border-bottom:0.5px solid var(--border); padding-bottom:8px; }

/* ---- Samstag ---- */
.day-cell.samstag   { background:var(--samstag-bg); color:var(--samstag-tx); font-weight:500; }
.day-slot.samstag-col { background:var(--samstag-bg); opacity:.85; }
.kal-day-slot.samstag-col { background:var(--samstag-bg); }

/* ---- Kalender-Slot Farb-Overrides ---- */
.kal-day-slot.today-col   { background: var(--today-bg); }
.kal-day-slot.feiertag-col{ background: #FFFBF0; }
.kal-day-slot:hover       { filter: brightness(.94); cursor: pointer; }

/* ---- Kontextmenü-Overlay ---- */
#mit-status-menu,
#ger-status-menu {
  font-family: system-ui, -apple-system, sans-serif;
}

/* ---- Kalender-Toolbar ---- */
.kal-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--bg2);
  border-bottom: 0.5px solid var(--border);
  flex-shrink: 0;
}

/* ---- Team-Quick-Button im Kalender ---- */
.team-quick-btn {
  background: var(--bg2);
  border: 0.5px solid var(--border2);
  border-radius: 3px;
  cursor: pointer;
  color: var(--text2);
  padding: 1px 0;
  line-height: 1.4;
  transition: background .1s;
  flex-shrink: 0;
}
.team-quick-btn:hover {
  background: var(--blue-bg);
  color: var(--blue);
  border-color: var(--blue-bd);
}

/* ---- Kalender-Name-Zelle verbessert ---- */
.kal-name-cell {
  font-size: inherit;
  line-height: 1.3;
}

/* ---- Screen-Höhe mit Toolbar ---- */
#screen-mitkala,
#screen-gerkala {
  height: calc(100vh - 43px);
  display: flex;
  flex-direction: column;
}
#mitkala-wrap,
#gerkala-wrap {
  flex: 1;
  overflow: auto;
  padding: 8px;
}

/* ---- Sortier-Button aktiv-Sync ---- */
.tbtn.sort-active {
  background: var(--blue-bg);
  border-color: var(--blue);
  color: var(--blue);
}

/* ---- Login Checkbox ---- */
#login-box label { color: var(--text2); }
#login-box input[type="checkbox"] {
  accent-color: var(--blue);
}

/* ---- Chip Mindesthöhe bei großer Schrift ---- */
.chip { min-height: 1.4em; }

/* ---- Kalender-Grid Container ---- */
#kal-grid,
#mitkala-grid,
#gerkala-grid { font-size: inherit; }

/* ---- Sync-Indicator ---- */
#sync-indicator {
  pointer-events: none;
  user-select: none;
}

/* ---- Toast-Nachrichten ---- */
.tp-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  z-index: 9999;
  opacity: 1;
  transition: opacity .5s;
  white-space: nowrap;
  max-width: 90vw;
  text-align: center;
  pointer-events: none;
}
.tp-toast-ok   { background:#1a1d23; color:#fff; }
.tp-toast-warn { background:#BA7517; color:#FAEEDA; }

/* ---- Kopierter Slot Markierung ---- */
.day-slot.slot-kopiert {
  outline: 2px dashed var(--blue);
  outline-offset: -2px;
}

/* ---- Rechtsklick-Menü ---- */
#slot-ctx-menu {
  font-family: system-ui, -apple-system, sans-serif;
}