/* CEF Control — styles copied from the Stream Delivery panel (src/app/globals.css + its Tailwind usage), as plain CSS.
   Same tokens, same primitives (.card .btn .btn-primary .btn-danger .input .label .th .td .pill), same light/dark rule:
   dark is a CHOICE set by the header toggle (data-theme="dark" on <html>), never prefers-color-scheme. */
/* The panel's fonts, served by the panel itself (#564): with Google's copy, the columns of every list changed whenever the font came late or not at all. Geist and Geist Mono, SIL Open Font License, fonts/LICENSE.txt. */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 700; font-display: block; src: url(/fonts/geist-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 700; font-display: block; src: url(/fonts/geist-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 700; font-display: block; src: url(/fonts/geist-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 700; font-display: block; src: url(/fonts/geist-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 700; font-display: block; src: url(/fonts/geist-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: block; src: url(/fonts/geist-mono-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: block; src: url(/fonts/geist-mono-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: block; src: url(/fonts/geist-mono-symbols2.woff2) format('woff2'); unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: block; src: url(/fonts/geist-mono-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: block; src: url(/fonts/geist-mono-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: block; src: url(/fonts/geist-mono-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  color-scheme: light;
  --header-h: 59px;
  --toolbar-h: 0px;
  --bg: #f6f7f9; --panel: #ffffff; --border: #e2e5ea; --text: #14181f; --muted: #666f7d;
  --accent: #1f6feb; --accent-fg: #ffffff; --accent-bg: #e9f0fd;
  --decide-bg: #fffbe8; /* To decide rows: very light yellow (Carlos, 2026-10-22) */
  --ok: #17803d; --ok-bg: #e8f6ec; --warn: #a35200; --warn-bg: #fdf0e3; --danger: #b42318; --danger-bg: #fdeceb;
  --btn-hover: #e5eefc;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1117; --panel: #151b23; --border: #262d38; --text: #e6e9ee; --muted: #8d97a5;
  --accent: #4c8dff; --accent-fg: #08101f; --accent-bg: #141f33;
  --decide-bg: #26220f;
  --ok: #57d07f; --ok-bg: #12281a; --warn: #e0a458; --warn-bg: #2b2013; --danger: #f0776b; --danger-bg: #2c1614;
  --btn-hover: #1c2740;
}
.theme-dark-only { display: none; }
:root[data-theme="dark"] .theme-dark-only { display: revert; }
:root[data-theme="dark"] .theme-light-only { display: none; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.45; }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
.mono { font-family: "Geist Mono", ui-monospace, monospace; }
.muted { color: var(--muted); } .tabular { font-variant-numeric: tabular-nums; }

/* Header (Stream Delivery layout: logo · left nav · right nav · account) */
header.top { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--border); background: var(--panel); }
.top-in { max-width: 80rem; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 12px 16px; }
.top-in .logo { display: flex; align-items: center; align-self: stretch; } .top-in .logo img { height: 28px; width: auto; display: block; }
nav.main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 14px; }
nav.main a { color: var(--muted); padding: 6px 10px; border-radius: 6px; text-decoration: none; }
nav.main a:hover { color: var(--text); background: var(--bg); }
nav.main a.on { color: var(--text); background: var(--accent-bg); font-weight: 500; }
nav.right { margin-left: auto; }
.account { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }

main { max-width: 80rem; margin: 0 auto; padding: 24px 16px 48px; }
footer.foot { max-width: 80rem; margin: 0 auto; padding: 16px; color: var(--muted); font-size: 12px; }

/* Page header */
.ph { margin-bottom: 20px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ph h1 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.ph p { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.ph .actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Primitives */
.card { border-radius: 8px; border: 1px solid var(--border); background: var(--panel); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel); color: var(--text); padding: 6px 12px; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color .15s; text-decoration: none; }
.btn:hover { background: var(--btn-hover); text-decoration: none; }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn-primary { border-color: transparent; background: var(--accent); color: var(--accent-fg); } .btn-primary:hover { background: var(--accent); opacity: .9; }
.btn-danger { border-color: transparent; background: var(--danger); color: #fff; } .btn-danger:hover { background: var(--danger); opacity: .9; }
.input { width: 100%; border-radius: 6px; border: 1px solid var(--border); background: var(--panel); color: var(--text); padding: 8px 12px; font: inherit; font-size: 14px; outline: none; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
textarea.input { resize: vertical; min-height: 72px; }
.label { margin-bottom: 4px; display: block; font-size: 12px; font-weight: 500; color: var(--muted); }
.pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 8px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.p-ok { background: var(--ok-bg); color: var(--ok); } .p-warn { background: var(--warn-bg); color: var(--warn); }
.p-danger { background: var(--danger-bg); color: var(--danger); } .p-accent { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.p-mute { background: var(--border); color: var(--muted); }

/* Stat cards (dashboard) */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat { padding: 16px; display: block; color: var(--text); text-decoration: none; }
.stat:hover { text-decoration: none; border-color: var(--accent); }
/* The dashboard for users other than the super admin: links without an address, tiles that keep still (task #317, viewOnly() in app.js). */
a.ro-link { cursor: default; text-decoration: none; } .ro-stat:hover { border-color: var(--border); }
.stat .k { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.stat .v { font-size: 22px; font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; }
.stat .s { font-size: 12px; color: var(--muted); margin-top: 4px; }
.stat.ok { background: var(--ok-bg); border-color: transparent; } .stat.warn { background: var(--warn-bg); border-color: transparent; }
.stat.danger { background: var(--danger-bg); border-color: transparent; } .stat.accent { background: var(--accent-bg); border-color: transparent; }
.box { padding: 16px; } .box h3 { margin: 0; font-size: 14px; font-weight: 600; } .box .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.box-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.card:not(.box) > .box-h { padding: 12px 16px 0; } /* a card holding a table edge to edge */
.list-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 14px; }
.list-row:first-child { border-top: 0; } .list-row .r { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }

/* Disclosure ("+ Add …" panel that never competes with the table) */
details.disc { margin-bottom: 20px; }
summary { cursor: pointer; }
fieldset { border: 0; padding: 0; margin: 0; }
details.disc > summary { list-style: none; padding: 12px 16px; font-size: 14px; font-weight: 500; }
details.disc > summary::-webkit-details-marker { display: none; }
details.disc > summary .plus { color: var(--accent); display: inline-block; transition: transform .15s; margin-right: 8px; }
details.disc[open] > summary .plus { transform: rotate(45deg); }
details.disc .disc-body { border-top: 1px solid var(--border); padding: 16px; }

/* Forms */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.form-grid .full { grid-column: 1 / -1; }
.hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.err { color: var(--danger); font-size: 13px; }

/* Filter bar */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0; margin-top: -12px; position: sticky; top: var(--header-h); z-index: 30; background: var(--bg); }
.toolbar .search { width: 240px; }
.input.search::-webkit-search-cancel-button { -webkit-appearance: none; width: 12px; height: 12px; cursor: pointer; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 1.5l9 9m0-9l-9 9' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; } /* the clear x: the colour of the typed word, white on the blue box, 20% bigger (#552, UI kit box 3) */
.seg { display: inline-flex; gap: 6px; flex-wrap: wrap; } .seg .btn.on { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
.toolbar .end { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.toolbar > .search + span { font-size: 13px; color: var(--muted); } /* a list's total, right after the search (#579, rule 7c) */
.toolbar select.input { width: auto; }
.toolbar input.input[type="date"] { width: auto; } /* a date box in a top row is as wide as its date, beside the other controls (Carlos, 2026-11-01: "place all fields in same top row") */

/* Tables. Column headers stick under the toolbar, which sticks under the header (heights measured in app.js).
   Sticky goes on the cells (a sticky <tr> is ignored) and each carries its own background. The scroll wrapper is
   dropped on wide screens, because a wrapper with overflow becomes the box a sticky cell sticks to. */
.table-wrap { overflow-x: auto; }
@media (min-width: 1024px) { .table-wrap { overflow: visible; } .th-stick { position: sticky; top: calc(var(--header-h) + var(--toolbar-h)); z-index: 20; } .card:has(.th-stick) { overflow: visible; }
  /* Every table's title row sticks under the top bar and the toolbar (task #409; Carlos, 2026-10-26: "top title bar in all tables, make sticky top"). */
  #app table.t > thead th { position: sticky; top: calc(var(--header-h) + var(--toolbar-h)); z-index: 20; } #app .card:has(table.t) { overflow: visible; } }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
.th { padding: 8px 10px; text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text); background: var(--bg); white-space: nowrap; cursor: pointer; user-select: none; }
.th.sorted::after { content: " ▲"; font-size: 9px; } .th.sorted.desc::after { content: " ▼"; }
.td { padding: 8px 10px; vertical-align: middle; border-top: 1px solid var(--border); }
tr.r:hover .td { background: color-mix(in srgb, var(--bg) 60%, transparent); }
tr.r.decide-row .td { background: var(--decide-bg); } tr.r.decide-row:hover .td { background: color-mix(in srgb, var(--decide-bg) 80%, var(--bg)); }
tr.dim .td { opacity: .55; }
.td.name { font-weight: 500; min-width: 210px; } .td.tabular { white-space: nowrap; } .td .fn { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.td.actions { text-align: right; white-space: nowrap; } .td.actions a { font-size: 13px; } .td.actions > :not(:first-child) { margin-left: 14px; } .td.actions .btn { vertical-align: middle; }
.trunc { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty { padding: 40px 12px; text-align: center; font-size: 14px; color: var(--muted); }
.note { font-size: 12px; color: var(--muted); margin-top: 8px; }
.pager { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }

/* Detail page */
/* Record cards: one box per row, every page and company (Carlos, 2026-11-03, UI kit box 4: "change 4 (record card) for one box per row", rule 11a) — dgrid, dgrid3 and dgrid1 draw alike. */
.dgrid, .dgrid.dgrid3, .dgrid.dgrid1 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } /* one box per row, full width (the Services card, 2026-11-02) */ /* a record card's field boxes in one row (Leads, 2026-10-27) */
dl.kv { display: grid; grid-template-columns: 150px 1fr; gap: 8px 12px; margin: 10px 0 0; font-size: 14px; }
dl.kv dt { color: var(--muted); } dl.kv dd { margin: 0; word-break: break-word; }

@media (max-width: 1300px) { .hide-l { display: none; } }
@media (max-width: 900px) {
  .dgrid, .form-grid { grid-template-columns: 1fr; } .dgrid > *, fieldset { min-width: 0; }
  dl.kv { grid-template-columns: 1fr; } dl.kv dt { margin-top: 6px; }
  .toolbar { position: static; } .toolbar .end { margin-left: 0; flex-wrap: wrap; max-width: 100%; }
  .list-row { flex-wrap: wrap; } .list-row .r { white-space: normal; max-width: 100%; } .toolbar .tot-sales { white-space: normal; } /* never wider than a phone; a table scrolls in its own box (#580) */
  .hide-m { display: none; }
}

/* Tasks: drag handle, tick, tag fields with autofill, undo toast */
table.tasks .td { vertical-align: top; }
tr.leaving .td { opacity: .35; transition: opacity .2s; }
.chk { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--ok); cursor: pointer; }
.tagcell { display: flex; flex-wrap: wrap; gap: 4px; max-width: 260px; }
button.pill { border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 500; }
button.pill:hover { outline: 1px solid var(--accent); }
.tagf { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 38px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel); padding: 4px 8px; cursor: text; }
.tagf:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.tagf-in { flex: 1; min-width: 120px; border: 0; outline: none; background: transparent; color: var(--text); font: inherit; font-size: 14px; padding: 4px 2px; }
.chip { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 12px; font-weight: 500; background: var(--accent-bg); color: var(--accent); }
.chip button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 4px; }
.sugg { position: absolute; left: -1px; right: -1px; top: 100%; margin-top: 4px; z-index: 50; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 260px; overflow: auto; }
.sg { padding: 7px 12px; cursor: pointer; font-size: 14px; } .sg.on, .sg:hover { background: var(--accent-bg); }
.seg.prio .btn.on { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px);
  background: var(--text); color: var(--bg); padding: 10px 12px 10px 16px; border-radius: 8px; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.toast[hidden] { display: none; }
.toast .btn { padding: 4px 10px; }
.folders { display: grid; gap: 6px; font-size: 13px; padding: 4px 0; }
#tagf { flex-wrap: wrap; justify-content: flex-end; } #tagf .btn { padding: 4px 10px; }

/* Rule for ALL tables (Carlos, 2026-10-20): a solid line right under the header row, which stays with it while it sticks.
   Borders only travel with sticky cells when the table's borders are separate, not collapsed. */
table.t { border-collapse: separate; border-spacing: 0; }
.th { border-bottom: 2px solid color-mix(in srgb, var(--text) 35%, transparent); }

/* Tasks table: inline editing (Carlos, 2026-10-20) — cells look like text until hovered; changes save by themselves */
.ed { cursor: text; border-radius: 4px; padding: 1px 4px; margin: -1px -4px; outline: none; }
.ed:hover, .ed:focus-visible { background: var(--accent-bg); }
.ed-title { font-weight: 500; color: var(--text); }
.ed-desc:empty { display: none !important; }
tr.r:hover .ed-desc:empty { display: block !important; }
.ed-desc:empty::before { content: "+ Add description"; color: var(--muted); font-style: italic; }
/* Task lists: title only; ▸ opens the description below it (accordion, Carlos 2026-10-22). */
.ttl-line { display: flex; align-items: flex-start; gap: 4px; }
.dtog { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 13px; line-height: 1.4; padding: 1px 4px; border-radius: 4px; transition: transform .15s ease; flex: none; }
.dtog:hover { color: var(--text); background: var(--accent-bg); }
.dtog[aria-expanded="true"] { transform: rotate(90deg); color: var(--text); }
.dtog.empty { opacity: .35; }
.desc-box { margin: 4px 0 2px 22px; padding-left: 8px; border-left: 2px solid var(--accent-bg); animation: desc-open .18s ease; }
.desc-box .ed-desc:empty { display: block !important; }
tr.ro-row .desc-box .ed-desc:empty::before { content: "No description"; }
@keyframes desc-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ed.editing { background: none; padding: 0; margin: 0; display: block !important; -webkit-line-clamp: unset; overflow: visible; }
.cell-in { padding: 4px 8px; font-size: 14px; } textarea.cell-in { min-height: 60px; font-size: 13px; }
.tagedit { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 1px 5px; border-radius: 4px; opacity: .35; }
tr.r:hover .tagedit, .tagedit:focus-visible { opacity: 1; } .tagedit:hover { background: var(--accent-bg); color: var(--accent); }
.cell-tags { min-width: 220px; min-height: 32px; padding: 2px 6px; }
.prio-sel { border: 0; border-radius: 999px; padding: 2px 6px; font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; appearance: none; -webkit-appearance: none; text-align: center; }
.prio-sel:hover, .prio-sel:focus-visible { outline: 1px solid var(--accent); }
.th.sortable:hover { color: var(--accent); } .th.sortable.sorted { color: var(--accent); }
.links2 { font-size: 13px; line-height: 1.6; white-space: nowrap; }
.btn-sm { padding: 2px 8px; font-size: 12px; }

/* Inline editing in every table (Carlos, 2026-10-20): cells read as text, click to edit, saved by themselves */
.ec { cursor: text; border-radius: 4px; padding: 1px 4px; margin: -1px -4px; outline: none; min-height: 1.4em; }
.ec:hover, .ec:focus-visible { background: var(--accent-bg); }
.ec.fn { display: block; } .ec-empty { color: var(--muted); font-style: italic; opacity: 0; }
tr.r:hover .ec-empty, .ec:focus-visible .ec-empty { opacity: 1; }
.ec.editing { background: none; padding: 0; margin: 0; }
.ec-pen { color: var(--muted); font-size: 12px; margin-left: 4px; opacity: .35; } tr.r:hover .ec-pen { opacity: 1; }
.ec-sel.st-sel { border-radius: 999px; padding: 2px 8px; font-weight: 500; font-size: 12px; } /* client status: green Active, red Inactive */
.ec-sel.st-sel.p-ok { background: var(--ok-bg); color: var(--ok); } .ec-sel.st-sel.p-danger { background: var(--danger-bg); color: var(--danger); }
.ec-sel.st-sel option { background: var(--panel); color: var(--text); }
.ec-sel.k-sel { border-radius: 999px; padding: 2px 8px; font-weight: 500; font-size: 12px; } /* contact Type (research 2026-10-23) */
.ec-sel.k-sel option { background: var(--panel); color: var(--text); }
.ec-sel { border: 1px solid transparent; background: transparent; color: var(--text); font: inherit; font-size: 13px; border-radius: 6px; padding: 2px 4px; cursor: pointer; max-width: 160px; }
.ec-sel:hover, .ec-sel:focus { border-color: var(--border); background: var(--panel); outline: none; }
.ec-date { border: 1px solid transparent; background: transparent; color: var(--text); font: inherit; font-size: 13px; border-radius: 6px; padding: 2px 4px; width: 128px; }
.ec-date:hover, .ec-date:focus { border-color: var(--border); background: var(--panel); outline: none; }
.ec-date[value=""] { color: var(--muted); }
.ec-empty.ec-ph { opacity: .6; } /* a field-name hint (e.g. "Contact person") stays visible, not only on hover */
.pill-on { outline: 2px solid var(--accent); outline-offset: 1px; } /* the service chosen as filter */

/* Top menu grouped by area (Admin / Sales / Operations): click a group to open its pages */
.ngrp { position: relative; }
.ngrp-b { border: 0; background: none; font: inherit; font-size: 14px; color: var(--muted); padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.ngrp-b:hover, .ngrp.open > .ngrp-b { color: var(--text); background: var(--bg); }
.ngrp-b.on { color: var(--text); background: var(--accent-bg); font-weight: 500; }
.ngrp-b .caret { font-size: 10px; opacity: .7; }
.ndrop { display: none; position: absolute; top: calc(100% + 4px); left: 0; min-width: 170px; z-index: 50; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 4px; }
.ngrp.open > .ndrop { display: block; }
nav.main .ndrop a { display: block; padding: 8px 12px; border-radius: 6px; }
.ngrp:last-child .ndrop, nav.main.right .ndrop { left: auto; right: 0; } /* the last group and the right-hand menus (Panel ▾, company — task #414) open leftwards so they never leave the screen */
.ndrop .ngrp-b { width: 100%; padding: 8px 12px; text-align: left; } nav.main.right .ndrop .ndrop { top: -4px; right: calc(100% + 4px); min-width: 120px; } /* a sub-menu (Panel ▾ Theme, #586) opens beside its item */
#who a { display: flex; }
/* On a phone the top menu folds behind the hamburger (#581, rule 60e): the same menus, stacked, a group opening in place. */
#burger, #fold-co { display: none; }
@media (max-width: 900px) {
  .top-in { gap: 8px; padding: 8px 16px; } .top-in .logo { flex: none; }
  .account { order: 1; min-width: 0; margin-left: auto; }
  #burger { display: inline-flex; } #fold-co { display: inline; } #who { display: none; } #burger { width: 44px; height: 40px; } /* a finger's size */
  header.top.open #who { display: inline-flex; } #who a { padding: 9px; }
  nav.main { display: none; order: 2; flex: 1 0 100%; }
  header.top.open { max-height: 100vh; max-height: 100dvh; overflow-y: auto; }
  header.top.open nav.main { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
  nav.main.right { margin-left: 0; padding-top: 6px; border-top: 1px solid var(--border); }
  nav.main a, .ngrp-b { display: block; padding: 10px; font-size: 15px; }
  .ngrp-b { width: 100%; text-align: left; }
  .ndrop, nav.main.right .ndrop, .ngrp:last-child .ndrop, nav.main.right .ndrop .ndrop { position: static; min-width: 0; padding: 0 0 4px 12px; background: none; box-shadow: none; }
}

/* SEO analytics page (moved from cef-technology.com /admin/analytics/) */
.seo-n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.seo-h { margin: 8px 0 12px; font-size: 14px; font-weight: 600; }
.seo-site { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 10px 32px; align-items: start; margin-bottom: 16px; }
.seo-kpis { display: flex; gap: 18px; flex-wrap: wrap; margin: 10px 0 4px; }
.seo-kpis b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; } .seo-kpis span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.seo-period { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 10px; }
svg.seo-daily { width: 100%; height: 110px; display: block; margin: 6px 0 2px; }
svg.seo-daily rect.hit { fill: transparent; } svg.seo-daily .bar { fill: var(--accent); } svg.seo-daily g:hover .bar { opacity: .75; }
.seo-axis-line { stroke: var(--border); stroke-width: 1; }
.seo-axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.seo-lists { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 18px; }
.seo-lists > div { min-width: 0; }
.seo-lists h4 { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 8px 0 4px; }
.seo-lists ol { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.seo-lists li { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; border-bottom: 1px solid var(--border); }
.seo-lists li span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seo-find { margin: 8px 0 0; padding-left: 18px; font-size: 14px; } .seo-find li { margin-bottom: 6px; }
#seo-tip { position: fixed; pointer-events: none; background: var(--text); color: var(--bg); font-size: 13px; padding: 5px 9px; border-radius: 6px; display: none; z-index: 60; white-space: nowrap; }
@media (max-width: 900px) { .seo-site, .seo-lists { grid-template-columns: 1fr; } }

/* Accounting (2026-10-20): tabs + company switch, amounts right-aligned, report rows */
.ac-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 16px; }
.amt-in { color: var(--ok); } /* green text; red text is .m-loss */
.th.num, .td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
input.input.num { text-align: right; max-width: 140px; margin-left: auto; display: block; }
table.rep .td { padding-top: 6px; padding-bottom: 6px; }
table.rep .td.ind { padding-left: 28px; }
table.rep tr.rep-h .td { font-weight: 700; background: var(--bg); }
table.rep tr.rep-t .td { font-weight: 700; border-top: 2px solid var(--border); }
table.rep tr.rep-n .td { font-size: 15px; }
tr.sel .td { background: var(--accent-bg); }

/* Ref field on recurring invoices / drafts whose client sends a new reference per invoice (2026-10-20) */
.refbox { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.refbox .input { width: 230px; padding: 4px 8px; font-size: 13px; }
.refbox.need .input { border-color: var(--warn); background: var(--warn-bg); }
.refbox.ok .input { border-color: var(--ok); }

.rep-mark { white-space: nowrap; margin-top: 2px; }

/* Multi-selection and bulk actions (2026-10-20): row boxes, the selected-row tint and the bar at the bottom. */
.th { vertical-align: middle; } .th.bsel .bsel-h { vertical-align: middle; } /* "All" centred in the header row (2026-10-22) */
.bsel { width: 30px; } .bsel-h { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; line-height: 16px; } .bsel-h span { line-height: 16px; } /* column titles: All · Done (2026-10-22) */
.th-done { width: 40px; white-space: nowrap; } .list-row .bsel, .bsel-all { display: inline-flex; align-items: center; gap: 4px; margin-right: 4px; }
.bsel input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; vertical-align: middle; }
tr.r.bsel-on .td, .list-row.bsel-on { background: var(--accent-bg); }
.bulkbar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 55; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  max-width: calc(100vw - 32px); padding: 10px 14px; background: var(--panel); border: 1px solid var(--accent); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); font-size: 13px; }
.bulkbar .bset { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-left: 8px; border-left: 1px solid var(--border); }
.bulkbar .input { width: auto; max-width: 220px; padding: 4px 8px; }
body.has-bulk { padding-bottom: 80px; } body.has-bulk .toast { bottom: 84px; }
.bulkbar[hidden] { display: none; }

/* Users page (2026-10-21): permission menus coloured by level; the add form's page grid. */

/* To decide (2026-10-21): the three agree buttons — grey until agreed, green once. */
.votes { display: flex; gap: 6px; } .vote { min-width: 38px; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--muted); font-weight: 700; font-size: 12px; cursor: pointer; }
.vote.on { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); } .vote:disabled { cursor: not-allowed; opacity: .55; } .vote:not(:disabled):hover { border-color: var(--accent); }


/* Dialogs (2026-10-21: the proposal email). */
.modal-bg { position: fixed; inset: 0; z-index: 70; background: rgba(13,17,23,.45); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; overflow: auto; }
.modal { width: 100%; max-width: 640px; }

/* Bulletins (2026-10-21): text beside the email preview. */
.bu-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .bu-prev { width: 100%; height: 860px; position: sticky; top: 120px; border: 1px solid var(--border); border-radius: 8px; background: #f2f4f7; }
@media (max-width: 900px) { .bu-split { grid-template-columns: 1fr; } }

/* List picker (2026-10-21). */
.lp-list { max-height: 300px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; padding: 4px 0; }
.lp-row { display: flex; align-items: center; gap: 10px; padding: 7px 12px; cursor: pointer; } .lp-row:hover { background: var(--bg); } .lp-row .muted { margin-left: auto; font-size: 12px; }
.lp-new { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; } .lp-new .input { flex: 1; min-width: 220px; }
.lcell .pill { margin: 1px 2px 1px 0; }

/* Recipient options (2026-10-21): the box BEFORE its label, one per line, so it is clear which is ticked. */
.optlist { display: grid; gap: 6px; } .optlist label { display: flex; align-items: center; gap: 10px; cursor: pointer; } .optlist input { width: 16px; height: 16px; margin: 0; }

/* Bulletin editor (2026-10-22): toolbar, image thumbnails, ask-Claude box. */
.bu-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; } .bu-tools .btn { min-width: 36px; }
.bu-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; } .bu-thumb { position: relative; width: 120px; height: 60px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; cursor: pointer; background: var(--bg); }
.bu-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .bu-thumb:hover { outline: 2px solid var(--accent); }
.bu-x { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; line-height: 18px; padding: 0; }
.bu-ask { margin-top: 10px; } .bu-ask summary { font-weight: 600; } .bu-ask textarea { margin: 8px 0 6px; }

/* ＋ Button form (2026-10-22). */
.bu-btnform { border: 1px solid var(--accent); border-radius: 10px; padding: 12px 14px; margin: 0 0 8px; background: var(--panel); }
.bu-btn-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.bu-btn-sample { padding: 6px 0; } .bu-sbtn { display: inline-block; padding: 9px 18px; border-radius: 8px; background: #1f6feb; color: #fff; font-weight: 700; } .bu-sbtn.out { background: transparent; color: #1f6feb; border: 2px solid #1f6feb; padding: 7px 16px; }

/* AI image result (2026-10-22): the picture with the 2:1 band that becomes the banner. */
.bu-res { position: relative; margin-top: 10px; max-width: 420px; } .bu-res img { width: 100%; display: block; border-radius: 6px; } .bu-crop { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1 / 1; pointer-events: none; background: linear-gradient(rgba(0,0,0,.45) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.45) 75%); border-radius: 6px; }
/* Task areas and To decide (2026-10-22): area menu in the row (super admin), To decide box + CF / AV / CM buttons. */
.chkline { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.input.ro { background: transparent; border-color: transparent; padding-left: 0; }
/* Per-task voters (2026-10-22): the super admin's picker under the row's ✎, and the voter list on the task form. */
/* Full descriptions on every list (Carlos, 2026-10-22: "show the entire task description … apply on all lists"): line breaks kept, never cut. */
.ed-desc, .td .fn, .pre { white-space: pre-line; overflow-wrap: anywhere; } /* .pre: multi-line text on record pages (Platforms API access) */
/* Export menu: CSV · PDF under each page's Export button (2026-10-22). */
.exp-menu { position: absolute; z-index: 70; display: flex; flex-direction: column; gap: 6px; padding: 8px; min-width: 210px; box-shadow: 0 8px 24px rgba(0, 0, 0, .15); }
.exp-menu .btn { justify-content: flex-start; text-align: left; }
/* Theme button: sun / moon icon (2026-10-22). */
.btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; padding: 0; }
/* User card: rights table (2026-10-22) — one row per page, View · Create · Edit · Delete · Own only. */
.perm-t .perm-c { text-align: center; width: 90px; } .perm-t th.perm-c { cursor: pointer; } .perm-t th.perm-c:hover { color: var(--accent); }
.perm-t input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; } .perm-t input:disabled { cursor: not-allowed; opacity: .4; }
.perm-g { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--bg); padding-top: 10px; }
/* Read-only for users without Edit (2026-10-22): editable cells look like plain text. */
#app.ro .ec, #app.ro .ed, tr.ro-row .ed, tr.ro-row .ec { cursor: default; background: none !important; outline: none; }
#app.ro .ec-empty, tr.ro-row .ec-empty { display: none; }

/* Row delete = red trash can on every list (Carlos, 2026-10-22). */
a.trash, button.trash { color: var(--danger) !important; display: inline-flex; align-items: center; justify-content: center; padding: 3px; border-radius: 6px; border: 0; background: none; cursor: pointer; vertical-align: middle; }
a.trash:hover, button.trash:hover { background: var(--danger-bg); text-decoration: none; }
.tot-sales { white-space: nowrap; font-size: 14px; color: var(--text); } /* plain text (Carlos 2026-10-22) */
.sp-line { display: block; font-size: 13px; line-height: 1.35; margin-bottom: 2px; } .sp-add { font-size: 12px; } /* Services → Pricing */
.plan-box { border: 1px solid var(--border); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.plan-box[hidden] { display: none; } /* a closed box stays closed (the lead's New follow-up opens only with its button — Carlos, 2026-10-30) */
.plan-box .label { margin-top: 6px; } .plan-h { display: flex; justify-content: space-between; align-items: center; }
/* Sign-in users, horizontal (Carlos 2026-10-22): username · password · level · URL in one row; narrower → URL alone on line 2. */
.pu-list, .cond-row { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.pu-wide .pu-box { margin-top: 10px; }
.pu-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1.4fr; gap: 12px; align-items: start; }
@media (max-width: 1100px) { .pu-row { grid-template-columns: 1fr 1fr 1fr; } .pu-row .pu-url { grid-column: 1 / -1; } }
@media (max-width: 640px) { .pu-row { grid-template-columns: 1fr; } }
/* Pricing plans as horizontal tiles (Carlos 2026-10-22): Name · Description · Price · Period in one row. */
.sp-row { display: grid; grid-template-columns: 1fr 2.2fr 0.8fr 1fr; gap: 12px; align-items: start; }
.sp-row textarea { min-height: 38px; resize: vertical; }
@media (max-width: 1100px) { .sp-row { grid-template-columns: 1fr 0.8fr 1fr; } .sp-row .sp-desc { grid-column: 1 / -1; order: 9; } }
@media (max-width: 640px) { .sp-row { grid-template-columns: 1fr; } }
/* Conditions: one tile per row (Carlos 2026-10-22) — the field's name on the left, its text across the rest of the row. */
.cond-row > div { display: block; } /* no frame around each condition; its text box below the title, full width (Carlos 2026-10-22) */
.cond-row > div .label { display: block; margin: 0 0 4px; }
.cond-row textarea { width: 100%; }
/* Every text box grows with its text (autoGrow in app.js) — no vertical or horizontal scroll, lines wrap (Carlos 2026-10-22). */
textarea { overflow: hidden !important; resize: none; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 40px; }
/* Volume pricing tiers (Carlos 2026-10-22): Name · Volume range · Price ($) · Units (+ Unit) · Period in one row. */
.tier-row { display: grid; grid-template-columns: 1.1fr 1.1fr 0.8fr 1.7fr 1fr; gap: 12px; align-items: start; }
.money-in { display: flex; align-items: center; gap: 6px; } .money-in > span { color: var(--muted); font-weight: 600; }
.units { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.unit-in { display: inline-flex; align-items: center; gap: 2px; flex: 1 1 140px; } .unit-in .input { min-width: 0; }
#pems .unit-in, #pnems .unit-in { flex-basis: 240px; } /* a proposal's emails, as many as needed (2026-10-30) */
.unit-rm { border: 0; background: none; color: var(--danger); font-size: 16px; cursor: pointer; padding: 0 4px; }
/* The dashboard's red alert tiles (task "close the tiles"): × at the tile's top right; a closed tile is a ⚠ pill in the page header. */
.stat.danger { position: relative; } .stat .dash-x { position: absolute; top: 8px; right: 8px; line-height: 1; } .stat:has(.dash-x) .k { padding-right: 20px; }
button.pill { border: 0; font-family: inherit; cursor: pointer; }
@media (max-width: 1100px) { .tier-row { grid-template-columns: 1fr 1fr 1fr; } .tier-row > div:nth-child(4) { grid-column: 1 / -1; } }
@media (max-width: 640px) { .tier-row { grid-template-columns: 1fr; } }
.pref { display: inline-flex; gap: 14px; align-items: center; margin-left: auto; margin-right: 12px; font-size: 13px; } .pref label { display: inline-flex; gap: 6px; align-items: center; }
.pref .input { width: 70px; padding: 4px 8px; } .plan-h { gap: 8px; } /* proposal form: Preferred + Qty on each plan */
/* Every table title centred, panel-wide (Carlos 2026-10-22). */
.th, table.t th, #app table th { text-align: center !important; }
.td.td-c, .td.num.td-c { text-align: center; } /* centred data cells (Proposals: amount, status, valid until — Carlos 2026-10-22) */
/* Tile titles in blue, panel-wide (Carlos 2026-10-22): only a tile's own title (its first-level heading), e.g. "Service 1";
   headings inside a tile ("Pricing", "Volume pricing" within a service) keep the text colour. */
.card > h3, .card > .box-h > h3 { color: var(--accent); }
/* Data typed or chosen in a field — text boxes, menus, dates — is grey #878787 everywhere; titles, labels and instructions stay in
   the text colour (Carlos 2026-10-22). Coloured status / priority menus keep their own colours. Text boxes never get a resize grip. */
.input, select.input, textarea.input, .ec-sel:not(.st-sel), .ec-date, .cell-in, .lvl-other, .unit-in .input { color: #878787 !important; }
.input option, .ec-sel option { color: var(--text); }
textarea.input { resize: none; min-height: 40px; }
/* Smart search on long dropdowns (Carlos 2026-10-22). */
.smart { position: relative; } .smart-list { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 2px); max-height: 280px; overflow-y: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
/* A list filter that is not on its default is blue, like an "on" button (task lists, Carlos 2026-10-25); a menu shows it through its smart box. */
.input.f-on, .smart:has(+ select.f-on) > .input { background: var(--accent) !important; color: var(--accent-fg) !important; border-color: transparent !important; }
.smart-o { padding: 7px 12px; cursor: pointer; font-size: 14px; color: #878787; } .smart-o:hover, .smart-o.on { background: var(--accent-bg); color: var(--text); }
.smart-g { padding: 6px 12px 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

/* Tasks: Owner and Affects menus in the row (2026-10-23) */
table.tasks .owner-sel, table.tasks .aff-sel { max-width: 190px; }
table.tasks .owner-sel.own-agent { font-style: italic; }
.dec-td { text-align: center; }  /* To decide flag on the lists (2026-10-23) */
.td.td-c .ec, .td.td-c > div { text-align: center; justify-content: center; } /* short values centred in every list (2026-10-23) */
/* Big inline editing areas in every list (Carlos, 2026-10-23: "make it a big area, to be confortable"). */
.cell-in.cell-big { width: 100%; min-width: 260px; font-size: 15px; line-height: 1.45; padding: 8px 10px; }
textarea.cell-in.cell-big { min-height: 64px; resize: none; } textarea.cell-in.cell-tall { min-height: 200px; }
.ttl-line .ed.editing { flex: 1 1 auto; min-width: 0; } /* the task title editor fills its column */
/* Tick columns (Carlos, 2026-10-23): no word "All" — the select-all square carries a check symbol; "Done" centred like the
   other titles; both columns as narrow as possible so Task gets the space. */
.th.bsel, .td.bsel, .th-done, .td.td-done { width: 1%; padding-left: 6px; padding-right: 6px; text-align: center; }
.th-done { white-space: nowrap; }
input.ball { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0; border: 1.5px solid var(--muted); border-radius: 4px; cursor: pointer; vertical-align: middle;
  background: var(--panel) center / 12px 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23999' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
input.ball:checked { background-color: var(--accent); border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
input.ball:indeterminate { background-color: var(--accent-bg); border-color: var(--accent); }
table.tasks .owner-sel { max-width: 140px; } table.tasks .aff-sel { max-width: 110px; } /* narrower menus: more room for Task (2026-10-23) */
table.tasks .td.name, table.tasks .ed-title { font-weight: 400; } /* task titles in normal weight, not bold (Carlos, 2026-10-23) */
/* Task form rows (Carlos, 2026-10-23): Task | Priority · Description · Owner | Affects | Due · Repeats | Email · To decide | Voters */
.tf-row { display: grid; gap: 14px 16px; align-items: start; } .tf-1 { grid-template-columns: 1fr auto; } .tf-2 { grid-template-columns: 1fr 1fr; } .tf-3 { grid-template-columns: 1fr 1fr 1fr; }
.tf-row > * { min-width: 0; } .tf-1 .seg.prio { flex-wrap: nowrap; } .tf-1 .seg.prio .btn { padding-left: 12px; padding-right: 12px; }
@media (max-width: 640px) { .tf-1, .tf-2, .tf-3 { grid-template-columns: 1fr; } }
/* Add cards on every list follow the task card (Carlos, 2026-10-23: "apply this in all lists"): the main field with its short
   companions on the same row, long fields full width, short fields packed in rows. */
.tf-m2 { grid-template-columns: 2fr 1fr; } .tf-m3 { grid-template-columns: 2fr 1fr 1fr; } .tf-4 { grid-template-columns: repeat(4, 1fr); }
.tf-m4 { grid-template-columns: 2fr 1fr 1fr 1fr; } /* Task · Area · Affects · Priority on the one Tasks list's add card (task #441) */
@media (max-width: 640px) { .tf-m2, .tf-m3, .tf-m4, .tf-4 { grid-template-columns: 1fr; } }
/* Record cards with fields in rows (Clients, Carlos 2026-10-23: "improve the order and space of tiles"): full-width tiles, the
   rows of the add cards (.tf-row + .tf-2/3/4/m3), a muted label above each value; long text keeps its line breaks. */
/* Client contacts (Carlos, 2026-10-23): at the end of Identity — Contact name | Email | Position in one row, "+ Add contact";
   titles once above the rows; a phone stacks each contact with its labels. */
.cc-box { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.cc-h { margin-bottom: 2px; } .cc-h b { font-size: 14px; }
.cc-head, .cc-row { display: grid; grid-template-columns: 1fr 1fr 1fr 28px; gap: 8px 16px; align-items: center; }
.cc-head { margin-top: 12px; font-size: 13px; color: var(--muted); }
.cc-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.cc-box:has(.cc-list:empty) .cc-head { display: none; }
@media (max-width: 640px) { .cc-head { display: none; } .cc-row { grid-template-columns: 1fr; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
  .cc-cell::before { content: attr(data-l); display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; } .cc-row .trash { justify-self: end; } }
/* Client invoicing tiles (Carlos, 2026-10-23): read from its recurring invoices; Total invoicing on green. */
/* A distributor's clients (Carlos, 2026-10-23): Client | Service | Total sales | Per in one row on the Edit page, titles once above;
   a phone stacks each client with its labels. On the client's page a small table with the totals. */
.ecl-row { display: grid; grid-template-columns: minmax(0, 420px) 28px; gap: 8px 12px; align-items: center; } /* names only since 2026-10-23 (sales come from the invoices) */
.ecl-tot .td { border-top: 2px solid var(--border); }
@media (max-width: 640px) {  .ecl-row { grid-template-columns: 1fr; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .ecl-row .trash { justify-self: end; } }
/* "Its clients" table (Carlos, 2026-10-23: "clients column, not centered, align to left, not all the way"): the Client column —
   title and names — left-aligned with an indent, whatever centerShort() decides for short values. */
#app table.ecl-table th:first-child { text-align: left !important; padding-left: 22px; }
.ecl-table .td:first-child, .ecl-table .td.td-c:first-child { text-align: left; padding-left: 22px; }
/* Select column titled "Select" (Carlos, 2026-10-23 "Select all"; task #398, 2026-10-25: "Select", the column as narrow as its title):
   the box with SELECT beside it on one line; the rows' boxes line up under the header's (left, same indent). */
.th.bsel { white-space: nowrap; text-align: left; padding-left: 10px; padding-right: 6px; width: 1%; }
.th.bsel .bsel-h { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.td.bsel { text-align: left; padding-left: 10px; }
.bsel-all { display: inline-flex; align-items: center; gap: 6px; } 
/* Dashboard (Carlos, 2026-10-23): one section per menu group, one card per page, in menu order (dashboard() in app.js). */
/* A thick white line between the dashboard's sections (Carlos, 2026-10-27: "add a white divider between sections, make it thick"). */
.dash-g + .dash-g { border-top: 4px solid #fff; padding-top: 20px; }
/* Finance / Sales sections (2026-10-24): the section's own margin spaces them, not its last row's. */
.dash-g > :last-child { margin-bottom: 0; }
/* Row subtitles above each row (2026-10-24): normal text in capitals — Balance, Acid, Cashflow · <month>, Top 5. */
.dash-sub { font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: .05em; color: var(--text); margin: 0 0 8px; }
.dash-cf .cf-grid { margin-top: 0; }
.dash-gh { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; align-items: start; }
@media (min-width: 720px) { .dash-wide { grid-column: span 2; } }
.dash-c .box-h { margin-bottom: 6px; }
.dash-big { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.dash-cap { font-size: 13px; font-weight: 500; color: var(--muted); }
.dash-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 5px 0; border-top: 1px solid var(--border); font-size: 14px; }
.dash-kv .n { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.dash-kv.zero .n { color: var(--muted); }
.dash-kv.warn .n, .dash-t td.warn, .note.warn { color: var(--warn); font-weight: 600; }
.dash-kv.bad .n, .dash-t td.bad { color: var(--danger); font-weight: 600; }
.dash-lt { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin: 12px 0 2px; }
.dash-li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 5px 0; border-top: 1px solid var(--border); font-size: 14px; }
.dash-lt + .dash-li, .dash-body > .dash-li:first-child { border-top: 0; }
.dash-li .r { margin-left: auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.dash-t { width: 100%; border-collapse: collapse; font-size: 14px; }
.dash-t th { font-size: 12px; font-weight: 500; color: var(--muted); padding: 4px 8px 6px; white-space: nowrap; }
.dash-t td { padding: 7px 8px; border-top: 1px solid var(--border); text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Dashboard summary (Carlos, 2026-10-23): tiles (active clients / providers / services) then the two top-5 lists, side by side. */
.dash-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 28px; }
.dash-amt { color: var(--text); font-weight: 600; }
.dash-basis { font-size: 12px; color: var(--muted); text-align: right; } /* what a top 5 counts (dashboard) */
/* The Sales circle charts (task #419): five colours and a grey Others, checked for colour-blind readers on each theme's panel surface;
   2px of the surface between slices; the total in the middle; the legend uses the top 5 rows (.dash-li) with a colour key. */
:root { --dn1: #2a78d6; --dn2: #eb6834; --dn3: #1baf7a; --dn4: #eda100; --dn5: #e87ba4; --dn0: #4b5260; }
:root[data-theme="dark"] { --dn1: #3987e5; --dn2: #d95926; --dn3: #199e70; --dn4: #c98500; --dn5: #d55181; --dn0: #aab2bd; }
.dash-top.dash-2 { grid-template-columns: repeat(auto-fit, minmax(max(300px, calc(50% - 9px)), 1fr)); } /* two charts a row at most */
.dnut { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.dn-c { position: relative; width: 150px; height: 150px; flex: none; }
.dn-c svg { display: block; width: 100%; height: 100%; }
.dn-s { fill: none; stroke-width: 18; transition: stroke-width .15s; }
.dn-s:hover, .dnut:has([data-c="1"]:hover) .dn-1, .dnut:has([data-c="2"]:hover) .dn-2, .dnut:has([data-c="3"]:hover) .dn-3,
.dnut:has([data-c="4"]:hover) .dn-4, .dnut:has([data-c="5"]:hover) .dn-5, .dnut:has([data-c="0"]:hover) .dn-0 { stroke-width: 22; }
.dn-t { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.dn-t b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; } .dn-t span { font-size: 11px; color: var(--muted); }
.dn-l { flex: 1; min-width: 200px; } .dn-l > .dash-li:first-child { border-top: 0; }
.dn-k { width: 10px; height: 10px; border-radius: 2px; flex: none; align-self: center; }
.dn-1 { stroke: var(--dn1); background: var(--dn1); } .dn-2 { stroke: var(--dn2); background: var(--dn2); } .dn-3 { stroke: var(--dn3); background: var(--dn3); }
.dn-4 { stroke: var(--dn4); background: var(--dn4); } .dn-5 { stroke: var(--dn5); background: var(--dn5); } .dn-0 { stroke: var(--dn0); background: var(--dn0); }
.nowrap { white-space: nowrap; } /* keeps "CEF TECH −$32,753" on one line (dashboard Result tile) */
/* Dashboard tiles, bigger numbers and coloured money (Carlos, 2026-10-23): income green, expenses red, result blue (profit) / red (loss). */
.dash-tiles .stat .v { font-size: 30px; line-height: 1.15; }
.dash-tiles .stat .s { margin-top: 6px; }
.dash-money { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.dash-ml { font-size: 12px; color: var(--muted); margin-top: 2px; }
.dash-cos { font-size: 14px; color: var(--text); margin-top: 6px; } .dash-cos b { font-variant-numeric: tabular-nums; }
.m-pro { color: var(--accent); } .m-loss { color: var(--danger); } /* money by its sign, whole panel: colorMoney() in app.js */
/* Log sections full width on every page (Carlos, 2026-10-24): a record's "Change log" card and the dashboard's Log span the whole
   row of the grid they sit in (.dgrid, .dash-grid); outside a grid a card is full width anyway. */
/* A section alone in its row spans the whole row (Carlos, 2026-10-24, rule for every page; soloCards() in app.js). */
.pu-wide, .log-card, .solo { grid-column: 1 / -1; }
/* Dashboard Cashflow row (Carlos, 2026-10-24, redone): its own full-width row, five figures side by side, titles only. */
.dash-g, .dash-cf { margin-bottom: 24px; }
.cf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px 24px; margin-top: 12px; }
.cf-t { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.cf-n { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 4px; white-space: nowrap; }
/* Dashboard recurring row (Carlos, 2026-10-24): Incomes · Payments · Results, each Monthly · Yearly · Overall (monthly + yearly ÷ 12). */
.rc-per { font-size: 11px; font-weight: 500; color: var(--muted); margin-left: 3px; }
/* Acid rows titled on their left — Month · Year · Overall year (Carlos, 2026-10-25, task #381); the title keeps .dash-sub's look and
   lines up with the tiles' middle (.stats keeps its 24px under); on a phone it goes back above the row, as every row subtitle. */
.dash-rcrow { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: center; }
.dash-rcrow > .dash-sub { margin: 0 0 24px; }
@media (max-width: 900px) { .dash-rcrow { grid-template-columns: 1fr; gap: 0; } .dash-rcrow > .dash-sub { margin: 0 0 8px; } }
/* Recurring invoices card filters (Carlos, 2026-10-24): Client menu + All / Panel / PayPal. */
/* Smart search on every dropdown (Carlos, 2026-10-24): in-place menus of the lists keep their look (pills, colours) as a box. */
.smart-inl { display: inline-block; vertical-align: middle; } .smart-inl .smart-list { right: auto; min-width: 220px; }
/* Every dropdown list as wide as its longest choice, each on one line, within the screen (Carlos, 2026-10-28: "expand the dropdown field more, to
   allow all options fit well"); the code flips a list to the left when it would run off the right edge. */
.smart-list { right: auto; min-width: 100%; width: max-content; max-width: min(560px, 92vw); } .smart-inl .smart-list { min-width: max(220px, 100%); }
.smart-list .smart-o { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
input.smart-in { cursor: pointer; max-width: 180px; } input.smart-in:focus { cursor: text; }
input.ec-sel.smart-in { padding: 2px 6px; } input.prio-sel.smart-in { text-align: center; }
.smart-o.cur { font-weight: 600; color: var(--text); }
/* Accounting: Sync now ▾ on the right, under the add card (task #328). */
.ac-syncrow { display: flex; justify-content: flex-end; margin: 0 0 16px; }
/* A searchable menu near the bottom of the window opens upward (smartSelects place()). */
.smart-list.up { top: auto; bottom: calc(100% + 2px); }
/* Support list (task #308, Carlos 2026-10-26: "short data must be centered · make columns as narrow as possible"): centred titles of centred columns, narrow menus and texts. */
.th.th-c { text-align: center; } table.tk .ec-sel { max-width: 140px; } table.tk .trunc { max-width: 220px; } table.tk .fn .pill { margin-top: 2px; }
/* Support list, Carlos 2026-10-26: "delete the word select · adjust all columns as narrow as possible, give the most space to subject · align left the
   data in from column". Every column as narrow as its content; Subject takes the rest (width 100% + max-width 0 lets its text cut with "…"). */
table.tk .th, table.tk .td { width: 1%; white-space: nowrap; }
table.tk .th.tk-subj, table.tk .td.tk-subj { width: 100%; max-width: 0; }
table.tk .td.tk-subj .trunc { max-width: 100%; }
table.tk .td.tk-from .trunc { max-width: 160px; }
table.tk .td.tk-from, table.tk .td.tk-from > div, table.tk .td.tk-subj, table.tk .td.tk-subj > div { text-align: left !important; justify-content: flex-start !important; }
/* Carlos 2026-10-26: "center data in level, status and owner columns, make them as narrow as possible" — the menu's own text centred too. */
table.tk .td.tk-sel .ec-sel { text-align: center; text-align-last: center; padding: 2px 2px; }

/* ---------- Table standard (Carlos, 2026-10-27 — every table, existing and future; the rules: CONTROL-PANEL/PANEL-RULES.md) ---------- */
/* Narrow columns: short data, tick boxes and actions take only what they need (.td-n, set by centerShort after every draw); their titles
   may wrap; the long columns (the name first) share the rest of the width. */
#app table.t .td-n { width: 1%; white-space: nowrap; } #app table.t th.td-n { white-space: normal; }
/* Values — priority, level, status, type — are coloured text, never a bubble; their menus read like the task lists' Owner menu (plain,
   a border only on hover) in the value's colour. In a list, a cell's single pill is a value (several in one cell are tags, and filter
   buttons keep their look). */
#app :is(select, input):is(.prio-sel, .st-sel, .k-sel, .p-ok, .p-warn, .p-danger, .p-mute, .p-accent) { background: transparent !important; border: 1px solid transparent; border-radius: 6px; padding: 2px 4px; font-size: 13px; font-weight: 500; }
#app :is(select, input):is(.prio-sel, .st-sel, .k-sel, .p-ok, .p-warn, .p-danger, .p-mute, .p-accent):is(:hover, :focus) { border-color: var(--border); background: var(--panel) !important; outline: none; }
#app :is(select, input):is(.p-ok, .k-lead) { color: var(--ok) !important; } #app :is(select, input):is(.p-warn, .k-vendor, .k-personal) { color: var(--warn) !important; }
#app :is(select, input):is(.p-danger, .k-competitor) { color: var(--danger) !important; } #app :is(select, input).p-accent { color: var(--accent) !important; }
#app :is(select, input).p-mute { color: var(--muted) !important; }
#app table.t td:not(:has(.pill ~ .pill)) .pill:not(.platbtn), #app .toolbar > .search + span .pill:not(.platbtn) { background: none; padding: 0; border-radius: 0; font-size: 13px; }
/* Row actions: blue eye (view) · blue pencil (edit) · red trash can (delete). */
#app .td.actions a.act-ico, #app .list-row a.act-ico { color: var(--accent); display: inline-flex; align-items: center; padding: 3px; border-radius: 6px; vertical-align: middle; }
#app .td.actions a.act-ico:hover, #app .list-row a.act-ico:hover { background: var(--accent-bg); text-decoration: none; }
#app .td.actions > :is(.act-ico, .trash):not(:first-child) { margin-left: 4px; }
/* Dropdown menus in a list: their choice centred in the cell (RULE 2026-10-27; centerShort() marks the column .td-c). */
#app table.t .td.td-c :is(select, input.smart-in) { text-align: center; text-align-last: center; }
#app table.t .td.td-c .smart-list { text-align: left; }
/* Column widths (RULE 2026-10-27, fitTables() in app.js): measured with every cell on one line and the titles left out (.fit-m); then every
   cell stays on one line except the long columns that had to wrap (.fit-w). Multi-line text (.ed-desc, .fn, .pre) keeps its own rule. */
#app table.t.fit-m { width: auto !important; } #app table.t.fit-m td { white-space: nowrap !important; } #app table.t.fit-m th { font-size: 0 !important; }
#app table.t.fit td:not(.fit-w) { white-space: nowrap; } #app table.t.fit td.fit-w { white-space: normal; overflow-wrap: anywhere; }
/* The New mark of a lead (task #421; Carlos, 2026-10-27: "mark as New in green bold"). */
.ld-new { color: var(--ok); font-weight: 700; }
/* Values on a record's card are coloured text too, no bubble (rule "values in colour", 2026-10-27; task #426 Level). */
#app .kv dd .pill:not(.platbtn), #app .dash-li .pill:not(.platbtn), #app .kit-vals .pill { background: none; padding: 0; border-radius: 0; font-size: inherit; } /* + UI kit box 7 (2026-11-03) */
@media (max-width: 1000px) { .dgrid.dgrid3 { grid-template-columns: 1fr; } }
/* The View eye in the first column (RULE 2026-10-27, viewFirst() in app.js). */
#app table.t .view-c { width: 1%; padding-left: 8px; padding-right: 2px; text-align: center; white-space: nowrap; }
#app table.t td.view-c a.act-ico { color: var(--accent); display: inline-flex; align-items: center; padding: 3px; border-radius: 6px; vertical-align: middle; }
#app table.t td.view-c a.act-ico:hover { background: var(--accent-bg); text-decoration: none; }
/* A record card's title starts with its list: "Providers | Bing Webmaster Tools" (RULE 2026-10-27, parentOf() in app.js). */
/* The dashboard's title line and its alert tiles stay on top while scrolling, under the top bar like the lists' toolbar (Carlos, 2026-10-27:
   "make sticky top the line with dashboard title and compliance alerts"). */
/* .ph-stick: the same for the title, subtitle and buttons of every page with a form (RULE, Carlos, 2026-10-30: "for all pages with forms, make
   sticky top the top rows (title, sub title, buttons)" — first asked for the proposal's page); put on by stickHeads() in app.js. */
.ph-stick { position: sticky; top: var(--header-h); z-index: 30; background: var(--bg); padding-top: 12px; margin-top: -12px; display: flow-root; }
.ph h1[data-parent]::before { content: attr(data-parent) " | "; color: var(--muted); font-weight: 500; }
/* Internal notes (task #440): the editor (toolbar of btn-sm above a growing text box) and the notes shown formatted; a note its author may
   edit has the in-place look of .ec (text cursor, accent background on hover). */
.note-add { margin: 10px 0; }
.note-ed .note-tools { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.note-ed textarea { width: 100%; min-height: 9em; } /* 6 lines at least (Carlos, 2026-10-28: "expand the field size by 100%") */
.note-add-b { display: flex; align-items: center; gap: 10px; margin-top: 6px; } .note-add-b .hint { margin-top: 0; }
.list-row.note-row { align-items: flex-start; }
.note-txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.note-txt ul, .note-txt ol { margin: 2px 0; padding-left: 22px; }
.note-can { cursor: text; border-radius: 4px; padding: 1px 4px; margin: -1px -4px; }
.note-can:hover { background: var(--accent-bg); } .note-can.editing { background: none; padding: 0; margin: 0; cursor: auto; }
/* Every conversation's text box — the lead's Conversation and follow-ups, the support ticket's Answer, and any future one (class conv-ans):
   5 lines to start, growing as the text grows (RULE, Carlos, 2026-10-29: "keep then small (10 lines), and grow as text is added", then "reduce
   the text area to 5 lines both"; 20 lines since task #445). The growing is the panel's own (fitTA / autoGrow in app.js). */
.conv-ans { min-height: 8em; }
#ldfu { scroll-margin-top: calc(var(--header-h) + 96px); } /* the leads list's F.Up opens the card here, below the sticky title (2026-10-30) */
.sig-tile { background: #fff; padding: 12px 16px; border-radius: 8px; border: 1px solid var(--border); margin-top: 4px; } .sig-tile > table { margin-top: 0 !important; } /* an email signature as the reader sees it (My profile, follow-ups — 2026-10-30) */

/* A hidden group of rows inside a card's dl.kv (the invoice form's Client ref, task #544): its dt / dd sit in the grid as if they were not wrapped. */
dl.kv > .kv-g { display: contents; } dl.kv > .kv-g[hidden] { display: none; }
/* Panel ▾ UI kit (task #545 step 3): the kit page's own layout only — the parts it shows keep their classes above. */
.kit .card.box + .card.box { margin-top: 16px; } .kit .kit-help { margin-top: 0; } .kit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kit .box > .note:not(.kit-help) { margin: 18px 0 6px; } /* box 0, the master page: each module's label (#558) */
.kit details.disc { margin: 14px 0 0; } .kit .disc-body .hint { margin: 0; } .kit .stats { margin-bottom: 0; }
/* Form fields: the label on the left, one field per row (RULE 11o, Carlos, 2026-11-03 — Panel ▾ UI kit, box 5: "A"). Every field written as
   <div><label class="label">…</label><input | select | textarea | …></div> — the "Add …" forms, settings, editors, plan / tier / sign-in /
   follow-up boxes — is drawn as dl.kv is (invoices, record cards): the label 150 px on the left, its field, hint and error on the right, rows
   full width; the grids that held fields side by side hold one per row. On a phone the label goes above, as dl.kv does. */
div:has(> label.label:first-child) { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 12px; align-items: start; }
div:has(> label.label:first-child) > label.label:first-child { grid-column: 1; margin: 0; padding-top: 9px; font-size: 14px; font-weight: 400; color: var(--muted); }
div:has(> label.label:first-child) > :not(label.label:first-child) { grid-column: 2; }
.form-grid.form-grid, .tf-row.tf-row, .pu-row.pu-row, .sp-row.sp-row, .tier-row.tier-row, .dgrid:has(> div > label.label:first-child) { grid-template-columns: minmax(0, 1fr); }
div[hidden]:has(> label.label:first-child) { display: none; } /* a field hidden until needed stays hidden */
dl.kv dt:has(+ dd > .input:first-child) { padding-top: 9px; } /* a label beside a field box sits at the field's text, as above */
@media (max-width: 900px) {
  div:has(> label.label:first-child) { grid-template-columns: minmax(0, 1fr); }
  div:has(> label.label:first-child) > label.label:first-child { padding-top: 0; margin-top: 6px; }
  div:has(> label.label:first-child) > :not(label.label:first-child) { grid-column: 1; }
  dl.kv dt:has(+ dd > .input:first-child) { padding-top: 0; }
}
/* The pager's two links apart (pagerHtml — it was a hand-made style on Next, 2026-11-03). */
.pager a + a { margin-left: 12px; }
/* Fields (RULE 11r, Carlos, 2026-11-03: "every editable field must have its light grey border. if the field is not editable, then no border. Fit the widt
   of fields as full width"): on cards and forms an editable text or date field looks like a form box: the light grey border, full width; a value that
   cannot be edited, a read-only page and a disabled field have none. Dropdown menus: rule 11s, at the end of this file. */
#app:not(.ro) .ec:not(td *, .list-row *), #app .ec-date:not(td *, .list-row *, :disabled) {
  display: block; box-sizing: border-box; width: 100% !important; max-width: none; min-height: 38px; margin: 0; padding: 8px 12px; border: 1px solid var(--border) !important; border-radius: 6px; background-color: var(--panel); font-size: 14px; }
#app .ec.editing:not(td *, .list-row *) { border: 0 !important; padding: 0; min-height: 0; background: none; }
#app .input:disabled, #app .input[readonly] { border-color: transparent !important; background: transparent !important; padding-left: 0; }

/* Rule 7b (Carlos, 2026-11-03: "rule for ui kit, remove all filters in all tables. keep the smart search bar"): a list's toolbar shows only its search
   bar. A menu or a button group shows only with data-keep: the page size, a report's controls, a switch that decides which records the list holds. */
.toolbar select:not([data-keep]), .toolbar .smart:has(+ select:not([data-keep])), .toolbar .seg:not([data-keep]) { display: none !important; }
/* The search bar a table without one gets (rule 7b, tableSearch): it scrolls with its table; only the page's own toolbar stays on top. */
.toolbar:not(#toolbar) { position: static; z-index: auto; margin: 0; padding: 0 0 8px; background: none; }
.card:not(.box) > .toolbar:not(#toolbar) { padding: 8px 16px; }
/* Rule 11r in lists too (#550; Carlos, 2026-11-03, asked if list rows follow it: "yes"): an editable text or date field in a row has its light grey border and
   fills its cell; a read-only page or row has none; dropdown menus: rule 11s. No background, so a row's hover still shows. */
#app:not(.ro) :is(td, .list-row) :is(.ec, .ed):not(.ro-row *, .editing), #app :is(td, .list-row) .ec-date:not(:disabled, .ro-row *) {
  display: block; box-sizing: border-box; width: 100%; max-width: none; min-height: 28px; margin: 0; padding: 3px 8px; border: 1px solid var(--border) !important; border-radius: 6px; }
#app :is(td, .list-row) .ec-date:not(:disabled) { min-width: 128px; }
#app:not(.ro) td :is(.ec, .ed):not(.ro-row *, .editing) + :is(.ec, .ed) { margin-top: 4px; }
/* Rule 11s (Carlos, 2026-11-03: "ui rule: the dropdown menu must have border, the title only, not the drpdown itself. this must apply everywhere (tables, lists,
   tiles, etc)"): the closed box of every menu has the light grey border, the list that opens has none (its shadow keeps it apart). A menu that cannot be
   changed has none. */
:is(select, input):is(.ec-sel, .prio-sel, .st-sel, .k-sel):not(:disabled), #app :is(select, input):is(.ec-sel, .prio-sel, .st-sel, .k-sel, .p-ok, .p-warn, .p-danger, .p-mute, .p-accent):not(:disabled) { border: 1px solid var(--border) !important; }
.smart-list, .ndrop, .sugg, .exp-menu { border: 0 !important; }
/* Panel ▾ Pages (#558, rule 60b): a module unticked for a page. The list of what each page leaves out is on #app, set by render(). */
#app[data-hide~="tabs"] > .ac-bar, #app[data-hide~="tabs"] > .seg, #app[data-hide~="add"] details.disc, #app[data-hide~="tiles"] .stats, #app[data-hide~="search"] .toolbar, #app[data-hide~="export"] #export,
#app[data-hide~="select"] .bsel, #app[data-hide~="select"] .bulkbar, #app[data-hide~="pager"] .pager, #app[data-hide~="pager"] .toolbar .end:has(#per), #app[data-hide~="notes"] #acts, #app[data-hide~="log"] .log-card { display: none; }
/* Spacing (rule 61, UI kit box 12; allowed by the Super-Admin, 2026-11-04, #562): a class instead of a hand-made margin. Each beats every other rule, as the hand-made margin did. */
.mt4 { margin-top: 4px !important; } .mt6 { margin-top: 6px !important; } .mt8 { margin-top: 8px !important; } .mt10 { margin-top: 10px !important; } .mt12 { margin-top: 12px !important; } .mt14 { margin-top: 14px !important; } .mt16 { margin-top: 16px !important; }
.mb12 { margin-bottom: 12px !important; } .mb14 { margin-bottom: 14px !important; } .mb16 { margin-bottom: 16px !important; } .m0 { margin: 0 !important; }