/* ==========================================================================
   Grand Holding Design System
   A clean, professional design system for land management
   ========================================================================== */

/* ---------- CSS Custom Properties (Design Tokens) ---------- */
:root {
    /* Brand Colors */
    --gh-primary: #2f63a6;
    --gh-primary-hover: #27538c;
    --gh-primary-light: #eaf0f8;
    --gh-primary-50: #f1f5fa;

    /* Neutrals */
    --gh-white: #ffffff;
    --gh-gray-50: #f7f9fc;
    --gh-gray-100: #eef2f7;
    --gh-gray-200: #e1e7ef;
    --gh-gray-300: #c9d3e0;
    --gh-gray-400: #94a1b5;
    --gh-gray-500: #6b7891;
    --gh-gray-600: #4d5b74;
    --gh-gray-700: #374559;
    --gh-gray-800: #223042;
    --gh-gray-900: #16202e;

    /* Semantic Colors */
    --gh-success: #059669;
    --gh-success-light: #ecfdf5;
    --gh-success-50: #ecfdf5;
    --gh-success-700: #047857;
    --gh-warning: #d97706;
    --gh-warning-light: #fffbeb;
    --gh-warning-50: #fffbeb;
    --gh-danger: #dc2626;
    --gh-danger-light: #fef2f2;
    --gh-danger-50: #fef2f2;
    --gh-info: #0891b2;
    --gh-info-light: #ecfeff;

    /* Accent Colors (for special highlights) */
    --gh-accent-50: #f1f5fa;
    --gh-accent-600: #2f63a6;
    --gh-accent-700: #27538c;

    /* Person Colors (refined for accessibility) */
    --gh-person-ple: #d1fae5;
    --gh-person-ple-border: #6ee7b7;
    --gh-person-poppy: #fce7f3;
    --gh-person-poppy-border: #f9a8d4;
    --gh-person-pik: #dbeafe;
    --gh-person-pik-border: #93c5fd;
    --gh-person-pep: #fef9c3;
    --gh-person-pep-border: #fde047;
    --gh-person-o: #e0e7ff;
    --gh-person-o-border: #a5b4fc;
    --gh-person-multiple: #fff7ed;
    --gh-person-multiple-border: #fdba74;
    --gh-person-other: #f1f5f9;
    --gh-person-other-border: #cbd5e1;

    /* Typography — Thai renders in each platform's native UI font (Thonburi
       on Apple, Leelawadee UI on Windows, Noto Sans Thai on Android).
       'Sukhumvit Set' sat in this stack 18-19 Jul 2026 and made Thai
       thin/loopless on Apple devices; Apple themselves trialed it as the iOS
       system font and reverted to Thonburi. Looped reads better — don't re-add. */
    --gh-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Thai', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --gh-font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;

    --gh-text-xs: 0.75rem;     /* 12px */
    --gh-text-sm: 0.8125rem;   /* 13px */
    --gh-text-base: 0.9375rem; /* 15px */
    --gh-text-md: 1rem;        /* 16px */
    --gh-text-lg: 1.125rem;    /* 18px */
    --gh-text-xl: 1.25rem;     /* 20px */
    --gh-text-2xl: 1.5rem;     /* 24px */
    --gh-text-3xl: 1.875rem;   /* 30px */

    /* Spacing Scale */
    --gh-space-1: 0.25rem;  /* 4px */
    --gh-space-2: 0.5rem;   /* 8px */
    --gh-space-3: 0.75rem;  /* 12px */
    --gh-space-4: 1rem;     /* 16px */
    --gh-space-5: 1.25rem;  /* 20px */
    --gh-space-6: 1.5rem;   /* 24px */
    --gh-space-8: 2rem;     /* 32px */
    --gh-space-10: 2.5rem;  /* 40px */
    --gh-space-12: 3rem;    /* 48px */

    /* Borders & Radius */
    --gh-radius-sm: 0.375rem;  /* 6px */
    --gh-radius-md: 0.5rem;    /* 8px */
    --gh-radius-lg: 0.75rem;   /* 12px */
    --gh-radius-xl: 1rem;      /* 16px */
    --gh-radius-full: 9999px;

    --gh-border-color: #e1e7ef;
    --gh-border-color-dark: #c9d3e0;

    /* Shadows */
    --gh-shadow-sm: 0 1px 2px 0 rgba(62, 48, 32, 0.06);
    --gh-shadow-md: 0 4px 6px -1px rgba(62, 48, 32, 0.08), 0 2px 4px -2px rgba(62, 48, 32, 0.05);
    --gh-shadow-lg: 0 10px 15px -3px rgba(62, 48, 32, 0.09), 0 4px 6px -4px rgba(62, 48, 32, 0.04);
    --gh-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);

    /* Transitions */
    --gh-transition-fast: 150ms ease;
    --gh-transition-base: 200ms ease;
    --gh-transition-slow: 300ms ease;

    /* Semantic Text Colors */
    --gh-text: var(--gh-gray-900);
    --gh-text-color: var(--gh-gray-900);
    --gh-text-secondary: var(--gh-gray-500);

    /* Semantic Border */
    --gh-border: var(--gh-border-color);

    /* Layout */
    --gh-navbar-height: 60px;
    --gh-sidebar-width: 280px;

    /* Aliases — many templates reference these names; without them the
       hardcoded fallbacks (cold slate) rendered. Map them onto the warm ramp. */
    --gh-bg: var(--gh-white);
    --gh-bg-subtle: var(--gh-gray-50);
    --gh-surface: var(--gh-white);
    --gh-surface-alt: var(--gh-gray-50);
    --gh-muted: var(--gh-gray-500);
    --gh-text-muted: var(--gh-gray-500);
    --gh-border-light: var(--gh-gray-100);
    --gh-border-strong: var(--gh-gray-300);
    --gh-radius: var(--gh-radius-md);
}


/* ==========================================================================
   Base & Reset
   ========================================================================== */
body {
    font-family: var(--gh-font-family);
    font-size: var(--gh-text-base);
    color: var(--gh-gray-800);
    background-color: var(--gh-gray-50);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Navbar
   ========================================================================== */
.gh-navbar {
    min-height: var(--gh-navbar-height);
    background: var(--gh-gray-900) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--gh-shadow-md);
    padding: 0 var(--gh-space-4);
    /* iOS PWA standalone + viewport-fit=cover: the page extends under the
       status bar / Dynamic Island — push the nav row below it (env() is 0
       in normal browsers, so this is a no-op outside the installed PWA) */
    padding-top: env(safe-area-inset-top);
    z-index: 1040;
}

.gh-navbar .navbar-brand {
    font-weight: 700;
    font-size: var(--gh-text-lg);
    letter-spacing: -0.02em;
    color: var(--gh-white) !important;
    display: flex;
    align-items: center;
    gap: var(--gh-space-2);
}

.gh-navbar .navbar-brand .brand-logo {
    width: 32px;
    height: 32px;
    border-radius: var(--gh-radius-sm);
    display: block;
    flex: 0 0 auto;
    /* faint ring so the navy logo tile reads against the navy navbar */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10);
}

.gh-navbar .nav-link {
    font-size: var(--gh-text-sm);
    font-weight: 500;
    color: var(--gh-gray-400) !important;
    padding: var(--gh-space-2) var(--gh-space-3) !important;
    border-radius: var(--gh-radius-sm);
    transition: all var(--gh-transition-fast);
    white-space: nowrap;
}

.gh-navbar .nav-link:hover,
.gh-navbar .nav-link:focus {
    color: var(--gh-white) !important;
    background-color: rgba(255, 255, 255, 0.08);
}

.gh-navbar .nav-link.active {
    color: var(--gh-white) !important;
    background-color: rgba(255, 255, 255, 0.12);
}

/* Hamburger menu button (navbar-toggler) */
.gh-navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.2);
    padding: var(--gh-space-2);
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Bootstrap hides the toggler ≥lg, but the display:flex above (same
   specificity, later in the cascade) was resurrecting it — a dead ☰ sat
   next to the fully expanded desktop menu. Re-hide it. */
@media (min-width: 992px) {
    .gh-navbar .navbar-toggler { display: none; }
}

.gh-navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
    outline: none;
}

.gh-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    width: 24px;
    height: 24px;
}

/* Navbar Dropdown (Tools menu) */
.gh-navbar .dropdown-menu-dark {
    background: var(--gh-gray-800);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--gh-radius-md);
    box-shadow: var(--gh-shadow-lg);
    padding: var(--gh-space-1) 0;
    min-width: 200px;
}

.gh-navbar .dropdown-menu-dark .dropdown-item {
    color: var(--gh-gray-300);
    font-size: var(--gh-text-sm);
    font-weight: 500;
    padding: var(--gh-space-2) var(--gh-space-4);
    transition: all var(--gh-transition-fast);
}

.gh-navbar .dropdown-menu-dark .dropdown-item:hover,
.gh-navbar .dropdown-menu-dark .dropdown-item:focus {
    color: var(--gh-white);
    background-color: rgba(255, 255, 255, 0.1);
}

.gh-navbar .dropdown-menu-dark .dropdown-item.active {
    color: var(--gh-white);
    background-color: var(--gh-primary);
}

.gh-navbar .dropdown-menu-dark .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.08);
    margin: var(--gh-space-1) 0;
}

/* Bootstrap's .text-muted is `color: var(--bs-secondary-color) !important`, which
   resolves to near-black — invisible on a dark dropdown. The Thai subtitles are
   the thing that makes Rent Reports findable next to สมุด O, so they have to be
   readable. !important because we are overriding a Bootstrap utility. */
.gh-navbar .dropdown-menu-dark .dropdown-item .text-muted {
    color: var(--gh-gray-400) !important;
}
.gh-navbar .dropdown-menu-dark .dropdown-item:hover .text-muted,
.gh-navbar .dropdown-menu-dark .dropdown-item:focus .text-muted {
    color: var(--gh-gray-300) !important;
}

/* ── Mega panels (desktop only) ─────────────────────────────────────────────
   Land Usage and Tools had grown to 10 and 13 items in a single column ~400px
   tall, read top to bottom with dividers doing the work headings should. On a
   wide screen the fix is horizontal: same items, same Thai subtitles, laid out
   in named columns.

   Scoped to ≥992px ON PURPOSE. Below that the desktop <ul> is display:none and
   the phone drawer takes over, and the drawer reuses .dropdown-menu /
   .dropdown-item — which browser_check_mobile.js walks to prove Tools → Data
   Quality is reachable. A mega grid applied at phone width would break both. */
@media (min-width: 992px) {
    .gh-navbar .dropdown-menu-dark.gh-mega {
        display: none;                       /* Bootstrap toggles .show */
        padding: var(--gh-space-4);
        gap: var(--gh-space-3) var(--gh-space-5);
        /* min must stay under (44rem − padding − gaps) ÷ 4 = 9.5rem, or the
           four-column panel overflows its own fixed width. */
        grid-template-columns: repeat(var(--gh-mega-cols, 3), minmax(8rem, 1fr));
        /* One width for every mega panel, whatever its column count (Boss
           2026-08-17: Land Usage's two columns made it half the width of Tools'
           four, and two panels of the same kind that open next to each other
           should be the same object). Columns divide this width instead of
           shrink-to-fitting their own text. */
        width: min(44rem, calc(100vw - var(--gh-space-6)));
        max-width: calc(100vw - var(--gh-space-6));
    }
    .gh-navbar .dropdown-menu-dark.gh-mega.show { display: grid; }
    .gh-mega--4 { --gh-mega-cols: 4; }
    .gh-mega--3 { --gh-mega-cols: 3; }
    .gh-mega--2 { --gh-mega-cols: 2; }

    .gh-mega-col { display: flex; flex-direction: column; min-width: 0; }
    /* Second heading inside a column needs air above it; the first must not. */
    .gh-mega-col .gh-mega-h + * { margin-top: 0; }
    .gh-mega-col .dropdown-item + .gh-mega-h { margin-top: var(--gh-space-3); }

    .gh-mega-h {
        font-size: var(--gh-text-xs, 0.72rem);
        font-weight: 700;
        letter-spacing: 0.11em;
        text-transform: uppercase;
        color: var(--gh-teal-300, #7FB8A8);
        padding: 0 var(--gh-space-2) var(--gh-space-1);
        margin-bottom: var(--gh-space-1);
        border-bottom: 1px solid rgba(127, 184, 168, 0.22);
    }
    /* Dev surfaces read as a different kind of thing, so they look like one. */
    .gh-mega-h--dev { color: var(--gh-gray-400); border-bottom-color: rgba(255,255,255,0.1); }
    .gh-mega-col--dev .dropdown-item { color: var(--gh-gray-400); }

    .gh-navbar .dropdown-menu-dark.gh-mega .dropdown-item {
        padding: var(--gh-space-2);
        border-radius: var(--gh-radius-sm, 4px);
        white-space: normal;                 /* subtitles wrap instead of clipping */
        line-height: 1.35;
    }
    /* The Thai subtitle is the thing that makes Rent Reports findable next to
       สมุด O — give it its own line rather than letting it push the name wide. */
    .gh-navbar .dropdown-menu-dark.gh-mega .dropdown-item .text-muted {
        display: block;
        margin-left: 1.55rem;                /* clears the icon */
    }
    .gh-mega-note {
        margin-top: var(--gh-space-3);
        padding: var(--gh-space-2) var(--gh-space-2) 0;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        font-size: var(--gh-text-xs, 0.72rem);
        color: var(--gh-gray-500);
    }
}

/* Who am I / sign out. The app had no user indicator and no logout link at all
   — not in the navbar, not in Settings, not in any template — which matters most
   on the shared book_keeper login and the test/test account used to QA
   permission gates. */
.gh-whoami .dropdown-toggle {
    display: flex; align-items: center; gap: var(--gh-space-2);
    background: none; border: 0; padding: var(--gh-space-1) var(--gh-space-2);
    color: rgba(255, 255, 255, 0.8); font-size: var(--gh-text-sm);
    border-radius: var(--gh-radius-md);
}
.gh-whoami .dropdown-toggle:hover { color: var(--gh-white); background: rgba(255,255,255,0.1); }
.gh-whoami-avatar {
    width: 1.6rem; height: 1.6rem; flex: none; border-radius: 50%;
    background: var(--gh-primary); color: var(--gh-white);
    display: grid; place-items: center;
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
}
.gh-whoami-role {
    font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase;
    background: rgba(255, 255, 255, 0.13); border-radius: 3px;
    padding: 0.05rem 0.35rem; color: rgba(255, 255, 255, 0.85);
}

/* Mobile navbar */
@media (max-width: 991.98px) {
    .gh-navbar .navbar-collapse {
        background: var(--gh-gray-900);
        padding: var(--gh-space-3);
        margin: 0 calc(-1 * var(--gh-space-4));
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        margin-top: var(--gh-space-2);
        /* Full menu + an open Tools/Land Usage dropdown is taller than a phone
           screen; the navbar is sticky, so without its own scroll the bottom
           items (e.g. Tools → Data Quality) are unreachable */
        max-height: calc(100vh - var(--gh-navbar-height) - env(safe-area-inset-top));
        max-height: calc(100dvh - var(--gh-navbar-height) - env(safe-area-inset-top));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding-bottom: calc(var(--gh-space-3) + env(safe-area-inset-bottom));
    }

    .gh-navbar .nav-link {
        padding: var(--gh-space-3) var(--gh-space-4) !important;
        font-size: var(--gh-text-base);
    }

    /* ≥44px touch targets for dropdown entries (Apple HIG minimum) */
    .gh-navbar .dropdown-menu-dark .dropdown-item {
        padding: var(--gh-space-3) var(--gh-space-4);
        min-height: 44px;
    }
}


/* ==========================================================================
   Page Layout
   ========================================================================== */
.gh-page {
    padding: var(--gh-space-4) var(--gh-space-4) var(--gh-space-8);
    max-width: 100%;
}

.gh-page-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--gh-space-3);
    margin-bottom: var(--gh-space-6);
}

.gh-page-title {
    font-size: var(--gh-text-2xl);
    font-weight: 700;
    color: var(--gh-gray-900);
    margin: 0;
    letter-spacing: -0.02em;
}

.gh-page-subtitle {
    font-size: var(--gh-text-base);
    color: var(--gh-gray-500);
    margin: var(--gh-space-1) 0 0;
    font-weight: 400;
}

@media (min-width: 768px) {
    .gh-page {
        padding: var(--gh-space-6) var(--gh-space-8) var(--gh-space-10);
    }
    .gh-page-title {
        font-size: var(--gh-text-3xl);
    }
}

/* Mobile optimizations for page layout */
@media (max-width: 767px) {
    .gh-page {
        padding: var(--gh-space-3) var(--gh-space-3) var(--gh-space-6);
    }

    .gh-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gh-space-3);
        margin-bottom: var(--gh-space-4);
    }

    .gh-page-title {
        font-size: var(--gh-text-xl);
        line-height: 1.3;
    }

    .gh-page-subtitle {
        font-size: var(--gh-text-sm);
        margin-top: 4px;
    }

    /* Make action buttons full width on mobile */
    .gh-page-header .d-flex {
        width: 100%;
    }

    /* `flex: 1` is `flex: 1 1 0%` — basis ZERO, so these buttons sized purely by
       dividing the free space and ignored how wide their own label is. Three
       items in one header row gave "NPV Calculator" a 100px box for 109px of
       text (/leads/), and because .gh-btn is `white-space: nowrap` the label
       painted OUTSIDE the button, over the control beside it. Same shape clipped
       "Add Tenant" on /rentals/. `flex-basis: auto` keeps the author's intent —
       buttons still grow to fill the row — while refusing to start below the
       label's own width. Measured 2026-08-24. */
    .gh-page-header .d-flex .gh-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* Breadcrumbs */
.gh-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--gh-space-2);
    font-size: var(--gh-text-sm);
    color: var(--gh-gray-500);
    margin-bottom: var(--gh-space-4);
    flex-wrap: wrap;
}

.gh-breadcrumb a {
    color: var(--gh-primary);
    text-decoration: none;
    transition: color var(--gh-transition-fast);
}

.gh-breadcrumb a:hover {
    color: var(--gh-primary-hover);
    text-decoration: underline;
}

.gh-breadcrumb .separator {
    color: var(--gh-gray-300);
    font-size: var(--gh-text-xs);
}

/* Mobile breadcrumb optimizations */
@media (max-width: 767px) {
    .gh-breadcrumb {
        font-size: var(--gh-text-xs);
        margin-bottom: var(--gh-space-3);
        gap: var(--gh-space-1);
    }

    .gh-breadcrumb .separator {
        font-size: 10px;
    }
}


/* ==========================================================================
   Cards (Unified)
   ========================================================================== */
.gh-card {
    background: var(--gh-white);
    border: 1px solid var(--gh-border-color);
    border-radius: var(--gh-radius-lg);
    box-shadow: var(--gh-shadow-sm);
    transition: box-shadow var(--gh-transition-base);
    overflow: hidden;
}

.gh-card:hover {
    box-shadow: var(--gh-shadow-md);
}

/* Clickable card — entire card navigates on click */
.gh-card-clickable {
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.gh-card-clickable:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
    transform: translateY(-1px);
}
.gh-card-clickable:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Alert card variant for overdue payments/urgent items */


