/*
  SmsDesk look: a quiet desk with one bright thing on it,
  the amber "message waiting" lamp that marks anything unread.

  To change the color scheme, change the three theme colors below.
  Every other shade is worked out from them.
*/
:root {
  /* theme */
  --deep: #24282e;       /* headings and body text */
  --side: var(--deep);   /* sidebar */
  --accent: #1f6b8c;     /* buttons, links and sent texts */
  --paper: #eff1f2;      /* page background */

  /* fixed */
  --sheet: #ffffff;
  --lamp: #edaa12;       /* unread only */
  --lamp-soft: #fff4d6;
  --brick: #b23a2e;
  --brick-wash: #fbe9e6;

  /* worked out from the theme */
  --ink: var(--deep);
  --muted: color-mix(in srgb, var(--deep) 66%, white);
  --line: color-mix(in srgb, var(--deep) 15%, white);
  --line-strong: color-mix(in srgb, var(--deep) 27%, white);
  --tint-1: color-mix(in srgb, var(--deep) 3%, white);
  --tint-2: color-mix(in srgb, var(--deep) 7%, white);
  --tint-3: color-mix(in srgb, var(--deep) 12%, white);
  --deep-2: color-mix(in srgb, var(--side) 88%, white);
  --deep-3: color-mix(in srgb, var(--side) 80%, white);
  --rail-text: color-mix(in srgb, var(--side) 20%, white);
  --rail-dim: color-mix(in srgb, var(--side) 38%, white);
  --rail-line: color-mix(in srgb, var(--side) 82%, white);
  --accent-dark: color-mix(in srgb, var(--accent) 80%, black);
  --accent-wash: color-mix(in srgb, var(--accent) 11%, white);
  --accent-light: color-mix(in srgb, var(--accent) 70%, white);
  --accent-ring: color-mix(in srgb, var(--accent) 25%, white);
  --ok-text: var(--accent-dark);

  --display: "Manrope", "Segoe UI", system-ui, sans-serif;
  --body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --rail: 232px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.5 var(--body);
  font-variant-numeric: tabular-nums;
}

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

:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; border-radius: 4px; }

h1, h2 { font-family: var(--display); color: var(--deep); letter-spacing: -0.01em; }
h1 { font-size: 28px; line-height: 1.15; font-weight: 700; margin: 0 0 18px; }
h2 { font-size: 18px; font-weight: 650; margin: 28px 0 10px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* ---------- signed-in shell: sidebar + content ---------- */

.shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100vh; }

.rail {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  background: var(--side); color: var(--rail-text);
  padding: 22px 14px 18px;
}

.brand {
  font-family: var(--display); font-weight: 800; font-size: 23px; letter-spacing: -0.02em;
  color: #fff; padding: 0 10px 22px;
  display: flex; align-items: center; gap: 10px;
}
.brand:hover { text-decoration: none; }
.brand .mark {
  width: 26px; height: 20px; border-radius: 6px 6px 6px 2px;
  background: var(--accent); position: relative; flex: none;
  box-shadow: inset 0 0 0 2px var(--accent-light);
}
.brand .mark::after {
  content: ""; position: absolute; right: -4px; top: -4px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--lamp); box-shadow: 0 0 0 2px var(--side);
}

