/* =================================================================
   PRO-TRUST MANAGEMENT DASHBOARD DESIGN SYSTEM
   Brand Specification: OWNER_DESIGN.md
   Target: ASP.NET Core MVC (hostel.owner)
   Typography: Manrope (Headings/KPIs) + Inter (Body/Tables/Forms)
   Primary: Deep Navy (#001e40 / #003366)
   Secondary: Forest Green (#006e26 / #1e7e34)
   Surfaces: #f7f9fb (Base), #ffffff (Card)
   Borders: #e2e8f0 (Cards), #c3c6d1 (Inputs)
================================================================= */

/* --- Google Fonts Import --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root {
  /* Surfaces */
  --pro-surface: #f7f9fb;
  --pro-surface-dim: #d8dadc;
  --pro-surface-container-low: #f2f4f6;
  --pro-surface-container: #eceef0;
  --pro-surface-container-high: #e6e8ea;
  --pro-surface-card: #ffffff;

  /* Neutrals & Text */
  --pro-on-surface: #191c1e;
  --pro-on-surface-variant: #43474f;
  --pro-outline: #737780;
  --pro-outline-variant: #c3c6d1;
  --pro-border-card: #e2e8f0;

  /* Primary: Deep Navy */
  --pro-primary: #001e40;
  --pro-primary-container: #003366;
  --pro-primary-hover: #001733;
  --pro-on-primary: #ffffff;
  --pro-primary-fixed: #d5e3ff;

  /* Secondary: Forest Green (Action Buttons & Positive Status) */
  --pro-secondary: #006e26;
  --pro-secondary-hover: #00531b;
  --pro-secondary-container: #e6f7ec;
  --pro-on-secondary: #ffffff;
  --pro-on-secondary-container: #0e742c;

  /* Status Colors */
  --pro-error: #ba1a1a;
  --pro-error-hover: #93000a;
  --pro-error-container: #ffdad6;
  --pro-on-error-container: #93000a;

  --pro-warning: #b8860b;
  --pro-warning-container: #fff3cd;
  --pro-on-warning-container: #856404;

  --pro-info: #004785;
  --pro-info-container: #d5e3ff;
  --pro-on-info-container: #001e40;

  /* Typography */
  --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-card: 0px 1px 3px rgba(0, 30, 64, 0.04), 0px 1px 2px rgba(0, 30, 64, 0.02);
  --shadow-hover: 0px 4px 12px rgba(0, 51, 102, 0.06);
  --shadow-dropdown: 0px 8px 20px rgba(0, 30, 64, 0.10);
  --shadow-modal: 0px 12px 28px rgba(0, 30, 64, 0.14);
}

/* =================================================================
   1. GLOBAL & TYPOGRAPHY RESETS
================================================================= */
body {
  font-family: var(--font-body) !important;
  background-color: var(--pro-surface) !important;
  color: var(--pro-on-surface) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.brand-text,
.card-title,
.modal-title,
.login-logo,
.swal2-title {
  font-family: var(--font-display) !important;
  color: var(--pro-primary) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

.content-wrapper {
  background-color: var(--pro-surface) !important;
}

/* =================================================================
   2. NAVBAR (MAIN HEADER)
================================================================= */
.main-header.navbar {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--pro-border-card) !important;
  box-shadow: 0 1px 2px rgba(0, 30, 64, 0.03) !important;
  padding: 0.5rem 1rem !important;
}

.main-header .nav-link {
  color: var(--pro-on-surface-variant) !important;
  font-weight: 500 !important;
  transition: color 0.15s ease-in-out;
}

.main-header .nav-link:hover {
  color: var(--pro-primary-container) !important;
}

.navbar-light .navbar-nav .nav-link {
  color: var(--pro-on-surface-variant) !important;
}

.dropdown-menu {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--pro-border-card) !important;
  box-shadow: var(--shadow-dropdown) !important;
  background-color: #ffffff !important;
  padding: 6px !important;
  list-style: none !important;
  margin: 0 !important;
  z-index: 1060 !important;
}

.dropdown-menu > li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dropdown-item {
  border-radius: var(--radius-sm) !important;
  color: var(--pro-on-surface) !important;
  font-family: var(--font-body) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  display: block !important;
  width: 100% !important;
  clear: both !important;
  text-align: inherit !important;
  white-space: nowrap !important;
  background-color: transparent !important;
  border: 0 !important;
  text-decoration: none !important;
  transition: all 0.12s ease-in-out !important;
}

