/* The signed-in application shell.
 *
 * Every rule lives here rather than in a template because the content policy
 * is style-src 'self': a style="" attribute is blocked, silently, the same way
 * an inline script is. Anything that varies - a badge colour, a stat card's
 * icon tint - is a class, never an attribute.
 *
 * The palette is taken from the mockups in docs/context/ui/. */

:root {
  --brand:        #6d5ae6;
  --brand-dark:   #5a48d4;
  --brand-soft:   #efecfd;
  --brand-ink:    #4c3fb5;

  --bg:           #f6f7f9;
  --card:         #ffffff;
  --line:         #e9ebf0;
  --line-soft:    #f1f3f7;

  --ink:          #1a1d26;
  --ink-soft:     #4a5060;
  --muted:        #7b8397;

  --green:        #16a34a;
  --green-soft:   #dcfce7;
  --amber:        #b45309;
  --amber-soft:   #fef3c7;
  --red:          #dc2626;
  --red-soft:     #fee2e2;
  --blue:         #2563eb;
  --blue-soft:    #dbeafe;

  --radius:       12px;
  --radius-sm:    8px;
  --shadow:       0 1px 2px rgba(16, 20, 40, 0.04), 0 1px 3px rgba(16, 20, 40, 0.03);

  --sidebar:      248px;
  --font:         system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }

/* --- shell --------------------------------------------------------------- */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar) 1fr;
  min-height: 100vh;
}

/* A bar that exists only below 900px, where the sidebar is a drawer and
   something has to open it. Switched on in the media query at the end of this
   file, so the desktop shell is untouched. */
.topbar {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar-menu {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink-soft);
  font: inherit;
  font-weight: 550;
  cursor: pointer;
}

.topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-size: 15px;
}

.topbar-brand:hover { text-decoration: none; }
.topbar .brand-mark { width: 30px; height: 30px; border-radius: 9px; }

/* Covers the page while the drawer is open, and closes it when tapped. */
.nav-backdrop { display: none; }

/* --- sidebar ------------------------------------------------------------- */

.sidebar {
  background: var(--card);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 22px 20px 18px;
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, #7c6ef0, #5a48d4);
  display: grid;
  place-items: center;
  color: #fff;
  flex: none;
}

.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text b { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.brand-text span { font-size: 11px; color: var(--muted); }

.nav { padding: 4px 12px 16px; flex: 1; }

.nav-section {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 18px 10px 7px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-weight: 500;
  margin-bottom: 1px;
}

.nav-item:hover { background: var(--line-soft); text-decoration: none; }

.nav-item.is-active {
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-weight: 600;
}

/* Entries for screens this release does not build. Shown, because the shape
 * of the finished system is worth seeing, but never clickable - a link that
 * 404s teaches a client the system is broken. */
.nav-item.is-locked {
  color: #b9bfcd;
  cursor: default;
  pointer-events: none;
}

.nav-item.is-locked:hover { background: none; }

.nav-icon { width: 18px; height: 18px; flex: none; }

.who {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 12px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.who-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-ink);
  display: grid;
  place-items: center;
  font-weight: 650;
  flex: none;
}

.who-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.who-text b { font-size: 13px; font-weight: 600; }
.who-text span { font-size: 11.5px; color: var(--muted); }
.who form { margin-left: auto; }

/* --- main ---------------------------------------------------------------- */

.main { padding: 26px 30px 48px; min-width: 0; }

.page-head {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 22px;
}

.page-title { font-size: 26px; }
.page-sub { color: var(--muted); margin: 5px 0 0; }

.crumbs { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12.5px; margin-top: 6px; }
.crumbs a { color: var(--muted); }

.page-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* --- buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-soft);
  font: inherit;
  font-weight: 550;
  cursor: pointer;
}

.btn:hover { background: var(--line-soft); text-decoration: none; }

.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.btn-primary:hover { background: var(--brand-dark); }

