/* Get code screen (/app/dashboard/stitches/{stitch}), loaded only by stitches/show.blade.php.

   Ported from the dev kit in storage/app/get-code/prototype (tokens.css + styles.css). Kept out of
   user-dash.less on purpose: that file is compiled by hand, and plain CSS here needs no build step.
   Everything is scoped to .gc-app, so none of it leaks into the rest of the dashboard.

   Tokens come from the CodeStitch Design System. Where the dashboard already has a value under
   another name, the comment says which. */

.gc-app {
  /* Surfaces */
  --surface-page: #F7F7F7;
  --surface-card: #fff;
  --surface-sunken: #F3F3F4;

  /* Text */
  --bodyText: #14142B;
  --text-body: #4e4b66;
  --text-muted: #6E7191; /* same as --neutral-label */
  --text-grey: #616161; /* already in core-styles-cgp.css */

  /* Brand and accents */
  --primary-app: #0C293E; /* same as --primary-default */
  --darkPrimary: #262338; /* same as --neutral-ash */
  --blue-med: #3A96D9; /* already in core-styles-cgp.css */
  --blue-light: rgba(199,225,244,.5); /* already in core-styles-cgp.css */
  --gradient-orange: linear-gradient(90deg,#ffba43 -24.69%,#e12213 126.23%);

  /* Lines and fills */
  --border-default: #E8E9EC; /* same as --neutral-line-border */
  --border-hairline: 1px solid #E8E9EC;
  --border-soft: 1px solid rgba(0,0,0,.1);
  --grey-med: #E1E1E1; /* already in core-styles-cgp.css */
  --neutral-line-bg: #F3F3F4; /* already in core-styles-cgp.css */
  --radius: 99px; /* already in core-styles-cgp.css */

  /* Warning */
  --warningLight: #fef4df;

  /* Shadows */
  --shadow-nav: rgba(149,157,165,.2) 0px 8px 24px;
  --shadow-image: 0px 4px 25px 0px rgba(0,0,0,.05);
  --shadow-hover: rgba(149,157,165,.2) 0px 8px 50px;

  /* Type */
  --baseFont: 'Work Sans',Arial,sans-serif; /* already in core-styles-cgp.css */
  --secondFont: 'Ubuntu',Arial,sans-serif; /* already in core-styles-cgp.css */

  /* New for Get code */
  --warning-text: #8A6A1F;          /* warning copy: 4.6:1 on --warningLight, 5:1 on white */
  --warning-text-on-dark: #FFBA43;  /* empty-href note on the dark tab bar */
  --code-bg: #14142B;               /* code body (the design system's --dark) */
  --code-bar: #262338;              /* code tab bar (--darkPrimary) */
  --code-gutter: #5C6089;           /* line numbers */
  --code-tab-muted: #A9AEC4;        /* inactive tab text */
}

/* Everything is scoped to .gc-app, so none of this leaks into the rest of the dashboard.
   :where() keeps these base rules at element-level specificity, so component classes still win. */
:where(.gc-app), :where(.gc-app) *, :where(.gc-app) *::before, :where(.gc-app) *::after { box-sizing: border-box; }
.gc-app { background: var(--surface-page); color: var(--bodyText); font-family: var(--baseFont); }
:where(.gc-app) button, :where(.gc-app) input { font: inherit; }
:where(.gc-app) a { color: var(--bodyText); }
:where(.gc-app) a:hover { color: var(--primary-app); }
:where(.gc-app) :focus-visible { outline: 2px solid var(--blue-med); outline-offset: 2px; }
.gc-app [hidden] { display: none !important; }

.gc-spacer { flex: 1; }
.gc-muted { color: var(--text-muted); }
.gc-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text-body); }

/* ---------- Page frame ---------- */

.gc-app { position: relative; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

.gc-header {
  flex: none; height: 64px; display: flex; align-items: center; gap: 20px; padding: 0 24px;
  background: var(--surface-card); box-shadow: var(--shadow-nav); position: relative; z-index: 2;
}
.gc-header__logo { flex: none; display: block; }
.gc-header__logo img { display: block; width: 150px; height: auto; }
.gc-crumbs {
  display: flex; align-items: center; gap: 8px; min-width: 0; height: 28px; padding-left: 20px;
  border-left: 1px solid var(--border-default); font-size: 14px; color: var(--text-muted); white-space: nowrap;
}
.gc-crumbs a { color: var(--text-muted); text-decoration: none; }
.gc-crumbs a:hover { color: var(--primary-app); text-decoration: underline; }
.gc-crumbs [aria-current] { color: var(--bodyText); font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.gc-user { flex: none; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-body); text-decoration: none; white-space: nowrap; }
.gc-user img { display: block; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }

.gc-body { flex: 1; min-height: 0; display: flex; }

/* ---------- Left: title + preview ---------- */

.gc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding: 20px 24px; }

.gc-titlebar { flex: none; display: flex; align-items: flex-start; gap: 16px; }
.gc-titlebar__text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.gc-titlebar h1 { margin: 0; font-family: var(--secondFont); font-size: 26px; line-height: 1.2; font-weight: 700; color: var(--bodyText); }
.gc-titlebar__text .gc-muted { font-size: 14px; }
.gc-titlebar__actions { flex: none; display: flex; align-items: center; gap: 8px; padding-top: 2px; font-size: 22px; }

/* DS IconButton (.border-button in the app) */
.gc-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 1.6em; height: 1.5em; padding: 0;
  font-size: 22px; border: var(--border-soft); border-radius: .3em; background: transparent; color: var(--darkPrimary);
  cursor: pointer; transition: background-color .3s, color .3s;
}
.gc-icon-btn img { width: .8em; height: .8em; transition: filter .3s; }
.gc-icon-btn:hover, .gc-icon-btn:focus-visible { background: var(--primary-app); color: #fff; }
.gc-icon-btn:hover img, .gc-icon-btn:focus-visible img { filter: grayscale(1) brightness(1000%); }

.gc-preview {
  flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface-card); border: 1px solid var(--border-default); border-radius: 12px;
}
.gc-preview__bar { flex: none; height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 12px; border-bottom: 1px solid var(--border-default); }
.gc-divider { width: 1px; height: 28px; background: var(--border-default); }
.gc-preview__stage { position: relative; flex: 1; min-height: 0; display: flex; justify-content: center; padding: 12px; background: var(--surface-sunken); overflow: hidden; }
.gc-preview__viewport { position: relative; flex: none; overflow: hidden; border-radius: 8px; background: #fff; box-shadow: var(--shadow-image); }
.gc-preview__viewport iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; background: #fff; }

/* DS Toggle (the pricing switch) */
.gc-toggle { display: flex; align-items: center; font-size: 15px; color: var(--bodyText); }
.gc-toggle__label { padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.gc-toggle__label[aria-pressed="true"] { font-weight: 700; }
.gc-toggle__track {
  position: relative; display: block; width: 3.875em; height: 2.25em; margin: 0 .75em; padding: 0; border: 0;
  border-radius: 2.5em; background-color: #3F88F5; cursor: pointer; font-size: 15px;
}
.gc-toggle__track[aria-checked="true"] { background-image: var(--gradient-orange); }
.gc-toggle__thumb {
  position: absolute; top: 50%; left: .375em; width: 1.5em; height: 1.5em; border-radius: 50%; background: #fff;
  transform: translateY(-50%); transition: left .3s;
}
.gc-toggle__track[aria-checked="true"] .gc-toggle__thumb { left: 2em; }

/* ---------- Segmented control ---------- */

.gc-seg { display: flex; gap: 2px; padding: 3px; border-radius: 8px; background: var(--surface-sunken); }
.gc-seg button {
  flex: none; min-width: 0; height: 32px; padding: 0 10px; border: 0; border-radius: 6px; cursor: pointer;
  font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: transparent; color: var(--text-body);
}
.gc-seg--fill button { flex: 1 1 0; height: 36px; }
.gc-seg button[aria-pressed="true"] {
  font-weight: 700; background: var(--surface-card); color: var(--bodyText);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px var(--border-default);
}
.gc-seg button:not([aria-pressed="true"]):not(:disabled):hover { color: var(--bodyText); background: rgba(255, 255, 255, .6); }
.gc-seg button:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Right: inspector ---------- */

.gc-inspector {
  width: clamp(400px, 32vw, 540px); flex: none; display: flex; flex-direction: column;
  background: var(--surface-card); border-left: 1px solid var(--border-default);
}
.gc-inspector__head { flex: none; height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 16px 0 20px; border-bottom: 1px solid var(--border-default); }
.gc-inspector__head h2 { margin: 0; font-family: var(--secondFont); font-size: 18px; font-weight: 700; color: var(--bodyText); white-space: nowrap; }
.gc-saved { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; }
.gc-saved img { flex: none; width: 14px; height: 14px; }
.gc-saved span { overflow: hidden; text-overflow: ellipsis; }
.gc-saved.is-saving img { opacity: 0; }

.gc-outline-btn {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
  border: 1px solid var(--border-default); border-radius: 6px; background: transparent; color: var(--bodyText);
  font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.gc-outline-btn:hover { border-color: var(--primary-app); }

.gc-inspector__scroll { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; }

.gc-section { padding: 18px 20px 20px; border-bottom: 1px solid var(--border-default); }
.gc-section__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.gc-section__head--center { align-items: center; margin-bottom: 0; }
.gc-section__head h3 { margin: 0; font-family: var(--secondFont); font-size: 15px; font-weight: 700; color: var(--bodyText); }
.gc-section__summary { min-width: 0; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gc-stack { display: flex; flex-direction: column; gap: 16px; }
.gc-label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.gc-hint { margin: 8px 0 0; font-size: 12px; line-height: 1.4; color: var(--text-muted); overflow-wrap: anywhere; }
.gc-hint--flat { margin: 0; }

.gc-checks { display: flex; flex-direction: column; gap: 12px; }
.gc-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--bodyText); cursor: pointer; }
.gc-check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--primary-app); cursor: pointer; }
.gc-check__text { display: flex; flex-direction: column; gap: 3px; }
.gc-check__text .gc-hint { margin: 0; line-height: 1.35; }
.gc-check.is-disabled { opacity: .55; cursor: not-allowed; }
.gc-check.is-disabled input { cursor: not-allowed; }

