/* main-style.css – VK-NWS Mitgliederausweis
   Neutral, lesbar, mobilfähig, mit Design-Tokens und Dark-Mode */

/* === Design Tokens === */
:root {
  --vk-navy: #123b63;      /* VK-NWS Primär */
  --vk-orange: #ff6a00;    /* VK-NWS Akzent */

  --bg: #f7f8fa;
  --card: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --border: #e5e7eb;

  --link: #2563eb;
  --link-hover: #1e40af;

  --btn-bg: var(--vk-navy);
  --btn-bg-hover: #0f2f4e;
  --btn-text: #ffffff;

  --radius: 8px;
  --shadow: 0 2px 8px rgba(0,0,0,.08);

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

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --card: #1e293b;
    --text: #f1f5f9;
    --muted: #94a3b8;
    --border: #334155;

    --btn-bg: var(--vk-orange);
    --btn-bg-hover: #cc5500;
    --btn-text: #fff;
  }
}

/* === Base === */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  font-family: system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

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

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

h1, h2, h3, h4 { margin: var(--space-4) 0 var(--space-2); }
p { margin: var(--space-2) 0; }

/* === Layout === */
.container { max-width: 960px; margin: 0 auto; padding: var(--space-4); }
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow);
}
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }

/* Flex/Grid Helpers */
.row { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.row.center { align-items: center; }
.row.between { justify-content: space-between; }

.grid { display: grid; gap: var(--space-4); }

@media (min-width: 720px) {
  .grid.two { grid-template-columns: 1fr 1fr; }
  .grid.three { grid-template-columns: repeat(3, 1fr); }
}

/* === Buttons === */
.btn {
  display: inline-block;
  background: var(--btn-bg);
  color: var(--btn-text);
  padding: .6rem 1rem;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  font-size: 1rem;
}
.btn:hover { background: var(--btn-bg-hover); }
.btn:disabled { opacity: .6; cursor: not-allowed; }

.btn--ghost {
  background: transparent;
  color: var(--vk-navy);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.btn--ghost:hover { background: rgba(0,0,0,.03); }

.btn--secondary {
  background: var(--vk-orange);
  color: #fff;
}
.btn--danger {
  background: #dc2626;
  color: #fff;
}
.btn--danger:hover { background: #b91c1c; }

/* === Alerts === */
.alert {
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
  font-weight: 500;
}
.alert-error {
  background: #fee2e2;
  border: 1px solid #dc2626;
  color: #991b1b;
}
.alert-info {
  background: #dbeafe;
  border: 1px solid #2563eb;
  color: #1e40af;
}
@media (prefers-color-scheme: dark) {
  .alert-error { background: #3f0d0d; color: #fca5a5; }
  .alert-info { background: #1e3a8a; color: #bfdbfe; }
  .btn--ghost { color: #e5e7eb; border-color: #334155; }
  .btn--ghost:hover { background: rgba(255,255,255,.04); }
}

/* === Tables (Basic) === */
.table-wrap { overflow-x: auto; }
.tbl {
  border-collapse: collapse;
  width: 100%;
  font-size: .95rem;
}
.tbl th, .tbl td {
  border: 1px solid var(--border);
  padding: .5rem .75rem;
  text-align: left;
}
.tbl th {
  background: var(--bg);
  font-weight: 600;
}
.tbl tbody tr:nth-child(even) { background: #f9fafb; }
@media (prefers-color-scheme: dark) {
  .tbl th { background: #1e293b; }
  .tbl tbody tr:nth-child(even) { background: #1a2234; }
}
/* Sticky-Header Helper */
.table-sticky thead th { position: sticky; top: 0; z-index: 1; }
/* Kompakter Table-Text */
.tbl--sm td,.tbl--sm th { padding: .55rem .7rem; font-size: .95rem; }

/* === Badges === */
.badge {
  display: inline-block;
  padding: .25rem .5rem;
  border-radius: var(--radius);
  font-size: .8rem;
  font-weight: 500;
}
.badge--pending { background: #fef3c7; color: #92400e; }
.badge--open { background: #dbeafe; color: #1e40af; }
.badge--progress { background: #e0e7ff; color: #3730a3; }
.badge--done { background: #dcfce7; color: #166534; }
.badge--needs-photo { background: #fee2e2; color: #991b1b; }

/* === Forms === */
input, select, textarea {
  font: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .5rem .75rem;
  width: 100%;
  max-width: 100%;
}
input[type="file"] { padding: .3rem; }
.form-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.form-row input, .form-row button { flex: 1; }

/* =========================
   Formulare – sauberes Layout
   ========================= */

/* Grid für Formularfelder */
.form-grid {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 720px) {
  .form-grid.two {
    grid-template-columns: 1fr 1fr;
  }
}

/* Jedes Feld in eigenem Block */
.form-grid > div {
  display: flex;
  flex-direction: column;
}

/* Labels & Inputs */
.form-grid label {
  font-weight: 500;
  margin-bottom: .25rem;
}
.form-grid input,
.form-grid select,
.form-grid textarea {
  font: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .5rem .75rem;
  width: 100%;           /* statt fix 50% */
  max-width: 100%;
  background: var(--card);
  color: var(--text);
}

/* Checkbox-Reihen */
.form-grid .row.center {
  grid-column: 1 / -1;    /* nimmt ganze Breite */
  margin-top: var(--space-2);
}

/* Aktionen unten */
.form-grid .row.between {
  grid-column: 1 / -1;    /* nimmt ganze Breite */
  margin-top: var(--space-4);
}

/* Kleinere Hinweise */
.form-grid .note {
  font-size: .85rem;
  color: var(--muted);
  margin-top: .25rem;
}
/* ans Ende von main-style.css */
.span-2 { grid-column: 1 / -1; }
.gap-sm { gap: .5rem; }

/* Checkbox – klassisch, barrierearm */
.chk { display:inline-flex; align-items:center; gap:.6rem; cursor:pointer; user-select:none; }
.chk__input { position:absolute; opacity:0; width:0; height:0; }
.chk__box {
  width: 20px; height: 20px;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
  display:inline-block; position:relative; flex:0 0 20px;
}
.chk__label { color: var(--text); font-weight: 500; }

.chk__input:focus-visible + .chk__box { box-shadow: var(--focus-ring); }
.chk__input:checked + .chk__box {
  background: var(--vk-navy);
  border-color: var(--vk-navy);
}
.chk__input:checked + .chk__box::after {
  content:"";
  position:absolute; left:5px; top:2px;
  width:6px; height:10px;
  border:2px solid #fff; border-top:0; border-left:0;
  transform: rotate(45deg);
}

/* Disabled-State (optional) */
.chk__input:disabled + .chk__box { opacity:.6; cursor:not-allowed; }
.chk__input:disabled ~ .chk__label { color: var(--muted); }

/* Dark-Mode leichte Anpassung */
@media (prefers-color-scheme: dark) {
  .chk__box {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  }
  .chk__input:checked + .chk__box {
    background: var(--vk-orange);
    border-color: var(--vk-orange);
  }
}


/* === Utilities === */
.note { font-size: .875rem; color: var(--muted); }
.img-frame { max-width: 360px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.rounded { border-radius: var(--radius); }

/* =====================================================================
   Table Add-ons (ehem. vk-table.css) – auf main-Design-Tokens gemappt
   ===================================================================== */

/* Mapping der vk-table Tokens auf main Tokens */
:root{
  --vk-surface: var(--card);
  --vk-text: var(--text);
  --vk-muted: var(--muted);
  --vk-border: var(--border);
  --vk-row-hover: #f3f4f6;
  --vk-row-alt:   #fbfdff;
  --vk-radius: 12px;
  --vk-radius-sm: var(--radius);
  --vk-shadow: var(--shadow);
  --vk-shadow-lg: 0 8px 30px rgba(0,0,0,.08);
  --vk-focus: 3px solid rgba(37,99,235,.5);
}
@media (prefers-color-scheme: dark){
  :root{
    --vk-row-hover: #1b253a;
    --vk-row-alt:   #101a2f;
    --vk-shadow: 0 2px 10px rgba(0,0,0,.35);
    --vk-shadow-lg: 0 8px 30px rgba(0,0,0,.35);
  }
}


/* ---------------------------
   Aktionen / Buttons (kompatibel zu .btn)
   --------------------------- */
.vk-actions { display:flex; flex-wrap:wrap; gap:.5rem; }
.vk-btn {
  display:inline-block;
  padding:.5rem .85rem;
  border-radius: var(--radius);
  border: 1px solid var(--vk-border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  font-size: .95rem;
}
.vk-btn:hover { background: rgba(2,6,23,.03); }
.vk-btn--ghost { background: transparent; }
.vk-btn--danger { background:#dc2626; color:#fff; border-color:#dc2626; }
.vk-btn--danger:hover { background:#b91c1c; }

/* ---------------------------
   Pagination / Pager
   --------------------------- */
.vk-pager {
  display:flex; gap:.35rem; align-items:center;
  padding:.6rem .75rem;
  border-top:1px solid var(--vk-border);
  background: var(--vk-surface);
}
.vk-pager__spacer { flex:1; }
.vk-pager button, .vk-pager a {
  display:inline-block;
  padding:.4rem .6rem;
  border:1px solid var(--vk-border);
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
  text-decoration:none;
}
.vk-pager .is-active {
  background: var(--vk-row-hover);
  border-color: var(--vk-border);
}


/* ---------------------------
   Helper
   --------------------------- */
.vk-hide-sm { display:none; }
@media (min-width: 640px){ .vk-hide-sm { display: initial; } }


/* ===== VK-Tables – Polish Pack (ohne vk-table.css) ===== */

/* Dichte, Typo, Farben */
.vk-table-wrap{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: clip;
}
.vk-table{
  width:100%; border-collapse: separate; border-spacing:0;
  font-size: .95rem; color: var(--text); background: var(--card);
}
.vk-table thead th{
  position:sticky; top:0; z-index:3;
  background: var(--card);
  border-bottom:1px solid var(--border);
  font-weight:600; letter-spacing:.01em;
}
.vk-table th,.vk-table td{
  padding:.60rem .75rem; border-bottom:1px solid var(--border); vertical-align:top;
}
.vk-table tbody tr:nth-child(even){ background:#fbfdff; }
.vk-table tbody tr:hover { background:#f3f4f6; }
@media (prefers-color-scheme: dark){
  .vk-table thead th{ background:#1e293b; }
  .vk-table tbody tr:nth-child(even){ background:#101a2f; }
  .vk-table tbody tr:hover{ background:#1b253a; }
}

/* Sticky-Header dezent abheben */
.vk-table thead::after{
  content:""; position:sticky; top:0; display:block; height:0; z-index:2;
  box-shadow: 0 2px 0 rgba(0,0,0,.04);
}

/* Thumbnail feiner, einheitlich */
.vk-thumb{ width:44px; height:60px; object-fit:cover; border-radius:6px; border:1px solid var(--border); }

/* Toolbar modernisieren */
.vk-table-toolbar{
  display:flex; gap:.6rem; flex-wrap:wrap; align-items:center;
  padding:.75rem .9rem; border:0; border-bottom:1px solid var(--border);
  background: var(--card);
}
.vk-table-toolbar input[type="search"],
.vk-table-toolbar select{
  padding:.5rem .7rem; border:1px solid var(--border);
  border-radius: var(--radius); background: var(--card); color: var(--text);
  min-width: 220px;
}
.vk-table-toolbar .vk-btn{ padding:.5rem .8rem; }

/* Sort-Links: Klickfläche + Pfeil */
.sort{ display:inline-flex; align-items:center; gap:.35rem; color:inherit; text-decoration:none; }
.sort:hover{ text-decoration:underline; }
.sort .arrow{ opacity:.55; font-size:.85em; }

/* Pager dezenter */
.vk-pager{
  display:flex; align-items:center; gap:.5rem; justify-content:space-between;
  padding:.6rem .75rem; border-top:1px solid var(--border); background:var(--card);
}
.vk-pager .vk-btn{ padding:.4rem .65rem; }

/* Badges minimal runder & gleich hoch */
.badge{ border-radius: 999px; padding:.2rem .55rem; line-height:1.2; }

/* Mobile Kartenansicht < 900px – luftiger */
@media (max-width: 900px){
  .vk-table thead{ display:none; }
  .vk-table tbody,.vk-table tr,.vk-table td{ display:block; width:100%; }
  .vk-table tbody tr{
    background:var(--card); margin:.75rem 0; padding:.8rem .9rem;
    border:1px solid var(--border); border-radius:12px; box-shadow: var(--shadow);
  }
  .vk-table td{
    border:none; padding:.35rem 0; display:grid; grid-template-columns: 12ch 1fr; gap:.35rem .75rem;
  }
  .vk-table td::before{
    content: attr(data-label); font-weight:600; color: var(--muted);
  }
  .vk-thumb{ width:56px; height:76px; }
}

/* Kleine Utilities (CSP-freundlich, keine inline styles nötig) */
.flex{display:flex} .wrap{flex-wrap:wrap} .items-center{align-items:center}
.gap-xs{gap:.35rem} .gap-sm{gap:.5rem} .mt-1{margin-top:.25rem}

/* Buttons leicht angleichen */
.vk-btn{
  display:inline-block; padding:.5rem .8rem; border:1px solid var(--border);
  border-radius: var(--radius); background: var(--card); color: var(--text);
  text-decoration:none; cursor:pointer;
}
.vk-btn:hover{ background: rgba(2,6,23,.03); }
.vk-btn--ghost{ background:transparent; }


/* ===== Datei-Spalte (Aktionen & Upload) ===== */

/* Zelle "Datei": sauberer Blockaufbau */
.vk-table td[data-label="Datei"] > .vk-note:first-child {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
}

/* Aktionsbereich: Buttons & Upload nebeneinander, mobil untereinander */
.vk-table td[data-label="Datei"] .vk-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .6rem;
}

/* Jede Aktion (Form) als kleine Flex-Zeile */
.vk-table td[data-label="Datei"] .vk-actions > form {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* Upload-Form explizit ansprechen (Datei + Button) */
.vk-table td[data-label="Datei"] .vk-actions > form[action$="useredit_bild.php"] {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* Datei-Eingabe im VK-Look */
.vk-table td[data-label="Datei"] input[type="file"] {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  padding: .45rem .5rem;
  max-width: 260px;  /* verhindert, dass der Dateiname die Zeile sprengt */
}

/* Der eigentliche "Durchsuchen"-Button im Design */
.vk-table td[data-label="Datei"] input[type="file"]::file-selector-button {
  background: var(--btn-bg);
  color: var(--btn-text);
  border: none;
  border-radius: var(--radius);
  padding: .45rem .8rem;
  margin-right: .6rem;
  cursor: pointer;
}
.vk-table td[data-label="Datei"] input[type="file"]:hover::file-selector-button {
  background: var(--btn-bg-hover);
}
.vk-table td[data-label="Datei"] input[type="file"]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(37,99,235,.35));
}

/* Hinweistext unter den Aktionen etwas dezenter und mit Abstand */
.vk-table td[data-label="Datei"] > .vk-note:last-child {
  display: block;
  margin-top: .35rem;
}

/* Mobile: Aktionen untereinander, volle Breite für Inputs/Buttons */
@media (max-width: 900px) {
  .vk-table td[data-label="Datei"] .vk-actions {
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
  }
  .vk-table td[data-label="Datei"] .vk-actions > form,
  .vk-table td[data-label="Datei"] .vk-actions > form .vk-btn {
    width: 100%;
  }
  .vk-table td[data-label="Datei"] input[type="file"] {
    max-width: none;
    width: 100%;
  }
}



footer { color: var(--muted); text-align:center; padding: var(--space-6) 0; }