.gh-card-link {
    display: block;
    padding: var(--gh-space-3);
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.gh-card-link:hover {
    text-decoration: none;
    color: inherit;
}

.gh-card-title {
    font-size: var(--gh-text-base);
    font-weight: 600;
    color: var(--gh-gray-900);
    margin-bottom: var(--gh-space-2);
    display: flex;
    align-items: center;
    gap: var(--gh-space-2);
    line-height: 1.4;
}

.gh-card-title i {
    color: var(--gh-gray-400);
    font-size: 0.9em;
    flex-shrink: 0;
}

.gh-card-title .title-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.gh-card-meta {
    font-size: var(--gh-text-sm);
    color: var(--gh-gray-700);
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: var(--gh-space-2);
    line-height: 1.4;
}

.gh-card-meta i {
    color: var(--gh-gray-400);
    font-size: 0.85em;
    flex-shrink: 0;
    width: 14px;
    text-align: center;
}

.gh-card-meta strong {
    color: var(--gh-gray-700);
}

/* Card header (title row + badge) */
.gh-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--gh-space-2);
    margin-bottom: var(--gh-space-1);
}

.gh-card-header .gh-card-title {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin-bottom: 0;
    min-width: 0;
}

.gh-card-id {
    font-size: var(--gh-text-base);
    font-weight: 700;
    color: var(--gh-gray-900);
}

.gh-card-group {
    font-size: var(--gh-text-xs);
    color: var(--gh-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gh-card-badge {
    flex-shrink: 0;
}

.gh-card-ref {
    font-size: var(--gh-text-xs);
    color: var(--gh-gray-500);
    margin-bottom: var(--gh-space-1);
    padding-bottom: var(--gh-space-1);
    border-bottom: 1px solid var(--gh-gray-100);
}

.gh-card-details {
    margin-bottom: var(--gh-space-1);
}

.gh-card-meta-secondary {
    color: var(--gh-gray-500);
    font-size: 0.8em;
}

.gh-card-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--gh-space-2);
    padding-top: var(--gh-space-1);
    border-top: 1px solid var(--gh-gray-100);
    margin-top: var(--gh-space-1);
}

.gh-card-tax {
    font-size: var(--gh-text-sm);
    color: var(--gh-gray-700);
    display: flex;
    align-items: center;
    gap: var(--gh-space-2);
}

.gh-card-tax i {
    color: var(--gh-gray-400);
    font-size: 0.85em;
    flex-shrink: 0;
}

.gh-card-task-badge .gh-badge {
    max-width: 100%;
    white-space: normal;
    text-align: left;
}

.gh-card-task-badge {
    margin-top: var(--gh-space-1);
}

.gh-badge-under-consideration {
    background: #7c3aed;
    color: white;
}


/* Mobile card optimizations */
@media (max-width: 767px) {
    .gh-card {
        border-radius: var(--gh-radius-md);
    }

    .gh-card-link {
        padding: var(--gh-space-3);
    }

    .gh-card-title {
        font-size: var(--gh-text-sm);
        margin-bottom: var(--gh-space-1);
    }

    .gh-card-meta {
        font-size: var(--gh-text-xs);
        margin-bottom: 4px;
        line-height: 1.4;
    }

    .gh-card-meta i {
        font-size: 11px;
    }
}

/* Tighter card padding for 2-col on phones */
@media (max-width: 479px) {
    .gh-card-link {
        padding: var(--gh-space-2) var(--gh-space-2);
    }

    .gh-card-title {
        font-size: 13px;
    }

    .gh-card-footer {
        gap: 4px;
    }

    .gh-card-footer .badge {
        font-size: 10px;
        padding: 2px 5px;
    }
}

/* Card grid — always 2 columns (fits iPhone SE 375px+), tighter gap on mobile */
.gh-card-grid {
    display: grid;
    gap: var(--gh-space-2);
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 576px) {
    .gh-card-grid {
        gap: var(--gh-space-3);
    }
    .gh-card-link {
        padding: var(--gh-space-3) var(--gh-space-4);
    }
}

@media (min-width: 768px) {
    .gh-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
    .gh-card-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
    .gh-card-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1400px) {
    .gh-card-grid { grid-template-columns: repeat(5, 1fr); }
}

/* Mobile utility: hide secondary card details on phones */
@media (max-width: 479px) {
    .gh-mobile-hide {
        display: none !important;
    }

    /* Compact card footer on single-column */
    .gh-card-footer {
        flex-wrap: wrap;
    }
}

/* Group card grid (slightly different — single col on mobile) */
.gh-group-grid {
    display: grid;
    gap: var(--gh-space-4);
    grid-template-columns: 1fr;
}

@media (min-width: 576px) {
    .gh-group-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
    .gh-group-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
    .gh-group-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1400px) {
    .gh-group-grid { grid-template-columns: repeat(5, 1fr); }
}


/* ==========================================================================
   Sidebar (Filter Panel)
   ========================================================================== */
.gh-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: calc(100vh - var(--gh-navbar-height));
    min-height: calc(100dvh - var(--gh-navbar-height));
}

/* Mobile: Sidebar is a collapsible panel at top */
.gh-sidebar {
    width: 100%;
    background: var(--gh-white);
    border-bottom: 1px solid var(--gh-border-color);
    overflow: hidden;
    transition: max-height var(--gh-transition-slow), padding var(--gh-transition-slow);
    max-height: 52px; /* collapsed: just the toggle */
}

.gh-sidebar.expanded {
    max-height: 2000px;
    padding-bottom: var(--gh-space-4);
}

.gh-sidebar-toggle {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: var(--gh-space-3) var(--gh-space-4);
    background: var(--gh-primary-50);
    border: none;
    font-weight: 600;
    font-size: var(--gh-text-sm);
    color: var(--gh-primary);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
    min-height: 48px;
}

.gh-sidebar-toggle:hover {
    background: var(--gh-primary-light);
}

.gh-sidebar-toggle .toggle-icon {
    transition: transform var(--gh-transition-base);
    font-size: var(--gh-text-sm);
    color: var(--gh-gray-400);
}

.gh-sidebar.expanded .gh-sidebar-toggle .toggle-icon {
    transform: rotate(180deg);
}

.gh-sidebar-body {
    padding: 0 var(--gh-space-4) var(--gh-space-2);
}

.gh-sidebar-body label {
    font-weight: 500;
    font-size: var(--gh-text-sm);
    color: var(--gh-gray-700);
    margin-bottom: var(--gh-space-1);
    display: block;
}

.gh-sidebar-body .form-control,
.gh-sidebar-body .form-select {
    font-size: var(--gh-text-base);
    border-color: var(--gh-border-color);
    border-radius: var(--gh-radius-sm);
}

.gh-sidebar-body .form-control:focus,
.gh-sidebar-body .form-select:focus {
    border-color: var(--gh-primary);
    box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.1);
}

.gh-sidebar-body hr {
    border-color: var(--gh-gray-200);
    margin: var(--gh-space-3) 0;
}

.gh-main {
    flex: 1;
    padding: var(--gh-space-4);
    min-width: 0;
}

/* Landscape hint chip — injected by base.html above the first too-wide table
   on small screens; dismiss persists in localStorage */
.gh-landscape-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--gh-gray-600, #5a6b80);
    background: var(--gh-bg-subtle, #f1f5fa);
    border: 1px solid var(--gh-border, #dde5ef);
    border-radius: 8px;
    padding: 0.35rem 0.65rem;
    margin-bottom: 6px;
}
.gh-landscape-hint button {
    background: none;
    border: none;
    color: var(--gh-primary, #2f63a6);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.35rem 0.4rem;
    min-height: 32px;
    white-space: nowrap;
}
@media (min-width: 992px) { .gh-landscape-hint { display: none; } }

/* Full-width pages (sidebar hidden): cap + center the content column so wide
   monitors keep side margins and table rows stay scannable */
.gh-main--contained {
    max-width: 1400px;
    margin-inline: auto;
    width: 100%;
}

/* Desktop: sidebar as sticky column */
@media (min-width: 768px) {
    .gh-layout {
        flex-direction: row;
    }

    .gh-sidebar {
        width: var(--gh-sidebar-width);
        flex-shrink: 0;
        max-height: none;
        border-bottom: none;
        border-right: 1px solid var(--gh-border-color);
        position: sticky;
        top: var(--gh-navbar-height);
        height: calc(100vh - var(--gh-navbar-height));
        height: calc(100dvh - var(--gh-navbar-height));
        overflow-y: auto;
        padding-bottom: var(--gh-space-4);
    }

    .gh-sidebar-toggle {
        display: none;
    }

    .gh-sidebar-body {
        padding: var(--gh-space-4) var(--gh-space-5);
    }

    .gh-main {
        padding: var(--gh-space-6);
    }
}


/* ==========================================================================
   Person Color System
   ========================================================================== */
/* Higher specificity without !important */
.gh-card.person-ple        { background-color: var(--gh-person-ple); border-left: 3px solid var(--gh-person-ple-border); }
.gh-card.person-poppy      { background-color: var(--gh-person-poppy); border-left: 3px solid var(--gh-person-poppy-border); }
.gh-card.person-pik        { background-color: var(--gh-person-pik); border-left: 3px solid var(--gh-person-pik-border); }
.gh-card.person-pep        { background-color: var(--gh-person-pep); border-left: 3px solid var(--gh-person-pep-border); }
.gh-card.person-o          { background-color: var(--gh-person-o); border-left: 3px solid var(--gh-person-o-border); }
.gh-card.person-multiple   { background-color: var(--gh-person-multiple); border-left: 3px solid var(--gh-person-multiple-border); }
.gh-card.person-other      { background-color: var(--gh-person-other); border-left: 3px solid var(--gh-person-other-border); }

/* Person badges (inline pill for task tables) */
.gh-person-badge {
    display: inline-block;
    padding: 0.15em 0.55em;
    font-size: var(--gh-text-xs);
    font-weight: 500;
    border-radius: var(--gh-radius-full);
    border: 1px solid;
    margin: 1px 2px;
    white-space: nowrap;
}
.gh-person-badge.person-ple      { background: var(--gh-person-ple); border-color: var(--gh-person-ple-border); color: #065f46; }
.gh-person-badge.person-poppy    { background: var(--gh-person-poppy); border-color: var(--gh-person-poppy-border); color: #9d174d; }
.gh-person-badge.person-pik      { background: var(--gh-person-pik); border-color: var(--gh-person-pik-border); color: #1e40af; }
.gh-person-badge.person-pep      { background: var(--gh-person-pep); border-color: var(--gh-person-pep-border); color: #92400e; }
.gh-person-badge.person-o        { background: var(--gh-person-o); border-color: var(--gh-person-o-border); color: #3730a3; }
.gh-person-badge.person-other    { background: var(--gh-person-other); border-color: var(--gh-person-other-border); color: var(--gh-gray-600); }

/* Owner badges */
.owner-badge {
    display: inline-block;
    padding: 0.15em 0.5em;
    font-size: var(--gh-text-xs);
    font-weight: 500;
    border-radius: var(--gh-radius-full);
    border: 1px solid;
}

.owner-suntorn   { background: var(--gh-person-ple); border-color: var(--gh-person-ple-border); color: #065f46; }
.owner-pimolpan  { background: var(--gh-person-poppy); border-color: var(--gh-person-poppy-border); color: #9d174d; }
.owner-sermchai  { background: var(--gh-person-pik); border-color: var(--gh-person-pik-border); color: #1e40af; }
.owner-pimolrat  { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.owner-default   { background: var(--gh-gray-100); border-color: var(--gh-gray-300); color: var(--gh-gray-600); }


/* ==========================================================================
   Tables
   ========================================================================== */
.gh-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--gh-border-color);
    border-radius: var(--gh-radius-md);
    background: var(--gh-white);
    position: relative;
}

/* Horizontal scroll indicator (fade on right edge) */
@media (max-width: 991px) {
    .gh-table-wrap::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 40px;
        background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.05));
        pointer-events: none;
        transition: opacity var(--gh-transition-base);
    }

    .gh-table-wrap.scrolled-to-end::after {
        opacity: 0;
    }
}

.gh-table-wrap .table {
    margin-bottom: 0;
    font-size: var(--gh-text-sm);
}

.gh-table-wrap .table th {
    font-weight: 600;
    font-size: var(--gh-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gh-gray-600);
    background: var(--gh-gray-50);
    border-bottom: 2px solid var(--gh-border-color);
    padding: var(--gh-space-3) var(--gh-space-3);
    white-space: nowrap;
}

.gh-table-wrap .table td {
    padding: var(--gh-space-3) var(--gh-space-3);
    vertical-align: middle;
    color: var(--gh-gray-700);
    border-bottom: 1px solid var(--gh-gray-100);
}

.gh-table-wrap .table tbody tr:hover {
    background-color: var(--gh-gray-50);
}

.gh-table-wrap .table tbody tr:last-child td {
    border-bottom: none;
}

/* Mobile table optimizations */
@media (max-width: 767px) {
    .gh-table-wrap {
        border-radius: var(--gh-radius-sm);
        margin-bottom: var(--gh-space-3);
    }

    .gh-table-wrap .table {
        font-size: 11px;
    }

    /* <small> and .small are 0.875em, so inside an 11px table they compute to
       9.6px — under the 10px readability floor the mobile suite enforces.
       Found on /hotel/reservations/ 2026-08-03, the day that page first came
       under the suite's watch. Pin them instead of letting em compound. */
    .gh-table-wrap .table small,
    .gh-table-wrap .table .small,
    .gh-table-wrap .table code.small {
        font-size: var(--gh-text-xs); /* 12px - WCAG AA compliant */
    }

    .gh-table-wrap .table th {
        font-size: var(--gh-text-xs); /* 12px - WCAG AA compliant */
        padding: var(--gh-space-2);
        letter-spacing: 0.02em;
    }

    .gh-table-wrap .table td {
        padding: var(--gh-space-2);
    }

    /* Make scroll indicator more visible on mobile */
    .gh-table-wrap::after {
        width: 60px;
        background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.08));
    }
}


/* ==========================================================================
   Helper / Tooltip Icons (replaces inline styles)
   ========================================================================== */

/* Tax paid/unpaid inline indicators */
.gh-tax-paid-icon {
    font-size: 0.85rem;
}

.gh-tax-unpaid {
    font-size: 0.75rem;
    font-weight: 600;
}

.gh-tax-breakdown-paid-icon {
    font-size: 0.7rem;
}

.gh-tax-breakdown-unpaid {
    font-size: 0.65rem;
    font-weight: 600;
}

/* ==========================================================================
   Badges & Status
   ========================================================================== */
.gh-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--gh-space-1);
    padding: 0.2em 0.65em;
    font-size: var(--gh-text-xs);
    font-weight: 600;
    border-radius: var(--gh-radius-full);
    line-height: 1.4;
    white-space: nowrap;
}

.gh-badge-open    { background: var(--gh-danger-light); color: var(--gh-danger); }
.gh-badge-waiting { background: var(--gh-warning-light); color: var(--gh-warning); }
.gh-badge-complete { background: var(--gh-success-light); color: var(--gh-success); }
.gh-badge-info    { background: var(--gh-info-light); color: var(--gh-info); }
.gh-badge-neutral { background: var(--gh-gray-100); color: var(--gh-gray-600); }
.gh-badge-warning { background: var(--gh-warning-light); color: var(--gh-warning); }
.gh-badge-success { background: var(--gh-success-light); color: var(--gh-success); }
.gh-badge-danger  { background: var(--gh-danger-light); color: var(--gh-danger); }
.gh-badge-count   { background: var(--gh-gray-100); color: var(--gh-gray-600); font-weight: 500; }

/* Active Filter Badges */
.gh-active-filters {
    background: var(--gh-primary-50);
    border: 1px solid var(--gh-primary-light);
    border-radius: var(--gh-radius-md);
    padding: var(--gh-space-3) var(--gh-space-4);
}

.gh-filter-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--gh-space-1);
    padding: 0.35rem 0.65rem;
    font-size: var(--gh-text-xs);
    font-weight: 500;
    background: var(--gh-white);
    border: 1px solid var(--gh-border-color);
    border-radius: var(--gh-radius-full);
    color: var(--gh-gray-700);
    white-space: nowrap;
}

.gh-filter-badge i.bi {
    font-size: 0.875rem;
    color: var(--gh-primary);
}

.gh-filter-badge-remove {
    margin-left: var(--gh-space-1);
    color: var(--gh-gray-500);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: color var(--gh-transition-fast);
}

.gh-filter-badge-remove:hover {
    color: var(--gh-danger);
}

@media (max-width: 767px) {
    .gh-active-filters {
        padding: var(--gh-space-2) var(--gh-space-3);
    }

    .gh-filter-badge {
        font-size: 11px;
        padding: 0.25rem 0.5rem;
    }

    .gh-filter-badge i.bi {
        font-size: 0.75rem;
    }
}


/* ==========================================================================
   Buttons (extended)
   ========================================================================== */
.gh-btn {
    font-size: var(--gh-text-sm);
    font-weight: 500;
    padding: var(--gh-space-2) var(--gh-space-4);
    border-radius: var(--gh-radius-sm);
    transition: all var(--gh-transition-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--gh-space-2);
    white-space: nowrap;
    /* A button carries `white-space: nowrap`, so a flex parent that squeezes it
       below its text width does not wrap the label — it paints the text OUTSIDE
       the button box, over whatever sits next to it (/leads/ rendered "NPV
       Calculator" under the New Lead button; /rentals/ clipped "Add Tenant";
       /settings/ clipped "Add New"). Never let a button start narrower than its
       own label; the toolbars that hold them already wrap.
       This class of bug is invisible to browser_check_mobile.js — its text-spill
       check only inspects CHILDLESS elements and every one of these buttons
       contains an <i> icon. Found by measuring boxes, 2026-08-24. */
    flex-shrink: 0;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    line-height: 1.5;
}

.gh-btn-primary {
    background: var(--gh-primary);
    color: var(--gh-white);
    border-color: var(--gh-primary);
}

.gh-btn-primary:hover {
    background: var(--gh-primary-hover);
    border-color: var(--gh-primary-hover);
    color: var(--gh-white);
}

.gh-btn-outline {
    background: var(--gh-white);
    color: var(--gh-gray-700);
    border-color: var(--gh-border-color);
}

.gh-btn-outline:hover {
    background: var(--gh-gray-50);
    border-color: var(--gh-gray-300);
    color: var(--gh-gray-900);
}

.gh-btn-success {
    background: var(--gh-success);
    color: var(--gh-white);
    border-color: var(--gh-success);
}

.gh-btn-success:hover {
    background: #047857;
    color: var(--gh-white);
}

.gh-btn-danger {
    background: var(--gh-white);
    color: var(--gh-danger);
    border-color: var(--gh-danger);
}

.gh-btn-danger:hover {
    background: var(--gh-danger);
    color: var(--gh-white);
}

.gh-btn-sm {
    font-size: var(--gh-text-xs);
    padding: var(--gh-space-1) var(--gh-space-3);
}

/* Mobile: Increase touch targets to minimum 44px */
@media (max-width: 767px) {
    .gh-btn,
    .gh-btn-primary,
    .gh-btn-outline,
    .gh-btn-success,
    .gh-btn-danger {
        min-height: 44px;
        padding: var(--gh-space-3) var(--gh-space-4);
    }

    .gh-btn-sm {
        min-height: 44px;
        padding: var(--gh-space-2) var(--gh-space-4);
        font-size: var(--gh-text-sm);
    }

    .gh-btn-icon {
        min-width: 44px;
        min-height: 44px;
        padding: var(--gh-space-2);
    }

    /* Bootstrap-native buttons inside table rows escaped the rule above
       (e.g. .btn-link delete icons) — give them the same thumb size */
    td .btn-sm,
    td .btn-link {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}


/* ==========================================================================
   Page Header v2
   ========================================================================== */
.gh-page-header-v2 {
    margin-bottom: var(--gh-space-3);
}

.gh-page-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
}

.gh-page-header-top .gh-page-title {
    margin: 0;
    font-size: var(--gh-text-2xl);
    font-weight: 700;
    color: var(--gh-gray-900);
}

.gh-page-header-actions {
    display: flex;
    gap: var(--gh-space-2);
    align-items: center;
    flex-shrink: 0;
}


.gh-search-form {
    display: flex;
    gap: var(--gh-space-2);
    align-items: center;
}


.gh-search-input {
    flex: 1;
    font-size: 16px !important;
}

.gh-search-active {
    margin-top: var(--gh-space-1);
}

@media (max-width: 767px) {
    .gh-page-header-v2 {
        margin-bottom: var(--gh-space-2);
    }

    .gh-page-header-top {
        flex-direction: row;
        align-items: center;
        gap: var(--gh-space-2);
    }

    .gh-page-header-top .gh-page-title {
        font-size: var(--gh-text-lg);
        flex: 1;
        min-width: 0;
    }

    .gh-page-header-actions {
        flex-shrink: 0;
        gap: var(--gh-space-1);
    }

    /* Hide button labels on mobile, show icons only */
    .gh-page-header-actions .gh-btn span {
        display: none;
    }

    .gh-page-header-actions .gh-btn {
        min-width: 40px;
        min-height: 40px;
        padding: var(--gh-space-2);
        justify-content: center;
    }
}

/* ==========================================================================
   KPI Grid — 3 compact cards + 1 big tax card
   ========================================================================== */
.gh-kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 2fr;
    gap: var(--gh-space-2);
    margin-bottom: var(--gh-space-3);
    align-items: stretch;
}

.gh-kpi-grid--equal {
    grid-template-columns: repeat(4, 1fr);
}

.gh-kpi-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--gh-space-2);
    margin-bottom: var(--gh-space-3);
    align-items: stretch;
}

.gh-kpi-item {
    background: var(--gh-white);
    border: 1px solid var(--gh-border-color);
    border-radius: var(--gh-radius-lg);
    padding: var(--gh-space-4);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gh-kpi-item--compact {
    padding: var(--gh-space-2) var(--gh-space-3);
}

/* Status-tinted KPI tiles — a top accent stripe + tinted value, so the KPI
   band reads its own health at a glance (danger/warning/info/success). */
.gh-kpi-item--danger  { border-top: 3px solid var(--gh-danger); }
.gh-kpi-item--warning { border-top: 3px solid var(--gh-warning); }
.gh-kpi-item--info    { border-top: 3px solid var(--gh-info); }
.gh-kpi-item--success { border-top: 3px solid var(--gh-success); }
.gh-kpi-item--danger  .gh-kpi-value { color: var(--gh-danger); }
.gh-kpi-item--warning .gh-kpi-value { color: var(--gh-warning); }
.gh-kpi-item--info    .gh-kpi-value { color: var(--gh-info); }
.gh-kpi-item--success .gh-kpi-value { color: var(--gh-success); }

.gh-kpi-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gh-gray-500);
    margin-bottom: var(--gh-space-1);
}

.gh-kpi-value {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--gh-gray-900);
    line-height: 1.2;
}

.gh-kpi-unit {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--gh-gray-500);
}

.gh-kpi-change {
    font-size: 0.75rem;
    font-weight: 700;
    margin-left: 0.25rem;
}

.gh-kpi-change--up {
    color: var(--gh-danger);
}

.gh-kpi-change--down {
    color: var(--gh-success);
}

.gh-kpi-sub {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--gh-gray-400);
    margin-top: var(--gh-space-1);
}

/* ---- Big Tax Card ---- */
.gh-kpi-tax-card {
    background: linear-gradient(135deg, var(--gh-primary-50) 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
    border-radius: var(--gh-radius-lg);
    padding: var(--gh-space-3);
    display: flex;
    flex-direction: column;
}


.gh-kpi-tax-total {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--gh-gray-900);
    line-height: 1.2;
}

/* ---- Tax Breakdown Mini Cards ---- */
.gh-kpi-tax-breakdown {
    display: flex;
    gap: var(--gh-space-2);
    flex: 1;
}

.gh-tax-mini {
    flex: 1;
    background: rgba(255, 255, 255, 0.7);
    border-radius: var(--gh-radius-sm);
    padding: var(--gh-space-2);
    text-align: center;
    border-top: 2px solid var(--gh-gray-300);
}

.gh-tax-mini-label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gh-gray-600);
    margin-bottom: 0.125rem;
}

.gh-tax-mini-count {
    font-size: 0.6875rem;
    color: var(--gh-gray-400);
    font-weight: 400;
}

.gh-tax-mini-value {
    font-size: 0.8125rem;
    font-weight: 800;
    color: var(--gh-gray-900);
    margin-top: 0.125rem;
}

.gh-tax-mini-sub {
    font-size: 0.625rem;
    color: var(--gh-gray-400);
    margin-top: 0.125rem;
}

/* Tax mini color variants */
.gh-tax-mini--vacant    { border-top-color: #f59e0b; }
.gh-tax-mini--agricultural { border-top-color: #10b981; }
.gh-tax-mini--residential  { border-top-color: #3b82f6; }
.gh-tax-mini--other        { border-top-color: #6b7280; }
.gh-tax-mini--unspecified  { border-top-color: #8b5cf6; }

/* ---- Card Tax Breakdown Rows ---- */
.gh-card-tax-breakdown {
    flex-basis: 100%;
    margin-top: 0.25rem;
    padding: 0.375rem 0.5rem;
    border-top: 1px dashed var(--gh-gray-200);
    background: var(--gh-gray-50, #f9fafb);
    border-radius: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.gh-card-tax-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    line-height: 1.4;
}

.gh-card-tax-row-label {
    color: var(--gh-gray-600);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gh-card-tax-row-value {
    font-weight: 600;
    color: var(--gh-gray-800);
    white-space: nowrap;
}

/* Tablet KPI */
@media (max-width: 991px) and (min-width: 768px) {
    .gh-kpi-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .gh-kpi-grid--equal {
        grid-template-columns: repeat(4, 1fr);
    }

    .gh-kpi-tax-card {
        grid-column: 1 / -1;
    }
}

/* Mobile KPI — 2-column grid, area + tax span full */
@media (max-width: 767px) {
    .gh-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gh-space-2);
    }

    .gh-kpi-item--compact {
        padding: var(--gh-space-2) var(--gh-space-3);
    }

    /* Area KPI spans full width (long Thai text) — only on overview page */
    .gh-kpi-grid:not(.gh-kpi-grid--equal) .gh-kpi-item--compact:nth-child(3) {
        grid-column: 1 / -1;
    }

    .gh-kpi-label {
        font-size: 0.625rem;
        margin-bottom: 0.125rem;
    }

    .gh-kpi-value {
        font-size: var(--gh-text-base);
    }

    .gh-kpi-tax-card {
        grid-column: 1 / -1;
        padding: var(--gh-space-3);
    }

    .gh-kpi-tax-total {
        font-size: var(--gh-text-xl);
    }

    .gh-kpi-tax-breakdown {
        flex-direction: row;
        gap: var(--gh-space-2);
    }

    .gh-tax-mini {
        flex: 1;
        min-width: 0;
    }
}

/* Very small phones — stack KPIs vertically */
@media (max-width: 374px) {
    .gh-kpi-grid {
        grid-template-columns: 1fr;
    }

    .gh-kpi-grid:not(.gh-kpi-grid--equal) .gh-kpi-item--compact:nth-child(3) {
        grid-column: auto;
    }
}


/* ==========================================================================
   Tab Navigation (View Switcher)
   ========================================================================== */
.gh-tabs {
    display: flex;
    gap: var(--gh-space-2);
    margin-bottom: var(--gh-space-3);
    background: var(--gh-gray-100);
    border-radius: var(--gh-radius-full);
    padding: var(--gh-space-1);
    width: fit-content;
}

.gh-tab {
    padding: var(--gh-space-2) var(--gh-space-5);
    font-size: var(--gh-text-base);
    font-weight: 600;
    color: var(--gh-gray-500);
    text-decoration: none;
    border-radius: var(--gh-radius-full);
    transition: all var(--gh-transition-fast);
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.gh-tab:hover {
    color: var(--gh-gray-700);
    background: var(--gh-gray-200);
}

.gh-tab.active {
    color: var(--gh-white);
    background: var(--gh-primary);
    box-shadow: var(--gh-shadow-sm);
}

.gh-tab.active:hover {
    background: var(--gh-primary-hover);
    color: var(--gh-white);
}

/* Mobile tab optimizations */
@media (max-width: 767px) {
    .gh-tabs {
        width: 100%;
        margin-bottom: var(--gh-space-4);
    }

    .gh-tab {
        flex: 1;
        padding: var(--gh-space-2) var(--gh-space-3);
        font-size: var(--gh-text-sm);
        text-align: center;
    }
}

/* Horizontal-scroll tab bar — for pages whose tab set can exceed the width
   (Analytics, Data Quality, …). Lives in the shared stylesheet (not a per-page
   CSS) so ANY page using .gh-tabs--scrollable scrolls its tabs instead of
   overflowing the page — the tabs otherwise inherit the mobile `.gh-tab{flex:1}`
   shrink rule above, which nowrap tabs can't honor, forcing page side-scroll. */
.gh-tabs--scrollable {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.gh-tabs--scrollable::-webkit-scrollbar { display: none; }
.gh-tabs--scrollable .gh-tab { flex: 0 0 auto; }
@media (max-width: 767px) {
    .gh-tabs--scrollable .gh-tab {
        font-size: var(--gh-text-xs);
    }
}


/* ==========================================================================
   Sort Controls
   ========================================================================== */
.gh-sort-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gh-space-2);
    margin-bottom: var(--gh-space-3);
}

.gh-sort-bar .sort-label {
    font-size: var(--gh-text-sm);
    color: var(--gh-gray-500);
    font-weight: 500;
}

.gh-sort-btn {
    font-size: var(--gh-text-xs);
    font-weight: 500;
    padding: var(--gh-space-1) var(--gh-space-3);
    border-radius: var(--gh-radius-full);
    border: 1px solid var(--gh-border-color);
    background: var(--gh-white);
    color: var(--gh-gray-600);
    text-decoration: none;
    transition: all var(--gh-transition-fast);
}

.gh-sort-btn:hover {
    border-color: var(--gh-gray-300);
    background: var(--gh-gray-50);
    color: var(--gh-gray-800);
}

.gh-sort-btn.active {
    background: var(--gh-primary);
    border-color: var(--gh-primary);
    color: var(--gh-white);
}

/* Mobile sort bar — horizontally scrollable, larger touch targets */
@media (max-width: 767px) {
    .gh-sort-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: var(--gh-space-2);
        margin-bottom: var(--gh-space-3);
        padding-bottom: var(--gh-space-1);
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE */
    }

    .gh-sort-bar::-webkit-scrollbar {
        display: none;
    }

    .gh-sort-bar .sort-label {
        flex-shrink: 0;
        font-size: var(--gh-text-xs);
    }

    .gh-sort-btn {
        font-size: var(--gh-text-xs);
        padding: var(--gh-space-2) var(--gh-space-3);
        min-height: 36px;
        white-space: nowrap;
        flex-shrink: 0;
    }
}


/* ==========================================================================
   Collapsible Sections
   ========================================================================== */
.gh-section {
    background: var(--gh-white);
    border: 1px solid var(--gh-border-color);
    border-radius: var(--gh-radius-lg);
    margin-bottom: var(--gh-space-4);
    overflow: hidden;
}

.gh-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--gh-space-4) var(--gh-space-5);
    background: var(--gh-white);
    border: none;
    width: 100%;
    cursor: pointer;
    font-weight: 600;
    font-size: var(--gh-text-md);
    color: var(--gh-gray-900);
    text-align: left;
    transition: background var(--gh-transition-fast);
}

.gh-section-header:hover {
    background: var(--gh-gray-50);
}

.gh-section-header .chevron {
    transition: transform var(--gh-transition-base);
    color: var(--gh-gray-400);
}

.gh-section-header.collapsed .chevron {
    transform: rotate(-90deg);
}

.gh-section-body {
    padding: 0 var(--gh-space-5) var(--gh-space-5);
}

/* Mobile optimizations for collapsible sections */
@media (max-width: 767px) {
    .gh-section {
        margin-bottom: var(--gh-space-3);
    }

    .gh-section-header {
        padding: var(--gh-space-3) var(--gh-space-4);
        font-size: var(--gh-text-base);
        min-height: 48px;
    }

    .gh-section-header .chevron {
        font-size: var(--gh-text-lg);
    }

    .gh-section-body {
        padding: 0 var(--gh-space-4) var(--gh-space-4);
    }
}


/* ==========================================================================
   Filter Status Bar
   ========================================================================== */
.gh-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gh-space-3);
    padding: var(--gh-space-3) var(--gh-space-4);
    background: var(--gh-primary-50);
    border: 1px solid var(--gh-primary-light);
    border-radius: var(--gh-radius-md);
    margin-bottom: var(--gh-space-4);
    font-size: var(--gh-text-sm);
}

/* Mobile filter bar optimizations */
@media (max-width: 767px) {
    .gh-filter-bar {
        padding: var(--gh-space-2) var(--gh-space-3);
        gap: var(--gh-space-2);
        margin-bottom: var(--gh-space-3);
        font-size: var(--gh-text-xs);
        border-radius: var(--gh-radius-sm);
    }

    /* Stack filter bar content vertically on mobile */
    .gh-filter-bar > div {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--gh-space-1);
    }

    /* Hide decorative separators on mobile */
    .gh-filter-bar .mx-2 {
        display: none;
    }
}


/* ==========================================================================
   Detail Page Styles
   ========================================================================== */
.gh-detail-grid {
    display: grid;
    gap: var(--gh-space-3);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .gh-detail-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .gh-detail-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.gh-detail-card {
    background: var(--gh-white);
    border: 1px solid var(--gh-border-color);
    border-radius: var(--gh-radius-lg);
    padding: var(--gh-space-3) var(--gh-space-4);
    min-width: 0;
}

.leaflet-container {
    max-width: 100%;
}

.gh-detail-card-title {
    font-size: var(--gh-text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gh-gray-500);
    margin-bottom: var(--gh-space-3);
    padding-bottom: var(--gh-space-2);
    border-bottom: 1px solid var(--gh-gray-200);
}

.gh-detail-row {
    display: flex;
    justify-content: space-between;
    padding: var(--gh-space-1) 0;
    font-size: var(--gh-text-sm);
    border-bottom: 1px solid var(--gh-gray-100);
}

.gh-detail-row:last-child {
    border-bottom: none;
}

.gh-detail-label {
    color: var(--gh-gray-500);
    font-weight: 500;
    flex-shrink: 0;
    margin-right: var(--gh-space-3);
}

.gh-detail-value {
    color: var(--gh-gray-900);
    font-weight: 500;
    text-align: right;
}

/* Collapsible detail card toggle button */

.gh-detail-toggle .chevron {
    transition: transform var(--gh-transition-base);
    color: var(--gh-gray-400);
}

.gh-detail-toggle.collapsed .chevron {
    transform: rotate(-90deg);
}

/* Desktop: always show detail card body regardless of collapse state */
@media (min-width: 768px) {
    .gh-detail-card .gh-detail-card-body.collapse:not(.show),
    .gh-detail-card .gh-detail-card-body.collapsing {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }

    .gh-detail-toggle {
        cursor: default;
        pointer-events: none;
    }
}

/* Mobile optimizations for detail cards */
@media (max-width: 767px) {
    .gh-detail-card {
        padding: var(--gh-space-3);
    }

    .gh-detail-toggle {
        font-size: var(--gh-text-sm);
        padding: var(--gh-space-1) 0;
        padding-bottom: var(--gh-space-2);
        margin-bottom: 0;
        min-height: 40px;
    }

    .gh-detail-toggle:not(.collapsed) {
        margin-bottom: var(--gh-space-2);
    }

    .gh-detail-row {
        padding: var(--gh-space-1) 0;
        font-size: var(--gh-text-sm);
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .gh-detail-label {
        font-size: var(--gh-text-xs);
        margin-right: 0;
    }

    .gh-detail-value {
        text-align: left;
        font-size: var(--gh-text-sm);
    }

    /* Compact spacing for detail grid on mobile */
    .gh-detail-grid {
        gap: var(--gh-space-3);
    }
}


/* ==========================================================================
   Mobile Data Cards (Generic)
   ========================================================================== */
.gh-data-card {
    background: var(--gh-white);
    border: 1px solid var(--gh-border-color);
    border-radius: var(--gh-radius-lg);
    overflow: hidden;
    margin-bottom: var(--gh-space-3);
    padding: var(--gh-space-4);
    transition: box-shadow var(--gh-transition-base);
}

.gh-data-card:hover {
    box-shadow: var(--gh-shadow-md);
}

.gh-data-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--gh-space-3);
    padding-bottom: var(--gh-space-3);
    border-bottom: 1px solid var(--gh-gray-200);
}

.gh-data-card-title {
    font-weight: 600;
    font-size: var(--gh-text-base);
    color: var(--gh-gray-900);
}

.gh-data-card-row {
    display: flex;
    justify-content: space-between;
    padding: var(--gh-space-2) 0;
    font-size: var(--gh-text-sm);
    border-bottom: 1px solid var(--gh-gray-100);
}

.gh-data-card-row:last-child {
    border-bottom: none;
}

.gh-data-card-label {
    color: var(--gh-gray-500);
    font-weight: 500;
    flex-shrink: 0;
    margin-right: var(--gh-space-3);
}

.gh-data-card-value {
    color: var(--gh-gray-900);
    font-weight: 400;
    text-align: right;
}

.gh-data-card-actions {
    display: flex;
    gap: var(--gh-space-2);
    margin-top: var(--gh-space-3);
    padding-top: var(--gh-space-3);
    border-top: 1px solid var(--gh-gray-100);
}

/* Mobile data card optimizations */
@media (max-width: 767px) {
    .gh-data-card {
        padding: var(--gh-space-3);
        margin-bottom: var(--gh-space-2);
    }

    .gh-data-card-header {
        margin-bottom: var(--gh-space-2);
        padding-bottom: var(--gh-space-2);
    }

    .gh-data-card-title {
        font-size: var(--gh-text-sm);
    }

    .gh-data-card-row {
        padding: 6px 0;
        font-size: var(--gh-text-xs);
    }

    .gh-data-card-label {
        font-size: var(--gh-text-xs);
    }

    .gh-data-card-value {
        font-size: var(--gh-text-xs);
    }

    .gh-data-card-actions {
        gap: var(--gh-space-2);
        margin-top: var(--gh-space-2);
        padding-top: var(--gh-space-2);
    }
}

/* ==========================================================================
   Task Cards (Mobile)
   ========================================================================== */
.gh-task-card {
    background: var(--gh-white);
    border: 1px solid var(--gh-border-color);
    border-radius: var(--gh-radius-lg);
    overflow: hidden;
    margin-bottom: var(--gh-space-3);
    transition: box-shadow var(--gh-transition-base);
}

.gh-task-card:hover {
    box-shadow: var(--gh-shadow-md);
}

.gh-task-card-header {
    padding: var(--gh-space-3) var(--gh-space-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--gh-gray-100);
    font-weight: 500;
}

.gh-task-card-body {
    padding: var(--gh-space-4);
}

.gh-task-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gh-space-4);
    padding: var(--gh-space-3);
    background: var(--gh-gray-50);
    border-radius: var(--gh-radius-sm);
    margin-bottom: var(--gh-space-3);
    font-size: var(--gh-text-sm);
}

.gh-task-card-footer {
    padding: var(--gh-space-3) var(--gh-space-4);
    display: flex;
    gap: var(--gh-space-2);
    border-top: 1px solid var(--gh-gray-100);
    background: var(--gh-gray-50);
}

