/* ==========================================================================
   MotorEpc Component Library
   Canonical styling for buttons, cards, alerts, tables, and modals.
   Depends on design-tokens.css — load that file first.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Focus states
   Bootstrap's default focus ring is being stripped in several places
   (outline: none) with nothing put back. This restores a visible,
   accessible focus indicator everywhere, using the brand color.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--mep-primary);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Buttons
   Standard Bootstrap classes (btn-primary, btn-secondary, btn-success,
   btn-danger, btn-warning, btn-info, btn-outline-*) already inherit the
   correct palette via the --bs-* variable mapping in design-tokens.css.
   This section adds the few genuinely new, documented variants.
   -------------------------------------------------------------------------- */
.btn {
    border-radius: var(--mep-radius-sm);
    font-weight: 500;
}

/* Icon-only button (e.g. table row actions, close buttons) */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: var(--mep-radius-sm);
}

.btn:disabled,
.btn.disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Legacy button class bridge
   These bespoke classes exist across ~228 views today. Rather than edit
   every view in Phase 1, alias them onto the new tokens so styling is
   consistent immediately. Phase 2 will migrate views to the standard
   Bootstrap classes directly and this block will be deleted.
   -------------------------------------------------------------------------- */
.btn-wo-primary,
.btn-confirm,
.btn-pay {
    background-color: var(--mep-primary);
    border-color: var(--mep-primary);
    color: var(--mep-white);
}

    .btn-wo-primary:hover,
    .btn-confirm:hover,
    .btn-pay:hover {
        background-color: var(--mep-primary-hover);
        border-color: var(--mep-primary-hover);
    }

.btn-wo-ghost,
.btn-back,
.btn-cancel,
.btn-show-all {
    background-color: transparent;
    border: 1px solid var(--mep-border);
    color: var(--mep-gray-700);
}

    .btn-wo-ghost:hover,
    .btn-back:hover,
    .btn-cancel:hover,
    .btn-show-all:hover {
        background-color: var(--mep-gray-50);
    }

.btn-orange {
    background-color: var(--mep-warning);
    border-color: var(--mep-warning);
    color: var(--mep-white);
}

.btn-delete,
.btn-remove-image,
.btn-remove-bulk-image {
    background-color: var(--mep-danger);
    border-color: var(--mep-danger);
    color: var(--mep-white);
}

.btn-print,
.btn-pdf,
.btn-searchset,
.btn-session {
    background-color: var(--mep-white);
    border: 1px solid var(--mep-border);
    color: var(--mep-gray-700);
}

    .btn-print:hover,
    .btn-pdf:hover,
    .btn-searchset:hover,
    .btn-session:hover {
        background-color: var(--mep-gray-50);
    }

/* --------------------------------------------------------------------------
   Cards
   One canonical card recipe plus two approved modifiers.
   -------------------------------------------------------------------------- */
.card {
    border: 1px solid var(--mep-border);
    border-radius: var(--mep-radius-md);
    box-shadow: var(--mep-shadow-sm);
}

.card-header {
    background-color: var(--mep-white);
    border-bottom: 1px solid var(--mep-border);
    padding: var(--mep-space-4) var(--mep-space-5);
}

.card-body {
    padding: var(--mep-space-5);
}

/* Modifier: no padding in body (e.g. card wrapping a table) */
.card-flush .card-body {
    padding: 0;
}

/* Modifier: stronger elevation for highlighted/summary cards */
.card-elevated {
    box-shadow: var(--mep-shadow-md);
    border: none;
}

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */
.alert {
    border-radius: var(--mep-radius-sm);
    border: 1px solid transparent;
    padding: var(--mep-space-3) var(--mep-space-4);
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.table {
    --bs-table-border-color: var(--mep-border);
}

    .table thead th {
        background-color: var(--mep-gray-50);
        color: var(--mep-gray-700);
        font-weight: 600;
        font-size: var(--mep-fs-sm);
        text-transform: uppercase;
        letter-spacing: .03em;
        border-bottom: 2px solid var(--mep-border);
    }

    .table td,
    .table th {
        vertical-align: middle;
        padding: var(--mep-space-3) var(--mep-space-4);
    }

/* Every table should be wrapped in .table-responsive (enforced view-by-view
   in Phase 4) — this is a safety net for any that currently aren't. */
.table-responsive {
    border-radius: var(--mep-radius-md);
}

/* --------------------------------------------------------------------------
   Modals
   -------------------------------------------------------------------------- */
.modal-content {
    border: none;
    border-radius: var(--mep-radius-lg);
    box-shadow: var(--mep-shadow-lg);
}

.modal-header {
    border-bottom: 1px solid var(--mep-border);
    padding: var(--mep-space-4) var(--mep-space-5);
}

.modal-body {
    padding: var(--mep-space-5);
}

.modal-footer {
    border-top: 1px solid var(--mep-border);
    padding: var(--mep-space-4) var(--mep-space-5);
}