.btn-danger { color: var(--red); border-color: #f3c8c8; }
.btn-danger:hover { background: var(--red-soft); }

.btn-sm { padding: 6px 11px; font-size: 12.5px; }

/* --- cards --------------------------------------------------------------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.card-head h2 { font-size: 15.5px; }
.card-head .spacer { margin-left: auto; }
.card-body { padding: 18px; }

/* --- stat cards ---------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.stat-icon {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex: none;
}

.stat-icon.tint-brand { background: var(--brand-soft); color: var(--brand-ink); }
.stat-icon.tint-green { background: var(--green-soft); color: var(--green); }
.stat-icon.tint-amber { background: var(--amber-soft); color: var(--amber); }
.stat-icon.tint-blue  { background: var(--blue-soft);  color: var(--blue); }
.stat-icon.tint-red   { background: var(--red-soft);   color: var(--red); }

.stat-label { color: var(--muted); font-size: 12.5px; }
.stat-value { font-size: 25px; font-weight: 680; letter-spacing: -0.02em; margin-top: 2px; }
.stat-note { font-size: 12px; color: var(--muted); margin-top: 3px; }

/* --- tables -------------------------------------------------------------- */

.table-wrap { overflow-x: auto; }

table.grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

table.grid th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding: 12px 18px;
  background: #fafbfc;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

table.grid th a { color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
table.grid th a:hover { color: var(--ink); }

table.grid td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}

table.grid tbody tr:last-child td { border-bottom: 0; }
table.grid tbody tr:hover { background: #fbfbfd; }

.cell-name { font-weight: 600; }
.cell-sub { color: var(--muted); font-size: 12.5px; }
.cell-actions { text-align: right; white-space: nowrap; }
.cell-actions form { display: inline; }

.empty {
  padding: 46px 20px;
  text-align: center;
  color: var(--muted);
}

.empty b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 5px; }

/* --- badges -------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.badge-green { background: var(--green-soft); color: var(--green); }
.badge-grey  { background: #eef0f4;           color: var(--muted); }
.badge-amber { background: var(--amber-soft); color: var(--amber); }
.badge-blue  { background: var(--blue-soft);  color: var(--blue); }

/* --- filters ------------------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}

.search {
  position: relative;
  flex: 1 1 260px;
  min-width: 200px;
}

.search svg {
  position: absolute;
  left: 11px;
  top: 50%;
  margin-top: -8px;
  color: var(--muted);
  /* So a tap on the icon lands on the field under it rather than on nothing. */
  pointer-events: none;
}

/* The attribute selector is load-bearing. `.search input` scores the same as
   the `input[type="search"]` rule below, which sets padding with the shorthand
   and so resets every side of it - and being later in the file, it won the tie.
   The icon then sat on top of the placeholder text. */
.search input[type="search"] { padding-left: 34px; }

/* --- forms --------------------------------------------------------------- */

.field { margin-bottom: 16px; }

.field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 5px;
}

.field .hint { font-weight: 400; color: var(--muted); }

input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
select,
textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
  font: inherit;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

textarea { min-height: 96px; resize: vertical; }

.field.has-error input,
.field.has-error textarea { border-color: var(--red); }

.field-error { color: var(--red); font-size: 12.5px; margin-top: 5px; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 18px;
}

.form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 16px 18px;
  border-top: 1px solid var(--line);
  background: #fbfbfd;
  border-radius: 0 0 var(--radius) var(--radius);
}

.form-actions .spacer { margin-left: auto; }

/* --- flash --------------------------------------------------------------- */

.flash {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  border-radius: var(--radius-sm);
  margin-bottom: 18px;
  font-weight: 500;
}

.flash-success { background: var(--green-soft); color: #14532d; }
.flash-error   { background: var(--red-soft);   color: #7f1d1d; }

/* --- pagination ---------------------------------------------------------- */

.pager {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
}

.pager-links { margin-left: auto; display: flex; gap: 6px; }

.pager-links a,
.pager-links span {
  min-width: 32px;
  height: 32px;
  padding: 0 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
}

.pager-links a:hover { background: var(--line-soft); text-decoration: none; }

.pager-links .is-current {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 600;
}

.pager-links .is-disabled { color: #c4c9d4; }

/* --- dashboard ----------------------------------------------------------- */

.columns {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.feed { list-style: none; margin: 0; padding: 0; }

.feed li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-soft);
}

.feed li:last-child { border-bottom: 0; }

.feed-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--brand-soft);
  color: var(--brand-ink);
  display: grid;
  place-items: center;
  flex: none;
}

.feed-body { min-width: 0; }
.feed-body b { display: block; font-weight: 600; }
.feed-body span { color: var(--muted); font-size: 12.5px; }
.feed-when { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }

/* --- public pages -------------------------------------------------------- */

.public {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(900px 420px at 82% -8%, #ece8fe 0%, rgba(246, 247, 249, 0) 62%),
    var(--bg);
}

.public-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 34px;
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
}

.public-head .brand { padding: 0; }
.public-head nav { margin-left: auto; display: flex; gap: 10px; align-items: center; }

.public-main { flex: 1; max-width: 1120px; width: 100%; margin: 0 auto; padding: 0 34px 60px; }

.hero { padding: 54px 0 40px; max-width: 660px; }
.hero h1 { font-size: 42px; line-height: 1.12; letter-spacing: -0.03em; }
.hero p { font-size: 16.5px; color: var(--ink-soft); margin: 16px 0 26px; }
.hero .btn { padding: 11px 20px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 18px;
}

.feature {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}

.feature .stat-icon { margin-bottom: 13px; }
.feature h3 { font-size: 15.5px; margin-bottom: 6px; }
.feature p { margin: 0; color: var(--ink-soft); }

.section-head { margin: 46px 0 18px; }
.section-head h2 { font-size: 21px; }
.section-head p { color: var(--muted); margin: 6px 0 0; }

.public-foot {
  border-top: 1px solid var(--line);
  padding: 20px 34px;
  color: var(--muted);
  font-size: 12.5px;
}

