/* ==========================================================================
   CAIBIS Admin-Portal - Styleguide (abgeleitet aus theme-tokens.css)
   Warmes, editoriales Light-Theme. Forest/Cream, Fraunces-Display.
   ========================================================================== */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --font-display: 'Fraunces', Georgia, 'Times New Roman', ui-serif, serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  --color-forest: #1C3A2B;
  --color-moss: #2D6A4F;
  --color-sage: #5C7A6A;
  --color-leaf: #74B49B;
  --color-cream: #F5F0E8;
  --color-parchment: #EDE8DC;
  --color-warm-white: #FFFDFC;
  --color-white: #FFFFFF;
  --color-ink: #1A1A1A;
  --color-bark: #3C4A42;
  --color-stone: #6B7280;
  --color-alert: #C0392B;
  --color-alert-dark: #A13025;
  --color-sun: #D4A017;

  --border-0: rgba(28,58,43,0.12);
  --border-1: rgba(28,58,43,0.18);
  --shadow-soft: 0 8px 24px rgba(28,58,43,0.08);
  --shadow-editorial: 0 12px 48px rgba(28,58,43,0.08);
  --focus-ring: rgba(28,58,43,0.4);

  --radius-card: 16px;
  --radius-panel: 20px;
  --radius-pill: 999px;
  --ease-editorial: cubic-bezier(0.22,1,0.36,1);
  --gradient-hero: linear-gradient(180deg, #F5F0E8 0%, #EDE8DC 54%, #F5F0E8 100%);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-cream);
  background-image: var(--gradient-hero);
  background-attachment: fixed;
  color: var(--color-ink);
  font-size: 15px;
  line-height: 1.55;
}

a { color: var(--color-moss); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--color-forest); font-weight: 600; }
h1 { font-size: 30px; margin: 0 0 26px; letter-spacing: -0.01em; }
h2 { font-size: 19px; margin: 0 0 16px; }

/* -------- Topbar -------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 16px; flex-wrap: wrap;
  padding: 16px 28px;
  background: var(--color-forest);
  color: var(--color-cream);
}
.topbar .brand { display: flex; align-items: center; gap: 12px; }
.topbar .brand img { width: 34px; height: 34px; display: block; }
.topbar .brand .wordmark {
  font-family: var(--font-display); font-size: 20px; font-weight: 600;
  color: var(--color-cream); letter-spacing: 0.02em;
}
.topbar nav { display: flex; flex-wrap: wrap; align-items: center; }
.topbar nav a {
  margin-left: 22px; color: rgba(245,240,232,0.72); font-size: 14px; font-weight: 500;
  padding-bottom: 3px; border-bottom: 2px solid transparent; transition: color .2s;
}
.topbar nav a:hover { color: var(--color-cream); text-decoration: none; }
.topbar nav a.active { color: var(--color-cream); border-bottom-color: var(--color-leaf); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 34px 28px 60px; }

/* -------- Cards -------- */
.card {
  background: var(--color-white); border: 1px solid var(--border-0);
  border-radius: var(--radius-card); box-shadow: var(--shadow-editorial);
  padding: 24px 26px; margin-bottom: 24px;
}

