/* Datei: /var/www/kalender/public/assets/css/app.css */

:root {
  color-scheme: light;

  /* Grundlayout */
  --bg-body:#fdf4e2;
  --text-main:#111;
  --bg-topbar:#FFFAF0;
  --border-topbar:#ddd;

  /* Tabelle */
  --bg-grid:#FFFAF0;
  --border-grid:#6b6b6b;
  --border-cell:transparent;

  /* Zebra */
  --zebra-odd:#ffffff;
  --zebra-even:#f7f7f7;

  /* Samstag */
  --bg-sat:#a2a0a0;

  /* Header Tage */
  --ampel-green:#74fb92;
  --ampel-yellow:#fffb7a;
  --ampel-red:#fe7676;
  --vac-bg:#9ed0ff;

  /* Slots allgemein */
  --slot-text:#111;
  --slot-border:rgba(0,0,0,0.28);

  /* Servicefarben */
  --svc-none:#b4d6fe;
  --svc-jk:#ffdd94;
  --svc-ak:#ffd5b3;
  --svc-ar:#d4a9fe;
  --svc-sr:#ccfffc;
  --svc-ks:#ffd1f3;
  --svc-kl:#9ffec3;
  --svc-sbr:#d35dfd;


  /* Spezial */
  --term-np:#ff0000;

  /* Fallbacks fuer view.php Variablen */
  --slot-bg:transparent;
  --slot-border-width:0px;
  --slot-border-color:rgba(0,0,0,0.28);
  --slot-radius:10px;

  /* Toolbar Layout */
  --topbar-h:48px;
  --tb-group-gap:25px;
  --tb-sep:16px;

  /* Button Farben nach Gruppe */
  --btn-g1-bg:transparent;
  --btn-g1-bd:var(--border-topbar);
  --btn-g1-fg:var(--text-main);

  --btn-g2-bg:transparent;
  --btn-g2-bd:var(--border-topbar);
  --btn-g2-fg:var(--text-main);

  --btn-g3-bg:#49c161;
  --btn-g3-bd:var(--border-topbar);
  --btn-g3-fg:var(--text-main);

  --btn-g4-bg:#fef967;
  --btn-g4-bd:var(--border-topbar);
  --btn-g4-fg:var(--text-main);

  --btn-g5-bg:#7eecfb;
  --btn-g5-bd:var(--border-topbar);
  --btn-g5-fg:var(--text-main);

  --btn-g6-bg:#ff70ec;
  --btn-g6-bd:var(--border-topbar);
  --btn-g6-fg:var(--text-main);

  /* Badges und Rahmen */
  --badge-bg:rgba(255,255,255,0.55);
  --badge-border-color:rgba(0,0,0,0.18);
  --badge-fg:var(--text-main);
  --badge-ps-bg:var(--ampel-yellow);
  --badge-sbr:#111;
  --badge-sbr-border:rgba(0,0,0,0.18);

  --badge-kom-bg:var(--bg-topbar);
  --badge-kom-fg:var(--text-main);
  --term-ps-outline-color:#b51cfd;
  --term-ps-outline-width:6px;

  /* Hover Datum Textfarbe */
  --hover-dt-fg:#111;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, Arial, sans-serif;
  background: var(--bg-body);
  color: var(--text-main);
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border:1px solid var(--border-topbar);
  border-radius:10px;
  background:var(--bg-grid);
  color:var(--text-main);
  text-decoration:none;
  line-height:1;
  cursor:pointer;
}
.btn:hover{filter:brightness(0.98)}
.btn-ghost{background:transparent}
.btn-ghost:hover{background:rgba(0,0,0,0.04)}

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bg-topbar);
  border-bottom: 1px solid var(--border-topbar);
  padding: 6px 10px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.dayhead__wrap{
  display:grid;
  grid-template-columns: 1fr 70px; /* statt auto */
  gap: 8px;
  align-items: stretch;
  width: 100%;
}
.dayhead__left{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.dayhead__rest{
  font-weight:900;
  font-size:28px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  justify-self:center;   /* wichtig */
  text-align:center;
  width:70px;            /* gleiche Breite wie Spalte */
}

.container { padding: 12px; }

.gridwrap {
  overflow: auto;
  max-height: calc(100vh - 76px);
  border: 1px solid var(--border-grid);
  border-radius: 12px;
  background: var(--bg-grid);
}

.grid {
  border-collapse: collapse;
  width: max-content;
  min-width: 100%;
}

.grid th,
.grid td {
  border: 1px solid var(--border-cell);
  padding: 3px 5px;
  vertical-align: top;
}

.timehead,
.timecell {
  position: sticky;
  left: 0;
  background: var(--bg-grid);
  z-index: 8;
}

.dayhead {
  position: sticky;
  top: 0;
  background: var(--bg-grid);
  z-index: 12;
  min-width: 86px;
}

.dayhead.ampel-green { background: var(--ampel-green) !important; }
.dayhead.ampel-yellow { background: var(--ampel-yellow) !important; }
.dayhead.ampel-red { background: var(--ampel-red) !important; }
.dayhead.vac { background: var(--vac-bg) !important; }
.dayhead.sat { background: var(--bg-sat) !important; }


.timerow:nth-child(odd) td { background: var(--zebra-odd); }
.timerow:nth-child(even) td { background: var(--zebra-even); }

.timerow td.sat:not(.vac) { background: var(--bg-sat) !important; }
.timerow td.vac:not(.term) { background: var(--vac-bg) !important; }
.grid td.term.vac { background: var(--vac-bg) !important; }


.slot{
  cursor:default;
  position: relative;
  color: var(--slot-text);
}

.slot.term{cursor:pointer;}

/* Termin Zelle: nur AUSSEN Rahmen und Rundung */
.grid td.term{
  border: var(--slot-border-width) solid var(--slot-border-color) !important;
  border-radius: var(--slot-radius) !important;
  padding: 0 !important;
  overflow: hidden;
}


/* Slotbox darf KEINEN eigenen Rahmen, Schatten oder Rundung haben */
.slotbox{
  display:block;
  width:100%;
  height:100%;
  padding: 6px 8px;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}


/* Service Farben, Variante A: Klassen auf td */
.grid td.term.svc-none { background: var(--svc-none) !important; }
.grid td.term.svc-jk { background: var(--svc-jk) !important; }
.grid td.term.svc-ak { background: var(--svc-ak) !important; }
.grid td.term.svc-ar { background: var(--svc-ar) !important; }
.grid td.term.svc-sr { background: var(--svc-sr) !important; }
.grid td.term.svc-ks { background: var(--svc-ks) !important; }
.grid td.term.svc-kl { background: var(--svc-kl) !important; }
.grid td.term.svc-sbr { background: var(--svc-sbr) !important; }


/* Service Farben, Variante B: alte Struktur (falls irgendwo noch so genutzt) */
.svc-none.term { background: var(--svc-none) !important; }
.svc-jk.term { background: var(--svc-jk) !important; }
.svc-ak.term { background: var(--svc-ak) !important; }
.svc-ar.term { background: var(--svc-ar) !important; }
.svc-sr.term { background: var(--svc-sr) !important; }
.svc-ks.term { background: var(--svc-ks) !important; }
.svc-kl.term { background: var(--svc-kl) !important; }
.svc-sbr.term { background: var(--svc-sbr) !important; }


/* PS Rahmen steuerbar */
td.term.term-ps .slotbox{
    box-shadow: none;
    outline: var(--term-ps-outline-width) solid var(--term-ps-outline-color);
    outline-offset: calc(-1 * var(--term-ps-outline-width));
}

/* Badges steuerbar */
.badgerow{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.badge{
  display:inline-flex;
  align-items:center;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  background: var(--badge-bg);
  border: 1px solid var(--badge-border-color);
  color: var(--badge-fg);
  font-size:12px;
  line-height:18px;
}
.badge-ps{
  background: var(--badge-ps-bg);
  border-color: var(--badge-border-color);
  color: var(--badge-fg);
}
.badge-kom{
  background: var(--badge-kom-bg);
  border-color: var(--badge-border-color);
  color: var(--badge-kom-fg);
}
.badge-sbr{
  background: var(--badge-bg);
  border-color: var(--badge-sbr-border);
  color: var(--badge-sbr);
}


.slot__text{white-space:pre-wrap}
.slot__compactline{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}

/* Zeit + Betrag: Zeit normal, Betrag fett */
/* Zeit links, Betrag rechts – eine Zeile, klar getrennt */
.slot__meta-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;              /* Mindestabstand */
  white-space:nowrap;
}

/* Uhrzeit: normal, links */
.slot__meta-row .slot__meta-left{
  font-weight:400 !important;
  font-size:11px;
  text-align:left;
  margin:0;
}

/* Betrag: fett, rechts */
.slot__meta-row .slot__amountline{
  font-weight:800 !important;
  text-align:right;
  margin-left:auto;     /* schiebt nach rechts */
}


/* Hover Datum */
.slot:hover::after{
  content:attr(data-dt);
  position:absolute;
  left:4px;
  top:2px;
  z-index:999;
  background:rgba(0,0,0,0.70); /* Fallback, wird unten pro Ampel überschrieben */
  color:var(--hover-dt-fg, #111);
  padding:4px 10px;
  border-radius:8px;
  font-size:18px;
  font-weight:800;
  white-space:nowrap;
  pointer-events:none;
}
/* Hover Datum: Hintergrund folgt Ampel-/Urlaub-Farbe der Spalte */
td.slot.ampel-green:hover::after{ background: var(--ampel-green) !important; }
td.slot.ampel-yellow:hover::after{ background: var(--ampel-yellow) !important; }
td.slot.ampel-red:hover::after{ background: var(--ampel-red) !important; }
td.slot.vac:hover::after{ background: var(--vac-bg) !important; }


/* Sonderfall */
.term-np.term{
  background: transparent !important;
  color: inherit !important;
}


/* Toolbar Einzeilig und Gruppenabstaende */
.topbar{justify-content:flex-start;min-height:var(--topbar-h)}
.topbar__left{width:100%}
.topbar__row{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--tb-group-gap);width:100%}
.tb-group{display:flex;align-items:center;gap:8px;white-space:nowrap}
.tb-group-1{margin-right:var(--tb-sep)}
.tb-group-2{margin-right:var(--tb-sep)}
.tb-group-3{margin-right:var(--tb-sep)}
.tb-group-4{margin-right:var(--tb-sep)}
.tb-group-5{margin-right:var(--tb-sep)}
.tb-group-6{margin-right:0}
.topbar__title{font-weight:700;font-size:16px;line-height:1}
.yearform{display:flex;align-items:center;gap:8px;margin:0}
.yearform select{height:32px;border:1px solid var(--border-topbar);border-radius:10px;padding:0 10px;background:var(--bg-grid)}

/* Button Gruppen Farben */
a.btn[data-btn-group="1"]{background:var(--btn-g1-bg);border-color:var(--btn-g1-bd);color:var(--btn-g1-fg)}
a.btn[data-btn-group="2"]{background:var(--btn-g2-bg);border-color:var(--btn-g2-bd);color:var(--btn-g2-fg)}
a.btn[data-btn-group="3"]{background:var(--btn-g3-bg);border-color:var(--btn-g3-bd);color:var(--btn-g3-fg)}
a.btn[data-btn-group="4"]{background:var(--btn-g4-bg);border-color:var(--btn-g4-bd);color:var(--btn-g4-fg)}
a.btn[data-btn-group="5"]{background:var(--btn-g5-bg);border-color:var(--btn-g5-bd);color:var(--btn-g5-fg)}
a.btn[data-btn-group="6"]{background:var(--btn-g6-bg);border-color:var(--btn-g6-bd);color:var(--btn-g6-fg)}