/* ============================================================================
   modern-theme.css  —  Modern Education Admin Dashboard
   โรงเรียนแม่จันวิทยาคม · ระบบงานแผนงานและงบประมาณ
   ----------------------------------------------------------------------------
   ธีมนี้ "override" หน้าตาของ AdminLTE เท่านั้น ไม่แตะโครงสร้าง HTML/PHP เดิม
   โทน: เหลือง (accent) + เทาเข้ม + ขาว · Sidebar สีเข้ม
   โหลดไฟล์นี้เป็นตัวสุดท้ายใน <head> เพื่อให้ทับสไตล์เดิมได้
   ============================================================================ */

:root {
  /* ---- Accent (เหลือง) ---- */
  --c-accent:        #F6B100;
  --c-accent-600:    #E39E00;
  --c-accent-soft:   #FFF4D6;
  --c-accent-ink:    #1E2229;   /* ตัวหนังสือบนพื้นเหลือง */

  /* ---- เทาเข้ม / ข้อความ ---- */
  --c-ink:           #22262E;   /* หัวข้อ */
  --c-text:          #3C4149;   /* เนื้อความ */
  --c-muted:         #8A9099;
  --c-border:        #E8EAED;

  /* ---- Sidebar เข้ม ---- */
  --c-side:          #1B1E25;
  --c-side-2:        #22262F;
  --c-side-text:     #EAEDF1;   /* สว่างขึ้น อ่านง่ายขึ้น */
  --c-side-muted:    #AEB4BE;   /* ไอคอน/ตัวรอง สว่างขึ้น */
  --c-side-hover:    #2E333D;

  /* ---- พื้น/การ์ด ---- */
  --c-bg:            #F4F5F7;
  --c-card:          #FFFFFF;

  --radius:          14px;
  --radius-sm:       10px;
  --shadow:          0 1px 2px rgba(16,24,40,.04), 0 6px 18px rgba(16,24,40,.06);
  --shadow-lg:       0 10px 30px rgba(16,24,40,.10);
  --sidebar-w:       250px;
}

/* ---------- ฐาน ---------- */
body.hold-transition,
body.sidebar-mini,
.wrapper {
  background: var(--c-bg) !important;
  color: var(--c-text);
  font-family: "Kanit", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.content-wrapper {
  background: var(--c-bg) !important;
}
h1,h2,h3,h4,h5,h6 { color: var(--c-ink); font-weight: 500; }
a { color: var(--c-accent-600); }
a:hover { color: var(--c-accent); }

/* ============================================================================
   SIDEBAR (เข้ม)
   ============================================================================ */
.main-sidebar,
.main-sidebar .sidebar,
.sidebar-dark-primary {
  background: linear-gradient(180deg, var(--c-side-2) 0%, var(--c-side) 100%) !important;
  width: var(--sidebar-w);
  box-shadow: 0 0 40px rgba(0,0,0,.14);
}
/* ให้เมนูเลื่อนได้เมื่อรายการเยอะ (ไม่ถูกตัดท้าย) */
.main-sidebar .sidebar { overflow-y: auto; overflow-x: hidden; }
/* sidebar สีดำยืดเต็มความสูงจอเสมอ กันช่องว่าง/footer โผล่มุมล่างซ้าย */
.main-sidebar { min-height: 100vh; }
/* footer พื้นขาวทับเต็ม ไม่ให้มีรอยต่อ */
.main-footer { position: relative; z-index: 1; background: var(--c-card) !important; }
body:not(.sidebar-collapse) .content-wrapper,
body:not(.sidebar-collapse) .main-header,
body:not(.sidebar-collapse) .main-footer {
  margin-left: var(--sidebar-w);
}

/* โลโก้ / หัว sidebar (ใช้ user-panel เป็นหัว) */
.main-sidebar .user-panel {
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  padding: 18px 14px 18px !important;
  margin: 0 !important;
}
.main-sidebar .user-panel .image img {
  width: 46px; height: 46px;
  border: 2px solid var(--c-accent) !important;
  padding: 1px; background: #fff;
}
.main-sidebar .user-panel .info a,
.main-sidebar .user-panel .info {
  color: var(--c-side-text) !important;
  font-size: 13.5px; line-height: 1.4;
}

/* เมนู */
.nav-sidebar .nav-item { margin: 2px 8px; }
.nav-sidebar .nav-link {
  color: var(--c-side-text) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 12px !important;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  height: auto !important;          /* ปล่อยให้สูงตามเนื้อหา */
  align-items: flex-start !important;
  transition: background .18s ease, color .18s ease;
}
/* ชื่อเมนูที่ยาว ให้ขึ้นบรรทัดใหม่ แสดงเต็ม ไม่ตัดทิ้ง */
.nav-sidebar .nav-link p {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.3;
  margin: 0;
}
.nav-sidebar .nav-link .nav-icon,
.nav-sidebar .nav-link i {
  color: var(--c-side-muted) !important;
  width: 22px; text-align: center;
  margin-top: 2px;
  transition: color .18s ease;
}
.nav-sidebar .nav-link:hover {
  background: var(--c-side-hover) !important;
  color: #fff !important;
}
.nav-sidebar .nav-link:hover i { color: var(--c-accent) !important; }

/* active (กรณีมี class .active) */
.nav-sidebar .nav-link.active,
.nav-sidebar > .nav-item > .nav-link.active {
  background: var(--c-accent) !important;
  color: var(--c-accent-ink) !important;
  box-shadow: 0 6px 16px rgba(246,177,0,.35);
}
.nav-sidebar .nav-link.active i { color: var(--c-accent-ink) !important; }

.nav-sidebar .nav-header {
  color: var(--c-side-muted) !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 11px;
}

/* ============================================================================
   TOP NAVBAR
   ============================================================================ */
.main-header.navbar {
  background: var(--c-card) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--c-border) !important;
  box-shadow: var(--shadow);
  min-height: 62px;
}
.main-header .nav-link { color: var(--c-ink) !important; font-weight: 500; }
.main-header .nav-link:hover { color: var(--c-accent-600) !important; }
.main-header .navbar-nav .nav-item:first-child .nav-link i { color: var(--c-ink); }

