/* ===== DESIGN TOKENS (QA Calculator base, warmed) ===== */
:root{
  --bg:#F7F5F1; --surface:#FFFFFF; --raised:#F1EEE8; --sunken:#EBE7DF;
  --border:#E5E0D6; --border2:#CEC8BA;
  --tx1:#241F18; --tx2:#5C5347; --tx3:#9A9183;

  --brand:#0369A1; --brand-h:#075985; --brand-dim:#EAF3F8; --brand-bdr:#BBD9E8;

  /* domain accents */
  --cust:#0369A1;  --cust-dim:#EAF3F8;
  --dev:#5B21B6;   --dev-dim:#F2EEFA;
  --water:#0D7C6B; --water-dim:#E8F5F0;
  --ok:#0F8A52;    --ok-dim:#E8F4EC;
  --warn:#B45309;  --warn-dim:#FBF1E0;
  --danger:#C2410C;--danger-dim:#FBEBE3;

  --radius:10px; --shadow:0 1px 2px rgba(60,50,35,.05);
}

/* Scoped box-sizing reset: only inside .nm-app */
.nm-app *, .nm-app *::before, .nm-app *::after { box-sizing: border-box; }

html, body{
  width:100%;
}
body{
  font-family:'Figtree',system-ui,sans-serif;
  background:var(--bg);
  overflow-x:hidden;
}

.mono{font-family:'DM Mono',monospace}
.serif{font-family:'Fraunces',Georgia,serif;font-optical-sizing:auto}

/* ===== LAYOUT ===== */
.nm-app{display:flex; min-height:100vh; width:100%;}

/* ===== SIDEBAR ===== */
.nm-sidebar{
  width:248px; flex-shrink:0; background:var(--surface);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.nm-brand{
  display:flex; align-items:center; gap:9px;
  height:62px; flex-shrink:0; padding:0 20px;
  border-bottom:1px solid var(--border);
}
.nm-brand .nm-logo{width:34px;height:34px;flex-shrink:0}
.nm-brand .nm-name{font-weight:800;font-size:16.5px;letter-spacing:-.015em}
.nm-brand .nm-name span{color:var(--brand)}
.nm-nav{padding:12px 12px 24px}
.nm-nav-section{
  font-size:10.5px;font-weight:700;letter-spacing:.09em;
  color:var(--tx3);text-transform:uppercase;
  padding:16px 12px 6px;
}
.nm-nav-item{
  display:flex;align-items:center;gap:11px;
  padding:8px 12px;border-radius:8px;
  color:var(--tx2);font-weight:500;font-size:13.5px;
  cursor:pointer;margin-bottom:1px;
  text-decoration:none;
}
.nm-nav-item svg{width:18px;height:18px;flex-shrink:0;stroke:currentColor;fill:none}
.nm-nav-item:hover{background:var(--raised);color:var(--tx1)}
.nm-nav-item.active{background:var(--brand-dim);color:var(--brand-h);font-weight:600}
.nm-nav-item.active svg{stroke:var(--brand)}
.nm-nav-item.muted{color:var(--tx3)}
.nm-nav-item i[data-feather]{width:18px;height:18px}

/* ===== MAIN ===== */
.nm-main{flex:1;min-width:0;display:flex;flex-direction:column}
.nm-topbar{
  height:62px;flex-shrink:0;background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:16px;padding:0 24px;
  position:sticky;top:0;z-index:5;
}
.nm-topbar .title{font-weight:600;font-size:14.5px;color:var(--tx2)}
.nm-topbar .spacer{flex:1}
.nm-topbar-meta{display:flex;align-items:center;gap:10px;color:var(--tx2);font-size:12.5px}
.nm-topbar-meta .sep{color:var(--tx3)}
.nm-topbar-meta i[data-feather],.nm-topbar-meta svg{width:14px;height:14px;margin-right:5px;vertical-align:middle;color:var(--tx3);stroke:currentColor;fill:none}
.nm-topbar-dt,.nm-topbar-user,.nm-topbar-update{display:inline-flex;align-items:center;white-space:nowrap}
.nm-icon-btn{
  width:36px;height:36px;border-radius:8px;border:1px solid var(--border2);
  background:var(--surface);display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--tx2);position:relative;
}
.nm-icon-btn:hover{background:var(--raised)}
.nm-icon-btn svg{width:17px;height:17px;stroke:currentColor;fill:none}
.nm-icon-btn i[data-feather]{width:17px;height:17px}
.nm-dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;
  background:var(--danger);border:2px solid var(--surface)}
