:root {
    /* BlankSlate palette - slate + chalk + one signal accent (Kiln), the
       deliberate break from ACAA Solutions' own navy/sky-blue/gold fish
       mark. --brand-* names are kept (not renamed to --bs-*) so every
       existing var(--brand-blue) etc. reference throughout this file picks
       up the new palette automatically - see the notes on --brand-blue and
       --brand-yellow below for where a name no longer matches its role. */
    --brand-navy: #2A3140;
    /* Was a distinct navy/blue; now IS the one signal accent (Kiln) - every
       primary action, link-hover, and "current" state in the app already
       routed through this token. */
    --brand-blue: #E2553C;
    --brand-blue-dark: #C2432C;
    /* Was ACAA's sky-blue; repointed to a neutral slate-grey rather than a
       second blue, so hover/secondary-accent spots don't drift back toward
       the blues BlankSlate is breaking from. */
    --brand-skyblue: #5B6472;
    /* Was ACAA's gold; also collapses to Kiln so every accent in the app
       shares the one signal color instead of two competing hues. .btn-tab
       is restyled separately below (flat/outlined) so it doesn't just
       become a second solid-Kiln button once this repoints. */
    --brand-yellow: #E2553C;
    --bg-tint: #EFF1EE;
    --line: #DADFDA;
    /* Fallback for the brief window before the sync script below runs (or
       if JS is disabled) - a generous single-line-navbar estimate, kept in
       sync with the actual rendered height afterward. See #appHeader's
       inline script in _Layout.cshtml. */
    --header-height: 78px;
}

body {
    font-family: "Archivo", -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    color: var(--brand-navy);
    background: var(--bg-tint);
    /* 2px smaller than the browser default so plain text (table cells,
       dl/dd values, paragraphs) that has no more specific font-size below
       also shrinks - everything else in this file is reduced the same way. */
    font-size: calc(1rem - 2px);
    /* header is now fixed (see below) and no longer occupies space in
       normal flow on its own - this keeps real page content from starting
       out underneath it. */
    padding-top: var(--header-height);
    /* Leaves room so .mobile-bottom-nav (also fixed, shown on every device
       now - see its own CSS below) never covers the last bit of real page
       content - matches the bar's own height. */
    padding-bottom: 64px;
}

/* Plain links (not .btn/.btn-tab/.icon-btn) default to the same navy,
   no-underline-until-hover color as the sidebar's Quick Links, but not the
   same weight - Quick Links (.sidebar-nav a) keep their own explicit
   font-weight: 600 below; plain body links stay regular weight. More
   specific selectors throughout this file (nav, .sidebar-nav, buttons,
   etc.) already win over this on specificity, so they're unaffected. */
a {
    color: var(--brand-navy);
    text-decoration: none;
}

a:hover {
    color: var(--brand-blue);
    text-decoration: underline;
}

/* The page's top header, in the main body content area (not the navbar
   brand) - almost always the linked record's own name (Company Details'
   <h1>@@Model.Name</h1>, Contact/Deal/Estimate/Product Details, list
   page titles like "Companies"), so this is the "link name header" font. */
main h1,
main h2,
main h3 {
    font-family: "Archivo", -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* Flat slate header - no illustration, no wave transition. See
   Views/Shared/_Layout.cshtml; the old fish-watermark imagery and wave
   divider were removed from the markup along with this file's former
   page-watermark, header-watermark, and header-wave rules. */
/* Fixed so the navbar (and, when present, the impersonation banner it now
   also contains) stays reachable while scrolling a long page instead of
   scrolling away with everything else. z-index sits below
   .site-map-overlay's 200 so that overlay still covers the header when
   open, and below .toast's 1000 so a toast is never clipped underneath
   it; nothing else on the page uses a competing z-index in this range.
   body reads --header-height (kept in sync by #appHeader's own script,
   see _Layout.cshtml) to offset its content correctly, since a fixed
   element no longer pushes normal-flow content down on its own. */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--brand-navy);
}

.navbar {
    position: relative;
    padding: 0.75rem 1.5rem;
    display: flex;
    /* 1rem, not the previous 1.25rem - reclaims width the row needs to stay
       on one line at common laptop widths (~1440px), especially now that
       Idea/Bug/Help/Ask Claude are four separate top-nav-quicklink items
       instead of one combined Feedback link. */
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.navbar a {
    color: #fff;
    text-decoration: none;
    font-size: calc(0.95rem - 1px);
}

/* Mobile/tablet nav collapse (usability finding 2026-09-10: at 375-768px
   the navbar had no way to shrink other than .navbar's own flex-wrap,
   which just wrapped every link onto its own line and pushed the page's
   real content down ~380px). Hidden entirely above the breakpoint - the
   desktop navbar is unaffected, .navbar-collapse just always renders as
   the normal flex row it always has. Below the breakpoint, .navbar-toggle
   appears and .navbar-collapse starts collapsed, same plain
   `classList.toggle` + `hidden`-attribute-style JS convention as the Site
   Map overlay elsewhere in this file - not the same widget as that ☰
   button, which is a different, unrelated modal trigger. */
.navbar-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 0.4rem;
    margin-left: auto;
    cursor: pointer;
}

.navbar-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
}

.navbar-collapse {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    flex: 1 1 auto;
}

/* Hidden on every device - .mobile-bottom-nav below carries the same four
   links (Idea/Bug/Help/Ask Claude), always visible as a proper labeled tap
   target instead of a row of tiny unlabeled icons in the navbar itself.
   Originally hidden only below the 900px breakpoint; promoted to
   unconditional once the bottom bar itself became universal too. */
.top-nav-quicklink {
    display: none;
}

@media (max-width: 900px) {
    .navbar-toggle {
        display: flex;
    }

    .navbar-collapse {
        display: none;
        width: 100%;
        flex-basis: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.85rem;
        margin-top: 0.85rem;
    }

    .navbar-collapse.open {
        display: flex;
    }

    .navbar-collapse .navbar-spacer {
        display: none;
    }

    /* Productivity Tools moves into the hamburger menu below this
       breakpoint instead of showing as a full-width sidebar box that used
       to push the actual page content down past three stacked cards first
       (Angela's own report, 2026-09-11) - .navbar-mobile-tools is the
       hamburger's copy of the exact same links. Quick Links gets the same
       treatment for the same reason - its own copy now lives in the
       navbar's Quick Links dropdown (see .nav-dropdown above), which folds
       into this same collapsed hamburger menu. */
    .productivity-tools-sidebar,
    .quick-links-sidebar {
        display: none;
    }

    .navbar-mobile-tools {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
        width: 100%;
        padding-top: 0.6rem;
        border-top: 1px solid rgba(255, 255, 255, 0.16);
    }

    .navbar-mobile-tools-label {
        font-size: calc(0.8rem - 1px);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #d7dbe3;
    }
}

/* Desktop default - only shown at all below the 900px breakpoint above. */
.navbar-mobile-tools {
    display: none;
}

/* Home dashboard, mobile only (Angela's own report, 2026-09-11): Quick Add
   is the same "push the real content down past several stacked cards"
   problem Productivity Tools had above, but here there's no hamburger-menu
   copy to fall back on - .home-mobile-landing-tiles below puts the same
   landing pages back in the page's own flow instead (a richer card grid
   than the nav dropdown's own plain link list, fitting for a landing
   page). Quick Links itself no longer needs its own entry here - it's
   already hidden everywhere on mobile now (see .quick-links-sidebar
   above), not just on Home. Scoped to just Home/Index via
   ViewData["BodyClass"] so every other page keeps its sidebar exactly
   as-is on mobile. */
.home-mobile-landing-tiles {
    display: none;
}

@media (max-width: 900px) {
    body.section-home .quick-add-sidebar {
        display: none;
    }

    .home-mobile-landing-tiles {
        display: block;
        margin: 1.5rem 0;
    }
}

/* Sticky bottom tab bar - Idea/Defect/Help/Ask Claude, replacing the
   equivalent .top-nav-quicklink icons that used to sit in the navbar
   itself (see _Layout.cshtml's own comment on why). Originally mobile-only
   (below the 900px breakpoint); shown on every device now, so this is one
   unconditional rule rather than gated behind a media query. */
.mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;
    background: var(--brand-navy);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
}

.mobile-bottom-nav a {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-height: 56px;
    color: #fff;
    text-decoration: none;
    font-size: calc(0.75rem - 1px);
}

.mobile-bottom-nav a:hover {
    color: var(--brand-skyblue);
}

.mobile-bottom-nav-icon {
    display: inline-flex;
    gap: 0.3rem;
    font-size: 1.25rem;
    line-height: 1;
}

.navbar a:hover {
    color: var(--brand-skyblue);
}

/* Plain <button> nav items (☰ Site Map toggle, the bookmark star) -
   <button> doesn't inherit .navbar a's styling since it isn't an anchor,
   so it needs its own reset to look like a plain white nav link -
   including font-family/font-size, which a bare <button> otherwise takes
   from the browser's own form-control default font/size rather than the
   page's, not just color/decoration. Sized to match .navbar a and
   .nav-dropdown-toggle exactly, so "⚙️ Tools", "☆ Add to Bookmarks", and
   the account menu toggle all read as the same kind of nav item. */
