/* R-060: dashboardstijl-fundament (Fase G). Donkere basis met paars/roze/
   cyaan-neon-accenten en glasachtige kaarten — stijlrichting, geen
   letterlijke kopie van een moodboard. Glow is bewust beperkt tot
   showcase-oppervlakken (.surface-glow, o.a. Home); data-zware schermen
   (scrumboard, folderstructuur, logs, audit-log) gebruiken .surface-calm:
   dezelfde donkere kleurenfamilie, maar rustiger voor leesbaarheid bij
   dagelijks gebruik. */
:root {
  --bg-deep: #0a0a13;
  --bg-panel: #14141f;
  --bg-panel-raised: #1b1b29;
  --border-subtle: rgba(255, 255, 255, .09);
  --border-glow: rgba(185, 103, 255, .45);
  --text-primary: #f1eef7;
  --text-muted: #9891ab;
  --text-faint: #6f6885;
  --accent-purple: #b967ff;
  --accent-pink: #ff5ec4;
  --accent-cyan: #4ff0ff;
  --accent-green: #5eeba0;
  --accent-orange: #ffb86b;
  --accent-red: #ff6b6b;
  --glow-shadow: 0 0 1px rgba(255, 255, 255, .06), 0 0 28px rgba(185, 103, 255, .25), 0 0 56px rgba(255, 94, 196, .12);
}

* { box-sizing: border-box; }

body {
  font-family: system-ui, sans-serif;
  margin: 0;
  padding: 0 1.25rem 2rem;
  color: var(--text-primary);
  background: radial-gradient(1200px 600px at 15% -10%, rgba(185, 103, 255, .12), transparent),
              radial-gradient(1000px 500px at 100% 0%, rgba(79, 240, 255, .08), transparent),
              var(--bg-deep);
  min-height: 100vh;
}

a { color: var(--accent-cyan); }

header {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 1.25rem 0; border-bottom: 1px solid var(--border-subtle);
}
h1 { font-size: 1.3rem; margin: 0; background: linear-gradient(90deg, var(--accent-purple), var(--accent-pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
section { margin-top: 1.5rem; background: rgba(255, 255, 255, .025); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 1rem 1.25rem; }
#login-section { max-width: 360px; margin: 4rem auto; }
h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-top: 0; }
h3 { color: var(--text-primary); }

/* Glas-oppervlak: basis voor beide varianten. */
.surface-glow, .surface-calm {
  background: rgba(255, 255, 255, .03);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
}
.surface-glow {
  border-color: var(--border-glow);
  box-shadow: var(--glow-shadow);
}
.surface-calm { box-shadow: none; }

/* R-060: minimale Home-hero (fundament voor het volledige widget-grid uit
   R-061) — de showcase-behandeling van dit fundament. */
#home-section { padding: 2rem 1.75rem; }
#home-section h2 { color: var(--accent-cyan); }
#home-hero-title { font-size: 1.6rem; margin: .25rem 0 .5rem; background: linear-gradient(90deg, var(--accent-purple), var(--accent-pink), var(--accent-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
#home-hero-sub { color: var(--text-muted); margin: 0 0 1.25rem; max-width: 640px; }
/* R-068: twee bewuste TBD-placeholders staan tussen de al toegewezen
   widget-vakken in dezelfde grid (R-061 doet de definitieve indeling). */
#home-widget-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .85rem; }
.home-widget {
  padding: 1rem; border-radius: 10px; min-height: 90px;
  background: rgba(255, 255, 255, .03); border: 1px dashed var(--border-subtle);
  display: flex; flex-direction: column; gap: .35rem;
}
.home-widget-badge {
  align-self: flex-start; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent-cyan); background: rgba(79, 240, 255, .12); padding: .1rem .5rem; border-radius: 999px;
}
.home-widget-title { margin: 0; color: var(--text-primary); font-size: .9rem; }
.home-widget-note { margin: 0; color: var(--text-faint); font-size: .75rem; }
.home-widget-placeholder { opacity: .6; }
#home-widget-agents, #home-widget-research, #home-widget-news { border-style: solid; border-color: var(--border-glow); }
#news-tabs { display: flex; gap: .4rem; margin-bottom: .4rem; }
.news-tab { font-size: .7rem; padding: .2rem .5rem; }
.news-tab.active { color: var(--accent-cyan); border-color: var(--accent-cyan); }
.news-list { list-style: none; margin: 0; padding: 0; font-size: .78rem; }
.news-list li { padding: .2rem 0; border-bottom: 1px solid var(--border-subtle); }
.news-list a { color: var(--text-primary); }
#news-competitor-empty, #news-industry-empty { color: var(--text-faint); font-size: .78rem; }

#userbackend-tabs { display: flex; gap: .5rem; margin-bottom: 1rem; }
.userbackend-tab { padding: .4rem .9rem; }
.userbackend-tab.active { color: var(--accent-cyan); border-color: var(--accent-cyan); }
.userbackend-panel h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-top: 0; }
#home-pinned-agents-list { list-style: none; margin: 0; padding: 0; font-size: .8rem; }
#home-pinned-agents-list li { padding: .15rem 0; color: var(--text-primary); }
#home-research-report { font-size: .8rem; margin-bottom: .5rem; }
#home-research-report a { display: block; font-weight: 600; margin-bottom: .15rem; }
#home-research-report p { margin: 0; color: var(--text-muted); }
#home-research-form { display: flex; gap: .4rem; }
#home-research-input { flex: 1; padding: .3rem; }
.pin-button { background: none; border: 1px solid var(--border-subtle); }
.pin-button.pinned { color: var(--accent-cyan); border-color: var(--accent-cyan); }

