/* Gjallarhorn — slate/teal base shell */
:root {
  --bg:       #0b1220;
  --bg-2:     #0f172a;
  --panel:    #111827;
  --border:   #1f2937;
  --text:     #e2e8f0;
  --dim:      #94a3b8;
  --muted:    #64748b;
  --accent:   #1abc9c;
  --accent-2: #38bdf8;
  --warn:     #f59e0b;
  --err:      #ef4444;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--text);
             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif;
             -webkit-font-smoothing:antialiased; }
a { color: var(--accent); text-decoration:none; }
a:hover { color: var(--accent-2); }

.app-shell { display:grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.app-nav {
    background: linear-gradient(180deg, #0a101c 0%, #0e1829 100%);
    border-right: 1px solid var(--border);
    padding: 1rem .75rem 1rem; display:flex; flex-direction:column;
}
.app-main { padding: 0; overflow-x: hidden; }

.brand { display:flex; gap:.65rem; align-items:center; padding:.25rem .25rem 1rem; border-bottom:1px solid var(--border); margin-bottom:.75rem; }
.brand-name { font-weight:700; color:var(--text); letter-spacing:.02em; }
.brand-tag  { font-size:.72rem; color:var(--muted); }

.nav-list { list-style:none; padding:0; margin:0; flex:1; }
.nav-section { font-size:.7rem; text-transform:uppercase; color:var(--muted);
               letter-spacing:.08em; margin:1rem .5rem .3rem; }
.nav-list li a { display:flex; gap:.55rem; align-items:center;
                 color:var(--dim); padding:.45rem .6rem; border-radius:.35rem;
                 font-size:.92rem; transition: background .08s, color .08s; }
.nav-list li a:hover { background:rgba(26,188,156,.08); color:var(--text); }
.nav-list li a i { width:1em; text-align:center; }

.nav-foot { border-top:1px solid var(--border); padding-top:.75rem; font-size:.85rem; color:var(--dim); }
.nav-foot .who { display:flex; gap:.5rem; align-items:center; margin-bottom:.4rem; }
.nav-foot .logout { display:flex; gap:.4rem; align-items:center; color:var(--muted); font-size:.8rem; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:.4rem;
       background:#1e293b; color:var(--text); border:1px solid #334155;
       padding:.45rem .85rem; border-radius:.4rem; cursor:pointer;
       font-size:.9rem; transition:background .08s; text-decoration:none; }
.btn:hover { background:#273344; color:var(--text); }
.btn-primary   { background:var(--accent); border-color:var(--accent); color:#052c26; font-weight:600; }
.btn-primary:hover { background:#25d4af; color:#052c26; }
.btn-secondary { background:#1e293b; }

/* Forms */
input, select, textarea {
    background:#0f172a; color:var(--text); border:1px solid #334155;
    padding:.45rem .65rem; border-radius:.35rem; font-size:.9rem;
    font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow: 0 0 0 2px rgba(26,188,156,.15); }

/* Login page */
.login-wrap { min-height:100vh; display:grid; place-items:center; background:
              radial-gradient(circle at top left, rgba(26,188,156,.15), transparent 40%),
              radial-gradient(circle at bottom right, rgba(56,189,248,.1), transparent 45%),
              var(--bg); }
.login-card { background:var(--panel); border:1px solid var(--border); border-radius:.6rem;
              padding:2rem; width: 360px; max-width: 90vw; }
.login-card h1 { margin: 0 0 .1rem; font-size:1.4rem; color:var(--text); letter-spacing:.02em; }
.login-card .tag { color:var(--muted); font-size:.85rem; margin-bottom:1.2rem; }
.login-card form { display:flex; flex-direction:column; gap:.6rem; }
.login-card label { font-size:.75rem; color:var(--dim); text-transform:uppercase; letter-spacing:.06em; }
.login-card .err { background:#3f1515; color:#fecaca; border:1px solid #7f1d1d;
                   padding:.4rem .6rem; border-radius:.3rem; font-size:.85rem; }

/* Dashboard */
.dash { padding: 1.5rem; }
.dash h1 { margin-top:0; }
.dash-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:1rem; }
.kpi { background:var(--panel); border:1px solid var(--border); border-radius:.5rem; padding:1rem; }
.kpi .label { font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.kpi .value { font-size:1.7rem; color:var(--text); font-weight:600; margin-top:.3rem; }
.kpi .sub   { font-size:.8rem; color:var(--dim); margin-top:.2rem; }