/* Canonical Portal control states (style guide: Control state matrix, Do and do
   not; platform/docs/DESIGN_SYSTEM.md): shell-standard surface language,
   square corners for every control and alert surface, 44px minimum hitboxes,
   the #3273DC shell focus ring, the Portal Nunito typography override, and
   the shell structure (aside placement, mobile off-canvas, title bar, modal
   sizing) ported from the archived SASS theme.
   Loaded on Portal layouts after standard Bulma 0.9.4 so these values win. */

/* Shell-standard canvas: warm cream-to-cool-blue gradient */
body {
    background: linear-gradient(135deg, #f2efe8 0%, #dde8f1 100%);
    min-height: 100vh;
}

/* Portal typography override (recorded cross-surface difference in
   platform/docs/DESIGN_SYSTEM.md): Nunito family, weights 400/700 loaded via
   the Google Fonts link in the layout. Carries theme.css audit rows 2 and 3. */
body,
button,
input,
optgroup,
select,
textarea {
    font-family: "Nunito", sans-serif;
}

/* Shell-standard panel surfaces: white, square, #CBD8EA border, one soft shadow */
.card,
.panel,
.box,
.table-container {
    background-color: #ffffff;
    border: 1px solid #cbd8ea;
    border-radius: 0;
    box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1);
}

/* Standard primary paint: #206FDF square button, #0B3992 hover/focus/active.
   Element-prefixed selectors raise specificity to (0,3,1) so the hover state
   wins over Bulma's .tabs.is-boxed a:hover which otherwise bleeds #f5f5f5
   into any button rendered inside a tab container. */
.button.is-link,
.button.is-primary {
    background-color: #206fdf;
    border-color: #206fdf;
    border-radius: 0;
    color: #ffffff;
    font-weight: 800;
}

a.button.is-link:hover,
a.button.is-link:focus,
a.button.is-link:active,
a.button.is-primary:hover,
a.button.is-primary:focus,
a.button.is-primary:active,
button.button.is-link:hover,
button.button.is-link:focus,
button.button.is-link:active,
button.button.is-primary:hover,
button.button.is-primary:focus,
button.button.is-primary:active {
    background-color: #0b3992;
    border-color: #0b3992;
    color: #ffffff;
}

/* Flex level headers: long header content (including unbreakable tokens)
   must shrink to the available width instead of stretching the layout. */
.level.is-mobile .level-left {
    flex-shrink: 1;
    min-width: 0;
}

/* Portal underline tabs: clean, transparent, 2px active border.
   Replaces Bulma's .tabs.is-boxed with a modern flat standard. */
.tabs.portal-tabs {
    align-items: center;
    border-bottom: 1px solid #cbd8ea;
    display: flex;
    min-height: 56px;
    margin-bottom: 0;
}
.tabs.portal-tabs ul {
    background-color: transparent;
    border: none;
    border-radius: 0;
    display: flex;
    flex: 1 1 auto;
    gap: 0;
    list-style: none;
    margin: 0;
    min-width: 0;
    padding: 0;
}
.tabs.portal-tabs li {
    margin: 0;
}
.tabs.portal-tabs li a {
    align-items: center;
    border: none;
    border-bottom: 2px solid transparent;
    color: #4a4a4a;
    display: inline-flex;
    gap: 0.375rem;
    margin: 0;
    padding: 0.75rem 1rem;
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
}
.tabs.portal-tabs li a:hover {
    color: #0a0a0a;
}
.tabs.portal-tabs li.is-active a {
    border-bottom-color: #206fdf;
    color: #206fdf;
    font-weight: 600;
    margin-bottom: -1px;
}
.tabs.portal-tabs li a:focus {
    border-bottom-color: #3273dc;
    outline: 2px solid #3273dc;
    outline-offset: 2px;
}
.tabs.portal-tabs .tabs-actions {
    align-items: center;
    display: flex;
    margin-left: auto;
    padding: 0.5rem 1rem;
}
@media screen and (max-width: 768px) {
    .tabs.portal-tabs {
        flex-wrap: wrap;
        min-height: 0;
    }
    .tabs.portal-tabs ul {
        overflow-x: auto;
        scrollbar-width: none;
    }
    .tabs.portal-tabs ul::-webkit-scrollbar {
        display: none;
    }
    .tabs.portal-tabs .tabs-actions {
        justify-content: flex-end;
        padding: 0.5rem 0;
        width: 100%;
    }
}

/* Control state matrix (style guide: Control state matrix): square corners and
   44px minimum hitboxes. .is-small stays compact for pagination only. */
.input,
.textarea,
.select select,
.button,
.file-cta,
.file-name,
.message,
.notification {
    border-radius: 0;
}

.input,
.select select,
.button:not(.is-small),
.file-cta,
.file-name {
    min-height: 44px;
}

