/*
 * NEXCIP_THEME_R5_5_3
 * IMPORTANT:
 * Every visual override below is scoped to html[data-nx-theme="light"].
 * Dark mode receives ZERO visual overrides from this file.
 */

/* ---------- Light palette ---------- */
html[data-nx-theme="light"]{
  color-scheme:light;
  --nx-bg:#f4f7f5;
  --nx-surface:#ffffff;
  --nx-surface-soft:#f8faf9;
  --nx-sidebar:#eef4f0;
  --nx-text:#152019;
  --nx-text-2:#34423a;
  --nx-muted:#6c7a72;
  --nx-line:#d9e3dc;
  --nx-line-soft:#e8eeea;
  --nx-accent:#baff00;
  --nx-shadow:0 8px 24px rgba(20,35,25,.055);
}

/* ---------- Shell ---------- */
html[data-nx-theme="light"] body,
html[data-nx-theme="light"] #appScreen,
html[data-nx-theme="light"] .app,
html[data-nx-theme="light"] .content,
html[data-nx-theme="light"] .main-content,
html[data-nx-theme="light"] .page-content{
  background:var(--nx-bg)!important;
  color:var(--nx-text)!important;
}

html[data-nx-theme="light"] #sidebar,
html[data-nx-theme="light"] .sidebar,
html[data-nx-theme="light"] .sidebar-brand,
html[data-nx-theme="light"] .sidebar-foot,
html[data-nx-theme="light"] .sidebar-bottom{
  background:var(--nx-sidebar)!important;
  color:var(--nx-text)!important;
  border-color:var(--nx-line)!important;
}

html[data-nx-theme="light"] .topbar,
html[data-nx-theme="light"] header,
html[data-nx-theme="light"] .header,
html[data-nx-theme="light"] .app-header{
  background:#fff!important;
  color:var(--nx-text)!important;
  border-color:var(--nx-line)!important;
}

/* ---------- Headings / text ---------- */
html[data-nx-theme="light"] :is(h1,h2,h3,h4,h5,h6,strong,b){
  color:var(--nx-text)!important;
}

html[data-nx-theme="light"] :is(p,span,label,td,th,li){
  text-shadow:none!important;
}

html[data-nx-theme="light"] :is(.muted,.section-note,.helper,.subtle,.caption,.nx52-muted){
  color:var(--nx-muted)!important;
}

/* ---------- Dashboard top stat cards ----------
   The active app builds them inside .stats; force a coherent LIGHT treatment,
   regardless of old dark status classes or inline background values.
*/
html[data-nx-theme="light"] .stats > *,
html[data-nx-theme="light"] .stats .stat,
html[data-nx-theme="light"] .stat,
html[data-nx-theme="light"] .stat-card,
html[data-nx-theme="light"] .metric-card,
html[data-nx-theme="light"] .dashboard-card{
  background:#fff!important;
  background-image:none!important;
  color:var(--nx-text)!important;
  border-color:var(--nx-line)!important;
  box-shadow:var(--nx-shadow)!important;
}

html[data-nx-theme="light"] .stats > * :is(div,span,strong,b,small,p,h1,h2,h3,h4,h5,h6),
html[data-nx-theme="light"] .stat :is(div,span,strong,b,small,p,h1,h2,h3,h4,h5,h6),
html[data-nx-theme="light"] .stat-card :is(div,span,strong,b,small,p,h1,h2,h3,h4,h5,h6),
html[data-nx-theme="light"] .metric-card :is(div,span,strong,b,small,p,h1,h2,h3,h4,h5,h6),
html[data-nx-theme="light"] .dashboard-card :is(div,span,strong,b,small,p,h1,h2,h3,h4,h5,h6){
  color:var(--nx-text)!important;
}

html[data-nx-theme="light"] .stats > * small,
html[data-nx-theme="light"] .stat small,
html[data-nx-theme="light"] .stat-card small,
html[data-nx-theme="light"] .metric-card small,
html[data-nx-theme="light"] .dashboard-card small{
  color:var(--nx-muted)!important;
}

