/**
 * Carzuri Finance Applications Styles
 * Uses Core Design System variables and explicit SVG size rules.
 */

/* Explicit SVG Icon Sizing to fix collapse to 0x0 bug */
.carzuri-finance-wrapper svg,
.carzuri-icon {
  width: 1.25rem !important;
  height: 1.25rem !important;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.carzuri-icon-sm {
  width: 1rem !important;
  height: 1rem !important;
}

.carzuri-icon-lg {
  width: 1.75rem !important;
  height: 1.75rem !important;
}

/* Card & Containers */
.carzuri-finance-wrapper {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--carzuri-text, #0f172a);
  background-color: var(--carzuri-card-bg, #ffffff);
  border: 1px solid var(--carzuri-border, #e2e8f0);
  border-radius: var(--carzuri-radius, 12px);
  padding: 1.5rem;
  box-shadow: var(--carzuri-shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.05));
  margin-bottom: 2rem;
  box-sizing: border-box;
}

.carzuri-card-header {
  border-bottom: 1px solid var(--carzuri-border, #e2e8f0);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

.carzuri-card-title-group h2 {
  margin: 0.5rem 0 0.25rem 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--carzuri-text, #0f172a);
}

.carzuri-text-muted {
  color: var(--carzuri-text-muted, #64748b);
  font-size: 0.875rem;
  margin: 0;
}

.carzuri-flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Badges */
.carzuri-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.carzuri-badge-primary {
  /* FIX: this previously relied on var(--carzuri-primary-light, #eff6ff)
     for the background and var(--carzuri-primary, #1d4ed8) for the text.
     Those two custom properties are being overridden elsewhere on this
     site to values close enough to each other that the badge text became
     nearly unreadable against its own background — the same category of
     "trust the CSS variable, get burned" bug already hit multiple times
     on this project (header/footer gold, AI Chatbot, AI Smart Valuation).
     Hardcoded directly here instead, using the site's real navy/gold
     brand palette so it's both consistent with the rest of the site and
     immune to whatever is clashing elsewhere. */
  background-color: #d4af37 !important;
  color: #0b192c !important;
}

.carzuri-badge-secondary {
  background-color: #f1f5f9;
  color: #475569;
}

.carzuri-badge-admin {
  background-color: var(--carzuri-admin-bg, #faf5ff);
  color: var(--carzuri-admin, #6b21a8);
}

/* Status Badges */
.carzuri-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
}

.carzuri-status-submitted {
  background-color: var(--carzuri-info-bg, #f0f9ff);
  color: var(--carzuri-info, #0369a1);
}

.carzuri-status-under_review {
  background-color: var(--carzuri-warning-bg, #fffbeb);
  color: var(--carzuri-warning, #b45309);
}

.carzuri-status-approved {
  background-color: var(--carzuri-success-bg, #f0fdf4);
  color: var(--carzuri-success, #15803d);
}

.carzuri-status-declined {
  background-color: var(--carzuri-danger-bg, #fef2f2);
  color: var(--carzuri-danger, #b91c1c);
}

/* Form Layout & Inputs */
.carzuri-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.carzuri-grid {
  display: grid;
  gap: 1rem;
}

.carzuri-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.carzuri-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 768px) {
  .carzuri-grid-2,
  .carzuri-grid-3 {
    grid-template-columns: 1fr;
  }
}

.carzuri-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.carzuri-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--carzuri-text, #0f172a);
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.carzuri-input,
.carzuri-select,
.carzuri-file-input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--carzuri-border, #e2e8f0);
  border-radius: 8px;
  background-color: #ffffff;
  color: var(--carzuri-text, #0f172a);
  font-size: 0.875rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}

.carzuri-input:focus,
.carzuri-select:focus {
  outline: none;
  border-color: var(--carzuri-primary, #1d4ed8);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

.carzuri-file-input {
  padding: 0.5rem;
  cursor: pointer;
  background-color: var(--carzuri-bg, #f8fafc);
}

.carzuri-section-divider {
  border-top: 1px dashed var(--carzuri-border, #e2e8f0);
  padding-top: 1rem;
  margin-top: 0.5rem;
}

.carzuri-heading-sm {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
}

/* Buttons */
.carzuri-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.carzuri-btn-primary {
  background-color: var(--carzuri-primary, #1d4ed8);
  color: #ffffff;
}

.carzuri-btn-primary:hover {
  background-color: var(--carzuri-primary-hover, #1e40af);
}

.carzuri-btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
}

/* Alerts */
.carzuri-alert {
  padding: 0.875rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.carzuri-alert-info {
  background-color: var(--carzuri-info-bg, #f0f9ff);
  border: 1px solid #bae6fd;
  color: var(--carzuri-info, #0369a1);
}

.carzuri-alert-warning {
  background-color: var(--carzuri-warning-bg, #fffbeb);
  border: 1px solid #fde68a;
  color: var(--carzuri-warning, #b45309);
}

.carzuri-alert-danger {
  background-color: var(--carzuri-danger-bg, #fef2f2);
  border: 1px solid #fecaca;
  color: var(--carzuri-danger, #b91c1c);
}

.carzuri-alert-success {
  background-color: var(--carzuri-success-bg, #f0fdf4);
  border: 1px solid #bbf7d0;
  color: var(--carzuri-success, #15803d);
}

/* Mobile-Responsive Table Container */
.carzuri-table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 1rem;
  border: 1px solid var(--carzuri-border, #e2e8f0);
  border-radius: var(--carzuri-radius, 8px);
}

.carzuri-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.875rem;
  min-width: 650px; /* Ensures table scrolls on narrow mobile devices without breaking design */
}

.carzuri-table th {
  background-color: var(--carzuri-bg, #f8fafc);
  color: var(--carzuri-text-muted, #64748b);
  font-weight: 600;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--carzuri-border, #e2e8f0);
  white-space: nowrap;
}

.carzuri-table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--carzuri-border, #e2e8f0);
  color: var(--carzuri-text, #0f172a);
  vertical-align: middle;
}

.carzuri-table tbody tr:hover {
  background-color: #f8fafc;
}

/* Spinner */
.carzuri-spinner-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--carzuri-text-muted, #64748b);
  padding: 2rem;
}

.carzuri-spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--carzuri-border, #e2e8f0);
  border-top-color: var(--carzuri-primary, #1d4ed8);
  border-radius: 50%;
  animation: carzuri-spin 0.8s linear infinite;
}

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