/* ============================================================
FCC HQ — Design System v1 (mobile-first)
Brand: ink #141414 · orange #FF751F · Oswald display · Inter body
============================================================ */
:root {
--ink: #141414;
--ink-2: #1c1c22;
--ink-3: #26262e;
--orange: #FF751F;
--orange-dark: #e5660f;
--orange-soft: #fff3ea;
--bg: #f5f6f8;
--card: #ffffff;
--line: #e7e9ee;
--line-strong: #cfd3da;
--field: #f3f4f6;
--panel: #fafbfc;
--red-line: #f3c1c1;
--text: #1a1d23;
--muted: #6b7280;
--green: #1c7a3f;
--green-soft: #e7f6ec;
--red: #b02a2a;
--red-soft: #fdecec;
--blue: #1d4ed8;
--blue-soft: #e7effe;
--amber: #92400e;
--amber-soft: #fef3c7;
--radius: 12px;
--radius-sm: 9px;
--shadow: 0 1px 2px rgba(16, 18, 24, .05), 0 4px 16px rgba(16, 18, 24, .06);
--sidebar-w: 240px;
--topbar-h: 60px;
--font-display: 'Inter', -apple-system, ui-sans-serif, system-ui, sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-body);
background: var(--bg);
color: var(--text);
font-size: 14.5px;
line-height: 1.55;
min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button { font-family: inherit; }
/* ---------- App frame ---------- */
.hq { min-height: 100vh; }
.hq-main { min-height: 100vh; display: flex; flex-direction: column; }
.hq-content { flex: 1; padding: 18px 16px 56px; width: 100%; max-width: none; margin: 0 auto; }
@media (min-width: 980px) {
.hq-main { margin-left: var(--sidebar-w); }
.hq-content { padding: 26px 30px 64px; }
}
/* ---------- Sidebar ---------- */
.sb {
position: fixed; inset: 0 auto 0 0; z-index: 90;
width: var(--sidebar-w);
background: var(--ink);
color: #d7d9de;
display: flex; flex-direction: column;
transform: translateX(-100%);
transition: transform .25s ease;
overflow-y: auto;
overscroll-behavior: contain;
}
.sb.is-open { transform: translateX(0); box-shadow: 8px 0 40px rgba(0,0,0,.35); }
@media (min-width: 980px) {
.sb { transform: none; }
}
.sb-brand {
display: flex; align-items: center; gap: 10px;
height: var(--topbar-h); padding: 0 18px; flex-shrink: 0; box-sizing: border-box;
border-bottom: 1px solid #23232b;
}
.sb-brand img { height: 40px; width: auto; display: block; border-radius: 6px; }
.sb-brand .tag {
font-family: var(--font-display); font-weight: 600; font-size: 13px;
letter-spacing: .14em; color: #9ca0aa; text-transform: uppercase;
}
.sb-nav { flex: 1; padding: 10px 12px 18px; }
.sb-sec {
font-size: 10.5px; font-weight: 600; letter-spacing: .08em;
text-transform: uppercase; color: #6d717c;
padding: 12px 10px 4px;
}
button.sb-sec { display: flex; align-items: center; width: 100%; background: none; border: 0;
font-family: inherit; text-align: left; cursor: pointer; border-radius: 7px; }
button.sb-sec:hover { color: #9ca0aa; }
.sb-grp > .sb-sec i { margin-left: auto; font-size: 10px; opacity: 0;
transition: transform .15s ease, opacity .12s ease; }
.sb-grp:hover > .sb-sec i, .sb-grp.is-closed > .sb-sec i { opacity: .7; }
.sb-grp.is-closed > .sb-sec i { transform: rotate(-90deg); }
.sb-grp-items { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .18s ease; }
.sb-grp-items > div { overflow: hidden; min-height: 0; }
.sb-grp.is-closed .sb-grp-items { grid-template-rows: 0fr; }
html.sb-mode-rail .sb-grp-items, html.sb-mode-auto .sb-grp-items { grid-template-rows: 1fr !important; }
@media (prefers-reduced-motion: reduce) { .sb-grp-items, .sb-grp > .sb-sec i { transition: none; } }
.sb-item {
display: flex; align-items: center; gap: 10px;
min-height: 34px; padding: 0 10px; margin: 1px 0;
border-radius: 8px;
font-size: 13px; font-weight: 500; color: #b9bcc5;
position: relative;
transition: background .12s, color .12s;
}
.sb-item > i:first-child { font-size: 15px; width: 17px; flex: 0 0 17px; text-align: center; opacity: .85; }
.sb-item > span:first-of-type { white-space: nowrap; }
.sb-item.is-active > i:first-child { color: var(--orange); opacity: 1; }
.sb-quick { padding-top: 4px; }
.sb-rule { height: 1px; background: var(--sb-line); margin: 10px 2px 4px; }
.sb-item .sb-fav { margin-left: auto; font-size: 12px; width: auto; color: var(--sb-muted);
opacity: 0; padding: 3px; border-radius: 5px; transition: opacity .12s; }
.sb-item:hover .sb-fav { opacity: .75; }
.sb-item .sb-fav:hover { opacity: 1; color: var(--orange); }
.sb-item.is-fav .sb-fav, .sb-item.is-favrow .sb-fav { opacity: 1; color: var(--orange); }
html.sb-mode-rail .sb-fav, html.sb-mode-auto .sb-fav { display: none; }
.sb-item svg { width: 15px; height: 15px; flex: 0 0 15px; stroke: currentColor; opacity: .85; }
.sb-item:hover { background: var(--ink-2); color: #fff; }
.sb-item.is-active {
background: var(--ink-3); color: #fff;
}
.sb-item.is-active svg { stroke: var(--orange); }
.sb-item.is-soon { opacity: .45; cursor: default; }
.sb-item .soon {
margin-left: auto; font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
color: #8b8f9a; border: 1px solid #33333d; border-radius: 999px; padding: 1px 7px;
text-transform: uppercase;
}
.sb-user {
border-top: 1px solid #23232b;
padding: 14px; display: flex; align-items: center; gap: 10px;
}
.sb-user-link {
display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
border-radius: var(--radius-sm); padding: 4px; margin: -4px;
}
.sb-user-link:hover { background: var(--ink-2); }
.sb-user .avatar {
width: 36px; height: 36px; border-radius: 10px; flex: 0 0 36px;
background: var(--orange); color: #fff;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-weight: 600; font-size: 15px;
}
.sb-user .who { min-width: 0; }
.sb-user .who .n { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user .who .r { font-size: 11px; color: #8b8f9a; text-transform: capitalize; }
.sb-user .out {
margin-left: auto; display: flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: var(--radius-sm); color: #8b8f9a;
}
.sb-user .out:hover { background: var(--ink-2); color: #fff; }
.sb-user .out svg { width: 17px; height: 17px; stroke: currentColor; }
.sb-overlay {
position: fixed; inset: 0; z-index: 80;
background: rgba(10, 10, 12, .5);
opacity: 0; pointer-events: none; transition: opacity .2s;
}
.sb-overlay.is-open { opacity: 1; pointer-events: auto; }
@media (min-width: 980px) { .sb-overlay { display: none; } }
/* ---------- Topbar ---------- */
.tb {
height: var(--topbar-h);
background: var(--card);
border-bottom: 1px solid var(--line);
display: flex; align-items: center; gap: 10px;
padding: 0 14px;
position: sticky; top: 0; z-index: 60;
}
@media (min-width: 980px) { .tb { padding: 0 26px; } }
.tb-burger {
display: flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border: 1px solid var(--line); background: var(--bg); cursor: pointer;
border-radius: 12px; color: var(--muted); transition: all .13s;
}
.tb-burger:hover { border-color: rgba(255,117,31,.5); color: var(--orange); background: rgba(255,117,31,.07); }
.tb-burger svg { width: 22px; height: 22px; stroke: currentColor; }
@media (min-width: 980px) { .tb-burger { display: none; } }
.tb-search {
display: none; flex: 1; max-width: 420px; margin-left: 8px; position: relative;
}
@media (min-width: 760px) { .tb-search { display: block; } }
.tb-search input {
width: 100%; height: 40px; border: 1px solid var(--line); border-radius: 10px;
background: var(--bg); padding: 0 12px 0 38px; font-size: 13.5px; font-family: inherit;
}
.tb-search input:focus { outline: none; background: var(--card); }
.tb-search svg {
position: absolute; left: 12px; top: 11px; width: 17px; height: 17px;
stroke: var(--muted); pointer-events: none;
}
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
@media (min-width: 560px) { }
.tb-ico {
position: relative; display: flex; align-items: center; justify-content: center;
width: 42px; height: 42px; border-radius: var(--radius-sm); border: none;
background: none; cursor: pointer; color: var(--muted);
}
.tb-ico:hover { background: var(--bg); color: var(--text); }
.tb-ico svg { width: 19px; height: 19px; stroke: currentColor; }
/* ---------- Dropdown ---------- */
.dd { position: relative; }
.dd-menu {
position: absolute; right: 0; top: calc(100% + 8px); z-index: 100;
min-width: 210px; background: var(--card);
border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 6px;
display: none;
}
.dd.is-open .dd-menu { display: block; }
.dd-menu a, .dd-menu button {
display: flex; align-items: center; gap: 10px; width: 100%;
min-height: 42px; padding: 0 12px; border: none; background: none; cursor: pointer;
border-radius: 8px; font-size: 13.5px; font-family: inherit; color: var(--text); text-align: left;
}
.dd-menu a:hover, .dd-menu button:hover { background: var(--bg); }
.dd-menu .dis { opacity: .45; cursor: default; }
.dd-menu .dis:hover { background: none; }
.dd-menu .sep { height: 1px; background: var(--line); margin: 6px 4px; }
/* ---------- Page head ---------- */
.page-head { margin-bottom: 20px; }
.page-head h1 {
font-family: var(--font-display); font-weight: 600; font-size: 24px;
letter-spacing: .01em; text-transform: uppercase;
}
.page-head .sub { color: var(--muted); font-size: 13.5px; margin-top: 3px; }
/* ---------- Cards & KPIs ---------- */
.card {
background: var(--card); border: 1px solid var(--line);
border-radius: var(--radius); box-shadow: none;
padding: 20px;
}
.card + .card { margin-top: 16px; }
.grid-2 > .card, .db-grid > .card, .db-grid2 > .card, .db-hero > .card,
[style*="grid"] > .card, [style*="flex"] > .card { margin-top: 0; }
.card h2 {
font-family: var(--font-display); font-weight: 600; font-size: 15px;
letter-spacing: .05em; text-transform: uppercase; margin-bottom: 14px;
}
.kpis {
display: grid; gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
margin-bottom: 18px;
}
.kpi {
background: var(--card); border: 1px solid var(--line);
border-radius: var(--radius); box-shadow: none;
padding: 16px 18px;
}
.kpi .l { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.kpi .v { font-family: var(--font-display); font-weight: 600; font-size: 30px; margin-top: 4px; }
.kpi .s { font-size: 12px; color: var(--muted); margin-top: 2px; }
.grid-2 { display: grid; gap: 16px; align-items: stretch; }
.grid-2 > .card { height: 100%; }
@media (min-width: 900px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 42px; padding: 0 18px;
border: 1px solid transparent; border-radius: var(--radius-sm);
font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
transition: background .15s, border-color .15s;
}
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--orange-dark); }
.btn-ghost { background: var(--card); border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--line-strong); background: var(--bg); }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: #8f1f1f; }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: 12.5px; }
/* ---------- Forms ---------- */
/* Selects match inputs everywhere (incl. iOS Safari, which ignores height on
native selects — appearance:none + custom chevron fixes the mismatch). */
select {
appearance: none;
-webkit-appearance: none;
min-height: 42px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
background-color: #fff;
color: var(--text);
font-family: inherit;
font-size: 14px;
padding: 0 34px 0 12px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 11px;
}
select:focus { outline: none; }
.fld { margin-bottom: 14px; }
.fld label {
display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px;
}
.fld input, .fld select, .fld textarea,
.tbl input:not([type="checkbox"]):not([type="file"]), .tbl select {
width: 100%; min-height: 44px; padding: 0 13px;
border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
font-size: 14px; font-family: inherit; background-color: var(--card); color: var(--text);
}
.tbl select { padding-right: 34px; }
.fld select { padding-right: 34px; }
.fld textarea { padding: 11px 13px; min-height: 90px; resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus {
outline: none;
}
.form-row { display: grid; gap: 12px; }
@media (min-width: 720px) {
.form-row { grid-template-columns: repeat(var(--cols, 2), 1fr); align-items: end; }
.form-row .span2 { grid-column: span 2; }
}
/* ---------- Pills / badges ---------- */
.pill {
display: inline-block; font-size: 11px; font-weight: 700;
padding: 3px 10px; border-radius: 999px; white-space: nowrap; text-transform: capitalize;
}
.pill-green { background: var(--green-soft); color: var(--green); }
.pill-red { background: var(--red-soft); color: var(--red); }
.pill-blue { background: var(--blue-soft); color: var(--blue); }
.pill-amber { background: var(--amber-soft); color: var(--amber); }
.pill-gray { background: var(--surface-2, var(--field)); color: var(--muted); }
.pill-orange { background: var(--orange-soft); color: var(--orange-dark); }
/* ---------- Tables (mobile = card rows) ---------- */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
text-transform: uppercase; color: var(--muted);
padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--panel);
position: sticky; top: 0; z-index: 2;
}
.tbl td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
/* Attio grid: hairline cell separators + row hover on desktop lists */
@media (min-width: 768px) {
.tbl th, .tbl td { border-right: 1px solid var(--line); }
.tbl th:last-child, .tbl td:last-child { border-right: 0; }
.tbl tbody tr:hover td { background: var(--panel); }
}
.tbl .muted { color: var(--muted); font-size: 12.5px; }
.tbl .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
@media (max-width: 767px) {
/* Attio on mobile: the grid stays a grid — horizontal scroll with the
first column pinned so you always know which row you are on. */
.tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl thead th { position: sticky; top: 0; }
.tbl th, .tbl td { white-space: nowrap; padding: 8px 10px; font-size: 12.5px; }
.tbl th:first-child, .tbl td:first-child {
position: sticky; left: 0; z-index: 3; background: var(--card);
box-shadow: 6px 0 8px -6px rgba(0, 0, 0, .25);
max-width: 55vw; overflow: hidden; text-overflow: ellipsis;
}
.tbl thead th:first-child { z-index: 4; background: var(--panel); }
.tbl tbody tr:active td { background: var(--panel); }
}
/* ---------- Flash ---------- */
.flash {
display: flex; align-items: flex-start; gap: 10px;
border-radius: var(--radius); padding: 13px 16px; margin-bottom: 16px;
font-size: 13.5px; font-weight: 500;
}
.flash-ok { background: var(--green-soft); color: var(--green); border: 1px solid #bfe6cc; }
.flash-err { background: var(--red-soft); color: var(--red); border: 1px solid var(--red-line); }
.flash .x { margin-left: auto; background: none; border: none; cursor: pointer; color: inherit; font-size: 16px; line-height: 1; padding: 2px; }
/* ---------- Roadmap / activity ---------- */
.road li {
display: flex; align-items: center; gap: 12px;
padding: 11px 0; border-bottom: 1px solid var(--line); list-style: none; font-size: 13.5px;
}
.road li:last-child { border-bottom: 0; }
.feed { list-style: none; }
.feed li { display: flex; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.feed li:last-child { border-bottom: 0; }
.feed .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); margin-top: 6px; flex: 0 0 8px; }
.feed .t { color: var(--muted); font-size: 11.5px; }
.empty { text-align: center; color: var(--muted); padding: 26px 10px; font-size: 13.5px; }
/* ---------- Tabs ---------- */
.tabbar { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 14px; }
.tab {
min-height: 40px; display: inline-flex; align-items: center; padding: 0 15px;
border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted);
border: 1px solid transparent;
}
.tab:hover { background: var(--field); color: var(--text); }
.tab.is-active { background: var(--ink); color: #fff; }
/* ---------- Filter bar (shared) ---------- */
.filterbar {
display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
margin: 0 0 16px; padding: 13px 14px;
border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
}
.filterbar select, .filterbar input[type=text], .filterbar input[type=search] {
height: 42px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
padding: 0 11px; font-size: 13.5px; font-family: inherit; background: var(--card);
}
.filterbar input[type=text], .filterbar input[type=search] { flex: 1; min-width: 190px; }
.filterbar select:focus, .filterbar input:focus { outline: none; }
.filterbar .fbtn {
height: 42px; padding: 0 18px; border: none; border-radius: var(--radius-sm);
background: var(--orange); color: #fff; font-weight: 700; font-size: 13.5px; cursor: pointer; font-family: inherit;
}
.filterbar .fbtn:hover { background: var(--orange-dark); }
.filterbar .fclear { color: var(--muted); font-size: 13px; padding: 0 8px; }
.cellchips { max-width: 320px; }
.tag {
display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px;
border-radius: 6px; background: var(--field); color: var(--muted); margin: 2px 3px 2px 0; white-space: nowrap;
}
.tag.st { background: var(--blue-soft); color: var(--blue); }
.crumb {
display: inline-flex; align-items: center; gap: 8px;
font-size: 12.5px; font-weight: 600; color: var(--text);
background: var(--card); border: 1px solid var(--line-strong); border-radius: 9px;
padding: 8px 14px 8px 12px; margin-bottom: 16px; text-decoration: none;
}
.crumb::before {
content: ''; width: 7px; height: 7px; flex: 0 0 auto;
border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(45deg); margin-top: 1px;
}
.crumb:hover { border-color: var(--orange); color: var(--orange); }
.right { text-align: right; }
.inline-form { display: inline; }
/* ---------- Detail definition list ---------- */
.dl-row { display: grid; grid-template-columns: 150px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.dl-row:last-child { border-bottom: 0; }
.dl-k { color: var(--muted); font-weight: 600; font-size: 12.5px; }
@media (max-width: 560px) { .dl-row { grid-template-columns: 1fr; gap: 2px; } }
/* ---------- Checkbox chip grids (tag editors) ---------- */
.lbl-sm { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.chipgrid { display: flex; flex-wrap: wrap; gap: 8px; }
.chipgrid .chk {
display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px;
border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; cursor: pointer; background: var(--card);
}
.chipgrid .chk:hover { border-color: var(--orange); }
.chipgrid .chk input { width: 15px; height: 15px; accent-color: var(--orange); }
.chipgrid.tight .chk { padding: 5px 9px; font-size: 12px; }
.stategrid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.stategroup { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--panel); }
.stategroup .h { font-size: 11.5px; font-weight: 700; margin-bottom: 8px; }
/* ---------- Milestones / tasks ---------- */
.mstone { list-style: none; }
.mstone li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.mstone li:last-child { border-bottom: 0; }
.mstone .mark {
width: 18px; height: 18px; flex: 0 0 18px; border-radius: 5px; cursor: pointer;
border: 1.5px solid var(--line-strong); background: none; color: #fff; font-size: 11px; line-height: 1;
display: inline-flex; align-items: center; justify-content: center; padding: 0;
transition: border-color .12s, background .12s;
}
.mstone .mark:hover { border-color: var(--orange); }
.mstone .ms-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mstone .ms-main .nm { flex: none; }
.mstone .ms-meta { font-size: 11.5px; color: var(--muted); }
.mstone li.done .ms-meta { color: var(--green); }
.mstone li.done .mark { background: var(--green); border-color: var(--green); }
.mstone li.done .nm { text-decoration: line-through; color: var(--muted); }
.mstone .nm { flex: 1; min-width: 0; }
.mstone .due { font-size: 12px; color: var(--muted); white-space: nowrap; }
/* ---------- Stage strip (dashboard) ---------- */
.stage-strip { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.stage-cell {
text-align: center; border: 1px solid var(--line); border-radius: 10px; padding: 10px 6px;
transition: border-color .15s, background .15s;
}
.stage-cell:hover { border-color: var(--orange); background: var(--orange-soft); }
.stage-cell .n { font-family: var(--font-display); font-weight: 600; font-size: 22px; }
.stage-cell .t { font-size: 10.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
/* ---------- Kanban ---------- */
.kanban {
display: flex; gap: 12px; align-items: flex-start;
overflow-x: auto; padding-bottom: 20px;
-webkit-overflow-scrolling: touch;
}
.kb-col {
flex: 0 0 262px; width: 262px;
background: var(--field); border: 1px solid var(--line); border-radius: var(--radius);
padding: 10px;
}
.kb-head {
display: flex; align-items: center; justify-content: space-between;
font-family: var(--font-display); font-weight: 600; font-size: 12.5px;
letter-spacing: .06em; text-transform: uppercase; padding: 2px 4px 10px;
}
.kb-count {
font-family: var(--font-body); font-size: 11px; font-weight: 700;
background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; color: var(--muted);
}
.kb-cards { min-height: 110px; display: flex; flex-direction: column; gap: 8px; }
.kb-card {
display: block; background: var(--card); border: 1px solid var(--line); border-radius: 10px;
padding: 10px 12px; box-shadow: 0 1px 2px rgba(16,18,24,.05);
cursor: grab;
}
.kb-card:active { cursor: grabbing; }
.kb-card:hover { border-color: var(--line-strong); }
.kb-num { font-size: 10.5px; font-weight: 700; color: var(--orange-dark); letter-spacing: .04em; }
.kb-name { font-size: 13px; font-weight: 600; margin: 2px 0 3px; }
.kb-meta, .kb-loc { font-size: 11.5px; color: var(--muted); }
.kb-ghost { opacity: .4; }
/* ---------- Automation builder ---------- */
.ab-grid { display: grid; grid-template-columns: 1fr 64px 1fr; gap: 14px; align-items: stretch; }
@media (max-width: 899px) {
.ab-grid { grid-template-columns: 1fr; }
.ab-arrowbox { transform: rotate(90deg); margin: -6px auto; }
}
.ab-panel {
background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: none; padding: 16px;
}
.ab-panel__head {
font-family: var(--font-display); font-weight: 600; font-size: 14px;
letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px;
}
.ab-card {
display: block; border: 2px solid var(--line); border-radius: 10px;
padding: 12px 14px; margin-bottom: 10px; cursor: pointer;
transition: border-color .15s, background .15s, transform .05s;
}
.ab-card:hover { border-color: var(--line-strong); }
.ab-card:active { transform: scale(.995); }
.ab-card.picked { border-color: var(--orange); background: var(--orange-soft); }
.ab-card__t { font-weight: 700; font-size: 13.5px; }
.ab-card__f { font-size: 11px; color: var(--muted); margin-top: 2px; font-family: ui-monospace, Menlo, monospace; }
.ab-cfg { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 10px; }
.ab-arrowbox { display: flex; align-items: center; justify-content: center; padding-top: 130px; }
#ab-arrow { width: 60px; height: 24px; stroke: #cfd3da; transition: stroke .25s, filter .25s; }
#ab-arrow.lit { stroke: var(--orange); filter: drop-shadow(0 0 6px rgba(255, 117, 31, .55)); }
.ab-group { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-top: 10px; background: var(--panel); }
.ab-group__head { font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.ab-row { display: grid; grid-template-columns: 1fr 170px 1fr 42px; gap: 8px; margin-bottom: 8px; }
.ab-row select, .ab-row input { min-height: 40px; font-size: 13px; }
.ab-row input { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0 11px; font-family: inherit; }
@media (max-width: 719px) { .ab-row { grid-template-columns: 1fr 1fr; } }
/* ============================================================
Auth screens (login / invite) — standalone, ink background
============================================================ */
.auth-body {
min-height: 100vh; display: flex; align-items: center; justify-content: center;
background:
radial-gradient(900px 480px at 85% -10%, rgba(255, 117, 31, .05), transparent 55%),
linear-gradient(180deg, #17171c, #0f0f12);
padding: 24px 16px;
}
.auth-card {
width: 100%; max-width: 400px;
background: var(--card); border-radius: 16px;
box-shadow: 0 24px 80px rgba(0, 0, 0, .45);
padding: 34px 30px 30px;
}
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 22px; }
.auth-brand img { height: 100px; }
.auth-brand .hq-mark {
font-family: var(--font-display); font-weight: 600; font-size: 13px;
letter-spacing: .28em; text-transform: uppercase; color: var(--muted);
}
.auth-card h1 {
font-family: var(--font-display); font-weight: 600; font-size: 21px;
text-transform: uppercase; letter-spacing: .02em; text-align: center; margin-bottom: 4px;
}
.auth-card .sub { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 20px; }
.auth-card .btn { width: 100%; margin-top: 6px; min-height: 46px; font-size: 14.5px; }
.auth-err {
background: var(--red-soft); color: var(--red); border: 1px solid var(--red-line);
border-radius: var(--radius-sm); padding: 10px 13px; font-size: 13px; margin-bottom: 14px;
}
.auth-foot { text-align: center; margin-top: 18px; font-size: 12px; color: var(--muted); }
/* SweetAlert2 brand alignment */
.swal2-popup.hq-swal { font-family: "Inter", -apple-system, sans-serif; border-radius: 14px; }
.hq-swal .swal2-title { font-size: 19px; color: #141414; }
.hq-swal .swal2-styled { border-radius: 9px; font-weight: 600; }
/* Topbar search: centered, with results dropdown */
@media (min-width: 760px) {
.tb { position: sticky; }
.tb-search { position: absolute; left: 50%; transform: translateX(-50%); width: clamp(280px, 40vw, 560px); max-width: none; margin: 0; flex: none; }
}
.gs-dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-height: 520px; overflow-y: auto;
background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(20,20,20,.14); z-index: 300; padding: 4px 0; }
.gs-group { font-family: var(--font-display); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: 10px 14px 5px; border-top: 1px solid var(--line); }
.gs-group:first-child { border-top: 0; }
.gs-item { display: flex; align-items: center; gap: 10px; padding: 8px 14px; text-decoration: none; color: var(--text); border-left: 2px solid transparent; }
.gs-item:hover { background: var(--orange-soft); border-left-color: var(--orange); }
.gs-avatar { width: 32px; height: 32px; border-radius: 8px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: .04em; flex-shrink: 0; }
.gs-item:hover .gs-avatar { background: var(--orange); }
.gs-body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.gs-title { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-badge { font-size: 10px; font-weight: 700; color: var(--orange-dark); background: var(--orange-soft); border-radius: 6px; padding: 1px 6px; margin-left: 7px; vertical-align: 1px; text-transform: uppercase; letter-spacing: .03em; }
.gs-amount { font-size: 12.5px; font-weight: 700; color: var(--orange-dark); margin-left: 8px; flex-shrink: 0; }
.gs-empty, .gs-loading { padding: 16px 14px; font-size: 13px; color: var(--muted); }
/* ============ Dark theme ============ */
:root[data-theme="dark"] {
--bg: #121216;
--card: #1b1b21;
--panel: #17171c;
--field: #26262e;
--line: #2b2b34;
--line-strong: #3a3a45;
--text: #e8e8ee;
--muted: #9aa0ab;
--orange-soft: rgba(255, 117, 31, .16);
--green: #3fbf77; --green-soft: rgba(63, 191, 119, .16);
--red: #e06060; --red-soft: rgba(224, 96, 96, .16); --red-line: rgba(224, 96, 96, .4);
--blue: #7aa5ff; --blue-soft: rgba(122, 165, 255, .16);
--amber: #eebf62; --amber-soft: rgba(238, 191, 98, .16);
--shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 16px rgba(0, 0, 0, .5);
}
:root[data-theme="dark"] .hq-swal.swal2-popup, :root[data-theme="dark"] .swal2-popup { background: var(--card); color: var(--text); }
:root[data-theme="dark"] .swal2-title, :root[data-theme="dark"] .swal2-html-container { color: var(--text); }
:root[data-theme="dark"] .flash-ok { background: var(--green-soft); color: var(--green); }
:root[data-theme="dark"] .flash-err { background: var(--red-soft); color: var(--red); }
/* Theme toggle: show moon in light, sun in dark */
.tb-ico .ico-sun { display: none; }
:root[data-theme="dark"] .tb-ico .ico-sun { display: block; }
:root[data-theme="dark"] .tb-ico .ico-moon { display: none; }
/* ============ Collapsed sidebar (desktop) ============ */
.sb-collapse {
display: none; align-items: center; gap: 10px; width: calc(100% - 24px); margin: 0 12px 8px;
padding: 9px 12px; background: none; border: 0; border-radius: 9px; cursor: pointer;
color: #8b8f9a; font-size: 12.5px; font-family: var(--font-body);
}
.sb-collapse:hover { background: var(--ink-2); color: #fff; }
.sb-collapse svg { width: 16px; height: 16px; stroke: currentColor; fill: none; transition: transform .18s; }
.sb-brand .brand-min { display: none; height: 34px; width: 34px; border-radius: 8px; }
/* ============ Notifications ============ */
.tb-bell { position: relative; }
.tb-bell .badge {
position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px;
background: var(--orange); color: #fff; border-radius: 8px; font-size: 10px; font-weight: 700;
display: none; align-items: center; justify-content: center; line-height: 1;
}
.tb-bell .badge.on { display: flex; }
.notif-menu {
position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-width: 90vw; max-height: 440px; overflow-y: auto;
background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
z-index: 300; display: none; padding: 4px 0;
}
.notif-menu.is-open { display: block; }
.notif-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; text-decoration: none; color: var(--text); border-left: 2px solid transparent; }
.notif-item:hover { background: var(--orange-soft); border-left-color: var(--orange); }
.notif-item .nt { font-size: 13px; font-weight: 600; }
.notif-item .ns { font-size: 11.5px; color: var(--muted); }
.notif-empty { padding: 18px 14px; font-size: 13px; color: var(--muted); }
/* ============ One-column contact layout ============ */
.grid-1col > div { display: contents; }
.grid-1col .card { margin-bottom: 16px; }
.ab-panel__sec { font-family: var(--font-display); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 12px 2px 6px; }
.ab-panel__sec:first-of-type { margin-top: 4px; }
/* Dark form controls + native widget scheme */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="dark"] .fld input, :root[data-theme="dark"] .fld select, :root[data-theme="dark"] .fld textarea,
:root[data-theme="dark"] .tbl input:not([type="checkbox"]), :root[data-theme="dark"] .tbl select,
:root[data-theme="dark"] select, :root[data-theme="dark"] input[type="date"], :root[data-theme="dark"] input[type="time"],
:root[data-theme="dark"] input[type="file"] {
background-color: var(--field); color: var(--text); border-color: var(--line-strong);
}
:root[data-theme="dark"] .tb-search input { background: var(--field); }
:root[data-theme="dark"] .tb-search input:focus { background: var(--ink-3); }
/* Builder + settings breathing room */
.ab-grid { margin-top: 16px; }
/* Notifications dropdown footer */
.notif-foot { display: block; text-align: center; padding: 10px 14px; font-size: 12.5px; font-weight: 700;
color: var(--orange); text-decoration: none; border-top: 1px solid var(--line); }
.notif-foot:hover { background: var(--orange-soft); }
/* ============ Avatar + user menu ============ */
.hq-av { border-radius: 50%; object-fit: cover; display: inline-block; flex-shrink: 0; }
.hq-av--ini { background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-weight: 600; letter-spacing: .04em; }
.sb .hq-av--ini { background: var(--orange); }
.tb-avatar { position: relative; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 50%; display: flex; }
.tb-avatar:hover .hq-av { outline: none; }
.tb-avatar .dot { position: absolute; top: -1px; right: -1px; width: 11px; height: 11px; border-radius: 50%;
background: var(--orange); border: 2px solid var(--card); display: none; }
.tb-avatar .dot.on { display: block; }
.user-menu { min-width: 230px; right: 0; left: auto; z-index: 960; }
.user-menu .um-head { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.user-menu .um-n { font-weight: 700; font-size: 13.5px; }
.user-menu .um-r { font-size: 11.5px; color: var(--muted); }
.user-menu a, .user-menu button#theme-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px;
width: 100%; padding: 9px 14px; font-size: 13.5px; color: var(--text); text-decoration: none;
background: none; border: 0; cursor: pointer; font-family: inherit; text-align: left; }
.user-menu a:hover, .user-menu button#theme-toggle:hover { background: var(--orange-soft); color: var(--orange-dark); }
.um-count { min-width: 20px; text-align: center; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--orange);
border-radius: 9px; padding: 2px 6px; }
.um-count:empty { display: none; }
.um-sw { font-size: 11px; font-weight: 700; color: var(--muted); }
.sb-badge { margin-left: auto; min-width: 18px; text-align: center; font-size: 10px; font-weight: 700; color: #fff;
background: var(--orange); border-radius: 9px; padding: 2px 5px; }
/* ============ Messages ============ */
.hq-content:has(.msg-wrap) { max-width: none !important; padding: 0 !important; }
.msg-wrap { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 0; align-items: stretch;
height: calc(100dvh - var(--topbar-h)); min-height: 480px;
overflow: hidden; background: var(--card); }
.msg-wrap > * { min-width: 0; min-height: 0; }
.msg-list { padding: 0 0 8px; overflow-y: auto; border-right: 1px solid var(--line); }
.msg-list__head { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
color: var(--muted); padding: 12px 14px 10px; border-bottom: 1px solid var(--line); }
.msg-sec { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
color: var(--muted); padding: 12px 14px 4px; }
.msg-person { display: flex; align-items: center; gap: 10px; padding: 8px 9px; margin: 1px 6px;
border-radius: 8px; text-decoration: none; color: var(--text); transition: background .12s; }
.msg-person:hover { background: var(--panel); }
.msg-person.is-active { background: var(--field); }
.msg-person__body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.msg-person__name { font-size: 13.5px; font-weight: 600; }
.msg-person__last { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-unread { min-width: 20px; text-align: center; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--orange);
border-radius: 9px; padding: 2px 6px; }
.msg-thread { padding: 0; display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.msg-thread__head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.msg-backlink { display: none; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line-strong); position: relative; }
.msg-backlink::before { content: ""; position: absolute; top: 50%; left: 55%; width: 8px; height: 8px;
border-left: 2px solid var(--text); border-bottom: 2px solid var(--text); transform: translate(-50%,-50%) rotate(45deg); }
.msg-scroll { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
padding: 18px max(16px, calc((100% - 768px) / 2)) 96px; }
.msg-bubble { max-width: 78%; align-self: flex-start; background: color-mix(in srgb, var(--text) 8%, var(--card)); border: 0; border-radius: 14px 14px 14px 4px; padding: 9px 14px; }
.msg-grow { display: flex; gap: 8px; align-items: flex-end; align-self: flex-start; max-width: 78%; }
.msg-grow .msg-bubble { align-self: auto; max-width: 100%; }
.msg-grow .hq-av { flex: none; margin-bottom: 2px; }
.msg-bubble.mine { align-self: flex-end; background: var(--orange); color: #fff; border-color: transparent; border-radius: 10px 10px 4px 10px; }
.msg-bubble__body { font-family: ui-serif, Charter, Georgia, Cambria, "Times New Roman", serif;
font-size: 15.5px; line-height: 1.55; word-wrap: break-word; }
.msg-bubble__t { font-size: 10.5px; opacity: .65; margin-top: 3px; }
.msg-compose { display: flex; gap: 8px; align-items: flex-end; position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
padding: 10px max(12px, calc((100% - 768px) / 2)) 14px;
background:color-mix(in srgb, var(--card) 35%, transparent);backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px); }
.msg-thread { position: relative; }
.msg-compose textarea, .msg-compose .btn { position: relative; }
.msg-compose textarea { flex: 1; min-height: 44px; max-height: 120px; padding: 11px 14px; resize: none;
border: 1px solid var(--line-strong); border-radius: 14px; font-family: inherit; font-size: 13.5px;
background: var(--card); color: var(--text); box-shadow: 0 4px 18px rgba(0, 0, 0, .08); }
.msg-compose textarea:focus { outline: none; border-color: var(--orange); }
@media (max-width: 759px) {
.msg-wrap { grid-template-columns: 1fr; }
.msg-wrap.has-thread .msg-list { display: none; }
.msg-thread { height: 100%; }
.msg-wrap { height: calc(100dvh - var(--topbar-h)); }
.msg-backlink { display: block; }
}
/* Kanban touch dragging */
.kb-card { touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.kb-cards { touch-action: pan-x pan-y; }
/* Status pill dropdown */
.status-dd { position: relative; }
.status-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer;
font-family: inherit; font-size: 12.5px; font-weight: 700; border-radius: 7px; padding: 0 12px; min-height: 36px; }
.status-btn::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.status-menu { min-width: 190px; padding: 6px; }
.status-opt { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 0;
background: none; cursor: pointer; font-family: inherit; font-size: 13px; color: var(--text);
border-radius: 8px; text-align: left; }
.status-opt:hover { background: var(--orange-soft); }
.status-opt.is-current { font-weight: 700; }
.status-swatch { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; border: 2px solid transparent; }
.status-swatch.pill-green { background: var(--green); }
.status-swatch.pill-amber { background: var(--amber); }
.status-swatch.pill-blue { background: var(--blue); }
.status-swatch.pill-red { background: var(--red); }
.status-swatch.pill-gray { background: var(--muted); }
/* ============ File inputs (styled picker) ============ */
input[type="file"] {
width: 100%; font-size: 13px; color: var(--muted); font-family: inherit;
border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
padding: 6px 10px; background: var(--card); cursor: pointer; min-height: 44px;
}
input[type="file"]::file-selector-button {
font-family: inherit; font-size: 12.5px; font-weight: 700; color: #fff;
background: var(--ink); border: 0; border-radius: 8px; padding: 6px 12px;
margin-right: 12px; cursor: pointer;
}
input[type="file"]::-webkit-file-upload-button {
font-family: inherit; font-size: 12.5px; font-weight: 700; color: #fff;
background: var(--ink); border: 0; border-radius: 8px; padding: 6px 12px;
margin-right: 12px; cursor: pointer;
}
input[type="file"]:hover { border-color: var(--orange); }
input[type="file"]:hover::file-selector-button { background: var(--orange); }
:root[data-theme="dark"] input[type="file"] { background: var(--field); }
:root[data-theme="dark"] input[type="file"]::file-selector-button,
:root[data-theme="dark"] input[type="file"]::-webkit-file-upload-button { background: var(--orange); }
/* Kanban: suppress iOS link preview / text callout so press-hold starts a drag */
.kb-card { -webkit-touch-callout: none; -webkit-user-drag: none; cursor: pointer; }
.kb-card * { -webkit-touch-callout: none; pointer-events: none; }
/* Presence */
.msg-avwrap { position: relative; display: inline-flex; flex-shrink: 0; }
.p-dot { position: absolute; bottom: 0; right: 0; width: 11px; height: 11px; border-radius: 50%;
border: 2px solid var(--card); background: var(--muted); }
.p-dot-inline { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; background: var(--muted); }
.p-on { background: var(--green) !important; }
.p-away { background: var(--amber) !important; }
.p-busy { background: var(--red) !important; }
.p-off { background: var(--muted) !important; }
.um-label { font-family: var(--font-display); font-size: 10px; font-weight: 600; text-transform: uppercase;
letter-spacing: .1em; color: var(--muted); padding: 8px 14px 3px; }
.um-presence { display: flex; align-items: center; width: 100%; padding: 7px 14px; border: 0; background: none;
cursor: pointer; font-family: inherit; font-size: 13px; color: var(--text); text-align: left; }
.um-presence:hover { background: var(--orange-soft); }
.um-presence.is-current { font-weight: 700; }
.msg-thread--empty { align-items: center; justify-content: center; display: none; }
@media (min-width: 760px) { .msg-thread--empty { display: flex; } }
/* Status menu opens under its button, never off-screen */
.status-dd .dd-menu { left: 0; right: auto; max-width: calc(100vw - 28px); }
/* Header actions: everything inline on desktop, status + Actions menu on mobile */
.head-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.head-actions .ha-desktop { display: none; gap: 10px; align-items: center; }
.head-actions .ha-menu { display: block; }
@media (min-width: 760px) {
.head-actions .ha-desktop { display: flex; }
.head-actions .ha-menu { display: none; }
}
/* Status colors: solid, no pastels, both themes */
.status-btn.pill-green { background: #1c7a3f; color: #fff; }
.status-btn.pill-amber { background: #b45309; color: #fff; }
.status-btn.pill-blue { background: #1d4ed8; color: #fff; }
.status-btn.pill-red { background: #b02a2a; color: #fff; }
.status-btn.pill-gray { background: #5b6472; color: #fff; }
.status-swatch.pill-amber { background: #b45309; }
/* iOS date/time inputs: strip native sizing so width:100% is honored */
input[type="time"], input[type="date"], input[type="datetime-local"] {
-webkit-appearance: none; appearance: none;
width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
background: var(--card); color: var(--text); font-family: inherit; font-size: 14px;
padding: 0 13px; min-height: 44px; text-align: left;
}
:root[data-theme="dark"] input[type="time"], :root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] input[type="datetime-local"] { background: var(--field); }
/* Dark mode: neutral pills and tags need real contrast */
:root[data-theme="dark"] .pill-gray, :root[data-theme="dark"] .tag {
background: rgba(255, 255, 255, .08); color: #c9cdd6;
}
:root[data-theme="dark"] .tag.st { background: var(--blue-soft); color: var(--blue); }
/* iOS: inputs under 16px trigger auto-zoom on focus. Force 16px on touch widths. */
@media (max-width: 759px) {
input, select, textarea { font-size: 16px !important; }
}
/* No focus rings anywhere */
:focus, :focus-visible { outline: none !important; box-shadow: none !important; }
/* ============ Automation builder stepper ============ */
.ab-stepper { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.ab-stepper__item { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); background: var(--card);
border-radius: var(--radius-sm); padding: 9px 14px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--muted); }
.ab-stepper__item .num { width: 22px; height: 22px; border-radius: 50%; background: var(--field); color: var(--muted);
display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; }
.ab-stepper__item.is-active { border-color: var(--orange); color: var(--text); }
.ab-stepper__item.is-active .num { background: var(--orange); color: #fff; }
.ab-stepper__item.is-done .num { background: var(--green); color: #fff; }
.ab-step { display: none; }
.ab-step.is-active { display: block; }
.ab-nav { display: flex; gap: 10px; justify-content: space-between; margin-top: 16px; }
.ab-cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-bottom: 6px; }
.ab-cardgrid .ab-card { margin: 0; }
.ab-review__row { display: flex; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ab-review__row > span { width: 110px; color: var(--muted); flex-shrink: 0; }
@media (max-width: 759px) { .ab-stepper__item .lbl { display: none; } .ab-stepper__item.is-active .lbl { display: inline; } }
/* ============ Avatar cropper ============ */
.crop-overlay { position: fixed; inset: 0; background: rgba(10, 10, 12, .78); z-index: 500;
display: none; align-items: center; justify-content: center; padding: 18px; }
.crop-overlay.is-open { display: flex; }
.crop-box { background: var(--card); border-radius: 14px; padding: 18px; width: 340px; max-width: 94vw; }
.crop-box h3 { font-family: var(--font-display); font-size: 16px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px; }
.crop-stage { position: relative; width: 280px; height: 280px; margin: 0 auto; overflow: hidden; border-radius: 10px;
background: #111; touch-action: none; cursor: grab; }
.crop-stage img { position: absolute; transform-origin: 0 0; -webkit-user-drag: none; user-select: none; pointer-events: none; max-width: none; }
.crop-ring { position: absolute; inset: 0; pointer-events: none; }
.crop-ring::before { content: ""; position: absolute; left: 50%; top: 50%; width: 240px; height: 240px;
transform: translate(-50%, -50%); border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .85);
box-shadow: 0 0 0 400px rgba(0, 0, 0, .55); }
.crop-zoom { width: 100%; margin: 14px 0 4px; accent-color: var(--orange); }
.crop-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }
/* Avatar photo picker: camera overlay on the avatar itself */
.av-upload { position: relative; display: inline-block; cursor: pointer; border-radius: 50%; }
.av-upload .hq-av { display: block; }
.av-cam { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
border-radius: 50%; background: rgba(0, 0, 0, .38); color: #fff; opacity: 0; transition: opacity .15s; }
.av-upload:hover .av-cam, .av-upload.no-photo .av-cam { opacity: 1; }
.av-upload.no-photo .av-cam { background: rgba(0, 0, 0, .28); }
/* Trigger groups: neutral cards, colored category dots + labels */
.ab-panel__sec.tg-projects { color: #FF751F; }
.ab-panel__sec.tg-money { color: #1c7a3f; }
.ab-panel__sec.tg-contacts { color: #1d4ed8; }
.ab-panel__sec.tg-docs { color: #7c3aed; }
.ab-panel__sec.tg-sched { color: #b45309; }
.ab-panel__sec.tg-adv { color: #5b6472; }
:root[data-theme="dark"] .ab-panel__sec.tg-money { color: #3fbf77; }
:root[data-theme="dark"] .ab-panel__sec.tg-contacts { color: #7aa5ff; }
:root[data-theme="dark"] .ab-panel__sec.tg-docs { color: #a98af7; }
:root[data-theme="dark"] .ab-panel__sec.tg-sched { color: #eebf62; }
:root[data-theme="dark"] .ab-panel__sec.tg-adv { color: #9aa0ab; }
.ab-trigger[class*="tg-"] .ab-card__t::before {
content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
margin-right: 8px; vertical-align: 1px;
}
.ab-trigger.tg-projects .ab-card__t::before { background: #FF751F; }
.ab-trigger.tg-money .ab-card__t::before { background: #1c7a3f; }
.ab-trigger.tg-contacts .ab-card__t::before { background: #1d4ed8; }
.ab-trigger.tg-docs .ab-card__t::before { background: #7c3aed; }
.ab-trigger.tg-sched .ab-card__t::before { background: #b45309; }
.ab-trigger.tg-adv .ab-card__t::before { background: #5b6472; }
:root[data-theme="dark"] .ab-trigger.tg-money .ab-card__t::before { background: #3fbf77; }
:root[data-theme="dark"] .ab-trigger.tg-contacts .ab-card__t::before { background: #7aa5ff; }
:root[data-theme="dark"] .ab-trigger.tg-docs .ab-card__t::before { background: #a98af7; }
:root[data-theme="dark"] .ab-trigger.tg-sched .ab-card__t::before { background: #eebf62; }
/* ============ Pipeline board v2 ============ */
.kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 22px; align-items: flex-start;
scroll-snap-type: x proximity; }
.kb-col { flex: 0 0 300px; scroll-snap-align: start; display: flex; flex-direction: column;
background: none; border: 0; padding: 0; border-radius: 0;
min-height: calc(100dvh - var(--topbar-h) - 130px); max-height: calc(100dvh - var(--topbar-h) - 130px); }
.kb-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px;
background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.kb-head__n { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--orange);
line-height: 1; opacity: .95; }
.kb-head__t { font-family: var(--font-display); font-weight: 600; font-size: 14px; text-transform: uppercase;
letter-spacing: .05em; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-head .kb-count { background: rgba(255,255,255,.16); color: #fff; border-radius: 999px; min-width: 26px;
text-align: center; font-size: 12px; font-weight: 700; padding: 3px 8px; }
.kb-head__chev { width: 9px; height: 9px; border-top: 2px solid rgba(255,255,255,.5); border-right: 2px solid rgba(255,255,255,.5);
transform: rotate(45deg); flex: 0 0 auto; }
.kb-cards { background: none; border: 0; padding: 10px 0; margin-top: 10px; overflow-y: auto; flex: 1; }
.kb-card { cursor: pointer; transition: transform .16s, box-shadow .16s; }
.kb-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(16,18,24,.12); }
.kb-card__top { display: flex; align-items: flex-start; gap: 8px; }
.kb-card__top > div { flex: 1; }
.kb-open { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-strong); position: relative;
flex: 0 0 auto; transition: border-color .15s, background .15s; }
.kb-open::before { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px;
border-top: 2px solid var(--muted); border-right: 2px solid var(--muted);
transform: translate(-60%, -50%) rotate(45deg); transition: border-color .15s; }
.kb-card:hover .kb-open { border-color: var(--orange); background: var(--orange); }
.kb-card:hover .kb-open::before { border-color: #fff; }
.kb-value { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--orange-dark); margin-top: 6px; }
.kb-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.kb-chip { font-size: 10.5px; font-weight: 700; background: var(--field); color: var(--muted);
border-radius: 6px; padding: 2px 7px; }
.kb-chip--warn { background: var(--amber-soft); color: var(--amber); }
.kb-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px;
padding-top: 8px; border-top: 1px solid var(--line); }
.kb-pm { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.kb-date { font-size: 10.5px; color: var(--muted); }
.kb-empty { border: 1.5px dashed var(--line-strong); border-radius: 10px; padding: 16px 10px; text-align: center;
font-size: 12px; color: var(--muted); }
.kb-chosen { transform: rotate(2.2deg) scale(1.02); box-shadow: 0 14px 34px rgba(16,18,24,.25); }
.kb-drag { opacity: .95; }
.kb-ghost { opacity: .35; }
.kb-flip { position: fixed; top: 50%; transform: translateY(-50%); z-index: 90; width: 44px; height: 44px;
border-radius: 50%; border: 0; background: rgba(20, 20, 20, .34); color: #fff; display: none; align-items: center;
justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.18); cursor: pointer;
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
opacity: .6; transition: opacity .4s ease; }
.kb-flip.kb-flip--hid { opacity: 0; pointer-events: none; }
.kb-flip::before { content: ""; width: 10px; height: 10px; border-top: 2.5px solid #fff; border-right: 2.5px solid #fff; }
.kb-flip--l { left: 8px; } .kb-flip--l::before { transform: rotate(-135deg) translate(-1px, 1px); }
.kb-flip--r { right: 8px; } .kb-flip--r::before { transform: rotate(45deg) translate(-1px, 1px); }
@media (max-width: 759px) {
.kanban { scroll-snap-type: x mandatory; gap: 12px; margin: 0 -16px; padding: 0 16px 10px; scroll-padding: 0 16px; }
.kb-col { flex: 0 0 calc(100vw - 32px); min-height: calc(100dvh - var(--topbar-h) - 130px); max-height: calc(100dvh - var(--topbar-h) - 130px); }
.kb-head__n { font-size: 32px; }
}
:root[data-theme="dark"] .kb-head { background: var(--ink-2); }
/* Pipeline: no visible scrollbars */
.kanban { scrollbar-width: none; -ms-overflow-style: none; }
.kanban::-webkit-scrollbar { display: none; }
.kb-cards { scrollbar-width: none; }
.kb-cards::-webkit-scrollbar { display: none; }
/* Highlight the column a card is being dragged over */
.kb-cards { transition: background .15s, box-shadow .15s; border-radius: 12px; }
.kb-cards:has(.kb-ghost) { background: var(--orange-soft); box-shadow: inset 0 0 0 2px var(--orange); }
.kb-col:has(.kb-ghost) .kb-head { background: var(--orange); }
.kb-col:has(.kb-ghost) .kb-head__n { color: #fff; }
/* Placeholder only shows while the column is actually empty */
.kb-cards:has(.kb-card) .kb-empty { display: none; }
/* Snap released while a card is being dragged so the board can auto-scroll */
.kanban.kb-dragging { scroll-snap-type: none; }
/* Lead empty state: the whole placeholder box is the button */
.kb-empty--cta { display: block; border-style: solid; border-color: var(--orange); background: var(--orange);
color: #fff; font-weight: 700; font-size: 13.5px; text-decoration: none; cursor: pointer;
transition: background .15s, border-color .15s; }
.kb-empty--cta:hover { background: var(--orange-dark); border-color: var(--orange-dark); }
/* Pinned CTA sits between the stage header and the cards */
.kb-cta-pin { margin-top: 20px; flex: 0 0 auto; }
/* Mobile topbar brand mark next to the burger */
.tb-brand { display: none; }
@media (max-width: 759px) {
.tb-brand { display: flex; align-items: center; }
.tb-brand img { height: 34px; width: auto; border-radius: 6px; display: block; }
}
:root[data-theme="dark"] .kb-flip { background: rgba(255, 117, 31, .45); }
/* Integrations: responsive two-column card grid */
.ig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: 16px; }
@media (max-width: 759px) { .ig-grid { grid-template-columns: 1fr; } }
.ig-grid .card { margin: 0; }
/* ============ Sidebar theming (light + dark) ============ */
:root {
--sb-bg: #ffffff; --sb-hover: #f2f3f6; --sb-active: #fff3ea;
--sb-text: #40444d; --sb-strong: #141414; --sb-muted: #8a8f99; --sb-line: #e7e9ee;
}
:root[data-theme="dark"] {
--sb-bg: #0f0f12; --sb-hover: #1c1c22; --sb-active: #26262e;
--sb-text: #c9ccd4; --sb-strong: #ffffff; --sb-muted: #6d717c; --sb-line: #23232b;
}
.sb { background: var(--sb-bg); color: var(--sb-text); border-right: 1px solid var(--sb-line);
overflow: hidden; transition: transform .25s ease, width .18s ease; }
.sb-nav { overflow-y: auto; scrollbar-width: none; }
.sb-nav::-webkit-scrollbar { display: none; }
.sb-brand { border-bottom-color: var(--sb-line); }
.sb-brand .tag { color: var(--sb-muted); }
.sb-sec { color: var(--sb-muted); }
.sb-item { color: var(--sb-text); }
.sb-item:hover { background: var(--sb-hover); color: var(--sb-strong); }
.sb-item.is-active { background: var(--sb-active); color: var(--sb-strong); }
.sb-item .soon { color: var(--sb-muted); border-color: var(--sb-line); }
.sb-user { border-top-color: var(--sb-line); }
.sb-user-link:hover { background: var(--sb-hover); }
.sb-user .who .n { color: var(--sb-strong); }
.sb-user .who .r { color: var(--sb-muted); }
.sb-user .out { color: var(--sb-muted); }
.sb-user .out:hover { background: var(--sb-hover); color: var(--sb-strong); }
.sb-collapse { color: var(--sb-muted); }
.sb-collapse:hover { background: var(--sb-hover); color: var(--sb-strong); }
/* ============ Sidebar modes: expanded / rail / expand-on-hover ============ */
@media (min-width: 980px) {
.sb-collapse { display: flex; flex-shrink: 0; }
html.sb-mode-rail, html.sb-mode-auto { --sidebar-w: 72px; }
html.sb-mode-auto .sb { width: 72px; }
html.sb-mode-auto .sb:hover { width: 248px; box-shadow: 12px 0 34px rgba(0, 0, 0, .22); }
html.sb-mode-rail .sb .sb-sec, html.sb-mode-auto .sb:not(:hover) .sb-sec { display: none; }
html.sb-mode-rail .sb .sb-item span, html.sb-mode-auto .sb:not(:hover) .sb-item span { display: none; }
html.sb-mode-rail .sb .sb-item, html.sb-mode-auto .sb:not(:hover) .sb-item { justify-content: center; padding: 11px 0; }
html.sb-mode-rail .sb .sb-brand img, html.sb-mode-auto .sb:not(:hover) .sb-brand img { display: none; }
html.sb-mode-rail .sb .sb-brand .brand-min, html.sb-mode-auto .sb:not(:hover) .sb-brand .brand-min { display: block; margin: 0 auto; }
html.sb-mode-rail .sb .sb-user .who, html.sb-mode-auto .sb:not(:hover) .sb-user .who { display: none; }
html.sb-mode-rail .sb .sb-user, html.sb-mode-auto .sb:not(:hover) .sb-user { flex-direction: column; gap: 10px; }
html.sb-mode-rail .sb .sb-collapse, html.sb-mode-auto .sb:not(:hover) .sb-collapse { justify-content: center; }
html.sb-mode-rail .sb .sb-collapse span, html.sb-mode-auto .sb:not(:hover) .sb-collapse span { display: none; }
html.sb-mode-rail .sb .sb-collapse svg, html.sb-mode-auto .sb .sb-collapse svg { transform: rotate(180deg); }
}
/* Rail tooltip bubble */
.sb-tip { position: fixed; transform: translateY(-50%); z-index: 300; background: var(--ink); color: #fff;
font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 8px; white-space: nowrap;
box-shadow: 0 6px 18px rgba(0, 0, 0, .35); opacity: 0; pointer-events: none; transition: opacity .12s; }
.sb-tip::before { content: ""; position: absolute; right: 100%; top: 50%; transform: translateY(-50%);
border: 5px solid transparent; border-right-color: var(--ink); }
.sb-tip.on { opacity: 1; }
:root[data-theme="dark"] .sb-tip { background: var(--ink-3); }
:root[data-theme="dark"] .sb-tip::before { border-right-color: var(--ink-3); }
/* My presence dot on the topbar avatar (bottom-right; unread dot stays top-right) */
.tb-avatar .p-dot { bottom: -1px; right: -1px; width: 11px; height: 11px; border: 2px solid var(--card); }
/* Messages grid: columns align at the top */
.msg-wrap > .card { margin: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--card); }
/* Masked secret inputs (text type so password managers leave them alone) */
.ig-secret { -webkit-text-security: disc; }
/* Sidebar logo: framed variant in dark mode */
.sb-brand .brand-dark { display: none; height: 40px; width: auto; border-radius: 6px; }
:root[data-theme="dark"] .sb-brand .brand-full { display: none; }
:root[data-theme="dark"] .sb-brand .brand-dark { display: block; }
html.sb-mode-rail .sb .sb-brand .brand-dark,
html.sb-mode-auto .sb:not(:hover) .sb-brand .brand-dark { display: none !important; }
/* Theme mode segmented control (avatar menu) */
.um-theme {
display: flex; margin: 2px 14px 10px; padding: 3px;
background: var(--field); border: 1px solid var(--line); border-radius: 9px;
}
.dd-menu .um-theme button {
flex: 1; display: block; width: auto; min-height: 0; text-align: center;
font: inherit; font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer;
padding: 7px 0; border: 0; border-radius: 6px;
background: transparent; color: var(--muted); transition: background .12s, color .12s;
}
.dd-menu .um-theme button:hover { background: transparent; color: var(--text); }
.dd-menu .um-theme button.is-current,
.dd-menu .um-theme button.is-current:hover { background: var(--orange); color: #fff; }
/* Login: follows theme mode; dark logo variant on the card in dark mode */
.auth-brand .brand-dark { display: none; }
:root[data-theme="dark"] .auth-brand .brand-light { display: none; }
:root[data-theme="dark"] .auth-brand .brand-dark { display: block; }
:root[data-theme="light"] .auth-body {
background:
radial-gradient(900px 480px at 85% -10%, rgba(255, 117, 31, .07), transparent 55%),
linear-gradient(180deg, #f7f7f8, #eceef1);
}
:root[data-theme="light"] .auth-card { box-shadow: 0 24px 70px rgba(16, 20, 28, .16); }
/* Invoice line items: inputs fill their cells; labeled remove on mobile */
#items .rm-txt { display: none; }
@media (max-width: 767px) {
#items .rm-x { display: none; }
#items .rm-txt { display: inline; }
#items td[data-label="Line total"] { font-weight: 700; }
}
/* Messages: group avatars, sender names, sidebar unread badge */
.grp-av {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px; border-radius: 50%; flex: none;
background: var(--orange); color: #fff; font-weight: 700; font-size: 14px;
}
.msg-thread__head .grp-av { width: 34px; height: 34px; font-size: 13px; }
.msg-bubble__who { font-size: 11px; font-weight: 700; color: var(--orange-dark); margin-bottom: 2px; }
.msg-list__head { display: flex; align-items: center; }
.sb-badge {
margin-left: auto; background: var(--orange); color: #fff;
font-size: 11px; font-weight: 700; line-height: 1;
padding: 3px 7px; border-radius: 999px;
}
html.sb-mode-rail .sb .sb-badge, html.sb-mode-auto .sb:not(:hover) .sb-badge {
position: absolute; top: 4px; right: 8px; margin: 0;
font-size: 0; width: 9px; height: 9px; padding: 0;
}
/* Docs: folder icon grid */
.fold-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.fold-card {
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: 4px; padding: 26px 16px 20px;
background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
text-decoration: none; color: var(--text);
transition: border-color .12s, transform .12s;
}
.fold-card:hover { border-color: var(--orange); transform: translateY(-1px); }
.fold-card svg { width: 46px; height: 46px; color: var(--orange); margin-bottom: 6px; }
.fold-name { font-weight: 700; font-size: 14.5px; }
.fold-count { font-size: 12px; color: var(--muted); }
/* Move-to-folder modal (Drive-style tree navigation) */
.mv-overlay {
position: fixed; inset: 0; z-index: 300; display: none;
background: rgba(10, 10, 14, .55); align-items: center; justify-content: center; padding: 18px;
}
.mv-overlay.is-open { display: flex; }
.mv-box {
width: 100%; max-width: 440px; background: var(--card);
border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: 0 24px 70px rgba(0, 0, 0, .4); display: flex; flex-direction: column; max-height: 76vh;
}
.mv-head { padding: 16px 18px 10px; border-bottom: 1px solid var(--line); }
.mv-title { font-weight: 700; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-path { font-size: 12px; color: var(--muted); margin-top: 3px; }
.mv-list { overflow-y: auto; padding: 6px; flex: 1; min-height: 180px; }
.mv-row {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 10px 12px; border: 0; background: none; border-radius: 8px;
font: inherit; font-size: 13.5px; color: var(--text); cursor: pointer; text-align: left;
}
.mv-row:hover { background: var(--field); }
.mv-row svg { width: 20px; height: 20px; color: var(--orange); flex: none; }
.mv-chev { margin-left: auto; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-top: 2px solid var(--muted); transform: rotate(45deg); }
.mv-chev-back { width: 7px; height: 7px; border-left: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); flex: none; }
.mv-up { color: var(--muted); font-weight: 600; }
.mv-empty { padding: 22px 14px; font-size: 13px; color: var(--muted); text-align: center; }
.mv-actions { display: flex; gap: 10px; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--line); }
.mv-actions .btn[disabled] { opacity: .5; cursor: default; }
/* Topbar message + notification menus (2026-07-22) */
.tb-icon-wrap { position: relative; }
.tb-iconbtn {
position: relative; width: 40px; height: 40px; border-radius: 12px;
background: var(--bg); border: 1px solid var(--line); cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: var(--muted); transition: all .13s;
}
.tb-iconbtn:hover { border-color: rgba(255,117,31,.5); color: var(--orange); background: rgba(255,117,31,.07); }
.tb-iconbtn:active { transform: scale(.93); }
.tb-iconbtn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; }
.tb-badge {
position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px;
background: var(--orange); color: #fff; border-radius: 999px;
font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; padding: 0 5px;
border: 2px solid var(--card); box-sizing: content-box; box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.tb-menu { width: 360px; max-width: calc(100vw - 24px); padding: 0; overflow: hidden; border-radius: 16px; }
.tb-menu-head {
padding: 13px 16px 11px; font-weight: 700; font-size: 14px;
border-bottom: 1px solid var(--line); color: var(--text);
}
.tb-menu-day {
padding: 9px 16px 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
text-transform: uppercase; color: var(--muted);
}
.tb-menu-list { max-height: 380px; overflow-y: auto; overscroll-behavior: contain; }
.tb-menu-item {
display: flex; gap: 12px; align-items: center; padding: 10px 16px;
text-decoration: none; transition: background .1s; position: relative;
}
.tb-menu-item:hover { background: var(--bg); }
.tb-menu-item.is-unread { background: rgba(255,117,31,.05); }
.tb-menu-item.is-unread:hover { background: rgba(255,117,31,.10); }
.tb-menu-item.is-unread .t { font-weight: 700; }
.tb-nicon {
flex: none; width: 36px; height: 36px; border-radius: 11px;
display: flex; align-items: center; justify-content: center;
}
.tb-nicon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.nk-person { background: rgba(29,78,216,.10); color: #1d4ed8; }
.nk-alert { background: rgba(176,42,42,.10); color: #b02a2a; }
.nk-money { background: rgba(28,122,63,.10); color: #1c7a3f; }
.nk-rfp { background: rgba(180,83,9,.12); color: #b45309; }
.nk-company { background: rgba(91,100,114,.12); color: #5b6472; }
.nk-doc { background: rgba(109,40,217,.10); color: #6d28d9; }
.nk-default { background: rgba(255,117,31,.12); color: var(--orange); }
html[data-theme="dark"] .nk-person { color: #93b4f5; }
html[data-theme="dark"] .nk-alert { color: #e08585; }
html[data-theme="dark"] .nk-money { color: #7fc79a; }
html[data-theme="dark"] .nk-rfp { color: #dfa060; }
html[data-theme="dark"] .nk-company { color: #a8b0bc; }
html[data-theme="dark"] .nk-doc { color: #bda4ec; }
.tb-menu-av {
flex: none; width: 38px; height: 38px; border-radius: 50%;
background: linear-gradient(135deg, #2a2a2e, #48484e); color: #fff;
font-size: 13px; font-weight: 700; letter-spacing: .02em;
display: flex; align-items: center; justify-content: center;
}
.tb-menu-av.is-group { background: linear-gradient(135deg, #FF751F, #e05a08); }
.tb-menu-av.is-group svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 1.8; }
.tb-menu-item.is-unread .tb-menu-av { background: linear-gradient(135deg, #FF751F, #e05a08); }
.tb-menu-main { flex: 1; min-width: 0; }
.tb-menu-item .trow { display: flex; align-items: baseline; gap: 8px; }
.tb-menu-item .t {
font-size: 13px; font-weight: 570; color: var(--text); line-height: 1.4;
flex: 1; min-width: 0; overflow: hidden; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.tb-menu-item .tm { flex: none; font-size: 11px; color: var(--muted); }
.tb-menu-item .s {
font-size: 12.5px; color: var(--muted); margin-top: 1px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tb-fresh { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.tb-count {
flex: none; min-width: 19px; height: 19px; background: var(--orange); color: #fff;
border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 19px;
text-align: center; padding: 0 5px;
}
.tb-menu-empty {
padding: 34px 16px; font-size: 13px; color: var(--muted); text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.tb-menu-empty svg { width: 26px; height: 26px; fill: none; stroke: var(--line-strong); stroke-width: 1.6; }
.tb-menu-foot {
display: block; padding: 11px 16px; text-align: center; font-size: 12.5px; font-weight: 700;
color: var(--orange); text-decoration: none; border-top: 1px solid var(--line); transition: background .1s;
}
.tb-menu-foot:hover { background: rgba(255,117,31,.08); }
.tb-tabs { display: flex; gap: 2px; padding: 8px 12px 0; border-bottom: 1px solid var(--line); }
.tb-tab {
background: none; border: none; cursor: pointer; padding: 7px 11px 9px;
font-size: 12.5px; font-weight: 650; color: var(--muted);
border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .12s;
}
.tb-tab:hover { color: var(--text); }
.tb-tab.is-on { color: var(--orange); border-bottom-color: var(--orange); }
.tb-menu-item .t b { font-weight: 700; }
.tb-menu-item .t .ent { color: var(--orange); font-weight: 650; }
.tb-menu-item .meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.tb-pills { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.tb-pill {
font-size: 11px; font-weight: 650; padding: 2px 9px; border-radius: 7px;
background: var(--bg); border: 1px solid var(--line-strong); color: var(--muted);
}
.tb-menu-actions { display: flex; gap: 10px; padding: 11px 14px; border-top: 1px solid var(--line); }
.tb-menu-act {
flex: 1; text-align: center; padding: 9px 0; border-radius: 9px; cursor: pointer;
font-size: 12.5px; font-weight: 700; text-decoration: none; transition: all .12s;
background: var(--bg); border: 1px solid var(--line-strong); color: var(--text);
}
.tb-menu-act:hover { border-color: var(--orange); color: var(--orange); }
.tb-menu-act.is-primary { background: var(--orange); border-color: var(--orange); color: #fff; }
.tb-menu-act.is-primary:hover { background: #e05a08; color: #fff; }
@media (max-width: 640px) { .tb-menu { width: calc(100vw - 24px); } }
/* ============================================================
METRONIC FINISH LAYER (2026-07-22)
Metronic 9.5 design language mapped onto FCC HQ's own classes:
zinc contrast ramp, 13px type, real card anatomy, popover menus,
refined tables/buttons/inputs/modals, KeenIcons sizing.
============================================================ */
:root {
--bg: #fafafa;
--card: #ffffff;
--line: #e4e4e7;
--line-strong: #d4d4d8;
--muted: #71717a;
--text: #09090b;
--shadow-card: 0px 3px 11px 0px rgba(45, 72, 126, 0.08);
--shadow-pop: 0 10px 15px -3px rgba(0, 0, 0, .10), 0 4px 6px -4px rgba(0, 0, 0, .10);
--shadow-modal: 0 20px 25px -5px rgba(0, 0, 0, .12), 0 8px 10px -6px rgba(0, 0, 0, .10);
}
html[data-theme="dark"] {
--bg: #09090b;
--card: #0f0f12;
--line: #27272a;
--line-strong: #3f3f46;
--muted: #8b8b93;
--text: #fafafa;
--shadow-card: 0 1px 2px rgba(0, 0, 0, .4);
--shadow-pop: 0 10px 15px -3px rgba(0, 0, 0, .5), 0 4px 6px -4px rgba(0, 0, 0, .5);
--shadow-modal: 0 20px 25px -5px rgba(0, 0, 0, .6);
}
/* ---- Typography ---- */
body { font-size: 13px; letter-spacing: -0.006em; }
.page-head h1 { font-size: 1.375rem; font-weight: 650; letter-spacing: -0.02em; }
.page-head .sub { font-size: 13px; color: var(--muted); }
h2 { letter-spacing: -0.012em; }
/* ---- Cards: Metronic anatomy without markup changes ---- */
.card {
border-radius: 12px;
border: 1px solid var(--line);
box-shadow: none;
padding: 20px;
}
.card > h2:first-child {
margin: -20px -20px 16px;
padding: 0 20px;
min-height: 52px;
display: flex;
align-items: center;
border-bottom: 1px solid var(--line);
font-size: 14.5px;
font-weight: 650;
}
/* ---- Tables ---- */
.tbl th {
font-size: 11px;
font-weight: 650;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--muted);
padding: 10px 12px;
border-bottom: 1px solid var(--line);
}
.tbl td {
font-size: 13px;
padding: 11px 12px;
border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.tbl tbody tr { transition: background .1s; }
/* ---- Buttons ---- */
.btn {
font-size: 13px;
font-weight: 600;
border-radius: 8px;
transition: color .12s, background .12s, border-color .12s, box-shadow .12s, transform .06s;
}
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 117, 31, .35); }
.btn-ghost { border: 1px solid var(--line-strong); background: var(--card); }
.btn-ghost:hover { background: var(--bg); border-color: var(--muted); }
.btn-primary { box-shadow: 0 1px 2px rgba(255, 117, 31, .35); }
.btn-primary:hover { background: #e05a08; }
.btn-sm { font-size: 12.5px; border-radius: 7px; }
/* ---- Inputs ---- */
.fld label {
font-size: 12.5px;
font-weight: 600;
color: color-mix(in srgb, var(--text) 78%, var(--muted));
margin-bottom: 6px;
}
.fld input, .fld select, .fld textarea,
.tbl input:not([type=checkbox]), .tbl select {
font-size: 13px;
border-radius: 8px;
border: 1px solid var(--line-strong);
background: var(--card);
box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
transition: border-color .12s, box-shadow .12s;
}
.fld input:focus, .fld select:focus, .fld textarea:focus {
border-color: var(--orange);
box-shadow: 0 0 0 3px rgba(255, 117, 31, .18);
outline: none;
}
.fld input::placeholder, .fld textarea::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
/* ---- Dropdown menus (popover treatment) ---- */
.dd-menu {
border-radius: 12px;
border: 1px solid var(--line);
box-shadow: var(--shadow-pop);
padding: 6px;
}
.dd-menu a, .dd-menu button:not(.status-opt) {
border-radius: 8px;
font-size: 13px;
padding: 8px 10px;
transition: background .1s, color .1s;
}
.dd-menu a:hover { background: var(--bg); }
html[data-theme="dark"] .dd-menu a:hover { background: #18181b; }
.dd-menu .sep { margin: 6px -6px; }
.um-label { font-size: 10.5px; letter-spacing: .09em; }
.tb-menu { padding: 0; }
.tb-menu .tb-menu-head, .tb-menu .tb-tabs { padding-left: 16px; padding-right: 16px; }
/* ---- Modals ---- */
.mv-overlay { background: rgba(9, 9, 11, .55); backdrop-filter: blur(3px); }
.mv-box {
border-radius: 14px;
border: 1px solid var(--line);
box-shadow: var(--shadow-modal);
}
.mv-head { padding: 15px 20px; border-bottom: 1px solid var(--line); }
.mv-title { font-size: 14.5px; font-weight: 650; letter-spacing: -0.01em; }
.mv-actions { padding: 13px 20px; border-top: 1px solid var(--line); gap: 10px; }
/* ---- Pills & tags ---- */
.pill { font-size: 11.5px; font-weight: 650; border-radius: 6px; padding: 3px 8px; letter-spacing: .01em; }
.tag {
font-size: 11.5px;
font-weight: 600;
border-radius: 6px;
padding: 3px 8px;
margin: 2px 4px 2px 0;
background: var(--bg);
border: 1px solid var(--line);
color: var(--muted);
}
/* ---- KPI stat widgets ---- */
.kpi { border-radius: 12px; border: 1px solid var(--line); box-shadow: none; }
.kpi .l { font-size: 11px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.kpi .v { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.025em; }
.kpi .s { font-size: 12px; }
/* ---- Sidebar refinement (keep FCC ink identity) ---- */
.sb-nav .sb-item, .sb-nav a {
border-radius: 8px;
font-size: 13px;
transition: background .12s, color .12s;
}
.sb-label, .sb-section { font-size: 10.5px; letter-spacing: .1em; }
/* ---- Topbar ---- */
.tb { border-bottom: 1px solid var(--line); }
.tb-search input {
border-radius: 10px;
background: var(--bg);
border: 1px solid transparent;
font-size: 13px;
transition: background .12s, border-color .12s, box-shadow .12s;
}
.tb-search input:focus {
background: var(--card);
border-color: var(--orange);
box-shadow: 0 0 0 3px rgba(255, 117, 31, .15);
outline: none;
}
/* ---- KeenIcons sizing in chrome ---- */
i.ki-outline { line-height: 1; }
.sb-nav i.ki-outline { font-size: 17px; width: 20px; text-align: center; flex: none; }
.sb-collapse i.ki-outline { font-size: 15px; }
.tb-burger i.ki-outline, .tb-iconbtn i.ki-outline { font-size: 19px; }
.tb-search { position: relative; }
.tb-search i.ki-outline {
font-size: 15px; color: var(--muted);
position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
pointer-events: none;
}
.tb-search input { padding-left: 38px; }
.btn i.ki-outline { font-size: 15px; margin-right: 6px; vertical-align: -1px; }
.sb-user .out i.ki-outline { font-size: 16px; }
.um-theme i.ki-outline { font-size: 14px; }
/* ---- Scrollbars ---- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
::-webkit-scrollbar-track { background: transparent; }
/* ---- Focus visibility everywhere ---- */
a:focus-visible, button:focus-visible, [data-dd]:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(255, 117, 31, .35);
border-radius: 8px;
}
/* Display type: Inter for app headings (Oswald stays brand-only) */
.page-head h1, .card > h2:first-child, .card h2, .mv-title, .tb-menu-head,
.dd-menu .um-label, .kpi .l, .stage-cell .t, .fold-card .t {
font-family: Inter, -apple-system, sans-serif;
}
.page-head h1 { text-transform: none; font-size: 1.35rem; font-weight: 700; }
.card > h2:first-child, .card h2 { text-transform: none; font-size: 14.5px; font-weight: 650; }
.mv-title { text-transform: none; }
/* ============ Metronic drawers (exact port: 450px, 20px inset, rounded-xl) ============ */
.mtd-backdrop {
position: fixed; inset: 0; z-index: 940; background: rgba(9, 9, 11, .20);
opacity: 0; pointer-events: none; transition: opacity .25s;
}
.mtd-backdrop.open { opacity: 1; pointer-events: auto; }
.mtd {
position: fixed; z-index: 950; top: 20px; bottom: 20px; right: 20px;
width: 450px; max-width: 90%;
background: var(--card); border: 1px solid var(--line); border-radius: 12px;
box-shadow: var(--shadow-modal);
display: flex; flex-direction: column; overflow: hidden;
transform: translateX(calc(100% + 24px)); transition: transform .28s cubic-bezier(.32,.72,.35,1);
}
.mtd.open { transform: translateX(0); }
.mtd-head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 10px 20px; min-height: 46px;
font-size: 14px; font-weight: 650; color: var(--text);
border-bottom: 1px solid var(--line); flex: none;
}
.mtd-x {
width: 30px; height: 30px; border-radius: 8px; border: none; background: none;
color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: background .12s, color .12s;
}
.mtd-x:hover { background: var(--bg); color: var(--text); }
.mtd-x i { font-size: 15px; }
.mtd-tabs {
display: flex; align-items: center; gap: 20px; padding: 0 20px;
border-bottom: 1px solid var(--line); flex: none;
}
.mtd-tab {
position: relative; background: none; border: none; cursor: pointer;
padding: 12px 0; font-size: 13.5px; font-weight: 600; color: var(--muted);
border-bottom: 1px solid transparent; margin-bottom: -1px; transition: color .12s;
}
.mtd-tab:hover { color: var(--text); }
.mtd-tab.is-on { color: var(--text); border-bottom-color: var(--text); }
.mtd-dot {
position: absolute; top: 8px; right: -7px; width: 5px; height: 5px;
border-radius: 50%; background: #22c55e;
}
.mtd-list { flex: 1; overflow-y: auto; padding: 12px 0 16px; }
.mtd-item { display: flex; gap: 10px; padding: 10px 20px; text-decoration: none; }
.mtd-item:hover { background: color-mix(in srgb, var(--bg) 60%, transparent); }
.mtd-sep { border-bottom: 1px solid var(--line); margin: 10px 0; }
.mtd-av {
flex: none; width: 32px; height: 32px; border-radius: 50%; position: relative;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700; color: #fff; letter-spacing: .02em;
background: linear-gradient(135deg, #3f3f46, #232327);
}
.mtd-av.is-unread-av { background: linear-gradient(135deg, #FF751F, #e05a08); }
.mtd-tile {
flex: none; width: 32px; height: 32px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
}
.mtd-tile i { font-size: 16px; }
.mtd-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mtd-sentence { font-size: 13.5px; font-weight: 500; line-height: 1.5; color: #52525b; }
html[data-theme="dark"] .mtd-sentence { color: #a1a1aa; }
.mtd-sentence b { font-weight: 650; color: var(--text); }
.mtd-sentence .ent { color: var(--orange); font-weight: 600; }
.mtd-meta {
display: flex; align-items: center; font-size: 12px; font-weight: 500; color: var(--muted);
}
.mtd-meta .mdot {
width: 4px; height: 4px; border-radius: 50%; margin: 0 6px; flex: none;
background: color-mix(in srgb, var(--text) 30%, transparent);
}
.mtd-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.mtd-pill {
font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 6px;
border: 1px solid var(--line-strong); color: var(--muted); background: none;
}
.mtd-pill.is-orange { border-color: rgba(255,117,31,.45); color: var(--orange); }
.mtd-snippet {
font-size: 12.5px; color: var(--muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mtd-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.mtd-ago { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.mtd-count {
min-width: 19px; height: 19px; background: var(--orange); color: #fff;
border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 19px;
text-align: center; padding: 0 5px;
}
.mtd-fresh { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); margin-top: 5px; }
.mtd-empty { padding: 40px 20px; text-align: center; font-size: 13px; color: var(--muted); }
.mtd-foot {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 20px;
border-top: 1px solid var(--line); flex: none;
}
.mtd-foot-1 { grid-template-columns: 1fr; }
.mtd-btn {
display: flex; align-items: center; justify-content: center; height: 40px;
border-radius: 8px; border: 1px solid var(--line-strong); background: var(--card);
font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer;
text-decoration: none; transition: all .12s;
}
.mtd-btn:hover { background: var(--bg); border-color: var(--muted); }
.mtd-btn.is-primary { background: var(--orange); border-color: var(--orange); color: #fff; }
.mtd-btn.is-primary:hover { background: #e05a08; }
@media (max-width: 560px) { .mtd { top: 0; bottom: 0; right: 0; border-radius: 0; max-width: 100%; } }
/* ---- Buttons: exact Metronic kt-btn port ---- */
.btn {
display: inline-flex; align-items: center; justify-content: center;
height: 40px; gap: 6px; padding: 0 16px;
border-radius: 8px; border: 1px solid transparent;
font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0;
white-space: nowrap; cursor: pointer; text-decoration: none;
transition: color .15s, background .15s, border-color .15s, box-shadow .15s, transform .06s;
}
.btn-primary {
background: var(--orange); border-color: var(--orange); color: #fff; font-weight: 600;
box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.btn-primary:hover { background: #e05a08; border-color: #e05a08; color: #fff; }
.btn-ghost {
background: var(--card); border-color: var(--line-strong); color: var(--text);
box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.btn-ghost:hover { background: var(--bg); border-color: var(--muted); color: var(--text); }
.btn-danger { background: #dc2626; border-color: #dc2626; color: #fff; }
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }
.btn-sm { height: 30px; padding: 0 10px; font-size: 12px; border-radius: 8px; gap: 5px; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: default; }
html[data-theme="dark"] .btn-ghost { background: var(--card); border-color: var(--line-strong); }
html[data-theme="dark"] .btn-ghost:hover { background: #18181b; }
/* ---- CRM data grid ---- */
.dg th { white-space: nowrap; }
.dg-row { cursor: pointer; }
.dg-av {
flex: none; width: 34px; height: 34px; border-radius: 9px;
background: color-mix(in srgb, var(--orange) 14%, var(--card));
border: 1px solid color-mix(in srgb, var(--orange) 30%, transparent);
color: var(--orange); font-size: 13.5px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
.dg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.dg-foot {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 10px 16px; border-top: 1px solid var(--line); flex-wrap: wrap;
}
.tbadge {
display: inline-block; font-size: 11.5px; font-weight: 600; padding: 3px 9px;
border-radius: 6px; margin: 1px 3px 1px 0; white-space: nowrap;
}
.tb-blue { background: rgba(59,130,246,.10); color: #2563eb; }
.tb-green { background: rgba(34,197,94,.10); color: #16a34a; }
.tb-purple { background: rgba(139,92,246,.10); color: #7c3aed; }
.tb-amber { background: rgba(234,179,8,.12); color: #a16207; }
.tb-red { background: rgba(239,68,68,.10); color: #dc2626; }
.tb-cyan { background: rgba(6,182,212,.10); color: #0891b2; }
.tb-pink { background: rgba(236,72,153,.10); color: #db2777; }
.tb-slate { background: rgba(100,116,139,.12); color: #475569; }
.tb-orange { background: rgba(249,115,22,.10); color: #ea580c; }
.tb-teal { background: rgba(20,184,166,.10); color: #0d9488; }
.tb-indigo { background: rgba(99,102,241,.10); color: #4f46e5; }
.tb-lime { background: rgba(132,204,22,.12); color: #4d7c0f; }
.tb-brown { background: rgba(180,83,9,.12); color: #92400e; }
html[data-theme="dark"] .tb-blue { color: #93b4f5; }
html[data-theme="dark"] .tb-green { color: #7fc79a; }
html[data-theme="dark"] .tb-purple { color: #bda4ec; }
html[data-theme="dark"] .tb-amber { color: #dfc060; }
html[data-theme="dark"] .tb-red { color: #e08585; }
html[data-theme="dark"] .tb-cyan { color: #7ad3e6; }
html[data-theme="dark"] .tb-pink { color: #e592bc; }
html[data-theme="dark"] .tb-slate { color: #a8b0bc; }
html[data-theme="dark"] .tb-orange { color: #eda37a; }
html[data-theme="dark"] .tb-teal { color: #77cec4; }
html[data-theme="dark"] .tb-indigo { color: #a5a8f0; }
html[data-theme="dark"] .tb-lime { color: #b3d178; }
html[data-theme="dark"] .tb-brown { color: #d3a976; }
/* ---- Drawer chat bubbles ---- */
.mch-wrap { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; }
.mch-row { display: flex; gap: 8px; align-items: flex-end; }
.mch-row.is-mine { justify-content: flex-end; }
.mch-mav { width: 28px; height: 28px; font-size: 10.5px; flex: none; }
.mch-col { max-width: 78%; display: flex; flex-direction: column; }
.mch-row.is-mine .mch-col { align-items: flex-end; }
.mch-bubble {
background: var(--bg); border: 1px solid var(--line); color: var(--text);
border-radius: 10px; border-bottom-left-radius: 4px;
padding: 9px 13px; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word;
}
.mch-bubble.is-mine {
background: var(--orange); border-color: var(--orange); color: #fff;
border-radius: 10px; border-bottom-right-radius: 4px;
}
.mch-time { font-size: 11px; color: var(--muted); margin-top: 3px; padding: 0 3px; }
/* ============ Company detail: Metronic CRM concept ============ */
.c2 { background: var(--card); min-height: calc(100vh - 62px); }
.c2 .sp { flex: 1; }
[data-sec].is-closed .sec-body { display: none; }
[data-sec].is-closed .chev { transform: rotate(-90deg); }
.c2 .chev { transition: transform .15s; }
/* Header */
.c2-head {
display: flex; align-items: center; gap: 12px;
padding: 10px 20px; min-height: 58px; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.c2-head-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.c2-typetag { flex: none; }
.c2-actions-dots { display: none; }
.c2-back {
height: 36px; border-radius: 8px; color: var(--muted); flex: none;
border: 1px solid var(--line-strong); background: var(--card);
padding: 0 12px 0 9px; gap: 6px; font-size: 12.5px; font-weight: 600;
display: flex; align-items: center; justify-content: center; text-decoration: none;
transition: background .12s, color .12s, border-color .12s;
}
.c2-back:hover { background: var(--bg); color: var(--text); }
.c2-back i { font-size: 14px; }
img.dg-av, img.c2-av { object-fit: contain; background: #fff; padding: 3px; box-sizing: border-box; }
.c2-av {
width: 32px; height: 32px; border-radius: 50%; flex: none;
background: color-mix(in srgb, var(--orange) 14%, var(--card));
border: 1px solid color-mix(in srgb, var(--orange) 30%, transparent);
color: var(--orange); font-size: 13px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
.c2-name { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c2-head-r { display: flex; align-items: center; gap: 8px; margin-left: auto; }
@media (max-width: 767px) {
/* Metronic-style compact header: back+tag strip, wrapping name, icon buttons */
.c2-head { display: grid; grid-template-columns: auto 1fr; row-gap: 10px;
grid-template-areas: "back acts" "main main"; padding: 12px 14px; }
.c2-back { grid-area: back; }
.c2-head-main { grid-area: main; flex-wrap: wrap; }
.c2-typetag { font-size: 10.5px; padding: 2px 8px; }
.c2-head-r { grid-area: acts; justify-self: end; margin-left: 0; }
.c2-name { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }
.c2-btxt, .c2-actions-caret { display: none; }
.c2-actions-dots { display: inline-flex; font-size: 14px; }
.c2-head-r .btn-sm { width: 36px; min-height: 36px; padding: 0; justify-content: center; }
.c2-head-r .btn-sm i.ki-outline { font-size: 14px; }
.c2-head-r .status-btn { min-height: 32px; height: 32px; font-size: 11.5px; padding: 0 10px; }
}
.c2-head-r .status-btn { height: 30px; min-height: 30px; font-size: 12px; padding: 0 12px; }
.c2-head-r .btn-sm i.ki-outline { font-size: 12px; margin-right: 0; }
/* Split panes */
.c2-split { display: grid; grid-template-columns: 400px minmax(0, 1fr); align-items: stretch; }
.c2-main { min-width: 0; grid-column: 2; grid-row: 1; }
.c2-rail { min-width: 0; grid-column: 1; grid-row: 1; border-inline-end: 1px solid var(--line); }
@media (max-width: 1180px) {
.c2-split { grid-template-columns: 1fr; }
.c2-main { grid-column: 1; grid-row: 2; }
.c2-rail { grid-column: 1; grid-row: 1; border-inline-end: none; border-bottom: 1px solid var(--line); }
}
/* Tab rows */
.c2-tabs {
display: flex; align-items: center; gap: 4px; padding: 0 14px;
border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none;
}
.c2-tabs::-webkit-scrollbar { display: none; }
.c2-tab {
display: inline-flex; align-items: center; gap: 6px; flex: none;
padding: 6px 10px; margin: 8px 0; background: none; border: none; cursor: pointer;
font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted);
border-radius: 7px; transition: color .12s, background .12s;
}
.c2-tab i.ki-outline { font-size: 14px; }
.c2-tab:hover { color: var(--text); background: var(--panel); }
.c2-tab.is-on { color: var(--text); background: var(--field); }
span.c2-tab { cursor: default; }
@media (max-width: 767px) {
/* tabs always fit the screen: no scrolling, evenly distributed */
.c2-tabs { gap: 0; padding: 0 8px; overflow: visible; justify-content: space-between; }
.c2-tab { flex: 1 1 0; min-width: 0; justify-content: center; gap: 4px; font-size: 11.5px; padding: 11px 2px; white-space: nowrap; }
.c2-tab i.ki-outline { display: none; }
.c2-badge { min-width: 15px; height: 15px; padding: 0 4px; font-size: 10px; }
}
@media (max-width: 767px) {
/* many-tab pages opt into spaced, horizontally scrollable tabs */
.c2-tabs--scroll { justify-content: flex-start; gap: 18px; padding: 0 14px; overflow-x: auto; }
.c2-tabs--scroll .c2-tab { flex: none; min-width: auto; font-size: 12px; padding: 11px 0; }
}
@media (min-width: 768px) {
#sites-tbl td[data-label="Address"] { width: 26%; }
#sites-tbl td[data-label="Status"], #sites-tbl td:last-child,
#team-tbl td:last-child, #subs-tbl td:last-child { width: 1%; white-space: nowrap; }
#team-tbl td[data-label="Role"], #subs-tbl td[data-label="Trade"] { width: 22%; }
}
.c2-badge {
min-width: 17px; height: 17px; padding: 0 5px; border-radius: 5px;
background: color-mix(in srgb, var(--orange) 14%, transparent); color: var(--orange);
font-size: 11px; font-weight: 700; line-height: 17px; text-align: center;
}
/* Panels & sections */
.c2-panel { padding: 20px; }
.c2-sec { margin-bottom: 26px; }
.c2-sec:last-child { margin-bottom: 0; }
.c2-sec-h {
display: flex; align-items: center; gap: 7px; margin: 0 0 10px;
font-size: 13.5px; font-weight: 650; color: var(--text); min-height: 28px;
}
.c2-sec-h > i.ki-outline { font-size: 14px; color: var(--muted); }
.c2-collapse {
display: inline-flex; align-items: center; gap: 7px; padding: 4px 6px; margin: -4px -6px;
background: none; border: none; cursor: pointer; border-radius: 7px;
font: inherit; font-size: 13.5px; font-weight: 650; color: var(--text);
transition: background .12s;
}
.c2-collapse:hover { background: var(--bg); }
.c2-collapse i.ki-outline { font-size: 14px; color: var(--muted); }
.c2-collapse .chev { font-size: 11px; }
.c2-box { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
/* Legacy module cards embedded in c2 panels flatten into c2-style sections */
.c2-panel .card {
background: none; border: 0; box-shadow: none; border-radius: 0;
padding: 0; margin: 0 0 26px !important;
}
.c2-panel .card:last-child { margin-bottom: 0 !important; }
.c2-panel .card + .card { margin-top: 0; }
.c2-panel .card > h2:first-child {
margin: 0 0 10px; padding: 0; min-height: 28px; border-bottom: 0;
font-size: 13.5px; font-weight: 650; gap: 7px;
}
.c2-panel .card h2 { font-size: 13.5px; font-weight: 650; }
/* Highlight-card mini progress bar */
.c2-prog { height: 6px; border-radius: 4px; background: var(--line); overflow: hidden; margin: 5px 0; }
.c2-prog span { display: block; height: 100%; border-radius: 4px; background: var(--orange); }
/* Google Places dropdown, FCC-branded (site address inputs) */
.pac-container {
border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 34px rgba(20, 20, 20, .14);
font-family: inherit; margin-top: 6px; padding: 6px 0; background: var(--card); z-index: 1200;
}
.pac-item { padding: 9px 14px; font-size: 13px; color: var(--text); border-top: 0; cursor: pointer; line-height: 1.4; }
.pac-item:hover, .pac-item-selected, .pac-item-selected:hover { background: var(--orange-soft); }
.pac-item-query { font-size: 13px; color: var(--text); font-weight: 600; }
.pac-matched { color: var(--orange); }
.pac-icon { display: none; }
/* Details-rail inline field editing */
.c2-fld { display: flex; align-items: center; gap: 6px; min-width: 0; }
.c2-fld .c2-fv { min-width: 0; overflow-wrap: anywhere; }
.c2-fedit {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 6px;
background: var(--card); color: var(--muted); cursor: pointer; padding: 0;
opacity: .55; transition: opacity .12s, color .12s;
}
.c2-fedit:hover { opacity: 1; color: var(--text); }
.c2-fedit i { font-size: 11px; }
.c2-fedit.c2-fedit-lbl {
width: auto; height: 24px; padding: 0 9px; gap: 5px;
font-size: 11.5px; font-weight: 600; opacity: .8; border-radius: 6px;
}
/* Collapsible cards inside c2 panels */
.c2-panel .card > h2:first-child { cursor: pointer; user-select: none; }
.c2-panel .card h2 .card-chev { font-size: 11px; color: var(--muted); transition: transform .15s; flex: none; }
.c2-panel .card.is-closed h2 .card-chev { transform: rotate(-90deg); }
.c2-panel .card.is-closed > :not(h2) { display: none; }
.c2-panel .card.is-closed > h2:first-child { margin-bottom: 0; }
/* Modal forms: body scrolls, actions stay pinned (tall modals on short screens) */
.mv-box > form { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.mv-box > form > div:first-of-type { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.mv-box > form > .mv-actions { flex: none; }
/* hqSelect: searchable native-select overlay */
select.hqs-hidden { display: none !important; }
.hqs-btn {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
width: auto; min-width: 150px; min-height: 44px; padding: 0 13px; text-align: left; cursor: pointer;
border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
font: inherit; font-size: 14px; background: var(--field); color: var(--text);
}
.hqs-btn .hqs-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hqs-btn .hqs-ph { color: var(--muted); }
.hqs-btn i { font-size: 12px; color: var(--muted); flex: none; }
.c2-fform .hqs-btn { min-height: 28px; height: 28px; padding: 0 8px; font-size: 12.5px; border-radius: 8px; border-color: var(--line); }
.fld .hqs-btn, .form-row .hqs-btn, .mv-box .hqs-btn, .c2-fform .hqs-btn { width: 100%; }
.c2-fform .hqs-btn { min-width: 0; }
.filterbar .hqs-btn { min-height: 42px; height: 42px; flex: none; }
@media (max-width: 767px) { form[method=get] .hqs-btn, .filterbar .hqs-btn { width: 100%; } }
.hqs-menu {
position: fixed; z-index: 1300; display: flex; flex-direction: column;
background: var(--card); border: 1px solid var(--line); border-radius: 12px;
box-shadow: 0 14px 34px rgba(0, 0, 0, .25); overflow: hidden; min-width: 180px;
}
.hqs-search {
margin: 8px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px;
font: inherit; font-size: 13px; background: var(--field); color: var(--text); flex: none;
}
.hqs-list { overflow-y: auto; padding: 4px; }
.hqs-opt {
display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0;
background: none; border-radius: 8px; font: inherit; font-size: 13.5px;
color: var(--text); cursor: pointer;
}
.hqs-opt:hover, .hqs-opt.is-active { background: var(--orange-soft); }
.hqs-opt.is-sel { font-weight: 700; color: var(--orange); }
.hqs-none { padding: 12px; font-size: 12.5px; color: var(--muted); text-align: center; }
/* Overview progress visuals */
.pg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.pg-card {
border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
padding: 14px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
}
.pg-card.pg-wide { grid-column: span 2; align-items: stretch; text-align: left; justify-content: center; }
@media (max-width: 767px) { .pg-card.pg-wide { grid-column: 1 / -1; } }
.pg-donut { position: relative; width: 76px; height: 76px; }
.pg-donut svg { width: 76px; height: 76px; display: block; }
.pg-num {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 700; letter-spacing: -.02em;
}
.pg-t { font-size: 12.5px; font-weight: 650; margin-top: 2px; }
.pg-s { font-size: 11.5px; color: var(--muted); }
.pg-bar-row { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.pg-bar-k { flex: none; width: 72px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.pg-bar { flex: 1; height: 10px; border-radius: 5px; background: var(--field); overflow: hidden; }
.pg-bar span { display: block; height: 100%; border-radius: 5px; }
.pg-bar-v { flex: none; min-width: 64px; text-align: right; font-size: 11.5px; font-weight: 650; }
.pg-spark { flex: 1; height: 40px; }
/* Activity timeline (project page) */
.act-comp { display: flex; gap: 8px; margin-bottom: 16px; align-items: stretch; }
.act-feed { position: relative; }
.act-feed::before { content: ""; position: absolute; left: 13px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.act-day {
position: relative; z-index: 1; display: inline-block; margin: 12px 0 4px 40px;
padding: 3px 10px; font-size: 10.5px; font-weight: 650; letter-spacing: .06em;
text-transform: uppercase; color: var(--muted); background: var(--field); border-radius: 20px;
}
.act-row { position: relative; display: flex; gap: 11px; padding: 8px 0; }
.act-ic, .act-avwrap {
position: relative; z-index: 1; flex: none; width: 28px; height: 28px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--field); border: 1px solid var(--line); color: var(--muted); overflow: hidden;
}
.act-ic i { font-size: 13px; }
.act-avwrap { border: 0; }
.act-avwrap img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.act-ic.ic-stage, .act-ic.ic-team { background: var(--blue-soft); color: var(--blue); border-color: transparent; }
.act-ic.ic-money { background: var(--green-soft); color: var(--green); border-color: transparent; }
.act-ic.ic-alert { background: var(--amber-soft); color: var(--amber); border-color: transparent; }
.act-ic.ic-field { background: var(--orange-soft); color: var(--orange); border-color: transparent; }
.act-main { min-width: 0; flex: 1; }
.act-body { font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; }
.act-row.is-note .act-body {
background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px;
}
.act-meta { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
/* File-pick dropzone (upload modals) */
.file-pick {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
padding: 22px 16px; border: 1.5px dashed var(--line-strong); border-radius: 12px;
background: var(--field); cursor: pointer; text-align: center;
transition: border-color .12s, background .12s;
}
.file-pick:hover { border-color: var(--orange); }
.file-pick.has-file { border-style: solid; border-color: var(--orange); }
.file-pick i { font-size: 22px; color: var(--muted); }
.file-pick.has-file i { color: var(--orange); }
.file-pick .fp-name { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.file-pick .fp-hint { font-size: 11.5px; color: var(--muted); }
/* Site page: photo grid + notes feed */
.site-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; }
.site-photo { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4 / 3; background: var(--field); }
.site-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .15s; }
.site-photo:hover img { transform: scale(1.04); }
.site-notes { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.site-notes li { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.site-notes li.is-sys { background: none; border-style: dashed; }
.site-notes .sn-body { font-size: 13px; line-height: 1.55; }
.site-notes li.is-sys .sn-body { color: var(--muted); font-size: 12.5px; }
.site-notes .sn-meta { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
/* Mapbox popups follow the app theme */
.mapboxgl-popup-content {
background: var(--card) !important; color: var(--text) !important;
border-radius: 10px !important; border: 1px solid var(--line);
box-shadow: 0 10px 28px rgba(0, 0, 0, .35) !important;
padding: 12px 16px !important; font-family: inherit !important;
}
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip { border-bottom-color: var(--card) !important; }
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip { border-top-color: var(--card) !important; }
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip { border-right-color: var(--card) !important; }
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip { border-left-color: var(--card) !important; }
.mapboxgl-popup-close-button { color: var(--muted) !important; font-size: 17px; right: 4px; top: 2px; }
.mapboxgl-popup-close-button:hover { background: none !important; color: var(--text) !important; }
/* Map site labels */
.map-lbl { background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 6px; font-size: 11px; font-weight: 650; padding: 2px 7px; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.map-lbl::before { display: none; }
/* Compliance dot clusters */
.cd-dots { display: inline-flex; gap: 5px; align-items: center; }
.cd-dots .c2-dot { width: 9px; height: 9px; cursor: help; }
.c2-dot--none { background: var(--line-strong); }
/* Compact status pill for table rows */
.status-btn.sm { min-height: 28px; font-size: 11.5px; padding: 0 10px; border-radius: 6px; }
.c2-fform { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.c2-fform[hidden] { display: none !important; }
.c2-fld.is-editing .c2-fv, .c2-fld.is-editing .c2-fedit { display: none; }
.c2-fform input[name=value], .c2-fform select {
flex: 1; min-width: 0; width: 100%; height: 28px; padding: 0 8px;
border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 12.5px;
background: var(--field); color: var(--text);
}
.c2-fform .c2-fsave { flex: 0 0 auto; height: 28px; padding: 0 10px; font-size: 12px; }
.c2-iconbtn {
width: 28px; height: 28px; border-radius: 7px; border: none; background: none;
color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
transition: background .12s, color .12s;
}
.c2-iconbtn:hover { background: var(--bg); color: var(--text); }
.c2-iconbtn i { font-size: 14px; }
/* Highlights minicards */
.c2-hl { display: flex; gap: 14px; flex-wrap: wrap; }
.c2-hlcard { width: 290px; max-width: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
@media (max-width: 767px) { .c2-hl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .c2-hlcard { width: auto; } }
.c2-hlcard-t {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
min-height: 38px; padding: 0 12px; font-size: 12.5px; color: var(--text); font-weight: 500;
}
.c2-hlcard-b { padding: 2px 12px 12px; }
.c2-row { display: flex; align-items: center; gap: 7px; font-size: 13px; margin-top: 7px; min-width: 0; }
.c2-row:first-child { margin-top: 0; }
.c2-row i.ki-outline { font-size: 13.5px; color: var(--muted); flex: none; }
.c2-strong { font-weight: 600; }
.c2-dim { font-size: 12.5px; color: var(--muted); }
span.c2-dim { margin-left: auto; white-space: nowrap; }
.c2-row.c2-dim { margin-left: 0; }
.c2-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin: 0 2px; }
.c2-dot--ok { background: #22c55e; }
.c2-dot--expiring { background: #f59e0b; }
.c2-dot--expired, .c2-dot--missing { background: #ef4444; }
.c2-link { color: var(--text); text-decoration: none; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c2-link:hover { color: var(--orange); }
.c2-link.is-orange { color: var(--orange); }
.c2-link.is-orange:hover { opacity: .85; }
.c2-addr { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.4; }
/* TP-style status pills: full round, soft bg, leading status dot */
.pill{ border-radius:999px; display:inline-flex; align-items:center; gap:6px; font-weight:600; padding:3px 11px; }
.pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.pill-violet{ background:rgba(124,58,237,.10); color:#7c3aed; }
.pill-cyan{ background:rgba(14,116,144,.10); color:#0e7490; }
.pill-indigo{ background:rgba(79,70,229,.10); color:#4f46e5; }
.pill-teal{ background:rgba(15,118,110,.10); color:#0f766e; }
:root[data-theme="dark"] .pill-violet{ background:rgba(167,139,250,.14); color:#b4a3fa; }
:root[data-theme="dark"] .pill-cyan{ background:rgba(103,232,249,.12); color:#67e8f9; }
:root[data-theme="dark"] .pill-indigo{ background:rgba(129,140,248,.14); color:#a5b4fc; }
:root[data-theme="dark"] .pill-teal{ background:rgba(45,212,191,.12); color:#5eead4; }
/* TP-style tables (TrailingPaper /invoices): surface-2 thead band, 12/16 cells, hover rows */
.tbl{ font-size:14px; }
.tbl th{ background:transparent; font-size:11.5px; font-weight:600; color:var(--muted); letter-spacing:.08em; border-bottom:1px solid var(--line); }
.tbl td{ border-bottom:1px solid color-mix(in srgb, var(--line) 55%, transparent); }
@media (min-width:768px){
.tbl th{ padding:14px 16px; white-space:nowrap; }
.tbl td{ padding:15px 16px; }
}
.c2-code {
font-size: 11px; word-break: break-all; background: var(--bg);
border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; display: block; min-width: 0;
}
.c2-copy {
width: 24px; height: 24px; border-radius: 6px; border: none; background: none;
color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
transition: color .12s, background .12s; flex: none;
}
.c2-copy:hover { background: var(--bg); color: var(--orange); }
.c2-copy i { font-size: 12.5px; }
/* Feed */
.c2-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.c2-feed li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; min-width: 0; }
.c2-feed .hq-av { flex: none; }
.c2-feed-txt { flex: 1; min-width: 0; line-height: 1.5; padding-top: 2px; color: color-mix(in srgb, var(--text) 80%, var(--muted)); overflow-wrap: break-word; }
.c2-feed-txt b { font-weight: 650; color: var(--text); }
.c2-ago { flex: none; font-size: 11.5px; color: var(--muted); padding-top: 4px; white-space: nowrap; }
.c2-none { font-size: 13px; color: var(--muted); padding: 6px 2px; }
.c2-viewall {
display: inline-block; margin-top: 10px; padding: 0; border: none; background: none; cursor: pointer;
font-size: 12.5px; font-weight: 600; color: var(--orange); text-decoration: underline; text-underline-offset: 3px;
}
.c2-range {
display: inline-flex; gap: 2px; background: var(--bg);
border: 1px solid var(--line); border-radius: 8px; padding: 3px;
}
.c2-range button {
border: none; background: none; cursor: pointer; border-radius: 6px;
padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted);
transition: background .12s, color .12s;
}
.c2-range button:hover { color: var(--text); }
.c2-range button.is-on { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .07); }
html[data-theme="dark"] .c2-range button.is-on { background: #27272a; }
.c2-noteform { display: flex; gap: 10px; align-items: flex-end; }
@media (max-width: 560px) {
.c2-noteform { flex-direction: column; align-items: stretch; }
.c2-sec-h { flex-wrap: wrap; }
.c2-panel { padding: 16px 14px; }
}
/* Details rail */
.c2-rail-body { padding: 6px 0 20px; }
.c2-rsec { padding: 10px 20px 6px; }
.c2-rsec + .c2-rsec { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 14px; }
.c2-rsec-h {
display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
background: none; border: none; cursor: pointer; padding: 5px 6px; margin: 0 -6px 8px; border-radius: 7px;
font: inherit; font-size: 13px; font-weight: 650; color: var(--text);
transition: background .12s;
}
.c2-rsec-h:hover { background: var(--bg); }
.c2-rsec-h .chev { font-size: 11px; color: var(--muted); }
.c2-dl { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px 10px; font-size: 13px; }
.c2-dl-k { display: flex; align-items: flex-start; gap: 7px; color: var(--muted); padding-top: 1px; }
.c2-dl-k i.ki-outline { font-size: 14px; flex: none; margin-top: 1px; }
.c2-dl-v { min-width: 0; word-break: break-word; }
.c2-dl-v .c2-link { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.c2-ext { font-size: 11px; color: var(--muted); }
.c2-copywrap { display: inline-flex; align-items: center; gap: 2px; }
/* People tab cards */
.c2-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.c2-person { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--card); }
.c2-person__h { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.c2-person__av { width: 38px; height: 38px; border-radius: 50%; flex: none; display: inline-flex; align-items: center;
justify-content: center; font-size: 14px; font-weight: 700; color: var(--orange);
background: color-mix(in srgb, var(--orange) 12%, transparent); border: 1px solid color-mix(in srgb, var(--orange) 25%, transparent); }
.c2-person__m { min-width: 0; }
.c2-person__n { font-size: 13.5px; font-weight: 650; line-height: 1.3; }
.c2-person__t { font-size: 12px; color: var(--muted); margin-top: 1px; }
.c2-person__b { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); padding-top: 9px; }
.c2-namechip, .c2-pchip { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.c2-pchip {
border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px 2px 3px;
font-size: 12px; background: color-mix(in srgb, var(--bg) 60%, transparent);
}
.c2-minav {
width: 20px; height: 20px; border-radius: 50%; flex: none;
background: color-mix(in srgb, var(--orange) 14%, var(--card));
border: 1px solid color-mix(in srgb, var(--orange) 30%, transparent);
color: var(--orange); font-size: 10px; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
}
img.c2-minav { object-fit: cover; padding: 0; background: var(--card); }
.c2-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.c2-dl-k.c2-x, .c2-dl-v.c2-x { display: none; }
.show-all .c2-dl-k.c2-x { display: flex; }
.show-all .c2-dl-v.c2-x { display: block; }
.c2-showall {
display: inline-flex; align-items: center; gap: 5px; margin: 12px 0 4px;
border: none; background: none; cursor: pointer; padding: 4px 6px; margin-left: -6px;
border-radius: 7px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text);
transition: background .12s;
}
.c2-showall:hover { background: var(--bg); }
.c2-showall .chev { font-size: 11px; transition: transform .15s; }
.c2-showall.is-open .chev { transform: rotate(90deg); }
.c2-rsec .road { margin: 0; }
/* ── Metronic-style menu popover for regular pages (mirrors drawer kt-menu) ── */
.btn-iconb{width:34px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-strong);border-radius:8px;background:var(--card);color:var(--muted);cursor:pointer;transition:color .12s,background .12s,border-color .12s}
.btn-iconb:hover{color:var(--text);background:var(--field)}
.btn-iconb i{font-size:15px}
.ktm-menu{display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:200px;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.10);padding:8px 4px;flex-direction:column;gap:2px}
.dd.is-open .ktm-menu{display:flex}
.ktm-link{display:flex;align-items:center;gap:10px;padding:8px 10px;margin:0 4px;border-radius:8px;background:none;border:0;cursor:pointer;font:inherit;font-size:13px;font-weight:500;color:var(--text);text-decoration:none;text-align:start;white-space:nowrap}
.ktm-link:hover{background:var(--field)}
.ktm-link i{font-size:15px;color:var(--muted);width:18px;text-align:center;flex:none}
/* ── Mobile topbar search (hidden bar becomes a toggled overlay row) ── */
.tb-msearch{display:none}
@media (max-width:759px){
.tb-msearch{display:inline-flex}
html.tb-search-open .tb-search{
display:block;position:absolute;left:0;right:0;top:100%;margin:0;max-width:none;
padding:10px 14px;background:var(--card);border-bottom:1px solid var(--line);
box-shadow:0 14px 28px rgba(0,0,0,.12);z-index:55;
}
html.tb-search-open .tb-search input{width:100%;padding-left:46px}
html.tb-search-open .tb-search i.ki-outline{left:26px}
html.tb-search-open .tb-search .gs-dropdown{left:14px;right:14px}
}
/* ── Dashboard v2 (Metronic cues) ─────────────────────────────────── */
.db-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:1px;margin-bottom:16px;
background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.db-stat{background:var(--card);border:0;border-radius:0;box-shadow:none;padding:14px 16px;text-decoration:none;color:var(--text);display:block;position:relative;transition:background .12s}
.db-stat:hover{background:var(--panel)}
.db-ic{display:inline-flex;align-items:center;justify-content:center;background:none;margin-bottom:8px}
.db-ic i{font-size:16px;color:var(--muted)}
.db-ic--sm{margin:0;flex:none}
.db-ic--sm i{font-size:15px}
.db-stat .v{font-size:24px;line-height:1.05;font-weight:650;font-variant-numeric:tabular-nums}
.db-stat .v .dim{font-size:16px;color:var(--muted);font-weight:600}
.db-stat .l{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:4px}
.db-stat .d{font-size:12px;color:var(--muted);margin-top:7px}
.db-stat .d b{color:#16a34a;font-weight:700}
.db-stat .d b.bad{color:var(--red)}
.db-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;align-items:stretch;margin-bottom:16px}
.db-grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch}
.db-grid2>.card{height:100%}
.db-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.db-col .card + .card{margin-top:0}
@media (max-width:980px){.db-grid,.db-grid2{grid-template-columns:1fr}}
.db-card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.db-card-h h2{margin:0;font-size:11px !important;font-weight:600 !important;text-transform:uppercase !important;letter-spacing:.06em !important;color:var(--muted) !important}
.db-card-h a{font-size:12px;font-weight:600}
.db-card-h a{font-size:12.5px;font-weight:650;color:var(--orange);text-decoration:none}
.db-card-h a:hover{opacity:.85}
.db-bars{display:flex;flex-direction:column;gap:4px}
.db-bar{display:flex;align-items:center;gap:12px;padding:7px 6px;border-radius:8px;text-decoration:none;color:var(--text);font-size:13px}
.db-bar:hover{background:var(--field)}
.db-bar__label{flex:0 0 120px;color:var(--muted);font-weight:600;font-size:12.5px}
.db-bar__track{flex:1;height:8px;border-radius:99px;background:var(--field);overflow:hidden}
.db-bar__track span{display:block;height:100%;border-radius:99px;background:var(--orange)}
.db-bar__n{flex:0 0 26px;text-align:right;font-weight:700}
.db-bar__val{flex:0 0 62px;text-align:right;color:var(--muted);font-size:12px;font-weight:600}
.db-att-list{display:flex;flex-direction:column}
.db-att{display:flex;align-items:center;gap:11px;padding:9px 6px;border-radius:9px;text-decoration:none;color:var(--text);font-size:13.5px;font-weight:550}
.db-att:hover{background:var(--field)}
.db-att .grow{flex:1;min-width:0}
.db-att + .db-att{border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.db-count{min-width:24px;height:22px;padding:0 8px;border-radius:99px;background:color-mix(in srgb,var(--orange) 14%,transparent);color:var(--orange);font-size:12px;font-weight:750;display:inline-flex;align-items:center;justify-content:center}
.db-clear{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:13.5px;padding:8px 2px}
.db-clear i{color:#16a34a;font-size:18px}
.db-feed,.db-team,.db-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.db-feed li,.db-team li,.db-list li{display:flex;align-items:flex-start;gap:11px;padding:9px 2px;font-size:13px}
.db-feed li + li,.db-team li + li,.db-list li + li{border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.db-team li,.db-list li{align-items:center}
.db-fav{width:30px;height:30px;border-radius:99px;background:var(--field);border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;color:var(--text);flex:none}
.db-tav{position:relative;flex:none;display:inline-flex}
.db-tav .p-dot{position:absolute;right:-1px;bottom:-1px}
.db-feed__b{flex:1;min-width:0}
.db-feed .t{line-height:1.5;color:color-mix(in srgb,var(--text) 85%,var(--muted))}
.db-feed .t b{color:var(--text);font-weight:650}
.db-feed .m,.db-team .m,.db-list .m{font-size:11.5px;color:var(--muted);margin-top:2px;white-space:nowrap}
.db-feed .m a{color:var(--orange);font-weight:650;text-decoration:none}
.db-team .grow,.db-list .grow{flex:1}
.db-link{font-weight:650;color:var(--text);text-decoration:none;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-link:hover{color:var(--orange)}
.db-dot{display:inline-block;width:7px;height:7px;border-radius:99px;margin-right:4px;vertical-align:1px}
/* mobile: dashboard must never scroll sideways */
@media (max-width:767px){
.hq-content{overflow-x:hidden}
.db-grid>*,.db-grid2>*,.db-stats>*{min-width:0}
.db-col .card{min-width:0;overflow-x:hidden}
}
/* ---- iOS-style toggle switch (reusable) ----
Drop-in replacement for a native checkbox on boolean settings.
Markup:
44x26 track, 22px knob, orange when on. NOTE: not yet wired into the
settings forms — those still use native checkboxes; convert in a later pass. */
.hq-switch { display:inline-flex; align-items:center; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.hq-switch input { position:absolute; opacity:0; width:0; height:0; }
.hq-switch__track {
position:relative; width:44px; height:26px; border-radius:20px; flex-shrink:0;
background:var(--field); box-shadow:inset 0 0 0 .5px var(--line-strong);
transition:background .18s;
}
.hq-switch__track::after {
content:""; position:absolute; top:2px; left:2px; width:22px; height:22px;
border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:left .18s;
}
.hq-switch input:checked + .hq-switch__track { background:var(--orange); box-shadow:none; }
.hq-switch input:checked + .hq-switch__track::after { left:20px; }
.hq-switch input:focus-visible + .hq-switch__track { box-shadow:0 0 0 3px rgba(255,117,31,.35); }
/* SR-THEME-START · FCC — Site-Record styling, sitewide (brand palette). Reversible: delete this block. */
:root{
--orange:#FE5A01; --orange-dark:#D14A00; --orange-soft:#FFF0E8;
--grad-a:#FF6D05; --grad-b:#EB4205;
--bg:#FAFAFA; --card:#FFFFFF; --panel:#FFFFFF; --field:#FFFFFF; --surface-2:#F5F5F6;
--line:rgba(9,9,11,.09); --line-strong:rgba(9,9,11,.15);
--text:#09090B; --muted:#71717A; --faint:#A6A6AD;
--green:#16794A; --green-soft:#EAF6F0;
--red:#C0392B; --red-soft:#FDECEA; --red-line:rgba(192,57,43,.28);
--blue:#2563EB; --blue-soft:#EBF1FE;
--amber:#A16207; --amber-soft:#FBF3E2;
--radius:11px; --radius-sm:8px;
--shadow:0 1px 2px rgba(9,9,11,.05), 0 4px 16px -8px rgba(9,9,11,.10);
--shadow-card:0 1px 2px rgba(9,9,11,.05), 0 4px 16px -8px rgba(9,9,11,.10);
--pop-shadow:0 12px 32px -12px rgba(9,9,11,.20), 0 3px 10px -4px rgba(9,9,11,.12);
--sb-bg:#FAFAFA; --sb-hover:#F5F5F6; --sb-active:#F5F5F6;
--sb-text:#54545D; --sb-strong:#09090B; --sb-muted:#75757E; --sb-line:rgba(9,9,11,.09);
}
html[data-theme="dark"], :root[data-theme="dark"]{
--orange:#FF7A2F; --orange-dark:#E85D00; --orange-soft:rgba(254,90,1,.15);
--grad-a:#FF7A2F; --grad-b:#EB4205;
--bg:#08090A; --card:#0C0D0F; --panel:#0C0D0F; --field:#0C0D0F; --surface-2:#131417;
--line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.14);
--text:#F4F4F5; --muted:#8A8A93; --faint:#48484F;
--green:#43B679; --green-soft:rgba(63,191,119,.15);
--red:#EA5F59; --red-soft:rgba(234,95,89,.15); --red-line:rgba(234,95,89,.4);
--blue:#5E8BF0; --blue-soft:rgba(94,139,240,.15);
--amber:#E0A93F; --amber-soft:rgba(224,169,63,.15);
--shadow:0 1px 2px rgba(0,0,0,.3), 0 4px 16px -8px rgba(0,0,0,.5);
--shadow-card:0 1px 2px rgba(0,0,0,.3), 0 4px 16px -8px rgba(0,0,0,.5);
--pop-shadow:0 14px 36px -12px rgba(0,0,0,.6), 0 3px 12px -4px rgba(0,0,0,.5);
--sb-bg:#08090A; --sb-hover:#131417; --sb-active:#131417;
--sb-text:#9A9AA2; --sb-strong:#F4F4F5; --sb-muted:#6B6B73; --sb-line:rgba(255,255,255,.08);
}
/* Type — tighten display headings */
h1,h2,h3,.card h2{ letter-spacing:-.021em; }
/* Buttons — ONE radius across every button; orange buttons use the brand gradient */
.btn, .btn-sm, .btn-outline, .tb-ico, .tb-iconbtn, .tb-burger, .c2-iconbtn, .filterbar .fbtn, .sb-collapse, .tb-menu-act{ border-radius:var(--radius-sm); }
.btn{ font-weight:500; }
/* Full buttons + default status buttons are 42px (matches page-head rows). .c2-head-r shrinks status to 30px to match its .btn-sm row. */
.btn:not(.btn-sm), .status-btn{ box-sizing:border-box; height:42px; min-height:42px; }
.btn:focus-visible{ box-shadow:0 0 0 3px rgba(254,90,1,.30); }
.btn-ghost{ background:var(--card); border:1px solid var(--line); color:var(--text); }
.btn-ghost:hover{ border-color:var(--line-strong); background:var(--surface-2); }
/* Orange action buttons -> brand gradient */
.btn-primary, .filterbar .fbtn, .tb-menu-act.is-primary, .kb-empty--cta{ background:linear-gradient(135deg,var(--grad-a),var(--grad-b)); border-color:transparent; color:#fff; }
.btn-primary:hover, .filterbar .fbtn:hover, .tb-menu-act.is-primary:hover, .kb-empty--cta:hover{ background:linear-gradient(135deg,var(--grad-a),var(--grad-b)); filter:brightness(.95); }
/* Inputs — white field, hairline, accent focus */
input:not([type=checkbox]):not([type=radio]), select, textarea{ border-radius:8px; background:var(--field); border-color:var(--line); }
input:focus, select:focus, textarea:focus{ border-color:var(--orange); outline:none; }
:focus-visible{ outline:2px solid var(--orange); outline-offset:1px; }
/* Cards — hairline border, subtle depth */
.card{ border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); background:var(--card); }
/* KPIs — Site Record stat rail: joined, bordered, tight */
.kpis{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card); box-shadow:none; gap:0; }
.kpi{ border:0; border-left:1px solid var(--line); border-radius:0; box-shadow:none; background:transparent; }
.kpi:first-child{ border-left:0; }
.kpi:first-child{ border-left:0; }
.kpi .v{ font-size:22px; font-weight:600; letter-spacing:-.03em; }
.kpi .l{ text-transform:none; letter-spacing:0; font-weight:500; font-size:11.5px; color:var(--muted); }
/* Tables — Site Record aesthetic: muted uppercase header, hairline rows, subtle hover */
.tbl th{ background:transparent; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-size:11.5px; font-weight:600; }
.tbl td, .tbl th{ border-bottom:1px solid var(--line); }
/* ===== Sidebar — Site Record light rail (subtle hovers, soft active + orange icon) ===== */
.sb{ background:var(--bg); border-right:1px solid var(--line); }
.sb-brand .tag{ color:var(--orange); }
.sb-sec{ color:var(--faint); text-transform:uppercase; letter-spacing:.07em; font-weight:600; font-size:10px; padding:12px 8px 5px; }
.sb-item{ display:flex; align-items:center; gap:10px; padding:7px 9px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:500; color:var(--sb-text); position:relative; height:auto; min-height:0; transition:background .15s, color .15s; }
.sb-item svg{ stroke:var(--sb-text); }
.sb-item:hover{ background:var(--surface-2); color:var(--text); }
.sb-item:hover svg{ stroke:var(--text); }
.sb-item.is-active{ background:var(--surface-2); color:var(--text); font-weight:500; }
.sb-item.is-active::before{ display:none; }
.sb-item.is-active svg{ stroke:var(--orange); }
/* Match the main sidebar to the Site Record nav (.nav): weight 450/500, 7px radius, 16px icons that dim inactive -> text on hover -> accent when active */
.sb-nav .sb-item{ font-weight:450; border-radius:7px; }
.sb-nav .sb-item.is-active{ font-weight:500; }
.sb-nav i.ki-outline{ font-size:16px; width:16px; color:var(--sb-muted); }
.sb-nav .sb-item:hover i.ki-outline{ color:var(--sb-text); }
.sb-nav .sb-item.is-active i.ki-outline{ color:var(--orange); }
.sb-user{ border-top:1px solid var(--line); }
.sb-user-link:hover, .sb-user .out:hover, .sb-collapse:hover{ background:var(--surface-2); color:var(--text); }
.sb-user-link:hover svg, .sb-user .out:hover svg, .sb-collapse:hover svg{ stroke:var(--text); }
.sb-user .who .n{ color:var(--text); }
.sb-user .who .r{ color:var(--muted); }
.sb-user .out svg, .sb-collapse svg{ stroke:var(--muted); }
.sb-collapse{ color:var(--muted); }
/* ===== Top nav bar — match the rail (blur, hairline, bordered icon buttons) ===== */
.tb{ background:color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.tb-search input{ border:1px solid var(--line); background:var(--field); border-radius:8px; color:var(--text); }
.tb-search input:focus{ border-color:var(--orange); background:var(--field); }
.tb-ico, .tb-iconbtn, .tb-burger{ border:1px solid var(--line); border-radius:8px; color:var(--muted); background:var(--card); }
.tb-ico:hover, .tb-iconbtn:hover, .tb-burger:hover{ border-color:var(--line-strong); background:var(--surface-2); color:var(--text); }
/* Dropdowns / popovers — Vercel card, subtle-grey hover (not orange fill) */
.dd-menu, .status-menu{ background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:var(--pop-shadow); padding:5px; }
.dd-menu a, .dd-menu button, .status-opt{ border-radius:7px; padding:7px 9px; font-size:13px; color:var(--text); }
.dd-menu a:hover, .dd-menu button:hover, .status-opt:hover{ background:var(--surface-2); }
.status-opt.is-current{ font-weight:600; background:var(--surface-2); }
.dd-menu .sep{ background:var(--line); }
.dd-menu .um-theme button.is-current, .dd-menu .um-theme button.is-current:hover{ background:var(--orange-soft); color:var(--orange-dark); }
/* Round avatars everywhere (incl. contacts .dg-av / .c2-av) */
.gs-avatar, .dg-av, img.dg-av, .c2-av, img.c2-av, .c2-minav, .tb-menu-av, .mtd-av, .grp-av, .sb-user .avatar{ border-radius:50%; }
/* Tabs — flush, no radius */
.c2-tab{ border-radius:0; }
/* Topbar notification badge (exact spec) */
.tb-badge{ position:absolute; top:-10px; right:-10px; min-width:8px; height:18px; background:var(--orange); color:#fff; border-radius:999px; font-size:10.5px; font-weight:700; line-height:18px; text-align:center; padding:0 5px; border:2px solid var(--card); box-sizing:content-box; box-shadow:0 2px 6px rgba(0,0,0,.18); }
/* Content width: 1440 centered default; wide/board/map routes full-bleed */
.hq-content{ max-width:none; }
.hq-content.hq-wide{ max-width:none; }
/* SR-THEME-END */
/* ===== PM shell: Procore-style project flow (2026-08-18) ===== */
.pm-att{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:0 0 14px;font-size:12.5px}
.pm-att-lbl{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.pm-atti{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:8px;padding:5px 10px;font-weight:500;color:var(--text);text-decoration:none;background:var(--card)}
.pm-atti:hover{background:var(--field)}
.pm-atti b{font-weight:700;font-variant-numeric:tabular-nums}
.pm-dot{width:7px;height:7px;border-radius:50%;flex:none}
.pm-dot--red{background:#b02a2a}.pm-dot--amber{background:#b45309}.pm-dot--orange{background:var(--orange)}.pm-dot--blue{background:#1d4ed8}
:root[data-theme=dark] .pm-dot--red{background:#e5484d}
:root[data-theme=dark] .pm-dot--amber{background:#e5931a}
:root[data-theme=dark] .pm-dot--blue{background:#6a9cf7}
.pm-seg{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;flex:none}
.pm-seg a,.pm-seg span{font-size:12.5px;font-weight:600;color:var(--muted);padding:6px 13px;border-right:1px solid var(--line);text-decoration:none;white-space:nowrap}
.pm-seg a:last-child,.pm-seg span:last-child{border-right:0}
.pm-seg .is-on{background:rgba(255,117,31,.1);color:var(--orange)}
.pill.pm-ph-pursuit{color:var(--orange);background:rgba(255,117,31,.12)}
.pill.pm-ph-delivery{color:#1c7a3f;background:rgba(28,122,63,.12)}
:root[data-theme=dark] .pill.pm-ph-delivery{color:#3fae72}
/* chevron process bar */
.pbar-wrap{background:var(--card);border:1px solid var(--line);border-radius:12px;margin:14px 0;overflow-x:auto}
.pbar{display:flex;min-width:880px}
.pseg{--segbg:var(--card);flex:1;position:relative;background:var(--segbg);padding:0 8px 0 24px;min-width:0;height:44px;display:flex;flex-direction:column;justify-content:center}
.pseg:first-child{padding-left:14px;border-radius:12px 0 0 12px}
.pseg:last-child{border-radius:0 12px 12px 0}
.pseg::before{content:"";position:absolute;right:-11px;top:0;border-left:11px solid var(--line);border-top:22px solid transparent;border-bottom:22px solid transparent;z-index:2}
.pseg::after{content:"";position:absolute;right:-9px;top:0;border-left:9px solid var(--segbg);border-top:22px solid transparent;border-bottom:22px solid transparent;z-index:3}
.pseg:last-child::before,.pseg:last-child::after{display:none}
.pseg .t{font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.pseg .s{font-size:10px;color:var(--muted);opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.pseg.done{--segbg:var(--field)}
.pseg.done .t{color:var(--text)}
.pseg.done .t b{color:#1c7a3f;margin-right:4px;font-weight:700}
:root[data-theme=dark] .pseg.done .t b{color:#3fae72}
.pseg.now{--segbg:var(--orange)}
.pseg.now .t,.pseg.now .s{color:#fff}
.pseg.now .s{opacity:.9}
.pseg.gate{flex:0 0 122px}
.pseg.gate .t{letter-spacing:.07em}
.pseg.gate.done{--segbg:#141414}
.pseg.gate.done .t,.pseg.gate.done .s{color:#fff}
:root[data-theme=dark] .pseg.gate.done{--segbg:#f4f4f5}
:root[data-theme=dark] .pseg.gate.done .t,:root[data-theme=dark] .pseg.gate.done .s{color:#141414}
.pseg.gate.now{--segbg:var(--orange)}
.pseg.gate.now .t,.pseg.gate.now .s{color:#fff}
.pseg.gate.is-passed{--segbg:#b02a2a}
.pseg.gate.is-passed .t,.pseg.gate.is-passed .s{color:#fff}
/* slim banner (full soft tint, no accent bars) */
.pm-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--line);background:rgba(180,83,9,.08);border-radius:10px;padding:9px 14px;font-size:12.5px;margin:0 0 14px}
/* project tools sidebar */
.sb-ptools .sb-allproj span{font-size:12px;color:var(--muted)}
.sb-psel{margin:6px 10px 4px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--field)}
.sb-psel-id{display:block;font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--muted);font-variant-numeric:tabular-nums}
.sb-psel-nm{font-size:12px;font-weight:600;line-height:1.3;margin-top:1px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sb-locked{opacity:.45;cursor:default}
html.sb-min .sb-psel,html.sb-mode-rail .sb-psel{display:none}
/* ── CRM data grid (Attio-style: flat, dense, hairline cell borders) ── */
.crm-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.crm-top h1 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.crm-top h1 .crm-ctx { font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--field);
border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; }
.crm-views { display: flex; gap: 2px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.crm-views a { font-size: 12.5px; font-weight: 600; color: var(--muted); text-decoration: none;
padding: 6px 10px; border-radius: 7px; white-space: nowrap; }
.crm-views a:hover { background: var(--field); color: var(--text); }
.crm-views a.on { background: var(--field); color: var(--text); }
.crm-views .n { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.crm-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.crm-toolbar .crm-search { position: relative; width: 300px; max-width: 100%; }
.crm-toolbar .crm-search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--muted); }
.crm-toolbar .crm-search input { width: 100%; height: 32px; border: 1px solid var(--line); border-radius: 8px;
padding: 0 10px 0 30px; font-size: 12.5px; background: var(--card); color: var(--text); }
.crm-toolbar select { height: 32px; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px;
font-size: 12.5px; background: var(--card); color: var(--text); }
.crm-toolbar .btn { height: 32px; padding: 0 12px; font-size: 12.5px; }
.crm-grid { border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; background: var(--card); }
.crm-grid .tbl-wrap { overflow-x: auto; }
table.crm { width: 100%; border-collapse: collapse; margin: 0; font-size: 13px; }
table.crm th, table.crm td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
padding: 0 12px; height: 42px; text-align: left; vertical-align: middle; white-space: nowrap; }
table.crm th:last-child, table.crm td:last-child { border-right: 0; }
table.crm thead th { position: sticky; top: 0; z-index: 2; background: var(--card); font-size: 11.5px;
font-weight: 600; color: var(--muted); height: 38px; letter-spacing: .01em; }
table.crm thead th a { color: inherit; text-decoration: none; }
table.crm thead th i { font-size: 12px; margin-right: 2px; vertical-align: -1px; }
table.crm tbody tr { cursor: pointer; }
table.crm tbody tr:hover td { background: var(--field); }
table.crm tbody tr:last-child td { border-bottom: 0; }
.crm-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.crm-name .dg-av { width: 22px; height: 22px; border-radius: 6px; flex: none; display: inline-flex;
align-items: center; justify-content: center; font: 700 11px Inter, sans-serif; background: var(--field);
color: var(--muted); object-fit: cover; overflow: hidden; }
.crm-name a { font-weight: 600; color: var(--text); text-decoration: none; overflow: hidden;
text-overflow: ellipsis; max-width: 260px; }
.crm-foot { display: flex; align-items: center; gap: 14px; padding: 8px 12px; border-top: 1px solid var(--line);
font-size: 12px; color: var(--muted); background: var(--card); }
.crm-foot .cnt { font-weight: 600; font-variant-numeric: tabular-nums; }
.crm-foot select { height: 26px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px;
background: var(--card); color: var(--text); }
table.crm .tbadge { margin-right: 4px; }
table.crm .dg-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
@media (max-width: 767px) {
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.crm th, table.crm td { padding: 0 10px; height: 40px; font-size: 12.5px; }
table.crm th:first-child, table.crm td:first-child {
position: sticky; left: 0; z-index: 3; background: var(--card);
box-shadow: 6px 0 8px -6px rgba(0, 0, 0, .25); max-width: 55vw;
}
table.crm thead th:first-child { z-index: 4; }
.crm-toolbar .crm-search { width: 100%; }
}
/* ── c2 Attio touches (2026-08-19) ── */
.c2-sec-h { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.c2-hlcard-t { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.c2-dl { grid-template-columns: 128px minmax(0, 1fr); gap: 9px 10px; font-size: 12.5px; }
.c2-rsec-h { font-size: 12px; font-weight: 600; color: var(--muted); }
.c2-rail-body { padding: 4px 0 18px; }
.c2-rsec { border-bottom: 1px solid var(--line); }
/* -- sidebar Attio touches (2026-08-19) -- */
.sb-nav { padding: 10px 10px 18px; }
@media (max-width: 979px) { .sb-item { min-height: 42px; } }
/* -- record peek (2026-08-19) -- */
body.is-peek .sb, body.is-peek .tb { display: none !important; }
body.is-peek .hq-main { margin-left: 0 !important; }
body.is-peek .hq-content { padding-top: 10px; }
.peek-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(10, 10, 14, .45);
opacity: 0; pointer-events: none; transition: opacity .16s ease; }
.peek-overlay.on { opacity: 1; pointer-events: auto; }
.peek-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(860px, 94vw);
background: var(--card); border-left: 1px solid var(--line); display: flex; flex-direction: column;
transform: translateX(24px); transition: transform .18s ease; box-shadow: -18px 0 50px rgba(0, 0, 0, .28); }
.peek-overlay.on .peek-panel { transform: none; }
.peek-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px;
border-bottom: 1px solid var(--line); flex: none; }
.peek-x { background: none; border: 0; cursor: pointer; font-size: 22px; line-height: 1;
color: var(--muted); padding: 2px 6px; border-radius: 6px; }
.peek-x:hover { background: var(--field); color: var(--text); }
.peek-title { font-size: 13px; font-weight: 600; flex: 1; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peek-open { font-size: 12.5px; font-weight: 600; color: var(--orange); text-decoration: none; white-space: nowrap; }
.peek-frame { flex: 1; width: 100%; border: 0; background: var(--bg); }
/* inline cell editor */
.cell-edit { position: relative; display: inline-flex; align-items: center; gap: 6px;
cursor: pointer; border-radius: 6px; padding: 3px 6px; margin: -3px -6px; }
.cell-edit:hover { background: var(--field); }
.cell-edit-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 50; min-width: 150px;
background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 4px;
box-shadow: 0 12px 30px rgba(0, 0, 0, .22); display: none; }
.cell-edit.open .cell-edit-menu { display: block; }
.cell-edit-menu button { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
background: none; border: 0; cursor: pointer; font: inherit; font-size: 12.5px; padding: 6px 8px;
border-radius: 6px; color: var(--text); }
.cell-edit-menu button:hover { background: var(--field); }
/* ── intel views (Market Intel / Rate Map / Coverage Map) 2026-08-19 ── */
.hq-content:has(.iv-wrap) { max-width: none !important; padding: 12px 14px !important; display: flex; flex-direction: column; }
.hq-content:has(.iv-wrap) .crm-top { margin-bottom: 10px; }
.iv-wrap { flex: none; height: calc(100dvh - 146px); min-height: 520px; display: grid; grid-template-columns: 380px minmax(0, 1fr);
border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
.iv-wrap > * { min-width: 0; min-height: 0; }
.iv-rail { overflow-y: auto; border-right: 1px solid var(--line); background: var(--card); color: var(--text); }
.iv-map { position: relative; background: var(--field); }
.iv-sec { padding: 13px 16px; border-bottom: 1px solid var(--line); }
.iv-sec:last-child { border-bottom: 0; }
.iv-sec--flush { padding: 0; }
.iv-sec--flush > .iv-sec-h { padding: 13px 16px 8px; }
.iv-sec-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 9px;
font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.iv-sec--flush .iv-sec-h, .iv-sec-h:only-child { margin: 0; }
.iv-blurb { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.iv-kpis { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.iv-kpi { padding: 11px 16px; border-right: 1px solid var(--line); min-width: 0; }
.iv-kpi:last-child { border-right: 0; }
.iv-kpi p:first-child { margin: 0; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iv-kpi p:last-child { margin: 3px 0 0; font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--text); }
.iv-seg { display: flex; gap: 4px; flex-wrap: wrap; }
.iv-seg > * { flex: 1; text-align: center; font: 600 12px/1 Inter, sans-serif; color: var(--muted);
background: none; border: 0; border-radius: 7px; padding: 7px 8px; cursor: pointer; transition: color .12s, background .12s; }
.iv-seg > *:hover { color: var(--text); background: var(--panel); }
.iv-seg > .on, .iv-seg > .on:hover { color: var(--text); background: var(--field); }
.iv-rail select { width: 100%; font: 500 13px Inter, sans-serif; color: var(--text); background: var(--field);
border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 10px; appearance: none; -webkit-appearance: none; cursor: pointer; }
.iv-rail table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.iv-rail th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
font-weight: 600; padding: 7px 16px; border-bottom: 1px solid var(--line); }
.iv-rail td { padding: 8px 16px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.iv-rail tbody tr:hover td { background: var(--panel); }
.iv-rail tr:last-child td { border-bottom: 0; }
.iv-legend { position: absolute; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 2;
display: flex; align-items: center; gap: 9px; background: var(--card); border: 1px solid var(--line);
border-radius: 8px; padding: 6px 12px; font: 600 11.5px Inter, sans-serif; color: var(--text);
box-shadow: 0 4px 14px rgba(0, 0, 0, .10); }
.iv-legend .bar { width: 150px; height: 8px; border-radius: 4px; }
.iv-empty { padding: 22px 16px; text-align: center; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.iv-note { font-size: 11.5px; color: var(--muted); line-height: 1.55; margin: 0; }
.iv-tog { width: 40px; height: 24px; border-radius: 20px; background: var(--field);
box-shadow: inset 0 0 0 1px var(--line-strong); position: relative; flex: none; transition: background .15s; }
.iv-tog > span { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: left .15s; }
.iv-tog.on { background: var(--orange); box-shadow: none; }
.iv-tog.on > span { left: 18px; }
.iv-togrow { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.iv-togrow .t { flex: 1; min-width: 0; }
.iv-togrow .t p { margin: 0; font-size: 13px; font-weight: 600; color: var(--text); }
.iv-togrow .t p + p { margin-top: 1px; font-size: 11.5px; font-weight: 500; color: var(--muted); }
@media (max-width: 900px) {
.iv-wrap { grid-template-columns: 1fr; height: auto; }
.iv-map { order: -1; height: 48vh; min-height: 340px; border-bottom: 1px solid var(--line); }
.iv-rail { border-right: 0; }
.iv-legend .bar { width: 100px; }
}
/* ── sidebar v3: tree navigation 2026-08-20 ── */
:root { --sb-card: #ebebec; }
:root[data-theme="dark"] { --sb-card: #26262e; }
.sb a, .sb a:hover { text-decoration: none; }
.sb-tree .sb-item { min-height: 36px; }
.sb-parent { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 0 10px;
margin: 1px 0; background: none; border: 0; border-radius: 8px; font-family: inherit; font-size: 13px;
font-weight: 600; color: var(--sb-text); cursor: pointer; text-align: left; transition: background .12s, color .12s; }
.sb-parent:hover { background: var(--sb-hover); color: var(--sb-strong); }
.sb-parent > i:first-child { font-size: 15px; width: 17px; flex: 0 0 17px; text-align: center; opacity: .85; }
.sb-parent .chev { margin-left: auto; font-size: 11px; opacity: .55; transition: transform .18s ease;
padding: 6px; margin-top: -6px; margin-bottom: -6px; margin-right: -6px; border-radius: 6px; }
.sb-parent .chev:hover { background: var(--sb-hover); opacity: 1; }
a.sb-parent.is-active { background: var(--sb-card); color: var(--sb-strong);
box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 3px 10px rgba(0, 0, 0, .04); }
.sb-grp:not(.is-closed) .sb-parent .chev { transform: rotate(180deg); }
.sb-kids { margin-left: 18px; padding: 0; }
.sb-grp:not(.is-closed) .sb-kids { padding: 1px 0 5px; }
.sb-kid { display: flex; align-items: center; min-height: 34px; margin: 2px 0 2px 14px; padding: 0 11px;
position: relative; border: 1px solid transparent; border-radius: 5px; font-size: 13px; font-weight: 500;
color: var(--sb-text); transition: background .12s, color .12s; }
.sb-kid::before { content: ""; position: absolute; left: -15px; bottom: 50%; width: 11px; height: 44px;
border-left: 2px solid var(--sb-line); border-bottom: 2px solid var(--sb-line);
border-bottom-left-radius: 10px; pointer-events: none; }
.sb-kid > span:first-child { min-width: 0; white-space: nowrap; }
.sb-kid:hover { background: var(--sb-hover); color: var(--sb-strong); }
.sb-kid.is-active { background: var(--sb-card); color: var(--sb-strong);
font-weight: 400; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 3px 10px rgba(0, 0, 0, .04); }
.sb-kid.is-soon { opacity: .45; }
.sb-kid .soon { margin-left: auto; font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
color: var(--sb-muted); border: 1px solid var(--sb-line); border-radius: 999px; padding: 1px 7px;
text-transform: uppercase; }
.sb-kid .sb-fav { margin-left: auto; font-size: 12px; color: var(--sb-muted); opacity: 0; padding: 3px;
transition: opacity .12s; }
.sb-kid:hover .sb-fav { opacity: .75; }
.sb-kid .sb-fav:hover { opacity: 1; color: var(--orange); }
.sb-kid.is-fav .sb-fav, .sb-kid.is-favrow .sb-fav { opacity: 1; color: var(--orange); }
#sb-favslot .sb-kid { margin-left: 0; padding-left: 37px; }
#sb-favslot .sb-kid::before { display: none; }
#sb-favslot .sb-kid .sb-fav { opacity: 1; }
@media (min-width: 980px) {
html.sb-mode-rail .sb .sb-grp-items, html.sb-mode-auto .sb:not(:hover) .sb-grp-items { display: none; }
html.sb-mode-rail .sb .sb-parent span, html.sb-mode-auto .sb:not(:hover) .sb-parent span,
html.sb-mode-rail .sb .sb-parent .chev, html.sb-mode-auto .sb:not(:hover) .sb-parent .chev { display: none; }
html.sb-mode-rail .sb .sb-parent, html.sb-mode-auto .sb:not(:hover) .sb-parent { justify-content: center; padding: 11px 0; }
html.sb-mode-rail .sb #sb-favslot, html.sb-mode-auto .sb:not(:hover) #sb-favslot { display: none; }
}
/* ── user menu v2 (Attio-style) 2026-08-20 ── */
.dd-menu.user-menu { min-width: 248px; padding: 6px; }
.user-menu .um-head { padding: 7px 9px 9px; border-bottom: 0; margin-bottom: 0; gap: 10px; }
.user-menu .um-n { font-weight: 600; font-size: 13px; }
.user-menu .um-r { font-size: 11px; }
.user-menu .sep { height: 1px; background: var(--line); margin: 3px 2px; }
.user-menu .um-label { padding: 5px 9px 2px; }
.dd-menu.user-menu a { display: flex; align-items: center; justify-content: flex-start; gap: 9px;
padding: 7px 9px; border-radius: 7px; font-size: 13px; }
.dd-menu.user-menu a:hover { background: var(--field); color: var(--text); }
.dd-menu.user-menu a > i { font-size: 14px; width: 16px; text-align: center; color: var(--muted); }
.user-menu .um-presence { display: flex; align-items: center; gap: 8px; min-height: 28px;
padding: 4px 9px; border-radius: 7px; font-size: 12.5px; }
.user-menu .um-presence:hover { background: var(--field); }
.user-menu .um-presence.is-current { font-weight: 600; }
.user-menu .um-presence .um-chk { margin-left: auto; font-size: 12px; color: var(--muted); visibility: hidden; }
.user-menu .um-presence.is-current .um-chk { visibility: visible; }
.user-menu .um-foot { display: flex; align-items: center; justify-content: space-between;
padding: 5px 9px 3px; font-size: 12.5px; color: var(--muted); }
.dd-menu.user-menu .um-theme { margin: 0; padding: 2px; gap: 2px; background: var(--field);
border: 1px solid var(--line); border-radius: 8px; }
.dd-menu.user-menu .um-theme button { flex: none; width: 28px; height: 24px; padding: 0;
display: flex; align-items: center; justify-content: center; border-radius: 6px;
background: transparent; color: var(--muted); }
.dd-menu.user-menu .um-theme button i { font-size: 13px; }
.dd-menu.user-menu .um-theme button:hover { background: transparent; color: var(--text); }
.dd-menu.user-menu .um-theme button.is-current,
.dd-menu.user-menu .um-theme button.is-current:hover { background: var(--card); color: var(--text);
box-shadow: 0 1px 2px rgba(0, 0, 0, .10); }
/* user menu: compact status select */
.um-statusrow { padding: 6px 9px; }
.um-selwrap { display: flex; align-items: center; gap: 7px; }
.um-select { appearance: none; -webkit-appearance: none; font: inherit; font-size: 12.5px; color: var(--text);
background: var(--field); border: 1px solid var(--line); border-radius: 8px; padding: 4px 24px 4px 9px;
cursor: pointer; outline: none;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 8px center; }
.um-select:hover { border-color: var(--line-strong); }
/* chat links: inherit bubble color, always underlined for affordance */
a.msg-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; word-break: break-all; background: none; }
.msg-bubble.mine a.msg-link, .msg-bubble.mine a.msg-link:visited { color: #fff; }
#msg-drawer .kt-btn a.msg-link, #msg-drawer [class*=primary-foreground] a.msg-link { color: inherit; }
a.msg-link:hover { opacity: .85; }
/* rail-less c2 record: no dead gutter, centered content, tight details */
.c2-split.c2-solo { grid-template-columns: 1fr; }
.c2-split.c2-solo .c2-main { grid-column: 1; }
.c2-split.c2-solo .c2-panel { margin: 0 auto; }
.c2-split.c2-solo .c2-dl { max-width: 620px; }