/* FPA Sales project styles. Colors, spacing and radii come from FDS tokens only. */

.fss-skip { position: absolute; left: -999px; top: var(--fds-space-2); background: var(--fds-bg-panel); color: var(--fds-text-primary); padding: var(--fds-space-2) var(--fds-space-3); border-radius: var(--fds-radius-sm); }
.fss-skip:focus { left: var(--fds-space-2); z-index: 10; }

.fss-main { max-width: 1120px; margin: 0 auto; padding: var(--fds-space-6) var(--fds-space-4); }
.fss-main-center { min-height: 100vh; display: flex; align-items: center; justify-content: center; }

.fss-login-card { width: 100%; max-width: 420px; }
.fss-login-card .fds-card-body { display: flex; flex-direction: column; gap: var(--fds-space-4); }
.fss-login-button { display: inline-flex; justify-content: center; width: 100%; }

.fss-notice { margin: 0; padding: var(--fds-space-3) var(--fds-space-4); border-radius: var(--fds-radius-sm); background: var(--fds-bg-muted); color: var(--fds-text-primary); }
.fss-notice-error { background: var(--fds-red-50); color: var(--fds-red-700); }
.fss-notice-info { background: var(--fds-blue-50); color: var(--fds-blue-600); }

.fss-lang { display: flex; gap: var(--fds-space-3); font-size: 0.875rem; color: var(--fds-text-secondary); }
.fss-lang a { color: var(--fds-text-secondary); }
.fss-lang [aria-current="true"] { color: var(--fds-text-primary); font-weight: 600; }

.fss-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--fds-space-4); flex-wrap: wrap; padding: var(--fds-space-3) var(--fds-space-4); background: var(--fds-bg-panel); border-bottom: 1px solid var(--fds-gray-100); }
.fss-brand { margin: 0; font-weight: 600; color: var(--fds-text-primary); }
.fss-topbar-actions { display: flex; align-items: center; gap: var(--fds-space-4); flex-wrap: wrap; }

.fss-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--fds-space-4); margin: var(--fds-space-4) 0 var(--fds-space-8); }
.fss-facts div { background: var(--fds-bg-panel); border-radius: var(--fds-radius-md); padding: var(--fds-space-4); }
.fss-facts dt { color: var(--fds-text-muted); font-size: 0.875rem; margin-bottom: var(--fds-space-1); }
.fss-facts dd { margin: 0; color: var(--fds-text-primary); font-weight: 600; overflow-wrap: anywhere; }

@media (max-width: 480px) {
  .fss-main { padding: var(--fds-space-4) var(--fds-space-4); }
  .fss-topbar-actions { width: 100%; justify-content: space-between; }
}

/* shell, forms and tables */
.fss-topbar-left { display: flex; align-items: center; gap: var(--fds-space-2) var(--fds-space-6); flex-wrap: wrap; min-width: 0; }
.fss-nav { display: flex; flex-wrap: wrap; gap: var(--fds-space-1) var(--fds-space-4); }
.fss-nav a { text-decoration: none; color: var(--fds-text-secondary); padding: var(--fds-space-1) 0; }
.fss-nav a[aria-current="page"] { color: var(--fds-text-primary); font-weight: 600; border-bottom: 2px solid var(--fds-text-primary); }
.fss-actor { white-space: nowrap; }
.fss-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--fds-space-4); flex-wrap: wrap; margin-bottom: var(--fds-space-4); }
.fss-page-head h1, .fss-page-head h2 { margin-bottom: 0; }
.fss-section { margin-top: var(--fds-space-8); }
.fss-field { display: flex; flex-direction: column; gap: var(--fds-space-1); font-size: 0.875rem; color: var(--fds-text-secondary); min-width: 0; }
.fss-field input, .fss-field select, .fss-field textarea { font-size: 1rem; color: var(--fds-text-primary); padding: var(--fds-space-2) var(--fds-space-3); border: 1px solid var(--fds-gray-300); border-radius: var(--fds-radius-sm); background: var(--fds-bg-panel); max-width: 100%; }
.fss-form { display: grid; gap: var(--fds-space-3); }
.fss-form-inline { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); align-items: end; margin-top: var(--fds-space-2); }
.fss-inline { display: inline; }
.fss-link-button { background: none; border: 0; padding: 0; color: var(--fds-red-700); text-decoration: underline; cursor: pointer; font-size: 0.875rem; }
.fss-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--fds-bg-panel); border-radius: var(--fds-radius-md); }
.fss-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.fss-table th, .fss-table td { text-align: left; padding: var(--fds-space-2) var(--fds-space-3); border-bottom: 1px solid var(--fds-gray-100); vertical-align: top; white-space: nowrap; }
.fss-table th { color: var(--fds-text-muted); font-weight: 500; font-size: 0.8125rem; }
.fss-table td:nth-child(2) { white-space: normal; min-width: 160px; }
.fss-link-neutral { color: var(--fds-text-secondary); }
.fss-check { display: flex; align-items: center; gap: var(--fds-space-2); font-size: 0.9375rem; }
.fss-table td:last-child { white-space: normal; }
.fss-table td input[type=text] { width: 100%; min-width: 120px; padding: var(--fds-space-1) var(--fds-space-2); border: 1px solid var(--fds-gray-300); border-radius: var(--fds-radius-sm); }
.fss-table select { padding: var(--fds-space-1) var(--fds-space-2); border: 1px solid var(--fds-gray-300); border-radius: var(--fds-radius-sm); max-width: 220px; }
.fss-actions { display: flex; gap: var(--fds-space-3); align-items: center; }

