/* ============================================================
   Journal Science NRRU — UI ตาม Style เว็บแบดมินตัน
   Blue Professional + Gold Accent  (Kanit + Sarabun)
   ============================================================ */

:root {
  --primary:       #1a56a4;
  --primary-dark:  #0e3a7a;
  --primary-light: #e8f0fb;
  --accent:        #f0a500;
  --accent-dark:   #c78500;
  --danger:        #e03e3e;
  --success:       #1a8a4a;
  --warning:       #d97706;
  --info:          #0284c7;
  --text:          #1e2a3a;
  --text-muted:    #6b7a8d;
  --bg:            #f4f7fb;
  --white:         #ffffff;
  --border:        #d0daea;
  --shadow:        0 4px 20px rgba(26,86,164,.10);
  --radius:        14px;
  --radius-sm:     8px;
  --transition:    all .2s ease;
}

/* ---------- Font ---------- */
body,
p, span, a, td, th, li, label,
input, textarea, select, button,
.form-control, .btn, .breadcrumb {
  font-family: 'Sarabun', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.box-title, .content-header h1,
.sidebar-menu > li.header {
  font-family: 'Kanit', 'Sarabun', sans-serif;
}

/* FontAwesome / Ionicons / Glyphicons ต้องคงฟอนต์เดิม */
.fa        { font-family: FontAwesome !important; }
.ion       { font-family: Ionicons !important; }
.glyphicon { font-family: 'Glyphicons Halflings' !important; }

body {
  background: var(--bg) !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased;
}

/* =============================================================
   HEADER / TOPBAR
   ============================================================= */
.main-header {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 60%, #2176cc 100%) !important;
  box-shadow: 0 4px 24px rgba(14,58,122,.18) !important;
  border-bottom: none !important;
  position: sticky;
  top: 0;
  z-index: 1030;
}

/* Logo area */
.main-header .logo {
  background: transparent !important;
  border-bottom: none !important;
  border-right: 1px solid rgba(255,255,255,.12) !important;
}

.main-header .logo:hover {
  background: rgba(0,0,0,.08) !important;
}

.main-header .logo .logo-lg {
  font-family: 'Kanit', sans-serif !important;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff !important;
  letter-spacing: .3px;
  text-shadow: 0 2px 8px rgba(0,0,0,.18);
}

.main-header .logo .logo-mini {
  font-family: 'Kanit', sans-serif !important;
  font-weight: 700;
  color: var(--accent) !important;
}

/* Navbar */
.main-header .navbar {
  background: transparent !important;
  border: none !important;
}

.main-header .navbar .sidebar-toggle {
  color: rgba(255,255,255,.85) !important;
  border: none !important;
  transition: var(--transition);
  padding: 15px 18px;
}

.main-header .navbar .sidebar-toggle:hover {
  background: rgba(0,0,0,.1) !important;
  color: #ffffff !important;
}

/* Navbar right links */
.navbar-custom-menu > .nav > li > a {
  color: rgba(255,255,255,.85) !important;
  transition: var(--transition);
  padding: 15px 12px;
}

.navbar-custom-menu > .nav > li > a:hover {
  background: rgba(0,0,0,.1) !important;
  color: #ffffff !important;
}

/* User dropdown trigger */
.navbar-custom-menu .nav > li.dropdown.user > a {
  padding: 10px 16px;
  font-weight: 600;
  color: #ffffff !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* User display badge */
.navbar-custom-menu .nav > li.dropdown.user > a span.hidden-xs {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 30px;
  padding: 4px 14px 4px 10px;
  backdrop-filter: blur(4px);
  font-size: 13px;
}

/* Dropdown menu */
.navbar-custom-menu .dropdown-menu {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 8px 28px rgba(26,86,164,.14) !important;
  margin-top: 4px !important;
  padding: 6px 0 !important;
}

.navbar-custom-menu .dropdown-menu > li > a {
  color: var(--text) !important;
  padding: 9px 16px;
  font-family: 'Sarabun', sans-serif;
  transition: var(--transition);
}

.navbar-custom-menu .dropdown-menu > li > a:hover {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
}

/* User header (dropdown top section) */
.user-header {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary)) !important;
}

