:root {
    --fg: #182230; --muted: #667085; --line: #e4e7ec; --bg: #f4f6f9; --card: #fff; --soft: #f0f4fa;
    --accent: #1d5fd1; --accent-soft: #e8f0fd; --error: #b42318; --error-soft: #fdecea; --ok: #067647; --ok-soft: #e7f6ec;
    --side: #0f1b2d; --side-fg: #c7d1de; --side-muted: #7f8ea3; --side-hover: #1a2a42; --side-active: #24406b;
    --radius: 10px; --shadow: 0 1px 2px rgba(16, 24, 40, .06);
}
@media (prefers-color-scheme: dark) {
    :root {
        --fg: #e6ebf1; --muted: #98a2b3; --line: #2a3441; --bg: #10151c; --card: #171e27; --soft: #1d2631;
        --accent: #6aa6f8; --accent-soft: #1c2c45; --error: #f97066; --error-soft: #3a1d1b; --ok: #47cd89; --ok-soft: #13301f;
        --side: #0b121c; --side-fg: #c7d1de; --side-muted: #7f8ea3; --side-hover: #152131; --side-active: #1f3556;
        --shadow: none;
    }
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.5 "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; color: var(--fg); background: var(--bg); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; font-weight: 600; margin: 0 0 16px; letter-spacing: -.01em; }
h2 { font-size: 15px; font-weight: 600; margin: 0 0 12px; }
h3 { font-size: 14px; font-weight: 600; margin: 16px 0 8px; }
h1 .muted { font-size: 14px; font-weight: 400; margin-left: 6px; }
p { margin: 0 0 10px; }
p:last-child { margin-bottom: 0; }

/* Shell: fixed sidebar on the left, content on the right. */
body.shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; background: var(--side); color: var(--side-fg); }
.side .brand { padding: 18px 20px; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 15px; color: #fff; }
.side nav { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; }
.side nav a, .side summary { display: block; padding: 7px 12px; border-radius: 6px; color: var(--side-fg); text-decoration: none; cursor: pointer; }
.side nav a:hover, .side summary:hover { background: var(--side-hover); color: #fff; }
.side nav a.active { background: var(--side-active); color: #fff; font-weight: 600; }
details.menu summary { list-style: none; display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--side-muted); }
details.menu summary::-webkit-details-marker { display: none; }
details.menu summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
details.menu[open] summary::after { transform: rotate(45deg); }
details.menu > div { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 4px 8px; }
.side .who { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-top: 1px solid rgba(255, 255, 255, .08); }
.side .avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--side-active); color: #fff; font-weight: 600; }
.side .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side button.link { color: var(--side-muted); }
.side button.link:hover { color: #fff; }

main { width: 100%; max-width: 1200px; padding: 28px 32px 48px; }
body:not(.shell) main { margin: 0 auto; }

/* Cards and content. */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; margin: 0 0 16px; }
.card.narrow { max-width: 400px; margin: 14vh auto; padding: 36px 32px; text-align: center; }
.card.narrow h1 { font-size: 22px; }
.card.narrow button { width: 100%; padding: 10px; margin-top: 8px; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0; }
dt { color: var(--muted); }
dd { margin: 0; font-weight: 500; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; padding: 8px 10px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--soft); border-bottom: 1px solid var(--line); }
td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:hover td { background: var(--soft); }
tbody tr:last-child td { border-bottom: 0; }
.card > table { margin: 0 -20px; width: calc(100% + 40px); }
.card > table th:first-child, .card > table td:first-child { padding-left: 20px; }
.card > table th:last-child, .card > table td:last-child { padding-right: 20px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
th.num { text-align: right; }
.muted { color: var(--muted); }
.error { color: var(--error); }
p.error { background: var(--error-soft); border-radius: 8px; padding: 10px 14px; }
.notice { background: var(--accent-soft); border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; }
.badge { display: inline-block; font-size: 12px; font-weight: 500; padding: 1px 9px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); color: var(--muted); }