/* customers */
.fss-form-error { white-space: pre-line; }
.fss-filters { display: flex; flex-wrap: wrap; gap: var(--fds-space-3); align-items: flex-end; margin-bottom: var(--fds-space-4); }
.fss-grow { flex: 1 1 220px; }
.fss-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--fds-space-3); }
.fss-form-actions { display: flex; gap: var(--fds-space-2); justify-content: flex-end; flex-wrap: wrap; }
.fss-fieldset { border: 1px solid var(--fds-gray-200); border-radius: var(--fds-radius-sm); padding: var(--fds-space-3); margin: 0; display: grid; gap: var(--fds-space-3); }
.fss-fieldset legend { padding: 0 var(--fds-space-1); font-size: 0.875rem; color: var(--fds-text-secondary); }
.fss-check-bottom { align-self: end; padding-bottom: var(--fds-space-2); }
.fss-field textarea { font: inherit; }
.fss-empty { padding: var(--fds-space-6); text-align: center; background: var(--fds-bg-panel); border-radius: var(--fds-radius-md); }
.fss-badge { display: inline-block; padding: 2px var(--fds-space-2); border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: var(--fds-gray-100); color: var(--fds-text-secondary); vertical-align: middle; }
.fss-badge-warn { background: var(--fds-amber-50); color: var(--fds-amber-700); }
.fss-badge-info { background: var(--fds-blue-50); color: var(--fds-blue-600); }
.fss-pager { display: flex; gap: var(--fds-space-4); align-items: center; justify-content: center; margin-top: var(--fds-space-4); }
.fss-columns { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--fds-space-4); align-items: start; }
.fss-section-card { background: var(--fds-bg-panel); border-radius: var(--fds-radius-md); padding: var(--fds-space-4); display: grid; gap: var(--fds-space-3); min-width: 0; }
.fss-section-card h2 { margin: 0; }
.fss-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--fds-space-3); }
.fss-card { background: var(--fds-bg-panel); border-radius: var(--fds-radius-md); padding: var(--fds-space-4); display: grid; gap: var(--fds-space-2); min-width: 0; }
.fss-card-muted { opacity: 0.65; }
.fss-card-title { margin: 0; overflow-wrap: anywhere; }
.fss-pairs { margin: 0; display: grid; gap: var(--fds-space-1); font-size: 0.9375rem; }
.fss-pairs div { display: flex; gap: var(--fds-space-2); min-width: 0; }
.fss-pairs dt { color: var(--fds-text-muted); flex: 0 0 auto; min-width: 4.5em; }
.fss-pairs dd { margin: 0; overflow-wrap: anywhere; min-width: 0; }
.fss-note { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.fss-history { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fds-space-2); font-size: 0.9375rem; }
.fss-history time { color: var(--fds-text-muted); font-variant-numeric: tabular-nums; margin-right: var(--fds-space-2); }
.fds-layer:not([hidden]) { display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.4); padding: var(--fds-space-4); overflow: auto; }
.fds-dialog { background: var(--fds-bg-panel); border-radius: var(--fds-radius-md); padding: var(--fds-space-6); width: 100%; max-width: 560px; max-height: 100%; overflow: auto; display: grid; gap: var(--fds-space-3); }
.fds-dialog h2, .fds-dialog h3 { margin: 0; }

