/* ===================================================================
   SHELL v2 — workspaces + short sidebar + mobile tab bar
   Loaded after refine.css on every page. Layout-only: colors and
   type come from the refine.css tokens (warm precision); per-workspace
   accents from the --*-color tokens in styles.css.
   =================================================================== */

:root {
  --shell-topbar-h: 56px;
  --shell-sidebar-w: 236px;
  --shell-rail-w: 60px;
  --shell-tabbar-h: 60px;
  --ws-color: var(--caramel-500, #c17817);
}

/* ── Top bar ─────────────────────────────────────────────────────── */
.shell-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;                     /* Bootstrap fixed-chrome tier; below drawer (1045) and modals */
  height: var(--shell-topbar-h);
  padding: 0;
  background: rgba(250, 248, 244, .88) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft, #eae6dc);
}
.shell-topbar__inner {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  height: 100%;
  padding: 0 1rem;
}
.shell-topbar__spacer { flex: 1 1 auto; }

.shell-brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 .25rem 0 0;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.015em;
  color: var(--ink-900) !important;
  max-width: 40vw;
}
.shell-brand__logo { height: 28px; width: auto; border-radius: 6px; }
.shell-brand__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Workspace dot + page count (shared by the accordion rows) */
.shell-ws-dot {
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ws-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ws-color) 25%, transparent);
}
.shell-ws-count {
  margin-left: auto;
  font-size: .68rem; font-weight: 800;
  color: var(--ink-300);
  font-variant-numeric: tabular-nums;
}

/* Search pill */
.shell-search {
  display: inline-flex; align-items: center; gap: .5rem;
  height: 36px;
  padding: 0 .75rem;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--cream-muted);
  color: var(--ink-500);
  font-size: .85rem; font-weight: 600;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.shell-search:hover { background: var(--cream-deep); color: var(--ink-900); }
.shell-search kbd {
  font-size: .68rem; color: var(--ink-500);
  border: 1px solid var(--line-strong); border-radius: 5px;
  padding: 1px 6px; background: var(--cream-card);
}

/* Icon buttons / user menu */
.shell-icon-btn, .shell-user__btn {
  display: inline-flex; align-items: center; gap: .45rem;
  height: 36px; padding: 0 .55rem;
  border: 1px solid transparent; border-radius: 999px;
  background: transparent; color: var(--ink-700);
  font-weight: 600; font-size: .85rem;
}
.shell-icon-btn:hover, .shell-user__btn:hover,
.shell-icon-btn[aria-expanded="true"], .shell-user__btn[aria-expanded="true"] { background: var(--cream-muted); color: var(--ink-900); }
.shell-company__name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-avatar {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--ink-900); color: var(--cream-page);
  font-family: var(--font-display); font-weight: 700; font-size: .72rem; letter-spacing: .02em;
}
.shell-user__menu { min-width: 220px; padding: .4rem; border-radius: var(--r-md); }
.shell-user__menu .dropdown-item { border-radius: var(--r-sm); font-weight: 600; font-size: .875rem; }
.shell-user__menu .dropdown-item i { width: 1.2rem; color: var(--ink-500); }
.shell-user__hdr-name { font-weight: 700; color: var(--ink-900); }
.shell-user__hdr-role { font-size: .75rem; color: var(--ink-500); }

/* ── Layout ──────────────────────────────────────────────────────── */
.dashboard-container.shell {
  display: flex;
  align-items: stretch;
  position: relative;
  width: 100%; max-width: 100%;
  min-height: calc(100vh - var(--shell-topbar-h));
  overflow-x: hidden;
}
.dashboard-container.shell > .dashboard-content-wrapper {
  flex: 1 1 auto;
  display: block;
  min-width: 0;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--cream-page);
}

/* ── Sidebar (desktop) ───────────────────────────────────────────── */
.shell-sidebar {
  flex: 0 0 var(--shell-sidebar-w);
  width: var(--shell-sidebar-w);
  position: sticky;
  top: var(--shell-topbar-h);
  height: calc(100vh - var(--shell-topbar-h));
  flex-direction: column;
  background: var(--cream-card);
  border-right: 1px solid var(--line-soft);
  transition: flex-basis var(--t-med) var(--ease-out), width var(--t-med) var(--ease-out);
}
/* Fixed top row: Dashboard + collapse toggle (outside the scroll area) */
.shell-sidebar__top {
  display: flex; align-items: center; gap: .25rem;
  padding: .6rem .6rem .6rem .7rem;
  border-bottom: 1px solid var(--line-soft);
}
.shell-sidebar__top-link {
  flex: 1 1 auto; min-width: 0;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .35rem .5rem;
  border-radius: var(--r-sm);
  font-family: var(--font-display); font-weight: 700; font-size: .95rem; letter-spacing: -.01em;
  color: var(--ink-900); text-decoration: none;
  transition: background var(--t-fast) var(--ease-out);
}
.shell-sidebar__top-link:hover { background: var(--cream-muted); color: var(--ink-900); }
.shell-sidebar__top-link.active { background: var(--ink-900); color: var(--cream-page); }
.shell-sidebar__top-link.active i { color: var(--caramel-100); }
.shell-sidebar__top-link i { flex: 0 0 1.1rem; text-align: center; font-size: 1rem; }
.shell-sidebar__top-link .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-sidebar__collapse {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border: none; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-300);
  font-size: .8rem;
}
.shell-sidebar__collapse:hover { background: var(--cream-muted); color: var(--ink-900); }

.shell-sidebar__scroll {
  flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: .5rem 0 1rem;
  scrollbar-gutter: stable;      /* reserve the gutter so unfolding never reflows the labels */
  overscroll-behavior: contain;
}

.shell-group { padding: .35rem 0 .25rem; }
.shell-group__title {
  display: flex; align-items: center; gap: .45rem;
  margin: 0; padding: .35rem .9rem .3rem 1rem;
  font-family: var(--font-ui); font-size: .66rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500);
}
.shell-group__title i { font-size: .75rem; color: var(--ink-300); }

/* Section headings inside a sectioned workspace panel (Admin, Online Store).
   Same recipe as .shell-group__title, indented to the panel links (1.5rem). */
.shell-nav__subhead {
  margin: 0; padding: .7rem .9rem .2rem 1.5rem;
  font-family: var(--font-ui); font-size: .64rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shell-item--overview + .shell-nav__subhead { padding-top: .45rem; }

.shell-nav { list-style: none; margin: 0; padding: 0; }
.shell-item { position: relative; }
.shell-link {
  display: flex; align-items: center; gap: .6rem;
  margin: 1px 8px;
  padding: .45rem .6rem .45rem .7rem;
  border-radius: var(--r-sm);
  color: var(--ink-700);
  font-weight: 600; font-size: .875rem;
  text-decoration: none;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.shell-link i { flex: 0 0 1.1rem; text-align: center; font-size: 1rem; color: var(--ink-500); }
.shell-link .label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-link:hover { background: var(--cream-muted); color: var(--ink-900); }
/* A POST action styled as a link (the super-admin company switch) */
button.shell-link { width: calc(100% - 16px); border: 0; background: none; font-family: inherit; line-height: inherit; text-align: left; cursor: pointer; }
.shell-item.active > .shell-link,
.shell-item.active > form > .shell-link { background: var(--ink-900); color: var(--cream-page); box-shadow: var(--elev-1); }
.shell-item.active > .shell-link i,
.shell-item.active > form > .shell-link i { color: var(--caramel-100); }
.shell-badge { font-size: .62rem; padding: .2em .45em; }

/* Pin buttons: sibling of the link (a button inside an anchor is invalid HTML) */
.shell-pin {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px;
  border: none; border-radius: 6px;
  background: transparent; color: var(--ink-300);
  font-size: .8rem; line-height: 1;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.shell-item:hover .shell-pin, .shell-item:focus-within .shell-pin, .shell-pin[aria-pressed="true"] { opacity: 1; }
.shell-pin:hover { color: var(--caramel-600); background: var(--cream-deep); }
.shell-item.active .shell-pin { color: var(--caramel-100); }
.shell-item.active .shell-pin:hover { background: rgba(255,255,255,.12); }
.shell-item:hover .shell-link .label, .shell-item:focus-within .shell-link .label { padding-right: 20px; }

/* ── Workspace accordion (shared by the sidebar and the drawer) ──── */
.shell-ws-group + .shell-ws-group { border-top: 1px solid var(--line-soft); }
.shell-ws-row {
  position: relative;
  display: flex; align-items: center;
  background: var(--cream-card);
}
.shell-ws-row__link {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: .55rem;
  padding: .55rem .4rem .55rem 1rem;
  color: var(--ink-900); text-decoration: none;
  font-weight: 700; font-size: .875rem;
  transition: background var(--t-fast) var(--ease-out);
}
.shell-ws-row__link:hover { background: var(--cream-muted); color: var(--ink-900); }
.shell-ws-row__link > i { flex: 0 0 1.1rem; text-align: center; font-size: 1rem; color: var(--ws-color); }
.shell-ws-row__link .label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-ws-group.is-open > .shell-ws-row::before {
  content: '';
  position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--ws-color);
}
.shell-ws-chev {
  flex: 0 0 auto;
  width: 30px; height: 30px; margin-right: 6px;
  border: none; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-300);
  font-size: .72rem; line-height: 1;
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.shell-ws-chev:hover { background: var(--cream-muted); color: var(--ink-900); }
.shell-ws-chev[aria-expanded="true"] { transform: rotate(180deg); }

/* grid 0fr -> 1fr animates height without measuring anything.
   min-height:0 is required or the grid item refuses to shrink below its content.
   visibility keeps closed links out of the tab order and the accessibility tree. */
.shell-ws-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-med) var(--ease-out);
}
.shell-ws-panel__inner {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear var(--t-med);
}
.shell-ws-group.is-open > .shell-ws-panel { grid-template-rows: 1fr; }
.shell-ws-group.is-open > .shell-ws-panel > .shell-ws-panel__inner {
  visibility: visible;
  transition-delay: 0s;
}
.shell-ws-panel .shell-nav { padding: 2px 0 .45rem; }
.shell-ws-panel .shell-link { padding-left: 1.5rem; }
.shell-item--overview .shell-link { font-weight: 700; }

/* Collapsed rail */
.shell--collapsed .shell-sidebar,
.shell-pre-collapsed .dashboard-container.shell .shell-sidebar { flex-basis: var(--shell-rail-w); width: var(--shell-rail-w); }
.shell--collapsed .shell-sidebar .label,
.shell--collapsed .shell-sidebar .shell-pin,
.shell--collapsed .shell-sidebar .shell-ws-chev,
.shell--collapsed .shell-sidebar .shell-ws-count,
.shell--collapsed .shell-sidebar .shell-ws-dot,
.shell--collapsed .shell-sidebar .shell-nav__subhead,
.shell-pre-collapsed .dashboard-container.shell .shell-sidebar .shell-nav__subhead,
.shell-pre-collapsed .dashboard-container.shell .shell-sidebar .label,
.shell-pre-collapsed .dashboard-container.shell .shell-sidebar .shell-pin,
.shell-pre-collapsed .dashboard-container.shell .shell-sidebar .shell-ws-chev,
.shell-pre-collapsed .dashboard-container.shell .shell-sidebar .shell-ws-count { display: none; }
.shell--collapsed .shell-sidebar__top { justify-content: center; padding-left: .5rem; padding-right: .5rem; flex-wrap: wrap; gap: .35rem; }
.shell--collapsed .shell-sidebar__top-link { flex: 0 0 auto; justify-content: center; padding: .35rem; }
.shell--collapsed .shell-sidebar__collapse i { transform: rotate(180deg); }
.shell--collapsed .shell-group__title { justify-content: center; padding-left: .5rem; padding-right: .5rem; }
.shell--collapsed .shell-link { justify-content: center; padding: .55rem 0; margin: 1px 8px; }
/* same specificity as .shell-ws-panel .shell-link, so this must win by source order */
.shell--collapsed .shell-ws-panel .shell-link { padding: .55rem 0; }
.shell--collapsed .shell-ws-row__link { justify-content: center; padding: .55rem 0; gap: 0; }
.shell--collapsed .shell-ws-group.is-open > .shell-ws-row { background: color-mix(in srgb, var(--ws-color) 12%, transparent); }
.shell--collapsed .shell-link i { flex: 0 0 auto; }
.shell--collapsed .shell-badge { position: absolute; top: 2px; right: 6px; }