/* Mobile task card optimizations */
@media (max-width: 767px) {
    .gh-task-card {
        margin-bottom: var(--gh-space-2);
    }

    .gh-task-card-header {
        padding: var(--gh-space-2) var(--gh-space-3);
        font-size: var(--gh-text-sm);
    }

    .gh-task-card-body {
        padding: var(--gh-space-3);
    }

    .gh-task-card-meta {
        gap: var(--gh-space-3);
        padding: var(--gh-space-2);
        margin-bottom: var(--gh-space-2);
        font-size: var(--gh-text-xs);
    }

    .gh-task-card-footer {
        padding: var(--gh-space-2) var(--gh-space-3);
    }
}


/* ==========================================================================
   Map View
   ========================================================================== */

.gh-map-container #map {
    height: 75vh;
    width: 100%;
}


/* ==========================================================================
   Forms (Enhanced)
   ========================================================================== */
.gh-form-card {
    background: var(--gh-white);
    border: 1px solid var(--gh-border-color);
    border-radius: var(--gh-radius-lg);
    padding: var(--gh-space-6);
    box-shadow: var(--gh-shadow-sm);
}

.gh-form-card .form-control,
.gh-form-card .form-select {
    border-color: var(--gh-border-color);
    border-radius: var(--gh-radius-sm);
    font-size: var(--gh-text-base);
    padding: var(--gh-space-2) var(--gh-space-3);
}

.gh-form-card .form-control:focus,
.gh-form-card .form-select:focus {
    border-color: var(--gh-primary);
    box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.1);
}

.gh-form-card label {
    font-weight: 500;
    font-size: var(--gh-text-sm);
    color: var(--gh-gray-700);
}

/* Required field indicator — red asterisk after label */
.gh-form-card label.requiredField::after,
.gh-form-card .required label::after,
label.requiredField::after {
    content: ' *';
    color: var(--gh-danger, #dc2626);
    font-weight: 700;
}

/* Safari zooms the whole page when a focused field is under 16px, and in an
   installed PWA there is no address bar to escape back out with. `--gh-text-base`
   is 15px, so every unguarded field triggers it.

   Two things this rule gets right that the old one didn't (2026-08-06):
   - It runs to 991.98px, not 767. An iPhone 15 in landscape is 852px wide, and
     base.html ships a landscape compact mode that invites exactly that rotation
     — so at 767 every field zoomed the moment the phone was turned sideways.
   - It lists search/month/tel/url/time. Those zoomed at EVERY width before:
     the Tasks filter, and the period pickers on Book Entry and Rent Reports.
   Types are enumerated rather than using a bare `input` selector, which would
   catch checkboxes and radios and wreck their 20px boxes. */
@media (max-width: 991.98px) {
    input:not([type]),
    input[type="text"],
    input[type="number"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="email"],
    input[type="month"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="time"],
    input[type="url"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Mobile: touch spacing */
@media (max-width: 767px) {
    input[type="text"],
    input[type="number"],
    input[type="date"],
    input[type="email"],
    input[type="password"],
    select,
    textarea {
        min-height: 44px;
        padding: var(--gh-space-3) var(--gh-space-3);
    }

    .form-label {
        font-size: var(--gh-text-base);
        font-weight: 600;
        margin-bottom: var(--gh-space-2);
    }

    .mb-3 {
        margin-bottom: var(--gh-space-5) !important;
    }

    /* Increase checkbox/radio touch targets */
    .form-check-input {
        width: 20px;
        height: 20px;
        margin-top: 0.15em;
    }

    .form-check {
        padding-left: 2rem;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .form-check-label {
        font-size: var(--gh-text-base);
        padding-left: var(--gh-space-2);
    }
}


/* ==========================================================================
   Login Page
   ========================================================================== */
.gh-login-wrap {
    min-height: calc(100vh - var(--gh-navbar-height));
    min-height: calc(100dvh - var(--gh-navbar-height));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gh-space-4);
    background: linear-gradient(135deg, var(--gh-gray-50), var(--gh-primary-50));
}

.gh-login-card {
    width: 100%;
    max-width: 420px;
    background: var(--gh-white);
    border-radius: var(--gh-radius-xl);
    box-shadow: var(--gh-shadow-xl);
    padding: var(--gh-space-8) var(--gh-space-6);
}

.gh-login-card h2 {
    font-size: var(--gh-text-2xl);
    font-weight: 700;
    color: var(--gh-gray-900);
    text-align: center;
    margin-bottom: var(--gh-space-6);
}


/* ==========================================================================
   Responsive Table → Cards on Mobile
   ========================================================================== */
@media (min-width: 768px) {
    .gh-mobile-cards {
        display: none;
    }
}

@media (max-width: 767px) {
    .gh-desktop-table {
        display: none;
    }
}


/* ==========================================================================
   Misc Utilities
   ========================================================================== */
.gh-empty-state {
    text-align: center;
    padding: var(--gh-space-10) var(--gh-space-4);
    color: var(--gh-gray-500);
}

.gh-empty-state i {
    font-size: 2.5rem;
    margin-bottom: var(--gh-space-4);
    color: var(--gh-gray-300);
    display: block;
}

/* Mobile empty state optimizations */
@media (max-width: 767px) {
    .gh-empty-state {
        padding: var(--gh-space-6) var(--gh-space-3);
        font-size: var(--gh-text-sm);
    }

    .gh-empty-state i {
        font-size: 2rem;
        margin-bottom: var(--gh-space-3);
    }
}


/* Zoomable images */
.gh-zoomable {
    cursor: zoom-in;
    transition: transform var(--gh-transition-base);
    border-radius: var(--gh-radius-md);
}

.gh-zoomable:hover {
    transform: scale(1.01);
}

/* Zoom controls */
.gh-zoom-controls {
    position: absolute;
    bottom: var(--gh-space-5);
    right: var(--gh-space-5);
    background: rgba(0, 0, 0, 0.6);
    padding: var(--gh-space-2) var(--gh-space-3);
    border-radius: var(--gh-radius-md);
    display: flex;
    gap: var(--gh-space-2);
}

.gh-zoom-controls button {
    color: white;
    background: none;
    border: none;
    padding: var(--gh-space-1);
    cursor: pointer;
    border-radius: var(--gh-radius-sm);
    transition: background var(--gh-transition-fast);
}

.gh-zoom-controls button:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Clickable image */
.gh-img-clickable {
    cursor: pointer;
    transition: opacity var(--gh-transition-base);
    border-radius: var(--gh-radius-md);
    max-width: 100%;
    max-height: 280px;
    object-fit: contain;
}

.gh-img-clickable:hover {
    opacity: 0.85;
}

/* ==========================================================================
   HTMX Progress Bar
   ========================================================================== */
#htmx-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gh-primary), #60a5fa);
    z-index: 9999;
    width: 0;
    opacity: 0;
    pointer-events: none;
}


/* Scrollbar styling */
.gh-sidebar::-webkit-scrollbar {
    width: 4px;
}

.gh-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.gh-sidebar::-webkit-scrollbar-thumb {
    background: var(--gh-gray-300);
    border-radius: 2px;
}

/* Bulk tax table improvements */
.gh-bulk-table .form-control-sm {
    font-size: var(--gh-text-sm);
    padding: var(--gh-space-1) var(--gh-space-2);
    border-radius: var(--gh-radius-sm);
}

.gh-bulk-table .actions .btn {
    display: block;
    width: 28px;
    text-align: center;
    padding: var(--gh-space-1) 0;
    margin-bottom: 2px;
}

/* Summary card (for detail pages) */
.gh-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--gh-space-4);
}

.gh-summary-item {
    text-align: center;
}

.gh-summary-item .label {
    font-size: var(--gh-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gh-gray-500);
}

.gh-summary-item .value {
    font-size: var(--gh-text-lg);
    font-weight: 700;
    color: var(--gh-gray-900);
    margin-top: var(--gh-space-1);
}

/* Mobile optimizations for summary grid */
@media (max-width: 767px) {
    .gh-summary-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gh-space-3);
    }

    .gh-summary-item {
        padding: var(--gh-space-3);
        background: var(--gh-gray-50);
        border-radius: var(--gh-radius-md);
    }

    .gh-summary-item .label {
        font-size: var(--gh-text-xs);
    }

    .gh-summary-item .value {
        font-size: var(--gh-text-base);
        margin-top: 4px;
        word-break: break-word;
    }
}

/* Resource items */


.gh-resource-item .item-title {
    font-weight: 600;
    font-size: var(--gh-text-base);
}

.gh-resource-item .item-description {
    margin-top: var(--gh-space-2);
    color: var(--gh-gray-600);
    font-size: var(--gh-text-sm);
    white-space: pre-wrap;
}

/* ==========================================================================
   Resources Page — Link Card Grid  (2026-07-22)
   Tappable, icon-led cards that work as a launchpad on phone and desktop.
   ========================================================================== */
.gh-resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--gh-space-3);
}

.gh-resource-card {
    display: flex;
    align-items: flex-start;
    gap: var(--gh-space-3);
    padding: var(--gh-space-4);
    border: 1px solid var(--gh-border-color);
    border-radius: var(--gh-radius-md);
    background: var(--gh-white);
    text-decoration: none;
    color: inherit;
    min-height: 64px;
    transition: border-color var(--gh-transition-fast),
                box-shadow var(--gh-transition-base),
                transform var(--gh-transition-fast);
}

a.gh-resource-card:hover {
    border-color: var(--gh-primary);
    box-shadow: var(--gh-shadow-md);
    transform: translateY(-1px);
}

a.gh-resource-card:active {
    transform: translateY(0);
    box-shadow: var(--gh-shadow-sm);
}

.gh-resource-card.rc-static {
    cursor: default;
}

.gh-resource-card .rc-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--gh-radius-md);
    background: var(--gh-primary-light);
    color: var(--gh-primary);
    font-size: 1.15rem;
}
.gh-resource-card .rc-icon.rc-sheet { background: var(--gh-success-light); color: var(--gh-success-700); }
.gh-resource-card .rc-icon.rc-map   { background: var(--gh-info-light);    color: var(--gh-info); }
.gh-resource-card .rc-icon.rc-gov   { background: var(--gh-warning-light); color: var(--gh-warning); }
.gh-resource-card .rc-icon.rc-tool  { background: var(--gh-primary-light); color: var(--gh-primary); }
/* full-colour brand logo sits on a clean "app icon" chip so its own colours show */
.gh-resource-card .rc-icon.rc-brand { background: var(--gh-white); border: 1px solid var(--gh-border-color); }
.gh-resource-card .rc-icon .rc-logo { width: 22px; height: 22px; display: block; }

.gh-resource-card .rc-body {
    flex: 1 1 auto;
    min-width: 0;
}

.gh-resource-card .rc-title {
    display: flex;
    align-items: center;
    gap: var(--gh-space-2);
    font-weight: 600;
    font-size: var(--gh-text-base);
    line-height: 1.3;
    color: var(--gh-gray-900);
}
.gh-resource-card .rc-title .rc-label {
    min-width: 0;
    overflow-wrap: anywhere;
}
.gh-resource-card .rc-title .rc-ext {
    flex: 0 0 auto;
    font-size: var(--gh-text-xs);
    color: var(--gh-gray-400);
}
a.gh-resource-card:hover .rc-title { color: var(--gh-primary); }
a.gh-resource-card:hover .rc-title .rc-ext { color: var(--gh-primary); }

.gh-resource-card .rc-desc {
    margin-top: var(--gh-space-1);
    color: var(--gh-gray-600);
    font-size: var(--gh-text-sm);
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Item-count pill on the section header */
.gh-section-header .gh-count-badge {
    display: inline-block;
    margin-left: var(--gh-space-2);
    padding: 0 var(--gh-space-2);
    min-width: 20px;
    font-size: var(--gh-text-xs);
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    color: var(--gh-gray-600);
    background: var(--gh-gray-100);
    border-radius: var(--gh-radius-full);
}

@media (max-width: 767px) {
    .gh-resource-grid {
        grid-template-columns: 1fr;
        gap: var(--gh-space-2);
    }
    .gh-resource-card {
        padding: var(--gh-space-3);
        min-height: 60px;
    }
    .gh-resource-card .rc-icon {
        width: 36px;
        height: 36px;
        font-size: 1.05rem;
    }
}


/* ==========================================================================
   Task Page — Summary Stat Cards
   ========================================================================== */
.gh-task-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gh-space-3);
    margin-bottom: var(--gh-space-4);
}

@media (max-width: 575px) {
    .gh-task-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

.gh-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--gh-space-4) var(--gh-space-3);
    border-radius: var(--gh-radius-lg);
    border: 2px solid var(--gh-border-color);
    background: var(--gh-white);
    text-decoration: none;
    transition: all var(--gh-transition-fast);
    cursor: pointer;
}

.gh-stat-card:hover {
    box-shadow: var(--gh-shadow-md);
    transform: translateY(-1px);
}

.gh-stat-card--active {
    border-width: 2px;
}

