/* ==========================================================
   Q4 Gastro — Operator-Panel
   Ergänzung zu backoffice.css, KEIN zweites Design-System.
   Nur was das Panel zusätzlich braucht: Navigationsgruppen,
   Dashboard-Kacheln, Ampel-Signale, Login.
   Bewusst ohne color-mix() und ohne :is() — dieselbe Disziplin
   wie in den Bedienoberflächen (siehe kitchen.css).
   ========================================================== */

/* Operator-Akzent: fest, NICHT mandantenfähig. Das Kunden-Backoffice trägt die
   Farbe des Kunden — hier muss man auf einen Blick sehen, dass man im Q4-Betrieb
   ist und nicht beim Kunden. */
.ad {
  --c-accent:      #3f6b53;
  --c-accent-soft: #cfe0d5;
}

/* ── Navigation ───────────────────────────────────────────── */
.ad-navgroup {
  margin: 18px 0 4px;
  padding: 0 12px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  opacity: .75;
}
.ad-navgroup:first-child { margin-top: 4px; }

/* Geplant, aber noch nicht gebaut: sichtbar, damit man den Umfang kennt —
   aber nicht klickbar, damit niemand in eine 404 läuft. */
.ad-nav--soon {
  display: flex; align-items: center; justify-content: space-between;
  opacity: .45; cursor: default;
}
.ad-nav--soon em {
  font-style: normal; font-size: .64rem; letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid var(--c-line); border-radius: var(--r-pill);
  padding: 1px 7px;
}

/* ── Dashboard ────────────────────────────────────────────── */
.ad-section { margin: 0 0 28px; }
.ad-section__head {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 0 10px;
}
.ad-section__head h2 { margin: 0; font-size: 1.02rem; font-weight: 650; }
.ad-section__hint { font-size: .82rem; color: var(--c-ink-soft); }

.ad-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.ad-tile {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.ad-tile__label {
  font-size: .78rem; color: var(--c-ink-soft);
  text-transform: uppercase; letter-spacing: .05em;
}
.ad-tile__value {
  font-size: 1.7rem; font-weight: 640; line-height: 1.25;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.ad-tile__note { font-size: .82rem; color: var(--c-ink-soft); margin-top: 2px; }

/* Zustandsfarben stehen fest — sie dürfen NIE mandantenfähig werden, sonst
   kollidiert eine frei gewählte Kundenfarbe mit einem Warnsignal. */
.ad-tile--ok    { border-left-color: #3f7d4f; }
.ad-tile--warn  { border-left-color: #a8590f; }
.ad-tile--alarm { border-left-color: #b3261e; }
.ad-tile--mute  { border-left-color: var(--c-line); }
.ad-tile--alarm .ad-tile__value { color: #b3261e; }
.ad-tile--warn  .ad-tile__value { color: #a8590f; }

/* ── Aufgabenliste ────────────────────────────────────────── */
.ad-tasks { display: flex; flex-direction: column; gap: 8px; }
.ad-task {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-left: 3px solid #a8590f;
  border-radius: var(--r-md);
  padding: 11px 14px;
}
.ad-task--blocker { border-left-color: #b3261e; background: #fdf6f5; }
.ad-task__body { flex: 1; min-width: 0; }
.ad-task__title { font-weight: 600; font-size: .94rem; }
.ad-task__why   { font-size: .84rem; color: var(--c-ink-soft); margin-top: 2px; line-height: 1.5; }
.ad-task__who   { font-size: .78rem; color: var(--c-ink-soft); margin-top: 4px; }
.ad-task__partner {
  flex: 0 0 auto; font-size: .78rem; color: var(--c-ink-soft);
  border: 1px solid var(--c-line); border-radius: var(--r-pill);
  padding: 2px 10px; white-space: nowrap;
}

.ad-empty {
  border: 1px dashed var(--c-line);
  border-radius: var(--r-md);
  padding: 18px;
  text-align: center;
  color: var(--c-ink-soft);
  font-size: .9rem;
}

/* ── Kundenliste ──────────────────────────────────────────── */
.ad-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 7px; vertical-align: baseline;
}
.ad-dot--ok    { background: #3f7d4f; }
.ad-dot--warn  { background: #a8590f; }
.ad-dot--alarm { background: #b3261e; }
.ad-dot--idle  { background: #b9beb5; }
.ad-dot--demo  { background: #4a7fb5; }

.ad-sub { font-size: .8rem; color: var(--c-ink-soft); }
.ad-num { font-variant-numeric: tabular-nums; text-align: right; }

/* ── Mobil ────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .ad-tiles { grid-template-columns: 1fr; }
  .ad-task  { flex-direction: column; gap: 6px; }
}