/* ── ABCC Media Admin — Shared Stylesheet ────────────────────────────────── */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: #f0f2f5;
    color: #1a1a2e;
    font-family: monospace;
    font-size: 13px;
}

/* ── Header / Nav ── */
header {
    background: #1a0a2e;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid #0d0620;
    flex-shrink: 0;
}
header h1 { font-size: 16px; color: #fff; }
header nav a {
    color: #bbb;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 3px;
}
header nav a:hover  { background: #2a1a4a; color: #fff; }
header nav a.active { background: #2a1a4a; color: #fff; }
header .clock       { margin-left: auto; color: #888; }

/* ── Page layout ── */
.page { padding: 12px 12px; display: flex; flex-direction: column; gap: 16px; }

/* ── Sections ── */
section {
    background: #fff;
    border: 1px solid #d0d4de;
    border-radius: 6px;
}
section > h2 {
    padding: 10px 16px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #555;
    border-bottom: 1px solid #d0d4de;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: normal;
    background: #f7f8fb;
    border-radius: 6px 6px 0 0;
}
section > h2 .badge {
    background: #e0e4ee;
    color: #444;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
}

/* ── Tables ── */
table { width: 100%; border-collapse: collapse; }
th {
    text-align: left;
    padding: 3px 10px;
    color: #666;
    font-weight: normal;
    border-bottom: 1px solid #d0d4de;
    font-size: 11px;
    background: #f7f8fb;
}
td {
    padding: 3px 10px;
    border-bottom: 1px solid #e8eaf0;
    vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tr:hover td      { background: #f0f4ff; }
tr.pkg-first-row td { border-top: 2px solid #c8cce0; }
tr.pkg-first-row:first-child td { border-top: none; }

/* ── Utility colours ── */
.ok   { color: #1a7a1a; }
.warn { color: #b06000; }
.err  { color: #cc1a1a; }
.dim  { color: #999; }

/* ── Tags (source type labels) ── */
.tag {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 3px;
    font-size: 11px;
    background: #e0e4ee;
    color: #444;
    margin-right: 4px;
}
.tag.wp  { background: #ddeeff; color: #1155aa; }
.tag.yt  { background: #ffdddd; color: #aa1111; }
.tag.pkg { background: #ddfff0; color: #116633; }

/* ── Pills ── */
.pill {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    background: #e0e4ee;
    color: #444;
}
.pill.live    { background: #ffeedd; color: #cc4400; }
.pill.today   { background: #ddfff0; color: #116633; }
.pill.ondisk  { background: #ddfff0; color: #116633; font-size: 10px; }
.pill.missing { background: #ffdddd; color: #cc1111; font-size: 10px; }

/* ── Progress bar ── */
.progress-bar  { height: 4px; background: #d0d4de; border-radius: 2px; margin-top: 3px; }
.progress-fill { height: 4px; background: #2a7a2a; border-radius: 2px; }

/* ── Active row ── */
.active-row td { background: #eaffea !important; }
.active-row td:first-child { border-left: 3px solid #2a7a2a; padding-left: 13px; }

/* ── Sidebar (help.php) ── */
.sidebar {
    width: 200px;
    flex-shrink: 0;
    background: #f7f8fb;
    border-right: 1px solid #d0d4de;
    overflow-y: auto;
    padding: 12px 0;
}
.sidebar-section {
    padding: 6px 14px 2px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
}
.sidebar a {
    display: block;
    padding: 5px 16px;
    color: #555;
    text-decoration: none;
    font-size: 12px;
    border-left: 2px solid transparent;
}
.sidebar a:hover  { color: #1a1a2e; background: #eceef8; }
.sidebar a.active { color: #1a0a2e; border-left-color: #5a2fcc; background: #eceef8; }

/* ── Schedule group headers ── */
.group-header {
    padding: 4px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid #e0e4ee;
}
.group-header:first-of-type { border-top: none; }
.group-label  { font-size: 13px; font-weight: bold; }
.group-notes  { font-size: 11px; color: #999; margin-left: auto; }

/* ── Package accordion ── */
.pkg-header {
    padding: 10px 16px;
    border-top: 1px solid #e0e4ee;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.pkg-header:first-of-type { border-top: none; }
.pkg-header:hover         { background: #f0f4ff; }
.pkg-header .pkg-name     { font-weight: bold; color: #1a1a2e; }
.pkg-header .pkg-meta     { font-size: 11px; color: #999; margin-left: auto; }
.pkg-body                 { display: none; }
.pkg-body.open            { display: block; }

/* ── Links ── */
a.yt-link { color: #1a55cc; text-decoration: none; font-family: monospace; }
a.yt-link:hover { text-decoration: underline; }
a.link    { color: #1a55cc; text-decoration: none; }
a.link:hover { text-decoration: underline; }

/* ── Buttons ── */
.btn-blue { background:#ddeeff; color:#1155aa; border:1px solid #aaccee; padding:3px 12px; border-radius:3px; cursor:pointer; font-size:12px; }
.btn-blue:hover { background:#cce0ff; }
.btn-blue:disabled { opacity:.5; cursor:default; }

/* ── Nav header right side ── */
.nav-right { margin-left:auto; display:flex; align-items:center; gap:16px; }
.nav-clock  { font-size:12px; color:#999; }
.nav-user   { font-size:12px; color:#bbb; }
.nav-logout { font-size:12px; color:#f87171; text-decoration:none; }
.nav-logout:hover { text-decoration:underline; }

/* ── Misc ── */
.size { color:#8a6a00; }
.mono { font-family:monospace; font-size:12px; }
.pad  { padding:12px 16px; }
.pad-lg { padding:16px; }
.flex-wrap { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }