/* Sidebar-only premium layer
   The user preferred the redesigned sidebar, so this file intentionally avoids
   changing dashboard cards, content pages, modals, tables, or page structure. */

:root {
  --sidebar-w: 272px;
  --premium-ink: #0f172a;
  --premium-muted: #64748b;
  --premium-soft: #f8fafc;
  --premium-line: rgba(15, 23, 42, .08);
  --premium-brand: #2563eb;
  --premium-accent: #14b8a6;
}

/* Professional top bar */
.topnav {
  height: 72px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .94)) !important;
  border-bottom: 1px solid var(--premium-line) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .055) !important;
  padding: 0 22px 0 0 !important;
  z-index: 360 !important;
}

.tn-logo {
  width: var(--sidebar-w) !important;
  padding: 0 16px !important;
  border-right: 1px solid var(--premium-line) !important;
  position: relative;
  background:
    linear-gradient(180deg, #fff, #f8fbff) !important;
  justify-content: flex-start !important;
  gap: 10px;
}

.tn-logo::after {
  display: none !important;
  content: none !important;
}

.tn-logo img {
  height: 62px !important;
  width: 232px !important;
  min-width: 232px !important;
  max-width: 232px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  filter: none !important;
}

.tn-page {
  padding-left: 30px !important;
  gap: 12px !important;
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--premium-ink) !important;
  letter-spacing: -.02em;
}

.tn-page .pg-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(37, 99, 235, .11), rgba(20, 184, 166, .11)) !important;
  border: 1px solid rgba(37, 99, 235, .14);
  color: var(--premium-brand) !important;
}

.tn-right {
  gap: 10px !important;
  padding-right: 4px !important;
}

.tn-notif {
  width: 40px !important;
  height: 40px !important;
  border-radius: 13px !important;
  background: #fff !important;
  border: 1px solid rgba(15, 23, 42, .1) !important;
  color: var(--premium-muted) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .06) !important;
  overflow: visible !important;
}

.tn-notif:hover {
  color: var(--premium-brand) !important;
  border-color: rgba(37, 99, 235, .24) !important;
  background: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, .09) !important;
}

.tn-user {
  min-height: 44px;
  padding: 6px 12px 6px 6px !important;
  border-radius: 15px !important;
  background: #fff !important;
  border: 1px solid rgba(15, 23, 42, .1) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .06) !important;
}

.tn-user:hover {
  background: #fff !important;
  border-color: rgba(37, 99, 235, .2) !important;
  transform: translateY(-1px);
}

.tn-av {
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  font-weight: 850 !important;
  background: linear-gradient(135deg, var(--premium-brand), #0f766e) !important;
}

.tn-uname {
  color: var(--premium-ink) !important;
  font-weight: 850 !important;
}

.tn-urole {
  color: #94a3b8 !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
}

.ndot {
  display: none;
}

.tn-notif .ndot,
#notifDot,
#chatDot,
#reminderDot {
  position: absolute !important;
  top: -5px !important;
  right: -5px !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: #dc2626 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: 0 8px 18px rgba(220, 38, 38, .32) !important;
  font-size: 9px !important;
  line-height: 14px !important;
  font-weight: 900 !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
  letter-spacing: 0 !important;
}

#notifBtn.has-unread {
  color: #dc2626 !important;
  border-color: rgba(220, 38, 38, .28) !important;
  background: #fff7f7 !important;
}

#notifBtn.has-unread svg {
  filter: drop-shadow(0 4px 8px rgba(220, 38, 38, .18));
}

#notifPanel {
  top: 76px !important;
  right: 72px !important;
  width: 390px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(15, 23, 42, .1) !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .18) !important;
}

.sidebar {
  width: var(--sidebar-w) !important;
  padding: 16px 14px !important;
  background:
    linear-gradient(180deg, rgba(7, 15, 25, .97), rgba(9, 13, 21, .94)),
    radial-gradient(circle at 12% 0%, rgba(20, 184, 166, .14), transparent 28%) !important;
  border-right: 1px solid rgba(255, 255, 255, .08) !important;
  backdrop-filter: blur(16px) saturate(135%);
  box-shadow: 8px 0 30px rgba(15, 23, 42, .035);
}

#cfPickerWrap {
  min-height: 36px !important;
  margin: 0 0 10px !important;
  padding: 7px 9px !important;
  gap: 6px !important;
  border-radius: 11px !important;
  box-shadow: 0 8px 16px rgba(15, 23, 42, .035) !important;
}

#cfPickerWrap svg {
  width: 12px !important;
  height: 12px !important;
}

#cfPickerWrap span {
  font-size: 9px !important;
  letter-spacing: .06em !important;
}

#cfPicker {
  font-size: 11px !important;
  padding: 1px 2px !important;
}

.sidebar::before {
  display: none !important;
}

.sb-section {
  padding: 8px 0 4px !important;
}

.sb-section-label {
  padding: 10px 12px 8px !important;
  color: #94a3b8 !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
}

.sb-item {
  min-height: 42px;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  color: rgba(203, 213, 225, .75) !important;
  font-size: 13px !important;
  font-weight: 720 !important;
  margin-bottom: 4px !important;
  transition: transform .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease !important;
}

.sb-item:hover {
  color: #f1f5f9 !important;
  background: rgba(255, 255, 255, .08) !important;
  transform: translateX(2px);
}

