/* Shared UI for index.html and settings.html: scrollbars, dropdowns, pointer cursors.
   Uses each page's own colour tokens (--panel, --line, --text, --muted, --accent). Served at /ui/ui.css. */
:root {
  --scroll-thumb: #d0d5dd; --scroll-thumb-hover: #98a2b3;
  --menu-hover: #f2f4f7; --menu-shadow: 0 12px 32px rgba(16, 24, 40, .12), 0 2px 6px rgba(16, 24, 40, .06);
  --card-shadow: 0 6px 18px rgba(16, 24, 40, .08);
  --danger-strong: #c4321f;   /* filled danger buttons (white text) */
  /* page background: soft blue in the top-left fading to the normal grey towards the bottom-right */
  --page-grad: linear-gradient(135deg, #dce6ff 0%, #ecf1fd 35%, #f6f7f9 70%);
}
@media (prefers-color-scheme: dark) {
  :root {
    --scroll-thumb: #363c48; --scroll-thumb-hover: #4f5768;
    --menu-hover: #242a35; --menu-shadow: 0 12px 32px rgba(0, 0, 0, .5);
    --card-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    --danger-strong: #d33a2c;
    --page-grad: linear-gradient(135deg, #16244a 0%, #111a30 35%, #0f1115 70%);
  }
}

/* ---- page background: light blue gradient, top-left to bottom-right (both pages) ----
   Fixed to the window, so it stays the same however long the page is. `html body` outranks each page's own
   body { background } rule. Cards, header and dialogs keep their solid panel colour on top. */
html body { background: var(--page-grad) fixed, var(--bg); min-height: 100vh; }

/* ---- pinned header and tab bar (both pages) ----
   The header sticks to the top; the page's tab bar (.tabs on the call list, .ptabs on Settings) sticks right below it.
   --hdr-h is the header's real height, kept up to date by ui.js (it wraps to two lines on phones). The tab bar gets
   the same fixed gradient as the page, so it blends in while rows scroll underneath it. */
:root { --hdr-h: 65px; }
body > header { position: sticky; top: 0; z-index: 40; }
.tabs, .ptabs { position: sticky; top: var(--hdr-h); z-index: 30; background: var(--page-grad) fixed, var(--bg); }
html { scroll-padding-top: calc(var(--hdr-h) + 72px); }   /* keyboard focus / anchors land below the pinned bars */

/* ---- scrollbars: thin, rounded thumb, transparent track, no arrow buttons ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb-hover); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
}

/* ---- focus ring: the same blue outline on every field and control, both pages ----
   Text fields match :focus-visible whenever focused; buttons, links and checkboxes only when reached by keyboard. */
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible,
summary:focus-visible, [tabindex]:focus-visible, [contenteditable]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---- input boxes: border darkens on hover (both pages). Skipped while focused (the blue ring shows instead),
   when disabled, and for checkboxes/radios. Outranks the pages' own .class input/textarea border rules. ---- */
input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=hidden]),
textarea, select:not(.dd-native) { transition: border-color .15s ease, background-color .15s ease; }
input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=hidden]):hover:not(:focus, :disabled, [readonly]),
textarea:hover:not(:focus, :disabled, [readonly]), select:not(.dd-native):hover:not(:focus, :disabled) {
  border-color: color-mix(in srgb, var(--muted) 60%, var(--line));
  background-color: color-mix(in srgb, var(--menu-hover) 50%, var(--panel));
}

/* ---- pointer on everything clickable ---- */
button, summary, a[href], select, input[type=checkbox], input[type=radio], label:has(input[type=checkbox]),
label:has(input[type=radio]), [role=tab], tr.client, .dd-opt { cursor: pointer; }
button:disabled, .dd-opt[aria-disabled=true] { cursor: not-allowed; }

