/* ═══════════════════════════════════════════════════════════════ */
/* COMPONENT STYLES */
/* ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════ */
/* TYPOGRAPHY COMPONENTS */
/* ═══════════════════════════════════════════════════════════════ */

/* ─────────────── HEADING COMPONENTS ─────────────── */

/* Page title - large, bold heading */
.heading-page {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.25;
}

/* Section title - medium heading for sections */
.heading-section {
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.25;
}

/* Subsection title - smaller heading for subsections */
.heading-subsection {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.25;
}

/* Card title - heading for card components */
.heading-card {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.25;
}

/* Dashboard brand title */
.heading-brand {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.25;
}

/* ─────────────── BODY TEXT COMPONENTS ─────────────── */

/* Primary body text */
.text-body {
  font-size: 0.875rem;
  color: #374151;
  line-height: 1.5;
}

/* Secondary body text - muted */
.text-body-secondary {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.5;
}

/* Small body text */
.text-body-sm {
  font-size: 0.75rem;
  color: #374151;
  line-height: 1.5;
}

/* Small secondary text - muted */
.text-body-sm-secondary {
  font-size: 0.75rem;
  color: #6b7280;
  line-height: 1.5;
}

/* Caption text - very small, muted */
.text-caption {
  font-size: 0.75rem;
  color: #9ca3af;
  line-height: 1.4;
}

/* ─────────────── LABEL COMPONENTS ─────────────── */

/* Form labels */
.label-form {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.5rem;
  line-height: 1.25;
}

/* Input labels - smaller, medium weight */
.label-input {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  line-height: 1.25;
}

/* Field labels - for data display */
.label-field {
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  line-height: 1.25;
}

/* ─────────────── STATUS TEXT COMPONENTS ─────────────── */

/* Success text */
.text-success {
  color: #059669;
  font-weight: 500;
}

/* Error text */
.text-error {
  color: #dc2626;
  font-weight: 500;
}

/* Warning text */
.text-warning {
  color: #d97706;
  font-weight: 500;
}

/* Info text */
.text-info {
  color: #2563eb;
  font-weight: 500;
}

/* ─────────────── SPECIAL TEXT COMPONENTS ─────────────── */

/* Monospace text for IDs, codes, etc. */
.text-mono {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  font-size: 0.75rem;
  color: #6b7280;
  line-height: 1.4;
}

/* Monospace text - small variant */
.text-mono-xs {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  font-size: 0.625rem;
  color: #9ca3af;
  line-height: 1.4;
}

/* Center aligned text */
.text-center {
  text-align: center;
}

/* Empty state text */
.text-empty-state {
  font-size: 1.125rem;
  font-weight: 500;
  color: #6b7280;
  text-align: center;
  line-height: 1.5;
}

/* Empty state description */
.text-empty-description {
  font-size: 0.875rem;
  color: #9ca3af;
  text-align: center;
  line-height: 1.5;
}

/* Large icon text for empty states */
.text-icon-large {
  font-size: 2.25rem;
  line-height: 1;
  margin-bottom: 1rem;
}

/* ─────────────── INTERACTIVE TEXT COMPONENTS ─────────────── */

/* Clickable text that behaves like a link */
.text-interactive {
  color: #2563eb;
  cursor: pointer;
  transition: color 0.15s ease-in-out;
}

.text-interactive:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

/* Muted interactive text */
.text-interactive-muted {
  color: #6b7280;
  cursor: pointer;
  transition: color 0.15s ease-in-out;
}

.text-interactive-muted:hover {
  color: #374151;
}

