/**
 * MiCRO component styles.
 *
 * Consumes tokens.css exclusively — no literal colour, size, radius or shadow
 * may appear below this line. Load after bootstrap.min.css and tokens.css.
 *
 * @see docs/ui/GUIDELINES.md
 */

/* ===========================================================================
   Shell
   =========================================================================== */
body {
    background: var(--mr-surface-sunken);
    color: var(--mr-text);
    font-family: var(--mr-font-sans);
    font-size: var(--mr-text-base);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.mr-skip-link {
    position: absolute;
    left: var(--mr-space-2);
    top: calc(var(--mr-space-2) * -6);
    z-index: var(--mr-z-toast);
    padding: var(--mr-space-2) var(--mr-space-4);
    background: var(--mr-interactive);
    color: var(--mr-text-on-brand);
    border-radius: var(--mr-radius);
    transition: top var(--mr-duration) var(--mr-ease);
}

.mr-skip-link:focus {
    top: var(--mr-space-2);
    color: var(--mr-text-on-brand);
}

.mr-shell {
    flex: 1;
    display: grid;
    grid-template-columns: var(--mr-sidebar-width) minmax(0, 1fr);
    align-items: start;
}

.mr-shell--bare {
    grid-template-columns: minmax(0, 1fr);
}

.mr-main {
    padding: var(--mr-space-5);
    min-width: 0;
}

@media (max-width: 991.98px) {
    .mr-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .mr-main {
        padding: var(--mr-space-4) var(--mr-space-3);
    }
}

/* ===========================================================================
   Header
   =========================================================================== */
.mr-header {
    position: sticky;
    top: 0;
    z-index: var(--mr-z-header);
    height: var(--mr-header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mr-space-4);
    padding-inline: var(--mr-space-4);
    background: var(--mr-surface-inverse);
    border-bottom: 1px solid var(--mr-blue-900);
}

.mr-header__brand,
.mr-header__actions {
    display: flex;
    align-items: center;
    gap: var(--mr-space-2);
}

.mr-header__logo {
    height: 1.75rem;
    width: auto;
    display: block;
}

.mr-header__toggle,
.mr-theme-toggle {
    background: none;
    border: 0;
    color: var(--mr-cyan-200);
    font-size: var(--mr-text-lg);
    line-height: 1;
    padding: var(--mr-space-2);
    border-radius: var(--mr-radius);
    transition: color var(--mr-duration) var(--mr-ease),
        background-color var(--mr-duration) var(--mr-ease);
}

.mr-header__toggle:hover,
.mr-theme-toggle:hover {
    color: var(--mr-gray-0);
    background: rgba(255, 255, 255, 0.1);
}

@media (min-width: 992px) {
    .mr-header__toggle {
        display: none;
    }
}

.mr-user {
    display: flex;
    align-items: center;
    gap: var(--mr-space-2);
    background: none;
    border: 0;
    color: var(--mr-gray-0);
    font-size: var(--mr-text-sm);
    padding: var(--mr-space-1) var(--mr-space-2);
    border-radius: var(--mr-radius);
}

.mr-user:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--mr-gray-0);
}

.mr-user__name {
    font-weight: var(--mr-weight-medium);
}

.mr-user__role {
    color: var(--mr-cyan-200);
    font-size: var(--mr-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--mr-tracking-caps);
}

@media (max-width: 575.98px) {
    .mr-user__role {
        display: none;
    }
}

/* ===========================================================================
   Sidebar

   Bootstrap's .offcanvas-lg applies display:flex and a transparent background
   with !important at >=992px, using two-class selectors. Overriding it
   therefore requires matching that specificity — a single .mr-sidebar rule
   loses regardless of load order.
   =========================================================================== */
.mr-sidebar {
    border-right: 1px solid var(--mr-border);
}

.mr-sidebar__body {
    padding: var(--mr-space-4) var(--mr-space-3);
}

@media (min-width: 992px) {
    .mr-sidebar.offcanvas-lg {
        display: block;
        position: sticky;
        top: var(--mr-header-height);
        height: calc(100vh - var(--mr-header-height));
        width: var(--mr-sidebar-width);
        overflow-y: auto;
        overflow-x: hidden;
        background-color: var(--mr-surface) !important;
    }

    .mr-sidebar.offcanvas-lg .mr-sidebar__body {
        display: block;
        padding: var(--mr-space-4) var(--mr-space-3);
        background-color: var(--mr-surface) !important;
    }
}

.mr-nav-section+.mr-nav-section {
    margin-top: var(--mr-space-5);
}

