/* Frame H (working/company-options styles.css: the shared shell, the company rail, H's Business rail and sidebar rows,
   the person menu and the phone's bar), copied as H has it, without its review bar above the product. Loaded after the
   shell's own sheets, so its sizes are the frame's wherever the two meet. */
.tenant-shell.frame-h { --rail: 252px; --business-rail: 0px; background: #f8f8f7; }
.tenant-shell.frame-h.with-business-rail { --business-rail: 60px; }

/* ---------- The rail of Businesses ---------- */
.tenant-shell.frame-h .business-rail { position: fixed; z-index: 80; inset: 0 auto 0 0; width: var(--business-rail); display: flex; flex-direction: column; align-items: center; gap: 0; padding: 19px 0 0; background: #eeede7; border-right: 1px solid #e4e1d7; }
.tenant-shell.frame-h .business-rail[hidden] { display: none; }
.business-rail .company-brand { flex: none; width: 34px; height: 34px; margin-bottom: 18px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: transparent; cursor: pointer; }
.business-rail .company-brand img { width: 28px; height: 28px; }
.business-rail .company-brand:focus-visible { outline: 2px solid #2f62a4; outline-offset: 3px; }
.business-rail-list { width: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 0 9px 20px; }
.business-rail-group { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.business-rail-group + .business-rail-group { border-top: 1px solid #dcdad2; margin-top: 18px; padding-top: 14px; }
.business-rail .company-tile { position: relative; flex: none; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 1px solid #dcdad2; border-radius: 12px; background: #faf9f5; color: #7c7f7a; font: inherit; font-size: 10px; font-weight: 750; cursor: pointer; transition: box-shadow var(--m-hover, 120ms) ease; }
.business-rail .company-tile.selected { border-color: #172944; background: #172944; color: #fff; }
.business-rail .company-tile.selected::before { content: ""; position: absolute; left: -10px; top: 10px; height: 18px; width: 3px; background: #b48b4c; border-radius: 0 3px 3px 0; }
.business-rail .company-tile:hover { box-shadow: 0 0 0 3px #1729440a; }
.business-rail .company-tile:focus-visible { outline: 2px solid #2f62a4; outline-offset: 3px; }
.business-rail-tile > .biz-tile { width: 100%; height: 100%; border-radius: inherit; box-shadow: none; font-size: 10px; }
.business-rail-tile > .biz-tile.is-three { font-size: 9px; letter-spacing: 0; }
.business-rail-tile.selected > .biz-tile:not(.has-logo) { background: transparent; color: inherit; }
.biz-tile.has-logo { overflow: hidden; background: #fff; }
.biz-tile.has-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.business-rail-tile.selected > .biz-tile.has-logo { box-shadow: inset 0 0 0 2px #172944; }
.business-rail-add { margin-top: 2px; background: transparent !important; border-style: dashed !important; color: #7c7f7a; }
.business-rail-add .icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.business-rail-loading { display: grid; place-items: center; height: 38px; }

/* ---------- The sidebar ---------- */
.tenant-shell.frame-h .desktop-rail { position: fixed; inset: 0 auto 0 var(--business-rail); width: var(--rail); height: 100dvh; padding: 14px 12px 12px; display: flex; flex-direction: column; z-index: 70; border-right: 1px solid #e9e7e1; background: #fffefa radial-gradient(circle at 24px 14px, rgba(191, 129, 24, .04), transparent 72px); overflow: hidden; box-shadow: none; transition: none; }
.tenant-shell.frame-h .app-frame { margin-left: calc(var(--rail) + var(--business-rail)); width: calc(100% - var(--rail) - var(--business-rail)); transition: none; }
.tenant-shell.frame-h .business-context { display: flex; gap: 8px; align-items: flex-start; flex: none; padding: 13px 11px 10px; }
.tenant-shell.frame-h .business-context > div { min-width: 0; flex: 1; }
.tenant-shell.frame-h .business-context strong { display: block; color: #172944; font-size: 15px; line-height: 1.4; font-weight: 650; overflow-wrap: anywhere; }
.tenant-shell.frame-h .business-context small { display: block; margin-top: 5px; font-size: 10px; line-height: 1.5; color: #687386; overflow-wrap: anywhere; }
.tenant-shell.frame-h .business-context.is-empty { min-height: 0; padding: 0; }
.tenant-shell.frame-h .primary-nav { display: grid; align-content: start; gap: 3px; flex: 1; overflow: auto; margin: 14px -4px 10px; padding: 0 4px; min-height: 0; }
.tenant-shell.frame-h .nav-link { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 41px; height: 41px; margin: 0; border: 0; border-radius: 10px; padding: 0 11px; background: transparent; box-shadow: none; color: #687386; font: inherit; font-size: 12px; font-weight: 650; text-align: left; text-decoration: none; cursor: pointer; transition: background-color var(--m-hover, 120ms) ease, color var(--m-hover, 120ms) ease; }
.tenant-shell.frame-h .nav-link:hover { background: #f1f1ec; color: #172944; }
.tenant-shell.frame-h .nav-link.active { color: #fff; background: linear-gradient(135deg, #172944, #213858); box-shadow: 0 5px 14px #17294414; }
.tenant-shell.frame-h .nav-link.active::before { content: ""; position: absolute; top: 10px; bottom: 10px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: #bf8118; animation: none; }
.tenant-shell.frame-h .nav-link:focus-visible { outline: 2px solid #7295c2; outline-offset: 2px; }
.tenant-shell.frame-h .nav-link-icon { width: 25px; height: 28px; display: grid; place-items: center; flex: none; background: none; border: 0; }
.tenant-shell.frame-h .nav-link-icon .icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.tenant-shell.frame-h .nav-link-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 1; transform: none; max-width: none; }
.tenant-shell.frame-h .nav-separator { height: 1px; background: #e9e7e1; margin: 12px 10px; }
.tenant-shell.frame-h .nav-link.is-open { background: #eeeee8; color: #172944; }
.tenant-shell.frame-h .business-pages { margin: 3px 0 7px 23px; padding-left: 7px; border-left: 1px solid #deded6; display: grid; gap: 2px; }
.tenant-shell.frame-h .business-pages .nav-link { height: 36px; min-height: 36px; font-size: 11.5px; font-weight: 500; }
.tenant-shell.frame-h .business-pages .nav-link.active { font-weight: 650; }
.tenant-shell.frame-h .settings-nav { gap: 4px; margin-top: 14px; }
.tenant-shell.frame-h .settings-nav-group { display: grid; gap: 2px; }
.tenant-shell.frame-h .settings-nav-group > p { margin: 0; font-size: 10px; color: #9297a0; font-weight: 650; padding: 6px 12px; }
.tenant-shell.frame-h .settings-nav > .nav-link + .settings-nav-group, .tenant-shell.frame-h .settings-nav-group + .settings-nav-group { margin-top: 11px; }
.tenant-shell.frame-h .settings-nav-group:not(.is-business) .nav-link { height: 36px; min-height: 36px; font-size: 11.5px; }
.tenant-shell.frame-h .settings-nav > .nav-link { height: 36px; min-height: 36px; font-size: 11.5px; }
/* The settings sidebar stays one column at every width: the CRM's settings tabs share its class name and are laid out
   in two columns at 780px and under (styles/styles/responsive-contract.css). */
.tenant-shell.frame-h #rail .settings-nav { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-content: start; overflow: visible !important; }

/* The person card, at the sidebar's foot. */
.tenant-shell.frame-h .rail-account { position: static; display: grid; grid-template-columns: 34px minmax(0, 1fr) 14px; gap: 9px; align-items: center; flex: none; width: 100%; min-height: 63px; margin: 0; padding: 10px 11px; border: 1px solid #e6e4dc; border-radius: 11px; background: #ffffffbd; box-shadow: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transform: none; transition: border-color var(--m-hover, 120ms) ease, background-color var(--m-hover, 120ms) ease; }
.tenant-shell.frame-h .rail-account { margin-top: auto; }
.tenant-shell.frame-h .primary-nav + .rail-account { margin-top: 0; }
.tenant-shell.frame-h .rail-account:hover { border-color: #d9cfbe; background: #fff; transform: none; }
.tenant-shell.frame-h .rail-account:focus-visible { outline: 2px solid #7295c2; outline-offset: 2px; }
.tenant-shell.frame-h .rail-account-copy { min-width: 0; opacity: 1; transform: none; max-width: none; }
.tenant-shell.frame-h .rail-account-copy strong, .tenant-shell.frame-h .rail-account-copy small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tenant-shell.frame-h .rail-account-copy strong { font-size: 11px; font-weight: 650; color: #172033; }
.tenant-shell.frame-h .rail-account-copy small { margin-top: 3px; color: #687386; font-size: 9px; }
.tenant-shell.frame-h .rail-account > .icon { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; color: #687386; }
.tenant-shell.frame-h .rail-account .rail-avatar { position: relative; width: 34px; height: 34px; }
.tenant-shell.frame-h .rail-account .rail-avatar .avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #f0e6d5; color: #6c512b; font-size: 11px; font-weight: 750; letter-spacing: .02em; box-shadow: none; }
.tenant-shell.frame-h .sidebar-close { display: none; }
.tenant-shell.frame-h .rail-collapse-row { display: none; }

/* The setup wizard keeps its navy column; the Business and its Organization head it as they head the sidebar. */
.tenant-shell.frame-h.in-setup .desktop-rail { width: var(--rail); }
.tenant-shell.frame-h .business-context.is-setup { padding: 4px 4px 14px; }
.tenant-shell.frame-h .business-context.is-setup strong { color: #fff; }
.tenant-shell.frame-h .business-context.is-setup small { color: rgba(255, 255, 255, .62); }

/* The person menu opens beside the card with their feet level, as H's does. */
.tenant-shell.frame-h .lacak-account-menu { z-index: 150; width: min(300px, calc(100vw - 24px)); }

/* ---------- Narrower screens, as H's: the sidebar narrows at 1250px and 950px; the setup wizard's column keeps its
   width. ---------- */
@media (max-width: 1250px) { .tenant-shell.frame-h { --rail: 226px; } }
@media (max-width: 950px) { .tenant-shell.frame-h { --rail: 210px; } }
.tenant-shell.frame-h.in-setup { --rail: 252px; }

/* ---------- The phone: H's bar and drawer from 720px down ---------- */
.tenant-shell.frame-h .mobile-nav-toggle span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) {
  .tenant-shell.frame-h .sidebar-scrim { position: fixed; inset: 0; display: block; padding: 0; border: 0; background: rgba(23, 41, 68, .29); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 180ms ease, visibility 0s linear 180ms; }
  .tenant-shell.frame-h.drawer-open .sidebar-scrim { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 180ms ease; }
  body:has(.tenant-shell.frame-h.drawer-open) { overflow: hidden; }
  .tenant-shell.frame-h.with-business-rail { --business-rail: 48px; }
  .tenant-shell.frame-h .business-rail { padding-top: 16px; }
  .business-rail .company-brand { width: 28px; height: 28px; margin-bottom: 12px; }
  .business-rail .company-brand img { width: 24px; height: 24px; }
  .business-rail-list { padding-left: 6px; padding-right: 6px; }
  .business-rail .company-tile { width: 32px; height: 32px; border-radius: 9px; font-size: 9px; }
  .business-rail .company-tile.selected::before { left: -7px; }
  .business-rail-tile > .biz-tile { font-size: 9px; }
  .business-rail-tile > .biz-tile.is-three { font-size: 8px; }
  .tenant-shell.frame-h .desktop-rail, .tenant-shell.frame-h.rail-collapsed .desktop-rail { display: flex; left: calc(var(--business-rail) - 270px); width: 260px; padding: 12px; gap: 0; z-index: 125; transform: none; visibility: visible; transition: left 180ms ease; }
  .tenant-shell.frame-h.drawer-open .desktop-rail { left: var(--business-rail); box-shadow: 18px 0 48px rgba(23, 32, 51, .16); transition: left 180ms ease; }
  .tenant-shell.frame-h:not(.drawer-open) .desktop-rail { visibility: hidden; transition: left 180ms ease, visibility 0s linear 180ms; }
  .tenant-shell.frame-h .app-frame { margin-left: var(--business-rail); width: calc(100% - var(--business-rail)); }
  .tenant-shell.frame-h .mobile-header { position: sticky; z-index: 65; top: 0; display: flex; align-items: center; height: 54px; padding: 0; border-bottom: 1px solid #e5e5de; background: #fffefa; }
  .tenant-shell.frame-h .mobile-header .mobile-nav-toggle { display: flex; align-items: center; gap: 13px; width: 100%; height: 54px; padding: 0 17px; border: 0; border-radius: 0; background: transparent; color: #687b96; font: inherit; font-size: 12px; font-weight: 600; text-align: left; flex: 1 1 auto; }
  .tenant-shell.frame-h .mobile-header .mobile-nav-toggle .icon { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
  .tenant-shell.frame-h .mobile-header .mobile-nav-toggle i { position: absolute; top: 12px; left: 28px; width: 9px; height: 9px; border: 2px solid #fffefa; border-radius: 50%; background: var(--rail-gold, #c8963e); }
  .tenant-shell.frame-h .mobile-header { margin-left: var(--business-rail); }
  .tenant-shell.frame-h .app-frame { margin-top: 0; }
  .tenant-shell.frame-h .sidebar-close.mobile-close { position: static; display: grid; place-items: center; width: 30px; height: 30px; margin-left: auto; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #8996a8; }
  .tenant-shell.frame-h .sidebar-close .icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
  /* The setup column's ✕, at its top right in the column's own terms (setup-sidebar.css). */
  .tenant-shell.frame-h.in-setup .sidebar-close { position: absolute; top: 16px; right: 14px; display: grid; width: 40px; height: 40px; place-items: center; padding: 0; border: 1px solid var(--sb-line); border-radius: 9px; background: transparent; color: #fff; cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
  .tenant-shell.frame-h.in-setup .sidebar-close:hover { border-color: rgb(255 255 255 / 24%); background: var(--sb-wash); }
  .tenant-shell.frame-h.in-setup .sidebar-close:focus-visible { outline: 2px solid var(--sb-gold); outline-offset: 2px; }
  .tenant-shell.frame-h .sidebar-scrim { z-index: 120; }
  .tenant-shell.frame-h .business-context.is-empty { justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  .tenant-shell.frame-h .desktop-rail, .tenant-shell.frame-h .sidebar-scrim, .business-rail .company-tile, .tenant-shell.frame-h .nav-link { transition: none !important; }
}