/*
 * Accounting — the workspace shell and the Ivory ground, matching the CRM.
 *
 * The CRM proved this shell first: a full-bleed workspace whose left column is
 * the dark Portico rail (crm-guest-360.css) sitting on an ivory content ground
 * (crm-guest-360-ivory.css). Equipment followed it (equipment-shell.css).
 * Accounting is the third module to speak it, so the three read as one product.
 * Every rail value below is the CRM's value; where a rule differs it is because
 * Accounting's rail carries state the module already owned — the audit period
 * mode and the hotel selection — rather than deep-linked areas.
 *
 * The ground is declared twice, deliberately:
 *
 *   - as `--accounting-ivory-*`, for the rules in this sheet and in
 *     accounting-audit.css that name a surface explicitly;
 *   - by re-pointing the Portal's own `--surface` / `--surface-soft` /
 *     `--line` / `--text` / `--muted` / `--strong` / `--shadow` inside
 *     `.accounting-view`.
 *
 * The second half is what carries the theme into the shared component rules in
 * web/public/styles.css without rewriting them: `.panel`, `.metric`, `.field`,
 * `table` and the rest are declared once for the whole Portal and are shared
 * with Administration, so they are re-grounded here by substitution rather
 * than edited there. Every derived token (`--surface-soft`, `--line`,
 * `--accent-soft`, `--ok-soft`) is restated rather than left to inherit a value
 * already computed against white at `:root`.
 *
 * Like the CRM's and Equipment's, these are pinned colours rather than theme
 * tokens: the ivory pane, the near-white card and the warm hairlines between
 * them are the identity of these surfaces, not a coat theme.js should repaint.
 * That is why `--heading-color`, `--brand-gold` and `--action` are deliberately
 * NOT shadowed — the rail, the gold and the primary button stay on the
 * appearance settings an administrator controls.
 *
 * The values are the CRM's ground verbatim (crm-guest-360-ivory.css); the three
 * sets are identical on purpose and any change must move all of them.
 */

/* ------------------------------------------------------------- the ground */

.accounting-view {
  --accounting-ivory-ground: #f6f4ee;
  --accounting-ivory-card: #fffdf9;
  --accounting-ivory-hair: #e9e4d6;
  --accounting-ivory-hair-strong: #e6e1d4;
  --accounting-ivory-hair-soft: #f0ece0;
  --accounting-ivory-rule: #c6bfa9;
  --accounting-ivory-ink: #221f18;
  --accounting-ivory-ink-soft: #6d6552;
  --accounting-ivory-ink-faint: #7d7460;

  /* The five semantic pairs, from crm-guest-360-ivory.css. Accounting reads
     them for the status badges and the difference amounts, which are the only
     places in the module where a tint carries a second reading of a word that
     is already on screen. */
  --accounting-sem-good: #3e7247;
  --accounting-sem-good-soft: #e7efe4;
  --accounting-sem-warn: #8f5a10;
  --accounting-sem-warn-soft: #f7ecd7;
  --accounting-sem-bad: #9c3a2e;
  --accounting-sem-bad-soft: #f6e4de;
  --accounting-sem-info: #3f628f;
  --accounting-sem-info-soft: #e8edf4;
  --accounting-sem-neutral: #6d6552;
  --accounting-sem-neutral-soft: #efece3;

  /* The Portal tokens, re-pointed for this subtree only. */
  --surface: var(--accounting-ivory-card);
  --surface-soft: var(--accounting-ivory-ground);
  --line: var(--accounting-ivory-hair);
  --text: var(--accounting-ivory-ink);
  --muted: var(--accounting-ivory-ink-soft);
  --strong: var(--accounting-ivory-ink);
  --accent-soft: color-mix(in srgb, var(--brand-gold) 15%, var(--accounting-ivory-card));
  --ok-soft: color-mix(in srgb, var(--brand-gold) 14%, var(--accounting-ivory-card));
  --action-secondary: var(--accounting-ivory-ground);
  --action-secondary-hover: color-mix(in srgb, var(--brand-gold) 14%, var(--accounting-ivory-card));
  --shadow: 0 2px 8px rgba(34, 31, 24, 0.08);

  /* The sticky scrollbar proxy paints over content while it floats, so it
     takes the card it paints on rather than the portal surface. */
  --atrium-ui-hscroll-surface: var(--accounting-ivory-card);
  --atrium-ui-hscroll-track: var(--accounting-ivory-hair);
  --atrium-ui-hscroll-thumb: color-mix(in srgb, var(--accounting-ivory-ink) 55%, var(--accounting-ivory-card));

  /* Full bleed, matching .crm-guest-360-view, .equipment-view and
     .portal-home-view: cancel the app-shell padding and the shared `main`
     centring so the rail reaches the left and bottom edges of the viewport.
     The shared top bar and context nav are hidden on Accounting routes
     (app.js), so the rail alone carries brand, session and the way back to the
     Portal. */
  min-width: 0;
  max-width: none;
  margin: 0 -22px -40px;
  padding: 0;
}

/* ---------------------------------------------------------- the workspace */

.accounting-workspace {
  --accounting-navigation-width: 232px;
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--accounting-navigation-width) minmax(0, 1fr);
  /* clip, not hidden: a hidden box is still a scroll container, so focusing
     content that overflows the grid drags the whole workspace sideways and
     parks the navigation rail off the viewport edge. clip cannot scroll —
     which also keeps it out of the sticky rail's containing scrollport. The
     audit tables are the widest in the Portal, so this matters more here than
     it did in either module that came first. */
  overflow: clip;
  background: var(--accounting-ivory-card);
  transition: grid-template-columns 160ms ease;
}

.accounting-workspace.is-navigation-collapsed {
  --accounting-navigation-width: 66px;
}

/* ------------------------------------------------------- the Portico rail */

.accounting-navigation {
  /* The lock screen's dark brand panel carried into the app shell. Ink and
     gold resolve from the appearance tokens so admin palette overrides keep
     working; the ivory constants match auth.css. */
  --accounting-rail-ivory: #f2efe9;
  --accounting-rail-text: rgba(242, 239, 233, 0.72);
  --accounting-rail-faint: rgba(242, 239, 233, 0.45);
  --accounting-rail-line: rgba(242, 239, 233, 0.16);
  min-width: 0;
  /* Pinned to the viewport while the page scrolls: the workspace column
     stretches with the content, the rail itself stays put. The page (window)
     remains the only scroll container. */
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid color-mix(in srgb, var(--heading-color) 88%, var(--accounting-ivory-card));
  background: var(--heading-color);
  color: var(--accounting-rail-text);
  scrollbar-color: rgba(242, 239, 233, 0.3) transparent;
}

.accounting-navigation-header {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 13px;
  border-bottom: 1px solid var(--accounting-rail-line);
}

.accounting-navigation-toggle {
  width: 38px;
  height: 38px;
  min-height: 38px;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 0;
  color: var(--accounting-rail-ivory);
  background: transparent;
  box-shadow: none;
}

.accounting-navigation-toggle:hover,
.accounting-navigation-toggle:focus-visible {
  border-color: var(--accounting-rail-line);
  background: rgba(242, 239, 233, 0.08);
}

.accounting-navigation-toggle > span {
  width: 17px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
}

.accounting-navigation-brand {
  min-width: 0;
  display: grid;
  line-height: 1.15;
  white-space: nowrap;
}

.accounting-navigation-brand strong {
  color: var(--brand-gold-light);
  font-family: Marcellus, Georgia, "Times New Roman", serif;
  font-size: 1.02rem;
  font-weight: 400;
  letter-spacing: 0.14em;
}

/* The way back to the portal replaces the hidden top bar's context nav. */
.accounting-navigation-portal {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 8px 0;
  padding: 7px 11px;
  border-radius: 6px;
  color: var(--accounting-rail-faint);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.accounting-navigation-portal:hover,
.accounting-navigation-portal:focus-visible {
  color: var(--brand-gold-light);
  background: color-mix(in srgb, var(--brand-gold) 12%, transparent);
}

.accounting-navigation-portal svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
}

.accounting-navigation-body {
  min-height: 0;
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px 8px 18px;
}

.accounting-navigation-section {
  margin-top: 19px;
}

.accounting-navigation-section:first-child {
  margin-top: 4px;
}

.accounting-navigation-section h3 {
  margin: 0 10px 7px;
  color: var(--accounting-rail-faint);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --------------------------------------------- the rail's two item groups */

/* The audit mode switch and the hotel tabs were both built as horizontal
   strips for the hidden top bar (`.audit-mode-switch` and `.tabs` in
   styles.css). In the rail they become the navigation the CRM and Equipment
   render from JS, so both containers give up their strip geometry and both
   kinds of button arrive at one voice — the shared `.crm-navigation-item` /
   `.equipment-navigation-item` voice, restated here because those sheets scope
   it to their own modules.

   Neither markup is this sheet's to change: `.tabs` is filled by
   renderHotelTabs() in app.js and the mode buttons are the ones app.js already
   binds by `[data-audit-mode]`. Restyling in place is what keeps the module's
   wiring untouched. */
.accounting-navigation .audit-mode-switch,
.accounting-navigation .tabs {
  display: grid;
  gap: 2px;
  grid-template-columns: minmax(0, 1fr);
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  overflow: visible;
  background: none;
}

.accounting-navigation .audit-mode-button,
.accounting-navigation .tab-button {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 0;
  border-radius: 6px;
  padding: 0 11px;
  color: var(--accounting-rail-text);
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-align: left;
  white-space: nowrap;
}

.accounting-navigation .audit-mode-button:hover,
.accounting-navigation .audit-mode-button:focus-visible,
.accounting-navigation .tab-button:hover,
.accounting-navigation .tab-button:focus-visible {
  color: var(--brand-gold-light);
  background: color-mix(in srgb, var(--brand-gold) 12%, transparent);
}

.accounting-navigation .audit-mode-button.active,
.accounting-navigation .tab-button.active {
  position: relative;
  color: var(--brand-gold-light);
  background: color-mix(in srgb, var(--brand-gold) 16%, transparent);
}

.accounting-navigation .audit-mode-button.active::after,
.accounting-navigation .tab-button.active::after {
  content: "";
  position: absolute;
  inset: 7px auto 7px -8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--brand-gold);
}

