/* ==========================================================================
   AinaOS — Hawaiian Tropical Resort Design System
   Fonts: Satoshi (body), General Sans (headings)
   Palette: Deep Red-Orange #C2410C (primary), Ocean Teal #1A9B9E, Sand #F5EDE3
   ========================================================================== */

/* --- Font Imports --- */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&f[]=general-sans@500,600,700&display=swap');

/* --- CSS Custom Properties --- */
:root {
    --hw-primary: #C2410C;
    --hw-primary-light: #EA580C;
    --hw-primary-dark: #9A3412;
    /* Override Bootstrap's primary so utility classes like .text-primary,
       .bg-primary, .btn-outline-primary etc. all pick up our color. */
    --bs-primary: #C2410C;
    --bs-primary-rgb: 194, 65, 12;
    --hw-secondary: #1A9B9E;
    --hw-secondary-light: #3CC0C3;
    --hw-secondary-dark: #137072;
    --hw-bg: #F5EDE3;
    --hw-surface: #FBF7F2;
    --hw-sidebar-bg: #0C2E3D;
    --hw-sidebar-hover: #133D50;
    --hw-sidebar-accent: #F4A942;
    --hw-text: #1E1E2A;
    --hw-text-muted: #7A7068;
    --hw-success: #2D9B5A;
    --hw-success-light: #4EC47A;
    --hw-warning: #F4C842;
    --hw-warning-dark: #D4A520;
    --hw-danger: #D94040;
    --hw-danger-light: #E86565;
    --hw-card-shadow: 0 4px 20px rgba(12, 46, 61, 0.08);
    --hw-card-shadow-hover: 0 8px 32px rgba(12, 46, 61, 0.14);
    --hw-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --hw-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --hw-sidebar-width: 220px;
    --hw-page-gutter: 12px;
    --hw-sidebar-collapsed: 64px;
    --hw-header-height: 64px;
    /* Hairline rule used for header/title-bar borders and the avatar divider. */
    --hw-rule: rgba(122, 112, 104, 0.18);
    /* Subtle hover wash for bare toolbar icons (dark-on-light). */
    --hw-btn-hover: rgba(12, 46, 61, 0.06);
}

/* NOTE: the only themes that ship are "attio" and "attio-dark" (the head script
   in base.html migrates any legacy 'dark' value). A plain [data-bs-theme="dark"]
   selector therefore never matches — put dark-mode rules under "attio-dark". */

/* --- Animations --- */
@keyframes float-icon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes waveShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes tidePulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.04); opacity: 0.85; }
}

@keyframes countPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

@keyframes sunsetGlow {
    0% { box-shadow: 0 0 0 0 rgba(194, 65, 12, 0.4); }
    70% { box-shadow: 0 0 0 12px rgba(194, 65, 12, 0); }
    100% { box-shadow: 0 0 0 0 rgba(194, 65, 12, 0); }
}

@keyframes palmSway {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(2deg); }
    75% { transform: rotate(-2deg); }
}

@keyframes waveWash {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes gentleBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes slideIn {
    from { transform: translateX(-10px); opacity: 0; }
    to { transform: translateX(0); opacity: 0.8; }
}

@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@keyframes spin-icon {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes oceanDrift {
    0% { transform: translateX(0); }
    50% { transform: translateX(-20px); }
    100% { transform: translateX(0); }
}

@keyframes pulse-glow {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(194, 65, 12, 0.4)); }
    50% { filter: drop-shadow(0 0 12px rgba(194, 65, 12, 0.7)); }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* --- Base --- */
/* Shrink content text 10% without touching the root rem unit — so the
   sidebar's fixed-pixel layout stays intact while body text, buttons,
   tables, cards, etc. all render smaller. */
body {
    background-color: var(--hw-bg);
    color: var(--hw-text);
    font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    --bs-body-font-size: 0.9rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background-color 0.4s var(--hw-smooth), color 0.4s var(--hw-smooth);
}
/* Don't shrink the sidebar — its layout (collapsed width, icon centring,
   tooltip offsets) depends on the original rem context. */
.hw-sidebar { font-size: 1rem; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'General Sans', 'Satoshi', sans-serif;
    font-weight: 600;
    color: var(--hw-text);
}

main {
    flex: 1;
}

a {
    color: var(--hw-secondary);
    transition: color 0.2s var(--hw-smooth);
}
a:hover {
    color: var(--hw-secondary-light);
}

/* --- Sidebar --- */
.hw-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--hw-sidebar-width);
    height: 100vh;
    background: var(--hw-sidebar-bg);
    z-index: 1040;
    display: flex;
    flex-direction: column;
    padding: 16px 0;
    transition: width 0.3s var(--hw-smooth);
    /* overflow: visible so flyout sub-nav can escape to the right */
    overflow: visible;
}

/* Subtle monstera leaf pattern overlay */
.hw-sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 40px 60px at 20% 85%, rgba(244, 169, 66, 0.04) 0%, transparent 70%),
        radial-gradient(ellipse 35px 50px at 80% 70%, rgba(244, 169, 66, 0.03) 0%, transparent 70%),
        radial-gradient(ellipse 30px 45px at 40% 95%, rgba(244, 169, 66, 0.03) 0%, transparent 70%);
    pointer-events: none;
}

/* Wave decoration at bottom of sidebar */
.hw-sidebar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to top, rgba(26, 155, 158, 0.08), transparent);
    pointer-events: none;
}

.hw-sidebar .sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    margin-bottom: 24px;
    text-decoration: none;
    transition: all 0.3s var(--hw-smooth);
    white-space: nowrap;
    overflow: hidden;
}

.hw-sidebar .sidebar-logo .logo-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    transition: transform 0.3s var(--hw-bounce);
}

.hw-sidebar .sidebar-logo:hover .logo-icon {
    transform: scale(1.08);
}

.hw-sidebar .sidebar-logo .logo-text {
    opacity: 1;
    transition: opacity 0.2s var(--hw-smooth);
}

/* The 2026 wordmark (landing brief D44), white: the sidebar is dark in both themes. */
.hw-sidebar .sidebar-logo .logo-wordmark {
    display: block;
    height: 24px;
    width: auto;
}

/* Sign-in pages: diamond + wordmark (templates/_brand_lockup.html). The ink
   wordmark on light themes, the white one on attio-dark. */
.brand-lockup { display: inline-flex; align-items: center; gap: 12px; }
.brand-lockup-mark { width: 52px; height: 52px; }
.brand-lockup-word { height: 32px; width: auto; }
.brand-lockup .on-dark { display: none; }
[data-bs-theme="attio-dark"] .brand-lockup .on-light { display: none; }
[data-bs-theme="attio-dark"] .brand-lockup .on-dark { display: block; }

.hw-sidebar .sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    width: 100%;
    padding: 0 8px;
    /* overflow: visible so flyouts escape to the right; sidebar fits ~12 items
       comfortably at 100vh and we don't expect to exceed that. */
    overflow: visible;
}

.hw-sidebar .sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.25s var(--hw-smooth);
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    border-left: 3px solid transparent;
}

.hw-sidebar .sidebar-link i {
    font-size: 1.15rem;
    min-width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.hw-sidebar .sidebar-link .link-text {
    opacity: 1;
    transition: opacity 0.2s var(--hw-smooth);
}

.hw-sidebar .sidebar-link:hover {
    color: #fff;
    background: var(--hw-sidebar-hover);
    border-left-color: var(--hw-sidebar-accent);
}

.hw-sidebar .sidebar-link.active {
    color: #fff;
    background: rgba(244, 169, 66, 0.12);
    border-left-color: var(--hw-sidebar-accent);
}

.hw-sidebar .sidebar-link.active i {
    color: var(--hw-sidebar-accent);
}

/* Sidebar sub-links (now appear inside flyouts) */
.hw-sidebar .sidebar-sublink {
    padding-left: 16px !important;
    font-size: 0.9rem;
}

/* Sidebar flyout groups: hover the parent (or tap to toggle) to reveal the
   sub-nav as a popover anchored to the right of the sidebar. */
.hw-sidebar .sidebar-group {
    position: relative;
}
.hw-sidebar .sidebar-flyout-toggle {
    display: flex;
    align-items: center;
}
.hw-sidebar .flyout-chevron {
    transition: transform 0.15s var(--hw-smooth);
}
.hw-sidebar .sidebar-group:hover > .sidebar-link .flyout-chevron,
.hw-sidebar .sidebar-group.flyout-open > .sidebar-link .flyout-chevron {
    transform: translateX(2px);
}
.hw-sidebar .sidebar-flyout {
    position: absolute;
    top: -4px;
    left: calc(100% + 4px);
    min-width: 220px;
    max-width: 280px;
    background: var(--hw-sidebar-bg);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    box-shadow: 6px 6px 24px rgba(0, 0, 0, 0.35);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px);
    transition: opacity 0.15s var(--hw-smooth),
                transform 0.15s var(--hw-smooth),
                visibility 0.15s var(--hw-smooth);
    /* Grace period before hiding: brief excursions off the group/flyout don't
       instantly kill the panel (the shown state below re-opens with no delay). */
    transition-delay: 0.15s;
    pointer-events: none;
    z-index: 1050;
}
/* Invisible hover corridor bridging the 4px gap between the rail and the
   flyout. Without it the group loses :hover the moment the cursor enters the
   gap, pointer-events flips to none, and the flyout can never be reached by
   mouse — it only stayed open when click-pinned (.flyout-open). The bridge is
   part of the flyout (a child of the group), so crossing it keeps the group
   hovered; while the flyout is hidden it inherits pointer-events: none and
   captures nothing. */
.hw-sidebar .sidebar-flyout::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    width: 12px;
}
.hw-sidebar .sidebar-group:hover > .sidebar-flyout,
.hw-sidebar .sidebar-group:focus-within > .sidebar-flyout,
.hw-sidebar .sidebar-group.flyout-open > .sidebar-flyout {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition-delay: 0s;
    pointer-events: auto;
}
.hw-sidebar .sidebar-flyout-title {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.45);
    padding: 6px 12px 4px;
}
.hw-sidebar .sidebar-flyout .sidebar-link {
    border-radius: 8px;
    border-left: none;
    padding: 8px 12px;
}
.hw-sidebar .sidebar-flyout .sidebar-sublink {
    padding-left: 12px !important;
}
/* Bottom-anchored flyouts (e.g., Admin in sidebar-bottom) open upward */
.hw-sidebar .sidebar-group-up .sidebar-flyout {
    top: auto;
    bottom: -4px;
}

/* Sidebar bottom section */
.hw-sidebar .sidebar-bottom {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 8px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    width: 100%;
}

/* Collapse toggle button */
.hw-sidebar .sidebar-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.45);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.25s var(--hw-smooth);
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    text-align: left;
    font-family: 'Satoshi', sans-serif;
}

.hw-sidebar .sidebar-collapse-btn i {
    font-size: 1.15rem;
    min-width: 24px;
    text-align: center;
    flex-shrink: 0;
    transition: transform 0.3s var(--hw-smooth);
}

.hw-sidebar .sidebar-collapse-btn:hover {
    color: rgba(255, 255, 255, 0.8);
    background: var(--hw-sidebar-hover);
}

/* --- Collapsed Sidebar State --- */
html.sidebar-collapsed .hw-sidebar {
    width: var(--hw-sidebar-collapsed);
}

html.sidebar-collapsed .hw-sidebar .logo-text,
html.sidebar-collapsed .hw-sidebar .link-text,
html.sidebar-collapsed .hw-sidebar .sidebar-collapse-btn .collapse-text {
    opacity: 0;
    width: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Flyout (hover popup) labels stay visible even when the parent rail
   is collapsed — the icon-only stripe rule above shouldn't reach
   inside the popup. */
html.sidebar-collapsed .hw-sidebar .sidebar-flyout .link-text {
    opacity: 1;
    width: auto;
    overflow: visible;
    pointer-events: auto;
}

/* The chevron is "hidden" by the .link-text rule above, but two things
   survive it: the 24px min-width from the shared icon-slot rule
   (.sidebar-link i — min-width beats width: 0), and Bootstrap's ms-auto
   (margin-left: auto !important — an auto margin swallows the space
   justify-content: center would distribute). Either one alone shifts a
   group row's icon 12px left of the plain rows'. Kill both on the
   collapsed rail; flyout rows keep theirs (labels + chevrons visible,
   chevron at its natural glyph width, still right-aligned by ms-auto). */
html.sidebar-collapsed .hw-sidebar .sidebar-link .flyout-chevron {
    min-width: 0;
    margin-left: 0 !important;
}
html.sidebar-collapsed .hw-sidebar .sidebar-flyout .sidebar-link .flyout-chevron {
    min-width: 0;
    margin-left: auto !important;
}

html.sidebar-collapsed .hw-sidebar .sidebar-collapse-btn i {
    transform: rotate(180deg);
}

html.sidebar-collapsed .hw-sidebar .sidebar-link {
    justify-content: center;
    padding: 10px 0;
    gap: 0;
    border-left-color: transparent;
}

/* Flyout rows keep their normal horizontal layout — icon then label. */
html.sidebar-collapsed .hw-sidebar .sidebar-flyout .sidebar-link {
    justify-content: flex-start;
    padding: 8px 12px;
    gap: 12px;
}

html.sidebar-collapsed .hw-sidebar .sidebar-link:hover,
html.sidebar-collapsed .hw-sidebar .sidebar-link.active {
    border-left-color: transparent;
}

html.sidebar-collapsed .hw-sidebar .sidebar-logo {
    justify-content: center;
    padding: 0;
}


html.sidebar-collapsed .hw-sidebar .sidebar-collapse-btn {
    justify-content: center;
}

/* No hover tooltips on the collapsed sidebar — the styled [title]::after
   popup doubled up with the flyout panels and Harry wants icon-only hover
   (removed 2026-07-04; title attributes stay for the browser/AT). */

/* --- Sticky Header --- */
.hw-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--hw-header-height);
    background: var(--hw-surface);
    border-bottom: 1px solid rgba(122, 112, 104, 0.1);
    display: flex;
    align-items: center;
    padding: 0 24px;
    margin-left: var(--hw-sidebar-width);
    transition: margin-left 0.3s var(--hw-smooth), background-color 0.4s var(--hw-smooth);
}

