/* =====================================================================
   admin-refresh.css  —  ปรับ UI หน้าหลังบ้าน (/cms) ให้สะอาด เป็นระเบียบ ขึ้น
   ---------------------------------------------------------------------
   หลักการ:
   - โหลด "หลัง" styles.css เสมอ (ดู public/index.html) เพื่อให้ทับค่าธีมเดิมได้
   - ทุกกฎสโคปใต้ .layout-wrap (กล่อง wrapper เฉพาะหลังบ้านใน App.vue)
     => เว็บสาธารณะไม่ได้รับผลกระทบใด ๆ
   - ใช้ CI เดิมของ มทร.พระนคร: ม่วง #652D91 (เข้ม #400f66, รอง #8e5bb5)
     แดง accent #e93e3e / น้ำเงินเข้ม #161e2d / เทาเส้น #e4e4e4 / ฟอนต์ Kanit
   - เป็นการ "เพิ่ม" ล้วน ๆ ไม่แตะ markup เดิม -> ย้อนกลับได้ด้วยการลบ <link> นี้
   ===================================================================== */

/* ---------- ตัวแปรสี (ใช้ภายในไฟล์นี้) ---------- */
.layout-wrap {
  --brand: #652D91;
  --brand-dark: #400f66;
  --brand-2: #8e5bb5;
  --brand-tint: #f3eef9;
  --brand-tint-2: #ece1f5;
  --accent: #e93e3e;
  --ink: #161e2d;
  --muted: #5c6368;
  --faint: #a3abb0;
  --line: #e8e6ef;
  --page: #f5f3f9;
  --card-shadow: 0 4px 16px rgba(22, 13, 38, 0.06);
  --card-shadow-hover: 0 10px 28px rgba(101, 45, 145, 0.12);
}

/* =====================================================================
   1) พื้นหลังหน้า + โครงรวม  ให้การ์ดสีขาวเด่นและดูสะอาดขึ้น
   ===================================================================== */
.layout-wrap .main-content {
  background: var(--page);
  min-height: 100vh;
}
.layout-wrap .main-content-inner {
  padding: 36px 40px 40px;
}
@media (max-width: 991px) {
  .layout-wrap .main-content-inner { padding: 24px 16px 32px; }
}

/* =====================================================================
   2) การ์ด widget-box-2  — เงานุ่มขึ้น เส้นขอบบาง ๆ ระยะหายใจดีขึ้น
   ===================================================================== */
.layout-wrap .widget-box-2 {
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: var(--card-shadow);
  transition: box-shadow .25s ease, transform .25s ease;
}
.layout-wrap .widget-box-2.mb-20 { margin-bottom: 24px; }
.layout-wrap .widget-box-2 .title {
  font-weight: 600;
  color: var(--ink);
  position: relative;
  padding-left: 14px;
}
/* แถบม่วงเล็ก ๆ หน้าหัวข้อการ์ด = identity ที่ชัดขึ้นแต่ไม่ฉูดฉาด */
.layout-wrap .widget-box-2 .title::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 1.05em;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
}

