/**
 * Shared application chrome: a top bar and a grouped menu.
 *
 * WHY A LINKED STYLESHEET AND NOT INLINE
 *
 * Every page carries its own inline <style>, and several define their own
 * copy of the colour tokens. This file is linked BEFORE those blocks, so a
 * page's own tokens still win — the chrome adopts each page's palette rather
 * than imposing one, and pages that never defined tokens (the loss dashboard)
 * get sane defaults instead of unstyled chrome.
 *
 * Everything is prefixed `ag-` and scoped under the chrome's own elements, so
 * it cannot collide with six pages' worth of existing selectors.
 */

:root {
  --surface: #f7faf8; --panel: #ffffff; --panel-2: #eef4f0;
  --ink: #16201a; --ink-2: #48544b; --ink-3: #636f66;
  --rule: #dbe5de; --rule-2: #eaf1ec;
  --brand: #1c5a2b; --brand-d: #12401e; --on-brand: #ffffff;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --ag-rail: 236px;
}

/* ------------------------------------------------------------- top bar -- */

.ag-bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--panel); border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
}

.ag-menu-btn {
  display: inline-flex; align-items: center; gap: 7px;
  /* 40px minimum: this is the one control every page depends on, and a
     thumb on a phone is about 9 mm across. */
  min-height: 40px; padding: 8px 11px;
  background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 8px;
  font: inherit; font-weight: 600; font-size: 13px; cursor: pointer;
}
.ag-menu-btn:hover { background: var(--rule-2); }
.ag-menu-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ag-burger { display: block; width: 15px; height: 11px; position: relative; }
.ag-burger::before, .ag-burger::after, .ag-burger i {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: currentColor; border-radius: 2px;
}
.ag-burger::before { top: 0; } .ag-burger i { top: 4.5px; } .ag-burger::after { bottom: 0; }

.ag-brand { display: flex; align-items: center; gap: 8px; min-width: 0;
            text-decoration: none; color: inherit; }
.ag-brand img { height: 26px; width: auto; max-width: 116px; display: block; }
.ag-titles { min-width: 0; line-height: 1.2; }
.ag-org { font-size: 13px; font-weight: 700; color: var(--ink);
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-page { font-size: 11px; color: var(--ink-3); }
.ag-spacer { flex: 1 1 auto; }

.ag-bar .ag-signout {
  min-height: 34px; padding: 6px 10px;
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--rule); border-radius: 8px;
  font: inherit; font-size: 12px; cursor: pointer;
}
.ag-bar .ag-signout:hover { color: var(--ink); background: var(--panel-2); }

/* The organisation name is the first thing to go when space is tight; the
   menu button and the mark are the two things that must never go. */
@media (max-width: 560px) {
  .ag-org { max-width: 42vw; }
  .ag-menu-btn span.ag-menu-label { display: none; }
  .ag-bar .ag-signout { display: none; }
}

/* -------------------------------------------------------------- drawer -- */

.ag-scrim {
  position: fixed; inset: 0; z-index: 48;
  background: rgba(12, 24, 16, .38);
  opacity: 0; pointer-events: none; transition: opacity .16s ease;
}
.ag-scrim[data-open="true"] { opacity: 1; pointer-events: auto; }

.ag-drawer {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 49;
  width: min(84vw, var(--ag-rail));
  display: flex; flex-direction: column;
  background: var(--panel); border-right: 1px solid var(--rule);
  font-family: var(--sans);
  transform: translateX(-100%); transition: transform .18s ease;
  overflow-y: auto; overscroll-behavior: contain;
}
.ag-drawer[data-open="true"] { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ag-drawer, .ag-scrim { transition: none; }
}

.ag-drawer-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px; border-bottom: 1px solid var(--rule); position: sticky; top: 0;
  background: var(--panel);
}
.ag-drawer-head img { height: 28px; width: auto; max-width: 120px; }
.ag-close {
  margin-left: auto; width: 32px; height: 32px; line-height: 1;
  background: transparent; border: 1px solid var(--rule); border-radius: 8px;
  color: var(--ink-2); font-size: 18px; cursor: pointer;
}

