/* FreshProspects Unified Theme (fp-theme.css)
   Usage: Include after Bulma and site.css
   <link rel="stylesheet" href="/css/bulma.min.css" />
   <link rel="stylesheet" href="/css/site.css" />
   <link rel="stylesheet" href="/css/fp-theme.css" />
*/

:root {
  /* Core palette */
  --fp-purple: #c59af0;
  --fp-purple-dark: #9f6bd8;
  --fp-purple-light: #e9d9fb;
  --fp-bg-accent: #b9e6f2;
  --fp-text-dark: #0f172a;
  --fp-border: #e5e7eb;
  --fp-hover-row: #eef2ff;
  --fp-table-zebra: #fbfdff;
  --fp-danger: #dc2626;
  --fp-success: #16a34a;
  --fp-font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --fp-btn-min-width: 160px; /* matches longest label */
}

html,
body {
  font-family: var(--fp-font-stack);
}
body.fp-theme {
  background-color: var(--fp-bg-accent);
}

/* Accessibility: ensure readable text across cards, tables and form labels
   Some pages/styles may apply very light colors or opacity; force a readable
   default for key UI elements while preserving designer palette. */
.fp-card,
.fp-card .content,
.page-filter,
.title,
.subtitle,
.label,
.box,
.fp-table,
.fp-table td,
.fp-table th,
.has-text-centered,
.catalog-form label,
.catalog-form .label {
  color: var(--fp-text-dark) !important;
  opacity: 1 !important;
}

/* Button system */
.button.fp-purple,
.button.fp-purple.is-light,
.fp-ghost,
.button.fp-back {
  /* base sizing */
  height: 38px;
  line-height: 1.1rem;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: var(--fp-btn-min-width);
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.button.fp-purple {
  background: var(--fp-purple);
  color: #fff;
  border: none;
}
.button.fp-purple.is-light {
  background: var(--fp-purple-light);
  color: #4b2d7f;
  border: 1px solid var(--fp-purple);
}
.button.fp-purple:hover {
  background: var(--fp-purple-dark);
  color: #fff;
}
.fp-ghost {
  background: #fff !important;
  border: 1px solid var(--fp-purple) !important;
  color: var(--fp-purple-dark) !important;
}
.fp-ghost:hover {
  background: var(--fp-purple-light) !important;
}
.button.fp-back {
  background: var(--fp-purple-light);
  color: #4b2d7f;
  border: 1px solid var(--fp-purple);
}
.button.fp-back:hover {
  background: var(--fp-purple);
  color: #fff;
}
.button[disabled],
.button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Table styling helpers */
.fp-table-container {
  background: #fff;
  border: 1px solid var(--fp-border);
  border-radius: 8px;
}
.fp-table {
  background: #fff !important;
  color: var(--fp-text-dark) !important;
}
.fp-table td,
.fp-table th {
  border-color: var(--fp-border) !important;
  font-size: 0.9rem;
}
.fp-table thead th {
  background: #f5f7fb !important;
  color: var(--fp-text-dark) !important;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 3;
}
.fp-table tbody tr:nth-child(even) td {
  background: var(--fp-table-zebra) !important;
}
.fp-table tbody tr:hover td {
  background: var(--fp-hover-row) !important;
}
.fp-table tbody td {
  color: #111 !important;
}

/* Light form controls */
.select select,
.select,
.input {
  background: #ffffff !important;
  color: var(--fp-text-dark) !important;
  border: 1px solid #cbd5e1 !important;
}
select option {
  background: #fff;
  color: var(--fp-text-dark);
}

/* Status chips */
.status-chip {
  font-size: 0.8rem;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  display: inline-block;
}
.status-complete {
  background: #dcfce7;
  color: #166534;
}
.status-processing {
  background: #e0f2fe;
  color: #075985;
}
.status-created {
  background: #f1f5f9;
  color: #334155;
}

/* Pagination wrapper */
.fp-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}
.fp-pagination .button {
  min-width: var(--fp-btn-min-width);
}
.fp-page-label {
  font-size: 0.75rem;
  color: #334155;
  white-space: nowrap;
}

/* Activity bar / progress (catalogs) */
.activity-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  border: 1px solid var(--fp-border);
}
.fp-progress {
  width: 100%;
  height: 8px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}
.fp-progress > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #60a5fa);
  width: 0%;
}
.progress-label {
  font-size: 0.9rem;
  color: var(--fp-text-dark);
  margin-bottom: 6px;
}

/* Layout helpers */
.fp-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.fp-actions .button {
  margin-right: 6px;
}

/* Theme switch scaffold */
/* Example alternative theme placeholder */
.theme-alt {
  --fp-purple: #60a5fa;
  --fp-purple-dark: #1d4ed8;
  --fp-purple-light: #dbeafe;
  --fp-bg-accent: #f0f9ff;
}
.theme-alt body.fp-theme {
  background-color: var(--fp-bg-accent);
}

/* Utility */
.fp-hidden {
  display: none !important;
}

/* Messages placeholder to reserve vertical space and avoid layout shift
   when server flash messages appear after the page renders. This keeps
   the activity bar area present so users don't click the wrong link. */
.messages-placeholder {
  min-height: 56px; /* enough for one-line notification */
  display: block;
  margin: 12px 0;
}
.messages-placeholder .notification {
  margin: 0;
}