/* ==========================================================================
   ACE Developers ERP — app shell (GLB-001)
   Anatomy per docs/09 §9.2 and docs/14 §14.1.
   The chrome is deliberately quiet: the sidebar and top bar sit on the page
   ground rather than on white slabs, so the content cards are the only
   raised surfaces and the eye goes straight to them.
   ========================================================================== */

.app { min-height: 100vh; }

/* ============================================================== sidebar === */
.sidebar {
  position: fixed; inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: var(--surface);
  display: flex; flex-direction: column;
  z-index: 40;
  transition: width var(--t-med);
  border-right: 1px solid var(--border);
}

.sb-brand { height: var(--topbar-h); display: flex; align-items: center; gap: 10px; padding: 0 16px; flex: none; }
.sb-logo {
  width: 36px; height: 36px; border-radius: var(--r-md); flex: none;
  background: var(--grad-mesh); box-shadow: var(--sh-accent);
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 15px; letter-spacing: -.4px;
}
.sb-brand-text { min-width: 0; }
.sb-brand-name { font-size: var(--fs-h3); font-weight: 700; color: var(--text); letter-spacing: -.2px; white-space: nowrap; }
.sb-brand-sub  { font-size: var(--fs-xs); color: var(--text-3); margin-top: -2px; white-space: nowrap; }

.sb-scroll { flex: 1; overflow-y: auto; padding: 4px 11px 12px; }
.sb-scroll::-webkit-scrollbar { width: 6px; }
.sb-scroll::-webkit-scrollbar-thumb { background: #E6E4F1; border-radius: 3px; }
.sb-scroll::-webkit-scrollbar-track { background: transparent; }

.sb-section {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3); padding: 11px 9px 6px;
}

/* module row ------------------------------------------------------------- */
.sb-item {
  display: flex; align-items: center; gap: 12px;
  height: 36px; padding: 0 10px; margin-bottom: 1px;
  border-radius: var(--r-md);
  color: var(--text-2); font-size: var(--fs-body); font-weight: 500;
  cursor: pointer; position: relative;
  transition: background var(--t-fast), color var(--t-fast);
  width: 100%; border: 0; background: none; text-align: left;
}
.sb-item:hover { background: var(--surface-hover); color: var(--text); }
.sb-item .ic { width: 19px; height: 19px; color: var(--text-3); transition: color var(--t-fast); }
.sb-item:hover .ic { color: var(--mod, var(--text-2)); }
.sb-item .sb-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-item .sb-caret { width: 15px; height: 15px; color: var(--text-3); transition: transform var(--t-fast); opacity: .8; }
.sb-item[aria-expanded="true"] .sb-caret { transform: rotate(90deg); }

/* Active state is tinted with the module hue — peripheral-vision wayfinding */
.sb-item.is-active {
  background: color-mix(in srgb, var(--mod) 9%, transparent);
  color: var(--mod-700, var(--mod)); font-weight: 600;
}
.sb-item.is-active .ic { color: var(--mod); }

.sb-badge {
  min-width: 21px; height: 20px; padding: 0 7px; border-radius: var(--r-pill);
  background: var(--danger-bg); color: var(--danger);
  font-size: var(--fs-xs); font-weight: 700;
  display: grid; place-items: center; font-variant-numeric: tabular-nums;
}

/* secondary nav ---------------------------------------------------------- */
.sb-sub { display: none; margin: 2px 0 7px 29px; padding-left: 11px; border-left: 1px solid var(--border); }
.sb-item[aria-expanded="true"] + .sb-sub { display: block; }
.sb-sub a {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r-sm);
  font-size: var(--fs-sm); color: var(--text-2); transition: all var(--t-fast);
}
.sb-sub a:hover { background: var(--surface-hover); color: var(--text); }
.sb-sub a.is-active { color: var(--mod-700, var(--accent-700)); font-weight: 600; background: color-mix(in srgb, var(--mod) 8%, transparent); }
.sb-sub a .stub-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--border-strong); flex: none; margin-left: auto; }

