/* TerraCore application shell — user-facing UI */
* { box-sizing: border-box; }
/* Sync note (rebase onto f1fa263): local commit 37677fa's version of this
   file was the same rule set as below, just reformatted (multi-line/spaced
   vs. this file's already-minified form) plus its own .tc-nav-tier1-*
   styling block for the local Tier-1 nav-hierarchy wrapper. That wrapper was
   dropped during the sync (see index.html's sync-note comment: the
   already-shipped accordion system, sidebarAccordion.css/.js, is the one
   canonical collapsible-group implementation), so its dedicated CSS is not
   carried forward either -- it would be dead, unreferenced selectors. The
   one genuinely new behavior 37677fa needed -- hiding a whole nav group by
   capability -- reuses the existing .tc-hidden rule immediately below
   (toggled by applyNavGroupRoleVisibility() in terracore.js) rather than a
   second hidden-element class. */
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; margin:0; background:#f4f5f7; color:#1c2430; }
.tc-app { display:flex; flex-direction:column; min-height:100vh; }
.tc-topbar { display:flex; align-items:center; justify-content:flex-end; background:#14213d; color:#fff; padding:12px 22px; flex-shrink:0; }
.tc-topbar-title { font-size:17px; font-weight:600; letter-spacing:.2px; }
.tc-topbar-title span { font-weight:400; font-size:12px; opacity:.7; margin-left:8px; }
.tc-auth-bar { font-size:13px; display:flex; align-items:center; gap:10px; }
.tc-auth-bar button { padding:5px 12px; border:none; background:#2a5d34; color:#fff; border-radius:5px; cursor:pointer; font-size:12px; }
.tc-auth-bar a { color:#cfe0ff; }
.tc-auth-form { display:flex; align-items:center; gap:6px; }
.tc-auth-form input { padding:5px 8px; border:1px solid #3a4a6b; border-radius:4px; font-size:12px; background:#1c2c4f; color:#fff; }
.tc-auth-form input::placeholder { color:#9fb0d0; }
.tc-workspace-switcher { position:relative; z-index:20; display:flex; justify-content:flex-end; align-items:center; gap:10px; min-height:42px; padding:7px 20px; background:#fff; border-bottom:1px solid #dbe3de; box-shadow:0 1px 3px rgba(11,61,46,.08); }
.tc-workspace-switcher label { display:flex; align-items:center; gap:7px; min-width:0; font-size:12px; font-weight:700; color:#29443b; }
.tc-workspace-switcher select { max-width:min(420px,55vw); min-width:190px; padding:6px 9px; border:1px solid #cbd6cf; border-radius:6px; background:#fff; color:#1c342c; }
.tc-workspace-switcher a { white-space:nowrap; color:#0b654a; font-size:12px; font-weight:700; }
.tc-shell { display:flex; flex:1; min-height:0; }
.tc-sidebar { width:220px; flex-shrink:0; background:#fff; border-right:1px solid #e2e5ea; padding:14px 0; overflow-y:auto; }
.tc-nav-group { font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:#8892a0; padding:14px 18px 4px; }
.tc-nav-item { display:block; padding:8px 18px; font-size:13.5px; color:#2a3550; text-decoration:none; border-left:3px solid transparent; }
.tc-nav-item:hover { background:#f0f3f8; }
.tc-nav-item.active { background:#eaf0ff; border-left-color:#2952cc; color:#1a2f7a; font-weight:600; }
.tc-hidden,.tc-nav-item.tc-hidden { display:none !important; }
.tc-module-item { display:flex; align-items:center; justify-content:space-between; padding:6px 18px; font-size:13px; }
.tc-module-item--active { color:#2a3550; font-weight:600; }
.tc-module-item--active a { color:inherit; text-decoration:none; }
.tc-module-item--disabled { color:#b3b9c4; cursor:default; }
.tc-module-badge { font-size:10px; text-transform:uppercase; letter-spacing:.4px; padding:2px 7px; border-radius:10px; }
.tc-module-badge--active { background:#e3f5e9; color:#1e7a44; }
.tc-module-badge--disabled { background:#eef0f4; color:#9aa2b1; }
.tc-nav-section-label { font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; color:#b3b9c4; padding:12px 18px 2px; border-top:1px solid #eef0f4; margin-top:6px; }
.tc-main { flex:1; min-width:0; padding:22px 28px; overflow-y:auto; }
.tc-breadcrumb { font-size:12.5px; color:#6b7688; margin-bottom:10px; }
.tc-breadcrumb a { color:#2952cc; text-decoration:none; }
.tc-page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:10px; }
.tc-page-header h1 { font-size:20px; margin:0; }
.tc-page-header .tc-sub { font-size:12.5px; color:#6b7688; margin-top:2px; }
.tc-btn { display:inline-block; padding:8px 16px; border:none; border-radius:6px; background:#2952cc; color:#fff; font-size:13px; cursor:pointer; text-decoration:none; }
.tc-btn:hover { background:#1f3fa3; }
.tc-btn.tc-secondary { background:#eef1f6; color:#2a3550; }
.tc-btn.tc-secondary:hover { background:#e2e7f0; }
.tc-btn.tc-danger { background:#b3261e; }
.tc-btn.tc-danger:hover { background:#8f1e18; }
.tc-btn[disabled] { opacity:.5; cursor:not-allowed; }
.tc-btn-link { background:none; border:none; padding:0; color:#b3261e; text-decoration:underline; cursor:pointer; font-size:13px; }
.tc-btn-link:hover { color:#8f1e18; }
.tc-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; margin-bottom:22px; }
.tc-card { background:#fff; border:1px solid #e2e5ea; border-radius:10px; padding:16px; }
.tc-card .tc-card-value { font-size:26px; font-weight:700; color:#14213d; }
.tc-card .tc-card-label { font-size:12px; color:#6b7688; margin-top:4px; }
.tc-card.tc-accent-green .tc-card-value { color:#1a6b3a; }
.tc-card.tc-accent-amber .tc-card-value { color:#a4700a; }
.tc-card.tc-accent-red .tc-card-value { color:#b3261e; }
/* ADR-0054 Slice 8: the 10-tab Project workspace shell. */
.tc-tabs { display:flex; flex-wrap:wrap; gap:2px; border-bottom:1px solid #e2e5ea; margin-bottom:18px; }
.tc-tab-btn { background:none; border:none; padding:10px 14px; font-size:13px; color:#6b7688; cursor:pointer; border-bottom:2px solid transparent; }
.tc-tab-btn:hover { color:#2a3550; }
.tc-tab-btn.tc-tab-btn-active { color:#2952cc; border-bottom-color:#2952cc; font-weight:600; }
.tc-panel { background:#fff; border:1px solid #e2e5ea; border-radius:10px; padding:18px; margin-bottom:18px; }
.tc-panel h2 { font-size:15px; margin:0 0 12px; }
.tc-panel h3 { font-size:13.5px; margin:18px 0 8px; color:#2a3550; }
table.tc-table { width:100%; border-collapse:collapse; font-size:13px; }
table.tc-table th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:#8892a0; border-bottom:1px solid #e2e5ea; padding:8px 10px; }
table.tc-table td { padding:9px 10px; border-bottom:1px solid #f0f2f5; vertical-align:middle; }
table.tc-table tr:hover td { background:#fafbfd; }
table.tc-table a.tc-link { color:#2952cc; text-decoration:none; font-weight:500; }
table.tc-table a.tc-link:hover { text-decoration:underline; }
.tc-empty { padding:30px; text-align:center; color:#8892a0; font-size:13px; }
/* Section 6 (Contracts page tidy-up): compact, responsive row actions --
   View + a permission-appropriate Record Payment stay inline and wrap
   cleanly on narrow viewports instead of a crowded run-on list of
   full-size buttons; currency columns right-align; long customer names
   wrap onto a second line instead of stretching the row. */
.tc-row-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
/* Estate module directive (round 2), requirement 5: Record Payment stays a
   direct, prominent action; everything else (Edit Contract, Apply Discount,
   Extend Payment Deadline, and on the Contract detail page the governance
   actions) collapses into one tidy "More" menu instead of a row of flat
   buttons. Used by contractCompleteLauncher.js's list-row injection and by
   terracore.js's Contract Overview tab. */
.tc-row-menu-wrap { position:relative; display:inline-block; }
.tc-row-menu-btn::after { content:'\25BE'; margin-left:6px; font-size:10px; }
.tc-row-menu { position:absolute; right:0; top:calc(100% + 4px); min-width:200px; background:#fff; border:1px solid #dde2ea; border-radius:8px; box-shadow:0 6px 20px rgba(20,30,60,0.14); z-index:40; display:none; padding:4px; }
.tc-row-menu.tc-open { display:block; }
.tc-row-menu-item { display:block; width:100%; text-align:left; padding:9px 12px; border:none; background:none; color:#1c2438; font-size:13px; cursor:pointer; border-radius:6px; white-space:nowrap; }
.tc-row-menu-item:hover, .tc-row-menu-item:focus { background:#eef1f6; }
.tc-row-menu-item.tc-danger-item { color:#b3261e; }
.tc-right { text-align:right; }
.tc-wrap-name { max-width:220px; white-space:normal; word-break:break-word; }
table.tc-contracts-table td.tc-right { font-variant-numeric:tabular-nums; }
.tc-badge { display:inline-block; padding:2px 9px; border-radius:10px; font-size:11px; font-weight:600; background:#eef1f6; color:#4a5468; white-space:nowrap; }
.tc-badge.tc-badge-green { background:#e4f5ea; color:#1a6b3a; }
.tc-badge.tc-badge-amber { background:#fdf1de; color:#a4700a; }
.tc-badge.tc-badge-red { background:#fbe6e5; color:#b3261e; }
.tc-badge.tc-badge-blue { background:#e7edfd; color:#2952cc; }
.tc-badge.tc-badge-gray { background:#eceef2; color:#6b7688; }
.tc-toolbar { display:flex; gap:10px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
.tc-toolbar input[type=text],.tc-toolbar input[type=search],.tc-toolbar select { padding:7px 10px; border:1px solid #d7dbe3; border-radius:6px; font-size:13px; min-width:140px; }
.tc-toolbar .tc-spacer { flex:1; }
.tc-form-section { margin-bottom:18px; }
.tc-form-section h3 { font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:#8892a0; margin:0 0 10px; border-bottom:1px solid #eef0f4; padding-bottom:6px; }
.tc-form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.tc-form-grid > label { display:flex; flex-direction:column; gap:5px; min-width:0; }
.tc-form-grid > label > input:not([type="checkbox"]):not([type="radio"]),
.tc-form-grid > label > select,
.tc-form-grid > label > textarea { width:100%; max-width:100%; min-width:0; box-sizing:border-box; }
.tc-hr-page .tc-form-grid { grid-template-columns:repeat(4,minmax(0,1fr)); align-items:start; }
.tc-hr-page .tc-form-grid > button,
.tc-hr-page .tc-form-grid > .tc-form-actions { align-self:end; }
@media (max-width:1200px) { .tc-hr-page .tc-form-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:900px) { .tc-hr-page .tc-form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.tc-field { display:flex; flex-direction:column; gap:5px; }
.tc-field label { font-size:12px; color:#4a5468; font-weight:600; }
.tc-field label .tc-optional { font-weight:400; color:#a3abb8; margin-left:4px; }
.tc-field input,.tc-field select,.tc-field textarea { padding:8px 10px; border:1px solid #d7dbe3; border-radius:6px; font-size:13.5px; font-family:inherit; }
.tc-field textarea { resize:vertical; min-height:60px; }
.tc-field .tc-hint { font-size:11.5px; color:#8892a0; }
.tc-form-actions { display:flex; gap:10px; margin-top:18px; }
.tc-search-select { position:relative; }
.tc-search-select input { width:100%; }
.tc-search-select .tc-search-results { position:absolute; top:100%; left:0; right:0; z-index:50; background:#fff; border:1px solid #d7dbe3; border-radius:6px; margin-top:3px; max-height:220px; overflow-y:auto; box-shadow:0 6px 18px rgba(20,33,61,.12); }
.tc-search-result,.tc-search-empty,.tc-search-results .tc-search-item { padding:8px 10px; font-size:13px; border-bottom:1px solid #f0f2f5; }
.tc-search-result,.tc-search-results .tc-search-item { cursor:pointer; }
.tc-search-result:hover,.tc-search-results .tc-search-item:hover { background:#f0f3f8; }
.tc-search-empty { color:#8892a0; }
.tc-search-results .tc-search-item:last-child { border-bottom:none; }
.tc-search-results .tc-search-item .tc-search-meta { color:#8892a0; font-size:11.5px; }
.tc-selected-chip { display:inline-flex; align-items:center; gap:8px; background:#eaf0ff; border:1px solid #cddcff; border-radius:8px; padding:8px 12px; font-size:13px; }
.tc-selected-chip button { border:none; background:none; color:#2952cc; cursor:pointer; font-size:12px; text-decoration:underline; padding:0; }
.tc-summary-box { background:#f7f9fc; border:1px solid #e2e5ea; border-radius:8px; padding:14px 16px; margin:14px 0; }
.tc-summary-box .tc-summary-row { display:flex; justify-content:space-between; padding:5px 0; font-size:13.5px; border-bottom:1px dashed #e2e5ea; }
.tc-summary-box .tc-summary-row:last-child { border-bottom:none; }
.tc-summary-box .tc-summary-row .tc-summary-label { color:#6b7688; }
.tc-summary-box .tc-summary-row .tc-summary-value { font-weight:600; }
.tc-tabs { display:flex; gap:4px; border-bottom:1px solid #e2e5ea; margin-bottom:16px; }
.tc-tab { padding:8px 14px; font-size:13px; cursor:pointer; color:#6b7688; border-bottom:2px solid transparent; }
.tc-tab.active { color:#1a2f7a; border-bottom-color:#2952cc; font-weight:600; }
.tc-alert { padding:10px 14px; border-radius:6px; font-size:13px; margin-bottom:14px; }
.tc-alert.tc-alert-error { background:#fbe6e5; color:#7a1712; }
.tc-alert.tc-alert-success { background:#e4f5ea; color:#14532a; }
.tc-alert.tc-alert-info { background:#e7edfd; color:#1a2f7a; }
.tc-alert.tc-alert-warn { background:#fdf3d8; color:#5c4400; }
.tc-modal-overlay { position:fixed; inset:0; background:rgba(20,33,61,.45); display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto; z-index:100; }
.tc-modal { background:#fff; border-radius:10px; width:100%; max-width:620px; padding:22px 24px; }
.tc-modal h2 { margin-top:0; font-size:17px; }
.tc-modal-close { float:right; border:none; background:none; font-size:18px; cursor:pointer; color:#8892a0; }
#tc-toast-root { position:fixed; bottom:20px; right:20px; display:flex; flex-direction:column; gap:8px; z-index:200; }
.tc-toast { background:#14213d; color:#fff; padding:10px 16px; border-radius:6px; font-size:13px; box-shadow:0 6px 16px rgba(0,0,0,.2); max-width:340px; }
.tc-toast.tc-toast-error { background:#7a1712; }
.tc-toast.tc-toast-success { background:#14532a; }
.tc-plot-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; }
.tc-plot-tile { border-radius:8px; padding:10px; font-size:12px; text-align:center; border:1px solid transparent; cursor:default; }
.tc-plot-tile .tc-plot-code { font-weight:700; display:block; margin-bottom:3px; }
.tc-plot-tile.tc-plot-available { background:#e4f5ea; color:#14532a; border-color:#bfe6cd; }
.tc-plot-tile.tc-plot-reserved { background:#fdf1de; color:#7a5306; border-color:#f6dfab; }
.tc-plot-tile.tc-plot-sold { background:#e7edfd; color:#1a2f7a; border-color:#cddcff; }
.tc-plot-tile.tc-plot-other { background:#eceef2; color:#4a5468; border-color:#dadfe8; }
.tc-muted { color:#8892a0; }
.tc-mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; }
.tc-steps { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:18px; }
.tc-step { display:flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px; background:#eef1f6; color:#6b7688; font-size:12px; font-weight:600; cursor:default; }
.tc-step .tc-step-num { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:#dadfe8; color:#4a5468; font-size:11px; }
.tc-step.tc-step-active { background:#2952cc; color:#fff; }
.tc-step.tc-step-active .tc-step-num { background:#fff; color:#2952cc; }
.tc-step.tc-step-done { background:#e4f5ea; color:#1a6b3a; cursor:pointer; }
.tc-step.tc-step-done .tc-step-num { background:#1a6b3a; color:#fff; }
.tc-choice-group { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 16px; }
.tc-choice-btn { padding:9px 16px; border-radius:8px; border:1.5px solid #dadfe8; background:#fff; color:#2a3550; font-size:13px; cursor:pointer; }
.tc-choice-btn:hover { border-color:#2952cc; }
.tc-choice-btn.tc-choice-selected { border-color:#2952cc; background:#e7edfd; color:#1a2f7a; font-weight:600; }
.tc-cart-table td.tc-right,.tc-cart-table th.tc-right { text-align:right; }
.tc-cart-empty { padding:18px; text-align:center; color:#8892a0; font-size:13px; border:1px dashed #dadfe8; border-radius:8px; }
.tc-wizard-actions { display:flex; justify-content:space-between; gap:10px; margin-top:20px; padding-top:16px; border-top:1px solid #e2e5ea; }
.tc-wizard-actions .tc-wizard-actions-right { display:flex; gap:10px; }
.tc-review-section { margin-bottom:18px; }
.tc-review-section h4 { font-size:12.5px; text-transform:uppercase; letter-spacing:.03em; color:#6b7688; margin:0 0 8px; }
.tc-inline-note { font-size:12px; color:#8892a0; margin-top:4px; }
.tc-kv-table { width:100%; border-collapse:collapse; margin-bottom:12px; }
.tc-kv-table th { text-align:left; font-weight:600; color:#6b7688; font-size:12.5px; padding:6px 12px 6px 0; vertical-align:top; width:38%; }
.tc-kv-table td { padding:6px 0; font-size:13.5px; color:#1f2937; border-bottom:1px solid #eef1f6; }
.tc-kv-table tr:last-child td { border-bottom:none; }
.tc-loading { padding:24px; text-align:center; color:#6b7688; font-size:13px; }
.tc-muted-small { font-size:11px; color:#8892a0; margin-top:2px; }

/* =========================================================================
   MOBILE-RESPONSIVE PASS (Mobile Responsive UX + Customer Form Cleanup
   milestone). Additive only -- nothing above this line changes, so the
   existing desktop experience (business workflows, authorization,
   calculations, pricing, financial figures, inventory, URLs/routes) is
   untouched. Everything below is either (a) a plain CSS rule scoped inside
   a max-width media query, so it has zero effect above the breakpoint, or
   (b) a small set of new classes (tc-menu-toggle, tc-sidebar-backdrop,
   tc-sidebar-open, tc-workspace-tabs) that only do anything once JS toggles
   them, which only happens from the new hamburger button below the same
   breakpoint. Breakpoint chosen at 900px (comfortably above the largest
   audited phone width of 430px, comfortably below typical laptop widths)
   so tablets in portrait also get the phone-friendly drawer nav rather than
   a half-broken squeeze of the desktop layout.
   ========================================================================= */

/* ---- Hamburger button: exists in the DOM at every width, but only
   visible (and only does anything) below the breakpoint. ---- */
.tc-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    padding: 0;
    margin-right: 4px;
}
.tc-menu-toggle:hover, .tc-menu-toggle:focus-visible { background: rgba(255,255,255,0.12); }
.tc-menu-toggle-bar { display: block; width: 20px; height: 2px; background: #fff; margin: 0 auto; border-radius: 2px; }

.tc-sidebar-backdrop {
    display: none;
}

@media (max-width: 900px) {
    /* Touch targets: Apple/Google guidance is ~44px minimum. Desktop's
       denser 8px/13px paddings stay for mouse use above the breakpoint. */
    .tc-nav-item { padding: 12px 18px; font-size: 14.5px; }
    /* Sync note (rebase onto f1fa263): these two rules originally targeted
       6926b85's own markup (.tc-nav-tier1-body/.tc-nav-tier1-header), which
       the sync consolidated into the canonical accordion markup -- see
       index.html's sync-note comment. Retargeted at the accordion's real
       selectors (sidebarAccordion.css) so the touch-target enlargement this
       mobile pass intended is not lost. */
    .tc-nav-section-body .tc-nav-item { padding-left: 32px; }
    .tc-nav-section-toggle { padding: 11px 8px; font-size: 13px; }
    .tc-btn { padding: 11px 18px; font-size: 14px; }
    .tc-btn-link { padding: 6px 0; }
    .tc-choice-btn { padding: 12px 16px; }
    .tc-step { padding: 10px 14px; }
    .tc-toolbar input[type=text], .tc-toolbar input[type=search], .tc-toolbar select,
    .tc-field input, .tc-field select, .tc-field textarea {
        padding: 11px 12px;
        font-size: 16px; /* >=16px prevents iOS Safari's auto-zoom-on-focus */
    }
    .tc-auth-form input { padding: 9px 10px; font-size: 14px; }
    .tc-workspace-switcher { justify-content:flex-start; flex-wrap:wrap; padding:8px 12px; }
    .tc-workspace-switcher label { flex:1 1 100%; }
    .tc-workspace-switcher select { flex:1 1 auto; max-width:100%; min-width:0; width:100%; font-size:14px; }

    /* Show the hamburger, tighten the top bar so the brand header + this
       bar together stay compact rather than eating the whole first
       screenful (Part 4/7 -- avoid excessive vertical space). */
    .tc-topbar { justify-content: space-between; padding: 8px 12px; }
    .tc-menu-toggle { display: flex; }
    .tc-auth-bar { font-size: 12.5px; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
    .tc-auth-user { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }

    /* Sidebar becomes an off-canvas drawer: fixed, off-screen by default,
       slides in when JS adds tc-sidebar-open to #tc-app. Every existing nav
       link, section label and role-visibility class (tc-hidden,
       tc-requires-*) is untouched -- this only repositions the same <nav>
       element, it does not rebuild it. */
    .tc-shell { position: relative; }
    .tc-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 82vw;
        max-width: 320px;
        z-index: 210;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        box-shadow: 2px 0 18px rgba(20,33,61,0.25);
    }
    #tc-app.tc-sidebar-open .tc-sidebar { transform: translateX(0); }
    #tc-app.tc-sidebar-open .tc-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(20,33,61,0.45);
        z-index: 205;
    }
    .tc-main { padding: 16px 14px; }

    /* ---- Dashboard / summary cards: 2-up on phones instead of an
       auto-fill grid that can squeeze 4-5 tiny cards onto one row. ---- */
    .tc-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .tc-card { padding: 12px; }
    .tc-card .tc-card-value { font-size: 21px; }

    /* ---- Forms: force a single column regardless of how wide a field's
       own minmax() would otherwise allow, so labels sit directly above
       their inputs (Part 5). ---- */
    .tc-form-grid { grid-template-columns: 1fr !important; }
    .tc-page-header { flex-direction: column; align-items: flex-start; }
    .tc-page-header > * { width: 100%; }
    .tc-wizard-actions { flex-direction: column-reverse; align-items: stretch; }
    .tc-wizard-actions .tc-wizard-actions-right { flex-direction: column; }
    .tc-wizard-actions .tc-wizard-actions-right .tc-btn { width: 100%; text-align: center; }

    /* ---- Tables (Part 6): every table.tc-table in the app -- Inventory,
       Customers, Contracts, Payments, Receipts, Allocations, Agents,
       Reports, Users, Pricing/Fees -- gets the same treatment without
       touching the ~50 individual render functions that build them: the
       table itself becomes its own horizontally-scrollable region ("a
       horizontally scrollable table inside a contained area", one of the
       explicitly acceptable patterns) instead of blowing out the whole
       page's width. No columns are hidden and no data is dropped -- every
       row/column a desktop user sees is still reachable, just via a
       sideways swipe instead of a page-wide overflow. Per-table stacked-
       card redesigns are a larger, per-table design decision deferred per
       Part 17 (see final report). */
    table.tc-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    table.tc-table thead, table.tc-table tbody { display: table; width: 100%; min-width: 480px; }

    /* ---- Contract Workspace tabs (Part 8): 9 tabs as wrapping pills ate
       several rows of vertical space above the fold. Below the breakpoint
       the same .tc-step pills become a single horizontally-scrollable
       strip instead -- scoped to tc-workspace-tabs only, so the Sales
       Entry wizard's own step indicator (also built from .tc-step) keeps
       its normal wrapping behavior; a short wizard's 3-5 steps were never
       the problem Part 8 described. */
    .tc-workspace-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .tc-workspace-tabs .tc-step { flex-shrink: 0; }

    /* ---- Modals (Part 11): less outer padding so the dialog itself gets
       more of a narrow screen; body/overlay already scroll internally. ---- */
    .tc-modal-overlay { padding: 0; align-items: stretch; }
    .tc-modal { max-width: none; width: 100%; min-height: 100%; border-radius: 0; padding: 16px 16px 24px; }
}

@media (max-width: 480px) {
    /* Smallest audited widths (320-430px): cards drop to a single column
       so KPI values stay readable without shrinking type further. */
    .tc-cards { grid-template-columns: 1fr; }
}

/* Preserve one shared column grid and readable names on narrow screens. */
.tc-contracts-scroll { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tc-contracts-scroll table.tc-contracts-table { display:table; min-width:1080px; overflow:visible; table-layout:auto; }
.tc-contracts-scroll table.tc-contracts-table thead { display:table-header-group; }
.tc-contracts-scroll table.tc-contracts-table tbody { display:table-row-group; }
.tc-contracts-scroll table.tc-contracts-table td.tc-wrap-name { min-width:180px; width:220px; white-space:normal; word-break:normal; overflow-wrap:normal; }
.tc-contracts-scroll table.tc-contracts-table td.tc-mono { white-space:nowrap; }

/* ADR-0039 (Construction Project Workspace): Work Package hierarchy tree,
   an inline sub-panel for expanded detail/edit forms, and the Activity
   filter row. Minimal, reused across all three Work Package/Activity/
   Milestone panels rather than one-off styles per panel. */
.tc-tree-list { list-style:none; margin:0; padding:0; }
.tc-tree-list .tc-tree-list { margin-top:4px; }
.tc-tree-list li { padding:4px 0; }
.tc-tree-link { color:#2952cc; text-decoration:none; font-weight:500; cursor:pointer; }
.tc-tree-link:hover, .tc-tree-link:focus { text-decoration:underline; }
.tc-panel-inset { background:#f7f8fa; border:1px solid #e2e5ea; border-radius:8px; padding:14px; margin-top:8px; }
.tc-fc-action-form { grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); clear:both; overflow:hidden; }
.tc-fc-action-form .tc-field { min-width:0; }
.tc-fc-action-form .tc-field input,.tc-fc-action-form .tc-field select { width:100%; min-width:0; box-sizing:border-box; }
.tc-fc-action-form .tc-form-section { grid-column:1/-1; margin:0; }
.tc-fc-form-actions { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.tc-filter-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.tc-filter-row select { padding:6px 8px; border:1px solid #d7dbe2; border-radius:6px; font-size:13px; }

/* Navigation hierarchy correction: Construction now sits inside the same
   "Modules & Services" wrapper as Real Estate's own groups (no longer a
   separate top-level peer), directly after Real Estate Administration.
   A small visual break (matching .tc-nav-section-label's own existing
   border/margin values exactly, for visual consistency) keeps it reading
   as its own module rather than another Real Estate item. */
.tc-nav-modules-group > .tc-nav-section[data-accordion-group="construction"] {
  border-top: 1px solid #eef0f4;
  margin-top: 6px;
  padding-top: 6px;
}

/* Construction usability pass: the project workspace contains ten distinct
   work areas and several wide operational ledgers. Keep those surfaces
   readable and contained at every desktop/tablet width. These rules are
   route-scoped so they cannot alter Real Estate, HR, Inventory or Platform
   Administration screens. */
.tc-construction-page { min-width:0; }
.tc-construction-page .tc-panel,
.tc-construction-page .tc-panel-inset,
.tc-construction-page .tc-tab-panel { min-width:0; max-width:100%; }

/* One compact, scrollable tab row prevents the ten project areas from
   consuming three or four rows before the page content starts. */
.tc-construction-page > .tc-tabs {
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  gap:4px;
  padding-bottom:3px;
}
.tc-construction-page > .tc-tabs .tc-tab-btn {
  flex:0 0 auto;
  white-space:nowrap;
}

/* Stable columns stop fields and labels from colliding when a panel has a
   mixture of short and long controls. Section copy and action rows always
   receive a full row. */
.tc-construction-page .tc-form-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
}
.tc-construction-page .tc-form-grid > *,
.tc-construction-page .tc-field,
.tc-construction-page .tc-field label { min-width:0; max-width:100%; }
.tc-construction-page .tc-field input,
.tc-construction-page .tc-field select,
.tc-construction-page .tc-field textarea,
.tc-construction-page .tc-form-grid > label > input,
.tc-construction-page .tc-form-grid > label > select,
.tc-construction-page .tc-form-grid > label > textarea {
  width:100%;
  min-width:0;
  max-width:100%;
}
.tc-construction-page .tc-form-grid > .tc-form-section,
.tc-construction-page .tc-form-grid > .tc-form-actions,
.tc-construction-page .tc-form-grid > .tc-fc-form-actions,
.tc-construction-page .tc-form-grid > p,
.tc-construction-page .tc-form-grid > .tc-alert,
.tc-construction-page .tc-form-grid > .tc-inline-note { grid-column:1/-1; }
.tc-construction-page .tc-form-actions,
.tc-construction-page .tc-fc-form-actions,
.tc-construction-page .tc-row-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  min-width:0;
}
.tc-construction-page .tc-page-header > div { min-width:0; max-width:100%; }
.tc-construction-page .tc-page-header > div .tc-btn { margin:2px; }
.tc-construction-page .tc-btn { max-width:100%; white-space:normal; text-align:center; }

/* Every operational table stays inside its panel. The table retains all
   columns and becomes horizontally scrollable when the data needs more room. */
.tc-construction-page table.tc-table {
  display:block;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}
.tc-construction-page table.tc-table thead,
.tc-construction-page table.tc-table tbody {
  display:table;
  width:100%;
  min-width:680px;
}
.tc-construction-page table.tc-table th,
.tc-construction-page table.tc-table td { overflow-wrap:anywhere; }
.tc-construction-page table.tc-table td .tc-btn { margin:2px; white-space:nowrap; }
.tc-construction-page .tc-kv-table { table-layout:fixed; max-width:100%; }
.tc-construction-page .tc-kv-table th { width:min(240px,35%); }
.tc-construction-page .tc-kv-table td { overflow-wrap:anywhere; }

/* Financial and summary values can be long; allow them to wrap within the
   card instead of widening the whole page. */
.tc-construction-page .tc-cards {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));
}
.tc-construction-page .tc-card,
.tc-construction-page .tc-card-value,
.tc-construction-page .tc-card-label { min-width:0; overflow-wrap:anywhere; }
.tc-construction-page .tc-card .tc-card-value { font-size:clamp(18px,2vw,26px); }

@media (max-width:1280px) {
  .tc-construction-page .tc-form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .tc-construction-page .tc-form-grid { grid-template-columns:1fr; }
  .tc-construction-page .tc-panel { padding:14px; }
  .tc-construction-page table.tc-table thead,
  .tc-construction-page table.tc-table tbody { min-width:560px; }
  .tc-construction-page .tc-form-actions .tc-btn,
  .tc-construction-page .tc-fc-form-actions .tc-btn { flex:1 1 100%; }
}

/* Progressive disclosure across all Construction project tabs. */
.tc-construction-page .tc-construction-disclosure > summary {
  cursor:pointer;
  padding:12px 4px;
  font-size:14px;
  font-weight:650;
  color:#243b33;
  line-height:1.5;
}
.tc-construction-page .tc-construction-disclosure > summary:hover { color:#087857; }
.tc-construction-page .tc-construction-disclosure > summary:focus-visible { outline:2px solid #087857; outline-offset:3px; border-radius:4px; }
.tc-construction-page .tc-construction-disclosure[open] > summary { border-bottom:1px solid #e2e5ea; margin-bottom:14px; }
.tc-construction-page .tc-construction-disclosure-body { min-width:0; padding:4px 0 8px; }
.tc-construction-page .tc-construction-subsection { border:1px solid #e2e5ea; border-radius:8px; padding:0 12px; margin:12px 0; background:#fafcfb; }

/* Give record search its own full row, including on mobile. */
.tc-record-search-panel{display:block!important;width:100%;box-sizing:border-box;min-width:0}
#tc-contract-search,#tc-customer-search{display:block!important;width:100%!important;max-width:none!important;min-height:48px;font-size:16px;line-height:1.5;border:1px solid #cbd5e1;border-radius:7px;padding:12px;box-sizing:border-box}
.tc-record-search-panel>label{display:block;margin-bottom:8px;font-weight:600}
.tc-saved-sale-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid #e2e5ea}

.tc-legacy-wizard-step[hidden]{display:none!important}
.tc-legacy-wizard-step>details{border:1px solid #e2e5ea;border-radius:8px;margin:16px 0;padding:14px}
.tc-legacy-wizard-step summary{font-weight:600;cursor:pointer;padding:8px 0}
.tc-legacy-wizard-step details[open]>summary{margin-bottom:14px}
#tc-legacy-review details{border-bottom:1px solid #e2e5ea;padding:10px 0}
#tc-legacy-pricing-lines input{min-width:130px;width:100%;box-sizing:border-box}
#tc-legacy-wizard-error{color:#b3261e}
#tc-legacy-steps button{border:0;cursor:pointer;text-align:left;font-family:inherit}
#tc-legacy-form [hidden]{display:none!important}
.tc-legacy-wizard-step details{max-width:100%;box-sizing:border-box}

/* Audited payment corrections: full form, legible dates and charge allocations. */
.pc-dialog.tc-modal { max-width:1080px; width:100%; box-sizing:border-box; padding:0; overflow:hidden; }
.pc-dialog .tc-modal-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; border-bottom:1px solid #e2e8f0; }
.pc-dialog .tc-modal-header h3 { margin:0; font-size:20px; }
.pc-dialog .tc-modal-body { max-height:80vh; overflow-y:auto; padding:20px 24px 0; }
.pc-editor { display:grid; gap:16px; }
.pc-overview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; background:#f1f5f9; padding:16px; border-radius:8px; }
.pc-overview span,.pc-overview strong { display:block; }
.pc-overview span { font-size:12px; color:#64748b; margin-bottom:4px; }
.pc-overview strong { font-size:17px; overflow-wrap:anywhere; }
.pc-help { margin:0; color:#526174; line-height:1.5; }
.pc-payment { min-width:0; padding:20px; margin:0 0 16px; border:1px solid #dce3e8; border-radius:10px; }
.pc-payment legend { padding:0 8px; font-weight:700; }
.pc-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-bottom:18px; }
.pc-fields>label,.pc-reason { display:grid; align-content:start; gap:7px; min-width:0; font-weight:600; }
.pc-fields .pc-wide { grid-column:1/-1; }
.pc-editor input:not([type="checkbox"]):not([type="hidden"]),.pc-editor select,.pc-editor textarea { width:100%; min-width:0; box-sizing:border-box; min-height:42px; border:1px solid #cbd5e1; border-radius:6px; padding:9px 11px; font:inherit; font-weight:400; background:#fff; }
.pc-editor input[readonly],.pc-editor select:disabled { background:#f1f5f9; color:#475569; }
.pc-checkbox { display:flex; align-items:flex-start; gap:9px; margin:12px 0; line-height:1.5; }
.pc-checkbox input { flex:0 0 auto; margin-top:4px; }
.pc-allocation-wrap { overflow:auto; margin-top:12px; border:1px solid #e2e8f0; border-radius:8px; }
.pc-allocation-table { width:100%; min-width:540px; table-layout:fixed; }
.pc-allocation-table th:last-child,.pc-allocation-table td:last-child { width:210px; }
.pc-allocation-table small { display:block; color:#64748b; margin-top:5px; overflow-wrap:anywhere; font-size:11px; }
.pc-allocation-table input { text-align:right; font-variant-numeric:tabular-nums; }
.pc-allocation-status { padding:10px 12px; background:#f8fafc; border-radius:6px; font-variant-numeric:tabular-nums; }
.pc-error { color:#b91c1c; margin:0; }
.pc-editor #pc-preview:not(:empty) { padding:14px; background:#ecfdf5; border:1px solid #a7f3d0; border-radius:8px; line-height:1.5; }
.pc-actions { position:sticky; bottom:0; display:flex; justify-content:flex-end; gap:12px; flex-wrap:wrap; padding:16px 0; background:#fff; border-top:1px solid #e2e8f0; z-index:2; }
@media(max-width:760px) { .pc-fields { grid-template-columns:repeat(2,minmax(0,1fr)); } .pc-overview { grid-template-columns:1fr; } .pc-dialog .tc-modal-body,.pc-dialog .tc-modal-header { padding-left:16px; padding-right:16px; } }
@media(max-width:520px) { .pc-fields { grid-template-columns:1fr; } .pc-payment { padding:12px; } .pc-actions .tc-btn { flex:1; } }

/* Contract workspace: distinguish saved accounts from HomeBuild proposals. */
.tc-contract-header.tc-page-header { justify-content:flex-start; align-items:center; gap:10px; }
.tc-contract-header h1 { margin-right:8px; }
.tc-contract-header .tc-badge { width:auto; }
#tc-contract-tabs { gap:6px; padding-bottom:12px; margin-bottom:18px; border-bottom:1px solid #e2e8f0; }
#tc-contract-tabs .tc-step { padding:9px 14px; border-radius:7px; white-space:nowrap; }
.tc-contract-summary { background:#fff; border:1px solid #dbe4df; border-radius:12px; padding:22px; margin-bottom:18px; }
.tc-contract-summary-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:18px; }
.tc-contract-summary-heading h2 { margin:0 0 6px; font-size:18px; }
.tc-contract-summary-heading p { margin:0; color:#64748b; }
#tc-contract-tab-body .tc-contract-money-cards { display:grid; grid-template-columns:repeat(3,minmax(230px,1fr)); margin-bottom:14px; }
#tc-contract-tab-body .tc-contract-money-cards .tc-card { min-height:0; padding:18px; }
#tc-contract-tab-body .tc-contract-money-cards .tc-card-value { white-space:nowrap; overflow-wrap:normal; word-break:normal; font-size:clamp(19px,1.7vw,27px); font-variant-numeric:tabular-nums; }
.tc-contract-saved-note { margin:0; padding:12px 14px; border-radius:8px; color:#526174; background:#f8fafc; line-height:1.5; }
.tc-homebuild-workspace { max-width:1450px; }
.tc-homebuild-workspace .hb-panel { margin:0; padding:24px; }
.tc-homebuild-workspace .hb-panel h2 { font-size:20px; margin:0 0 7px; }
.tc-homebuild-workspace .hb-intro { color:#64748b; margin:0 0 18px; }
.hb-panel .hb-nav { display:flex; flex-wrap:wrap; gap:7px; padding-bottom:16px; margin-bottom:20px; border-bottom:1px solid #e2e8f0; }
.hb-panel .hb-nav button { background:#f8fafc; border:1px solid #dbe3e8; color:#475569; border-radius:7px; padding:9px 13px; font:inherit; cursor:pointer; }
.hb-panel .hb-nav button.hb-nav-active { background:#0b6b50; border-color:#0b6b50; color:white; font-weight:600; }
.hb-section[hidden] { display:none!important; }
.hb-section { line-height:1.55; }
.hb-section>details { border:1px solid #e2e8f0; border-radius:8px; padding:3px 16px; margin:12px 0; background:#fff; }
.hb-section>details>summary { font-weight:600; }
.hb-panel .hb-grid { grid-template-columns:repeat(auto-fit,minmax(235px,1fr)); gap:14px; }
.hb-panel .hb-metric { background:#f8fafc; border:1px solid #e2e8f0; border-radius:9px; padding:16px; min-width:0; }
.hb-panel .hb-metric span,.hb-panel .hb-metric small { display:block; color:#64748b; font-size:13px; }
.hb-panel .hb-metric strong { display:block; margin:7px 0; font-size:clamp(20px,1.7vw,26px); white-space:nowrap; word-break:normal; overflow-wrap:normal; color:#132b24; font-variant-numeric:tabular-nums; }
.hb-panel .hb-primary-metrics .hb-metric { background:#ecfdf5; border-color:#b8e0ce; }
.hb-panel .hb-comparison { margin:18px 0; padding:0; border:0; background:transparent; }
.hb-panel .hb-comparison details { margin-top:18px; border-top:1px solid #e2e8f0; }
.hb-section-label { font-weight:600; margin:22px 0 12px; color:#334155; }
.hb-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; margin:16px 0; }
.hb-facts dt { color:#64748b; font-size:12px; }
.hb-facts dd { margin:5px 0 0; font-weight:600; }
.hb-review-state { border-left:4px solid #d49a27; background:#fffbeb; padding:14px 16px; border-radius:6px; margin:18px 0; }
.hb-review-state p { margin:6px 0 0; }
.hb-review-blockers { background:#fff7ed; border:1px solid #fed7aa; border-radius:8px; padding:14px 16px; margin:16px 0; }
.hb-review-blockers ul { margin:8px 0 0; padding-left:20px; }
.hb-panel .hb-review-controls { display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; padding:16px; border-radius:8px; background:#f8fafc; }
.hb-review-controls label { display:grid; gap:7px; }
.hb-review-controls input { max-width:180px; min-height:42px; border:1px solid #cbd5e1; border-radius:6px; }
.hb-review-controls small { flex-basis:100%; color:#64748b; order:3; }
.hb-panel button:not([data-hb-nav]) { border:1px solid #cbd5e1; border-radius:7px; cursor:pointer; }
.hb-panel textarea { width:100%; box-sizing:border-box; padding:10px; border:1px solid #cbd5e1; border-radius:7px; }
.hb-panel .hb-check { display:flex; gap:8px; align-items:flex-start; margin:14px 0; }
.hb-panel .hb-check input { width:auto; }
@media(max-width:950px) { #tc-contract-tab-body .tc-contract-money-cards { grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); } }
@media(max-width:600px) { .tc-contract-summary,.tc-homebuild-workspace .hb-panel { padding:16px; } #tc-contract-tab-body .tc-contract-money-cards { grid-template-columns:1fr; } .hb-panel .hb-grid { grid-template-columns:1fr; } .hb-panel .hb-nav { flex-wrap:nowrap; overflow:auto; } .hb-panel .hb-nav button { flex-shrink:0; } .hb-panel .hb-review-controls { align-items:stretch; } }

/* HR loan setup keeps repayment planning separate from consent and approval. */
.tc-hr-page .hr-loan-create { margin-top:18px; }
.tc-hr-page .hr-loan-create > summary { padding:12px 0; cursor:pointer; font-weight:600; }
.tc-hr-page .hr-loan-form { margin-top:12px; }
.tc-hr-page .hr-loan-form fieldset { min-width:0; margin:0 0 20px; padding:18px; border:1px solid #dfe5e3; border-radius:8px; }
.tc-hr-page .hr-loan-form legend { padding:0 8px; font-weight:600; }
.tc-hr-page .hr-loan-form input,.tc-hr-page .hr-loan-form select { padding:9px 10px; min-height:40px; border:1px solid #cbd5d1; border-radius:5px; box-sizing:border-box; max-width:100%; }
.tc-hr-page .hr-loan-form [hidden] { display:none !important; }
.tc-hr-page .hr-plan-actions { margin-top:16px; }
.tc-hr-page .hr-plan-summary { margin-top:12px; padding:12px; border-radius:6px; background:#edf5f1; font-variant-numeric:tabular-nums; }
.tc-hr-page .hr-installments { min-width:520px; }
.tc-hr-page .hr-installments input { width:100%; min-width:130px; }
.tc-hr-page .hr-loan-form button:disabled { opacity:.55; cursor:not-allowed; }
.tc-hr-page .hr-loan-message { min-height:20px; }
@media(max-width:600px) { .tc-hr-page .hr-loan-form fieldset { padding:12px; } }

/* Payroll setup uses full-width sections; settlement inputs stay out of regular payroll. */
.tc-hr-page .hr-payroll-builder { margin:24px 0; padding:20px; border:1px solid #dfe5e3; border-radius:8px; }
.tc-hr-page .hr-payroll-builder fieldset { min-width:0; margin:18px 0; padding:18px; border:1px solid #dfe5e3; border-radius:7px; }
.tc-hr-page .hr-payroll-builder legend { padding:0 8px; font-weight:600; }
.tc-hr-page .hr-payroll-builder input,.tc-hr-page .hr-payroll-builder select,.tc-hr-page .hr-payroll-builder textarea { width:100%; min-width:0; max-width:100%; padding:9px 10px; border:1px solid #cbd5d1; border-radius:5px; box-sizing:border-box; }
.tc-hr-page .hr-payroll-builder .hr-payroll-type { display:flex; flex-direction:column; gap:6px; max-width:480px; font-weight:600; }
.tc-hr-page .hr-payroll-builder [hidden] { display:none !important; }
.tc-hr-page .hr-payroll-builder .tc-form-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.tc-hr-page .hr-payroll-notes { display:flex; flex-direction:column; gap:6px; }
.tc-hr-page .hr-payroll-regular { padding:4px 0; }
.tc-hr-page .hr-payroll-builder summary,.tc-hr-page .hr-payroll-run summary { cursor:pointer; padding:8px 0; }
.tc-hr-page .hr-final-summary { padding:12px; background:#edf5f1; border-radius:6px; font-variant-numeric:tabular-nums; }
.tc-hr-page .hr-payroll-run { margin-top:24px; padding-top:18px; border-top:1px solid #dfe5e3; }
.tc-hr-page .hr-payroll-breakdown { min-width:0; }
.tc-hr-page .hr-payroll-breakdown[open] { min-width:0; max-width:100%; }
.tc-hr-page .hr-payroll-builder button:disabled { opacity:.55; cursor:not-allowed; }
@media(max-width:600px) { .tc-hr-page .hr-payroll-builder { padding:12px; } .tc-hr-page .hr-payroll-builder fieldset { padding:12px; } }

.tc-hr-page .hr-payroll-final .hr-settlement-wide { grid-column:span 2; }
@media(max-width:600px) { .tc-hr-page .hr-payroll-final .hr-settlement-wide { grid-column:span 1; } }

.tc-hr-page .hr-loan-amendment { margin:12px 0; padding:12px; border:1px solid #dfe5e3; border-radius:8px; }
.tc-hr-page .hr-loan-amendment > summary { cursor:pointer; font-weight:600; }
.tc-hr-page .loan-amendment-review { display:flex; flex-wrap:wrap; gap:10px; align-items:end; margin-top:14px; }
.tc-hr-page .loan-amendment-review label { display:grid; gap:5px; flex:1 1 240px; }
.tc-hr-page .loan-amendment-review [role="alert"] { flex-basis:100%; }