* { box-sizing: border-box; }

html {
    /* Scales base text size gently with viewport width - keeps things
       readable on phones without becoming huge on desktop. */
    font-size: clamp(17px, 1vw + 13px, 20px);
    /* Mobile browsers (Safari in particular) automatically inflate text
       they judge "too small to read" within narrow columns, on top of
       whatever font-size is actually set - this disables that so text
       renders at exactly the size specified, consistently across
       devices, rather than getting unpredictably boosted on some
       layouts and not others. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Light mandala watermark over a white page - matches the original site's
   look (a subtle tan mandala print fading in from the top), rather than a
   solid dark background. */
body {
    font-family: 'Droid Serif', Georgia, serif;
    margin: 0;
    color: #222;
    background-color: #fff;
    background-image:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.4)),
        url('images/mandala.png');
    background-size: 220px;
    background-repeat: repeat;
    background-attachment: fixed;
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 16px;
    padding-top: 66px;
    padding-bottom: 70px;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.container.container-no-nav { padding-top: 16px; }
.container.container-centered .main.loginpage { margin-top: 15vh; }

/* --- Fixed top navigation bar (mirrors the fixed footer at the bottom) --- */
.top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 200;
    background: #1a5940;
    padding: 8px 12px;
    transform: translateZ(0);
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    box-sizing: border-box;
}
.top-nav-inner {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.nav-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.top-nav .button {
    margin: 0;
    padding: 9px 16px;
    font-size: 0.9rem;
    min-height: 36px;
    flex: 0 0 auto;
    box-shadow: none;
}
.top-nav .button:hover { transform: none; }

.nav-dropdown-right { position: relative; }
.nav-gear-trigger {
    position: relative;
    cursor: pointer;
    background: rgba(255,255,255,0.12);
    border: none;
    color: #fff;
    font-size: 1.3rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-gear-trigger:hover { background: rgba(255,255,255,0.22); }
.nav-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    display: inline-block;
    background: #b00020;
    color: #fff;
    font-size: 0.65rem;
    font-weight: bold;
    border-radius: 10px;
    padding: 1px 5px;
    line-height: 1.3;
}
.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    min-width: 220px;
    max-width: calc(100vw - 24px);
    padding: 6px;
    z-index: 300;
}
.nav-dropdown-menu.open { display: block; }
.nav-dropdown-menu a {
    display: block;
    padding: 10px 14px;
    color: #0b3d2e;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95rem;
    border-radius: 6px;
    white-space: nowrap;
}
.nav-dropdown-menu a:hover { background: rgba(11,61,46,0.08); }
.nav-dropdown-divider { border-top: 1px solid #eee; margin: 4px 0; }

/* --- Header / logo lockup --- */
.header { text-align: center; padding: 16px 0; }
.header.header-compact { padding: 0; }
.header.header-userbar-only { padding: 8px 0 0; }
.header.header-compact + .main, .header.header-userbar-only + .main { margin-top: 0; padding-top: 8px; }
.logo-lockup {
    display: flex;
    width: fit-content;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-decoration: none;
    flex-wrap: wrap;
}
.logo-lockup .bannerLogo {
    height: 130px;
    width: auto;
    filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.3));
}
.logo-lockup .bannerText {
    height: 105px;
    width: auto;
    filter: drop-shadow(4px 4px 4px rgba(0,0,0,0.3));
}
.user-bar {
    background: rgba(11, 61, 46, 0.08);
    color: #0b3d2e;
    padding: 8px 14px;
    margin: 10px auto 0;
    border-radius: 6px;
    font-size: 0.95rem;
    display: inline-block;
}

