/*
#F2F6EF
#DBE6D1
#BED1AB
#ADC596
#96B578
#80A45B
#69874A
#52693A
#3B4C2A
#242E19
#0D1009
*/

:root {
/* Primary — Honeycomb */
  --primary-900: rgb(229, 166, 87);
  --primary-700: rgb(214, 146, 62);
  --primary-100: rgb(247, 231, 206);

  /* Accent — Hot Paprika (highlight only, never a large fill) */
  --accent: #B53324;
  --accent-tint: #F6E0DA;

  /* Neutrals */
  --bg: #FBF5EB;
  --surface: #FFFFFF;
  --ink-900: #4A2416;
  --ink-600: rgb(122, 95, 76);
  --ink-300: #C9B8A5;
  --border-subtle: #EFE3D2;

	--background:#FBF5EB;
	--text-primary:#4A2416;
	--text-secondary:#7A5F4C;
	--border:#EFE3D2;
	--white:#FFFFFF;
	--paper:#F7E7CE;
	--success-text:#2E7D5B;
	--success-bg:#DCEEE2;
	--error-text:#C81616;
	--error-bg:#F7DADA;
	--warning-text:#C4892E;
	--warning-bg:#F3E3C9;
	--information-text:#577599;
	--information-bg:#F1F3F7; 
	--disabled-text:#B0AEAD;
	--disabled-bg:#E5E3E1;
	--grey: #B6B6B6;
	--ink-soft:#C9B8A5;

	--sidebar:#fff;
	--card:#fff;
	--ink:#2c2a24;

	--line:#d9d1c4;
	--shadow:0 2px 12px rgba(0,0,0,.06);
	--radius:12px;


  /* Spacing (4px base unit) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.06);

  /* Motion */
  --transition-fast: 120ms ease;
}

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@100;200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
@import url(https://heroicons.com/);

*{box-sizing:border-box;margin:0;padding:0;}
  body{font-family:'Roboto','IBM Plex Sans Thai',sans-serif;background:var(--background);color:var(--text-primary);display:flex;min-height:100vh;}

  /* ===== SIDEBAR ===== */
  .sidebar{
    width:212px;
    background:var(--surface);
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    margin-top: 60px;
    height: -webkit-fill-available;
  }

  .nav-item{
    font-family:'Roboto','IBM Plex Sans Thai',sans-serif;
    padding:12px 20px;
    font-size:14px;
    font-weight:400;
    color:var(--ink-600);
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:10px;
    border-radius:8px;
    margin: 2px 4px;
  }
  .nav-item:hover{
    background: rgb(229, 166, 87,0.35);
    color:var(--ink-900);
    border-radius:8px;
    margin: 2px 4px;
  }
  .nav-item.active {
    background: rgb(229, 166, 87) !important ;
    color:var(--white);
    font-weight:500;
    border-radius:8px;
    margin: 2px 4px;
  }

  .nav-icon{width:24px;height:24px;flex-shrink:0;}
  @media(max-width:768px){.sidebar{display:none;}}

  /* ปุ่ม ADMIN MODE / DESIGNER MODE ล่างสุดของ sidebar (header.php › jdl_mode_btn_html) — จอเล็กไม่มี sidebar ใช้ปุ่มบนแถบด้านบน */
  .nav-mode{margin-top:auto;position:sticky;bottom:0;padding:12px 16px 16px;background:var(--surface);border-top:1px solid var(--line, #EFE3D2);}
  .nav-mode-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:10px 12px;border-radius:8px;
    border:1px solid var(--ink-600, #7A5F4C);color:var(--ink-600, #7A5F4C) !important;font-size:12.5px;font-weight:600;letter-spacing:.5px;text-decoration:none;
    font-family:'Roboto','IBM Plex Sans Thai',sans-serif;transition:background .12s ease,color .12s ease;}
  .nav-mode-btn:hover{background:var(--ink-600, #7A5F4C);color:#fff !important;}
  @media(min-width:769px){.jdl-mode-hdr{display:none !important;}}

  .nav-section-title{
    padding:16px 20px 6px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.6px;
    text-transform:uppercase;
    color:var(--ink-soft);
  }

  .tab {
    background-color: transparent;
    border-radius: 20px 20px 0px 0px;
  }
  .tab-bar {
    background-color: transparent;
    padding: 20px 16px;
    border: 0;
    min-width: 120px;
  }

  .tab .tab-bar:active {
    border-bottom: 2px solid var(--honeycomb);
    background-color: var(--surface);
  }

  /* 1. สถานะปกติ: ซ่อนไอคอน Hover แสดงไอคอน Normal */
.icon-hover { 
  display: none !important; 
}
.icon-normal { 
  display: inline; 
}

/* 2. สถานะ Hover หรือ Active: สลับเอาไอคอน Hover ขึ้นมาแทน */
.nav-item:hover .icon-normal,
.nav-item.active .icon-normal { 
  display: none !important; 
}

.nav-item:hover .icon-hover,
.nav-item.active .icon-hover {
  display: inline !important;
}

  /* ===== SUBMENU ===== */
  .nav-chevron{
    margin-left:auto;
    width:16px;
    height:16px;
    flex-shrink:0;
    transition:transform .2s ease;
  }
  .nav-item.open .nav-chevron{
    transform:rotate(180deg);
  }
  .nav-submenu{
    max-height:0;
    overflow:hidden;
    transition:max-height .3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .nav-submenu.open{
    max-height:1000px;
  }

  .sub-item{
    padding:10px 20px 10px 54px;
    font-size:14px;
    color:var(--ink-600);
    cursor:pointer;
    border-radius:8px;
    margin:2px 4px;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .sub-icon{
    width:24px;
    height:24px;
    flex-shrink:0;
  }
  .sub-item:hover{
    background:rgb(229, 166, 87,0.35);
    color:var(--ink-900);
  }
  .sub-item.active{
	background:rgb(229, 166, 87,0.6);
    color:var(--ink-600);
    font-weight:500;
  }
  .sub-item .nav-chevron{
    margin-left:auto;
  }
  .sub-item.open .nav-chevron{
    transform:rotate(180deg);
  }
  .nav-submenu.nested .sub-item{
    padding-left:54px;
    font-size:13px;
  }

  /* เมนูที่ยังไม่เปิดใช้งาน: ตัวหนังสือ/ไอคอนสีเทา กดไม่ได้ ไม่มีไฮไลต์ตอน hover */
  .nav-item.disabled,
  .sub-item.disabled{
    color:var(--disabled-text);
    cursor:not-allowed;
  }
  .nav-item.disabled:hover,
  .sub-item.disabled:hover{
    background:none;
    color:var(--disabled-text);
  }
  .nav-item.disabled:hover .icon-normal{ display:inline !important; }
  .nav-item.disabled:hover .icon-hover{ display:none !important; }

  /* ===== MAIN ===== */
  .main {
    flex:1;
    padding:20px 30px;
    background:var(--background);
    min-height:calc(100vh - 60px);
    margin-top: 60px;
    margin-left: 212px;
  }
  @media(max-width:768px){.main{padding:16px;}}

  

  /* Page title */
  .page-title{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:20px;font-weight:700;margin-bottom:32px;line-height:1.3;
    color:var(--text-primary);
    text-transform:uppercase;
  }
  .page-title::before{
    content:'';
    display:block;
    width:10px;
    height:38px;
    flex-shrink:0;
    background:linear-gradient(to right,
      var(--accent) 0 50%,
      var(--primary-900) 50% 50%
    );
  }

  /* Step question */
  .step-question{
    text-align:center;font-size:18px;font-weight:600;margin-bottom:28px;
  }

  /* Big option cards */
  .card-grid{
    display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
    max-width:680px;margin:0 auto 36px;
  }
  .card-grid-3{
    display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
    max-width:840px;margin:0 auto 36px;
  }
  @media(max-width:560px){.card-grid{grid-template-columns:1fr;}}
  .card {
    background:var(--background);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow);
    padding:24px 24px;
    text-align:center;
    cursor:pointer;
    border:2px solid transparent;
    transition:.15s;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
  .card:hover {
    border-color:var(--border-subtle);
    background:var(--white);
    box-shadow:0 4px 20px rgba(0,0,0,.1);
  }
  .card.selected {
    border-color:var(--primary-900);
    background:var(--white);
    box-shadow:0 4px 20px rgba(0,0,0,.1);
  }
  .card .card-title {
    font-size:16px;
    font-weight:500;
    color:var(--text-primary);
    margin-top: 10px;
  }
  .card .card-sub{font-size:12px;color:var(--ink-600);margin-top:4px;}

  /* Color/finishing cards */
  .color-grid{
    display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:36px;
  }
  .color-card{
    width:130px;background:var(--card);border-radius:var(--radius-xl);box-shadow:var(--shadow);
    overflow:hidden;cursor:pointer;border:2px solid transparent;transition:.15s;
  }
  .color-card:hover {
    border-color:var(--border-subtle);
    box-shadow:0 4px 20px rgba(0,0,0,.1);
  }
  .color-card.selected {
    border-color:var(--primary-900);
    box-shadow:0 4px 20px rgba(0,0,0,.1);
  }
  .color-swatch{width:100%;height:90px;}
  .color-info{padding:10px 8px;text-align:center;}
  .color-info .code{font-size:13px;font-weight:600;}
  .color-info .desc{font-size:10.5px;color:var(--ink-300);margin-top:2px;}

  /* Dropdown select */
  .select-row{display:flex;gap:16px;justify-content:center;margin-bottom:36px;flex-wrap:wrap;}
  .select-field{display:flex;flex-direction:column;gap:6px;align-items:center;border-radius:8px;}
  .select-field label{font-size:12px;color:var(--ink-soft);font-weight:600;}
  .select-field select{
    width:160px;padding:10px 12px;border:1.5px solid var(--line);border-radius:8px;
    font-family:'Roboto','IBM Plex Sans Thai',sans-serif;font-size:14px;background:var(--card);color:var(--ink);cursor:pointer;
  }
  .select-field select:hover{border-color:var(--green-soft);}

  /* Buttons */
  .btn-row {
    display:flex;
    justify-content:center;
    gap:12px;
    margin-top:8px;
    padding-bottom: 60px;
  }
  .btn{
    min-width:110px;
    padding:12px 16px;
    border-radius:8px;
    font-size:13px !important;
    font-weight:600 !important;   /* bootstrap.min.css โหลดทีหลังและตั้ง .btn = 400 → บังคับให้ทุกปุ่มหนาเท่ากัน (เท่าปุ่มในแถบเครื่องมือ) */
    cursor:pointer;
    font-family:'Roboto','IBM Plex Sans Thai',sans-serif !important;
    text-transform:uppercase;
    letter-spacing:.5px;
  }
  /* .btn-back{background:transparent;border:1.5px solid var(--line);color:var(--ink-soft);}
  .btn-back:hover{border-color:var(--ink-soft);} */
  /* .btn-next{background:var(--olive);border:1.5px solid var(--olive);color:#fff;}
  .btn-next:hover{background:var(--olive-dark);}
  .btn-next:disabled{opacity:.4;cursor:not-allowed;} */

  /* Result table */
  .result-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:8px;}
  .result-bar h2{font-size:16px;font-weight:700;}
  .toolbar-btns{display:flex;gap:8px;}
  .toolbar-btns button{
    font-size:11px;padding:7px 14px;border-radius:6px;border:1px solid var(--line);
    cursor:pointer;font-weight:600;color:var(--ink-soft);font-family:'Roboto','IBM Plex Sans Thai',sans-serif;
  }
  .toolbar-btns button.primary{background:var(--olive);border-color:var(--olive);color:#fff;}

  table{width:100%;border-collapse:collapse;background:var(--card);border-radius:10px;overflow:hidden;font-size:12.5px;margin-bottom:20px;box-shadow:var(--shadow);}
  th{background:#f0ece4;text-align:left;padding:10px 12px;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-soft);font-weight:600;}
  td{padding:10px 12px;border-top:1px solid #eae5dc;vertical-align:top; align-content: center;}
  tr.main-row td{font-weight:600;background:#faf8f4;}
  tr.sub-row td{color:var(--ink-600);}
  .num{text-align:right;font-feature-settings:'tnum';}
  .code-cell {
    font-weight:700;
    color:var(--ink-900);
  }
  .letter-cell {
    font-weight:700;
    color:var(--ink-900);
  }

  .grand-total{
    background:var(--accent-tint);color:var(--ink-900);border-radius:10px;padding:16px 20px;
    display:flex;justify-content:space-between;align-items:baseline;margin-bottom:20px;
  }
  .grand-total .l{font-size:13px;opacity:.85;}
  .grand-total .r{font-size:22px;font-weight:700;}

  .source-note{
    background:#f4f6ee;border:1px solid var(--olive);border-radius:8px;padding:9px 14px;
    font-size:11px;color:var(--olive-dark);margin-bottom:24px;text-align:center;
  }

  /* HW set picker */
  .hw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:10px;max-width:840px;margin:0 auto 24px;}
  .hw-card {
    background:var(--surface);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow);
    padding:18px 12px;
    text-align:center;
    cursor:pointer;
    border:2px solid transparent;
  }
  .hw-card:hover {
    border-color:var(--border-subtle);
    background:var(--white);
    box-shadow:0 4px 20px rgba(0,0,0,.1);
  }
  .hw-card.selected {
    border-color:var(--primary-900);
    background:var(--white);
    box-shadow:0 4px 20px rgba(0,0,0,.1);
  }
  .hw-card .hw-name{font-size:12px;font-weight:500;}
  .hw-card .hw-price{font-size:16px;color:var(--accent);font-weight:700;margin-top:4px;}

  /* Frameless width cards */
  .width-grid{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:36px;}
  .width-card{
    background:var(--card);border-radius:10px;box-shadow:var(--shadow);
    padding:18px 22px;text-align:center;cursor:pointer;border:2px solid transparent;
    font-size:14px;font-weight:600;
  }
  .width-card:hover{border-color:var(--olive);}
  .width-card.selected{border-color:var(--olive);background:#f4f6ee;}





h1 {
	font-family:'Roboto','IBM Plex Sans Thai',sans-serif;
	font-size: 32px;
	font-weight: 500;
	text-transform: capitalize;
}

h2 {
	font-family:'Roboto','IBM Plex Sans Thai',sans-serif;
	font-size: 24px;
	font-weight: 500;
	text-transform: capitalize;
}

h3 {
	font-family:'Roboto','IBM Plex Sans Thai',sans-serif;
	font-size: 20px;
	font-weight: 500;
	text-transform: capitalize;
}

body {
	font-family:'Roboto','IBM Plex Sans Thai',sans-serif;
	font-size: 16px;
	background-color: var(--background) !important;
	color: var(--text-primary);
	margin-bottom: 80px !important;
}

caption {
	font-family:'Roboto','IBM Plex Sans Thai',sans-serif;
	font-size: 12px;
	font-weight: 400;
}

/* Breadcrumb */
  .breadcrumb {
	font-family:'Roboto','IBM Plex Sans Thai',sans-serif !important;
	font-size:12px;
	text-transform: capitalize;
	color:var(--ink-300);
	margin-bottom:16px;
	display:flex;
	align-items:center;
	gap:4px;
	flex-wrap:wrap;
}
  .breadcrumb .sep a {
	margin:0 2px;
	color:var(--ink-300) !important;
}
  .breadcrumb .active {
	font-family:'Roboto','IBM Plex Sans Thai',sans-serif !important;
	color:var(--primary);
	font-weight:600;
}
  .bc-icon {
	font-size:13px;
	width:18px;
	text-align:center;
	color:var(--ink-300);
  margin-right: 4px;
}

#breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px; /* เว้นระยะห่างระหว่างไอคอนและข้อความ */
  font-family:'Roboto','IBM Plex Sans Thai',sans-serif !important;
}

#breadcrumb span:not(.active):not(.sep) {
  color: var(--ink-300); /* สีเทาสำหรับ item ที่ไม่ใช่ตัวปัจจุบัน */
}

#breadcrumb .sep {
  display: inline-flex;
  align-items: center;
  color: var(--ink-300); /* สีเทาอ่อนสำหรับตัวคั่น */
}

#breadcrumb .active {
  font-weight: bold;
  color: var(--primary-700);
}

#breadcrumb .bc-icon {
  color: var(--ink-300); /* สีน้ำเงินสำหรับไอคอนโฟลเดอร์หลัก */
  margin-right: 4px;
}


a {
	color: var(--ink-300) !important;
	text-decoration: none !important;
}

a:hover {
	color: var(--ink-600) !important;
	text-decoration: none !important;
}

.nav-link {
	color: var(--secondary) !important;
}

.nav-link:hover {
	color: var(--dark-olive) !important;
}
.nav-link.active {
	color: var(--dark-olive) !important;
	background-color: #ffffff !important;
}

.tab-content {
	background-color: #ffffff !important;
}

.navbar {
	--bs-tertiary-bg-rgb: 255,255,255 !important;
}

.nav-bg {
	background-color: #fff !important;
	box-shadow: 3px 3px 10px 0px rgb(0 0 0 / 0.1) !important;
}

.navbar-toggler {
	border: none !important;
}

.menu-shadow {
	display: block;
	justify-content: center;
	border: 0 !important;
	box-shadow: 3px 3px 10px 0px rgb(0 0 0 / 0.1) !important;
	height: 270px !important;
    width: -webkit-fill-available;
    border-radius: 20px !important;
    font-weight: 500;
    font-size: 32px;
}

.menu-shadow:hover {
	display: block;
	border: 0 !important;
	box-shadow: 3px 3px 10px 0px rgb(0 0 0 / 0.1) !important;
	transition: 0.5s;
	height: 270px !important;
    width: -webkit-fill-available;
    border-radius: 20px !important;
}

.primary-text-color.active {
	color: #3C6D2B !important;
}

.btn-ghost {
	min-width: 110px !important;
	background-color: transparent !important;
	border: none !important;
	color: var(--accent) !important;
}
.btn-ghost:hover {
	background-color: transparent !important;
	color: var(--ink-600) !important;
	border: none !important;
}


.btn-secondary {
	min-width: 110px !important;
	background-color: var(--primary-900) !important;
  color: var(--white) !important;
	border: none !important;
}
.btn-secondary:hover {
	background-color: rgb(229, 166, 87, 0.8) !important;
	color: var(--white) !important;
	border: none !important;
}

.btn-secondary:disabled,
.btn-primary:disabled {
	color: var(--disabled-text) !important;
	background-color: var(--disabled-bg) !important;
	cursor:not-allowed;
}

.btn-secondary-2 {
  min-width: 110px !important;
  background-color: var(--ink-600) !important;
  border-color: none !important;
  color: var(--white) !important;
}

.btn-secondary-2:hover {
  background-color: var(--ink-900) !important;
  border-color: none !important;
  color: var(--white) !important;
}

.btn-primary {
	min-width: 110px !important;
	background-color: var(--accent) !important;
  color: var(--white) !important;
	border: none !important;
}
a.btn-primary {
	color: var(--white) !important;
	border: none !important;
}

.btn-primary:hover {
	background-color: var(--accent-tint) !important;
  color: var(--accent) !important;
	border: none !important;
}

.btn-outline-primary {
	min-width: 110px !important;
	background-color: transparent !important;
	border-color: var(--primary) !important;
	color: var(--primary) !important;
}

.btn-outline-primary:hover {
	background-color: var(--primary) !important;
	border-color: var(--primary) !important;
	color: var(--white) !important;
}

.btn-outline-secondary {
	min-width: 110px !important;
	background-color: transparent !important;
	border-color: var(--ink-600) !important;
	color: var(--ink-600) !important;
}

.btn-outline-secondary:hover {
	background-color: var(--ink-600) !important;
	border-color: var(--ink-600) !important;
	color: var(--white) !important;
}
/*.btn-outline-secondary:focus {
	min-width: 110px !important;
	background-color: transparent !important;
	border-color: var(--sage) !important;
}*/

.breadcrumb {
	font-size: 14px !important;
	font-weight: 400;
}

.breadcrumb-item.active {
	font-weight: 500;
	color: var(--primary) !important;
}

.breadcrumb-item.active a {
	font-weight: 500;
	color: var(--primary) !important;
}

.breadcrumb-item+.breadcrumb-item::before {
	color: var(--sage) !important;
}

.card:hover {
	background-color: var(--white) !important;
	color: var(--text-primary) !important;
}

.form-check input:checked {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

input[type="radio"]:focus {
  outline: 2px solid #EFE3D2; /* เปลี่ยนสีเส้นขอบเมื่อถูกโฟกัส */
  box-shadow: 0 0 5px rgba(255, 87, 34, 0.5); /* เพิ่มเงาให้ดูโดดเด่น */
}

.pagination {
    --bs-pagination-padding-x: 0.75rem;
    --bs-pagination-padding-y: 0.375rem;
    --bs-pagination-font-size: 1rem;
    --bs-pagination-color: var(--bs-link-color);
    --bs-pagination-bg: var(--bs-body-bg);
    --bs-pagination-border-width: var(--bs-border-width);
    --bs-pagination-border-color: var(--border) !important;
    --bs-pagination-border-radius: var(--bs-border-radius);
    --bs-pagination-hover-color: var(--success-text) !important;
    --bs-pagination-hover-bg: var(--success-bg) !important;
    --bs-pagination-hover-border-color: var(--border) !important;
    --bs-pagination-focus-color: var(--bs-link-hover-color);
    --bs-pagination-focus-bg: var(--light-sage);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --bs-pagination-active-color: #fff !important;
    --bs-pagination-active-bg: #8A9553 !important;
    --bs-pagination-active-border-color: #8A9553 !important;
    --bs-pagination-disabled-color: var(--text-disable);
    --bs-pagination-disabled-bg: var(--disable);
    --bs-pagination-disabled-border-color: var(--disable);
}

.active>.page-link, .page-link.active {
	border-color: #8A9553 !important;
}

.active>.page-link, .page-link.active:hover {
	color: #fff !important;
}

.text-white {
	color: var(--white) !important;
}


.text-secondary {
	color: var(--text-secondary) !important;
}

table {
	background-color: transparent !important;
}

/*.form-control:focus {
	border-color: var(--light-sage) !important;
}*/

input.form-control:focus {
  outline: 2px solid #EFE3D2 !important; /* เปลี่ยนสีเส้นขอบเมื่อถูกโฟกัส */
  box-shadow: 0 0 5px rgba(255, 87, 34, 0.5); /* เพิ่มเงาให้ดูโดดเด่น */
  border-color: var(--border-subtle) !important;
}

.active>.dropdown-item, .dropdown-item.active:hover {
	--bs-dropdown-link-active-bg: var(--accent-tint) !important;
  color: var(--accent) !important;
}

a>.dropdown-item, .dropdown-item {
  color: var(--text-primary) !important;
}

.dropdown-menu a.dropdown-item:selected {
	background-color: var(--accent-tint) !important;
}

.dropdown-menu a.dropdown-item:hover {
	background-color: var(--accent-tint) !important;
}

input.radio {
	width: 20px;
	height: 20px;
	margin: 4px;
}

input.radio:checked {
	width: 20px;
	height: 20px;
	margin: 4px;
}

input.radio:focus {
	background-color: var(--border-subtle) !important;
}

.card-radio {
	padding: 6px;
	border-radius: 10px !important;
}

.details {
	margin: 10px;
}

.btn-check:checked+.btn {
	background-color: var(--dark-olive) !important;
	border-color: var(--dark-olive) !important;
	color: var(--white) !important;

}

.accordion-button:not(.collapsed) {
    color: var(--success-text) !important;
    background-color: var(--success-bg) !important;
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}

.accordion-button:focus {
	outline: 0;
	border-color: transparent !important;
	box-shadow: none !important;
}

.link-file {
	font-size: 14px !important;
}

.sub-table {
	width: 60px;
}

.btn-link {
	min-width: 80px !important;
	color: var(--accent) !important;
	font-weight: 500 !important;
	text-decoration: none !important;
}

.btn-link:hover {
	min-width: 80px !important;
	color: var(--primary-900) !important;
	font-weight: 500 !important;
	text-decoration: none !important;
}

.row-checkbox {
	width: 20px !important;
	height: 20px !important;
}

input.row-checkbox:checked {
	background-color: var(--primary-100) !important;
}

a.disabled {
	color: var(--text-disable) !important;
}

/*[popover] {
  margin: initial;
  position: relative;
  left: 40%;
  top: 20%;
}*/
[popover] {
  margin: initial;
  position-area: right;
}
.popover-menu {
  list-style: none;
  border: none;
  box-shadow: 3px 3px 10px 0px rgb(0 0 0 / 0.1) !important;
  background-color: var(--background);
  margin: 10px;
  border-radius: 10px;
}
.popover-menu li {
  /*border-bottom: 1px solid var(--dark-olive);*/
  padding: 10px;
  display: block;
}
.popover-menu li:hover {
  /*border-bottom: 1px solid var(--dark-olive);*/
  padding: 10px;
  display: block;
  background-color: rgb(229, 166, 87,0.35) !important;
  border-radius: 50px;
}
.popover-menu a {
  
  display: block;
}
.popover-menu a:hover {
  
  padding: 0px;
  display: block;
  
}




  :root{
    --honeycomb:#E5A657;
    --paprika:#B53324;
    --ink:#4A2416;
    --bg:#FBF5EB;
    --surface:#FFFFFF;
    --line:#EADFCB;
    --line-strong:#D9C7A4;
    --muted:#8A7360;
    --text:#2A1B10;
    --font-display:'Fraunces', serif;
    --font-body:'Inter', sans-serif;
    --font-mono:'IBM Plex Mono', monospace;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    background:var(--bg);
    font-family:var(--font-body);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
  }

  /* ---------- header ---------- */
  header.top{
    background:var(--surface);
    border-bottom:1px solid var(--line);
    padding:20px 28px;
    display:flex;
    align-items:center;
    gap:24px;
    flex-wrap:wrap;
  }
  .brand{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:180px;
  }
  .brand .eyebrow{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .brand h1{
    font-family:var(--font-display);
    font-weight:600;
    font-size:22px;
    color:var(--ink);
  }
  .search-wrap{
    flex:1;
    min-width:220px;
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--bg);
    border:1px solid var(--line-strong);
    border-radius:999px;
    padding:10px 18px;
    margin-right: 8px;
  }
  .search-wrap svg{flex-shrink:0; opacity:.55;}
  .search-wrap input{
    border:none;
    background:none;
    outline:none;
    font-family:var(--font-mono);
    font-size:14px;
    color:var(--text);
    width:100%;
  }
  .search-wrap input::placeholder{color:var(--muted); font-family:var(--font-body);}
  .filetype-chips{display:flex; gap:8px;}
  .chip{
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:.03em;
    padding:8px 14px;
    border-radius:999px;
    border:1px solid var(--ink-600);
    background:var(--surface);
    color:var(--muted);
    cursor:pointer;
    transition:all .15s ease;
    user-select:none;
    align-items: center;
    display: flex;
    justify-content: center;
  }
  .chip.active{
    background:var(--honeycomb);
    border-color:var(--honeycomb);
    color:var(--ink);
    font-weight:600;
  }
  .chip:hover:not(.active){border-color:var(--ink-600); color:var(--white);background:var(--ink-600);}

  /* ---------- layout ---------- */
  .layout{
    display:flex;
    max-width:1400px;
    margin:0 auto;
  }

  /* ---------- sidebar ---------- */
  aside.rail{
    width:270px;
    flex-shrink:0;
    padding:24px 16px 40px;
    border-right:1px solid var(--line);
    min-height:calc(100vh - 77px);
  }
  .rail-label{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--muted);
    padding:0 12px 10px;
  }
  .cat-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:11px 12px;
    border-radius:10px;
    cursor:pointer;
    color:var(--text);
    font-size:14px;
    font-weight:500;
    border:1px solid transparent;
    margin-bottom:2px;
  }
  .cat-item .code-tag{
    font-family:var(--font-mono);
    font-size:11px;
    color:var(--muted);
    background:var(--bg);
    border:1px solid var(--line);
    padding:2px 7px;
    border-radius:5px;
  }
  .cat-item:hover{background:var(--bg);}
  .cat-item.active{
    background:var(--surface);
    border-color:var(--honeycomb);
    box-shadow:inset 3px 0 0 var(--honeycomb);
  }
  .cat-item.active .code-tag{
    background:var(--honeycomb);
    border-color:var(--honeycomb);
    color:var(--ink);
    font-weight:600;
  }
  .cat-note{
    margin:18px 12px 0;
    padding:12px;
    border:1px dashed var(--line-strong);
    border-radius:10px;
    font-size:12px;
    line-height:1.6;
    color:var(--muted);
  }
  .cat-note b{color:var(--ink);}

  /* ---------- main ---------- */
  main{flex:1; padding:28px 32px 60px; min-width:0;}

  .path-row{
    display:flex;
    align-items:baseline;
    gap:10px;
    margin-bottom:6px;
    flex-wrap:wrap;
  }
  .path-row h2{
    font-family:var(--font-display);
    font-size:26px;
    font-weight:600;
    color:var(--ink);
  }
  .path-row .count{
    font-family:var(--font-mono);
    font-size:13px;
    color:var(--muted);
  }
  .path-desc{font-size:13.5px; color:var(--muted); margin-bottom:20px; max-width:640px; line-height:1.6;}

  /* subtype tab strip (Joinery only) */
  .tabstrip{
    display:flex;
    gap:4px;
    overflow-x:auto;
    padding-bottom:10px;
    margin-bottom:18px;
    border-bottom:1px solid var(--line);
  }
  .tabstrip button{
    font-family:var(--font-body);
    font-size:13px;
    font-weight:500;
    white-space:nowrap;
    padding:9px 16px;
    border-radius:14px 14px 0 0;
    border:none;
    background:none;
    color:var(--muted);
    cursor:pointer;
    border-bottom:2px solid transparent;
    transition:all .15s ease;
  }
  .tabstrip button:hover{color:var(--text);}
  .tabstrip button.active{
    color:var(--ink);
    font-weight:600;
    border-bottom:2px solid var(--honeycomb);
    background:var(--surface);
  }

  /* item table */
  .item-grid{display:flex; flex-direction:column; gap:10px;}
  .item-row{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:14px;
    padding:14px 18px;
    display:grid;
    grid-template-columns:90px 1fr auto;
    align-items:center;
    gap:16px;
  }
  .item-code{
    font-family:var(--font-mono);
    font-size:14px;
    font-weight:600;
    color:var(--paprika);
    background:#FBEDEA;
    border-radius:8px;
    padding:6px 0;
    text-align:center;
  }
  .item-meta .item-name{font-size:14.5px; font-weight:600; color:var(--text);}
  .item-meta .item-sub{
    font-family:var(--font-mono);
    font-size:11.5px;
    color:var(--muted);
    margin-top:3px;
  }
  .file-actions{display:flex; gap:8px; flex-wrap:wrap;}
  a>.filebtn {
    color:var(--ink-900) !important;
  }
  .filebtn{
    display:flex;
    align-items:center;
    gap:6px;
    font-family:var(--font-mono);
    font-size:12px;
    font-weight:600;
    letter-spacing:.02em;
    padding:8px 14px;
    border-radius:999px;
    border:1px solid var(--honeycomb);
    background:var(--honeycomb);
    color:var(--ink-900);
    cursor:pointer;
    transition:transform .1s ease, filter .15s ease;
  }
  .filebtn:hover{filter:brightness(1.05); transform:translateY(-1px);}
  .filebtn:active{transform:translateY(0);}
  .filebtn.disabled{
    background-color:var(--disabled-bg);
    border-color:var(--disabled-bg);
    color:var(--disabled-text) !important;
    cursor:not-allowed;
  }
  .filebtn.disabled:hover{filter:none; transform:none;}
  .filebtn svg{flex-shrink:0;}

  .empty-state{
    text-align:center;
    padding:60px 20px;
    color:var(--muted);
  }
  .empty-state .icon{opacity:.4; margin-bottom:14px;}
  .empty-state h3{font-family:var(--font-display); color:var(--ink); font-size:18px; margin-bottom:6px; font-weight:600;}
  .empty-state p{font-size:13px; max-width:340px; margin:0 auto;}

  ::-webkit-scrollbar{height:6px;}
  ::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:10px;}

  @media (max-width: 860px){
    .layout{flex-direction:column;}
    aside.rail{width:100%; border-right:none; border-bottom:1px solid var(--line); min-height:auto;}
    .item-row{grid-template-columns:1fr; text-align:left;}
    .item-code{width:56px; text-align:center;}
  }


/* ===== Scrollbar แบบบาง (ทั้งเว็บ) ===== */
/* Chrome 121+ / Edge / Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #D9C7A4 transparent;   /* สีแท่ง / สีราง */
}

/* Safari และ Chrome รุ่นเก่า */
::-webkit-scrollbar {
  width: 6px;    /* scrollbar แนวตั้ง */
  height: 6px;   /* scrollbar แนวนอน (เช่น ตารางที่เลื่อนซ้าย-ขวา) */
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #D9C7A4;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #E5A657;   /* Honeycomb ตอนชี้ */
}