.gh-stat-card__count {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.gh-stat-card__label {
    font-size: var(--gh-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--gh-space-1);
}

/* Card color variants */
.gh-stat-card--open {
    border-color: var(--gh-danger-light);
}
.gh-stat-card--open .gh-stat-card__count { color: var(--gh-danger); }
.gh-stat-card--open .gh-stat-card__label { color: var(--gh-danger); }
.gh-stat-card--open.gh-stat-card--active {
    background: var(--gh-danger-light);
    border-color: var(--gh-danger);
}

.gh-stat-card--overdue {
    border-color: #fecaca;
}
.gh-stat-card--overdue .gh-stat-card__count { color: #991b1b; }
.gh-stat-card--overdue .gh-stat-card__label { color: #991b1b; }
.gh-stat-card--overdue.gh-stat-card--active {
    background: #fef2f2;
    border-color: #991b1b;
}

.gh-stat-card--waiting {
    border-color: var(--gh-warning-light);
}
.gh-stat-card--waiting .gh-stat-card__count { color: var(--gh-warning); }
.gh-stat-card--waiting .gh-stat-card__label { color: var(--gh-warning); }
.gh-stat-card--waiting.gh-stat-card--active {
    background: var(--gh-warning-light);
    border-color: var(--gh-warning);
}

.gh-stat-card--complete {
    border-color: var(--gh-success-light);
}
.gh-stat-card--complete .gh-stat-card__count { color: var(--gh-success); }
.gh-stat-card--complete .gh-stat-card__label { color: var(--gh-success); }
.gh-stat-card--complete.gh-stat-card--active {
    background: var(--gh-success-light);
    border-color: var(--gh-success);
}

/* Person filter cards */

@media (max-width: 768px) {
    .gh-person-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 575px) {
    .gh-person-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

.gh-stat-card--person-ple {
    border-color: var(--gh-person-ple-border);
}
.gh-stat-card--person-ple .gh-stat-card__count { color: #065f46; }
.gh-stat-card--person-ple .gh-stat-card__label { color: #065f46; }
.gh-stat-card--person-ple.gh-stat-card--active {
    background: var(--gh-person-ple);
    border-color: var(--gh-person-ple-border);
}

.gh-stat-card--person-poppy {
    border-color: var(--gh-person-poppy-border);
}
.gh-stat-card--person-poppy .gh-stat-card__count { color: #9d174d; }
.gh-stat-card--person-poppy .gh-stat-card__label { color: #9d174d; }
.gh-stat-card--person-poppy.gh-stat-card--active {
    background: var(--gh-person-poppy);
    border-color: var(--gh-person-poppy-border);
}

.gh-stat-card--person-pik {
    border-color: var(--gh-person-pik-border);
}
.gh-stat-card--person-pik .gh-stat-card__count { color: #1e40af; }
.gh-stat-card--person-pik .gh-stat-card__label { color: #1e40af; }
.gh-stat-card--person-pik.gh-stat-card--active {
    background: var(--gh-person-pik);
    border-color: var(--gh-person-pik-border);
}

.gh-stat-card--person-pep {
    border-color: var(--gh-person-pep-border);
}
.gh-stat-card--person-pep .gh-stat-card__count { color: #92400e; }
.gh-stat-card--person-pep .gh-stat-card__label { color: #92400e; }
.gh-stat-card--person-pep.gh-stat-card--active {
    background: var(--gh-person-pep);
    border-color: var(--gh-person-pep-border);
}

.gh-stat-card--person-unassigned {
    border-color: var(--gh-gray-300);
}
.gh-stat-card--person-unassigned .gh-stat-card__count { color: var(--gh-gray-600); }
.gh-stat-card--person-unassigned .gh-stat-card__label { color: var(--gh-gray-600); }
.gh-stat-card--person-unassigned.gh-stat-card--active {
    background: var(--gh-gray-100);
    border-color: var(--gh-gray-500);
}


/* ==========================================================================
   Task Page — Inline Status Dropdown
   ========================================================================== */
.gh-status-dropdown {
    position: relative;
    display: inline-block;
}

.gh-status-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.25em 0.6em;
    font-size: var(--gh-text-xs);
    font-weight: 600;
    border-radius: var(--gh-radius-full);
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--gh-transition-fast);
    line-height: 1.4;
}

.gh-status-btn--open {
    background: var(--gh-danger-light);
    color: var(--gh-danger);
}
.gh-status-btn--open:hover { background: #fecaca; }

.gh-status-btn--waiting {
    background: var(--gh-warning-light);
    color: var(--gh-warning);
}
.gh-status-btn--waiting:hover { background: #fef3c7; }

.gh-status-btn--complete {
    background: var(--gh-success-light);
    color: var(--gh-success);
}
.gh-status-btn--complete:hover { background: #d1fae5; }

/* Actual TenantPayment statuses rendered by rent_payments.html — these were
   never defined, so the pills sat colorless (site-review bug #1) */
.gh-status-btn--paid {
    background: var(--gh-success-light);
    color: var(--gh-success);
}
.gh-status-btn--paid:hover { background: #d1fae5; }
.gh-status-btn--due {
    background: var(--gh-primary-light, #dbeafe);
    color: var(--gh-primary);
}
.gh-status-btn--overdue {
    background: var(--gh-danger-light);
    color: var(--gh-danger);
}
.gh-status-btn--overdue:hover { background: #fecaca; }
.gh-status-btn--partial {
    background: var(--gh-warning-light);
    color: var(--gh-warning);
}
.gh-status-btn--waived {
    background: var(--gh-bg-subtle, #e9ecef);
    color: var(--gh-gray-500, #6c757d);
}

.gh-status-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 140px;
    margin-top: 4px;
    background: var(--gh-white);
    border: 1px solid var(--gh-border-color);
    border-radius: var(--gh-radius-md);
    box-shadow: var(--gh-shadow-lg);
    padding: var(--gh-space-1) 0;
}

.gh-status-menu.open {
    display: block;
}

.gh-status-option {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: var(--gh-space-2) var(--gh-space-3);
    font-size: var(--gh-text-sm);
    border: none;
    background: none;
    cursor: pointer;
    color: var(--gh-gray-700);
    text-align: left;
    transition: background var(--gh-transition-fast);
}

.gh-status-option:hover {
    background: var(--gh-gray-50);
}

.gh-status-option.active {
    font-weight: 600;
    background: var(--gh-primary-50);
    color: var(--gh-primary);
}


/* ==========================================================================
   Task Page — Deadline Styling
   ========================================================================== */
.gh-deadline {
    font-size: var(--gh-text-sm);
    white-space: nowrap;
}

.gh-deadline--overdue {
    color: var(--gh-danger);
    font-weight: 600;
}

.gh-deadline--today {
    color: var(--gh-warning);
    font-weight: 600;
}


/* ==========================================================================
   Task Page — Expandable Details
   ========================================================================== */
.gh-task-details-wrap {
    margin-top: var(--gh-space-1);
}

.gh-task-details-text {
    font-size: var(--gh-text-sm);
    line-height: 1.5;
    max-height: 2.5em;
    overflow: hidden;
    transition: max-height 0.2s ease;
}

.gh-task-details-wrap.expanded .gh-task-details-text {
    max-height: none;
}

.gh-task-details-toggle {
    border: none;
    background: none;
    color: var(--gh-primary);
    font-size: var(--gh-text-xs);
    cursor: pointer;
    padding: 0;
    margin-top: 2px;
}

.gh-task-details-toggle:hover {
    text-decoration: underline;
}

.gh-task-details-toggle .hide-label {
    display: none;
}

.gh-task-details-wrap.expanded .gh-task-details-toggle .show-label {
    display: none;
}

.gh-task-details-wrap.expanded .gh-task-details-toggle .hide-label {
    display: inline;
}


/* ==========================================================================
   Task Page — Notes tooltip icon
   ========================================================================== */



/* ==========================================================================
   Task Page — Icon-only button
   ========================================================================== */
.gh-btn-icon {
    padding: var(--gh-space-1) var(--gh-space-2);
    min-width: unset;
}


/* ==========================================================================
   Tax Table Enhancements (Plot Detail)
   ========================================================================== */

/* Color dot before usage code text */
.gh-usage-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Year total row — prominent highlight */
.gh-tax-total-row td {
    background: var(--gh-primary-50) !important;
    border-top: 2px solid var(--gh-primary-light) !important;
    border-bottom: 2px solid var(--gh-primary-light) !important;
    font-weight: 700;
    font-size: var(--gh-text-base);
    color: var(--gh-gray-900);
    padding-top: var(--gh-space-3);
    padding-bottom: var(--gh-space-3);
}

/* Grand total row — dark, eye-catching */
.gh-tax-grand-total td {
    background: var(--gh-gray-800) !important;
    color: var(--gh-white) !important;
    font-weight: 700;
    font-size: var(--gh-text-md);
    padding-top: var(--gh-space-3);
    padding-bottom: var(--gh-space-3);
    border: none !important;
}

/* Zebra striping for detailed tables */
.gh-table-zebra tbody tr:nth-child(even) td {
    background: var(--gh-gray-50);
}

.gh-table-zebra tbody tr:hover td {
    background: var(--gh-primary-50);
}

/* Sticky header for scrollable tables */
.gh-table-sticky thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--gh-gray-50);
}

/* ==========================================================================
   Global Mobile Optimizations
   ========================================================================== */
@media (max-width: 767px) {
    /* Ensure all images are responsive */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Improve link tap targets */
    a {
        min-height: 32px;
        display: inline-flex;
        align-items: center;
    }

    /* Better spacing for inline elements */
    .d-flex.gap-2 {
        gap: var(--gh-space-2) !important;
    }

    .d-flex.gap-3 {
        gap: var(--gh-space-2) !important;
    }

    /* Reduce excessive margins */
    .mb-3 {
        margin-bottom: var(--gh-space-3) !important;
    }

    .mb-4 {
        margin-bottom: var(--gh-space-3) !important;
    }

    .mb-5 {
        margin-bottom: var(--gh-space-4) !important;
    }

    .mt-3 {
        margin-top: var(--gh-space-3) !important;
    }

    .mt-4 {
        margin-top: var(--gh-space-3) !important;
    }

    /* Improve modal readability */
    .modal-body {
        font-size: var(--gh-text-base);
        padding: var(--gh-space-4);
    }

    .modal-header {
        padding: var(--gh-space-3) var(--gh-space-4);
    }

    .modal-footer {
        padding: var(--gh-space-3) var(--gh-space-4);
    }

    .modal-title {
        font-size: var(--gh-text-lg);
    }
}

/* Filter Sections */
.filter-section {
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--gh-border);
}

.filter-section:last-of-type {
    border-bottom: none;
}

.filter-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gh-text-secondary);
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid var(--gh-primary);
}

.filter-section-title i {
    color: var(--gh-primary);
    margin-right: 0.25rem;
}

.filter-section .form-label {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.375rem;
    color: var(--gh-text);
}

.filter-section .form-check-label {
    font-size: 0.875rem;
}

/* Compact form controls in sidebar */
.gh-sidebar .form-control-sm,
.gh-sidebar .form-select-sm {
    font-size: 0.875rem;
}

/* ---------- Utility Classes for Common Patterns ---------- */

/* Usage Badge Colors - Replace hardcoded inline backgrounds */
.gh-badge-usage-vacant {
    background: var(--gh-warning);
    color: #000;
}

.gh-badge-usage-agricultural {
    background: var(--gh-success);
    color: #fff;
}

.gh-badge-usage-residential {
    background: var(--gh-primary);
    color: #fff;
}

.gh-badge-usage-other {
    background: var(--gh-gray-500);
    color: #fff;
}

/* Success/Warning/Danger background variants */





/* Text color utilities */
.gh-text-danger {
    color: var(--gh-danger);
}



.gh-text-muted {
    color: var(--gh-gray-600);
}

/* Flex layout utilities */











/* Grid layout utilities */






/* Alignment utilities */



/* Border utilities */
.gh-border-radius {
    border-radius: var(--gh-radius-md);
}


/* Padding utilities */

.gh-p-4 {
    padding: var(--gh-space-4);
}



/* Margin utilities */




.gh-mt-auto {
    margin-top: auto;
}

.gh-grid-full-width {
    grid-column: 1 / -1;
}




/* Font size utilities */
.gh-font-sm {
    font-size: var(--gh-text-sm);
}

.gh-font-xs {
    font-size: var(--gh-text-xs);
}



/* Font weight utilities */




/* Visibility utility */
.gh-hidden {
    display: none !important;
}

/* White space utilities */

/* Avatar circle utility */
.gh-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--gh-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.gh-avatar-gradient-purple {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.gh-avatar-neutral {
    background: var(--gh-gray-200);
    color: var(--gh-gray-600);
}

/* Rental card components */

.gh-rental-rent-highlight .gh-rent-label {
    font-size: var(--gh-text-sm);
    color: var(--gh-gray-600);
    margin-bottom: var(--gh-space-1);
}

.gh-rental-rent-highlight .gh-rent-value {
    font-size: var(--gh-text-xl);
    font-weight: 600;
    color: var(--gh-accent-700);
}

.gh-rental-rent-highlight .gh-rent-freq {
    font-size: var(--gh-text-sm);
    font-weight: 400;
    color: var(--gh-gray-600);
}



/* Responsive max-width utilities */

@media (max-width: 767px) {
    .gh-max-w-500 {
        max-width: 100%;
    }
}

/* ==========================================================================
   Scroll to Top Button
   ========================================================================== */
.gh-scroll-top {
    position: fixed;
    bottom: var(--gh-space-6);
    right: var(--gh-space-4);
    width: 48px;
    height: 48px;
    border-radius: var(--gh-radius-full);
    background: var(--gh-primary);
    color: var(--gh-white);
    border: none;
    box-shadow: var(--gh-shadow-lg);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all var(--gh-transition-base);
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--gh-text-lg);
}

.gh-scroll-top:hover {
    background: var(--gh-primary-hover);
    transform: translateY(-2px);
}

.gh-scroll-top:active {
    transform: translateY(0);
}

.gh-scroll-top.visible {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 767px) {
    .gh-scroll-top {
        bottom: max(var(--gh-space-4), env(safe-area-inset-bottom));
        right: var(--gh-space-3);
    }
}

/* ==========================================================================
   Toast Notifications
   ========================================================================== */
.toast {
    min-width: 280px;
    font-size: var(--gh-text-sm);
    box-shadow: var(--gh-shadow-lg);
}

.toast-body {
    padding: var(--gh-space-3) var(--gh-space-4);
}

@media (max-width: 767px) {
    .toast-container {
        width: 100%;
        padding: var(--gh-space-2) !important;
        left: 0;
        right: 0;
    }

    .toast {
        min-width: auto;
        width: 100%;
        max-width: 100%;
    }
}

/* ==========================================================================
   Quick Search Presets
   ========================================================================== */
.gh-quick-search-presets .badge {
    padding: 0.4rem 0.75rem;
    font-size: var(--gh-text-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--gh-transition-fast);
}

.gh-quick-search-presets .badge:hover {
    transform: translateY(-1px);
    box-shadow: var(--gh-shadow-sm);
}

@media (max-width: 767px) {
    .gh-quick-search-presets .badge {
        font-size: 11px;
        padding: 0.3rem 0.6rem;
    }
}

/* ==========================================================================
   View Mode Toggle (Simple vs Pro)
   ========================================================================== */

/* Simple Mode: Hide advanced filters */
.simple-mode .gh-advanced-filters {
    display: none !important;
}

/* Pro Mode: Show everything */
.pro-mode .gh-advanced-filters {
    display: block;
}

/* Simple Mode: Larger buttons for easier tapping */
.simple-mode .gh-btn {
    min-height: 44px;
    padding: var(--gh-space-3) var(--gh-space-4);
}

.simple-mode .gh-btn-sm {
    min-height: 40px;
}

/* Simple Mode: More spacing for easier interaction */
.simple-mode .filter-section {
    margin-bottom: var(--gh-space-3);
}

/* Pro Mode: More compact layout */
.pro-mode .filter-section {
    margin-bottom: var(--gh-space-2);
}

@media (max-width: 767px) {
    /* Simple mode on mobile: Even larger tap targets */
    .simple-mode .gh-btn {
        min-height: 48px;
        font-size: var(--gh-text-base);
    }

    .simple-mode .form-select,
    .simple-mode .form-control {
        min-height: 44px;
        font-size: 16px; /* Prevents iOS zoom */
    }
}

/* =================================================================
   Sticky Detail Page Header
   ================================================================= */

.gh-page-header-sticky {
    position: sticky;
    top: var(--gh-navbar-height);
    background: var(--gh-gray-50);
    z-index: 100;
    margin: calc(-1 * var(--gh-space-4)) calc(-1 * var(--gh-space-4)) var(--gh-space-4);
    padding: var(--gh-space-4);
    border-bottom: 1px solid var(--gh-border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

@media (max-width: 767px) {
    .gh-page-header-sticky {
        margin: calc(-1 * var(--gh-space-3)) calc(-1 * var(--gh-space-3)) var(--gh-space-3);
        padding: var(--gh-space-3);
    }
}

/* =================================================================
   Section Jump Links - Quick Navigation
   ================================================================= */

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--gh-navbar-height) + var(--gh-space-4));
}

.gh-section-jump-links {
    background: var(--gh-white);
    border: 1px solid var(--gh-border-color);
    border-radius: var(--gh-radius-md);
    padding: var(--gh-space-3) var(--gh-space-4);
    margin-bottom: var(--gh-space-5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Page-type accents: distinguish plot vs group detail at a glance */
.gh-section-jump-links--plot {
    background: var(--gh-primary-50);
    border-color: var(--gh-primary);
    border-top: 4px solid var(--gh-primary);
}
.gh-section-jump-links--plot .gh-section-jump-link {
    background: var(--gh-white);
}
.gh-section-jump-links--group {
    background: var(--gh-success-light);
    border-color: var(--gh-success);
    border-top: 4px solid var(--gh-success);
}
.gh-section-jump-links--group .gh-section-jump-link {
    background: var(--gh-white);
}
.gh-section-jump-links--group .gh-section-jump-link:hover {
    background: var(--gh-success-light);
    border-color: var(--gh-success);
    color: var(--gh-success-700);
}
.gh-section-jump-links--group .gh-jump-link-badge {
    background: var(--gh-success);
}
.gh-section-jump-links--group .gh-section-jump-link:hover .gh-jump-link-badge {
    background: var(--gh-success-700);
}

.gh-section-jump-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gh-space-2);
    justify-content: center;
}

.gh-section-jump-link {
    position: relative; /* For absolute positioning of count badge */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gh-space-1);
    padding: var(--gh-space-3) var(--gh-space-4);
    min-width: 80px;
    background: var(--gh-gray-50);
    border: 1px solid var(--gh-border-color);
    border-radius: var(--gh-radius-md);
    text-decoration: none;
    color: var(--gh-text-color);
    font-size: var(--gh-text-sm);
    font-weight: 500;
    transition: all var(--gh-transition-fast);
    /* Mobile tap target */
    min-height: 48px;
}

.gh-section-jump-link:hover {
    background: var(--gh-primary-light);
    border-color: var(--gh-primary);
    color: var(--gh-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.gh-section-jump-link:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.gh-section-jump-link i {
    font-size: 1.25rem;
}

.gh-section-jump-link span {
    font-size: var(--gh-text-xs);
    white-space: nowrap;
}

/* Count badge on jump links */
.gh-jump-link-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--gh-primary);
    color: var(--gh-white);
    font-size: 10px;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.gh-section-jump-link:hover .gh-jump-link-badge {
    background: var(--gh-primary-hover);
}

/* Orange badge variant (for detailed records count) */
.gh-jump-link-badge-orange {
    background: var(--gh-warning);
    right: auto;
    left: -6px;
}

.gh-section-jump-link:hover .gh-jump-link-badge-orange {
    background: var(--gh-warning-hover);
}

/* Mobile optimizations */
@media (max-width: 767px) {
    .gh-section-jump-links {
        margin-left: calc(-1 * var(--gh-space-4));
        margin-right: calc(-1 * var(--gh-space-4));
        border-left: none;
        border-right: none;
        border-radius: 0;
        padding: var(--gh-space-3);
    }

    .gh-section-jump-container {
        gap: var(--gh-space-2);
    }

    .gh-section-jump-link {
        flex: 1;
        min-width: 70px;
        padding: var(--gh-space-2) var(--gh-space-3);
    }

    .gh-section-jump-link i {
        font-size: 1.125rem;
    }
}

/* =================================================================
   iPhone Safe Area Insets (Notch Support)
   ================================================================= */

/* Support for iPhone notch/Dynamic Island */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }

    /* Navbar safe areas */
    .gh-navbar {
        padding-left: max(var(--gh-space-4), env(safe-area-inset-left));
        padding-right: max(var(--gh-space-4), env(safe-area-inset-right));
    }

    /* Main content safe areas */
    .gh-main {
        padding-left: max(var(--gh-space-4), env(safe-area-inset-left));
        padding-right: max(var(--gh-space-4), env(safe-area-inset-right));
        padding-bottom: max(var(--gh-space-4), env(safe-area-inset-bottom));
    }

    /* Fixed elements safe areas */
    .gh-scroll-top {
        right: max(var(--gh-space-4), calc(env(safe-area-inset-right) + var(--gh-space-2)));
        bottom: max(var(--gh-space-6), calc(env(safe-area-inset-bottom) + var(--gh-space-2)));
    }

    /* Toast container safe areas */
    .toast-container {
        top: max(var(--gh-space-3), env(safe-area-inset-top));
        right: max(var(--gh-space-3), calc(env(safe-area-inset-right) + var(--gh-space-2)));
    }
}

/* =================================================================
   Enhanced Mobile Tap Targets (WCAG 2.5.5 Level AAA)
   ================================================================= */

@media (max-width: 767px) {
    /* All buttons minimum 48px height */
    .gh-btn,
    .btn {
        min-height: 48px;
        min-width: 48px;
        padding: var(--gh-space-3) var(--gh-space-4);
    }

    .gh-btn-sm,
    .btn-sm {
        min-height: 44px;
        min-width: 44px;
        padding: var(--gh-space-2) var(--gh-space-3);
    }

    /* Nav links minimum tap target */
    .nav-link,
    .gh-breadcrumb a,
    .gh-page-header a.gh-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Form inputs minimum height */
    .form-control,
    .form-select {
        min-height: 48px;
        font-size: 16px; /* Prevents iOS zoom */
    }

    .form-control-sm,
    .form-select-sm {
        min-height: 44px;
        font-size: 16px;
    }

    /* Checkbox and radio minimum tap area */
    .form-check-input {
        width: 24px;
        height: 24px;
        margin-top: 0.125rem;
    }

    .form-check {
        min-height: 44px;
        padding-left: 2rem;
        display: flex;
        align-items: center;
    }

    /* Table action buttons */
    .gh-table-wrap .gh-btn {
        min-width: 44px;
    }

    /* Section collapse buttons */
    .gh-section-header {
        min-height: 52px;
        padding: var(--gh-space-3) var(--gh-space-4);
    }

    /* Breadcrumb links */
    .gh-breadcrumb a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: var(--gh-space-2) var(--gh-space-1);
    }

    /* Modal close buttons */
    .btn-close {
        width: 48px;
        height: 48px;
        padding: 0;
    }

    /* Dropdown items */
    .dropdown-item {
        min-height: 48px;
        padding: var(--gh-space-3) var(--gh-space-4);
        display: flex;
        align-items: center;
    }

    /* Badge links (only standalone badge links, not inline card badges) */
    a.badge {
        min-height: 32px;
        padding: 0.5rem 0.75rem;
        display: inline-flex;
        align-items: center;
        font-size: 13px;
    }

    /* Keep inline card badges compact */
    .gh-card .badge,
    .gh-card-badge .badge {
        min-height: auto;
        padding: 0.2em 0.5em;
        font-size: 11px;
    }

    /* Icon-only buttons */
    .gh-btn i:only-child {
        margin: 0;
    }

    /* Pagination */
    .pagination .page-link {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--gh-text-sm);
        padding: var(--gh-space-2);
    }

    .pagination {
        flex-wrap: nowrap;
        gap: var(--gh-space-1);
    }

    /* Per-page selector: compact on mobile */
    .gh-pagination-wrap {
        flex-direction: column;
        gap: var(--gh-space-2);
    }

    .gh-pagination-wrap .d-flex {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--gh-space-1);
    }
}


/* =================================================================
   Overview Page Mobile Enhancements
   ================================================================= */

/* Active filters: horizontally scrollable on mobile */
@media (max-width: 767px) {
    .gh-active-filters .d-flex {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: var(--gh-space-1);
    }

    .gh-active-filters .d-flex::-webkit-scrollbar {
        display: none;
    }

    .gh-filter-badge {
        flex-shrink: 0;
    }

    /* "Clear All" button stays visible */
    .gh-active-filters .ms-auto {
        flex-shrink: 0;
    }
}

/* Mobile card enhancements — larger tap area, cleaner layout */
@media (max-width: 767px) {
    .gh-card {
        /* Subtle active state for touch feedback */
        -webkit-tap-highlight-color: rgba(26, 86, 219, 0.08);
    }

    .gh-card:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }

    /* Card header: keep plot ID prominent */
    .gh-card-id {
        font-size: var(--gh-text-base);
    }

    /* Card reference: slightly more visible */
    .gh-card-ref {
        font-size: var(--gh-text-xs);
        padding-bottom: var(--gh-space-1);
    }

    /* Card footer tax: make amount prominent */
    .gh-card-tax {
        font-size: var(--gh-text-sm);
    }

    .gh-card-tax strong {
        font-size: var(--gh-text-base);
    }

    /* Task badge: full width for visibility */
    .gh-card-task-badge .gh-badge {
    max-width: 100%;
    white-space: normal;
    text-align: left;
}

.gh-card-task-badge {
        margin-top: var(--gh-space-2);
    }

    .gh-card-task-badge .gh-badge {
        display: block;
        text-align: center;
        padding: var(--gh-space-2);
        font-size: var(--gh-text-xs);
        min-height: auto;
    }
}

/* On very small screens, reduce main padding to maximize content */
@media (max-width: 374px) {
    .gh-main {
        padding: var(--gh-space-2) var(--gh-space-2);
    }

    .gh-card-link {
        padding: var(--gh-space-2);
    }

    .gh-card-meta {
        font-size: 11px;
    }
}

/* Tabs: equal-width on mobile for clean look */
@media (max-width: 479px) {
    .gh-tabs {
        gap: var(--gh-space-1);
        padding: 3px;
    }

    .gh-tab {
        font-size: var(--gh-text-xs);
        padding: var(--gh-space-2);
    }
}

/* Filter section title icons: larger touch target on mobile */
@media (max-width: 767px) {
    .filter-section {
        margin-bottom: var(--gh-space-3);
    }

    .filter-section-title {
        font-size: var(--gh-text-sm);
        padding-bottom: var(--gh-space-1);
        margin-bottom: var(--gh-space-2);
    }

    /* Quick search badges inside sidebar: proper sizing */
    .gh-sidebar .badge {
        min-height: 36px;
        font-size: 13px;
        padding: var(--gh-space-2) var(--gh-space-3);
    }
}

/* =================================================================
   Mobile Enhancements for Detail Pages
   ================================================================= */

/* Mobile "More" dropdown in page headers */
@media (max-width: 767px) {
    .gh-page-header .dropdown-menu {
        min-width: 200px;
    }

    .gh-page-header .dropdown-menu .dropdown-item {
        padding: var(--gh-space-3) var(--gh-space-4);
        font-size: var(--gh-text-base);
    }

    /* Ensure task/tax mobile cards have enough spacing */
    .gh-mobile-cards .gh-data-card + .gh-data-card {
        margin-top: var(--gh-space-2);
    }

    /* Mobile task card: ensure actions are full width */
    .gh-mobile-cards .gh-data-card-actions {
        flex-wrap: wrap;
    }

    .gh-mobile-cards .gh-data-card-actions .gh-btn {
        min-height: 44px;
    }

    /* Person badges in mobile cards */
    .gh-mobile-cards .gh-person-badge {
        margin-bottom: var(--gh-space-1);
    }

    /* Tax total row: responsive font size */
    .gh-tax-total-row td {
        font-size: var(--gh-text-sm) !important;
    }

    /* Plot detail: reduce map height on mobile */
    #plotMiniMap {
        height: 180px !important;
    }

    /* Rentals page: stack search form below title */
    .gh-page-header .gh-max-w-500 {
        width: 100%;
        max-width: 100%;
    }

    .gh-page-header .gh-max-w-500 form {
        flex: 1;
        min-width: 0;
    }

    .gh-page-header .gh-max-w-500 form input {
        min-width: 0;
    }

    /* Rental card: stack status badges vertically on small screens */
    .gh-card .gh-card-title .d-flex.gap-2 {
        gap: var(--gh-space-1) !important;
    }
}

/* Mobile back button: make it more prominent */
@media (max-width: 767px) {
    .gh-page-header .gh-btn-outline:first-child {
        font-weight: 600;
    }
}

/* ==========================================================================
   Bulk Actions Toolbar
   ========================================================================== */
.gh-bulk-toolbar {
    padding: var(--gh-space-3) var(--gh-space-4);
    background: var(--gh-primary-light);
    border-radius: var(--gh-radius-md);
    margin-bottom: var(--gh-space-3);
    border: 1px solid var(--gh-primary);
}

.gh-bulk-toolbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gh-space-2);
}

.gh-bulk-toolbar-actions {
    display: flex;
    gap: var(--gh-space-2);
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .gh-bulk-toolbar {
        padding: var(--gh-space-2) var(--gh-space-3);
    }

    .gh-bulk-toolbar-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .gh-bulk-toolbar-actions {
        flex-wrap: wrap;
    }

    .gh-bulk-toolbar-actions .gh-btn {
        flex: 1;
        min-width: 0;
        justify-content: center;
    }
}

/* ==========================================================================
   Universal Search
   ========================================================================== */

.gh-search-wrapper {
    position: relative;
    max-width: 360px;
    width: 100%;
    margin-left: auto;
    order: 1;         /* Between brand and hamburger in flex layout */
}

.gh-search-form { width: 100%; }

.gh-search-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.gh-search-icon {
    position: absolute;
    left: var(--gh-space-3);
    color: var(--gh-gray-400);
    font-size: var(--gh-text-sm);
    pointer-events: none;
    z-index: 1;
}

.gh-search-input {
    width: 100%;
    padding: 6px var(--gh-space-3);
    padding-left: calc(var(--gh-space-3) + 1.25rem + var(--gh-space-2));
    padding-right: 4.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--gh-radius-md);
    color: var(--gh-white);
    font-size: var(--gh-text-sm);
    transition: all var(--gh-transition-fast);
    outline: none;
}

.gh-search-input::placeholder { color: var(--gh-gray-400); }

.gh-search-input:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--gh-primary);
    box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.25);
}

