/* ============================================================
   ePension - สลิปเงินเดือนบำนาญ | สพป.ลำปาง เขต 1
   Modern UI - v4.0
   รองรับ PHP 5.x, 7.x, 8.x
============================================================ */

/* ---- Root Variables ---- */
:root {
  --primary:      #1a56a0;
  --primary-dark: #0d2137;
  --primary-light:#3a7bd5;
  --accent:       #f4a229;
  --success:      #2e7d32;
  --danger:       #c62828;
  --text-dark:    #1a2233;
  --text-muted:   #6c7a8d;
  --bg-light:     #eef2f7;
  --white:        #ffffff;
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:    0 4px 20px rgba(0,0,0,0.12);
  --shadow-lg:    0 8px 35px rgba(0,0,0,0.16);
  --radius:       12px;
  --transition:   all 0.28s ease;
}

/* ---- Body & Global ---- */
body {
  background-color: var(--bg-light) !important;
  color: var(--text-dark) !important;
}

a { transition: var(--transition); }

/* ---- Top Navbar ---- */
.main-header.navbar {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.22) !important;
  border-bottom: none !important;
  min-height: 57px;
}
.main-header .navbar-nav .nav-link {
  color: rgba(255,255,255,0.88) !important;
  transition: var(--transition) !important;
  border-radius: 8px;
  margin: 0 2px;
}
.main-header .navbar-nav .nav-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.12) !important;
}

/* ---- Sidebar ---- */
.main-sidebar {
  background: linear-gradient(180deg, #0a1520 0%, #0d2137 50%, #143050 100%) !important;
  box-shadow: 3px 0 12px rgba(0,0,0,0.28) !important;
}
.brand-link {
  background: rgba(0,0,0,0.2) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  padding: 12px 16px !important;
}
.brand-link:hover { background: rgba(0,0,0,0.3) !important; }

.user-panel { border-bottom: 1px solid rgba(255,255,255,0.1) !important; }
.user-panel .info a { color: rgba(255,255,255,0.88) !important; font-weight: 600 !important; }

/* Sidebar nav items */
.nav-sidebar .nav-link {
  border-radius: 9px !important;
  margin: 2px 10px !important;
  transition: var(--transition) !important;
  color: rgba(255,255,255,0.75) !important;
}
.nav-sidebar .nav-link:hover {
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-light)) !important;
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(26,86,160,0.4) !important;
}