.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--pro-surface-container-low) !important;
  color: var(--pro-primary-container) !important;
  text-decoration: none !important;
}

.dropdown-divider {
  border-top: 1px solid var(--pro-border-card) !important;
  margin: 4px 0 !important;
}

/* =================================================================
   3. SIDEBAR (DEEP NAVY THEME)
================================================================= */
.main-sidebar {
  background-color: var(--pro-primary) !important;
  box-shadow: 2px 0 8px rgba(0, 30, 64, 0.08) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.brand-link {
  background-color: var(--pro-primary) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 14px 16px !important;
}

.brand-link .brand-text {
  color: #ffffff !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  letter-spacing: 0.05em !important;
}

.user-panel {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 12px 14px !important;
}

.user-panel .info a {
  color: var(--pro-primary-fixed) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
}

/* Sidebar Search */
.sidebar-search .form-control-sidebar {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13px !important;
}

.sidebar-search .form-control-sidebar::placeholder {
  color: rgba(213, 227, 255, 0.5) !important;
}

.sidebar-search .btn-sidebar {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--pro-primary-fixed) !important;
  border-radius: var(--radius-sm) !important;
}

/* Sidebar Nav Items */
.nav-sidebar .nav-item > .nav-link {
  color: rgba(213, 227, 255, 0.85) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-body) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  margin: 2px 8px !important;
  padding: 8px 12px !important;
  transition: all 0.15s ease-in-out !important;
}

.nav-sidebar .nav-item > .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

.nav-sidebar .nav-item > .nav-link.active,
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
  background-color: var(--pro-primary-container) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-left: 3px solid #7edb85 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.nav-sidebar .nav-treeview {
  background-color: rgba(0, 0, 0, 0.15) !important;
  border-radius: var(--radius-md) !important;
  margin: 2px 8px !important;
  padding: 4px 0 !important;
}

.nav-treeview > .nav-item > .nav-link {
  margin: 2px 6px !important;
  font-size: 13px !important;
}

/* =================================================================
   4. CARDS (PRO-TRUST FLAT-PLUS CONTAINERS)
================================================================= */
.card {
  background-color: var(--pro-surface-card) !important;
  border: 1px solid var(--pro-border-card) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card) !important;
  margin-bottom: 20px !important;
}

/* Remove colored top borders from card-primary/card-info/card-success */
.card-primary:not(.card-outline) > .card-header,
.card-success:not(.card-outline) > .card-header,
.card-info:not(.card-outline) > .card-header,
.card-warning:not(.card-outline) > .card-header,
.card-danger:not(.card-outline) > .card-header {
  background-color: transparent !important;
  color: var(--pro-primary) !important;
}

.card.card-primary, .card.card-success, .card.card-info, .card.card-warning, .card.card-danger {
  border-top: 1px solid var(--pro-border-card) !important;
}

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

.card-header .card-title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--pro-primary) !important;
  margin: 0 !important;
}

.card-body {
  padding: 20px !important;
}

.card-footer {
  background-color: var(--pro-surface-container-low) !important;
  border-top: 1px solid var(--pro-border-card) !important;
  padding: 12px 20px !important;
  border-bottom-left-radius: var(--radius-lg) !important;
  border-bottom-right-radius: var(--radius-lg) !important;
}

/* =================================================================
   5. BUTTONS (FOREST GREEN PRIMARY & DEEP NAVY SECONDARY)
================================================================= */
.btn {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  border-radius: var(--radius-sm) !important;
  padding: 7px 16px !important;
  transition: all 0.15s ease-in-out !important;
  box-shadow: none !important;
}

/* Primary Action Buttons -> Forest Green */
.btn-primary,
.btn-success {
  background-color: var(--pro-secondary) !important;
  border-color: var(--pro-secondary) !important;
  color: #ffffff !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-success:hover, .btn-success:focus, .btn-success:active {
  background-color: var(--pro-secondary-hover) !important;
  border-color: var(--pro-secondary-hover) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 110, 38, 0.25) !important;
}

/* Secondary & Info Action Buttons -> Deep Navy */
.btn-secondary {
  background-color: var(--pro-primary-container) !important;
  border-color: var(--pro-primary-container) !important;
  color: #ffffff !important;
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
  background-color: var(--pro-primary) !important;
  border-color: var(--pro-primary) !important;
  color: #ffffff !important;
}

