/* ============================================================================
 * TopTan Wholesale — shared components (Phase 2)
 * Buttons · form controls · badges · alerts · cards · tabs · pagination.
 * Reference: designs/Design System.dc.html, DESIGN-SYSTEM.md.
 * Loads after toptan-shell.css. Maps design recipes onto the existing Bootstrap
 * + theme classes — no renamed hooks, no markup changes. Colours via tokens only.
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 1. Buttons — radius 6, weight 600, 14px. (b2b.css already defines .b2b-btn-*;
 *    here we align Bootstrap .btn-* used in forms/modals + add the design set.)
 * Primary brand/white -> deep · Secondary white/border-strong -> brand ·
 * Tertiary tint/brand · Ghost text/brand · Danger #B3382D.
 * ------------------------------------------------------------------------- */
.btn { border-radius: var(--r-control); font-weight: 600; font-family: var(--font-text); }
.btn-primary,
.btn-primary:focus {
    background-color: var(--fbl-brand);
    border-color: var(--fbl-brand);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--fbl-brand-deep) !important;
    border-color: var(--fbl-brand-deep) !important;
    color: #fff;
}
.btn-outline-primary,
.btn-secondary.btn-outline {
    background-color: var(--fbl-surface);
    border: 1px solid var(--fbl-border-strong);
    color: var(--fbl-ink);
}
.btn-outline-primary:hover {
    background-color: var(--fbl-surface);
    border-color: var(--fbl-brand);
    color: var(--fbl-brand);
}
.btn-danger { background-color: var(--fbl-danger); border-color: var(--fbl-danger); color: #fff; }
.btn-danger:hover { background-color: color-mix(in srgb, var(--fbl-danger) 84%, #000); border-color: color-mix(in srgb, var(--fbl-danger) 84%, #000); }
.btn:disabled,
.btn.disabled { background-color: #EDF0EF; border-color: #EDF0EF; color: #9AA5A1; cursor: not-allowed; }

/* Design button utility classes (reusable in new markup) */
.tt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: var(--r-control); padding: 11px 22px; font-size: 14px; font-weight: 600; font-family: var(--font-text); line-height: 1; cursor: pointer; border: 1px solid transparent; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.tt-btn-primary { background: var(--fbl-brand); color: #fff; border-color: var(--fbl-brand); }
.tt-btn-primary:hover { background: var(--fbl-brand-deep); border-color: var(--fbl-brand-deep); color: #fff; }
.tt-btn-secondary { background: var(--fbl-surface); color: var(--fbl-ink); border-color: var(--fbl-border-strong); }
.tt-btn-secondary:hover { border-color: var(--fbl-brand); color: var(--fbl-brand); }
.tt-btn-tertiary { background: var(--fbl-brand-tint); color: var(--fbl-brand); }
.tt-btn-tertiary:hover { background: var(--fbl-brand-tint-2); color: var(--fbl-brand-deep); }
.tt-btn-ghost { background: none; color: var(--fbl-brand); padding-inline: 8px; }
.tt-btn-ghost:hover { color: var(--fbl-brand-deep); }
.tt-btn-danger { background: var(--fbl-danger); color: #fff; border-color: var(--fbl-danger); }
.tt-btn-sm { padding: 8px 16px; font-size: 13px; }
.tt-btn-lg { padding: 14px 28px; font-size: 15px; min-height: 44px; }

/* ---------------------------------------------------------------------------
 * 2. Form controls — 1px border-strong, radius 6, focus brand + 2px tint ring.
 * ------------------------------------------------------------------------- */
.form-control,
.form-select,
textarea.form-control,
select.form-control {
    border: 1px solid var(--fbl-border-strong);
    border-radius: var(--r-control);
    padding: 10px 12px;
    font-size: 14px;
    font-family: var(--font-text);
    color: var(--fbl-ink);
    background-color: var(--fbl-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder { color: var(--fbl-ink-3); }
.form-control:focus,
.form-select:focus {
    border-color: var(--fbl-brand);
    outline: 2px solid var(--fbl-brand-tint-2);
    outline-offset: 0;
    box-shadow: none;
}
.form-control.is-invalid,
.form-control.error,
.is-invalid .form-control {
    border-color: var(--fbl-danger);
    background-color: var(--fbl-danger-bg);
}
.invalid-feedback,
.form-error,
.text-danger.error-message { color: var(--fbl-danger); font-size: 12px; }
label { color: var(--fbl-ink); }
/* checkbox / radio */
input[type="checkbox"],
input[type="radio"],
.form-check-input { accent-color: var(--fbl-brand); width: 17px; height: 17px; }
.form-check-input:checked { background-color: var(--fbl-brand); border-color: var(--fbl-brand); }
.form-check-input:focus { border-color: var(--fbl-brand); box-shadow: 0 0 0 2px var(--fbl-brand-tint-2); }

/* ---------------------------------------------------------------------------
 * 3. Badges — radius 4, 11.5px/600. (b2b.css owns .b2b-badge*; this aligns the
 *    Bootstrap .badge + adds design semantic badge utilities.)
 * ------------------------------------------------------------------------- */
.badge { border-radius: var(--r-badge); font-size: 11.5px; font-weight: 600; padding: 4px 9px; }
.tt-badge { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--r-badge); padding: 4px 9px; font-size: 11.5px; font-weight: 600; }
.tt-badge-verified { background: var(--fbl-brand); color: #fff; }
.tt-badge-member { background: var(--fbl-brand-tint); color: var(--fbl-brand); }
.tt-badge-neutral { background: color-mix(in srgb, var(--fbl-bg) 60%, #fff); color: var(--fbl-ink-2); border: 1px solid var(--fbl-border); font-weight: 500; padding: 3px 9px; }
.tt-badge-rating { background: var(--fbl-amber-bg); color: var(--fbl-amber); }
.tt-badge-instock { background: var(--fbl-success-bg); color: var(--fbl-success); }
.tt-badge-lowstock { background: var(--fbl-danger-bg); color: var(--fbl-danger); }

/* ---------------------------------------------------------------------------
 * 4. Alerts — tinted bg + 1px matching border, radius 8, 13.5px.
 * ------------------------------------------------------------------------- */
.alert { border-radius: 8px; font-size: 13.5px; border: 1px solid transparent; padding: 12px 16px; }
.alert-success { background: var(--fbl-success-bg); border-color: var(--fbl-success-border); color: color-mix(in srgb, var(--fbl-success) 80%, #000); }
.alert-danger,
.alert-error { background: var(--fbl-danger-bg); border-color: var(--fbl-danger-border); color: color-mix(in srgb, var(--fbl-danger) 82%, #000); }
.alert-warning { background: var(--fbl-amber-bg); border-color: var(--fbl-amber-border); color: color-mix(in srgb, var(--fbl-amber) 84%, #000); }
.alert-info { background: var(--fbl-brand-tint); border-color: color-mix(in srgb, var(--fbl-brand) 30%, #fff); color: var(--fbl-brand-deep); }

/* ---------------------------------------------------------------------------
 * 5. Cards — surface, 1px border, radius 10, no resting shadow, hover lift.
 * ------------------------------------------------------------------------- */
.card {
    background: var(--fbl-surface);
    border: 1px solid var(--fbl-border);
    border-radius: var(--r-card);
    box-shadow: none;
}
.tt-card { background: var(--fbl-surface); border: 1px solid var(--fbl-border); border-radius: var(--r-card); transition: box-shadow .15s ease; }
.tt-card:hover { box-shadow: var(--shadow-hover); }

/* ---------------------------------------------------------------------------
 * 6. Tabs — 14px, active = brand text + 2px bottom border; inactive ink-2.
 *    Bootstrap .nav-tabs and the theme's own tab markup.
 * ------------------------------------------------------------------------- */
.nav-tabs { border-bottom: 1px solid var(--fbl-border); }
.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--fbl-ink-2);
    background: transparent;
}
.nav-tabs .nav-link:hover { color: var(--fbl-ink); border-color: transparent; }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--fbl-brand);
    font-weight: 600;
    background: transparent;
    border-bottom: 2px solid var(--fbl-brand);
}

/* ---------------------------------------------------------------------------
 * 7. Pagination — 34px squares, 1px border, brand-filled current.
 * ------------------------------------------------------------------------- */
.pagination { gap: 6px; }
.pagination .page-link,
.pagination .page-item .page-link {
    min-width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--fbl-border);
    border-radius: var(--r-control);
    color: var(--fbl-ink);
    font-size: 13px;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.pagination .page-link:hover { border-color: var(--fbl-brand); color: var(--fbl-brand); background: var(--fbl-surface); }
.pagination .page-item.active .page-link {
    background: var(--fbl-brand);
    border-color: var(--fbl-brand);
    color: #fff;
    font-weight: 600;
}
.pagination .page-item.disabled .page-link { color: var(--fbl-ink-3); border-color: var(--fbl-border); background: var(--fbl-surface); }

/* ---------------------------------------------------------------------------
 * 8. Data / SKU / price cells — mono face per DESIGN-SYSTEM.md.
 * ------------------------------------------------------------------------- */
.tt-mono,
.b2b-price-mono,
td.numeric,
.table .text-mono { font-family: var(--font-mono); }

/* ---------------------------------------------------------------------------
 * 9. Button standardization (2026-07-23) — every storefront button renders one
 *    style: brand background + light text. Overrides the legacy _buttons.scss
 *    variants (compiled into style.css), the raw Bootstrap semantics that were
 *    never brand-aligned, and the .tt-btn-* / .b2b-btn-* secondary families.
 *    This file loads last, so these win the cascade. Colours via tokens only.
 *    Disabled buttons intentionally stay muted (not brand). Social buttons
 *    (.btn-facebook/.btn-google) are unified too — see note if platform-brand
 *    colours are preferred there.
 * ------------------------------------------------------------------------- */
.btn-secondary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger,
.btn-outline,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger,
.btn-heading,
button.btn-heading[type="submit"],
.btn.btn-secondary,
.btn.btn-facebook,
.btn.btn-google,
.btn.btn-brush,
.tt-btn-secondary,
.tt-btn-tertiary,
.tt-btn-ghost,
.tt-btn-danger,
.b2b-btn-outline,
.b2b-btn-accent,
.b2b-btn-ghost,
.fbl-btn-danger,
.fbl-btn-danger-outline,
.fbl-btn-outline {
    background-color: var(--fbl-brand) !important;
    background-image: none !important;
    border-color: var(--fbl-brand) !important;
    color: #fff !important;
}
/* .fbl-btn-white and .fbl-btn-ghost-light are inverse CTAs that sit ON the
 * brand/dark hero sections — a brand-on-brand fill would make them invisible,
 * so they intentionally keep their light treatment. */
.btn-secondary:hover,
.btn-success:hover,
.btn-info:hover,
.btn-warning:hover,
.btn-danger:hover,
.btn-outline:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-danger:hover,
.btn-heading:hover,
.btn.btn-secondary:hover,
.btn.btn-facebook:hover,
.btn.btn-google:hover,
.btn.btn-brush:hover,
.tt-btn-secondary:hover,
.tt-btn-tertiary:hover,
.tt-btn-ghost:hover,
.tt-btn-danger:hover,
.b2b-btn-outline:hover,
.b2b-btn-accent:hover,
.b2b-btn-ghost:hover,
.fbl-btn-danger:hover,
.fbl-btn-danger-outline:hover,
.fbl-btn-outline:hover {
    background-color: var(--fbl-brand-deep) !important;
    border-color: var(--fbl-brand-deep) !important;
    color: #fff !important;
}
/* Keep disabled buttons visibly disabled (must beat the brand rules above). */
.btn:disabled,
.btn.disabled {
    background-color: #EDF0EF !important;
    border-color: #EDF0EF !important;
    color: #9AA5A1 !important;
}