@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,500;6..96,600;6..96,700&family=Figtree:wght@400;500;600;700;800&display=swap");

/* JTA Studio visual layer. Loaded after styles.css, so it only restyles; markup and behavior are untouched.
   Direction: the Didone "JTA" of the logo for display type, Figtree for the interface, and the pastel
   brush ribbon from the logo as the one recurring ornament (topbar edge, dashboard hero, sign-in). */

:root {
  --font-display: "Bodoni Moda", "Didot", "Bodoni 72", "Times New Roman", serif;
  --font-ui: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --paper: #fcf6fa;
  --surface: #ffffff;
  --ink: #2a1230;
  --ink-soft: #5f4a66;
  --ink-faint: #8a768f;
  --line: #eddbe8;
  --line-strong: #dfc6d8;
  --tint: #fdeaf5;
  --tint-strong: #fbd3ec;

  --action: #cf0f85;
  --action-hover: #ad0b6f;
  --brand: #f719a8;
  --plum: #7a0e65;

  --ok: #1f6b4a;
  --ok-bg: #e6f5ec;
  --warn: #8a5410;
  --warn-bg: #fff2d9;
  --bad: #a3262b;
  --bad-bg: #fde9ea;

  --ribbon: linear-gradient(90deg, #ffc4d6 0%, #ffd7b5 20%, #fff0a3 40%, #c7eeb9 60%, #bde5f6 80%, #d5c8f7 100%);

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --shadow-card: 0 1px 2px rgba(122, 14, 101, .05), 0 14px 32px -16px rgba(122, 14, 101, .22);
  --shadow-pop: 0 24px 70px -20px rgba(42, 18, 48, .45);

  --jta-ink: var(--ink);
  --jta-magenta: var(--plum);
  --jta-pink: var(--brand);
}

:root { font-family: var(--font-ui); color: var(--ink); line-height: 1.5; background: var(--paper); }
body { font-family: var(--font-ui); background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }
input, select, textarea, button { font-family: inherit; }
::selection { background: var(--tint-strong); color: var(--ink); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Display type ---------- */
h1, .page-heading h1, .dashboard-hero h1, .auth-card h1 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.08;
  color: var(--ink);
}
.page-heading h1, .dashboard-hero h1 { font-size: clamp(30px, 4vw, 42px); }
.section-title h2, .panel h2, .board-column-head h2, .modal h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -.01em;
  color: var(--ink);
}
.panel h3 { font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: var(--ink); }
.muted, .brand small { color: var(--ink-soft); }

/* Section labels read as normal text, not tracked caps */
.eyebrow {
  text-transform: lowercase;
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--plum);
}
.eyebrow::first-letter { text-transform: uppercase; }
.step { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--line-strong); }

