/* ==========================================================
   Custom Bootstrap Color System
   Primary: Deep Navy | Success: Teal | Danger: Deep Red
   Warning: Amber | Info: Ocean Blue | Secondary: Slate Gray
   ========================================================== */

:root {
  --bs-primary: #2A2B5A;
  --bs-primary-rgb: 42, 43, 90;
  --bs-primary-hover: #1F204A;
  --bs-primary-active: #171839;
  --bs-secondary: #6C757D;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-secondary-hover: #5A6167;
  --bs-secondary-active: #484E53;
  --bs-success: #0D7A5F;
  --bs-success-rgb: 13, 122, 95;
  --bs-success-hover: #0A6550;
  --bs-success-active: #085040;
  --bs-success-alert-bg: #D1F2EB;
  --bs-success-alert-border: #B0E6D9;
  --bs-success-alert-color: #085040;
  --bs-danger: #C53030;
  --bs-danger-rgb: 197, 48, 48;
  --bs-danger-hover: #A82828;
  --bs-danger-active: #8B2020;
  --bs-danger-alert-bg: #FDE8E8;
  --bs-danger-alert-border: #FBD5D5;
  --bs-danger-alert-color: #8B2020;
  --bs-warning: #E6A817;
  --bs-warning-rgb: 230, 168, 23;
  --bs-warning-hover: #C99213;
  --bs-warning-active: #A87B0F;
  --bs-warning-alert-bg: #FEF3CD;
  --bs-warning-alert-border: #FDE9A6;
  --bs-warning-alert-color: #A87B0F;
  --bs-info: #4A90B8;
  --bs-info-rgb: 74, 144, 184;
  --bs-info-hover: #3D7A9E;
  --bs-info-active: #326585;
  --bs-info-alert-bg: #DCEEF7;
  --bs-info-alert-border: #C3E0F0;
  --bs-info-alert-color: #326585;

  /* Typography Scale */
  --fs-xs: 0.625rem;   /* 10px — fine print, smallest badges */
  --fs-sm: 0.75rem;    /* 12px — secondary text, metadata, small badges */
  --fs-base: 1rem;     /* 16px — body text (Bootstrap default) */
  --fs-md: 1.25rem;    /* 20px — drag handles, emphasis icons */
  --fs-lg: 1.5rem;     /* 24px — nav icons, medium empty states */
  --fs-xl: 2rem;       /* 32px — section icons, large empty states */
  --fs-2xl: 3rem;      /* 48px — hero icons, page-level empty states */
}

/* --- Typography Utility Classes --- */
.fs-xs  { font-size: var(--fs-xs) !important; }
.fs-sm  { font-size: var(--fs-sm) !important; }
.fs-md  { font-size: var(--fs-md) !important; }
.fs-lg  { font-size: var(--fs-lg) !important; }
.fs-xl  { font-size: var(--fs-xl) !important; }
.fs-2xl { font-size: var(--fs-2xl) !important; }

/* Avatar sizing */
.avatar-sm {
  width: 30px;
  height: 30px;
  font-size: var(--fs-sm);
}
.avatar-md {
  width: 32px;
  height: 32px;
  font-size: 0.875rem;
}

/* Monospace textarea with consistent sizing */
.textarea-mono {
  font-size: 0.9rem;
}

/* --- Primary --- */
.bg-primary { background-color: var(--bs-primary) !important; }
.text-primary { color: var(--bs-primary) !important; }
.border-primary { border-color: var(--bs-primary) !important; }

.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary-hover);
  --bs-btn-hover-border-color: var(--bs-primary-hover);
  --bs-btn-active-bg: var(--bs-primary-active);
  --bs-btn-active-border-color: var(--bs-primary-active);
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary-hover);
  --bs-btn-active-border-color: var(--bs-primary-hover);
}

/* --- Success --- */
.bg-success { background-color: var(--bs-success) !important; }
.text-success { color: var(--bs-success) !important; }
.border-success { border-color: var(--bs-success) !important; }

.btn-success {
  --bs-btn-bg: var(--bs-success);
  --bs-btn-border-color: var(--bs-success);
  --bs-btn-hover-bg: var(--bs-success-hover);
  --bs-btn-hover-border-color: var(--bs-success-hover);
  --bs-btn-active-bg: var(--bs-success-active);
  --bs-btn-active-border-color: var(--bs-success-active);
}

.btn-outline-success {
  --bs-btn-color: var(--bs-success);
  --bs-btn-border-color: var(--bs-success);
  --bs-btn-hover-bg: var(--bs-success);
  --bs-btn-hover-border-color: var(--bs-success);
  --bs-btn-active-bg: var(--bs-success-hover);
  --bs-btn-active-border-color: var(--bs-success-hover);
}

.alert-success {
  --bs-alert-bg: var(--bs-success-alert-bg);
  --bs-alert-color: var(--bs-success-alert-color);
  --bs-alert-border-color: var(--bs-success-alert-border);
}

