/* sidebar-shell.css — the one sidebar shell of every yabee app.

   LIVE COPY. yabeeauth serves this file at
     https://auth.yabeecreative.com/shell/sidebar-shell.css?app=<app id>
   and every app (the portal included) loads it with a <link> in index.html.
   One edit + one yabeeauth deploy restyles all apps; no app is rebuilt.
     master       gitbackup  .garage/ui-components/SidebarShell.css
     served copy  yabeeauth  ui/public/shell/sidebar-shell.css   (keep identical)

   Markup contract (AntD Layout / Sider / Menu, v5 or v6, either theme prop):

     <Layout>
       <Sider className="app-sider" collapsible trigger={null} breakpoint="md">
         <div className="app-sider-inner">
           <div className="app-sider-header">      brand + close, or the hamburger
             <div className="app-sider-brand"><img/><span className="app-sider-title"/></div>
           </div>
           <Menu className="app-sider-menu" mode="inline" />
           <div className="app-sider-footer">      avatar, name, plan tag, buttons
             <div className="sider-footer-name"/> <Tag className="sider-footer-tier"/>
           </div>
         </div>
       </Sider>
       <div className="app-sider-scrim" onClick={collapse} />
       <Layout>…page…</Layout>
     </Layout>

   An app owns only its colours: it sets the --shell-* colour variables on
   :root (and again under its dark selector). Widths, paddings, centring and
   the phone behaviour live here and are the same everywhere.

   Behaviour:
     - Expanded: 232 px panel on the brighter surface, pill menu items.
     - Collapsed: a rail of fixed square pills, centred by auto margins (never by
       padding arithmetic), on the PAGE background — the rail merges into the page.
     - Below 768 px (AntD "md"): the rail narrows to 52 px, and the expanded
       panel floats over the page with a scrim instead of pushing it. */

:where(:root) {
  /* Layout — shared, do not override per app. */
  --shell-open: 232px;
  --shell-open-phone: min(280px, 85vw);
  --shell-rail: 72px;
  --shell-pill: 40px;
  /* Page gutter an app should use for its content on a phone. */
  --shell-gutter: 12px;

  /* Colours — the dark-grey defaults; each app maps its own palette. */
  --shell-bg: #141414;
  --shell-surface: #1c1c1d;
  --shell-border: #2c2d30;
  --shell-ink: #e3e3e3;
  --shell-muted: #9aa0a6;
  --shell-hover: #26272a;
  --shell-selected-bg: #303236;
  --shell-selected-ink: #ffffff;
  --shell-accent: #ffffff;
}

@media (max-width: 767.98px) {
  :where(:root) {
    --shell-rail: 52px;
  }
}

/* ── The panel ── */

.app-sider.ant-layout-sider {
  flex: 0 0 var(--shell-open) !important;
  width: var(--shell-open) !important;
  min-width: var(--shell-open) !important;
  max-width: var(--shell-open) !important;
  background: var(--shell-surface) !important;
  box-shadow: inset -1px 0 0 var(--shell-border);
  transition:
    all 0.2s,
    background-color 0.3s cubic-bezier(0.2, 0, 0, 1),
    box-shadow 0.3s cubic-bezier(0.2, 0, 0, 1) !important;
}

/* Collapsed: the rail takes the page background and loses its edge. */
.app-sider.ant-layout-sider-collapsed {
  flex: 0 0 var(--shell-rail) !important;
  width: var(--shell-rail) !important;
  min-width: var(--shell-rail) !important;
  max-width: var(--shell-rail) !important;
  background: var(--shell-bg) !important;
  box-shadow: none;
}

/* The page beside the rail: the same background, so the two read as one. */
.app-sider ~ .ant-layout {
  background: var(--shell-bg);
}

.app-sider .app-sider-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  background: transparent;
}

/* ── Header and footer ── */

.app-sider .app-sider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--shell-border);
  transition: border-color 0.3s cubic-bezier(0.2, 0, 0, 1);
}

