/* =============================================================================
   CT Toolkit — Soft Productivity Theme (light pastel)
   -----------------------------------------------------------------------------
   Single source of theme tokens for the Cloudflare build. Each page's inline
   <style> now defines ONLY layout (width / padding / grid / structure); this
   file owns every color token (:root) plus the visual theming (surface, radius,
   shadow, motion, component look). Linked LAST in <head> so its component rules
   settle the final appearance. It never changes layout boxes, HTML structure,
   IDs, or JS selectors.
   ============================================================================= */

:root {
  /* base / surface */
  --bg: #f6f8fb;
  --surface: #ffffff;
  --surface-2: #f1f5fb;          /* header / inset tint */
  --surface-3: #fbfdff;          /* elevated off-white */
  --line: #dfe8f2;
  --line-strong: #c7d6e8;
  --text: #243041;
  --muted: #5e6e80;              /* deepened for AA on white */

  /* soft blue accent + solid primary */
  --accent: #4f8df7;             /* ambient: icons, borders, focus, tints */
  --accent-soft: #eaf2fe;        /* light tint fill */
  --accent-dark: #2563eb;        /* deep-blue ink on light tints */
  --primary: #3b82f6;            /* solid fill (white text) */
  --primary-hover: #2f6fe0;
  --primary-ink: #ffffff;

  /* secondary pastels (status / ambient) + softened status ink */
  --mint: #d8f3e3;   --ok: #157f3b;
  --peach: #ffe9cf;  --warning: #9a5b00;
  --rose: #fde4e1;   --danger: #b42318;
  --lavender: #ece8fd; --purple: #6d28d9;
  --purple-dark: #5b21b6; --purple-soft: #ede9fe;
  --blue-soft: #e7f0fb; --blue: #1d5f91;

  /* radius scale */
  --radius: 14px;                /* controls: button, input, small tile */
  --radius-lg: 20px;             /* panels, cards, table, dropzone */
  --radius-sm: 10px;             /* thumbnails, small chips */
  --radius-pill: 999px;

  /* shallow blue-tinted shadow + subtle motion */
  --shadow: 0 1px 2px rgba(31, 45, 61, 0.04), 0 10px 28px rgba(79, 141, 247, 0.08);
  --shadow-sm: 0 1px 2px rgba(31, 45, 61, 0.05);
  --shadow-hover: 0 6px 18px rgba(79, 141, 247, 0.16);
  --t: 160ms cubic-bezier(0.2, 0.6, 0.2, 1);

  /* rounded readable sans — no network dependency (system fallback) */
  --font: "Plus Jakarta Sans", "Manrope", "Nunito Sans", Inter, ui-sans-serif,
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

* {
  scrollbar-color: rgba(79, 141, 247, 0.4) transparent;
}

html {
  background: var(--bg);
}

body {
  min-height: 100dvh;
  color: var(--text);
  font-family: var(--font);
  background:
    radial-gradient(900px 520px at 6% -8%, rgba(79, 141, 247, 0.10), transparent 60%),
    radial-gradient(820px 460px at 104% -4%, rgba(167, 139, 250, 0.08), transparent 58%),
    radial-gradient(900px 600px at 50% 116%, rgba(45, 212, 191, 0.07), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.app {
  position: relative;
  z-index: 0;
  padding-top: 28px;
}

/* ---- top bar / brand --------------------------------------------------- */
.topbar {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.brand-mark {
  border: 1px solid rgba(79, 141, 247, 0.35);
  border-radius: var(--radius);
  background: linear-gradient(135deg, #4f8df7 0%, #6aa8ff 60%, #8ab6ff 100%);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(79, 141, 247, 0.28);
}

/* ---- typography -------------------------------------------------------- */
h1,
h2,
h3,
.panel-title,
.metric-value {
  color: var(--text);
}

h1 {
  letter-spacing: 0;
}

p,
.card-copy,
.panel-head p,
.intro p,
.metric-label,
.manual-meta,
.progress-meta,
.progress-label,
.preview-label,
.canvas-caption,
.queue-meta,
.file-meta,
.path-text,
.shortcut-steps,
.field-label {
  color: var(--muted);
}

/* ---- focus ------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
label.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(79, 141, 247, 0.18);
}

/* ---- surfaces (cards with inline padding) ------------------------------ */
.intro,
.panel,
.tool-card,
.metric,
.empty-state,
.table-wrap,
.canvas-frame,
.dropzone,
.queue-item,
.upload-row {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}

/* big containers: large radius, clip decorative children */
.intro,
.panel,
.tool-card,
.table-wrap,
.empty-state,
.canvas-frame,
.dropzone {
  position: relative;
  border-radius: var(--radius-lg);
}

.panel,
.tool-card,
.intro,
.canvas-frame {
  overflow: hidden;
}

/* tables scroll (rounded clip still applies) — never overflow:hidden */
.table-wrap {
  overflow: auto;
}

/* smaller card insets: control radius */
.metric,
.queue-item,
.upload-row {
  border-radius: var(--radius);
}

/* bare layout wrappers stay transparent (no inline padding -> not cards) */
.toolbar,
.filters,
.file-row,
.incoming-row,
.path-entry,
.url-row,
.solo-link,
.manual-grid,
.progress-wrap {
  background: transparent;
  box-shadow: none;
}

/* ---- panel headers ----------------------------------------------------- */
.panel-header,
.panel-head,
.card-head {
  border-color: var(--line);
  background: var(--surface-2);
}

/* ---- icon glyphs ------------------------------------------------------- */
.panel-title svg,
.empty-state svg,
.source svg,
.status svg,
.status-line svg {
  color: var(--accent);
}

.tool-icon,
.metric-icon,
.drop-icon {
  border: 1px solid rgba(79, 141, 247, 0.22);
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: none;
}

.metric-icon.purple {
  border-color: rgba(109, 40, 217, 0.24);
  background: var(--lavender);
  color: var(--purple);
}

/* ---- buttons ----------------------------------------------------------- */
.btn,
label.btn,
.filter-btn,
.sku-mini-btn,
.sku-open-btn,
.copy-action {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: background var(--t), border-color var(--t), box-shadow var(--t),
    transform var(--t), color var(--t);
}

.btn:hover:not(:disabled),
label.btn:hover,
.filter-btn:hover,
.sku-open-btn:hover:not(:disabled),
.sku-mini-btn:hover:not(:disabled),
.copy-action:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}

.btn:active:not(:disabled),
label.btn:active,
.filter-btn:active {
  transform: translateY(0) scale(0.99);
}

.btn-primary {
  border-color: transparent;
  background: var(--primary);
  color: var(--primary-ink);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.24);
}

.btn-primary:hover:not(:disabled) {
  border-color: transparent;
  background: var(--primary-hover);
  color: #ffffff;
}

/* composer "render" — softened lavender, kept distinct from blue primary */
.btn-purple {
  border-color: transparent;
  background: linear-gradient(135deg, #8b6ff0, #7458e8);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(116, 88, 232, 0.24);
}

.btn-purple:hover:not(:disabled) {
  border-color: transparent;
  background: linear-gradient(135deg, #9a82f3, #8163ec);
  color: #ffffff;
}

.btn-danger {
  border-color: rgba(180, 35, 24, 0.28);
  background: var(--rose);
  color: var(--danger);
}

.btn-danger:hover:not(:disabled) {
  border-color: rgba(180, 35, 24, 0.5);
  background: #fbd5d0;
  color: var(--danger);
}

.btn-blue {
  border-color: rgba(79, 141, 247, 0.4);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.btn:disabled,
input:disabled + .btn,
.filter-btn:disabled {
  opacity: 0.5;
  box-shadow: none;
}

/* ---- form fields ------------------------------------------------------- */
input[type="text"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="email"],
textarea,
select,
.manual-grid input[type="url"],
.manual-grid input[type="text"],
.path-entry input,
.text-field,
.shortcut-url {
  border-color: var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  caret-color: var(--accent);
  box-shadow: inset 0 1px 2px rgba(31, 45, 61, 0.03);
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}

input[type="text"]::placeholder,
input[type="url"]::placeholder,
input[type="number"]::placeholder,
input[type="search"]::placeholder,
input[type="email"]::placeholder,
textarea::placeholder,
select::placeholder,
.manual-grid input[type="url"]::placeholder,
.manual-grid input[type="text"]::placeholder,
.path-entry input::placeholder,
.text-field::placeholder,
.shortcut-url::placeholder {
  color: rgba(94, 110, 128, 0.62);
}

input[type="text"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus,
.manual-grid input[type="url"]:focus,
.manual-grid input[type="text"]:focus,
.path-entry input:focus,
.text-field:focus,
.shortcut-url:focus {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 4px rgba(79, 141, 247, 0.15);
}

input[type="checkbox"],
input[type="radio"],
input[type="range"] {
  accent-color: var(--accent);
}

/* ---- hub tool grid / cards -------------------------------------------- */
.tool-grid {
  align-items: stretch;
}

.tool-card {
  isolation: isolate;
  background: var(--surface);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}

.tool-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* gentle pastel rotation on hub tool-card icons (blue / mint / peach / lavender) */
.tool-grid .tool-card .tool-icon {
  border-radius: var(--radius);
}

.tool-grid .tool-card:nth-child(4n + 1) .tool-icon {
  border-color: rgba(79, 141, 247, 0.3);
  background: var(--accent-soft);
  color: var(--accent);
}

.tool-grid .tool-card:nth-child(4n + 2) .tool-icon {
  border-color: rgba(21, 127, 59, 0.22);
  background: var(--mint);
  color: var(--ok);
}

.tool-grid .tool-card:nth-child(4n + 3) .tool-icon {
  border-color: rgba(154, 91, 0, 0.22);
  background: var(--peach);
  color: var(--warning);
}

.tool-grid .tool-card:nth-child(4n + 4) .tool-icon {
  border-color: rgba(109, 40, 217, 0.22);
  background: var(--lavender);
  color: var(--purple);
}

/* ---- toolbar / filters ------------------------------------------------- */
.filter-btn,
.filter-chip,
.badge {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--muted);
}

.filter-btn.is-active {
  border-color: rgba(79, 141, 247, 0.45);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

/* ---- badges ------------------------------------------------------------ */
.badge-ok,
.badge.is-done,
.badge.is-complete {
  border-color: rgba(21, 127, 59, 0.28);
  background: var(--mint);
  color: var(--ok);
}

.badge.is-processing {
  border-color: rgba(29, 95, 145, 0.28);
  background: var(--blue-soft);
  color: var(--blue);
}

.badge-warn {
  border-color: rgba(154, 91, 0, 0.28);
  background: var(--peach);
  color: var(--warning);
}

.badge-danger,
.badge-error,
.badge.is-error {
  border-color: rgba(180, 35, 24, 0.28);
  background: var(--rose);
  color: var(--danger);
}

/* ---- tables ------------------------------------------------------------ */
table {
  color: var(--text);
}

thead th {
  border-color: var(--line-strong);
  background: var(--surface-2);
  color: #3a4a5e;
  box-shadow: 0 1px 0 var(--line);
}

tbody td {
  border-color: var(--line);
  color: var(--text);
}

tbody tr {
  background: transparent;
}

tbody tr:nth-child(even) {
  background: #fafcff;
}

tbody tr:hover {
  background: var(--accent-soft);
}

tbody tr.is-done,
tbody tr.is-complete,
tbody tr.is-rendered {
  background: #eefaf2;
}

tbody tr.is-failed,
tbody tr.is-invalid,
tbody tr.is-error {
  background: #fdeeec;
}

tbody tr.is-warning {
  background: #fff5e8;
}

/* ---- thumbnails / pills / logs ---------------------------------------- */
.thumb,
.frame-thumb,
.preview-thumb {
  border-color: var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-3);
}

.file-pill,
.log,
.log-box {
  border-color: var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--muted);
}

.frame-preview {
  border-color: var(--line-strong);
  border-radius: var(--radius);
  background:
    linear-gradient(45deg, rgba(79, 141, 247, 0.07) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(79, 141, 247, 0.07) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(79, 141, 247, 0.07) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(79, 141, 247, 0.07) 75%),
    #ffffff;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-size: 20px 20px;
}

/* ---- muted helper text ------------------------------------------------- */
.num-cell,
.giftname-cell,
.file-sub,
.queue-state,
.selected-name,
.card-meta,
.helper-actions {
  color: var(--muted);
}

/* ---- progress ---------------------------------------------------------- */
.progress-track,
.progress {
  border-color: var(--line);
  background: #e8eef7;
}

.progress-bar,
.progress > span,
.progress-fill {
  background: linear-gradient(90deg, #4f8df7, #6aa8ff);
  box-shadow: none;
}

.progress.is-error > span {
  background: linear-gradient(90deg, #f87171, #fca5a5);
}

.progress.is-complete > span {
  background: linear-gradient(90deg, #34d399, #6ee7b7);
}

/* ---- empty state / dropzone ------------------------------------------- */
.empty-state {
  color: var(--muted);
  border-color: var(--line-strong);
  background:
    radial-gradient(circle at 50% 0%, rgba(79, 141, 247, 0.06), transparent 55%),
    var(--surface-3);
}

.dropzone {
  border-color: var(--line-strong);
  background: var(--surface-3);
  transition: border-color var(--t), background var(--t), box-shadow var(--t),
    transform var(--t);
}

.dropzone.is-hot {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 4px rgba(79, 141, 247, 0.12), var(--shadow-hover);
  transform: translateY(-1px);
}

.dropzone.is-disabled {
  opacity: 0.6;
  filter: saturate(0.8);
}

/* ---- canvas preview / layout zones ------------------------------------ */
.canvas-frame {
  background: #eef1f6;
  border-color: var(--line);
}

.canvas-caption {
  border-color: var(--line);
  background: var(--surface-2);
}

.layout-box {
  border-color: var(--accent);
  background: rgba(79, 141, 247, 0.10);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.layout-box.is-gift {
  border-color: var(--purple);
  background: rgba(124, 92, 250, 0.12);
}

.layout-box.is-text {
  border-color: var(--warning);
  background: rgba(154, 91, 0, 0.12);
}

/* ---- status chips / notices (boxed) ----------------------------------- */
.source,
.status,
.notice,
.confirm-strip,
.scope-choice,
.path-summary {
  border-color: var(--line);
  background: var(--surface-3);
  color: var(--muted);
  box-shadow: var(--shadow-sm);
}

.source,
.status {
  border-radius: var(--radius-pill);
}

.notice,
.confirm-strip,
.scope-choice,
.path-summary {
  border-radius: var(--radius);
}

/* save badge / audit banner default = soft peach warning */
.save-badge,
.audit-banner,
.imported-layout-banner {
  border-color: rgba(154, 91, 0, 0.28);
  border-radius: var(--radius);
  background: var(--peach);
  color: var(--warning);
  box-shadow: var(--shadow-sm);
}

/* status-line is inline helper text — colour only, never a box */
.status-line.is-ok,
.queue-state.is-ok {
  color: var(--ok);
}

.status-line.is-error,
.queue-state.is-error {
  color: var(--danger);
}

.status-line.is-warning,
.row-warn {
  color: var(--warning);
}

/* boxed OK state (chips, buttons, notices, banners) */
.status.is-ok,
.save-badge.is-ok,
.audit-banner.is-ok,
.notice.is-ok,
.copy-action.is-ok,
.sku-open-btn.is-ok {
  border-color: rgba(21, 127, 59, 0.3);
  background: var(--mint);
  color: var(--ok);
}

/* boxed error state */
.status.is-error,
.audit-banner.is-error,
.notice.is-error,
.copy-action.is-error,
.sku-open-btn.is-error {
  border-color: rgba(180, 35, 24, 0.3);
  background: var(--rose);
  color: var(--danger);
}

/* boxed working state (peach) */
.copy-action.is-working,
.sku-open-btn.is-working {
  border-color: rgba(154, 91, 0, 0.3);
  background: var(--peach);
  color: var(--warning);
}

/* ---- utilities --------------------------------------------------------- */
.hidden {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (max-width: 720px) {
  .app {
    width: min(100% - 24px, 1180px);
    padding-top: 16px;
  }

  .topbar {
    padding: 12px;
  }

  /* stack the PSD hint above its full-width button so the helper text
     wraps normally instead of collapsing to one word per line */
  .psd-folder-row {
    flex-direction: column;
    align-items: stretch;
  }
}