.rail nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.rail nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 10px; border-radius: 8px;
  color: var(--rail-text); font-weight: 500;
}
.rail nav a:hover { background: var(--deep-2); color: #fff; text-decoration: none; }
.rail nav a.current { background: var(--deep-3); color: #fff; box-shadow: inset 3px 0 0 var(--lamp); }
.rail nav .dev { margin-top: 14px; border: 1px dashed var(--rail-line); color: var(--rail-dim); font-size: 14px; }

.userbox { border-top: 1px solid var(--rail-line); padding: 14px 10px 0; font-size: 14px; }
.userbox .who { display: block; color: #fff; overflow-wrap: anywhere; margin-bottom: 8px; }
.userbox .links { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.userbox a, .userbox .linklike { color: var(--rail-dim); }
.userbox a:hover, .userbox .linklike:hover { color: #fff; }
.userbox form { margin: 0; }

.linklike {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--accent);
}
.linklike:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The lamp: an unread count. */
.badge {
  display: inline-block; min-width: 22px; padding: 0 7px;
  background: var(--lamp); color: var(--deep); border-radius: 11px;
  font-size: 12px; font-weight: 700; line-height: 22px; text-align: center;
}
.badge[hidden] { display: none; }
.rail .badge { box-shadow: 0 0 0 3px rgba(237, 170, 18, .18), 0 0 14px rgba(237, 170, 18, .45); }

.container { width: 100%; max-width: 1000px; padding: 34px 40px 72px; }

/* ---------- signed-out pages: split screen ---------- */

.gate { display: grid; grid-template-columns: minmax(300px, 5fr) 7fr; min-height: 100vh; }
.gate-side {
  background: var(--side); color: var(--rail-text);
  padding: 40px 48px; display: flex; flex-direction: column; justify-content: space-between;
}
.gate-side .brand { padding: 0; }
.gate-side .pitch {
  font-family: var(--display); font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1;
  font-weight: 650; color: #fff; letter-spacing: -0.02em; max-width: 13em; margin: 0;
}
.gate-side .sub { max-width: 30em; color: var(--rail-dim); margin: 16px 0 0; }
.gate-main { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.gate-main > * { width: 100%; max-width: 400px; }
.gate .card { background: transparent; border: 0; padding: 0; margin: 0; }

/* ---------- page furniture ---------- */

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h1 { margin: 0; }

.card {
  background: var(--sheet); border: 1px solid var(--line); border-radius: 12px;
  padding: 24px; margin-bottom: 18px;
}
.card.narrow { max-width: 440px; }
.card.medium { max-width: 600px; }

.btn {
  display: inline-block; padding: 9px 18px; border-radius: 8px;
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  font: inherit; font-weight: 600; cursor: pointer; line-height: 1.3;
}
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); text-decoration: none; }
.btn.secondary { background: var(--sheet); color: var(--deep); border-color: var(--line-strong); }
.btn.secondary:hover { background: var(--accent-wash); border-color: var(--accent); }
.btn.danger { background: var(--sheet); color: var(--brick); border-color: #e0b0a9; }
.btn.danger:hover { background: var(--brick-wash); }
.btn.small { padding: 5px 11px; font-size: 13px; border-radius: 7px; }

form.inline { display: inline; margin: 0; }

label { display: block; font-weight: 600; color: var(--deep); margin: 16px 0 5px; }
.check label, label.check { display: flex; gap: 9px; align-items: center; font-weight: 400; margin: 14px 0; }
input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--accent); }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=search], input[type=number], select, textarea {
  width: 100%; padding: 10px 12px; font: inherit;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--tint-1); color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px var(--accent-ring); }
textarea { resize: vertical; min-height: 90px; }
.form-actions { margin-top: 24px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.field-error { color: var(--brick); font-size: 13px; display: block; margin-top: 4px; }
.hint { color: var(--muted); font-size: 13px; margin-top: 5px; }

.alert { padding: 11px 14px; border-radius: 8px; margin-bottom: 18px; border-left: 4px solid; }
.alert.ok { background: var(--accent-wash); color: var(--ok-text); border-color: var(--accent); }
.alert.error, .validation-summary-errors { background: var(--brick-wash); color: #7d241b; border-color: var(--brick); }
.validation-summary-errors { padding: 11px 14px; border-radius: 8px; margin-bottom: 16px; border-left: 4px solid var(--brick); }
.validation-summary-errors ul { margin: 0; padding-left: 18px; }
.validation-summary-valid { display: none; }

/* Tables sit on one sheet with ruled rows, no boxed cells. */
table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--sheet); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: 13px; color: var(--muted); font-weight: 600; background: var(--tint-1); }
tbody tr:hover td { background: var(--tint-1); }
tr:last-child td { border-bottom: 0; }
td.actions { white-space: nowrap; text-align: right; }
td.actions > * { margin-left: 6px; }

.empty {
  color: var(--muted); padding: 40px 24px; text-align: center;
  background: repeating-linear-gradient(-45deg, transparent 0 10px, color-mix(in srgb, var(--deep) 2.5%, transparent) 10px 20px), var(--sheet);
  border: 1px dashed var(--line-strong); border-radius: 12px;
}

