/* ==========================================================================
   BookingMoko — SHARED COMPONENTS  v3.0
   Buttons, cards, badges, forms, alerts, tables, modal, empty state.
   Needs: design-tokens.css + global.css
   Rule: pages never restyle these; they only add layout around them.
   ========================================================================== */

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 44px; padding: .65rem 1.25rem;
    border: 1px solid transparent; border-radius: var(--bm-r-sm);
    font-weight: 600; font-size: var(--bm-text-sm); line-height: 1.2; text-decoration: none;
    cursor: pointer; white-space: nowrap;
    transition: background var(--bm-fast), color var(--bm-fast), border-color var(--bm-fast), transform var(--bm-fast), box-shadow var(--bm-fast);
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
.btn-primary   { background: var(--bm-primary); color: var(--bm-on-primary); }
.btn-primary:hover { background: var(--bm-primary-hover); }
.btn-accent    { background: var(--bm-accent); color: var(--bm-on-accent); }
.btn-accent:hover { background: var(--bm-accent-hover); }
.btn-secondary { background: var(--bm-surface); color: var(--bm-ink); border-color: var(--bm-line-strong); }
.btn-secondary:hover { background: var(--bm-surface-2); }
.btn-ghost     { background: transparent; color: var(--bm-ink-2); }
.btn-ghost:hover { background: var(--bm-surface-2); color: var(--bm-ink); }
.btn-light     { background: #fff; color: #2e1f5e; }
.btn-light:hover { background: #f1ecff; }
.btn-danger    { background: var(--bm-danger); color: #fff; }
.btn-sm { min-height: 36px; padding: .4rem .9rem; }
.btn-lg { min-height: 52px; padding: .85rem 1.6rem; font-size: var(--bm-text-base); }
.btn-block { width: 100%; }

.text-link { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--bm-primary); text-decoration: none; }
.text-link:hover { text-decoration: underline; }

/* ---------- Cards ---------- */
.card {
    background: var(--bm-surface); border: 1px solid var(--bm-line);
    border-radius: var(--bm-r-md); padding: var(--bm-space-5); box-shadow: var(--bm-shadow-sm);
}
.card-flat   { box-shadow: none; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--bm-space-3); margin-bottom: var(--bm-space-4); }
.card-title  { margin: 0; font-size: var(--bm-text-lg); }

/* ---------- Badges / status chips ---------- */
.badge {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .2rem .65rem; border-radius: var(--bm-r-pill);
    font-size: var(--bm-text-xs); font-weight: 600; line-height: 1.5;
    background: var(--bm-surface-2); color: var(--bm-ink-2);
}
.badge-success { background: var(--bm-success-soft); color: var(--bm-success); }
.badge-warning { background: var(--bm-warning-soft); color: var(--bm-warning); }
.badge-danger  { background: var(--bm-danger-soft);  color: var(--bm-danger); }
.badge-info    { background: var(--bm-info-soft);    color: var(--bm-info); }
.badge-accent  { background: var(--bm-accent-soft);  color: var(--bm-accent); }
.badge-dot::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }

/* Service colour chips (match calendar blocks) */
.chip-hair    { background: var(--bm-svc-hair);    color: var(--bm-svc-hair-ink); }
.chip-barber  { background: var(--bm-svc-barber);  color: var(--bm-svc-barber-ink); }
.chip-nails   { background: var(--bm-svc-nails);   color: var(--bm-svc-nails-ink); }
.chip-vehicle { background: var(--bm-svc-vehicle); color: var(--bm-svc-vehicle-ink); }
.chip-moving  { background: var(--bm-svc-moving);  color: var(--bm-svc-moving-ink); }

