/* ==========================================================
   ALPHA NOCTURNE — Tema Hitam Pekat + Aksen Emas
   Token resmi ALPHA DB. Nilai variabel di sini HARUS selaras
   dengan blok :root/body.light inline di dashboard.html dan
   login.html (mereka menduplikasi token yang sama).
   ========================================================== */

:root{
  --bg1:#0a0a0a;
  --bg2:#000000;
  --card:rgba(18,16,12,.92);
  --stroke:rgba(212,175,55,.15);
  --text:#f2ead9;
  --muted:#a89873;
  --accent:#D4AF37;
  --accent2:#9C7A1E;
  --good:#34d399;
  --bad:#fb7185;
  --warn:#f59e0b;
}

body.light{
  --bg1:#E8EEF6;
  --bg2:#DEE6F0;
  --card:#F7F9FC;
  --stroke:#D0DAE6;
  --text:#1E293B;
  --muted:#64748B;
  --accent:#2563EB;
  --accent2:#1D4ED8;
}

/* ==========================================================
   Komponen generik yang dipakai lintas halaman pages/*.html
   (nama class sudah dipakai JS untuk query — jangan diganti,
   hanya di-restyle di sini)
   ========================================================== */

.card{
  border-radius:16px;
  border:1px solid var(--stroke);
  background:var(--card);
  box-shadow:0 16px 34px rgba(0,0,0,.35);
}
body.light .card{
  box-shadow:0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.02);
}

.btn, .btn2{
  border:none;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
  color:#14110a;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  transition:.15s;
}
.btn:hover, .btn2:hover{ filter:brightness(1.08); transform:translateY(-1px); }

body.light .btn, body.light .btn2{
  color:#ffffff;
  background:linear-gradient(135deg, #2563EB, #1D4ED8);
}

.badge, .chip, .pill{
  border:1px solid var(--stroke);
  background:rgba(212,175,55,.10);
  color:var(--accent);
}
body.light .badge, body.light .chip, body.light .pill{
  border-color:#E2E8F0;
  background:#EFF6FF;
  color:#2563EB;
}

.tab.active, .roleBadge.active, .fee-tab.active, .ovModeBtnModern.active, .ovPanelBtn.active, .chatTab.active{
  border-color: rgba(212,175,55,.45) !important;
  background: rgba(212,175,55,.18) !important;
  color: var(--accent) !important;
}
body.light .tab.active, body.light .roleBadge.active, body.light .fee-tab.active, body.light .ovModeBtnModern.active, body.light .ovPanelBtn.active, body.light .chatTab.active{
  border-color: rgba(37,99,235,.25) !important;
  background: #EFF6FF !important;
  color: #2563EB !important;
}

table.rTable th, table th{
  color: var(--text);
}
body.light table.rTable th, body.light table th{
  color: #475569;
}
table.rTable tbody tr:hover, .tableWrap tr:hover{
  background: rgba(212,175,55,.08) !important;
}
body.light table.rTable tbody tr:hover, body.light .tableWrap tr:hover{
  background: #F8FAFC !important;
}

.kpi-avg, .kpi-score, .kpi-point{
  color: var(--accent) !important;
}
body.light .kpi-avg, body.light .kpi-score, body.light .kpi-point{
  color: #2563EB !important;
}

::selection{
  background: rgba(212,175,55,.35);
  color: var(--text);
}
body.light ::selection{
  background: rgba(37,99,235,.2);
  color: #0F172A;
}

/* ==========================================================
   FORCE 0 TOP PADDING / MARGIN ON ALL SUBPAGE CONTAINERS
   (Guarantees headers start at exact top:0 with ZERO wobble on scroll)
   ========================================================== */
#view,
#view > *,
#view > div,
.content > *,
.content > div,
.sop-container, .sopContainer,
.sch-container, .wp-container,
.dga-container, .denomReportWrap,
.kpi-cs-page, .nx-wrapper,
.apg-wrap, .assetWrap, .asset-wrap,
.dba-wrap, .he-landing, .he-deposit, .he-withdraw,
.bank-database, .dbo-container,
.meetingWrap, .umgWrap,
.data-vault-wrap, .user-page-wrap,
.profileContainer, .lt-wrapper,
.kpi-deposit-page, .kpi-withdraw-page,
.kpi-dw-page, .apc-wrap,
.subpage-wrap, .winlose-page,
.wpd-container, .ovWrap, .container, .depWrap, .wdWrap {
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: 0 !important;
  max-width: 100% !important;
}

/* ==========================================================
   GLOBAL UNIFIED PAGE HEADER STANDARD (ALPHA DESIGN SYSTEM)
   100% ROCK-SOLID FROZEN STICKY HEADER (ZERO MOVEMENT ON SCROLL)
   ========================================================== */
.pageHeader, .page-header, .pageHead, .assetHead, .asset-head, .sop-header, .sopHeader, .apg-page-header, .nx-header, .wp-header, .sch-header, .dba-header, .he-header, .db-header, .dbo-header, .subpage-header, .wl-head, .wpd-header, .umgHeader, .dga-header, .dr-header, .kpi-header-block, .meetingHeader, .lt-header, .dvHead, .profileHeader, .ovHeadCompact, .dbo-sticky-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 0 -18px 8px -18px !important;
  padding: 0 20px 0 16px !important;
  height: 84px !important;
  min-height: 84px !important;
  box-sizing: border-box !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  background: #11141C !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}
body.light .pageHeader, body.light .page-header, body.light .pageHead, body.light .assetHead, body.light .asset-head, body.light .sop-header, body.light .sopHeader, body.light .apg-page-header, body.light .nx-header, body.light .wp-header, body.light .sch-header, body.light .dba-header, body.light .he-header, body.light .db-header, body.light .dbo-header, body.light .subpage-header, body.light .wl-head, body.light .wpd-header, body.light .umgHeader, body.light .dga-header, body.light .dr-header, body.light .kpi-header-block, body.light .meetingHeader, body.light .lt-header, body.light .dvHead, body.light .profileHeader, body.light .ovHeadCompact, body.light .dbo-sticky-top {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E2E8F0 !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.03) !important;
}

