/* ---------------------------------------------------------------------
   Design tokens
--------------------------------------------------------------------- */
:root {
  --color-primary: #1a5fb4;
  --color-primary-dark: #144a8f;
  --color-primary-light: #e8f0fb;
  --color-danger: #b3261e;
  --color-danger-bg: #fdecea;
  --color-danger-border: #f5c2c0;
  --color-success: #1e7b34;
  --color-success-bg: #eaf7ed;
  --color-warning: #8a5a00;
  --color-warning-bg: #fdf3e0;

  --color-text: #1a1a1a;
  --color-text-muted: #666;
  --color-border: #c7ccd4;
  --color-border-strong: #8a94a3;
  --color-bg: #dde2e8;
  --color-bg-card: #ffffff;
  --color-bg-hover: #eef2f7;
  --color-brandbar-bg: #101b30;
  --color-brandbar-text: #c9d3e0;
  --color-menubar-bg: #eef0f3;
  --color-menubar-border: #c7ccd4;
  --color-menubar-text: #1a1a1a;
  --color-menubar-hover: #d7dde6;
  --color-statusbar-bg: #101b30;
  --color-statusbar-text: #93a0b8;

  --tile-payroll: #e8720c;
  --tile-gl: #c9820a;
  --tile-ar: #1a5fb4;
  --tile-ap: #1e8449;
  --tile-stock: #7d3c98;
  --tile-asset: #5b2c86;
  --tile-company: #4a5568;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  --radius: 3px;
  --radius-sm: 2px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------------
   Base
--------------------------------------------------------------------- */
* { box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  margin: 0;
  color: var(--color-text);
  line-height: 1.5;
  background: var(--color-bg);
  font-size: 14px;
}

h1 { font-size: 1.5rem; margin: 0 0 var(--space-4); }
h2 { font-size: 1.15rem; margin: var(--space-5) 0 var(--space-3); }
h3 { font-size: 1rem; margin: var(--space-4) 0 var(--space-2); }

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

.muted { color: var(--color-text-muted); font-size: 0.9rem; }

/* ---------------------------------------------------------------------
   Plain (no-shell) pages: login, signup, home, company_new, error
--------------------------------------------------------------------- */
.content-plain {
  max-width: 480px;
  margin: 4rem auto;
  padding: 0 var(--space-5);
}

ul.companies { list-style: none; padding: 0; }
ul.companies li { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }

/* ---------------------------------------------------------------------
   App shell: brand bar + classic dropdown menu bar + status bar
--------------------------------------------------------------------- */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.app-shell--plain {
  display: block;
  min-height: 0;
}

.brandbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-5);
  background: var(--color-brandbar-bg);
  color: var(--color-brandbar-text);
}
.brand-logo {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  color: #ffffff;
}
.brand-logo-accent { color: #4caf50; margin-left: 0.15em; }
.brand-edition {
  font-size: 0.72rem;
  font-weight: 700;
  color: #0d2b12;
  background: #4caf50;
  border-radius: 999px;
  padding: 0.15em 0.7em;
}
.brandbar-spacer { flex: 1; }
.brand-company { font-weight: 600; color: #ffffff; font-size: 0.92rem; }
.brand-switcher { width: auto; max-width: 200px; margin: 0; padding: var(--space-1) var(--space-2); }
.brand-user { color: var(--color-brandbar-text); font-size: 0.85rem; }
.brand-logout { margin: 0; }
.button-link--inverse { color: #f2a7a2; }

.menubar {
  background: var(--color-menubar-bg);
  border-bottom: 1px solid var(--color-menubar-border);
}
.menubar-list {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0 var(--space-3);
}
.menubar-list > li { position: relative; }
.menubar-list > li > a,
.menubar-list > li > button {
  display: block;
  background: none;
  border: none;
  margin: 0;
  padding: var(--space-2) var(--space-4);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-menubar-text);
  cursor: pointer;
  border-radius: 0;
}
.menubar-list > li > a:hover,
.menubar-list > li > button:hover,
.menubar-list > li.has-dropdown:focus-within > button {
  background: var(--color-menubar-hover);
  text-decoration: none;
}
.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  list-style: none;
  margin: 0;
  padding: var(--space-1) 0;
  min-width: 200px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-md);
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  display: block;
}
.dropdown a {
  display: block;
  padding: var(--space-2) var(--space-4);
  color: var(--color-text);
  font-size: 0.88rem;
  font-weight: 400;
  white-space: nowrap;
}
.dropdown a:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
  text-decoration: none;
}
/* The star beside a menu entry: pin it to the dashboard's My Shortcuts. */
.dropdown > li { display: flex; align-items: stretch; }
.dropdown > li > a { flex: 1 1 auto; }
.menu-pin { background: none; border: none; margin: 0; padding: 0 8px; color: #b8bec8; cursor: pointer; font-size: 0.95rem; line-height: 1; border-radius: 0; }
.menu-pin:hover { color: #c8a400; background: var(--color-primary-light); }
.menu-pin.is-pinned { color: #c8a400; }
/* Thin rule between groups of menu items, as in a desktop menu. */
.dropdown .menu-sep {
  height: 0;
  margin: var(--space-1) 0;
  border-top: 1px solid var(--color-border);
}

.statusbar {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-1) var(--space-5);
  background: var(--color-statusbar-bg);
  color: var(--color-statusbar-text);
  font-size: 0.76rem;
}
.statusbar-spacer { flex: 1; }

/* Every company page renders as a "document window" sitting on the gray
   desktop: navy title bar (the page's own <h1>), a toolbar strip (its
   <nav> breadcrumb), then the white work area. Pure CSS over the markup
   every template already has -- no per-page changes needed. */
.content {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  margin: var(--space-4) var(--space-5) var(--space-5);
  padding: 0 var(--space-5) var(--space-5);
  max-width: 1200px;
  width: calc(100% - 2 * var(--space-5));
  background: var(--color-bg-card);
  border: 1px solid #6b7688;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}
.content > h1 {
  order: -1;
  margin: 0 calc(-1 * var(--space-5));
  padding: var(--space-2) var(--space-4);
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(to bottom, #2f4f84, #1b2f52);
  border-bottom: 1px solid #0f1b30;
}
.content > h1::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: var(--space-2);
  background: #4caf50;
  border: 1px solid rgba(255, 255, 255, 0.7);
  vertical-align: 1px;
}
.content > nav {
  margin: 0 calc(-1 * var(--space-5)) var(--space-3);
  padding: 4px var(--space-4);
  font-size: 0.82rem;
  background: linear-gradient(to bottom, #f7f8fa, #dfe3e8);
  border-bottom: 1px solid var(--color-border-strong);
}
.content > nav a {
  display: inline-block;
  padding: 2px 10px;
  color: var(--color-text);
  border: 1px solid transparent;
}
.content > nav a:hover {
  text-decoration: none;
  background: #ffffff;
  border-color: var(--color-border-strong);
}
.content > h2 {
  font-size: 0.95rem;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--color-border);
}
.content > p, .content > form > p { margin: var(--space-2) 0; }

/* The dashboard is the desktop itself, not a window on it. */
.content:has(.launcher) {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}

/* ---------------------------------------------------------------------
   Launcher dashboard: colorful tile grid, grouped by module
--------------------------------------------------------------------- */
/* The dashboard page drops the normal content padding so the dark
   launcher fills the window edge-to-edge, the way the desktop app does. */
.launcher {
  margin: 0;
  min-height: calc(100vh - 120px);
  /* Dark navy with sweeping teal curves -- an inline SVG so the desktop
     backdrop needs no image file and scales to any window size. */
  background-color: #13233a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1080' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='1920' height='1080' fill='%2313233a'/%3E%3Cpath d='M0 0C520 180 880 720 1920 1080L0 1080Z' fill='%230f4e6a' opacity='.8'/%3E%3Cpath d='M0 330C620 210 1180 980 1920 600L1920 1080L0 1080Z' fill='%230b1a2c' opacity='.92'/%3E%3Cpath d='M380 1080C900 520 1500 420 1920 0L1920 1080Z' fill='%23176080' opacity='.5'/%3E%3Cpath d='M0 0C700 60 1200 120 1920 0L1920 0Z' fill='%23090f1c'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  color: #ffffff;
}
.content:has(.launcher) { max-width: none; }

.launcher-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-1) var(--space-4);
  background: linear-gradient(to bottom, #8f3a52, #6e2a3d);
  border-bottom: 1px solid #4d1c2a;
  font-size: 0.82rem;
}
.launcher-toolbar-title { font-weight: 700; letter-spacing: 0.02em; }
.launcher-toolbar-spacer { flex: 1; }
.launcher-toolbar-meta { color: #f0d6dd; }

.launcher-hint {
  margin: var(--space-3) var(--space-6) 0;
  font-size: 0.76rem;
  color: #a9bdd4;
}

.launcher-columns {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
}
.launcher-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 104px;
}
.launcher-col-title {
  margin: 0 0 4px;
  padding: 3px 8px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #ffffff;
  background: var(--col-color);
  border-left: 4px solid rgba(255, 255, 255, 0.55);
}
.launcher-col--mine { --col-color: #5b4a8a; min-height: 120px; padding-bottom: 6px; border: 2px dashed transparent; border-radius: 4px; }
.launcher-col--mine.is-dragover { border-color: #c8a400; background: rgba(200, 164, 0, 0.08); }
.launcher-drop-hint { margin: 4px 0 0; font-size: 0.68rem; line-height: 1.3; color: #9aa3ad; text-align: center; }
.launcher-drop-hint a { color: #c9d4e0; }
.tile-wrap { position: relative; }
.tile-wrap.is-dragging { opacity: 0.4; }
.tile-unpin { position: absolute; top: -6px; right: 10px; margin: 0; display: none; }
.tile-wrap:hover .tile-unpin { display: block; }
.tile-unpin button { width: 18px; height: 18px; padding: 0; margin: 0; border-radius: 50%; border: 1px solid #888; background: #fff; color: #444; font-size: 0.8rem; line-height: 1; cursor: pointer; min-width: 0; }
.tile-unpin button:hover { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
/* Choose Shortcuts: the menu as a list of tick boxes. */
.menu-pick { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.menu-pick-group { border: 1px solid var(--color-border); padding: var(--space-2) var(--space-3); min-width: 220px; margin: 0; }
.menu-pick-group legend { font-weight: 600; font-size: 0.85rem; padding: 0 4px; }
.menu-pick-group ul { list-style: none; margin: 0; padding: 0; }
.menu-pick-group li { padding: 2px 0; font-size: 0.85rem; }
.menu-pick-group label { cursor: pointer; }
.launcher-col--payroll { --col-color: var(--tile-payroll); }
.launcher-col--gl { --col-color: var(--tile-gl); }
.launcher-col--ar { --col-color: var(--tile-ar); }
.launcher-col--ap { --col-color: var(--tile-ap); }
.launcher-col--sales { --col-color: #b03a6e; }
.launcher-col--purchase { --col-color: var(--tile-asset); }
.launcher-col--stock { --col-color: var(--tile-stock); }
.launcher-col--reports { --col-color: #2b7a8c; }
.launcher-col--company { --col-color: var(--tile-company); }

/* AutoCount proportions: the coloured square *is* the icon (56px, with a
   small code badge in its corner) and the caption sits below it on the
   dark desktop -- not a big coloured block with text inside. */
.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 104px;
  padding: 3px 2px;
  color: #ffffff;
  text-align: center;
}
.tile:hover { text-decoration: none; }
.tile-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--col-color) 86%, white), var(--col-color));
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 4px rgba(0, 0, 0, 0.45);
}
.tile:hover .tile-art {
  filter: brightness(1.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 2px rgba(255, 255, 255, 0.7), 0 2px 6px rgba(0, 0, 0, 0.5);
}
.tile-icon { width: 30px; height: 30px; display: block; margin-top: 6px; }
.tile-badge {
  position: absolute;
  left: 3px;
  top: 3px;
  padding: 0 3px;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--col-color);
  background: #ffffff;
  border-radius: 1px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}
.tile-label { font-size: 0.68rem; line-height: 1.15; font-weight: 500; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); }

/* ---------------------------------------------------------------------
   Forms
--------------------------------------------------------------------- */
form { margin: var(--space-3) 0; }
label { display: block; margin-top: var(--space-2); font-weight: 600; font-size: 0.82rem; color: #2a3a56; }

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], select, textarea {
  width: 100%;
  padding: 4px var(--space-2);
  margin-top: 2px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.08);
  font-size: 0.88rem;
  font-family: inherit;
  background: var(--color-bg-card);
  color: var(--color-text);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 2px var(--color-primary-light);
}
input:disabled, select:disabled { background: var(--color-bg); color: var(--color-text-muted); box-shadow: none; }

/* ---------------------------------------------------------------------
   Buttons
--------------------------------------------------------------------- */
button, input[type=submit] {
  margin-top: var(--space-3);
  padding: 5px var(--space-4);
  background: linear-gradient(to bottom, #4d84cf, var(--color-primary));
  color: white;
  border: 1px solid var(--color-primary-dark);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}
button:hover, input[type=submit]:hover { background: linear-gradient(to bottom, var(--color-primary), var(--color-primary-dark)); }
button:active, input[type=submit]:active { box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.35); }

.button-secondary {
  background: linear-gradient(to bottom, #ffffff, var(--color-bg-hover));
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.button-secondary:hover { background: linear-gradient(to bottom, var(--color-bg-hover), var(--color-border)); }
.button-secondary:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); }

.button-danger {
  background: linear-gradient(to bottom, #d9534f, #b52b27);
  color: #fff;
  border: 1px solid #8f1f1c;
}
.button-danger:hover { background: linear-gradient(to bottom, #c9302c, #a02622); }

.button-link {
  all: unset;
  cursor: pointer;
  color: var(--color-danger);
  font-size: 0.85rem;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------
   Alerts
--------------------------------------------------------------------- */
.error {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid var(--color-danger-border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
}
.error-text { color: var(--color-danger); }
.designer { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 54%); gap: 14px; align-items: start; }
.designer-form .doc-header { grid-template-columns: max-content minmax(0, 1fr); }
.designer-preview { position: sticky; top: 8px; }
.designer-preview-bar { font-size: 0.82rem; padding: 4px 0; display: flex; justify-content: space-between; }
.designer-preview iframe { width: 100%; height: calc(100vh - 160px); min-height: 520px; border: 1px solid var(--color-border-strong); background: #e9ebef; }
.designer-columns input[type=text] { width: 100%; margin: 0; }
.designer-columns td.nowrap { white-space: nowrap; }
@media (max-width: 1100px) { .designer { grid-template-columns: 1fr; } .designer-preview { position: static; } .designer-preview iframe { height: 70vh; } }
.transfer-kinds { display: flex; gap: 4px; margin: 8px 0; }
.transfer-kinds a { padding: 4px 12px; border: 1px solid var(--color-border); border-radius: 3px; background: #fafbfc; font-size: 0.85rem; text-decoration: none; color: var(--color-text); }
.transfer-kinds a.is-current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.transfer-list tr.transfer-lines > td { padding: 0 0 8px 0; background: #fafbfc; }
.transfer-line-table { width: 100%; font-size: 0.82rem; margin: 0; }
.transfer-line-table th, .transfer-line-table td { padding: 2px 8px; border-bottom: 1px solid #eef0f4; }
.transfer-line-table input { width: 6em; text-align: right; margin: 0; }
.tb-transfer select { max-width: 14em; }
.notice { background: #fff8e1; border: 1px solid #e6c65a; color: #5b4a00; padding: 8px 12px; border-radius: 3px; margin: 8px 0; font-size: 0.9rem; }
.success {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
}

/* ---------------------------------------------------------------------
   Cards, rows, tables
--------------------------------------------------------------------- */
.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-3) 0;
}
.card form { margin: var(--space-2) 0 0; }

.row { display: flex; gap: var(--space-4); align-items: baseline; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 160px; }

.check-row { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
.check-row input[type=checkbox] { width: auto; margin: 0; }
.check-row label { margin: 0; font-weight: 400; }

.right { text-align: right; }

table {
  border-collapse: collapse;
  width: 100%;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-strong);
}
td, th { padding: 4px var(--space-2); border: 1px solid var(--color-border); font-size: 0.88rem; }
td input, td select { margin-top: 0; }
th {
  text-align: left;
  background: linear-gradient(to bottom, #f6f7f9, #dfe3e8);
  font-size: 0.8rem;
  font-weight: 700;
  color: #2a3a56;
  position: sticky;
  top: 0;
}
tbody tr:nth-child(even) { background: var(--color-bg-hover); }
tbody tr:hover { background: var(--color-primary-light); }

/* ---------------------------------------------------------------------
   Status pills
--------------------------------------------------------------------- */
.status-pill {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  background: var(--color-bg-hover);
  color: var(--color-text-muted);
}
.status-pill--posted { background: var(--color-success-bg); color: var(--color-success); }
.status-pill--draft { background: var(--color-warning-bg); color: var(--color-warning); }
.status-pill--void { background: var(--color-danger-bg); color: var(--color-danger); }

/* ---------------------------------------------------------------------
   Live-totals preview (see static/app.js)
--------------------------------------------------------------------- */
.totals-preview {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary-light);
  border-radius: var(--radius);
  font-size: 0.92rem;
}
.totals-preview.is-unbalanced { background: var(--color-danger-bg); color: var(--color-danger); }

/* ---------------------------------------------------------------------
   Document-entry window (AutoCount layout): icon toolbar across the top,
   compact header with labels to the LEFT of their fields in two column
   pairs, a spreadsheet-style detail grid, totals bottom-right.
--------------------------------------------------------------------- */
.doc-toolbar {
  display: flex;
  align-items: stretch;
  gap: 1px;
  margin: 0 calc(-1 * var(--space-5)) var(--space-3);
  padding: 2px var(--space-3);
  background: linear-gradient(to bottom, #f7f8fa, #dfe3e8);
  border-bottom: 1px solid var(--color-border-strong);
}
.tb-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 60px;
  margin: 0;
  padding: 3px 6px 2px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
  color: #1f2a3d;
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  box-shadow: none;
  cursor: pointer;
}
.tb-btn:hover {
  text-decoration: none;
  background: linear-gradient(to bottom, #ffffff, #d7dde6);
  border-color: var(--color-border-strong);
  box-shadow: inset 0 1px 0 #ffffff;
}
.tb-btn:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25); }
.tb-btn:disabled { opacity: 0.4; cursor: default; background: transparent; border-color: transparent; box-shadow: none; }
.tb-icon { width: 24px; height: 24px; stroke-width: 1.8; }
.tb-btn--blue .tb-icon { color: #1a6fd0; }
.tb-btn--green .tb-icon { color: #1e8449; }
.tb-btn--red .tb-icon { color: #c0392b; }
.tb-btn--grey .tb-icon { color: #4a5568; }
.tb-sep { width: 1px; margin: 4px 5px; background: var(--color-border-strong); }
.tb-spacer { flex: 1; }
.tb-status { display: flex; align-items: center; gap: var(--space-2); padding-right: var(--space-2); font-size: 0.78rem; color: var(--color-text-muted); }
.tb-status .status-pill { border-radius: 2px; padding: 2px 8px; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; }
.tb-checkbox { display: flex; align-items: center; gap: 5px; padding: 0 var(--space-3); font-size: 0.8rem; color: var(--color-text); white-space: nowrap; }
.tb-checkbox input { margin: 0; }

.doc-header {
  display: grid;
  grid-template-columns: max-content minmax(140px, 1fr) max-content minmax(140px, 1fr);
  gap: 5px 10px;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  background: #f3f5f8;
  border: 1px solid var(--color-border);
}
.doc-header label {
  margin: 0;
  font-weight: 400;
  font-size: 0.82rem;
  color: #1f2a3d;
  white-space: nowrap;
}
.doc-header label::after { content: " :"; color: var(--color-text-muted); }
.doc-header input, .doc-header select, .doc-header textarea { margin: 0; }
.doc-header .field-wide { grid-column: 2 / -1; }
.doc-header .field-static { font-size: 0.88rem; font-weight: 600; padding: 4px 0; }
.doc-header .field-hint { grid-column: 1 / -1; margin: 0; font-size: 0.74rem; color: var(--color-text-muted); }
.doc-header .field-check { display: flex; align-items: center; gap: var(--space-2); }
.doc-header .field-check input[type=checkbox] { width: auto; margin: 0; }
.doc-header .field-check label { margin: 0; white-space: normal; }
.doc-header .field-check { min-width: 0; flex-wrap: wrap; }
.doc-header .field-check label::after { content: none; }
.doc-header .field-span { grid-column: 2 / -1; }
.doc-header .field-tail { grid-column: 3 / -1; font-size: 0.74rem; color: var(--color-text-muted); }
.doc-header--single { grid-template-columns: max-content minmax(200px, 1fr); }
/* AutoCount-style group caption sitting on top of a .doc-header block */
.doc-section {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #2a3a56;
  background: linear-gradient(to bottom, #f6f7f9, #e4e8ee);
  border: 1px solid var(--color-border);
  border-bottom: none;
}
.doc-section + .doc-header { margin-top: 0; }
@media (max-width: 760px) {
  .doc-header { grid-template-columns: max-content minmax(0, 1fr); }
  .doc-header .field-wide { grid-column: 2 / 3; }
}

/* min-height keeps an empty grid looking like a grid, not a one-line table */
.doc-grid { min-height: 200px; border: 1px solid var(--color-border-strong); background: #ffffff; }
.doc-grid--compact { min-height: 0; }
.doc-grid-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px 6px;
  font-size: 0.78rem;
  background: linear-gradient(to bottom, #f6f7f9, #e4e8ee);
  border-bottom: 1px solid var(--color-border-strong);
}
.doc-grid-title { font-weight: 700; color: #2a3a56; margin-right: var(--space-2); }
.doc-grid-bar .tb-btn { flex-direction: row; gap: 4px; min-width: 0; padding: 1px 8px; }
.doc-grid-bar .tb-icon { width: 15px; height: 15px; }
.doc-grid-hint { margin-left: auto; font-size: 0.72rem; color: var(--color-text-muted); }
.doc-grid table { border: none; }
.doc-grid th { position: static; padding: 3px 5px; font-size: 0.76rem; white-space: nowrap; }
.doc-grid td { padding: 0; }
.doc-grid td input, .doc-grid td select {
  width: 100%;
  min-width: 0;
  padding: 3px 5px;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.doc-grid td select { padding-right: 2px; }
.doc-grid td:focus-within { outline: 2px solid var(--color-primary); outline-offset: -2px; background: #ffffff; }
.doc-grid tbody tr:nth-child(even) { background: #f6f8fb; }
.doc-grid tbody tr:hover { background: #eef4fc; }
.doc-grid tbody { counter-reset: docrow; }
.doc-grid tbody tr { counter-increment: docrow; }
.doc-grid .col-rownum { width: 2em; text-align: center; color: var(--color-text-muted); font-size: 0.74rem; background: linear-gradient(to right, #eef0f3, #e4e8ee); border-right: 1px solid var(--color-border-strong); }
.doc-grid td.col-rownum:empty::before { content: counter(docrow); }
.doc-grid .col-qty { width: 5.5em; }
.doc-grid .col-num { width: 8.5em; }
.tb-checkbox--warn { color: #8a4b00; font-weight: 600; }
.doc-toolbar select.tb-select { font-size: 0.85rem; padding: 2px 4px; margin-left: 2px; max-width: 11em; }
.doc-totals input.doc-discount-box { width: 7em; margin-left: 6px; font-size: 0.85rem; padding: 1px 4px; text-align: right; }
.doc-grid .col-tax { width: 7em; }
.doc-grid .col-batch { width: 8em; }
.doc-grid .col-dim { width: 9em; }
.doc-grid td.col-dim select { width: 100%; min-width: 0; }
.doc-grid td.col-num input, .doc-grid td.col-qty input, .doc-grid th.col-num, .doc-grid th.col-qty { text-align: right; }
.doc-grid .col-date { width: 10em; }
.doc-grid .col-code { width: 6em; }
/* payroll pay entry: component grid on the left, statutory breakdown on the right */
.pay-entry { display: flex; align-items: flex-start; gap: var(--space-4); }
.pay-entry .doc-grid { flex: 1; min-width: 0; }
.pay-entry .pay-totals { flex: 0 0 auto; min-width: 260px; margin-left: 0; }
@media (max-width: 900px) { .pay-entry { flex-direction: column; } .pay-entry .pay-totals { width: 100%; } }
.doc-grid .col-act { width: 1%; white-space: nowrap; padding: 0 4px; }
/* read-only text cells inside an editing grid keep the same rhythm as the inputs */
.doc-grid td.cell-text { padding: 3px 5px; font-size: 0.85rem; }
/* Read-only computed figure in the grid (per-line tax on the account-based
   A/R and A/P Invoice Entry). */
.doc-grid td.col-num.cell-text, .doc-grid td.col-qty.cell-text { text-align: right; font-variant-numeric: tabular-nums; color: #333; background: #f7f8fa; }
/* small in-row action buttons (AutoCount row-level Save / Remove) */
.grid-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  margin: 1px 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: #1a6fd0;
  background: linear-gradient(to bottom, #ffffff, #eef1f5);
  border: 1px solid var(--color-border-strong);
  border-radius: 2px;
  box-shadow: none;
}
.grid-btn:hover { background: linear-gradient(to bottom, #f7f9fc, #dde3ea); }
.grid-btn--red { color: #c0392b; }
.grid-icon { width: 13px; height: 13px; stroke-width: 2; }
/* stacked maintenance blocks (employee screen) breathe a little between groups */
.content > .doc-form ~ .doc-grid, .content > .doc-grid ~ .doc-form { margin-top: var(--space-4); }

.doc-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin-top: var(--space-3);
}
.doc-footer-note { flex: 1; font-size: 0.76rem; color: var(--color-text-muted); }
/* AutoCount's "Created by / Last modified by" footer on a saved document. */
.doc-history { margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px dotted var(--color-border-strong); font-size: 0.74rem; color: var(--color-text-muted); }
.doc-history-title { font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.68rem; }
.doc-history ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.doc-history li { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.doc-history-when { font-variant-numeric: tabular-nums; min-width: 110px; }
.doc-history-what { color: var(--color-text); }
.doc-history-diff { flex-basis: 100%; padding-left: calc(110px + var(--space-2)); }
.tb-status--editing { color: var(--color-accent, #1f5fbf); font-weight: 600; }
.doc-totals {
  width: auto;
  min-width: 300px;
  margin-left: auto;
  border: 1px solid var(--color-border-strong);
  background: #f8f9fb;
}
.doc-totals td { padding: 3px 10px; font-size: 0.85rem; border: none; border-bottom: 1px solid var(--color-border); }
.doc-totals td:first-child { text-align: right; color: #2a3a56; }
.doc-totals td:last-child { min-width: 130px; text-align: right; background: #ffffff; font-variant-numeric: tabular-nums; }
.doc-totals tbody tr:nth-child(even), .doc-totals tbody tr:hover { background: transparent; }
.doc-totals tr.grand td { font-weight: 700; font-size: 0.95rem; background: #eef2f7; }
.doc-totals tr.grand td:last-child { background: #fffbe6; }
.doc-totals.is-unbalanced tr.grand td:last-child { color: var(--color-danger); background: var(--color-danger-bg); }
.doc-totals.is-unbalanced tr.grand td:first-child { color: var(--color-danger); }

.doc-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3); }
.doc-actions button { margin-top: 0; min-width: 96px; }

/* Forms in document windows manage their own spacing. */
.content > form.doc-form, .content > .doc-form { margin: 0; }

/* Module Setting: AutoCount's tick-list of modules in use */
.module-list { width: 100%; margin: 0; border: 1px solid var(--color-border-strong); border-top: none; background: #ffffff; }
.module-list th { padding: 3px 8px; font-size: 0.74rem; }
.module-list td { padding: 4px 8px; font-size: 0.85rem; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.module-list .col-check { width: 1%; text-align: center; }
.module-list .col-check input { margin: 3px 0 0; }
.module-list .module-name label { font-weight: 700; color: #2a3a56; white-space: nowrap; cursor: pointer; }
.module-list .module-desc { color: var(--color-text); }
.module-list .module-req { width: 14em; font-size: 0.76rem; color: var(--color-text-muted); }
.module-list tbody tr:nth-child(even) { background: #f8f9fb; }
.module-list tbody tr:hover { background: #eef2f7; }
.doc-form > .field-hint { margin: var(--space-2) 0 0; font-size: 0.76rem; }

/* ---------------------------------------------------------------------
   Tools > Import Data from Excel
--------------------------------------------------------------------- */
.import-intro { margin: var(--space-2) 0 var(--space-3); font-size: 0.82rem; max-width: 70em; }
.import-list { width: 100%; margin: 0 0 var(--space-3); border: 1px solid var(--color-border-strong); border-top: none; background: #ffffff; }
.import-list th { padding: 3px 8px; font-size: 0.74rem; }
.import-list td { padding: 5px 8px; font-size: 0.85rem; vertical-align: middle; border-bottom: 1px solid var(--color-border); }
.import-list .import-list-name a { font-weight: 700; color: #2a3a56; text-decoration: none; white-space: nowrap; }
.import-list .import-list-name a:hover { text-decoration: underline; }
.import-list .import-list-desc { color: var(--color-text); }
.import-list .col-actions { width: 1%; white-space: nowrap; text-align: right; }
.import-list tbody tr:nth-child(even) { background: #f8f9fb; }
.import-list tbody tr:hover { background: #eef2f7; }

/* Small 3D push buttons, the size AutoCount uses inside its own grids */
.btn-small {
  display: inline-block; padding: 2px 10px; font-size: 0.78rem; line-height: 1.5;
  color: var(--color-text); text-decoration: none; border: 1px solid var(--color-border-strong);
  border-radius: 2px; background: linear-gradient(to bottom, #ffffff, var(--color-bg-hover));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.btn-small:hover { background: linear-gradient(to bottom, var(--color-bg-hover), var(--color-border)); text-decoration: none; }
.btn-small--primary { color: #ffffff; border-color: var(--color-primary-dark); background: linear-gradient(to bottom, #3b7fd0, var(--color-primary)); }
.btn-small--primary:hover { background: linear-gradient(to bottom, var(--color-primary), var(--color-primary-dark)); }

.import-upload { display: block; }
.import-upload label { display: block; font-size: 0.82rem; font-weight: 600; color: #2a3a56; }
.import-upload label::after { content: none; }
.import-upload input[type=file] { display: block; margin-top: 4px; font-size: 0.85rem; padding: 3px; border: 1px solid var(--color-border-strong); background: #ffffff; max-width: 32em; }
.import-upload .import-check { margin-top: var(--space-2); font-weight: 400; }
.import-upload .import-check input { margin-right: 4px; }
.import-upload .import-check .field-hint { display: block; margin: 2px 0 0 20px; font-size: 0.74rem; }
.import-upload > .field-hint { margin: var(--space-2) 0 0; font-size: 0.78rem; color: var(--color-text-muted); max-width: 70em; }
.migrate-backup p { margin: 0 0 var(--space-2); font-size: 0.85rem; }
.migrate-backup .status-pill { margin-right: 6px; }
.migrate-backup .doc-actions { margin-top: var(--space-2); }
.migrate-backup form { display: flex; align-items: center; gap: var(--space-2); }
.migrate-backup form .field-hint { font-size: 0.76rem; }

/* Tax Code Wizard: question blocks, then the offer table */
.brand-vendor { color: #f0d6dd; font-size: 0.8rem; margin-right: 12px; text-decoration: underline; }
.module-picks { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
.module-picks label { font-size: 0.85rem; cursor: pointer; }
/* Plain pages carry the wordmark; the landing page is the public face. */
.plain-brand { display: flex; align-items: baseline; gap: 14px; padding: 14px 24px; border-bottom: 1px solid var(--color-border); }
.plain-brand a { font-weight: 800; letter-spacing: 0.04em; color: #1a1a1a; text-decoration: none; font-size: 1.15rem; }
.plain-brand .brand-logo-accent { color: #b03a6e; }
.plain-brand-tag { color: var(--color-text-muted); font-size: 0.85rem; }
.content-landing { max-width: 1040px; }
.landing-hero { padding: 40px 0 24px; }
.landing-kicker { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; color: #b03a6e; margin: 0 0 8px; }
.landing-hero h1 { font-size: 2.1rem; line-height: 1.15; margin: 0 0 12px; }
.landing-lead { font-size: 1.05rem; max-width: 46rem; color: #333; }
.landing-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.btn-primary, .btn-secondary { display: inline-block; padding: 8px 18px; border-radius: 3px; text-decoration: none; font-weight: 600; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: #164e94; color: #fff; text-decoration: none; }
.btn-secondary { border: 1px solid var(--color-border-strong); color: var(--color-text); background: #fff; }
.landing-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; padding: 12px 0 30px; }
.landing-features h2 { font-size: 1rem; margin: 0 0 6px; }
.landing-features p { margin: 0; font-size: 0.9rem; color: #444; }
.landing-foot { display: flex; gap: 18px; padding: 14px 0 30px; border-top: 1px solid var(--color-border); font-size: 0.85rem; color: var(--color-text-muted); }
/* The Kira portal. kira.cncgroup.biz for a visitor is a product chooser before it is a
   marketing page: three tiles, each carrying the colour its module already uses inside the
   app (--tile-*), so the same product reads the same way inside and out. Same 3px radius
   and system face as everything else -- this is the front door of the desktop-shaped
   application behind it, not a separate brochure site. */
.portal { padding: 40px 0 8px; }
.portal-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin: 22px 0 10px; }
.portal-tile { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 16px; background: var(--color-bg-card); border: 1px solid var(--color-border); border-top: 4px solid var(--tile-ar); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.portal-tile--books { border-top-color: var(--tile-ar); }
.portal-tile--timesheet { border-top-color: var(--tile-payroll); }
.portal-tile--autocount { border-top-color: var(--tile-ap); }
.portal-tile-name { font-weight: 800; font-size: 1.15rem; letter-spacing: 0.03em; color: var(--color-brandbar-bg); }
.portal-tile-name .brand-logo-accent { margin-left: 0.12em; }
.portal-tile-desc { color: #444; font-size: 0.92rem; line-height: 1.45; flex: 1; }
.portal-tile-status { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); }
.portal-tile-status.is-live { color: var(--color-success); }
.portal-tile-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; min-height: 2em; }
.portal-tile-actions .btn-primary, .portal-tile-actions .btn-secondary { padding: 6px 14px; font-size: 0.9rem; }
.portal-staff { font-size: 0.88rem; color: var(--color-text-muted); margin: 8px 0 0; }
.landing-books { padding-top: 22px; border-top: 1px solid var(--color-border); margin-top: 22px; }
.landing-section-title { font-size: 1.25rem; margin: 0 0 6px; }
/* /staff: a signpost to the practice's own tools, each with its own sign-in. */
.staff-list { list-style: none; padding: 0; margin: 16px 0 6px; display: grid; gap: 10px; max-width: 40rem; }
.staff-list li a { display: block; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg-card); text-decoration: none; color: var(--color-text); }
.staff-list li a:hover { background: var(--color-bg-hover); text-decoration: none; }
.staff-host { display: block; margin-top: 3px; font-size: 0.8rem; color: var(--color-text-muted); font-family: ui-monospace, Consolas, "Courier New", monospace; }
/* The Create Company / Setup wizard: numbered steps across the top. */
.wizard-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 14px; padding: 0; }
.wizard-steps li { display: flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 0.82rem; color: var(--color-text-muted); border: 1px solid var(--color-border); background: #fafbfc; border-radius: 3px; }
.wizard-steps li.is-current { color: #fff; background: var(--color-primary); border-color: var(--color-primary); font-weight: 600; }
.wizard-steps li.is-done { color: var(--color-success); }
.wizard-step-no { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0,0,0,0.08); font-size: 0.72rem; font-weight: 700; }
.wizard-steps li.is-current .wizard-step-no { background: rgba(255,255,255,0.25); }
.wizard-choices { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.wizard-choice { display: block; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 4px; cursor: pointer; font-size: 0.9rem; }
.wizard-choice:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-light); }
.wizard-choice input { margin-right: 6px; }
.wizard-actions { justify-content: space-between; }
.user-list td.nowrap { white-space: nowrap; }
.wizard-form .doc-header { grid-template-columns: max-content minmax(0, 1fr); }
.wizard-form .doc-header .date-box { max-width: 16em; }
.wizard-form .doc-header .field-static { font-weight: 500; }
.wizard-form .doc-header input[data-year-end] { width: 8.6em; }
.wizard-review { width: 100%; margin-bottom: var(--space-3); }
.wizard-review th { text-align: left; font-weight: 600; padding-right: 1.5em; white-space: nowrap; vertical-align: top; }
.wizard-included { margin: 6px 0 10px; padding-left: 20px; font-size: 0.9rem; }
.wizard-included li { margin: 3px 0; }
/* Guided empty states and the first-run panel. */
.empty-state { margin: 14px 0; padding: 26px 18px; text-align: center; border: 1px dashed #c7ccd4; background: #fafbfc; border-radius: 4px; }
.empty-state p { margin: 0 0 10px; }
.empty-state p.muted { margin: 10px auto 0; max-width: 46rem; font-size: 0.85rem; }
.getting-started { margin: 14px 24px 0; padding: 14px 18px; background: #fffdf5; border: 1px solid #e8c88a; border-radius: 4px; color: #222; }
.getting-started h2 { margin: 0 0 8px; font-size: 1rem; }
.getting-started-steps { margin: 0 0 8px; padding-left: 22px; }
.getting-started-steps li { margin: 4px 0; font-size: 0.9rem; }
.getting-started-steps li.is-done { color: #5c6a7a; }
.getting-started-steps li.is-done strong { text-decoration: line-through; }
.getting-started-sample { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.getting-started .muted { font-size: 0.85rem; }
/* Phones and narrow windows: the menu wraps, the shell loses its margins,
   toolbars wrap, and any wide table scrolls sideways inside the page
   instead of pushing the whole page out. */
@media (max-width: 760px) {
  .brandbar { flex-wrap: wrap; gap: 6px; }
  .brand-search { order: 9; flex: 1 1 100%; }
  .menubar-list { flex-wrap: wrap; padding: 0 4px; }
  .menubar-list > li > a, .menubar-list > li > button { padding: 6px 10px; font-size: 0.82rem; }
  .content { margin: 6px; padding: 0 8px 12px; width: auto; }
  .content > h1, .content > .doc-toolbar, .content > nav { margin-left: -8px; margin-right: -8px; }
  .content-plain { margin: 1.2rem auto; }
  .doc-toolbar, .statusbar, .row, .listing-filter { flex-wrap: wrap; }
  .doc-toolbar .tb-status { flex: 1 1 100%; }
  .content > table, .table-scroll { display: block; overflow-x: auto; max-width: 100%; }
  .doc-grid { overflow-x: auto; max-width: 100%; }
  .doc-totals, .doc-form table { max-width: 100%; }
  .doc-totals { display: block; overflow-x: auto; }
  .doc-footer { flex-wrap: wrap; }
  .doc-footer > * { flex: 1 1 100%; min-width: 0; max-width: 100%; }
  .content > table > tbody, .content > table > thead, .content > table > tr { display: table; width: 100%; min-width: 640px; }
  .launcher-columns { padding: 10px; gap: 10px; }
  .launcher-col { width: 92px; }
  .getting-started { margin: 8px; }
  .dash-widgets { flex-wrap: wrap; }
  .plain-brand { padding: 10px 14px; flex-wrap: wrap; }
  .landing-hero h1 { font-size: 1.5rem; }
}
tr.group-head td { background: #eef1f5; padding-top: 6px; }
tr.subtotal td { border-top: 1px solid #b8bec8; background: #fafbfc; font-variant-numeric: tabular-nums; }
.saved-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.saved-bar-actions { display: inline-flex; gap: 6px; }
.oversold-note { margin: var(--space-2) 0; padding: 8px 12px; background: #fdf1dc; border: 1px solid #e8c88a; color: #5a3d00; border-radius: 3px; font-size: 0.9rem; }
.sst-checks { list-style: none; padding: 0; margin: var(--space-3) 0; max-width: 60rem; }
.sst-check { padding: 6px 10px; border-left: 3px solid #d6dbe4; margin-bottom: 4px; background: #f7f8fa; font-size: 0.9rem; }
.sst-check--block { border-left-color: var(--color-danger); }
.sst-check--warn { border-left-color: var(--color-warning); }
.sst-check--info { border-left-color: var(--color-success); }
.sst-check .status-pill { margin-right: 6px; }
.tax-wizard-q p { margin: var(--space-2) 0 2px; font-size: 0.85rem; }
.tax-wizard-q p:first-child { margin-top: 0; }
.tax-wizard-q .import-check { display: block; margin-top: 2px; }
.tax-wizard-offer .col-check { width: 1%; text-align: center; }
.tax-wizard-offer .col-rate { width: 4em; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tax-wizard-offer .module-name label { cursor: pointer; }
.tax-wizard-offer tr.offer-recommended td { background: #f3f8ee; }
.tax-wizard-offer tr.offer-have td { color: var(--color-text-muted); }
/* Bank Reconciliation > Import Bank Statement: column mapping + preview */
.bank-import-map select { max-width: 22em; }
.bank-import-sign { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: 0.82rem; }
.bank-import-sign label { display: flex; align-items: center; gap: 4px; }
.bank-import-sign label::after { content: none; }
.bank-import-sign input[type=radio] { width: auto; margin: 0; }
.bank-import-grid .col-message { color: var(--color-text-muted); }
.import-row--error .col-message { color: var(--color-danger); }
.import-row--duplicate td { color: var(--color-text-muted); background: #fffaf0; }
.import-row--skipped td { color: var(--color-text-muted); }
.bank-import-grid .match-why { font-size: 0.85em; }
/* A/P > AI Document Scan: upload options, review screen (form beside the
   scanned page, the way you would hold the paper next to the keyboard) */
.import-upload .bank-import-sign { margin-top: 4px; font-weight: 400; }
.import-upload .bank-import-sign label { font-weight: 400; }
.import-upload .field-check { display: flex; align-items: center; gap: 6px; margin-top: var(--space-2); font-size: 0.82rem; }
.import-upload .field-check label { display: inline; font-weight: 400; }
.import-upload .field-check input { width: auto; margin: 0; }
.scan-notes { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); background: #fff8e6; border: 1px solid #e6c987; border-radius: 3px; font-size: 0.85rem; }
.scan-notes ul { margin: 4px 0 0; padding-left: 1.2em; }
.scan-split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: var(--space-4); align-items: start; }
.scan-split-form { min-width: 0; }
.scan-split-preview { position: sticky; top: var(--space-3); }
.scan-preview { display: block; width: 100%; min-height: 70vh; border: 1px solid var(--color-border-strong); background: #ffffff; }
img.scan-preview { min-height: 0; height: auto; object-fit: contain; }
@media (max-width: 1100px) { .scan-split { grid-template-columns: 1fr; } .scan-split-preview { position: static; } }
.import-columns .col-req { width: 1%; white-space: nowrap; text-align: center; }
.import-columns .import-example { width: 18em; font-size: 0.8rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* Preview grid: same lined look as the document grids, scrolls sideways */
.import-grid-wrap { overflow-x: auto; border: 1px solid var(--color-border-strong); border-top: none; background: #ffffff; }
.import-grid { min-width: 100%; margin: 0; border: none; }
.import-grid th, .import-grid td { white-space: nowrap; }
.import-grid td.cell-text { max-width: 24em; overflow: hidden; text-overflow: ellipsis; }
.import-grid .col-rownum { width: 3em; }
.import-grid .col-status { width: 1%; }
.import-grid .col-status .status-pill { border-radius: 2px; padding: 1px 7px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.import-grid .col-message { color: var(--color-danger); font-size: 0.8rem; white-space: normal; min-width: 18em; }
.import-row--error td { background: var(--color-danger-bg); }
.import-row--update td.cell-text { background: #fffaf0; }

.import-done { padding: var(--space-3) var(--space-3); border: 1px solid var(--color-border-strong); border-top: none; background: #ffffff; }
.import-done-summary { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--color-success); }
.import-done .field-hint { margin: var(--space-2) 0 0; font-size: 0.78rem; }

/* Migrate > restore: the two routes a backup can come across by. */
.restore-mode {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin: var(--space-2) 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.82rem;
  line-height: 1.45;
}
.restore-mode:hover { background: var(--color-surface-alt, #f7f8fa); }
.restore-mode input { margin-top: 3px; }
.restore-mode:has(input:checked) { border-color: var(--color-accent, #1a6fd0); }

/* SST-02 return -- the Customs form, item by item (templates/_sst02_form.html). */
.sst02 { font-size: 12px; margin-top: 10px; }
.sst02 .sst02-title { text-align: center; border: 1px solid #333; padding: 6px; font-weight: 700; font-size: 15px; background: #fff; }
.sst02 .sst02-sub { font-size: 12px; margin-top: 2px; }
.sst02 table { width: 100%; border-collapse: collapse; margin-top: 8px; background: #fff; }
.sst02 caption { caption-side: top; text-align: left; background: #dfe6f2; border: 1px solid #333; border-bottom: 0; padding: 5px 8px; font-weight: 700; }
.sst02 td, .sst02 th { border: 1px solid #333; padding: 4px 8px; vertical-align: top; }
.sst02 th { background: #f0f2f5; font-weight: 600; text-align: left; font-size: 11px; }
.sst02 td.no { width: 36px; white-space: nowrap; }
.sst02 td.num, .sst02 th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sst02 td.val { width: 40%; }
.sst02 td.sub { padding-left: 24px; }
.sst02 tr.total td { font-weight: 700; }
.sst02 .note { font-size: 10.5px; color: #555; font-weight: 400; }
.sst02 .sst02-sign { display: flex; justify-content: space-between; margin-top: 18px; }

/* Type-ahead lookup built around a <select> (static/app.js: enhanceLookup). */
.lookup { position: relative; display: block; width: 100%; min-width: 0; }
.lookup .lookup-input { width: 100%; box-sizing: border-box; }
.lookup .lookup-native { display: none !important; }
.lookup-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; max-height: 240px; overflow-y: auto;
  background: #fff; border: 1px solid #8a94a6; box-shadow: 0 3px 8px rgba(0,0,0,.25); font-size: 12px; text-align: left; }
.lookup-item { padding: 3px 8px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lookup-item:hover { background: #e8eef8; }
.lookup-item.is-active { background: #1a5fb4; color: #fff; }
.lookup-empty { padding: 4px 8px; color: #777; font-style: italic; }
/* AutoCount's lookup is a small grid, not a line of text: the code and
   name, then the figure you are choosing on -- a debtor's balance and
   credit limit, an item's stock and price (third parity audit). */
.lookup-list.lookup-cols .lookup-item { display: flex; align-items: baseline; gap: 10px; }
.lookup-main { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.lookup-extra, .lookup-extra2 { flex: 0 0 auto; color: #5c6a7a; font-variant-numeric: tabular-nums; }
.lookup-item.is-active .lookup-extra, .lookup-item.is-active .lookup-extra2 { color: #dbe6f5; }
/* "+ New debtor" from inside the box, so a document being keyed is never
   abandoned to go and create a master. */
.lookup-new { padding: 4px 8px; cursor: pointer; border-top: 1px solid #d6dbe4; color: #1a5fb4;
  background: #f7f9fc; position: sticky; bottom: 0; }
.lookup-new:hover { background: #e8eef8; }
td .lookup { min-width: 10em; }

/* Click-to-sort column headings (static/app.js: initSortable). */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { text-decoration: underline; }
th.sortable[data-sort-dir="asc"]::after { content: " \25B2"; font-size: 9px; }
th.sortable[data-sort-dir="desc"]::after { content: " \25BC"; font-size: 9px; }

/* Shortcut-key hints in the status bar (static/app.js: showShortcutHints). */
.statusbar-keys { color: #cfd8e6; margin-left: 12px; }

/* UOM column on item-based lines (filled from the item, static/app.js). */
.doc-grid .col-uom { width: 4.5em; text-align: center; }
.doc-grid .col-loc { width: 6.5em; }
.statusbar-warn { color: #b00; font-weight: 600; margin-right: 14px; }
.listing-filter { margin: 6px 0 10px; padding: 8px 10px; background: #f4f6f9; border: 1px solid #d5dae3; border-radius: 2px; }
.listing-filter > div { min-width: 140px; }
.listing-filter label { font-size: 11px; color: #555; display: block; }
.listing-pager { display: flex; gap: 16px; align-items: center; margin: 10px 0; font-size: 12px; }
.doc-grid td.col-loc select { min-width: 5.5em; }
.doc-grid td.col-uom.cell-text { text-align: center; color: #333; background: #f7f8fa; }

/* Print letterhead carried by base.html for every screen -- only when printing. */
.print-head { display: none; }
@media print {
  @page { size: A4; margin: 12mm 12mm 14mm; }
  body { background: #fff !important; color: #111; font-size: 11px; }
  .brandbar, .menubar, .statusbar, .doc-toolbar, form.row, .doc-actions, .btn-small, .field-hint,
  .import-intro, .doc-grid-bar .tb-btn, .tb-btn, .screen-bar, .brand-switcher, .lookup-list { display: none !important; }
  .app-shell, main.content { display: block; padding: 0; margin: 0; max-width: none; box-shadow: none; border: 0; background: #fff; }
  main.content > h1, .content h1 { display: none; }
  .print-head { display: block; border-bottom: 2px solid #111; padding-bottom: 6px; margin-bottom: 10px; }
  .print-head-co { display: flex; align-items: flex-start; gap: 10px; }
  .print-head-co img { max-height: 20mm; max-width: 50mm; object-fit: contain; }
  .print-head-name { font-size: 16px; font-weight: 700; letter-spacing: .02em; }
  .print-head-addr { font-size: 10px; color: #333; white-space: pre-line; }
  .print-head-title { text-align: center; font-size: 14px; font-weight: 700; margin-top: 8px; text-transform: uppercase; letter-spacing: .06em; }
  .print-head-meta { display: flex; justify-content: space-between; font-size: 10px; color: #333; margin-top: 2px; }
  .doc-form, .doc-header, .doc-grid, .doc-window, .panel { border: 0 !important; box-shadow: none !important; background: #fff !important; }
  table { border-collapse: collapse; width: 100%; page-break-inside: auto; }
  tr { page-break-inside: avoid; }
  th, td { border: 1px solid #888; padding: 3px 6px; font-size: 10.5px; }
  th { background: #eef1f5 !important; color: #111; }
  a { color: inherit; text-decoration: none; }
  .sst02 table caption { background: #eef1f5 !important; }
}

/* Company logo on the settings screen. */
.logo-field { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.logo-preview { max-height: 56px; max-width: 160px; object-fit: contain; border: 1px solid var(--color-border-strong, #b8c0cc); background: #fff; padding: 3px; }

.neg { color: #a4252a; }

/* Grid row menu (click a line's row number). */
.doc-grid td.col-rownum { cursor: context-menu; }
.doc-grid td.col-rownum:hover { background: #d9e4f5; }
.row-menu { position: absolute; z-index: 60; display: flex; flex-direction: column; min-width: 10em;
  background: #fff; border: 1px solid #8a94a6; box-shadow: 0 2px 8px rgba(0,0,0,.25); padding: 2px; }
.row-menu button { text-align: left; font: inherit; font-size: 0.82rem; padding: 4px 10px; border: 0; background: none; cursor: pointer; }
.row-menu button:hover { background: #dde6f4; }

.brand-search { margin: 0 0 0 var(--space-4); }
.brand-search input { width: 16em; margin: 0; padding: 2px 8px; font-size: 0.82rem; border-radius: 999px; border: 1px solid #3a4a68; background: #1b2942; color: #fff; }
.brand-search input::placeholder { color: #8b98b0; }
.search-results h2 { margin: var(--space-4) 0 var(--space-2); font-size: 0.95rem; }
.recent-panel { margin-top: var(--space-5); }
.recent-panel h2 { font-size: 0.95rem; margin-bottom: var(--space-2); }

/* Column chooser (right-click a listing heading). */
.col-hidden { display: none !important; }
.column-chooser label { display: flex; gap: 6px; align-items: center; font-size: 0.82rem; padding: 3px 10px; cursor: pointer; }
.column-chooser label:hover { background: #dde6f4; }
.column-chooser-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .06em; color: #555; padding: 4px 10px 2px; }
.column-chooser button { border-top: 1px solid #ddd; margin-top: 2px; }
th.sortable { cursor: pointer; }

/* Further Description: a second, quieter line under the description. */
.doc-grid input.further-desc { display: block; margin-top: 2px; font-size: 0.78rem; color: #445; background: #fbfbfd; }
.doc-grid input.further-desc:placeholder-shown { opacity: .6; }
.doc-grid input.further-desc:focus { opacity: 1; }
.dash-widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: var(--space-4) 0; }
.dash-widget { background: #fff; border: 1px solid var(--color-border-strong, #b9c1cf); border-radius: 3px; padding: 10px 12px; }
.dash-widget .lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .05em; color: #556; }
.dash-widget .val { font-size: 1.25rem; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.dash-widget .sub { font-size: 0.78rem; color: #667; margin-top: 2px; }
.dash-widget.warn .val { color: #a4252a; }

/* Per-line delete button on entry grids. */
.doc-grid th.col-del, .doc-grid td.col-del { width: 1.8em; text-align: center; padding: 0 2px; }
.doc-grid .row-delete { border: 1px solid #c9ced8; background: #fff; color: #8a1f24; font-weight: 700; line-height: 1;
  width: 1.5em; height: 1.5em; border-radius: 2px; cursor: pointer; font-size: 0.95rem; padding: 0; }
.doc-grid .row-delete:hover { background: #fbe9e9; border-color: #a4252a; }

.doc-grid th.col-check, .doc-grid td.col-check { width: 2.4em; text-align: center; }

.doc-attachments { margin-top: 10px; font-size: 0.82rem; }
.doc-attachments ul { list-style: none; padding: 0; margin: 4px 0; }
.doc-attachments li { padding: 2px 0; display: flex; gap: 10px; align-items: center; }
.doc-attachments .attach-form { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.doc-attachments .attach-form input[type=file] { width: auto; margin: 0; }

/* Grid behaviour: resize grips, drop targets, filter row. */
th .col-grip { position: absolute; right: 0; top: 0; width: 6px; height: 100%; cursor: col-resize; user-select: none; }
th .col-grip:hover { background: rgba(34,58,94,.25); }
th.drop-target { outline: 2px dashed #223a5e; outline-offset: -2px; }
tr.filter-row td { padding: 2px 4px; background: #f4f6fa; }
tr.filter-row input { width: 100%; margin: 0; padding: 1px 4px; font-size: 0.78rem; }
tr.filtered-out { display: none; }
/* Calendar pop-up */
input[type=date].date-native { display: none !important; }
.date-box { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; vertical-align: middle; }
.doc-header .date-box, .doc-header > .date-box { display: flex; }
.date-text { width: 8.6em; font-variant-numeric: tabular-nums; }
.doc-header .date-box .date-text { flex: 1 1 auto; min-width: 0; width: auto; }
.date-box .cal-btn { flex: 0 0 auto; margin-top: 0; }
td .date-text { width: 7.6em; }
.date-text.is-invalid { border-color: var(--color-danger); background: #fff4f4; }
.cal-btn { border: 1px solid #c9ced8; background: #fff; border-radius: 2px; margin-left: 2px; cursor: pointer; padding: 0 4px; line-height: 1.6; font-size: 0.85rem; vertical-align: middle; }
.cal-pop button { color: var(--color-text); margin-top: 0; box-shadow: none; font-weight: 400; border-radius: 2px; }
.cal-pop { position: absolute; z-index: 70; background: #fff; border: 1px solid #8a94a6; box-shadow: 0 2px 8px rgba(0,0,0,.25); padding: 6px; font-size: 0.8rem; width: 15.5em; }
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; font-weight: 600; }
.cal-head button, .cal-foot button { font: inherit; border: 1px solid #c9ced8; background: #f4f6fa; cursor: pointer; padding: 0 6px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-grid .cal-dow { text-align: center; color: #667; font-size: 0.7rem; }
.cal-grid button { font: inherit; border: 1px solid transparent; background: none; cursor: pointer; padding: 2px 0; border-radius: 2px; }
.cal-grid button:hover { background: #dde6f4; }
.cal-grid button.today { border-color: #223a5e; }
.cal-grid button.sel { background: #223a5e; color: #fff; }
.cal-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; color: #556; }

/* Reports with a column per month or quarter (the P&L month-to-month
   layout): the table scrolls sideways rather than squeezing the figures,
   and the Total column is ruled off. */
.table-scroll { overflow-x: auto; }
.report-table .col-total { border-left: 1px solid #ccc; font-weight: 600; }

/* Save & Print sends the printable copy to a hidden frame: a pop-up opened
   from page load is blocked by default in Chrome and Edge. */
.print-frame { position: absolute; width: 0; height: 0; border: 0; visibility: hidden; }
.print-again { margin-left: .5em; }

/* "reorder" flag on the Stock Item list: on-hand has fallen to the item's
   Reorder Level (AutoCount's Reorder Advice, shown where it is noticed). */
.pill-warn { background: #fdf1dc; color: #8a5a00; border: 1px solid #e8c88a;
             border-radius: 2px; font-size: .8em; padding: 0 .35em; margin-left: .4em; }

/* Transfer From: the tick column that picks which Delivery Orders (or
   Goods Received Notes) go onto one invoice. */
.col-tick { width: 2.2em; text-align: center; }

/* The listing footer's figures for the whole filtered set. */
.listing-totals { margin: 6px 0 0; font-size: .95em; }

/* Chart of Accounts: dragging an account to another group. */
.coa-row[draggable="true"] { cursor: grab; }
.coa-row.coa-dragging { opacity: .45; }
.coa-row.coa-drop > td { background: #e8f0fb; box-shadow: inset 0 -2px 0 #2b5f9e; }
h2.coa-group.coa-drop { background: #e8f0fb; box-shadow: inset 0 -2px 0 #2b5f9e; }


/* A column heading that sorts the whole listing in the database (third
   parity audit). It has to read as a heading, not as a link in a page of
   links, so it takes the heading's own colour and shows the caret only
   on the column actually sorted. */
th[data-server-sort] { white-space: nowrap; }
th[data-server-sort] a.sort-link { color: inherit; text-decoration: none; cursor: pointer; }
th[data-server-sort] a.sort-link:hover { text-decoration: underline; }
th[data-server-sort] .sort-caret { font-size: .75em; margin-left: .25em; opacity: .75; }
th[data-sorted] a.sort-link { font-weight: 700; }

/* A field that belongs to one side of Debtor / Creditor Maintenance. */
[data-kind-only][hidden] { display: none !important; }

/* A report option that only applies to the chosen scope. */
[data-scope-only][hidden] { display: none !important; }

/* A payment-line box that does not apply to the chosen method type. */
input.muted-box { background: #f4f5f7; color: #7a8290; }