/* CastDVR theme — Salloq light palette.
 * Layered on top of Bootstrap 5; intentionally minimal.
 */

:root {
    --cd-bg:         #f5f4f0;
    --cd-surface:    #ffffff;
    --cd-surface-2:  #faf9f5;
    --cd-border:     #e3e2dd;
    --cd-text:       #1a1a1a;
    --cd-muted:      #6b6b6b;
    --cd-blue:       #0066ff;
    --cd-teal:       #00c98d;
    --cd-warning:    #d97706;
    --cd-error:      #b91c1c;
    --cd-focus:      0 0 0 3px rgba(0,102,255,.25);
}

html, body {
    background: var(--cd-bg);
    color: var(--cd-text);
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
    font-size: 15px;
}
code, pre, .monospace {
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
}

a { color: var(--cd-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.btn-primary { background: var(--cd-blue); border-color: var(--cd-blue); }
.btn-primary:hover, .btn-primary:focus { background: #0052cc; border-color: #0052cc; }
.btn-success { background: var(--cd-teal); border-color: var(--cd-teal); color: #fff; }
.btn-success:hover { background: #00a878; border-color: #00a878; color: #fff; }

.navbar.castdvr {
    background: var(--cd-surface);
    border-bottom: 1px solid var(--cd-border);
}
.navbar.castdvr .navbar-brand {
    font-weight: 600;
    color: var(--cd-text);
}
.navbar.castdvr .navbar-brand .dot {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    background: var(--cd-blue); margin-right: 8px; vertical-align: middle;
}
.navbar.castdvr .nav-link { color: var(--cd-text); }
.navbar.castdvr .nav-link.active { color: var(--cd-blue); font-weight: 600; }

.card.castdvr {
    background: var(--cd-surface);
    border: 1px solid var(--cd-border);
    border-radius: 12px;
}
.card.castdvr .card-header {
    background: var(--cd-surface-2);
    border-bottom: 1px solid var(--cd-border);
    font-weight: 600;
}

.stat {
    display: flex; flex-direction: column; gap: .25rem;
    padding: 1rem 1.25rem;
    background: var(--cd-surface);
    border: 1px solid var(--cd-border);
    border-radius: 12px;
}
.stat .stat-label { color: var(--cd-muted); font-size: .825rem; text-transform: uppercase; letter-spacing: .05em; }
.stat .stat-value { font-size: 1.75rem; font-weight: 600; }

.badge-status { font-weight: 500; padding: .25em .55em; border-radius: 999px; }
.badge-status.ok        { background: rgba(0,201,141,.15); color: #007454; }
.badge-status.degraded  { background: rgba(217,119,6,.15); color: #92400e; }
.badge-status.down      { background: rgba(185,28,28,.12); color: #7f1d1d; }
.badge-status.protected { background: rgba(185,28,28,.12); color: #7f1d1d; }
.badge-status.unknown   { background: rgba(107,107,107,.15); color: #4b4b4b; }
.badge-status.recording { background: rgba(0,102,255,.15); color: #003580; }
.badge-status.completed { background: rgba(0,201,141,.15); color: #007454; }
.badge-status.failed    { background: rgba(185,28,28,.12); color: #7f1d1d; }
.badge-status.cancelled { background: rgba(107,107,107,.15); color: #4b4b4b; }
.badge-status.pending,
.badge-status.queued    { background: rgba(0,102,255,.10); color: #003580; }
.badge-status.conflict  { background: rgba(217,119,6,.15); color: #92400e; }
.badge-status.recycled,
.badge-status.deleted   { background: rgba(107,107,107,.15); color: #4b4b4b; }

.guide-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1px;
    background: var(--cd-border);
    border: 1px solid var(--cd-border);
    border-radius: 12px;
    overflow: hidden;
}
.guide-row { display: contents; }
.guide-chan, .guide-cells {
    background: var(--cd-surface);
    padding: .5rem .75rem;
    min-height: 64px;
}
.guide-chan {
    display: flex; gap: .5rem; align-items: center;
    border-right: 1px solid var(--cd-border);
}
.guide-chan img { width: 28px; height: 28px; object-fit: contain; }
.guide-chan .ch-num { color: var(--cd-muted); font-size: .825rem; }
.guide-cells {
    position: relative; padding: 0; overflow: hidden;
    background: linear-gradient(to right, var(--cd-surface) 0, var(--cd-surface) 100%);
}
.guide-cell {
    position: absolute; top: 4px; bottom: 4px;
    background: var(--cd-surface-2);
    border: 1px solid var(--cd-border);
    border-radius: 8px;
    padding: .35rem .55rem;
    overflow: hidden;
    white-space: nowrap; text-overflow: ellipsis;
}
.guide-cell:hover { background: rgba(0,102,255,.06); border-color: var(--cd-blue); }
.guide-cell.new::before { content: "NEW"; display: inline-block; font-size: .7rem; color: var(--cd-teal); margin-right: .35rem; }
.guide-cell.protected { background: rgba(185,28,28,.05); border-color: rgba(185,28,28,.3); }
.guide-time-strip {
    display: grid;
    grid-template-columns: 220px 1fr;
    margin-bottom: 4px;
    color: var(--cd-muted);
    font-size: .825rem;
}

.channel-card {
    background: var(--cd-surface);
    border: 1px solid var(--cd-border);
    border-radius: 12px;
    padding: 1rem;
    display: flex; gap: .75rem; align-items: center;
}
.channel-card img { width: 44px; height: 44px; object-fit: contain; }
.channel-card .ch-now { color: var(--cd-muted); font-size: .85rem; margin-top: .15rem; }

.tile {
    background: var(--cd-surface);
    border: 1px solid var(--cd-border);
    border-radius: 12px;
    overflow: hidden;
    display: flex; flex-direction: column;
}
.tile .tile-thumb {
    background: #0b0b0b;
    aspect-ratio: 16 / 9;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.6);
}
.tile .tile-body { padding: .75rem 1rem; }

.video-wrap { background: #000; border-radius: 12px; overflow: hidden; }
.video-wrap video { width: 100%; display: block; }

.focusable:focus-visible {
    outline: none;
    box-shadow: var(--cd-focus);
    border-color: var(--cd-blue);
}

/* Fire TV / 10-foot mode. Activated by adding class="ten-foot" on <body>. */
body.ten-foot { font-size: 18px; }
body.ten-foot .btn { padding: .75rem 1.25rem; font-size: 1rem; }
body.ten-foot .card.castdvr { border-radius: 16px; }
body.ten-foot a:focus,
body.ten-foot button:focus,
body.ten-foot .focusable:focus {
    outline: 3px solid var(--cd-teal) !important;
    outline-offset: 2px;
}
body.ten-foot .tile { font-size: 1.05rem; }

/* Tables */
table.castdvr { width: 100%; border-collapse: collapse; }
table.castdvr th, table.castdvr td {
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--cd-border);
    vertical-align: middle;
}
table.castdvr th { background: var(--cd-surface-2); text-align: left; font-weight: 600; }
table.castdvr tr:hover td { background: var(--cd-surface-2); }

.flash {
    padding: .75rem 1rem; border-radius: 8px; border: 1px solid var(--cd-border);
    background: var(--cd-surface); margin-bottom: 1rem;
}
.flash.success { border-color: var(--cd-teal); background: rgba(0,201,141,.08); }
.flash.error   { border-color: var(--cd-error); background: rgba(185,28,28,.08); }
.flash.warning { border-color: var(--cd-warning); background: rgba(217,119,6,.08); }

.muted { color: var(--cd-muted); }
.no-underline { text-decoration: none; }