html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

/* ── Default <button> style ─────────────────────────────────────
   Project-wide default for every <button> element. Use a bare
   <button>…</button> with no class — the styling here is what the
   Login page uses and is the standard look across Wise2. A
   Bootstrap class such as .btn.btn-primary will override this
   rule (more specific selector); only reach for those when the
   surrounding component genuinely needs the Bootstrap variant
   (e.g. inside a Bootstrap modal). */
button {
    background-color: #336699;
    border-radius: 4px;
    border: 2px solid #336699;
    display: inline-block;
    cursor: pointer;
    color: #fff;
    font-weight: bold;
    font-family: Arial;
    font-size: 12px;
    padding: 4px 12px;
    text-decoration: none;
    text-shadow: 0px 0px 5px #283966;
}

    button:disabled {
        background-color: #cccccc; /* light gray */
        border: 2px solid #999999; /* darker gray border */
        color: #666666; /* gray text */
        cursor: not-allowed;
        text-shadow: none;
        filter: none; /* remove gradient/filter effects */
    }

    button:hover, button:active {
        background-color: #2a5580 !important;
        border-color: #2a5580 !important;
        color: #fff !important;
    }

        button:focus, button:active:focus, .form-control:focus, .form-check-input:focus {
            box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
        }

/* Legacy table column-header style, migrated from
   C:\Dev\Wise-Rob\inetpub\wwwroot\Wise\Common\Site.css lines 153-159.
   Reusable on any <th> or column-header cell across Wise2. */
.ColHeader {
    background-color: #dde4ec;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    font-size: 13px;
}

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

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ── Table header ───────────────────────────────────────────── */
.TableHeader {
    background-color: #336699;
    color: white;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    border-radius: 10px 10px 0px 0px;
    white-space: nowrap;
    padding: 0.5rem 1rem;
}

/* ── Row header ─────────────────────────────────────────────── */
.RowHeader {
    background-color: #dde4ec;
    text-align: right;
    font-size: 0.9rem;
    font-weight: bold;
    white-space: nowrap;
    padding-right: 0.5rem;
    flex-shrink: 0;
}

/* Project standard: form labels render in the brand dark blue, not black. */
.form-label {
    color: #336699;
}

/* ── App shell ─────────────────────────────────────────────── */
.app-shell {
    display: flex;
    min-height: 100vh;
}

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar {
    width: 200px;
    flex-shrink: 0;
    background-color: #336699;
    color: #fff;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 1rem 1rem 0.75rem;
    border-bottom: 1px solid #2a5580;
}

.sidebar-brand {
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
}

    .sidebar-brand:hover {
        color: #dee2e6;
    }

.sidebar-logo {
    max-width: 100%;
    max-height: 60px;
    display: block;
    margin: 0 auto;
}

.sidebar-toggle {
    background: none;
    border: none;
    color: #fff;
    position: absolute;
    right: 0.75rem;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 0.25rem;
}

/* ── Sidebar menu (Level-1 items) ───────────────────────────── */
.sidebar-menu {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}

.sidebar-menu-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.4rem 1rem;
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: bold;
    transition: background 0.15s;
}

    .sidebar-menu-link:hover {
        background-color: #2a5580;
        color: #fff;
    }

.sidebar-menu-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

    .sidebar-menu-link.active {
        background-color: #dde4ec;
        color: #000;
    }

