/*
 * Dashboard redesign (v3) for Spinax Slider Manager.
 * Builds on the v2 flat/neutral pass but fixes two concrete problems that
 * made it feel unfinished:
 *
 *   1. Inconsistent switches — the "Use dynamic slider" toggle uses the
 *      bundle's own hand-styled .promo-switch class (hardcoded 52x30px,
 *      washed-out #d8ccc6 off-state, !important everywhere), while
 *      "Auto-rotate" / "Show this slide" use the plain Radix switch fixed
 *      in v2. Two differently-sized, differently-colored toggles sitting
 *      in the same panel read as broken, not just "different components".
 *      This version forces every switch — .promo-switch included — to
 *      the exact same size/color/motion via !important overrides (the
 *      bundle's own rules are !important too, so nothing weaker works).
 *   2. The upload dropzones still carried the bundle's original peach/tan
 *      dashed styling (background: var(--cream), border: dashed #dcb9a7),
 *      the one leftover warm/colorful spot in an otherwise neutral page —
 *      it read as unstyled/inconsistent. Neutralized to match the rest.
 *
 * Shares the tokens defined in login-theme.css (:root — loads first).
 * Pure CSS — no markup or behavior changes.
 */

/* ---------- Self-hosted display font (same-origin, no CSP change needed) ---------- */

@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/Poppins-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/Poppins-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/Poppins-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Switches: one consistent look for every toggle on the page ----------
 *
 * Root cause of the v3 bug (knob overshooting outside the track when on):
 * Tailwind v4's translate-x-[...] utility sets the modern CSS `translate`
 * property, e.g. `translate: calc(100% - 2px) 0`, as a value SEPARATE from
 * `transform`. My earlier fix only overrode `transform: translateX(...)`,
 * which does not cancel `translate` — the two compose/stack, so the knob
 * moved by both amounts at once and shot past the right edge of the track.
 *
 * Fixed by dropping transform/translate entirely for positioning and using
 * absolute left/right instead (with `translate: none !important` on every
 * state as a belt-and-braces reset in case any other utility reappears).
 */

button[role="switch"] {
  position: relative !important;
  width: 2rem !important;
  height: 1.15rem !important;
  min-width: 2rem !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 999px !important;
  background: var(--border) !important;
  display: inline-block !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background .15s !important;
}

button[role="switch"][data-state="checked"] {
  background: var(--accent) !important;
}

button[role="switch"]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent) !important;
}

[role="switch"] > span {
  position: absolute !important;
  top: 1px !important;
  left: 2px !important;
  right: auto !important;
  width: 1rem !important;
  height: 1rem !important;
  min-width: 1rem !important;
  margin: 0 !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(23, 17, 10, .3) !important;
  transform: none !important;
  translate: none !important;
  transition: left .15s !important;
}

[role="switch"][data-state="checked"] > span {
  left: calc(100% - 1rem - 2px) !important;
  transform: none !important;
  translate: none !important;
}

/* .promo-switch ships its own higher-specificity thumb rules
   (.promo-switch [data-slot=switch-thumb]{width:22px!important...} and
   .promo-switch [data-state=checked]{transform:translate(21px)}) that
   otherwise beat the generic overrides above on specificity even though
   both are !important. Matching selectors here (same specificity, later
   in the cascade) is what actually wins — including explicitly zeroing
   the bundle's own transform:translate(21px) so it can't stack with our
   left-based positioning. */
.promo-switch [data-slot="switch-thumb"] {
  width: 1rem !important;
  height: 1rem !important;
  top: 1px !important;
  left: 2px !important;
  transform: none !important;
  translate: none !important;
}

.promo-switch[data-state="checked"] [data-slot="switch-thumb"] {
  left: calc(100% - 1rem - 2px) !important;
  transform: none !important;
  translate: none !important;
}

/* ---------- Typography ---------- */

.logo strong,
.title h1,
.intro h1,
.primary,
.secondary,
.danger,
.status,
.slide-number b {
  font-family: var(--font-display);
}

.title h1 {
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -.01em;
  color: var(--text);
}

.title p,
.slides-head p,
.switch-row span,
.upload > span {
  font-family: var(--font-body);
  color: var(--text-muted);
}

.status {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
}

/* ---------- Header ---------- */

header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.logo strong {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .01em;
}

/*
 * Real logo instead of the bundle's plain orange "S" square. `.logo > i`
 * is the shared logo-mark element rendered by the same component on both
 * the login screen and the authenticated header, so one rule here (this
 * file loads on every screen) covers both places at once. The bundle's
 * own `.logo>i` rule sets a fixed 43x43px box with `font-size:23px` for
 * the letter — hiding the text with `font-size:0` and swapping the
 * gradient for the logo image (via `background`, not `content`, so no
 * markup change is needed) keeps that same box shape and sizing.
 */
