/* Touchbud CRM design system, shared by the sales part and the campaign part. Loaded AFTER each part's own style.css:
   it sets the brand tokens (the Touchbud family look: ink, white and #e2171d red, Open Sans), the frame drawn by
   shell.js (sidebar, phone top bar, search box) and the common look of controls, cards, tables, dialogs and sign-in.
   What only one part needs stays in that part's style.css. */

@font-face {
  font-family: "Open Sans";
  src: url(fonts/OpenSans.woff2) format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --ink: #15161b;
  --ink-2: #454954;
  --ink-3: #6b7080;
  --line: #e3e5ea;
  --line-2: #eef0f3;
  --line-3: #d7dae1;
  --accent: #e2171d;
  --accent-strong: #c11318;
  --accent-ink: #ffffff;
  --accent-soft: #fdeceb;
  --good: #177245;
  --good-soft: #e4f4ea;
  --warn: #8a5a00;
  --warn-soft: #fdf0d5;
  --bad: #b42318;
  --bad-soft: #fbe9e7;
  --info: #1f5fd0;
  --info-soft: #e8f0fe;
  --radius: 14px;
  --radius-s: 9px;
  --shadow: 0 1px 2px rgba(21, 22, 27, .04), 0 2px 10px rgba(21, 22, 27, .04);
  --shadow-lg: 0 24px 64px rgba(21, 22, 27, .22), 0 2px 8px rgba(21, 22, 27, .08);
  --font: "Open Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --side: 256px;
}

