/*
 * Equipment — 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 now speaks the same language, so the two
 * modules read as one product. Every rail value below is the CRM's value; where
 * a rule differs it is because Equipment has no deep-linked areas and so uses
 * buttons where the CRM uses links.
 *
 * The ground is declared twice, deliberately:
 *
 *   - as `--equipment-ivory-*`, for the rules in this sheet that name a
 *     surface explicitly;
 *   - by re-pointing the Portal's own `--surface` / `--surface-soft` /
 *     `--line` / `--text` / `--muted` / `--strong` / `--shadow` inside
 *     `.equipment-view`.
 *
 * The second half is what carries the theme into equipment.css without
 * rewriting three thousand lines of it: those tokens are substituted where
 * they are declared, so every derived token (`--surface-soft`, `--line`,
 * `--accent-soft`, `--ok-soft`) is restated here rather than left to inherit a
 * value already computed against white at `:root`.
 *
 * Like the CRM'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 two
 * sets are identical on purpose and any change must move both.
 */

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

.equipment-view {
  --equipment-ivory-ground: #f6f4ee;
  --equipment-ivory-card: #fffdf9;
  --equipment-ivory-hair: #e9e4d6;
  --equipment-ivory-hair-strong: #e6e1d4;
  --equipment-ivory-hair-soft: #f0ece0;
  --equipment-ivory-ink: #221f18;
  --equipment-ivory-ink-soft: #6d6552;

  /* The Portal tokens, re-pointed for this subtree only. */
  --surface: var(--equipment-ivory-card);
  --surface-soft: var(--equipment-ivory-ground);
  --line: var(--equipment-ivory-hair);
  --text: var(--equipment-ivory-ink);
  --muted: var(--equipment-ivory-ink-soft);
  --strong: var(--equipment-ivory-ink);
  --accent-soft: color-mix(in srgb, var(--brand-gold) 15%, var(--equipment-ivory-card));
  --ok-soft: color-mix(in srgb, var(--brand-gold) 14%, var(--equipment-ivory-card));
  --action-secondary: var(--equipment-ivory-ground);
  --action-secondary-hover: color-mix(in srgb, var(--brand-gold) 14%, var(--equipment-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(--equipment-ivory-card);
  --atrium-ui-hscroll-track: var(--equipment-ivory-hair);
  --atrium-ui-hscroll-thumb: color-mix(in srgb, var(--equipment-ivory-ink) 55%, var(--equipment-ivory-card));

  /* Full bleed, matching .crm-guest-360-view and .portal-home-view: cancel the
     app-shell padding so the rail reaches the left and bottom edges of the
     viewport. The shared top bar and context nav are hidden on Equipment
     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 */

.equipment-workspace {
  --equipment-navigation-width: 232px;
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--equipment-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. */
  overflow: clip;
  background: var(--equipment-ivory-card);
  transition: grid-template-columns 160ms ease;
}

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

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

.equipment-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. */
  --equipment-rail-ivory: #f2efe9;
  --equipment-rail-text: rgba(242, 239, 233, 0.72);
  --equipment-rail-faint: rgba(242, 239, 233, 0.45);
  --equipment-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(--equipment-ivory-card));
  background: var(--heading-color);
  color: var(--equipment-rail-text);
  scrollbar-color: rgba(242, 239, 233, 0.3) transparent;
}

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

.equipment-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(--equipment-rail-ivory);
  background: transparent;
  box-shadow: none;
}

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

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

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

.equipment-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. */
.equipment-navigation-portal {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 8px 0;
  padding: 7px 11px;
  border-radius: 6px;
  color: var(--equipment-rail-faint);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-decoration: none;
}

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

.equipment-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;
}

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

.equipment-navigation-item {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 0;
  border-radius: 6px;
  padding: 0 11px;
  color: var(--equipment-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;
}

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

.equipment-navigation-item.active {
  position: relative;
  color: var(--brand-gold-light);
  background: color-mix(in srgb, var(--brand-gold) 16%, transparent);
}

.equipment-navigation-item.active::before {
  content: "";
  position: absolute;
  inset: 7px auto 7px -8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--brand-gold);
}

.equipment-navigation-group {
  display: grid;
  gap: 2px;
}

.equipment-navigation-group-toggle {
  justify-content: flex-start;
}

.equipment-navigation-chevron {
  margin-inline-start: auto;
  color: var(--equipment-rail-faint);
  font-size: 0.95rem;
  line-height: 1;
  transition: transform 160ms ease;
}

.equipment-navigation-group-toggle[aria-expanded="false"] .equipment-navigation-chevron {
  transform: rotate(-90deg);
}

