/* ==========================================================================
   NextLayer — app.css  (final: v5 structure + v3 aesthetic)
   Cool light theme · Onest typography · emerald-green accent · premium SaaS.
   No Bootstrap / DataTables / ApexCharts required.
   ========================================================================== */
:root{
  --canvas:#eceef1; --sidebar:#f8f9fb; --surface:#ffffff; --soft:#f4f5f7; --soft-2:#f8f9fb;
  --line:#f0f1f3; --line-2:#e7e9ec;
  --ink:#191b1f; --ink-2:#474c53; --muted:#888e96; --faint:#aab0b8;
  --brand:#079455; --brand-ink:#06794a; --brand-soft:#ecfdf3; --brand-line:#bbf0ce;
  --red:#d92d20; --red-ink:#b42318; --red-soft:#fef3f2; --red-line:#fecdca;
  --amber:#dc6803; --amber-ink:#b54708; --amber-soft:#fffaeb; --amber-line:#fedf89;
  --blue:#175cd3; --blue-ink:#1849a9; --blue-soft:#eff8ff; --blue-line:#b2ddff;
  --sh-sm:0 1px 2px rgba(16,24,40,.05);
  --sh-card:0 1px 3px rgba(16,24,40,.05),0 1px 2px rgba(16,24,40,.03);
  --sh-pill:0 1px 2px rgba(16,24,40,.07),0 0 0 1px rgba(16,24,40,.02);
  --sh-pop:0 16px 40px -12px rgba(16,24,40,.22),0 4px 10px -4px rgba(16,24,40,.08);
  --sh-float:0 1px 1px rgba(16,24,40,.03),0 24px 60px -24px rgba(16,24,40,.18);
  --sans:'Onest',-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',system-ui,sans-serif;
  --r:16px; --r-lg:20px; --r-sm:11px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:var(--sans);background:var(--canvas);color:var(--ink);
  -webkit-font-smoothing:antialiased;font-size:14px;line-height:1.5;letter-spacing:-.005em;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
img{max-width:100%;}
.tabular,.tab{font-variant-numeric:tabular-nums;}
h1,h2,h3,h4,h5,h6{margin:0;letter-spacing:-.025em;font-weight:700;}
.serif{font-weight:700;letter-spacing:-.03em;}
i[class^="ri-"],i[class*=" ri-"]{vertical-align:middle;line-height:1;}

/* utilities */
.nl-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.nl-between{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.nl-spacer{flex:1;}
.nl-right{margin-left:auto;}
.nl-muted{color:var(--muted);}
.text-end{text-align:right;} .text-center{text-align:center;}
.mb-2{margin-bottom:10px;} .mb-3{margin-bottom:18px;} .mb-4{margin-bottom:24px;}
.mt-2{margin-top:10px;} .mt-3{margin-top:18px;} .mt-4{margin-top:24px;}
.hide{display:none !important;}

@keyframes nl-rise{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes nl-fade{from{opacity:0;}to{opacity:1;}}
@keyframes nl-sin{from{transform:translateX(20px);opacity:0;}to{transform:none;opacity:1;}}
@keyframes nl-pop{from{transform:scale(.96);opacity:.4;}to{transform:none;opacity:1;}}
.nl-reveal{opacity:0;animation:nl-rise .5s cubic-bezier(.2,.7,.2,1) forwards;}

/* ===================== SHELL ===================== */
.nl-stage{padding:22px;min-height:100vh;}
.nl-wrap{max-width:1300px;margin:0 auto;}
.nl-shell{background:var(--surface);border-radius:22px;box-shadow:var(--sh-float);
  overflow:hidden;display:flex;height:calc(100vh - 44px);animation:nl-fade .4s ease;position:relative;}
.nl-overlay{display:none;}

/* sidebar */
.nl-sidebar{width:264px;flex:0 0 264px;background:var(--sidebar);border-right:1px solid var(--line);
  padding:22px 16px;display:flex;flex-direction:column;gap:22px;overflow:auto;}
.nl-brand{display:flex;align-items:center;gap:10px;padding:2px 8px;}
.nl-brand .nl-logo{width:34px;height:34px;border-radius:10px;background:var(--ink);
  display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 34px;color:#fff;}
.nl-brand .nl-logo img{width:22px;height:22px;object-fit:contain;}
.nl-brand-name{font-size:16.5px;font-weight:700;letter-spacing:-.03em;color:var(--ink);}
.nl-brand-sub{font-size:11px;color:var(--muted);font-weight:600;margin-top:1px;}
.nl-search{display:flex;align-items:center;gap:9px;background:var(--surface);border-radius:11px;
  padding:9px 12px;color:var(--faint);box-shadow:var(--sh-sm);}
.nl-search i{font-size:16px;}
.nl-search input{border:0;background:transparent;outline:0;font-family:inherit;font-size:13px;color:var(--ink);width:100%;}
.nl-nav{display:flex;flex-direction:column;gap:3px;}
.nl-nav-label{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding:12px 10px 5px;}
.nl-nav-label:first-child{padding-top:2px;}
.nl-nav a{position:relative;display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:11px;
  color:var(--muted);font-weight:600;font-size:13.5px;transition:.13s;}
.nl-nav a i{font-size:18px;color:var(--faint);transition:.13s;}
.nl-nav a:hover{color:var(--ink-2);background:rgba(16,24,40,.03);}
.nl-nav a:hover i{color:var(--ink-2);}
.nl-nav a.active{background:var(--surface);color:var(--ink);box-shadow:var(--sh-pill);}
.nl-nav a.active i{color:var(--ink);}
.nl-nav a .nl-ct{margin-left:auto;font-size:11px;font-weight:700;color:var(--muted);background:var(--soft);border-radius:7px;padding:1px 7px;}
.nl-nav a[data-locked]{color:var(--faint);}
.nl-nav a[data-locked] i{color:var(--faint);}
.nl-nav a[data-locked]::after{content:"\ea3a";font-family:"remixicon";font-size:13px;margin-left:auto;color:var(--faint);}
.nl-nav a[data-locked] .nl-ct{display:none;}
.nl-sidebar-foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:8px;border-radius:13px;
  background:var(--surface);box-shadow:var(--sh-sm);}
.nl-sidebar-foot .nl-av{width:34px;height:34px;border-radius:50%;flex:0 0 34px;
  background:linear-gradient(135deg,#262a30,#565c64);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:700;overflow:hidden;}
.nl-sidebar-foot .nl-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.nl-sidebar-foot .nl-u-name{font-size:13px;font-weight:700;line-height:1.2;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;}
.nl-sidebar-foot .nl-u-role{font-size:11.5px;color:var(--muted);text-transform:capitalize;}
.nl-sidebar-foot .nl-signout{margin-left:auto;width:34px;height:34px;border-radius:10px;border:0;background:transparent;
  color:var(--faint);display:flex;align-items:center;justify-content:center;transition:.13s;}
.nl-sidebar-foot .nl-signout:hover{background:var(--red-soft);color:var(--red);}
.nl-sidebar-foot .nl-signout i{font-size:17px;}

/* main + topbar */
.nl-main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--surface);}
.nl-topbar{display:flex;align-items:center;gap:12px;padding:18px 30px;flex:0 0 auto;}
.nl-burger{display:none;background:var(--soft);border:0;border-radius:10px;padding:8px 10px;color:var(--ink);}
.nl-burger i{font-size:18px;}
.nl-crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:600;min-width:0;}
.nl-crumb i{font-size:14px;color:var(--faint);}
.nl-crumb .now{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nl-topbar .nl-tools{margin-left:auto;display:flex;align-items:center;gap:6px;}
.nl-icon-btn{position:relative;width:38px;height:38px;border-radius:11px;background:transparent;border:0;
  display:flex;align-items:center;justify-content:center;color:var(--muted);transition:.13s;}
.nl-icon-btn:hover{background:var(--soft);color:var(--ink);}
.nl-icon-btn i{font-size:18px;}
.nl-icon-btn .nl-png{position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%;
  background:var(--red);border:2px solid var(--surface);}
.nl-content{flex:1;overflow:auto;padding:8px 30px 36px;}

/* ===================== PAGE HEADER ===================== */
.nl-phead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:14px 0 26px;flex-wrap:wrap;}
.nl-phead h1{font-size:27px;font-weight:700;line-height:1.1;letter-spacing:-.03em;}
.nl-phead h1 .lite{color:var(--muted);font-weight:700;}
.nl-phead .nl-sub{color:var(--muted);font-size:14px;margin-top:5px;}
.nl-phead .nl-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.nl-breadcrumb{list-style:none;display:flex;align-items:center;gap:8px;padding:0;margin:0 0 12px;font-size:13px;color:var(--muted);font-weight:600;}
.nl-breadcrumb li{display:flex;align-items:center;gap:8px;}
.nl-breadcrumb li + li::before{content:"\\";color:var(--faint);}
.nl-breadcrumb a:hover{color:var(--ink);}
.nl-breadcrumb .active{color:var(--ink);}

/* ===================== BUTTONS ===================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:11px;
  padding:10px 16px;font-weight:600;font-size:13.5px;transition:.14s;white-space:nowrap;line-height:1.2;}
.btn i{font-size:16px;}
.btn-primary,.btn-dark{background:var(--ink);color:#fff;box-shadow:var(--sh-sm);}
.btn-primary:hover,.btn-dark:hover{background:#000;transform:translateY(-1px);}
.btn-ghost,.btn-soft{background:var(--soft);color:var(--ink);}
.btn-ghost:hover,.btn-soft:hover{background:#ebedf0;}
.btn-white{background:var(--surface);color:var(--ink);box-shadow:var(--sh-pill);}
.btn-white:hover{background:var(--soft-2);}
.btn-danger{background:var(--red);color:#fff;}
.btn-danger:hover{filter:brightness(.95);}
.btn-brand{background:var(--brand);color:#fff;box-shadow:var(--sh-sm);}
.btn-brand:hover{filter:brightness(.97);transform:translateY(-1px);}
.btn-sm{padding:8px 13px;font-size:12.5px;border-radius:9px;}
.btn-block,.btn.w-100,.d-grid .btn{width:100%;}
.btn.disabled{opacity:.55;pointer-events:none;}
.nl-pill-btn{display:inline-flex;align-items:center;gap:7px;background:var(--surface);box-shadow:var(--sh-pill);
  border-radius:11px;padding:9px 13px;font-size:13px;font-weight:600;color:var(--ink-2);}
.nl-pill-btn i{font-size:15px;color:var(--muted);}

/* ===================== CARDS ===================== */
.nl-card{background:var(--surface);border-radius:var(--r);box-shadow:var(--sh-card);}
.nl-card.h-100{height:100%;}
.nl-card-pad{padding:24px;}
.nl-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:22px 24px;flex-wrap:wrap;}
.nl-card-head + .nl-card-pad{padding-top:2px;}
.nl-card-head h5{font-size:16px;font-weight:700;letter-spacing:-.02em;}
.nl-card-head h5 i{font-size:16px;color:var(--ink-2);}
.nl-sub{font-size:12.5px;color:var(--muted);margin-top:3px;}

.nl-grid{display:grid;gap:18px;}
.nl-grid.cols-2{grid-template-columns:1fr 1fr;}
.nl-grid.dash{grid-template-columns:1.75fr 1fr;}
.nl-form-layout{display:grid;gap:18px;grid-template-columns:1.6fr 1fr;align-items:start;}
.nl-fgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;}
.nl-fgrid .full{grid-column:1/-1;}

