/* =========================================================
   JOM SILAT MODERN UI V1.1 SAFE
   Modern sidebar + manual light/dark theme
   ========================================================= */

:root {
  --jm11-bg: #f5f7fb;
  --jm11-card: #ffffff;
  --jm11-text: #0f172a;
  --jm11-muted: #64748b;
  --jm11-border: #e5e7eb;
  --jm11-sidebar: #ffffff;
  --jm11-sidebar-text: #111827;
  --jm11-sidebar-muted: #64748b;
  --jm11-active: #4f46e5;
  --jm11-active-soft: #eef2ff;
  --jm11-icon-bg: #f1f5f9;
  --jm11-shadow: 0 12px 28px rgba(15,23,42,.07);
}

html[data-theme="dark"] {
  --jm11-bg: #070b14;
  --jm11-card: #111827;
  --jm11-text: #e5e7eb;
  --jm11-muted: #94a3b8;
  --jm11-border: #1f2937;
  --jm11-sidebar: #090d18;
  --jm11-sidebar-text: #f8fafc;
  --jm11-sidebar-muted: #94a3b8;
  --jm11-active: #8b5cf6;
  --jm11-active-soft: rgba(124,58,237,.18);
  --jm11-icon-bg: #1f2937;
  --jm11-shadow: 0 12px 28px rgba(0,0,0,.30);
}

html,
body {
  background: var(--jm11-bg) !important;
  color: var(--jm11-text) !important;
}

.main,
.content,
.page,
.page-content,
.dashboard,
.dashboard-content,
main {
  background: var(--jm11-bg) !important;
  color: var(--jm11-text) !important;
}

/* Actual JOM SILAT sidebar uses .nav */
.nav,
.sidebar,
.side-nav,
.sidenav,
.drawer,
.nav-drawer,
.mobile-drawer,
aside {
  background: var(--jm11-sidebar) !important;
  color: var(--jm11-sidebar-text) !important;
  border-right: 1px solid var(--jm11-border) !important;
  box-shadow: 8px 0 28px rgba(15,23,42,.06) !important;
}

/* Brand */
.nav-title,
.brand-text,
.nav .brand-text,
.sidebar h1,
.sidebar h2,
.sidebar h3,
.sidebar .brand,
.sidebar .logo,
.side-nav h1,
.side-nav h2,
.sidenav h1,
.sidenav h2,
aside h1,
aside h2 {
  color: var(--jm11-sidebar-text) !important;
  font-weight: 950 !important;
  letter-spacing: .4px !important;
}

/* JOM SILAT brand parts */
.brand-jom,
.brand-silat {
  color: var(--jm11-sidebar-text) !important;
}

/* Subtitle / group labels */
.nav-sub,
.nav-group-title,
.sidebar small,
.sidebar .small,
.sidebar .muted,
.sidebar .section-label,
.sidebar .menu-label,
.side-nav small,
.sidenav small,
aside small {
  color: var(--jm11-sidebar-muted) !important;
  opacity: 1 !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  letter-spacing: .7px !important;
  text-transform: uppercase !important;
}

/* Sidebar account card */
.direct-account-v28,
.nav .direct-account-v28,
.sidebar .account,
.sidebar .profile,
.sidebar .user-card,
.sidebar .user-box,
.sidebar .bottom,
.side-nav .account,
.sidenav .account,
aside .account {
  background: rgba(148,163,184,.10) !important;
  border: 1px solid var(--jm11-border) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}

/* Sidebar links */
.nav a,
.nav-link,
.sidebar a,
.side-nav a,
.sidenav a,
.drawer a,
.nav-drawer a,
.mobile-drawer a,
aside a {
  color: var(--jm11-sidebar-text) !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  transition: all .18s ease !important;
}

/* Sidebar link hover */
.nav a:hover,
.nav-link:hover,
.sidebar a:hover,
.side-nav a:hover,
.sidenav a:hover,
.drawer a:hover,
.nav-drawer a:hover,
.mobile-drawer a:hover,
aside a:hover {
  background: var(--jm11-active-soft) !important;
  color: var(--jm11-active) !important;
  transform: translateX(2px) !important;
}

/* Active */
.nav a.active,
.nav .active,
.nav-link.active,
.sidebar a.active,
.sidebar .active,
.side-nav a.active,
.side-nav .active,
.sidenav a.active,
.sidenav .active,
.drawer a.active,
.drawer .active,
.nav-drawer a.active,
.nav-drawer .active,
aside a.active,
aside .active {
  background: var(--jm11-active-soft) !important;
  color: var(--jm11-active) !important;
  border: 1px solid rgba(79,70,229,.18) !important;
  box-shadow: 0 10px 22px rgba(79,70,229,.10) !important;
}

/* Icon badge */
.nav a span:first-child,
.nav-link span:first-child,
.sidebar a span:first-child,
.side-nav a span:first-child,
.sidenav a span:first-child,
.drawer a span:first-child,
.nav-drawer a span:first-child,
aside a span:first-child {
  min-width: 30px !important;
  min-height: 30px !important;
  border-radius: 11px !important;
  background: var(--jm11-icon-bg) !important;
  color: var(--jm11-muted) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Cards */
.card,
.panel,
.box,
.dashboard-card,
.summary-card,
.stat-card,
.metric-card,
section,
article {
  background: var(--jm11-card) !important;
  color: var(--jm11-text) !important;
  border: 1px solid var(--jm11-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--jm11-shadow) !important;
}

/* Typography */
h1, h2, h3, h4, h5, h6,
.card h1, .card h2, .card h3,
.panel h1, .panel h2, .panel h3,
.box h1, .box h2, .box h3,
.stat-value,
.metric-value,
.amount,
.big-number,
.dashboard-number,
strong {
  color: var(--jm11-text) !important;
}

p,
.small,
.muted,
.text-muted,
.card p,
.panel p,
.box p,
section p {
  color: var(--jm11-muted) !important;
}

/* Inputs */
input,
select,
textarea,
.form-control {
  background: var(--jm11-card) !important;
  color: var(--jm11-text) !important;
  border: 1px solid var(--jm11-border) !important;
  border-radius: 12px !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--jm11-muted) !important;
}

/* Buttons */
button,
.btn,
.button,
input[type="submit"],
a.btn,
a.button {
  border-radius: 12px !important;
  font-weight: 850 !important;
}

.btn-primary,
.button-primary,
button[type="submit"],
input[type="submit"] {
  background: linear-gradient(135deg, #4f46e5, #2563eb) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 10px 22px rgba(37,99,235,.20) !important;
}

/* Tables */
table,
.table {
  background: var(--jm11-card) !important;
  color: var(--jm11-text) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

th {
  background: rgba(148,163,184,.12) !important;
  color: var(--jm11-text) !important;
  font-weight: 900 !important;
}

td {
  color: var(--jm11-text) !important;
}

/* Floating theme toggle */
#js-theme-toggle {
  position: fixed !important;
  right: 22px !important;
  bottom: 22px !important;
  z-index: 9999 !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 999px !important;
  border: 1px solid var(--jm11-border) !important;
  background: var(--jm11-card) !important;
  color: var(--jm11-text) !important;
  box-shadow: 0 12px 26px rgba(15,23,42,.18) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 22px !important;
}

/* Desktop spacing */
@media (min-width: 769px) {
  .main,
  .content,
  main {
    padding: 26px 30px !important;
  }

  .card,
  .panel,
  .box,
  section,
  article {
    margin-bottom: 22px !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  #js-theme-toggle {
    right: 16px !important;
    bottom: 16px !important;
    width: 48px !important;
    height: 48px !important;
  }

  .nav,
  .sidebar,
  .drawer,
  .mobile-drawer,
  .nav-drawer,
  aside {
    background: var(--jm11-sidebar) !important;
  }
}

/* =========================================================
   JOM SILAT MODERN UI V1.2
   Force exact current sidebar .nav + fix theme toggle width
   ========================================================= */

/* Reset theme toggle from any global button width rules */
html body button#js-theme-toggle,
html body #js-theme-toggle {
  position: fixed !important;
  right: 22px !important;
  left: auto !important;
  top: auto !important;
  bottom: 22px !important;

  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;

  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 1px solid var(--jm11-border) !important;
  background: var(--jm11-card) !important;
  color: var(--jm11-text) !important;
  box-shadow: 0 14px 28px rgba(15,23,42,.20) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 21px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  z-index: 2147483000 !important;
}

/* Force current sidebar container */
html body .nav {
  background: var(--jm11-sidebar) !important;
  color: var(--jm11-sidebar-text) !important;
  border-right: 1px solid var(--jm11-border) !important;
  box-shadow: 8px 0 28px rgba(15,23,42,.08) !important;
}

/* Light mode sidebar should be clean white like reference */
html[data-theme="light"] body .nav,
html:not([data-theme]) body .nav {
  background: #ffffff !important;
  color: #111827 !important;
}

/* Dark mode sidebar */
html[data-theme="dark"] body .nav {
  background: #090d18 !important;
  color: #f8fafc !important;
  border-right-color: #1f2937 !important;
}

/* Brand */
html body .nav .nav-title,
html body .nav .brand-text,
html body .nav .brand-jom,
html body .nav .brand-silat {
  color: var(--jm11-sidebar-text) !important;
  font-weight: 950 !important;
  letter-spacing: .5px !important;
}

/* Subtitle and labels */
html body .nav .nav-sub,
html body .nav .nav-group-title {
  color: var(--jm11-sidebar-muted) !important;
  opacity: 1 !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  letter-spacing: .75px !important;
  text-transform: uppercase !important;
  background: transparent !important;
}

/* Account card */
html body .nav .direct-account-v28 {
  background: rgba(148,163,184,.10) !important;
  border: 1px solid var(--jm11-border) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}

html[data-theme="light"] body .nav .direct-account-v28 {
  background: #f8fafc !important;
  border-color: #e5e7eb !important;
}

html[data-theme="dark"] body .nav .direct-account-v28 {
  background: rgba(255,255,255,.055) !important;
  border-color: #1f2937 !important;
}

/* User text */
html body .nav .direct-account-user-v28,
html body .nav .direct-account-actions-v28,
html body .nav .direct-account-actions-v28 a {
  color: var(--jm11-sidebar-text) !important;
}

/* Settings / logout buttons inside account card */
html body .nav .direct-settings-v28,
html body .nav .direct-logout-v28 {
  border-radius: 999px !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}

/* Menu links exact */
html body .nav a,
html body .nav .nav-link,
html body .nav button,
html body .nav .btn {
  color: var(--jm11-sidebar-text) !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

/* Non-active menu item */
html body .nav a:not(.active),
html body .nav .nav-link:not(.active) {
  background: transparent !important;
}

/* Hover */
html body .nav a:hover,
html body .nav .nav-link:hover {
  background: var(--jm11-active-soft) !important;
  color: var(--jm11-active) !important;
  transform: translateX(2px) !important;
}

/* Active exact */
html body .nav a.active,
html body .nav .active,
html body .nav .nav-link.active {
  background: var(--jm11-active-soft) !important;
  color: var(--jm11-active) !important;
  border: 1px solid rgba(79,70,229,.18) !important;
  box-shadow: 0 10px 22px rgba(79,70,229,.10) !important;
}

/* Force old blue active to modern */
html[data-theme="light"] body .nav a.active,
html[data-theme="light"] body .nav .active,
html:not([data-theme]) body .nav a.active,
html:not([data-theme]) body .nav .active {
  background: #eef2ff !important;
  color: #4f46e5 !important;
}

html[data-theme="dark"] body .nav a.active,
html[data-theme="dark"] body .nav .active {
  background: rgba(124,58,237,.18) !important;
  color: #c4b5fd !important;
}

/* Icon badge: current menu uses emoji/span */
html body .nav a span:first-child,
html body .nav .nav-link span:first-child {
  min-width: 30px !important;
  min-height: 30px !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 11px !important;
  background: var(--jm11-icon-bg) !important;
  color: var(--jm11-muted) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Main content polish */
html body .content,
html body .main,
html body main {
  background: var(--jm11-bg) !important;
}

html body .card,
html body .panel,
html body .box,
html body section,
html body article,
html body .stat-card,
html body .dashboard-card,
html body .summary-card,
html body .metric-card {
  background: var(--jm11-card) !important;
  color: var(--jm11-text) !important;
  border: 1px solid var(--jm11-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--jm11-shadow) !important;
}

/* Chart canvas/card readability */
html[data-theme="dark"] body canvas {
  filter: brightness(.95) contrast(1.05) !important;
}

/* Mobile toggle */
@media (max-width: 768px) {
  html body button#js-theme-toggle,
  html body #js-theme-toggle {
    right: 16px !important;
    bottom: 16px !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
  }
}


/* =========================================================
   JOM SILAT MODERN UI V1.3 POLISH
   Fix light sidebar readability + dark card consistency
   ========================================================= */

/* LIGHT MODE SIDEBAR READABILITY */
html[data-theme="light"] body .nav,
html:not([data-theme]) body .nav {
  background: #ffffff !important;
  color: #0f172a !important;
  border-right: 1px solid #e5e7eb !important;
}

html[data-theme="light"] body .nav *,
html:not([data-theme]) body .nav * {
  opacity: 1 !important;
  text-shadow: none !important;
}

html[data-theme="light"] body .nav .nav-title,
html[data-theme="light"] body .nav .brand-text,
html[data-theme="light"] body .nav .brand-jom,
html[data-theme="light"] body .nav .brand-silat,
html:not([data-theme]) body .nav .nav-title,
html:not([data-theme]) body .nav .brand-text,
html:not([data-theme]) body .nav .brand-jom,
html:not([data-theme]) body .nav .brand-silat {
  color: #0f172a !important;
}

html[data-theme="light"] body .nav .nav-sub,
html[data-theme="light"] body .nav .nav-group-title,
html:not([data-theme]) body .nav .nav-sub,
html:not([data-theme]) body .nav .nav-group-title {
  color: #475569 !important;
  background: transparent !important;
}

html[data-theme="light"] body .nav a,
html[data-theme="light"] body .nav a *,
html[data-theme="light"] body .nav .nav-link,
html[data-theme="light"] body .nav .nav-link *,
html:not([data-theme]) body .nav a,
html:not([data-theme]) body .nav a *,
html:not([data-theme]) body .nav .nav-link,
html:not([data-theme]) body .nav .nav-link * {
  color: #334155 !important;
  opacity: 1 !important;
}

html[data-theme="light"] body .nav a.active,
html[data-theme="light"] body .nav a.active *,
html[data-theme="light"] body .nav .active,
html[data-theme="light"] body .nav .active *,
html:not([data-theme]) body .nav a.active,
html:not([data-theme]) body .nav a.active *,
html:not([data-theme]) body .nav .active,
html:not([data-theme]) body .nav .active * {
  color: #4f46e5 !important;
  background: #eef2ff !important;
  opacity: 1 !important;
}

html[data-theme="light"] body .nav a:hover,
html[data-theme="light"] body .nav a:hover *,
html:not([data-theme]) body .nav a:hover,
html:not([data-theme]) body .nav a:hover * {
  color: #4f46e5 !important;
  background: #f1f5ff !important;
}

/* Light mode icon badge */
html[data-theme="light"] body .nav a span:first-child,
html:not([data-theme]) body .nav a span:first-child {
  background: #f1f5f9 !important;
  color: #64748b !important;
  border: 1px solid #e2e8f0 !important;
}

/* User/account card */
html[data-theme="light"] body .nav .direct-account-v28,
html:not([data-theme]) body .nav .direct-account-v28 {
  background: #f8fafc !important;
  border: 1px solid #e5e7eb !important;
  color: #0f172a !important;
}

html[data-theme="light"] body .nav .direct-account-v28 *,
html:not([data-theme]) body .nav .direct-account-v28 * {
  color: #0f172a !important;
  opacity: 1 !important;
}

/* DARK MODE SIDEBAR CONSISTENCY */
html[data-theme="dark"] body .nav,
html[data-theme="dark"] body .nav * {
  opacity: 1 !important;
  text-shadow: none !important;
}

html[data-theme="dark"] body .nav a,
html[data-theme="dark"] body .nav a *,
html[data-theme="dark"] body .nav .nav-link,
html[data-theme="dark"] body .nav .nav-link * {
  color: #e5e7eb !important;
}

html[data-theme="dark"] body .nav a.active,
html[data-theme="dark"] body .nav a.active *,
html[data-theme="dark"] body .nav .active,
html[data-theme="dark"] body .nav .active * {
  color: #c4b5fd !important;
}

/* DARK MODE: force white leftover panels/cards to dark */
html[data-theme="dark"] body,
html[data-theme="dark"] body .main,
html[data-theme="dark"] body .content,
html[data-theme="dark"] body main,
html[data-theme="dark"] body .dashboard,
html[data-theme="dark"] body .dashboard-content,
html[data-theme="dark"] body .page,
html[data-theme="dark"] body .page-content {
  background: #070b14 !important;
  color: #e5e7eb !important;
}

html[data-theme="dark"] body .card,
html[data-theme="dark"] body .panel,
html[data-theme="dark"] body .box,
html[data-theme="dark"] body section,
html[data-theme="dark"] body article,
html[data-theme="dark"] body .stat-card,
html[data-theme="dark"] body .dashboard-card,
html[data-theme="dark"] body .summary-card,
html[data-theme="dark"] body .metric-card,
html[data-theme="dark"] body div[class*="card"],
html[data-theme="dark"] body div[class*="panel"],
html[data-theme="dark"] body div[class*="box"],
html[data-theme="dark"] body div[class*="summary"],
html[data-theme="dark"] body div[class*="metric"] {
  background: #111827 !important;
  background-image: none !important;
  color: #e5e7eb !important;
  border-color: #1f2937 !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.28) !important;
}

html[data-theme="dark"] body .card *,
html[data-theme="dark"] body .panel *,
html[data-theme="dark"] body .box *,
html[data-theme="dark"] body section *,
html[data-theme="dark"] body article *,
html[data-theme="dark"] body .stat-card *,
html[data-theme="dark"] body .dashboard-card *,
html[data-theme="dark"] body .summary-card *,
html[data-theme="dark"] body .metric-card *,
html[data-theme="dark"] body div[class*="card"] *,
html[data-theme="dark"] body div[class*="panel"] *,
html[data-theme="dark"] body div[class*="box"] *,
html[data-theme="dark"] body div[class*="summary"] *,
html[data-theme="dark"] body div[class*="metric"] * {
  color: #e5e7eb !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html[data-theme="dark"] body p,
html[data-theme="dark"] body .small,
html[data-theme="dark"] body .muted,
html[data-theme="dark"] body .text-muted {
  color: #94a3b8 !important;
}

/* Keep warning/amount section readable in both modes */
html[data-theme="light"] body .amount,
html[data-theme="light"] body .big-number,
html[data-theme="light"] body .dashboard-number,
html[data-theme="light"] body .stat-value,
html:not([data-theme]) body .amount,
html:not([data-theme]) body .big-number,
html:not([data-theme]) body .dashboard-number,
html:not([data-theme]) body .stat-value {
  color: #0f172a !important;
}

html[data-theme="dark"] body .amount,
html[data-theme="dark"] body .big-number,
html[data-theme="dark"] body .dashboard-number,
html[data-theme="dark"] body .stat-value {
  color: #f8fafc !important;
}

/* Toggle final polish */
html body button#js-theme-toggle {
  backdrop-filter: blur(10px) !important;
}


/* =========================================================
   JOM SILAT MODERN UI V1.4
   Light mode menu readability fix
   ========================================================= */

html[data-theme="light"] body .nav a,
html[data-theme="light"] body .nav a *,
html[data-theme="light"] body .nav .nav-link,
html[data-theme="light"] body .nav .nav-link *,
html:not([data-theme]) body .nav a,
html:not([data-theme]) body .nav a *,
html:not([data-theme]) body .nav .nav-link,
html:not([data-theme]) body .nav .nav-link * {
  color: #1e293b !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
  font-weight: 850 !important;
}

html[data-theme="light"] body .nav a:not(.active),
html[data-theme="light"] body .nav .nav-link:not(.active),
html:not([data-theme]) body .nav a:not(.active),
html:not([data-theme]) body .nav .nav-link:not(.active) {
  background: transparent !important;
}

html[data-theme="light"] body .nav a:not(.active):hover,
html[data-theme="light"] body .nav .nav-link:not(.active):hover,
html:not([data-theme]) body .nav a:not(.active):hover,
html:not([data-theme]) body .nav .nav-link:not(.active):hover {
  background: #f1f5ff !important;
  color: #4f46e5 !important;
}

html[data-theme="light"] body .nav a.active,
html[data-theme="light"] body .nav a.active *,
html[data-theme="light"] body .nav .active,
html[data-theme="light"] body .nav .active *,
html:not([data-theme]) body .nav a.active,
html:not([data-theme]) body .nav a.active *,
html:not([data-theme]) body .nav .active,
html:not([data-theme]) body .nav .active * {
  color: #4f46e5 !important;
  background: #eef2ff !important;
  font-weight: 900 !important;
}

html[data-theme="light"] body .nav .nav-group-title,
html[data-theme="light"] body .nav .nav-sub,
html:not([data-theme]) body .nav .nav-group-title,
html:not([data-theme]) body .nav .nav-sub {
  color: #475569 !important;
  opacity: 1 !important;
  font-weight: 900 !important;
}

html[data-theme="light"] body .nav a span:first-child,
html:not([data-theme]) body .nav a span:first-child {
  background: #eef2ff !important;
  color: #4f46e5 !important;
  opacity: 1 !important;
  border: 1px solid #dbe4ff !important;
}


/* =========================================================
   JOM SILAT MODERN UI V1.5
   Clean outline icons + stronger sidebar contrast
   ========================================================= */

/* Force menu layout clean */
html body .nav a,
html body .nav .nav-link,
html body .sidebar a,
html body aside a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 42px !important;
  padding: 10px 13px !important;
  border-radius: 14px !important;
  font-weight: 850 !important;
  letter-spacing: .15px !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Clean SVG icon container */
html body .jm15-icon {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: currentColor !important;
  background: rgba(148,163,184,.13) !important;
  border: 1px solid rgba(148,163,184,.18) !important;
}

html body .jm15-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
}