.user-footer {
  background: var(--bg) !important;
  border-top: 1px solid var(--border) !important;
  padding: 12px 16px !important;
}

.user-footer .btn-default {
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* =============================================================
   SIDEBAR
   ============================================================= */
/* AdminLTE skin-blue กำหนด background: #222d32 (เข้มมาก) */
.skin-blue .main-sidebar,
.skin-blue .left-side,
.main-sidebar {
  background: var(--white) !important;
  background-color: var(--white) !important;
  box-shadow: 4px 0 20px rgba(26,86,164,.10) !important;
  border-right: 1px solid var(--border) !important;
}

/* User panel */
.main-sidebar .user-panel {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary)) !important;
  padding: 16px !important;
  border-bottom: none !important;
}

.main-sidebar .user-panel .info p {
  color: #ffffff !important;
  font-family: 'Kanit', sans-serif;
  font-weight: 600;
  font-size: 13px;
  margin: 0 0 2px !important;
}

.main-sidebar .user-panel .info a {
  color: rgba(255,255,255,.75) !important;
  font-size: 12px;
}

.main-sidebar .user-panel .info a .fa {
  font-size: 10px;
  margin-right: 3px;
  color: var(--accent) !important;
}

.main-sidebar .user-panel img {
  border: 2px solid rgba(240,165,0,.5) !important;
}

/* Sidebar section label — ต้องใช้ .skin-blue prefix */
.sidebar-menu {
  padding: 6px 0 !important;
}

/* AdminLTE skin-blue กำหนด background: #1a2226 บน header label */
.skin-blue .sidebar-menu > li.header {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  padding: 10px 20px 8px !important;
  font-family: 'Kanit', sans-serif !important;
  border-top: 1px solid var(--border) !important;
}

