:root{
  --bg:#edf3f8;--side:#173f68;--side2:#123354;--panel:#e7eef5;--panel2:#dce6f0;
  --field:#fff;--line:#bdcad7;--text:#182230;--muted:#667085;--primary:#245985;--danger:#b42318;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font:12px Tahoma,Arial,"Noto Sans Thai",sans-serif;background:var(--bg);color:var(--text)}
.app{display:grid;grid-template-columns:198px minmax(0,1fr);min-height:100vh;align-items:start}
aside{background:linear-gradient(180deg,var(--side),var(--side2));color:#fff;padding:10px 7px;position:sticky;top:0;height:100vh;max-height:100vh;overflow-y:auto;overflow-x:hidden;align-self:start}
.brand{font-size:19px;font-weight:700;padding:7px 7px 16px}
.main-menu{margin:4px 0}
.main-menu-btn{width:100%;display:flex;justify-content:space-between;align-items:center;border:0;background:transparent;color:#fff;padding:9px 9px;border-radius:5px;font-weight:700;font-size:13px;text-align:left;cursor:pointer}
.main-menu-btn:hover,.main-menu.open>.main-menu-btn{background:rgba(255,255,255,.12)}
.chev{font-size:10px;transition:.15s}.main-menu.open .chev{transform:rotate(90deg)}
.submenu{display:none;padding:3px 0 7px 10px}.main-menu.open .submenu{display:block}
.nav-link{display:block;color:#dceaf7;text-decoration:none;padding:7px 9px;border-left:2px solid transparent;font-size:11px;border-radius:3px}
.nav-link:hover,.nav-link.active{background:rgba(255,255,255,.09);border-left-color:#8cc8ff;color:#fff}
.home-link{display:block;color:#fff;text-decoration:none;font-size:13px;font-weight:700;padding:9px;border-radius:5px;margin-bottom:5px}
.home-link.active,.home-link:hover{background:rgba(255,255,255,.12)}
main{padding:10px 12px;min-width:0;width:100%;max-width:100%}
.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.page-head h1{margin:0;font-size:19px}.small{font-size:10px;color:var(--muted);margin-top:2px}
.btn{border:0;border-radius:5px;padding:6px 10px;font:700 11px Tahoma;cursor:pointer}.btn-primary{background:var(--primary);color:#fff}.btn-secondary{background:#e8eef4;color:#344054}.btn-danger{background:#fdecec;color:var(--danger)}
.card{background:#fff;border:1px solid var(--line);border-radius:7px;padding:10px;box-shadow:0 2px 7px rgba(15,23,42,.035)}
.toolbar{display:flex;gap:6px;align-items:end;flex-wrap:wrap;margin-bottom:8px}.spacer{flex:1}
input,select,textarea{border:1px solid var(--line);border-radius:4px;background:#fff;min-height:28px;padding:4px 6px;font:11.5px Tahoma;color:#111}
textarea{resize:vertical;min-height:52px}input:focus,select:focus,textarea:focus{outline:2px solid #b9d5ec;border-color:#83a9ca;background:#fffef7}
.section{background:var(--panel);border:1px solid #c3d0dc;border-radius:6px;padding:8px 10px;margin-bottom:8px}
.section-title{font-size:12px;font-weight:700;color:#203b55;border-bottom:1px solid #c4d0db;margin:-1px 0 8px;padding-bottom:5px}
.field{display:flex;flex-direction:column;gap:3px}.field label{font-size:10.5px;font-weight:700;color:#26384b}
.form-row{display:flex;align-items:center;gap:9px 16px;flex-wrap:wrap;margin:5px 0}
.inline-field{display:flex;align-items:center;gap:6px;min-width:0}.inline-field label{font-size:10.5px;font-weight:700;white-space:nowrap;color:#26384b}
.w-xs{width:90px}.w-sm{width:130px}.w-md{width:190px}.w-lg{width:300px}.w-xl{width:440px}.w-xxl{width:620px}.w-date{width:130px}.w-select{width:190px}
.textarea-wide{width:min(760px,100%);height:58px}
.form-actions{display:flex;justify-content:flex-end;gap:6px;background:var(--panel2);padding:7px;border:1px solid #c5d1dc;border-radius:6px;margin-top:8px}
.summary-wrap{overflow:auto;border:1px solid var(--line);border-radius:6px;background:#fff}
table{width:100%;border-collapse:collapse}th,td{border-bottom:1px solid #dce3ea;padding:6px 7px;font-size:11px;text-align:left;vertical-align:top}th{background:#edf3f8;font-size:10px;white-space:nowrap}
tr:hover td{background:#fbfdff}.view-switch{display:flex;gap:4px;margin-bottom:8px}.view-switch .active{background:var(--primary);color:#fff}
.list-view,.form-view{display:none}.list-view.active,.form-view.active{display:block}
.notice{background:#fff8dc;border:1px solid #e5d080;border-radius:5px;padding:5px 7px;font-size:10px;margin-bottom:7px}
.dashboard{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.dash-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px;text-decoration:none;color:var(--text)}.dash-card:hover{box-shadow:0 4px 12px rgba(15,23,42,.07);border-color:#8baeca}.dash-title{font-size:14px;font-weight:700}.dash-value{font-size:25px;font-weight:700;color:#1f5685;margin:8px 0 2px}
@media(max-width:1440px){.app{grid-template-columns:188px minmax(0,1fr)}aside{padding:9px 6px}.main-menu-btn{padding-left:7px;padding-right:7px;font-size:12px}.nav-link{padding-left:7px;padding-right:6px}}
@media(max-width:1000px){.app{grid-template-columns:180px minmax(0,1fr)}aside{position:sticky;top:0;height:100vh;max-height:100vh}.dashboard{grid-template-columns:repeat(2,1fr)}.w-xxl,.w-xl{width:min(100%,440px)}}
@media(max-width:620px){main{padding:8px}.dashboard{grid-template-columns:1fr}.inline-field{width:100%}.inline-field label{min-width:110px}.w-xs,.w-sm,.w-md,.w-lg,.w-xl,.w-xxl,.w-date,.w-select{width:calc(100% - 120px)}}

.data-toolbar{display:flex;gap:5px;align-items:end;flex-wrap:wrap;margin-bottom:8px}
.page-controls{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:8px}
.page-controls button{min-width:28px}
.page-info{font-size:10px;color:var(--muted)}
.import-box{display:none;background:#edf3f8;border:1px solid var(--line);border-radius:6px;padding:9px;margin:8px 0}
.import-box.open{display:block}
.mapping-grid{display:grid;grid-template-columns:220px 1fr;gap:5px 8px;max-width:620px}
.mapping-grid select{width:260px}
.preview-table{max-height:260px;overflow:auto;margin-top:8px}
.soft-delete-note{font-size:9px;color:#7a4d00}

/* V5.1 Master list */
.summary-wrap{margin-top:8px;overflow:auto}.summary-wrap table{width:100%;border-collapse:collapse;background:#fff}.summary-wrap th,.summary-wrap td{border:1px solid #c7d4df;padding:6px 8px;text-align:left}.summary-wrap th{background:#dce8f2}.summary-wrap .action-col{width:80px;text-align:center}.summary-wrap td:last-child{text-align:center}.master-count{font-size:11px;color:#52677a;margin:4px 0}.empty-row{text-align:center!important;color:#718096;padding:12px!important}.btn-sm{padding:4px 10px;font-size:11px}


/* ============================================================
   V5.6 CLEAN MASTER SETTINGS
   Base visual style = V5.2
   Wide screen = 4 columns, no horizontal table scroll
   ============================================================ */

main{
  width:100%;
  max-width:none;
}

.master-settings-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  align-items:start;
}

.master-settings-grid .section{
  min-width:0;
  width:100%;
  margin:0;
  padding:9px 10px;
}

.master-settings-grid .section-title{
  margin-bottom:7px;
}

/* Compact entry row: short code, medium name, compact add button */
.master-entry-row{
  display:grid;
  grid-template-columns:72px minmax(105px,1fr) auto;
  gap:7px;
  align-items:end;
  margin-bottom:7px;
}

.master-entry-field{
  min-width:0;
}

.master-entry-field label{
  display:block;
  font-size:10.5px;
  font-weight:700;
  color:#26384b;
  margin-bottom:3px;
  white-space:nowrap;
}

.master-entry-field input{
  width:100%;
  min-width:0;
}

.master-entry-row .btn{
  white-space:nowrap;
  min-width:58px;
  padding-left:8px;
  padding-right:8px;
}

/* List area */
.master-settings-grid .summary-wrap{
  margin-top:5px;
  width:100%;
  max-height:255px;
  overflow-y:auto;
  overflow-x:hidden;
}

.master-settings-grid table{
  width:100%;
  min-width:0;
  table-layout:fixed;
}

.master-settings-grid th,
.master-settings-grid td{
  padding:5px 6px;
  font-size:10px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.master-settings-grid th:nth-child(1),
.master-settings-grid td:nth-child(1){
  width:28%;
}

.master-settings-grid th:nth-child(2),
.master-settings-grid td:nth-child(2){
  width:auto;
}

.master-settings-grid th:last-child,
.master-settings-grid td:last-child{
  width:54px;
  text-align:center;
}

.master-settings-grid .btn-danger{
  padding:3px 7px;
  font-size:10px;
}

.master-count{
  font-size:10px;
  color:var(--muted);
  padding:3px 1px;
}

.empty-row{
  text-align:center!important;
  color:#718096;
  padding:12px!important;
}

/* 3 / 2 / 1 columns depending on actual content width */
@media(max-width:1500px){
  .master-settings-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:1120px){
  .master-settings-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:700px){
  .master-settings-grid{
    grid-template-columns:1fr;
  }
}


/* V5.7 Master Edit controls */
.master-settings-grid th:last-child,
.master-settings-grid td:last-child{
  width:104px;
}
.master-action-buttons{
  display:flex;
  gap:4px;
  justify-content:center;
  align-items:center;
}
.master-action-buttons .btn{
  padding:3px 6px;
  font-size:10px;
  min-width:0;
}
.master-editing{
  outline:2px solid #9bc3e6;
  background:#f7fbff;
}
.master-cancel-btn{
  display:none;
}
.master-cancel-btn.show{
  display:inline-block;
}


/* ============================================================
   V5.8 SUMMARY TOOLBAR + COMPACT TABLES
   ============================================================ */
.summary-topbar{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:7px;
}
.summary-actions{
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
}
.summary-search{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:6px;
}
.summary-search label{
  font-size:10.5px;
  font-weight:700;
  white-space:nowrap;
}
.summary-search input{
  width:260px;
  min-height:27px;
}
.summary-filters{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
  margin-left:auto;
}
.summary-filters .inline-summary-field{
  display:flex;
  align-items:center;
  gap:5px;
}
.summary-filters label{
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}
.summary-filters select{
  min-height:27px;
  width:auto;
  min-width:120px;
}

/* Keep summary rows proportional to current 11px text. */
.summary-wrap th,
.summary-wrap td,
#listWrap th,
#listWrap td{
  padding:3px 7px;
  line-height:1.25;
  height:auto;
  vertical-align:middle;
}
.summary-wrap th,
#listWrap th{
  padding-top:4px;
  padding-bottom:4px;
}
.summary-wrap .btn,
#listWrap .btn,
.summary-wrap button,
#listWrap button{
  padding-top:3px;
  padding-bottom:3px;
}

/* Pagination should be compact too. */
.page-controls{
  margin-top:6px;
  min-height:28px;
}
.page-controls select{
  min-height:27px;
}
.page-controls .btn{
  padding:4px 8px;
}

/* Avoid excessive empty vertical space inside list cards. */
.list-view.card{
  padding:8px 10px;
}

@media(max-width:760px){
  .summary-topbar{
    align-items:stretch;
  }
  .summary-search,
  .summary-filters{
    width:100%;
    margin-left:0;
  }
  .summary-search input{
    flex:1;
    width:auto;
  }
}

/* V5.87 Form guidance: auto-filled/read-only vs fields requiring new input */
input.sec-auto-field,select.sec-auto-field,textarea.sec-auto-field,input[readonly].sec-auto-field{background:#eef5fb!important;border-color:#b8cfdf!important;color:#29485f!important}
input.sec-extra-required,select.sec-extra-required,textarea.sec-extra-required{background:#fff5c9!important;border-color:#e1bd55!important}
input.sec-extra-required.sec-filled,select.sec-extra-required.sec-filled,textarea.sec-extra-required.sec-filled{background:#fff!important;border-color:#b7cad9!important}
input.sec-field-error,select.sec-field-error,textarea.sec-field-error{background:#ffe3e6!important;border-color:#d66!important}

/* V5.88: user-input fields stay pale yellow until completed */
input.sec-needs-input,select.sec-needs-input,textarea.sec-needs-input{background:#fff4c7!important;border-color:#dfbd55!important}


/* V5.89 FORM INPUT GUIDANCE — common across SEC ERP */
input.sec-auto-field,select.sec-auto-field,textarea.sec-auto-field,
input.sec-autofill,select.sec-autofill,textarea.sec-autofill{
  background:#eef6fc!important;
  border-color:#b8cfdf!important;
  color:#29485f!important;
}
input.sec-needs-input,select.sec-needs-input,textarea.sec-needs-input,
input.sec-extra-required:not(.sec-filled),select.sec-extra-required:not(.sec-filled),textarea.sec-extra-required:not(.sec-filled){
  background:#fff4c7!important;
  border-color:#dfbd55!important;
  box-shadow:inset 0 0 0 1px rgba(223,189,85,.12)!important;
}
input.sec-extra-required.sec-filled,select.sec-extra-required.sec-filled,textarea.sec-extra-required.sec-filled{
  background:#fff!important;
  border-color:#b7cad9!important;
}
input:disabled.sec-auto-field,select:disabled.sec-auto-field,textarea:disabled.sec-auto-field{
  opacity:1!important;
  background:#edf3f7!important;
  color:#60788b!important;
}


/* V5.99 SEC ERP global workspace layout: sticky menu left, workspace right */
body>.app,
body .app{
  grid-template-columns:198px minmax(0,1fr)!important;
  align-items:start!important;
}
body .app>aside{
  grid-column:1!important;
  grid-row:1!important;
  width:auto!important;
  min-width:0!important;
  position:sticky!important;
  top:0!important;
  left:0!important;
  right:auto!important;
  height:100vh!important;
  max-height:100vh!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  z-index:30!important;
}
body .app>main{
  grid-column:2!important;
  grid-row:1!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}
@media(max-width:1440px){
 body>.app,body .app{grid-template-columns:188px minmax(0,1fr)!important}
}
@media(max-width:1000px){
 body>.app,body .app{grid-template-columns:180px minmax(0,1fr)!important}
}


/* V6.04 global form data ownership standard
   Blue = system/upstream/readonly. Yellow = editable at current workflow step. */
input.sec-auto-field,select.sec-auto-field,textarea.sec-auto-field,
input.sec-autofill,select.sec-autofill,textarea.sec-autofill,
input[readonly],textarea[readonly],select:disabled,input:disabled,textarea:disabled{
  background:#eef6fc!important;border-color:#b8cfdf!important;color:#284d69!important;opacity:1!important;
}
input.sec-extra-required,select.sec-extra-required,textarea.sec-extra-required,
input.sec-needs-input,select.sec-needs-input,textarea.sec-needs-input,
input.sec-filled,select.sec-filled,textarea.sec-filled{
  background:#fff4c7!important;border-color:#dfbd55!important;
}


/* V6.12 canonical workflow status colors */
.status-badge.status-stage-order,.status-stage-order .status-badge,.status-stage-order{background:#eef2f6!important;color:#475467!important;border-color:#cbd5df!important}
.status-badge.status-stage-workorder,.status-stage-workorder .status-badge,.status-stage-workorder{background:#fff1cc!important;color:#7a5600!important;border-color:#e8c45b!important}
.status-badge.status-stage-plan,.status-stage-plan .status-badge,.status-stage-plan{background:#e5f0ff!important;color:#185d9d!important;border-color:#9fc3ea!important}
.status-badge.status-stage-waitfac,.status-stage-waitfac .status-badge,.status-stage-waitfac{background:#fff6d9!important;color:#835f00!important;border-color:#e9ce72!important}
.status-badge.status-stage-reserve,.status-stage-reserve .status-badge,.status-stage-reserve{background:#dff6fb!important;color:#11657a!important;border-color:#93d8e5!important}
.status-badge.status-stage-production,.status-stage-production .status-badge,.status-stage-production{background:#eee6ff!important;color:#5f3aa1!important;border-color:#c4afea!important}
.status-badge.status-stage-fg,.status-stage-fg .status-badge,.status-stage-fg{background:#def5e5!important;color:#176b3a!important;border-color:#92d1a7!important}
.status-badge.status-stage-issue,.status-stage-issue .status-badge,.status-stage-issue{background:#ffe8cf!important;color:#8a4b08!important;border-color:#efb879!important}
.status-badge.status-stage-waittest,.status-stage-waittest .status-badge,.status-stage-waittest{background:#fff0c9!important;color:#805a00!important;border-color:#e7c05d!important}
.status-badge.status-stage-test,.status-stage-test .status-badge,.status-stage-test{background:#ffe0c2!important;color:#9a4600!important;border-color:#efaa66!important}
.status-badge.status-stage-return,.status-stage-return .status-badge,.status-stage-return{background:#dff3ef!important;color:#15675b!important;border-color:#8bcfc1!important}
.status-badge.status-stage-ready,.status-stage-ready .status-badge,.status-stage-ready{background:#d9f4df!important;color:#126434!important;border-color:#85cc9a!important}
.status-badge.status-stage-delivered,.status-stage-delivered .status-badge,.status-stage-delivered{background:#cfead8!important;color:#0e542c!important;border-color:#70b889!important}
.status-badge.status-stage-billing,.status-stage-billing .status-badge,.status-stage-billing{background:#e8e4ff!important;color:#51409b!important;border-color:#b4a8e9!important}
.status-badge.status-stage-fail,.status-stage-fail .status-badge,.status-stage-fail,.status-badge.status-stage-cancel,.status-stage-cancel .status-badge,.status-stage-cancel{background:#fde4e4!important;color:#9d1c1c!important;border-color:#e9a4a4!important}


/* V6.16 Master Dropdown grouped by module */
.master-module-box{background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px;margin-bottom:10px}
.master-module-tabs{display:flex;flex-wrap:wrap;gap:6px}
.master-module-tab{border:1px solid #9bbbd5;background:#edf5fb;color:#173a57;padding:7px 11px;border-radius:6px;cursor:pointer;font-weight:700}
.master-module-tab.active{background:#255f8d;color:#fff;border-color:#255f8d}
.master-module-head{display:flex;gap:12px;align-items:center;margin-top:9px;padding-top:8px;border-top:1px solid #d1deea}
.master-module-head b{font-size:14px}.master-option-card .master-inactive{opacity:.55}.master-option-card .master-inactive td{background:#f5f5f5}
.master-empty-module{grid-column:1/-1;min-height:92px}
@media(max-width:900px){.master-module-head{display:block}.master-module-head .small{display:block;margin-top:4px}}


/* V6.19 — Master UI: prioritize readable display text, status controlled by action button */
.master-option-card .master-entry-row{
  grid-template-columns:58px minmax(150px,1fr) auto!important;
}
.master-option-card .master-code-field{
  min-width:0!important;
}
.master-option-card .master-name-field{
  min-width:0!important;
}
.master-option-card .master-option-table{
  width:100%!important;
  table-layout:fixed!important;
}
.master-option-card .master-option-table th,
.master-option-card .master-option-table td{
  vertical-align:middle!important;
}
.master-option-card .master-option-table .master-col-code{
  width:22%!important;
  max-width:22%!important;
  text-align:left!important;
}
.master-option-card .master-option-table .master-col-name{
  width:auto!important;
  text-align:left!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
  line-height:1.25!important;
  text-overflow:clip!important;
}
.master-option-card .master-option-table .master-col-actions{
  width:104px!important;
  min-width:104px!important;
  text-align:center!important;
  white-space:nowrap!important;
}
.master-option-card .master-action-buttons{
  display:flex!important;
  gap:4px!important;
  justify-content:center!important;
  align-items:center!important;
  white-space:nowrap!important;
}
.master-option-card .master-inactive{
  opacity:.52!important;
}
.master-option-card .master-inactive .master-col-name{
  text-decoration:none!important;
}


/* V6.20 — Master table: tighter action column, more room for display text */
.master-option-card .master-option-table .master-col-actions{
  width:88px!important;
  min-width:88px!important;
  padding-left:2px!important;
  padding-right:2px!important;
}
.master-option-card .master-action-buttons{
  gap:2px!important;
}
.master-option-card .master-action-buttons .btn{
  padding-left:5px!important;
  padding-right:5px!important;
}
.master-option-card .master-option-table .master-col-name{
  width:auto!important;
}


/* V6.21 — Master: maximize display-text width.
   Keep code column unchanged; action column hugs its two buttons. */
.master-option-card .master-option-table{
  table-layout:fixed!important;
}
.master-option-card .master-option-table .master-col-actions{
  width:76px!important;
  min-width:76px!important;
  max-width:76px!important;
  padding-left:1px!important;
  padding-right:1px!important;
}
.master-option-card .master-action-buttons{
  display:flex!important;
  flex-wrap:nowrap!important;
  justify-content:center!important;
  gap:1px!important;
  width:max-content!important;
  margin:0 auto!important;
}
.master-option-card .master-action-buttons .btn{
  padding-left:4px!important;
  padding-right:4px!important;
  min-width:0!important;
  white-space:nowrap!important;
}
.master-option-card .master-option-table .master-col-name{
  width:auto!important;
}