/* IPTV-MW operator portal.
   One set of tokens, redefined for dark mode; every rule below reads them. */

:root {
  --bg: #F3F5FA;
  --card: #FFFFFF;
  --text: #172033;
  --muted: #5A6377;
  --border: #DCE2EC;
  --border-strong: #C5CEDC;
  --nav: #14213D;
  --nav-text: #D3DBEC;
  --nav-hover: #22325A;
  --brand: #F59E0B;
  --accent: #3451D1;
  --accent-hover: #283FA8;
  --accent-soft: #E8EDFF;
  --on-accent: #FFFFFF;
  --success: #0E7A4D;
  --success-soft: #DFF5EA;
  --warn: #92400E;
  --warn-soft: #FDEFD6;
  --error: #B42318;
  --error-soft: #FDE7E5;
  --info: #1D4ED8;
  --info-soft: #E5EEFF;
  --table-head: #F6F8FC;
  --row-hover: #F7F9FF;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 2px 6px rgba(16, 24, 40, 0.06);
  /* One colour per area of the portal, used for its nav dot and page stripe. */
  --area-content: #3451D1;
  --area-lineups: #1D4ED8;
  --area-packages: #0E9F6E;
  --area-partners: #0E7490;
  --area-screens: #BE185D;
  --area-subscribers: #0369A1;
  --area-apps: #4D7C0F;
  --area-messages: #C2410C;
  --area-ads: #A16207;
  --area-services: #047857;
  --area-reports: #0F766E;
  /* Chart roles (ADR 0020): the validated categorical order, blue then orange. */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-rest: #c3c2b7;
  --chart-grid: #e1e0d9;
  --chart-axis: #c3c2b7;
  --area-viewing: #B91C1C;
  --area-sync: #D97706;
  --area-users: #7C3AED;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1422;
    --card: #151D2E;
    --text: #E6EAF2;
    --muted: #A3ADBF;
    --border: #26324A;
    --border-strong: #34425F;
    --nav: #0A101C;
    --nav-text: #C9D2E4;
    --nav-hover: #18233A;
    --accent: #7C93FF;
    --accent-hover: #9AABFF;
    --accent-soft: #1D2850;
    --on-accent: #0E1422;
    --success: #4ADE9A;
    --success-soft: #0F3526;
    --warn: #FBBF5C;
    --warn-soft: #3A2A10;
    --error: #F97066;
    --error-soft: #3D1A17;
    --info: #8DB3FF;
    --info-soft: #142849;
    --table-head: #18213A;
    --row-hover: #1A2440;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    --area-content: #8DA0FF;
    --area-lineups: #93C5FD;
    --area-packages: #4ADE9A;
    --area-partners: #5EEAD4;
    --area-screens: #F9A8D4;
    --area-subscribers: #7DD3FC;
    --area-apps: #BEF264;
    --area-messages: #FDBA74;
    --area-ads: #FDE68A;
    --area-services: #6EE7B7;
    --area-reports: #5EEAD4;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-rest: #4a4a46;
    --chart-grid: #2c2c2a;
    --chart-axis: #383835;
    --area-viewing: #FCA5A5;
    --area-sync: #FBBF5C;
    --area-users: #C4A5FA;
  }
}

* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); }
main { max-width: 1240px; margin: 0 auto; padding: 28px 24px 64px; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

/* ---------- top bar ---------- */
.topbar { display: flex; align-items: center; gap: 20px; padding: 10px 24px; min-height: 60px; background: var(--nav); color: var(--nav-text); flex-wrap: wrap;
  border-bottom: 3px solid var(--brand); }
.topbar .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; color: #FFFFFF; letter-spacing: 0.01em; }
.topbar .brand-mark { width: 24px; height: 24px; border-radius: 50%; background: var(--brand); box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.3); }
.topbar .brand small { font-weight: 500; font-size: 13px; color: var(--nav-text); opacity: 0.75; }
@media (max-width: 1400px) { .topbar .brand small { display: none; } }
.topbar nav { flex: 1; display: flex; gap: 4px; flex-wrap: wrap; }
.topbar nav a { display: flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 8px; color: var(--nav-text); text-decoration: none; font-weight: 550; }
.topbar nav a:hover { background: var(--nav-hover); color: #FFFFFF; }
.topbar nav a[aria-current="page"] { background: rgba(255, 255, 255, 0.13); color: #FFFFFF; }
/* Thirteen areas fit on one line at laptop widths when the links sit closer. */
@media (max-width: 1500px) { .topbar nav { gap: 2px; } .topbar nav a { padding: 6px 8px; gap: 6px; } .topbar .who { display: none; } }
@media (max-width: 1400px) { .topbar nav a { padding: 6px 6px; gap: 5px; font-size: 14px; } .topbar nav .dot { display: none; } }
.topbar nav .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nav-text); }
.topbar nav .area-content .dot { background: #8DA0FF; }
.topbar nav .area-lineups .dot { background: #93C5FD; }
.topbar nav .area-packages .dot { background: #4ADE9A; }
.topbar nav .area-partners .dot { background: #5EEAD4; }
.topbar nav .area-screens .dot { background: #F9A8D4; }
.topbar nav .area-subscribers .dot { background: #7DD3FC; }
.topbar nav .area-apps .dot { background: #BEF264; }
.topbar nav .area-messages .dot { background: #FDBA74; }
.topbar nav .area-ads .dot { background: #FDE68A; }
.topbar nav .area-services .dot { background: #6EE7B7; }
.topbar nav .area-reports .dot { background: #5EEAD4; }
.topbar nav .area-viewing .dot { background: #FCA5A5; }
.topbar nav .area-sync .dot { background: #FBBF5C; }
.topbar nav .area-users .dot { background: #C4A5FA; }
.topbar nav.admin-nav { flex: none; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, 0.18); }
.topbar nav.admin-nav a { font-size: 14px; }
.topbar .who { color: var(--nav-text); font-size: 14px; }
.topbar button.link { color: #FFFFFF; }
.topbar button.link:hover { color: var(--brand); }

/* The area's colour runs along the top of the page's first card. */
main.area-content { --area: var(--area-content); }
main.area-lineups { --area: var(--area-lineups); }
main.area-packages { --area: var(--area-packages); }
main.area-partners { --area: var(--area-partners); }
main.area-screens { --area: var(--area-screens); }
main.area-subscribers { --area: var(--area-subscribers); }
main.area-apps { --area: var(--area-apps); }
main.area-messages { --area: var(--area-messages); }
main.area-ads { --area: var(--area-ads); }
main.area-services { --area: var(--area-services); }
main.area-reports { --area: var(--area-reports); }
main.area-viewing { --area: var(--area-viewing); }
img.app-icon { max-height: 90px; width: auto; border-radius: 10px; }
img.ad-banner { display: block; max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--border); }
.ad-days { display: flex; flex-wrap: wrap; gap: 4px 14px; }
main.area-sync { --area: var(--area-sync); }
main.area-users { --area: var(--area-users); }
main[class*="area-"] > .card:first-of-type { border-top: 4px solid var(--area, var(--border)); }
main.area-none > .card:first-of-type { border-top: 1px solid var(--border); }

/* ---------- cards and headings ---------- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 22px 24px; margin-bottom: 20px; overflow-x: auto; box-shadow: var(--shadow); }
.card.narrow { max-width: 420px; margin: 56px auto; }
h1 { font-size: 24px; font-weight: 700; margin: 0 0 16px; letter-spacing: -0.01em; }
h2 { font-size: 17px; font-weight: 650; margin: 0 0 12px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.card-head h1 { margin: 0; }
h1.mono { font-size: 22px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0 10px; }
.section-head h2 { margin: 0; }

/* ---------- navigation within an area ---------- */
.subnav { display: flex; gap: 6px; margin: 0 0 18px; flex-wrap: wrap; }
.subnav a { padding: 6px 14px; border-radius: 999px; color: var(--muted); text-decoration: none; font-weight: 550; border: 1px solid transparent; }
.subnav a:hover { color: var(--text); background: var(--card); border-color: var(--border); }
.subnav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 650; }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { color: var(--muted); font-weight: 650; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; background: var(--table-head); }
thead th:first-child { border-top-left-radius: 8px; }
thead th:last-child { border-top-right-radius: 8px; }
tbody tr:hover td { background: var(--row-hover); }
tr.retired td { color: var(--muted); }
td a { font-weight: 550; text-decoration: none; }
td a:hover { text-decoration: underline; }

/* ---------- forms ---------- */
label { display: block; margin-bottom: 14px; font-weight: 600; font-size: 13px; }
label.check { display: inline-flex; gap: 6px; align-items: center; font-weight: 400; margin-right: 16px; }
input[type=email], input[type=password], input[type=text], input[type=url], input[type=number], input[type=search], input[type=datetime-local], input[type=date], select, textarea {
  display: block; width: 100%; margin-top: 5px; padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--card); color: var(--text); font: inherit; font-weight: 400;
}
input:focus, select:focus, textarea:focus { outline: 3px solid var(--accent-soft); border-color: var(--accent); }
input:disabled, select:disabled, textarea:disabled { opacity: 0.7; background: var(--bg); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
input[type=file] { display: block; margin: 5px 0 8px; font: inherit; max-width: 100%; }
fieldset { border: 1px solid var(--border); border-radius: 12px; margin: 0 0 16px; padding: 14px 18px 4px; }
legend { font-weight: 700; padding: 0 6px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 16px; }
label.wide { grid-column: span 2; }
@media (max-width: 600px) { label.wide { grid-column: auto; } }
.checks { margin-bottom: 10px; }
.checks .check { margin-bottom: 4px; }
.group-label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.hint { display: block; color: var(--muted); font-weight: 400; font-size: 12px; }
.field-error { display: block; color: var(--error); font-weight: 500; font-size: 13px; margin-top: 3px; }

/* ---------- buttons ---------- */
button, a.button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border: 0; border-radius: 8px;
  background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
button:hover, a.button:hover { background: var(--accent-hover); color: var(--on-accent); }
button:focus-visible, a:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
button.link { background: none; color: var(--accent); padding: 0; font-weight: 550; }
button.link:hover { background: none; text-decoration: underline; }
button.danger { background: var(--error); color: #FFFFFF; }
button.danger:hover { background: var(--error); filter: brightness(0.9); }
a.secondary { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border-strong); color: var(--text);
  background: var(--card); text-decoration: none; font-weight: 600; }
a.secondary:hover { border-color: var(--accent); color: var(--accent); }
form.inline { display: inline; }
form button + button { margin-left: 8px; }
.card-head .button + .button { margin-left: 8px; }
.head-actions { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---------- messages ---------- */
.error { color: var(--error); }
p.error { background: var(--error-soft); padding: 10px 14px; border-radius: 10px; font-weight: 500; }
.error-text { color: var(--error); }
.notice { padding: 10px 14px; border-radius: 10px; background: var(--info-soft); color: var(--text); border-left: 4px solid var(--info); }
.muted { color: var(--muted); }

/* ---------- badges and tags ---------- */
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 650; }
.badge.provisioned, .badge.succeeded { background: var(--success-soft); color: var(--success); }
.badge.pending, .badge.partial { background: var(--warn-soft); color: var(--warn); }
.badge.failing, .badge.failed { background: var(--error-soft); color: var(--error); }
.badge.running { background: var(--info-soft); color: var(--info); }
.badge.active { background: var(--success-soft); color: var(--success); }
.badge.suspended { background: var(--warn-soft); color: var(--warn); }
.badge.retired { background: var(--table-head); color: var(--muted); border: 1px solid var(--border); }
.tag { display: inline-block; padding: 0 7px; border: 1px solid var(--border-strong); border-radius: 5px; font-size: 11px; font-weight: 650; color: var(--muted); vertical-align: middle; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.wrap { white-space: normal; }

/* ---------- catalogue pages ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 0 12px; align-items: flex-end; margin-bottom: 12px; padding: 14px 16px 0; background: var(--table-head);
  border: 1px solid var(--border); border-radius: 12px; }
.filters label { flex: 1 1 130px; max-width: 220px; }
.filters label.grow { flex: 3 1 220px; max-width: none; }
.filters button { margin-bottom: 14px; }
.drm-panel { border: 1px solid var(--border); border-left: 4px solid var(--info); background: var(--info-soft); border-radius: 12px; padding: 14px 18px; margin-bottom: 18px; }
.drm-panel h2 { font-size: 15px; }
.drm-panel dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.drm-panel dt { color: var(--muted); }
.drm-panel dd { margin: 0; word-break: break-all; }
.danger-zone { margin-top: 24px; padding: 16px 18px; border: 1px solid var(--error-soft); border-radius: 12px; background: color-mix(in srgb, var(--error-soft) 40%, transparent); }
.with-logo { display: inline-flex; align-items: center; gap: 10px; }
img.list-logo { width: auto; height: 26px; max-width: 64px; object-fit: contain; }
img.list-poster { width: auto; height: 48px; max-width: 40px; object-fit: cover; border-radius: 4px; }

/* ---------- stats ---------- */
.stats { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0 16px; }
.stats > div { display: flex; flex-direction: column; min-width: 150px; padding: 14px 16px; border-radius: 12px; background: var(--table-head); border: 1px solid var(--border); }
.stat { font-size: 30px; font-weight: 750; line-height: 1.15; }
.stat.bad { color: var(--error); }

/* ---------- artwork ---------- */
.artwork { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.artwork-slot { border: 1px solid var(--border); border-radius: 12px; padding: 14px; background: var(--card); }
.artwork-slot h3 { font-size: 14px; margin: 0 0 8px; }
.artwork-slot img { display: block; max-width: 100%; height: auto; max-height: 180px; object-fit: contain; background: var(--bg); border-radius: 6px; }
.artwork-slot img.artwork-logo { max-height: 96px; }
.artwork-empty { padding: 24px 0; text-align: center; background: var(--bg); border-radius: 6px; }
.artwork-slot form { margin-top: 8px; }

/* ---------- EPG ---------- */
.import-actions { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; margin-bottom: 8px; }
.import-actions form { margin: 0; }
ul.rejections { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.day-nav { display: flex; gap: 16px; align-items: baseline; margin: 8px 0 12px; }
.day-nav a { text-decoration: none; font-weight: 600; }

/* ---------- partners and regions ---------- */
.origin { margin: -6px 0 16px; font-size: 13px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 8px; font-size: 13px; }
.crumbs a { text-decoration: none; font-weight: 550; }
.crumbs span { color: var(--muted); }
.kind { display: inline-block; padding: 1px 9px; border-radius: 6px; font-size: 12px; font-weight: 650; text-transform: capitalize;
  background: var(--accent-soft); color: var(--accent); }
.kind-distributor, .kind-district { background: color-mix(in srgb, var(--area-partners) 14%, transparent); color: var(--area-partners); }
.kind-lco, .kind-mandal { background: color-mix(in srgb, var(--area-users) 14%, transparent); color: var(--area-users); }
.kind-village { background: color-mix(in srgb, var(--area-sync) 14%, transparent); color: var(--area-sync); }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0 0 8px; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; }
ul.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 8px; padding: 0; }
ul.chips li { padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--table-head); font-size: 14px; }
ul.chips a { text-decoration: none; font-weight: 600; }
form.inline-filters { display: flex; gap: 10px; align-items: flex-end; }
form.inline-filters label { margin: 0; }
form.rollout { flex-wrap: wrap; }
form.report-filters { flex-wrap: wrap; }
form.report-filters input.id-input { width: 150px; }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
.grid .form-actions { align-self: end; margin-bottom: 14px; }

/* Messages (ADR 0014): roughly how it looks on a screen. */
.message-preview { max-width: 560px; margin: 12px 0 4px; padding: 16px 20px; border-radius: 14px; background: #10182B; color: #F2F4F8; }
.message-preview h2 { margin: 8px 0 6px; color: #FFFFFF; }
.message-preview .tag { color: #C9D2E3; border-color: #3A4766; }
.message-preview.forced { border-left: 6px solid var(--area-messages); }
.message-preview.emergency { background: #7F1D1D; border-left-color: #FCA5A5; }
.message-preview .hint { color: #C9D2E3; }
.button.small { display: inline-block; padding: 4px 12px; font-size: 13px; }

/* Line-ups (ADR 0013). */
input.lcn { width: 90px; display: inline-block; margin: 0; text-align: right; }
.warning-box { background: var(--warn-soft); border-left: 4px solid var(--warn); border-radius: 10px; padding: 10px 14px; margin: 10px 0; }
.warning-box ul { margin: 6px 0 0; padding-left: 20px; }

/* Viewing: a day by quarter hour (ADR 0012), drawn as SVG attributes. */
svg.qh-chart { display: block; width: 100%; height: auto; margin: 4px 0 10px; }
svg.qh-chart rect { fill: var(--area-viewing); }
svg.qh-chart rect.suppressed { fill: var(--border-strong); }
svg.qh-chart line.grid { stroke: var(--border); stroke-width: 1; }
svg.qh-chart line.axis { stroke: var(--border-strong); stroke-width: 1; }
svg.qh-chart text { fill: var(--muted); font-size: 12px; }
form.rollout input[type=number] { width: 76px; }
form.rollout select { width: auto; min-width: 104px; }

/* The services directory (ADR 0017). */
.vas-category { margin: 18px 0 8px; }
.vas-category h2 { margin: 0 0 6px; font-size: 17px; }
.vas-sub { margin: 10px 0 0 18px; }
.vas-sub h3 { margin: 0 0 4px; font-size: 15px; }
table.vas-entries td:first-child { width: 45%; }
.vas-category.retired > h2, .vas-sub.retired > h3 { opacity: 0.6; }

/* Business reports (ADR 0020): charts drawn on the server as SVG. */
.chart { display: block; width: 100%; height: auto; max-height: 260px; }
.chart-h { max-height: none; max-width: 680px; }
.chart .s1 { fill: var(--series-1); }
.chart .s2 { fill: var(--series-2); }
.chart .rest { fill: var(--series-rest); }
.chart .bar:hover { opacity: 0.8; }
.chart .grid { stroke: var(--chart-grid); stroke-width: 1; }
.chart .axis { stroke: var(--chart-axis); stroke-width: 1; }
.chart text { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart text.label { fill: var(--text); font-size: 12px; }
.chart text.value { fill: var(--text); font-size: 12px; font-weight: 600; }
.chart-legend { display: flex; gap: 16px; font-size: 13px; color: var(--muted); margin: 4px 0 6px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.chart-legend .sw.s1 { background: var(--series-1); }
.chart-legend .sw.s2 { background: var(--series-2); }
.chart-legend .sw.rest { background: var(--series-rest); }
.report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 18px 28px; }
.report-grid .wide { grid-column: 1 / -1; }
.report-fig { margin: 0; }
.report-fig figcaption { font-weight: 650; margin: 0 0 6px; }
.report-fig details { margin-top: 6px; font-size: 13px; }
.report-fig summary { cursor: pointer; color: var(--muted); }
table.compact th, table.compact td { padding: 5px 8px; font-size: 13px; }
td.num.bad, .stat.bad { color: var(--error); }
.report-filters select { max-width: 220px; }
.quick-ranges a { margin: 0 2px; }
.report-list dt { font-weight: 650; margin-top: 10px; }
.report-list dd { margin: 2px 0 0; }
.stats .small { font-size: 12px; }
a.stat { text-decoration: none; color: inherit; }