/* ===== settings.css ===== */
/* Headings stay professional and lighter */
body:not(.tv-body) h1,
body:not(.tv-body) h2,
body:not(.tv-body) h3,
body:not(.tv-body) h4,
body:not(.tv-body) .page-title h1,
body:not(.tv-body) .topbar-titles h1,
body:not(.tv-body) .modal-head h2,
body:not(.tv-body) .modal h2,
body:not(.tv-body) .dashboard-hero h2,
body:not(.tv-body) .v5-hero h2,
body:not(.tv-body) .media-hero h2,
body:not(.tv-body) .playlist-hero h2,
body:not(.tv-body) .settings-hero h2,
body:not(.tv-body) .users-hero h2,
body:not(.tv-body) .activity-hero h2,
body:not(.tv-body) .emergency-hero h2,
body:not(.tv-body) .help-hero.card h2,
body:not(.tv-body) .screens-hero h2,
body:not(.tv-body) .profile-hero h2,
body:not(.tv-body) #loginView #loginTitle,
body:not(.tv-body) .login-brand-headline,
body:not(.tv-body) .login-brand-row h1 {
  font-weight: var(--font-heading-weight) !important;
}

/* Keep form labels readable, not heavy */
body:not(.tv-body) label,
body:not(.tv-body) .form-row label,
body:not(.tv-body) .screen-upsert-form .form-row label,
body:not(.tv-body) #loginView .login-input-row label,
body:not(.tv-body) .range-row,
body:not(.tv-body) .range-row output,
body:not(.tv-body) .check-row label,
body:not(.tv-body) .light-only-note,
body:not(.tv-body) .info-strip,
body:not(.tv-body) .table th {
  font-weight: 600 !important;
}

/* Supporting text should remain soft */
body:not(.tv-body) small,
body:not(.tv-body) .page-description,
body:not(.tv-body) .help-steps,
body:not(.tv-body) .user-meta,
body:not(.tv-body) .activity-row time,
body:not(.tv-body) .preview-toolbar small,
body:not(.tv-body) .login-subtitle,
body:not(.tv-body) #loginView .login-subtitle {
  font-weight: 500 !important;
}

@media (max-width: 720px) {
  body:not(.tv-body) {
    --font-button-size: 12.5px;
  }
}


body:not(.tv-body) .emergency-preview #previewTitle,
body:not(.tv-body) .emergency-preview #previewMessage {
  transition: font-size .14s ease, font-weight .14s ease, text-decoration .14s ease;
}

