/*
 * MoGoNo-Portal — Vorschlag "C · Kontrastreich" mit linker Seitenleiste.
 * Wird nach Bulma geladen und überschreibt gezielt Farben, Typografie und
 * Layout. Bulma bleibt Basis für Grid, Formulare und Utility-Klassen.
 * Quelle: mogono-css-vorschlaege.html (Option C, Navigation links).
 */

:root{
  color-scheme:light;
  --ci-blue:#0070A2; --ci-blue-dark:#004D70; --ci-blue-light:#E6F1F7;
  --gold:#C49A36; --gold-soft:#F2E6C4;
  --navy:#0E2538; --navy-2:#163148;
  --text:#1A2D3E; --text-2:#48637B;
  --bg:#F5F7FA; --paper:#FAF8F3;
  --ok:#1F7A48; --warn:#C97A1E; --danger:#A82424;
  --ok-ink: color-mix(in srgb, var(--ok) 82%, black 18%);
  --warn-ink: color-mix(in srgb, var(--warn) 70%, black 30%);
  --danger-ink: color-mix(in srgb, var(--danger) 88%, black 12%);
  --line:#DCE3EB;
  --radius:6px;
  --prod-font:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
}

html{ font-size:17px; }
body{
  font-family:var(--prod-font);
  background:var(--bg);
  color:var(--text);
}
a{ color:var(--ci-blue-dark); }

:focus-visible{ outline:3px solid var(--ci-blue-dark); outline-offset:2px; border-radius:3px; }

/* ===================== Layout: Seitenleiste + Inhalt ===================== */
.app-shell{ display:flex; align-items:stretch; min-height:100vh; }
.app-main{ flex:1; min-width:0; display:flex; flex-direction:column; }