.equipment-navigation-subitems {
  display: grid;
  gap: 2px;
  padding-inline-start: 18px;
}

.equipment-navigation-subitem {
  min-height: 38px;
  padding-inline-start: 15px;
  font-size: 0.73rem;
  font-weight: 400;
}

.equipment-navigation-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

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

.equipment-navigation-section h3 {
  margin: 0 10px 7px;
  color: var(--equipment-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;
}

.equipment-workspace.is-navigation-collapsed .equipment-navigation-brand,
.equipment-workspace.is-navigation-collapsed .equipment-navigation-section h3,
.equipment-workspace.is-navigation-collapsed .equipment-navigation-item > span,
.equipment-workspace.is-navigation-collapsed .equipment-navigation-subitems,
.equipment-workspace.is-navigation-collapsed .equipment-navigation-portal,
.equipment-workspace.is-navigation-collapsed .equipment-navigation-foot {
  display: none;
}

.equipment-workspace.is-navigation-collapsed .equipment-navigation-header,
.equipment-workspace.is-navigation-collapsed .equipment-navigation-item {
  justify-content: center;
}

.equipment-workspace.is-navigation-collapsed .equipment-navigation-item.active::before,
.equipment-workspace.is-navigation-collapsed .equipment-navigation-group-toggle.is-open::before {
  inset-inline-start: -8px;
}

/* Collapsed, the open group's sub-items are hidden, so the group icon carries
   the current-view mark on their behalf. Expanded, the sub-item carries it and
   this rule does not apply. */
.equipment-workspace.is-navigation-collapsed .equipment-navigation-group-toggle.is-open {
  position: relative;
  color: var(--brand-gold-light);
  background: color-mix(in srgb, var(--brand-gold) 16%, transparent);
}

.equipment-workspace.is-navigation-collapsed .equipment-navigation-group-toggle.is-open::before {
  content: "";
  position: absolute;
  inset: 7px auto 7px -8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--brand-gold);
}

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

.equipment-navigation-session {
  display: grid;
  gap: 2px;
  margin-bottom: 2px;
}

.equipment-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;
}

.equipment-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;
}

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

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

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

.equipment-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. */
.equipment-navigation-scrim {
  display: none;
}

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

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

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

.equipment-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 workspace. */
.equipment-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;
}

.equipment-workspace-page {
  padding: clamp(14px, 2vw, 24px);
}

.equipment-lede {
  max-width: 760px;
  margin: 0 0 14px;
  color: var(--equipment-ivory-ink-soft);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.02rem;
  font-style: italic;
}

/* --------------------------------------------------- content in the theme */

/* The shared surfaces equipment.js renders with — panels, tables, metrics and
   the Portal's own controls — already read the re-pointed tokens above. What
   is restated here is the handful of places the Portal sheet pins a raw cool
   value, plus the house voice the CRM gives the same elements. */

.equipment-view .panel,
.equipment-view .metric {
  border-color: var(--equipment-ivory-hair);
  background: var(--equipment-ivory-card);
}

.equipment-view .panel-heading {
  border-bottom-color: var(--equipment-ivory-hair);
  background: var(--equipment-ivory-card);
}

.equipment-view .panel-heading h2,
.equipment-view .panel-heading h3,
.equipment-view .equipment-callout h2 {
  color: var(--equipment-ivory-ink);
  font-family: Marcellus, Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.equipment-view th {
  background: var(--equipment-ivory-ground);
  color: var(--equipment-ivory-ink-soft);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.1em;
}

.equipment-view th,
.equipment-view td {
  border-bottom-color: var(--equipment-ivory-hair-soft);
}

.equipment-view tbody tr:hover {
  background: color-mix(in srgb, var(--brand-gold) 7%, var(--equipment-ivory-card));
}

.equipment-view .field input,
.equipment-view .field select,
.equipment-view .field textarea {
  border-color: var(--equipment-ivory-hair);
  background: var(--equipment-ivory-card);
  color: var(--equipment-ivory-ink);
}

/* 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. */
.equipment-view .secondary-button {
  border: 1px solid var(--equipment-ivory-hair);
  background: var(--equipment-ivory-ground);
  color: var(--equipment-ivory-ink-soft);
}

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

.equipment-view .equipment-loading,
.equipment-view .equipment-empty,
.equipment-view .equipment-empty-state {
  color: var(--equipment-ivory-ink-soft);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.05rem;
  font-style: italic;
}

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

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

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

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

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

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

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

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

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

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

  .equipment-navigation-item {
    padding: 0 8px;
  }

  .equipment-workspace:not(.is-navigation-collapsed) .equipment-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: equipment-navigation-drawer-in 180ms ease;
  }

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

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