:root { --env-banner-h: 0px; --bg: #f4f6f9; --surface: #ffffff; --surface-alt: #eef1f5; --border: #e1e5eb; --text: #1c2430; --text-muted: #6b7685; --text-faint: #9aa3b2; --accent: #7c5cf5; --accent-soft: #efe9fe; --accent-text: #5b3fd6; --danger: #d1453b; --danger-soft: #fbe9e8; /* Brand mint (from the logo) — used sparingly as a secondary accent, never replacing the violet as primary. Kept out of status-color roles so it never gets confused with "Feasible" or other business-meaning colors. */ --brand-mint: #01d998; --brand-mint-soft: rgba(1, 217, 152, 0.14); --status-opportunity: #1d4ed8; --status-opportunity-bg: #dbeafe; --status-feasible: #16824f; --status-feasible-bg: #e2f6ec; --status-investigating: #b0720a; --status-investigating-bg: #fdf1d9; /* Distinct from --status-investigating above so changing the Budget page's 80%-of-approved warning tier never shifts the "investigating" feasibility-status color (or vice versa), even though both currently sit in the same yellow/gold family. */ --status-budget-warning: #ffc107; --status-graveyard: #6b7280; --status-graveyard-bg: #eceef1; --status-zombie: #7c3aed; --status-zombie-bg: #f1e9fe; --role-r: #2f6fed; --role-r-bg: #e8f0fe; --role-a: #b3271f; --role-a-bg: #fbe9e8; --role-c: #0f8a7e; --role-c-bg: #e1f5f2; --role-i: #6b7280; --role-i-bg: #eceef1; --shadow-sm: 0 1px 2px rgba(20, 25, 40, 0.06); --shadow-md: 0 6px 20px rgba(20, 25, 40, 0.12); --radius: 10px; --radius-sm: 6px; color-scheme: light; /* Sidebar has its own tokens (rather than reusing --surface/--text) because the brand logo is solid mint green on transparency — it needs a dark plate behind it in both themes, so the sidebar's own light-mode palette is a deliberately soft, slightly-violet-tinted panel rather than stark white. */ --sidebar-bg: #f4f1fb; --sidebar-border: #e3ddf5; --sidebar-text: #241f38; --sidebar-text-muted: #6f6690; --sidebar-hover-bg: #e9e3f8; --sidebar-chip-bg: #ffffff; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.45; } button { font-family: inherit; } input, select, textarea { font-family: inherit; font-size: inherit; } /* ---------- Environment banner ---------- */ /* Set once, on , as soon as /api/health resolves (see app.js) — never ambiguous which copy of the app you're looking at, even on the login screen before anyone's signed in. --env-banner-h drives everything below that would otherwise sit partly behind it (the app shell's height, the login screen, the mobile nav overlay), so it stays correct however tall the banner ends up being rather than a hardcoded pixel value in several places at once. */ body.has-env-banner { --env-banner-h: 28px; } .env-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 700; height: var(--env-banner-h); overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .env-banner[hidden] { display: none; } .env-banner.sandbox { background: var(--status-investigating-bg); color: var(--status-investigating); border-bottom: 1px solid var(--status-investigating); } .env-banner.production { background: var(--status-feasible-bg); color: var(--status-feasible); border-bottom: 1px solid var(--status-feasible); } .app-shell { display: flex; height: calc(100vh - var(--env-banner-h)); margin-top: var(--env-banner-h); overflow: hidden; } /* ---------- Sidebar ---------- */ .sidebar { width: 220px; flex: none; background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; padding: 18px 14px; border-right: 1px solid var(--sidebar-border); } .sidebar-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 4px 8px 22px 8px; } /* Fixed white plate behind the logo in both themes, per request. */ .brand-logo-chip { background: var(--sidebar-chip-bg); border: 1px solid var(--sidebar-border); border-radius: var(--radius-sm); padding: 8px 10px; display: inline-flex; } .brand-logo { width: 148px; height: auto; display: block; } .brand-sub { font-size: 11px; color: var(--sidebar-text-muted); padding-left: 1px; } .sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--sidebar-text); text-decoration: none; font-size: 13.5px; font-weight: 500; } .nav-item:hover { background: var(--sidebar-hover-bg); } .nav-item.active { background: var(--accent); color: #fff; } .nav-item[hidden] { display: none; } .nav-icon { font-size: 9px; opacity: 0.85; } .nav-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-rename { border: none; background: none; color: inherit; opacity: 0; cursor: pointer; font-size: 12px; padding: 2px 4px; border-radius: 4px; line-height: 1; } .nav-item:hover .nav-rename { opacity: 0.75; } .nav-rename:hover { opacity: 1 !important; background: var(--sidebar-hover-bg); } .sidebar-footer { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--sidebar-border); } .whoami-label { font-size: 10.5px; color: var(--sidebar-text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; } .whoami-name { background: var(--sidebar-hover-bg); color: var(--sidebar-text); border: 1px solid var(--sidebar-border); padding: 6px 10px; border-radius: var(--radius-sm); font-size: 12.5px; cursor: pointer; width: 100%; text-align: left; } .whoami-name:hover { border-color: var(--accent); } /* Dims the page behind the sidebar once it's an overlay (phone/tablet widths, below) — clicking it closes the sidebar, same as a tap outside any other overlay in this app. Hidden on desktop widths, where the sidebar is never an overlay in the first place. */ .sidebar-backdrop { position: fixed; top: var(--env-banner-h); right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.4); z-index: 590; } .sidebar-backdrop[hidden] { display: none; } /* The sidebar's own mobile-nav toggle — distinct from the settings hamburger already on the right of the topbar. Hidden on desktop widths, where the sidebar is always visible and there's nothing to toggle. */ .nav-toggle-btn { display: none; flex: none; border: none; background: none; color: var(--text); font-size: 18px; padding: 4px 8px; cursor: pointer; border-radius: var(--radius-sm); } .nav-toggle-btn:hover { background: var(--surface-alt); } /* Below this width the 220px sidebar plus any page content no longer fit side by side without the whole app scrolling horizontally — the sidebar becomes a slide-in overlay instead, toggled by .nav-toggle-btn above and dismissed via .sidebar-backdrop or picking a page. */ @media (max-width: 760px) { .nav-toggle-btn { display: inline-flex; align-items: center; } .sidebar { position: fixed; top: var(--env-banner-h); left: 0; height: calc(100% - var(--env-banner-h)); z-index: 600; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-md); } .sidebar.open { transform: translateX(0); } } /* ---------- Main column ---------- */ .main-col { flex: 1; display: flex; flex-direction: column; min-width: 0; } .topbar { height: 56px; flex: none; display: flex; align-items: center; gap: 16px; padding: 0 16px 0 24px; background: var(--surface); border-bottom: 1px solid var(--border); } .topbar-title { font-size: 16px; font-weight: 700; flex: 1; } .topbar-status { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-muted); } .save-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-mint); transition: background .2s; } .save-dot.saving { background: #b0720a; animation: pulse 1s infinite; } .save-dot.error { background: var(--danger); } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } .content { flex: 1; overflow: auto; padding: 22px 24px 60px 24px; } .page[hidden] { display: none; } /* ---------- Page header / toolbar ---------- */ .page-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } .search-box { position: relative; min-width: 240px; } .search-box input { width: 100%; padding: 8px 10px 8px 30px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); outline: none; } .search-box input:focus { border-color: var(--accent); } .search-box::before { content: "\1F50D"; position: absolute; left: 9px; top: 50%; transform: translateY(-50%); font-size: 12px; opacity: .5; } .filter-chip { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; gap: 6px; } .filter-chip .count { opacity: .65; font-weight: 500; } .filter-chip.active { border-color: transparent; } .filter-chip[data-status="all"].active { background: var(--accent-soft); color: var(--accent-text); } .filter-chip[data-status="opportunity"].active { background: var(--status-opportunity-bg); color: var(--status-opportunity); } .filter-chip[data-status="feasible"].active { background: var(--status-feasible-bg); color: var(--status-feasible); } .filter-chip[data-status="investigating"].active { background: var(--status-investigating-bg); color: var(--status-investigating); } .filter-chip[data-status="graveyard"].active { background: var(--status-graveyard-bg); color: var(--status-graveyard); } .filter-chip[data-status="zombie_graveyard"].active { background: var(--status-zombie-bg); color: var(--status-zombie); } select.select-control, .select-control { padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); } .spacer { flex: 1; } .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 600; font-size: 13px; cursor: pointer; } .btn:hover { border-color: #c7cedb; } .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-primary:hover { background: #6a48e0; border-color: #6a48e0; } .btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; } .btn-danger:hover { background: #b93a31; } .btn-ghost { background: transparent; border-color: transparent; } .btn-ghost:hover { background: var(--surface-alt); } .btn-sm { padding: 5px 10px; font-size: 12px; } .btn-icon { padding: 6px 9px; line-height: 1; } .btn[disabled] { opacity: .45; cursor: default; } .btn[hidden] { display: none; } /* ---------- Recycle bin ---------- */ /* Appended to (see sitetracker.js), a sibling of .st-float-window (z-index 400) rather than nested under it — needs its own higher z-index to still land on top if a floating drawer happens to be open too. */ .recycle-backdrop { z-index: 450; } .recycle-modal { width: 640px; max-width: 94vw; max-height: 80vh; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-md); display: flex; flex-direction: column; overflow: hidden; } .recycle-body { flex: 1; min-height: 0; overflow: auto; padding: 10px 20px 20px; } .recycle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--border); } .recycle-row:last-child { border-bottom: none; } .recycle-row-main { display: flex; align-items: center; gap: 10px; min-width: 0; } .recycle-row-text { min-width: 0; } .recycle-row-title { font-weight: 700; font-size: 13.5px; } .recycle-row-actions { display: flex; gap: 8px; flex: none; } /* ---------- Status badges ---------- */ .status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; } .status-badge .dot { width: 7px; height: 7px; border-radius: 50%; } .status-badge.opportunity { background: var(--status-opportunity-bg); color: var(--status-opportunity); } .status-badge.opportunity .dot { background: var(--status-opportunity); } .status-badge.feasible { background: var(--status-feasible-bg); color: var(--status-feasible); } .status-badge.feasible .dot { background: var(--status-feasible); } .status-badge.investigating { background: var(--status-investigating-bg); color: var(--status-investigating); } .status-badge.investigating .dot { background: var(--status-investigating); } .status-badge.graveyard { background: var(--status-graveyard-bg); color: var(--status-graveyard); } .status-badge.graveyard .dot { background: var(--status-graveyard); } .status-badge.zombie_graveyard { background: var(--status-zombie-bg); color: var(--status-zombie); } .status-badge.zombie_graveyard .dot { background: var(--status-zombie); box-shadow: 0 0 0 3px rgba(124,58,237,.18); } .status-badge.danger { background: var(--danger-soft); color: var(--danger); } .status-badge.danger .dot { background: var(--danger); } .health-pill { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; } .health-pill.on_track { background: #e2f6ec; color: #16824f; } .health-pill.at_risk { background: #fdf1d9; color: #b0720a; } .health-pill.overdue { background: var(--danger-soft); color: var(--danger); } .health-pill.none { background: var(--surface-alt); color: var(--text-faint); } /* Same red as .overdue, for a countdown that's due soon but hasn't actually passed yet — kept as its own class so "overdue" still means what it says. */ .health-pill.due_soon { background: var(--danger-soft); color: var(--danger); } /* ---------- Inquiries: opportunity score badge (1 = worst, 5 = best) ---------- */ .score-badge { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; flex: none; font-size: 13px; font-weight: 800; font-family: inherit; } .score-badge.score-5 { background: #16824f; color: #fff; } .score-badge.score-4 { background: #e2f6ec; color: #16824f; } .score-badge.score-3 { background: #fdf1d9; color: #b0720a; } .score-badge.score-2 { background: #fde3d0; color: #c2540a; } .score-badge.score-1 { background: var(--danger-soft); color: var(--danger); } @media (max-width: 700px) { .inq-row-main { flex-wrap: wrap; } .inq-row-main .raci-taskname { flex: 1 1 100%; order: -1; } } /* ---------- Shared email-field validation (safe fail, never blocks saving) ---------- */ .field-invalid { border-color: var(--danger) !important; } .field-invalid-msg { color: var(--danger); font-size: 11.5px; margin-top: 4px; } .field-suggest-msg { color: var(--status-investigating); background: var(--status-investigating-bg); font-size: 11.5px; margin-top: 4px; padding: 2px 6px; border-radius: 4px; display: inline-block; } .field-suggest-link { color: var(--status-investigating); font-weight: 600; text-decoration: underline; cursor: pointer; } /* ---------- Summary tiles ---------- */ .tile-row { display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; min-width: 130px; flex: 1; cursor: pointer; } .tile:hover { box-shadow: var(--shadow-sm); } .tile .tile-num { font-size: 22px; font-weight: 800; } .tile .tile-label { font-size: 12px; color: var(--text-muted); font-weight: 600; margin-top: 2px; } /* One row of three, sized to fit the same tile height as the stat tiles beside it rather than stacking into a taller card. */ .tile-actions-group { display: flex; align-items: center; justify-content: center; gap: 6px; cursor: default; /* Fixed width, doesn't shrink — with more stat tiles added over time, a plain flex:1 lets this get squeezed below what 3 non-wrapping buttons need, popping them out past the card edge. Wraps to its own row instead. */ flex: 0 0 280px; min-width: 280px; } .tile-actions-group:hover { box-shadow: none; } .tile-actions-group .btn { flex: 1; justify-content: center; padding-left: 6px; padding-right: 6px; white-space: nowrap; } .tile.tile-opportunity .tile-num { color: var(--status-opportunity); } .tile.tile-feasible .tile-num { color: var(--status-feasible); } .tile.tile-investigating .tile-num { color: var(--status-investigating); } .tile.tile-graveyard .tile-num { color: var(--status-graveyard); } .tile.tile-zombie_graveyard .tile-num { color: var(--status-zombie); } /* ---------- Table ---------- */ .table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; } /* table-layout:fixed so a column's width comes ONLY from its (set from the user's saved prefs, or DEFAULT_COL_WIDTHS) — auto layout's content-based sizing would otherwise fight with user drag-resizing. */ table.grid { border-collapse: collapse; font-size: 13px; table-layout: fixed; } table.grid th { position: sticky; top: 0; background: var(--surface); text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 1; } table.grid th:hover { color: var(--text); } table.grid th.sorted::after { content: " " attr(data-arrow); } table.grid th.num { text-align: right; } table.grid td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; overflow-wrap: break-word; } table.grid tbody tr:hover { background: var(--surface-alt); } table.grid tbody tr.archived-row { opacity: .5; } table.grid td.editable { cursor: text; } table.grid td.num { text-align: right; font-variant-numeric: tabular-nums; } .row-check { width: 32px; text-align: center; } /* Drag handle at a header's right edge — resizes the live and persists the final width per-browser (see prefs.js getColWidths/setColWidth). */ .col-resize-handle { position: absolute; top: 0; right: -4px; width: 8px; height: 100%; cursor: col-resize; z-index: 2; } .col-resize-handle:hover, .col-resize-handle.resizing { background: var(--accent); opacity: .5; } /* The browser's default number-input spinner arrows were eating into this narrow column's width and clipping the last digit — the actual bug behind "the MW column is still off." Hiding them frees the full width for digits; nobody needs to spin a megawatt value up/down one unit at a time anyway. */ .mw-input { text-align: right; } .mw-input::-webkit-outer-spin-button, .mw-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .mw-input { -moz-appearance: textfield; appearance: textfield; } .row-link { color: var(--text); font-weight: 700; text-decoration: none; cursor: pointer; } .row-chevron { display: inline-block; width: 13px; color: var(--text-faint); font-size: 10px; } tr.expanded-row { background: var(--accent-soft); } tr.expanded-row:hover { background: var(--accent-soft); } .row-link:hover { color: var(--accent); } .muted { color: var(--text-faint); } .small { font-size: 12px; } .inline-input { border: 1px solid transparent; background: transparent; padding: 4px 6px; border-radius: 5px; width: 100%; color: var(--text); } .inline-input:hover { border-color: var(--border); } .inline-input:focus { border-color: var(--accent); background: var(--surface); outline: none; } select.inline-input { cursor: pointer; } .bulk-bar { display: flex; align-items: center; gap: 10px; background: #182238; color: #fff; padding: 10px 16px; border-radius: var(--radius); margin-bottom: 12px; } .bulk-bar b { font-weight: 700; } .bulk-bar .spacer { flex: 1; } .bulk-bar select, .bulk-bar .btn { } /* ---------- Drawer ---------- */ .drawer-backdrop { position: fixed; inset: 0; background: rgba(15,20,32,.35); display: flex; justify-content: flex-end; z-index: 50; } .drawer-header { padding: 18px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .drawer-header input.title-input { font-size: 17px; font-weight: 700; border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; width: 100%; } .drawer-header input.title-input:hover { border-color: var(--border); } .drawer-header input.title-input:focus { border-color: var(--accent); outline: none; } .drawer-body { flex: 1; min-height: 0; overflow: auto; padding: 6px 20px 20px 20px; } .drawer-footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 10px; } .drawer-close { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--text-muted); padding: 4px 8px; } .drawer-close:hover { color: var(--text); } /* ---------- "+ New Site" / Clone: draggable, resizable floating window ---------- Same pattern as Command Center's create-item popup — a plain positioned box appended to , dragged/resized via inline style, no backdrop, so the table stays visible and usable behind it. renderDetailInto's own header/body/footer render inside unchanged; the header's top row becomes the drag handle (see the .cc-site-header-top rule below). */ .st-float-window { position: fixed; z-index: 400; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); overflow: hidden; } .st-float-window > #dr-container { flex: 1; min-height: 0; display: flex; flex-direction: column; } .st-float-window .cc-site-header-top { cursor: move; } .st-float-resize { position: absolute; right: 0; bottom: 0; width: 20px; height: 20px; cursor: nwse-resize; } .st-float-resize::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 9px; height: 9px; border-right: 2px solid var(--border); border-bottom: 2px solid var(--border); } /* ---------- Inline expanding row (SiteTracker) ---------- Reuses the drawer's own header/body/footer markup and classes (see renderDetailInto), just re-homed from a fixed side panel into a table row — these overrides win on specificity without touching the drawer's own rules. */ .detail-row > td { padding: 0; border-bottom: 1px solid var(--border); } .inline-detail { background: var(--surface-alt); padding: 18px 24px; border-top: 2px solid var(--accent); } .inline-detail .drawer-header { padding: 0 0 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px; } .inline-detail .drawer-body { padding: 0; overflow: visible; } .inline-detail .drawer-footer { padding: 14px 0 0; border-top: 1px solid var(--border); margin-top: 14px; } .inline-detail .section-body { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .inline-detail .section-body.single-col { grid-template-columns: 1fr; } /* ---------- Site detail header: icon/eyebrow + highlights + two-column body ---------- */ .drawer-header.cc-site-header { display: block; } .cc-site-header-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .cc-site-header-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cc-site-eyebrow { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); } .cc-site-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); font-size: 11px; } .cc-site-header-actions { display: flex; align-items: center; gap: 8px; flex: none; } .drawer-header input.cc-site-title { font-size: 20px; } .cc-site-highlights { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 14px; } .cc-site-highlight { display: flex; flex-direction: column; gap: 3px; font-size: 13px; } .cc-site-highlight-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); } .cc-site-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; } @media (max-width: 900px) { .cc-site-body { grid-template-columns: 1fr; } } .cc-site-panel-tab { display: inline-block; font-size: 13px; font-weight: 700; color: var(--accent); padding-bottom: 8px; border-bottom: 2px solid var(--accent); margin-bottom: 14px; } .cc-site-map-panel { display: flex; flex-direction: column; height: 300px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface-alt); } .cc-site-map-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--surface); flex: none; } /* position + a real z-index value (not just relative) forces this to establish its own stacking context — otherwise Leaflet's internal panes (its tile/marker/popup layers sit at z-index 200-700 by their own convention) aren't actually contained by it, and leak out to compete directly with unrelated fixed-position UI like the map modal's own backdrop, rendering on top of it instead of staying "just a thumbnail". */ .cc-site-map-canvas-wrap { flex: 1; min-height: 0; position: relative; display: flex; } .cc-site-map-canvas { flex: 1; min-height: 0; position: relative; z-index: 0; } .cc-site-map-empty { padding: 14px; } /* The approx-location badge lives as a sibling of the Leaflet container (never inside it — Leaflet owns that element's contents) so its z-index only has to beat the map's own stacking context as a whole, not compete with Leaflet's internal panes directly. */ .map-approx-badge { position: absolute; top: 10px; right: 10px; z-index: 5; display: flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: rgba(28, 20, 8, 0.82); color: #fbbf24; font-size: 11px; font-weight: 700; letter-spacing: .01em; box-shadow: var(--shadow-md); pointer-events: none; } .map-approx-badge[hidden] { display: none; } /* ---------- Map modal ---------- */ .map-modal-backdrop { justify-content: center; align-items: center; } .map-modal { width: 900px; max-width: 94vw; height: 80vh; max-height: 700px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-md); display: flex; flex-direction: column; overflow: hidden; } .map-modal-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .map-modal-title { font-size: 16px; font-weight: 700; } .map-modal-toolbar { padding: 4px 20px; border-bottom: 1px solid var(--border); } .map-tool-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 7px 0; } .map-tool-row + .map-tool-row { border-top: 1px solid var(--border); } .map-tool-row-label { flex: none; width: 66px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); } .map-toggle-label { display: flex; align-items: center; gap: 6px; cursor: pointer; } .map-canvas-wrap { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; } .map-canvas { flex: 1; min-height: 0; position: relative; z-index: 0; } .map-canvas[hidden] { display: none; } #map-streetview-toggle.active { background: var(--accent); color: #fff; border-color: var(--accent); } .map-legend { padding: 8px 20px; border-top: 1px solid var(--border); min-height: 16px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; color: var(--text-muted); } .legend-item { display: flex; align-items: center; gap: 6px; } .legend-swatch { width: 14px; height: 14px; border-radius: 3px; flex: none; display: inline-block; } .legend-swatch-marker { background: #3b82f6; border-radius: 50%; } .legend-voltage-group { flex-wrap: wrap; gap: 10px; } .legend-voltage-label { font-weight: 600; } .legend-voltage-tier { display: flex; align-items: center; gap: 5px; white-space: nowrap; } .legend-swatch-gas { background: #d97706; border-radius: 50%; } .legend-swatch-water { background: #0891b2; border-radius: 50%; } .legend-swatch-territory { background: rgba(91,63,214,.18); border: 2px solid #5b3fd6; } .legend-swatch-habitat { background: rgba(46,125,50,.18); border: 2px solid #2e7d32; } .legend-swatch-historic { background: #8b5e34; border-radius: 50%; } .measure-tooltip { font-weight: 600; } #map-measure-distance.active, #map-measure-area.active { background: var(--accent); color: #fff; border-color: var(--accent); } .section { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; } .section-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--surface-alt); cursor: pointer; font-weight: 700; font-size: 12.5px; } .section-head .chevron { transition: transform .12s; font-size: 11px; color: var(--text-muted); } .section.collapsed .chevron { transform: rotate(-90deg); } .section.collapsed .section-body { display: none; } .section-body { padding: 12px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; } .section-body.single-col { grid-template-columns: 1fr; } .section-head-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .section-head-count { font-weight: 500; color: var(--text-faint); font-size: 11.5px; font-variant-numeric: tabular-nums; } .pill { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; } .pill-clear { background: var(--status-feasible-bg); color: var(--status-feasible); } .pill-pending { background: var(--status-investigating-bg); color: var(--status-investigating); } .pill-partial { background: var(--accent-soft); color: var(--accent-text); } .pill-issues { background: var(--danger-soft); color: var(--danger); } /* ---------- Due Diligence Checklist ---------- */ .dd-section-group { margin-bottom: 16px; } .dd-section-group:last-child { margin-bottom: 0; } .dd-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-faint); margin-bottom: 6px; padding-left: 2px; } .dd-subsection { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 6px; overflow: hidden; background: var(--surface); } .dd-subsection:last-child { margin-bottom: 0; } .dd-subhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; cursor: pointer; } .dd-subhead-title { font-size: 12.5px; font-weight: 700; } .dd-subhead-right { display: flex; align-items: center; gap: 8px; } .dd-count { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; } .dd-subsection.collapsed .dd-items { display: none; } .dd-subsection.collapsed .dd-subhead .chevron { transform: rotate(-90deg); } .dd-items { padding: 2px 10px 10px; border-top: 1px solid var(--border); } .dd-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 2px; font-size: 12.5px; } .dd-item input[type="checkbox"] { margin-top: 2px; flex: none; width: 15px; height: 15px; accent-color: var(--accent); } .dd-item.checked label { color: var(--text-faint); text-decoration: line-through; } .dd-notes { margin-top: 6px; width: 100%; font-size: 12px; font-family: inherit; color: var(--text); border: 1px solid var(--border); border-radius: 6px; background: var(--surface-alt); padding: 7px 9px; resize: vertical; min-height: 34px; } .dd-notes:focus { border-color: var(--accent); outline: none; } /* ---------- Permits & Approvals ---------- */ .permit-toolbar { display: flex; justify-content: flex-end; margin-bottom: 10px; } .permit-table { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .permit-row { display: grid; grid-template-columns: 1.6fr 1.2fr .95fr .95fr .95fr 1.3fr; gap: 8px; align-items: center; padding: 8px 10px; font-size: 12.5px; background: var(--surface); } .permit-row + .permit-row { border-top: 1px solid var(--border); } .permit-row.head { background: var(--surface-alt); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-faint); padding: 7px 10px; } .permit-name-cell { display: flex; flex-direction: column; gap: 4px; } .permit-notes-cell { display: flex; align-items: center; gap: 6px; } .permit-row .ll-field { border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; background: var(--surface); color: var(--text); width: 100%; font-size: 12.5px; font-family: inherit; } .permit-row .ll-field:focus { border-color: var(--accent); outline: none; } .permit-row .ll-remove { flex: none; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); border-radius: 6px; width: 26px; height: 26px; padding: 0; cursor: pointer; font-size: 12px; } .permit-row .ll-remove:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); } .src-tag { display: inline-block; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 6px; border-radius: 4px; width: fit-content; } .src-federal { background: var(--accent-soft); color: var(--accent-text); } .src-state { background: var(--status-investigating-bg); color: var(--status-investigating); } .src-local { background: var(--status-graveyard-bg); color: var(--status-graveyard); } /* ---------- Budget page ---------- */ /* Portfolio Summary (always on) + Selected Project (shown once a site filter is applied) side by side, each wrapping its own .budget-summary grid below — see budget.js's renderImpl for why each ignores different filters. */ .budget-summary-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; } @media (max-width: 900px) { .budget-summary-row { grid-template-columns: 1fr; } } /* Each card only has half the page width to work with (vs. the full width the single summary strip used to have), and dollar amounts can't wrap — so let the 5 cells reflow into however many columns actually fit instead of forcing 5 across and overflowing. */ .budget-summary-row .budget-summary { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } .budget-summary-card { display: flex; flex-direction: column; gap: 8px; } .budget-summary-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .budget-summary-title { font-size: 12.5px; font-weight: 700; color: var(--text-muted); } .budget-summary-project-badge { font-size: 11px; font-weight: 700; color: var(--accent-text); background: var(--accent-soft); border-radius: 999px; padding: 3px 9px; white-space: nowrap; } .budget-summary-empty { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; border: 1px dashed var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text-faint); font-size: 12.5px; padding: 14px 16px; } .budget-summary-row .budget-summary { margin-bottom: 0; } .budget-summary { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; } .budget-summary-cell { background: var(--surface); padding: 14px 16px; } /* Earnest Money sits in the same grid as the other cells but is visually set apart (accent left border + tinted background) since it's tracked for visibility only and isn't part of the Approved/Forecast/Variance math the rest of the row adds up to. */ .budget-summary-cell-earnest { background: var(--accent-soft); border-left: 3px solid var(--accent); padding-left: 13px; } .budget-summary-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-faint); margin-bottom: 4px; } .budget-summary-val { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; } .val-over { color: var(--danger); } .val-under { color: var(--status-feasible); } .budget-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; } .table-scroll { overflow-x: auto; } /* table-layout:fixed + the in budget.js are what actually keep these headers lined up with their columns — without it, the browser sizes each column from its widest cell independently in the head vs. body, which is what caused the header/data misalignment this replaced. */ table.budget-table { border-collapse: collapse; table-layout: fixed; width: 100%; min-width: 1080px; font-size: 12.5px; } table.budget-table th { text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-faint); background: var(--surface-alt); padding: 9px 10px; border-bottom: 1px solid var(--border); /* Longer labels (e.g. "Forecast at Completion") wrap to a second line within the column's already-correct width instead of truncating — the row just grows taller, nothing shifts out of alignment. */ white-space: normal; line-height: 1.3; } table.budget-table th.sortable { cursor: pointer; user-select: none; } table.budget-table th.sortable:hover { color: var(--text); } table.budget-table th.sort-active { color: var(--accent-text); } table.budget-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; overflow: hidden; } /* A cell holding an editable .bg-field would otherwise get padding twice — once from the td, once from the field itself — shifting the field's own text away from wherever the plain header text sits above it. Zero the td's padding for those cells (marked directly in the HTML as .field-cell, not via a :has() selector — not every browser in use here supports :has()) and let the field's own padding (matched to the th's below) be the only padding, so the two line up exactly. */ table.budget-table td.field-cell { padding: 0; } table.budget-table tbody tr:hover { background: var(--surface-alt); } table.budget-table .num { text-align: right; } table.budget-table .num input { text-align: right; } table.budget-table .bg-field { border: 1px solid transparent; border-radius: 0; padding: 6px 10px; background: transparent; color: var(--text); width: 100%; height: 100%; font-size: 12.5px; font-family: inherit; } table.budget-table .bg-field:hover { border-color: var(--border); background: var(--surface); } table.budget-table .bg-field:focus { border-color: var(--accent); background: var(--surface); outline: none; } .site-cell { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; } .site-name { font-weight: 600; } .variance-cell { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .variance-pos { color: var(--status-feasible); } .variance-neg { color: var(--danger); } .budget-table .ll-remove { flex: none; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); border-radius: 6px; width: 26px; height: 26px; padding: 0; cursor: pointer; font-size: 12px; } .budget-table .ll-remove:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); } @media (max-width: 720px) { .budget-summary { grid-template-columns: repeat(2, 1fr); } } .linked-cmd-mount { display: flex; flex-direction: column; gap: 6px; } .linked-cmd-card { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .linked-cmd-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; cursor: pointer; } .linked-cmd-row:hover { background: var(--surface-alt); } .linked-cmd-title { font-weight: 600; font-size: 13px; flex: 1; } .linked-cmd-chevron { color: var(--text-faint); font-size: 11px; } .linked-cmd-detail:empty { display: none; } .linked-cmd-detail { padding: 14px; border-top: 1px solid var(--border); background: var(--surface-alt); } .field { display: flex; flex-direction: column; gap: 4px; } .field[hidden] { display: none; } .field.span2 { grid-column: 1 / -1; } .field label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .02em; } .field label .ro-flag { text-transform: none; font-weight: 500; color: var(--text-faint); margin-left: 4px; } .field input, .field select, .field textarea { border: 1px solid var(--border); border-radius: 6px; padding: 7px 9px; background: var(--surface); color: var(--text); width: 100%; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); outline: none; } .field input[readonly], .field textarea[readonly], .field.readonly input { background: var(--surface-alt); color: var(--text-muted); } .field textarea { resize: vertical; min-height: 56px; } .field-input-row { display: flex; align-items: center; gap: 6px; } .field-input-row input, .field-input-row select, .field-input-row textarea { width: auto; flex: 1; min-width: 0; } /* ---------- Energy Strategy: label-left, input-right rows instead of the usual label-above-input stack — reads top-to-bottom as one field per line rather than scanning across two grid columns. ---------- */ .section-body.field-row { grid-template-columns: 1fr; } .section-body.field-row .field { flex-direction: row; align-items: center; gap: 10px; } .section-body.field-row .field.span2 { grid-column: auto; } .section-body.field-row .field label { flex: 0 0 230px; } .section-body.field-row .field-input-row { flex: 1; } @media (max-width: 560px) { .section-body.field-row .field { flex-direction: column; align-items: stretch; gap: 4px; } .section-body.field-row .field label { flex: none; } } .field-edit-btn { flex: none; border: 1px solid var(--border); background: var(--surface); border-radius: 6px; width: 28px; height: 28px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; color: var(--text-muted); } .field-edit-btn:hover { background: var(--surface-alt); color: var(--text); border-color: var(--accent); } .field-edit-btn[hidden] { display: none; } .checkbox-row { display: flex; align-items: center; gap: 8px; } .checkbox-row input { width: auto; } .meta-line { font-size: 11.5px; color: var(--text-faint); padding: 8px 2px 2px 2px; } .tag-input-wrap { display: flex; flex-wrap: wrap; gap: 5px; border: 1px solid var(--border); border-radius: 6px; padding: 6px 7px; background: var(--surface); min-height: 36px; } .tag-input-wrap input { border: none; outline: none; flex: 1; min-width: 80px; padding: 2px; } .tag-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 4px 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; } .tag-chip button { border: none; background: none; cursor: pointer; font-size: 12px; line-height: 1; padding: 2px 5px; color: inherit; opacity: .7; } .tag-chip button:hover { opacity: 1; } .tag-chip.r { background: var(--role-r-bg); color: var(--role-r); } .tag-chip.a { background: var(--role-a-bg); color: var(--role-a); } .tag-chip.c { background: var(--role-c-bg); color: var(--role-c); } .tag-chip.i-role { background: var(--role-i-bg); color: var(--role-i); } .tag-chip.contact { background: var(--accent-soft); color: var(--accent-text); } /* ---------- Toast ---------- */ .toast-stack { position: fixed; bottom: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; } .toast { background: #1c2430; color: #fff; padding: 10px 14px; border-radius: 8px; font-size: 13px; box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 12px; animation: toastin .15s ease-out; } @keyframes toastin { from { transform: translateY(6px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .toast button { background: none; border: none; color: #c4b5fd; font-weight: 700; cursor: pointer; font-size: 13px; } .toast.error { background: var(--danger); } /* ---------- Confirm modal ---------- */ .modal-backdrop { position: fixed; inset: 0; background: rgba(15,20,32,.4); display: flex; align-items: center; justify-content: center; z-index: 300; } .modal-box { background: var(--surface); color: var(--text); border-radius: var(--radius); padding: 20px; width: 380px; max-width: 92vw; box-shadow: var(--shadow-md); } .modal-box h3 { margin: 0 0 8px 0; font-size: 15px; } .modal-box p { margin: 0 0 16px 0; color: var(--text-muted); font-size: 13px; } .modal-actions { display: flex; justify-content: flex-end; gap: 8px; } .modal-close-x { position: absolute; top: 14px; right: 14px; border: none; background: none; cursor: pointer; font-size: 20px; line-height: 1; color: var(--text-muted); padding: 4px 8px; border-radius: 6px; } .modal-close-x:hover { color: var(--text); background: var(--surface-alt); } /* ---------- RACI page ---------- */ .raci-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; } .person-summary { display: flex; gap: 10px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; } .person-summary .psum-item { display: flex; align-items: center; gap: 8px; font-size: 13px; } .person-summary b { font-size: 18px; } .stage-group { margin-bottom: 18px; } .stage-title { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); margin: 0 0 8px 2px; display: flex; align-items: center; gap: 8px; } .stage-title .btn { margin-left: auto; } .raci-row { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 8px; } .raci-row-main { display: flex; align-items: center; gap: 12px; cursor: pointer; } .raci-tasknum { font-size: 11.5px; color: var(--text-faint); font-weight: 700; min-width: 34px; } .raci-taskname { flex: 1; font-weight: 600; font-size: 13.5px; } .raci-roles { display: flex; gap: 4px; flex-wrap: wrap; max-width: 46%; justify-content: flex-end; } .raci-row.highlight { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .raci-detail { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); display: none; } .raci-row.expanded .raci-detail { display: block; } .raci-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; } .raci-role-block label { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); margin-bottom: 5px; } .empty-state { text-align: center; padding: 50px 20px; color: var(--text-muted); } .empty-state .big { font-size: 28px; margin-bottom: 8px; } /* ---------- Travel Schedules page ---------- */ .travel-conflict-panel { border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; font-size: 13px; } .travel-conflict-panel.ok { background: var(--status-feasible-bg); color: var(--status-feasible); } .travel-conflict-panel.has-conflicts { background: var(--danger-soft); color: var(--danger); } .travel-conflict-title { font-weight: 700; margin-bottom: 6px; } .travel-conflict-item { padding: 3px 0; } .travel-conflict-item b { color: var(--text); } .travel-row.conflict { border-color: var(--danger); box-shadow: 0 0 0 2px var(--danger-soft); } .travel-person { font-weight: 600; font-size: 13.5px; min-width: 140px; } .travel-dest { flex: 1; font-size: 13px; color: var(--text-muted); } .travel-dates { font-size: 12.5px; color: var(--text-faint); white-space: nowrap; } .travel-conflict-badge { background: var(--danger-soft); color: var(--danger); } .travel-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; } .avail-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 18px; } .avail-title { font-weight: 700; font-size: 14px; margin-bottom: 10px; } .avail-controls { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; } .avail-controls .field { min-width: 160px; } .avail-people { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; } .avail-person-check { display: flex; align-items: center; gap: 5px; font-size: 13px; cursor: pointer; } .avail-results { display: flex; flex-direction: column; gap: 6px; } .avail-result { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius-sm); font-size: 13px; } .avail-result.available { background: var(--status-feasible-bg); color: var(--status-feasible); } .avail-result.traveling { background: var(--danger-soft); color: var(--danger); } .avail-result-name { font-weight: 600; } .avail-result-status { text-align: right; } .cal-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 18px; } .cal-header { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 12px; } .cal-month-label { font-weight: 700; font-size: 14px; min-width: 160px; text-align: center; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .cal-grid-dow { margin-bottom: 4px; } .cal-dow { text-align: center; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; } .cal-cell { min-height: 76px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; } .cal-cell-empty { border-color: transparent; } .cal-cell-today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .cal-daynum { font-size: 11px; font-weight: 700; color: var(--text-faint); } .cal-chips { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; } .cal-chip { font-size: 10.5px; padding: 1px 5px; border-radius: 4px; background: var(--surface-alt); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-chip.conflict { background: var(--danger-soft); color: var(--danger); font-weight: 600; } @media (max-width: 720px) { .cal-cell { min-height: 54px; } .cal-chip { font-size: 9.5px; } } /* ---------- Command Center page ---------- */ .cc-section { margin-bottom: 26px; } .cc-section-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; } .cc-section-head h3 { margin: 0; font-size: 15px; } /* ---------- Milestone columns: general / high-priority / budget & spend ---------- */ .cc-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; } @media (max-width: 980px) { .cc-columns { grid-template-columns: 1fr; } } .cc-columns-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1200px) { .cc-columns-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .cc-columns-4 { grid-template-columns: 1fr; } } .cc-column { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; min-width: 0; } .cc-column-head { font-size: 12.5px; font-weight: 800; margin-bottom: 10px; display: flex; align-items: center; gap: 7px; } .cc-column-count { background: var(--accent-soft); color: var(--accent-text); font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; } .cc-column-body { max-height: 420px; overflow-y: auto; padding-right: 2px; } .cc-milestone, .cc-budget-row { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 6px; cursor: pointer; } .cc-milestone:hover, .cc-budget-row:hover { border-color: var(--accent); } .cc-milestone-top, .cc-budget-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .cc-milestone-site { font-weight: 700; font-size: 12.5px; } .cc-milestone-sub { margin-top: 3px; } .cc-budget-amount { font-weight: 800; font-size: 13px; color: var(--status-feasible); white-space: nowrap; } .cc-budget-meta { margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .cc-row { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 8px; } .cc-row-main { display: flex; align-items: center; gap: 10px; cursor: pointer; flex-wrap: wrap; } .cc-row-title { font-weight: 600; font-size: 13.5px; } .cc-detail { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); display: none; } .cc-row.expanded .cc-detail { display: block; } .cc-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; } .site-combo { position: relative; } .site-combo-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); max-height: 220px; overflow-y: auto; z-index: 20; } .site-combo-option { padding: 8px 10px; cursor: pointer; font-size: 13px; } .site-combo-option:hover { background: var(--surface-alt); } .site-combo-empty { padding: 8px 10px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #10141d; --surface: #171d29; --surface-alt: #1e2532; --border: #2a3242; --text: #e7ebf3; --text-muted: #9aa4b5; --text-faint: #6b7685; --accent-soft: #2a2350; --sidebar-bg: #131c2e; --sidebar-border: #263352; --sidebar-text: #c7cedb; --sidebar-text-muted: #7c8aa3; --sidebar-hover-bg: #1c2740; --sidebar-chip-bg: #000000; } } /* Explicit theme choice (from the hamburger menu) wins over system preference in both directions. */ :root[data-theme="dark"] { --bg: #10141d; --surface: #171d29; --surface-alt: #1e2532; --border: #2a3242; --text: #e7ebf3; --text-muted: #9aa4b5; --text-faint: #6b7685; --accent-soft: #2a2350; --sidebar-bg: #131c2e; --sidebar-border: #263352; --sidebar-text: #c7cedb; --sidebar-text-muted: #7c8aa3; --sidebar-hover-bg: #1c2740; --sidebar-chip-bg: #000000; } /* ---------- Hamburger menu ---------- */ .hamburger-btn { border: none; background: transparent; cursor: pointer; width: 34px; height: 34px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 16px; } .hamburger-btn:hover { background: var(--surface-alt); color: var(--text); } .hamburger-menu-wrap { position: relative; } .hamburger-dropdown { position: absolute; top: 42px; right: 0; z-index: 100; width: 300px; max-height: 80vh; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 10px; } .hamburger-section { padding: 6px 8px 10px 8px; } .hamburger-section + .hamburger-section { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 10px; } .hamburger-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); margin-bottom: 8px; } .hamburger-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .hamburger-row:last-child { margin-bottom: 0; } .hb-row { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: var(--radius-sm); cursor: pointer; width: 100%; border: none; background: none; text-align: left; } .hb-row:hover { background: var(--surface-alt); } .hb-row-icon { font-size: 16px; flex: none; width: 22px; text-align: center; } .hb-row-text { flex: 1; min-width: 0; } .hb-row-title { font-size: 13px; font-weight: 700; color: var(--text); } .hb-row-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; } .hb-row-control { flex: none; } .seg-control { display: flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; } .seg-control button { border: none; background: var(--surface); color: var(--text-muted); padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; } .seg-control button.active { background: var(--accent); color: #fff; } .switch { position: relative; width: 38px; height: 22px; flex: none; } .switch input { opacity: 0; width: 0; height: 0; } .switch-track { position: absolute; inset: 0; background: var(--border); border-radius: 999px; cursor: pointer; transition: background .15s; } .switch-track::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: var(--shadow-sm); } .switch input:checked + .switch-track { background: var(--accent); } .switch input:checked + .switch-track::before { transform: translateX(16px); } .hamburger-item { display: flex; align-items: center; width: 100%; text-align: left; border: none; background: none; cursor: pointer; padding: 8px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; color: var(--text); } .hamburger-item:hover { background: var(--surface-alt); } /* ---------- Edit Sidebar / User Access modals ---------- */ .editable-list-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 6px; background: var(--surface); } .editable-list-row input[type="text"] { flex: 1; border: 1px solid transparent; background: transparent; padding: 4px 6px; border-radius: 5px; color: var(--text); } .editable-list-row input[type="text"]:hover { border-color: var(--border); } .editable-list-row input[type="text"]:focus { border-color: var(--accent); outline: none; background: var(--surface); } .icon-btn { border: 1px solid var(--border); background: var(--surface); cursor: pointer; width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 12px; padding: 0; } .icon-btn:hover { color: var(--text); border-color: #c7cedb; } .icon-btn[disabled] { opacity: .35; cursor: default; } .icon-btn:hover[disabled] { color: var(--text-muted); border-color: var(--border); } .icon-btn-text { width: auto; padding: 0 10px; font-size: 11.5px; font-weight: 700; } /* ---------- Command Center: greeting banner ---------- */ .greeting-banner { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; color: #fff; border-radius: var(--radius); padding: 20px 24px; margin-bottom: 20px; transition: background 1.2s ease; } .greeting-banner.is-day { background: linear-gradient(180deg, #4f97dd 0%, #79b8e8 55%, #cfe7f7 100%); } .greeting-banner.is-night { background: linear-gradient(180deg, #0b1130 0%, #1c2c54 62%, #2c3f6e 100%); } .greeting-text { position: relative; z-index: 2; } .greeting-title { font-size: 19px; font-weight: 800; text-shadow: 0 1px 4px rgba(0,0,0,.28); } .greeting-sub { font-size: 13px; opacity: .92; margin-top: 3px; text-shadow: 0 1px 3px rgba(0,0,0,.22); } .greeting-icon-wrap { position: relative; z-index: 2; flex: none; width: 60px; height: 60px; } .greeting-sun, .greeting-moon { position: absolute; inset: 8px; border-radius: 50%; } .greeting-sun { background: radial-gradient(circle at 35% 32%, #fff8d8 0%, #ffd257 40%, #ffb648 68%, rgba(255,182,72,0) 78%); box-shadow: 0 0 26px 10px rgba(255, 197, 92, 0.45); } .greeting-moon { background: radial-gradient(circle at 35% 32%, #ffffff 0%, #e4ebf5 45%, #b9c6da 72%, rgba(185,198,218,0) 80%); box-shadow: 0 0 18px 6px rgba(200, 212, 240, 0.35); } .greeting-stars { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .greeting-star { position: absolute; background: #fff; border-radius: 50%; box-shadow: 0 0 4px 1px rgba(255,255,255,.85); animation: star-twinkle 2.8s ease-in-out infinite; } @keyframes star-twinkle { 0%, 100% { opacity: .15; } 50% { opacity: 1; } } /* ---------- Command Center: unified feed ---------- */ .feed-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; } .tab-pill { border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); padding: 6px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; cursor: pointer; } .tab-pill:hover { color: var(--text); } .tab-pill.active { background: var(--accent); border-color: var(--accent); color: #fff; } .cc-site-focus { position: relative; min-width: 200px; flex: 1 1 200px; max-width: 280px; } .cc-site-focus-input { width: 100%; border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 6px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; } .cc-site-focus-input::placeholder { color: var(--text-muted); font-weight: 600; } .cc-site-focus-input:focus { outline: none; border-color: var(--accent); } .cc-site-focus-clear { border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); padding: 6px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; cursor: pointer; } .cc-site-focus-clear:hover { color: var(--text); border-color: var(--accent); } .cc-exec-overview { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 8px; } .cc-exec-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .cc-exec-title { font-size: 17px; font-weight: 700; } .cc-exec-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 20px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .cc-exec-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font-size: 13.5px; } .cc-exec-stat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); } .cc-exec-facts-text { margin-top: 6px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; } .cc-exec-facts + .cc-exec-facts { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); } .cc-exec-dd { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .cc-exec-dd-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .cc-exec-dd-pct { font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .cc-exec-dd-bar, .cc-exec-dd-row-bar { background: var(--surface-alt); border-radius: 999px; overflow: hidden; height: 7px; } .cc-exec-dd-bar { margin-bottom: 12px; } .cc-exec-dd-bar-fill, .cc-exec-dd-row-bar-fill { background: var(--status-opportunity); height: 100%; border-radius: 999px; } .cc-exec-dd-bar-fill.fill-over, .cc-exec-dd-row-bar-fill.fill-over { background: var(--danger); } .cc-exec-dd-row-bar-fill.fill-ok { background: var(--status-feasible); } .cc-exec-dd-rows { display: flex; flex-direction: column; gap: 8px; } .cc-exec-dd-row { display: grid; grid-template-columns: 1fr 2fr auto; align-items: center; gap: 10px; font-size: 12.5px; } .cc-exec-dd-row-title { color: var(--text-muted); } .cc-exec-dd-row-count { color: var(--text-faint); font-variant-numeric: tabular-nums; flex: none; } /* ---------- Command Center: floating create-form window ---------- */ .cc-float-window { position: fixed; z-index: 400; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); overflow: hidden; } .cc-float-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; background: var(--surface-alt); border-bottom: 1px solid var(--border); cursor: move; user-select: none; flex: none; } .cc-float-titlebar-label { font-size: 13px; font-weight: 700; } .cc-float-close { border: none; background: transparent; color: var(--text-muted); font-size: 15px; line-height: 1; cursor: pointer; padding: 3px 7px; border-radius: var(--radius-sm); } .cc-float-close:hover { background: var(--border); color: var(--text); } .cc-float-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; } .cc-float-resize { position: absolute; right: 0; bottom: 0; width: 20px; height: 20px; cursor: nwse-resize; } .cc-float-resize::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 9px; height: 9px; border-right: 2px solid var(--border); border-bottom: 2px solid var(--border); } .feed-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); border-left: 3px solid var(--border); padding: 12px 14px; margin-bottom: 8px; } .feed-card.feed-milestone { border-left-color: var(--role-c); } .feed-card.feed-action_item { border-left-color: var(--status-feasible); } .feed-card.feed-risk { border-left-color: var(--danger); } .feed-card.feed-reminder { border-left-color: var(--status-investigating); } .feed-card.feed-completed { opacity: .6; } .feed-card-main { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; } .feed-card-body { flex: 1; min-width: 0; } .feed-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 5px; } .feed-tag.feed-milestone { color: var(--role-c); } .feed-tag.feed-action_item { color: var(--status-feasible); } .feed-tag.feed-risk { color: var(--danger); } .feed-tag.feed-reminder { color: var(--status-investigating); } .feed-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .feed-title { font-weight: 700; font-size: 13.5px; } .feed-title.feed-done { text-decoration: line-through; color: var(--text-muted); } .feed-meta { font-size: 12px; color: var(--text-muted); margin-top: 3px; } .feed-meta.feed-overdue { color: var(--danger); font-weight: 700; } .feed-desc { font-size: 12px; color: var(--text-faint); margin-top: 3px; } .feed-card-actions { flex: none; display: flex; align-items: center; gap: 8px; } .feed-detail { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); display: none; } .feed-card.expanded .feed-detail { display: block; } /* ---------- Notification bell ---------- */ .bell-wrap { position: relative; } .bell-btn { position: relative; border: none; background: transparent; cursor: pointer; width: 34px; height: 34px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 16px; } .bell-btn:hover { background: var(--surface-alt); color: var(--text); } .bell-badge { position: absolute; top: 2px; right: 2px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 800; min-width: 15px; height: 15px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 3px; } .bell-dropdown { position: absolute; top: 42px; right: 0; z-index: 100; width: 320px; max-height: 70vh; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 12px; } .bell-dropdown-title { font-size: 13px; font-weight: 800; margin-bottom: 8px; } .notif-card { border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 8px; position: relative; } .notif-title { font-weight: 700; font-size: 13px; padding-right: 16px; } .notif-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .notif-open { font-size: 12px; font-weight: 700; color: var(--accent-text); cursor: pointer; margin-top: 6px; display: inline-block; } .notif-dismiss { position: absolute; top: 8px; right: 8px; border: none; background: none; cursor: pointer; color: var(--text-faint); font-size: 13px; padding: 2px; } .notif-dismiss:hover { color: var(--text); } .notif-empty { font-size: 12.5px; color: var(--text-muted); text-align: center; padding: 14px 4px; } /* ---------- Auth screen (login / create-owner-account) ---------- */ .auth-screen { position: fixed; top: var(--env-banner-h); right: 0; bottom: 0; left: 0; z-index: 500; background: #0d1220; display: flex; align-items: center; justify-content: center; padding: 20px; } .auth-screen[hidden] { display: none; } .app-shell[hidden] { display: none; } .auth-card { width: 380px; max-width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 28px 26px; } .auth-logo { width: 130px; height: auto; display: block; margin: 0 auto 18px auto; } .auth-title { font-size: 17px; font-weight: 800; text-align: center; color: var(--text); } .auth-sub { font-size: 12.5px; color: var(--text-muted); text-align: center; margin-top: 4px; margin-bottom: 20px; } .auth-field { margin-bottom: 12px; } .auth-field label { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 5px; } .auth-field input { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 13.5px; } .auth-field input:focus { border-color: var(--accent); outline: none; } .auth-error { color: var(--danger); font-size: 12.5px; margin-bottom: 10px; min-height: 1em; } .auth-submit { width: 100%; justify-content: center; padding: 10px; font-size: 13.5px; margin-top: 6px; } .auth-switch-link { display: block; text-align: center; margin-top: 14px; font-size: 12.5px; color: var(--text-muted); text-decoration: none; } .auth-switch-link:hover { color: var(--accent-text); text-decoration: underline; } /* ---------- User Profiles (admin) ---------- */ .profile-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 14px; } .access-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 14px; } .access-grid-item label { display: block; font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px; } .profile-row { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 8px; background: var(--surface); } .profile-row-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .profile-name { font-weight: 700; font-size: 13.5px; } .profile-meta { font-size: 11.5px; color: var(--text-muted); } .profile-badge { font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); } .profile-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; } .profile-edit-body { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); display: none; } .profile-row.expanded .profile-edit-body { display: block; } .password-field-wrap { position: relative; } .password-field-wrap input { width: 100%; padding-right: 36px; box-sizing: border-box; } .password-toggle { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); border: 1px solid var(--border); background: var(--surface-alt); cursor: pointer; padding: 3px 6px; line-height: 1; font-size: 16px; color: var(--text-muted); border-radius: 5px; } .password-toggle:hover { color: var(--text); border-color: #c7cedb; } .password-toggle.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }