/* ============================================================
   TOKENS — shared visual language with Price Desk / Procurement Desk
   ============================================================ */
:root{
  --ink:        #0B1220;
  --panel:      #131B2C;
  --panel-2:    #0F1726;
  --hairline:   #243049;
  --hairline-2: #2D3A57;
  --signal:     #00D9A3;
  --amber:      #FFB020;
  --blue:       #5B8DEF;
  --paper:      #EAF0F7;
  --muted:      #7C8AA3;
  --muted-2:    #4D5C7A;
  --danger:     #FF5D5D;

  --mono: 'IBM Plex Mono', 'DejaVu Sans Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(circle at 18% 0%, rgba(0,217,163,0.07), transparent 45%),
    radial-gradient(circle at 100% 30%, rgba(255,176,32,0.05), transparent 50%),
    var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  padding-bottom:48px;
}
body::before{
  content:"";
  position:fixed; inset:0;
  background-image: linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 100% 3px;
  pointer-events:none; z-index:0; opacity:0.5;
}
a{color:var(--signal);}

/* ============================================================
   HEADER
   ============================================================ */
header{
  position:relative; z-index:1;
  padding:22px 20px 18px;
  border-bottom:1px solid var(--hairline);
  display:flex; align-items:center; gap:12px;
  max-width:760px; margin:0 auto;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand-mark{
  width:38px;height:38px;border-radius:10px;
  background:var(--panel); border:1px solid var(--hairline-2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono); font-weight:700; color:var(--signal); font-size:18px;
  flex-shrink:0;
}
.brand h1{ font-size:15px; margin:0; font-weight:600; color:var(--paper); }
.brand .sub{
  font-family:var(--mono); font-size:10.5px; color:var(--muted); letter-spacing:0.06em;
  text-transform:uppercase; margin-top:2px;
}

main{ max-width:760px; margin:0 auto; padding:22px 20px 0; position:relative; z-index:1; }

/* ============================================================
   SYNC BAR
   ============================================================ */
.syncbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:1px solid var(--hairline); border-radius:var(--radius-md); background:var(--panel-2);
  padding:11px 14px; margin-bottom:16px;
}
.syncbar .info{ display:flex; align-items:center; gap:9px; min-width:0; }
.syncbar .info .sdot{ width:8px;height:8px;border-radius:50%; flex-shrink:0; background:var(--muted-2); }
.syncbar.live .info .sdot{ background:var(--signal); box-shadow:0 0 0 0 rgba(0,217,163,0.6); animation:pulse 2s infinite; }
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,217,163,0.55);}70%{box-shadow:0 0 0 6px rgba(0,217,163,0);}100%{box-shadow:0 0 0 0 rgba(0,217,163,0);}}
.syncbar.cached .info .sdot{ background:var(--amber); }
.syncbar.nodata .info .sdot{ background:var(--danger); }
.syncbar .text{ min-width:0; }
.syncbar .text .line1{ font-size:12.5px; font-weight:600; color:var(--paper); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.syncbar .text .line2{ font-family:var(--mono); font-size:10px; color:var(--muted); margin-top:1px; }
.sync-btn{
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:0.02em;
  background:var(--panel); border:1px solid var(--hairline-2); color:var(--paper);
  border-radius:20px; padding:8px 14px; cursor:pointer; white-space:nowrap;
  display:flex; align-items:center; gap:6px; flex-shrink:0;
  transition:border-color .15s, background .15s;
}
.sync-btn:hover{ border-color:var(--signal); }
.sync-btn:active{ transform:scale(0.97); }
.sync-btn .spin{ display:inline-block; }
.sync-btn.spinning .spin{ animation:spin 0.9s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.sync-note{
  font-size:11.5px; line-height:1.5; color:var(--muted);
  padding:9px 13px; margin:-6px 0 16px; border-left:2px solid var(--amber);
  background:rgba(255,176,32,0.06); border-radius:0 var(--radius-sm) var(--radius-sm) 0; display:none;
}
.sync-note.show{ display:block; }

.banner.err{
  border-radius:var(--radius-md); padding:13px 16px; font-size:12.5px; line-height:1.55;
  margin-bottom:18px; border:1px solid rgba(255,93,93,0.35);
  background:rgba(255,93,93,0.08); color:#FFB3B3; display:none;
}
.banner.err.show{ display:block; }
.banner.err code{ font-family:var(--mono); background:rgba(255,93,93,0.12); padding:1px 5px; border-radius:4px; }

/* ============================================================
   STOCK DASHBOARD — always visible, independent of filters
   ============================================================ */
.dashboard{
  border:1px solid var(--hairline); border-radius:var(--radius-lg);
  background:linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  overflow:hidden; margin-bottom:24px;
}
.dash-total{
  padding:22px 20px 18px; text-align:center; border-bottom:1px solid var(--hairline);
}
.dash-total .dtag{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.1em; color:var(--muted);
  text-transform:uppercase; margin-bottom:6px;
}
.dash-total .dvalue{
  font-family:var(--mono); font-size:38px; font-weight:700; color:var(--signal); line-height:1;
}
.dash-total .dvalue .unit{ font-size:15px; color:var(--muted); font-weight:500; margin-left:6px; }

.dash-tf{ padding:16px 16px 18px; }
.dash-tf .dtflabel{
  font-family:var(--mono); font-size:10px; letter-spacing:0.08em; color:var(--muted);
  text-transform:uppercase; margin-bottom:10px; padding-left:4px;
}
.tf-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(80px, 1fr)); gap:8px; }
.tf-chip{
  border-radius:var(--radius-sm); padding:10px 8px; text-align:center;
  border:1px solid var(--hairline-2);
}
.tf-chip .tflabel{ font-family:var(--mono); font-size:11px; font-weight:700; margin-bottom:4px; }
.tf-chip .tfcount{ font-family:var(--mono); font-size:17px; font-weight:700; color:var(--paper); }

