:root {
  --bg: #ffffff;
  --bg-alt: #f3f7f5;
  --text: #10231c;
  --muted: #5a6b64;
  --line: #dfe8e4;
  --brand: #0e8f6a;
  --brand-dark: #0a6f52;
  --brand-soft: #e2f4ed;
  --warn: #b45309;
  --warn-soft: #fdf0dc;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(16, 35, 28, 0.08);
}

* { box-sizing: border-box; }

/* Jumping to a section (Features, How it works, Get started) puts its top right under the sticky header */
html { scroll-behavior: smooth; scroll-padding-top: 64px; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 12px; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); letter-spacing: -0.01em; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 16px; }
a { color: inherit; }

.container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
}
/* The pages behind the login (businesses list and each business) use the whole screen width */
.admin-nav .container,
.admin .container { max-width: none; padding: 0 32px; }
@media (max-width: 640px) {
  .admin-nav .container,
  .admin .container { padding: 0 16px; }
}

/* Nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
  font-weight: 600;
  text-decoration: none;
}
.brand b { color: var(--brand); }
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-links a { text-decoration: none; font-weight: 500; }
.nav-links a:not(.btn):hover { color: var(--brand); }
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 13px 24px;
  border: 2px solid var(--brand);
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-ghost { background: transparent; color: var(--brand); }
.btn-ghost:hover { background: var(--brand-soft); border-color: var(--brand); }
.btn-small { padding: 8px 18px; }
.nav-links .btn { color: #fff; }

/* Hero */
.hero {
  padding: 72px 0 80px;
  background: linear-gradient(180deg, var(--bg-alt), var(--bg));
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}
.eyebrow {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 0.85rem;
  font-weight: 600;
}
.lead { font-size: 1.15rem; color: var(--muted); max-width: 520px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Dashboard mock */
.mock {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.mock-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
}
.mock-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
}
.mock-bar span { margin-left: 8px; font-size: 0.8rem; color: var(--muted); }
.mock-body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 16px;
}
.stat {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.stat small, .chart small { display: block; color: var(--muted); font-size: 0.75rem; }
.stat strong { font-size: 1.15rem; }
.stat-accent { background: var(--brand-soft); border-color: transparent; }
.stat-accent strong { color: var(--brand-dark); }
.chart {
  grid-column: 1 / -1;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 110px;
  margin-top: 10px;
  padding-bottom: 20px;
}
.bars span {
  position: relative;
  flex: 1;
  height: var(--h);
  border-radius: 6px 6px 0 0;
  background: var(--brand);
  opacity: 0.85;
}
.bars em {
  position: absolute;
  bottom: -20px;
  left: 0;
  right: 0;
  text-align: center;
  font-style: normal;
  font-size: 0.7rem;
  color: var(--muted);
}
.stock {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}
.stock li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 4px;
  border-top: 1px solid var(--line);
}
.stock li:first-child { border-top: 0; }
.stock b {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
}
.stock .ok { background: var(--brand-soft); color: var(--brand-dark); }
.stock .low { background: var(--warn-soft); color: var(--warn); }

/* Sections */
.section { padding: 80px 0; }
.section-alt { background: var(--bg-alt); }
.section-lead { color: var(--muted); font-size: 1.05rem; margin-bottom: 36px; }

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.card p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 1.3rem;
  font-weight: 700;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.steps p { margin: 0; color: var(--muted); }
.num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
}

/* Contact */
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.form {
  display: grid;
  gap: 16px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.form label { display: grid; gap: 6px; font-weight: 500; font-size: 0.95rem; }
.form input, .form textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  color: inherit;
  resize: vertical;
}
.form input:focus, .form textarea:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  border-color: transparent;
}
.form-note { min-height: 1.4em; margin: 0; font-size: 0.9rem; color: var(--muted); }

/* Admin login */
.hero-side { display: grid; gap: 16px; min-width: 0; }
.login-card {
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  scroll-margin-top: 80px;
}
.login-form { display: grid; gap: 12px; justify-items: start; }
.login-form h2 { font-size: 1rem; margin: 0; }
.login-fields {
  display: grid;
  gap: 12px;
  width: 100%;
}
.login-fields label { display: grid; gap: 4px; font-size: 0.85rem; font-weight: 500; }
.login-fields input,
.login-fields select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  color: inherit;
}
/* (a drop-down looks like the boxes beside it, with its own arrow) */
.login-fields select {
  appearance: none;
  padding-right: 36px;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235a6b64' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  cursor: pointer;
}
.login-fields select:invalid { color: var(--muted); }
.login-fields select option { color: var(--text); }
.login-fields input:focus,
.login-fields select:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  border-color: transparent;
}
.login-form .form-note:empty { display: none; }
.btn:disabled { opacity: 0.6; cursor: default; }
.admin-links { display: flex; align-items: center; gap: 20px; }
/* Plain text link in the header, like the menu links on the home page */
.nav-text {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.nav-text:hover { color: var(--brand); }
[hidden] { display: none !important; }

/* Admin page */
.admin { padding: 48px 0 80px; }
.admin h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 12px 0 24px; }
.dialog {
  width: min(440px, calc(100% - 32px));
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(16, 35, 28, 0.25);
  color: var(--text);
}
.dialog::backdrop { background: rgba(16, 35, 28, 0.5); }
/* The Accounts list needs room for its columns */
.dialog.accounts-dialog { width: min(820px, calc(100% - 32px)); }
/* The Activity Log page: its filters in a row, the list as tall as the screen allows,
   and the failed log ins in red */
