/* Barça Yönetim Merkezi — top navigation shell.
   Replaces the sidebar layout: brand, pill menu with group dropdowns and actions in one sticky bar.
   Loaded after theme.css/ui.css; everything is scoped to .topnav-shell so the login page is untouched. */

.topnav-shell{--topnav-h:68px;--subbar-h:46px;--pill:999px;display:block;min-height:100vh}
.topnav-shell .workspace,.nav-collapsed .topnav-shell .workspace{margin:0;width:100%;min-width:0}
.topnav-shell .page-content{max-width:1640px;margin:0 auto;padding:22px 24px 24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Bar ---------- */
.topnav{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:18px;height:var(--topnav-h);padding:0 24px;background:var(--glass);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.topnav .brand{flex:none;margin:0;padding:0;text-decoration:none;color:var(--text)}
.topnav .brand-logo small{font-size:10px}
.topnav .brand-wordmark{height:28px}
.topnav .topbar-actions{margin-left:0;flex:none;display:flex;align-items:center;gap:6px}
.topnav .icon-button,.topnav .search-trigger{border-radius:var(--pill)}
.topnav .icon-button{border-color:var(--line-2);background:var(--surface)}
.topnav .search-trigger{min-width:0;width:220px;background:var(--surface)}
.topnav .user-button{border-color:var(--line-2);background:var(--surface);padding:0 10px 0 4px}

/* ---------- Pill menu ---------- */
.topnav-menu{flex:1;min-width:0;display:flex;justify-content:center}
.topnav-shell nav.topnav-menu{flex-direction:row;align-items:center;gap:2px}
.topnav-menu>.nav-single,.topnav-menu>.nav-group{position:relative}
.topnav-menu .nav-label{display:none}
.topnav-menu{align-self:center;padding:5px;border:1px solid var(--line);border-radius:var(--pill);background:var(--surface);box-shadow:var(--shadow-sm);flex:0 1 auto;margin:0 auto}
.topnav-menu>.nav-single>.nav-button,.nav-group-toggle{display:inline-flex;align-items:center;gap:8px;width:auto;height:38px;padding:0 15px;border:0;border-radius:var(--pill);background:transparent;color:var(--text-2);font-size:13.5px;font-weight:540;white-space:nowrap;transition:background .15s,color .15s}
.topnav-menu>.nav-single>.nav-button .icon{width:16px;height:16px}
.topnav-menu>.nav-single>.nav-button .nav-desc{display:none}
.topnav-menu>.nav-single>.nav-button:hover,.nav-group-toggle:hover,.nav-group-toggle[aria-expanded="true"]{background:var(--surface-2);color:var(--text)}
.topnav-menu .nav-button.active::before{display:none}
.topnav-menu>.nav-single>.nav-button.active,.nav-group:has(.nav-button.active)>.nav-group-toggle{background:var(--text);color:var(--bg);box-shadow:0 8px 18px -10px rgba(0,0,0,.5)}
.topnav-menu>.nav-single>.nav-button.active .icon{color:var(--bg)}
.topnav-menu>.nav-single>.nav-button .count{margin-left:2px}
.nav-group-chevron{width:14px;height:14px;transition:transform .15s}
.nav-group-toggle[aria-expanded="true"] .nav-group-chevron{transform:rotate(180deg)}
.nav-group-dot{display:none;width:7px;height:7px;border-radius:50%;background:var(--accent-fg);margin-left:-2px}
.nav-group:has(.count.unread:not([hidden])) .nav-group-dot{display:block}

/* ---------- Dropdown ---------- */
.nav-dropdown{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);z-index:50;display:none;flex-direction:column;gap:2px;width:340px;padding:8px;border:1px solid var(--line-2);border-radius:18px;background:var(--glass-strong);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:var(--shadow-lg)}
.nav-group.open .nav-dropdown{display:flex;animation:nav-drop-in .14s ease-out}
@keyframes nav-drop-in{from{opacity:0;transform:translate(-50%,-4px) scale(.98)}to{opacity:1;transform:translate(-50%,0)}}
.nav-dropdown .nav-button{height:auto;min-height:48px;padding:9px 12px;gap:12px;border-radius:12px;align-items:center}
.nav-dropdown .nav-button>.icon{flex:none;width:34px;height:34px;padding:8px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);color:var(--text-2)}
.nav-dropdown .nav-button.active{background:var(--accent-soft)}
.nav-dropdown .nav-button.active>.icon{color:var(--accent-fg);border-color:var(--accent-line)}
.nav-dropdown .nav-text{display:flex;flex-direction:column;min-width:0;white-space:normal;font-weight:560;color:var(--text)}
.nav-desc{font-size:12px;font-weight:450;color:var(--text-3);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-dropdown .nav-button.external .nav-external{opacity:1}

/* ---------- SEO sub bar ---------- */
.seo-subbar{position:sticky;top:var(--topnav-h);z-index:30;display:flex;gap:4px;height:var(--subbar-h);align-items:center;margin:0;padding:0 24px;border:0;border-bottom:1px solid var(--line);background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);overflow-x:auto}
.seo-subbar[hidden]{display:none}
.seo-subbar button{flex:none;height:30px;padding:0 13px;border:0;border-radius:var(--pill);background:none;color:var(--text-2);font-size:12.5px;font-weight:520}
.seo-subbar button:hover{background:var(--surface-2);color:var(--text)}
.seo-subbar button.active{background:var(--accent-soft);color:var(--accent-fg)}

