/* ==========================================================================
   TaazTV — admin panel.

   A working tool, not the board: softer corners, dense controls, one column
   of content under a fixed header, navigation pinned to the right (RTL).
   The palette is the board's, so what you edit here looks like what lands
   on the wall.
   ========================================================================== */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #F1F4F8;
  color: #16202B;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 2px solid var(--primary-blue); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--color-accent-200); }

/* ══════════════════════════════════════════════════════════════════════════
   Shell
   ══════════════════════════════════════════════════════════════════════ */

.app { display: grid; grid-template-columns: 268px minmax(0, 1fr); min-height: 100vh; }

.sidebar {
  background: var(--dark-blue);
  color: #E9F1F8;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.sidebar-brand img { width: 40px; height: 40px; filter: brightness(0) invert(1); }
.sidebar-brand .t { font-family: var(--font-heading); font-weight: 700; font-size: 26px; line-height: 1; }
.sidebar-brand .s { font-size: 12px; color: rgba(233, 241, 248, .6); margin-top: 2px; }

.nav { padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-label {
  font-size: 11px;
  letter-spacing: .08em;
  color: rgba(233, 241, 248, .45);
  padding: 14px 12px 6px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: rgba(233, 241, 248, .82);
  background: none;
  border: 0;
  font: inherit;
  text-align: start;
  cursor: pointer;
  width: 100%;
  transition: background .15s ease, color .15s ease;
}
.nav-item svg { flex: none; opacity: .8; }
.nav-item:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.nav-item.is-active { background: var(--primary-blue); color: #fff; }
.nav-item.is-active svg { opacity: 1; }
.nav-item .off {
  margin-inline-start: auto;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .85);
}
.sidebar-foot {
  padding: 12px 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.side-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: #E9F1F8;
  font: 600 14px/1.2 var(--font-body);
  text-align: start;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.side-btn:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); }
.side-btn svg { flex: none; opacity: .85; }
.side-btn.is-primary { background: var(--primary-blue); border-color: var(--primary-blue); }
.side-btn.is-primary:hover { background: var(--color-accent-400); border-color: var(--color-accent-400); color: #06263F; }
.side-btn.is-on { background: var(--color-accent-400); border-color: var(--color-accent-400); color: #06263F; }
.side-note { margin: 6px 2px 0; font-size: 11.5px; line-height: 1.45; color: rgba(233, 241, 248, .5); }

/* — undo / redo — */
.history { display: flex; gap: 4px; }
.history .btn { width: 34px; height: 34px; padding: 0; }
.history .btn:disabled { opacity: .35; }

.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #DDE4EC;
  padding: 12px 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.topbar h1 { font-family: var(--font-heading); font-weight: 700; font-size: 28px; line-height: 1.1; margin: 0; }
.topbar .spacer { flex: 1; }

.sync {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #3E5468;
  padding: 6px 12px;
  border-radius: 99px;
  background: var(--color-ok-soft);
}
.sync .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-ok); }
.sync.is-warn { background: var(--color-warn-soft); color: #7A5310; }
.sync.is-warn .dot { background: var(--color-warn); }
.sync .flash { animation: pulse .6s ease; }
@keyframes pulse { 0% { transform: scale(1); } 45% { transform: scale(2.1); } 100% { transform: scale(1); } }

.content { padding: 22px 28px 90px; max-width: 1180px; width: 100%; }

/* ══════════════════════════════════════════════════════════════════════════
   Buttons
   ══════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #CBD5E0;
  background: #fff;
  color: #1F2D3A;
  border-radius: 8px;
  padding: 8px 14px;
  font: 600 14px/1.2 var(--font-body);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:hover { background: #F4F8FC; border-color: var(--color-accent-300); }
.btn:active { background: var(--color-accent-100); }
.btn-primary { background: var(--primary-blue); border-color: var(--primary-blue); color: #fff; }
.btn-primary:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-danger { color: var(--color-danger); border-color: #E7C4BF; }
.btn-danger:hover { background: var(--color-danger-soft); border-color: var(--color-danger); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: #E7EDF4; border-color: transparent; }
.btn-sm { padding: 5px 10px; font-size: 13px; border-radius: 6px; }
.btn-icon { padding: 6px; width: 32px; height: 32px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ══════════════════════════════════════════════════════════════════════════
   Panels and fields
   ══════════════════════════════════════════════════════════════════════ */

.panel {
  background: #fff;
  border: 1px solid #E1E8F0;
  border-radius: 14px;
  margin-bottom: 18px;
  overflow: hidden;
}
.panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #EDF1F6;
  flex-wrap: wrap;
}
.panel-head h2 { font-family: var(--font-heading); font-weight: 700; font-size: 22px; margin: 0; line-height: 1.2; display: flex; align-items: center; gap: 9px; }
.panel-head h2 svg { color: var(--primary-blue); }
.panel-head .spacer { flex: 1; }
.panel-head .hint { font-size: 13px; color: #61748A; width: 100%; margin: -4px 0 0; }
.panel-body { padding: 16px 18px 18px; }

/* The section's own on/off switch, sitting in the header so it reads as
   the one that governs everything below it. */
.master { display: flex; align-items: center; gap: 10px; }
.master-label { font-size: 13px; font-weight: 600; color: var(--primary-blue); }
.panel.is-off .master-label { color: #8494A6; }
.panel.is-off .panel-body { opacity: .48; }
.panel.is-off .panel-head h2 { color: #6D7E90; }

/* A wrapped row of switches under one caption. */
.switches { display: flex; flex-wrap: wrap; gap: 10px 24px; padding-top: 4px; }

/* ══════════════════════════════════════════════════════════════════════════
   Weather editor
   ══════════════════════════════════════════════════════════════════════ */

.muted { color: #7C8CA0; font-size: 13px; }
.bad { color: var(--color-danger); }

.readout {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px 14px; border-radius: 10px;
  background: var(--color-accent-100); color: var(--color-accent-800);
  font-size: 15px;
}
.readout b { font-size: 17px; }
.readout svg { vertical-align: -3px; }
.readout .bad { display: inline-flex; align-items: center; gap: 6px; }

.current-place {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 9px 12px; border: 1px solid #E6ECF3; border-radius: 10px; background: #FBFCFE;
}
.current-place svg { color: var(--primary-blue); }

.places { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.place {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border: 1px solid #D8E1EB; border-radius: 8px;
  background: #fff; font: 400 14px/1.2 var(--font-body); color: inherit;
  cursor: pointer; text-align: start;
  transition: background .15s ease, border-color .15s ease;
}
.place:hover { background: var(--color-accent-100); border-color: var(--color-accent-300); }
.place .name { font-weight: 600; }
.place.is-on { background: var(--primary-blue); border-color: var(--primary-blue); color: #fff; }
.place.is-on .muted { color: rgba(255, 255, 255, .8); }
.place svg { color: var(--primary-blue); }
.place.is-on svg { color: #fff; }

.grid { display: grid; gap: 14px; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > label { font-size: 13px; font-weight: 600; color: #3E5468; }
.field .note { font-size: 12px; color: #7C8CA0; }

.input, .select, .textarea {
  width: 100%;
  border: 1px solid #CFD9E4;
  border-radius: 8px;
  background: #fff;
  padding: 8px 11px;
  font: 400 15px/1.45 var(--font-body);
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--color-accent-300); }
.input:focus, .select:focus, .textarea:focus {
  outline: 0;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px var(--color-accent-100);
}
.textarea { resize: vertical; min-height: 78px; }
.input[dir="ltr"] { text-align: left; }
/* The chevron is painted from the physical left edge, so the room for it
   is reserved on the left too — in RTL that is the field's end. */
.select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #61748A 50%),
    linear-gradient(135deg, #61748A 50%, transparent 50%);
  background-position: 14px calc(50% + 1px), 19px calc(50% + 1px);
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-left: 34px;
}

/* — switch — */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
/* The native checkbox stays in the accessibility tree and keeps keyboard
   focus; only its pixels are hidden. */
.switch input {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; border: 0; white-space: nowrap; clip-path: inset(50%);
}
.switch .track {
  width: 42px; height: 24px; border-radius: 99px; background: #C9D3DE;
  position: relative; flex: none; transition: background .18s ease;
}
.switch .track::after {
  content: ""; position: absolute; top: 3px; right: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: transform .18s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
}
.switch input:checked + .track { background: var(--primary-blue); }
.switch input:checked + .track::after { transform: translateX(-18px); }
.switch input:focus-visible + .track { outline: 2px solid var(--primary-blue); outline-offset: 2px; }
.switch .label { font-size: 14px; }
.switch.is-locked { opacity: .55; }

.toggle-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid #E6ECF3; border-radius: 10px; background: #FBFCFE;
}
.toggle-row .grow { flex: 1; min-width: 0; }
.toggle-row .name { font-weight: 600; font-size: 14px; }
.toggle-row .why { font-size: 12px; color: #7C8CA0; }

/* — segmented control — */
.seg { display: inline-flex; border: 1px solid #CFD9E4; border-radius: 9px; overflow: hidden; background: #fff; align-self: flex-start; max-width: 100%; }
.seg button {
  border: 0; background: none; font: 600 14px/1 var(--font-body); color: #3E5468;
  padding: 9px 16px; cursor: pointer; transition: background .15s ease, color .15s ease;
}
.seg button + button { border-inline-start: 1px solid #E3EAF2; }
.seg button:hover { background: #F2F6FA; }
.seg button.is-on { background: var(--primary-blue); color: #fff; }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 99px;
  background: var(--color-accent-100); color: var(--color-accent-800);
}
.badge.is-off { background: #EAEEF3; color: #6A7A8B; }
.badge.is-auto { background: var(--color-warn-soft); color: #7A5310; }

/* ══════════════════════════════════════════════════════════════════════════
   Repeatable rows
   ══════════════════════════════════════════════════════════════════════ */

.rows { display: flex; flex-direction: column; gap: 8px; }
.row {
  display: flex; align-items: center; gap: 8px;
  background: #FBFCFE; border: 1px solid #E6ECF3; border-radius: 10px; padding: 8px;
}
.row .num {
  flex: none; width: 24px; height: 24px; border-radius: 6px; background: #E8EFF7;
  color: #46617C; font-size: 12px; font-weight: 700; display: grid; place-items: center;
}

/* ── drag handle ──────────────────────────────────────────────────────── */

.grip {
  flex: none; width: 24px; height: 30px; padding: 0;
  border: 0; background: none; cursor: grab; border-radius: 6px;
  display: grid; place-items: center; color: #A7B6C6;
  transition: background .15s ease, color .15s ease;
}
.grip:hover { background: #E8EFF7; color: var(--primary-blue); }
.grip:active { cursor: grabbing; }
.grip .dots {
  width: 10px; height: 16px;
  background-image: radial-gradient(currentColor 1.4px, transparent 1.5px);
  background-size: 5px 5px;
  background-position: 0 0;
}

.row.is-dragging, .item.is-dragging {
  opacity: .45;
  border-color: var(--primary-blue);
  border-style: dashed;
}
.rows.is-sorting .row, .items.is-sorting .item { transition: transform .12s ease; }
.rows.is-sorting .input, .items.is-sorting .input { pointer-events: none; }
.row .fields { flex: 1; display: grid; gap: 8px; min-width: 0; }
.row .acts { display: flex; gap: 4px; flex: none; }
.row-empty { padding: 18px; text-align: center; color: #7C8CA0; font-size: 14px; border: 1px dashed #D3DDE8; border-radius: 10px; }

/* ══════════════════════════════════════════════════════════════════════════
   Card / slide manager
   ══════════════════════════════════════════════════════════════════════ */

.tabs { display: flex; gap: 6px; border-bottom: 1px solid #E1E8F0; padding: 0 18px; background: #FBFCFE; }
.tabs button {
  border: 0; background: none; font: 600 15px/1 var(--font-body); color: #61748A;
  padding: 13px 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs button:hover { color: var(--primary-blue); }
.tabs button.is-on { color: var(--primary-blue); border-bottom-color: var(--primary-blue); }
.tabs .count { font-size: 12px; opacity: .7; }

.items { display: flex; flex-direction: column; gap: 10px; }
.item {
  border: 1px solid #E1E8F0; border-radius: 12px; background: #fff; overflow: hidden;
  transition: border-color .15s ease;
}
.item.is-open { border-color: var(--color-accent-300); box-shadow: 0 2px 14px rgba(35, 113, 180, .08); }
.item.is-hidden .item-head .title { opacity: .45; text-decoration: line-through; }
.item-head {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #FBFCFE;
}
.item-head .mark {
  width: 32px; height: 32px; border-radius: 8px; flex: none; display: grid; place-items: center;
  background: var(--color-accent-100); color: var(--color-accent-700);
}
.item-head .mark.is-alert { background: var(--dark-blue); color: var(--light-blue); }
.item-head .grow { flex: 1; min-width: 0; cursor: pointer; }
.item-head .title { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-head .sub { font-size: 12px; color: #7C8CA0; display: flex; align-items: center; gap: 6px; }
.item-head .acts { display: flex; align-items: center; gap: 4px; flex: none; }
.item-body { padding: 14px 14px 16px; border-top: 1px solid #EDF1F6; display: grid; gap: 14px; }

/* ══════════════════════════════════════════════════════════════════════════
   Type picker — the eight layouts drawn as wireframes of what lands on the
   wall, so the choice is a shape rather than a word in a dropdown.
   ══════════════════════════════════════════════════════════════════════ */

.typegrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
}
.typecard {
  display: flex; flex-direction: column; gap: 7px;
  padding: 10px 10px 11px;
  border: 1px solid #DDE5EE; border-radius: 11px; background: #fff;
  cursor: pointer; text-align: start; font: inherit; color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.typecard:hover { border-color: var(--color-accent-300); background: #FAFCFE; }
.typecard.is-on {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 2px var(--color-accent-100);
  background: #fff;
}
.typecard .tname { font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.typecard.is-on .tname { color: var(--color-accent-800); }
.typecard .thint { font-size: 11.5px; line-height: 1.35; color: #8494A6; }

/* — the wireframes themselves — */
.sk-wrap { display: block; }
.sk {
  display: flex; flex-direction: column; gap: 4px;
  height: 62px; padding: 8px;
  border: 1px solid #DDE5EE; border-radius: 5px; background: #fff;
  overflow: hidden;
}
.sk i { display: block; height: 4px; border-radius: 2px; background: #CBD8E6; flex: none; }
.sk i.k { height: 3px; width: 38%; background: var(--color-accent-400); }
.sk i.t { height: 7px; width: 82%; background: #93A9BF; }
.sk i.t.big { height: 10px; width: 92%; }
.sk i.b { width: 100%; }
.sk i.b2 { width: 64%; }
.sk .row { display: flex; gap: 6px; }
.sk .col { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.sk .grow { flex: 1; min-height: 0; }
.sk .img {
  border-radius: 3px; flex: none;
  background: repeating-linear-gradient(-45deg, #E4EEF8 0 5px, #F7FBFF 5px 10px);
}
.sk .row > .img { align-self: stretch; }
.sk .date { width: 15px; background: var(--dark-blue); border-radius: 2px; flex: none; }
.sk .boxes { display: flex; gap: 4px; margin-top: 2px; }
.sk .boxes b { flex: 1; height: 14px; border: 1px solid #CBD8E6; border-radius: 2px; }
.sk .lrow { display: flex; justify-content: space-between; gap: 8px; }
.sk .lrow i { height: 3px; }

.sk.dark { background: var(--dark-blue); border-color: var(--dark-blue); }
.sk.dark i { background: rgba(255, 255, 255, .42); }
.sk.dark i.k { background: var(--light-blue); }
.sk.dark i.t { background: rgba(255, 255, 255, .9); }

/* — the add box under a list — */
.adder {
  border: 1px dashed #C9D6E4; border-radius: 12px; background: #F8FAFD;
  padding: 14px 15px 16px;
}
.adder h3 {
  margin: 0 0 3px; font-family: var(--font-heading); font-weight: 700; font-size: 19px;
  display: flex; align-items: center; gap: 8px;
}
.adder h3 svg { color: var(--primary-blue); }
.adder .note { margin: 0 0 12px; }
.adder .typecard { background: #fff; }


/* ══════════════════════════════════════════════════════════════════════════
   Banner, meter, toast, dialog
   ══════════════════════════════════════════════════════════════════════ */

.banner {
  display: flex; gap: 12px; align-items: flex-start;
  background: #FFF8E8; border: 1px solid #F0DCAF; border-radius: 12px;
  padding: 13px 16px; margin-bottom: 18px; color: #6A4E12;
}
.banner svg { flex: none; color: #B4761F; margin-top: 2px; }
.banner .grow { flex: 1; }
.banner b { color: #4E390B; }
.banner.is-danger { background: var(--color-danger-soft); border-color: #E7C4BF; color: #8A2A1E; }
.banner.is-danger svg { color: var(--color-danger); }

.meter { height: 8px; border-radius: 99px; background: #E4EAF1; overflow: hidden; }
.meter span {
  display: block; height: 100%; min-width: 4px; border-radius: 99px;
  background: var(--primary-blue); transition: width .3s ease, background .3s ease;
}
.meter.is-warn span { background: var(--color-warn); }
.meter.is-danger span { background: var(--color-danger); }

#toasts {
  position: fixed; bottom: 18px; inset-inline-start: 18px; z-index: 80;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
  background: #18242F; color: #fff; border-radius: 10px; padding: 11px 16px;
  font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  display: flex; align-items: center; gap: 9px; max-width: 420px;
  animation: toast-in .22s ease;
}
.toast.is-ok { background: #17624A; }
.toast.is-err { background: #8A2A1E; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

dialog.sheet {
  border: 0; border-radius: 14px; padding: 0; max-width: 520px; width: calc(100% - 40px);
  box-shadow: 0 30px 80px rgba(6, 26, 44, .35); color: inherit; font-family: var(--font-body);
}
dialog.sheet::backdrop { background: rgba(9, 27, 45, .5); }
dialog.sheet h3 { font-family: var(--font-heading); font-weight: 700; font-size: 24px; margin: 0; }
dialog.sheet .body { padding: 20px 22px; display: grid; gap: 12px; }
dialog.sheet .acts { display: flex; justify-content: flex-start; gap: 8px; padding: 14px 22px; background: #F6F8FB; border-top: 1px solid #E6ECF3; }

/* ══════════════════════════════════════════════════════════════════════════
   Live preview dock
   ══════════════════════════════════════════════════════════════════════ */

/* A floating window: `left`/`top` are set in pixels by the drag handler, so
   it can be put anywhere on screen and it stays there between visits. */
#dock {
  position: fixed;
  z-index: 60;
  width: 420px;
  background: #0E1A24;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(6, 26, 44, .38);
  color: #DCE7F1;
  overflow: hidden;
}
#dock[hidden] { display: none; }
#dock.is-dragging { user-select: none; box-shadow: 0 26px 70px rgba(6, 26, 44, .5); }
#dock.is-dragging iframe { pointer-events: none; }

#dock .dock-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; font-size: 13px;
  cursor: grab; background: rgba(255, 255, 255, .04);
}
#dock.is-dragging .dock-head { cursor: grabbing; }
#dock .dock-head .grow { flex: 1; }
#dock .dock-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--light-blue); flex: none; }
#dock .dock-head button {
  background: none; border: 0; color: #9FB4C7; cursor: pointer;
  width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center;
  font-size: 13px; line-height: 1; flex: none;
}
#dock .dock-head button:hover { background: rgba(255, 255, 255, .14); color: #fff; }

#dock .dock-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
#dock iframe { position: absolute; top: 0; right: 0; width: 1920px; height: 1080px; border: 0; transform-origin: top right; }

/* Resize handles. Physical left/bottom, not inline-start: the grip belongs
   in the corner under the window buttons, which RTL puts on the left. */
/* Fully inside the window: `#dock` clips its own overflow for the rounded
   corners, and a clipped strip cannot be grabbed. */
#dock .dock-edge { position: absolute; touch-action: none; z-index: 2; }
#dock .dock-edge-l { top: 0; bottom: 0; left: 0; width: 10px; cursor: ew-resize; }
#dock .dock-edge-b { left: 0; right: 0; bottom: 0; height: 10px; cursor: ns-resize; }

#dock .dock-resize {
  position: absolute; bottom: 0; left: 0; z-index: 3;
  width: 24px; height: 24px; cursor: nesw-resize; touch-action: none;
}
#dock .dock-resize::after {
  content: ""; position: absolute; inset: 6px;
  border-bottom: 2px solid rgba(255, 255, 255, .4);
  border-left: 2px solid rgba(255, 255, 255, .4);
  border-bottom-left-radius: 3px;
  transition: border-color .15s ease;
}
#dock .dock-resize:hover::after { border-color: var(--light-blue); }
#dock .dock-head { touch-action: none; }
#dock.is-min .dock-edge { display: none; }
#dock.is-min .dock-frame, #dock.is-min .dock-resize { display: none; }

@media (max-width: 1100px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .nav-label { display: none; }
  .sidebar-foot { flex-direction: row; flex-wrap: wrap; }
  .side-btn { width: auto; }
  .side-note { width: 100%; }
  #dock { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   The live editor — the card is the form

   The preview is the real card markup under the real board stylesheet, so
   these rules only add the editing affordances on top: a slot you can see,
   a placeholder where there is nothing yet, and a focus ring.
   ══════════════════════════════════════════════════════════════════════ */

.live-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}
.live-holder { min-width: 0; }
.live-stage {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(45deg, #EDF2F7 25%, transparent 25%) -8px 0/16px 16px,
    linear-gradient(-45deg, #EDF2F7 25%, transparent 25%) -8px 0/16px 16px,
    linear-gradient(45deg, transparent 75%, #EDF2F7 75%) 0 0/16px 16px,
    linear-gradient(-45deg, transparent 75%, #EDF2F7 75%) 0 0/16px 16px,
    #F7FAFD;
  border-radius: 10px;
  padding: 0;
}
/* The preview is an island of the board inside the panel. The admin's own
   body type and colour must not leak into it, or the card comes out in the
   wrong size and the wrong ink — so the board's context is restated here. */
.live-inner {
  transform-origin: top right;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: normal;
  --cs: 1;
}
.live-hint {
  display: flex; align-items: center; gap: 7px;
  margin: 9px 2px 0; font-size: 12.5px; color: #7C8CA0;
}
.live-hint svg { color: var(--primary-blue); flex: none; }

/* A slide is a 16:9 canvas, so it needs a box to be absolute inside. */
.live-slide { position: relative; width: 1200px; height: 675px; background: var(--color-bg); }
.live-slide-clip { position: absolute; inset: 0; overflow: hidden; }

/* — editable slots — */
.live-inner [data-field] {
  outline: 1px dashed transparent;
  outline-offset: 3px;
  border-radius: 2px;
  transition: outline-color .12s ease, background .12s ease;
  cursor: text;
}
.live-inner [data-field]:hover { outline-color: var(--color-accent-300); }
.live-inner [data-field]:focus {
  outline: 2px solid var(--primary-blue);
  background: rgba(35, 113, 180, .07);
}
.live-inner [data-empty]::before {
  content: attr(data-placeholder);
  opacity: .42;
  font-style: italic;
}
.card.is-alert [data-empty]::before,
.slide.is-alert [data-empty]::before { opacity: .55; }

/* — clickable picture and QR slots — */
.live-inner [data-slot="image"] { cursor: pointer; }
.live-inner [data-slot="image"]::after {
  content: "החלפת תמונה";
  position: absolute;
  inset-inline-end: 8px;
  top: 8px;
  z-index: 5;
  background: rgba(10, 74, 122, .9);
  color: #fff;
  font: 600 13px/1 var(--font-body);
  padding: 7px 11px;
  border-radius: 6px;
  opacity: 0;
  transition: opacity .14s ease;
  pointer-events: none;
}
.live-inner [data-slot="image"]:hover::after,
.live-inner [data-slot="image"]:focus-visible::after { opacity: 1; }
.live-inner [data-slot="image"]:hover { outline: 2px solid var(--primary-blue); outline-offset: -2px; }

.live-inner [data-slot="qr"] { cursor: pointer; }
.live-inner [data-slot="qr"]:hover { outline: 2px solid var(--primary-blue); outline-offset: 2px; }

/* A caption laid over a picture is click-through on the board, so it never
   steals a tap. In the editor that sent every click straight past it to the
   picture underneath, opening the file dialog instead of the text — so here
   the caption takes its clicks back. */
.live-inner .slide-caption { pointer-events: auto; }

.live-inner .qr-add {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; align-self: flex-start;
  border: 1px dashed var(--color-accent-300); border-radius: 7px;
  background: rgba(255, 255, 255, .8); color: var(--color-accent-800);
  font: 600 13px/1 var(--font-body); padding: 8px 12px; cursor: pointer;
}
.live-inner .qr-add:hover { background: var(--color-accent-100); border-style: solid; }
.card.is-alert .qr-add, .slide.is-alert .qr-add { color: var(--dark-blue); }

/* — row add / delete, inline on the card — */
.live-inner .row-add {
  display: inline-block; margin-top: 8px;
  border: 1px dashed var(--color-accent-300); border-radius: 6px;
  background: rgba(255, 255, 255, .8); color: var(--color-accent-800);
  font: 600 13px/1 var(--font-body); padding: 6px 10px; cursor: pointer;
}
.live-inner .row-add:hover { background: var(--color-accent-100); }
.live-inner .card-row, .live-inner .sl-row { position: relative; }
.live-inner .row-del {
  position: absolute; inset-inline-start: -26px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid #E7C4BF; background: #fff; color: var(--color-danger);
  font: 700 13px/1 var(--font-body); cursor: pointer; opacity: 0;
  display: grid; place-items: center; transition: opacity .12s ease;
}
.live-inner .card-row:hover .row-del, .live-inner .sl-row:hover .row-del { opacity: 1; }

/* — the settings column beside the card — */
.live-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.side-card { border: 1px solid #E1E8F0; border-radius: 11px; background: #FBFCFE; overflow: hidden; }
.side-card-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid #EDF1F6; background: #fff;
}
.side-card-head svg { color: var(--primary-blue); }
.side-card-body { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.side-card .note { margin: 0; padding: 0 12px 12px; }
.side-card-body .note { padding: 0; }

/* — QR placement picker — */
.place-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.place-modes { flex-direction: column; }
.place-modes button { padding: 7px 12px; font-size: 13px; }
.place-modes button + button { border-inline-start: 0; border-top: 1px solid #E3EAF2; }

.place-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  width: 74px; height: 50px; flex: none;
  padding: 3px; border: 1px solid #CFD9E4; border-radius: 7px; background: #fff;
}
.place-grid.is-locked { opacity: .4; }
.place-cell {
  border: 0; border-radius: 4px; background: #EDF2F7; cursor: pointer; padding: 0;
  display: grid; place-items: center; transition: background .12s ease;
}
.place-cell:hover:not(:disabled) { background: var(--color-accent-200); }
.place-cell:disabled { cursor: not-allowed; }
.place-cell i { width: 9px; height: 9px; border-radius: 2px; background: #A7B6C6; }
.place-cell.is-on { background: var(--primary-blue); }
.place-cell.is-on i { background: #fff; }

@media (max-width: 1320px) {
  .live-editor { grid-template-columns: minmax(0, 1fr); }
}

/* ── compact shape picker, for inside an open card ────────────────────── */
.typegrid.is-compact {
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 7px;
}
.typegrid.is-compact .typecard { padding: 7px 7px 8px; gap: 5px; border-radius: 9px; }
.typegrid.is-compact .sk { height: 44px; padding: 6px; gap: 3px; }
.typegrid.is-compact .sk i { height: 3px; }
.typegrid.is-compact .sk i.t { height: 5px; }
.typegrid.is-compact .sk i.t.big { height: 7px; }
.typegrid.is-compact .sk .boxes b { height: 10px; }
.typegrid.is-compact .sk .date { width: 11px; }
.typegrid.is-compact .tname { font-size: 12px; line-height: 1.2; }

.type-strip { margin-bottom: 4px; }

/* ── the preview's own header: which shape you are looking at ─────────── */
.live-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 9px;
}
.live-modes button { padding: 6px 14px; font-size: 13px; }
.live-where { font-size: 12.5px; color: #7C8CA0; }

/* The settings follow a tall card down the page instead of leaving a hole. */
.live-side { position: sticky; top: 74px; }

/* ══════════════════════════════════════════════════════════════════════════
   Weekly windows — when a section or an item is on screen
   ══════════════════════════════════════════════════════════════════════ */

.when-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.day-chips { display: flex; gap: 5px; flex-wrap: wrap; padding-top: 4px; }
.day-chip {
  width: 36px; height: 36px; flex: none;
  border: 1px solid #CFD9E4; border-radius: 9px; background: #fff;
  font: 600 14px/1 var(--font-body); color: #3E5468; cursor: pointer;
  transition: background .13s ease, border-color .13s ease, color .13s ease;
}
.day-chip:hover { background: var(--color-accent-100); border-color: var(--color-accent-300); }
.day-chip.is-on { background: var(--primary-blue); border-color: var(--primary-blue); color: #fff; }

.when input[type="time"] {
  font-variant-numeric: tabular-nums;
  text-align: left;
}
.side-card .when .seg button { padding: 6px 11px; font-size: 13px; }

/* Text switched off: the board just drops it, but the editor keeps the words
   reachable and says plainly that they are not going on screen. */
.live-inner .is-text-off .card-pad,
.live-inner .is-text-off .slide-pad,
.live-inner .is-text-off .slide-split > div:first-child,
.live-inner .is-text-off .slide-caption { opacity: .38; }
.live-inner .is-text-off { position: relative; }
.live-inner .is-text-off::after {
  content: "הטקסט לא יוצג על המסך";
  position: absolute; top: 8px; inset-inline-start: 8px; z-index: 6;
  background: var(--color-warn-soft); color: #7A5310;
  font: 600 12px/1 var(--font-body); padding: 6px 10px; border-radius: 6px;
  border: 1px solid #F0DCAF; pointer-events: none;
}

/* ── QR style pickers ─────────────────────────────────────────────────── */
.qr-style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.qr-style {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 9px 6px 8px; border: 1px solid #DDE5EE; border-radius: 10px;
  background: #fff; cursor: pointer; font: 600 12px/1.2 var(--font-body); color: inherit;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.qr-style:hover { border-color: var(--color-accent-300); }
.qr-style.is-on { border-color: var(--primary-blue); box-shadow: 0 0 0 2px var(--color-accent-100); }
.qr-style svg { display: block; width: 46px; height: 46px; }
.qr-style.is-blocked { opacity: .32; cursor: not-allowed; }
.qr-style.is-blocked:hover { border-color: #DDE5EE; }