/**
 * TIDY MENUS — TIDY_STANDARD_v1 §6.
 *
 * "Navigation is icon boxes with nested sub-menus, not a column of text links."
 * Two surfaces, one vocabulary: the CRM sidebar (menu--crm.html.twig) and the
 * topbar tool tabs (includes/erpal-topbar.html.twig).
 *
 * RULES THIS FILE IS BOUND BY:
 *  - Every colour is a token from css/erpal-tokens.css, so Night is correct
 *    without a second stylesheet and a tenant skin re-points the whole chrome by
 *    re-declaring tokens (§2.3 — a bare literal is the 08-03 Night bug reshipped).
 *  - The label never goes away above 390px (§6.3). Sizes shrink; text does not
 *    disappear. "Sales Orders" and "Purchase Orders" are not distinguishable by
 *    glyph, and an icon-only rail is a memory test.
 *  - Every interactive target clears 32px (§8.6).
 *
 * Loaded after css/app.css and css/erpal-topbar.css, and deliberately scoped one
 * level deeper (.erpal-tooltabs .erpal-tooltab) than the flat text-link rules it
 * supersedes there, so the older declarations are overridden rather than deleted
 * out of a file the mail app and other shells still share.
 */

/* ============================ shared ============================ */

.erpal-tidymenu__icon {
  flex: 0 0 auto;
  height: 18px;
  width: 18px;
}

/* ====================== SIDEBAR (menu--crm) ====================== */

.erpal-tidymenu {
  list-style: none;
  margin: 0;
  padding: 6px 10px 10px;
}

/* ---- group: a disclosure whose children nest underneath (§6.4) ---- */
.erpal-tidymenu__group {
  margin-bottom: 2px;
}
.erpal-tidymenu__disclosure > summary.erpal-tidymenu__grouphead {
  align-items: center;
  border-radius: 7px;
  color: var(--erpal-sidebar-ink-dim);
  cursor: pointer;
  display: flex;
  font-size: .68rem;
  font-weight: 700;
  gap: 8px;
  letter-spacing: .8px;
  list-style: none;
  min-height: 32px;
  padding: 6px 8px;
  text-transform: uppercase;
  user-select: none;
}
/* Two markers on one summary is a bug users read as a broken control. */
.erpal-tidymenu__grouphead::-webkit-details-marker {
  display: none;
}
.erpal-tidymenu__grouphead:hover {
  background: var(--erpal-hover-soft);
  color: var(--erpal-sidebar-ink);
}
.erpal-tidymenu__grouphead:focus-visible {
  outline: 2px solid var(--erpal-accent);
  outline-offset: 1px;
}
.erpal-tidymenu__grouptext {
  flex: 1 1 auto;
  min-width: 0;
}
.erpal-tidymenu__caret {
  color: var(--erpal-sidebar-ink-dim);
  flex: 0 0 auto;
  font-size: .7rem;
  transform: rotate(-90deg);
  transition: transform .15s ease;
}
.erpal-tidymenu__disclosure[open] > .erpal-tidymenu__grouphead .erpal-tidymenu__caret {
  transform: rotate(0);
}

/* §6.5 — the ACTIVE TRAIL IS VISIBLE AT BOTH LEVELS. The leaf is marked below;
   this marks the group that contains it, so a user three pages into Publishing
   can still see which tool they are in. */
.erpal-tidymenu__group.is-active-trail > .erpal-tidymenu__disclosure > .erpal-tidymenu__grouphead {
  color: var(--erpal-sidebar-active-ink);
}
.erpal-tidymenu__group.is-active-trail > .erpal-tidymenu__disclosure > .erpal-tidymenu__grouphead .erpal-tidymenu__icon {
  color: var(--erpal-sidebar-active-ink);
}

/* ---- the boxes themselves (§6.1: glyph above label, in one box) ---- */
.erpal-tidymenu__boxes {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  list-style: none;
  margin: 2px 0 8px;
  padding: 0 0 0 2px;
}
.erpal-tidymenu__box {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--erpal-sidebar-ink);
  display: flex;
  flex-direction: column;
  gap: 5px;
  hyphens: auto;
  justify-content: center;
  /* §8.6 — comfortably past the 32px touch minimum. */
  min-height: 58px;
  overflow-wrap: anywhere;
  padding: 8px 4px;
  text-align: center;
  text-decoration: none;
  transition: background .12s, color .12s, border-color .12s;
}
.erpal-tidymenu__label {
  font-size: .68rem;
  font-weight: 500;
  line-height: 1.2;
}
.erpal-tidymenu__box:hover {
  background: var(--erpal-hover-soft);
  border-color: var(--erpal-border);
  color: var(--erpal-ink);
}
.erpal-tidymenu__box:focus-visible {
  outline: 2px solid var(--erpal-accent);
  outline-offset: 1px;
}
.erpal-tidymenu__box.is-active {
  background: var(--erpal-sidebar-active-bg);
  border-color: var(--erpal-sidebar-active-ink);
  color: var(--erpal-sidebar-active-ink);
  font-weight: 600;
}

