/* =============================================================
   PetVaccineCard · Component Layer
   Fluent 2 component patterns wired to tokens.css.
   Class prefix .pv- (PetVax) so it does not collide with the
   legacy .f-* and .pet classes already in styles.css.
   ============================================================= */

/* ---------- Base ---------- */
.pv {
  font-family: var(--font-family-base);
  font-size: var(--font-size-300);
  line-height: var(--line-height-300);
  color: var(--color-neutral-fg-1);
  background: var(--color-neutral-bg-1);
  letter-spacing: -0.005em;
}
.pv *, .pv *::before, .pv *::after { box-sizing: border-box; }

.pv h1, .pv h2, .pv h3, .pv h4, .pv h5, .pv h6 { margin: 0; font-weight: var(--font-weight-semibold); }
.pv h1 { font-size: var(--font-size-hero-700); line-height: var(--line-height-hero-700); }
.pv h2 { font-size: var(--font-size-600); line-height: var(--line-height-600); }
.pv h3 { font-size: var(--font-size-500); line-height: var(--line-height-500); }
.pv h4 { font-size: var(--font-size-400); line-height: var(--line-height-400); }
.pv p  { margin: 0; }
.pv small { font-size: var(--font-size-200); line-height: var(--line-height-200); color: var(--color-neutral-fg-3); }
.pv a { color: var(--color-brand-fg-link); text-decoration: none; }
.pv a:hover { color: var(--color-brand-fg-link-hover); text-decoration: underline; }

/* ---------- Focus ring (all interactive primitives) ---------- */
.pv-focusable { position: relative; }
.pv-focusable:focus-visible {
  outline: var(--stroke-thick) solid var(--color-stroke-focus-2);
  outline-offset: var(--stroke-thick);
  border-radius: var(--radius-md);
}

/* ---------- Button ---------- */
.pv-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-snudge);
  height: 32px; padding: 0 var(--space-m);
  border-radius: var(--radius-md);
  border: var(--stroke-thin) solid transparent;
  background: transparent;
  font: inherit;
  font-size: var(--font-size-300);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-fg-2);
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background var(--duration-fast) var(--curve-easy-ease),
              border-color var(--duration-fast) var(--curve-easy-ease),
              color var(--duration-fast) var(--curve-easy-ease);
}
.pv-btn:focus-visible {
  outline: var(--stroke-thick) solid var(--color-stroke-focus-2);
  outline-offset: var(--stroke-thick);
}

.pv-btn.is-sm     { height: 24px; padding: 0 var(--space-s); font-size: var(--font-size-200); border-radius: var(--radius-sm); }
.pv-btn.is-md     { height: 32px; padding: 0 var(--space-m); }
.pv-btn.is-lg     { height: 40px; padding: 0 var(--space-l); }

.pv-btn--primary {
  background: var(--color-brand-bg);
  color: var(--color-neutral-fg-on-brand);
  border-color: var(--color-brand-bg);
}
.pv-btn--primary:hover  { background: var(--color-brand-bg-hover); border-color: var(--color-brand-bg-hover); }
.pv-btn--primary:active { background: var(--color-brand-bg-pressed); border-color: var(--color-brand-bg-pressed); }

.pv-btn--secondary {
  background: var(--color-neutral-bg-1);
  color: var(--color-neutral-fg-2);
  border-color: var(--color-neutral-stroke-1);
}
.pv-btn--secondary:hover  { background: var(--color-neutral-bg-1-hover); color: var(--color-neutral-fg-1); }
.pv-btn--secondary:active { background: var(--color-neutral-bg-1-pressed); }

.pv-btn--subtle {
  background: transparent;
  color: var(--color-neutral-fg-2);
}
.pv-btn--subtle:hover  { background: var(--color-neutral-bg-1-hover); color: var(--color-neutral-fg-1); }
.pv-btn--subtle:active { background: var(--color-neutral-bg-1-pressed); }

.pv-btn--outline {
  background: transparent;
  color: var(--color-brand-fg-1);
  border-color: var(--color-brand-stroke-1);
}
.pv-btn--outline:hover  { background: var(--color-brand-bg-2); }

.pv-btn--danger {
  background: var(--color-status-danger-bg-3);
  color: #fff;
  border-color: var(--color-status-danger-bg-3);
}

/* Icon-only button: square footprint, centers a single glyph. Pair with a
   color variant (e.g. .pv-btn--subtle.pv-btn--icon) and keep an aria-label. */
.pv-btn--icon {
  width: 32px; padding: 0;
}
.pv-btn--icon.is-sm { width: 24px; }
.pv-btn--icon.is-lg { width: 40px; }

.pv-btn[disabled] {
  background: var(--color-neutral-bg-disabled) !important;
  color: var(--color-neutral-fg-disabled) !important;
  border-color: var(--color-neutral-stroke-disabled) !important;
  cursor: not-allowed;
}