.gh-search-spinner {
    position: absolute;
    right: 3.5rem;
    color: var(--gh-gray-400);
}

.gh-search-shortcut {
    position: absolute;
    right: var(--gh-space-3);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--gh-radius-sm);
    padding: 2px 6px;
    font-size: 11px;
    color: var(--gh-gray-400);
    font-family: var(--gh-font-mono);
    pointer-events: none;
}

/* Dropdown */
.gh-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: var(--gh-space-1);
    background: var(--gh-white);
    border-radius: var(--gh-radius-lg);
    box-shadow: var(--gh-shadow-xl);
    border: 1px solid var(--gh-border-color);
    z-index: 1050;
    max-height: 480px;
    overflow-y: auto;
    display: none;
}

.gh-search-dropdown:not(:empty) { display: block; }

.gh-search-results { padding: var(--gh-space-2) 0; }

.gh-search-category-header {
    display: flex;
    align-items: center;
    gap: var(--gh-space-2);
    padding: var(--gh-space-2) var(--gh-space-4);
    font-size: var(--gh-text-xs);
    font-weight: 600;
    color: var(--gh-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--gh-gray-100);
}

.gh-search-count {
    margin-left: auto;
    background: var(--gh-gray-100);
    border-radius: var(--gh-radius-full);
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--gh-gray-600);
}

.gh-search-item {
    display: block;
    padding: var(--gh-space-2) var(--gh-space-4);
    text-decoration: none;
    color: var(--gh-gray-800);
    transition: background var(--gh-transition-fast);
    cursor: pointer;
    border-left: 3px solid transparent;
}

.gh-search-item:hover,
.gh-search-item:focus,
.gh-search-item.gh-search-active {
    background: var(--gh-primary-50);
    border-left-color: var(--gh-primary);
    color: var(--gh-gray-900);
    text-decoration: none;
}

.gh-search-item-title {
    font-size: var(--gh-text-sm);
    font-weight: 600;
    line-height: 1.3;
}

.gh-search-item-meta {
    font-size: var(--gh-text-xs);
    color: var(--gh-gray-500);
    margin-top: 1px;
}

.gh-search-item-group {
    position: relative;
    padding-right: 40px;
}

.gh-search-item-map-btn {
    position: absolute;
    right: var(--gh-space-3);
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: var(--gh-gray-500);
    background: transparent;
    cursor: pointer;
    transition: background var(--gh-transition-fast), color var(--gh-transition-fast);
}

.gh-search-item-map-btn:hover {
    background: var(--gh-primary);
    color: #fff;
}

.gh-search-see-all {
    font-style: italic;
    font-size: var(--gh-text-xs) !important;
    color: var(--gh-primary) !important;
    font-weight: 500;
}

.gh-search-footer {
    border-top: 1px solid var(--gh-gray-200);
    padding: var(--gh-space-2) var(--gh-space-4);
    text-align: center;
}

.gh-search-footer-link {
    font-size: var(--gh-text-sm);
    color: var(--gh-primary);
    text-decoration: none;
    font-weight: 500;
}

.gh-search-footer-link:hover { text-decoration: underline; }

.gh-search-empty {
    text-align: center;
    padding: var(--gh-space-6) var(--gh-space-4);
    color: var(--gh-gray-500);
}

.gh-search-empty i {
    font-size: 1.5rem;
    display: block;
    margin-bottom: var(--gh-space-2);
}

.gh-search-empty p {
    margin: 0;
    font-size: var(--gh-text-sm);
}

/* Mobile: search sits between brand and hamburger */
@media (max-width: 991.98px) {
    .gh-search-wrapper {
        flex: 1;
        max-width: none;
        margin: 0 var(--gh-space-2);
        order: 1;
    }

    .gh-navbar .navbar-toggler {
        order: 2;
    }

    .gh-navbar .navbar-collapse {
        order: 3;
    }

    .gh-search-input {
        font-size: 16px; /* Prevents iOS zoom on focus */
        padding: 8px var(--gh-space-3);
        padding-left: calc(var(--gh-space-3) + 1.25rem + var(--gh-space-2));
        padding-right: var(--gh-space-3);
    }

    .gh-search-shortcut { display: none !important; }

    .gh-search-spinner {
        right: var(--gh-space-3);
    }

    .gh-search-dropdown {
        position: fixed;
        top: auto;
        left: var(--gh-space-3);
        right: var(--gh-space-3);
        max-height: 60vh;
    }
}

/* Very small phones: shorten placeholder */
@media (max-width: 374px) {
    .gh-search-wrapper {
        min-width: 0;
    }
}

/* ==========================================================================
   Tenant / Form Page Mobile Enhancements
   ========================================================================== */

/* Form cards: tighter padding on mobile */
@media (max-width: 767px) {
    .gh-form-card {
        padding: var(--gh-space-3);
    }

    .gh-form-card h5 {
        font-size: 14px;
    }

    /* Ensure form inputs have proper touch target size */
    .gh-form-card .form-control,
    .gh-form-card .form-select {
        min-height: 44px;
        font-size: 16px; /* Prevents iOS zoom */
    }
}

/* KPI band: 2-col grid on small mobile */
@media (max-width: 479px) {
    .gh-kpi-band {
        grid-template-columns: 1fr 1fr;
    }
}

/* ==========================================================================
   Polish layer (2026-07-18) — typography rhythm, numeric alignment, and
   Bootstrap-primary bridged onto the GH blue so the two blues never clash.
   Token-level only: no component behavior changes.
   ========================================================================== */

h1, h2, h3, h4, h5, .gh-page-title, .gh-section-header > span:first-child {
    letter-spacing: -0.015em;
    text-wrap: balance;
}

/* Numbers line up like a ledger everywhere they stack vertically */
table td, table th,
.gh-kpi-value, .gh-kpi-unit, .gh-money,
.gh-stat-value, .badge, .gh-badge {
    font-variant-numeric: tabular-nums;
}

.gh-kpi-value { letter-spacing: -0.01em; }

/* .gh-kpi-card — alias so templates using this name get a real card, not a
   bare bordered box. Same surface/padding/radius as .gh-kpi-item. */
.gh-kpi-card {
    background: var(--gh-white);
    border: 1px solid var(--gh-border-color);
    border-radius: var(--gh-radius-lg);
    padding: var(--gh-space-4);
    box-shadow: var(--gh-shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
.gh-kpi-card .gh-kpi-value { font-size: 1.375rem; font-weight: 800; line-height: 1.2; color: var(--gh-gray-900); }
.gh-kpi-card .gh-kpi-label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gh-gray-500); margin-top: 2px; }

/* .gh-num — money/number cell utility: right-aligned, ledger-aligned digits. */

/* Bridge Bootstrap's default blue (#0d6efd) onto the GH primary */
:root {
    --bs-link-color: var(--gh-primary);
    --bs-link-hover-color: var(--gh-primary-hover);
    --bs-link-color-rgb: 47, 99, 166;
    --bs-link-hover-color-rgb: 39, 83, 140;
}
.btn-primary {
    --bs-btn-bg: var(--gh-primary);
    --bs-btn-border-color: var(--gh-primary);
    --bs-btn-hover-bg: var(--gh-primary-hover);
    --bs-btn-hover-border-color: var(--gh-primary-hover);
    --bs-btn-active-bg: var(--gh-primary-hover);
    --bs-btn-active-border-color: var(--gh-primary-hover);
    --bs-btn-disabled-bg: var(--gh-primary);
    --bs-btn-disabled-border-color: var(--gh-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--gh-primary);
    --bs-btn-border-color: var(--gh-primary);
    --bs-btn-hover-bg: var(--gh-primary);
    --bs-btn-hover-border-color: var(--gh-primary);
    --bs-btn-active-bg: var(--gh-primary-hover);
    --bs-btn-active-border-color: var(--gh-primary-hover);
}
.text-primary { color: var(--gh-primary) !important; }
.bg-primary { background-color: var(--gh-primary) !important; }
.progress-bar { background-color: var(--gh-primary); }
.form-check-input:checked {
    background-color: var(--gh-primary);
    border-color: var(--gh-primary);
}
.form-control:focus, .form-select:focus {
    border-color: var(--gh-primary);
    box-shadow: 0 0 0 0.2rem rgba(47, 99, 166, 0.15);
}
.page-link { color: var(--gh-primary); }
.page-item.active .page-link {
    background-color: var(--gh-primary);
    border-color: var(--gh-primary);
}


/* ==========================================================================
   Tasks page — full-width workspace, quick-filter pills, refine bar
   (redesign 2026-07-22: sidebar dropped, filters compacted, mobile-first)
   ========================================================================== */
.gh-tasks { padding-top: var(--gh-space-4); }

.gh-tasks-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gh-space-3);
    margin-bottom: var(--gh-space-4);
}
.gh-tasks-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--gh-gray-900);
    margin: 0;
    line-height: 1.1;
}
.gh-tasks-sub {
    margin: 3px 0 0;
    font-size: var(--gh-text-sm);
    color: var(--gh-gray-500);
}

/* Filter bar — a floating card, sticky under the navbar on desktop */
.gh-tasks-filters {
    display: flex;
    flex-direction: column;
    gap: var(--gh-space-2);
    background: var(--gh-white);
    border: 1px solid var(--gh-border-color);
    border-radius: var(--gh-radius-lg);
    padding: var(--gh-space-3);
    margin-bottom: var(--gh-space-4);
    box-shadow: var(--gh-shadow-sm);
}
@media (min-width: 768px) {
    .gh-tasks-filters {
        position: sticky;
        top: var(--gh-navbar-height);
        z-index: 20;
    }
}

/* Pill rows: wrap on desktop, swipe horizontally on mobile */
.gh-pillrow {
    display: flex;
    gap: var(--gh-space-2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 1px;
    scroll-snap-type: x proximity;
}
.gh-pillrow::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
    .gh-pillrow { flex-wrap: wrap; overflow: visible; }
}

.gh-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 7px 13px;
    min-height: 38px;
    border-radius: var(--gh-radius-full);
    border: 1.5px solid var(--gh-border-color);
    background: var(--gh-white);
    color: var(--pill-fg, var(--gh-gray-700));
    font-size: var(--gh-text-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--gh-transition-fast), border-color var(--gh-transition-fast), box-shadow var(--gh-transition-fast);
    cursor: pointer;
}
.gh-pill:hover {
    background: var(--pill-bg, var(--gh-gray-50));
    border-color: var(--pill-bd, var(--gh-border-color-dark));
}
.gh-pill--active {
    background: var(--pill-bg, var(--gh-gray-50));
    border-color: var(--pill-bd, var(--gh-border-color-dark));
    box-shadow: inset 0 0 0 1px var(--pill-bd, transparent);
}
.gh-pill__count {
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--gh-gray-100);
    color: var(--gh-gray-700);
    border-radius: var(--gh-radius-full);
    padding: 1px 7px;
    min-width: 21px;
    text-align: center;
    line-height: 1.5;
}
.gh-pill--active .gh-pill__count {
    background: var(--gh-white);
    color: var(--pill-fg, var(--gh-gray-700));
}
.gh-pill__you {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.65;
    margin-left: 1px;
}

/* Pill color tokens */
.gh-pill--all        { --pill-fg:#334155; --pill-bg:#eef2f7; --pill-bd:#cbd5e1; }
.gh-pill--open       { --pill-fg:#dc2626; --pill-bg:#fef2f2; --pill-bd:#fecaca; }
.gh-pill--overdue    { --pill-fg:#991b1b; --pill-bg:#fef2f2; --pill-bd:#fca5a5; }
.gh-pill--waiting    { --pill-fg:#b45309; --pill-bg:#fffbeb; --pill-bd:#fde68a; }
.gh-pill--complete   { --pill-fg:#059669; --pill-bg:#ecfdf5; --pill-bd:#6ee7b7; }
.gh-pill--everyone   { --pill-fg:#2f63a6; --pill-bg:#eaf0f8; --pill-bd:#93c5fd; }
.gh-pill--ple        { --pill-fg:#065f46; --pill-bg:#d1fae5; --pill-bd:#6ee7b7; }
.gh-pill--poppy      { --pill-fg:#9d174d; --pill-bg:#fce7f3; --pill-bd:#f9a8d4; }
.gh-pill--pik        { --pill-fg:#1e40af; --pill-bg:#dbeafe; --pill-bd:#93c5fd; }
.gh-pill--pep        { --pill-fg:#92400e; --pill-bg:#fef9c3; --pill-bd:#fde047; }
.gh-pill--unassigned { --pill-fg:#475569; --pill-bg:#f1f5f9; --pill-bd:#cbd5e1; }

/* Refine row: search + advanced-filters popover + sort */
.gh-refine {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--gh-space-2);
    flex-wrap: wrap;
}
.gh-refine-search {
    position: relative;
    flex: 1 1 200px;
    min-width: 0;
    display: flex;
    align-items: center;
}
.gh-refine-search i {
    position: absolute;
    left: 11px;
    color: var(--gh-gray-500);
    font-size: 0.85rem;
    pointer-events: none;
}
.gh-refine-search input {
    width: 100%;
    padding: 8px 12px 8px 32px;
    border: 1px solid var(--gh-border-color);
    border-radius: var(--gh-radius-full);
    font-size: var(--gh-text-base);
    background: var(--gh-gray-50);
    color: var(--gh-gray-900);
}
.gh-refine-search input:focus {
    outline: none;
    border-color: var(--gh-primary);
    background: var(--gh-white);
    box-shadow: 0 0 0 3px rgba(47, 99, 166, 0.12);
}
.gh-refine-more > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    min-height: 38px;
    border: 1px solid var(--gh-border-color);
    border-radius: var(--gh-radius-full);
    font-size: var(--gh-text-sm);
    font-weight: 600;
    color: var(--gh-gray-700);
    background: var(--gh-white);
    white-space: nowrap;
}
.gh-refine-more > summary::-webkit-details-marker { display: none; }
.gh-refine-more[open] > summary { border-color: var(--gh-primary); color: var(--gh-primary); background: var(--gh-primary-50); }
.gh-refine-fields {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 40;
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: var(--gh-space-2);
    padding: var(--gh-space-3);
    background: var(--gh-white);
    border: 1px solid var(--gh-border-color);
    border-radius: var(--gh-radius-md);
    box-shadow: var(--gh-shadow-lg);
}
@media (min-width: 768px) {
    .gh-refine-fields { left: auto; right: 0; min-width: 240px; }
}
.gh-refine-fields label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: var(--gh-text-xs);
    font-weight: 600;
    color: var(--gh-gray-500);
    margin: 0;
}
.gh-refine-fields select {
    padding: 8px 10px;
    border: 1px solid var(--gh-border-color);
    border-radius: var(--gh-radius-sm);
    font-size: var(--gh-text-base);
    background: var(--gh-white);
    color: var(--gh-gray-900);
}
.gh-refine-go {
    flex: 0 0 auto;
    padding: 8px 14px;
    min-height: 38px;
}

/* Active-filter summary + clear */
.gh-tasks-activebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gh-space-2);
    flex-wrap: wrap;
    padding-top: var(--gh-space-2);
    margin-top: 2px;
    border-top: 1px dashed var(--gh-border-color);
}
.gh-tasks-activebar__tags {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: var(--gh-text-sm);
    color: var(--gh-gray-500);
}
.gh-tasks-activebar__tags > i { color: var(--gh-gray-400); }
.gh-tasks-activebar__clear {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--gh-text-sm);
    font-weight: 600;
    color: var(--gh-primary);
    text-decoration: none;
    white-space: nowrap;
}
.gh-tasks-activebar__clear:hover { text-decoration: underline; }

/* Enriched mobile task cards */
.gh-task-card.person-ple      { border-left: 4px solid var(--gh-person-ple-border); }
.gh-task-card.person-poppy    { border-left: 4px solid var(--gh-person-poppy-border); }
.gh-task-card.person-pik      { border-left: 4px solid var(--gh-person-pik-border); }
.gh-task-card.person-pep      { border-left: 4px solid var(--gh-person-pep-border); }
.gh-task-card.person-o        { border-left: 4px solid var(--gh-person-o-border); }
.gh-task-card.person-multiple { border-left: 4px solid var(--gh-person-multiple-border); }
.gh-task-card.person-other    { border-left: 4px solid var(--gh-person-other-border); }

.gh-task-card-plots {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
}
.gh-task-card-plots i { color: var(--gh-gray-400); font-size: 0.85rem; }
.gh-task-card-plots a { color: var(--gh-primary); text-decoration: none; }

.gh-task-card-title {
    font-weight: 600;
    font-size: var(--gh-text-base);
    color: var(--gh-gray-900);
    margin-bottom: 6px;
    line-height: 1.3;
}
.gh-task-card .gh-task-card-meta {
    background: transparent;
    padding: 0;
    gap: 6px;
    margin: 8px 0 0;
    align-items: center;
}
.gh-task-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--gh-text-xs);
    font-weight: 500;
    color: var(--gh-gray-700);
    background: var(--gh-gray-50);
    border: 1px solid var(--gh-border-color);
    border-radius: var(--gh-radius-full);
    padding: 3px 9px;
}
.gh-task-chip i { color: var(--gh-gray-400); }
.gh-task-card-notes {
    margin-top: var(--gh-space-2);
    padding: var(--gh-space-2);
    background: var(--gh-warning-light);
    border-radius: var(--gh-radius-sm);
    font-size: var(--gh-text-sm);
    color: var(--gh-gray-700);
}

/* Bigger tap targets for status pill + card actions on touch screens */
@media (max-width: 767px) {
    .gh-status-btn { padding: 0.4em 0.8em; font-size: var(--gh-text-sm); }
    .gh-task-card-footer .gh-btn { flex: 1 1 0; justify-content: center; min-height: 42px; }
    .gh-tasks-title { font-size: 1.35rem; }
    .gh-tasks-header .gh-btn span { display: inline; }
}

/* Create-modal: optional plot picker tucked behind a disclosure */
.gh-create-plots { margin: var(--gh-space-2) 0; border-top: 1px solid var(--gh-gray-100); padding-top: var(--gh-space-2); }
.gh-create-plots > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--gh-primary);
    padding: 6px 0;
}
.gh-create-plots > summary::-webkit-details-marker { display: none; }

/* Task form action bar — full-width Save on mobile, Delete kept clear of it */
.gh-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gh-space-2);
    margin-top: var(--gh-space-5);
}
.gh-form-actions .gh-form-actions__delete { margin-left: auto; }
@media (max-width: 767px) {
    .gh-form-actions .gh-btn-primary { flex: 1 1 100%; min-height: 46px; }
    .gh-form-actions .gh-btn-outline { flex: 1 1 auto; justify-content: center; min-height: 44px; }
    .gh-form-actions .gh-form-actions__delete { flex: 1 1 100%; margin-left: 0; margin-top: 2px; justify-content: center; min-height: 44px; }
}

