/* Printer's Friend design tokens, locked from the brand identity doc.
   Loaded via <link href="/css/pf.css"> in portal, marketing and PDF
   layouts. Filament admin uses a separate workspace.css. */

:root {
  /* Core palette, from the brand identity */
  --ink:        #14233d;
  --ink-2:      #1c2e4d;
  --ink-soft:   #3a4a66;
  --paper:      #f7f2e9;
  --paper-pure: #fffdf8;
  --coral:      #ff5a3c;
  --coral-deep: #e8421f;
  --coral-soft: #fff1ed;   /* 10% tint from the brand doc */
  --coral-tint: #ffd3c9;   /* 25% tint */
  --teal:       #16b8a6;
  --teal-deep:  #0e8c7e;
  --teal-soft:  #d8f4f0;
  --sun:        #ffc24b;
  --line:       rgba(20, 35, 61, 0.12);
  --line-soft:  rgba(20, 35, 61, 0.08);

  /* Backwards-compatible aliases: the rest of the codebase still uses these names.
     We keep the API stable and only swap the values. */
  --brand:        var(--coral);
  --brand-light:  #ffa590;
  --brand-dark:   var(--coral-deep);
  --brand-soft:   var(--coral-soft);
  --brand-softer: #fff8f5;
  --charcoal:     var(--ink-soft);
  --muted:        var(--ink-soft);
  --muted-light:  #6a7a93;
  --muted-lighter:#9aa6bb;
  --border:       var(--line);
  --border-light: var(--line-soft);
  --surface:      var(--paper-pure);
  --surface-alt:  var(--paper);
  --surface-alt-2:#efe9dd;

  --green:        var(--teal-deep);
  --green-soft:   var(--teal-soft);
  --amber:        #d97706;
  --amber-soft:   #fff1d6;
  --red:          var(--coral-deep);
  --red-soft:     var(--coral-soft);
  --purple:       #5b21b6;
  --purple-soft:  #ede9fe;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

/* Display type uses Bricolage Grotesque */
h1, h2, h3, .display, .section-title {
  font-family: 'Bricolage Grotesque', 'Hanken Grotesk', sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ===== Portal top nav ===== */
.portal-shell { max-width: 1280px; margin: 0 auto; padding: 16px 24px 56px; }
.portal-top {
  background: var(--paper-pure); border: 1px solid var(--line); border-radius: 16px;
  padding: 14px 20px; display: flex; align-items: center; gap: 16px;
  margin-bottom: 18px;
}
.portal-logo {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: 22px; letter-spacing: -0.03em; color: var(--ink);
  display: inline-flex; align-items: center; gap: 10px;
}
.portal-logo .accent { color: var(--coral); }
.portal-logo .mark { width: 28px; height: 28px; display: inline-block; }
.portal-nav { display: flex; gap: 24px; margin-left: 18px; }
.portal-nav .n {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 14px; color: var(--ink-soft); font-weight: 600;
  padding: 8px 2px; border-bottom: 2px solid transparent; margin-bottom: -15px;
}
.portal-nav .n.active { color: var(--ink); border-color: var(--coral); }
.portal-nav .n:hover { color: var(--ink); }
.portal-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.search-box {
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 14px; font-size: 13px; color: var(--ink-soft); min-width: 220px;
}
.user-chip {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--coral);
  color: white; display: grid; place-items: center;
  font-weight: 700; font-size: 12px; font-family: 'Bricolage Grotesque', sans-serif;
}

/* ===== Welcome banner ===== */
.welcome {
  background: var(--ink); color: var(--paper);
  border-radius: 18px; padding: 28px 32px;
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 20px;
  position: relative; overflow: hidden;
}
.welcome::after {
  content: ''; position: absolute; top: -30px; right: -30px; width: 200px; height: 200px;
  background: radial-gradient(var(--coral) 1.6px, transparent 2px);
  background-size: 16px 16px; opacity: 0.18; pointer-events: none;
}
.welcome-title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--paper); }
.welcome-sub { color: rgba(247, 242, 233, 0.75); font-size: 14px; margin-top: 4px; }
.welcome-sub b { color: var(--paper); font-weight: 700; }
.welcome-pill {
  margin-left: auto;
  background: rgba(247, 242, 233, 0.10);
  border: 1px solid rgba(247, 242, 233, 0.25);
  padding: 10px 16px; border-radius: 999px;
  font-size: 12px; color: var(--paper); font-weight: 600;
  letter-spacing: 0.04em;
}
.welcome-pill::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--coral); margin-right: 8px; vertical-align: middle;
  box-shadow: 0 0 10px var(--coral);
}