/* ---------- Input · Select · Textarea ---------- */
.pv-input,
.pv-select,
.pv-textarea {
  display: block; width: 100%;
  height: 32px; padding: 0 var(--space-mnudge);
  background: var(--color-neutral-bg-1);
  color: var(--color-neutral-fg-1);
  border: var(--stroke-thin) solid var(--color-neutral-stroke-1);
  border-bottom-width: var(--stroke-thick);
  border-bottom-color: var(--color-neutral-stroke-accessible);
  border-radius: var(--radius-md);
  font: inherit; font-size: var(--font-size-300);
  outline: none;
  transition: border-color var(--duration-fast) var(--curve-easy-ease);
}
.pv-textarea { height: auto; padding: var(--space-s) var(--space-mnudge); resize: vertical; min-height: 64px; }
.pv-input:hover, .pv-select:hover, .pv-textarea:hover { border-color: var(--color-neutral-stroke-1-hover); }
.pv-input:focus, .pv-select:focus, .pv-textarea:focus {
  border-bottom-color: var(--color-compound-brand-stroke);
}
.pv-input::placeholder { color: var(--color-neutral-fg-4); }
.pv-input[disabled] {
  background: var(--color-neutral-bg-disabled);
  color: var(--color-neutral-fg-disabled);
  border-color: var(--color-neutral-stroke-disabled);
}

/* Validation modifiers */
.pv-input.is-error    { border-bottom-color: var(--color-status-danger-border-1); }
.pv-input.is-success  { border-bottom-color: var(--color-status-success-border-1); }
.pv-input.is-warning  { border-bottom-color: var(--color-status-warning-border-1); }

.pv-label {
  display: block;
  margin-bottom: var(--space-xs);
  font-size: var(--font-size-300);
  font-weight: var(--font-weight-medium);
  color: var(--color-neutral-fg-1);
}
.pv-label .req { color: var(--color-status-danger-fg-1); margin-left: 2px; }
.pv-help  { font-size: var(--font-size-200); color: var(--color-neutral-fg-3); margin-top: var(--space-xs); }

/* ---------- Card ---------- */
.pv-card {
  background: var(--color-neutral-card-bg);
  border: var(--stroke-thin) solid var(--color-neutral-stroke-2);
  border-radius: var(--radius-md);
  padding: var(--space-l);
  box-shadow: var(--shadow-2);
  transition: box-shadow var(--duration-normal) var(--curve-easy-ease),
              border-color var(--duration-fast) var(--curve-easy-ease),
              background var(--duration-fast) var(--curve-easy-ease);
}
.pv-card.is-interactive { cursor: pointer; }
.pv-card.is-interactive:hover { background: var(--color-neutral-card-bg-hover); box-shadow: var(--shadow-4); }
.pv-card.is-interactive:active { background: var(--color-neutral-card-bg-pressed); }
.pv-card.is-selected {
  border-color: var(--color-compound-brand-stroke);
  background: var(--color-neutral-card-bg-selected);
}

.pv-card__header {
  display: flex; align-items: center; gap: var(--space-m);
  padding-bottom: var(--space-m);
  margin-bottom: var(--space-m);
  border-bottom: var(--stroke-thin) solid var(--color-neutral-stroke-2);
}
.pv-card__title    { font-size: var(--font-size-300); font-weight: var(--font-weight-semibold); color: var(--color-neutral-fg-1); }
.pv-card__subtitle { font-size: var(--font-size-200); color: var(--color-neutral-fg-3); }

/* ---------- Badge ---------- */
.pv-badge {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  font-size: var(--font-size-200);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  padding: 2px var(--space-snudge);
  border-radius: var(--radius-circular);
  white-space: nowrap;
  background: var(--color-neutral-bg-5);
  color: var(--color-neutral-fg-1);
}
.pv-badge--brand      { background: var(--color-brand-bg); color: var(--color-neutral-fg-on-brand); }
.pv-badge--brand-tint { background: var(--color-brand-bg-2); color: var(--color-brand-fg-1); }
.pv-badge--success-tint { background: var(--color-status-success-bg-1); color: var(--color-status-success-fg-1); }
.pv-badge--warning-tint { background: var(--color-status-warning-bg-1); color: var(--color-status-warning-fg-1); }
.pv-badge--danger-tint  { background: var(--color-status-danger-bg-1);  color: var(--color-status-danger-fg-1); }
.pv-badge--info-tint    { background: var(--color-status-info-bg-1);    color: var(--color-status-info-fg-1); }
.pv-badge.has-dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; display: inline-block;
}

/* ---------- Avatar ---------- */
.pv-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-circular);
  font-weight: var(--font-weight-semibold);
  overflow: hidden; user-select: none;
  background: var(--color-brand-bg);
  color: var(--color-neutral-fg-on-brand);
}
.pv-avatar.is-24 { width: 24px; height: 24px; font-size: 10px; }
.pv-avatar.is-32 { width: 32px; height: 32px; font-size: 12px; }
.pv-avatar.is-40 { width: 40px; height: 40px; font-size: 14px; }
.pv-avatar.is-48 { width: 48px; height: 48px; font-size: 16px; }

