/*
  SIDAN2 — Bootstrap overrides.
  This file is the SINGLE PLACE for any rule that themes or extends
  Bootstrap classes globally (no .admin-/.live-/.auth- ancestor scope).
  Loaded right after Bootstrap, before app/admin/live sheets — see App.razor.

  Per CLAUDE.md: changes to Bootstrap base styling go HERE, not into
  app.css / admin.css / live.css. Component-scoped overrides that happen
  to target Bootstrap classes through an ancestor (e.g.
  `.admin-checkbox-list .form-check`) stay in their feature file — those
  describe layout, not theme.

  Sections:
    1. Bootstrap CSS variable mappings   (--bs-*)
    2. Links + link-styled helpers       (a, .btn-link, .link-primary)
    3. Buttons                           (.btn, .btn-primary, .btn-outline*,
                                          .btn-ghost-primary, .btn-block,
                                          .btn-icon, .btn-sm)
    4. Forms                             (.form-control, .form-select,
                                          .form-label, .form-help, .is-invalid,
                                          .invalid-feedback, .form-check-input
                                          /switch, .input-group*)
    5. Cards                             (.card, .card-header/-footer/-body)
    6. Modal                             (.modal, .modal-dialog, .modal-content,
                                          .modal-header/-body/-footer, .modal-backdrop)
*/

/* ──────────────────────────────────────────────────────────────────────
   1. Bootstrap CSS variable mappings
   Map Bootstrap design tokens to SIDAN brand variables. Any Bootstrap
   utility that resolves through these (.bg-primary, .text-primary,
   .border-primary, badges, focus rings, …) automatically picks up the
   active customer's brand colour.
   ────────────────────────────────────────────────────────────────────── */
:root {
    --bs-link-color: var(--sidan-color-primary);
    --bs-link-color-rgb: var(--sidan-color-primary-rgb);
    --bs-link-hover-color: var(--sidan-color-primary-hover);
    --bs-link-hover-color-rgb: var(--sidan-color-primary-rgb);
    --bs-primary: var(--sidan-color-primary);
    --bs-primary-rgb: var(--sidan-color-primary-rgb);

    /* Fixed width of the MTOInput flag affix (flag + -lg input-group padding).
       Shared so other controls can align a column to the flag (e.g. the
       mini-conference neutral checkbox centres itself on this width). */
    --mto-flag-affix-width: 3.25rem;
}

/* ──────────────────────────────────────────────────────────────────────
   2. Links + link-styled helpers
   ────────────────────────────────────────────────────────────────────── */
a, .btn-link, .link-primary {
    color: var(--sidan-color-primary);
    text-decoration: none;
}

a:hover, .btn-link:hover, .link-primary:hover {
    color: var(--sidan-color-primary-hover);
}

/* ──────────────────────────────────────────────────────────────────────
   3. Buttons (-lg sized — see CLAUDE.md "Bootstrap-Größen Default = -lg")
   .btn-outline and .btn-ghost-primary are SIDAN-specific additions to
   Bootstrap's button family — they live here because they belong to the
   same theming surface as .btn-primary.
   ────────────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 16px;
    border-radius: var(--sidan-radius-sm);
    font-size: var(--sidan-text-md);
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
    background: transparent;
    color: var(--sidan-text);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
}

.btn:hover {
    background: var(--sidan-surface-sunk);
    color: var(--sidan-text);
}

.btn-primary {
    background: var(--sidan-color-primary);
    color: var(--sidan-color-primary-ink);
    border-color: var(--sidan-color-primary);
}

.btn-primary:hover {
    background: var(--sidan-color-primary-hover);
    border-color: var(--sidan-color-primary-hover);
    color: var(--sidan-color-primary-ink);
}

/* Keep the brand color when disabled — overrides Bootstrap's .btn-primary:disabled
   default blue (higher specificity than the plain .btn-primary rule above). */
.btn-primary:disabled,
.btn-primary.disabled {
    background: var(--sidan-color-primary);
    border-color: var(--sidan-color-primary);
    color: var(--sidan-color-primary-ink);
}

/* Primary outline — themed primary border + ink, no fill. Used where a
   primary action exists but is currently a no-op (e.g. "save changes" with
   nothing pending); the filled .btn-primary takes over once there is
   something to do. Themed via the central primary tokens, never Bootstrap's
   own blue .btn-outline-primary. */
