/* ── Global page-hero + card polish system ─────────────────────────
   Used via <x-page-hero icon=".." title=".." subtitle=".."> (+ optional
   <x-slot:chips>). Classes mirror the site-inspections / finance-report
   pattern so all pages share one visual language. */

.supplier-panel-hero {
    background: linear-gradient(135deg, rgba(14,116,144,.14), rgba(34,211,238,.08));
    border: 1px solid rgba(148,163,184,.18);
    border-radius: 20px;
    padding: 20px 24px;
    box-shadow: 0 18px 35px rgba(15,23,42,.08);
}
.supplier-panel-hero .hero-icon {
    width: 54px; height: 54px; border-radius: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(14,116,144,.18); color: #0e7490; font-size: 1.6rem;
    flex: none;
}
.supplier-panel-hero .hero-title { font-weight: 700; color: #0f172a; }
.supplier-panel-hero .hero-subtitle { color: #475569; }
.supplier-panel-chip {
    background: #fff; border: 1px solid rgba(226,232,240,.8);
    padding: 8px 12px; border-radius: 999px;
    font-size: .78rem; color: #475569;
    display: inline-flex; align-items: center; gap: 6px;
}
a.supplier-panel-chip, button.supplier-panel-chip { font: inherit; font-size: .78rem; text-decoration: none; cursor: pointer; }
.supplier-panel-chip--btn { transition: all .15s ease; }
.supplier-panel-chip--btn:hover {
    border-color: #bfd6fb; color: #0065da;
    transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,101,218,.18);
}

/* Icon card headers */
.fr-head { display: flex; align-items: center; gap: 10px; }
.fr-head-ico {
    width: 36px; height: 36px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.15rem; flex: none;
}
.fr-total {
    font-size: .75rem; font-weight: 700;
    background: #f1f5f9; color: #0f172a;
    padding: 4px 11px; border-radius: 999px; white-space: nowrap;
}

/* Stat cards: hover lift */
.fr-stat { overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.fr-stat:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(16,24,40,.13); }
.fr-stat:hover .avatar-initial, .fr-stat:hover .fr-stat-icon { transform: scale(1.08) rotate(-4deg); }
.fr-stat .avatar-initial, .fr-stat .fr-stat-icon { transition: transform .15s ease; }

/* Trend pills */
.fr-trend { display: inline-flex; align-items: center; gap: 3px; font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.fr-trend--up { background: rgba(25,135,84,.12); color: #198754; }
.fr-trend--down { background: rgba(220,53,69,.12); color: #dc3545; }

/* Ranked rows + avatars */
.fr-rank {
    width: 24px; height: 24px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 800;
    background: #f1f5f9; color: #475569; flex: none;
}
tbody tr:nth-child(-n+3) .fr-rank { background: linear-gradient(135deg,#fef9c3,#fde68a); color: #92400e; }
.fr-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .68rem; font-weight: 800; color: #fff;
    background: linear-gradient(135deg,#667eea,#764ba2); flex: none;
}

/* Share bars */
.fr-sharebar { height: 5px; border-radius: 99px; background: #eef2f7; margin-top: 5px; overflow: hidden; min-width: 70px; }
.fr-sharebar > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg,#0d6efd,#20c997); }

/* Equal-height small buttons (anchors vs <button> render 1px off) */
.btn-group-sm > .btn, .btn-sm { min-height: 32px; }
a.btn-sm, button.btn-sm { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }

/* Pills */
.aging-pill { transition: transform .15s ease, box-shadow .15s ease; }
.aging-pill:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(16,24,40,.12); }