/* Bootstrap 5.0.2 overrides for the portals and standalone pages: palette variables only, no fixed colors
   (BootstrapOverridesColorTests). Standalone pages restyle accent controls in tip-standalone.css. */
:root {
    /* Read only by the two rules below (text and border), so the link role, not the accent. */
    --bs-primary: var(--tip-link, var(--tip-sa-link));
}

.tips-text-primary {
    color: var(--bs-primary);
}

.border-primary {
    border-color: var(--bs-primary) !important;
}

.fw-400 {
    font-weight: 400;
}

/*Bootstrap Custom Styles*/
.fs-65 {
    font-size: .875rem;
}

.fs-7 {
    font-size: .75rem;
}

.fs-8 {
    font-size: .73rem;
}

.fs-9 {
    font-size: .6rem;
}

.placeholder-color {
    color: var(--mud-palette-text-secondary, var(--tip-sa-muted));
}

.form-control:focus {
    border-color: var(--tip-focus-ring, var(--tip-sa-link)) !important; /* the focus ring color, not Bootstrap blue */
    box-shadow: none !important; /* remove blue glow */
    outline: none !important; /* remove native outline */
}

.form-control::-webkit-input-placeholder {
    color: var(--mud-palette-text-secondary, var(--tip-sa-muted));
}

.form-control, .rounded-input {
    border-radius: 10px;
}

.form-select, .rounded-input {
    border-radius: 10px;
}
    /* Prevent light blue focus styling on selects */
    .form-select:focus,
    .form-select:focus-visible {
        border-color: var(--tip-focus-ring, var(--tip-sa-link)) !important;
        box-shadow: none !important;
        outline: 2px solid var(--tip-focus-ring, var(--tip-sa-link)) !important;
        outline-offset: 1px;
    }

.form-control-sm {
    min-height:  calc(1.2em + (.5rem + 1px)); 
    padding: .23rem .5rem;
    font-size: .875rem;
    border-radius: 10px;
}

/* Matches a filled MudBlazor primary button in every state, outranking Bootstrap's own state rules. */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    color: var(--mud-palette-primary-text) !important;
    background-color: var(--mud-palette-primary) !important;
    border-color: var(--mud-palette-primary) !important;
}

.btn-primary:hover {
    filter: brightness(1.07);
}

/* Same fill and ink as the portal disabled filled button; opacity undoes Bootstrap's 0.65 fade. */
.btn-primary:disabled,
.btn-primary.disabled {
    color: var(--mud-palette-text-disabled) !important;
    background-color: var(--tip-btn-disabled-bg, var(--mud-palette-action-disabled-background)) !important;
    border-color: transparent !important;
    opacity: 1;
}

a, .btn-link {
    color: var(--tip-link, var(--tip-sa-link));
}

    .form-control:focus, .form-check-input:focus {
        box-shadow: 0 0 0 0.1rem var(--mud-palette-surface, var(--tip-sa-surface)), 0 0 0 0.25rem var(--tip-focus-ring, var(--tip-sa-link));
    }

/* No glow on buttons: no focus halo on a click; keyboard focus shows as an outline instead. */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .btn-primary:focus, .btn-primary:active:focus {
    box-shadow: none;
}

.btn:focus-visible, .btn-link.nav-link:focus-visible {
    outline: 2px solid var(--tip-focus-ring, var(--tip-sa-link));
    outline-offset: 2px;
}

.btn-xs {
    padding: .25rem .5rem;
    font-size: .75rem;
}

.btn-group-sm > .btn, .btn-xs {
    padding: .25rem .5rem;
    font-size: .75rem;
}

/* Native file inputs take the accent fill with its contrast ink: the hidden ones inside MudFileUpload and the
   visible InputFile controls (FieldOps photo capture, Onboarding site and workbook import). */
input[type="file"] {
    width:100%;
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
    padding: 5px 10px !important;
    border-radius: 10px !important;
    border-color: var(--mud-palette-primary) !important;
    font-size: 12px !important;
    cursor: pointer !important;
}

    input[type="file"]::file-selector-button {
        cursor: pointer;
    }

    input[type="file"]::-webkit-file-upload-button {
        cursor: pointer;
    }

    input[type="file"] + label {
        background-color: var(--mud-palette-primary);
        color: var(--mud-palette-primary-text);
        padding: 12px 20px;
        border-radius: 10px;
        cursor: pointer;
        font-size: 12px;
        text-align: center;
        transition: background-color 0.3s ease;
    }

    /* The button gradient end (flat in light mode, where the darkened accent fails contrast). */
    input[type="file"]:hover + label,
    input[type="file"]:active + label {
        background-color: var(--tip-btn-primary-end, var(--tip-sa-primary));
    }

/* A disabled file input (workbook import while a file is read) reads as disabled, not as live accent. */
input[type="file"]:disabled {
    background-color: var(--tip-btn-disabled-bg, var(--mud-palette-action-disabled-background)) !important;
    color: var(--mud-palette-text-disabled) !important;
    border-color: transparent !important;
    cursor: not-allowed !important;
}

input[type="checkbox"] {
    width: 1.1em;
    height: 1.1em;
    accent-color: var(--mud-palette-primary);
}

.text-orange {
    color: var(--bs-orange);
}

/* Bootstrap's .text-muted (#6c757d) is under 4.5:1 on both portal pages, so inside the portals it reads in the
   secondary text tone; standalone pages set their own. */
body.theme-light .text-muted,
body.theme-dark .text-muted {
    color: var(--mud-palette-text-secondary) !important;
}

/* Bootstrap colors inline code pink (#d63384: 3.7:1 in dark, 4.1:1 in light). Code reads as body text on a
   neutral tint in both modes (WCAG 1.4.3). */
code {
    color: var(--mud-palette-text-primary);
    background-color: var(--tip-neutral-tile);
    padding: 0 .25em;
    border-radius: 4px;
}

/* A code block keeps the pre's own surface; the inline tint would stripe each line. */
pre code {
    background: none;
    padding: 0;
}