/* ==========================================================
   NEXIGRID — THEME STUDIO · override layer
   ----------------------------------------------------------
   The Studio now dogfoods NG for its chrome (ng-header, ng-layout,
   ng-sidebar, ng-tabs, ng-accordion, ng-btn…). This sheet only
   adds: the app-shell sizing, a dark pro skin for the bars, and
   the few controls NG doesn't provide (color swatch rows).
   Overrides apply to the CHROME only; the user's theme overrides
   live in the preview iframe.
   ========================================================== */

:root {
	/* the chrome follows the native NG theme (data-theme) — these alias the
	   public theming tokens, so a light/dark flip carries the whole tool. */
	--st-ink:        var(--ng-text);
	--st-ink-dim:    var(--ng-text-muted);
	--st-ink-mute:   var(--ng-text-muted);
	--st-panel:      var(--ng-surface);
	--st-panel-2:    var(--ng-surface-sunken);
	--st-line:       var(--ng-color-border);
	--st-line-2:     var(--ng-color-border-middle);
	--st-accent:     var(--ng-info-bg, #4a9eff);
	--st-bar-h:      63px;   /* = sidebar tab-strip height, so toolbar aligns */
}

* { box-sizing: border-box; }
html, body { height: 100%; }

/* ---------- App shell (header on top, layout fills) ---------- */
body {
	margin: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--ng-body-background);
	font-family: var(--ng-font-base, "Inter", system-ui, sans-serif);
}
.st-topbar { flex: none; }
.st-layout {
	flex: 1;
	min-height: 0;
	display: flex;
}

