/**
 * Component Library - Workplace Management App
 * Modern, reusable UI components
 *
 * Requires: design-tokens.css
 */

/* ============================================
   BUTTONS - Modern Button System
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-size: var(--text-base);
  font-weight: var(--btn-font-weight);
  line-height: var(--leading-tight);
  border-radius: var(--btn-border-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-base) var(--ease-in-out);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn:active {
  transform: translateY(0);
}

.btn:disabled,
.btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Button Sizes */
.btn-sm {
  padding: var(--btn-padding-y-sm) var(--btn-padding-x-sm);
  font-size: var(--text-sm);
}

.btn-lg {
  padding: var(--btn-padding-y-lg) var(--btn-padding-x-lg);
  font-size: var(--text-lg);
}

/* Primary Button */
.btn-primary {
  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
  color: var(--text-inverse);
  border-color: var(--color-primary-600);
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--color-primary-700) 0%, var(--color-primary-800) 100%);
  border-color: var(--color-primary-700);
  box-shadow: var(--shadow-md);
}

.btn-primary:active:not(:disabled) {
  background: var(--color-primary-800);
}

/* Secondary Button */
.btn-secondary {
  background: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--border-medium);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--bg-secondary);
  border-color: var(--border-dark);
}

/* Success Button */
.btn-success {
  background: linear-gradient(135deg, var(--color-success-600) 0%, var(--color-success-700) 100%);
  color: var(--text-inverse);
  border-color: var(--color-success-600);
}

.btn-success:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--color-success-700) 0%, var(--color-success-800) 100%);
  box-shadow: var(--shadow-md);
}

/* Danger Button */
.btn-danger {
  background: linear-gradient(135deg, var(--color-danger-600) 0%, var(--color-danger-700) 100%);
  color: var(--text-inverse);
  border-color: var(--color-danger-600);
}

.btn-danger:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--color-danger-700) 0%, var(--color-danger-800) 100%);
  box-shadow: var(--shadow-md);
}

/* Warning Button */
.btn-warning {
  background: linear-gradient(135deg, var(--color-warning-500) 0%, var(--color-warning-600) 100%);
  color: var(--color-neutral-900);
  border-color: var(--color-warning-500);
}

.btn-warning:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--color-warning-600) 0%, var(--color-warning-700) 100%);
  box-shadow: var(--shadow-md);
}

/* Info Button */
.btn-info {
  background: linear-gradient(135deg, var(--color-info-600) 0%, var(--color-info-700) 100%);
  color: var(--text-inverse);
  border-color: var(--color-info-600);
}

.btn-info:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--color-info-700) 0%, var(--color-info-800) 100%);
  box-shadow: var(--shadow-md);
}

/* Ghost Button */
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}

.btn-ghost:hover:not(:disabled) {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

/* Outline Buttons */
.btn-outline-primary {
  background: transparent;
  color: var(--color-primary-600);
  border-color: var(--color-primary-600);
}

.btn-outline-primary:hover:not(:disabled) {
  background: var(--color-primary-600);
  color: var(--text-inverse);
}

/* Loading State */
.btn.btn-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.btn.btn-loading::after {
  content: '';
  position: absolute;
  width: 1rem;
  height: 1rem;
  top: 50%;
  left: 50%;
  margin-left: -0.5rem;
  margin-top: -0.5rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-border 0.75s linear infinite;
}

@keyframes spinner-border {
  to { transform: rotate(360deg); }
}

/* Button with icon */
.btn i {
  font-size: 1.1em;
}

/* ============================================
   CARDS - Modern Card Components
   ============================================ */

.card {
  background: var(--bg-primary);
  border: var(--card-border);
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-shadow);
  transition: all var(--transition-base) var(--ease-in-out);
}

.card-hover:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card-header {
  padding: var(--space-5);
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-secondary);
  border-radius: var(--card-border-radius) var(--card-border-radius) 0 0;
}