.pageHeaderLeft, .page-header-left, .apg-page-header-left, .sop-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.pageHeaderIcon, .page-icon, .apg-page-icon, .sop-page-icon, .nx-header-icon, .headerToggleBtn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #94A3B8 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
  user-select: none !important;
}
.pageHeaderIcon:hover, .page-icon:hover, .apg-page-icon:hover, .sop-page-icon:hover, .nx-header-icon:hover, .headerToggleBtn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #D4AF37 !important;
  transform: scale(1.08);
}
body.light .pageHeaderIcon, body.light .page-icon, body.light .apg-page-icon, body.light .sop-page-icon, body.light .nx-header-icon, body.light .headerToggleBtn {
  background: transparent !important;
  border: none !important;
  color: #64748B !important;
  box-shadow: none !important;
}
body.light .pageHeaderIcon:hover, body.light .page-icon:hover, body.light .apg-page-icon:hover, body.light .sop-page-icon:hover, body.light .nx-header-icon:hover, body.light .headerToggleBtn:hover {
  background: rgba(15, 23, 42, 0.05) !important;
  color: #2563EB !important;
}
.pageHeaderIcon svg, .page-icon svg, .apg-page-icon svg, .sop-page-icon svg, .nx-header-icon svg, .headerToggleBtn svg {
  width: 20px !important;
  height: 20px !important;
}

/* ==========================================================
   FULL VIEW MODE / SIDEBAR COLLAPSE
   ========================================================== */
body.sidebarCollapsed .app {
  grid-template-columns: 0px 1fr !important;
  transition: grid-template-columns 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body.sidebarCollapsed .sidebar {
  transform: translateX(-100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), padding 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.app {
  transition: grid-template-columns 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.pageEyebrow, .eyebrow, .apg-eyebrow, .sop-eyebrow, .nx-eyebrow, .apc-eyebrow, .sch-eyebrow, .profileEyebrow, .ovSectionTag, .umg-eyebrow, .dga-eyebrow, .dr-eyebrow {
  display: none !important;
}

.pageTag, .tag, .apg-tag, .sop-tag, .nx-tag, .apc-tag, .sch-tag-full, .profileTag, .sopTag, .ovTag, .dga-tag, .dr-tag {
  display: none !important;
}

.pageTitle, .page-title, .sop-title, .apg-page-title, .nx-title, .headTitle, .sopHeader h1, .profileTitle, .sch-title, .dga-title, .dr-title, .ovTitleMain {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 23px !important;
  font-weight: 850 !important;
  letter-spacing: -0.025em !important;
  color: #FFFFFF !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased !important;
}
body.light .pageTitle, body.light .page-title, body.light .sop-title, body.light .apg-page-title, body.light .nx-title, body.light .headTitle, body.light .sopHeader h1, body.light .profileTitle, body.light .sch-title, body.light .dga-title, body.light .dr-title, body.light .ovTitleMain {
  color: #0F172A !important;
}

.pageSubtitle, .pageSub, .sop-sub, .apg-page-subtitle, .nx-subtitle, .sopHeader p {
  display: none !important;
}

/* ==========================================================
   GLOBAL UNIFIED REFRESH BUTTON STANDARD (OVERVIEW STYLE)
   ========================================================== */
.ovBtnRefresh, #ovBtnRefresh, #btnApcRefresh, .btnApcRefresh, #apgBtnRefresh, .apg-btn-refresh, #refreshBtn, .btn-refresh, #btnKpiDWRefresh, #btnKpiRefresh, #btnKpiWdRefresh, .kpi-btn-refresh, #nxRefreshBtn, .nx-btn-refresh, button[id*="Refresh"], button[id*="refresh"] {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  background: rgba(212, 175, 55, 0.1) !important;
  color: #D4AF37 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-shadow: none !important;
  transition: all .2s ease !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
}
.ovBtnRefresh:hover, #ovBtnRefresh:hover, #btnApcRefresh:hover, .btnApcRefresh:hover, #apgBtnRefresh:hover, .apg-btn-refresh:hover, #refreshBtn:hover, .btn-refresh:hover, #btnKpiDWRefresh:hover, #btnKpiRefresh:hover, #btnKpiWdRefresh:hover, .kpi-btn-refresh:hover, #nxRefreshBtn:hover, .nx-btn-refresh:hover, button[id*="Refresh"]:hover, button[id*="refresh"]:hover {
  background: rgba(212, 175, 55, 0.22) !important;
  border-color: rgba(212, 175, 55, 0.6) !important;
  transform: translateY(-1px) !important;
  color: #D4AF37 !important;
}
body.light .ovBtnRefresh, body.light #ovBtnRefresh, body.light #btnApcRefresh, body.light .btnApcRefresh, body.light #apgBtnRefresh, body.light .apg-btn-refresh, body.light #refreshBtn, body.light .btn-refresh, body.light #btnKpiDWRefresh, body.light #btnKpiRefresh, body.light #btnKpiWdRefresh, body.light .kpi-btn-refresh, body.light #nxRefreshBtn, body.light .nx-btn-refresh, body.light button[id*="Refresh"], body.light button[id*="refresh"] {
  background: rgba(37, 99, 235, 0.08) !important;
  border: 1px solid rgba(37, 99, 235, 0.3) !important;
  color: #2563EB !important;
  box-shadow: none !important;
}
body.light .ovBtnRefresh:hover, body.light #ovBtnRefresh:hover, body.light #btnApcRefresh:hover, body.light .btnApcRefresh:hover, body.light #apgBtnRefresh:hover, body.light .apg-btn-refresh:hover, body.light #refreshBtn:hover, body.light .btn-refresh:hover, body.light #btnKpiDWRefresh:hover, body.light #btnKpiRefresh:hover, body.light #btnKpiWdRefresh:hover, body.light .kpi-btn-refresh:hover, body.light #nxRefreshBtn:hover, body.light .nx-btn-refresh:hover, body.light button[id*="Refresh"]:hover, body.light button[id*="refresh"]:hover {
  background: rgba(37, 99, 235, 0.15) !important;
  border-color: rgba(37, 99, 235, 0.5) !important;
  color: #2563EB !important;
}

