/* ============================================================
   LocalBiz Component / Utility Layer  —  built on tokens.css
   Use these classes in new code instead of inline styles.
   Purely additive: nothing existing changes.
   ============================================================ */

/* ── Buttons ───────────────────────────────────────────── */
.btn-brand {
    background: var(--c-primary); color: #fff; border: none;
    border-radius: var(--radius); padding: 10px 18px;
    font-weight: var(--fw-semibold); font-size: var(--fs-sm);
    display: inline-flex; align-items: center; gap: 7px;
    cursor: pointer; text-decoration: none; transition: background .15s;
}
.btn-brand:hover { background: var(--c-primary-hover); color: #fff; }

.btn-brand-outline {
    background: var(--c-surface); color: var(--c-primary);
    border: 1.5px solid var(--c-primary);
    border-radius: var(--radius); padding: 9px 17px;
    font-weight: var(--fw-semibold); font-size: var(--fs-sm);
    display: inline-flex; align-items: center; gap: 7px;
    cursor: pointer; text-decoration: none; transition: .15s;
}
.btn-brand-outline:hover { background: var(--c-primary-light); color: var(--c-primary); }

/* ── Surface card ──────────────────────────────────────── */
.card-surface {
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}

/* ── Chips / pills ─────────────────────────────────────── */
.chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: var(--fs-xs); font-weight: var(--fw-semibold);
    padding: 3px 10px; border-radius: var(--radius-pill); line-height: 1.4;
}
.chip-info    { background: var(--c-info-light);    color: var(--c-info); }
.chip-success { background: var(--c-success-light); color: #166534; }
.chip-warning { background: var(--c-warning-light); color: #92400e; }
.chip-danger  { background: var(--c-danger-light);  color: var(--c-danger); }
.chip-neutral { background: var(--c-surface-alt);   color: var(--c-text-muted); border: 1px solid var(--c-border); }

/* ── Text helpers (note: avoids clashing with Bootstrap .text-muted) ── */
.text-muted-2 { color: var(--c-text-muted) !important; }
.text-faint   { color: var(--c-text-faint) !important; }

/* ── Empty state ───────────────────────────────────────── */
.empty-state { text-align: center; padding: var(--space-6) var(--space-4); color: var(--c-text-muted); }
.empty-state .empty-icon  { font-size: 2.4rem; opacity: .3; display: block; margin-bottom: var(--space-3); }
.empty-state .empty-title { font-weight: var(--fw-semibold); color: var(--c-text); margin-bottom: var(--space-1); }
.empty-state .empty-sub   { font-size: var(--fs-sm); margin-bottom: var(--space-4); }

/* ── Skeleton loaders ──────────────────────────────────── */
@keyframes lb-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.lb-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 800px 100%;
    animation: lb-shimmer 1.4s infinite linear;
    border-radius: var(--radius);
}
.lb-skeleton-card {
    border-radius: var(--radius-lg); overflow: hidden;
    background: var(--c-surface); box-shadow: var(--shadow-sm);
}
.lb-skeleton-img   { height: 140px; }
.lb-skeleton-line  { height: 14px; margin: 8px 12px 0; }
.lb-skeleton-line.short { width: 60%; }
.lb-skeleton-line.xshort { width: 40%; }
.lb-skeleton-btn   { height: 30px; margin: 10px 12px 12px; border-radius: var(--radius); }

/* ── Bootstrap "primary" → orange brand (global override) ──
   Recolors every .btn-primary / .text-primary / link app-wide. */
:root {
    --bs-primary: #ea580c;
    --bs-primary-rgb: 234, 88, 12;
    --bs-link-color: #ea580c;
    --bs-link-color-rgb: 234, 88, 12;
    --bs-link-hover-color: #c2410c;
}
.btn-primary {
    --bs-btn-bg: var(--c-primary);
    --bs-btn-border-color: var(--c-primary);
    --bs-btn-hover-bg: var(--c-primary-hover);
    --bs-btn-hover-border-color: var(--c-primary-hover);
    --bs-btn-active-bg: var(--c-primary-hover);
    --bs-btn-active-border-color: var(--c-primary-dark);
    --bs-btn-disabled-bg: var(--c-primary);
    --bs-btn-disabled-border-color: var(--c-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--c-primary);
    --bs-btn-border-color: var(--c-primary);
    --bs-btn-hover-bg: var(--c-primary);
    --bs-btn-hover-border-color: var(--c-primary);
    --bs-btn-active-bg: var(--c-primary);
    --bs-btn-active-border-color: var(--c-primary);
}
.text-primary { color: var(--c-primary) !important; }
.bg-primary   { background-color: var(--c-primary) !important; }

/* Pagination — active/link colors to orange brand */
.pagination {
    --bs-pagination-color: var(--c-primary);
    --bs-pagination-hover-color: var(--c-primary-hover);
    --bs-pagination-focus-color: var(--c-primary-hover);
    --bs-pagination-active-bg: var(--c-primary);
    --bs-pagination-active-border-color: var(--c-primary);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(234, 88, 12, .25);
}