/* ============================================================
   SchedForge v4.1 — Complete rewrite
   Architecture: fluid container, aspect-ratio preserved,
   responsive scaling, stable table layout
   ============================================================ */

/* ── Variables ─────────────────────────────────────────── */
:root {
  --sf-accent:   #FFE600;
  --sf-accent2:  #ff4d8f;
  --sf-accent3:  #00e5ff;
  --sf-panel:    #111122;
  --sf-panel2:   #1a1a2e;
  --sf-border:   #2a2a45;
  --sf-text:     #eeeef5;
  --sf-dim:      #8888aa;
}

/* ── Root wrapper ─────────────────────────────────────── */
.sf-root { position: relative; font-family: 'Barlow Condensed', sans-serif; color: var(--sf-text); }
.sf-root * { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Admin toolbar ────────────────────────────────────── */
#sf-toolbar {
  background: var(--sf-panel);
  border: 2px solid var(--sf-border);
  border-radius: 8px 8px 0 0;
  padding: 7px 10px;
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
#sf-toolbar h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px; letter-spacing: 2px;
  color: var(--sf-accent); white-space: nowrap;
}
#sf-toolbar h2 span { color: var(--sf-accent2); }
.sf-sep { width:1px; height:24px; background:var(--sf-border); margin:0 2px; flex-shrink:0; }
.sf-tg  { display:flex; gap:5px; align-items:center; flex-wrap:wrap; }
.sf-lbl { font-size:10px; color:var(--sf-dim); text-transform:uppercase; letter-spacing:1px; white-space:nowrap; }
.sf-status { font-size:11px; color:var(--sf-accent3); min-width:55px; }

