/* NIST ERP - Meridian v2 (patch164): UX polish layer. Loads after
   theme-meridian.css. Typography scale, calmer color contrast, consistent
   control heights/states, readable tables, accessible focus, motion. */
:root{
  --fs-xs:11.5px;--fs-sm:12.5px;--fs-base:14px;--fs-md:15px;--fs-lg:17px;--fs-xl:20px;--fs-2xl:24px;
  --lh:1.5;--r-sm:8px;--r:10px;--r-lg:14px;
  --ink:#1B2330;--ink-2:#4B5563;--ink-3:#6B7280;--line:#E6E3DA;--line-2:#EFEDE6;--paper:#FFFFFF;--canvas:#F6F5F0;
  --navy:#132A52;--navy-2:#1B3A6B;--gold:#C9A227;--gold-2:#E3C566;--gold-bg:#FBF3DC;
  --ok:#1E7F4F;--ok-bg:#E6F4EC;--warn:#8A6D1A;--warn-bg:#FBF3DC;--bad:#B3382C;--bad-bg:#F9E7E4;--info:#1D4ED8;--info-bg:#E8EFFD;
  --shadow-1:0 1px 2px rgba(19,42,82,.06),0 1px 1px rgba(19,42,82,.04);--shadow-2:0 4px 14px rgba(19,42,82,.08),0 1px 2px rgba(19,42,82,.05);
  --focus:0 0 0 3px rgba(201,162,39,.28);
  --primary:var(--navy);--bg:var(--canvas);--border:var(--line);--muted:var(--ink-3);
}
html{font-size:var(--fs-base)}
body{font-family:"Inter","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--fs-base);line-height:var(--lh);color:var(--ink);background:var(--canvas);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{color:var(--navy);letter-spacing:-.01em;line-height:1.25}
.iv2-title{font-size:var(--fs-xl);font-weight:800;color:var(--navy)}
.iv2-sub{font-size:var(--fs-sm);color:var(--ink-3)}
small,.text-muted{color:var(--ink-3)}
/* ---------- scrollbars ---------- */
*{scrollbar-width:thin;scrollbar-color:#C7C3B7 transparent}
*::-webkit-scrollbar{width:9px;height:9px}*::-webkit-scrollbar-thumb{background:#C7C3B7;border-radius:8px;border:2px solid transparent;background-clip:padding-box}*::-webkit-scrollbar-thumb:hover{background:#A8A397;background-clip:padding-box}
/* ---------- sidebar ---------- */
.v2-nav-group{font-size:10.5px;letter-spacing:.08em;color:rgba(227,197,102,.85);padding:12px 14px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cfgNav .cfg-sec{padding-right:10px}#cfgNav .cfg-sec span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.v2-nav a{font-size:13px;padding:8px 12px;margin:1px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:9px;color:#C3CBDA;transition:background .12s,color .12s}
.v2-nav a i{width:18px;text-align:center;font-size:14px}
.v2-nav a:hover{background:rgba(255,255,255,.07);color:#F3F5F9}
.v2-nav a.active{background:linear-gradient(90deg,rgba(201,162,39,.22),rgba(201,162,39,.05));color:#FFF;box-shadow:inset 3px 0 0 var(--gold)}
#cfgNav .cfg-search{font-size:13px;height:36px;border-radius:9px}
/* ---------- topbar ---------- */
.v2-topbar{height:64px;padding:0 20px}
.v2-topbar-title{font-size:var(--fs-lg);font-weight:800}
.v2-user-chip{padding:6px 12px 6px 8px;border-radius:12px;gap:10px}
.v2-user-chip .v2-user-role{font-size:var(--fs-xs)}
/* ---------- cards ---------- */
.iv2-card{border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1);background:var(--paper);padding:18px}
.iv2-page>.iv2-card+.iv2-card{margin-top:14px}
.iv2-head{padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line-2)}
.iv2-tile{width:44px;height:44px;border-radius:12px;font-size:18px}
/* ---------- controls: shared metrics ---------- */
.iv2-input,.iv2-search input,select.iv2-input,textarea.iv2-input,.sux-in{
  height:40px;font-size:var(--fs-base);color:var(--ink);background:var(--paper);border:1px solid #D6D2C6;border-radius:var(--r-sm);padding:0 12px;transition:border-color .12s,box-shadow .12s}
textarea.iv2-input{height:auto;min-height:88px;padding:10px 12px;line-height:1.45}
.iv2-input::placeholder{color:#9AA0AB}
.iv2-input:hover,.sux-in:hover{border-color:#BDB8AA}
.iv2-input:focus,.iv2-input:focus-within,.sux-in:focus-within{border-color:var(--gold);box-shadow:var(--focus);outline:none}
.iv2-input:disabled,.iv2-input[readonly]{background:#F3F1EA;color:var(--ink-2);cursor:not-allowed}
select.iv2-input{appearance:none;-webkit-appearance:none;padding-right:36px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236B7280' stroke-width='1.8' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 12px center}
label,.iv2-field>label{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2);margin-bottom:6px;display:block}
.iv2-field{margin-bottom:14px}
input[type=checkbox],input[type=radio]{width:16px;height:16px;accent-color:var(--navy);cursor:pointer}
/* ---------- buttons ---------- */
.iv2-btn-primary,.iv2-btn-light,.iv2-btn-danger,.sux-btn{height:40px;padding:0 16px;font-size:13.5px;font-weight:600;border-radius:var(--r-sm);display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:background .12s,box-shadow .12s,transform .06s;line-height:1}
.iv2-btn-primary{background:linear-gradient(180deg,var(--navy-2),var(--navy));border:1px solid #0E1F3D;color:#fff;box-shadow:0 1px 2px rgba(14,31,61,.25)}
.iv2-btn-primary:hover{background:linear-gradient(180deg,#20447D,#16305E);box-shadow:inset 0 0 0 1px var(--gold),0 3px 8px rgba(14,31,61,.25)}
.iv2-btn-primary:active,.iv2-btn-light:active{transform:translateY(1px)}
.iv2-btn-light,.sux-btn{background:var(--paper);border:1px solid #D6D2C6;color:#31405C}
.iv2-btn-light:hover,.sux-btn:hover{border-color:var(--gold);background:#FDFBF4;color:var(--navy)}
.iv2-btn-danger{background:var(--bad);border:1px solid #9E2F25;color:#fff}.iv2-btn-danger:hover{background:#9E2F25}
.iv2-btn-primary:focus-visible,.iv2-btn-light:focus-visible,.iv2-btn-danger:focus-visible,.sux-btn:focus-visible{outline:none;box-shadow:var(--focus)}
.iv2-btn-primary:disabled,.iv2-btn-light:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.iv2-btn-light i,.iv2-btn-primary i{font-size:13px}
/* ---------- tables ---------- */
.iv2-table{font-size:13.5px;border-collapse:separate;border-spacing:0}
.iv2-table thead th{position:sticky;top:0;z-index:1;background:#F3F1EA;color:#3A4358;font-size:var(--fs-xs);font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:11px 12px;border-bottom:1.5px solid var(--line)}
.iv2-table tbody td{padding:11px 12px;border-bottom:1px solid var(--line-2);vertical-align:middle;color:var(--ink)}
.iv2-table tbody tr:nth-child(even) td{background:#FCFBF8}
.iv2-table tbody tr:hover td{background:#FBF6E6}
.iv2-table td.num,.iv2-table th.num{text-align:right;font-variant-numeric:tabular-nums}
.iv2-table-wrap{border:1px solid var(--line);border-radius:var(--r);overflow:auto;max-height:70vh}
.iv2-empty{padding:28px;text-align:center;color:var(--ink-3);font-size:var(--fs-sm)}
/* ---------- badges / pills / chips ---------- */
.iv2-badge,.iv2-pill,.iv2-chip{font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;padding:3px 9px;border-radius:999px;line-height:1.4;text-transform:uppercase}
.iv2-badge.green{background:var(--ok-bg);color:var(--ok)}.iv2-badge.orange{background:var(--warn-bg);color:var(--warn)}.iv2-badge.red{background:var(--bad-bg);color:var(--bad)}.iv2-badge.blue{background:var(--info-bg);color:var(--info)}.iv2-badge.slate{background:#ECEAE2;color:var(--ink-2)}
.iv2-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;background:#F3F1EA;border:1px solid var(--line);border-radius:6px;padding:2px 7px;color:var(--navy)}
/* ---------- modal / dialog ---------- */
.modal-backdrop,.iv2-overlay{background:rgba(14,31,61,.45);backdrop-filter:blur(2px)}
.modal,.iv2-dialog{border-radius:var(--r-lg);box-shadow:0 20px 60px rgba(14,31,61,.35);border:1px solid rgba(255,255,255,.4)}
.modal-head,.iv2-dlg-head{padding:16px 22px;border-bottom:1px solid var(--line-2)}
.modal-title{font-size:var(--fs-lg);font-weight:800;color:var(--navy)}
.modal-body,.iv2-dlg-body{padding:18px 22px;font-size:var(--fs-base)}
.modal-actions,.iv2-dlg-foot{padding:14px 22px;border-top:1px solid var(--line-2);gap:10px;display:flex;justify-content:flex-end}
.modal-close,.iv2-x{width:34px;height:34px;border-radius:8px;color:var(--ink-3)}.modal-close:hover,.iv2-x:hover{background:#F3F1EA;color:var(--navy)}
/* ---------- toasts ---------- */
.toast{border-radius:var(--r);font-size:13.5px;padding:12px 16px;box-shadow:var(--shadow-2);border-left:4px solid var(--gold)}
.toast.ok{border-left-color:var(--ok)}.toast.err,.toast.error{border-left-color:var(--bad)}
/* ---------- links & misc ---------- */
a{color:var(--navy-2)}a:hover{color:var(--navy)}
::selection{background:rgba(201,162,39,.3)}
.iv2-pager button{height:34px;min-width:34px;border-radius:8px}
kbd{font:600 11px ui-monospace,monospace;background:#F3F1EA;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 6px}
@media (max-width:1100px){.iv2-card{padding:14px}.iv2-table{font-size:13px}}

/* patch189: wider sidebar so configured menu labels are fully visible */
body:not(.nav-collapsed) .v2-sidebar{width:264px!important;min-width:264px}
body:not(.nav-collapsed) .v2-shell{grid-template-columns:264px 1fr!important}
body:not(.nav-collapsed) .v2-nav a,body:not(.nav-collapsed) #cfgNav a[data-cfgnav]{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25;padding:8px 12px}
body:not(.nav-collapsed) #cfgNav a[data-cfgnav] span{white-space:normal;word-break:normal}
body:not(.nav-collapsed) .v2-nav-group,body:not(.nav-collapsed) #cfgNav .cfg-sec span{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}

/* patch197: dialog controls - selects inside .iv2-input fully visible; action buttons never wrap */
.iv2-input select,.iv2-input .f-select,.iv2-input input,.iv2-input .f-input{height:40px;line-height:38px;padding:0 34px 0 10px;font-size:14px;overflow:visible;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;width:100%;background:transparent;border:0;outline:0;color:var(--ink)}
.iv2-input{overflow:visible;align-items:stretch}
.iv2-input .iv2-input-icon{display:flex;align-items:center;justify-content:center;width:44px;flex:none;border-right:1px solid var(--line-2);color:var(--ink-3)}
.iv2-btn-primary,.iv2-btn-light,.iv2-btn-danger,.sux-btn,.iv2-dlg-foot button,.modal-actions button{white-space:nowrap;width:auto;flex:none}
#siVerifyBtn{white-space:nowrap;padding:0 16px}
.cv2-sec-title{font-size:14px;font-weight:700;color:var(--navy-2);margin-bottom:10px}

/* patch200: form controls that carry .iv2-input themselves (not the wrapper): full width, proper text alignment */
input.iv2-input,select.iv2-input,textarea.iv2-input{display:block!important;width:100%!important;box-sizing:border-box;min-width:0}
select.iv2-input{height:40px;padding:0 34px 0 12px!important;line-height:1.2!important;display:flex!important;align-items:center}
input.iv2-input{height:40px;padding:0 12px!important;line-height:normal}
input.iv2-input[type=date]{padding:0 12px!important}
label>input.iv2-input,label>select.iv2-input,label>textarea.iv2-input{margin-top:4px}
.modal-body label,.iv2-dlg-body label{display:block;min-width:0}
.modal-body label>span:first-child{display:block}

/* patch201: select value + label asterisk alignment */
select.iv2-input{-webkit-appearance:none;appearance:none;text-align:left;text-indent:0}
select.iv2-input:not([size]){padding-top:0!important;padding-bottom:0!important}
.modal-body label,.iv2-dlg-body label,.sux label,form label{line-height:1.35}
.modal-body label>span[style*="color"],.iv2-dlg-body label>span[style*="color"]{display:inline}
label{white-space:normal}
/* nist-sidebar-onerow */
/* Supersedes patch189, which set white-space:normal and therefore allowed labels
   to wrap. Longest active label is "Customer Outstanding Report" (27 chars at 13px),
   so 300px clears it; anything longer gets an ellipsis instead of a second row. */
body:not(.nav-collapsed) .v2-sidebar{width:300px!important;min-width:300px!important}
body:not(.nav-collapsed) .v2-shell{grid-template-columns:300px 1fr!important}
body:not(.nav-collapsed) .v2-nav a,
body:not(.nav-collapsed) #cfgNav a[data-cfgnav]{
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  line-height:1.35;padding:8px 12px;gap:10px}
body:not(.nav-collapsed) #cfgNav a[data-cfgnav] span{
  white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;min-width:0}
body:not(.nav-collapsed) .v2-nav-group,
body:not(.nav-collapsed) #cfgNav .cfg-sec span{
  white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis}
/* keep the narrow phone layout untouched */
@media (max-width:900px){
  body:not(.nav-collapsed) .v2-sidebar{width:264px!important;min-width:264px!important}
  body:not(.nav-collapsed) .v2-shell{grid-template-columns:264px 1fr!important}
}
