/* Settings CSS, part 1 of 2: the original layout (nav, team-member page, End relationship, nav search, linked
spreadsheets, the bounded frame, one sheet per tab, the Permissions two-panel layout, dark mode).
Split #5 of index.html: moved unchanged, linked at the exact spot it used to sit so the cascade order is the
same. Part 2 is settings-2.css. */
/* ── SETTINGS LAYOUT ── */
.settings-shell {
display: grid; grid-template-columns: 220px 1fr; gap: 24px;
/* Align the content area with the floating header bar above it: same 22px
side insets, no width cap, so its left/right edges line up with .topbar
(which uses margin: 0 22px). Previously this was pinned flush-left with a
1100px cap, leaving it offset ~22px left and short ~195px on the right. */
padding: 22px 0 32px; margin: 0 22px; flex: 1; align-items: start; width: auto;
position: relative; /* positioning context for the in-settings sub-page overlay */
}
/* Reusable in-settings sub-page: replaces "glass" popups (register business, add
custom role, billing plans, edit management company) with a real page that slides
over the settings nav+panels and has its own Back button — matches settings design. */
.settings-subpage {
position: absolute; inset: 0; z-index: 40; display: none; flex-direction: column;
background: var(--bg2); border-radius: 14px; overflow: hidden;
animation: settingsSubpageIn .18s ease;
}
@keyframes settingsSubpageIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
.settings-subpage-head {
display: flex; align-items: center; gap: 12px; padding: 14px 22px;
border-bottom: 1px solid var(--border2); background: var(--bg); flex-shrink: 0;
}
.settings-subpage-title { font-size: 15px; font-weight: 700; color: var(--text); }
.settings-subpage-body { flex: 1; overflow-y: auto; padding: 22px; }
/* Property Manager Report hosted as a sub-page. As a popup it is a fixed-height card
whose two columns scroll independently; a sub-page has no height of its own, so
those panes must stop scrolling themselves and let the sub-page body scroll —
otherwise both collapse and the report is a sliver. One column, too: the settings
card is min(940px,100%) and the sub-page gets ~700px of it, so side-by-side would
leave the report about 410px wide, narrower than the popup it replaced. Stacked,
the report keeps its full width and comes first, because looking at it is the
reason the page was opened; the send controls follow underneath. The markup sizes
these panes with inline style, so the overrides have to be !important. */
#settings-subpage [data-subpage-host="report-modal"] {
background: none !important; border: none !important;
border-radius: 0 !important; overflow: visible !important;
}
#settings-subpage [data-subpage-host="report-modal"] .rpt-layout {
flex-direction: column !important; overflow: visible !important;
padding: 0 !important; gap: 20px !important;
}
/* The report is a fixed-column document. On a narrow settings frame it must scroll
sideways inside its own box — a table that overflows silently drops its right-hand
column (Tenant) off the edge instead of erroring. */
#settings-subpage [data-subpage-host="report-modal"] .rpt-preview {
order: 1; overflow-x: auto !important; overflow-y: visible !important;
}
#settings-subpage [data-subpage-host="report-modal"] .rpt-side {
order: 2; width: 100% !important; max-width: 460px; overflow: visible !important;
border-top: 1px solid var(--border2); padding-top: 20px;
}
/* Settings restyles .form-input without a width, so the subject and message boxes
fall back to the browser's default 160px inside a 460px column. */
#settings-subpage [data-subpage-host="report-modal"] .rpt-side .form-input { width: 100%; }
/* End relationship hosted as a sub-page. NOTHING IN SETTINGS IS A POPUP — this
card is always presented as its own full panel with the header Back button,
never stacked on top of the settings sheet. What is left over is the popup
chrome the .modal base rule gives it: a drag handle, a shadow, a rounded
shell, and on a phone a fixed 85dvh bottom-sheet height that would strand
the third choice below the fold. All of it is removed here so the panel
scrolls as one page, the way the company page it opens from does. */
#settings-subpage [data-subpage-host="end-rel-modal"] {
background: none !important; border: none !important; box-shadow: none !important;
border-radius: 0 !important; overflow: visible !important;
display: block !important; height: auto !important; max-height: none !important;
}
#settings-subpage [data-subpage-host="end-rel-modal"]::before { display: none !important; }
#settings-subpage [data-subpage-host="end-rel-modal"] .modal-body {
padding: 0 !important; overflow: visible !important; flex: none !important;
min-height: 0 !important;
}
/* Settings restyles .form-input without a width, so the Type DELETE box would
fall back to the browser's default 160px. */
#settings-subpage [data-subpage-host="end-rel-modal"] .erx-type input { width: 100%; max-width: 220px; }
/* Team member Files hosted as a sub-page. Same treatment as End relationship:
the .modal base rule would leave it a drag handle, a shadow, a rounded shell
and an 85dvh bottom-sheet height on a phone. It is a page, so it scrolls with
the page, the file list is not capped inside a second scroller, and the
footer Close button goes — Back in the settings header is the way out. */
#settings-subpage [data-subpage-host="agent-docs-modal"] {
background: none !important; border: none !important; box-shadow: none !important;
border-radius: 0 !important; overflow: visible !important;
display: block !important; height: auto !important; max-height: none !important;
}
#settings-subpage [data-subpage-host="agent-docs-modal"]::before { display: none !important; }
#settings-subpage [data-subpage-host="agent-docs-modal"] .modal-body {
padding: 0 !important; overflow: visible !important; flex: none !important;
min-height: 0 !important;
}
#settings-subpage [data-subpage-host="agent-docs-modal"] #agent-docs-list {
max-height: none !important; overflow: visible !important;
}
#settings-subpage [data-subpage-host="agent-docs-modal"] .modal-footer { display: none !important; }
/* ── Team-member detail page (Settings → Team members → tap a row) ──
A clean, full-surface page inside the settings window. Replaces the old
"User Settings" popup, which opened BEHIND the settings sheet and couldn't
be reached. Uses the shared .settings-subpage host above. */
.tmd { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.tmd-hero {
display: flex; align-items: center; gap: 14px; padding: 18px 20px;
border: 1px solid var(--border2); border-radius: 16px; background: var(--bg);
}
.tmd-avatar {
flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
background: linear-gradient(135deg, #2563eb, #1e3a8a); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 17px; font-weight: 700; letter-spacing: .5px;
}
.tmd-hero-main { min-width: 0; flex: 1; }
.tmd-hero-name {
font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -.01em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tmd-hero-sub {
font-size: 13px; color: var(--text2); margin-top: 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tmd-hero-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.tmd-chip {
display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px;
font-size: 11px; font-weight: 600; color: var(--text2); white-space: nowrap;
background: var(--bg3); border: 1px solid var(--border2);
}
.tmd-chip i { width: 11px; height: 11px; }
.tmd-chip.warn { color: #b45309; background: rgba(180,83,9,0.08); border-color: rgba(180,83,9,0.24); }
.tmd-card { border: 1px solid var(--border2); border-radius: 16px; background: var(--bg); overflow: hidden; }
.tmd-card-head { padding: 15px 20px 13px; border-bottom: 1px solid var(--border); }
.tmd-card-title { font-size: 14px; font-weight: 700; color: var(--text); }
.tmd-card-sub { font-size: 12px; color: var(--text2); margin-top: 3px; line-height: 1.5; }
.tmd-card-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.tmd-field { display: flex; flex-direction: column; gap: 5px; }
.tmd-field .form-label { margin: 0; }
.tmd-field .form-input { width: 100%; }
.tmd-value { font-size: 13px; color: var(--text); }
.tmd-hint { font-size: 11.5px; color: var(--text3); line-height: 1.45; }
.tmd-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.tmd-photo-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tmd-photo-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tmd-photo-actions .btn { display: inline-flex; align-items: center; gap: 7px; }
.tmd-photo-actions .btn i { width: 14px; height: 14px; }
.tmd-avatar-sm { width: 44px; height: 44px; font-size: 15px; }
/* Upload target on a detail page (company documents) */
.mgd-drop {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
border: 2px dashed var(--border2); border-radius: 12px; padding: 20px 16px; cursor: pointer;
background: var(--bg2); transition: border-color .15s, background .15s;
}
.mgd-drop:hover, .mgd-drop.over { border-color: var(--accent); background: var(--accent-soft, rgba(37,99,235,0.06)); }
.mgd-drop i { width: 24px; height: 24px; color: var(--text3); pointer-events: none; }
.mgd-drop .t { font-size: 12.5px; color: var(--text2); }
.mgd-drop .lnk { color: var(--accent); text-decoration: underline; }
.mgd-drop .s { font-size: 11px; color: var(--text3); }
.tmd-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
textarea.form-input { resize: vertical; min-height: 62px; font-family: inherit; }
@media (max-width: 520px) { .tmd-grid-2 { grid-template-columns: 1fr; } }
.tmd-card-foot {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 13px 20px; border-top: 1px solid var(--border); background: var(--bg2);
}
.tmd-status { font-size: 12px; color: var(--text3); min-height: 16px; line-height: 1.4; }
/* "This address already has a login": the owner answers it in place. */
.login-warn { margin: 12px 0; padding: 12px 14px; border-radius: 10px; background: var(--note-bg); border: 1px solid var(--note-bd); color: var(--note-fg); font-size: 13px; line-height: 1.45; text-align: left; }
.login-warn strong { font-weight: 600; }
.login-warn-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 10px; }
.msx-body > .login-warn { margin: 12px 16px; }
.tmd-card-body > .tmd-status:empty { display: none; } /* no dead space before it's used */
.tmd-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tmd-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.tmd-actions .btn i { width: 14px; height: 14px; }
.tmd-card.danger { border-color: rgba(220,38,38,0.28); }
.tmd-card.danger .tmd-card-title { color: #b91c1c; }
[data-theme="dark"] .tmd-card.danger .tmd-card-title { color: #f87171; }
/* ── END RELATIONSHIP ─────────────────────────────────────────────────────
ONE entry point on the company page, THREE ranked choices inside it.
The first version put three destructive-looking boxes on the page and the
CEO could not tell which one to press. The ranking now has to be readable
at a glance, before a word is read: a coloured rail down the left of each
choice (accent -> amber -> red), a rank pill on the same line as the title,
and a size ladder — the recommended choice is tinted and sits at the top,
the worst one is plain until you actually choose it, so the eye is never
dragged towards deleting a company. */
.erx-lead { font-size: 13px; color: var(--text2); line-height: 1.55; margin: 0 0 13px; }
.erx-lead b { color: var(--text); font-weight: 600; }
.erx-opts { display: flex; flex-direction: column; gap: 9px; }
.erx-opt {
position: relative; display: block; width: 100%; text-align: left;
border: 1.5px solid var(--border2); border-radius: 12px;
background: var(--bg); padding: 12px 14px 12px 26px; cursor: pointer;
font: inherit; color: inherit; transition: border-color .12s, background .12s, box-shadow .12s;
}
/* The rail. This is the ranking, said in colour before it is said in words. */
.erx-opt::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
border-radius: 12px 0 0 12px; background: var(--erx-c);
}
.erx-opt:hover { border-color: var(--erx-c); }
.erx-opt.sel { border-color: var(--erx-c); background: var(--erx-tint); box-shadow: 0 0 0 3px var(--erx-ring); }
.erx-opt.off { opacity: .45; cursor: not-allowed; }
.erx-opt.safe { --erx-c: #2563eb; --erx-tint: rgba(37,99,235,0.07); --erx-ring: rgba(37,99,235,0.13); }
.erx-opt.serious { --erx-c: #b45309; --erx-tint: rgba(180,83,9,0.07); --erx-ring: rgba(180,83,9,0.13); }
.erx-opt.worst { --erx-c: #b91c1c; --erx-tint: rgba(185,28,28,0.07); --erx-ring: rgba(185,28,28,0.13); }
[data-theme="dark"] .erx-opt.safe { --erx-c: #60a5fa; }
[data-theme="dark"] .erx-opt.serious { --erx-c: #fbbf24; }
[data-theme="dark"] .erx-opt.worst { --erx-c: #f87171; }
.erx-opt-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.erx-dot {
flex: none; width: 16px; height: 16px; border-radius: 50%;
border: 1.5px solid var(--border2); background: var(--bg);
}
.erx-opt.sel .erx-dot { border-color: var(--erx-c); border-width: 5px; }
.erx-opt-title { font-size: 14.5px; font-weight: 700; color: var(--text); }
.erx-pill {
font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
padding: 3px 7px; border-radius: 999px; color: #fff; background: var(--erx-c);
white-space: nowrap;
}
[data-theme="dark"] .erx-pill { color: #10131a; }
.erx-opt-count { margin: 7px 0 0; font-size: 13.5px; font-weight: 700; color: var(--erx-c); line-height: 1.4; }
.erx-opt-line { margin: 4px 0 0; font-size: 12.5px; color: var(--text2); line-height: 1.5; }
.erx-opt-line.stop { font-weight: 700; color: var(--erx-c); }
.erx-opt-foot { margin: 6px 0 0; font-size: 12px; color: var(--text2); line-height: 1.5; }
.erx-note { font-size: 12px; color: var(--text3); line-height: 1.55; margin-top: 10px; }
.erx-note b { color: var(--text2); }
.erx-status { font-size: 12.5px; line-height: 1.5; margin-top: 10px; min-height: 1px; color: var(--text3); }
.erx-foot {
display: flex; gap: 8px; justify-content: flex-end; align-items: center;
margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border);
}
.erx-done { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: #0f9d6b; }
.erx-done i { width: 18px; height: 18px; flex: none; }
/* The linked-sheet block. Amber, not red: it is a stop, not a disaster, and
the way past it is right there inside the box. It applies to ALL THREE
choices — any of them would be undone by the next sync. */
.erx-alert {
margin-top: 13px; border: 1px solid rgba(180,83,9,0.32); border-radius: 12px;
background: rgba(245,158,11,0.08); padding: 13px 14px;
}
.erx-alert-t {
display: flex; align-items: center; gap: 7px;
font-size: 12.5px; font-weight: 700; color: #b45309;
}
[data-theme="dark"] .erx-alert-t { color: #fbbf24; }
.erx-alert-t i { width: 15px; height: 15px; flex: none; }
.erx-alert-l { margin: 8px 0 0; padding-left: 20px; font-size: 12px; color: var(--text2); line-height: 1.6; }
.erx-alert-b { font-size: 12px; color: var(--text2); line-height: 1.55; margin-top: 8px; }
.erx-check {
display: flex; align-items: flex-start; gap: 9px; margin-top: 11px;
font-size: 12px; color: var(--text2); line-height: 1.5; cursor: pointer;
}
/* Width/height alone lose to the mobile form reset, which sizes every input
to a 44px tap target — the box rendered as an empty grey slab on a phone.
min/max pin it, and appearance restores the native tick. */
.erx-check input[type="checkbox"] {
margin: 2px 0 0; flex: none; accent-color: var(--accent);
width: 16px; height: 16px; min-width: 16px; min-height: 16px;
max-width: 16px; max-height: 16px; padding: 0;
-webkit-appearance: checkbox; appearance: checkbox; border-radius: 3px;
}
.erx-go-worst, .erx-go-worst:hover {
background: #b91c1c !important; border-color: #b91c1c !important; color: #fff !important;
}
.erx-type { margin-top: 13px; }
.erx-type label { display: block; font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: 6px; }
.erx-type input { width: 100%; max-width: 220px; letter-spacing: .12em; font-weight: 700; }
@media (max-width: 640px) {
.tmd-hero { flex-wrap: wrap; }
.tmd-hero-meta { justify-content: flex-start; width: 100%; }
.tmd-card-foot { flex-direction: column; align-items: stretch; }
.tmd-card-foot .tmd-actions .btn { width: 100%; }
}
/* Quiet grouped nav: a plain panel, grey group labels, plain text items, and a
soft grey pill for the one you are on. No glass, no gradient, no per-item
icons — 41 little blue glyphs down the side is noise, not navigation. Built
on tokens so it holds up in both themes. */
.settings-nav {
display: flex; flex-direction: column; gap: 2px;
background:
linear-gradient(160deg, rgba(255,255,255,0.72) 0%, rgba(210,230,255,0.62) 60%, rgba(160,200,255,0.55) 100%);
backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8);
border: 1px solid rgba(200,220,255,0.55);
border-radius: 16px; padding: 12px 8px;
position: sticky; top: 20px;
box-shadow:
0 8px 32px rgba(20,50,140,0.15),
0 2px 8px rgba(30,70,160,0.10),
inset 0 1px 0 rgba(255,255,255,0.8),
inset 0 -1px 0 rgba(80,130,210,0.12);
}
.settings-nav-label {
font-size: 10px; font-weight: 700; color: #2a4a85;
text-transform: uppercase; letter-spacing: 0.1em;
padding: 12px 10px 4px; opacity: 0.75;
}
.settings-nav-label:first-child { padding-top: 4px; }
.settings-tab {
display: flex; align-items: center; gap: 9px;
padding: 8px 10px; font-size: 13px; color: rgba(26,51,112,0.75);
background: none; border: none; border-radius: 9px;
cursor: pointer; text-align: left; width: 100%;
transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.settings-tab i { width: 14px; height: 14px; }
.settings-tab:hover {
background: rgba(255,255,255,0.5);
color: #1a3370;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.settings-tab.active {
background: linear-gradient(135deg, #4a85f0 0%, #2560d8 100%);
color: #fff;
box-shadow: 0 4px 12px rgba(40,90,210,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}
.settings-tab.active i { color: #fff; }
/* Field-options expandable group */
.settings-tab-parent .fo-chevron {
width: 13px; height: 13px; opacity: 0.7;
transition: transform 0.2s ease;
}
.settings-tab-parent.open .fo-chevron { transform: rotate(90deg); }
.settings-tab-children {
display: none;
flex-direction: column; gap: 1px;
margin: 1px 0 3px 14px;
padding-left: 8px;
}
.settings-tab-children.open { display: flex; }
#page-settings .role-hidden { display: none !important; }
.settings-merge-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 14px 0 8px; }
.settings-merge-pill { border: 1px solid var(--border2); background: var(--bg); color: var(--text2); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 500; cursor: pointer; font-family: inherit; }
.settings-merge-pill:hover { background: var(--bg2); }
.settings-merge-pill.active { background: var(--bg2); color: var(--text); border-color: var(--text3); font-weight: 600; }
#msx .settings-merge-strip { display: none !important; }
.settings-tab-child {
font-size: 12.5px; padding: 6px 8px 6px 10px; gap: 8px;
}
.settings-tab-child i { width: 13px; height: 13px; opacity: 0.8; }
/* ── Settings nav search (filters the menu of settings options) ── */
.settings-nav-search {
position: sticky; top: 0; z-index: 6;
display: flex; align-items: center; gap: 7px;
margin: 0 0 8px; padding: 8px 10px;
background: rgba(247,250,255,0.94);
backdrop-filter: blur(10px) saturate(1.4);
-webkit-backdrop-filter: blur(10px) saturate(1.4);
border: 1px solid rgba(200,220,255,0.7);
border-radius: 10px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 4px rgba(30,70,160,0.07);
}
.settings-nav-search-icon { width: 14px; height: 14px; color: #2a4a85; opacity: 0.65; flex: 0 0 auto; }
.settings-nav-search-input {
flex: 1 1 auto; min-width: 0; padding: 0;
border: none; background: none; outline: none;
font-size: 13px; color: #1a3370; font-family: inherit;
}
.settings-nav-search-input::placeholder { color: rgba(42,74,133,0.5); }
.settings-nav-search-clear {
flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
width: 18px; height: 18px; padding: 0;
border: none; border-radius: 50%; cursor: pointer;
background: rgba(42,74,133,0.12); color: #2a4a85;
transition: background 0.15s;
}
.settings-nav-search-clear:hover { background: rgba(42,74,133,0.22); }
.settings-nav-search-clear i { width: 11px; height: 11px; }
.settings-nav-empty { font-size: 12px; color: rgba(42,74,133,0.6); padding: 10px; text-align: center; }
/* #36 — search inputs get an always-visible clear (✕) once they hold text, so the box
can be wiped in one click without select-all. Custom-masked so it themes with the UI. */
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none; appearance: none;
height: 15px; width: 15px; margin-left: 6px; cursor: pointer;
background: currentColor; opacity: 0.4;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
input[type="search"]::-webkit-search-cancel-button:hover { opacity: 0.75; }
/* #36 — the "‹" back chevron is a mobile detail-view affordance; on desktop the nav
is always visible and there's a close ✕, so the stray unaligned chevron is hidden. */
#page-settings .settings-mobile-back { display: none; }
/* #20 — custom dropdown whose option list opens perfectly flush/aligned under its box
(native