/* Label / chevron */
html body .jm15-label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: inherit !important;
  opacity: 1 !important;
}

html body .jm15-chev {
  margin-left: auto !important;
  color: inherit !important;
  opacity: .75 !important;
  font-size: 20px !important;
}

/* Light mode readable sidebar */
html[data-theme="light"] body .nav {
  background: #ffffff !important;
  color: #111827 !important;
}

html[data-theme="light"] body .nav a,
html[data-theme="light"] body .nav a *,
html[data-theme="light"] body .nav .nav-link,
html[data-theme="light"] body .nav .nav-link * {
  color: #1e293b !important;
  opacity: 1 !important;
}

html[data-theme="light"] body .nav .jm15-icon {
  color: #475569 !important;
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}

html[data-theme="light"] body .nav a.active,
html[data-theme="light"] body .nav a.active *,
html[data-theme="light"] body .nav .active,
html[data-theme="light"] body .nav .active * {
  color: #4f46e5 !important;
}

html[data-theme="light"] body .nav a.active .jm15-icon,
html[data-theme="light"] body .nav .active .jm15-icon {
  color: #4f46e5 !important;
  background: #eef2ff !important;
  border-color: #dbe4ff !important;
}

/* Dark mode reference style */
html[data-theme="dark"] body .nav {
  background: #070b14 !important;
  color: #f8fafc !important;
  border-right-color: #1f2937 !important;
}

html[data-theme="dark"] body .nav a,
html[data-theme="dark"] body .nav a *,
html[data-theme="dark"] body .nav .nav-link,
html[data-theme="dark"] body .nav .nav-link * {
  color: #f8fafc !important;
  opacity: 1 !important;
}

html[data-theme="dark"] body .nav .nav-sub,
html[data-theme="dark"] body .nav .nav-group-title {
  color: #94a3b8 !important;
}

html[data-theme="dark"] body .nav .jm15-icon {
  color: #e5e7eb !important;
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(255,255,255,.10) !important;
}

html[data-theme="dark"] body .nav a:hover {
  background: rgba(255,255,255,.06) !important;
}

html[data-theme="dark"] body .nav a.active,
html[data-theme="dark"] body .nav .active {
  background: rgba(124,58,237,.20) !important;
  color: #ffffff !important;
  border-color: rgba(196,181,253,.22) !important;
}

html[data-theme="dark"] body .nav a.active *,
html[data-theme="dark"] body .nav .active * {
  color: #ffffff !important;
}

html[data-theme="dark"] body .nav a.active .jm15-icon,
html[data-theme="dark"] body .nav .active .jm15-icon {
  color: #ffffff !important;
  background: rgba(124,58,237,.32) !important;
  border-color: rgba(196,181,253,.28) !important;
}

/* User card readability */
html body .direct-account-v28 {
  padding: 12px !important;
}

html body .direct-account-user-v28 {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 40px !important;
  font-weight: 850 !important;
  opacity: 1 !important;
}

html[data-theme="dark"] body .direct-account-user-v28,
html[data-theme="dark"] body .direct-account-user-v28 * {
  color: #f8fafc !important;
}

html[data-theme="light"] body .direct-account-user-v28,
html[data-theme="light"] body .direct-account-user-v28 * {
  color: #0f172a !important;
}

/* Keep settings/logout as pill buttons but readable */
html body .direct-settings-v28,
html body .direct-logout-v28 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 8px 12px !important;
}

/* Remove leftover emoji text styling conflicts */
html body .nav a::before,
html body .nav a::after {
  text-shadow: none !important;
}

/* Smaller, cleaner group spacing */
html body .nav-group {
  margin-top: 18px !important;
}

html body .nav-group-title {
  margin-bottom: 8px !important;
}

/* Main content: keep dark mode premium */
html[data-theme="dark"] body .content,
html[data-theme="dark"] body .main,
html[data-theme="dark"] body main {
  background: #070b14 !important;
}


/* =========================================================
   JOM SILAT MODERN UI V1.6
   Summary + nav-item SVG icon enforcement
   ========================================================= */

html body .nav a.nav-item,
html body .nav summary,
html body .nav .nav-group-toggle,
html body .sidebar-settings-v4,
html body .sidebar-logout-v4,
html body .direct-settings-v28,
html body .direct-logout-v28,
html body .sidebar-user-name-v4,
html body .direct-account-user-v28 {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 42px !important;
  padding: 10px 13px !important;
  border-radius: 14px !important;
  font-weight: 850 !important;
  letter-spacing: .15px !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
  list-style: none !important;
}

html body .nav summary::-webkit-details-marker {
  display: none !important;
}

html body .jm15-icon {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: currentColor !important;
  background: rgba(148,163,184,.13) !important;
  border: 1px solid rgba(148,163,184,.18) !important;
}

html body .jm15-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
}

html body .jm15-label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: inherit !important;
  opacity: 1 !important;
}

html body .jm15-chev {
  margin-left: auto !important;
  color: inherit !important;
  opacity: .75 !important;
  font-size: 20px !important;
}

/* Hide old emoji leftovers if any */
html.jm-icons-v16-ready body .nav a.nav-item {
  font-variant-emoji: text !important;
}

/* Light mode */
html[data-theme="light"] body .nav a.nav-item,
html[data-theme="light"] body .nav summary,
html[data-theme="light"] body .sidebar-settings-v4,
html[data-theme="light"] body .sidebar-logout-v4,
html[data-theme="light"] body .direct-settings-v28,
html[data-theme="light"] body .direct-logout-v28 {
  color: #1e293b !important;
}

html[data-theme="light"] body .jm15-icon {
  color: #475569 !important;
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}

html[data-theme="light"] body .nav a.nav-item.active,
html[data-theme="light"] body .nav a.nav-item.active *,
html[data-theme="light"] body .nav details[open] > summary,
html[data-theme="light"] body .nav details[open] > summary * {
  color: #4f46e5 !important;
}

/* Dark mode */
html[data-theme="dark"] body .nav a.nav-item,
html[data-theme="dark"] body .nav summary,
html[data-theme="dark"] body .sidebar-settings-v4,
html[data-theme="dark"] body .sidebar-logout-v4,
html[data-theme="dark"] body .direct-settings-v28,
html[data-theme="dark"] body .direct-logout-v28 {
  color: #f8fafc !important;
}

html[data-theme="dark"] body .jm15-icon {
  color: #e5e7eb !important;
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(255,255,255,.10) !important;
}

html[data-theme="dark"] body .nav a.nav-item.active,
html[data-theme="dark"] body .nav a.nav-item.active *,
html[data-theme="dark"] body .nav details[open] > summary,
html[data-theme="dark"] body .nav details[open] > summary * {
  color: #ffffff !important;
}

html[data-theme="dark"] body .nav a.nav-item.active .jm15-icon,
html[data-theme="dark"] body .nav details[open] > summary .jm15-icon {
  background: rgba(124,58,237,.32) !important;
  border-color: rgba(196,181,253,.28) !important;
}


/* =========================================================
   JOM SILAT MODERN UI V1.7
   Top account polish + sidebar accordion visual refinement
   ========================================================= */

/* Sidebar width stability */
html body .nav {
  width: 280px !important;
  min-width: 280px !important;
  max-width: 280px !important;
  overflow-x: hidden !important;
}

/* Page offset follows fixed sidebar */
@media (min-width: 769px) {
  html body .page-shell,
  html body .main,
  html body .content {
    margin-left: 280px !important;
  }
}

