@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  --primary: #1B3863;
  --primary-dark: #0045C2;
  --secondary: #0072E0;
  --accent: #1B3863;
  --info: #00C1D6;
  --highlight: #00E6C0;
  --background: #F4F7FB;
  --surface: #F8FAFD;
  --card: #FFFFFF;
  --text: #1B1F3B;
  --text-secondary: #68738D;
  --border: #E8EEF7;
  --shadow-light: -8px -8px 18px rgba(255, 255, 255, 0.95);
  --shadow-dark: 8px 8px 18px rgba(0, 0, 0, 0.08);
  --shadow: var(--shadow-light), var(--shadow-dark);
  
  --inset-shadow-light: inset -3px -3px 7px rgba(255, 255, 255, 0.7);
  --inset-shadow-dark: inset 2px 2px 5px rgba(0, 0, 0, 0.05);
  --inset-shadow: var(--inset-shadow-dark), var(--inset-shadow-light);
}

/* Base & Typography */
body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  background-color: var(--background) !important;
  color: var(--text) !important;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: var(--text) !important;
}

p, span, div {
  color: inherit;
}

/* Sidebar (floating and rounded) */
.dlabnav {
  background-color: var(--primary) !important;
  border-radius: 0 24px 24px 0 !important;
  margin: 0 !important;
  height: 100vh !important;
  box-shadow: var(--shadow) !important;
  border: none !important;
}

/* Nav Header (Logo area) */
.nav-header {
  background-color: var(--primary) !important;
  border: none !important;
}

/* Top Navigation (floating) */
.header {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  height: 72px !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05) !important;
  border: none !important;
  margin: 16px 16px 16px auto;
  border-radius: 24px;
}

.content-body {
  padding-top: 100px !important;
}

/* Active Menu Item Pill (Only for non-dropdown top-level items) */
.metismenu > li.mm-active > a:not(.has-arrow), 
.metismenu > li:hover > a {
  background-color: var(--card) !important;
  color: var(--primary) !important;
  border-radius: 12px !important;
  margin: 0 16px !important;
  box-shadow: var(--shadow) !important;
}
.metismenu > li.mm-active > a:not(.has-arrow) i, 
.metismenu > li:hover > a i,
.metismenu > li.mm-active > a:not(.has-arrow) span, 
.metismenu > li:hover > a span {
  color: var(--primary) !important;
}

/* Nested Active Items */
.metismenu ul > li.mm-active > a {
  color: #fff !important;
  font-weight: 600 !important;
}

/* Sidebar Text Default */
.metismenu a, .metismenu a span {
  color: rgba(255, 255, 255, 0.8) !important;
}
.metismenu a i {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Cards (Soft Shadows & No Borders) */
.card, .widget-stat {
  border: none !important;
  border-radius: 24px !important;
  box-shadow: var(--shadow) !important;
  background-color: var(--card) !important;
  margin-bottom: 24px;
}

.card-header {
  background-color: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 20px 24px !important;
}

/* Inputs & Forms */
.form-control, .bootstrap-select > .dropdown-toggle {
  height: 48px !important;
  border-radius: 16px !important;
  border: 1px solid var(--border) !important;
  background-color: var(--surface) !important;
  box-shadow: var(--inset-shadow) !important;
  color: var(--text) !important;
  transition: all 0.3s ease;
}

.form-control:focus, .bootstrap-select > .dropdown-toggle:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 154, 228, 0.25), var(--inset-shadow) !important;
}

/* Buttons */
.btn, .btn-primary {
  border-radius: 16px !important;
  border: none !important;
  padding: 10px 24px !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 15px rgba(27, 56, 99, 0.2) !important;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(27, 56, 99, 0.3) !important;
}

/* Secondary Buttons */
.btn-secondary {
  background: var(--surface) !important;
  color: var(--text-secondary) !important;
  box-shadow: var(--shadow) !important;
}
.btn-secondary:hover {
  background: var(--card) !important;
  color: var(--primary) !important;
}

/* DataTables & Tables */
table.dataTable, .table {
  border-collapse: separate !important;
  border-spacing: 0 8px !important;
  border: none !important;
}

table.dataTable thead th, .table thead th {
  border-bottom: none !important;
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.5px;
  padding: 12px 16px !important;
}

table.dataTable tbody tr, .table tbody tr {
  box-shadow: var(--shadow) !important;
  background-color: var(--card) !important;
  border-radius: 16px !important;
}

table.dataTable tbody td, .table tbody td {
  border: none !important;
  padding: 16px !important;
  vertical-align: middle;
}
table.dataTable tbody td:first-child, .table tbody tr td:first-child {
  border-top-left-radius: 16px !important;
  border-bottom-left-radius: 16px !important;
}
table.dataTable tbody td:last-child, .table tbody tr td:last-child {
  border-top-right-radius: 16px !important;
  border-bottom-right-radius: 16px !important;
}

/* DataTables Pagination & Controls */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 12px !important;
  border: none !important;
  background: var(--surface) !important;
  color: var(--text-secondary) !important;
  box-shadow: var(--shadow) !important;
  margin: 0 4px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, 
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--primary) !important;
  color: #fff !important;
}

/* Modals */
.modal-content {
  border-radius: 24px !important;
  border: none !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2) !important;
}

.modal-header {
  border-bottom: 1px solid var(--border) !important;
  padding: 24px !important;
}

.modal-footer {
  border-top: 1px solid var(--border) !important;
  padding: 24px !important;
}

/* Badges & Pills */
.badge {
  border-radius: 12px !important;
  padding: 6px 12px !important;
  font-weight: 500 !important;
  border: none !important;
}

.badge-primary {
  background-color: rgba(27, 56, 99, 0.1) !important;
  color: var(--primary) !important;
}

.badge-success {
  background-color: rgba(0, 193, 214, 0.1) !important;
  color: var(--info) !important;
}

/* Utilities */
.shadow-sm {
  box-shadow: var(--shadow) !important;
}

/* Tabs (Soft UI) */
.custom-tab-1 .nav-tabs {
  border-bottom: none !important;
  background-color: transparent !important;
}
.custom-tab-1 .nav-link {
  color: var(--text-secondary) !important;
  border: none !important;
  border-radius: 12px !important;
  margin: 0 4px !important;
  padding: 10px 20px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}
.custom-tab-1 .nav-link:hover {
  background-color: var(--surface) !important;
  color: var(--primary) !important;
}
.custom-tab-1 .nav-link.active {
  background-color: var(--card) !important;
  color: var(--primary) !important;
  box-shadow: var(--shadow) !important;
}