/* ---------- Topbar ---------- */
.topbar {
  height: 72px;
  background: rgba(255, 255, 255, .92);
  border-bottom: 0;
  box-shadow: 0 10px 30px -22px rgba(122, 14, 101, .5);
}
.topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5px;
  background: var(--ribbon);
}
.brand { gap: 14px; }
.brand strong { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.brand small { font-size: 12.5px; }
.brand-logo { width: 46px; height: 46px; border-radius: 14px; border: 0; box-shadow: 0 0 0 1px var(--line), 0 8px 18px -8px rgba(247, 25, 168, .55); }
.brand-mark { background: var(--action); border-radius: 12px; font-family: var(--font-display); }
.topbar nav { gap: 4px; align-items: center; }
.nav-btn {
  color: var(--ink-soft);
  font-weight: 650;
  font-size: 14px;
  padding: 9px 15px;
  border-radius: 999px;
  transition: background-color .15s, color .15s;
}
.nav-btn:hover { background: var(--tint); color: var(--plum); }
.nav-btn.active { background: var(--ink); color: #fff; }
.nav-btn[data-action="logout"] { color: var(--ink-faint); }

.sync-banner { border-bottom: 1px solid var(--line); font-size: 13px; }
.sync-banner.warning { background: var(--warn-bg); color: var(--warn); }
.sync-banner.ready { background: var(--ok-bg); }
.sync-banner.danger { background: var(--bad-bg); color: var(--bad); }

/* ---------- Page heading ---------- */
.page-heading { margin: 38px auto 24px; }
.page-heading .muted { max-width: 60ch; margin-top: 8px; }

/* ---------- Panels ---------- */
.panel, .client-panel, .quote-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 26px;
}
.panel h2 { margin-bottom: 4px; }

/* ---------- Forms ---------- */
.field { color: var(--ink-soft); font-size: 13px; font-weight: 650; }
.field input,
.search-input,
.quote-row input,
.product-row input,
.consumption input,
.category-select select,
.category-select input,
.product-form-modal select,
select, textarea {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--ink);
  padding: 11px 13px;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus,
.search-input:focus,
.quote-row input:focus,
.product-row input:focus,
.consumption input:focus,
.category-select select:focus,
.category-select input:focus,
.product-form-modal select:focus {
  border-color: var(--action);
  box-shadow: 0 0 0 4px rgba(207, 15, 133, .14);
}
.field input[readonly] { background: #faf2f8; color: var(--ink-soft); }
.switch i { background: #d9c7d3; }
.switch input:checked + i { background: var(--action); }

.billing-strip {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--tint);
  box-shadow: none;
}

/* ---------- Buttons ---------- */
.button, .icon-button { border-radius: var(--r-sm); font-weight: 700; transition: background-color .15s, border-color .15s, box-shadow .15s, transform .1s; }
.button { padding: 11px 17px; }
.button:active { transform: translateY(1px); }
.button.primary { background: var(--action); color: #fff; box-shadow: 0 8px 18px -10px rgba(207, 15, 133, .9); }
.button.primary:hover { background: var(--action-hover); }
.button.primary:disabled, .button:disabled { background: #e7d6e1; color: #9b879b; box-shadow: none; cursor: not-allowed; }
.button.secondary { background: #fff; border-color: var(--line-strong); color: var(--plum); }
.button.secondary:hover { background: var(--tint); border-color: var(--tint-strong); }
.button.ghost { color: var(--action); }
.button.danger { background: var(--bad-bg); border-color: #f1c2c5; color: var(--bad); }
.icon-button { background: #fff; border: 1px solid var(--line); color: var(--ink-soft); }
.icon-button:hover { background: var(--tint); color: var(--plum); }
.icon-button.danger:hover { background: var(--bad-bg); color: var(--bad); }

/* ---------- Quote table ---------- */
.quote-head {
  background: #fbeef6;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--plum);
  text-transform: none;
  letter-spacing: 0;
  font-size: 12.5px;
  font-weight: 700;
}
.quote-row { border-bottom: 1px solid #f4e8f0; }
.quote-row:nth-child(odd) { background: transparent; }
.quote-row:hover { background: #fdf6fa; }
.quote-row.selected { background: var(--tint); border-left: 3px solid var(--action); }
.quote-row .line-name strong { font-weight: 700; }
.quote-row .line-total { font-variant-numeric: tabular-nums; }
.count { color: var(--plum); font-weight: 700; }
.empty-state { border: 1.5px dashed var(--line-strong); border-radius: var(--r-md); background: #fdf8fb; color: var(--ink-soft); }
.empty-state strong { font-family: var(--font-display); font-size: 19px; color: var(--ink); }

/* ---------- Review / totals ---------- */
.review {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border-color: var(--line);
  padding-top: 30px;
}
.review::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--ribbon); }
.review .total {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
  font-variant-numeric: lining-nums;
}
.review-facts { border-color: var(--line); border-radius: var(--r-md); background: #fdf8fb; }
.review-facts div, .review dl div { border-bottom-color: #f2e4ed; }
.review-facts span, .review dt { color: var(--ink-soft); }
.review .profit dd { color: var(--ok); }
.status { border-radius: 999px; padding: 7px 13px; font-weight: 700; }
.status.ready { background: var(--ok-bg); color: var(--ok); }
.status.warning { background: var(--warn-bg); color: var(--warn); }
.hint { background: var(--tint); border-color: var(--tint-strong); box-shadow: none; }
.reference-alert, .financial-warning { border-radius: var(--r-md); }

/* ---------- Product picker ---------- */
.picker { border: 2px solid var(--tint-strong); background: #fffafd; }
.picker-head { color: var(--plum); text-transform: none; letter-spacing: 0; font-size: 12.5px; border-bottom-color: var(--line); }
.picker-item { border-top-color: #f4e8f0; }
.picker-item small { color: var(--ink-soft); }
.price-origin.automatic, .picker-volume-hint { background: var(--ok-bg); color: var(--ok); }
.picker-item input[readonly] { background: #faf2f8; color: var(--plum); }
.row-actions .icon-button[data-restore-auto-price] { background: var(--ok-bg); color: var(--ok); }
.consumption.billable small { background: var(--tint); color: var(--plum); }
.mini-metrics b[data-line-profit] { color: var(--ok); }

/* ---------- Dashboard ---------- */
.dashboard-hero, .dashboard-hero.brand-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px clamp(22px, 4vw, 44px);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.dashboard-hero.brand-hero:after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: min(640px, 75%);
  background: url("./assets/ribbon.svg") right bottom / cover no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%), linear-gradient(to bottom, transparent 0%, #000 40%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 45%), linear-gradient(to bottom, transparent 0%, #000 40%);
  mask-composite: intersect;
  border-radius: 0;
  opacity: .9;
  filter: none;
  pointer-events: none;
}
.dashboard-hero > * { position: relative; z-index: 1; }

.metric {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  padding: 18px 18px 16px;
  overflow: hidden;
}
.metric::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: #d5c8f7; }
.metric span { color: var(--ink-soft); font-size: 13px; font-weight: 650; }
.metric strong { font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: lining-nums; }
.metric.success, .metric.warning, .metric.danger { background: var(--surface); }
.metric.success { border-color: var(--line); }
.metric.success::before { background: #a9e29a; }
.metric.success strong { color: var(--ink); }
.metric.warning { border-color: var(--line); }
.metric.warning::before { background: #ffd96b; }
.metric.danger { border-color: #f1c2c5; }
.metric.danger::before { background: #ff8fa3; }
.metric.danger strong { color: var(--bad); }
.business-kpis .metric, .business-kpis .metric:nth-child(n) { background: var(--surface); }
.metric:hover { box-shadow: 0 1px 2px rgba(122, 14, 101, .06), 0 20px 36px -16px rgba(122, 14, 101, .3); }

.chart-row div span { color: var(--ink-soft); }
.chart-row div strong { font-family: var(--font-display); font-weight: 600; }
.chart-row i { background: #f6ebf2; }
.trend-strip span { background: #fdf8fb; border-color: var(--line); color: var(--ink-soft); }
.trend-strip b { font-family: var(--font-display); font-weight: 600; font-size: 24px; color: var(--ink); }
.filter-pill.active { background: var(--ink); border-color: var(--ink); }
.dashboard-filters .filter-bar-heading strong { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.filter-reset { color: var(--action); font-weight: 700; }

/* ---------- Orders board ---------- */
.board-column {
  background: #fcf3f8;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px;
}
.board-column.cancelled-column { background: #f6f1f4; border-style: dashed; }
.board-column.drag-over { outline: 3px solid rgba(207, 15, 133, .3); background: var(--tint); }
.board-column .board-column-head, .board-column:nth-child(n) .board-column-head { color: var(--ink); background: transparent; border: 0; gap: 8px; }
.board-column-head .board-stage-name { font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 1.15; text-align: left; color: var(--ink); background: transparent; box-shadow: none; padding: 0; min-width: 0; flex: 1; }
.board-column-head .board-stage-count, .board-column-head .board-stage-toggle { background: #fff; color: var(--plum); box-shadow: inset 0 0 0 1px var(--line-strong); }
.order-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgba(122, 14, 101, .05), 0 10px 22px -16px rgba(122, 14, 101, .35);
}
.order-card:hover { border-color: var(--tint-strong); box-shadow: 0 1px 2px rgba(122, 14, 101, .06), 0 18px 30px -14px rgba(122, 14, 101, .35); }
.order-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.order-card dt { color: var(--ink-soft); }
.order-card.danger { background: #fff7f7; border-color: #f1c2c5; }
.stage-btn { background: #fff; border-color: var(--line-strong); color: var(--plum); }
.stage-btn:hover { background: var(--tint); }
.stage-btn.danger { background: var(--bad-bg); border-color: #f1c2c5; color: var(--bad); }

/* ---------- Modals ---------- */
.modal-backdrop { background: rgba(42, 18, 48, .55); backdrop-filter: blur(3px); }
.modal, .order-modal { border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); }

/* ---------- Sign-in ---------- */
.auth-shell {
  position: relative;
  overflow: hidden;
  background: var(--paper);
}
.auth-shell::before, .auth-shell::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background: url("./assets/ribbon.svg") center bottom / cover no-repeat;
}
.auth-shell::before {
  inset: auto 0 0 0;
  height: 62vh;
  opacity: .9;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 38%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 38%);
}
.auth-shell::after {
  inset: 0 0 auto 0;
  height: 26vh;
  opacity: .35;
  transform: scaleY(-1);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 60%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 60%);
}
.auth-card { position: relative; z-index: 1; width: min(440px, 100%); padding: 36px 34px 32px; border-radius: 24px; overflow: hidden; }
.auth-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--ribbon); }
.auth-logo { display: block; width: 92px; height: 92px; object-fit: cover; border-radius: 22px; margin-bottom: 18px; box-shadow: 0 0 0 1px var(--line), 0 14px 26px -12px rgba(247, 25, 168, .55); }
.auth-card h1 { font-size: 42px; margin: 6px 0 8px; }
.backend-note { border-radius: var(--r-md); }

@media (max-width: 720px) {
  .topbar { height: auto; min-height: 64px; padding-top: 10px; padding-bottom: 12px; }
  .metric strong { font-size: 26px; }
  .review .total { font-size: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}