/* The collapsed strip. Neither group carries an icon — the CRM's rail draws
   one per area, but a hotel name arrives from the server and has no glyph to
   draw — so each item is given a mark instead: the two audit modes take the
   initial of the Greek word they already read as, and the hotels take their
   position in the list, counted by CSS so app.js never has to number them.
   The mark is generated at every width and simply sits behind the label until
   the label goes away. */
.accounting-navigation .tabs {
  counter-reset: accounting-hotel;
}

.accounting-navigation .audit-mode-button::before,
.accounting-navigation .tab-button::before {
  flex: 0 0 auto;
  display: none;
  width: 18px;
  color: currentColor;
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.82rem;
  text-align: center;
}

.accounting-navigation .tab-button::before {
  counter-increment: accounting-hotel;
  content: counter(accounting-hotel);
}

.accounting-navigation .audit-mode-button[data-audit-mode="daily"]::before {
  content: "Η";
}

.accounting-navigation .audit-mode-button[data-audit-mode="period"]::before {
  content: "Π";
}

.accounting-workspace.is-navigation-collapsed .accounting-navigation-brand,
.accounting-workspace.is-navigation-collapsed .accounting-navigation-section h3,
.accounting-workspace.is-navigation-collapsed .accounting-navigation-portal,
.accounting-workspace.is-navigation-collapsed .accounting-navigation-foot {
  display: none;
}

/* Collapsed, the mark is all there is: the label is taken out of the flow
   rather than hidden, so the button keeps its height and its hit area. */
.accounting-workspace.is-navigation-collapsed .accounting-navigation-header,
.accounting-workspace.is-navigation-collapsed .audit-mode-button,
.accounting-workspace.is-navigation-collapsed .tab-button {
  justify-content: center;
}

.accounting-workspace.is-navigation-collapsed .audit-mode-button::before,
.accounting-workspace.is-navigation-collapsed .tab-button::before {
  display: block;
}

.accounting-workspace.is-navigation-collapsed .audit-mode-button,
.accounting-workspace.is-navigation-collapsed .tab-button {
  padding: 0;
  font-size: 0;
  letter-spacing: 0;
}

.accounting-workspace.is-navigation-collapsed .audit-mode-button.active::after,
.accounting-workspace.is-navigation-collapsed .tab-button.active::after {
  inset-inline-start: -8px;
}

/* ------------------------------------------------------------ the rail foot */

/* The house line closes the rail the way it closes the lock screen's brand
   panel: a ticked hairline over the Cormorant flourish. */
.accounting-navigation-foot {
  display: grid;
  gap: 10px;
  padding: 12px 16px 15px;
}

/* Session moved down from the hidden top bar, in the home rail's quiet
   text-button vocabulary (.portal-rail-session). */
.accounting-navigation-session {
  display: grid;
  gap: 2px;
  margin-bottom: 2px;
}

.accounting-navigation-session span {
  overflow: hidden;
  color: rgba(242, 239, 233, 0.9);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accounting-navigation-session button {
  width: auto;
  min-height: 30px;
  justify-self: start;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: rgba(242, 239, 233, 0.55);
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}

.accounting-navigation-session button:hover,
.accounting-navigation-session button:focus-visible {
  color: var(--brand-gold-light);
  background: transparent;
  text-decoration: underline;
}

.accounting-navigation-foot-rule {
  position: relative;
  height: 1px;
  background: var(--accounting-rail-line);
}

.accounting-navigation-foot-rule::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 34%;
  background: var(--brand-gold);
}

.accounting-navigation-foot p {
  margin: 0;
  color: var(--brand-gold-light);
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 1.02rem;
  font-style: italic;
  white-space: nowrap;
}

/* Only the phone drawer (max-width: 767px block) ever shows the scrim. */
.accounting-navigation-scrim {
  display: none;
}

/* -------------------------------------------------- the workspace surface */

.accounting-workspace-main {
  min-width: 0;
  background: color-mix(in srgb, var(--accounting-ivory-ground) 38%, var(--accounting-ivory-card));
}

