/* MyAvatar top-nav shell (2026-10-09)
   ------------------------------------------------------------------
   Shared by every page that extends templates/base.html. The markup lives in
   templates/partials/topnav.html and is rendered INSIDE .app-container as a
   previous sibling of <main class="main-content">. All layout overrides are
   therefore scoped with `.ct-top ~ .main-content`, so a page that overrides
   `{% block sidebar %}` with its own shell (movie_studio.html etc.) or opts
   back into the legacy sidebar (`use_legacy_sidebar`) is left untouched.
   Chrome that sits outside .app-container (hamburger, bottom nav) is hidden
   via body.tn-shell (set synchronously by the partial) with a :has() fallback.
   Visual values are the ones the settings/connections inline shell used. */

/* ---------- layout: neutralise the sidebar geometry ---------- */
body.tn-shell .app-container { display: block !important; }
.app-container:has(> .ct-top) { display: block !important; }

.ct-top ~ .main-content {
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100%;
  padding: 24px !important;
  background: #FAFAF7 !important;
  overflow-x: hidden;
}
/* pages whose own container carries the padding (billing, settings, connections) */
.ct-top ~ .main-content.tn-flush { padding: 0 !important; }
/* the in-page "← Co-pilot" link is redundant: the bar carries it */
.ct-top ~ .main-content .ga-copilot-back { display: none !important; }

body.tn-shell .mobile-menu-btn { display: none !important; }
body.tn-shell #sidebarResizer { display: none !important; }
body.tn-shell .mobile-bottom-nav { display: none !important; }
body:has(.ct-top) .mobile-menu-btn { display: none !important; }
body:has(.ct-top) #sidebarResizer { display: none !important; }
body:has(.ct-top) .mobile-bottom-nav { display: none !important; }

/* ---------- the bar ---------- */
.ct-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 24px;
  border-bottom: 1px solid #E6E6DF;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}
.ct-brand {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  color: #2A2A28;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  flex: none;
}
.ct-brand .mk { width: 16px; height: 16px; border-radius: 4px; background: #78B41E; display: inline-block; }

.ct-nav { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; min-width: 0; }
.ct-nav a { font-size: 13px; color: #6A6A66; text-decoration: none; transition: color .12s; }
.ct-nav a:hover { color: #2A2A28; }
.ct-nav a.active { color: #2A2A28; font-weight: 700; }
.ct-nav a .ti { font-size: 16px; }
.ct-nav a.ct-back { white-space: nowrap; }

/* ---------- dropdown groups (desktop) ---------- */
.tn-group { position: relative; display: flex; align-items: center; gap: 2px; margin: -8px 0; padding: 8px 0; }
.tn-caret {
  border: 0; background: none; color: #6A6A66; cursor: pointer;
  font-size: 10px; line-height: 1; padding: 4px 3px; margin: 0;
  font-family: inherit; min-height: 0 !important;
}
.tn-caret:hover, .tn-group.open .tn-caret { color: #2A2A28; }
.tn-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: -10px;
  min-width: 210px;
  background: #fff;
  border: 1px solid #E6E6DF;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  padding: 6px;
  z-index: 60;
  flex-direction: column;
}
.tn-group:hover .tn-menu, .tn-group.open .tn-menu { display: flex; }
.ct-nav .tn-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 10px; border-radius: 6px; white-space: nowrap;
}
.ct-nav .tn-menu a:hover { background: #F4F4EF; }
.ct-nav .tn-menu a.active { background: #F0F6E6; }
.tn-badge {
  font-size: 10px; font-weight: 600; letter-spacing: .02em;
  background: #78B41E; color: #1f2a1a; border-radius: 4px; padding: 1px 6px;
}
.tn-burger { display: none; }

/* AI Act Art. 50 disclosure strip — same partial the sidebar carried */
.tn-disclosure { padding: 10px 24px 0; background: #FAFAF7; }
.tn-disclosure .ai-disclosure { margin: 0 !important; }

/* ---------- tablet: the old 64px rail must not come back ---------- */
@media (max-width: 1024px) {
  .ct-top ~ .main-content { margin-left: 0 !important; width: 100% !important; }
}

/* ---------- phone: hamburger + vertical list, no horizontal scroll ---------- */
@media (max-width: 768px) {
  .ct-top { padding: 10px 16px; gap: 12px; }
  .ct-top ~ .main-content { padding: 16px !important; padding-bottom: 24px !important; }
  .ct-top ~ .main-content.tn-flush { padding: 0 !important; }
  .tn-disclosure { padding: 10px 16px 0; }

  .tn-burger {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid #E6E6DF; background: #fff; color: #2A2A28; border-radius: 6px;
    padding: 6px 10px; font-size: 13px !important; cursor: pointer; font-family: inherit;
    min-height: 36px !important;
  }
  .tn-burger .tn-burger-icon { font-size: 16px; line-height: 1; }

  .ct-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid #E6E6DF;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
    padding: 6px 16px 12px;
    max-height: calc(100vh - 60px); overflow-y: auto; overflow-x: hidden;
  }
  .ct-top.open .ct-nav { display: flex; }

  .ct-nav > a { display: block; padding: 11px 4px; font-size: 14px; border-top: 1px solid #F0F0EA; }
  .tn-group { display: block; margin: 0; padding: 0; border-top: 1px solid #F0F0EA; }
  .tn-group .tn-label { display: block; padding: 11px 4px; font-size: 14px; font-weight: 700; color: #2A2A28; }
  .tn-caret { display: none; }
  .tn-menu {
    display: flex !important;
    position: static; min-width: 0;
    border: 0; box-shadow: none; border-radius: 0;
    padding: 0 0 8px 14px;
  }
  .ct-nav .tn-menu a { padding: 8px 6px; font-size: 14px; white-space: normal; }
  .ct-nav a.ct-back { padding: 12px 4px; border-top: 1px solid #F0F0EA; }
}