/* opportunities and follow-ups */
.fss-main-wide { max-width: none; }
.fss-overdue { color: var(--fds-red-700); font-weight: 600; }
.fss-board { display: grid; grid-template-columns: repeat(6, minmax(220px, 1fr)); gap: var(--fds-space-3); overflow-x: auto; padding-bottom: var(--fds-space-2); align-items: start; }
.fss-board-col { background: var(--fds-gray-100); border-radius: var(--fds-radius-md); padding: var(--fds-space-3); display: grid; gap: var(--fds-space-2); min-width: 0; border-top: 3px solid var(--fds-gray-300); }
.fss-board-head h2 { margin: 0; font-size: 1rem; }
.fss-board-head p { margin: 0; }
.fss-board-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fds-space-2); }
.fss-board-card { background: var(--fds-bg-panel); border-radius: var(--fds-radius-sm); padding: var(--fds-space-3); display: grid; gap: var(--fds-space-1); min-width: 0; }
.fss-board-card p { margin: 0; overflow-wrap: anywhere; }
.fss-board-card a { font-weight: 600; color: var(--fds-text-primary); }
.fss-stage-quoted { border-top-color: var(--fds-blue-600); }
.fss-stage-won { border-top-color: var(--fds-green-700); }
.fss-stage-lost { border-top-color: var(--fds-red-700); }
.fss-stage-badge.fss-stage-won { background: var(--fds-green-50); color: var(--fds-green-700); }
.fss-stage-badge.fss-stage-lost { background: var(--fds-red-50); color: var(--fds-red-700); }
.fss-stage-badge.fss-stage-quoted { background: var(--fds-blue-50); color: var(--fds-blue-600); }
.fss-next { display: grid; gap: var(--fds-space-1); justify-items: start; }
.fss-next p { margin: 0; }
.fss-timeline { list-style: none; margin: var(--fds-space-4) 0 0; padding: 0; display: grid; gap: var(--fds-space-3); }
.fss-timeline li { background: var(--fds-bg-panel); border-radius: var(--fds-radius-md); padding: var(--fds-space-3) var(--fds-space-4); display: grid; gap: var(--fds-space-1); min-width: 0; }
.fss-timeline-head { margin: 0; display: flex; flex-wrap: wrap; gap: var(--fds-space-2); align-items: center; }
.fss-timeline time { font-variant-numeric: tabular-nums; font-weight: 600; }
.fss-due-overdue h2 { color: var(--fds-red-700); }

/* linked records and dashboard */
.fss-accounts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fds-space-2); }
.fss-accounts li { display: flex; flex-wrap: wrap; gap: var(--fds-space-2); align-items: center; overflow-wrap: anywhere; }
.fss-inline-form { display: flex; flex-wrap: wrap; gap: var(--fds-space-3); align-items: flex-end; }
.fss-inline-form .fss-form-error { flex-basis: 100%; }
.fss-subhead { font-size: 1rem; margin: var(--fds-space-4) 0 var(--fds-space-2); }
.fss-table caption { text-align: left; font-weight: 600; padding: var(--fds-space-2) 0; color: var(--fds-text-secondary); }
.fss-kpis dd { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.fss-kpis dd .fds-meta { font-size: 0.875rem; font-weight: 400; }
.fss-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fds-space-2); }
.fss-bars li { display: grid; grid-template-columns: 8em minmax(0, 1fr) 8em; gap: var(--fds-space-3); align-items: center; }
.fss-bar-track { background: var(--fds-gray-100); border-radius: 999px; height: 12px; overflow: hidden; }
.fss-bar { display: block; height: 100%; width: 0; background: var(--fds-gray-300); border-radius: 999px; }
.fss-bar.fss-stage-quoted { background: var(--fds-blue-600); }
.fss-bar.fss-stage-qualified { background: var(--fds-text-secondary); }
.fss-bar-value { text-align: right; font-variant-numeric: tabular-nums; }
.fss-numeric td:nth-child(n+3), .fss-numeric th:nth-child(n+3) { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
  .fss-bars li { grid-template-columns: minmax(0, 1fr) auto; }
  .fss-bar-track { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 1100px) {
  .fss-board { grid-template-columns: repeat(3, minmax(0, 1fr)); overflow-x: visible; }
}
@media (max-width: 768px) {
  .fss-columns { grid-template-columns: minmax(0, 1fr); }
  .fss-board { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .fds-dialog { padding: var(--fds-space-4); }
}