/* ---------- Forms ---------- */
.form-group { display: grid; gap: .4rem; margin-bottom: var(--bm-space-4); }
.form-group label, .form-label { font-size: var(--bm-text-sm); font-weight: 600; color: var(--bm-ink); }
.form-control, .form-group input, .form-group select, .form-group textarea {
    width: 100%; min-height: 46px; padding: .7rem .9rem;
    background: var(--bm-surface); color: var(--bm-ink);
    border: 1px solid var(--bm-line-strong); border-radius: var(--bm-r-sm);
    transition: border-color var(--bm-fast), box-shadow var(--bm-fast);
}
.form-group textarea { min-height: 120px; resize: vertical; }
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--bm-ink-3); }
.form-group input:hover, .form-group select:hover, .form-group textarea:hover { border-color: var(--bm-ink-3); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--bm-accent); box-shadow: 0 0 0 3px var(--bm-accent-soft); }
.form-group .is-invalid, .form-control.is-invalid { border-color: var(--bm-danger); }
.form-hint  { font-size: var(--bm-text-xs); color: var(--bm-ink-3); }
.form-error { font-size: var(--bm-text-xs); color: var(--bm-danger); }
.form-note  { font-size: var(--bm-text-sm); color: var(--bm-ink-3); }
.form-row   { display: grid; gap: var(--bm-space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ---------- Alerts / toasts ---------- */
.alert { padding: .9rem 1.1rem; border-radius: var(--bm-r-sm); border: 1px solid transparent; font-size: var(--bm-text-sm); }
.alert-success { background: var(--bm-success-soft); color: var(--bm-success); }
.alert-warning { background: var(--bm-warning-soft); color: var(--bm-warning); }
.alert-danger  { background: var(--bm-danger-soft);  color: var(--bm-danger); }
.alert-info    { background: var(--bm-info-soft);    color: var(--bm-info); }

/* ---------- Tables (scroll inside wrapper on mobile) ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--bm-line); border-radius: var(--bm-r-md); background: var(--bm-surface); }
.table { width: 100%; border-collapse: collapse; font-size: var(--bm-text-sm); }
.table th { text-align: left; padding: .8rem 1rem; background: var(--bm-surface-2); color: var(--bm-ink-2); font-weight: 600; white-space: nowrap; }
.table td { padding: .85rem 1rem; border-top: 1px solid var(--bm-line); vertical-align: middle; }
.table tbody tr:hover { background: var(--bm-surface-2); }

/* ---------- Avatar, empty state, modal ---------- */
.avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bm-primary-soft); color: var(--bm-primary); font-weight: 700; font-size: var(--bm-text-sm); }
.empty-state { text-align: center; padding: var(--bm-space-7) var(--bm-space-5); color: var(--bm-ink-2); }
.empty-state h3 { margin-bottom: var(--bm-space-2); }

.modal-backdrop { position: fixed; inset: 0; z-index: var(--bm-z-modal); display: grid; place-items: center; padding: var(--bm-space-4); background: var(--bm-overlay); }
.modal { width: min(560px, 100%); max-height: 90dvh; overflow: auto; background: var(--bm-surface); border-radius: var(--bm-r-lg); padding: var(--bm-space-6); box-shadow: var(--bm-shadow-lg); }

/* ---------- Page headings inside the app ---------- */
.page-header { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--bm-space-4); margin-bottom: var(--bm-space-6); }
.page-header h1 { font-size: var(--bm-text-2xl); margin: 0; }

/* ---------- Navy scope: put class "on-navy" on any dark panel (header, hero, CTA, footer).
   Everything inside (buttons, cards, forms, text) re-colours itself automatically. ---------- */
.on-navy {
    --bm-ink: #f3f6ff;  --bm-ink-2: #c5d0e8;  --bm-ink-3: #97a7c9;
    --bm-paper: var(--bm-navy-900);
    --bm-surface: rgba(255, 255, 255, .06);  --bm-surface-2: rgba(255, 255, 255, .11);
    --bm-line: rgba(255, 255, 255, .14);     --bm-line-strong: rgba(255, 255, 255, .3);
    --bm-primary: #ffffff;  --bm-primary-hover: #e6edfb;  --bm-on-primary: #0a1a33;
    --bm-primary-soft: rgba(255, 255, 255, .12);
    --bm-accent: #e8b958;   --bm-accent-hover: #f2cb78;   --bm-accent-soft: rgba(232, 185, 88, .16);
    color: var(--bm-ink);
    background: var(--bm-navy-900);
}