/* ===== PROPERTY LOOKUP PAGE ===== */
/* Ported from SvelteKit: underwritewise-fe/src/routes/workflow/[slug]/property-lookup/+page.svelte */

.property-lookup {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-4);
}

.property-lookup__section {
  margin-bottom: var(--space-6);
}

.property-lookup__section:last-child {
  margin-bottom: 0;
}

.property-lookup__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
  margin: 0 0 var(--space-4) 0;
}

.property-lookup__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}

/* ===== Property Overview Grid ===== */
.property-lookup__overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-4);
}

.property-lookup__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.property-lookup__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
}

.property-lookup__value {
  font-size: var(--font-size-sm);
  color: var(--color-gray-900);
  margin: 0;
  font-weight: var(--font-weight-medium);
}

/* ===== Notice Banner ===== */
.property-lookup__notice {
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.property-lookup__notice-icon {
  flex-shrink: 0;
  color: var(--color-primary-500);
}

.property-lookup__notice-content {
  flex: 1;
  font-size: var(--font-size-sm);
  color: var(--color-primary-700);
}

.property-lookup__notice-text {
  margin: var(--space-2) 0 0;
  color: var(--color-primary-800);
}

/* ===== Units Summary ===== */
.property-lookup__units-summary {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--font-size-sm);
}

.property-lookup__units-count {
  color: var(--color-gray-700);
}

.property-lookup__units-total {
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-800);
}

.property-lookup__units-limits {
  color: var(--color-gray-600);
}

/* ===== Units Grid Table ===== */
.units {
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.units__header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-gray-200);
}

.units__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
}

.units__required {
  color: var(--color-error-500);
  font-weight: var(--font-weight-semibold);
}

.units__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  align-items: center;
}

.units__remove-btn {
  padding: var(--space-2);
  background: none;
  border: 1px solid var(--color-error-600);
  border-radius: var(--radius-md);
  color: var(--color-error-600);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
}

.units__remove-btn:hover:not(:disabled) {
  background-color: var(--color-error-50);
}

.units__remove-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: var(--color-gray-300);
  color: var(--color-gray-400);
}

.units__add-btn {
  width: 100%;
  padding: var(--space-3);
  background-color: var(--color-gray-100);
  border: 2px dashed var(--color-gray-300);
  border-radius: var(--radius-md);
  color: var(--color-gray-700);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-base);
  margin-top: var(--space-2);
}

.units__add-btn:hover:not(:disabled) {
  background-color: var(--color-gray-200);
  border-color: var(--color-gray-400);
}

.units__add-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.units__error {
  font-size: var(--font-size-xs);
  color: var(--color-error-600);
  margin-top: var(--space-1);
  display: block;
}

/* ===== Form Grid ===== */
.property-lookup__form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-4);
}

/* ===== Form Input Variants ===== */
.form-input--sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
}

.form-input--center {
  text-align: center;
}

/* ===== Checkbox ===== */
.form-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  cursor: pointer;
  margin-top: var(--space-3);
}

.form-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary-600);
  cursor: pointer;
}

.form-checkbox-label:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== Building Class Tooltip ===== */
.tooltip-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: help;
}

.tooltip-trigger .tooltip-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-tooltip);
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: var(--color-gray-900);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 420px;
  white-space: normal;
}

.tooltip-trigger:hover .tooltip-content,
.tooltip-trigger:focus-within .tooltip-content {
  display: block;
}

.building-class-tooltip__title {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
  margin-bottom: var(--space-2);
  color: var(--color-white);
}

.building-class-tooltip__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-xs);
}

.building-class-tooltip__table th,
.building-class-tooltip__table td {
  padding: var(--space-1) var(--space-2);
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.building-class-tooltip__table th {
  font-weight: var(--font-weight-semibold);
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

.building-class-tooltip__table tbody tr:last-child td {
  border-bottom: none;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .property-lookup__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .property-lookup__units-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  .property-lookup__notice {
    flex-direction: column;
    gap: var(--space-2);
  }

  .units__header,
  .units__row {
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: var(--space-2);
  }

  .units__label {
    font-size: var(--font-size-xs);
  }

  .tooltip-trigger .tooltip-content {
    min-width: 280px;
    left: 0;
    transform: none;
  }
}