/* Wirtshaus.Cloud – Auth UI (LIGHT, mobile-first) */
:root{
  --bg:#fffdfa;           /* leicht warmes Off-White (wie Startseite) */
  --paper:#ffffff;        /* Karten-Hintergrund */
  --ink:#1c1c1c;          /* Haupttext */
  --muted:#616161;        /* Sekundärtext */
  --brand:#1f5d42;        /* Marken-Grün */
  --brand-ink:#0f3a29;    /* dunkles Grün */
  --accent:#f3b43a;       /* Akzent */
  --err:#b00020;          /* Fehlermeldungen */
  --ok:#1b8f5a;           /* OK/Success */
  --border:#e8e2d7;       /* zarte Kante */
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --header-h: 68px;
}
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;background:
    radial-gradient(80vw 50vh at 10% -10%, #fff4d6 0%, transparent 40%),
    radial-gradient(60vw 50vh at 100% -20%, #e8fff2 0%, transparent 35%),
    var(--bg);
  color:var(--ink);
  font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* Header / Brand */
.header{max-width:960px;margin:22px auto 0;padding:0 16px;display:flex;justify-content:center}
.brand{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:999px;
  background:#ffffffcc;border:1px solid var(--border);backdrop-filter:saturate(120%) blur(6px)
}
.brand .logo{
  width:28px;height:28px;border-radius:10px;
  background:conic-gradient(from 210deg,var(--brand),#2a7b5a 40%,#4dbf91 60%,var(--accent) 95%);
  box-shadow:inset 0 0 0 2px #ffffff, 0 6px 18px #1f5d4214
}
.brand span{font-weight:700;letter-spacing:.2px}

/* Layout */
.wrapper{
  display:block;
  padding:18px 22px 24px;
}

@media (min-width:900px){
  .wrapper{
    min-height:calc(100svh - var(--header-h));
    display:grid;
    place-items:center;
  }
}
.card{width:100%;max-width:100%;background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin-bottom:16px}
.auth{
  width:100%;max-width:520px;background:var(--paper);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:22px
}
.card h1{margin:6px 0 2px;font-size:clamp(20px,4.5vw,26px);line-height:1.15}
.card p.lead{margin:0 0 14px;color:var(--muted);font-size:14px}

/* Form */
.form{display:grid;gap:12px;margin-top:6px}
.label{font-weight:600;font-size:14px}
.input{
  width:100%;padding:12px 14px;border-radius:12px;background:#fff;
  border:1px solid var(--border);color:var(--ink);outline:none
}
.input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px #1f5d4230
}

.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn{
  display:inline-flex;justify-content:center;align-items:center;gap:8px;
  padding:10px 12px;border-radius:12px;border:1px solid transparent;
  background:var(--brand);color:#fff;font-weight:700;cursor:pointer
}
.btn:hover{filter:brightness(1.06)}
.btn.outline{background:transparent;color:var(--brand);border-color:var(--brand)}
.btn.full{width:100%}

/* Einheitliche Buttons – Anchor & Button gleich groß */
a.btn,
button.btn,
input[type=button].btn,
input[type=submit].btn {
  display:inline-flex;
  align-items:center; justify-content:center; gap:8px;
  padding:10px 12px;
  border-radius:12px; border:1px solid transparent;
  background:var(--brand); color:#fff;
  font:inherit; line-height:1.2; /* vereinheitlicht Zeilenhöhe */
  text-decoration:none; cursor:pointer;
  vertical-align:middle;
}

/* Native Button-Styles neutralisieren */
button.btn,
input[type=button].btn,
input[type=submit].btn {
  -webkit-appearance:none;
  appearance:none;
  border-width:1px; /* sicherstellen wie oben */
  /* Firefox entfernt inner padding */
}
button.btn::-moz-focus-inner,
input[type=button].btn::-moz-focus-inner,
input[type=submit].btn::-moz-focus-inner {
  border:0; padding:0;
}


.meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:13px}

.msg{
  padding:12px;border-radius:12px;background:#fff6f6;border:1px solid #ffc8c8;color:var(--err)
}
.msg.ok{background:#f0fff6;border-color:#bfe9d4;color:var(--ok)}

.small{font-size:12px;color:var(--muted)}
hr.sep{height:1px;border:none;background:var(--border);margin:12px 0}

/* Pills / Badges */
.pill{
  display:inline-flex;gap:8px;align-items:center;font-size:12px;padding:6px 10px;
  border-radius:999px;border:1px solid var(--border);background:#fff;color:var(--muted)
}

/* Password toggle */
.input-wrap{position:relative}
.input-wrap .toggle{
  position:absolute;right:10px;top:50%;translate:0 -50%;
  background:transparent;border:none;color:var(--brand);cursor:pointer;font-size:13px;padding:6px;border-radius:8px;
}
.input-wrap .toggle:hover{background:#1f5d420f}

/* Radio group */
.radios{
  display:grid;gap:8px;background:#fff;border:1px solid var(--border);padding:10px;border-radius:12px
}
.radios label{display:flex;gap:10px;align-items:center}

/* Footer */
.footer{max-width:960px;margin:10px auto 24px;padding:0 16px;color:var(--muted);font-size:13px;text-align:center}

/* Mobile */
@media (max-width:520px){
  .card{padding:18px}
  .btn{padding:12px}
}

/* --- Beta/Info Notice (Startseite) --- */
.notice {
  position: relative;
  display: flex; align-items: flex-start; gap: 12px;
  background: linear-gradient(180deg, #fff6dc, #ffffff);
  border: 1px solid var(--border);
  border-left: 6px solid var(--accent);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--shadow);
  margin: 16px 0 22px;
}
.notice .icon { font-size: 22px; line-height: 1; }
.notice h3 { margin: 0 0 4px; font-size: 18px; line-height: 1.2; }
.notice p { margin: 0; color: var(--muted); }
.notice .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

.n-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 14px; border-radius: 12px; border: 1px solid transparent;
  font-weight: 700; text-decoration: none; white-space: nowrap;
}
.n-btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.n-btn.outline { background: #fff; color: var(--brand); border-color: var(--brand); }
.btn.danger{
  background:#d32f2f;      /* kräftiges Rot */
  color:#fff;              /* weiße Schrift für Kontrast */
  border-color:#b71c1c;    /* etwas dunklerer Rand */
}

.btn.danger:hover{
  background:#b71c1c;      /* dunkler beim Hover */
  border-color:#8b0000;
}

.btn.danger:active{
  background:#9b1b1b;
  border-color:#7b0000;
  transform: translateY(1px);
}

.btn.breit {
  width: 100% ;
}

.notice .close {
  position: absolute; top: 8px; right: 8px;
  background: transparent; border: 1px solid var(--border);
  border-radius: 10px; padding: 4px 8px; cursor: pointer; color: var(--muted);
}
.notice .close:hover { background: #00000008; color: var(--ink); }

@media (max-width: 640px) {
  .notice { flex-direction: column; }
}

/* statt: input, select, textarea */
input:not([type=checkbox]):not([type=radio]), select, textarea {
  width:100%;
  border:1px solid #d9e2ec;
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
  line-height:1.2;
  box-shadow: inset 0 1px 0 rgba(16,24,40,.02);
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
  appearance:none; -webkit-appearance:none;
}
textarea{ min-height:44px; resize:vertical; }
select{
  padding-right:36px;
  background-image:
    linear-gradient(45deg,transparent 50%,#65758b 50%),
    linear-gradient(135deg,#65758b 50%,transparent 50%),
    linear-gradient(to right,#fff,#fff);
  background-position: calc(100% - 16px) 55%, calc(100% - 10px) 55%, 100% 0;
  background-size: 6px 6px,6px 6px,2.5rem 100%;
  background-repeat:no-repeat;
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color: var(--hc-green); box-shadow: 0 0 0 3px rgba(10,125,25,.12);
}

/* Reset/Style für Checkbox & Radio */
input[type=checkbox],
input[type=radio]{
  width:auto; height:auto; /* verhindert 100%-Breite */
  padding:0;               /* keine Innenabstände */
  border:none; box-shadow:none;
  appearance:auto; -webkit-appearance:auto; -moz-appearance:auto;
  vertical-align:middle;
  accent-color: var(--brand); /* modernes CSS: Häkchenfarbe */
}

/* Optional schöneres Label-Layout nebeneinander */
.checkline{ display:flex; align-items:center; gap:.5rem; }

input:focus, select:focus, textarea:focus{
  outline:none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(31, 93, 66, .12); /* aus --brand abgeleitet */
}

#pushStatusBox[data-status="active"] {
  border-left: 4px solid #22c55e;
}
#pushStatusBox[data-status="inactive"] {
  border-left: 4px solid #f59e0b;
}
#pushStatusBox[data-status="blocked"],
#pushStatusBox[data-status="error"] {
  border-left: 4px solid #ef4444;
}
#pushStatusBox[data-status="unsupported"] {
  border-left: 4px solid #6b7280;
}


/* =========================================================
   Wirtshaus.Cloud – GENERELLE LAYOUT-BASIS / UTILITIES
   (für Dienstplan, Inventur, HACCP, etc.)
   ========================================================= */

/* Standard-Seiten-Wrapper (statt jedes Mal .wrap neu zu definieren) */
.wrap{
  max-width:1000px;
  margin:0 auto;
  padding:16px;
}

/* Alternative „Container“ für größere Seiten (z.B. Inventur-Listen) */
.container{
  max-width:100%;
  margin:0 auto;
  padding:16px;
}

/* Karten-/Kachel-Grid (2-spaltig ab Desktop) */
.page-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:16px;
}
@media (min-width:900px){
  .page-grid{
    grid-template-columns:1fr 1fr;
  }
}

/* Karten-Kacheln für Listen (z.B. Anträge, Logs etc.) */
.card-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:8px;
}
.card-list-item{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
  padding:10px 12px;
}
.card-list-header{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}
.card-list-title{
  font-weight:600;
}
.card-list-meta{
  font-size:12px;
  color:var(--muted);
}
.card-list-body{
  font-size:14px;
}

/* Badge-Styles (vereinheitlicht für Status, Labels, etc.) */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  font-size:12px;
  background:#fff;
  color:var(--muted);
}
.badge.ok{
  background:#f0fff6;
  border-color:#bfe9d4;
  color:#0a7d19;
}
.badge.pending{
  background:#fff7cc;
  border-color:#ffec8a;
  color:#7a5c00;
}
.badge.denied{
  background:#ffe0e0;
  border-color:#ffbaba;
  color:#8a0000;
}
.badge.info{
  background:#eef2ff;
  border-color:#c7d2fe;
  color:#3730a3;
}

