/* =============================================================================
   Zero UI — gemeinsame Gestaltung für zerochat, zerocloud und maps.
   =============================================================================

   Eine Quelle, drei Dienste. Wer hier etwas ändert, ändert es überall:

       /var/www/shared/css/zero-ui.css      <- diese Datei, die Quelle
       /var/www/shared/deploy-ui.sh         <- verteilt sie an die Dienste

   Die Kopien in den Diensten werden vom Verteilskript überschrieben. Bitte
   nicht dort ändern, sondern hier.

   Die Farbwelt stammt aus Zero Chat und wird von Zero Cloud bereits
   verwendet: dunkler Grund, ein einziger Akzent in Mint, Rot nur für
   Gefährliches. Jeder Dienst legt darüber sein eigenes Stylesheet mit dem,
   was nur ihn betrifft.
   ============================================================================= */

/* --- Grundwerte ---------------------------------------------------------- */

:root{
  font-family:Inter,system-ui,sans-serif;
  color:#e8ecf4;background:#080b12;
  --panel:#111722;--panel2:#151d2a;--line:#263044;--muted:#8c98aa;
  --accent:#62e5bd;--danger:#ff7785;
}

/* --app-height folgt dem tatsächlich sichtbaren Bereich (siehe viewport.js)
   und berücksichtigt Browserleisten und die Bildschirmtastatur. dvh ist der
   erste Rückfall, 100vh der zweite für ältere Browser. */
:root{--app-height:100vh;--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
      --safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px)}
@supports (height:100dvh){:root{--app-height:100dvh}}

