:root {
  --stone: #EFEAE0;
  --green: #3F5A44;
  --green-dark: #2C3F30;
  --brass: #A87C2E;
  --ink: #201F1B;
  --white: #FFFFFF;
  --danger: #A23B2E;
  --font-display: "Fraunces", serif;
  --font-ui: "Figtree", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--stone);
  color: var(--ink);
  font-family: var(--font-ui);
  line-height: 1.5;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0 0 0.5em; }

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--ink);
  color: var(--stone);
  padding: 0.9rem 1.5rem;
}
.brand {
  color: var(--stone); text-decoration: none; font-family: var(--font-display); font-size: 1.3rem;
  display: inline-flex; align-items: center; gap: 0.6rem;
}
.brand-icon { height: 36px; width: auto; display: block; }
.brand-sub { color: var(--brass); font-weight: 400; }
.topnav a { color: var(--stone); text-decoration: none; margin-left: 1.25rem; font-size: 0.95rem; }
.topnav a:hover { color: var(--brass); }

.page { max-width: 960px; margin: 2rem auto; padding: 0 1.5rem; }
.footer { text-align: center; color: #6b6759; font-size: 0.85rem; padding: 2rem 0; }

.flashes { margin-bottom: 1.5rem; }
.flash { padding: 0.75rem 1rem; border-radius: 4px; margin-bottom: 0.5rem; font-size: 0.95rem; }
.flash-success { background: #dfe9df; border-left: 4px solid var(--green); }
.flash-error { background: #f3ddd8; border-left: 4px solid var(--danger); }

.card {
  background: var(--white);
  border-radius: 6px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 3px rgba(32,31,27,0.08);
}

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.6rem 0.5rem; border-bottom: 1px solid #e2ddd0; font-size: 0.95rem; }
th { color: #6b6759; font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.03em; }

.field { margin-bottom: 1.1rem; }
.field-label { display: block; font-weight: 500; margin-bottom: 0.3rem; font-size: 0.9rem; }
.field-input, textarea, select, input[type=text], input[type=email], input[type=password] {
  width: 100%; padding: 0.55rem 0.7rem; border: 1px solid #cfc8b8; border-radius: 4px;
  font-family: var(--font-ui); font-size: 1rem; background: var(--white); color: var(--ink);
}
.field-errors { color: var(--danger); font-size: 0.85rem; margin: 0.25rem 0 0; padding-left: 1rem; }

.btn {
  display: inline-block; background: var(--green); color: var(--white); border: none;
  padding: 0.6rem 1.2rem; border-radius: 4px; font-family: var(--font-ui); font-size: 0.95rem;
  font-weight: 500; text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--green-dark); }
.btn-secondary { background: var(--brass); }
.btn-outline { background: transparent; border: 1px solid var(--green); color: var(--green); }

.badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 12px; font-size: 0.78rem; font-weight: 600; }
.badge-new { background: #dde6f5; color: #2c4a7a; }
.badge-open { background: #fdf0d5; color: #8a5a12; }
.badge-pending_customer { background: #f0e6d8; color: #7a5a2c; }
.badge-resolved { background: #dfe9df; color: var(--green-dark); }
.badge-closed { background: #e5e2d8; color: #6b6759; }
.badge-urgent { background: #f3ddd8; color: var(--danger); }
.badge-high { background: #fbe4d8; color: #b25a2c; }
.badge-draft { background: #e5e2d8; color: #6b6759; }
.badge-sent { background: #fdf0d5; color: #8a5a12; }
.badge-accepted { background: #dfe9df; color: var(--green-dark); }
.badge-declined { background: #f3ddd8; color: var(--danger); }
.badge-expired { background: #e5e2d8; color: #6b6759; }
.badge-contacted { background: #f0e6d8; color: #7a5a2c; }
.badge-converted { background: #dfe9df; color: var(--green-dark); }
.badge-rejected { background: #f3ddd8; color: var(--danger); }
.badge-invoiced { background: #dfe9df; color: var(--green-dark); }
.badge-invoicing { background: #fdf0d5; color: #8a5a12; }
.badge-partially_paid { background: #fdf0d5; color: #8a5a12; }
.badge-paid { background: #dfe9df; color: var(--green-dark); }
/* Solid fill, not a muted tint like the status badges above — deliberately
   stands out: an unverified-sender lead needs a human decision, not just
   a status at a glance. */
.badge-warning { background: var(--danger); color: var(--white); }

.badge-sla-on_track { background: #dfe9df; color: var(--green-dark); }
.badge-sla-warning { background: #fdf0d5; color: #8a5a12; }
.badge-sla-breached { background: var(--danger); color: var(--white); }

.callout-warning {
  border-left: 3px solid var(--danger); background: #f3ddd8; color: var(--ink);
  padding: 0.75rem 1rem; border-radius: 4px; margin-bottom: 1.5rem; font-size: 0.9rem;
}
.callout-info {
  border-left: 3px solid var(--green); background: #dfe9df; color: var(--ink);
  padding: 0.75rem 1rem; border-radius: 4px; margin-bottom: 1.5rem; font-size: 0.9rem;
}

.comment { border-left: 3px solid var(--green); padding: 0.6rem 1rem; margin-bottom: 0.8rem; background: #f7f5ef; }
.comment.internal { border-left-color: var(--brass); background: #f7f0e3; }
.comment-meta { font-size: 0.8rem; color: #6b6759; margin-bottom: 0.3rem; }

.search-form { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.search-form input[type=text] { flex: 1; }
.search-match-row td { border-bottom: 1px solid #e2ddd0; padding: 0 0.5rem 0.6rem; font-size: 0.85rem; color: #6b6759; }
.search-match-row mark { background: #fdf0d5; color: #8a5a12; padding: 0 0.15em; border-radius: 2px; }

.login-wrap { max-width: 380px; margin: 4rem auto; }
.login-logo { display: block; max-width: 220px; height: auto; margin: 0 auto 1.25rem; }