.nm-profile{
  display:flex;align-items:center;gap:9px;padding:5px 10px 5px 5px;
  border:1px solid var(--border2);border-radius:999px;cursor:pointer;
}
.nm-profile:hover{background:var(--raised)}
.nm-avatar{
  width:28px;height:28px;border-radius:50%;background:var(--brand);
  color:#fff;font-weight:700;font-size:11px;
  display:flex;align-items:center;justify-content:center;
}
.nm-profile .who{font-size:12.5px;font-weight:600;line-height:1.2}
.nm-profile .who small{display:block;color:var(--tx3);font-weight:500;font-size:10.5px}

/* ===== CONTENT ===== */
.nm-content{padding:26px 24px;width:100%}
.nm-page-head{margin-bottom:22px}
.nm-page-head h1{font-size:28px;font-weight:600;letter-spacing:-.01em;color:var(--tx1)}
.nm-page-head p{color:var(--tx2);font-size:13.5px;margin-top:4px;white-space:nowrap}
/* Row layout: greeting on the left, action buttons (Refresh) on the right.
   Drops back to stacked at narrow widths so the title never collides with
   the button. */
.nm-page-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.nm-page-head-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nm-refresh-btn{
  display:inline-flex;align-items:center;gap:8px;
  height:38px;padding:0 14px;border-radius:8px;
  font-size:13px;font-weight:600;line-height:1;
}
.nm-refresh-btn svg{stroke:#fff}

/* ===== STAT CARDS (compact, icon right) ===== */
.nm-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:18px}
.nm-stat{
  background:var(--surface);border:1px solid var(--border2);
  border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:12px;
  position:relative;overflow:hidden;
}
/* Thin accent stripe at the top of each stat card. Color is keyed off
   the per-variant --accent CSS variable set on the .nm-s-* class below
   so the geometry lives in one place. */
.nm-stat::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--accent,var(--brand));
}
.nm-s-cust  { --accent: var(--cust); }
.nm-s-dev   { --accent: var(--dev); }
.nm-s-water { --accent: var(--water); }
.nm-s-ok    { --accent: var(--ok); }
.nm-s-warn  { --accent: var(--danger); }
.nm-stat .nm-st-main{flex:1;min-width:0}
.nm-stat .label{font-size:11px;color:var(--tx3);font-weight:600;
  text-transform:uppercase;letter-spacing:.045em;margin-bottom:3px}