/* ===================== SUMMARY PANEL ===================== */
.nl-summary{display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--sh-card);overflow:hidden;margin-bottom:18px;}
.nl-summary .m{padding:22px 24px;position:relative;}
.nl-summary .m + .m::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:1px;background:var(--line);}
.nl-summary .lbl{color:var(--muted);font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;}
.nl-summary .lbl i{font-size:16px;color:var(--ink-2);}
.nl-summary .val{font-size:30px;font-weight:700;letter-spacing:-.04em;line-height:1;margin:14px 0 12px;}
.nl-summary .foot{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.nl-trend{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;border-radius:999px;padding:3px 9px 3px 7px;}
.nl-trend i{font-size:13px;}
.nl-trend.up{color:var(--brand-ink);background:var(--brand-soft);}
.nl-trend.dn{color:var(--red-ink);background:var(--red-soft);}
.nl-trend.flat{color:var(--muted);background:var(--soft);}
.nl-spark{width:64px;height:24px;}

/* ===================== CHART + BREAKDOWN ===================== */
.nl-chart-head{display:flex;align-items:flex-end;gap:14px;padding:0 24px 2px;}
.nl-chart-head .big{font-size:28px;font-weight:700;letter-spacing:-.035em;line-height:1;}
.nl-chart-head .cap{color:var(--muted);font-size:12.5px;margin-bottom:3px;}
svg.nl-area{display:block;width:100%;height:auto;}
/* animated, interactive bar chart */
.nl-bar rect{transform:scaleY(0);transform-box:fill-box;transform-origin:bottom;
  transition:transform .6s cubic-bezier(.2,.7,.2,1),fill .15s;will-change:transform;}
.nl-bar.grown rect{transform:scaleY(1);}
.nl-bar:hover rect{fill:var(--brand-ink);}
.nl-bar .bv{opacity:0;transition:opacity .15s;font-weight:700;}
.nl-bar:hover .bv{opacity:1;}
.nl-bk{display:flex;flex-direction:column;gap:18px;}
.nl-bk .t{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;margin-bottom:8px;}
.nl-bk .t span{color:var(--muted);font-weight:600;}
.nl-bk .t .n{color:var(--ink-2);font-weight:700;font-size:12.5px;}
.nl-bk .bar{height:8px;border-radius:999px;background:var(--soft);overflow:hidden;}
.nl-bk .bar i{display:block;height:100%;border-radius:999px;}
.nl-kv{display:flex;justify-content:space-between;gap:12px;padding:11px 0;font-size:13.5px;}
.nl-kv + .nl-kv{border-top:1px solid var(--line);}
.nl-kv span{color:var(--muted);font-weight:500;}
.nl-kv b{font-weight:700;}

/* ===================== TOOLBAR / FILTERS ===================== */
.nl-tbar{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap;}
.nl-searchbox{display:flex;align-items:center;gap:9px;background:var(--soft);border-radius:11px;padding:10px 13px;
  color:var(--faint);min-width:240px;flex:1;transition:.14s;}
.nl-searchbox:focus-within{background:var(--surface);box-shadow:var(--sh-pill);}
.nl-searchbox i{font-size:16px;}
.nl-searchbox input{border:0;background:transparent;outline:0;font-family:inherit;font-size:13.5px;color:var(--ink);width:100%;}
.nl-seg{display:inline-flex;background:var(--soft);border-radius:11px;padding:3px;gap:2px;flex-wrap:wrap;}
.nl-seg a{border:0;background:transparent;padding:7px 13px;border-radius:8px;font-size:13px;font-weight:600;color:var(--muted);transition:.13s;}
.nl-seg a.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-sm);}