.accounting-workspace-header {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--accounting-ivory-hair);
  padding: 14px clamp(18px, 2.4vw, 30px);
  background: var(--accounting-ivory-card);
}

.accounting-workspace-header h2 {
  margin: 2px 0 3px;
  color: var(--heading-color);
  font-family: Fraunces, Georgia, "Times New Roman", serif;
  font-size: clamp(1.45rem, 2.3vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Portico eyebrows: the sign-in panel's letter-spaced Tenor Sans label in the
   gold-ink mix, matching the CRM and Equipment workspaces. */
.accounting-view .eyebrow {
  color: var(--ok);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.16em;
}

/* The provenance line beside the title, in the italic the theme annotates
   with. It says which hotel and which day the figures on the page belong to,
   which the top bar used to say by having the tabs and the date picker in it. */
.accounting-workspace-scope {
  margin: 0;
  color: var(--accounting-ivory-ink-soft);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.02rem;
  font-style: italic;
  text-align: right;
}

.accounting-workspace-page {
  display: grid;
  /* minmax(0, 1fr), not the implicit `auto` track: an `auto` column is sized
     by its content's minimum, and the document-match table declares an
     1800px floor, so the column would grow to that and carry the whole
     workspace sideways past the viewport. */
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-content: start;
  padding: clamp(14px, 2vw, 24px);
}

/* ------------------------------------------------------------ the filters */

/* The audit form was a top-bar strip; on the workspace it becomes the ivory
   filter card the analytics surfaces filter behind
   (`.crm-analytics-filters`). Only the mode switch left it — that is
   navigation now and lives in the rail. */
.accounting-view .toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  align-items: flex-end;
  border: 1px solid var(--accounting-ivory-hair);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--accounting-ivory-card);
  box-shadow: none;
}

.accounting-view .toolbar .field > span {
  color: var(--accounting-ivory-ink-soft);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.accounting-view .field input,
.accounting-view .field select {
  border-color: var(--accounting-ivory-hair);
  border-radius: 7px;
  background: var(--accounting-ivory-card);
  color: var(--accounting-ivory-ink);
}

.accounting-view .field input:focus,
.accounting-view .field select:focus {
  border-color: var(--brand-gold);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* The submit stays the portal primary button — it is already the gold the rest
   of the pane is keyed to — and only its corner is brought to the theme's. */
.accounting-view .toolbar button[type="submit"] {
  border-radius: 7px;
}

/* The shared secondary button arrives as a cool grey slab with `border: 0`,
   so the hairline is named explicitly — same treatment, same reasoning, as
   the CRM directory sheet. */
.accounting-view .secondary-button {
  border: 1px solid var(--accounting-ivory-hair);
  background: var(--accounting-ivory-ground);
  color: var(--accounting-ivory-ink-soft);
}

.accounting-view .secondary-button:hover,
.accounting-view .secondary-button:focus-visible {
  background: var(--accent-soft);
  color: var(--accounting-ivory-ink);
}

/* ------------------------------------------------------------ narrow rail */

@media (max-width: 1180px) {
  .accounting-workspace {
    --accounting-navigation-width: 205px;
  }

  .accounting-workspace.is-navigation-collapsed {
    --accounting-navigation-width: 62px;
  }
}

@media (max-width: 900px) {
  .accounting-workspace-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .accounting-workspace-scope {
    text-align: left;
  }
}

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

/* Below 767px the expanded rail overlays the workspace instead of sharing its
   row, exactly as the CRM's and Equipment's do; the scrim closes it, and so
   does Escape. */
@media (max-width: 767px) {
  .accounting-view {
    margin: 0 -12px -24px;
  }

  .accounting-workspace,
  .accounting-workspace.is-navigation-collapsed {
    --accounting-navigation-width: 58px;
    grid-template-columns: var(--accounting-navigation-width) minmax(0, 1fr);
  }

  .accounting-workspace-main {
    min-width: 0;
  }

  .accounting-navigation-header {
    padding: 0 9px;
  }

  .accounting-navigation-body {
    padding: 8px 6px 14px;
  }

  .accounting-navigation .audit-mode-button,
  .accounting-navigation .tab-button {
    padding: 0 8px;
  }

  .accounting-workspace:not(.is-navigation-collapsed) .accounting-navigation {
    position: fixed;
    z-index: 40;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(268px, 84vw);
    box-shadow: 0 0 40px rgba(23, 26, 32, 0.4);
    animation: accounting-navigation-drawer-in 180ms ease;
  }

  .accounting-workspace:not(.is-navigation-collapsed) .accounting-navigation-scrim {
    position: fixed;
    z-index: 39;
    inset: 0;
    display: block;
    background: rgba(23, 26, 32, 0.44);
  }
}

@keyframes accounting-navigation-drawer-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}