/* ============================================================================
   CONTENT HEADER / BREADCRUMB
   ============================================================================ */
.content-header { padding: 22px 1rem 6px; }
.content-header h1,
.content-header .m-0 {
  font-size: 22px !important;
  font-weight: 600;
  color: var(--c-ink) !important;
}
.breadcrumb {
  background: transparent; padding: 0; margin: 0; font-size: 13px;
}
.breadcrumb-item a { color: var(--c-muted); }
.breadcrumb-item.active { color: var(--c-accent-600); font-weight: 500; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--c-border); }

/* ============================================================================
   CARD / กล่องเนื้อหา
   ============================================================================ */
.card {
  background: var(--c-card);
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden;
}
.card:hover { box-shadow: var(--shadow-lg) !important; transition: box-shadow .2s ease; }
.card-header {
  background: var(--c-card) !important;
  border-bottom: 1px solid var(--c-border) !important;
  padding: 16px 20px;
}
.card-header .card-title { font-weight: 600; color: var(--c-ink); font-size: 16px; }
.card-body { padding: 20px; }
.card.card-primary:not(.card-outline) > .card-header {
  background: var(--c-ink) !important; color: #fff !important;
}

/* small-box / info-box (การ์ดสถิติบนแดชบอร์ด) */
.small-box {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  border: 1px solid var(--c-border);
}
.small-box > .inner h3, .small-box > .inner p { color: #fff; }
.small-box .icon { color: rgba(255,255,255,.3); }
.info-box {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  background: var(--c-card);
  border: 1px solid var(--c-border);
}
.info-box .info-box-icon {
  border-radius: var(--radius-sm);
  background: var(--c-accent-soft) !important;
  color: var(--c-accent-600) !important;
}

/* ============================================================================
   ปุ่ม
   ============================================================================ */
.btn {
  border-radius: 10px !important;
  font-weight: 500;
  padding: 8px 18px;
  transition: all .18s ease;
}
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
  background: var(--c-accent) !important;
  border-color: var(--c-accent) !important;
  color: var(--c-accent-ink) !important;
  box-shadow: 0 4px 12px rgba(246,177,0,.3);
}
.btn-primary:hover {
  background: var(--c-accent-600) !important;
  border-color: var(--c-accent-600) !important;
  color: var(--c-accent-ink) !important;
  transform: translateY(-1px);
}
.btn-success { background:#17a673 !important; border-color:#17a673 !important; }
.btn-danger  { background:#e4572e !important; border-color:#e4572e !important; }
.btn-info    { background:#2f80ed !important; border-color:#2f80ed !important; }
.btn-secondary { background:#6b7280 !important; border-color:#6b7280 !important; }
.btn-warning { background: var(--c-accent) !important; border-color: var(--c-accent) !important; color: var(--c-accent-ink) !important; }
.btn-outline-primary {
  color: var(--c-accent-600) !important; border-color: var(--c-accent) !important;
}
.btn-outline-primary:hover {
  background: var(--c-accent) !important; color: var(--c-accent-ink) !important;
}
.btn-sm { padding: 5px 12px; border-radius: 8px !important; }

/* ============================================================================
   ฟอร์ม
   ============================================================================ */
.form-control, .custom-select, textarea.form-control {
  border: 1px solid var(--c-border) !important;
  border-radius: 10px !important;
  color: var(--c-text);
  padding: .5rem .85rem;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .custom-select:focus {
  border-color: var(--c-accent) !important;
  box-shadow: 0 0 0 3px rgba(246,177,0,.18) !important;
}
label { color: var(--c-ink); font-weight: 500; }
.input-group-text {
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: 10px;
}

/* ============================================================================
   ตาราง
   ============================================================================ */
.table {
  color: var(--c-text);
  background: var(--c-card);
}
.table thead th {
  background: #F7F8FA;
  color: var(--c-ink);
  font-weight: 600;
  border-bottom: 2px solid var(--c-border) !important;
  border-top: 0 !important;
  font-size: 14px;
  padding: 12px 14px;
}
.table td, .table th { border-top: 1px solid var(--c-border) !important; vertical-align: middle; }
.table-hover tbody tr:hover { background: var(--c-accent-soft) !important; }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--c-border) !important; }
.table-striped tbody tr:nth-of-type(odd) { background: #FaFbFc; }

/* ตารางเก่าแบบ HTML ล้วน (ช่วยให้ดูสะอาดขึ้นเท่าที่ทำได้) */
.content table:not(.dataTable):not(.table) {
  border-collapse: separate;
  border-spacing: 0;
}

/* DataTables controls */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--c-border); border-radius: 8px; padding: 4px 10px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--c-accent) !important; border-color: var(--c-accent) !important;
  color: var(--c-accent-ink) !important; border-radius: 8px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 8px !important;
}

/* ============================================================================
   เบ็ดเตล็ด
   ============================================================================ */
.badge-primary { background: var(--c-accent) !important; color: var(--c-accent-ink) !important; }
.text-primary { color: var(--c-accent-600) !important; }
.bg-primary { background: var(--c-accent) !important; color: var(--c-accent-ink) !important; }
hr { border-top-color: var(--c-border); }
.main-footer {
  background: var(--c-card) !important;
  border-top: 1px solid var(--c-border) !important;
  color: var(--c-muted);
  font-size: 13px;
}
.main-footer a { color: var(--c-accent-600); }

/* scrollbar บาง ๆ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cfd4da; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #b6bcc4; }

/* ============================================================================
   หน้า LOGIN (login.php ใช้คลาส .half / .form-block / .control)
   ============================================================================ */
.half .contents { background: var(--c-bg) !important; }
.half .bg {
  background: linear-gradient(160deg, var(--c-side-2), var(--c-side)) !important;
  position: relative;
}
.half .bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(246,177,0,.22), transparent 60%);
}
.form-block {
  background: var(--c-card) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--c-border);
}
.half .form-control {
  background: var(--c-bg) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 10px !important;
  height: 50px !important;
}
.half .form-control:focus {
  border-color: var(--c-accent) !important;
  box-shadow: 0 0 0 3px rgba(246,177,0,.18) !important;
}
.half .btn-primary {
  background: var(--c-accent) !important; border-color: var(--c-accent) !important;
  color: var(--c-accent-ink) !important; border-radius: 10px !important;
  font-weight: 600;
}
.control input:checked ~ .control__indicator { background: var(--c-accent) !important; }

