/* ============================================================================
   AVFX CRM — APPLICATION SHELL
   ----------------------------------------------------------------------------
   Top bar and sidebar are dark charcoal; the content area is light (ADR-0010).
   The product is light-only — the dark theme was withdrawn by ADR-0011.
   ========================================================================== */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas: "brand topbar" "sidebar main";
  block-size: 100vh;
  overflow: hidden;
  transition: grid-template-columns var(--dur-base) var(--ease-out);
}
:root[data-sidebar="collapsed"] .app { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }

/* --- BRAND BLOCK ---------------------------------------------------------
   The logo lives here, in the top bar — NOT in the sidebar, so it never
   has to shrink when the sidebar collapses. See ADR-0010.                      */

.brand {
  grid-area: brand;
  display: flex; align-items: center; gap: var(--space-4);
  padding-inline: var(--space-5);
  background: var(--chrome-topbar-bg);
  border-inline-end: 1px solid var(--chrome-border);
  overflow: hidden;
}
.brand__logo { block-size: var(--logo-h); inline-size: auto; }
:root[data-sidebar="collapsed"] .brand { padding-inline: var(--space-3); }
:root[data-sidebar="collapsed"] .brand__logo { block-size: 20px; }

/* --- TOP BAR ------------------------------------------------------------- */

.topbar {
  grid-area: topbar;
  display: flex; align-items: center; gap: var(--space-4);
  padding-inline: var(--space-5);
  background: var(--chrome-topbar-bg);
  color: var(--chrome-text);
  border-block-end: 1px solid var(--chrome-border);
}
.topbar__spacer { flex: 1; }

.topbar__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  block-size: var(--ctl-h-md); min-inline-size: var(--ctl-h-md);
  padding-inline: var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--chrome-text);
  transition: background var(--dur-instant);
}
.topbar__btn:hover { background: var(--chrome-hover); }
/* The page focus ring is a mid blue, which disappears against charcoal.
   Everything inside the chrome uses the lighter chrome ring instead, so a
   keyboard user can always see where they are. */
.brand :focus-visible,
.topbar :focus-visible,
.sidebar :focus-visible { outline-color: var(--chrome-focus); }

.topbar__search {
  display: flex; align-items: center; gap: var(--space-3);
  inline-size: 300px; block-size: var(--ctl-h-md);
  white-space: nowrap; overflow: hidden;
  padding-inline: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--chrome-inset);
  color: var(--chrome-text-muted);
  transition: background var(--dur-instant);
}
.topbar__search:hover { background: var(--chrome-inset-hover); }
.topbar__search > span { overflow: hidden; text-overflow: ellipsis; }
.topbar__search kbd {
  margin-inline-start: auto; flex: none;
  font-size: var(--fs-3xs); letter-spacing: .05em;
  padding: 1px var(--space-3);
  border: 1px solid var(--chrome-border);
  border-radius: var(--radius-xs);
}

.topbar__meta { font-size: var(--fs-2xs); color: var(--chrome-text-muted); text-align: end; }
.topbar__meta strong { color: var(--chrome-text); font-weight: var(--fw-medium); }

.avatar-btn {
  display: flex; align-items: center; gap: var(--space-3);
  block-size: var(--ctl-h-md); padding-inline: var(--space-3);
  border-radius: var(--radius-sm); color: var(--chrome-text);
}
.avatar-btn:hover { background: var(--chrome-hover); }

/* --- SIDEBAR ------------------------------------------------------------- */

.sidebar {
  grid-area: sidebar;
  display: flex; flex-direction: column;
  background: var(--chrome-sidebar-bg);
  color: var(--chrome-text);
  overflow-y: auto; overflow-x: hidden;
  padding-block: var(--space-4);
}

.nav__section {
  font-size: var(--fs-3xs); font-weight: var(--fw-semi);
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--chrome-text-muted);
  padding: var(--space-5) var(--space-5) var(--space-2);
  white-space: nowrap;
}
:root[data-sidebar="collapsed"] .nav__section {
  font-size: 0; padding-block: var(--space-4) var(--space-2);
}
:root[data-sidebar="collapsed"] .nav__section::after {
  content: ""; display: block; block-size: 1px;
  background: var(--chrome-border); margin-inline: var(--space-3);
}

.nav__item {
  position: relative;
  display: flex; align-items: center; gap: var(--space-5);
  inline-size: 100%; block-size: var(--nav-item-h);
  padding-inline: var(--space-5);
  color: var(--chrome-text);
  font-size: var(--fs-sm);
  white-space: nowrap;
  transition: background var(--dur-instant);
}
.nav__item:hover { background: var(--chrome-hover); text-decoration: none; }
.nav__item svg { inline-size: 16px; block-size: 16px; flex: none; }

.nav__item[aria-current="page"] { background: var(--chrome-active-bg); font-weight: var(--fw-medium); }
.nav__item[aria-current="page"]::before {
  content: "";
  position: absolute; inset-inline-start: 0; inset-block: 0;
  inline-size: 3px;                               /* the brand red marker */
  background: var(--chrome-active-marker);
}

.nav__label { overflow: hidden; text-overflow: ellipsis; }
:root[data-sidebar="collapsed"] .nav__label,
:root[data-sidebar="collapsed"] .nav__chevron { display: none; }
:root[data-sidebar="collapsed"] .nav__item { justify-content: center; padding-inline: 0; }

/* Collapsed: a child link is a label with no icon, so with labels hidden it
   would render as an empty 38px row — and the active marker would paint beside
   nothing. Hide the group's contents instead of closing the <details>, so the
   user's open/closed state survives expanding the sidebar again.
   See docs/components/02-sidebar-navigation.md §3 Fault 1. */
:root[data-sidebar="collapsed"] .nav__group > :not(summary) { display: none; }

/* Collapsed, the active child that carries the marker is hidden, so the parent
   icon takes over showing which module you are in. Expanded it stays plain —
   the visible child already says it, and marking both would be noise. */
:root[data-sidebar="collapsed"] .nav__item[data-branch="current"] {
  background: var(--chrome-active-bg);
}
:root[data-sidebar="collapsed"] .nav__item[data-branch="current"]::before {
  content: "";
  position: absolute; inset-inline-start: 0; inset-block: 0;
  inline-size: 3px;
  background: var(--chrome-active-marker);
}

.nav__chevron { margin-inline-start: auto; transition: transform var(--dur-fast); }
.nav__group[open] > .nav__item .nav__chevron { transform: rotate(90deg); }
.nav__group > summary { list-style: none; }
.nav__group > summary::-webkit-details-marker { display: none; }
.nav__child { padding-inline-start: calc(var(--space-5) + 16px + var(--space-5)); block-size: calc(var(--nav-item-h) - 4px); font-size: var(--fs-xs); }

/* --- COLLAPSED FLYOUT ----------------------------------------------------
   The 52px rail names its icons and reaches their children. Without this the
   collapsed sidebar is a memory test and half the product is unreachable.
   One element, position:fixed, moved and filled by footer.php — it must live
   outside .sidebar because that element scrolls and would clip it.
   Specification: docs/components/02-sidebar-navigation.md §6.1              */

.nav-flyout {
  position: fixed;
  z-index: var(--z-dropdown);
  min-inline-size: 200px;
  max-inline-size: 260px;
  padding-block: var(--space-3);
  background: var(--chrome-sidebar-bg);
  color: var(--chrome-text);
  border: 1px solid var(--chrome-border);
  border-inline-start: none;              /* the edge that meets the rail */
  border-start-end-radius: var(--radius-md);
  border-end-end-radius: var(--radius-md);
  box-shadow: var(--elev-3);
  animation: nav-flyout-in var(--dur-fast) ease-out;
}
.nav-flyout[hidden] { display: none; }
.nav-flyout :focus-visible { outline-color: var(--chrome-focus); }

@keyframes nav-flyout-in { from { opacity: 0; } to { opacity: 1; } }

