/* TPC-stijl (donkerblauw, witte kaarten, compact) */
:root{
  --blue:#0b3d91;
  --blue-2:#0a337a;
  --bg:#eef3fb;
  --text:#0b1220;
  --muted:#6c7788;
  --card:#ffffff;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
  --radius:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{ margin:0; font-family:system-ui,Segoe UI,Roboto,Ubuntu,Arial; color:var(--text); background:var(--bg)}

.app-header{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:linear-gradient(90deg,var(--blue),var(--blue-2)); color:#fff; position:sticky; top:0; z-index:10}
.brand{ display:flex; gap:12px; align-items:center}
.logo{ width:auto; height:52px}
.title h1{ margin:0; font-size:18px}
.subtitle{ margin:0; font-size:12px; opacity:.9}
.toolbar{ display:flex; align-items:center; flex-wrap:wrap; gap:8px}
.field{ display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.1); padding:6px 8px; border-radius:12px}
.field input{ border:0; outline:0; background:transparent; color:#fff; font-weight:600 }
.btn{ background: var(--surface); border:0; border-radius:999px; padding:8px 12px; cursor:pointer; box-shadow:var(--shadow) }
.btn-ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.5)}
.btn-small{ padding:6px 8px; font-size:12px}
.danger{ background:#ffe8e8}

.tabs{ display:flex; gap:8px; padding:8px 16px}
.tab{ border:0; background: var(--surface); padding:10px 14px; border-radius:999px; box-shadow:var(--shadow); cursor:pointer}
.tab.active{ background:#dce7ff; font-weight:700}

.tabpane{ display:none; padding:16px; gap:16px; grid-template-columns:360px 1fr}
.tabpane.active{ display:grid }
@media (max-width: 1000px){ .tabpane{ grid-template-columns:1fr } }

.panel{ background: linear-gradient(180deg, rgba(17,32,58,.65), rgba(15,28,50,.65)); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px}
.panel details{ margin:8px 0 12px}
.panel summary{ cursor:pointer; font-weight:700}
textarea{ width:100%; min-height:140px; resize:vertical; padding:10px; border-radius:12px; border:1px solid #dde3f1; font-family:ui-monospace,Consolas,Menlo}
.actions{ display:flex; gap:8px; align-items:center; margin-top:8px}
.hint{ color:var(--muted); font-size:12px}
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
.grid label{ display:flex; flex-direction:column; gap:4px; font-size:14px}

.board{ background: linear-gradient(180deg, rgba(17,32,58,.65), rgba(15,28,50,.65)); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; min-height:60vh}
.board-header{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap}
.legend{ color:var(--muted); margin:0}
.columns{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:12px}
.column{ background: var(--surface-2); border:1px dashed var(--border); border-radius:14px; min-height:120px; padding:12px; display:flex; flex-direction:column; gap:10px}
.column.locked{ opacity:.75}
.column h3{ margin:0 4px 8px; font-size:14px; color:var(--blue-2); display:flex; justify-content:space-between; align-items:center}
.counter{ font-size:12px; color:#3d4a61}

.card{ background: var(--surface); border-radius:14px; box-shadow:var(--shadow); padding:10px; display:flex; flex-direction:column; gap:8px; cursor:grab}
.card:active{ cursor:grabbing}
.card header{ display:flex; align-items:center; justify-content:space-between}
.card header strong{ font-size:14px}
.card header .kg{ font-weight:700}
.card .meta{ display:grid; grid-template-columns:1fr 1fr; gap:6px; font-size:12px; color:#3d4a61}
.card .meta dt{ font-weight:700}
.card footer{ display:flex; align-items:center; justify-content:space-between; gap:8px}
.card .chip{ display:flex; align-items:center; gap:6px; font-size:12px; padding:4px 8px; background:#eef6ff; border-radius:999px}

.table{ overflow:auto; border:1px solid #e0e7f7; border-radius:12px; max-height:260px}
.table table{ width:100%; border-collapse:collapse; font-size:13px}
.table th, .table td{ padding:6px 8px; border-bottom:1px solid #eef2fb}
.table th{ position:sticky; top:0; background:#f1f5fe; z-index:1}

.hidden{ display:none!important}

/* --- Harmonize with style_v2 dark theme --- */
.panel{ border:1px solid var(--border); color: var(--text); }
.board{ background: transparent; border:1px solid var(--border); }
.column h3{ color: var(--text); }