/* EJScorp app shell — matched to quoting.ejscorp.com.au */
:root {
  --color-bg: #f1f3f5;
  --color-surface: #ffffff;
  --color-text: #1f2328;
  --color-accent: #1667c8;
  --color-accent-2: #2f7d8f;
  --color-divider: #e3e6ea;

  --color-neutral-100: #f6f7f9;
  --color-neutral-200: #eceef1;
  --color-neutral-300: #dfe3e8;
  --color-neutral-400: #c3c9d0;
  --color-neutral-500: #9aa2ab;
  --color-neutral-600: #6b7280;
  --color-neutral-700: #4b5563;
  --color-neutral-800: #343a40;
  --color-neutral-900: #1f2328;

  --color-accent-100: #eaf2fd;
  --color-accent-200: #d3e5fb;
  --color-accent-300: #a9cbf5;
  --color-accent-400: #6ea6ec;
  --color-accent-500: #3b84dc;
  --color-accent-600: #1667c8;
  --color-accent-700: #14559f;
  --color-accent-800: #10406f;
  --color-accent-900: #33322f;

  --color-accent-2-100: #e8f3f5;
  --color-accent-2-200: #cfe6ea;
  --color-accent-2-300: #a7d0d8;
  --color-accent-2-400: #74b1bd;
  --color-accent-2-500: #4b93a2;
  --color-accent-2-600: #2f7d8f;
  --color-accent-2-700: #266472;
  --color-accent-2-800: #1d4c56;
  --color-accent-2-900: #14343b;

  --font-heading: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-heading-weight: 700;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 2px 8px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.16);
}

* { box-sizing: border-box; }
body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 14px; line-height: 1.5; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.01em; }
::selection { background: var(--color-accent-200); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* panels — white cards, no wireframe marks */
.blueprint, .card, .dialog {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.corner { display: none; }
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }
.hr { height: 1px; border: 0; background: var(--color-divider); margin: var(--space-4) 0; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none; font: inherit; font-size: 14px; font-weight: 500;
  min-height: 36px; padding: 7px 14px;
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.btn:hover { background: var(--color-neutral-100); }
.btn:active { background: var(--color-neutral-200); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-700); border-color: var(--color-accent-700); }
.btn-primary:active { background: var(--color-accent-800); }
.btn-secondary { background: var(--color-surface); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--color-accent); }
.btn-ghost:hover { background: var(--color-accent-100); }
.btn-icon { width: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* forms — dark filled controls, as in the quoting app */
.field > label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--color-neutral-700); }
.input {
  width: 100%; min-height: 38px; padding: 8px 11px; font: inherit; font-size: 14px;
  background: #33322f; color: #fff; caret-color: #fff;
  border: 1px solid #33322f; border-radius: var(--radius-md);
}
.input::placeholder { color: rgba(255,255,255,0.5); }
.input:hover { border-color: #4a4844; }
.input:focus-visible { border-color: var(--color-accent); outline: 2px solid var(--color-accent-300); outline-offset: 0; }
textarea.input { min-height: 84px; resize: vertical; }
select.input { cursor: pointer; }

/* tags */
.tag { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; padding: 3px 9px; border-radius: 999px; }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-700); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-700); }
.tag-neutral { background: var(--color-neutral-200); color: var(--color-neutral-700); }
.tag-outline { border: 1px solid var(--color-neutral-300); color: var(--color-neutral-700); }

/* tables */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-700); padding: 10px 10px; border-bottom: 1px solid var(--color-divider);
}
.table td { padding: 10px; border-bottom: 1px solid var(--color-neutral-200); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--color-neutral-100); }
.table [style*="tabular-nums"], td[style*="tabular-nums"] { font-family: var(--font-mono); font-size: 13px; }

/* nav */
.nav { display: flex; align-items: center; gap: var(--space-4); }
.nav-brand { font-family: var(--font-heading); font-weight: 700; font-size: 18px; }
.dialog-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--space-4); background: rgba(31, 35, 40, 0.5); }
.dialog { width: min(440px, 100%); padding: var(--space-4); box-shadow: var(--shadow-lg); }
.dialog-title { font-family: var(--font-heading); font-weight: 700; font-size: 20px; }

