/* styles.css — Clearity Agent Portal
   Small set of hand-written styles to complement Tailwind utility classes,
   which are compiled ahead of time into css/tailwind.built.css by the
   `npm run build-css` script rather than loaded from cdn.tailwindcss.com.
   Kept intentionally minimal — most layout and colour work happens with
   Tailwind classes directly in the HTML/JS.

   Deliberately the same class names as the customer portal (.clearity-input,
   .clearity-field-error, .clearity-dropzone) so anything you have already
   learned about styling one portal applies to the other.
*/

:root {
  /* The agent portal uses a single fixed accent, unlike the customer portal,
     which re-tints per signed-in client (blue for sellers, green for buyers).
     An agent works with both kinds of client at once, so a colour that
     changed per row would carry no meaning. Slate/ink with the Clearity blue
     as the action colour keeps it visibly a sibling of the customer portal
     without pretending to be the same product. */
  --clearity-accent: #1d6af2;
  --clearity-ink: #09090b;
  --clearity-muted: #919b9b;

  /* Lead pipeline status colours. Defined once here so leads.js and admin.js
     cannot drift apart on what "qualified" looks like. */
  --clearity-status-new: #64748b;
  --clearity-status-contacted: #0ea5e9;
  --clearity-status-qualified: #8b5cf6;
  --clearity-status-converted: #10b981;
  --clearity-status-lost: #94a3b8;
}

/* Heading font — matches the customer portal so the two feel related. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,600;1,700&display=swap');

.clearity-heading {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* Functional fallback in case css/tailwind.built.css fails to load. Every
   show/hide path in this portal works by toggling this class, so it must
   work even with no Tailwind CSS present — otherwise a failed stylesheet
   would reveal guarded screens rather than merely making them ugly. That is
   a security consideration here, not only a cosmetic one. Tailwind's own
   identical rule simply overrides this harmlessly once loaded. */
.hidden {
  display: none;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background-color: #f8fafc;
}

/* Shared input styling used by every form in this portal */
.clearity-input {
  display: block;
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.875rem;
  color: #1e293b;
  background-color: #ffffff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.clearity-input:focus {
  outline: none;
  border-color: var(--clearity-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--clearity-accent) 15%, transparent);
}

/* Inline field validation — styled messaging that replaces relying on the
   browser's native required-field popups. */
.clearity-field-error {
  color: #e11d48;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}
.clearity-input-error {
  border-color: #e11d48 !important;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.12);
}

/* Compliance document dropzone */
.clearity-dropzone {
  border: 2px dashed #cbd5e1;
  border-radius: 0.75rem;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.clearity-dropzone.drag-over {
  border-color: var(--clearity-accent);
  background-color: color-mix(in srgb, var(--clearity-accent) 6%, transparent);
}

/* Metric tiles (dashboard) and pipeline columns (leads).

   CSS Grid with a deliberate, fixed column count rather than flexbox wrapping.
   Flexbox's `flex:1` items stretch to fill each row's OWN available space
   independently, so a shorter final row's items end up wider than the row
   above and do not line up under it. Grid shares one set of column tracks
   across every row, so a partial last row still aligns cleanly.

   The column count is a CSS custom property rather than a Tailwind utility
   because Tailwind's compiler only includes classes it can find as literal
   text in the source — a runtime-built name like 'grid-cols-' + n would
   silently produce no CSS at all. */
.clearity-metric-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 640px) {
  .clearity-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .clearity-metric-grid {
    grid-template-columns: repeat(var(--clearity-metric-cols, 4), minmax(0, 1fr));
  }
}

/* The lead pipeline board. Five status columns will not fit legibly below
   1024px, so below that breakpoint the board becomes a single stacked column
   with each status as a labelled section — a horizontal scroll on a phone
   would hide statuses off-screen with no indication they exist. */
.clearity-pipeline-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 1024px) {
  .clearity-pipeline-grid {
    grid-template-columns: repeat(var(--clearity-pipeline-cols, 5), minmax(0, 1fr));
    align-items: start;
  }
}
.clearity-pipeline-col {
  min-width: 0; /* lets grid items shrink below their content's natural width instead of overflowing */
}

/* Simple fade-in for panels rendered by JS */
.clearity-fade-in {
  animation: clearityFadeIn 0.25s ease;
}
@keyframes clearityFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}