.nm-stat .value{font-size:23px;font-weight:500;letter-spacing:-.02em;line-height:1.15}
.nm-stat .delta{font-size:11px;font-weight:600;margin-top:4px}
.nm-stat .delta.up{color:var(--ok)} .nm-stat .delta.down{color:var(--danger)}
.nm-stat .delta.neutral{color:var(--tx3)}
.nm-stat .nm-ico{
  width:38px;height:38px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.nm-stat .nm-ico svg{width:19px;height:19px;fill:none}
.nm-s-cust  .nm-ico{background:var(--cust-dim)}  .nm-s-cust  .nm-ico svg{stroke:var(--cust)}
.nm-s-dev   .nm-ico{background:var(--dev-dim)}   .nm-s-dev   .nm-ico svg{stroke:var(--dev)}
.nm-s-ok    .nm-ico{background:var(--ok-dim)}    .nm-s-ok    .nm-ico svg{stroke:var(--ok)}
.nm-s-warn  .nm-ico{background:var(--danger-dim)}.nm-s-warn  .nm-ico svg{stroke:var(--danger)}
.nm-s-water .nm-ico{background:var(--water-dim)} .nm-s-water .nm-ico svg{stroke:var(--water)}

/* ===== LAYOUT GRIDS ===== */
.nm-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.nm-grid2b{display:grid;grid-template-columns:1fr 1.6fr;gap:14px}

/* ===== PANELS ===== */
.nm-panel{
  background:var(--surface);border:1px solid var(--border2);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
}
.nm-panel-head{
  padding:11px 16px;border-bottom:1px solid var(--border);
  background:var(--raised);
  display:flex;align-items:center;justify-content:space-between;
}
.nm-panel-head h3{font-size:14px;font-weight:700}
.nm-panel-head .sub{font-size:11.5px;color:var(--tx3);font-weight:500}
.nm-panel-body{padding:18px 24px}
.nm-tag{
  font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;
  background:var(--water-dim);color:var(--water);
}

/* ===== CHARTS ===== */
.nm-chart svg{width:100%;display:block}
.nm-axis{display:flex;justify-content:space-between;margin-top:6px;
  font-size:10px;color:var(--tx3)}
.nm-legend{display:flex;gap:14px;font-size:11.5px;color:var(--tx2);margin-top:8px}
.nm-legend i{width:9px;height:9px;border-radius:3px;display:inline-block;
  margin-right:5px;vertical-align:middle}

/* ===== DONUT ===== */
.nm-donut-wrap{display:flex;align-items:center;gap:20px}
.nm-donut{position:relative;width:128px;height:128px;flex-shrink:0}
.nm-donut .center{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}
.nm-donut .center b{font-size:25px;font-weight:500}
.nm-donut .center small{font-size:10px;color:var(--tx3);font-weight:600;letter-spacing:.05em}
.nm-dlist{flex:1;display:flex;flex-direction:column;gap:11px}
.nm-dlist .row{display:flex;align-items:center;gap:9px;font-size:12.5px}
.nm-dlist .row i{width:10px;height:10px;border-radius:3px}
.nm-dlist .row .n{margin-left:auto;font-weight:600}

/* battery bars */
.nm-batt{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.nm-batt .row{font-size:12px}
.nm-batt .row .lab{display:flex;justify-content:space-between;margin-bottom:4px}
.nm-batt .track{height:7px;background:var(--sunken);border-radius:999px;overflow:hidden}
.nm-batt .fill{height:100%;border-radius:999px}

/* ===== TABLE (scoped) ===== */
.nm-table{width:100%;border-collapse:collapse}
.nm-table thead th{
  text-align:left;font-size:10.5px;font-weight:700;color:var(--tx3);
  text-transform:uppercase;letter-spacing:.055em;
  padding:11px 18px;border-bottom:1px solid var(--border);background:var(--surface);
}
.nm-table tbody td{padding:11px 18px;border-bottom:1px solid var(--border);font-size:13px}
.nm-table tbody tr:last-child td{border-bottom:none}
.nm-table tbody tr:hover{background:var(--raised)}
.nm-usage{font-weight:500}

.nm-pill{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px}
.nm-pill.ok{background:var(--ok-dim);color:var(--ok)}
.nm-pill.warn{background:var(--warn-dim);color:var(--warn)}
.nm-pill.bad{background:var(--danger-dim);color:var(--danger)}

.nm-note{
  margin-top:22px;padding:12px 16px;border-radius:8px;
  background:var(--brand-dim);border:1px solid var(--brand-bdr);
  font-size:12px;color:var(--brand-h);
}

/* ===== Uniform action buttons across all list pages ===== */
.action-btn{
  width:32px;height:32px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;line-height:1;
  margin:0 2px;border-radius:6px;
}
.action-btn i{line-height:1}

/* ===== Toolbar: Add + filters + search on one row =====
   Each list page wraps its filter row in .nm-toolbar; filters go in
   .nm-tb-item (label + input/select stacked), the Add button + filter
   trigger live in .nm-tb-actions on the right. All inputs and Select2
   selections are normalized to 40px height and a single border style
   so they look uniform regardless of underlying widget. */
.nm-toolbar{
  display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:14px;
}
.nm-toolbar .nm-tb-item{
  display:flex;flex-direction:column;flex:1 1 0;min-width:160px;
}
.nm-toolbar .nm-tb-item > label{
  font-size:12.5px;font-weight:500;color:var(--tx2);margin-bottom:5px;
}
.nm-toolbar .nm-tb-actions{
  display:flex;align-items:flex-end;gap:8px;flex-shrink:0;
}
.nm-toolbar .nm-tb-actions .btn{
  height:40px;padding:0 16px;
  display:inline-flex;align-items:center;gap:6px;
  border-radius:6px;font-size:13.5px;line-height:1;
}
.nm-toolbar .form-control{
  height:40px;border:1px solid var(--border2);border-radius:6px;
  font-size:13.5px;box-shadow:none;padding:6px 12px;line-height:normal;
}
.nm-toolbar .form-control:focus{
  border-color:var(--brand);box-shadow:none;outline:0;
}
/* Select2 single selection: flex-center the rendered text vertically.
   Setting line-height on .select2-selection__rendered alone doesn't
   center because that element is display:block sized by its content;
   it ends up 38px tall sitting at the top of the 40px parent. Switching
   the parent to flex with align-items:center makes the centering work
   regardless of the inner element's height. */
.nm-toolbar .select2-container--default .select2-selection--single{
  height:40px !important;
  display:flex;align-items:center;
  border:1px solid var(--border2);border-radius:6px;
}
.nm-toolbar .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:1.2;
  padding-left:12px;padding-right:32px; /* room for the arrow */
  font-size:13.5px;
  width:100%;
}
.nm-toolbar .select2-container--default .select2-selection--single .select2-selection__arrow{
  height:38px;
}
/* "Semua" placeholder rendering inside Select2 — muted grey.
   Plain inline span so it inherits the parent's flex centering;
   no vertical-align or display override that would pull it off-axis. */
.nm-toolbar .nm-select2-placeholder{
  color:var(--tx3);
}

/* ===== DataTables loading overlay =====
   The default 'Processing...' text gets replaced via language.processing
   with a div.nm-dt-processing. We restyle the wrapping .dataTables_processing
   into a card-like overlay (translucent backdrop, soft shadow, brand color)
   so it reads as a deliberate loading state rather than a flashed text. */
.dataTables_processing{
  background:rgba(255,255,255,0.92) !important;
  border:1px solid var(--border2) !important;
  border-radius:10px !important;
  box-shadow:0 4px 16px rgba(60,50,35,.08) !important;
  color:var(--tx2) !important;
  font-family:'Figtree',system-ui,sans-serif !important;
  font-weight:500;font-size:13px !important;
  padding:0 !important;min-width:180px;
  height:auto !important;line-height:normal !important;
}
.nm-dt-processing{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 22px;color:var(--tx2);
}
.nm-dt-spin{
  display:inline-block;width:14px;height:14px;
  border:2px solid var(--sunken);border-top-color:var(--brand);
  border-radius:50%;
  animation:nm-dt-spin .8s linear infinite;
}
@keyframes nm-dt-spin{ to{ transform:rotate(360deg); } }

/* ===== app form kit (TCO) — aligned to newui tokens & scale ===== */

/* Forms inside a panel body */
.nm-field{margin-bottom:14px}
.nm-field:last-child{margin-bottom:0}
.nm-field > label{display:block;font-size:12.5px;font-weight:500;color:var(--tx2);margin-bottom:5px}
.nm-input{
  height:40px;width:100%;border:1px solid var(--border2);border-radius:6px;
  font-family:inherit;font-size:13.5px;padding:6px 12px;background:var(--surface);color:var(--tx1);
}
select.nm-input{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235C5347' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px;
  padding-right:34px;
}
.nm-input:focus{border-color:var(--brand);outline:0;box-shadow:0 0 0 3px var(--brand-dim)}

/* Buttons */
.nm-btn{
  display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;
  border:1px solid var(--border2);border-radius:6px;background:var(--raised);
  color:var(--tx1);font-family:inherit;font-weight:600;font-size:13.5px;line-height:1;cursor:pointer;
}
.nm-btn:hover{background:var(--sunken)}
.nm-btn.brand{background:var(--brand);border-color:var(--brand);color:#fff}
.nm-btn.brand:hover{background:var(--brand-h)}
.nm-btn svg{width:16px;height:16px;stroke:currentColor;fill:none}

/* Alerts (reuse the note look) */
.nm-alert{padding:11px 16px;border-radius:8px;margin-bottom:16px;border:1px solid;font-size:12.5px}
.nm-alert.ok{background:var(--ok-dim);border-color:#bfe3cd;color:var(--ok)}
.nm-alert.danger{background:var(--danger-dim);border-color:#f0cdbb;color:var(--danger)}

/* Inputs sitting inside table cells: tighter, no double row padding */
.nm-table td .nm-input{height:34px;margin:0}
.nm-table td.num,.nm-table th.num{text-align:right;font-variant-numeric:tabular-nums}
.nm-table td.strong{font-weight:600}

/* Spacing helpers */
.nm-stack > * + *{margin-top:16px}
.nm-muted{color:var(--tx3)}

/* Login card (auth screen) */
.nm-card{
  background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);
  padding:28px;box-shadow:0 4px 18px rgba(60,50,35,.08);
}

/* Empty state */
.nm-empty{
  text-align:center;padding:56px 24px;color:var(--tx2);
  background:var(--surface);border:1px dashed var(--border2);border-radius:var(--radius);
}
.nm-empty svg{width:34px;height:34px;stroke:var(--tx3);fill:none;margin-bottom:12px}
.nm-empty h2{font-size:18px;font-weight:600;color:var(--tx1);margin-bottom:6px}
.nm-empty p{font-size:13px;max-width:440px;margin:0 auto}
.nm-empty code{font-family:'DM Mono',monospace;background:var(--raised);padding:2px 6px;border-radius:5px;font-size:12px}

/* ===== wizard stepper ===== */
.nm-wizard{display:flex;align-items:center;gap:2px;flex-wrap:wrap;margin-bottom:20px}
.nm-step{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:8px;text-decoration:none;color:var(--tx2);font-size:12.5px;font-weight:600;white-space:nowrap}
.nm-step:hover{background:var(--raised)}
.nm-step .nm-step-no{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--sunken);color:var(--tx2);font-size:11.5px;font-weight:700;flex-shrink:0}
.nm-step.active{background:var(--brand-dim);color:var(--brand-h)}
.nm-step.active .nm-step-no{background:var(--brand);color:#fff}
.nm-step.done .nm-step-no{background:var(--ok);color:#fff}
.nm-step-bar{flex:0 0 16px;height:2px;background:var(--border2)}
.nm-wizard-actions{display:flex;align-items:center;gap:10px;margin-top:18px}
.nm-wizard-actions .spacer{flex:1}
.nm-back-link{color:var(--tx2);text-decoration:none;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.nm-back-link:hover{color:var(--tx1)}
.nm-back-link svg{width:16px;height:16px;stroke:currentColor;fill:none}

/* table footer total — separated from the body */
.nm-table tfoot td{padding-top:14px;border-top:2px solid var(--border2);font-size:13px}

/* panel-head: reset h3 margin so the banner is compact (not tall) */
.nm-panel-head h3{margin:0}
.nm-panel-head{padding-top:9px;padding-bottom:9px}

/* horizontal scroll wrapper: only the table scrolls, the panel-head stays fixed */
.nm-table-scroll{overflow-x:auto}

/* small helper/footnote text in Inter */
.nm-hint{font-family:'Inter',system-ui,sans-serif;font-size:11.5px;line-height:1.5;color:var(--tx3)}

/* User Profile matrix: center header labels and the numeric/input cells */
#profileTable thead th{text-align:center}
#profileTable tbody td.num{text-align:center}

/* wizard bar: steps left, primary action right */
.nm-wizard-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.nm-wizard-bar .nm-wizard{margin-bottom:0}

/* small module-name caption under the code in the access matrix header */
.nm-modname{display:block;font-size:9px;font-weight:500;color:var(--tx3);text-transform:none;letter-spacing:0;line-height:1.2;margin-top:2px;white-space:normal}

/* read-only derived field (e.g. User Count from User Profile): looks like an
   input box but very light brown + muted, signalling "computed, not editable" */
.nm-readonly{
  display:inline-block;width:110px;text-align:right;
  padding:6px 12px;border:1px solid var(--border2);border-radius:6px;
  background:#F1E9DB;color:var(--tx3);font-size:13.5px;font-family:inherit;
}
/* total row spacing */
.nm-table tfoot td{padding:14px 18px;border-top:2px solid var(--border2)}

/* Modules table: center the numeric columns (User Count / Phase / Go-Live) headers + cells */
#modulesTable th.num, #modulesTable td.num{text-align:center}

/* green primary button variant */
.nm-btn.green{background:var(--ok);border-color:var(--ok);color:#fff}
.nm-btn.green:hover{background:#0c7344}

/* read-only inputs (computed fields) styled as light-brown muted, full width */
.nm-input[readonly]{background:#F1E9DB;color:var(--tx3)}