.card-body {
  padding: var(--card-padding);
}

.card-footer {
  padding: var(--space-5);
  border-top: 1px solid var(--border-light);
  background: var(--bg-secondary);
  border-radius: 0 0 var(--card-border-radius) var(--card-border-radius);
}

.card-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.card-subtitle {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

/* ============================================
   BADGES - Status & Label Indicators
   ============================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2-5);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.badge-primary {
  background: var(--color-primary-100);
  color: var(--color-primary-700);
}

.badge-success {
  background: var(--color-success-100);
  color: var(--color-success-700);
}

.badge-warning {
  background: var(--color-warning-100);
  color: var(--color-warning-700);
}

.badge-danger {
  background: var(--color-danger-100);
  color: var(--color-danger-700);
}

.badge-info {
  background: var(--color-info-100);
  color: var(--color-info-700);
}

.badge-neutral {
  background: var(--color-neutral-100);
  color: var(--color-neutral-700);
}

/* Badge with dot indicator */
.badge-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ============================================
   FORMS - Modern Form Components
   ============================================ */

.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.form-label-required::after {
  content: '*';
  color: var(--color-danger-600);
  margin-left: var(--space-1);
}

.form-control {
  display: block;
  width: 100%;
  padding: var(--input-padding-y) var(--input-padding-x);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-primary);
  border: var(--input-border);
  border-radius: var(--input-border-radius);
  transition: all var(--transition-base) var(--ease-in-out);
}

.form-control:focus {
  outline: none;
  border-color: var(--input-focus-border);
  box-shadow: var(--input-focus-shadow);
}

.form-control:disabled {
  background: var(--bg-secondary);
  color: var(--text-disabled);
  cursor: not-allowed;
}

.form-control::placeholder {
  color: var(--text-tertiary);
}

/* Form validation states */
.form-control.is-valid {
  border-color: var(--color-success-500);
}

.form-control.is-valid:focus {
  border-color: var(--color-success-500);
  box-shadow: 0 0 0 3px var(--color-success-100);
}

.form-control.is-invalid {
  border-color: var(--color-danger-500);
}

.form-control.is-invalid:focus {
  border-color: var(--color-danger-500);
  box-shadow: 0 0 0 3px var(--color-danger-100);
}

.form-error {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-danger-600);
}

.form-help {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Form Groups - Enhanced spacing */
.form-group {
  margin-bottom: var(--space-5);
}

.form-group:last-child {
  margin-bottom: 0;
}

/* Form Section - Visual grouping of related fields */
.form-section {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-light);
}

.form-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.form-section-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.form-section-title i {
  color: var(--color-primary-600);
  font-size: var(--text-xl);
}

.form-section-description {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
}

/* Form Row - For horizontal layouts */
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.form-row:last-child {
  margin-bottom: 0;
}

.form-row > .form-group {
  flex: 1;
  min-width: 200px;
  margin-bottom: 0;
}

/* Form Fieldset - For grouping related inputs */
.form-fieldset {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  background: var(--bg-secondary);
}

.form-fieldset-legend {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  padding: 0 var(--space-2);
  margin-left: calc(-1 * var(--space-2));
  background: var(--bg-primary);
}

/* Form Inline - For inline form elements */
.form-inline {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.form-inline .form-group {
  margin-bottom: 0;
}

/* Form Actions - Button container at bottom of forms */
.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-top: var(--space-6);
  margin-top: var(--space-6);
  border-top: 1px solid var(--border-light);
}

.form-actions-left {
  justify-content: flex-start;
}

.form-actions-center {
  justify-content: center;
}

.form-actions-spread {
  justify-content: space-between;
}

/* Card-based Form Enhancement */
.card > .card-body > .form-group:last-child {
  margin-bottom: 0;
}

.card > .card-body > .row:last-child > [class*="col-"] > .mb-3:last-child {
  margin-bottom: 0 !important;
}

/* Form input sizes */
.form-control-sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

