/* Sales app. Chrome comes from /design-system/hive-chrome.css (header, auth cards,
   toolbar, panel); this file holds only what is specific to this app's own views.
   The demo lock form styles itself in demo-request.css, because that sheet is
   shared with the partner page, which loads no chrome. */

/* ── Shell ────────────────────────────────────────────────────────── */
/* ⚠️ EVERY app must define this itself. hive-chrome.css deliberately does not:
   its header comment lists ".app-shell sizing" as the app's own job, and the
   only shared default lives in hive-auth.css, which app pages do not load. Omit
   it and the page loses its top and left margins entirely, which is exactly what
   happened when this app was first built. Matches Orders / Cash Flow /
   Accounting so the internal apps feel like one product. */
.app-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-16);
}

.sales-lede { color: var(--fg-2); max-width: 44rem; margin: var(--space-6) 0 var(--space-8); }

/* auto-FILL, not auto-fit: with a single tile, auto-fit collapses the empty
   tracks and stretches that one card across the whole 1280px shell. */
.sales-tiles { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(17rem, 20rem)); justify-content: start; list-style: none; margin: 0; padding: 0; }

.sales-tile {
  display: block;
  padding: var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-top: 2px solid var(--kiss-red);
  border-radius: var(--radius-lg);
  text-decoration: none;
}

.sales-tile:hover { border-color: var(--border-strong); }

.sales-tile__title { margin: 0 0 var(--space-2); color: var(--fg-1); font-size: 1rem; }
.sales-tile__body { margin: 0; color: var(--fg-2); font-size: 0.875rem; }

/* Reference panel on the Sales home. Sits below the tiles because it is something
   you look up, not something you came to do. */
.sales-panel { margin: var(--space-12) 0 0; max-width: 52rem; }
.sales-panel__title { margin: 0 0 var(--space-2); color: var(--fg-1); font-size: 1rem; }
.sales-panel__lede { margin: 0 0 var(--space-5); color: var(--fg-2); font-size: 0.875rem; line-height: 1.5; }
.sales-panel__empty { margin: 0; color: var(--fg-3); font-size: 0.875rem; }

.sales-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.sales-table th {
  text-align: left; padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-strong);
  color: var(--fg-3); font-weight: 500; font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.sales-table td {
  padding: var(--space-3); border-bottom: 1px solid var(--border-default);
  color: var(--fg-2); vertical-align: top;
}
.sales-table td code { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--fg-1); }
.sales-table__off { color: var(--fg-3); }