/* ── Shared controls ──────────────────────────────────── */
.sf-root button,
.sf-root select,
.sf-root input[type=number],
.sf-root input[type=text] {
  background: var(--sf-panel2); border: 1px solid var(--sf-border);
  color: var(--sf-text); border-radius: 5px; padding: 4px 8px;
  font-size: 12px; font-family: 'Barlow', sans-serif;
  cursor: pointer; transition: border-color .15s; outline: none;
}
.sf-root button:hover   { border-color: var(--sf-accent); }
.sf-root button.sf-on   { border-color: var(--sf-accent); background: #252500; color: var(--sf-accent); }
.sf-root button.sf-prim { background: var(--sf-accent); color: #111; border-color: var(--sf-accent); font-weight: 700; }
.sf-root button.sf-prim:hover { background: #d4c000; }
.sf-root input[type=number]   { width: 56px; text-align: center; }
.sf-root input[type=color]    { width: 30px; height: 26px; padding: 2px; border-radius: 4px; cursor: pointer; border: 1px solid var(--sf-border); background: var(--sf-panel2); }
.sf-root input[type=range]    { width: 70px; accent-color: var(--sf-accent); vertical-align: middle; cursor: pointer; }
.sf-root input[type=file]     { display: none; }
.sf-root label.sf-fbtn {
  background: var(--sf-panel2); border: 1px solid var(--sf-border);
  color: var(--sf-text); border-radius: 5px; padding: 4px 8px;
  font-size: 12px; cursor: pointer; font-family: 'Barlow', sans-serif;
  white-space: nowrap; display: inline-block;
}
.sf-root label.sf-fbtn:hover { border-color: var(--sf-accent); }

/* ── Main layout ──────────────────────────────────────── */
#sf-main {
  display: flex;
  border: 2px solid var(--sf-border);
  border-top: none;
  background: var(--sf-panel);
}
.sf-public-wrap #sf-main { border: none; background: transparent; }

/* ── Side panel ───────────────────────────────────────── */
#sf-side {
  width: 240px; min-width: 220px; flex-shrink: 0;
  background: var(--sf-panel); border-right: 2px solid var(--sf-border);
  overflow-y: auto; padding: 10px;
  display: flex; flex-direction: column; gap: 11px;
  max-height: 90vh;
}
#sf-side::-webkit-scrollbar { width: 4px; }
#sf-side::-webkit-scrollbar-thumb { background: var(--sf-border); border-radius: 2px; }

.sf-sec { display: flex; flex-direction: column; gap: 6px; }
.sf-sec-title {
  font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px; color: var(--sf-accent);
  border-bottom: 1px solid var(--sf-border); padding-bottom: 3px;
}
.sf-row   { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.sf-row > label { font-size: 11px; color: var(--sf-dim); min-width: 64px; flex-shrink: 0; }
.sf-row > input, .sf-row > select { flex: 1; min-width: 0; }
.sf-flex  { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.sf-note  { font-size: 10px; color: var(--sf-dim); font-style: italic; line-height: 1.4; }

/* Day tabs */
.sf-daytabs { display: flex; gap: 3px; flex-wrap: wrap; }
.sf-daytab {
  padding: 3px 8px; border-radius: 4px; cursor: pointer; font-size: 11px; font-weight: 600;
  border: 1px solid var(--sf-border); background: var(--sf-panel2); color: var(--sf-text);
  transition: all .15s; white-space: nowrap;
}
.sf-daytab.sf-on             { background: var(--sf-accent); color: #111; border-color: var(--sf-accent); }
.sf-daytab:hover:not(.sf-on) { border-color: var(--sf-accent); }

/* Logo drop */
#sf-logo-drop {
  border: 2px dashed var(--sf-border); border-radius: 5px; text-align: center;
  padding: 8px 4px; color: var(--sf-dim); font-size: 11px; cursor: pointer;
  transition: border-color .2s; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 3px; min-height: 42px;
}
#sf-logo-drop:hover, #sf-logo-drop.sf-drag { border-color: var(--sf-accent); color: var(--sf-accent); }
#sf-logo-preview { max-width: 100%; max-height: 38px; display: none; border-radius: 3px; }
#sf-zoom-lbl { font-size: 11px; color: var(--sf-accent); font-weight: 700; min-width: 34px; }

/* ── Canvas wrap ──────────────────────────────────────── */
#sf-canvas-wrap {
  flex: 1;
  overflow-y: auto;   /* scroll vertically when grid is taller than panel */
  overflow-x: auto;
  padding: 12px;
  background: #0a0a14;
  position: relative;
  min-width: 0;
  /* max-height matches side panel so both scroll independently */
  max-height: 90vh;
}
#sf-canvas-wrap::-webkit-scrollbar { width:6px; height:6px; }
#sf-canvas-wrap::-webkit-scrollbar-thumb { background:var(--sf-border); border-radius:3px; }

/* ── Schedule output ──────────────────────────────────────
   NO aspect-ratio. Height grows with content. 
   Background image is position:absolute and covers title area.
   Grid flows below title in normal document flow — never clipped.
   ─────────────────────────────────────────────────────── */
#sf-schedule {
  position: relative;
  width: 100%;
  min-width: 600px;          /* prevent collapse on narrow screens */
  background: #000000;
  border-radius: 8px;
  overflow: visible;          /* NEVER clip rows — grid must always be fully visible */
  box-shadow: 0 8px 40px rgba(0,0,0,.8);
  /* height = title + grid rows — grows naturally */
}

/* Background image — covers the full schedule area */
#sf-bg-img {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
  background-size: cover;
  background-position: center top;
  display: none;
  pointer-events: none;
  border-radius: 8px;
}

/* ── Notice — sits at very top of schedule, above title band ── */
#sf-notice-el {
  position: absolute;
  top: 0; right: 2%;
  z-index: 5;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  /* font-size and color injected by JS */
}

/* ── Title band — normal flow ─────────────────────────── */
#sf-title-area {
  position: relative;
  z-index: 3;
  display: flex; align-items: center; gap: 2%;
  padding: 4% 2% 1.5%;  /* top padding creates space for the notice line above */
  background-color: #FFE600; /* injected by JS */
  min-height: 80px;
}

/* Grid — normal document flow below title.
   This means the schedule container grows to contain all rows.
   Background image is position:absolute so it covers both areas. */