@keyframes ovSpinAnimation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.isSpinning, svg.isSpinning, .ovBtnRefresh.isLoading svg, #btnLoadRange.isLoading svg, #btnWdLoadRange.isLoading svg {
  animation: ovSpinAnimation 0.75s linear infinite !important;
  transform-origin: center center !important;
  display: inline-block !important;
}

.ovBtnRefresh.isLoading, #btnLoadRange.isLoading, #btnWdLoadRange.isLoading {
  cursor: wait !important;
  opacity: 0.85 !important;
  pointer-events: none !important;
}

.ovBtnRefresh .spin, #btnLoadRange .spin, #btnWdLoadRange .spin {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(212, 175, 55, 0.25);
  border-top-color: #D4AF37;
  animation: ovSpinAnimation 0.7s linear infinite;
  display: none;
  margin-right: 4px;
  vertical-align: middle;
}

body.light .ovBtnRefresh .spin, body.light #btnLoadRange .spin, body.light #btnWdLoadRange .spin {
  border: 2px solid rgba(37, 99, 235, 0.25);
  border-top-color: #2563EB;
}

/* ==========================================================
   GLOBAL UNIFIED BACK BUTTON STANDARD
   ========================================================== */
.btn-back, .btnHeaderBack, .btnBack {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #94A3B8 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-shadow: none !important;
  transition: all .2s ease !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  text-decoration: none !important;
}
.btn-back:hover, .btnHeaderBack:hover, .btnBack:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-1px) !important;
}
body.light .btn-back, body.light .btnHeaderBack, body.light .btnBack {
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  color: #475569 !important;
}
body.light .btn-back:hover, body.light .btnHeaderBack:hover, body.light .btnBack:hover {
  background: #E2E8F0 !important;
  border-color: #94A3B8 !important;
  color: #0F172A !important;
}

/* ==========================================================
   GLOBAL UNIFIED DATE RANGE PILL STANDARD (OVERVIEW STYLE)
   ========================================================== */
.ovDatePillGroup, .depDatePillGroup, .dateRangePillGroup {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #181B22 !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 12px !important;
  padding: 4px 10px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
  height: 36px !important;
  box-sizing: border-box !important;
}
body.light .ovDatePillGroup, body.light .depDatePillGroup, body.light .dateRangePillGroup {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06) !important;
}

.ovDateField, .depDateField, .dateRangeField {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 2px 4px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}
.ovDateField:hover, .depDateField:hover, .dateRangeField:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}
body.light .ovDateField:hover, body.light .depDateField:hover, body.light .dateRangeField:hover {
  background: rgba(15, 23, 42, 0.04) !important;
}

.ovDateDot, .depDateDot, .dateRangeDot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #D4AF37 !important;
  box-shadow: 0 0 6px rgba(212, 175, 55, 0.5) !important;
  flex-shrink: 0 !important;
}
body.light .ovDateDot, body.light .depDateDot, body.light .dateRangeDot {
  background: #2563EB !important;
  box-shadow: 0 0 6px rgba(37, 99, 235, 0.4) !important;
}

.ovDateInputModern, .depDateInputModern, .dateRangeInputModern {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #e2e8f0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  padding: 0 !important;
  height: 24px !important;
  line-height: 24px !important;
}
body.light .ovDateInputModern, body.light .depDateInputModern, body.light .dateRangeInputModern {
  color: #0F172A !important;
}
.ovDateInputModern:focus, .depDateInputModern:focus, .dateRangeInputModern:focus {
  color: #D4AF37 !important;
}
body.light .ovDateInputModern:focus, body.light .depDateInputModern:focus, body.light .dateRangeInputModern:focus {
  color: #2563EB !important;
}
.ovDateInputModern::-webkit-calendar-picker-indicator, .depDateInputModern::-webkit-calendar-picker-indicator, .dateRangeInputModern::-webkit-calendar-picker-indicator {
  filter: invert(0.8) sepia(1) saturate(5) hue-rotate(5deg) !important;
  cursor: pointer !important;
  opacity: 0.8 !important;
  margin-left: 4px !important;
}
body.light .ovDateInputModern::-webkit-calendar-picker-indicator, body.light .depDateInputModern::-webkit-calendar-picker-indicator, body.light .dateRangeInputModern::-webkit-calendar-picker-indicator {
  filter: none !important;
}

.ovDateSep, .depDateSep, .dateRangeSep {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  user-select: none !important;
}

/* ==========================================================
   GLOBAL TOPBAR NOTIFICATION BELL & ACTIVITY LOG DROPDOWN
   ========================================================== */
.notifBellWrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 100;
}

.notifBellBtn {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: transparent !important;
  border: none !important;
  color: #94A3B8 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: none !important;
  padding: 0 !important;
}
.notifBellBtn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #D4AF37 !important;
  transform: scale(1.08);
}
body.light .notifBellBtn {
  background: transparent !important;
  border: none !important;
  color: #64748B !important;
  box-shadow: none !important;
}
body.light .notifBellBtn:hover {
  background: rgba(15, 23, 42, 0.05) !important;
  color: #2563EB !important;
}

.ovTools, .pageHeaderRight, .headerRight, .actions, .sop-header-right, .nx-header-right, .profileHeaderRight {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.notifBadge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #EF4444;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid #11141C;
  animation: pulseNotif 2s infinite;
  box-sizing: border-box;
}
body.light .notifBadge {
  border-color: #FFFFFF;
}

@keyframes pulseNotif {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); box-shadow: 0 0 10px rgba(239, 68, 68, 0.7); }
  100% { transform: scale(1); }
}



/* ==========================================================
   ANNOUNCEMENT & NOTIFICATION CENTER (PREMIUM DESIGN)
   ========================================================== */
.notifDropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 400px;
  max-width: 90vw;
  background: #11141B;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.7), 0 0 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 1000;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.notifDropdown.open {
  display: flex;
  animation: notifDropdownFade 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes notifDropdownFade {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

body.light .notifDropdown {
  background: #FFFFFF;
  border: 1px solid #D1DFED;
  border-top: 3.5px solid #0F2042;
  box-shadow: 0 20px 45px -10px rgba(15, 32, 66, 0.22), 0 0 1px rgba(15, 32, 66, 0.12);
}

.notifHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  gap: 8px;
  background: rgba(255, 255, 255, 0.015);
}
body.light .notifHeader {
  border-bottom-color: #DEE9F5;
  background: linear-gradient(180deg, #F0F5FB, #E6EFF8);
}

/* Modern Segmented Control */
.notifSegmented {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}
body.light .notifSegmented {
  background: #D8E5F3;
  border-color: #BED2E8;
}

.notifTabBtn {
  background: transparent;
  border: 1px solid transparent;
  padding: 5px 10px;
  border-radius: 6px;
  color: #94a3b8;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
  line-height: 1;
}
.notifTabBtn:hover {
  color: #ffffff;
}
body.light .notifTabBtn:hover {
  color: #0F172A;
}
.notifTabBtn.active {
  background: #1C212B;
  color: #D4AF37;
  border-color: rgba(212, 175, 55, 0.3);
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
body.light .notifTabBtn.active {
  background: #0F2042;
  color: #FFFFFF;
  border-color: #0F2042;
  box-shadow: 0 2px 6px rgba(15, 32, 66, 0.35);
}

.notifTabBadge {
  background: #ef4444;
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 999px;
  line-height: 1.2;
}

.notifHeaderActions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.notifAdminAddBtn {
  background: linear-gradient(135deg, #D4AF37, #B48B1E);
  color: #0E1015;
  border: none;
  font-size: 11px;
  font-weight: 750;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
}
.notifAdminAddBtn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
body.light .notifAdminAddBtn {
  background: linear-gradient(135deg, #1E3A8A, #0F2042);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(15, 32, 66, 0.25);
}

.notifMarkReadBtn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 6px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s;
}
.notifMarkReadBtn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}
body.light .notifMarkReadBtn:hover {
  color: #0F172A;
  background: #F1F5F9;
}

.notifCloseBtn {
  background: transparent;
  border: none;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s;
}
.notifCloseBtn:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

/* Category Filter Pills (3 Equal Grid Columns - No Overflow) */
.notifCatFilter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
body.light .notifCatFilter {
  background: #F8FAFC;
  border-bottom-color: #F1F5F9;
}

.notifCatPill {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: #94a3b8;
  padding: 5px 6px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.15s ease;
  width: 100%;
  box-sizing: border-box;
}
.notifCatPill:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
}
.notifCatPill.active {
  background: rgba(212, 175, 55, 0.15);
  color: #D4AF37;
  border-color: rgba(212, 175, 55, 0.4);
  font-weight: 700;
}
body.light .notifCatPill {
  background: #FFFFFF;
  border-color: #E2E8F0;
  color: #475569;
}
body.light .notifCatPill:hover {
  background: #F1F5F9;
  color: #0F172A;
}
body.light .notifCatPill.active {
  background: rgba(37, 99, 235, 0.1);
  color: #2563EB;
  border-color: rgba(37, 99, 235, 0.35);
  font-weight: 700;
}

.pillCount {
  background: rgba(0, 0, 0, 0.25);
  padding: 1px 5px;
  border-radius: 10px;
  font-size: 9.5px;
  font-weight: 700;
}
body.light .pillCount {
  background: rgba(0, 0, 0, 0.06);
}

/* List Items */
.notifBody {
  max-height: 380px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.notifBody::-webkit-scrollbar {
  width: 4px;
}
.notifBody::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}

.annNotifItem {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: all 0.15s ease;
  background: transparent;
}
.annNotifItem:last-child {
  border-bottom: none;
}
.annNotifItem:hover {
  background: rgba(255, 255, 255, 0.035);
}
body.light .annNotifItem {
  border-bottom-color: #F1F5F9;
}
body.light .annNotifItem:hover {
  background: #F8FAFC;
}

.annNotifIconWrap {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.annNotifContent {
  flex: 1;
  min-width: 0;
}
.annNotifMeta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}
.annNotifBadge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.annNotifDate {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
}
.annNotifTitle {
  font-size: 13px;
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1.35;
  margin-bottom: 2px;
}
body.light .annNotifTitle {
  color: #0F172A;
}
.annNotifSnippet {
  font-size: 11.5px;
  color: #94a3b8;
  line-height: 1.4;
}
body.light .annNotifSnippet {
  color: #64748b;
}
.annNotifArrow {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}
.annBtnAction {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  padding: 4px 6px;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.annBtnAction:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
.annBtnAction.danger:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.4);
}