/* ===== KPI strip ===== */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.kpi {
  background: var(--paper-pure); border: 1px solid var(--line); border-radius: 18px;
  padding: 18px 20px;
}
.kpi-label {
  font-size: 11px; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700;
  margin-bottom: 8px;
}
.kpi-value {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 30px; font-weight: 800; letter-spacing: -0.025em; color: var(--ink);
}
.kpi-delta { font-size: 12px; color: var(--teal-deep); font-weight: 600; margin-top: 4px; }
.kpi-delta.warn { color: var(--coral-deep); }
.kpi-delta.muted { color: var(--ink-soft); }

/* ===== Grid layout ===== */
.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
.grid-1-1 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }

/* ===== Card ===== */
.card {
  background: var(--paper-pure); border: 1px solid var(--line); border-radius: 18px;
  padding: 22px 24px;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.card-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em;
}
.card-action { font-size: 13px; color: var(--coral); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.card-action svg { width: 14px; height: 14px; }

/* ===== Catalogue grid ===== */
.catalog { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.prod {
  background: var(--paper-pure); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}
.prod:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20, 35, 61, 0.10); }
.prod-img {
  height: 130px; background: linear-gradient(135deg, var(--paper), #efe9dd);
  position: relative; display: grid; place-items: center;
  color: var(--ink-soft); font-size: 11px; font-weight: 600;
}
.prod-img .tag {
  position: absolute; top: 10px; left: 10px; font-size: 10px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--paper-pure); color: var(--ink); font-weight: 700;
  letter-spacing: 0.04em;
}
.prod-img .tag.brand { background: var(--coral); color: white; }
.prod-img .tag.warn  { background: var(--sun); color: var(--ink); }
.prod-body { padding: 14px 16px; }
.prod-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em;
}
.prod-meta { font-size: 12px; color: var(--ink-soft); margin: 4px 0 10px; }
.prod-foot { display: flex; justify-content: space-between; align-items: center; }
.prod-price {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 17px; font-weight: 800; color: var(--ink);
}
.prod-stock { font-size: 11px; color: var(--teal-deep); font-weight: 600; }
.prod-stock.low { color: var(--coral-deep); }
.prod-stock.out { color: var(--coral-deep); }

/* ===== Active jobs panel ===== */
.job-card {
  border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; margin-bottom: 10px;
  background: var(--paper);
}
.job-card:last-child { margin-bottom: 0; }
.job-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.job-id { font-family: 'Bricolage Grotesque', sans-serif; font-size: 13px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.job-name { font-size: 13.5px; color: var(--ink); font-weight: 600; }
.job-meta { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
.progress {
  height: 6px; border-radius: 999px; background: rgba(20, 35, 61, 0.08);
  margin-top: 10px; overflow: hidden;
}
.progress > span {
  display: block; height: 100%; background: var(--coral); border-radius: 999px;
}

/* ===== Pills ===== */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  letter-spacing: 0.04em; text-transform: capitalize;
}
.pill-blue   { background: var(--coral-soft);   color: var(--coral-deep); }
.pill-green  { background: var(--teal-soft);    color: var(--teal-deep); }
.pill-amber  { background: #fff1d6;             color: #b25a00; }
.pill-red    { background: var(--coral-soft);   color: var(--coral-deep); }
.pill-purple { background: #ede9fe;             color: #5b21b6; }
.pill-gray   { background: #efe9dd;             color: var(--ink-soft); }

/* ===== Tables ===== */
table.pf-table { width: 100%; border-collapse: collapse; }
table.pf-table th {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-soft); font-weight: 700;
  text-align: left; padding: 12px 8px;
  border-bottom: 1px solid var(--line);
}
table.pf-table td {
  padding: 14px 8px; font-size: 14px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
}
table.pf-table tr:last-child td { border-bottom: none; }
table.pf-table tr:hover td { background: var(--paper); }
.pf-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.pf-table .col-actions { width: 1%; white-space: nowrap; text-align: right; }

/* ===== Forms & buttons ===== */
.btn {
  font-family: 'Hanken Grotesk', sans-serif;
  background: var(--coral); color: white;
  font-weight: 600; font-size: 14px; padding: 11px 18px;
  border-radius: 12px; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 0.18s, transform 0.18s;
}
.btn:hover { background: var(--coral-deep); transform: translateY(-1px); }
.btn-secondary {
  background: var(--paper-pure); color: var(--ink);
  border: 1.5px solid var(--line);
}
.btn-secondary:hover { background: var(--paper); border-color: var(--ink); transform: none; }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--ink-2); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--ink); transform: none; }
.btn-danger { background: var(--coral-deep); }
.btn-danger:hover { background: #c2381a; }
.btn-sm { padding: 7px 12px; font-size: 12.5px; }

label.field-label {
  display: block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-soft); margin-bottom: 6px;
}
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], textarea, select {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid var(--line); border-radius: 12px;
  font-family: inherit; font-size: 15px;
  background: var(--paper-pure); color: var(--ink);
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--coral); }
textarea { min-height: 96px; resize: vertical; }

