/* Layout */
.main-container { display:flex; min-height:calc(100vh - 60px); position:relative; }

/* Sidebar */
.sidebar {
width:260px;
background:#f5f6f8;
border-right:1px solid #ddd;
padding:15px;
flex-shrink: 0; 
transition:all .3s ease;
}
/*
flex-shrink: 0; 

*/

.sidebar.collapsed { margin-left:-220px; }
.menu-horizontal {
    position: absolute;
    top: 10px;
    left: 150px;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 6px 12px;
    background: #f2f2f2;
    border: 1px solid #ccc;
    border-radius: 4px;

    text-decoration: none;
    color: #333;
    font-weight: bold;

    transition: all 0.3s ease;
}

/* 👉 ตอน sidebar ย่อ */
.sidebar.collapsed .menu-horizontal {
    left: 8px;
    padding: 6px;
}

/* 👉 ซ่อนคำ MENU */
.sidebar.collapsed .menu-text {
    display: none;
}

/* Menu button (like old UI, before filter) */
.menu-toggle {
  position: absolute;
  left: 0;
  top: 100px; /* slightly above Filter title */
  background: #0d3b66;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  z-index: 1000;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}

.sidebar label { font-weight:600; margin-top:10px; display:block; }
.sidebar select,
.sidebar input:not([type="checkbox"]) {
  width: 100%;
  padding: 6px 8px;
  margin-top: 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Multiselect checkbox alignment */
.multi-select-list label {
  display: flex !important;          /* override multiselect.css */
  align-items: center;
  justify-content: flex-start;
  column-gap: 4px;
  white-space: nowrap;
  padding: 2px 6px !important;       /* ลดช่องว่างซ้ายขวา */
  margin-top: 0;
  font-weight: normal;
}

.multi-select-list input[type="checkbox"] {
  margin: 0;
  padding: 0;
  width: auto !important;   /* กันโดน width:100% จาก sidebar */
  flex: 0 0 auto;
} 

.content { flex:1; padding:20px 30px; }

.btn-export {
background:#1e7e34; color:#fff; border:none;
padding:8px 14px; border-radius:4px;
}