.btn-primary-outline {
    background: transparent;
    border-color: var(--sidan-color-primary);
    color: var(--sidan-color-primary);
}

.btn-primary-outline:hover {
    background: var(--sidan-color-primary-soft);
    border-color: var(--sidan-color-primary);
    color: var(--sidan-color-primary);
}

.btn-outline {
    border-color: var(--sidan-border-strong);
    background: var(--sidan-color-primary-soft);
}

.btn-outline:hover {
    background: rgba(var(--sidan-color-primary-rgb), 0.16);
}

/* btn-check segmented controls (radio/checkbox + label.btn). Bootstrap's
   `.btn-check:checked + .btn` applies its OWN active palette, which would
   override our themed fills with Bootstrap's blue/grey. Re-assert the
   central tokens for the checked state so a checked segment matches the
   same variant rendered as a plain button. */
.btn-check:checked + .btn-primary {
    background: var(--sidan-color-primary);
    border-color: var(--sidan-color-primary);
    color: var(--sidan-color-primary-ink);
}

.btn-check:checked + .btn-outline {
    background: var(--sidan-surface);
    border-color: var(--sidan-border-strong);
    color: var(--sidan-text);
}

.btn-ghost-primary {
    color: var(--sidan-color-primary);
}

.btn-ghost-primary:hover {
    background: var(--sidan-color-primary-soft);
}

.btn-block {
    width: 100%;
    height: 52px;
    font-size: var(--sidan-text-lg);
    justify-content: center;
}

.btn-icon {
    padding: 0;
    width: 48px;
    justify-content: center;
}

.btn-sm {
    height: 38px;
    padding: 0 12px;
    font-size: var(--sidan-text-md);
    gap: 6px;
}

.btn-sm.btn-icon {
    width: 38px;
}

/* ──────────────────────────────────────────────────────────────────────
   4. Form controls (-lg)
   ────────────────────────────────────────────────────────────────────── */
.form-control,
.form-select {
    height: 48px;
    width: 100%;
    padding: 0 12px;
    border: 1px solid var(--sidan-border-strong);
    border-radius: var(--sidan-radius-sm);
    /* background-COLOR, not the `background` shorthand: the shorthand resets
       background-image and would wipe Bootstrap's dropdown caret on <select>
       (its down-arrow is drawn via background-image). See .form-select below. */
    background-color: var(--sidan-surface);
    font-size: var(--sidan-text-md);
    font-family: inherit;
    color: var(--sidan-text);
}

/* Placeholder text is a hint, not content: a light, subtle grey so an empty
   field never reads as an actual entry. App-wide (every .form-control /
   textarea) — opacity:1 overrides Firefox's default placeholder fade so the
   colour is exactly the token. */
.form-control::placeholder {
    color: var(--sidan-text-subtle);
    opacity: 1;
}

/* Restore the space Bootstrap reserves on the right for the dropdown caret —
   the shared rule's `padding: 0 12px` above dropped its right padding, which
   would let the option text run under the arrow. The caret image, position and
   size come from Bootstrap's own .form-select (lib/bootstrap dist), so nothing
   else needs restating here. */
.form-select {
    padding-right: 36px;
}

.form-control:focus,
.form-select:focus {
    outline: none;
    border-color: var(--sidan-color-primary);
    box-shadow: 0 0 0 3px var(--sidan-color-primary-soft);
}

/* Per-field validation state — central rule (see CLAUDE.md "Validierungsfehler").
   Components only set the .is-invalid class on the input and render a
   .invalid-feedback sibling with the localised message; the visual treatment
   (danger border, focus ring, message colour) lives here so the look stays
   consistent across admin + live + auth screens. */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--sidan-danger, #b32424);
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: var(--sidan-danger, #b32424);
    box-shadow: 0 0 0 3px var(--sidan-danger-bg, rgba(179, 36, 36, .12));
}
.invalid-feedback {
    display: block;
    color: var(--sidan-danger, #b32424);
    /* Normal app text size (CLAUDE.md "Schriftgröße: Default = normale Größe") —
       Bootstrap's default makes field errors read far too small. */
    font-size: var(--sidan-text-md);
    margin-top: 4px;
}

/* Checkboxes, radios and switches. Bootstrap paints the checked fill and the
   focus ring in its own blue (#0d6efd) with literal colours that the
   --bs-primary mapping above does not reach. Re-theme every .form-check-input
   to the central brand token so it is Primary by default and follows the
   per-customer branding (see CLAUDE.md "Links: niemals im Bootstrap-Standardblau"
   — same principle for controls). */
.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--sidan-color-primary);
    border-color: var(--sidan-color-primary);
}

