/* ==========================================================================
   base.css — Mobile-first Grundlayout
   ========================================================================== */

/* == 0) Design-Tokens ====================================================== */
:root{
  /* Farben */
  --bg:        #ffffff;
  --text:      #000000;
  --muted:     #f7f7f7;
  --brand:     #df2334;
  --field:     #e7f0fe;

  /* Statusfarben */
  --ok:        #1e8e3e;
  --warn:      #f6c343;
  --err:       #d93025;

  /* Radius + Abstände */
  --radius:    10px;
  --gap-1:     8px;
  --gap-2:     12px;
  --gap-3:     16px;
  --gap-4:     24px;

  /* UI-Höhen */
  --nav-h:     56px;        /* Höhe der unteren Tabbar */

  /* Typo */
  --font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Rahmen & Linien */
  --line:      #eee;
  --line-2:    #ddd;

  /* Admin-Bar-Höhe (via .has-adminbar überschrieben) */
  --adminbar-h: 0px;

  /* Stacking-Konzept */
  --z-bottomnav: 1000;
  --z-adminbar:  1010;
  --z-backdrop:  1100;
  --z-drawer:    1200;
  --z-debug:     2000; /* Debug-Modal ganz oben */
}

/* == 1) Reset & Basistypo ================================================== */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--text);
  background: var(--bg);
  font: var(--font);
}

/* Platz für fixe Bottom-Nav + optionale Admin-Bar */
body { padding-bottom: calc(var(--nav-h) + var(--adminbar-h) + env(safe-area-inset-bottom)); }
body.has-adminbar{ --adminbar-h: 28px; }

img { max-width: 100%; height: auto; }

/* Skip-Link */
.skip{
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip:focus{
  left: 8px; top: 8px; width: auto; height: auto;
  background:#fff; color:#000; padding: 8px 10px; border:1px solid var(--line);
  border-radius: 6px; z-index: 10000;
}

/* Fokus nur bei Tastaturbedienung sichtbar */
:focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; }

/* == 2) Container & Spacing ================================================= */
.container-1100 { max-width: 1100px; margin: 0 auto; padding: 0 var(--gap-2); }
.container-420  { max-width:  420px; margin: 0 auto; padding: 0 var(--gap-2); }
.content-pad    { padding: var(--gap-3) 0; }

.grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-2);
}

/* == 3) Top-Bar & Drawer ==================================================== */
/* Top-Bar */
.top-bar{
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--gap-2);
  padding: 8px var(--gap-2);
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.brand{ font-size: 18px; margin: 0; }

/* Suchfeld */
.omnibox input{
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: var(--field);
}

/* Icon-Buttons */
.icon-btn{
  background: none; border: 0;
  padding: 8px; font-size: 20px; line-height: 1;
  color: inherit; cursor: pointer;
}

/* Drawer */
.drawer{
  position: fixed; inset: 0 auto 0 0;
  width: 86%; max-width: 360px;
  background: #fff; border-right: 1px solid var(--line);
  transform: translateX(-100%);
  transition: transform .2s ease;
  z-index: var(--z-drawer);
}
.drawer[aria-hidden="false"]{ transform: none; }

.drawer-head{
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px; border-bottom: 1px solid var(--line);
}

/* Menü */
.menu-root{ list-style: none; margin: 0; padding: 8px 0; }
.menu-root a{
  display: block; padding: 12px 16px;
  color: inherit; text-decoration: none;
}
.menu-root details summary{ cursor: pointer; padding: 12px 16px; font-weight: 600; }
.menu-root ul{ list-style: none; margin: 0; padding: 0 0 0 8px; }

.menu-meta{
  border-top: 1px solid var(--line);
  margin-top: 8px; padding-top: 8px;
}

/* Backdrop (für Drawer/Modals) */
.backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.2);
  z-index: var(--z-backdrop);
}
.backdrop[hidden]{ display: none !important; }

/* == 4) Bottom-Nav (fix, immer sichtbar) =================================== */
.bottom-nav{
  position: fixed; left: 0; right: 0; bottom: 0;
  height: var(--nav-h);
  padding-bottom: env(safe-area-inset-bottom);
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  background: #fff;
  z-index: var(--z-bottomnav);
}

/* WICHTIG: Schutz vor globalen .tab-Regeln aus Debug-CSS */
.bottom-nav .tab{
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  min-height: var(--nav-h);
  text-decoration: none;
  color: #333;
  font-size: 12px; line-height: 1.2;
  background: transparent;     /* überschreibt fremde .tab-Hintergründe */
  border: 0;                   /* überschreibt fremde .tab-Rahmen */
  padding: 0;                  /* überschreibt fremde .tab-Padding */
}
.bottom-nav .tab i{ font-size: 18px; line-height: 1; }
.bottom-nav .tab.is-active{ color: var(--brand); }