#sf-grid {
  position: relative;
  z-index: 1;
  margin: 0 1%;
  width: 98%;
  background: transparent;
  /* margin-top auto-set by JS after measuring title height */
  padding-bottom: 8px; /* small gap above legend */
}
#sf-logo-sched { max-height: 10%; max-width: 12%; object-fit: contain; display: none; }
#sf-title-text  { flex: 1; display: flex; flex-direction: column; gap: 0.3%; }
#sf-ev-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 5vw; /* responsive — scales with container */
  letter-spacing: 0.05em; color: #111;
  outline: none; background: transparent; border: none; line-height: 1;
}
#sf-ev-sub {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 2vw; font-weight: 700; letter-spacing: 0.08em; color: #111;
  outline: none; background: transparent; border: none;
}
.sf-admin-mode #sf-ev-title,
.sf-admin-mode #sf-ev-sub { cursor: text; }
.sf-admin-mode #sf-ev-title:focus,
.sf-admin-mode #sf-ev-sub:focus { outline: 2px dashed var(--sf-accent3); border-radius: 3px; }

/* ── Table ────────────────────────────────────────────── */

/*
  BEST PRACTICE TABLE ARCHITECTURE:
  - table-layout: fixed for predictable column widths
  - No inline width/height on cells — controlled by colgroup
  - border-collapse: collapse for clean borders
  - Resize handles are overlaid on cell borders, not part of table flow
*/
#sf-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border: 1px solid rgba(255,255,255,0.2);
}

#sf-table th,
#sf-table td {
  padding: 0;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.2); /* default; overridden by JS */
}

/* Column header cells */
.sf-hdr {
  padding: 4px 6px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: pre-wrap;
  word-break: break-word;
  outline: none;
  user-select: none;
  line-height: 1.2;
  /* font-size, color, background injected by JS */
}

/* Time cells */
.sf-time {
  padding: 4px 6px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  text-align: center;
  outline: none;
  white-space: nowrap;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  /* font-size, color, background injected by JS */
}

/* Content cell wrapper */
.sf-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  height: 100%;
  width: 100%;
  gap: 1px;
}
.sf-admin-mode .sf-cell { cursor: pointer; }
.sf-admin-mode .sf-cell.sf-sel { outline: 2px solid var(--sf-accent3); outline-offset: -1px; }

.sf-artist, .sf-genre, .sf-topic {
  outline: none; background: transparent; border: none;
  color: inherit; width: 100%; text-align: inherit;
  line-height: 1.2; padding: 0; resize: none; overflow: hidden;
  font-family: inherit;
}
.sf-artist { font-weight: 700; }
.sf-genre  { opacity: 0.78; }
.sf-topic  { opacity: 0.88; font-style: italic; }

/* Special row */
.sf-special {
  display: flex; align-items: center; justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  outline: none; width: 100%; height: 100%; padding: 4px 6px;
}

/* ── Row resize handles ────────────────────────────────── */
/*
  Row resize: a thin draggable strip on the BOTTOM border of each <tr>.
  It sits inside the last td of each row as an absolutely positioned overlay.
  Admin only.
*/
.sf-row-resize {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 6px;
  cursor: row-resize;
  z-index: 20;
  background: transparent;
  transition: background .1s;
}
.sf-row-resize:hover, .sf-row-resize.sf-dragging { background: rgba(0,229,255,0.5); }

/* ── Col resize handles ────────────────────────────────── */
.sf-col-resize {
  position: absolute;
  top: 0; right: -3px; bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 20;
  background: transparent;
  transition: background .1s;
}
.sf-col-resize:hover, .sf-col-resize.sf-dragging { background: rgba(255,230,0,0.6); }

/* ── Legend ───────────────────────────────────────────── */
#sf-legend {
  display: flex; gap: 3%; padding: 1% 3%;
  align-items: center; justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; letter-spacing: 0.05em; flex-wrap: wrap;
  /* background injected by JS */
}
.sf-leg-item  { display: flex; gap: 8px; align-items: center; }
.sf-leg-swatch { display: inline-block; border-radius: 3px; }