.ag-group { padding: 10px 12px 2px; }
.ag-group-label {
  font-size: 10px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); padding: 0 4px 4px;
}
.ag-drawer a {
  display: block; padding: 9px 10px; margin: 1px 0;
  color: var(--ink); text-decoration: none;
  border-radius: 7px; font-size: 13.5px;
}
.ag-drawer a:hover { background: var(--panel-2); }
.ag-drawer a[aria-current="page"] {
  background: var(--brand); color: var(--on-brand); font-weight: 650;
}
.ag-drawer-foot {
  margin-top: auto; padding: 12px; border-top: 1px solid var(--rule);
  font-size: 12px; color: var(--ink-3);
}
.ag-drawer-foot b { display: block; color: var(--ink); font-size: 13px; }
.ag-drawer-foot button {
  margin-top: 8px; width: 100%; min-height: 36px;
  background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 8px; font: inherit; cursor: pointer;
}

/* At desk width the menu stops being a drawer and becomes a rail that is
   simply always there — the complaint that started this was navigation
   disappearing, and on a large screen there is no reason to hide it. */
@media (min-width: 1040px) {
  body.ag-railed { padding-left: var(--ag-rail); }
  .ag-drawer { transform: none; box-shadow: none; }
  .ag-scrim { display: none; }
  .ag-drawer .ag-close { display: none; }
  .ag-bar { margin-left: 0; }
  body.ag-railed .ag-menu-btn { display: none; }
  /* The rail carries the tenant's identity once it is permanently visible;
     repeating the mark in the bar two inches to the right just says it twice.
     The bar keeps the page name, which the rail does not show. */
  body.ag-railed .ag-bar-logo,
  body.ag-railed .ag-org { display: none; }
  body.ag-railed .ag-page { font-size: 13px; font-weight: 600; color: var(--ink); }
}

/* -------------------------------------------------------- next step -- */
/* One suggestion, always visible at the top of the work. Deliberately not a
   modal and not dismissible: a hint that can be closed is a hint that is gone
   the one time it was needed. It disappears on its own when setup is done. */

.ag-next-host { font-family: var(--sans); }
.ag-next {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 10px 12px 0; padding: 10px 12px;
  background: #eef6f0; border: 1px solid #cfe4d5; border-radius: 10px;
  color: var(--ink); font-size: 13px;
}
.ag-next-here { background: #fff8e6; border-color: #f0dcae; }
.ag-next-k {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand); white-space: nowrap;
}
.ag-next-t { flex: 1 1 220px; min-width: 0; line-height: 1.35; }
.ag-next-why { display: block; color: var(--ink-3); font-size: 12px; }
.ag-next-go {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  background: var(--brand); color: var(--on-brand); border-radius: 8px;
  font-weight: 650; text-decoration: none; white-space: nowrap;
}
.ag-next-all { color: var(--ink-3); font-size: 12px; white-space: nowrap; }

/* ------------------------------------------------ one identity, not two -- */
/* Every page was built with its own header carrying the tenant mark and name.
   Under the shared bar that meant the logo and business name twice, stacked,
   and on a phone the page title started 336px down an 812px screen — 40% of
   the first view spent saying the same thing twice. The page header keeps its
   one working control (Export, New order, Refresh...) as a slim action row. */
body.ag-mounted .wrap > header .chip,
body.ag-mounted .wrap > header .who,
body.ag-mounted .wrap > header .brandbox {
  display: none !important;
}
body.ag-mounted .wrap > header {
  justify-content: flex-end;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 6px;
  border-bottom: 0;
}

/* On a phone the prompt is one line and a button. The explanation is useful
   at a desk and costs four wrapped lines on a 375px screen; it stays one tap
   away on the Getting started page. */
@media (max-width: 560px) {
  .ag-next { margin: 8px 10px 0; padding: 8px 10px; gap: 8px; }
  .ag-next-why, .ag-next-all { display: none; }
  .ag-next-k { display: none; }
  .ag-next-t { flex-basis: 0; font-size: 12.5px; }
  .ag-next-go { min-height: 34px; padding: 0 11px; }
}