/*
 * Corners here follow the appearance dial like everything else. This file styles Bootstrap names
 * that live markup still uses — every modal in the Portal among them — so a person who asked for
 * square corners and got them everywhere except their dialogs would reasonably call that broken.
 */
/*
 * Provider-neutral bridge for Portal markup that predates Blazorise modals.
 * Bootstrap 5 is no longer loaded; these rules preserve the remaining legacy dialog contract
 * while Blazorise components and page layouts render through the Tailwind provider.
 */

.modal {
    position: fixed;
    inset: 0;
    z-index: 3200;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}

.modal.show {
    display: block;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: .5rem;
    pointer-events: none;
}

.modal-dialog-centered {
    display: flex;
    min-height: calc(100% - 1rem);
    align-items: center;
}

.modal-content {
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    pointer-events: auto;
    background-clip: padding-box;
    outline: 0;
}

.modal-header,
.modal-footer {
    display: flex;
    flex-shrink: 0;
    align-items: center;
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
}

.btn-close {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: calc(999px * var(--zen-radius-scale, 1));
    background: transparent;
    color: currentColor;
    font: inherit;
    cursor: pointer;
}

.btn-close::before {
    content: "×";
    font-size: 1.65rem;
    font-weight: 400;
    line-height: 1;
}

body.modal-open {
    overflow: hidden;
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 32rem;
        margin: 1.75rem auto;
    }

    .modal-dialog-centered {
        min-height: calc(100% - 3.5rem);
    }

    .modal-dialog.modal-lg {
        max-width: 50rem;
    }

    .modal-dialog.modal-xl {
        max-width: 72rem;
    }
}

/* Everything below stands in for Bootstrap classes still present in Portal markup, and it sits
   in a cascade layer on purpose: an unlayered rule beats a layered one whatever the source order,
   so any real Portal rule wins against the stand-in.

   Without the layer this shim loaded last and outranked the Portal. .btn set display:inline-block
   over .workspace-gate__action's inline-flex centering, which is why the arrow inside each
   workspace card sat off-centre in a circle it no longer filled. A compatibility shim should be
   the lowest voice in the room, not the loudest. */