/* Individual TV Override popup header: light theme with readable text/icons */
body:not(.tv-body) .emergency-modal-head {
  background: linear-gradient(180deg, #fff7f7 0%, #f8fbfc 100%) !important;
  border: 1px solid #f3c7c7 !important;
  border-bottom: 1px solid #e5edf2 !important;
  border-radius: 22px 22px 0 0 !important;
  color: #172b3a !important;
}
body:not(.tv-body) .emergency-modal-head .modal-title-stack,
body:not(.tv-body) .emergency-modal-head .modal-title-stack h2,
body:not(.tv-body) .emergency-modal-head .modal-title-stack p,
body:not(.tv-body) .emergency-modal-head .modal-kicker,
body:not(.tv-body) .emergency-modal-head svg {
  color: #172b3a !important;
  stroke: currentColor !important;
}
body:not(.tv-body) .emergency-modal-head .modal-kicker {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase;
}
body:not(.tv-body) .emergency-modal-head .modal-title-stack h2 {
  font-size: 15px !important;
  font-weight: 600 !important;
}
body:not(.tv-body) .emergency-modal-head .modal-title-stack p {
  color: #607383 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}
body:not(.tv-body) .emergency-modal-head .close-btn {
  background: #fff !important;
  color: #314554 !important;
  border: 1px solid #dbe6ec !important;
  box-shadow: none !important;
}
body:not(.tv-body) .emergency-modal-head .close-btn:hover {
  background: #f8fbfc !important;
  color: #172b3a !important;
}

/* Keep individual emergency modal comfortable and readable */
body:not(.tv-body) .modal:has(.modern-screen-emergency-modal) {
  max-height: min(94vh, 860px) !important;
  overflow: auto !important;
}
body:not(.tv-body) .modern-screen-emergency-modal .screen-emergency-modal-actions {
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.88), #fff 45%);
  border-top: 1px solid #e5edf2;
  margin: 4px -2px -2px;
  padding: 10px 2px 2px;
  z-index: 2;
}
body:not(.tv-body) .screen-emergency-preview h3,
body:not(.tv-body) .screen-emergency-preview-message {
  font-weight: 700 !important;
}
body:not(.tv-body) .screen-emergency-preview-message em {
  font-weight: 500 !important;
  opacity: .9;
}


/* ================================================================
   Emergency Broadcast preview + icon controls
   Scope: admin UI only. TV player pages are not affected.
   ================================================================ */
body:not(.tv-body) .emergency-format-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0 12px;
}
body:not(.tv-body) .emergency-format-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid #dbe6ec;
  border-radius: 14px;
  background: #f8fbfd;
}
body:not(.tv-body) .emergency-format-group > b {
  font-size: 12px;
  color: #314554;
  font-weight: 600 !important;
}
body:not(.tv-body) .format-icon-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
body:not(.tv-body) .format-icon-toggle {
  display: inline-grid;
  place-items: center;
  grid-auto-flow: column;
  gap: 5px;
  min-width: 34px;
  height: 32px;
  padding: 0 9px;
  border-radius: 10px;
  border: 1px solid #d6e3ea;
  background: #fff;
  color: #314554;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
  box-shadow: none;
}
body:not(.tv-body) .format-icon-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
body:not(.tv-body) .format-icon-toggle span {
  display: inline-grid;
  place-items: center;
}
body:not(.tv-body) .format-icon-toggle svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.3;
}
body:not(.tv-body) .format-icon-toggle em {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  color: inherit;
}
body:not(.tv-body) .format-icon-toggle:hover {
  background: #eef6f8;
  border-color: rgba(44,92,113,.34);
  color: #2C5C71;
}
body:not(.tv-body) .format-icon-toggle:has(input:checked) {
  background: #e8f1f4;
  border-color: #9fc1cc;
  color: #2C5C71;
  box-shadow: inset 0 0 0 1px rgba(44,92,113,.08);
}
body:not(.tv-body) .emergency-preview #previewTitle,
body:not(.tv-body) .emergency-preview #previewMessage,
body:not(.tv-body) .screen-emergency-preview #screenEmergencyPreviewTitle,
body:not(.tv-body) .screen-emergency-preview #screenEmergencyPreviewMessage {
  transition: font-size .14s ease, font-weight .14s ease, font-style .14s ease, text-decoration .14s ease;
}
body:not(.tv-body) .screen-emergency-preview h3,
body:not(.tv-body) .screen-emergency-preview-message {
  font-weight: inherit;
}
@media (max-width: 760px) {
  body:not(.tv-body) .emergency-format-groups {
    grid-template-columns: 1fr;
  }
}


body:not(.tv-body) .emergency-preview,
body:not(.tv-body) .screen-emergency-preview {
  color: #fff !important;
  overflow: hidden;
}

/* Fix same-element severity classes. Older rules used parent selectors. */
body:not(.tv-body) .emergency-preview.severity-info,
body:not(.tv-body) .screen-emergency-preview.severity-info {
  background: radial-gradient(ellipse, rgba(59,130,246,.22), rgba(2,6,23,.97)) !important;
  animation: none !important;
}
body:not(.tv-body) .emergency-preview.severity-warning,
body:not(.tv-body) .screen-emergency-preview.severity-warning {
  background: radial-gradient(ellipse, rgba(245,158,11,.22), rgba(2,6,23,.97)) !important;
}
body:not(.tv-body) .emergency-preview.severity-danger,
body:not(.tv-body) .screen-emergency-preview.severity-danger {
  background: radial-gradient(ellipse, rgba(239,68,68,.30), rgba(2,6,23,.98)) !important;
}