/* หัวข้อ section ที่ธีมไม่เคยนิยาม (.title-custom) ใช้ทั่วฟอร์มหลังบ้าน */
.layout-wrap .title-custom {
  font-family: 'kanit', sans-serif;
  font-size: 20px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.layout-wrap h6.title-custom { font-size: 16px; }

/* =====================================================================
   3) Sidebar  — เมนูแอคทีฟ/โฮเวอร์ดูเนียนขึ้น มีมุมโค้ง
   ===================================================================== */
.layout-wrap .sidebar-menu-dashboard {
  background: linear-gradient(185deg, #1d1030 0%, #170B22 60%);
}
.layout-wrap .sidebar-menu-dashboard .box-menu-dashboard { padding: 0 14px; }
/* "Menu" ให้ขนาดเท่า "Profile" (เดิม .title ตัวใหญ่กว่า) */
.layout-wrap .sidebar-menu-dashboard .menu-box .title {
  padding-left: 16px;
  font-size: 14px;
  line-height: 19.6px;
  font-weight: 600;
}
.layout-wrap .sidebar-menu-dashboard .box-menu-dashboard .nav-menu-link {
  padding: 11px 16px;
  border-radius: 12px;
  font-weight: 500;
  transition: background-color .2s ease, color .2s ease;
}
.layout-wrap .sidebar-menu-dashboard .box-menu-dashboard .nav-menu-item:hover .nav-menu-link {
  background-color: rgba(142, 91, 181, 0.22);
}
.layout-wrap .sidebar-menu-dashboard .box-menu-dashboard .nav-menu-item.active .nav-menu-link,
.layout-wrap .sidebar-menu-dashboard .box-menu-dashboard .nav-menu-link.router-link-active {
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  box-shadow: 0 6px 16px rgba(101, 45, 145, 0.45);
}
.layout-wrap .sidebar-menu-dashboard .box-menu-dashboard .nav-menu-link.router-link-active svg g { opacity: 1; }
.layout-wrap .sidebar-menu-dashboard .logo-box { padding: 26px 24px; }

/* =====================================================================
   4) Header bar หลังบ้าน
   ===================================================================== */
.layout-wrap .header-dashboard {
  box-shadow: 0 2px 14px rgba(22, 13, 38, 0.06);
  border-bottom: 1px solid var(--line);
}
/* เมนูบนหลังบ้าน: ธีมตั้งระยะห่าง 65px/รายการ ทำให้เมนู 6 อัน "ตก" บรรทัดล่าง
   ที่จอ ~1280–1440px -> บีบระยะให้พอดีหนึ่งบรรทัด และกันไม่ให้ wrap */
.layout-wrap .header-dashboard .navigation { white-space: nowrap; }
.layout-wrap .header-dashboard .navigation > li { padding-right: 26px; }
@media (max-width: 1440px) {
  .layout-wrap .header-dashboard .navigation > li { padding-right: 18px; }
  .layout-wrap .header-dashboard .navigation > li > a { font-size: 15px; }
}
.layout-wrap .header-dashboard .box-avatar img,
.layout-wrap .header-account .box-avatar img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 50%;
}

/* =====================================================================
   5) การ์ดตัวเลขสรุป (dashboard counters)  — ไอคอนวงกลมโทนแบรนด์
   ===================================================================== */
.layout-wrap .flat-counter-v2 .counter-box {
  border: 1px solid var(--line);
  box-shadow: var(--card-shadow);
  border-radius: 18px;
  padding: 22px;
  transition: box-shadow .25s ease, transform .25s ease;
}
.layout-wrap .flat-counter-v2 .counter-box:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-2px);
}
.layout-wrap .flat-counter-v2 .counter-box .box-icon {
  width: 64px;
  height: 64px;
  border: none;
  background: var(--brand-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}
.layout-wrap .flat-counter-v2 .counter-box .box-icon .icon { color: var(--brand); }
.layout-wrap .flat-counter-v2 .counter-box .title-count { color: var(--muted); }

/* =====================================================================
   6) ปุ่ม  — นิยาม .primary-new (ธีมลืมใส่!) ให้เป็นปุ่มม่วงหลัก
   ===================================================================== */
.layout-wrap .tf-btn {
  border-radius: 12px;          /* จากแคปซูลกลม -> โค้งพอดี ดูร่วมสมัยและเป็นระเบียบ */
  min-height: 46px;
  min-width: auto;
  padding: 10px 22px;
  font-weight: 600;
  white-space: nowrap;          /* กันปุ่ม "ตก"/ตัดบรรทัดเมื่อจอแคบ */
  flex-shrink: 0;               /* กันถูกบีบจนข้อความล้นใน flex row (เช่น header) */
}
.layout-wrap .tf-btn .icon,
.layout-wrap .tf-btn svg { flex-shrink: 0; }

/* ปุ่มหลัก (ถูกใช้ทั่วระบบแต่ไม่เคยมีสไตล์) */
.layout-wrap .tf-btn.primary-new {
  background: linear-gradient(92deg, var(--brand), #7a3aac);
  color: #ffffff;
  border: 1px solid transparent;
  box-shadow: 0 6px 16px rgba(101, 45, 145, 0.25);
}
.layout-wrap .tf-btn.primary-new:hover {
  background: linear-gradient(92deg, var(--brand-dark), var(--brand));
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(101, 45, 145, 0.35);
  transform: translateY(-1px);
}
.layout-wrap .tf-btn.primary-new svg path[stroke="white"] { stroke: #ffffff; }

/* ปุ่มเส้น (รอง) — บางลงจาก 3px ให้ดูประณีต */
.layout-wrap .tf-btn.btn-line {
  border-width: 1.5px;
  color: var(--brand);
}
.layout-wrap .tf-btn.btn-line:hover {
  background: var(--brand);
  color: #ffffff;
}
.layout-wrap .tf-btn.btn-line:hover svg path { stroke: #ffffff; }

/* แถวปุ่มท้ายฟอร์ม ให้เว้นระยะบนและจัดเรียงสม่ำเสมอ */
.layout-wrap .box-btn {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* =====================================================================
   7) ฟอร์ม native (label / .form-control / fieldset)
   ===================================================================== */
.layout-wrap .box-fieldset,
.layout-wrap .box-info-property .box-fieldset { margin-bottom: 20px; }
.layout-wrap label {
  display: inline-block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--ink);
}
.layout-wrap label span { color: var(--accent); }
.layout-wrap .form-control {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 15px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.layout-wrap .form-control:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(101, 45, 145, 0.12);
}

/* =====================================================================
   8) ฟอร์ม Vuetify — ทำให้กล่อง input เป็นทรงเส้นขอบเข้าธีม
      (ครอบเฉพาะ v-text-field/-select/-autocomplete/-combobox/-textarea
       ซึ่งทุกตัวมีคลาส .v-text-field; ไม่โดน radio/checkbox)
   ===================================================================== */
.layout-wrap .v-text-field:not(.v-text-field--outlined):not(.v-text-field--solo)
  > .v-input__control > .v-input__slot {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
  padding: 0 14px;
  min-height: 48px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
/* เอาเส้นใต้ Material ออก */
.layout-wrap .v-text-field > .v-input__control > .v-input__slot::before,
.layout-wrap .v-text-field > .v-input__control > .v-input__slot::after {
  display: none !important;
}
/* โฟกัส = ขอบม่วง */
.layout-wrap .v-text-field.v-input--is-focused:not(.v-text-field--outlined)
  > .v-input__control > .v-input__slot {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(101, 45, 145, 0.12);
}
/* textarea เผื่อพื้นที่ */
.layout-wrap .v-textarea:not(.v-text-field--outlined)
  > .v-input__control > .v-input__slot {
  min-height: auto;
  padding: 10px 14px;
}
/* ระยะใต้ field ให้กระชับ */
.layout-wrap .v-text-field .v-text-field__details { margin-top: 4px; margin-bottom: 0; }
.layout-wrap .v-text-field.v-input--is-disabled > .v-input__control > .v-input__slot {
  background: #f4f4f7;
}
/* combobox/select: ลูกศรและ chip ให้พอดีความสูง + ปิดกล่องในของ .v-select__slot
   (เดิมมีขอบ/แคปซูลซ้อนกับ .v-input__slot -> dropdown เป็นกล่องในกล่อง) */
.layout-wrap .v-select__slot,
.layout-wrap .v-autocomplete .v-select__slot {
  min-height: 44px;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* แก้ "กล่องซ้อนกล่อง": ฟอร์มเพิ่ม/แก้ผลงานใส่ class .form-control ไว้บน v-text-field
   ทำให้เกิดกล่องนอก (จาก .form-control) + แคปซูลข้างใน (จาก input[type=text] ของธีม)
   ซ้อนกับกล่องจริง (.v-input__slot) -> ให้เหลือกล่องเดียวคือ .v-input__slot */
.layout-wrap .v-input.form-control {
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.layout-wrap .v-text-field .v-input__slot input,
.layout-wrap .v-text-field .v-input__slot textarea {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
}

/* =====================================================================
   9) ตาราง
   ---------------------------------------------------------------------
   9a) ตาราง native ของธีม (.wrap-table) — เพิ่ม hover แถว + หัวโค้ง
   ===================================================================== */
.layout-wrap .wrap-table table tbody tr { transition: background-color .15s ease; }
.layout-wrap .wrap-table table tbody tr:hover { background-color: var(--brand-tint); }
.layout-wrap .wrap-table table tbody td { vertical-align: middle; }

/* 9b) ตาราง Vuetify (v-simple-table) ให้เข้าธีมเดียวกัน */
.layout-wrap .v-data-table,
.layout-wrap .v-simple-table {
  background: transparent;
  border-radius: 12px;
}
.layout-wrap .v-data-table > .v-data-table__wrapper > table > thead > tr > th {
  background: #f3f1f7;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  height: 46px;
  border-bottom: 1px solid var(--line) !important;
}
.layout-wrap .v-data-table > .v-data-table__wrapper > table > tbody > tr > td {
  font-size: 14px;
  color: #2b2b2f;
  border-bottom: 1px solid var(--line) !important;
}
.layout-wrap .v-data-table > .v-data-table__wrapper > table > tbody > tr:hover {
  background-color: var(--brand-tint) !important;
}

/* =====================================================================
   10) รูปภาพในรายการ + อวตาร  (ปัญหาหลักที่ผู้ใช้แจ้ง: "รูปใหญ่ไม่เป็นระเบียบ")
   ===================================================================== */

/* 10a) thumbnail ในตารางรายการทุกหน้า (ผลงาน/ข่าว/ผู้ดูแล/นักวิจัย)
        เดิม .images กว้าง 168px และ <img> ไม่คุมความสูง -> แถวสูงไม่เท่ากัน
        ทำให้เป็นสี่เหลี่ยมมุมมนขนาดเท่ากันทุกแถว */
.layout-wrap .wrap-table .listing-box { gap: 16px; align-items: center; }
.layout-wrap .wrap-table .listing-box .images {
  width: 72px;
  height: 72px;
  min-width: 72px;
  border-radius: 12px;
  overflow: hidden;
  background: #f1eef6;
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.layout-wrap .wrap-table .listing-box .images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 10b) อวตารในตาราง "ทำเนียบนักวิจัย" (.avatar-img — ธีมไม่เคยนิยาม) -> วงกลม */
.layout-wrap .avatar-img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: #f1eef6;
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.layout-wrap .avatar-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 10c) อวตารในหน้าดู/แก้ไขบัญชี-นักวิจัย (.profile — ธีมไม่เคยนิยาม) -> วงกลม */
.layout-wrap .profile {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  background: #f1eef6;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.layout-wrap .profile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 10d) อวตาร header profile-head (MyPortfolio ใช้ .avatar 72px อยู่แล้ว เสริมกันเพี้ยน) */
.layout-wrap .profile-head .avatar img,
.layout-wrap .profile-head img.avatar {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 50%;
}

/* =====================================================================
   11) Pagination — สีแอคทีฟให้ตรงแบรนด์ (เดิม #756DBF) + มุมมน
   ===================================================================== */
.layout-wrap .wd-navigation .nav-item {
  border-radius: 10px;
  border-color: var(--line);
  transition: all .2s ease;
}
.layout-wrap .wd-navigation .nav-item:hover,
.layout-wrap .wd-navigation .nav-item.active {
  background-color: var(--brand);
  border-color: var(--brand);
  color: #ffffff;
}

/* =====================================================================
   12) โซนอัปโหลด + แกลเลอรีพรีวิว  (ธีมไม่เคยนิยามคลาสกลุ่มนี้เลย)
       ปรากฏในหน้าเพิ่ม/แก้ไข ผลงาน และ ข่าวสาร
   ===================================================================== */
.layout-wrap .container-upload,
.layout-wrap .upload-files-container { width: 100%; }

.layout-wrap .drag-file-area {
  border: 2px dashed #c9b8de;
  border-radius: 14px;
  background: #faf8fd;
  padding: 28px 20px;
  text-align: center;
  transition: border-color .2s ease, background-color .2s ease;
}
.layout-wrap .drag-file-area:hover {
  border-color: var(--brand);
  background: var(--brand-tint);
}
.layout-wrap .drag-file-area img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  opacity: .85;
  margin-bottom: 8px;
}
.layout-wrap .drag-file-area .dynamic-message,
.layout-wrap .drag-file-area p { color: var(--muted); margin: 4px 0; }
.layout-wrap .browse-files { display: inline-block; margin-top: 6px; }
.layout-wrap .browse-files .default-file-input { cursor: pointer; }

/* แกลเลอรีรูปพรีวิว: thumbnail ขนาดคงที่เท่ากัน + ปุ่มลบลอยมุมขวาบน */
.layout-wrap .gallery-container {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 16px;
}
.layout-wrap .gallery-item {
  position: relative;
  display: inline-block;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #f7f7f9;
  line-height: 0;
}
.layout-wrap .gallery-item img {
  width: 132px;
  height: 132px;
  object-fit: cover;
  display: block;
}
.layout-wrap .gallery-item video {
  max-width: 220px;
  max-height: 140px;
  border-radius: 12px;
  display: block;
}
.layout-wrap .gallery-item .delete-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(233, 62, 62, 0.92);
  color: #ffffff;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: background-color .2s ease, transform .15s ease;
}
.layout-wrap .gallery-item .delete-btn:hover {
  background: var(--accent);
  transform: scale(1.08);
}

/* รายการไฟล์เอกสารแนบ */
.layout-wrap .doc-list { list-style: none; padding: 0; margin: 12px 0 0; }
.layout-wrap .doc-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fafafc;
}
.layout-wrap .doc-list li:not(:last-child) { margin-bottom: 8px; }
.layout-wrap .doc-remove { color: var(--accent); font-weight: 600; cursor: pointer; }

/* =====================================================================
   13) ตัวช่วยเล็ก ๆ ที่ธีมไม่ได้นิยาม
   ===================================================================== */
.layout-wrap .head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.layout-wrap .search-container {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
/* ช่องค้นหาให้ยืดเต็มที่เหลือ (ไม่ใช่ 100% จาก .form-control) เพื่อให้ปุ่มอยู่บรรทัดเดียวกัน ไม่ตก */
.layout-wrap .search-container > .form-control,
.layout-wrap .search-container > input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
.layout-wrap .search-container > .tf-btn {
  flex-shrink: 0;
}
/* แถวปุ่มจัดการมุมขวาบนของตาราง ไม่ให้ปุ่มเบียดกัน */
.layout-wrap .flat-bt-top { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }

/* แถบสถานะ (status pill) เผื่อกรณีอยู่นอก .status-wrap (เช่น MyPortfolio) */
.layout-wrap .btn-status {
  display: inline-block;
  min-width: 96px;
  padding: 2px 12px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 22px;
  font-weight: 700;
  color: #ffffff;
  background-color: #25c55b;
  text-align: center;
}
/* ป้ายสถานะในตาราง: ธีมเดิมตรึง width 130px ทำให้ข้อความไทยยาวล้น
   -> ปล่อยให้กว้างตามเนื้อหา ไม่ตัดบรรทัด */
.layout-wrap .wrap-table .status-wrap .btn-status {
  width: auto;
  min-width: auto;
  height: auto;
  padding: 3px 14px;
  line-height: 20px;
  white-space: nowrap;
}

/* =====================================================================
   14) Dialog / โมดัล ที่ render นอก .layout-wrap (Vuetify ย้ายไป body)
       => ห้ามสโคปใต้ .layout-wrap. ใช้คลาสเฉพาะที่ไม่ชนเว็บสาธารณะ
   ===================================================================== */
.research_profile {
  width: 150px !important;
  height: 150px !important;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #f1eef6;
}

/* =====================================================================
   15) เก็บงานความสม่ำเสมอเล็กน้อย
   ===================================================================== */
.layout-wrap .text-btn.text-primary { color: var(--brand); }
.layout-wrap .note { line-height: 1.6; }