/* Form-control focus states (mirrors admin-controls.css): #485FC7 border with
   the #3273DC-tinted ring on standard Bulma controls. */
.input:focus,
.textarea:focus,
.select select:focus,
.file-cta:focus,
.file-name:focus,
.pagination-previous:focus,
.pagination-next:focus,
.pagination-link:focus,
.pagination-ellipsis:focus,
.input.is-focused,
.textarea.is-focused,
.select select.is-focused,
.file-cta.is-focused,
.file-name.is-focused {
    border-color: #485fc7;
    box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
}

.button:focus:not(:active),
.button.is-focused:not(:active),
.button.is-primary:focus:not(:active),
.button.is-primary.is-focused:not(:active) {
    box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
}

/* Shell focus ring: 2px #3273DC with a 2px offset on every interactive
   element. !important overrides Bulma's compound outline:none on focus. */
:focus-visible {
    outline: 2px solid #3273dc !important;
    outline-offset: 2px;
}

/* Sidebar footer alignment: push the "logged in as" footer to the bottom of
   the main menu; the user name ellipsizes instead of wrapping. */
aside.aside .menu.is-menu-main {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 3.75rem) !important;
}

aside.aside .menu.is-menu-main .menu-content {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

aside.aside .menu.is-menu-main .menu-footer {
    flex: 0 0 auto !important;
    padding: 1rem 0.75rem !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin-top: auto !important;
}

aside.aside .menu-footer .user-display {
    white-space: normal !important;
}

aside.aside .menu-footer .user-name {
    font-size: 0.85em;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    max-width: 100% !important;
}

/* 44px minimum targets for compact icon/link controls */
#navbar-main [data-modal-open="active-case-modal"],
.vault-panel > a:first-child,
.footer .logo > a,
.notification > .delete {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
    min-width: 44px;
}

/* ===== Shell structure (ported from the archived SASS theme: _aside.scss,
   _nav-bar.scss, _title-bar.scss, _main-section.scss, _footer.scss,
   _modal.scss, with _theme-default.scss values; the archived pipeline is
   _archive/2026-08-21/portal-sass-pipeline/src/theme). Standard Bulma 0.9.4
   does not ship the aside shell, so these rules are load-bearing. ===== */

aside.aside {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40;
    height: 100vh;
    padding: 0;
    box-shadow: none;
    background-color: hsl(221, 14%, 4%);
}

@media screen and (min-width: 1024px) {
    html.has-aside-left.has-aside-expanded nav.navbar,
    html.has-aside-left.has-aside-expanded body {
        padding-left: 14rem;
    }
    html.has-aside-left nav.navbar,
    html.has-aside-left body {
        transition: padding-left 250ms ease-in-out 50ms;
    }
    html.has-aside-left aside.is-placed-left {
        display: block;
    }
    aside.aside.is-expanded {
        width: 14rem;
    }
}

aside.aside .aside-tools {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    flex: 1;
    height: 3.75rem;
    line-height: 3.75rem;
    padding-left: 0.75rem;
    background-color: #ffffff;
}

aside.aside .menu-label {
    color: #ffffff;
    padding: 0 0.75rem;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

aside.aside .menu-list a {
    color: #ffffff;
    border-radius: 0;
    padding: 0.5rem 0;
}

aside.aside .menu-list a:hover,
aside.aside .menu-list a:focus {
    background-color: hsl(221, 14%, 4%);
    color: #ffffff;
}

aside.aside .menu-list li.is-active a,
aside.aside .menu-list li.is-active a:hover {
    background-color: hsl(221, 14%, 4%);
    color: #ffffff;
}

aside.aside .menu-list .icon {
    width: 3rem;
}

aside.aside .menu-list span.menu-item-label {
    display: inline-block;
}

/* Subnav tree: expandable Messages / Settings rows (portal aside + style-guide specimen) */
.menu-list li.has-subnav > a.has-subnav-toggle {
    display: flex;
    align-items: center;
}

.menu-list li.has-subnav .subnav-chevron {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #8b95a3;
    transition: transform 0.15s ease;
}

.menu-list li.has-subnav .subnav-chevron svg {
    width: 0.875rem;
    height: 0.875rem;
}

.menu-list li.has-subnav.is-open .subnav-chevron {
    transform: rotate(90deg);
}

.menu-list li.has-subnav ul.subnav {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s ease;
}

.menu-list li.has-subnav.is-open ul.subnav {
    max-height: 20rem;
}

.menu-list li.has-subnav ul.subnav a {
    display: block;
    padding: 0.4rem 0.25rem 0.4rem 1rem;
    color: #8b95a3;
    font-size: 0.95rem;
    border-radius: 0;
}

/* Hover lightens toward white for WCAG AA on the near-black aside; the
   ported #3d4855 darkened below the #8b95a3 base and dropped to ~2:1. */
.menu-list li.has-subnav ul.subnav a:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.06);
}

