/* NGIPL Price List Manager — app chrome, tables, print sheet */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-paper);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ngipl-black); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--gray-700); }
input, select, textarea, button { font-family: var(--font-body); }

.overline {
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
}
.caption { font-size: var(--fs-caption); color: var(--text-muted); line-height: var(--lh-caption); }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- App chrome ---------- */
.app-top {
  background: var(--surface-page);
  border-bottom: var(--bw-hairline) solid var(--border-strong);
}
.app-top-inner {
  max-width: 1280px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 20px;
}
.app-logo { height: 40px; display: block; }
.app-wordmark { line-height: 1; }
.app-wordmark .wm-name { font-size: 15px; font-weight: var(--fw-display); letter-spacing: 0.03em; color: var(--ngipl-black); }
.app-wordmark .wm-sub { font-size: 7px; font-weight: var(--fw-semibold); letter-spacing: 0.29em; margin-top: 3px; color: var(--gray-700); }
.app-top-divider { width: 1px; height: 28px; background: var(--border-default); }
.app-title { font-size: 11px; letter-spacing: var(--track-overline); color: var(--text-muted); font-weight: var(--fw-semibold); text-transform: uppercase; }
.app-top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.app-tabs-band { background: var(--surface-page); border-bottom: var(--bw-hairline) solid var(--border-default); }
.app-tabs { max-width: 1280px; margin: 0 auto; padding: 0 24px; display: flex; gap: 28px; }
.app-tab {
  appearance: none; background: none; border: none; cursor: pointer;
  padding: 14px 2px 12px; margin-bottom: -1px;
  font-size: var(--fs-overline); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--track-caps);
  color: var(--text-muted); border-bottom: var(--bw-strong) solid transparent;
  transition: color var(--dur-fast) var(--ease-brand), border-color var(--dur-fast) var(--ease-brand);
}
.app-tab:hover { color: var(--text-display); }
.app-tab--active { color: var(--text-display); border-bottom-color: var(--ngipl-black); }
.app-tab .tab-badge { margin-left: 6px; }

.app-main { max-width: 1280px; margin: 0 auto; padding: 24px 24px 80px; }

/* ---------- Cards / panels ---------- */
.panel { background: var(--surface-card); border: var(--bw-hairline) solid var(--border-default); }
.panel--strong { border-color: var(--border-strong); }

/* ---------- Toolbar ---------- */
.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }

/* ---------- Data table ---------- */
.plm-table-wrap { overflow: auto; }
.plm-table { width: 100%; border-collapse: collapse; background: var(--surface-card); }
.plm-table th {
  text-align: left; font-size: 10.5px; font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--track-caps);
  color: var(--text-muted); padding: 10px 12px;
  border-bottom: var(--bw-strong) solid var(--ngipl-black);
  background: var(--surface-card); position: sticky; top: 0; z-index: 2;
  white-space: nowrap;
}
.plm-table td {
  padding: 8px 12px; border-bottom: var(--bw-hairline) solid var(--border-subtle);
  font-size: 13.5px; vertical-align: middle;
}
.density-compact .plm-table td { padding: 4px 12px; font-size: 12.5px; }
.plm-table tr.cat-band td {
  background: var(--surface-dark); color: var(--ngipl-white);
  font-size: 11px; font-weight: var(--fw-semibold); text-transform: uppercase;
  letter-spacing: var(--track-overline); padding: 6px 12px; border-bottom: none;
}
.band-cell { display: inline-flex; align-items: center; gap: 10px; }
.band-cell svg { display: block; }
.plm-table tr.sub-band td {
  background: var(--surface-sunken); color: var(--gray-700);
  font-size: 10px; font-weight: var(--fw-semibold); text-transform: uppercase;
  letter-spacing: var(--track-caps); padding: 5px 12px;
  border-bottom: var(--bw-hairline) solid var(--border-subtle);
}
.plm-table tbody tr.item-row:hover td { background: var(--surface-sunken); }
.plm-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.plm-table .rate { font-weight: var(--fw-semibold); }
.plm-table .col-no { color: var(--text-faint); width: 44px; font-variant-numeric: tabular-nums; }
.item-note { font-size: 11.5px; color: var(--text-faint); margin-top: 1px; }
.row-actions { opacity: 0; transition: opacity var(--dur-fast) var(--ease-brand); white-space: nowrap; }
tr:hover .row-actions { opacity: 1; }

/* rate inline edit */
.rate-view { cursor: pointer; border-bottom: 1px dashed var(--gray-400); padding-bottom: 1px; }
.rate-view:hover { border-bottom-color: var(--ngipl-black); color: var(--ngipl-black); }
.rate-input {
  width: 76px; padding: 3px 6px; font-size: 13px; text-align: right;
  border: var(--bw-hairline) solid var(--ngipl-black); border-radius: var(--radius-1);
  font-variant-numeric: tabular-nums; outline: none; font-weight: var(--fw-semibold);
}