.form-control-lg {
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-lg);
}

/* Select styling enhancement */
.form-select {
  display: block;
  width: 100%;
  padding: var(--input-padding-y) var(--input-padding-x);
  padding-right: calc(var(--input-padding-x) * 3);
  font-size: var(--text-base);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right var(--input-padding-x) center;
  background-size: 16px 12px;
  border: var(--input-border);
  border-radius: var(--input-border-radius);
  appearance: none;
  transition: all var(--transition-base) var(--ease-in-out);
}

.form-select:focus {
  outline: none;
  border-color: var(--input-focus-border);
  box-shadow: var(--input-focus-shadow);
}

/* Checkbox and Radio enhancements */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.form-check:last-child {
  margin-bottom: 0;
}

.form-check-input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  border: 2px solid var(--border-medium);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast) var(--ease-in-out);
  cursor: pointer;
}

.form-check-input:checked {
  background-color: var(--color-primary-600);
  border-color: var(--color-primary-600);
}

.form-check-input[type="radio"] {
  border-radius: 50%;
}

.form-check-label {
  font-size: var(--text-base);
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
}

/* Form Check Group - For multiple checkboxes/radios */
.form-check-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-check-group-inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ============================================
   TABLES - Enhanced Table Styling
   ============================================ */

.table {
  width: 100%;
  margin-bottom: var(--space-4);
  border-collapse: separate;
  border-spacing: 0;
}

.table thead th {
  background: var(--table-header-bg);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--border-medium);
  text-align: left;
}

.table tbody td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--table-border);
  vertical-align: middle;
  height: var(--table-row-height);
}

.table tbody tr {
  transition: background-color var(--transition-fast) var(--ease-in-out);
}

.table tbody tr:hover {
  background: var(--table-hover-bg);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

/* ============================================
   ALERTS - Toast & Alert Notifications
   ============================================ */

.alert {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  margin-bottom: var(--space-4);
}

.alert-success {
  background: var(--color-success-50);
  border-color: var(--color-success-200);
  color: var(--color-success-800);
}

.alert-warning {
  background: var(--color-warning-50);
  border-color: var(--color-warning-200);
  color: var(--color-warning-800);
}

.alert-danger {
  background: var(--color-danger-50);
  border-color: var(--color-danger-200);
  color: var(--color-danger-800);
}

.alert-info {
  background: var(--color-info-50);
  border-color: var(--color-info-200);
  color: var(--color-info-800);
}

/* ============================================
   LOADING STATES - Skeletons & Spinners
   ============================================ */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-neutral-200) 0%,
    var(--color-neutral-100) 50%,
    var(--color-neutral-200) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: var(--radius-base);
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text {
  height: 1em;
  margin-bottom: var(--space-2);
}

.skeleton-title {
  height: 1.5em;
  width: 60%;
  margin-bottom: var(--space-3);
}

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
}

/* Spinner */
.spinner {
  width: 1.5rem;
  height: 1.5rem;
  border: 3px solid var(--color-neutral-200);
  border-top-color: var(--color-primary-600);
  border-radius: 50%;
  animation: spinner-border 0.75s linear infinite;
}

.spinner-sm {
  width: 1rem;
  height: 1rem;
  border-width: 2px;
}

.spinner-lg {
  width: 3rem;
  height: 3rem;
  border-width: 4px;
}

/* Page Loading Overlay */
.page-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity var(--transition-base) var(--ease-in-out);
}

.page-loading-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

.page-loading-overlay.hidden {
  display: none;
}

.page-loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--color-neutral-200);
  border-top-color: var(--color-primary-600);
  border-radius: 50%;
  animation: spinner-border 0.75s linear infinite;
}

.page-loading-text {
  margin-top: var(--space-4);
  font-size: var(--text-base);
  color: var(--text-secondary);
  font-weight: var(--font-medium);
}

