/*
  TeamShifter Custom CSS
  - Diese Datei wird nach dem Standard-Layout geladen und eignet sich fuer alle Layout-Anpassungen.
  - Tipp: Wenn du in app/Views/layout.php Aenderungen vermeiden willst, schreibe deine Overrides hier.
*/

/* Sticky Footer: Footer bleibt unten, ausser der Inhalt ist laenger */
html, body { height: 100%; }
body {
  background: var(--app-bg) !important;
  font-family: var(--app-font-family) !important;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body, input, select, textarea, button, .btn, .form-control, .form-select, .table, .navbar {
  font-family: var(--app-font-family) !important;
}

.btn-primary { background-color: var(--app-primary) !important; border-color: var(--app-primary) !important; }
.btn-primary:hover { filter: brightness(0.95); }

/* Wochentage (Kopfzeile) */
.dow1 { background: var(--dow1-bg); }
.dow2 { background: var(--dow2-bg); }
.dow3 { background: var(--dow3-bg); }
.dow4 { background: var(--dow4-bg); }
.dow5 { background: var(--dow5-bg); }

.weekendcol { background: var(--weekend-bg) !important; }
.holidaycol { background: var(--holiday-bg) !important; }
.cell:hover { outline: 2px solid var(--cell-hover-outline); outline-offset: -2px; }

.daycol { width: 48px; min-width: 48px; text-align: center; }
.namecol { width: 220px; min-width: 220px; }
.cell { height: 30px; cursor: default; }
.cell.clickable { cursor: pointer; }
.split { display: flex; height: 100%; }
.half {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  border-right: 1px solid rgba(0,0,0,.25);
}
.half:last-child { border-right: none; }
.full { height: 100%; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.legend-dot { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,.2); display: inline-block; }
.table-fixed { table-layout: fixed; }

/* Benachrichtigungs-Badge: direkt auf der Glocke */
.bell-wrap { position: relative; display: inline-block; width: 1.4rem; height: 1.4rem; line-height: 1.4rem; }
.bell-badge { position: absolute; top: -0.35rem; right: -0.55rem; font-size: .65rem; padding: .25em .45em; }

/* UI Polish */
.container-fluid { max-width: 1400px; }

/* Main: keinen sichtbaren Rand/Schatten um den Inhaltsbereich */
main.container-fluid {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
footer { margin-top: auto; }

.card { border: 0; border-radius: 1rem; box-shadow: 0 .25rem .75rem rgba(0,0,0,.06); }
.card-header { background: rgba(255,255,255,.7); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(0,0,0,.06); font-weight: 600; }
.table thead th { font-weight: 600; color: rgba(0,0,0,.75); }
.table-hover tbody tr:hover { background: rgba(0,0,0,.02); }
.btn { border-radius: .75rem; }
.form-control, .form-select { border-radius: .75rem; }
.badge { border-radius: .75rem; }
.page-title { font-weight: 800; letter-spacing: -.02em; }
.page-subtitle { color: rgba(0,0,0,.55); }
.crud-actions .btn { padding-left: .6rem; padding-right: .6rem; }
.navbar-brand img { box-shadow: 0 .25rem .75rem rgba(0,0,0,.15); }


/* ------------------------------------------------------------
   Home / Planansicht: Standard-Basis
   Diese Regeln bilden die gemeinsame Grundlage fuer alle Domains,
   Rollen und Firmen. Firmen-/Layout-Templates ueberschreiben nur
   Farben, Schriften und layout-spezifische Variablen.
   ------------------------------------------------------------ */
#planWrap{
  --namecol-w: 200px;
  --head-h: 44px;
  --sep-h: 44px;
  overflow:auto;
  border:1px solid rgba(0,0,0,.10);
  border-radius:1rem;
  box-shadow:0 .25rem .75rem rgba(0,0,0,.06);
  background:#fff;
}
#planWrap table{ border-collapse:collapse; margin:0; }
#planWrap thead th{ position:sticky; top:0; z-index:11; background:rgba(248,249,250,.95); backdrop-filter:blur(6px); height:var(--head-h); vertical-align:middle; }
#planWrap th.sticky-col, #planWrap td.sticky-col{ position:sticky; left:0; z-index:6; background:rgba(255,255,255,.98); }
#planWrap thead th.sticky-col{ z-index:12; background:rgba(248,249,250,.97); }
#planWrap th.namecol{ width:var(--namecol-w); min-width:var(--namecol-w); max-width:var(--namecol-w); }
#planWrap thead th.namecol{ min-width:var(--namecol-w); max-width:var(--namecol-w); background:#f8f9fa !important; padding:6px 10px !important; }
#planWrap tbody th.namecol{
  min-width:var(--namecol-w);
  max-width:var(--namecol-w);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  background:rgba(255,255,255,.98) !important;
  vertical-align:middle;
  text-align:left !important;
  padding:4px 6px !important;
  height:var(--row-h) !important;
  border-color:transparent !important;
}
#planWrap tbody th.namecol .namewrap{
  background:rgba(0,0,0,.03);
  border-radius:12px;
  padding:6px 10px;
  height:calc(var(--row-h) - 2px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:2px;
  line-height:1.05;
  min-width:0;
  width:100%;
  text-align:left;
}
#planWrap .namecopy{ min-width:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; text-align:left; width:100%; }
#planWrap .namehead{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; }
#planWrap .namewrap[data-user-tip="1"]{ cursor:default; }
#planWrap .namewrap[data-user-tip="1"]:focus{ outline:2px solid rgba(51,85,153,.35); outline-offset:2px; }
#planWrap .uname{ font-family:var(--app-font-family) !important; font-weight:800; letter-spacing:.15px; text-align:left; min-width:0; flex:0 1 auto; display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#planWrap .umeta{ font-family:var(--app-font-family) !important; font-size:10px; font-weight:650; color:rgba(0,0,0,.55); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%; text-align:left; }
#planWrap .urole{ min-width:24px; max-width:34px; height:20px; padding:0 5px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; font-family:var(--app-font-family) !important; font-weight:800; font-size:9px; letter-spacing:-.1px; color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.45); border:1px solid rgba(0,0,0,.14); background:rgba(0,0,0,.08); flex:0 0 auto; margin-left:auto; }
#planWrap .urole.is-empty{ background:transparent; border-color:transparent; text-shadow:none; padding:0; min-width:0; max-width:none; }
#planWrap .urole.is-vorgesetzte{ background:#1f5eff; }
#planWrap .urole.is-vorgesetzte_stv{ background:#0f8a70; font-size:8px; letter-spacing:-.2px; }
#planWrap .urole.is-mitarbeiter{ background:#335599; }
#planWrap .urole.is-freelancer{ background:#7c3aed; }
#planWrap .urole.is-extern{ background:#9a3412; }
#planWrap .urole.is-lehrende{ background:#b45309; }
#planWrap td.daycol{ padding:0 !important; vertical-align:top; min-width:54px; width:54px; height:var(--row-h) !important; }
#planWrap thead th.daycol{ padding:0 !important; font-size:var(--weekday-font-size, 11px); line-height:1.05; font-weight:700; height:var(--row-h); }
#planWrap tbody tr{ height:var(--row-h) !important; }
#planWrap tbody tr.user-row th.namecol,
#planWrap tbody tr.user-row td.daycol{ height:var(--row-h) !important; line-height:var(--row-h); }
#planWrap tbody td.daycol > .cell{ height:calc(100% - 2px) !important; min-height:calc(var(--row-h) - 2px); }
#planWrap thead th.daycol:first-child,
#planWrap tbody td.daycol:first-child{ border-left:none !important; }
#planWrap thead th.weekendcol{ color:#b00020; }
#planWrap table,
#planWrap td,
#planWrap th{ border-color:rgba(0,0,0,.12) !important; }
#planWrap .cell.selected{ outline:2px solid var(--cell-hover-outline); outline-offset:-2px; }
.view-only .cell{ cursor:default !important; }
.sep-row th, .sep-row td{ position:sticky; top:var(--head-h); z-index:9; height:var(--sep-h) !important; padding:0 !important; border-top:none !important; border-bottom:none !important; }
.sep-row th{ border-right:none !important; }
.sep-row td{ border-left:none !important; }
.sep-row td{ background:#f1f3f5; font-weight:800; }
.sep-row.sep-team td{ background-color:inherit; font-weight:700; }
.sep-row.sep-team.sep-gap td{ border-top:1px solid rgba(0,0,0,.12); padding-top:12px; }
.sep-row .sep-pill{ height:var(--sep-h) !important; }
.sep-fill{ min-height:24px; }

/* Tooltips in der Planansicht */
.ts-user-tooltip{ pointer-events:auto !important; }
.ts-user-tooltip .tooltip-inner{ max-width:none !important; width:max-content; max-width:min(calc(100vw - 36px), 520px) !important; pointer-events:auto !important; text-align:left; }
.ts-user-tooltip.bs-tooltip-bottom{ margin-top:4px; }
.ts-user-tip{ display:flex; align-items:center; gap:10px; width:max-content; max-width:min(calc(100vw - 36px), 520px); }
.ts-user-tip-photo, .ts-user-tip-avatar{ width:56px; height:56px; border-radius:12px; flex:0 0 56px; }
.ts-user-tip-photo{ object-fit:cover; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); }
.ts-user-tip-avatar{ display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1rem; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.14); }
.ts-user-tip-copy{ min-width:0; display:flex; flex-direction:column; gap:2px; text-align:left; white-space:nowrap; flex:1 1 auto; }
.ts-user-tip-name{ font-weight:800; line-height:1.08; }
.ts-user-tip-birth, .ts-user-tip-phone{ line-height:1.1; opacity:.98; }
.ts-user-tip-phone a{ color:#fff; text-decoration:underline; }
.ts-tip-item{ margin-top:4px; }
.ts-tip-time{ font-size:.92em; opacity:.92; }