/* Universal link styling */
a, .table-link {
  color: #1e40af;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

a:hover, .table-link:hover {
  color: #1e3a8a;
  text-decoration: underline;
}

/* Ensure links in tables are properly styled */
table a, .gridjs-table a {
  color: #1e40af;
}

table a:hover, .gridjs-table a:hover {
  color: #1e3a8a;
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════ */
/* UNIFIED BUTTON SYSTEM */
/* ═══════════════════════════════════════════════════════════════ */

/* Base button class - shared properties for all buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0.25rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  text-decoration: none;
  line-height: 1.25;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ─────────────── SIZE VARIANTS ─────────────── */

.btn-xs {
  padding: 0.125rem 0.375rem;
  font-size: 0.75rem;
  height: 1.5rem;
}

.btn-sm {
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  height: 2rem;
}

.btn-md {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  height: 2.5rem;
}

.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  height: 3rem;
}

/* ─────────────── COLOR VARIANTS ─────────────── */

/* Primary - Blue */
.btn-primary {
  background-color: #3b82f6;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background-color: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.25);
}

.btn-primary:disabled {
  background-color: #93c5fd;
}

/* Secondary - Gray */
.btn-secondary {
  background-color: #e5e7eb;
  color: #374151;
}

.btn-secondary:hover:not(:disabled) {
  background-color: #d1d5db;
}

/* Success - Green */
.btn-success {
  background-color: #10b981;
  color: white;
}

.btn-success:hover:not(:disabled) {
  background-color: #059669;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.25);
}

/* Danger - Red */
.btn-danger {
  background-color: #ef4444;
  color: white;
}

.btn-danger:hover:not(:disabled) {
  background-color: #dc2626;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.25);
}

/* Warning - Yellow */
.btn-warning {
  background-color: #f59e0b;
  color: white;
}

.btn-warning:hover:not(:disabled) {
  background-color: #d97706;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.25);
}

/* ─────────────── OUTLINE VARIANTS ─────────────── */

.btn-outline {
  background-color: transparent;
  border: 1px solid;
}

.btn-outline.btn-primary {
  border-color: #3b82f6;
  color: #3b82f6;
  background-color: transparent;
}

.btn-outline.btn-primary:hover:not(:disabled) {
  background-color: #3b82f6;
  color: white;
  transform: translateY(-1px);
}

.btn-outline.btn-secondary {
  border-color: #d1d5db;
  color: #374151;
  background-color: transparent;
}

.btn-outline.btn-secondary:hover:not(:disabled) {
  background-color: #f3f4f6;
  border-color: #9ca3af;
}

.btn-outline.btn-danger {
  border-color: #ef4444;
  color: #ef4444;
  background-color: transparent;
}

.btn-outline.btn-danger:hover:not(:disabled) {
  background-color: #ef4444;
  color: white;
  transform: translateY(-1px);
}

/* ─────────────── GHOST VARIANTS ─────────────── */

.btn-ghost {
  background-color: transparent;
  border: none;
}

.btn-ghost.btn-primary {
  color: #3b82f6;
}

.btn-ghost.btn-primary:hover:not(:disabled) {
  background-color: rgba(59, 130, 246, 0.1);
}

.btn-ghost.btn-secondary {
  color: #6b7280;
}

.btn-ghost.btn-secondary:hover:not(:disabled) {
  background-color: #f3f4f6;
  color: #374151;
}

.btn-ghost.btn-danger {
  color: #ef4444;
}

.btn-ghost.btn-danger:hover:not(:disabled) {
  background-color: rgba(239, 68, 68, 0.1);
}

/* ─────────────── SPECIAL VARIANTS ─────────────── */

/* Full width */
.btn-full {
  width: 100%;
}

/* Icon only buttons */
.btn-icon {
  padding: 0.5rem;
  width: 2.5rem;
  height: 2.5rem;
}

.btn-icon.btn-sm {
  padding: 0.25rem;
  width: 2rem;
  height: 2rem;
}

.btn-icon.btn-xs {
  padding: 0.125rem;
  width: 1.5rem;
  height: 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════ */
/* LAYOUT COMPONENTS */
/* ═══════════════════════════════════════════════════════════════ */

/* Dashboard section styling */
.dashboard-section {
  margin-bottom: 3rem;
  background-color: white;
  padding: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
}

.dashboard-section.section-loading {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgba(59, 130, 246, 0.5);
}

/* Table container styling - minimal wrapper that doesn't interfere with Grid.js */
.table-container {
  transition: opacity 0.3s ease;
}

.table-container.table-loading {
  opacity: 0.6;
}

/* Loading overlay styling */
.loading-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: 0.5rem;
}

/* Loading spinner content */
.loading-spinner-content {
  text-align: center;
}

.loading-spinner-content .spinner {
  display: inline-block;
  height: 3rem;
  width: 3rem;
  animation: spin 1s linear infinite;
  border-radius: 50%;
  border: 4px solid #bfdbfe;
  border-top-color: #2563eb;
  margin-bottom: 0.75rem;
}

.loading-spinner-content .spinner-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: #1d4ed8;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Modal backdrop styling */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
}