.mr-nav-section__title {
    margin: 0 0 var(--mr-space-2);
    padding-inline: var(--mr-space-2);
    font-size: var(--mr-text-2xs);
    font-weight: var(--mr-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--mr-tracking-caps);
    color: var(--mr-text-muted);
}

.mr-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mr-nav__link {
    display: flex;
    align-items: center;
    gap: var(--mr-space-3);
    padding: var(--mr-space-2) var(--mr-space-2);
    border-radius: var(--mr-radius);
    color: var(--mr-text-secondary);
    text-decoration: none;
    font-size: var(--mr-text-sm);
    transition: background-color var(--mr-duration) var(--mr-ease),
        color var(--mr-duration) var(--mr-ease);
}

.mr-nav__link .bi {
    font-size: var(--mr-text-md);
    color: var(--mr-text-muted);
    flex: none;
}

.mr-nav__link:hover {
    background: var(--mr-surface-sunken);
    color: var(--mr-text);
}

.mr-nav__link.is-active {
    background: var(--mr-interactive-subtle);
    color: var(--mr-interactive);
    font-weight: var(--mr-weight-medium);
    box-shadow: inset 2px 0 0 var(--mr-interactive);
}

.mr-nav__link.is-active .bi {
    color: var(--mr-interactive);
}

/* ===========================================================================
   Page header + cards
   =========================================================================== */
.mr-page-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--mr-space-4);
    flex-wrap: wrap;
    margin-bottom: var(--mr-space-4);
}

.mr-page-header h1,
.mr-page-header h2,
.mr-page-header h3 {
    margin: 0;
    font-size: var(--mr-text-xl);
    font-weight: var(--mr-weight-semibold);
    letter-spacing: -0.01em;
}

.mr-page-header__actions {
    display: flex;
    gap: var(--mr-space-2);
    flex-wrap: wrap;
}

.mr-card {
    background: var(--mr-surface-raised);
    border: 1px solid var(--mr-border);
    border-radius: var(--mr-radius-lg);
    box-shadow: var(--mr-shadow-sm);
}

.mr-card__header {
    padding: var(--mr-space-3) var(--mr-space-4);
    border-bottom: 1px solid var(--mr-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mr-space-3);
    flex-wrap: wrap;
}

.mr-card__body {
    padding: var(--mr-space-4);
}

.mr-card__body--flush {
    padding: 0;
}

/* ===========================================================================
   Tables — the core surface of this product
   =========================================================================== */
.table {
    --bs-table-bg: transparent;
    margin-bottom: 0;
    font-size: var(--mr-text-sm);
}

.table>thead>tr>th {
    background: var(--mr-table-header-bg);
    border-bottom: 1px solid var(--mr-border-strong);
    padding: var(--mr-cell-y) var(--mr-cell-x);
    font-size: var(--mr-text-2xs);
    font-weight: var(--mr-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--mr-tracking-caps);
    color: var(--mr-text-secondary);
    white-space: nowrap;
}

.table>tbody>tr>td {
    padding: var(--mr-cell-y) var(--mr-cell-x);
    border-bottom: 1px solid var(--mr-table-border);
    vertical-align: middle;
}

/* Row headers — the level in a payout grid. Without this they fall outside
   the thead rule above and take Bootstrap's cell padding instead of the
   spacing tokens the rest of the table uses. */
.table>tbody>tr>th {
    padding: var(--mr-cell-y) var(--mr-cell-x);
    border-bottom: 1px solid var(--mr-table-border);
    vertical-align: middle;
}

/* The row header takes the hover tint too, or the highlight starts a column
   in and the row reads as if it began at the second cell. */
.table>tbody>tr:hover>td,
.table>tbody>tr:hover>th {
    background: var(--mr-table-hover);
}

.table thead th a {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--mr-space-1);
}

.table thead th a:hover {
    color: var(--mr-interactive);
}

/* Sort indicator — Paginator puts .asc / .desc on the anchor, not the cell */
.table thead th a.asc::after {
    content: " \2191";
    font-size: var(--mr-text-2xs);
}

.table thead th a.desc::after {
    content: " \2193";
    font-size: var(--mr-text-2xs);
}

.mr-table-wrap {
    overflow-x: auto;
}

/* Actions column — kept narrow and right-aligned so data reads first */
.mr-col-actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.mr-actions {
    display: flex;
    gap: var(--mr-space-3);
    justify-content: flex-end;
    align-items: center;
}

.mr-actions form {
    display: inline;
}

.mr-actions__link {
    color: var(--mr-interactive);
    text-decoration: none;
    font-size: var(--mr-text-sm);
    white-space: nowrap;
}