/* Refined Empty State */
.notifEmptyState {
  padding: 40px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #64748b;
}
.notifEmptyTitle {
  font-size: 13px;
  font-weight: 650;
  color: #94a3b8;
  margin-top: 2px;
}
body.light .notifEmptyTitle {
  color: #475569;
}
.notifEmptySub {
  font-size: 11.5px;
  color: #64748b;
}
body.light .notifEmptySub {
  color: #94a3b8;
}

/* Category Badge Colors */
.cat-important { background: rgba(239, 68, 68, 0.12); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.25); }
.cat-announcement { background: rgba(212, 175, 55, 0.12); color: #D4AF37; border: 1px solid rgba(212, 175, 55, 0.3); }
.cat-updates { background: rgba(34, 197, 94, 0.12); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.25); }
body.light .cat-important { background: rgba(239, 68, 68, 0.08); color: #DC2626; border-color: rgba(239, 68, 68, 0.2); }
body.light .cat-announcement { background: rgba(37, 99, 235, 0.08); color: #2563EB; border-color: rgba(37, 99, 235, 0.2); }
body.light .cat-updates { background: rgba(22, 163, 74, 0.08); color: #16A34A; border-color: rgba(22, 163, 74, 0.2); }

/* ==========================================================
   ACTIVITY LOG ITEMS (NOTIFICATIONS BELL)
   ========================================================== */
.notifItem {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  background: transparent !important;
  transition: background 0.15s ease !important;
}
.notifItem:last-child {
  border-bottom: none !important;
}
.notifItem:hover {
  background: rgba(255, 255, 255, 0.035) !important;
}
body.light .notifItem {
  border-bottom-color: #E6EFF8 !important;
}
body.light .notifItem:hover {
  background: #F0F5FA !important;
}

.notifAvatar {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 6px rgba(15, 32, 66, 0.3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
}
body.light .notifAvatar {
  border: 2px solid #FFFFFF !important;
  box-shadow: 0 3px 8px rgba(15, 32, 66, 0.25) !important;
}

.notifItemBody {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

.notifItemHeader {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  line-height: 1.2 !important;
}

.notifUserName {
  font-size: 12.5px !important;
  font-weight: 750 !important;
  color: #FFFFFF !important;
  letter-spacing: -0.01em !important;
}
body.light .notifUserName {
  color: #0F172A !important;
  font-weight: 800 !important;
}

.notifDot {
  color: #64748B !important;
  font-size: 11px !important;
  margin: 0 1px !important;
}

.notifTime {
  color: #94A3B8 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums !important;
}
body.light .notifTime {
  color: #64748B !important;
}

.notifActionBadge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 1.5px 6px !important;
  border-radius: 4px !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  line-height: 1.2 !important;
}
.notifActionBadge.update {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #60A5FA !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
}
.notifActionBadge.insert {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #4ADE80 !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
}
.notifActionBadge.delete {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #F87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}
body.light .notifActionBadge.update {
  background: #E8F0FB !important;
  color: #0F2042 !important;
  border: 1px solid #B8D2F2 !important;
  font-weight: 800 !important;
}
body.light .notifActionBadge.insert {
  background: #F0FDF4 !important;
  color: #16A34A !important;
  border-color: #BBF7D0 !important;
}
body.light .notifActionBadge.delete {
  background: #FEF2F2 !important;
  color: #DC2626 !important;
  border-color: #FECACA !important;
}

.notifMenuBadge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 1.5px 6px !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #94A3B8 !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body.light .notifMenuBadge {
  background: #EAF0F8 !important;
  color: #1E3A8A !important;
  border: 1px solid #C8D8EB !important;
  font-weight: 700 !important;
}

.notifItemContent {
  font-size: 11.5px !important;
  line-height: 1.45 !important;
  color: #E2E8F0 !important;
  background: rgba(0, 0, 0, 0.22) !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-left: 3.5px solid #3B82F6 !important;
  word-break: break-word !important;
}
body.light .notifItemContent {
  background: #F1F6FB !important;
  color: #1E293B !important;
  border: 1px solid #D2E0EE !important;
  border-left: 3.5px solid #0F2042 !important;
}

.notifTarget {
  font-weight: 750 !important;
  color: #D4AF37 !important;
  margin-right: 4px !important;
}
body.light .notifTarget {
  color: #0F2042 !important;
  font-weight: 850 !important;
}

.notifChanges {
  color: #CBD5E1 !important;
  font-weight: 500 !important;
}
body.light .notifChanges {
  color: #334155 !important;
}

/* ==========================================================
   SLIM HORIZONTAL ANNOUNCEMENT BANNER (OVERVIEW)
   ========================================================== */
.ovAnnouncementBanner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  margin-bottom: 10px;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.12), rgba(24, 27, 34, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ovAnnouncementBanner:hover {
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.18), rgba(24, 27, 34, 0.98));
  border-color: rgba(212, 175, 55, 0.5);
  transform: translateY(-1px);
}
body.light .ovAnnouncementBanner {
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.08), #ffffff);
  border-color: rgba(37, 99, 235, 0.25);
}
body.light .ovAnnouncementBanner:hover {
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.12), #F8FAFC);
  border-color: #2563EB;
}