/* Menu items — ใช้ .skin-blue prefix ครอบคลุม AdminLTE default color */
.skin-blue .sidebar-menu > li > a,
.sidebar-menu > li > a {
  color: var(--text) !important;
  background: transparent !important;
  padding: 10px 20px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-left: 3px solid transparent !important;
  transition: background .18s ease, color .18s ease, border-color .18s ease !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.skin-blue .sidebar-menu > li > a > .fa,
.skin-blue .sidebar-menu > li > a > .ion,
.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > .ion {
  width: 18px !important;
  text-align: center !important;
  font-size: 14px !important;
  color: var(--text-muted) !important;
  transition: color .18s ease !important;
  opacity: .8;
}

.sidebar-menu > li > a > span {
  flex: 1;
}

/* ----------------------------------------------------------
   Hover / Active / menu-open
   ต้องใช้ .skin-blue prefix เพื่อ override AdminLTE skin-blue.css
   ที่กำหนด background: #1e282c (ดำ) ไว้ใน .skin-blue selector
   ---------------------------------------------------------- */

/* Hover state */
.skin-blue .sidebar-menu > li:hover > a {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  border-left-color: var(--primary) !important;
}

.skin-blue .sidebar-menu > li:hover > a > .fa,
.skin-blue .sidebar-menu > li:hover > a > .ion {
  color: var(--primary) !important;
  opacity: 1;
}

/* Active (leaf item) */
.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li.active > a:hover {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  border-left-color: var(--primary) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.skin-blue .sidebar-menu > li.active > a > .fa,
.skin-blue .sidebar-menu > li.active > a > .ion {
  color: var(--primary) !important;
  opacity: 1;
}

/* menu-open: เมื่อคลิกเปิด treeview — ป้องกัน AdminLTE ทำพื้นดำ */
.skin-blue .sidebar-menu > li.menu-open > a,
.skin-blue .sidebar-menu > li.treeview.menu-open > a {
  background: #ddeaf8 !important;  /* น้ำเงินอ่อนเข้มขึ้นเล็กน้อย */
  color: var(--primary) !important;
  border-left-color: var(--primary) !important;
  font-weight: 600 !important;
}

.skin-blue .sidebar-menu > li.menu-open > a > .fa,
.skin-blue .sidebar-menu > li.menu-open > a > .ion {
  color: var(--primary) !important;
  opacity: 1;
}

/* Treeview arrow */
.sidebar-menu li .pull-right-container {
  margin-left: auto;
  margin-right: 0;
}

.sidebar-menu > li > a > .pull-right-container > .fa-angle-left {
  color: var(--text-muted) !important;
  font-size: 13px !important;
  transition: transform .2s ease !important;
}

.skin-blue .sidebar-menu > li.active > a > .pull-right-container > .fa-angle-left,
.skin-blue .sidebar-menu > li.menu-open > a > .pull-right-container > .fa-angle-left {
  transform: rotate(-90deg) !important;
  color: var(--primary) !important;
}

/* Divider between menu groups */
.sidebar-menu li.nav-divider,
.sidebar-menu li + li.header {
  border-top: 1px solid var(--border);
}

/* ----------------------------------------------------------
   Treeview sub-menu — ต้องใช้ .skin-blue prefix
   AdminLTE skin-blue กำหนด background: #2c3b41 (เขียวดำ)
   และ color: #8aa4af (เทาอ่อน) บน .skin-blue selector
   ---------------------------------------------------------- */

/* พื้น sub-menu */
.skin-blue .sidebar-menu > li > .treeview-menu {
  background: #f0f5fc !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  margin: 0 !important;
}

/* override .skin-blue .sidebar a { color: #b8c7ce } */
.skin-blue .main-sidebar .sidebar a {
  color: var(--text) !important;
}

/* sub-menu link */
.skin-blue .sidebar-menu .treeview-menu > li > a {
  color: var(--text-muted) !important;
  padding: 9px 20px 9px 44px !important;
  border-left: 3px solid transparent !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  transition: background .15s ease, color .15s ease !important;
  background: transparent !important;
}

/* sub-menu hover */
.skin-blue .sidebar-menu .treeview-menu > li > a:hover {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  border-left-color: var(--primary) !important;
}

/* sub-menu active */
.skin-blue .sidebar-menu .treeview-menu > li.active > a,
.skin-blue .sidebar-menu .treeview-menu > li.active > a:hover {
  color: var(--primary) !important;
  font-weight: 600 !important;
  border-left-color: var(--primary) !important;
  background: var(--primary-light) !important;
}

.sidebar-menu .treeview-menu > li > a > .fa {
  font-size: 7px !important;
  width: 14px !important;
  margin-right: 8px !important;
  text-align: center !important;
  color: var(--text-muted) !important;
}

/* Label badge */
.sidebar-menu .label {
  border-radius: 20px !important;
  font-size: 10px !important;
  padding: 2px 7px !important;
  font-weight: 600 !important;
}

/* =============================================================
   CONTENT AREA
   ============================================================= */
.content-wrapper {
  background: var(--bg) !important;
  min-height: 100vh;
}

.content-header {
  background: transparent !important;
  padding: 20px 24px 0 !important;
}

.content-header h1 {
  font-family: 'Kanit', sans-serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--primary) !important;
  letter-spacing: .02em;
}

.content-header h1 small {
  font-size: 13px !important;
  color: var(--text-muted) !important;
  font-weight: 400;
  font-family: 'Sarabun', sans-serif !important;
}

.breadcrumb {
  background: transparent !important;
  margin-bottom: 0 !important;
  padding: 4px 0 !important;
  font-size: 12px !important;
}

.breadcrumb > li,
.breadcrumb > li + li::before { color: var(--text-muted) !important; }
.breadcrumb > .active { color: var(--primary) !important; }

.content { padding: 16px 24px !important; }

/* =============================================================
   CARDS / BOXES
   ============================================================= */
.box {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  margin-bottom: 22px !important;
  transition: box-shadow .2s ease !important;
}

.box:hover {
  box-shadow: 0 6px 28px rgba(26,86,164,.14) !important;
}

/* Accent left border */
.box.box-primary { border-left: 5px solid var(--primary) !important; }
.box.box-info    { border-left: 5px solid var(--info) !important; }
.box.box-success { border-left: 5px solid var(--success) !important; }
.box.box-warning { border-left: 5px solid var(--warning) !important; }
.box.box-danger  { border-left: 5px solid var(--danger) !important; }

/* Default box — accent gold border-left */
.box:not([class*="box-primary"]):not([class*="box-info"]):not([class*="box-success"]):not([class*="box-warning"]):not([class*="box-danger"]) {
  border-left: 5px solid var(--accent) !important;
}

.box-header {
  padding: 16px 20px 12px !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  background: transparent !important;
  display: flex;
  align-items: center;
}

.box-header .box-title {
  font-family: 'Kanit', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--primary) !important;
}

