/* ═══════════════════════════════════════════════════════════════
   CARLSWERK × Palladio — zentrales Design-System (v1.2.0)

   Erste Ausbaustufe: Design-Tokens, Icon-Feinschliff und das
   Spalten-Layout der Detailansichten (case_detail + wizard/case_view).
   Bestehende Inline-Styles der übrigen Seiten bleiben vorerst
   unangetastet und werden schrittweise hierher migriert.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --primary:        #1B3B36;  /* Racing Green */
  --primary-light:  #2A5A52;
  --primary-faded:  rgba(27, 59, 54, 0.06);
  --accent:         #C8553D;
  --mandarin:       #FF6900;  /* Dev-Banner */
  --success:        #2A7D5F;
  --warning:        #B8860B;
  --bg:             #F6F1EA;
  --bg-card:        #FFFFFF;
  --bg-input:       #FAFAF7;
  --border:         #D4CFC6;
  --text:           #1B3B36;
  --text-muted:     #5E7A74;
  --radius:         8px;   /* Buttons, Inputs, Selects */
  --radius-lg:      12px;  /* Cards, Banner, Boxen */
}

/* ─── Design-Normalisierung (v1.2.0) ────────────────────────────
   Die Codebase trägt historisch ~10 verschiedene border-radius-Werte
   als Inline-Styles. Dieser Layer vereinheitlicht per !important
   (Inline-Styles sind sonst nicht übersteuerbar) auf zwei Tokens.
   Kreisrunde Elemente (border-radius:50%, Avatare, Badges als <span>)
   sind bewusst nicht betroffen. Beim schrittweisen Aufräumen der
   Inline-Styles direkt die Tokens verwenden. */
button,
.btn, a.btn,
input[type="submit"], input[type="button"],
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="date"], input[type="time"], input[type="search"],
select, textarea, .field {
  border-radius: var(--radius) !important;
}
.card, .msg, .warn, .login-box {
  border-radius: var(--radius-lg) !important;
}

/* ─── Icons (includes/icons.php liefert Inline-SVG in currentColor) ──
   Font-artiges Verhalten: Default-Größe 1.05em (skaliert mit der
   Schrift), Einheitsfarbe weiches Schwarz. In Buttons und im dunklen
   Header erben Icons die dortige Textfarbe — sonst wären sie auf
   dunklem Grund unsichtbar. */