/* form controls */
.form-label,.nl-label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:8px;}
.form-control,.form-select,.nl-input{border:1px solid transparent;background:var(--soft);border-radius:11px;
  padding:11px 13px;font-family:inherit;font-size:13.5px;color:var(--ink);outline:0;transition:.14s;width:100%;}
.form-control::placeholder{color:var(--faint);}
.form-control:focus,.form-select:focus,.nl-input:focus{background:var(--surface);
  border-color:var(--line-2);box-shadow:0 0 0 4px rgba(25,27,31,.05);}
.form-select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23888e96' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;}
.nl-hint{font-size:12px;color:var(--faint);margin-top:6px;}
.nl-field{margin-bottom:0;}
.nl-input-group{display:flex;}
.nl-input-group .form-control{border-radius:11px 0 0 11px;}
.nl-input-btn{border:0;background:var(--soft);border-radius:0 11px 11px 0;padding:0 14px;color:var(--muted);display:flex;align-items:center;}
.nl-input-btn:hover{color:var(--ink);}
.nl-form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line);}
.d-grid{display:grid;gap:10px;}

/* chips (column picker) */
.nl-chip-group{display:flex;flex-wrap:wrap;gap:8px;}
.nl-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:var(--soft);
  border:1px solid var(--line-2);font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer;user-select:none;}
