/* ============================================================
   ElectronicMedia — Design Enhancement Layer
   Thoda modern feel, Microsoft .NET portal jaisi polish
   ============================================================ */

/* --- Google Font: Inter for crisp UI text --- */
/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); */

/* ============================================================
   1. CSS VARIABLES
   ============================================================ */
:root {
  --em-primary:    #1a6b9a;
  --em-primary-dk: #0b5070;
  --em-accent:     #e9711f;
  --em-success:    #1a9d5a;
  --em-danger:     #d93025;
  --em-warning:    #f0a500;
  --em-muted:      #6c7a8d;
  --em-border:     #d0d7de;
  --em-bg-soft:    #f6f8fa;
  --em-shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --em-shadow-md:  0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
  --em-radius:     6px;
  --em-radius-sm:  4px;
  --em-transition: all .18s ease;
}

/* ============================================================
   2. FORM INPUTS — clean border + focus glow
   ============================================================ */
.form-control {
  border: 1.5px solid var(--em-border);
  border-radius: var(--em-radius-sm);
  padding: .42rem .7rem;
  font-size: .85rem;
  color: #2d3748;
  background-color: #fff;
  transition: var(--em-transition);
  box-shadow: none;
}

.form-control:hover {
  border-color: #b0bec5;
}

.form-control:focus {
  border-color: var(--em-primary);
  box-shadow: 0 0 0 3px rgba(26,107,154,.15);
  outline: none;
  background-color: #fafcff;
}

.form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(217,48,37,.15);
}

.form-control.is-valid:focus {
  box-shadow: 0 0 0 3px rgba(26,157,90,.15);
}

/* Select inputs */
select.form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236c7a8d' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  padding-right: 2rem;
}

/* Form labels */
.form-group label {
  font-size: .8rem;
  font-weight: 600;
  color: #4a5568;
  margin-bottom: .3rem;
  letter-spacing: .01em;
}

/* Input group */
.input-group .input-group-text {
  background: var(--em-bg-soft);
  border: 1.5px solid var(--em-border);
  color: var(--em-muted);
  font-size: .82rem;
}

.input-group .form-control:not(:first-child) {
  border-left: 0;
}

/* Textarea */
textarea.form-control {
  resize: vertical;
  min-height: 80px;
}

/* ============================================================
   3. BUTTONS — gradient + hover lift
   ============================================================ */
.btn {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: var(--em-radius-sm);
  padding: .42rem .9rem;
  /* transition: var(--em-transition); */
  border: none;
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background .15s;
}

.btn:hover::after {
  background: rgba(255,255,255,.08);
}

.btn:active {
  filter: brightness(.92);
}

