/* Light mode deliberately uses the original page styles. No layout or typography
   changes are applied to application content in either appearance. */
.appearance-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    padding: 7px;
    border: 1px solid #cbd5e1;
    border-radius: 50%;
    background: #fff;
    color: #15325b;
    cursor: pointer;
    touch-action: manipulation;
}
.appearance-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.appearance-toggle .appearance-sun { display: none; }
.appearance-toggle:hover { border-color: #048ed3; }
.appearance-toggle:focus-visible { outline: 3px solid #f3a316; outline-offset: 3px; }
.appearance-toggle--floating {
    position: fixed;
    left: max(14px, env(safe-area-inset-left));
    bottom: calc(145px + env(safe-area-inset-bottom));
    z-index: 1040;
    width: 42px;
    height: 42px;
    box-shadow: 0 3px 14px #0003;
}
@media screen {
    html[data-appearance="dark"] {
        color-scheme: dark;
        background-color: #101827;
        color: #e5edf7;
        /* Explicit tokens for the few legacy inline !important declarations. */
        --appearance-paper: #172235;
        --appearance-danger: #ffaaaa;
        --appearance-link: #a5ceff;
    }
    html[data-appearance="dark"] body { background-color: #101827 !important; color: #e5edf7; }
    html[data-appearance="dark"] .appearance-toggle { background: #1e293b !important; color: #f8ca69 !important; border-color: #64748b !important; }
    html[data-appearance="dark"] .appearance-toggle .appearance-moon { display: none; }
    html[data-appearance="dark"] .appearance-toggle .appearance-sun { display: block; }
    /* Fallbacks for third-party stylesheets that the browser does not allow us to
       inspect. The compatibility layer handles the site's own page/component CSS. */
    html[data-appearance="dark"] :is(.modal-content, .dropdown-menu, .popover, .swal2-popup, .ui-datepicker, .ui-autocomplete, .select2-dropdown, .daterangepicker, .panel, .well, .list-group-item) {
        background-color: #172235 !important;
        color: #e5edf7 !important;
        border-color: #43516a !important;
    }
    html[data-appearance="dark"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="color"]):not([type="image"]):not([type="hidden"]), select, textarea) {
        background-color: #172235;
        color: #e5edf7;
        border-color: #43516a;
    }
    html[data-appearance="dark"] :is(input, textarea)::placeholder { color: #a8b6ca; opacity: 1; }
    html[data-appearance="dark"] :is(.table, .table > tbody > tr > td, .table > thead > tr > th) { color: #e5edf7; border-color: #43516a; }
    html[data-appearance="dark"] option { background-color: #172235; color: #e5edf7; }
}
@media print {
    .appearance-toggle { display: none !important; }
    html { color-scheme: light !important; }
}