/*
 * Frosted-glass modal skin — the app-wide "new look" for ALL bit-modals
 * (view + edit), matching docs/mockups/package-edit-frosted-v2.html and the
 * frosted listing pages (frosted-listing.css).
 *
 * Applies automatically to every modal built through modals/common_modal.html.twig
 * (they all carry .bit-modal). Sectioned "eo" modals get their frosted panel
 * treatment from sectioned-modal.css on top of this base.
 *
 * What this file owns:
 *   - the glass modal card (colorful gradient tint baked in — the bootstrap
 *     backdrop behind a modal is dark, so real translucency would look muddy)
 *   - the dark navy gradient hero header (white title/subtitle, glass icon tile)
 *   - frosted form fields + eyebrow labels inside modal bodies
 *   - the glass footer with brand-gradient submit
 *
 * Load order: AFTER bit_modal.css and the per-modal css files, BEFORE
 * tomselect-overrides.css (which must stay last).
 */

/* ===== the glass card ===== */
.modal.bit-modal {
    --modal-border-radius: 22px;
    font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.modal.bit-modal .modal-content {
    border-radius: var(--modal-border-radius);
    /* no keyline anywhere on the card — the white 1px border read as a stray
       white edge against the navy header (and bit_modal.css variant borders
       are suppressed by the !important) */
    border: none !important;
    box-shadow: 0 24px 70px rgba(17, 42, 84, .28), 0 4px 14px rgba(17, 42, 84, .12) !important;
    /* the mockup's colorful page gradient is baked into the card so the
       frosting reads the same over the dark modal backdrop */
    background:
        radial-gradient(900px 500px at 8% -8%, rgba(124, 197, 255, .35), transparent 60%),
        radial-gradient(800px 560px at 100% 0%, rgba(183, 155, 255, .28), transparent 55%),
        radial-gradient(700px 500px at 50% 120%, rgba(88, 226, 194, .26), transparent 55%),
        linear-gradient(160deg, #f3f8fd 0%, #f1f4fd 45%, #f2fbf7 100%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
}

/* ===== navy gradient hero header (mockup .eo-head) ===== */
.modal.bit-modal .modal-header {
    background: linear-gradient(115deg, #112a54 0%, #1a3a5c 45%, #2674a6 120%) !important;
    border-bottom: none !important;
    padding: 16px 22px;
    color: #fff;
}
.modal.bit-modal .modal-header .modal-title {
    color: #fff !important;
    font-weight: 800;
    letter-spacing: -.01em;
    display: flex;
    align-items: center;
}
/* header icon → glass tile like the mockup logo square (variant color tints it) */
.modal.bit-modal .modal-header .modal-title i {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    font-size: 1.25rem;
    color: #fff !important;
    background: color-mix(in srgb, var(--modal-color, #2674a6) 22%, rgba(255, 255, 255, .12));
    border: 1px solid rgba(255, 255, 255, .25);
    margin-right: .8rem !important;
    position: relative;
    overflow: hidden;
}
/* sheen sweep across the icon tile on header hover (matches listing hero glyph) */
.modal.bit-modal .modal-header .modal-title i::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 62%);
    transform: translateX(-120%);
    transition: transform .6s ease;
}
.modal.bit-modal .modal-header:hover .modal-title i::after { transform: translateX(120%); }
@media (prefers-reduced-motion: reduce) {
    .modal.bit-modal .modal-header .modal-title i::after { transition: none; }
}
.modal.bit-modal .modal-header .modal-subtitle,
.modal.bit-modal .modal-header small {
    color: #fff !important;
    opacity: .85;
    font-weight: 500;
}
/* white keyline around the red close button so it pops on navy */
.modal.bit-modal .modal-header .btn-close {
    border: 2px solid #fff;
    width: 1.05em;
    height: 1.05em;
}
/* text/links in the header extras row (badges, toggles, meta) */
.modal.bit-modal .modal-header { --bs-heading-color: #fff; }
.modal.bit-modal .modal-header .text-muted { color: rgba(255, 255, 255, .75) !important; }

/* ===== body — transparent so the card gradient shows through ===== */
.modal.bit-modal .modal-body {
    background: transparent !important;
}

/* ===== record ID bar — directly below the hero header, far left =====
   (modals/_modal_idbar.html.twig — the ID + copy chip moved out of every
   hero header's meta row). Negative margins cancel the .modal-body padding
   so the bar sits FLUSH against the hero header as a full-width band. */
.modal.bit-modal .modal-idbar {
    display: flex;
    align-items: center;
    gap: 6px;
    /* pull up against the hero header (cancels the .modal-body top padding);
       no background/border — the bar sits directly on the body gradient */
    margin: calc(-1 * var(--bs-modal-padding, 1rem)) 0 10px;
    padding: 8px 6px 0;
}
.modal.bit-modal .modal-idbar .idbar-id {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .62rem;
    font-weight: 400;
    letter-spacing: .3px;
    color: #6d84a3;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.modal.bit-modal .modal-idbar .idbar-copy {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(17, 42, 84, .15);
    color: #41597a;
    border-radius: 5px;
    font-size: .58rem;
    padding: 2px 5px;
    cursor: pointer;
    line-height: 1;
}
.modal.bit-modal .modal-idbar .idbar-copy:hover { background: #fff; }
/* Active toggle on the idbar's right — edit modals without a section rail
   park their Active/Enabled toggle here (never in the hero header) */
.modal.bit-modal .modal-idbar .idbar-active {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.modal.bit-modal .modal-idbar .idbar-active .idbar-active-lbl {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .72rem;
    font-weight: 700;
    color: #41597a;
}

/* frosted form fields (mockup .ff) — exclude the TomSelect wrapper, which
   copies .form-control/.form-select onto its div (gotcha from the listing build) */
.modal.bit-modal .modal-body input.form-control,
.modal.bit-modal .modal-body textarea.form-control,
.modal.bit-modal .modal-body select.form-select,
.modal.bit-modal .modal-body select.form-control {
    border: 1px solid rgba(255, 255, 255, .7);
    background-color: rgba(255, 255, 255, .5);
    border-radius: 11px;
    color: #12233b;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.modal.bit-modal .modal-body input.form-control:focus,
.modal.bit-modal .modal-body textarea.form-control:focus,
.modal.bit-modal .modal-body select.form-select:focus,
.modal.bit-modal .modal-body select.form-control:focus {
    background-color: rgba(255, 255, 255, .78);
    border-color: color-mix(in srgb, var(--bit-primary, #2674a6) 45%, white);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bit-primary, #2674a6) 16%, transparent);
    outline: none;
}
.modal.bit-modal .modal-body input.form-control::placeholder,
.modal.bit-modal .modal-body textarea.form-control::placeholder { color: #64748b; }
/* …but NEVER inside floating-label fields: bootstrap hides those placeholders
   (label sits where the placeholder is) and the rule above out-specified it,
   printing label + placeholder on top of each other ("First Name/First name") */
.modal.bit-modal .modal-body .form-floating > .form-control::placeholder,
.modal.bit-modal .modal-body .form-floating > .form-control:focus::placeholder {
    color: transparent;
}
/* SELECTS replicate the e/employees Status filter chip: solid white (never
   the glass tint — it reads as a disabled/empty field), dark text, and an
   ALWAYS-visible chevron. We supply our own SVG caret (same glyph/color as
   frosted-listing.css filter chips) instead of relying on bootstrap's,
   which app CSS kept knocking out on some selects (e.g. State).
   background-color + background-image separately — the `background`
   shorthand would wipe the caret. TomSelect wrappers are excluded (styled
   solid white in tomselect-overrides.css). */
.modal.bit-modal .modal-body select.form-select,
.modal.bit-modal .modal-body select.form-control,
.modal.bit-modal .modal-body select.eo-input,
.modal.bit-modal .modal-body .eo-ff select {
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff !important;
    color: #12233b;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="%2341597a" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m2 5 6 6 6-6"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px 12px !important;
    padding-right: 34px !important;
}
/* keep validation state visible over the glass tint */
.modal.bit-modal .modal-body .form-control.is-invalid,
.modal.bit-modal .modal-body .form-select.is-invalid { border-color: #dc3545; }

/* eyebrow field labels (mockup .ff label) — form labels only, never
   checkbox/radio labels */
.modal.bit-modal .modal-body label.form-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6d84a3;
    margin-bottom: 4px;
}

/* cards / list groups inside modal bodies become glass panels */
.modal.bit-modal .modal-body .card {
    background: rgba(255, 255, 255, .45);
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 14px;
}
.modal.bit-modal .modal-body .card .card-header {
    background: rgba(255, 255, 255, .35);
    border-bottom: 1px solid rgba(255, 255, 255, .55);
}
.modal.bit-modal .modal-body .list-group-item {
    background: rgba(255, 255, 255, .45);
    border-color: rgba(255, 255, 255, .65);
}
.modal.bit-modal .modal-body .table {
    --bs-table-bg: transparent;
}
.modal.bit-modal .modal-body .table thead th {
    background: rgba(248, 251, 254, .8);
    color: #41597a;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid rgba(255, 255, 255, .6);
}
.modal.bit-modal .modal-body .table tbody td {
    border-bottom: 1px solid rgba(255, 255, 255, .55);
}

/* info strips / alerts get a soft glass tint instead of solid fills */
.modal.bit-modal .modal-body .alert {
    border-radius: 12px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* ===== footer — glass strip, brand-gradient submit ===== */
.modal.bit-modal .modal-footer {
    background: rgba(255, 255, 255, .3) !important;
    border-top: 1px solid rgba(255, 255, 255, .55) !important;
}
/* dismiss / neutral buttons → glass chips (mockup .btn-g)
   (btn-outline-secondary is NOT here — outline variants get the inverted
   filled-at-rest treatment below so they never wash out over the glass) */
.modal.bit-modal .modal-footer .btn-secondary,
.modal.bit-modal .modal-footer .btn-light {
    background: rgba(255, 255, 255, .5) !important;
    border: 1px solid rgba(255, 255, 255, .7) !important;
    color: #41597a !important;
    border-radius: 11px !important;
    font-weight: 600;
    box-shadow: none !important;
}
.modal.bit-modal .modal-footer .btn-secondary:hover,
.modal.bit-modal .modal-footer .btn-light:hover {
    background: rgba(255, 255, 255, .85) !important;
    color: #12233b !important;
}
/* primary submit → the pinned brand gradient (mockup .btn-grad).
   Moved to components/_bit-brand.css: .btn-primary now IS the brand button
   everywhere, so the footer, the rail's Message Log button (.ce-rail-msglog)
   and the signature form's "Region Types" button no longer need to opt in.
   Keeping a scoped copy here is what let the cart's primary buttons — which
   live outside any modal footer — fall through to the org's pale Primary. */
/* danger submit (delete confirms): FLAT solid red — destructive actions get
   no gloss/gradient/shadow so they read as deliberate, not decorative */
.modal.bit-modal .modal-footer .btn-danger {
    background-image: none !important;
    background-color: #dc2626 !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: none !important;
}
.modal.bit-modal .modal-footer .btn-danger:hover,
.modal.bit-modal .modal-footer .btn-danger:focus {
    background-color: #b91c1c !important;
    box-shadow: none !important;
    transform: none;
}
/* success (e.g. Import) — FLAT solid green with white text: the gradient +
   theme-driven text color made it unreadable on some org themes */
.modal.bit-modal .modal-footer .btn-success {
    background: #16a34a !important;
    border: 1px solid rgba(255, 255, 255, .35) !important;
    color: #fff !important;
    border-radius: 11px !important;
    font-weight: 700;
    box-shadow: none !important;
}
.modal.bit-modal .modal-footer .btn-success:hover,
.modal.bit-modal .modal-footer .btn-success:focus {
    background: #15803d !important;
    color: #fff !important;
}
/* danger keeps its gradient but never inherits a dark theme text color */
.modal.bit-modal .modal-footer .btn-danger {
    color: #fff !important;
}

/* ===== outline buttons — INVERTED states =====
   theme_buttons.css renders btn-outline-* transparent with theme-colored
   text at rest and only fills on hover; over the glass card that reads as
   invisible (Cancel Booking / Delete / Quick Actions all vanished). Inside
   modals the states swap: FILLED (pinned glossy gradients, same palette as
   the footer submit buttons) at rest, glass outline chip on hover.
   Specificity (.modal.bit-modal prefix) out-ranks theme_buttons' !important
   rules regardless of load order. */
.modal.bit-modal .btn-outline-primary,
.modal.bit-modal .btn-outline-secondary,
.modal.bit-modal .btn-outline-success,
.modal.bit-modal .btn-outline-danger,
.modal.bit-modal .btn-outline-warning,
.modal.bit-modal .btn-outline-info {
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .35) !important;
    border-radius: 11px !important;
    font-weight: 600;
}
.modal.bit-modal .btn-outline-primary {
    background: linear-gradient(135deg, #2674a6, #112a54) !important;
    box-shadow: 0 6px 16px rgba(38, 116, 166, .35) !important;
}
.modal.bit-modal .btn-outline-secondary {
    background: linear-gradient(135deg, #64748b, #334155) !important;
    box-shadow: 0 6px 16px rgba(71, 85, 105, .35) !important;
}
.modal.bit-modal .btn-outline-success {
    background: linear-gradient(135deg, #22c55e, #15803d) !important;
    box-shadow: 0 6px 16px rgba(22, 163, 74, .35) !important;
}
/* cancel/delete actions: FLAT solid fills — no gradients or drop shadows */
.modal.bit-modal .btn-outline-danger {
    background: #dc2626 !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.modal.bit-modal .btn-outline-warning {
    background: #d97706 !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.modal.bit-modal .btn-outline-info {
    background: linear-gradient(135deg, #06b6d4, #0e7490) !important;
    box-shadow: 0 6px 16px rgba(8, 145, 178, .35) !important;
}
/* hover = the old rest state: glass chip with the variant-colored text
   (background shorthand clears the rest-state gradient) */
.modal.bit-modal .btn-outline-primary:hover {
    background: rgba(255, 255, 255, .75) !important;
    color: #1d5c86 !important;
    border-color: rgba(38, 116, 166, .45) !important;
    box-shadow: 0 2px 6px rgba(17, 42, 84, .12) !important;
}
.modal.bit-modal .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, .75) !important;
    color: #334155 !important;
    border-color: rgba(71, 85, 105, .45) !important;
    box-shadow: 0 2px 6px rgba(17, 42, 84, .12) !important;
}
.modal.bit-modal .btn-outline-success:hover {
    background: rgba(255, 255, 255, .75) !important;
    color: #15803d !important;
    border-color: rgba(22, 163, 74, .45) !important;
    box-shadow: 0 2px 6px rgba(17, 42, 84, .12) !important;
}
/* flat cancel/delete hover: just a darker solid, still shadow-free */
.modal.bit-modal .btn-outline-danger:hover {
    background: #b91c1c !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.modal.bit-modal .btn-outline-warning:hover {
    background: #b45309 !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.modal.bit-modal .btn-outline-info:hover {
    background: rgba(255, 255, 255, .75) !important;
    color: #0e7490 !important;
    border-color: rgba(8, 145, 178, .45) !important;
    box-shadow: 0 2px 6px rgba(17, 42, 84, .12) !important;
}
/* exception: btn-check toggle groups (e.g. the course-session weekday picker)
   must keep a visible checked/unchecked difference — unchecked = glass chip,
   checked = brand gradient */
.modal.bit-modal .btn-check + .btn-outline-primary {
    background: rgba(255, 255, 255, .6) !important;
    color: #1d5c86 !important;
    border-color: rgba(38, 116, 166, .45) !important;
    box-shadow: none !important;
}
.modal.bit-modal .btn-check:checked + .btn-outline-primary {
    background: linear-gradient(135deg, #2674a6, #112a54) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .35) !important;
}