.ic { color: #1C1C1C; }
button .ic, .btn .ic, a.btn .ic,
.header .ic, .header-link .ic, .nd-logout .ic {
  color: inherit;
}
.ic-muted  { color: var(--text-muted) !important; }
.ic-danger { color: var(--accent) !important; }

/* ─── Breiter Container für die Detailansichten ─────────────────
   Spezifität (.container.container--wide) schlägt die bestehende
   Inline-Regel .container{max-width:900px} unabhängig von der
   Ladereihenfolge. */
.container.container--wide {
  max-width: 1780px;
}

/* ─── Kachel-Spalten-Layout ─────────────────────────────────────
   Struktur im Markup:
     <div class="cards-layout">
       <div class="cards-col" data-col="0">…</div>
       <div class="cards-col-wrap">
         <div class="cards-col" data-col="1">…</div>
         <div class="cards-col" data-col="2">…</div>
       </div>
     </div>

   Breakpoints:
     <1100px         eine Spalte (heutige Ansicht) — wrap löst sich auf
     1100–1699px     zwei Spalten: col0 | (col1 über col2)
     ≥1700px         drei Spalten — wrap löst sich auf (display:contents)
*/
.cards-layout {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 24px;
  align-items: start;
}
.cards-col { min-width: 0; min-height: 24px; }
.cards-col-wrap { display: contents; }

@media (min-width: 1100px) {
  .cards-layout { grid-template-columns: 1fr 1fr; }
  .cards-col-wrap { display: block; min-width: 0; }
}

@media (min-width: 1700px) {
  .cards-layout { grid-template-columns: 1fr 1fr 1fr; }
  .cards-col-wrap { display: contents; }
}

/* ─── Drag & Drop (SortableJS) ──────────────────────────────────
   Identisch zu den bestehenden Inline-Regeln in case_detail/head.php,
   hier zentral, damit auch der Wizard sie bekommt. */
.card.collapsible .coll-drag {
  cursor: grab;
  color: var(--border);
  font-size: 14px;
  line-height: 1;
  padding: 4px 2px;
  flex-shrink: 0;
  transition: color .15s;
  user-select: none;
}
.card.collapsible .coll-drag:hover  { color: var(--text-muted); }
.card.collapsible .coll-drag:active { cursor: grabbing; }
.card.collapsible.sortable-ghost {
  opacity: .4;
  background: var(--primary-faded) !important;
}
.card.collapsible.sortable-chosen { box-shadow: 0 8px 30px rgba(0,0,0,.12); }

/* ─── Zentrale Kopfzeile (v1.2.5, includes/app_header.php) ──────
   Eine Komponente für alle Seiten beider Bereiche. Ersetzt die
   historisch gewachsenen Einzel-Header (mal Zurück-Link, mal
   Icon-Reihe, mal nichts). Konventionen:
     - Marke klickbar → Übersicht (der eine, immer gleiche Heimweg)
     - Brotkrume zeigt die aktuelle Seite (aria-current)
     - Rechts überall dieselbe Symbolreihe + Avatar + ☰-Menü */
.app-header {
  background: var(--primary);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 20px rgba(27, 59, 54, .15);
  font-family: system-ui, sans-serif;
}
.ah-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ah-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; flex-shrink: 0; }
.ah-brand img { height: 24px; width: auto; display: block; }
.ah-sep { width: 1px; height: 24px; background: rgba(246, 241, 234, .25); display: block; }
.ah-product { color: #F6F1EA; font-size: 16px; font-family: Georgia, serif; white-space: nowrap; }
.ah-brand:hover .ah-product { color: #fff; }
.ah-chev { color: #9BB5AE; font-size: 15px; flex-shrink: 0; }
.ah-crumb { color: #9BB5AE; font-size: 14px; text-decoration: none; white-space: nowrap; }
.ah-crumb:hover { color: #F6F1EA; }
.ah-crumb-current {
  color: #F6F1EA; font-size: 14px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 340px;
}
.ah-online {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: #9BB5AE;
  background: rgba(246, 241, 234, .07);
  border: 1px solid rgba(246, 241, 234, .14);
  border-radius: 999px; padding: 3px 11px; white-space: nowrap; margin-left: 6px;
}
.ah-online-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); flex-shrink: 0; }

.ah-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ah-actions { display: inline-flex; align-items: center; gap: 8px; margin-right: 6px; }
.ah-iconlink {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius);
  color: #C9D8D3; text-decoration: none; transition: background .15s, color .15s;
}
.ah-iconlink:hover { background: rgba(246, 241, 234, .1); color: #fff; }
.ah-iconlink.active { background: rgba(246, 241, 234, .14); color: #fff; box-shadow: inset 0 -2px 0 var(--mandarin); }
.ah-iconlink .ic { color: inherit; font-size: 17px; }
.ah-unread {
  position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--accent); color: #fff; border-radius: 8px;
  font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.ah-cta {
  color: #F6F1EA; text-decoration: none; font-size: 13px; white-space: nowrap;
  border: 1px solid rgba(246, 241, 234, .25); border-radius: var(--radius);
  padding: 6px 13px; margin-right: 4px; transition: background .15s, border-color .15s;
}
.ah-cta:hover, .ah-cta.active { background: rgba(246, 241, 234, .12); border-color: rgba(246, 241, 234, .45); }

.ah-user { display: flex; align-items: center; gap: 9px; margin: 0 8px 0 10px; min-width: 0; }
.ah-avatar { border: 1.5px solid rgba(246, 241, 234, .3); }
.ah-username { color: #F6F1EA; font-size: 13px; white-space: nowrap; }
.ah-badge {
  font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  border-radius: 999px; padding: 2px 8px; flex-shrink: 0;
}
.ah-badge-admin { background: var(--mandarin); color: #fff; }
.ah-badge-ra    { background: rgba(246, 241, 234, .18); color: #F6F1EA; }

.ah-menuwrap { position: relative; }
.ah-menu-btn {
  background: none; border: 1px solid rgba(246, 241, 234, .25); color: #F6F1EA;
  width: 34px; height: 34px; border-radius: var(--radius) !important;
  font-size: 15px; cursor: pointer; transition: background .15s;
  display: inline-flex; align-items: center; justify-content: center;
}
.ah-menu-btn:hover { background: rgba(246, 241, 234, .12); }
.ah-dropdown {
  display: none; position: absolute; right: 0; top: calc(100% + 8px);
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(27, 59, 54, .18);
  min-width: 250px; padding: 8px; z-index: 200;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ah-dropdown.open { display: block; }
.ah-dropdown a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--radius);
  color: var(--text); text-decoration: none; font-size: 13.5px;
}
.ah-dropdown a:hover { background: var(--primary-faded); }
.ah-dropdown a.active { background: var(--primary-faded); font-weight: 600; }
.ah-nd-icon { display: inline-flex; width: 18px; justify-content: center; flex-shrink: 0; }
.ah-nd-label {
  font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-muted); padding: 8px 12px 4px;
}
.ah-nd-sep { height: 1px; background: var(--border); margin: 6px 4px; opacity: .6; }
.ah-nd-count {
  background: var(--accent); color: #fff; padding: 1px 6px; border-radius: 8px;
  font-size: 10px; font-weight: 600; margin-left: 4px;
}
.ah-nd-logout { color: var(--accent) !important; }

@media (max-width: 900px) {
  .app-header { padding: 12px 14px; }
  .ah-username, .ah-online, .ah-crumb, .ah-chev-parent { display: none; }
  .ah-crumb-current { max-width: 160px; }
}