/* ============================================================================
   ปรับเนื้อหาสไตล์เก่า (ตาราง/ฟอร์ม HTML ล้วน) ให้ดูโมเดิร์น — ไม่ต้องแก้ HTML
   ============================================================================ */
/* ตารางข้อมูล/ฟอร์ม (border="1") -> การ์ดขาวมุมมน เงานุ่ม */
.content-wrapper table[border="1"] {
  border-collapse: collapse !important;
  background: var(--c-card) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden;
  width: 100% !important;
  margin-bottom: 18px;
}
/* เซลล์: เว้นช่องไฟมากขึ้น (ไม่ใช้ !important เพื่อให้เซลล์ฟอร์มที่กำหนด border:0 ไว้ยังโล่ง) */
.content-wrapper table[border="1"] td,
.content-wrapper table[border="1"] th {
  border: none;
  border-bottom: 1px solid var(--c-border);
  padding: 11px 15px;
  vertical-align: middle;
}
/* ====== เฉพาะ "ตารางข้อมูล" (ตารางที่มีหัวตารางเหลืองเดิม) ====== */
/* เส้นแนวนอนอย่างเดียว + สลับสีแถว ให้ดูโปร */
.content-wrapper table[border="1"]:has(tr[style*="FFEF96"]) td,
.content-wrapper table[border="1"]:has(tr[style*="ffef96"]) td {
  border-left: none !important; border-right: none !important; border-top: none !important;
}
.content-wrapper table[border="1"]:has(tr[style*="FFEF96"]) tr:nth-of-type(even) td,
.content-wrapper table[border="1"]:has(tr[style*="ffef96"]) tr:nth-of-type(even) td { background: #FAFBFC; }
.content-wrapper table[border="1"]:has(tr[style*="FFEF96"]) tr:hover td,
.content-wrapper table[border="1"]:has(tr[style*="ffef96"]) tr:hover td { background: var(--c-accent-soft); }
/* หัวตารางเหลืองเดิม (#FFEF96) -> หัวเทาเข้มคมชัด ตัวอักษรขาว + เส้นใต้สีเหลือง
   ตั้งสีพื้นที่ "td" พร้อม !important เพื่อกัน zebra/hover ทับจนตัวหนังสือขาวบนพื้นสว่าง
   (รองรับหัวตาราง 2 ชั้น เช่น หน้าอนุมัติรายงานขอซื้อวัสดุ) */
.content-wrapper tr[style*="FFEF96"] td,
.content-wrapper tr[style*="ffef96"] td {
  background: var(--c-ink) !important;
  color: #fff !important;
  font-weight: 600;
  font-size: 14.5px;
  border-bottom: 3px solid var(--c-accent) !important;
}
.content-wrapper tr[style*="FFEF96"] td b,
.content-wrapper tr[style*="ffef96"] td b { color: #fff !important; }
/* ไม่ให้ hover เปลี่ยนสีหัวตาราง */
.content-wrapper tr[style*="FFEF96"]:hover td,
.content-wrapper tr[style*="ffef96"]:hover td { background: var(--c-ink) !important; color:#fff !important; }

/* ฟอร์ม input/select/textarea สไตล์เก่า (ไม่มีคลาส form-control) -> โมเดิร์น */
.content-wrapper input[type="text"],
.content-wrapper input[type="number"],
.content-wrapper input[type="password"],
.content-wrapper input[type="date"],
.content-wrapper select,
.content-wrapper textarea {
  border: 1px solid var(--c-border) !important;
  border-radius: 8px !important;
  padding: 7px 11px !important;
  font-family: "Kanit", sans-serif;
  font-size: 14px;
  max-width: 100%;
  background: #fff;
  color: var(--c-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.content-wrapper input:focus,
.content-wrapper select:focus,
.content-wrapper textarea:focus {
  outline: none;
  border-color: var(--c-accent) !important;
  box-shadow: 0 0 0 3px rgba(246,177,0,.18) !important;
}
/* หัวข้อ section เดิม (.style1) */
.content-wrapper .style1 { font-weight: 600; font-size: 16px; color: var(--c-ink); }
/* ไอคอนแก้ไข/ลบ ในตาราง ให้มีสี */
.content-wrapper table a .fa-edit,
.content-wrapper table a .fa-pencil-alt { color: var(--c-accent-600); }
.content-wrapper table a .fa-trash-alt,
.content-wrapper table a .fa-trash { color: #E4572E; }
.content-wrapper table a { margin: 0 3px; }