.mr-actions__link:hover {
    text-decoration: underline;
}

.mr-actions__link--danger {
    color: var(--mr-danger);
}

/* Selection column — no wider than the checkbox in it. */
.mr-col-check {
    width: 1%;
    white-space: nowrap;
}

/* ===========================================================================
   Vertical tables — key/value detail views, not tabular data
   =========================================================================== */
.vertical-table {
    width: 100%;
    font-size: var(--mr-text-sm);
    border-collapse: collapse;
}

.vertical-table th {
    width: 14rem;
    padding: var(--mr-cell-y) var(--mr-cell-x);
    border-bottom: 1px solid var(--mr-table-border);
    background: var(--mr-table-header-bg);
    font-weight: var(--mr-weight-medium);
    color: var(--mr-text-secondary);
    text-align: left;
    vertical-align: top;
}

.vertical-table td {
    padding: var(--mr-cell-y) var(--mr-cell-x);
    border-bottom: 1px solid var(--mr-table-border);
    vertical-align: top;
}

.vertical-table tr:last-child th,
.vertical-table tr:last-child td {
    border-bottom: 0;
}

/* ===========================================================================
   Tabs — Bootstrap Tab, replacing jQuery UI
   =========================================================================== */
.nav-tabs {
    --bs-nav-tabs-border-color: var(--mr-border);
    --bs-nav-tabs-link-active-bg: var(--mr-surface-raised);
    --bs-nav-tabs-link-active-color: var(--mr-interactive);
    --bs-nav-tabs-link-active-border-color: var(--mr-border) var(--mr-border) var(--mr-surface-raised);
    --bs-nav-link-color: var(--mr-text-secondary);
    --bs-nav-link-hover-color: var(--mr-text);
    --bs-nav-link-font-size: var(--mr-text-sm);
    border-bottom-color: var(--mr-border);
}

.nav-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--mr-space-2);
    font-weight: var(--mr-weight-medium);
}

.tab-content {
    background: var(--mr-surface-raised);
    border: 1px solid var(--mr-border);
    border-top: 0;
    border-radius: 0 0 var(--mr-radius-lg) var(--mr-radius-lg);
}

.tab-content>.tab-pane>.mr-paginator {
    padding: 0 var(--mr-space-4) var(--mr-space-4);
    margin-top: var(--mr-space-3);
}

.mr-tab-actions {
    display: flex;
    justify-content: flex-end;
    padding: var(--mr-space-3) var(--mr-space-4) 0;
}

/* Rows awaiting action past the expected window */
.mr-row--overdue>td:first-child {
    box-shadow: inset 3px 0 0 var(--mr-warning);
}

.mr-approve {
    display: flex;
    align-items: center;
    gap: var(--mr-space-2);
}

.mr-approve .mr-field {
    margin-bottom: 0 !important;
}

.mr-report-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mr-space-2);
}

.mr-section-title {
    font-size: var(--mr-text-lg);
    font-weight: var(--mr-weight-semibold);
    margin: 0 0 var(--mr-space-3);
}

/* ===========================================================================
   Status and peril badges
   Colour is always accompanied by a label; the icon is set in the template.
   =========================================================================== */
.mr-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--mr-space-1);
    padding: 0.125rem var(--mr-space-2);
    border-radius: var(--mr-radius-pill);
    font-size: var(--mr-text-xs);
    font-weight: var(--mr-weight-medium);
    white-space: nowrap;
    line-height: 1.5;
}

.mr-badge--success {
    color: var(--mr-success);
    background: var(--mr-success-bg);
}

.mr-badge--warning {
    color: var(--mr-warning);
    background: var(--mr-warning-bg);
}

.mr-badge--danger {
    color: var(--mr-danger);
    background: var(--mr-danger-bg);
}

.mr-badge--info {
    color: var(--mr-info);
    background: var(--mr-info-bg);
}

.mr-badge--neutral {
    color: var(--mr-text-muted);
    background: var(--mr-surface-sunken);
}

.mr-badge--climate {
    color: var(--mr-peril-climate);
    background: var(--mr-peril-climate-bg);
}

.mr-badge--hydro {
    color: var(--mr-peril-hydro);
    background: var(--mr-peril-hydro-bg);
}

.mr-num--alert {
    color: var(--mr-danger);
    font-weight: var(--mr-weight-semibold);
}

.mr-badge--hydro-deep {
    color: var(--mr-peril-hydro-deep);
    background: var(--mr-peril-hydro-deep-bg);
}