/* Task table — clearer row separation + per-person left accent + Land Group cell
   (#taskTable = main /tasks/ page; .gh-task-table = reused on group/plot detail) */
#taskTable tbody td, .gh-task-table tbody td {
    padding-top: var(--gh-space-4);
    padding-bottom: var(--gh-space-4);
    border-bottom: 1px solid var(--gh-border-color);
}
#taskTable tbody tr:last-child td, .gh-task-table tbody tr:last-child td { border-bottom: none; }
#taskTable tbody tr.person-ple      td:first-child, .gh-task-table tbody tr.person-ple      td:first-child { box-shadow: inset 4px 0 0 var(--gh-person-ple-border); }
#taskTable tbody tr.person-poppy    td:first-child, .gh-task-table tbody tr.person-poppy    td:first-child { box-shadow: inset 4px 0 0 var(--gh-person-poppy-border); }
#taskTable tbody tr.person-pik      td:first-child, .gh-task-table tbody tr.person-pik      td:first-child { box-shadow: inset 4px 0 0 var(--gh-person-pik-border); }
#taskTable tbody tr.person-pep      td:first-child, .gh-task-table tbody tr.person-pep      td:first-child { box-shadow: inset 4px 0 0 var(--gh-person-pep-border); }
#taskTable tbody tr.person-o        td:first-child, .gh-task-table tbody tr.person-o        td:first-child { box-shadow: inset 4px 0 0 var(--gh-person-o-border); }
#taskTable tbody tr.person-multiple td:first-child, .gh-task-table tbody tr.person-multiple td:first-child { box-shadow: inset 4px 0 0 var(--gh-person-multiple-border); }
#taskTable tbody tr.person-other    td:first-child, .gh-task-table tbody tr.person-other    td:first-child { box-shadow: inset 4px 0 0 var(--gh-person-other-border); }

/* Sortable column headers (clickable th → whole cell is the sort link) */
.gh-th-sort { padding: 0 !important; }
.gh-th-sort > a {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
    padding: var(--gh-space-2) var(--gh-space-3);
    transition: color var(--gh-transition-fast);
}
.gh-th-sort > a:hover { color: var(--gh-accent-700, #27538c); }
.gh-th-sort__idle { opacity: 0.35; font-size: 0.8em; }
.gh-th-sort.is-active > a { color: var(--gh-accent-700, #27538c); font-weight: 700; }
.gh-th-sort.is-active i { color: var(--gh-accent-700, #27538c); }

.gh-lg-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    text-decoration: none;
    color: var(--gh-gray-700);
}
.gh-lg-cell + .gh-lg-cell { margin-top: 4px; }
.gh-lg-cell:hover .gh-lg-name { color: var(--gh-primary); text-decoration: underline; }
.gh-lg-num {
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--gh-primary);
    background: var(--gh-primary-50);
    border: 1px solid var(--gh-primary-light);
    border-radius: var(--gh-radius-sm);
    padding: 1px 6px;
}
.gh-lg-name {
    font-size: var(--gh-text-sm);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Task # identifier (desktop column + mobile card) */
.gh-task-num {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: var(--gh-text-sm);
    color: var(--gh-gray-500);
}
.gh-task-num-m {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: var(--gh-text-xs);
    color: var(--gh-gray-400);
    margin-right: 2px;
}

/* Universal search — top-hit row (Enter-to-jump) + match highlighting */
.gh-search-tophit {
    display: flex;
    align-items: center;
    gap: var(--gh-space-2);
    background: var(--gh-primary-50);
    border-left-color: var(--gh-primary);
    border-bottom: 1px solid var(--gh-border-color);
}
.gh-search-tophit-tag {
    flex: 0 0 auto;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gh-primary);
    background: var(--gh-white);
    border: 1px solid var(--gh-primary-light);
    border-radius: var(--gh-radius-full);
    padding: 2px 8px;
    white-space: nowrap;
}
.gh-search-tophit-body {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
}
.gh-search-tophit-body .gh-search-item-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gh-search-tophit-sub { font-size: var(--gh-text-xs); color: var(--gh-gray-500); font-weight: 400; }
.gh-search-tophit-type { flex: 0 0 auto; font-size: 0.65rem; color: var(--gh-gray-500); white-space: nowrap; }

.gh-search-item mark,
.gh-search-results mark,
.gh-page mark {
    background: #fde68a;
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}

/* Results-page top-hit banner */
.gh-tophit-banner {
    display: flex;
    align-items: center;
    gap: var(--gh-space-3);
    padding: var(--gh-space-3) var(--gh-space-4);
    margin-bottom: var(--gh-space-4);
    background: var(--gh-primary-50);
    border: 1px solid var(--gh-primary-light);
    border-radius: var(--gh-radius-lg);
    text-decoration: none;
    color: var(--gh-gray-900);
}
.gh-tophit-banner:hover { box-shadow: var(--gh-shadow-sm); color: var(--gh-gray-900); }
.gh-tophit-banner .gh-tophit-icon { font-size: 1.4rem; color: var(--gh-primary); }
.gh-tophit-banner .gh-tophit-label { font-weight: 700; }
.gh-tophit-banner .gh-tophit-type {
    margin-left: auto;
    font-size: var(--gh-text-xs);
    color: var(--gh-primary);
    font-weight: 600;
    white-space: nowrap;
}

/* ============================================================================
   Bank-account display badge — rendered by includes/_account_badge.html.
   Number-led (assigned account no.), section-colored, monospace tail.
   ========================================================================= */
.acct-badge {
    display: inline-flex; align-items: center; gap: 0.32rem;
    font-family: var(--gh-font-mono, ui-monospace, "SF Mono", Menlo, monospace);
    white-space: nowrap; vertical-align: middle; text-decoration: none;
    color: inherit; line-height: 1.4;
}
a.acct-badge:hover { text-decoration: none; }
a.acct-badge:hover .acct-num { text-decoration: underline; }
.acct-badge .acct-no {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.3rem; height: 1.3rem; padding: 0 0.3rem;
    font-weight: 800; font-size: 0.74rem; color: #fff; border-radius: 6px;
    background: var(--gh-primary, #0d9488); flex: none;
}
.acct-no.acct-no-gh { background: #ea580c; }
.acct-no.acct-no-hotel { background: #2563eb; }
.acct-no.acct-no-general { background: #16a34a; }
.acct-badge .acct-bank {
    font-weight: 700; font-size: 0.66rem; letter-spacing: 0.02em;
    padding: 0.08rem 0.36rem; border-radius: 5px;
    background: var(--gh-bg-subtle, #f1f5f9); color: var(--gh-text-muted, #64748b);
}
.acct-badge .acct-num { font-variant-numeric: tabular-nums; font-size: 0.86em; }
.acct-badge .acct-who { color: var(--gh-text-muted, #64748b); font-family: var(--gh-font-sans); }
.acct-badge .acct-warn { color: #d97706; font-weight: 700; }
.acct-badge.acct-mismatch { background: #fef3c7; border: 1px solid #f59e0b; border-radius: 999px; padding: 0.05rem 0.45rem; }
@media (prefers-color-scheme: dark) {
    .acct-badge .acct-bank { background: #2a333d; color: #9aa7b2; }
    .acct-badge.acct-mismatch { background: rgba(245,158,11,0.16); border-color: #b45309; }
}


/* ==========================================================================
   Frozen-Identity Scroll Table (Land Usage P1)
   Generalized from _rentals_master_list.html: wide money tables scroll
   INSIDE a height-capped box (so sticky header/footer have a container to
   stick to), while the first 1–2 identity columns freeze left — who/what
   never leaves the screen while the money columns scroll.
   Usage:
     <div class="gh-scroll-box">
       <table class="gh-frozen-table gh-freeze-2" style="--gh-freeze-c1: 64px">
   ========================================================================== */
.gh-frozen-table th, .gh-frozen-table td {
    padding: 8px 10px; background: var(--gh-white);
    border-bottom: 1px solid var(--gh-gray-100); vertical-align: middle;
}
.gh-frozen-table thead th {
    position: sticky; top: 0; z-index: 4;
    background: var(--gh-gray-50); color: var(--gh-gray-500);
    font-size: var(--gh-text-xs); font-weight: 700;
    letter-spacing: 0.04em; white-space: nowrap;
    border-bottom: 1px solid var(--gh-border-color);
}
.gh-frozen-table tfoot td {
    position: sticky; bottom: 0; z-index: 4;
    background: var(--gh-gray-50);
    border-top: 2px solid var(--gh-border-color-dark);
    font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.gh-frozen-table th:nth-child(1), .gh-frozen-table td:nth-child(1) {
    position: sticky; left: 0; z-index: 3;
    min-width: var(--gh-freeze-c1); max-width: var(--gh-freeze-c1);
}
.gh-frozen-table:not(.gh-freeze-2) th:nth-child(1),
.gh-frozen-table:not(.gh-freeze-2) td:nth-child(1) {
    box-shadow: 6px 0 6px -6px rgba(0, 0, 0, 0.18);
}
.gh-freeze-2 th:nth-child(2), .gh-freeze-2 td:nth-child(2) {
    position: sticky; left: var(--gh-freeze-c1); z-index: 3;
    box-shadow: 6px 0 6px -6px rgba(0, 0, 0, 0.18);
}
.gh-frozen-table thead th:nth-child(1), .gh-freeze-2 thead th:nth-child(2) { z-index: 6; }
.gh-frozen-table tfoot td:nth-child(1), .gh-freeze-2 tfoot td:nth-child(2) { z-index: 6; }
.gh-frozen-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gh-frozen-table tbody tr:hover td { background: var(--gh-primary-50); }

/* Desk-tool note — pages that are deliberately desktop-first (Book Entry,
   slot map editor) show this strip on phones instead of pretending the
   workflow fits a 390px screen. Their nav entries are hidden on mobile
   (d-none d-lg-*), but the URL keeps working: hide the door, not the room. */
.gh-desktool-note { display: none; }
@media (max-width: 991px) {
    .gh-desktool-note {
        display: flex; gap: 10px; align-items: flex-start;
        background: var(--gh-warning-light); color: var(--gh-warning);
        border-radius: var(--gh-radius-md);
        padding: 10px 14px; margin-bottom: var(--gh-space-3);
        font-size: var(--gh-text-sm); font-weight: 600;
    }
}


/* ==========================================================================
   Phone Menu Drawer (variant 3, 2026-08-02)
   Inside #mainNavbarCollapse, <lg only: 4 quick tiles + accordion sections
   that open as 2-column grids. Accordion bodies reuse .dropdown-menu /
   .dropdown-item so the mobile suite's reachability checks keep working;
   the overrides below make them static grid panels instead of popovers.
   ========================================================================== */
.gh-drawer { padding: 4px 6px 10px; }
.gh-drawer-tiles {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
    padding: 6px 2px 10px;
}
.gh-drawer-tiles a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: 56px; border-radius: 12px; text-decoration: none;
    background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.92); font-size: 0.7rem;
}
.gh-drawer-tiles a i { font-size: 1.15rem; }
.gh-drawer-tiles a:active { background: rgba(255, 255, 255, 0.16); color: #fff; }
.gh-drawer-acc {
    display: flex; align-items: center; width: 100%; min-height: 48px;
    border: 0; background: none; text-align: left;
    color: rgba(255, 255, 255, 0.92); font-size: 0.95rem;
    padding: 4px 10px; border-radius: 10px;
}
.gh-drawer-acc::after { margin-left: auto; transition: transform 0.18s ease; }
.gh-drawer-acc[aria-expanded="true"] { background: rgba(255, 255, 255, 0.05); }
.gh-drawer-acc[aria-expanded="true"]::after { transform: rotate(180deg); }
.gh-drawer .gh-drawer-sub {
    position: static; float: none; width: auto; min-width: 0;
    margin: 0 0 6px; padding: 0 4px 6px 14px;
    background: transparent; border: 0; box-shadow: none;
}
.gh-drawer .gh-drawer-sub.show,
.gh-drawer .gh-drawer-sub.collapsing {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px;
}
.gh-drawer .gh-drawer-sub .dropdown-item {
    display: flex; align-items: center; min-height: 44px;
    background: rgba(255, 255, 255, 0.05); border-radius: 10px;
    color: rgba(255, 255, 255, 0.92); font-size: 0.82rem;
    padding: 4px 10px; white-space: normal;
}
.gh-drawer .gh-drawer-sub .dropdown-item:hover,
.gh-drawer .gh-drawer-sub .dropdown-item:active { background: rgba(255, 255, 255, 0.14); color: #fff; }
.gh-drawer-row {
    display: flex; align-items: center; min-height: 48px;
    color: rgba(255, 255, 255, 0.92); text-decoration: none;
    font-size: 0.95rem; padding: 4px 10px; border-radius: 10px;
}
.gh-drawer-row:active { background: rgba(255, 255, 255, 0.1); color: #fff; }

/* ==========================================================================
   Group detail — phone density pass (2026-08-03 PWA punch list)
   ========================================================================== */

/* --- Archived records: a ghost row AFTER the live list, where the rows
   themselves will appear, instead of a button above it pushing them down. --- */
.gh-archived-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gh-space-1);
    width: 100%;
    min-height: 44px;              /* Apple HIG target */
    margin-top: var(--gh-space-3);
    padding: var(--gh-space-2) var(--gh-space-4);
    background: transparent;
    border: 1px dashed var(--gh-gray-300);
    border-radius: var(--gh-radius-md);
    color: var(--gh-gray-600);
    font-size: var(--gh-text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--gh-transition-fast), border-color var(--gh-transition-fast);
}
.gh-archived-toggle:hover,
.gh-archived-toggle:focus-visible {
    background: var(--gh-gray-50);
    border-color: var(--gh-gray-400);
    color: var(--gh-gray-800);
}

/* --- Tax summary: four short columns fit a phone once the headers stop being
   longer than the numbers under them. Long words are spans hidden < 768px. --- */
@media (max-width: 767px) {
    .gh-tax-summary .gh-th-long { display: none; }

    .gh-tax-summary {
        font-size: var(--gh-text-xs);
        table-layout: fixed;
        width: 100%;
    }
    .gh-tax-summary th,
    .gh-tax-summary td {
        padding: var(--gh-space-2) var(--gh-space-1);
        white-space: nowrap;
    }
    .gh-tax-summary th:first-child,
    .gh-tax-summary td:first-child { padding-left: var(--gh-space-2); }
    .gh-tax-summary th:last-child,
    .gh-tax-summary td:last-child { padding-right: var(--gh-space-2); }
    /* Year and the two number columns are fixed; the usage name takes the rest
       and wraps rather than widening the table. */
    .gh-tax-summary th:nth-child(1) { width: 3.1rem; }
    .gh-tax-summary th:nth-child(3) { width: 4.6rem; }
    .gh-tax-summary th:nth-child(4) { width: 5.2rem; }
    .gh-tax-summary td:nth-child(2) { white-space: normal; word-break: break-word; }

    .gh-tax-summary td { font-variant-numeric: tabular-nums; }
}

/* Year total row — was inline-styled per cell, which no media query could reach */
.gh-tax-summary .gh-tax-total-row {
    background: var(--gh-primary);
    color: #fff;
}
.gh-tax-summary .gh-tax-total-row td {
    font-weight: 700;
    padding: var(--gh-space-3) var(--gh-space-4);
}
@media (max-width: 767px) {
    .gh-tax-summary .gh-tax-total-row td { padding: var(--gh-space-2) var(--gh-space-1); }
}


/* --- Section strip pinned under the navbar on phones (PWA punch list #2).
   The page title bar used to be the sticky one while the strip that actually
   navigates scrolled away; on a phone that is backwards, so below 768px the
   title bar scrolls and the strip stays. It sits under the navbar, which owns
   the top safe-area inset, so it needs none of its own. --- */
@media (max-width: 767px) {
    .gh-page-header-sticky {
        position: static;
        box-shadow: none;
    }

    .gh-section-jump-links {
        position: sticky;
        top: var(--gh-navbar-height);
        z-index: 99;
        margin-bottom: var(--gh-space-3);
        padding: var(--gh-space-2) var(--gh-space-2);
        box-shadow: 0 2px 8px rgba(22, 32, 46, 0.08);
    }

    /* One scrollable row of pills instead of a wrapping grid of tiles */
    .gh-section-jump-container {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        justify-content: flex-start;
        gap: var(--gh-space-2);
    }
    .gh-section-jump-container::-webkit-scrollbar { display: none; }

    .gh-section-jump-link {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        gap: var(--gh-space-1);
        min-width: 0;
        min-height: 44px;              /* Apple HIG target */
        padding: var(--gh-space-2) var(--gh-space-3);
        border-radius: 999px;
        font-size: var(--gh-text-sm);
        white-space: nowrap;
    }
    .gh-section-jump-link i { font-size: 1rem; }

    /* Badges sit inline in a pill rather than floating over a tile corner */
    .gh-section-jump-link .gh-jump-link-badge {
        position: static;
        transform: none;
    }

    /* Anchor jumps must clear the navbar AND the pinned strip */
    html { scroll-padding-top: calc(var(--gh-navbar-height) + 60px); }
}

/* --- Collapsed sections carry their own headline number, so a closed page
   still answers something (PWA punch list #2, design C). Hidden once the
   section is open — the detail underneath says it better. --- */
.gh-section-peek {
    display: block;
    margin-top: 2px;
    font-size: var(--gh-text-sm);
    font-weight: 400;
    color: var(--gh-gray-600);
    line-height: 1.35;
}
.gh-section-header:not(.collapsed) .gh-section-peek { display: none; }
.gh-section-peek .gh-peek-money { color: var(--gh-gray-900); font-weight: 600; }
.gh-section-peek .gh-peek-alert { color: var(--gh-danger); font-weight: 600; }
.gh-section-peek .gh-peek-sep { color: var(--gh-gray-400); margin: 0 var(--gh-space-1); }

/* The header is a flex row; let the title column shrink so a long peek wraps
   instead of pushing the chevron off the card. */
.gh-section-header > span:first-child { min-width: 0; }

/* ── Owner-use activity chip ──────────────────────────────────────────────
   What is actually on the land (🐟 บ่อปลา), shown beside how it's classified
   (Owner Use / Agricultural). The purpose pill next to it is the one that
   carries meaning at a glance: amber ลดภาษี = earns nothing, the tax rate is
   the reason it exists. */
.gh-activity-chip {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.1rem 0.42rem; border-radius: 6px;
    font-size: 0.76rem; font-weight: 600; line-height: 1.5;
    white-space: nowrap; vertical-align: middle;
    background: rgba(22, 101, 52, 0.1); color: #166534;
    border: 1px solid rgba(22, 101, 52, 0.22);
}
.gh-activity-purpose {
    display: inline-flex; align-items: center;
    margin-left: 0.3rem; padding: 0.1rem 0.38rem; border-radius: 6px;
    font-size: 0.7rem; font-weight: 700; line-height: 1.5;
    white-space: nowrap; vertical-align: middle; color: #fff;
    background: var(--gh-gray-500, #64748b);
}
.gh-activity-purpose.gh-activity-tax_only { background: #b45309; }
.gh-activity-purpose.gh-activity-income   { background: #166534; }
.gh-activity-purpose.gh-activity-both     { background: #0f766e; }
.gh-activity-purpose.gh-activity-hold     { background: #64748b; }
.gh-activity-income {
    margin-left: 0.3rem; font-size: 0.72rem; color: var(--gh-gray-600, #64748b);
    white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────────────────
   Tax recharge chips — the Tax Payer column on the group page and the tax
   block on the tenant page. One class set for both the desktop table cell
   and the PWA card, so the two can never drift apart.

   Colour rule: "เราจ่าย" is the silent default (36 of 38 rows on G2) and
   stays flat grey. Colour is spent only on money we can still recover, and
   every chip carries a word as well as a hue — never colour alone, so the
   states survive a colour-blind reader and a sunlit phone screen.
   ───────────────────────────────────────────────────────────────────────── */
.gh-tax-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.gh-tax-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.gh-tax-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--gh-space-1);
    padding: 0.15em 0.6em;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    border-radius: var(--gh-radius-full);
    border: 1px solid transparent;
    white-space: nowrap;
}

.gh-tax-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: currentColor;
}

/* We absorb it — deliberately the quietest thing in the column. */
.gh-tax-owner {
    background: var(--gh-gray-100);
    color: var(--gh-gray-600);
    border-color: var(--gh-gray-200);
}
/* Tenant owes us. Cyan, not the primary blue — blue is links everywhere else. */
.gh-tax-tenant {
    background: var(--gh-info-light);
    color: #0e7490;
    border-color: #a5e8f2;
}
/* Tenant pays, but no tax row is linked — a data gap, not a money state. */
.gh-tax-gap {
    background: transparent;
    color: var(--gh-warning);
    border-color: var(--gh-warning);
    border-style: dashed;
}
/* We haven't paid the อปท., so the 30-day clock cannot start. */
.gh-tax-wait {
    background: var(--gh-warning-light);
    color: var(--gh-warning);
    border-color: #fcd34d;
}
/* Auto-created, nobody has confirmed it — dashed says "not real money yet". */
.gh-tax-draft {
    background: var(--gh-primary-light);
    color: var(--gh-primary);
    border-color: var(--gh-primary);
    border-style: dashed;
}
.gh-tax-billed {
    background: var(--gh-info-light);
    color: var(--gh-info);
    border-color: #a5e8f2;
}
.gh-tax-late {
    background: var(--gh-danger-light);
    color: var(--gh-danger);
    border-color: #fca5a5;
}
.gh-tax-done {
    background: var(--gh-success-light);
    color: var(--gh-success);
    border-color: #a7f3d0;
}

.gh-tax-money {
    font-size: var(--gh-text-sm);
    color: var(--gh-gray-700);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.gh-tax-money strong { color: var(--gh-gray-900); }
.gh-tax-money.is-tenant strong { color: #0e7490; }

.gh-tax-sub {
    font-size: 11px;
    color: var(--gh-gray-500);
    line-height: 1.35;
}

/* Confirm/dismiss buttons on a draft. 44px minimum on touch (Apple HIG) —
   these live inside a table cell on desktop and a card on the phone. */
.gh-tax-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gh-space-1);
    margin-top: 2px;
}
.gh-tax-actions .gh-btn { font-size: 11px; padding: 0.15rem 0.55rem; }

@media (max-width: 767px) {
    .gh-tax-actions .gh-btn {
        min-height: 44px;
        flex: 1 1 auto;
        justify-content: center;
        font-size: var(--gh-text-sm);
    }
    /* On a card the chips get a full row rather than competing with the label. */
    .gh-data-card-row .gh-tax-cell { align-items: flex-end; }
}


/* ==========================================================================
   Section Title — a plain heading between page sections
   Pages had been hand-rolling this, or borrowing .gh-analytics-section-title,
   which lives in analytics.css and so renders unstyled anywhere that file is
   not loaded (tax_year_detail.html does exactly that). One site-wide rule.
   ========================================================================== */
.gh-section-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--gh-space-2);
    font-size: var(--gh-text-lg);
    font-weight: 600;
    color: var(--gh-gray-900);
    margin: var(--gh-space-6) 0 var(--gh-space-1);
}

.gh-section-title:first-child { margin-top: 0; }

.gh-section-title .gh-title-note {
    font-size: var(--gh-text-xs);
    font-weight: 500;
    color: var(--gh-gray-500);
}

.gh-section-lede {
    font-size: var(--gh-text-sm);
    color: var(--gh-gray-500);
    max-width: 52rem;
    margin: 0 0 var(--gh-space-3);
}


/* ==========================================================================
   Callout — a flagged note that is part of the answer, not decoration
   Used where a page must keep saying what is NOT known (สวนยาง's unconfirmed
   season book, Owner Use's unsupported เกษตร rows). Bootstrap alerts don't
   match the card language, so this follows .gh-section's border + radius.
   ========================================================================== */
.gh-callout {
    border: 1px solid var(--gh-border-color);
    border-left: 4px solid var(--gh-gray-400);
    border-radius: var(--gh-radius-lg);
    background: var(--gh-white);
    padding: var(--gh-space-3) var(--gh-space-4);
    margin-bottom: var(--gh-space-3);
}

.gh-callout-title {
    font-size: var(--gh-text-sm);
    font-weight: 700;
    color: var(--gh-gray-900);
    margin: 0 0 var(--gh-space-1);
    display: flex;
    align-items: baseline;
    gap: var(--gh-space-2);
}

.gh-callout p {
    font-size: var(--gh-text-sm);
    color: var(--gh-gray-700);
    margin: 0;
}

.gh-callout p + p { margin-top: var(--gh-space-2); }

.gh-callout--warning {
    border-left-color: var(--gh-warning);
    background: var(--gh-warning-50);
}
.gh-callout--warning .gh-callout-title { color: #92400e; }
.gh-callout--warning p { color: #78350f; }

.gh-callout--danger {
    border-left-color: var(--gh-danger);
    background: var(--gh-danger-50);
}
.gh-callout--danger .gh-callout-title { color: #991b1b; }
.gh-callout--danger p { color: #7f1d1d; }

.gh-callout--info {
    border-left-color: var(--gh-primary);
    background: var(--gh-primary-50);
}


/* ==========================================================================
   Provenance tag — marks a figure as live data vs transcribed paper.
   A page that mixes the two must never make the reader guess which is which.
   ========================================================================== */
.gh-source {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.05rem 0.4rem;
    border-radius: var(--gh-radius-sm);
    border: 1px solid currentColor;
    white-space: nowrap;
    vertical-align: middle;
}
.gh-source--db { color: var(--gh-primary); }
.gh-source--paper { color: #92400e; }
/* ============================================================
   Shared form system ("B") — identity header, segmented pickers,
   conditional fieldsets, sticky save. First user: usage_record_form.
   Controller: static/landmanagement/js/gh-form.js (data-show-when).
   ============================================================ */

/* Identity header — what am I editing, before any field */
.gh-form-identity {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gh-space-2) var(--gh-space-3);
    background: var(--gh-white);
    border: 1px solid var(--gh-border-color);
    border-radius: var(--gh-radius-lg);
    padding: var(--gh-space-3) var(--gh-space-4);
    margin-bottom: var(--gh-space-4);
}
.gh-form-identity__code {
    font-family: var(--gh-font-mono);
    font-weight: 700;
    font-size: var(--gh-text-md);
    color: var(--gh-accent-700);
    background: var(--gh-primary-light);
    border-radius: var(--gh-radius-md);
    padding: 2px 10px;
}
.gh-form-identity__who { font-weight: 650; font-size: var(--gh-text-md); }
.gh-form-identity__sub {
    flex-basis: 100%;
    font-size: var(--gh-text-sm);
    color: var(--gh-gray-500);
}

/* Segmented picker — replaces a <select data-gh-seg> when JS is on */
.gh-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.gh-seg button {
    font: inherit;
    font-size: var(--gh-text-sm);
    font-weight: 550;
    cursor: pointer;
    border: 1px solid var(--gh-gray-300);
    background: var(--gh-white);
    color: var(--gh-gray-700);
    border-radius: var(--gh-radius-full);
    padding: 6px 14px;
    min-height: 38px;
}
.gh-seg button.gh-seg--on {
    background: var(--gh-primary);
    border-color: var(--gh-primary);
    color: var(--gh-white);
}
.gh-seg button:focus-visible { outline: 2px solid var(--gh-primary); outline-offset: 2px; }
select.gh-seg-replaced { display: none; }

/* Field grid — related fields pair up on desktop, stack on phones */
.gh-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gh-space-3) var(--gh-space-4);
}
.gh-form-grid .gh-form-field--full { grid-column: 1 / -1; }
.gh-form-field label {
    display: block;
    font-weight: 500;
    font-size: var(--gh-text-sm);
    color: var(--gh-gray-700);
    margin-bottom: 3px;
}
.gh-form-field .gh-form-req { color: var(--gh-danger); font-weight: 700; }
.gh-form-error { font-size: var(--gh-text-sm); color: var(--gh-danger); margin-top: 3px; }
.gh-form-field--check { display: flex; align-items: center; gap: var(--gh-space-2); }
.gh-form-field--check label { margin-bottom: 0; }

/* ── Field help icon ──────────────────────────────────────────────────────
   The label and its ⓘ share one row so the icon rides the baseline instead of
   pushing the input down. The label keeps its own margin-bottom; the row must
   not add a second one, or every field in the grid drifts 3px out of line. */
.gh-form-labelrow {
    display: flex;
    align-items: baseline;
    gap: var(--gh-space-1);
    min-width: 0;                 /* let a long Thai label wrap, not overflow */
}
.gh-form-labelrow label { margin-bottom: 3px; }
.gh-tip {
    color: var(--gh-gray-400);
    font-size: var(--gh-text-sm);
    cursor: help;
    flex: none;
    line-height: 1;
    position: relative;           /* anchor for the touch target below */
}
.gh-tip:hover, .gh-tip:focus-visible { color: var(--gh-primary); }
.gh-tip:focus-visible { outline: 2px solid var(--gh-primary); outline-offset: 2px; border-radius: 2px; }

/* Tooltips now carry real explanations, often two or three lines. Bootstrap's
   default is a 200px box, centred, that collapses newlines into one run-on
   line — unreadable for a Thai sentence that needs to contrast two fields.
   pre-line honours the line breaks in the text WITHOUT enabling HTML, so an
   admin editing a tooltip at /settings/ can never inject markup. */
.tooltip-inner {
    max-width: 340px;
    white-space: pre-line;
    text-align: left;
    line-height: 1.5;
    padding: 8px 11px;
}
@media (max-width: 767px) {
    .tooltip-inner { max-width: min(86vw, 340px); font-size: var(--gh-text-sm); }
}
@media (max-width: 767px) {
    /* Apple HIG 44px on a 15px glyph. Padding + negative margins was the first
       attempt and it lifted every label row carrying a tip from 24px to 45px,
       so fields with help sat lower than fields without across the two-column
       grid. An absolutely-positioned ::after is hit-testable (the event still
       targets the icon) but contributes nothing to layout, so the row height
       does not move at all. */
    .gh-tip { font-size: var(--gh-text-base); }
    .gh-tip::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }
}
.gh-form-note {
    font-size: var(--gh-text-sm);
    color: var(--gh-success-700);
    background: var(--gh-success-light);
    border: 1px solid var(--gh-success);
    border-radius: var(--gh-radius-md);
    padding: var(--gh-space-2) var(--gh-space-3);
}

/* Conditional fieldsets — hidden by the controller, inputs stay ENABLED so
   values round-trip unchanged; the server decides what matters (forms.clean) */
.gh-when-hidden { display: none !important; }

/* Rare fields fold away — native <details>, no JS needed */
.gh-form-more { margin-bottom: var(--gh-space-4); }
.gh-form-more > summary {
    list-style: none;
    cursor: pointer;
    background: var(--gh-white);
    border: 1px dashed var(--gh-gray-300);
    border-radius: var(--gh-radius-lg);
    padding: var(--gh-space-3) var(--gh-space-4);
    font-size: var(--gh-text-sm);
    color: var(--gh-gray-600);
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: var(--gh-space-2);
}
.gh-form-more > summary::-webkit-details-marker { display: none; }
.gh-form-more > summary strong { color: var(--gh-accent-700); }
.gh-form-more[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.gh-form-more__body {
    border: 1px solid var(--gh-border-color);
    border-top: none;
    border-radius: 0 0 var(--gh-radius-lg) var(--gh-radius-lg);
    background: var(--gh-white);
    padding: var(--gh-space-4);
}

/* Sticky save — always reachable on a long form. Sticky chrome must pad with
   env(safe-area-inset-bottom): base.html declares viewport-fit=cover, so in the
   installed PWA an unpadded bar sits under the home indicator (invariant rule). */
.gh-form-save {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gh-space-2);
    background: var(--gh-gray-50);
    border-top: 1px solid var(--gh-border-color);
    margin-top: var(--gh-space-4);
    padding: var(--gh-space-3) 0 calc(var(--gh-space-3) + env(safe-area-inset-bottom));
}
@media (max-width: 767px) {
    .gh-seg button { min-height: 44px; }
    .gh-form-grid { grid-template-columns: 1fr; }
    .gh-form-save .gh-btn-primary { flex: 1 1 100%; min-height: 46px; justify-content: center; }
    .gh-form-save .gh-btn-outline { flex: 1 1 auto; min-height: 44px; justify-content: center; }
}

/* ── Page tabs (.gh-ptabs) ───────────────────────────────────────────────────
   The strip that says "these two screens are ONE page". Born 2026-08-24 when
   Public Site + Site Analytics and Land Comps + Condo Watch each merged into a
   single door; every tab is a real <a href> carrying its own querystring, so a
   tab is bookmarkable and the back button behaves — unlike the in-page JS tabs
   (.ps-tab, .gh-tab-panel) which filter one screen's contents.

   Lives HERE, not in a page stylesheet: analytics.css taught us on 2026-08-16
   that tab CSS in a file a page doesn't load renders every panel at once and
   the tabs look dead. design-system.css is loaded by base.html on every page. */
.gh-ptabs {
    display: flex;
    gap: var(--gh-space-1);
    border-bottom: 1px solid var(--gh-border-color, #dee2e6);
    margin-bottom: var(--gh-space-4);
    overflow-x: auto;               /* mobile rule 6: the strip scrolls, the page never does */
    -webkit-overflow-scrolling: touch;
}
.gh-ptab {
    display: inline-flex;
    align-items: center;
    gap: var(--gh-space-2);
    min-height: 44px;               /* Apple HIG target — mobile rule 2 */
    padding: 0 var(--gh-space-4);
    color: var(--gh-gray-600);
    font-size: var(--gh-text-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.gh-ptab:hover { color: var(--gh-gray-900); background: var(--gh-gray-50); text-decoration: none; }
.gh-ptab:focus-visible { outline: 2px solid var(--gh-primary); outline-offset: -2px; }
.gh-ptab.active { color: var(--gh-primary); border-bottom-color: var(--gh-primary); }
.gh-ptab .gh-ptab-count {
    font-weight: 600;
    font-size: var(--gh-text-xs);
    color: var(--gh-gray-500);
    font-variant-numeric: tabular-nums;
}
.gh-ptab.active .gh-ptab-count { color: var(--gh-primary); }
/* Desk-only tabs (a scraped register, a bulk editor) still exist on a phone by
   URL — mobile rule 7 hides the door, never the room. */
@media (max-width: 991px) {
    .gh-ptab--desk { display: none; }
}

/* ── Tax panel header action (group detail + plot detail) ──────────────
   .gh-section-header is itself a <button>, so an action cannot live inside it —
   a nested button gets unnested by the browser and the click degrades into
   "expand the panel". This bar puts the action BESIDE the toggle, which also
   keeps it reachable while the panel is collapsed (its default on a phone).

   Outline, not filled: on desktop a filled button here wore the same blue as
   Edit Group sitting 60px above it, and on a phone it made the tax card the
   loudest thing on a screen that also says ค้าง ฿45,000 (Boss A, 2026-08-26). */
.gh-tax-headbar {
    display: flex;
    align-items: center;
    background: var(--gh-white);
    border-radius: var(--gh-radius-lg) var(--gh-radius-lg) 0 0;
}

.gh-tax-headbar > .gh-section-header {
    flex: 1 1 auto;
    min-width: 0;
}

.gh-tax-headbar > .gh-tax-add-btn {
    flex: 0 0 auto;
    /* Apple HIG minimum — unlike the desk-only bulk grid, this one is used on a phone. */
    min-height: 44px;
    margin-right: var(--gh-space-5);
    white-space: nowrap;
    text-decoration: none;   /* the plot page's copy is an <a> */
}

.gh-tax-add-word { margin-left: 6px; }

@media (max-width: 767px) {
    .gh-tax-headbar > .gh-tax-add-btn {
        margin-right: var(--gh-space-3);
        padding-left: var(--gh-space-3);
        padding-right: var(--gh-space-3);
    }
    /* Keep the word: a bare + beside a chevron reads as "expand", which is what
       every other chevron on these pages means. */
    .gh-tax-add-word { font-size: var(--gh-text-sm); }
}