:root { --ink:#003d86; --muted:#5c728b; --line:#d9e7f1; --canvas:#f4f9fc; --card:#fff; --navy:#004494; --blue:#0098d7; --blue-deep:#0070b8; --yellow:#ffcb05; --orange:#ff8500; --green:#168a65; --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; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.admin-only[hidden] { display:none !important; }
.topbar { min-height:104px; display:flex; justify-content:space-between; align-items:center; padding:14px max(32px, calc((100vw - 1360px)/2)); background:#fff; color:var(--navy); border-bottom:4px solid var(--blue); box-shadow:0 2px 12px #00449412; } .brand { display:flex; gap:18px; align-items:center; } .brand-logo { width:145px; height:72px; object-fit:contain; } h1,h2,p { margin:0; } h1 { font-size:23px; letter-spacing:-.4px; } h2 { font-size:17px; } .eyebrow { color:var(--orange); font-size:11px; font-weight:800; 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(--navy); color:#fff; box-shadow:0 2px 0 #002c64; } .primary:hover { background:var(--blue-deep); } .secondary { background:#fff; border:1px solid #b9d8e9; color:var(--navy); } .topbar .secondary { background:#fff; color:var(--navy); border-color:#9bcbe5; } .file-label input { display:none; }
.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; border-top:3px solid var(--blue); } .metric:nth-child(2) { border-top-color:var(--orange); } .metric:nth-child(3) { border-top-color:var(--yellow); } .metric:nth-child(4) { border-top-color:var(--navy); } .metric p { color:var(--muted); font-size:12px; font-weight:650; } .metric strong { color:var(--navy); 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; flex-wrap:wrap; } .search { flex:1; min-width:260px; display:flex; gap:8px; align-items:center; background:#fff; border:1px solid #b9d8e9; padding:0 11px; border-radius:7px; color:var(--blue-deep); } .filter-select { display:flex; flex-direction:column; gap:4px; color:var(--muted); font-size:12px; font-weight:700; } input,select { font:inherit; color:var(--ink); border:1px solid #b9d8e9; border-radius:6px; padding:9px; background:white; } input:focus,select:focus { outline:2px solid #ffe38a; border-color:var(--orange); } .search input { width:100%; border:0; outline:0; padding:9px 0; } .toggle { color:var(--muted); display:flex; gap:5px; align-items:center; white-space:nowrap; }
.panel { background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; box-shadow:0 2px 8px #00449408; } .panel-heading { padding:18px 19px 14px; display:flex; justify-content:space-between; align-items:flex-end; } .panel-heading h2 { color:var(--navy); } .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(--blue)}.dot.blocked{background:var(--red)}
.table-scroll { overflow-x:auto; } table { width:100%; border-collapse:collapse; min-width:900px; } th { color:var(--navy); background:#eef8fd; 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:hover td { background:#f8fcff; } tr:last-child td { border:0; } .name { color:var(--navy); 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:#edf3f7;color:#50657a}.in-progress{background:#fff3d8;color:#a25b00}.migrated{background:#e0f5ff;color:#006ba8}.validated{background:#e3f6ee;color:#087451}.blocked-badge{background:#fdebed;color:#ae2635}.ready-badge{background:#e0f5ff;color:#006ba8}.pii-missing{background:#fff3d8;color:#9a5d07}.pii-ok{background:#e3f6ee;color:#087451}.edit { color:var(--navy); 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 { color:var(--navy); font-size:12px; font-weight:650; }.progress-bar { height:8px; background:#edf5f9; border-radius:10px; overflow:hidden; }.progress-bar i { display:block; height:100%; background:linear-gradient(90deg,var(--blue),var(--navy)); 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 #003d8633; } dialog::backdrop { background:#003d8666; } dialog form { padding:22px; }.dialog-heading { display:flex; justify-content:space-between; align-items:start; margin-bottom:18px; }.icon-button { background:none; color:var(--navy); font-size:25px; padding:0 5px; }.dialog-heading h2 { font-size:21px; }.dialog-heading .eyebrow { color:var(--orange); } 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:14px 16px; align-items:flex-start;gap:14px;flex-direction:column}.brand{gap:11px}.brand-logo{width:115px;height:58px}.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} }