.navbar .icon-button {
    background: none;
    border: none;
    color: #fff;
    font-family: inherit;
    font-size: calc(0.95rem - 1px);
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

.navbar .icon-button:hover {
    color: var(--brand-skyblue);
}

/* Account menu in the navbar (Views/Shared/_Layout.cshtml) - clicking the
   signed-in username reveals My Account/My Company instead of jumping
   straight to Change Password, and (unlike the old Quick Links dropdown
   this class shape is reused from) stays a floating dropdown at every
   width rather than folding into the hamburger stack, since there's no
   separate always-visible sidebar copy of these two links to fall back
   on. .nav-dropdown gives the toggle button a positioning context for its
   own menu. */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    background: none;
    border: none;
    color: #fff;
    font-family: inherit;
    font-size: calc(0.95rem - 1px);
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.nav-dropdown-toggle:hover {
    color: var(--brand-skyblue);
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.75rem;
    background: #fff;
    border: 1px solid #e4e7eb;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(23, 31, 42, 0.22);
    min-width: 180px;
    padding: 0.4rem 0;
    /* Below .site-map-overlay's 200 (that overlay still needs to cover
       this if both were somehow open at once) but above ordinary page
       content. */
    z-index: 110;
    display: flex;
    flex-direction: column;
}

.nav-dropdown-menu[hidden] {
    display: none;
}

.nav-dropdown-menu a {
    color: var(--brand-navy);
    padding: 0.55rem 1rem;
    font-size: calc(0.9rem - 1px);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.nav-dropdown-menu a:hover {
    background: var(--bg-tint);
    color: var(--brand-blue);
}

/* Below the mobile breakpoint the menu rides inside the collapsed
   hamburger menu's own column flow instead of floating - an absolutely
   positioned panel would either overflow a narrow viewport or hide behind
   the rest of the collapsed menu's content. */
@media (max-width: 900px) {
    .nav-dropdown-menu {
        position: static;
        margin-top: 0.5rem;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding-left: 0.5rem;
    }
}

/* Full site index overlay, opened by the ☰ toggle above (see _Layout.cshtml's
   GetSiteMap() for the actual section/link data - alphabetized parent
   sections, each with an alphabetized link list, gated per-link with the
   same role/claim checks used everywhere else in this file). Plain
   show/hide via the `hidden` attribute, toggled in a small inline <script>
   in _Layout.cshtml - no need for a JS framework for this. */
.site-map-overlay {
    position: fixed;
    inset: 0;
    background: rgba(42, 49, 64, 0.55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 4rem 1.5rem;
    z-index: 200;
}

/* `[hidden]` alone isn't enough - this file's own `display: flex` above is
   author-origin CSS, which beats the browser's UA-stylesheet `[hidden] {
   display: none }` regardless of specificity, so without this the overlay
   would render (and block the whole page) even while `hidden` is set. */
.site-map-overlay[hidden] {
    display: none;
}

.site-map-panel {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(42, 49, 64, 0.35);
    max-width: 960px;
    width: 100%;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
}

.site-map-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.75rem;
    border-bottom: 1px solid #e5e7f2;
    position: sticky;
    top: 0;
    background: #fff;
}

.site-map-panel-header h2 {
    margin: 0;
    font-family: "PT Sans Narrow", "DM Sans", -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    color: var(--brand-navy);
}

.site-map-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--brand-navy);
    cursor: pointer;
    padding: 0 0.25rem;
}

.site-map-close:hover {
    color: var(--brand-blue);
}

.site-map-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1.75rem;
    padding: 1.75rem;
}

.site-map-section h3 {
    margin: 0 0 0.5rem;
    font-family: "PT Sans Narrow", "DM Sans", -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    font-size: calc(1.05rem - 1px);
    color: var(--brand-navy);
    border-bottom: 2px solid var(--brand-yellow);
    padding-bottom: 0.35rem;
}

.site-map-section ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.site-map-section a {
    color: var(--brand-blue);
    text-decoration: none;
    font-size: calc(0.95rem - 1px);
}

.site-map-section a:hover {
    text-decoration: underline;
}

@media (max-width: 700px) {
    .site-map-overlay {
        padding: 2rem 1rem;
    }

    .site-map-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
}

.navbar-brand:hover {
    color: #fff;
}

/* Small rounded badge behind the fish icon, echoing the one-pager's icon
   treatment - a plain small logo floating on flat navy read as an
   afterthought, this gives it a bit of presence without making it bigger
   than the brand name next to it. */
/* The Modules mark (see Views/Shared/_ModulesMark.cshtml) is a
   self-contained tile - own slate fill, own rounded corners - so unlike the
   old fish-icon <img> it needs no circular backdrop or padding here. */
.navbar-logo {
    height: 32px;
    width: 32px;
    display: block;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

/* The wordmark half of the lockup: "Blank" at 500 against "Slate" at 800,
   tracked in slightly. Archivo is loaded at exactly those two weights (see
   _Layout.cshtml). The <b> only exists when the tenant hasn't overridden
   SystemName - the weight split is meaningless on someone else's name, so
   an overridden name just renders flat at 500. */
.brand-name {
    font-weight: 500;
    letter-spacing: -0.035em;
    font-size: calc(1.1rem - 1px);
    color: #fff;
}

.brand-name b {
    font-weight: 800;
}

/* Small letter-spaced caps under the brand name, now in the Kiln signal
   color rather than ACAA's gold. */
.brand-tagline {
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    color: var(--brand-yellow);
    font-weight: 700;
    text-transform: uppercase;
}

.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 1.5rem;
}

/* Left-hand "Quick Links" sidebar, added alongside the main body container -
   .container itself keeps its existing max-width/centering (the footer
   reuses that same class), this just makes it a two-column flex row when
   the sidebar modifier is also present. min-width:0 on <main> stops a wide
   table from forcing the whole row wider than the sidebar can shrink for. */
.body-with-sidebar {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    /* A bit more top breathing room than .container's own 1.5rem. */
    padding-top: 2.25rem;
}

.body-with-sidebar main {
    flex: 1 1 auto;
    min-width: 0;
}

/* Holds one or more .sidebar boxes stacked vertically - normally just
   Quick Links, plus a second box for page-specific content rendered via
   the SidebarExtra section (see _Layout.cshtml) on pages that define one,
   e.g. Project Details' Files panel. Each box is its own separate white
   card, not one box with an internal divider, so the width/flex-sizing
   that used to live on .sidebar itself now lives here instead. */
.sidebar-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 0 0 220px;
}

.sidebar {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1rem;
}

.sidebar h3 {
    margin: 0 0 0.75rem;
    font-size: calc(0.8rem - 1px);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #7b8794;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.sidebar-nav a {
    color: var(--brand-navy);
    text-decoration: none;
    font-weight: 600;
    font-size: calc(0.95rem - 1px);
}

.sidebar-nav a:hover {
    color: var(--brand-blue);
    text-decoration: underline;
}

/* Wraps page-specific content rendered into the second .sidebar box via
   the SidebarExtra section (see _Layout.cshtml), currently just Project
   Details' Files panel. The heading/list font-sizes are scaled down to
   match the sidebar's own compact type, since _FilesPanel is normally
   rendered at full main-content width. */
.sidebar-module h2 {
    font-size: calc(0.95rem - 1px);
    margin: 0 0 0.65rem;
}

.sidebar-module .files-list li {
    font-size: calc(0.85rem - 1px);
    word-break: break-word;
}

.sidebar-module input[type="file"] {
    width: 100%;
    font-size: calc(0.8rem - 1px);
}

@media (max-width: 700px) {
    .body-with-sidebar {
        flex-direction: column;
    }

    .sidebar-column {
        flex: none;
        width: 100%;
    }

    .sidebar {
        box-sizing: border-box;
    }

    .sidebar-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
    }
}

/* Financial Advisor module subnav (_FinancialAdvisorNav.cshtml) - 15
   destinations shared across every page in the module. Grouped into
   Overview/Records/Insights/Planning clusters (a thin left border marks
   each group after the first) instead of one flat row, and styled as
   light tabs - only the active page gets a filled pill; everything else
   is quiet text that just gets a hover background - so fifteen items
   don't all compete at the same solid-button visual weight .btn/.btn-tab
   are meant for a handful of, not fifteen destinations. */
.fa-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
    margin: 0 0 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e4e7eb;
}

.fa-subnav-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding-left: 1.25rem;
    border-left: 1px solid #e4e7eb;
}

.fa-subnav-group:first-child {
    padding-left: 0;
    border-left: none;
}

.fa-subnav a {
    display: inline-block;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    text-decoration: none;
    font-size: calc(0.9rem - 1px);
    font-weight: 600;
    color: #7b8794;
}

.fa-subnav a:hover {
    background: var(--bg-tint);
    color: var(--brand-navy);
}

.fa-subnav a.active {
    background: var(--brand-blue);
    color: #fff;
}

@media (max-width: 700px) {
    .fa-subnav-group {
        padding-left: 0;
        border-left: none;
    }
}

.btn {
    display: inline-block;
    background: var(--brand-blue);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-size: calc(0.95rem - 1px);
}

.btn:hover {
    background: var(--brand-blue-dark);
}

/* Row under the Company Details referral link box - the Share button
   (navigator.share, see Company/Details.cshtml's inline script) plus a
   status message for its clipboard-copy fallback on desktop. */
.referral-share-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

/* Generic flex row with breathing room between inline controls (checkboxes,
   buttons) that would otherwise be crammed onto one line with only &nbsp;
   between them - first used on My Account's Outlook sync controls. */
.button-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0.75rem 0;
}

/* Stacks multiple independent forms (e.g. My Account's Outlook section -
   sync settings, resync, disconnect are three separate POSTs) with clear
   space between each instead of them running together. */
.stacked-forms > * + * {
    margin-top: 0.85rem;
}

.referral-share-status {
    font-size: calc(0.85rem - 1px);
    color: var(--brand-blue);
}

/* Same shape as .btn, gold instead of blue - used for the inactive state
   of filter tabs (e.g. Events page type filters) so unselected options
   still read as clickable buttons rather than plain links. */
/* Secondary action - deliberately NOT a second solid color (--brand-yellow
   now equals the same Kiln accent as .btn's --brand-blue) - primary vs.
   secondary reads through fill weight instead: solid Kiln vs. flat/outlined
   slate, one signal accent either way. */
.btn-tab {
    display: inline-block;
    background: #fff;
    color: var(--brand-navy);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    text-decoration: none;
    border: 1px solid var(--line);
    cursor: pointer;
    font-size: calc(0.95rem - 1px);
    font-weight: 600;
}

.btn-tab:hover {
    background: var(--bg-tint);
}

.pager {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
}

.pager button.btn-tab:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.pager-status {
    color: #7b8794;
    font-size: calc(0.9rem - 1px);
}