/* chips / tags */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  border: var(--bw-hairline) solid var(--border-default);
  padding: 2px 8px; font-size: 10.5px; font-weight: var(--fw-semibold);
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--gray-700);
  background: var(--surface-card); white-space: nowrap;
}
.chip--click { cursor: pointer; }
.chip--click:hover { border-color: var(--ngipl-black); color: var(--ngipl-black); }
.chip--dark { background: var(--ngipl-black); color: var(--ngipl-white); border-color: var(--ngipl-black); }
.chip--warn { border-color: var(--amber-700); color: var(--amber-700); background: var(--amber-50); }
.chip--ghost { border-color: transparent; color: var(--text-faint); }

/* filter chips row */
.filter-chips { display: flex; gap: 8px; align-items: center; }
.fchip {
  appearance: none; cursor: pointer; background: var(--surface-card);
  border: var(--bw-hairline) solid var(--border-default);
  padding: 5px 12px; font-size: 10.5px; font-weight: var(--fw-semibold);
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--gray-700);
  transition: all var(--dur-fast) var(--ease-brand);
}
.fchip:hover { border-color: var(--ngipl-black); color: var(--ngipl-black); }
.fchip--on { background: var(--ngipl-black); color: var(--ngipl-white); border-color: var(--ngipl-black); }

/* ---------- Parties layout ---------- */
.parties-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
.plm-table .num, .plm-table td:last-child { white-space: nowrap; }
.plm-table-wrap { overflow: auto; }
.party-card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--surface-card); border: var(--bw-hairline) solid var(--border-default);
  border-bottom: none; padding: 12px 14px; appearance: none;
  transition: background var(--dur-fast) var(--ease-brand);
}
.party-card:last-child { border-bottom: var(--bw-hairline) solid var(--border-default); }
.party-card:hover { background: var(--surface-sunken); }
.party-card--on { background: var(--ngipl-black); }
.party-card--on:hover { background: var(--ngipl-black); }
.party-card--on .pc-name { color: var(--ngipl-white); }
.party-card--on .pc-meta { color: var(--text-inverse-muted); }
.pc-name { font-weight: var(--fw-semibold); font-size: 13.5px; color: var(--text-display); display: flex; align-items: center; gap: 8px; }
.pc-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

.stat-strip { display: flex; border-bottom: var(--bw-hairline) solid var(--border-default); }
.stat-cell { padding: 12px 20px 12px 16px; border-right: var(--bw-hairline) solid var(--border-subtle); }
.stat-cell:last-child { border-right: none; }
.stat-num { font-size: 22px; font-weight: var(--fw-display); letter-spacing: var(--track-display); line-height: 1.1; }
.stat-lbl { font-size: 9.5px; font-weight: var(--fw-semibold); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); margin-top: 2px; }

/* stale review banner */
.review-banner {
  display: flex; align-items: center; gap: 10px;
  border: var(--bw-hairline) solid var(--amber-700); background: var(--amber-50);
  padding: 8px 14px; margin-bottom: 14px; font-size: 12.5px; color: var(--amber-700);
}

/* ---------- Dialogs ---------- */
.dlg-scrim {
  position: fixed; inset: 0; background: var(--surface-scrim); z-index: 50;
  display: flex; align-items: flex-start; justify-content: center; padding: 60px 20px 40px;
  overflow: auto;
}
.dlg {
  background: var(--surface-card); border: var(--bw-hairline) solid var(--ngipl-black);
  width: 560px; max-width: 100%;
  box-shadow: var(--shadow-overlay, 0 12px 40px rgba(34,32,33,0.24));
}
.dlg-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: var(--bw-hairline) solid var(--border-default);
}
.dlg-title { font-size: 13px; font-weight: var(--fw-display); text-transform: uppercase; letter-spacing: var(--track-caps); }
.dlg-body { padding: 20px; }
.dlg-foot {
  display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px;
  border-top: var(--bw-hairline) solid var(--border-default); background: var(--surface-sunken);
}

/* ---------- Drawer ---------- */
.drawer-scrim { position: fixed; inset: 0; background: var(--surface-scrim); z-index: 50; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 92vw;
  background: var(--surface-card); border-left: var(--bw-hairline) solid var(--ngipl-black);
  z-index: 51; display: flex; flex-direction: column;
  animation: drawer-in var(--dur-base) var(--ease-brand);
}
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-body { flex: 1; overflow: auto; }
.hist-item { padding: 12px 20px; border-bottom: var(--bw-hairline) solid var(--border-subtle); }
.hist-label { font-size: 13px; }
.hist-meta { font-size: 11px; color: var(--text-faint); margin-top: 3px; letter-spacing: 0.04em; }
.hist-changes { margin: 8px 0 0; padding: 8px 12px; background: var(--surface-sunken); font-size: 12px; }
.hist-changes div { padding: 2px 0; display: flex; justify-content: space-between; gap: 12px; }

