/* ============================================================================================
   Shared confirmation dialog — presentation
   ============================================================================================

   Pairs with assets/shared/js/custom/confirm-dialog.js, which builds the dialog once and reuses it for
   every opener that declares data-confirm-modal. Both shells load this file, so a confirmation looks the
   same whether it is raised from the dashboard or from a customer-facing Website page.

   Only the chrome lives here. Bootstrap owns the modal mechanics — backdrop, focus trap, Escape — and
   the dashboard's own safety rules in dashboard-components.css (max height, body scroll, control min
   size) still apply on that shell and compose with these.

   Every custom property is written with a literal fallback because the Website's design tokens are
   declared in home-static-port.css and are not present on the dashboard shell.
*/

.dashboard-confirm-modal .modal-content {
    border: 1px solid var(--border, #E2E8F0);
    border-radius: var(--r-lg, 16px);
    box-shadow: 0 24px 60px -18px rgba(15, 23, 42, 0.32), 0 6px 16px rgba(15, 23, 42, 0.06);
}

.dashboard-confirm-modal .modal-header {
    align-items: flex-start;
    padding: 1.15rem 1.35rem 0.85rem;
    border-block-end: 0;
}

.dashboard-confirm-modal .modal-title {
    color: var(--text, #0F172A);
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.dashboard-confirm-modal .modal-body {
    padding: 0 1.35rem 0.4rem;
    color: var(--text-dim, #475569);
    font-size: 0.93rem;
    line-height: 1.55;
    text-wrap: pretty;
}

.dashboard-confirm-modal .modal-footer {
    gap: 0.5rem;
    padding: 1rem 1.35rem 1.2rem;
    border-block-start: 0;
}

/* Bootstrap adds horizontal margins to every footer child, which fights the flex gap above and leaves
   uneven space once a visually-hidden status element is in the row. */
.dashboard-confirm-modal .modal-footer > * {
    margin: 0;
}

.dashboard-confirm-modal .modal-footer .btn {
    padding-inline: 1.05rem;
    border-radius: var(--r-sm, 8px);
    font-size: 0.9rem;
    font-weight: 600;
}

/* The dismiss button is the safe action and receives initial focus, so it must not look disabled or
   secondary to the point of being overlooked. */
.dashboard-confirm-modal .modal-footer .btn-light {
    border: 1px solid var(--border-strong, #CBD5E1);
    background: #FFFFFF;
    color: var(--text, #0F172A);
}

.dashboard-confirm-modal .modal-footer .btn-light:hover {
    background: var(--bg-soft, #F1F5F9);
}

.dashboard-confirm-modal .alert {
    border-radius: var(--r-sm, 8px);
    font-size: 0.87rem;
}

/* Arabic reads from the right; the dialog's text blocks follow the writing direction rather than
   staying pinned left. */
[dir="rtl"] .dashboard-confirm-modal .modal-header,
[dir="rtl"] .dashboard-confirm-modal .modal-body {
    text-align: start;
}

/* ---------------------------------------------------------------------------- action variants
 *
 * The Website loads Bootstrap before its own site.css so the public pages keep their `.btn`. The
 * side effect is that site.css's `.btn` — same specificity, later in the cascade — also wins over
 * Bootstrap's `.btn-danger` / `.btn-warning` / `.btn-success`, so a destructive confirmation rendered
 * with a friendly blue primary button no matter which variant the opener asked for.
 *
 * Restated here so severity is visible as well as named. The button text still carries the meaning on its
 * own — colour is the reinforcement, not the message.
 *
 * Scoped to `.website-shell` deliberately. This file also loads on the dashboard, where Bootstrap's own
 * variants are already unopposed and already correct; restating them globally would have restyled the
 * confirm button on every existing dashboard consumer of this dialog for no reason. The dialog element is
 * appended to document.body, so on the Website that ancestor class is present and on the dashboard it is
 * not.
 */

.website-shell .dashboard-confirm-modal .modal-footer .btn-danger {
    border-color: #B42318;
    background: #D92D20;
    color: #FFFFFF;
}

.website-shell .dashboard-confirm-modal .modal-footer .btn-danger:hover,
.website-shell .dashboard-confirm-modal .modal-footer .btn-danger:focus-visible {
    border-color: #912018;
    background: #B42318;
    color: #FFFFFF;
}

.website-shell .dashboard-confirm-modal .modal-footer .btn-warning {
    border-color: #B54708;
    background: #F79009;
    color: #1F2A37;
}

.website-shell .dashboard-confirm-modal .modal-footer .btn-warning:hover,
.website-shell .dashboard-confirm-modal .modal-footer .btn-warning:focus-visible {
    border-color: #93370D;
    background: #DC6803;
    color: #FFFFFF;
}

.website-shell .dashboard-confirm-modal .modal-footer .btn-success {
    border-color: #027A48;
    background: #039855;
    color: #FFFFFF;
}

.website-shell .dashboard-confirm-modal .modal-footer .btn-success:hover,
.website-shell .dashboard-confirm-modal .modal-footer .btn-success:focus-visible {
    border-color: #05603A;
    background: #027A48;
    color: #FFFFFF;
}