/* =========================================
   CIOS Panel – Bootstrap 3 Friendly Card
   ==========================================*/

/* base card */
.cios-panel {
  border-radius: 8px;
  border: 1px solid #dde2f2;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  margin-bottom: 15px;
  position: relative;
  -webkit-transition: box-shadow 0.15s ease, -webkit-transform 0.15s ease;
  transition: box-shadow 0.15s ease, -webkit-transform 0.15s ease;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    -webkit-transform 0.15s ease;
}

.cios-panel:hover {
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.1);
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
}

/* header */
.cios-panel .panel-heading {
  border: 0;
  padding: 10px 16px;
  background: transparent;
}

.cios-panel .panel-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;

  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.cios-panel .panel-title i {
  margin-right: 6px;
  font-size: 16px;
}

/* body & footer */
.cios-panel .panel-body {
  padding: 12px 16px 16px 16px;
  background-color: #f9fafc;
}

.cios-panel .panel-footer {
  border-top: 1px solid #e4e8f4;
  background-color: #ffffff;
  padding: 8px 16px;
}

/* ======================
   Color variants
   =======================*/

/* BLUE */
.cios-panel--blue .panel-heading {
  background: -webkit-linear-gradient(135deg, #2b5480, #4e7fc1);
  background: linear-gradient(135deg, #2b5480, #4e7fc1);
  color: #ffffff;
}

.cios-panel--blue .panel-title,
.cios-panel--blue .panel-title i {
  color: #ffffff;
}

.cios-panel--blue .panel-body {
  background-color: #f3f7ff;
}

.cios-panel--blue .panel-footer {
  background-color: #f5f8ff;
}

/* GREEN */
.cios-panel--green .panel-heading {
  background: -webkit-linear-gradient(135deg, #166534, #22a263);
  background: linear-gradient(135deg, #166534, #22a263);
  color: #ffffff;
}

.cios-panel--green .panel-title,
.cios-panel--green .panel-title i {
  color: #ffffff;
}

.cios-panel--green .panel-body {
  background-color: #f2fbf6;
}

.cios-panel--green .panel-footer {
  background-color: #f3fbf7;
}

/* ORANGE */
.cios-panel--orange .panel-heading {
  background: -webkit-linear-gradient(135deg, #c2410c, #f97316);
  background: linear-gradient(135deg, #c2410c, #f97316);
  color: #ffffff;
}

.cios-panel--orange .panel-title,
.cios-panel--orange .panel-title i {
  color: #ffffff;
}

.cios-panel--orange .panel-body {
  background-color: #fff7ed;
}

.cios-panel--orange .panel-footer {
  background-color: #fff5ea;
}

/* PURPLE */
.cios-panel--purple .panel-heading {
  background: -webkit-linear-gradient(135deg, #6b21a8, #8b5cf6);
  background: linear-gradient(135deg, #6b21a8, #8b5cf6);
  color: #ffffff;
}

.cios-panel--purple .panel-title,
.cios-panel--purple .panel-title i {
  color: #ffffff;
}

.cios-panel--purple .panel-body {
  background-color: #f5f3ff;
}

.cios-panel--purple .panel-footer {
  background-color: #f3efff;
}

/* GRAY / NEUTRAL */
.cios-panel--gray .panel-heading {
  background: -webkit-linear-gradient(135deg, #4b5563, #6b7280);
  background: linear-gradient(135deg, #4b5563, #6b7280);
  color: #ffffff;
}

.cios-panel--gray .panel-title,
.cios-panel--gray .panel-title i {
  color: #ffffff;
}

.cios-panel--gray .panel-body {
  background-color: #f3f4f6;
}

.cios-panel--gray .panel-footer {
  background-color: #f3f4f6;
}

/* ======================
   Small utility helpers
   =======================*/

/* เวอร์ชัน body ขาวล้วน (ถ้าไม่อยากให้มีพื้นหลังจาง ๆ) */
.cios-panel--plain-body .panel-body {
  background-color: #ffffff;
}

/* panel แบบ compact นิดหน่อย (ใช้เพิ่มได้ตามต้องการ) */
.cios-panel--compact .panel-heading {
  padding-top: 8px;
  padding-bottom: 8px;
}

.cios-panel--compact .panel-body {
  padding-top: 8px;
  padding-bottom: 10px;
}

/* Responsive alignment */
@media (max-width: 767px) {
  .cios-panel .panel-heading {
    padding: 8px 12px;
  }

  .cios-panel .panel-body {
    padding: 10px 12px 12px 12px;
  }
}

/* =========================================
   Widget toolbar inside CIOS panel only
   ==========================================*/

/* base toolbar ใน cios-panel */
.cios-panel .widget-body-toolbar {
  margin: 4px 0;
  padding: 4px 0;
  background-color: transparent;
  border: 0;
}

/* ให้ row ด้านในใช้ margin แบบ Bootstrap ปกติ
   เพื่อให้ชิดซ้าย-ขวาอยู่ระดับเดียวกับ row อื่น ๆ */
.cios-panel .widget-body-toolbar > .row {
  margin-left: -15px;
  margin-right: -15px;
}


/* toolbar ตัวแรกใน panel-body ชิดหัวขึ้นนิดหน่อย */
.cios-panel .panel-body > .widget-body-toolbar:first-child {
  margin-top: 2px;
}

/* ถ้ามี toolbar หลายตัวติดกัน ให้มีเส้นคั่นเฉพาะ "ระหว่าง" กัน */
.cios-panel .widget-body-toolbar + .widget-body-toolbar {
  /* border-top: 1px solid #eceff7; */
  margin-top: 6px;
  padding-top: 8px;
}

/* ตัวสุดท้ายก่อน content อื่น ๆ ให้เว้นห่างนิดเดียว */
.cios-panel .widget-body-toolbar:last-child {
  margin-bottom: 4px;
}

/* ถ้าหน้าไหน "อยากได้" เส้นล่างด้วย ค่อยเติม class นี้เพิ่มเอง */
.cios-panel .widget-body-toolbar--with-divider {
  border-bottom: 1px solid #eceff7;
  padding-bottom: 8px;
  margin-bottom: 6px;
}

/* =========================================
   Inline toolbar – ปุ่มหลัก + ตัวกรอง (radio)
   ใช้ใน panel "รายการคดีที่ยื่นคำขอติดตาม"
   ==========================================*/

.cios-panel .cios-toolbar-inline {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;

  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;

  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;

  gap: 8px;
}

/* ปุ่มหลักชิดซ้ายและมีระยะห่างจาก radio นิดหน่อย */
.cios-panel .cios-toolbar-main-action {
  margin-right: 8px;
}

/* ตัด margin-top เดิมของ smart-form ไม่ให้ตัวกรองตกลงมา */
.cios-panel .cios-toolbar-inline .cios-toolbar-filters {
  margin-top: 0;
}

/* ให้ radio group ไม่ดันสูงเกินไป */
.cios-panel .cios-toolbar-inline .inline-group label.radio {
  margin-bottom: 4px;
}

/* มือถือ / แท็บเล็ตเล็ก – ปุ่มอยู่บรรทัดบน, radio อยู่บรรทัดถัดไป */
@media (max-width: 767px) {
  .cios-panel .cios-toolbar-inline {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    align-items: flex-start;
  }

  .cios-panel .cios-toolbar-main-action {
    width: 100%;
  }

  .cios-panel .cios-toolbar-inline .cios-toolbar-filters {
    width: 100%;
  }
}