/* Northwind Ops — business dashboard demo (.dx-business-dashboard); .nw-dark switches to the dark theme */
.dx-business-dashboard{
  --dx-bg: #F4F5FA;
  --dx-surface: #FFFFFF;
  --dx-surface-2: #EEF0F7;
  --dx-text: #161A2E;
  --dx-muted: #6A7086;
  --dx-border: #E3E6EF;
  --dx-accent: #4F46E5;
  --dx-accent-ink: #FFFFFF;
  --dx-accent-soft: rgba(79,70,229,.1);
  --dx-radius: 10px;
  --nw-side: #15172A;
  --nw-c1: #4F46E5; --nw-c2: #06B6D4; --nw-c3: #F59E0B; --nw-c4: #EC4899;
  transition: background .3s, color .3s;
}
.dx-business-dashboard.nw-dark{
  --dx-bg: #0E1020;
  --dx-surface: #171A2F;
  --dx-surface-2: #20243D;
  --dx-text: #E9EBF5;
  --dx-muted: #9AA0B8;
  --dx-border: #2A2F4A;
  --dx-accent: #818CF8;
  --dx-accent-ink: #0E1020;
  --dx-accent-soft: rgba(129,140,248,.14);
  --nw-side: #0A0C18;
  --nw-c1: #818CF8;
  color-scheme: dark;
}
.dx-business-dashboard h1{ font-size: 1.55rem; }
.dx-business-dashboard h2{ font-size: 1.02rem; }
.dx-business-dashboard h3{ font-size: .95rem; margin-top: 1.25rem; }