/* ---------- Table ---------- */
.pv-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--font-size-300); }
.pv-table thead th {
  text-align: left;
  font-size: var(--font-size-200);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-fg-2);
  background: var(--color-neutral-bg-2);
  padding: var(--space-s) var(--space-m);
  border-bottom: var(--stroke-thin) solid var(--color-neutral-stroke-2);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pv-table tbody td {
  padding: var(--space-s) var(--space-m);
  border-bottom: var(--stroke-thin) solid var(--color-neutral-stroke-3);
  color: var(--color-neutral-fg-1);
  vertical-align: middle;
}
.pv-table tbody tr:hover td { background: var(--color-neutral-bg-1-hover); }
.pv-table tbody tr.is-selected td { background: var(--color-brand-bg-2); }
.pv-table .mono { font-family: var(--font-family-mono); font-size: 12.5px; }

/* ---------- Toolbar ---------- */
.pv-toolbar {
  display: flex; align-items: center; gap: var(--space-xxs);
  height: 44px; padding: 0 var(--space-s);
  background: var(--color-neutral-bg-1);
  border-bottom: var(--stroke-thin) solid var(--color-neutral-stroke-2);
}
.pv-toolbar__divider {
  width: 1px; height: 24px;
  background: var(--color-neutral-stroke-2);
  margin: 0 var(--space-xs);
}

/* ---------- App Shell ---------- */
.pv-appbar {
  display: flex; align-items: center; justify-content: space-between;
  height: 48px; padding: 0 var(--space-l);
  background: var(--color-brand-bg);
  color: var(--color-neutral-fg-on-brand);
  position: sticky; top: 0; z-index: var(--z-popover);
}
.pv-appbar__brand { display: flex; align-items: center; gap: var(--space-m); font-weight: var(--font-weight-semibold); }

/* Sidebar (uses --shell-sidebar-* tokens supplied by brand file) */
.pv-sidebar {
  background: var(--shell-sidebar-bg, var(--color-neutral-bg-2));
  color: var(--shell-sidebar-fg, var(--color-neutral-fg-2));
  padding: var(--space-s) var(--space-xs);
  display: flex; flex-direction: column; gap: 2px;
  border-right: var(--stroke-thin) solid var(--color-neutral-stroke-2);
}
.pv-sidebar__group {
  font-size: var(--font-size-100);
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--shell-sidebar-fg-muted, var(--color-neutral-fg-3));
  padding: var(--space-m) var(--space-m) var(--space-snudge);
  font-weight: var(--font-weight-semibold);
}
.pv-sidebar__item {
  display: flex; align-items: center; gap: var(--space-m);
  height: 36px; padding: 0 var(--space-m);
  margin: 2px var(--space-xs);
  border-radius: var(--radius-md);
  color: inherit;
  font-size: var(--font-size-300);
  text-decoration: none; cursor: pointer;
  transition: background var(--duration-faster) var(--curve-easy-ease);
  position: relative;
}
.pv-sidebar__item:hover { background: rgba(255,255,255,.06); }
[data-theme="light"] .pv-sidebar:not([data-on-dark]) .pv-sidebar__item:hover { background: var(--color-neutral-bg-1-hover); }
.pv-sidebar__item.is-active {
  background: var(--shell-sidebar-active-bg, var(--color-brand-bg-2));
  color: var(--shell-sidebar-active-fg, var(--color-brand-fg-1));
}
.pv-sidebar__item.is-active::before {
  content: ''; position: absolute; left: 0; top: 25%; height: 50%;
  width: 3px; border-radius: 2px;
  background: var(--color-brand-bg);
}

/* ---------- Message Bar ---------- */
.pv-msgbar {
  display: flex; align-items: flex-start; gap: var(--space-m);
  padding: var(--space-m) var(--space-l);
  border-radius: var(--radius-md);
  border: var(--stroke-thin) solid transparent;
  font-size: var(--font-size-300);
  line-height: var(--line-height-300);
  color: var(--color-neutral-fg-1);
}
.pv-msgbar--info    { background: var(--color-status-info-bg-1);    border-color: var(--color-status-info-border-1); }
.pv-msgbar--success { background: var(--color-status-success-bg-1); border-color: var(--color-status-success-border-1); }
.pv-msgbar--warning { background: var(--color-status-warning-bg-1); border-color: var(--color-status-warning-border-1); }
.pv-msgbar--danger  { background: var(--color-status-danger-bg-1);  border-color: var(--color-status-danger-border-1); }

/* ---------- Divider ---------- */
.pv-divider { height: 1px; background: var(--color-neutral-stroke-2); border: 0; }

/* ---------- Toggle ---------- */
.pv-toggle {
  width: 40px; height: 20px; border-radius: 10px;
  background: var(--color-neutral-bg-5);
  border: var(--stroke-thin) solid var(--color-neutral-stroke-accessible);
  position: relative; cursor: pointer;
  transition: background var(--duration-normal) var(--curve-easy-ease);
}
.pv-toggle.is-checked {
  background: var(--color-brand-bg);
  border-color: var(--color-brand-bg);
}
.pv-toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%; background: #fff;
  transition: transform var(--duration-normal) var(--curve-decelerate-mid);
}
.pv-toggle.is-checked::after { transform: translateX(20px); }