.sidebar{
  flex:0 0 232px; width:232px; display:flex; flex-direction:column;
  background:var(--navy); color:#fff;
  border-right:1px solid var(--navy-2);
}
.sidebar-brand{
  display:flex; align-items:center; gap:.85rem; padding:1rem;
  text-decoration:none; color:#fff;
  border-bottom:1px solid color-mix(in srgb, white 14%, transparent);
}
.logo-plate{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  background:#fff; padding:7px; border-radius:8px; line-height:0;
}
.logo-plate .brand-logo{ display:block; height:40px; width:auto; }
.sidebar-brand-text{ font-weight:800; font-size:1.02rem; color:#fff; text-decoration:none; }

.sidebar-menu{ display:flex; flex-direction:column; gap:.15rem; padding:.5rem; flex:1; }
.sidebar-item{
  color:#fff; text-decoration:none; font-weight:600; font-size:.92rem;
  display:flex; align-items:center; min-height:44px; padding:.6rem .85rem;
  border-radius:4px; position:relative;
}
.sidebar-item:hover{ background:var(--navy-2); color:#fff; }
.sidebar-item[aria-current="page"]{
  font-weight:800;
  text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:6px;
}

.sidebar-foot{
  display:flex; flex-direction:column; align-items:stretch; gap:.35rem;
  padding:.75rem .75rem 1rem; margin-top:auto;
  border-top:1px solid color-mix(in srgb, white 14%, transparent);
}
.sidebar-foot .sidebar-item{ font-size:.85rem; }
.sidebar-user{ color:color-mix(in srgb, white 82%, var(--navy) 18%); font-weight:600; }

@media (max-width:720px){
  .app-shell{ flex-direction:column; }
  .sidebar{ width:100%; flex:none; flex-direction:row; flex-wrap:wrap; border-right:none; border-bottom:1px solid var(--navy-2); }
  .sidebar-brand{ border-bottom:none; }
  .sidebar-menu{ flex-direction:row; flex-wrap:wrap; padding:0 .5rem .5rem; }
  .sidebar-foot{ flex-direction:row; margin-top:0; margin-left:auto; border-top:none; padding:.5rem .75rem; }
}

/* ===================== Bulma-Bausteine neu eingefärbt ===================== */
.hero.is-primary{ background:var(--navy); color:#fff; }
.hero.is-primary .title{ color:#fff; }
.hero.is-primary .subtitle{ color:color-mix(in srgb, white 82%, var(--navy) 18%); }

.button.is-primary{ background:var(--ci-blue-dark); color:#fff; border-radius:var(--radius); }
.button.is-primary:hover{ background:var(--navy); color:#fff; }
.button.is-primary:focus-visible{ outline:3px solid var(--ci-blue-dark); outline-offset:2px; }

.notification.is-danger{ background:color-mix(in srgb, var(--danger) 14%, white); color:var(--danger-ink); border:1px solid color-mix(in srgb, var(--danger) 35%, white); }
.notification.is-warning{ background:color-mix(in srgb, var(--warn) 20%, white); color:var(--warn-ink); border:1px solid color-mix(in srgb, var(--warn) 40%, white); }
.notification.is-info{ background:var(--ci-blue-light); color:var(--ci-blue-dark); border:1px solid color-mix(in srgb, var(--ci-blue) 35%, white); }
.notification.is-success{ background:color-mix(in srgb, var(--ok) 14%, white); color:var(--ok-ink); border:1px solid color-mix(in srgb, var(--ok) 35%, white); }

.tag.is-primary{ background:var(--ci-blue-dark); color:#fff; }
.tag.is-danger{ background:color-mix(in srgb, var(--danger) 15%, white); color:var(--danger-ink); }
.tag.is-warning{ background:color-mix(in srgb, var(--warn) 20%, white); color:var(--warn-ink); }
.tag.is-info{ background:var(--ci-blue-light); color:var(--ci-blue-dark); }
.tag.is-success{ background:color-mix(in srgb, var(--ok) 16%, white); color:var(--ok-ink); }

.box{ border:1.5px solid var(--line); border-radius:var(--radius); box-shadow:none; }
.card{ border:1.5px solid var(--line); border-radius:var(--radius); box-shadow:none; }
.card:hover{ border-color:var(--ci-blue-dark); box-shadow:0 0 0 2px var(--ci-blue-dark); }

.input, .textarea, .select select{
  border:1.5px solid color-mix(in srgb, var(--text-2) 55%, var(--line) 45%);
  border-radius:var(--radius); color:var(--text);
}
.input:focus, .input.is-focused, .textarea:focus, .select select:focus{
  border-color:var(--ci-blue-dark); box-shadow:0 0 0 3px color-mix(in srgb, var(--ci-blue-dark) 25%, transparent);
}

.table thead th{ color:var(--text-2); text-transform:uppercase; font-size:.75rem; letter-spacing:.05em; }
.table td, .table th{ border-color:var(--line); }

.title{ color:var(--text); }
.subtitle{ color:var(--text-2); }

/* ===================== Modul-Karten (Startseite) ===================== */
.module-ico{ font-size:1.7rem; margin:0 0 .55rem; line-height:1; }

/* ===================== Auswahlkarten (z.B. Einsatztyp-Wahl) ===================== */
label.box:has(input:checked){ border-color:var(--ci-blue-dark); box-shadow:0 0 0 2px var(--ci-blue-dark); }
label.box:hover{ border-color:var(--ci-blue-dark); }

/* ===================== Status-Chip — Status nie nur über Farbe ===================== */
.status-chip{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.78rem; font-weight:700; padding:.3rem .65rem; border-radius:5px;
  white-space:nowrap;
}
.status-chip--neutral{ background:var(--bg); color:var(--text-2); border:1px solid var(--line); }
.status-chip--info{ background:var(--ci-blue-light); color:var(--ci-blue-dark); }
.status-chip--warn{ background:color-mix(in srgb, var(--warn) 20%, white); color:var(--warn-ink); }
.status-chip--ok{ background:color-mix(in srgb, var(--ok) 16%, white); color:var(--ok-ink); }
.status-chip--danger{ background:color-mix(in srgb, var(--danger) 15%, white); color:var(--danger-ink); }
.status-chip--neutral::before{ content:"◌"; }
.status-chip--info::before{ content:"◔"; }
.status-chip--warn::before{ content:"▶"; }
.status-chip--ok::before{ content:"✓"; }
.status-chip--danger::before{ content:"✕"; }