/* ---------- Embedded workspaces: fill the space under the bar ---------- */
body[data-view="chat"] .topnav-shell .page-content,body[data-view="admin"] .topnav-shell .page-content,body[data-view="backoffice"] .topnav-shell .page-content{height:calc(100dvh - var(--topnav-h));max-width:none;padding:0}
body[data-view="seo"] .topnav-shell .page-content{height:calc(100dvh - var(--topnav-h) - var(--subbar-h));max-width:none;padding:0}
body[data-view="chat"] .topnav-shell .page-footer,body[data-view="admin"] .topnav-shell .page-footer,body[data-view="seo"] .topnav-shell .page-footer,body[data-view="backoffice"] .topnav-shell .page-footer{display:none}

/* ---------- Narrower screens: tighter bar ---------- */
@media (max-width:1560px){
  .topnav .search-trigger{width:38px;padding:0;justify-content:center}
  .topnav .search-trigger span,.topnav .search-trigger kbd{display:none}
}
@media (max-width:1400px){
  .topnav .brand-logo small,.topnav .user-button .user-name,.topnav .user-button>.icon{display:none}
  .topnav .user-button{padding:0 3px}
  .topnav-menu>.nav-single>.nav-button,.nav-group-toggle{padding:0 12px}
  .topnav-menu>.nav-single>.nav-button .icon{display:none}
}

/* ---------- Drawer below 1180px: the same menu, every group listed ---------- */
@media (max-width:1180px){
  .topnav{gap:10px;padding:0 14px}
  .topnav .nav-toggle{display:grid;margin-left:0}
  .topnav .topbar-actions{margin-left:auto}
  .topnav .brand-logo small{display:none}
  .topnav-menu{position:fixed;inset:0 auto 0 0;z-index:60;width:300px;max-width:86vw;margin:0;padding:18px 12px;display:flex;flex-direction:column;justify-content:flex-start;gap:0;overflow-y:auto;border:0;border-right:1px solid var(--line-2);border-radius:0;background:var(--glass-strong);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:var(--shadow-lg);transform:translateX(-102%);transition:transform .2s ease;visibility:hidden}
  body.nav-open .topnav-menu{transform:none;visibility:visible}
  .topnav-shell nav.topnav-menu{flex-direction:column;align-items:stretch}
  .topnav-menu .nav-label{display:block;margin:16px 10px 6px;font-size:11px;letter-spacing:.06em;font-weight:600;color:var(--text-3)}
  .topnav-menu>:first-child .nav-label{margin-top:0}
  .nav-group-toggle{display:none}
  .nav-dropdown,.nav-group.open .nav-dropdown{position:static;display:flex;width:auto;transform:none;padding:0;border:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;animation:none}
  .topnav-menu>.nav-single>.nav-button,.topnav-menu .nav-dropdown .nav-button{display:flex;width:100%;height:42px;min-height:0;padding:0 10px;border-radius:10px;background:transparent;color:var(--text-2);box-shadow:none}
  .topnav-menu>.nav-single>.nav-button .icon{display:block}
  .topnav-menu .nav-dropdown .nav-button>.icon{width:17px;height:17px;padding:0;border:0;background:none}
  .topnav-menu .nav-desc{display:none}
  .topnav-menu .nav-text{font-weight:520;color:inherit}
  .topnav-menu>.nav-single>.nav-button.active,.topnav-menu .nav-dropdown .nav-button.active{background:var(--accent-soft);color:var(--text)}
  .topnav-menu>.nav-single>.nav-button.active .icon{color:var(--accent-fg)}
  .topnav-shell .sidebar-scrim{z-index:35}
  body.nav-open .topnav{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--glass-strong)}
  .topnav-menu .nav-button{justify-content:flex-start;flex:none}
  .seo-subbar{padding:0 14px}
}
@media (max-width:760px){
  .topnav{height:58px}
  .topnav-shell{--topnav-h:58px}
  .topnav-shell .page-content{padding:16px 12px 16px}
  .topnav .brand-wordmark{height:24px}
}