/* Keep dashboard semantic accent as a thin top border, not a dark filled card. */
html[data-nx-theme="light"] .stats > *.success,
html[data-nx-theme="light"] .stat.success{border-top-color:#22c983!important}
html[data-nx-theme="light"] .stats > *.warning,
html[data-nx-theme="light"] .stat.warning{border-top-color:#f0b323!important}
html[data-nx-theme="light"] .stats > *.danger,
html[data-nx-theme="light"] .stat.danger{border-top-color:#ef5664!important}
html[data-nx-theme="light"] .stats > *.info,
html[data-nx-theme="light"] .stat.info{border-top-color:#4f94ff!important}

/* ---------- Generic panels ---------- */
html[data-nx-theme="light"] .panel,
html[data-nx-theme="light"] .card,
html[data-nx-theme="light"] .table-wrap,
html[data-nx-theme="light"] .receipt-preview,
html[data-nx-theme="light"] .settings-preview,
html[data-nx-theme="light"] .nx52-card,
html[data-nx-theme="light"] .nx52-ticket,
html[data-nx-theme="light"] .nx-r5-method,
html[data-nx-theme="light"] .nx-r5-info{
  background:#fff!important;
  background-image:none!important;
  color:var(--nx-text)!important;
  border-color:var(--nx-line)!important;
  box-shadow:var(--nx-shadow)!important;
}

/* ---------- Reward & Margin / detail mini-cards ----------
   These were still inheriting the old black dashboard fill.
*/
html[data-nx-theme="light"] :is(
  .detail-grid > *,
  .detail-item,
  .mini-card,
  .mini-stat,
  .summary-item,
  .summary-card,
  .reward-item,
  .reward-card,
  .info-card,
  .kv,
  .kv-item,
  .metric,
  .metric-item
){
  background:var(--nx-surface-soft)!important;
  background-image:none!important;
  color:var(--nx-text)!important;
  border-color:var(--nx-line)!important;
  box-shadow:none!important;
}

html[data-nx-theme="light"] :is(
  .detail-grid > *,
  .detail-item,
  .mini-card,
  .mini-stat,
  .summary-item,
  .summary-card,
  .reward-item,
  .reward-card,
  .info-card,
  .kv,
  .kv-item,
  .metric,
  .metric-item
) :is(div,span,strong,b,small,p,h1,h2,h3,h4,h5,h6){
  color:var(--nx-text)!important;
}

html[data-nx-theme="light"] :is(
  .detail-grid > *,
  .detail-item,
  .mini-card,
  .mini-stat,
  .summary-item,
  .summary-card,
  .reward-item,
  .reward-card,
  .info-card,
  .kv,
  .kv-item,
  .metric,
  .metric-item
) small{
  color:var(--nx-muted)!important;
}

/* ---------- Tables ----------
   Fix black/blank hover from the original dark-mode table rule.
*/
html[data-nx-theme="light"] table,
html[data-nx-theme="light"] thead,
html[data-nx-theme="light"] tbody,
html[data-nx-theme="light"] tr,
html[data-nx-theme="light"] td,
html[data-nx-theme="light"] th{
  border-color:var(--nx-line)!important;
}

html[data-nx-theme="light"] thead,
html[data-nx-theme="light"] thead tr,
html[data-nx-theme="light"] th{
  background:#f5f8f6!important;
  color:#34423a!important;
}

html[data-nx-theme="light"] tbody tr,
html[data-nx-theme="light"] .table tbody tr,
html[data-nx-theme="light"] .transaction-row,
html[data-nx-theme="light"] .trx-row{
  background:#fff!important;
  background-image:none!important;
  color:var(--nx-text)!important;
}

html[data-nx-theme="light"] tbody tr:nth-child(even){
  background:#fbfdfc!important;
}

html[data-nx-theme="light"] tbody tr:hover,
html[data-nx-theme="light"] .table tbody tr:hover,
html[data-nx-theme="light"] .transaction-row:hover,
html[data-nx-theme="light"] .trx-row:hover,
html[data-nx-theme="light"] #transactionBody tr:hover,
html[data-nx-theme="light"] #transactionsBody tr:hover,
html[data-nx-theme="light"] #dataTransactionsBody tr:hover{
  background:#edf5ef!important;
  background-image:none!important;
  color:var(--nx-text)!important;
}

html[data-nx-theme="light"] tbody tr:hover td,
html[data-nx-theme="light"] tbody tr:hover td > :is(div,span,strong,b,small,p,a):not(.badge):not([class*="badge"]):not([class*="status"]){
  color:var(--nx-text)!important;
}

/* Never turn action buttons blank during row hover. */
html[data-nx-theme="light"] tbody tr:hover :is(button,.btn,[role="button"]){
  opacity:1!important;
}

/* ---------- Forms ---------- */
html[data-nx-theme="light"] :is(input,select,textarea,.input,.form-control,.search-box){
  background:#fff!important;
  color:var(--nx-text)!important;
  border-color:#cdd8d0!important;
  box-shadow:none!important;
}

html[data-nx-theme="light"] input::placeholder,
html[data-nx-theme="light"] textarea::placeholder{
  color:#96a39b!important;
}

/* ---------- Sidebar hover / active ---------- */
html[data-nx-theme="light"] .sidebar :is(a,button,[data-page]):not(.active):hover,
html[data-nx-theme="light"] #navMenu :is(a,button,[data-page]):not(.active):hover{
  background:#f8fbf9!important;
  background-image:none!important;
  color:#223028!important;
}

html[data-nx-theme="light"] .sidebar :is(a,button,[data-page]).active,
html[data-nx-theme="light"] #navMenu :is(a,button,[data-page]).active{
  background:var(--nx-accent)!important;
  color:#10160f!important;
  border-color:#a9d900!important;
}

html[data-nx-theme="light"] .sidebar :is(a,button,[data-page]).active *,
html[data-nx-theme="light"] #navMenu :is(a,button,[data-page]).active *{
  color:#10160f!important;
}