.nw-app{ display:grid; grid-template-columns: 240px 1fr; min-height: calc(100dvh - 56px); }
.nw-side{ position: sticky; top: 56px; height: calc(100dvh - 56px); background: var(--nw-side); color: #C6CAE0; padding: 1.25rem .9rem; display:flex; flex-direction:column; gap: 1.5rem; overflow:auto; }
.nw-brand{ display:flex; align-items:center; gap:.6rem; color:#fff; font-weight:700; font-size: 1.05rem; padding: 0 .5rem; }
.nw-brand-mark{ width:32px; height:32px; border-radius: 9px; display:grid; place-items:center; background: linear-gradient(135deg, #6366F1, #06B6D4); color:#fff; font-weight:800; }
.nw-side nav{ display:flex; flex-direction:column; gap: 2px; }
.nw-side nav a{ display:flex; align-items:center; gap:.7rem; padding: .65rem .75rem; border-radius: 9px; text-decoration:none; font-size:.92rem; font-weight:500; transition: background .15s, color .15s; }
.nw-side nav a svg{ width:19px; height:19px; opacity:.8; }
.nw-side nav a:hover{ background: rgba(255,255,255,.06); color:#fff; }
.nw-side nav a[aria-current]{ background: rgba(99,102,241,.22); color:#fff; }
.nw-side nav a[aria-current] svg{ color:#A5B4FC; opacity:1; }
.nw-nav-count{ margin-left:auto; min-width: 20px; padding: 0 6px; border-radius: 10px; background:#EF4444; color:#fff; font-size: 11px; font-weight:700; text-align:center; }
.nw-nav-count[hidden]{ display:none; }
.nw-side-card{ margin-top:auto; padding: 1rem; border-radius: 12px; background: linear-gradient(135deg, rgba(99,102,241,.35), rgba(6,182,212,.2)); }
.nw-side-card b{ color:#fff; }
.nw-side-card p{ color:#C6CAE0; font-size:.8rem; margin: .35rem 0 .75rem; }
.nw-side-card .dx-btn{ background:#fff; color:#15172A; }

.nw-main{ min-width:0; display:flex; flex-direction:column; }
.nw-top{ position: sticky; top: 56px; z-index: 15; display:flex; align-items:center; gap: 1rem; padding: .7rem clamp(1rem, 2.5vw, 1.75rem); background: color-mix(in srgb, var(--dx-bg) 90%, transparent); backdrop-filter: blur(10px); border-bottom:1px solid var(--dx-border); }
.nw-menu-btn{ display:none !important; }
.nw-global{ flex:1; max-width: 460px; position:relative; }
.nw-results{ position:absolute; top: calc(100% + 6px); left:0; right:0; z-index: 30; background: var(--dx-surface); border:1px solid var(--dx-border); border-radius: 12px; box-shadow: var(--dx-shadow); padding: .5rem; max-height: 60vh; overflow:auto; }
.nw-results[hidden]{ display:none; }
.nw-results h4{ font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color: var(--dx-muted); margin: .5rem .5rem .25rem; }
.nw-results button{ display:flex; gap:.6rem; align-items:center; width:100%; text-align:left; border:0; background:none; padding: .5rem; border-radius: 8px; cursor:pointer; }
.nw-results button:hover{ background: var(--dx-surface-2); }
.nw-results button svg{ width:17px; height:17px; color: var(--dx-accent); }
.nw-results small{ display:block; color: var(--dx-muted); font-size:.78rem; }
.nw-noresult{ padding: .75rem; margin:0; }
.nw-top-actions{ margin-left:auto; }
.nw-pop-wrap{ position:relative; }
.nw-pop{ position:absolute; right:0; top: calc(100% + 8px); z-index: 30; width: 340px; background: var(--dx-surface); border:1px solid var(--dx-border); border-radius: 12px; box-shadow: var(--dx-shadow); padding: .9rem; }
.nw-pop[hidden]{ display:none; }
.nw-pop ul{ list-style:none; padding:0; margin: .6rem 0 0; }
.nw-pop li{ display:flex; gap:.65rem; padding: .6rem .3rem; border-top:1px solid var(--dx-border); font-size:.87rem; }
.nw-pop li.unread{ font-weight:600; }
.nw-pop li span{ display:block; font-size:.75rem; color: var(--dx-muted); font-weight:400; }
.nw-pop li > i{ width:8px; height:8px; border-radius:50%; margin-top:.4rem; flex:none; }
.nw-dot-ok{ background:#22C55E; } .nw-dot-warn{ background:#F59E0B; } .nw-dot-bad{ background:#EF4444; } .nw-dot-info{ background: var(--dx-accent); }
.nw-link{ border:0; background:none; color: var(--dx-accent); font-size:.8rem; cursor:pointer; font-weight:600; }
.nw-user{ display:flex; align-items:center; gap:.6rem; border:0; background:none; cursor:pointer; padding: .25rem; border-radius: 10px; }
.nw-user:hover{ background: var(--dx-surface-2); }
.nw-user svg{ width:16px; height:16px; color: var(--dx-muted); }
.nw-user-name{ display:flex; flex-direction:column; text-align:left; font-size:.86rem; font-weight:600; line-height:1.2; }
.nw-user-name small{ color: var(--dx-muted); font-weight:400; font-size:.74rem; }
.nw-avatar{ width:36px; height:36px; flex:none; border-radius:50%; display:grid; place-items:center; background: linear-gradient(135deg, #6366F1, #06B6D4); color:#fff; font-size:.8rem; font-weight:700; }
.nw-avatar.lg{ width:64px; height:64px; font-size:1.2rem; }
.nw-user-pop{ width: 200px; padding: .4rem; }
.nw-user-pop a, .nw-user-pop button{ display:flex; align-items:center; gap:.6rem; width:100%; padding: .55rem .6rem; border:0; background:none; border-radius: 8px; text-decoration:none; cursor:pointer; font-size:.9rem; }
.nw-user-pop a:hover, .nw-user-pop button:hover{ background: var(--dx-surface-2); }
.nw-user-pop svg{ width:17px; height:17px; }

.nw-content{ padding: clamp(1rem, 2.5vw, 1.75rem); display:flex; flex-direction:column; }
.nw-content > .dx-page{ display:flex; flex-direction:column; gap: 1.25rem; }
.nw-page-head{ display:flex; justify-content:space-between; align-items:flex-end; gap: 1rem; flex-wrap:wrap; }
.nw-page-head h1{ margin: 0 0 .2rem; }
.nw-page-head p{ margin:0; }
.nw-kpis{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.nw-kpis.three{ grid-template-columns: repeat(3, 1fr); }
.nw-kpi{ padding: 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.35rem; }
.nw-kpi-icon{ width:34px; height:34px; border-radius: 9px; display:grid; place-items:center; background: var(--dx-accent-soft); color: var(--dx-accent); }
.nw-kpi-icon svg{ width:18px; height:18px; }
.nw-kpi-value{ font-size: 1.6rem; letter-spacing:-.02em; }
.nw-delta{ font-size:.8rem; font-weight:700; }
.nw-delta.up{ color:#16A34A; } .nw-delta.down{ color:#DC2626; }
.nw-ok{ color:#16A34A; } .nw-bad{ color:#DC2626; } .nw-warn{ color:#D97706; font-weight:600; }
@media (max-width: 1100px){ .nw-kpis{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .nw-kpis, .nw-kpis.three{ grid-template-columns: 1fr; } }

.nw-row-2{ display:grid; grid-template-columns: 1.7fr 1fr; gap: 1rem; }
.nw-row-2.rev{ grid-template-columns: 1.4fr 1fr; }
@media (max-width: 1100px){ .nw-row-2, .nw-row-2.rev{ grid-template-columns: 1fr; } }
.nw-panel{ padding: 1.2rem; min-width:0; }
.nw-panel h2{ margin-bottom: .8rem; }
.nw-mt{ margin-top: 1.5rem; }
.nw-chart-wrap{ position:relative; }
.nw-line{ width:100%; height:auto; display:block; overflow:visible; }
.nw-grid{ stroke: var(--dx-border); stroke-dasharray: 3 4; }
.nw-axis{ fill: var(--dx-muted); font-size: 11px; }
.nw-stroke{ fill:none; stroke: var(--dx-accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; animation: nw-draw 1s cubic-bezier(.16,1,.3,1); }
@keyframes nw-draw{ from{ stroke-dasharray: 0 4000; } to{ stroke-dasharray: 4000 0; } }
.nw-area{ animation: dx-page-in .8s; }
.nw-cursor{ stroke: var(--dx-muted); stroke-dasharray: 4 4; opacity:0; }
.nw-dot{ fill: var(--dx-surface); stroke: var(--dx-accent); stroke-width: 3; opacity:0; }
.nw-chart-wrap.is-hover .nw-cursor, .nw-chart-wrap.is-hover .nw-dot{ opacity:1; }
.nw-tip{ position:absolute; transform: translate(-50%, calc(-100% - 14px)); pointer-events:none; background: #161A2E; color:#fff; border-radius: 8px; padding: .45rem .7rem; font-size:.8rem; display:flex; flex-direction:column; white-space:nowrap; box-shadow: var(--dx-shadow); }
.nw-tip[hidden]{ display:none; }
.nw-tip span, .nw-tip small{ color:#C6CAE0; }
.nw-dark .nw-tip{ background:#fff; color:#161A2E; }
.nw-dark .nw-tip span, .nw-dark .nw-tip small{ color:#5B6178; }
.nw-donut{ display:flex; align-items:center; gap: 1.25rem; flex-wrap:wrap; }
.nw-donut svg{ width: 170px; height:170px; flex:none; }
.nw-donut circle{ transition: stroke-width .2s; }
.nw-donut circle:hover{ stroke-width: 20; }
.nw-donut-v{ fill: var(--dx-text); font-size: 13px; font-weight:700; }
.nw-donut ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.55rem; flex:1; min-width: 150px; }
.nw-donut li{ display:flex; align-items:center; gap:.55rem; font-size:.88rem; }
.nw-donut li i{ width:10px; height:10px; border-radius: 3px; }
.nw-donut li b{ margin-left:auto; }
.nw-bars{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: .9rem; }
.nw-bar{ height: 8px; border-radius: 99px; background: var(--dx-surface-2); overflow:hidden; margin-top:.35rem; }
.nw-bar i{ display:block; height:100%; border-radius: inherit; background: linear-gradient(90deg, var(--nw-c1), var(--nw-c2)); animation: nw-grow .9s cubic-bezier(.16,1,.3,1); transform-origin: left; }
.nw-bar.low i{ background: linear-gradient(90deg, #EF4444, #F59E0B); }
@keyframes nw-grow{ from{ transform: scaleX(0); } }
.nw-top-products{ list-style:none; padding:0; margin:0; }
.nw-top-products li{ display:flex; justify-content:space-between; gap: 1rem; padding: .55rem 0; border-top:1px solid var(--dx-border); font-size:.9rem; }

.nw-table-wrap{ overflow-x:auto; margin: 0 -.2rem; }
.nw-table{ width:100%; border-collapse: collapse; font-size:.88rem; }
.nw-table th{ text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color: var(--dx-muted); font-weight:700; padding: .6rem .7rem; border-bottom:1px solid var(--dx-border); white-space:nowrap; }
.nw-table td{ padding: .7rem; border-bottom:1px solid var(--dx-border); white-space:nowrap; }
.nw-table tbody tr[data-invoice]{ cursor:pointer; transition: background .15s; }
.nw-table tbody tr[data-invoice]:hover{ background: var(--dx-surface-2); }
.nw-num{ text-align:right !important; font-variant-numeric: tabular-nums; }
.nw-sort{ border:0; background:none; padding:0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor:pointer; display:inline-flex; gap:.3rem; }
.nw-sort span{ opacity:.5; }
.nw-sort[aria-sort="ascending"], .nw-sort[aria-sort="descending"]{ color: var(--dx-accent); }
.nw-sort[aria-sort="ascending"] span, .nw-sort[aria-sort="descending"] span{ opacity:1; }
.nw-toolbar{ display:flex; justify-content:space-between; align-items:center; gap: 1rem; flex-wrap:wrap; margin-bottom: .8rem; }
.nw-toolbar .dx-search{ width: min(280px, 100%); }
.nw-tabs{ display:flex; gap: .25rem; flex-wrap:wrap; }
.nw-tabs button{ border:0; background:none; padding: .5rem .8rem; border-radius: 8px; cursor:pointer; font-weight:600; font-size:.86rem; color: var(--dx-muted); display:inline-flex; gap:.4rem; align-items:center; }
.nw-tabs button span{ font-size:.72rem; background: var(--dx-surface-2); padding: .05rem .45rem; border-radius: 99px; }
.nw-tabs button[aria-selected="true"]{ background: var(--dx-accent-soft); color: var(--dx-accent); }
.nw-pager{ margin-top: .9rem; }

.nw-inv{ display:flex; flex-direction:column; gap: 1rem; }
.nw-inv-to{ display:flex; flex-direction:column; padding: .9rem; border-radius: 10px; background: var(--dx-surface-2); }
.nw-inv-lines td{ white-space:normal; }
.nw-inv-total{ font-size: 1.1rem; padding-top: .6rem; border-top: 2px solid var(--dx-text); }
.nw-new-inv{ display:flex; flex-direction:column; gap: 1rem; }
.nw-line-row{ display:grid; grid-template-columns: 1fr 90px 40px; gap: .5rem; margin-bottom: .5rem; }
.nw-add-line{ align-self:flex-start; }

.nw-cust-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
@media (max-width: 900px){ .nw-cust-grid{ grid-template-columns: 1fr; } }
.nw-cust{ display:flex; align-items:center; gap: .8rem; padding: .8rem; border-radius: 12px; border:1px solid var(--dx-border); background: var(--dx-surface); text-align:left; cursor:pointer; transition: border-color .15s, transform .15s; }
.nw-cust:hover{ border-color: var(--dx-accent); transform: translateY(-1px); }
.nw-cust-main{ display:flex; flex-direction:column; flex:1; min-width:0; }
.nw-cust-side{ display:flex; flex-direction:column; align-items:flex-end; }
.nw-profile{ display:flex; flex-direction:column; align-items:center; gap:.3rem; text-align:center; margin-bottom: 1rem; }
.nw-kv{ display:grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; margin:0; font-size:.9rem; }
.nw-kv dt{ color: var(--dx-muted); }
.nw-kv dd{ margin:0; text-align:right; word-break: break-all; }
.nw-mini-list{ list-style:none; padding:0; margin:0; }
.nw-mini-list li{ display:flex; justify-content:space-between; align-items:center; gap: .5rem; padding: .6rem .3rem; border-top:1px solid var(--dx-border); cursor:pointer; font-size:.88rem; }
.nw-mini-list li:hover{ background: var(--dx-surface-2); }
.nw-mini-list small{ display:block; color: var(--dx-muted); }
.nw-stock{ display:flex; align-items:center; gap: .7rem; min-width: 190px; }
.nw-stock .nw-bar{ flex:1; margin:0; }

.nw-settings{ display:flex; flex-direction:column; gap: 1rem; max-width: 820px; }
.nw-switch{ display:flex; align-items:center; justify-content:space-between; gap: 1rem; padding: .75rem 0; border-top:1px solid var(--dx-border); cursor:pointer; }
.nw-switch input{ position:absolute; opacity:0; }
.nw-switch i{ width: 42px; height: 24px; border-radius: 99px; background: var(--dx-border); position:relative; flex:none; transition: background .2s; }
.nw-switch i::after{ content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.nw-switch input:checked + i{ background: var(--dx-accent); }
.nw-switch input:checked + i::after{ transform: translateX(18px); }
.nw-switch input:focus-visible + i{ outline: 2px solid var(--dx-accent); outline-offset: 2px; }
.nw-settings .dx-seg button{ display:inline-flex; align-items:center; gap:.4rem; }
.nw-settings .dx-seg svg{ width:16px; height:16px; }

@media (max-width: 900px){
  .nw-app{ grid-template-columns: 1fr; }
  .nw-side{ position: fixed; left:0; top: 56px; bottom:0; height:auto; z-index: 40; width: 250px; transform: translateX(-105%); transition: transform .3s cubic-bezier(.16,1,.3,1); box-shadow: 20px 0 40px -20px rgba(0,0,0,.5); }
  .nw-side.is-open{ transform:none; }
  .nw-menu-btn{ display:inline-grid !important; }
  .nw-user-name, .nw-user > svg{ display:none; }
  .nw-pop{ width: min(320px, calc(100vw - 2rem)); right: -3rem; }
}