body:not(.tv-body) .emergency-preview.severity-info .tv-emergency-card,
body:not(.tv-body) .screen-emergency-preview.severity-info .tv-emergency-card {
  background: rgba(30,64,175,.80) !important;
}
body:not(.tv-body) .emergency-preview.severity-warning .tv-emergency-card,
body:not(.tv-body) .screen-emergency-preview.severity-warning .tv-emergency-card {
  background: rgba(146,64,14,.82) !important;
}
body:not(.tv-body) .emergency-preview.severity-danger .tv-emergency-card,
body:not(.tv-body) .screen-emergency-preview.severity-danger .tv-emergency-card {
  background: rgba(127,29,29,.85) !important;
}

body:not(.tv-body) .admin-tv-emergency-preview-card {
  width: min(100%, 760px) !important;
  border: 2px solid rgba(255,255,255,.32) !important;
  border-radius: 28px !important;
  padding: clamp(18px, 3vw, 34px) !important;
  text-align: center !important;
  box-shadow: 0 24px 56px rgba(0,0,0,.32) !important;
  backdrop-filter: blur(10px);
}
body:not(.tv-body) .screen-admin-tv-emergency-preview-card {
  width: 100% !important;
  padding: clamp(16px, 2.6vw, 28px) !important;
}
body:not(.tv-body) .admin-emergency-preview-header {
  gap: 10px !important;
  margin-bottom: 12px !important;
}
body:not(.tv-body) .admin-emergency-preview-header .tv-emergency-badge {
  gap: 8px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
}
body:not(.tv-body) .admin-emergency-preview-header .tv-emergency-badge-icon {
  width: 18px !important;
  height: 18px !important;
}
body:not(.tv-body) .admin-emergency-preview-header .tv-emergency-hero-icon {
  width: clamp(52px, 6vw, 78px) !important;
  height: clamp(52px, 6vw, 78px) !important;
}
body:not(.tv-body) .emergency-preview .emergency-preview-severity,
body:not(.tv-body) .screen-emergency-preview .emergency-preview-severity {
  display: none !important;
}
body:not(.tv-body) .emergency-preview #previewTitle,
body:not(.tv-body) .screen-emergency-preview #screenEmergencyPreviewTitle {
  color: #fff !important;
  margin: 0 0 10px !important;
  text-transform: uppercase !important;
  letter-spacing: -.02em !important;
  line-height: 1.05 !important;
  overflow-wrap: anywhere !important;
}
body:not(.tv-body) .emergency-preview #previewMessage,
body:not(.tv-body) .screen-emergency-preview #screenEmergencyPreviewMessage {
  color: #fff !important;
  line-height: 1.18 !important;
  overflow-wrap: anywhere !important;
}
body:not(.tv-body) .screen-emergency-preview {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  padding: 18px !important;
}


body:not(.tv-body) .modal-backdrop {
  align-items: center;
  justify-items: center;
  overflow: hidden;
}
body:not(.tv-body) .modal {
  display: flex !important;
  flex-direction: column !important;
  max-height: min(92vh, 860px) !important;
  overflow: hidden !important;
  padding: 0 !important;
}
body:not(.tv-body) .modal > .modal-head {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--line) !important;
  background: var(--surface) !important;
  position: relative;
  z-index: 12;
}
body:not(.tv-body) .modal > .modal-head.emergency-modal-head,
body:not(.tv-body) .modal > .modal-head.android-tv-modal-head,
body:not(.tv-body) .modal > .modal-head.android-tv-schedule-head,
body:not(.tv-body) .modal > .modal-head.android-tv-modal-head,
body:not(.tv-body) .modal > .modal-head.android-tv-child-head,
body:not(.tv-body) .modal > .modal-head.screen-upsert-head {
  margin: 0 !important;
}
body:not(.tv-body) .modal > :not(.modal-head) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 16px 18px !important;
  overscroll-behavior: contain;
}
body:not(.tv-body) .modal > form,
body:not(.tv-body) .modal > .modal-form,
body:not(.tv-body) .modal > .android-tv-control-modal,
body:not(.tv-body) .modal > .android-tv-schedule-modal,
body:not(.tv-body) .modal > .screen-health-modal,
body:not(.tv-body) .modal > .android-tv-screenshot-modal,
body:not(.tv-body) .modal > .modern-screen-emergency-modal {
  display: flex !important;
  flex-direction: column !important;
}

