html, body {
    min-height: 100vh;
    height: 100%;
}

/* Smooth in-page anchor scrolling (replaces inline onclick handlers).
 * Honour OS-level reduced-motion preference. */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    font-family: "Sage UI", "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    background-color: var(--ui-page-bg);
    color: var(--text-dark);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: 100%;
}

main {
    flex: 1 0 auto;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    padding-bottom: 3rem;
}

main:focus {
    outline: none;
}

/* Make the gap between page content and footer consistent across the site.
   The trailing margin can come from many sources: Bootstrap mb-* utilities
   (dashboard), custom CSS classes like .ap-section that set margin-bottom in
   their own stylesheet (settings, agents/detail, users), and the visual "last
   block" isn't always :last-child — pages often render hidden helpers after
   their content (modals, [style="display:none"] forms, .d-none alerts, inline
   <script> tags).

   We strip margin-bottom only along the chain of "last-visible-of-parent"
   elements walking from <main> downward. The chain stops as soon as a level
   has more than one visible sibling, so internal sibling spacing (e.g. the
   gap between dashboard slides in "Show all" mode) is preserved. After this
   rule the footer gap is exactly main's padding-bottom on every page. */
main > :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none):not(:has(~ :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none))),
main > :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none):not(:has(~ :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none))) > :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none):not(:has(~ :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none))),
main > :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none):not(:has(~ :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none))) > :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none):not(:has(~ :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none))) > :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none):not(:has(~ :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none))),
main > :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none):not(:has(~ :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none))) > :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none):not(:has(~ :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none))) > :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none):not(:has(~ :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none))) > :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none):not(:has(~ :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none))),
main > :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none):not(:has(~ :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none))) > :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none):not(:has(~ :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none))) > :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none):not(:has(~ :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none))) > :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none):not(:has(~ :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none))) > :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none):not(:has(~ :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none))),
main > :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none):not(:has(~ :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none))) > :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none):not(:has(~ :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none))) > :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none):not(:has(~ :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none))) > :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none):not(:has(~ :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none))) > :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none):not(:has(~ :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none))) > :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none):not(:has(~ :not(script, style, template, .modal, [hidden], [style*="display:none"], [style*="display: none"], .d-none))) {
    margin-bottom: 0 !important;
}

footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    flex-shrink: 0;
    width: 100%;
    margin-top: auto;
}

footer a.footer-link,
a.footer-link,
a.footer-link:hover,
a.footer-link:focus {
    color: var(--footer-text);
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    color: var(--ui-dark);
    font-size: 1.6rem;
    margin-bottom: 0.25rem !important;
}

h2 {
    font-size: 1.25rem;
    font-weight: 600;
}

h3, legend {
    font-size: 1.125rem;
    font-weight: 500;
}

.lead {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-muted);
}

/* Section Headings */
.section-title {
    text-align: center;
    margin: 3rem 0 1.5rem;
}

.section-title h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.section-title .underline {
    width: 3rem;
    height: 0.25rem;
    background-color: var(--table-header-bg);
    margin: 0.5rem auto;
}

/* Links */
a[disabled],
a.disabled {
    color: #9ca3af !important;
    cursor: not-allowed;
    opacity: 1;
    pointer-events: none;
    text-decoration: none;
}

/* Links */
a {
    color: #007e45; /* Standard link color */
    text-decoration: underline; /* Standard link underline */
    /* Remove default browser focus outline if applying custom focus styles */
    outline: none;
}

a:hover {
    /* Define a hover state - perhaps slightly darker or different underline */
    color: #005a31; /* Example darker green */
    text-decoration: underline;
}

a:focus-visible { /* Use focus-visible for accessibility */
    color: #007e45; /* Ensure color remains consistent on focus */
    text-decoration: none; /* Remove underline on focus for clarity with box-shadow */
    /* Using direct values */
    box-shadow: 0 2px 0 0 #333; /* Approximating --spacing050 and --colorsUtilityYin090 */
    border-bottom-left-radius: 2px; /* Approximating --borderRadius025 */
    border-bottom-right-radius: 2px; /* Approximating --borderRadius025 */
    /* Ensure focus style is distinct */
    outline: none; /* Remove default browser outline */
}

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.footer-link) {
    font-weight: 400;
    color: var(--brand-primary);
    text-decoration: none;
    padding-left: 0;
    padding-right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.footer-link):hover,
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.footer-link):focus {
    text-decoration: underline;
    color: var(--brand-secondary);
}

a:hover,
a:focus {
    text-decoration: underline;
    color: var(--brand-secondary);
}

/* Focus States for Interactive Elements */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
    outline: none;
    box-shadow: var(--link-focus-shadow);
}

/* Optional: Style for links specifically within body text if needed */
main a, .card-body a, .modal-body a {
    /* Styles specific to links within main content areas */
}

/* Style for icons within links (using Bootstrap Icons as an example) */
a .bi {
    margin-right: 0.25em; /* Space between icon and text */
    vertical-align: middle; /* Align icon vertically */
}

/* ── Page hero (rendered by <c-header heading="..." />) ──────────────
 * Used by every page that doesn't already provide its own scoped hero
 * (.profile-page .ap-head, .conn-page .conn-head, .agents-page__hero,
 * .exec-page .exec-head, .rec-stream-page .rec-head-row, etc.). The
 * Cotton component lives at web/templates/cotton/header.html. */
.page-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    font-family: "Sage UI", "Helvetica Neue", Arial, sans-serif;
}
.page-hero__body {
    min-width: 0;
    flex: 1 1 420px;
}
.page-hero__title {
    font-size: 26px;
    font-weight: 700;
    color: #161616;
    margin: 0 0 2px;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.page-hero__lead {
    font-size: 14px;
    color: #666666;
    margin: 0;
    line-height: 1.45;
}
/* The hero accepts arbitrary HTML in its slot. Tame the most common
 * embedded patterns so they don't break the lead's vertical rhythm. */
.page-hero__lead p { margin: 0 0 4px; }
.page-hero__lead p:last-child { margin-bottom: 0; }
.page-hero__lead a {
    color: var(--text-link);
    text-decoration: none;
}
.page-hero__lead a:hover { text-decoration: underline; }
.page-hero__lead .btn,
.page-hero__lead .btn-sm {
    margin-left: 4px;
}