/* EasyC Classic — ธีมเลียนแบบโปรแกรม EasyCal เดิม (VB6/Windows 98) */
:root {
  --desktop: #9fd6c9;
  --face: #bfe7da;
  --face-light: #d4f0e6;
  --field: #c9c2f2;
  --field-focus: #b8aef2;
  --pink: #f6d9ea;
  --pink-strong: #f0c3de;
  --yellow: #fdf6c3;
  --head: #7a1f52;
  --head2: #93316b;
  --blue-head: #2f6cb3;
  --sel: #2f5fae;
  --btn-face: #ddd9d0;
  --row-a: #e9ddf3;
  --row-b: #f2e2ee;
  --price-row: #a94b8f;
  --dark: #1c1c1c;
  --bevel-light: #ffffff;
  --bevel-dark: #6d6d6d;
  --bevel-darker: #404040;
  font-size: 14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Tahoma, "Leelawadee UI", "Segoe UI", sans-serif;
  font-size: 14px;
  color: var(--dark);
  background: var(--desktop);
  -webkit-text-size-adjust: 100%;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

.bevel-out {
  border: 2px solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
}
.bevel-in {
  border: 2px solid;
  border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
}

/* ---------- ปุ่มแบบ 3 มิติ ---------- */
.btn {
  background: var(--btn-face);
  border: 2px solid;
  border-color: var(--bevel-light) var(--bevel-darker) var(--bevel-darker) var(--bevel-light);
  padding: 4px 16px;
  min-height: 30px;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.btn:active { border-color: var(--bevel-darker) var(--bevel-light) var(--bevel-light) var(--bevel-darker); }
.btn:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }
.btn.small { min-height: 26px; padding: 2px 10px; }
.btn.wide { min-width: 110px; }
.btn:disabled { color: #8a8a8a; text-shadow: 1px 1px 0 #fff; cursor: default; }

/* ---------- ช่องกรอก ---------- */
.fld {
  background: var(--field);
  border: 2px solid;
  border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
  padding: 3px 6px;
  min-height: 28px;
}
.fld:focus { outline: none; background: var(--field-focus); }
.fld[readonly], .fld.ro { background: var(--pink); }
.fld.num { text-align: right; }
.fld.money { text-align: right; }
select.fld { padding: 2px 4px; }
textarea.fld { resize: vertical; }
.fld:disabled { background: #d7d3ca; color: #777; }

.fld-dark {
  background: #111;
  color: #fff;
  border: 2px solid;
  border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
  padding: 3px 6px;
  min-height: 28px;
  text-align: right;
}
.fld-dark:focus { outline: none; background: #123; }

/* ---------- แถบเมนู / ทูลบาร์ ---------- */
#app { display: none; flex-direction: column; height: 100%; }
#app.on { display: flex; }

.titlebar {
  background: linear-gradient(90deg, #0f3f8e, #3f76c8);
  color: #fff;
  padding: 4px 8px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.titlebar .app-ico { width: 18px; height: 18px; }

.menubar {
  background: var(--btn-face);
  border-bottom: 1px solid var(--bevel-dark);
  padding: 2px 4px;
  display: flex;
  gap: 2px;
  align-items: center;
}
.menubar .menu { position: relative; }
.menubar .mitem {
  background: none;
  border: 1px solid transparent;
  padding: 3px 10px;
  cursor: pointer;
}
.menubar .mitem:hover { border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light); }
.menubar .menu.open .mitem {
  background: var(--sel);
  color: #fff;
  border-color: transparent;
}
.menubar .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 40;
  min-width: 218px;
  padding: 2px;
  background: var(--btn-face);
  border: 2px solid;
  border-color: var(--bevel-light) var(--bevel-darker) var(--bevel-darker) var(--bevel-light);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}
.menubar .menu.open .dropdown { display: block; }
.menubar .dropdown .dd-item {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: 0;
  padding: 5px 12px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}
.menubar .dropdown .dd-item:hover { background: var(--sel); color: #fff; }
.menubar .dropdown .dd-item .key { font-size: 12px; opacity: 0.75; }
.menubar .dropdown .dd-sep {
  height: 0;
  margin: 3px 6px;
  border-top: 1px solid var(--bevel-dark);
  border-bottom: 1px solid var(--bevel-light);
}
.menubar .spacer { flex: 1; }
.menubar .whoami { font-size: 12px; color: #333; padding-right: 8px; }

.toolbar {
  background: var(--btn-face);
  border-bottom: 2px solid var(--bevel-dark);
  padding: 3px 4px;
  display: flex;
  gap: 2px;
  align-items: stretch;
  flex-wrap: wrap;
}
.tbtn {
  background: var(--btn-face);
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 86px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 13px;
}
.tbtn .ico { font-size: 22px; line-height: 1; }
.tbtn:hover { border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light); }
.tbtn:active { border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark); }
.tsep { width: 2px; margin: 2px 3px; border-left: 1px solid var(--bevel-dark); border-right: 1px solid var(--bevel-light); }

#mdi {
  flex: 1;
  overflow: auto;
  background: var(--desktop);
  position: relative;
  padding: 10px;
}

.statusbar {
  background: var(--btn-face);
  border-top: 1px solid var(--bevel-light);
  padding: 3px 10px;
  font-size: 12px;
  display: flex;
  gap: 16px;
}
.statusbar .cell { border: 1px solid; border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark); padding: 1px 10px; }

/* ---------- หน้าต่าง / ไดอะล็อก ---------- */
#dialog-layer { position: fixed; inset: 0; z-index: 50; display: none; }
#dialog-layer.on { display: block; }
.dlg-overlay { position: absolute; inset: 0; background: rgba(20, 40, 40, 0.25); }
.dlg {
  position: absolute;
  background: var(--face);
  border: 2px solid;
  border-color: var(--bevel-light) var(--bevel-darker) var(--bevel-darker) var(--bevel-light);
  box-shadow: 3px 3px 0 rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  max-width: calc(100vw - 12px);
  max-height: calc(100dvh - 12px);
}
.dlg-title {
  background: linear-gradient(180deg, #fefefe, #d9d9d2);
  border-bottom: 1px solid var(--bevel-dark);
  padding: 4px 6px 4px 10px;
  font-weight: bold;
  display: flex;
  align-items: center;
  cursor: move;
  gap: 8px;
}
.dlg-title .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlg-x {
  background: #d34a3c;
  color: #fff;
  border: 1px solid #8d2018;
  width: 24px;
  height: 22px;
  line-height: 1;
  cursor: pointer;
  font-weight: bold;
}
.dlg-body { padding: 12px; overflow: auto; }
.dlg-foot { padding: 8px 12px 12px; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* ---------- ตัวเลือกงานหลังพิมพ์ 6 กลุ่มแบบ EasyCal ---------- */
.after-picker { display: grid; grid-template-columns: 150px 1fr; min-height: 330px; border: 1px solid #49665f; }
.after-group-list { background: var(--face-light); border-right: 1px solid #49665f; padding: 4px; }
.after-group-btn { display: block; width: 100%; padding: 8px 10px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.after-group-btn:hover, .after-group-btn.on { background: var(--sel); color: #fff; }
.after-operation-list { background: var(--field); padding: 4px; overflow: auto; }
.after-operation-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 9px; border-bottom: 1px solid rgba(70,60,110,.22); cursor: default; }
.after-operation-row:hover, .after-operation-row.sel { background: var(--sel); color: #fff; }
.op-ready { color: #1d5d35; font-size: 12px; }
.op-pending { color: #9b2f20; font-size: 12px; }
.after-operation-row:hover .op-ready, .after-operation-row.sel .op-ready,
.after-operation-row:hover .op-pending, .after-operation-row.sel .op-pending { color: #fff; }
@media (max-width: 620px) { .after-picker { grid-template-columns: 112px 1fr; } }

/* ---------- Login ---------- */
#login-screen {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(1200px 500px at 70% 20%, #b7e4d9 0%, transparent 60%),
    var(--desktop);
}
#login-screen .dlg { position: static; width: 420px; }
#login-screen .brandline { text-align: center; font-size: 12px; color: #2c4a44; margin-top: 10px; }
.form-row { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.form-row > label { min-width: 110px; text-align: right; }
.form-row > .fld { flex: 1; min-width: 0; }
.err { color: #a01818; font-size: 13px; min-height: 18px; }

/* ---------- กล่องกลุ่ม (fieldset เดิม) ---------- */
.grpbox {
  border: 1px solid;
  border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
  box-shadow: 1px 1px 0 var(--bevel-light) inset;
  padding: 8px 10px 10px;
  position: relative;
  margin-top: 8px;
}
.grpbox > .cap {
  position: absolute;
  top: -9px;
  left: 8px;
  background: var(--face);
  padding: 0 6px;
  font-size: 13px;
  /* คำอธิบายยาวห้ามตัดบรรทัด ไม่งั้นจะทับแถวแรกในกล่อง */
  white-space: nowrap;
}

/* ---------- ตารางยอดพิมพ์ ---------- */
.tblwrap { overflow-x: auto; border: 2px solid; border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark); background: #fff; }
table.qt { border-collapse: collapse; width: 100%; min-width: 640px; }
table.qt th, table.qt td {
  border: 1px solid #9c8fa5;
  padding: 4px 8px;
  font-size: 13.5px;
  white-space: nowrap;
}
table.qt thead .bandhead th {
  background: linear-gradient(180deg, var(--head2), var(--head));
  color: #fff;
  font-weight: bold;
}
table.qt thead .qhead th {
  background: linear-gradient(180deg, var(--head2), var(--head));
  color: #fff;
  text-align: right;
  font-weight: normal;
}
table.qt thead .qhead th.desc { text-align: center; font-weight: bold; }
table.qt tbody td.num { text-align: right; }
table.qt tbody tr:nth-child(odd) td { background: var(--row-a); }
table.qt tbody tr:nth-child(even) td { background: var(--row-b); }
table.qt tbody tr.sel td { background: var(--sel); color: #fff; }
table.qt tbody tr { cursor: pointer; }
/* แถวเพิ่มรายการท้ายตาราง */
table.qt tbody tr.addrow td { background: #efe7f5; color: #5d5170; }
table.qt tbody tr.addrow:hover td { background: #ded1ec; }
table.qt tbody tr.addrow .seq { font-weight: bold; }
table.qt .seq { width: 44px; text-align: center; }

/* ---------- ตารางสรุปท้ายจอ ---------- */
.sumgrid { display: grid; grid-template-columns: 150px repeat(var(--qn, 4), minmax(110px, 1fr)); gap: 4px 6px; align-items: center; min-width: 620px; }
.sumgrid .lbl { text-align: left; font-size: 13.5px; }
.sumcell {
  padding: 4px 8px;
  text-align: right;
  border: 1px solid #9c8fa5;
  min-height: 27px;
  font-size: 13.5px;
}
.sumcell.cost { background: var(--pink); }
.sumcell.unit { background: #fbe9f3; }
.sumcell.price { background: var(--price-row); color: #fff; font-weight: bold; }
.sumcell.punit { background: #c583ae; color: #fff; }
.sumcell.diff { background: var(--yellow); }
.sumgrid input.profit {
  width: 100%;
  background: #111;
  color: #7fd7ff;
  border: 2px solid;
  border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
  padding: 3px 6px;
  text-align: right;
  min-height: 27px;
}
.sumgrid input.override {
  width: 100%;
  background: var(--price-row);
  color: #fff;
  font-weight: bold;
  border: 1px solid #6d1245;
  padding: 3px 6px;
  text-align: right;
  min-height: 27px;
}
.sumgrid input.override::placeholder { color: #f3cfe4; font-weight: normal; }

/* ---------- จอคำนวณหลัก ---------- */
#calc-doc {
  background: var(--face);
  border: 2px solid;
  border-color: var(--bevel-light) var(--bevel-darker) var(--bevel-darker) var(--bevel-light);
  padding: 12px;
  min-height: 100%;
}
.calc-head { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.calc-head .fields { display: grid; gap: 6px; }
.hrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hrow label { min-width: 70px; text-align: right; font-size: 13.5px; }
.hrow .fld { min-width: 0; }
.jobinfo-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 22px; }
.jobinfo-btn .ico { font-size: 30px; }

.sec-actions { display: flex; gap: 6px; margin: 12px 0 4px; }
.calc-bottom { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 14px; margin-top: 14px; align-items: start; }
.memo-box { display: flex; flex-direction: column; gap: 6px; }
.memo-box textarea { background: var(--yellow); min-height: 130px; }
.calc-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

/* ---------- ไดอะล็อกคำนวณแบบชิ้นงาน ---------- */
.itemdlg { width: 1080px; }
.itemgrid { display: grid; grid-template-columns: minmax(280px, 340px) repeat(var(--qn, 4), minmax(105px, 1fr)); align-items: stretch; }
.itemgrid > div { border: 1px solid #9c8fa5; padding: 4px 8px; display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-height: 30px; }
.itemgrid > .deshead { justify-content: center; background: linear-gradient(180deg, var(--head2), var(--head)); color: #fff; font-weight: bold; }
.itemgrid > .qh { background: linear-gradient(180deg, var(--head2), var(--head)); color: #fff; }
.itemgrid > .lblcell { justify-content: flex-start; background: var(--face-light); flex-wrap: wrap; }
.itemgrid > .lblcell .cap { color: #14459c; font-weight: bold; }
.itemgrid > .valcell { background: var(--row-a); text-align: right; }
.itemgrid > .valcell.alt { background: var(--row-b); }
.itemgrid > .valcell.total { background: var(--pink-strong); font-weight: bold; }
.itemgrid > .subcell { background: #f6eef8; font-size: 12.5px; color: #444; }
.itemgrid input.cellinput { width: 90px; max-width: 100%; }
.mini { width: 74px; }
.midi { width: 110px; }
.unit-note { font-size: 12.5px; color: #333; }
.chk { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }

/* ---------- วางเลย์เอาท์ ---------- */
.laydlg { width: 1080px; }
.laygrid { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(320px, 420px); gap: 14px; }
.laypreview {
  background: #fff;
  border: 2px solid;
  border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
  padding: 10px;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.laypreview svg { max-width: 100%; max-height: 420px; }
/* EC-002: the preview bounds are the actual sheet, with no white display margins. */
.laypreview--sheet:has(> .layout-svg) {
  display: block;
  padding: 0;
  min-height: 0;
  background: #d4d9df;
  border: 1px solid #354454;
}
.laypreview--sheet > .layout-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
}
.layout-sheet { fill: #fdfdf6; stroke: #444; }
.layout-usable { fill: none; stroke: #2f6cb3; stroke-dasharray: 0.4 0.25; }
.layout-gripper { fill: #f3c8c8; stroke: none; }
.layout-piece { fill: #d9e7fa; stroke: #23477e; }
.layout-piece.rotated { fill: #f8e3c8; stroke: #8a5a1d; }
.layout-piece-label { fill: #23324b; text-anchor: middle; dominant-baseline: central; }
.lay-count { color: #1430b4; font-weight: bold; font-size: 15px; }
.laytbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.laytbl th { background: linear-gradient(180deg, var(--head2), var(--head)); color: #fff; padding: 3px 6px; border: 1px solid #9c8fa5; }
.laytbl td { border: 1px solid #9c8fa5; padding: 3px 6px; text-align: right; background: var(--row-a); }
.wlgrid { display: grid; grid-template-columns: auto 1fr 1fr; gap: 5px 8px; align-items: center; }
.wlgrid .h { text-align: center; background: linear-gradient(180deg, var(--head2), var(--head)); color: #fff; padding: 3px 6px; }
.wlgrid label { text-align: right; font-size: 13.5px; }
.radio-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* ---------- รายการค้นหา ---------- */
.searchdlg { width: 900px; }
.list-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.list-tbl th { background: linear-gradient(180deg, var(--head2), var(--head)); color: #fff; padding: 4px 8px; border: 1px solid #9c8fa5; position: sticky; top: 0; }
.list-tbl th.sortable { cursor: pointer; user-select: none; }
.list-tbl th.sortable:hover { background: linear-gradient(180deg, #a8407c, #8c2761); }
.list-tbl th.sortable:active { background: linear-gradient(180deg, var(--head), var(--head2)); }
.list-tbl .sort-arrow { font-size: 11px; }
.list-tbl td { border: 1px solid #b5a8bd; padding: 4px 8px; }
.list-tbl td.num { text-align: right; }
/* ค่าที่ระบบแยกให้เองจากชื่องานเดิม ไม่ใช่ข้อมูลที่ผู้ใช้คีย์ */
.list-tbl td.guessed { font-style: italic; color: #5a5a6b; }
.list-tbl tbody tr:nth-child(odd) td { background: var(--row-a); }
.list-tbl tbody tr:nth-child(even) td { background: var(--row-b); }
.list-tbl tbody tr.sel td { background: var(--sel); color: #fff; }
.list-scroll { max-height: 46vh; overflow: auto; border: 2px solid; border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark); background: #fff; }
.tabbar { display: flex; gap: 2px; margin-bottom: -1px; }
.tabbar .tab {
  background: var(--btn-face);
  border: 2px solid;
  border-color: var(--bevel-light) var(--bevel-dark) transparent var(--bevel-light);
  padding: 4px 16px;
  cursor: pointer;
}
.tabbar .tab.on { background: var(--face); font-weight: bold; position: relative; top: 1px; }

/* ---------- เลือกจากรายการ (เมนูคำนวณราคา) ---------- */
.menu-list {
  background: #fff;
  border: 2px solid;
  border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
  min-width: 220px;
  max-height: 200px;
  overflow: auto;
}
.menu-list .mi { padding: 4px 10px; cursor: pointer; }
.menu-list .mi.sel { background: var(--sel); color: #fff; }
.hint-cap { color: #14459c; font-weight: bold; text-decoration: underline; }
.hint-text { color: #2222c8; font-size: 13px; }

/* ---------- ตัวเลือกกระดาษ ---------- */
.paper-pick { position: relative; flex: 1; min-width: 0; display: flex; gap: 4px; }
.paper-pick input { flex: 1; min-width: 0; }
.paper-drop {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  background: #fbf8d8;
  border: 2px solid;
  border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
  max-height: 240px;
  overflow: auto;
  display: none;
}
.paper-drop.on { display: block; }
.paper-drop .pi { display: grid; grid-template-columns: minmax(260px,1fr) minmax(180px,.7fr); gap: 12px; padding: 5px 8px; cursor: pointer; font-size: 13px; }
.paper-drop .pi:hover, .paper-drop .pi.sel { background: var(--sel); color: #fff; }
.paper-drop-name,.paper-drop-latest { display: flex; flex-direction: column; white-space: pre-line; }
.paper-drop-name small { color: #555; font-size: 11px; }
.paper-drop .pi:hover .paper-drop-name small { color: #fff; }
.paper-drop-latest { text-align: right; font-size: 12px; }
.paper-cd-detail,.paper-purchase-summary {
  background: #eef6ff;
  border: 1px solid #8fb8dc;
  padding: 4px 7px;
  font-size: 12.5px;
  line-height: 1.35;
}
.paper-cd-detail[hidden],.paper-purchase-summary[hidden] { display: none; }
.paper-purchase-row { display: flex; align-items: center; gap: 6px; }
.paper-purchase-row .paper-purchase-summary { flex: 1; }
.paper-vendor-table {
  display: grid;
  grid-template-columns: minmax(180px,1.3fr) minmax(130px,.8fr) 100px minmax(150px,1fr) 110px;
  border: 1px solid #999;
  margin-top: 8px;
  max-height: 360px;
  overflow: auto;
}
.paper-vendor-table > div { padding: 6px; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; }
.paper-vendor-table .paper-vendor-head { background: #7a1f52; color: #fff; font-weight: bold; }
.paper-vendor-table .paper-vendor-empty { grid-column: 1 / -1; text-align: center; padding: 18px; }
.paper-cost-warning {
  background: #fff0c2;
  color: #6b3900;
  border: 1px solid #d98b16;
  border-left: 5px solid #e57b00;
  padding: 5px 7px;
  font-size: 12.5px;
  line-height: 1.35;
}
.paper-cost-warning[hidden] { display: none; }
.paper-status { display:inline-block; padding:3px 7px; border-radius:10px; font-size:11px; font-weight:bold; white-space:nowrap; }
.paper-status.easycal-new { color:#6b3900; background:#ffe0a6; border:1px solid #d49a32; }
.paper-status.missing { color:#555; background:#e3e3e3; border:1px solid #999; }
.paper-delete-warning { white-space:pre-line; line-height:1.5; padding:10px; color:#6b1e1e; background:#fff0ed; border:1px solid #d59a90; }

/* ---------- มือถือ ---------- */
@media (max-width: 760px) {
  :root { font-size: 15px; }
  .tbtn { min-width: 30%; flex: 1; }
  .calc-head { grid-template-columns: 1fr; }
  .calc-bottom { grid-template-columns: 1fr; }
  .hrow label { min-width: 84px; }
  .dlg { left: 4px !important; right: 4px !important; top: 4px !important; width: auto !important; }
  .laygrid { grid-template-columns: 1fr; }
  .sumwrap { overflow-x: auto; }
  #login-screen .dlg { width: calc(100vw - 24px); }
  .form-row { flex-direction: column; align-items: stretch; }
  .form-row > label { text-align: left; min-width: 0; }
}
@media (min-width: 761px) {
  .dlg { min-width: 480px; }
}

/* EC-003 → EC-002: primary layout entry, independent of classic bevel buttons. */
.layout-launch {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 78px; max-width: 100%; margin-left: auto; padding: 12px 15px;
  color: #fff; background: #135d61; border: 1px solid #0b4146;
  border-radius: 12px; box-shadow: 0 3px 0 #0b4146, 0 5px 12px #123c3926;
  text-align: left; cursor: pointer; flex-shrink: 0;
  transition: background-color 140ms ease, box-shadow 140ms ease;
}
.layout-launch:hover { background: #0b4c52; box-shadow: 0 3px 0 #073338, 0 6px 16px #123c3938; }
.layout-launch:active { background: #083c42; box-shadow: inset 0 2px 3px #0004; }
.layout-launch:focus-visible { outline: 3px solid #153e91; outline-offset: 4px; }
.layout-launch__icon {
  display: grid; grid-template-columns: repeat(2, 10px); grid-template-rows: repeat(2, 13px);
  gap: 3px; padding: 5px; border: 2px solid #f5d27b; border-radius: 5px; flex: none;
}
.layout-launch__icon > span { background: #f5d27b; border-radius: 1px; }
.layout-launch__copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.layout-launch__title { font-size: 18px; font-weight: 700; line-height: 1.4; }
.layout-launch__hint { font-size: 12px; color: #e1f3ef; line-height: 1.5; }
.layout-launch__destination { display: flex; flex-direction: column; align-items: center; gap: 1px; margin-left: 3px; }
.layout-launch__code { padding: 3px 6px; border-radius: 5px; background: #e5f4eb; color: #164e46; font: 700 11px/1.4 Tahoma, sans-serif; white-space: nowrap; }
.layout-launch__arrow { font-size: 25px; line-height: 1; color: #f5d27b; }
.hrow:has(> .layout-launch) { flex-wrap: wrap; row-gap: 10px; }
@media (max-width: 640px) { .layout-launch { margin-left: 0; width: 100%; justify-content: center; gap: 9px; padding: 12px 10px; } .layout-launch__title { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .layout-launch { transition: none; } }
@media (forced-colors: active) { .layout-launch { border: 2px solid ButtonText; } .layout-launch__icon, .layout-launch__icon > span { border: 1px solid ButtonText; } .layout-launch:focus-visible { outline-color: Highlight; } }

/* EC-002: ranked suggestions and current selection share one comparison table. */
.sheet-comparison {margin-top:10px;border:1px solid #8baeb0;background:#f5faf8;font-size:12px;line-height:1.5;}
.sheet-compare-heading {display:flex;justify-content:space-between;gap:6px;padding:9px;background:#e2efea;color:#174c47;}
.sheet-compare-heading span {white-space:nowrap;}
.sheet-compare-status {padding:5px 8px;color:#4d615a;}
.sheet-compare-table {border-collapse:collapse;width:100%;font-size:12px;}
.sheet-compare-table th {padding:6px 3px;background:#27615c;color:white;font-weight:normal;text-align:left;}
.sheet-compare-table td {padding:8px 4px;border-bottom:1px solid #cfdfd8;vertical-align:middle;}
.sheet-compare-table tr:nth-child(even) {background:#edf4f1;}
.sheet-compare-table tr.is-selected {background:#d9edda;box-shadow:inset 3px 0 #257c43;}
.sheet-compare-table small {display:block;font-size:11px;color:#53665d;}
.sheet-compare-rank {text-align:center;width:34px;}
.sheet-best {color:#25693d!important;font-weight:bold;white-space:nowrap;font-size:10px;}
.sheet-compare-cut {font-size:11px;}
.sheet-net {display:block;color:#175f3c;white-space:nowrap;}
.sheet-loss {display:block;color:#973d25;font-size:11px;white-space:nowrap;}
.sheet-compare-use {font-size:12px;padding:4px 6px;white-space:nowrap;min-height:30px;}
.sheet-compare-use:disabled {color:#175f3c;opacity:1;}
.sheet-compare-warning {color:#8a4a16!important;}
.sheet-compare-help,.sheet-comparison>.unit-note {display:block;padding:6px 8px;font-size:11px;color:#4d615a;}

/* Keep the main workspace short; all existing tools remain reachable. */
.simple-toolbar { padding: 6px 10px; align-items: flex-start; gap: 6px 12px; flex: none; }
.toolbar-main { display: flex; flex-wrap: wrap; gap: 5px; }
.simple-toolbar .tbtn { min-height: 52px; min-width: 116px; border-radius: 5px; text-decoration: none; color: inherit; }
.simple-toolbar .toolbar-primary { background: #1b5a53; color: #fff; font-weight: bold; }
.simple-toolbar .toolbar-primary:hover { background: #124b45; }
.simple-toolbar [hidden] { display: none !important; }
.toolbar-more { flex: 1; min-width: 170px; }
.toolbar-more > summary { display: list-item; width: fit-content; padding: 15px 13px; min-height: 52px; cursor: pointer; border: 1px solid #8f918b; border-radius: 5px; background: #efeee8; }
.toolbar-more > summary:hover { background: #fffdf5; }
.toolbar-more[open] > summary { margin-bottom: 6px; }
.toolbar-more-content { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border: 1px solid #999f95; border-radius: 5px; background: #ecebe3; }
.toolbar-more-content .tbtn { flex: 0 1 132px; }
.toolbar-more-content .tbtn:hover { background: #fffdf5; }
.simple-toolbar .tbtn:focus-visible, .toolbar-more > summary:focus-visible, .workspace-guide button:focus-visible { outline: 3px solid #174f94; outline-offset: 2px; }
.workspace-guide { margin-bottom: 10px; border: 1px solid #8ba89e; border-radius: 7px; background: #f1f7f3; padding: 10px 12px; }
.workspace-guide-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.workspace-guide button { display: flex; align-items: center; gap: 8px; padding: 7px 10px; min-height: 44px; color: #184c43; background: #fff; border: 1px solid #9abcb0; border-radius: 5px; text-align: left; cursor: pointer; line-height: 1.45; }
.workspace-guide button:hover:not(:disabled) { background: #e4f1e9; border-color: #397960; }
.workspace-guide button:disabled { color: #67716b; background: #e8eeea; border-color: #c1ccc5; cursor: default; }
.workspace-step-number { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 25px; height: 25px; border-radius: 50%; background: #255b4d; color: #fff; font-weight: bold; }
.workspace-guide button:disabled .workspace-step-number { background: #64756a; }
.workspace-guide p { margin: 7px 0 0; font-size: 12px; line-height: 1.6; color: #425b4f; }
#calc-doc .sumwrap:focus-visible, #calc-doc .quote-readiness:focus-visible, #calc-doc [data-quote-readiness]:focus-visible, #calc-doc [data-calc-error]:focus-visible { outline: 3px solid #174f94; outline-offset: 4px; }
@media (max-width: 760px) {
  .simple-toolbar { padding: 5px; gap: 5px; }
  .toolbar-main { flex: 1 1 100%; }
  .toolbar-main .tbtn { flex: 1; min-width: 0; }
  .toolbar-more { flex-basis: 100%; }
  .toolbar-more > summary { min-height: 40px; padding: 10px 12px; }
  .toolbar-more-content .tbtn { flex: 1 1 130px; }
  .workspace-guide { padding: 8px; }
  .workspace-guide-steps { gap: 5px; }
  .workspace-guide button { flex-direction: column; gap: 5px; padding: 6px 3px; font-size: 12px; text-align: center; }
}
@media print { .simple-toolbar, .workspace-guide { display: none; } }

/* Bag specification stays readable inside the classic job dialog. */
[data-classic-bag-fields] {margin:10px 0;line-height:1.65;}
[data-bag-help] button[aria-pressed="true"] {background:#195e52;color:white;border-color:#195e52;}
.bag-picture {display:block;width:100%;max-width:800px;height:auto;background:#fff;margin-top:10px;}
.classic-bag-formula {padding:10px;background:#f7faf7;border:1px solid #98b2a5;line-height:1.7;}
[data-product-select] {min-height:38px;font-size:15px;}

/* Keep construction advice close to the bag selector. */
.bag-style-picker{padding:10px;background:#f5f9f5;border:1px solid #a7beb2;border-radius:5px;margin-bottom:10px;}
.bag-style-description{line-height:1.65;}
.bag-style-description p{margin:5px 0;}
.bag-style-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px;}
.bag-style-control{display:flex;flex-direction:column;gap:4px;min-width:0;}
.bag-style-control select{max-width:100%;width:100%;}
.bag-guide-link{display:inline-block;margin-top:8px;color:#12594a;font-weight:bold;text-decoration:underline;}
.bag-reference-info{padding:8px;background:#f4f0e3;margin:8px 0;line-height:1.6;}
.bag-reference-preview{display:block;width:100%;max-height:420px;object-fit:contain;background:white;}
.bag-inset-field{display:inline-flex;gap:5px;align-items:center;margin-top:6px;}
[data-classic-bag-fields] [hidden]{display:none!important;}
@media(max-width:500px){.bag-style-controls{grid-template-columns:1fr;}.bag-style-picker{padding:7px;}}
/* S14 production comparison: scrollable comparison, readable forms on small screens. */
[data-bag-production] {min-width:0;line-height:1.6;}
[data-bag-production] .fld {max-width:100%;min-width:0;box-sizing:border-box;}
.bp-controls,.bp-paper-controls,.bp-job-paper {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0;}
.bp-paper-controls {grid-template-columns:repeat(2,minmax(0,1fr));padding:12px;background:#f4f8f5;border:1px solid #91b6a7;}
.bp-paper-controls section,.bp-control {display:flex;flex-direction:column;gap:5px;min-width:0;}
.bp-control input,.bp-control select {width:100%;}
.bp-job-paper {grid-template-columns:repeat(2,minmax(0,1fr));}
[data-bag-production] [hidden] {display:none!important;}
.bp-info,.bp-missing {padding:10px;background:#fff8dd;border:1px solid #cdbb80;margin:10px 0;white-space:normal;overflow-wrap:anywhere;}
.bp-missing {background:#fff0e4;}
[data-bag-production] details {margin:10px 0;}
[data-bag-production] summary {cursor:pointer;font-weight:bold;}
.bp-table-wrap {max-width:100%;overflow-x:auto;border:1px solid #89a8a0;}
.bp-table {min-width:1250px;font-size:12px;}
.bp-table th {background:#e3ede8;}
.bp-table td,.bp-table th {padding:7px!important;vertical-align:top;}
.bp-table small {display:block;max-width:200px;}
.bag-production-images {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:15px 0;}
.bag-production-images figure {margin:0;background:white;border:1px solid #aac8bb;padding:10px;min-width:0;}
.bag-production-images figcaption {font-weight:bold;margin-bottom:8px;}
.bag-production-images svg {display:block;width:100%;height:260px;}
.bp-formula {padding:8px;border-top:1px solid #b5c9be;}
[data-bp-cost-lines] th {background:#e0eee8;}
@media(max-width:700px){.bp-controls,.bp-paper-controls,.bag-production-images {grid-template-columns:1fr;}.bp-job-paper {grid-template-columns:repeat(2,minmax(0,1fr));}[data-bag-production] .form-row {flex-wrap:wrap;}[data-bag-production] .form-row select {max-width:100%;}.bag-production-images svg {height:230px;}}
/* Keep the first decision compact; the chosen plan shows every cost below its drawing. */
.bp-table {min-width:820px;}
.bp-table th,.bp-cost-breakdown th {color:#214d43!important;background:#e3ede8!important;}
.bp-table th:last-child,.bp-table td:last-child {position:sticky;right:0;background:#e6f0ea;color:#163d32;}
.bp-table tr.sel td:last-child {background:#d6e5dc;}
.bp-cost-breakdown {width:100%;min-width:530px;margin:0;}
.bp-cost-breakdown td {text-align:right;padding:8px;}
.bp-cost-breakdown th {padding:8px;}
.bp-cost-breakdown tbody tr:nth-last-child(2),.bp-cost-breakdown tbody tr:last-child {font-weight:bold;background:#edf5eb;}
/* Required bag allowances remain next to the handle choice, before explanatory text. */
[data-bag-reference-block] {margin:8px 0;padding:8px;border:1px solid #aac1b4;background:#f5f9f4;}
.bag-reference-required {padding:7px 9px;margin:5px 0;background:#fff4cc;border-left:4px solid #986800;color:#493600;font-size:12px;line-height:1.6;}
[data-classic-bag-template][aria-invalid="true"] {outline:3px solid #a04d00;outline-offset:2px;background:#fff0cf;}
[data-bag-reference-block] .form-row {flex-wrap:wrap;}
[data-classic-bag-template] {max-width:100%;min-width:0;}

.box-fields{margin:10px 0;padding:10px;background:#f9fffc;border:1px solid #9ab7ae}.box-fields .form-row{flex-wrap:wrap}.box-fields [data-box-reference-block]{padding:8px;background:#f6f9ef;border:1px solid #b8caa8;margin:8px 0}.box-fields [data-box-reference-block] select{flex:1;min-width:190px}.box-fields [data-box-reference][aria-invalid=true]{outline:2px solid #a85200;background:#fff4d9}.box-allowance-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:8px;margin-top:10px}.box-allowance-field{display:flex;flex-direction:column;gap:3px;min-width:0}.box-allowance-field input{max-width:100%}.box-fields .unit-note{line-height:1.5}

.box-allowance-field[hidden]{display:none}

[data-classic-box-fields] [hidden],[data-box-production] [hidden]{display:none!important}
[data-box-board]{padding:8px;margin:8px 0;background:#edf6f2;border:1px solid #a8c8bc}
[data-box-board] .unit-note{margin-top:6px}