/* ==========================================================================
   schum ai design system (inherited unchanged from Audiovision AI; only --ai-blue differs)
   One visual language for every page. Every value below is taken from the
   platform home page (Marc's stone dashboard mockup), which is the reference:
   matte stone surfaces, a fine grain, shallow raised relief, soft highlights,
   one dark stone for the active / primary element, restrained palette.
   Loaded after app.css (it aligns the older theme) and before page styles.
   ========================================================================== */
:root{
  /* Palette (home page values) */
  --bg-stone:#f4f3f1;          /* page */
  --card-stone:#e7e5e1;        /* surfaces, controls */
  --purple-stone:#4b4648;      /* the one dark stone: active card, primary action */
  --purple-text:#f0ece8;       /* text on the dark stone */
  --purple-muted:#cbbccf;      /* secondary text on the dark stone */
  --pill-dark:#514b4d;         /* small pill on the dark stone */
  --stone-text:#33312e;        /* primary text */
  --stone-muted:#75716b;       /* secondary text, metadata */
  --ai-blue:#2c5fb0;           /* third colour: the superscript "ai" (blue for schum ai, was violet #5f37ae); used sparingly for accents */
  --logo-violet:var(--ai-blue);
  /* Semantic (only where meaning requires it) */
  --warn-text:#8a5d12;
  --danger-text:#8a3b2c;

  /* Material */
  --grain:url("brand/stone-grain.27f04a93112e.svg");
  --grain-light:url("brand/stone-grain-light.4d3a78252384.svg");
  --edge:rgba(255,255,255,.62);
  --hairline:rgba(117,113,107,.18);
  --radius-surface:18px;
  --radius-control:14px;
  --radius-pill:20px;
  --shadow-surface:5px 7px 13px rgba(116,111,104,.34), -3px -3px 9px rgba(255,255,255,.88),
                   inset 1px 1px 1px rgba(255,255,255,.78), inset -1px -1px 1px rgba(118,112,105,.16);
  --shadow-surface-hover:6px 9px 16px rgba(116,111,104,.38), -3px -3px 9px rgba(255,255,255,.9),
                   inset 1px 1px 1px rgba(255,255,255,.78), inset -1px -1px 1px rgba(118,112,105,.16);
  --shadow-dark:6px 8px 15px rgba(60,55,56,.42), -3px -3px 9px rgba(255,255,255,.72),
                inset 1px 1px 1px rgba(255,255,255,.15), inset -1px -1px 1px rgba(0,0,0,.35);
  --shadow-control:3px 3px 6px rgba(132,127,120,.42), -3px -3px 6px rgba(255,255,255,.92);
  --shadow-control-dark:2px 3px 6px rgba(0,0,0,.38), -1px -1px 3px rgba(255,255,255,.13), inset 1px 1px 1px rgba(255,255,255,.10);
  --shadow-well:inset 2px 2px 4px rgba(132,127,120,.42), inset -2px -2px 4px rgba(255,255,255,.92);
  --engrave:1px 1px 0 rgba(255,255,255,.7);

  /* The older theme's variables, now pointing at the same palette */
  --paper:var(--bg-stone); --card:var(--card-stone); --soft:var(--card-stone);
  --ink:var(--stone-text); --muted:var(--stone-muted); --accent:var(--purple-stone);
  --line:var(--hairline);
  --stone-dark:rgba(116,111,104,.34); --stone-light:rgba(255,255,255,.88);
}