/* ── Sidebar user footer (Name / DB / Logout) ───────────────── */
.sidebar-user {
    margin-top: auto;
    padding: 0.6rem 1rem;
    border-top: 1px solid #2a5580;
    color: #fff;
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.sidebar-user-info > div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-value {
    font-weight: 600;
}

.sidebar-user-dev {
    margin-left: 0.5rem;
}

.sidebar-user-db--test {
    color: red;
    background-color: yellow;
    font-weight: 700;
    padding: 0 0.4rem;
}

.sidebar-user-logout {
    margin: 0;
}

    .sidebar-user-logout button {
        width: 100%;
        background-color: #7892c2;
        border: 2px solid #336699;
        border-radius: 4px;
        color: #fff;
        cursor: pointer;
        font-family: Arial;
        font-size: 12px;
        padding: 4px 12px;
        text-decoration: none;
        text-shadow: 0 0 5px #283966;
    }

        .sidebar-user-logout button:hover:enabled,
        .sidebar-user-logout button:active {
            background: linear-gradient(to bottom, #336699 5%, #7892c2 100%) !important;
            background-color: #336699 !important;
            border-color: #336699 !important;
            color: #fff !important;
        }

        .sidebar-user-logout button:active {
            position: relative;
            top: 1px;
        }

/* ── Sidebar section placeholders (Recent Visits, Quick Menu) ─ */
.sidebar-section {
    padding: 0.6rem 1rem 0.25rem;
    margin-top: 0.75rem;
    border-top: 1px solid #2a5580;
}

.sidebar-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #adc8e8;
    letter-spacing: 0.05em;
}

/* ── Quick Menu sidebar section ─────────────────────────────── */
.sidebar-quickmenu {
    /* Item links extend to the sidebar edges, so kill the section's horizontal
       padding here and let .sidebar-quickmenu-item supply its own. */
    padding-left: 0;
    padding-right: 0;
}

    .sidebar-quickmenu .sidebar-section-title {
        padding: 0 1rem;
        text-align: center;
        text-transform: none;
        font-size: 0.9rem;
    }

.sidebar-quickmenu-header {
    color: #fff;
    text-decoration: none;
}

    .sidebar-quickmenu-header:hover {
        color: #dee2e6;
    }

.sidebar-quickmenu-list {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
}

.sidebar-quickmenu-item {
    display: block;
    padding: 2px 1rem;
    line-height: 1.3;
    color: #fff;
    text-decoration: none;
    font-size: 0.85rem;
    transition: background 0.15s;
}

    .sidebar-quickmenu-item:hover {
        background-color: #2a5580;
        color: #fff;
    }

.sidebar-quickmenu-item--disabled {
    color: #adc8e8;
    cursor: default;
}

    .sidebar-quickmenu-item--disabled:hover {
        background-color: transparent;
        color: #adc8e8;
    }

.sidebar-quickmenu-add {
    margin: 0.25rem 1rem 0;
}

    .sidebar-quickmenu-add button {
        background-color: #7892c2;
        border: 2px solid #336699;
        border-radius: 4px;
        color: #fff;
        cursor: pointer;
        font-family: Arial;
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
        padding: 2px 10px;
        text-shadow: 0 0 5px #283966;
    }

        .sidebar-quickmenu-add button:hover,
        .sidebar-quickmenu-add button:active {
            background: linear-gradient(to bottom, #336699 5%, #7892c2 100%) !important;
            background-color: #336699 !important;
            border-color: #336699 !important;
            color: #fff !important;
        }

/* ── Recent Visits sidebar section ──────────────────────────── */
.sidebar-recent {
    /* Item links extend to the sidebar edges, so kill the section's horizontal
       padding here and let .sidebar-recent-item supply its own. */
    padding-left: 0;
    padding-right: 0;
}

    .sidebar-recent .sidebar-section-title {
        padding: 0 1rem;
        text-align: center;
        text-transform: none;
        font-size: 0.9rem;
        color: #fff;
    }

.sidebar-recent-list {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
}

.sidebar-recent-item {
    display: flex;
    align-items: center;
    padding: 2px 1rem;
    line-height: 1.3;
    color: #fff;
    text-decoration: none;
    font-size: 0.85rem;
    transition: background 0.15s;
}

    .sidebar-recent-item:hover {
        background-color: #2a5580;
        color: #fff;
    }

.sidebar-recent-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    margin-right: 0.4rem;
    flex-shrink: 0;
    /* Collapse icon to black via grayscale+brightness(0), then invert to pure
       white — handles both #336699 and #FEFEFE source SVGs uniformly. */
    filter: grayscale(1) brightness(0) invert(1);
}

.sidebar-recent-icon--empty {
    display: inline-block;
    visibility: hidden;
}

.sidebar-recent-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Navigation page ────────────────────────────────────────── */
.nav-page-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #336699;
    margin-bottom: 1.25rem;
}

.nav-section {
    margin-bottom: 2rem;
}

.nav-section-header {
    font-size: 0.95rem;
    font-weight: 700;
    color: #336699;
    padding-bottom: 0.3rem;
    margin-bottom: 0.75rem;
    border-bottom: 2px solid #336699;
}

    .nav-section-header--blank {
        border-bottom-color: #dde4ec;
    }

/* ── Nav cards (Level-3 items) ──────────────────────────────── */
.nav-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.nav-card {
    width: 185px;
    min-height: 80px;
    border: 2px solid #336699;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
}