.ovAnnBannerLeft {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.ovAnnBannerIcon {
  font-size: 16px;
  flex-shrink: 0;
}
.ovAnnBannerBadge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(212, 175, 55, 0.2);
  color: #D4AF37;
  border: 1px solid rgba(212, 175, 55, 0.4);
  flex-shrink: 0;
}
body.light .ovAnnBannerBadge {
  background: rgba(37, 99, 235, 0.1);
  color: #2563EB;
  border-color: rgba(37, 99, 235, 0.3);
}
.ovAnnBannerTitle {
  font-size: 12.5px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.light .ovAnnBannerTitle {
  color: #0F172A;
}

.ovAnnBannerRight {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.ovAnnBannerDate {
  font-size: 11.5px;
  color: #94a3b8;
  font-weight: 500;
}
.ovAnnBannerBtn {
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: #D4AF37;
  font-size: 11.5px;
  font-weight: 750;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.ovAnnBannerBtn:hover {
  background: #D4AF37;
  color: #0E1015;
}
body.light .ovAnnBannerBtn {
  background: rgba(37, 99, 235, 0.1);
  border-color: rgba(37, 99, 235, 0.3);
  color: #2563EB;
}
body.light .ovAnnBannerBtn:hover {
  background: #2563EB;
  color: #ffffff;
}

.ovAnnBannerClose {
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
}
.ovAnnBannerClose:hover {
  color: #ef4444;
}
.ovBtnAddAnnouncement:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
body.light .ovBtnAddAnnouncement {
  background: linear-gradient(135deg, #2563EB, #1D4ED8);
  color: #ffffff;
}

.ovAnnouncementTabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow-x: auto;
}
body.light .ovAnnouncementTabs {
  border-bottom-color: #E2E8F0;
}

.ovAnnTab {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s;
}
.ovAnnTab:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
.ovAnnTab.active {
  background: #D4AF37;
  color: #0E1015;
  border-color: #D4AF37;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}
body.light .ovAnnTab {
  background: #F1F5F9;
  border-color: #CBD5E1;
  color: #475569;
}
body.light .ovAnnTab.active {
  background: #2563EB;
  color: #ffffff;
  border-color: #2563EB;
}

.ovAnnCount {
  background: rgba(0, 0, 0, 0.2);
  padding: 1px 5px;
  border-radius: 999px;
  font-size: 10px;
}
.ovAnnTab.active .ovAnnCount {
  background: rgba(0, 0, 0, 0.25);
  color: inherit;
}

.ovAnnouncementList {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ovAnnItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: all 0.15s ease;
}
.ovAnnItem:hover {
  background: rgba(212, 175, 55, 0.08);
  border-color: rgba(212, 175, 55, 0.25);
  transform: translateX(2px);
}
body.light .ovAnnItem {
  background: #F8FAFC;
  border-color: #E2E8F0;
}
body.light .ovAnnItem:hover {
  background: #EFF6FF;
  border-color: #BFDBFE;
}

.ovAnnIconWrap {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.ovAnnContent {
  flex: 1;
  min-width: 0;
}
.ovAnnMeta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.ovAnnBadge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
}
.ovAnnDate {
  font-size: 11px;
  color: #94a3b8;
}
.ovAnnTitle {
  font-size: 13px;
  font-weight: 750;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.light .ovAnnTitle {
  color: #0F172A;
}
.ovAnnArrow {
  color: #64748b;
  font-size: 16px;
  font-weight: 700;
}

.ovAnnouncementFooter {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
body.light .ovAnnouncementFooter {
  border-top-color: #E2E8F0;
}
.ovBtnShowAll {
  background: transparent;
  border: none;
  color: #D4AF37;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  padding: 4px 12px;
  border-radius: 6px;
  transition: all 0.15s;
}
.ovBtnShowAll:hover {
  background: rgba(212, 175, 55, 0.12);
}
body.light .ovBtnShowAll {
  color: #2563EB;
}
body.light .ovBtnShowAll:hover {
  background: rgba(37, 99, 235, 0.1);
}

.ovAnnEmpty {
  padding: 24px 16px;
  text-align: center;
  color: #94a3b8;
  font-size: 12.5px;
}

/* ==========================================================
   ANNOUNCEMENT MODALS
   ========================================================== */
.annModalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.annModalBox {
  background: #181B22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  width: 100%;
  max-width: 580px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}
body.light .annModalBox {
  background: #ffffff;
  border-color: #CBD5E1;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15);
}

.annModalHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.light .annModalHead {
  border-bottom-color: #E2E8F0;
}

.annModalClose {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  font-size: 14px;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  cursor: pointer;
}
.annModalClose:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.annModalBody {
  padding: 20px;
  overflow-y: auto;
}

.annModalTitle {
  font-size: 19px;
  font-weight: 850;
  color: #ffffff;
  margin: 0 0 8px;
  line-height: 1.3;
}
body.light .annModalTitle {
  color: #0F172A;
}

.annModalAuthorRow {
  font-size: 12px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.annModalText {
  font-size: 13.5px;
  color: #e2e8f0;
  line-height: 1.6;
}
body.light .annModalText {
  color: #334155;
}

.annModalFoot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.15);
}
body.light .annModalFoot {
  background: #F8FAFC;
  border-top-color: #E2E8F0;
}

.annBtnModalClose {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  padding: 7px 16px;
  border-radius: 8px;
  font-weight: 750;
  cursor: pointer;
  margin-left: auto;
}
body.light .annBtnModalClose {
  background: #E2E8F0;
  color: #0F172A;
}

.annBtnModalEdit {
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: #D4AF37;
  padding: 7px 14px;
  border-radius: 8px;
  font-weight: 750;
  cursor: pointer;
}
.annBtnModalDelete {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #ef4444;
  padding: 7px 14px;
  border-radius: 8px;
  font-weight: 750;
  cursor: pointer;
}

/* Form Modal */
.annForm {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.annFormGroup {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.annFormGroup label {
  font-size: 12px;
  font-weight: 750;
  color: #D4AF37;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
body.light .annFormGroup label {
  color: #2563EB;
}
.annFormInput, .annFormSelect, .annFormTextarea {
  background: #111318;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  padding: 9px 12px;
  color: #ffffff;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.annFormInput:focus, .annFormSelect:focus, .annFormTextarea:focus {
  border-color: #D4AF37;
}
body.light .annFormInput, body.light .annFormSelect, body.light .annFormTextarea {
  background: #F8FAFC;
  border-color: #CBD5E1;
  color: #0F172A;
}
.annBtnModalCancel {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #94a3b8;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}
.annBtnModalSave {
  background: linear-gradient(135deg, #D4AF37, #B48B1E);
  color: #0E1015;
  border: none;
  padding: 8px 18px;
  border-radius: 8px;
  font-weight: 800;
  cursor: pointer;
}
body.light .annBtnModalSave {
  background: linear-gradient(135deg, #2563EB, #1D4ED8);
  color: #ffffff;
}

/* ==========================================================
   CHAT TOGGLE FLOATING BUTTON (LIGHT MODE BIRU DONGKER)
   ========================================================== */
body.light .chatToggle, body.light #chatToggle {
  background: linear-gradient(135deg, #0B192C, #1E3E62) !important;
  box-shadow: 0 10px 30px rgba(11, 25, 44, 0.4) !important;
  border: 2px solid rgba(255, 255, 255, 0.15) !important;
}

/* ==========================================================
   REPORT DEPOSIT & WITHDRAW PANEL LOGO BUTTONS
   ========================================================== */
.depPanelBtns, .wdPanelBtns {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
}

.pbtn.p-all {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 38px !important;
  min-width: 52px !important;
  padding: 0 16px !important;
  border-radius: 9px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  background: #111318 !important;
  color: #94A3B8 !important;
  font-weight: 850 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.05em !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
}

.pbtn.p-all:hover {
  transform: translateY(-2px) !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.pbtn.p-all.active {
  background: linear-gradient(135deg, #D4AF37, #B48B1E) !important;
  color: #0E1015 !important;
  border-color: #D4AF37 !important;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.4) !important;
}

.pbtnLogo {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  border-radius: 9px !important;
  object-fit: cover !important;
  display: block !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) !important;
  border: 2px solid transparent !important;
}

.pbtnLogo:hover {
  transform: translateY(-2px) scale(1.05) !important;
  filter: brightness(1.1) !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3) !important;
}

.pbtnLogo.active {
  border: 2px solid #D4AF37 !important;
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.5), 0 4px 10px rgba(0, 0, 0, 0.3) !important;
  transform: translateY(-1px) scale(1.03) !important;
}

/* Light mode overrides */
body.light .pbtn.p-all {
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #475569 !important;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.08) !important;
}

body.light .pbtn.p-all:hover {
  background: #F8FAFC !important;
  border-color: #94A3B8 !important;
  color: #0F172A !important;
}

body.light .pbtn.p-all.active {
  background: #16202E !important;
  color: #FFFFFF !important;
  border-color: #16202E !important;
  box-shadow: 0 4px 14px rgba(22, 32, 46, 0.3) !important;
}

body.light .pbtnLogo {
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15) !important;
  border: 2px solid transparent !important;
}

body.light .pbtnLogo.active {
  border: 2.5px solid #2563EB !important;
  box-shadow: 0 0 14px rgba(37, 99, 235, 0.4), 0 4px 10px rgba(15, 23, 42, 0.15) !important;
}

/* ==========================================================
   USER PROFILE CIRCULAR FLAG BADGE
   ========================================================== */
.flagBadgeCircle {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.4) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
  margin-left: 5px !important;
  transition: transform 0.2s ease !important;
}

.flagBadgeCircle:hover {
  transform: scale(1.15) !important;
}

body.light .flagBadgeCircle {
  border-color: rgba(15, 23, 42, 0.2) !important;
  box-shadow: 0 1.5px 4px rgba(15, 23, 42, 0.15) !important;
}

/* ==========================================================
   GLOBAL LIGHT MODE UNIFIED THEME (ALL MENUS & COMPONENTS)
   Soft Matte Canvas, Dimmed Cards, Soothing Slate Typography
   ========================================================== */

/* 1. Global Cards, Panels, Box Wrappers across ALL pages */
body.light .card,
body.light .panel,
body.light .box,
body.light .tableWrap,
body.light .table-wrap,
body.light .table-container,
body.light .kpi-card,
body.light .he-card,
body.light .asset-card,
body.light .dbo-card,
body.light .umg-card,
body.light .apg-card,
body.light .dr-card,
body.light .nx-card,
body.light .sch-card,
body.light .sop-card,
body.light .kpi-box,
body.light .kpi-card-dw,
body.light .dep-panel,
body.light .wd-panel,
body.light .winlose-card,
body.light .chart-box,
body.light .chartBox,
body.light .detailItem,
body.light .statCard,
body.light .profileHero,
body.light .profileContainer,
body.light .sopContainer,
body.light .dga-card,
body.light .table-responsive,
body.light .dataTables_wrapper {
  background: #F7F9FC !important;
  border: 1px solid #D0DAE6 !important;
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04), 0 1px 2px -1px rgba(15, 23, 42, 0.03) !important;
  color: #1E293B !important;
}

/* 1b. Global Page Headers, Topbars & Header Bars */
body.light .pageHeader,
body.light .pageHead,
body.light .ovHeadCompact,
body.light .topbar,
body.light .dr-header,
body.light .he-header,
body.light .apg-header {
  background: #F7F9FC !important;
  border-bottom: 1px solid #D0DAE6 !important;
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04) !important;
}

/* 2. Global Headings & Titles */
body.light h1, body.light h2, body.light h3, body.light h4,
body.light .h1, body.light .h2, body.light .h3,
body.light .pageTitle, body.light .page-title,
body.light .cardTitle, body.light .boxTitle,
body.light .sectionTitle, body.light .panelTitle {
  color: #1E293B !important;
  font-weight: 700 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* 3. Global Tables */
body.light table,
body.light .rTable,
body.light .dataTable,
body.light .table {
  color: #334155 !important;
  border-color: #D0DAE6 !important;
}
body.light th,
body.light table th,
body.light table.rTable th,
body.light .dataTable th {
  background: #EAEFF6 !important;
  color: #475569 !important;
  border-bottom: 1px solid #D0DAE6 !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
}
body.light td,
body.light table td,
body.light table.rTable td,
body.light .dataTable td {
  border-bottom: 1px solid #EAEFF6 !important;
  color: #334155 !important;
  background: transparent !important;
  font-size: 12px !important;
}
body.light tr:hover td,
body.light table.rTable tbody tr:hover td,
body.light .tableWrap tr:hover td,
body.light .dataTable tbody tr:hover td {
  background: #EFF4FA !important;
}

/* 4. Global Inputs, Selects, Filters & Search */
body.light input:not([type="checkbox"]):not([type="radio"]),
body.light select,
body.light textarea,
body.light .form-control,
body.light .filterInput,
body.light .searchInput,
body.light .formInput,
body.light .formSelect,
body.light .formTextarea,
body.light .tableSearch,
body.light .filter-select {
  background: #DEE6F0 !important;
  border: 1px solid #D0DAE6 !important;
  color: #1E293B !important;
  border-radius: 8px !important;
}
body.light input:not([type="checkbox"]):not([type="radio"]):focus,
body.light select:focus,
body.light textarea:focus,
body.light .form-control:focus,
body.light .filterInput:focus,
body.light .searchInput:focus {
  background: #FFFFFF !important;
  border-color: #2563EB !important;
  color: #0F172A !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* 5. Global Modals & Dialogs */
body.light .modalBox,
body.light .modal-content,
body.light .popupBox,
body.light .dialogBox,
body.light .annModalBox,
body.light .custom-modal {
  background: #F7F9FC !important;
  border: 1px solid #D0DAE6 !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15) !important;
  color: #1E293B !important;
}
body.light .modalHead,
body.light .modal-header,
body.light .annModalHead,
body.light .popupHead {
  background: #EAEFF6 !important;
  border-bottom: 1px solid #D0DAE6 !important;
  color: #1E293B !important;
}
body.light .modalFoot,
body.light .modal-footer,
body.light .annModalFoot,
body.light .popupFoot {
  background: #EAEFF6 !important;
  border-top: 1px solid #D0DAE6 !important;
}

/* 6. Date Range Pickers & Modern Segmented Date Pills */
.ovDatePillGroup,
#depRangeDateBox,
#wdRangeDateBox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #11141C;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 4px 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.ovDateField {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 8px;
  background: #181B22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  pointer-events: auto;
}
.ovDateField * {
  pointer-events: none !important;
}
.ovDateField:hover {
  background: #20242D;
  border-color: #D4AF37;
  transform: translateY(-1px);
}
body.light .ovDatePillGroup,
body.light #depRangeDateBox,
body.light #wdRangeDateBox {
  background: #E8EEF5 !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}
body.light .ovDateField {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}
body.light .ovDateField:hover {
  background: #FFFFFF !important;
  border-color: #2563EB !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12) !important;
  transform: translateY(-1px);
}
.ovDateDot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #D4AF37;
  box-shadow: 0 0 6px rgba(212, 175, 55, 0.5);
  flex-shrink: 0;
}
body.light .ovDateDot {
  background: #2563eb !important;
  box-shadow: 0 0 6px rgba(37, 99, 235, 0.4) !important;
}
.ovDateText {
  color: #f1f5f9;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
}
body.light .ovDateText {
  color: #0F172A !important;
}
.ovDateHiddenInput {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  pointer-events: none !important;
}
.ovDateSep {
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
  padding: 0 2px;
}
.ovBtnRefresh {
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  background: rgba(212, 175, 55, 0.1);
  color: #D4AF37;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .2s ease;
}
.ovBtnRefresh:hover {
  background: rgba(212, 175, 55, 0.22);
  border-color: rgba(212, 175, 55, 0.6);
  transform: translateY(-1px);
}
body.light .ovBtnRefresh {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f2942 !important;
}
body.light .ovBtnRefresh:hover {
  background: #e2e8f0 !important;
  color: #0f2942 !important;
  border-color: #0f2942 !important;
}
.ovDateInputModern::-webkit-calendar-picker-indicator,
.dateRangeInputModern::-webkit-calendar-picker-indicator,
.depDateInputModern::-webkit-calendar-picker-indicator {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 7. Metric Numbers */
body.light .kpiValue,
body.light .kpi-value,
body.light .statValue,
body.light .ovKpiValue,
body.light .kpi-total-val,
body.light .cardValue,
body.light .errorTotal {
  color: #1E293B !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
}