/* Page */
body{
  background-color:var(--bg-stone);
  background-image:radial-gradient(circle at 20% 15%, rgba(255,255,255,.8), transparent 34%),
                   linear-gradient(135deg,#f7f6f4 0%,#efeeeb 100%);
  background-attachment:fixed;
  color:var(--stone-text);
}
header, .module-nav, footer{ background:transparent; border-color:transparent; box-shadow:none; }
a{ color:var(--stone-text); }
h1, h2, h3{ color:var(--stone-text); text-shadow:var(--engrave); }
p, .small, small{ color:var(--stone-muted); }
.eyebrow{ color:var(--stone-muted); text-shadow:none; }
.mainnav a, .module-nav a, nav a{ color:var(--stone-muted); }
.mainnav a[aria-current], .module-nav a[aria-current]{ color:var(--stone-text); text-decoration-color:var(--stone-text); }
.module-nav strong{ color:var(--stone-text); }

/* Surface: every card, panel and grouped area */
.surface, .card, .stat-strip a, .stat-strip > div, .statistics, .product-tile, .review-bulk,
.capture-card, .avai-chat, .cap-review-card, .unassigned-photo{
  background-color:var(--card-stone);
  background-image:var(--grain), linear-gradient(135deg, rgba(255,255,255,.22), rgba(120,114,106,.04));
  background-size:160px 160px, 100% 100%;
  border:1px solid var(--edge);
  border-radius:var(--radius-surface);
  box-shadow:var(--shadow-surface);
  color:var(--stone-text);
}
.card::before{ content:none; }
a.surface:hover, .stat-strip a:hover, a.product-tile:hover, .capture-card:hover{
  box-shadow:var(--shadow-surface-hover); filter:none;
}
.surface-dark{ background-color:var(--purple-stone); background-image:var(--grain-light), linear-gradient(135deg, rgba(255,255,255,.035), rgba(0,0,0,.055));
  background-size:160px 160px, 100% 100%; color:var(--purple-text); border-color:rgba(255,255,255,.08); box-shadow:var(--shadow-dark); }

/* Controls: raised, matte, gently rounded */
button, .button{
  font-family:inherit; font-weight:600;
  background:var(--card-stone); color:var(--stone-text);
  border:1px solid var(--edge); border-radius:var(--radius-control);
  box-shadow:var(--shadow-control);
  text-shadow:none; transition:box-shadow .15s ease, transform .15s ease;
}
button:hover, .button:hover{ background:var(--card-stone); filter:none; box-shadow:4px 5px 9px rgba(132,127,120,.46), -3px -3px 6px rgba(255,255,255,.92); }
button:active, .button:active{ box-shadow:var(--shadow-well); transform:translateY(1px); }
button.primary, .button.primary{
  background:var(--purple-stone); color:var(--purple-text); border-color:rgba(255,255,255,.08); border-radius:var(--radius-control);
  box-shadow:var(--shadow-control-dark);
}
button.primary:hover, .button.primary:hover{ background:var(--purple-stone); box-shadow:3px 4px 8px rgba(0,0,0,.42), -1px -1px 3px rgba(255,255,255,.13), inset 1px 1px 1px rgba(255,255,255,.10); }
.text-button, button.text-button{ background:none; border:0; box-shadow:none; color:var(--stone-text); text-decoration:underline; text-underline-offset:3px; }
.text-button:hover{ background:none; box-shadow:none; }
.danger, button.danger, .button.danger, .text-button.danger{ color:var(--danger-text); }
button:disabled, .button[aria-disabled="true"]{ opacity:.45; box-shadow:none; }
a:focus-visible, button:focus-visible, .button:focus-visible{ outline:2px solid var(--stone-muted); outline-offset:3px; }

/* Fields: a soft well in the surface */
input, textarea, select{
  font-family:inherit; color:var(--stone-text);
  background:var(--bg-stone); border:1px solid var(--hairline); border-radius:var(--radius-control);
  box-shadow:var(--shadow-well);
}
input::placeholder, textarea::placeholder{ color:var(--stone-muted); opacity:.8; }
input:focus, textarea:focus, select:focus{ outline:2px solid rgba(75,70,72,.35); outline-offset:1px; }
input[type=checkbox], input[type=radio]{ accent-color:var(--purple-stone); box-shadow:none; }
input[type=file]{ box-shadow:none; background:transparent; border:0; }

/* Pills */
.badge{ background:var(--card-stone); color:var(--stone-muted); border-radius:var(--radius-pill);
  box-shadow:var(--shadow-control); text-shadow:none; }
.badge.ready, .badge.exported{ background:var(--purple-stone); color:var(--purple-text); box-shadow:var(--shadow-control-dark); }

/* Notices: flat panels in the same material; colour only where it carries meaning */
.notice{ background-color:var(--card-stone); background-image:var(--grain); background-size:160px 160px;
  border:1px solid var(--edge); border-radius:var(--radius-surface); box-shadow:var(--shadow-control); color:var(--stone-text); }
.notice.warn{ color:var(--warn-text); }
.notice.error, .errorlist{ color:var(--danger-text); background-color:var(--card-stone); }
.notice.success{ color:var(--stone-text); }

/* Tables inside surfaces */
th{ color:var(--stone-muted); }
td{ border-top:1px solid var(--hairline); }
.record, .history, hr, .save-bar, .upload{ border-color:var(--hairline); }

/* Old decorative leftovers removed */
.drop-zone{ background:var(--bg-stone); border:2px dashed var(--hairline); border-radius:var(--radius-surface); }
.ai-card{ background-color:var(--card-stone); }
.gallery img{ background:var(--bg-stone); border-color:var(--hairline); border-radius:12px; }
.corrected, .warn-text{ color:var(--warn-text) !important; }

/* Sections: spacing, no rules or tinted boxes between them */
.dashboard-section, .dashboard-section.attention{ background:none; border:0; border-radius:0; box-shadow:none; padding:0; margin:0 0 36px; }
.dashboard-section .section-heading{ margin-bottom:14px; }

/* Issue: one thing that needs a person's attention, as its own surface */
.issue-list{ display:flex; flex-direction:column; gap:16px; }
.issue{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px 24px; }
.issue-body{ display:flex; flex-direction:column; gap:3px; min-width:0; text-decoration:none; color:var(--stone-text); }
.issue-title{ font-size:18px; font-weight:600; text-shadow:var(--engrave); }
.issue-meta{ font-size:12px; color:var(--stone-muted); }
.issue-reason{ font-size:14px; color:var(--stone-text); margin-top:4px; }
.issue-action{ flex:none; }
.issue-action form{ margin:0; }
.issue-action .button, .issue-action button{ min-height:44px; padding:10px 20px; }
@media (max-width:640px){
  .issue{ flex-direction:column; align-items:stretch; gap:14px; padding:18px; }
  .issue-action .button, .issue-action button{ width:100%; text-align:center; }
}

/* Utilities */
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.js .nojs-only{ display:none; }

/* Search field: one obvious field, a soft well, generous touch target */
.search-field, .pick-search input[type=search]{
  width:100%; min-height:52px; margin:0; padding:0 18px 0 46px; font-size:16px;
  background-color:var(--bg-stone);
  background-image:url("brand/search.f8d2326840ca.svg");
  background-repeat:no-repeat; background-position:16px center;
  border:1px solid var(--hairline); border-radius:var(--radius-pill); box-shadow:var(--shadow-well);
}
.pick-search{ display:flex; gap:10px; margin-bottom:14px; }

/* Photo reassignment results: compact rows, enough to identify the product */
.move-layout{ display:grid; grid-template-columns:minmax(220px,300px) 1fr; gap:26px; align-items:start; }
.move-photo{ padding:14px; }
.move-photo img{ width:100%; max-height:420px; object-fit:contain; background:var(--bg-stone); border-radius:12px; }
.move-photo .stack{ display:flex; flex-direction:column; gap:8px; }
.pick-count{ margin:0 0 10px; font-size:13px; }
.pick-list{ display:flex; flex-direction:column; gap:10px; }
.pick-row-form{ margin:0; }
.pick-row{ display:flex; align-items:center; gap:14px; width:100%; min-height:72px; padding:8px 16px 8px 8px; text-align:left;
  background-color:var(--card-stone); background-image:var(--grain); background-size:160px 160px;
  border:1px solid var(--edge); border-radius:var(--radius-surface); box-shadow:var(--shadow-control); text-transform:none; }
.pick-row:hover{ box-shadow:4px 5px 9px rgba(132,127,120,.46), -3px -3px 6px rgba(255,255,255,.92); }
.pick-row img, .pick-noimg{ flex:none; width:56px; height:56px; border-radius:12px; object-fit:cover; background:var(--bg-stone); }
.pick-noimg{ display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--stone-muted); }
.pick-id{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.pick-id strong{ font-size:15px; font-weight:600; color:var(--stone-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pick-meta{ display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12px; font-weight:400; color:var(--stone-muted); }
.pick-inv{ font-weight:700; color:var(--stone-text); }
.pick-go{ flex:none; font-size:12px; color:var(--stone-muted); text-transform:lowercase; }
@media (max-width:760px){
  .move-layout{ grid-template-columns:1fr; }
  .pick-go{ display:none; }
}

/* Progress: the dark stone, no gradient */
.work-bar span, progress.batch-progress::-webkit-progress-value{ background:var(--purple-stone); }
progress.batch-progress::-moz-progress-bar{ background:var(--purple-stone); }
.work-bar, progress.batch-progress{ background:var(--bg-stone); box-shadow:var(--shadow-well); }

/* ==========================================================================
   Lowercase interface (Marc, permanent rule): all interface text is lowercase.
   Only real data keeps its case: product names, manufacturer, model, inventory
   and serial numbers, categories, people's names, what users type, and Avai's
   answers (they quote data). Mark data with .asis.
   ========================================================================== */
body{ text-transform:lowercase; }
.asis, .asis *, input, textarea, select, option, code, pre, .uuid,
.avai-text, .avai-message.is-user, .avai-proposal-list a, .avai-sources a{ text-transform:none !important; }

/* Third colour: the "ai" blue, used sparingly for accents that help orientation */
.mainnav a[aria-current], .module-nav a[aria-current]{ text-decoration-color:var(--ai-blue); text-decoration-thickness:2px; }
a:focus-visible, button:focus-visible, .button:focus-visible, input:focus, textarea:focus, select:focus{ outline-color:var(--ai-blue); }
input[type=checkbox], input[type=radio]{ accent-color:var(--ai-blue); }
.count, .cap-top-btn b, .pick-inv, .issue-count{ color:var(--ai-blue); }
.cap-top-btn b{ background:var(--ai-blue); color:#fff; }
.status-pill::after{ background:var(--ai-blue); box-shadow:0 0 0 2px rgba(255,255,255,.15); }
.work-bar span, progress.batch-progress::-webkit-progress-value{ background:var(--ai-blue); }
progress.batch-progress::-moz-progress-bar{ background:var(--ai-blue); }
.pick-meta span:last-child:not(.asis):not(.pick-inv){ color:var(--ai-blue); }

/* Embossed line icons (same treatment as the home page module icons) */
.icon-emboss{ display:inline-flex; align-items:center; justify-content:center; flex:none; color:#d8d6d1;
  filter:drop-shadow(-2px -2px 1px rgba(255,255,255,.96)) drop-shadow(2px 3px 2px rgba(116,110,103,.58)); }
.icon-emboss svg{ width:100%; height:100%; overflow:visible; }
.icon-emboss.icon-lg{ width:72px; height:72px; } .icon-emboss.icon-lg svg{ width:58px; height:58px; stroke-width:2.35; }
.icon-emboss.icon-md{ width:44px; height:44px; } .icon-emboss.icon-md svg{ width:36px; height:36px; stroke-width:2.2; }
.icon-emboss.icon-sm{ width:28px; height:28px; } .icon-emboss.icon-sm svg{ width:24px; height:24px; stroke-width:2; }
.surface-dark .icon-emboss, .purple .icon-emboss{ color:#5a5456; filter:drop-shadow(-2px -2px 1px rgba(255,255,255,.27)) drop-shadow(2px 3px 2px rgba(0,0,0,.58)); }
.heading-with-icon{ display:flex; align-items:center; gap:16px; }
.stat-tile{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.issue{ gap:20px; }
.issue > .icon-emboss{ align-self:center; }

.page-heading .icon-emboss{ display:flex; margin-bottom:6px; }
.stat-strip a.stat-tile{ display:flex; }
.issue .issue-body{ flex:1; }
@media (max-width:640px){ .issue > .icon-emboss{ display:none; } }
/* Icons keep the home page stone colour wherever they sit (some older rules colour every span). */
.stat-strip .icon-emboss, .issue .icon-emboss, .page-heading .icon-emboss, .heading-with-icon .icon-emboss{ color:#d8d6d1; }

/* More of the "ai" blue, always with a meaning: labels that orient, links and statuses. */
.eyebrow{ color:var(--ai-blue); }
.module-link span, .back, a:hover, .text-button:hover{ color:var(--ai-blue); }
.badge.ready, .review-status .badge.ready{ background:var(--ai-blue); color:#fff; box-shadow:var(--shadow-control-dark); }
.badge.exported{ background:#3a1f78; color:#fff; box-shadow:var(--shadow-control-dark); }
.issue-title, .stat-strip strong{ color:var(--stone-text); }
.stat-strip a:hover strong{ color:var(--ai-blue); }
.section-heading a{ color:var(--ai-blue); }

/* Older Safari (before iOS 14.5, e.g. older iPad mini) ignores `gap` in flex layouts, so the
   menus ran together ("homeinventory ai"). Space the header and module menus with margins,
   which every browser understands. */
.mainnav, .module-nav, .account{ gap:0; }
.mainnav > *, .module-nav > *{ margin-right:22px; }
.module-nav strong{ margin-right:34px; }
.account > * + *{ margin-left:18px; }
@media (max-width:760px){
  .mainnav > *{ margin-right:18px; }
  .module-nav > *{ margin-right:16px; }
  .account > * + *{ margin-left:10px; }
}
/* Tablet widths (iPad mini portrait is 768px): the menu gets its own row under the logo
   instead of wrapping into a tall block that the fixed header height cuts off. */
@media (min-width:761px) and (max-width:1100px){
  header{ height:auto; min-height:82px; flex-wrap:wrap; padding-top:14px; padding-bottom:10px; }
  .mainnav{ order:3; flex:0 0 100%; width:100%; margin:8px 0 0; flex-wrap:wrap; }
  .mainnav > *{ margin-bottom:6px; }
}

/* product page: save and validate stacked, previous / next below */
.action-stack { margin-bottom:.6rem; }
.product-nav { display:flex; gap:.5rem; margin-top:.8rem; }
.product-nav .button { flex:1; text-align:center; }
.product-nav .button[aria-disabled="true"] { opacity:.45; pointer-events:none; }

/* products list: the column title is a drop down choosing what the column shows */
th.col-picker select { display:block; font:inherit; font-weight:600; max-width:11rem; padding:.15rem .4rem; margin:0; }

/* review page: everything on a bar sits on the same line, with the same size and font */
.review-filters input, .review-filters select, .review-filters label, .bulk-controls select, .bulk-controls label{ margin-bottom:0; }
.review-filters button, .review-filters .button, .bulk-controls button{ height:40px; font-size:13px; padding:0 18px; }

/* review table, status column: the pill and the two buttons are boxes of the same size */
.status-actions{ display:flex; flex-direction:column; gap:6px; width:132px; }
.review-status .status-actions .badge, .review-status .status-actions .button, .review-status .status-actions button{
  box-sizing:border-box; width:100%; height:34px; min-height:34px; margin:0; padding:0 10px;
  display:flex; align-items:center; justify-content:center; font-size:13px; line-height:1.2; }
.review-status .status-actions .small{ text-align:center; }
.review-status > .status-actions{ margin:0; }
.review-status .badge{ margin:0; }
.batch-status.notice{ text-align:left; align-items:flex-start; }
.batch-status.notice p{ margin-top:0; }