.logo > i {
  background: url("/assets/logo/logo-mark-128.png") center / cover no-repeat !important;
  font-size: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

.account button {
  border-radius: var(--radius-sm);
  transition: border-color .15s, background .15s;
}

.account button:hover {
  border-color: var(--accent);
  background: #faf9f8;
}

/* ---------- Workspace / page header ---------- */

.workspace {
  background: var(--bg-page);
  padding: 32px 24px 64px;
}

/* ---------- Cards ---------- */

.card.editor.wide {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/*
 * Spacing bug: the bundle's own .switch-row rule already sets
 * `margin: 22px 0; padding: 22px 0; border-block: 1px solid var(--line)`.
 * The earlier pass only overrode `padding`, leaving the 22px margin
 * active — so margin + border + padding stacked into ~45px of space
 * above AND below every switch row, and on "Slide 1" specifically that
 * combined with a border/padding/margin I'd also added to .slide-number
 * to produce two divider lines with a large dead gap between them. Fixed
 * by taking over margin too (one spacing mechanism, not three stacked
 * ones) and removing the duplicate divider from .slide-number below.
 */
.switch-row {
  margin: 0;
  padding: 16px 4px;
  border-block: 1px solid var(--border);
  transition: opacity .15s;
}

.switch-row span,
.switch-row.compact span {
  font-size: 13px;
}

.switch-row > div > strong,
.switch-row.compact > span:first-child {
  font-weight: 600;
  color: var(--text);
}

.slider-options select {
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  transition: border-color .15s, box-shadow .15s;
}

.slider-options select:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
  outline: none;
}

.slides-head {
  padding-top: 4px;
}

.slides-head > div > b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
}

/* ---------- Slides ---------- */

.slide-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}

.slide-card:hover {
  border-color: #ddd7d1;
  box-shadow: 0 4px 16px -12px rgba(23, 17, 10, .3);
}

/* No border/padding here on purpose — the switch-row directly below
   ("Show this slide") already carries its own top divider line via
   border-block, and .slide-card's grid `gap` gives natural breathing
   room. Adding a second divider here just duplicated it with a dead
   gap in between (the bug reported). */
.slide-number {
  padding-bottom: 2px;
}

.slide-number b {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.slide-number button {
  border-radius: var(--radius-sm);
  transition: border-color .15s, background .15s;
}

.slide-number button:not(:disabled):hover {
  border-color: var(--accent);
  background: #faf9f8;
}

.slide-number button:not(:disabled):active {
  transform: scale(.96);
}

.slide-number .danger:hover {
  border-color: #dba79b;
  background: #fdf3f1;
}

/*
 * This is a real feature, not dead UI — it's a live preview of the image
 * actually uploaded for this slide (alt="Slide preview", sitting directly
 * under the "Desktop image" upload control). The user asked "what's the
 * use of this section, remove it if useless, fix it if useful" after
 * seeing it render as a tiny letterboxed photo inside a large empty
 * cream box.
 *
 * Root cause: the bundle fixes the frame at a wide 240px-tall banner
 * shape (object-fit: contain), which is correct for a landscape hero
 * image but produces huge empty margins whenever the uploaded photo is
 * portrait/tall (as here — a 4284x5712 photo squeezed into an 808x240
 * box). `contain` was actively hiding how the image will really look on
 * the live hero slider, not showing it. Switching to `cover` makes the
 * preview fill its frame edge-to-edge (cropped, same as a real banner
 * slot would render it) — the box always looks intentional, and the
 * preview now matches what visitors will actually see instead of a
 * mismatched-aspect-ratio thumbnail floating in dead space.
 */
.slide-thumb {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  object-fit: cover !important;
}

/*
 * Follow-up to the fix above: the app itself only ever rendered ONE
 * preview image (`src: mobile_image || desktop_image` in the bundle),
 * even though both a desktop and a mobile image can be uploaded. The
 * user asked for the preview to show both side by side, matching the
 * "Desktop image" / "Mobile image" upload boxes above it — that needed
 * an actual markup change (a second <img>, one per field), which was
 * added directly to assets/index-Cwn2gg0T.js as `.slide-thumb-group`
 * containing two `.slide-thumb-item` (label + image) columns. This
 * block is the pure-CSS layout for that new markup.
 */
.slide-thumb-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.slide-thumb-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.slide-thumb-item .slide-thumb {
  width: 100%;
  height: 160px;
}

.slide-thumb-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .02em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .slide-thumb-group {
    grid-template-columns: 1fr;
  }
}

/* Upload dropzones — neutralized from the bundle's original peach/tan
   dashed treatment, which clashed as the one leftover warm spot on an
   otherwise neutral page. */

.upload {
  border-radius: var(--radius-md) !important;
}

.upload label {
  background: #fafaf9 !important;
  color: var(--text-muted) !important;
  border: 1px dashed var(--border) !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 500;
  transition: border-color .15s, background .15s, color .15s;
}

.upload label:hover {
  border-color: var(--accent) !important;
  background: #faf7f5 !important;
  color: var(--accent-dark) !important;
}

/* URL / heading text inputs inside the editor */

.card.editor input,
.card.editor select {
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
}

.card.editor input:focus,
.card.editor select:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
  outline: none;
}

/* ---------- Buttons ---------- */

.primary,
.secondary,
.danger {
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14px;
  transition: background .15s, border-color .15s, transform .1s, box-shadow .15s;
}

.primary {
  background: var(--accent);
  box-shadow: 0 1px 2px rgba(199, 75, 23, .15);
}

.primary:not(:disabled):hover {
  background: var(--accent-dark);
  transform: none;
  box-shadow: 0 2px 6px rgba(199, 75, 23, .25);
}

.primary:not(:disabled):active {
  transform: scale(.98);
}

.primary:disabled {
  opacity: .5;
}

.secondary {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}

.secondary:hover {
  background: #faf9f8;
  border-color: #ddd7d1;
}

.actions {
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

@media (max-width: 640px) {
  header {
    padding: 14px 16px;
  }
  .workspace {
    padding: 20px 14px 56px;
  }
}