/* ===== GLOBAL STYLES MOVED FROM layout.pug ===== */
.menu-toggle { display: none; }
@media (max-width: 1023px) {
  .sidebar { transform: translateX(-100%); transition: transform 0.3s ease-in-out; }
  .sidebar.open { transform: translateX(0); }
  .menu-toggle { display: block; }
}
/* Focus styles for better accessibility */
.focus-visible:focus-visible {
  outline: 2px solid #031046;
  outline-offset: 2px;
}
/* Skip link styles */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: #000;
  color: #fff;
  padding: 8px;
  text-decoration: none;
  z-index: 100;
}
.skip-link:focus {
  top: 6px;
}
/* Global text color - equivalent to text-gray-600 */
body {
  color: #4b5563;
}

/* Custom Blue Color Override - Change all Tailwind blue to #031046 */

/* Background Colors */
.bg-blue-50 { background-color: #f0f3ff !important; }
.bg-blue-100 { background-color: #dce7ff !important; }
.bg-blue-200 { background-color: #b8d0ff !important; }
.bg-blue-300 { background-color: #8db8ff !important; }
.bg-blue-400 { background-color: #5a9fff !important; }
.bg-blue-500 { background-color: #1e6bff !important; }
.bg-blue-600 { background-color: #031046 !important; }
.bg-blue-700 { background-color: #020a36 !important; }
.bg-blue-800 { background-color: #010726 !important; }
.bg-blue-900 { background-color: #010516 !important; }
.bg-blue-950 { background-color: #00020b !important; }

/* Text Colors */
.text-blue-50 { color: #f0f3ff !important; }
.text-blue-100 { color: #dce7ff !important; }
.text-blue-200 { color: #b8d0ff !important; }
.text-blue-300 { color: #8db8ff !important; }
.text-blue-400 { color: #5a9fff !important; }
.text-blue-500 { color: #1e6bff !important; }
.text-blue-600 { color: #031046 !important; }
.text-blue-700 { color: #020a36 !important; }
.text-blue-800 { color: #010726 !important; }
.text-blue-900 { color: #010516 !important; }
.text-blue-950 { color: #00020b !important; }

/* Border Colors */
.border-blue-50 { border-color: #f0f3ff !important; }
.border-blue-100 { border-color: #dce7ff !important; }
.border-blue-200 { border-color: #b8d0ff !important; }
.border-blue-300 { border-color: #8db8ff !important; }
.border-blue-400 { border-color: #5a9fff !important; }
.border-blue-500 { border-color: #1e6bff !important; }
.border-blue-600 { border-color: #031046 !important; }
.border-blue-700 { border-color: #020a36 !important; }
.border-blue-800 { border-color: #010726 !important; }
.border-blue-900 { border-color: #010516 !important; }
.border-blue-950 { border-color: #00020b !important; }

/* Ring Colors for Focus States */
.ring-blue-50 { --tw-ring-color: #f0f3ff !important; }
.ring-blue-100 { --tw-ring-color: #dce7ff !important; }
.ring-blue-200 { --tw-ring-color: #b8d0ff !important; }
.ring-blue-300 { --tw-ring-color: #8db8ff !important; }
.ring-blue-400 { --tw-ring-color: #5a9fff !important; }
.ring-blue-500 { --tw-ring-color: #1e6bff !important; }
.ring-blue-600 { --tw-ring-color: #031046 !important; }
.ring-blue-700 { --tw-ring-color: #020a36 !important; }
.ring-blue-800 { --tw-ring-color: #010726 !important; }
.ring-blue-900 { --tw-ring-color: #010516 !important; }
.ring-blue-950 { --tw-ring-color: #00020b !important; }

/* Focus Ring Color for ring-blue-500 (most common) */
.focus\:ring-blue-500:focus { --tw-ring-color: #1e6bff !important; }

/* Hover Background Colors */
.hover\:bg-blue-50:hover { background-color: #f0f3ff !important; }
.hover\:bg-blue-100:hover { background-color: #dce7ff !important; }
.hover\:bg-blue-200:hover { background-color: #b8d0ff !important; }
.hover\:bg-blue-300:hover { background-color: #8db8ff !important; }
.hover\:bg-blue-400:hover { background-color: #5a9fff !important; }
.hover\:bg-blue-500:hover { background-color: #1e6bff !important; }
.hover\:bg-blue-600:hover { background-color: #031046 !important; }
.hover\:bg-blue-700:hover { background-color: #020a36 !important; }
.hover\:bg-blue-800:hover { background-color: #010726 !important; }
.hover\:bg-blue-900:hover { background-color: #010516 !important; }
.hover\:bg-blue-950:hover { background-color: #00020b !important; }

/* Hover Text Colors */
.hover\:text-blue-50:hover { color: #f0f3ff !important; }
.hover\:text-blue-100:hover { color: #dce7ff !important; }
.hover\:text-blue-200:hover { color: #b8d0ff !important; }
.hover\:text-blue-300:hover { color: #8db8ff !important; }
.hover\:text-blue-400:hover { color: #5a9fff !important; }
.hover\:text-blue-500:hover { color: #1e6bff !important; }
.hover\:text-blue-600:hover { color: #031046 !important; }
.hover\:text-blue-700:hover { color: #020a36 !important; }
.hover\:text-blue-800:hover { color: #010726 !important; }
.hover\:text-blue-900:hover { color: #010516 !important; }
.hover\:text-blue-950:hover { color: #00020b !important; }

/* Hover Border Colors */
.hover\:border-blue-50:hover { border-color: #f0f3ff !important; }
.hover\:border-blue-100:hover { border-color: #dce7ff !important; }
.hover\:border-blue-200:hover { border-color: #b8d0ff !important; }
.hover\:border-blue-300:hover { border-color: #8db8ff !important; }
.hover\:border-blue-400:hover { border-color: #5a9fff !important; }
.hover\:border-blue-500:hover { border-color: #1e6bff !important; }
.hover\:border-blue-600:hover { border-color: #031046 !important; }
.hover\:border-blue-700:hover { border-color: #020a36 !important; }
.hover\:border-blue-800:hover { border-color: #010726 !important; }
.hover\:border-blue-900:hover { border-color: #010516 !important; }
.hover\:border-blue-950:hover { border-color: #00020b !important; }

/* ===== GLOBAL BUTTON CLASSES ===== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  background-color: #031046;
  border: 1px solid #031046;
  border-radius: 0.5rem;
  color: white;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.btn-primary:hover {
  background-color: #020a36;
  border-color: #020a36;
}

.btn-primary:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(30, 107, 255, 0.5), 0 0 0 4px rgba(30, 107, 255, 0.1);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  background-color: white;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  color: #374151;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.btn-secondary:hover {
  background-color: #f9fafb;
  border-color: #9ca3af;
}

.btn-secondary:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(30, 107, 255, 0.5), 0 0 0 4px rgba(30, 107, 255, 0.1);
}

.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  background-color: #dc2626;
  border: 1px solid #dc2626;
  border-radius: 0.5rem;
  color: white;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.btn-danger:hover {
  background-color: #b91c1c;
  border-color: #b91c1c;
}

.btn-danger:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.5), 0 0 0 4px rgba(239, 68, 68, 0.1);
}

.btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  background-color: #16a34a;
  border: 1px solid #16a34a;
  border-radius: 0.5rem;
  color: white;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.btn-success:hover {
  background-color: #15803d;
  border-color: #15803d;
}

.btn-success:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.5), 0 0 0 4px rgba(34, 197, 94, 0.1);
}

.btn-disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1rem 1.5rem;
  font-weight: 600;
  border-radius: 0.5rem;
  background-color: #9ca3af;
  color: #4b5563;
  cursor: not-allowed;
  transition: all 0.2s;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Button Size Variants */
.btn-sm { 
  padding: 0.375rem 0.75rem; 
  font-size: 0.875rem; 
}
.btn-lg { 
  padding: 1rem 1.5rem; 
  font-size: 1.125rem; 
}
.btn-full { 
  width: 100%; 
  justify-content: center; 
}

/* ===== GLOBAL FORM CLASSES ===== */
.input-base {
  display: block;
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid #d1d5db;
  background-color: white;
  padding: 0.75rem 1rem;
  color: #111827;
  transition: all 0.2s;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.input-base:focus {
  outline: none;
  border-color: #1e6bff;
  box-shadow: 0 0 0 2px rgba(30, 107, 255, 0.5), 0 0 0 4px rgba(30, 107, 255, 0.1);
}

.input-error {
  display: block;
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid #fca5a5;
  background-color: #fef2f2;
  padding: 0.75rem 1rem;
  color: #111827;
  transition: all 0.2s;
}

.input-error:focus {
  outline: none;
  border-color: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.5), 0 0 0 4px rgba(239, 68, 68, 0.1);
}

.select-base {
  display: block;
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid #d1d5db;
  background-color: white;
  padding: 0.75rem 1rem;
  padding-right: 2.5rem;
  color: #111827;
  transition: all 0.2s;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  appearance: none;
}

.select-base:focus {
  outline: none;
  border-color: #1e6bff;
  box-shadow: 0 0 0 2px rgba(30, 107, 255, 0.5), 0 0 0 4px rgba(30, 107, 255, 0.1);
}

.select-error {
  display: block;
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid #fca5a5;
  background-color: #fef2f2;
  padding: 0.75rem 1rem;
  padding-right: 2.5rem;
  color: #111827;
  transition: all 0.2s;
  appearance: none;
}

.select-error:focus {
  outline: none;
  border-color: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.5), 0 0 0 4px rgba(239, 68, 68, 0.1);
}

.textarea-base {
  display: block;
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid #d1d5db;
  background-color: white;
  padding: 0.75rem 1rem;
  color: #111827;
  transition: all 0.2s;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  resize: none;
}

.textarea-base:focus {
  outline: none;
  border-color: #1e6bff;
  box-shadow: 0 0 0 2px rgba(30, 107, 255, 0.5), 0 0 0 4px rgba(30, 107, 255, 0.1);
}

.label-base {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.75rem;
}

.label-required::after {
  content: " *";
  color: #ef4444;
  margin-left: 0.25rem;
}

.form-error {
  font-size: 0.875rem;
  color: #dc2626;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
}

.form-group {
  margin-bottom: 1rem;
}

/* Admin-specific smaller form controls */
.input-admin {
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 0.875rem;
}

.input-admin:focus {
  border-color: #1e6bff;
  box-shadow: 0 0 0 1px rgba(30, 107, 255, 0.5);
}

.select-admin {
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 0.875rem;
}

.select-admin:focus {
  border-color: #1e6bff;
  box-shadow: 0 0 0 1px rgba(30, 107, 255, 0.5);
}

/* ===== GLOBAL CARD CLASSES ===== */
.card-base {
  background-color: white;
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
}

.card-header {
  padding: 1rem 2rem;
  border-bottom: 1px solid #e5e7eb;
}

.card-content {
  padding: 2rem;
}

.card-content-sm {
  padding: 1.5rem;
}

.card-clickable {
  display: block;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.2s;
}

.card-clickable:hover {
  border-color: #d1d5db;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
}

.card-subtitle {
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/* ===== GLOBAL TABLE CLASSES ===== */
.table-base {
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.table-base tbody {
  background-color: white;
}

.table-base tbody tr {
  border-bottom: 1px solid #e5e7eb;
}

.table-header {
  background-color: #f9fafb;
}

.table-header-cell {
  padding: 0.75rem 1.5rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.table-row {
  transition: background-color 0.2s;
}

.table-row:hover {
  background-color: #f9fafb;
}

.table-cell {
  padding: 1rem 1.5rem;
  white-space: nowrap;
  font-size: 0.875rem;
  color: #6b7280;
}

.table-cell-primary {
  padding: 1rem 1.5rem;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 500;
  color: #111827;
}

.table-wrapper {
  overflow-x: auto;
}

/* User info table specific styles */
.table-user-info {
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.table-user-info tbody {
  background-color: white;
}

.table-user-info tbody tr {
  border-bottom: 1px solid #e5e7eb;
}

.table-user-cell-label {
  padding: 0.5rem 1rem;
  background-color: #f9fafb;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  width: 33.333333%;
}

.table-user-cell-value {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: #374151;
  width: 66.666667%;
}

@media (min-width: 640px) {
  .table-user-cell-label {
    padding: 0.75rem 1.5rem;
    width: 25%;
  }
  
  .table-user-cell-value {
    padding: 0.75rem 1.5rem;
    width: 75%;
  }
}

/* Global Checkbox Classes */
.checkbox-base {
  display: flex;
  align-items: center;
  padding: 1rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  background-color: white;
  transition: all 0.2s;
  cursor: pointer;
}

.checkbox-base:hover {
  background-color: #f9fafb;
}

.checkbox-compact {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  cursor: pointer;
}

.checkbox-with-icon {
  display: flex;
  align-items: center;
  padding: 1rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  background-color: white;
  transition: all 0.2s;
  cursor: pointer;
}

.checkbox-with-icon:hover {
  background-color: #f9fafb;
}

.checkbox-input {
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 0.25rem;
  color: #1e6bff;
  border: 1px solid #d1d5db;
}

.checkbox-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(30, 107, 255, 0.5), 0 0 0 4px rgba(30, 107, 255, 0.1);
}

.checkbox-label {
  margin-left: 0.75rem;
  flex: 1;
}

.checkbox-label-text {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #111827;
}

.checkbox-description {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.25rem;
}

.checkbox-icon {
  margin-left: 0.75rem;
  margin-right: 0.5rem;
  flex-shrink: 0;
}

.checkbox-compact .checkbox-label-text {
  margin-left: 0.5rem;
}