/* ============================================================
   CHECK CARRING (Django) — Import Costing
   Emerald / copper "ledger" theme. DESIGN ONLY — no logic.
   Editable cells carry a BOLD emerald ring so it is obvious
   exactly which cells you are meant to type into.
   ============================================================ */
:root{
  --bg:#f3efe6;
  --bg-grid:rgba(31,111,84,0.05);
  --panel:#fffdf9;
  --panel-head:#f6f1e6;
  --line:#e1d8c4;
  --line-soft:#ece5d4;
  --ink:#23291f;
  --ink-dim:#7a7261;
  --emerald:#1f6f54;
  --emerald-deep:#15503c;
  --copper:#b5672f;
  --copper-deep:#8f4d20;
  --copper-pale:#fbeee2;
  --editable-bg:#eef6f1;
  --editable-bg2:#e8f1ec;
  --editable-ring:#1f6f54;
  --result-bg:#1f6f54;
  --result-text:#fbf6ea;
  --mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    linear-gradient(var(--bg-grid) 1px, transparent 1px) 0 0/100% 38px,
    var(--bg);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
/* fills the viewport so the whole tool fits one screen (no scroll) */
.wrap{
  max-width:1120px;margin:0 auto;width:100%;
  min-height:100vh;display:flex;flex-direction:column;
  padding:12px 16px 10px;
}

/* ---------------- HEADER ---------------- */
.topbar{
  flex:none;
  display:flex;align-items:flex-end;justify-content:space-between;
  flex-wrap:wrap;gap:14px;
  padding-bottom:9px;margin-bottom:10px;
  border-bottom:2px solid var(--ink);
}
.title-block{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:11px;
  background:var(--emerald);
  color:var(--result-text);font-weight:700;font-size:20px;font-family:var(--mono);
  box-shadow:0 3px 0 var(--emerald-deep);
}
.ttl h1{
  margin:0;font-size:23px;font-weight:800;letter-spacing:.01em;
  font-family:Georgia,'Iowan Old Style',serif;color:var(--ink);
}
.subtitle{margin:2px 0 0;color:var(--ink-dim);font-size:12.5px;}

.status-cluster{display:flex;align-items:center;gap:16px;font-size:11.5px;color:var(--ink-dim);flex-wrap:wrap;}
.legend{display:flex;align-items:center;gap:6px;}
.dot{width:12px;height:12px;border-radius:3px;display:inline-block;}
.dot.edit{background:var(--editable-bg);border:2px solid var(--editable-ring);}
.dot.lock{background:var(--panel-head);border:1px solid var(--line);}
.pulse-dot{
  width:8px;height:8px;border-radius:50%;background:var(--emerald);
  box-shadow:0 0 0 0 rgba(31,111,84,.5);animation:pulse 2.2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(31,111,84,.45);}
  70%{box-shadow:0 0 0 7px rgba(31,111,84,0);}
  100%{box-shadow:0 0 0 0 rgba(31,111,84,0);}
}

/* ---------------- MENU BAR (CARRING TOOL) ---------------- */
.menubar{flex:none;display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.menu{position:relative;}
.menu-btn{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  background:var(--emerald);color:#fff;border:1px solid var(--emerald-deep);
  border-radius:9px;padding:10px 16px;font-size:12.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;font-family:inherit;
  box-shadow:0 3px 0 var(--emerald-deep);transition:filter .15s ease;
}
.menu-btn:hover{filter:brightness(1.06);}
.menu-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--emerald-deep);}
.caret{font-size:10px;}
.menu-list{
  position:absolute;top:calc(100% + 7px);left:0;min-width:210px;z-index:50;
  background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:6px;
  box-shadow:0 18px 36px -18px rgba(35,41,31,.55);
}
.menu-list[hidden]{display:none;}
.menu-list button{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  background:none;border:none;border-radius:8px;padding:9px 12px;font-size:13px;
  color:var(--ink);font-family:inherit;font-weight:600;transition:background .12s ease;
}
.menu-list button:hover{background:var(--editable-bg);color:var(--emerald-deep);}
.menu-list .mi{width:18px;text-align:center;color:var(--copper);}

/* ---------------- BLOCKS (cards) ---------------- */
/* sheet stretches to fill leftover height; cards centered, tight gap */
.sheet{
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;justify-content:center;gap:9px;
}
.block{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 10px 24px -22px rgba(35,41,31,.5);
}
.block-head{
  display:flex;align-items:center;gap:10px;
  padding:7px 14px;
  background:var(--panel-head);
  border-bottom:1px solid var(--line);
}
.block-head .tag{
  font-family:var(--mono);font-size:10.5px;color:var(--copper);
  border:1px solid var(--copper);background:var(--copper-pale);
  padding:2px 8px;border-radius:6px;letter-spacing:.06em;
}
.block-head .block-label{font-size:13px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;}
.block-head .block-note{margin-left:auto;font-size:11px;color:var(--ink-dim);font-style:italic;}

/* horizontal scroll guard on narrow screens */
.tbl-scroll{overflow-x:auto;}

/* ---------------- TABLES ---------------- */
table{width:100%;border-collapse:collapse;background:var(--panel);min-width:680px;}
th,td{
  border-right:1px solid var(--line-soft);
  border-top:1px solid var(--line-soft);
  text-align:center;vertical-align:middle;
  padding:0;position:relative;
}
th:last-child,td:last-child{border-right:none;}
tr:first-child th,tr:first-child td{border-top:none;}