/* Responsive Tabellen – werden mobil zu Kacheln */
.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
table.responsive{
  width:100%;
  border-collapse:collapse;
  border:1px solid var(--border);
  background:var(--paper);
}
table.responsive thead th{
  background:#fafafa;
  font-weight:600;
  border-bottom:2px solid var(--border);
  padding:10px 12px;
  text-align:left;
  white-space:nowrap;
}
table.responsive td{
  border-top:1px solid #e6e6e6;
  border-right:1px solid #eeeeee;
  padding:10px 12px;
  white-space:nowrap;
  vertical-align:top;
}
table.responsive tr td:last-child{
  border-right:0;
}
table.responsive tbody tr:nth-child(even){
  background:#fcfcfc;
}

/* Mobile: Tabelle zu Karten umbauen */
@media (max-width:1600px){
  table.responsive{
    border:0;
  }
  table.responsive thead{
    display:none;
  }
  table.responsive tr{
    display:block;
    margin:0 0 12px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
    box-shadow:0 2px 6px rgba(0,0,0,.04);
  }
  table.responsive td{
    display:grid;
    grid-template-columns:160px 1fr;
    gap:8px;
    padding:10px 12px;
    border:0;
    border-top:1px solid #eeeeee;
    white-space:normal;
  }
  table.responsive td:first-child{
    border-top:0;
    border-top-left-radius:12px;
    border-top-right-radius:12px;
  }
  table.responsive td::before{
    content:attr(data-label);
    font-weight:600;
    color:#666;
  }
}

/* „Banner“-Hinweise über Listen (z.B. Tageshinweise, Abwesenheiten im Dienstplan) */
.banner-list{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:8px;
}
.banner-item{
  font-size:12px;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#f9fafb;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.banner-item strong{
  margin-right:4px;
}

/* Farbvarianten für Banner (frei/urlaub/krank etc.) */
.banner--vacation{
  background:#e3f2fd;
  border-color:#bbdefb;
  color:#0d47a1;
}
.banner--wish{
  background:#fff8e1;
  border-color:#ffe0b2;
  color:#8a4b00;
}
.banner--sick{
  background:#ffebee;
  border-color:#ffcdd2;
  color:#b71c1c;
}

/* Kleine Hilfsklassen */
.muted{color:var(--muted);}
.text-right{text-align:right;}
.text-center{text-align:center;}
.mt-1{margin-top:4px;}
.mt-2{margin-top:8px;}
.mt-3{margin-top:12px;}
.mb-1{margin-bottom:4px;}
.mb-2{margin-bottom:8px;}
.mb-3{margin-bottom:12px;}