/* Primary */
.btn-primary {
  background: linear-gradient(135deg, #1a82b8, var(--em-primary-dk));
  color: #fff;
  box-shadow: 0 2px 6px rgba(26,107,154,.35);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #1a90cc, #0d6090);
  box-shadow: 0 4px 12px rgba(26,107,154,.40);
  color: #fff;
}
.btn-primary:focus { box-shadow: 0 0 0 3px rgba(26,107,154,.30); }

/* Success */
.btn-success {
  background: linear-gradient(135deg, #25b36a, #157845);
  color: #fff;
  box-shadow: 0 2px 6px rgba(26,157,90,.35);
}
.btn-success:hover {
  background: linear-gradient(135deg, #2ac474, #1a8c50);
  box-shadow: 0 4px 12px rgba(26,157,90,.40);
  color: #fff;
}
.btn-success:focus { box-shadow: 0 0 0 3px rgba(26,157,90,.30); }

/* Danger */
.btn-danger {
  background: linear-gradient(135deg, #e84040, #b71c1c);
  color: #fff;
  box-shadow: 0 2px 6px rgba(217,48,37,.30);
}
.btn-danger:hover {
  background: linear-gradient(135deg, #ef5350, #c62828);
  box-shadow: 0 4px 12px rgba(217,48,37,.35);
  color: #fff;
}

/* Warning */
.btn-warning {
  background: linear-gradient(135deg, #ffb740, #e69500);
  color: #1a1a1a;
  box-shadow: 0 2px 6px rgba(240,165,0,.30);
}
.btn-warning:hover {
  background: linear-gradient(135deg, #ffc24d, #f0a500);
  box-shadow: 0 4px 12px rgba(240,165,0,.35);
  color: #1a1a1a;
}

/* Secondary / default */
.btn-secondary, .btn-default {
  background: linear-gradient(135deg, #7a8fa6, #5a6f80);
  color: #fff;
  box-shadow: 0 2px 5px rgba(90,111,128,.25);
}
.btn-secondary:hover, .btn-default:hover {
  background: linear-gradient(135deg, #8a9fb8, #6a7f92);
  color: #fff;
}

/* Info */
.btn-info {
  background: linear-gradient(135deg, #17a2d8, #0e7daa);
  color: #fff;
  box-shadow: 0 2px 5px rgba(23,162,216,.25);
}
.btn-info:hover {
  background: linear-gradient(135deg, #1ab0ea, #1090bc);
  color: #fff;
}

/* Outline variants */
.btn-outline-primary {
  border: 1.5px solid var(--em-primary);
  color: var(--em-primary);
  background: transparent;
}
.btn-outline-primary:hover {
  background: var(--em-primary);
  color: #fff;
}

/* Small buttons */
.btn-sm {
  font-size: .75rem;
  padding: .28rem .65rem;
  border-radius: 3px;
}

/* ============================================================
   4. NAVBAR / TOP MENU
   ============================================================ */

/* Topnav bar — no backdrop-filter (causes text blur) */

/* Nav links hover */
#topnav .nav-link {
  transition: color .15s, background .15s;
  border-radius: 4px;
  font-size: .8rem;
  font-weight: 500;
  padding: .4rem .65rem;
}

#topnav .nav-link:hover {
  color: #fff !important;
  background-color: rgba(255,255,255,.12);
}

/* Active nav item */
#topnav .nav-item.active > .nav-link,
#topnav .nav-link.active {
  color: #fff !important;
  background-color: rgba(255,255,255,.18);
  border-bottom: 2px solid rgba(255,255,255,.6);
}

/* Dropdown menu — polished */
#topnav .dropdown-menu {
  border: none;
  border-radius: var(--em-radius);
  box-shadow: var(--em-shadow-md), 0 0 0 1px rgba(0,0,0,.06);
  padding: .4rem 0;
  min-width: 220px;
  animation: emDropDown .16s ease;
  transform-origin: top center;
}

@keyframes emDropDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

#topnav .dropdown-item {
  font-size: .8rem;
  padding: .45rem 1rem;
  color: #2d3748;
  transition: background .12s, color .12s, padding-left .12s;
  border-radius: 0;
  font-weight: 400;
}

#topnav .dropdown-item:hover,
#topnav .dropdown-item:focus {
  background: linear-gradient(90deg, #e8f4fd, #f0f7ff);
  color: var(--em-primary-dk);
  padding-left: 1.3rem;
}

/* Nested dropdown items */
#topnav .dropdown-menu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -4px;
  animation: emDropRight .16s ease;
}

@keyframes emDropRight {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Colorful sub-menu left borders */
.menu-primary > .dropdown-menu { border-left: 3px solid #1a82b8; }
.menu-success > .dropdown-menu { border-left: 3px solid #25b36a; }
.menu-danger  > .dropdown-menu { border-left: 3px solid #e84040; }
.menu-purple  > .dropdown-menu { border-left: 3px solid #7c4dff; }
.menu-warning > .dropdown-menu { border-left: 3px solid #f0a500; }
.menu-secondary > .dropdown-menu { border-left: 3px solid var(--em-muted); }

/* ============================================================
   5. DATATABLE — modern look
   ============================================================ */

/* Wrapper */
.dataTables_wrapper {
  font-size: .82rem;
}

/* Table */
table.dataTable {
  border-collapse: separate !important;
  border-spacing: 0;
  width: 100% !important;
}

/* Header */
table.dataTable thead th {
  background: linear-gradient(135deg, #1a6b9a, #0b5070);
  color: #fff !important;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .03em;
  padding: 10px 12px !important;
  border: none !important;
  white-space: nowrap;
}

table.dataTable thead th:first-child { border-radius: var(--em-radius) 0 0 0; }
table.dataTable thead th:last-child  { border-radius: 0 var(--em-radius) 0 0; }

/* Sort icons */
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
  opacity: .7;
  color: #fff;
}

/* Body rows */
table.dataTable tbody tr {
  transition: background .12s;
}

table.dataTable tbody tr:nth-child(even) {
  background-color: #f9fbfd;
}

table.dataTable tbody tr:hover {
  background-color: #e8f4fd !important;
  box-shadow: inset 3px 0 0 var(--em-primary);
}

table.dataTable tbody td {
  padding: 8px 12px !important;
  vertical-align: middle;
  border-color: #edf0f3 !important;
  font-size: .8rem;
  color: #2d3748;
}

/* Action links inside table */
table.dataTable tbody td a {
  color: var(--em-primary);
  font-weight: 500;
  text-decoration: none;
  transition: color .12s;
}
table.dataTable tbody td a:hover {
  color: var(--em-accent);
  text-decoration: underline;
}

/* Action buttons inside table */
table.dataTable tbody td .btn {
  padding: .22rem .55rem;
  font-size: .72rem;
  border-radius: 3px;
  margin: 1px;
}

/* Icon-only action buttons */
table.dataTable tbody td .btn i,
table.dataTable tbody td a i {
  font-size: .85em;
  margin-right: 2px;
}

/* DataTable filter / length */
.dataTables_filter { display: flex; align-items: center; }
.dataTables_filter label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .8rem; font-weight: 500; color: #4a5568; white-space: nowrap; }
.dataTables_filter label::before {
  font-family: 'Font Awesome 5 Free'; font-weight: 900;
  content: '\f002';
  color: var(--em-muted); font-size: .78rem;
}
.dataTables_filter input {
  border: 1.5px solid var(--em-border);
  border-radius: var(--em-radius-sm);
  padding: .3rem .6rem;
  font-size: .8rem;
  transition: var(--em-transition);
  margin-left: 4px !important;
}
.dataTables_filter input:focus {
  border-color: var(--em-primary);
  box-shadow: 0 0 0 3px rgba(26,107,154,.12);
  outline: none;
}

/* DataTable buttons (Export) */
.dt-buttons .btn, .dt-buttons button {
  background: linear-gradient(135deg, #4a6080, #2d3f55) !important;
  color: #fff !important;
  border: none !important;
  font-size: .75rem;
  padding: .3rem .65rem;
  border-radius: 3px !important;
  margin-right: 3px;
  transition: var(--em-transition);
}
.dt-buttons .btn:hover, .dt-buttons button:hover {
  background: linear-gradient(135deg, #5a7090, #3d5065) !important;
}

/* Pagination */
.dataTables_paginate .paginate_button {
  border-radius: var(--em-radius-sm) !important;
  font-size: .78rem !important;
  padding: .25rem .55rem !important;
  transition: var(--em-transition) !important;
}
.dataTables_paginate .paginate_button.current {
  background: linear-gradient(135deg, #1a82b8, var(--em-primary-dk)) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.dataTables_paginate .paginate_button:hover {
  background: #e8f4fd !important;
  border-color: var(--em-primary) !important;
  color: var(--em-primary) !important;
}
.dataTables_paginate .paginate_button.current:hover {
  background: linear-gradient(135deg, #1a90cc, var(--em-primary-dk)) !important;
  color: #fff !important;
}

/* ============================================================
   6. CARDS — slightly elevated
   ============================================================ */
.card {
  border: 1px solid #e4e8ee;
  border-radius: var(--em-radius);
  box-shadow: var(--em-shadow-sm);
  transition: box-shadow .18s;
}
.card:hover {
  box-shadow: var(--em-shadow-md);
}

.card-header {
  background: linear-gradient(135deg, var(--em-bg-soft), #fff);
  border-bottom: 1px solid #e4e8ee;
  font-weight: 600;
  font-size: .85rem;
  color: var(--em-primary-dk);
  padding: .7rem 1rem;
  border-radius: var(--em-radius) var(--em-radius) 0 0 !important;
}

/* ============================================================
   7. SELECT2 — match form-control
   ============================================================ */
.select2-container--default .select2-selection--single {
  height: calc(1.5em + .84rem + 3px) !important;
  border: 1.5px solid var(--em-border) !important;
  border-radius: var(--em-radius-sm) !important;
  transition: var(--em-transition);
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--em-primary) !important;
  box-shadow: 0 0 0 3px rgba(26,107,154,.15) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: calc(1.5em + .84rem + 1px) !important;
  font-size: .85rem;
  color: #2d3748;
  padding-left: .7rem;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--em-primary) !important;
}
.select2-dropdown {
  border: 1.5px solid var(--em-primary) !important;
  border-radius: var(--em-radius-sm) !important;
  box-shadow: var(--em-shadow-md) !important;
}

/* ============================================================
   8. ALERTS / BADGES — subtle background
   ============================================================ */
.alert {
  border-radius: var(--em-radius);
  font-size: .82rem;
  border-left-width: 4px;
  animation: emFadeIn .3s ease;
}
@keyframes emFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.badge {
  font-size: .72rem;
  font-weight: 600;
  border-radius: 12px;
  padding: .28em .6em;
}

/* ============================================================
   9. BREADCRUMB
   ============================================================ */
.breadcrumb {
  background: var(--em-bg-soft);
  border-radius: var(--em-radius-sm);
  padding: .45rem .9rem;
  font-size: .78rem;
  border: 1px solid #e4e8ee;
}

/* ============================================================
   10. FIELDSET / LEGEND (Custom.css complement)
   ============================================================ */
fieldset {
  border: 1.5px solid var(--em-border) !important;
  border-radius: var(--em-radius) !important;
  padding: 1rem !important;
  margin-bottom: 1rem;
}
legend {
  font-size: .82rem !important;
  font-weight: 700 !important;
  color: var(--em-primary-dk) !important;
  padding: 0 .5rem !important;
  width: auto !important;
  border-bottom: none !important;
  letter-spacing: .02em;
}

/* ============================================================
   11. EM MODAL SYSTEM (Bootstrap modal enhancements)
   ============================================================ */
.em-modal .modal-content {
  border: none;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  overflow: hidden;
}
.em-modal .modal-header {
  padding: 1rem 1.2rem .7rem;
  border-bottom: 1px solid #eee;
}
.em-modal .modal-body {
  padding: 1rem 1.2rem;
  font-size: .9rem;
  color: #2d3748;
  line-height: 1.6;
}
.em-modal .modal-footer {
  padding: .7rem 1.2rem;
  border-top: 1px solid #eee;
  gap: .5rem;
}
.em-modal .modal-icon {
  font-size: 2.2rem;
  margin-bottom: .5rem;
  display: block;
  text-align: center;
}
.em-modal .modal-title {
  font-weight: 700;
  font-size: 1rem;
}

/* Alert type icons */
.em-modal-alert  .modal-header { background: linear-gradient(135deg, #1a82b8, #0b5070); color: #fff; }
.em-modal-alert  .modal-header .close { color: #fff; opacity: .8; }
.em-modal-warn   .modal-header { background: linear-gradient(135deg, #ffb740, #e69500); color: #222; }
.em-modal-error  .modal-header { background: linear-gradient(135deg, #e84040, #b71c1c); color: #fff; }
.em-modal-error  .modal-header .close { color: #fff; opacity: .8; }
.em-modal-success .modal-header { background: linear-gradient(135deg, #25b36a, #157845); color: #fff; }
.em-modal-success .modal-header .close { color: #fff; opacity: .8; }
.em-modal-confirm .modal-header { background: linear-gradient(135deg, #4a6080, #2d3f55); color: #fff; }
.em-modal-confirm .modal-header .close { color: #fff; opacity: .8; }

/* Modal slide-down animation */
.modal.fade .modal-dialog {
  transition: transform .22s cubic-bezier(.17,.67,.55,1.2) !important;
  transform: translateY(-24px) scale(.97) !important;
}
.modal.show .modal-dialog {
  transform: translateY(0) scale(1) !important;
}

/* ============================================================
   12. JQUERY UI DATEPICKER — Modern Redesign
   ============================================================ */

/* Strip jQuery UI base chrome */
.ui-widget              { font-family: "Hind", sans-serif !important; }
.ui-widget-content      { border: none !important; background: none !important; }
.ui-widget-header       { background: none !important; border: none !important; }
.ui-state-default,
.ui-widget-content .ui-state-default { background: none !important; border: none !important; }
.ui-corner-all,
.ui-corner-top,
.ui-corner-bottom       { border-radius: 0 !important; }

/* Outer container */
.ui-datepicker {
  width: 286px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 36px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.10) !important;
  background: #fff !important;
  overflow: hidden !important;
  font-size: .84rem !important;
  z-index: 9999 !important;
}

/* ── Header (prev | title | next) ── */
.ui-datepicker-header {
  background: linear-gradient(135deg, #1a6b9a 0%, #0b5070 100%) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 12px 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
}

/* Month / Year title */
.ui-datepicker-title {
  color: #fff !important;
  font-size: .92rem !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  text-align: center !important;
  flex: 1 !important;
  line-height: 1.4 !important;
  margin: 0 6px !important;
}
/* Month/Year dropdowns (changeMonth/changeYear mode) */
.ui-datepicker-title select {
  background: rgba(255,255,255,.18) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  color: #fff !important;
  border-radius: 5px !important;
  padding: 2px 5px !important;
  font-size: .8rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  margin: 0 2px !important;
}
.ui-datepicker-title select option { background: #1a6b9a; color: #fff; }

/* Prev / Next buttons */
.ui-datepicker-prev,
.ui-datepicker-next {
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.15) !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: background .15s !important;
}
.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {
  background: rgba(255,255,255,.30) !important;
  cursor: pointer !important;
}
/* Hide jQuery UI sprite text; show FA5 chevrons */
.ui-datepicker-prev .ui-icon,
.ui-datepicker-next .ui-icon { display: none !important; }
.ui-datepicker-prev::after {
  font-family: 'Font Awesome 5 Free'; font-weight: 900;
  content: '\f053';
  color: #fff; font-size: .72rem;
}
.ui-datepicker-next::after {
  font-family: 'Font Awesome 5 Free'; font-weight: 900;
  content: '\f054';
  color: #fff; font-size: .72rem;
}

/* ── Calendar table ── */
.ui-datepicker-calendar {
  width: calc(100% - 20px) !important;
  margin: 8px 10px 10px !important;
  border-collapse: collapse !important;
}

/* Weekday header (Su Mo Tu …) */
.ui-datepicker-calendar thead th {
  background: none !important;
  border: none !important;
  color: #9ca3af !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  padding: 4px 0 6px !important;
  text-align: center !important;
}
.ui-datepicker-calendar thead th.ui-datepicker-week-end {
  color: #e9711f !important;
}

/* Day cells */
.ui-datepicker-calendar td {
  padding: 2px 1px !important;
  border: none !important;
  text-align: center !important;
  background: none !important;
}
.ui-datepicker-calendar td a,
.ui-datepicker-calendar td span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  font-size: .8rem !important;
  font-weight: 500 !important;
  color: #1a1a2e !important;
  background: transparent !important;
  border: none !important;
  text-decoration: none !important;
  padding: 0 !important;
  line-height: 1 !important;
  transition: background .13s, color .13s !important;
  cursor: pointer !important;
}
.ui-datepicker-calendar td a:hover {
  background: #e8f4fd !important;
  color: #1a6b9a !important;
}

/* Today — ring border */
.ui-datepicker-calendar .ui-datepicker-today a,
.ui-datepicker-calendar .ui-state-highlight {
  color: #1a6b9a !important;
  font-weight: 700 !important;
  background: transparent !important;
  border: 2px solid #1a6b9a !important;
  box-sizing: border-box !important;
}
.ui-datepicker-calendar .ui-datepicker-today a:hover {
  background: #e8f4fd !important;
}

/* Selected / active — filled circle */
.ui-datepicker-calendar .ui-datepicker-current-day a,
.ui-datepicker-calendar .ui-state-active {
  background: linear-gradient(135deg, #1a6b9a, #0b5070) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: 0 3px 10px rgba(26,107,154,.40) !important;
}
.ui-datepicker-calendar .ui-datepicker-current-day a:hover {
  background: linear-gradient(135deg, #1a82b8, #0d6090) !important;
  color: #fff !important;
}

/* Other-month days — faded */
.ui-datepicker-calendar .ui-datepicker-other-month a,
.ui-datepicker-calendar .ui-datepicker-other-month span {
  color: #c9cfd8 !important;
}
.ui-datepicker-unselectable span {
  color: #d1d5db !important;
  cursor: default !important;
}

/* Weekend day numbers */
.ui-datepicker-calendar tbody .ui-datepicker-week-end a {
  color: #c45a0a !important;
}
.ui-datepicker-calendar tbody .ui-datepicker-week-end .ui-state-active,
.ui-datepicker-calendar tbody .ui-datepicker-current-day a { color: #fff !important; }

/* ── Button pane (Today / Done) ── */
.ui-datepicker-buttonpane {
  background: #f8fafc !important;
  border-top: 1px solid #e4e8ee !important;
  padding: 8px 12px !important;
  margin: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  gap: 6px !important;
}
.ui-datepicker-buttonpane button {
  background: linear-gradient(135deg, #1a82b8, #0b5070) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: .75rem !important;
  font-weight: 600 !important;
  padding: 5px 14px !important;
  cursor: pointer !important;
  float: none !important;
  margin: 0 !important;
  transition: opacity .15s !important;
}
.ui-datepicker-buttonpane button:hover { opacity: .88 !important; }
.ui-datepicker-buttonpane .ui-datepicker-current {
  background: linear-gradient(135deg, #e9711f, #c45a0a) !important;
}

/* ============================================================
   13. LOGIN PAGE ENHANCEMENTS
   ============================================================ */

/* Styled validation error messages */
.field-validation-error {
  color: var(--em-danger);
  font-size: .76rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  animation: emFadeIn .25s ease;
}
.field-validation-error::before {
  content: '⚠';
  font-size: .8em;
}

/* Login alert box */
#loginAlert {
  display: none;
  border-radius: var(--em-radius);
  font-size: .82rem;
  padding: .6rem .9rem;
  margin-top: .8rem;
  border-left: 4px solid;
  animation: emShake .4s ease;
}
#loginAlert.alert-danger  { border-color: var(--em-danger); background: #fef0ef; color: #a50000; }
#loginAlert.alert-success { border-color: var(--em-success); background: #edfaf3; color: #0d5e31; }

@keyframes emShake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-5px); }
  40%       { transform: translateX(5px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

/* Password visibility toggle */
.em-pwd-wrapper {
  position: relative;
}
.em-pwd-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--em-muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 0 2px;
  transition: color .15s;
  z-index: 5;
}
.em-pwd-toggle:hover { color: var(--em-primary); }

/* Login button loading state */
.btn-login-loading {
  pointer-events: none;
  opacity: .85;
}
.btn-login-loading::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255,255,255,.5);
  border-top-color: #fff;
  border-radius: 50%;
  animation: emSpin .7s linear infinite;
  margin-right: 6px;
  vertical-align: middle;
}
@keyframes emSpin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   14. SCROLLBAR — thin modern
   ============================================================ */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: #f1f1f1; }
::-webkit-scrollbar-thumb  { background: #b0bec5; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--em-primary); }

/* ============================================================
   15. TABLE INSIDE CARDS (non-DataTable)
   ============================================================ */
.table thead th {
  background: linear-gradient(135deg, #f0f4f8, #e8edf2);
  color: var(--em-primary-dk);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
  border-bottom: 2px solid #d0dae4;
  padding: 9px 12px;
}
.table tbody tr:hover {
  background-color: #f0f7ff;
}
.table-bordered td, .table-bordered th {
  border-color: #e4e8ee !important;
}

/* ============================================================
   16. PAGE TITLE / SESSION BAR
   — section.logout keeps its original #343a40 dark background
      (no override here so the theme color is preserved)
   ============================================================ */

/* ============================================================
   17. LOADER SPINNER UPGRADE
   ============================================================ */
#processMessage {
  border-radius: var(--em-radius);
  border: none !important;
  box-shadow: var(--em-shadow-md);
  font-weight: 600;
  color: var(--em-primary-dk);
  font-size: .85rem;
  background: #fff;
  padding: 16px 20px !important;
}

/* ============================================================
   18. MISC UTILITY
   ============================================================ */
.text-primary { color: var(--em-primary) !important; }
.bg-primary   { background: linear-gradient(135deg, #1a82b8, var(--em-primary-dk)) !important; }

/* Smooth link transitions */
a { transition: color .15s; }