.btn-info {
  background-color: var(--pro-info) !important;
  border-color: var(--pro-info) !important;
  color: #ffffff !important;
}

.btn-info:hover, .btn-info:focus, .btn-info:active {
  background-color: #003366 !important;
  border-color: #003366 !important;
  color: #ffffff !important;
}

/* Outline Buttons */
.btn-outline-primary {
  border: 1.5px solid var(--pro-primary-container) !important;
  color: var(--pro-primary-container) !important;
  background-color: transparent !important;
}

.btn-outline-primary:hover {
  background-color: var(--pro-primary-container) !important;
  color: #ffffff !important;
}

.btn-outline-secondary {
  border: 1.5px solid var(--pro-outline) !important;
  color: var(--pro-on-surface-variant) !important;
  background-color: transparent !important;
}

.btn-outline-secondary:hover {
  background-color: var(--pro-surface-container-low) !important;
  color: var(--pro-on-surface) !important;
}

/* Danger Button -> Error Red */
.btn-danger {
  background-color: var(--pro-error) !important;
  border-color: var(--pro-error) !important;
  color: #ffffff !important;
}

.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
  background-color: var(--pro-error-hover) !important;
  border-color: var(--pro-error-hover) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(186, 26, 26, 0.25) !important;
}

/* Default / Light Buttons */
.btn-default, .btn-light {
  background-color: var(--pro-surface-container-low) !important;
  border: 1px solid var(--pro-outline-variant) !important;
  color: var(--pro-on-surface) !important;
}

.btn-default:hover, .btn-light:hover {
  background-color: var(--pro-surface-container-high) !important;
  color: var(--pro-primary) !important;
}

/* =================================================================
   6. FORMS, INPUTS & SELECT2
================================================================= */
.form-group {
  margin-bottom: 18px !important;
}

.form-group label,
label:not(.form-check-label):not(.custom-file-label) {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--pro-on-surface-variant) !important;
  margin-bottom: 6px !important;
}

.form-control,
.custom-select {
  font-family: var(--font-body) !important;
  font-size: 13.5px !important;
  color: var(--pro-on-surface) !important;
  background-color: #ffffff !important;
  border: 1px solid var(--pro-outline-variant) !important;
  border-radius: var(--radius-sm) !important;
  height: calc(2.25rem + 2px) !important;
  padding: 6px 12px !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.form-control:focus,
.custom-select:focus {
  border-color: var(--pro-primary-container) !important;
  box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.12) !important;
  outline: none !important;
}

.form-control::placeholder {
  color: rgba(115, 119, 128, 0.6) !important;
}

.input-group-text {
  background-color: var(--pro-surface-container-low) !important;
  border: 1px solid var(--pro-outline-variant) !important;
  color: var(--pro-on-surface-variant) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13.5px !important;
}

.input-group > .form-control:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.input-group > .form-control:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Select2 Plugin Overrides */
.select2-container--default .select2-selection--single {
  border: 1px solid var(--pro-outline-variant) !important;
  border-radius: var(--radius-sm) !important;
  height: calc(2.25rem + 2px) !important;
  padding: 4px 8px !important;
  background-color: #ffffff !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--pro-on-surface) !important;
  line-height: 28px !important;
  font-size: 13.5px !important;
  font-family: var(--font-body) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: calc(2.25rem + 2px) !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--pro-primary-container) !important;
  box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.12) !important;
}

.select2-dropdown {
  border: 1px solid var(--pro-border-card) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-dropdown) !important;
  font-family: var(--font-body) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--pro-primary-container) !important;
  color: #ffffff !important;
}

/* =================================================================
   7. DATATABLES & DATA TABLES (PRO-TRUST DATA MATRIX)
================================================================= */
.table-responsive {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--pro-border-card) !important;
  background-color: #ffffff !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  min-height: 220px;
}

.table, table.dataTable {
  margin-bottom: 0 !important;
  font-family: var(--font-body) !important;
  border-collapse: collapse !important;
  width: 100% !important;
}