/* ── Mobile chrome (<992px) ───────────────────────────────────────── */
@media (max-width: 991.98px) {
  .shell-sidebar { display: none !important; }
  .dashboard-container.shell { padding-bottom: calc(var(--shell-tabbar-h) + env(safe-area-inset-bottom, 0px)); }

  .shell-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 1035;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: calc(var(--shell-tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--line-soft);
  }
  .shell-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border: none; background: transparent;
    color: var(--ink-500);
    font-size: .68rem; font-weight: 700; letter-spacing: .01em;
    text-decoration: none;
  }
  .shell-tab i { font-size: 1.25rem; line-height: 1; }
  .shell-tab.active { color: var(--ink-900); }
  .shell-tab.active i { color: var(--ws-color, var(--ink-900)); }

  /* keep the floating helpdesk button above the tab bar */
  .helpdesk-toggle { bottom: calc(var(--shell-tabbar-h) + 16px + env(safe-area-inset-bottom, 0px)) !important; }
  .helpdesk-panel { bottom: calc(var(--shell-tabbar-h) + 82px + env(safe-area-inset-bottom, 0px)) !important; }

  /* iOS zooms on inputs below 16px */
  .dashboard-container.shell input, .dashboard-container.shell select, .dashboard-container.shell textarea { font-size: 16px; }
}
@media (min-width: 992px) {
  .shell-tabbar, .shell-drawer { display: none !important; }
}

/* Drawer (Bootstrap offcanvas) */
.shell-drawer { width: min(320px, 88vw); background: var(--cream-card); }
.shell-drawer__hdr { border-bottom: 1px solid var(--line-soft); }
.shell-drawer__name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink-900); }
.shell-drawer__role { font-size: .75rem; color: var(--ink-500); }
.shell-drawer__body { padding: .5rem 0 1.25rem; }

/* ── Page-level helpers ───────────────────────────────────────────── */
/* Content width under the shell: a wide band, centred in the space beside the sidebar
   (Bootstrap's 1320px cap is too narrow on large monitors). Caps keep line lengths sane on 4K. */
.dashboard-container.shell > .dashboard-content-wrapper > .container {
  max-width: none;
  width: min(100%, 1560px);
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1800px) {
  .dashboard-container.shell > .dashboard-content-wrapper { padding: 28px 40px; }
  .dashboard-container.shell > .dashboard-content-wrapper > .container { width: min(100%, 1760px); }
  .dashboard-container.shell .form-page { max-width: 1200px; }
}
@media (min-width: 2400px) {
  .dashboard-container.shell > .dashboard-content-wrapper > .container { width: min(100%, 2000px); }
}
/* {% set page_wide = true %}: full-width pages (editors, maps, split views) */
.dashboard-container.shell .shell-page--wide { padding-left: 1.25rem; padding-right: 1.25rem; }
/* ── Motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .shell-sidebar, .shell-link, .shell-pin, .shell-search,
  .shell-ws-row__link, .shell-ws-chev, .shell-ws-panel { transition: none; }
  /* delay only: never `visibility: visible` here, it would re-expose closed panels */
  .shell-ws-panel__inner { transition-delay: 0s; }
}