/* Right-aligns action buttons (e.g. + New/Import) directly above a list
   table, instead of them sitting in their own left-aligned paragraph. */
.table-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

/* Puts a .filter-row and a .table-toolbar on the same line, directly above
   a list table - filter on the left, action buttons on the right. Wraps to
   two lines on narrow screens rather than crowding both onto one. */
.table-toolbar-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

/* Small icon-only action buttons used in table rows (Details/Edit/
   Deactivate) instead of text links, so a row of actions stays compact.
   .icon-btn-danger is visually distinct (red) from the neutral actions -
   used for Deactivate specifically so it doesn't blend in with Details/Edit
   and get clicked by mistake. */
.icon-actions {
    display: inline-flex;
    gap: 0.25rem;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    text-decoration: none;
    font-size: calc(1rem - 1px);
    line-height: 1;
    color: var(--brand-navy);
    background: var(--bg-tint);
    border: 1px solid #dfe3ee;
}

.icon-btn:hover {
    background: #e4e9f5;
    border-color: var(--brand-blue);
}

.icon-btn-danger {
    color: #b3261e;
}

.icon-btn-danger:hover {
    background: #fbe7e6;
    border-color: #b3261e;
}

.icon-btn-success {
    color: #1e7b34;
}

.icon-btn-success:hover {
    background: #e6f4ea;
    border-color: #1e7b34;
}

/* Bare version of .icon-btn - just the emoji/glyph, no box (background/
   border) and no visible label, only the a11y title/aria-label. Used for
   in-table one-click actions like Idea Approve/Release where a full boxed
   button is more visual weight than the row needs. */
.icon-btn-plain {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    padding: 0;
    font-size: calc(1.1rem - 1px);
    line-height: 1;
    cursor: pointer;
}

.icon-btn-plain:hover {
    opacity: 0.7;
}

/* A <button> styled to look and behave like a plain text link (matches
   the bare `a` rule above) - for in-table actions like the Idea vote
   counts, where a submit button needs to read as a link, not a widget. */
.text-btn {
    display: inline;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--brand-navy);
    text-decoration: none;
    cursor: pointer;
}

.text-btn:hover {
    color: var(--brand-blue);
    text-decoration: underline;
}

.phase-actual-end {
    display: block;
    font-size: calc(0.8rem - 1px);
    color: #7b8794;
    margin-top: 0.15rem;
}

/* Single-line milestone timeline on Project Details - one dot per phase,
   positioned server-side in Views/Project/Details.cshtml as a percentage of
   the overall date range spanned by every phase that has a milestone date,
   so no JS/charting library is needed for a purely display-only chart.
   Container height is fixed (not shrink-wrapped) since every node is
   absolutely positioned and would otherwise collapse it to nothing. */
.milestone-timeline {
    position: relative;
    height: 114px;
    margin: 2.5rem 0 2rem;
}

.milestone-line {
    position: absolute;
    top: 9px;
    left: 0;
    right: 0;
    height: 4px;
    background: #dfe3ee;
    border-radius: 2px;
}

.milestone-node {
    position: absolute;
    top: 0;
    width: 120px;
    margin-left: -60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.milestone-dot {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px #dfe3ee;
}

/* Hollow style for a phase's start marker - visually distinct from its
   solid, randomly-colored end dot so the two don't read as duplicates when
   both land on the same phase. */
.milestone-dot-start {
    background: #fff;
    border-color: #9aa5b1;
}

.milestone-label {
    margin-top: 0.6rem;
}

/* Alternated onto every other node (see Views/Project/Details.cshtml) so
   consecutive close-together dates get their 120px label above the line
   instead of below - doubles the effective horizontal room for labels
   without needing more width, since above/below pairs no longer compete
   for the same vertical space. The dot itself still lands on the line at
   the same spot either way - only the label's side flips. */
.milestone-node-above {
    top: -38px;
}

.milestone-node-above .milestone-label {
    order: -1;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.milestone-name {
    display: block;
    font-size: calc(0.85rem - 1px);
    font-weight: 600;
    color: var(--brand-navy);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.milestone-date {
    display: block;
    font-size: calc(0.8rem - 1px);
    color: #7b8794;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

th, td {
    text-align: left;
    padding: 0.6rem;
    border-bottom: 1px solid #e4e7eb;
    vertical-align: top;
}

/* A table where some rows contain a drill-in link (e.g. Website
   Analytics' Recent Visits, linking a visit to its Visitor detail page) -
   first used there. Highlights just the rows that actually have a link
   (:has(a), not every row - a visit with no IP has nothing to click
   through to) so hovering hints at the row's own real <a>, without an
   onclick/JS hack faking whole-row navigation. */
.clickable-rows tbody tr:has(a):hover {
    background: var(--bg-tint);
}

.form-group {
    margin-bottom: 1rem;
}

label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
    text-transform: capitalize;
}

input[type="text"], input[type="email"], input[type="number"], input[type="date"],
input[type="password"],
textarea, select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #cbd2d9;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="number"]:focus,
input[type="date"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
    outline: 2px solid var(--brand-skyblue);
    outline-offset: 1px;
    border-color: var(--brand-blue);
}

.text-danger {
    color: #b91c1c;
}

/* Company/Contact typeahead (Views/Shared/_EntityTypeahead.cshtml,
   wwwroot/js/entity-typeahead.js) - the text input itself already picks up
   the app's normal input[type="text"] styling above; this just positions
   the suggestions dropdown under it. */
.entity-typeahead {
    position: relative;
}

.entity-typeahead-results {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    right: 0;
    margin: 2px 0 0;
    padding: 0.25rem 0;
    list-style: none;
    background: #fff;
    border: 1px solid #cbd2d9;
    border-radius: 4px;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.entity-typeahead-results li {
    padding: 0.4rem 0.75rem;
    cursor: pointer;
}

.entity-typeahead-results li:hover,
.entity-typeahead-results li.active {
    background: #f0f4f8;
}

.toast {
    position: fixed;
    /* Sits above .mobile-bottom-nav (shown on every device now) instead of
       behind/under it - matches the bar's own height plus its own margin. */
    bottom: calc(64px + 0.75rem);
    right: 1.5rem;
    z-index: 1000;
    background: #1f2933;
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: 6px;
    border-left: 4px solid var(--brand-blue);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    font-size: 0.9rem;
    animation: toast-fade 3.5s ease forwards;
    pointer-events: none;
}

/* .toast-success uses the same dark background/blue border as the base
   .toast rule above. .toast-error gets a solid red background (not just a
   colored border) and stays up longer - a thin border was easy to miss
   entirely at a glance, and an error is exactly the toast you can't afford
   to have someone miss. */
.toast-error {
    background: #b91c1c;
    border-left-color: #7f1d1d;
    animation-duration: 6s;
}

@keyframes toast-fade {
    0% { opacity: 0; transform: translateY(0.5rem); }
    10% { opacity: 1; transform: translateY(0); }
    85% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(0.5rem); }
}

.impersonation-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    background: #fff4cc;
    color: #5c4400;
    padding: 0.6rem 1rem;
    text-align: center;
    font-size: 0.9rem;
}

.impersonation-banner form {
    margin: 0;
}

.impersonation-banner button {
    background: #5c4400;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0.3rem 0.8rem;
    cursor: pointer;
    font-size: 0.85rem;
}

.footer {
    text-align: center;
    color: #7b8794;
    padding: 1.5rem;
    font-size: calc(0.85rem - 1px);
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.stat-tile {
    background: #fff;
    border: 1px solid var(--line);
    border-top: 3px solid var(--brand-navy);
    border-radius: 8px;
    padding: 1.25rem;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-number {
    font-size: calc(2rem - 1px);
    font-weight: 700;
    color: var(--brand-blue);
}

.stat-label {
    color: #52606d;
    font-size: calc(0.9rem - 1px);
}

/* Doughnut report charts default to a fixed, modest size instead of
   stretching to fill their grid column - resize handle in the corner lets
   a user drag it bigger if they want more detail. min/max keep a drag from
   collapsing it to nothing or blowing past the column. */
.donut-chart-box {
    position: relative;
    width: 200px;
    height: 200px;
    min-width: 120px;
    min-height: 120px;
    max-width: 100%;
    max-height: 480px;
    margin: 0 auto;
    resize: both;
    overflow: hidden;
}

/* A hard-capped, non-resizable chart box - unlike .donut-chart-box above,
   this is for a spot where the chart must never exceed 300px wide (Web
   Analytics' Top Pages pie), not just default small with room to grow. */
.pie-chart-box-small {
    width: 100%;
    max-width: 300px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}

/* "Today" dashboard cards - three columns of upcoming/related items,
   deliberately styled close to .stat-tile (same border/radius language)
   but taller, since each holds a list instead of a single number. */
.today-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

/* MCP-connector nudge on every "Create" page - see _McpBanner.cshtml and
   the action-name check in _Layout.cshtml. Deliberately a slim single/
   two-line strip, not a full .today-card - it's a passing tip on a page
   whose actual job is the form below it, not the main content. */
.mcp-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    background: var(--bg-tint);
    border-left: 3px solid var(--brand-blue);
    border-radius: 6px;
    padding: 0.6rem 1rem;
    margin: 0 0 1.25rem;
    font-size: calc(0.9rem - 1px);
}

.mcp-banner-icon {
    display: inline-flex;
    align-items: center;
}

.mcp-banner a {
    font-weight: 600;
    white-space: nowrap;
}

.today-card {
    background: #fff;
    border: 1px solid var(--line);
    border-top: 3px solid var(--brand-yellow);
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
}

.today-card h3 {
    margin: 0 0 0.75rem;
    font-size: calc(1rem - 1px);
    color: var(--brand-navy);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.today-card h3 .badge {
    /* Left plain (inherits .badge's chalk fill) rather than the old solid
       --brand-yellow - two different accent-filled badges side by side
       (this count badge and, say, a priority badge) would fight for
       attention under a one-signal-accent palette. */
    background: var(--bg-tint);
}

/* Reusable "console" layout for Details-style pages (started on
   Event/Details.cshtml as the reference implementation) - each h2+dl
   summary section becomes its own card, laid out in a responsive grid
   instead of one long stacked single column, so the wider .container above
   actually gets used. auto-fit/minmax collapses to a single column on
   narrow viewports on its own (no separate mobile media query needed) -
   same mechanism as .today-grid, just a distinct class since the contexts
   (dashboard stat tiles vs. a record's own detail sections) aren't the same
   thing even though they look alike. */
.details-grid {
    display: grid;
    /* Sized so a typical Details page (1600px .container, minus the
       sidebar) lands on 3 cards per row rather than however many
       auto-fit's default 280px minimum happened to squeeze in - narrower
       cards is exactly what was breaking the dt/dd layout below. */
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 1.25rem;
    align-items: start;
    margin: 1.25rem 0;
}

.details-card {
    background: #fff;
    border: 1px solid #e4e7eb;
    border-top: 3px solid var(--brand-blue);
    border-radius: 8px;
    padding: 1.1rem 1.25rem;
    /* Without this, a grid item defaults to min-width:auto, so a long
       unbroken dd value (a URL, an email) could force the card wider than
       its track and spill past the card's own border - "running outside
       the box". */
    min-width: 0;
    /* Usability finding 2026-09-10: a sub-table nested in a card (Company
       Details' Contacts/Deals tables, etc.) was overflowing the whole page
       body horizontally at tablet width instead of scrolling within its
       own card. Every one of these tables already sits directly inside a
       .details-card, so this one rule covers all of them with no view
       changes needed. */
    overflow-x: auto;
}

.details-card h2 {
    margin: 0 0 0.85rem;
    font-size: calc(1rem - 1px);
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--brand-blue);
    color: var(--brand-navy);
}

/* Angela's per-section accent request: while anywhere in the Marketing
   Tools area (Views/Tools/MarketingTools.cshtml, Views/Campaign/*.cshtml,
   Views/MassEmail/*.cshtml, Views/WebToLead/Index.cshtml,
   Views/EmailSettings/Index.cshtml stamp body.section-marketing via
   ViewData["BodyClass"], see _Layout.cshtml), swap the card heading accent
   from the site-wide coral (--brand-blue, a Kiln-rebrand token whose name
   no longer matches its actual color) to a distinct blue - scoped to just
   this section rather than a global token change. Also covers the page's
   own Details-page hero banner (.record-hero) - that banner dropped its
   background entirely site-wide 2026-09-10 (Angela: no colored heading
   anywhere, so it can't get reintroduced by accident), so there's no
   color left there to override; only the stat-tile accent border below
   still marks this section. This denim blue (#345A8C) originally lived on
   the Deals section - moved here, and Deals reverted to the plain default
   navy (same as Companies/everywhere else), per Angela's request to swap
   the two. Only pages that actually render inside a .record-hero/
   .details-card show the color - most of this area's multi-step wizard
   pages (Compose, Select Recipients, Add Members, etc.) use a bare <h1>
   and stay visually unchanged, same as Deal Create/Edit/Delete did under
   the original Deals scoping. */
body.section-marketing .details-card {
    border-top-color: #345A8C;
}

body.section-marketing .details-card h2 {
    border-bottom-color: #345A8C;
}

body.section-marketing .record-hero .stat-tile {
    border-top-color: #4E76AC;
}

/* Same per-section accent pattern as the Deals section above, applied to
   Project Management (Views/Project/*.cshtml stamp body.section-projects) -
   a deep burgundy, distinct from both the site-wide coral (--brand-blue)
   and the Deals section's denim blue. First pass used a burnt red/rust
   (#9C3D2E) - swapped for this darker wine tone after feedback that it
   wasn't deep enough. */
body.section-projects .details-card {
    border-top-color: #6B1E2E;
}

body.section-projects .details-card h2 {
    border-bottom-color: #6B1E2E;
}

/* .record-hero itself is plain site-wide now (see the base rules further
   down this file) - this is just this section's own stat-tile accent
   border, same idea as the .details-card border-top-color above. */
body.section-projects .record-hero .stat-tile {
    border-top: 3px solid #6B1E2E;
}

/* COMPARISON A (2026-09-10, Angela: pages with a lot going on could use
   more than the plain hero, but didn't want to just revive the "color
   creeps back in piecemeal" problem) - pins the tab row in place as the
   page scrolls, so a page with several tabs (Project Details has 7) never
   loses its navigation off the top of the screen. Scoped to just this
   section for now, to compare directly against Deal Details' own
   COMPARISON B (colored hero) - see body.section-deals .record-hero
   further down. Not meant to be the permanent answer on its own; pick
   whichever (or neither) reads better and that becomes the real fix. */
body.section-projects .tab-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg-tint);
    padding-top: 0.5rem;
}

/* Overrides the page-wide dl rule further down this file (200px label
   column, 1rem gaps, 760px max-width - sized for a full-width page, not a
   ~380px card). Without this override, that fixed 200px label column ate
   most of a card's width, leaving the value squeezed into almost nothing
   and reading as "the value is way over on the right with a huge gap
   after the label". */
.details-card dl {
    display: grid;
    grid-template-columns: minmax(84px, auto) 1fr;
    column-gap: 0.6rem;
    row-gap: 0.4rem;
    max-width: none;
    margin: 0;
}

.details-card dt {
    font-size: calc(0.9rem - 1px);
}

.details-card dd {
    font-size: calc(0.9rem - 1px);
    overflow-wrap: break-word;
    min-width: 0;
}

/* A card that should span every column (e.g. a long metadata textarea) -
   grid-column: 1 / -1 works regardless of how many auto-fit columns ended
   up being generated. */
.details-card-wide {
    grid-column: 1 / -1;
}

/* A card that should take up two of the auto-fit columns instead of one -
   e.g. Opportunity/Details' Project card, which otherwise leaves the third
   column empty next to it when the row has room for 3. */
.details-card-span2 {
    grid-column: span 2;
}

/* A dd/value rendered from a <textarea>-backed field (Description, Notes,
   etc.) - without this, the newlines a user actually typed collapse under
   normal HTML whitespace rules and the text reads as one run-on
   paragraph. Same value .note-body already uses for the same reason. */
.preserve-linebreaks {
    white-space: pre-wrap;
}

/* A one-click "relate these?" suggestion (RelationshipSuggestionService) -
   deliberately distinct from .details-card's neutral white/red-top look so
   it reads as "here's something to decide," not just more record data. */
.suggestion-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: #eef4fb;
    border: 1px solid #c9dcf0;
    border-left: 4px solid var(--brand-navy);
    border-radius: 8px;
    padding: 0.9rem 1.1rem;
    margin: 0 0 1.25rem;
}

