/* ============================================================================
   toolbar.css — Gebezy WMS · แถบทางลัดด้านล่าง
   วางที่  public/assets/css/toolbar.css
   ต้องโหลดหลัง g9s-theme.css (ใช้ตัวแปรสีร่วมกัน)
   ============================================================================ */

.custom-toolbar-wrapper{
  position:fixed;
  left:var(--sidebar-w, 236px);
  right:0;
  bottom:34px;                 /* เหนือ footer */
  z-index:900;
  background:rgba(11,20,32,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(210,162,76,.22);
  box-shadow:0 -12px 34px rgba(2,6,12,.32);
  transition:transform .28s cubic-bezier(.22,.9,.3,1);
}
.sidebar-collapse .custom-toolbar-wrapper{ left:50px; }
@media (max-width:767px){ .custom-toolbar-wrapper{ left:0; } }

/* ---------- แถวบน : แท็บ + ปุ่มย่อ ---------- */
.custom-toolbar-tabs-wrapper{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 14px;
  height:40px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.custom-toolbar-tabs{
  display:flex;
  align-items:center;
  gap:2px;
  list-style:none;
  margin:0;
  padding:0;
  min-width:0;
  overflow-x:auto;
  scrollbar-width:none;
}
.custom-toolbar-tabs::-webkit-scrollbar{ display:none; }

.custom-toolbar-tabs > li > a{
  display:block;
  padding:0 14px;
  height:40px;
  line-height:40px;
  white-space:nowrap;
  font-family:var(--font-d, "Prompt", sans-serif);
  font-size:13px;
  font-weight:500;
  color:rgba(236,238,242,.55);
  border-bottom:2px solid transparent;
  transition:color .16s ease, border-color .16s ease;
}
.custom-toolbar-tabs > li > a:hover{
  color:#fff;
  text-decoration:none;
}
.custom-toolbar-tabs > li.active > a{
  color:var(--gold-2, #ecca8a);
  border-bottom-color:var(--gold, #d2a24c);
}

/* ปุ่มย่อ/ขยาย */
.custom-toolbar-actions{ flex:none; }
.custom-toolbar-toggle-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:28px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:99px;
  background:rgba(255,255,255,.05);
  color:rgba(236,238,242,.6);
  font-family:var(--font-d, "Prompt", sans-serif);
  font-size:12px;
  cursor:pointer;
  transition:all .18s ease;
}
.custom-toolbar-toggle-btn:hover{
  border-color:var(--gold, #d2a24c);
  background:rgba(210,162,76,.12);
  color:var(--gold-2, #ecca8a);
}
.custom-toolbar-toggle-btn .toggle-icon{
  display:inline-flex;
  transition:transform .28s ease;
}
.custom-toolbar-toggle-btn .toggle-text-collapse{ display:none; }
.is-collapsed .custom-toolbar-toggle-btn .toggle-text-expand{ display:none; }
.is-collapsed .custom-toolbar-toggle-btn .toggle-text-collapse{ display:inline; }
.is-collapsed .custom-toolbar-toggle-btn .toggle-icon{ transform:rotate(180deg); }

/* ---------- เนื้อหา ---------- */
.custom-toolbar-content{
  display:flex;
  align-items:flex-start;
  gap:0;
  padding:14px 14px 16px;
  overflow-x:auto;
  max-height:200px;
  transition:max-height .28s cubic-bezier(.22,.9,.3,1), padding .28s ease, opacity .2s ease;
}
.custom-toolbar-content::-webkit-scrollbar{ height:6px; }
.custom-toolbar-content::-webkit-scrollbar-track{ background:transparent; }
.custom-toolbar-content::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.14);
  border-radius:99px;
}
.custom-toolbar-content::-webkit-scrollbar-thumb:hover{ background:rgba(210,162,76,.45); }

.custom-toolbar-wrapper.is-collapsed .custom-toolbar-content{
  max-height:0;
  padding-top:0;
  padding-bottom:0;
  opacity:0;
  overflow:hidden;
}

.toolbar-panel{ display:none; width:100%; }
.toolbar-panel.active{ display:flex; align-items:flex-start; gap:0; }

/* ---------- กลุ่ม ---------- */
.toolbar-group{
  flex:none;
  padding:0 18px;
  border-left:1px solid rgba(255,255,255,.07);
}
.toolbar-group:first-child{ border-left:none; padding-left:2px; }

.group-title{
  font-family:var(--font-m, "IBM Plex Mono", monospace);
  font-size:9.5px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--gold, #d2a24c);
  margin-bottom:10px;
  white-space:nowrap;
}

.group-icons{
  display:flex;
  align-items:stretch;
  gap:6px;
}

/* ---------- ปุ่มทางลัด ---------- */
.group-icons a{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:7px;
  width:82px;
  padding:10px 4px 9px;
  border:1px solid transparent;
  border-radius:10px;
  color:rgba(236,238,242,.62);
  text-align:center;
  transition:background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.group-icons a:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.1);
  color:#fff;
  text-decoration:none;
  transform:translateY(-2px);
}
.group-icons a img{
  width:30px;
  height:30px;
  object-fit:contain;
  display:block;
  filter:grayscale(.35) brightness(1.05);
  transition:filter .16s ease;
}
.group-icons a:hover img{ filter:none; }
.group-icons a span{
  font-size:11.5px;
  line-height:1.35;
  font-weight:500;
  word-break:break-word;
}

/* เมนูที่กำลังเปิดอยู่ = ถูกเลือก → ทอง (ไม่ใช่เขียว) */
.group-icons a.is-active{
  background:rgba(210,162,76,.14);
  border-color:rgba(210,162,76,.4);
  color:var(--gold-2, #ecca8a);
}
.group-icons a.is-active img{ filter:none; }

.group-icons a:focus-visible{
  outline:2px solid var(--gold, #d2a24c);
  outline-offset:2px;
}

/* ---------- มือถือ ---------- */
@media (max-width:767px){
  .custom-toolbar-wrapper{ bottom:0; }
  .custom-toolbar-tabs-wrapper{ padding:0 8px; height:38px; }
  .custom-toolbar-tabs > li > a{ padding:0 10px; height:38px; line-height:38px; font-size:12.5px; }
  .custom-toolbar-toggle-btn .toggle-text{ display:none !important; }
  .custom-toolbar-toggle-btn{ padding:0 9px; }
  .custom-toolbar-content{ padding:10px; max-height:168px; }
  .toolbar-group{ padding:0 12px; }
  .group-icons a{ width:72px; }
  .group-icons a img{ width:26px; height:26px; }
  .group-icons a span{ font-size:10.5px; }
}

@media (prefers-reduced-motion: reduce){
  .custom-toolbar-wrapper,
  .custom-toolbar-content,
  .custom-toolbar-toggle-btn .toggle-icon,
  .group-icons a{ transition:none !important; }
}