/* =====================================================
   PHASE K.E — CLIENT PORTAL
   Reuses .client-* tokens from styles.css for consistency.
   These rules add the portal-specific surfaces:
     - portal-dropzone (upload area)
     - portal-queue (in-flight uploads)
     - portal-properties (submitted properties list)
     - portal-toast (non-blocking error/success messages)
   ===================================================== */

.portal-card {
  /* Slightly wider than the doc-upload card — the property list rows
     have more horizontal content (thumb + address + status). */
  max-width: 640px;
}

/* ── DROPZONE ─────────────────────────────────────── */

.portal-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.75rem 1rem;
  margin-bottom: 1.25rem;
  background: var(--bg-2);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.portal-dropzone:hover { border-color: var(--accent-strong); }
.portal-dropzone.is-drag-over {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: scale(1.005);
}

.portal-dropzone-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--avatar-text);
  font-size: 1.5rem; font-weight: 600;
  margin-bottom: 0.25rem;
}
.portal-dropzone-title {
  font-size: 1rem; font-weight: 600;
  color: var(--text-primary);
}
.portal-dropzone-hint {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.portal-dropzone-warn {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.32);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  color: var(--st-amber);
  font-weight: 500;
  line-height: 1.35;
  max-width: 380px;
}
.portal-dropzone input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

/* ── UPLOAD QUEUE ─────────────────────────────────── */

.portal-queue {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem 0;
  display: flex; flex-direction: column;
  gap: 0.5rem;
}
.portal-queue-item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 0.875rem;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  animation: portal-fade-in .25s ease;
}
.portal-queue-item.is-error { border-color: rgba(239, 68, 68, 0.4); background: var(--danger-soft); }
.portal-queue-item.is-added,
.portal-queue-item.is-duplicate {
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.05);
}

.portal-queue-thumb {
  width: 44px; height: 44px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-3);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.portal-queue-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.portal-queue-thumb-placeholder { font-size: 1.25rem; opacity: 0.6; }

.portal-queue-body {
  flex: 1;
  min-width: 0;
  display: flex; flex-direction: column; gap: 0.125rem;
}
.portal-queue-title {
  font-size: 0.875rem; font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.portal-queue-status {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.portal-queue-action { flex-shrink: 0; display: flex; align-items: center; }
.portal-queue-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: var(--success);
  color: white;
  border-radius: 999px;
  font-size: 0.875rem; font-weight: 700;
}
.portal-queue-retry {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  cursor: pointer;
}
.portal-queue-retry:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── SECTION DIVIDER + TITLE ──────────────────────── */

.portal-section-divider {
  height: 1px;
  background: var(--border);
  margin: 1.25rem 0 1rem 0;
}
.portal-section-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* ── EMPTY STATE ──────────────────────────────────── */

.portal-empty {
  text-align: center;
  padding: 1.5rem 0;
  color: var(--text-secondary);
}
.portal-empty p { margin: 0.125rem 0; }

/* ── PROPERTIES LIST ──────────────────────────────── */

.portal-properties {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 0.625rem;
}
.portal-property {
  display: flex;
  gap: 0.875rem;
  padding: 0.75rem;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
  align-items: stretch;
}
.portal-property:hover { border-color: var(--border-strong); }
.portal-property.is-highlight {
  background: rgba(178, 34, 34, 0.08);
  border-color: var(--accent-strong);
  transform: translateX(2px);
}

.portal-property-thumb {
  width: 84px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-3);
  border-radius: var(--radius-sm);
  overflow: hidden;
  align-self: stretch;
  min-height: 76px;
}
.portal-property-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.portal-property-thumb-placeholder { font-size: 1.5rem; opacity: 0.4; }

.portal-property-body {
  flex: 1;
  min-width: 0;
  display: flex; flex-direction: column; gap: 0.25rem;
  justify-content: center;
}
.portal-property-address {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}
.portal-property-meta {
  display: flex; flex-wrap: wrap;
  gap: 0.625rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.portal-property-price { font-weight: 500; color: var(--text-primary); }
.portal-property-notes {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  font-style: italic;
}

.portal-property-status {
  flex-shrink: 0;
  display: flex; align-items: flex-start;
}
.portal-status-badge {
  display: inline-flex; align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  border: 1px solid var(--border);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}
.portal-status-badge.portal-status-inquired {
  background: rgba(59, 130, 246, 0.10);
  border-color: rgba(59, 130, 246, 0.3);
  color: var(--st-blue);
}
.portal-status-badge.portal-status-outreach_sent,
.portal-status-badge.portal-status-showing_set,
.portal-status-badge.portal-status-submitted {
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.3);
  color: var(--st-amber);
}
.portal-status-badge.portal-status-approved {
  background: rgba(16, 185, 129, 0.10);
  border-color: rgba(16, 185, 129, 0.35);
  color: var(--st-green2);
}
.portal-status-badge.portal-status-denied,
.portal-status-badge.portal-status-withdrawn {
  background: var(--danger-soft);
  border-color: rgba(239, 68, 68, 0.3);
  color: var(--danger);
}

/* ── TOASTS ───────────────────────────────────────── */

.portal-toasts {
  position: fixed;
  bottom: 1rem; left: 1rem; right: 1rem;
  display: flex; flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
  z-index: 100;
}
.portal-toast {
  pointer-events: auto;
  padding: 0.75rem 1rem;
  background: var(--bg-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: 0.875rem;
  color: var(--text-primary);
  animation: portal-fade-in .25s ease;
  max-width: 480px;
  margin: 0 auto;
  width: calc(100% - 0px);
}
.portal-toast-success { border-color: rgba(16, 185, 129, 0.4); }
.portal-toast-error   { border-color: rgba(239, 68, 68, 0.5); background: var(--danger-soft); }
.portal-toast-info    { border-color: var(--border-strong); }

@keyframes portal-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── MOBILE TIGHTENING ────────────────────────────── */

@media (max-width: 480px) {
  .portal-card { padding: 1.5rem 1.125rem; }
  .portal-dropzone { padding: 1.5rem 0.75rem; }
  .portal-property {
    padding: 0.625rem;
    gap: 0.625rem;
  }
  .portal-property-thumb { width: 68px; min-height: 68px; }
  .portal-property-address { font-size: 0.875rem; }
  .portal-property-meta { font-size: 0.75rem; gap: 0.5rem; }
  .portal-status-badge { font-size: 0.6875rem; padding: 0.125rem 0.4375rem; }
  .portal-section-title { font-size: 0.875rem; }
}