/* == 5) Formulare & Controls =============================================== */
label{ display: flex; flex-direction: column; gap: 6px; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="date"],
select,
textarea{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: #fff;
  color: inherit;
}

button, .btn, .btn-primary{
  cursor: pointer;
  user-select: none;
  text-decoration: none;
}

.btn{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 12px; border: 1px solid var(--line-2);
  border-radius: 8px; background: #fff; color: inherit;
}

.btn-primary{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 12px; border: 0;
  border-radius: 8px; background: var(--brand); color: #fff;
}

/* == 6) Komponenten ======================================================== */
.card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--gap-2);
}
.card.link{ display: block; text-decoration: none; color: inherit; }

.tile{
  display: flex; flex-direction: column; gap: 6px;
  align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 12px;
  padding: 16px; text-decoration: none; color: inherit; background: #fff;
}

.quick{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-2); margin: var(--gap-3) 0; }

.today-grid{ display: grid; grid-template-columns: 1fr; gap: var(--gap-1); }

.list{ margin-top: var(--gap-3); }
.list-simple{ list-style: none; margin: 8px 0 0; padding: 0; }
.list-simple li{ padding: 8px 0; border-bottom: 1px solid var(--line); }

.page-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap-2); margin-bottom: var(--gap-2);
}

/* Segmentierte Schalter */
.seg{
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px; overflow: hidden;
}
.seg-btn{
  display: inline-block; padding: 8px 12px;
  text-decoration: none; color: #333;
}
.seg-btn.is-active{ background: var(--muted); }

/* Formular-Filterzeile */
.filters .row{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--gap-1); }
.filters label{ display: flex; flex-direction: column; gap: 6px; }
.filters select{ padding: 10px; border-radius: 8px; border: 1px solid var(--line-2); background: #fff; }
.filters .actions{ margin-top: 8px; display: flex; gap: var(--gap-1); }

/* Badges */
.badge-pos-tf{ background:#111; color:#fff; border-radius:4px; padding:2px 6px; }
.badge-pos-rs{ background:#555; color:#fff; border-radius:4px; padding:2px 6px; }

/* Chips */
.chips{ display:flex; flex-wrap:wrap; gap:var(--gap-1); margin:var(--gap-2) 0; }
.chip{
  display:inline-block; padding:8px 12px;
  border-radius:999px; border:1px solid var(--line-2);
  text-decoration:none; color:inherit;
}

/* Kartenraster */
.cards{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-2);
}

/* Dezenter Hinweistext */
.muted{ color:#666; }

/* == 7) Interaktion ========================================================= */
a:hover{ text-decoration: underline; }
a.tab:hover{ text-decoration: none; }

/* == 8) Bewegungen reduzieren ============================================== */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* == 9) Druck ============================================================== */
@media print{
  .top-bar, .bottom-nav, .drawer, .backdrop { display: none !important; }
  body { padding: 0; }
  a { color: inherit; text-decoration: none; }
}

/* == 10) Admin-Bar ========================================================= */
:root{
  --adminbar-bg:    #0f1115;
  --adminbar-fg:    #eaeff4;
  --adminbar-line:  #222a3a;
  --adminbar-accent: var(--brand);
}
body.has-adminbar{ --adminbar-h: 30px; }

.admin-bar{
  position: fixed; left: 0; right: 0; bottom: var(--nav-h);
  min-height: 30px;
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px;
  background: var(--adminbar-bg); color: var(--adminbar-fg);
  border-top: 1px solid var(--adminbar-line);
  z-index: var(--z-adminbar);
  font: 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.admin-bar .ab-title{ font-weight:700; opacity:.9; margin-right:4px; }
.admin-bar .ab-link{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border:1px solid var(--adminbar-line);
  border-radius:6px; text-decoration:none; color:var(--adminbar-fg);
  background:#121826;
}
.admin-bar .ab-link:hover{ background:#172032; }
.admin-bar .ab-link i{ font-size:12px; line-height:1; }
.admin-bar .ab-sep{ flex:1; }
.admin-bar .ab-badge{
  display:inline-block; margin-left:6px; padding:0 6px;
  border-radius:999px; background:#7b1a1a; color:#fff; font-weight:700;
}
.admin-bar .ab-pill{
  display:inline-block; margin-left:6px; padding:0 6px;
  border-radius:999px; border:1px solid var(--adminbar-line);
  background:#141c2a; color:#cdd7e3; font-weight:700;
}
.admin-bar .ab-pill.on{ background:var(--adminbar-accent); color:#fff; border-color:var(--adminbar-accent); }
.admin-bar .ab-pill.off{ background:#333a4d; color:#cdd7e3; }

@media (min-width: 1101px){
  .admin-bar{ left: 12px; right: 12px; border-radius: 8px; }
}