/* =========================================================
   Feuerwehr Theme – feuerwehr.css
   Responsiv für Mobile → Desktop (≥1440px+)
   ========================================================= */

/* -------------------- CSS-Variablen (Theme) -------------------- */
:root{
  --fw-red:        #d81717;
  --fw-red-dark:   #b31313;
  --fw-amber:      #f59e0b;
  --fw-green:      #16a34a;
  --fw-gray-900:   #0f172a;
  --fw-gray-800:   #1f2937;
  --fw-gray-700:   #334155;
  --fw-gray-600:   #475569;
  --fw-gray-500:   #64748b;
  --fw-gray-400:   #94a3b8;
  --fw-gray-300:   #cbd5e1;
  --fw-gray-200:   #e5e7eb;
  --fw-gray-100:   #f1f5f9;
  --fw-white:      #ffffff;

  --bg-body:       #fafafa;
  --bg-card:       #ffffff;
  --bg-header:     #be1b1b;
  --bg-footer:     #0f172a;

  --txt:           #0f172a;
  --txt-muted:     #475569;
  --txt-invert:    #ffffff;

  --radius:        16px;
  --shadow-sm:     0 1px 2px rgba(0,0,0,.06);
  --shadow-md:     0 6px 18px rgba(0,0,0,.08);
  --shadow-lg:     0 12px 30px rgba(0,0,0,.12);

  --container-sm:  700px;
  --container-md:  960px;
  --container-lg:  1200px;
  --container-xl:  1440px;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;

  --focus: 0 0 0 3px rgba(216,23,23,.35);
}

/* -------------------- Grundlayout / Reset light -------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  line-height:1.5;
  color:var(--txt);
  background:var(--bg-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a:link,a:visited,a:active {  text-decoration: none;}
code .copy-btn{ margin-left:.25rem; vertical-align:middle; }


/* -------------------- Container -------------------- */
.container{
  width:100%;
  margin-inline:auto;
  padding-inline: var(--space-4);
  max-width: var(--container-sm);
}
@media (min-width: 768px){ .container{ max-width: var(--container-md); } }
@media (min-width: 1024px){ .container{ max-width: var(--container-lg); } }
@media (min-width: 1360px){ .container{ max-width: var(--container-xl); } }

