/* SSC CRM — brand palette extracted from seattlesurfacecleaners.com stylesheet */
:root {
  --color-primary: #2c5f6e;       /* dark teal — nav, headers, primary buttons */
  --color-primary-dark: #1b3a4b;  /* deep navy — hover states, dark surfaces */
  --color-accent: #c8973e;        /* gold — badges, highlights, active links */
  --color-bg: #f4f6f8;            /* light gray page background */
  --color-surface: #ffffff;       /* card / panel backgrounds */
  --color-border: #dde2e8;        /* subtle borders */
  --color-text: #1a2530;          /* near-black body text */
  --color-text-muted: #6b7c8d;    /* secondary / meta text */
  --color-success: #2d7d46;
  --color-danger: #b83232;
  --color-warning: #b86e00;
  --color-info: #2c5f6e;
  --radius: 6px;
  --shadow: 0 1px 4px rgba(0,0,0,.10);
  --shadow-md: 0 2px 8px rgba(0,0,0,.14);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
}

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

/* ── Navbar ─────────────────────────────────────────────────── */
.navbar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: var(--color-primary-dark);
  color: #fff;
  padding: 0 1.5rem;
  height: 56px;
  box-shadow: var(--shadow-md);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-shrink: 0;
}

.brand-logo {
  height: 36px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.brand-logo--login {
  height: 72px;
  margin: 0 auto .75rem;
}

.nav-company {
  font-weight: 600;
  font-size: .9rem;
  color: rgba(255,255,255,.85);
  white-space: nowrap;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: .25rem;
  flex: 1;
}

.nav-link {
  color: rgba(255,255,255,.75);
  font-size: .9rem;
  padding: .3rem .75rem;
  border-radius: var(--radius);
  transition: background .15s, color .15s;
}

.nav-link:hover,
.nav-link.active {
  background: rgba(255,255,255,.12);
  color: #fff;
}

.nav-link.active {
  color: var(--color-accent);
}

.nav-user {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-left: auto;
  flex-shrink: 0;
}

.nav-email {
  font-size: .8rem;
  color: rgba(255,255,255,.6);
}

.nav-logout {
  font-size: .8rem;
  color: rgba(255,255,255,.7);
  padding: .25rem .6rem;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--radius);
  transition: background .15s, color .15s;
}

.nav-logout:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
}

/* ── Layout ─────────────────────────────────────────────────── */
.main-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem;
}

.page-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.page-header-left {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  flex: 1;
}

.page-header-actions { margin-left: auto; }

.page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.breadcrumb {
  font-size: .85rem;
  color: var(--color-text-muted);
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem 1rem;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, box-shadow .15s;
  white-space: nowrap;
  text-decoration: none;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.btn-primary:hover { background: var(--color-primary-dark); color: #fff; }

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-secondary:hover { background: var(--color-bg); color: var(--color-text); }

.btn-danger {
  background: var(--color-danger);
  color: #fff;
  border-color: var(--color-danger);
}
.btn-danger:hover { background: #8f2525; color: #fff; }

.btn-full { width: 100%; justify-content: center; }

/* ── Flash messages ──────────────────────────────────────────── */
.flash-container { margin-bottom: 1rem; display: flex; flex-direction: column; gap: .5rem; }

.flash {
  padding: .65rem 1rem;
  border-radius: var(--radius);
  font-size: .9rem;
  border-left: 4px solid;
}

.flash-success { background: #edf7f1; border-color: var(--color-success); color: var(--color-success); }
.flash-danger  { background: #fdf0f0; border-color: var(--color-danger);  color: var(--color-danger);  }
.flash-warning { background: #fef8ed; border-color: var(--color-warning); color: var(--color-warning); }
.flash-info    { background: #eef4f7; border-color: var(--color-info);    color: var(--color-info);    }

/* ── Login ───────────────────────────────────────────────────── */
.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--color-bg);
}

.login-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 2.5rem;
  width: 100%;
  max-width: 380px;
}

.login-header { text-align: center; margin-bottom: 2rem; }


.login-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.login-subtitle {
  font-size: .85rem;
  color: var(--color-text-muted);
  margin-top: .2rem;
}

/* ── Forms ───────────────────────────────────────────────────── */
.form-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.75rem;
  max-width: 900px;
}

.form-section {
  border: none;
  margin-bottom: 1.5rem;
  padding: 0;
}

.form-section-title {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: .4rem;
  margin-bottom: 1rem;
}

.form-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-bottom: .75rem;
}

.form-group-half { flex: 1 1 calc(50% - .5rem); min-width: 180px; }
.form-group-grow { flex: 1 1 300px; }

.form-label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--color-text);
}

