/**
 * Reusable Component Styles for TerraSentri Site
 * Shared UI components used across multiple sections
 * 
 * This file contains styling for reusable components like buttons,
 * cards, badges, and other UI elements that appear in multiple places.
 */


/* ============================================
   BUTTONS
   ============================================ */

/**
 * Base button styles
 * Shared styles for all button variants
 */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  /* Sizing */
  padding: var(--button-padding-y, 1rem) var(--button-padding-x, 2rem);
  min-height: 48px;
  
  /* Typography */
  font-family: var(--font-family-base, sans-serif);
  font-size: var(--font-size-base, 1rem);
  font-weight: var(--font-weight-semibold, 600);
  text-decoration: none;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
  
  /* Border and radius */
  border: none;
  border-radius: var(--button-border-radius, 0.5rem);
  
  /* Transitions */
  transition: var(--transition-colors), var(--transition-transform);
  
  /* Cursor */
  cursor: pointer;
  
  /* Prevent text selection */
  user-select: none;
  -webkit-user-select: none;
}

/**
 * Primary button variant
 */
.button-primary {
  background-color: var(--color-primary);
  color: #0d0d0d;
  box-shadow: var(--shadow-sm, 0 1px 3px 0 rgba(0, 0, 0, 0.1));
}

.button-primary:hover {
  filter: brightness(0.9);
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
  transform: translateY(-1px);
}

.button-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm, 0 1px 3px 0 rgba(0, 0, 0, 0.1));
}



/**
 * Button focus state
 */
.button:focus {
  outline: none;
}

.button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/**
 * Button sizes
 */
.button-sm {
  padding: var(--spacing-sm, 0.5rem) var(--spacing-lg, 1.5rem);
  min-height: 40px;
  font-size: var(--font-size-sm, 0.875rem);
}

.button-lg {
  padding: var(--spacing-lg, 1.5rem) var(--spacing-2xl, 3rem);
  min-height: 56px;
  font-size: var(--font-size-lg, 1.125rem);
}


/* ============================================
   CARDS
   ============================================ */

/**
 * Base card component
 */
.card {
  display: flex;
  flex-direction: column;
  padding: var(--card-padding, 2rem);
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--card-border-radius, 1rem);
  box-shadow: var(--card-shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
  transition: var(--transition-all);
}

/**
 * Card hover effect
 */
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
}

/**
 * Card header
 */
.card-header {
  margin-bottom: var(--spacing-lg, 1.5rem);
}

/**
 * Card title
 */
.card-title {
  font-family: var(--font-family-heading, 'Inter', sans-serif);
  font-size: var(--font-size-xl, 1.25rem);
  font-weight: var(--font-weight-semibold, 600);
  line-height: var(--line-height-snug, 1.375);
  color: var(--color-text-primary);
  margin: 0;
}

/**
 * Card body
 */
.card-body {
  flex: 1;
}

/**
 * Card footer
 */
.card-footer {
  margin-top: var(--spacing-lg, 1.5rem);
  padding-top: var(--spacing-lg, 1.5rem);
  border-top: 1px solid var(--color-border, #e5e7eb);
}


/* ============================================
   BADGES
   ============================================ */

/**
 * Base badge component
 */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.5rem);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: 1;
  border-radius: var(--border-radius-full, 9999px);
  white-space: nowrap;
}

/**
 * Badge variants
 */
.badge-primary {
  color: var(--color-primary, #059669);
  background-color: rgba(5, 150, 105, 0.1);
}

.badge-secondary {
  color: var(--color-secondary, #10b981);
  background-color: rgba(16, 185, 129, 0.1);
}

.badge-accent {
  color: var(--color-accent, #f59e0b);
  background-color: rgba(245, 158, 11, 0.1);
}

.badge-success {
  color: var(--color-success, #10b981);
  background-color: rgba(16, 185, 129, 0.1);
}

.badge-warning {
  color: var(--color-warning, #f59e0b);
  background-color: rgba(245, 158, 11, 0.1);
}

.badge-error {
  color: var(--color-error, #ef4444);
  background-color: rgba(239, 68, 68, 0.1);
}


/* ============================================
   LINKS
   ============================================ */

/**
 * Base link styles
 */
.link {
  color: var(--color-primary, #059669);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: var(--transition-colors);
}

.link:hover {
  color: var(--color-primary-dark, #064e3b);
  text-decoration-color: currentColor;
}

.link:focus {
  outline: none;
}

.link:focus-visible {
  outline: var(--focus-ring-width, 3px) solid var(--color-primary, #059669);
  outline-offset: var(--focus-ring-offset, 2px);
  border-radius: var(--border-radius-sm, 0.25rem);
}


/* ============================================
   IMAGES
   ============================================ */

/**
 * Responsive image
 */
.img-responsive {
  max-width: 100%;
  height: auto;
  display: block;
}

/**
 * Rounded image
 */
.img-rounded {
  border-radius: var(--border-radius-md, 0.5rem);
}

/**
 * Circular image
 */
.img-circle {
  border-radius: var(--border-radius-full, 9999px);
}


/* ============================================
   DIVIDERS
   ============================================ */

/**
 * Horizontal divider
 */
.divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-border, #e5e7eb);
  border: none;
  margin: var(--spacing-xl, 2rem) 0;
}

.divider-thick {
  height: 2px;
}


/* ============================================
   LOADING STATES
   ============================================ */

/**
 * Skeleton loader
 */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-secondary, #f9fafb) 0%,
    var(--color-bg-tertiary, #f3f4f6) 50%,
    var(--color-bg-secondary, #f9fafb) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: var(--border-radius-md, 0.5rem);
}

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

/**
 * Spinner
 */
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--color-bg-secondary, #f9fafb);
  border-top-color: var(--color-primary, #059669);
  border-radius: var(--border-radius-full, 9999px);
  animation: spinner-rotate 0.8s linear infinite;
}

@keyframes spinner-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

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

.spinner-lg {
  width: 56px;
  height: 56px;
  border-width: 6px;
}


/* ============================================
   UTILITY COMPONENTS
   ============================================ */

/**
 * Visually hidden (accessible to screen readers)
 */
.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;
}

/**
 * Focus trap (for modals, dialogs)
 */
.focus-trap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-index-modal, 500);
}