/* ============================================================
   Coinsads — App shell layout (user + admin)
   ============================================================ */

.app-shell { display: flex; min-height: 100vh; }

/* ---------- Sidebar ---------- */
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0; background: var(--sidebar-bg);
  color: var(--sidebar-fg); display: flex; flex-direction: column;
  position: fixed; inset: 0 auto 0 0; z-index: 200; height: 100vh;
  transition: transform .3s var(--ease); border-right: 1px solid rgba(255,255,255,.05);
}
.sidebar-brand { display:flex; align-items:center; gap:11px; padding: 18px 22px; height: var(--header-h); flex-shrink:0; }
.sidebar-brand .logo-mark { width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--brand-500),var(--accent));display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-family:var(--font-display);flex-shrink:0;box-shadow:0 4px 12px -2px rgba(28,111,240,.5) }
.sidebar-brand .logo-text{font-family:var(--font-display);font-weight:800;font-size:1.2rem;color:#fff;letter-spacing:-.02em}
.sidebar-brand .logo-text span{color:var(--brand-400)}
.sidebar-nav { flex:1; overflow-y:auto; padding: 10px 12px 20px; }
.sidebar-nav::-webkit-scrollbar{width:6px}
.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border:none}
.nav-group-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.32);font-weight:700;padding:16px 14px 7px}
.nav-item { display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:var(--r-md); color:var(--sidebar-fg); font-weight:500; font-size:.92rem; margin-bottom:2px; transition: all .15s var(--ease); position:relative; cursor:pointer; }
.nav-item svg{width:20px;height:20px;flex-shrink:0;opacity:.85}
.nav-item:hover{background:var(--sidebar-hover);color:var(--sidebar-fg-active)}
.nav-item.active{background:var(--sidebar-active);color:#fff;font-weight:600;box-shadow:var(--shadow-sm)}
.nav-item.active svg{opacity:1}
.nav-item .nav-badge{margin-left:auto;background:var(--danger);color:#fff;font-size:.68rem;font-weight:700;padding:1px 7px;border-radius:99px;min-width:20px;text-align:center}
.nav-item .nav-badge.brand{background:var(--brand)}
.sidebar-foot{padding:14px;border-top:1px solid rgba(255,255,255,.06);flex-shrink:0}
.sidebar-user{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--r-md);transition:background .15s;cursor:pointer}
.sidebar-user:hover{background:var(--sidebar-hover)}
.sidebar-user .su-meta{min-width:0;flex:1}
.sidebar-user .su-name{color:#fff;font-weight:600;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-user .su-sub{color:rgba(255,255,255,.5);font-size:.76rem}

/* ---------- Main ---------- */
.main { flex:1; min-width:0; margin-left: var(--sidebar-w); display:flex; flex-direction:column; }
.topbar {
  height: var(--header-h); background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(14px); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100; display:flex; align-items:center; gap:14px;
  padding: 0 clamp(16px, 3vw, 28px);
}
.topbar .menu-btn{display:none;background:none;border:none;cursor:pointer;color:var(--text);padding:8px;border-radius:8px}
.topbar .menu-btn:hover{background:var(--surface-3)}
.topbar-title{font-family:var(--font-display);font-weight:700;font-size:1.15rem}
.topbar-spacer{flex:1}
.topbar-actions{display:flex;align-items:center;gap:8px}

.balance-pill{display:flex;align-items:center;gap:8px;background:var(--surface-3);border:1px solid var(--border);padding:7px 14px;border-radius:var(--r-full);font-weight:700;font-family:var(--font-display)}
.balance-pill svg{width:17px;height:17px;color:var(--success)}
.balance-pill .bp-label{font-size:.7rem;color:var(--text-muted);font-weight:600;text-transform:uppercase}

.icon-btn{position:relative;width:40px;height:40px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface);color:var(--text-soft);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}
.icon-btn:hover{background:var(--surface-3);color:var(--text);border-color:var(--border-strong)}
.icon-btn svg{width:20px;height:20px}
.icon-btn .badge-count{position:absolute;top:-5px;right:-5px;background:var(--danger);color:#fff;font-size:.66rem;font-weight:700;min-width:18px;height:18px;border-radius:99px;display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid var(--surface)}

.content{padding:clamp(18px,3vw,30px);flex:1;max-width:var(--maxw);width:100%;margin-inline:auto;overflow-x:hidden}

/* ---------- Dropdown ---------- */
.dropdown{position:relative}
.dropdown-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:230px;background:var(--elevated);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:7px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .2s var(--ease);z-index:300}
.dropdown.open .dropdown-menu{opacity:1;visibility:visible;transform:none}
.dropdown-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-sm);color:var(--text-soft);font-size:.9rem;font-weight:500;cursor:pointer;transition:all .12s;width:100%;text-align:left;background:none;border:none}
.dropdown-item svg{width:18px;height:18px;opacity:.7}
.dropdown-item:hover{background:var(--surface-3);color:var(--text)}
.dropdown-item.danger:hover{background:var(--danger-bg);color:var(--danger-fg)}
.dropdown-divider{height:1px;background:var(--border);margin:6px 4px}
.dropdown-head{padding:12px;border-bottom:1px solid var(--border);margin-bottom:6px}

/* notifications panel */
.notif-panel{width:min(94vw,380px);max-height:70vh;display:flex;flex-direction:column;padding:0}
.notif-list{overflow-y:auto;flex:1}
.notif-row{display:flex;gap:12px;padding:13px 14px;border-bottom:1px solid var(--border);transition:background .12s;cursor:pointer;text-align:left}
.notif-row:hover{background:var(--surface-2)}
.notif-row.unread{background:var(--brand-50)} [data-theme="dark"] .notif-row.unread{background:rgba(47,144,251,.07)}
.notif-row .nr-ico{width:36px;height:36px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.notif-row .nr-ico svg{width:18px;height:18px}
.notif-row .nr-body{flex:1;min-width:0}
.notif-row .nr-title{font-weight:600;font-size:.86rem;color:var(--text);margin-bottom:2px}
.notif-row .nr-msg{font-size:.82rem;color:var(--text-muted);line-height:1.4}
.notif-row .nr-time{font-size:.72rem;color:var(--text-muted);margin-top:4px}

/* theme toggle button */
.theme-toggle{overflow:hidden}
.theme-toggle svg{transition:transform .4s var(--ease-spring)}
.theme-toggle .sun{display:none}
[data-theme="dark"] .theme-toggle .moon{display:none}
[data-theme="dark"] .theme-toggle .sun{display:block}

/* mobile sidebar */
.sidebar-backdrop{position:fixed;inset:0;background:var(--overlay);z-index:150;opacity:0;visibility:hidden;transition:opacity .3s}
.sidebar-backdrop.open{opacity:1;visibility:visible}
@media (max-width: 1024px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:none;box-shadow:var(--shadow-lg)}
  .main{margin-left:0}
  .topbar .menu-btn{display:flex}
  .balance-pill .bp-label{display:none}
}

/* admin accent variation */
.admin-shell .sidebar-brand .logo-mark{background:linear-gradient(135deg,#0ea5e9,#6366f1)}
.admin-shell .nav-item.active{background:linear-gradient(90deg,rgba(14,165,233,.9),rgba(99,102,241,.85))}