/* --- Danger --- */
.bg-danger { background-color: var(--bs-danger) !important; }
.text-danger { color: var(--bs-danger) !important; }
.border-danger { border-color: var(--bs-danger) !important; }

.btn-danger {
  --bs-btn-bg: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-bg: var(--bs-danger-hover);
  --bs-btn-hover-border-color: var(--bs-danger-hover);
  --bs-btn-active-bg: var(--bs-danger-active);
  --bs-btn-active-border-color: var(--bs-danger-active);
}

.btn-outline-danger {
  --bs-btn-color: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-bg: var(--bs-danger);
  --bs-btn-hover-border-color: var(--bs-danger);
  --bs-btn-active-bg: var(--bs-danger-hover);
  --bs-btn-active-border-color: var(--bs-danger-hover);
}

.alert-danger {
  --bs-alert-bg: var(--bs-danger-alert-bg);
  --bs-alert-color: var(--bs-danger-alert-color);
  --bs-alert-border-color: var(--bs-danger-alert-border);
}

/* --- Warning --- */
.bg-warning { background-color: var(--bs-warning) !important; }
.text-warning { color: var(--bs-warning) !important; }
.border-warning { border-color: var(--bs-warning) !important; }

.btn-warning {
  --bs-btn-bg: var(--bs-warning);
  --bs-btn-border-color: var(--bs-warning);
  --bs-btn-hover-bg: var(--bs-warning-hover);
  --bs-btn-hover-border-color: var(--bs-warning-hover);
  --bs-btn-active-bg: var(--bs-warning-active);
  --bs-btn-active-border-color: var(--bs-warning-active);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}

.btn-outline-warning {
  --bs-btn-color: var(--bs-warning);
  --bs-btn-border-color: var(--bs-warning);
  --bs-btn-hover-bg: var(--bs-warning);
  --bs-btn-hover-border-color: var(--bs-warning);
  --bs-btn-active-bg: var(--bs-warning-hover);
  --bs-btn-active-border-color: var(--bs-warning-hover);
}

.alert-warning {
  --bs-alert-bg: var(--bs-warning-alert-bg);
  --bs-alert-color: var(--bs-warning-alert-color);
  --bs-alert-border-color: var(--bs-warning-alert-border);
}

/* --- Info --- */
.bg-info { background-color: var(--bs-info) !important; }
.text-info { color: var(--bs-info) !important; }
.border-info { border-color: var(--bs-info) !important; }

.btn-info {
  --bs-btn-bg: var(--bs-info);
  --bs-btn-border-color: var(--bs-info);
  --bs-btn-hover-bg: var(--bs-info-hover);
  --bs-btn-hover-border-color: var(--bs-info-hover);
  --bs-btn-active-bg: var(--bs-info-active);
  --bs-btn-active-border-color: var(--bs-info-active);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}

.btn-outline-info {
  --bs-btn-color: var(--bs-info);
  --bs-btn-border-color: var(--bs-info);
  --bs-btn-hover-bg: var(--bs-info);
  --bs-btn-hover-border-color: var(--bs-info);
  --bs-btn-active-bg: var(--bs-info-hover);
  --bs-btn-active-border-color: var(--bs-info-hover);
}

.alert-info {
  --bs-alert-bg: var(--bs-info-alert-bg);
  --bs-alert-color: var(--bs-info-alert-color);
  --bs-alert-border-color: var(--bs-info-alert-border);
}

/* --- Badge overrides for consistent colors --- */
.badge.bg-success { color: #fff !important; }
.badge.bg-danger { color: #fff !important; }
.badge.bg-warning { color: #fff !important; }
.badge.bg-info { color: #fff !important; }


/* Compact layout on notebook screens */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .sidebar__content .container-fluid {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .table-responsive .table td,
  .table-responsive .table th {
    padding-left: 0.375rem !important;
    padding-right: 0.375rem !important;
    font-size: 0.8125rem;
  }

  .table-responsive .table th {
    font-size: 0.75rem;
  }
}

/* Prevent .table-responsive from clipping dropdown menus on desktop */
@media (min-width: 992px) {
  .table-responsive {
    overflow: visible;
  }
}

/* Hide scrollbar on nav tabs for clean mobile scrolling */
.nav.overflow-auto::-webkit-scrollbar {
  display: none;
}

/* Global mobile responsive overrides */
@media (max-width: 768px) {
  .card-body {
    padding: 1rem !important;
  }

  .badge {
    font-size: var(--fs-sm);
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .d-flex.gap-2 {
    gap: 0.5rem !important;
  }
}

@media (max-width: 576px) {
  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .card-body {
    padding: 0.75rem !important;
  }

  .badge {
    font-size: var(--fs-xs);
    padding: 0.3rem 0.5rem;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .fw-bold {
    font-size: 0.875rem;
  }

  .small {
    font-size: var(--fs-sm);
  }
}

/* Warning stripe for rows with import warnings */
tr.row-warning > td,
div.row-warning {
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 8px,
    rgba(var(--bs-danger-rgb), 0.04) 8px,
    rgba(var(--bs-danger-rgb), 0.04) 16px
  ) !important;
}