/* =====================================================================
   C-LARS PMS — base stylesheet
   =====================================================================
   Single stylesheet, no build step. Keep it small and boring — the point
   of PMS is to be fast, reliable, and easy to read, not to look pretty.
   Color palette is restrained; generous whitespace; system fonts.
   ===================================================================== */

:root {
  --fg:       #1f2328;
  --fg-muted: #656d76;
  --bg:       #ffffff;
  --bg-alt:   #f6f8fa;
  --border:   #d0d7de;
  --accent:   #0969da;
  --accent-hover: #0550ae;
  --danger:   #cf222e;
  --success:  #1a7f37;
  --warning:  #bf8700;
  --maxw:     1100px;
  --radius:   6px;
  --font:     -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg-alt);
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-alt);
  padding: 0.1em 0.35em;
  border-radius: 3px;
  border: 1px solid var(--border);
}

/* ---------- Header / nav ---------- */

.site-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.brand a { color: var(--fg); }
.brand a:hover { text-decoration: none; }

.env-badge {
  font-size: 0.7rem;
  padding: 0.1em 0.5em;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid var(--border);
  color: var(--fg-muted);
}
.env-badge.env-dev        { background: #fff8c5; color: #7a5200; border-color: #d4a72c; }
.env-badge.env-preview    { background: #ddf4ff; color: #0550ae; border-color: #54aeff; }
.env-badge.env-production { background: #dafbe1; color: #1a7f37; border-color: #4ac26b; }

.site-nav {
  flex: 1;
  display: flex;
  gap: 0.25rem;
}
.nav-link {
  color: var(--fg);
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius);
}
.nav-link:hover  { background: var(--bg-alt); text-decoration: none; }
.nav-link.active { background: var(--bg-alt); font-weight: 600; }

.user-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 0.85rem;
}
.user-name { font-weight: 600; }
.user-role { color: var(--fg-muted); text-transform: lowercase; }

/* ---------- Main content ---------- */

.site-main {
  max-width: var(--maxw);
  margin: 2rem auto;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.site-footer {
  max-width: var(--maxw);
  margin: 2rem auto;
  padding: 1rem 1.5rem;
  color: var(--fg-muted);
  text-align: center;
}

/* ---------- Cards ---------- */

.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
}
.card h1, .card h2, .card h3 { margin-top: 0; }
.card .muted { color: var(--fg-muted); }

/* ---------- Flash messages ---------- */

.flash {
  max-width: var(--maxw);
  margin: 1rem auto 0;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.flash-info    { background: #ddf4ff; border-color: #54aeff; color: #0550ae; }
.flash-success { background: #dafbe1; border-color: #4ac26b; color: #1a7f37; }
.flash-warning { background: #fff8c5; border-color: #d4a72c; color: #7a5200; }
.flash-error   { background: #ffebe9; border-color: #ff8182; color: #cf222e; }

/* ---------- Tables ---------- */

.data {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
}
.data th, .data td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
.data thead th {
  background: var(--bg-alt);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.data tr:last-child td { border-bottom: 0; }

/* ---------- Lists ---------- */

ul.plain {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
ul.plain li {
  padding: 0.3rem 0;
  border-bottom: 1px dashed var(--border);
}
ul.plain li:last-child { border-bottom: 0; }

/* ---------- Forms (stubs for M2+) ---------- */

form.stacked {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 640px;
}
form.stacked label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.9rem;
  color: var(--fg-muted);
}
form.stacked input[type="text"],
form.stacked input[type="email"],
form.stacked input[type="number"],
form.stacked input[type="date"],
form.stacked select,
form.stacked textarea {
  font: inherit;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}

.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  cursor: pointer;
}
.btn:hover { background: var(--bg-alt); }
.btn.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.btn.danger  {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}
.btn.btn-sm {
  padding: 0.25rem 0.6rem;
  font-size: 0.85em;
}

form.stacked textarea {
  font: inherit;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  resize: vertical;
}
form.stacked .row {
  display: flex;
  gap: 1rem;
}
form.stacked .field-error {
  color: var(--danger);
  margin-top: 0.2rem;
}
form.stacked .form-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
form.stacked label.checkbox {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  color: var(--fg);
}
form.stacked label em {
  color: var(--danger);
  font-style: normal;
}

.inline-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 1rem 0;
  flex-wrap: wrap;
}
.inline-form input[type="search"],
.inline-form input[type="text"] {
  flex: 1;
  max-width: 400px;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  background: var(--bg);
}
.inline-form select {
  font: inherit;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
.inline-form label { margin: 0; color: var(--fg-muted); font-size: 0.9rem; }

/* ---------- Card header (title + action buttons) ---------- */

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}
.card-header h1,
.card-header h2 { margin: 0 0 0.25rem 0; }
.header-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* ---------- Pills (inline status/segment badges) ---------- */

.pill {
  display: inline-block;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--fg-muted);
}
.pill-success {
  background: #dafbe1;
  border-color: #4ac26b;
  color: #1a7f37;
}

/* ---------- Address grid on account detail ---------- */

.addr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}
.addr-grid pre.addr {
  font-family: var(--font);
  font-size: 0.95em;
  background: var(--bg-alt);
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin: 0.25rem 0 0 0;
  white-space: pre-wrap;
}
.notes {
  background: var(--bg-alt);
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--border);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-top: 1rem;
  white-space: pre-wrap;
}

/* ---------- Activity feed ---------- */

ul.activity {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul.activity li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}
ul.activity li:last-child { border-bottom: 0; }
.activity-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9em;
}
.activity-type {
  display: inline-block;
  padding: 0.1em 0.5em;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--fg-muted);
}
.activity-when { margin-left: auto; }
.activity-changes { margin-top: 0.25rem; }

