/* ============================================================
   Commexce App Shell — app_shell.css
   Scoped to .cx-* classes; no global side effects.
   ============================================================ */

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  --cx-bg:         #ffffff;
  --cx-fg:         #0f1629;
  --cx-primary:    #2d52a8;
  --cx-primary-2:  #6b50a8;
  --cx-muted:      #6e7485;
  --cx-border:     #e3e5ec;

  --cx-header-h:   64px;
  --cx-max-w:      1180px;
  --cx-px:         24px;
}

/* ── Logo ───────────────────────────────────────────────────── */
.cx-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  line-height: 1;
  text-decoration: none;
}

.cx-logo__comm,
.cx-logo__exce {
  font-family: 'JetBrains Mono', 'Fira Mono', monospace;
  font-weight: 800;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: inline;
}

.cx-logo__comm {
  color: var(--cx-fg);
  opacity: 0.6;
}

.cx-logo__exce {
  background: linear-gradient(90deg, var(--cx-primary) 0%, var(--cx-primary-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.cx-logo__bar {
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 3px;
  background: linear-gradient(90deg, var(--cx-primary) 0%, var(--cx-primary-2) 100%);
  border-radius: 1px;
}

/* Commexce standalone logo utilities (new logo classes) */
.commexce-logo{
  display:inline-flex;
  flex-direction:column;
  gap:4px;
  align-items:flex-start;
  line-height:1;
}

.cx-header {
.logo-text{font-weight:900;letter-spacing:0.18em;text-transform:uppercase;line-height:1;font-variant-numeric:tabular-nums}
.logo-text .part-comm{opacity:0.6;color:var(--cx-fg)}
.logo-text .part-exce{display:inline-block;background:linear-gradient(135deg,var(--cx-primary),var(--cx-primary-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.logo-bar{height:2px;border-radius:9999px;color:var(--cx-primary);background:linear-gradient(90deg,currentColor 0%, rgba(45,82,168,0.6) 35%, transparent 100%);opacity:0.4;width:20px}
.commexce-mark{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:hsl(220 10% 96%);color:var(--cx-primary);font-weight:800;letter-spacing:-0.01em}
.font-mono{font-family:'JetBrains Mono', 'Fira Mono', monospace}

/* Size modifiers to match the standalone component */
.size-sm .logo-text{font-size:10px}
.size-sm .logo-text{font-size:10px}
.size-md .logo-text{font-size:15px}
.size-lg .logo-text{font-size:20px}

.size-sm .logo-mark{width:20px;height:20px;font-size:10px}
.size-md .logo-mark{width:34px;height:34px;font-size:16px}
.size-lg .logo-mark{width:48px;height:48px;font-size:20px}

.size-sm .logo-bar{width:16px}
.size-md .logo-bar{width:28px}
.ize-lg .logo-bar{width:40px}
.size-lg .logo-bar{width:40px}
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cx-border);
}

.cx-header__inner {
  display: flex;
  align-items: center;
  gap: 0;
  height: var(--cx-header-h);
  max-width: var(--cx-max-w);
  margin: 0 auto;
  padding: 0 var(--cx-px);
}

.cx-header__logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.cx-header__auth {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.cx-header__user {
  color: var(--cx-muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

.cx-header__logout-form {
  margin: 0;
}

.cx-header__auth-link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 1px solid var(--cx-border);
  border-radius: 8px;
  background: #fff;
  color: var(--cx-fg);
  padding: 0 12px;
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.cx-header__auth-link:hover {
  color: var(--cx-primary);
  border-color: rgba(45, 82, 168, 0.35);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

/* Center nav */
.cx-header__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
}

/* Right slot */
.cx-header__right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* ── Desktop nav links ──────────────────────────────────────── */
.cx-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cx-fg);
  text-decoration: none;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}

.cx-nav-link:hover {
  color: var(--cx-primary);
  background: rgba(45, 82, 168, 0.06);
}

.cx-nav-link--active {
  color: var(--cx-primary);
}

/* Active dot */
.cx-nav-link--active::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: var(--cx-primary);
  border-radius: 50%;
}

/* ── Role toggle ────────────────────────────────────────────── */
.cx-role-toggle {
  display: inline-flex;
  align-items: center;
  background: rgba(14, 22, 41, 0.06);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}

.cx-role-toggle--full {
  width: 100%;
}

.cx-role-toggle__option {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--cx-muted);
  text-decoration: none;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}

.cx-role-toggle__option:hover {
  color: var(--cx-fg);
}

.cx-role-toggle__option--active {
  background: var(--cx-bg);
  color: var(--cx-fg);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

/* ── Hamburger button ───────────────────────────────────────── */
.cx-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  flex-shrink: 0;
  margin-left: auto;
  transition: background 0.15s ease;
}

.cx-hamburger:hover {
  background: rgba(14, 22, 41, 0.06);
}

.cx-hamburger__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--cx-fg);
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Animated X when open */
.cx-hamburger[aria-expanded="true"] .cx-hamburger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.cx-hamburger[aria-expanded="true"] .cx-hamburger__bar:nth-child(2) {
  opacity: 0;
}
.cx-hamburger[aria-expanded="true"] .cx-hamburger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile menu ────────────────────────────────────────────── */
.cx-mobile-menu {
  display: none;
  flex-direction: column;
  gap: 0;
  background: var(--cx-bg);
  border-top: 1px solid var(--cx-border);
  padding: 12px var(--cx-px) 20px;
}

.cx-mobile-menu[aria-hidden="false"] {
  display: flex;
}

.cx-mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 16px;
}

.cx-mobile-nav-link {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--cx-fg);
  text-decoration: none;
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
}

.cx-mobile-nav-link:hover {
  color: var(--cx-primary);
  background: rgba(45, 82, 168, 0.06);
}

.cx-mobile-nav-link--active {
  color: var(--cx-primary);
  background: rgba(45, 82, 168, 0.06);
}

.cx-mobile-menu__role {
  padding-top: 4px;
}

/* ── Footer ─────────────────────────────────────────────────── */
.cx-footer {
  background: var(--cx-bg);
  border-top: 1px solid var(--cx-border);
}

.cx-footer__inner {
  max-width: var(--cx-max-w);
  margin: 0 auto;
  padding: 48px var(--cx-px) 32px;
}

.cx-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px 32px;
  margin-bottom: 40px;
}

.cx-footer__col-heading {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cx-muted);
  margin: 0 0 16px;
}

.cx-footer__col--brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cx-footer__tagline {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  color: var(--cx-muted);
  line-height: 1.55;
  max-width: 24ch;
}

.cx-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cx-footer__link {
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  color: var(--cx-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.cx-footer__link:hover {
  color: var(--cx-primary);
}

.cx-footer__link--cta {
  color: var(--cx-primary);
  font-weight: 500;
}

.cx-footer__link--cta:hover {
  color: var(--cx-primary-2);
}

.cx-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--cx-border);
}

.cx-footer__copy {
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  color: var(--cx-muted);
}

.cx-footer__legal {
  display: flex;
  gap: 20px;
}

.cx-footer__legal-link {
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  color: var(--cx-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.cx-footer__legal-link:hover {
  color: var(--cx-fg);
}

/* ── Responsive breakpoint ──────────────────────────────────── */
@media (max-width: 800px) {
  .cx-header__nav,
  .cx-header__right {
    display: none;
  }

  .cx-hamburger {
    display: inline-flex;
    margin-left: auto;
  }

  .cx-footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}