/* NANI-SYS Professional UI — Version 1 */
:root {
  color-scheme: dark;
  --n-bg: #08111f;
  --n-bg-soft: #0d1727;
  --n-panel: #111d2e;
  --n-panel-2: #162438;
  --n-panel-hover: #1a2b41;
  --n-border: #29384d;
  --n-border-soft: rgba(148,163,184,.16);
  --n-text: #f4f7fb;
  --n-text-soft: #c3cedd;
  --n-muted: #8998ac;
  --n-primary: #27d99b;
  --n-primary-hover: #4de5af;
  --n-primary-dark: #062c22;
  --n-blue: #4f8cff;
  --n-warning: #f5b942;
  --n-danger: #f0646b;
  --n-success: #27d99b;
  --n-radius-sm: 8px;
  --n-radius: 12px;
  --n-radius-lg: 18px;
  --n-shadow: 0 18px 48px rgba(0,0,0,.28);
  --btn-col: var(--n-primary) !important;
  --bg-col: var(--n-bg) !important;
  --brd-col: var(--n-border) !important;
  --bg: var(--n-bg) !important;
  --fg: var(--n-text) !important;
  --muted: var(--n-muted) !important;
}

* { box-sizing: border-box; }
html { background: var(--n-bg); scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0 !important;
  padding: 0 !important;
  background:
    radial-gradient(circle at 85% -10%, rgba(79,140,255,.12), transparent 34rem),
    radial-gradient(circle at -10% 20%, rgba(39,217,155,.08), transparent 30rem),
    var(--n-bg) !important;
  color: var(--n-text) !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

::selection { color: #03130d; background: var(--n-primary); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--n-bg); }
::-webkit-scrollbar-thumb { background: #34455d; border: 2px solid var(--n-bg); border-radius: 999px; }

.nani-appbar {
  position: sticky; top: 0; z-index: 9990;
  height: 64px; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: rgba(8,17,31,.9); border-bottom: 1px solid var(--n-border-soft);
  backdrop-filter: blur(18px); box-shadow: 0 8px 28px rgba(0,0,0,.18);
}
.nani-brand { display:flex; align-items:center; gap:11px; min-width:0; }
.nani-brand-mark {
  width: 36px; height: 36px; border-radius: 10px; display:grid; place-items:center;
  color:#032319; background:linear-gradient(145deg,#66edbd,var(--n-primary));
  font-weight:900; font-size:17px; box-shadow:0 8px 24px rgba(39,217,155,.22);
}
.nani-brand-copy { display:flex; flex-direction:column; line-height:1.1; }
.nani-brand-copy strong { color:var(--n-text); font-size:14px; letter-spacing:.08em; }
.nani-brand-copy span { color:var(--n-muted); font-size:10px; letter-spacing:.12em; text-transform:uppercase; margin-top:4px; }
.nani-page-name { color:var(--n-text-soft); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nani-app-actions { display:flex; align-items:center; gap:8px; }
.nani-app-actions a, .nani-app-actions button {
  width:auto !important; height:38px !important; min-height:38px !important; padding:0 14px !important; border:1px solid var(--n-border) !important; border-radius:9px !important;
  background:var(--n-panel); color:var(--n-text-soft); text-decoration:none; font:600 12px/1 Inter,sans-serif;
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
}
.nani-app-actions a:hover, .nani-app-actions button:hover { color:var(--n-text); border-color:#46607f; background:var(--n-panel-2); transform:none; }
.nani-app-actions .nani-nav-back { background:rgba(39,217,155,.15) !important; border-color:rgba(39,217,155,.38) !important; color:#89f2ca !important; box-shadow:none !important; }
.nani-app-actions .nani-nav-dashboard { background:rgba(79,140,255,.14) !important; border-color:rgba(79,140,255,.34) !important; color:#a9c5ff !important; }
.nani-app-actions .nani-nav-settings { background:rgba(157,119,255,.14) !important; border-color:rgba(157,119,255,.34) !important; color:#cdbdff !important; }
.nani-app-actions .nani-nav-back:hover { background:rgba(39,217,155,.24) !important; }
.nani-app-actions .nani-nav-dashboard:hover { background:rgba(79,140,255,.23) !important; }
.nani-app-actions .nani-nav-settings:hover { background:rgba(157,119,255,.23) !important; }
.nani-user-chip { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:7px 11px; border-left:1px solid var(--n-border); color:var(--n-muted); font-size:11px; font-weight:700; }
.nani-legacy-nav, .nani-legacy-nav-wrap { display:none !important; margin:0 !important; padding:0 !important; height:0 !important; min-height:0 !important; }
button[onclick*="location.href='/system-settings'"],
button[onclick*="location.href = '/system-settings'"],
button[onclick*="location.href='/'"],
button[onclick*="location.href = '/'"],
button[onclick*="location.href='/production/dashboard'"],
button[onclick*="location.href = '/production/dashboard'"],
a[href="javascript:history.back()"],
a[href="/system-settings"]:not(.dash-card-btn):not(.nani-nav-settings),
a[href="/"]:not(.dash-card-btn):not(.nani-nav-dashboard) { display:none !important; }
div:has(> button[onclick*="location.href='/system-settings'"]):not(:has(> :not(button))),
div:has(> button[onclick*="location.href = '/system-settings'"]):not(:has(> :not(button))),
div:has(> button[onclick*="location.href='/'"]):not(:has(> :not(button))),
div:has(> button[onclick*="location.href = '/'"]):not(:has(> :not(button))) {
  display:none !important; margin:0 !important; padding:0 !important; height:0 !important;
}

h1,h2,h3,h4,h5 { color:var(--n-text) !important; font-family:Inter,"Segoe UI",sans-serif !important; letter-spacing:-.02em; }
h1 { font-size:clamp(24px,3vw,36px) !important; line-height:1.15; }
h2 { font-size:22px !important; }
h3 { font-size:17px !important; }
p, label, small { color:inherit; }
a { transition:color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; }

.main, .container, .matrix-container, .analytics-container, .content, main {
  width:min(100% - 32px, 1440px) !important;
  max-width:1440px !important;
  margin-inline:auto !important;
}
.main, .container, .matrix-container, .analytics-container { padding:28px 20px !important; }

.card, .panel, .section, .form-section, .order-section, .summary-card, .login-box,
.analytics-container, .table-container, .modal-content, .box {
  background:linear-gradient(180deg,rgba(22,36,56,.96),rgba(15,27,44,.96)) !important;
  border:1px solid var(--n-border-soft) !important;
  border-radius:var(--n-radius-lg) !important;
  box-shadow:0 12px 36px rgba(0,0,0,.18) !important;
}
.card, .panel, .section, .form-section, .order-section, .summary-card, .box { padding:22px !important; }

input, select, textarea {
  min-height:42px !important; padding:10px 12px !important; margin:4px 0 !important;
  color:var(--n-text) !important; background:#0a1423 !important;
  border:1px solid #33445c !important; border-radius:var(--n-radius-sm) !important;
  font:500 13px/1.35 Inter,"Segoe UI",sans-serif !important;
  outline:none !important; box-shadow:none !important;
}
textarea { min-height:96px !important; resize:vertical; }
input::placeholder, textarea::placeholder { color:#66778e !important; }
input:hover, select:hover, textarea:hover { border-color:#49617f !important; }
input:focus, select:focus, textarea:focus {
  border-color:var(--n-primary) !important;
  box-shadow:0 0 0 3px rgba(39,217,155,.14) !important;
}
input[type="checkbox"], input[type="radio"] { min-height:auto !important; accent-color:var(--n-primary); }
label { color:var(--n-text-soft) !important; font-weight:600 !important; font-size:12px !important; letter-spacing:.01em; }
.nani-form-grid {
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr)) !important;
  gap:16px !important;
  align-items:end !important;
  width:100% !important;
}
.nani-field { display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:7px !important; min-width:0; }
.nani-field > label { margin:0 !important; }
.nani-field > input, .nani-field > select, .nani-field > textarea { width:100% !important; }
.nani-form-grid > button, .nani-form-grid > .btn { width:100% !important; min-height:42px !important; margin:4px 0 !important; }
.nani-action-row { display:flex !important; flex-wrap:wrap !important; justify-content:flex-end !important; align-items:center !important; gap:10px !important; }
.nani-action-row > button, .nani-action-row > a { margin:0 !important; }

button, .btn, .back-btn, .btn-nav, .edit, .dash-card-btn, input[type="submit"] {
  min-height:40px; padding:10px 16px !important; border:1px solid transparent !important;
  border-radius:var(--n-radius-sm) !important; font:700 12px/1.2 Inter,"Segoe UI",sans-serif !important;
  letter-spacing:.01em; text-decoration:none !important; cursor:pointer;
  background:var(--n-primary) !important; color:#032319 !important;
  box-shadow:0 7px 18px rgba(39,217,155,.12) !important;
}
button:not(.dash-card-btn), .btn:not(.dash-card-btn), .back-btn, .btn-nav, .edit, input[type="submit"] {
  height:40px !important; min-height:40px !important; padding:0 16px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  vertical-align:middle !important; white-space:nowrap; line-height:1 !important;
}
.nani-appbar .nani-app-actions > button,
.nani-appbar .nani-app-actions > a {
  height:38px !important;
  min-height:38px !important;
  margin:0 !important;
  padding:0 14px !important;
  align-self:center !important;
  box-sizing:border-box !important;
  line-height:1 !important;
  transform:none !important;
}
a[class*="btn"]:not(.dash-card-btn) {
  height:40px !important; min-height:40px !important; padding:0 16px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  vertical-align:middle !important; white-space:nowrap; line-height:1 !important;
  border-radius:var(--n-radius-sm) !important;
}
.nani-action-add, .nani-action-save { background:rgba(39,217,155,.92) !important; color:#032319 !important; border-color:rgba(39,217,155,.65) !important; }
.nani-action-edit { background:rgba(245,185,66,.16) !important; color:#ffd77c !important; border-color:rgba(245,185,66,.42) !important; box-shadow:none !important; }
.nani-action-delete { background:rgba(240,100,107,.13) !important; color:#ff9ca1 !important; border-color:rgba(240,100,107,.4) !important; box-shadow:none !important; }
.nani-action-view { background:rgba(79,140,255,.15) !important; color:#aac6ff !important; border-color:rgba(79,140,255,.38) !important; box-shadow:none !important; }
.nani-action-print { background:rgba(79,140,255,.16) !important; color:#aac6ff !important; border-color:rgba(79,140,255,.4) !important; box-shadow:none !important; }
.nani-action-transfer { background:rgba(157,119,255,.15) !important; color:#cdbdff !important; border-color:rgba(157,119,255,.38) !important; box-shadow:none !important; }
.nani-action-cancel { background:#26364b !important; color:#c5d0de !important; border-color:#40526a !important; box-shadow:none !important; }
.nani-table-action { width:78px !important; height:34px !important; min-height:34px !important; padding:0 10px !important; margin:3px !important; font-size:11px !important; }
button:hover, .btn:hover, .back-btn:hover, .btn-nav:hover, .edit:hover, input[type="submit"]:hover {
  background:var(--n-primary-hover) !important; transform:translateY(-1px); box-shadow:0 10px 24px rgba(39,217,155,.2) !important;
}
button:focus-visible, a:focus-visible { outline:3px solid rgba(79,140,255,.45) !important; outline-offset:2px; }
button:disabled, .btn:disabled { opacity:.45; cursor:not-allowed; transform:none !important; }
.del-btn, .delete, .danger, button[onclick*="delete" i], button[onclick*="remove" i], a[href*="delete" i], .btn-logout {
  background:rgba(240,100,107,.12) !important; border-color:rgba(240,100,107,.38) !important;
  color:#ff9297 !important; box-shadow:none !important;
}
.del-btn:hover, .delete:hover, .danger:hover, button[onclick*="delete" i]:hover, button[onclick*="remove" i]:hover, .btn-logout:hover {
  background:rgba(240,100,107,.22) !important; border-color:var(--n-danger) !important; color:#ffc1c4 !important;
}
.back-btn, a[href="javascript:history.back()"], a[href="/"] .secondary {
  background:var(--n-panel-2) !important; border-color:var(--n-border) !important;
  color:var(--n-text-soft) !important; box-shadow:none !important;
}

table { width:100%; border-collapse:separate !important; border-spacing:0 !important; background:transparent !important; }
table thead th, table th {
  position:sticky; top:0; z-index:5; padding:13px 14px !important;
  color:#9fb0c5 !important; background:#152237 !important; border:0 !important;
  border-bottom:1px solid var(--n-border) !important; font:700 11px/1.35 Inter,sans-serif !important;
  letter-spacing:.055em !important; text-transform:uppercase !important;
}
table tbody td, table td { padding:13px 14px !important; border:0 !important; border-bottom:1px solid rgba(148,163,184,.1) !important; color:var(--n-text-soft); }
table tbody tr { background:rgba(17,29,46,.78) !important; transition:background .15s ease; }
table tbody tr:nth-child(even) { background:rgba(20,34,53,.82) !important; }
table tbody tr:hover { background:var(--n-panel-hover) !important; }
table tbody tr:last-child td { border-bottom:0 !important; }

.button-grid { grid-template-columns:repeat(auto-fit,minmax(190px,1fr)) !important; gap:14px !important; }
.dash-card-btn {
  min-height:132px !important; padding:22px 18px !important; align-items:flex-start !important;
  justify-content:flex-end !important; text-align:left !important; color:var(--n-text) !important;
  background:linear-gradient(145deg,#17263b,#111d2e) !important;
  border:1px solid var(--n-border-soft) !important; box-shadow:0 12px 28px rgba(0,0,0,.15) !important;
  overflow:hidden; position:relative;
}
.dash-card-btn::after { content:""; position:absolute; inset:auto -35px -55px auto; width:110px; height:110px; border-radius:50%; background:rgba(39,217,155,.055); }
.dash-card-btn:hover { transform:translateY(-3px) !important; border-color:rgba(39,217,155,.55) !important; background:linear-gradient(145deg,#1b2d45,#142238) !important; box-shadow:0 18px 38px rgba(0,0,0,.25) !important; }
.dash-card-btn span:first-child { margin:0 0 auto !important; font-size:26px !important; filter:saturate(.8); }
.dash-card-btn span:last-child { font-size:15.5px !important; line-height:1.4; font-weight:750 !important; }
.dash-card-btn.nani-area-supply { border-color:rgba(39,217,155,.3) !important; }
.dash-card-btn.nani-area-supply::after { background:rgba(39,217,155,.09); }
.dash-card-btn.nani-area-sales { border-color:rgba(79,140,255,.32) !important; }
.dash-card-btn.nani-area-sales::after { background:rgba(79,140,255,.1); }
.dash-card-btn.nani-area-production { border-color:rgba(157,119,255,.32) !important; }
.dash-card-btn.nani-area-production::after { background:rgba(157,119,255,.1); }
.dash-card-btn.nani-area-finance { border-color:rgba(245,185,66,.32) !important; }
.dash-card-btn.nani-area-finance::after { background:rgba(245,185,66,.09); }
.dash-card-btn.nani-area-admin { border-color:rgba(148,163,184,.25) !important; }

.welcome-box { text-align:left !important; margin:12px 0 34px !important; padding:0 !important; }
.welcome-box p { color:var(--n-muted) !important; font-size:12px !important; letter-spacing:.1em !important; text-transform:uppercase; }
.company-title { color:var(--n-text) !important; font-size:clamp(28px,4vw,52px) !important; text-transform:none !important; letter-spacing:-.04em !important; }
.header-section { border-bottom:1px solid var(--n-border-soft) !important; }
.muted { color:var(--n-muted) !important; }

.modal, [class*="modal"] { backdrop-filter:blur(8px); }
.modal-content { padding:26px !important; }
.status, .badge { border-radius:999px !important; padding:5px 9px !important; font-size:11px !important; font-weight:700 !important; }
hr { border:0 !important; border-top:1px solid var(--n-border-soft) !important; }

body.nani-login { display:grid !important; place-items:center; padding:32px !important; }
body.nani-login::before { content:"NANI-SYS"; position:fixed; top:28px; left:32px; color:var(--n-text); font-weight:800; letter-spacing:.12em; }
body.nani-login .login-box { width:min(100%,440px) !important; max-width:440px !important; margin:0 !important; padding:42px !important; border:1px solid var(--n-border) !important; text-align:left !important; }
body.nani-login .login-box h2 { font-size:27px !important; margin:0 0 8px; }
body.nani-login .login-box p { color:var(--n-muted); }
body.nani-login .input-field { width:100% !important; text-align:left !important; margin-bottom:18px !important; }
body.nani-login button { width:100% !important; margin-top:8px; }
.login-register-panel { margin-top:24px; padding-top:20px; border-top:1px solid var(--n-border-soft); display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; color:var(--n-muted); font-size:12px; }
.login-register-link { color:#a9c5ff; text-decoration:none; font-weight:750; }
.login-register-link:hover { color:#d1deff; text-decoration:underline; }
.login-notice { margin:16px 0 20px; padding:12px 14px; border-radius:10px; border:1px solid rgba(39,217,155,.38); background:rgba(39,217,155,.1); color:#9af0d0; font-size:12px; line-height:1.5; }

.nani-toast-stack { position:fixed; right:22px; bottom:22px; z-index:10000; display:grid; gap:10px; width:min(390px,calc(100vw - 32px)); }
.nani-toast { padding:14px 16px; border-radius:12px; background:#17263b; border:1px solid var(--n-border); box-shadow:var(--n-shadow); color:var(--n-text); animation:nani-in .24s ease both; }
.nani-toast-success { border-color:rgba(39,217,155,.7); background:#15372f; }
.nani-toast-error { border-color:rgba(240,100,107,.75); background:#3c2028; }
@keyframes nani-in { from { opacity:0; transform:translateY(10px); } }

@media (max-width:760px) {
  html, body { width:100%; max-width:100%; overflow-x:hidden !important; }
  body { padding-left:10px !important; padding-right:10px !important; }
  body > * { max-width:100%; box-sizing:border-box; }
  body, p, label, td, th, button, a { overflow-wrap:anywhere; }
  form, fieldset, main, section, article, .wrap, .page, .content { min-width:0 !important; max-width:100% !important; box-sizing:border-box; }
  .nani-appbar { height:56px; padding:0 10px; margin-left:-10px; margin-right:-10px; width:calc(100% + 20px); max-width:none !important; gap:8px; }
  .nani-brand { gap:7px; flex:0 1 auto; }
  .nani-brand-mark { width:32px; height:32px; border-radius:8px; font-size:15px; }
  .nani-brand-copy strong { font-size:11px; letter-spacing:.04em; }
  .nani-brand-copy span, .nani-page-name, .nani-action-label { display:none; }
  .nani-app-actions { gap:5px; flex:0 0 auto; }
  .nani-appbar .nani-app-actions > button,
  .nani-appbar .nani-app-actions > a { width:34px !important; min-width:34px !important; height:34px !important; min-height:34px !important; padding:0 !important; justify-content:center !important; }
  .nani-user-chip { display:none; }
  .main,.container,.matrix-container,.analytics-container { width:100% !important; padding:18px 12px !important; }
  .button-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; }
  .dash-card-btn { min-height:116px !important; padding:16px !important; }
  .card,.panel,.section,.form-section,.order-section,.summary-card,.box { padding:16px !important; border-radius:14px !important; }
  h1 { font-size:clamp(22px,7vw,30px) !important; line-height:1.15 !important; overflow-wrap:anywhere; }
  h2 { font-size:clamp(19px,6vw,25px) !important; line-height:1.2 !important; overflow-wrap:anywhere; }
  img, svg, canvas, video { max-width:100% !important; height:auto; }
  input, select, textarea { max-width:100% !important; min-width:0 !important; font-size:16px !important; }
  button, a[class*="btn"], input[type="submit"] { min-height:44px; }
  [style*="grid-template-columns"] { grid-template-columns:minmax(0,1fr) !important; }
  [style*="display:flex"], [style*="display: flex"] { max-width:100%; flex-wrap:wrap !important; }
  [style*="width:450px"], [style*="width: 450px"],
  [style*="width:40%"], [style*="width: 40%"] { width:calc(100vw - 28px) !important; max-width:calc(100vw - 28px) !important; }
  [style*="left:30%"], [style*="left: 30%"] { left:14px !important; right:14px !important; }
  .modal, [id$="Modal"], [id*="modal" i] { max-width:100vw !important; }
  .modal-content { width:calc(100vw - 28px) !important; max-width:calc(100vw - 28px) !important; margin:14px auto !important; padding:18px !important; max-height:calc(100vh - 28px) !important; overflow:auto !important; }
  [style*="position: fixed"], [style*="position:fixed"] { max-width:calc(100vw - 20px) !important; }
  table { min-width:680px; }
  .nani-table-scroll, .table-container, .analytics-table, body > table { width:100% !important; max-width:100% !important; overflow-x:auto !important; display:block; -webkit-overflow-scrolling:touch; }
  table thead th, table th { top:0; }
  .nani-form-grid { grid-template-columns:1fr !important; gap:12px !important; }
  .nani-action-row { justify-content:stretch !important; }
  .nani-action-row > button, .nani-action-row > a { flex:1 1 150px; text-align:center; }
  .nani-toast-stack { left:10px; right:10px; bottom:10px; width:auto; }
}

@media (max-width:430px) {
  .button-grid { grid-template-columns:1fr !important; }
  .dash-card-btn { min-height:96px !important; }
  .card,.panel,.section,.form-section,.order-section,.summary-card,.box { padding:14px !important; }
  button:not(.nani-nav-back), .btn:not(.dash-card-btn), input[type="submit"] { max-width:100%; }
  .nani-action-row > button, .nani-action-row > a { flex:1 1 100% !important; width:100% !important; }
  body.nani-login .login-box { padding:24px 18px !important; }
}

@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }
@media print { .nani-appbar,.nani-toast-stack { display:none !important; } }

/* POS table floor: keep the header below the shared app bar and never clip actions. */
body:has(.table-screen) .table-screen .sale-wrap { padding-top:76px !important; }
body:has(.table-screen) .table-screen .sale-bar { display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:10px !important; }
body:has(.table-screen) .table-screen .sale-bar > div:first-child { flex:1 1 100% !important; min-width:0 !important; }
body:has(.table-screen) .table-screen .sale-bar > button { flex:1 1 150px !important; width:auto !important; min-height:46px !important; padding:10px 12px !important; white-space:normal !important; }
body:has(.table-screen) .table-screen #closeTables { order:4; }
@media (max-width:700px) {
  body:has(.table-screen) .table-screen .sale-wrap { padding:68px 10px 18px !important; }
  body:has(.table-screen) .table-screen .sale-bar > button { flex:1 1 100% !important; width:100% !important; }
}