/* ============================================================
   FILTER FIELDS
   ============================================================ */
.search-wrap{ position:relative; margin-bottom:14px; }
.search-wrap input{
  width:100%; background:var(--panel); border:1px solid var(--hairline-2); border-radius:var(--radius-md);
  color:var(--paper); font-family:var(--sans); font-size:14px; padding:12px 14px 12px 38px;
}
.search-wrap input::placeholder{ color:var(--muted-2); }
.search-wrap input:focus{ outline:none; border-color:var(--signal); }
.search-wrap .icon{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--muted-2); font-size:14px; pointer-events:none; }
.search-results{
  position:absolute; left:0; right:0; top:calc(100% + 6px); background:var(--panel);
  border:1px solid var(--hairline-2); border-radius:var(--radius-md); overflow:hidden; z-index:5;
  max-height:260px; overflow-y:auto; box-shadow:0 12px 28px rgba(0,0,0,0.45); display:none;
}
.search-results.show{ display:block; }
.search-results .item{
  padding:11px 14px; cursor:pointer; font-size:13px; border-bottom:1px solid var(--hairline);
  display:flex; justify-content:space-between; gap:10px;
}
.search-results .item:last-child{ border-bottom:none; }
.search-results .item:hover{ background:var(--panel-2); }
.search-results .item .sname{ color:var(--paper); }
.search-results .item .smeta{ font-family:var(--mono); font-size:10.5px; color:var(--muted); white-space:nowrap; }
.search-results .empty{ padding:14px; font-size:12px; color:var(--muted-2); font-family:var(--mono); }

.trail{
  font-family:var(--mono); font-size:12px; color:var(--muted);
  background:var(--panel-2); border:1px dashed var(--hairline-2);
  border-radius:var(--radius-sm); padding:10px 14px; margin-bottom:18px;
  display:flex; align-items:center; gap:6px; overflow-x:auto; white-space:nowrap;
}
.trail .lbl{ color:var(--muted-2); flex-shrink:0; }
.trail .tok{ color:var(--paper); }
.trail .tok.empty{ color:var(--muted-2); }
.trail .sep{ color:var(--muted-2); }
.trail .cursor{
  display:inline-block; width:7px; height:14px; background:var(--signal);
  animation:blink 1s steps(1) infinite; flex-shrink:0;
}
@keyframes blink{50%{opacity:0;}}

.field-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; margin-bottom:10px; }
@media(min-width:480px){ .field-grid.cols3{ grid-template-columns:repeat(3,1fr); } }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{
  font-family:var(--mono); font-size:10px; letter-spacing:0.08em; color:var(--muted);
  text-transform:uppercase; display:flex; align-items:center; gap:6px;
}
.field label .req-dot{ width:4px;height:4px;border-radius:50%;background:var(--hairline-2); }
.field.filled label .req-dot{ background:var(--signal); }
.field select{
  appearance:none; -webkit-appearance:none; width:100%;
  background:var(--panel); border:1px solid var(--hairline-2); border-radius:var(--radius-md);
  color:var(--paper); font-family:var(--sans); font-size:14px; font-weight:500;
  padding:12px 32px 12px 13px; cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="11" height="7" viewBox="0 0 11 7"><path d="M1 1L5.5 5.5L10 1" stroke="%237C8AA3" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat:no-repeat; background-position:right 12px center;
}
.field select:disabled{ opacity:0.38; cursor:not-allowed; }
.field select:not(:disabled):hover{ border-color:var(--muted-2); }
.field select:focus{ outline:none; border-color:var(--signal); box-shadow:0 0 0 3px rgba(0,217,163,0.15); }
.field.filled select{ border-color:rgba(0,217,163,0.4); background:var(--panel-2); }