html.sidebar-collapsed .hw-header {
    margin-left: var(--hw-sidebar-collapsed);
}

.hw-header .header-search {
    width: 260px;
    flex: 0 0 auto;
    margin-left: auto;   /* flexible spacer: pushes search + actions to the right */
    margin-right: 8px;
}

/* Breadcrumb lives in Bar 1, immediately right of the collapse button. */
.hw-header .header-breadcrumb {
    min-width: 0;
    margin-left: 14px;
    margin-right: 12px;  /* air between a squeezed trail and the search box */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.1;
    display: flex;
    align-items: center;
    align-self: center;
}
/* Bootstrap's .breadcrumb / its <nav> wrapper (often `mb-3`) carries a 1rem
   bottom margin; strip it (and the inner padding) inside the toolbar so the
   chevrons sit on the header's vertical center. The page templates render
   <nav class="mb-3"> which uses !important, so the reset has to as well. */
.hw-header .header-breadcrumb .breadcrumb,
.hw-header .header-breadcrumb nav {
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
}
.hw-header .header-breadcrumb:empty {
    display: none;
}
/* One line, and the trail gives way rather than the toolbar. Bootstrap's
   .breadcrumb wraps, which at tablet widths dropped the "/" and the page name
   onto a second line inside the 64px bar. Items truncate with an ellipsis in
   order: the current page first, then intermediate levels; the root section
   ("RE Projects", "Properties") stays whole unless it alone is wider than the
   trail. A large shrink factor rather than a tiny one, because flex scales
   the squeeze down when the unfrozen factors sum below 1. */
.hw-header .header-breadcrumb nav,
.hw-header .header-breadcrumb .breadcrumb {
    min-width: 0;
    flex-wrap: nowrap;
}
.hw-header .header-breadcrumb .breadcrumb-item {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hw-header .header-breadcrumb .breadcrumb-item:last-child {
    flex-shrink: 1000;
}
.hw-header .header-breadcrumb .breadcrumb-item:first-child:not(:last-child) {
    flex-shrink: 0;
    max-width: 100%;
}
/* Bootstrap floats the "/" divider, which keeps the ellipsis from replacing
   the last visible letters (a bare "W" was left against the search box). */
.hw-header .header-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    float: none;
}

/* ── Bar 2: page-title band ───────────────────────────────────────
   Full-width strip beneath the toolbar holding the large page heading
   (hoisted from the page's <h1>). Same surface as Bar 1; scrolls away
   with content (only Bar 1 is sticky). */
.hw-titlebar {
    background: var(--hw-surface);
    border-bottom: 1px solid var(--hw-rule);
    margin-left: var(--hw-sidebar-width);
    padding: 10px var(--hw-page-gutter);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px; /* compact separation without clipping the tab strip */
    overflow: visible; /* let the active-tab underline sit on the bottom edge */
    transition: margin-left 0.3s var(--hw-smooth), background-color 0.4s var(--hw-smooth);
    /* Stick beneath the toolbar so the page title + tab strip stay visible
       on scroll (matters most for the long dashboard pages). */
    position: sticky;
    top: var(--hw-header-height);
    z-index: 1020;
}
/* When a tab strip is present, drop the band's own bottom rule and bottom
   padding so the tabs sit flush with the band's bottom edge — the active
   tab's accent line becomes the only horizontal divider. */
.hw-titlebar:has(.hw-titlebar-extra:not(:empty)) {
    padding-bottom: 0;
    border-bottom: none;
}
html.sidebar-collapsed .hw-titlebar {
    margin-left: var(--hw-sidebar-collapsed);
}
.hw-titlebar .header-page-title {
    font-family: 'General Sans', 'Satoshi', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
    min-height: 28px;
    color: var(--hw-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
    min-width: 0;
}
/* Big title is text-only — drop the leading icon the <h1> carries. */
.hw-titlebar .header-page-title i:not(.prop-title-caret) {
    display: none;
}
/* Optional thumbnail prepended to the <h1> (e.g. property cover photo).
   Hoisted into the title band along with the rest of the h1's innerHTML. */
.hw-titlebar .header-page-title img.title-thumb,
.title-thumb {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: cover;
    margin-right: 12px;
    vertical-align: middle;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
/* Second-row slot in the title band — page-scoped controls (e.g. property
   tab strip). Sits beneath the title, left-aligned, full width.
   overflow: visible so the More dropdown menu can poke out below the band. */
.hw-titlebar .hw-titlebar-extra {
    flex: 0 0 auto;
    min-width: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: visible;
}
/* When the slot has no override content, drop it so the gap collapses
   and pages without a tab strip render with their original spacing. */
.hw-titlebar .hw-titlebar-extra:empty {
    display: none;
}
/* Title-row buttons (Dashboards / Notes) — rendered by the tab-strip partial
   but floated up into the title row's top-right corner (the sticky band is
   the positioning context). */
.hw-titlebar .hw-titlebar-btns {
    position: absolute;
    top: 8px;
    right: var(--hw-page-gutter);
    display: flex;
    gap: 8px;
}
/* Keep long property names from running under the floated buttons. */
.hw-titlebar:has(.hw-titlebar-btns) .header-page-title {
    padding-right: 260px;
}
/* Property tab strip — minimal underline tabs inside the title band.
   Overrides Bootstrap's nav-tabs box look. */
.hw-titlebar-tabs {
    border: none;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    /* Column gap between tabs; row gap separates wrapped rows. */
    gap: 2px 4px;
    /* Above mobile the strip WRAPS into a second/third row as the window
       narrows, instead of hiding tabs behind a "More" dropdown — every
       destination stays one click away. The browser decides how many rows
       fit, so there is nothing to measure and nothing to keep in sync.
       Mobile keeps the dropdown (see the max-width block below): stacked
       rows eat too much of a phone viewport above the fold. */
    flex-wrap: wrap;
}
.hw-titlebar-tabs > .nav-item {
    list-style: none;
}
.hw-titlebar-tabs .nav-link {
    border: none !important;
    border-radius: 0;
    background: transparent !important;
    color: var(--hw-text-muted);
    padding: 6px 10px;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    position: relative;
    transition: color 0.15s ease;
    display: inline-flex;
    align-items: center;
}
.hw-titlebar-tabs .nav-link:hover {
    color: var(--hw-text);
}
.hw-titlebar-tabs .nav-link.active,
.hw-titlebar-tabs .nav-link[aria-current="page"] {
    color: var(--hw-text);
    font-weight: 600;
}
.hw-titlebar-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    /* Sit on the title band's bottom edge — the band drops its border-bottom
       and padding-bottom when the tab strip is present (see :has above). */
    bottom: 0;
    height: 2px;
    background: var(--hw-primary);
    border-radius: 1px;
}
.hw-titlebar-tabs .nav-link i {
    margin-right: 0.4em;
    font-size: 0.95em;
    opacity: 0.75;
}
.hw-titlebar-tabs .nav-link .badge {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.2em 0.45em;
}
/* "More" dropdown caret in the title bar — toned down */
.hw-titlebar-tabs .dropdown-toggle::after {
    margin-left: 0.3em;
    border-top-color: currentColor;
    opacity: 0.6;
}
/* Tabs hidden by the auto-overflow JS (mirrored in the More menu instead).
   Only ever set on mobile now — the JS bails out above 767.98px. */
.hw-titlebar-tabs [data-overflowed="true"] {
    display: none;
}
/* Above mobile there is no overflow: tabs wrap, so the More tab is dead
   weight. Hidden in CSS as well as skipped in JS so it cannot flash during
   load or linger if the script fails. */
@media (min-width: 768px) {
    .hw-titlebar-tabs [data-tab-more] {
        display: none !important;
    }
}
/* Compact, labelled icon actions keep the mobile title on one row. */
@media (max-width: 767.98px) {
    .hw-titlebar:has(.hw-titlebar-btns) .header-page-title { padding-right: 80px; }
    .hw-titlebar .hw-titlebar-btns { gap: 6px; }
    .hw-titlebar-btns .btn { width: 34px; height: 32px; padding: 4px; }
    .hw-titlebar-btns .hw-title-action-label {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
    .hw-titlebar-btns .badge { display: none; }
}
/* Mobile: single scroll-free row plus the More dropdown, as before. */
@media (max-width: 767.98px) {
    .hw-titlebar-tabs {
        flex-wrap: nowrap;
        white-space: nowrap;
    }
}

/* When neither title nor extra-slot content is present, hide the band. */
.hw-titlebar:has(.header-page-title:empty):has(.hw-titlebar-extra:empty) {
    display: none;
}
.hw-header .header-breadcrumb nav,
.hw-header .header-breadcrumb .breadcrumb {
    margin: 0;
    padding: 0;
    background: transparent;
}
.hw-header .header-breadcrumb .breadcrumb {
    font-size: 0.72rem;
}

.hw-header .header-search .search-input {
    background: var(--hw-bg);
    border: 1px solid rgba(122, 112, 104, 0.15);
    border-radius: 50px;
    padding: 0.5rem 1rem 0.5rem 2.5rem;
    color: var(--hw-text);
    font-family: 'Satoshi', sans-serif;
    width: 100%;
    outline: none;
    transition: all 0.3s var(--hw-smooth);
}

.hw-header .header-search .search-input::placeholder {
    color: var(--hw-text-muted);
}

.hw-header .header-search .search-input:focus {
    border-color: var(--hw-secondary);
    box-shadow: 0 0 0 3px rgba(26, 155, 158, 0.15);
}

.hw-header .header-actions {
    display: flex;
    align-items: center;
    gap: 2px;   /* bare icons need less air; the divider does the separating */
    flex: 0 0 auto;
}

.hw-header .header-btn {
    width: 38px;
    height: 38px;
    flex-shrink: 0;              /* a squeezed row must not turn the circle into an oval */
    border-radius: 50%;          /* circular hover target only */
    background: transparent;
    border: none;
    color: var(--hw-text-muted);
    font-size: 1.18rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s var(--hw-smooth), color 0.2s var(--hw-smooth);
    position: relative;
}

.hw-header .header-btn:hover {
    background: var(--hw-btn-hover);   /* subtle, no border, no scale */
    color: var(--hw-text);
    transform: none;
}

/* Faint vertical rule between the bell and the avatar. */
.hw-header .header-divider {
    width: 1px;
    height: 24px;
    background: var(--hw-rule);
    margin: 0 10px;
    flex: 0 0 auto;
}

/* ── Page controls row ────────────────────────────────────────────
   List pages (e.g. Properties) put their own search inline with the
   toolbar buttons (Filters / view-toggle / primary action) in one row. */
.controls-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
}
.controls-row .page-search {
    flex: 1;
    min-width: 0;
    max-width: 480px;   /* cap so a gap opens before the toolbar on wide screens */
}
.controls-row .toolbar-row {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.controls-row .toolbar-row .btn {
    white-space: nowrap;   /* keep "Filters" / "Add Property" on one line */
}

.hw-header .notif-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background: var(--hw-primary);
    border-radius: 50%;
    animation: pulse-glow 2s infinite;
}

.hw-header .header-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--hw-primary), var(--hw-sidebar-accent));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform 0.25s var(--hw-bounce);
    box-shadow: 0 2px 8px rgba(194, 65, 12, 0.25);
}

.hw-header .header-avatar:hover {
    transform: scale(1.08);
}

/* Mobile sidebar toggle in header */
.hw-header .mobile-menu-btn {
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--hw-bg);
    border: 1px solid rgba(122, 112, 104, 0.1);
    color: var(--hw-text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    transition: all 0.25s var(--hw-smooth);
}

/* --- Main Content Area --- */
.hw-main {
    margin-left: var(--hw-sidebar-width);
    padding: 16px var(--hw-page-gutter);
    min-width: 0;
    min-height: calc(100vh - var(--hw-header-height));
    transition: margin-left 0.3s var(--hw-smooth);
    display: flex;
    flex-direction: column;
}

/* Authenticated pages share one width; only the shell owns outer gutters.
   Inner cards, reading columns, forms and modal widths remain independent. */
.hw-page {
    width: 100%;
    min-width: 0;
    max-width: none;
    padding-inline: 0;
    margin-inline: 0;
}

/* Side-by-side bill PDF preview — pane sticks while the details column scrolls. */
.pdf-preview-pane {
    position: sticky;
    top: 1rem;
}
.pdf-preview-frame {
    width: 100%;
    height: calc(100vh - 170px);
    min-height: 480px;
    border: 0;
    display: block;
}

/* Scrollable modals whose header/body/footer sit inside a <form> (multipart
   modals like Add Bill post the whole dialog): the interposed form must relay
   Bootstrap's flex column and height cap, or .modal-body never becomes the
   scroll container and tall forms get clipped dead by .modal-content's
   overflow:hidden — unreachable fields, no way to scroll. */
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
}

html.sidebar-collapsed .hw-main {
    margin-left: var(--hw-sidebar-collapsed);
}

/* Dashboard map uses the same outer gutter as the cards below it. */
.hw-content-bleed {
    margin-inline: 0;
}