/* Controls. */
button { background: var(--accent); color: #fff; border: 0; border-radius: 7px; padding: 8px 16px; font: inherit; font-weight: 500; cursor: pointer; }
button:hover { filter: brightness(1.08); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.link { background: none; color: var(--accent); padding: 0; font-weight: 400; }
button.danger { background: var(--error); }
input, select, textarea { padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--fg); font: inherit; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.search { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin: 0 0 16px; }
.search input { flex: 1; min-width: 220px; }
.search label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.form { display: grid; gap: 14px; max-width: 640px; }
.form label { display: grid; gap: 4px; }
.form label.choice, label.choice { display: flex; gap: 8px; align-items: baseline; }
fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 8px 16px 12px; margin: 0; display: grid; gap: 6px; }
legend { padding: 0 4px; font-weight: 600; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.actions form { display: inline-flex; gap: 6px; align-items: center; }

/* Customer tabs: a pill row. */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px; margin: 0 0 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.tabs a { padding: 6px 12px; border-radius: 7px; color: var(--muted); text-decoration: none; }
.tabs a:hover { background: var(--soft); color: var(--fg); }
.tabs a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* Home: cards side by side on wide screens. */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.grid > .card { margin: 0; }

@media (max-width: 860px) {
    body.shell { display: block; }
    .side { position: static; height: auto; }
    .side nav { flex-direction: row; flex-wrap: wrap; }
    details.menu > div { padding-left: 0; }
    main { padding: 20px 16px 40px; }
    table { display: block; overflow-x: auto; }
    .card > table { margin: 0; width: 100%; }
}

/* Colour (Udhaya, 2026-11-03: "must be colorful"). One hue per menu group, carried into cards and badges. */
:root {
    --c-blue: #2563eb; --c-purple: #7c3aed; --c-teal: #0d9488; --c-green: #16a34a; --c-orange: #ea580c;
    --c-pink: #db2777; --c-red: #dc2626; --c-amber: #d97706;
    --accent: #4f46e5; --accent-soft: #eef0ff;
    --side: #1e1b4b; --side-hover: #2e2a6b; --side-active: #4f46e5; --side-fg: #d6d4f5; --side-muted: #a5a1d8;
}
@media (prefers-color-scheme: dark) {
    :root { --accent: #8b8cf8; --accent-soft: #24234a; --side: #141233; --side-hover: #221f4d; --side-active: #4f46e5; }
}
.side .brand { background: var(--side-active); }
details.menu { --g: var(--side-muted); }
details.menu:has(> div[data-group="services"]) { --g: #2dd4bf; }
details.menu:has(> div[data-group="cable_tv"]) { --g: #c084fc; }
details.menu:has(> div[data-group="isp"]) { --g: #60a5fa; }
details.menu:has(> div[data-group="bulk"]) { --g: #fb923c; }
details.menu:has(> div[data-group="reports"]) { --g: #f472b6; }
details.menu:has(> div[data-group="admin"]) { --g: #f87171; }
details.menu summary { color: var(--g); }
details.menu summary::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--g); margin-right: 10px; flex: none; }
details.menu summary { justify-content: flex-start; }
details.menu summary::after { margin-left: auto; }
details.menu > div { border-left: 2px solid var(--g); margin-left: 15px; padding-left: 6px; }
.side nav details.menu a.active { background: var(--g); color: #1e1b4b; }

h1 { display: flex; align-items: baseline; gap: 6px; }
h1::before { content: ""; align-self: stretch; width: 4px; border-radius: 2px; background: linear-gradient(var(--c-blue), var(--c-purple)); margin-right: 6px; }
.card.narrow h1 { justify-content: center; }
.card.narrow h1::before { display: none; }
.card.narrow { border-top: 4px solid var(--accent); }

.card[class*="tone-"] { border-top: 4px solid var(--tone); }
.card[class*="tone-"] h2 { color: var(--tone); display: flex; align-items: center; gap: 8px; }
.card[class*="tone-"] h2::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--tone); }
.tone-blue { --tone: var(--c-blue); } .tone-purple { --tone: var(--c-purple); } .tone-green { --tone: var(--c-green); }
.tone-orange { --tone: var(--c-orange); } .tone-teal { --tone: var(--c-teal); } .tone-pink { --tone: var(--c-pink); }

th { background: var(--accent-soft); color: var(--accent); }
.tabs a.active { background: var(--accent); color: #fff; }
button { background: var(--accent); }
.badge { background: #fff4e5; border-color: #fcd9a8; color: #9a4a00; }
@media (prefers-color-scheme: dark) { .badge { background: #3a2a12; border-color: #6b4a1c; color: #fbbf72; } }
.state { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 10px; border-radius: 999px; background: var(--soft); color: var(--muted); }
.state-active { background: #dcfce7; color: #166534; }
.state-suspended, .state-pending { background: #fef3c7; color: #92400e; }
.state-inactive, .state-disconnected, .state-expired, .state-deactive { background: #fee2e2; color: #991b1b; }
@media (prefers-color-scheme: dark) {
    .state-active { background: #14532d; color: #bbf7d0; }
    .state-suspended, .state-pending { background: #4a3410; color: #fde68a; }
    .state-inactive, .state-disconnected, .state-expired, .state-deactive { background: #4c1515; color: #fecaca; }
}


/* Phones: a top bar with the ☰ button at the left; the menu and the user fold away until it is pressed. */
.menu-toggle { display: none; }
@media (min-width: 861px) { .side-body { display: contents; } }
@media (max-width: 860px) {
    .side { position: sticky; top: 0; z-index: 30; flex-direction: row; flex-wrap: wrap; align-items: center; height: auto; overflow: visible; }
    .side .menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-left: 8px; padding: 0; background: transparent; color: inherit; font-size: 22px; line-height: 1; border-radius: 8px; }
    .side .menu-toggle:hover { background: var(--side-hover); filter: none; }
    .side .brand { flex: 1; min-width: 0; border: 0; padding: 14px 12px; }
    .side-body { display: none; width: 100%; max-height: calc(100vh - 58px); overflow-y: auto; border-top: 1px solid var(--line); }
    body.nav-open .side-body { display: block; }
    .side .side-body nav { flex-direction: column; flex-wrap: nowrap; }
    details.menu > div { padding-left: 8px; }
}
details.menu:has(> div[data-group="dth"]) { --g: #facc15; }
details.menu:has(> div[data-group="iptv"]) { --g: #a3e635; }
details.menu:has(> div[data-group="ott"]) { --g: #22d3ee; }
.card.narrow .switch { margin-top: 14px; }
.card.narrow .switch button { width: auto; margin: 0; padding: 0; font-size: 13px; }