/* ---- dropdowns (ui.js turns every <select> into this; the select stays underneath and keeps its value) ---- */
.dd { position: relative; display: inline-flex; vertical-align: middle; }
.dd-native { position: absolute !important; inset: 0; width: 100% !important; opacity: 0; pointer-events: none; }
.dd-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px;
          padding: 6px 12px 6px 14px; font: inherit; color: var(--text); background: var(--panel);
          border: 1px solid var(--line); border-radius: 999px; }
.dd-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dd-btn:disabled { opacity: .45; }
.dd-label { display: grid; text-align: left; }
.dd-label > span { grid-area: 1 / 1; white-space: nowrap; }   /* every option stacked: the button is as wide as the longest */
.dd-label > span:not(.on) { visibility: hidden; }
.dd-chev { flex: none; color: var(--muted); transition: transform .15s ease; }
.dd.open .dd-chev { transform: rotate(180deg); }
.dd-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 60; min-width: 100%; max-height: 300px; overflow: auto;
           padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--menu-shadow); }
.dd.up .dd-menu { top: auto; bottom: calc(100% + 6px); }
.dd-opt { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 8px 10px 8px 12px;
          border-radius: 10px; color: var(--text); font-size: 14px; white-space: nowrap; }
.dd-opt.active { background: var(--menu-hover); }
.dd-opt[aria-disabled=true] { opacity: .45; }
.dd-check { flex: none; visibility: hidden; color: var(--text); }
.dd-opt[aria-selected=true] .dd-check { visibility: visible; }

/* ---- account menu: round initials avatar in the header; hover or click opens the menu (ui.js) ---- */
.um { position: relative; display: inline-flex; }
.um[hidden] { display: none; }
.um-btn, .um-av { display: inline-grid; place-items: center; flex: none; border-radius: 50%; color: #fff; font-weight: 600;
                  letter-spacing: .02em; background: var(--accent-strong, var(--accent)); user-select: none; }
.um-btn { width: 36px; height: 36px; padding: 0; font-family: inherit; font-size: 14px; line-height: 1; border: 2px solid var(--panel);
          box-shadow: 0 0 0 1px var(--line); transition: box-shadow .15s ease, filter .15s ease; }
.um .um-btn:hover, .um.open .um-btn { box-shadow: 0 0 0 2px var(--accent); filter: brightness(1.08);
                                     background: var(--accent-strong, var(--accent)); }  /* beats pages' button:hover */
.um-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.um-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; min-width: 240px; max-width: min(320px, calc(100vw - 32px));
           padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--menu-shadow); }