.nav-card-title {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background-color: #fff;
    color: #336699;
    font-weight: 700;
    font-size: 0.9rem;
    transition: background 0.15s;
    border-radius: 3px;
    flex: 1;
}

.nav-card-header {
    display: flex;
    align-items: flex-start;
}

.nav-card-icon {
    max-width: 24px;
    max-height: 24px;
    flex-shrink: 0;
    margin-right: 4px;
}

.nav-card-name {
    flex: 1;
    min-width: 0;
}

.nav-card--link .nav-card-title:hover,
.nav-card-title.has-submenu:hover {
    background-color: #dde4ec;
}

.nav-card-title.has-submenu {
    position: relative;
    cursor: pointer;
    flex: none;
}

.nav-card-desc {
    font-size: 0.75rem;
    font-weight: normal;
    color: #666;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin-top: 0.2rem;
}

/* ── Nav card sub-menu (Level-4 items) ──────────────────────── */
.nav-card-submenu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #f5f8fc;
    border: 1px solid #336699;
    position: absolute;
    top: 100%;
    left: -2px;
    width: calc(100% + 4px);
    z-index: 100;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
}

    .nav-card-submenu.show {
        display: block;
    }

.nav-card-submenu-link {
    display: block;
    padding: 0.3rem 0.75rem;
    font-size: 0.85rem;
    color: #336699;
    text-decoration: none;
}

    .nav-card-submenu-link:hover {
        background-color: #dde4ec;
    }

    .nav-card-submenu-link--plain {
        cursor: default;
        color: #555;
    }

/* ── Content wrapper ────────────────────────────────────────── */
.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.topbar {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #dee2e6;
    min-height: 2.75rem;
    display: flex;
    align-items: center;
}

.main-content {
    flex: 1;
    padding: 1.5rem;
}

/* ── Mobile: sidebar off-canvas ─────────────────────────────── */
.sidebar-open-btn {
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

@media (max-width: 767.98px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1050;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        height: 100%;
    }

        .sidebar.show {
            transform: translateX(0);
        }

    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1040;
    }

        .sidebar-overlay.show {
            display: block;
        }
}

@media (min-width: 768px) {
    .sidebar-open-btn {
        display: none;
    }
}

/* ── Alert banner (TempData success/error messages) ─────────── */
.alert-banner {
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    margin-bottom: 0.75rem;
}

.alert-banner--ok {
    background-color: #e6f4ea;
    color: #1e6b34;
    border: 1px solid #b6dfc1;
}

.alert-banner--err {
    background-color: #fde7e7;
    color: #a02828;
    border: 1px solid #f1b8b8;
}

/* ── Data grid (CSS-Grid based CRUD list) ───────────────────────
   Reusable list/edit layout for per-record CRUD pages. Consumers
   set --data-grid-cols on the .data-grid element to control desktop
   column widths; mobile collapses to a single column with cell labels
   sourced from each cell's data-label attribute.                     */
.data-grid {
    --data-grid-cols: 1fr;
    width: 100%;
    margin: 0 auto;
}

.data-grid-header {
    background-color: #336699;
    color: #fff;
    font-weight: bold;
    text-align: center;
    border-radius: 10px 10px 0 0;
    padding: 0.5rem 1rem;
}

.data-grid-colheaders,
.data-grid-row {
    display: grid;
    grid-template-columns: var(--data-grid-cols);
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
}

.data-grid-colheaders {
    background-color: #dde4ec;
    color: #336699;
    font-weight: 700;
    text-align: center;
    border-bottom: 2px solid #336699;
}

    .data-grid-colheaders > div {
        text-align: center;
    }

.data-grid-row {
    border-bottom: 1px solid #eef1f5;
    margin: 0;
}

.data-grid-row--alt {
    background-color: #f0f5ea;
}

.data-grid-row--editing {
    background-color: #fff8d6;
    outline: 2px solid #336699;
    outline-offset: -2px;
}

.data-grid-cell {
    min-width: 0;
    overflow-wrap: anywhere;
}

.data-grid-cell--right {
    text-align: right;
}

.data-grid-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    align-items: center;
    min-width: 0;
}

    .data-grid-actions button,
    .data-grid-actions .data-grid-action-link {
        padding: 6px 12px;
        font-size: 13px;
        margin: 0;
        min-height: 36px;
        line-height: 1.4;
    }