/* ===== Filter chips ===== */
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper-pure);
  font-size: 13px; font-weight: 600; color: var(--ink);
  cursor: pointer; text-decoration: none;
}
.chip:hover { border-color: var(--coral); color: var(--coral-deep); }
.chip.active { background: var(--coral); color: white; border-color: var(--coral); }
.chip.danger { color: var(--coral-deep); border-color: var(--coral-soft); background: var(--coral-soft); }
.chip.danger.active { background: var(--coral); color: white; border-color: var(--coral); }
.chip-label { font-size: 11px; color: var(--ink-soft); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; padding: 7px 8px 7px 0; }

/* ===== Alerts ===== */
.alert {
  background: var(--coral-soft); border: 1px solid rgba(232, 66, 31, 0.25);
  color: var(--coral-deep); padding: 14px 18px; border-radius: 12px;
  font-size: 14px; margin-bottom: 16px; font-weight: 500;
}
.alert.success { background: var(--teal-soft); border-color: rgba(14, 140, 126, 0.25); color: var(--teal-deep); }
.alert.error { background: var(--coral-soft); border-color: rgba(232, 66, 31, 0.30); color: var(--coral-deep); }

/* ===== Utilities ===== */
.muted { color: var(--ink-soft); }
.row-between { display: flex; align-items: center; justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 6px; }
.gap-3 { gap: 12px; }
.mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; }
.mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; }
.text-sm { font-size: 13px; } .text-xs { font-size: 11px; }
.font-bold { font-weight: 700; }
.section-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 28px; font-weight: 800; letter-spacing: -0.025em; color: var(--ink);
  margin-bottom: 6px;
}
.section-lede { color: var(--ink-soft); font-size: 15px; margin-bottom: 20px; max-width: 640px; }

/* ===== Login page ===== */
.auth-shell {
  min-height: 100vh; display: grid; place-items: center;
  background: var(--paper);
  background-image: radial-gradient(rgba(20, 35, 61, 0.06) 1.5px, transparent 2px);
  background-size: 22px 22px;
  padding: 32px;
}
.auth-box { width: 100%; max-width: 400px; }
.auth-card {
  background: var(--paper-pure); border: 1px solid var(--line);
  border-radius: 22px; padding: 36px;
}

