/* ==========================================================================
   css/dashboard.css
   --------------------------------------------------------------------------
   Dashboard-only chrome: app shell, sidebar, topbar, account menu popup.
   Loaded ONLY by includes/header.php (dashboard/*.php pages) — never by
   includes/header_main.php (public frontend: index.php, login.php,
   signup.php, article.php). Kept in its own file on purpose so dashboard
   styling can evolve independently without touching the public site's
   look (see main.css for everything shared/frontend).

   Design intent: a light/white panel instead of the old dark-navy sidebar.
   Reuses the same tokens (--navy-900, --orange-*, --font-display/body)
   defined in main.css's :root, just applies them differently here.
   ========================================================================== */

.app-shell{display:flex;min-height:100vh;background:var(--bg-section-alt)}

/* ---------- Sidebar (white panel) ---------- */
.sidebar{
  width:var(--sidebar-width);flex-shrink:0;background:var(--white);position:fixed;top:0;left:0;bottom:0;
  z-index:50;overflow-y:auto;overflow-x:hidden;transition:width .22s ease,transform .22s ease;
  border-right:1px solid var(--border-subtle);
}
.sidebar-inner{display:flex;flex-direction:column;min-height:100%;width:var(--sidebar-width)}
.sidebar-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:18px 16px;border-bottom:1px solid var(--border-subtle)}
.sidebar-brand{display:flex;align-items:center;gap:10px;color:var(--text-primary);min-width:0}
.sidebar-brand-mark{
  flex:0 0 32px;width:32px;height:32px;border-radius:9px;background:var(--accent);color:var(--accent-text-on);
  font-family:var(--font-display);font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;
}
.sidebar-brand-text{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-collapse-btn{color:var(--text-tertiary)}
.sidebar-collapse-btn:hover{color:var(--text-primary);background:var(--gray-050)}

.sidebar-nav{padding:8px 12px;flex:1}
.sidebar-nav-label{
  font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:var(--tracking-wide);
  text-transform:uppercase;color:var(--text-tertiary);padding:14px 12px 8px;white-space:nowrap;
}
.sidebar-link{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--radius-md);
  color:var(--text-secondary);font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;
  margin-bottom:2px;white-space:nowrap;overflow:hidden;
}
.sidebar-link:hover{background:var(--gray-050);color:var(--text-primary)}
.sidebar-link.active{background:var(--orange-050);color:var(--orange-700)}
.sidebar-link-icon{flex:0 0 20px;width:20px;height:20px;display:flex;align-items:center;justify-content:center}
.sidebar-link-icon svg{width:20px;height:20px}
.sidebar-link-text{overflow:hidden;text-overflow:ellipsis}
.sidebar-link--top{margin-bottom:8px;padding-bottom:11px;border-bottom:1px solid var(--border-subtle)}

.sidebar-footer{padding:12px;border-top:1px solid var(--border-subtle)}

.sidebar-auth{display:flex;flex-direction:column;gap:8px;padding:4px}
.sidebar-auth .btn{width:100%}

.sidebar-overlay{
  display:none;position:fixed;inset:0;background:rgba(13,19,26,0.55);border:none;padding:0;z-index:40;
}

.main-col{flex:1;min-width:0;margin-left:var(--sidebar-width);display:flex;flex-direction:column;transition:margin-left .22s ease}

/* Desktop collapsed state */
.app-shell.sidebar-collapsed .sidebar{width:var(--sidebar-width-collapsed)}
.app-shell.sidebar-collapsed .sidebar-inner{width:var(--sidebar-width-collapsed)}
.app-shell.sidebar-collapsed .sidebar-brand-text,
.app-shell.sidebar-collapsed .sidebar-link-text,
.app-shell.sidebar-collapsed .sidebar-nav-label,
.app-shell.sidebar-collapsed .sidebar-footer{display:none}
.app-shell.sidebar-collapsed .sidebar-header{justify-content:center}
.app-shell.sidebar-collapsed .sidebar-collapse-btn{display:none}
.app-shell.sidebar-collapsed .sidebar-link{justify-content:center;padding:11px}
.app-shell.sidebar-collapsed .main-col{margin-left:var(--sidebar-width-collapsed)}
.app-shell.sidebar-collapsed .chat-composer-fixed{left:var(--sidebar-width-collapsed)}

/* ---------- Topbar (white) ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px;
  background:var(--white);color:var(--text-primary);position:sticky;top:0;z-index:20;
  border-bottom:1px solid var(--border-subtle);
}
.topbar-left{display:flex;align-items:center;gap:10px;min-width:0}
.topbar-menu-btn{display:flex;color:var(--text-primary)}
.topbar-menu-btn:hover{background:var(--gray-050)}
.topbar-wordmark{
  font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--text-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.topbar .lang-switch--topbar{background:var(--gray-050)}
.topbar .lang-switch--topbar .lang-btn{color:var(--text-tertiary)}
.topbar .lang-switch--topbar .lang-btn.active{background:var(--white);color:var(--text-primary);box-shadow:var(--shadow-card)}

.page{flex:1;background:var(--bg-section-alt)}

/* ==========================================================================
   Account menu ("Claude tarzı" alt-sol popup: Profil / İşlem Geçmişi / Yardım / Çıkış)
   ========================================================================== */