.nav-flyout__head {
  display: flex; align-items: center;
  block-size: var(--nav-item-h);
  padding-inline: var(--space-5);
  color: var(--chrome-heading);
  font-size: var(--fs-sm); font-weight: var(--fw-semi);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
a.nav-flyout__head:hover { background: var(--chrome-hover); text-decoration: none; }

.nav-flyout__list { margin-block-start: var(--space-2); }

.nav-flyout__item {
  position: relative;
  display: flex; align-items: center;
  block-size: calc(var(--nav-item-h) - 4px);
  padding-inline: var(--space-5);
  color: var(--chrome-text);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.nav-flyout__item:hover { background: var(--chrome-hover); text-decoration: none; }
.nav-flyout__item[aria-current="page"] { background: var(--chrome-active-bg); font-weight: var(--fw-medium); }
.nav-flyout__item[aria-current="page"]::before {
  content: "";
  position: absolute; inset-inline-start: 0; inset-block: 0;
  inline-size: 3px;
  background: var(--chrome-active-marker);
}

/* --- MAIN ---------------------------------------------------------------- */

.main {
  grid-area: main;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--color-canvas);
}

.page-header {
  display: flex; align-items: center; gap: var(--space-5);
  min-block-size: var(--page-header-h);
  padding: var(--space-5) var(--space-7);
  background: var(--color-surface);
  border-block-end: 1px solid var(--color-border);
  flex: none;
}
.page-header__title { font-size: var(--fs-xl); font-weight: var(--fw-semi); line-height: 1.2; }
.page-header__count {
  font-size: var(--fs-xs); color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}
.page-header__actions { margin-inline-start: auto; display: flex; gap: var(--space-4); align-items: center; }

.breadcrumb { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-xs); color: var(--color-text-secondary); }
.breadcrumb a { color: var(--color-text-secondary); }
.breadcrumb svg { inline-size: 12px; block-size: 12px; opacity: .6; }

.page-body { flex: 1; min-block-size: 0; display: flex; flex-direction: column; padding: var(--space-7); overflow: hidden; }
.page-body--flush { padding: 0; }

/* --- BUTTONS ------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  block-size: var(--ctl-h-md); padding-inline: var(--space-5);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background var(--dur-instant), border-color var(--dur-instant), color var(--dur-instant);
}
.btn svg { inline-size: 15px; block-size: 15px; }
.btn:disabled { opacity: .5; }

.btn--primary { background: var(--color-primary); color: var(--color-on-accent); }
.btn--primary:not(:disabled):hover { background: var(--color-primary-hover); }
.btn--primary:not(:disabled):active { background: var(--color-primary-active); }
.btn--primary:focus-visible { outline-offset: 2px; }

.btn--secondary {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}
.btn--secondary:not(:disabled):hover { background: var(--color-surface-hover); border-color: var(--color-border-strong); }

.btn--ghost { color: var(--color-text-secondary); }
.btn--ghost:not(:disabled):hover { background: var(--color-surface-sunken); color: var(--color-text-primary); }

.btn--danger { background: var(--color-danger); color: var(--color-on-accent); }
.btn--danger:not(:disabled):hover { background: var(--color-danger-hover); }

.btn--sm { block-size: var(--ctl-h-sm); padding-inline: var(--space-4); font-size: var(--fs-xs); }
.btn--icon { inline-size: var(--ctl-h-md); padding-inline: 0; }
.btn--icon.btn--sm { inline-size: var(--ctl-h-sm); }

/* --- CARD ---------------------------------------------------------------- */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-1);
}

/* --- NOT-BUILT-YET PLACEHOLDER ------------------------------------------- */

.placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-5); text-align: center;
  flex: 1; padding: var(--space-11);
  color: var(--color-text-secondary);
}
.placeholder svg { inline-size: 40px; block-size: 40px; color: var(--color-text-tertiary); stroke-width: 1.5; }
.placeholder h2 { font-size: var(--fs-lg); color: var(--color-text-primary); }
.placeholder p { max-inline-size: 46ch; font-size: var(--fs-sm); }
.placeholder code {
  font-size: var(--fs-xs); padding: 2px var(--space-3);
  background: var(--color-surface-sunken); border-radius: var(--radius-xs);
  letter-spacing: .03em;
}

/* --- RESPONSIVE ----------------------------------------------------------
   Desktop instrument. Supported to 1024px. The grid NEVER becomes cards.  */

@media (max-width: 1100px) {
  .app { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }
  .topbar__search { inline-size: 180px; }
  .topbar__meta { display: none; }
}