/* ── Cell editor panel ─────────────────────────────────── */
#sf-cell-ed {
  position: fixed;
  width: 82vw; max-width: 900px; min-width: 480px;
  /* height is auto — content determines it, kept short/wide */
  max-height: 92vh;
  background: var(--sf-panel);
  border: 2px solid var(--sf-accent);
  border-radius: 10px; z-index: 99999;
  display: none; flex-direction: column;
  box-shadow: 0 10px 50px rgba(0,0,0,.95);
  overflow: hidden;
}
#sf-cell-ed.sf-show { display: flex; }

#sf-ced-handle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 12px; background: #161628;
  border-bottom: 1px solid var(--sf-border);
  cursor: grab; user-select: none; flex-shrink: 0;
  border-radius: 8px 8px 0 0;
}
#sf-ced-handle:active { cursor: grabbing; }
#sf-ced-handle h3 {
  font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; color: var(--sf-accent);
}
#sf-ced-hint { font-size: 10px; color: var(--sf-dim); }

#sf-ced-body {
  overflow-y: auto;
  padding: 11px 13px;
  display: flex;
  flex-direction: row;
  gap: 0;
  flex: 1;
  min-height: 0;
  align-items: flex-start;
}
#sf-ced-body::-webkit-scrollbar { width: 4px; }
#sf-ced-body::-webkit-scrollbar-thumb { background: var(--sf-border); border-radius: 2px; }

#sf-ced-foot {
  padding: 7px 13px; border-top: 1px solid var(--sf-border);
  background: #161628; flex-shrink: 0;
  display: flex; gap: 5px;
}

.sf-cr  { display: flex; gap: 5px; align-items: center; }
.sf-cr label { font-size: 11px; color: var(--sf-dim); min-width: 56px; flex-shrink: 0; }
.sf-cr input[type=text]   { flex: 1; font-size: 12px; padding: 3px 6px; }
.sf-cr input[type=range]  { flex: 1; }
.sf-cbtns { display: flex; gap: 4px; flex-wrap: wrap; }
.sf-cbtns button { padding: 3px 7px; font-size: 11px; }
.sf-clbl  { font-size: 10px; color: var(--sf-dim); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; }
.sf-lvls  { display: flex; gap: 4px; flex-wrap: wrap; }
.sf-lvl   { padding: 3px 8px; font-size: 11px; border-radius: 4px; cursor: pointer; border: 2px solid transparent; font-weight: 700; }
.sf-lvl.sf-on { border-color: #fff !important; box-shadow: 0 0 0 3px rgba(255,255,255,0.6); transform: scale(1.08); }
.sf-szval { font-size: 11px; color: var(--sf-accent); min-width: 32px; text-align: right; font-weight: 700; flex-shrink: 0; }

/* ── Column header editor ──────────────────────────────── */
#sf-col-ed {
  position: fixed;
  width: 230px;
  background: var(--sf-panel);
  border: 2px solid #FFE600;
  border-radius: 10px; z-index: 9998;
  display: none; flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,.9);
  overflow: hidden;
}
#sf-col-ed.sf-show { display: flex; }
#sf-col-ed-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 11px; background: #252500;
  border-bottom: 1px solid var(--sf-border);
  cursor: grab; user-select: none; border-radius: 8px 8px 0 0;
}
#sf-col-ed-hdr:active { cursor: grabbing; }
#sf-col-ed-hdr h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #FFE600; font-family: 'Barlow Condensed', sans-serif; }
#sf-col-ed-body { padding: 11px; display: flex; flex-direction: column; gap: 8px; }
#sf-col-ed-foot { padding: 7px 11px; border-top: 1px solid var(--sf-border); display: flex; gap: 5px; }

/* ── Canvas drop overlay ───────────────────────────────── */
#sf-drop-cover {
  position: absolute; inset: 0; z-index: 50;
  background: rgba(0,229,255,.06);
  border: 3px dashed var(--sf-accent3);
  display: none; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem; letter-spacing: 3px; color: var(--sf-accent3);
  pointer-events: none; border-radius: 8px;
}
#sf-drop-cover.sf-show { display: flex; }