.tag { display: inline-block; padding: 1px 9px; border-radius: 6px; background: var(--tint-2); font-size: 12px; font-weight: 600; color: var(--muted); }
.tag.good { background: var(--accent-wash); color: var(--ok-text); }
.tag.bad { background: var(--brick-wash); color: #8c2b21; }

/* Segmented switch above the inbox. */
.tabs { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 16px; background: var(--tint-3); border-radius: 10px; flex-wrap: wrap; }
.tabs a { padding: 6px 14px; border-radius: 8px; color: var(--muted); font-weight: 500; }
.tabs a:hover { color: var(--deep); text-decoration: none; background: var(--tint-2); }
.tabs a.active { background: var(--sheet); color: var(--deep); font-weight: 650; box-shadow: 0 1px 2px color-mix(in srgb, var(--deep) 15%, transparent); }

/* ---------- inbox ---------- */

.convo-list { background: var(--sheet); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.convo {
  display: flex; gap: 14px; align-items: center;
  padding: 14px 18px 14px 14px; border-bottom: 1px solid var(--line); color: inherit;
}
.convo::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; }
.convo:last-child { border-bottom: 0; }
.convo:hover { background: var(--tint-1); text-decoration: none; }
.convo .main { flex: 1; min-width: 0; }
.convo .name { font-weight: 600; color: var(--deep); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.convo .preview { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.convo .when { color: var(--muted); font-size: 13px; white-space: nowrap; }
.convo.unread { background: linear-gradient(90deg, var(--lamp-soft), transparent 55%); }
.convo.unread::before { background: var(--lamp); box-shadow: 0 0 0 3px rgba(237, 170, 18, .22); }
.convo.unread .name { font-weight: 750; }
.convo.unread .preview { color: var(--ink); }

/* ---------- conversation ---------- */

.thread-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.thread-head h1 { margin: 0 0 4px; }
.thread-head .facts { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.thread-head .route { color: var(--accent); font-weight: 600; }
.thread-head .route.none { color: #9a6a00; }

.chat {
  background: var(--sheet); border: 1px solid var(--line); border-radius: 12px 12px 0 0;
  padding: 20px; height: 56vh; min-height: 300px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
}
.bubble { max-width: 72%; padding: 9px 14px 7px; border-radius: 16px; }
.bubble.in { align-self: flex-start; background: var(--tint-2); border: 1px solid var(--tint-3); border-bottom-left-radius: 4px; }
.bubble.out { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.bubble .text { white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble .meta { display: flex; flex-wrap: wrap; gap: 0 10px; font-size: 12px; opacity: .75; margin-top: 3px; }
.bubble.out .meta { justify-content: flex-end; }

.reply {
  margin: 0; background: var(--sheet); border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 12px 12px; padding: 14px 16px 16px;
}
.reply textarea { min-height: 70px; }
.reply .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }

.savebar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  background: var(--lamp-soft); border: 1px solid #f0d58c; border-radius: 10px;
  padding: 10px 14px; margin-bottom: 14px;
}
.savebar input { width: auto; flex: 1; min-width: 160px; }

/* Internal note inside a conversation (assignments). Centered and quiet so it never reads as a text. */
.note {
  align-self: center; max-width: 85%; text-align: center;
  padding: 5px 14px; border: 1px dashed var(--line-strong); border-radius: 999px;
  color: var(--muted); font-size: 13px; background: var(--tint-1);
}
.note time { margin-left: 6px; opacity: .8; }

.assignbar {
  display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap;
  background: var(--sheet); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 14px;
}
.assignbar label { margin: 0; }
.assignbar select { width: auto; min-width: 200px; padding: 6px 10px; }
.assignbar .check { margin: 0; font-size: 14px; }
.assignbar:target { border-color: var(--lamp); box-shadow: 0 0 0 3px var(--lamp-soft); }

/* ---------- small screens: sidebar becomes a top strip ---------- */

@media (max-width: 760px) {
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .rail { position: static; height: auto; padding: 12px 16px; gap: 10px; }
  .brand { padding: 0; font-size: 20px; }
  .rail nav { flex: none; flex-direction: row; align-items: center; overflow-x: auto; gap: 4px; margin: 0 -6px; }
  .rail nav a { white-space: nowrap; gap: 8px; padding: 7px 10px; }
  .rail nav a.current { box-shadow: inset 0 -3px 0 var(--lamp); }
  .rail nav .dev { margin-top: 0; }
  .userbox { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; }
  .userbox .who { margin: 0; font-size: 13px; color: var(--rail-text); }
  .container { padding: 22px 16px 56px; }
  h1 { font-size: 24px; }

  .gate { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .gate-side { padding: 24px 16px 28px; gap: 28px; }
  .gate-main { align-items: flex-start; padding: 28px 16px; }

  th:nth-child(n+4), td:nth-child(n+4) { display: none; }
  td.actions { display: table-cell; }
  .tabs { display: flex; flex-wrap: nowrap; }
  .tabs a { flex: 1; text-align: center; padding: 6px 6px; font-size: 14px; }
  .convo { padding: 12px 14px 12px 12px; gap: 10px; }
  .bubble { max-width: 88%; }
  .chat { height: 60vh; padding: 14px; }
}

@media (prefers-reduced-motion: no-preference) {
  .rail .badge:not([hidden]) { animation: lamp 2.4s ease-in-out 1; }
  @keyframes lamp { 0%, 100% { filter: none; } 40% { filter: brightness(1.25); box-shadow: 0 0 0 5px rgba(237, 170, 18, .25), 0 0 22px rgba(237, 170, 18, .7); } }
}

/* ---------- sign-up requests ---------- */
.tag.new { background: var(--lamp-soft); color: #7a5300; }
.facts-list { display: grid; grid-template-columns: max-content 1fr; gap: 8px 22px; margin: 0 0 8px; }
.facts-list dt { color: var(--muted); }
.facts-list dd { margin: 0; overflow-wrap: anywhere; }
.prewrap { white-space: pre-wrap; }

/* ---------- customers a user owns ---------- */
th.tick, td.tick { width: 36px; padding-right: 0; }
label.plain { display: inline; margin: 0; font-weight: 600; }

/* ---------- texting account ---------- */
fieldset.provider-fields { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.provider-fields[hidden] { display: none; }
h3.sub { font: 650 16px/1.3 var(--display); color: var(--deep); margin: 26px 0 6px; }
input.copy { font-family: Consolas, "Cascadia Mono", monospace; font-size: 13px; background: var(--tint-1); }

/* ---------- browser pop-up reminder ---------- */
.pushbar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; background: var(--lamp-soft); border: 1px solid color-mix(in srgb, var(--lamp) 45%, white); border-radius: 10px; padding: 10px 14px; margin-bottom: 18px; }
.pushbar[hidden] { display: none; }
.pushbar .text { flex: 1 1 260px; }
.pushbar .lampdot { width: 10px; height: 10px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 0 3px rgba(237, 170, 18, .2); flex: none; }

/* ---------- message log ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; background: var(--sheet); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; }
.filters label { margin: 0 0 4px; font-size: 13px; }
.filters select, .filters input { width: auto; min-width: 140px; padding: 6px 10px; }
.filters .field { display: flex; flex-direction: column; }
.log td { font-size: 14px; }
.log td:first-child, .log td:nth-child(4), .log td:nth-child(5) { white-space: nowrap; }
.log .body { max-width: 340px; overflow-wrap: anywhere; }
.dir { font-weight: 600; }
.dir.in { color: var(--accent-dark); }
.pager { display: flex; gap: 12px; align-items: center; margin-top: 14px; }

/* ---------- billing ---------- */
.billing-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; align-items: start; }
.billing-grid .card { margin: 0; max-width: none; }
.meter { height: 12px; border-radius: 999px; background: var(--tint-2); overflow: hidden; margin: 6px 0 8px; }
.meter-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.meter-fill.over { background: var(--lamp); }
.meter-text { margin: 0 0 12px; }
.over-note { color: #8a5a00; font-weight: 600; }
.note-box { background: var(--lamp-soft); border-radius: 8px; padding: 10px 12px; font-size: 14px; }
table.lines { border: 0; border-radius: 0; background: transparent; margin-top: 10px; }
table.lines td { padding: 7px 0; font-size: 14px; background: transparent; }
table.lines tr:hover td { background: transparent; }
table.lines .amount { text-align: right; white-space: nowrap; padding-left: 16px; }
table.lines tfoot td { font-weight: 700; border-top: 2px solid var(--line-strong); border-bottom: 0; }
.cardline { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.cardchip { background: var(--deep); color: #fff; font-size: 12px; font-weight: 700; border-radius: 4px; padding: 1px 7px; }
.inline-details { display: inline-block; text-align: left; }
.inline-details[open] { display: block; margin-top: 6px; }
.inline-details summary { list-style: none; display: inline-block; }
.inline-details summary::-webkit-details-marker { display: none; }
.price-form .row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.billbar { background: var(--brick-wash); border: 1px solid #e0b0a9; color: #7d241b; border-radius: 10px; padding: 10px 14px; margin-bottom: 18px; display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; }
.billbar .text { flex: 1 1 260px; }
.compose-count { white-space: nowrap; }
.compose-count.multi { color: #8a5a00; font-weight: 600; }
@media (max-width: 760px) { .billing-grid, .price-form .row2 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- one-time charges ---------- */
fieldset.timing { border: 0; padding: 0; margin: 14px 0 0; }
fieldset.timing legend { font-weight: 600; color: var(--deep); padding: 0; margin-bottom: 2px; }
fieldset.timing .check { margin: 8px 0; }
input[type=radio] { width: 17px; height: 17px; accent-color: var(--accent); }
.paid-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.paid-fields .wide { grid-column: 1 / -1; }
.paid-fields label { margin-top: 10px; }
.markpaid[open] { background: var(--sheet); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 12px; min-width: 300px; }
table.bills td.actions { white-space: normal; }