/* Content Loading State - shows skeleton while content loads */
.content-loading {
  position: relative;
  min-height: 200px;
}

.content-loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.content-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-neutral-200);
  border-top-color: var(--color-primary-600);
  border-radius: 50%;
  animation: spinner-border 0.75s linear infinite;
  z-index: 11;
}

.content-loading.loaded::before,
.content-loading.loaded::after {
  display: none;
}

/* DataTable specific loading state */
.dataTables_wrapper.loading .dataTables_processing {
  display: block !important;
}

/* Card loading skeleton */
.card-skeleton {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  border: var(--border-width-thin) solid var(--border-light);
  padding: var(--space-6);
}

.card-skeleton .skeleton-chart {
  height: 200px;
  background: linear-gradient(
    90deg,
    var(--color-neutral-100) 0%,
    var(--color-neutral-50) 50%,
    var(--color-neutral-100) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

/* Table row skeleton */
.table-skeleton tr td {
  padding: var(--space-4);
}

.table-skeleton .skeleton-cell {
  height: 20px;
  background: linear-gradient(
    90deg,
    var(--color-neutral-100) 0%,
    var(--color-neutral-50) 50%,
    var(--color-neutral-100) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

/* ============================================
   EMPTY STATES - Helpful empty content states
   ============================================ */

.empty-state {
  text-align: center;
  padding: var(--space-16) var(--space-8);
  background: var(--bg-secondary);
  border-radius: var(--radius-xl);
  border: 2px dashed var(--border-medium);
}

.empty-state-compact {
  padding: var(--space-10) var(--space-6);
}

.empty-state-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary-100), var(--color-primary-50));
  border-radius: var(--radius-full);
  color: var(--color-primary-600);
  font-size: 36px;
}

.empty-state-icon i,
.empty-state-icon .material-symbols-outlined,
.empty-state-icon .material-symbols-rounded {
  font-size: 36px;
}

.empty-state-icon-warning {
  background: linear-gradient(135deg, var(--color-warning-100), var(--color-warning-50));
  color: var(--color-warning-600);
}

.empty-state-icon-success {
  background: linear-gradient(135deg, var(--color-success-100), var(--color-success-50));
  color: var(--color-success-600);
}

.empty-state-icon-info {
  background: linear-gradient(135deg, var(--color-info-100), var(--color-info-50));
  color: var(--color-info-600);
}

.empty-state-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.empty-state-description {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
  max-width: 450px;
  margin-left: auto;
  margin-right: auto;
  line-height: var(--leading-relaxed);
}

/* Empty State Actions - CTA buttons */
.empty-state-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.empty-state-actions .btn {
  min-width: 150px;
}

/* Empty State with illustration */
.empty-state-illustration {
  width: 200px;
  height: 160px;
  margin: 0 auto var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
}

.empty-state-illustration img,
.empty-state-illustration svg {
  max-width: 100%;
  max-height: 100%;
}

/* Empty State Quick Tips */
.empty-state-tips {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-light);
}

.empty-state-tips-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-4);
}

.empty-state-tips-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: left;
  max-width: 400px;
  margin: 0 auto;
}

.empty-state-tips-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.empty-state-tips-item i {
  color: var(--color-primary-500);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Table Empty State - For use inside tables */
.table-empty-state {
  padding: var(--space-12) var(--space-8);
  background: transparent;
  border: none;
}

/* Card Empty State - For use inside cards */
.card-empty-state {
  padding: var(--space-10) var(--space-6);
  background: transparent;
  border: none;
}

/* Search No Results State */
.no-results-state {
  padding: var(--space-12) var(--space-8);
  text-align: center;
}

.no-results-state-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-neutral-100);
  border-radius: var(--radius-full);
  color: var(--text-tertiary);
  font-size: 28px;
}