*{box-sizing:border-box}
body{margin:0;min-height:var(--app-height);overscroll-behavior:none;
     background:radial-gradient(circle at 30% -10%,#182534 0,#080b12 38%);
     -webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit}
button{cursor:pointer;border:0;background:none;color:inherit}

/* --- Anmeldemaske -------------------------------------------------------- */
/* Zweigeteilt: links die Aussage, rechts das Formular. Auf schmalen
   Bildschirmen bleibt nur das Formular. */

.auth{min-height:var(--app-height);display:grid;grid-template-columns:1.1fr .9fr}
.story{display:flex;flex-direction:column;justify-content:center;padding:8vw;background:linear-gradient(125deg,#0d151b,#101e26 55%,#0d131c)}
.story h1{font-size:clamp(3rem,6vw,6rem);line-height:.95;letter-spacing:-.06em;margin:12vh 0 24px}
.story p,.muted{color:var(--muted);line-height:1.7}
.authbox{display:grid;place-items:center;padding:30px}
.authbox form{width:min(420px,100%);padding:34px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.logo{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;color:#06110e;background:linear-gradient(145deg,#85f6d3,#31bd93)}
.security{font-size:12px;color:var(--accent)}

/* --- Flächen und Formularteile ------------------------------------------ */

.card{background:linear-gradient(145deg,#131a26ed,#0f151fed);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 70px #0007}
label{display:grid;gap:7px;margin:15px 0;color:#c9d0dc;font-size:13px;font-weight:700}
/* 16px verhindert, dass iOS beim Antippen in das Feld hineinzoomt.
   Ankreuz- und Auswahlfelder sind ausgenommen: Sie auf volle Breite zu ziehen
   und mit Innenabstand zu versehen macht aus einem Kästchen einen Balken. */
input:not([type=checkbox]):not([type=radio]),select,textarea{width:100%;padding:13px 14px;font-size:16px;color:#f3f6fb;background:#090e16;border:1px solid #2b3548;border-radius:10px;outline:0}
input[type=checkbox],input[type=radio]{width:auto;flex:none;margin:0;accent-color:var(--accent)}
input:focus,textarea:focus,select:focus{border-color:#30b990;box-shadow:0 0 0 3px #48d5aa18}
.error{padding:10px;color:#ffd7dc;background:#481d27;border:1px solid #80303f;border-radius:9px}

/* --- Schaltflächen ------------------------------------------------------- */

.primary,.secondary,.danger{padding:12px 15px;border-radius:10px;font-weight:800;cursor:pointer}
.primary{border:0;color:#06110e;background:linear-gradient(135deg,#70ebc6,#3cc89e)}
.secondary{color:#d8e0ec;background:#1a2331;border:1px solid #303c50}
.danger{color:#ffd7dc;background:#481d27;border:1px solid #80303f}
.wide{width:100%}
.icon{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#1a2331;border:1px solid #303c50;color:#d8e0ec;flex:none}
.icon:hover{background:#22304a}
.icon.on{background:#15241f;border-color:#2c5a4a;color:var(--accent)}
.icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* --- Anordnung ----------------------------------------------------------- */

.hidden{display:none!important}
.row{display:flex;align-items:center;gap:10px}
.row.wrap{flex-wrap:wrap}
.spread{justify-content:space-between}
.grow{flex:1;min-width:0}
.tiny{font-size:12px}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stack{display:grid;gap:12px}
.empty{margin:auto;text-align:center;color:var(--muted)}

/* --- Marken und Zeichen -------------------------------------------------- */

.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.03em;background:#1a2331;border:1px solid #303c50;color:#c2ccda}
.pill.good{background:#15241f;border-color:#2c5a4a;color:var(--accent)}
.pill.warn{background:#2c2413;border-color:#6a5622;color:#f0c86a}
.pill.bad{background:#481d27;border-color:#80303f;color:#ffd7dc}
.badge{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 5px;border-radius:9px;font-size:10px;font-weight:800;color:#06110e;background:var(--accent)}
.avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;font-weight:800;font-size:14px;color:#06110e;background:linear-gradient(145deg,#85f6d3,#31bd93);flex:none;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.group{background:linear-gradient(145deg,#8fb8ff,#4b7fd6)}
.avatar.lg{width:64px;height:64px;border-radius:19px;font-size:24px}

/* --- Listen, Reiter, Suche ----------------------------------------------- */

.searchbar{display:flex;gap:8px}
.searchbar input{padding:10px 12px}
.tabs{display:flex;gap:4px;padding:3px;background:#0d1420;border:1px solid #1d2634;border-radius:11px}
.tabs button{flex:1;padding:7px;border-radius:8px;font-size:12px;font-weight:800;color:var(--muted)}
.tabs button.active{background:#15241f;color:var(--accent)}
.tabs button .badge{margin-left:5px}
.listrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid #1a2331}
.listrow:first-child{border-top:0}

/* --- Dateien und Fortschritt --------------------------------------------- */

.file{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:11px;background:#0e1620}
.file .grow b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.progress{height:3px;border-radius:2px;background:#1d2634;overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent);transition:width .2s}

/* --- Auflagen (Dialoge) --------------------------------------------------- */

.sheet{position:fixed;inset:0;display:grid;place-items:center;padding:20px;background:#04070ccc;backdrop-filter:blur(6px);z-index:40}
.sheet .card{width:min(560px,100%);max-height:86dvh;overflow:auto;padding:26px;overscroll-behavior:contain}
.sheet h2,.sheet h3{margin:0 0 4px}
.sheet .section{padding:16px 0;border-top:1px solid var(--line)}
.sheet .section:first-of-type{border-top:0}

/* --- Schalter ------------------------------------------------------------- */

.switch{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0;font-size:14px}
.switch small{display:block;margin-top:4px;font-weight:400;color:var(--muted);font-size:12px;line-height:1.6}
.toggle{position:relative;width:46px;height:26px;border-radius:999px;background:#22304a;border:1px solid #303c50;flex:none;transition:.16s}
.toggle:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#8c98aa;transition:.16s}
.toggle.on{background:#1c4437;border-color:#2c5a4a}
.toggle.on:after{left:23px;background:var(--accent)}

/* --- Code und Hinweise ---------------------------------------------------- */

.codebox{padding:12px;border-radius:10px;background:#090e16;border:1px solid #2b3548;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;word-break:break-all;line-height:1.7}
.toasts{position:fixed;right:18px;bottom:18px;display:grid;gap:9px;z-index:60}
.toast{padding:12px 15px;border-radius:11px;background:#151d2a;border:1px solid var(--line);box-shadow:0 14px 40px #0009;font-size:13px;max-width:340px}
.toast.bad{border-color:#80303f}
.banner{padding:11px 26px;background:#2c2413;border-bottom:1px solid #6a5622;color:#f0c86a;font-size:13px}
.banner.bad{background:#481d27;border-color:#80303f;color:#ffd7dc}

/* --- Auf dem Telefon ------------------------------------------------------ */

@media(max-width:760px){
  .auth{grid-template-columns:1fr}
  .story{display:none}
  .authbox{padding:20px;padding-top:calc(20px + var(--safe-t));padding-bottom:calc(20px + var(--safe-b))}
  .authbox form{padding:24px}
  .sheet{padding:0;place-items:stretch}
  .sheet .card{max-height:none;height:100%;border-radius:0;width:100%;
               padding:22px 18px calc(28px + var(--safe-b));
               padding-top:calc(22px + var(--safe-t))}
  .icon{width:42px;height:42px}
  .toasts{right:12px;left:12px;bottom:calc(12px + var(--safe-b))}
  .toast{max-width:none}
}

/* Berührungsbedienung: größere Ziele, kein Doppeltipp-Zoom */
@media(pointer:coarse){
  button,.listrow{touch-action:manipulation}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* --- Rechtsleiste ---------------------------------------------------------
   Impressum und Datenschutz müssen ohne Anmeldung erreichbar sein. Deshalb
   steht diese Zeile in der Anmeldemaske jedes Dienstes, überall gleich. */
.rechtsleiste{margin-top:18px;text-align:center;font-size:11.5px;line-height:2;color:var(--muted)}
.rechtsleiste a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.rechtsleiste a:hover{color:var(--accent)}
.authbox .rechtsleiste{margin-top:14px}