@layer bootstrap-compat {
    /* ─────────────────────────────────────────────────────────────────────────────
       Bootstrap class equivalents.

       Flowbite ships a Tailwind v4 base, so the utilities whose names Bootstrap and
       Tailwind happen to share (me-2, ms-2, mt-3, mb-3, sr-only) already resolve.
       These do not exist in Tailwind under any name, and 252 uses of them remain in
       Portal markup across 37 files. Rewriting that markup is a migration; matching
       what it used to look like is what keeps the pages readable in the meantime.

       Values are Bootstrap 5.3's own, expressed through Zenvee tokens where one
       exists, so the pages render as they did rather than approximately.
       ───────────────────────────────────────────────────────────────────────────── */

    /* Bootstrap defined this and the Portal reads it in ~40 rules for code, keys and
       timestamps. Undefined it silently falls through to each rule's fallback, so the
       monospace face drifted per rule. */
    :root {
        --bs-font-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
        --bs-danger: #dc3545;
        --bs-danger-rgb: 220, 53, 69;
        --bs-modal-zindex: 3200;
    }

    /* ── Buttons ── */
    .btn {
        display: inline-block;
        padding: .375rem .75rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        text-align: center;
        text-decoration: none;
        vertical-align: middle;
        cursor: pointer;
        user-select: none;
        border: 1px solid transparent;
        border-radius: calc(.375rem * var(--zen-radius-scale, 1));
        background-color: transparent;
        color: var(--zen-text, #212529);
        transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
    }
    .btn:disabled, .btn.disabled { opacity: .65; pointer-events: none; }
    
    

    .btn-primary {
        background-color: var(--zen-accent, #0d6efd);
        border-color: var(--zen-accent, #0d6efd);
        color: var(--zen-text-on-accent, #fff);
    }
    .btn-primary:hover { filter: brightness(.93); }

    
    

    
    

    .btn-outline-primary {
        border-color: var(--zen-accent, #0d6efd);
        color: var(--zen-accent, #0d6efd);
    }
    .btn-outline-primary:hover {
        background-color: var(--zen-accent, #0d6efd);
        color: var(--zen-text-on-accent, #fff);
    }

    .btn-link {
        padding: 0;
        border: 0;
        text-decoration: underline;
        color: var(--zen-accent, #0d6efd);
        background: none;
    }
    .btn-link:hover { text-decoration: none; }

    /* ── Form controls ── */
    .form-control, .form-select {
        display: block;
        width: 100%;
        padding: .375rem .75rem;
        font-size: 1rem;
        line-height: 1.5;
        color: var(--zen-text, #212529);
        background-color: var(--zen-surface-page, #fff);
        border: 1px solid var(--zen-border-subtle, #dee2e6);
        border-radius: calc(.375rem * var(--zen-radius-scale, 1));
    }
    .form-control:focus, .form-select:focus {
        outline: 0;
        border-color: var(--zen-accent, #86b7fe);
        box-shadow: 0 0 0 .25rem var(--zen-surface-accent-soft, rgba(13, 110, 253, .25));
    }
    .form-control::placeholder { color: var(--zen-text-muted, #6c757d); opacity: 1; }
    .form-control:disabled { background-color: var(--zen-surface-subtle, #e9ecef); opacity: 1; }
    .form-label { margin-bottom: .5rem; }
    

    .form-check { display: block; min-height: 1.5rem; padding-left: 1.5em; margin-bottom: .125rem; }
    .form-check-input {
        float: left;
        margin-left: -1.5em;
        width: 1em;
        height: 1em;
        margin-top: .25em;
        vertical-align: top;
        border: 1px solid rgba(0, 0, 0, .25);
        appearance: none;
        background-color: var(--zen-surface-page, #fff);
    }
    .form-check-input[type="checkbox"] { border-radius: calc(.25em * var(--zen-radius-scale, 1)); }
    .form-check-input[type="radio"] { border-radius: 50%; }
    .form-check-input:checked {
        background-color: var(--zen-accent, #0d6efd);
        border-color: var(--zen-accent, #0d6efd);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    /* ── Badges ── */
    .badge {
        display: inline-block;
        padding: .35em .65em;
        font-size: .75em;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: calc(.375rem * var(--zen-radius-scale, 1));
        color: var(--zen-text-on-accent, #fff);
        background-color: var(--zen-accent, #6c757d);
    }

    /* ── Alerts ── */
    .alert {
        position: relative;
        padding: 1rem;
        margin-bottom: 1rem;
        border: 1px solid transparent;
        border-radius: calc(.375rem * var(--zen-radius-scale, 1));
    }
    
    
    
    .alert-danger { color: #58151c; background-color: #f8d7da; border-color: #f1aeb5; }
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    .small { font-size: .875em; }

    

    /* ── Fade, used by the hand-rolled modals ── */
    .fade { transition: opacity .15s linear; }
    .fade:not(.show) { opacity: 0; }

    /* ── The six Bootstrap classes the shim above did not already cover ──
       Measured, not guessed: of the 48 Bootstrap-defined classes still present in Portal markup,
       these were the only ones left undefined after the provider swap. */
    .modal-lg { --bs-modal-width: 800px; }
    .modal-xl { --bs-modal-width: 1140px; }
    .modal-dialog-scrollable { height: calc(100% - 1rem); }
    .modal-dialog-scrollable > .modal-content { max-height: 100%; overflow: hidden; }
    .modal-dialog-scrollable .modal-body { overflow-y: auto; }
    .card-img-top { width: 100%; border-top-left-radius: inherit; border-top-right-radius: inherit; }

    @media (min-width: 992px) { .modal-lg, .modal-xl { max-width: 800px; margin: 1.75rem auto; } }
    @media (min-width: 1200px) { .modal-xl { max-width: 1140px; } }

    /* ── Tailwind utilities Flowbite's build did not happen to emit ──
       Flowbite ships only the utilities its own components use, so a class the Portal writes by hand
       resolves to nothing even though it is valid Tailwind. Values are Tailwind v4's. */
    .bg-slate-50 { background-color: #f8fafc; }
    .bg-slate-200 { background-color: #e2e8f0; }
    .border-slate-200 { border-color: #e2e8f0; }
    .text-slate-700 { color: #334155; }
    .text-slate-900 { color: #0f172a; }
    .bg-amber-100 { background-color: #fef3c7; }
    .text-amber-800 { color: #92400e; }
    
    .mt-auto { margin-top: auto; }
}

/* The toggle is laid out as a row; keep it one whatever the provider adds inside. */
.zs-user-toggle {
    align-items: center !important;
    min-height: 0;
}

/* Unlayered, so it lands on top of the @layer above: the accent treatment for the three pages that
   still hand-write Bootstrap's button names. The Portal's own button is .admin-action-button and
   carries this from components.css; these selectors exist only until those pages move across, at
   which point this file goes with them. */
.btn-primary {
    background: transparent;
    border: 1px solid var(--zen-accent);
    color: var(--zen-accent-ink);
    box-shadow: none;
}

.btn-primary:hover:not(:disabled):not(.disabled),
.btn-primary:focus-visible,
.btn-primary:active {
    background: var(--zen-surface-accent-soft);
    border-color: var(--zen-accent);
    color: var(--zen-accent-ink-strong);
    box-shadow: none;
}

.btn-primary:focus-visible {
    outline: 2px solid var(--zen-accent);
    outline-offset: 2px;
}

.btn-primary:disabled,
.btn-primary.disabled {
    background: transparent;
    border-color: var(--zen-border-subtle);
    color: var(--zen-text-soft);
    box-shadow: none;
}


.workspace-gate__card .btn-primary {
    background: transparent;
    border: 1px solid var(--workspace-accent);
    color: var(--workspace-accent-ink);
    box-shadow: none;
}

.workspace-gate__card .btn-primary:hover,
.workspace-gate__card .btn-primary:focus-visible {
    background: var(--workspace-accent-soft);
    border-color: var(--workspace-accent-ink);
    color: var(--workspace-accent-ink);
}