/* Bergsteiger-Ladeanzeige (SummitX). MUSS als @import ganz oben stehen —
   nach der ersten regulären Regel würde der Browser sie stillschweigend
   verwerfen. Dieselbe Quelle wie im Backoffice (casita-theme.css). */
@import url("/static/summitx-lader.css");

/* ===== CASITA Bewohnerportal (Frontoffice) — eigenständiges, mobile-first Theme =====
   Ruhig, vertrauenswürdig, große Touch-Ziele. Unabhängig vom Backoffice-Theme. */
:root{
  --fo-bg:#f4f6f9; --fo-surface:#ffffff; --fo-surface-2:#f7f9fc;
  --fo-text:#1d2733; --fo-muted:#69788a; --fo-border:#e4e9f0;
  --fo-brand:#2f7d72; --fo-brand-dark:#246055; --fo-brand-soft:#e3f1ee;
  --fo-accent:#3b6fe0; --fo-accent-soft:#eaf1ff;
  --fo-green:#1a7a3a; --fo-green-soft:#e8f5ec;
  --fo-orange:#b4520a; --fo-orange-soft:#ffe9d6;
  --fo-red:#c0392b; --fo-red-soft:#fdecea;
  --fo-shadow:0 1px 2px rgba(20,30,50,.05),0 6px 22px rgba(20,30,50,.06);
  --fo-radius:14px; --fo-radius-sm:10px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body.fo{font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;background:var(--fo-bg);
  color:var(--fo-text);min-height:100vh;-webkit-font-smoothing:antialiased;line-height:1.5;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;}

/* ── Header ─────────────────────────────────────────── */
.fo-header{position:sticky;top:0;z-index:50;background:var(--fo-surface);border-bottom:1px solid var(--fo-border);
  display:flex;align-items:center;gap:12px;min-height:56px;
  padding:max(10px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));}
.fo-logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;color:var(--fo-brand-dark);}
.fo-logo .mark{width:34px;height:34px;border-radius:9px;background:var(--fo-brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;letter-spacing:-.5px;}
.fo-header .spacer{flex:1;}
.fo-iconbtn{width:40px;height:40px;border-radius:10px;border:1px solid var(--fo-border);background:var(--fo-surface);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--fo-muted);position:relative;}
.fo-iconbtn:hover{background:var(--fo-surface-2);color:var(--fo-text);}
.fo-iconbtn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.fo-badge-dot{position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--fo-orange);border:2px solid var(--fo-surface);}

/* Nutzer-Menü */
.fo-usermenu{position:relative;}
.fo-userbtn{display:flex;align-items:center;gap:8px;border:1px solid var(--fo-border);background:var(--fo-surface);
  border-radius:24px;padding:5px 12px 5px 6px;cursor:pointer;color:var(--fo-text);font-size:13px;font-weight:600;}
.fo-avatar{width:30px;height:30px;border-radius:50%;background:var(--fo-brand-soft);color:var(--fo-brand-dark);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;}
.fo-userdrop{display:none;position:absolute;right:0;top:46px;background:var(--fo-surface);border:1px solid var(--fo-border);
  border-radius:12px;box-shadow:var(--fo-shadow);min-width:200px;overflow:hidden;}
.fo-userdrop.open{display:block;}
.fo-userdrop .uname{padding:12px 14px;border-bottom:1px solid var(--fo-border);}
.fo-userdrop .uname b{display:block;font-size:14px;}
.fo-userdrop .uname span{font-size:12px;color:var(--fo-muted);}
.fo-userdrop a{display:flex;align-items:center;gap:9px;padding:11px 14px;font-size:14px;color:var(--fo-text);}
.fo-userdrop a:hover{background:var(--fo-surface-2);}
.fo-userdrop a svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;}

/* ── Objekt-Kontext + Reiter ───────────────────────── */
.fo-objbar{background:var(--fo-surface);border-bottom:1px solid var(--fo-border);padding:12px 16px 0;
  padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));}