/* ---------- Buttons ---------- */
html[data-nx-theme="light"] :is(.btn.primary,.btn-primary,.primary-btn,.action-btn){
  background:#101b13!important;
  color:#fff!important;
  border-color:#101b13!important;
}

html[data-nx-theme="light"] :is(.btn.secondary,.btn-outline,.secondary-btn,.ghost-btn){
  background:#fff!important;
  color:var(--nx-text)!important;
  border-color:var(--nx-line)!important;
}

/* ---------- Theme switch ---------- */
html[data-nx-theme="light"] #nxThemeToggle{
  background:#f3f6f4!important;
  border-color:#d4dfd7!important;
}

html[data-nx-theme="light"] #nxThemeToggle button{
  color:#536158!important;
  background:transparent!important;
}

html[data-nx-theme="light"] #nxThemeToggle button.active{
  background:var(--nx-accent)!important;
  color:#10160f!important;
}

/* ---------- Sidebar balance ---------- */
html[data-nx-theme="light"] .nx-sidebar-balance{
  background:#fff!important;
  color:var(--nx-text)!important;
  border-color:#d6e2d8!important;
  box-shadow:none!important;
}

html[data-nx-theme="light"] .nx-sidebar-balance *{
  color:var(--nx-text)!important;
}

/* ---------- Status badges stay semantic ---------- */
html[data-nx-theme="light"] :is(.badge.success,.badge-success,.status-success){
  background:#e6f7ed!important;color:#14804a!important;border-color:#c9ecd7!important;
}
html[data-nx-theme="light"] :is(.badge.failed,.badge-failed,.badge-danger,.status-failed,.status-error){
  background:#fff0f1!important;color:#d34758!important;border-color:#f1cbd1!important;
}
html[data-nx-theme="light"] :is(.badge.pending,.badge-warning,.status-pending,.status-process){
  background:#fff7e5!important;color:#ae7300!important;border-color:#f0dfb2!important;
}

/* ====================================================================
   NEXCIP_THEME_R5_5_4
   Targeted LIGHT-MODE corrections only.
   IMPORTANT: every rule is scoped to html[data-nx-theme="light"].
   DARK MODE receives no visual override from this section.
   ==================================================================== */

/* Table hover: override old dark hover on both TR and TD. */
html[data-nx-theme="light"] #pageContent table tbody tr:hover,
html[data-nx-theme="light"] .page-content table tbody tr:hover,
html[data-nx-theme="light"] .table-wrap table tbody tr:hover,
html[data-nx-theme="light"] table.table tbody tr:hover,
html[data-nx-theme="light"] table tbody tr:hover{
  background:#edf5ef !important;
  background-color:#edf5ef !important;
  background-image:none !important;
  color:#172019 !important;
  filter:none !important;
  opacity:1 !important;
  box-shadow:inset 3px 0 0 #b7e900 !important;
}

html[data-nx-theme="light"] #pageContent table tbody tr:hover > td,
html[data-nx-theme="light"] .page-content table tbody tr:hover > td,
html[data-nx-theme="light"] .table-wrap table tbody tr:hover > td,
html[data-nx-theme="light"] table.table tbody tr:hover > td,
html[data-nx-theme="light"] table tbody tr:hover > td{
  background:#edf5ef !important;
  background-color:#edf5ef !important;
  background-image:none !important;
  color:#172019 !important;
  border-color:#d7e2da !important;
  filter:none !important;
  opacity:1 !important;
}

html[data-nx-theme="light"] table tbody tr:hover > td > :is(
  div,span,strong,b,small,p,a,code
):not(.badge):not([class*="badge"]):not([class*="status"]):not(.btn){
  color:#172019 !important;
  opacity:1 !important;
}

html[data-nx-theme="light"] table tbody tr:hover > td small{
  color:#66756c !important;
  opacity:1 !important;
}

html[data-nx-theme="light"] table tbody tr:hover :is(
  button,.btn,[role="button"]
){
  opacity:1 !important;
  filter:none !important;
}