/* ===== Public site ===== */
.site-nav-shell {
  background: var(--paper-pure); border-bottom: 1px solid var(--line);
  padding: 18px 48px;
  display: flex; align-items: center; justify-content: space-between;
}
.site-hero {
  padding: 110px 48px 80px;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid var(--ink-2);
  position: relative; overflow: hidden;
}
.site-hero::after {
  content: ''; position: absolute; bottom: -160px; right: -160px; width: 480px; height: 480px;
  background: radial-gradient(circle at 30% 30%, rgba(255, 90, 60, 0.55), transparent 62%);
  filter: blur(10px); pointer-events: none;
}
.site-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(247, 242, 233, 0.10) 1.5px, transparent 2px);
  background-size: 26px 26px; opacity: 0.45; pointer-events: none;
}
.site-hero-inner {
  position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: center;
}
.site-pill {
  display: inline-block; padding: 8px 16px;
  background: rgba(247, 242, 233, 0.10);
  border: 1px solid rgba(247, 242, 233, 0.25);
  color: rgba(247, 242, 233, 0.85);
  border-radius: 999px;
  font-size: 11px; font-weight: 700; margin-bottom: 22px;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.site-h1 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(48px, 7vw, 88px); line-height: 0.95; letter-spacing: -0.04em;
  font-weight: 800; margin-bottom: 22px; color: var(--paper);
}
.site-h1 .accent { color: var(--coral); font-style: normal; }
.site-lede {
  font-size: 18px; color: rgba(247, 242, 233, 0.72); margin-bottom: 32px;
  max-width: 480px; line-height: 1.55;
}
.site-form-card {
  background: var(--paper-pure); border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 22px; padding: 28px;
  box-shadow: 0 24px 48px -28px rgba(20, 35, 61, 0.45);
}
.site-features {
  padding: 88px 48px; max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.site-feat {
  background: var(--paper-pure); border: 1px solid var(--line);
  border-radius: 20px; padding: 30px;
}
.site-feat-ic {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--coral-soft); color: var(--coral);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.site-feat-ic svg { display: block; stroke-width: 1.8; }
.site-feat-t {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700; font-size: 18px; margin-bottom: 8px; color: var(--ink);
  letter-spacing: -0.01em;
}
.site-feat-p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }
.site-social {
  text-align: center; padding: 56px 24px;
  background: var(--paper-pure);
  border-top: 1px solid var(--line);
}
.site-social .label {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700; margin-bottom: 14px;
}
.site-social .clients {
  color: var(--ink-soft); font-size: 14px; max-width: 880px; margin: 0 auto;
  line-height: 1.9;
}
.site-foot {
  padding: 32px 48px; border-top: 1px solid var(--line);
  background: var(--ink); color: rgba(247, 242, 233, 0.7);
  display: flex; justify-content: space-between; font-size: 13px;
}
.site-foot b { color: var(--paper); }

/* ===== Kanban ===== */
.kanban-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.kanban-col {
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  padding: 14px; min-height: 500px;
}
.kanban-col-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.kanban-col-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em;
  font-weight: 800; color: var(--ink);
}
.kanban-col-count {
  font-size: 11px; font-weight: 700; color: var(--ink-soft);
  background: var(--paper-pure); border: 1px solid var(--line);
  padding: 2px 9px; border-radius: 999px;
}
.kcard {
  background: var(--paper-pure); border: 1px solid var(--line); border-radius: 12px;
  padding: 13px; margin-bottom: 8px; cursor: grab;
  transition: transform 0.12s, box-shadow 0.12s;
}
.kcard:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(20, 35, 61, 0.09); }
.kcard.late { border-color: var(--coral); box-shadow: 0 0 0 1px rgba(255, 90, 60, 0.25); }
.kcard.urgent { border-color: rgba(255, 194, 75, 0.6); }
.kcard-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.kcard-id { font-family: 'Bricolage Grotesque', sans-serif; font-size: 11px; font-weight: 800; color: var(--ink); }
.kcard-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.kcard-meta { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
.kcard-foot { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--coral);
  color: white; display: grid; place-items: center;
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
  border: 2px solid var(--paper-pure);
  font-family: 'Bricolage Grotesque', sans-serif;
}
.avatar-stack { display: flex; }
.avatar-stack .avatar:not(:first-child) { margin-left: -8px; }

/* ===== Artwork preview tile ===== */
.mockup-tile {
  background: var(--ink);
  border-radius: 18px; padding: 56px 24px;
  display: grid; place-items: center;
  min-height: 380px; position: relative; overflow: hidden;
}
.mockup-tile::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(247, 242, 233, 0.10) 1.5px, transparent 2px);
  background-size: 22px 22px; opacity: 0.4; pointer-events: none;
}
.mockup-tee {
  width: 240px; height: 240px; background: white;
  border-radius: 50% 50% 14px 14px / 30% 30% 14px 14px;
  position: relative; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  display: grid; place-items: center;
  z-index: 1;
}
.mockup-tee::before, .mockup-tee::after {
  content: ''; position: absolute; top: -16px; width: 40px; height: 56px;
  background: white; border-radius: 22px;
}
.mockup-tee::before { left: -20px; transform: rotate(-30deg); }
.mockup-tee::after { right: -20px; transform: rotate(30deg); }
.tee-art {
  background: var(--ink); color: white;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: 22px; letter-spacing: 0.18em;
  padding: 24px 22px; border-radius: 4px;
  text-align: center; line-height: 1.1;
  border: 3px solid var(--coral);
}
.tee-art .accent { color: var(--coral); display: block; font-size: 13px; letter-spacing: 0.3em; margin-top: 6px; }

/* ===== Version chips ===== */
.versions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.version-chip {
  padding: 6px 12px; border-radius: 10px; font-size: 11.5px; font-weight: 600;
  border: 1px solid var(--line); color: var(--ink-soft);
}
.version-chip.current { background: var(--coral-soft); border-color: var(--coral); color: var(--coral-deep); }