.account-menu{position:relative}

.account-menu-trigger{
  display:flex;align-items:center;gap:10px;width:100%;padding:8px;border:none;background:none;cursor:pointer;
  border-radius:var(--radius-md);text-align:left;transition:background-color .15s ease;
}
.account-menu-trigger:hover{background:var(--gray-050)}
.account-menu-trigger[aria-expanded="true"]{background:var(--gray-050)}

.account-avatar{
  flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:var(--navy-900);color:var(--white);
  font-family:var(--font-display);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;
}
.account-meta{flex:1;min-width:0}
.account-name{
  display:block;font-family:var(--font-body);font-weight:600;font-size:13px;color:var(--text-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.account-sub{
  display:block;font-family:var(--font-body);font-size:11.5px;color:var(--text-tertiary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.account-chevron{flex:0 0 16px;width:16px;height:16px;color:var(--text-tertiary);display:flex}
.account-chevron svg{width:16px;height:16px}

.account-menu-popup{
  display:none;position:absolute;left:0;bottom:calc(100% + 8px);width:100%;min-width:220px;
  background:var(--white);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-modal, 0 12px 32px rgba(19,25,33,0.16));padding:6px;z-index:60;
}
.account-menu-popup.open{display:block}

/* ── Kredi widget'ı (popup'ın en üstü) ───────────────────── */
.account-credits{padding:14px 12px 12px}
.account-credits-label{
  font-family:var(--font-display);font-size:10.5px;font-weight:800;letter-spacing:var(--tracking-wide);
  text-transform:uppercase;color:var(--text-tertiary);margin-bottom:10px;
}
.account-credits-row{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.account-credits-icon{
  flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:var(--orange-050);color:var(--orange-600);
  display:flex;align-items:center;justify-content:center;
}
.account-credits-icon svg{width:17px;height:17px}
.account-credits-num{font-family:var(--font-display);font-weight:800;font-size:26px;color:var(--text-primary);letter-spacing:var(--tracking-tight)}
.account-credits-cta{display:flex;align-items:center;justify-content:center;gap:6px}
.account-credits-cta svg{width:14px;height:14px}

.account-menu-item{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:none;background:none;cursor:pointer;
  border-radius:var(--radius-md);font-family:var(--font-body);font-size:13.5px;font-weight:600;color:var(--text-secondary);
  text-align:left;transition:background-color .15s ease,color .15s ease;
}
.account-menu-item:hover{background:var(--gray-050);color:var(--text-primary)}
.account-menu-item--danger{color:var(--error-600)}
.account-menu-item--danger:hover{background:var(--error-100);color:var(--error-600)}
.account-menu-item-icon{flex:0 0 16px;width:16px;height:16px;display:flex;color:var(--text-tertiary)}
.account-menu-item-icon svg{width:16px;height:16px}
.account-menu-item--danger .account-menu-item-icon{color:var(--error-600)}

.account-menu-sep{height:1px;background:var(--border-subtle);margin:6px 4px}

/* Collapsed sidebar: icon-only account trigger, hide popup content labels via
   the trigger's own meta/chevron (popup itself still shows full labels when opened) */
.app-shell.sidebar-collapsed .account-meta,
.app-shell.sidebar-collapsed .account-chevron{display:none}
.app-shell.sidebar-collapsed .account-menu-trigger{justify-content:center;padding:8px 0}
.app-shell.sidebar-collapsed .account-menu-popup{left:8px;bottom:calc(100% + 8px);width:220px}

/* ---------- Responsive (mobile drawer) ---------- */
@media(max-width:900px){
  .sidebar{transform:translateX(-100%);z-index:60}
  .app-shell.sidebar-mobile-open .sidebar{transform:translateX(0)}
  .app-shell.sidebar-mobile-open .sidebar-overlay{display:block}
  .app-shell.sidebar-collapsed .sidebar{width:var(--sidebar-width)}
  .app-shell.sidebar-collapsed .sidebar-inner{width:var(--sidebar-width)}
  .app-shell.sidebar-collapsed .sidebar-brand-text,
  .app-shell.sidebar-collapsed .sidebar-link-text,
  .app-shell.sidebar-collapsed .sidebar-nav-label,
  .app-shell.sidebar-collapsed .sidebar-footer{display:block}
  .app-shell.sidebar-collapsed .sidebar-header{justify-content:space-between}
  .app-shell.sidebar-collapsed .sidebar-link{justify-content:flex-start;padding:11px 12px}
  .app-shell.sidebar-collapsed .account-meta,
  .app-shell.sidebar-collapsed .account-chevron{display:block}
  .app-shell.sidebar-collapsed .account-menu-trigger{justify-content:flex-start;padding:8px}

  .main-col,
  .app-shell.sidebar-collapsed .main-col{margin-left:0}
  .topbar-menu-btn{display:flex}
  .lang-switch--topbar{display:inline-flex}
}