/* settings-look.css — the platform's Settings pages in respond.io's shape
 * (owner, 2026-09-29). Scoped to html[data-crm-settings] (settings-look.js),
 * except the label form, which looks the same wherever it opens. Every
 * setting, page and permission is the platform's and unchanged.
 *
 *   page     from the start edge, the whole width; forms in a 720px column
 *   bar      a small name and its line over a hairline
 *   fields   white on a hairline, 36px, a darker line while typing
 *   switches each setting with a switch is a box of its own
 *   tables   14px grey heads, 48px rows, edit / delete under the pointer
 *   empty    an icon, the words and the page's Add button, in the middle
 *   labels   ready colours plus any colour, and the label as it will look
 */
html[data-crm-settings], .modal-container {
  --st-line: rgba(53, 60, 69, .16);
  --st-line-on: #626f7f;
  --st-ink: #282e34;
  --st-muted: #626f7f;
  --st-card: #ffffff;
  --st-page: #ffffff;
  --st-hover: #f5f6f7;
  --st-fb: #1877f2;
  --st-ease: .15s cubic-bezier(.4, 0, .2, 1);
}
html.dark[data-crm-settings], html.dark .modal-container, .dark .modal-container {
  --st-line: #2c3138;
  --st-line-on: #9aa3af;
  --st-ink: #e8eaed;
  --st-muted: #9aa3af;
  --st-card: #1b1e23;
  --st-page: #1b1e23;
  --st-hover: rgba(255, 255, 255, .05);
}

/* ---- the page ---- */
/* The page is white; lists and boxes on it are white with their hairline, no
   shadow (owner, 2026-09-30 - grey tried and dropped). */
html[data-crm-settings] main > div.overflow-auto.bg-n-surface-1 { padding-top: 0; background: var(--st-page); }
html[data-crm-settings] main > div.overflow-auto.bg-n-surface-1 > div.max-w-5xl { max-width: none; margin-inline: 0; }
/* A form page (Account settings): the bar across the page, the form in a
   720px column under it. */
html[data-crm-settings] main > div.overflow-auto.bg-n-surface-1 > div.max-w-5xl > div.max-w-2xl { max-width: none; margin-inline: 0; }
html[data-crm-settings] main > div.overflow-auto.bg-n-surface-1 > div.max-w-5xl > div.max-w-2xl > :not(:first-child) { max-width: 720px; }

/* ---- the bar: name, its line, a hairline the page's whole width ---- */
html[data-crm-settings] main > div.overflow-auto > div.max-w-5xl > div > div.items-start.w-full:first-child {
  margin-inline: -24px; width: calc(100% + 48px); padding: 14px 24px 12px;
  border-bottom: 1px solid var(--st-line);
}
html[data-crm-settings] main > div.overflow-auto > div.max-w-5xl > div > div.items-start.w-full:first-child > div:first-child { margin-bottom: 2px; min-height: 24px; }
html[data-crm-settings] main > div.overflow-auto > div.max-w-5xl > div > div.items-start.w-full:first-child h1 { font-size: 16px; font-weight: 600; line-height: 24px; color: var(--st-ink); }
html[data-crm-settings] main > div.overflow-auto > div.max-w-5xl > div > div.items-start.w-full:first-child p { font-size: 14px; line-height: 20px; color: var(--st-muted); }
/* The search and Add row under the bar sits closer to it. */
html[data-crm-settings] main > div.overflow-auto > div.max-w-5xl > div > div.items-start.w-full:first-child + div.gap-3 { margin-top: 4px; }
html[data-crm-settings] main > div.overflow-auto > div.max-w-5xl > div.max-w-2xl > div.flex-grow { margin-top: 20px; }

/* ---- fields ---- */
html[data-crm-settings] main :is(input, textarea).outline-n-weak,
html[data-crm-settings] main div.max-w-5xl :is(input[type="text"], input[type="email"], input[type="url"], input[type="number"], input[type="password"], input:not([type]), textarea, select):not([class*="crm-"]):not(.vc-input__input) {
  background-color: var(--st-card) !important;
  outline: 1px solid var(--st-line) !important; outline-offset: -1px;
  border-color: transparent;
  border-radius: 8px !important;
  color: var(--st-ink);
  transition: outline-color var(--st-ease);
}
html[data-crm-settings] main input.h-10 { height: 36px; }
html[data-crm-settings] main :is(input, textarea, select):hover:not(:disabled) { outline-color: rgba(53, 60, 69, .32) !important; }
html[data-crm-settings] main :is(input, textarea, select):focus { outline-color: var(--st-line-on) !important; box-shadow: none; }

/* Primary buttons: lime, Facebook blue under the pointer (the owner's rule). */
/* A round button is not one of these - the Copilot launcher is round through
   "!rounded-full", which .rounded-full does not match: it was squashed to 36px. */
html[data-crm-settings] main button.bg-n-brand:not(.rounded-full, [class~="!rounded-full"]) { height: 36px; color: #000 !important; transition: background-color var(--st-ease), color var(--st-ease); }
html[data-crm-settings] main button.bg-n-brand.h-8:not(.rounded-full) { height: 32px; }
html[data-crm-settings] main button.bg-n-brand:not(.rounded-full, [class~="!rounded-full"]):hover:not(:disabled) { background-color: var(--st-fb) !important; color: #fff !important; filter: none; }

/* ---- sections ---- */
html[data-crm-settings] main section.grid.border-t { border-top-color: var(--st-line); }
html[data-crm-settings] main section.grid > header h4 { font-size: 14px; font-weight: 600; color: var(--st-ink); }
html[data-crm-settings] main section.grid > header p { font-size: 14px; line-height: 20px; color: var(--st-muted); margin-top: 4px; }
/* A setting with a switch is a box of its own, the switch at the far side. */
html[data-crm-settings] main section.grid:has(> header > .col-span-1 button) {
  padding: 16px 20px !important; margin-top: 12px; gap: 12px;
  border: 1px solid var(--st-line) !important; border-radius: 8px;
  background: var(--st-card);
}
html[data-crm-settings] main section.grid:has(> header > .col-span-1 button) > div:empty { display: none; }

/* ---- tables ---- */
html[data-crm-settings] main div.max-w-5xl table { border-collapse: collapse; }
/* A collapsed table cannot round its corners, so the box is the table's own
   wrapper (a <div> or, on most lists, a <main>); the table's top rule would
   double the box's edge. */
html[data-crm-settings] main div.max-w-5xl :is(div, main):has(> table) {
  border: 1px solid var(--st-line); border-radius: 8px; overflow: hidden; background: var(--st-card);
}
html[data-crm-settings] main div.max-w-5xl :is(div, main):has(> table) > table { border-top: 0; }
html[data-crm-settings] main div.max-w-5xl table :is(thead, tbody, tr) { border-color: var(--st-line) !important; }
html[data-crm-settings] main div.max-w-5xl table thead th {
  height: 44px; padding: 0 12px !important;
  font-size: 14px; font-weight: 700; color: var(--st-muted); text-transform: none;
}
html[data-crm-settings] main div.max-w-5xl table tbody tr { height: 48px; transition: background-color var(--st-ease); }
html[data-crm-settings] main div.max-w-5xl table tbody tr:hover { background: var(--st-hover); }
html[data-crm-settings] main div.max-w-5xl table tbody td { padding: 8px 12px !important; font-size: 14px; }
@media (hover: hover) {
  html[data-crm-settings] main div.max-w-5xl table tbody td:last-child > div.flex > button {
    opacity: 0; transition: opacity var(--st-ease), background-color var(--st-ease), color var(--st-ease);
  }
  html[data-crm-settings] main div.max-w-5xl table tbody tr:is(:hover, :focus-within) td:last-child > div.flex > button { opacity: 1; }
}

/* ---- empty lists ---- */
html[data-crm-settings] main div.max-w-5xl > div > main:has(> div.justify-center.py-12),
html[data-crm-settings] main div.max-w-5xl > div > main.crm-set-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 64px 16px; text-align: center;
}
html[data-crm-settings] main div.max-w-5xl > div > main:has(> div.justify-center.py-12) > div::before,
html[data-crm-settings] main div.max-w-5xl > div > main.crm-set-empty::before {
  content: ""; width: 48px; height: 48px; margin: 0 auto 12px; display: block;
  border-radius: 12px; background-color: var(--st-hover);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23626f7f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5 12 3l9 4.5-9 4.5-9-4.5Z'/%3E%3Cpath d='m3 12 9 4.5 9-4.5'/%3E%3Cpath d='m3 16.5 9 4.5 9-4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 24px;
}
html[data-crm-settings] main div.max-w-5xl > div > main.crm-set-empty > p { font-size: 14px; color: var(--st-muted); padding: 0; margin: 0; height: auto; }
.crm-set-empty-btn {
  margin-top: 16px; height: 32px; padding: 0 12px; border: 0; border-radius: 8px;
  background: #d4fb08; color: #000; font-size: 14px; font-weight: 500; cursor: pointer;
  transition: background-color var(--st-ease), color var(--st-ease);
}
.crm-set-empty-btn:hover { background: var(--st-fb); color: #fff; }

/* ---- the label form (Add / Edit label) ---- */
.modal-container:has(form[data-crm-tagform]) { border-radius: 12px; background: var(--st-card); }
.modal-container:has(form[data-crm-tagform]) > div > div:first-child {
  padding: 20px 24px 16px; border-bottom: 1px solid var(--st-line);
}
.modal-container:has(form[data-crm-tagform]) > div > div:first-child h2 { font-size: 20px; font-weight: 600; color: var(--st-ink); }
.modal-container:has(form[data-crm-tagform]) > div > div:first-child p { color: var(--st-muted); }
form[data-crm-tagform] { padding: 20px 24px 20px; row-gap: 16px; }
form[data-crm-tagform] > * { margin: 0 !important; }
form[data-crm-tagform] > .crm-tagchip-row { order: 0; width: 100%; }
form[data-crm-tagform] > .label-name--input { order: 1; }
form[data-crm-tagform] > .crm-tagform__colour { order: 2; }
form[data-crm-tagform] > label.input-container:not(.label-name--input) { order: 3; }
form[data-crm-tagform] > div.flex.items-center.gap-2:not(.justify-end) { order: 4; }
form[data-crm-tagform] > div.justify-end { order: 5; padding-top: 4px !important; }
form[data-crm-tagform] label > span.text-heading-3,
form[data-crm-tagform] .crm-tagform__colour label { font-size: 14px; font-weight: 600; color: var(--st-muted); }
form[data-crm-tagform] input:not([type="checkbox"]):not(.vc-input__input) {
  height: 40px; margin: 6px 0 0 !important; padding: 0 12px;
  background: var(--st-card) !important; color: var(--st-ink);
  border: 1px solid var(--st-line) !important; border-radius: 8px; box-shadow: none;
  transition: border-color var(--st-ease), box-shadow var(--st-ease);
}
form[data-crm-tagform] input:not([type="checkbox"]):not(.vc-input__input):focus {
  border-color: var(--st-fb) !important; box-shadow: 0 0 0 3px rgba(24, 119, 242, .14);
}
form[data-crm-tagform] div.justify-end button:last-child:hover:not(:disabled) { background-color: var(--st-fb) !important; color: #fff !important; filter: none; }

/* The label as it will look. */
.crm-tagchip {
  display: inline-flex; align-items: center; height: 28px; max-width: 100%; padding: 0 12px;
  border-radius: 8px; font-size: 14px; color: var(--st-ink);
  background: color-mix(in srgb, var(--tag) 22%, var(--st-card));
  border: 1px solid color-mix(in srgb, var(--tag) 55%, var(--st-card));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background-color var(--st-ease), border-color var(--st-ease);
}
.crm-tagchip.is-blank { color: var(--st-muted); }

/* Ready colours and "any colour". The platform's own square is put away; its
   picker still opens from the "+". */
.crm-tagform__colour .colorpicker { position: relative; }
.crm-tagform__colour .colorpicker--selected { position: absolute !important; opacity: 0; pointer-events: none; width: 1px !important; height: 1px !important; }
.crm-tagform__colour .colorpicker .vc-chrome { top: 44px !important; }
.crm-sw { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.crm-sw__dot {
  position: relative; width: 32px; height: 32px; padding: 0 !important; flex: 0 0 auto;
  border: 0; border-radius: 50%; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
  transition: box-shadow var(--st-ease);
}
.crm-sw__dot:hover { box-shadow: 0 0 0 2px var(--st-card), 0 0 0 4px var(--st-line); }
.crm-sw__dot.is-on { box-shadow: 0 0 0 2px var(--st-card), 0 0 0 4px var(--st-line-on); }
.crm-sw__dot.is-on::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17l9-10'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .45));
}
/* Any colour: a colour wheel with a "+", or the chosen shade once picked. */
.crm-sw__any {
  background: conic-gradient(#f2aca5, #f9e08c, #a9dfa6, #bcd3fb, #dcbbf0, #f2aca5);
}
.crm-sw__any:not(.is-on)::before {
  content: "+"; position: absolute; inset: 7px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--st-card); color: var(--st-ink); font-size: 16px; line-height: 1;
}
.crm-sw__any.is-on { background: var(--sw); }