.suggestion-banner p {
    margin: 0;
    font-size: calc(0.9rem - 1px);
}

/* Company Details card, widened to full row width, split into two equal
   halves - fields on the left, map filling the right 50%. Collapses to
   a single column below 700px since an even 50/50 split gets cramped
   once each half is under ~300px. */
.details-card-with-map {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 700px) {
    .details-card-with-map {
        grid-template-columns: 1fr;
    }
}

/* Construction Project Details: Customer/Project Details/Profitability
   stacked on the left, a Photos panel filling the right 50% and stretching
   (default grid align-items: stretch) to match the left column's combined
   height. Collapses to a single column on narrow screens, same breakpoint
   as .details-card-with-map above. */
.construction-top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 700px) {
    .construction-top-grid {
        grid-template-columns: 1fr;
    }
}

.construction-photos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0.75rem;
    height: calc(100% - 2.5rem);
    min-height: 220px;
}

.construction-photos-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #d8dce1;
}

/* Deal Photos panel (About/Gallery) - see Views/Shared/_PhotosPanel.cshtml.
   Unlike .construction-photos-grid's fixed 2x2 preview, this wraps to fit
   however many photos exist in a folder, not just the first four. */
.photo-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.photo-gallery-item {
    position: relative;
}

.photo-gallery-item img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #d8dce1;
}

.photo-gallery-item form {
    position: absolute;
    top: 4px;
    right: 4px;
}

.company-map-thumb iframe {
    display: block;
    width: 100%;
    height: 280px;
    border: 1px solid #e4e7eb;
    border-radius: 6px;
}

.company-map-thumb p {
    margin: 0.4rem 0 0;
    font-size: calc(0.85rem - 1px);
}

.today-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.today-list li {
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #f1f3f5;
}

.today-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.today-list a {
    font-weight: 600;
    text-decoration: none;
    color: var(--brand-navy);
}

.today-list a:hover {
    text-decoration: underline;
}

.today-list .today-meta {
    display: block;
    font-size: calc(0.8rem - 1px);
    color: #7b8794;
    margin-top: 0.15rem;
}

.today-empty {
    color: #7b8794;
    font-size: calc(0.9rem - 1px);
    margin: 0;
}

.navbar-search {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.navbar-search input[type="search"] {
    width: 150px;
    padding: 0.35rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: calc(0.85rem - 1px);
}

.navbar-search button {
    background: var(--brand-skyblue);
    color: var(--brand-navy);
    border: none;
    border-radius: 4px;
    padding: 0.35rem 0.6rem;
    font-size: calc(0.85rem - 1px);
    cursor: pointer;
}

.quick-add-grid {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--bg-tint);
    margin: 0;
}

.login-box {
    background: #fff;
    border: 1px solid #e4e7eb;
    border-top: 4px solid var(--brand-yellow);
    border-radius: 8px;
    padding: 2rem;
    width: 100%;
    max-width: 340px;
}

