/* Nannajee Solutions Experience UI V6
   Corrective layer for mobile card rendering, high-contrast dark mode,
   original NS brand assets, and consistent enterprise components. */
:root{
  --ns6-radius-xs:10px;--ns6-radius-sm:14px;--ns6-radius:18px;--ns6-radius-lg:24px;--ns6-radius-xl:32px;
  --ns6-touch:44px;--ns6-ease:cubic-bezier(.2,.8,.2,1);
  --ns6-glow:0 20px 55px color-mix(in srgb,var(--ns5-primary,#155eef) 18%,transparent);
}
html{scrollbar-gutter:stable}
body[data-portal="admin"],body[data-portal="member"],body.ns5-fusion-auth{overflow-x:hidden}

/* Exact brand artwork: never crop or replace the user's NS mark. */
.ns4-brand-mark,.ns4-auth-brand img,.ns-auth-icon{background:#071426!important}
.ns4-brand-mark img,.ns4-auth-brand img,.ns-auth-icon{object-fit:contain!important;padding:5px!important}
.ns4-brand-mark img{filter:drop-shadow(0 7px 12px rgba(0,0,0,.18))}

/* App bar and navigation: compact, stable and touch safe. */
.ns4-appbar{min-width:0}.ns4-appbar-title{min-width:0}.ns4-appbar-title>div{min-width:0}
.ns4-actions{flex:0 0 auto}.ns4-icon-btn,.ns4-user{min-height:var(--ns6-touch)}
.ns4-tabbar{scroll-snap-type:x proximity;overscroll-behavior-inline:contain}.ns4-tabbar a{scroll-snap-align:start}
.ns4-nav-link{isolation:isolate}.ns4-nav-link::before{content:"";position:absolute;inset:5px;border-radius:11px;opacity:0;box-shadow:inset 1px 1px 1px rgba(255,255,255,.18);pointer-events:none}.ns4-nav-link.active::before{opacity:1}

/* Bento / spatial / clay / neo layers kept readable, not decorative noise. */
.ns4-bento-card,.panel,.ns-panel,.member-panel,.metric-card{transition:transform .2s var(--ns6-ease),border-color .2s ease,box-shadow .2s ease}
.ns4-bento-card:hover,.panel:hover{transform:translateY(-2px)}
.ns4-maximal{isolation:isolate;overflow:hidden}.ns4-maximal::before{content:"";position:absolute;inset:auto -9% -45% auto;width:300px;height:300px;border-radius:45% 55% 56% 44%;background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.02));filter:blur(1px);transform:rotate(18deg);pointer-events:none}
.metric-card,.ns12-finance-kpi{min-width:0;overflow:hidden}.metric-value{overflow-wrap:anywhere}

/* Forms and controls. */
.form-control,.form-select,.ns-input-wrap{width:100%;max-width:100%}
.form-control,.form-select,.btn,.ns4-icon-btn,.ns4-bottom-nav a,.ns4-bottom-nav button{-webkit-tap-highlight-color:transparent}
.form-check{display:flex;align-items:flex-start;gap:10px}.form-check-input{flex:0 0 auto}
.modal-content{border:1px solid var(--ns5-line);border-radius:var(--ns6-radius-lg);background:var(--ns5-surface);color:var(--ns5-ink);box-shadow:0 36px 100px rgba(0,0,0,.28)}
.modal-header,.modal-footer{border-color:var(--ns5-line)}

/* Desktop tables. */
.table-responsive{border-radius:inherit}.table{--bs-table-bg:transparent;--bs-table-color:var(--ns5-ink);--bs-table-border-color:var(--ns5-line);margin-bottom:0;color:var(--ns5-ink)}
.table>:not(caption)>*>*{vertical-align:middle;color:inherit;background:transparent;border-color:var(--ns5-line)}
.table thead th{color:var(--ns5-muted);font-size:.65rem;font-weight:900;letter-spacing:.075em;text-transform:uppercase;white-space:nowrap}
.table tbody tr{transition:background .16s ease}.table tbody tr:hover{background:color-mix(in srgb,var(--ns5-primary) 3.5%,transparent)}
.table td a{overflow-wrap:anywhere}.ns6-cell-value{min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:normal}

/* Proper mobile record cards. This replaces the broken two-column pseudo-table. */
@media(max-width:767.98px){
  .ns4-content{padding:14px 10px calc(94px + env(safe-area-inset-bottom))}
  .ns4-appbar{height:64px;padding:0 10px;gap:8px}.ns4-tabbar{top:64px;min-height:49px;padding:6px 10px}.ns4-appbar-title h1{font-size:.9rem}.ns4-actions{gap:4px}.ns4-icon-btn{min-width:38px;width:38px;height:38px;padding:0;border-radius:12px}.ns4-user{padding:2px}.ns4-avatar{width:34px;height:34px}
  .ns4-tabbar a{min-height:36px;padding:8px 10px;font-size:.61rem}
  .panel,.ns-panel,.member-panel,.ns4-bento-card,.ns4-card{border-radius:18px!important}.panel-head,.panel-header,.panel-title,.ns4-card-head,.ns-panel-heading{padding:14px}.panel-body{padding:14px}
  .table-responsive{overflow:visible!important;border:0!important;background:transparent!important}
  .table-responsive table,.table-responsive tbody{display:block!important;width:100%!important;min-width:0!important}
  .table-responsive thead{display:none!important}
  .table-responsive tr{display:grid!important;width:100%!important;grid-template-columns:minmax(0,1fr)!important;gap:0!important;margin:0 0 12px!important;padding:9px 12px!important;border:1px solid var(--ns5-line)!important;border-radius:17px!important;background:var(--ns5-surface)!important;box-shadow:var(--ns5-shadow-sm)!important;overflow:hidden!important}
  .table-responsive td{display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:3px!important;width:100%!important;min-width:0!important;padding:8px 1px!important;border:0!important;border-bottom:1px dashed color-mix(in srgb,var(--ns5-line) 85%,transparent)!important;text-align:left!important;white-space:normal!important;overflow:visible!important}
  .table-responsive td:last-child{border-bottom:0!important;padding-bottom:4px!important}
  .table-responsive td::before{content:attr(data-label);display:block!important;width:auto!important;min-width:0!important;margin:0!important;color:var(--ns5-muted)!important;font-size:.58rem!important;font-weight:900!important;line-height:1.25!important;letter-spacing:.065em!important;text-transform:uppercase!important;white-space:normal!important}
  .table-responsive td[data-label=""],.table-responsive td.ns6-no-label{padding-top:5px!important}.table-responsive td[data-label=""]::before,.table-responsive td.ns6-no-label::before{display:none!important}
  .table-responsive td[colspan]{align-items:center!important;text-align:center!important}.table-responsive td[colspan]::before{display:none!important}
  .table-responsive td .btn{align-self:flex-start;min-width:92px}.table-responsive td .badge,.table-responsive td .status-badge,.table-responsive td .locked-id{align-self:flex-start;max-width:100%;white-space:normal;overflow-wrap:anywhere}
  .table-responsive td strong,.table-responsive td a,.table-responsive td span,.table-responsive td div{max-width:100%;overflow-wrap:anywhere}
  .table-responsive td .small{line-height:1.45}
  .ns12-finance-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.ns12-finance-kpi,.metric-card{min-height:108px;padding:14px!important;border-radius:17px!important}.metric-value{font-size:1rem!important;line-height:1.25}
  .d-flex.flex-grow-1,.ns-page-head form,.panel-head form{min-width:0}.d-flex.flex-grow-1>.form-control{min-width:0}
  .ns4-bottom-nav{left:8px;right:8px;bottom:max(7px,env(safe-area-inset-bottom));height:66px;padding:6px;border-radius:20px}.ns4-bottom-nav a,.ns4-bottom-nav button{min-width:0;overflow:hidden}.ns4-bottom-nav span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ns4-fab{right:14px;bottom:88px}
  .ns4-bottom-sheet{max-height:min(76vh,620px);overflow:auto;padding-bottom:max(18px,env(safe-area-inset-bottom))}
  .ns4-dialog-box{max-height:82vh;overflow:auto}
  .ns4-auth-page{display:block;min-height:100svh;padding:0;background:var(--ns5-bg)}.ns4-auth-shell{width:100%;min-height:100svh;border:0;border-radius:0;box-shadow:none}.ns4-auth-main{display:flex;flex-direction:column;justify-content:center;padding:28px 20px calc(32px + env(safe-area-inset-bottom))}.ns4-auth-content{width:100%;max-width:480px;margin:24px auto 0}.ns4-auth-brand{margin:0 auto;width:min(480px,100%)}
}
@media(max-width:480px){
  .ns4-appbar-title p{display:none}.ns4-appbar-title h1{max-width:150px}.ns4-actions .ns4-desktop-only{display:none!important}
  .ns12-finance-kpis{grid-template-columns:1fr 1fr!important}.metric-value{font-size:.9rem!important}
  .table-responsive tr{padding:8px 11px!important;border-radius:15px!important}.table-responsive td{padding:7px 0!important}
  .ns4-sheet-grid{grid-template-columns:1fr 1fr}.ns4-sheet-grid a{min-height:76px}
}

/* High-contrast dark mode: fix white cards, invisible labels and gray inputs. */
html[data-color-mode="dark"]{color-scheme:dark;--bs-body-color:var(--ns5-ink);--bs-body-bg:var(--ns5-bg);--bs-secondary-color:var(--ns5-muted);--bs-border-color:var(--ns5-line)}
html[data-color-mode="dark"] body,html[data-color-mode="dark"] .ns4-main,html[data-color-mode="dark"] .ns4-auth-page{background-color:var(--ns5-bg);color:var(--ns5-ink)}
html[data-color-mode="dark"] .ns4-drawer,html[data-color-mode="dark"] .ns4-appbar,html[data-color-mode="dark"] .ns4-tabbar,html[data-color-mode="dark"] .ns4-bottom-nav,html[data-color-mode="dark"] .ns4-bottom-sheet,html[data-color-mode="dark"] .ns4-dialog-box,html[data-color-mode="dark"] .ns4-popover,html[data-color-mode="dark"] .dropdown-menu,html[data-color-mode="dark"] .modal-content{background:color-mix(in srgb,var(--ns5-surface) 96%,transparent)!important;color:var(--ns5-ink)!important;border-color:var(--ns5-line)!important}
html[data-color-mode="dark"] .panel,html[data-color-mode="dark"] .ns-panel,html[data-color-mode="dark"] .member-panel,html[data-color-mode="dark"] .ns4-card,html[data-color-mode="dark"] .ns4-bento-card,html[data-color-mode="dark"] .metric-card,html[data-color-mode="dark"] .ns12-finance-kpi,html[data-color-mode="dark"] .card,html[data-color-mode="dark"] .bg-white,html[data-color-mode="dark"] .bg-light{background:var(--ns5-surface)!important;color:var(--ns5-ink)!important;border-color:var(--ns5-line)!important}
html[data-color-mode="dark"] .ns4-workspace,html[data-color-mode="dark"] .ns4-nav-search,html[data-color-mode="dark"] .ns4-icon-btn,html[data-color-mode="dark"] .ns4-user,html[data-color-mode="dark"] .btn-light,html[data-color-mode="dark"] .ns4-chip,html[data-color-mode="dark"] .ns5-tabs,html[data-color-mode="dark"] .ns5-tabs .active,html[data-color-mode="dark"] .ns5-timeline-content,html[data-color-mode="dark"] .ns5-command-metrics>div,html[data-color-mode="dark"] .client-timeline-item section{background:var(--ns5-soft)!important;color:var(--ns5-ink)!important;border-color:var(--ns5-line)!important}
html[data-color-mode="dark"] .table{--bs-table-color:var(--ns5-ink);--bs-table-bg:transparent;--bs-table-striped-color:var(--ns5-ink);--bs-table-hover-color:var(--ns5-ink);--bs-table-border-color:var(--ns5-line);color:var(--ns5-ink)!important}
html[data-color-mode="dark"] .table>:not(caption)>*>*,html[data-color-mode="dark"] .table td,html[data-color-mode="dark"] .table th{color:var(--ns5-ink)!important;background:transparent!important;border-color:var(--ns5-line)!important}
html[data-color-mode="dark"] .table thead th{color:#b9c8dc!important}
html[data-color-mode="dark"] .table-responsive tr{background:var(--ns5-surface)!important;border-color:var(--ns5-line)!important}
html[data-color-mode="dark"] .table-responsive td::before{color:#aebdd1!important}
html[data-color-mode="dark"] .form-label,html[data-color-mode="dark"] .form-premium label,html[data-color-mode="dark"] .ns-field label{color:#dbe6f6!important}
html[data-color-mode="dark"] .form-control,html[data-color-mode="dark"] .form-select,html[data-color-mode="dark"] .ns-input-wrap,html[data-color-mode="dark"] input,html[data-color-mode="dark"] textarea,html[data-color-mode="dark"] select{background:#16253b!important;color:#f4f7ff!important;border-color:#365071!important;box-shadow:inset 2px 2px 5px rgba(0,0,0,.28),inset -2px -2px 5px rgba(255,255,255,.025)!important}
html[data-color-mode="dark"] .form-control::placeholder,html[data-color-mode="dark"] input::placeholder,html[data-color-mode="dark"] textarea::placeholder{color:#91a5bf!important;opacity:1}
html[data-color-mode="dark"] .form-select option{background:#101d30;color:#f4f7ff}
html[data-color-mode="dark"] .text-dark,html[data-color-mode="dark"] .text-body{color:var(--ns5-ink)!important}html[data-color-mode="dark"] .text-muted{color:#9fb0c7!important}
html[data-color-mode="dark"] a:not(.btn):not(.ns4-nav-link):not(.ns4-tabbar a):not(.ns4-bottom-nav a){color:#81b2ff}html[data-color-mode="dark"] a:not(.btn):hover{color:#acd0ff}
html[data-color-mode="dark"] .btn-outline-primary{color:#9dc3ff;border-color:#528ce6}html[data-color-mode="dark"] .btn-outline-primary:hover{color:#fff;background:#155eef}
html[data-color-mode="dark"] .btn-outline-dark{color:#eef4ff;border-color:#7f91a9}html[data-color-mode="dark"] .btn-dark{background:linear-gradient(145deg,#29415f,#18283e);color:#fff}
html[data-color-mode="dark"] .badge.text-bg-primary{background:#1f6fec!important;color:#fff!important}html[data-color-mode="dark"] .badge.text-bg-secondary{background:#52637c!important;color:#fff!important}
html[data-color-mode="dark"] .alert-warning{background:#352a12;color:#ffd98c;border-color:#6d5421}html[data-color-mode="dark"] .alert-danger{background:#391923;color:#ffb7c4;border-color:#713044}html[data-color-mode="dark"] .alert-success{background:#102e24;color:#9ff0ce;border-color:#225a46}
html[data-color-mode="dark"] .ns4-auth-shell{background:var(--ns5-surface);border-color:var(--ns5-line)}html[data-color-mode="dark"] .ns4-auth-main{background:var(--ns5-surface);color:var(--ns5-ink)}html[data-color-mode="dark"] .ns4-auth-brand{color:var(--ns5-ink)}
html[data-color-mode="dark"] .ns-invoice,html[data-color-mode="dark"] .ns-letter,html[data-color-mode="dark"] .invoice-paper,html[data-color-mode="dark"] .letter-paper{background:#fff!important;color:#172033!important}

/* Reduced motion and accessibility. */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.ns4-bento-card:hover,.panel:hover{transform:none}}
html[data-color-mode="dark"] input[type="checkbox"]{background:var(--ns5-soft)!important;border-color:#466281!important}
html[data-color-mode="dark"] input[type="checkbox"]:checked{background:var(--ns5-primary)!important;border-color:var(--ns5-primary)!important}