.menu-list li.has-subnav.is-current > a.has-subnav-toggle {
    box-shadow: inset 3px 0 0 #206FDF;
}

/* Current-page link uses a lightened #7FB0FF (not the #206FDF primary) so it
   holds WCAG AA on the near-black aside; the primary blue fell to ~4.15:1. */
.menu-list li.has-subnav ul.subnav a[aria-current="page"] {
    color: #7fb0ff;
    font-weight: 600;
    background-color: rgba(32, 111, 223, 0.1);
}

.menu-list li.has-subnav ul.subnav a[aria-current="page"]:hover {
    color: #7fb0ff;
    background-color: rgba(32, 111, 223, 0.14);
}

@media (max-width: 768px) {
    .menu-list li.has-subnav ul.subnav a {
        padding-left: 0.75rem;
    }
}

/* Menu footer text sits on the dark aside; the inherited body color is
   unreadable there, so the footer block renders on the light scale. */
aside.aside .menu-footer {
    color: #f2efe8;
}

section.section.is-title-bar {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(24, 28, 33, 0.06);
}

section.section.is-title-bar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

section.section.is-title-bar ul li {
    display: inline-block;
    padding: 0 0.75rem 0 0;
    font-size: 1.5rem;
    color: hsl(221, 14%, 48%);
}

section.section.is-title-bar ul li:after {
    display: inline-block;
    content: '/';
    padding-left: 0.75rem;
}

section.section.is-title-bar ul li:last-child {
    padding-right: 0;
    font-weight: 900;
    color: hsl(221, 14%, 14%);
}

section.section.is-title-bar ul li:last-child:after {
    display: none;
}

section.section.is-main-section {
    padding: 1.5rem;
}

nav.navbar {
    box-shadow: 0 1px 0 rgba(24, 28, 33, 0.04);
}

footer.footer {
    background-color: #ffffff;
    padding: 0.5rem 1.5rem;
}

footer.footer .logo img {
    width: auto;
    height: 2rem;
}

.modal-card {
    width: 40vw;
}

.modal-card-head,
.modal-card-foot {
    background-color: hsl(221, 14%, 96%);
}

.modal-card-title {
    font-size: 1rem;
}

.modal-card-body {
    padding: 1.5rem 20px;
}

.modal-card-foot {
    border-top: 0;
}

@media screen and (max-width: 768px) {
    .modal .modal-card {
        width: 90vw;
        margin: 0 auto;
    }
    .footer-copyright {
        text-align: center;
    }
}

/* Mobile: the aside parks off-canvas; the hamburger button toggles
   html.has-aside-mobile-expanded (static/js/script.js). */
@media screen and (max-width: 1023px) {
    #app,
    nav.navbar {
        transition: margin-left 250ms ease-in-out 50ms;
    }
    aside.aside {
        transition: left 250ms ease-in-out 50ms;
    }
    html.has-aside-mobile-transition body {
        overflow-x: hidden;
    }
    html.has-aside-mobile-transition body,
    html.has-aside-mobile-transition #app,
    html.has-aside-mobile-transition nav.navbar {
        width: 100vw;
    }
    aside.aside {
        display: block;
        width: 15rem;
        left: -15rem;
    }
    html.has-aside-mobile-expanded #app,
    html.has-aside-mobile-expanded nav.navbar {
        margin-left: 15rem;
    }
    html.has-aside-mobile-expanded aside.aside {
        left: 0;
    }
}

/* Table row action bar (style guide: Buttons and links) - a right-aligned
   joined square icon bar; each segment is a 44px unit with no gaps. */
.button.is-square {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    width: 44px;
}

.table .buttons {
    margin: 0;
}

.table .buttons.has-addons {
    display: inline-flex;
    justify-content: flex-end;
}

.table .buttons.has-addons .button {
    margin: 0;
}

.table .buttons.has-addons .button + .button {
    margin-left: -1px;
}

/* Text "view" link in a table action cell (style guide: Buttons and links) -
   sits below the joined icon bar and names the destination. */
.table-link-action {
    margin-top: 0.35rem;
}

.table-link-action a,
.table-link-action .table-view-trigger {
    color: #485fc7;
    font-size: 0.75rem;
    font-weight: 600;
}

.table-link-action a:hover,
.table-link-action a:focus,
.table-link-action .table-view-trigger:hover,
.table-link-action .table-view-trigger:focus {
    color: #3642a2;
}

/* Accessibility: honor reduced motion. One high-specificity block neutralizes
   every shell transition and the style-guide spinner keyframes; !important
   lets it also override the inline <style> blocks on page templates. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Accessibility: Bulma's muted grey-light utility (#7a7a7a) sits near ~4:1 on
   the white cards and fails WCAG AA for normal/small text. Darken the utility
   so helper and status copy passes on both the white panels and the cream
   canvas without a per-element recolor. */
.has-text-grey-light {
    color: #666666;
}