.box-header > .fa,
.box-header > .glyphicon,
.box-header > .ion {
  margin-right: 8px !important;
  color: var(--accent) !important;
  font-size: 16px !important;
}

.box-body {
  padding: 18px 20px !important;
  color: var(--text) !important;
  line-height: 1.75 !important;
}

.box-footer {
  padding: 12px 20px !important;
  background: #f8fafd !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
}

/* Solid box header */
.box.box-primary.box-solid > .box-header {
  background: linear-gradient(90deg, var(--primary-dark), var(--primary)) !important;
  border-color: var(--primary) !important;
}
.box.box-info.box-solid > .box-header    { background: var(--info) !important; }
.box.box-success.box-solid > .box-header { background: var(--success) !important; }
.box.box-warning.box-solid > .box-header { background: var(--warning) !important; }
.box.box-danger.box-solid > .box-header  { background: var(--danger) !important; }

/* Solid box title color */
.box.box-solid > .box-header .box-title { color: #fff !important; }
.box.box-solid > .box-header > .fa      { color: var(--accent) !important; }

/* =============================================================
   STAT BOXES
   ============================================================= */
.small-box {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden;
  border: none !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}

.small-box:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 28px rgba(26,86,164,.18) !important;
}

.small-box > .inner { padding: 16px 20px !important; }
.small-box h3 { font-family: 'Kanit', sans-serif !important; font-size: 38px !important; font-weight: 700 !important; }
.small-box p  { font-size: 14px !important; font-weight: 500 !important; }

.small-box > .small-box-footer {
  padding: 9px 16px !important;
  font-size: 12px !important;
  background: rgba(0,0,0,.1) !important;
}

/* =============================================================
   BUTTONS
   ============================================================= */
.btn {
  border-radius: var(--radius-sm) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  padding: 7px 18px !important;
  letter-spacing: .2px !important;
  transition: var(--transition) !important;
  font-family: 'Sarabun', sans-serif !important;
}

.btn-primary {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
  box-shadow: 0 4px 14px rgba(26,86,164,.3) !important;
}

