:root { --bg:#f3f5f9; --card:#fff; --ink:#1d2433; --muted:#6b7488; --brand:#0b5cab; --line:#e3e7ef; }
* { box-sizing: border-box; }
body { margin:0; font-family:"Segoe UI",system-ui,sans-serif; background:var(--bg); color:var(--ink); font-size:14px; }
.dash { padding:20px 24px; max-width:1600px; margin:0 auto; }
.dash-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:16px; }
.dash-header h1 { margin:0; font-size:24px; font-weight:600; }
.dash-header p { margin:2px 0 0; color:var(--muted); }
.role-picker label { display:block; font-size:11px; color:var(--muted); }
.host-msg { background:#e8f1fb; border:1px solid #bcd6f1; padding:8px 12px; border-radius:6px; margin-bottom:12px; }
.grid { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:150px; gap:16px; }
.widget { background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:0 1px 3px rgba(20,30,60,.06); display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; }
.widget-head { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--line); }
.widget-head h3 { margin:0; font-size:13px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; flex:1; }
.badge-sample { font-size:10px; background:#fff4d6; color:#8a6100; padding:2px 6px; border-radius:10px; }
.icon-btn { border:0; background:none; cursor:pointer; color:var(--muted); font-size:16px; }
.widget-body { padding:14px; flex:1; min-height:0; overflow:auto; }
.state { color:var(--muted); text-align:center; padding:16px 0; }
.state.error { color:#b3261e; }
.kpi.clickable, .actions li.clickable { cursor:pointer; }
.kpi.clickable:hover .kpi-value { color:var(--brand); }
.kpi-value { font-size:32px; font-weight:600; }
.kpi-caption { color:var(--muted); }
.kpi-trend { margin-top:6px; font-size:12px; color:#1b7f4b; }
.bar-row { display:flex; align-items:center; gap:10px; margin:8px 0; }
.bar-label { width:80px; color:var(--muted); }
.bar-track { flex:1; background:#eef1f7; border-radius:4px; height:12px; }
.bar-fill { background:var(--brand); height:100%; border-radius:4px; }
.bar-value { width:70px; text-align:right; }
.tabs { display:flex; gap:6px; margin-bottom:8px; }
.tabs button, .quick button { border:1px solid var(--line); background:#fff; padding:5px 10px; border-radius:16px; cursor:pointer; }
.tabs button.active, .quick button:hover { background:var(--brand); color:#fff; border-color:var(--brand); }
.quick { display:flex; gap:10px; flex-wrap:wrap; }
.actions { list-style:none; margin:0; padding:0; }
.actions li { display:flex; gap:10px; align-items:center; padding:8px 4px; border-bottom:1px solid var(--line); }
.actions li.clickable:hover { background:#f6f9fd; }
.grow { flex:1; }
.a-title { font-weight:600; }
.a-sub { font-size:12px; color:var(--muted); }
.prio { font-size:11px; padding:2px 8px; border-radius:10px; }
.prio-high { background:#fde4e1; color:#b3261e; }
.prio-medium { background:#fff0d1; color:#8a6100; }
.prio-low { background:#e3f1e8; color:#1b7f4b; }
#blazor-error-ui { display:none; }

/* Column and pie charts */
.cols { display:flex; align-items:stretch; gap:10px; height:100%; min-height:90px; }
.col-item { flex:1; min-width:28px; display:flex; flex-direction:column; align-items:center; gap:4px; }
.col-track { flex:1; width:100%; display:flex; align-items:flex-end; background:#eef1f7; border-radius:4px; min-height:40px; }
.col-fill { width:100%; background:var(--brand); border-radius:4px; }
.col-value { font-size:11px; }
.col-label { font-size:11px; color:var(--muted); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pie-wrap { display:flex; align-items:center; gap:18px; }
.pie { width:110px; height:110px; border-radius:50%; flex:none; }
.pie-legend { list-style:none; margin:0; padding:0; font-size:13px; }
.pie-legend li { margin:4px 0; }
.pie-legend .dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; }

/* Data grid widget */
.data-grid { border-collapse:collapse; width:100%; font-size:13px; }
.data-grid th { position:sticky; top:0; background:#f3f5f9; text-align:left; padding:6px 10px; border-bottom:1px solid var(--line); color:var(--muted); font-weight:600; white-space:nowrap; }
.data-grid td { padding:6px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
.data-grid tbody tr:hover { background:#f6f9fd; }

/* Buttons and form controls */
.btn { border:1px solid var(--line); background:#fff; padding:6px 14px; border-radius:6px; cursor:pointer; font:inherit; }
.btn:hover { border-color:var(--brand); }
.btn.primary { background:var(--brand); color:#fff; border-color:var(--brand); }
.btn.danger { color:#b3261e; border-color:#e8b4b0; }
.btn.small { padding:2px 8px; font-size:12px; }
.muted { color:var(--muted); }
.cust-msg { color:var(--muted); margin-left:8px; }

/* Customise page */
.cust-bar { display:flex; gap:8px; align-items:center; margin-bottom:12px; }
.cust-layout { display:grid; grid-template-columns:260px 1fr; gap:16px; align-items:start; }
.cust-palette { background:var(--card); border:1px dashed var(--line); border-radius:10px; padding:12px; position:sticky; top:12px; }
.cust-palette h3 { margin:0 0 8px; font-size:13px; color:var(--muted); text-transform:uppercase; }
.cust-chip { display:flex; flex-direction:column; gap:2px; border:1px solid var(--line); border-radius:8px; padding:8px; margin-bottom:8px; cursor:grab; background:#fafbfd; }
.cust-chip small { color:var(--muted); }
.cust-chip .btn { align-self:flex-start; margin-top:4px; }
.cust-grid { min-height:300px; padding:8px; border:1px dashed var(--line); border-radius:10px; }
.cust-card { position:relative; cursor:grab; user-select:none; }
.cust-card.dragging { opacity:.4; }
.cust-card-head { display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--line); }
.cust-card-head strong { flex:1; }
.cust-grip { color:var(--muted); }
.cust-card-body { padding:12px; color:var(--muted); }
.rs-handle { position:absolute; right:2px; bottom:2px; width:18px; height:18px; cursor:nwse-resize; touch-action:none;
  background:linear-gradient(135deg, transparent 50%, var(--brand) 50%, var(--brand) 60%, transparent 60%, transparent 75%, var(--brand) 75%, var(--brand) 85%, transparent 85%); }

/* Widget admin page */
.adm { display:grid; grid-template-columns:260px minmax(0,1fr); gap:20px; align-items:start; }
.adm-list { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px; }
.adm-list ul { list-style:none; margin:12px 0 0; padding:0; }
.adm-list li { display:flex; flex-direction:column; padding:8px; border-radius:6px; }
.adm-list li.sel { background:#e8f1fb; }
.adm-list li a { color:var(--ink); text-decoration:none; font-weight:600; }
.adm-list li small { color:var(--muted); }
.adm-form { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px 20px; max-width:900px; }
.adm-form h2 { margin:0 0 12px; font-size:18px; }
.adm-form fieldset { border:1px solid var(--line); border-radius:8px; margin:14px 0; padding:10px 14px 14px; }
.adm-form legend { padding:0 6px; color:var(--muted); font-size:12px; text-transform:uppercase; }
.f-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px; }
.f-grid.size { grid-template-columns:repeat(3,minmax(0,1fr)); }
.f-grid .span2 { grid-column:1 / -1; }
.adm-form label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); }
.adm-form label.chk { flex-direction:row; align-items:center; gap:6px; color:var(--ink); font-size:14px; }
.adm-form input:not([type=checkbox]), .adm-form select, .adm-form textarea { width:100%; padding:6px 8px; border:1px solid var(--line); border-radius:6px; font:inherit; color:var(--ink); background:#fff; }
.adm-form textarea { font-family:Consolas,monospace; resize:vertical; }
.roles { display:flex; gap:20px; flex-wrap:wrap; }
.adm-actions { display:flex; gap:8px; align-items:center; margin-top:8px; }
.adm-table { border-collapse:collapse; margin-top:14px; width:100%; }
.adm-table th, .adm-table td { border:1px solid var(--line); padding:4px 8px; text-align:left; }
.adm-table th { background:#f3f5f9; }
@media (max-width:900px) { .cust-layout, .adm { grid-template-columns:1fr; } }