thead th, tr:first-child th, th{
  font-size:10px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-dim);font-weight:700;
  padding:7px 8px 6px;line-height:1.15;
  background:var(--panel-head);
  border-bottom:1px solid var(--line);
}
th.seclabel{
  width:96px;background:var(--panel-head);
  color:var(--emerald-deep);font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;font-size:12px;
  border-bottom:1px solid var(--line);
}

/* computed / auto cells */
td.calc{
  background:#faf8f2;color:var(--ink);font-weight:600;
  height:34px;padding:5px 8px;
  font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:13px;
}
td.empty{background:#f3efe6;height:34px;}

/* RESULT — Per Pcs Rate (emerald fill, the headline number) */
.block td.out{
  background:var(--result-bg);color:var(--result-text);
  font-weight:800;font-size:14.5px;letter-spacing:.02em;
}

/* -------- EDITABLE CELLS: BOLD emerald ring = "type here" -------- */
td.in,td.in2{
  padding:0;background:var(--editable-bg);
  box-shadow:inset 0 0 0 2px var(--editable-ring);   /* bold visible border */
}
td.in2{background:var(--editable-bg2);}
td.in input,td.in2 input{
  width:100%;height:34px;border:none;outline:none;background:transparent;
  text-align:center;font-size:13px;font-weight:700;color:var(--emerald-deep);
  padding:5px 8px;font-variant-numeric:tabular-nums;font-family:var(--mono);
}
td.in:focus-within,td.in2:focus-within{
  background:#dcebe1;
  box-shadow:inset 0 0 0 3px var(--emerald-deep);    /* stronger on focus */
}
::placeholder{color:#b6c3ba;}

/* ---------------- NOTE ---------------- */
.note{flex:none;font-size:10.5px;color:var(--ink-dim);line-height:1.4;margin:9px 2px 0;}
.note b{color:var(--emerald-deep);}

/* ---------------- SAVED RECORDS ---------------- */
.records{margin-top:26px;}
.records-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.records-head h2{font-size:15px;margin:0;color:var(--ink);font-family:Georgia,serif;}
.btn-clear{
  background:var(--panel);color:var(--copper-deep);border:1px solid var(--copper);
  border-radius:8px;padding:7px 13px;font-size:12px;font-weight:700;cursor:pointer;
  font-family:inherit;transition:all .15s ease;
}
.btn-clear:hover{background:var(--copper-pale);}
.rec-table-wrap{overflow:auto;max-height:220px;border:1px solid var(--line);border-radius:12px;background:var(--panel);}
.rec-table{width:100%;border-collapse:collapse;font-size:11.5px;background:var(--panel);min-width:880px;}
.rec-table th{
  position:sticky;top:0;background:var(--panel-head);color:var(--ink-dim);
  padding:9px 10px;text-align:right;font-size:10px;text-transform:uppercase;letter-spacing:.04em;
  white-space:nowrap;border-bottom:1px solid var(--line);
}
.rec-table th.txt{text-align:left;}
.rec-table td{
  padding:8px 10px;border-top:1px solid var(--line-soft);text-align:right;
  font-family:var(--mono);white-space:nowrap;color:var(--ink);
}
.rec-table td.txt{text-align:left;font-family:inherit;color:var(--ink-dim);}
.rec-table td.out{font-weight:800;color:var(--emerald-deep);}
.rec-del{
  background:var(--panel);color:var(--copper-deep);border:1px solid var(--copper);
  border-radius:7px;padding:4px 11px;font-size:10.5px;font-weight:700;cursor:pointer;font-family:inherit;
}
.rec-del:hover{background:var(--copper-pale);}

/* ---------------- FOOTER ---------------- */
.page-foot{flex:none;text-align:center;color:var(--ink-dim);font-size:10px;margin-top:8px;letter-spacing:.03em;}
.page-foot span{color:var(--emerald-deep);font-weight:700;}

/* ---------------- TOASTS ---------------- */
.toast-zone{position:fixed;right:18px;bottom:18px;z-index:90;display:flex;flex-direction:column;gap:10px;}
.toast{
  min-width:200px;background:var(--ink);color:#fff;padding:11px 15px;border-radius:10px;
  font-size:13px;font-weight:600;box-shadow:0 14px 30px -12px rgba(0,0,0,.5);
  border-left:4px solid var(--emerald);animation:slidein .25s ease;
}
.toast.good{border-left-color:var(--emerald);}
.toast.warn{border-left-color:var(--copper);}
.toast.err{border-left-color:#c0492b;}
.toast.out{animation:slideout .3s forwards;}
@keyframes slidein{from{opacity:0;transform:translateX(30px);}to{opacity:1;transform:none;}}
@keyframes slideout{to{opacity:0;transform:translateX(30px);}}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:640px){
  .wrap{padding:20px 12px 48px;}
  .ttl h1{font-size:20px;}
  .status-cluster{gap:12px;}
}

/* ---------------- PRINT ---------------- */
@media print{
  body{background:#fff;}
  .menubar,.toast-zone,.records,.note,.status-cluster,.page-foot{display:none !important;}
  .block{box-shadow:none;break-inside:avoid;}
}