/* =========================================================
   FXV Gridstack – Theme Layer & Rich Text Tokens
   (panel skin variables, typography, inline/blocks, editor/preview, marquee)
   ========================================================= */


/* ========== THEME VARS & CONTAINER — START ========== */
:root {
  /* Accept Bootstrap vars when present; fall back to sane defaults */
  --mtd-grid-gap: 8px;
  --mtd-grid-bg: var(--bs-body-bg, #0b0d10);
  --mtd-grid-item-bg: var(--bs-card-bg, #121418);
  --mtd-grid-item-border: var(--bs-border-color, #22262b);
  --mtd-grid-item-radius: var(--bs-border-radius-lg, .5rem);
  --mtd-grid-handle-bg: rgba(255,255,255,0.04);
  --mtd-grid-placeholder-border: 1px dashed rgba(255,255,255,0.25);
}

.grid-stack { min-height: 200px; background: transparent; }

/* Ensure inner card fills full item height */
.grid-stack-item > .grid-stack-item-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.grid-stack-item > .grid-stack-item-content .card:not(.fxv-panel) {
  background: var(--mtd-grid-item-bg);
  border: 1px solid var(--mtd-grid-item-border);
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Optional grab handle strip for precise dragging */
.grid-stack-item .grid-handle,
.grid-stack-item .grid-drag-handle {
  user-select: none;
  cursor: grab;
  background: var(--mtd-grid-handle-bg);
  padding: .25rem .5rem;
  border-top-left-radius: var(--mtd-grid-item-radius);
  border-top-right-radius: var(--mtd-grid-item-radius);
}

/* Placeholder while dragging */
.grid-stack .grid-stack-placeholder > .placeholder-content {
  border: var(--mtd-grid-placeholder-border);
}

/* Avoid inner scrollbars; let item grow then resizeToContent() if you prefer */
.grid-stack-item .card-body { overflow: auto; flex: 1 1 auto; }

/* Tighter spacing on very small screens */
@media (max-width: 575.98px) { :root { --mtd-grid-gap: 6px; } }

/* Absolute overlays */
.js-gridstack.fxv-allow-overlap { position: relative; overflow: visible; }
.fxv-abs { pointer-events: auto; }

/* Editor chrome utility */
.fxv-editor-area { min-height: 180px; }
/* THEME VARS & CONTAINER — END */


/* ========== PANEL SKIN (VARIABLE-DRIVEN) — START ========== */
/* Panel shell reads local variables if present (default theme) */
.fxv-panel {
  background: var(--fxv-panel-bg, var(--mtd-grid-item-bg));
  color: var(--fxv-panel-fg, var(--bs-body-color));
  border: 1px solid var(--fxv-panel-bd, var(--mtd-grid-item-border));
  backdrop-filter: var(--fxv-panel-backdrop, none);
}

/* When local skin is enabled, ignore theme colors completely */
.fxv-panel.fxv-skin-local {
  background: var(--fxv-panel-bg, transparent) !important;
  color: var(--fxv-panel-fg, inherit) !important;
  border-color: var(--fxv-panel-bd, transparent) !important;
}

/* Ensure body text inherits fg color */
.fxv-panel.fxv-skin-local .fxv-panel-body,
.fxv-panel.fxv-skin-local .fxv-rich,
.fxv-panel.fxv-skin-local .card-body { color: inherit; }

/* let font sizes use container query units (cqw/cqh) */
.fxv-panel { container-type: inline-size; }
/* PANEL SKIN — END */


/* ========== RICH TEXT TOKENS — START ========== */
/* Inline toggles (CSP-safe: class/element based) */
.fxv-inline-b { font-weight: 700; }
.fxv-inline-i { font-style: italic; }
.fxv-inline-u { text-decoration-line: underline; }
.fxv-inline-s { text-decoration-line: line-through; }
/* highlight via <mark> element */
.fxv-rich mark { background: var(--fxv-inline-hl, #ffea70); padding: .05em .12em; border-radius: .15em; }

/* Block types (combine with auto/fixed sizing injected by JS) */
.fxv-block-p      { font-size: inherit; margin: 0 0 .5em; }
.fxv-block-h1     { font-weight: 700; font-size: 1.6em; line-height: 1.1;  margin:.2em 0; }
.fxv-block-h2     { font-weight: 700; font-size: 1.35em; line-height: 1.15; margin:.25em 0; }
.fxv-block-h3     { font-weight: 600; font-size: 1.2em; line-height: 1.2;  margin:.3em 0; }
.fxv-block-quote  { font-style: italic; border-left: 3px solid rgba(255,255,255,.25); padding-left:.6em; margin:.4em 0; }
.fxv-block-small  { font-size: .9em; opacity:.9; }

/* Alignment */
.fxv-align-left   { text-align: left !important; }
.fxv-align-center { text-align: center !important; }
.fxv-align-right  { text-align: right !important; }



/* Color utilities mapped to Bootstrap vars */
.fxv-c-body   { color: var(--bs-body-color, #d3d7de) !important; }
.fxv-c-muted  { color: var(--bs-secondary-color, #94a3b8) !important; }
.fxv-c-primary{ color: var(--bs-primary, #0d6efd) !important; }
.fxv-c-success{ color: var(--bs-success, #198754) !important; }
.fxv-c-warning{ color: var(--bs-warning, #ffc107) !important; }
.fxv-c-danger { color: var(--bs-danger, #dc3545) !important; }
/* RICH TEXT TOKENS — END */


/* ========== EDITOR & PREVIEW — START ========== */
/* Compact selects in toolbar */
.fxv-editor-select { width: auto; }

/* Editor surface minimum height; remains editable even when “empty” + marquee on */
.fxv-editor-surface { min-height: 180px; resize: vertical; overflow-y: auto; }
@media (max-width: 576px) { .fxv-editor-surface { min-height: 120px; } }

#fxv-editor.fxv-rich { min-height: 120px; }
#fxv-editor.fxv-rich:empty::before {
  content: 'Type here…';
  opacity: .6;
  pointer-events: none;
}

/* Modal preview box */
/* Modal preview box (auto size, clipped) */
.fxv-preview-box {
   /* allow it to grow; keep a floor so it’s usable when empty */
   min-height: 160px;            /* match your inline value, or 110–160px */
   height: auto;                 /* critical: remove fixed height */
   /* keep it bounded inside the modal body */
   max-height: calc(100dvh - 24rem);  /* guard so it won’t exceed viewport inside scrollable modal */
   overflow: hidden;             /* clip marquee track */
   border-radius: .5rem;
}

/* belt-and-braces: ensure the preview body itself never spills */
#fxv-editor-panel .fxv-panel-body { overflow: hidden; }

/* Pickr fallback UI */
.fxv-color-fallback input[type="color"] {
  display:block; width:100%; height:2.25rem; padding:0;
  border:1px solid var(--bs-border-color); border-radius:.375rem;
}
.fxv-color-fallback .fxv-alpha-range { margin-top:.25rem; }
.fxv-color-fallback .fxv-alpha-label { margin-top:.25rem; }
/* EDITOR & PREVIEW — END */


/* ========== MARQUEE (SINGLE SOURCE OF TRUTH) — START ========== */
/* Container: clip; child line always spans at least panel width and scrolls across once */
.fxv-marquee { position: relative; overflow: hidden; }
.fxv-marquee > * {
  display: inline-block;
  white-space: nowrap;
  min-width: 100%;
  animation: fxv-marquee-x linear var(--fxv-marquee-secs, 12s) infinite;
  will-change: transform;
}

/* One animation only; avoid duplicates that cause double text */
@keyframes fxv-marquee-x {
  from { transform: translateX(100%); }
  to   { transform: translateX(-100%); }
}


/* MARQUEE — END */


/* === FXV inline extras — font, color, nowrap ======================= */
/* Font families (mutually exclusive) */
.fxv-inline-f-sans  { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; }
.fxv-inline-f-serif { font-family: Georgia, "Times New Roman", Times, serif; }
.fxv-inline-f-mono  { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* Text colors (extend as needed) */
.fxv-inline-c-inherit { color: inherit; }
.fxv-inline-c-muted   { color: var(--bs-secondary-color, #94a3b8); }
.fxv-inline-c-primary { color: var(--bs-primary, #0d6efd); }
.fxv-inline-c-success { color: var(--bs-success, #198754); }
.fxv-inline-c-warning { color: var(--bs-warning, #ffc107); }
.fxv-inline-c-danger  { color: var(--bs-danger, #dc3545); }

/* Keep selected words on a single visual line (non-marquee use) */
.fxv-inline-nowrap { display: inline-block; white-space: nowrap; }



.fxv-panel .fxv-panel-body { container-type: inline-size; }
.fxv-text-auto { font-size: clamp(var(--fxv-text-min,.85rem),
                                  calc(var(--fxv-k,0.08) * 1cqw),
                                  var(--fxv-text-max,3rem)); }


/* already injected once; just tweak 'half' for a true 50% */
.fxv-vo-frame[data-size="half"] { width:50vw; height:50dvh; }
.fxv-vo-frame[data-size="fit"]  { width:min(96vw,1200px); height:min(86dvh, 68vw); }
.fxv-vo-frame[data-size="full"] { width:100vw; height:100dvh; }


/* Dashed outlines in admin edit mode to make dividers & guards visible while editing */
.js-gridstack[data-grid-edit="1"] .fxv-panel[data-panel-type="divider"] .fxv-panel-body {
  outline: 1px dashed rgba(255,255,255,.25);
  outline-offset: -3px;
}
.js-gridstack[data-grid-edit="1"] .fxv-panel[data-panel-type^="page-guard"] .fxv-panel-body {
  outline: 1px dashed rgba(255,255,255,.35);
  outline-offset: -3px;
}