/* ---- Cards ---- */
.card {
  border: none !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-md) !important;
  transition: var(--transition) !important;
}
.card-header {
  background: linear-gradient(135deg, var(--primary), var(--primary-light)) !important;
  color: #fff !important;
  border-bottom: none !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  padding: 14px 20px !important;
}
.card-header h3, .card-header h5, .card-header .card-title {
  color: #fff !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

/* ---- Buttons ---- */
.btn {
  border-radius: 9px !important;
  font-weight: 500 !important;
  transition: var(--transition) !important;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-light)) !important;
  border: none !important;
  box-shadow: 0 3px 12px rgba(26,86,160,0.28) !important;
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary)) !important;
  box-shadow: 0 5px 18px rgba(26,86,160,0.4) !important;
}
.btn-success {
  background: linear-gradient(135deg, #1b5e20, #2e7d32) !important;
  border: none !important;
}
.btn-warning {
  background: linear-gradient(135deg, #e65100, var(--accent)) !important;
  color: #fff !important;
  border: none !important;
}
.btn-danger {
  background: linear-gradient(135deg, #b71c1c, var(--danger)) !important;
  border: none !important;
}
.btn-info {
  background: linear-gradient(135deg, #01579b, #0288d1) !important;
  border: none !important;
}
.btn-block { display: block !important; width: 100% !important; }

/* ---- Forms ---- */
.form-control {
  border-radius: 9px !important;
  border: 2px solid #dde4ef !important;
  padding: 9px 14px !important;
  font-size: 0.95rem !important;
  transition: var(--transition) !important;
  color: var(--text-dark) !important;
}
.form-control:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(26,86,160,0.14) !important;
}
.input-group-text {
  border-radius: 9px !important;
  border: 2px solid #dde4ef !important;
  background: #f4f7fc !important;
  color: #8899aa !important;
}
select.form-control { appearance: auto; }

/* ---- Tables ---- */
.table thead th {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff !important;
  border: none !important;
  font-weight: 600 !important;
  padding: 11px 14px !important;
  white-space: nowrap;
}
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(26,86,160,0.035) !important;
}
.table-hover tbody tr:hover {
  background-color: rgba(26,86,160,0.07) !important;
}
.table { border-radius: 9px !important; overflow: hidden; }

/* ---- Breadcrumb ---- */
.breadcrumb { background: transparent !important; padding: 0 !important; margin: 0 !important; }
.breadcrumb-item.active { color: var(--primary) !important; font-weight: 600; }
.breadcrumb-item a { color: var(--text-muted) !important; }
.breadcrumb-item a:hover { color: var(--primary) !important; }

/* ---- Content Header ---- */
.content-header h1 {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: var(--primary-dark) !important;
}

/* ---- Callout ---- */
.callout {
  border-radius: 10px !important;
  border-left: 5px solid var(--primary) !important;
}
.callout-info {
  background: rgba(26,86,160,0.05) !important;
  border-color: var(--primary) !important;
}

/* ---- Alert ---- */
.alert { border-radius: 10px !important; border: none !important; }
.alert-warning { background: linear-gradient(135deg,#fff8e1,#fffde7) !important; color: #795548 !important; border-left: 4px solid var(--accent) !important; }
.alert-danger  { background: linear-gradient(135deg,#ffebee,#fce4ec) !important; color: #b71c1c !important; border-left: 4px solid var(--danger) !important; }
.alert-success { background: linear-gradient(135deg,#e8f5e9,#f1f8e9) !important; color: #1b5e20 !important; border-left: 4px solid var(--success) !important; }

/* ---- Badges ---- */
.badge { border-radius: 6px !important; font-weight: 500 !important; }

/* ---- Modal ---- */
.modal-content  { border-radius: 16px !important; border: none !important; }
.modal-header   {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff !important;
  border-radius: 16px 16px 0 0 !important;
  border-bottom: none !important;
}
.modal-title    { color: #fff !important; font-weight: 700 !important; }
.modal-header .btn-close { filter: invert(1) !important; }

/* ---- Content Wrapper ---- */
.content-wrapper { background: var(--bg-light) !important; }

/* ---- Main Footer ---- */
.main-footer {
  background: #fff !important;
  border-top: 1px solid #dde4ef !important;
  color: var(--text-muted) !important;
  font-size: 0.84rem !important;
}

/* ---- Loading Spinner ---- */
#loading { background: rgba(255,255,255,0.96) !important; opacity: 1 !important; }

/* ---- Dropdown ---- */
.dropdown-menu {
  border-radius: 12px !important;
  border: none !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.14) !important;
  padding: 6px !important;
}
.dropdown-item {
  border-radius: 8px !important;
  transition: var(--transition) !important;
  font-size: 0.9rem !important;
}
.dropdown-item:hover {
  background: rgba(26,86,160,0.08) !important;
  color: var(--primary) !important;
}

/* ---- Accordion ---- */
.accordion-button:not(.collapsed) {
  color: var(--primary) !important;
  background-color: rgba(26,86,160,0.06) !important;
  box-shadow: none !important;
}
.accordion-item { border-radius: 10px !important; overflow: hidden; border: 1px solid #dde4ef !important; }

/* ---- Blinking Text ---- */
@keyframes ePensionBlink {
  0%,100% { opacity: 1; } 50% { opacity: 0.45; }
}
.blinking-text { animation: ePensionBlink 1.8s ease-in-out infinite; }

/* ---- DataTables custom ---- */
.dataTables_wrapper .dataTables_filter input {
  border-radius: 8px !important;
  border: 2px solid #dde4ef !important;
  padding: 6px 12px !important;
}
.dataTables_wrapper .dataTables_length select {
  border-radius: 8px !important;
  border: 2px solid #dde4ef !important;
}
.paginate_button.current, .paginate_button.current:hover {
  background: var(--primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .content-header h1 { font-size: 1.15rem !important; }
  .card-header { padding: 12px 16px !important; }
}

/* ---- Print Styles ---- */
@media print {
  .main-sidebar, .main-header, .main-footer,
  .no-print, .content-header { display: none !important; }
  .content-wrapper { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  body { background: #fff !important; }
}