/* Sticky Uppercase Label-Caps Header */
.table thead th,
table.dataTable thead th {
  font-family: var(--font-body) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--pro-on-surface-variant) !important;
  background-color: var(--pro-surface-container-low) !important;
  border-bottom: 1px solid var(--pro-outline-variant) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  padding: 12px 14px !important;
  vertical-align: middle !important;
}

.table tbody td,
table.dataTable tbody td {
  font-size: 13.5px !important;
  color: var(--pro-on-surface) !important;
  border-top: 1px solid var(--pro-border-card) !important;
  border-bottom: 1px solid var(--pro-border-card) !important;
  border-left: none !important;
  border-right: none !important;
  padding: 12px 14px !important;
  vertical-align: middle !important;
}

/* Action Dropdown inside table cells */
.table .btn-group {
  position: relative !important;
  display: inline-flex !important;
}

.table .btn-group .btn {
  padding: 5px 10px !important;
  font-size: 12.5px !important;
  border-radius: var(--radius-sm) !important;
}

.table .btn-group .dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  transform: none !important;
  margin-top: 4px !important;
  min-width: 175px !important;
  box-shadow: 0 10px 25px rgba(0, 30, 64, 0.15) !important;
  border: 1px solid var(--pro-border-card) !important;
  border-radius: var(--radius-lg) !important;
  background-color: #ffffff !important;
  z-index: 1065 !important;
  padding: 6px !important;
  list-style: none !important;
}

/* Subtle Row Hover */
.table-hover tbody tr:hover,
table.dataTable.table-hover tbody tr:hover {
  background-color: var(--pro-surface) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: #fafbfc !important;
}

/* DataTables Controls (Search & Length) */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  padding: 12px 16px !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: var(--pro-on-surface-variant) !important;
}

.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--pro-outline-variant) !important;
  border-radius: var(--radius-sm) !important;
  padding: 4px 8px !important;
  margin: 0 4px !important;
}

.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--pro-outline-variant) !important;
  border-radius: var(--radius-sm) !important;
  padding: 6px 12px !important;
  margin-left: 8px !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--pro-primary-container) !important;
  box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.12) !important;
  outline: none !important;
}

.dataTables_wrapper .dataTables_info {
  padding: 14px 16px !important;
  font-size: 13px !important;
  color: var(--pro-on-surface-variant) !important;
}

/* =================================================================
   8. PAGINATION
================================================================= */
.pagination {
  margin: 12px 16px !important;
}

.page-item .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--pro-outline-variant) !important;
  color: var(--pro-primary-container) !important;
  background-color: #ffffff !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  margin: 0 2px !important;
  padding: 6px 12px !important;
  transition: all 0.15s ease-in-out !important;
}

.page-item .page-link:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background-color: var(--pro-surface-container-high) !important;
  color: var(--pro-primary) !important;
  border-color: var(--pro-outline) !important;
}

.page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background-color: var(--pro-primary-container) !important;
  border-color: var(--pro-primary-container) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(0, 51, 102, 0.2) !important;
}

.page-item.disabled .page-link {
  color: var(--pro-outline) !important;
  background-color: var(--pro-surface-container-low) !important;
  border-color: var(--pro-border-card) !important;
}

