/* =============================================================================
   adm.css — styles for the floating admin button injected by adm.js.
   -----------------------------------------------------------------------------
   Lives apart from player.css because adm.js runs on TWO very different pages:
   the channel (/tv/, dark palette from player.css) and the public homepage
   (/, LIGHT palette from assets/css/styles.css, which never defines --cream,
   --cream-dim, --onair or --line-soft, and whose --line is a dark hairline
   meant for a cream background).

   The panel is a dark glass sheet on both pages, so it carries its own palette
   instead of inheriting one: the block below re-declares every property the
   rules need, on the two elements adm.js injects. A declaration here outranks
   the inherited :root value, so the channel renders exactly as before — the
   values are copied verbatim from player.css — and the homepage stops picking
   up light-theme values that would wash the panel out.
   ========================================================================== */
.adm-fab,
.adm-sheet {
  --cream: #f6f1e7;
  --cream-soft: #cfc7b8;
  --cream-dim: #8e8878;
  --gold: #bf9b3f;
  --gold-2: #e7cd86;
  --onair: #d8453a;
  --line: rgba(246, 241, 231, 0.1);
  --line-soft: rgba(255, 255, 255, 0.08);
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Own copy of the entry animation: `pop` is defined in player.css, which the
   homepage does not load. */
@keyframes admPop { from { opacity: 0; transform: translateY(14px) scale(0.98); } }

/* ==========================================================================
   Floating admin button (adm.js)
   Sits above the page without taking part in its layout: nothing in the
   channel's structure moves because of it.
   ========================================================================== */
.adm-fab {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(191, 155, 63, 0.38);
  background: rgba(12, 14, 20, 0.42);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  color: var(--cream);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  opacity: 0.42;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), background 0.2s var(--ease);
}
.adm-fab:hover,
.adm-fab:focus-visible { opacity: 1; transform: translateY(-2px); background: rgba(191, 155, 63, 0.22); }
.adm-fab .ico { width: 18px; height: 18px; fill: none; stroke: var(--gold-2); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.adm-fab__txt { white-space: nowrap; }
.adm-fab.is-busy { opacity: 1; border-color: var(--gold-2); }

@media (max-width: 640px) {
  .adm-fab { padding: 0.75rem; }
  .adm-fab__txt { display: none; }
}

/* Out of the way while the video owns the screen. */
:fullscreen ~ .adm-fab,
body:has(:fullscreen) .adm-fab { display: none; }

.adm-sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  padding: 1rem;
  overflow-y: auto;
  background: rgba(3, 4, 7, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.adm-sheet.is-open { display: block; }

.adm-box {
  width: min(460px, 100%);
  margin: 6vh auto 2rem;
  background: linear-gradient(180deg, rgba(26, 30, 40, 0.97), rgba(12, 14, 20, 0.99));
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  animation: admPop 0.24s var(--ease);
}
.adm-box__head { display: flex; align-items: center; gap: 0.7rem; padding: 0.95rem 1.1rem; border-bottom: 1px solid var(--line-soft, rgba(255, 255, 255, 0.08)); }
.adm-box__head h3 { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; margin: 0; flex: 1; }
.adm-box__body { padding: 1.1rem; }
/* Scoped to the login copy on purpose: `.adm-msg` and `.adm-item__msg` are also
   paragraphs in here, and a `.adm-box__body p` rule would outrank their margins. */
.adm-login p { margin: 0 0 0.8rem; color: var(--cream-dim); font-size: 0.88rem; }
.adm-x { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.12); background: transparent; color: var(--cream); cursor: pointer; }
.adm-x:hover { background: rgba(255, 255, 255, 0.08); }
.adm-x .ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

.adm-drop {
  border: 1.5px dashed rgba(191, 155, 63, 0.4);
  border-radius: 14px;
  padding: 1.3rem 1rem;
  text-align: center;
  background: rgba(0, 0, 0, 0.26);
  transition: background 0.18s, border-color 0.18s;
}
.adm-drop.is-over { background: rgba(191, 155, 63, 0.14); border-color: var(--gold-2); }
.adm-drop b { display: block; font-family: var(--serif); font-size: 1rem; margin-bottom: 0.2rem; }
.adm-drop span { display: block; color: var(--cream-dim); font-size: 0.82rem; margin-bottom: 0.8rem; }
.adm-drop input[type="file"] { display: none; }

.adm-field { margin: 0.9rem 0; }
.adm-field label { display: block; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-dim); margin-bottom: 0.35rem; }
.adm-field input[type="text"],
.adm-field input[type="password"] {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.4);
  color: var(--cream);
  font: inherit;
  font-size: 0.92rem;
}
.adm-field input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(191, 155, 63, 0.16); }

.adm-check { display: flex; align-items: flex-start; gap: 0.55rem; margin: 0.5rem 0; font-size: 0.88rem; cursor: pointer; }
.adm-check input { margin: 0.2rem 0 0; accent-color: var(--gold); width: 17px; height: 17px; flex: none; }

.adm-live { display: flex; align-items: center; gap: 0.7rem; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.9rem; }
.adm-live input { margin: 0; accent-color: var(--onair); width: 18px; height: 18px; }
.adm-live small { display: block; color: var(--cream-dim); font-size: 0.78rem; }

.adm-queue { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.9rem; }
.adm-item { background: rgba(0, 0, 0, 0.32); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 11px; padding: 0.6rem 0.75rem; }
.adm-item__top { display: flex; justify-content: space-between; gap: 0.6rem; font-size: 0.84rem; }
.adm-item__top b { font-weight: 500; word-break: break-all; }
.adm-item__pct { color: var(--gold-2); flex: none; font-variant-numeric: tabular-nums; }
.adm-item__bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; margin-top: 0.45rem; }
.adm-item__fill { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--gold-2)); transition: width 0.25s; }
.adm-item__msg { margin: 0.4rem 0 0; font-size: 0.78rem; color: var(--cream-dim); }
.adm-item__msg.is-err { color: #f0a49d; }
.adm-item__msg.is-ok { color: #8fdcb4; }

.adm-foot { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 1rem; font-size: 0.84rem; }
.adm-foot a { color: var(--gold-2); }
.adm-foot .adm-spacer { flex: 1; }
.adm-msg { margin: 0.7rem 0 0; font-size: 0.85rem; min-height: 1.1em; }
.adm-msg.is-err { color: #f0a49d; }
.adm-msg.is-ok { color: #8fdcb4; }

/* ==========================================================================
   Homepage adjustments
   The public site has its own bottom-right floating button — the WhatsApp
   prayer widget (`.wa`, z-index 120) — which the channel does not, so both
   rules are gated on its presence rather than on a body class: lift the admin
   button clear of the widget, and raise the panel above it so the widget never
   floats over an open upload sheet.
   ========================================================================== */
body:has(.wa) .adm-fab { bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 5rem); }
body:has(.wa) .adm-sheet { z-index: 130; }