/* ===== 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;
}
.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;
  /* Tanpa border biar bersih. radius+padding tetap: latar :hover di bawah yang
     jadi penanda bisa-diklik, dan tanpa radius bentuknya jadi kotak. */
  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;
  background:none;padding:0;border-radius:0;text-align:left;min-height:auto;width:auto}
.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}
.nm-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:18px}

/* ===== 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:8px 14px;border-bottom:1px solid var(--border);background:var(--surface);
}
.nm-table tbody td{padding:8px 14px;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)}
/* Keep action buttons on one row regardless of column width */
table.nm-table td.text-nowrap{white-space:nowrap}
.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:28px;height:28px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;line-height:1;
  margin:0 2px;border-radius:5px;
}
.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); } }

/* ===== DataTables + nm-table integration =====
   dataTables.bootstrap4.css forces border-collapse:separate and Bootstrap
   pagination styles. These overrides restore nm-table visual language whenever
   DataTables initialises on a table that also carries the nm-table class. */

/* Fix border-collapse — DataTables forces 'separate !important' which breaks
   nm-table's border-bottom design; we need equal specificity + !important */
table.nm-table.dataTable{
  border-collapse:collapse !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* Restore nm-table header style over DataTables Bootstrap4 overrides */
table.nm-table.dataTable thead th,
table.nm-table.dataTable thead td{
  padding:8px 14px;
  border-bottom:1px solid var(--border);
  background:var(--surface);
  color:var(--tx3);
  font-size:10.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.055em;
  text-align:left;
}
/* Keep space for sort arrows only where DataTables adds them */
table.nm-table.dataTable>thead>tr>th:not(.sorting_disabled){
  padding-right:24px;
}
/* Dim sort arrows to match tx3 tone */
table.nm-table.dataTable>thead .sorting:before,
table.nm-table.dataTable>thead .sorting:after,
table.nm-table.dataTable>thead .sorting_asc:before,
table.nm-table.dataTable>thead .sorting_desc:after{
  opacity:.35;
  color:var(--tx3);
}
table.nm-table.dataTable>thead .sorting_asc:before,
table.nm-table.dataTable>thead .sorting_desc:after{ opacity:.8; }

/* Restore nm-table body cell style */
table.nm-table.dataTable tbody td,
table.nm-table.dataTable tbody th{
  padding:8px 14px;
  border-bottom:1px solid var(--border);
  font-size:13px;
  color:var(--tx1);
}
table.nm-table.dataTable tbody tr:last-child td{ border-bottom:none; }
table.nm-table.dataTable tbody tr:hover{ background:var(--raised); }

/* Info text ("Menampilkan X sampai Y dari Z entri") */
div.dataTables_wrapper div.dataTables_info{
  font-size:12px;
  color:var(--tx3);
  padding-top:10px;
  padding-bottom:4px;
}

/* Pagination — replace Bootstrap pill buttons with nm-pager style */
div.dataTables_wrapper div.dataTables_paginate{
  padding-top:8px;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination{
  gap:4px;
  justify-content:flex-end;
  margin:0;
}
div.dataTables_wrapper div.dataTables_paginate .page-item .page-link{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:5px;
  padding:3px 10px;
  font-size:13px;
  color:var(--tx2);
  box-shadow:none;
  transition:background .12s;
}
div.dataTables_wrapper div.dataTables_paginate .page-item:not(.disabled) .page-link:hover{
  background:var(--raised);
  color:var(--tx1);
  border-color:var(--border2);
}
div.dataTables_wrapper div.dataTables_paginate .page-item.active .page-link{
  background:var(--brand) !important;
  border-color:var(--brand) !important;
  color:#fff !important;
}
div.dataTables_wrapper div.dataTables_paginate .page-item.disabled .page-link{
  opacity:.4;
  cursor:default;
  background:var(--surface);
  color:var(--tx3);
}

/* ===== MOBILE (Phase 1: off-canvas sidebar + collapsing grids) =====
   Everything here is scoped under max-width:768px, so desktop is untouched. */
.nm-hamburger{display:none}
.nm-backdrop{display:none}
@media (max-width:768px){
  .nm-hamburger{
    display:inline-flex;align-items:center;justify-content:center;
    width:38px;height:38px;border-radius:8px;border:1px solid var(--border2);
    background:var(--surface);color:var(--tx2);flex-shrink:0;cursor:pointer;padding:0;
  }
  .nm-hamburger svg{width:20px;height:20px;stroke:currentColor;fill:none}
  /* Sidebar slides in from the left as an overlay instead of taking layout width. */
  .nm-sidebar{
    position:fixed;top:0;left:0;z-index:60;width:264px;height:100vh;
    transform:translateX(-100%);transition:transform .25s ease;
    box-shadow:0 0 40px rgba(0,0,0,.20);
  }
  .nm-app.nav-open .nm-sidebar{transform:translateX(0)}
  .nm-backdrop{
    display:block;position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.42);
    opacity:0;visibility:hidden;transition:opacity .25s ease;
  }
  .nm-app.nav-open .nm-backdrop{opacity:1;visibility:visible}
  /* Topbar: hamburger + truncating title + profile; drop the date/user meta. */
  .nm-topbar{padding:0 14px;gap:10px}
  .nm-topbar .title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .nm-topbar-meta{display:none}
  .nm-topbar .nm-profile .who{display:none}
  .nm-content{padding:16px 14px}
  /* Multi-column dashboard grids stack into one column. !important because
     some sections set column ratios inline (e.g. style="...:1fr 2fr"). */
  .nm-grid2,.nm-grid2b,.nm-grid3{grid-template-columns:1fr !important}
  /* KPI stat row: pages set repeat(4/5/6) inline, so override with !important
     to wrap onto 2 columns instead of cramming everything on one line. */
  .nm-stats{grid-template-columns:repeat(2,1fr) !important}
  /* Wide content (tables/grids) scrolls inside itself instead of the page. */
  .nm-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* Global net: any wide data table scrolls horizontally within its own box
     instead of stretching the page. `display:block` turns the <table> into a
     scroll container; narrow label tables (.tableEstimasi) are left alone.
     Most list views already wrap their table in an overflow-x div — this is
     the safety net for the rest (pressure, analysis, waterBalance, agent…). */
  .nm-content .nm-table,
  .nm-content .an-table,
  .nm-content .analysis-table,
  .nm-content table.table{
    display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
  }
}