/* ShutterPro UI — desktop + tablet. Card-based, brown/gold accent.
   Light by default; `html[data-theme="dark"]` (or "system" on a dark OS) flips
   the palette. Every surface below is a variable so both themes stay in sync. */
:root {
  --bg: #f4f5f7;
  --card: #ffffff;
  --surface: #ffffff;      /* raised panels: sidebar, topbar, menus, modals */
  --surface-2: #f9fafb;    /* subtle fills: inputs, modal foot, nav hover */
  --surface-3: #f3f4f6;    /* stronger fills: chips, modal head, search */
  --row-hover: #fcfcfd;
  --border: #e5e7eb;
  --border-strong: #d1d5db;
  --text: #111827;
  --text-soft: #374151;
  --muted: #6b7280;
  --muted-2: #9ca3af;
  --accent: #8a5a2b;        /* brown/gold buttons */
  --accent-dark: #744a23;
  --accent-soft: #fbf3e7;   /* cream highlight */
  --on-accent: #ffffff;     /* text on accent/dark buttons */
  --dark: #111827;          /* near-black buttons */
  --green: #16794a; --green-bg: #dcfce7;
  --amber: #b45309; --amber-bg: #fef3c7;
  --red: #b91c1c; --red-bg: #fee2e2;
  --blue: #1d4ed8; --blue-bg: #dbeafe;
  --gray-bg: #e5e7eb;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06);
  --content-max: 1400px;   /* max page-content width; centered in wider windows */
  color-scheme: light;
}

/* ---------- Dark theme ----------
   Applied when the user picks Dark, or picks System on a dark-mode OS. */
html[data-theme="dark"] {
  --bg: #12161c;
  --card: #1a2029;
  --surface: #1a2029;
  --surface-2: #212936;
  --surface-3: #273140;
  --row-hover: #222b37;
  --border: #2c3542;
  --border-strong: #3b4655;
  --text: #e8edf3;
  --text-soft: #c4cdd8;
  --muted: #9aa7b5;
  --muted-2: #7d8b99;
  --accent: #c08a52;
  /* The emphasised accent reads against a dark surface here, so it lightens
     rather than darkens — the light theme's #744a23 inverted. */
  --accent-dark: #dcb387;
  --accent-soft: #2e2519;
  --on-accent: #14181e;
  --dark: #e8edf3;
  --green: #4ade80; --green-bg: #14321f;
  --amber: #fbbf24; --amber-bg: #35270c;
  --red: #f87171;   --red-bg: #3a1717;
  --blue: #7dabff;  --blue-bg: #17233d;
  --gray-bg: #2c3542;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.4);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --bg: #12161c;
    --card: #1a2029;
    --surface: #1a2029;
    --surface-2: #212936;
    --surface-3: #273140;
    --row-hover: #222b37;
    --border: #2c3542;
    --border-strong: #3b4655;
    --text: #e8edf3;
    --text-soft: #c4cdd8;
    --muted: #9aa7b5;
    --muted-2: #7d8b99;
    --accent: #c08a52;
    --accent-dark: #dcb387;
    --accent-soft: #2e2519;
    --on-accent: #14181e;
    --dark: #e8edf3;
    --green: #4ade80; --green-bg: #14321f;
    --amber: #fbbf24; --amber-bg: #35270c;
    --red: #f87171;   --red-bg: #3a1717;
    --blue: #7dabff;  --blue-bg: #17233d;
    --gray-bg: #2c3542;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.4);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.45;
}
a { color: var(--accent); text-decoration: none; }
h1 { font-size: 30px; font-weight: 800; margin: 0 0 18px; }
h2 { font-size: 20px; font-weight: 700; }
h3 { font-size: 16px; font-weight: 700; }
.muted { color: var(--muted); }
/* ---------- An assistant's thread ----------
   What was asked, what it suggested, and what that suggestion does. */
.ai-thread { max-height: 210px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); padding: 8px 10px; margin: 0 0 10px; }
.ai-turn + .ai-turn { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 8px; }
.ai-turn .ai-asked { margin: 0; font-size: 12px; color: var(--muted); }
.ai-turn .ai-asked::before { content: 'You asked: '; font-weight: 700; }
.ai-turn .ai-said { margin: 3px 0 5px; font-size: 13px; color: var(--text-soft); line-height: 1.45; }
.ai-turn .ai-formula { display: flex; align-items: center; gap: 8px; }
.ai-turn .ai-formula code { flex: 1; font-size: 12px; background: var(--surface-3); border-radius: 6px; padding: 4px 7px; overflow-x: auto; white-space: pre; }

/* A due date that has arrived, or gone, on an order still being worked on. */
.due-late { color: var(--red); font-weight: 700; }
.due-soon { color: var(--amber); font-weight: 700; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ---------- App shell (desktop) ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 248px; background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  overflow-y: auto;
}
.sidebar .logo { padding: 22px 20px; }
.sidebar .logo img { width: 170px; height: auto; }
.company-switch {
  margin: 6px 16px 14px; padding: 12px; background: var(--surface-3); border-radius: 10px;
  display: flex; align-items: center; gap: 10px;
}
.company-switch .company-home { flex: 1; min-width: 0; display: flex; align-items: center; text-decoration: none; color: var(--text); }
.company-switch .company-home img { max-height: 40px; max-width: 100%; object-fit: contain; }
.company-switch .company-home .name { font-weight: 800; line-height: 1.1; }
.company-switch .switch { margin-left: auto; }
.nav { padding: 6px 12px; flex: 1; }
.nav a, .nav .navitem {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 8px;
  color: var(--text-soft); font-weight: 600; margin-bottom: 2px; border-left: 3px solid transparent;
}
.nav a:hover { background: var(--surface-2); }
.nav a.active { background: var(--accent-soft); color: var(--accent-dark); border-left-color: var(--accent); }
.nav .icon { width: 20px; text-align: center; opacity: .85; }
.nav .sub { margin-left: 22px; padding: 4px 0; }
.nav .sub a { padding: 7px 12px; font-size: 13px; font-weight: 600; border-left: none; }
.nav .sub a.active { color: var(--accent-dark); background: transparent; }
.sidebar .foot { padding: 14px 18px; border-top: 1px solid var(--border); }
.device-toggle { display: flex; align-items: center; gap: 8px; color: var(--muted); background: none; border: none; cursor: pointer; font: inherit; font-weight: 600; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 64px; border-bottom: 1px solid var(--border); background: var(--surface);
  display: flex; align-items: center; gap: 16px; padding: 0 26px;
}
.topbar .back { font-size: 18px; color: var(--text); }
.topbar .title { font-weight: 700; color: var(--text-soft); }
.topbar .search { flex: 1; max-width: 420px; margin-left: auto; }
.topbar .icons { display: flex; align-items: center; gap: 18px; color: var(--text-soft); }
.content { padding: 30px 32px; flex: 1; }
/* Inner wrapper caps page content and centers it in wide windows. */
.content-inner { max-width: var(--content-max); margin: 0 auto; }
/* On a wide screen let the page grow so the openings table fits without a
   horizontal scrollbar. Every card widens together, so the layout stays even. */
@media (min-width: 1500px) { :root { --content-max: 1560px; } }
@media (min-width: 1700px) { :root { --content-max: 1760px; } }
.page-footer { display: flex; justify-content: space-between; padding: 16px 32px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--border); }
.page-footer a { color: var(--muted); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 9px; font-weight: 700; font-size: 14px; border: 1px solid transparent; cursor: pointer; background: var(--surface); color: var(--text); }
.btn:hover { filter: brightness(.98); }
.btn-dark { background: var(--dark); color: var(--on-accent); }
.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-accent:hover { background: var(--accent-dark); }
.btn-outline { background: var(--surface); border-color: var(--border-strong); color: var(--text-soft); }
.btn-ghost { background: transparent; color: var(--muted); }
/* The button that takes something away, in the colour the app says so in. */
.btn-danger { background: var(--red); color: #fff; border-color: var(--red); }
.btn-danger:hover { filter: brightness(1.08); }
.btn-sm { padding: 7px 12px; font-size: 13px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-icon { background: none; border: none; cursor: pointer; color: var(--muted-2); padding: 4px; font-size: 18px; line-height: 1; }
.btn-icon:hover { color: var(--text); }

/* ---------- Monochrome stencil icons (lib/icons.js) ---------- */
/* Inline SVGs that inherit the surrounding colour, so one rule keeps every icon
   visually consistent in both themes. */
.ic { display: inline-block; vertical-align: -0.18em; flex: none; }
a .ic, button .ic, summary .ic, label .ic { pointer-events: none; }
.btn .ic { vertical-align: -0.2em; }
.btn-icon .ic { vertical-align: middle; }

/* ---------- Account menu (top bar) ---------- */
.acct { position: relative; }
.acct > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px;
  color: var(--text-soft); padding: 6px 8px; border-radius: 8px; }
.acct > summary::-webkit-details-marker { display: none; }
.acct > summary:hover { background: var(--surface-2); }
.acct[open] > summary { background: var(--surface-2); }
.acct .acct-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 1100; min-width: 232px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.16); padding: 6px;
}
.acct .acct-head { padding: 8px 10px 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.acct .acct-head .nm { font-weight: 700; }
.acct .acct-head .rl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.acct .acct-menu a,
.acct .acct-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 10px; border-radius: 7px; border: none; background: none; cursor: pointer;
  color: var(--text); text-decoration: none; font: inherit; font-size: 14px;
}
.acct .acct-menu a:hover, .acct .acct-menu button:hover { background: var(--accent-soft); }
.acct .acct-menu .sep { height: 1px; background: var(--border); margin: 4px 2px; }
.acct .acct-menu .badge-dot { margin-left: auto; font-size: 11px; color: var(--muted); }

