/*
 * Modus Customer Commerce UI — Bootstrap/Huraga generic overrides
 *
 * Rationale: dozens of module client templates (login, signup, orders, invoices,
 * tickets, KB, services) render plain Bootstrap classes (.btn-primary, .card,
 * .badge, .alert, .breadcrumb, .list-group, .accordion) and are, per the build
 * brief, not to be edited "merely to change presentation." Reskinning those
 * native classes here — instead of duplicating every module template into
 * html_custom just to rename classes — gives every page the same design
 * language with far less duplicated Twig logic to maintain, and matches the
 * brief's own instruction to "extend and override Bootstrap rather than
 * replacing it wholesale."
 *
 * Structural, page-specific work (domain search, pricing cards, comparison
 * tables, cart/checkout layout) still needs real markup and lives in
 * mc-commerce.css / mc-portal.css plus targeted html_custom template copies.
 */

/* ---- Buttons ---- */
.btn {
    min-height: 44px;
    padding-inline: var(--mc-space-5);
    border-radius: var(--mc-radius-sm);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mc-space-2);
}

.btn-sm {
    min-height: 36px;
    padding-inline: var(--mc-space-3);
}

.btn-primary {
    box-shadow: 0 6px 16px rgba(43, 79, 245, 0.20);
}

.btn-outline-primary {
    border-color: var(--mc-border-strong);
    color: var(--mc-text-primary);
}

/* Huraga uses .btn-dark for most secondary actions (e.g. dashboard card
   headers: "All Invoices", "All Orders" next to a primary "New Order").
   Keep it visibly quieter than .btn-primary per the one-dominant-action rule. */
.btn-dark {
    background: var(--mc-surface-subtle);
    border-color: var(--mc-border-subtle);
    color: var(--mc-text-primary);
    box-shadow: none;
}

.btn-dark:hover,
.btn-dark:focus-visible {
    background: var(--mc-color-primary-50);
    border-color: var(--mc-color-primary-200);
    color: var(--mc-color-primary-700);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
    border-color: var(--mc-color-primary-600);
    color: var(--mc-color-primary-600);
    background: var(--mc-color-primary-50);
}

/* One dominant action per cluster: de-emphasise a lone outline button
   sitting next to a primary button inside the same row/card. */
.row > .col > .btn-outline-primary,
.d-flex > .btn-outline-primary {
    box-shadow: none;
}

/* ---- Cards ---- */
.card {
    border-color: var(--mc-border-subtle);
    border-radius: var(--mc-radius-md);
    box-shadow: var(--mc-shadow-xs);
}

.card:hover {
    box-shadow: var(--mc-shadow-sm);
}

.card-title {
    font-family: var(--mc-font-display);
    font-weight: 700;
}

/* Auth cards (login / signup / password reset) */
.page-login .card,
.page-signup .card,
.page-password-reset .card {
    border-radius: var(--mc-radius-lg);
    box-shadow: var(--mc-shadow-md);
    max-width: 480px;
    margin-inline: auto;
}

.page-login .card-body > .row,
.page-signup .card-body > .row,
.page-password-reset .card-body > .row {
    align-items: stretch;
    row-gap: var(--mc-space-3);
}

.page-login .card-body > .row > .col,
.page-signup .card-body > .row > .col,
.page-password-reset .card-body > .row > .col {
    display: flex;
    min-width: 0;
}

.page-login .card-body > .row > .col .btn,
.page-signup .card-body > .row > .col .btn,
.page-password-reset .card-body > .row > .col .btn {
    width: 100%;
    height: 100%;
    min-height: 64px;
    padding-block: var(--mc-space-3);
    line-height: 1.25;
    white-space: normal;
    text-align: center;
}

/* ---- Badges ----
   mf.status_badge() in macro_functions.html.twig already drives colour from
   status, not hard-coded text (bg-success/bg-warning/bg-danger/bg-secondary/
   bg-primary) — just remapping those Bootstrap colours onto the mc- semantic
   tokens here, no macro changes needed. */
.badge {
    border-radius: var(--mc-radius-pill);
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: var(--mc-space-1) var(--mc-space-3);
}

.badge.bg-success { background-color: var(--mc-color-success) !important; }
.badge.bg-warning { background-color: var(--mc-color-warning) !important; color: var(--mc-color-white) !important; }
.badge.bg-danger { background-color: var(--mc-color-danger) !important; }
.badge.bg-info { background-color: var(--mc-color-info) !important; }
.badge.bg-secondary { background-color: var(--mc-color-ink-500) !important; }

/* ---- Alerts ---- */
.alert {
    border-radius: var(--mc-radius-md);
}

/* ---- Breadcrumb ---- */
.breadcrumb {
    background: transparent;
    padding: 0;
}

/* ---- Sidebar / mobile menu list groups ---- */
.list-group-item-action {
    border-radius: var(--mc-radius-sm);
}

.list-group-item-action.active {
    background: var(--mc-color-primary-50);
    color: var(--mc-color-primary-700);
    border-color: transparent;
}

/* ---- Tables ---- */
.table-card-table,
.card-table {
    --bs-table-border-color: var(--mc-border-subtle);
}

.table thead th {
    font-size: var(--mc-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mc-text-muted);
    font-weight: 700;
}

/* ---- Pagination ---- */
.page-link {
    border-radius: var(--mc-radius-sm);
    color: var(--mc-text-primary);
}

.page-item.active .page-link {
    background: var(--mc-color-primary-600);
    border-color: var(--mc-color-primary-600);
}