html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

calcite-shell {
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
}

calcite-shell::part(content) {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

.main-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

footer.footer {
    margin-top: auto;
}

.page-title {
    padding: 1.25rem 1rem 0;
}

.page-title .appname {
    margin-bottom: 0;
}

.calcite-navigation__content-end {
    gap: 0.5rem;
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    max-width: 100%;
    min-width: 0;
    row-gap: 0.25rem;
    column-gap: 0.75rem;
}

.nav-links calcite-menu {
    width: 100%;
    flex-wrap: wrap;
    column-gap: 0.75rem;
}

.mobile-nav-menu {
    display: none;
}

.mobile-nav-menu calcite-button {
    --calcite-color-foreground-1: var(--calcite-color-text-1);
    --calcite-color-brand: var(--calcite-color-text-1);
    color: var(--calcite-color-text-1);
}

calcite-navigation {
    --calcite-color-foreground-1: #f8f9fa;
    position: relative;
    z-index: 5;
}

calcite-navigation-logo::part(logo) {
    width: 56px;
    height: 56px;
}

calcite-navigation-logo:focus,
calcite-navigation-logo:focus-visible,
calcite-navigation-logo:focus-within,
calcite-navigation-logo::part(logo):focus,
calcite-navigation-logo::part(logo):focus-visible,
calcite-navigation-logo::part(container):focus,
calcite-navigation-logo::part(container):focus-visible,
calcite-navigation-logo::part(link):focus,
calcite-navigation-logo::part(link):focus-visible {
    outline: none;
    box-shadow: none;
}

calcite-navigation::part(content) {
    overflow: visible;
}

.contact-list {
    margin-bottom: 1rem;
}

.contact-list [slot="title"] {
    display: block;
    background: #19405B;
    color: #fff;
    font-weight: 200;
    font-size: 1.25rem;
    padding: 0.9rem 1rem;
}

.contact-list calcite-list-item::part(label) {
    font-size: 1.25rem;
    font-weight: 600;
}

.contact-list calcite-link {
    color: #005e95;
}

.contact-list calcite-link:hover {
    color: #19405B;
}

.content-wrap {
    padding: 1rem 0 2rem;
}

@media (max-width: 1200px) {
    .nav-links {
        display: none;
    }

    .mobile-nav-menu {
        display: flex;
    }

    .desktop-auth-action {
        display: none;
    }
}

calcite-navigation .nav-links calcite-menu-item::part(container) {
    border-bottom: 0;
    padding-bottom: 0;
    transition: none;
}

calcite-navigation .nav-links calcite-menu-item::part(text) {
    text-decoration: none;
    background-image: linear-gradient(#19405B, #19405B);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size 0.15s ease-in-out;
}

calcite-navigation .nav-links calcite-menu-item:hover::part(text),
calcite-navigation .nav-links calcite-menu-item:focus-visible::part(text),
calcite-navigation .nav-links calcite-menu-item[active]::part(text) {
    background-size: 100% 2px;
}

calcite-navigation .nav-links calcite-menu-item::part(label) {
    background-image: linear-gradient(#19405B, #19405B);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size 0.15s ease-in-out;
}

calcite-navigation .nav-links calcite-menu-item:hover::part(label),
calcite-navigation .nav-links calcite-menu-item:focus-visible::part(label),
calcite-navigation .nav-links calcite-menu-item[active]::part(label) {
    background-size: 100% 2px;
}

/* Info sidebar defaults: larger, normal weight; keep table-first-column and header bold */
/* Force normal weight and readable size for all content inside the info sidebar.
   Use !important so this overrides other global rules (bootstrap, etc.).
   Preserve bold for the first column and modeltable headers with !important. */
#infoSidebarContent,
#infoSidebarContent * {
    font-size: 1rem !important;
    font-weight: 400 !important;
    color: inherit !important;
}

#infoSidebarContent .modeltable td:first-child,
#infoSidebarContent .modeltable .modeltable-header td {
    font-weight: 700 !important;
}

/* Also ensure elements using <b>, <strong>, or Bootstrap .fw-bold inside the info
   sidebar don't force bold except for the exceptions above. */
#infoSidebarContent b,
#infoSidebarContent strong,
#infoSidebarContent .fw-bold {
    font-weight: 400 !important;
}

/* Re-apply bold for first column/header even if wrapped in <b> or <strong>. */
#infoSidebarContent .modeltable td:first-child b,
#infoSidebarContent .modeltable td:first-child strong,
#infoSidebarContent .modeltable .modeltable-header td b,
#infoSidebarContent .modeltable .modeltable-header td strong {
    font-weight: 700 !important;
}

/* Make legend and layer list sidebar contents scrollable */
#layerListSidebarContent, #legendSidebarContent {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    padding-right: 0.5rem;
}

/* Ensure inner widget content can shrink properly inside flex containers */
#layerListSidebarContent > .esri-layer-list__list, #legendSidebarContent > .esri-legend__list {
    max-height: 100%;
}