.btn-default {
  background: var(--white) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.btn-default:hover {
  background: var(--primary-light) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* Accent = gold */
.btn-warning {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.btn-warning:hover {
  background: var(--accent-dark) !important;
  border-color: var(--accent-dark) !important;
}

.btn-success {
  background: var(--success) !important;
  border-color: var(--success) !important;
  color: #fff !important;
}
.btn-success:hover {
  background: #136e3b !important;
  border-color: #136e3b !important;
  box-shadow: 0 4px 12px rgba(26,138,74,.3) !important;
}

.btn-danger {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: #fff !important;
}
.btn-danger:hover {
  background: #b52d2d !important;
  border-color: #b52d2d !important;
  box-shadow: 0 4px 12px rgba(224,62,62,.3) !important;
}

.btn-info {
  background: var(--info) !important;
  border-color: var(--info) !important;
  color: #fff !important;
}
.btn-info:hover {
  background: #0369a1 !important;
  border-color: #0369a1 !important;
}

.btn-flat { box-shadow: none !important; border-radius: var(--radius-sm) !important; }

/* =============================================================
   FORMS
   ============================================================= */
.form-control {
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  color: var(--text) !important;
  background: #fff !important;
  font-size: 14px !important;
  padding: 8px 12px !important;
  height: auto !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
  font-family: 'Sarabun', sans-serif !important;
}

.form-control:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(26,86,164,.12) !important;
  outline: none !important;
}

.form-control::placeholder { color: #a0aec0 !important; }

.form-group label {
  font-weight: 600 !important;
  color: var(--text) !important;
  font-size: 13.5px !important;
  margin-bottom: 6px !important;
  font-family: 'Sarabun', sans-serif !important;
}

/* =============================================================
   TABLES
   ============================================================= */
.table { color: var(--text) !important; font-size: 14px !important; }

.table > thead > tr > th {
  background: linear-gradient(90deg, var(--primary) 0%, #2176cc 100%) !important;
  color: #ffffff !important;
  font-family: 'Kanit', sans-serif !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  letter-spacing: .03em !important;
  border: none !important;
  padding: 12px 16px !important;
}

.table > tbody > tr > td {
  border-top: 1px solid var(--border) !important;
  padding: 11px 16px !important;
  vertical-align: middle !important;
}

.table-bordered { border: 1.5px solid var(--border) !important; border-radius: 10px; overflow: hidden; }
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td { border-color: var(--border) !important; }

.table-striped > tbody > tr:nth-of-type(even) { background: #f8fafd !important; }
.table-hover > tbody > tr:hover { background: var(--primary-light) !important; }

/* =============================================================
   ALERTS
   ============================================================= */
.alert {
  border-radius: var(--radius-sm) !important;
  border: none !important;
  font-size: 14px !important;
  padding: 12px 16px !important;
}
.alert-success { background: #d1fae5 !important; color: #065f46 !important; border-left: 4px solid var(--success) !important; }
.alert-danger, .alert-error { background: #fee2e2 !important; color: #991b1b !important; border-left: 4px solid var(--danger) !important; }
.alert-warning { background: #fef3c7 !important; color: #92400e !important; border-left: 4px solid var(--accent) !important; }
.alert-info { background: var(--primary-light) !important; color: var(--primary-dark) !important; border-left: 4px solid var(--primary) !important; }

/* =============================================================
   LABELS / BADGES
   ============================================================= */
.label { border-radius: 20px !important; font-weight: 600 !important; font-size: 11px !important; padding: 3px 9px !important; }
.label-primary { background: var(--primary) !important; }
.label-success  { background: var(--success) !important; }
.label-danger   { background: var(--danger) !important; }
.label-warning  { background: var(--accent) !important; color: #fff !important; }
.label-info     { background: var(--info) !important; }
.label-default  { background: var(--border) !important; color: var(--text) !important; }
.badge { border-radius: 20px !important; font-size: 11px !important; font-weight: 700 !important; }

/* =============================================================
   FOOTER
   ============================================================= */
.main-footer {
  background: var(--white) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
  font-size: 13px !important;
  padding: 14px 24px !important;
}

.main-footer a { color: var(--primary) !important; text-decoration: none !important; font-weight: 600; }
.main-footer a:hover { text-decoration: underline !important; }

/* =============================================================
   NAV TABS
   ============================================================= */
.nav-tabs-custom {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
}

.nav-tabs-custom > .nav-tabs {
  border-bottom: 1px solid var(--border) !important;
  padding: 0 12px !important;
  background: linear-gradient(90deg, var(--primary), #2176cc) !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
}

.nav-tabs-custom > .nav-tabs > li > a {
  border-radius: 0 !important;
  color: rgba(255,255,255,.75) !important;
  font-weight: 500 !important;
  padding: 12px 18px !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  transition: var(--transition) !important;
  font-family: 'Sarabun', sans-serif;
}

.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs-custom > .nav-tabs > li > a:hover {
  color: #ffffff !important;
  border-bottom-color: var(--accent) !important;
  background: rgba(255,255,255,.1) !important;
}

.nav-tabs-custom > .tab-content { padding: 18px 20px !important; }

/* =============================================================
   PAGINATION
   ============================================================= */
.pagination > li > a,
.pagination > li > span {
  background: var(--white) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--primary) !important;
  border-radius: var(--radius-sm) !important;
  margin: 0 2px !important;
  transition: var(--transition) !important;
  font-weight: 500;
}

.pagination > li > a:hover {
  background: var(--primary-light) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

.pagination > .active > a,
.pagination > .active > span {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(26,86,164,.25);
}

/* =============================================================
   MODAL
   ============================================================= */
.modal-content {
  border-radius: var(--radius) !important;
  border: none !important;
  box-shadow: 0 20px 60px rgba(26,86,164,.18) !important;
}

.modal-header {
  background: linear-gradient(90deg, var(--primary-dark), var(--primary)) !important;
  border-bottom: none !important;
  padding: 16px 20px !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
}

.modal-header .modal-title {
  font-family: 'Kanit', sans-serif !important;
  font-weight: 600 !important;
  color: #ffffff !important;
}

.modal-header .close {
  color: rgba(255,255,255,.8) !important;
  opacity: 1 !important;
}

.modal-footer {
  border-top: 1px solid var(--border) !important;
  padding: 12px 20px !important;
  background: #f8fafd !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
}

/* =============================================================
   PROGRESS BARS
   ============================================================= */
.progress {
  border-radius: 100px !important;
  height: 9px !important;
  background: var(--primary-light) !important;
  box-shadow: none !important;
}
.progress-bar { border-radius: 100px !important; }
.progress-bar-primary { background: var(--primary) !important; }
.progress-bar-success { background: var(--success) !important; }
.progress-bar-danger  { background: var(--danger) !important; }
.progress-bar-warning { background: var(--accent) !important; }
.progress-bar-info    { background: var(--info) !important; }

/* =============================================================
   SELECT2
   ============================================================= */
.select2-container--default .select2-selection--single {
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  height: 38px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 36px !important;
  color: var(--text) !important;
}

.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(26,86,164,.12) !important;
}

/* =============================================================
   DataTables
   ============================================================= */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 5px 10px !important;
  color: var(--text) !important;
}

/* =============================================================
   SCROLLBAR
   ============================================================= */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--primary-light); }
::-webkit-scrollbar-thumb { background: #7aabe0; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* =============================================================
   RESPONSIVE / MOBILE
   ============================================================= */
@media (max-width: 767px) {
  .main-sidebar {
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1) !important;
    position: fixed !important;
    top: 0; left: 0;
    height: 100vh;
    z-index: 1100;
    width: 260px !important;
    overflow-y: auto;
    border-radius: 0;
  }

  .sidebar-open .main-sidebar { transform: translateX(0) !important; }

  .sidebar-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 1099;
    animation: fadeIn .2s ease;
  }

  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

  .content-wrapper, .main-footer { margin-left: 0 !important; }
  .content { padding: 12px 14px !important; }
  .content-header { padding: 14px 14px 0 !important; }
  .content-header h1 { font-size: 17px !important; }

  .sidebar-menu > li > a {
    padding: 12px 20px !important;
    min-height: 46px;
    font-size: 15px !important;
  }

  .sidebar-menu .treeview-menu > li > a {
    padding: 11px 20px 11px 44px !important;
    min-height: 42px;
    font-size: 14px !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .content { padding: 14px 18px !important; }
  .sidebar-menu > li > a { font-size: 13.5px !important; }
}

/* Sidebar mini tooltip */
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
  box-shadow: 4px 4px 20px rgba(26,86,164,.15) !important;
  border-left: 3px solid var(--primary) !important;
}

/* =============================================================
   PRINT
   ============================================================= */
@media print {
  .main-sidebar, .main-header, .main-footer { display: none !important; }
  .content-wrapper { margin: 0 !important; }
}