/* Shared chrome for every MSEDCL page — masthead, theme tokens, light mode. * * Two audiences, deliberately separated: * * 1. #msedclNav — the government masthead injected by ui.js on every page. * Self-contained: it never depends on a variable the host page defines, * so it looks identical on all four screens. * * 2. body.legacy-ui — the two voice-test pages (inbound and outbound call). * Those were written dark-first with literal hex values, so light mode for * them is expressed as variable overrides plus a short list of !important * patches. Scoping the whole block to that class is what lets the Command * Center own its own palette without fighting these rules: it is not a * legacy page, so none of this applies to it. * * The visual language is Government of Maharashtra: an Ashoka-blue masthead * band under a tricolour hairline, white content, and restrained accents. */ /* ── government identity band ────────────────────────────────────────────── */ #msedclNav{ position:sticky;top:0;z-index:100; font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif; background:#0b2653; border-bottom:3px solid #0a1f42; /* Tricolour hairline. Rendered as a background gradient rather than an extra element so no page has to add markup for it. */ background-image:linear-gradient(90deg,#ff9933 0 33.33%,#ffffff 33.33% 66.66%,#138808 66.66% 100%); background-size:100% 3px;background-repeat:no-repeat;background-position:top left; padding:3px 0 0; } #msedclNav .mn-inner{ display:flex;align-items:center;gap:16px; padding:9px 20px;max-width:1900px;margin:0 auto; } #msedclNav .mn-brand{display:flex;align-items:center;gap:10px;flex-shrink:0;min-width:0} #msedclNav .mn-mark{ width:30px;height:30px;border-radius:50%;flex:none; background:linear-gradient(160deg,#ff9933,#e8730c); display:grid;place-items:center;font-weight:800;color:#3d1f00;font-size:15px; box-shadow:0 0 0 2px #ffffff2e; } #msedclNav .mn-titles{min-width:0;line-height:1.25} #msedclNav .mn-title{ display:block;font-weight:700;color:#ffffff;font-size:13px; letter-spacing:.01em;white-space:nowrap; } #msedclNav .mn-sub{ display:block;font-size:10px;color:#9fb6d8;font-weight:500; letter-spacing:.03em;white-space:nowrap; } #msedclNav .mn-links{display:flex;gap:3px;flex:1;overflow-x:auto;scrollbar-width:none;justify-content:flex-end} #msedclNav .mn-links::-webkit-scrollbar{display:none} #msedclNav .mn-link{ display:inline-flex;align-items:center;gap:6px; padding:7px 13px;border-radius:6px;text-decoration:none;white-space:nowrap; color:#c3d4ec;border:1px solid transparent;transition:.15s; font-weight:600;font-size:12.5px; } #msedclNav .mn-link:hover{color:#fff;background:#ffffff1a} #msedclNav .mn-link.on{color:#0b2653;background:#ffffff;border-color:#ffffff} #msedclNav .mn-theme{ flex-shrink:0;width:31px;height:31px;border-radius:6px;cursor:pointer; background:#ffffff1a;border:1px solid #ffffff33;color:#fff;font-size:14px; line-height:1;display:grid;place-items:center;transition:.15s;padding:0; } #msedclNav .mn-theme:hover{background:#ffffff2e;border-color:#ffffff66} @media(max-width:760px){ #msedclNav .mn-sub{display:none} #msedclNav .mn-link{padding:6px 9px;font-size:11.5px} } @media(max-width:520px){#msedclNav .mn-titles{display:none}} /* Pages with sticky headers of their own must sit below the masthead. */ [data-theme] header{z-index:20} /* ═══════════════════════════════════════════════════════════════════════════ LEGACY VOICE PAGES — light theme Applies only to (the inbound and outbound call test screens). The Command Center defines its own complete palette. ═══════════════════════════════════════════════════════════════════════════ */ :root[data-theme="light"] body.legacy-ui{ --bg:#f4f7fb; --bg2:#eaf0f7; --panel:#ffffff; --panel2:#f1f5f9; --panel-solid:#ffffff; --line:#dbe3ee; --line2:#c7d3e2; --fg:#0f172a; --fg2:#475569; --fg3:#64748b; --txt:#0f172a; --dim:#52627a; --accent:#b45309; --accent2:#4f46e5; --blue:#2563eb; --ok:#15803d; --warn:#b45309; --bad:#b91c1c; --err:#b91c1c; --crit:#be123c; --info:#0369a1; --t1:#0284c7; --t2:#7c3aed; --t3:#b45309; --sh:0 1px 2px #0f172a14, 0 6px 20px #0f172a14; background:var(--bg);color:var(--fg); } /* borders written as literals across those pages */ :root[data-theme="light"] body.legacy-ui header, :root[data-theme="light"] body.legacy-ui .card, :root[data-theme="light"] body.legacy-ui .controls, :root[data-theme="light"] body.legacy-ui .card h2, :root[data-theme="light"] body.legacy-ui .card h3, :root[data-theme="light"] body.legacy-ui nav, :root[data-theme="light"] body.legacy-ui th{border-color:var(--line) !important} :root[data-theme="light"] body.legacy-ui td{border-bottom-color:#e8eef6 !important} :root[data-theme="light"] body.legacy-ui tbody tr:hover{background:#f3f7fc !important} :root[data-theme="light"] body.legacy-ui th{background:var(--panel) !important;color:var(--fg3) !important} :root[data-theme="light"] body.legacy-ui .ev, :root[data-theme="light"] body.legacy-ui .sr, :root[data-theme="light"] body.legacy-ui .stat, :root[data-theme="light"] body.legacy-ui .kpi, :root[data-theme="light"] body.legacy-ui .drop, :root[data-theme="light"] body.legacy-ui #meterBar, :root[data-theme="light"] body.legacy-ui #tkMeter{ background:var(--panel2) !important;border-color:var(--line) !important; } :root[data-theme="light"] body.legacy-ui .msg.agent{background:#eef2f8 !important;color:var(--fg) !important} :root[data-theme="light"] body.legacy-ui .msg.user{background:var(--blue) !important;color:#fff !important} :root[data-theme="light"] body.legacy-ui .msg.human{background:var(--blue) !important;color:#fff !important} :root[data-theme="light"] body.legacy-ui input[type=text], :root[data-theme="light"] body.legacy-ui input:not([type=checkbox]):not([type=radio]), :root[data-theme="light"] body.legacy-ui select, :root[data-theme="light"] body.legacy-ui textarea{ background:#fff !important;color:var(--fg) !important;border-color:#cbd5e1 !important; } :root[data-theme="light"] body.legacy-ui button.mini, :root[data-theme="light"] body.legacy-ui .btn{ background:#fff !important;color:var(--fg) !important;border-color:#cbd5e1 !important; } :root[data-theme="light"] body.legacy-ui .btn.pri{ background:linear-gradient(135deg,#f59e0b,#ea7c00) !important;color:#1a1205 !important; border-color:transparent !important; } :root[data-theme="light"] body.legacy-ui .pill.ok, :root[data-theme="light"] body.legacy-ui .pill.good, :root[data-theme="light"] body.legacy-ui .p-ok{background:#dcfce7 !important;color:#14532d !important} :root[data-theme="light"] body.legacy-ui .pill.warn, :root[data-theme="light"] body.legacy-ui .p-warn{background:#fef3c7 !important;color:#78350f !important} :root[data-theme="light"] body.legacy-ui .pill.bad, :root[data-theme="light"] body.legacy-ui .p-bad{background:#fee2e2 !important;color:#7f1d1d !important} :root[data-theme="light"] body.legacy-ui .pill.info, :root[data-theme="light"] body.legacy-ui .p-info{background:#dbeafe !important;color:#1e3a8a !important} :root[data-theme="light"] body.legacy-ui .pill.mute, :root[data-theme="light"] body.legacy-ui .p-mute{background:#e2e8f0 !important;color:#334155 !important} :root[data-theme="light"] body.legacy-ui .badge.yes{background:#dcfce7 !important;color:#14532d !important} :root[data-theme="light"] body.legacy-ui .badge.no{background:#fee2e2 !important;color:#7f1d1d !important} :root[data-theme="light"] body.legacy-ui .note, :root[data-theme="light"] body.legacy-ui .notice{ background:#fffbeb !important;border-color:#fcd34d !important;color:#78350f !important; } :root[data-theme="light"] body.legacy-ui .err{ background:#fef2f2 !important;border-color:#fca5a5 !important;color:#7f1d1d !important; } :root[data-theme="light"] body.legacy-ui .ok:not(.pill){ background:#f0fdf4 !important;border-color:#86efac !important;color:#14532d !important; } :root[data-theme="light"] body.legacy-ui .empty{color:var(--fg3) !important} :root[data-theme="light"] body.legacy-ui .sk{ background:linear-gradient(90deg,#e9eef6 25%,#f5f8fc 50%,#e9eef6 75%) !important; } :root[data-theme="light"] body.legacy-ui .step{background:var(--panel2) !important; border-color:var(--line) !important;color:var(--fg3) !important} :root[data-theme="light"] body.legacy-ui .step.done{background:#f0fdf4 !important; border-color:#86efac !important;color:#14532d !important} :root[data-theme="light"] body.legacy-ui .step.now{background:#fff7ed !important; border-color:#fdba74 !important;color:#9a3412 !important} :root[data-theme="light"] body.legacy-ui code{background:#eef2f8 !important;color:#0f172a !important} :root[data-theme="light"] body.legacy-ui .dot{background:#cbd5e1} /* ── embedded in the Command Centre ────────────────────────────────────────── When one of the voice pages is shown inside the console's own panel it is a component, not a destination: no masthead, no page chrome of its own, and no background of its own competing with the card it sits in. */ :root[data-framed="1"] body{background:transparent} :root[data-framed="1"] header{ border-radius:10px 10px 0 0; } :root[data-framed="1"] main{padding-top:12px}