.title h1 {
    text-align: center;
    color: #9c6206;
    font-style: italic;
    font-weight: 700;
    font-size: clamp(1.5rem, 5vw, 2rem);
}
.main h1 {
    color: #9c6206;
    font-family: 'Droid Serif', serif;
    font-style: italic;
    font-weight: 700;
    text-align: center;
    font-size: 1.7rem;
}
.main h2 { font-size: 1.3rem; color: #0b3d2e; text-align: center; }
.main.loginpage { padding-top: 4px; margin-top: 0; }
.main.loginpage h1 { margin-top: 0; }

/* No opaque card - content sits directly on the mandala-watermarked page,
   matching the original site rather than boxing it in white. */
.main {
    padding: 20px 12px;
    margin: 10px 0;
    font-size: 1.05rem;
    text-align: center;
}
.main.admin { text-align: left; }
.main.admin h1 { text-align: center; }

.channel-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 500px));
    justify-content: center;
    gap: 24px;
    max-width: 1044px;
    margin: 0 auto;
    text-align: center;
}
.channel-card {
    border: 1px solid rgba(11,61,46,0.25);
    background: rgba(255,255,255,0.6);
    border-radius: 10px;
    padding: 32px 24px;
    text-align: center;
    width: 100%;
    scroll-margin-top: 80px;
}
.channel-card h3 { font-size: 1.5rem; color: #0b3d2e; margin-top: 0; margin-bottom: 16px; }

/* --- AV Tasks (Phase 3) --- */
.av-tasks-block { text-align: left; margin-bottom: 18px; border: 1px solid #e2dcc9; border-radius: 12px; padding: 14px; background: #fdf8f0; }
.av-tasks-summary { font-weight: bold; color: #0b3d2e; padding: 0 0 10px; text-align: center; }
.av-ondutytag { font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; background: #5a9c3a; color: #fff; padding: 2px 8px; border-radius: 999px; margin-left: 6px; }
.av-tile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) {
    .av-tile-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}
.av-tile-btn {
    background: #fff; border: 1.5px solid #e2dcc9; border-radius: 12px; padding: 14px 10px; text-align: center;
    cursor: pointer; position: relative; overflow: hidden; font-weight: 700; font-size: 0.85rem; color: #0b3d2e;
}
.av-tile-btn:hover { border-color: #5a9c3a; background: #f7faf3; }
.av-tile-btn.av-tile-active { border-color: #0b3d2e; background: #eef6e6; }
.av-tile-arrow { display: block; font-size: 1.3rem; margin-bottom: 4px; }
.av-tile-admin { border-style: dashed; color: #a1471d; }
.av-tile-ribbon { border-color: #5a9c3a; }
.av-ribbon {
    position: absolute; top: 8px; right: -24px; transform: rotate(45deg); width: 84px; text-align: center;
    background: #5a9c3a; color: #fff; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.03em;
    text-transform: uppercase; padding: 2px 0;
}
.av-panel { display: none; margin-top: 14px; padding-top: 14px; border-top: 1.5px solid #e2dcc9; }
.av-panel.open { display: block; }
.av-cl-section { margin-bottom: 14px; }
.av-cl-head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 5px; }
.av-cl-name { font-weight: 800; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: #0b3d2e; }
.av-cl-frac { font-size: 0.64rem; color: #999; font-weight: 700; }
.av-cl-progress { height: 4px; background: #f1efe8; border-radius: 99px; overflow: hidden; margin: 0 2px 8px; }
.av-cl-progress-fill { height: 100%; background: #5a9c3a; border-radius: 99px; }
.av-cl-item {
    display: flex; align-items: center; gap: 6px; width: 100%; margin-bottom: 5px; position: relative;
    background: #fff; border: 1.5px solid #e2dcc9; border-radius: 10px; font-family: inherit;
}
.av-cl-item.done { background: #f2f9ec; border-color: #cfe8ba; }
.av-cl-tick-area {
    display: flex; align-items: center; gap: 9px; flex: 1 1 auto; min-width: 0; padding: 8px 10px;
    cursor: pointer; text-align: left;
}
.av-cl-check {
    width: 18px; height: 18px; border-radius: 50%; border: 2px solid #c9c2ac; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center; font-size: 0.68rem; color: transparent;
}
.av-cl-item.done .av-cl-check { background: #5a9c3a; border-color: #5a9c3a; color: #fff; }
.av-cl-text { flex: 1 1 auto; min-width: 0; font-size: 0.74rem; color: #242018; line-height: 1.3; }
.av-cl-item.done .av-cl-text { color: #999; text-decoration: line-through; text-decoration-color: #c9dfc0; }
/* Small circular initials badge, overlaid on the item's corner rather
   than sitting inline - a full name would otherwise push the tile
   wider or wrap onto its own line. Purely decorative/informational, so
   it's fine for it to slightly overlap the text on a very long item. */
.av-cl-meta {
    position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%;
    background: #5a9c3a; color: #fff; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.02em;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    z-index: 1;
}

/* --- Inline per-miqaat checklist editing (admin-only) --- */
.av-cl-frac { display: flex; align-items: center; gap: 6px; }
.av-cl-del-section { background: none; border: 1px solid #ddd; border-radius: 6px; width: 20px; height: 20px; line-height: 1; cursor: pointer; color: #b00020; font-size: 0.78rem; }
.av-cl-del-section:hover { background: #fdecec; border-color: #b00020; }
.av-cl-del-item { background: none; border: 1px solid #ddd; border-radius: 6px; width: 20px; height: 20px; line-height: 1; cursor: pointer; color: #b00020; font-size: 0.78rem; flex: 0 0 auto; margin-right: 8px; }
.av-cl-del-item:hover { background: #fdecec; border-color: #b00020; }
.av-cl-add-items-input { width: 100%; margin-top: 6px; padding: 6px 8px; font-size: 0.74rem; font-family: inherit; border: 1px solid #ccc; border-radius: 8px; resize: vertical; }
.av-cl-add-items-btn { font-size: 0.7rem; font-weight: 700; color: #5a9c3a; background: none; border: 1.5px dashed #b8d6a0; border-radius: 8px; padding: 5px 10px; margin-top: 4px; cursor: pointer; }
.av-cl-new-section { margin-top: 10px; padding: 10px; border: 1.5px dashed #bbb; border-radius: 10px; }
.av-cl-new-section select, .av-cl-new-section-name, .av-cl-new-section-items { width: 100%; margin-bottom: 6px; padding: 6px 8px; font-size: 0.76rem; font-family: inherit; border: 1px solid #ccc; border-radius: 8px; }
.av-cl-add-section-btn { font-size: 0.72rem; font-weight: 700; color: #fff; background: #5a9c3a; border: none; border-radius: 8px; padding: 6px 12px; cursor: pointer; }

/* --- Manage Checklists (standalone page) --- */
.cl-section-card { background: #fff; border: 1px solid #ccc; border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.cl-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cl-section-name { color: #0b3d2e; }
.cl-item-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 0.85rem; border-bottom: 1px solid #f0ede2; }
.cl-item-row:last-child { border-bottom: none; }
.cl-item-text { flex: 1; }
.cl-delete-item { background: none; border: 1px solid #ccc; border-radius: 6px; width: 22px; height: 22px; line-height: 1; cursor: pointer; color: #b00020; font-size: 0.85rem; flex: 0 0 auto; }
.cl-delete-item:hover { background: #fdecec; border-color: #b00020; }
.cl-add-items-input { width: 100%; margin-top: 8px; padding: 7px 9px; font-size: 0.83rem; font-family: inherit; border: 1px solid #ccc; border-radius: 8px; resize: vertical; }

/* Compact pickers - deliberately NOT .button/.button.its52, which are
   sized for a single prominent CTA (Watch, etc) and look oversized
   when there are several in a row. */
.pick-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pick-pill {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
    border: 1.5px solid #d8d2bf; background: #fff; color: #444; font-size: 0.85rem; font-weight: 600;
    cursor: pointer; text-decoration: none; line-height: 1.2;
}
.pick-pill:hover { border-color: #5a9c3a; }
.pick-pill.active { background: #0b3d2e; border-color: #0b3d2e; color: #fff; }
.pick-pill.drag-handle-wrap { cursor: grab; }
.pick-pill.dragging { opacity: 0.5; }
.job-drag-handle { cursor: grab; font-size: 0.7rem; opacity: 0.6; margin-right: 2px; }
.av-job-row { padding: 8px 0; border-bottom: 1px dashed #e2dcc9; }
.av-job-row:last-child { border-bottom: none; }
.av-job-name { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; }
.av-job-mardo { color: #1f4e79; }
.av-job-bairao { color: #8a3b56; }
.av-job-control { color: #5c3a72; }
.av-job-other { color: #555; }
.av-job-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.av-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: 0.76rem; font-weight: 600; background: #f1efe8; }
.av-chip.av-job-mardo { background: #cfe0f5; color: #1f4e79; }
.av-chip.av-job-bairao { background: #f3d9e2; color: #8a3b56; }
.av-chip.av-job-control { background: #e8d9ef; color: #5c3a72; }
.av-chip-remove { background: none; border: none; cursor: pointer; font-size: 0.85rem; line-height: 1; padding: 0 0 0 2px; color: inherit; opacity: 0.6; }
.av-chip-remove:hover { opacity: 1; }
.av-add-form { position: relative; display: inline-block; }
.av-its-search { width: 140px; padding: 4px 8px; font-size: 0.78rem; border: 1.5px dashed #bdb598; border-radius: 999px; background: transparent; }
.av-its-search:focus { border-style: solid; border-color: #5a9c3a; outline: none; }
.av-its-results {
    display: none; position: absolute; top: 100%; left: 0; z-index: 20; background: #fff; border: 1px solid #e2dcc9;
    border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.15); min-width: 200px; max-height: 220px; overflow-y: auto; margin-top: 4px;
}
.av-its-results.open { display: block; }
.av-its-result-item { padding: 8px 12px; font-size: 0.82rem; cursor: pointer; }
.av-its-result-item:hover { background: #f4efe2; }
.av-its-result-its { color: #777; font-size: 0.76rem; margin-left: 4px; }

.banner.nil-raza { text-align: center; padding: 6px 20px 30px; font-size: clamp(1rem, 4vw, 1.2rem); }
.banner.nil-raza p { margin: 0 0 30px; line-height: 1.6; }

.status-badge { font-size: 0.9rem; font-style: italic; font-weight: normal; margin: 4px 0 10px; line-height: 1.4; }
.status-badge.status-active { color: #1b5e20; }
.status-badge.status-pending { color: #9c6206; }
.status-badge.status-inactive { color: #777; }

/* --- Buttons: every button shares the same rounded pill shape and
   dark-to-light-green hover glow (the look originally only used on the
   Watch/ITS-login buttons). .its52 remains only as a sizing modifier for
   the one hero call-to-action on a page (caps width, slightly bigger). --- */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: #1B3908;
    color: #fff !important;
    padding: 12px 26px;
    min-height: 48px;
    border-radius: 50px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: bold;
    margin: 6px 4px;
    line-height: 1.2;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.25);
    transition: all 0.2s ease-out 0s;
}
.button:hover {
    background-color: #2EE59D;
    box-shadow: 0 10px 30px rgba(46, 229, 157, 0.4);
    transform: translateY(-2px);
    color: #fff !important;
}
.button.its52 {
    padding: 18px 30px;
    min-height: 60px;
    font-size: 1.15rem;
    width: 100%;
    max-width: 320px;
}
.request-form-compact .button.its52 {
    padding: 12px 20px;
    font-size: 1rem;
}
.button:disabled {
    background: #999 !important;
    cursor: not-allowed;
    box-shadow: none !important;
    transform: none !important;
}
.button.danger { background: #b00020; }
.input-icon-wrap { position: relative; display: block; }
.input-icon-wrap input { padding-right: 42px !important; }
.icon-toggle-btn-inline {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.6;
}
.icon-toggle-btn-inline:hover { opacity: 0.9; }
.button.danger:hover { background: #7f0016; box-shadow: 0 10px 30px rgba(176, 0, 32, 0.4); }

.gradient {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    bottom: auto;
    margin: auto;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(90px circle at top center, rgba(99, 205, 207, .8) 30%, rgba(255, 255, 255, 0));
    animation: 18s linear 0s infinite move;
}
@keyframes move {
    0%   { transform: translatex(-140px); }
    25%  { transform: translatex(140px); opacity: 0.3; }
    50%  { transform: translatex(140px); opacity: 1; background: radial-gradient(90px circle at bottom center, rgba(99, 205, 207, .8) 30%, rgba(255, 255, 255, 0)); }
    75%  { transform: translatex(-140px); opacity: 0.3; }
    100% { opacity: 1; transform: translatex(-140px); background: radial-gradient(90px circle at top center, rgba(99, 205, 207, .8) 30%, rgba(255, 255, 255, 0)); }
}

.notice { text-align: center; }

/* Wrapper for the request page: form stays centered via .raza-card's own
   margin:auto, while the history sidebar is pulled out of normal flow so
   it doesn't affect that centering. */
.history-panel {
    max-width: 460px;
    margin: 20px auto 0;
    background: rgba(255,255,255,0.7);
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
.history-panel h3 { margin-top: 0; font-size: 1.05rem; color: #0b3d2e; text-align: center; }
.history-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(11,61,46,0.12);
    text-align: left;
}
.history-row:last-child { border-bottom: none; }
.history-miqaat { font-weight: bold; color: #222; }
.history-status { text-align: right; }

/* Compact card container for the raza request form */
.raza-card {
    background: rgba(255,255,255,0.75);
    border-radius: 14px;
    padding: 16px 20px 18px;
    max-width: 460px;
    margin: 0 auto;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    text-align: center;
}
.its-badge {
    display: inline-block;
    background: rgba(11, 61, 46, 0.08);
    color: #0b3d2e;
    font-weight: normal;
    padding: 8px 14px;
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 0.95rem;
    line-height: 1.4;
    text-align: left;
}
.id-pills {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
}
.id-pills .its-badge { margin-bottom: 0; }

.form-grid-2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 14px;
}
.form-grid-2 input, .form-grid-2 select { min-width: 0; }
.form-grid-2 label {
    display: block;
    margin: 14px 0 6px;
    font-weight: bold;
    font-size: 1.05rem;
}
@media (max-width: 560px) {
    .form-grid-2 { grid-template-columns: 1fr; }
}

.request-form { text-align: left; max-width: 500px; margin: 0 auto; }
.request-form .button.its52 {
    display: block;
    margin: 18px auto 0;
}
.request-form > label { display: block; margin: 14px 0 6px; font-weight: bold; font-size: 1.05rem; }
.request-form-compact > label { margin: 8px 0 4px; font-size: 0.9rem; }
.request-form input, .request-form select, .request-form textarea {
    width: 100%; padding: 14px; border: 1px solid #ccc; border-radius: 6px; font-size: 1.05rem; background: #fff;
}
.request-form input[type="datetime-local"] {
    min-width: 0;
    max-width: 100%;
}
.request-form-compact input, .request-form-compact select, .request-form-compact textarea {
    padding: 8px 10px;
    font-size: 0.9rem;
}
.request-form-compact textarea { min-height: 50px; }
.group-checklist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 6px 16px;
    margin: 6px 0 14px;
}
.request-form label.checkbox-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: normal;
    font-size: 1rem;
    margin: 0;
}
.checkbox-inline input[type="checkbox"], .checkbox-inline input[type="radio"] { width: auto; flex: 0 0 auto; }
.checkbox-inline em { font-size: 0.85rem; color: #666; }

.pill-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 4px 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(11,61,46,0.2);
}
.pill-menu a {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 6px;
    background: rgba(11,61,46,0.08);
    color: #0b3d2e;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.8rem;
}
.pill-menu a.active {
    background: #0b3d2e;
    color: #fff;
}
.pill-menu a:hover:not(.active) { background: rgba(11,61,46,0.18); }

.table-wrap { overflow-x: auto; margin: 16px 0; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; background: rgba(255,255,255,0.75); }
.admin-table th, .admin-table td { border: 1px solid #ccc; padding: 6px 8px; text-align: left; }
.admin-table .button { padding: 7px 12px; font-size: 0.8rem; min-height: 32px; margin: 2px 1px; width: auto; }

/* Shared, unifying system for the five main admin listing tables (Raza
   Requests, Manage Miqaats, Permission Groups, Guests, Manage Staff) -
   one CSS pattern reused everywhere, rather than a bespoke solution per
   page, so any future table added to this project gets the same
   responsive treatment for free.

   Desktop: lighter row dividers instead of heavy cell borders, wider use
   of the available width, small colored text links for actions instead
   of full button pills, colored badges for status/group/role.

   Mobile (below 700px): switches from table to stacked cards entirely -
   .admin-table-wrap holds both a <table class="admin-table-wide"> and a
   <div class="admin-cards">, and the media query below shows only one
   of the two depending on viewport width. */
.admin-table-wrap { background: #fff; border-radius: 8px; padding: 8px 12px; }
.admin-table-wide { width: 100%; border-collapse: collapse; font-size: 0.75rem; table-layout: fixed; background: transparent; }
.admin-table-wide th, .admin-table-wide td { border: none; border-bottom: 1px solid #e2ddd0; padding: 7px 6px; text-align: left; vertical-align: top; }
.admin-table-wide th { font-weight: bold; color: #666; font-size: 0.68rem; }
.admin-table-wide tbody tr:last-child td { border-bottom: none; }

.admin-action-link { text-decoration: none; font-weight: bold; margin-right: 12px; font-size: 0.75rem; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; }
.admin-action-link:last-child { margin-right: 0; }
.admin-action-link.approve { color: #1a8a1a; }
.admin-action-link.edit { color: #0c66c2; }
.admin-action-link.deny, .admin-action-link.delete, .admin-action-link.revoke, .admin-action-link.remove { color: #d3232f; }

.admin-badge { display: inline-block; font-size: 0.68rem; padding: 2px 8px; border-radius: 12px; white-space: nowrap; }
.admin-badge.group { background: #e6f1fb; color: #0c447c; }
.admin-badge.role { background: #eeedfe; color: #3c3489; white-space: normal; max-width: 130px; text-align: center; line-height: 1.3; }
.admin-badge.status-active { background: #eaf3de; color: #27500a; }
.admin-badge.status-pending { background: #faeeda; color: #633806; }
.admin-badge.status-inactive { background: #f1efe8; color: #444441; }
.admin-badge.status-neutral { background: #f1efe8; color: #444441; }
.admin-badge.denied, .admin-badge.revoked, .admin-badge.expired { background: #fbe4e4; color: #b00020; }
.admin-badge.approved { background: #eaf3de; color: #27500a; }

/* Reuses the existing .su-info popup pattern exactly (same circle, same
   floating panel) for any long text field (Reason, guest travel notes,
   etc.) - kept as its own class name for clarity at the call site, but
   deliberately identical styling. */
.admin-r-popup summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 1px solid #aaa; border-radius: 50%; font-size: 0.65rem; font-style: italic; font-family: Georgia, serif; }
.admin-r-popup summary::-webkit-details-marker { display: none; }
.admin-r-popup summary::marker { content: ''; }
.admin-r-popup { position: relative; display: inline-block; }
.admin-r-popup[open] p { display: block; }
.admin-r-popup p { position: absolute; z-index: 50; width: 260px; max-width: 80vw; font-size: 0.72rem; font-weight: normal; color: #333; background: #fdf8f0; border: 1px solid #ccc; border-radius: 8px; padding: 10px 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.25); }

/* Same popup-panel mechanism as .admin-r-popup, but for a plain text
   trigger (e.g. an expiry date) rather than a small circular icon - the
   circle-icon's fixed 16x16 flex sizing was being applied to variable-
   width text when the two were sharing one class, causing odd rendering. */
.admin-text-popup summary { cursor: pointer; list-style: none; display: inline; border-bottom: 1px dotted #999; font-size: inherit; font-weight: inherit; }
.admin-text-popup summary::-webkit-details-marker { display: none; }
.admin-text-popup summary::marker { content: ''; }
.admin-text-popup { position: relative; display: inline-block; }
.admin-text-popup[open] p { display: block; }
.admin-text-popup p { display: none; position: absolute; top: 130%; right: 0; z-index: 20; width: 220px; max-width: 70vw; font-size: 0.72rem; font-weight: normal; color: #333; background: #fdf8f0; border: 1px solid #ccc; border-radius: 8px; padding: 8px 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.15); }

.admin-cards { display: none; }
.admin-card { border: 1px solid #e2ddd0; border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; background: #fff; }
.pending-selectable.pending-selected { border: 2px solid #1a5940; background: #eef5ef; }
tr.pending-selectable.pending-selected { outline: 2px solid #1a5940; outline-offset: -2px; background: #eef5ef; }
.admin-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.admin-card-name { font-weight: bold; font-size: 0.85rem; }
.admin-card-meta { font-size: 0.68rem; color: #777; margin-top: 2px; }
.admin-card-line { font-size: 0.72rem; color: #555; margin-top: 5px; }
.admin-card-actions { margin-top: 8px; }

@media (max-width: 700px) {
    .admin-table-wide { display: none; }
    .admin-cards { display: block; }
}

/* Shared admin modal system - reuses the same visual style as the
   existing timeline/watchtime modals for consistency, but generic
   enough for any admin form (Add/Edit Miqaat, Add Staff, Add to Group). */
.admin-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 200;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}
/* For short modals (like Devices) that don't need the top-aligned
   scroll behaviour the taller forms (Add Miqaat/Staff/Group) rely on -
   matches how Timeline/Watch Time open vertically centered. */
.admin-modal-overlay.center-modal { align-items: center; }
.admin-modal-overlay.open { display: flex; }
.admin-modal-box {
    background: #fdf8f0;
    border-radius: 12px;
    padding: 20px;
    max-width: 520px;
    width: 100%;
    margin: 20px 0;
}
.admin-modal-box h3 { margin-top: 0; }
.admin-modal-close {
    position: absolute;
    top: 10px; right: 14px;
    background: none;
    border: none;
    font-size: 1.4rem;
    color: #777;
    cursor: pointer;
    line-height: 1;
}
.admin-modal-box { position: relative; }

/* Small, clean, non-pill button for admin actions like "Add Miqaat" -
   large pills are reserved for end-user-facing buttons (Watch, Request
   raza, etc.), not for staff-only admin controls. */
.admin-clean-btn {
    display: inline-block;
    background: #1B3908;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
}
.admin-clean-btn:hover { background: #2a5510; }

/* Name/ITS typeahead search used for Add Staff and Add to Group -
   searches its_cache live as you type, so you don't need to already
   know someone's ITS number. */
.admin-search-wrap { position: relative; }
.admin-search-results {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #fff;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 220px;
    overflow-y: auto;
    z-index: 30;
    display: none;
}
.admin-search-results.open { display: block; }
.admin-search-result-item {
    padding: 8px 10px;
    cursor: pointer;
    font-size: 0.85rem;
    border-bottom: 1px solid #eee;
}
.admin-search-result-item:last-child { border-bottom: none; }
.admin-search-result-item:hover, .admin-search-result-item.active { background: #f1efe8; }
.admin-search-result-its { color: #777; font-size: 0.78rem; }

.admin-filter-input {
    width: 100%;
    max-width: 320px;
    padding: 7px 10px;
    font-size: 0.85rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin: 8px 0 14px;
}

.admin-nav { list-style: none; padding: 0; text-align: center; max-width: 500px; margin: 0 auto; }
.admin-nav li { margin: 14px 0; }
.admin-nav a { color: #0b3d2e; font-weight: bold; text-decoration: none; font-size: 1.2rem; }

.error { color: #b00020; font-weight: bold; }
.success { color: #1b5e20; font-weight: bold; }

/* Pale green footer bar, matching the original site — fixed to the bottom
   of the viewport, full width, always on top of scrolling content. */
.footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 100;
    text-align: center;
    background-color: palegreen;
    color: darkolivegreen;
    font-size: 0.85rem;
    padding: 10px 12px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.problem { margin-top: auto; text-align: center; color: #444; font-size: 0.9rem; padding: 12px 0; }
.problem a { color: #0b3d2e; font-weight: bold; }

.yt-cntainer {
    position: relative;
    aspect-ratio: 16/9;
    width: min(calc(100vw - 40px), calc((100vh - 220px) * 16 / 9));
    max-width: min(calc(100vw - 40px), calc((100vh - 220px) * 16 / 9));
    margin-left: 50%;
    transform: translateX(-50%);
}
.yt-cntainer iframe { width: 100%; height: 100%; display: block; margin: 0; padding: 0; border: 0; }
.yt-mask {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.yt-mask::before, .yt-mask::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    background: var(--yt-mask-color, #000);
    opacity: var(--yt-mask-opacity, 1);
    pointer-events: auto;
}
.yt-mask::before { top: var(--yt-mask-offset-top, 0%); height: var(--yt-mask-height-top, 10%); }
.yt-mask::after { bottom: var(--yt-mask-offset-bottom, 0%); height: var(--yt-mask-height-bottom, 10%); }
.yt-mask.yt-mask-disabled { display: none !important; }

@media (max-width: 600px) {
    .main { padding: 16px 8px; }
    .channel-list { grid-template-columns: 1fr; }
    .logo-lockup .bannerLogo { height: 90px; }
    .logo-lockup .bannerText { height: 72px; }
    .button:not(.its52) { width: 100%; }
    .top-nav .button { width: auto; }
    .container { padding-bottom: 110px; padding-top: 70px; }
    .footer { font-size: 0.72rem; padding: 10px 8px; }
    .admin-modal-box { padding: 16px 12px; }
    .request-form input[type="datetime-local"] { padding: 10px 6px; font-size: 0.95rem; }
}
/* Compact settings pages (e.g. Superuser) with many stacked small sections */
.compact-settings h2 { font-size: 1rem; margin: 14px 0 4px; }
.compact-settings h3 { font-size: 0.95rem; margin: 10px 0 4px; }
.compact-settings > p { font-size: 0.8rem; color: #666; margin: 0 0 8px; max-width: 480px; margin-left: auto; margin-right: auto; }
.compact-settings .request-form { max-width: 400px; margin: 0 auto; font-size: 0.82rem; line-height: 1.3; }
.compact-settings .request-form > label { font-size: 0.82rem; margin: 3px 0 1px; }
.compact-settings .request-form input, .compact-settings .request-form select {
    padding: 4px 8px; font-size: 0.82rem; margin-bottom: 0;
}
.compact-settings label.checkbox-inline { font-size: 0.82rem; margin: 4px 0; }
.compact-settings .button { padding: 6px 12px; font-size: 0.8rem; min-height: auto; margin: 4px 2px 0; }
.compact-settings .button.its52 { padding: 7px 16px; font-size: 0.82rem; width: auto; max-width: none; display: inline-block; }

.compact-settings details {
    background: rgba(255,255,255,0.7);
    border-radius: 10px;
    margin: 2px auto;
    max-width: 460px;
    padding: 2px 14px;
}
.compact-settings summary {
    cursor: pointer;
    font-weight: bold;
    font-size: 0.95rem;
    color: #0b3d2e;
    padding: 6px 0;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}
.compact-settings summary::-webkit-details-marker { display: none; }
.compact-settings summary::before { content: '▸ '; }
.compact-settings details[open] summary::before { content: '▾ '; }
.compact-settings details[open] summary { border-bottom: 1px solid rgba(11,61,46,0.15); margin-bottom: 6px; }
.compact-settings details > *:not(summary) { padding-bottom: 6px; }

.viewer-toggle {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: #555;
    cursor: pointer;
    text-decoration: underline dotted;
}
.viewer-toggle:hover { color: #0b3d2e; }
/* .viewer-toggle's own font:inherit/color/underline were silently
   overriding .admin-action-link's sizing and color on any button
   carrying both classes (later rule, equal specificity) - this
   compound selector has higher specificity, so it wins correctly
   without touching viewer-toggle's standalone look used elsewhere
   (e.g. Stream Health). */
.admin-action-link.viewer-toggle { font-size: 0.75rem; text-decoration: none; color: #3d9140; }
.viewer-names {
    color: #444;
    background: rgba(11,61,46,0.06);
    border-radius: 6px;
    padding: 8px 10px;
    margin: 0 0 10px;
    text-align: left;
    white-space: pre;
    overflow-x: auto;
}

.center { display: block; margin: 0 auto; filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.3)); }

.yt-custom-wrapper {
    position: relative;
    aspect-ratio: 16/9;
    width: min(calc(100vw - 40px), calc((100vh - 220px) * 16 / 9));
    max-width: min(calc(100vw - 40px), calc((100vh - 220px) * 16 / 9));
    margin-left: 50%;
    transform: translateX(-50%);
}
.yt-custom-wrapper:fullscreen, .yt-custom-wrapper:-webkit-full-screen, .yt-custom-wrapper:-moz-full-screen {
    max-width: none;
}
.yt-custom-wrapper .yt-cntainer {
    width: 100%;
    max-width: none;
    margin-left: 0;
    transform: none;
}

.yt-play-overlay {
    display: flex;
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    gap: var(--yt-btn-gap, 6%);
    background: transparent;
    cursor: pointer;
    z-index: 5;
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.yt-play-overlay.controls-visible {
    background: rgba(0,0,0,0.35);
    opacity: 1;
}
.yt-play-wrap, .yt-fullscreen-wrap { position: relative; flex-shrink: 0; width: var(--yt-btn-size, 19%); aspect-ratio: 1; }
.yt-btn-label {
    position: absolute;
    bottom: 112%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 0.65rem;
    font-weight: bold;
    color: #0b3d2e;
    background: #fdf8f0;
    padding: 2px 8px;
    border-radius: 10px;
    pointer-events: none;
}

.yt-custom-play-btn, .yt-custom-fullscreen-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease;
    pointer-events: auto;
    width: 100%;
    height: 100%;
}
.yt-custom-play-btn svg, .yt-custom-fullscreen-btn svg {
    width: 100%;
    height: 100%;
}
.yt-custom-play-btn:hover, .yt-custom-fullscreen-btn:hover { transform: scale(1.08); }

.yt-volume-wrap { position: relative; flex-shrink: 0; width: var(--yt-btn-size, 19%); aspect-ratio: 1; }
.yt-custom-volume-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    transition: transform 0.15s ease;
}
.yt-custom-volume-btn:hover { transform: scale(1.08); }
.yt-custom-volume-btn svg { width: 100%; height: 100%; }
.yt-volume-slider-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: absolute;
    top: 115%;
    left: 0;
    width: 100%;
    background: #fdf8f0;
    border-radius: 20px;
    padding: 6px 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    box-sizing: border-box;
}
.yt-volume-slider {
    appearance: none;
    -webkit-appearance: none;
    flex: 1 1 auto;
    min-width: 0;
    height: 6px;
    background: rgba(11,61,46,0.2);
    border-radius: 3px;
    accent-color: #5a9c3a;
    cursor: pointer;
    display: block;
    margin: 0;
}
.yt-volume-pct {
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: bold;
    color: #0b3d2e;
    min-width: 2.4em;
    text-align: right;
}


.yt-seek-bar {
    position: absolute;
    left: 0; right: 0;
    bottom: 6%;
    padding: 0 4%;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.yt-custom-wrapper.controls-visible .yt-seek-bar {
    opacity: 1;
    pointer-events: auto;
}
.yt-seek-track {
    position: relative;
    width: 100%;
    height: 5px;
    background: rgba(255,255,255,0.3);
    border-radius: 3px;
    cursor: pointer;
}
.yt-seek-progress {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 0%;
    background: #5a9c3a;
    border-radius: 3px;
    pointer-events: none;
}
.yt-seek-handle {
    position: absolute;
    top: 50%; left: 0%;
    width: 14px; height: 14px;
    background: #5a9c3a;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.yt-seek-bar { display: flex; align-items: center; gap: 8px; }
.yt-seek-track { flex: 1; }
.yt-time-label {
    flex-shrink: 0;
    color: #fff;
    font-size: 0.7rem;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    white-space: nowrap;
}
.yt-custom-live-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    background: #5a9c3a;
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 4px 8px;
    cursor: pointer;
}
.yt-live-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #fff;
    display: inline-block;
}
@keyframes yt-live-edge-flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}
.yt-custom-live-btn.yt-at-live-edge {
    background: #b00020;
    color: #fff;
    animation: yt-live-edge-flash 1.2s ease-in-out infinite;
}
.yt-custom-live-btn.yt-at-live-edge .yt-live-dot { background: #fff; }

.yt-settings-wrap { position: relative; flex-shrink: 0; width: var(--yt-btn-size, 19%); aspect-ratio: 1; }
.yt-custom-settings-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    transition: transform 0.15s ease;
}
.yt-custom-settings-btn:hover { transform: scale(1.08); }
.yt-custom-settings-btn svg { width: 100%; height: 100%; }
.yt-quality-label {
    position: absolute;
    top: 116%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 0.65rem;
    font-weight: bold;
    color: #0b3d2e;
    background: #fdf8f0;
    padding: 2px 8px;
    border-radius: 10px;
    pointer-events: auto;
    cursor: pointer;
}
.yt-quality-menu {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fdf8f0;
    border-radius: 6px;
    padding: 4px;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    max-height: 35vh;
    overflow-y: auto;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    z-index: 6;
}
.yt-quality-menu.open { display: grid; }
.yt-quality-item {
    background: none;
    border: none;
    text-align: left;
    padding: 6px 10px;
    font-size: 0.78rem;
    color: #0b3d2e;
    cursor: pointer;
    border-radius: 4px;
    flex-shrink: 0;
    white-space: nowrap;
}
.yt-quality-item:hover { background: rgba(11,61,46,0.08); }
.yt-quality-item.active { font-weight: bold; background: rgba(90,156,58,0.18); }

.yt-mask { transition: opacity 0.2s ease; }
.yt-custom-wrapper.relay-mask-autohidden .yt-mask,
.yt-cntainer.relay-mask-autohidden .yt-mask { opacity: 0 !important; pointer-events: none !important; }

.yt-mask-tap-catcher {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 4;
    pointer-events: none;
}
.yt-custom-wrapper.relay-mask-autohidden .yt-mask-tap-catcher {
    pointer-events: auto;
    cursor: pointer;
}

/* Dev/Superuser settings layout - label-left, input-right grid, used
   throughout to cut vertical height instead of stacking each field. */
.su-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    text-align: left;
}
.su-row:last-of-type { border-bottom: none; }
.su-row-label { flex: 1 1 auto; font-weight: normal; }
.su-row input[type="text"], .su-row input[type="number"], .su-row input[type="email"],
.su-row input[type="color"], .su-row select {
    flex: 0 0 auto;
    width: 140px;
    max-width: 45%;
}
.su-row input[type="checkbox"] { flex: 0 0 auto; }
.su-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}
.su-toggle-row:last-of-type { border-bottom: none; }
.su-toggle-row .su-status { font-size: 0.85rem; white-space: nowrap; }
.su-toggle-row form { display: inline-flex; margin: 0; }
.su-toggle-row .button { padding: 6px 12px; font-size: 0.85rem; white-space: nowrap; }

/* Shared toggle-switch component - used for every admin on/off setting
   (Dev/Superuser settings, Manage Miqaats Advanced checkboxes, Permission
   Groups, Raza Requests notify preference). One visual language for every
   binary setting in the admin area, whether it auto-submits on change or
   is part of a larger Save-button form. */
.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}
.toggle-row:last-of-type { border-bottom: none; }
.toggle-row form { display: inline-flex; margin: 0; align-items: center; }
.toggle-row-label { font-size: 0.85rem; color: #0b3d2e; white-space: nowrap; }
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
    flex: 0 0 auto;
    vertical-align: middle;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-switch .toggle-track {
    position: absolute;
    inset: 0;
    background: #f1efe8;
    border: 1px solid #ccc;
    border-radius: 999px;
    transition: background-color 0.15s, border-color 0.15s;
}
.toggle-switch .toggle-thumb {
    position: absolute;
    height: 14px;
    width: 14px;
    left: 2px;
    top: 1.5px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
    transition: transform 0.15s;
}
.toggle-switch input:checked ~ .toggle-track { background: #5a9c3a; border-color: #5a9c3a; }
.toggle-switch input:checked ~ .toggle-thumb { transform: translateX(16px); }
.toggle-switch input:focus-visible ~ .toggle-track { outline: 2px solid #5a9c3a; outline-offset: 2px; }
/* Inline usage - a switch sitting next to its own label inline rather than
   in a full-width .toggle-row (e.g. checkboxes inside a bigger form). */
.checkbox-inline.toggle-inline { display: inline-flex; align-items: center; gap: 8px; }

/* (i) info toggle - collapses explanatory text out of the default view */
.su-summary-text { flex: 1 1 auto; }
.su-info {
    display: inline-block;
    position: relative;
    flex-shrink: 0;
    vertical-align: middle;
}
.su-info summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid #aaa;
    border-radius: 50%;
    font-size: 0.7rem;
    font-style: italic;
    font-family: Georgia, serif;
    color: #999;
}
.su-info summary::before,
.su-info summary::after,
.compact-settings details[open] .su-info summary,
.compact-settings details[open] .su-info[open] summary {
    content: none !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
}
.su-info summary::-webkit-details-marker { display: none; }
.su-info summary::marker { content: ''; }
.su-info p {
    position: absolute;
    top: 130%;
    right: 0;
    z-index: 20;
    width: 260px;
    max-width: 70vw;
    font-size: 0.8rem;
    font-weight: normal;
    color: #333;
    background: #fdf8f0;
    border-radius: 8px;
    padding: 10px 12px;
    margin: 0;
    text-align: left;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
/* Inside the narrow admin modal system (Add/Edit Miqaat, Add Staff,
   etc.), info triggers tend to sit near the left edge of the box - the
   default right:0 (expanding leftward from the trigger) pushes the
   popup off the left of the screen there. Expanding rightward instead
   fits better in this specific narrow context, without changing the
   default behaviour used on wider pages elsewhere. */
.admin-modal-box .su-info p {
    right: auto;
    left: 0;
}
.su-subsection {
    margin-top: 16px;
    padding-left: 10px;
    border-left: 2px solid rgba(11,61,46,0.15);
}
.su-section-heading {
    display: flex;
    align-items: center;
    cursor: pointer;
    list-style: none;
}
.su-section-heading::-webkit-details-marker { display: none; }
.su-section-heading::before { content: '▸ '; flex-shrink: 0; }
.su-subsection[open] > .su-section-heading::before { content: '▾ '; }
.su-subsection[open] > .su-section-heading { margin-bottom: 6px; }
.su-section-heading:first-child { margin-top: 0; }

.dev-drag-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px solid #eee;
    background: #fff;
}
.dev-drag-row.dragging { opacity: 0.5; }
.dev-drag-handle {
    cursor: grab;
    touch-action: none;
    color: #999;
    font-size: 1.1rem;
    padding: 4px 6px;
    flex-shrink: 0;
    user-select: none;
}
/* Prevents the browser's own long-press text-selection and (on iOS)
   the callout menu from interfering with the hold-to-reveal-delete
   gesture on revoked guest tiles - without this, holding down for even
   a short time can trigger native text selection first, which both
   highlights the tile's text and blocks the custom JS timer from ever
   completing. */
.guest-revoked-holdable {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.dev-drag-label {
    flex: 1 1 auto;
    font-size: 0.82rem;
    color: #0b3d2e;
}

/* Viewer stats info icon on the homepage - centered on the viewport
   rather than anchored to the icon's own position, since these cards
   are narrower than the Dev panel and a right-anchored popup could
   overflow off the edge of the screen. Built as a modifier on .su-info
   (not a separate class) so the existing close-on-click-elsewhere
   behavior, which specifically targets .su-info[open], still applies. */
.su-info.viewer-info-centered summary {
    border-color: #999;
    color: #999;
}
.su-info.viewer-info-centered[open] p {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;
    width: 280px;
    max-width: 85vw;
    max-height: 70vh;
    overflow-y: auto;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.viewer-stats-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: #555;
    margin: 3px 0;
}

.timeline-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 100;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.timeline-modal-overlay.open { display: flex; }
.timeline-modal-box {
    background: #fdf8f0;
    border-radius: 12px;
    padding: 20px;
    max-width: 700px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
}
.timeline-modal-box h3 { margin-top: 0; text-align: center; }
.timeline-modal-close {
    display: block;
    margin: 14px auto 0;
}

.watchtime-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 250;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.watchtime-modal-overlay.open { display: flex; }
.watchtime-modal-rotate { width: 100%; max-width: 700px; }
.watchtime-modal-box {
    background: #fdf8f0;
    border-radius: 12px;
    padding: 16px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}
.watchtime-modal-box h3 { margin: 0 0 14px; text-align: center; padding-top: 4px; }
.watchtime-modal-scroll { overflow: auto; flex: 1; }
.watchtime-table { width: 100%; border-collapse: collapse; font-size: 12px; color: #0b3d2e; white-space: nowrap; }
.watchtime-table th, .watchtime-table td { padding: 4px 6px; text-align: left; }
.watchtime-table th[data-sort] { cursor: pointer; }
.watchtime-table thead tr { border-bottom: 1px solid rgba(11,61,46,0.3); }
.watchtime-table tbody tr.person-row { cursor: pointer; border-bottom: 1px solid rgba(11,61,46,0.12); }
.watchtime-table tbody tr.session-row { font-style: italic; color: #5a7a68; border-bottom: 1px solid rgba(11,61,46,0.08); }

/* Draws attention to Stream Health when it worsens while the dashboard
   is already open, rather than requiring a page refresh to notice. */
@keyframes stream-health-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(176,0,32,0.5); }
    50% { box-shadow: 0 0 0 8px rgba(176,0,32,0); }
}
.stream-health-alert {
    animation: stream-health-pulse 1s ease-in-out 4;
    border-radius: 20px;
}

.yt-custom-wrapper.yt-cursor-hidden,
.yt-cntainer.yt-cursor-hidden { cursor: none; }

.yt-cursor-capture {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
    pointer-events: auto;
    cursor: default;
}
.yt-play-overlay.yt-cursor-hidden,
.yt-cntainer.yt-cursor-hidden { cursor: none !important; }

.yt-custom-play-btn, .yt-custom-volume-btn, .yt-custom-settings-btn, .yt-custom-fullscreen-btn {
    filter: var(--yt-btn-shadow, none);
}

.wt-chevron {
    display: inline-block;
    font-size: 8px;
    transition: transform 0.15s ease;
    color: #5a7a68;
}
.wt-chevron-open { transform: rotate(-90deg); }