/* ============================================================
   CommunityWeb — Unified Stylesheet
   Merged from: AssemblyWeb app.css (dark theme native)
   ============================================================ */

/* ── CSS Custom Properties (Admin theme — Cyan accent) ── */
:root {
    --bg: #0a0f0a; --bg2: #141e14; --bg3: #1e2e1e; --bg4: #2d3f2d;
    --border: rgba(76,175,80,0.12); --border2: rgba(76,175,80,0.22);
    --text: #f1f5f1; --muted: #8faa8f; --muted2: #bdd4bd;
    --green: #4caf50; --green-dim: rgba(76,175,80,0.15);
    --red: #ef4444; --red-dim: rgba(239,68,68,0.15);
    --amber: #fbbf24; --amber-dim: rgba(251,191,36,0.15);
    --blue: #60a5fa; --blue-dim: rgba(96,165,250,0.15);
    --cyan: #22e3c3;
    --purple: #c084fc; --purple-dim: rgba(192,132,252,0.15);
    --accent: #22e3c3; --accent-dim: rgba(34,227,195,0.12);
    --mono: 'JetBrains Mono',monospace;
    --sans: 'Inter',system-ui,sans-serif;
    --radius: 8px;
}

/* ── Reset & Base ── */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:#060a06; color:var(--text); font-family:var(--sans); font-size:16px; line-height:1.4; }
h1, h2, h3 { margin:0 0 8px; }
h2 { font-size:20px; }
h3 { font-size:16px; }
a { color:var(--cyan); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ── Blazor framework styles ── */
.content { padding-top:1.1rem; }
h1:focus { outline:none; }
.valid.modified:not([type=checkbox]) { outline:1px solid #26b050; }
.invalid { outline:1px solid #e50000; }
.validation-message { color:#e50000; }
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem; color: white;
}
.blazor-error-boundary::after { content: "An error has occurred."; }
.darker-border-checkbox.form-check-input { border-color: #929292; }

/* ── Main content ── */
.main { padding:16px; max-width:1200px; margin:0 auto; }

/* ── Page header ── */
.page-title { font-family:var(--mono); font-size:17px; font-weight:700; color:var(--text); margin-bottom:16px; }
.section-hdr { font-family:var(--mono); font-size:9px; letter-spacing:.18em; color:var(--muted); text-transform:uppercase; border-bottom:1px solid var(--border); padding-bottom:7px; margin-bottom:14px; }

/* ── Stat cards ── */
.cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin-bottom:24px; }
.stat-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; }
.stat-card.c-green  { border-top:2px solid var(--green); }
.stat-card.c-red    { border-top:2px solid var(--red); }
.stat-card.c-amber  { border-top:2px solid var(--amber); }
.stat-card.c-blue   { border-top:2px solid var(--blue); }
.stat-card.c-cyan   { border-top:2px solid var(--cyan); }
.stat-card.c-purple { border-top:2px solid var(--purple); }
.card-label { font-family:var(--mono); font-size:9px; letter-spacing:.12em; color:var(--muted); text-transform:uppercase; margin-bottom:8px; }
.card-value { font-family:var(--mono); font-size:24px; font-weight:700; line-height:1; margin-bottom:5px; }
.c-green  .card-value { color:var(--green); }
.c-red    .card-value { color:var(--red); }
.c-amber  .card-value { color:var(--amber); }
.c-blue   .card-value { color:var(--blue); }
.c-cyan   .card-value { color:var(--cyan); }
.c-purple .card-value { color:var(--purple); }
.card-sub { font-family:var(--mono); font-size:10px; color:var(--muted); }

/* ── Tables ── */
.table-wrap { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); overflow-x:auto; margin-bottom:24px; }
.data-table { width:100%; border-collapse:collapse; font-size:12px; }
.data-table th { background:var(--bg3); color:var(--muted); font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; padding:8px 12px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap; }
.data-table td { padding:8px 12px; border-bottom:1px solid var(--border); color:var(--muted2); font-family:var(--mono); font-size:11px; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:var(--bg3); }
.data-table a { color:var(--cyan); }

/* ── Buttons ── */
.btn { display:inline-block; padding:8px 16px; background:var(--bg3); border:1px solid var(--border2); color:var(--text); font-family:var(--mono); font-size:11px; border-radius:var(--radius); cursor:pointer; text-decoration:none; }
.btn:hover { background:var(--bg4); }
.btn-primary { background:var(--green); color:#fff; border-color:var(--green); }
.btn-danger { background:var(--red-dim); color:var(--red); border-color:var(--red); }
.btn-sm { padding:4px 10px; font-size:10px; }

/* ── Forms ── */
input[type=text], input[type=password], input[type=email], input[type=number], input[type=date], textarea, select {
    width:100%; box-sizing:border-box; padding:9px 12px; font-size:13px; font-family:var(--sans);
    background:var(--bg3); color:var(--text); border:1px solid var(--border2); border-radius:var(--radius); outline:none;
}
input:focus, textarea:focus, select:focus { border-color:var(--cyan); box-shadow:0 0 0 2px rgba(34,227,195,.15); }
select { cursor:pointer; appearance:none; -webkit-appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path d='M3 5 L7 9 L11 5' stroke='%2394a3b8' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat:no-repeat; background-position:right 12px center; padding-right:34px;
}
.form-row { margin-bottom:14px; }
.form-row label { display:block; font-family:var(--mono); font-size:11px; font-weight:600; color:var(--muted2); letter-spacing:.06em; text-transform:uppercase; margin-bottom:5px; }

/* ── Filter bar ── */
.filter-bar { display:flex; align-items:center; gap:10px; padding:10px 14px; margin:6px 0 16px; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); flex-wrap:wrap; }
.filter-bar select, .filter-bar input[type=text], .filter-bar input[type=date] { flex:1; min-width:120px; padding:8px 12px; font-size:12px; }
.filter-bar .btn { padding:8px 16px; }

/* ── Badges ── */
.badge { display:inline-block; font-family:var(--mono); font-size:8px; font-weight:700; letter-spacing:.06em; padding:2px 5px; border-radius:3px; }
.badge-ok    { background:var(--green-dim); color:var(--green); }
.badge-err   { background:var(--red-dim); color:var(--red); }
.badge-warn  { background:var(--amber-dim); color:var(--amber); }

/* ── Status ── */
.err { color:var(--red); font-weight:600; }
.ok  { color:var(--green); font-weight:600; }

/* ── Pager ── */
.pager { display:flex; align-items:center; gap:8px; padding:12px 0; font-family:var(--mono); font-size:12px; color:var(--muted2); flex-wrap:wrap; }
.pager .btn { font-size:11px; padding:5px 12px; }
.pager .btn:disabled { opacity:.35; cursor:not-allowed; }

/* ── PDA-G palette ── */
.pdag-p { color:var(--amber); } .pdag-d { color:var(--blue); } .pdag-a { color:var(--green); } .pdag-g { color:var(--purple); }

/* ── Bar chart (CSS) ── */
.bar-chart { display:flex; flex-direction:column; gap:6px; }
.bar-row { display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:10px; }
.bar-label { width:100px; color:var(--muted); text-align:right; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-track { flex:1; height:18px; background:var(--bg4); border-radius:3px; overflow:hidden; }
.bar-fill { height:100%; border-radius:3px; transition:width .4s ease; }
.bar-value { width:60px; text-align:right; flex-shrink:0; color:var(--muted2); }

/* ── Text helpers ── */
.text-muted  { color:var(--muted); }
.text-muted2 { color:var(--muted2); }
.text-green  { color:var(--green); }
.text-red    { color:var(--red); }
.text-amber  { color:var(--amber); }
.text-blue   { color:var(--blue); }
.text-cyan   { color:var(--cyan); }
.text-purple { color:var(--purple); }
.mono { font-family:var(--mono); }

/* ── Form card ── */
.form-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:18px; margin-bottom:24px; }

/* ── Two column ── */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:24px; }
@media(max-width:900px){ .two-col{grid-template-columns:1fr} }

/* ── Identity user grids ── */
.pwd-badge { display:inline-block; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.05em;
    background:var(--accent-dim); border:1px solid var(--border2); color:var(--cyan);
    padding:3px 9px; border-radius:4px; cursor:pointer; user-select:all; }
.pwd-badge:hover { background:rgba(34,227,195,.24); }
.pwd-badge.empty { background:var(--red-dim); border-color:var(--red); color:var(--red); cursor:default; }

.status-active  { color:var(--green); font-family:var(--mono); font-size:10px; }
.status-blocked { color:var(--red); font-family:var(--mono); font-size:10px; font-weight:700; }

.action-btns { display:flex; gap:6px; flex-wrap:wrap; }
.btn-mini { padding:4px 9px; font-family:var(--mono); font-size:10px; font-weight:600; border-radius:4px;
    background:var(--bg3); border:1px solid var(--border2); color:var(--text); cursor:pointer; white-space:nowrap; }
.btn-mini:hover:not(:disabled) { background:var(--bg4); }
.btn-mini:disabled { opacity:.35; cursor:not-allowed; }
.btn-mini.btn-warn  { border-color:var(--amber); color:var(--amber); }
.btn-mini.btn-red   { border-color:var(--red); color:var(--red); }
.btn-mini.btn-green { border-color:var(--green); color:var(--green); }