/* A top-level link with no children (e.g. Knowledge) is the same object laid
   out along the row — one vocabulary, not a second kind of button. */
.erpal-tidymenu__solo {
  margin: 2px 0;
}
.erpal-tidymenu__box--wide {
  flex-direction: row;
  gap: 9px;
  justify-content: flex-start;
  min-height: 38px;
  padding: 8px 10px;
  text-align: left;
}
.erpal-tidymenu__box--wide .erpal-tidymenu__label {
  font-size: .78rem;
}

/* ==================== TOPBAR TOOL TABS (§6.1) ==================== */

.erpal-tooltabs {
  align-items: center;
  gap: 3px;
  padding: 4px 0;
}

.erpal-tooltab-wrap {
  align-items: stretch;
  border: 1px solid transparent;
  border-radius: 9px;
  display: inline-flex;
  flex: 0 0 auto;
  position: relative;
  transition: background .12s, border-color .12s;
}
.erpal-tooltab-wrap:hover {
  background: var(--erpal-hover-soft);
  border-color: var(--erpal-border);
}
.erpal-tooltab-wrap.is-active {
  background: var(--erpal-accent-soft);
  border-color: var(--erpal-accent);
}

/* Supersede the flat text-link tab in css/erpal-topbar.css: the underline-style
   bottom border is what made it a text link, so it is reset explicitly rather
   than merely overpainted. */
.erpal-tooltabs .erpal-tooltab {
  align-items: center;
  border-bottom: 0;
  border-top: 0;
  border-radius: 8px;
  color: var(--erpal-muted);
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
  /* 32px+ target height inside a 56px bar. */
  min-height: 44px;
  padding: 4px 10px;
  text-decoration: none;
}
.erpal-tooltab__icon {
  height: 17px;
  width: 17px;
}
.erpal-tooltab__label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1px;
  line-height: 1;
  white-space: nowrap;
}
.erpal-tooltabs .erpal-tooltab:hover {
  background: transparent;
  color: var(--erpal-text);
}
.erpal-tooltabs .erpal-tooltab.is-active {
  color: var(--erpal-accent);
}
.erpal-tooltabs .erpal-tooltab:focus-visible {
  outline: 2px solid var(--erpal-accent);
  outline-offset: -2px;
}

/* ---- the caret that discloses the tab's sub-menu (§6.4) ---- */
.erpal-tooltab__more {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 0 8px 8px 0;
  color: var(--erpal-muted);
  cursor: pointer;
  display: flex;
  font-size: .62rem;
  justify-content: center;
  /* Narrow but full-height: the strip is ≥44px tall, so the target clears §8.6
     without stealing width from the label. */
  padding: 0 6px 0 2px;
}
.erpal-tooltab__more:hover,
.erpal-tooltab__more[aria-expanded="true"] {
  color: var(--erpal-accent);
}
.erpal-tooltab__more:focus-visible {
  outline: 2px solid var(--erpal-accent);
  outline-offset: -2px;
}
/* Positioned against the viewport, not the tab, because .erpal-topbar and
   .erpal-tooltabs are scroll containers and would clip it out of sight — see
   the measurement note in js/erpal-topbar.js. js sets top/left on open; these
   are the pre-measurement defaults. */
.erpal-tooltab__menu {
  left: 0;
  position: fixed;
  right: auto;
  top: var(--erpal-topbar-h, 56px);
}
.erpal-dropdown__item--icon {
  align-items: center;
  display: flex;
  gap: 9px;
}
.erpal-dropdown__item--icon.is-active {
  background: var(--erpal-accent-soft);
  color: var(--erpal-accent);
}

/* ============================ narrow ============================
   §6.7 — every target stays reachable. Between 1100px and 768px the tab labels
   are what has to give first, and they give by SHRINKING, not by vanishing:
   below 768px css/erpal-topbar.css hides the tool tabs entirely and the
   off-canvas sidebar (which carries the same destinations as full icon boxes)
   is the single navigation surface. Verified by rendering at 390px, not by
   reading this file. */
@media (max-width: 1100px) {
  .erpal-tooltabs .erpal-tooltab {
    padding: 4px 7px;
  }
  .erpal-tooltab__label {
    font-size: .62rem;
  }
}

@media (max-width: 800px) {
  /* The sidebar slides in over the content, so its boxes get the full width
     back and can breathe rather than squeezing to three columns. */
  .erpal-tidymenu__boxes {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  }
}