/* Coneso CF — sidebar / off-canvas drawer (Phase C.2).
 *
 * Role-aware left navigation that replaces the topbar when UI_SIDEBAR_NAV is on.
 * Desktop (≥992px): fixed 248px rail, content shifted right. Mobile (<992px):
 * off-canvas drawer toggled by the .cf-sidebar-toggle hamburger; a scrim
 * dims the page behind it. Usable down to 320px (fat tap targets, no h-scroll).
 *
 * Colours come from the real _tokens.css variables (--bg-surface / --text-* /
 * --border-* / --brand-*); they flip automatically under [data-theme="dark"].
 *
 * IMPORTANT: the legacy static/assets/css/styles.css ships UNSCOPED global
 * `ul { background:#333; overflow:hidden }`, `li { float:left }` and
 * `li a { display:inline-block; color:white }` rules and loads AFTER this file.
 * Every rule below that resets background / float / display / colour on the
 * sidebar's ul/li/a exists to out-specify that leakage (it was making the items
 * wrap two-per-row and the text turn white/invisible).
 */

:root {
  --cf-sidebar-w: 248px;
}

.cf-shell { min-height: 100vh; }

/* When the sidebar is active, suppress the in-content topbar nav that the page
 * templates still include (`_navbar_user.html` / `_navbar_admin.html` render a
 * `<ul class="cf-mainnav">`). The sidebar footer switchers keep their styling
 * via the `cf-sidebar__switchers` opt-out so the language/theme controls stay. */
body.cf-has-sidebar .cf-mainnav:not(.cf-sidebar__switchers) { display: none !important; }

/* --- the rail ----------------------------------------------------------- */
.cf-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--cf-sidebar-w);
  background: var(--bg-surface);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  z-index: 1040;
  overflow: hidden;            /* nav scrolls internally; brand + footer stay pinned */
  transition: transform .2s ease;
}
.cf-sidebar__brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 1rem 1.25rem;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--border-subtle);
}
.cf-sidebar__brand:hover { color: var(--text-primary); }
.cf-sidebar__brand img { height: 28px; width: auto; }

/* nav list — reset the legacy global `ul { background:#333; overflow:hidden }` */
.cf-sidebar__nav {
  list-style: none;
  margin: 0;
  padding: .5rem 0;
  flex: 1 1 auto;
  min-height: 0;          /* allow the nav to shrink so it (not the whole sidebar) scrolls */
  background: transparent;
  overflow-y: auto;       /* long menus scroll here; brand + footer stay pinned */
}

/* group header = the "submenu" divider (Order Loader / Commerce / Account) */
.cf-sidebar__section {
  float: none;
  display: block;
  width: 100%;
  padding: .9rem 1.25rem .35rem;
  margin-top: .35rem;
  border-top: 1px solid var(--border-subtle);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* each item — reset the legacy global `li { float:left }` */
.cf-sidebar__item {
  float: none;
  display: block;
  width: 100%;
  list-style: none;
  background: transparent;
}
.cf-sidebar__item a {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 1.25rem;
  color: var(--text-secondary);   /* out-specifies legacy `li a { color:white }` */
  text-align: left;
  text-decoration: none;
  font-size: .95rem;
  min-height: 44px;               /* fat tap target */
  border-radius: 0;
}
.cf-sidebar__item a:hover,
.cf-sidebar__item a:focus {
  background: rgba(37, 99, 235, .10);   /* subtle brand tint, works light + dark */
  color: var(--text-primary);
}
.cf-sidebar__item a.is-active {
  background: rgba(37, 99, 235, .14);
  color: var(--text-link);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--brand-primary-600);
}
.cf-sidebar__item a i {
  width: 1.1rem;
  text-align: center;
  flex: 0 0 auto;
  color: var(--text-muted);
}
.cf-sidebar__item a:hover i,
.cf-sidebar__item a.is-active i { color: inherit; }

.cf-sidebar__footer {
  padding: .75rem 1.25rem;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex-shrink: 0;         /* stay pinned at the bottom; never scroll out of view */
}
/* footer switcher list also needs the legacy `ul`/`li` reset */
.cf-sidebar__footer ul {
  background: transparent;
  overflow: visible;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.cf-sidebar__footer li { float: none; display: block; }

/* The footer switchers reuse `.cf-mainnav`, which is styled for the DARK legacy
   navbar (white text via `li a, .dropbtn { color:white }` and
   `.cf-mainnav .cf-themeswitch { color:#fff }`). On the light sidebar surface
   that's white-on-white = invisible. Re-tint to theme tokens so both switchers
   are legible in light AND dark mode. Higher specificity (3 classes) beats the
   `.cf-mainnav .cf-themeswitch` (2-class) navbar rule regardless of load order. */
.cf-sidebar__footer .cf-mainnav .cf-themeswitch,
.cf-sidebar__footer .cf-langswitch .dropbtn {
  color: var(--text-secondary);
  border-color: var(--border-subtle);
}
.cf-sidebar__footer .cf-langswitch .dropbtn i { color: var(--text-muted); }
.cf-sidebar__footer .cf-mainnav .cf-themeswitch:hover,
.cf-sidebar__footer .cf-mainnav .cf-themeswitch:focus-visible,
.cf-sidebar__footer .cf-langswitch:hover .dropbtn,
.cf-sidebar__footer .cf-langswitch .dropbtn:hover {
  color: var(--text-primary);
  background-color: rgba(37, 99, 235, .10);   /* match the nav-item hover tint, not legacy red */
  border-color: var(--border-default);
}

/* --- content offset on desktop ------------------------------------------ */
.cf-content { padding: 1rem; }
@media (min-width: 992px) {
  .cf-content { margin-left: var(--cf-sidebar-w); }
  .cf-sidebar-toggle { display: none; }
}

/* --- mobile drawer ------------------------------------------------------ */
.cf-sidebar-toggle {
  position: sticky;
  top: 0;
  z-index: 1030;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .9rem;
  margin: .5rem;
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: .5rem;
  font-size: 1rem;
  cursor: pointer;
  min-height: 44px;
}
.cf-sidebar-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  z-index: 1039;
}
@media (max-width: 991.98px) {
  .cf-sidebar {
    transform: translateX(-100%);
    box-shadow: 2px 0 12px rgba(0, 0, 0, .15);
  }
  body.cf-sidebar-open .cf-sidebar { transform: translateX(0); }
  body.cf-sidebar-open .cf-sidebar-scrim { display: block; }
}