/* Two themes: light (default) and dark. theme.js sets data-theme before the page draws. */
:root {
  --bg: #f4f5f2;
  --surface: #ffffff;
  --line: #e2e4de;
  --row-line: #eef0ea;
  --ink: #1c211f;
  --ink-2: #57605c;
  --ink-3: #6f7873;
  --brand: #075e54;
  --brand-2: #0a7c6e;
  --brand-soft: #e3f1ee;
  --good: #1a7f4e;
  --good-soft: #e3f4ea;
  --good-text: #115436;
  --warn: #9a6200;
  --warn-soft: #fbf0d9;
  --warn-text: #5e3d00;
  --bad: #b3261e;
  --bad-soft: #fbe9e7;
  --bad-text: #7f1a14;
  --info: #2257a8;
  --info-soft: #e6eefa;
  --info-text: #173d78;
  --chat: #efeae2;
  --bubble-in: #ffffff;
  --bubble-out: #d9fdd3;
  --wa-link: #027eb5;
  --side-bg: #0b3b35;
  --side-ink: #dbe9e5;
  --hover: #f1f3ee;
  --pill-bg: #eceee9;
  --bar-bg: #e8eae4;
  --input-bg: #ffffff;
  --input-line: #c3c8c0;
  --toast-bg: #17231f;
  --radius: 10px;
  --shadow: 0 1px 2px rgb(20 30 25 / 6%);
  color-scheme: light;
}
html[data-theme="dark"] {
  --bg: #0d1412;
  --surface: #162120;
  --line: #2a3b38;
  --row-line: #213230;
  --ink: #e6eeec;
  --ink-2: #a9b9b5;
  --ink-3: #8a9c98;
  --brand: #0e7a6a;
  --brand-2: #2bb5a0;
  --brand-soft: #12302b;
  --good: #67d99a;
  --good-soft: #12301f;
  --good-text: #a3e8bf;
  --warn: #f0c05a;
  --warn-soft: #3a2d0f;
  --warn-text: #f4d890;
  --bad: #ff8f85;
  --bad-soft: #3b1a17;
  --bad-text: #ffb8b0;
  --info: #8ab4f8;
  --info-soft: #14263f;
  --info-text: #b8d0fa;
  --chat: #0a1311;
  --bubble-in: #1f2e2c;
  --bubble-out: #06493f;
  --wa-link: #53bdeb;
  --side-bg: #091a17;
  --side-ink: #c9dcd7;
  --hover: #1f2f2d;
  --pill-bg: #223330;
  --bar-bg: #223330;
  --input-bg: #101a18;
  --input-line: #3b524e;
  --toast-bg: #223330;
  --shadow: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.5 "Segoe UI", system-ui, "Nirmala UI", "Noto Sans Devanagari", sans-serif;
}
h1 { font-size: 23px; line-height: 1.25; margin: 0; font-weight: 650; }
h2 { font-size: 16px; margin: 0 0 12px; font-weight: 650; }
p { margin: 0; }
a { color: var(--brand-2); }
.hint { color: var(--ink-2); font-size: 14px; }
.small { font-size: 12.5px; color: var(--ink-3); }
.mono { font-family: Consolas, ui-monospace, monospace; font-size: 13.5px; overflow-wrap: anywhere; }
.num { font-variant-numeric: tabular-nums; }
.grow { flex: 1; min-width: 0; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.between { justify-content: space-between; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Shell */
.shell { display: grid; grid-template-columns: 224px 1fr; height: 100vh; }
.side { background: var(--side-bg); color: var(--side-ink); display: flex; flex-direction: column; padding: 16px 10px; overflow-y: auto; border-right: 1px solid transparent; }
html[data-theme="dark"] .side { border-right-color: var(--line); }
.brand { font-weight: 650; font-size: 16px; color: #fff; padding: 4px 10px 16px; line-height: 1.25; }
.nav a {
  display: flex; align-items: center; justify-content: space-between; padding: 10px 10px; border-radius: 8px;
  color: inherit; text-decoration: none; margin-bottom: 2px;
}
.nav a:hover { background: rgb(255 255 255 / 8%); }
.nav a.on { background: rgb(255 255 255 / 15%); color: #fff; font-weight: 600; }
.count { background: #25d366; color: #052e1b; border-radius: 10px; padding: 0 7px; font-size: 12px; font-weight: 700; }
.side-foot { margin-top: auto; padding: 10px; font-size: 13px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.side-foot .link { background: none; border: 0; color: #b9d3cd; padding: 0; cursor: pointer; font: inherit; text-decoration: underline; }
.theme-toggle { background: rgb(255 255 255 / 10%); border: 1px solid rgb(255 255 255 / 20%); color: #fff; border-radius: 8px; padding: 5px 11px; font: inherit; font-size: 13px; cursor: pointer; }
.theme-toggle:hover { background: rgb(255 255 255 / 18%); }
.content { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100vh; }
.main { overflow-y: auto; min-width: 0; min-height: 0; flex: 1; }
.web-alert { background: #8a1c15; color: #fff; padding: 10px 20px; font-size: 14px; }
.web-alert[hidden] { display: none; }
.web-alert a { color: #fff; font-weight: 600; }
.page { padding: 26px 30px 52px; max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.banner { padding: 11px 15px; border-radius: var(--radius); font-size: 14px; }
.banner.warn { background: var(--warn-soft); color: var(--warn-text); }
.banner.bad { background: var(--bad-soft); color: var(--bad-text); }
.banner.info { background: var(--info-soft); color: var(--info-text); }
.banner.good { background: var(--good-soft); color: var(--good-text); }
.banner a { color: inherit; font-weight: 600; }

/* Surfaces */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 17px; box-shadow: var(--shadow); }
.tile .label { color: var(--ink-2); font-size: 14px; }
.tile .value { font-size: 30px; font-weight: 650; line-height: 1.25; font-variant-numeric: tabular-nums; }
.tile.hero { background: var(--brand); border-color: var(--brand); color: #fff; }
.tile.hero .label, .tile.hero .small { color: #d3ebe6; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 980px) { .grid-2 { grid-template-columns: 1fr; } }

/* Controls */
.btn {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 8px 14px; border-radius: 8px;
  font: inherit; font-weight: 550; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.btn:hover { background: var(--hover); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-2); border-color: var(--brand-2); }
.btn.danger { color: var(--bad); }
.btn.sm { padding: 4px 10px; font-size: 13.5px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; }
label.field { display: flex; flex-direction: column; gap: 5px; font-weight: 550; font-size: 14px; }
label.field .hint, label.field .small { font-weight: 400; }
input, select, textarea {
  font: inherit; color: var(--ink); background: var(--input-bg); border: 1px solid var(--input-line); border-radius: 8px; padding: 8px 11px; width: 100%; font-weight: 400;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
textarea { resize: vertical; min-height: 110px; }
input[type=checkbox] { width: auto; }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.check input { margin-top: 4px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid .full { grid-column: 1 / -1; }

/* Tables */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th { text-align: left; color: var(--ink-2); font-weight: 550; font-size: 13px; padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 10px 10px; border-bottom: 1px solid var(--row-line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.r, th.r { text-align: right; font-variant-numeric: tabular-nums; }
.empty { text-align: center; padding: 36px 16px; color: var(--ink-2); }
.empty strong { display: block; color: var(--ink); font-size: 16px; margin-bottom: 4px; }

/* Pills */
.pill { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; background: var(--pill-bg); color: var(--ink-2); }
.pill.good { background: var(--good-soft); color: var(--good); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.info { background: var(--info-soft); color: var(--info); }
.tag { display: inline-block; background: var(--brand-soft); color: var(--brand-2); padding: 0 8px; border-radius: 6px; font-size: 12.5px; margin-right: 3px; }

/* Progress */
.bar { height: 8px; border-radius: 4px; background: var(--bar-bg); overflow: hidden; min-width: 90px; }
.bar > i { display: block; height: 100%; background: var(--brand-2); border-radius: 4px; }

/* Inbox */
.inbox { display: grid; grid-template-columns: 310px 1fr 280px; height: 100%; }
.inbox > * { min-height: 0; min-width: 0; }
.inbox-list { background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.inbox-tools { padding: 14px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.conv-list { overflow-y: auto; flex: 1; }
.conv { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--row-line); padding: 11px 14px; cursor: pointer; font: inherit; color: inherit; }
.conv:hover { background: var(--hover); }
.conv.on { background: var(--brand-soft); }
.conv .who { font-weight: 600; }
.conv.unread .who::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #25d366; margin-left: 6px; }
.chat { background: var(--chat); display: flex; flex-direction: column; }
.chat-head { background: var(--surface); padding: 11px 16px; border-bottom: 1px solid var(--line); }
.chat-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.bubble { max-width: 72%; padding: 7px 11px; border-radius: 9px; background: var(--bubble-in); color: var(--ink); align-self: flex-start; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 1px 1px rgb(0 0 0 / 10%); }
.bubble.out { background: var(--bubble-out); align-self: flex-end; }
.bubble .meta { display: block; text-align: right; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.bubble .err { display: block; font-size: 12.5px; color: var(--bad); }
.composer { background: var(--surface); padding: 10px 14px; border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: flex-end; }
.composer textarea { min-height: 40px; height: 40px; }
.lead-panel { background: var(--surface); border-left: 1px solid var(--line); padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.center-note { margin: auto; color: var(--ink-2); text-align: center; padding: 20px; }
@media (max-width: 1150px) { .inbox { grid-template-columns: 260px 1fr; } .lead-panel { display: none; } }

/* Message preview (Free send) */
.designer { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
@media (max-width: 980px) { .designer { grid-template-columns: 1fr; } }
.phone { position: sticky; top: 16px; background: var(--chat); border: 1px solid var(--line); border-radius: 18px; padding: 16px 12px; min-height: 340px; }
.phone-title { font-size: 12.5px; color: var(--ink-2); text-align: center; margin-bottom: 10px; }
.wa-msg { background: var(--bubble-in); color: var(--ink); border-radius: 9px; padding: 8px 10px; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 1px 1px rgb(0 0 0 / 12%); }
.wa-msg .wa-header { font-weight: 700; margin-bottom: 4px; }
.wa-msg .wa-footer { color: var(--ink-3); font-size: 12.5px; margin-top: 4px; }
.wa-msg .wa-time { text-align: right; font-size: 11.5px; color: var(--ink-3); }
.wa-btn { background: var(--bubble-in); color: var(--wa-link); text-align: center; padding: 8px; margin-top: 3px; border-radius: 9px; font-weight: 500; box-shadow: 0 1px 1px rgb(0 0 0 / 12%); overflow-wrap: anywhere; }

/* Modal */
.overlay { position: fixed; inset: 0; background: rgb(8 14 12 / 55%); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; overflow-y: auto; z-index: 20; }
.modal { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 22px; width: min(720px, 100%); display: flex; flex-direction: column; gap: 14px; }
.modal.wide { width: min(980px, 100%); }

/* Login */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.auth .card { width: 380px; display: flex; flex-direction: column; gap: 14px; padding: 26px; }

/* Toasts */
#toasts { position: fixed; left: 240px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 40; max-width: 340px; }
.toast { background: var(--toast-bg); color: #fff; padding: 11px 15px; border-radius: 9px; box-shadow: 0 4px 16px rgb(0 0 0 / 30%); white-space: pre-line; overflow-wrap: anywhere; border: 1px solid rgb(255 255 255 / 10%); }
.toast.bad { background: #8a1c15; }
.toast.lead { background: var(--brand); cursor: pointer; }

.steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); }
.pager { display: flex; gap: 10px; align-items: center; justify-content: flex-end; padding-top: 10px; }