/* ── Placed images ─────────────────────────────────────── */
.sf-pimg { position: absolute; cursor: move; z-index: 10; border: 2px solid transparent; user-select: none; }
.sf-pimg:hover, .sf-pimg.sf-on { border-color: var(--sf-accent3); }
.sf-pimg img { display: block; width: 100%; height: auto; }
.sf-prz { position: absolute; bottom: -5px; right: -5px; width: 12px; height: 12px; background: var(--sf-accent3); border-radius: 3px; cursor: se-resize; }

/* ── Public read-only ──────────────────────────────────── */
.sf-readonly [contenteditable] { pointer-events: none !important; user-select: none !important; }
.sf-readonly .sf-cell          { cursor: default !important; }

/* ── Mobile responsive ────────────────────────────────────
   The schedule output (#sf-schedule) uses aspect-ratio + width:100%
   so it naturally scales. Font sizes use vw/% so they scale too.
   On small screens the side panel stacks below the canvas.
   ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #sf-main { flex-direction: column; }
  #sf-side  { width: 100%; max-height: 55vh; border-right: none; border-bottom: 2px solid var(--sf-border); }
  #sf-ev-title { font-size: 7vw; }
  #sf-ev-sub   { font-size: 3.5vw; }
  #sf-toolbar  { gap: 4px; }
  #sf-cell-ed  { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; max-height: 70vh; border-radius: 14px 14px 0 0; }
}
@media (max-width: 480px) {
  #sf-ev-title { font-size: 9vw; }
  #sf-ev-sub   { font-size: 4.5vw; }
}

/* ── Public wrapper (no toolbar) ───────────────────────── */
.sf-public-wrap { width: 100%; }
.sf-public-wrap #sf-schedule { border-radius: 6px; }

/* ── Time cell editor popup ─────────────────────────── */
#sf-time-ed {
  position: fixed;
  width: 260px;
  background: var(--sf-panel);
  border: 2px solid #FFE600;
  border-radius: 10px;
  z-index: 9998;
  display: none;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,.9);
  overflow: hidden;
}
#sf-time-ed.sf-show { display: flex; }
#sf-ted-handle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 12px; background: #252500;
  border-bottom: 1px solid var(--sf-border);
  cursor: grab; user-select: none;
  border-radius: 8px 8px 0 0;
}
#sf-ted-handle:active { cursor: grabbing; }
#sf-ted-handle h3 {
  font-family: 'Barlow Condensed', sans-serif; font-size: 13px;
  font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #FFE600;
}
/* Time cell pointer cursor for admin */
.sf-admin-mode .sf-time { cursor: pointer; }
.sf-admin-mode .sf-time:hover { outline: 2px solid #FFE600; outline-offset: -2px; }

/* ── Brand Kit & Swatches ───────────────────────────── */
.sf-bk-swatch, .sf-ced-swatch {
  display: inline-block;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .1s, border-color .1s;
}
.sf-bk-swatch:hover, .sf-ced-swatch:hover {
  transform: scale(1.15);
  border-color: #FFE600 !important;
}
#sf-swatch-grid { display: flex; flex-wrap: wrap; gap: 5px; }
#sf-brand-kit-grid { display: flex; flex-wrap: wrap; gap: 5px; }
#sf-ced-hexinput { font-family: monospace; }

/* ── Updated col editor — matches cell editor size ─── */
#sf-col-ed {
  width: 285px;
  max-height: 560px;
  overflow: hidden;
  display: none;
  flex-direction: column;
}
#sf-col-ed.sf-show { display: flex; }
#sf-col-ed-body {
  padding: 12px 13px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow-y: auto;
  flex: 1;
}
#sf-col-ed-body::-webkit-scrollbar { width: 4px; }
#sf-col-ed-body::-webkit-scrollbar-thumb { background: var(--sf-border); border-radius: 2px; }
#sf-col-ed-foot {
  padding: 8px 13px;
  border-top: 1px solid var(--sf-border);
  background: #161628;
  flex-shrink: 0;
  display: flex;
  gap: 6px;
}
#sf-ced-ctext {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.3;
}