/* -------------------- Header / Footer -------------------- */
.fw-header{
  background: linear-gradient(135deg, var(--bg-header), #8e1111);
  color: var(--txt-invert);
  padding: var(--space-6) 0;
  box-shadow: var(--shadow-sm);
}
.fw-header h1{
  margin:0;
  font-weight:800;
  letter-spacing:.3px;
  font-size: clamp(1.25rem, 2vw + .5rem, 2rem);
}

.fw-footer{
  background: var(--bg-footer);
  color: var(--txt-invert);
  padding: var(--space-6) 0;
  margin-top: var(--space-8);
}
.fw-footer p{ margin:0; opacity:.9; }

/* -------------------- Typografie / Helfer -------------------- */
h2,h3{margin: 0 0 var(--space-4)}
.meta{ color: var(--txt-muted); font-size:.95rem; }
.hint{ color: var(--fw-gray-600); font-size:.85rem; }
.req{ color: var(--fw-red-dark); }
.mono{ font-family: ui-monospace, Menlo, Monaco, Consolas, "Courier New", monospace; }

/* -------------------- Karten / Layout -------------------- */
.card{
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: clamp(var(--space-5), 1.2vw + .5rem, var(--space-8));
  margin: var(--space-6) 0;
  border: 1px solid var(--fw-gray-200);
}
.card-title{
  font-size: clamp(1.1rem, 1.2vw + .6rem, 1.5rem);
  font-weight: 800;
  margin-bottom: var(--space-4);
}
.card.success{
  border-left: 8px solid var(--fw-green);
}

/* -------------------- Buttons -------------------- */
.btn-primary,
.btn-secondary{
  appearance: none;
  border:0;
  border-radius: 999px;
  padding: .7rem 1.15rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .05s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  text-decoration: none;
  display:inline-block;
}
.btn-primary{
  background: var(--fw-red);
  color: var(--txt-invert);
  box-shadow: 0 6px 16px rgba(216,23,23,.25);
}
.btn-primary:hover{ background: var(--fw-red-dark); transform: translateY(-1px); }
.btn-primary:active{ transform: translateY(0); }
.btn-secondary{
  background: var(--fw-gray-100);
  color: var(--fw-gray-800);
  border:1px solid var(--fw-gray-300);
}
.btn-secondary:hover{ background: #eef2f7; }

/* kleine Varianten (Admin) */
.btn-sm{ padding:.35rem .65rem; font-size:.9rem; }
.btn-ghost{
  background:transparent;
  border:1px solid rgba(0,0,0,.12);
  color: var(--fw-gray-800);
}

/* Fokus-Styles */
button:focus, .btn-primary:focus, .btn-secondary:focus, .btn-ghost:focus, a:focus, input:focus, select:focus, textarea:focus{
  outline:none;
  box-shadow: var(--focus);
  border-color: var(--fw-red);
}

/* -------------------- Formulare -------------------- */
.form-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.form-actions{
  display:flex;
  gap: var(--space-3);
  align-items:center;
  flex-wrap:wrap;
}
.form-field label{
  display:block;
  font-weight:700;
  margin-bottom: .35rem;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="datetime-local"],
select, textarea{
  width:100%;
  background:#fff;
  border:1px solid var(--fw-gray-300);
  border-radius: 12px;
  padding: .7rem .9rem;
  font-size:1rem;
  color:var(--fw-gray-900);
  transition:border .2s ease, box-shadow .2s ease;
}
input::placeholder, textarea::placeholder{ color:var(--fw-gray-500); }

/* Passwort-Feld mit Toggle */
.pw-wrap{
  position: relative;
  display: flex;
  align-items: center;
}
.pw-wrap input{
  padding-right: 2.4rem; /* Platz für Button */
  font-size: 16px;       /* iOS-Zoom vermeiden */
  color: var(--fw-gray-900);
  background: #fff;
}
.pw-toggle{
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: .25rem .35rem;
  border-radius: 8px;
  line-height: 1;
}
.pw-toggle:focus{ box-shadow: var(--focus); }
.pw-toggle .eye{ display: none; }
.pw-toggle[data-on="1"] .eye-on{ display:inline; }   /* Passwort sichtbar */
.pw-toggle[data-on="0"] .eye-off{ display:inline; }  /* Passwort versteckt */
/* Initialzustand: versteckt */
.pw-toggle:not([data-on]) .eye-off{ display:inline; }

@media (min-width: 640px){
  .form-grid{ grid-template-columns: repeat(2, 1fr); }
  .form-actions{ grid-column: 1 / -1; }
}

/* -------------------- Tabellen -------------------- */
.table-wrap{
  width:100%;
  overflow:auto;
  border:1px solid var(--fw-gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  background:#fff;
}
.table{
  width:100%;
  border-collapse: collapse;
  min-width: 720px;
}
.table th, .table td{
  text-align:left;
  padding: .75rem .9rem;
  border-bottom:1px solid var(--fw-gray-200);
  vertical-align: top;
}
.table thead th{
  background: var(--fw-gray-100);
  font-weight:800;
  font-size:.95rem;
}
.table tbody tr:hover{ background: #fbfdff; }

/* kompakter in Details-Tabellen */
.details .table th, .details .table td{ padding: .55rem .7rem; }

/* -------------------- Badges -------------------- */
.badge{
  display:inline-block;
  padding:.2rem .5rem;
  border-radius:999px;
  font-size:.75rem;
  font-weight:800;
  border:1px solid rgba(0,0,0,.06);
}
.badge-ok{    background:#e8f7ec; color:#14532d; border-color:#c7f0d2; }
.badge-wait{  background:#fff5d6; color:#713f12; border-color:#fde68a; }
.badge-cancel{background:#ffe4e6; color:#7f1d1d; border-color:#fecdd3; }

/* -------------------- Admin: Aktionen / Toggle-Details -------------------- */
.row-actions{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  white-space:nowrap;
}
.toggle{ cursor:pointer; user-select:none; }
.details{ display:none; } /* JS blendet ein/aus */

/* -------------------- Utilities -------------------- */
.hidden{ display:none !important; }
.text-center{ text-align:center; }
.text-muted{ color: var(--txt-muted); }

/* -------------------- Abstände / Sections -------------------- */
main.container{ padding-block: clamp(var(--space-6), 2vw + .5rem, var(--space-10)); }
section + section{ margin-top: var(--space-6); }

/* -------------------- Responsives Finetuning -------------------- */
@media (max-width: 640px){
  .row-actions{
    flex-direction:column;
    align-items:flex-start;
    gap:.35rem;
  }
  .btn-primary, .btn-secondary{
    padding:.6rem .9rem;
  }
  .card{
    padding: var(--space-5);
  }
  .fw-header{ padding: var(--space-5) 0; }
  .fw-footer{ padding: var(--space-5) 0; }
}

/* große Monitore: etwas mehr Luft & größere Typo */
@media (min-width: 1440px){
  .card{ padding: 2.25rem 2.25rem; }
  .table th, .table td{ padding: .9rem 1.1rem; }
  .card-title{ font-size: 1.6rem; }
}

/* -------------------- Druck (optional, kompakt) -------------------- */
@media print{
  .fw-header, .fw-footer, .form-actions, .row-actions, .toggle{ display:none !important; }
  .card{ box-shadow:none; border:1px solid #ddd; }
  body{ background:#fff; }
}

/* -------------------- Dark Mode (Android/Chrome optimiert) -------------------- */
@media (prefers-color-scheme: dark){
  :root{
    color-scheme: dark;

    --bg-body:#0b0f19;
    --bg-card:#0f1524;
    --bg-header:#991b1b;
    --bg-footer:#0b0f19;

    --txt:#e6e9ef;
    --txt-muted:#a6adbb;

    --fw-gray-100:#0f1524;
    --fw-gray-200:#161c2e;
    --fw-gray-300:#1f2940;
    --fw-gray-400:#2b3852;
    --fw-gray-500:#3b4a67;
    --fw-gray-600:#9aa6bd;
    --fw-gray-700:#cfd6e1;
    --fw-gray-800:#e6e9ef;
    --fw-gray-900:#ffffff;

    --fw-red:#ef4444;
    --fw-red-dark:#dc2626;
    --fw-amber:#fbbf24;
    --fw-green:#22c55e;

    --focus: 0 0 0 3px rgba(239,68,68,.35);
  }

  body{ color:var(--txt); background:var(--bg-body); }

  .fw-header{
    background: linear-gradient(135deg, var(--bg-header), #7f1010);
    box-shadow: none;
  }
  .fw-footer{ background: var(--bg-footer); color: var(--txt); }

  /* Cards / Container */
  .card{
    background: var(--bg-card);
    border-color: var(--fw-gray-200);
    box-shadow: none;
  }
  .card.success{ border-left-color: var(--fw-green); }

  /* Typo / Meta */
  .meta{ color: var(--txt-muted); }
  .hint{ color: var(--fw-gray-600); }

  /* Buttons */
  .btn-primary{
    background: var(--fw-red);
    color: #0b0f19;
    box-shadow: 0 6px 16px rgba(239,68,68,.25);
  }
  .btn-primary:hover{ background: var(--fw-red-dark); }
  .btn-secondary{
    background: #0c1324;
    color: var(--fw-gray-800);
    border:1px solid #26324a;
  }
  .btn-ghost{
    background: transparent;
    border:1px solid #33435f;
    color: var(--fw-gray-800);
  }

  /* Formulare */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="datetime-local"],
  select, textarea{
    background:#0c1324;
    color: var(--fw-gray-800);
    border-color:#28324a;
  }
  input::placeholder, textarea::placeholder{ color:#7c879b; opacity:1; }

  /* Android/Chrome Autofill – Schrift hell, Hintergrund angleichen */
  input:-webkit-autofill,
  textarea:-webkit-autofill,
  select:-webkit-autofill{
    -webkit-text-fill-color: var(--fw-gray-800) !important;
    box-shadow: 0 0 0px 1000px #0c1324 inset !important;
    transition: background-color 9999s ease-in-out 0s;
  }

  /* Passwort-Wrapper */
  .pw-wrap input{
    background:#0c1324;
    color:var(--fw-gray-800);
    border-color:#28324a;
  }

  /* Tabellen */
  .table-wrap{
    background: var(--bg-card);
    border-color:#26324a;
    box-shadow:none;
  }
  .table{
    color: var(--fw-gray-800);
  }
  .table thead th{
    background:#0c1324;
    color: var(--fw-gray-800);
    border-bottom:1px solid #26324a;
  }
  .table th, .table td{
    border-bottom:1px solid #1e2940;
  }
  .table tbody tr:hover{ background:#0e1730; }

  .details .table thead th{ background:#0e1730; }

  /* Badges */
  .badge{ border-color: rgba(255,255,255,.08); }
  .badge-ok{    background: rgba(34,197,94,.15);  color:#86efac; border-color: rgba(34,197,94,.25); }
  .badge-wait{  background: rgba(251,191,36,.12); color:#fde68a; border-color: rgba(251,191,36,.25); }
  .badge-cancel{background: rgba(239,68,68,.15);  color:#fca5a5; border-color: rgba(239,68,68,.25); }

  /* Toggle-Row / Aktionen */
  .row-actions{ color: var(--fw-gray-800); }
  .toggle{ color: var(--fw-gray-800); }

  /* Links optional aufhellen */
  a{ color:#93c5fd; text-decoration:none;}
  a:hover{ color:#bfdbfe; }
}


/* Kompakte Darstellung der Kurz-URL-Zelle */
.link-cell{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  max-width:100%;
  vertical-align:middle;
}

/* URL im Code: keine Zeilenumbrüche; falls es eng wird, mit Ellipsis */
.url-text{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:16ch; /* bei Bedarf anpassen */
  display:inline-block;
  vertical-align:middle;
}

/* Minimaler Icon-Button – beeinflusst Spaltenbreite NICHT */
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.6em;
  height:1.6em;
  padding:0;
  margin:0;
  border:0;
  background:transparent;
  line-height:1;
  cursor:pointer;
  vertical-align:middle;
}
.icon-btn:focus{ box-shadow: var(--focus); border-radius:6px; }

/* ggf. alten Stil neutralisieren, falls noch vorhanden */
code .copy-btn{ margin-left:.25rem; vertical-align:middle; } /* ok */
.btn-ghost.copy-btn, .btn-sm.copy-btn{ all: unset; } /* falls Button noch alte Klassen hat */