/* Theme palette variables */
:root {
  /* Blues */
  --blue-900: #03045E;
  --blue-800: #023E8A;
  --blue-700: #0077B6;
  --blue-600: #0096C7;
  --blue-500: #00B4D8;
  --blue-400: #48CAE4;
  --blue-300: #90E0EF;
  --blue-200: #ADE8F4;
  --blue-100: #CAF0F8;

  /* Semantic aliases */
  --color-primary: var(--blue-700);
  --color-primary-strong: var(--blue-800);
  --color-primary-soft: var(--blue-500);
  --color-surface: #ffffff;
  --color-bg: var(--blue-100);
  --color-border: var(--blue-200);
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--color-primary);
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  background-color: var(--color-bg);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Table Header Styling - Dark Blue Background with White Text */
.table thead th {
  background-color: #1e3a8a !important; /* Dark blue background */
  color: white !important; /* White text */
  border-color: #1e3a8a !important;
  font-weight: 600;
}

/* Align sort icon neatly with header text */
.table thead th .sortable-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.table thead th .sortable-header i {
  line-height: 1;
  vertical-align: middle;
  margin-top: 1px;
}

.table thead th:hover {
  background-color: #1e40af !important; /* Slightly lighter blue on hover */
}

/* Ensure table-dark class also uses dark blue */
.table-dark thead th {
  background-color: #1e3a8a !important;
  color: white !important;
  border-color: #1e3a8a !important;
}

/* Mobile/Responsive Table Fix - Prevent Column Collapse */
@media (max-width: 768px) {
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  
  .table {
    min-width: 100% !important;
    table-layout: auto !important;
  }
  
  .table th,
  .table td {
    white-space: nowrap !important;
    min-width: 120px !important;
    padding: 8px 12px !important;
  }
  
  /* Specific column widths for better mobile display */
  .table th:nth-child(1),
  .table td:nth-child(1) {
    min-width: 80px !important; /* ID columns */
  }
  
  .table th:nth-child(2),
  .table td:nth-child(2) {
    min-width: 150px !important; /* Name columns */
  }
  
  .table th:last-child,
  .table td:last-child {
    min-width: 140px !important; /* Action columns */
    position: sticky !important;
    right: 0 !important;
    background-color: white !important;
    z-index: 10 !important;
  }
  
  .table-dark th:last-child {
    background-color: #1e3a8a !important;
  }
}

/* Extra small devices */
@media (max-width: 576px) {
  .table th,
  .table td {
    font-size: 12px !important;
    padding: 6px 8px !important;
  }
  
  .btn-sm {
    padding: 2px 6px !important;
    font-size: 10px !important;
  }
}

/* Custom Pagination Styling - Simple Design like Image */
.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.pagination {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 2px;
}

.pagination .page-item {
  margin: 0;
}

.pagination .page-link {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
  color: #333;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 14px;
  font-weight: normal;
  transition: all 0.2s ease;
}

.pagination .page-link:hover {
  background-color: #f5f5f5;
  color: #333;
  text-decoration: none;
}

.pagination .page-item.active .page-link {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
  font-weight: bold;
}

.pagination .page-item.disabled .page-link {
  color: #6c757d;
  background-color: #fff;
  border-color: #ddd;
  cursor: not-allowed;
}

.pagination .page-item.disabled .page-link:hover {
  background-color: #fff;
  color: #6c757d;
}

/* Mobile responsive pagination */
@media (max-width: 768px) {
  .pagination {
    gap: 1px;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .pagination .page-link {
    padding: 4px 8px;
    font-size: 12px;
  }
}

/* Smooth scroll behavior for pagination */
html {
  scroll-behavior: smooth;
}

/* Pagination link smooth scroll */
.pagination .page-link {
  scroll-behavior: smooth;
}

/* Keep table in view when pagination is clicked */
.pagination-container {
  scroll-margin-top: 20px;
}

/* Section/Header banner - dark blue background with white text */
.section-header {
  background-color: #1e3a8a;
  color: #ffffff !important;
  padding: 12px 16px;
  border-radius: 6px;
}

/* Ensure when used on Bootstrap card headers it stays blue */
.card-header.section-header {
  background-color: #1e3a8a !important;
  color: #ffffff !important;
}

.section-header h1,
.section-header h2,
.section-header h3,
.section-header h4,
.section-header h5,
.section-header p {
  color: #ffffff !important;
  margin: 0;
}

.section-header .btn,
.section-header a {
  color: #ffffff;
  border-color: rgba(255,255,255,0.6);
}

.section-header .btn:hover,
.section-header a:hover {
  color: #ffffff;
  border-color: #ffffff;
}

/* Force solid action buttons for grids: Edit (blue) and Delete (red) */
.table .btn.btn-primary,
.btn.btn-primary {
  color: #ffffff !important;
}

.table .btn.btn-danger,
.btn.btn-danger {
  color: #ffffff !important;
}