/* Indeco Ops, styled like indecony.com (Doron, 2026-10-29: "Redo the CRM styling to match the website"): Jost throughout,
   near-black ink, warm cream surfaces, gold letterspaced eyebrows, pill buttons, and type a size larger than the old
   Cardo/Poppins look, because the team finds small, thin type hard to read. Same tokens as the store emails and account page. */
:root {
  --gold: #A47D2D;          /* the brand gold: logo, rules, bars */
  --gold-deep: #8A6620;     /* gold for text, as in the emails */
  --gold-tint: #F4F2EE;     /* cream: cards, panels, inputs on hover */
  --ink: #15140F;           /* the website's button and heading black */
  --body: #3A3832;
  --muted: #6D6A61;
  --rule: #E2DED6;
  --paper: #FFFFFF;
  --good: #3f6b4a;
  --warn: #8B0000;
  --font: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: var(--font);     /* kept for older page styles that ask for it */
  --radius: 37px;           /* indecony.com's pill buttons */
  --btn-hover: #3A3832;
  --row-hover: #FAF9F6;
  --error-bg: #f8eeea;
  --input-rule: #CFCAC0;
  --shadow: rgba(21,20,15,.10);
  --logo-filter: none;
  color-scheme: light;
}
/* Dark mode (Doron, 2026-10-29): follows the computer's setting unless the header switch picks one. The website's ink
   becomes the page, cream becomes the text, and gold stays gold. Printed documents keep their own light styles. */
:root[data-theme="dark"] {
  --gold: #C9A45A; --gold-deep: #D4B06A; --gold-tint: #22201A; --ink: #F4F2EE; --body: #D8D4CA; --muted: #A39E92;
  --rule: #34312A; --paper: #15140F; --good: #8DBF98; --warn: #EE8A7E; --btn-hover: #D8D4CA; --row-hover: #1C1A15;
  --error-bg: #2E1B18; --input-rule: #4A463D; --shadow: rgba(0,0,0,.45); --logo-filter: invert(1) hue-rotate(180deg) brightness(1.15);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --gold: #C9A45A; --gold-deep: #D4B06A; --gold-tint: #22201A; --ink: #F4F2EE; --body: #D8D4CA; --muted: #A39E92;
    --rule: #34312A; --paper: #15140F; --good: #8DBF98; --warn: #EE8A7E; --btn-hover: #D8D4CA; --row-hover: #1C1A15;
    --error-bg: #2E1B18; --input-rule: #4A463D; --shadow: rgba(0,0,0,.45); --logo-filter: invert(1) hue-rotate(180deg) brightness(1.15);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--body); font-family: var(--font); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--gold-deep); text-decoration: none; } a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
h1 { font: 400 40px/1.15 var(--font); color: var(--ink); letter-spacing: -0.005em; margin: 6px 0 6px; }
h2 { font-weight: 500; font-size: 22px; color: var(--ink); margin: 0 0 14px; }
h3 { font-weight: 500; font-size: 18px; color: var(--ink); margin: 0 0 8px; }
p { margin: 0 0 10px; color: var(--body); }
.sub { color: var(--muted); font-size: 17px; margin-bottom: 24px; }

/* Header: logo left like the website's, a gold eyebrow, nav in the website's plain uppercase. */
.top { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 18px 36px; border-bottom: 1px solid var(--rule); background: var(--paper); position: relative; }
.brand img { height: 32px; display: block; filter: var(--logo-filter); }
.brand-sub { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-deep); font-weight: 500;
  padding-left: 16px; border-left: 1px solid var(--rule); }
.top nav { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.top nav a { white-space: nowrap; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); font-weight: 400;
  padding: 8px 12px; border-bottom: 1px solid transparent; }
.top nav a:hover { color: var(--gold-deep); text-decoration: none; }
.top nav a.on { border-bottom-color: var(--ink); }
/* Menu headers with dropdowns. */
.top nav details.menu { position: relative; }
.top nav details.menu > summary { list-style: none; cursor: pointer; white-space: nowrap; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); font-weight: 400; padding: 8px 12px; border-bottom: 1px solid transparent; }
.top nav details.menu > summary::-webkit-details-marker { display: none; }
.top nav details.menu > summary::after { content: '\25BE'; margin-left: 6px; font-size: 11px; color: var(--gold); }
.top nav details.menu > summary:hover { color: var(--gold-deep); }
.top nav details.menu.on > summary { border-bottom-color: var(--ink); }
.top nav .menu-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 200px; background: var(--paper);
  border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 12px 32px var(--shadow); padding: 8px 0; display: flex; flex-direction: column; overflow: hidden; }
.top nav .menu-list a { padding: 10px 18px; border-bottom: 0; text-transform: none; letter-spacing: 0; font-size: 16px; }
.top nav .menu-list a:hover { background: var(--gold-tint); }
.top nav .menu-list a.on { background: var(--gold-tint); box-shadow: inset 3px 0 0 var(--gold); }
.top .who { display: flex; gap: 12px; align-items: center; font-size: 14px; padding-left: 16px; border-left: 1px solid var(--rule); }
.top .who a { color: var(--muted); }
.theme-switch { background: none; border: 1px solid var(--rule); color: var(--muted); padding: 4px 10px; font-size: 13px; border-radius: var(--radius); }
.theme-switch:hover { background: var(--gold-tint); border-color: var(--rule); color: var(--ink); }

main { max-width: 1240px; margin: 0 auto; padding: 40px 36px 56px; }
.foot { display: flex; align-items: center; gap: 14px; justify-content: center; max-width: 1240px; margin: 0 auto 28px;
  padding: 0 36px; font-size: 12px; letter-spacing: 0.3em; color: var(--gold-deep); font-weight: 500; }
.foot span { flex: 1; height: 1px; background: var(--rule); }

/* The gold eyebrow over each page title, as on indecony.com ("FOR JEWELERS"). */
.label { display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 500; margin-bottom: 6px; }
.label .rule { width: 28px; height: 1px; background: var(--gold); }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.page-head .actions { display: flex; gap: 10px; flex-wrap: wrap; }

section.block { padding-top: 22px; margin-top: 34px; border-top: 1px solid var(--rule); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 0 44px; }
.grid-2 > * { min-width: 0; }

/* KPIs: cream cards, like the cards in the emails. */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 10px; }
.kpi { padding: 18px 20px 16px; background: var(--gold-tint); border-radius: 14px; }
.kpi + .kpi { padding-left: 20px; border-left: 0; }
.kpi-label { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.kpi-value { font: 400 34px/1.15 var(--font); color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 6px; }
.kpi-note { font-size: 15px; color: var(--muted); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 16px; }
th { text-align: left; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 500;
  padding: 10px 12px 10px 0; border-bottom: 1px solid var(--ink); white-space: nowrap; }
td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--body); }
tbody tr:hover td { background: var(--row-hover); }
td.name, td.name a { color: var(--ink); font-weight: 500; }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.total td { border-top: 1px solid var(--ink); border-bottom: none; font-weight: 600; color: var(--ink); }
.empty { color: var(--muted); font-style: italic; padding: 8px 0; }
.small { font-size: 15px; color: var(--muted); }

.pill { display: inline-block; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;
  padding: 3px 11px; border: 1px solid var(--rule); border-radius: var(--radius); color: var(--body); white-space: nowrap; }
.pill.gold { border-color: var(--gold); color: var(--gold-deep); background: var(--gold-tint); }
.pill.ink { border-color: var(--ink); color: var(--ink); }
.pill.good { border-color: var(--good); color: var(--good); }
.pill.warn { border-color: var(--warn); color: var(--warn); }
.pill.muted { color: var(--muted); }

.flash { padding: 12px 18px; margin-bottom: 22px; border-left: 3px solid var(--gold); background: var(--gold-tint); color: var(--ink); border-radius: 0 10px 10px 0; }
.flash.error { border-left-color: var(--warn); background: var(--error-bg); }
.alert { border-left: 3px solid var(--warn); padding: 8px 14px; margin: 8px 0; color: var(--warn); font-size: 16px; }

/* Forms and buttons: the website's pill buttons in ink, sentence case. */
form.stack { display: grid; gap: 14px; max-width: 600px; }
form.inline { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.field { display: grid; gap: 6px; }
.field > span { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
input, select, textarea { font: inherit; font-size: 16px; line-height: 1.4; color: var(--ink); background: var(--paper); border: 1px solid var(--input-rule);
  border-radius: 8px; padding: 8px 12px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(164,125,45,.18); }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--ink); }
textarea { min-height: 90px; resize: vertical; }
label.check { display: flex; gap: 10px; align-items: center; font-size: 17px; color: var(--body); }
label.check input { width: 18px; height: 18px; }
.btn, button { font: inherit; font-size: 15px; letter-spacing: 0; text-transform: none; font-weight: 500; cursor: pointer;
  padding: 8px 18px; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--ink); color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; line-height: 1.35; vertical-align: middle; }
.btn:hover, button:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--paper); text-decoration: none; }
.btn.ghost, button.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover, button.ghost:hover { border-color: var(--ink); color: var(--ink); background: var(--gold-tint); }
button.link, td button.link { background: none; border: none; color: var(--gold-deep); padding: 0; border-radius: 0; text-decoration: underline; text-underline-offset: 3px; }
button.link:hover { color: var(--ink); background: none; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
details.panel { border: 1px solid var(--rule); border-radius: 14px; padding: 14px 20px; margin: 14px 0; }
details.panel > summary { cursor: pointer; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; color: var(--ink); }
details.panel[open] > summary { margin-bottom: 14px; }
.sample-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; max-height: 340px; overflow-y: auto;
  border: 1px solid var(--rule); border-radius: 12px; padding: 12px; }