.data-grid-action-link {
    display: inline-block;
    background-color: #336699;
    border: 2px solid #336699;
    border-radius: 4px;
    color: #fff;
    font-weight: bold;
    font-family: Arial;
    text-decoration: none;
    text-shadow: 0 0 5px #283966;
}

    .data-grid-action-link:hover {
        background-color: #2a5580;
        border-color: #2a5580;
        color: #fff;
    }

/* Narrow viewport: collapse to a single column with labels via data-label.
   Threshold is set above the typical 4-column min-fit so rows never appear
   cramped or overflow at intermediate widths. */
@media (max-width: 800px) {
    .data-grid-colheaders {
        display: none;
    }

    .data-grid-row {
        grid-template-columns: 1fr;
        border: 1px solid #dde4ec;
        border-top: none;
        padding: 0.4rem 0.6rem;
        margin-bottom: 0.5rem;
    }

    .data-grid-cell,
    .data-grid-actions {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.35rem 0;
        text-align: left;
        border-bottom: 1px dashed #dde4ec;
    }

        .data-grid-cell:last-child,
        .data-grid-actions:last-child {
            border-bottom: none;
        }

        .data-grid-cell[data-label]::before,
        .data-grid-actions[data-label]::before {
            content: attr(data-label);
            flex: 0 0 5.5rem;
            font-weight: 700;
            color: #336699;
            font-size: 0.85rem;
        }

    .data-grid-cell--right {
        text-align: left;
    }

    .data-grid-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

        .data-grid-actions > button,
        .data-grid-actions > .data-grid-action-link {
            flex: 1 1 auto;
            min-height: 44px;
            padding: 8px 12px;
        }
}

/* ── Card (project standard) ────────────────────────────────────
   Bootstrap .card with brand-blue border and a brand-blue / white
   header. Applies app-wide so every .card on the site is themed. */
.card {
    border-color: #336699;
}

.card-header {
    background-color: #336699;
    color: #fff;
    border-bottom-color: #336699;
    text-align: center;
}

/* ── Switch grid (label | switch, label | switch …) ─────────────
   Use inside a card to line up multiple toggles. First column is the
   label (auto-sized to the widest label), second column holds the
   switch. Inputs in this grid must have .form-switch-wise-input. */
.switch-grid {
    display: grid;
    grid-template-columns: max-content auto;
    column-gap: 1rem;
    row-gap: 0.5rem;
    align-items: center;
}

    .switch-grid > label {
        margin: 0;
    }

/* ── Toggle switch (project standard) ───────────────────────────
   Apply on the wrapper alongside .form-check.form-switch. Renders the
   label before the switch (sitting directly next to it), uses brand
   blue for the checked state, and bumps the switch a few px larger
   than the Bootstrap default. Markup order in the .cshtml must be
   <input> first then <label>; this rule reverses them visually so the
   label reads first. */
.form-switch-wise {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0;
    /* Reverse so the label (source order: 2nd) renders before the input. */
    flex-direction: row-reverse;
    justify-content: flex-end;
}

    .form-switch-wise .form-check-input {
        /* Bootstrap's .form-check-input has float + negative margin from
           .form-check; neutralize them so flex layout controls position. */
        float: none;
        margin: 0;
        /* Bump size: Bootstrap defaults are 2em x 1em. */
        width: 2.5em;
        height: 1.25em;
        flex-shrink: 0;
        /* Brand-blue border at rest. The :disabled rule below resets to
           grey for the disabled state. */
        border-color: #336699;
    }

    /* Brand-blue knob whenever unchecked + not disabled (covers both
       resting and focused — the knob colour shouldn't flicker on
       focus/blur). The knob is the inline SVG circle inside
       --bs-form-switch-bg; we override it here. */
    .form-switch-wise .form-check-input:not(:checked):not(:disabled) {
        --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23336699'/%3e%3c/svg%3e");
    }

    .form-switch-wise .form-check-label {
        margin: 0;
    }

        .form-switch-wise .form-check-input:checked {
            background-color: #336699;
            border-color: #336699;
        }

        /* Focus ring uses the soft brand grey-blue so it's visible against
           both the unchecked and checked (#336699) track. */
        .form-switch-wise .form-check-input:focus {
            border-color: #336699;
            box-shadow: 0 0 0 0.2rem #dde4ec;
        }

        /* Disabled wins: neutral grey border + grey knob SVG. Bootstrap's
           own .form-check-input:disabled rule keeps the conventional
           opacity:0.5 faded look on top. */
        .form-switch-wise .form-check-input:disabled {
            border-color: rgba(0, 0, 0, 0.25);
            --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
        }