/* Top account card */
html body .direct-account-v28,
html body .sidebar-user-fixed-v4 {
  margin: 14px 14px 18px 14px !important;
  padding: 13px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

/* Username row */
html body .direct-account-user-v28,
html body .sidebar-user-name-v4 {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 40px !important;
  padding: 0 !important;
  margin-bottom: 10px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Account button row */
html body .direct-account-actions-v28,
html body .sidebar-user-buttons-v4 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 9px !important;
  width: 100% !important;
}

/* Settings / logout buttons */
html body .direct-settings-v28,
html body .direct-logout-v28,
html body .sidebar-settings-v4,
html body .sidebar-logout-v4 {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 8px 10px !important;
  border-radius: 999px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;

  font-size: 13px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Smaller icons inside account buttons so text will not be cut */
html body .direct-settings-v28 .jm15-icon,
html body .direct-logout-v28 .jm15-icon,
html body .sidebar-settings-v4 .jm15-icon,
html body .sidebar-logout-v4 .jm15-icon {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  border-radius: 10px !important;
}

html body .direct-settings-v28 .jm15-icon svg,
html body .direct-logout-v28 .jm15-icon svg,
html body .sidebar-settings-v4 .jm15-icon svg,
html body .sidebar-logout-v4 .jm15-icon svg {
  width: 16px !important;
  height: 16px !important;
}

/* Prevent logout pill from overflowing beyond sidebar */
html body .direct-logout-v28,
html body .sidebar-logout-v4 {
  margin-left: 0 !important;
  transform: none !important;
}

/* Group header / summary cleaner */
html body .nav details > summary {
  cursor: pointer !important;
  user-select: none !important;
}

html body .nav details[open] > summary {
  margin-bottom: 8px !important;
}

/* Auto-close visual: only opened details shows children cleanly */
html body .nav details:not([open]) .nav-collapse-body {
  display: none !important;
}

html body .nav details[open] .nav-collapse-body {
  display: grid !important;
  gap: 7px !important;
  margin-top: 6px !important;
}

/* Menu item height and spacing closer to reference */
html body .nav a.nav-item,
html body .nav summary {
  min-height: 44px !important;
  padding: 10px 12px !important;
  margin: 4px 10px !important;
}

/* Dark mode top account */
html[data-theme="dark"] body .direct-account-v28,
html[data-theme="dark"] body .sidebar-user-fixed-v4 {
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
}

html[data-theme="dark"] body .direct-settings-v28,
html[data-theme="dark"] body .sidebar-settings-v4 {
  background: rgba(255,255,255,.075) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

html[data-theme="dark"] body .direct-logout-v28,
html[data-theme="dark"] body .sidebar-logout-v4 {
  background: rgba(239,68,68,.10) !important;
  color: #fecaca !important;
  border: 1px solid rgba(248,113,113,.25) !important;
}

/* Light mode top account */
html[data-theme="light"] body .direct-account-v28,
html[data-theme="light"] body .sidebar-user-fixed-v4 {
  background: #f8fafc !important;
  border: 1px solid #e5e7eb !important;
}

html[data-theme="light"] body .direct-settings-v28,
html[data-theme="light"] body .sidebar-settings-v4 {
  background: #ffffff !important;
  color: #1e293b !important;
  border: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] body .direct-logout-v28,
html[data-theme="light"] body .sidebar-logout-v4 {
  background: #fff7ed !important;
  color: #9a3412 !important;
  border: 1px solid #fed7aa !important;
}

/* Mobile keep width flexible */
@media (max-width: 768px) {
  html body .nav {
    width: min(86vw, 320px) !important;
    min-width: 0 !important;
    max-width: min(86vw, 320px) !important;
  }

  html body .page-shell,
  html body .main,
  html body .content {
    margin-left: 0 !important;
  }
}


/* =========================================================
   JOM SILAT MODERN UI V1.8
   Align top user/settings/logout/theme icons like clean sidebar reference
   ========================================================= */

/* Top account card: more premium, no overflow */
html body .nav .direct-account-v28,
html body .nav .sidebar-user-fixed-v4,
html body .nav .jm18-account-card {
  margin: 14px 14px 20px 14px !important;
  padding: 12px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}

/* User row: icon + name aligned */
html body .nav .direct-account-user-v28,
html body .nav .sidebar-user-name-v4,
html body .nav .jm18-account-user {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 42px !important;
  padding: 0 !important;
  margin: 0 0 11px 0 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Make user icon clean square */
html body .nav .direct-account-user-v28 .jm15-icon,
html body .nav .sidebar-user-name-v4 .jm15-icon,
html body .nav .jm18-account-user .jm15-icon {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 14px !important;
}

/* Action row: three equal icon buttons: theme, settings, logout */
html body .nav .direct-account-actions-v28,
html body .nav .sidebar-user-buttons-v4,
html body .nav .jm18-account-actions {
  display: grid !important;
  grid-template-columns: 42px 1fr 1fr !important;
  gap: 8px !important;
  align-items: center !important;
  width: 100% !important;
  overflow: hidden !important;
}

/* Theme slot */
html body .nav .jm18-theme-slot {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
}

/* Theme button no longer floating */
html.jm18-theme-in-sidebar body button#js-theme-toggle,
html body .nav button#js-theme-toggle.jm18-theme-btn {
  position: static !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  top: auto !important;

  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;

  padding: 0 !important;
  margin: 0 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

/* Settings/logout buttons become aligned pills */
html body .nav .direct-settings-v28,
html body .nav .direct-logout-v28,
html body .nav .sidebar-settings-v4,
html body .nav .sidebar-logout-v4,
html body .nav .jm18-account-action {
  height: 42px !important;
  min-height: 42px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 10px !important;
  margin: 0 !important;
  border-radius: 14px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;

  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transform: none !important;
}

/* Smaller icons inside action buttons */
html body .nav .direct-settings-v28 .jm15-icon,
html body .nav .direct-logout-v28 .jm15-icon,
html body .nav .sidebar-settings-v4 .jm15-icon,
html body .nav .sidebar-logout-v4 .jm15-icon,
html body .nav .jm18-account-action .jm15-icon {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  border-radius: 10px !important;
}

html body .nav .direct-settings-v28 .jm15-label,
html body .nav .direct-logout-v28 .jm15-label,
html body .nav .sidebar-settings-v4 .jm15-label,
html body .nav .sidebar-logout-v4 .jm15-label,
html body .nav .jm18-account-action .jm15-label {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Dark theme account styling */
html[data-theme="dark"] body .nav .direct-account-v28,
html[data-theme="dark"] body .nav .sidebar-user-fixed-v4,
html[data-theme="dark"] body .nav .jm18-account-card {
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.095) !important;
}

html[data-theme="dark"] body .nav button#js-theme-toggle.jm18-theme-btn,
html[data-theme="dark"] body .nav .direct-settings-v28,
html[data-theme="dark"] body .nav .sidebar-settings-v4 {
  background: rgba(255,255,255,.075) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255,255,255,.11) !important;
}

html[data-theme="dark"] body .nav .direct-logout-v28,
html[data-theme="dark"] body .nav .sidebar-logout-v4 {
  background: rgba(239,68,68,.10) !important;
  color: #fecaca !important;
  border: 1px solid rgba(248,113,113,.25) !important;
}

/* Light theme account styling */
html[data-theme="light"] body .nav .direct-account-v28,
html[data-theme="light"] body .nav .sidebar-user-fixed-v4,
html[data-theme="light"] body .nav .jm18-account-card,
html:not([data-theme]) body .nav .direct-account-v28,
html:not([data-theme]) body .nav .sidebar-user-fixed-v4,
html:not([data-theme]) body .nav .jm18-account-card {
  background: #f8fafc !important;
  border: 1px solid #e5e7eb !important;
}

html[data-theme="light"] body .nav button#js-theme-toggle.jm18-theme-btn,
html[data-theme="light"] body .nav .direct-settings-v28,
html[data-theme="light"] body .nav .sidebar-settings-v4,
html:not([data-theme]) body .nav button#js-theme-toggle.jm18-theme-btn,
html:not([data-theme]) body .nav .direct-settings-v28,
html:not([data-theme]) body .nav .sidebar-settings-v4 {
  background: #ffffff !important;
  color: #1e293b !important;
  border: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] body .nav .direct-logout-v28,
html[data-theme="light"] body .nav .sidebar-logout-v4,
html:not([data-theme]) body .nav .direct-logout-v28,
html:not([data-theme]) body .nav .sidebar-logout-v4 {
  background: #fff7ed !important;
  color: #9a3412 !important;
  border: 1px solid #fed7aa !important;
}

/* Make menu rows align more like reference */
html body .nav a.nav-item,
html body .nav summary {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

html body .nav a.nav-item .jm15-icon,
html body .nav summary .jm15-icon {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
}

/* Hide floating fallback if somehow still outside sidebar */
html:not(.jm18-theme-in-sidebar) body #js-theme-toggle {
  position: fixed !important;
}

/* Mobile: keep floating theme button if sidebar injection becomes cramped */
@media (max-width: 768px) {
  html body .nav .direct-account-actions-v28,
  html body .nav .sidebar-user-buttons-v4,
  html body .nav .jm18-account-actions {
    grid-template-columns: 42px 1fr 1fr !important;
  }
}


/* =========================================================
   JOM SILAT MODERN UI V1.9
   Account top icon-only buttons + cleaner theme icon + menu alignment
   ========================================================= */

/* Sidebar consistent width */
html body .nav {
  width: 280px !important;
  min-width: 280px !important;
  max-width: 280px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* Top account card spacing */
html body .nav .direct-account-v28,
html body .nav .sidebar-user-fixed-v4,
html body .nav .jm18-account-card {
  margin: 14px 14px 20px 14px !important;
  padding: 12px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* User row: cleaner avatar + label */
html body .nav .direct-account-user-v28,
html body .nav .sidebar-user-name-v4,
html body .nav .jm19-user-row {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 40px !important;
  margin: 0 0 11px 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  box-sizing: border-box !important;
}

html body .nav .direct-account-user-v28 .jm15-icon,
html body .nav .sidebar-user-name-v4 .jm15-icon {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 14px !important;
}

html body .nav .direct-account-user-v28 .jm15-label,
html body .nav .sidebar-user-name-v4 .jm15-label {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Action row: 3 equal square buttons */
html body .nav .direct-account-actions-v28,
html body .nav .sidebar-user-buttons-v4,
html body .nav .jm18-account-actions {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  width: 100% !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

/* Slot for theme button */
html body .nav .jm18-theme-slot {
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
}

/* Theme button: modern square icon */
html.jm18-theme-in-sidebar body .nav button#js-theme-toggle,
html body .nav button#js-theme-toggle.jm18-theme-btn,
html body .nav button#js-theme-toggle.jm19-theme-icon-btn {
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-size: 0 !important;
  box-sizing: border-box !important;
}

html body .nav button#js-theme-toggle svg,
html body .nav button#js-theme-toggle.jm19-theme-icon-btn svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
}

/* Settings/logout become icon-only square buttons */
html body .nav .direct-settings-v28,
html body .nav .direct-logout-v28,
html body .nav .sidebar-settings-v4,
html body .nav .sidebar-logout-v4,
html body .nav .jm19-action-icon-only {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transform: none !important;
}

/* Hide labels only for top action buttons */
html body .nav .jm19-action-icon-only .jm15-label,
html body .nav .direct-settings-v28 .jm15-label,
html body .nav .direct-logout-v28 .jm15-label,
html body .nav .sidebar-settings-v4 .jm15-label,
html body .nav .sidebar-logout-v4 .jm15-label {
  display: none !important;
}

/* Top action icon size */
html body .nav .jm19-action-icon-only .jm15-icon,
html body .nav .direct-settings-v28 .jm15-icon,
html body .nav .direct-logout-v28 .jm15-icon,
html body .nav .sidebar-settings-v4 .jm15-icon,
html body .nav .sidebar-logout-v4 .jm15-icon {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  border-radius: 11px !important;
  margin: 0 !important;
}

html body .nav .jm19-action-icon-only .jm15-icon svg,
html body .nav .direct-settings-v28 .jm15-icon svg,
html body .nav .direct-logout-v28 .jm15-icon svg,
html body .nav .sidebar-settings-v4 .jm15-icon svg,
html body .nav .sidebar-logout-v4 .jm15-icon svg {
  width: 17px !important;
  height: 17px !important;
}

/* Light theme action colors */
html[data-theme="light"] body .nav button#js-theme-toggle,
html:not([data-theme]) body .nav button#js-theme-toggle {
  background: #ffffff !important;
  color: #4f46e5 !important;
  border: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] body .nav .direct-settings-v28,
html[data-theme="light"] body .nav .sidebar-settings-v4,
html:not([data-theme]) body .nav .direct-settings-v28,
html:not([data-theme]) body .nav .sidebar-settings-v4 {
  background: #ffffff !important;
  color: #334155 !important;
  border: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] body .nav .direct-logout-v28,
html[data-theme="light"] body .nav .sidebar-logout-v4,
html:not([data-theme]) body .nav .direct-logout-v28,
html:not([data-theme]) body .nav .sidebar-logout-v4 {
  background: #fff7ed !important;
  color: #c2410c !important;
  border: 1px solid #fed7aa !important;
}

/* Dark theme action colors */
html[data-theme="dark"] body .nav button#js-theme-toggle {
  background: rgba(124,58,237,.16) !important;
  color: #c4b5fd !important;
  border: 1px solid rgba(196,181,253,.22) !important;
}

html[data-theme="dark"] body .nav .direct-settings-v28,
html[data-theme="dark"] body .nav .sidebar-settings-v4 {
  background: rgba(255,255,255,.075) !important;
  color: #e5e7eb !important;
  border: 1px solid rgba(255,255,255,.11) !important;
}

html[data-theme="dark"] body .nav .direct-logout-v28,
html[data-theme="dark"] body .nav .sidebar-logout-v4 {
  background: rgba(239,68,68,.10) !important;
  color: #fecaca !important;
  border: 1px solid rgba(248,113,113,.25) !important;
}

/* Menu rows: keep all icons and text aligned; prevent Kehadiran & Ujian overflow */
html body .nav a.nav-item,
html body .nav summary,
html body .nav .nav-group-toggle {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 16px !important;
  align-items: center !important;
  column-gap: 12px !important;
  width: calc(100% - 20px) !important;
  max-width: calc(100% - 20px) !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  margin: 4px 10px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Menu item without chevron still aligns */
html body .nav a.nav-item:not(:has(.jm15-chev)) {
  grid-template-columns: 34px minmax(0, 1fr) !important;
}

/* icon fixed */
html body .nav a.nav-item .jm15-icon,
html body .nav summary .jm15-icon {
  grid-column: 1 !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
}

/* label ellipsis */
html body .nav a.nav-item .jm15-label,
html body .nav summary .jm15-label {
  grid-column: 2 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}

/* chevron fixed at far right */
html body .nav summary .jm15-chev,
html body .nav a.nav-item .jm15-chev {
  grid-column: 3 !important;
  justify-self: end !important;
  width: 16px !important;
  min-width: 16px !important;
  text-align: right !important;
  margin-left: 0 !important;
}

/* Fallback for browsers not supporting :has */
html body .nav a.nav-item {
  grid-template-columns: 34px minmax(0, 1fr) !important;
}

/* Active / open visual kept clean */
html[data-theme="light"] body .nav details[open] > summary,
html[data-theme="light"] body .nav a.nav-item.active {
  background: #eef2ff !important;
  color: #4f46e5 !important;
}

html[data-theme="dark"] body .nav details[open] > summary,
html[data-theme="dark"] body .nav a.nav-item.active {
  background: rgba(124,58,237,.20) !important;
  color: #ffffff !important;
}

/* Mobile maintain responsive sidebar */
@media (max-width: 768px) {
  html body .nav {
    width: min(86vw, 320px) !important;
    min-width: 0 !important;
    max-width: min(86vw, 320px) !important;
  }
}


/* =========================================================
   JOM SILAT MODERN UI V2.0
   Specific menu icons + better distinction from theme icon
   ========================================================= */

/* Theme button must not look like menu/database icon */
html body .nav button#js-theme-toggle.jm19-theme-icon-btn,
html body .nav button#js-theme-toggle.jm18-theme-btn {
  border-radius: 16px !important;
}

html[data-theme="light"] body .nav button#js-theme-toggle {
  background: #eef2ff !important;
  color: #4f46e5 !important;
  border-color: #dbe4ff !important;
}

html[data-theme="dark"] body .nav button#js-theme-toggle {
  background: rgba(251,191,36,.12) !important;
  color: #fbbf24 !important;
  border-color: rgba(251,191,36,.28) !important;
}

/* Menu icon base */
html body .nav .jm15-icon {
  border-radius: 12px !important;
}

/* Distinct icon colors by menu function */
html[data-theme="light"] body .nav .jm20-icon-dashboard {
  background: #eef2ff !important;
  color: #4f46e5 !important;
  border-color: #dbe4ff !important;
}

html[data-theme="light"] body .nav .jm20-icon-database,
html[data-theme="light"] body .nav .jm20-icon-users,
html[data-theme="light"] body .nav .jm20-icon-filePen,
html[data-theme="light"] body .nav .jm20-icon-printer,
html[data-theme="light"] body .nav .jm20-icon-form,
html[data-theme="light"] body .nav .jm20-icon-tag,
html[data-theme="light"] body .nav .jm20-icon-book,
html[data-theme="light"] body .nav .jm20-icon-package,
html[data-theme="light"] body .nav .jm20-icon-trendDown {
  background: #eff6ff !important;
  color: #2563eb !important;
  border-color: #dbeafe !important;
}

html[data-theme="light"] body .nav .jm20-icon-clipboard {
  background: #f0fdf4 !important;
  color: #16a34a !important;
  border-color: #dcfce7 !important;
}

html[data-theme="light"] body .nav .jm20-icon-wallet,
html[data-theme="light"] body .nav .jm20-icon-receipt {
  background: #fff7ed !important;
  color: #ea580c !important;
  border-color: #fed7aa !important;
}

html[data-theme="light"] body .nav .jm20-icon-chart {
  background: #f5f3ff !important;
  color: #7c3aed !important;
  border-color: #ddd6fe !important;
}

html[data-theme="light"] body .nav .jm20-icon-shield,
html[data-theme="light"] body .nav .jm20-icon-settings {
  background: #f8fafc !important;
  color: #475569 !important;
  border-color: #e2e8f0 !important;
}

html[data-theme="light"] body .nav .jm20-icon-logout {
  background: #fff1f2 !important;
  color: #e11d48 !important;
  border-color: #fecdd3 !important;
}

/* Dark mode specific colors */
html[data-theme="dark"] body .nav .jm20-icon-dashboard {
  background: rgba(124,58,237,.28) !important;
  color: #ffffff !important;
  border-color: rgba(196,181,253,.28) !important;
}

html[data-theme="dark"] body .nav .jm20-icon-database,
html[data-theme="dark"] body .nav .jm20-icon-users,
html[data-theme="dark"] body .nav .jm20-icon-filePen,
html[data-theme="dark"] body .nav .jm20-icon-printer,
html[data-theme="dark"] body .nav .jm20-icon-form,
html[data-theme="dark"] body .nav .jm20-icon-tag,
html[data-theme="dark"] body .nav .jm20-icon-book,
html[data-theme="dark"] body .nav .jm20-icon-package,
html[data-theme="dark"] body .nav .jm20-icon-trendDown {
  background: rgba(37,99,235,.16) !important;
  color: #93c5fd !important;
  border-color: rgba(147,197,253,.18) !important;
}

html[data-theme="dark"] body .nav .jm20-icon-clipboard {
  background: rgba(34,197,94,.14) !important;
  color: #86efac !important;
  border-color: rgba(134,239,172,.18) !important;
}

html[data-theme="dark"] body .nav .jm20-icon-wallet,
html[data-theme="dark"] body .nav .jm20-icon-receipt {
  background: rgba(249,115,22,.14) !important;
  color: #fdba74 !important;
  border-color: rgba(253,186,116,.18) !important;
}

html[data-theme="dark"] body .nav .jm20-icon-chart {
  background: rgba(124,58,237,.18) !important;
  color: #c4b5fd !important;
  border-color: rgba(196,181,253,.20) !important;
}

html[data-theme="dark"] body .nav .jm20-icon-shield,
html[data-theme="dark"] body .nav .jm20-icon-settings {
  background: rgba(148,163,184,.12) !important;
  color: #cbd5e1 !important;
  border-color: rgba(203,213,225,.14) !important;
}

html[data-theme="dark"] body .nav .jm20-icon-logout {
  background: rgba(239,68,68,.14) !important;
  color: #fecaca !important;
  border-color: rgba(248,113,113,.22) !important;
}

/* Label alignment fix for long menu names */
html body .nav a.nav-item .jm15-label,
html body .nav summary .jm15-label {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}

/* Slightly wider sidebar for Malay long labels */
html body .nav {
  width: 292px !important;
  min-width: 292px !important;
  max-width: 292px !important;
}

@media (min-width: 769px) {
  html body .page-shell,
  html body .main,
  html body .content {
    margin-left: 292px !important;
  }
}


/* =========================================================
   JOM SILAT MODERN UI V2.1
   Dark mode form/table readability fix
   ========================================================= */

/* DARK MODE: global text contrast */
html[data-theme="dark"] body,
html[data-theme="dark"] body * {
  text-shadow: none !important;
}

html[data-theme="dark"] body label,
html[data-theme="dark"] body .form-label,
html[data-theme="dark"] body .field-label,
html[data-theme="dark"] body .label,
html[data-theme="dark"] body .card label,
html[data-theme="dark"] body .box label,
html[data-theme="dark"] body .panel label,
html[data-theme="dark"] body th,
html[data-theme="dark"] body td,
html[data-theme="dark"] body p,
html[data-theme="dark"] body span,
html[data-theme="dark"] body div {
  color: #e5e7eb !important;
}

/* DARK MODE: muted/help text still visible */
html[data-theme="dark"] body .muted,
html[data-theme="dark"] body .text-muted,
html[data-theme="dark"] body .small,
html[data-theme="dark"] body small,
html[data-theme="dark"] body .help,
html[data-theme="dark"] body .hint,
html[data-theme="dark"] body .description,
html[data-theme="dark"] body .form-text {
  color: #cbd5e1 !important;
  opacity: 1 !important;
}

/* DARK MODE: inputs/selects/textarea */
html[data-theme="dark"] body input,
html[data-theme="dark"] body select,
html[data-theme="dark"] body textarea,
html[data-theme="dark"] body .form-control,
html[data-theme="dark"] body .input,
html[data-theme="dark"] body .select {
  background: #0b1220 !important;
  color: #f8fafc !important;
  border: 1px solid #334155 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  caret-color: #f8fafc !important;
}

/* DARK MODE: placeholders */
html[data-theme="dark"] body input::placeholder,
html[data-theme="dark"] body textarea::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

/* DARK MODE: option dropdown values */
html[data-theme="dark"] body option,
html[data-theme="dark"] body optgroup {
  background: #0b1220 !important;
  color: #f8fafc !important;
}

/* DARK MODE: readonly/disabled fields */
html[data-theme="dark"] body input[readonly],
html[data-theme="dark"] body textarea[readonly],
html[data-theme="dark"] body input:disabled,
html[data-theme="dark"] body select:disabled,
html[data-theme="dark"] body textarea:disabled {
  background: #111827 !important;
  color: #cbd5e1 !important;
  border-color: #334155 !important;
  opacity: 1 !important;
}

/* DARK MODE: focus state */
html[data-theme="dark"] body input:focus,
html[data-theme="dark"] body select:focus,
html[data-theme="dark"] body textarea:focus,
html[data-theme="dark"] body .form-control:focus {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #818cf8 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, .22) !important;
}

/* DARK MODE: table and fee breakdown readability */
html[data-theme="dark"] body table,
html[data-theme="dark"] body .table {
  background: #111827 !important;
  color: #e5e7eb !important;
  border-color: #334155 !important;
}

html[data-theme="dark"] body thead,
html[data-theme="dark"] body th {
  background: #1f2937 !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

html[data-theme="dark"] body tbody,
html[data-theme="dark"] body tr,
html[data-theme="dark"] body td {
  background: #111827 !important;
  color: #e5e7eb !important;
  border-color: #334155 !important;
}

/* DARK MODE: number/amount fields */
html[data-theme="dark"] body input[type="number"],
html[data-theme="dark"] body input[name*="amount"],
html[data-theme="dark"] body input[name*="price"],
html[data-theme="dark"] body input[name*="qty"],
html[data-theme="dark"] body .amount,
html[data-theme="dark"] body .total,
html[data-theme="dark"] body .grand-total {
  color: #f8fafc !important;
}

/* DARK MODE: cards/boxes with old inline/light CSS */
html[data-theme="dark"] body .card,
html[data-theme="dark"] body .box,
html[data-theme="dark"] body .panel,
html[data-theme="dark"] body section,
html[data-theme="dark"] body article,
html[data-theme="dark"] body div[class*="card"],
html[data-theme="dark"] body div[class*="box"],
html[data-theme="dark"] body div[class*="panel"] {
  background: #111827 !important;
  color: #e5e7eb !important;
  border-color: #1f2937 !important;
}

/* DARK MODE: buttons remain readable */
html[data-theme="dark"] body button,
html[data-theme="dark"] body .btn,
html[data-theme="dark"] body .button,
html[data-theme="dark"] body input[type="submit"],
html[data-theme="dark"] body a.btn,
html[data-theme="dark"] body a.button {
  color: #ffffff !important;
}

/* DARK MODE: warning/help box on right side */
html[data-theme="dark"] body .note,
html[data-theme="dark"] body .notice,
html[data-theme="dark"] body .tips,
html[data-theme="dark"] body .info,
html[data-theme="dark"] body .alert,
html[data-theme="dark"] body aside,
html[data-theme="dark"] body .side-note {
  background: #111827 !important;
  color: #e5e7eb !important;
  border-color: #334155 !important;
}

html[data-theme="dark"] body .note *,
html[data-theme="dark"] body .notice *,
html[data-theme="dark"] body .tips *,
html[data-theme="dark"] body .info *,
html[data-theme="dark"] body .alert *,
html[data-theme="dark"] body aside *,
html[data-theme="dark"] body .side-note * {
  color: #e5e7eb !important;
}

/* LIGHT MODE: avoid accidental over-darkening after this patch */
html[data-theme="light"] body label,
html[data-theme="light"] body th,
html[data-theme="light"] body td {
  color: #0f172a !important;
}


/* =========================================================
   JOM SILAT DARK READABILITY V2.2
   Scope: dark theme readability only
   Safe: CSS only, no route/db/mobile logic changes
   ========================================================= */

html[data-theme="dark"] body {
  background: #070b14 !important;
  color: #f8fafc !important;
}

/* Main work area */
html[data-theme="dark"] .page-shell,
html[data-theme="dark"] .main,
html[data-theme="dark"] .content,
html[data-theme="dark"] main {
  background: #070b14 !important;
  color: #f8fafc !important;
}

/* Top page title area */
html[data-theme="dark"] .page-topbar,
html[data-theme="dark"] .page-header,
html[data-theme="dark"] .top-card,
html[data-theme="dark"] .header-card {
  background: #111827 !important;
  color: #f8fafc !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
}

html[data-theme="dark"] .page-topbar h1,
html[data-theme="dark"] .page-header h1,
html[data-theme="dark"] .top-card h1,
html[data-theme="dark"] .header-card h1,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4 {
  color: #f8fafc !important;
}

html[data-theme="dark"] .page-meta,
html[data-theme="dark"] .small,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .sub,
html[data-theme="dark"] .desc,
html[data-theme="dark"] .hub-desc,
html[data-theme="dark"] .card-desc {
  color: #cbd5e1 !important;
}

/* Module dashboard cards */
html[data-theme="dark"] .hub-card,
html[data-theme="dark"] .module-card,
html[data-theme="dark"] .menu-card,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .quick-card,
html[data-theme="dark"] .feature-card {
  background: #111827 !important;
  color: #f8fafc !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .24) !important;
}

html[data-theme="dark"] .hub-card *,
html[data-theme="dark"] .module-card *,
html[data-theme="dark"] .menu-card *,
html[data-theme="dark"] .dashboard-card *,
html[data-theme="dark"] .quick-card *,
html[data-theme="dark"] .feature-card * {
  color: inherit;
}

html[data-theme="dark"] .hub-title,
html[data-theme="dark"] .module-title,
html[data-theme="dark"] .card-title {
  color: #f8fafc !important;
}

html[data-theme="dark"] .hub-desc,
html[data-theme="dark"] .module-desc,
html[data-theme="dark"] .card-subtitle {
  color: #cbd5e1 !important;
}

/* Generic boxes/cards/panels */
html[data-theme="dark"] .box,
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .section,
html[data-theme="dark"] section,
html[data-theme="dark"] article,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .stat-card {
  background-color: #111827 !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, .18) !important;
}

/* Keep inner text readable */
html[data-theme="dark"] .box *,
html[data-theme="dark"] .card *,
html[data-theme="dark"] .panel *,
html[data-theme="dark"] .section *,
html[data-theme="dark"] section *,
html[data-theme="dark"] article *,
html[data-theme="dark"] .form-card *,
html[data-theme="dark"] .summary-card *,
html[data-theme="dark"] .stat-card * {
  color: inherit;
}

html[data-theme="dark"] .box .small,
html[data-theme="dark"] .card .small,
html[data-theme="dark"] .panel .small,
html[data-theme="dark"] .section .small,
html[data-theme="dark"] section .small,
html[data-theme="dark"] article .small {
  color: #cbd5e1 !important;
}

/* Forms */
html[data-theme="dark"] label,
html[data-theme="dark"] .form-label {
  color: #f8fafc !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
  background-color: #0b1220 !important;
  color: #f8fafc !important;
  border: 1px solid #334155 !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

html[data-theme="dark"] option {
  background-color: #0b1220 !important;
  color: #f8fafc !important;
}

/* File input buttons */
html[data-theme="dark"] input[type="file"] {
  color: #f8fafc !important;
}

html[data-theme="dark"] input[type="file"]::file-selector-button {
  background: #1e293b !important;
  color: #f8fafc !important;
  border: 1px solid #475569 !important;
  border-radius: 10px !important;
}

/* Tables */
html[data-theme="dark"] table,
html[data-theme="dark"] .table {
  background: #111827 !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

html[data-theme="dark"] th,
html[data-theme="dark"] td {
  background-color: #111827 !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

html[data-theme="dark"] thead th,
html[data-theme="dark"] .table thead th {
  background-color: #1e293b !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] tbody tr:nth-child(even) td {
  background-color: #0f172a !important;
}

/* Buttons keep readable */
html[data-theme="dark"] button,
html[data-theme="dark"] .btn,
html[data-theme="dark"] a.btn {
  color: #f8fafc !important;
}

html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-secondary {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

/* Asset/report/module headings that were too pale */
html[data-theme="dark"] .asset-title,
html[data-theme="dark"] .asset-subtitle,
html[data-theme="dark"] .report-title,
html[data-theme="dark"] .report-subtitle,
html[data-theme="dark"] .module-heading,
html[data-theme="dark"] .section-heading {
  color: #f8fafc !important;
}

/* Safety: prevent white card + white text issue */
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background-color: white"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"] {
  background: #111827 !important;
  color: #f8fafc !important;
}


/* =========================================================
   JOM SILAT DARK READABILITY V2.3 - CARD/TEXT FIX
   Scope: desktop dark mode readability only
   Safe: CSS only, no route/db/mobile logic changes
   ========================================================= */

/* Dark root compatibility */
html[data-theme="dark"],
body[data-theme="dark"],
html.dark,
body.dark,
body.dark-mode,
body.theme-dark {
  color-scheme: dark !important;
}

/* Force main content panels to stay dark/readable */
html[data-theme="dark"] .page-shell,
body[data-theme="dark"] .page-shell,
html.dark .page-shell,
body.dark .page-shell,
body.dark-mode .page-shell,
body.theme-dark .page-shell {
  background: #070b14 !important;
  color: #f8fafc !important;
}

/* Fix report/module/action cards that were white + pale text */
html[data-theme="dark"] .page-shell .hub-card,
html[data-theme="dark"] .page-shell .module-card,
html[data-theme="dark"] .page-shell .menu-card,
html[data-theme="dark"] .page-shell .report-card,
html[data-theme="dark"] .page-shell .quick-card,
html[data-theme="dark"] .page-shell .feature-card,
html[data-theme="dark"] .page-shell .box,
html[data-theme="dark"] .page-shell .card,
html[data-theme="dark"] .page-shell .panel,

body[data-theme="dark"] .page-shell .hub-card,
body[data-theme="dark"] .page-shell .module-card,
body[data-theme="dark"] .page-shell .menu-card,
body[data-theme="dark"] .page-shell .report-card,
body[data-theme="dark"] .page-shell .quick-card,
body[data-theme="dark"] .page-shell .feature-card,
body[data-theme="dark"] .page-shell .box,
body[data-theme="dark"] .page-shell .card,
body[data-theme="dark"] .page-shell .panel,

html.dark .page-shell .hub-card,
html.dark .page-shell .module-card,
html.dark .page-shell .menu-card,
html.dark .page-shell .report-card,
html.dark .page-shell .quick-card,
html.dark .page-shell .feature-card,
html.dark .page-shell .box,
html.dark .page-shell .card,
html.dark .page-shell .panel,

body.dark .page-shell .hub-card,
body.dark .page-shell .module-card,
body.dark .page-shell .menu-card,
body.dark .page-shell .report-card,
body.dark .page-shell .quick-card,
body.dark .page-shell .feature-card,
body.dark .page-shell .box,
body.dark .page-shell .card,
body.dark .page-shell .panel {
  background: #111827 !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, .20) !important;
}

/* Fix all text inside those cards */
html[data-theme="dark"] .page-shell .hub-card *,
html[data-theme="dark"] .page-shell .module-card *,
html[data-theme="dark"] .page-shell .menu-card *,
html[data-theme="dark"] .page-shell .report-card *,
html[data-theme="dark"] .page-shell .quick-card *,
html[data-theme="dark"] .page-shell .feature-card *,
html[data-theme="dark"] .page-shell .box *,
html[data-theme="dark"] .page-shell .card *,
html[data-theme="dark"] .page-shell .panel *,

body[data-theme="dark"] .page-shell .hub-card *,
body[data-theme="dark"] .page-shell .module-card *,
body[data-theme="dark"] .page-shell .menu-card *,
body[data-theme="dark"] .page-shell .report-card *,
body[data-theme="dark"] .page-shell .quick-card *,
body[data-theme="dark"] .page-shell .feature-card *,
body[data-theme="dark"] .page-shell .box *,
body[data-theme="dark"] .page-shell .card *,
body[data-theme="dark"] .page-shell .panel *,

html.dark .page-shell .hub-card *,
html.dark .page-shell .module-card *,
html.dark .page-shell .menu-card *,
html.dark .page-shell .report-card *,
html.dark .page-shell .quick-card *,
html.dark .page-shell .feature-card *,
html.dark .page-shell .box *,
html.dark .page-shell .card *,
html.dark .page-shell .panel *,

body.dark .page-shell .hub-card *,
body.dark .page-shell .module-card *,
body.dark .page-shell .menu-card *,
body.dark .page-shell .report-card *,
body.dark .page-shell .quick-card *,
body.dark .page-shell .feature-card *,
body.dark .page-shell .box *,
body.dark .page-shell .card *,
body.dark .page-shell .panel * {
  color: inherit;
}

/* Titles must be bright */
html[data-theme="dark"] .page-shell .hub-title,
html[data-theme="dark"] .page-shell .module-title,
html[data-theme="dark"] .page-shell .card-title,
html[data-theme="dark"] .page-shell .report-title,
html[data-theme="dark"] .page-shell .box h1,
html[data-theme="dark"] .page-shell .box h2,
html[data-theme="dark"] .page-shell .box h3,
html[data-theme="dark"] .page-shell .card h1,
html[data-theme="dark"] .page-shell .card h2,
html[data-theme="dark"] .page-shell .card h3,

body[data-theme="dark"] .page-shell .hub-title,
body[data-theme="dark"] .page-shell .module-title,
body[data-theme="dark"] .page-shell .card-title,
body[data-theme="dark"] .page-shell .report-title,
body[data-theme="dark"] .page-shell .box h1,
body[data-theme="dark"] .page-shell .box h2,
body[data-theme="dark"] .page-shell .box h3,
body[data-theme="dark"] .page-shell .card h1,
body[data-theme="dark"] .page-shell .card h2,
body[data-theme="dark"] .page-shell .card h3,

html.dark .page-shell .hub-title,
html.dark .page-shell .module-title,
html.dark .page-shell .card-title,
html.dark .page-shell .report-title,
html.dark .page-shell .box h1,
html.dark .page-shell .box h2,
html.dark .page-shell .box h3,
html.dark .page-shell .card h1,
html.dark .page-shell .card h2,
html.dark .page-shell .card h3,

body.dark .page-shell .hub-title,
body.dark .page-shell .module-title,
body.dark .page-shell .card-title,
body.dark .page-shell .report-title,
body.dark .page-shell .box h1,
body.dark .page-shell .box h2,
body.dark .page-shell .box h3,
body.dark .page-shell .card h1,
body.dark .page-shell .card h2,
body.dark .page-shell .card h3 {
  color: #f8fafc !important;
}

/* Descriptions/subtexts must not be too pale */
html[data-theme="dark"] .page-shell .hub-desc,
html[data-theme="dark"] .page-shell .module-desc,
html[data-theme="dark"] .page-shell .card-desc,
html[data-theme="dark"] .page-shell .report-desc,
html[data-theme="dark"] .page-shell .small,
html[data-theme="dark"] .page-shell .muted,
html[data-theme="dark"] .page-shell .text-muted,

body[data-theme="dark"] .page-shell .hub-desc,
body[data-theme="dark"] .page-shell .module-desc,
body[data-theme="dark"] .page-shell .card-desc,
body[data-theme="dark"] .page-shell .report-desc,
body[data-theme="dark"] .page-shell .small,
body[data-theme="dark"] .page-shell .muted,
body[data-theme="dark"] .page-shell .text-muted,

html.dark .page-shell .hub-desc,
html.dark .page-shell .module-desc,
html.dark .page-shell .card-desc,
html.dark .page-shell .report-desc,
html.dark .page-shell .small,
html.dark .page-shell .muted,
html.dark .page-shell .text-muted,

body.dark .page-shell .hub-desc,
body.dark .page-shell .module-desc,
body.dark .page-shell .card-desc,
body.dark .page-shell .report-desc,
body.dark .page-shell .small,
body.dark .page-shell .muted,
body.dark .page-shell .text-muted {
  color: #cbd5e1 !important;
}

/* Special fix: any white card inside dark page should become dark */
html[data-theme="dark"] .page-shell [style*="background:#fff"],
html[data-theme="dark"] .page-shell [style*="background: #fff"],
html[data-theme="dark"] .page-shell [style*="background:white"],
html[data-theme="dark"] .page-shell [style*="background: white"],
html[data-theme="dark"] .page-shell [style*="background-color:#fff"],
html[data-theme="dark"] .page-shell [style*="background-color: #fff"],
html[data-theme="dark"] .page-shell [style*="background-color:white"],
html[data-theme="dark"] .page-shell [style*="background-color: white"] {
  background: #111827 !important;
  color: #f8fafc !important;
}

/* If a page intentionally keeps white inputs/file buttons, keep text dark on those controls */
html[data-theme="dark"] input[type="file"]::file-selector-button {
  background: #e5e7eb !important;
  color: #111827 !important;
  border: 1px solid #cbd5e1 !important;
}

/* Practical Exam table polish after layout align */
html[data-theme="dark"] .page-shell table th,
html[data-theme="dark"] .page-shell table td,
body[data-theme="dark"] .page-shell table th,
body[data-theme="dark"] .page-shell table td,
html.dark .page-shell table th,
html.dark .page-shell table td,
body.dark .page-shell table th,
body.dark .page-shell table td {
  color: #f8fafc !important;
  border-color: #334155 !important;
}

html[data-theme="dark"] .page-shell table thead th,
body[data-theme="dark"] .page-shell table thead th,
html.dark .page-shell table thead th,
body.dark .page-shell table thead th {
  background: #1e293b !important;
  color: #f8fafc !important;
}

/* Keep light theme untouched */
html[data-theme="light"] .page-shell .hub-card,
html[data-theme="light"] .page-shell .module-card,
html[data-theme="light"] .page-shell .menu-card,
html[data-theme="light"] .page-shell .report-card,
html[data-theme="light"] .page-shell .quick-card,
html[data-theme="light"] .page-shell .feature-card {
  background: #ffffff !important;
  color: #0f172a !important;
}

html[data-theme="light"] .page-shell .hub-desc,
html[data-theme="light"] .page-shell .module-desc,
html[data-theme="light"] .page-shell .card-desc,
html[data-theme="light"] .page-shell .report-desc,
html[data-theme="light"] .page-shell .small,
html[data-theme="light"] .page-shell .muted,
html[data-theme="light"] .page-shell .text-muted {
  color: #64748b !important;
}


/* =========================================================
   REPORTS DARK CARD FIX V1
   Scope: /modules/reports only
   Purpose: fix white cards + pale text in dark mode
   ========================================================= */

html[data-theme="dark"] .reports-page-v1 {
  color: #f8fafc !important;
}

html[data-theme="dark"] .reports-page-v1 .box,
html[data-theme="dark"] .reports-page-v1 .card,
html[data-theme="dark"] .reports-page-v1 .panel,
html[data-theme="dark"] .reports-page-v1 .hub-card,
html[data-theme="dark"] .reports-page-v1 .module-card,
html[data-theme="dark"] .reports-page-v1 .report-card,
html[data-theme="dark"] .reports-page-v1 a:not(.btn) {
  background: #111827 !important;
  color: #f8fafc !important;
  border: 1px solid rgba(148, 163, 184, .20) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .22) !important;
}

html[data-theme="dark"] .reports-page-v1 .box *,
html[data-theme="dark"] .reports-page-v1 .card *,
html[data-theme="dark"] .reports-page-v1 .panel *,
html[data-theme="dark"] .reports-page-v1 .hub-card *,
html[data-theme="dark"] .reports-page-v1 .module-card *,
html[data-theme="dark"] .reports-page-v1 .report-card *,
html[data-theme="dark"] .reports-page-v1 a:not(.btn) * {
  color: inherit !important;
}

html[data-theme="dark"] .reports-page-v1 h1,
html[data-theme="dark"] .reports-page-v1 h2,
html[data-theme="dark"] .reports-page-v1 h3,
html[data-theme="dark"] .reports-page-v1 .hub-title,
html[data-theme="dark"] .reports-page-v1 .module-title,
html[data-theme="dark"] .reports-page-v1 .report-title,
html[data-theme="dark"] .reports-page-v1 .card-title {
  color: #f8fafc !important;
}

html[data-theme="dark"] .reports-page-v1 .small,
html[data-theme="dark"] .reports-page-v1 .muted,
html[data-theme="dark"] .reports-page-v1 .text-muted,
html[data-theme="dark"] .reports-page-v1 .hub-desc,
html[data-theme="dark"] .reports-page-v1 .module-desc,
html[data-theme="dark"] .reports-page-v1 .report-desc,
html[data-theme="dark"] .reports-page-v1 .card-desc,
html[data-theme="dark"] .reports-page-v1 p {
  color: #cbd5e1 !important;
}

/* Catch inline white backgrounds only inside reports page */
html[data-theme="dark"] .reports-page-v1 [style*="background:#fff"],
html[data-theme="dark"] .reports-page-v1 [style*="background: #fff"],
html[data-theme="dark"] .reports-page-v1 [style*="background:white"],
html[data-theme="dark"] .reports-page-v1 [style*="background: white"],
html[data-theme="dark"] .reports-page-v1 [style*="background-color:#fff"],
html[data-theme="dark"] .reports-page-v1 [style*="background-color: #fff"],
html[data-theme="dark"] .reports-page-v1 [style*="background-color:white"],
html[data-theme="dark"] .reports-page-v1 [style*="background-color: white"] {
  background: #111827 !important;
  color: #f8fafc !important;
}

/* Light theme must remain clean */
html[data-theme="light"] .reports-page-v1 .box,
html[data-theme="light"] .reports-page-v1 .card,
html[data-theme="light"] .reports-page-v1 .panel,
html[data-theme="light"] .reports-page-v1 .hub-card,
html[data-theme="light"] .reports-page-v1 .module-card,
html[data-theme="light"] .reports-page-v1 .report-card,
html[data-theme="light"] .reports-page-v1 a:not(.btn) {
  background: #ffffff !important;
  color: #0f172a !important;
}

html[data-theme="light"] .reports-page-v1 .small,
html[data-theme="light"] .reports-page-v1 .muted,
html[data-theme="light"] .reports-page-v1 .text-muted,
html[data-theme="light"] .reports-page-v1 .hub-desc,
html[data-theme="light"] .reports-page-v1 .module-desc,
html[data-theme="light"] .reports-page-v1 .report-desc,
html[data-theme="light"] .reports-page-v1 .card-desc,
html[data-theme="light"] .reports-page-v1 p {
  color: #64748b !important;
}


/* =========================================================
   PRINT BORANG AHLI PAGE ALIGN V1B
   Scope: /admin/borang-ahli-print-list only
   ========================================================= */

.print-borang-page-v1 {
  display: grid !important;
  gap: 16px !important;
}

.print-borang-page-v1 .print-borang-search-form {
  display: grid !important;
  gap: 10px !important;
  margin-top: 14px !important;
  margin-bottom: 14px !important;
}

.print-borang-page-v1 input {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 14px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
}

.print-borang-page-v1 .btn,
.print-borang-page-v1 button,
.print-borang-page-v1 a {
  border-radius: 12px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.print-borang-page-v1 .print-borang-template-btn {
  display: block !important;
  text-align: center !important;
  padding: 12px 14px !important;
  background: #334155 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .print-borang-page-v1 .box,
html[data-theme="dark"] .print-borang-page-v1 .card,
html[data-theme="dark"] .print-borang-page-v1 .panel,
html[data-theme="dark"] .print-borang-page-v1 .print-borang-search-card {
  background: #111827 !important;
  color: #f8fafc !important;
  border: 1px solid rgba(148, 163, 184, .20) !important;
}

html[data-theme="dark"] .print-borang-page-v1 .box *,
html[data-theme="dark"] .print-borang-page-v1 .card *,
html[data-theme="dark"] .print-borang-page-v1 .panel *,
html[data-theme="dark"] .print-borang-page-v1 .print-borang-search-card * {
  color: inherit !important;
}

html[data-theme="dark"] .print-borang-page-v1 input {
  background: #0b1220 !important;
  color: #f8fafc !important;
  border: 1px solid #334155 !important;
}

html[data-theme="dark"] .print-borang-page-v1 input::placeholder {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .print-borang-page-v1 [style*="background:white"],
html[data-theme="dark"] .print-borang-page-v1 [style*="background: white"],
html[data-theme="dark"] .print-borang-page-v1 [style*="background:#fff"],
html[data-theme="dark"] .print-borang-page-v1 [style*="background: #fff"] {
  background: #111827 !important;
  color: #f8fafc !important;
  border: 1px solid rgba(148, 163, 184, .20) !important;
}

html[data-theme="dark"] .print-borang-page-v1 [style*="color:#555"],
html[data-theme="dark"] .print-borang-page-v1 [style*="color: #555"] {
  color: #cbd5e1 !important;
}

html[data-theme="light"] .print-borang-page-v1 .box,
html[data-theme="light"] .print-borang-page-v1 .card,
html[data-theme="light"] .print-borang-page-v1 .panel,
html[data-theme="light"] .print-borang-page-v1 .print-borang-search-card {
  background: #ffffff !important;
  color: #0f172a !important;
}


/* =========================================================
   JOM SILAT - USERNAME DARK TEXT FIX
   Purpose: username inside bright profile box must be readable
   Patch: username-dark-text-v1
   ========================================================= */

/* Keep the top user/profile box readable even when sidebar is dark */
html.dark .sidebar [class*="user"],
body.dark .sidebar [class*="user"],
html.dark .sidebar [class*="account"],
body.dark .sidebar [class*="account"],
html.dark .sidebar [class*="profile"],
body.dark .sidebar [class*="profile"],
html.dark .app-sidebar [class*="user"],
body.dark .app-sidebar [class*="user"],
html.dark .app-sidebar [class*="account"],
body.dark .app-sidebar [class*="account"],
html.dark .app-sidebar [class*="profile"],
body.dark .app-sidebar [class*="profile"],
html.dark aside [class*="user"],
body.dark aside [class*="user"],
html.dark aside [class*="account"],
body.dark aside [class*="account"],
html.dark aside [class*="profile"],
body.dark aside [class*="profile"] {
    color: #111827 !important;
}

/* Force all text inside the bright user box to dark */
html.dark .sidebar [class*="user"] *,
body.dark .sidebar [class*="user"] *,
html.dark .sidebar [class*="account"] *,
body.dark .sidebar [class*="account"] *,
html.dark .sidebar [class*="profile"] *,
body.dark .sidebar [class*="profile"] *,
html.dark .app-sidebar [class*="user"] *,
body.dark .app-sidebar [class*="user"] *,
html.dark .app-sidebar [class*="account"] *,
body.dark .app-sidebar [class*="account"] *,
html.dark .app-sidebar [class*="profile"] *,
body.dark .app-sidebar [class*="profile"] *,
html.dark aside [class*="user"] *,
body.dark aside [class*="user"] *,
html.dark aside [class*="account"] *,
body.dark aside [class*="account"] *,
html.dark aside [class*="profile"] *,
body.dark aside [class*="profile"] * {
    color: #111827 !important;
}

/* Specific fallback for username text elements */
html.dark .sidebar strong,
body.dark .sidebar strong,
html.dark .sidebar b,
body.dark .sidebar b,
html.dark .app-sidebar strong,
body.dark .app-sidebar strong,
html.dark .app-sidebar b,
body.dark .app-sidebar b,
html.dark aside strong,
body.dark aside strong,
html.dark aside b,
body.dark aside b {
    color: #111827 !important;
    text-shadow: none !important;
}

/* Keep profile action icons visible */
html.dark .sidebar [class*="user"] button,
body.dark .sidebar [class*="user"] button,
html.dark .sidebar [class*="account"] button,
body.dark .sidebar [class*="account"] button,
html.dark .sidebar [class*="profile"] button,
body.dark .sidebar [class*="profile"] button {
    color: #1f2937 !important;
}

/* If the user box uses a direct top panel without class, force the first card area text dark */
html.dark .sidebar > div:first-of-type,
body.dark .sidebar > div:first-of-type,
html.dark .app-sidebar > div:first-of-type,
body.dark .app-sidebar > div:first-of-type,
html.dark aside > div:first-of-type,
body.dark aside > div:first-of-type {
    color: #111827 !important;
}

html.dark .sidebar > div:first-of-type *,
body.dark .sidebar > div:first-of-type *,
html.dark .app-sidebar > div:first-of-type *,
body.dark .app-sidebar > div:first-of-type *,
html.dark aside > div:first-of-type *,
body.dark aside > div:first-of-type * {
    color: #111827 !important;
}




/* =========================================================
   JOM SILAT - DIRECT ACCOUNT USERNAME READABILITY FIX
   Target actual classes: direct-account-v28 / direct-account-user-v28
   ========================================================= */

.direct-account-v28 {
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
}

.direct-account-user-v28 {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    opacity: 1 !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}

.direct-account-user-v28 *,
.direct-account-v28 .direct-account-user-v28 *,
.direct-account-v28 span,
.direct-account-v28 strong,
.direct-account-v28 b {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Keep action buttons readable */
.direct-account-actions-v28 a,
.direct-account-actions-v28 button {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    opacity: 1 !important;
}

/* Logout remains visually red */
.direct-account-actions-v28 .direct-logout-v28,
.direct-account-actions-v28 a[href="/logout"] {
    color: #991b1b !important;
    -webkit-text-fill-color: #991b1b !important;
}


/* =========================================================
   JOM SILAT - DIRECT ACCOUNT ICON READABILITY FIX
   Target: direct-account-icon-v28
   ========================================================= */

.direct-account-icon-v28 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    margin-right: 8px !important;
    border-radius: 999px !important;
    background: #e5e7eb !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    vertical-align: middle !important;
}

.direct-account-user-v28 {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    opacity: 1 !important;
}

.direct-account-user-v28 .direct-account-icon-v28 {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    opacity: 1 !important;
}


/* =========================================================
   JOM SILAT - FINAL DIRECT ACCOUNT USER MOBILE/DESKTOP FIX
   Target exact classes:
   direct-account-v28
   direct-account-user-v28
   direct-account-icon-v28
   direct-account-name-v28
   ========================================================= */

html body .direct-account-v28,
html.dark body .direct-account-v28,
body.dark .direct-account-v28,
.direct-account-v28 {
    background: rgba(255,255,255,0.96) !important;
    border: 1px solid rgba(148,163,184,0.45) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.22) !important;
}

html body .direct-account-user-v28,
html.dark body .direct-account-user-v28,
body.dark .direct-account-user-v28,
.direct-account-user-v28 {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    opacity: 1 !important;
    font-weight: 900 !important;
    text-shadow: none !important;
}

html body .direct-account-name-v28,
html.dark body .direct-account-name-v28,
body.dark .direct-account-name-v28,
.direct-account-name-v28 {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    opacity: 1 !important;
    font-weight: 900 !important;
    text-shadow: none !important;
}

html body .direct-account-icon-v28,
html.dark body .direct-account-icon-v28,
body.dark .direct-account-icon-v28,
.direct-account-icon-v28 {
    display: inline-flex !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: #e5e7eb !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    opacity: 1 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-shadow: none !important;
}

/* Mobile drawer exact fallback */
@media (max-width: 900px) {
    .direct-account-v28,
    .mobile-drawer .direct-account-v28,
    .drawer .direct-account-v28,
    .sidebar .direct-account-v28,
    aside .direct-account-v28 {
        background: rgba(255,255,255,0.97) !important;
    }

    .direct-account-user-v28,
    .direct-account-user-v28 *,
    .mobile-drawer .direct-account-user-v28,
    .mobile-drawer .direct-account-user-v28 *,
    .drawer .direct-account-user-v28,
    .drawer .direct-account-user-v28 *,
    .sidebar .direct-account-user-v28,
    .sidebar .direct-account-user-v28 *,
    aside .direct-account-user-v28,
    aside .direct-account-user-v28 * {
        color: #111827 !important;
        -webkit-text-fill-color: #111827 !important;
        opacity: 1 !important;
        text-shadow: none !important;
    }
}


/* =========================================================
   JOM SILAT MOBILE UI STABILIZER V83
   Purpose:
   1) keep direct account username/icon readable
   2) stop KPI cards becoming white unreadable blocks in mobile dark mode
   ========================================================= */

/* Account/user card */
html body .direct-account-v28,
html[data-theme="dark"] body .direct-account-v28,
html.dark body .direct-account-v28,
body.dark .direct-account-v28 {
    background: rgba(255,255,255,0.97) !important;
    border: 1px solid rgba(148,163,184,0.42) !important;
}

html body .direct-account-user-v28,
html body .direct-account-user-v28 *,
html[data-theme="dark"] body .direct-account-user-v28,
html[data-theme="dark"] body .direct-account-user-v28 *,
html.dark body .direct-account-user-v28,
html.dark body .direct-account-user-v28 *,
body.dark .direct-account-user-v28,
body.dark .direct-account-user-v28 * {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

.direct-account-icon-v28 {
    background: #e5e7eb !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    opacity: 1 !important;
}

/* Mobile dark KPI/card readability */
@media (max-width: 900px) {
    html[data-theme="dark"] body .stat-card,
    html[data-theme="dark"] body .dashboard-card,
    html[data-theme="dark"] body .module-card,
    html[data-theme="dark"] body .card,
    html[data-theme="dark"] body .panel,
    html[data-theme="dark"] body .box,
    html.dark body .stat-card,
    html.dark body .dashboard-card,
    html.dark body .module-card,
    html.dark body .card,
    html.dark body .panel,
    html.dark body .box,
    body.dark .stat-card,
    body.dark .dashboard-card,
    body.dark .module-card,
    body.dark .card,
    body.dark .panel,
    body.dark .box {
        background: rgba(15,23,42,0.96) !important;
        color: #f8fafc !important;
        border-color: rgba(148,163,184,0.22) !important;
        box-shadow: 0 12px 32px rgba(0,0,0,0.28) !important;
    }

    html[data-theme="dark"] body .stat-card *,
    html[data-theme="dark"] body .dashboard-card *,
    html[data-theme="dark"] body .module-card *,
    html[data-theme="dark"] body .card *,
    html[data-theme="dark"] body .panel *,
    html[data-theme="dark"] body .box *,
    html.dark body .stat-card *,
    html.dark body .dashboard-card *,
    html.dark body .module-card *,
    html.dark body .card *,
    html.dark body .panel *,
    html.dark body .box *,
    body.dark .stat-card *,
    body.dark .dashboard-card *,
    body.dark .module-card *,
    body.dark .card *,
    body.dark .panel *,
    body.dark .box * {
        color: #f8fafc !important;
        -webkit-text-fill-color: #f8fafc !important;
        opacity: 1 !important;
        text-shadow: none !important;
    }

    /* KPI numbers */
    html[data-theme="dark"] body .stat-card h1,
    html[data-theme="dark"] body .stat-card h2,
    html[data-theme="dark"] body .stat-card h3,
    html[data-theme="dark"] body .stat-card .value,
    html[data-theme="dark"] body .stat-card .amount,
    html.dark body .stat-card h1,
    html.dark body .stat-card h2,
    html.dark body .stat-card h3,
    html.dark body .stat-card .value,
    html.dark body .stat-card .amount,
    body.dark .stat-card h1,
    body.dark .stat-card h2,
    body.dark .stat-card h3,
    body.dark .stat-card .value,
    body.dark .stat-card .amount {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        opacity: 1 !important;
        font-weight: 900 !important;
    }
}


/* =========================================================
   JOM SILAT - ACCOUNT USER SVG ICON VISIBLE FIX
   ========================================================= */

.direct-account-user-v28 {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
}

.direct-account-icon-v28 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    border-radius: 999px !important;
    background: #e5e7eb !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    opacity: 1 !important;
}

.direct-account-icon-v28 svg {
    display: block !important;
    width: 15px !important;
    height: 15px !important;
    stroke: #111827 !important;
    color: #111827 !important;
    opacity: 1 !important;
}

.direct-account-name-v28 {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    opacity: 1 !important;
    font-weight: 900 !important;
}