/* app shell: fixed app bar + tab bar */
.app-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 58px; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; background: var(--color-surface); border-bottom: 1px solid var(--color-divider);
}
.app-bar-user { font-size: 13px; color: var(--color-neutral-700); display: flex; align-items: center; gap: 12px; }
.app-bar-user .role { color: var(--color-neutral-500); }
@media (max-width: 1100px) {
  .app-bar-label, .app-bar-user .role { display: none; }
}
.tab-bar {
  position: fixed; top: 58px; left: 0; right: 0; z-index: 19;
  display: flex; flex-wrap: wrap; gap: 4px; padding: 0 24px;
  background: var(--color-surface); border-bottom: 1px solid var(--color-divider);
}
.tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 14px; font-size: 13.5px; font-weight: 500; color: var(--color-neutral-700);
  text-decoration: none; border-bottom: 2px solid transparent;
}
.tab:hover { color: var(--color-text); }
.tab.active { color: var(--color-accent-700); border-bottom-color: var(--color-accent); font-weight: 600; }
.tab .count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 999px; background: var(--color-accent-100); color: var(--color-accent-700);
  font-size: 11px; font-weight: 700;
}
.app-content { padding-top: 58px; }
.app-shell.has-tabs .app-content { padding-top: 106px; }
.content-wrap { max-width: 1180px; margin: 0 auto; padding: 34px; }
.content-wrap-wide { max-width: 1640px; }

[x-cloak] { display: none !important; }

/* toast */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 50;
  background: #33322f; color: #fff; font-size: 14px; padding: 14px 20px; border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

/* ══════════════════════════════════════════════════════════════════════
   Daily Tasks additions — built from the same tokens/vocabulary above,
   not a separate system. New only because purchasing has no register
   rows, steppers, signer chips or progress bars to reuse.
   ══════════════════════════════════════════════════════════════════════ */

/* tick checkbox — 44x44 touch target (shop-floor tablets tick these all day),
   with the visual 28x28 box centered inside via ::before so the control
   doesn't look oversized next to the task text. */
.tick {
  flex: none; width: 44px; height: 44px; padding: 0; cursor: pointer;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent;
}
.tick::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 28px; height: 28px;
  border: 1.5px solid var(--color-neutral-400); border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.tick:hover::before { border-color: var(--color-accent); }
.tick.checked::before { background: var(--color-accent); border-color: var(--color-accent); }
.tick svg { position: relative; display: block; }

/* number stepper — same 44px-tall touch target reasoning as .tick above */
.stepper {
  flex: none; display: inline-flex; align-items: stretch;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md); overflow: hidden;
}
.stepper.has-value { border-color: var(--color-accent); }
.stepper button {
  width: 44px; min-height: 44px; border: 0; background: var(--color-neutral-100); cursor: pointer;
  font-family: var(--font-heading); font-size: 18px; line-height: 1; color: var(--color-text);
}
.stepper button:hover { background: var(--color-accent-100); }
.stepper button:disabled { opacity: 0.4; cursor: not-allowed; }
.stepper input {
  width: 56px; min-height: 44px; border: 0;
  border-left: 1px solid var(--color-divider); border-right: 1px solid var(--color-divider);
  text-align: center; font-family: var(--font-mono); font-size: 15px;
  background: var(--color-surface); color: var(--color-text);
}

/* name chips (signers, section-assignment toggles) */
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px;
  background: var(--color-neutral-100); border: 1px solid var(--color-divider);
  border-radius: 999px; padding: 4px 6px 4px 12px;
}
.chip button {
  border: 0; background: transparent; cursor: pointer; padding: 0 2px;
  font-size: 15px; line-height: 1; color: var(--color-neutral-500);
}
.chip button:hover { color: var(--color-text); }
.chip-suggestion {
  cursor: pointer; font-size: 13px; padding: 3px 10px; border-radius: 999px;
  border: 1px dashed var(--color-neutral-400); background: transparent; color: var(--color-neutral-600);
}
.chip-suggestion:hover { border-color: var(--color-accent); color: var(--color-text); }
.chip-toggle {
  cursor: pointer; font-size: 12px; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  border: 1px dashed var(--color-neutral-400); background: transparent; color: var(--color-neutral-500);
}
.chip-toggle:hover { border-color: var(--color-accent); color: var(--color-text); }
.chip-toggle.on {
  border: 1px solid var(--color-accent-700); background: var(--color-accent-100); color: var(--color-accent-700);
}

/* progress bars — the one deliberate accent departure carried over from the
   design brief: a red fill for under-100% completion, using the same
   error-red literal (#a8492a) already used for validation text below. */
.progress { height: 6px; background: var(--color-neutral-200); border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--color-accent); }
.progress > span.warn { background: #a8492a; }

.matrix-cell:hover { background: var(--color-accent-100); }

/* main-column + sidebar layouts (sign-off form, email preview) — stack on
   narrow tablets rather than squeezing a fixed sidebar width. */
.split-panel {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar, 320px);
  gap: 22px; align-items: start;
}
@media (max-width: 860px) {
  .split-panel { grid-template-columns: minmax(0, 1fr); }
  .split-panel > :last-child { position: static !important; }
}