.nl-chip input{accent-color:var(--brand);}
.nl-chip:has(input:checked){background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-ink);}
details.nl-disclosure > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:600;color:var(--ink-2);padding:8px 12px;border-radius:9px;background:var(--soft);}
details.nl-disclosure > summary::-webkit-details-marker{display:none;}
details.nl-disclosure[open] > summary{margin-bottom:14px;}

/* ===================== TABLE ===================== */
.table-responsive{overflow-x:auto;}
table.nl-table{width:100%;border-collapse:collapse;}
.nl-table thead th{text-align:left;font-size:12px;font-weight:600;color:var(--muted);padding:0 18px 14px;
  border-bottom:1px solid var(--line);white-space:nowrap;}
.nl-table tbody td{padding:15px 18px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle;color:var(--ink-2);}
.nl-table tbody tr{transition:background .12s;}
.nl-table tbody tr:hover{background:var(--soft-2);}
.nl-table tbody tr:last-child td{border-bottom:0;}
.nl-lic .em{font-weight:700;font-size:13.5px;color:var(--ink);}
.nl-lic .id{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12.5px;margin-top:2px;}
.nl-prod{display:inline-flex;align-items:center;gap:9px;}
.nl-prod .dot{width:7px;height:7px;border-radius:50%;background:var(--brand);flex:0 0 7px;}
.nl-mask{letter-spacing:2px;color:var(--muted);}
.nl-user-cell{display:flex;align-items:center;gap:11px;}
.nl-avatar{width:38px;height:38px;border-radius:50%;flex:0 0 38px;background:var(--soft);
  color:var(--ink-2);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;}