/* ---------- Opportunity detail header value ---------- */

.header-value {
  display: inline-block;
  margin-left: 0.75rem;
  font-size: 0.7em;
  font-weight: 500;
  color: var(--fg-muted);
  vertical-align: middle;
  padding: 0.1em 0.6em;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
}

/* ---------- Stage picker button strip ---------- */

.stage-picker {
  margin: 1rem 0;
}
.stage-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}
.stage-btn {
  padding: 0.35rem 0.7rem;
  font-size: 0.85em;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
  white-space: nowrap;
}
.stage-btn:hover { background: var(--bg-alt); }
.stage-btn[disabled] { cursor: default; }

.stage-btn-current {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
}
.stage-btn-current:hover { background: var(--accent); }

.stage-btn-upstream {
  background: var(--bg-alt);
  color: var(--fg-muted);
  opacity: 0.7;
}
.stage-btn-upstream:hover { opacity: 1; }

.stage-btn-next {
  background: var(--bg);
  color: var(--fg);
}

.stage-btn-won {
  background: #dafbe1;
  border-color: #4ac26b;
  color: #1a7f37;
}
.stage-btn-won:hover { background: #b4e6c0; }

.stage-btn-loss {
  background: #ffebe9;
  border-color: #ff8182;
  color: #cf222e;
}
.stage-btn-loss:hover { background: #ffd0cc; }

.stage-reason {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85em;
  color: var(--fg-muted);
}
.stage-reason input {
  font: inherit;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 500px;
}

/* ---------- Picker row (dropdown + "new" button) ---------- */

.picker-row {
  display: flex;
  gap: 0.4rem;
  align-items: stretch;
}
.picker-row select {
  flex: 1;
  min-width: 0;
}

/* ---------- Qualification fieldset ---------- */

fieldset.qualification-box {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem 1rem;
  margin: 0;
}
fieldset.qualification-box legend {
  padding: 0 0.4rem;
  color: var(--fg);
  font-weight: 600;
  font-size: 0.9rem;
}
fieldset.qualification-box .row {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}
fieldset.qualification-box label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.9rem;
  color: var(--fg-muted);
}
fieldset.qualification-box input,
fieldset.qualification-box select {
  font: inherit;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}

/* ---------- Address editor (Alpine-powered) ---------- */

.address-editor {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  background: var(--bg-alt);
}
.address-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.address-editor-actions {
  display: flex;
  gap: 0.4rem;
}
.address-row {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem 0.75rem;
  margin-top: 0.5rem;
  border-left-width: 4px;
}
.address-row-billing  { border-left-color: #54aeff; }
.address-row-physical { border-left-color: #4ac26b; }
.address-row-head {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.address-row-kind {
  font: inherit;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
.address-row-label {
  font: inherit;
  flex: 1;
  min-width: 180px;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.address-row-default {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85em;
  color: var(--fg-muted);
}
.address-row-text {
  width: 100%;
  font: inherit;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  resize: vertical;
}

/* Read-only address view on account detail */
.address-view {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}
.address-view-group strong { display: block; margin-bottom: 0.3rem; }
.address-view-row {
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--border);
}
.address-view-row:last-child { border-bottom: 0; }
.address-view-head {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.2rem;
  font-size: 0.85em;
  color: var(--fg-muted);
}
.address-view-label { font-weight: 600; color: var(--fg); }
.address-view pre.addr {
  font-family: var(--font);
  font-size: 0.95em;
  background: var(--bg-alt);
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin: 0;
  white-space: pre-wrap;
}

/* ---------- Opportunities list (Alpine advanced table) ---------- */

.opp-list { margin-top: 1rem; }
.opp-list-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.opp-list-quicksearch {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}
.opp-list-quicksearch input[type="search"] {
  font: inherit;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  min-width: 260px;
}

.opp-list-columns { position: relative; }
.opp-list-columns summary {
  list-style: none;
  cursor: pointer;
}
.opp-list-columns summary::-webkit-details-marker { display: none; }
.opp-list-columns[open] .opp-list-columns-menu { display: block; }
.opp-list-columns-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);
  z-index: 10;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
  min-width: 220px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.opp-list-column-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0;
}
.opp-list-column-row label {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  color: var(--fg);
  font-size: 0.9em;
}
.opp-list-column-move { display: flex; gap: 0.2rem; }
.opp-list-columns-actions {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}

.btn.btn-xs {
  padding: 0.1rem 0.4rem;
  font-size: 0.75em;
}

.opp-list-table thead th { padding: 0; }
.opp-list-table .col-sort {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.3rem;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
}
.opp-list-table .col-sort:hover { background: var(--bg-alt); }
.sort-indicator {
  font-size: 0.75em;
  color: var(--accent);
  min-width: 0.8em;
  display: inline-block;
  text-align: right;
}

.opp-list-filter-row th {
  background: var(--bg);
  padding: 0.3rem 0.5rem;
  border-bottom: 2px solid var(--border);
}
.opp-list-filter-row input,
.opp-list-filter-row select {
  font: inherit;
  width: 100%;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  font-size: 0.85em;
}
.filter-range {
  display: flex;
  gap: 0.2rem;
}
.filter-range input { width: 50%; }