.um-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }  /* hover bridge to the avatar */
.um-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.um-av { width: 34px; height: 34px; font-size: 13px; }
.um-id { min-width: 0; }
.um-name { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-email { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-menu [role=menuitem] { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; margin: 0;
           font: inherit; font-size: 14px; color: var(--text); text-align: left; text-decoration: none;
           background: none; border: 0; border-radius: 10px; }
.um-menu [role=menuitem][hidden] { display: none; }
.um-menu [role=menuitem]:hover, .um-menu [role=menuitem]:focus-visible { background: var(--menu-hover); outline: none; }
.um-menu [role=menuitem] svg { flex: none; color: var(--muted); }
.um-menu .um-danger { color: var(--bad, #d92d20); }
.um-menu .um-danger svg { color: currentColor; }

/* ---- confirm / alert modal (uiConfirm, uiAlert in ui.js) ---- */
dialog.uim { width: min(440px, calc(100vw - 32px)); padding: 0; margin: auto; color: var(--text); background: var(--panel);
             border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--menu-shadow); }
dialog.uim::backdrop { background: rgba(10, 12, 16, .55); backdrop-filter: blur(2px); }
dialog.uim[open] { animation: uim-in .14s ease-out; }
@keyframes uim-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog.uim[open] { animation: none; } }
.uim-box { display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 16px; margin: 0; }
.uim-title { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.uim.error .uim-title { color: var(--bad, #d92d20); }
.uim-body { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.uim-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.uim-field textarea { font: inherit; font-size: 14px; color: var(--text); background: var(--bg, var(--panel)); resize: vertical;
                      min-height: 64px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.uim-field textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.uim-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.uim-actions button { min-width: 84px; padding: 8px 14px; border-radius: 10px; font: inherit; font-weight: 500; }
.uim-actions button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.uim .uim-ok.primary, .uim .uim-ok.primary:hover:not(:disabled) { background: var(--accent-strong, var(--accent)); border: 1px solid var(--accent-strong, var(--accent)); color: #fff; }
.uim .uim-ok.danger, .uim .uim-ok.danger:hover:not(:disabled) { background: var(--danger-strong); border: 1px solid var(--danger-strong); color: #fff; }
.uim .uim-ok:hover:not(:disabled) { filter: brightness(1.1); }
@media (max-width: 480px) { .uim-actions button { flex: 1; } }

/* ---- plain buttons (Sync now, Refresh, Edit, …): hover fill and stronger border, both pages ----
   :where() keeps this at low specificity, so anything with its own look still wins: .primary, tabs, dropdowns,
   the avatar, menu items, segmented .on buttons. Link-style buttons (.linkbtn) are left alone. */
:where(button) { transition: background-color .15s ease, border-color .15s ease, color .15s ease, filter .15s ease; }
:where(button:not(.linkbtn)):hover:not(:disabled) {
  background: var(--menu-hover);
  border-color: color-mix(in srgb, var(--muted) 55%, var(--line));
}
:where(button:not(.linkbtn, .primary)):active:not(:disabled) { filter: brightness(.94); }

/* ---- page tabs (call list .tab, settings .ptab) and pill filters (.ftabs, e.g. follow-up types):
   hover tint, pressed state. :not(.active):hover outranks the pages' own button:hover. */
.tab, .ptab, .ftabs button { transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease, filter .15s ease; }
.tab:not(.active):hover, .ptab:not(.active):hover, .ftabs button:not(.on):hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  color: var(--text);
}
.tab.active:hover, .ptab.active:hover, .ftabs button.on:hover { filter: brightness(1.1); }
.tab:active, .ptab:active, .ftabs button:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .tab, .ptab, .ftabs button { transition: none; } .tab:active, .ptab:active, .ftabs button:active { transform: none; }
}

/* ---- table pagination footer (uiPager in ui.js) ---- */
.pager { position: sticky; left: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px 16px;
         flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.pager[hidden] { display: none; }
.pager-size { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--muted); font-weight: 400; }
.pager-size .dd-btn { min-height: 32px; padding: 4px 10px 4px 14px; font-size: 14px; }
.pager-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pager-info { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pager-nav { display: flex; align-items: center; gap: 4px; }
.pager-nav[hidden] { display: none; }
.pager .pager-btn { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 999px;
                    font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text); }
.pager .pager-btn.on, .pager .pager-btn.on:hover { background: var(--accent-strong, var(--accent)); border-color: var(--accent-strong, var(--accent)); color: #fff; font-weight: 500; }
.pager .pager-btn:disabled { opacity: .4; }
.pager-gap { min-width: 20px; text-align: center; }

/* ---- icons on tabs and buttons: add data-icon="name" to the element ----
   Drawn with CSS (a mask filled with currentColor) rather than an <svg> inside the button, so the icon survives
   code that rewrites a button's text (e.g. "Call selected (3)") and takes the text colour (white on blue, red on
   danger). Icons are simple line drawings (24×24, 2px stroke). Names: see the list below. */
[data-icon]::before { content: ""; display: inline-block; flex: none; width: 1.1em; height: 1.1em; margin-right: .45em;
                      vertical-align: -.2em; background-color: currentColor;
                      -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
[data-icon]:empty::before { margin-right: 0; }
.tab[data-icon]::before, .ptab[data-icon]::before { opacity: .85; }
.tab.active[data-icon]::before, .ptab.active[data-icon]::before { opacity: 1; }
[data-icon="dashboard"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1'/%3E%3C/svg%3E"); }
[data-icon="rupee"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12M6 8h12M6 13l8.5 8M6 13h3a5 5 0 0 0 0-10'/%3E%3C/svg%3E"); }
[data-icon="flag"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22V4M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1'/%3E%3C/svg%3E"); }
[data-icon="history"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8M3 3v5h5M12 7v5l4 2'/%3E%3C/svg%3E"); }
[data-icon="megaphone"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l18-5v12L3 14v-3zM11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E"); }
[data-icon="mail"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E"); }
[data-icon="sync"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 0 0-15-6.7L3 8M3 3v5h5M3 12a9 9 0 0 0 15 6.7l3-2.7M21 21v-5h-5'/%3E%3C/svg%3E"); }
[data-icon="refresh"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-3-6.7L21 8M21 3v5h-5'/%3E%3C/svg%3E"); }
[data-icon="phone"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
[data-icon="x"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); }
[data-icon="check"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
[data-icon="check-circle"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.1V12a10 10 0 1 1-5.9-9.1M22 4 12 14l-3-3'/%3E%3C/svg%3E"); }
[data-icon="filter"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 3H2l8 9.5V19l4 2v-8.5L22 3z'/%3E%3C/svg%3E"); }
[data-icon="download"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E"); }
[data-icon="send"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13M22 2l-7 20-4-9-9-4 20-7z'/%3E%3C/svg%3E"); }
[data-icon="plus"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
[data-icon="edit"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z'/%3E%3C/svg%3E"); }
[data-icon="trash"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E"); }
[data-icon="eye"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
[data-icon="plug"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-5M9 8V2M15 8V2M18 8v5a6 6 0 0 1-12 0V8h12z'/%3E%3C/svg%3E"); }
[data-icon="users"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3C/svg%3E"); }
[data-icon="activity"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-4l-3 9L9 3l-3 9H2'/%3E%3C/svg%3E"); }
[data-icon="zap"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E"); }
[data-icon="copy"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E"); }
[data-icon="key"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='5.5'/%3E%3Cpath d='m11.5 11.5 9-9M16 7l3 3M19 4l2 2'/%3E%3C/svg%3E"); }
[data-icon="arrow-left"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E"); }
[data-icon="undo"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7v6h6M21 17a9 9 0 0 0-15-6.7L3 13'/%3E%3C/svg%3E"); }
[data-icon="search-check"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3M8 11l2 2 4-4'/%3E%3C/svg%3E"); }
[data-icon="login"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M15 12H3'/%3E%3C/svg%3E"); }
[data-icon="lock"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }
[data-icon="shield"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E"); }
[data-icon="user"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3C/svg%3E"); }
[data-icon="settings"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E"); }
[data-icon="search"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); }

/* ---- toast messages (uiToast in ui.js) ---- */
.toasts { position: fixed; top: calc(var(--hdr-h, 65px) + 12px); right: 16px; z-index: 90; display: flex; flex-direction: column;
          gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.toast { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px 14px 14px; overflow: hidden;
         background: var(--panel); color: var(--text); border: 1px solid var(--line); border-left: 4px solid var(--tc);
         border-radius: 12px; box-shadow: var(--menu-shadow); pointer-events: auto; animation: toast-in .2s ease-out; }
.toast.success { --tc: var(--ok, #15803d); } .toast.error { --tc: var(--bad, #b42318); }
.toast.warning { --tc: var(--warn, #b45309); } .toast.info { --tc: var(--accent, #2f5bea); }
.toast-ic { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--tc);
            background: color-mix(in srgb, var(--tc) 14%, transparent); }
.toast-ic::before { margin: 0; width: 14px; height: 14px; vertical-align: 0; }
.toast-body { flex: 1; min-width: 0; padding-top: 2px; }
.toast-title { font-weight: 600; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.toast-msg { margin-top: 2px; font-size: 13px; color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; white-space: pre-line; }
.toast .toast-x { flex: none; width: 24px; height: 24px; padding: 0; display: inline-grid; place-items: center; border: 0;
                  background: none; color: var(--muted); border-radius: 6px; }
.toast .toast-x:hover { background: var(--menu-hover); color: var(--text); }
.toast-x::before { margin: 0; width: 14px; height: 14px; vertical-align: 0; }
.toast-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--tc); opacity: .45;
             transform-origin: left; animation: toast-bar linear forwards; }
.toast.paused .toast-bar { animation-play-state: paused; }
.toast.out { animation: toast-out .2s ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(24px); } }
@keyframes toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .toast, .toast.out { animation: none; } }

/* ---- loading: spinner on the button that started a request, thin bar at the top (ui.js) ---- */
.is-busy { pointer-events: none; cursor: progress; opacity: .85; }
.is-busy::after { content: ""; display: inline-block; flex: none; width: .9em; height: .9em; margin-left: .5em; vertical-align: -.12em;
                  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ui-spin .7s linear infinite; }
.ui-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000; pointer-events: none; opacity: 0;
               background: linear-gradient(90deg, transparent, var(--accent-strong, #3459e6), transparent);
               background-size: 40% 100%; background-repeat: no-repeat; transition: opacity .2s; }
.ui-progress.on { opacity: 1; animation: ui-bar 1.1s ease-in-out infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
@keyframes ui-bar { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) { .is-busy::after { animation-duration: 2s; } .ui-progress.on { animation: none; } }

/* ---- theme switch (header, left of the avatar) ---- */
.theme-sw { position: relative; width: 52px; height: 28px; padding: 0; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel); flex: none; margin-left: auto; margin-right: 10px; vertical-align: middle; }
.theme-sw::before, .theme-sw::after { content: ""; position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  background: var(--muted); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.theme-sw::before { left: 8px; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E"); }
.theme-sw::after { right: 8px; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E"); }
.theme-sw::before, .theme-sw::after { z-index: 2; transition: background .2s; }
.theme-sw[aria-checked="false"]::before, .theme-sw[aria-checked="true"]::after { background: var(--accent); }
.theme-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; z-index: 1;
  background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  box-sizing: border-box; transition: transform .2s ease; }
.theme-sw[aria-checked="true"] .theme-knob { transform: translateX(24px); }
.theme-sw:hover { border-color: var(--accent); }

/* ---- calling mode badge, bottom-left of the window (call list) ---- */
.mode-badge { position: fixed; left: 16px; bottom: 16px; z-index: 35; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid; box-shadow: var(--card-shadow); cursor: help; }
.mode-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.mode-badge.live { color: var(--bad); background: var(--bad-bg); border-color: var(--bad); }
.mode-badge.live::before { animation: mode-pulse 1.6s ease-in-out infinite; }
.mode-badge.mock { color: var(--warn); background: var(--warn-bg); border-color: var(--warn); }
.mode-badge small { font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .85; }
@keyframes mode-pulse { 50% { opacity: .3; } }

/* ---- PayPilot logo + wordmark in the header (both pages) ----
   Logo and name are sized as one lockup: the logo's height matches the wordmark's cap-to-baseline height plus a
   little, the gap is tight, and "Pilot" uses the logo's own cyan-to-blue gradient. */
header .brand { display: flex; align-items: center; gap: 8px; }
.brand-logo { height: 32px; width: auto; flex: none; display: block; object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(20, 110, 255, .25)); }
.brand-link { display: inline-flex; flex: none; }
header h1.wordmark { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1; margin: 0; }
header h1.wordmark span { background: linear-gradient(100deg, #19c8f5 0%, #1f7bff 55%, #1f4fe0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-color-scheme: dark) {
  header h1.wordmark span { background-image: linear-gradient(100deg, #3fe0ff 0%, #4a9bff 55%, #5b7cff 100%); }
}
/* Settings: same logo size, title sized to sit with it */
header .title .brand-link { margin-right: -4px; }
header .title h1 { font-size: 20px; font-weight: 750; letter-spacing: -.01em; line-height: 1.1; }