/* -------- Tables -------- */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--border-0); font-size: 14px; }
th { color: var(--color-stone); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
tr:last-child td { border-bottom: none; }

/* -------- Badges / Status-Pills -------- */
.badge { display: inline-block; padding: 3px 11px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; }
.badge.up { background: rgba(45,106,79,0.12); color: var(--color-moss); }
.badge.down { background: rgba(192,57,43,0.12); color: var(--color-alert); }
.badge.warn { background: rgba(212,160,23,0.16); color: #8a6d10; }
.badge.na { background: var(--color-parchment); color: var(--color-stone); }

/* -------- Meters -------- */
.meter { height: 6px; background: var(--color-parchment); border-radius: 4px; overflow: hidden; width: 120px; display: inline-block; vertical-align: middle; margin-right: 8px; }
.meter > span { display: block; height: 100%; background: var(--color-moss); border-radius: 4px; }
.meter.hot > span { background: var(--color-sun); }
.meter.crit > span { background: var(--color-alert); }

.muted { color: var(--color-stone); font-size: 13px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* -------- Forms -------- */
label { display: block; font-size: 13px; color: var(--color-bark); font-weight: 500; margin: 15px 0 6px; }
input[type=text], input[type=password], input[type=email] {
  width: 100%; padding: 12px 14px; background: var(--color-warm-white);
  border: 1px solid var(--border-1); border-radius: var(--radius-card);
  color: var(--color-ink); font-size: 15px; font-family: var(--font-body); min-height: 46px;
}
input:focus { outline: none; border-color: var(--color-moss); box-shadow: 0 0 0 3px rgba(45,106,79,0.12); }

.checkbox-row { display: flex; align-items: center; gap: 9px; margin-top: 16px; }
.checkbox-row input[type=checkbox] { width: 17px; height: 17px; min-height: 0; accent-color: var(--color-forest); }
.checkbox-row label { margin: 0; font-size: 14px; color: var(--color-bark); cursor: pointer; }

/* -------- Buttons (pill) -------- */
button, .btn {
  cursor: pointer; border: 1px solid rgba(28,58,43,0.16);
  background: var(--color-forest); color: var(--color-cream);
  padding: 0.72rem 1.3rem; border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 700; font-family: var(--font-body);
  min-height: 44px; margin-top: 20px; box-shadow: var(--shadow-soft);
  transition: transform .28s var(--ease-editorial), background .28s var(--ease-editorial), box-shadow .28s var(--ease-editorial);
}
button:hover, .btn:hover { background: var(--color-moss); transform: translateY(-1px); box-shadow: var(--shadow-editorial); text-decoration: none; }
button:active, .btn:active { transform: translateY(0); }
button.secondary, .btn.secondary { background: var(--color-parchment); color: var(--color-forest); }
button.secondary:hover, .btn.secondary:hover { background: #e3dccb; }
button.danger { background: var(--color-alert); }
button.danger:hover { background: var(--color-alert-dark); }

/* -------- Alerts -------- */
.err { background: rgba(192,57,43,0.10); color: var(--color-alert-dark); border: 1px solid rgba(192,57,43,0.28);
  padding: 12px 14px; border-radius: var(--radius-card); margin-top: 15px; font-size: 14px; }
.ok-box { background: rgba(45,106,79,0.10); color: var(--color-moss); border: 1px solid rgba(45,106,79,0.28);
  padding: 14px 16px; border-radius: var(--radius-card); margin-bottom: 16px; font-size: 14px; }
.info-box { background: rgba(212,160,23,0.10); color: #7a5f0e; border: 1px solid rgba(212,160,23,0.3);
  padding: 14px 16px; border-radius: var(--radius-card); margin-bottom: 18px; font-size: 14px; }

pre { background: var(--color-parchment); padding: 14px; border-radius: var(--radius-card); overflow-x: auto; font-size: 13px; color: var(--color-ink); }

/* -------- Login/Enroll shell -------- */
.login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-box { width: 400px; max-width: 100%; }
.login-box .card { padding: 34px 32px; }
.login-logo { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 8px; }
.login-logo img { width: 60px; height: 60px; color: var(--color-forest); }
.login-logo .wordmark { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--color-forest); letter-spacing: 0.02em; }

.qr { background: #fff; padding: 14px; border-radius: var(--radius-card); display: inline-block; border: 1px solid var(--border-0); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

@media (max-width: 720px) {
  .grid2 { grid-template-columns: 1fr; }
}

/* -------- Mobil -------- */
@media (max-width: 560px) {
  body { font-size: 14.5px; }
  .topbar {
    padding: 12px 16px;
    justify-content: center; text-align: center;
    flex-direction: column; gap: 10px;
  }
  .topbar nav { justify-content: center; gap: 4px; }
  .topbar nav a { margin-left: 0; margin: 0 10px; }
  .topbar .brand .wordmark { font-size: 18px; }

  .wrap { padding: 22px 15px 48px; }
  h1 { font-size: 24px; margin-bottom: 20px; }
  h2 { font-size: 17px; }

  .card { padding: 18px 16px; margin-bottom: 18px; }
  .login-box .card { padding: 26px 20px; }

  /* Server-Aktionen: Buttons als Block, volle Breite, gut antippbar */
  .row-actions form { display: block; margin-left: 0; margin-top: 8px; }
  .row-actions form button { width: 100%; margin-top: 0; }

  /* Formular-Spalten untereinander */
  .grid2 { gap: 14px; }
}

.inline-form { display: inline; }
.row-actions form { display: inline; margin-left: 6px; }
details summary { cursor: pointer; color: var(--color-stone); }

/* Kennzahlen-Kacheln (Uebersicht + Zeitraum-Zusammenfassung) */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat { background: var(--color-warm-white); border: 1px solid var(--border-1);
  border-radius: var(--radius-card); padding: 14px 16px; }
.stat-label { font-size: 12px; color: var(--color-stone); text-transform: uppercase;
  letter-spacing: 0.04em; }
.stat-value { font-family: var(--font-display); font-size: 28px; font-weight: 600;
  color: var(--color-forest); line-height: 1.1; margin-top: 4px; }
.stat-sub { font-size: 12px; color: var(--color-stone); margin-top: 3px; }

/* Zeitraum-Umschalter */
.period-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 4px 0 20px; }
.pill-toggle { display: inline-block; padding: 6px 15px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-1); color: var(--color-bark); text-decoration: none;
  font-size: 13px; font-weight: 600; background: var(--color-warm-white);
  margin-top: 0; min-height: 0; box-shadow: none; cursor: pointer; }
.pill-toggle:hover { background: var(--color-parchment); color: var(--color-forest);
  transform: none; box-shadow: none; }
.pill-toggle.active, .pill-toggle.active:hover { background: var(--color-forest);
  color: var(--color-white); border-color: var(--color-forest); }

/* Chart-Rahmen */
.chart { width: 100%; overflow-x: auto; margin-top: 4px; }
.chart svg { display: block; }
.subcard { background: var(--color-warm-white); border: 1px solid var(--border-1);
  border-radius: var(--radius-card); padding: 14px 16px; }
.subcard h3 { font-family: var(--font-display); font-size: 16px; color: var(--color-forest);
  margin: 0 0 8px; font-weight: 600; }

/* Dualer Bereichsslider */
.slider { margin: 14px 0 2px; }
.slider-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.slider-value { font-size: 13px; color: var(--color-bark); font-weight: 600; }
.slider-track { position: relative; height: 34px; }
.slider-track::before { content: ""; position: absolute; left: 0; right: 0; top: 15px; height: 4px;
  background: var(--border-1); border-radius: var(--radius-pill); }
.slider-fill { position: absolute; top: 15px; height: 4px; background: var(--color-moss);
  border-radius: var(--radius-pill); }
.slider-track input[type=range] { position: absolute; left: 0; top: 0; width: 100%; height: 34px;
  margin: 0; background: transparent; -webkit-appearance: none; appearance: none; pointer-events: none; }
.slider-track input[type=range]:focus { outline: none; }
.slider-track input[type=range]::-webkit-slider-runnable-track { background: transparent; height: 34px; border: none; }
.slider-track input[type=range]::-moz-range-track { background: transparent; height: 34px; border: none; }
.slider-track input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
  pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--color-forest);
  border: 2px solid var(--color-white); box-shadow: var(--shadow-soft); cursor: pointer; margin-top: 8px; }
.slider-track input[type=range]::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px;
  border-radius: 50%; background: var(--color-forest); border: 2px solid var(--color-white);
  box-shadow: var(--shadow-soft); cursor: pointer; }

@media (max-width: 700px) {
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat-value { font-size: 23px; }
}
@media (max-width: 420px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
}