.activity-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.activity-wrap { max-height: calc(100vh - 300px); min-height: 240px; }
.activity-filters .search { flex: 1 1 260px; margin: 0; }
.activity-filters label { display: grid; gap: 4px; font-size: 0.85rem; }
.activity-filters select,
.activity-filters input[type="date"] { padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.activity-failed td { color: #b42318; }
/* Ticked businesses for an Admin or Guest account: two columns, five lines high, then a scroll bar */
/* (also the tabs an Admin or Guest sees, in the Access section) */
.check-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; max-height: 154px; overflow-y: auto; padding-right: 4px; }
@media (max-width: 640px) { .check-list { grid-template-columns: 1fr; } }
/* An Admin account's approval authority: one line per item, with the amount when it has a limit */
.authority-list { display: grid; gap: 10px; }
.authority-row { display: grid; grid-template-columns: 1fr 288px; align-items: center; gap: 8px; font-size: 0.9rem; }
/* Its drop-down and amount; a shared line (Expenses) has one labelled pair per kind */
.authority-controls { display: grid; gap: 8px; }
.authority-part { display: grid; grid-template-columns: 150px 130px; align-items: center; gap: 8px; }
.authority-part small { grid-column: 1 / -1; color: var(--muted); font-size: 0.78rem; font-weight: 600; }
.authority-controls.shared { grid-template-columns: 1fr 1fr; align-items: start; }
.authority-controls.shared .authority-part { grid-template-columns: 1fr; gap: 4px; }
/* The account pop-up is wider, to fit the approval authority lines */
/* The account form is wide on a computer or tablet; on a phone it fills the screen */
#member-dialog { width: min(900px, calc(100% - 32px)); }
@media (min-width: 641px) { #member-dialog .check-list { grid-template-columns: repeat(3, 1fr); } }
/* The Register a Business pop-up is wide, to fit the documents */
#register-dialog { width: min(720px, calc(100% - 32px)); }
/* The pop-ups for adding and editing records on a store page (Sales, Expenses and the rest) */
#item-dialog { width: min(640px, calc(100% - 32px)); }
/* …with the documents two to a row, each in its own box, so the list needs no scrolling */
#register-dialog .doc-list { grid-template-columns: 1fr 1fr; max-height: none; overflow: visible; padding-right: 0; }
#register-dialog .doc-row,
#register-dialog .doc-row:last-child { padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
@media (max-width: 640px) { #register-dialog .doc-list { grid-template-columns: 1fr; } }
.authority-row select, .authority-row input { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
@media (max-width: 640px) {
  .authority-row { grid-template-columns: 1fr; }
  .authority-part { grid-template-columns: 1fr 1fr; }
}
.business-form { display: grid; gap: 16px; padding: 24px; }
.business-form h2 { font-size: 1.2rem; margin: 0; }
.business-form label { display: grid; gap: 6px; font-weight: 500; font-size: 0.95rem; }
.business-form input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  color: inherit;
}
.business-form input:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  border-color: transparent;
}
.business-form .form-note:empty { display: none; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
.search {
  width: 100%;
  max-width: 480px;
  margin-bottom: 14px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  color: inherit;
}
/* The search bar with Register business at its end */
.search-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.search-row .search { margin-bottom: 0; }
.search-row .btn { flex: none; }
@media (max-width: 640px) { .search-row { flex-wrap: wrap; } }
.search:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  border-color: transparent;
}
.list-note { margin: 0 0 12px; color: var(--muted); font-size: 0.95rem; }
.table tbody tr { cursor: pointer; }
.table tbody tr:hover { background: var(--bg-alt); }
.name-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand-dark);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.name-button:hover { text-decoration: underline; }
/* Lists show about 10 rows (newest first) and scroll for the rest */
.table-wrap {
  max-height: 496px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.table-wrap:has(> table[hidden]) { display: none; }
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.table thead th { position: sticky; top: 0; z-index: 1; }
.table th, .table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.table th { background: var(--bg-alt); font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
.table td:first-child { font-weight: 600; }
.table .actions { text-align: right; white-space: nowrap; }
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: #b42318;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}
.link-button:hover { text-decoration: underline; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.link-button.neutral { color: var(--brand-dark); }

/* Account settings */
/* The top of the businesses page: the ☰ button with the title beside it, close to the header line */
.admin-top { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: -28px 0 20px; }
/* Buttons beside a title (Back and Home on the Activity Log) stay on one line */
.admin-top .admin-actions { flex-wrap: nowrap; }
.admin-top h1 { margin: 0; }
/* On a store page, the category and owner line up with the store name, after the ☰ (40px + 14px gap) */
.admin-top + .business-meta { margin-top: -14px; padding-left: 54px; }
.admin-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-left: auto; }
/* Who is logged in, beside Log out: plain text, with a gold crown for the Master Account */
.who-am-i { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.95rem; color: var(--text); white-space: nowrap; }
.who-am-i .crown { flex: none; }
@media (max-width: 640px) { .who-am-i { font-size: 0.8rem; white-space: normal; } }
.dialog { max-height: calc(100% - 32px); overflow-y: auto; }
.account-email { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.account-email b { color: var(--text); }
.account-form {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.account-form h3 { margin: 0; font-size: 1rem; }
.account-form label { width: 100%; }
.account-form .form-note:empty { display: none; }
.table .actions .link-button + .link-button { margin-left: 16px; }

/* Business page */
.business-meta { margin: -16px 0 24px; color: var(--muted); }
.business-meta:empty { display: none; }
.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.tabs button {
  flex: none;
  padding: 10px 14px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.tabs button:hover { color: var(--text); }
.tabs button.active { color: var(--brand-dark); border-bottom-color: var(--brand); }
#panel h2 { font-size: 1.15rem; margin: 0 0 12px; }
#panel .table-wrap { margin-bottom: 32px; }
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.section-head h2 { margin: 0 !important; }
/* The title at the top of each tab takes the colour of the buttons */
.section-head h2, #panel > h2:first-child { color: var(--brand); }
.range { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 20px; }
/* Buttons under a list, e.g. the Sales downloads */
.list-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
/* Tuck them closer to the list above, which leaves a wide gap under itself */
.wide + .list-actions, .table-wrap + .list-actions { margin-top: -16px; }
.range label { display: grid; gap: 4px; font-size: 0.85rem; font-weight: 500; color: var(--muted); }
.range input, .range select {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  color: var(--text);
}
/* The dates a Date Range choice covers, level with the drop-down beside it */
.range-dates { margin: 0; padding: 10px 0; font-size: 0.9rem; color: var(--muted); }
.range input:focus, .range select:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  border-color: transparent;
}
.percent-box {
  margin-bottom: 20px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-alt);
}
.percent-box .list-note { margin: 12px 0 0; }
.percent-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.percent-form label { display: grid; gap: 4px; font-size: 0.85rem; font-weight: 500; color: var(--muted); }
.percent-input { display: flex; align-items: center; gap: 6px; color: var(--text); font-weight: 600; }
.percent-form input[type="date"] {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  color: var(--text);
}
.percent-input input {
  width: 110px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  color: var(--text);
}
.percent-input input:disabled { background: var(--bg-alt); color: var(--text); opacity: 1; }
.percent-input input:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  border-color: transparent;
}
.stat-section { margin-bottom: 28px; }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.stat-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  min-width: 0;
}
.stat-card small { display: block; margin-bottom: 4px; color: var(--muted); font-size: 0.85rem; }
.stat-card strong { font-size: 1.3rem; overflow-wrap: anywhere; }
/* The dashboard's seven main boxes: four on the first row, three filling the second */
.stat-grid.stat-main { grid-template-columns: repeat(12, 1fr); }
.stat-main > .stat-card { grid-column: span 3; }
.stat-main > .stat-card:nth-child(n + 5) { grid-column: span 4; }
@media (max-width: 900px) {
  .stat-grid.stat-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-main > .stat-card,
  .stat-main > .stat-card:nth-child(n + 5) { grid-column: auto; }
  /* The last one (Net Profit After Reserve Fund) takes the whole row */
  .stat-main > .stat-card:last-child { grid-column: 1 / -1; }
}
/* The smaller boxes under the main ones: the extra figures behind the summary */
/* Five to a row on a computer, fewer on narrower screens */
.stat-grid.stat-details { grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px; }
.stat-details .stat-card { padding: 9px 12px; border-radius: 10px; background: var(--bg-alt); border-color: transparent; }
/* Each smaller box: a title, then one line per part with its amount on the right */
.stat-details .detail-title { margin-bottom: 4px; font-size: 0.72rem; font-weight: 700; color: var(--text); }
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.6;
}
.detail-row span { color: var(--muted); }
.stat-details .detail-row strong { font-size: 0.82rem; font-variant-numeric: tabular-nums; }
/* The row above a list: date filters on the left, the totals for those dates on the right */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 12px;
}
.filter-bar .range { margin-bottom: 0; }
.filter-totals { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-totals .stat-card {
  min-width: 128px;
  padding: 7px 12px;
  border-radius: 10px;
  background: var(--bg-alt);
  border-color: transparent;
}
.filter-totals .stat-card small { margin-bottom: 1px; font-size: 0.7rem; }
.filter-totals .stat-card strong { font-size: 0.9rem; }
.filter-totals .stat-profit { background: var(--brand-soft); }
/* A total split into parts (Cash, Non Cash): title on top, one line per part */
.filter-totals .split-card { min-width: 168px; }
.filter-totals .split-card .detail-title { margin-bottom: 2px; font-size: 0.7rem; font-weight: 700; color: var(--text); }
.filter-totals .split-card .detail-row { font-size: 0.75rem; line-height: 1.5; }
.filter-totals .split-card .detail-row strong { font-size: 0.8rem; }
.filter-totals .stat-profit .detail-row strong { color: var(--brand-dark); }
/* The line that adds up the parts above it */
.detail-row.detail-total { margin-top: 3px; padding-top: 3px; border-top: 1px solid rgba(16, 35, 28, 0.12); }
.detail-row.detail-total span { color: var(--text); font-weight: 600; }
/* Beside a list whose first line is the record count, the side list's title sits level with it */
.split > div + div > h2 { margin-bottom: 12px; }
@media (max-width: 900px) {
  .stat-grid.stat-details { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .filter-totals { width: 100%; }
  .filter-totals .stat-card { flex: 1 1 128px; }
}
@media (max-width: 640px) {
  .stat-grid.stat-details { grid-template-columns: repeat(2, 1fr); }
}
/* A Trucking business's Dashboard: the map of its trucks */
.truck-map { height: 520px; margin: 12px 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; z-index: 0; }
@media (max-width: 640px) { .truck-map { height: 60vh; } }
/* Two long boxes under the main ones: the money that should be on hand */
.on-hand { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
/* Same colours as the smaller boxes */
.on-hand-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-color: transparent;
  background: var(--bg-alt);
}
.on-hand-card small { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--text); }
.on-hand-card strong { color: var(--text); }
@media (max-width: 640px) {
  .on-hand { grid-template-columns: 1fr; }
}
.stat-profit { background: var(--brand-soft); border-color: transparent; }
.stat-profit strong { color: var(--brand-dark); }
.stat-loss { background: #fdecea; border-color: transparent; }
.stat-loss strong { color: #b42318; }.table .center, .table .amount.center { text-align: center; }
/* `pre` keeps amounts on one line but still honours the line break in two-part cells */
.table .amount { text-align: center; font-variant-numeric: tabular-nums; white-space: pre; }
/* The amount itself: right-aligned inside a block as wide as the column's longest amount,
   so the figures line up while the block stays centred under the column name */
.amount-value { display: inline-block; text-align: right; white-space: pre; }
/* Two lists side by side: the main one, and a narrower one beside it */
.split {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
/* The narrow side list sizes its columns to fit, so dates stay on one line */
.split > div + div .table.plain { table-layout: auto; }
.split > div + div .table td:first-child { white-space: nowrap; }
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* Equal-width columns, so the amounts sit the same distance apart */
.table.plain { table-layout: fixed; }
.table.plain tbody tr { cursor: default; }
.table.plain tbody tr:hover { background: none; }
/* "Are you sure?" pop-up shown before saving or deleting */
.confirm-dialog { width: min(400px, calc(100% - 32px)); padding: 24px; }
.confirm-dialog h2 { margin: 0 0 8px; font-size: 1.2rem; overflow-wrap: anywhere; }
.confirm-dialog p { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.confirm-dialog .dialog-actions { margin-top: 20px; }
/* The ☰ button and the side menu that slides in from the left */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
}
.menu-toggle:hover { border-color: var(--brand); color: var(--brand); }
.side-menu {
  position: fixed;
  /* Starts under the header, so the TrackBiz brand always stays in view */
  top: 65px;
  left: 0;
  bottom: 0;
  z-index: 60;
  width: min(280px, 85vw);
  padding: 16px;
  background: #fff;
  border-right: 1px solid var(--line);
  box-shadow: 8px 0 30px rgba(16, 35, 28, 0.15);
  transform: translateX(-105%);
  transition: transform 0.2s ease;
}
.side-menu.open { transform: none; }
.side-menu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; font-weight: 700; }
.side-links { display: grid; gap: 4px; }
.side-link {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.side-link:hover { background: var(--brand-soft); color: var(--brand-dark); }
/* Log out sits apart, at the end of the menu */
.side-logout { margin-top: 8px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; padding-top: 16px; }
.side-backdrop { position: fixed; inset: 65px 0 0 0; z-index: 55; background: rgba(16, 35, 28, 0.35); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.side-backdrop.open { opacity: 1; pointer-events: auto; }
/* A business's documents in its pop-up: one line per kind, with what is saved and a file picker */
.doc-list { display: grid; gap: 10px; max-height: 320px; overflow-y: auto; padding-right: 4px; }
.doc-row { display: grid; gap: 4px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.doc-row:last-child { border-bottom: 0; padding-bottom: 0; }
.doc-kind { font-weight: 600; }
.doc-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--muted); font-size: 0.85rem; overflow-wrap: anywhere; }
.business-form input.doc-file { padding: 6px 8px; font-size: 0.85rem; }
/* The pop-up shown while a backup is being made: a bar that fills up, with the step and % under it */
.progress-dialog { width: min(420px, calc(100% - 32px)); padding: 24px; }
.progress-dialog h2 { margin: 0 0 16px; font-size: 1.1rem; overflow-wrap: anywhere; }
.progress-bar { height: 10px; border-radius: 999px; background: var(--bg-alt); overflow: hidden; }
.progress-fill { width: 0; height: 100%; border-radius: 999px; background: var(--brand); transition: width 0.25s ease; }
.progress-line { display: flex; justify-content: space-between; gap: 12px; margin: 10px 0 0; color: var(--muted); font-size: 0.9rem; }
.progress-line strong { color: var(--text); font-variant-numeric: tabular-nums; }
/* Delete and other buttons that cannot be undone: a soft red, not a bright one */
.btn-danger { background: #fdecea; border-color: #f2c4bf; color: #b42318; }
.btn-danger:hover { background: #fadad6; border-color: #e8a59e; color: #8f1c13; }
/* Cancel in these pop-ups is a quiet grey, so neither button shouts */
.confirm-dialog .btn-ghost { border-color: var(--line); color: var(--text); }
.confirm-dialog .btn-ghost:hover { background: var(--bg-alt); border-color: var(--muted); }
.item-fields { display: grid; gap: 16px; }
.required { color: #b42318; font-weight: 700; }
/* The small description under a drop-down */
.field-hint { color: var(--muted); font-size: 0.8rem; font-weight: 400; line-height: 1.4; }
.field-hint:empty { display: none; }
/* Add Sales: a checkbox that reveals its amounts when ticked */
.check-group {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 12px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.check-group legend { padding: 0 6px; font-weight: 600; font-size: 0.95rem; }
.business-form label.check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
  cursor: pointer;
}
.business-form label.check input { width: 18px; height: 18px; padding: 0; accent-color: var(--brand); }
.sub-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-total {
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand-dark);
}
.form-total p { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; }
.form-total-main { font-weight: 700; font-size: 1.05rem; }
.form-total-main strong { font-size: 1.6rem; line-height: 1.2; }
/* The two "actual" amounts read as details of the total above them */
.form-total-sub { padding-left: 12px; font-size: 0.85rem; color: var(--muted); }
.form-total-sub strong { font-weight: 600; color: var(--text); }
.form-total-main + .form-total-sub {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(10, 111, 82, 0.2);
}
.form-total-sub + .form-total-sub { margin-top: 4px; }
/* Tables with many columns size them to fit and scroll sideways if needed */
.wide .table.plain { table-layout: auto; }
/* Edit and Delete stay in view on the right while the other columns scroll */
.wide .table td.actions {
  position: sticky;
  right: 0;
  background: #fff;
  box-shadow: -8px 0 8px -8px rgba(16, 35, 28, 0.15);
}
.wide .table:has(td.actions) thead th:last-child { right: 0; z-index: 2; }
.wide .table td { white-space: nowrap; }
.wide .table td.amount { white-space: pre; }
.business-form select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  color: inherit;
}

@media (max-width: 900px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Phones: each business becomes a card instead of a table row */
@media (max-width: 640px) {
  .admin { padding: 32px 0 56px; }
  /* TrackBiz stays whole: the header only holds who is logged in beside it */
  .admin-nav .who-am-i { max-width: 55vw; text-align: right; }
  .table, .table tbody, .table tr, .table td { display: block; }
  .table-wrap { max-height: 70vh; border: 0; border-radius: 0; }
  .table thead { display: none; }
  .table tr {
    margin-bottom: 12px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .table td { display: flex; gap: 12px; padding: 3px 0; border: 0; overflow-wrap: anywhere; }
  /* Wide enough for "Cost of Goods Sold"; a longer label wraps instead of running into the value */
  .table td[data-label]::before {
    content: attr(data-label);
    flex: none;
    width: 136px;
    color: var(--muted);
    font-size: 0.85rem;
    white-space: normal;
  }
  .table td:first-child { font-size: 1.05rem; padding-bottom: 8px; }
  .table .actions { justify-content: flex-end; padding-top: 8px; }
  .table .amount, .table .center, .table .amount.center { text-align: left; }
  /* In the card layout each amount simply follows its label */
  .amount-value { min-width: 0 !important; text-align: left; }
  .wide .table td.actions { position: static; box-shadow: none; }
  .stat-card strong { font-size: 1.1rem; }
  .link-button { padding: 6px 0; font-size: 0.95rem; }
  .dialog-actions { flex-direction: column-reverse; }
  .dialog-actions .btn { text-align: center; padding: 12px 18px; }
}

/* Footer */
.footer { border-top: 1px solid var(--line); padding: 24px 0; color: var(--muted); font-size: 0.9rem; }
.footer-inner { display: flex; justify-content: space-between; }

/* Responsive */
@media (max-width: 900px) {
  .hero-inner, .contact { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .steps { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .hero { padding: 48px 0 56px; }
  .section { padding: 56px 0; }
  .grid { grid-template-columns: 1fr; }
  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 16px;
    background: #fff;
    border-bottom: 1px solid var(--line);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 0; }
  .nav-links .btn { margin-top: 8px; text-align: center; }
}


/* The eye button inside a password box, to show or hide what was typed */
.password-wrap { position: relative; display: block; }
.password-wrap input { width: 100%; padding-right: 44px; }
.password-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.password-eye:hover { color: var(--brand); background: var(--brand-soft); }
/* Held down on a phone: no text selection or tap highlight */
.password-eye { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
/* Access in the account pop-up: one line per tab, with View, Add, Edit, Delete and Back Up */
.access-table { display: grid; font-size: 0.88rem; }
.access-row { display: grid; grid-template-columns: minmax(110px, 1.6fr) repeat(5, minmax(44px, 1fr)); align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.access-row:last-child { border-bottom: 0; }
.access-head { font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.access-head span:not(:first-child),
.access-cell { text-align: center; color: var(--muted); }
.access-cell input { width: 18px; height: 18px; accent-color: var(--brand); }
/* A Guest is for viewing only: just the View column */
.access-table.view-only .access-row { grid-template-columns: minmax(110px, 1.6fr) minmax(44px, 1fr); }
.access-table.view-only .access-row > :nth-child(n + 3) { display: none; }
@media (max-width: 640px) { .access-row { grid-template-columns: minmax(90px, 1.4fr) repeat(5, minmax(34px, 1fr)); font-size: 0.8rem; } }

/* The 🔔 bell of an Admin or Guest account, with how many new notices, and the list it opens */
.admin-links { position: relative; }
.notice-wrap { position: relative; display: inline-flex; }
.notice-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--text); cursor: pointer; }
.notice-bell:hover { background: var(--brand-soft); color: var(--brand); }
.notice-count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #b42318; color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 18px; text-align: center; }
.notice-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 70; display: flex; flex-direction: column; width: min(360px, calc(100vw - 32px)); padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 30px rgba(16, 35, 28, 0.18); }
.notice-title { margin: 0 0 8px; font-weight: 700; }
/* Only the list scrolls (with a scroll bar at the side) once there are many; the title stays put */
.notice-list { display: grid; gap: 8px; max-height: min(440px, 55vh); overflow-y: auto; padding-right: 4px; }
.notice-item { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--bg-alt); font-size: 0.88rem; overflow-wrap: anywhere; }
.notice-item small { color: var(--muted); }
.notice-approved strong { color: var(--brand-dark); }
.notice-rejected strong { color: #b42318; }
.notice-new { box-shadow: inset 3px 0 0 var(--brand); }
.notice-empty { margin: 0; color: var(--muted); font-size: 0.88rem; }
@media (max-width: 640px) { .notice-panel { position: fixed; top: 64px; left: 16px; right: 16px; width: auto; } }
/* A notice opens its store, and one waiting for approval is marked in amber */
a.notice-item { color: inherit; text-decoration: none; }
a.notice-item:hover { background: var(--brand-soft); }
.notice-waiting strong { color: #b45309; }

/* The side menu's top bar in the TrackBiz green, with the ✕ in white */
.side-menu-head {
  margin: -16px -16px 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff;
}
.side-menu-head .menu-toggle { border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.12); color: #fff; }
.side-menu-head .menu-toggle:hover { border-color: #fff; background: rgba(255, 255, 255, 0.22); color: #fff; }
/* Each item with its icon in front */
.side-link { display: flex; align-items: center; gap: 12px; }
.side-icon { flex: none; color: var(--brand); }
.side-link:hover .side-icon { color: var(--brand-dark); }
.side-logout .side-icon { color: #b42318; }

/* The Install App pop-up (install.js): the four devices, then the steps for the one chosen */
.install-dialog { width: min(560px, calc(100% - 32px)); }
.install-body { display: grid; gap: 16px; padding: 24px; }
.install-body h2 { font-size: 1.2rem; margin: 0; }
.install-lead { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.5; }
.install-choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.install-choices.install-apps { grid-template-columns: repeat(2, 1fr); }
.install-apps .install-choice small { text-align: center; }
.install-choice {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 14px 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.install-choice small { color: var(--muted); font-size: 0.72rem; font-weight: 400; }
.install-choice:hover { border-color: var(--brand); }
.install-choice:focus { outline: none; }
.install-choice:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.install-choice.is-chosen { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); }
.install-steps { display: grid; gap: 10px; }
.install-steps ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; line-height: 1.5; font-size: 0.95rem; }
.install-now { justify-self: start; }
.install-or, .install-note { margin: 0; color: var(--muted); font-size: 0.85rem; }
.install-done { margin: 0; color: var(--brand-dark); font-weight: 600; }
@media (max-width: 480px) {
  .install-choices { grid-template-columns: repeat(2, 1fr); }
}
.install-size { display: grid; gap: 4px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--brand-soft); font-size: 0.85rem; line-height: 1.45; }
.install-size b { color: var(--brand-dark); font-size: 0.95rem; }
.install-size span { color: var(--muted); }

/* Employee Records: the form page in sections, two or three boxes a row on a computer, one on a phone */
.back-link { color: var(--brand); font-weight: 600; text-decoration: none; font-size: 0.92rem; }
.back-link:hover { text-decoration: underline; }
.employee-form { padding: 0; gap: 20px; }
.employee-section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px 18px;
  margin: 0;
  padding: 16px 18px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.employee-section legend { padding: 0 6px; font-weight: 700; font-size: 1rem; color: var(--brand-dark); }
.employee-section .field-wide { grid-column: 1 / -1; }
.business-form input.auto-field { background: var(--brand-soft); border-color: transparent; color: var(--brand-dark); font-weight: 600; }
.business-form input:disabled, .business-form select:disabled { background: #f6f8f7; color: var(--text); opacity: 1; }
.employee-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.employee-actions .btn-danger { margin-right: auto; }
.status-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
.status-active, .status-regular { background: var(--brand-soft); color: var(--brand-dark); }
.status-probationary { background: #e6f0fb; color: #2f5f8f; }
.status-lay-off { background: #eef0f2; color: #4a5560; }
.status-resigned { background: #fff4e0; color: #9a5b00; }
.status-terminated { background: #fdecea; color: #b42318; }
@media (max-width: 640px) {
  .employee-section { grid-template-columns: 1fr; padding: 14px; }
  .employee-actions .btn { flex: 1 1 auto; text-align: center; }
}

/* The inquiry form on the front page, opened by Send Inquiry, the full width of the page */
.inquiry-form { width: 100%; }
.inquiry-fields { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.inquiry-form .social-grid { grid-template-columns: repeat(4, 1fr); }
.inquiry-submit { justify-self: end; }
.social-group { margin: 0; padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: 10px; }
.social-group legend { padding: 0 6px; font-weight: 600; font-size: 0.95rem; }
.social-group legend small { color: var(--muted); font-weight: 400; }
.social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
/* Each platform: a tick box with its logo and name, and its own box under it once ticked */
.social-item { display: grid; gap: 8px; align-content: start; }
.social-check { display: flex !important; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 0.9rem; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.social-check:hover { border-color: var(--brand); }
.social-check:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.social-check input { width: 17px; height: 17px; margin: 0; padding: 0; accent-color: var(--brand); flex: none; }
.social-check svg { width: 22px; height: 22px; flex: none; }
.social-input { padding: 9px 12px !important; }
/* Hidden from people: only spam robots fill it in */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-note.is-done { color: var(--brand-dark); font-weight: 600; }
@media (max-width: 900px) {
  .inquiry-fields, .inquiry-form .social-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .inquiry-fields, .inquiry-form .social-grid { grid-template-columns: 1fr; }
  .inquiry-panel .btn, .inquiry-submit { width: 100%; justify-self: stretch; }
}

/* The Inquiries page: one card for each inquiry, newest first */
.inquiry-list { display: grid; gap: 14px; max-height: calc(100vh - 260px); min-height: 200px; overflow-y: auto; padding-right: 4px; }
.inquiry-card { display: grid; gap: 12px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.inquiry-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.inquiry-top h2 { margin: 0; font-size: 1.05rem; }
.inquiry-business { margin: 2px 0 0; color: var(--muted); font-size: 0.9rem; }
.inquiry-when { color: var(--muted); }
.inquiry-details { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: 0.92rem; }
.inquiry-details dt { color: var(--muted); }
.inquiry-details dd { margin: 0; overflow-wrap: anywhere; }
.inquiry-details a { color: var(--brand); }
.inquiry-message { margin: 0; padding: 10px 12px; border-radius: 10px; background: #f6f8f7; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.92rem; }
.inquiry-delete { justify-self: end; }
.notice-inquiry strong { color: var(--brand-dark); }
.notice-account strong { color: var(--brand-dark); }

/* Front page: "Everything you need to track" comes right under the log in and the sample dashboard,
   with only a little space between them */
.hero { padding-bottom: 56px; }
.features-section { padding-top: 32px; }

/* The sample dashboard's motion (hero-motion.js sets --mx and --my, -1 to 1, while the mouse is over it):
   the dashboard tilts toward the mouse, the badges around it spread out and follow at their own
   depth, the shapes drift the other way, and the week's bars grow again */
/* Only what sticks out sideways is cut off (no sideways scrolling on a phone); the shadows and
   badges below the dashboard show in full */
.hero { overflow-x: clip; }
.mock-stage { --mx: 0; --my: 0; position: relative; perspective: 1100px; }
.mock-stage .laptop {
  position: relative;
  z-index: 1;
  /* Turned 30° to face the left, then tilted toward the mouse */
  transform: rotateY(calc(-30deg + var(--mx) * 7deg)) rotateX(calc(var(--my) * -5deg));
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mock-stage.is-active .laptop { transition: transform 0.15s ease-out; }
.mock-stage.is-active .laptop-deck { box-shadow: inset 0 -5px 0 #aeb6b2, inset 0 1px 0 #f7f9f8, 0 30px 40px rgba(16, 35, 28, 0.28); }
/* A slim laptop like a MacBook around the sample dashboard: the lid with a thin black bezel, a
   silver edge and the camera notch at the top, then the wider keyboard half */
.laptop { display: grid; width: min(380px, 84%); margin: 0 auto; transform-style: preserve-3d; }
.laptop-lid {
  position: relative;
  padding: 7px;
  border-radius: 14px 14px 3px 3px;
  background: #0b0d0c;
  box-shadow: 0 0 0 1.5px #c7cdca, 0 0 0 2.5px #a9b0ad;
}
/* The camera notch */
.laptop-lid::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 7px;
  left: 50%;
  width: 46px;
  height: 7px;
  margin-left: -23px;
  border-radius: 0 0 5px 5px;
  background: #0b0d0c;
}
.laptop-lid .mock { border: 0; box-shadow: none; }
/* The keyboard half, hinged at the bottom of the screen, as wide as the lid, lying toward the
   viewer and tipped up a little so the keys show. Its inside is laid out at 1000 × 640 px and
   shrunk to the laptop's width (hero-motion.js sets --deck-scale). Lying down it looks about half
   as deep, so the space below it shrinks to match. */
.laptop-deck {
  --deck-h: calc(640px * var(--deck-scale, 0.33));
  position: relative;
  width: 100%;
  height: var(--deck-h);
  margin-bottom: calc(var(--deck-h) * -0.5);
  border-radius: 3px 3px 14px 14px;
  background: linear-gradient(180deg, #d9dfdc, #eceff0 18%, #e3e7e5 70%, #cfd5d2);
  box-shadow: inset 0 -5px 0 #aeb6b2, inset 0 1px 0 #f7f9f8, 0 22px 30px rgba(16, 35, 28, 0.22);
  transform: rotateX(60deg);
  transform-origin: top center;
  transition: box-shadow 0.4s ease;
  overflow: hidden;
}
.deck-inner {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr 790px 1fr;
  grid-template-rows: 318px 1fr;
  column-gap: 18px;
  row-gap: 26px;
  width: 1000px;
  height: 640px;
  padding: 40px 22px 34px;
  transform: scale(var(--deck-scale, 0.33));
  transform-origin: 0 0;
}
/* The dark hinge along the top, and the finger notch on the front edge */
.deck-inner::before,
.deck-inner::after {
  content: "";
  position: absolute;
  left: 50%;
}
.deck-inner::before { top: 0; width: 84%; height: 12px; margin-left: -42%; border-radius: 0 0 8px 8px; background: linear-gradient(180deg, #6d7672, #a3aba7); }
.deck-inner::after { bottom: 0; width: 150px; height: 12px; margin-left: -75px; border-radius: 12px 12px 0 0; background: linear-gradient(180deg, #c3cac6, #b2bab6); }
/* Speaker grills: rows of tiny holes on both sides of the keyboard */
.deck-speaker {
  border-radius: 6px;
  background: radial-gradient(circle, #8e9792 1.6px, transparent 2.2px) 0 0 / 9px 9px;
  opacity: 0.8;
}
/* The keyboard: a dark well with black keys and light labels */
.keyboard {
  display: grid;
  grid-template-rows: 30px repeat(5, 1fr);
  gap: 6px;
  padding: 8px;
  border-radius: 10px;
  background: #1c201f;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
}
.key-row { display: flex; gap: 6px; }
.key {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: linear-gradient(180deg, #2c3230, #222725);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 0 #0b0d0c;
  color: #d9dfdc;
  font: 500 17px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.key-word { justify-content: flex-start; align-items: flex-end; padding: 0 0 8px 10px; font-size: 12px; }
.key-row-fn .key { font-size: 11px; }
/* Touch ID / power: a round sensor key */
.key-power { box-shadow: inset 0 0 0 2px #3c4441, 0 2px 0 #0b0d0c; }
/* ↑ and ↓ share one place, each half as tall */
.key-updown { flex-direction: column; gap: 4px; padding: 0; background: none; box-shadow: none; }
.key-updown i { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; border-radius: 6px; font-style: normal; font-size: 12px; background: linear-gradient(180deg, #2c3230, #222725); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 0 #0b0d0c; }
/* The wide glass trackpad */
.trackpad {
  grid-column: 2;
  justify-self: center;
  width: 470px;
  border-radius: 20px;
  background: linear-gradient(180deg, #e7ebe9, #d9dfdc);
  box-shadow: inset 0 0 0 1.5px #b9c0bc, inset 0 2px 4px rgba(0, 0, 0, 0.06);
}
.float-badge {
  --push: 0;
  position: absolute;
  z-index: 2;
  translate: calc(var(--dx) * var(--push) + var(--mx) * var(--depth)) calc(var(--dy) * var(--push) + var(--my) * var(--depth));
  transition: translate 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
.mock-stage.is-active .float-badge { --push: 1; }
.float-badge > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  background: var(--badge);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--badge) 35%, transparent);
  animation: badge-bob 3.6s ease-in-out infinite alternate;
}
/* A check in a circle in front of each word */
.float-badge i {
  position: relative;
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-radius: 50%;
}
.float-badge i::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.5px;
  width: 4px;
  height: 7px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(40deg);
}
/* A soft yellow green, so it is not mistaken for one of the green buttons */
.badge-sales { --badge: #cddf92; top: -14px; left: -14px; }
.badge-sales > span { color: #3f5414; }
.badge-expenses { --badge: #f08a3c; top: 34%; left: -40px; }
.badge-profit { --badge: #e9a917; top: -12px; right: 22px; }
.badge-reserve { --badge: #14a3a3; top: 40%; right: -20px; }
.badge-transfer { --badge: #3b7ddd; bottom: 18px; left: -18px; }
.badge-backup { --badge: #ef6b4a; bottom: -16px; right: 26px; }
.badge-expenses > span { animation-delay: -1.2s; }
.badge-profit > span { animation-delay: -2.1s; }
.badge-reserve > span { animation-delay: -0.6s; }
.badge-transfer > span { animation-delay: -2.8s; }
.badge-backup > span { animation-delay: -1.7s; }
@keyframes badge-bob {
  from { transform: translateY(-3px); }
  to { transform: translateY(3px); }
}
/* Small shapes around the dashboard, moving against the mouse */
.float-shape {
  position: absolute;
  z-index: 0;
  translate: calc(var(--mx) * var(--depth)) calc(var(--my) * var(--depth));
  transition: translate 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease;
  opacity: 0.7;
  pointer-events: none;
}
.mock-stage.is-active .float-shape { opacity: 1; }
.shape-ring { top: -34px; left: 42%; width: 12px; height: 12px; border: 2px solid #14a3a3; border-radius: 50%; }
.shape-ring-small { top: auto; bottom: -30px; left: 18%; width: 9px; height: 9px; border-color: #3b7ddd; }
.shape-triangle { top: 24%; right: -40px; width: 12px; height: 11px; background: #f08a3c; clip-path: polygon(50% 100%, 0 0, 100% 0); }
.shape-square { bottom: 34%; left: -44px; width: 10px; height: 10px; border: 2px solid #e9a917; border-radius: 2px; rotate: 12deg; }
.shape-dot { bottom: 22%; right: -36px; width: 7px; height: 7px; background: #ef6b4a; border-radius: 50%; }
/* The week's bars grow from nothing each time the mouse comes over */
.mock-stage.is-active .bars span { animation: bar-grow 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i) * 60ms); }
@keyframes bar-grow {
  from { height: 0; }
}
.mock-stage.is-active .stat-accent { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent); transition: box-shadow 0.4s ease; }
/* On a tablet or phone the laptop is smaller and in the middle, with room on both sides, so
   every badge and shape around it shows without covering it or going off the screen */
@media (max-width: 900px) {
  .mock-stage { width: 100%; max-width: 560px; margin: 8px auto 0; padding: 22px 0 30px; }
  .mock-stage .laptop { width: 66%; }
  .badge-sales { top: 4px; left: 4%; }
  .badge-expenses { top: 34%; left: 0; }
  .badge-transfer { bottom: 26%; left: 2%; }
  .badge-profit { top: 0; right: 6%; }
  .badge-reserve { top: 42%; right: 0; }
  .badge-backup { bottom: 6%; right: 8%; }
  .shape-ring { top: 2px; }
  .shape-triangle { right: 4%; }
  .shape-square { left: 6%; }
  .shape-dot { right: 3%; }
  .shape-ring-small { bottom: 4px; }
}
@media (max-width: 640px) {
  /* A narrower turn, so the front of the keyboard half stays on the screen */
  .mock-stage .laptop { transform: rotateY(-16deg); width: 64%; }
  .float-badge > span { gap: 4px; padding: 4px 9px 4px 6px; font-size: 0.66rem; }
  .float-badge i { width: 12px; height: 12px; }
  .float-badge i::after { left: 2.5px; top: 0; width: 3px; height: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .float-badge > span, .mock-stage.is-active .bars span { animation: none; }
  .mock-stage .laptop, .float-badge, .float-shape { transition: none; }
}

/* The laptop's screen is 16:9, like a 1920 × 1080 display. The dashboard inside is laid out at
   960 × 540 like a real desktop page and shrunk to the screen's width (hero-motion.js sets
   --screen-scale), so it looks like a picture of the real thing. */
.screen-view { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: #fff; }
.screen-view .mock {
  position: absolute;
  top: 0;
  left: 0;
  width: 960px;
  height: 540px;
  border-radius: 0;
  transform: scale(var(--screen-scale, 0.4));
  transform-origin: 0 0;
}
.screen-view .mock-bar { height: 52px; padding: 0 24px; gap: 9px; }
.screen-view .mock-bar i { width: 13px; height: 13px; }
.screen-view .mock-bar span { margin-left: 12px; font-size: 17px; font-weight: 600; color: var(--text); }
.screen-view .mock-bar em { margin-left: auto; padding: 5px 14px; border: 1px solid var(--line); border-radius: 8px; font-style: normal; font-size: 14px; color: var(--muted); background: #fff; }
.screen-view .mock-body {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr;
  gap: 18px;
  height: 488px;
  padding: 22px 24px 24px;
}
.screen-view .stat { padding: 16px 20px; border-radius: 14px; }
.screen-view .stat small, .screen-view .chart small, .screen-view .recent small { font-size: 15px; }
.screen-view .stat strong { display: block; margin-top: 4px; font-size: 34px; line-height: 1.15; }
.screen-view .chart { grid-column: 1 / 3; display: flex; flex-direction: column; padding: 16px 20px; border-radius: 14px; }
.screen-view .bars { flex: 1; height: auto; gap: 16px; margin-top: 14px; padding-bottom: 26px; }
.screen-view .bars span { border-radius: 8px 8px 0 0; }
.screen-view .bars em { bottom: -26px; font-size: 14px; }
.screen-view .recent { display: flex; flex-direction: column; padding: 16px 20px; border: 1px solid var(--line); border-radius: 14px; }
.screen-view .stock { margin-top: 8px; font-size: 16px; }
.screen-view .stock li { padding: 13px 2px; }
.screen-view .stock b { padding: 3px 12px; font-size: 14px; }

/* The Touch Bar: a black glass strip across the top of the keyboard, with esc, a few small app
   icons, a thin neon line that slowly flows and glows, and a few controls; Touch ID at its end */
.key-touchbar {
  justify-content: flex-start;
  gap: 10px;
  padding: 0 14px;
  border-radius: 6px;
  background: linear-gradient(180deg, #0a0b0b, #050606);
  box-shadow: inset 0 0 0 1px #1d2120, 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
.tb-esc { padding: 3px 10px; border-radius: 5px; background: #2a2f2d; color: #e6ebe8; font: 600 11px/1 system-ui, sans-serif; }
.tb-app { flex: none; width: 18px; height: 18px; border-radius: 5px; }
.tb-a1 { background: linear-gradient(135deg, #ff5f8f, #b04bff); }
.tb-a2 { background: linear-gradient(135deg, #3ad0ff, #2f6bff); }
.tb-a3 { background: linear-gradient(135deg, #3fe0a0, #0e8f6a); }
.tb-neon {
  flex: 1;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, #22e0ff, #3b7dff, #a24bff, #ff4fa3, #22e0ff) 0 0 / 200% 100%;
  box-shadow: 0 0 6px rgba(80, 160, 255, 0.85), 0 0 16px rgba(162, 75, 255, 0.55);
  animation: tb-flow 4s linear infinite, tb-glow 2.4s ease-in-out infinite alternate;
}
.tb-pill { flex: none; width: 34px; height: 16px; border-radius: 5px; background: #2a2f2d; }
.tb-pill-on { background: linear-gradient(90deg, #3b7dff, #22e0ff); box-shadow: 0 0 8px rgba(34, 224, 255, 0.6); }
@keyframes tb-flow {
  to { background-position: -200% 0; }
}
@keyframes tb-glow {
  from { filter: brightness(0.9); box-shadow: 0 0 4px rgba(80, 160, 255, 0.7), 0 0 10px rgba(162, 75, 255, 0.4); }
  to { filter: brightness(1.25); box-shadow: 0 0 9px rgba(80, 160, 255, 1), 0 0 22px rgba(162, 75, 255, 0.75); }
}
/* While the mouse is over the laptop the neon flows faster */
.mock-stage.is-active .tb-neon { animation-duration: 1.6s, 1.2s; }
/* Touch ID: a plain dark key with a thin ring */
.key-power { background: linear-gradient(180deg, #1a1e1d, #121514); box-shadow: inset 0 0 0 2px #2f3633, 0 2px 0 #0b0d0c; }
@media (prefers-reduced-motion: reduce) {
  .tb-neon { animation: none; }
}

/* The header: Features, How it works and Get started as plain links, then the Log in button */
.nav-links { margin-left: auto; }
.nav-actions { display: flex; align-items: center; gap: 10px; margin-left: 28px; }
@media (max-width: 640px) {
  .nav-actions { margin-left: auto; gap: 4px; }
  .nav-actions .btn { padding: 9px 18px; }
}

/* The log in pop-up */
.login-dialog { width: min(400px, calc(100% - 32px)); }
.login-dialog .login-form { gap: 16px; padding: 24px; justify-items: stretch; }
.login-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.login-head h2 { margin: 0; font-size: 1.2rem; }
.login-close { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.login-close:hover { background: var(--bg-alt); color: var(--text); }
.login-dialog .login-fields label { font-size: 0.9rem; }

/* ---------- Front page on a computer: every section fills the screen below the header ---------- */
@media (min-width: 901px) {
  .hero,
  main > .section {
    display: flex;
    align-items: center;
    min-height: calc(100vh - 64px);
    min-height: calc(100svh - 64px);
  }
  .hero { padding: 40px 0; }
  main > .section { padding: 64px 0; }
  .features-section { padding-top: 64px; }
  /* A bigger headline and laptop to fill the first screen */
  .hero-inner { grid-template-columns: 1fr 1.05fr; gap: 64px; }
  .hero h1 { font-size: clamp(2.6rem, 4.2vw, 4rem); }
  .hero .lead { font-size: 1.25rem; max-width: 580px; }
  /* No taller than the screen leaves room for, so the first screen still holds it all */
  .mock-stage .laptop { width: min(540px, 88%, calc((100vh - 144px) / 1.18)); }
  /* The turned laptop's keyboard half looks much longer below than the space it takes, so that
     space is made to match and the laptop looks centred beside the headline */
  .laptop-deck { margin-bottom: calc(var(--deck-h) * -0.145); }
  /* …and nudged down to sit on the middle line of the headline beside it */
  .mock-stage { translate: 0 33px; }
  .badge-sales { top: 20px; }
  .badge-profit { top: 22px; }
  .badge-expenses { top: 30%; }
  .badge-reserve { top: 35%; }
  .badge-transfer { bottom: 136px; }
  .badge-backup { bottom: 100px; }
}

/* ---------- Works on every device ---------- */
.devices-section { background: radial-gradient(1200px 500px at 85% 40%, #e6f5ee, transparent 70%), #fff; }
.devices-inner { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); gap: 48px; align-items: center; }
/* About Us in the front page's Get started, and its pop-up in the side menu */
.contact-about { margin-top: 32px; text-align: center; }
/* On a computer Get started and About Us fit on one screen */
@media (min-width: 901px) {
  main > #contact { padding: 20px 0 24px; }
  #contact .inquiry-panel { min-height: 0; padding: 32px 64px; }
  #contact .contact-about { margin-top: 20px; }
}
.contact-about p { max-width: 640px; margin: 0 auto 8px; }
.contact-about .about-credit, .about-credit { margin-bottom: 0; font-size: 0.8rem; color: var(--muted); }
.about-dialog .dialog-actions { justify-content: space-between; align-items: flex-end; gap: 12px; }
.section-kicker { margin: 0 0 8px; color: var(--brand-dark); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.devices-copy h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); color: var(--brand); }
.devices-copy .section-lead { margin-bottom: 22px; max-width: 520px; }
.platforms { display: grid; max-width: 500px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.platforms li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.platforms svg { flex: none; width: 28px; height: 28px; color: var(--brand); }
.platforms span { display: grid; min-width: 0; line-height: 1.25; }
.platforms small { color: var(--muted); font-size: 0.78rem; }

/* The devices picture: a tablet at the back, the laptop overlapping it and an iPhone in front of
   both, each turned its own way. Everything is sized from the picture's width (--aw, set by
   hero-motion.js): the tablet's screen is laid out at 900 × 560 and the phone's at 300 × 640, then
   shrunk with --s and --sp. */
.devices-art {
  --aw: 700;
  --s: calc(var(--aw) * 0.00056);
  --sp: calc(var(--aw) * 0.00058);
  position: relative;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  aspect-ratio: 10 / 6.6;
  perspective: 1600px;
}
.dev-tablet {
  position: absolute;
  top: 3%;
  left: 0;
  z-index: 1;
  padding: calc(var(--aw) * 0.013px);
  border-radius: calc(var(--aw) * 0.028px);
  background: linear-gradient(160deg, #2b3431, #141a18);
  box-shadow: 0 0 0 1.5px #b8c0bc, 0 26px 50px rgba(16, 35, 28, 0.22);
  transform: rotateY(24deg) rotateZ(-1.5deg);
  transform-origin: left center;
}
.devices-art .dev-laptop {
  position: absolute;
  top: 5%;
  left: 31%;
  z-index: 2;
  width: 54%;
  margin: 0;
  transform: rotateY(-24deg) rotateX(3deg);
}
.dev-phone {
  position: absolute;
  right: 1%;
  bottom: 2%;
  z-index: 3;
  padding: calc(var(--aw) * 0.009px);
  border-radius: calc(var(--aw) * 0.042px);
  background: #0f1211;
  box-shadow: 0 0 0 1.5px #9aa39f, 0 30px 50px rgba(16, 35, 28, 0.3);
  transform: rotateY(-16deg) rotateZ(5deg);
  animation: dev-float 5s ease-in-out infinite alternate;
}
/* The iPhone's Dynamic Island */
.dev-phone::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: calc(var(--aw) * 0.017px);
  left: 50%;
  width: 30%;
  height: calc(var(--aw) * 0.012px);
  translate: -50% 0;
  border-radius: 999px;
  background: #000;
}
@keyframes dev-float { from { translate: 0 -5px; } to { translate: 0 5px; } }
.dev-view { position: relative; overflow: hidden; background: #fff; }
.dev-view-wide { width: calc(900px * var(--s)); height: calc(560px * var(--s)); border-radius: calc(var(--aw) * 0.012px); }
.dev-view-tall { width: calc(300px * var(--sp)); height: calc(640px * var(--sp)); border-radius: calc(var(--aw) * 0.034px); }
/* The phone's page starts below the Dynamic Island */
.dev-view-tall > .dv-top { height: 84px; padding-top: 30px; }
.dev-view > * { transform-origin: 0 0; }
.dev-view-wide > .dv-top, .dev-view-wide > .dv-page { width: 900px; transform: scale(var(--s)); }
.dev-view-tall > .dv-top, .dev-view-tall > .dv-page { width: 300px; transform: scale(var(--sp)); }
/* Scaling keeps the space of the full size, so the page is pulled up under the top bar */
.dev-view-wide > .dv-page { margin-top: calc(-56px * (1 - var(--s))); }
.dev-view-tall > .dv-page { margin-top: calc(-84px * (1 - var(--sp))); }
.dv-top { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 22px; border-bottom: 1px solid var(--line); font-size: 16px; }
.dv-logo { display: flex; align-items: center; font-weight: 700; font-size: 18px; }
.dv-logo i { width: 22px; height: 22px; margin-right: 8px; border-radius: 6px; background: var(--brand); }
.dv-logo b { color: var(--brand); }
.dv-who em { font-style: normal; color: var(--text); }
.dv-burger { display: inline-block; width: 22px; height: 16px; margin-right: 12px; border-top: 3px solid var(--text); border-bottom: 3px solid var(--text); position: relative; vertical-align: middle; }
.dv-burger::after { content: ""; position: absolute; left: 0; right: 0; top: 3.5px; height: 3px; background: var(--text); }
.dv-page { padding: 22px; }
.dv-title { display: flex; align-items: center; font-size: 26px; font-weight: 700; margin-bottom: 16px; }
.dv-btn { margin-left: auto; padding: 9px 18px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 14px; }
.dv-search { padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: 14px; margin-bottom: 16px; }
.dv-table { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.dv-row { display: grid; grid-template-columns: 1.3fr 1.2fr 0.8fr 1fr; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--line); font-size: 15px; }
.dv-row:first-child { border-top: 0; }
.dv-row b { color: var(--brand-dark); }
.dv-head { background: var(--bg-alt); color: var(--muted); font-size: 13px; font-weight: 700; }
.dev-view-tall .dv-top { padding: 0 16px; }
.dev-view-tall .dv-page { padding: 16px; display: grid; gap: 12px; }
.dv-store { font-size: 22px; font-weight: 700; line-height: 1.2; }
.dv-store small { display: block; color: var(--muted); font-size: 13px; font-weight: 400; }
.dv-chip { justify-self: start; padding: 6px 14px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; font-size: 14px; }
.dv-stat { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.dv-stat small { display: block; color: var(--muted); font-size: 12px; }
.dv-stat b { font-size: 20px; }
.dv-stat-main { background: var(--brand); border-color: transparent; color: #fff; }
.dv-stat-main small { color: rgba(255, 255, 255, 0.8); }
.dv-stat-main b { font-size: 28px; }
.dv-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dv-bars { display: flex; align-items: flex-end; gap: 8px; height: 110px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; }
.dv-bars i { flex: 1; height: var(--h); border-radius: 5px 5px 0 0; background: var(--brand); opacity: 0.85; }
.dv-notice { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--brand-soft); font-size: 14px; }
.dv-notice b { color: var(--brand-dark); }
.dv-item { display: flex; justify-content: space-between; padding: 12px 4px; border-bottom: 1px solid var(--line); font-size: 15px; }
.dv-item span { color: var(--muted); }
.dv-add { margin-top: 4px; padding: 12px; border-radius: 999px; background: var(--brand); color: #fff; text-align: center; font-weight: 700; font-size: 15px; }
/* Below 1200 px the words go on top and the devices under them */
@media (max-width: 1200px) {
  .devices-inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .devices-copy .section-lead { max-width: 680px; }
}
@media (max-width: 640px) {
  .platforms { grid-template-columns: 1fr 1fr; }
  .platforms li { padding: 10px; gap: 8px; }
  .platforms svg { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .dev-phone { animation: none; }
}

/* Feature cards and the How it works steps: the icon or number beside its title, the words below */
.card, .steps li { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; align-content: start; }
.card .icon, .steps .num { margin: 0; }
.card h3, .steps h3 { margin: 0; }
.card p, .steps p { grid-column: 1 / -1; margin-top: 12px; }

/* Nothing may stick out sideways on a phone (that would make the whole page wider than the screen);
   "clip" still lets shadows below show, older browsers fall back to "hidden" */
main > section { overflow-x: hidden; }
@supports (overflow-x: clip) {
  main > section { overflow-x: clip; }
}
.devices-copy, .devices-art { min-width: 0; }

/* ---------- The top section's background: a mild blend of TrackBiz green and pastel yellow
   (soft drifting colour clouds), and faint moving charts about data and analytics ---------- */
.hero { position: relative; isolation: isolate; background: linear-gradient(180deg, #f2faf6 0%, #fbfcf4 55%, #fffdf2 100%); }
.hero > .container { position: relative; z-index: 1; }
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-blob { position: absolute; border-radius: 50%; filter: blur(70px); animation: blob-drift 22s ease-in-out infinite alternate; }
.hero-blob-green { top: -12%; left: -8%; width: 52vw; height: 52vw; max-width: 760px; max-height: 760px; background: rgba(14, 143, 106, 0.13); }
.hero-blob-yellow { right: -6%; bottom: -18%; width: 48vw; height: 48vw; max-width: 720px; max-height: 720px; background: rgba(250, 222, 120, 0.32); animation-duration: 26s; animation-delay: -8s; }
.hero-blob-yellow-2 { top: 8%; left: 38%; width: 30vw; height: 30vw; max-width: 460px; max-height: 460px; background: rgba(255, 236, 160, 0.26); animation-duration: 30s; animation-delay: -15s; }
@keyframes blob-drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(4%, 6%) scale(1.08); }
  100% { transform: translate(-4%, 2%) scale(0.96); }
}
/* The charts: all faint, in TrackBiz green */
.hero-charts { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.1; }
.hc-dots { opacity: 0.55; }
.hc-line, .hc-line-2 { fill: none; stroke: #0e8f6a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hc-line { stroke-dasharray: 2400; animation: line-draw 14s ease-in-out infinite; }
.hc-line-2 { stroke-width: 2.5; stroke-dasharray: 1200; animation: line-draw 18s ease-in-out infinite; animation-delay: -6s; }
@keyframes line-draw {
  0% { stroke-dashoffset: 2400; }
  45%, 70% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -2400; }
}
.hc-area { animation: area-breathe 14s ease-in-out infinite; }
@keyframes area-breathe { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
.hc-points circle { fill: #0e8f6a; animation: point-pulse 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.hc-points circle:nth-child(2) { animation-delay: -0.6s; }
.hc-points circle:nth-child(3) { animation-delay: -1.2s; }
.hc-points circle:nth-child(4) { animation-delay: -1.8s; }
.hc-points circle:nth-child(5) { animation-delay: -2.4s; }
@keyframes point-pulse { 0%, 100% { transform: scale(0.7); } 50% { transform: scale(1.4); } }
.hc-bars rect { fill: #0e8f6a; transform-box: fill-box; transform-origin: bottom; animation: bar-bounce 3.6s ease-in-out infinite; animation-delay: var(--d); }
.hc-bars line { stroke: #0e8f6a; stroke-width: 3; }
@keyframes bar-bounce { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
.hc-donut { animation: donut-turn 24s linear infinite; transform-box: fill-box; transform-origin: center; }
.hc-ring { fill: none; stroke: #0e8f6a; stroke-width: 14; opacity: 0.35; }
.hc-arc { fill: none; stroke: #0e8f6a; stroke-width: 14; }
.hc-arc-2 { stroke: #c9a227; }
@keyframes donut-turn { to { transform: rotate(360deg); } }
.hc-figures text { fill: #0e8f6a; font: 700 30px system-ui, sans-serif; animation: figure-rise 9s ease-in-out infinite; animation-delay: var(--d); }
@keyframes figure-rise {
  0% { transform: translateY(14px); opacity: 0; }
  30%, 70% { opacity: 1; }
  100% { transform: translateY(-24px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-blob, .hc-line, .hc-line-2, .hc-area, .hc-points circle, .hc-bars rect, .hc-donut, .hc-figures text { animation: none; }
  .hc-line, .hc-line-2 { stroke-dasharray: none; }
}
/* The bottom of the top section fades into white, so it meets the next section without a line */
.hero-bg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff); }

/* "Everything you need to track" on a solid TrackBiz green, with its white cards */
.features-section { background: var(--brand); color: #fff; }
.features-section h2 { color: #fff; }
.features-section .section-lead { color: rgba(255, 255, 255, 0.85); }
.features-section .card { border-color: transparent; box-shadow: 0 14px 34px rgba(5, 50, 37, 0.25); color: var(--text); }

/* How it works: each step a white card using the whole width, with bigger words on a computer */
#how h2 { margin-bottom: 8px; }
.steps { gap: 20px; margin-top: 28px; }
.steps li { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 10px 28px rgba(16, 35, 28, 0.06); }
.steps h3 { font-size: 1.15rem; }
.steps p { font-size: 0.98rem; line-height: 1.6; }
@media (min-width: 901px) {
  #how h2 { font-size: clamp(2rem, 3.2vw, 2.8rem); }
  .steps { gap: 28px; margin-top: 44px; }
  .steps li { padding: 40px 36px 44px; column-gap: 18px; }
  .steps .num { width: 60px; height: 60px; font-size: 1.5rem; }
  .steps h3 { font-size: 1.6rem; }
  .steps p { margin-top: 20px; font-size: 1.15rem; line-height: 1.65; }
}
/* On a computer the steps fill the screen: taller cards, each with a big faint step number */
@media (min-width: 901px) {
  .steps { counter-reset: step; }
  .steps li { position: relative; overflow: hidden; min-height: min(46vh, 420px); counter-increment: step; }
  .steps li::after {
    content: "0" counter(step);
    position: absolute;
    right: 22px;
    bottom: -34px;
    color: var(--brand-soft);
    font-size: 10rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    pointer-events: none;
  }
  .steps li > * { position: relative; z-index: 1; }
}

/* ---------- Features: soft light and shade on the green, faint shapes, and richer cards ---------- */
.features-section {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(900px 520px at 88% 8%, rgba(255, 255, 255, 0.16), transparent 60%),
    radial-gradient(800px 520px at 5% 95%, rgba(0, 40, 28, 0.22), transparent 60%),
    linear-gradient(160deg, #11a079, #0e8f6a 45%, #0b7a5a);
}
.features-section > .container { position: relative; z-index: 1; }
.features-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.features-bg svg { width: 100%; height: 100%; opacity: 0.16; }
.fb-rings circle { fill: none; stroke: #fff; stroke-width: 2; }
.fb-rings { animation: fb-turn 60s linear infinite; transform-box: fill-box; transform-origin: center; }
.fb-rings-2 { animation-duration: 45s; animation-direction: reverse; }
@keyframes fb-turn { to { transform: rotate(360deg); } }
.fb-wave { fill: none; stroke: #fff; stroke-width: 2; animation: fb-drift 16s ease-in-out infinite alternate; }
.fb-wave-2 { opacity: 0.6; animation-duration: 20s; }
@keyframes fb-drift { from { transform: translateX(-60px); } to { transform: translateX(60px); } }
.fb-glyph { fill: #fff; font: 800 320px system-ui, sans-serif; opacity: 0.5; }
.features-section .section-kicker { color: #d9f5e9; }
/* The little picture at the bottom of each card */
.card-visual { grid-column: 1 / -1; margin-top: 18px; }
.cv-bars { display: flex; align-items: flex-end; gap: 6px; height: 56px; }
.cv-bars i { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #2bb38a, var(--brand)); }
.cv-split { display: grid; gap: 7px; }
.cv-split span { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--muted); }
.cv-split b { font-weight: 600; }
.cv-split i { display: block; height: 8px; border-radius: 999px; background: linear-gradient(90deg, #f08a3c var(--w), var(--bg-alt) var(--w)); }
.cv-line svg { display: block; width: 100%; height: 56px; }
.cv-area { fill: var(--brand-soft); }
.cv-path { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cv-files { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-files span { padding: 6px 12px; border-radius: 8px; font-size: 0.8rem; font-weight: 700; }
.cv-xls { background: #e3f4ea; color: #1d7a45; }
.cv-pdf { background: #fdecea; color: #b42318; }
.cv-ok { background: var(--brand-soft); color: var(--brand-dark); }
/* On a computer: a bigger title and bigger cards */
@media (min-width: 901px) {
  .features-section h2 { font-size: clamp(2.4rem, 3.6vw, 3.4rem); }
  .features-section .section-lead { font-size: 1.2rem; margin-bottom: 44px; }
  .features-section .grid { gap: 24px; }
  .features-section .card { padding: 32px 28px; border-radius: 18px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
  .features-section .card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(5, 50, 37, 0.32); }
  .features-section .icon { width: 54px; height: 54px; font-size: 1.3rem; border-radius: 14px; }
  .features-section .card h3 { font-size: 1.35rem; }
  .features-section .card p { font-size: 1.02rem; line-height: 1.6; }
  .card-visual { margin-top: 24px; }
  .cv-bars, .cv-line svg { height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .fb-rings, .fb-wave { animation: none; }
}

/* ---------- Inquire: a soft mint and pastel yellow background, a wide green panel with a little
   chat, and the form under it ---------- */
#contact {
  background:
    radial-gradient(900px 520px at 8% 15%, rgba(14, 143, 106, 0.10), transparent 60%),
    radial-gradient(800px 520px at 95% 90%, rgba(250, 222, 120, 0.28), transparent 60%),
    linear-gradient(180deg, #f6fbf8, #fffdf4);
}
#contact > .container { display: grid; gap: 24px; }
.inquiry-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 48px;
  align-items: center;
  padding: 56px;
  border-radius: 28px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(600px 360px at 90% 0%, rgba(255, 255, 255, 0.16), transparent 60%),
    radial-gradient(500px 360px at 0% 100%, rgba(0, 40, 28, 0.28), transparent 60%),
    radial-gradient(circle, rgba(255, 255, 255, 0.16) 1.4px, transparent 1.8px) 0 0 / 24px 24px,
    linear-gradient(150deg, #13a47c, #0e8f6a 50%, #0a7556);
  box-shadow: 0 30px 60px rgba(10, 117, 86, 0.25);
}
.inquiry-copy { position: relative; z-index: 1; }
.inquiry-panel .section-kicker { color: #d9f5e9; }
.inquiry-panel h2 { color: #fff; font-size: clamp(1.9rem, 3.4vw, 3rem); }
.inquiry-panel .section-lead { color: rgba(255, 255, 255, 0.88); margin-bottom: 20px; max-width: 560px; }
.inquiry-perks { display: grid; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; }
.inquiry-perks li { position: relative; padding-left: 32px; font-weight: 500; }
.inquiry-perks li::before { content: "✓"; position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); font-size: 0.75rem; font-weight: 800; }
.btn-light { background: #fff; color: var(--brand-dark); box-shadow: 0 10px 24px rgba(0, 40, 28, 0.25); }
.btn-light:hover { background: #f1faf6; }
.inquiry-panel .btn-ghost { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, 0.8); box-shadow: none; }
/* The little chat */
.inquiry-art { position: relative; display: grid; place-items: center; min-height: 320px; }
.chat-card { width: min(380px, 100%); border-radius: 22px; background: #fff; color: var(--text); box-shadow: 0 24px 50px rgba(0, 40, 28, 0.3); overflow: hidden; transform: rotate(-2deg); }
.chat-top { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.chat-top span:last-child { display: grid; line-height: 1.25; }
.chat-top small { color: var(--muted); font-size: 0.75rem; }
.chat-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; }
.chat-body { display: grid; gap: 10px; padding: 16px; background: #f7faf8; }
.chat-msg { max-width: 82%; margin: 0; padding: 10px 14px; border-radius: 16px; font-size: 0.88rem; line-height: 1.45; opacity: 0; animation: chat-in 12s ease infinite; }
.chat-them { justify-self: start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.chat-us { justify-self: end; background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.chat-body .chat-msg:nth-child(2) { animation-delay: 0.9s; }
.chat-body .chat-msg:nth-child(3) { animation-delay: 1.8s; }
.chat-body .chat-msg:nth-child(4) { animation-delay: 2.7s; }
@keyframes chat-in {
  0% { opacity: 0; transform: translateY(8px); }
  6%, 88% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: none; }
}
.chat-typing { display: flex; gap: 5px; padding: 12px 16px; }
.chat-typing i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: typing 1.2s ease-in-out infinite; }
.chat-typing i:nth-child(2) { animation-delay: 0.15s; }
.chat-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-5px); opacity: 1; } }
.chat-float { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(4px); font-size: 1.4rem; animation: dev-float 5s ease-in-out infinite alternate; }
.chat-float-1 { top: 2%; left: calc(50% - 270px); }
.chat-float-2 { bottom: 6%; left: calc(50% - 260px); animation-delay: -2s; }
.chat-float-3 { top: 12%; right: calc(50% - 270px); animation-delay: -3.5s; }
/* The form opened under the panel */
#contact .inquiry-form { margin-top: 0; background: #fff; }
@media (max-width: 900px) {
  .inquiry-panel { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 32px 22px; border-radius: 22px; }
  .inquiry-art { min-height: 0; padding: 10px 0; }
  .chat-float { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-msg { animation: none; opacity: 1; }
  .chat-typing i, .chat-float { animation: none; }
}
/* On a computer the panel fills most of the screen, with bigger words and chat */
@media (min-width: 901px) {
  .inquiry-panel { min-height: min(70vh, 640px); padding: 72px 64px; gap: 64px; }
  .inquiry-panel .section-lead { font-size: 1.2rem; }
  .inquiry-perks { gap: 14px; font-size: 1.08rem; }
  .inquiry-panel .btn { padding: 15px 34px; font-size: 1.05rem; }
  .chat-card { width: min(440px, 100%); }
  .chat-msg { font-size: 0.95rem; }
}
/* On a phone or tablet Send Inquiry comes after the little chat */
@media (max-width: 900px) {
  .inquiry-panel { gap: 0; }
  .inquiry-copy { display: contents; }
  .inquiry-copy > * { position: relative; z-index: 1; }
  .inquiry-perks { margin-bottom: 8px; }
  .inquiry-art { order: 1; margin: 12px 0 24px; }
  #open-inquiry { order: 2; }
}

/* ---------- Small, calm animations on the sample screens and the feature cards ---------- */
/* Bars that grow from the bottom, one after another, then settle and start again */
@keyframes grow-loop {
  0% { transform: scaleY(0.08); }
  18%, 82% { transform: scaleY(1); }
  100% { transform: scaleY(0.08); }
}
.devices-art .bars span,
.dv-bars i,
.cv-bars i { transform-origin: bottom; animation: grow-loop 6s cubic-bezier(0.3, 0.7, 0.2, 1) infinite; }
.devices-art .bars span:nth-child(2), .dv-bars i:nth-child(2), .cv-bars i:nth-child(2) { animation-delay: 0.12s; }
.devices-art .bars span:nth-child(3), .dv-bars i:nth-child(3), .cv-bars i:nth-child(3) { animation-delay: 0.24s; }
.devices-art .bars span:nth-child(4), .dv-bars i:nth-child(4), .cv-bars i:nth-child(4) { animation-delay: 0.36s; }
.devices-art .bars span:nth-child(5), .dv-bars i:nth-child(5), .cv-bars i:nth-child(5) { animation-delay: 0.48s; }
.devices-art .bars span:nth-child(6), .dv-bars i:nth-child(6), .cv-bars i:nth-child(6) { animation-delay: 0.6s; }
.devices-art .bars span:nth-child(7), .dv-bars i:nth-child(7), .cv-bars i:nth-child(7) { animation-delay: 0.72s; }
/* The tablet's businesses come in one by one */
@keyframes row-in {
  0% { opacity: 0; transform: translateX(-14px); }
  10%, 85% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}
.dv-table .dv-row:not(.dv-head) { animation: row-in 7s ease infinite; }
.dv-table .dv-row:nth-child(3) { animation-delay: 0.35s; }
.dv-table .dv-row:nth-child(4) { animation-delay: 0.7s; }
.dv-table .dv-row:nth-child(5) { animation-delay: 1.05s; }
/* A soft light passing over the phone's Total Sales and the laptop's last figure */
.dv-stat-main, .devices-art .stat-accent { position: relative; overflow: hidden; }
.dv-stat-main::after, .devices-art .stat-accent::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: shine 4.5s ease-in-out infinite;
}
@keyframes shine { 0%, 55% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }
/* The laptop's For Approval amounts take turns to pulse */
.devices-art .stock b { animation: pulse-chip 4s ease-in-out infinite; }
.devices-art .stock li:nth-child(2) b { animation-delay: 1s; }
.devices-art .stock li:nth-child(3) b { animation-delay: 2s; }
.devices-art .stock li:nth-child(4) b { animation-delay: 3s; }
@keyframes pulse-chip { 0%, 30%, 100% { transform: scale(1); } 12% { transform: scale(1.15); } }
/* Expenses: each bar fills to its share */
.cv-split span { grid-template-columns: 104px 1fr; }
.cv-split i { background: linear-gradient(#f08a3c, #f08a3c) no-repeat 0 0 / var(--w) 100%, var(--bg-alt); animation: fill-bar 6s ease-in-out infinite; }
.cv-split span:nth-child(2) i { animation-delay: 0.25s; }
.cv-split span:nth-child(3) i { animation-delay: 0.5s; }
@keyframes fill-bar {
  0% { background-size: 0% 100%, auto; }
  20%, 82% { background-size: var(--w) 100%, auto; }
  100% { background-size: 0% 100%, auto; }
}
/* Profit: the line draws itself and the shade under it fades in */
.cv-path { stroke-dasharray: 100; animation: draw-line 6s ease-in-out infinite; }
@keyframes draw-line {
  0% { stroke-dashoffset: 100; }
  30%, 82% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -100; }
}
.cv-area { animation: shade-in 6s ease-in-out infinite; }
@keyframes shade-in { 0%, 10% { opacity: 0; } 35%, 80% { opacity: 1; } 100% { opacity: 0; } }
/* Reports: XLS, PDF and Backup, each with its icon, hop one after another */
.cv-files span { display: inline-flex; align-items: center; gap: 6px; animation: hop 4.5s ease-in-out infinite; }
.cv-files svg { width: 18px; height: 18px; flex: none; }
.cv-files span:nth-child(2) { animation-delay: 0.3s; }
.cv-files span:nth-child(3) { animation-delay: 0.6s; }
@keyframes hop { 0%, 20%, 100% { transform: translateY(0); } 8% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
  .devices-art .bars span, .dv-bars i, .cv-bars i, .dv-table .dv-row, .dv-stat-main::after,
  .devices-art .stat-accent::after, .devices-art .stock b, .cv-split i, .cv-path, .cv-area, .cv-files span { animation: none; }
  .cv-path { stroke-dasharray: none; }
}
/* XLS, PDF and Backup fit on one line */
.cv-files { gap: 6px; flex-wrap: nowrap; }
.cv-files span { padding: 6px 9px; font-size: 0.76rem; gap: 5px; }
.cv-files svg { width: 16px; height: 16px; }

/* ---------- The side menu on a computer or tablet: a slim strip of icons that widens; the page moves over
   to make room instead of being covered (menu.js) ---------- */
@media (min-width: 641px) {
  .side-menu {
    width: 68px;
    padding: 12px 10px;
    overflow-x: hidden;
    overflow-y: auto;
    box-shadow: none;
    transform: none;
    transition: width 0.25s ease, box-shadow 0.25s ease;
  }
  .side-menu.open { width: 260px; padding: 16px; box-shadow: 8px 0 30px rgba(16, 35, 28, 0.08); }
  /* Slim: only the icons; the names and the green "Menu" bar come with the wide menu */
  .side-menu:not(.open) .side-menu-head { display: none; }
  .side-link { padding: 12px 14px; white-space: nowrap; }
  .side-link span { opacity: 0; transition: opacity 0.12s ease; }
  .side-menu.open .side-link span { opacity: 1; transition-delay: 0.1s; }
  .side-menu:not(.open) .side-logout { padding-top: 16px; }
  .side-backdrop { display: none; }
  /* The page keeps clear of the menu, slim or wide */
  .admin { padding-left: 68px; transition: padding-left 0.25s ease; }
  body:has(.side-menu.open) .admin { padding-left: 260px; }
}
/* No sliding when a page opens with the menu as it was left */
.no-anim, .no-anim .admin, .side-menu.no-anim, .side-menu.no-anim * { transition: none !important; }

/* ---------- The side menu on a computer or tablet, updated: the full height of the screen in the homepage's
   mint and pastel yellow, Log out at the very bottom, a round ">" on its edge instead of ☰, and the
   header's TrackBiz moved clear of it ---------- */
.rail-toggle { display: none; }
@media (min-width: 641px) {
  .side-menu {
    top: 0;
    z-index: 70;
    display: flex;
    flex-direction: column;
    padding-top: 16px;
    background:
      radial-gradient(240px 320px at 0% 0%, rgba(14, 143, 106, 0.16), transparent 70%),
      radial-gradient(260px 360px at 100% 100%, rgba(250, 222, 120, 0.38), transparent 70%),
      radial-gradient(circle, rgba(14, 143, 106, 0.12) 1.2px, transparent 1.6px) 0 0 / 18px 18px,
      linear-gradient(180deg, #eef8f3 0%, #fbfcf4 55%, #fff6dc 100%);
    border-right: 1px solid rgba(14, 143, 106, 0.14);
  }
  .side-menu.open { padding-top: 16px; }
  .side-menu .side-menu-head { display: none !important; }
  /* The items fill the strip, so Log out sits at the very bottom */
  .side-menu .side-links { display: flex; flex-direction: column; flex: 1; gap: 4px; }
  .side-menu .side-logout { margin-top: auto; border-top: 1px solid rgba(14, 143, 106, 0.18); }
  .side-menu .side-link:hover { background: rgba(255, 255, 255, 0.7); }
  /* The ☰ next to the page title is for phones only */
  .admin-top #menu-toggle { display: none; }
  .admin-top + .business-meta { padding-left: 0; }
  /* The round button on the strip's edge, half over it, in the middle of the screen */
  .rail-toggle {
    position: fixed;
    top: 50%;
    left: 54px;
    z-index: 75;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    margin-top: -14px;
    border: 1px solid rgba(14, 143, 106, 0.3);
    border-radius: 50%;
    background: #fff;
    color: var(--brand);
    box-shadow: 0 4px 12px rgba(16, 35, 28, 0.15);
    cursor: pointer;
    transition: left 0.25s ease, background 0.2s ease, color 0.2s ease;
  }
  .rail-toggle:hover { background: var(--brand); color: #fff; }
  .rail-toggle svg { transition: transform 0.25s ease; }
  body:has(.side-menu.open) .rail-toggle { left: 246px; }
  body:has(.side-menu.open) .rail-toggle svg { transform: rotate(180deg); }
  /* The header's TrackBiz (and the rest of it) keeps clear of the strip */
  .admin-nav { padding-left: 68px; transition: padding-left 0.25s ease; }
  body:has(.side-menu.open) .admin-nav { padding-left: 260px; }
}
.no-anim .rail-toggle, .no-anim .admin-nav { transition: none !important; }

/* ---------- The side menu looks the same on a phone: the homepage's mint and pastel yellow, the
   account's picture at the top and Log out at the bottom; there the "Menu" bar keeps its ✕ ---------- */
.side-menu {
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(240px 320px at 0% 0%, rgba(14, 143, 106, 0.16), transparent 70%),
    radial-gradient(260px 360px at 100% 100%, rgba(250, 222, 120, 0.38), transparent 70%),
    radial-gradient(circle, rgba(14, 143, 106, 0.12) 1.2px, transparent 1.6px) 0 0 / 18px 18px,
    linear-gradient(180deg, #eef8f3 0%, #fbfcf4 55%, #fff6dc 100%);
}
.side-menu .side-links { display: flex; flex-direction: column; flex: 1; gap: 4px; }
.side-menu .side-logout { margin-top: auto; border-top: 1px solid rgba(14, 143, 106, 0.18); }
.side-menu .side-link:hover { background: rgba(255, 255, 255, 0.7); }
@media (max-width: 640px) {
  .side-menu-head { background: transparent; color: var(--text); margin: -16px -16px 8px; border-bottom: 1px solid rgba(14, 143, 106, 0.14); }
  .side-menu-head .menu-toggle { border-color: var(--line); background: #fff; color: var(--text); }
}

/* The account's picture: a circle with a pencil, its name and kind of account beside it */
.side-profile { display: flex; align-items: center; gap: 12px; padding: 4px 4px 14px; margin-bottom: 6px; border-bottom: 1px solid rgba(14, 143, 106, 0.14); }
.side-avatar {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 1.5px rgba(14, 143, 106, 0.35), 0 4px 10px rgba(16, 35, 28, 0.15);
  cursor: pointer;
  overflow: visible;
}
.side-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.side-initial { color: #fff; font-weight: 800; font-size: 1rem; }
.side-avatar-edit {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
  color: var(--brand);
  font-size: 0.6rem;
  font-style: normal;
  box-shadow: 0 1px 4px rgba(16, 35, 28, 0.25);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.side-avatar:hover .side-avatar-edit, .side-avatar:focus-visible .side-avatar-edit { opacity: 1; }
.side-profile-text { display: grid; min-width: 0; line-height: 1.25; }
.side-profile-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-profile-text small { color: var(--muted); font-size: 0.75rem; }
@media (min-width: 641px) {
  .side-profile { padding: 2px 4px 12px; }
  .side-profile-text { opacity: 0; transition: opacity 0.12s ease; }
  .side-menu.open .side-profile-text { opacity: 1; transition-delay: 0.1s; }
}

/* A picture box in a form: the preview, then Add Photo / Remove */
.photo-field { display: flex; align-items: center; gap: 16px; }
.photo-preview { flex: none; display: grid; place-items: center; width: 76px; height: 76px; overflow: hidden; border: 2px dashed rgba(14, 143, 106, 0.35); background: var(--brand-soft); color: var(--brand); }
.photo-preview svg { width: 38px; height: 38px; }
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-preview img:not([hidden]) + svg { display: none; }
.photo-circle { border-radius: 50%; }
.photo-square { border-radius: 16px; }
.photo-square img { object-fit: contain; background: #fff; }
.photo-side { display: grid; gap: 6px; }
.photo-label { font-weight: 600; font-size: 0.95rem; }
.photo-buttons { display: flex; align-items: center; gap: 10px; }
.photo-remove { padding: 0; border: 0; background: none; color: #b42318; font: inherit; font-size: 0.85rem; cursor: pointer; }
.photo-remove:hover { text-decoration: underline; }

/* A small picture in front of a name in a list */
.with-avatar { display: flex; align-items: center; gap: 10px; }
td.with-avatar { display: table-cell; }
td.with-avatar > * { vertical-align: middle; }
.list-avatar { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; margin-right: 10px; overflow: hidden; border-radius: 50%; background: var(--brand-soft); color: var(--brand-dark); font-size: 0.8rem; font-weight: 800; }
.list-avatar img { width: 100%; height: 100%; object-fit: cover; }
.list-avatar-square { border-radius: 8px; background: #fff; border: 1px solid var(--line); }
.list-avatar-square img { object-fit: contain; }
/* The business's logo beside its name on its own page */
.business-logo { width: 48px; height: 48px; object-fit: contain; border-radius: 12px; background: #fff; border: 1px solid var(--line); }

/* Phones: in the record cards a long value wraps onto the next line instead of running off the
   card (the computer's table keeps each value on one line and scrolls sideways) */
@media (max-width: 640px) {
  .wide .table, .wide .table.plain { width: 100%; min-width: 0; table-layout: auto; }
  .wide .table td { white-space: normal; min-width: 0; }
  .wide .table td.amount { white-space: pre-line; }
  .table td > * { min-width: 0; overflow-wrap: anywhere; }
  .table-wrap { overflow-x: hidden; }
}

/* Under the inquiry form: Close beside Submit Inquiry */
.inquiry-actions { display: flex; justify-content: flex-end; gap: 12px; }
.inquiry-actions .btn-ghost { border: 2px solid var(--line); color: var(--text); }
.inquiry-actions .btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
/* The thank-you in the panel once an inquiry was sent */
.inquiry-success { display: flex; align-items: center; gap: 14px; max-width: 520px; margin: 0 0 22px; padding: 14px 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.35); animation: success-in 0.5s ease; }
.inquiry-success[hidden] { display: none; }
.inquiry-success-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--brand); font-size: 1.2rem; font-weight: 800; }
.inquiry-success b { display: block; font-size: 1.05rem; }
.inquiry-success small { color: rgba(255, 255, 255, 0.9); font-size: 0.9rem; }
@keyframes success-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .inquiry-success { order: 2; margin: 0 0 16px; }
}
@media (max-width: 480px) {
  .inquiry-actions { flex-direction: column-reverse; }
  .inquiry-actions .btn { width: 100%; text-align: center; }
}

/* The side menu in parts: a thin line between them, and the page you are on marked */
.side-divider { width: 100%; margin: 8px 0; border: 0; border-top: 1px solid rgba(14, 143, 106, 0.18); }
.side-link.is-current { background: rgba(14, 143, 106, 0.12); color: var(--brand-dark); font-weight: 700; }
.side-link.is-current .side-icon { color: var(--brand-dark); }

/* A store's tabs with the one Date Range at their right end; under them on a tablet, above them on a phone */
.tabs-row { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.tabs-row .tabs { flex: 1 1 auto; min-width: 0; margin-bottom: 0; border-bottom: 0; }
.shared-range { flex: none; padding-bottom: 8px; }
.shared-range .range { margin: 0; flex-wrap: nowrap; align-items: center; gap: 10px; }
.shared-range .range > label:first-child { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.shared-range .range-dates { margin: 0; white-space: nowrap; }
/* A tab with nothing of its own to pick: its totals start on the left */
.filter-bar:has(> .range:empty) { justify-content: flex-start; }
@media (max-width: 1100px) {
  .tabs-row { flex-direction: column; align-items: stretch; gap: 0; }
  .shared-range { padding: 12px 0; }
  .shared-range .range { flex-wrap: wrap; }
}
/* On a phone the Date Range goes above the tabs */
@media (max-width: 640px) {
  .tabs-row { flex-direction: column-reverse; }
  .shared-range { padding: 0 0 12px; }
}

/* A tab's title row: its own choices (the Expenses tab's Category) just left of its Add button */
.section-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; }
.inline-pick { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.85rem; font-weight: 500; }
.inline-pick select { padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; font-size: 0.92rem; color: var(--text); }
.inline-pick select:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: transparent; }
/* Gross Profit and Net Profit: their totals sit on the right */
.filter-bar:has(> .range.totals-right) { justify-content: flex-end; }
/* The Date Range beside the tabs: its label above each box, so Custom's From and To line up */
.shared-range .range { align-items: flex-end; }
.shared-range .range > label:first-child { display: grid; gap: 4px; }
.shared-range .range-dates { padding-bottom: 11px; }
/* An empty left side takes no room, so the totals start right at the edge */
.filter-bar > .range:empty { display: none; }

/* Gross Profit and Net Profit: the set-up box on the left, only as wide as it needs, and the totals
   beside it on the right; they stack on narrower screens */
.setup-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.setup-row .percent-box { flex: 0 1 640px; margin-bottom: 0; }
.setup-row .filter-bar { flex: 0 0 auto; margin: 0; }
/* The line just above a list: how many records on the left, a choice (Expenses' Category) on the right */
.list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.list-head .list-note { margin: 0; }
/* Gross Profit and Net Profit: the totals on the left, the set-up box on the right */
.setup-row .filter-bar:has(> .range.totals-right) { justify-content: flex-start; }
/* Gross Profit and Net Profit: the set-up is just its fields and buttons, without a box around them */
.percent-box.percent-plain { padding: 0; border: 0; background: none; }
.setup-row .percent-plain { flex: 0 0 auto; margin-left: auto; }
/* …lined up with the totals beside it */
.setup-row:has(.percent-plain) { align-items: flex-end; }
.percent-plain .percent-form { align-items: flex-end; }

/* Computers and tablets: each tab's title and its small total boxes bigger (about a quarter more
   than before), the titles in capitals */
@media (min-width: 641px) {
  #panel .section-head h2, #panel > h2:first-child { font-size: 1.45rem; text-transform: uppercase; letter-spacing: 0.01em; }
  .filter-totals { gap: 10px; }
  .filter-totals .stat-card { min-width: 161px; padding: 9px 15px; border-radius: 12px; }
  .filter-totals .stat-card small { margin-bottom: 2px; font-size: 0.88rem; }
  .filter-totals .stat-card strong { font-size: 1.13rem; }
  .filter-totals .split-card { min-width: 210px; }
  .filter-totals .split-card .detail-title { margin-bottom: 3px; font-size: 0.88rem; }
  .filter-totals .split-card .detail-row { font-size: 0.95rem; }
  .filter-totals .split-card .detail-row strong { font-size: 1rem; }
}

/* Each tab's Search, at the right end of the line above its list (with the Expenses Category) */
.list-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; margin-left: auto; }
.list-search { width: 260px; max-width: 100%; padding: 9px 14px 9px 36px; border: 1px solid var(--line); border-radius: 999px; font: inherit; font-size: 0.92rem; color: var(--text);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6b64' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center / 16px; }
.list-search:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: transparent; }
@media (max-width: 640px) {
  .list-tools { width: 100%; justify-content: stretch; }
  .list-tools > * { flex: 1 1 100%; }
  .list-search { width: 100%; }
}

/* Phones: the Date Range, From and To fit on one line, and nothing in the boxes runs past their edge */
@media (max-width: 640px) {
  .shared-range .range { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.15fr); gap: 6px; align-items: end; }
  .shared-range .range:not(:has(input)) { grid-template-columns: auto minmax(0, 1fr); }
  .shared-range .range label { min-width: 0; font-size: 0.75rem; }
  .shared-range .range select,
  .shared-range .range input { width: 100%; min-width: 0; padding: 8px 6px; font-size: 0.8rem; }
  .shared-range .range-dates { padding-bottom: 9px; font-size: 0.8rem; white-space: normal; }
  /* Boxes: long amounts and labels wrap instead of sticking out */
  .stat-card, .filter-totals .stat-card, .split-card { min-width: 0; max-width: 100%; }
  .stat-card small, .stat-card strong, .detail-row span, .detail-row strong { overflow-wrap: anywhere; min-width: 0; }
  .detail-row { flex-wrap: wrap; column-gap: 8px; }
  .filter-totals { width: 100%; }
  .filter-totals .stat-card { flex: 1 1 140px; }
  .filter-totals .split-card { flex: 1 1 100%; }
}
@media (max-width: 640px) {
  /* Same height for the Date Range drop-down and the two dates, and the dates' full text */
  .shared-range .range select, .shared-range .range input { height: 36px; box-sizing: border-box; padding: 6px 4px; font-size: 0.74rem; letter-spacing: -0.01em; }
  /* A long amount in a card wraps onto the next line */
  .table .amount-value { white-space: pre-line; overflow-wrap: normal; }
  /* Gross Profit and Net Profit: the totals, then the set-up under them, each the full width */
  .setup-row { flex-direction: column; align-items: stretch; }
  .setup-row .filter-bar, .setup-row .percent-plain { flex: 1 1 auto; width: 100%; margin-left: 0; }
  .percent-form { flex-wrap: wrap; }
  .percent-form input { min-width: 0; }
}

/* Gross Profit and Net Profit: the history's title is as tall as the line above the daily list
   (its count and Search), so both tables start level */
.list-head { min-height: 44px; }
.split > div > h2:first-child { display: flex; align-items: center; min-height: 44px; margin: 0 0 10px !important; }

/* Computers and tablets: the side menu's account part is exactly as tall as the header, so the
   line under it continues the header's line; and nothing in the menu moves up, down or sideways
   when it is widened or made slim again (same padding both ways, the names kept on one line) */
@media (min-width: 641px) {
  .side-menu, .side-menu.open { padding: 0 10px 12px; }
  .side-profile {
    box-sizing: border-box;
    height: 65px;
    margin: 0 -10px 8px;
    padding: 0 14px;
    border-bottom: 1px solid var(--line);
    flex: none;
  }
  .side-profile-text { white-space: nowrap; overflow: hidden; }
  .side-profile-text b, .side-profile-text small { overflow: hidden; text-overflow: ellipsis; }
  .side-link span { white-space: nowrap; }
  .side-menu:not(.open) .side-logout { padding-top: 12px; }
  .side-menu .side-logout { padding-top: 12px; }
}

/* ---------- The Dashboard: the main boxes and the Daily Sales bar graph on the left; the money on
   hand, the smaller boxes and the downloads on the right (one under the other on smaller screens) */
.dash-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 460px); gap: 20px; align-items: start; }
.dash-main, .dash-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.dash-main .stat-section { margin: 0; }
.dash-side .on-hand { grid-template-columns: 1fr; margin: 0; }
.dash-side .stat-details { grid-template-columns: 1fr 1fr; margin: 0; }
.dash-side .list-actions { margin-top: 2px; justify-content: stretch; }
.dash-side .list-actions .btn { flex: 1 1 0; text-align: center; }
@media (max-width: 1100px) {
  .dash-layout { grid-template-columns: minmax(0, 1fr); }
  .dash-side .stat-details { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .dash-side .on-hand { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .dash-side .on-hand { grid-template-columns: 1fr; }
}
/* The Daily Sales bar graph */
.sales-chart { padding: 16px 18px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.sales-chart-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin-bottom: 12px; }
.sales-chart-head h3 { margin: 0; font-size: 1.05rem; color: var(--brand-dark); }
.sales-chart-head span { color: var(--muted); font-size: 0.85rem; }
.chart-bars { display: flex; align-items: stretch; gap: 3px; height: 240px; }
.chart-col { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; cursor: default; }
.chart-bar { width: 100%; max-width: 34px; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, #2bb38a, var(--brand)); transition: filter 0.15s ease; }
.chart-empty { background: var(--line); }
.chart-col:hover .chart-bar { filter: brightness(1.15); }
.chart-day { height: 14px; color: var(--muted); font-size: 0.7rem; line-height: 14px; }
@media (max-width: 640px) {
  .chart-bars { height: 180px; gap: 2px; }
  .chart-day { font-size: 0.6rem; }
}
/* The bar graph grows down to where the right side ends */
@media (min-width: 1101px) {
  .dash-layout { align-items: stretch; }
  .dash-main { grid-template-rows: auto 1fr; }
  .sales-chart { display: flex; flex-direction: column; }
  .sales-chart .chart-bars { flex: 1 1 auto; height: auto; min-height: 240px; }
}
/* Phones: the Dashboard's boxes never push past the screen, however long their amounts */
@media (max-width: 1100px) {
  .stat-grid.stat-main, .dash-side .stat-details { min-width: 0; }
  .stat-grid.stat-main > .stat-card, .dash-side .stat-details > .stat-card { min-width: 0; }
}
/* Phones: only every fifth day is numbered under the bar graph, so the numbers do not run together */
@media (max-width: 640px) {
  .chart-col:not(:nth-child(5n + 1)) .chart-day { visibility: hidden; }
}

/* Gross Profit and Net Profit: the history's title and the set-up (its label beside its box) on one
   line, level with the Search beside them */
.history-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-height: 44px; margin-bottom: 10px; }
.history-head h2 { margin: 0 !important; }
.history-head .percent-plain { margin: 0; }
.history-head .percent-form { align-items: center; gap: 8px; }
.history-head .percent-form label { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.history-head .percent-form input { padding: 7px 10px; }
.history-head .percent-form .btn { padding: 7px 16px; }
/* Dashboard on tablets and phones: the smaller boxes two to a row */
@media (max-width: 1100px) {
  .dash-side .stat-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .dash-side .stat-details { gap: 8px; }
  .dash-side .stat-details .stat-card { padding: 8px 10px; }
  .dash-side .stat-details .detail-row { font-size: 0.7rem; }
  .dash-side .stat-details .detail-row strong { font-size: 0.74rem; }
}
/* …in one line: the title already names it, so the box's own label is left out of sight */
.history-head { flex-wrap: nowrap; }
.history-head h2 { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-head .percent-plain { flex: none; }
.history-head .percent-form { flex-wrap: nowrap; }
.history-head .percent-form label { font-size: 0; gap: 0; }
.history-head .percent-form input { width: 74px; font-size: 0.9rem; }
.history-head .percent-input { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--muted); }

/* ---------- The Master Account's Account Settings page: the picture on the left, the account
   details on the right, both the same height ---------- */
.settings-grid { display: grid; grid-template-columns: minmax(320px, 440px) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.settings-card { display: grid; align-content: start; gap: 14px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 4px 14px rgba(20, 50, 40, 0.05); }
.settings-card h2 { margin: 0; font-size: 1.15rem; color: var(--brand-dark); }
.settings-form { padding: 0; gap: 12px; }
.settings-form input[readonly] { background: var(--bg-alt); color: var(--text); cursor: default; }
.settings-form.is-editing input { background: #fff; }
.settings-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.form-note.is-done { color: var(--brand-dark); font-weight: 600; }
/* The picture, like on Facebook: the whole square shows, the part outside the circle faded, and the
   picture is moved by grabbing it */
.settings-photo { justify-items: center; align-content: space-between; }
.settings-photo h2 { justify-self: start; }
.crop-frame { position: relative; width: min(100%, 320px); aspect-ratio: 1; overflow: hidden; border-radius: 14px; background: var(--brand-soft); touch-action: none; user-select: none; }
.crop-frame.has-picture { cursor: grab; background: #222; }
.crop-frame.is-dragging { cursor: grabbing; }
.crop-frame::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 999px rgba(255, 255, 255, 0.55); pointer-events: none; }
.crop-frame:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
.crop-frame img { position: absolute; top: 50%; left: 50%; max-width: none; pointer-events: none; }
.crop-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--brand); font-size: 5rem; font-weight: 800; }
.crop-zoom-row { display: flex; align-items: center; gap: 8px; width: min(100%, 320px); }
.crop-zoom-row input { flex: 1; accent-color: var(--brand); }
.crop-step { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--text); font-size: 1rem; cursor: pointer; }
.crop-step:hover { border-color: var(--brand); color: var(--brand); }
.crop-hint { text-align: center; }
.settings-photo .settings-actions { justify-content: center; }
/* The current password pop-up and the pop-up that says how it went */
.current-password-box { display: block; margin-top: 14px; }
.current-password-box input { width: 100%; padding: 11px 44px 11px 14px; border: 1px solid var(--line); border-radius: 10px; font: inherit; color: inherit; }
.current-password-box input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(14, 143, 106, 0.15); }
#current-password-form .form-note { margin: 8px 0 0; color: #b42318; }
#current-password-form .form-note:empty { display: none; }
#current-password-form .dialog-actions { margin-top: 18px; }
.result-dialog { text-align: center; }
.result-dialog .dialog-actions { justify-content: center; }
.result-mark { display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: 10px; border-radius: 50%; font-size: 1.6rem; font-weight: 800; }
.result-dialog.is-done .result-mark { background: var(--brand-soft); color: var(--brand-dark); }
.result-dialog.is-failed .result-mark { background: #fdecea; color: #b42318; }
@media (max-width: 900px) {
  .settings-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .settings-card { padding: 16px; }
  .settings-actions .btn { flex: 1 1 auto; text-align: center; }
}

/* ---------- Dashboard: each main box in its own soft pastel, with a light shadow, growing a little
   when pointed at */
.stat-main > .stat-card {
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(20, 50, 40, 0.07);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.stat-main > .stat-card:hover { transform: scale(1.03); box-shadow: 0 10px 24px rgba(20, 50, 40, 0.12); }
/* Each main box's title stays on one line (menu.js makes its print smaller when the box is narrow,
   e.g. with the side menu open), and the amounts of a row sit level at the bottom of their boxes */
.stat-main > .stat-card { display: flex; flex-direction: column; }
.stat-main > .stat-card small { white-space: nowrap; }
.stat-main > .stat-card strong { margin-top: auto; }
.stat-main > .tone-sales { background: #d3ecdf; }
.stat-main > .tone-sales strong { color: #1d6b52; }
.stat-main > .tone-cost { background: #fbdfcb; }
.stat-main > .tone-cost strong { color: #9a5530; }
.stat-main > .tone-gross { background: #d4e5f8; }
.stat-main > .tone-gross strong { color: #2f5f8f; }
.stat-main > .tone-expenses { background: #f8d6df; }
.stat-main > .tone-expenses strong { color: #9b4058; }
.stat-main > .tone-net { background: #d7eecb; }
.stat-main > .tone-net strong { color: #3c7a2c; }
.stat-main > .tone-reserve { background: #fbedbf; }
.stat-main > .tone-reserve strong { color: #8a6d12; }
.stat-main > .tone-after { background: #e0d7f6; }
.stat-main > .tone-after strong { color: #5b479a; }
.stat-main > .stat-card.stat-loss { background: #fbd9d5; }
.stat-main > .stat-card.stat-loss strong { color: #b42318; }
@media (prefers-reduced-motion: reduce) {
  .stat-main > .stat-card, .stat-main > .stat-card:hover { transition: none; transform: none; }
}

/* The Daily Sales bar graph: the front page's soft green-to-yellow background, bars that take the
   whole width with thin gaps, in two alternating greens */
.sales-chart {
  border-color: transparent;
  background: radial-gradient(ellipse at 0% 0%, rgba(14, 143, 106, 0.12), transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgba(250, 222, 120, 0.32), transparent 60%),
    linear-gradient(180deg, #f2faf6 0%, #fbfcf4 55%, #fffdf2 100%);
  box-shadow: 0 4px 14px rgba(20, 50, 40, 0.07);
}
.chart-bars { gap: 2px; }
.chart-bar { max-width: none; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #5cc4a0, #2a9d78); }
.chart-bar.chart-bar-alt { background: linear-gradient(180deg, #a8dcc4, #6fbf9c); }
.chart-bar.chart-empty { background: rgba(0, 0, 0, 0.08); }
@media (max-width: 640px) {
  .chart-bars { gap: 1px; }
}

/* ---------- Dashboard: the bar graph in glassy 3D bars (no box around it), with the Top Sellers
   box beside it */
.dash-main .sales-chart { display: flex; flex-direction: column; min-width: 0; padding: 8px 4px 0 0; border: 0; background: none; box-shadow: none; }
.dash-main .sales-chart .chart-bars { flex: 1 1 auto; height: auto; min-height: 240px; }
.chart-bars {
  --depth: 8px;
  gap: 4px;
  padding-top: calc(var(--depth) + 4px);
  /* faint guide lines behind the bars */
  background: repeating-linear-gradient(0deg, transparent 0 calc(25% - 1px), rgba(16, 35, 28, 0.07) calc(25% - 1px) 25%);
  background-clip: content-box;
}
.chart-col { padding-right: var(--depth); }
.chart-bar {
  --c: 163, 173, 181;
  position: relative;
  width: 100%;
  max-width: none;
  border-radius: 0;
  background: linear-gradient(90deg, rgba(var(--c), 0.92), rgba(var(--c), 0.72));
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.35);
  transition: filter 0.15s ease;
}
/* the top and the right side of each bar, lighter and darker */
.chart-bar::before, .chart-bar::after { content: ""; position: absolute; pointer-events: none; }
.chart-bar::before { left: 0; bottom: 100%; width: 100%; height: var(--depth); background: rgba(var(--c), 0.45); transform: skewX(-45deg); transform-origin: bottom left; }
.chart-bar::after { left: 100%; top: 0; width: var(--depth); height: 100%; background: rgba(var(--c), 1); filter: brightness(0.82); transform: skewY(-45deg); transform-origin: top left; }
/* two soft greys, close to each other, that sit well beside the pastel boxes */
.chart-tone-0 { --c: 163, 173, 181; }
.chart-tone-1 { --c: 189, 197, 203; }
.chart-bar.chart-empty { --c: 205, 211, 215; background: rgba(var(--c), 0.45); }
.chart-col:hover .chart-bar, .chart-col:focus-visible .chart-bar { filter: brightness(1.08) saturate(1.15); }
.chart-col:focus-visible { outline: none; }
/* the date and amount, shown only while a bar is pointed at */
.chart-tip { position: fixed; left: 0; top: 0; z-index: 1000; padding: 6px 10px; border-radius: 8px; background: #10231c; color: #fff; font-size: 0.78rem; font-weight: 600; white-space: nowrap; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.1s ease; }
.chart-tip.is-shown { opacity: 1; visibility: visible; }
@media (max-width: 640px) {
  .chart-bars { --depth: 4px; gap: 2px; }
}

/* The Top Sellers box: the top 3 staff, then the top 10 days */
.top-sellers { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: 0 4px 14px rgba(20, 50, 40, 0.07); }
.top-sellers h3 { margin: 0; font-size: 1rem; color: var(--brand-dark); }
.top-sellers h3 + .top-list { margin-bottom: 6px; }
.top-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.top-list li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border-radius: 10px; background: var(--bg-alt); }
.top-staff li { padding: 10px 12px; }
.top-staff li:nth-child(1) { background: #fdf6dc; }
.top-staff li:nth-child(2) { background: #eef1f5; }
.top-staff li:nth-child(3) { background: #fbeee4; }
.top-rank { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--muted); font-size: 0.75rem; font-weight: 800; }
.top-rank-1 { background: #f6d66b; color: #6b4f00; }
.top-rank-2 { background: #cfd6df; color: #3d4652; }
.top-rank-3 { background: #ebb68e; color: #6b3712; }
.top-name { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 0.9rem; overflow-wrap: anywhere; }
.top-name small { display: block; color: var(--muted); font-weight: 400; font-size: 0.72rem; }
.top-amount { flex: none; font-size: 0.95rem; color: var(--brand-dark); }
.top-split { flex: none; display: grid; gap: 1px; text-align: right; font-size: 0.8rem; font-weight: 600; }
.top-split small { margin-right: 6px; color: var(--muted); font-weight: 400; font-size: 0.68rem; }

.top-total { flex: none; font-size: 0.85rem; font-weight: 700; color: var(--brand-dark); }
/* The bars grow from zero up to their amounts, one after another */
@keyframes bar-grow { from { height: 0; } }
.chart-bar { animation: bar-grow 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(min(var(--i, 0), 40) * 18ms); }
@media (prefers-reduced-motion: reduce) {
  .chart-bar { animation: none; }
}

/* ---------- Dashboard: three columns — the main boxes over the bar graph, the money on hand down to
   the downloads, and the top performers on the right, all as tall as each other. The Top 10 Days
   fit without a scroll bar. */
@media (min-width: 1101px) {
  .dash-layout:has(> .top-sellers) { grid-template-columns: minmax(0, 1fr) minmax(330px, 420px) minmax(240px, 290px); }
  /* The smaller boxes take any extra height, so the download buttons keep their size */
  .dash-side { grid-template-rows: auto 1fr auto; }
}
.top-sellers { gap: 6px; padding: 14px; }
.top-list li { gap: 8px; padding: 6px 10px; }
.top-staff li { padding: 8px 10px; }
.top-days { flex: 1 1 auto; grid-template-rows: repeat(10, minmax(38px, 1fr)); gap: 5px; }
/* The date over the name, and the name on one line */
.top-days .top-name { display: grid; gap: 1px; overflow: hidden; }
.top-days .top-name small { line-height: 1.2; }
.top-days .top-name b { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; line-height: 1.25; }

/* Phones and tablets: the Dashboard's download buttons go to the very bottom, under the top performers */
@media (max-width: 1100px) {
  .dash-side { display: contents; }
  .dash-layout > .dash-side > .list-actions { order: 10; }
}
/* Phones: the Gross Profit and Net Profit set-up sits across from the records count, above the Search */
@media (max-width: 640px) {
  .list-head .percent-box { margin: 0 0 0 auto; }
  .list-head .percent-form { flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
  .list-head .percent-form label:first-child { display: flex; align-items: center; gap: 0; font-size: 0; white-space: nowrap; }
  .list-head .percent-input { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--muted); }
  .list-head .percent-form input { padding: 7px 10px; font-size: 0.9rem; }
  .list-head .percent-input input { width: 74px; }
  .list-head .percent-form .btn { padding: 7px 16px; }
}
/* Phones: the tab's title row, with its Add button across from the title, stays at the top while
   the list scrolls */
@media (max-width: 640px) {
  #panel .section-head:has([data-add]) {
    position: sticky;
    top: var(--nav-height, 0px);
    z-index: 5;
    margin: 0 -16px 12px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
  }
  #panel .section-head [data-add] { flex: none; }
}
/* Account Settings: the eye shows only while the password is being changed */
.settings-form input[readonly] + .password-eye,
.settings-form .password-wrap:has(input[readonly]) .password-eye { display: none; }
/* The Activity Log and Account Settings rows of the Access table are not for a Guest account */
/* (a Guest has the same rows as everyone, View only) */
/* ---------- Amounts never break across lines (no ".00" dropping to the next line) on any screen:
   they stay on one line, and menu.js makes the print smaller when a box is too narrow for them */
.stat-card strong, .detail-row strong, .top-amount, .top-total {
  white-space: nowrap;
  overflow-wrap: normal !important;
  word-break: normal;
  overflow: hidden;
  text-overflow: clip;
}
.stat-card > strong { display: block; max-width: 100%; }
.detail-row strong, .top-amount, .top-total { flex-shrink: 1; min-width: 0; }
.detail-row span { min-width: 0; }

/* ---------- The Analytics page ---------- */
.analytics-boxes { margin-bottom: 16px; }
.stat-main.analytics-boxes > .stat-card,
.stat-main.analytics-boxes > .stat-card:nth-child(n + 5) { grid-column: span 3; }
.analytics-views { display: block; margin-top: 2px; color: var(--muted); font-size: 0.82rem; }
.analytics-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 16px; align-items: stretch; }
.analytics-layout .sales-chart { display: flex; flex-direction: column; min-width: 0; padding: 8px 4px 0 0; border: 0; background: none; box-shadow: none; }
.analytics-layout .chart-bars { flex: 1 1 auto; min-height: 260px; }
.analytics-pages .list-note { margin: -4px 0 4px; font-size: 0.78rem; }
.analytics-note { margin-top: 14px; }
@media (max-width: 900px) {
  .stat-main.analytics-boxes > .stat-card,
  .stat-main.analytics-boxes > .stat-card:nth-child(n + 5),
  .stat-main.analytics-boxes > .stat-card:last-child { grid-column: auto; }
  .analytics-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- A store's tabs as a top menu: Dashboard, the Records and Profit drop-downs, For Approval ---------- */
.tabs.tab-menu { flex-wrap: wrap; align-items: center; gap: 6px; overflow: visible; padding: 6px 0 10px; }
.tab-menu button[data-tab], .tab-group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.tab-menu > button[data-tab]:hover, .tab-group-toggle:hover { background: var(--bg-alt); color: var(--text); }
.tab-menu > button[data-tab].active, .tab-group-toggle.active, .tab-group-toggle[aria-expanded="true"] { background: var(--brand-soft); color: var(--brand-dark); }
.tab-menu button.active { border-bottom-color: transparent; }
.tab-icon { flex: none; }
.tab-chevron { flex: none; margin-left: -2px; transition: transform 0.15s ease; }
.tab-group-toggle[aria-expanded="true"] .tab-chevron { transform: rotate(180deg); }
.tab-group { position: relative; }
.tab-group[hidden] { display: none; }
.tab-group-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  display: grid;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(16, 35, 28, 0.14);
}
.tab-group-menu[hidden] { display: none; }
.tab-group-menu button[data-tab] { justify-content: flex-start; width: 100%; padding: 10px 12px; color: var(--text); font-weight: 500; }
.tab-group-menu button[data-tab]:hover { background: var(--bg-alt); }
.tab-group-menu button[data-tab].active { background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; }
.tab-group-menu button[data-tab][hidden] { display: none; }
.tab-group-menu .tab-icon { color: var(--brand); }
/* Phones: the four items share the width, two to a row, and a drop-down opens the full width */
@media (max-width: 640px) {
  .tabs.tab-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 0 10px; }
  .tab-menu > button[data-tab], .tab-group, .tab-group-toggle { width: 100%; min-width: 0; }
  .tab-group-toggle { height: 100%; }
  .tab-menu > button[data-tab], .tab-group-toggle { justify-content: center; padding: 9px 8px; font-size: 0.9rem; }
  .tab-menu .tab-label { overflow: hidden; text-overflow: ellipsis; }
  .tab-group { position: static; }
  .tabs.tab-menu { position: relative; }
  .tab-group-menu { left: 0; right: 0; min-width: 0; }
}
/* On a computer the store's menu sits in the top bar, beside TrackBiz */
.tabs.tab-menu.in-top-bar { flex: 1 1 auto; flex-wrap: nowrap; min-width: 0; margin: 0 16px 0 28px; padding: 0; border: 0; }
.tabs.tab-menu.in-top-bar > button[data-tab], .tabs.tab-menu.in-top-bar .tab-group-toggle { padding: 8px 12px; }
.tabs.tab-menu.in-top-bar .tab-group-menu { top: calc(100% + 10px); }
/* With the menu up in the top bar, the Date Range has the row to itself, on the right */
.tabs-row:not(:has(> .tabs)) { justify-content: flex-end; }
.tabs-row:not(:has(> .tabs)) .shared-range { padding: 4px 0 10px; }
/* …and the Date Range sits on the right of the store's name; the empty row under it goes away */
.shared-range.beside-name { margin-left: auto; padding: 0; }
.tabs-row:not(:has(> *)) { display: none; }
/* Beside the store's name the Date Range is one line (its labels in front of their boxes), and the
   page starts right under the name, with no space left over */
.shared-range.beside-name .range { align-items: center; }
.shared-range.beside-name .range > label { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 0.85rem; }
.shared-range.beside-name .range select,
.shared-range.beside-name .range input { padding: 7px 10px; }
.shared-range.beside-name .range-dates { padding-bottom: 0; }
.admin-top:has(.beside-name) { margin-bottom: 14px; }
.admin-top:has(.beside-name) + .business-meta { margin-bottom: 14px; }
.admin-top:has(.beside-name) ~ #page-note:empty { display: none; }
/* Wide computer screens: the tab's title and totals in the middle of the store's name row */
.name-block { display: grid; gap: 4px; min-width: 0; }
.name-block .business-meta { margin: 0 !important; padding: 0 !important; }
.head-slot { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 16px; min-width: 0; }
.head-slot .section-head { margin: 0; }
.head-slot .section-head h2 { white-space: nowrap; }
.head-slot .filter-bar { margin: 0; flex-wrap: nowrap; }
.head-slot .filter-bar > .range:empty { display: none; }
.head-slot .filter-totals { flex-wrap: nowrap; }
.head-slot .filter-totals .stat-card { min-width: 0; flex: 1 1 140px; }
.admin-top:has(.head-slot) { flex-wrap: nowrap; align-items: center; }
.head-slot h2 { margin: 0; color: var(--brand); font-size: 1.45rem; text-transform: uppercase; letter-spacing: 0.01em; white-space: nowrap; }
.head-slot .stat-card small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The tab's title over its boxes, both in the middle of the name row */
.head-slot { flex-direction: column; justify-content: center; align-items: center; gap: 8px; text-align: center; }
.head-slot .section-head { justify-content: center; }
.head-slot .filter-bar { justify-content: center; }
.head-slot .filter-totals { justify-content: center; }
.head-slot .stat-card { text-align: left; }

/* ---------- Add Records: one card per thing that can be added ---------- */
.entry-lead { margin: -4px 0 16px; }
.entry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.entry-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 4px 14px rgba(20, 50, 40, 0.06);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.entry-card:hover, .entry-card:focus-visible { transform: translateY(-2px); border-color: var(--brand); box-shadow: 0 10px 24px rgba(20, 50, 40, 0.12); outline: none; }
.entry-plus { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-dark); font-size: 1.6rem; font-weight: 700; line-height: 1; }
.entry-text { display: grid; gap: 2px; min-width: 0; }
.entry-text b { font-size: 1.02rem; }
.entry-text small { color: var(--muted); font-size: 0.82rem; }
.head-slot .entry-lead { display: none; }
@media (max-width: 640px) {
  .entry-grid { grid-template-columns: 1fr; gap: 10px; }
  .entry-card { padding: 14px; }
}

/* ---------- Statistics ---------- */
.stats-quick { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 16px; align-items: start; }
.stats-card { display: grid; gap: 10px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 4px 14px rgba(20, 50, 40, 0.06); min-width: 0; }
.stats-card h3 { margin: 0; font-size: 1rem; color: var(--brand-dark); }
.stats-card .list-note { margin: -6px 0 0; font-size: 0.8rem; }
.stats-grid .top-sellers { grid-row: span 2; }
.bar-list { display: grid; gap: 8px; }
.bar-row { display: grid; grid-template-columns: minmax(70px, 120px) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 0.85rem; }
.bar-label { overflow: hidden; color: var(--text); white-space: nowrap; text-overflow: ellipsis; }
.bar-track { height: 12px; border-radius: 999px; background: var(--bg-alt); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #a3adb5, #bdc5cb); animation: bar-grow-x 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.bar-green .bar-fill { background: linear-gradient(90deg, #5cc4a0, #2a9d78); }
.bar-rose .bar-fill { background: linear-gradient(90deg, #f0a6b8, #d97a92); }
.bar-value { font-variant-numeric: tabular-nums; font-size: 0.82rem; white-space: nowrap; }
@keyframes bar-grow-x { from { width: 0; } }
@media (prefers-reduced-motion: reduce) { .bar-fill { animation: none; } }
@media (max-width: 900px) {
  .stats-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-grid .top-sellers { grid-row: auto; }
}
@media (max-width: 640px) {
  .bar-row { grid-template-columns: minmax(60px, 90px) minmax(0, 1fr) auto; gap: 8px; font-size: 0.8rem; }
}
/* The boxes beside the store's name are as wide as their words need, so labels show in full */
.head-slot .filter-totals { flex-wrap: wrap; }
.head-slot .filter-totals .stat-card { flex: 0 0 auto; min-width: 128px; width: auto; }
.head-slot .stat-card small { overflow: visible; text-overflow: clip; }
/* Statistics: three columns that end at the same line; the last card of each column stretches */
.stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.stats-column { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.stats-column > :last-child { flex: 1 1 auto; }
.stats-column .stats-card { align-content: start; }
.stats-grid .top-sellers { grid-row: auto; }
@media (max-width: 1100px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-column:last-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .stats-grid { grid-template-columns: minmax(0, 1fr); }
}

/* An Add form on its own page (Data Input): a card in the middle, its title already above it */
.entry-form-holder { display: flex; justify-content: center; }
#item-form.on-page { width: min(100%, 720px); padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 4px 14px rgba(20, 50, 40, 0.06); }
#item-form.on-page #item-title { display: none; }
@media (max-width: 640px) {
  #item-form.on-page { padding: 16px; }
}
/* Statistics: pie charts with their legend beside them */
.pie-chart { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.pie { flex: none; width: 150px; height: 150px; border-radius: 50%; background: var(--bg-alt); box-shadow: inset 0 0 0 1px rgba(16, 35, 28, 0.04), 0 6px 16px rgba(20, 50, 40, 0.1); animation: pie-in 0.6s ease-out both; }
@keyframes pie-in { from { transform: scale(0.6) rotate(-90deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pie { animation: none; } }
.pie-legend { flex: 1 1 160px; display: grid; gap: 10px; min-width: 0; }
.pie-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 0.88rem; }
.pie-dot { width: 12px; height: 12px; border-radius: 4px; }
.pie-label { display: grid; min-width: 0; }
.pie-label small { color: var(--muted); font-size: 0.78rem; }
.pie-value { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) {
  .pie { width: 120px; height: 120px; }
}
/* Titles and subtitles in the boxes sit in the middle: the boxes beside the store's name and the
   Statistics cards */
.head-slot .stat-card { text-align: center; }
.head-slot .stat-card small, .head-slot .stat-card .detail-title { display: block; text-align: center; }
.head-slot .stat-card .detail-row { text-align: left; }
.stats-card h3, .stats-card > .list-note { text-align: center; }
.stats-quick .stat-card { text-align: center; }
.top-sellers > h3 { text-align: center; }
/* An Add form on its page uses all the room there is: the whole width, its fields side by side in as
   many columns as fit (one on a phone), and its title at the top left */
.entry-form-holder { display: block; }
#item-form.on-page { width: 100%; max-width: none; }
#item-form.on-page #item-title { display: block; margin: 0 0 18px; color: var(--brand); font-size: 1.45rem; text-transform: uppercase; letter-spacing: 0.01em; text-align: left; }
#item-form.on-page .item-fields { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px 20px; align-items: start; }
#item-form.on-page .item-fields > .form-total,
#item-form.on-page .item-fields > fieldset,
#item-form.on-page .item-fields > .check-group,
#item-form.on-page .item-fields > label:has(textarea) { grid-column: 1 / -1; }
#item-form.on-page .dialog-actions { margin-top: 18px; }
/* …but not wider than it needs to be: at most about 920px, always in the middle of the screen, and the
   full width on a phone */
#item-form.on-page { width: 100%; max-width: 920px; margin: 0 auto; }
/* ---------- Dashboard on wide screens: everything a little bigger, filling the screen's height ---------- */
@media (min-width: 1400px) {
  .dash-layout { min-height: calc(100vh - 200px); }
  .stat-main > .stat-card { padding: 22px 22px; }
  .stat-main > .stat-card small { font-size: 1rem; margin-bottom: 6px; }
  .stat-main > .stat-card strong { font-size: 1.75rem; }
  .sales-chart-head h3 { font-size: 1.25rem; }
  .sales-chart-head span { font-size: 0.95rem; }
  .chart-day { font-size: 0.8rem; }
  .dash-side .on-hand-card { padding: 20px 22px; }
  .dash-side .on-hand-card small { font-size: 1.08rem; }
  .dash-side .on-hand-card strong { font-size: 1.5rem; }
  .dash-side .stat-details .stat-card { display: flex; flex-direction: column; justify-content: center; padding: 14px 16px; }
  .dash-side .stat-details .detail-title { font-size: 0.88rem; margin-bottom: 6px; }
  .dash-side .stat-details .detail-row { font-size: 0.92rem; }
  .dash-side .stat-details .detail-row strong { font-size: 0.98rem; }
  .dash-side .list-actions .btn { padding: 11px 18px; font-size: 1rem; }
}
@media (min-width: 1700px) {
  .stat-main > .stat-card strong { font-size: 2rem; }
  .dash-side .on-hand-card strong { font-size: 1.65rem; }
  .dash-side .stat-details .detail-title { font-size: 0.95rem; }
  .dash-side .stat-details .detail-row { font-size: 1rem; }
  .dash-side .stat-details .detail-row strong { font-size: 1.05rem; }
}
/* A long text box (what an expense was for, the details): a few lines high, the form's full width */
.business-form textarea {
  width: 100%;
  min-height: 84px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  color: inherit;
  line-height: 1.5;
  resize: vertical;
}
.business-form textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: transparent; }
/* The Access table laid out like a store's menu: drop-downs whose tabs sit indented under them */
.access-group { grid-template-columns: 1fr !important; padding: 4px 0; }
.access-group-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 4px; border: 0; background: none; color: var(--text); font: inherit; font-weight: 700; text-align: left; cursor: pointer; border-radius: 8px; }
.access-group-toggle:hover { background: var(--bg-alt); }
.access-group-toggle small { margin-left: auto; color: var(--muted); font-weight: 500; font-size: 0.78rem; }
.access-chevron { display: inline-block; width: 12px; color: var(--brand); transition: transform 0.15s ease; }
.access-group-toggle[aria-expanded="true"] .access-chevron { transform: rotate(90deg); }
.access-child > span:first-child { padding-left: 28px; position: relative; }
.access-child > span:first-child::before { content: ""; position: absolute; left: 12px; top: 50%; width: 8px; height: 1px; background: var(--line); }
.access-row[hidden] { display: none; }
.access-table.view-only .access-group { grid-template-columns: 1fr !important; }
.access-table.view-only .access-group > :nth-child(n + 3) { display: block; }
/* Accounts: the Search sits on the right of the Store and Account type filters */
.activity-filters #filter-search { flex: 0 1 380px; margin-left: auto; align-self: flex-end; }
@media (max-width: 640px) { .activity-filters #filter-search { flex: 1 1 100%; margin-left: 0; } }
/* Gross Profit and Net Profit: the downloads right under the history */
.split > div:last-child > .list-actions { margin-top: 12px; justify-content: flex-end; }
/* The name row as three parts: the name on the left, the tab's title in the very middle, the Date
   Range on the right (an empty right side when a tab has no Date Range, so the title stays centred) */
.admin-top:has(> .head-slot:not([hidden])) { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; }
.name-side { display: flex; align-items: center; gap: 14px; min-width: 0; }
.admin-top:has(> .head-slot:not([hidden])) > .head-slot { grid-column: 2; }
.admin-top:has(> .head-slot:not([hidden])) > .shared-range { grid-column: 3; justify-self: end; margin-left: 0; }
/* (with no title in the middle, as on the Dashboard, the Date Range keeps to the far right) */
.admin-top > .shared-range.beside-name { margin-left: auto; }
/* The boxes beside the store's name grow with the screen: bigger boxes and print on wider monitors */
.head-slot .filter-totals { gap: clamp(8px, 0.8vw, 16px); }
.head-slot .filter-totals .stat-card { min-width: clamp(128px, 10.5vw, 230px); padding: clamp(8px, 0.75vw, 16px) clamp(14px, 1.3vw, 28px); border-radius: 12px; }
.head-slot .filter-totals .stat-card small { font-size: clamp(0.76rem, 0.72vw, 1rem); margin-bottom: clamp(2px, 0.3vw, 6px); }
.head-slot .filter-totals .stat-card strong { font-size: clamp(1rem, 1.3vw, 1.7rem); }
.head-slot .filter-totals .split-card .detail-title { font-size: clamp(0.72rem, 0.7vw, 0.98rem); }
.head-slot .filter-totals .split-card .detail-row { font-size: clamp(0.76rem, 0.78vw, 1.05rem); }
.head-slot .filter-totals .split-card .detail-row strong { font-size: clamp(0.8rem, 0.85vw, 1.12rem); }
.head-slot h2 { font-size: clamp(1.3rem, 1.4vw, 1.9rem); }
/* Statistics pie cards use all their room: a bigger pie in the middle, and under it one box per slice
   (its colour, name, % and amount) side by side */
.stats-card:has(.pie-chart) { display: flex; flex-direction: column; }
.stats-card .pie-chart { flex: 1 1 auto; flex-direction: column; justify-content: space-evenly; align-items: center; gap: 18px; flex-wrap: nowrap; }
.stats-card .pie { width: clamp(150px, 11vw, 230px); height: clamp(150px, 11vw, 230px); }
.stats-card .pie-legend { flex: none; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.stats-card .pie-row { grid-template-columns: 12px minmax(0, 1fr); grid-template-areas: "dot label" "value value"; align-items: center; gap: 6px 10px; padding: 12px 14px; border-radius: 12px; background: var(--bg-alt); }
.stats-card .pie-dot { grid-area: dot; }
.stats-card .pie-label { grid-area: label; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-weight: 600; }
.stats-card .pie-label small { font-size: 0.85rem; font-weight: 700; color: var(--brand-dark); }
.stats-card .pie-value { grid-area: value; font-size: clamp(1rem, 1.1vw, 1.35rem); }
@media (max-width: 640px) {
  .stats-card .pie-legend { gap: 8px; }
  .stats-card .pie-row { padding: 10px; }
}
/* Statistics on a computer fits the screen: the cards share the height there is, the pies grow or
   shrink with their card (they need not be the same size), and the lists tighten */
@media (min-width: 1101px) {
  .stats-grid { overflow: hidden; }
  .stats-column { min-height: 0; }
  .stats-column > * { min-height: 0; }
  .stats-column > .stats-card:has(.pie-chart) { flex: 1 1 0; }
  .stats-column > .stats-card:not(:has(.pie-chart)) { flex: none; }
  .stats-column > :last-child:not(:has(.pie-chart)) { flex: 1 1 auto; }
  .stats-card { padding: 14px 18px; gap: 8px; }
  .stats-card .pie-chart { min-height: 0; gap: 12px; }
  .stats-card .pie { flex: 1 1 0; width: auto; height: auto; min-height: 70px; max-height: 210px; aspect-ratio: 1; }
  .stats-card .pie-row { padding: 8px 12px; gap: 2px 10px; }
  .stats-grid .top-sellers { overflow: auto; }
  .stats-grid .top-days { grid-template-rows: repeat(10, minmax(28px, 1fr)); gap: 4px; }
  .stats-grid .top-staff li { padding: 6px 10px; }
}
/* Statistics pie cards: the boxes under each pie sit at the bottom of the card, so the Expenses boxes
   line up with the Payments boxes beside them; the pie takes the room above (the Expenses pie, with
   the most room, comes out the biggest) */
@media (min-width: 1101px) {
  .stats-card .pie-chart { justify-content: flex-start; }
  .stats-card .pie { margin: auto 0; max-height: 270px; }
  .stats-card .pie-legend { margin-top: auto; }
}
@media (min-width: 1101px) {
  .stats-column > .list-actions { flex: none; margin: 0; justify-content: stretch; }
  .stats-column > .list-actions .btn { flex: 1 1 0; text-align: center; }
  .stats-column > .top-sellers { flex: 1 1 0; }
  .stats-grid .top-days li { padding: 3px 10px; }
  .stats-grid .top-days .top-name small { font-size: 0.68rem; }
}
/* Phones: a drop-down opens right under the row of the menu item it belongs to (pushing the items
   below it down), not under the whole menu */
@media (max-width: 640px) {
  .tabs.tab-menu .tab-group { display: contents; }
  .tabs.tab-menu .tab-group[hidden] .tab-group-toggle { display: none; }
  .tabs.tab-menu .tab-group-menu { position: static; grid-column: 1 / -1; margin: 0 0 4px; box-shadow: 0 8px 22px rgba(16, 35, 28, 0.1); }
}
/* Phones: each menu item has its own border, so they read as separate buttons */
@media (max-width: 640px) {
  .tabs.tab-menu > button[data-tab], .tabs.tab-menu .tab-group-toggle { border: 1px solid var(--line); background: #fff; }
  .tabs.tab-menu > button[data-tab].active, .tabs.tab-menu .tab-group-toggle.active, .tabs.tab-menu .tab-group-toggle[aria-expanded="true"] { border-color: rgba(14, 143, 106, 0.35); background: var(--brand-soft); }
}
@media (max-width: 640px) {
  .tabs.tab-menu > button[data-tab], .tabs.tab-menu .tab-group-toggle { justify-content: center; padding: 9px 8px; font-size: 0.9rem; }
}
/* The Date Range in two lines: the choice on top, the dates (or Custom's From and To) under it */
.shared-range .range.range-two-lines { display: grid !important; grid-template-columns: none !important; justify-items: end; align-items: center; gap: 6px; }
.range-two-lines .range-line { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.range-two-lines .range-line > label { display: flex !important; flex-direction: row; align-items: center; gap: 8px; white-space: nowrap; font-size: 0.85rem; }
.range-two-lines .range-dates { margin: 0; padding: 0 !important; white-space: nowrap; color: var(--muted); font-size: 0.9rem; }
.range-two-lines .range-line-dates input { padding: 6px 8px; }
@media (max-width: 1100px) {
  .shared-range .range.range-two-lines { justify-items: start; }
  .range-two-lines .range-line { justify-content: flex-start; }
}
/* Phones keep the Date Range on one line, as before */
@media (max-width: 640px) {
  .shared-range .range.range-two-lines { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.15fr) !important; justify-items: stretch; align-items: end; }
  .shared-range .range.range-two-lines:not(:has(input)) { grid-template-columns: auto minmax(0, 1fr) !important; align-items: center; }
  .range-two-lines .range-line { display: contents; }
  .shared-range .range.range-two-lines .range-line > label { display: grid !important; gap: 4px; font-size: 0.75rem; white-space: normal; }
  .shared-range .range.range-two-lines .range-line-dates > label { font-size: 0.75rem; }
  .range-two-lines .range-dates { font-size: 0.8rem; white-space: normal; }
}
/* Phones: the dates sit level with the middle of the drop-down beside them */
@media (max-width: 640px) {
  .shared-range .range.range-two-lines:not(:has(input)) { align-items: end !important; }
  .shared-range .range.range-two-lines .range-dates { display: flex; align-items: center; min-height: 36px; padding: 0 !important; line-height: 1.2; }
}
/* The Dashboard fitted to the screen (computers): every part shares the height there is */
.dash-layout.fit-screen { min-height: 0 !important; overflow: hidden; }
.dash-layout.fit-screen > .dash-main { grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.dash-layout.fit-screen .sales-chart { min-height: 0; }
.dash-layout.fit-screen .sales-chart .chart-bars { min-height: 100px; }
.dash-layout.fit-screen > .dash-side { grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; gap: 10px; }
.dash-layout.fit-screen .dash-side .on-hand { gap: 8px; }
.dash-layout.fit-screen .dash-side .on-hand-card { padding: 10px 18px; }
.dash-layout.fit-screen .dash-side .stat-details { min-height: 0; grid-auto-rows: minmax(0, 1fr); gap: 8px; }
.dash-layout.fit-screen .dash-side .stat-details .stat-card { min-height: 0; overflow: hidden; padding: 6px 12px; justify-content: center; }
.dash-layout.fit-screen .dash-side .stat-details .detail-title { margin-bottom: 2px; }
.dash-layout.fit-screen .dash-side .stat-details .detail-row { line-height: 1.35; }
.dash-layout.fit-screen .dash-side .list-actions .btn { padding: 8px 14px; }
/* …with print that follows the screen's height, so every box's content fits inside it */
.dash-layout.fit-screen .dash-side .on-hand-card { padding: clamp(6px, 1vh, 14px) 18px; }
.dash-layout.fit-screen .dash-side .on-hand-card small { font-size: clamp(0.82rem, 1.45vh, 1.05rem); }
.dash-layout.fit-screen .dash-side .on-hand-card strong { font-size: clamp(1.05rem, 2.3vh, 1.55rem); }
.dash-layout.fit-screen .dash-side .stat-details .stat-card { padding: clamp(3px, 0.6vh, 8px) 12px; }
.dash-layout.fit-screen .dash-side .stat-details .detail-title { font-size: clamp(0.64rem, 1.2vh, 0.92rem); margin-bottom: 1px; }
.dash-layout.fit-screen .dash-side .stat-details .detail-row { font-size: clamp(0.64rem, 1.22vh, 0.95rem); line-height: 1.28; }
.dash-layout.fit-screen .dash-side .stat-details .detail-row strong { font-size: clamp(0.68rem, 1.3vh, 1rem); }
.dash-layout.fit-screen .dash-side .list-actions .btn { padding: clamp(5px, 0.8vh, 9px) 14px; font-size: clamp(0.82rem, 1.4vh, 1rem); }
.dash-layout.fit-screen .stat-main > .stat-card { padding: clamp(10px, 1.6vh, 22px) clamp(14px, 1.2vw, 22px); }
.dash-layout.fit-screen .stat-main > .stat-card strong { font-size: clamp(1.15rem, 2.9vh, 2rem); }
.dash-layout.fit-screen .dash-side .stat-details .detail-title,
.dash-layout.fit-screen .dash-side .stat-details .detail-row,
.dash-layout.fit-screen .dash-side .stat-details .detail-row > * { line-height: 1.2; }
.dash-layout.fit-screen .dash-side .stat-details .detail-row { margin: 1px 0; }
.dash-layout.fit-screen .dash-side .stat-details .detail-row { align-items: center; }
.dash-layout.fit-screen .dash-side .stat-details .detail-row { margin: 0; }
.dash-layout.fit-screen .dash-side .stat-details { gap: 6px; }

/* The X at the upper right of a form pop-up: it stays in view while the form scrolls */
.dialog-close {
  position: sticky;
  top: 12px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  /* on the right, taking no room of its own: the form starts at the top, under it */
  margin: 12px 12px -46px auto;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(20, 50, 40, 0.08);
}
.dialog-close:hover, .dialog-close:focus-visible { color: var(--text); border-color: var(--brand); outline: none; }

/* Statistics: the download buttons stay their own size under Top Performers (the column's
   free space goes to Top Performers, not to the buttons) */
.stats-grid .stats-column > .list-actions.list-actions { flex: none; align-items: center; }
.stats-grid .stats-column > .top-sellers { flex: 1 1 auto; }

/* Top 3 Staff / Top 10 Days: a place with no one in it yet */
.top-list li.top-empty { background: transparent; border: 1px dashed var(--line); color: var(--muted); }
.top-list li.top-empty .top-rank { background: transparent; border: 1px dashed var(--line); color: var(--muted); }
.top-list li.top-empty .top-name { font-size: 0.8rem; font-style: italic; font-weight: 400; }
/* On Statistics the ten days share the room left, never more, so the box does not scroll */
@media (min-width: 1101px) {
  .stats-grid .top-sellers > .top-days { flex: 1 1 0; min-height: 0; grid-template-rows: repeat(10, minmax(24px, 1fr)); }
}

.chart-none { flex: 1 1 auto; display: grid; place-items: center; min-height: 160px; margin: 0; color: var(--muted); }
/* With only a few days, the bars keep a sensible width, in the middle */
.chart-bars { justify-content: center; }
.chart-bars > .chart-col { max-width: 96px; }

/* ---------- Payroll ---------- */
.payroll-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px; }
.payroll-totals:empty { display: none; }
.payroll-total { display: grid; gap: 4px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.payroll-total small { color: var(--muted); font-size: 0.82rem; }
.payroll-total strong { font-size: 1.25rem; }
.payroll-total.is-highlight { background: var(--brand-soft); border-color: transparent; }
.payroll-total.is-highlight strong { color: var(--brand-dark); }
#payroll-table td.amt, #payroll-table th.amt { text-align: right; white-space: nowrap; }
#payroll-table .cell-sub { display: block; color: var(--muted); font-size: 0.76rem; }
#payroll-table td.actions { white-space: nowrap; }
#payroll-table td.actions .link-button + .link-button { margin-left: 10px; }
.payroll-downloads { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.payroll-downloads[hidden] { display: none; }
.dialog.payroll-dialog { width: min(920px, calc(100% - 32px)); }
.payroll-form .employee-section { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.payroll-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.payroll-sum > div { display: grid; gap: 2px; padding: 10px 14px; border-radius: 12px; background: var(--bg-alt); }
.payroll-sum small { color: var(--muted); font-size: 0.8rem; }
.payroll-sum strong { font-size: 1.1rem; }
.payroll-sum .payroll-net { background: var(--brand-soft); }
.payroll-sum .payroll-net strong { color: var(--brand-dark); font-size: 1.3rem; }
.payroll-sum strong.is-negative { color: #b42318; }
@media (max-width: 640px) {
  .payroll-sum { grid-template-columns: 1fr; }
}

/* The employee page keeps a comfortable width on wide screens, in the middle */
.employee-page > .container { max-width: 1120px; margin-inline: auto; }

/* Access: Records and Profit have a View box of their own, under View, with the count at the end */
.access-group.with-box { grid-template-columns: minmax(110px, 1.6fr) repeat(5, minmax(44px, 1fr)) !important; }
.access-group.with-box .access-group-toggle { grid-column: 1; }
.access-group-count { grid-column: 3 / -1; justify-self: end; color: var(--muted); font-size: 0.78rem; padding-right: 4px; }
.access-table.view-only .access-group.with-box { grid-template-columns: minmax(110px, 1.6fr) minmax(44px, 1fr) !important; }
.access-table.view-only .access-group.with-box > .access-group-count { display: none; }
/* A Guest adds nothing, so it has no Data Input */
.access-table.view-only .access-entry { display: none; }
@media (max-width: 640px) { .access-group.with-box { grid-template-columns: minmax(90px, 1.4fr) repeat(5, minmax(34px, 1fr)) !important; } }

/* ---------- Take Photo: the webcam in a pop-up (computers; a phone opens its own camera) ---------- */
.photo-buttons { flex-wrap: wrap; }
.dialog.camera-dialog { width: min(640px, calc(100% - 32px)); }
.camera-box { display: grid; gap: 14px; padding: 20px; }
.camera-box h2 { margin: 0; font-size: 1.15rem; }
.camera-view { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: #10231c; }
.camera-view video { width: 100%; height: 100%; object-fit: cover; }
.camera-view video.is-mirrored { transform: scaleX(-1); }
.camera-note { position: absolute; inset: auto 16px; margin: 0; color: #fff; text-align: center; font-size: 0.9rem; }
.camera-note[hidden] { display: none; }

/* ---------- Attachments (receipts) in the Expense, Fund Transfer and Purchase Order forms ---------- */
.attach-field { display: grid; gap: 8px; }
#item-form.on-page .item-fields > .attach-field { grid-column: 1 / -1; }
.attach-title { font-weight: 600; font-size: 0.92rem; }
.attach-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.attach-list[hidden] { display: none; }
.attach-list li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-alt); }
.attach-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 0.88rem; }
a.attach-name { color: var(--brand-dark); font-weight: 600; text-decoration: none; }
a.attach-name:hover { text-decoration: underline; }
.attach-list small { flex: none; color: var(--muted); font-size: 0.78rem; }
.attach-remove { flex: none; width: 26px; height: 26px; border: 0; border-radius: 50%; background: #fff; color: #b42318; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.attach-remove:hover { background: #fdecea; }
.attach-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.receipt-link { text-decoration: none; white-space: nowrap; }

/* ---------- Payroll: the Cut-off and Paid History views ---------- */
.payroll-tabs { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.payroll-tabs button { padding: 10px 16px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
.payroll-tabs button.is-current { color: var(--brand-dark); border-bottom-color: var(--brand); }
.payroll-table td.amt, .payroll-table th.amt, .dtr-table td.amt, .dtr-table th.amt { text-align: right; white-space: nowrap; }
.payroll-table .cell-sub { display: block; color: var(--muted); font-size: 0.76rem; }
.payroll-table td.actions { white-space: nowrap; }
.payroll-table td.actions .link-button + .link-button { margin-left: 10px; }
#cutoff-actions[hidden] { display: none; }
.dtr-table input[type="time"] { width: 100%; min-width: 110px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.dtr-table td { vertical-align: middle; }
.dtr-view-table td { white-space: nowrap; }
/* Every column's values in the middle under its title; the dates (and Total) on the left */
.dtr-table.dtr-view-table th, .dtr-table.dtr-view-table td, .dtr-table.dtr-view-table th.amt, .dtr-table.dtr-view-table td.amt { text-align: center; }
.dtr-table.dtr-view-table th:first-child, .dtr-table.dtr-view-table td:first-child, .dtr-table.dtr-view-table td.dtr-view-none { text-align: left; }
.dtr-view-table input[type="time"], .dtr-view-table input[type="number"] { text-align: center; }
.dialog.payroll-dialog#dtr-view-dialog { width: min(1120px, calc(100% - 32px)); }
.dtr-view-table input[type="time"] { min-width: 104px; padding: 6px; }
.dtr-view-table .dtr-break input[type="number"] { width: 112px; }
.dtr-view-table th, .dtr-view-table td { padding-left: 8px; padding-right: 8px; }
.dtr-view-table .cell-sub { display: block; color: var(--muted); font-size: 0.76rem; }
.dtr-view-table .dtr-view-none { color: var(--muted); font-style: italic; }
.dtr-view-table tr.dtr-view-empty td { background: var(--bg-alt); }
.dtr-view-table tfoot td { border-top: 2px solid var(--line); font-weight: 700; }
@media (max-width: 640px) {
  .dtr-view-table tfoot { display: block; }
  .dtr-table.dtr-view-table td, .dtr-table.dtr-view-table td.amt { text-align: left; justify-content: flex-start; white-space: normal; flex-wrap: wrap; align-items: baseline; }
  .dtr-table.dtr-view-table tbody td:not(:first-child) .cell-sub { flex: 1 1 100%; }
  .dtr-view-table td[data-label]::before { width: 84px; }
  .dtr-view-table input[type="time"], .dtr-view-table .dtr-break input[type="number"] { flex: 1 1 0; width: auto; min-width: 120px; }
  .dtr-view-table tr.dtr-view-empty { padding: 8px 16px; }
  .dtr-view-table tr.dtr-view-empty td { background: none; }
  .dtr-view-table tbody td:first-child { font-weight: 700; }
  .dtr-view-table tbody td:first-child .cell-sub { font-weight: 400; margin-left: 6px; }
}
.holiday-list { display: grid; gap: 8px; }
.holiday-line { display: grid; grid-template-columns: 160px minmax(0, 1fr) 120px 30px; gap: 8px; align-items: center; }
.holiday-line input, .holiday-line select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
@media (max-width: 640px) { .holiday-line { grid-template-columns: 1fr 1fr; } .holiday-line input[name="name"] { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- Daily Time Record: the time clock ---------- */
.dtr-clock { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 4px 0 10px; }
.dtr-clock strong { font-size: clamp(2rem, 6vw, 3.2rem); color: var(--brand-dark); line-height: 1.1; }
.dtr-clock span { color: var(--muted); font-size: 1rem; }
.dtr-page .search { width: min(100%, 420px); margin-bottom: 12px; }
.dtr-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.dtr-person { display: grid; justify-items: center; gap: 6px; padding: 18px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--text); font: inherit; cursor: pointer; box-shadow: 0 4px 14px rgba(20, 50, 40, 0.06); transition: transform 0.15s ease, border-color 0.15s ease; }
.dtr-person:hover, .dtr-person:focus-visible { transform: translateY(-2px); border-color: var(--brand); outline: none; }
.dtr-person .list-avatar { width: 56px; height: 56px; margin: 0; font-size: 1.4rem; }
.dtr-person strong { font-size: 1rem; text-align: center; }
.dtr-person small { color: var(--muted); font-size: 0.8rem; }
.dtr-person.is-in { border-color: var(--brand); background: var(--brand-soft); }
.dtr-person.is-in small { color: var(--brand-dark); font-weight: 600; }
.dialog.dtr-dialog { width: min(480px, calc(100% - 32px)); }
.dtr-dialog #dtr-pin { font-size: 1.4rem; letter-spacing: 0.3em; text-align: center; }
.dtr-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dtr-action { padding: 16px 10px; font-size: 1.05rem; }
.dtr-action:disabled { opacity: 0.35; cursor: not-allowed; }
.dtr-breakOut, .dtr-breakIn { background: #e6f0fb; color: #2f5f8f; }
.dtr-timeOut { background: #fbeee4; color: #8a4a1b; }
.dtr-payslip-list { display: grid; gap: 8px; }
.dtr-payslip-list[hidden] { display: none; }
.dtr-payslip { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--bg-alt); font-size: 0.9rem; }
/* Payroll: the buttons under a table keep their distance from it */
#view-cutoff .payroll-downloads, #view-history .payroll-downloads { margin: 16px 0 0; position: static; }
/* Payroll tables: every column title in the middle of its column, and the amounts under them */
.payroll-table th, .payroll-table th.amt, .dtr-table th { text-align: center; }
.payroll-table td.amt, .dtr-table td.amt { text-align: center; }
.payroll-table td[data-label="Status"] { text-align: center; }

/* The Daily Time Record's edit pop-up: the four times two to a row */
.record-times { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.record-times input[type="time"] { width: 100%; }
#records-downloads { margin: 16px 0 0; }

/* ---------- Time In / Out: one card in the middle ---------- */
.dtr-card { width: min(100%, 460px); margin: 8px auto 0; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 6px 20px rgba(20, 50, 40, 0.08); }
.dtr-card .dtr-clock { flex-direction: column; align-items: center; gap: 8px; margin: 0; text-align: center; }
.dtr-photo { display: flex; justify-content: center; }
.dtr-photo .list-avatar { width: 112px; height: 112px; margin: 0; font-size: 2.6rem; box-shadow: 0 4px 14px rgba(20, 50, 40, 0.12); }
.dtr-photo.is-empty .list-avatar { background: var(--bg-alt); color: var(--muted); }
.dtr-card select#dtr-employee { font-size: 1.05rem; }
.dtr-card #dtr-today { margin: -6px 0 0; text-align: center; }
.dtr-card #dtr-pin { font-size: 1.4rem; letter-spacing: 0.3em; text-align: center; }
.dtr-card #dtr-note:empty, .dtr-card #dtr-today:empty { display: none; }
.dtr-more, .dtr-file { display: flex; justify-content: center; }
.file-loan-owed .list-note { margin: 0 0 6px; }
.dtr-card #dtr-pin::placeholder { letter-spacing: normal; font-size: 0.95rem; }

/* ---------- The side menu scrolls when its items are taller than the screen (Log out stays
   reachable at the bottom); on a phone the page behind it does not scroll while it is open ---------- */
.side-menu { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(14, 143, 106, 0.35) transparent; }
.side-menu .side-links { flex: 1 0 auto; }
.side-menu::-webkit-scrollbar { width: 6px; }
.side-menu::-webkit-scrollbar-thumb { background: rgba(14, 143, 106, 0.35); border-radius: 6px; }
.side-menu::-webkit-scrollbar-track { background: transparent; }
/* The slim strip has no room for a scrollbar: it would squeeze each item so its highlight sits off its
   icon. It still scrolls (wheel or finger); the scrollbar shows once the menu is widened. */
@media (min-width: 641px) {
  .side-menu:not(.open) { scrollbar-width: none; }
  .side-menu:not(.open)::-webkit-scrollbar { display: none; }
}
html.menu-locked, html.menu-locked body { overflow: hidden; overscroll-behavior: none; }
/* Accounts › Stations: the connected tablets, and the code to type on a new one */
.stations-card { margin-top: 40px; }
.stations-card h2 { margin: 0; }
.station-code { margin: 8px 0 4px; font-size: 2.6rem; font-weight: 800; letter-spacing: 0.18em; text-align: center; color: var(--brand-dark); }
.station-code-steps { margin: 8px 0; padding-left: 20px; }
/* Employee Records: View, Edit and Delete at the end of each row */
#employees-table td.actions { white-space: nowrap; text-align: right; }
#employees-table td.actions > * + * { margin-left: 10px; }
#employees-table td.actions a.link-button { text-decoration: none; }
.dtr-break { white-space: nowrap; color: var(--muted); font-size: 0.86rem; }

/* The Break column's box: the break in minutes, typed by hand */
.dtr-break input[type="number"] { width: 92px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; text-align: center; }
.dtr-break input[type="number"]::placeholder { color: var(--muted); font-size: 0.82rem; }
.payroll-form fieldset[hidden] { display: none; }
.payroll-paid-as { max-width: 260px; }
/* Payroll pop-up: with Paid As Mix, the Cash and Non Cash amounts sit beside it */
.pay-mix { display: contents; }
.pay-mix[hidden] { display: none; }

/* ---------- HR: the store's drop-down links, and the bar on its pages ---------- */
.tab-group-menu a.tab-link { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border-radius: 8px; color: var(--text); font-weight: 500; text-decoration: none; white-space: nowrap; }
.tab-group-menu a.tab-link:hover { background: var(--bg-alt); }
.tab-group-menu a.tab-link .tab-icon { color: var(--brand); flex: none; }
.hr-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 14px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.hr-back { color: var(--brand-dark); font-weight: 700; text-decoration: none; }
.hr-back:hover { text-decoration: underline; }
.hr-links { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.hr-links a { padding: 6px 12px; border-radius: 999px; color: var(--muted); font-weight: 600; font-size: 0.88rem; text-decoration: none; }
.hr-links a:hover { background: var(--bg-alt); color: var(--text); }
.hr-links a.is-current { background: var(--brand-soft); color: var(--brand-dark); }
@media (max-width: 640px) { .hr-links { margin-left: 0; } }

/* The store's menu on its HR pages: above the title on a tablet or phone (the title then needs no pull-up) */
.hr-tabs-row:not([hidden]) { margin-bottom: 12px; }
.hr-tabs-row:not([hidden]) + .admin-top { margin-top: 0; }
.tab-group-menu a.tab-link.active { background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; }
.payroll-table select.payment-pick { min-width: 110px; padding: 6px 28px 6px 10px; border: 1px solid var(--line); border-radius: 8px; background-color: #fff; font: inherit; font-size: 0.88rem; }

/* Payroll and HR filters: every box the same height, their labels on one line */
#view-cutoff .activity-filters, #view-history .activity-filters { align-items: flex-end; }
#view-cutoff .activity-filters > label, #view-history .activity-filters > label { display: flex; flex-direction: column; gap: 6px; margin: 0; }
#view-cutoff .activity-filters select, #view-cutoff .activity-filters input,
#view-history .activity-filters select, #view-history .activity-filters input { box-sizing: border-box; height: 42px; min-width: 150px; padding: 0 12px; font-size: 0.92rem; }
#view-cutoff .activity-filters .search, #view-history .activity-filters .search { height: 42px; margin: 0; }
/* Payroll pop-up: every box the same height, in rows that line up */
.payroll-form .employee-section { align-items: start; }
.payroll-form select, .payroll-form input[type="text"], .payroll-form input[type="date"], .payroll-form input[type="number"] { box-sizing: border-box; height: 44px; }
/* Paid History: every column in the middle, under its title (the buttons stay at the end) */
#payroll-table th, #payroll-table td, #payroll-table td.amt, #payroll-table th.amt { text-align: center; }
#payroll-table td.actions { text-align: right; }
/* Payroll cut-off: the Payment drop-down in the middle of its column, and every row's cells lined up */
.payroll-table td[data-label="Payment"] { text-align: center; }
.payroll-table td { vertical-align: middle; }

/* ---------- Payroll on a phone: one compact card per employee ----------
   The name (and ID) with the Net Pay large beside it; the days, hours and amounts as small tiles,
   four to a row; then Payment, Status and the buttons */
@media (max-width: 640px) {
  .payroll-table tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 14px; }
  .payroll-table td { display: block; padding: 0; text-align: left !important; }
  .payroll-table td[data-label]::before { display: block; width: auto; margin-bottom: 2px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; }
  /* The employee across the top, the Net Pay at the right */
  .payroll-table td[data-label="Employee"] { grid-column: 1 / 4; grid-row: 1; font-size: 1.02rem; font-weight: 700; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
  .payroll-table td[data-label="Employee"]::before { display: none; }
  .payroll-table td[data-label="Employee"] .cell-sub { font-weight: 400; }
  .payroll-table td[data-label="Net Pay"] { grid-column: 4; grid-row: 1; text-align: right !important; font-size: 1.05rem; font-weight: 800; color: var(--brand-dark); padding-bottom: 6px; border-bottom: 1px solid var(--line); }
  .payroll-table td[data-label="Net Pay"]::before { text-align: right; }
  /* The tiles */
  .payroll-table td.amt:not([data-label="Net Pay"]), .payroll-table td[data-label="Period"], .payroll-table td[data-label="Pay Date"], .payroll-table td[data-label="Business"] { padding: 6px 8px; border-radius: 8px; background: var(--bg-alt); font-size: 0.86rem; font-weight: 600; }
  .payroll-table td[data-label="Period"], .payroll-table td[data-label="Business"] { grid-column: span 2; }
  /* Payment and Status, then the buttons */
  .payroll-table td[data-label="Payment"] { grid-column: 1 / 3; }
  .payroll-table td[data-label="Payment"] select { width: 100%; }
  .payroll-table td[data-label="Status"], .payroll-table td[data-label="Paid As"] { grid-column: 3 / 5; align-self: end; }
  .payroll-table td[data-label="Status"]::before { display: none; }
  .payroll-table td.actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 16px; padding-top: 8px; border-top: 1px solid var(--line); }
  .payroll-table td.actions .link-button + .link-button { margin-left: 0; }
}
@media (max-width: 640px) {
  /* Three tiles to a row, so an amount like ₱12,345.67 stays on one line (never cut in the middle) */
  .payroll-table tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .payroll-table td[data-label="Employee"] { grid-column: 1 / 3; }
  .payroll-table td[data-label="Net Pay"] { grid-column: 3 / 4; }
  .payroll-table td.amt { white-space: nowrap; overflow-wrap: normal; word-break: keep-all; }
  .payroll-table td.amt:not([data-label="Net Pay"])::before { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.62rem; }
  .payroll-table td[data-label="Period"], .payroll-table td[data-label="Business"] { grid-column: span 3; }
  .payroll-table td[data-label="Payment"] { grid-column: 1 / 3; }
  .payroll-table td[data-label="Status"], .payroll-table td[data-label="Paid As"] { grid-column: 3 / 4; }
}
/* A very narrow phone: the amounts a little smaller so they still fit */
@media (max-width: 360px) {
  .payroll-table td.amt:not([data-label="Net Pay"]) { font-size: 0.78rem; padding: 6px; }
}

/* The Daily Time Record's OT: the hours with whether they are approved under them */
.ot-badge { display: block; width: fit-content; margin: 4px auto 0; font-size: 0.72rem; }

/* CA / Loan: the balance stands out; in the pop-up, what Payroll has taken off so far */
.loan-balance { font-weight: 700; color: var(--brand-dark); }
.loan-payments { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--bg-alt); font-size: 0.86rem; }
.loan-payments[hidden] { display: none; }
.loan-payment { color: var(--muted); }
#loan-downloads { margin: 16px 0 0; }
.loan-filters { align-items: flex-end; }

/* The Business Logo's box: wide and big, so the whole logo is seen as it will be on the payslips */
.photo-wide { width: 240px; height: 110px; border-radius: 14px; }
.photo-wide img { object-fit: contain; background: #fff; padding: 6px; }
.photo-field:has(.photo-wide) { flex-wrap: wrap; }
@media (max-width: 480px) { .photo-wide { width: 100%; height: 120px; } }

/* Statistics on a computer: each of the Top 10 Days on one line (date, then name), so the ten fit
   the room without the date and name running into each other */
@media (min-width: 1101px) {
  .stats-grid .top-days li { min-height: 0; overflow: hidden; }
  .stats-grid .top-days .top-name { display: flex; align-items: baseline; gap: 8px; }
  .stats-grid .top-days .top-name small { flex: none; }
  .stats-grid .top-days .top-name b { min-width: 0; }
}
/* Statistics on a computer with a short screen: the cards keep their own height and the page scrolls */
@media (min-width: 1101px) {
  .stats-grid.stats-free { overflow: visible; }
  .stats-grid.stats-free .stats-column > * { flex: none !important; }
  .stats-grid.stats-free .top-sellers { overflow: visible; }
  .stats-grid.stats-free .top-sellers > * { flex: none; min-height: auto; }
  .stats-grid.stats-free .top-sellers > .top-days { grid-template-rows: none; }
  .stats-grid.stats-free .stats-card .pie { flex: none; width: 170px; height: 170px; margin: 0 auto; }
}

/* A line under a value in a list (e.g. "Edited by …") wraps inside its box instead of running out of it */
.payroll-table td { min-width: 0; }
.payroll-table .cell-sub { white-space: normal; overflow-wrap: anywhere; }

/* The store's menu up in the top bar, made smaller step by step when it would not fit (a laptop or
   tablet): 1. less space between, 2. no icons, 3. a shorter account name (the script picks the step) */
.admin-nav.nav-tight-1 .tabs.tab-menu.in-top-bar { gap: 2px; margin: 0 10px 0 16px; }
.admin-nav.nav-tight-1 .tabs.tab-menu.in-top-bar > button[data-tab],
.admin-nav.nav-tight-1 .tabs.tab-menu.in-top-bar .tab-group-toggle { gap: 6px; padding: 7px 9px; font-size: 0.92rem; }
.admin-nav.nav-tight-1 .admin-links { gap: 12px; }
.admin-nav.nav-tight-2 .tabs.tab-menu.in-top-bar > button[data-tab] .tab-icon,
.admin-nav.nav-tight-2 .tabs.tab-menu.in-top-bar .tab-group-toggle .tab-icon { display: none; }
.admin-nav.nav-tight-2 .tabs.tab-menu.in-top-bar > button[data-tab],
.admin-nav.nav-tight-2 .tabs.tab-menu.in-top-bar .tab-group-toggle { gap: 4px; padding: 7px 8px; font-size: 0.88rem; }
.admin-nav.nav-tight-3 .tabs.tab-menu.in-top-bar { margin: 0 8px 0 10px; }
.admin-nav.nav-tight-3 .tabs.tab-menu.in-top-bar > button[data-tab],
.admin-nav.nav-tight-3 .tabs.tab-menu.in-top-bar .tab-group-toggle { padding: 6px 7px; font-size: 0.84rem; }
.admin-nav.nav-tight-3 .who-am-i { display: inline-block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; font-size: 0.85rem; vertical-align: middle; }

/* ---------- Station: the store's input device ---------- */
body[data-station="1"] #tabs, body[data-station="1"] .tabs-row:not(:has(.shared-range:not([hidden]))) { display: none !important; }
.station-hint { margin: 0 0 14px; color: var(--muted); font-size: 0.92rem; }
.station-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.station-tile { display: grid; gap: 6px; align-content: center; min-height: 110px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--text); text-decoration: none; box-shadow: 0 2px 10px rgba(16, 35, 28, 0.05); transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; }
.station-tile strong { font-size: clamp(1.05rem, 2.4vw, 1.3rem); color: var(--brand-dark); }
.station-tile small { color: var(--muted); font-size: 0.86rem; }
.station-tile:hover, .station-tile:focus-visible { transform: translateY(-2px); border-color: rgba(14, 143, 106, 0.4); box-shadow: 0 8px 22px rgba(16, 35, 28, 0.1); }
.station-clock { background: var(--brand-soft); border-color: transparent; }
.station-back { display: inline-block; margin: 0 0 12px; color: var(--brand-dark); font-weight: 600; text-decoration: none; }
@media (max-width: 640px) { .station-tile { min-height: 84px; padding: 16px; } }

/* ---------- Without internet: the bar at the bottom (offline.js) ---------- */
.offline-bar { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 60; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; width: max-content; max-width: calc(100vw - 24px); padding: 10px 16px; border-radius: 999px; background: #13201b; color: #fff; font-size: 0.88rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); transform: translateX(-50%); }
.offline-bar[hidden] { display: none; }
.offline-bar.is-offline { background: #6b4a00; }
.offline-bar.is-failed { background: #8a1c12; }
.offline-bar span { text-align: center; }
.offline-bar-button { padding: 5px 12px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 999px; background: transparent; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.offline-bar-button[hidden] { display: none; }
@media (max-width: 640px) { .offline-bar { border-radius: 14px; font-size: 0.82rem; } }
.offline-dialog { background: #fff; color: var(--text); }
.offline-list { display: grid; gap: 10px; margin: 8px 0 4px; }
.offline-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bg-alt); }
.offline-item small { display: block; color: var(--muted); overflow-wrap: anywhere; }
/* On the Station the side menu keeps only Install App, About Us and Log out (nothing else is opened there) */
body[data-station="1"] .side-links > .side-link:not(.side-logout):not([data-install]):not(.station-exit):not([data-about]),
body[data-station="1"] .side-links > .side-divider { display: none; }
.side-links > .station-exit { display: none; }
body[data-station="1"] .side-links > .station-exit { display: flex; }
.station-change { margin-left: 12px; color: var(--muted); font-size: 0.88rem; }
/* The Station's businesses (when more than one is set up on the device), and its set up */
.station-stores { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.station-store { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); font-weight: 600; text-decoration: none; }
.station-store.is-current { border-color: transparent; background: var(--brand-soft); color: var(--brand-dark); }
.station-setup { display: grid; gap: 12px; max-width: 560px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.station-picks { display: grid; gap: 8px; padding-left: 26px; }
.station-picks[hidden] { display: none; }
.station-pick small { margin-left: auto; color: var(--muted); }
/* In the installed TrackBiz Station app the side menu keeps only Log out (no Install App, no Exit Station) */
@media (display-mode: standalone) {
  body[data-station="1"] .side-links > [data-install],
  body[data-station="1"] .side-links > .station-exit { display: none !important; }
}

/* ---------- The Station: no side menu; the Add Sales form, with Time In / Out as a pop-up ---------- */
body[data-station="1"] .side-menu,
body[data-station="1"] .side-backdrop,
body[data-station="1"] .rail-toggle,
body[data-station="1"] #menu-toggle { display: none !important; }
body[data-station="1"] .admin,
body[data-station="1"] .admin-nav { padding-left: 0 !important; }
.station-logout { margin-left: 4px; }
.station-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; }
.station-bar .station-stores { margin: 0; }
.station-clock-button { margin-left: auto; }
.station-clock-dialog { width: min(560px, calc(100vw - 24px)); max-width: none; height: min(780px, calc(100vh - 24px)); padding: 0; overflow: hidden; }
.station-clock-dialog iframe { display: block; width: 100%; height: 100%; border: 0; }
.station-clock-close { position: absolute; top: 10px; right: 10px; z-index: 2; }
/* The time clock inside the Station's pop-up: only the clock */
body[data-embed="1"] .admin-nav,
body[data-embed="1"] .side-menu,
body[data-embed="1"] .side-backdrop,
body[data-embed="1"] .rail-toggle,
body[data-embed="1"] .station-back,
body[data-embed="1"] #menu-toggle,
body[data-embed="1"] .offline-bar { display: none !important; }
body[data-embed="1"] .admin { padding: 12px 0 !important; }
body[data-embed="1"] .admin-top h1 { font-size: 1.4rem; }
body[data-embed="1"] .admin-top { padding-right: 48px; }

/* TrackBiz Station: the side menu's mint and pastel yellow as the whole page's background */
body[data-station="1"] {
  background:
    radial-gradient(60vw 70vh at 0% 0%, rgba(14, 143, 106, 0.16), transparent 70%),
    radial-gradient(60vw 70vh at 100% 100%, rgba(250, 222, 120, 0.38), transparent 70%),
    radial-gradient(circle, rgba(14, 143, 106, 0.12) 1.2px, transparent 1.6px) 0 0 / 18px 18px,
    linear-gradient(180deg, #eef8f3 0%, #fbfcf4 55%, #fff6dc 100%);
  background-attachment: fixed;
  min-height: 100vh;
}
body[data-station="1"] .admin-nav { background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(8px); }
body[data-station="1"] .admin { background: transparent; }
/* The Station's front: Time In / Out, filling the screen under its bar */
.station-clock-frame { display: block; width: 100%; height: max(620px, calc(100vh - 200px)); border: 0; background: transparent; }
body[data-embed="1"] .admin-top { padding-right: 0; }
body[data-embed="1"] { background-attachment: scroll; }
/* (the Station already says which store: the time clock in front shows only its clock and Break Settings) */
body[data-embed="1"] .admin-top h1,
body[data-embed="1"] .hr-store-name { display: none; }
body[data-embed="1"] .admin-top { justify-content: flex-end; min-height: 0; margin-bottom: 8px; }
body[data-embed="1"] .admin { padding-top: 4px !important; }
.station-lock { width: min(420px, calc(100vw - 24px)); }
body[data-station="1"]:fullscreen, body[data-station="1"] :fullscreen { background-attachment: fixed; }
/* The time clock in the Station's front shows the Station's own background through it (no box edge) */
html:has(body[data-embed="1"]), body[data-embed="1"] { background: transparent !important; }
/* (a pop-up inside the Station's time clock does not darken only its box) */
body[data-embed="1"] dialog::backdrop { background: transparent; }

/* Time In / Out: the clock card, and beside it who timed in today (under it on a phone) */
.dtr-layout { display: grid; gap: 18px; justify-content: center; align-items: start; grid-template-columns: minmax(0, 460px); }
.dtr-layout .dtr-card { margin: 8px 0 0; width: 100%; }
@media (min-width: 900px) { .dtr-layout { grid-template-columns: minmax(0, 460px) minmax(0, 340px); } }
.dtr-roster { margin-top: 8px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 6px 20px rgba(20, 50, 40, 0.08); }
.dtr-roster h2 { margin: 0 0 2px; font-size: 1.1rem; }
.dtr-roster #dtr-roster-count { margin: 0 0 10px; }
.dtr-roster-list { display: grid; gap: 8px; max-height: 520px; overflow: auto; }
.dtr-roster-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--bg-alt); }
.dtr-roster-who { display: grid; min-width: 0; }
.dtr-roster-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtr-roster-who small { color: var(--muted); }
.dtr-roster-state { padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.dtr-roster-row.is-in .dtr-roster-state { background: var(--brand-soft); color: var(--brand-dark); }
.dtr-roster-row.is-break .dtr-roster-state { background: #fef3c7; color: #92400e; }
.dtr-roster-row.is-out .dtr-roster-state { background: #eef0f2; color: var(--muted); }
.station-lock .pin-input { font-size: 1.4rem; letter-spacing: 0.3em; text-align: center; }
.station-full-lock { padding: 24px; }
.station-full-lock h2 { margin: 0 0 6px; font-size: 1.25rem; }

/* ---------- The Station's front: the store and the day | the clock card | Log In today, Sales This Week, ADD SALES ---------- */
body[data-station="1"]:not([data-embed="1"]) .admin-top,
body[data-station="1"]:not([data-embed="1"]) #business-meta { display: none; }
body[data-station="1"]:not([data-embed="1"]) .station-clock-frame { height: calc(100vh - 80px); min-height: 560px; }
.dtr-layout.station-front { grid-template-columns: minmax(0, 1fr); max-width: 1180px; margin: 0 auto; align-items: center; }
@media (min-width: 1000px) { .dtr-layout.station-front { grid-template-columns: minmax(0, 1fr) minmax(0, 400px) minmax(0, 1fr); } }
@media (min-width: 700px) and (max-width: 999px) { .dtr-layout.station-front { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .sf-side { grid-column: 1 / -1; } }
.sf-info { display: grid; justify-items: center; gap: 10px; text-align: center; }
.sf-logo { max-width: min(260px, 100%); max-height: 110px; object-fit: contain; }
.sf-name { margin: 0; font-size: 1.6rem; font-weight: 800; }
.sf-name:empty { display: none; }
.sf-clock .dtr-clock { flex-direction: column; align-items: center; gap: 6px; margin: 0; }
.sf-clock .dtr-clock strong { font-size: clamp(2.6rem, 6vw, 4.4rem); }
.sf-clock .dtr-clock span { font-size: 1.05rem; }
.sf-birthday { margin: 4px 0 0; padding: 10px 16px; border-radius: 14px; background: #fff4d6; color: #7a4b00; line-height: 1.5; }
.sf-birthday[hidden] { display: none; }
.sf-day { margin: 0; padding: 6px 14px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; }
.sf-day.is-holiday { background: #fde8e8; color: #9b1c1c; }
.sf-tools .admin-actions { justify-content: center; }
.station-front .dtr-card { margin: 0; }
.station-front .dtr-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sf-side { display: grid; gap: 14px; align-content: start; }
.sf-side .dtr-roster { margin: 0; }
.sf-side .dtr-roster-list { max-height: 210px; }
.sf-sales[hidden], .sf-add[hidden] { display: none; }
.sf-sale { grid-template-columns: minmax(0, 1fr) auto; }
.sf-amount { font-weight: 700; color: var(--brand-dark); white-space: nowrap; }
.sf-add { width: 100%; padding: 14px; font-size: 1.05rem; letter-spacing: 0.04em; }
/* The Station's top row: Break Settings, Full screen and Log out as plain text beside the account */
.station-link { padding: 4px 2px; border: 0; background: none; color: var(--brand-dark); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.station-link:hover { text-decoration: underline; }
body[data-station="1"] .admin-nav .admin-links { gap: 18px; flex-wrap: wrap; justify-content: flex-end; }
body[data-embed="1"] .admin-top { display: none !important; }
@media (max-width: 640px) { body[data-station="1"] .admin-nav .admin-links { gap: 10px; font-size: 0.85rem; } }
/* The Station has no My Payslips (they are in the time clock of TrackBiz Back Office) */
body[data-station="1"] .dtr-more,
body[data-station="1"] #dtr-payslip-list { display: none !important; }
/* Lists on a phone: every value wraps inside its box (none runs out of it) */
@media (max-width: 640px) {
  .payroll-table td, .payroll-table td.amt, .table.payroll-table td { white-space: normal !important; overflow-wrap: anywhere; min-width: 0; }
}
/* Daily Time Record: "Edited by" under Hours on a computer; its own line under the boxes on a phone */
#records-table td.dtr-edited { color: var(--muted); white-space: nowrap; }
@media (max-width: 640px) {
  #records-table td.dtr-edited.is-empty { display: none !important; }
  #records-table td.dtr-edited::before { content: "Edited by "; display: inline; text-transform: none; letter-spacing: 0; font-size: inherit; color: inherit; }
  #records-table td.actions { order: 99; }
  #records-table td.dtr-edited { display: block; grid-column: 1 / -1; order: 98; padding: 0; background: none; color: var(--muted); font-size: 0.8rem; font-weight: 400; text-align: right; }
}
/* Daily Time Record: the Day (Regular Day, or the holiday) */
#records-table td.dtr-day { white-space: nowrap; color: var(--muted); }
#records-table td.dtr-day.is-holiday { color: #9b1c1c; font-weight: 700; }
/* Daily Time Record on a computer: Edited By centered, under its centered title */
@media (min-width: 641px) {
  #records-table td.dtr-edited { text-align: center; }
  #records-table thead th:nth-last-child(2) { text-align: center; }
  /* (each on one line: the table scrolls sideways instead) */
  #records-table td[data-label="Date"], #records-table td[data-label="Employee"], #records-table td.actions { white-space: nowrap; }
}
/* Every list on a computer or tablet: each value on one line, and the list scrolls sideways.
   Only long text wraps, in a column wide enough to read */
@media (min-width: 641px) {
  .table-wrap > .table:not(.plain) td { white-space: nowrap; }
  .table-wrap > .table:not(.plain) td[data-label="Details"], .table-wrap > .table:not(.plain) td[data-label="Businesses"] { min-width: 320px; white-space: normal; }
}
/* HR pages: no store name under the title (the store's own menu is right above it) */
.hr-store-name { display: none !important; }

/* ---------- The Station's front fills the screen and stays in the middle, whatever its size ---------- */
body[data-embed="1"] main.admin { min-height: 100vh; display: flex; align-items: center; box-sizing: border-box; padding: clamp(12px, 2vh, 28px) clamp(12px, 2.5vw, 40px) !important; }
body[data-embed="1"] main.admin > .container { width: 100%; max-width: none; margin: 0; padding: 0; }
.dtr-layout.station-front { width: 100%; max-width: 1700px; margin: 0 auto; justify-content: stretch; align-items: center; gap: clamp(16px, 2.5vw, 44px); }
@media (min-width: 1000px) { .dtr-layout.station-front { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); } }
.station-front .dtr-card { width: 100%; max-width: none; padding: clamp(18px, 2.2vw, 36px); }
.station-front .dtr-card select#dtr-employee, .station-front .dtr-card input { font-size: clamp(1rem, 1.2vw, 1.3rem); }
.station-front .dtr-card .dtr-photo { width: clamp(90px, 9vw, 150px); height: clamp(90px, 9vw, 150px); }
.station-front .dtr-actions .btn { padding: clamp(12px, 1.4vw, 20px); font-size: clamp(1rem, 1.2vw, 1.3rem); }
.sf-clock .dtr-clock strong { font-size: clamp(2.8rem, 7vw, 7.5rem); }
.sf-clock .dtr-clock span { font-size: clamp(1rem, 1.3vw, 1.5rem); }
.sf-name { font-size: clamp(1.4rem, 2.2vw, 2.4rem); }
.sf-logo { max-width: min(340px, 100%); max-height: clamp(90px, 14vh, 180px); }
.sf-day, .sf-birthday { font-size: clamp(0.95rem, 1.1vw, 1.2rem); }
.sf-side { gap: clamp(12px, 1.6vw, 22px); }
.sf-side .dtr-roster { padding: clamp(14px, 1.6vw, 24px); }
.sf-side .dtr-roster h2 { font-size: clamp(1.05rem, 1.3vw, 1.4rem); }
.sf-side .dtr-roster-list { max-height: max(160px, calc(50vh - 170px)); }
.sf-add { padding: clamp(14px, 1.6vw, 22px); font-size: clamp(1rem, 1.3vw, 1.35rem); }
/* (the page around it gives the front all the room under the top bar) */
body[data-station="1"]:not([data-embed="1"]) main.admin { padding-top: 0; padding-bottom: 0; }
body[data-station="1"]:not([data-embed="1"]) main.admin > .container { max-width: none; }
body[data-station="1"]:not([data-embed="1"]) .station-clock-frame { height: calc(100vh - 72px); min-height: 520px; }
.sf-clock .dtr-clock strong { white-space: nowrap; font-size: clamp(2.4rem, 5vw, 6.2rem); }
.station-front .dtr-card .dtr-photo { margin-left: auto; margin-right: auto; }
/* Station: Log In today and Sales This Week are each the height of five rows; more scroll inside */
.sf-side .dtr-roster-list { --row: 56px; gap: 8px; height: calc(5 * var(--row) + 4 * 8px); max-height: none; overflow-y: auto; align-content: start; padding-right: 4px; }
.sf-side .dtr-roster-row { height: var(--row); box-sizing: border-box; padding-top: 6px; padding-bottom: 6px; }
/* Station: the Time In / Out card as tall as the right column, with a bigger picture of who logs in */
.dtr-layout.station-front { align-items: stretch; }
.station-front .sf-info { align-self: center; }
.station-front .dtr-card { display: flex; flex-direction: column; justify-content: center; gap: clamp(10px, 1.4vh, 18px); }
.station-front .dtr-card .dtr-photo { width: clamp(150px, 15vw, 240px); height: clamp(150px, 15vw, 240px); font-size: clamp(3rem, 5vw, 5rem); }
.station-front .dtr-card .dtr-photo img, .station-front .dtr-card .dtr-photo .list-avatar { width: 100%; height: 100%; font-size: inherit; }
.station-front .sf-side { align-content: center; }
/* Station: everything fits the screen (no page scroll, no second scrollbar). Each list keeps five rows,
   the rows getting shorter on a shorter screen; a picture of a good size */
body[data-station="1"]:not([data-embed="1"]) { overflow: hidden; }
body[data-station="1"]:not([data-embed="1"]) .station-clock-frame { height: calc(100vh - var(--nav-height, 72px)); min-height: 0; }
body[data-embed="1"] { overflow: hidden; }
body[data-embed="1"] main.admin { height: 100vh; min-height: 0; }
.sf-side .dtr-roster-list { --row: clamp(40px, calc((100vh - 330px) / 11), 56px); gap: 6px; height: calc(5 * var(--row) + 4 * 6px); }
.sf-side .dtr-roster-row { padding-top: 4px; padding-bottom: 4px; }
.sf-side .dtr-roster-row .list-avatar { width: calc(var(--row) - 14px); height: calc(var(--row) - 14px); }
.sf-side .dtr-roster { padding: clamp(10px, 1.4vh, 20px) clamp(12px, 1.4vw, 22px); }
.sf-side .dtr-roster h2 { margin-bottom: 0; }
.sf-side #dtr-roster-count, .sf-side #sf-sales-total { margin: 0 0 6px; }
.sf-add { padding: clamp(10px, 1.6vh, 20px); }
.station-front .dtr-card .dtr-photo { width: clamp(110px, 10vw, 170px); height: clamp(110px, 10vw, 170px); font-size: clamp(2.4rem, 3.6vw, 3.8rem); }
.station-front .dtr-card { max-height: calc(100vh - 40px); }
/* (a screen too short for all of it scrolls inside the Station only, never twice) */
body[data-embed="1"] { overflow-y: auto; }
body[data-embed="1"] main.admin { height: auto; min-height: 100vh; }
.sf-side .dtr-roster-list { --row: clamp(40px, calc((100vh - 260px) / 11), 56px); }
.sf-side .dtr-roster-who strong { font-size: 0.92rem; line-height: 1.15; }
.sf-side .dtr-roster-who small { font-size: 0.76rem; line-height: 1.15; }
.sf-side .dtr-roster-state { font-size: 0.74rem; padding: 2px 8px; }
/* Daily Time Record on a computer: the Employee column centered */
@media (min-width: 641px) {
  #records-table td[data-label="Employee"], #records-table thead th:nth-child(3) { text-align: center; }
}
/* Dashboard: the text of the small boxes (Payments, Additional Fund, …) a little bigger; the boxes stay as they are */
.dash-layout .dash-side .stat-details .detail-title { font-size: 0.85rem; }
.dash-layout .dash-side .stat-details .detail-row { font-size: 0.82rem; }
.dash-layout .dash-side .stat-details .detail-row strong { font-size: 0.86rem; }
.dash-layout.fit-screen .dash-side .stat-details .detail-title { font-size: clamp(0.78rem, 1.5vh, 1.02rem); }
.dash-layout.fit-screen .dash-side .stat-details .detail-row { font-size: clamp(0.76rem, 1.45vh, 1rem); line-height: 1.22; }
.dash-layout.fit-screen .dash-side .stat-details .detail-row strong { font-size: clamp(0.8rem, 1.55vh, 1.06rem); }
/* Station: the businesses' names as plain text (the one open in green, underlined); the bar takes little room */
.station-bar { margin: 6px 0 2px; }
.station-store { padding: 4px 2px; border: 0; border-radius: 0; background: none; color: var(--muted); font-weight: 600; }
.station-store:hover { color: var(--brand-dark); }
.station-store.is-current { background: none; color: var(--brand-dark); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.station-stores { gap: 6px 22px; }
/* Station on a short screen: one-line rows, and less room around the lists */
.sf-side .dtr-roster-list.is-compact .dtr-roster-who { display: flex; align-items: baseline; gap: 8px; }
.sf-side .dtr-roster-list.is-compact .dtr-roster-row .list-avatar { display: none; }
.sf-side .dtr-roster-list.is-compact .dtr-roster-row { grid-template-columns: minmax(0, 1fr) auto; }
.sf-side .dtr-roster-list.is-compact .sf-sale { grid-template-columns: minmax(0, 1fr) auto; }
.sf-side.is-short { gap: 8px; }
.sf-side.is-short .dtr-roster { padding: 8px 12px; }
.sf-side.is-short .dtr-roster h2 { font-size: 1rem; }
.sf-side.is-short #dtr-roster-count, .sf-side.is-short #sf-sales-total { margin-bottom: 4px; font-size: 0.8rem; }
.sf-side.is-short .sf-add { padding: 9px; }
/* The Station's top row: the account and its links in a row on a computer, behind ⋮ on a phone */
.station-panel { display: contents; }
.station-more { display: none; }
@media (max-width: 640px) {
  body[data-station="1"] .admin-nav .admin-links { position: relative; flex-wrap: nowrap; gap: 6px; }
  body[data-station="1"] .station-more { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--text); font-size: 1.3rem; line-height: 1; cursor: pointer; }
  body[data-station="1"] .station-panel { display: none; }
  body[data-station="1"] .admin-links.menu-open .station-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 80; display: grid; gap: 4px; min-width: 210px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 12px 30px rgba(16, 35, 28, 0.15); }
  body[data-station="1"] .station-panel .who-am-i { padding: 6px 4px 10px; border-bottom: 1px solid var(--line); max-width: none; font-size: 0.9rem; }
  body[data-station="1"] .station-panel .station-link { padding: 10px 4px; text-align: left; font-size: 0.95rem; }
  /* the businesses' names: one line that slides sideways */
  .station-stores { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .station-stores::-webkit-scrollbar { display: none; }
}
/* Station: the picture grows with the room the card has (bigger on a big screen, never cut off) */
.station-front .dtr-card .dtr-photo { flex: 1 1 0; width: auto; height: auto; min-height: 110px; max-height: min(340px, 40vh); max-width: 100%; aspect-ratio: 1 / 1; align-self: center; font-size: clamp(2.4rem, 8vh, 6.5rem); }
.station-front .dtr-card .dtr-photo .list-avatar, .station-front .dtr-card .dtr-photo img { width: 100%; height: 100%; font-size: inherit; }
/* Reset All Data */
.reset-dialog { width: min(520px, calc(100vw - 24px)); }
.reset-warning { margin: 0; padding: 12px 14px; border-radius: 12px; background: #fdecea; color: #8a1c12; line-height: 1.5; }
.reset-go { background: #b42318; }
.reset-go:hover { background: #8a1c12; }
/* The Station for an account without Station in its access */
.station-denied { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.station-denied-box { display: grid; justify-items: center; gap: 12px; max-width: 460px; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: #fff; text-align: center; box-shadow: 0 10px 30px rgba(16, 35, 28, 0.08); }
.station-denied-box h1 { margin: 0; font-size: 1.35rem; }
.station-denied-box p { margin: 0; color: var(--muted); line-height: 1.55; }
/* Lists on a phone: a name with its picture lines up with the other values (label, then picture and name) */
@media (max-width: 640px) {
  .table td.with-avatar { display: flex; align-items: center; gap: 10px; }
  .table td.with-avatar[data-label]::before { align-self: center; }
}
/* A rate kept hidden: shown only while its eye is held down */
.held-value { display: inline-flex; align-items: center; gap: 6px; }
.held-text { min-width: 5.5em; letter-spacing: 0.08em; }
.held-value.is-shown .held-text { letter-spacing: normal; font-weight: 600; }
.held-eye { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.held-eye:active, .held-value.is-shown .held-eye { background: var(--brand-soft); color: var(--brand-dark); border-color: transparent; }
/* The lists' Time Stamp: when it was added (and approved, edited), and by whom */
.table td.stamp { white-space: pre-line; color: var(--muted); font-size: 0.8rem; line-height: 1.4; min-width: 170px; }
.wide .table td.stamp { white-space: pre-line; }
@media (max-width: 640px) { .table td.stamp { min-width: 0; font-size: 0.78rem; } }
/* Close Year (All Businesses): what goes, the Beginning Balance, the download, then the confirmation */
.close-year-dialog { width: min(760px, calc(100vw - 24px)); }
.close-year-dialog h3 { margin: 4px 0 6px; font-size: 0.95rem; }
.close-year-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
.close-year-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.close-year-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 10px; border-radius: 10px; background: var(--bg-alt); }
.close-year-list li span { min-width: 0; overflow-wrap: anywhere; }
.close-year-list li b { white-space: nowrap; }
.close-year-problem { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--warn-soft); color: var(--warn); line-height: 1.45; }
.close-year-step { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.close-year-done { color: var(--brand-dark); font-weight: 700; }
.close-year-confirm { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.close-year-confirm .form-note, .close-year-confirm .dialog-actions { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .close-year-grid, .close-year-confirm { grid-template-columns: 1fr; }
}
/* HR pages: the store's logo, name, category and who is logged in above the page's title, as on the
   store page, so it is always plain which business is being managed */
.hr-store-head { display: flex; align-items: center; gap: 14px; margin: 0 0 28px; padding-bottom: 18px; border-bottom: 1px solid var(--line); min-width: 0; }
.hr-store-head .business-logo { flex: none; }
.hr-store-block { display: grid; gap: 2px; min-width: 0; }
.hr-store-title { font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 800; line-height: 1.15; color: var(--text); overflow-wrap: anywhere; }
.hr-store-meta { color: var(--muted); font-size: 0.95rem; }
.hr-store-meta:empty { display: none; }
body[data-embed="1"] .hr-store-head { display: none; }
@media (max-width: 640px) {
  .hr-store-head { gap: 10px; margin-bottom: 18px; padding-bottom: 12px; }
  .hr-store-head .business-logo { width: 40px; height: 40px; }
}
/* (the page's title is pulled up under the top bar; with the store's name above it, the name takes
   that place and the title sits under it with its own room, so they never overlap) */
.hr-store-head + .admin-top { margin-top: 0; }
.hr-tabs-row[hidden] + .hr-store-head { margin-top: -28px; }
.hr-store-head .business-logo { width: 48px; height: 48px; }
/* Station Log In Settings: the stores of this Station to save them for */
.break-stores { display: grid; gap: 6px; margin: 4px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.break-stores legend { padding: 0 4px; font-weight: 700; font-size: 0.9rem; }
.break-stores .break-store-all { padding-bottom: 6px; border-bottom: 1px solid var(--line); font-weight: 600; }
.break-stores label { overflow-wrap: anywhere; }

/* A client's own copy of TrackBiz: only the log in pop-up, over an empty page (script.js) */
.login-only .nav-links,
.login-only .nav-actions,
.login-only main,
.login-only .footer,
.login-only #close-login { display: none; }

/* Signing up (front page): the line under the log in and sign up forms that switches between them */
.login-switch { margin: 0; text-align: center; font-size: 0.9rem; color: var(--muted); }
.login-switch .link-button { font-size: inherit; }
.signup-lead { margin: -4px 0 0; color: var(--muted); font-size: 0.92rem; }
.login-only .login-switch { display: none; }

/* The Subscription page (subscription-app.js): its cards, where each business stands, and the
   pictures (QR code to pay, proof of payment) */
.sub-grid { display: grid; gap: 20px; }
/* The Subscription page's tabs, beside its title (they scroll sideways on a narrow screen) */
.admin-top .sub-tabs { flex: 1 1 auto; min-width: 0; margin: 0; overflow-x: auto; border-bottom: 0; scrollbar-width: none; }
.admin-top .sub-tabs::-webkit-scrollbar { display: none; }
@media (max-width: 640px) {
  .admin-top .sub-tabs { flex-basis: 100%; }
}
.sub-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 14px; min-width: 0; }
.sub-card h2 { margin: 0; font-size: 1.1rem; }
.sub-form { max-width: 520px; padding: 0; }
.sub-price { margin: 0; font-size: 1.05rem; }
.sub-instructions { margin: 0; white-space: pre-wrap; }
.sub-qr { max-width: 240px; width: 100%; border: 1px solid var(--line); border-radius: 10px; }
.sub-proof-preview { max-width: 240px; width: 100%; border: 1px solid var(--line); border-radius: 10px; }
.sub-ok { color: var(--brand-dark); font-weight: 600; }
.sub-warn { color: var(--warn); font-weight: 600; }
.sub-bad { color: #b42318; font-weight: 600; }
.proof-dialog { width: min(720px, calc(100% - 32px)); }
.proof-dialog img { display: block; max-width: 100%; max-height: 75vh; margin: 0 auto 12px; border-radius: 8px; }
.notice-payment strong,
.notice-account strong { color: var(--brand-dark); }
.sub-chip { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: var(--brand-soft); color: var(--brand-dark); vertical-align: middle; }
.sub-chip.sub-chip-warn { background: var(--warn-soft); color: var(--warn); }
.sub-chip.sub-chip-bad { background: #fde8e7; color: #b42318; }
.sub-banner { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: var(--warn-soft); color: var(--warn); font-weight: 600; }
.sub-banner a { color: inherit; }
/* (TrackBiz looking at a client's business) */
.sub-banner.sub-banner-info { background: var(--brand-soft); color: var(--brand-dark); }

/* All Businesses: a group's row looks like a business's, with its name in bold and ▼ / ▲ that shows
   or hides its businesses (indented under it) */
.group-row { cursor: pointer; }
.group-row .group-name { font-weight: 800; }
.group-row .group-count { margin-left: 10px; color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.group-toggle {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-right: 6px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #eceff1;
  color: #4a5560;
  font-size: 0.75rem;
  cursor: pointer;
}
.group-toggle:hover { background: #dfe3e6; border-color: #c4cbd0; color: #2f3840; }
/* (on a phone the group's card has no blank Category, Owner … lines) */
@media (max-width: 640px) {
  .table td.group-blank { display: none; }
}
.in-group td:first-child { padding-left: 54px; }
/* The branches: a line down from the open group's arrow, then ├ to each of its businesses and └ to
   the last one (the arrow's middle is 14px padding + 12px in) */
.group-row td:first-child, .in-group td:first-child { position: relative; }
.group-row.is-open td:first-child::after,
.in-group td:first-child::before,
.in-group td:first-child::after { content: ""; position: absolute; border-color: #a9c7bb; border-style: solid; border-width: 0; pointer-events: none; }
.group-row.is-open td:first-child::after { left: 25px; top: calc(50% + 12px); bottom: -1px; border-left-width: 2px; }
.in-group td:first-child::before { left: 25px; top: 0; bottom: -1px; border-left-width: 2px; }
.in-group.group-last td:first-child::before { bottom: 50%; }
.in-group td:first-child::after { left: 25px; top: calc(50% - 1px); width: 20px; border-top-width: 2px; }
.group-pick { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
/* (with many businesses the list scrolls inside its box instead of making the pop-up long) */
.group-list { display: grid; gap: 8px; max-height: 240px; overflow-y: auto; padding-right: 4px; }
.group-pick legend { padding: 0 4px; font-weight: 600; font-size: 0.9rem; }
/* The Combined Dashboard: its businesses under the group name */
.group-pick-line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.group-pick-menu { position: relative; display: inline-block; }
.group-pick-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--brand-dark);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.group-pick-button::-webkit-details-marker { display: none; }
.group-pick-button::after { content: "▾"; font-size: 0.8em; }
.group-pick-menu[open] .group-pick-button { border-color: var(--brand); }
.group-pick-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  width: min(320px, calc(100vw - 32px));
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(20, 50, 40, 0.16);
}
/* (with many businesses the list scrolls inside the panel) */
.group-pick-list { display: grid; gap: 2px; max-height: 260px; overflow-y: auto; }
.group-pick-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 8px; }
.group-pick-row:hover { background: var(--bg-alt); }
.group-pick-row label { display: flex; align-items: center; gap: 10px; color: var(--text); cursor: pointer; overflow-wrap: anywhere; }
.group-pick-row input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.group-pick-foot { display: flex; justify-content: flex-end; padding: 6px 8px 2px; border-top: 1px solid var(--line); margin-top: 4px; }
.group-store-open { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; color: var(--brand-dark); font-weight: 700; text-decoration: none; }
.group-store-open:hover { background: var(--brand-soft); }
@media (max-width: 640px) {
  /* (a phone's cards: a group's businesses sit a little in from the left, under the group's card) */
  .in-group td:first-child { padding-left: 0; }
  /* (a phone's cards: the row's own branch lines are left out; instead a line runs down the left of
     the group's businesses from the group's card, with a branch to each card, └ at the last) */
  .group-row.is-open td:first-child::after, .in-group td:first-child::before, .in-group td:first-child::after { display: none; }
  .table tr.group-row { position: relative; border-color: #a9c7bb; }
  .table tr.group-row.is-open::after { content: ""; position: absolute; left: 14px; bottom: -14px; height: 13px; border-left: 2px solid #a9c7bb; }
  .table tr.in-group { position: relative; margin-left: 30px; }
  .table tr.in-group::before { content: ""; position: absolute; left: -17px; top: -14px; bottom: -14px; border-left: 2px solid #a9c7bb; }
  .table tr.in-group.group-last::before { bottom: 50%; }
  .table tr.in-group::after { content: ""; position: absolute; left: -17px; top: 50%; width: 16px; border-top: 2px solid #a9c7bb; }
}

/* Accounts › Clients: a client's account is only looked at by TrackBiz */
.account-view-only { color: var(--muted); font-size: 0.85rem; }

/* Accounts: a TrackBiz Admin or Staff's TrackBiz access, one line per page with what may be done there */
.team-access { display: grid; gap: 2px; }
.team-row { display: grid; grid-template-columns: minmax(180px, 220px) 1fr; align-items: center; gap: 6px 16px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.team-row:last-child { border-bottom: 0; }
.team-row .team-page { font-weight: 600; }
.team-abilities { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.team-abilities .check { font-size: 0.92rem; }
.team-row input:disabled + * , .team-row label:has(input:disabled) { color: var(--muted); }
@media (max-width: 640px) {
  .team-row { grid-template-columns: 1fr; }
  .team-abilities { padding-left: 28px; }
}

/* Analytics: the business side (subscriptions, inquiries, closed businesses) over the visitors */
.analytics-heading { margin: 8px 0 12px; color: var(--brand-dark); font-size: 1.15rem; }
.analytics-heading:not(:first-child) { margin-top: 28px; }
.biz-layout { margin-top: 16px; }
.biz-standing { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.biz-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.biz-chip { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--bg-alt); }
.biz-chip strong { font-size: 1.4rem; }
.biz-chip span { color: var(--muted); font-size: 0.85rem; }
.biz-chip.is-paid { background: #d3ecdf; } .biz-chip.is-paid strong { color: #1d6b52; }
.biz-chip.is-trial { background: #d4e5f8; } .biz-chip.is-trial strong { color: #2f5f8f; }
.biz-chip.is-overdue { background: #fbedbf; } .biz-chip.is-overdue strong { color: #8a6d12; }
.biz-chip.is-locked { background: #f8d6df; } .biz-chip.is-locked strong { color: #9b4058; }
.biz-chip.is-free { background: #e0d7f6; } .biz-chip.is-free strong { color: #5b479a; }
.biz-payments { margin: 0; color: var(--muted); }
/* The TrackBiz Dashboard: the Date Range by the title, the boxes, money on hand, and the records */
.earnings-range { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; }
.earnings-range .range-label { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.earnings-range select, .earnings-range input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: var(--bg); }
.earnings-dates { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.earnings-dates.is-fixed input { border-color: transparent; background: none; color: var(--muted); }
.earnings-on-hand { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 16px 0 24px; }
.earnings-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.earnings-head h2 { margin: 0; }
.earnings-add { display: flex; flex-wrap: wrap; gap: 8px; }
.earnings-amount { text-align: right; white-space: nowrap; font-weight: 600; }
.earnings-earning .earnings-amount { color: #1d6b52; }
.earnings-expense .earnings-amount, .earnings-withdrawal .earnings-amount { color: #9b4058; }
.earnings-savings .earnings-amount { color: #5b479a; }
@media (max-width: 900px) {
  .earnings-on-hand { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .earnings-range { margin-left: 0; width: 100%; }
}
/* The picture viewer: ⟲ ⟳ to turn a receipt photographed sideways, over a dark page */
.image-viewer { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; padding: 0; border: 0; border-radius: 0; background: rgba(15, 23, 20, 0.92); }
.image-viewer::backdrop { background: rgba(15, 23, 20, 0.6); }
.image-viewer-tools { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 12px; }
.image-viewer-tools .btn { background: #fff; }
.image-viewer-tools .image-viewer-icon { min-width: 44px; font-size: 1.2rem; }
.image-viewer-zoom { align-self: center; min-width: 52px; color: #fff; font-weight: 700; text-align: center; }
.image-viewer-stage { display: flex; height: calc(100vh - 70px); overflow: auto; }
.image-viewer-stage.is-zoomed { cursor: grab; }
.image-viewer-stage.is-zoomed:active { cursor: grabbing; }
/* (margin: auto keeps it in the middle, and lets the stage scroll to every side once it is larger) */
.image-viewer-holder { position: relative; flex: none; margin: auto; }
.image-viewer-holder img { position: absolute; left: 50%; top: 50%; max-width: none; border-radius: 6px; background: #fff; transition: transform 0.15s ease; user-select: none; }

/* Download ▾ and Send ▾: the pop-ups that ask Excel or PDF, and who gets it */
.report-choice { width: min(460px, calc(100% - 32px)); }
.report-choice h2 { margin: 0 0 6px; font-size: 1.15rem; }
.report-choice-text { margin: 0 0 14px; color: var(--muted); }
.report-formats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.report-format { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); text-align: left; cursor: pointer; font: inherit; }
.report-format strong { font-size: 1.1rem; }
.report-format small { color: var(--muted); }
.report-format-excel strong { color: #1d6b52; }
.report-format-pdf strong { color: #9b4058; }
.report-format:hover { border-color: var(--brand); background: var(--brand-soft); }
.report-all { padding: 8px 0; border-bottom: 1px solid var(--line); font-weight: 600; }
.report-people { display: grid; gap: 6px; max-height: 240px; overflow-y: auto; padding: 8px 0; }
.report-people small { color: var(--muted); }
.report-others { display: grid; gap: 6px; margin-top: 10px; font-weight: 500; }
.report-others input { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.report-choice { padding: 24px; }
.report-choice .check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; line-height: 1.35; }
.report-choice .check input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--brand); }
.report-choice .check small { font-weight: 400; }
.report-choice .dialog-actions { margin-top: 16px; }

/* The front page's header: seamless over the hero (no white band and no line under it); once the
   page is scrolled, a faint frosted glass behind it keeps the menu readable over the other sections */
.nav.nav-front { position: fixed; left: 0; right: 0; background: transparent; backdrop-filter: none; border-bottom-color: transparent; transition: background 0.25s ease, box-shadow 0.25s ease, backdrop-filter 0.25s ease; }
.nav.nav-front.is-scrolled { background: rgba(255, 255, 255, 0.62); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 6px 24px rgba(20, 50, 40, 0.06); }
/* (the hero starts under the floating header, at the very top of the page) */
.front-page .hero { padding-top: calc(72px + 64px); }
@media (min-width: 901px) {
  .front-page .hero { min-height: 100vh; }
}

/* Customize Dashboard (business-app.js): its button under the downloads, and its list of ticks */
.dash-customize { margin-top: 10px; align-self: flex-start; }
.dash-choice-list { display: grid; gap: 8px; margin: 12px 0; text-align: left; }
.dash-choice-list .check-row { display: flex; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; }
.dash-choice-list input[type="checkbox"] { width: 18px; height: 18px; margin: 0; flex: none; }

/* The Dashboard's right side keeps its places when the Senior leaves some out (Customize Dashboard):
   money on hand, then the smaller boxes (or an empty place) taking the extra height, then the
   downloads and Customize Dashboard at their own size */
@media (min-width: 1101px) {
  .dash-side > .on-hand { grid-row: 1; }
  .dash-side > .stat-details, .dash-side > .dash-spacer { grid-row: 2; }
  .dash-side > .list-actions { grid-row: 3; align-self: end; }
  .dash-side > .dash-customize { grid-row: 4; }
  .dash-layout.fit-screen > .dash-side { grid-template-rows: auto minmax(0, 1fr) auto auto; }
}
@media (max-width: 1100px) {
  .dash-side > .dash-spacer { display: none; }
  .dash-layout > .dash-side > .dash-customize { order: 11; }
}

/* The installed app works in one window at a time (install.js): a second window is covered with this */
.one-window { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 16px; background: rgba(16, 35, 28, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.one-window-box { width: min(440px, 100%); padding: 24px; border-radius: 18px; background: #fff; box-shadow: 0 20px 50px rgba(16, 35, 28, 0.25); text-align: center; }
.one-window-box h2 { margin: 0 0 10px; font-size: 1.25rem; color: var(--brand-dark, #0b6b50); }
.one-window-box p { margin: 0 0 18px; color: var(--muted, #5a6b64); line-height: 1.5; }
.one-window-actions { display: grid; gap: 10px; }
.one-window-actions .btn { width: 100%; }
html.one-window-blocked, html.one-window-blocked body { overflow: hidden; }