/* DS TextField */
.gc-field label { display: block; margin-bottom: .75rem; font-size: .8125rem; line-height: 1.5em; color: var(--bodyText); }
.gc-field input {
  display: block; width: 100%; height: 3rem; padding: 0 1rem; font-size: 1rem; color: var(--text-body);
  background: var(--neutral-line-bg); border: var(--border-hairline); border-radius: .5rem; outline: none;
}
.gc-field input:focus { border-color: var(--blue-med); box-shadow: 0 0 0 3px var(--blue-light); }
.gc-field input::placeholder { color: var(--text-muted); opacity: .8; }
.gc-field--spaced { margin-top: 16px; }

/* Links */
.gc-badge {
  display: inline-flex; align-items: center; justify-content: center; padding: 0 .5em; border-radius: var(--radius);
  font-size: .875rem; font-weight: 600; line-height: 1.71428571; background: var(--grey-med); color: var(--text-grey);
}
.gc-link-status { font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--text-muted); }
.gc-link-status.is-warning { color: var(--warning-text); }
.gc-link-toggles { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 10px 0 2px; }
.gc-inline-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-body); white-space: nowrap; cursor: pointer; }
.gc-inline-check input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--primary-app); cursor: pointer; }
.gc-inline-check.is-disabled { opacity: .5; cursor: not-allowed; }
.gc-inline-check.is-disabled input { cursor: not-allowed; }
.gc-callout { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--warningLight); color: var(--warning-text); font-size: 12px; line-height: 1.45; }
.gc-link-row { padding: 12px 0; border-bottom: 1px solid var(--border-default); }
.gc-link-row:last-child { border-bottom: 0; padding-bottom: 0; }
.gc-link-row .gc-field label { margin-bottom: .5rem; font-weight: 700; }
.gc-link-row__meta { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: var(--text-muted); }
.gc-link-row__meta.is-warning { color: var(--warning-text); font-weight: 700; }
.gc-link-row__meta code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; }

.gc-reset { padding: 16px 20px 20px; }
.gc-text-btn {
  padding: 0; border: 0; background: transparent; font-size: 13px; color: var(--text-muted);
  text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; cursor: pointer;
}
.gc-text-btn:hover { color: var(--primary-app); }
.gc-text-btn--strong { font-weight: 700; color: var(--bodyText); }

/* ---------- Code panel ---------- */

.gc-code-wrap { flex: 0 0 48%; min-height: 300px; display: flex; flex-direction: column; padding: 0 12px 12px; }
.gc-code { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-default); border-radius: 12px; }
.gc-code__tabs { flex: none; height: 44px; display: flex; align-items: flex-end; gap: 2px; padding: 0 8px; background: var(--code-bar); overflow-x: auto; scrollbar-width: none; }
.gc-code__tab {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 0;
  border-radius: 8px 8px 0 0; background: transparent; color: var(--code-tab-muted); font-size: 13px; white-space: nowrap; cursor: pointer;
}
.gc-code__tab img { flex: none; width: 16px; height: 16px; }
.gc-code__tab[aria-selected="true"] { font-weight: 700; background: var(--code-bg); color: #FAFBFC; box-shadow: inset 0 2px 0 var(--blue-med); }
.gc-code__tab:not([aria-selected="true"]):hover { color: #FAFBFC; }
.gc-code__note {
  flex: 1 1 auto; min-width: 0; align-self: center; padding-right: 8px; text-align: right; font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--code-tab-muted);
}
.gc-code__note.is-warning { color: var(--warning-text-on-dark); font-weight: 700; }
.gc-code__body {
  position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--code-bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 20px; color: #E8E9F3;
}
.gc-code__body:focus-visible { outline-offset: -2px; }
.gc-code__foot { flex: none; display: flex; align-items: center; gap: 16px; padding: 8px 12px 8px 16px; border-top: 1px solid var(--border-default); background: var(--surface-card); }

/* DS Button, app variant */
.gc-btn-app {
  display: inline-flex; align-items: center; justify-content: center; padding: 0 1.875em; border: 0; border-radius: .25em;
  font-family: var(--secondFont); font-size: 1rem; font-weight: 700; line-height: 3.125em; color: #fff;
  background-color: var(--primary-app); white-space: nowrap; cursor: pointer; transition: background-color .3s;
}
.gc-btn-app:hover { background-color: #130F26; }

/* ---------- Core styles dialog ---------- */

.gc-scrim { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, .6); }
.gc-dialog { width: 100%; max-width: 780px; padding-top: 20px; border-radius: .3em; background: var(--surface-card); box-shadow: var(--shadow-hover); }
.gc-dialog__head { display: flex; align-items: flex-start; gap: 16px; padding: 0 20px 16px; border-bottom: 1px solid var(--border-default); }
.gc-dialog__head > div { flex: 1; min-width: 0; }
.gc-dialog__head h2 { margin: 0; font-family: var(--secondFont); font-size: 18px; line-height: 1.5; font-weight: 500; color: var(--bodyText); }
.gc-dialog__head p { margin: 4px 0 0; max-width: 560px; font-size: 13px; line-height: 1.5; color: var(--text-body); }
.gc-close { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f1f1f3; cursor: pointer; }
.gc-close:hover { background: var(--grey-med); }
.gc-close img { width: 12px; height: 12px; }
.gc-dialog__body { padding: 16px 20px 20px; }
.gc-code--dialog { height: min(460px, calc(100vh - 280px)); min-height: 280px; }

/* ---------- Toast (reset confirmation) ---------- */

.gc-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 1100; transform: translate(-50%, 12px); max-width: calc(100% - 32px);
  padding: 10px 16px; border-radius: 8px; background: var(--primary-app); color: #fff; font-size: 13px;
  box-shadow: var(--shadow-nav); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.gc-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- App integration ---------- */

/* core-styles.css scales body text to 125-150%; the design is drawn at 16px. */
.gc-app { font-size: 16px; line-height: normal; }
/* The 100vh frame scrolls its own panes, so the page itself never needs to. */
/* core-styles.css makes body a flex row (sidebar beside #main), so the page has to claim the width. */
.gc-page { display: block; flex: 1 1 100%; width: 100%; min-width: 0; margin: 0; padding: 0; }
body:has(.gc-page) { overflow: hidden; }
@media (max-width: 1023px) { body:has(.gc-page) { overflow: auto; } }
/* The title-row Report button opens the existing report form; its floating button stays hidden. */
.gc-page .cs-report-button { display: none; }
/* Stitches with no previewable CSS show their preview image instead of the iframe. */
#preview-image { display: block; max-width: 100%; max-height: 100%; margin: auto; object-fit: contain; border-radius: 8px; box-shadow: var(--shadow-image); }
/* The actions carry .stitch for add-stitch-folder-cgp.js; main.css sets .stitch to a column. */
.gc-titlebar__actions.stitch { flex-direction: row; }
/* The save-to-folder state from add-stitch-folder-cgp.js */
.gc-icon-btn.active { background: var(--primary-app); }
.gc-icon-btn.active img { filter: grayscale(1) brightness(1000%); }

/* ---------- Code viewer: CodeMirror 5 with the canvas colours ---------- */

.gc-code__body .CodeMirror {
  position: absolute; inset: 0; height: auto; padding: 14px 0; background: var(--code-bg); color: #E8E9F3;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 20px;
}
.gc-code__body .CodeMirror-lines { padding: 0; }
.gc-code__body .CodeMirror pre.CodeMirror-line,
.gc-code__body .CodeMirror pre.CodeMirror-line-like { padding: 0 24px 0 14px; }
.gc-code__body .CodeMirror-gutters { background: var(--code-bg); border-right: 0; }
.gc-code__body .CodeMirror-linenumber { min-width: 34px; padding: 0; color: var(--code-gutter); text-align: right; }
.gc-code__body .CodeMirror-cursor { display: none; }
.gc-code__body .CodeMirror-selected,
.gc-code__body .CodeMirror-focused .CodeMirror-selected { background: rgba(124, 196, 255, .22); }
.gc-code__body .CodeMirror-line::selection,
.gc-code__body .CodeMirror-line > span::selection,
.gc-code__body .CodeMirror-line > span > span::selection { background: rgba(124, 196, 255, .22); }
.gc-code__body .CodeMirror-scrollbar-filler, .gc-code__body .CodeMirror-gutter-filler { background: var(--code-bg); }

.cm-s-gc span.cm-tag, .cm-s-gc span.cm-qualifier, .cm-s-gc span.cm-builtin { color: #7CC4FF; }
.cm-s-gc span.cm-bracket, .cm-s-gc span.cm-tag.cm-bracket { color: #9095B5; }
.cm-s-gc span.cm-attribute { color: #FFBA43; }
.cm-s-gc span.cm-string, .cm-s-gc span.cm-string-2 { color: #69E0DB; }
.cm-s-gc span.cm-comment { color: #8A8FB5; }
.cm-s-gc span.cm-keyword, .cm-s-gc span.cm-meta, .cm-s-gc span.cm-def { color: #FF8FB1; }
.cm-s-gc span.cm-property { color: #C7E1F4; }
.cm-s-gc span.cm-atom, .cm-s-gc span.cm-number { color: #FFD58A; }
.cm-s-gc span.cm-variable, .cm-s-gc span.cm-variable-2, .cm-s-gc span.cm-variable-3 { color: #E8E9F3; }
.cm-s-gc span.cm-operator, .cm-s-gc span.cm-punctuation { color: #9095B5; }
.cm-s-gc span.cm-error { color: inherit; background: none; }

/* ---------- Below 1024px (outside the designed range): stack the inspector under the preview ---------- */

@media (max-width: 1023px) {
  .gc-app { height: auto; min-height: 100vh; overflow: visible; }
  .gc-body { flex-direction: column; }
  .gc-crumbs { display: none; }
  .gc-main { padding: 16px; }
  .gc-preview { flex: none; height: 70vh; }
  .gc-inspector { width: auto; border-left: 0; border-top: 1px solid var(--border-default); }
  .gc-inspector__scroll { overflow: visible; }
  .gc-code-wrap { flex: none; height: 520px; }
}

@media (prefers-reduced-motion: reduce) {
  .gc-app * { transition: none !important; }
}