.nl-avatar-lg{width:72px;height:72px;font-size:24px;}

/* badges / pills */
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;
  border:1px solid transparent;white-space:nowrap;}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill.no-dot::before{display:none;}
.pill-success{color:var(--brand-ink);background:var(--brand-soft);border-color:var(--brand-line);}
.pill-danger{color:var(--red-ink);background:var(--red-soft);border-color:var(--red-line);}
.pill-warning{color:var(--amber-ink);background:var(--amber-soft);border-color:var(--amber-line);}
.pill-muted{color:var(--ink-2);background:var(--soft);border-color:var(--line-2);}
.pill-info{color:var(--blue-ink);background:var(--blue-soft);border-color:var(--blue-line);}
.pill-gold{color:#fff;background:var(--ink);border-color:var(--ink);}

/* row actions + menus */
.nl-row-actions{display:inline-flex;gap:2px;justify-content:flex-end;align-items:center;}
.nl-action{width:33px;height:33px;border-radius:9px;border:0;background:transparent;display:inline-flex;
  align-items:center;justify-content:center;color:var(--faint);transition:.13s;text-decoration:none;}
.nl-action:hover{background:var(--soft);color:var(--ink);}
.nl-action.danger:hover{background:var(--red-soft);color:var(--red);}
.nl-action i{font-size:17px;}
.nl-action .nl-on{color:var(--brand);}
.nl-menu{position:relative;display:inline-block;}
.nl-pop{position:absolute;right:0;top:37px;background:var(--surface);border-radius:13px;box-shadow:var(--sh-pop);
  padding:7px;min-width:184px;z-index:60;display:none;}
.nl-pop.open{display:block;animation:nl-fade .12s ease;}
.nl-pop .hdr{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);padding:8px 11px 4px;}
.nl-pop button,.nl-pop a{display:flex;align-items:center;gap:11px;width:100%;text-align:left;border:0;background:transparent;
  padding:9px 11px;border-radius:9px;font-size:13px;font-weight:600;color:var(--ink-2);text-decoration:none;}