.required { color: var(--color-danger); }

.form-input {
  padding: .45rem .7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: .9rem;
  font-family: var(--font);
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(44,95,110,.15);
}

.form-select { appearance: auto; }

.form-textarea { resize: vertical; min-height: 90px; }

.form-check {
  flex-direction: row;
  align-items: center;
  gap: .5rem;
}

.check-input { width: auto; }
.check-label { font-weight: 400; font-size: .9rem; }

.form-actions {
  display: flex;
  gap: .75rem;
  align-items: center;
  padding-top: .5rem;
  flex-wrap: wrap;
}

/* ── Pipeline / List ─────────────────────────────────────────── */
.pipeline {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 1rem;
}

.pipeline-column {
  flex: 1 1 200px;
  min-width: 200px;
  max-width: 280px;
}

.pipeline-stage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-primary-dark);
  color: #fff;
  padding: .5rem .75rem;
  border-radius: var(--radius) var(--radius) 0 0;
  font-size: .82rem;
}

.stage-name { font-weight: 700; letter-spacing: .04em; }

.stage-count {
  background: rgba(255,255,255,.2);
  color: #fff;
  border-radius: 999px;
  padding: 0 .55rem;
  font-size: .75rem;
  font-weight: 700;
}

.pipeline-cards {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: .5rem;
  min-height: 60px;
}

.pipeline-empty {
  font-size: .8rem;
  color: var(--color-text-muted);
  text-align: center;
  padding: .75rem 0;
}

.prospect-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: .65rem .75rem;
  box-shadow: var(--shadow);
  transition: box-shadow .15s;
}

.prospect-card:hover { box-shadow: var(--shadow-md); }

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .25rem;
  margin-bottom: .25rem;
}

.card-company {
  font-weight: 700;
  font-size: .9rem;
  color: var(--color-primary-dark);
  line-height: 1.3;
}

.card-company:hover { color: var(--color-accent); }

.card-edit {
  color: var(--color-text-muted);
  font-size: 1rem;
  flex-shrink: 0;
  line-height: 1;
  padding: .1rem .2rem;
}

.card-edit:hover { color: var(--color-primary); }

.card-contact {
  font-size: .82rem;
  color: var(--color-text-muted);
  margin-bottom: .35rem;
}