input, select, textarea, button {
  font-family: inherit; color: var(--text-primary); background: var(--bg-panel-raised);
  border: 1px solid var(--border-subtle); border-radius: 6px;
}
button { cursor: pointer; padding: .4rem .8rem; }
button:hover { border-color: var(--accent-purple); }
input::placeholder { color: var(--text-faint); }

#user-action-section ul { background: rgba(255, 184, 107, .08); border: 1px solid var(--accent-orange); border-radius: 6px; padding: .75rem 1.25rem; }
#user-action-section li { margin: .25rem 0; }
.user-action-form { margin: .3rem 0 .6rem; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.user-action-form input { padding: .3rem; flex: 1; min-width: 140px; }
.ua-status { font-size: .8rem; color: var(--text-muted); }
li.ua-done { opacity: .6; }

/* Scrumboard: data-zware kern van de app — dezelfde donkere familie als de
   rest, maar bewust rustig (surface-calm) zodat kaarten de hele dag
   leesbaar blijven zonder gloed-vermoeidheid. */
#status-columns { display: flex; gap: 1rem; overflow-x: auto; }
.status-column { min-width: 180px; padding: .75rem; }
.status-column h3 { font-size: .85rem; margin: 0 0 .5rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.status-column ul { list-style: none; margin: 0; padding: 0; font-size: .85rem; }
.status-column li { padding: .3rem 0; border-bottom: 1px solid var(--border-subtle); }
.status-column.drag-over { outline: 2px dashed var(--accent-cyan); outline-offset: -2px; }
.draggable-card { cursor: grab; touch-action: none; user-select: none; }
.dragging-source { opacity: .35; }
.drag-ghost { position: fixed; pointer-events: none; opacity: .95; z-index: 1000; list-style: none; background: var(--bg-panel-raised); border: 1px solid var(--border-glow); border-radius: 4px; padding: .3rem .5rem; box-shadow: 0 2px 12px rgba(0,0,0,.5); font-size: .85rem; color: var(--text-primary); }
.card-item { cursor: pointer; }
.card-detail-panel { margin-top: .4rem; padding: .5rem; background: rgba(255,255,255,.03); border: 1px solid var(--border-subtle); border-radius: 4px; font-size: .8rem; }
.card-detail-panel h4 { margin: .5rem 0 .25rem; font-size: .75rem; text-transform: uppercase; color: var(--text-muted); }
.card-detail-panel ul { list-style: none; margin: 0 0 .3rem; padding: 0; }
.card-detail-panel li { padding: .15rem 0; border: none; }
.card-detail-checklist label { display: block; padding: .1rem 0; }
.card-detail-comment-form, .card-detail-attach-form { display: flex; gap: .3rem; margin-top: .2rem; flex-wrap: wrap; }
.card-detail-comment-form input, .card-detail-attach-form input { flex: 1; min-width: 100px; padding: .2rem; }
#logboek-list { font-size: .9rem; padding-left: 1.2rem; color: var(--text-muted); }
#filter-bar { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
#filter-bar input, #filter-bar select { padding: .3rem; }
li.card-item[hidden] { display: none; }
.repo-tree, .repo-tree ul { list-style: none; margin: 0; padding-left: 1.1rem; }
.repo-tree { padding-left: 0; }
.repo-tree li { padding: .1rem 0; border: none; font-size: .85rem; color: var(--text-muted); }
.brain-graph-wrap { padding: .5rem 0; }
.brain-graph-canvas { max-width: 100%; border: 1px solid var(--border-glow); border-radius: 8px; }
#new-project-dialog { border: 1px solid var(--border-glow); border-radius: 10px; padding: 1.25rem; max-width: 420px; width: 90%; background: var(--bg-panel-raised); color: var(--text-primary); box-shadow: var(--glow-shadow); }
#new-project-dialog::backdrop { background: rgba(5, 5, 10, .65); }
#new-project-form label { display: block; margin-top: .6rem; font-size: .85rem; color: var(--text-muted); }
#new-project-form input, #new-project-form select, #new-project-form textarea { width: 100%; padding: .4rem; box-sizing: border-box; }
#new-project-open-button { margin-bottom: .75rem; }

.caveat { font-size: .8rem; color: var(--text-faint); font-style: italic; }
.budget-bar-wrap { margin-bottom: .75rem; }
.budget-bar-track { background: rgba(255,255,255,.06); border-radius: 4px; height: 10px; overflow: hidden; }
.budget-bar-fill { height: 100%; background: var(--accent-green); }
.budget-bar-fill.warn { background: var(--accent-orange); }
.budget-bar-fill.over { background: var(--accent-red); }
#control-section input { padding: .4rem; margin-right: .5rem; }
#control-section button:disabled, #control-section input:disabled { opacity: .5; cursor: not-allowed; }

#agents-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
#agents-table th, #agents-table td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--border-subtle); }
.agent-status-beschikbaar { color: var(--accent-green); }
.agent-status-bezig { color: var(--accent-orange); font-weight: 600; }
.agent-status-ok { color: var(--accent-green); }
.agent-status-fout { color: var(--accent-red); font-weight: 600; }
.agent-status-gepauzeerd { color: var(--text-faint); font-style: italic; }
.agent-result { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#noodstop-bar { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
#noodstop-button { background: var(--accent-red); color: #1a0505; border: none; border-radius: 6px; padding: .4rem .8rem; font-weight: 700; cursor: pointer; }
#noodstop-button:disabled { opacity: .5; cursor: not-allowed; }
#agent-start-dialog { border: 1px solid var(--border-glow); border-radius: 10px; padding: 1.25rem; max-width: 380px; width: 90%; background: var(--bg-panel-raised); color: var(--text-primary); box-shadow: var(--glow-shadow); }
#agent-start-dialog::backdrop { background: rgba(5, 5, 10, .65); }
#agent-start-form input { width: 100%; padding: .4rem; box-sizing: border-box; margin-top: .3rem; }

#schedule-dialog { border: 1px solid var(--border-glow); border-radius: 10px; padding: 1.25rem; max-width: 380px; width: 90%; background: var(--bg-panel-raised); color: var(--text-primary); box-shadow: var(--glow-shadow); }
#schedule-dialog::backdrop { background: rgba(5, 5, 10, .65); }
#schedule-form label { display: block; margin-top: .6rem; font-size: .85rem; color: var(--text-muted); }
#schedule-form input, #schedule-form select { width: 100%; padding: .4rem; box-sizing: border-box; }
#schedules-table { width: 100%; border-collapse: collapse; font-size: .85rem; margin-top: .5rem; }
#schedules-table th, #schedules-table td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--border-subtle); }

#errors-table { width: 100%; border-collapse: collapse; font-size: .85rem; margin-top: .5rem; }
#errors-table th, #errors-table td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--border-subtle); }
#errors-table td:nth-child(4) { color: var(--accent-red); }

#health-table { width: 100%; border-collapse: collapse; font-size: .85rem; margin-top: .5rem; }
#health-table th, #health-table td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--border-subtle); }
.health-badge { font-weight: 600; padding: .15rem .5rem; border-radius: 4px; }
.health-badge-groen { color: #0d3d24; background: var(--accent-green); }
.health-badge-rood { color: #430f0f; background: var(--accent-red); }
.health-row.health-rood { background: rgba(255, 107, 107, .06); }

#search-form { display: flex; gap: .5rem; margin-bottom: .5rem; }
#search-input { flex: 1; padding: .4rem; box-sizing: border-box; }
.search-category h3 { margin-bottom: .25rem; }
.search-category ul { list-style: none; padding: 0; margin: 0 0 .75rem 0; }
.search-category li { padding: .3rem 0; border-bottom: 1px solid var(--border-subtle); }
.search-category .search-snippet { color: var(--text-muted); font-size: .85rem; }
.search-category .search-error { color: var(--accent-red); font-size: .85rem; }
#search-empty { color: var(--text-muted); font-style: italic; }

@media (max-width: 480px) {
  #status-columns { flex-direction: column; }
  .status-column { min-width: 0; }
}