/* Shared SFL brand palette — same three colors used by SlingBuiltAuth and OrganizedInventory
   (J:\Projects\ColorSchema.txt): Orange #D9781E, Green #365234, Sand #DCC59F.
   Chrome (navbar / sidebar / headings) follows OrganizedInventory; button + accent treatment
   follows both. The accent hues are the same in light and dark — only the surfaces flip. */
:root {
    --mfb-orange: #D9781E;
    --mfb-orange-dark: #b7620f;
    --mfb-green: #365234;
    --mfb-green-dark: #223420;
    --mfb-green-light: #4a6f47;
    --mfb-lime: #739922;
    --mfb-sand: #DCC59F;
    --mfb-sand-light: #f4ecdd;

    --mfb-body-bg: #ffffff;
    --mfb-surface: #ffffff;
    --mfb-surface-muted: #f7f7f7;
    --mfb-border: #d9d9d9;
    --mfb-text: #1f2328;
    --mfb-text-muted: #5c6570;

    --bs-primary: var(--mfb-green);
    --bs-primary-rgb: 54, 82, 52;
    --bs-link-color: var(--mfb-orange-dark);
    --bs-link-hover-color: var(--mfb-orange);
}

@media (prefers-color-scheme: dark) {
    :root {
        --mfb-body-bg: #16181d;
        --mfb-surface: #1e2128;
        --mfb-surface-muted: #262a33;
        --mfb-border: #363b45;
        --mfb-text: #e6e8eb;
        --mfb-text-muted: #9aa3ae;
        --mfb-sand-light: #2b2a25;

        --bs-body-bg: var(--mfb-body-bg);
        --bs-body-color: var(--mfb-text);
        --bs-emphasis-color: var(--mfb-text);
        --bs-border-color: var(--mfb-border);
        --bs-secondary-color: var(--mfb-text-muted);
        --bs-tertiary-bg: var(--mfb-surface-muted);
    }

    html { color-scheme: dark; }

    .card, .list-group-item, .table {
        background-color: var(--mfb-surface);
        color: var(--mfb-text);
    }

    .table {
        --bs-table-bg: var(--mfb-surface);
        --bs-table-color: var(--mfb-text);
        --bs-table-border-color: var(--mfb-border);
        --bs-table-striped-bg: var(--mfb-surface-muted);
        --bs-table-striped-color: var(--mfb-text);
        --bs-table-hover-bg: #2d323c;
        --bs-table-hover-color: var(--mfb-text);
    }

    .table-light, .table > thead.table-light th {
        --bs-table-bg: var(--mfb-surface-muted);
        --bs-table-color: var(--mfb-text);
        color: var(--mfb-text);
    }

    .form-control, .form-select {
        background-color: var(--mfb-surface);
        border-color: var(--mfb-border);
        color: var(--mfb-text);
    }

        .form-control:disabled, .form-select:disabled {
            background-color: var(--mfb-surface-muted);
        }

    .input-group-text {
        background-color: var(--mfb-surface-muted);
        border-color: var(--mfb-border);
        color: var(--mfb-text-muted);
    }

    .dropdown-menu {
        background-color: var(--mfb-surface);
        border-color: var(--mfb-border);
    }

        .dropdown-item {
            color: var(--mfb-text);
        }

        .dropdown-item:hover, .dropdown-item:focus {
            background-color: var(--mfb-surface-muted);
            color: var(--mfb-text);
        }

    .text-muted { color: var(--mfb-text-muted) !important; }
    .border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--mfb-border) !important; }
    fieldset.border, .modal-content { background-color: var(--mfb-surface); }

    /* Bootstrap's "always light" utilities used across the pages — remap to brand-dark surfaces */
    .text-bg-light {
        background-color: var(--mfb-surface-muted) !important;
        color: var(--mfb-text) !important;
    }

    .bg-light { background-color: var(--mfb-surface-muted) !important; }

    .badge.text-bg-light { border: 1px solid var(--mfb-border); }

    .list-group-item-action:hover, .list-group-item-action:focus {
        background-color: var(--mfb-surface-muted);
        color: var(--mfb-text);
    }

    .alert-info { background-color: #1f2c33; border-color: #2c4049; color: #bfe0ec; }
    .alert-success { background-color: #1e2c1a; border-color: #35502a; color: #cfe4b9; }
    .alert-warning { background-color: #332c17; border-color: #5c4a22; color: #ecd9b0; }
    .alert-danger { background-color: #331c1c; border-color: #5c2a2a; color: #ecc0c0; }

    #blazor-error-ui { color-scheme: light only; }
}

html, body {
    font-family: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    background-color: var(--mfb-body-bg);
    color: var(--mfb-text);
}

h1 { font-size: 1.6rem; }
h1, h2, h3, h4 { color: var(--mfb-green); }

@media (prefers-color-scheme: dark) {
    h1, h2, h3, h4 { color: var(--mfb-sand); }
}

h1:focus { outline: none; }

a, .btn-link { color: var(--mfb-orange-dark); }

    a:hover, .btn-link:hover { color: var(--mfb-orange); }

.btn-primary {
    color: #fff;
    background-color: var(--mfb-green);
    border-color: var(--mfb-green-dark);
}

    .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
        color: #fff;
        background-color: var(--mfb-green-dark);
        border-color: var(--mfb-green-dark);
    }

.btn-outline-primary {
    color: var(--mfb-green);
    border-color: var(--mfb-green);
}

    .btn-outline-primary:hover, .btn-outline-primary:active {
        background-color: var(--mfb-green);
        border-color: var(--mfb-green);
        color: #fff;
    }

@media (prefers-color-scheme: dark) {
    .btn-outline-primary { color: var(--mfb-sand); border-color: var(--mfb-green-light); }
    .btn-outline-primary:hover, .btn-outline-primary:active { background-color: var(--mfb-green-light); color: #fff; }
}

.btn-secondary {
    background-color: var(--mfb-orange);
    border-color: var(--mfb-orange-dark);
    color: #fff;
}

    .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
        background-color: var(--mfb-orange-dark);
        border-color: var(--mfb-orange-dark);
        color: #fff;
    }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem rgba(255,255,255,0.6), 0 0 0 0.25rem var(--mfb-lime);
}

.form-check-input:checked {
    background-color: var(--mfb-green);
    border-color: var(--mfb-green);
}

a.nav-link.active, .nav-pills .nav-link.active {
    background-color: var(--mfb-green);
    color: #fff;
}

.badge.text-bg-success, .badge.bg-success { background-color: var(--mfb-lime) !important; }

.card-header {
    background-color: var(--mfb-sand-light);
    border-bottom-color: var(--mfb-sand);
    font-weight: 600;
    color: var(--mfb-green);
}

@media (prefers-color-scheme: dark) {
    .card-header { color: var(--mfb-sand); border-bottom-color: var(--mfb-border); }
}

code {
    color: var(--mfb-orange-dark);
    background: var(--mfb-sand-light);
    padding: 1px 5px;
    border-radius: 4px;
}

@media (prefers-color-scheme: dark) {
    code { color: var(--mfb-sand); }
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
    font-size: .85rem;
}

#blazor-error-ui {
    background: lightyellow;
    color: #1f2328;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.bi::before {
    display: inline-block;
    content: "";
    vertical-align: -.125em;
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    width: 1rem;
    height: 1rem;
}