.login-box h1 {
    font-size: calc(1.25rem - 1px);
    margin-top: 0;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Matches the navbar lockup on the screens whose heading IS the wordmark
   (Login, VerifyEmail). It needs its own class rather than styling every
   .login-box h1: an ordinary title like OAuth's "Connect Claude" should keep
   the default heading weight, and dropping h1 to 500 across the board would
   also flatten the contrast the <b> is there to create. */
.login-box h1.wordmark {
    font-weight: 500;
    letter-spacing: -0.035em;
}

.login-box h1.wordmark b {
    font-weight: 800;
}

.login-logo {
    display: block;
    height: 56px;
    width: auto;
    margin: 0 auto 1rem;
}

.navbar-spacer {
    flex: 1;
}

.logout-form {
    display: inline;
}

/* Lives in the footer now, alongside the Ideas/Bugs/Knowledge Base links -
   styled to match those plain <a> tags (base `a` rule) rather than a
   navbar-icon button, since that's the only place this form renders. */
.logout-form button {
    background: none;
    border: none;
    color: var(--brand-navy);
    font-size: calc(0.85rem - 1px);
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    text-decoration: none;
}

.logout-form button:hover {
    color: var(--brand-blue);
    text-decoration: underline;
}

/* Shared "help screen" visual language - branded hero + accent-topped cards,
   originally built one-off for the first-run Onboarding page
   (Views/Onboarding/Index.cshtml) and promoted to this generic .help-*
   naming once Angela asked for the same treatment across every help/
   learning surface (Knowledge Base Index/Details, Tutorial) - same
   "promote once reused" pattern as .project-tab-* becoming .tab-*.
   .help-page centers itself via margin:auto so it works both full-bleed
   inside .login-body's flex-center (Onboarding) and as ordinary content
   inside the normal authenticated <main> (everywhere else). */
.help-page {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
    box-sizing: border-box;
}

/* Knowledge Base's own Index/Details use this modifier instead of .help-
   page's default 760px - an article list/body reads fine wider, and 760px
   left a lot of dead space on either side inside the (much wider) main
   content column. Onboarding/Tutorial keep the narrower default - they're
   short, single-column flows where 760px is the right measure. */
.help-page.help-page-wide {
    max-width: 1100px;
}

.help-hero {
    text-align: center;
    margin-bottom: 2rem;
}

.help-logo {
    display: block;
    height: 56px;
    width: auto;
    margin: 0 auto 1.25rem;
}

.help-eyebrow {
    margin: 0 0 0.5rem;
    color: var(--brand-blue);
    font-weight: 800;
    font-size: calc(0.85rem - 1px);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.help-hero h1 {
    margin: 0 0 0.75rem;
    font-size: calc(2.25rem - 1px);
    color: var(--brand-navy);
    text-wrap: balance;
}

.help-sub {
    margin: 0 auto;
    max-width: 52ch;
    color: #52606d;
    font-size: calc(1.05rem - 1px);
}

.help-card {
    background: #fff;
    border: 1px solid var(--line);
    border-top: 4px solid var(--brand-blue);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.help-card h2 {
    margin: 0.35rem 0 0.85rem;
    color: var(--brand-navy);
}

.help-card > p {
    color: #3c4654;
    line-height: 1.6;
}

.help-badge {
    display: inline-block;
    background: var(--brand-navy);
    color: #fff;
    font-weight: 800;
    font-size: calc(0.8rem - 1px);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
}

.help-success {
    background: var(--bg-tint);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: #1e7b34;
    font-weight: 600;
}

.help-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
}

.help-actions .btn {
    padding: 0.7rem 1.4rem;
    font-weight: 600;
}

.help-flow-intro {
    margin-top: 0;
}

.help-flow {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    margin: 1.5rem 0;
}

.help-flow-step {
    flex: 1;
    text-align: center;
    background: var(--bg-tint);
    border-radius: 10px;
    padding: 1.25rem 1rem;
}

.help-flow-step h3 {
    margin: 0.5rem 0 0.5rem;
    font-size: calc(1rem - 1px);
    color: var(--brand-navy);
}

.help-flow-step p {
    margin: 0;
    font-size: calc(0.88rem - 1px);
    color: #52606d;
    line-height: 1.5;
}

.help-flow-icon {
    font-size: 1.75rem;
}

.help-flow-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--line);
    font-size: 1.5rem;
    font-weight: 800;
}

.help-flow-detail {
    background: var(--bg-tint);
    border-left: 3px solid var(--brand-blue);
    border-radius: 0 8px 8px 0;
    padding: 1rem 1.25rem;
    color: #3c4654;
    line-height: 1.6;
}

.help-footer {
    text-align: center;
    color: #7b8794;
    font-size: calc(0.9rem - 1px);
}

/* Knowledge Base Index's category groups + Details' article body, and the
   Tutorial page's video cards - lighter-weight siblings of .help-card that
   don't want the full 2rem padding/heavy heading treatment. */
.help-category-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

.help-category-card h2 {
    margin: 0 0 0.75rem;
    font-size: calc(1.05rem - 1px);
    color: var(--brand-navy);
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--bg-tint);
}

.help-article-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}

.help-article-list a {
    display: block;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    color: var(--brand-navy);
}

.help-article-list a:hover {
    background: var(--bg-tint);
    color: var(--brand-blue);
}

.help-body {
    color: #3c4654;
    line-height: 1.7;
    white-space: pre-wrap;
}

@media (max-width: 700px) {
    .help-flow {
        flex-direction: column;
    }

    .help-flow-arrow {
        transform: rotate(90deg);
    }
}

/* Required-field marker: piggybacks on the data-val-required attribute that
   ASP.NET Core's tag helpers already emit for non-nullable/[Required] model
   properties, so this stays correct automatically as fields are added -
   no per-field markup needed. Checkboxes are excluded since they always
   post a value (true/false) and never actually block saving. */
.form-group label:has(+ input:not([type="checkbox"])[data-val-required])::after,
.form-group label:has(+ select[data-val-required])::after,
.form-row label:has(+ input:not([type="checkbox"])[data-val-required])::after,
.form-row label:has(+ select[data-val-required])::after {
    content: " *";
    color: #b91c1c;
    font-weight: 700;
}

/* Grouped, collapsible form sections - used to break long forms (e.g.
   Company) into labeled groups like "Firmographics & Classification".
   <details>/<summary> gives collapse/expand behavior with no JS and
   built-in keyboard/screen-reader support. Sections default open (via the
   `open` attribute in markup) so existing data is never hidden by default -
   collapsing is an option, not the default state. */
.form-section {
    max-width: 760px;
    margin: 1.75rem 0 0;
}

.form-section:first-of-type {
    margin-top: 0;
}

.form-section > summary,
.form-section > h2 {
    font-size: calc(1rem - 1px);
    margin: 0 0 0.85rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #e4e7eb;
    color: var(--brand-navy);
    font-weight: 600;
}

.form-section > summary {
    cursor: pointer;
    user-select: none;
}

.form-section > summary:hover {
    color: var(--brand-blue);
}

.form-section:not([open]) > summary {
    margin-bottom: 0;
    border-bottom: none;
}

/* A form-section's own sub-heading for grouping a cluster of related
   fields within one section (e.g. Company Create's Classification
   checkboxes within Sales & Relationship Tracking) - one step down from
   the section's own <summary>/<h2>, same idea WebToLead's "Custom Fields"/
   "Copyable Snippet" <h3>s already use inside one <details>. */
.form-section h3 {
    font-size: calc(0.85rem - 1px);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #7b8794;
    margin: 1.1rem 0 0.6rem;
}

/* Segmented toggle for a small, fixed set of mutually-exclusive choices
   (currently just Company Create's Company/Household picker) - clearer at
   a glance than a plain <select> for a binary choice, and makes which
   mode you're in obvious without reading a dropdown's current value. The
   underlying field stays a real <select> (kept for asp-for/model binding
   and screen-reader semantics) - visually hidden, not removed, so nothing
   about form submission changes. */
.segmented-toggle {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.segmented-toggle button {
    padding: 0.6rem 1.35rem;
    border: none;
    background: #fff;
    cursor: pointer;
    font-weight: 600;
    color: var(--brand-navy);
    font-size: calc(0.95rem - 1px);
    font-family: inherit;
}

.segmented-toggle button + button {
    border-left: 1px solid var(--line);
}

.segmented-toggle button.active {
    background: var(--brand-navy);
    color: #fff;
}

.segmented-toggle button:hover:not(.active) {
    background: #f4f6f8;
}

/* A cluster of related boolean flags shown as compact pill-checkboxes
   instead of one .form-row per checkbox - Company Create's Lead/Partner/
   Vendor/Competitor classification is the first use. Same [hidden]-beats-
   author-CSS override .form-row[hidden] already needs, since these
   also get toggled by the Company/Household record-type script. */
.checkbox-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0 0 0.85rem;
}

.checkbox-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: calc(0.9rem - 1px);
    font-weight: 600;
    cursor: pointer;
    background: #fff;
    color: var(--brand-navy);
}

.checkbox-pill:has(input:checked) {
    background: var(--brand-navy);
    color: #fff;
    border-color: var(--brand-navy);
}

.checkbox-pill input[type="checkbox"] {
    margin: 0;
}

.checkbox-pill[hidden] {
    display: none;
}

/* Generic tab bar - started on Project Details (Customer/Project Details/
   Profitability/etc.), replacing a stack of always-open <details> sections
   that put a wall of dl rows at the top of the page before anything else
   was reached. Reused as-is (renamed from a project-specific name once a
   second page - Company Edit - started using it) anywhere a page has
   several content blocks that don't need to be seen at once. Plain
   click-to-toggle JS, same convention as the rest of this app (see
   .site-map-overlay's `hidden`-attribute toggle) - no framework. */
.tab-bar {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid #e4e7eb;
    margin-bottom: 1.1rem;
    flex-wrap: wrap;
}

.tab-btn {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.6rem 0.9rem;
    margin-bottom: -1px;
    font-size: calc(1rem - 1px);
    font-weight: 600;
    color: #7b8794;
    cursor: pointer;
}

.tab-btn:hover {
    color: var(--brand-navy);
}

.tab-btn.active {
    color: var(--brand-navy);
    border-bottom-color: var(--brand-blue);
}