/* project scope switcher (GLB-018) — docs/09 §9.2.1 ---------------------- */
.sb-scope { flex: none; padding: 11px; border-top: 1px solid var(--border); }
.scope-btn {
  width: 100%; display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border-strong);
  cursor: pointer; text-align: left; transition: all var(--t-fast);
}
.scope-btn:hover { border-color: #D6D3E8; background: #fff; }
.scope-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; box-shadow: 0 0 0 3px var(--accent-50); }
.scope-txt { flex: 1; min-width: 0; }
.scope-lbl { font-size: var(--fs-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.scope-val { font-size: var(--fs-body); font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* icon rail -------------------------------------------------------------- */
.app.is-rail .sidebar { width: var(--sidebar-rail-w); }
.app.is-rail .sb-brand-text,
.app.is-rail .sb-label, .app.is-rail .sb-caret, .app.is-rail .sb-badge,
.app.is-rail .sb-section, .app.is-rail .sb-sub, .app.is-rail .scope-txt { display: none; }
.app.is-rail .sb-item { justify-content: center; padding: 0; }
.app.is-rail .sb-brand { justify-content: center; padding: 0; }
.app.is-rail .scope-btn { justify-content: center; padding: 10px 0; }
.app.is-rail .main { margin-left: var(--sidebar-rail-w); }
.app.is-rail .topbar { left: var(--sidebar-rail-w); }

/* ============================================================== top bar === */
.topbar {
  position: fixed; top: 0; right: 0; left: var(--sidebar-w);
  height: var(--topbar-h);
  background: rgba(246,246,251,.86); backdrop-filter: blur(14px);
  display: flex; align-items: center; gap: 14px;
  padding: 0 var(--page-pad);
  z-index: 35; transition: left var(--t-med);
  border-bottom: 1px solid var(--border);
}

.tb-search {
  flex: 1; max-width: 400px;
  display: flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 14px;
  background: #fff; border: 1px solid var(--border-strong);
  border-radius: var(--r-md); color: var(--text-3);
  cursor: pointer; transition: all var(--t-fast); box-shadow: var(--sh-xs);
}
.tb-search:hover { border-color: #D6D3E8; box-shadow: var(--sh-sm); }
.tb-search .ic { width: 17px; height: 17px; }
.tb-search span { flex: 1; font-size: var(--fs-body); text-align: left; }
.kbd {
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-3);
  background: var(--surface-sunken); border-radius: 6px; padding: 3px 7px;
  font-variant-numeric: tabular-nums;
}

.tb-right { margin-left: auto; display: flex; align-items: center; gap: 5px; }
.icon-btn {
  position: relative; width: 40px; height: 40px; border-radius: var(--r-md);
  border: 0; background: none; color: var(--text-2);
  display: grid; place-items: center; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.icon-btn:hover { background: rgba(255,255,255,.9); color: var(--text); box-shadow: var(--sh-xs); }
.icon-btn .ic { width: 19px; height: 19px; }
.icon-btn .dot {
  position: absolute; top: 6px; right: 6px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--r-pill); background: var(--danger); color: #fff;
  font-size: 9.5px; font-weight: 700; line-height: 16px; text-align: center;
  border: 2px solid var(--bg); box-sizing: content-box;
}

.lang-toggle { display: flex; background: var(--surface-sunken); border-radius: var(--r-md); padding: 3px; }
.lang-toggle button {
  border: 0; background: none; cursor: pointer; padding: 5px 10px; border-radius: var(--r-sm);
  font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); transition: all var(--t-fast);
}
.lang-toggle button.is-on { background: #fff; color: var(--text); box-shadow: var(--sh-xs); }

.tb-user {
  display: flex; align-items: center; gap: 10px; padding: 5px 10px 5px 5px;
  margin-left: 6px; border-radius: var(--r-md); cursor: pointer;
  transition: background var(--t-fast);
}
.tb-user:hover { background: rgba(255,255,255,.9); }
.tb-user-name { font-size: var(--fs-sm); font-weight: 600; color: var(--text); line-height: 1.25; white-space: nowrap; }
.tb-user-role { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }

/* ================================================================= main === */
.main {
  margin-left: var(--sidebar-w);
  padding-top: var(--topbar-h);
  transition: margin-left var(--t-med);
  min-height: 100vh;
}
.page { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--page-pad) 34px; }

/* breadcrumb (IA-03: every segment clickable) ---------------------------- */
.crumbs { height: var(--crumb-h); display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text-3); }
.crumbs a { color: var(--text-3); transition: color var(--t-fast); }
.crumbs a:hover { color: var(--mod-700, var(--accent-700)); }
.crumbs .sep { color: var(--border-strong); }
.crumbs .now { color: var(--text-2); font-weight: 600; }

/* page header ------------------------------------------------------------ */
.page-head { display: flex; align-items: flex-start; gap: 18px; padding: 2px 0 16px; }
.page-head-main { min-width: 0; flex: 1; }
.page-title {
  font-size: var(--fs-h1); font-weight: 700; color: var(--text);
  letter-spacing: -.5px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.page-sub { font-size: var(--fs-sm); color: var(--text-3); margin-top: 6px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.page-sub .sep { color: var(--border-strong); }
.page-actions { display: flex; align-items: center; gap: 10px; flex: none; }

/* module hero band — image-led, carries the module hue ------------------- */
.hero-band {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  padding: 20px 22px; margin-bottom: var(--gap); color: #fff;
  background: linear-gradient(100deg, var(--mod, var(--accent)) 0%, color-mix(in srgb, var(--mod, var(--accent)) 55%, #fff) 100%);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--mod, var(--accent)) 30%, transparent);
}
.hero-band::after {
  content: ""; position: absolute; right: -60px; top: -90px;
  width: 260px; height: 260px; border-radius: 50%; background: rgba(255,255,255,.10);
}

/* grids ------------------------------------------------------------------ */
.grid { display: grid; gap: var(--gap); }
/* Grid items default to min-width:auto, so a wide table stretches its column
   and pushes the page into horizontal scroll. Pin to 0; .table-wrap scrolls. */
.grid > * { min-width: 0; }
.g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.g-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.g-6 { grid-template-columns: repeat(6, minmax(0,1fr)); }
.g-7 { grid-template-columns: repeat(7, minmax(0,1fr)); }
.g-60-40 { grid-template-columns: 6fr 4fr; }
.g-65-35 { grid-template-columns: 65fr 35fr; }
.g-70-30 { grid-template-columns: 7fr 3fr; }
.g-35-65 { grid-template-columns: 35fr 65fr; }
.stack { display: grid; gap: var(--gap); align-content: start; }
/* same trap as .grid: a grid item defaults to min-width:auto, so a wide
   child (a thumbnail rail, a table) inflates the whole column */
.stack > * { min-width: 0; }
.mb  { margin-bottom: var(--gap); }

/* ============================================== off-canvas navigation ===
   Below 1023px the sidebar leaves the flow entirely, so it needs its own
   way back: a menu button in the top bar, a scrim, and a body lock. The
   rail toggle is a desktop-only affordance and hides at the same point. */
.nav-btn { display: none; }

.nav-scrim {
  position: fixed; inset: 0; z-index: 39;
  background: rgba(22,18,44,.38); backdrop-filter: blur(2px);
  animation: fade-in var(--t-med);
}
@keyframes fade-in { from { opacity: 0; } }
body.nav-locked { overflow: hidden; }

/* responsive — docs/35 §35.11 -------------------------------------------- */
@media (max-width: 1439px) {
  .g-5, .g-6, .g-7 { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 1279px) {
  .sidebar { width: var(--sidebar-rail-w); }
  .sb-brand-text, .sb-label, .sb-caret, .sb-badge, .sb-section, .sb-sub, .scope-txt { display: none; }
  .sb-item { justify-content: center; padding: 0; }
  .sb-brand { justify-content: center; padding: 0; }
  .scope-btn { justify-content: center; padding: 10px 0; }
  .main { margin-left: var(--sidebar-rail-w); }
  .topbar { left: var(--sidebar-rail-w); }
  .g-4, .g-5, .g-6, .g-7 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .g-60-40, .g-65-35, .g-70-30, .g-35-65, .g-3 { grid-template-columns: 1fr; }
}
@media (max-width: 1023px) {
  .nav-btn { display: grid; }
  .rail-btn { display: none; }

  /* It is a drawer now, not a rail — undo the 1279 collapse so the labels,
     sections, badges and sub-items all come back. */
  .sidebar {
    width: min(302px, 86vw);
    transform: translateX(-100%);
    transition: transform var(--t-med);
    box-shadow: none;
  }
  .app.nav-open .sidebar { transform: none; box-shadow: var(--sh-lg); }
  .sb-brand-text, .sb-label, .sb-caret, .sb-badge, .sb-section, .sb-sub, .scope-txt { display: revert; }
  .sb-label, .sb-brand-name, .sb-brand-sub { display: block; }
  .sb-item { justify-content: flex-start; padding: 0 10px; height: 44px; }
  .sb-brand { justify-content: flex-start; padding: 0 16px; }
  .scope-btn { justify-content: flex-start; padding: 10px 12px; }

  .main { margin-left: 0; }
  .topbar { left: 0; }
  .tb-search span, .kbd { display: none; }
  .tb-search { max-width: 46px; justify-content: center; flex: none; }
}
@media (max-width: 767px) {
  :root { --page-pad: 13px; --gap: 12px; }
  .g-2, .g-4, .g-5, .g-6, .g-7 { grid-template-columns: 1fr; }
  .tb-user-name, .tb-user-role, .lang-toggle { display: none; }
  .topbar { gap: 8px; }
  .page-head { flex-direction: column; gap: 14px; }
  .page-actions { width: 100%; flex-wrap: wrap; }
  .hero-band { padding: 20px; }
  .page-title { font-size: 25px; }

  /* Breadcrumbs are the one place a long trail forces the page wider than
     the screen; let it scroll on its own rather than the document. */
  .crumbs { overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .crumbs::-webkit-scrollbar { display: none; }
}

/* Touch: 44px minimum on anything tappable (docs/35 §35.10). Scoped to
   coarse pointers so the desktop density is untouched. */
@media (pointer: coarse) {
  .sb-item, .sb-sub a, .scope-btn { min-height: 44px; }
  .icon-btn { width: 44px; height: 44px; }
  .tb-search { height: 44px; }
  .crumbs a, .crumbs .now { padding: 6px 0; }

  /* standalone controls get a real target; inline text links (.ent, .code,
     party links inside a cell) are exempt under WCAG 2.5.8 and only need
     comfortable vertical padding, or table rows would double in height */
  .sec-link, .sec-dots, .btn, .chip, .tab, .pager button { min-height: 40px; }
  .sec-dots { min-width: 40px; }
  .ent, .code, .party-link { padding-block: 4px; }
}