.nl-pop button:hover,.nl-pop a:hover{background:var(--soft);}
.nl-pop button.danger,.nl-pop a.danger{color:var(--red);}
.nl-pop button i,.nl-pop a i{font-size:16px;}
.nl-pop .dv{height:1px;background:var(--line);margin:6px 4px;}

/* pagination */
.nl-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 6px 4px;flex-wrap:wrap;}
.nl-pager .pp{color:var(--muted);font-size:13px;}
.nl-pager .pp b{color:var(--ink);font-weight:700;}
.nl-pgs{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.nl-pgs a,.nl-pgs span{min-width:34px;height:34px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink-2);font-weight:600;font-size:13px;transition:.13s;padding:0 6px;}
.nl-pgs a:hover{background:var(--soft);}
.nl-pgs a.on{background:var(--ink);color:#fff;}
.nl-pgs a.nv{box-shadow:var(--sh-pill);background:var(--surface);color:var(--muted);}
.nl-pgs .gap{color:var(--faint);}

/* tips */
.nl-tips{margin:0;padding-left:18px;color:var(--ink-2);font-size:13px;}
.nl-tips li{margin-bottom:9px;}
.nl-setting-thumb{width:54px;height:54px;border-radius:12px;object-fit:cover;border:1px solid var(--line-2);background:var(--soft);}
.nl-profile-img{width:96px;height:96px;border-radius:24px;object-fit:cover;box-shadow:var(--sh-sm);}

/* empty */
.nl-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:72px 20px;}
.nl-empty i{font-size:27px;color:var(--muted);width:64px;height:64px;border-radius:18px;background:var(--soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.nl-empty h6{font-size:17px;font-weight:700;margin-bottom:7px;}
.nl-empty div{color:var(--muted);max-width:340px;margin-bottom:0;}
.nl-empty .btn{margin-top:20px;}

/* ===================== ALERTS / TOASTS ===================== */
#nl-toast-wrap{position:fixed;top:24px;right:24px;z-index:7000;display:flex;flex-direction:column;gap:11px;
  width:340px;max-width:calc(100vw - 32px);}
.nl-alert{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border-radius:14px;
  box-shadow:var(--sh-pop);padding:14px 15px;font-size:13.5px;animation:nl-sin .26s ease;color:var(--ink-2);}
.nl-alert i{font-size:19px;flex:0 0 19px;margin-top:1px;}
.nl-alert.success i{color:var(--brand);}
.nl-alert.danger i{color:var(--red);}
.nl-alert.warning i{color:var(--amber);}
.nl-alert.info i{color:var(--blue);}
.nl-alert b{font-weight:700;}
.nl-alert .nl-alert-x{margin-left:auto;border:0;background:transparent;color:var(--faint);padding:0 2px;font-size:17px;cursor:pointer;}
.nl-alert.inline{position:static;width:auto;box-shadow:none;background:var(--amber-soft);color:var(--amber-ink);border-radius:13px;animation:none;}
.nl-alert.inline.warning i{color:var(--amber);}
code{background:var(--soft);padding:1px 6px;border-radius:6px;font-size:12.5px;color:var(--ink-2);}

/* ===================== MODAL ===================== */
.nl-backdrop{position:fixed;inset:0;background:rgba(16,18,24,.4);backdrop-filter:blur(4px);display:none;
  align-items:center;justify-content:center;z-index:8000;padding:20px;}
.nl-backdrop.open{display:flex;animation:nl-fade .15s ease;}
.nl-modal{width:100%;max-width:404px;background:var(--surface);border-radius:20px;box-shadow:var(--sh-pop);
  padding:28px;text-align:center;animation:nl-pop .2s ease;}
.nl-modal .ic{width:54px;height:54px;border-radius:15px;background:var(--red-soft);color:var(--red);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:23px;}
.nl-modal .ic.info{background:var(--brand-soft);color:var(--brand);}
.nl-modal h3{font-size:18px;font-weight:700;margin-bottom:8px;}
.nl-modal p{color:var(--muted);font-size:13.5px;margin:0 0 24px;}
.nl-modal .r{display:flex;gap:10px;}
.nl-modal .r .btn{flex:1;}

/* ===================== LOGIN ===================== */
.nl-login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;overflow:hidden;}
.nl-login::before{content:"";position:absolute;width:540px;height:540px;border-radius:50%;
  background:radial-gradient(circle,rgba(7,148,85,.10),transparent 68%);top:-180px;right:-140px;}
