@font-face { font-family: Radio Canada Big; src: url("../assets/fonts/RadioCanadaBig-Variable.ttf") format("truetype"); }
@font-face { font-family: Inter Tight; src: url("../assets/fonts/InterTight-Variable.ttf") format("truetype"); }
:root { --navy:#004850; --ink:#162136; --muted:#71809a; --line:#e5ebf1; --canvas:#f5f8fa; --lime:#60ed09; --white:#fff; --blue:#e8f4ff; --amber:#fff2d6; --pink:#ffe8ef; }
* { box-sizing:border-box; } body { margin:0; background:var(--canvas); color:var(--ink); font:15px/1.4 Inter Tight, system-ui, sans-serif; } h1,h2,.brand { font-family:Radio Canada Big, Inter Tight, system-ui, sans-serif; } button,input { font:inherit; } button { cursor:pointer; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:242px minmax(0,1fr); }.sidebar { background:var(--navy); color:#d6e7e8; padding:28px 16px 22px; display:flex; flex-direction:column; }.brand { display:flex; align-items:center; gap:10px; margin:0 8px 44px; color:#fff; text-decoration:none; font-size:21px; font-weight:760; }.brand-mark { display:grid; place-items:center; width:32px; height:32px; border-radius:11px; background:var(--lime); color:var(--navy); font-weight:900; }.workspace-label,.eyebrow { margin:0; letter-spacing:1.4px; font-size:10px; font-weight:800; color:var(--muted); }.workspace-label { margin:0 10px 10px; color:#82a4a7; }.sidebar nav { display:grid; gap:5px; }.nav-item { display:flex; align-items:center; gap:13px; padding:11px 12px; color:#c2d6d8; border-radius:10px; text-decoration:none; font-weight:640; }.nav-item span { width:16px; text-align:center; font-size:19px; }.nav-item b { margin-left:auto; min-width:20px; padding:1px 6px; text-align:center; border-radius:999px; color:var(--navy); background:var(--lime); font-size:11px; }.nav-item.active,.nav-item:hover { color:#fff; background:rgba(255,255,255,.12); }.sidebar-footer { margin-top:auto; padding:16px 10px 0; font-size:12px; color:#d4e1e2; }.sidebar-footer small { display:block; margin:7px 0 0 18px; color:#86a8aa; }.live-dot { display:inline-block; width:8px; height:8px; margin-right:6px; border-radius:99px; background:var(--lime); box-shadow:0 0 0 4px rgba(96,237,9,.12); }
main { min-width:0; }.topbar { height:78px; display:flex; align-items:center; gap:28px; padding:0 38px; background:#fff; border-bottom:1px solid var(--line); }.search { display:flex; align-items:center; gap:10px; flex:1; max-width:530px; padding:10px 14px; border:1px solid var(--line); border-radius:11px; color:var(--muted); }.search input { min-width:0; width:100%; border:0; outline:0; color:var(--ink); }.operator { display:flex; align-items:center; gap:10px; margin-left:auto; }.operator strong,.operator small { display:block; }.operator strong { font-size:13px; }.operator small { font-size:11px; color:var(--muted); }.operator button { border:0; background:transparent; color:var(--muted); }.avatar { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#d5f7c3; color:var(--navy); font-size:12px; font-weight:800; }.mobile-menu { display:none; }
.content { max-width:1440px; padding:42px 44px 64px; }.page-title { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; margin-bottom:32px; }.page-title h1 { margin:5px 0 5px; font-size:32px; letter-spacing:-1px; }.page-title p:not(.eyebrow) { margin:0; color:var(--muted); }.outline-button,.primary-button { min-height:40px; padding:0 14px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); font-weight:700; }.primary-button { border-color:var(--navy); background:var(--navy); color:#fff; }.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin-bottom:24px; }.metrics article,.panel { background:#fff; border:1px solid var(--line); border-radius:15px; }.metrics article { position:relative; padding:20px; min-height:152px; }.metrics p { margin:17px 0 3px; color:var(--muted); font-size:13px; }.metrics strong { display:block; font-size:30px; letter-spacing:-1px; }.metrics small { color:#168350; font-size:11px; }.metric-icon { display:grid; place-items:center; width:29px; height:29px; border-radius:9px; color:var(--navy); font-weight:900; }.lime { background:#defbc8; }.blue { background:var(--blue); }.amber { background:var(--amber); }.pink { background:var(--pink); }.split-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr); gap:24px; }.panel { padding:22px; }.panel-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:15px; }.panel h2 { margin:3px 0 0; font-size:18px; letter-spacing:-.3px; }.text-button { padding:0; border:0; background:transparent; color:#07873d; font-weight:750; }.filters { display:flex; flex-wrap:wrap; gap:8px; margin:21px 0 14px; }.filter { padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--muted); font-size:12px; font-weight:700; }.filter b { margin-left:4px; }.filter.selected { border-color:#d9f5c9; background:#f1ffe9; color:#087335; }.queue-row { display:grid; grid-template-columns:34px minmax(0,1fr) auto 20px; align-items:center; gap:10px; padding:13px 0; border-top:1px solid var(--line); }.queue-row:first-child { border-top:0; }.queue-icon { display:grid; place-items:center; width:30px; height:30px; border-radius:8px; font-size:13px; font-weight:850; }.queue-row strong,.queue-row small { display:block; }.queue-row strong { font-size:13px; }.queue-row small { color:var(--muted); font-size:11px; }.queue-row time { color:var(--muted); font-size:11px; }.queue-open { border:0; background:transparent; color:var(--navy); font-size:19px; }.timeline { margin:21px 0 0; padding:0; list-style:none; }.timeline li { display:grid; grid-template-columns:12px minmax(0,1fr) auto; gap:10px; padding:0 0 22px; }.timeline li:last-child { padding-bottom:0; }.timeline-dot { width:9px; height:9px; margin-top:5px; border-radius:50%; }.green{background:#3fc44b}.blue{background:#48a6e9}.amber{background:#efae33}.pink{background:#e982a0}.timeline strong,.timeline p { display:block; margin:0; }.timeline strong { font-size:13px; }.timeline p,.timeline time { color:var(--muted); font-size:11px; }.controls-panel { margin-top:24px; }.control-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:19px; }.control-grid>div { display:flex; align-items:center; gap:11px; padding:3px 20px; border-left:1px solid var(--line); }.control-grid>div:first-child { padding-left:0; border-left:0; }.control-icon { display:grid; place-items:center; flex:0 0 31px; height:31px; border-radius:9px; background:#e9f8e1; color:var(--navy); font-weight:850; }.control-grid p { flex:1; margin:0; }.control-grid strong,.control-grid small { display:block; }.control-grid small { color:var(--muted); font-size:11px; }.status { padding:4px 7px; border-radius:999px; font-size:10px; font-weight:800; }.status.neutral { background:#edf2f5; color:#526374; }.status.warning { background:var(--amber); color:#9b6500; }
dialog { width:min(500px,calc(100% - 32px)); border:0; border-radius:16px; padding:26px; color:var(--ink); box-shadow:0 20px 70px rgba(8,30,42,.28); }.dialog-close { position:absolute; top:12px; right:14px; border:0; background:transparent; font-size:25px; color:var(--muted); }.dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:24px; } dialog::backdrop { background:rgba(0,36,40,.45); }
@media(max-width:1000px){.app-shell{grid-template-columns:72px minmax(0,1fr)}.brand span:last-child,.workspace-label,.nav-item{font-size:0}.brand{margin:0 4px 44px;justify-content:center}.nav-item{justify-content:center;padding:12px}.nav-item span{font-size:19px}.nav-item b{display:none}.sidebar-footer{font-size:0}.sidebar-footer small{display:none}.content{padding:32px 26px}.metrics{grid-template-columns:repeat(2,1fr)}.split-grid{grid-template-columns:1fr}.control-grid{grid-template-columns:1fr;gap:15px}.control-grid>div,.control-grid>div:first-child{padding:0;border:0}}
@media(max-width:620px){.app-shell{display:block}.sidebar{display:none}.topbar{height:65px;padding:0 18px;gap:12px}.mobile-menu{display:block;border:0;background:transparent;font-size:20px}.search{padding:8px 10px}.operator span:not(.avatar),.operator button{display:none}.content{padding:25px 16px}.page-title{display:block}.page-title h1{font-size:27px}.page-title .outline-button{margin-top:16px}.metrics{grid-template-columns:1fr 1fr;gap:10px}.metrics article{padding:15px;min-height:130px}.metrics strong{font-size:25px}.panel{padding:17px}.queue-row{grid-template-columns:30px minmax(0,1fr) 18px}.queue-row time{display:none}}