.toolbar{ display:flex; justify-content:space-between; align-items:center; margin:14px 0 26px; }
.reset-btn{
  font-family:var(--mono); font-size:11px; color:var(--muted); background:none;
  border:1px solid var(--hairline); border-radius:20px; padding:7px 13px; cursor:pointer;
  letter-spacing:0.04em; transition:color .15s, border-color .15s;
}
.reset-btn:hover{ color:var(--paper); border-color:var(--muted-2); }
.progress{ font-family:var(--mono); font-size:11px; color:var(--muted-2); }
.progress b{ color:var(--signal); }

/* ============================================================
   RESULT — list of matching physical units
   ============================================================ */
.result{
  border:1px solid var(--hairline); border-radius:var(--radius-lg);
  background:linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  overflow:hidden; margin-bottom:28px;
}
.result-empty{ padding:46px 24px; text-align:center; color:var(--muted-2); }
.result-empty .icon{ font-size:26px; margin-bottom:10px; opacity:0.5; }
.result-empty p{ font-family:var(--mono); font-size:12.5px; margin:0; line-height:1.7; }
.result-empty .hl{ color:var(--muted); }

.result-head{
  padding:14px 20px; border-bottom:1px solid var(--hairline);
  font-family:var(--mono); font-size:12px; color:var(--muted);
}
.result-head b{ color:var(--signal); font-size:14px; }

