/* SH 1 - BACAGRATIS HEADER DROPDOWN + DARK MODE V2 */

:root{
  color-scheme:light;
  --bg:#f8fafc;
  --surface:#ffffff;
  --surface-2:#f1f5f9;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e2e8f0;
  --primary:#2563eb;
  --primary-2:#1d4ed8;
  --primary-soft:#eff6ff;
  --danger:#dc2626;
  --danger-soft:#fef2f2;
  --shadow-menu:0 28px 80px rgba(15,23,42,.18);
}

html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#08111f;
  --surface:#0f172a;
  --surface-2:#111c2f;
  --text:#e5eefb;
  --muted:#94a3b8;
  --line:#243449;
  --primary:#60a5fa;
  --primary-2:#3b82f6;
  --primary-soft:#10213a;
  --danger:#f87171;
  --danger-soft:#32161a;
  --shadow-menu:0 28px 80px rgba(0,0,0,.48);
}

html[data-theme="dark"] body{
  background:
    radial-gradient(circle at top left, rgba(96,165,250,.12), transparent 340px),
    linear-gradient(180deg,#0b1220 0%,#08111f 42%,#0b1220 100%)!important;
  color:var(--text)!important;
}

html[data-theme="dark"] .site-header,
html[data-theme="dark"] .header,
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .main-header{
  background:rgba(15,23,42,.86)!important;
  border-bottom-color:var(--line)!important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .book-card,
html[data-theme="dark"] .category-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .admin-sidebar,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .admin-account-box{
  background:var(--surface)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}

html[data-theme="dark"] .book-meta,
html[data-theme="dark"] .meta,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .help-text,
html[data-theme="dark"] p{
  color:var(--muted);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .input{
  background:#0b1220!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}

html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .secondary{
  background:#0b1220!important;
  color:var(--primary)!important;
  border-color:var(--line)!important;
}

.account-nav-v2{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
}

.theme-toggle-v2{
  min-height:42px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
  color:var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 13px;
  font-weight:850;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(15,23,42,.05);
}

.theme-toggle-v2:hover{
  color:var(--primary);
  border-color:rgba(37,99,235,.35);
  background:var(--primary-soft);
}

.theme-toggle-icon-wrap{
  width:22px;
  height:22px;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.theme-icon{
  width:20px;
  height:20px;
  position:absolute;
  inset:1px;
  transition:opacity .18s ease, transform .18s ease;
}

.theme-icon-sun{
  opacity:0;
  transform:scale(.72) rotate(-25deg);
}

html[data-theme="dark"] .theme-icon-moon{
  opacity:0;
  transform:scale(.72) rotate(25deg);
}

html[data-theme="dark"] .theme-icon-sun{
  opacity:1;
  transform:scale(1) rotate(0);
}

.theme-toggle-label{
  font-size:13px;
}

.account-login-link-v2{
  color:var(--text);
  font-weight:800;
  text-decoration:none;
}

.account-register-btn-v2{
  min-height:40px!important;
  padding:0 16px!important;
}

.account-dropdown-v2{
  position:relative;
  z-index:120;
}

.account-trigger-v2{
  min-height:44px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text);
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:4px 12px 4px 5px;
  cursor:pointer;
  font-weight:850;
  box-shadow:0 8px 24px rgba(15,23,42,.06);
}

.account-trigger-v2:hover,
.account-dropdown-v2.open .account-trigger-v2{
  border-color:rgba(37,99,235,.35);
  background:var(--primary-soft);
  color:var(--primary);
}

.account-avatar-v2{
  width:34px;
  height:34px;
  border-radius:999px;
  object-fit:cover;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border:1px solid rgba(37,99,235,.22);
}

.account-avatar-fallback-v2{
  background:linear-gradient(135deg,#2563eb,#60a5fa);
  color:#fff;
  font-weight:900;
}

.account-trigger-name-v2{
  max-width:130px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.account-chevron-v2{
  width:18px;
  height:18px;
  transition:transform .18s ease;
}

.account-dropdown-v2.open .account-chevron-v2{
  transform:rotate(180deg);
}

.account-menu-v2{
  position:absolute;
  top:calc(100% + 12px);
  right:0;
  width:min(340px,calc(100vw - 28px));
  padding:12px;
  border-radius:24px;
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--line);
  box-shadow:var(--shadow-menu);
  opacity:0;
  transform:translateY(-8px) scale(.98);
  pointer-events:none;
  transition:.18s ease;
}

.account-dropdown-v2.open .account-menu-v2{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

.account-menu-head-v2{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:18px;
  background:var(--primary-soft);
  margin-bottom:10px;
}

.account-menu-avatar-v2{
  width:54px;
  height:54px;
  border-radius:18px;
  object-fit:cover;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  font-size:20px;
}

.account-menu-identity-v2{
  min-width:0;
}

.account-menu-identity-v2 strong,
.account-menu-identity-v2 small,
.account-menu-identity-v2 em{
  display:block;
}

.account-menu-identity-v2 strong{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.account-menu-identity-v2 small{
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.account-menu-identity-v2 em{
  margin-top:4px;
  font-size:12px;
  font-style:normal;
  font-weight:850;
  color:var(--primary);
}

.account-menu-group-v2{
  padding:6px 0;
  border-bottom:1px solid var(--line);
}

.account-menu-group-v2 a,
.account-logout-form-v2 button{
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  gap:10px;
  border-radius:14px;
  padding:0 11px;
  color:var(--text);
  text-decoration:none;
  font-weight:780;
  background:transparent;
  border:0;
  cursor:pointer;
  text-align:left;
}

.account-menu-group-v2 a:hover{
  background:var(--primary-soft);
  color:var(--primary);
}

.account-menu-group-v2 svg,
.account-logout-form-v2 svg{
  width:20px;
  height:20px;
  flex:0 0 auto;
}

.account-menu-theme-row-v2{
  padding:10px 0;
}

.account-menu-theme-row-v2 .theme-toggle-v2{
  width:100%;
  justify-content:flex-start;
  box-shadow:none;
}

.account-logout-form-v2{
  margin:8px 0 0;
}

.account-logout-form-v2 button{
  color:var(--danger);
  background:var(--danger-soft);
  justify-content:flex-start;
}

.admin-topbar-v2{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 0 24px;
  margin-bottom:2px;
}

.admin-topbar-title-v2 span{
  display:block;
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:850;
}

.admin-topbar-title-v2 strong{
  display:block;
  font-size:20px;
  letter-spacing:-.035em;
  color:var(--text);
}

.admin-topbar-actions-v2{
  display:flex;
  align-items:center;
  gap:12px;
}

html[data-theme="dark"] .admin-main,
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .admin-shell,
html[data-theme="dark"] .dashboard-layout{
  background:#08111f!important;
  color:var(--text)!important;
}

html[data-theme="dark"] table,
html[data-theme="dark"] th,
html[data-theme="dark"] td{
  color:var(--text);
  border-color:var(--line)!important;
}

html[data-theme="dark"] th{
  background:#101b2e!important;
  color:var(--muted)!important;
}

html[data-theme="dark"] .footer,
html[data-theme="dark"] .site-footer{
  background:var(--surface)!important;
  border-color:var(--line)!important;
}

@media(max-width:760px){
  .account-nav-v2{
    width:100%;
    justify-content:flex-start;
    gap:10px;
  }

  .theme-toggle-label,
  .account-trigger-name-v2{
    display:none;
  }

  .theme-toggle-v2{
    width:42px;
    padding:0;
  }

  .account-trigger-v2{
    padding:4px 8px 4px 4px;
  }

  .account-menu-v2{
    left:0;
    right:auto;
    width:min(340px,calc(100vw - 28px));
  }

  .admin-topbar-v2{
    flex-direction:column;
    align-items:flex-start;
  }

  .admin-topbar-actions-v2{
    width:100%;
    justify-content:flex-start;
  }
}