/* Same collapsible look as .form-section (summary styling, border, hover),
   but full-width rather than capped at 760px - .form-section's cap is sized
   for a column of form-row inputs, too narrow for a wide table or the
   Project Details timeline chart. Used to break up busier read-only pages
   into named sections instead of one long scroll. */
.details-section {
    margin: 1.75rem 0 0;
}

.details-section:first-of-type {
    margin-top: 0;
}

.details-section > summary {
    font-size: calc(1rem - 1px);
    margin: 0 0 0.85rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #e4e7eb;
    color: var(--brand-navy);
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.details-section > summary:hover {
    color: var(--brand-blue);
}

.details-section:not([open]) > summary {
    margin-bottom: 0;
    border-bottom: none;
}

/* Label-to-the-left field row, for anything except textareas (those stay
   in .form-group - label above, box below). */
.form-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    align-items: start;
    column-gap: 1rem;
    margin-bottom: 0.85rem;
}

/* `[hidden]` alone isn't enough - this rule's own `display: grid` above is
   author-origin CSS, which beats the browser's UA-stylesheet `[hidden] {
   display: none }` regardless of specificity, so without this a row with
   the `hidden` attribute set via JS (e.g. project-type-fields.js) would
   still render as a grid row. Same fix as .site-map-overlay[hidden]. */
.form-row[hidden] {
    display: none;
}

/* Compact label+select row for list-view filters (e.g. Company Index) -
   unlike .form-row's fixed 200px label column (sized for long form labels),
   this hugs the label's actual width and gives the select a fixed,
   deliberately narrow width instead of stretching to 1fr. */
.filter-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
}

.filter-row select {
    width: 150px;
}

/* 1px smaller than the ambient body text - keeps field labels/values a
   step below .form-section/.details-section summary headings (still at
   the body size, calc(1rem - 1px)) so a section's heading reads as more
   prominent than the fields listed under it. */
.form-row label,
.form-row .form-value,
.form-row input,
.form-row select {
    font-size: calc(1rem - 3px);
}

.form-row label {
    margin-bottom: 0;
    padding-top: 0.55rem;
}

/* Matches .form-row label's own padding-top above, so a read-only value
   (e.g. a computed field with no <input>) lines up with its label's text
   instead of sitting flush against the row's top edge while the label
   text sits lower. */
.form-row .form-value {
    display: inline-block;
    padding-top: 0.55rem;
}

.form-row input, .form-row select {
    grid-column: 2;
}

.form-row input[type="checkbox"] {
    width: auto;
    justify-self: start;
    margin-top: 0.7rem;
}

/* A checkbox's label describes the checkbox, so it reads better sitting
   immediately to its right with the rest of the line to itself, rather
   than squeezed into the shared 200px label column above - a label long
   enough to need one ("Restaurant is this tenant's primary function")
   wraps onto several lines there while the checkbox floats off to the
   right, disconnected from its own text (see Tenant/Edit's Features
   section). Swaps just these rows from the label-left/value-right grid to
   a checkbox-first flex row instead; any hint/validation text below drops
   to its own full-width line under both. :not([hidden]) keeps
   .form-row[hidden] (below) winning for a row a script has hidden -
   :has()'s specificity would otherwise beat it since the nested selector
   it matches against counts toward it too. */
.form-row:has(> input[type="checkbox"]):not([hidden]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.5rem;
}

.form-row:has(> input[type="checkbox"]) > label {
    order: 1;
    padding-top: 0;
    flex: 1 1 auto;
}

.form-row:has(> input[type="checkbox"]) > input[type="checkbox"] {
    order: 0;
    margin-top: 0;
}

.form-row:has(> input[type="checkbox"]) > span {
    order: 2;
    flex-basis: 100%;
    margin-top: 0.2rem;
}

.form-row span.text-danger,
.form-row span.field-validation {
    grid-column: 2;
}

/* Tenant/Edit's Features section - a whole stack of boolean toggles, most
   paired with a sentence explaining what they do. The flex fix above still
   wrapped a long description onto its own line below the checkbox row,
   which reads fine for one or two rows but gets noisy for ten in a row -
   a real table (Feature / Enabled / Description columns) keeps every
   toggle on exactly one row, nothing ever sitting below the checkbox.
   Reuses the app's plain `table`/`th`/`td` styling (crm-site.css above);
   these rules just pin the checkbox column narrow and centered instead of
   stretching to fill its share of the table like a text column would. */
.feature-toggle-table th:nth-child(2),
.feature-toggle-table td:nth-child(2) {
    width: 90px;
    text-align: center;
}

.feature-toggle-table label {
    margin-bottom: 0;
}

.feature-toggle-table td.required-hint {
    padding-top: 0.6rem;
}

/* Modernized settings-style form - card-look .form-sections instead of
   the bare-HTML default (plain checkbox, no header emphasis, no
   separation beyond a hairline, page sitting flush against the
   background). First built for Tenant/Edit's Features table, then reused
   as-is for Organization/Index (the "Tenant page" look Angela asked this
   page to match) - opt-in via .settings-form rather than changing
   .form-section/table globally, which are shared by every other Edit
   page in the app; same "wrap the page, scope the polish" approach
   .section-marketing/.section-projects already use for their own
   page-group-specific accents, just narrowed to specific pages instead of
   a whole nav section. */
.settings-form .form-section {
    background: #fff;
    border: 1px solid #e4e7eb;
    border-radius: 10px;
    padding: 1.1rem 1.35rem 1.35rem;
    box-shadow: 0 1px 3px rgba(23, 31, 42, 0.06);
}

.settings-form .form-section > summary {
    font-size: 1rem;
    border-bottom-color: #e4e7eb;
}

.settings-form .form-section:not([open]) {
    padding-bottom: 1.1rem;
}

.feature-toggle-table-wrap {
    border: 1px solid #e4e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.feature-toggle-table-wrap table {
    margin-top: 0;
}

.feature-toggle-table th {
    background: var(--bg-tint);
    font-size: calc(0.8rem - 1px);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #7b8794;
}

.feature-toggle-table tbody tr:last-child th,
.feature-toggle-table tbody tr:last-child td {
    border-bottom: none;
}

.feature-toggle-table tbody tr:hover {
    background: #f8fafc;
}

/* Real checkbox underneath (kept for asp-for binding, keyboard and
   screen-reader semantics) hidden and replaced with a modern sliding
   switch, same visually-hidden-input-drives-styled-sibling pattern the
   Class Registration schedule's day-of-week picker and the segmented
   toggle above already use elsewhere in this file. Wrapping <label>
   makes the whole 40px-wide switch a click/tap target, not just the
   original tiny checkbox box - a real, not just cosmetic, usability gain
   for a table with this many rows. */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    vertical-align: middle;
}

.toggle-switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.toggle-slider {
    position: absolute;
    inset: 0;
    background: #cbd2d9;
    border-radius: 999px;
    transition: background-color 0.15s ease;
    pointer-events: none;
}

.toggle-slider::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(23, 31, 42, 0.3);
    transition: transform 0.15s ease;
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--brand-blue);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(18px);
}

.toggle-switch input:focus-visible + .toggle-slider {
    outline: 2px solid var(--brand-skyblue);
    outline-offset: 2px;
}

/* Label-less add-a-row form (e.g. Acceptance Criteria's "new item" box) -
   input above, button below, instead of .form-row's label-column grid. */
.stacked-add-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.stacked-add-form input {
    width: 100%;
    max-width: 28rem;
}

/* Read-only Details pages use <dl>/<dt>/<dd> for their field rows - style
   them with the same label-left/value-right rhythm as .form-row above,
   instead of the browser's default stacked dl (label above value). Grid
   auto-flow places each dt in column 1 and each dd in column 2 in source
   order, so no explicit grid-column is needed per pair. */
dl {
    display: grid;
    grid-template-columns: 200px 1fr;
    column-gap: 1rem;
    row-gap: 0.6rem;
    max-width: 760px;
    margin: 0 0 1rem;
}

dl dt {
    font-weight: 600;
    color: var(--brand-navy);
    font-size: calc(1rem - 3px);
}

dl dd {
    margin: 0;
    font-size: calc(1rem - 3px);
}

.required-hint {
    color: #52606d;
    font-size: calc(0.9rem - 1px);
}

/* Quick jump-links row under a Details page's <h1> (started on
   Company/Details.cshtml) - deliberately plain "Link | Link | Link" for
   now, not styled to match any section yet. Wraps naturally since it's
   just inline text, no flex/nowrap forcing it onto one line. Superseded by
   .record-hero-links wherever a page has adopted the hero treatment below;
   left in place for any Details page that hasn't yet. */
.jump-links {
    font-size: calc(0.8rem - 1px);
    color: #7b8794;
    margin: 0.35rem 0 0.75rem;
}

/* Record Details hero - wraps a Details page's existing <h1>/jump-links/
   stat-grid/top Edit-Back block into one cohesive header. Originally a
   navy gradient banner (the app-wide design pass, phase 2 - phase 1 was
   the Reports/Tools/SystemConfig hub pages' dashboard-tile treatment);
   dropped the colored background entirely site-wide 2026-09-10 (Angela:
   no colored heading anywhere - it kept getting reintroduced piecemeal per
   section/record-type, so make plain the one default instead of an opt-in
   every page has to remember). Nothing below the hero on any page changes
   - every existing .details-card/.details-grid section stays exactly as
   it was, just capped with this instead of a bare <h1>. Section pages
   (Projects, Marketing) still get their own accent color, just scoped to
   the stat-tile border rather than the whole banner - see the
   body.section-* rules earlier in this file. */
.record-hero {
    background: none;
    padding: 0;
    margin: 1rem 0;
    color: inherit;
    border-radius: 0;
}