/* Bars for the monthly chart and style mix */
.bars { display: grid; gap: 6px; }
.bar-row { display: grid; grid-template-columns: 100px 1fr 120px; gap: 12px; align-items: center; font-size: 15px; }
.bar-track { position: relative; height: 14px; background: var(--gold-tint); border-radius: 7px; overflow: hidden; }
.bar-fill { position: absolute; inset: 0 auto 0 0; background: var(--gold); }
.bar-fill.ink { background: var(--ink); height: 5px; top: auto; }
.bars.stacked { gap: 12px; grid-template-columns: minmax(0, 1fr); }
.bar-head { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; margin-bottom: 4px; }
.bar-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.bar-head .num { flex: none; color: var(--muted); }
.bars.stacked .bar-track { height: 8px; }
.legend { display: flex; gap: 16px; font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.legend i { display: inline-block; width: 10px; height: 10px; background: var(--gold); margin-right: 6px; vertical-align: -1px; }
.legend i.ink { background: var(--ink); height: 4px; vertical-align: 2px; }

/* Printable documents: statements and memos on Indeco letterhead */
.doc-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 26px; }
.doc-head img { height: 54px; display: block; }
.doc-head .contact { text-align: right; color: var(--gold); font-size: 13px; font-weight: 500; }
.terms { font-size: 11.5px; line-height: 1.5; color: var(--body); border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 22px; }
.sign { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; font-size: 12px; color: var(--muted); }
.sign div { border-top: 1px solid var(--ink); padding-top: 6px; }
.print-only { display: none; }

@media (max-width: 720px) {
  .top { padding: 14px 16px; }
  .kpi + .kpi { padding-left: 20px; }
  .top nav { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .top nav .menu-list { left: 0; right: auto; }
  .top nav a { padding: 6px 8px; }
  main { padding: 20px 16px 40px; }
  .foot { padding: 0 16px; }
  h1 { font-size: 28px; }
  .bar-row { grid-template-columns: 70px 1fr 90px; }
}
@media print {
  :root { --gold: #A47D2D; --gold-deep: #8A6620; --gold-tint: #F4F2EE; --ink: #15140F; --body: #3A3832; --muted: #6D6A61; --rule: #E2DED6; --paper: #fff; --logo-filter: none; }
  .top nav, .no-print, .flash, form, details.panel { display: none !important; }
  .top { border: none; padding: 0 0 12px; }
  .print-only { display: block; }
  main { padding: 0; max-width: none; }
  body.print-doc .top { display: none; }
  a { color: var(--ink); }
}

/* Collections */
.aging { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; margin: 8px 0 4px; }
.aging-cell { padding: 12px 14px; border-right: 1px solid var(--rule); color: var(--ink); text-decoration: none; display: block; }
.aging-cell:last-child { border-right: none; }
.aging-cell:hover { background: var(--gold-tint); }
.aging-cell.on { background: var(--gold-tint); box-shadow: inset 0 -2px 0 var(--gold); }
.aging-amt { font-family: var(--font); font-size: 24px; margin: 2px 0; }
.aging-cell.b-over_90 .aging-amt, .aging-cell.b-61_90 .aging-amt { color: var(--warn); }
.btn.sm, button.sm { padding: 4px 12px; font-size: 14px; line-height: 1.3; }
td button, td .btn { padding: 4px 12px; font-size: 14px; }
td form { margin: 0; }
.note-col { max-width: 240px; }
.note-snip { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
tr.row-late td.name { color: var(--warn); }
tr.muted-row td { color: var(--muted); }
.not-received { font-size: 14px; color: var(--warn); font-weight: 500; margin-top: 3px; }
.not-received::before { content: '⚠ '; }

/* Order builder (/orders/new) */
table.builder td { vertical-align: top; }
table.builder select, table.builder input { width: 100%; min-width: 0; }
table.builder td:first-child { min-width: 320px; }
table.builder .sku { white-space: nowrap; padding-top: 14px; }
table.builder .total { white-space: nowrap; padding-top: 14px; }
.order-totals { margin-left: auto; max-width: 340px; display: grid; gap: 8px; margin-top: 10px; }
.order-totals > div, .order-totals > label { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.order-totals input { width: 120px; text-align: right; }
.order-totals .grand { border-top: 1px solid var(--rule); padding-top: 8px; font-size: 17px; }