.sb-item.active {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(37, 99, 235, .28), rgba(20, 184, 166, .2)) !important;
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, .35), 0 12px 26px rgba(37, 99, 235, .1) !important;
}

.sb-item.active::before {
  left: -14px !important;
  top: 9px !important;
  bottom: 9px !important;
  width: 4px !important;
  background: linear-gradient(180deg, var(--premium-brand), var(--premium-accent)) !important;
  border-radius: 0 999px 999px 0 !important;
  box-shadow: none !important;
}

.sb-ico {
  width: 22px !important;
  color: currentColor;
}

.sb-badge {
  min-width: 26px;
  text-align: center;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .1) !important;
  color: rgba(203, 213, 225, .8) !important;
}

.sb-item.active .sb-badge {
  background: rgba(59, 130, 246, .25) !important;
  color: #93c5fd !important;
}

.sb-divider {
  background: rgba(255, 255, 255, .08) !important;
  margin: 10px 4px !important;
}

.sb-bottom {
  padding: 16px 0 0 !important;
  border-top: 1px solid var(--premium-line) !important;
}

.lang-switcher {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 12px !important;
  padding: 4px !important;
  margin: 0 0 14px !important;
}

.lang-btn {
  height: 30px;
  border-radius: 9px !important;
  color: rgba(203,213,225,0.7) !important;
}

.lang-btn.active {
  background: rgba(37,99,235,0.35) !important;
  color: #e0edff !important;
  box-shadow: 0 2px 8px rgba(37,99,235,0.25) !important;
}

.sb-user-card {
  border-radius: 14px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .58)),
    linear-gradient(135deg, rgba(37, 99, 235, .08), rgba(20, 184, 166, .08)) !important;
  border: 1px solid var(--premium-line) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.sbu-av {
  border-radius: 11px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .2), transparent),
    linear-gradient(135deg, var(--premium-brand), #0f766e) !important;
  box-shadow: 0 12px 28px rgba(37, 99, 235, .18);
}

.sbu-name {
  color: var(--premium-ink) !important;
  font-weight: 800 !important;
}

.sbu-role {
  color: #94a3b8 !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
}

.sbu-dot {
  background: #10b981 !important;
}

/* Dashboard-only color upgrade */
#page-dashboard .page-scroll {
  background: linear-gradient(180deg, #ffffff 0%, #f6f8fb 55%, #eef2f7 100%) !important;
}

#page-dashboard .dash2-header {
  position: relative;
  overflow: hidden;
  padding: 28px 32px !important;
  background: #fff !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .065) !important;
}

#page-dashboard .dash2-header::before {
  display: none !important;
  content: none !important;
}

#page-dashboard .dash2-header::after {
  display: none !important;
  content: none !important;
}

#page-dashboard .dash2-header > * {
  position: relative;
  z-index: 1;
}

#page-dashboard .dash2-title,
#page-dashboard .dash2-subtitle,
#page-dashboard .dash2-meta-value {
  color: #0f172a !important;
}

#page-dashboard .dash2-subtitle,
#page-dashboard .dash2-meta-label {
  color: #64748b !important;
}

#page-dashboard .dash2-header-meta {
  background: rgba(255, 255, 255, .78) !important;
  border-color: rgba(37, 99, 235, .14) !important;
  backdrop-filter: blur(12px);
}

#page-dashboard .dash2-kpi:nth-child(1) {
  background: linear-gradient(135deg, #ecfeff, #eff6ff) !important;
  border-color: #bae6fd !important;
}

#page-dashboard .dash2-kpi:nth-child(2) {
  background: linear-gradient(135deg, #f5f3ff, #eff6ff) !important;
  border-color: #ddd6fe !important;
}

#page-dashboard .dash2-kpi:nth-child(3) {
  background: linear-gradient(135deg, #fff7ed, #fef3c7) !important;
  border-color: #fed7aa !important;
}

#page-dashboard .dash2-kpi:nth-child(4) {
  background: linear-gradient(135deg, #f0fdf4, #ecfeff) !important;
  border-color: #bbf7d0 !important;
}

#page-dashboard .dash2-kpi {
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .08) !important;
}

#page-dashboard .dash2-kpi::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #2563eb, #14b8a6);
  opacity: .75;
}

#page-dashboard .dash2-kpi:nth-child(2)::before {
  background: linear-gradient(90deg, #6366f1, #2563eb);
}

#page-dashboard .dash2-kpi:nth-child(3)::before {
  background: linear-gradient(90deg, #f59e0b, #ef4444);
}

#page-dashboard .dash2-kpi:nth-child(4)::before {
  background: linear-gradient(90deg, #10b981, #06b6d4);
}

#page-dashboard .dash2-card {
  border-color: rgba(37, 99, 235, .12) !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .08) !important;
}

#page-dashboard .dash2-card-kicker {
  color: #2563eb !important;
}

#page-dashboard .dash2-empty {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  padding: 18px 20px !important;
  color: #334155 !important;
  background: #f8fafc !important;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 12px;
  font-size: 13px !important;
  font-weight: 750 !important;
}

@media (max-width: 860px) {
  :root { --sidebar-w: 236px; }

  .tn-logo {
    width: var(--sidebar-w) !important;
    padding: 0 16px !important;
  }

  .tn-logo::after {
    display: none;
  }

  .tn-logo img {
    height: 44px !important;
    width: 170px !important;
    min-width: 170px !important;
    max-width: 170px !important;
  }

  .sidebar {
    width: var(--sidebar-w) !important;
  }
}