/* =========================================================
   retro-admin.css
   ธีมหน้าตาแบบ VB.NET / Windows Classic ทับบน Bootstrap 5
   โทนสี: Windows Gray + Excel Green
   ========================================================= */

:root{
  /* --- โทนสีหลัก (Windows Classic / VB.NET) --- */
  --win-face:        #ECE9D8;   /* พื้นผิวปุ่ม/พาเนล (XP Silver) */
  --win-face-dark:   #D4D0C8;   /* พื้นหลังฟอร์ม */
  --win-border-lt:   #FFFFFF;   /* ขอบสว่าง (bevel บนซ้าย) */
  --win-border-md:   #ACA899;   /* ขอบกลาง */
  --win-border-dk:   #716F64;   /* ขอบเข้ม (bevel ล่างขวา) */
  --win-border-blk:  #40402A;   /* ขอบเข้มสุด */
  --win-titlebar-1:  #0A246A;   /* หัวหน้าต่าง gradient เริ่ม */
  --win-titlebar-2:  #3A6EA5;   /* หัวหน้าต่าง gradient จบ */
  --win-text:        #1A1A1A;

  /* --- โทนสี Excel (ตาราง/กริด) --- */
  --xls-header:      #21603F;   /* หัวตารางเขียว Excel */
  --xls-header-2:    #2E7D4F;
  --xls-grid-line:   #B7C4B4;   /* เส้นตารางจาง */
  --xls-row-alt:     #F2F7F1;   /* แถวสลับสี */
  --xls-row-select:  #C6DEF1;   /* แถวถูกเลือก (สีฟ้า Excel) */
  --xls-row-select-b:#4A90D9;

  --accent:          #2E7D4F;
  --danger:          #A4373A;
  --warn:            #B5860B;

  --font-ui: "Tahoma", "MS Sans Serif", "Segoe UI", Verdana, Arial, sans-serif;
}

html, body{
  height: 100%;
}
body{
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--win-text);
  background: var(--win-face);
  margin: 0;
  padding: 5px;
}

/* =========================================================
   กรอบ "หน้าต่างโปรแกรม" แบบ VB.NET MDI Form
   เต็มจอ: ไม่จำกัด max-width, สูงเต็ม viewport
   ========================================================= */
.app-window{
  width: 100%;
  min-height: 100vh;
  margin: 0;
  background: var(--win-face);
  border: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}

.app-titlebar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, var(--win-titlebar-2) 0%, var(--win-titlebar-1) 55%, var(--win-titlebar-1) 100%);
  color: #fff;
  padding: 5px 6px 5px 10px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .2px;
}
.app-titlebar .app-title{
  display:flex; align-items:center; gap:8px;
}
.app-titlebar .app-title .glyph{
  width:16px;height:16px;background:#fff;border-radius:2px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--win-titlebar-1); font-size:11px; font-weight:900;
}
.win-controls{ display:flex; gap:4px; }
.win-controls button{
  width: 22px; height: 20px;
  background: var(--win-face);
  border-top: 1px solid var(--win-border-lt);
  border-left: 1px solid var(--win-border-lt);
  border-right: 1px solid var(--win-border-blk);
  border-bottom: 1px solid var(--win-border-blk);
  font-size: 11px;
  line-height: 1;
  color: #000;
  cursor: default;
}
.win-controls button:active{
  border-top-color: var(--win-border-blk);
  border-left-color: var(--win-border-blk);
  border-right-color: var(--win-border-lt);
  border-bottom-color: var(--win-border-lt);
}