/* ── Legend / footer editor popup ──────────────────── */
#sf-leg-ed {
  position: fixed;
  width: 285px;
  background: var(--sf-panel);
  border: 2px solid #FFE600;
  border-radius: 10px;
  z-index: 9999;
  display: none;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,.9);
  overflow: hidden;
}
#sf-leg-ed.sf-show { display: flex; }
#sf-leg-ed-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 12px; background: #252500;
  border-bottom: 1px solid var(--sf-border);
  cursor: grab; user-select: none; border-radius: 8px 8px 0 0;
}
#sf-leg-ed-hdr:active { cursor: grabbing; }
#sf-leg-ed-hdr h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #FFE600; }
#sf-leg-ed-body { padding: 12px 13px; display: flex; flex-direction: column; gap: 9px; }
#sf-leg-ed-foot { padding: 7px 13px; border-top: 1px solid var(--sf-border); background: #161628; display: flex; gap: 6px; }
/* Legend click hint for admin */
.sf-admin-mode #sf-legend { cursor: pointer; position: relative; }
.sf-admin-mode #sf-legend::after {
  content: '✏ Click to edit';
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 10px; color: rgba(255,255,255,0.3); font-family: 'Barlow', sans-serif;
  pointer-events: none;
}

/* ── Header Editor Popup ────────────────────────────── */
#sf-hdr-ed {
  position: fixed;
  width: 320px;
  max-height: 88vh;
  background: var(--sf-panel);
  border: 2px solid var(--sf-accent);
  border-radius: 10px;
  z-index: 9999;
  display: none;
  flex-direction: column;
  box-shadow: 0 10px 50px rgba(0,0,0,.95);
  overflow: hidden;
}
#sf-hdr-ed.sf-show { display: flex; }
#sf-hdr-ed-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 13px; background: #161628;
  border-bottom: 1px solid var(--sf-border);
  cursor: grab; user-select: none; border-radius: 8px 8px 0 0; flex-shrink: 0;
}
#sf-hdr-ed-hdr:active { cursor: grabbing; }
#sf-hdr-ed-hdr h3 {
  font-family: 'Barlow Condensed', sans-serif; font-size: 14px;
  font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  color: var(--sf-accent);
}
#sf-hdr-ed-body {
  padding: 13px 14px; display: flex; flex-direction: column;
  gap: 7px; overflow-y: auto; flex: 1;
}
#sf-hdr-ed-body::-webkit-scrollbar { width: 4px; }
#sf-hdr-ed-body::-webkit-scrollbar-thumb { background: var(--sf-border); border-radius: 2px; }
#sf-hdr-ed-foot {
  padding: 8px 13px; border-top: 1px solid var(--sf-border);
  background: #161628; flex-shrink: 0; display: flex; gap: 6px;
}

/* Edit hint overlay on title area */
#sf-hdr-edit-hint {
  display: none;
}
.sf-admin-mode #sf-title-area {
  cursor: pointer;
  position: relative;
}
.sf-admin-mode #sf-title-area::after {
  content: '\2710  Click to edit header';
  position: absolute;
  bottom: 6px; right: 10px;
  font-size: 11px; font-family: 'Barlow', sans-serif;
  color: rgba(0,0,0,0.35);
  pointer-events: none;
  letter-spacing: 0.5px;
}
.sf-admin-mode #sf-title-area:hover::after {
  color: rgba(0,0,0,0.6);
}

/* ══════════════════════════════════════════════════════
   MOBILE RESPONSIVE — v4.1
   Public view: horizontally scrollable schedule on phones.
   Admin view: side panel stacks, canvas scrolls.
   ══════════════════════════════════════════════════════ */

/* Public wrapper — allow horizontal scroll on small screens */
.sf-public-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* On mobile, schedule gets a minimum width so it's fully readable,
   and the outer wrapper scrolls horizontally */