.unit-list{ max-height:560px; overflow-y:auto; }
.unit-row{
  padding:14px 20px; border-bottom:1px solid var(--hairline);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.unit-row:last-child{ border-bottom:none; }
.unit-row .uleft{ display:flex; align-items:center; gap:10px; min-width:0; }
.grading-badge{
  font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:0.01em;
  padding:5px 10px; border-radius:20px; white-space:nowrap; flex-shrink:0;
}
.uref{ font-family:var(--mono); font-size:10.5px; color:var(--muted-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.uprice{ font-family:var(--mono); font-size:17px; font-weight:700; color:var(--paper); white-space:nowrap; flex-shrink:0; }
.uprice sup{ font-size:11px; color:var(--muted); margin-right:1px; font-weight:500; }
.uprice.na{ color:var(--muted-2); font-size:12px; font-weight:500; }

.clear-data-link{
  font-family:var(--mono); font-size:9.5px; color:var(--muted-2);
  background:none; border:none; text-decoration:underline; cursor:pointer; padding:0;
}
.clear-data-link:hover{ color:var(--muted); }
.footer-install-link{
  font-family:var(--mono); font-size:9.5px; color:var(--muted-2);
  background:none; border:none; text-decoration:underline; cursor:pointer; padding:0; margin-right:10px;
}
.footer-install-link:hover{ color:var(--muted); }
.footer-right{ display:flex; align-items:center; }

footer{
  max-width:760px; margin:0 auto; padding:8px 20px 0;
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:10px; color:var(--muted-2); position:relative; z-index:1;
}

@media (prefers-reduced-motion: reduce){
  .syncbar .sdot, .trail .cursor, .sync-btn .spin{ animation:none !important; }
}

/* ============================================================
   MODE SWITCH — Check Models / Booking
   ============================================================ */
.mode-switch{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px;
}
.mode-btn{
  border:1px solid var(--hairline-2); border-radius:var(--radius-md);
  background:var(--panel); padding:16px 14px; cursor:pointer; text-align:left;
  transition:border-color .15s, background .15s;
}
.mode-btn:hover{ border-color:var(--muted-2); }
.mode-btn.active{
  border-color:var(--signal); background:var(--panel-2);
  box-shadow:0 0 0 3px rgba(0,217,163,0.12);
}
.mode-btn .mname{ font-size:14px; font-weight:700; color:var(--paper); margin-bottom:3px; }
.mode-btn.active .mname{ color:var(--signal); }
.mode-btn .mdesc{ font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:0.02em; }

/* ============================================================
   BOOKING — topbar, filters, excel-style table
   ============================================================ */
.booking-topbar{
  display:flex; flex-direction:column; gap:12px;
  border:1px solid var(--hairline); border-radius:var(--radius-md); background:var(--panel-2);
  padding:14px 16px; margin-bottom:14px;
}
.bt-stats{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
.bt-stat{ display:flex; flex-direction:column; gap:2px; }
.bt-stat:first-child{ border-right:1px solid var(--hairline); padding-right:14px; }
.bt-stat:last-child{ padding-left:14px; }
.bt-stat .bt-label{ font-family:var(--mono); font-size:10px; letter-spacing:0.08em; color:var(--muted); text-transform:uppercase; }
.bt-stat .bt-count{ font-family:var(--mono); font-size:22px; font-weight:700; color:var(--signal); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bt-stat .bt-value{ color:var(--amber); }
.bt-actions{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.clear-sel-link{
  font-family:var(--mono); font-size:10px; color:var(--muted); background:none; border:none;
  text-decoration:underline; cursor:pointer; padding:0; display:none;
}
.clear-sel-link:hover{ color:var(--paper); }
.download-btn{
  font-family:var(--sans); font-size:13px; font-weight:700; color:var(--ink);
  background:var(--signal); border:none; border-radius:20px; padding:10px 18px; cursor:pointer;
  white-space:nowrap; transition:opacity .15s, transform .1s;
}
.download-btn:disabled{ opacity:0.3; cursor:not-allowed; }
.download-btn:not(:disabled):active{ transform:scale(0.97); }

.booking-controls{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-bottom:14px;
}
.booking-controls select{
  appearance:none; -webkit-appearance:none; width:100%;
  background:var(--panel); border:1px solid var(--hairline-2); border-radius:var(--radius-sm);
  color:var(--paper); font-family:var(--sans); font-size:12.5px; font-weight:500;
  padding:9px 26px 9px 10px; cursor:pointer;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="11" height="7" viewBox="0 0 11 7"><path d="M1 1L5.5 5.5L10 1" stroke="%237C8AA3" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat:no-repeat; background-position:right 9px center;
}
.booking-controls select:focus{ outline:none; border-color:var(--signal); }

.booking-table-wrap{
  border:1px solid var(--hairline); border-radius:var(--radius-lg); overflow:auto;
  max-height:540px; background:var(--panel); margin-bottom:14px;
}
.booking-table{ width:100%; min-width:760px; border-collapse:collapse; font-size:12px; }
.booking-table thead th{
  position:sticky; top:0; z-index:2;
  background:var(--panel-2); color:var(--muted); font-family:var(--mono);
  font-size:10px; letter-spacing:0.04em; text-transform:uppercase; text-align:left;
  padding:10px 10px; border-bottom:1px solid var(--hairline); white-space:nowrap;
}
.booking-table thead th.thcheck{ position:sticky; top:0; right:0; z-index:3; text-align:center; }
.booking-table tbody td{
  padding:9px 10px; border-bottom:1px solid var(--hairline); color:var(--paper); white-space:nowrap;
}
.booking-table tbody tr:hover{ background:rgba(255,255,255,0.02); }
.booking-table tbody tr.rowsel{ background:rgba(0,217,163,0.08); }
.booking-table tbody td.tdcheck{
  position:sticky; right:0; background:var(--panel); text-align:center;
  border-left:1px solid var(--hairline);
}
.booking-table tbody tr.rowsel td.tdcheck{ background:#0F2A24; }
.booking-table tbody td.tdprice{ font-family:var(--mono); font-weight:700; }
.rowcheck{ width:17px; height:17px; cursor:pointer; accent-color:var(--signal); }
.grading-badge-sm{
  font-family:var(--mono); font-size:9px; font-weight:700; padding:3px 7px; border-radius:14px; white-space:nowrap;
}
.booking-meta{ font-family:var(--mono); font-size:10.5px; color:var(--muted-2); margin-bottom:10px; text-align:center; }
.load-more-wrap{ text-align:center; margin-bottom:24px; }
.load-more-btn{
  font-family:var(--mono); font-size:11.5px; color:var(--paper); background:var(--panel);
  border:1px solid var(--hairline-2); border-radius:20px; padding:9px 18px; cursor:pointer;
}
.load-more-btn:hover{ border-color:var(--signal); }

/* ============================================================
   THANK-YOU MODAL
   ============================================================ */
.modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(5,8,15,0.72);
  align-items:center; justify-content:center; z-index:100; padding:20px;
}
.modal-overlay.show{ display:flex; }
.modal-box{
  background:linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border:1px solid var(--hairline-2); border-radius:var(--radius-lg);
  padding:30px 26px; max-width:340px; text-align:center;
  box-shadow:0 20px 50px rgba(0,0,0,0.5);
}
.modal-icon{
  width:50px; height:50px; border-radius:50%; background:rgba(0,217,163,0.12);
  color:var(--signal); font-size:24px; display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px;
}
.modal-box h2{ font-size:17px; color:var(--paper); margin:0 0 10px; }
.modal-box p{ font-size:13px; color:var(--muted); line-height:1.6; margin:0 0 22px; }
.modal-close-btn{
  font-family:var(--sans); font-size:13px; font-weight:700; color:var(--ink);
  background:var(--signal); border:none; border-radius:20px; padding:10px 24px; cursor:pointer;
}
.modal-close-btn:active{ transform:scale(0.97); }