/* Pinned action/footer areas inside scrollable bodies */
body:not(.tv-body) .modal form > .btn-row:last-child,
body:not(.tv-body) .modal > .btn-row:last-child,
body:not(.tv-body) .modal .screen-emergency-modal-actions,
body:not(.tv-body) .modal .android-tv-child-actions,
body:not(.tv-body) .modal .android-tv-schedule-actions,
body:not(.tv-body) .modal .android-tv-schedule-actions {
  flex: 0 0 auto !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 10 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.92), #fff 45%) !important;
  border-top: 1px solid #e5edf2 !important;
  margin-top: 12px !important;
  padding: 10px 0 0 !important;
}
body:not(.tv-body) .modal form > .btn-row:last-child,
body:not(.tv-body) .modal .screen-emergency-modal-actions,
body:not(.tv-body) .modal .android-tv-child-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 9px !important;
  flex-wrap: wrap !important;
}

/* Make the middle areas do the scrolling where a popup already has a clear body/list. */
body:not(.tv-body) .modern-screen-emergency-modal .screen-emergency-modal-layout,
body:not(.tv-body) .android-tv-schedule-shell .android-tv-schedule-inner,
body:not(.tv-body) .android-tv-control-modal .android-tv-control,
body:not(.tv-body) .android-tv-screenshot-modal .android-tv-screenshot-frame,
body:not(.tv-body) .screen-health-modal .screen-health-panel,
body:not(.tv-body) .qr-modal {
  min-height: 0 !important;
}
body:not(.tv-body) .modern-screen-emergency-modal .screen-emergency-modal-layout {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 4px;
}
body:not(.tv-body) .modern-screen-emergency-modal .screen-emergency-modal-actions {
  margin: 12px 0 0 !important;
  padding: 10px 0 0 !important;
}


