:root { color-scheme: light dark; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { min-height: 100svh; margin: 0; display: grid; place-items: center; padding: max(1.5rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left)); background: #eef2f7; color: #172033; }
.status-card { width: min(100%, 44rem); padding: clamp(1.5rem, 5vw, 3rem); border-radius: 1.25rem; background: #fff; box-shadow: 0 1rem 3rem #17203318; }
.eyebrow { margin: 0; color: #52627a; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: .4rem 0 1.5rem; font-size: clamp(2rem, 6vw, 3rem); }
.running { display: flex; gap: .65rem; align-items: center; font-weight: 700; }
.running span { width: .75rem; height: .75rem; border-radius: 50%; background: #16864b; box-shadow: 0 0 0 .3rem #16864b22; }
dl { margin: 2rem 0 0; }
dl div { display: grid; grid-template-columns: minmax(8rem, 1fr) 2fr; gap: 1rem; padding: .9rem 0; border-top: 1px solid #dce3ec; }
dt { color: #52627a; } dd { margin: 0; overflow-wrap: anywhere; } .ok { color: #08743c; } .failed { color: #ad1d2c; }
pre { overflow: auto; padding: 1rem; background: #111827; color: #f9fafb; }
.auth-card { width: min(100%, 30rem); padding: clamp(1.5rem, 5vw, 3rem); border-radius: 1.25rem; background: #fff; box-shadow: 0 1rem 3rem #17203318; }
.intro { margin: -1rem 0 2rem; color: #52627a; line-height: 1.55; }
.auth-form { display: grid; gap: .75rem; }
.auth-form label { margin-top: .5rem; font-weight: 700; }
.auth-form input { width: 100%; min-height: 3.25rem; padding: .75rem .9rem; border: 1px solid #b9c5d4; border-radius: .65rem; background: #fff; color: #172033; font: inherit; font-size: 1rem; }
.auth-form input:focus { outline: .2rem solid #2069d533; border-color: #2069d5; }
button { min-height: 3.25rem; margin-top: 1rem; padding: .75rem 1.2rem; border: 0; border-radius: .65rem; background: #145ac0; color: #fff; font: inherit; font-weight: 750; cursor: pointer; }
button:hover { background: #0e489e; }
button:focus-visible { outline: .2rem solid #2069d566; outline-offset: .15rem; }
.alert { margin-bottom: 1rem; padding: .9rem 1rem; border: 1px solid #e4a3aa; border-radius: .65rem; background: #fff0f1; color: #971b28; }
.logout-form { margin-top: 1.5rem; }
.secondary-button { background: #334155; }
.secondary-button:hover { background: #1e293b; }
@media (prefers-color-scheme: dark) { body { background: #0f172a; color: #e7edf7; } .status-card { background: #172033; } dl div { border-color: #344158; } .eyebrow, dt { color: #aab7ca; } .ok { color: #52d38c; } .failed { color: #ff8490; } }
@media (prefers-color-scheme: dark) { .auth-card { background: #172033; } .intro { color: #aab7ca; } .auth-form input { border-color: #53627a; background: #101827; color: #f3f6fb; } .alert { border-color: #9d4550; background: #481c23; color: #ffd5d9; } }
.admin-body { display: block; min-height: 100svh; padding: 0; background: #f2f5f9; }
.admin-shell { min-height: 100svh; display: grid; grid-template-columns: 17rem minmax(0, 1fr); }
.admin-sidebar { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; padding: 1.25rem 1rem; background: #101827; color: #e9eef7; }
.admin-brand { display: flex; align-items: center; gap: .75rem; min-height: 3rem; margin: 0 .5rem 1.5rem; color: inherit; text-decoration: none; }
.admin-brand > span { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .65rem; background: #2b6ee7; color: #fff; font-size: .8rem; font-weight: 800; }
.admin-sidebar nav { display: grid; gap: .3rem; }
.admin-nav-item { display: flex; align-items: center; gap: .75rem; min-height: 2.9rem; padding: .65rem .8rem; border-radius: .65rem; color: #afbdd1; text-decoration: none; font-size: .94rem; font-weight: 650; }
.admin-nav-item:hover { background: #1b2940; color: #fff; }
.admin-nav-item.active { background: #213b68; color: #fff; }
.nav-icon { width: 1.1rem; height: 1.1rem; border: 2px solid currentColor; border-radius: .25rem; opacity: .85; }
.nav-icon-source { border-radius: 50%; } .nav-icon-tv { border-radius: .2rem; } .nav-icon-activity { transform: rotate(45deg); border-width: 0 2px 2px 0; } .nav-icon-merge { border-radius: 50% 0 50% 0; } .nav-icon-users { border-radius: 50%; box-shadow: .35rem .2rem 0 -.12rem #101827, .48rem .2rem 0 0 currentColor; }
.admin-account { display: flex; align-items: center; gap: .7rem; margin-top: auto; padding: 1rem .5rem 0; border-top: 1px solid #29374c; }
.admin-account > span:last-child { min-width: 0; display: grid; } .admin-account strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; } .admin-account small { color: #91a0b6; }
.account-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #2b6ee7; font-weight: 800; }
.admin-main { min-width: 0; }
.admin-topbar { min-height: 9rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.75rem clamp(1.25rem, 4vw, 3rem); border-bottom: 1px solid #dce3ec; background: #fff; }
.admin-topbar h1 { margin: .2rem 0; font-size: clamp(1.8rem, 3vw, 2.35rem); } .admin-topbar p:last-child { margin: 0; color: #637188; }
.admin-logout { min-height: 2.75rem; margin: 0; background: #e8edf4; color: #243147; white-space: nowrap; } .admin-logout:hover { background: #d9e1ec; }
.admin-content { padding: clamp(1.25rem, 4vw, 3rem); }
.admin-welcome { display: flex; justify-content: space-between; gap: 2rem; padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid #dce3ec; border-radius: 1rem; background: #fff; box-shadow: 0 .5rem 2rem #1720330b; }
.admin-welcome h2 { margin: .35rem 0; font-size: 1.45rem; } .admin-welcome p:last-child { max-width: 42rem; margin-bottom: 0; color: #637188; line-height: 1.55; }
.status-badge { align-self: flex-start; padding: .4rem .7rem; border-radius: 999px; background: #e4f7ec; color: #08743c; font-size: .8rem; font-weight: 800; }
.admin-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.admin-grid a { min-height: 8.5rem; display: flex; flex-direction: column; justify-content: flex-end; gap: .25rem; padding: 1.25rem; border: 1px solid #dce3ec; border-radius: 1rem; background: #fff; color: #172033; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.admin-grid a:hover { transform: translateY(-2px); box-shadow: 0 .75rem 2rem #17203312; } .admin-grid span { color: #637188; font-size: .9rem; }
.admin-empty-state { min-height: 22rem; display: grid; place-content: center; justify-items: center; padding: 2rem; border: 1px dashed #bdc8d7; border-radius: 1rem; background: #fff; text-align: center; }
.admin-empty-state > span { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #edf2f8; color: #52627a; font-size: 1.8rem; } .admin-empty-state h2 { margin: 1rem 0 .35rem; } .admin-empty-state p { max-width: 34rem; margin: 0; color: #637188; line-height: 1.55; }
.admin-mobile-nav { display: none; }
@media (max-width: 900px) { .admin-shell { grid-template-columns: 1fr; } .admin-sidebar { display: none; } .admin-topbar { min-height: auto; padding-top: max(1.25rem, env(safe-area-inset-top)); } .admin-mobile-nav { display: flex; gap: .5rem; overflow-x: auto; padding: .85rem max(1.25rem, env(safe-area-inset-left)); border-bottom: 1px solid #dce3ec; background: #fff; scrollbar-width: none; } .admin-mobile-nav a { flex: 0 0 auto; padding: .6rem .8rem; border-radius: .55rem; color: #52627a; text-decoration: none; font-size: .88rem; font-weight: 700; } .admin-mobile-nav a.active { background: #213b68; color: #fff; } .admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .admin-topbar { align-items: flex-start; } .admin-topbar p:last-child { display: none; } .admin-content { padding-bottom: max(1.25rem, env(safe-area-inset-bottom)); } .admin-welcome { display: block; } .status-badge { display: inline-block; margin-top: 1rem; } .admin-grid { grid-template-columns: 1fr; } }
@media (prefers-color-scheme: dark) { .admin-body { background: #0d1422; } .admin-topbar, .admin-mobile-nav, .admin-welcome, .admin-grid a, .admin-empty-state { border-color: #344158; background: #172033; } .admin-topbar p:last-child, .admin-welcome p:last-child, .admin-grid span, .admin-empty-state p { color: #aab7ca; } .admin-grid a { color: #e7edf7; } .admin-logout { background: #2a3850; color: #eef3fa; } .admin-empty-state > span { background: #26344a; color: #b8c4d5; } }
.flash { margin-bottom: 1rem; padding: .9rem 1rem; border: 1px solid; border-radius: .7rem; font-weight: 650; }
.flash-success { border-color: #9bd6b2; background: #e8f7ee; color: #08743c; } .flash-error { border-color: #e4a3aa; background: #fff0f1; color: #971b28; } .flash-info { border-color: #9abce9; background: #edf5ff; color: #174f98; }
.source-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.primary-link, .secondary-link { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .65rem 1rem; border-radius: .65rem; font-weight: 750; text-decoration: none; }
.primary-link { background: #145ac0; color: #fff; } .primary-link:hover { background: #0e489e; } .secondary-link { background: #e8edf4; color: #243147; }
.data-table-wrap { overflow-x: auto; border: 1px solid #dce3ec; border-radius: 1rem; background: #fff; box-shadow: 0 .5rem 2rem #1720330b; }
.data-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.data-table th, .data-table td { padding: .9rem 1rem; border-bottom: 1px solid #e4e9f0; text-align: left; vertical-align: top; }
.data-table th { background: #f7f9fc; color: #52627a; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.source-url { display: block; max-width: 16rem; overflow: hidden; color: #145ac0; text-overflow: ellipsis; white-space: nowrap; }
.source-state { display: inline-flex; padding: .28rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 800; } .source-state.active { background: #e4f7ec; color: #08743c; } .source-state.inactive { background: #edf0f4; color: #59677a; }
.table-actions { min-width: 9.5rem; display: flex; flex-wrap: wrap; gap: .45rem .7rem; align-items: center; } .table-actions form { margin: 0; }
.table-actions a, .text-button { min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #145ac0; font: inherit; font-weight: 700; text-decoration: none; white-space: nowrap; }
.text-button:hover, .table-actions a:hover { background: transparent; color: #0b438f; text-decoration: underline; } .table-actions .danger-link { color: #b42332; } .import-button { color: #506078; }
.admin-form-card, .confirm-card { max-width: 52rem; padding: clamp(1.25rem, 4vw, 2rem); border: 1px solid #dce3ec; border-radius: 1rem; background: #fff; }
.source-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.field-group { display: grid; align-content: start; gap: .45rem; } .field-wide { grid-column: 1 / -1; } .field-group label { font-weight: 750; }
.field-group input, .field-group select { width: 100%; min-height: 3rem; padding: .7rem .8rem; border: 1px solid #b9c5d4; border-radius: .6rem; background: #fff; color: #172033; font: inherit; }
.field-group input:focus, .field-group select:focus { outline: .2rem solid #2069d533; border-color: #2069d5; } .field-group small { color: #637188; line-height: 1.4; } .field-group .field-error { color: #b42332; font-weight: 650; }
.checkbox-field { display: flex; align-items: center; gap: .65rem; align-self: end; min-height: 3rem; font-weight: 700; } .checkbox-field input { width: 1.2rem; height: 1.2rem; }
.form-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: .8rem; margin-top: .5rem; } .form-actions form { margin: 0; } .form-actions button { margin: 0; }
.confirm-card { text-align: center; } .confirm-card h2 { margin: 1rem 0 .5rem; } .confirm-card .form-actions { justify-content: center; margin-top: 1.5rem; } .danger-symbol { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin: 0 auto; border-radius: 50%; background: #fff0f1; color: #b42332; font-size: 1.5rem; font-weight: 900; } .muted-url { color: #637188; overflow-wrap: anywhere; } .danger-button { background: #b42332; } .danger-button:hover { background: #8f1725; }
@media (max-width: 700px) { .source-form { grid-template-columns: 1fr; } .field-wide { grid-column: auto; } .data-table th, .data-table td { padding: .75rem; } }
@media (prefers-color-scheme: dark) { .data-table-wrap, .admin-form-card, .confirm-card { border-color: #344158; background: #172033; } .data-table th { background: #202c40; color: #aab7ca; } .data-table th, .data-table td { border-color: #344158; } .field-group input, .field-group select { border-color: #53627a; background: #101827; color: #f3f6fb; } .secondary-link { background: #2a3850; color: #eef3fa; } .flash-success { border-color: #34704d; background: #173a27; color: #76d89d; } .flash-error { border-color: #9d4550; background: #481c23; color: #ffd5d9; } .flash-info { border-color: #3e669c; background: #182e4d; color: #acd0ff; } .source-state.active { background: #173a27; color: #76d89d; } .source-state.inactive { background: #2a3444; color: #bdc7d5; } }
.programme-filters { display: grid; grid-template-columns: minmax(10rem, .7fr) minmax(14rem, 1fr) minmax(15rem, 1.4fr) auto auto; gap: .8rem; align-items: end; padding: 1rem; border: 1px solid #dce3ec; border-radius: .85rem; background: #fff; }
.programme-filters > div { display: grid; gap: .35rem; } .programme-filters label { color: #52627a; font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.programme-filters input, .programme-filters select { width: 100%; min-height: 2.75rem; padding: .6rem .7rem; border: 1px solid #b9c5d4; border-radius: .55rem; background: #fff; color: #172033; font: inherit; }
.programme-filters button { min-height: 2.75rem; margin: 0; } .programme-filters .secondary-link { min-height: 2.75rem; }
.programme-summary { display: flex; gap: .4rem; align-items: baseline; margin: 1rem 0; color: #52627a; } .programme-summary strong { color: #172033; } .programme-summary span { margin-left: auto; font-size: .9rem; }
.programme-groups { display: grid; gap: 1rem; }
.programme-channel-group { display: grid; grid-template-columns: 13rem minmax(0, 1fr); border: 1px solid #dce3ec; border-radius: .85rem; background: #fff; overflow: hidden; }
.programme-channel-name { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; padding: 1rem; border-right: 1px solid #dce3ec; background: #f7f9fc; }
.programme-channel-name img { width: auto; max-width: 7rem; height: 2.5rem; object-fit: contain; object-position: left center; } .programme-channel-name strong { overflow-wrap: anywhere; } .programme-channel-name small { color: #637188; overflow-wrap: anywhere; }
.programme-list { min-width: 0; }
.programme-entry { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1rem; padding: 1rem; border-bottom: 1px solid #e4e9f0; } .programme-entry:last-child { border-bottom: 0; }
.programme-time { display: flex; gap: .35rem; color: #52627a; font-variant-numeric: tabular-nums; font-weight: 750; }
.programme-copy h2 { margin: 0; font-size: 1rem; } .programme-copy h3 { margin: .25rem 0 0; color: #52627a; font-size: .9rem; font-weight: 650; } .programme-copy p { margin: .55rem 0 0; color: #637188; font-size: .88rem; line-height: 1.5; }
.programme-pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin-top: 1rem; padding: 1rem; border: 1px solid #dce3ec; border-radius: .75rem; background: #fff; } .programme-pagination span:last-child { text-align: right; } .programme-pagination a { color: #145ac0; font-weight: 750; text-decoration: none; }
@media (max-width: 1050px) { .programme-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .programme-search { grid-column: 1 / -1; } .programme-channel-group { grid-template-columns: 10rem minmax(0, 1fr); } }
@media (max-width: 700px) { .programme-filters { grid-template-columns: 1fr; } .programme-search { grid-column: auto; } .programme-channel-group { grid-template-columns: 1fr; } .programme-channel-name { border-right: 0; border-bottom: 1px solid #dce3ec; } .programme-entry { grid-template-columns: 1fr; gap: .45rem; } }
@media (prefers-color-scheme: dark) { .programme-filters, .programme-channel-group, .programme-pagination { border-color: #344158; background: #172033; } .programme-filters input, .programme-filters select { border-color: #53627a; background: #101827; color: #f3f6fb; } .programme-summary, .programme-time, .programme-copy h3, .programme-copy p { color: #aab7ca; } .programme-summary strong { color: #e7edf7; } .programme-channel-name { border-color: #344158; background: #202c40; } .programme-entry { border-color: #344158; } }