.public-foot div { max-width: 1120px; margin: 0 auto; }

/* --- sign in ------------------------------------------------------------- */

.signin-wrap {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 30px 20px 70px;
}

.signin {
  width: 100%;
  max-width: 396px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(20, 24, 50, 0.07);
  padding: 30px;
}

.signin h1 { font-size: 22px; }
.signin .lead { color: var(--muted); margin: 6px 0 22px; }
.signin .btn { width: 100%; justify-content: center; padding: 11px; }
.signin-foot { text-align: center; color: var(--muted); font-size: 12.5px; margin-top: 18px; }

/* --- utilities ----------------------------------------------------------- */

.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- narrow screens ------------------------------------------------------ */

/* Below 900px the sidebar slides in over the page instead of sitting beside
   it. It used to stack above the content, which technically fitted but meant
   scrolling past the whole navigation tree on every single screen. */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }

  .topbar { display: flex; }

  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    width: min(290px, 84vw);
    height: 100%;
    box-shadow: 0 10px 40px rgba(16, 20, 40, 0.18);
    transform: translateX(-101%);
    transition: transform 0.18s ease;
  }

  .shell.is-nav-open .sidebar { transform: translateX(0); }

  .shell.is-nav-open .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(16, 20, 40, 0.38);
  }

  .columns { grid-template-columns: 1fr; }
  .main { padding: 20px 20px 40px; }

  /* The actions belong under the title once there is no room beside it. */
  .page-head { flex-direction: column; gap: 12px; }
  .page-actions { margin-left: 0; flex-wrap: wrap; }
}

/* A phone. What was a row becomes a column, and the padding stops competing
   with the content for the width. */
@media (max-width: 560px) {
  .main { padding: 14px 14px 36px; }

  .page-title { font-size: 21px; }

  .stats { grid-template-columns: 1fr; gap: 12px; }

  .card-head { flex-wrap: wrap; gap: 8px; }
  .card-head .spacer { margin-left: 0; width: 100%; height: 0; }

  .filters { padding: 12px 14px; }
  .search { flex: 1 1 100%; }

  /* A button that is one of three on a row 330px wide is not a target anybody
     can hit. They get a line each instead. */
  .page-actions .btn,
  .filters .btn { flex: 1 1 auto; justify-content: center; }

  .card-body { padding: 14px; }

  .pager { flex-wrap: wrap; gap: 8px; }
}

/* Somebody who has asked their system not to animate is not asking for an
   exception here. */
@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

/* --- added with the catalogue and stock screens -------------------------- */

/* A quiet label for the location a screen is looking at. v1 has one, so it
   reads as context rather than as a control. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 550;
}

/* Vertical stacking inside a dashboard column. */
.stack { display: grid; gap: 20px; align-content: start; }

.card-head h2 { display: inline-flex; align-items: center; gap: 8px; }

th.right, td.right { text-align: right; }

.mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
}

/* A quantity. Tabular figures so a column of them lines up on the decimal
   point, which is what makes a running total checkable by eye. */
.figure {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.figure.is-good { color: var(--green); }
.figure.is-warn { color: var(--amber); }
.figure.is-bad  { color: var(--red); }

a.figure:hover { text-decoration: underline; }

.stat-value .unit {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}

.feed-mark.tint-amber { background: var(--amber-soft); color: var(--amber); }
.feed-mark.tint-red   { background: var(--red-soft);   color: var(--red); }

.feed-when { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.feed-when b { font-size: 13.5px; }

.card-head input[type="date"] {
  width: auto;
  padding: 6px 10px;
  font-size: 12.5px;
}

.pager span { display: inline-flex; align-items: center; gap: 6px; }

/* --- the order desk ------------------------------------------------------ */

.lookup { position: relative; }

.lookup-results {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  margin: 4px 0 0;
  padding: 4px;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(16, 20, 40, 0.10);
  max-height: 280px;
  overflow-y: auto;
}

.lookup-hit {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}

.lookup-hit:hover,
.lookup-hit:focus { background: var(--brand-soft); }
.lookup-hit b { display: block; font-weight: 600; }
.lookup-hit span { color: var(--muted); font-size: 12.5px; }

.inline-edit {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.inline-edit input { width: auto; }

.totals {
  border-top: 1px solid var(--line);
  padding: 14px 18px;
  display: grid;
  gap: 6px;
  justify-items: stretch;
}

.totals div { display: flex; justify-content: space-between; gap: 24px; }
.totals span { color: var(--muted); }

.totals .is-grand {
  border-top: 1px solid var(--line-soft);
  padding-top: 8px;
  margin-top: 2px;
  font-size: 15px;
}

.totals .is-grand span { color: var(--ink); font-weight: 600; }

/* The permission under a transition button sits outside a .field, so it needs
   the muted treatment in its own right. */
.card-body > .hint { margin: -6px 0 16px; color: var(--muted); font-size: 12.5px; }