body:not(.tv-body) .android-tv-schedule-modal {
  overflow: hidden !important;
  padding: 0 !important;
}
body:not(.tv-body) .android-tv-schedule-shell {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
body:not(.tv-body) .android-tv-schedule-device,
body:not(.tv-body) .android-tv-schedule-actions {
  flex: 0 0 auto !important;
}
body:not(.tv-body) .android-tv-schedule-inner {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
body:not(.tv-body) .android-tv-schedule-actions {
  margin: 0 !important;
  padding: 10px 14px !important;
}


body:not(.tv-body) .android-tv-control-modal {
  overflow: hidden !important;
}
body:not(.tv-body) .android-tv-control-title {
  flex: 0 0 auto !important;
}
body:not(.tv-body) .android-tv-control-modal .android-tv-control {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Health and screenshot modals: keep header pinned and allow the content area only to scroll. */
body:not(.tv-body) .screen-health-modal,
body:not(.tv-body) .android-tv-screenshot-modal {
  overflow-y: auto !important;
  min-height: 0 !important;
}
body:not(.tv-body) .android-tv-screenshot-modal .android-tv-child-actions {
  margin-top: 10px !important;
}

/* Better thin scrollbars for modal body only. */
body:not(.tv-body) .modal > :not(.modal-head),
body:not(.tv-body) .modern-screen-emergency-modal .screen-emergency-modal-layout,
body:not(.tv-body) .android-tv-schedule-inner,
body:not(.tv-body) .android-tv-control-modal .android-tv-control {
  scrollbar-width: thin;
  scrollbar-color: rgba(44,92,113,.35) transparent;
}
body:not(.tv-body) .modal > :not(.modal-head)::-webkit-scrollbar,
body:not(.tv-body) .modern-screen-emergency-modal .screen-emergency-modal-layout::-webkit-scrollbar,
body:not(.tv-body) .android-tv-schedule-inner::-webkit-scrollbar,
body:not(.tv-body) .android-tv-control-modal .android-tv-control::-webkit-scrollbar {
  width: 8px;
}
body:not(.tv-body) .modal > :not(.modal-head)::-webkit-scrollbar-thumb,
body:not(.tv-body) .modern-screen-emergency-modal .screen-emergency-modal-layout::-webkit-scrollbar-thumb,
body:not(.tv-body) .android-tv-schedule-inner::-webkit-scrollbar-thumb,
body:not(.tv-body) .android-tv-control-modal .android-tv-control::-webkit-scrollbar-thumb {
  background: rgba(44,92,113,.32);
  border-radius: 999px;
}

@media (max-width: 760px) {
  body:not(.tv-body) .modal {
    width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 16px) !important;
  }
  body:not(.tv-body) .modal > .modal-head {
    padding: 12px 14px !important;
  }
  body:not(.tv-body) .modal > :not(.modal-head) {
    padding: 14px !important;
  }
  body:not(.tv-body) .modal .screen-emergency-modal-actions,
  body:not(.tv-body) .modal form > .btn-row:last-child,
  body:not(.tv-body) .modal .android-tv-child-actions {
    justify-content: stretch !important;
  }
  body:not(.tv-body) .modal .screen-emergency-modal-actions .btn,
  body:not(.tv-body) .modal form > .btn-row:last-child .btn,
  body:not(.tv-body) .modal .android-tv-child-actions .btn {
    flex: 1 1 100% !important;
    justify-content: center !important;
  }
}


body:not(.tv-body) .modal:has(.modern-screen-emergency-modal) {
  overflow: hidden !important;
}
body:not(.tv-body) .modal:has(.modern-screen-emergency-modal) > .modern-screen-emergency-modal {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
body:not(.tv-body) .modern-screen-emergency-modal .screen-emergency-modal-layout {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
body:not(.tv-body) .modern-screen-emergency-modal .screen-emergency-main-panel,


/* ===== mobile.css ===== */
body:not(.tv-body) .modern-screen-emergency-modal .screen-emergency-preview-panel {
  overflow: visible !important;
  min-height: 0 !important;
}


.webhook-settings-block { margin-top:14px; padding:14px; border:1px solid var(--line); border-radius:18px; background:var(--surface-2); display:grid; gap:10px; }

.mini-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  color: var(--muted, #64748b);
  font-size: 12px;
  font-weight: 600;
}
.import-preview-box {
  border: 1px solid rgba(148,163,184,.28);
  border-radius: 16px;
  padding: 14px;
  background: rgba(248,250,252,.9);
}
.import-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}
.import-preview-grid > div {
  border: 1px solid rgba(148,163,184,.24);
  border-radius: 12px;
  padding: 10px;
  background: #fff;
}
.import-preview-grid b { display:block; font-size:12px; color:#64748b; margin-bottom:4px; }
.import-preview-grid span { font-weight:700; color:#0f172a; }
.import-preview-warning, .import-preview-ok {
  grid-column: 1 / -1;
  display:flex;
  align-items:center;
  gap:8px;
}
.import-preview-warning { border-color: rgba(245,158,11,.35) !important; background: #fffbeb !important; color:#92400e; }
.import-preview-ok { border-color: rgba(34,197,94,.25) !important; background:#f0fdf4 !important; color:#166534; }

.config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.config-row {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(148,163,184,.24);
  border-radius: 14px;
  background: #fff;
}
.config-row span { color:#64748b; font-size:12px; font-weight:700; }
.config-row b { color:#0f172a; overflow-wrap:anywhere; }
.config-row small { color:#64748b; line-height:1.35; }

/* Factory Alert Integration API */
body:not(.tv-body) .api-key-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
  align-items: center;
}
body:not(.tv-body) .factory-alert-example {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 16px;
  overflow: auto;
}
body:not(.tv-body) .factory-alert-example code,
body:not(.tv-body) .copy-secret-box code {
  display: block;
  max-width: 100%;
  overflow: auto;
  white-space: nowrap;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid var(--line);
  color: var(--text);
}
body:not(.tv-body) .factory-alert-example pre {
  margin: 0;
  padding: 12px;
  border-radius: 14px;
  background: #0f172a;
  color: #e2e8f0;
  overflow: auto;
  font-size: 12px;
  line-height: 1.55;
}
body:not(.tv-body) .copy-secret-box {
  padding: 12px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid var(--line);
  overflow: auto;
}