/* Top-bleed modifier: pull a block flush up under the title band by cancelling
   .hw-main's top padding (mirrors the values per breakpoint). Pairs with
   .hw-content-bleed on the dashboard map. */
.hw-content-bleed-top { margin-top: -16px; }
@media (max-width: 991.98px) {
    .hw-content-bleed-top { margin-top: -16px; }
}
@media (max-width: 767.98px) {
    .hw-content-bleed-top { margin-top: -12px; }
}
@media (max-width: 374.98px) {
    .hw-content-bleed-top { margin-top: -8px; }
}

/* --- Wave Divider --- */
.wave-divider {
    width: 100%;
    overflow: hidden;
    line-height: 0;
    position: relative;
}

.wave-divider svg {
    display: block;
    width: 100%;
    height: 60px;
}

.wave-divider svg path {
    fill: var(--hw-bg);
}

.wave-divider.wave-teal svg path {
    fill: var(--hw-secondary);
}

.wave-divider.wave-ocean svg path {
    fill: var(--hw-sidebar-bg);
}

/* --- Hibiscus / Floral Accent --- */
.hibiscus-accent {
    position: relative;
}

.hibiscus-accent::before {
    content: '\2740';
    position: absolute;
    top: -12px;
    right: 16px;
    font-size: 1.4rem;
    color: var(--hw-primary);
    opacity: 0.2;
    animation: palmSway 4s ease-in-out infinite;
}

/* --- Cards --- */
.card {
    background: var(--hw-surface);
    box-shadow: var(--hw-card-shadow);
    border: none;
    border-radius: 16px;
    transition: box-shadow 0.3s var(--hw-smooth), transform 0.3s var(--hw-bounce);
    overflow: hidden;
}

.card:hover {
    box-shadow: var(--hw-card-shadow-hover);
    transform: translateY(-4px);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid rgba(122, 112, 104, 0.1);
    border-left: 3px solid transparent;
    border-image: linear-gradient(to bottom, var(--hw-primary), transparent) 1;
    border-radius: 0;
    font-family: 'General Sans', sans-serif;
    font-weight: 600;
    padding: 1rem 1.25rem;
}

/* --- Stat Cards --- */
.stat-card {
    background: var(--hw-surface);
    box-shadow: var(--hw-card-shadow);
    border: none;
    border-radius: 16px;
    transition: all 0.3s var(--hw-bounce);
    overflow: hidden;
    position: relative;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--hw-card-shadow-hover);
}

.stat-card .stat-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    animation: float-icon 3s ease-in-out infinite;
}

.stat-card .stat-icon-wrap.coral {
    color: var(--hw-primary);
    background: rgba(194, 65, 12, 0.1);
}

.stat-card .stat-icon-wrap.teal {
    color: var(--hw-secondary);
    background: rgba(26, 155, 158, 0.1);
}

.stat-card .stat-icon-wrap.green {
    color: var(--hw-success);
    background: rgba(45, 155, 90, 0.1);
}

.stat-card .stat-icon-wrap.gold {
    color: var(--hw-sidebar-accent);
    background: rgba(244, 169, 66, 0.1);
}

/* Legacy compat */
.stat-card .stat-icon-wrap.indigo { color: var(--hw-secondary); background: rgba(26, 155, 158, 0.1); }
.stat-card .stat-icon-wrap.emerald { color: var(--hw-success); background: rgba(45, 155, 90, 0.1); }
.stat-card .stat-icon-wrap.rose { color: var(--hw-primary); background: rgba(194, 65, 12, 0.1); }

.stat-icon {
    font-size: 1.3rem;
    opacity: 0.7;
}

/* Stat number tide animation */
.stat-card .display-value {
    animation: tidePulse 6s ease-in-out infinite;
}

/* --- Property Cards --- */
.property-card {
    background: var(--hw-surface);
    box-shadow: var(--hw-card-shadow);
    border: none;
    border-radius: 16px;
    transition: all 0.3s var(--hw-bounce);
}

.property-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: var(--hw-card-shadow-hover);
}

/* --- Tables --- */
.table {
    color: var(--hw-text);
}

/* Selector `.table > thead > tr > th` (specificity 0,0,1,3) beats
   Bootstrap's variable-based `.table > :not(caption) > * > *` (0,0,1,1)
   AND the `.table-*` color helpers — so the brand-tinted bg below sticks
   even when a `<thead class="table-light">` tries to override it. */
.table > thead > tr > th {
    font-family: 'General Sans', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-emphasis-color);
    background-color: var(--bs-primary-bg-subtle);
    border-bottom: none;
}

.table > thead > tr > th:first-child {
    border-radius: 8px 0 0 0;
}

.table > thead > tr > th:last-child {
    border-radius: 0 8px 0 0;
}

.table td {
    border-bottom: 1px solid rgba(122, 112, 104, 0.08);
    vertical-align: middle;
}

.table tbody tr:nth-child(even) {
    background: var(--hw-bg);
}

.table tbody tr:hover {
    background: rgba(194, 65, 12, 0.04);
}

/* Rounded table container */
.table-responsive {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--hw-card-shadow);
}

/* --- Breadcrumb --- */
.breadcrumb {
    background: none;
    padding: 0;
    margin-bottom: 0;
}

.breadcrumb-item a {
    color: var(--hw-secondary);
}

/* --- Forms --- */
.form-control,
.form-select {
    background: var(--hw-surface);
    border: 1px solid rgba(122, 112, 104, 0.15);
    border-radius: 10px;
    color: var(--hw-text);
    font-family: 'Satoshi', sans-serif;
    padding: 0.6rem 0.85rem;
    transition: all 0.3s var(--hw-smooth);
}

.form-control:focus,
.form-select:focus {
    background: var(--hw-surface);
    color: var(--hw-text);
    border-color: var(--hw-secondary);
    box-shadow: 0 0 0 3px rgba(26, 155, 158, 0.15);
}

.form-control::placeholder {
    color: var(--hw-text-muted);
}

.form-label {
    font-weight: 500;
    font-size: 0.88rem;
    color: var(--hw-text-muted);
}

/* --- Buttons --- */
.btn {
    border-radius: 12px;
    font-family: 'Satoshi', sans-serif;
    font-weight: 500;
    transition: all 0.25s var(--hw-bounce);
    border: none;
    position: relative;
    overflow: hidden;
}

/* Wave wash effect on hover */
.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s var(--hw-smooth);
}

.btn:hover::before {
    left: 100%;
}