.card-meta {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.card-meta-item {
  font-size: .78rem;
  color: var(--color-text-muted);
}

.card-email { color: var(--color-primary); }
.card-email:hover { color: var(--color-accent); }

.card-freq {
  display: inline-block;
  background: rgba(44,95,110,.1);
  color: var(--color-primary);
  border-radius: 4px;
  padding: 0 .4rem;
  font-weight: 600;
  text-transform: capitalize;
  align-self: flex-start;
}

/* ── Detail view ─────────────────────────────────────────────── */
.stage-badge {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .15rem .6rem;
  border-radius: 999px;
  background: var(--color-border);
  color: var(--color-text-muted);
}

.stage-badge.stage-new        { background: #e8f0fe; color: #2c5f6e; }
.stage-badge.stage-contacted  { background: #fef3e2; color: #8a5c00; }
.stage-badge.stage-quoted     { background: #e8f5e9; color: #2d6e3a; }
.stage-badge.stage-won        { background: #e8f5e9; color: #1b5e20; }
.stage-badge.stage-lost       { background: #fce8e8; color: #8f2525; }

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.detail-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
}

.detail-card-wide { grid-column: 1 / -1; }

.detail-section-title {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: .4rem;
  margin-bottom: .9rem;
}

.detail-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .3rem .75rem;
}

.detail-list dt {
  font-size: .8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.detail-list dd {
  font-size: .9rem;
  color: var(--color-text);
}

.detail-notes {
  font-size: .9rem;
  color: var(--color-text);
  white-space: pre-wrap;
  line-height: 1.65;
}

.detail-empty { color: var(--color-text-muted); font-style: italic; }

.detail-danger-zone {
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  margin-top: .5rem;
}

/* ── Badges ──────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .15rem .55rem;
  border-radius: 999px;
}

.badge-promoted  { background: #e8f5e9; color: #2d6e3a; }
.badge-new-item  { background: #fff3e0; color: #8a5c00; }

/* ── Page subtitle ───────────────────────────────────────────── */
.page-subtitle {
  font-size: .85rem;
  color: var(--color-text-muted);
  margin-top: .15rem;
}

/* ── Small button variant ────────────────────────────────────── */
.btn-sm {
  padding: .25rem .65rem;
  font-size: .8rem;
}

/* ── Data table ──────────────────────────────────────────────── */
.table-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}

.data-table thead tr {
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-border);
}

.data-table th {
  padding: .6rem 1rem;
  text-align: left;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.data-table td {
  padding: .65rem 1rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  vertical-align: middle;
}

.data-table tbody tr:last-child td { border-bottom: none; }

.data-table tbody tr:hover { background: var(--color-bg); }

.row-new td:first-child { border-left: 3px solid var(--color-accent); }

.col-date  { white-space: nowrap; color: var(--color-text-muted); }
.col-company { font-weight: 600; }
.col-action { text-align: right; white-space: nowrap; }

/* ── Raw payload ─────────────────────────────────────────────── */
.raw-payload {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem;
  font-size: .8rem;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
  color: var(--color-text);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* ── Empty state ─────────────────────────────────────────────── */
.empty-state {
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 3rem 2rem;
  text-align: center;
  color: var(--color-text-muted);
  font-size: .9rem;
}

/* ── Pricing-specific ────────────────────────────────────────── */
.badge-active   { background: #e8f5e9; color: #2d6e3a; }
.badge-inactive { background: #f5f5f5; color: #888; }

.row-inactive td { opacity: .55; }

.row-sub {
  font-size: .78rem;
  color: var(--color-text-muted);
  font-weight: 400;
  margin-top: .15rem;
}

.col-order { color: var(--color-text-muted); text-align: center; width: 3rem; }
.col-rate  { font-weight: 600; white-space: nowrap; }

.form-hint {
  font-size: .78rem;
  color: var(--color-text-muted);
  margin-top: .2rem;
}

/* ── Proposal status badges ──────────────────────────────────── */
.badge-proposal-draft    { background: #eef2f7; color: #4a5568; }
.badge-proposal-sent     { background: #fef3e2; color: #8a5c00; }
.badge-proposal-accepted { background: #e8f5e9; color: #1b5e20; }

/* ── Proposal builder table ──────────────────────────────────── */
.builder-table-wrap { overflow-x: auto; margin-bottom: .5rem; }

.builder-table { table-layout: fixed; min-width: 800px; }

.builder-table .th-svc  { width: 170px; }
.builder-table .th-name { width: auto;  }
.builder-table .th-unit { width: 110px; }
.builder-table .th-rate { width: 100px; }
.builder-table .th-qty  { width: 80px;  }
.builder-table .th-lt   { width: 100px; }
.builder-table .th-rm   { width: 44px;  }

.builder-table .td-svc,
.builder-table .td-name,
.builder-table .td-unit,
.builder-table .td-rate,
.builder-table .td-qty  { vertical-align: top; padding: .4rem .5rem; }

.builder-table .td-lt   { vertical-align: middle; font-weight: 600; text-align: right; white-space: nowrap; }
.builder-table .td-rm   { vertical-align: middle; text-align: center; }

.builder-table .form-input { padding: .35rem .5rem; font-size: .85rem; }

/* ── Totals table (builder preview + detail) ─────────────────── */
.totals-table { margin-left: auto; border-collapse: collapse; min-width: 280px; }

.totals-label { padding: .3rem 1.5rem .3rem 0; text-align: right; color: var(--color-text-muted); font-size: .875rem; }
.totals-value { padding: .3rem 0; text-align: right; font-size: .875rem; min-width: 90px; }

.totals-note .totals-label,
.totals-note .totals-value { color: var(--color-text-muted); font-size: .82rem; }

.totals-final .totals-label,
.totals-final .totals-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  border-top: 2px solid var(--color-border);
  padding-top: .5rem;
}

.proposal-totals { margin-top: 1.25rem; }

/* ── Proposal builder reset-price button ─────────────────────── */
.btn-reset-price {
  display: none;
  margin-top: .3rem;
  font-size: .72rem;
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline dotted;
}
.btn-reset-price:hover { color: var(--color-accent); }