.fo-objname{font-size:15px;font-weight:700;color:var(--fo-text);display:flex;align-items:center;gap:8px;}
.fo-objmeta{font-size:12.5px;color:var(--fo-muted);margin-top:2px;}
.fo-objswitch{font-size:12px;color:var(--fo-brand);font-weight:600;margin-left:6px;}
.fo-tabs{display:flex;gap:2px;overflow-x:auto;margin-top:10px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.fo-tabs::-webkit-scrollbar{display:none;}
.fo-tab{flex:0 0 auto;padding:11px 14px;font-size:14px;font-weight:600;color:var(--fo-muted);
  border-bottom:2.5px solid transparent;white-space:nowrap;}
.fo-tab:hover{color:var(--fo-text);}
.fo-tab.active{color:var(--fo-brand-dark);border-bottom-color:var(--fo-brand);}
.fo-tab .cnt{display:inline-block;min-width:18px;height:18px;line-height:18px;text-align:center;font-size:11px;
  background:var(--fo-orange);color:#fff;border-radius:9px;margin-left:5px;padding:0 5px;}

/* ── Inhalt ─────────────────────────────────────────── */
.fo-wrap{max-width:880px;margin:0 auto;
  padding:18px max(16px,env(safe-area-inset-right)) calc(80px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));}
/* Breite Sicht fuer Buchhaltung (Kontenblatt/Saldenliste: viele Spalten) */
.fo-wrap.wide{max-width:1500px;}
.fo-h{font-size:19px;font-weight:700;margin-bottom:4px;}
.fo-sub{font-size:13.5px;color:var(--fo-muted);margin-bottom:18px;}
.fo-card{background:var(--fo-surface);border:1px solid var(--fo-border);border-radius:var(--fo-radius);
  box-shadow:var(--fo-shadow);padding:18px 18px;margin-bottom:14px;}
.fo-card h3{font-size:15px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:9px;}
.fo-card h3 svg{width:19px;height:19px;stroke:var(--fo-brand);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.fo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}

.fo-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--fo-border);}
.fo-row:last-child{border-bottom:none;}
.fo-row .ic{width:40px;height:40px;border-radius:10px;background:var(--fo-brand-soft);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;}
.fo-row .ic svg{width:19px;height:19px;stroke:var(--fo-brand-dark);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.fo-row .body{flex:1;min-width:0;}
.fo-row .body .t{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fo-row .body .s{font-size:12.5px;color:var(--fo-muted);margin-top:1px;}
.fo-row .act{flex-shrink:0;}

.fo-pill{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:20px;}
.fo-pill.offen{background:var(--fo-orange-soft);color:var(--fo-orange);}
.fo-pill.bearb{background:var(--fo-accent-soft);color:var(--fo-accent);}
.fo-pill.zu{background:var(--fo-green-soft);color:var(--fo-green);}
.fo-pill.grau{background:var(--fo-surface-2);color:var(--fo-muted);}

.fo-cat{margin-bottom:8px;}
.fo-cat-head{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--fo-muted);
  padding:14px 0 6px;}

.fo-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:11px;
  background:var(--fo-brand);color:#fff;border:none;font-size:14.5px;font-weight:700;cursor:pointer;font-family:inherit;}
.fo-btn:hover{background:var(--fo-brand-dark);}
.fo-btn.full{width:100%;}
.fo-btn.ghost{background:var(--fo-surface);color:var(--fo-brand-dark);border:1px solid var(--fo-border);}
.fo-btn.sm{padding:8px 13px;font-size:13px;}
.fo-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

.fo-dl{display:inline-flex;align-items:center;gap:6px;color:var(--fo-brand-dark);font-weight:600;font-size:13px;}
.fo-dl svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;}

label.fo-l{display:block;font-size:13px;font-weight:600;margin:14px 0 6px;}
.fo-in,.fo-ta,.fo-sel{width:100%;border:1px solid var(--fo-border);border-radius:11px;padding:12px 13px;
  font-size:15px;font-family:inherit;background:var(--fo-surface);color:var(--fo-text);}
.fo-in:focus,.fo-ta:focus,.fo-sel:focus{outline:none;border-color:var(--fo-brand);box-shadow:0 0 0 3px var(--fo-brand-soft);}
.fo-ta{min-height:120px;resize:vertical;}