.record-hero h1 {
    color: var(--brand-navy);
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.record-hero .badge {
    background: var(--bg-tint);
    color: var(--brand-navy);
    border: 1px solid var(--line);
}

/* Subtitle line under a hero's <h1> naming the record it belongs to - e.g.
   Project Details showing which Company/Deal it's tied to. Sits between the
   title and .record-hero-links, styled quieter than the title but plainer
   than the pill-style nav links below it. */
.record-hero-meta {
    color: #7b8794;
    margin: 0.35rem 0 0;
    font-size: calc(0.95rem - 1px);
}

.record-hero-meta a {
    color: var(--brand-blue);
    font-weight: 600;
}

.record-hero-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.85rem 0 0;
}

.record-hero-links a {
    color: var(--brand-navy);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: calc(0.8rem - 1px);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.record-hero-links a:hover {
    background: var(--brand-blue);
    color: #fff;
    border-color: var(--brand-blue);
}

.record-hero-actions {
    margin: 0.85rem 0 0;
    font-size: calc(0.85rem - 1px);
}

/* :not(.btn):not(.btn-tab) so a page that puts real buttons in its
   .record-hero-actions (see .record-hero-actions-buttons below) doesn't
   get its button styling clobbered by this plain-underlined-link
   treatment - .btn/.btn-tab already carry their own complete look. Also
   why this beat .btn's own white text color before this rule existed and
   left Contact Details' Edit button showing coral text on its own coral
   background - invisible, not just miscolored. */
.record-hero-actions a:not(.btn):not(.btn-tab) {
    color: var(--brand-blue);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.record-hero-actions a:not(.btn):not(.btn-tab):hover {
    color: var(--brand-blue-dark);
}

/* Opt-in modifier (Contact Details, 2026-09-10) - lays the hero's own
   Edit/Back/portal-access actions out as a real button row (.btn/.btn-tab)
   instead of plain underlined text, same spacing convention
   .table-toolbar already uses elsewhere. Every other .record-hero page is
   untouched - this only applies where a view adds the modifier class. */
.record-hero-actions.record-hero-actions-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* Un-pills .record-hero-links on whichever page opts in (Contact Details,
   2026-09-10) - same idea as .record-hero-actions-buttons above but in the
   other direction (buttons -> plain links). */
.record-hero .record-hero-links.record-hero-links-plain a {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.record-hero .record-hero-links.record-hero-links-plain a:hover {
    background: none;
}

/* Stat tiles nested in a hero - scoped strictly to .record-hero so the
   base .stat-tile used everywhere else (Home, the Report dashboards) is
   completely untouched. */
.record-hero .stat-grid {
    margin: 1rem 0 0;
}

.record-hero .stat-tile {
    background: #fff;
    border: 1px solid var(--line);
    border-top: 3px solid var(--brand-blue);
}

.record-hero .stat-label {
    color: #52606d;
}

.record-hero .required-hint {
    color: #52606d;
}

/* COMPARISON B (2026-09-10) - the original colored-gradient hero, brought
   back on just Deal Details to compare against Project Details' own
   COMPARISON A (a sticky tab bar, kept plain otherwise) - see
   body.section-projects .tab-bar above. Every child rule here just
   reverses the base .record-hero's light-page styling back to
   white-text-on-navy, same shape those rules had before 2026-09-10's
   site-wide plain default. Not meant to be the permanent answer on its
   own - pick whichever (or neither) reads better and that becomes the
   real fix, applied consistently instead of per-page. */
body.section-deals .record-hero {
    background: linear-gradient(135deg, var(--brand-navy), #3b4356);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    margin: 1rem 0 1.5rem;
    color: #fff;
}

body.section-deals .record-hero h1 {
    color: #fff;
}

body.section-deals .record-hero .badge {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.28);
}

body.section-deals .record-hero-meta {
    color: #d7dbe3;
}

body.section-deals .record-hero-meta a {
    color: #fff;
}

body.section-deals .record-hero-links a {
    color: #d7dbe3;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
}

body.section-deals .record-hero-links a:hover {
    background: var(--brand-blue);
    color: #fff;
    border-color: var(--brand-blue);
}

body.section-deals .record-hero-actions a:not(.btn):not(.btn-tab) {
    color: #fff;
}

body.section-deals .record-hero-actions a:not(.btn):not(.btn-tab):hover {
    color: var(--brand-blue);
}

body.section-deals .record-hero .stat-tile {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-top: 3px solid var(--brand-blue);
}

body.section-deals .record-hero .stat-label {
    color: #d7dbe3;
}

body.section-deals .record-hero .required-hint {
    color: #d7dbe3;
}

/* .details-grid defaults to align-items: start (see its own rule) so a
   short card doesn't get stretched into an oddly tall box on every other
   Details page - but on this one, Financials sitting next to the often much
   taller Project card left visible dead space above the Files panel below.
   Stretching just this page's grid rows closes that gap. */
body.section-deals .details-grid {
    align-items: stretch;
}

/* List (Index) page header - deliberately no background/card treatment,
   matching Ideas' own plain heading (Angela: Ideas "is easier on the eye"
   than the gradient banner this used to have). Kept as its own class
   (rather than just deleting it from the 8 views that use it) purely for
   the margin - removing it outright would collapse the spacing above
   each page's filter row/toolbar. */
.list-header {
    margin: 1rem 0;
}

.list-header h1 {
    margin: 0;
}

.checkbox-row {
    display: block;
    font-weight: normal;
    margin: 0.35rem 0;
}

.checkbox-row input {
    margin-right: 0.5rem;
}

/* A compact horizontal row of day-of-week checkboxes (Product's Class
   Registration schedule) - unlike .checkbox-row above, these sit side by
   side rather than stacked one per line. */
.day-checkbox-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    font-weight: normal;
    margin: 0.35rem 0;
}

.day-checkbox-row input {
    margin-right: 0.35rem;
}

.breadcrumbs {
    color: #52606d;
    font-size: calc(0.9rem - 1px);
    margin: 0 0 0.5rem;
}

.breadcrumbs a {
    color: var(--brand-navy);
}

th a {
    color: var(--brand-navy);
    text-decoration: none;
}

th a:hover {
    color: var(--brand-blue);
    text-decoration: underline;
}

.due-date-warning {
    border: 1px solid #b91c1c;
    padding: 0.75rem;
    border-radius: 6px;
    background: #fef2f2;
}

.badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--bg-tint);
    color: var(--brand-navy);
    border: 1px solid var(--line);
    font-size: calc(0.8rem - 1px);
}

/* FinancialTransaction Index/Details - flags a transaction Claude wasn't
   confident about (NeedsReview), same red tone as .due-date-warning. */
.badge-warning {
    background: #fef2f2;
    color: #b91c1c;
}

/* BlogPost.IsActive == false - deliberately grey/flat rather than the red
   .badge-warning tone, since this isn't something that needs attention the
   way a flagged transaction does, just a status to notice at a glance. */
.badge-muted {
    background: #f1f5f9;
    color: #64748b;
    border-color: #e2e8f0;
}

/* DashboardPriorityScorer's "High" tier on the Home page's Past Due cards -
   .badge-warning's red is reserved for "Critical" so the two read as
   distinct severities at a glance, not just two shades of the same alarm. */
.badge-high {
    background: #fef3c7;
    color: #92400e;
    border-color: #fde68a;
}

/* A <button type="submit"> that needs to read as an inline text link
   (e.g. "Delete" next to "Edit ·" in a table row) rather than a real
   button - same colors/hover as a plain <a>, just usable inside a <form>
   POST. */
.link-style-button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--brand-navy);
    text-decoration: none;
    cursor: pointer;
}
.link-style-button:hover {
    color: var(--brand-blue);
    text-decoration: underline;
}

/* Briefly highlights whichever table row a page was deep-linked to via a
   URL fragment (e.g. Financial Goals -> Budget Insights#goal-123) - the
   :target pseudo-class needs no JS, it just matches whatever id the
   fragment names. */
tr:target {
    background: var(--bg-tint);
    outline: 2px solid var(--brand-yellow);
    outline-offset: -2px;
}

/* Event/Calendar.cshtml - a plain 7-column month grid, no JS library, same
   "pure server-rendered" approach as the Project timeline. Weekday header
   row is its own set of 7 cells above the day cells, all in the same grid. */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: #d8dce6;
    border: 1px solid #d8dce6;
    border-radius: 6px;
    overflow: hidden;
}

.calendar-weekday {
    background: var(--brand-navy);
    color: #fff;
    padding: 0.4rem;
    text-align: center;
    font-size: calc(0.85rem - 1px);
    font-weight: 600;
}