/* ── Tri-state segmented toggle (project standard) ──────────────
   Three connected pill segments backed by a hidden radio group.
   Markup pattern:
     <div class="tri-switch" role="radiogroup" aria-label="Foo">
         <input type="radio" id="foo-0" name="foo" value="0" />
         <label for="foo-0">Off</label>
         <input type="radio" id="foo-1" name="foo" value="1" checked />
         <label for="foo-1">On</label>
         <input type="radio" id="foo-2" name="foo" value="2" />
         <label for="foo-2">Once</label>
     </div>
   Radios are visually hidden but focusable so the radio group's
   built-in arrow-key navigation still works. The :checked + label
   rule paints the selected segment brand blue.                    */
.tri-switch {
    display: inline-flex;
    border: 1px solid #336699;
    border-radius: 999px;
    overflow: hidden;
    user-select: none;
    line-height: 1;
    font-size: 0.85rem;
}

    .tri-switch input[type="radio"] {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .tri-switch label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.25rem;
        padding: 0.3rem 0.375rem;
        cursor: pointer;
        color: #336699;
        background: transparent;
        border-left: 1px solid #336699;
        margin: 0;
        transition: background-color 0.12s, color 0.12s;
    }

        .tri-switch label:first-of-type {
            border-left: 0;
        }

        .tri-switch input[type="radio"]:checked + label {
            background-color: #336699;
            color: #fff;
        }

        .tri-switch input[type="radio"]:focus-visible + label {
            box-shadow: inset 0 0 0 2px #dde4ec;
        }

        .tri-switch label:hover {
            background-color: #eef3f9;
        }

        .tri-switch input[type="radio"]:checked + label:hover {
            background-color: #336699;
        }

/* ── Icon button (image button with hover swap) ─────────────────
   Used via Views/Shared/_IconButton.cshtml. Both default and hover
   images render at all times; CSS toggles which one is visible so
   there's no flicker on first hover.                                */
.icon-button {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    box-shadow: none !important;
    text-shadow: none !important;
    line-height: 0;
    /* Anchor-mode: drop link underline / inherited color. */
    text-decoration: none;
    color: inherit;
    /* Defeat .data-grid-actions > button growth rules so the icon
       stays at its 32px box even inside a flex action cell. */
    flex: 0 0 auto !important;
    min-height: 0 !important;
}

    .icon-button:hover,
    .icon-button:active {
        background: transparent !important;
        border: none !important;
    }

.icon-button-img {
    max-width: 32px;
    max-height: 32px;
    width: auto;
    height: auto;
    pointer-events: none;
}

.icon-button-img--hover {
    display: none;
}

.icon-button:hover .icon-button-img--default,
.icon-button:focus-visible .icon-button-img--default {
    display: none;
}

.icon-button:hover .icon-button-img--hover,
.icon-button:focus-visible .icon-button-img--hover {
    display: inline;
}

/* Cap the width of each card on the Global Settings / General pages so
   the form reads as a column on wide displays instead of stretching
   edge-to-edge. */
.global-settings-form .card,
.general-form .card {
    max-width: 37.5rem;
}

/* Per-field auto-save status indicator (Global Settings page).
   Sits to the right of the input or switch; hidden until a successful save. */
.field-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #1e6b34;
    font-size: 0.875rem;
    line-height: 1;
    opacity: 1;
}

/* The 10s auto-hide adds this class to fade the indicator out over 2s.
   Direct hides (Undo click, save error) skip this and snap to [hidden]. */
.field-status--fading {
    opacity: 0;
    pointer-events: none;
    transition: opacity 2s linear;
}

.field-status[hidden] {
    display: none;
}

.field-status .undo-btn {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    line-height: 1;
}

.field-status .undo-btn-img {
    width: 20px;
    height: 20px;
    display: inline;
}

.field-status .undo-btn-img--hover {
    display: none;
}

.field-status .undo-btn:hover .undo-btn-img--default,
.field-status .undo-btn:focus-visible .undo-btn-img--default {
    display: none;
}

.field-status .undo-btn:hover .undo-btn-img--hover,
.field-status .undo-btn:focus-visible .undo-btn-img--hover {
    display: inline;
}