/* ---------------------------------------------------------------------------
   Convert Midnight, hand-tuned (public/midnight.js derives the rest).

   The tokens every screen reads, then the shell — sidebar, top bar, buttons,
   fields, cards, menus — in convertrev.com's palette: a deep forest canvas,
   the site's #1b3d2f → #0f231a panel gradient on the sidebar, mint (#5fbf93)
   for focus and selection, and a forest-to-green gradient on primary
   actions. Every rule is scoped to
   :root[data-theme="midnight"], so Daylight is the app as it was.
--------------------------------------------------------------------------- */
:root[data-theme="midnight"] {
  color-scheme: dark;

  --rail: #0f231a;
  --rail-hover: rgba(255, 255, 255, .05);
  --rail-active: rgba(63, 154, 112, .22);
  --rail-text: #b2c8bc;
  --rail-text-dim: #7c998a;

  --bg: #08140f;
  --surface: #0f231a;
  --surface-2: #142f23;
  --line: rgba(130, 178, 154, .14);
  --line-soft: rgba(130, 178, 154, .08);
  --text: #ebf4ef;
  --muted: #9ab4a7;
  --dim: #7d998b;
  --hover: rgba(255, 255, 255, .05);

  --brand: #4caf83;
  --brand-soft: rgba(63, 154, 112, .16);
  --green: #34d399;
  --amber: #fbbf24;
  --red: #f87171;
  --purple: #a78bfa;

  --ink: linear-gradient(110deg, #7fd1a8, #5fbf93 50%, #c2ecd6);
  --action: linear-gradient(100deg, #1b3d2f, #25543f 40%, #2f7a58 78%, #3a8c66);
  --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 18px 40px -28px rgba(0, 0, 0, .9);

  /* calendar-settings.css */
  --ghl-blue: #5fbf93;
  --ghl-blue-soft: rgba(63, 154, 112, .16);
  --ghl-border: rgba(130, 178, 154, .24);
  --ghl-text-2: #9ab4a7;
}

/* What a customer will see stays light (public/midnight.js puts its tokens
   back). Zero specificity: the area's own light rules set its colours. */
:where(:root[data-theme="midnight"] [data-keep-light]) { color-scheme: light; color: #0c1c15; }

:root[data-theme="midnight"] body {
  background:
    radial-gradient(900px 600px at 18% -12%, rgba(47, 122, 88, .16), transparent 70%),
    radial-gradient(800px 600px at 105% 30%, rgba(37, 84, 63, .12), transparent 70%),
    radial-gradient(700px 500px at 55% 112%, rgba(95, 191, 147, .08), transparent 70%),
    var(--bg) fixed;
}
:root[data-theme="midnight"] ::selection { background: rgba(95, 191, 147, .38); color: #fff; }
:root[data-theme="midnight"] *:focus-visible { outline-color: #5fbf93; }

/* ----- sidebar (the same midnight rail in Light: public/daylight.css) ----- */
:root:is([data-theme="midnight"], [data-theme="daylight"]) .rail {
  background: linear-gradient(180deg, #1b3d2f, #0f231a);
  box-shadow: inset -1px 0 0 rgba(130, 178, 154, .10); /* a line that takes no width: GHL's rail is 224px inside */
}
@media (max-width: 767px) {
  :root:is([data-theme="midnight"], [data-theme="daylight"]) .rail { box-shadow: inset -1px 0 0 rgba(130, 178, 154, .10), 4px 0 24px rgba(0, 0, 0, .25); }
}
:root:is([data-theme="midnight"], [data-theme="daylight"]) .logo-mark { box-shadow: 0 8px 22px rgba(63, 154, 112, .38); border-radius: 9px; }
/* GHL's switcher and Search are lighter fills on the rail, without borders;
   the shortcut chip is filled grey with dark text. */
:root:is([data-theme="midnight"], [data-theme="daylight"]) .switcher { background: rgba(255, 255, 255, .1); border: 0; }
:root:is([data-theme="midnight"], [data-theme="daylight"]) .switcher:hover { background: rgba(255, 255, 255, .14); }
:root:is([data-theme="midnight"], [data-theme="daylight"]) .switcher-icon { background: rgba(255, 255, 255, .16); color: #e2eae5; border-radius: 50%; }
:root:is([data-theme="midnight"], [data-theme="daylight"]) .rail-search.as-button,
:root:is([data-theme="midnight"], [data-theme="daylight"]) .rail-search input {
  background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .11); color: #9ba6a0;
}
:root:is([data-theme="midnight"], [data-theme="daylight"]) .rail-search.as-button:hover { background: rgba(255, 255, 255, .14); color: var(--rail-text); }
:root:is([data-theme="midnight"], [data-theme="daylight"]) .rail-search.as-button kbd { background: #9ba6a0; color: #000; }
:root:is([data-theme="midnight"], [data-theme="daylight"]) .rail-qa {
  border: 0; color: #fff; background: linear-gradient(135deg, #3f9a70, #5fbf93);
  box-shadow: 0 8px 20px -10px rgba(47, 122, 88, .9);
}
:root:is([data-theme="midnight"], [data-theme="daylight"]) .rail-qa:hover { filter: brightness(1.08); }
:root:is([data-theme="midnight"], [data-theme="daylight"]) .nav-item { color: #fff; }
:root:is([data-theme="midnight"], [data-theme="daylight"]) .nav-item .ico { color: inherit; }
:root:is([data-theme="midnight"], [data-theme="daylight"]) .nav-item:hover { background: rgba(255, 255, 255, .05); color: #fff; }
:root:is([data-theme="midnight"], [data-theme="daylight"]) .nav-item:hover .ico { color: #bfe8d2; }
/* GHL's active row: one solid fill, no gradient or border (Convert's forest). */
:root:is([data-theme="midnight"], [data-theme="daylight"]) .nav-item.on { color: #fff; background: #2b5c46; box-shadow: none; }
:root:is([data-theme="midnight"], [data-theme="daylight"]) .nav-item.on .ico { color: #bfe8d2; }
:root:is([data-theme="midnight"], [data-theme="daylight"]) .nav-sep,
:root:is([data-theme="midnight"], [data-theme="daylight"]) .nav-foot { background-color: transparent; border-color: rgba(130, 178, 154, .10); }
:root:is([data-theme="midnight"], [data-theme="daylight"]) .nav-sep { background: rgba(130, 178, 154, .10); }
:root:is([data-theme="midnight"], [data-theme="daylight"]) .nav::-webkit-scrollbar-thumb { background: rgba(130, 178, 154, .2); }
/* Dark text on the amber "New" tag is right as it is. */
:root:is([data-theme="midnight"], [data-theme="daylight"]) .tagline:not(.beta) { color: #3a2a06; }
:root:is([data-theme="midnight"], [data-theme="daylight"]) .tagline.beta {
  color: #a7e3c5; background: rgba(194, 236, 214, .14); box-shadow: inset 0 0 0 1px rgba(194, 236, 214, .3);
}

/* ----- top bar and banner ----- */
:root[data-theme="midnight"] .topbar {
  background: rgba(8, 20, 15, .72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
/* Joined to the module header under it (app.css): the header's own surface. */
:root[data-theme="midnight"] .topbar:has(+ .page > .page-head.module-head:first-child) {
  background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* GHL's coloured row stays exact: the derived twins would sink the muted changelog green. */
:root[data-theme="midnight"] .topbar .hdr-btn.hdr-phone { background: #019b59; }
:root[data-theme="midnight"] .topbar .hdr-btn.hdr-ask-ai { background: linear-gradient(#6938ef, #27115f); }
:root[data-theme="midnight"] .topbar .hdr-btn.hdr-changelog { background: #45967f; }
:root[data-theme="midnight"] .topbar .hdr-btn.hdr-bell { background: #ff6600; }
/* Light would bring the help button's blue to the brand green too: a third green in the row. */
:root:is([data-theme="midnight"], [data-theme="daylight"]) .topbar .hdr-btn.hdr-help { background: #188bf6; }
:root[data-theme="midnight"] .topbar .hdr-btn.ghost { background: rgba(255, 255, 255, .04); border-color: var(--line); }
:root[data-theme="midnight"] .shell-badge { border-color: #0f231a; background: #5fbf93; }
:root:is([data-theme="midnight"], [data-theme="daylight"]) .shell-avatar,
:root:is([data-theme="midnight"], [data-theme="daylight"]) .avatar { background: linear-gradient(135deg, #25543f, #2f7a58 55%, #3f9a70); color: #fff; }

/* ----- buttons ----- */
/* :where() keeps this at the specificity of the plain .btn rule, so a
   module's own button colours (danger, green, a toolbar's) still win. */
:root:is([data-theme="midnight"], [data-theme="daylight"]) .btn:where(:not(.ghost, .link)) {
  border-color: transparent;
  background: var(--action);
  box-shadow: 0 10px 26px -14px rgba(63, 154, 112, .85), inset 0 1px 0 rgba(255, 255, 255, .22);
}
:root:is([data-theme="midnight"], [data-theme="daylight"]) .btn:where(:not(.ghost, .link)):hover { filter: brightness(1.08); }
:root[data-theme="midnight"] .btn.ghost,
:root[data-theme="midnight"] .select { background: rgba(255, 255, 255, .04); border-color: rgba(130, 178, 154, .22); color: var(--text); }
:root[data-theme="midnight"] .btn.ghost:hover,
:root[data-theme="midnight"] .select:hover { border-color: rgba(130, 178, 154, .36); background: rgba(255, 255, 255, .06); }
:root[data-theme="midnight"] .btn.link { color: #8fd3b1; }
:root[data-theme="midnight"] .btn-group { border-color: rgba(130, 178, 154, .22); }
:root[data-theme="midnight"] .btn-group > button { background: rgba(255, 255, 255, .04); }

/* ----- fields ----- */
/* A field no stylesheet colours would get Chrome's own dark grey; :where()
   leaves every styled field's rules in charge. */
:root[data-theme="midnight"] :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), textarea, select) {
  background-color: #10221a; color: var(--text); border-color: rgba(130, 178, 154, .22);
}
:root[data-theme="midnight"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
:root[data-theme="midnight"] select,
:root[data-theme="midnight"] textarea { color-scheme: dark; }
:root[data-theme="midnight"] .field input,
:root[data-theme="midnight"] .field select,
:root[data-theme="midnight"] .field textarea {
  background: rgba(255, 255, 255, .035); border-color: rgba(130, 178, 154, .22); color: var(--text);
}
:root[data-theme="midnight"] .field input:focus,
:root[data-theme="midnight"] .field select:focus,
:root[data-theme="midnight"] .field textarea:focus {
  border-color: #5fbf93; box-shadow: 0 0 0 3px rgba(95, 191, 147, .18);
}
:root[data-theme="midnight"] input::placeholder,
:root[data-theme="midnight"] textarea::placeholder { color: #658173; }
:root[data-theme="midnight"] input[type="checkbox"],
:root[data-theme="midnight"] input[type="radio"],
:root[data-theme="midnight"] input[type="range"] { accent-color: #5fbf93; }
/* Chrome paints autofilled fields white. */
:root[data-theme="midnight"] input:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px #142920 inset;
  caret-color: var(--text);
}

/* ----- surfaces ----- */
:root[data-theme="midnight"] .card,
:root[data-theme="midnight"] .widget,
:root[data-theme="midnight"] .kpi { box-shadow: var(--shadow); }
:root[data-theme="midnight"] .shell-pop,
:root[data-theme="midnight"] .dlg {
  background: #11241c; border-color: rgba(130, 178, 154, .18);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .04);
}
:root[data-theme="midnight"] .gs { background: #11241c; border: 1px solid rgba(130, 178, 154, .18); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9); }
:root[data-theme="midnight"] .dlg-backdrop,
:root[data-theme="midnight"] .gs-back,
:root[data-theme="midnight"] .shell-drawer-back { background: rgba(2, 7, 4, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
/* A dialog opened over a builder that stays light (public/app.js openDialog
   sets data-keep-light) is light too, with Daylight's tokens. */
:root[data-theme="midnight"] .dlg-backdrop[data-keep-light] {
  color-scheme: light; color: #0f1a15; background: rgba(4, 19, 12, .38);
  --surface: #fff; --line: #e4e8e3; --line-soft: #eff2ed; --text: #0f1a15; --muted: #52605a; --hover: #f2f5f0; --red: #d92d20; --brand: #2f7a58; --brand-soft: #e9f4ee;
}
:root[data-theme="midnight"] .dlg-backdrop[data-keep-light] .dlg { background: #fff; border-color: #e1e8e4; box-shadow: 0 1px 2px rgba(7, 25, 17, .05), 0 24px 60px -20px rgba(7, 25, 17, .28); }
:root[data-theme="midnight"] .dlg-backdrop[data-keep-light] .dlg .btn.ghost { background: #fff; border-color: #dce5e0; color: #0f1a15; }
:root[data-theme="midnight"] .dlg-backdrop[data-keep-light] .dlg .btn.ghost:hover { background: #fbfcf9; border-color: #c3d3cb; }
:root[data-theme="midnight"] .dlg-backdrop[data-keep-light] .dlg :is(input, select, textarea) { background: #fff; border-color: #dce5e0; color: #0f1a15; color-scheme: light; }
/* Any other light-kept region (the workflow builder's dialogs, the previews):
   its text boxes, selects and textareas stay light too, since the generic
   rules above carry no keep-light exclusion. */
:root[data-theme="midnight"] [data-keep-light] :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea) { background: #fff; border-color: #dce5e0; color: #0f1a15; color-scheme: light; }
:root[data-theme="midnight"] [data-keep-light] :is(input, textarea)::placeholder { color: #667085; }
:root[data-theme="midnight"] .shell-drawer { background: #0f231a; box-shadow: -18px 0 50px rgba(0, 0, 0, .6); }
:root[data-theme="midnight"] .toast { background: #183428; color: var(--text); border: 1px solid rgba(130, 178, 154, .2); }

/* ----- scrollbars ----- */
:root[data-theme="midnight"] ::-webkit-scrollbar { width: 10px; height: 10px; }
:root[data-theme="midnight"] ::-webkit-scrollbar-track { background: transparent; }
:root[data-theme="midnight"] ::-webkit-scrollbar-thumb {
  background: rgba(130, 178, 154, .2); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box;
}
:root[data-theme="midnight"] ::-webkit-scrollbar-thumb:hover { background-color: rgba(130, 178, 154, .32); }

/* ----- the profile menu's appearance choice (public/shell.js) ----- */
.pm-theme { display: flex; gap: 4px; margin: 2px 6px 6px; padding: 3px; border-radius: 9px; background: var(--hover); }
.pm-theme button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 8px; border: 0; border-radius: 7px; background: none; color: var(--muted);
  font: inherit; font-size: 12.5px; font-weight: 600;
}
.pm-theme button[aria-pressed="true"] { color: #fff; background: linear-gradient(100deg, #1b3d2f, #2f7a58); }
.pm-label { margin: 8px 12px 4px; font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }