/*
    Brand palette, sampled from the Beja Bike Store logo.

    Yellow is used as an accent only — for the brand mark and the active navigation
    marker — and never for buttons or status. Bootstrap's warning amber is already
    carrying "pendente" on holiday requests, and a yellow primary button sitting beside
    an amber pending badge would destroy that distinction.
*/
:root {
    --bbs-yellow: #FFD800;
    --bbs-yellow-dark: #E6C200;
    --bbs-ink: #1F1B1B;
    --bbs-ink-soft: #38342D;
    --bbs-ink-muted: #b9b4b0;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #0a58ca;
}

/* Primary actions take the brand's near-black rather than its yellow: white on #1F1B1B
   clears WCAG AA comfortably, whereas white on yellow does not. */
.btn-primary {
    color: #fff;
    background-color: var(--bbs-ink);
    border-color: var(--bbs-ink);
}

.btn-primary:hover, .btn-primary:focus {
    color: #fff;
    background-color: var(--bbs-ink-soft);
    border-color: var(--bbs-ink-soft);
}

.btn-primary:disabled, .btn-primary.disabled {
    background-color: var(--bbs-ink-soft);
    border-color: var(--bbs-ink-soft);
}

.btn-outline-primary {
    color: var(--bbs-ink);
    border-color: var(--bbs-ink);
}

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

/* Focus ring uses the brand yellow over a dark halo so it stays visible on both the
   white content area and the dark sidebar. */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--bbs-ink), 0 0 0 0.25rem var(--bbs-yellow);
}

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

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

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

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

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.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;
}

/* ============================================================================
   TOUCH-DEVICE FIXES  (from the iPad review)
   ----------------------------------------------------------------------------
   An iPad review of the management UI surfaced two systemic touch problems.
   Both are fixed GLOBALLY here, but ONLY on touch devices via
   `@media (pointer: coarse)` — that query matches touch screens (tablets /
   phones) and never a mouse-driven desktop, so the desktop layout is left
   exactly as designed.

   1. ANTI-ZOOM. iOS Safari auto-zooms the viewport whenever the user focuses an
      <input>/<select>/<textarea> whose font-size is BELOW 16px. Bootstrap's
      `.form-control-sm` / `.form-select-sm` are 14px and are used pervasively
      across the management forms, tables and filters (holiday entitlements,
      channel config, category editor, approval comment box, filter selects), so
      every focus jarringly zoomed the page. Lifting them to the 16px floor iOS
      needs stops the zoom; 16px is only ~2px larger than 14px so the controls
      stay visually reasonable. Padding/height are left to follow from the
      font-size — nothing else is touched.

   2. TAP TARGETS. Several controls fall below Apple's HIG 44x44 CSS-px minimum:
      `.btn-sm` (~31px), `.btn-close` (~24px) and the small `.form-check-input`
      checkboxes. They are enlarged to be comfortably tappable. Labels are
      already tappable, so the checkbox bump is kept gentle.
   ============================================================================ */
@media (pointer: coarse) {

    /* --- 1. Anti-zoom: hold interactive text controls at the 16px iOS floor --- */
    .form-control-sm,
    .form-select-sm {
        font-size: 16px;
    }

    /* Belt-and-braces catch for raw controls that carry no Bootstrap sizing
       class. Deliberately kept as bare element selectors (specificity 0,0,1) so
       they sit BELOW any class-based font-size — Bootstrap's `.form-control`,
       `.form-control-sm` (set to 16px just above) and even a deliberately larger
       `.form-control-lg` all still win. This makes 16px behave as a floor for
       unclassed inputs only and never drags a larger control down. */
    input,
    select,
    textarea {
        font-size: 16px;
    }

    /* --- 2. Tap targets: Apple HIG 44x44 CSS-px minimum --- */
    /* `.btn-sm` gains height; inline-flex re-centres the label so the now-taller
       button centres its text vertically instead of top-aligning it. */
    .btn-sm,
    .btn-group-sm > .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* The close (x) button is icon-only and only ~24px — give it a full target. */
    .btn-close {
        min-width: 44px;
        min-height: 44px;
    }

    /* Modest bump only — the label is already a tap target, so we keep it gentle. */
    .form-check-input {
        width: 1.15rem;
        height: 1.15rem;
    }
}