.app-sider .app-sider-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.app-sider .app-sider-brand img {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  flex-shrink: 0;
}
.app-sider .app-sider-title {
  color: var(--shell-ink);
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
}

.app-sider .app-sider-footer {
  margin-top: auto;
  padding: 14px 16px;
  border-top: 1px solid var(--shell-border);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: border-color 0.3s cubic-bezier(0.2, 0, 0, 1);
}
.app-sider .sider-footer-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--shell-muted);
  font-size: 0.85rem;
}
.app-sider .sider-footer-tier {
  flex-shrink: 0;
  margin-inline-end: 0;
}

/* Collapsed: one centred column; the first footer item (the avatar) ends up
   at the bottom. */
.app-sider.ant-layout-sider-collapsed .app-sider-header {
  justify-content: center;
  padding: 14px 0;
  border-bottom-color: transparent;
}
.app-sider.ant-layout-sider-collapsed .app-sider-footer {
  flex-direction: column-reverse;
  justify-content: flex-start;
  padding: 16px 0;
  gap: 16px;
  border-top-color: transparent;
}
.app-sider.ant-layout-sider-collapsed .sider-footer-name,
.app-sider.ant-layout-sider-collapsed .sider-footer-tier {
  display: none;
}

/* ── Menu: pills ── (the !important flags beat AntD's CSS-in-JS) */

.app-sider .ant-menu {
  background: transparent !important;
  border-inline-end: none !important;
}

.app-sider .app-sider-menu {
  flex: 1;
  min-height: 0;
  padding-top: 8px;
  overflow-x: hidden;
  overflow-y: auto;
}

.app-sider .ant-menu .ant-menu-item {
  height: 36px !important;
  line-height: 36px !important;
  margin: 2px 12px !important;
  padding-inline: 12px !important;
  border-radius: 18px !important;
  width: calc(100% - 24px) !important;
  color: var(--shell-ink) !important;
}
.app-sider .ant-menu .ant-menu-item:hover {
  background: var(--shell-hover) !important;
  color: var(--shell-ink) !important;
}
.app-sider .ant-menu .ant-menu-item.ant-menu-item-selected {
  background: var(--shell-selected-bg) !important;
  color: var(--shell-selected-ink) !important;
}
.app-sider .ant-menu .ant-menu-item.ant-menu-item-selected .anticon {
  color: var(--shell-accent) !important;
}

/* Collapsed: a fixed square pill, centred by auto margins, icon centred by
   flex, label out of the flow. Correct at any rail width. */
.app-sider.ant-layout-sider-collapsed .ant-menu {
  width: 100% !important;
}
.app-sider.ant-layout-sider-collapsed .ant-menu .ant-menu-item {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: var(--shell-pill) !important;
  height: var(--shell-pill) !important;
  line-height: var(--shell-pill) !important;
  margin: 2px auto !important;
  padding: 0 !important;
  border-radius: 50% !important;
}
.app-sider.ant-layout-sider-collapsed .ant-menu .ant-menu-item .ant-menu-title-content {
  display: none !important;
}
.app-sider.ant-layout-sider-collapsed .ant-menu .ant-menu-item .anticon,
.app-sider.ant-layout-sider-collapsed .ant-menu .ant-menu-item .ant-menu-item-icon {
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  transform: none !important;
}

/* ── Phone: the expanded panel floats over the page ── */

.app-sider-scrim {
  display: none;
}

@media (max-width: 767.98px) {
  .app-sider.ant-layout-sider:not(.ant-layout-sider-collapsed) {
    position: fixed !important;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 900;
    flex: none !important;
    width: var(--shell-open-phone) !important;
    min-width: var(--shell-open-phone) !important;
    max-width: var(--shell-open-phone) !important;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.35);
  }
  /* The page keeps the rail's inset, so nothing moves when the panel opens. */
  .app-sider:not(.ant-layout-sider-collapsed) ~ .ant-layout {
    margin-inline-start: var(--shell-rail);
  }
  .app-sider:not(.ant-layout-sider-collapsed) ~ .app-sider-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 899;
    background: rgba(0, 0, 0, 0.45);
  }
}