.btn-primary {
    background: linear-gradient(135deg, var(--hw-primary), var(--hw-primary-light));
    box-shadow: 0 4px 12px rgba(194, 65, 12, 0.3);
    color: #fff;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--hw-primary-light), var(--hw-primary));
    box-shadow: 0 6px 20px rgba(194, 65, 12, 0.4);
    transform: translateY(-2px);
    color: #fff;
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary {
    background: transparent;
    border: 2px solid var(--hw-secondary);
    color: var(--hw-secondary);
}

.btn-secondary:hover {
    background: var(--hw-secondary);
    color: #fff;
    transform: translateY(-2px);
}

.btn-success {
    background: linear-gradient(135deg, var(--hw-success), var(--hw-success-light));
    box-shadow: 0 4px 12px rgba(45, 155, 90, 0.3);
    color: #fff;
}

.btn-success:hover {
    box-shadow: 0 6px 20px rgba(45, 155, 90, 0.4);
    transform: translateY(-2px);
    color: #fff;
}

.btn-danger {
    background: linear-gradient(135deg, var(--hw-danger), var(--hw-danger-light));
    box-shadow: 0 4px 12px rgba(217, 64, 64, 0.3);
    color: #fff;
}

.btn-danger:hover {
    box-shadow: 0 6px 20px rgba(217, 64, 64, 0.4);
    transform: translateY(-2px);
    color: #fff;
}

.btn-warning {
    background: linear-gradient(135deg, var(--hw-warning), var(--hw-warning-dark));
    color: var(--hw-text);
}

.btn-outline-primary {
    background: var(--hw-surface);
    border: 2px solid var(--hw-primary);
    color: var(--hw-primary);
    box-shadow: var(--hw-card-shadow);
}

.btn-outline-primary:hover {
    background: linear-gradient(135deg, var(--hw-primary), var(--hw-primary-light));
    color: #fff;
    transform: translateY(-2px);
}

.btn-outline-secondary {
    background: var(--hw-surface);
    border: 2px solid var(--hw-secondary);
    color: var(--hw-secondary);
}

.btn-outline-secondary:hover {
    background: var(--hw-secondary);
    color: #fff;
    transform: translateY(-2px);
}

/* --- Badges --- */
.badge {
    font-family: 'Satoshi', sans-serif;
    font-weight: 500;
    border-radius: 20px;
    padding: 0.35em 0.8em;
}

.badge.bg-primary { background: linear-gradient(135deg, var(--hw-primary), var(--hw-primary-light)) !important; }
.badge.bg-success { background: linear-gradient(135deg, var(--hw-success), var(--hw-success-light)) !important; }
.badge.bg-danger { background: linear-gradient(135deg, var(--hw-danger), var(--hw-danger-light)) !important; }
.badge.bg-warning { background: linear-gradient(135deg, var(--hw-warning), var(--hw-warning-dark)) !important; color: var(--hw-text) !important; }
.badge.bg-info { background: linear-gradient(135deg, var(--hw-secondary), var(--hw-secondary-light)) !important; }

/* Bill type badges */
.badge.bill-electric { background: #1B5E20 !important; color: #fff !important; }
.badge.bill-gas { background: #BF360C !important; color: #fff !important; }
.badge.bill-water { background: #0D47A1 !important; color: #fff !important; }
/* Usage-alert severity: critical dark red, high red, medium yellow */
.badge.sev-critical { background: #7f1d1d !important; color: #fff !important; }
.badge.sev-high { background: #dc3545 !important; color: #fff !important; }
.badge.sev-medium { background: #ffc107 !important; color: #212529 !important; }
.text-sev-critical { color: #7f1d1d !important; }
.text-sev-high { color: #dc3545 !important; }
.text-sev-medium { color: #ffc107 !important; }
/* Utility icons in the same colours as the .badge.bill-* badges */
.text-bill-electric { color: #1B5E20 !important; }
.text-bill-gas { color: #BF360C !important; }
.text-bill-water { color: #0D47A1 !important; }
.badge.bill-well { background: #00695C !important; color: #fff !important; }
.badge.bill-photovoltaic { background: #F9A825 !important; color: #212529 !important; }
.badge.bill-maintenance { background: #4E342E !important; color: #fff !important; }
.badge.bill-rent { background: #37474F !important; color: #fff !important; }
.badge.bill-other { background: #616161 !important; color: #fff !important; }
/* "Energy" is a calc-bill-only type (electric+gas mix) — deep purple so it
   reads as its own thing next to electric green and gas red. */
.badge.bill-energy { background: #4A148C !important; color: #fff !important; }

/* --- Progress Bars --- */
.progress {
    background: var(--hw-bg);
    border: 1px solid rgba(122, 112, 104, 0.1);
    border-radius: 10px;
    height: 12px;
    overflow: hidden;
}

.progress-bar {
    background: linear-gradient(90deg, var(--hw-secondary), var(--hw-primary), var(--hw-sidebar-accent));
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: waveShimmer 2.5s infinite;
}

/* --- Alerts --- */
.alert {
    background: var(--hw-surface);
    box-shadow: var(--hw-card-shadow);
    border: none;
    border-radius: 12px;
    border-left: 4px solid;
    color: var(--hw-text);
}

.alert-success {
    border-left-color: var(--hw-success);
    background: rgba(45, 155, 90, 0.06);
}

.alert-danger {
    border-left-color: var(--hw-danger);
    background: rgba(217, 64, 64, 0.06);
}

.alert-warning {
    border-left-color: var(--hw-warning);
    background: rgba(244, 200, 66, 0.06);
}

.alert-info {
    border-left-color: var(--hw-secondary);
    background: rgba(26, 155, 158, 0.06);
}

/* --- Dropdown --- */
.dropdown-menu {
    background: var(--hw-surface);
    box-shadow: var(--hw-card-shadow-hover);
    border: 1px solid rgba(122, 112, 104, 0.1);
    border-radius: 14px;
    padding: 8px;
}

.dropdown-item {
    border-radius: 8px;
    color: var(--hw-text);
    font-family: 'Satoshi', sans-serif;
    transition: all 0.2s var(--hw-smooth);
}

.dropdown-item:hover {
    background: rgba(194, 65, 12, 0.08);
    color: var(--hw-primary);
    transform: translateX(4px);
}

.dropdown-divider {
    border-color: rgba(122, 112, 104, 0.1);
}

/* --- Theme Toggle --- */
.theme-toggle {
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.4rem 0.6rem;
    transition: transform 0.3s var(--hw-bounce);
}

.theme-toggle:hover {
    transform: scale(1.2) rotate(15deg);
}

/* --- Simple-DataTables Theme --- */
.datatable-wrapper .datatable-top,
.datatable-wrapper .datatable-bottom {
    padding: 12px 16px;
}
.datatable-wrapper .datatable-search input {
    font-family: 'Satoshi', sans-serif;
    border: 1px solid rgba(122, 112, 104, 0.2);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.85rem;
    background: var(--hw-bg, #F5EDE3);
}
.datatable-wrapper .datatable-search input:focus {
    outline: none;
    border-color: var(--hw-primary);
    box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.15);
}
.datatable-wrapper .datatable-selector {
    font-family: 'Satoshi', sans-serif;
    border: 1px solid rgba(122, 112, 104, 0.2);
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 0.85rem;
}
.datatable-wrapper .datatable-info {
    font-size: 0.82rem;
    color: var(--hw-text-muted, #7A7068);
}
.datatable-wrapper .datatable-pagination .datatable-pagination-list-item-link {
    font-family: 'Satoshi', sans-serif;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.82rem;
}
.datatable-wrapper .datatable-pagination .datatable-pagination-list-item.datatable-active .datatable-pagination-list-item-link {
    /* Pair the fill with its matching foreground: --hw-primary is a light
       indigo in dark mode, and white-on-that was 2.98:1. */
    background: var(--attio-accent, var(--hw-primary, #C2410C));
    color: var(--attio-btn-primary-text, #fff);
    border-color: var(--attio-accent, var(--hw-primary, #C2410C));
}
.datatable-wrapper .datatable-table th {
    cursor: pointer;
    user-select: none;
}
.datatable-wrapper .datatable-table th .datatable-sorter::before,
.datatable-wrapper .datatable-table th .datatable-sorter::after {
    border-color: rgba(122, 112, 104, 0.3);
}
.datatable-wrapper .datatable-table th.datatable-ascending .datatable-sorter::after {
    border-bottom-color: var(--hw-primary);
}
.datatable-wrapper .datatable-table th.datatable-descending .datatable-sorter::before {
    border-top-color: var(--hw-primary);
}

/* --- Footer --- */
.hw-footer {
    margin-left: var(--hw-sidebar-width);
    background: var(--hw-sidebar-bg);
    padding: 20px 24px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    position: relative;
    overflow: hidden;
    transition: margin-left 0.3s var(--hw-smooth);
}

html.sidebar-collapsed .hw-footer {
    margin-left: var(--hw-sidebar-collapsed);
}

/* Wave top edge on footer */
.hw-footer::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 0;
    right: 0;
    height: 30px;
    background: var(--hw-sidebar-bg);
    clip-path: polygon(
        0% 100%, 5% 80%, 10% 100%, 15% 70%, 20% 100%, 25% 75%, 30% 100%,
        35% 80%, 40% 100%, 45% 70%, 50% 100%, 55% 80%, 60% 100%, 65% 75%,
        70% 100%, 75% 80%, 80% 100%, 85% 70%, 90% 100%, 95% 80%, 100% 100%
    );
}

.hw-footer .footer-brand {
    color: var(--hw-sidebar-accent);
    font-family: 'General Sans', sans-serif;
    font-weight: 600;
}

.hw-footer a {
    color: var(--hw-primary-light);
}

.hw-footer a:hover {
    color: var(--hw-primary);
}

footer {
    margin-top: auto;
}

/* --- Terminal Mockup --- */
.nm-terminal {
    background: var(--hw-sidebar-bg);
    box-shadow: var(--hw-card-shadow);
    border-radius: 12px;
    padding: 16px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.82rem;
    color: var(--hw-success-light);
    line-height: 1.7;
}

.nm-terminal .line {
    animation: slideIn 0.4s ease-out both;
    opacity: 0.8;
}

.nm-terminal .line:nth-child(2) { animation-delay: 0.15s; }
.nm-terminal .line:nth-child(3) { animation-delay: 0.3s; }
.nm-terminal .line:nth-child(4) { animation-delay: 0.45s; }
.nm-terminal .line:nth-child(5) { animation-delay: 0.6s; }

.nm-terminal .cursor {
    animation: cursor-blink 1s step-end infinite;
}

/* --- Global Search --- */
.global-search-form {
    width: 100%;
    max-width: 360px;
    order: -1;
}

@media (max-width: 991.98px) {
    .global-search-form {
        max-width: 100%;
        margin-bottom: 0.5rem;
    }
}

.global-search-input {
    background: var(--hw-bg) !important;
    border: 1px solid rgba(122, 112, 104, 0.15) !important;
    color: var(--hw-text) !important;
    border-radius: 50px !important;
    transition: all 0.3s var(--hw-smooth);
}

.global-search-input::placeholder {
    color: var(--hw-text-muted);
}

.global-search-input:focus {
    border-color: var(--hw-secondary) !important;
    box-shadow: 0 0 0 3px rgba(26, 155, 158, 0.15) !important;
}

.global-search-form .input-group-text {
    background: transparent !important;
    border: none !important;
    color: var(--hw-text-muted) !important;
}

.global-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--hw-surface);
    box-shadow: var(--hw-card-shadow-hover);
    border: 1px solid rgba(122, 112, 104, 0.1);
    border-radius: 0 0 14px 14px;
    max-height: 420px;
    overflow-y: auto;
    margin-top: 4px;
}

.search-category {
    padding: 6px 14px;
    font-size: 0.7rem;
    font-family: 'General Sans', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hw-text-muted);
    border-bottom: 1px solid rgba(122, 112, 104, 0.08);
    background: transparent;
}

.search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    text-decoration: none;
    color: var(--hw-text);
    border-bottom: 1px solid rgba(122, 112, 104, 0.06);
    transition: all 0.2s var(--hw-smooth);
}

.search-item:hover {
    background: rgba(194, 65, 12, 0.06);
    color: var(--hw-primary);
    transform: translateX(4px);
}

.search-item-icon {
    font-size: 1.15rem;
    color: var(--hw-secondary);
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.search-item-text { min-width: 0; flex: 1; }
.search-item-name {
    font-weight: 500;
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-item-name mark {
    background: rgba(194, 65, 12, 0.15);
    color: var(--hw-primary);
    padding: 0 2px;
    border-radius: 3px;
}

.search-item-sub {
    font-size: 0.75rem;
    color: var(--hw-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-empty {
    padding: 24px 14px;
    text-align: center;
    color: var(--hw-text-muted);
    font-size: 0.88rem;
}

.search-view-all {
    display: block;
    padding: 10px 14px;
    text-align: center;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--hw-primary);
    border-top: 1px solid rgba(122, 112, 104, 0.08);
}

.search-view-all:hover {
    background: rgba(194, 65, 12, 0.06);
}

.search-result-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hw-bg);
    border: 1px solid rgba(122, 112, 104, 0.1);
    border-radius: 10px;
    flex-shrink: 0;
}

/* --- Pagination --- */
.page-link {
    background: var(--hw-surface);
    box-shadow: var(--hw-card-shadow);
    border: none;
    color: var(--hw-text);
    border-radius: 10px !important;
    margin: 0 3px;
    transition: all 0.2s var(--hw-bounce);
}

.page-link:hover {
    background: rgba(194, 65, 12, 0.08);
    color: var(--hw-primary);
    transform: translateY(-2px);
}

.page-item.active .page-link {
    background: linear-gradient(135deg, var(--hw-primary), var(--hw-primary-light));
    box-shadow: 0 4px 12px rgba(194, 65, 12, 0.3);
    color: #fff;
}

/* --- Mobile Sidebar Overlay --- */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 25, 41, 0.6);
    z-index: 1035;
    opacity: 0;
    transition: opacity 0.3s var(--hw-smooth);
}

.sidebar-backdrop.show {
    display: block;
    opacity: 1;
}

/* --- Responsive: Tablet (768-991px) --- */
@media (max-width: 991.98px) {
    /* Reduce main padding on tablets */
    .hw-main {
        padding: 16px var(--hw-page-gutter);
    }

    /* Let charts stack earlier */
    .col-lg-8, .col-lg-4 {
        /* Charts handled by Bootstrap grid, just ensuring padding doesn't over-squeeze */
    }
}

/* Tablet with the sidebar open leaves the toolbar about 500px. The rigid 260px
   search plus the actions and the collapse button no longer fit, so the
   breadcrumb was squeezed to 0px and the avatar pushed past the right edge
   (document 780px wide at 768). Let the search share the squeeze, down to 8rem. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hw-header .header-search {
        flex: 0 1 260px;
        min-width: 8rem;
    }
}

/* --- Responsive: Mobile (< 768px) --- */
@media (max-width: 767.98px) {
    .hw-sidebar {
        transform: translateX(-100%);
        width: var(--hw-sidebar-width);
        transition: transform 0.3s var(--hw-smooth);
    }

    .hw-sidebar.mobile-open {
        transform: translateX(0);
    }

    /* A collapsed sidebar KEEPS its icon-rail look in the mobile drawer:
       same 64px width as the desktop collapsed rail (Harry 2026-08-05).
       The label-hiding/centering rules key off html.sidebar-collapsed and
       already carry over; this used to reset the width to 220px, which
       opened a full-width drawer holding nothing but centered icons. */
    html.sidebar-collapsed .hw-sidebar {
        width: var(--hw-sidebar-collapsed);
    }

    .hw-header,
    .hw-titlebar,
    .hw-main,
    .hw-footer {
        margin-left: 0;
    }

    /* .hw-titlebar was added after this reset (title-band PR) and never
       joined it — on phones the title band kept its 220px sidebar indent
       while the toolbar above and content below went full-width. */
    html.sidebar-collapsed .hw-header,
    html.sidebar-collapsed .hw-titlebar,
    html.sidebar-collapsed .hw-main,
    html.sidebar-collapsed .hw-footer {
        margin-left: 0;
    }

    .hw-header .mobile-menu-btn {
        display: flex;
    }

    /* The collapse chevron stays visible on phones: it toggles the drawer
       between the 64px icon rail and full labels — the only way a state
       persisted on desktop can be undone from a phone. The hamburger still
       owns open/close. */

    /* Breadcrumb crowds a phone-width header; the page heading below already
       says where you are. */
    .hw-header .header-breadcrumb {
        display: none;
    }

    .hw-header {
        border-radius: 0;
        padding: 0 12px;
    }

    /* Shrink header search on mobile: the desktop rule pins it at a rigid
       260px (flex: 0 0 auto), which pushed the header row past the viewport —
       let it flex down to whatever space the buttons leave instead. */
    .hw-header .header-search {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
        margin-right: 8px;
    }

    .hw-header .header-search .search-input {
        padding: 0.4rem 0.8rem 0.4rem 2.2rem;
        font-size: 0.85rem;
    }

    /* Tighten header action spacing */
    .hw-header .header-actions {
        gap: 6px;
    }

    .hw-header .header-btn {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }

    .hw-header .header-avatar {
        width: 34px;
        height: 34px;
        font-size: 0.8rem;
    }

    /* One shared gutter for title and content on phones. */
    :root { --hw-page-gutter: 8px; }
    .hw-main {
        padding: 12px var(--hw-page-gutter);
    }

    /* Page headers: wrap title + buttons */
    .hw-main .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Headings: scale down for mobile */
    .hw-main h1 {
        font-size: 1.35rem;
    }

    .hw-main h2 {
        font-size: 1.2rem;
    }

    .hw-main h3, .hw-main h4 {
        font-size: 1.05rem;
    }

    /* Cards: tighten padding (respect p-0 override) */
    .hw-main .card-body:not(.p-0) {
        padding: 0.75rem;
    }

    .hw-main .card-header {
        padding: 0.6rem 0.75rem;
    }

    /* Tables: EVERY table scrolls left-right on mobile, whatever its wrapper.
       Wrapped tables scroll via their wrapper — .table-responsive already
       does, and simple-datatables' .datatable-container gets it here. Bare
       tables (no scroll wrapper) become their own scroll container; without
       this they'd be clipped dead by .hw-main's overflow-x:hidden below. */
    .hw-main .table-responsive,
    .hw-main .datatable-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .hw-main table:not(.table-responsive > *):not(.datatable-container > *) {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Table cells: prevent text wrapping from exploding width */
    .hw-main .table th,
    .hw-main .table td {
        white-space: nowrap;
        font-size: 0.85rem;
        padding: 0.4rem 0.5rem;
    }

    /* Allow description/name columns to wrap */
    .hw-main .table td:first-child,
    .hw-main .table th:first-child {
        white-space: normal;
        min-width: 120px;
    }

    /* Button groups: allow wrapping */
    .hw-main .btn-group {
        flex-wrap: wrap;
    }

    .hw-main .d-flex.gap-2 {
        flex-wrap: wrap;
    }

    /* Filter bars: horizontal scroll when too many buttons */
    .hw-main .status-filters,
    .hw-main .filter-buttons {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        white-space: nowrap;
        padding-bottom: 4px;
    }

    /* Maps: reduce height on mobile */
    .hw-main #map,
    .hw-main [id*="map"] {
        height: 250px !important;
    }

    /* Charts: reduce height */
    .hw-main .apexcharts-canvas {
        max-height: 200px;
    }

    /* Badges: slightly smaller */
    .hw-main .badge {
        font-size: 0.7rem;
    }

    /* Only More-enabled title tabs need visible overflow for their menu. */
    .nav-tabs:not(.hw-titlebar-tabs:has([data-tab-more])) {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .nav-tabs .nav-link {
        white-space: nowrap;
        font-size: 0.85rem;
        padding: 0.4rem 0.75rem;
    }

    /* DataTable controls: stack search + pagination */
    .datatable-top,
    .datatable-bottom {
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch !important;
    }

    .datatable-search {
        width: 100%;
    }

    .datatable-search input {
        width: 100% !important;
    }

    /* Keep Bootstrap's row/column gutter pairing: fixed column padding
       makes stat cards protrude beyond the shell when row gutters differ. */

    /* Prevent ANY element from causing horizontal overflow */
    .hw-main {
        overflow-x: hidden;
    }

    .hw-main > .container,
    .hw-main > .container-fluid {
        padding-left: 0;
        padding-right: 0;
        overflow-x: hidden;
    }

    /* Modal / dropdown menus: don't overflow viewport */
    .dropdown-menu {
        max-width: calc(100vw - 24px);
    }

    /* Form rows: stack on mobile */
    .hw-main .row.g-2 > [class*="col-md-"],
    .hw-main .row.g-3 > [class*="col-md-"] {
        margin-bottom: 0.25rem;
    }
}

/* --- Responsive: Small phones (< 375px) --- */
@media (max-width: 374.98px) {
    .hw-main {
        padding: 8px;
    }

    .hw-main h1 {
        font-size: 1.15rem;
    }

    .hw-main h2 {
        font-size: 1.05rem;
    }

    .hw-header .header-search {
        display: none;
    }
}

/* Brand-orange progress bar (eGauge live capacity bars on the dashboard).
   Literal orange on purpose: the Attio themes remap --hw-primary-light to
   indigo. background-image restores Bootstrap's stripes, which the site-wide
   .progress-bar gradient (a `background:` shorthand) would otherwise replace. */
.progress-bar.bg-orange {
    background-color: #EA580C;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
}

/* --- Touch device: disable hover transforms --- */
@media (hover: none) {
    .nm-flat:hover {
        transform: none;
    }

    .nm-button:hover {
        transform: none;
    }

    .hw-header .header-btn:hover {
        transform: none;
    }

    .hw-header .header-avatar:hover {
        transform: none;
    }
}

/* --- Neumorphic Legacy Compat --- */
.nm-flat {
    background: var(--hw-surface);
    box-shadow: var(--hw-card-shadow);
    border: none;
    border-radius: 16px;
    transition: box-shadow 0.3s var(--hw-smooth), transform 0.3s var(--hw-bounce);
}

.nm-flat:hover {
    box-shadow: var(--hw-card-shadow-hover);
    transform: translateY(-4px);
}

.nm-inset {
    background: var(--hw-bg);
    border: 1px solid rgba(122, 112, 104, 0.1);
    border-radius: 12px;
}

.nm-button {
    background: var(--hw-surface);
    box-shadow: var(--hw-card-shadow);
    border: none;
    border-radius: 12px;
    padding: 0.6rem 1.2rem;
    color: var(--hw-text);
    font-family: 'Satoshi', sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s var(--hw-bounce);
    position: relative;
    overflow: hidden;
}

.nm-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--hw-card-shadow-hover);
}

.nm-button:hover .bi {
    animation: spin-icon 0.5s var(--hw-bounce);
}

.nm-button:active {
    transform: translateY(0);
    box-shadow: var(--hw-card-shadow);
}

/* Ripple / wave effect */
.nm-button .ripple-wave {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(194, 65, 12, 0.25), transparent);
    width: 20px;
    height: 20px;
    animation: waveShimmer 0.6s linear;
    pointer-events: none;
}

/* --- Stat counter animation helper --- */
.count-up {
    display: inline-block;
}

.count-up.pulse {
    animation: countPulse 0.4s var(--hw-bounce);
}

/* --- Plumeria decoration for empty states --- */
.empty-state-tropical {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--hw-text-muted);
}

.empty-state-tropical::before {
    content: '\1F33A';
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
    animation: gentleBob 3s ease-in-out infinite;
}

/* Sidebar pin / favorites */
.sidebar-link {
    position: relative;
}
.sidebar-pin-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    padding: 2px 4px;
    color: #f5b301;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
    cursor: pointer;
    line-height: 1;
    font-size: 1rem;
}
.sidebar-link:hover .sidebar-pin-btn,
.sidebar-link:focus-within .sidebar-pin-btn,
.sidebar-link.pinned .sidebar-pin-btn {
    opacity: 1;
    pointer-events: auto;
}
html.sidebar-collapsed .hw-sidebar .sidebar-pin-btn {
    display: none;
}
.sidebar-link.dragging {
    opacity: 0.4;
}
.sidebar-pinned-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin: 4px 12px;
    display: none;
}
.sidebar-pinned-divider.visible {
    display: block;
}

/* Collapse toggle in top nav — rotate chevron when sidebar is collapsed */
.hw-header .sidebar-collapse-btn i {
    transition: transform 0.3s var(--hw-smooth);
}
html.sidebar-collapsed .hw-header .sidebar-collapse-btn i {
    transform: rotate(180deg);
}

/* ========================================================================
   Attio-style theme — clean, monochrome, dense, indigo accent.
   Two variants: "attio" (light) and "attio-dark". Each mode sets the
   --attio-* color variables; all structural / typographic rules below
   are shared via [data-bs-theme^="attio"] and reference the variables.
   ======================================================================== */

/* ---- Light Attio: variables ---- */
[data-bs-theme="attio"] {
    --attio-bg: #FAFAFA;
    --attio-surface: #FFFFFF;
    --attio-sidebar-bg: #F7F7F8;
    --attio-sidebar-hover: #EFEFF1;
    --attio-border: #E5E7EB;
    --attio-border-strong: #D1D5DB;
    --attio-text: #1F2937;
    --attio-text-muted: #6B7280;
    --attio-text-sub: #4B5563;
    --attio-hover-bg: #F3F4F6;
    --attio-table-header-bg: #F9FAFB;
    --attio-accent: #C2410C;
    --attio-accent-light: #155E83;
    --attio-accent-bg: rgba(194, 65, 12, 0.08);
    --attio-accent-ring: rgba(194, 65, 12, 0.1);
    --attio-input-bg: #FFFFFF;
    --attio-btn-primary-bg: #1F2937;
    --attio-btn-primary-bg-hover: #000000;
    --attio-btn-primary-text: #FFFFFF;
    --attio-shadow-pop: 0 4px 12px rgba(16, 24, 40, 0.08);
    --attio-shadow-card-hover: 0 1px 3px rgba(16, 24, 40, 0.08);
    --attio-badge-secondary-bg: #F3F4F6;
    --attio-badge-secondary-text: #4B5563;
    --attio-badge-success-bg: #D1FAE5;
    --attio-badge-success-text: #065F46;
    --attio-badge-danger-bg: #FEE2E2;
    --attio-badge-danger-text: #991B1B;
    --attio-badge-warning-bg: #FEF3C7;
    --attio-badge-warning-text: #92400E;
    --attio-badge-info-bg: #DBEAFE;
    --attio-badge-info-text: #1E40AF;
    /* Apply over the global --hw-* palette so rules elsewhere pick this up too */
    --hw-primary: #4F46E5;
    --hw-primary-light: #6366F1;
    --hw-primary-dark: #4338CA;
    --hw-bg: var(--attio-bg);
    --hw-surface: var(--attio-surface);
    --hw-sidebar-bg: var(--attio-sidebar-bg);
    --hw-sidebar-hover: var(--attio-sidebar-hover);
    --hw-sidebar-accent: var(--attio-accent);
    --hw-text: var(--attio-text);
    --hw-text-muted: var(--attio-text-muted);
    --hw-card-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    --hw-card-shadow-hover: var(--attio-shadow-card-hover);
}

/* ---- Dark Attio: variables ---- */
[data-bs-theme="attio-dark"] {
    --attio-bg: #09090B;
    --attio-surface: #18181B;
    --attio-sidebar-bg: #0F0F11;
    --attio-sidebar-hover: #1F1F23;
    --attio-border: #27272A;
    --attio-border-strong: #3F3F46;
    --attio-text: #FAFAFA;
    --attio-text-muted: #A1A1AA;
    --attio-text-sub: #D4D4D8;
    --attio-hover-bg: #27272A;
    --attio-table-header-bg: #1F1F22;
    --attio-accent: #38BDF8;
    --attio-accent-light: #7DD3FC;
    --attio-accent-bg: rgba(56, 189, 248, 0.15);
    --attio-accent-ring: rgba(129, 140, 248, 0.18);
    --attio-input-bg: #1F1F22;
    --attio-btn-primary-bg: #FAFAFA;
    --attio-btn-primary-bg-hover: #FFFFFF;
    --attio-btn-primary-text: #09090B;
    --attio-shadow-pop: 0 6px 20px rgba(0, 0, 0, 0.5);
    --attio-shadow-card-hover: 0 1px 4px rgba(0, 0, 0, 0.5);
    --attio-badge-secondary-bg: #27272A;
    --attio-badge-secondary-text: #D4D4D8;
    --attio-badge-success-bg: rgba(16, 185, 129, 0.15);
    --attio-badge-success-text: #6EE7B7;
    --attio-badge-danger-bg: rgba(239, 68, 68, 0.15);
    --attio-badge-danger-text: #FCA5A5;
    --attio-badge-warning-bg: rgba(245, 158, 11, 0.15);
    --attio-badge-warning-text: #FCD34D;
    --attio-badge-info-bg: rgba(59, 130, 246, 0.15);
    --attio-badge-info-text: #93C5FD;
    --hw-primary: #818CF8;
    --hw-primary-light: #A5B4FC;
    --hw-primary-dark: #6366F1;
    --hw-bg: var(--attio-bg);
    --hw-surface: var(--attio-surface);
    --hw-sidebar-bg: var(--attio-sidebar-bg);
    --hw-sidebar-hover: var(--attio-sidebar-hover);
    --hw-sidebar-accent: var(--attio-accent);
    --hw-text: var(--attio-text);
    --hw-text-muted: var(--attio-text-muted);
    --hw-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    --hw-card-shadow-hover: var(--attio-shadow-card-hover);
}

/* ---- Bootstrap's own dark palette, re-declared for "attio-dark" ----
   Bootstrap 5.3 ships every dark --bs-* value under [data-bs-theme="dark"]
   ONLY. Our dark theme is "attio-dark", so that block never matches and each
   --bs-* var keeps its LIGHT value — which is why .text-body, .text-*-emphasis,
   .bg-*-subtle, .input-group-text, .accordion, .pagination and friends render
   dark-on-dark (or as a white patch) in dark mode. Mirror the set here, mapped
   onto the attio tokens where we have one. */
[data-bs-theme="attio-dark"] {
    color-scheme: dark;
    --bs-body-color: var(--attio-text);
    --bs-body-color-rgb: 250, 250, 250;
    --bs-body-bg: var(--attio-bg);
    --bs-body-bg-rgb: 9, 9, 11;
    --bs-emphasis-color: #FFFFFF;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: var(--attio-text-muted);
    --bs-secondary-color-rgb: 161, 161, 170;
    --bs-secondary-bg: var(--attio-hover-bg);
    --bs-secondary-bg-rgb: 39, 39, 42;
    --bs-tertiary-color: rgba(250, 250, 250, 0.5);
    --bs-tertiary-color-rgb: 250, 250, 250;
    --bs-tertiary-bg: var(--attio-table-header-bg);
    --bs-tertiary-bg-rgb: 31, 31, 34;
    --bs-heading-color: inherit;
    --bs-link-color: var(--attio-accent);
    --bs-link-hover-color: var(--attio-accent-light);
    --bs-link-color-rgb: 56, 189, 248;
    --bs-link-hover-color-rgb: 125, 211, 252;
    --bs-code-color: #E685B5;
    --bs-border-color: var(--attio-border);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-primary-text-emphasis: #6EA8FE;
    --bs-secondary-text-emphasis: #A7ACB1;
    --bs-success-text-emphasis: #75B798;
    --bs-info-text-emphasis: #6EDFF6;
    --bs-warning-text-emphasis: #FFDA6A;
    --bs-danger-text-emphasis: #EA868F;
    --bs-light-text-emphasis: #F8F9FA;
    --bs-dark-text-emphasis: #DEE2E6;
    --bs-primary-bg-subtle: #031633;
    --bs-secondary-bg-subtle: #161719;
    --bs-success-bg-subtle: #051B11;
    --bs-info-bg-subtle: #032830;
    --bs-warning-bg-subtle: #332701;
    --bs-danger-bg-subtle: #2C0B0E;
    --bs-light-bg-subtle: #343A40;
    --bs-dark-bg-subtle: #1A1D20;
    --bs-primary-border-subtle: #084298;
    --bs-secondary-border-subtle: #41464B;
    --bs-success-border-subtle: #0F5132;
    --bs-info-border-subtle: #087990;
    --bs-warning-border-subtle: #997404;
    --bs-danger-border-subtle: #842029;
    --bs-light-border-subtle: #495057;
    --bs-dark-border-subtle: #343A40;
    --bs-form-valid-color: #75B798;
    --bs-form-valid-border-color: #75B798;
    --bs-form-invalid-color: #EA868F;
    --bs-form-invalid-border-color: #EA868F;
}

/* ---- Shared structural & typographic rules (light + dark Attio) ---- */
[data-bs-theme^="attio"] body {
    background: var(--attio-bg);
    color: var(--attio-text);
    font-family: 'Inter', 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    line-height: 1.5;
}
[data-bs-theme^="attio"] h1, [data-bs-theme^="attio"] h2, [data-bs-theme^="attio"] h3,
[data-bs-theme^="attio"] h4, [data-bs-theme^="attio"] h5, [data-bs-theme^="attio"] h6 {
    font-family: 'Inter', 'General Sans', sans-serif;
    font-weight: 600;
    letter-spacing: -0.011em;
    color: var(--attio-text);
}
[data-bs-theme^="attio"] h1 { font-size: 1.5rem; }
[data-bs-theme^="attio"] h2 { font-size: 1.25rem; }
[data-bs-theme^="attio"] h3, [data-bs-theme^="attio"] h4 { font-size: 1.05rem; }
[data-bs-theme^="attio"] h5 { font-size: 0.95rem; }
[data-bs-theme^="attio"] h6 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--attio-text-muted); }
[data-bs-theme^="attio"] .text-muted { color: var(--attio-text-muted) !important; }
[data-bs-theme^="attio"] small, [data-bs-theme^="attio"] .small { font-size: 0.78rem; }

/* Sidebar */
[data-bs-theme^="attio"] .hw-sidebar {
    background: var(--attio-sidebar-bg);
    border-right: 1px solid var(--attio-border);
}
[data-bs-theme^="attio"] .hw-sidebar::before,
[data-bs-theme^="attio"] .hw-sidebar::after { display: none; }
[data-bs-theme^="attio"] .hw-sidebar .sidebar-logo .logo-text { color: var(--attio-text); }
[data-bs-theme^="attio"] .hw-sidebar .sidebar-logo .logo-icon {
    background: transparent;
    border-radius: 6px;
}
[data-bs-theme^="attio"] .hw-sidebar .sidebar-link {
    color: var(--attio-text-sub);
    border-left: 2px solid transparent;
    border-radius: 6px;
    padding: 6px 10px;
    font-weight: 500;
    font-size: 0.85rem;
}
[data-bs-theme^="attio"] .hw-sidebar .sidebar-link:hover {
    background: var(--attio-sidebar-hover);
    color: var(--attio-text);
}
[data-bs-theme^="attio"] .hw-sidebar .sidebar-link.active {
    background: var(--attio-accent-bg);
    color: var(--attio-accent);
    border-left-color: var(--attio-accent);
}
[data-bs-theme^="attio"] .hw-sidebar .sidebar-link.active i { color: var(--attio-accent); }
[data-bs-theme^="attio"] .hw-sidebar .sidebar-flyout {
    background: var(--attio-surface);
    border: 1px solid var(--attio-border);
    border-radius: 8px;
    box-shadow: var(--attio-shadow-pop);
}
[data-bs-theme^="attio"] .hw-sidebar .sidebar-flyout-title {
    color: var(--attio-text-muted);
    font-size: 0.68rem;
}
[data-bs-theme^="attio"] .hw-sidebar .sidebar-flyout .sidebar-link { color: var(--attio-text-sub); }

/* The side nav keeps the Hawaii blue background + gradient wave in BOTH attio
   light and dark modes, rather than the flat attio surface above. Scoped by
   #hwSidebar (id) so it out-specifies the `.hw-sidebar` class rules without
   needing !important.

   The gradient is declared HERE rather than relying on the
   [data-bs-theme="attio"] .hw-sidebar rule further down. That rule is a class
   selector, so this id rule outranks it: setting a flat colour here silently
   killed the wave while leaving `animation: oceanWave` running on nothing.
   If you change the palette, change it in this block. */
[data-bs-theme^="attio"] #hwSidebar {
    background: linear-gradient(180deg,
        #0A1F2C 0%,
        #0C2E3D 25%,
        #0F4053 50%,
        #0C2E3D 75%,
        #0A1F2C 100%);
    background-size: 100% 300%;
    background-position: 0% 0%;
    animation: oceanWave 18s ease-in-out infinite;
    border-right: none;
}
/* Dark mode: same wave, pulled down to an extra-dark navy. */
[data-bs-theme="attio-dark"] #hwSidebar {
    background: linear-gradient(180deg,
        #050F17 0%,
        #071520 25%,
        #0A2C3B 50%,
        #071520 75%,
        #050F17 100%);
    background-size: 100% 300%;
    background-position: 0% 0%;
    animation: oceanWave 18s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    [data-bs-theme^="attio"] #hwSidebar {
        animation: none;
        background-position: 0% 50%;
    }
}
[data-bs-theme^="attio"] #hwSidebar::before,
[data-bs-theme^="attio"] #hwSidebar::after { display: block; }
[data-bs-theme^="attio"] #hwSidebar .sidebar-logo .logo-text { color: #FFFFFF; }
[data-bs-theme^="attio"] #hwSidebar .sidebar-link { color: rgba(255, 255, 255, 0.82); }
[data-bs-theme^="attio"] #hwSidebar .sidebar-link:hover {
    background: rgba(255, 255, 255, 0.10);
    color: #FFFFFF;
}
[data-bs-theme^="attio"] #hwSidebar .sidebar-link.active {
    background: rgba(244, 169, 66, 0.18);
    color: #F4A942;
    border-left-color: #F4A942;
}
[data-bs-theme^="attio"] #hwSidebar .sidebar-link.active i { color: #F4A942; }
/* Flyout panels match the blue sidebar (the attio light-surface flyout rules
   otherwise leave white link text on a near-white panel in light mode). */
[data-bs-theme^="attio"] #hwSidebar .sidebar-flyout {
    background: #0C2E3D;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
[data-bs-theme="attio-dark"] #hwSidebar .sidebar-flyout { background: #071520; }

/* The footer's text is hardcoded white, so its panel has to stay dark in both
   modes. It reads --hw-sidebar-bg, which the deep-ocean sidebar override never
   touched (that override targets .hw-sidebar, not the variable) — so in attio
   LIGHT the footer painted itself #F7F7F8 and its white text vanished. Pin it
   to the same two ocean values the sidebar uses. */
[data-bs-theme^="attio"] .hw-footer,
[data-bs-theme^="attio"] .hw-footer::before { background: #0C2E3D; }
[data-bs-theme="attio-dark"] .hw-footer,
[data-bs-theme="attio-dark"] .hw-footer::before { background: #071520; }
/* The brand word reads --hw-sidebar-accent, which attio remaps to the burnt
   orange (#C2410C) — only 2.75:1 on that ocean panel. Use the same gold the
   sidebar's active item uses. */
[data-bs-theme^="attio"] .hw-footer .footer-brand { color: #F4A942; }
[data-bs-theme^="attio"] #hwSidebar .sidebar-flyout-title { color: rgba(255, 255, 255, 0.55); }

/* Header */
[data-bs-theme^="attio"] .hw-header {
    background: var(--attio-surface);
    border-bottom: 1px solid var(--attio-border);
    box-shadow: none;
}
[data-bs-theme^="attio"] .header-btn { color: var(--attio-text-muted); }
[data-bs-theme^="attio"] .header-btn:hover { background: var(--attio-hover-bg); color: var(--attio-text); }
[data-bs-theme^="attio"] .search-input {
    background: var(--attio-hover-bg);
    border: 1px solid var(--attio-border);
    border-radius: 6px;
    color: var(--attio-text);
    font-size: 0.85rem;
}
[data-bs-theme^="attio"] .search-input::placeholder { color: var(--attio-text-muted); }

/* Cards */
[data-bs-theme^="attio"] .card {
    background: var(--attio-surface);
    border: 1px solid var(--attio-border);
    border-radius: 8px;
    box-shadow: none;
    color: var(--attio-text);
}
[data-bs-theme^="attio"] .card:hover { box-shadow: var(--attio-shadow-card-hover); }
[data-bs-theme^="attio"] .card-header {
    background: var(--attio-surface);
    border-bottom: 1px solid var(--attio-border);
    font-weight: 500;
    color: var(--attio-text);
}
[data-bs-theme^="attio"] .card-body, [data-bs-theme^="attio"] .card-footer { color: var(--attio-text); }

/* Tables — dense, hairline */
[data-bs-theme^="attio"] .table {
    color: var(--attio-text);
    font-size: 0.85rem;
    --bs-table-bg: var(--attio-surface);
    --bs-table-color: var(--attio-text);
    --bs-table-border-color: var(--attio-border);
    --bs-table-striped-bg: var(--attio-hover-bg);
    --bs-table-hover-bg: var(--attio-table-header-bg);
    /* Keep row text legible on hover/stripe/active — Bootstrap otherwise
       falls back to --bs-emphasis-color (black), which vanishes on the dark
       attio hover background. */
    --bs-table-hover-color: var(--attio-text);
    --bs-table-striped-color: var(--attio-text);
    --bs-table-active-color: var(--attio-text);
}
[data-bs-theme^="attio"] .table > :not(caption) > * > * {
    border-bottom-color: var(--attio-border);
    padding: 0.5rem 0.75rem;
    background: transparent;
}
[data-bs-theme^="attio"] .table > thead,
[data-bs-theme^="attio"] .table-light {
    --bs-table-bg: var(--attio-table-header-bg);
    --bs-table-color: var(--attio-text);
    background: var(--attio-table-header-bg);
    color: var(--attio-text);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
[data-bs-theme^="attio"] .table > thead th,
[data-bs-theme^="attio"] .table-light th {
    background: var(--attio-table-header-bg);
    color: var(--attio-text);
}
[data-bs-theme^="attio"] .table-hover > tbody > tr:hover { background: var(--attio-table-header-bg); }

/* Buttons */
[data-bs-theme^="attio"] .btn {
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
    transition: all 0.15s;
}
[data-bs-theme^="attio"] .btn-primary {
    background: var(--attio-btn-primary-bg);
    border-color: var(--attio-btn-primary-bg);
    color: var(--attio-btn-primary-text);
}
[data-bs-theme^="attio"] .btn-primary:hover {
    background: var(--attio-btn-primary-bg-hover);
    border-color: var(--attio-btn-primary-bg-hover);
    color: var(--attio-btn-primary-text);
}
[data-bs-theme^="attio"] .btn-outline-primary {
    color: var(--attio-text);
    border-color: var(--attio-border-strong);
    background: var(--attio-surface);
}
[data-bs-theme^="attio"] .btn-outline-primary:hover {
    background: var(--attio-hover-bg);
    border-color: var(--attio-border-strong);
    color: var(--attio-text);
}
[data-bs-theme^="attio"] .btn-secondary,
[data-bs-theme^="attio"] .btn-outline-secondary {
    background: var(--attio-surface);
    border-color: var(--attio-border-strong);
    color: var(--attio-text);
}
[data-bs-theme^="attio"] .btn-secondary:hover,
[data-bs-theme^="attio"] .btn-outline-secondary:hover {
    background: var(--attio-hover-bg);
    color: var(--attio-text);
}

/* Badges — pastel tag style */
[data-bs-theme^="attio"] .badge {
    font-weight: 500;
    border-radius: 4px;
    font-size: 0.72rem;
    padding: 0.2em 0.5em;
}
[data-bs-theme^="attio"] .badge.bg-secondary { background: var(--attio-badge-secondary-bg) !important; color: var(--attio-badge-secondary-text) !important; }
[data-bs-theme^="attio"] .badge.bg-success   { background: var(--attio-badge-success-bg) !important;   color: var(--attio-badge-success-text) !important; }
[data-bs-theme^="attio"] .badge.bg-danger    { background: var(--attio-badge-danger-bg) !important;    color: var(--attio-badge-danger-text) !important; }
[data-bs-theme^="attio"] .badge.bg-warning   { background: var(--attio-badge-warning-bg) !important;   color: var(--attio-badge-warning-text) !important; }
[data-bs-theme^="attio"] .badge.bg-info      { background: var(--attio-badge-info-bg) !important;      color: var(--attio-badge-info-text) !important; }
[data-bs-theme^="attio"] .badge.bg-primary   { background: var(--attio-accent-bg) !important;          color: var(--attio-accent) !important; }

/* Forms */
[data-bs-theme^="attio"] .form-control,
[data-bs-theme^="attio"] .form-select,
[data-bs-theme^="attio"] .form-check-input {
    /* background-color, NOT the `background` shorthand: the shorthand resets
       background-image to none, which erased Bootstrap's checkmark/dot so a
       checked box looked identical to an unchecked one. */
    background-color: var(--attio-input-bg);
    border: 1px solid var(--attio-border-strong);
    border-radius: 6px;
    color: var(--attio-text);
    font-size: 0.85rem;
}
[data-bs-theme^="attio"] .form-check-input:checked {
    /* Fill the accent + let Bootstrap's (white) checkmark/dot show through. */
    background-color: var(--attio-accent);
    border-color: var(--attio-accent);
}
[data-bs-theme^="attio"] .form-check-input:focus {
    border-color: var(--attio-accent);
    box-shadow: 0 0 0 3px var(--attio-accent-ring);
}
[data-bs-theme^="attio"] .form-control:focus,
[data-bs-theme^="attio"] .form-select:focus {
    border-color: var(--attio-accent);
    box-shadow: 0 0 0 3px var(--attio-accent-ring);
}
[data-bs-theme^="attio"] .form-label { color: var(--attio-text); font-weight: 500; font-size: 0.8rem; }

/* Breadcrumbs */
[data-bs-theme^="attio"] .breadcrumb { font-size: 0.8rem; }
[data-bs-theme^="attio"] .breadcrumb a { color: var(--attio-text-muted); text-decoration: none; }
[data-bs-theme^="attio"] .breadcrumb a:hover { color: var(--attio-text); }
[data-bs-theme^="attio"] .breadcrumb-item.active { color: var(--attio-text); }

/* Tabs */
[data-bs-theme^="attio"] .nav-tabs { border-bottom: 1px solid var(--attio-border); }
[data-bs-theme^="attio"] .nav-tabs .nav-link {
    color: var(--attio-text-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.5rem 0.85rem;
    font-size: 0.85rem;
    border-radius: 0;
}
[data-bs-theme^="attio"] .nav-tabs .nav-link.active {
    color: var(--attio-text);
    background: transparent;
    border-bottom-color: var(--attio-text);
}
[data-bs-theme^="attio"] .nav-tabs .nav-link:hover {
    color: var(--attio-text);
    border-bottom-color: var(--attio-border-strong);
}

/* RE Projects report tabs: the markup hard-codes `bg-white` on the tab strip
   and the tab-content container, which forces a glaring white panel inside the
   dark theme. Re-skin those specific containers (and any sibling phase pills)
   to use Attio surface + border tokens. */
[data-bs-theme^="attio"] #reReportTabs,
[data-bs-theme^="attio"] #reReportTabsContent,
[data-bs-theme^="attio"] #campusTabContent {
    background-color: var(--attio-surface) !important;
}
[data-bs-theme^="attio"] #reReportTabsContent,
[data-bs-theme^="attio"] #campusTabContent {
    border-color: var(--attio-border) !important;
    color: var(--attio-text);
}
/* Legacy hard-coded light utilities must follow the dark theme — Bootstrap
   bg utilities are !important, so they need an !important counter. */
[data-bs-theme="attio-dark"] .bg-white,
[data-bs-theme="attio-dark"] .bg-light {
    background-color: var(--attio-surface) !important;
}
[data-bs-theme="attio-dark"] .text-dark,
[data-bs-theme="attio-dark"] .text-black {
    color: var(--attio-text) !important;
}
/* .btn-light is a white chip with near-black text — a light-mode leftover. */
[data-bs-theme="attio-dark"] .btn-light {
    background-color: var(--attio-hover-bg);
    border-color: var(--attio-border-strong);
    color: var(--attio-text);
}
[data-bs-theme^="attio"] #reReportTabs {
    border-bottom-color: var(--attio-border);
}
/* Phase sub-tab pills inside each tab pane */
[data-bs-theme^="attio"] #reReportTabsContent .nav-pills .nav-link {
    color: var(--attio-text-muted);
    background: transparent;
    border: 1px solid var(--attio-border);
}
[data-bs-theme^="attio"] #reReportTabsContent .nav-pills .nav-link.active {
    color: var(--attio-btn-primary-text);
    background: var(--attio-btn-primary-bg);
    border-color: var(--attio-btn-primary-bg);
}
[data-bs-theme^="attio"] #reReportTabsContent .nav-pills .nav-link:hover:not(.active) {
    color: var(--attio-text);
    border-color: var(--attio-border-strong);
}
/* Inner cards inside the panes — they use `border-0 shadow-sm` and inherit the
   container bg. In dark mode they need a slightly lifted surface so they don't
   melt into the page background. */
[data-bs-theme="attio-dark"] #reReportTabsContent .card {
    background-color: var(--attio-bg);
    border: 1px solid var(--attio-border) !important;
}
[data-bs-theme="attio-dark"] #reReportTabsContent .card-header {
    background-color: var(--attio-surface);
    border-bottom-color: var(--attio-border);
}
/* Tables in panes — Bootstrap `table-light` thead becomes light gray; map to surface */
[data-bs-theme="attio-dark"] #reReportTabsContent .table-light,
[data-bs-theme="attio-dark"] #reReportTabsContent .table-light > * {
    background-color: var(--attio-table-header-bg) !important;
    color: var(--attio-text-sub) !important;
    border-color: var(--attio-border) !important;
}

/* Dropdowns */
[data-bs-theme^="attio"] .dropdown-menu {
    background: var(--attio-surface);
    border: 1px solid var(--attio-border);
    border-radius: 8px;
    box-shadow: var(--attio-shadow-pop);
    color: var(--attio-text);
    font-size: 0.85rem;
}
[data-bs-theme^="attio"] .dropdown-item { color: var(--attio-text); }
[data-bs-theme^="attio"] .dropdown-item:hover { background: var(--attio-hover-bg); color: var(--attio-text); }
[data-bs-theme^="attio"] .dropdown-header {
    color: var(--attio-text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
[data-bs-theme^="attio"] .dropdown-divider { border-color: var(--attio-border); }

/* Modals */
[data-bs-theme^="attio"] .modal-content {
    background: var(--attio-surface);
    border: 1px solid var(--attio-border);
    color: var(--attio-text);
}
[data-bs-theme^="attio"] .modal-header,
[data-bs-theme^="attio"] .modal-footer { border-color: var(--attio-border); }
[data-bs-theme^="attio"] .modal-title { color: var(--attio-text); }

/* Offcanvas (superuser panel) — same treatment as modals */
[data-bs-theme^="attio"] .offcanvas {
    background: var(--attio-surface);
    color: var(--attio-text);
}
[data-bs-theme^="attio"] .offcanvas-header { border-color: var(--attio-border); }
[data-bs-theme^="attio"] .offcanvas-title { color: var(--attio-text); }
/* Bootstrap's close X is a black glyph — lift it on dark surfaces */
[data-bs-theme="attio-dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(1.6); }

/* List groups */
[data-bs-theme^="attio"] .list-group-item {
    background: var(--attio-surface);
    color: var(--attio-text);
    border-color: var(--attio-border);
}
[data-bs-theme^="attio"] .list-group-item-action:hover { background: var(--attio-hover-bg); }

/* Links */
[data-bs-theme^="attio"] a { color: var(--attio-accent); }
[data-bs-theme^="attio"] a:hover { color: var(--attio-accent-light); }
[data-bs-theme^="attio"] .breadcrumb a, [data-bs-theme^="attio"] .text-decoration-none { color: inherit; }

/* Alerts */
[data-bs-theme^="attio"] .alert-info    { background: var(--attio-badge-info-bg);    color: var(--attio-badge-info-text);    border-color: transparent; }
[data-bs-theme^="attio"] .alert-success { background: var(--attio-badge-success-bg); color: var(--attio-badge-success-text); border-color: transparent; }
[data-bs-theme^="attio"] .alert-warning { background: var(--attio-badge-warning-bg); color: var(--attio-badge-warning-text); border-color: transparent; }
[data-bs-theme^="attio"] .alert-danger  { background: var(--attio-badge-danger-bg);  color: var(--attio-badge-danger-text);  border-color: transparent; }

/* Bootstrap utility text colors */
[data-bs-theme^="attio"] .text-secondary { color: var(--attio-text-muted) !important; }
/* Bootstrap's amber (#FFC107, 1.63:1) and cyan (#0DCAF0, 1.96:1) are unreadable
   on a white surface — both read fine on the dark theme but fail in light. Use
   the theme's badge-text tokens, which are deep in light and pale in dark.
   (.text-success/.text-danger clear 4.5:1 as-is and are left alone.) Safe
   globally: no warning/info-colored text renders on the always-dark sidebar. */
[data-bs-theme="attio"] .text-warning { color: var(--attio-badge-warning-text) !important; }
[data-bs-theme="attio"] .text-info    { color: var(--attio-badge-info-text) !important; }
[data-bs-theme="attio"] .btn-outline-warning {
    color: var(--attio-badge-warning-text);
    border-color: var(--attio-badge-warning-text);
}
[data-bs-theme="attio"] .btn-outline-warning:hover,
[data-bs-theme="attio"] .btn-outline-warning:focus {
    background-color: var(--attio-badge-warning-text);
    border-color: var(--attio-badge-warning-text);
    color: #FFFFFF;
}
[data-bs-theme="attio"] .btn-outline-info {
    color: var(--attio-badge-info-text);
    border-color: var(--attio-badge-info-text);
}
[data-bs-theme="attio"] .btn-outline-info:hover,
[data-bs-theme="attio"] .btn-outline-info:focus {
    background-color: var(--attio-badge-info-text);
    border-color: var(--attio-badge-info-text);
    color: #FFFFFF;
}
[data-bs-theme^="attio"] code, [data-bs-theme^="attio"] pre { color: var(--attio-text); background: var(--attio-hover-bg); padding: 0.1rem 0.3rem; border-radius: 3px; }

/* Backdrop */
[data-bs-theme="attio-dark"] .modal-backdrop { --bs-backdrop-opacity: 0.7; }

/* ApexCharts export menu (hamburger → Download SVG/PNG/CSV). Apex hardcodes a
   white panel, and the global foreColor we set makes its labels light — white
   on white. Give the panel the surface tokens so the labels land on it. */
[data-bs-theme="attio-dark"] .apexcharts-menu {
    background: var(--attio-surface);
    border: 1px solid var(--attio-border);
    color: var(--attio-text);
}
[data-bs-theme="attio-dark"] .apexcharts-menu-item { color: var(--attio-text); }
/* Apex bakes the chart's foreColor into an inline fill on each label when the
   chart is built, so a theme toggle can't reach them (its instance registry is
   empty unless every chart passes chart.id). Override the inline value from
   here, which covers both first paint and toggling. Scoped to axis/legend/title
   so per-series data labels keep their own colors. */
[data-bs-theme^="attio"] .apexcharts-xaxis text,
[data-bs-theme^="attio"] .apexcharts-yaxis text,
[data-bs-theme^="attio"] .apexcharts-xaxis-title text,
[data-bs-theme^="attio"] .apexcharts-yaxis-title text,
[data-bs-theme^="attio"] .apexcharts-title-text,
[data-bs-theme^="attio"] .apexcharts-subtitle-text {
    fill: var(--attio-text-muted) !important;
}
[data-bs-theme^="attio"] .apexcharts-legend-text { color: var(--attio-text-muted) !important; }
[data-bs-theme="attio-dark"] .apexcharts-menu-item:hover { background: var(--attio-hover-bg); }
[data-bs-theme="attio-dark"] .apexcharts-tooltip,
[data-bs-theme="attio-dark"] .apexcharts-tooltip-title {
    background: var(--attio-surface) !important;
    border-color: var(--attio-border) !important;
    color: var(--attio-text);
}

/* Attio overrides for page-specific inline styles that hardcode light colors */
[data-bs-theme^="attio"] .prop-quick-links .btn {
    background-color: var(--attio-surface) !important;
    border: 1px solid var(--attio-border) !important;
    color: var(--attio-text) !important;
}
[data-bs-theme^="attio"] .prop-quick-links .btn:hover {
    background-color: var(--attio-hover-bg) !important;
    border-color: var(--attio-border-strong) !important;
}
[data-bs-theme^="attio"] .prop-quick-links .btn i {
    color: var(--attio-text-muted);
}

/* Attio Light: subtle warm-tan tint on the page bg + cool-blue tint on sidebar.
   Kept very low-saturation to stay in the Attio "clean monochrome" feel. */
[data-bs-theme="attio"] body {
    background: linear-gradient(180deg, #FAFAFA 0%, #FBF5EB 100%);
    background-attachment: fixed;
}
[data-bs-theme="attio"] .hw-sidebar {
    background: linear-gradient(180deg, #F7F7F8 0%, #EBEFF7 100%);
}

/* Attio Light: deep-ocean sidebar with a slow wave gradient.
   Only applies to "attio" (light) — attio-dark already has its own dark sidebar.
   The flyout panels stay on the surface palette (still light) for readability. */
[data-bs-theme="attio"] .hw-sidebar {
    background: linear-gradient(180deg,
        #0A1F2C 0%,
        #0C2E3D 25%,
        #0F4053 50%,
        #0C2E3D 75%,
        #0A1F2C 100%);
    background-size: 100% 300%;
    background-position: 0% 0%;
    animation: oceanWave 18s ease-in-out infinite;
    border-right: 1px solid #061520;
}
@keyframes oceanWave {
    0%   { background-position: 0% 0%; }
    50%  { background-position: 0% 100%; }
    100% { background-position: 0% 0%; }
}
@media (prefers-reduced-motion: reduce) {
    [data-bs-theme="attio"] .hw-sidebar { animation: none; background-position: 0% 50%; }
}

/* Re-color sidebar text + active-state for the dark-on-light contrast */
[data-bs-theme="attio"] .hw-sidebar .sidebar-logo .logo-text { color: #FFFFFF; }
[data-bs-theme="attio"] .hw-sidebar .sidebar-link {
    color: rgba(255, 255, 255, 0.7);
}
[data-bs-theme="attio"] .hw-sidebar .sidebar-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
}
[data-bs-theme="attio"] .hw-sidebar .sidebar-link.active {
    background: rgba(244, 169, 66, 0.15);
    color: #F4A942;
    border-left-color: #F4A942;
}
[data-bs-theme="attio"] .hw-sidebar .sidebar-link.active i { color: #F4A942; }
/* Flyout panels float over the sidebar — keep them light for legibility */
[data-bs-theme="attio"] .hw-sidebar .sidebar-flyout {
    background: var(--attio-surface);
    border: 1px solid var(--attio-border);
}
[data-bs-theme="attio"] .hw-sidebar .sidebar-flyout .sidebar-link { color: var(--attio-text-sub); }
[data-bs-theme="attio"] .hw-sidebar .sidebar-flyout .sidebar-link:hover { background: var(--attio-hover-bg); color: var(--attio-text); }
[data-bs-theme="attio"] .hw-sidebar .sidebar-flyout-title { color: var(--attio-text-muted); }
/* Pinned divider visible on dark */
[data-bs-theme="attio"] .hw-sidebar .sidebar-pinned-divider { background: rgba(255, 255, 255, 0.12); }

/* ═══ Property tags — colored grouping badges (Tools → Tags) ═══
   Color keys mirror properties.Tag.COLOR_CHOICES; each renders as a pastel
   pill that reads on light and dark surfaces alike. */
.prop-tag-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid transparent;
    white-space: nowrap;
}
.prop-tag-badge.tag-gray   { background: #f1f3f5; color: #495057; border-color: #dee2e6; }
.prop-tag-badge.tag-blue   { background: #e7f1ff; color: #0b5ed7; border-color: #c6dbfa; }
.prop-tag-badge.tag-green  { background: #e6f4ea; color: #1e7e34; border-color: #c3e6cb; }
.prop-tag-badge.tag-teal   { background: #e0f5f1; color: #0f766e; border-color: #b8e8e0; }
.prop-tag-badge.tag-yellow { background: #fff8e1; color: #8a6d00; border-color: #f5e6a8; }
.prop-tag-badge.tag-orange { background: #fff1e6; color: #c2410c; border-color: #fbd6b8; }
.prop-tag-badge.tag-red    { background: #fdecec; color: #b02a37; border-color: #f5c2c7; }
.prop-tag-badge.tag-purple { background: #f1ebfb; color: #6f42c1; border-color: #ddcdf5; }
.prop-tag-badge.tag-pink   { background: #fdeaf3; color: #c2255c; border-color: #f8c5dd; }

/* Swatches in the tag form: the badge itself is the radio label. */
.tag-swatch { cursor: pointer; }
.btn-check:checked + .tag-swatch {
    outline: 2px solid var(--attio-accent, #C2410C);
    outline-offset: 1px;
}

/* Toggleable tag badges (Map filter): dim unselected, full color when on. */
a.prop-tag-badge { text-decoration: none; }
a.prop-tag-badge.tag-off { opacity: 0.45; }
a.prop-tag-badge.tag-off:hover { opacity: 0.8; }

/* ═══ Filter panel — compact dropdown replacing the offcanvas filter drawers ═══
   Two-pane dropdown from the Filter button (BuildingOS-style): search on top,
   category rail on the left, the active category's options on the right, and
   a count + Clear all + Apply footer. Wired by static/js/filter_panel.js. */
.filter-panel {
    width: min(560px, calc(100vw - 24px));
    padding: 0;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}
.filter-panel .fp-search-wrap { padding: 10px 12px; }
/* Theme through --attio-* vars: the custom attio-dark theme doesn't redefine
   Bootstrap's --bs-* vars, which would leave these light in dark mode. */
.filter-panel .fp-body {
    display: flex;
    height: 340px;
    border-top: 1px solid var(--attio-border, #e5e7eb);
    border-bottom: 1px solid var(--attio-border, #e5e7eb);
}
.filter-panel .fp-rail {
    flex: 0 0 42%;
    max-width: 42%;
    overflow-y: auto;
    background: var(--attio-table-header-bg, #f6f8fa);
    border-right: 1px solid var(--attio-border, #e5e7eb);
    padding: 6px 0;
}
.filter-panel .fp-cat {
    display: block;
    width: 100%;
    border: 0;
    background: none;
    text-align: left;
    padding: 8px 14px;
    font-size: 0.9rem;
    color: var(--attio-text, #212529);
    cursor: pointer;
}
.filter-panel .fp-cat:hover { background: var(--attio-hover-bg, #eceef1); }
.filter-panel .fp-cat.active,
.filter-panel .fp-cat.active:hover {
    background: var(--bs-primary, #5b9bd5);
    color: #fff;
}
.filter-panel .fp-panes {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 14px;
}
.filter-panel .fp-pane-title {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}
.filter-panel .fp-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 2px;
    margin: 0;
    cursor: pointer;
    font-size: 0.9rem;
}
.filter-panel .fp-option .form-check-input {
    margin: 0;
    flex: 0 0 auto;
}
.filter-panel .fp-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
}
.filter-panel .fp-count-label {
    color: var(--attio-text-muted, #6c757d);
    font-size: 0.88rem;
    margin-right: auto;
}

/* ==== Project financial case (templates/projects/detail.html) ====
   Layout/hierarchy from the design handoff, colors mapped onto the attio
   token system. Everything — verdict band included — uses the shared card
   surface (Harry 2026-08-12: no ink-dark boxes). */
[data-bs-theme="attio"] {
    --pfc-good: #047857;
    --pfc-bad: #B91C1C;
    --pfc-warn-bg: #FFFBEB;
    --pfc-warn-border: #FDE68A;
    --pfc-warn-text: #92400E;
    --pfc-warn-dot: #D97706;
}
[data-bs-theme="attio-dark"] {
    --pfc-good: #34D399;
    --pfc-bad: #F87171;
    --pfc-warn-bg: rgba(245, 158, 11, 0.12);
    --pfc-warn-border: rgba(245, 158, 11, 0.35);
    --pfc-warn-text: #FCD34D;
    --pfc-warn-dot: #F59E0B;
}

/* -- Title-band pills (cloned into .header-page-title with the h1) -- */
.pfc-title-pills { white-space: nowrap; }
.header-page-title .pfc-pill { vertical-align: middle; margin-left: 6px; }
.pfc-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 3px 10px;
    background: var(--attio-badge-secondary-bg);
    color: var(--attio-badge-secondary-text);
}
.pfc-pill--proposed { background: var(--attio-badge-info-bg); color: var(--attio-badge-info-text); }
.pfc-pill--planned { background: var(--attio-badge-secondary-bg); color: var(--attio-badge-secondary-text); }
.pfc-pill--active { background: var(--attio-badge-info-bg); color: var(--attio-badge-info-text); }
.pfc-pill--completed { background: var(--attio-badge-success-bg); color: var(--attio-badge-success-text); }
.pfc-pill--on_hold { background: var(--attio-badge-warning-bg); color: var(--attio-badge-warning-text); }
.pfc-pill--cancelled,
.pfc-pill--archived { background: var(--attio-badge-secondary-bg); color: var(--attio-badge-secondary-text); }
.pfc-pill--hsuccess { background: var(--attio-badge-success-bg); color: var(--attio-badge-success-text); }
.pfc-pill--hwarning { background: var(--attio-badge-warning-bg); color: var(--attio-badge-warning-text); }
.pfc-pill--hdanger { background: var(--attio-badge-danger-bg); color: var(--attio-badge-danger-text); }
.pfc-pill--hinfo { background: var(--attio-badge-info-bg); color: var(--attio-badge-info-text); }
.pfc-pill--hsecondary { background: var(--attio-badge-secondary-bg); color: var(--attio-badge-secondary-text); }
.pfc-alert {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 500;
    background: var(--pfc-warn-bg);
    border: 1px solid var(--pfc-warn-border);
    color: var(--pfc-warn-text);
    border-radius: 10px;
    padding: 8px 14px;
}
.pfc-alert-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pfc-warn-dot);
    flex-shrink: 0;
}
.pfc-alert--danger .pfc-alert-dot { background: var(--pfc-bad); }
.pfc-alert--inline {
    display: flex;
    font-size: 0.78rem;
    padding: 7px 10px;
    margin-top: 12px;
}

/* -- Verdict band (same surface as every other card) -- */
.pfc-band {
    position: relative;
    background: var(--attio-surface);
    border: 1px solid var(--attio-border);
    border-radius: 14px;
    overflow: hidden;
}
.pfc-caret {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    background: transparent;
    border: 0;
    color: var(--attio-text-muted);
    padding: 6px 8px;
    border-radius: 8px;
    line-height: 1;
}
.pfc-caret:hover { color: var(--attio-text); background: var(--attio-hover-bg); }
.pfc-caret i { display: inline-block; transition: transform 0.3s ease; }
.pfc-collapsed .pfc-caret i { transform: rotate(180deg); }
/* Padding lives on the collapsing element so Bootstrap's height animation
   sweeps it too — the band itself stays padding-free. */
.pfc-band-top { padding: 24px 28px 6px; }
.pfc-band-eyebrow-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding-right: 36px;
}
.pfc-band-eyebrow {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--attio-text-muted);
    white-space: nowrap;
}
.pfc-verdict {
    font-size: clamp(1.15rem, 2.2vw, 1.75rem);
    font-weight: 400;
    line-height: 1.32;
    color: var(--attio-text);
    max-width: 1000px;
    text-wrap: pretty;
    margin-bottom: 18px;
}
.pfc-verdict strong { font-weight: 600; }
.pfc-verdict--dim, .pfc-verdict-dim { color: var(--attio-text-muted); }
.pfc-band-good { color: var(--pfc-good); }
.pfc-band-bad { color: var(--pfc-bad); }
.pfc-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Cells pad 16px; this brings the outer edges to the band-top's 28px. */
    padding: 0 12px;
}
.pfc-metric {
    background: var(--attio-surface);
    padding: 16px 16px 20px;
    min-width: 0;
}
.pfc-metric-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--attio-text-muted);
    white-space: nowrap;
    margin-bottom: 8px;
}
.pfc-metric-value {
    font-size: clamp(1.4rem, 2.4vw, 2.1rem);
    font-weight: 600;
    color: var(--attio-text);
    white-space: nowrap;
    margin-bottom: 4px;
}
.pfc-metric-sub {
    font-size: 0.75rem;
    color: var(--attio-text-muted);
}
.pfc-num {
    font-family: var(--bs-font-monospace);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* -- Body grid + cards -- */
.pfc-body {
    display: grid;
    grid-template-columns: minmax(0, 2.05fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.pfc-col-main, .pfc-col-rail {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.pfc-card {
    background: var(--attio-surface);
    border: 1px solid var(--attio-border);
    border-radius: 14px;
    padding: 20px 24px;
}
.pfc-h2 {
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--attio-text);
    margin-bottom: 2px;
}
.pfc-h2u {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--attio-text);
    margin-bottom: 14px;
}
.pfc-sub { font-size: 0.82rem; color: var(--attio-text-muted); }
.pfc-dim { color: var(--attio-text-muted); }
.pfc-goodtext { color: var(--pfc-good); }
.pfc-badtext { color: var(--pfc-bad); }
.pfc-warntext { color: var(--attio-badge-warning-text); }
.pfc-foot {
    font-size: 0.78rem;
    color: var(--attio-text-muted);
    margin-top: 12px;
}
.pfc-foot--rule { border-top: 1px solid var(--attio-border); padding-top: 12px; }
.pfc-esttag, .pfc-paidtag {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--attio-text-muted);
    border: 1px solid var(--attio-border);
    border-radius: 4px;
    padding: 0 4px;
    vertical-align: 1px;
}
.pfc-paidtag { color: var(--pfc-good); }

/* -- Chart card -- */
.pfc-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-bottom: 6px;
}
.pfc-chart-side { text-align: right; }
.pfc-legend {
    font-size: 0.78rem;
    color: var(--attio-text-muted);
    white-space: nowrap;
}
.pfc-sw {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 3px;
    margin: 0 5px -1px 10px;
}
.pfc-sw--bad { background: var(--pfc-bad); }
.pfc-sw--good { background: var(--pfc-good); }
.pfc-chart-callout { font-size: 0.82rem; font-weight: 600; margin-top: 6px; }
.pfc-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--attio-border);
    border-top: 1px solid var(--attio-border);
    margin-top: 6px;
}
.pfc-strip-cell {
    background: var(--attio-surface);
    padding: 14px 16px 4px;
    min-width: 0;
}
.pfc-strip-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--attio-text-muted);
    white-space: nowrap;
    margin-bottom: 6px;
}
.pfc-strip-value { font-size: 1.3rem; font-weight: 600; color: var(--attio-text); }
.pfc-strip-note { font-size: 0.75rem; color: var(--attio-text-muted); }

/* -- Key facts -- */
.pfc-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px 32px;
}
.pfc-field-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--attio-text-muted);
    margin-bottom: 3px;
}
.pfc-field-value { font-size: 0.95rem; font-weight: 500; color: var(--attio-text); }

/* -- Line lists (cost breakdown, assumptions) -- */
.pfc-lines { display: flex; flex-direction: column; gap: 10px; }
.pfc-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 0.88rem;
    color: var(--attio-text-sub);
}
.pfc-line .pfc-num { font-size: 0.92rem; font-weight: 500; color: var(--attio-text); }
.pfc-line--dim, .pfc-line--dim .pfc-num { color: var(--attio-text-muted); }
.pfc-line--good, .pfc-line--good .pfc-num { color: var(--pfc-good); }
.pfc-line--net {
    border-top: 1px solid var(--attio-border);
    padding-top: 12px;
    margin-top: 4px;
    font-weight: 600;
    color: var(--attio-text);
}
.pfc-line--net .pfc-num { font-weight: 700; }

/* -- Inline assumption inputs -- */
.pfc-inline-input {
    font-family: var(--bs-font-monospace);
    font-variant-numeric: tabular-nums;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--attio-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 1px 6px;
    width: 5.2em;
    text-align: right;
}
.pfc-inline-input--short { width: 4em; }
.pfc-inline-input--wide { width: 6.5em; }
.pfc-inline-input:hover { border-color: var(--attio-border); }
.pfc-inline-input:focus {
    outline: none;
    border-color: var(--attio-border-strong);
    background: var(--attio-input-bg);
}
.pfc-inline-input::placeholder { color: var(--attio-text-muted); }
.pfc-unit { color: var(--attio-text-muted); font-size: 0.8rem; margin-left: 4px; }
.pfc-unit--pre { margin-left: 0; margin-right: 2px; }
.pfc-save { margin-top: 14px; }
.pfc-prog { display: flex; flex-direction: column; gap: 8px; }
.pfc-prog-row { font-size: 0.82rem; }

/* -- Delivery strip -- */
.pfc-delivery-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin-bottom: 12px;
}
.pfc-delivery-head .pfc-h2u { margin-bottom: 0; }
.pfc-track {
    position: relative;
    height: 8px;
    border-radius: 4px;
    background: var(--attio-hover-bg);
    margin: 6px 0 12px;
}
.pfc-track-fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 4px;
    background: var(--hw-primary);
    max-width: 100%;
}
.pfc-track-today {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: var(--attio-text);
    transform: translateX(-50%);
}
.pfc-delivery-foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 20px;
    font-size: 0.85rem;
    color: var(--attio-text-sub);
}

/* -- Responsive: stack the body, 2×2 the metric grid -- */
@media (max-width: 991.98px) {
    .pfc-body { grid-template-columns: 1fr; }
    .pfc-metrics { grid-template-columns: 1fr 1fr; padding: 0 4px; }
    .pfc-band-top { padding: 20px 20px 6px; }
    .pfc-chart-side { text-align: left; }
}
@media (max-width: 575.98px) {
    .pfc-metric-value { font-size: 1.35rem; }
    .pfc-strip { grid-template-columns: 1fr; }
}