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

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
  color: white;
  min-height: 100vh;
  padding: 20px;
  /* ensure space at very bottom for footer (~0.25 inch) */
  padding-bottom: 0.25in;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

header {
  text-align: center;
  color: white;
  margin-bottom: 30px;
  position: relative;
}

.admin-link {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(15,23,42,0.55);
  color: #fff;
  text-decoration: none;
  font-size: 0.85em;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.35);
  transition: background 0.15s;
}

.admin-link:hover {
  background: rgba(15,23,42,0.8);
}

.logout-link {
  left: 8px;
  right: auto;
  cursor: pointer;
  font-family: inherit;
}

.main-title {
  font-size: 1.9rem;
  font-weight: 700;
  margin-top: 12px;
  margin-bottom: 6px;
  color: white;
  letter-spacing: -0.3px;
}

header .banner {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(3px 3px 8px rgba(0,0,0,0.4));
  border-radius: 15px;
}

.dashboard-card {
  background: white;
  border-radius: 15px;
  padding: 30px;
  margin-bottom: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.dashboard-title {
  text-align: center;
  color: #0284c7;
  font-size: 1.5em;
  font-weight: 600;
  margin-bottom: 20px;
}

.file-input {
  display: none;
}

.upload-btn {
  background: #0ea5e9;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 1em;
  cursor: pointer;
  margin: 10px;
  transition: background 0.3s;
}

.upload-btn:hover {
  background: #0284c7;
}

/* Media Library grid of thumbnail cards */
.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: #f8fafc;
}

.library-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: #6b7280;
  padding: 24px;
}

.lib-card {
  position: relative;
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.lib-card:hover {
  border-color: #bae6fd;
  box-shadow: 0 4px 12px rgba(2,6,23,0.08);
}

.lib-card.selected {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14,165,233,0.2);
}

.lib-card-check {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  z-index: 3;
  accent-color: #0ea5e9;
}

/* Selection bar above the library grid */
.selection-bar {
  display: none;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: #ecfeff;
  border: 1px solid #a5f3fc;
  border-radius: 8px;
  padding: 8px 14px;
  margin-bottom: 14px;
  font-size: 0.9em;
  color: #0e7490;
  font-weight: 600;
}

.selection-hint {
  color: #0891b2;
  font-weight: 500;
}

/* When items are checked, slots invite a click */
.schedule-grid.placing .schedule-slot {
  cursor: pointer;
}

.schedule-grid.placing .schedule-slot:hover {
  background: #ecfeff;
  box-shadow: inset 0 0 0 2px #22d3ee;
}

/* Corner action icons on each library card */
.lib-card-icon {
  position: absolute;
  top: 16px;
  width: 30px;
  height: 30px;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  font-size: 0.95em;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 1px 4px rgba(2,6,23,0.25);
  transition: transform 0.1s, background 0.15s;
}

.lib-card-icon:hover {
  transform: scale(1.1);
}

.lib-card-delete {
  right: 16px;
}

.lib-card-delete:hover {
  background: #fee2e2;
}

.lib-thumb {
  width: 100%;
  height: 150px;
  border-radius: 6px;
  overflow: hidden;
  background: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.lib-thumb img, .lib-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lib-thumb-placeholder {
  font-size: 2.5em;
}

/* Processed-resolution badge across the bottom of the thumbnail */
.lib-thumb-badge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(2,6,23,0.72);
  color: #fff;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-align: center;
  padding: 4px 6px;
}

.lib-card-name {
  margin-top: 8px;
  font-weight: 600;
  color: #111827;
  font-size: 0.9em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lib-card-status {
  font-size: 0.8em;
  color: #6b7280;
  text-transform: capitalize;
}

.tools-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.tools-toggle-title {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.tools-toggle-caret {
  font-size: 0.7em;
  color: #94a3b8;
  transition: transform 0.15s;
}

.tools-compact-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  cursor: pointer;
}

.tools-chip {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85em;
  font-weight: 600;
  color: #334155;
  transition: background 0.15s, border-color 0.15s;
}

.tools-compact-strip:hover .tools-chip {
  background: #e0f2fe;
  border-color: #7dd3fc;
}

.tool-card {
  background: linear-gradient(160deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  padding: 24px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 6px rgba(2,6,23,0.06);
  transition: box-shadow 0.15s, transform 0.1s;
}

.tool-card:hover {
  box-shadow: 0 6px 16px rgba(2,6,23,0.12);
  transform: translateY(-2px);
}

.tool-icon {
  font-size: 2em;
  margin-bottom: 10px;
}

.tool-title {
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 8px;
}

.tool-description {
  color: #475569;
  font-size: 0.9em;
  flex: 1;
}

.run-tool-btn {
  background: #0ea5e9;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.9em;
  cursor: pointer;
  margin-top: 10px;
  transition: background 0.3s;
}

.run-tool-btn:hover {
  background: #0284c7;
}

.status-message {
  padding: 10px;
  border-radius: 6px;
  margin: 10px 0;
  font-weight: 500;
}

.status-success {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.status-error {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.status-info {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}

/* Footer styling */
.site-footer {
  color: white;
  text-align: center;
  padding-top: 12px;
  padding-bottom: 0.25in; /* leave ~0.25in to bottom of page */
  font-size: 0.95em;
  opacity: 1;
}

/* Up button (reused by the editor file picker) */
.up-button {
  background: transparent;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  margin-left: 8px;
  color: #0ea5e9;
  font-weight: 700;
  flex: 0 0 auto;
}

.up-button:hover {
  background: #f1f9ff;
}

.file-preview {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #1e293b;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 460px;
  width: 100%;
  position: relative;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.file-preview.dragover {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14,165,233,0.25);
}

.file-preview img, .file-preview video {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 4px;
}

/* Videos fill the full display width (letterboxing top/bottom if needed) instead of
   rendering at native pixel size, which otherwise left a lot of unused black space. */
.file-preview video {
  width: 100%;
}

.file-preview-placeholder {
  color: #64748b;
  text-align: center;
}

/* Sits below the dark display box (in the white card area) so the media itself can
   use the full display height instead of sharing space with this caption. */
.preview-info-row {
  text-align: center;
  margin-top: 12px;
  min-height: 1.3em;
  color: #334155;
  font-size: 0.95em;
}

.preview-info-row strong {
  color: #0f172a;
}

.preview-dims {
  display: block;
  margin-top: 3px;
  color: #0284c7;
  font-size: 0.9em;
  font-weight: 600;
}

/* wrapper for preview add-to-queue button (replaces inline styles) */
.preview-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* Unified action buttons under the display: same size regardless of label */
.action-button {
  background: #0ea5e9;
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  min-width: 170px;
  text-align: center;
  transition: background 0.2s, opacity 0.2s;
}

.action-button:hover {
  background: #0284c7;
}

.action-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.action-button-danger {
  background: #fff;
  color: #b91c1c;
  border: 1px solid #fca5a5;
}

.action-button-danger:hover {
  background: #fee2e2;
}

/* preview icon and note styles (replaces inline styles) */
.preview-icon {
  font-size: 3em;
  margin-bottom: 10px;
}

.preview-note {
  font-size: 0.85em;
  margin-top: 8px;
  color: #94a3b8;
}

.library-subtitle {
  text-align: center;
  color: #64748b;
  font-size: 0.9em;
  margin-bottom: 16px;
}

/* Editor settings modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2,6,23,0.6);
  z-index: 9999;
}

.modal-box {
  background: #fff;
  color: #0f172a;
  padding: 22px;
  border-radius: 10px;
  min-width: 340px;
  max-width: 520px;
  width: 90%;
  box-shadow: 0 8px 30px rgba(2,6,23,0.3);
}

.modal-title {
  font-weight: 700;
  font-size: 1.2em;
  margin-bottom: 8px;
}

.modal-help {
  font-size: 0.88em;
  color: #475569;
  margin-bottom: 16px;
}

.editor-group {
  margin-bottom: 16px;
}

.editor-group-title {
  font-weight: 600;
  margin-bottom: 6px;
  color: #334155;
}

.modal-select, .modal-input {
  width: 100%;
  padding: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 0.95em;
  margin-top: 6px;
}

.modal-actions {
  text-align: right;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 8px;
}

.modal-cancel {
  background: #e5e7eb;
  color: #0f172a;
}

.modal-save {
  background: #0ea5e9;
  color: white;
}

.editor-path-display {
  margin-top: 6px;
  font-size: 0.8em;
  color: #64748b;
  font-family: monospace;
  word-break: break-all;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 6px 8px;
}

/* File picker modal */
.picker-box {
  max-width: 600px;
  width: 92%;
}

.picker-controls {
  margin-bottom: 8px;
}

.picker-pathbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 6px 6px 0 0;
  font-size: 0.82em;
  color: #475569;
  overflow: hidden;
}

.picker-path-text {
  white-space: nowrap;
  overflow-x: auto;
  font-family: monospace;
}

.picker-list {
  border: 1px solid #e5e7eb;
  border-top: none;
  border-radius: 0 0 6px 6px;
  max-height: 340px;
  overflow-y: auto;
  margin-bottom: 12px;
}

.picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.9em;
  color: #334155;
}

.picker-item:hover {
  background: #e0f2fe;
}

.picker-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.picker-empty {
  padding: 20px;
  text-align: center;
  color: #64748b;
}

/* Resolution picker tiers */
.res-tier-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.res-tier {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.res-tier:hover {
  background: #f1f9ff;
  border-color: #bae6fd;
}

.res-tier-label {
  font-weight: 600;
  color: #1e293b;
}

.res-tier-hint {
  margin-left: auto;
  font-size: 0.82em;
  color: #64748b;
}

/* ================= Schedule / Calendar ================= */
.schedule-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.schedule-screen-row,
.schedule-date-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.schedule-label {
  font-weight: 600;
  color: #334155;
}

/* Sub-cards inside the Schedule card: distinct tinted backgrounds so their
   buttons/controls don't fade into the white card behind them. */
.schedule-subcards-row {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

.schedule-subcards-row .schedule-subcard {
  flex: 1;
  margin-bottom: 0;
}

.schedule-subcard {
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
  border: 1px solid transparent;
}

.schedule-subcard-title {
  font-weight: 700;
  font-size: 0.9em;
  color: #1e293b;
  margin-bottom: 10px;
  text-align: center;
}

.schedule-subcard-screen {
  background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
  border-color: #a5f3fc;
}

.schedule-subcard-date {
  background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
  border-color: #a5f3fc;
}

.big-date-display {
  text-align: center;
  font-size: 1.7em;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #0e7490;
  margin-top: 12px;
}

.big-date-display.pop {
  animation: bigDatePop 0.35s ease;
}

@keyframes bigDatePop {
  0% { transform: scale(0.85); opacity: 0; }
  60% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); }
}

.schedule-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  margin-bottom: 16px;
}

.schedule-select,
.schedule-date {
  padding: 6px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.9em;
  background: #fff;
  color: #0f172a;
}

.schedule-btn {
  padding: 6px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-family: inherit;
  background: #fff;
  color: #334155;
  font-size: 0.85em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.schedule-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.schedule-btn-danger {
  color: #b91c1c;
  border-color: #fca5a5;
}

.schedule-btn-danger:hover {
  background: #fee2e2;
}

.schedule-btn-play {
  color: #065f46;
  border-color: #6ee7b7;
  background: #ecfdf5;
  font-weight: 600;
}

.schedule-btn-play:hover {
  background: #d1fae5;
}

.view-toggle.active {
  background: #0ea5e9;
  color: #fff;
  border-color: #0ea5e9;
}

/* Per-hour copy button in the day view */
.schedule-hour {
  flex-direction: column;
  gap: 4px;
}

.hour-copy-btn {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #0369a1;
  border-radius: 4px;
  font-size: 0.75em;
  padding: 1px 5px;
  cursor: pointer;
}

.hour-copy-btn:hover {
  background: #e0f2fe;
}

/* Mini-map jump nav: 24 clickable segments above the day grid, sticky while scrolling */
.schedule-minimap {
  display: flex;
  gap: 2px;
  padding: 6px 8px;
  margin-bottom: 10px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  position: sticky;
  top: 8px;
  z-index: 5;
}

.minimap-seg {
  flex: 1;
  height: 16px;
  min-width: 4px;
  border: none;
  border-radius: 3px;
  background: #e2e8f0;
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s, filter 0.15s;
}

.minimap-seg:hover {
  transform: scaleY(1.3);
  filter: brightness(0.92);
}

/* Colored to match the timeline's daypart rail: morning/afternoon/evening/overnight */
.minimap-seg.daypart-morning { background: #f59e0b; }
.minimap-seg.daypart-afternoon { background: #0ea5e9; }
.minimap-seg.daypart-evening { background: #8b5cf6; }
.minimap-seg.daypart-overnight { background: #475569; }

/* Scheduled hours get a dark ring on top of their daypart color */
.minimap-seg.has-items {
  box-shadow: inset 0 0 0 2px rgba(15, 23, 42, 0.55);
}

.minimap-seg.is-now {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(15, 23, 42, 0.55);
}

/* Week overview grid */
.week-grid {
  display: block;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

.week-row {
  display: grid;
  grid-template-columns: 92px repeat(7, 1fr);
  border-bottom: 1px solid #eef2f7;
}

.week-row:last-child { border-bottom: none; }

.week-header {
  background: #f1f5f9;
  position: sticky;
  top: 0;
}

.week-hour-label {
  padding: 8px 10px;
  font-size: 0.78em;
  font-weight: 600;
  color: #64748b;
  background: #f8fafc;
  border-right: 1px solid #eef2f7;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
}

.week-day-head {
  padding: 8px 6px;
  text-align: center;
  font-size: 0.8em;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  border-left: 1px solid #eef2f7;
}

.week-day-head.is-today {
  color: #0369a1;
  background: #e0f2fe;
}

.week-day-head:hover { background: #e2e8f0; }

.week-cell {
  min-height: 34px;
  border-left: 1px solid #eef2f7;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8em;
  font-weight: 700;
  color: #0369a1;
}

.week-cell.has-items {
  background: #e0f2fe;
}

.week-cell:hover {
  box-shadow: inset 0 0 0 2px #22d3ee;
}

.schedule-num {
  width: 64px;
  padding: 6px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.9em;
}

.schedule-sep {
  width: 1px;
  height: 22px;
  background: #e2e8f0;
  margin: 0 4px;
}

/* Screen health / heartbeat status */
.status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

.status-dot.online {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.2);
}

.status-dot.offline {
  background: #9ca3af;
}

.screen-status-badge {
  font-size: 0.85em;
  font-weight: 600;
  color: #334155;
  display: flex;
  align-items: center;
  margin-left: 4px;
}

.screen-status-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -6px 0 10px;
}

.screen-status-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.78em;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.screen-status-chip.online {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}

/* ================= Admin & Devices page ================= */
.admin-top-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

.admin-top-row .schedule-btn {
  justify-self: end;
}

.admin-top-spacer {
  justify-self: start;
}

.admin-title {
  margin-bottom: 0;
}

.admin-help {
  color: #475569;
  font-size: 0.92em;
  line-height: 1.5;
  margin-bottom: 14px;
}

.admin-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}

.admin-toolbar-center {
  justify-content: center;
}

.devices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

.device-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px;
}

.device-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.device-name {
  font-weight: 700;
  font-size: 1.05em;
  color: #0f172a;
}

.device-heartbeat {
  font-size: 0.82em;
  color: #475569;
  font-weight: 600;
}

.device-delete {
  position: static;
  margin-left: auto;
  width: 26px;
  height: 26px;
}

.device-field-label {
  display: block;
  font-size: 0.78em;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 10px 0 4px;
}

.device-field-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.device-ip-input,
.device-url-input {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 0.9em;
  min-width: 0;
}

.device-url-input {
  color: #475569;
  background: #fff;
}

.device-ping-result {
  margin-top: 6px;
  font-size: 0.85em;
  font-weight: 600;
  color: #64748b;
  min-height: 1.2em;
}

.device-ping-result.good {
  color: #15803d;
}

.device-ping-result.bad {
  color: #b91c1c;
}

.admin-hidden {
  display: none;
}

/* Network scan modal */
.scan-modal-box {
  max-width: 720px;
  width: 92%;
}

.scan-table-wrap {
  max-height: 380px;
  overflow-y: auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 8px;
}

.scan-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88em;
}

.scan-table th {
  position: sticky;
  top: 0;
  background: #f1f5f9;
  text-align: left;
  padding: 8px 10px;
  color: #475569;
  font-size: 0.85em;
}

.scan-table td {
  padding: 8px 10px;
  border-top: 1px solid #f1f5f9;
  color: #334155;
  vertical-align: middle;
}

.scan-table select {
  font-size: 0.85em;
  padding: 4px 6px;
  margin-right: 4px;
}

.scan-row-highlight td {
  background: #fef9c3;
  font-weight: 600;
}

.scan-empty {
  text-align: center;
  color: #6b7280;
  padding: 20px !important;
}

.schedule-empty {
  text-align: center;
  color: #6b7280;
  padding: 20px;
}

.schedule-grid {
  background: transparent;
  padding: 2px;
}

.schedule-row {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 54px;
  margin-bottom: 6px;
  padding-left: 5px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 1px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  transition: min-height 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.schedule-row:hover {
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
  transform: translateY(-1px);
}

.schedule-row:last-child {
  margin-bottom: 0;
}

/* Color-coded rail down the left edge, grouping hours into rough dayparts */
.schedule-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: #94a3b8;
}

.schedule-row.daypart-morning::before { background: #f59e0b; }
.schedule-row.daypart-afternoon::before { background: #0ea5e9; }
.schedule-row.daypart-evening::before { background: #8b5cf6; }
.schedule-row.daypart-overnight::before { background: #475569; }

/* Empty hours shrink to a thin strip; hover/focus (incl. while dragging over) expands
   them back out so they're still an easy drop target. */
.schedule-grid.compact .schedule-row.is-empty {
  min-height: 22px;
}

.schedule-grid.compact .schedule-row.is-empty:hover,
.schedule-grid.compact .schedule-row.is-empty:focus-within {
  min-height: 54px;
}

.schedule-grid.compact .schedule-row.is-empty .hour-time {
  font-size: 0.95em;
}

.schedule-row.is-now {
  box-shadow: 0 0 0 2px #f59e0b, 0 4px 12px rgba(245, 158, 11, 0.25);
}

.schedule-row.is-now::before {
  background: #f59e0b;
}

.schedule-row.is-now .schedule-hour {
  color: #b45309;
}

.schedule-hour {
  flex: 0 0 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  font-size: 0.8em;
  font-weight: 600;
  color: #64748b;
  background: #f8fafc;
  border-right: 1px solid #eef2f7;
}

.hour-time {
  font-weight: 800;
  font-size: 1.05em;
  color: #0c4a6e;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.schedule-slot {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  transition: background 0.12s;
}

.schedule-slot.drag-over {
  background: #e0f2fe;
  box-shadow: inset 0 0 0 2px #0ea5e9;
}

.sched-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  padding: 4px 6px 4px 4px;
  max-width: 220px;
}

.sched-chip.dragging {
  opacity: 0.5;
  box-shadow: 0 0 0 2px #0ea5e9;
}

.sched-chip-grip {
  cursor: grab;
  color: #94a3b8;
  font-size: 0.9em;
  padding: 0 2px;
  flex-shrink: 0;
  -webkit-user-select: none;
  user-select: none;
}

.sched-chip-grip:active {
  cursor: grabbing;
}

.sched-chip-thumb {
  width: 40px;
  height: 26px;
  border-radius: 4px;
  overflow: hidden;
  background: #1e293b;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sched-chip-thumb img,
.sched-chip-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sched-chip-placeholder {
  font-size: 0.9em;
}

.sched-chip-name {
  font-size: 0.8em;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sched-chip-remove {
  border: none;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  font-size: 0.85em;
  line-height: 1;
  padding: 2px;
  flex-shrink: 0;
}

.sched-chip-remove:hover {
  color: #b91c1c;
}

.sched-chip-res {
  font-size: 0.68em;
  font-weight: 700;
  color: #0369a1;
  background: #e0f2fe;
  border-radius: 4px;
  padding: 1px 5px;
  flex-shrink: 0;
}

/* Resolution badge variant for the "Original" card */
.lib-thumb-badge.badge-original {
  background: rgba(15,23,42,0.6);
  font-weight: 500;
}

.lib-card-original .lib-thumb {
  outline: 2px dashed rgba(148,163,184,0.5);
  outline-offset: -4px;
}

/* Processing overlay + spinner */
.processing-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2,6,23,0.55);
}

.processing-box {
  background: #fff;
  border-radius: 12px;
  padding: 28px 34px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(2,6,23,0.35);
  max-width: 340px;
}

.processing-spinner {
  width: 46px;
  height: 46px;
  margin: 0 auto 16px;
  border: 5px solid #e0f2fe;
  border-top-color: #0ea5e9;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.processing-text {
  font-weight: 700;
  font-size: 1.05em;
  color: #0f172a;
}

.processing-sub {
  margin-top: 6px;
  font-size: 0.82em;
  color: #64748b;
}

@media (max-width: 1024px) {
  .tools-section {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .container {
    padding: 10px;
  }

  .dashboard-card {
    padding: 20px;
  }

  .tools-section {
    grid-template-columns: 1fr;
  }

  .library-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .schedule-subcards-row {
    flex-direction: column;
  }
}

/* Signature brand button: orange gradient pill, used for primary calls to action.
   Placed at the end of the stylesheet so it wins the cascade over other button styles.
   Padding/font/margin are set here too so it looks identical regardless of which base
   button class (schedule-btn, upload-btn, action-button...) it's layered on top of. */
.btn-brand-orange {
  background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 22px;
  margin: 0;
  font-size: 0.95em;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(234, 88, 12, 0.35);
}

.btn-brand-orange:hover {
  background: linear-gradient(135deg, #f97316 0%, #c2410c 100%);
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.45);
}

.btn-brand-orange:disabled {
  background: linear-gradient(135deg, #fdba74 0%, #fb923c 100%);
  box-shadow: none;
}

/* Print just the network scan results table — hide everything else on the page,
   including the interactive Assign-to-screen column.
   The modal is normally position:fixed (repeats on every printed page) sitting on
   top of the full dashboard (still tall even when hidden via visibility), which is
   what caused the duplicate blank second page. Collapsing the other siblings with
   display:none and un-fixing the modal keeps the printout to a single page. */
@media print {
  body > .container,
  body > footer,
  #statusMessage {
    display: none !important;
  }

  .modal-overlay {
    position: static !important;
    display: block !important;
    background: none !important;
    inset: auto !important;
  }

  .modal-box {
    max-width: none !important;
    width: 100% !important;
    box-shadow: none !important;
  }

  #scanStatusText,
  .modal-actions {
    display: none !important;
  }

  .modal-title {
    display: block !important;
    visibility: visible !important;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid #111827;
    color: #111827;
    font-size: 24pt;
    font-weight: 700;
  }

  body * {
    visibility: hidden;
  }

  .scan-table-wrap,
  .scan-table-wrap * {
    visibility: visible;
  }

  .scan-table-wrap {
    position: static;
    width: 100%;
    max-height: none;
    overflow: visible;
    border: none;
  }

  .scan-assign-col {
    display: none;
  }
}

/* Spinner shown next to the network scan status text while a scan is in progress */
.spinner {
  display: inline-block;
  width: 28px;
  height: 28px;
  margin-right: 12px;
  vertical-align: middle;
  border: 4px solid #e2e8f0;
  border-top-color: #ea580c;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}