/* ============ Forge Studio — shared base ============ */

/* Barcode fonts (OFL) available to every editor */
@font-face {
  font-family: 'Libre Barcode 39';
  src: url('../vendor/fonts/LibreBarcode39-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Libre Barcode 128';
  src: url('../vendor/fonts/LibreBarcode128-Regular.ttf') format('truetype');
}
:root {
  --bg: #131318;
  --bg-deep: #0d0d11;
  --panel: #1c1c23;
  --panel-2: #24242d;
  --panel-3: #2b2b36;
  --border: #32323e;
  --border-lt: #3d3d4b;
  --text: #e2e2ea;
  --muted: #8b8b99;
  --accent: #5b8cff;
  --accent-2: #9b5cff;
  --danger: #ff5b6b;
  --ok: #3ecf8e;
  --radius: 8px;
  --shadow: 0 8px 28px rgba(0,0,0,.45);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #3a3a46; border-radius: 5px; border: 2px solid var(--panel); }
::-webkit-scrollbar-thumb:hover { background: #4a4a58; }

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s;
  user-select: none;
}
.btn:hover { background: var(--panel-3); border-color: var(--border-lt); }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: #fff;
  font-weight: 600;
}
.btn.primary:hover { filter: brightness(1.1); }
.btn.icon { padding: 6px 8px; }
.btn.small { padding: 3px 8px; font-size: 12px; }
.btn:disabled { opacity: .45; cursor: default; pointer-events: none; }

input[type="text"], input[type="number"], select, textarea {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  outline: none;
}
input[type="text"]:focus, input[type="number"]:focus, select:focus, textarea:focus {
  border-color: var(--accent);
}
input[type="number"] { width: 64px; }

input[type="color"] {
  width: 30px; height: 24px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: none;
  padding: 1px;
  cursor: pointer;
}

input[type="range"] {
  -webkit-appearance: none;
  height: 4px;
  background: var(--panel-3);
  border-radius: 2px;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff2;
  cursor: pointer;
}

/* App bar shared by editor pages */
.appbar {
  display: flex; align-items: center; gap: 8px;
  height: 46px;
  padding: 0 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.appbar .logo {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 14px;
  margin-right: 8px;
  text-decoration: none; color: var(--text);
}
.appbar .logo .mark {
  width: 22px; height: 22px; border-radius: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px;
}
.appbar .sep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
.appbar .spacer { flex: 1; }

.field { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.field label { font-size: 12px; }

kbd {
  background: var(--panel-3);
  border: 1px solid var(--border-lt);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 11px;
  font-family: ui-monospace, monospace;
}

/* ---- embed & read-only modes (see js/embed.js) ---- */
body.forge-embed .appbar { display: none; }
body.forge-view .wtoolbar,
body.forge-view .ptoolbar,
body.forge-view .optionsbar,
body.forge-view .toolbar,
body.forge-view .panels,
body.forge-view .bin,
body.forge-view .vprops,
body.forge-view .layers-toolbar { display: none !important; }
body.forge-view .appbar .btn.primary:not(.keep-in-view),
body.forge-view .appbar .btn:not(.keep-in-view) { display: none; }
body.forge-view #formulaInput { pointer-events: none; opacity: .7; }

/* =====================================================================
   Mobile-first responsiveness (shared). Editor-specific layout collapse
   lives in each editor's own CSS @media block. Breakpoint: 720px.
   ===================================================================== */
.drawer-toggle { display: none; }          /* injected by js/mobile.js, shown on mobile */
.mobile-backdrop { display: none; }
.drawer-actions { display: none; }         /* extra shortcuts beside ☰, mobile only */
.float-undo { display: none; }             /* floating undo/redo pill, mobile only */
.radial { display: none; }                 /* half-radial menu, mobile only */
.radial-panel { display: none; }

/* toolbars scroll sideways but must never start a browser page-zoom
   (pinch or double-tap) — that's what blew the whole UI up on iOS */
.appbar { touch-action: pan-x; }

@media (max-width: 720px) {
  html, body { font-size: 14px; }          /* slightly larger base for touch legibility */

  /* app bar: never overflow — scroll horizontally, keep it compact */
  .appbar {
    height: 52px;
    padding: 0 8px;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .appbar::-webkit-scrollbar { display: none; }
  .appbar .logo { font-size: 13px; margin-right: 4px; }
  .appbar .logo .label { display: none; }   /* keep the mark, drop the wordmark */
  .appbar .spacer { flex: 0 0 4px; }
  .appbar .field label { display: none; }

  /* touch-friendly hit targets everywhere */
  .btn { padding: 8px 12px; min-height: 40px; }
  .btn.small { padding: 6px 10px; min-height: 36px; font-size: 13px; }
  .btn.icon { min-width: 40px; }
  select, input[type="text"], input[type="number"] { min-height: 38px; }
  input[type="range"] { height: 22px; }     /* bigger touch strip */

  /* floating panel-toggle button (injected by js/mobile.js) — always reachable */
  .drawer-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    position: fixed; left: 12px; bottom: 12px; z-index: 65;
    width: 50px; height: 50px; border-radius: 50%; padding: 0;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff; border: none; font-size: 20px; box-shadow: var(--shadow);
  }
  body.drawer-open .drawer-toggle { background: var(--panel-3); }

  /* undo/redo pop out beside ☰ while the drawer is open */
  body.drawer-open .drawer-actions {
    display: flex; gap: 10px;
    position: fixed; left: 74px; bottom: 14px; z-index: 66;
    touch-action: manipulation;
  }
  .drawer-actions button {
    width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid var(--border-lt, var(--border));
    background: var(--panel-2);
    color: var(--text);
    font-size: 19px; line-height: 1;
    box-shadow: var(--shadow);
  }
  .drawer-actions button:active { background: var(--panel-3); }
  /* the ⚙ properties shortcut appears only when a form field is selected */
  .drawer-actions .props { display: none; }
  body.fp-avail .drawer-actions .props { display: inline-flex; align-items: center; justify-content: center; }

  /* ---- half-radial menu: bubbles fan out of the ☰ corner ---- */
  body.radial-open .mobile-backdrop {
    opacity: 1; pointer-events: auto;
    background: rgba(8, 8, 16, .68);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }
  body.radial-open .radial { display: block; position: fixed; inset: 0; z-index: 64; pointer-events: none; }
  .r-bubble {
    position: fixed;
    width: 56px; height: 56px;
    border-radius: 50%;
    transform: translate(-50%, 50%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: rgba(36, 36, 50, .82);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-lt, var(--border));
    color: var(--text);
    font-size: 19px; line-height: 1.1;
    box-shadow: var(--shadow);
    pointer-events: auto;
    padding: 0;
    touch-action: manipulation;
  }
  .r-bubble span { font-size: 9px; color: var(--muted); margin-top: 2px; letter-spacing: .2px; }
  .r-bubble:active { background: var(--panel-3); }
  body.forge-view .r-bubble.edit-only { display: none !important; }

  /* category panel: the selected bubble's actions */
  body.radial-open .radial-panel.open {
    display: flex; flex-direction: column; gap: 6px;
    position: fixed; left: 12px; right: 12px; bottom: 316px; z-index: 65;
    max-width: 340px; max-height: calc(100vh - 380px); overflow-y: auto;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,.55);
  }
  .radial-panel .rp-title { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
  .radial-panel .rp-items { display: flex; flex-direction: column; gap: 6px; }
  .radial-panel .rp-items[hidden] { display: none !important; }   /* display:flex must not defeat [hidden] */
  .radial-panel .rp-items.grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .radial-panel .rp-items.grid label,
  .radial-panel .rp-items.grid select,
  .radial-panel .rp-items.grid input { grid-column: 1 / -1; }
  .radial-panel .rp-items.grid button {
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel-2);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    padding: 4px;
  }

  /* floating undo/redo pill — bottom center, only when there's history */
  .float-undo {
    display: flex; gap: 4px;
    position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
    z-index: 58;
    background: rgba(22, 22, 30, .86);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 5px 6px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    visibility: hidden;
  }
  body.can-undo .float-undo, body.can-redo .float-undo { visibility: visible; }
  body.radial-open .float-undo, body.drawer-open .float-undo { visibility: hidden; }
  .float-undo button {
    width: 48px; height: 42px;
    border: none; border-radius: 999px;
    background: transparent;
    color: var(--text);
    font-size: 19px;
    padding: 0;
    touch-action: manipulation;
  }
  .float-undo button:active { background: var(--panel-3); }
  .float-undo .fu-undo { display: none; }
  .float-undo .fu-redo { display: none; }
  body.can-undo .float-undo .fu-undo { display: block; }
  body.can-redo .float-undo .fu-redo { display: block; }

  /* on phones the radial owns every menu — the bars disappear */
  body.has-radial .ptoolbar,
  body.has-radial .wtoolbar,
  body.has-radial .fmt-bar,
  body.has-radial #toolRail,
  body.has-radial .appbar #btnUndo,
  body.has-radial .appbar #btnRedo { display: none; }
  .radial-panel .btn, .radial-panel select { width: 100%; min-height: 42px; }
  .radial-panel .tool {
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel-2);
    color: var(--text);
    font-size: 12px;
    cursor: pointer;
  }
  .radial-panel .tool.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
  .radial-panel label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; padding: 2px; }
  .radial-panel input[type="range"] { flex: 1; touch-action: none; }
  /* preview/view mode hides the same actions the appbar hides */
  body.forge-view .radial-panel .btn:not(.keep-in-view),
  body.forge-view .radial-panel select,
  body.forge-view .radial-panel label,
  body.forge-view .radial-panel .tool { display: none; }

  /* shared slide-in drawer backdrop */
  .mobile-backdrop {
    display: block; position: fixed; inset: 0;
    background: rgba(0,0,0,.55); z-index: 60;
    opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  body.drawer-open .mobile-backdrop { opacity: 1; pointer-events: auto; }

  /* generic horizontal-scroll utility for editor toolbars */
  .m-scroll-x {
    overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .m-scroll-x::-webkit-scrollbar { display: none; }
  .m-scroll-x > * { flex-shrink: 0; }
}