@media (max-width: 767px) {
  /* Public view — scrollable schedule */
  .sf-public-wrap #sf-schedule {
    min-width: 700px; /* ensures full grid visible, user scrolls right */
    width: 700px;
    border-radius: 6px;
  }

  /* Font sizes scale down a bit on small screens */
  #sf-ev-title { font-size: 8vw !important; }
  #sf-ev-sub   { font-size: 4vw !important; }
  #sf-notice-el { font-size: 2.5vw !important; top: 4% !important; }

  /* Admin view — stack layout */
  .sf-admin-mode #sf-main,
  #sf-main { flex-direction: column; }
  .sf-admin-mode #sf-side,
  #sf-side {
    width: 100%;
    min-width: 0;
    max-height: 50vh;
    border-right: none;
    border-bottom: 2px solid var(--sf-border);
    order: 2;
  }
  .sf-admin-mode #sf-canvas-wrap,
  #sf-canvas-wrap {
    order: 1;
    max-height: none;
    min-height: 60vw;
  }

  /* Cell editor and other popups — full width bottom sheet */
  #sf-cell-ed, #sf-col-ed, #sf-time-ed, #sf-leg-ed, #sf-hdr-ed {
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important;
    width: 100% !important;
    max-height: 75vh;
    border-radius: 14px 14px 0 0 !important;
    overflow-y: auto;
  }

  /* Toolbar wraps cleanly */
  #sf-toolbar { gap: 4px; padding: 6px 8px; }
  #sf-toolbar h2 { font-size: 14px; }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .sf-public-wrap #sf-schedule { min-width: 900px; width: 900px; }
  #sf-ev-title { font-size: 6vw !important; }
  #sf-ev-sub   { font-size: 3vw !important; }
}

/* Legend two-row layout */
#sf-legend {
  flex-direction: column !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* Opacity slider row in cell editor */
#sf-lvl-opacity-row { margin-top: 5px; }


/* ── Legend item list (draggable rows) ──────────────── */
#sf-leg-item-list { display: flex; flex-direction: column; gap: 2px; }

.sf-leg-item-row {
  transition: background .1s, opacity .15s;
  user-select: none;
}
.sf-leg-item-row:hover { background: rgba(255,255,255,0.07) !important; }
.sf-leg-item-row[draggable=true] { cursor: grab; }
.sf-leg-item-row[draggable=true]:active { cursor: grabbing; }

/* Legend editor larger */
#sf-leg-ed { width: 360px; max-height: 90vh; }
#sf-leg-ed-body { max-height: 75vh; overflow-y: auto; }

/* ── Sub-grids below legend ─────────────────────────── */
#sf-subgrids { margin-top: 2px; }

.sf-subgrid-wrap {
  margin: 0 1% 14px;
  border-radius: 0 0 6px 6px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

.sf-subgrid-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.8vw;
  font-weight: 700;
  padding: 6px 12px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #4CAF50;
  color: #111;
}

.sf-subgrid-wrap table td,
.sf-subgrid-wrap table th {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.2vw;
  letter-spacing: 0.03em;
}

.sf-add-subgrid-btn:hover {
  background: #d4c000 !important;
}

/* Mobile sub-grids */
@media (max-width: 767px) {
  .sf-subgrid-title { font-size: 4vw; }
  .sf-subgrid-wrap table td,
  .sf-subgrid-wrap table th { font-size: 2.5vw; }
}

/* ── Section Editor Popup ───────────────────────────── */
#sf-sg-ed {
  position: fixed;
  width: 310px;
  max-height: 88vh;
  background: var(--sf-panel);
  border: 2px solid #4CAF50;
  border-radius: 10px;
  z-index: 9999;
  display: none;
  flex-direction: column;
  box-shadow: 0 10px 50px rgba(0,0,0,.95);
  overflow: hidden;
}
#sf-sg-ed.sf-show { display: flex; }
#sf-sg-ed-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 13px; background: #0a1f0a;
  border-bottom: 1px solid #2a452a;
  cursor: grab; user-select: none; border-radius: 8px 8px 0 0; flex-shrink: 0;
}
#sf-sg-ed-hdr:active { cursor: grabbing; }
#sf-sg-ed-hdr h3 {
  font-family: 'Barlow Condensed', sans-serif; font-size: 14px;
  font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #4CAF50;
}
#sf-sg-ed-body {
  padding: 13px 14px; display: flex; flex-direction: column;
  gap: 7px; overflow-y: auto; flex: 1;
}
#sf-sg-ed-body::-webkit-scrollbar { width: 4px; }
#sf-sg-ed-body::-webkit-scrollbar-thumb { background: #2a452a; border-radius: 2px; }
#sf-sg-ed-foot {
  padding: 8px 13px; border-top: 1px solid var(--sf-border);
  background: #0a1f0a; flex-shrink: 0; display: flex; gap: 6px;
}

