:root { --ink:#172033; --muted:#687386; --line:#e6eaf0; --canvas:#f6f7fb; --card:#fff; --purple:#6750dd; --green:#168a65; --amber:#bc7412; --red:#c94350; }
* { box-sizing:border-box; } body { margin:0; background:var(--canvas); color:var(--ink); font:14px/1.4 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.topbar { min-height:92px; display:flex; justify-content:space-between; align-items:center; padding:18px max(32px, calc((100vw - 1360px)/2)); background:#171b32; color:white; } h1,h2,p { margin:0; } h1 { font-size:23px; letter-spacing:-.4px; } h2 { font-size:17px; } .eyebrow { color:#959cc4; font-size:11px; font-weight:700; letter-spacing:1.1px; } .header-actions { display:flex; gap:10px; align-items:center; }
button,.file-label { border:0; border-radius:7px; font:inherit; cursor:pointer; padding:9px 13px; font-weight:650; } .primary { background:var(--purple); color:#fff; } .secondary { background:#fff; border:1px solid #dce0ea; color:#323a4d; } .topbar .secondary { background:transparent; color:white; border-color:#545b7b; } .file-label input { display:none; }
.admin-only.locked { opacity:.5; pointer-events:none; } .login-copy { color:var(--muted); margin-bottom:14px; } .login-error { color:var(--red); font-size:12px; margin-top:8px; }.single-action { grid-template-columns:1fr auto; }
main { max-width:1360px; margin:0 auto; padding:28px 32px 46px; } .summary { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .metric { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:17px; } .metric p { color:var(--muted); font-size:12px; font-weight:650; } .metric strong { font-size:27px; display:block; margin:6px 0 2px; } .metric small { color:var(--muted); }
.toolbar { display:flex; gap:10px; margin:26px 0 14px; align-items:center; } .search { flex:1; min-width:260px; display:flex; gap:8px; align-items:center; background:#fff; border:1px solid #dce0ea; padding:0 11px; border-radius:7px; color:#8c96a7; } input,select { font:inherit; color:var(--ink); border:1px solid #dce0ea; border-radius:6px; padding:9px; background:white; } .search input { width:100%; border:0; outline:0; padding:9px 0; } .toggle { color:#515c6f; display:flex; gap:5px; align-items:center; white-space:nowrap; }
.panel { background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; } .panel-heading { padding:18px 19px 14px; display:flex; justify-content:space-between; align-items:flex-end; } .panel-heading p { color:var(--muted); font-size:12px; margin-top:3px; } .legend { white-space:nowrap; }.dot { width:8px; height:8px; display:inline-block; border-radius:50%; margin:0 5px 0 11px; }.dot.ready{background:var(--green)}.dot.blocked{background:var(--red)}
.table-scroll { overflow-x:auto; } table { width:100%; border-collapse:collapse; min-width:900px; } th { color:#788396; background:#fbfcfe; font-size:11px; text-transform:uppercase; letter-spacing:.6px; text-align:left; padding:11px 18px; border-block:1px solid var(--line); } td { padding:13px 18px; border-bottom:1px solid var(--line); vertical-align:middle; } tr:last-child td { border:0; } .name { font-weight:700; }.sub { display:block; color:var(--muted); font-size:12px; margin-top:2px; }.badge { display:inline-block; border-radius:20px; padding:4px 9px; font-size:12px; font-weight:650; }.not-started{background:#edf0f5;color:#5e6879}.in-progress{background:#fff2da;color:#9a5d07}.migrated{background:#e7f2ff;color:#1764a7}.validated{background:#e3f6ee;color:#087451}.blocked-badge{background:#fdebed;color:#b22c39}.ready-badge{background:#e8f6f0;color:#087451}.pii-missing{background:#fff1d8;color:#92580b}.pii-ok{background:#e3f6ee;color:#087451}.edit { color:var(--purple); background:none; padding:4px; }
.lower-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }.progress-list { padding:0 19px 20px; }.progress-row { display:grid; grid-template-columns:145px 1fr 45px; gap:11px; align-items:center; margin:13px 0; }.progress-row span { font-size:12px; font-weight:650; }.progress-bar { height:8px; background:#edf0f5; border-radius:10px; overflow:hidden; }.progress-bar i { display:block; height:100%; background:var(--purple); border-radius:10px; }.progress-row em { color:var(--muted); font-size:12px; font-style:normal; text-align:right; }.attention ul, #attention-list { margin:0; padding:0 19px 15px; list-style:none; } #attention-list li { padding:10px 0; border-top:1px solid var(--line); }.attention-name { font-weight:650; }.attention-note { color:var(--muted); font-size:12px; margin-top:2px; }
dialog { border:0; border-radius:12px; padding:0; width:min(580px,calc(100vw - 24px)); box-shadow:0 18px 55px #131a354d; } dialog::backdrop { background:#0d112866; } dialog form { padding:22px; }.dialog-heading { display:flex; justify-content:space-between; align-items:start; margin-bottom:18px; }.icon-button { background:none; color:#6f7887; font-size:25px; padding:0 5px; }.dialog-heading h2 { font-size:21px; }.dialog-heading .eyebrow { color:var(--purple); } form label { display:block; color:#465166; font-size:12px; font-weight:700; margin:12px 0 0; } form input,form select { display:block; width:100%; margin-top:5px; }.hint { color:var(--muted); font-weight:400; }.two-col { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.dialog-actions { display:grid; grid-template-columns:auto 1fr auto auto; gap:9px; margin-top:22px; }.danger { background:none; color:var(--red); padding-left:0; }.danger[hidden] { display:none; }
@media(max-width:800px){ .topbar{padding:16px; align-items:flex-start;gap:14px;flex-direction:column}.header-actions{flex-wrap:wrap}main{padding:18px 16px}.summary{grid-template-columns:1fr 1fr}.toolbar{flex-wrap:wrap}.search{flex-basis:100%}.lower-grid{grid-template-columns:1fr}.progress-row{grid-template-columns:110px 1fr 38px} }