.no-results-state-title {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.no-results-state-description {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

.no-results-state-suggestion {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.no-results-state-suggestion a {
  color: var(--color-primary-600);
  text-decoration: none;
}

.no-results-state-suggestion a:hover {
  text-decoration: underline;
}

/* ============================================
   BREADCRUMBS - Improved Navigation
   ============================================ */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  margin-bottom: var(--space-6);
  background: transparent;
  font-size: var(--text-sm);
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
}

.breadcrumb-item a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast) var(--ease-in-out);
}

.breadcrumb-item a:hover {
  color: var(--color-primary-600);
}

.breadcrumb-item.active {
  color: var(--text-primary);
  font-weight: var(--font-medium);
}

.breadcrumb-item + .breadcrumb-item::before {
  content: '/';
  color: var(--text-tertiary);
  margin-right: var(--space-2);
}

/* ============================================
   UTILITIES - Helper Classes
   ============================================ */

/* Visibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary-600);
  color: white;
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
  z-index: var(--z-tooltip);
}

.skip-link:focus {
  top: 0;
}

/* Text truncation */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Transitions */
.transition-all {
  transition: all var(--transition-base) var(--ease-in-out);
}

.transition-fast {
  transition: all var(--transition-fast) var(--ease-in-out);
}

/* ==========================================================================
   Bootstrap 5.3 "subtle" / "emphasis" utility back-port
   --------------------------------------------------------------------------
   base/base.html loads Bootstrap 5.1.3, which has no `bg-*-subtle`,
   `text-*-emphasis` or `border-*-subtle` utilities — but 55 templates across
   the app use them (badges, chips, callouts, status pills). In 5.1.3 they
   match nothing, so those elements render as transparent boxes with default
   text: the Manager Logbook "This note is about…" chip and the Assets
   galleries "Shared" badge both showed as empty white rectangles.

   Rather than rewrite 55 templates, the classes are defined here once with
   Bootstrap 5.3's own colour values so existing markup renders as its author
   intended. Upgrading the app to Bootstrap 5.3 is the cleaner long-term fix
   (these rules can then be deleted wholesale) — that belongs with the
   rebuild, not with a UI defect fix.

   `!important` matches Bootstrap's own utility output, so these behave
   exactly like the real 5.3 utilities when placed on components that set
   their own colours (.badge, .alert, .list-group-item, .card).
   ========================================================================== */

:root {
  --bs-primary-bg-subtle: #cfe2ff;
  --bs-secondary-bg-subtle: #e2e3e5;
  --bs-success-bg-subtle: #d1e7dd;
  --bs-info-bg-subtle: #cff4fc;
  --bs-warning-bg-subtle: #fff3cd;
  --bs-danger-bg-subtle: #f8d7da;
  --bs-light-bg-subtle: #fcfcfd;
  --bs-dark-bg-subtle: #ced4da;

  --bs-primary-border-subtle: #9ec5fe;
  --bs-secondary-border-subtle: #c4c8cb;
  --bs-success-border-subtle: #a3cfbb;
  --bs-info-border-subtle: #9eeaf9;
  --bs-warning-border-subtle: #ffe69c;
  --bs-danger-border-subtle: #f1aeb5;
  --bs-light-border-subtle: #e9ecef;
  --bs-dark-border-subtle: #adb5bd;

  --bs-primary-text-emphasis: #052c65;
  --bs-secondary-text-emphasis: #2b2f32;
  --bs-success-text-emphasis: #0a3622;
  --bs-info-text-emphasis: #055160;
  --bs-warning-text-emphasis: #664d03;
  --bs-danger-text-emphasis: #58151c;
  --bs-light-text-emphasis: #495057;
  --bs-dark-text-emphasis: #495057;
}

/* Background utilities */
.bg-primary-subtle   { background-color: var(--bs-primary-bg-subtle) !important; }
.bg-secondary-subtle { background-color: var(--bs-secondary-bg-subtle) !important; }
.bg-success-subtle   { background-color: var(--bs-success-bg-subtle) !important; }
.bg-info-subtle      { background-color: var(--bs-info-bg-subtle) !important; }
.bg-warning-subtle   { background-color: var(--bs-warning-bg-subtle) !important; }
.bg-danger-subtle    { background-color: var(--bs-danger-bg-subtle) !important; }
.bg-light-subtle     { background-color: var(--bs-light-bg-subtle) !important; }
.bg-dark-subtle      { background-color: var(--bs-dark-bg-subtle) !important; }

/* Text utilities */
.text-primary-emphasis   { color: var(--bs-primary-text-emphasis) !important; }
.text-secondary-emphasis { color: var(--bs-secondary-text-emphasis) !important; }
.text-success-emphasis   { color: var(--bs-success-text-emphasis) !important; }
.text-info-emphasis      { color: var(--bs-info-text-emphasis) !important; }
.text-warning-emphasis   { color: var(--bs-warning-text-emphasis) !important; }
.text-danger-emphasis    { color: var(--bs-danger-text-emphasis) !important; }
.text-light-emphasis     { color: var(--bs-light-text-emphasis) !important; }
.text-dark-emphasis      { color: var(--bs-dark-text-emphasis) !important; }

/* Border utilities */
.border-primary-subtle   { border-color: var(--bs-primary-border-subtle) !important; }
.border-secondary-subtle { border-color: var(--bs-secondary-border-subtle) !important; }
.border-success-subtle   { border-color: var(--bs-success-border-subtle) !important; }
.border-info-subtle      { border-color: var(--bs-info-border-subtle) !important; }
.border-warning-subtle   { border-color: var(--bs-warning-border-subtle) !important; }
.border-danger-subtle    { border-color: var(--bs-danger-border-subtle) !important; }
.border-light-subtle     { border-color: var(--bs-light-border-subtle) !important; }
.border-dark-subtle      { border-color: var(--bs-dark-border-subtle) !important; }

/* Link utilities (5.3 `link-*-emphasis`) — same emphasis colours, used by
   anchors that carry the subtle background chips. */
.link-primary-emphasis   { color: var(--bs-primary-text-emphasis) !important; }
.link-secondary-emphasis { color: var(--bs-secondary-text-emphasis) !important; }
.link-success-emphasis   { color: var(--bs-success-text-emphasis) !important; }
.link-info-emphasis      { color: var(--bs-info-text-emphasis) !important; }
.link-warning-emphasis   { color: var(--bs-warning-text-emphasis) !important; }
.link-danger-emphasis    { color: var(--bs-danger-text-emphasis) !important; }

/* ── Scrollable modals whose <form> wraps header/body/footer ──────────────
 *
 * Bootstrap's `.modal-dialog-scrollable` only makes `.modal-body` scroll
 * when the header, body and footer are DIRECT children of `.modal-content`:
 * that element is the flex column, and the body is the flex item that
 * shrinks and scrolls.
 *
 * A `<form>` wrapper — which every modal that submits as one form needs —
 * breaks that chain. The form becomes the single flex item, defaults to
 * `min-height: auto` so it refuses to shrink, and grows to its full content
 * height. `.modal-body` then has no constrained height, so `overflow-y:auto`
 * never engages, and `.modal-content`'s `overflow: hidden` silently CLIPS
 * everything past the fold — including the footer. The save button is not
 * merely awkward to reach: it cannot be reached or clicked at all.
 *
 * Measured on the keys Edit-key modal before this fix: content box 902px,
 * form 2651px, footer at y≈2559 — ~1750px outside the visible box.
 *
 * Restoring the flex chain through the form fixes every such modal at once
 * (found in 12 templates across keys, sensors, HR, labels, utilities, risk
 * assessments, compliance registers and safety settings). Short modals are
 * unaffected: a flex column that fits its container lays out identically.
 */
.modal-dialog-scrollable .modal-content > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
}

.modal-dialog-scrollable .modal-content > form > .modal-body {
  overflow-y: auto;
  min-height: 0;
}