/* Bootstrap 5 utility-class CSS variables. Pages still use Bootstrap utility
   classes (row, col-md-*, d-flex, card, mb-3 ...) so we keep these tokens.

   Role tokens derive from the --mud-* variables MudThemeProvider emits, so
   AppTheme.cs stays the only place a brand color lives (as .eb-mud-grid in
   site.css already does). Every page loading this file is a routed component,
   so the variables always resolve.

   The raw scale (blue, gray-* ...) stays literal — it names a hue, not a role;
   a fork rebranding to green must not end up with a green --bs-blue.
   --bs-light is literal for a different reason: MudBlazor's palette has no
   Light counterpart to Dark, so there is nothing to derive it from. */

:root {
    /* Tubular Solutions brand palette — the three flat colors in the logo mark (FF-2968).
       Single-sourced from AppTheme.cs via --mud-*: navy = Primary, steel = Tertiary, so a
       rebrand stays one-file. Brand red has no palette role (theme Error is #e81123, a hair
       off), so it is named here literally. Hex in comments is for reference only. */
    --brand-navy: var(--mud-palette-primary);    /* #191F6C — wordmark, primary chrome */
    --brand-steel: var(--mud-palette-tertiary);  /* #93A7CC — the "SOLUTIONS" sub-wordmark */
    --brand-red: #EA0A2A;                         /* accent segments in the ring mark */

    --bs-blue: #126996;
    --bs-indigo: #6610f2;
    --bs-purple: #a663c0;
    --bs-pink: #d63384;
    --bs-red: #bf1920;
    --bs-orange: #f4592f;
    --bs-yellow: #ffed00;
    --bs-green: #209d50;
    --bs-teal: #20c997;
    --bs-cyan: #0078d7;
    --bs-black: #000;
    --bs-white: #ffffff;
    --bs-gray: #d3d3d3;
    --bs-gray-dark: #222222;
    --bs-gray-100: #f7f8f9;
    --bs-gray-200: #f2f2f2;
    --bs-gray-300: #e5e5e5;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #a1a1a1;
    --bs-gray-700: #495057;
    --bs-gray-800: #222222;
    --bs-gray-900: #212529;
    --bs-primary: var(--mud-palette-primary);
    --bs-secondary: var(--mud-palette-secondary);
    --bs-tertiary: var(--mud-palette-tertiary);
    --bs-success: var(--mud-palette-success);
    --bs-info: var(--mud-palette-info);
    --bs-warning: var(--mud-palette-warning);
    --bs-danger: var(--mud-palette-error);
    --bs-light: #d3d3d3;
    --bs-dark: var(--mud-palette-dark);
    --bs-primary-rgb: var(--mud-palette-primary-rgb);
    --bs-secondary-rgb: var(--mud-palette-secondary-rgb);
    --bs-success-rgb: var(--mud-palette-success-rgb);
    --bs-info-rgb: var(--mud-palette-info-rgb);
    --bs-warning-rgb: var(--mud-palette-warning-rgb);
    --bs-danger-rgb: var(--mud-palette-error-rgb);
    --bs-light-rgb: 211, 211, 211;
    --bs-dark-rgb: var(--mud-palette-dark-rgb);
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-font-sans-serif: var(--mud-typography-default-family);
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: var(--mud-typography-default-size);
    --bs-body-line-height: var(--mud-typography-default-lineheight);
    --bs-body-color: var(--mud-palette-text-primary);
    --bs-body-bg: var(--mud-palette-background);
    --bs-border-color: var(--mud-palette-lines-default);
    --bs-border-radius: var(--mud-default-borderradius);
    --bs-link-color: var(--mud-palette-secondary);
    --bs-link-hover-color: var(--mud-palette-primary);
    --bs-form-valid-color: var(--mud-palette-success);
    --bs-form-valid-border-color: var(--mud-palette-success);
    --bs-form-invalid-color: var(--mud-palette-error);
    --bs-form-invalid-border-color: var(--mud-palette-error);
}

a { color: var(--bs-link-color); }
a:hover { color: var(--bs-link-hover-color); }

/* Minimal .alert styling for the account pages' server-rendered status and
   validation boxes (Bootstrap itself is not loaded). */
.alert {
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: var(--bs-border-radius);
}

.alert-danger {
    color: var(--bs-danger);
    background-color: rgba(var(--bs-danger-rgb), 0.08);
    border-color: rgba(var(--bs-danger-rgb), 0.25);
}

/* Minimal form-control / form-select / form-check-input styling
   so account pages (server-rendered, plain HTML inputs) look correct. */
.form-control, .form-select {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--bs-body-color);
    /* Surface, not body background: the page field is tinted, and an input painted with it
       loses its edge — most visibly on the account pages, which paint themselves #f8f9fa. */
    background-color: var(--mud-palette-surface);
    background-clip: padding-box;
    border: 1px solid var(--bs-gray-400);
    border-radius: var(--bs-border-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control:focus, .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
    outline: 0;
}
.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
    appearance: none;
}
.form-label {
    margin-bottom: 0.25rem;
    font-weight: 500;
}

/* MudBlazor ships no truncation utility, so define the Bootstrap-named one the markup
   already asks for. min-width is the load-bearing part: a flex item refuses to shrink
   below its content width by default, so inside a row MudStack the ellipsis never
   triggers without it. */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
/* Required-field indicator — red asterisk on the label.
   - Custom <label class="form-label"> fields add an explicit .required-asterisk span.
   - MudBlazor inputs with Required="true" render the asterisk via .mud-input-label::after
     (it otherwise inherits the muted label color); recolor it to match. */
.required-asterisk {
    color: var(--bs-danger);
    margin-left: 0.15rem;
}
.mud-input-required .mud-input-label::after {
    color: var(--bs-danger);
}
/* Editable text at the theme's default size, the size read-only values render at. MudBlazor sets input
   text in Subtitle1 (1rem), so an edited value would otherwise read larger than the same value shown.
   The label selector is one class more specific than MudBlazor's own, so it wins whatever the order
   the stylesheets load in. */
.mud-input.mud-typography-subtitle1,
.mud-input-control > .mud-input-control-input-container > .mud-input-label.mud-input-label-inputcontrol {
    font-size: var(--mud-typography-default-size);
}
.form-check {
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}
.form-check-input {
    width: 1rem;
    height: 1rem;
    margin-top: 0.25rem;
    margin-left: -1.5rem;
    vertical-align: top;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--bs-gray-500);
    border-radius: 0.25rem;
}
.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.form-check-label { cursor: pointer; }

.btn-primary {
    color: var(--bs-white);
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    color: var(--bs-white);
}
.btn-primary:disabled {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    opacity: 0.65;
}
.btn-secondary {
    color: var(--bs-white);
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}
.btn-danger {
    color: var(--bs-white);
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
}

/* Mobile touch targets for auth pages (phones ≤480px) */
@media (max-width: 480px) {
    .block-content .btn {
        min-height: 3.5rem;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        font-size: 1.125rem;
        font-weight: 600;
    }
    .block-content .form-control {
        min-height: 3rem;
        font-size: 1rem;
    }
}