/* REACH Dashboard – Kohle-/Gesteins-Optik passend zum Logo: Schwarz, Graphit, Steinweiß */
:root{
  --bg:#050505;--side:rgba(10,10,10,.92);--card:rgba(17,17,17,.86);--card2:rgba(30,30,30,.75);
  --line:#262626;--line2:#3d3d3d;--text:#ececec;--muted:#9b9b9b;
  --accent:#e6e6e6;--accent-soft:rgba(255,255,255,.07);--accent-text:#ffffff;
  --ok:#8fcfaa;--bad:#e07a72;--gold:#d6c27a;
  --head:'Michroma','Chakra Petch',system-ui,sans-serif;--body:'IBM Plex Sans',system-ui,sans-serif;
  --stone:linear-gradient(180deg,#f4f4f4 0%,#d2d2d2 55%,#b4b4b4 100%);
}
*{box-sizing:border-box}
html{background:#050505}
body{margin:0;color:var(--text);font-family:var(--body);font-size:15px;min-height:100vh;
  background:radial-gradient(1200px 600px at 70% -10%,rgba(255,255,255,.05),transparent 60%),
    linear-gradient(180deg,rgba(5,5,5,.55) 0%,rgba(5,5,5,.92) 55%,rgba(5,5,5,.6) 100%),
    url(/static/stone.jpg) center bottom/cover no-repeat fixed,#050505}
a{color:var(--text)}a:hover{color:#fff}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hidden{display:none!important}
::selection{background:#e6e6e6;color:#000}

/* ---------- Login ---------- */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:48px 16px;
  background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.85)),url(/static/stone.jpg) center bottom/cover no-repeat}
.login-box{width:100%;max-width:460px;display:flex;flex-direction:column;align-items:center;gap:26px;text-align:center;
  padding:36px 28px;border:1px solid #2a2a2a;border-radius:14px;background:rgba(8,8,8,.72);backdrop-filter:blur(6px)}
.login-logo{width:280px;height:280px;border-radius:12px;object-fit:cover;border:1px solid #2f2f2f;box-shadow:0 20px 60px rgba(0,0,0,.7)}
.login h1{margin:0;font-family:var(--head);font-size:22px;letter-spacing:.18em;text-transform:uppercase}
.login p{margin:8px 0 0;color:var(--muted);line-height:1.55}
.btn-discord{width:100%;min-height:52px;display:flex;align-items:center;justify-content:center;gap:12px;border-radius:10px;
  background:var(--stone);color:#0a0a0a;text-decoration:none;font-weight:700;font-size:16px;letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 24px rgba(0,0,0,.6)}
.btn-discord:hover{color:#000;filter:brightness(1.06)}
.tagline{font-family:var(--head);letter-spacing:.32em;font-size:11px;color:#7d7d7d}
.alert{width:100%;padding:12px 14px;border-radius:8px;background:rgba(80,20,18,.6);border:1px solid #6b2522;color:#ffc9c4;font-size:14px}

/* ---------- Grundlayout ---------- */
.shell{min-height:100vh;display:flex;flex-wrap:wrap}
.side{flex:1 1 248px;max-width:280px;min-width:220px;padding:24px 16px;display:flex;flex-direction:column;gap:24px;
  border-right:1px solid #1f1f1f;
  background:linear-gradient(180deg,rgba(8,8,8,.9),rgba(8,8,8,.97)),url(/static/rock.jpg) center/cover}
.brand{display:flex;align-items:center;gap:12px;padding:0 8px}
.brand img{width:52px;height:52px;border-radius:8px;object-fit:cover;border:1px solid #2f2f2f}
.brand b{display:block;font-family:var(--head);font-size:15px;letter-spacing:.14em}
.brand span{font-size:11px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}
.nav{display:flex;flex-direction:column;gap:2px}
.nav button{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 14px;border-radius:8px;border:1px solid transparent;
  background:none;color:#c9c9c9;text-align:left;cursor:pointer;letter-spacing:.02em}
.nav button:hover{background:rgba(255,255,255,.05);color:#fff}
.nav button.active{background:rgba(255,255,255,.08);border-color:#3a3a3a;color:#fff;font-weight:600;
  box-shadow:inset 0 -2px 0 #e6e6e6}
.me{margin-top:auto;display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;background:rgba(20,20,20,.85);border:1px solid #2a2a2a}
.me .av{width:36px;height:36px;border-radius:50%;background:var(--stone);color:#0a0a0a;display:flex;align-items:center;justify-content:center;
  font-family:var(--head);font-size:13px}
.me small{display:block;color:var(--muted);font-size:12px}
.me form{margin-left:auto}
.linkbtn{background:none;border:0;color:var(--muted);cursor:pointer;font-size:13px;text-decoration:underline}
.linkbtn:hover{color:#fff}
.main{flex:999 1 560px;min-width:0;padding:32px clamp(16px,3vw,44px);display:flex;flex-direction:column;gap:24px}
.head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:1px solid #1f1f1f}
.eyebrow{font-size:11px;color:var(--muted);letter-spacing:.28em;text-transform:uppercase}
h1.title{margin:8px 0 0;font-family:var(--head);font-size:28px;letter-spacing:.08em;text-transform:uppercase;
  text-shadow:0 2px 18px rgba(255,255,255,.08)}
h2{margin:0;font-family:var(--head);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:#f0f0f0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px}

/* ---------- Karten ---------- */
.card{border:1px solid var(--line);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px;min-width:0;
  background:linear-gradient(180deg,rgba(22,22,22,.9),rgba(12,12,12,.94)),url(/static/rock.jpg) center/cover;
  box-shadow:0 10px 30px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04)}
.kpi .lab{font-size:11px;color:var(--muted);letter-spacing:.2em;text-transform:uppercase}
.kpi .val{font-family:var(--head);font-size:28px;letter-spacing:.04em;color:#fff}
.kpi .sub{font-size:13px;color:var(--muted)}
.ok{color:var(--ok)}.bad{color:var(--bad)}.acc{color:#fff;text-shadow:0 0 18px rgba(255,255,255,.25)}.muted{color:var(--muted)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px;border-radius:8px;background:var(--card2);border:1px solid #232323}
.row .grow{flex:1;min-width:0}
.dot{width:10px;height:10px;border-radius:50%;flex:none;background:#666}
.dot.on{background:var(--ok);box-shadow:0 0 10px rgba(143,207,170,.5)}.dot.off{background:var(--bad)}
.dot.p1{background:var(--bad)}.dot.p2{background:var(--gold)}.dot.p3{background:var(--ok)}
.bars{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;align-items:end;height:140px}
.bars div{background:#2b2b2b;border-radius:3px;min-height:4px}
.bars div.top{background:var(--stone)}
.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;font-size:11px;color:var(--muted);text-align:center;letter-spacing:.06em}
.list{display:flex;flex-direction:column}
.list .it{display:flex;flex-wrap:wrap;gap:12px;padding:10px 0;border-bottom:1px solid #222;align-items:baseline}
.list .it:last-child{border-bottom:0}

/* ---------- Reiter, Tabellen, Formulare ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tabs button{min-height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--line2);background:rgba(15,15,15,.8);
  color:#cfcfcf;font-weight:600;cursor:pointer;letter-spacing:.04em}
.tabs button:hover{border-color:#777;color:#fff}
.tabs button.active{background:var(--stone);color:#0a0a0a;border-color:#d0d0d0}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:rgba(14,14,14,.9)}
table{width:100%;border-collapse:collapse;min-width:640px}
th{text-align:left;font-size:11px;color:var(--muted);font-weight:500;padding:12px 16px;letter-spacing:.18em;text-transform:uppercase;
  border-bottom:1px solid #262626}
td{padding:10px 16px;border-top:1px solid #1d1d1d;vertical-align:middle}
tr:hover td{background:rgba(255,255,255,.02)}
input[type=number],input[type=text],input[type=search],select,textarea{min-height:40px;padding:0 10px;border-radius:8px;
  border:1px solid var(--line2);background:#0b0b0b;color:var(--text)}
input:focus,select:focus{border-color:#bdbdbd;outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.08)}
input.num{width:100px;font-family:var(--head);font-size:13px}
input.sm{width:72px;font-family:var(--head);font-size:13px}
.btn{min-height:40px;padding:0 16px;border-radius:8px;border:1px solid var(--line2);background:rgba(28,28,28,.9);color:var(--text);
  font-weight:600;cursor:pointer;letter-spacing:.02em}
.btn:hover{border-color:#8a8a8a;color:#fff}
.btn.primary{background:var(--stone);border-color:#cfcfcf;color:#0a0a0a;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.btn.primary:hover{filter:brightness(1.07);color:#000}
.btn.danger{border-color:#5b2420;color:#f0b1ab;background:rgba(40,12,11,.6)}
.btn.danger:hover{border-color:#a8433c;color:#fff}
.btn.small{min-height:32px;padding:0 10px;font-size:13px}
.form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.form label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--muted);letter-spacing:.06em}
.stack{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--muted)}
.stack select{max-width:100%}
.chip{display:inline-block;font-size:11px;padding:3px 9px;border-radius:999px;border:1px solid #444;color:#c7c7c7;letter-spacing:.04em}
.chip.warn{border-color:#6b5a24;color:var(--gold)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.pool{display:flex;flex-direction:column;gap:6px;max-height:440px;overflow:auto}
.pool .row{padding:8px 10px}
.suggest{display:flex;flex-direction:column;gap:4px;max-height:240px;overflow:auto}
.suggest button{text-align:left;background:var(--card2);border:1px solid #2a2a2a;border-radius:6px;padding:8px 10px;cursor:pointer;color:var(--text)}
.suggest button:hover{border-color:#777}
.picker{display:flex;flex-direction:column;gap:8px}
.picker input{width:100%;max-width:440px}
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:6px}
.check{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 10px;border-radius:8px;background:var(--card2);
  border:1px solid #262626;cursor:pointer;color:#ddd;font-size:14px;letter-spacing:0}
.check input{width:18px;height:18px;accent-color:#e6e6e6}

/* ---------- Shop-Bereiche & Kacheln ---------- */
.group{display:flex;flex-direction:column;gap:12px;padding-top:8px}
.group-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-bottom:8px;border-bottom:1px solid #1f1f1f}
.group-head h2{font-size:16px}
.tile-wrap{padding:0;gap:0;transition:border-color .15s,transform .15s}
.tile-wrap:hover{border-color:#6a6a6a;transform:translateY(-1px)}
.tile{display:flex;flex-direction:column;gap:8px;text-align:left;cursor:pointer;color:var(--text);font:inherit;background:none;border:0;
  padding:20px 20px 12px}
.tile-title{font-family:var(--head);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.tile-price{font-family:var(--head);font-size:20px;color:#fff;text-shadow:0 0 16px rgba(255,255,255,.15)}
.tile-actions{display:flex;flex-wrap:wrap;gap:8px;padding:0 20px 16px}
.tile.add{border:1px dashed #3d3d3d;border-radius:12px;background:rgba(12,12,12,.7);align-items:flex-start;justify-content:center;min-height:150px}
.tile.add:hover{border-color:#8a8a8a}
.is-hidden{opacity:.55;border-style:dashed}
.help{gap:6px;border-color:#333;background:linear-gradient(180deg,rgba(26,26,26,.92),rgba(14,14,14,.95)),url(/static/rock.jpg) center/cover}
.help b{font-family:var(--head);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#fff}
.help div{color:#cfcfcf}

/* ---------- Meldungen ---------- */
.toast{position:fixed;right:16px;bottom:16px;max-width:380px;padding:12px 16px;border-radius:10px;z-index:9;
  background:rgba(14,14,14,.95);border:1px solid #4a4a4a;color:#f2f2f2;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.toast.err{border-color:#7a2a24;color:#ffc9c4}

@media (max-width:700px){
  .side{max-width:none;flex-basis:100%;border-right:0;border-bottom:1px solid #1f1f1f}
  h1.title{font-size:22px}
}