/* Menu bar แบบ VB6 (File Edit View ...) */
.app-menubar{
  background: var(--win-face);
  border-bottom: 1px solid var(--win-border-dk);
  padding: 3px 8px;
  display:flex; gap:16px;
  font-size:12px;
}
.app-menubar span{ cursor:default; padding:2px 6px; }
.app-menubar span:hover{ background: var(--win-titlebar-1); color:#fff; }

/* Toolbar ปุ่มเครื่องมือ */
.app-toolbar{
  display:flex; align-items:center; gap:6px;
  background: var(--win-face);
  border-bottom: 1px solid var(--win-border-dk);
  padding: 6px 8px;
  flex-wrap: wrap;
}
.app-toolbar .sep{
  width:1px; height:24px; background:var(--win-border-dk);
  box-shadow: 1px 0 0 var(--win-border-lt);
  margin: 0 4px;
}

/* =========================================================
   ปุ่มสไตล์ VB.NET / Win32 3D Button
   ========================================================= */
.btn-win{
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--win-text);
  background: var(--win-face);
  border-top: 1px solid var(--win-border-lt);
  border-left: 1px solid var(--win-border-lt);
  border-right: 1px solid var(--win-border-blk);
  border-bottom: 1px solid var(--win-border-blk);
  border-radius: 0;
  padding: 5px 14px;
  box-shadow: inset 1px 1px 0 #fff;
  display:inline-flex; align-items:center; gap:6px;
  cursor: default;
}
.btn-win:hover{ background: #F5F3EA; color: var(--win-text); }
.btn-win:active,
.btn-win.is-pressed{
  border-top-color: var(--win-border-blk);
  border-left-color: var(--win-border-blk);
  border-right-color: var(--win-border-lt);
  border-bottom-color: var(--win-border-lt);
  box-shadow: inset 1px 1px 2px rgba(0,0,0,.35);
  padding: 6px 13px 4px 15px;
}
.btn-win:focus{
  outline: 1px dotted #000;
  outline-offset: -4px;
  box-shadow: inset 1px 1px 0 #fff;
}
.btn-win.btn-win-primary{
  background: linear-gradient(180deg,#EAF2FC,#CFE2F5);
  font-weight:700;
  border-top-color:#fff; border-left-color:#fff;
}
.btn-win.btn-win-danger{ color:#fff; background: linear-gradient(180deg,#C4595C,var(--danger)); border-color: var(--win-border-blk);}
.btn-win.btn-win-icon{ padding:5px 8px; }
.btn-win:disabled{ color:#9a9a8c; cursor:not-allowed; box-shadow:none; }

/* toolbar ปุ่มเล็กแบบ flat-until-hover */
.btn-tool{
  background: transparent;
  border: 1px solid transparent;
  padding: 4px 8px;
  font-size:12px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  min-width:52px;
  color: var(--win-text);
}
.btn-tool .ico{ font-size:16px; line-height:1; }
.btn-tool:hover{
  border-top:1px solid var(--win-border-lt);
  border-left:1px solid var(--win-border-lt);
  border-right:1px solid var(--win-border-dk);
  border-bottom:1px solid var(--win-border-dk);
  background:#F5F3EA;
}
.btn-tool:active{
  border-color: var(--win-border-dk) var(--win-border-lt) var(--win-border-lt) var(--win-border-dk);
  background:#E2DFCF;
}

/* =========================================================
   Layout: sidebar + main
   ========================================================= */
.app-body{ display:flex; flex: 1; min-height: 0; }

.app-sidebar{
  width: 220px;
  flex-shrink:0;
  background: var(--win-face-dark);
  border-right: 1px solid var(--win-border-dk);
  box-shadow: 1px 0 0 var(--win-border-lt) inset;
  padding: 10px 0;
}
.app-sidebar .side-title{
  font-size:11px; font-weight:700; color:#4a4a3c;
  padding: 4px 12px; text-transform:uppercase; letter-spacing:.5px;
}
.side-nav{ list-style:none; margin:0; padding:0 6px; }
.side-nav li + li{ margin-top:2px; }
.side-nav a{
  display:flex; align-items:center; gap:8px;
  padding: 6px 8px;
  color: var(--win-text);
  text-decoration:none;
  font-size:12.5px;
  border:1px solid transparent;
}
.side-nav a .ico{ width:16px; text-align:center; }
.side-nav a:hover{
  border-top:1px solid var(--win-border-lt);
  border-left:1px solid var(--win-border-lt);
  border-right:1px solid var(--win-border-dk);
  border-bottom:1px solid var(--win-border-dk);
  background:#F5F3EA;
}
.side-nav a.active{
  background: var(--win-titlebar-1);
  color:#fff;
  border:1px solid var(--win-border-blk);
}

.app-main{
  flex: 1;
  padding: 14px;
  background: var(--win-face);
  overflow-x:auto;
  overflow-y:auto;
}

/* status bar ล่างสุด */
.app-statusbar{
  display:flex; justify-content:space-between;
  font-size: 11.5px;
  padding: 4px 10px;
  background: var(--win-face);
  border-top: 1px solid var(--win-border-lt);
  box-shadow: 0 -1px 0 var(--win-border-dk);
  color:#444;
}
.app-statusbar .seg{
  border-left: 1px solid var(--win-border-dk);
  box-shadow: -1px 0 0 var(--win-border-lt);
  padding-left:10px; margin-left:10px;
}

/* =========================================================
   GroupBox (พาเนลกรอบเว้า แบบ VB6 GroupBox)
   ========================================================= */
.groupbox{
  border: 1px solid var(--win-border-dk);
  border-top-color: var(--win-border-md);
  box-shadow: 1px 1px 0 var(--win-border-lt) inset;
  background: var(--win-face);
  padding: 14px 12px 12px;
  position: relative;
  margin-bottom: 16px;
}
.groupbox > .gb-title{
  position:absolute; top:-10px; left:10px;
  background: var(--win-face);
  padding: 0 6px;
  font-size:12.5px; font-weight:700;
}

/* =========================================================
   Dashboard summary cards (สไตล์ recessed panel)
   ========================================================= */
.kpi-card{
  background: var(--win-face);
  border-top:1px solid var(--win-border-dk);
  border-left:1px solid var(--win-border-dk);
  border-right:1px solid var(--win-border-lt);
  border-bottom:1px solid var(--win-border-lt);
  padding: 12px 14px;
  display:flex; align-items:center; gap:12px;
}
.kpi-card .kpi-icon{
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
  background: var(--win-face-dark);
  border-top:1px solid var(--win-border-lt);
  border-left:1px solid var(--win-border-lt);
  border-right:1px solid var(--win-border-dk);
  border-bottom:1px solid var(--win-border-dk);
  color: var(--win-titlebar-1);
  flex-shrink:0;
}
.kpi-card .kpi-value{
  font-size: 22px;
  font-weight: 800;
  line-height:1.1;
  font-family: "Consolas","Courier New",monospace;
}
.kpi-card .kpi-label{ font-size:11.5px; color:#555; }
.kpi-card .kpi-delta{ font-size:11px; font-weight:700; }
.kpi-card .kpi-delta.up{ color: var(--accent); }
.kpi-card .kpi-delta.down{ color: var(--danger); }

/* =========================================================
   ตารางสไตล์ Excel
   ========================================================= */
.excel-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:8px;
  margin-bottom:6px;
}
.excel-toolbar .formula-bar{
  display:flex; align-items:center; gap:0;
  border: 1px solid var(--win-border-dk);
  background:#fff;
  font-family:"Consolas","Courier New",monospace;
  font-size:12px;
  flex:1; min-width:220px; max-width:520px;
}
.excel-toolbar .formula-bar .cell-ref{
  padding:3px 8px; background:var(--win-face-dark);
  border-right:1px solid var(--win-border-dk);
  color:#333; min-width:46px; text-align:center;
}
.excel-toolbar .formula-bar .fx{
  padding: 3px 8px; color:#666; border-right:1px solid var(--win-border-dk);
}
.excel-toolbar .formula-bar input{
  border:0; outline:0; flex:1; padding:3px 8px; font-family:inherit; font-size:inherit;
}

.excel-table-wrap{
  border: 1px solid var(--win-border-dk);
  overflow:auto;
  background:#fff;
}
table.excel-table{
  border-collapse: collapse;
  width: 100%;
  font-size: 12.5px;
  min-width: 760px;
}
table.excel-table thead th{
  background: linear-gradient(180deg, var(--xls-header-2), var(--xls-header));
  color:#fff;
  font-weight:700;
  text-align:left;
  padding: 6px 10px;
  border: 1px solid #184A32;
  position: sticky; top:0;
  white-space:nowrap;
}
table.excel-table thead th.col-idx,
table.excel-table td.col-idx{
  background: var(--win-face-dark);
  color:#333;
  text-align:center;
  width:36px;
  border: 1px solid var(--win-border-dk);
}
table.excel-table tbody td{
  padding: 5px 10px;
  border: 1px solid var(--xls-grid-line);
  white-space:nowrap;
}
table.excel-table tbody tr:nth-child(even) td{ background: var(--xls-row-alt); }
table.excel-table tbody tr:nth-child(even) td.col-idx{ background: var(--win-face-dark); }
table.excel-table tbody tr:hover td{ background: #FFF6D9; }
table.excel-table tbody tr.row-selected td{
  background: var(--xls-row-select);
  outline: 1px solid var(--xls-row-select-b);
  outline-offset:-1px;
}
table.excel-table td.num{ text-align:right; font-family:"Consolas","Courier New",monospace; }
table.excel-table td.center{ text-align:center; }

.badge-status{
  display:inline-block;
  font-size: 11px;
  font-weight:700;
  padding: 1px 8px;
  border: 1px solid rgba(0,0,0,.25);
}
.badge-status.ok{ background:#DDF3E4; color:#1E6B3A; }
.badge-status.warn{ background:#FBEFCB; color:#8A6402; }
.badge-status.danger{ background:#F8DADA; color:#8C2A2A; }

/* =========================================================
   ฟอร์ม Input สไตล์ VB.NET (กรอบเว้า/นูน)
   ========================================================= */
.form-label-win{
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 3px;
  display:block;
}
.form-label-win .req{ color: var(--danger); margin-left:2px; }

.form-control-win,
.form-select-win,
textarea.form-control-win{
  font-family: var(--font-ui);
  font-size: 12.5px;
  background: #fff;
  border-top: 1px solid var(--win-border-dk);
  border-left: 1px solid var(--win-border-dk);
  border-right: 1px solid var(--win-border-lt);
  border-bottom: 1px solid var(--win-border-lt);
  border-radius: 0;
  padding: 5px 8px;
  width: 100%;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,.15);
}
.form-control-win:focus,
.form-select-win:focus{
  outline: 1px solid var(--win-titlebar-1);
  outline-offset: 0;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,.15), 0 0 0 2px #CFE2F5;
}
.form-control-win:disabled{ background: var(--win-face-dark); color:#888; }

.form-select-win{ appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0L5 6L10 0Z' fill='%23333'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position: right 10px center;
  padding-right: 26px;
}

.input-group-win{ display:flex; }
.input-group-win .form-control-win{ flex:1; }
.input-group-win .btn-win{ border-left: 0; }

/* Checkbox / Radio สไตล์คลาสสิก */
.form-check-win{ display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.form-check-win input[type="checkbox"],
.form-check-win input[type="radio"]{
  width:15px; height:15px; accent-color: var(--win-titlebar-1);
}
.form-check-win label{ font-size:12.5px; }

fieldset.groupbox legend{ display:none; }

/* Tabs สไตล์ VB.NET TabControl */
.win-tabs{ display:flex; border-bottom: 1px solid var(--win-border-dk); margin-bottom:14px; }
.win-tabs .tab-item{
  padding: 6px 16px;
  font-size:12.5px;
  border: 1px solid var(--win-border-dk);
  border-bottom: none;
  background: var(--win-face-dark);
  margin-right: 3px;
  position:relative; top:1px;
  cursor:default;
}
.win-tabs .tab-item.active{
  background: var(--win-face);
  border-bottom: 1px solid var(--win-face);
  font-weight:700;
}

/* Progress bar สไตล์ Win32 (บล็อกๆ) */
.progress-win{
  height: 18px;
  background:#fff;
  border-top:1px solid var(--win-border-dk);
  border-left:1px solid var(--win-border-dk);
  border-right:1px solid var(--win-border-lt);
  border-bottom:1px solid var(--win-border-lt);
  padding:2px;
}
.progress-win .bar{
  height:100%;
  background-image: repeating-linear-gradient(90deg, var(--xls-header) 0 8px, #1c4f34 8px 9px);
}

/* Scrollbar เล็กน้อยให้ดูคลาสสิกขึ้น */
.excel-table-wrap::-webkit-scrollbar{ height:14px; width:14px; }
.excel-table-wrap::-webkit-scrollbar-track{ background:var(--win-face-dark); }
.excel-table-wrap::-webkit-scrollbar-thumb{ background:var(--win-face); border:1px solid var(--win-border-dk); }

@media (max-width: 900px){
  .app-sidebar{ display:none; }
}