/* ---------- Forms ---------- */
.f-label { display: block; font-size: 10.5px; font-weight: var(--fw-semibold); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--gray-700); margin-bottom: 5px; }
.f-input, .f-select, .f-textarea {
  width: 100%; height: 38px; padding: 0 12px; font-size: 13.5px; color: var(--text-body);
  border: var(--bw-hairline) solid var(--gray-400); border-radius: var(--radius-1);
  background: var(--surface-card); outline: none;
  transition: border-color var(--dur-fast) var(--ease-brand);
}
.f-textarea { height: auto; padding: 9px 12px; resize: vertical; line-height: 1.5; }
.f-input:hover, .f-select:hover, .f-textarea:hover { border-color: var(--gray-600); }
.f-input:focus, .f-select:focus, .f-textarea:focus { border-color: var(--ngipl-black); }
.f-row { display: flex; gap: 14px; }
.f-row > * { flex: 1; min-width: 0; }
.f-stack { display: flex; flex-direction: column; gap: 14px; }
.f-select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23222021' stroke-width='1.5'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }

/* ---------- W.E.F. calendar ---------- */
.wef-field { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-align: left; background: var(--surface-card); font-family: inherit; }
.cal-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  background: var(--surface-card); border: var(--bw-hairline) solid var(--ngipl-black);
  padding: 12px; width: 252px; box-sizing: border-box;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
}
.cal-pop--right { left: auto; right: 0; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-title { font-size: 11.5px; font-weight: var(--fw-semibold); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-display); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow { font-size: 9px; font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); text-align: center; padding: 4px 0 6px; }
.cal-day {
  appearance: none; background: none; font-family: inherit; cursor: pointer;
  height: 28px; font-size: 12px; color: var(--text-body);
  border: var(--bw-hairline) solid transparent; border-radius: var(--radius-0);
  transition: background-color var(--dur-fast) var(--ease-brand), border-color var(--dur-fast) var(--ease-brand);
}
.cal-day:hover { background: var(--surface-sunken); }
.cal-day--today { border-color: var(--gray-500); }
.cal-day--sel { background: var(--ngipl-black); color: var(--ngipl-white); border-color: var(--ngipl-black); }
.cal-day--sel:hover { background: var(--gray-800); }
.cal-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 9px; border-top: var(--bw-hairline) solid var(--border-default); }
.cal-today { appearance: none; background: none; border: none; padding: 0; font-family: inherit; font-size: 11.5px; font-weight: var(--fw-semibold); color: var(--text-display); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cal-today:hover { color: var(--gray-700); }

.search-box { position: relative; }
.search-box .f-input { padding-left: 34px; width: 280px; }
.search-box svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-faint); }

/* segmented */
.seg { display: inline-flex; border: var(--bw-hairline) solid var(--gray-400); border-radius: var(--radius-1); overflow: hidden; }
.seg button {
  appearance: none; border: none; background: var(--surface-card); cursor: pointer;
  padding: 7px 14px; font-size: 10.5px; font-weight: var(--fw-semibold);
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--gray-700);
  border-right: var(--bw-hairline) solid var(--gray-300);
}
.seg button:last-child { border-right: none; }
.seg button.on { background: var(--ngipl-black); color: var(--ngipl-white); }

/* ---------- Toast ---------- */
.toast-wrap { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  background: var(--ngipl-black); color: var(--ngipl-white); padding: 10px 18px;
  font-size: 12.5px; max-width: 560px; text-align: center;
  animation: toast-in var(--dur-base) var(--ease-brand);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Print sheet ---------- */
.print-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
.print-opts { display: flex; gap: 16px; align-items: flex-end; padding: 12px 16px; margin-bottom: 16px; }
.print-desk {
  background: var(--surface-dark);
  border: var(--bw-hairline) solid var(--ngipl-black);
  padding: 26px 28px 40px; overflow: auto;
}
.desk-doclabel {
  color: var(--text-inverse-muted); font-size: 10px; font-weight: var(--fw-semibold);
  letter-spacing: var(--track-overline); text-transform: uppercase;
  text-align: center; margin-bottom: 18px;
}
.sheet-scale { width: 794px; margin: 0 auto; transform-origin: top center; }
.print-desk .sheet { border: none; }
.sheet-canvas { overflow: auto; padding: 4px; }
.sheet {
  width: 794px; min-height: 1123px; margin: 0 auto; background: #ffffff;
  border: var(--bw-hairline) solid var(--border-default);
  color: var(--ngipl-black);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.sheet-pad { padding: 36px 40px 32px; }

.sheet-band { position: relative; background: var(--ngipl-charcoal); color: var(--ngipl-white); padding: 20px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.sheet-band .band-fill { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.sheet-band img, .sheet-band .co-block { position: relative; z-index: 1; }
.sheet-band img { height: 118px; display: block; }
.sheet-band .co-block { text-align: right; font-size: 8.5px; line-height: 1.7; color: rgba(255,255,255,0.72); letter-spacing: 0.02em; }
.sheet-band .co-name { font-size: 10px; font-weight: var(--fw-semibold); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ngipl-white); margin-bottom: 3px; }

.sheet-min-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 32px; }
.sheet-min-head img { height: 118px; display: block; }
.sheet-min-head .co-block { text-align: right; font-size: 8.5px; line-height: 1.7; color: var(--gray-600); }
.sheet-min-head .co-name { font-size: 10px; font-weight: var(--fw-semibold); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ngipl-black); margin-bottom: 3px; }
.sheet-rule { border-top: var(--bw-strong) solid var(--ngipl-black); margin: 0 32px; }

.sheet-titlerow { display: flex; align-items: baseline; justify-content: space-between; padding: 16px 32px 6px; }
.sheet-title { font-size: 26px; font-weight: var(--fw-display); letter-spacing: var(--track-display); text-transform: uppercase; line-height: 1; }
.sheet-wef { font-size: 10px; font-weight: var(--fw-semibold); letter-spacing: var(--track-overline); text-transform: uppercase; }
.sheet-wef--big { font-size: 26px; font-weight: var(--fw-display); letter-spacing: var(--track-display); line-height: 1; }
.sheet-subrow { padding: 0 32px 10px; display: flex; justify-content: space-between; align-items: baseline; }
.sheet-for { font-size: 11px; letter-spacing: var(--track-caps); text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--gray-700); }

.sheet table { width: 100%; border-collapse: collapse; }
.sheet .pt { margin: 0 32px 0; }
.sheet th {
  text-align: left; font-size: 8px; font-weight: var(--fw-semibold); text-transform: uppercase;
  letter-spacing: var(--track-caps); color: var(--gray-600);
  border-top: var(--bw-hairline) solid var(--ngipl-black);
  border-bottom: var(--bw-hairline) solid var(--ngipl-black);
  padding: 5px 6px;
}
.sheet td { font-size: 10.5px; padding: 3px 6px; border-bottom: 0.5px solid var(--gray-300); vertical-align: top; }
.sheet tr.s-cat td {
  background: var(--ngipl-black); color: var(--ngipl-white);
  font-size: 9px; font-weight: var(--fw-semibold); letter-spacing: var(--track-overline);
  text-transform: uppercase; padding: 4px 6px; border-bottom: none;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.sheet tr.s-cat td .cat-cell { display: flex; align-items: center; gap: 9px; }
.sheet tr.s-cat svg { display: block; }
.sheet tr.s-sub td {
  font-size: 8px; font-weight: var(--fw-semibold); letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--gray-600); background: var(--gray-50);
  padding: 3px 6px; -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.sheet .num { text-align: right; font-variant-numeric: tabular-nums; }
.sheet .s-rate { font-weight: var(--fw-semibold); }
.sheet .s-no { color: var(--gray-500); }
.sheet .s-note { font-size: 8.5px; color: var(--gray-500); }
td .s-note { display: inline; margin-left: 6px; }
.sheet-foot { margin: 12px 32px 0; border-top: var(--bw-hairline) solid var(--ngipl-black); padding-top: 8px; display: flex; justify-content: space-between; gap: 20px; }
.sheet-foot .fnote { font-size: 8.5px; color: var(--gray-600); line-height: 1.6; max-width: 420px; }
.sheet-foot .fmark { font-size: 9px; font-weight: var(--fw-semibold); letter-spacing: var(--track-overline); text-transform: uppercase; white-space: nowrap; }

@media print {
  body { background: #ffffff; }
  .app-chrome, .print-controls, .toast-wrap, .desk-doclabel { display: none !important; }
  .app-main { padding: 0; max-width: none; }
  .print-grid { display: block; }
  .print-desk { background: none; border: none; padding: 0; overflow: visible; }
  .sheet-scale { transform: none !important; height: auto !important; width: auto; }
  .sheet-canvas { padding: 0; overflow: visible; }
  .sheet { width: auto; min-height: 0; border: none; margin: 0; }
  .sheet tr { break-inside: avoid; }
  .sheet thead { display: table-header-group; }
}
@page { size: A4; margin: 8mm 9mm 10mm; }