/* ── Table Editor Modal ─────────────────────────────── */
#sf-tbl-modal { font-family: 'Barlow Condensed', sans-serif; }
#sf-tbl-modal input[type=text] {
  background: #111133; color: #FFE600; border: 1px solid #3a3a5a;
  border-radius: 4px; padding: 4px 6px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 13px;
}
#sf-tbl-modal input[type=text]:focus { border-color: #FFE600; outline: none; }
#sf-tbl-modal table { border-spacing: 0; }
#sf-tbl-modal thead th { position: sticky; top: 0; z-index: 5; }

/* Row highlight picker */
.sf-row-hl-picker { font-family: 'Barlow Condensed', sans-serif; }

/* Legend rows — force nowrap inline */
#sf-legend { display: flex !important; flex-direction: column !important; align-items: center; }
#sf-legend > div { display: flex !important; flex-wrap: nowrap !important; justify-content: center; align-items: center; gap: 1.5vw; width: 100%; }
.sf-leg-item { display: inline-flex !important; align-items: center; gap: 0.4vw; white-space: nowrap; flex-shrink: 0; }

/* Popup drag cursor */
[id$="-hdr"] { cursor: grab; user-select: none; }
[id$="-hdr"]:active { cursor: grabbing; }

/* ── Cell editor horizontal columns ────────────── */
.sf-ced-col { display: flex; flex-direction: column; gap: 7px; padding: 0 14px; overflow-y: auto; max-height: 65vh; }
.sf-ced-col::-webkit-scrollbar { width: 3px; }
.sf-ced-col::-webkit-scrollbar-thumb { background: var(--sf-border); border-radius: 2px; }
.sf-ced-col-1 { flex: 0 0 260px; min-width: 220px; border-right: 1px solid var(--sf-border); padding-left: 13px; }
.sf-ced-col-2 { flex: 1; min-width: 0; padding-right: 13px; }

/* Drag handle at bottom — visible, grabbable */
#sf-ced-drag-handle {
  text-align: center;
  padding: 8px 16px;
  cursor: grab;
  color: var(--sf-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  border-top: 2px solid var(--sf-border);
  background: #0d0d1e;
  border-radius: 0 0 8px 8px;
  user-select: none;
  flex-shrink: 0;
  transition: background 0.15s;
}
#sf-ced-drag-handle:hover { background: #1a1a30; color: #fff; }
#sf-ced-drag-handle:active { cursor: grabbing; background: #FFE600; color: #111; }

/* Modal — ensure above WP admin bar */
#sf-tbl-modal {
  z-index: 999999 !important;
}
#sf-tbl-modal-inner {
  position: relative; z-index: 1;
}

/* Mobile: stack cell editor columns */
@media (max-width: 700px) {
  #sf-cell-ed { width: 95vw; }
  .sf-ced-col-1 { flex: none; width: 100%; border-right: none; padding-right: 0; border-bottom: 1px solid var(--sf-border); padding-bottom: 10px; }
}

/* ── Modal z-index override ─────────────────────────
   Ensure the table editor modal always overlays everything,
   including the WordPress admin bar (z-index: 99999).
   Using the max possible integer for z-index.          */
#sf-tbl-modal {
  z-index: 2147483647 !important;
  position: fixed !important;
  /* Do NOT let transform/filter on parent trap this */
}

/* Prevent sf-root from creating a stacking context
   that would clip the fixed modal */
.sf-root {
  transform: none !important;
  filter: none !important;
  will-change: auto !important;
}