: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:232px 1fr;min-height:100vh}
aside{background:linear-gradient(180deg,var(--side),var(--side2));color:#fff;padding:12px 9px;position:sticky;top:0;height:100vh;overflow:auto}
.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:12px 16px;min-width:0}
.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:1000px){.app{grid-template-columns:1fr}aside{height:auto;position:relative}.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;
  }
}