/* ═══════════════════════════════════════════════════════════════ */
/* CARD COMPONENTS */
/* ═══════════════════════════════════════════════════════════════ */

/* Base card class - shared properties for all cards */
.card {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

/* ─────────────── PADDING VARIANTS ─────────────── */

.card-sm {
  padding: 1rem;
}

.card-md {
  padding: 1.5rem;
}

.card-lg {
  padding: 2rem;
}

/* ─────────────── LAYOUT VARIANTS ─────────────── */

/* Page container with max-width and centering */
.card-container {
  max-width: 64rem;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* List item with horizontal layout */
.card-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #e5e7eb;
}

/* ═══════════════════════════════════════════════════════════════ */
/* LAYOUT UTILITY COMPONENTS */
/* ═══════════════════════════════════════════════════════════════ */

/* Fixed header positioning */
.header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

/* Dropdown container positioning */
.dropdown-container {
  position: absolute;
  z-index: 50;
  margin-top: 0.5rem;
  width: 16rem;
  border: 1px solid #e5e7eb;
}

/* Dropdown with padding for menu items */
.dropdown-menu {
  padding: 0.5rem 0;
}

/* Dropdown message container */
.dropdown-message {
  /* No additional padding - uses card-sm for content padding */
}

/* Flex layout patterns */
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-items {
  display: flex;
  align-items: center;
}

.flex-gap-sm {
  gap: 0.5rem;
}

.flex-gap-md {
  gap: 0.75rem;
}

.flex-gap-lg {
  gap: 1rem;
}

/* Vertical spacing patterns */
.stack-sm {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stack-md {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.stack-lg {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Width sizing patterns */
.width-form {
  width: 20rem;
}

.width-modal {
  max-width: 28rem;
  width: 100%;
}

/* Combined sizing patterns */
.modal-sizing {
  max-width: 28rem;
  width: 100%;
  margin: 0 1rem;
}

.form-container {
  width: 20rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Toast notification component */
.toast {
  opacity: 0;
  transition: opacity 75ms ease-in-out;
  max-width: 28rem;
  width: 100%;
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  padding: 1rem;
  border-left-width: 4px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.toast.toast-visible {
  opacity: 1;
}

.toast-fade-transition {
  transition: opacity 2s ease-out;
}

/* Toast variant classes - for different message types */
.toast-success {
  border-left-color: #4ade80;
}

.toast-error {
  border-left-color: #f87171;
}

.toast-info {
  border-left-color: #60a5fa;
}

/* Toast content structure classes */
.toast-icon {
  flex-shrink: 0;
  font-size: 1.125rem;
}

.toast-content {
  flex: 1;
}

/* Positioning components */
.toast-container-position {
  position: fixed;
  top: 5rem;
  right: 1rem;
  z-index: 50;
}

/* Dropdown sub-components */
.dropdown-header {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  border-bottom: 1px solid #f3f4f6;
}

.dropdown-separator {
  border-top: 1px solid #f3f4f6;
  margin: 0.25rem 0;
}

/* Border utility components */
.border-bottom-light {
  border-bottom: 1px solid #f3f4f6;
}

.border-bottom-normal {
  border-bottom: 1px solid #e5e7eb;
}

/* Dropdown item components */
.dropdown-nav-item {
  display: block;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: #374151;
  transition: all 0.2s ease;
}

.dropdown-nav-item:hover {
  background-color: #eff6ff;
  color: #2563eb;
  text-decoration: none;
}

.dropdown-option {
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: #374151;
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dropdown-option:hover {
  background-color: #f3f4f6;
  color: #1f2937;
}

.dropdown-option-success {
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: #374151;
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dropdown-option-success:hover {
  background-color: #f0fdf4;
  color: #15803d;
}

.dropdown-text {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: #6b7280;
  text-align: center;
}

.dropdown-button-sm {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  background-color: #f3f4f6;
  color: #374151;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dropdown-button-sm:hover {
  background-color: #e5e7eb;
}

/* ═══════════════════════════════════════════════════════════════ */
/* NAVIGATION COMPONENTS */
/* ═══════════════════════════════════════════════════════════════ */

/* Navigation link styling */
.nav-link {
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  transition: all 0.2s ease;
  border-bottom: 2px solid transparent;
  height: 100%;
}

.nav-link:hover {
  color: #2563eb;
  background-color: #f9fafb;
  border-bottom-color: #3b82f6;
  text-decoration: none;
}

/* Navigation link variant for danger actions */
.nav-link.nav-danger:hover {
  color: #dc2626;
  border-bottom-color: #ef4444;
}

/* ═══════════════════════════════════════════════════════════════ */
/* FORM COMPONENTS */
/* ═══════════════════════════════════════════════════════════════ */

/* Form input styling */
.form-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  transition: all 0.15s ease-in-out;
}

.form-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-input:disabled {
  background-color: #f9fafb;
  color: #6b7280;
  cursor: not-allowed;
}

/* Form select styling */
.form-select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  background-color: white;
  transition: all 0.15s ease-in-out;
}

.form-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ═══════════════════════════════════════════════════════════════ */
/* MESSAGE COMPONENTS */
/* ═══════════════════════════════════════════════════════════════ */

/* Success message styling */
.success-message {
  font-size: 0.875rem;
  font-weight: 500;
  color: #16a34a;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.success-message .checkmark {
  color: #16a34a;
  font-weight: 600;
}

/* Error message styling */
.error-message {
  font-size: 0.875rem;
  font-weight: 500;
  color: #dc2626;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Info message styling */
.info-message {
  font-size: 0.875rem;
  font-weight: 500;
  color: #2563eb;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* ═══════════════════════════════════════════════════════════════ */
/* SPECIALIZED UI COMPONENTS */
/* ═══════════════════════════════════════════════════════════════ */

/* Info box - for popup content and information displays */
.info-box {
  padding: 0.75rem;
  background-color: #f9fafb;
  border-radius: 0.25rem;
  border: 1px solid #e5e7eb;
  font-size: 0.75rem;
  color: #374151;
  line-height: 1.5;
}

/* Info box highlight variant - for special announcements */
.info-box-highlight {
  padding: 1rem;
  background-color: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 0.5rem;
}

/* Status message - for dynamic status displays */
.status-message {
  padding: 0.75rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  color: #374151;
  line-height: 1.5;
  display: none;
}

.status-message.visible {
  display: block;
}

/* Status message spacing variant */
.status-message-spaced {
  margin-top: 1.5rem;
}

/* Status message variants */
.status-message.success {
  background-color: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.status-message.error {
  background-color: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.status-message.warning {
  background-color: #fffbeb;
  color: #d97706;
  border: 1px solid #fed7aa;
}

.status-message.info {
  background-color: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

/* Divider text - for "or" separators in forms */
.divider-text {
  background-color: white;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 0.75rem;
  color: #6b7280;
  line-height: 1.5;
}

/* Corner badge - for positioned labels and badges */
.corner-badge {
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
  font-size: 0.75rem;
  color: #6b7280;
  line-height: 1.5;
}

/* Help message - for error/help text */
.help-message {
  font-size: 0.75rem;
  color: #6b7280;
  line-height: 1.5;
  margin-top: 0.5rem;
}

/* Close button - for modals, toasts, cards */
.btn-close {
  flex-shrink: 0;
  color: #6b7280;
  transition: color 0.15s ease-in-out;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0.25rem;
  border-radius: 0.125rem;
}

.btn-close:hover {
  color: #374151;
}

.btn-close:focus {
  outline: none;
  color: #374151;
}

/* Authentication alerts container - for dynamic server alerts */
.auth-alerts-container {
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}

/* Dropdown item text - for flexible dropdown content */
.dropdown-item-text {
  flex: 1;
}

.dropdown-item-text.clickable {
  flex: 1;
  cursor: pointer;
}

/* Dropdown message text - for centered secondary text in dropdowns */
.dropdown-message-text {
  font-size: 0.75rem;
  color: #6b7280;
  line-height: 1.5;
  text-align: center;
}

/* Active filters wrapper - for filter display containers */
.active-filters-wrapper {
  margin-bottom: 1rem;
}