/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Mitr:wght@300;400;500&family=Sarabun:wght@300;400;600&display=swap');

/* ตั้งค่า Font พื้นฐาน */
body {
  font-family: 'Sarabun', sans-serif;
  font-size: 15px;
}

h1, h2, h3, h4, h5, h6, 
.main-header .logo, 
.main-sidebar, 
.navbar {
  font-family: 'Mitr', sans-serif;
}

/* * Skin: Z-CORE Light (Orange Modern Enterprise)
 */

/* Header & Navbar */
.skin-zcore-light .main-header .navbar {
  background-color: #ff851b; /* ส้ม Z-CORE */
}
.skin-zcore-light .main-header .navbar .nav > li > a {
  color: #ffffff;
}
.skin-zcore-light .main-header .navbar .nav > li > a:hover,
.skin-zcore-light .main-header .navbar .nav .open > a {
  background: rgba(0, 0, 0, 0.1);
}
.skin-zcore-light .main-header .navbar .sidebar-toggle {
  color: #ffffff;
}
.skin-zcore-light .main-header .navbar .sidebar-toggle:hover {
  background-color: #e67616;
}

/* Logo */
.skin-zcore-light .main-header .logo {
  background-color: #ff851b;
  color: #ffffff;
  border-bottom: 0 solid transparent;
  transition: background 0.3s;
}
.skin-zcore-light .main-header .logo:hover {
  background-color: #e67616;
}

/* Sidebar Light Style */
.skin-zcore-light .wrapper,
.skin-zcore-light .main-sidebar,
.skin-zcore-light .left-side {
  background-color: #ffffff; /* พื้นหลังขาวคลีน */
  box-shadow: 1px 0 5px rgba(0,0,0,0.05);
}

.skin-zcore-light .user-panel {
    padding: 15px;
    background: #fdfdfd;
}

.skin-zcore-light .sidebar-menu > li.header {
  color: #999;
  background: #f9fafc;
  padding: 10px 25px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.skin-zcore-light .sidebar-menu > li > a {
  border-left: 4px solid transparent;
  color: #444;
  font-weight: 400;
  padding: 12px 15px 12px 20px;
}

/* เมนูตอน Hover และ Active */
.skin-zcore-light .sidebar-menu > li:hover > a,
.skin-zcore-light .sidebar-menu > li.active > a {
  color: #ff851b; /* ตัวหนังสือส้ม */
  background: #fff5ed; /* พื้นหลังส้มจางๆ */
}

.skin-zcore-light .sidebar-menu > li.active {
  border-left-color: #ff851b; /* เส้นขอบข้างสีส้ม */
}

.skin-zcore-light .sidebar-menu > li.active > a {
  font-weight: 500;
}

/* Sub-menu (Treeview) */
.skin-zcore-light .sidebar-menu > li > .treeview-menu {
  background: #fcfcfc;
}

.skin-zcore-light .treeview-menu > li > a {
  color: #777;
  padding: 8px 5px 8px 25px;
}

.skin-zcore-light .treeview-menu > li.active > a,
.skin-zcore-light .treeview-menu > li > a:hover {
  color: #ff851b;
  background: transparent;
}

/* Content Header */
.skin-zcore-light .content-header > h1 {
    font-weight: 500;
    color: #333;
    padding-bottom: 10px;
}


/* 1. Buttons - ปรับให้โค้งมนและมี Transition ที่นุ่มนวล */
.btn {
    border-radius: 8px !important; /* ความมนที่กำลังดี */
    font-family: 'Mitr', sans-serif;
    font-weight: 400;
    transition: all 0.2s ease;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/*//////////////////////////////////////////////////////////////*/

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* ปุ่มสีหลักให้เป็นสีส้ม Z-CORE */
.btn-primary {
    background-color: #ff851b !important;
    border-color: #ff851b !important;
}

/* 2. Boxes & Cards - ปรับส่วนคอนเทนต์ให้ดูพรีเมียม */
.box {
    border-radius: 12px !important;
    border-top: 3px solid #ff851b !important; /* เส้นสีส้มด้านบน */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    overflow: hidden;
}

.box-header {
    padding: 15px;
}

.box-header .box-title {
    font-family: 'Mitr', sans-serif;
    font-weight: 500;
    font-size: 18px;
}

/* 3. Tables - ปรับตารางให้อ่านง่ายและทันสมัย */
.table {
    font-family: 'Sarabun', sans-serif;
    background-color: #fff;
}

.table thead th {
    font-family: 'Mitr', sans-serif;
    background-color: #fcfcfc;
    border-bottom: 2px solid #eee !important;
    color: #555;
    font-weight: 500;
    padding: 12px !important;
}

.table tbody td {
    vertical-align: middle !important;
    padding: 12px !important;
    border-top: 1px solid #f4f4f4 !important;
}

/* Hover effect สำหรับแถวในตาราง */
.table-hover tbody tr:hover {
    background-color: #fffaf5 !important; /* ไฮไลท์สีส้มจางๆ */
    transition: background-color 0.2s ease;
}

/* 4. Form Controls - ปรับช่องกรอกข้อมูล */
.form-control {
    border-radius: 8px !important;
    border: 1px solid #d2d6de;
    padding: 4px px;
    height: auto;
}

.form-control:focus {
    border-color: #ff851b !important;
    box-shadow: 0 0 0 3px rgba(255, 133, 27, 0.1);
}

/* จัดการโครงสร้าง Input Group */
.input-group {
    display: flex;
    width: 100%;
}

/* ปรับแต่งช่อง Input ในกลุ่ม */
.input-group .form-control {
    flex: 1;
    height: 40px !important; /* กำหนดความสูงให้คงที่ */
    border-radius: 8px 0 0 8px !important; /* มนเฉพาะฝั่งซ้าย */
    border: 1px solid #d2d6de;
    box-shadow: none;
    z-index: 1;
}

/* ปรับแต่งปุ่มหรือข้อความที่มาต่อท้าย (Addon / Button) */
.input-group-addon, 
.input-group-btn > .btn {
    height: 40px !important;
    border-radius: 0 8px 8px 0 !important; /* มนเฉพาะฝั่งขวา */
    border: 1px solid #d2d6de;
    background-color: #f9fafc;
    padding: 8px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -1px; /* ให้เส้นขอบทับกันพอดี */
}

/* กรณีปุ่มเป็นสีหลัก (Primary) */
.input-group-btn > .btn-primary {
    background-color: #ff851b !important;
    border-color: #ff851b !important;
    color: #fff !important;
}

/* ถ้า Input Group มีปุ่มอยู่ทั้งสองข้าง */
.input-group .form-control:not(:first-child):not(:last-child) {
    border-radius: 0 !important;
}

/* Focus State */
.input-group .form-control:focus {
    border-color: #ff851b !important;
    z-index: 3; /* ให้เส้นขอบสีส้มอยู่ด้านบนสุดเวลาเลือก */
}

.input-group .form-control:focus + .input-group-addon,
.input-group .form-control:focus + .input-group-btn > .btn {
    border-left-color: #ff851b !important;
}

/* ปรับ Font ใน Addon ให้เป็น Mitr */
.input-group-addon {
    font-family: 'Mitr', sans-serif;
    font-size: 14px;
    color: #666;
}