@import url('https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap');

body {
  font-family: 'Nunito', sans-serif;
}

.object-fit-cover {
  object-fit: cover;
}

.object-fit-contain {
  object-fit: contain;
}

.pc-header .pcm-logo img {
  max-width: 160px;
  max-height: 65px;
}

/* Phone header wordmark, used instead of the logo image on the mobile bar. */
.pc-mob-header .pcm-logo {
  display: flex;
  align-items: center;
}

.pcm-wordmark {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .01em;
  white-space: nowrap;
  text-decoration: none;
  color: #fff;
}

.pcm-wordmark:hover,
.pcm-wordmark:focus {
  color: #fff;
  text-decoration: none;
}

.pcm-wordmark__mark {
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--bs-primary);
}

@media (max-width: 400px) {
  .pcm-wordmark {
    font-size: 17px;
  }
}

.border-dashed {
  border: 1px dashed #dfdfdf;
}

.border-dashed .card-body {
  margin: 5px;
  border: 1px dashed #dfdfdf;
}

.border-dashed .card-header {
  margin: 5px;
  border: 1px dashed #dfdfdf;
}

.border-dashed .card-footer {
  margin: 5px;
  border: 1px dashed #dfdfdf;
}

.border-dashed:has(.card-header) .card-body {
  margin-top: 0px;
  border-top: 0px dashed #dfdfdf;
}

.border-dashed:has(.card-body) .card-header {
  margin-bottom: 0px;
  border-bottom: 1px solid #f2f4f9;
}

.border-dashed:has(.card-footer) .card-body {
  margin-bottom: 0px;
  border-bottom: 0px dashed #dfdfdf;
}

.border-dashed:has(.card-body) .card-footer {
  margin-top: 0px;
  border-top: 1px solid #f2f4f9;
}

.swal-sm{
  width: 24em;
}

/* Product Page Dashboard */
.product-img-div{
  background-position: center center;
  background-size: cover;
}
.product-img-div img{
  object-fit: contain;
  backdrop-filter: blur(20px);
  height: 220px;
}

.btn-sm {
  border-radius: .3rem !important;
}

/* ---------------------------------------------------------------
   Stat tiles. The old solid-brand tiles rendered dark text (the
   --text-primary token flips to #000 on a light brand) and their
   icons came from the two-tone COLR font, which ignores CSS colour
   and so sat near-invisible on the fill. White surface + a coloured
   accent per group fixes both.
----------------------------------------------------------------- */
.stat-grid > [class*="col-"] { display: flex; }

.stat-tile {
  --tile-accent: var(--bs-primary);
  --tile-accent-rgb: var(--bs-primary-rgb);
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 13px 40px 13px 15px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, .07);
  box-shadow: 0 14px 30px -26px rgba(17, 24, 39, .5), 0 1px 2px -1px rgba(17, 24, 39, .06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.stat-tile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  bottom: 13px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--tile-accent);
}
.stat-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--tile-accent-rgb), .35);
  box-shadow: 0 18px 34px -24px rgba(var(--tile-accent-rgb), .75), 0 2px 4px -2px rgba(17, 24, 39, .08);
}

.stat-tile__icon {
  position: absolute;
  top: 12px;
  right: 12px;
  color: var(--tile-accent);
  opacity: .85;
}
.stat-tile__icon .material-symbols-outlined {
  font-size: 19px;
  font-variation-settings: 'wght' 500;
}

.stat-tile__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #6b7280;
  margin-bottom: 5px;
}
.stat-tile__value {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #111827;
  font-variant-numeric: tabular-nums;
}
.stat-tile__note {
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(var(--tile-accent-rgb), .95);
}

/* Accent per group, so a row of numbers is scannable at a glance. */
.stat-tile--team    { --tile-accent: #6366f1; --tile-accent-rgb: 99, 102, 241; }
.stat-tile--active  { --tile-accent: #0891b2; --tile-accent-rgb: 8, 145, 178; }
.stat-tile--bv      { --tile-accent: #7c3aed; --tile-accent-rgb: 124, 58, 237; }
.stat-tile--current { --tile-accent: #d97706; --tile-accent-rgb: 217, 119, 6; }

@media (max-width: 575.98px) {
  .stat-tile { padding: 12px 32px 12px 12px; }
  .stat-tile__value { font-size: 17px; }
  .stat-tile__icon .material-symbols-outlined { font-size: 17px; }
}

/* ---------- Status pills (replaces the old emoji status markers) ---------- */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 8px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.7;
  text-transform: capitalize;
  white-space: nowrap;
  border: 1px solid transparent;
}
.status-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: currentColor;
}
.status-pill--ok   { color: #0f7a2a; background: #e6f7ea; border-color: #bfe9c9; }
.status-pill--warn { color: #9a6700; background: #fff6e0; border-color: #f3dfa8; }
.status-pill--bad  { color: #b42318; background: #fdeceb; border-color: #f6ccc8; }
.status-pill--info { color: #175cd3; background: #eaf1fd; border-color: #c5d9f8; }
.status-pill--idle { color: #52616b; background: #eef1f3; border-color: #dbe1e5; }

@media print {
  .status-pill { border-color: #ccc; background: transparent; }
}

/* ---------- Brand typeface (Poppins) across every panel ---------- */
@font-face { font-family: 'Poppins'; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/poppins/Poppins-400.woff2") format("woff2"); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/poppins/Poppins-500.woff2") format("woff2"); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../fonts/poppins/Poppins-600.woff2") format("woff2"); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/poppins/Poppins-700.woff2") format("woff2"); }

/* style.css is a vendor theme file, so the family is swapped through the same
   variable it already uses rather than by editing the theme. Everything that
   inherits from body follows; icon fonts set their own family and are untouched. */
:root { --bs-font-sans-serif: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; }
body { font-family: var(--bs-font-sans-serif); }
h1, h2, h3, h4, h5, h6, .btn, .form-control, .form-select, .badge, .nav-link, .card-header {
  font-family: var(--bs-font-sans-serif);
}

/* Icon fonts must survive the family swap above. An element that carries both an
   icon class and a themed class (.badge, .btn …) would otherwise inherit Poppins
   and render the ligature name as plain text — "visibility" instead of the eye. */
.material-symbols-outlined { font-family: 'Material Symbols Outlined' !important; }
.material-icons-two-tone,
.material-icons { font-family: 'Material Icons Two Tone' !important; }
[class^="feather"], [class*=" feather"] { font-family: 'feather' !important; }
.fa, .fas, .far, .fal, [class^="fa-"], [class*=" fa-"] { font-family: 'Font Awesome 5 Free' !important; }
.fab { font-family: 'Font Awesome 5 Brands' !important; }