/* ---------- Forms ---------- */
input, select, textarea {
  font: inherit; padding: 10px 12px; border: 1px solid var(--border-strong);
  border-radius: 8px; background: var(--surface-2); color: var(--text); width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
/* Spinner arrows belong to whole-number fields only. Anything with a fractional
   step (measurements at 1/16", prices at 0.01) is a plain box — measurements get
   the whole+fraction popover instead, and app.js blocks key/wheel stepping. */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number][step="1"] { -moz-appearance: auto; appearance: auto; }
input[type=number][step="1"]::-webkit-outer-spin-button,
input[type=number][step="1"]::-webkit-inner-spin-button { -webkit-appearance: auto; margin: 0; }
label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-soft); margin-bottom: 6px; }
.field { margin-bottom: 16px; }
.field-row { display: flex; gap: 16px; }
.field-row > .field { flex: 1; }
.input-prefix { position: relative; }
.input-prefix input { padding-left: 28px; }
.input-prefix .px { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }

/* Password field with view/hide toggle. */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 42px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: auto; background: none; border: none; cursor: pointer; font-size: 16px; padding: 4px 6px; line-height: 1; }

/* Global busy cursor while an AI assistant request is in flight. */
body.ai-busy, body.ai-busy * { cursor: wait !important; }

/* Opening/order image galleries (desktop; tablet.css styles the tablet view). */
.photo-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.photo-slot { position: relative; aspect-ratio: 1; border: 1px dashed var(--border-strong); border-radius: 10px; background: var(--surface-3); display: flex; align-items: center; justify-content: center; color: var(--muted, #64748b); overflow: hidden; cursor: pointer; }
.photo-slot img { width: 100%; height: 100%; object-fit: cover; }
.photo-slot.add { border-color: var(--accent); color: var(--accent); font-size: 26px; }
.photo-del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(17,24,39,.72); color: #fff; cursor: pointer; line-height: 1; font-size: 15px; }
.photo-del:hover { background: #b91c1c; }
/* Thumbnails open a full, unclipped preview on click. */
.thumb-img, .thumb-zoom { cursor: zoom-in; }
.img-lightbox { z-index: 1400; }
/* Image count next to the openings table's camera button. */
.img-btn .img-count { font-size: 11px; font-weight: 700; margin-left: 3px; vertical-align: middle; }
@media print { .photo-del, .photo-slot.add { display: none !important; } }

/* Contact Support — top-right link. */
/* Unread notifications: a count on the profile icon, and beside the menu item. */
.notif-anchor { position: relative; display: inline-flex; }
.notif-dot {
  position: absolute; top: -5px; right: -7px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--red); color: #fff; font-size: 10px; font-weight: 800;
  line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--surface);
}
.notif-count {
  margin-left: auto; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--red);
  color: #fff; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
}
.support-link { position: fixed; top: 16px; right: 18px; z-index: 900; color: var(--dark); font-weight: 700; font-size: 13px; text-decoration: none; }
.support-link:hover { text-decoration: underline; }
@media print { .support-link { display: none !important; } }

/* Fractional measurement helper popover (attaches to 1/16" inputs). */
.measure-pop {
  position: absolute; z-index: 1200; display: none;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 24px 10px 10px;
}
.measure-pop.open { display: block; }
.measure-pop .mp-row { display: flex; align-items: center; gap: 8px; }
.measure-pop .mp-row > * { margin: 0; }
.measure-pop input.mp-whole { width: 70px; text-align: right; }
.measure-pop select.mp-frac { width: 90px; }
.measure-pop .mp-unit { color: var(--muted); font-size: 13px; }
.measure-pop .mp-close {
  position: absolute; top: 2px; right: 4px; width: auto;
  background: none; border: none; cursor: pointer; padding: 2px 6px;
  font-size: 18px; line-height: 1; color: var(--muted-2);
}
.measure-pop .mp-close:hover { color: var(--text); }