/* Sidebar text contrast: inactive menu labels are darker and clearer. */
html[data-nx-theme="light"] #navMenu [data-page]:not(.active),
html[data-nx-theme="light"] #navMenu a:not(.active),
html[data-nx-theme="light"] #navMenu button:not(.active),
html[data-nx-theme="light"] .sidebar-menu [data-page]:not(.active),
html[data-nx-theme="light"] .sidebar-menu a:not(.active),
html[data-nx-theme="light"] .sidebar-menu button:not(.active){
  color:#202d25 !important;
  opacity:1 !important;
  font-weight:650 !important;
  text-shadow:none !important;
}

html[data-nx-theme="light"] #navMenu [data-page]:not(.active) :is(
  span,strong,b,i
),
html[data-nx-theme="light"] .sidebar-menu [data-page]:not(.active) :is(
  span,strong,b,i
){
  color:#202d25 !important;
  opacity:1 !important;
}

html[data-nx-theme="light"] #navMenu [data-page]:not(.active) svg,
html[data-nx-theme="light"] .sidebar-menu [data-page]:not(.active) svg{
  color:#334239 !important;
  opacity:1 !important;
}

html[data-nx-theme="light"] #sidebar :is(
  .menu-title,.menu-label,.nav-title,.nav-label,.section-title,
  .section-label,.group-title,.group-label,.eyebrow
),
html[data-nx-theme="light"] .sidebar :is(
  .menu-title,.menu-label,.nav-title,.nav-label,.section-title,
  .section-label,.group-title,.group-label,.eyebrow
){
  color:#5c6a61 !important;
  opacity:1 !important;
  font-weight:800 !important;
}

/* Inactive menu hover remains light. */
html[data-nx-theme="light"] #navMenu [data-page]:not(.active):hover,
html[data-nx-theme="light"] #navMenu a:not(.active):hover,
html[data-nx-theme="light"] #navMenu button:not(.active):hover,
html[data-nx-theme="light"] .sidebar-menu [data-page]:not(.active):hover,
html[data-nx-theme="light"] .sidebar-menu a:not(.active):hover,
html[data-nx-theme="light"] .sidebar-menu button:not(.active):hover{
  background:#f8fbf9 !important;
  background-color:#f8fbf9 !important;
  background-image:none !important;
  color:#172019 !important;
  opacity:1 !important;
}

html[data-nx-theme="light"] #navMenu [data-page].active,
html[data-nx-theme="light"] .sidebar-menu [data-page].active{
  color:#10160f !important;
  opacity:1 !important;
}

/* ====================================================================
   NEXCIP_THEME_R5_5_5
   LIGHT full-page background correction only.
   DARK MODE is untouched because every rule is light-scoped.
   ==================================================================== */

html[data-nx-theme="light"],
html[data-nx-theme="light"] body{
  background:#f4f7f5 !important;
  background-color:#f4f7f5 !important;
  background-image:none !important;
  min-height:100% !important;
}

html[data-nx-theme="light"] body{
  min-height:100vh !important;
}

/* Keep the whole application canvas light even when page content is short. */
html[data-nx-theme="light"] :is(
  #appScreen,
  .app,
  .app-shell,
  .layout,
  .main,
  main,
  .main-content,
  .content,
  .content-area,
  .workspace,
  .page,
  .page-wrap,
  .page-content
){
  background:#f4f7f5 !important;
  background-color:#f4f7f5 !important;
  background-image:none !important;
}

/* Stretch the major page shells so the light canvas reaches viewport bottom. */
html[data-nx-theme="light"] :is(
  #appScreen,
  .app,
  .app-shell,
  .layout,
  .main,
  main,
  .main-content,
  .content,
  .content-area,
  .workspace
){
  min-height:100vh !important;
}

/* Remove old decorative dark/grid layers that may sit behind short pages. */
html[data-nx-theme="light"] body::before,
html[data-nx-theme="light"] body::after,
html[data-nx-theme="light"] #appScreen::before,
html[data-nx-theme="light"] #appScreen::after,
html[data-nx-theme="light"] .app::before,
html[data-nx-theme="light"] .app::after,
html[data-nx-theme="light"] .app-shell::before,
html[data-nx-theme="light"] .app-shell::after,
html[data-nx-theme="light"] .main::before,
html[data-nx-theme="light"] .main::after,
html[data-nx-theme="light"] main::before,
html[data-nx-theme="light"] main::after,
html[data-nx-theme="light"] .main-content::before,
html[data-nx-theme="light"] .main-content::after,
html[data-nx-theme="light"] .content::before,
html[data-nx-theme="light"] .content::after,
html[data-nx-theme="light"] .page-content::before,
html[data-nx-theme="light"] .page-content::after{
  background:none !important;
  background-image:none !important;
}

/* Sidebar keeps its dedicated light shade rather than inheriting page canvas. */
html[data-nx-theme="light"] #sidebar,
html[data-nx-theme="light"] .sidebar{
  background:#eef4f0 !important;
  background-color:#eef4f0 !important;
}