.msg-ok  { font-family:var(--mono); font-size:12px; color:var(--green); background:var(--green-dim);
    border:1px solid var(--green); border-radius:var(--radius); padding:9px 14px; margin-bottom:14px; }
.msg-err { font-family:var(--mono); font-size:12px; color:var(--red); background:var(--red-dim);
    border:1px solid var(--red); border-radius:var(--radius); padding:9px 14px; margin-bottom:14px; }

.count-badge { flex:0 0 auto; font-family:var(--mono); font-size:11px; color:var(--cyan);
    background:var(--accent-dim); border:1px solid var(--border2); padding:6px 12px; border-radius:var(--radius); }
.empty-row { text-align:center; padding:28px 12px !important; color:var(--muted); font-style:italic; }
.muted { color:var(--muted); }

/* ── Mobile app shell (MAUI WebView) ──────────────────────────────
   These projects render inside a MAUI WebView on a phone, so the shell is
   a sticky topbar + scrollable main + fixed bottom nav. No sidebar.
   Brand colour comes from the .topbar.layer-<name> modifier. */
.topbar { display:flex; justify-content:space-between; align-items:center; padding:10px 16px;
    color:var(--text); background:linear-gradient(90deg,#0a1a0a,#122012);
    border-bottom:1px solid rgba(34,227,195,.25); position:sticky; top:0; z-index:50;
    box-shadow:0 2px 12px rgba(0,0,0,.35); }
.topbar .brand { font-family:var(--mono); font-size:13px; font-weight:800; letter-spacing:.18em;
    color:#22e3c3; text-transform:uppercase; text-shadow:0 0 14px rgba(34,227,195,.4); }
.topbar a, .topbar span { color:var(--muted2); font-size:13px; }
.topbar a { text-decoration:none; }
.topbar.layer-community .brand     { color:#22e3c3; text-shadow:0 0 16px rgba(34,227,195,.35); }
.topbar.layer-district .brand      { color:#a855f7; text-shadow:0 0 16px rgba(168,85,247,.35); }
.topbar.layer-parliamentary .brand { color:#3b82f6; text-shadow:0 0 16px rgba(59,130,246,.35); }
.topbar .logout-btn { display:inline-block; padding:7px 16px; background:rgba(255,255,255,.06);
    color:#fff; border:1px solid rgba(255,255,255,.18); border-radius:8px; font-size:13px;
    font-weight:600; text-decoration:none; cursor:pointer; transition:all .15s; }
.topbar .logout-btn:hover { background:rgba(34,227,195,.85); border-color:rgba(34,227,195,.95); }

.main { padding:16px; padding-bottom:60px; max-width:700px; margin:0 auto; }

.bottombar { position:fixed; bottom:0; left:0; right:0; background:#0a120a;
    border-top:1px solid rgba(34,227,195,.18); display:flex; z-index:10; }
.bottombar a { flex:1; text-align:center; text-decoration:none; color:var(--muted);
    font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.1em;
    text-transform:uppercase; padding:12px 0; }
.bottombar a.active { color:#0a120a; background:#22e3c3; border-radius:6px; }
.bottombar a:active { color:#22e3c3; }
.bb-lbl { display:block; font-size:10px; margin-top:2px; }

/* Tables are the main content type here and must scroll inside their own box
   rather than forcing the page to scroll sideways on a phone. */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media (max-width:520px) {
    .main { padding:12px; padding-bottom:64px; }
    .data-table th, .data-table td { padding:6px 8px; }
    .filter-bar { gap:6px; padding:8px 10px; }
    .filter-bar select, .filter-bar input[type=text] { min-width:100px; font-size:12px; }
}