/* Manufacturing Docs dropdown (order page). */
.mfg-dropdown { position: relative; display: inline-block; }
.mfg-dropdown > summary { list-style: none; cursor: pointer; }
.mfg-dropdown > summary::-webkit-details-marker { display: none; }
.mfg-dropdown .mfg-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 1100;
  min-width: 250px; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.14); padding: 6px;
}
.mfg-dropdown .mfg-menu-head {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); padding: 8px 10px 4px;
}
.mfg-dropdown .mfg-menu a {
  display: block; padding: 8px 10px; border-radius: 7px;
  color: var(--text); text-decoration: none; font-size: 14px;
}
.mfg-dropdown .mfg-menu a:hover { background: var(--accent-soft); }
/* A manufacturing document waiting on the deposit: shown, but not clickable. */
.mfg-dropdown .mfg-menu .doc-locked {
  display: block; padding: 8px 10px; border-radius: 7px;
  color: var(--muted); font-size: 14px; cursor: not-allowed;
}

/* Excel-style cut-sheet spreadsheet. */
.xls { border-collapse: collapse; width: 100%; font-size: 13px; }
.xls th, .xls td { border: 1px solid var(--border-strong); padding: 7px 14px; text-align: left; white-space: nowrap; }
.xls thead th { background: #e8eef6; font-weight: 700; }
.xls .xls-rownum { background: #e8eef6; color: #64748b; text-align: center; width: 34px; font-weight: 600; padding: 7px 6px; }
.xls .xls-part { color: #64748b; font-weight: 600; width: 1%; }
/* Shaded two ways at once: within an opening its lines alternate, and from one
   opening to the next the scheme itself does — plain, then faintly blue. Both
   are half-steps: enough to follow a line across a dozen columns and to see
   where one opening ends, and not enough to read as ink. */
.xls tbody.xls-grp td { background: #ffffff; }
.xls tbody.xls-grp tr:nth-child(even) td { background: #f5f6f8; }
.xls tbody.xls-alt td { background: #eff4fa; }
.xls tbody.xls-alt tr:nth-child(even) td { background: #e7eef7; }
/* A line that carries on from the one above is tied to it by a lighter rule. */
.xls tbody tr.xls-cont td { border-top-style: dotted; }

/* Cut-sheet column builder. */
.cs-build { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cs-list { border: 1px solid var(--border-strong); border-radius: 10px; max-height: 320px; overflow: auto; }
.cs-list h4 { margin: 0; padding: 8px 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--border); background: var(--surface-2); position: sticky; top: 0; }
.cs-row { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-bottom: 1px solid #eef0f2; }
.cs-row:last-child { border-bottom: none; }
.cs-row .cs-name { flex: 1; font-size: 13px; }
.cs-row .cs-btn { cursor: pointer; border: 1px solid var(--border-strong); background: var(--surface); border-radius: 6px; width: 26px; height: 26px; line-height: 1; font-size: 14px; padding: 0; }
.cs-row .cs-btn:hover { background: var(--accent-soft); }
.cs-row .cs-btn[disabled] { opacity: .35; cursor: not-allowed; }
.cs-empty { padding: 12px; color: var(--muted); font-size: 13px; }
.search { position: relative; }
.search input { padding-right: 38px; padding-left: 14px; border-radius: 999px; background: var(--surface-3); border-color: transparent; }
.search .ico { position: absolute; right: 14px; left: auto; top: 50%; transform: translateY(-50%); color: var(--muted-2); pointer-events: none; }

/* ---------- Cards / tables ---------- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 24px; }
.card-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; }
.card-head h3 { display: flex; align-items: center; gap: 10px; }
.card-body { padding: 4px 0 8px; }
.card-pad { padding: 22px; }

.toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
.toolbar .search { flex: 1; min-width: 200px; max-width: 360px; }
.toolbar .spacer { flex: 1; }

/* Auto-injected per-table search + column filters (public/js/table-filter.js).
   Sticky-left so the toolbar stays put in horizontally scrolling tables. */
.tbl-tools { position: sticky; left: 0; display: flex; align-items: center; gap: 8px; padding: 10px 18px; flex-wrap: wrap; }
.tbl-tools .search { flex: 0 1 280px; }
.tbl-tools .search input { padding: 7px 14px; font-size: 13px; }
.tbl-tools select.tbl-filter { width: auto; padding: 7px 10px; font-size: 13px; }
.tbl-tools .tbl-count { color: var(--muted); font-size: 12px; margin-left: auto; }
tr.tbl-hide { display: none !important; }

table.tbl { width: 100%; border-collapse: collapse; }
table.tbl th { text-align: left; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
table.tbl td { padding: 16px 18px; border-bottom: 1px solid var(--border); vertical-align: middle; }
/* A column you can sort by says so quietly: the caret is there at a third,
   and fills in on the column the table is sorted by. */
table.tbl th.sortable { cursor: pointer; user-select: none; }
table.tbl th.sortable:hover { color: var(--text); }
table.tbl th.sortable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
table.tbl th.sortable .sort-caret { display: inline-block; width: 0; height: 0; margin-left: 5px;
  vertical-align: middle; opacity: .3; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; }
table.tbl th.sortable:hover .sort-caret { opacity: .6; }
table.tbl th[aria-sort] { color: var(--text); }
table.tbl th[aria-sort] .sort-caret { opacity: 1; }
table.tbl th[aria-sort="ascending"] .sort-caret { border-top: 0; border-bottom: 5px solid currentColor; }
table.tbl tr:last-child td { border-bottom: none; }
table.tbl tr:hover td { background: var(--row-hover); }
table.tbl .num { text-align: right; }
table.tbl .center { text-align: center; }
.row-id { color: var(--muted); font-family: ui-monospace, monospace; font-size: 13px; }
.strong { font-weight: 700; }

/* Action column: edit/delete icons reveal on row hover. */
table.tbl td.act { white-space: nowrap; }
table.tbl td.act > * { opacity: 0; transition: opacity .12s ease; }
table.tbl tbody tr:hover td.act > * { opacity: 1; }
table.tbl td.act > * + * { margin-left: 2px; }
@media (hover: none) { table.tbl td.act > * { opacity: 1; } }

/* ---------- Badges ---------- */
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; background: var(--gray-bg); color: var(--text-soft); }
.badge.green { background: var(--green-bg); color: var(--green); }
.badge.amber { background: var(--amber-bg); color: var(--amber); }
.badge.red { background: var(--red-bg); color: var(--red); }
.badge.blue { background: var(--blue-bg); color: var(--blue); }
.badge.gray { background: var(--gray-bg); color: var(--text-soft); }
.badge.soft { background: var(--surface-3); color: var(--text-soft); }

/* Something the reader has to take in before they go on — a paragraph, not a
   badge, so it is set as one: left-ruled in the colour of the warning. */
.callout { border-radius: 8px; padding: 10px 12px; font-size: 12.5px; line-height: 1.55; }
.callout.amber { background: var(--amber-bg); color: var(--amber); border-left: 3px solid var(--amber); }
.callout.green { background: var(--green-bg); color: var(--green); border-left: 3px solid var(--green); }
.callout.red { background: var(--red-bg); color: var(--red); border-left: 3px solid var(--red); }
.chip { display: inline-flex; padding: 4px 10px; border-radius: 6px; background: var(--surface-3); font-weight: 700; font-size: 12px; }
.check { color: var(--accent); }
.check.off { color: var(--border-strong); }
.avatar-sm { width: 30px; height: 30px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--text-soft); background: var(--surface-3); }

/* ---------- Modal ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(17,24,39,.55); display: none; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 50; overflow: auto; }
.modal-backdrop.open { display: flex; }
.modal { background: var(--surface); border-radius: 14px; width: 100%; max-width: 620px; box-shadow: 0 20px 60px rgba(0,0,0,.3); overflow: hidden; }
.modal.lg { max-width: 800px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; background: var(--surface-3); border-bottom: 1px solid var(--border); }
.modal-head h3 { margin: 0; font-size: 18px; }
.modal-head .sub { font-size: 13px; color: var(--muted); font-weight: 400; }
.modal-body { padding: 22px 24px; }
.modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 16px 24px; background: var(--surface-2); border-top: 1px solid var(--border); }
.modal-foot .left { margin-right: auto; color: var(--muted); font-style: italic; }
.close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--muted); }

.thumb-box { display: flex; gap: 14px; align-items: center; }
.thumb { width: 64px; height: 64px; border: 1px solid var(--border-strong); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--muted-2); font-size: 11px; background: var(--surface-3); object-fit: cover; }

.accordion { border: 1px solid var(--border-strong); border-radius: 10px; margin-top: 12px; }
.accordion > summary { padding: 14px 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 10px; list-style: none; }
.accordion[open] > summary { border-bottom: 1px solid var(--border); }
.accordion .acc-body { padding: 16px; }

.left-rule { border-left: 3px solid var(--accent); padding-left: 12px; }

/* ---------- Documents (invoice/bid) ---------- */
.doc-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 18px; }
.doc { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 34px; max-width: 900px; margin: 0 auto; }
.doc-head { display: flex; justify-content: space-between; border-bottom: 2px solid var(--text); padding-bottom: 16px; margin-bottom: 20px; }
.doc-company { font-size: 12px; color: var(--muted); line-height: 1.5; }
.doc-title h1 { text-align: right; letter-spacing: .06em; }
.doc-meta { text-align: right; font-size: 12px; color: var(--muted); }
.doc-meta span { display: inline-block; width: 60px; color: var(--muted-2); }
.doc-parties { display: flex; gap: 20px; margin-bottom: 22px; }
.doc-parties .party { flex: 1; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 14px; font-size: 13px; }
.doc-parties h4 { margin: 0 0 8px; font-size: 11px; letter-spacing: .05em; color: var(--muted); }
.doc-table { width: 100%; border-collapse: collapse; margin-bottom: 18px; font-size: 13px; }
.doc-table th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--border); padding: 8px; }
.doc-table td { padding: 10px 8px; border-bottom: 1px solid var(--border); }
.doc-table .num { text-align: right; }
.doc-subhead { font-size: 11px; letter-spacing: .05em; color: var(--muted); margin: 18px 0 8px; }
.doc-foot { display: flex; gap: 24px; margin-top: 18px; }
.doc-notes { flex: 1; font-size: 12px; color: var(--muted); }
.doc-totals { width: 280px; }
.doc-totals .row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; }
.doc-totals .row.total { border-top: 2px solid var(--text); font-weight: 800; font-size: 16px; padding-top: 10px; }
.doc-totals .row.deposit { background: var(--accent-soft); padding: 10px; border-radius: 8px; font-weight: 700; color: var(--accent-dark); }
.doc-bigtotal { display: flex; justify-content: space-between; align-items: center; background: var(--surface-3); padding: 14px 18px; border-radius: 8px; font-weight: 800; margin: 10px 0; }
.doc-bigtotal.final { background: var(--accent); color: var(--on-accent); font-size: 18px; }
.doc-terms { font-size: 12px; color: var(--muted); margin-top: 20px; }

/* ---------- Utility ---------- */
.flex { display: flex; } .between { justify-content: space-between; } .center-y { align-items: center; }
.gap-8 { gap: 8px; } .gap-16 { gap: 16px; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.text-right { text-align: right; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.empty { text-align: center; color: var(--muted); padding: 48px 16px; }

/* ---------- Info icons ----------
   An explanation that stays out of the way until it is asked for. The bubble
   lives inside the icon, so moving the pointer onto it keeps it open (a link
   or a code sample in there can be read and clicked), and it opens on keyboard
   focus as well as hover. It is writing about the page, not part of it, so it
   is left off anything printed. */
.sp-info { position: relative; display: inline-flex; align-items: center; margin-left: 6px; color: var(--muted-2); cursor: help; vertical-align: middle; }
.sp-info:hover, .sp-info:focus, .sp-info:focus-within { color: var(--accent); outline: none; }
/* FIXED, not absolute: every modal is overflow:hidden, so an absolutely
   positioned bubble inside one lost whatever fell outside it.
   public/js/info-bubble.js places it. */
.sp-info > .sp-info-bubble {
  position: fixed; z-index: 70; display: none;
  width: max-content; min-width: 200px; max-width: min(380px, 70vw);
  padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: 10px;
  background: var(--surface); color: var(--text-soft); box-shadow: 0 10px 28px rgba(0,0,0,.16);
  font-size: 12.5px; font-weight: 400; line-height: 1.5; letter-spacing: 0; text-align: left; text-transform: none; white-space: normal;
}
.sp-info:hover > .sp-info-bubble, .sp-info:focus > .sp-info-bubble, .sp-info:focus-within > .sp-info-bubble { display: block; }
.sp-info .ic { display: block; }
@media print { .sp-info { display: none !important; } }