/* ZERO SLACK — white-label skin voor de Mia OS-shell (13-09-2026)
   Geserveerd als /theme.css (config.brandTheme), geladen NA os.css.
   Huisstijl: carbon #0A0A0A / papier #F4F3EF / acid #C6F432,
   JetBrains Mono + Archivo, scherpe hoeken, brutalistisch. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;900&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  --bg: #F4F3EF;
  --text: #0A0A0A;
  --text-dim: rgba(10, 10, 10, .58);
  --line: rgba(10, 10, 10, .22);
  --line-soft: rgba(10, 10, 10, .10);
  --accent: #0A0A0A;
  --accent-bright: #C6F432;
  --accent-soft: rgba(198, 244, 50, .28);
  --teal-50: #EDF6D4;
  --glass: rgba(244, 243, 239, .88);
  --glass-strong: rgba(244, 243, 239, .96);
  --ok: #4c7a00;
  --warn: #d4442e;
  --radius: 2px;
  --radius-lg: 4px;
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;
  --shadow-glass: 0 2px 0 rgba(10, 10, 10, .85);
  /* spectrale accenten dempen naar de huisstijl */
  --mist-rose: #E8E6DE;
  --ocean-mint: #DDF3A8;
  --sky-blue: #EDEBE4;
  --dream-violet: #E2E0D8;
  --iri-spectrum: linear-gradient(120deg, #F4F3EF, #DDF3A8, #F4F3EF, #C6F432, #F4F3EF);
  --bio-surface: linear-gradient(135deg, rgba(244,243,239,.95) 0%, rgba(237,246,212,.85) 100%);
}

::selection { background: #C6F432; color: #0A0A0A; }

body { background: var(--bg); }

/* login — Zero Slack poort */
.login { background: #0A0A0A; }
.login-card {
  background: #F4F3EF; border: 2px solid #0A0A0A; border-radius: 2px;
  box-shadow: 6px 6px 0 #C6F432;
}
.login-card h1, .login-card .login-title { font-family: var(--font-display); font-weight: 900; letter-spacing: -.03em; text-transform: uppercase; }
#login-tenant { font-family: var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(10,10,10,.6); }
.login-card input {
  border: 2px solid #0A0A0A; border-radius: 2px; background: #fff; color: #0A0A0A;
}
.login-card input:focus { outline: none; border-color: #0A0A0A; box-shadow: 0 0 0 3px rgba(198,244,50,.6); }
.login-card button, .login-card [type="submit"] {
  background: #0A0A0A; color: #F4F3EF; border: 2px solid #0A0A0A; border-radius: 2px;
  font-family: var(--font-mono); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.login-card button:hover { background: #C6F432; color: #0A0A0A; border-color: #C6F432; }
.login-logo path, .login-logo circle, .login-logo rect { fill: #0A0A0A; }

/* shell-oppervlakken strak en papierkleurig */
.menubar, .tabbar, .dock, .window-bar, .chat-panel-bar, .wl-date-label {
  background: rgba(244, 243, 239, .97) !important;
  border-color: rgba(10, 10, 10, .22);
}
.window, .mia-panel, .ai-canvas, .chat-panel, .chat-convos, .worklog-panel,
.queue-manager, .bio-glass, .live-rail-list {
  background: rgba(249, 248, 245, .98) !important;
  border: 1px solid rgba(10, 10, 10, .22);
}
.window { box-shadow: 8px 8px 0 rgba(10, 10, 10, .12); }
.app-tile .app-icon {
  background: linear-gradient(135deg, #ffffff 0%, #EDF6D4 100%) !important;
  border: 1px solid rgba(10, 10, 10, .25); border-radius: 4px;
}
.app-tile-name { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }

/* knoppen & focusstaten */
button.primary, .btn-primary { border-radius: 2px; }
a { text-decoration-color: #C6F432; }
:focus-visible { outline: 2px solid #0A0A0A; outline-offset: 2px; }

/* pastel-shader uit — rustig papier als bureaublad */
#shader-bg { display: none !important; }
body { background: var(--bg) !important; }

/* DM-banner + chat-knop in huisstijl (was WhatsApp-groen/teal) */
.wa-banner-join {
  background: #0A0A0A !important; color: #C6F432 !important; border-radius: 2px !important;
  box-shadow: 3px 3px 0 #C6F432 !important;
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em;
}
.wa-banner-join:hover { background: #C6F432 !important; color: #0A0A0A !important; }
.wa-banner-ico { color: #0A0A0A !important; }
.wa-banner-later, .wa-banner-stop { border-radius: 2px !important; border-color: rgba(10,10,10,.3) !important; }
.chat-fab {
  background: #0A0A0A !important; color: #C6F432 !important;
  border-radius: 2px !important; border: 2px solid #0A0A0A !important;
  box-shadow: 4px 4px 0 #C6F432 !important;
}
.chat-fab:hover { box-shadow: 6px 6px 0 #C6F432 !important; }
.mia-fab {
  border-radius: 2px !important;
  background: #0A0A0A !important; color: #C6F432 !important;
  border: 2px solid #0A0A0A !important;
  box-shadow: 4px 4px 0 #C6F432 !important;
}