.mr-badge--geo {
    color: var(--mr-peril-geo);
    background: var(--mr-peril-geo-bg);
}

/* ===========================================================================
   Forms
   Structural only — FormHelper emits the Bootstrap classes.
   =========================================================================== */
.mr-form {
    max-width: 44rem;
}

.form-label {
    font-size: var(--mr-text-sm);
    font-weight: var(--mr-weight-medium);
    color: var(--mr-text-secondary);
    margin-bottom: var(--mr-space-1);
}

.form-control,
.form-select {
    font-size: var(--mr-text-sm);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--mr-border-focus);
    box-shadow: var(--mr-focus-ring);
}

.mr-code-editor {
    font-family: var(--mr-font-mono);
    font-size: var(--mr-text-sm);
    line-height: var(--mr-leading-normal);
    tab-size: 2;
}

.mr-form__actions {
    display: flex;
    gap: var(--mr-space-2);
    margin-top: var(--mr-space-5);
    padding-top: var(--mr-space-4);
    border-top: 1px solid var(--mr-border);
}

/* ===========================================================================
   Buttons

   Bootstrap 5.3 compiles literal hex values into .btn-* variants rather than
   reading --bs-primary, so the brand colour has to be bridged explicitly.
   =========================================================================== */
.btn {
    --bs-btn-font-size: var(--mr-text-sm);
    --bs-btn-focus-box-shadow: var(--mr-focus-ring);
}

.btn-primary {
    --bs-btn-bg: var(--mr-interactive);
    --bs-btn-border-color: var(--mr-interactive);
    --bs-btn-hover-bg: var(--mr-interactive-hover);
    --bs-btn-hover-border-color: var(--mr-interactive-hover);
    --bs-btn-active-bg: var(--mr-interactive-active);
    --bs-btn-active-border-color: var(--mr-interactive-active);
    --bs-btn-disabled-bg: var(--mr-interactive);
    --bs-btn-disabled-border-color: var(--mr-interactive);
    --bs-btn-color: var(--mr-text-on-brand);
    --bs-btn-hover-color: var(--mr-text-on-brand);
    --bs-btn-active-color: var(--mr-text-on-brand);
    --bs-btn-disabled-color: var(--mr-text-on-brand);
}

/* Bootstrap's compiled outline variant hardcodes #fff for the hover and active
   text. In dark mode --mr-interactive is a light cyan, so that default would
   put white on light cyan; the fill colour has to be bridged too. */
.btn-outline-primary {
    --bs-btn-color: var(--mr-interactive);
    --bs-btn-border-color: var(--mr-interactive);
    --bs-btn-hover-bg: var(--mr-interactive);
    --bs-btn-hover-border-color: var(--mr-interactive);
    --bs-btn-hover-color: var(--mr-text-on-brand);
    --bs-btn-active-bg: var(--mr-interactive-active);
    --bs-btn-active-border-color: var(--mr-interactive-active);
    --bs-btn-active-color: var(--mr-text-on-brand);
    --bs-btn-disabled-color: var(--mr-interactive);
    --bs-btn-disabled-border-color: var(--mr-interactive);
}

/* ===========================================================================
   Authentication screens
   Rendered without a sidebar, so they centre themselves.
   =========================================================================== */
.mr-auth {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: var(--mr-space-7) var(--mr-space-4);
}

.mr-auth__card {
    width: 100%;
    max-width: 24rem;
    background: var(--mr-surface-raised);
    border: 1px solid var(--mr-border);
    border-radius: var(--mr-radius-lg);
    box-shadow: var(--mr-shadow);
    padding: var(--mr-space-5);
}

.mr-auth__brand {
    text-align: center;
    margin-bottom: var(--mr-space-5);
}

.mr-auth__logo {
    max-width: 14rem;
    height: auto;
}

/* ===========================================================================
   Search bar
   =========================================================================== */
.mr-search {
    display: flex;
    gap: var(--mr-space-2);
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: var(--mr-space-4);
}

/* FormHelper wraps every control in .mb-3; inside the search bar that spacing
   would break the baseline alignment with the button. */
.mr-search .mr-field {
    margin-bottom: 0 !important;
    flex: 1;
    min-width: 18rem;
}

/* ===========================================================================
   Pagination
   =========================================================================== */
.mr-paginator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mr-space-3);
    flex-wrap: wrap;
    margin-top: var(--mr-space-4);
}

.mr-paginator__counter {
    margin: 0;
    font-size: var(--mr-text-xs);
    color: var(--mr-text-muted);
}

.pagination {
    --bs-pagination-font-size: var(--mr-text-sm);
    --bs-pagination-color: var(--mr-text-secondary);
    --bs-pagination-active-bg: var(--mr-interactive);
    --bs-pagination-active-border-color: var(--mr-interactive);
    --bs-pagination-active-color: var(--mr-text-on-brand);
    --bs-pagination-focus-box-shadow: var(--mr-focus-ring);
    margin: 0;
}

/* ===========================================================================
   Flash messages
   =========================================================================== */
.mr-flash {
    margin-bottom: var(--mr-space-4);
}

/* ===========================================================================
   Inline notices
   A statement about the page itself, not a transient message — those are
   flashes and disappear on the next request.
   =========================================================================== */
.mr-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--mr-space-2);
    padding: var(--mr-space-3) var(--mr-space-4);
    margin-bottom: var(--mr-space-4);
    border-radius: var(--mr-radius);
    background: var(--mr-info-bg);
    color: var(--mr-info);
    font-size: var(--mr-text-sm);
}

.mr-notice .bi {
    flex: none;
    line-height: var(--mr-leading-normal);
}

.mr-notice--warning {
    background: var(--mr-warning-bg);
    color: var(--mr-warning);
}

.mr-notice--danger {
    background: var(--mr-danger-bg);
    color: var(--mr-danger);
}

.mr-notice--success {
    background: var(--mr-success-bg);
    color: var(--mr-success);
}

/* ===========================================================================
   Empty states
   =========================================================================== */
.mr-empty {
    padding: var(--mr-space-7) var(--mr-space-4);
    text-align: center;
    color: var(--mr-text-muted);
}

.mr-empty .bi {
    font-size: var(--mr-text-2xl);
    display: block;
    margin-bottom: var(--mr-space-3);
    color: var(--mr-border-strong);
}

.mr-empty__title {
    font-size: var(--mr-text-md);
    font-weight: var(--mr-weight-medium);
    color: var(--mr-text-secondary);
    margin-bottom: var(--mr-space-1);
}

/* ===========================================================================
   Footer
   =========================================================================== */
.mr-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--mr-space-3);
    flex-wrap: wrap;
    padding: var(--mr-space-3) var(--mr-space-5);
    border-top: 1px solid var(--mr-border);
    background: var(--mr-surface);
    font-size: var(--mr-text-xs);
    color: var(--mr-text-muted);
}

.mr-footer__version {
    color: var(--mr-text-disabled);
}

.mr-footer__links {
    display: flex;
    gap: var(--mr-space-3);
}

/* ===========================================================================
   Table cell utilities
   =========================================================================== */

/* Numeric value that crosses a severity threshold */
.mr-num--alert {
    color: var(--mr-danger);
    font-weight: var(--mr-weight-semibold);
}

/* Identifiers and dates must not wrap mid-value */
td.mr-code,
th.mr-code {
    white-space: nowrap;
}

/* Bootstrap resolves td colour through --bs-table-color-state, which its own
   rule applies at higher specificity than a plain class. Setting the variable
   wins regardless of selector weight. */
td.mr-num--alert {
    --bs-table-color-state: var(--mr-danger);
    color: var(--mr-danger);
}

/* Explanation for a flagged value. <details>/<summary> rather than title= or
   a JS tooltip: it opens on click or tap (so it reaches touch, unlike
   title=), is keyboard-operable natively, and needs no script. */
.mr-alert-hint {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.mr-alert-hint > summary {
    display: inline-flex;
    align-items: center;
    color: var(--mr-danger);
    cursor: pointer;
    list-style: none;
}

.mr-alert-hint > summary::-webkit-details-marker {
    display: none;
}

.mr-alert-hint > summary:focus-visible {
    outline: none;
    box-shadow: var(--mr-focus-ring);
    border-radius: var(--mr-radius-sm);
}

.mr-alert-hint__body {
    position: absolute;
    z-index: var(--mr-z-dropdown);
    top: 100%;
    left: 0;
    margin-top: var(--mr-space-1);
    width: max-content;
    max-width: 260px;
    padding: var(--mr-space-2) var(--mr-space-3);
    background: var(--mr-surface-raised);
    border: 1px solid var(--mr-border);
    border-radius: var(--mr-radius);
    box-shadow: var(--mr-shadow);
    color: var(--mr-text);
    font-size: var(--mr-text-sm);
    white-space: normal;
}

/* Field that does not apply to the current selection */
.mr-field.is-disabled .form-label,
.mr-field.is-disabled .form-text {
    opacity: 0.55;
}

.mr-plain-list {
    list-style: none;
    margin: 0;
    padding: 0;
}