.form-check-input:focus {
    border-color: var(--sidan-color-primary);
    box-shadow: 0 0 0 3px var(--sidan-color-primary-soft);
}

/* Focused-but-unchecked switch: Bootstrap swaps in a blue knob SVG. Repaint it
   with the same neutral knob as the resting state so no Bootstrap blue leaks on
   focus. The checked knob is already white (via Bootstrap's :checked rule that
   follows in source order) and must stay so — hence :not(:checked). */
.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
}

/* Checkbox / radio row layout — the SINGLE app-wide default.
   Bootstrap's stock .form-check uses padding-left + an absolutely floated
   input nudged with a fixed `margin-top: 0.25em`. That em-nudge only lines up
   with the *first text line* at Bootstrap's default font-size; with SIDAN's
   larger body text (--sidan-text-md) the box ends up sitting too high, so every
   checkbox reads as vertically off from its label. Replace the float model with
   a centered flex row once, here, so every .form-check in the app is aligned by
   default — no per-feature re-fixing.

   Scoped to inputs/labels *inside* a .form-check so bare .form-check-input
   elements (e.g. checkbox table cells that position themselves) are untouched. */
.form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 0;       /* drop the indent — the input now sits in normal flow */
    min-height: 0;
    margin-bottom: 0;
}

.form-check .form-check-input {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 0;             /* drop Bootstrap's negative left margin (was for the indent) */
    float: none;
}

/* Label on body text size with a line-height locked to the box height, so
   align-items: center centres two boxes of identical height with no drift. */
.form-check .form-check-label {
    font-size: var(--sidan-text-md);
    line-height: 22px;
    cursor: pointer;
}

/* Variant: align the box to the FIRST text line instead of the block centre.
   Because the box height equals the label's line-height, a single-line label
   still reads as centred (two identical 22px boxes, top-aligned == centred);
   only a label that wraps keeps the box pinned to the first line instead of
   drifting to the vertical middle between the lines. Use on checkboxes whose
   label may span multiple lines (e.g. a long opt-in sentence). */
.form-check.form-check-top {
    align-items: flex-start;
}

textarea.form-control {
    height: auto;
    padding: 10px 12px;
    line-height: 1.5;
}

/* Shared label style — bold and left-aligned (never inherits the centered
   text-align of splash/auth surfaces). Used app-wide via Bootstrap's
   .form-label, so every input label looks the same. */
.form-label {
    display: block;
    text-align: left;
    font-size: var(--sidan-text-base);
    font-weight: var(--sidan-font-weight-bold);
    color: var(--sidan-text-muted);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}

/* Danger variant of the shared label — for a block whose whole point is a
   problem (e.g. the invalid target profiles beside the rating scale). Custom
   extension of the Bootstrap label family, so it lives here with it. */
.form-label-danger {
    color: var(--sidan-danger);
}

.form-help {
    font-size: var(--sidan-text-base);
    color: var(--sidan-text-subtle);
    margin-top: 4px;
}

.input-group {
    position: relative;
    align-items: stretch;
}

/* Default input-group has an icon overlaid on the LEFT — keep the padding
   only in that case. The PasswordInput pattern (input + toggle button on
   the right) wraps the input in .input-group-affix to opt out. */
.input-group:not(.input-group-affix) .form-control {
    padding-left: 36px;
}

.input-group .btn {
    flex: 0 0 auto;
}

.input-group-icon {
    position: absolute;
    left: 12px;
    color: var(--sidan-text-subtle);
    pointer-events: none;
    font-size: var(--sidan-text-lg);
    display: inline-flex;
    align-items: center;
}

/* ──────────────────────────────────────────────────────────────────────
   5. Cards — borderless, lift via background + shadow
   ────────────────────────────────────────────────────────────────────── */