.fo-empty{text-align:center;padding:38px 18px;color:var(--fo-muted);}
.fo-empty svg{width:42px;height:42px;stroke:var(--fo-border);fill:none;stroke-width:1.6;margin-bottom:12px;}
.fo-empty p{font-size:14px;}

.fo-alert{padding:12px 14px;border-radius:11px;font-size:13.5px;margin-bottom:16px;}
.fo-alert.err{background:var(--fo-red-soft);color:var(--fo-red);}
.fo-alert.ok{background:var(--fo-green-soft);color:var(--fo-green);}
.fo-alert.info{background:var(--fo-accent-soft);color:var(--fo-accent);}

/* Chat / Konversation */
.fo-msg{max-width:82%;margin-bottom:12px;padding:11px 14px;border-radius:14px;font-size:14px;line-height:1.5;}
.fo-msg .meta{font-size:11px;color:var(--fo-muted);margin-top:5px;}
.fo-msg.bew{margin-left:auto;background:var(--fo-brand);color:#fff;border-bottom-right-radius:4px;}
.fo-msg.bew .meta{color:rgba(255,255,255,.8);}
.fo-msg.verw{margin-right:auto;background:var(--fo-surface);border:1px solid var(--fo-border);border-bottom-left-radius:4px;}

/* ── Auth-Seiten ───────────────────────────────────── */
.fo-auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 18px;
  background:linear-gradient(160deg,var(--fo-brand-soft),var(--fo-bg) 55%);}
.fo-auth-card{width:100%;max-width:400px;background:var(--fo-surface);border:1px solid var(--fo-border);
  border-radius:18px;box-shadow:var(--fo-shadow);padding:30px 26px;}
.fo-auth-logo{display:flex;align-items:center;justify-content:center;gap:11px;font-weight:800;font-size:20px;
  color:var(--fo-brand-dark);margin-bottom:6px;}
.fo-auth-logo .mark{width:40px;height:40px;border-radius:11px;background:var(--fo-brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:18px;}
.fo-auth h1{font-size:18px;text-align:center;margin:14px 0 4px;}
.fo-auth p.sub{text-align:center;font-size:13.5px;color:var(--fo-muted);margin-bottom:22px;}
.fo-auth .links{text-align:center;margin-top:16px;font-size:13px;}
.fo-auth .links a{color:var(--fo-brand);font-weight:600;}

@media(min-width:720px){
  .fo-tabs{gap:6px;}
}

/* ── Vorschau-/Impersonation-Banner (Verwalter sieht Bewohner-Sicht) ───────── */
.fo-impbar{display:flex;align-items:center;gap:10px;padding:9px 16px;background:#6b46c1;
  color:#fff;font-size:13.5px;font-weight:600;
  padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));}
.fo-impbar .ic{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round;flex-shrink:0;}
.fo-impbar .txt{flex:1;min-width:0;}
.fo-impbar b{font-weight:800;}
.fo-impexit{margin-left:auto;background:rgba(255,255,255,.18);color:#fff;padding:5px 12px;
  border-radius:8px;text-decoration:none;font-weight:700;white-space:nowrap;}
.fo-impexit:hover{background:rgba(255,255,255,.30);}
@media(max-width:560px){.fo-impbar{font-size:12px;padding:8px 12px;gap:7px;
  padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));}.fo-impbar .txt{font-size:12px;}}

/* ── Mobiler Geräte-Feinschliff (Tap-Ziele + iOS-Auto-Zoom-Schutz) ──────────── */
@media(max-width:860px){
  /* Inputs: 16px verhindert iOS-Auto-Zoom beim Fokus (Basis 15px) */
  .fo-in,.fo-ta,.fo-sel{font-size:16px;}
  /* Tap-Ziele >=44px (Apple HIG) */
  .fo-iconbtn{width:44px;height:44px;}
  .fo-tab{min-height:44px;display:flex;align-items:center;}
  .fo-userbtn{min-height:40px;}
  /* kleine Inline-Links vergrößern */
  .fo-objswitch{display:inline-block;padding:6px 4px;}
  .fo-dl{padding:4px 0;}
}