/* DataMarket backoffice — light SaaS design system (self-hosted, no build step).
   Palette: slate + indigo. Fonts: Inter (sans), Fraunces (display). */
@font-face { font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("/static/fonts/inter-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family:"Fraunces"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("/static/fonts/fraunces-latin-standard-normal.woff2") format("woff2"); }

:root{
  --bg:#f8fafc; --panel:#fff; --ink:#0f172a; --ink2:#334155; --muted:#64748b; --muted2:#94a3b8;
  --border:#e2e8f0; --soft:#eef2f7; --brand:#4f46e5; --brand700:#4338ca; --brand50:#eef2ff; --brand100:#e0e7ff;
  --shadow:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-lg:0 10px 25px -5px rgba(15,23,42,.10), 0 8px 10px -6px rgba(15,23,42,.05);
  /* data-viz + map tokens (shared with the public dashboard) */
  --grid:#eef2f7; --line:#4f46e5; --area:rgba(79,70,229,.10); --accent:#4f46e5;
  --held:#16a34a; --cancelled:#dc2626; --moved:#d97706;
  --prov:#cbd5e1; --provfill:#eef2f7; --infl:rgba(245,159,0,.16); --inflstroke:#f08c00;
}
* { box-sizing:border-box; }
html,body { height:100%; }
body { margin:0; background:var(--bg); color:var(--ink2);
  font:14px/1.5 "Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
h1,h2,h3 { color:var(--ink); }

/* ---------- app shell ---------- */
.app { display:grid; grid-template-columns:250px 1fr; min-height:100vh; }
.sidebar { background:var(--panel); border-right:1px solid var(--border); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; padding:18px 14px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:600; font-size:16px; color:var(--ink); padding:6px 8px 16px; }
.brand .mark { display:grid; place-items:center; height:32px; width:32px; border-radius:9px; background:var(--brand); color:#fff; font-size:16px; }
.brand small { display:block; font-weight:500; color:var(--muted); font-size:11px; letter-spacing:.3px; }
.nav { display:flex; flex-direction:column; gap:2px; margin-top:6px; }
.navitem { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:9px; color:var(--muted); font-weight:500; font-size:14px; cursor:pointer; }
.navitem:hover { background:var(--soft); color:var(--ink); }
.navitem.active { background:var(--brand50); color:var(--brand700); }
.navitem svg { width:18px; height:18px; stroke-width:2; }
.sidebar .foot { margin-top:auto; border-top:1px solid var(--border); padding-top:12px; }
.sidebar .foot a { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; padding:8px 11px; border-radius:9px; }
.sidebar .foot a:hover { background:var(--soft); color:var(--ink); }

.main { min-width:0; display:flex; flex-direction:column; }
.topbar { position:sticky; top:0; z-index:10; background:rgba(255,255,255,.85); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border); padding:16px 28px; }
.topbar h1 { margin:0; font-family:"Fraunces",Georgia,serif; font-size:24px; font-weight:600; letter-spacing:-.01em; }
.topbar p { margin:3px 0 0; color:var(--muted); font-size:13px; }
.content { padding:24px 28px 60px; max-width:1200px; }

/* ---------- cards ---------- */
.card { background:var(--panel); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:18px 20px; }
.card + .card, .stack > * + * { margin-top:18px; }
.card-h { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.card-h h2 { font-size:15px; font-weight:600; margin:0; }
.card-h .sub { color:var(--muted); font-size:12px; }
.section-title { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin:26px 0 10px; }

/* ---------- stat tiles ---------- */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; }
.stat { background:var(--panel); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:16px 18px; }
.stat .lbl { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12.5px; font-weight:500; }
.stat .lbl .ic { display:grid; place-items:center; height:26px; width:26px; border-radius:8px; background:var(--brand50); color:var(--brand700); }
.stat .lbl .ic svg { width:15px; height:15px; stroke-width:2; }
.stat .val { margin-top:8px; font-size:26px; font-weight:650; color:var(--ink); letter-spacing:-.01em; }
.stat .val small { font-size:15px; color:var(--muted2); font-weight:500; }
.stat .sub { margin-top:2px; color:var(--muted2); font-size:12px; }

/* ---------- tables ---------- */
.tablewrap { overflow-x:auto; border-radius:12px; border:1px solid var(--border); }
table { width:100%; border-collapse:collapse; font-size:13.5px; }
thead th { text-align:left; padding:11px 14px; background:#fbfcfe; color:var(--muted); font-weight:600;
  font-size:11px; text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid var(--border); white-space:nowrap; }
tbody td { padding:11px 14px; border-bottom:1px solid var(--soft); color:var(--ink2); vertical-align:middle; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover { background:#fbfcfe; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; color:var(--muted); }

/* ---------- badges ---------- */
.badge { display:inline-flex; align-items:center; gap:5px; border-radius:9999px; padding:2px 9px; font-size:12px; font-weight:600; white-space:nowrap; }
.badge.src { background:var(--brand50); color:var(--brand700); }
.badge.ok { background:#dcfce7; color:#15803d; }
.badge.muted { background:#f1f5f9; color:#475569; }
.axis-tourism{background:#e0f2fe;color:#0369a1}.axis-economy{background:#d1fae5;color:#047857}
.axis-media{background:#ede9fe;color:#6d28d9}.axis-environment{background:#ccfbf1;color:#0f766e}
.axis-weather{background:#fef3c7;color:#b45309}.axis-demographics{background:#ffe4e6;color:#be123c}
.axis-mobility{background:#ffedd5;color:#c2410c}.axis-context{background:#f1f5f9;color:#475569}

/* ---------- bars ---------- */
.barrow { margin:10px 0; }
.barrow .top { display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted); margin-bottom:5px; }
.bar { height:8px; background:var(--soft); border-radius:9999px; overflow:hidden; }
.bar > span { display:block; height:100%; background:var(--brand); border-radius:9999px; }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:7px; background:var(--brand); color:#fff; border:none; border-radius:10px;
  padding:9px 16px; font-size:14px; font-weight:600; cursor:pointer; transition:filter .12s; }
.btn:hover { filter:brightness(1.07); }
.btn.ghost { background:#fff; color:var(--ink2); border:1px solid var(--border); }
.btn.ghost:hover { background:var(--soft); filter:none; }
.btn-sm { padding:4px 10px; font-size:12.5px; border-radius:8px; }
.rowbtn { background:#fff; border:1px solid var(--border); color:var(--muted); border-radius:8px; padding:4px 10px; font-size:12.5px; cursor:pointer; }
.rowbtn:hover { color:var(--ink); border-color:#cbd5e1; }
.rowbtn.danger:hover { color:#dc2626; border-color:#fecaca; background:#fef2f2; }

/* ---------- forms ---------- */
.form { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); align-items:end; }
.field label { display:block; font-size:12px; font-weight:600; color:var(--ink2); margin-bottom:6px; }
.field input, .field select { width:100%; border:1px solid #cbd5e1; border-radius:10px; padding:9px 11px; font-size:14px; background:#fff; color:var(--ink); font-family:inherit; }
.field input:focus, .field select:focus { outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand); }
.msg { margin-top:12px; font-size:13px; color:var(--muted); }
.suggest { position:relative; }
.suggest .list { position:absolute; z-index:20; background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow-lg);
  margin-top:4px; width:300px; max-height:240px; overflow:auto; }
.suggest .list div { padding:9px 12px; cursor:pointer; font-size:13.5px; color:var(--ink2); }
.suggest .list div:hover { background:var(--brand50); color:var(--brand700); }
.hidden { display:none; }
.hint { color:var(--muted2); font-size:12px; }
.pos { color:#15803d; font-weight:600; } .neg { color:#dc2626; font-weight:600; }

/* ---------- breadcrumbs + page header ---------- */
.crumbs { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--muted); margin:2px 0 16px; }
.crumbs a { color:var(--muted); font-weight:500; }
.crumbs a:hover { color:var(--brand700); }
.crumbs .sep { color:var(--muted2); }
.crumbs .cur { color:var(--ink); font-weight:600; }
.page-h { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.page-h .page-title { font-family:"Fraunces",Georgia,serif; font-size:22px; font-weight:600; margin:0; letter-spacing:-.01em; }
.page-h .hint { margin:4px 0 0; }

/* ---------- series index cards ---------- */
.scards { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.scard { display:flex; flex-direction:column; gap:10px; background:var(--panel); border:1px solid var(--border);
  border-radius:16px; box-shadow:var(--shadow); padding:16px 18px; transition:box-shadow .12s, border-color .12s, transform .12s; }
.scard:hover { box-shadow:var(--shadow-lg); border-color:#cbd5e1; transform:translateY(-1px); }
.scard-h { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.scard-h h3 { margin:0; font-size:15.5px; font-weight:650; color:var(--ink); }
.scard-badges { display:flex; flex-wrap:wrap; gap:6px; }
.scard-go { margin-top:auto; color:var(--brand700); font-size:13px; font-weight:600; }

/* ---------- definition list (series config) ---------- */
.deflist { list-style:none; margin:0; padding:0; }
.deflist li { display:flex; justify-content:space-between; gap:16px; padding:10px 2px; border-bottom:1px solid var(--soft); font-size:13.5px; }
.deflist li:last-child { border-bottom:0; }
.deflist li > span:first-child { color:var(--muted); }
.deflist li > span:last-child { color:var(--ink); font-weight:500; text-align:right; }

/* ---------- modular dimension tree ---------- */
.dim-ccaa { padding:0; overflow:hidden; margin-bottom:14px; }
.dim-ccaa > summary { display:flex; align-items:center; gap:10px; flex-wrap:wrap; cursor:pointer; padding:14px 18px;
  list-style:none; font-size:15px; color:var(--ink); }
.dim-ccaa > summary::-webkit-details-marker { display:none; }
.dim-ccaa > summary::before { content:"▸"; color:var(--muted2); font-size:12px; transition:transform .12s; }
.dim-ccaa[open] > summary::before { transform:rotate(90deg); }
.dim-ccaa > summary .dim-ic { display:grid; place-items:center; height:26px; width:26px; border-radius:8px; background:var(--brand50); color:var(--brand700); }
.dim-ccaa > summary .dim-ic svg { width:15px; height:15px; stroke-width:2; }
.dim-body { padding:0 18px 14px; }
.dim-prov { border-top:1px solid var(--soft); padding:6px 0; }
.dim-prov > summary { cursor:pointer; padding:8px 2px; font-size:13.5px; color:var(--ink2); list-style:none; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dim-prov > summary::-webkit-details-marker { display:none; }
.dim-prov > summary::before { content:"▸"; color:var(--muted2); font-size:11px; transition:transform .12s; }
.dim-prov[open] > summary::before { transform:rotate(90deg); }

/* ---------- series influence: map + population summary ---------- */
.series-map { height:320px; border-radius:12px; overflow:hidden; border:1px solid var(--border); background:var(--soft); }
.series-map .leaflet-container { font:inherit; }
.pop-h { display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  margin:16px 0 6px; font-size:14px; font-weight:600; color:var(--ink); }
.pop-list { border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.pop-item { display:flex; align-items:center; gap:12px; padding:9px 13px; border-bottom:1px solid var(--soft); font-size:13.5px; }
.pop-item:last-child { border-bottom:0; }
.pop-rank { flex:0 0 auto; min-width:22px; height:22px; display:grid; place-items:center; border-radius:6px;
  background:var(--brand50); color:var(--brand700); font-size:11.5px; font-weight:700; }
.pop-name { flex:1; color:var(--ink2); }
.pop-val { color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.pop-more { padding:10px 13px; color:var(--brand700); font-weight:600; font-size:13px; cursor:pointer;
  border-bottom:1px solid var(--soft); background:#fbfcfe; }
.pop-more:hover { background:var(--brand50); }
.pop-rest .pop-item:last-child { border-bottom:0; }

/* ---------- tracked-indicator picker + async job progress ---------- */
.ind-list { display:flex; flex-direction:column; gap:14px; }
.ind-group { }
.ind-axis { margin-bottom:6px; }
.ind-item { display:flex; align-items:center; gap:9px; padding:7px 10px; border:1px solid var(--border);
  border-radius:9px; margin:5px 0; font-size:13.5px; cursor:pointer; background:#fff; }
.ind-item:hover { border-color:#cbd5e1; background:#fbfcfe; }
.ind-item input { width:16px; height:16px; accent-color:var(--brand); cursor:pointer; }
.ind-item .ind-name { flex:1; color:var(--ink2); }
.jobbox { margin-top:14px; }
.jobbar-wrap { margin:8px 0 6px; }
.jobbar { height:9px; background:var(--soft); border-radius:9999px; overflow:hidden; }
.jobbar > span { display:block; height:100%; background:var(--brand); border-radius:9999px; transition:width .4s ease; }
.jobbar.done > span { background:var(--held); } .jobbar.error > span { background:var(--cancelled); }
.job-label { font-size:12.5px; color:var(--muted); margin-top:5px; font-weight:600; }
.job-step { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink2); padding:3px 0; }
.job-dot { width:8px; height:8px; border-radius:50%; background:var(--muted2); flex:0 0 auto; }
.job-dot.running { background:var(--brand); animation:pulse 1s infinite; }
.job-dot.done { background:var(--held); } .job-dot.error { background:var(--cancelled); }
.job-dot.pending { background:var(--border); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ---------- Wikipedia panel ---------- */
.wiki-search { display:flex; gap:10px; align-items:stretch; }
.wiki-search .wk-proj { border:1px solid #cbd5e1; border-radius:10px; padding:0 30px 0 12px; font-size:13px;
  font-weight:600; background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 10px center;
  color:var(--ink2); font-family:inherit; text-transform:uppercase; letter-spacing:.4px; cursor:pointer; -webkit-appearance:none; appearance:none; }
.wiki-search .wk-proj:focus { outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand); }
.wiki-input { position:relative; flex:1; }
.wiki-input .wiki-ic { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--muted2); pointer-events:none; }
.wiki-input .wiki-ic svg { width:17px; height:17px; display:block; }
.wiki-input input { width:100%; border:1px solid #cbd5e1; border-radius:10px; padding:10px 12px 10px 38px;
  font-size:14px; background:#fff; color:var(--ink); font-family:inherit; }
.wiki-input input:focus { outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand); }
.wiki-sug { width:100% !important; padding:5px; }
.wiki-sug > div { display:flex; flex-direction:column; gap:1px; padding:8px 10px !important; border-radius:8px; cursor:pointer; }
.wiki-sug > div:hover { background:var(--brand50); }
.wiki-sug .wt { font-weight:600; color:var(--ink); font-size:13.5px; }
.wiki-sug > div:hover .wt { color:var(--brand700); }
.wiki-sug .wd { font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wiki-nores, .wiki-empty { color:var(--muted2); font-size:13px; }
.wiki-nores { padding:10px 12px; }
.wiki-empty { border:1px dashed var(--border); border-radius:10px; padding:16px; text-align:center; background:#fbfcfe; }
.wiki-list { display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.wiki-item { display:flex; align-items:center; gap:11px; padding:10px 12px; border:1px solid var(--border);
  border-radius:10px; background:#fff; transition:border-color .12s, box-shadow .12s; }
.wiki-item:hover { border-color:#cbd5e1; box-shadow:var(--shadow); }
.wiki-item .wiki-w { display:grid; place-items:center; height:26px; width:26px; border-radius:7px; flex:0 0 auto;
  background:#111827; color:#fff; font:600 14px Georgia,"Times New Roman",serif; }
.wiki-item .wiki-title { flex:1; font-weight:600; color:var(--ink); }
.wiki-item .wiki-title:hover { color:var(--brand700); text-decoration:underline; }
.wiki-item .wiki-proj { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.4px;
  color:var(--muted); background:var(--soft); border-radius:9999px; padding:2px 9px; }
.wiki-item .wiki-rm { flex:0 0 auto; height:26px; width:26px; border-radius:7px; border:1px solid transparent;
  background:transparent; color:var(--muted2); font-size:13px; cursor:pointer; line-height:1; }
.wiki-item .wiki-rm:hover { color:#dc2626; background:#fef2f2; border-color:#fecaca; }

/* ---------- public dashboard components (light) ---------- */
.wrap { max-width:1160px; margin:0 auto; padding:24px 28px 60px; }
.card h3 { font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); margin:0 0 10px; }
.controls { display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px; }
.controls label { display:block; font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:6px; }
.controls select { background:#fff; color:var(--ink); border:1px solid #cbd5e1; border-radius:10px; padding:9px 12px; font-size:14px; min-width:230px; font-family:inherit; }
.controls select:focus { outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand); }
.chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.chip { font-size:12px; background:#fff; border:1px solid var(--border); border-radius:9999px; padding:4px 11px; color:var(--muted); }
.chip.on { color:var(--brand700); border-color:var(--brand); background:var(--brand50); }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:18px; }
.kpi { background:var(--panel); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:16px 18px; }
.kpi .k { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; font-weight:500; }
.kpi .v { font-size:24px; font-weight:650; color:var(--ink); margin-top:6px; letter-spacing:-.01em; }
.kpi .s { font-size:12px; color:var(--muted2); margin-top:2px; }
.grid2 { display:grid; grid-template-columns:1fr 360px; gap:18px; align-items:start; }
@media (max-width:820px){ .grid2 { grid-template-columns:1fr; } }
.legend { display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--muted); padding:2px 2px 12px; }
.legend i { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.note { margin-top:18px; background:#fff; border:1px solid var(--border); border-left:3px solid var(--brand); border-radius:10px; padding:14px 16px; color:var(--ink2); font-size:13.5px; }
.note b { color:var(--ink); }
.profile { list-style:none; margin:6px 0 0; padding:0; }
.profile li { display:flex; justify-content:space-between; padding:9px 2px; border-bottom:1px solid var(--soft); }
.profile .pv { font-weight:600; color:var(--ink); }
.foot { color:var(--muted2); font-size:12px; margin-top:22px; }
.topnav { display:flex; gap:6px; }
.topnav a { padding:7px 13px; border-radius:9px; font-size:14px; font-weight:500; color:var(--muted); }
.topnav a.active, .topnav a:hover { color:var(--brand700); background:var(--brand50); }
#tip { position:fixed; pointer-events:none; background:#0f172a; color:#fff; border-radius:8px; padding:7px 10px; font-size:12px; opacity:0; transition:opacity .1s; z-index:50; box-shadow:var(--shadow-lg); }
#tip b { color:#a5b4fc; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .app { grid-template-columns:1fr; }
  .sidebar { position:static; height:auto; flex-direction:row; align-items:center; overflow-x:auto; padding:10px; }
  .sidebar .brand { padding:6px 10px 6px 4px; } .sidebar .nav { flex-direction:row; margin:0; }
  .sidebar .foot { margin:0 0 0 auto; border:0; padding:0; }
  .content { padding:18px; }
}