/* ---------- Topbar (ng-header, dark skin) ---------- */
.st-topbar.ng-header {
	color: var(--st-ink);
	min-height: 52px;
}
.st-brand { display: inline-flex; align-items: center; gap: .55rem; font-size: 14px; color: var(--st-ink); }
.st-brand-mark {
	display: grid; place-items: center;
	width: 26px; height: 26px; border-radius: 6px;
	background: linear-gradient(135deg, #4a2a86, #b23a8a);
	color: #fff; font-size: 11px; font-weight: 700;
}
.st-topbar .ng-header-right { display: flex; align-items: center; gap: .45rem; }

/* ---------- Sidebar (ng-sidebar) — controls ---------- */
/* All colors come from the native theme (data-theme="dark" flips --ng-surface
   et al.) — sidebar / tabs / accordion already consume those tokens. */
/* the framework sidebar is 100dvh; here it sits below the 52px topbar,
   so let it fill .st-layout instead (otherwise the bottom is clipped) */
.st-sidebar.ng-sidebar { width: 330px; flex: none; height: auto; }
.st-sidebar .ng-sidebar-body { padding: 0; }
/* hide accordion item borders in the sidebar; align its inner content
   with the Globals sections (.st-globals pads .6rem) via the scoped knobs */
.st-sidebar .ng-accordion {
	--ng-acc-border: transparent;
	--ng-acc-gap: .15rem;                 /* tight rhythm between color groups */
	--ng-acc-trigger-padding-x: .6rem;
	--ng-acc-content-padding-x: .6rem;
}
/* tabs nav: inset from the sidebar edges (don't touch the borders) */
.st-sidebar .ng-tabs-nav { padding-inline: .7rem; }

/* tabs inside sidebar */
.st-sidebar .ng-tabs-nav { position: sticky; top: 0; z-index: 3; background: var(--ng-sidebar-bg); }
.st-sidebar .ng-tabs-content { padding: 0; }

/* accordion group count */
.st-acc-count {
	font-size: 10px; opacity: .6; font-weight: 500;
}
.st-acc-inner { padding: .35rem .5rem .55rem; }

.st-empty-tab {
	padding: 2.5rem 1rem; text-align: center;
	color: var(--st-ink-mute); font-size: 12px; font-style: italic;
}

/* ---------- Color box (the one thing NG doesn't have) ----------
   Two halves: a top info bar on the panel + a section painted with the
   actual bg color, where text/border preview over it (more realistic). */
.st-color {
	background: rgba(255,255,255,.02);
	border: 1px solid color-mix(in srgb, var(--st-line-2), #000 50%);
	border-radius: 6px;
	overflow: hidden;            /* clip the fill's bottom corners */
	margin-bottom: .8rem;
	cursor: pointer;
}
.st-color:last-child { margin-bottom: 0; }
.st-color.is-selected { border-color: var(--st-accent); }
.st-color.is-changed .st-val-title { color: var(--st-accent); font-weight: 600; }

/* top: reset + name/token + editable hex */
.st-color-top {
	display: flex; align-items: center; gap: .6rem;
	padding: .5rem .55rem;
	background: #14161D;
}

/* native color input as a swatch (still used by mini knobs) */
.st-swatch-input {
	width: 24px; height: 24px; flex: none; padding: 0;
	border: 1px solid var(--st-line-2); border-radius: 6px;
	background: transparent; cursor: pointer;
	-webkit-appearance: none; appearance: none;
}
.st-swatch-input::-webkit-color-swatch-wrapper { padding: 0; }
.st-swatch-input::-webkit-color-swatch { border: none; border-radius: 5px; }
.st-swatch-input::-moz-color-swatch { border: none; border-radius: 5px; }
.st-swatch-sm { width: 18px; height: 18px; }

/* hidden bg input — opened programmatically by clicking the fill */
.st-swatch-hidden {
	position: absolute; width: 0; height: 0; padding: 0; border: 0;
	opacity: 0; pointer-events: none;
}

/* editable hex — invisible chrome */
.st-row-value {
	margin-left: auto; width: 74px; padding: 0;
	border: 0; background: transparent; text-align: right;
	color: var(--st-ink-mute); font-size: 11px;
	font-family: ui-monospace, Menlo, Consolas, monospace; cursor: text;
}
.st-row-value:focus { outline: none; color: var(--st-ink); }

/* bottom: painted with the bg color, text/border preview over it */
.st-color-fill {
	--st-fill-ink: #fff;
	position: relative;
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem; padding: .7rem 1rem;
}
.st-color-fill .st-mini { cursor: pointer; }
.st-color-fill .st-mini-label { color: var(--st-fill-ink); opacity: .95; }
.st-color-fill .st-val-reset:not(.is-on) { color: var(--st-fill-ink); opacity: .7; }
/* text/border dots: plain spans (no native color-input chrome → no ring),
   so only the raw color-on-bg contrast shows. */
.st-dot {
	width: 22px; height: 22px; flex: none;
	border-radius: 50%; cursor: pointer;
}

.st-mini { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; }
.st-mini-label { font-size: 11px; color: var(--st-ink-dim); }

/* ---------- Components (Pro) panel ---------- */
.st-globals.st-comp { border-top: 0; padding-top: .6rem; }
.st-comp .st-globals-head { color: var(--st-ink); }
.st-crange { display: flex; flex-direction: column; gap: .35rem; padding: .45rem 0; }
.st-crange .st-field-label { display: flex; align-items: center; gap: .4rem; }
.st-crange .st-field-hint { margin-left: auto; }
.st-crange-out { margin-left: .5rem; font: 11px ui-monospace, Menlo, Consolas, monospace; color: var(--st-ink); }
.st-crange-input { width: 100%; }
.st-alpha-ctl { display: flex; align-items: center; gap: .5rem; width: 100%; }
.st-alpha-ctl .st-crange-input { flex: 1; width: auto; }
.st-alpha-ctl .st-crange-out { margin-left: 0; min-width: 2.2em; text-align: right; }

/* ---------- Globals ---------- */
/* roomy section blocks: air on both sides of each divider */
.st-globals { border-top: 1px solid var(--st-line); padding: 1.1rem .6rem 2.2rem; }
#st-colors-body { margin-bottom: 1.1rem; }
.st-globals-head {
	font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
	color: var(--st-ink-dim); padding: .3rem 0 .5rem;
}
.st-scheme-tag {
	margin-left: .45rem;
	padding: .05rem .4rem; border-radius: 999px;
	background: var(--st-panel-2); color: var(--st-ink-dim);
	font-size: 9px; font-weight: 700; letter-spacing: .04em;
}
.st-field { display: flex; flex-direction: column; gap: .3rem; padding: .45rem 0; }
.st-field-label { display: flex; align-items: baseline; gap: .5rem; font-size: 12px; color: var(--st-ink-dim); }
.st-field-hint { margin-left: auto; font: 10px ui-monospace, Menlo, Consolas, monospace; color: var(--st-ink-mute); }
.st-field-control { font-size: 12px; color: var(--st-ink-mute); }

/* toggle knob: reset + checkbox + label + token name on ONE row; extra space below
   (no slider) so it matches the vertical rhythm of the slider/color rows */
.st-toggle { display: flex; align-items: center; gap: .5rem; padding: .45rem 0 1.2rem; font-size: 12px; color: var(--st-ink-dim); }
.st-toggle-input { margin: 0; flex: 0 0 auto; }
.st-toggle-label { min-width: 0; }
.st-toggle .st-field-hint { margin-left: auto; }

/* Components tab ONLY: looser vertical rhythm so each knob block is clearly
   separated (the dense slider stack read as one monolith). Scoped to .st-comp. */
.st-comp .st-crange,
.st-comp .st-field { padding-top: .55rem; padding-bottom: 1.2rem; }
.st-comp .st-toggle { padding-top: .55rem; }

.st-select {
	width: 100%; height: 30px; padding: 0 .45rem;
	border: 1px solid var(--st-line-2); border-radius: 6px;
	background: var(--st-panel-2); color: var(--st-ink);
	font: inherit; font-size: 12px; cursor: pointer;
}
/* sliders are now native ng-range; give them a little breathing room */
.st-globals .ng-range { margin: .6rem 0; }
.st-globals .ng-range .ng-label { font-size: 12px; color: var(--st-ink-dim); }
/* gap between the token-name hint and the value output in range labels */
.st-globals .ng-range .ng-range-output { margin-left: .5rem; }

/* a tab panel that opens directly on a section has no divider above its
   first section (the line over TYPOGRAPHY / SHADOWS) */
.ng-tab-panel > .st-globals:first-child { border-top: 0; padding-top: .4rem; }

/* ---------- Content: toolbar + preview + export bar ---------- */
.st-content.ng-content {
	display: flex; flex-direction: column;
	min-width: 0; min-height: 0;
	background: #0e1116;
	padding: 0;
}

/* toolbar */
.st-toolbar {
	flex: none; height: var(--st-bar-h);
	display: flex; align-items: center; gap: .6rem;
	padding: 0 .85rem;
	background: var(--st-panel); border-bottom: 1px solid var(--st-line);
}
.st-toolbar-fixed, .st-toolbar-context { display: flex; align-items: center; gap: .4rem; }
.st-toolbar-context { flex: 1; min-width: 0; }
/* fixed height so dividers look identical regardless of their flex parent */
.st-toolbar-divider { width: 1px; height: 20px; align-self: center; flex: none; background: var(--st-line); }
.st-toolbar-tag { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--st-ink-mute); }
.st-tool {
	height: 26px; padding: 0 .55rem; border: 1px solid var(--st-line-2);
	border-radius: 6px; background: var(--st-panel-2); color: var(--st-ink-dim);
	font: inherit; font-size: 12px; cursor: pointer;
}
.st-tool:disabled { opacity: .45; cursor: default; }
.st-toolbar-hint { font-size: 11px; color: var(--st-ink-mute); font-style: italic; }

/* scheme segmented control */
.st-seg { display: inline-flex; border: 1px solid var(--st-line-2); border-radius: 6px; overflow: hidden; }
.st-seg-btn {
	display: inline-flex; align-items: center;
	height: 26px; padding: 0 .6rem; border: 0; background: transparent;
	color: var(--st-ink-dim); font: inherit; font-size: 12px; cursor: pointer;
	transition: background .15s, color .15s;
}
.st-seg-btn + .st-seg-btn { border-left: 1px solid var(--st-line-2); }
.st-seg-btn:hover { color: var(--st-ink); }
.st-seg-btn.is-active { background: var(--st-panel-2); color: var(--st-ink); }
.st-seg-btn i { font-size: 14px; }

/* preview */
.st-preview {
	flex: 1; min-height: 0;
	background:
		linear-gradient(45deg, #11151b 25%, transparent 25%) 0 0/22px 22px,
		linear-gradient(-45deg, #11151b 25%, transparent 25%) 0 11px/22px 22px,
		#0e1116;
}
.st-frame { width: 100%; height: 100%; border: 0; background: #fff; display: block; }

/* export bar — taller than the top toolbar so the buttons breathe */
.st-exportbar {
	flex: none; height: 56px;
	display: flex; align-items: center; gap: 1rem;
	padding: 0 .85rem;
	background: var(--st-panel); border-top: 1px solid var(--st-line);
}
.st-export-status { color: var(--st-ink-mute); font-size: 12px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.st-export-actions { margin-left: auto; display: flex; gap: .4rem; }

/* ---------- Export modal content (chrome = ng-modal) ---------- */
.st-modal-meta { color: var(--st-ink-mute); font-size: 12px; }
.st-modal-code {
	width: 100%; min-height: 300px; resize: none; border: 0; padding: .9rem;
	border-radius: 8px;
	background: #0e1116; color: #cdd9e5;
	font: 12px/1.55 ui-monospace, Menlo, Consolas, monospace;
}
.st-modal-code:focus { outline: none; }

/* ---------- alpha control (swatch + ng-range opacity) ---------- */
.st-alpha { display: flex; align-items: center; gap: .6rem; }
.st-alpha .ng-range { flex: 1; margin: 0; }
.st-alpha .ng-range .ng-label { font-size: 11px; color: var(--st-ink-mute); }

/* ---------- scheme chips (custom schemes + add) ---------- */
.st-seg-x { margin-left: .45rem; opacity: .55; font-size: 12px; }
.st-seg-btn:hover .st-seg-x { opacity: 1; }
#st-scheme-add { padding-inline: .55rem; }

/* ---------- new-scheme modal form ---------- */
.st-scheme-form { display: flex; flex-direction: column; gap: .9rem; }
.st-form-err { color: var(--ng-danger); font-size: 12px; }

/* ---------- section reset (sidebar heads) ---------- */
.st-globals-head { display: flex; align-items: center; gap: .35rem; }
.st-head-reset { margin-left: auto; cursor: pointer; opacity: .8; font-size: 13px; color: var(--st-ink-dim); }
.st-head-reset:hover { opacity: 1; }
.st-colors-head { padding: .6rem .6rem .2rem; }

/* ---------- per-value rows: [reset][swatch][title/token] ---------- */
.st-vrow { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.st-val-label { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.st-val-title { font-size: 12.5px; color: var(--st-ink); }
.st-val-token { margin-top: .2rem; font: 9.5px ui-monospace, Menlo, Consolas, monospace; color: var(--st-ink-mute); }
/* idle: light grey, clearly visible · changed: warning orange */
.st-val-reset { flex: none; cursor: default; opacity: 1; font-size: 13px; color: var(--st-ink-dim); transition: color .15s; }
.st-val-reset.is-on { cursor: pointer; opacity: 1; color: var(--ng-warning-bg, #ffb020); }
.st-val-reset.is-on:hover { color: var(--ng-yellow-bg, #ffd43b); }
.st-alpha-range { margin: .35rem 0 0 1.45rem; }

/* color block rows host the same pattern */
.st-row .st-val-label { flex: none; }
.st-mini .st-val-reset { font-size: 11px; }

/* scheme tag: make the per-scheme sections unambiguous */
.st-scheme-tag {
	border: 1px solid var(--st-accent);
	color: var(--st-accent);
	background: transparent;
	text-transform: uppercase;
	font-size: 9.5px;
}

/* note under per-scheme heads */
.st-head-note {
	font-size: 10.5px; font-weight: 400; letter-spacing: 0; text-transform: none;
	color: var(--st-ink-mute); padding: 0 0 .4rem; margin-top: -.3rem;
}
.st-colors-note { padding: 0 .6rem .4rem; }

/* slider reset sits at the start of the ng-label */
.st-globals .ng-label .st-val-reset { margin-right: .35rem; }

/* per-group reset inside the accordion trigger */
.st-acc-reset { margin-right: .45rem; opacity: .8; color: var(--st-ink-dim); font-size: 13px; cursor: pointer; }
.st-acc-reset:hover { color: var(--ng-purple-bg, #a855f7); }

/* icon-only sidebar tabs */
.st-tabs .ng-tabs-nav .ng-tab i { font-size: 17px; line-height: 1; }

/* colors count moved to the export bar */
.st-export-info { margin-left: .8rem; font-size: 11px; color: var(--st-ink-mute); }

/* ---------- custom colors: add button + delete ---------- */
.st-add-color {
	width: 100%; padding: .5rem;
	border: 1px dashed var(--st-line-2); border-radius: 6px;
	background: transparent; color: var(--st-ink-dim);
	font: inherit; font-size: 12px; cursor: pointer;
}
.st-add-color:hover { color: var(--st-ink); border-color: var(--st-ink-dim); }
.st-color-del { flex: none; margin-left: .3rem; cursor: pointer; opacity: .55; font-size: 13px; color: var(--st-ink-dim); }
.st-color-del:hover { opacity: 1; color: var(--ng-danger-bg, #f2415c); }

/* ---------- color picker drawer (ng-overlay.left host) ---------- */
.st-picker-drawer { --ng-overlay-width: 300px; }
.st-picker-drawer .ng-overlay-header { padding: .8rem 1rem; }
.st-picker-drawer .ng-overlay-header h3 { margin: 0; font-size: .95rem; }
.st-picker-drawer .ng-overlay-body { padding: 1rem; }
.st-picker-drawer .ng-colorpicker { width: 100%; }
/* il drawer ha già header con titolo e close: il mini-header del pannello
   (Colors + maniglia drag) qui è ridondante */
.st-picker-drawer .ng-cp-head { display: none; }

/* ---------- export modal: highlighted code (left) + palette tiles (right) ---------- */
/* panel = 66vw × ~75vh (width set inline on the panel: ng-modal clamps at
   --ng-modal-max-width 640px by default — both vars must be raised) */
.st-exp-body {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	height: calc(75vh - 132px);   /* 75vh panel minus header+footer */
	min-height: 380px;
	padding: 1.25rem 1.5rem 1.5rem;
}
.st-exp-intro {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--st-ink-dim);
}
.st-exp-intro code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--st-ink); }
.st-exp-cols {
	display: flex;
	gap: 1.5rem;
	flex: 1;
	min-height: 0;
}
.st-exp-cols .st-modal-code {
	flex: 1;
	min-width: 0;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 1.4rem 1.6rem;
	overflow: auto;
	white-space: pre;
	tab-size: 2;
	background: #0e1116;
	border: 0;
	border-radius: 8px;
	font: 13px/1.7 ui-monospace, Menlo, Consolas, monospace;
	color: #c9d1d9;
}
.tok-sel  { color: #c792ea; }
.tok-prop { color: #82aaff; }
.tok-val  { color: #c3e88d; }

.st-exp-side {
	flex: none;
	width: 320px;
	display: flex;
	flex-direction: column;
	min-height: 0;
}
.st-exp-side-head {
	font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
	color: var(--st-ink-dim);
	padding: .2rem 0 .8rem;
}
.st-exp-list { flex: 1; overflow-y: auto; min-height: 0; padding-right: .4rem; }
.st-exp-group {
	font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
	color: var(--st-ink-mute);
	padding: 1rem 0 .55rem;
}
.st-exp-group:first-child { padding-top: 0; }

/* palette tile (Material-style): filled, name top, lock/check + hex bottom */
.st-exp-tile {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 78px;
	padding: .85rem 1rem;
	border-radius: 8px;
	margin-bottom: .7rem;
}
.st-exp-tile-name { font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.st-exp-tile-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.st-exp-tile-hex { font: 11.5px ui-monospace, Menlo, Consolas, monospace; opacity: .9; }
.st-exp-tile .st-exp-lock { font-size: 14px; opacity: .85; }
.st-exp-tile.is-off { opacity: .4; }
.st-exp-tile.is-off .st-exp-tile-name { text-decoration: line-through; }
.st-exp-check { --ng-check-color: currentColor; }
.st-exp-check .ng-check-box { width: 16px; height: 16px; border: 1.5px solid currentColor; }
.st-exp-empty { font-size: 11.5px; color: var(--st-ink-mute); padding-top: .5rem; }

/* ---------- welcome / onboarding modal ---------- */
.st-welcome-body { padding: 1.4rem 1.6rem; }
/* #id beats NG's `.ng-modal .ng-modal-body > * { margin:0 }` (0,2,0) reset */
#st-welcome-modal .st-welcome-lead { margin: 0 0 2rem; font-size: 14px; line-height: 1.6; color: var(--st-ink); }
.st-welcome-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.st-welcome-steps li { display: flex; gap: .8rem; align-items: flex-start; font-size: 13px; line-height: 1.55; color: var(--st-ink-dim); }
.st-welcome-steps strong { color: var(--st-ink); font-weight: 600; }
.st-welcome-num {
	flex: none; width: 24px; height: 24px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--ng-primary-bg, #4a2a86); color: var(--ng-primary-text, #fff);
	font-size: 12px; font-weight: 700;
}
.st-welcome-modal h3 i { color: var(--ng-warning-bg, #dd7900); }

/* ---------- preview viewport framing (tablet/phone width sim) ---------- */
.st-preview { display: flex; }
.st-frame { width: 100%; }
body.st-vw-framed .st-preview { justify-content: center; padding: 1rem; background: var(--st-panel-2); }
body.st-vw-framed .st-frame {
	width: 100%;
	border: 1px solid var(--st-line);
	border-radius: 10px;
	box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
/* toolbar context segmented spacing */
.st-toolbar-context .st-seg-btn i { font-size: 14px; }

/* ---------- shadows editor (Effects tab) ---------- */
.st-shadow-trig { display: inline-flex; align-items: center; gap: .4rem; }
.st-shadow-lab { font-weight: 600; font-size: 12px; }
.st-shadow-prev {
	margin-left: auto; margin-right: .6rem;
	width: 34px; height: 22px; flex: none;
	border-radius: 5px;
	background: var(--st-panel);
	border: 1px solid var(--st-line-2);
}
.st-shadow-edit .ng-range { margin: .45rem 0; }
.st-shadow-edit .ng-label { font-size: 11.5px; color: var(--st-ink-dim); }
.st-shadow-edit .ng-range-output { margin-left: .5rem; }
.st-shadow-color { display: flex; align-items: center; gap: .5rem; margin: .6rem 0 .2rem; }