/* ===== Portal nav cart count ===== */
.portal-nav .nav-count {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px;
  border-radius: 999px; background: var(--coral); color: white;
  font-size: 10px; font-weight: 700;
}

/* ===== Catalogue add-to-cart ===== */
.prod-add {
  display: flex; gap: 6px; align-items: center;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft);
}
.prod-add select { flex: 1; min-width: 0; padding: 7px 10px; font-size: 12.5px; border-radius: 10px; }
.prod-add input[type=number] { width: 56px; padding: 7px 8px; font-size: 12.5px; border-radius: 10px; text-align: center; }

/* ===== Pagination =====
   Styles the framework paginator markup ({{ $items->links() }}) to match
   the portal look. The first inner div is the small-screen duplicate of
   the controls, so it stays hidden. */
.portal-shell nav[role=navigation] > div:first-child { display: none; }
.portal-shell nav[role=navigation] > div:last-child {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.portal-shell nav[role=navigation] p { font-size: 13px; color: var(--ink-soft); }
.portal-shell nav[role=navigation] > div:last-child > div:last-child > span { display: inline-flex; gap: 6px; }
.portal-shell nav[role=navigation] a,
.portal-shell nav[role=navigation] span[aria-disabled=true] > span,
.portal-shell nav[role=navigation] span[aria-current=page] > span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 10px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--paper-pure);
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
}
.portal-shell nav[role=navigation] a:hover { border-color: var(--ink); color: var(--ink); }
.portal-shell nav[role=navigation] span[aria-disabled=true] > span { opacity: 0.5; cursor: not-allowed; }
.portal-shell nav[role=navigation] span[aria-current=page] > span {
  background: var(--coral); border-color: var(--coral); color: white;
}
.portal-shell nav[role=navigation] svg { width: 16px; height: 16px; }

/* ===== Online designer layout ===== */
.designer-grid { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.designer-grid svg { max-width: 100%; height: auto; }
.layer-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }

/* ===== Responsive (WP-L) =====
   Two breakpoints. At 900px the two-column grids stack, the catalogue and
   KPI strip drop to two across and the marketing hero goes single column.
   At 640px the portal nav wraps under the logo, inputs and buttons fill the
   width, tables scroll sideways inside their card and everything that was
   still side by side stacks. */
@media (max-width: 900px) {
  .portal-shell { padding: 12px 16px 48px; }
  .grid-2-1, .grid-1-1, .designer-grid { grid-template-columns: 1fr; }
  .kpis, .catalog, .kanban-grid { grid-template-columns: repeat(2, 1fr); }
  .kanban-col { min-height: 0; }
  .welcome { flex-wrap: wrap; }
  .welcome-pill { margin-left: 0; }
  .site-nav-shell, .site-hero, .site-foot { padding-left: 24px; padding-right: 24px; }
  .site-hero { padding-top: 72px; padding-bottom: 56px; }
  .site-hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .site-features { grid-template-columns: 1fr; padding: 56px 24px; }
}

@media (max-width: 640px) {
  .portal-shell { padding: 8px 10px 40px; }
  .portal-top { flex-wrap: wrap; gap: 10px 12px; padding: 12px 14px; }
  .portal-nav { order: 3; width: 100%; flex-wrap: wrap; gap: 2px 14px; margin-left: 0; }
  .portal-nav .n { margin-bottom: 0; padding: 6px 2px; }
  .portal-actions { margin-left: auto; }
  .search-box { min-width: 0; width: 100%; }
  .kpis, .catalog, .kanban-grid { grid-template-columns: 1fr; }
  .card { padding: 16px; }
  .card-head, .row-between { flex-wrap: wrap; gap: 8px; }
  .welcome { padding: 20px; }
  .welcome-title { font-size: 20px; }
  .section-title { font-size: 22px; }
  input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], textarea, select { width: 100%; }
  .btn:not(.btn-sm) { width: 100%; justify-content: center; }
  .portal-actions .btn, .card-head .btn, .prod-add .btn { width: auto; }
  table.pf-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .auth-shell { padding: 16px; }
  .auth-card { padding: 24px; }
  .site-h1 { font-size: 40px; }
  .site-foot { flex-direction: column; gap: 8px; }
  .portal-shell nav[role=navigation] > div:last-child { flex-wrap: wrap; }
}