.calendar-day {
    background: #fff;
    min-height: 100px;
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.calendar-day-blank {
    background: var(--bg-tint);
}

.calendar-day-today {
    background: #fffbea;
}

.calendar-day-number {
    font-weight: 600;
    font-size: calc(0.85rem - 1px);
    color: #7b8794;
}

.calendar-day-today .calendar-day-number {
    color: var(--brand-navy);
}

.calendar-event {
    display: block;
    background: #e7f3fa;
    color: var(--brand-navy);
    border-radius: 4px;
    padding: 0.15rem 0.35rem;
    font-size: calc(0.8rem - 1px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-event:hover {
    background: var(--brand-skyblue);
    text-decoration: none;
}

@media (max-width: 700px) {
    .calendar-grid {
        grid-template-columns: repeat(7, minmax(32px, 1fr));
        font-size: calc(0.75rem - 1px);
    }
    .calendar-day {
        min-height: 60px;
        padding: 0.15rem;
    }
    .calendar-event {
        font-size: calc(0.65rem - 1px);
    }
}

/* Two-column layout for the location-hierarchy Details pages (ProjectLocation/
   Floor/Room/Wall/Window/Door) - main content on the left, a persistent
   Notes panel on the right ("a view of notes on the side of the page").
   Distinct from .body-with-sidebar, which is the whole-page left nav
   sidebar - this one wraps just a single page's own content. */
.page-with-notes {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.page-with-notes .page-main {
    flex: 1 1 auto;
    min-width: 0;
}

.notes-panel {
    flex: 0 0 320px;
    background: #fff;
    border: 1px solid #e4e7eb;
    border-radius: 8px;
    padding: 1rem;
}

.notes-panel h3 {
    margin: 0 0 0.75rem;
    font-size: calc(0.9rem - 1px);
}

.note-item {
    border-bottom: 1px solid #eee;
    padding: 0.6rem 0;
}

.note-item:last-child {
    border-bottom: none;
}

.note-body {
    white-space: pre-wrap;
    font-size: calc(0.9rem - 1px);
}

.note-meta {
    font-size: calc(0.8rem - 2px);
    color: #7b8794;
    margin-top: 0.25rem;
}

.files-list {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
}

.files-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid #eee;
    padding: 0.4rem 0;
    font-size: calc(0.9rem - 1px);
}

.files-list li:last-child {
    border-bottom: none;
}

/* Acceptance Criteria / Test Cases checklists (Views/Shared/_WorkItemDetailSections.cshtml). */
.checklist {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
}

.checklist li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid #eef0f3;
}

.text-muted {
    color: #8a94a3;
    text-decoration: line-through;
}

/* Sprint Kanban board (Views/Workstream/Board.cshtml) - a plain CSS flex
   row of columns, same "no JS layout library" approach as the Calendar/
   Project Timeline grids elsewhere in this file. Drag-and-drop itself is
   native HTML5 DnD (wwwroot/js/workstream-board.js). */
.kanban-board {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    align-items: flex-start;
}

.kanban-column {
    background: #eef1f6;
    border-radius: 8px;
    flex: 0 0 260px;
    min-height: 120px;
    padding: 0.6rem;
}

.kanban-column-dragover {
    background: #dde4f0;
}

.kanban-column-header {
    font-weight: 600;
    color: var(--brand-navy);
    padding: 0.2rem 0.3rem 0.6rem;
    font-size: calc(0.9rem - 1px);
}

.kanban-column-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 60px;
}

.kanban-card {
    background: #fff;
    border: 1px solid #e4e7eb;
    border-left: 3px solid var(--brand-blue);
    border-radius: 6px;
    padding: 0.5rem 0.65rem;
    cursor: grab;
}

.kanban-card.dragging {
    opacity: 0.4;
}

.kanban-card-title {
    font-size: calc(0.9rem - 1px);
    margin-bottom: 0.3rem;
}

.kanban-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: calc(0.8rem - 1px);
    color: #5b6472;
}

@media (max-width: 700px) {
    .page-with-notes {
        flex-direction: column;
    }

    .notes-panel {
        flex: none;
        width: 100%;
        box-sizing: border-box;
    }
}

/* Home dashboard's "you have no Companies yet" welcome banner - see
   Views/Home/Index.cshtml. Navy/gold treatment matches the header brand
   colors so it reads as a deliberate top-of-page moment, not another
   plain .today-card. */
.getting-started-banner {
    background: var(--brand-navy);
    color: #fff;
    border-radius: 10px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
}

.getting-started-banner h2 {
    margin: 0 0 0.5rem;
    /* Chalk, not the Kiln accent - Kiln heading text on a slate background
       reads muddy at this size; chalk keeps it a clean two-tone slate/chalk
       moment, saving Kiln for the actions below. */
    color: var(--bg-tint);
}

.getting-started-banner p {
    margin: 0 0 1.1rem;
    color: #C9CDD6;
    max-width: 62ch;
}

.getting-started-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Small, persistent nudge on Home for a tenant whose Industry is still
   unset - much lighter-weight than .getting-started-banner above (that
   one's a big first-run welcome block; this can keep showing indefinitely
   for an established tenant that just never got around to answering the
   Onboarding/JobProfile prompt, or skipped it). See
   Controllers/HomeController.cs ViewBag.TenantIndustrySet. */
.home-industry-nudge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-tint);
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand-blue);
    border-radius: 6px;
    padding: 0.65rem 1rem;
    margin: 0 0 1.5rem;
    font-size: calc(0.9rem - 1px);
    color: var(--brand-navy);
}

.home-industry-nudge a {
    font-weight: 600;
}

.getting-started-actions .btn-tab {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.getting-started-actions .btn-tab:hover {
    background: rgba(255, 255, 255, 0.22);
}

/* Auto-wired per-page overview - see Views/Shared/_PageHelp.cshtml. Same
   tinted-strip shape as .mcp-banner but a skyblue accent instead of blue,
   so the two read as related but distinct ("here's what this page is"
   vs. "here's a shortcut") rather than duplicating one style for both. */
.page-help-banner {
    background: var(--bg-tint);
    border-left: 3px solid var(--brand-skyblue);
    border-radius: 6px;
    padding: 0.6rem 1rem;
    margin: 0 0 1.25rem;
    font-size: calc(0.9rem - 1px);
}

.page-help-banner p {
    margin: 0;
}

.page-help-banner a {
    font-weight: 600;
    white-space: nowrap;
}

/* Connector logo badges on the How It Works page - see
   Views/Tools/HowItWorks.cshtml. Each brand mark is inlined as SVG (no
   external asset requests), colored with that brand's own official hex via
   the fill attribute set directly on the <svg>. */
.connector-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0.75rem 0;
}

.connector-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #fff;
    border: 1px solid #e4e7eb;
    border-radius: 999px;
    padding: 0.35rem 0.85rem 0.35rem 0.55rem;
    font-size: calc(0.9rem - 1px);
    font-weight: 600;
    color: #1f2933;
}

.connector-badge svg {
    flex-shrink: 0;
}

.status-tracker {
    display: flex;
    align-items: flex-start;
    margin: 0.5rem 0 1.75rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.status-tracker-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 84px;
    flex-shrink: 0;
}

.status-tracker-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(0.85rem - 1px);
    font-weight: 700;
    background: #eef1f4;
    color: #7b8794;
    border: 2px solid #eef1f4;
}

.status-tracker-step.done .status-tracker-dot {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    color: #fff;
}

.status-tracker-step.current .status-tracker-dot {
    background: #fff;
    border-color: var(--brand-blue);
    color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(226, 85, 60, 0.15);
}

.status-tracker-step.exception .status-tracker-dot {
    background: #fdf1e0;
    border-color: #b7791f;
    color: #b7791f;
}

.status-tracker-label {
    margin-top: 0.4rem;
    font-size: calc(0.85rem - 1px);
    text-align: center;
    color: #4a5568;
    white-space: nowrap;
}

.status-tracker-step.current .status-tracker-label {
    font-weight: 700;
    color: #1a2733;
}

.status-tracker-step.exception .status-tracker-label {
    color: #b7791f;
    font-weight: 700;
}

.status-tracker-connector {
    flex: 1 1 auto;
    height: 2px;
    background: #eef1f4;
    margin-top: 15px;
    min-width: 20px;
}

.status-tracker-connector.done {
    background: var(--brand-blue);
}

.report-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.5rem 1rem;
    margin: 0.75rem 0 1rem;
}

.report-field-check {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: calc(0.9rem - 1px);
    font-weight: normal;
}

.row-active {
    background: var(--brand-blue-pale, rgba(37, 99, 235, 0.08));
}

/* Three plain controls (field/operator/value) per row, not the label+input
   pair .form-row's grid assumes - needs its own layout rather than
   inheriting .form-row's 200px/1fr columns, which would squeeze the
   operator and value controls together into the second column. */
.report-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.report-filter-row select,
.report-filter-row input {
    max-width: 220px;
}

/* A deliberately louder card than .stat-tile - this is an action (go build
   something), not a number to glance at, so it earns the accent-colored
   treatment .stat-tile's plain white/navy-hairline styling doesn't reach
   for. Sits at the top of the Reports page specifically because "Build a
   custom report" was previously a single easy-to-miss text line. */
.custom-report-cta {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, var(--brand-navy), #3b4356);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    text-decoration: none;
    color: #fff;
    margin: 1rem 0 1.5rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.custom-report-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.custom-report-cta-icon {
    font-size: 2.25rem;
    line-height: 1;
    flex-shrink: 0;
}

.custom-report-cta-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
}

.custom-report-cta-text strong {
    font-size: calc(1.05rem - 1px);
}

.custom-report-cta-text span {
    color: #d7dbe3;
    font-size: calc(0.85rem - 1px);
}

.custom-report-cta-arrow {
    font-size: 1.5rem;
    color: var(--brand-blue);
    flex-shrink: 0;
}

/* Five dashboard entry tiles on the Reports hub - same navy-gradient/Kiln
   language as .custom-report-cta (one consistent "go somewhere" card style
   across this page) but laid out as a grid of vertical cards instead of one
   wide banner, since there are several of these side by side. Fixed at 3
   per row (not auto-fit) so the layout is the same shape everywhere this is
   used, regardless of how many tiles a given hub has or how wide the
   window is - a row of 4-5 narrow auto-fit tiles read as cramped compared
   to this. */
.dashboard-tile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1rem 0 2rem;
}

@media (max-width: 900px) {
    .dashboard-tile-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .dashboard-tile-grid {
        grid-template-columns: 1fr;
    }
}

.dashboard-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    background: linear-gradient(135deg, var(--brand-navy), #3b4356);
    border-top: 3px solid var(--brand-blue);
    border-radius: 10px;
    padding: 1.35rem 1.25rem;
    text-decoration: none;
    color: #fff;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.dashboard-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.dashboard-tile-icon {
    font-size: 2rem;
    line-height: 1;
}

.dashboard-tile-title {
    font-size: calc(1.05rem - 1px);
    font-weight: 700;
}

.dashboard-tile-desc {
    color: #d7dbe3;
    font-size: calc(0.8rem - 1px);
}

/* A tile with two destinations (e.g. "Log Time" + "Review Time Sheets")
   can't be one big <a> the way every other dashboard-tile is - this is the
   div-wrapped variant, same look, with its own small link row at the
   bottom instead of the whole card being the click target. */
.dashboard-tile-links {
    display: flex;
    gap: 0.9rem;
    margin-top: 0.15rem;
}

.dashboard-tile-link {
    color: #fff;
    font-size: calc(0.85rem - 1px);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dashboard-tile-link:hover {
    color: var(--brand-blue);
}