/* =================================================================
   9. STATUS CHIPS & BADGES (LOW-CONTRAST FILL METHOD)
================================================================= */
.badge {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  padding: 4px 10px !important;
  border-radius: var(--radius-full) !important;
  letter-spacing: 0.02em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Success / Active -> Light Green fill + Dark Green text */
.badge-success {
  background-color: var(--pro-secondary-container) !important;
  color: var(--pro-on-secondary-container) !important;
  border: 1px solid #7edb85 !important;
}

/* Danger / Inactive / Failed -> Light Red fill + Dark Red text */
.badge-danger {
  background-color: var(--pro-error-container) !important;
  color: var(--pro-on-error-container) !important;
  border: 1px solid #ffb4ab !important;
}

/* Warning / Pending -> Light Gold fill + Dark Gold text */
.badge-warning {
  background-color: var(--pro-warning-container) !important;
  color: var(--pro-on-warning-container) !important;
  border: 1px solid #ffeeba !important;
}

/* Primary / Info -> Light Navy fill + Deep Navy text */
.badge-primary,
.badge-info {
  background-color: var(--pro-primary-fixed) !important;
  color: var(--pro-primary) !important;
  border: 1px solid #a7c8ff !important;
}

.badge-secondary {
  background-color: var(--pro-surface-container) !important;
  color: var(--pro-on-surface-variant) !important;
  border: 1px solid var(--pro-outline-variant) !important;
}

/* =================================================================
   10. ALERTS
================================================================= */
.alert {
  border-radius: var(--radius-lg) !important;
  font-family: var(--font-body) !important;
  font-size: 13.5px !important;
  border: 1px solid transparent !important;
  padding: 14px 18px !important;
  margin-bottom: 20px !important;
}

.alert-success {
  background-color: var(--pro-secondary-container) !important;
  border-color: #99f89e !important;
  color: #00531b !important;
}

.alert-danger {
  background-color: var(--pro-error-container) !important;
  border-color: #ffb4ab !important;
  color: var(--pro-on-error-container) !important;
}

.alert-warning {
  background-color: var(--pro-warning-container) !important;
  border-color: #ffeeba !important;
  color: var(--pro-on-warning-container) !important;
}

.alert-info {
  background-color: var(--pro-info-container) !important;
  border-color: #a7c8ff !important;
  color: var(--pro-primary) !important;
}

.alert .close {
  color: inherit !important;
  opacity: 0.7 !important;
}

.alert .close:hover {
  opacity: 1 !important;
}

/* =================================================================
   11. MODALS & POPUPS
================================================================= */
.modal-content {
  border-radius: var(--radius-xl) !important;
  border: 1px solid var(--pro-border-card) !important;
  box-shadow: var(--shadow-modal) !important;
  background-color: #ffffff !important;
  overflow: hidden !important;
}

.modal-header {
  background-color: var(--pro-surface) !important;
  border-bottom: 1px solid var(--pro-border-card) !important;
  padding: 16px 20px !important;
}

.modal-header .modal-title {
  font-family: var(--font-display) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--pro-primary) !important;
}

.modal-body {
  padding: 20px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--pro-on-surface) !important;
}

.modal-footer {
  background-color: var(--pro-surface) !important;
  border-top: 1px solid var(--pro-border-card) !important;
  padding: 12px 20px !important;
}

/* =================================================================
   12. TOASTS & SWEETALERT2
================================================================= */
#toast-container > div {
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 8px 24px rgba(0, 30, 64, 0.12) !important;
  font-family: var(--font-body) !important;
  font-size: 13.5px !important;
  opacity: 0.98 !important;
  padding: 14px 18px 14px 50px !important;
}

.toast-success {
  background-color: #006e26 !important;
}

.toast-error {
  background-color: #ba1a1a !important;
}

.toast-info {
  background-color: #003366 !important;
}

.toast-warning {
  background-color: #b8860b !important;
}

/* SweetAlert2 Popup */
.swal2-popup {
  border-radius: var(--radius-xl) !important;
  border: 1px solid var(--pro-border-card) !important;
  box-shadow: var(--shadow-modal) !important;
  font-family: var(--font-body) !important;
  padding: 24px !important;
}

.swal2-popup .swal2-title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: var(--pro-primary) !important;
}

.swal2-popup .swal2-styled.swal2-confirm {
  background-color: var(--pro-secondary) !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
}

.swal2-popup .swal2-styled.swal2-cancel {
  background-color: var(--pro-primary-container) !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
}

/* =================================================================
   13. BREADCRUMBS & FOOTER
================================================================= */
.breadcrumb {
  background-color: transparent !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 8px 0 !important;
}

.breadcrumb-item a {
  color: var(--pro-primary-container) !important;
}

.breadcrumb-item.active {
  color: var(--pro-outline) !important;
}

.main-footer {
  background-color: #ffffff !important;
  border-top: 1px solid var(--pro-border-card) !important;
  color: var(--pro-on-surface-variant) !important;
  font-family: var(--font-body) !important;
  font-size: 12.5px !important;
  padding: 12px 16px !important;
}

/* =================================================================
   14. LOGIN SCREEN OVERRIDES
================================================================= */
.login-page {
  background-color: var(--pro-surface) !important;
  font-family: var(--font-body) !important;
}

.login-box .card {
  border-radius: var(--radius-xl) !important;
  box-shadow: 0 12px 28px rgba(0, 30, 64, 0.08) !important;
  border: 1px solid var(--pro-border-card) !important;
}

.login-logo a {
  font-family: var(--font-display) !important;
  color: var(--pro-primary) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}