.card {
    background: var(--sidan-card-bg);
    color: var(--sidan-card-text);
    border: 0;
    border-radius: var(--sidan-radius-md);
    box-shadow: var(--sidan-shadow-sm);
}

.card-header,
.card-footer {
    border: 0;
    background: transparent;
}

.card-header {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--sidan-border);
}

.card-header h3 {
    margin: 0;
    font-size: var(--sidan-text-lg);
    font-weight: 600;
}

.card-body {
    padding: 20px;
}

/* ──────────────────────────────────────────────────────────────────────
   6. Modal
   The whole app uses ONE modal foundation: Bootstrap's modal markup, but
   visibility stays Blazor-controlled (the AdminModal shell renders
   `.modal show` + a sibling `.modal-backdrop show` behind an @if), NOT
   Bootstrap's JS. These overrides theme Bootstrap's modal to SIDAN, make the
   header a drag handle, and turn the footer into the full-width segmented bar.
   ────────────────────────────────────────────────────────────────────── */

/* Blazor renders `.modal show` directly (no Bootstrap JS to toggle display). */
.modal.show {
    display: block;
}

/* Dim layer — Bootstrap's native .modal-backdrop, only re-tinted to the SIDAN tone. */
.modal-backdrop {
    --bs-backdrop-bg: #141923;
    --bs-backdrop-opacity: .42;
}

/* The former "wide" modal was 960px; keep that exact width for report tables. */
.modal-xl {
    --bs-modal-width: 960px;
}

.modal-content {
    background: var(--sidan-surface);
    color: var(--sidan-text);
    border: none;
    border-radius: var(--sidan-radius);
    box-shadow: 0 24px 48px rgba(0, 0, 0, .18);
}

/* Header doubles as the drag handle (global handler in sidan2.js): show it is
   grabbable, suppress selection, allow pointer-drag on touch. Lay children out
   left-to-right with a gap (Bootstrap defaults to space-between, which only
   suits the title-plus-close case); headers that need a right-aligned control
   give it the `ms-auto` utility (e.g. the language picker's close button). */
.modal-header {
    cursor: move;
    user-select: none;
    touch-action: none;
    font-size: var(--sidan-text-lg);
    font-weight: 600;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

/* While dragging, the dialog is moved via an inline transform — drop any
   transition so it tracks the pointer 1:1. */
.modal-dialog.is-dragging {
    transition: none;
}

.modal-body {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.modal-body p { margin: 0; }

/* Footer buttons split the full width equally (single button → 100 %), as a
   segmented bar with divider lines — replaces Bootstrap's right-aligned footer. */
.modal-footer {
    display: flex;
    flex-wrap: nowrap;
    padding: 0;
    gap: 0;
    border-top: 1px solid var(--sidan-border);
}

.modal-footer > .btn {
    flex: 1 1 0;
    margin: 0;
    border-radius: 0;
    padding: 16px;
    border: none;
    border-right: 1px solid var(--sidan-border);
    background: transparent;
    color: var(--sidan-text-muted);
    font-size: var(--sidan-text-md);
    cursor: pointer;
}

.modal-footer > .btn:last-child { border-right: none; }
.modal-footer > .btn:hover { background: var(--sidan-surface-sunk); color: var(--sidan-text); }
.modal-footer > .btn.btn-danger {
    color: var(--sidan-danger, #b32424);
    font-weight: 500;
}
.modal-footer > .btn.btn-danger:hover {
    background: var(--sidan-danger-bg, #fdecec);
}
/* Positive primary action — coloured in the customer's primary tone so it reads
   as the action and stands out from the neutral "Abbrechen" cell. */
.modal-footer > .btn.btn-primary {
    color: var(--sidan-color-primary);
    font-weight: 500;
}
.modal-footer > .btn.btn-primary:hover {
    background: var(--sidan-color-primary-soft);
    color: var(--sidan-color-primary);
}
.modal-footer > .btn:disabled {
    color: var(--sidan-text-subtle);
    cursor: not-allowed;
    background: transparent;
}

/* Fullscreen dialogs fill the viewport — the header is no drag handle there.
   It can carry many controls (the timetable editor's toolbar), so let it wrap
   onto a second line on narrow widths (tablet) rather than overflow. */
.modal-fullscreen .modal-header {
    cursor: default;
    flex-wrap: wrap;
}