.nl-login::after{content:"";position:absolute;width:440px;height:440px;border-radius:50%;
  background:radial-gradient(circle,rgba(7,148,85,.07),transparent 70%);bottom:-180px;left:-120px;}
.nl-login-card{position:relative;width:100%;max-width:404px;background:var(--surface);border-radius:22px;
  box-shadow:var(--sh-float);padding:38px 34px;}
.nl-login-logo{width:50px;height:50px;border-radius:15px;background:var(--ink);display:flex;align-items:center;
  justify-content:center;margin-bottom:22px;color:#fff;overflow:hidden;}
.nl-login-logo img{width:32px;height:32px;object-fit:contain;}
.nl-login-card h2{font-size:22px;font-weight:700;margin-bottom:5px;letter-spacing:-.03em;}
.nl-login-card .sub{color:var(--muted);font-size:13.5px;margin-bottom:26px;}
.nl-login-card .nl-field{margin-bottom:15px;}
.nl-login-foot{text-align:center;margin-top:20px;font-size:12px;color:var(--faint);}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1080px){
  .nl-grid.dash{grid-template-columns:1fr;}
  .nl-grid.cols-2{grid-template-columns:1fr;}
}
@media (max-width:860px){
  .nl-stage{padding:0;}
  .nl-wrap{max-width:none;}
  .nl-shell{border-radius:0;box-shadow:none;height:100vh;}
  .nl-sidebar{position:fixed;top:0;left:0;bottom:0;height:100vh;z-index:90;transform:translateX(-100%);
    transition:transform .26s ease;box-shadow:var(--sh-pop);}
  .nl-shell.nav-open .nl-sidebar{transform:none;}
  .nl-overlay{display:block;position:fixed;inset:0;background:rgba(16,18,24,.4);z-index:80;
    opacity:0;visibility:hidden;transition:.2s;}
  .nl-shell.nav-open .nl-overlay{opacity:1;visibility:visible;}
  .nl-burger{display:flex;}
  .nl-topbar{padding:14px 18px;}
  .nl-content{padding:6px 18px 28px;}
  .nl-phead{margin:12px 0 22px;}
  .nl-phead h1{font-size:23px;}
  .nl-form-layout{grid-template-columns:1fr;}
  .nl-fgrid{grid-template-columns:1fr;gap:16px;}
  .nl-form-actions{flex-direction:column-reverse;gap:10px;}
  .nl-form-actions .btn{width:100%;}
  .nl-card-pad{padding:20px;}
  .nl-card-head{padding:20px;}
  .nl-summary{grid-template-columns:1fr 1fr;}
  .nl-summary .m:nth-child(3)::before,.nl-summary .m:nth-child(4)::before{display:none;}
  .btn{padding:11px 16px;}
  .nl-action{width:38px;height:38px;}
  .nl-seg{width:100%;}
  .nl-seg a{flex:1;text-align:center;}
}
@media (max-width:600px){
  .form-control,.form-select,.nl-input,.nl-searchbox input,.nl-search input{font-size:16px;}
  .nl-summary{grid-template-columns:1fr;}
  .nl-summary .m + .m::before{display:none;}
  .nl-summary .m{border-top:1px solid var(--line);}
  .nl-summary .m:first-child{border-top:0;}
  .nl-phead h1{font-size:22px;}
  .nl-hide-sm{display:none !important;}
}