/* ---------------------------------------------------------------- base */
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -.015em; }
h2 { font-size: 16px; font-weight: 700; letter-spacing: -.005em; }
h3 { font-size: 14px; font-weight: 700; }
.sub, .muted { color: var(--ink-3); }
::selection { background: #ffd9d7; }
* { scrollbar-width: thin; scrollbar-color: #cfd3da transparent; }
kbd {
  font: 600 11px/1 var(--font); color: var(--ink-3); background: var(--line-2); border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 5px; padding: 3px 5px; white-space: nowrap;
}
.tb-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[data-icon] { display: inline-flex; }
.tb-grow { flex: 1; }

/* ---------------------------------------------------------------- frame: sidebar */
.shell.tb-shell { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100vh; }
.tb-side {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 10px; z-index: 30;
  background: var(--panel); border-right: 1px solid var(--line); padding: 14px 12px 12px;
}
.tb-side-head { display: flex; align-items: center; }
.tb-brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px; color: var(--ink); font-size: 17px; font-weight: 700; letter-spacing: -.015em; white-space: nowrap; }
.tb-brand:hover { text-decoration: none; }
.tb-brand img { display: block; }
.tb-brand b { font-weight: 700; color: var(--ink-3); }

.tb-company {
  position: relative; display: flex; align-items: center; gap: 8px; height: 38px; margin: 0; padding: 0 10px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font-size: 13.5px; font-weight: 600;
}
.tb-company .tb-icon { color: var(--ink-3); width: 16px; height: 16px; }
.tb-company select {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent; box-shadow: none; outline: 0; margin: 0;
  height: 36px; padding: 0 22px 0 0; width: 100%; font: inherit; color: inherit; cursor: pointer; text-overflow: ellipsis;
}
.tb-company select:focus { box-shadow: none; border: 0; }
.tb-company:focus-within { border-color: var(--ink); }
.tb-company .tb-company-caret { position: absolute; right: 9px; pointer-events: none; width: 14px; height: 14px; }
.tb-company.one span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

button.tb-search {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 0 9px 0 10px; margin: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; color: var(--ink-3); font: inherit; font-weight: 400; cursor: pointer;
}
button.tb-search:hover { border-color: var(--line-3); background: var(--panel); color: var(--ink-2); }
button.tb-search .tb-icon { width: 16px; height: 16px; }
button.tb-search kbd { margin-left: auto; }

.tb-nav { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; margin: 0 -6px; padding: 0 6px; }
.tb-group { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 16px 10px 6px; }
.tb-group:first-child { padding-top: 4px; }
a.tb-item { display: flex; align-items: center; gap: 11px; min-height: 34px; padding: 0 10px; border-radius: 8px; color: var(--ink-2); font-weight: 500; }
a.tb-item .tb-icon { color: var(--ink-3); }
a.tb-item:hover { background: var(--line-2); color: var(--ink); text-decoration: none; }
a.tb-item.on { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
a.tb-item.on .tb-icon { color: var(--accent); }
a.tb-item:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

.tb-foot { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.tb-user { display: flex; align-items: center; gap: 10px; padding: 0 2px 0 4px; }
.tb-avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.tb-user-text { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.tb-user-text strong { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-user-text small { font-size: 11.5px; color: var(--ink-3); }
button.tb-icon-btn {
  width: 34px; height: 34px; flex: none; padding: 0; margin: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); cursor: pointer;
}
button.tb-icon-btn:hover { background: var(--line-2); color: var(--ink); }
button.tb-close { display: none; margin-left: auto; }
.tb-lang { display: flex; }
.tb-lang .lang-switch { flex: 1; }
.tb-lang .lang-switch button { flex: 1; }

/* ---------------------------------------------------------------- frame: phones */
.tb-top { display: none; }
.tb-scrim { display: none; }
@media (max-width: 900px) {
  .shell.tb-shell { grid-template-columns: minmax(0, 1fr); }
  .tb-top {
    display: flex; align-items: center; gap: 4px; position: sticky; top: 0; z-index: 20; padding: 8px 8px;
    background: rgba(255, 255, 255, .94); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line);
  }
  .tb-top .tb-brand { font-size: 16px; padding: 0 4px; }
  .tb-top .tb-brand img { width: 26px; height: 26px; }
  .tb-side {
    position: fixed; inset: 0 auto 0 0; width: min(304px, 86vw); height: 100vh; height: 100dvh; transform: translateX(-104%);
    transition: transform .22s cubic-bezier(.2, .8, .2, 1); box-shadow: none; border-right: 0;
  }
  .tb-open .tb-side { transform: none; box-shadow: var(--shadow-lg); }
  .tb-scrim { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(21, 22, 27, .45); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .tb-open .tb-scrim { opacity: 1; pointer-events: auto; }
  button.tb-close { display: inline-flex; }
  button.tb-search kbd { display: none; }
  html.tb-lock, html.tb-lock body { overflow: hidden; }
}

/* ---------------------------------------------------------------- page */
.main { padding: 28px 36px 64px; min-width: 0; }
.page-head { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head .sub { margin-top: 3px; font-size: 13.5px; }
@media (max-width: 900px) { .main { padding: 18px 14px 56px; } h1 { font-size: 21px; } }
/* "← Campaigns" above a detail page: quiet, not a red link */
.page-head > a:not(.btn) { color: var(--ink-3); font-size: 13.5px; font-weight: 600; }
.page-head > a:not(.btn):hover { color: var(--ink); text-decoration: none; }
.page-head:has(> a:only-child) { margin-bottom: 8px; }
/* links inside tables stay calm; the red is for actions */
td a:not(.btn):not(.small-button) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
td a:not(.btn):not(.small-button):hover { text-decoration-color: var(--accent); }

/* ---------------------------------------------------------------- controls */
button, .btn, a.small-button, label.small-button {
  font: inherit; font-weight: 600; color: var(--ink); background: var(--panel); border: 1px solid var(--line-3); border-radius: var(--radius-s);
  padding: 7px 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s;
}
button:hover, .btn:hover, a.small-button:hover, label.small-button:hover { border-color: #bfc4ce; background: #fafafb; }
button:active { transform: translateY(.5px); }
button:disabled { opacity: .5; cursor: default; transform: none; }
button.primary, .btn.primary, a.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 2px rgba(226, 23, 29, .28); }
button.primary:hover, .btn.primary:hover, a.btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); filter: none; text-decoration: none; }
button.danger { color: var(--bad); }
button.danger:hover { background: var(--bad-soft); border-color: #f0c4bf; }
button.danger.solid { background: var(--bad); border-color: var(--bad); color: #fff; }
button.ghost, button.text-button, button.quiet, button.icon-button, button.open { border-color: transparent; background: transparent; }
button.ghost:hover, button.text-button:hover, button.quiet:hover, button.icon-button:hover, button.open:hover { background: var(--line-2); border-color: transparent; }
button.small, button.small-button, a.small-button, label.small-button, button.primary.small, a.btn.small { padding: 4px 10px; font-size: 12.5px; border-radius: 8px; }
button .tb-icon, .btn .tb-icon { width: 16px; height: 16px; }
:is(button, .btn, a.tb-item, summary):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

input, select, textarea {
  font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line-3); border-radius: var(--radius-s); padding: 7px 11px; width: 100%;
  transition: border-color .12s, box-shadow .12s;
}
input::placeholder, textarea::placeholder { color: #9aa0ad; }
input:hover, select:hover, textarea:hover { border-color: #bfc4ce; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(21, 22, 27, .09); }
input[type=checkbox], input[type=radio] { width: 16px; height: 16px; accent-color: var(--accent); box-shadow: none; }
input[type=file] { border-style: dashed; }
label { color: var(--ink-2); }

/* ---------------------------------------------------------------- surfaces */
.card, .tile, .table-wrap { border-color: var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.tile .label { font-size: 12.5px; }
.tile .value { font-size: 26px; letter-spacing: -.02em; }
th { font-size: 11.5px; letter-spacing: .05em; background: #fafafb; padding-top: 11px; padding-bottom: 11px; }
td { padding-top: 11px; padding-bottom: 11px; }
tbody tr:hover td, tr.click:hover td { background: #fafafb; }
.chip { font-size: 12px; padding: 2px 9px; }
.chip.info { background: var(--info-soft); color: var(--info); }
.notice { border-radius: 10px; color: #1b4aa3; }
.progress > div { background: var(--accent); }
.tabs button { border-radius: 0; background: none; }
.tabs button:hover { background: none; color: var(--ink); }
.tabs button.on { border-bottom-color: var(--accent); }
.step-no { background: var(--ink); }
.empty, .empty-row { color: var(--ink-3); }
.empty-page { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 52px 24px; }
.empty-page h2 { margin: 0; }
.empty-page .sub { max-width: 460px; }
.empty-page .btn { margin-top: 14px; }
code { border-radius: 5px; }

/* ---------------------------------------------------------------- dialogs, toasts */
dialog, .modal { border-radius: 16px; box-shadow: var(--shadow-lg); }
dialog::backdrop, .backdrop { background: rgba(21, 22, 27, .5); backdrop-filter: blur(2px); }
.dialog-head h2, .modal-head h2 { font-size: 17px; }
.toast { background: var(--ink); border-radius: 10px; padding: 11px 15px; font-weight: 600; box-shadow: var(--shadow-lg); }
.toast.bad { background: var(--bad); }
.toast.good { background: var(--good); }
@media (max-width: 640px) {
  dialog { max-width: 100vw; width: 100vw; max-height: 100vh; max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; }
  .backdrop { padding: 0; }
  .modal, .modal.wide { max-width: 100vw; min-height: 100dvh; border-radius: 0; }
  .modal-body { max-height: none; }
  .toast, .toasts { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* ---------------------------------------------------------------- sign-in */
.login {
  min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  background:
    radial-gradient(900px 480px at 12% -10%, rgba(226, 23, 29, .07), transparent 60%),
    radial-gradient(800px 520px at 110% 110%, rgba(21, 22, 27, .07), transparent 60%),
    var(--bg);
}
.login .card, .login form.card { width: 100%; max-width: 392px; margin: 0; padding: 30px 30px 24px; border-radius: 20px; box-shadow: 0 30px 80px rgba(21, 22, 27, .12), 0 2px 6px rgba(21, 22, 27, .05); }
.login .brand { display: flex; align-items: center; gap: 12px; padding: 0 0 4px; color: var(--ink); font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.login .brand img { width: 42px; height: 42px; display: block; }
.login .brand b { font-weight: 700; color: var(--ink-3); }
.login .tagline { color: var(--ink-3); font-size: 13.5px; margin: 6px 0 20px; }
.login button.primary, .login .btn.primary { justify-content: center; width: 100%; padding: 10px 14px; font-size: 14.5px; margin-top: 6px; }
.login-lang { display: flex; justify-content: center; margin-top: 18px; }

/* ---------------------------------------------------------------- language switch */
.lang-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--line-2); }
.lang-switch button {
  font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; line-height: 1.4; color: var(--ink-3);
  background: none; border: 0; border-radius: 6px; padding: 3px 10px; margin: 0; min-width: 0; cursor: pointer; box-shadow: none; justify-content: center;
}
.lang-switch button:hover { color: var(--ink); background: none; }
.lang-switch button.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(21, 22, 27, .14); }

/* ---------------------------------------------------------------- search box (Ctrl+K) */
.tb-palette { position: fixed; inset: 0; z-index: 80; background: rgba(21, 22, 27, .45); backdrop-filter: blur(2px); display: grid; align-items: start; justify-items: center; padding: 12vh 14px 14px; }
.tb-palette-box { width: min(620px, 100%); max-height: min(520px, 76vh); display: flex; flex-direction: column; background: var(--panel); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; }
.tb-palette-input { display: flex; align-items: center; gap: 10px; padding: 4px 14px; border-bottom: 1px solid var(--line); color: var(--ink-3); }
.tb-palette-input input { border: 0; box-shadow: none; padding: 12px 0; font-size: 15.5px; background: transparent; }
.tb-palette-input input:focus { border: 0; box-shadow: none; }
.tb-palette-list { overflow-y: auto; padding: 6px; }
.tb-palette-group { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 10px 10px 4px; }
button.tb-palette-row {
  display: flex; align-items: center; gap: 11px; width: 100%; min-height: 40px; padding: 6px 10px; margin: 0; text-align: left;
  border: 0; border-radius: 9px; background: transparent; color: var(--ink); font: inherit; font-weight: 500; cursor: pointer; white-space: normal;
}
button.tb-palette-row .tb-icon { color: var(--ink-3); }
button.tb-palette-row.on { background: var(--accent-soft); }
button.tb-palette-row.on .tb-icon { color: var(--accent); }
.tb-palette-label { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.tb-palette-label strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-palette-label small { color: var(--ink-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-palette-hint { color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.tb-palette-empty { padding: 26px 12px; text-align: center; color: var(--ink-3); }
.tb-palette-foot { display: flex; gap: 16px; padding: 9px 14px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12px; }
.tb-palette-foot kbd { margin-right: 3px; }
@media (max-width: 640px) { .tb-palette { padding-top: 10px; } .tb-palette-foot { display: none; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }