/* =====================================================
   CPASS – Enhanced Professional UI Override
   Layered on AdminLTE 2 + Bootstrap 3
   ===================================================== */

/* ---------- 1. GOOGLE FONT ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ---------- 2. CSS CUSTOM PROPERTIES ---------- */
:root {
  --primary:      #4361ee;
  --primary-dark: #3a0ca3;
  --accent:       #4cc9f0;
  --success:      #2ec4b6;
  --warning:      #f77f00;
  --danger:       #e63946;
  --sidebar-bg:   #1a2332;
  --sidebar-hover:#243044;
  --sidebar-active:#4361ee;
  --header-bg:    #1a2332;
  --body-bg:      #f0f2f8;
  --card-shadow:  0 4px 20px rgba(0,0,0,0.08);
  --radius:       10px;
  --radius-sm:    6px;
  --transition:   0.2s ease;
}

/* ---------- 3. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

body, html {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 13.5px;
  color: #2d3748;
  background: var(--body-bg) !important;
}

/* ---------- 4. TOP HEADER ---------- */
.skin-blue .main-header .navbar,
.main-header .navbar {
  background: var(--header-bg) !important;
  border-bottom: none !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

.skin-blue .main-header .logo,
.main-header .logo {
  background: #141c28 !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  border-bottom: none !important;
}

.skin-blue .main-header .logo:hover,
.main-header .logo:hover {
  background: #0f1520 !important;
}

.skin-blue .main-header .logo .logo-lg { color: #ffffff; }
.skin-blue .main-header .logo .logo-lg b { color: var(--accent); }

.main-header .navbar .nav > li > a {
  color: #c8d0e0 !important;
  font-weight: 500;
  transition: color var(--transition);
  padding: 15px 14px;
}
.main-header .navbar .nav > li > a:hover { color: #fff !important; }

.main-header .navbar .sidebar-toggle {
  color: #c8d0e0 !important;
  font-size: 17px;
  padding: 15px 16px;
}
.main-header .navbar .sidebar-toggle:hover {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
}

/* marquee in header */
.main-header marquee a { color: var(--accent) !important; }

/* ---------- 5. SIDEBAR ---------- */

/* wrapper: style-new.min.css sets background:#fff which shows as white strip below footer */
.skin-blue .wrapper,
.wrapper {
  background: var(--body-bg) !important;
}

.skin-blue .main-sidebar,
.skin-blue .left-side,
.main-sidebar {
  background: var(--sidebar-bg) !important;
  border-right: none !important;
}

/* sidebar li items — style.min.css sets background:#F9F9F9 which causes white tinge */
.skin-blue .sidebar-menu > li,
.sidebar-menu > li {
  background: transparent !important;
  border-bottom-color: rgba(255,255,255,0.05) !important;
}

/* user panel */
.skin-blue .user-panel > .info,
.skin-blue .user-panel > .info > a {
  color: black !important;
  font-weight: 600;
}
.user-panel { padding: 14px 12px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.user-panel .image img {
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  width: 38px;
  height: 38px;
}

/* sidebar section header */
.skin-blue .sidebar-menu > li.header {
  background: transparent !important;
  color: #6b7a99 !important;
  border: none !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 14px 16px 6px;
}

/* sidebar menu — kill style-new.min.css padding that reduces available width */
.skin-blue .sidebar-menu,
.sidebar-menu {
  padding: 0 0 8px !important;
}

/* sidebar menu items */
.skin-blue .sidebar-menu > li > a,
.sidebar-menu > li > a {
  color: #c8d0e0 !important;
  font-weight: 500;
  font-size: 13px;
  border-left: 3px solid transparent !important;
  padding: 11px 16px !important;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  border-radius: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  width: 100% !important;
  max-width: 230px !important;
}

.skin-blue .sidebar-menu > li > a:hover,
.skin-blue .sidebar-menu > li.active > a {
  background: var(--sidebar-hover) !important;
  color: #ffffff !important;
  border-left-color: var(--sidebar-active) !important;
}

.skin-blue .sidebar-menu > li.active > a {
  background: rgba(67,97,238,0.18) !important;
  color: #fff !important;
}

/* sub-menu (treeview-menu) */
.skin-blue .treeview-menu,
.treeview-menu {
  background: rgba(255,255,255,0.06) !important;
  padding: 4px 0 !important;
  margin: 0 !important;
  border-left: none !important;
}
.skin-blue .treeview-menu > li > a {
  color: #c8d0e0 !important;
  font-size: 12.5px;
  padding: 7px 12px 7px 30px !important;
  transition: color var(--transition);
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  max-width: 100% !important;
  border-radius: 0 !important;
}
.skin-blue .treeview-menu > li > a:hover,
.skin-blue .treeview-menu > li.active > a {
  color: #fff !important;
  background: rgba(255,255,255,0.1) !important;
}

/* mini-sidebar hover popup — appears over light content background */
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
  background: var(--sidebar-bg) !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
  box-shadow: 4px 4px 12px rgba(0,0,0,0.2) !important;
}
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span {
  background: var(--sidebar-bg) !important;
  color: #fff !important;
}
.sidebar-mini.sidebar-collapse .treeview-menu > li > a {
  color: #c0cbdf !important;
}

.skin-blue .sidebar a { color: #c8d0e0 !important; }
.skin-blue .sidebar a:hover { text-decoration: none; }

/* sidebar icons */
.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > img {
  width: 20px;
  text-align: center;
  margin-right: 8px;
  opacity: 0.85;
}

/* slimscroll track */
.slimScrollBar { background: rgba(255,255,255,0.12) !important; border-radius: 3px !important; }

/* ---------- 6. CONTENT WRAPPER ---------- */
/* Override style-new.min.css's !important min-height which causes empty space below footer */
.content-wrapper,
.right-side {
  background: var(--body-bg) !important;
  min-height: 0 !important;
}

/* .wrapper has overflow:hidden which clips calendar popups on short pages.
   Keep overflow-x:hidden (mobile sidebar needs it) but allow vertical overflow. */
.wrapper {
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

.content-header {
  padding: 18px 20px 12px !important;
  background: transparent !important;
  border-bottom: none !important;
}
.content-header h1 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1a2332;
  margin: 0 0 4px !important;
}

/* breadcrumb */
.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 12px;
}
.breadcrumb > li { color: #718096; }
.breadcrumb > li + li::before { color: #a0aec0; content: "›"; padding: 0 6px; }
.breadcrumb > .active { color: var(--primary); font-weight: 600; }
.breadcrumb a { color: #718096; transition: color var(--transition); }
.breadcrumb a:hover { color: var(--primary); text-decoration: none; }

/* ---------- 7. CARDS / BOX ---------- */
.box {
  border: none !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--card-shadow) !important;
  background: #fff !important;
  margin-bottom: 20px;
  overflow: visible !important;
}
.box-primary { border-top: 3px solid var(--primary) !important; }
.box-success  { border-top: 3px solid var(--success)  !important; }
.box-warning  { border-top: 3px solid var(--warning)  !important; }
.box-danger   { border-top: 3px solid var(--danger)   !important; }
.box-info     { border-top: 3px solid var(--accent)   !important; }

.box-header {
  padding: 16px 20px !important;
  border-bottom: 1px solid #edf2f7 !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
}
.box-header.with-border { border-bottom: 1px solid #edf2f7 !important; }

.box-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #2d3748 !important;
  letter-spacing: -0.2px;
}

.box-body {
  padding: 18px 20px !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
}

/* ---------- 8. DASHBOARD – SMALL BOXES ---------- */
.small-box {
  border-radius: var(--radius) !important;
  box-shadow: var(--card-shadow) !important;
  overflow: hidden;
  transition: transform 0.18s, box-shadow 0.18s;
}
.small-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.13) !important;
}
.small-box > .inner { padding: 16px 18px; }
.small-box > .inner h3 {
  font-size: 30px !important;
  font-weight: 800 !important;
  margin: 0 0 4px !important;
}
.small-box > .inner p { font-size: 13px; font-weight: 600; opacity: 0.92; }
.small-box > .small-box-footer {
  background: rgba(0,0,0,0.12) !important;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: background var(--transition);
}
.small-box:hover > .small-box-footer { background: rgba(0,0,0,0.2) !important; }

.small-box.bg-aqua   { background: linear-gradient(135deg, #4361ee, #3a86ff) !important; }
.small-box.bg-green  { background: linear-gradient(135deg, #2ec4b6, #06d6a0) !important; }
.small-box.bg-yellow { background: linear-gradient(135deg, #f77f00, #fcbf49) !important; }
.small-box.bg-red    { background: linear-gradient(135deg, #e63946, #c1121f) !important; }
.small-box.bg-purple { background: linear-gradient(135deg, #7209b7, #560bad) !important; }
.small-box.bg-navy   { background: linear-gradient(135deg, #1a2332, #243044) !important; }
.small-box.bg-teal   { background: linear-gradient(135deg, #118ab2, #06d6a0) !important; }
.small-box.bg-olive  { background: linear-gradient(135deg, #3a86ff, #4cc9f0) !important; }

/* ---------- 9. BUTTONS ---------- */
.btn {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border-radius: var(--radius-sm) !important;
  padding: 7px 18px !important;
  transition: all var(--transition) !important;
  letter-spacing: 0.2px;
  border: none !important;
}
.btn:focus, .btn:active:focus { outline: none !important; box-shadow: none !important; }

.btn-primary, .btn-flat.btn-primary {
  background: var(--primary) !important;
  color: #fff !important;
}
.btn-primary:hover { background: var(--primary-dark) !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(67,97,238,0.35) !important; }

.btn-success, .bg-olive, .btn-flat.btn-success {
  background: var(--success) !important;
  color: #fff !important;
}
.btn-success:hover, .bg-olive:hover { background: #25a99d !important; transform: translateY(-1px); }

.btn-danger, .btn-flat.btn-danger {
  background: var(--danger) !important;
  color: #fff !important;
}
.btn-danger:hover { background: #c1121f !important; transform: translateY(-1px); }

.btn-warning, .btn-flat.btn-warning {
  background: var(--warning) !important;
  color: #fff !important;
}
.btn-warning:hover { background: #d9690a !important; }

.btn-default, .btn-flat.btn-default {
  background: #fff !important;
  color: #4a5568 !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}
.btn-default:hover { background: #f7fafc !important; border-color: #cbd5e0 !important; }

.btn-info {
  background: var(--accent) !important;
  color: #fff !important;
}

/* pull-right export/refresh buttons */
.btn.pull-right { margin-left: 8px !important; }

/* ---------- 10. FORMS ---------- */
.form-group { margin-bottom: 16px !important; }

/* date-picker containers used in report pages — ensure vertical gap after them */
.example-container { margin-bottom: 16px !important; padding-left: 0 !important; }
.example-container label { font-size: 12px !important; font-weight: 700 !important; color: #4a5568 !important; text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 6px; }
.example-container input[type="text"] {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13.5px !important;
  height: 38px !important;
  padding: 6px 12px !important;
  background: #fff !important;
  box-shadow: none !important;
  font-family: 'Inter', sans-serif !important;
  width: 100% !important;
  display: block !important;
  color: #2d3748 !important;
}

.form-group label {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #4a5568 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px !important;
}

.form-control {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13.5px !important;
  color: #2d3748 !important;
  height: 38px !important;
  padding: 6px 12px !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: border-color var(--transition), box-shadow var(--transition) !important;
  font-family: 'Inter', sans-serif !important;
}
.form-control:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(67,97,238,0.12) !important;
}
.form-control[readonly] {
  background: #f7fafc !important;
  color: #718096 !important;
}
textarea.form-control { height: auto !important; }

select.form-control {
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234a5568' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  padding-right: 30px !important;
}

/* ---------- 11. BOOTSTRAP-SELECT (SELECTPICKER) ---------- */
/* .bs-container is the body-level div created by selectpicker — exclude it from wrapper rules */
.bootstrap-select:not(.bs-container) {
  width: 100% !important;
  display: block !important;
  position: relative !important;
}

/* strip ALL visual styling from the inline wrapper (not the body-level bs-container) */
.bootstrap-select.form-control:not(.bs-container),
.bootstrap-select.btn-group:not(.bs-container),
div.bootstrap-select:not(.bs-container) {
  border: 0 !important;
  border-width: 0 !important;
  border-color: transparent !important;
  padding: 0 !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
}

.bootstrap-select:not(.bs-container) > .dropdown-toggle {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: var(--radius-sm) !important;
  background: #fff !important;
  color: #2d3748 !important;
  font-size: 13.5px !important;
  height: 38px !important;
  padding: 6px 12px !important;
  box-shadow: none !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  width: 100% !important;
}
.bootstrap-select:not(.bs-container) > .dropdown-toggle:focus,
.bootstrap-select.open:not(.bs-container) > .dropdown-toggle {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(67,97,238,0.12) !important;
  outline: none !important;
}
.bootstrap-select .dropdown-toggle .filter-option { line-height: 24px; }

/* body-level container div bootstrap-select creates when container:'body' */
/* width/display/position must NOT be !important here — JS sets inline width in px */
.bs-container {
  position: absolute !important;
  z-index: 9999 !important;
  width: auto;        /* let JS inline style set the exact px width */
  display: block;
  background: transparent;
  border: none;
  padding: 0;
}
.bs-container .dropdown-menu {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
  margin-top: 3px !important;
}
.bs-container .dropdown-menu li a {
  font-size: 13px !important;
  padding: 7px 14px !important;
  color: #2d3748 !important;
}
.bs-container .dropdown-menu li a:hover,
.bs-container .dropdown-menu li.active a {
  background: rgba(67,97,238,0.08) !important;
  color: var(--primary) !important;
}
.bs-container .bs-searchbox input {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13px !important;
}

/* Inline (non-body-container) dropdown menu — fills the wrapper column width */
.bootstrap-select:not(.bs-container) .dropdown-menu {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
  margin-top: 3px !important;
}
.bootstrap-select:not(.bs-container) .dropdown-menu li a {
  font-size: 13px !important;
  padding: 7px 14px !important;
  color: #2d3748 !important;
  transition: background var(--transition) !important;
}
.bootstrap-select:not(.bs-container) .dropdown-menu li a:hover,
.bootstrap-select:not(.bs-container) .dropdown-menu li.active a {
  background: rgba(67,97,238,0.08) !important;
  color: var(--primary) !important;
}
.bs-searchbox input {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13px !important;
}

/* ---------- 12. TABLES / DATATABLES ---------- */
.table { font-size: 13px !important; }
.table > thead > tr > th {
  background: #2d3748 !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 11px 14px !important;
  border: none !important;
  white-space: nowrap;
}
.table > thead > tr > th a,
.table > thead > tr > th .DataTables_sort_wrapper { color: #fff !important; }

.table > tbody > tr > td {
  padding: 10px 14px !important;
  border-top: 1px solid #edf2f7 !important;
  vertical-align: middle !important;
  color: #4a5568;
}
.table-striped > tbody > tr:nth-of-type(odd) { background: #f8fafc !important; }
.table-hover > tbody > tr:hover { background: rgba(67,97,238,0.06) !important; }

/* DataTables wrapper */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: var(--radius-sm) !important;
  padding: 5px 10px !important;
  font-size: 13px !important;
  font-family: 'Inter', sans-serif !important;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--primary) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(67,97,238,0.1);
}
.dataTables_wrapper .dataTables_info { color: #718096 !important; font-size: 12px; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  padding: 5px 11px !important;
  color: #4a5568 !important;
  border: 1.5px solid #e2e8f0 !important;
  background: #fff !important;
  margin: 0 2px;
  transition: all var(--transition);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(67,97,238,0.30) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  opacity: 0.4;
  cursor: not-allowed;
}

/* processing overlay */
.dataTables_processing {
  background: rgba(255,255,255,0.92) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--card-shadow) !important;
  color: var(--primary) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 10px 20px !important;
}

/* sort icons */
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after { color: rgba(255,255,255,0.6); }

/* ---------- 13. ALERTS / MESSAGES ---------- */
.alert {
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 12px 16px !important;
}
.alert-success { background: rgba(46,196,182,0.12) !important; color: #1a7a72 !important; }
.alert-danger, .alert-error { background: rgba(230,57,70,0.1) !important; color: #c1121f !important; }
.alert-warning { background: rgba(247,127,0,0.1) !important; color: #b35900 !important; }
.alert-info { background: rgba(76,201,240,0.1) !important; color: #0076a8 !important; }

/* ---------- 14. MODAL ---------- */
.modal-content {
  border: none !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2) !important;
}
.modal-header {
  background: var(--primary) !important;
  color: #fff !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  padding: 14px 20px !important;
  border-bottom: none !important;
}
.modal-header h4, .modal-title { color: #fff !important; font-weight: 700 !important; font-size: 15px !important; }
.modal-header .close { color: #fff !important; opacity: 0.8; font-size: 20px; }
.modal-header .close:hover { opacity: 1; }
.modal-body { padding: 20px !important; }
.modal-footer {
  border-top: 1px solid #edf2f7 !important;
  padding: 14px 20px !important;
  background: #f8fafc !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
}

/* ---------- 15. BADGES & LABELS ---------- */
.label, .badge {
  border-radius: 20px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  padding: 3px 9px !important;
}
.label-primary, .badge-primary { background: var(--primary) !important; }
.label-success, .badge-success { background: var(--success) !important; }
.label-danger,  .badge-danger  { background: var(--danger)  !important; }
.label-warning, .badge-warning { background: var(--warning) !important; }

/* ---------- 16. INPUT GROUP ---------- */
.input-group-addon {
  background: #f7fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: var(--radius-sm) !important;
  color: #718096;
  font-size: 13px;
}

/* ---------- 17. TABS ---------- */
.nav-tabs { border-bottom: 2px solid #edf2f7 !important; }
.nav-tabs > li > a {
  border: none !important;
  color: #718096 !important;
  font-weight: 600;
  font-size: 13px;
  padding: 10px 18px !important;
  border-radius: 0 !important;
  transition: color var(--transition);
}
.nav-tabs > li > a:hover { color: var(--primary) !important; background: transparent !important; }
.nav-tabs > li.active > a {
  border-bottom: 3px solid var(--primary) !important;
  color: var(--primary) !important;
  background: transparent !important;
  font-weight: 700;
}

/* ---------- 18. FOOTER ---------- */
.main-footer {
  background: #fff !important;
  border-top: 1px solid #edf2f7 !important;
  color: #a0aec0 !important;
  font-size: 12px !important;
  padding: 12px 20px !important;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
}

/* ---------- 19. LOGIN PAGE ---------- */
body.login-page {
  background: linear-gradient(135deg, #1a2332 0%, #243044 40%, #4361ee 100%) !important;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-box {
  width: 420px !important;
  margin: auto !important;
  margin-top: 0 !important;
}

.login-logo {
  text-align: center;
  margin-bottom: 24px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: -0.5px;
}
.login-logo b { color: var(--accent); }
.login-logo a { color: #fff !important; }

.login-box-body {
  background: #fff !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important;
  padding: 32px 36px !important;
  border: none !important;
  border-top: none !important;
}

.login-box-msg {
  color: #4a5568 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-bottom: 20px !important;
  padding: 0 !important;
  text-align: center;
}

.login-box-body .form-group {
  position: relative;
}
.login-box-body .form-control {
  padding-right: 42px !important;
}
.login-box-body .form-control-feedback {
  color: #a0aec0;
  line-height: 38px;
  font-size: 16px;
}

.login-box-body .btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
  padding: 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 4px 15px rgba(67,97,238,0.4) !important;
  width: 100%;
}
.login-box-body .btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-dark), #280d85) !important;
  box-shadow: 0 6px 20px rgba(67,97,238,0.5) !important;
  transform: translateY(-1px);
}

/* loading spinner in login */
.loading { text-align: center; padding: 10px; color: var(--primary); }

/* ---------- 20. CONTENT SECTION PADDING ---------- */
.content { padding: 16px 20px !important; }

/* row gutter fix */
.box-body .row { margin-left: -8px; margin-right: -8px; }
.box-body .col-md-1, .box-body .col-md-2, .box-body .col-md-3,
.box-body .col-md-4, .box-body .col-md-5, .box-body .col-md-6,
.box-body .col-md-7, .box-body .col-md-8, .box-body .col-md-9,
.box-body .col-md-10,.box-body .col-md-11,.box-body .col-md-12 {
  padding-left: 8px;
  padding-right: 8px;
}

/* ---------- 21. MISC UTILITY ---------- */
/* section spacing above table */
.box-body + .box-body { border-top: 1px solid #edf2f7; }

/* highlight text in modals */
b, strong { font-weight: 700; }

/* pre tags used as jQuery UI date picker initializers - hide cleanly */
pre[style*="visibility: hidden"] { display: none !important; }

/* scrollbars */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: #f0f2f8; }
::-webkit-scrollbar-thumb { background: #c5cde0; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a0aec0; }

/* ---------- 22. SEARCH FORM ROW LAYOUT ---------- */
.box-body .form-group.col-md-6,
.box-body .form-group.col-md-4,
.box-body .form-group.col-md-3 {
  margin-bottom: 14px !important;
}

/* Better spacing for filter/search blocks */
#mainseachDiv, #filterDiv {
  background: #f8fafc;
  border-radius: var(--radius-sm);
  padding: 16px 4px 8px !important;
  margin-bottom: 16px;
  border: 1px solid #edf2f7;
}

/* ---------- 23. DATEPICKER POPUP ---------- */
#ui-datepicker-div,
.ui-datepicker {
  z-index: 9999 !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
}
.ui-datepicker .ui-datepicker-header {
  background: var(--primary) !important;
  border: none !important;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.ui-datepicker td .ui-state-active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
  border-radius: 4px !important;
}
.ui-datepicker td .ui-state-hover {
  background: rgba(67,97,238,0.1) !important;
  border-radius: 4px !important;
}

/* ---------- 24. TOASTR NOTIFICATIONS ---------- */
#toast-container > div {
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}
#toast-container .toast-success { background: var(--success) !important; }
#toast-container .toast-error   { background: var(--danger)  !important; }
#toast-container .toast-warning { background: var(--warning) !important; }
#toast-container .toast-info    { background: var(--primary) !important; }

/* ---------- 25. RESPONSIVE ADJUSTMENTS ---------- */
@media (max-width: 767px) {
  .login-box { width: 94% !important; padding: 0 10px; }
  .login-box-body { padding: 24px 20px !important; }
  .content-header h1 { font-size: 17px !important; }
  .box-body { padding: 14px !important; }
}

/* ---------- 26. CHECKBOXES / RADIO CUSTOM ---------- */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--primary);
  width: 14px;
  height: 14px;
}

/* ---------- 27. BOX LOADING OVERLAY ---------- */
.overlay {
  border-radius: var(--radius) !important;
  background: rgba(255,255,255,0.85) !important;
}
.overlay > .fa { color: var(--primary) !important; }

/* ---------- 28. CONTENT-HEADER ACTION BUTTONS ROW ---------- */
.content-header .btn {
  font-size: 12.5px !important;
  padding: 6px 14px !important;
}

/* ========================================================
   29. PROFESSIONAL FORM ENHANCEMENTS
   ======================================================== */

/* Form section divider with heading */
.form-section {
  margin: 22px 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid #edf2f7;
  display: flex;
  align-items: center;
  gap: 10px;
}
.form-section h4 {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--primary) !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 !important;
  white-space: nowrap;
}
.form-section::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #edf2f7;
}

/* Required star */
label .req { color: var(--danger); margin-left: 2px; font-weight: 700; }

/* Hint text below fields */
.field-hint {
  font-size: 11px;
  color: #a0aec0;
  margin-top: 4px;
  line-height: 1.4;
}

/* Radio / checkbox inline row */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 6px 0;
}
.radio-group label {
  display: flex !important;
  align-items: center;
  gap: 6px;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: #4a5568 !important;
  cursor: pointer;
  margin: 0 !important;
}
.radio-group input[type="radio"],
.radio-group input[type="checkbox"] {
  margin: 0 !important;
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* Form action bar (replaces box-footer) */
.form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #f8fafc;
  border-top: 1px solid #edf2f7;
  border-radius: 0 0 var(--radius) var(--radius);
  margin: 28px -20px -20px;
  gap: 10px;
}
.form-actions .btn { min-width: 110px; }
.form-actions .btn-cancel {
  background: #fff !important;
  color: #718096 !important;
  border: 1.5px solid #e2e8f0 !important;
}
.form-actions .btn-cancel:hover {
  background: #f7fafc !important;
  border-color: #cbd5e0 !important;
  color: #4a5568 !important;
}
.form-actions .btn-submit {
  background: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(67,97,238,0.30) !important;
}
.form-actions .btn-submit:hover {
  background: var(--primary-dark) !important;
  transform: translateY(-1px);
}

/* Compact 2-column form row */
.form-row-2 { display: flex; gap: 16px; }
.form-row-2 .form-group { flex: 1; min-width: 0; }

/* Read-only badge-style display value */
.field-display {
  display: block;
  padding: 7px 12px;
  background: #f7fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: #718096;
  min-height: 38px;
  line-height: 22px;
}

/* Better box padding for form pages */
.box .box-body { padding: 20px !important; }
.box .box-header.with-border { border-bottom: 2px solid #edf2f7 !important; }
.box .box-header.with-border .box-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #2d3748 !important;
}

/* box-footer modernised (used in pages not yet migrated to .form-actions) */
.box-footer {
  background: #f8fafc !important;
  border-top: 1px solid #edf2f7 !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
  padding: 14px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}
.box-footer .btn + .btn { margin-left: 8px !important; }

/* Response / status message */
#response:not(:empty) {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(46,196,182,0.1);
  border-left: 3px solid var(--success);
  color: #2d3748;
}

/* ── jQuery Validate error labels ── */
label.error,
.form-group label.error,
.box-body label.error {
  color: #e63946 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  margin-top: 4px !important;
  display: block !important;
}
label.error::before,
.form-group label.error::before {
  content: "\f071\00a0";
  font-family: FontAwesome;
  font-size: 10px;
}
.form-group.has-error .form-control,
.form-control.error {
  border-color: #e63946 !important;
  box-shadow: 0 0 0 2px rgba(230,57,70,0.15) !important;
}
.form-group.has-success .form-control,
.form-control.valid {
  border-color: var(--success) !important;
  box-shadow: 0 0 0 2px rgba(46,196,182,0.15) !important;
}