/*!
 * sbomify UI Components
 * Forms, tables, and other UI elements
 * Note: Button styles are in tailwind.src.css (tw-btn-* classes)
 */

/* ===== COMPONENT CSS VARIABLES ===== */
/* Dark mode (default) */
:root {
  --component-surface: rgb(var(--color-surface));
  --component-surface-hover: rgb(var(--color-surface-hover));
  --component-bg: rgb(var(--color-background));
  --component-text: rgb(var(--color-text));
  --component-text-muted: rgb(var(--color-text-muted));
  --component-border: rgb(var(--color-border));
  --component-table-header-bg: rgb(var(--color-surface-elevated));
  --component-table-row-hover: rgb(var(--color-surface-hover));
  --component-empty-state-bg: rgb(var(--color-surface));
}

/* Light mode overrides */
:root.light {
  --component-surface: #ffffff;
  --component-surface-hover: #f8f9fa;
  --component-bg: #f8f9fa;
  --component-text: #495057;
  --component-text-muted: #6c757d;
  --component-border: #e9ecef;
  --component-table-header-bg: #f8f9fa;
  --component-table-row-hover: #f8f9fa;
  --component-empty-state-bg: #f8f9fa;
}

/* ===== ENHANCED FORM COMPONENTS ===== */
.form-control,
.form-select {
  padding: 0.75rem 1rem;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--component-text);
  background-color: var(--component-surface);
  border: 2px solid var(--component-border);
  border-radius: var(--radius-md);
  transition: all var(--transition-normal);
  min-height: 44px;
  /* Touch target minimum */
}

.form-control:focus,
.form-select:focus {
  border-color: var(--brand-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 125, 221, 0.15);
  transform: translateY(-1px);
}

/* Enhanced mobile form styling */
@media (max-width: 768px) {

  .form-control,
  .form-select {
    font-size: 16px;
    /* Prevent iOS zoom */
    padding: 1rem;
    border-radius: 0.5rem;
  }

  .form-label {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
  }

  /* Stack form groups vertically with proper spacing */
  .form-group {
    margin-bottom: 1.5rem;
  }

  .input-group {
    flex-direction: column;
    gap: 0.5rem;
  }

  .input-group .btn {
    border-radius: 0.5rem;
  }
}

.form-control.is-invalid {
  border-color: var(--brand-danger);
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-invalid:focus {
  border-color: var(--brand-danger);
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* ===== ENHANCED TABLE SYSTEM ===== */
.table {
  width: 100%;
  margin-bottom: 0;
  color: var(--component-text);
}

.table th,
.table td {
  padding: 1rem 0.75rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--component-border);
}

/* Mobile table improvements */
@media (max-width: 768px) {
  .table-responsive {
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
  }

  .table th,
  .table td {
    padding: 0.75rem 0.5rem;
    font-size: 0.875rem;
  }

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

  /* Stack table actions vertically on mobile */
  .table .actions {
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
  }

  .table .actions .btn {
    font-size: 0.75rem;
    padding: 0.5rem;
    min-height: 36px;
  }
}

.table thead th {
  background: var(--component-table-header-bg);
  text-transform: uppercase;
  color: var(--component-text-muted);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  border-bottom: 1px solid var(--component-border);
}

.table tbody tr {
  transition: all var(--transition-normal);
}

.table tbody tr:hover {
  background-color: var(--component-table-row-hover);
}

.table tbody td {
  color: var(--component-text);
}

.data-table th,
.data-table td {
  padding: 1rem;
}

.data-table th {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
}

.data-table .actions-header {
  width: 1%;
  min-width: 300px;
}

.data-table .actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}

.data-table .actions .separator {
  border-left: 1px solid var(--component-border);
  height: 1rem;
}

/* ===== MESSAGES ===== */
.messages-container {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: var(--z-modal);
  max-width: 350px;
  pointer-events: none;
}

/* ===== HTMX LOADING STATES ===== */
.htmx-indicator {
  display: none;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline-flex;
  opacity: 1;
  align-items: center;
}

/* Disable interaction on elements during request */
.htmx-request,
.htmx-request * {
  pointer-events: none !important;
  cursor: wait !important;
}

button.htmx-request,
a.btn.htmx-request {
  opacity: 0.7;
  pointer-events: none;
}

.htmx-indicator-block {
  display: none;
  justify-content: center;
  padding: var(--spacing-lg);
}

.htmx-request .htmx-indicator-block {
  display: flex;
}

/* Disable buttons during HTMX requests */
.htmx-request button[type="submit"],
button[type="submit"].htmx-request {
  pointer-events: none;
  opacity: 0.7;
}

/* Loading overlay for sections */
.htmx-loading-overlay {
  position: relative;
}

.htmx-loading-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(255 255 255 / 0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.htmx-loading-overlay.htmx-request::after {
  display: flex;
}

/* ===== EMPTY STATE COMPONENT ===== */
.empty-state {
  text-align: center;
  padding: var(--spacing-2xl) var(--spacing-lg);
  color: var(--component-text-muted);
  background: var(--component-empty-state-bg);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--component-border);
}

.empty-state .empty-icon {
  color: var(--component-text-muted);
}

.empty-state .empty-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-title);
  margin-bottom: var(--spacing-sm);
}

.empty-state .empty-description {
  font-size: var(--font-size-base);
  color: var(--text-muted);
  line-height: var(--line-height-relaxed);
}

.empty-state .btn {
  margin-top: var(--spacing-md);
}

/* Compact empty state variant */
.empty-state-compact {
  padding: var(--spacing-lg) var(--spacing-md);
}

.empty-state-compact .empty-icon i {
  font-size: 2rem;
}

/* ===== COMPACT COMPLIANCE ICONS ===== */
/* Small circular icons for table rows and compact displays */
.compliance-icons {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
  align-items: center;
}

.compliance-icon {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.7rem;
  cursor: help;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.compliance-icon:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
}

/* Category-specific colors matching existing badge styles */
.compliance-icon--compliance {
  background: rgba(var(--brand-success-rgb), 0.15);
  color: #059669;
}

.compliance-icon--attestation {
  background: rgba(59, 130, 246, 0.15);
  color: #2563eb;
}

.compliance-icon--security {
  background: rgba(139, 92, 246, 0.15);
  color: #7c3aed;
}

.compliance-icon--license {
  background: rgba(236, 72, 153, 0.15);
  color: #db2777;
}

/* Empty state for compliance column */
.compliance-empty {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}