/* neona-ui — zentrales Design-System des Neona OS.
 *
 * Extrahiert aus crm/src/neonacrm/templates/base.html (Premium-SaaS-Look:
 * Weiß, Hairlines, viel Weißraum, Inter — bewusst KEINE Brand-Farben).
 * Wird von neona-id unter os.neona-living.de/static/neona-ui.css ausgeliefert;
 * die Fach-Apps binden NUR diese Datei ein. App-spezifisches CSS gehört in
 * die jeweilige App, nicht hierher. Änderungen an dieser Datei betreffen
 * ALLE OS-Apps — konservativ erweitern, nichts umbenennen.
 */

:root {
  --bg:#FFFFFF; --subtle:#FAFAFB; --hover:#F5F5F6;
  --text:#141415; --muted:#8A8A90; --line:#EAEAEC; --line-soft:#F2F2F3;
  --radius:12px;
  --shadow:0 1px 2px rgba(20,20,21,.05);
}
* { box-sizing:border-box; margin:0; }
body { font:14px/1.6 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
       background:var(--bg); color:var(--text); min-height:100vh;
       -webkit-font-smoothing:antialiased; font-feature-settings:"cv11","ss01"; }

/* Shell: Sidebar + Content */
.layout { display:flex; min-height:100vh; }
aside {
  width:240px; flex:none; background:var(--bg); border-right:1px solid var(--line);
  padding:30px 18px 22px; display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}
.logo { height:14px; width:auto; display:block; color:var(--text); }
aside .logo-wrap { padding:2px 12px 34px; }
aside .appname { padding:0 12px 22px; font-size:11px; text-transform:uppercase;
                 letter-spacing:.08em; font-weight:600; color:var(--muted); }
aside nav { display:flex; flex-direction:column; gap:2px; }
aside nav a {
  display:flex; align-items:center; gap:11px; padding:8px 12px; border-radius:8px;
  color:var(--muted); text-decoration:none; font-weight:500; font-size:13.5px;
}
aside nav a svg { width:16px; height:16px; flex:none; }
aside nav a:hover { color:var(--text); background:var(--hover); }
aside nav a.active { color:var(--text); background:var(--hover); }
.navcount { margin-left:auto; background:#E2445C; color:#FFF; font-size:11px; font-weight:600;
            border-radius:999px; padding:0 7px; min-width:19px; text-align:center; }
.navsection { margin-top:22px; padding:0 12px 8px; font-size:10.5px; text-transform:uppercase;
              letter-spacing:.08em; font-weight:600; color:var(--muted); }
.sidebar-footer { margin-top:auto; padding-top:18px; border-top:1px solid var(--line-soft); }
.sidebar-footer .who { font-size:13px; font-weight:600; padding:0 12px 10px; }

/* min-width:0: sonst kann das Flex-Item nicht unter die Min-Breite seines
   Inhalts schrumpfen und breite Tabellen schieben die ganze Seite über den
   Viewport hinaus, statt im eigenen overflow-x-Container zu scrollen. */
main { flex:1; min-width:0; padding:52px 56px 80px; max-width:1360px; }
.pagehead { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:36px; }
h1 { font-size:22px; font-weight:600; letter-spacing:-.02em; }
h2 { font-size:18px; font-weight:600; letter-spacing:-.015em; }
h3 { font-size:13px; font-weight:600; letter-spacing:-.005em; }
.muted { color:var(--muted); }
.sub { color:var(--muted); font-size:13px; margin-top:6px; }

.panel { background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
         box-shadow:var(--shadow); padding:26px; }

/* Formulare */
input, button, select, textarea { font:inherit; color:var(--text); }
label { color:var(--muted); font-size:12.5px; font-weight:500; }
input[type=email], input[type=password], input[type=text], input[type=search],
input[type=number], input[type=date], textarea, select {
  width:100%; padding:9px 13px; margin:6px 0 16px; background:var(--bg);
  border:1px solid var(--line); border-radius:9px; font-size:13.5px;
}
input:focus, select:focus, textarea:focus { outline:3px solid rgba(20,20,21,.08); border-color:#C9C9CC; }
button, .btn {
  display:inline-block; padding:8px 16px; background:var(--text); color:#FFF; border:0;
  border-radius:9px; font-weight:500; cursor:pointer; text-decoration:none; font-size:13.5px;
}
button:hover, .btn:hover { background:#2C2C2E; }
button.ghost, .btn.ghost { background:transparent; color:var(--text); border:1px solid var(--line); }
button.ghost:hover, .btn.ghost:hover { background:var(--hover); }
button.danger, .btn.danger { background:transparent; color:#C2352B; border:1px solid var(--line); }
button.danger:hover, .btn.danger:hover { background:#FDF2F1; border-color:#E8C5C2; }
.err { color:#C2352B; margin-bottom:12px; font-size:13px; }
.ok-msg { color:#037F4C; margin-bottom:12px; font-size:13px; }
a { color:var(--text); }

/* Tabellen */
table { width:100%; border-collapse:collapse; font-size:13.5px; }
th, td { text-align:left; padding:12px 18px; border-bottom:1px solid var(--line-soft); }
th { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.07em; font-weight:600; }
tr:last-child td { border-bottom:0; }
tbody tr:hover { background:var(--subtle); }
td.num, .tnum { font-variant-numeric:tabular-nums; }

/* Status-Pills: solid & kräftig (monday-Stil). Generische Stufen —
   app-spezifische Pills definiert jede App selbst nach diesem Muster. */
.badge { display:inline-block; padding:3px 11px; border-radius:6px; font-size:11px;
         font-weight:600; white-space:nowrap; color:#FFF; letter-spacing:.015em; }
.b-ok      { background:#00C875; }
.b-info    { background:#579BFC; }
.b-warn    { background:#FDAB3D; }
.b-alarm   { background:#E2445C; }
.b-neutral { background:#9AA0A6; }

.dot { width:9px; height:9px; border-radius:50%; display:inline-block; flex:none; }
.avatar { width:22px; height:22px; border-radius:50%; color:#FFF; font-size:9.5px; font-weight:700;
          display:inline-flex; align-items:center; justify-content:center; flex:none;
          letter-spacing:.02em; box-shadow:0 0 0 2px #FFF; }

/* Raster */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:22px; }
.kv .k { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.07em; font-weight:600; }
.kv .v { margin-top:4px; font-size:13.5px; }
.split { display:grid; grid-template-columns:1.6fr 1fr; gap:22px; align-items:start; }
@media (max-width:980px) { .split { grid-template-columns:1fr; } }

/* Portal-Kacheln (App-Launcher auf os.neona-living.de/) */
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px; }
.tile { display:block; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
        box-shadow:var(--shadow); padding:22px 24px; text-decoration:none; color:var(--text);
        transition:transform .12s ease, box-shadow .12s ease; }
.tile:hover { transform:translateY(-1px);
              box-shadow:0 3px 6px rgba(20,20,21,.06), 0 12px 28px rgba(20,20,21,.08); }
.tile .nm { font-weight:600; font-size:14.5px; }
.tile .desc { color:var(--muted); font-size:12.5px; margin-top:5px; }
.tile .level { margin-top:14px; }

/* App-Switcher (Komponente, gerendert von /static/switcher.js in #neona-apps) */
#neona-apps a .switch-dot { width:7px; height:7px; border-radius:50%; background:var(--muted);
                            display:inline-block; flex:none; }
#neona-apps a.active .switch-dot { background:#00C875; }