/* PawTrack Design System - global entry point.
   Consumers link this one file. Import order matters:
   fonts → tokens → base elements & primitive classes. */
@import url("./tokens/fonts.css");
@import url("./tokens/colors.css");
@import url("./tokens/typography.css");
@import url("./tokens/spacing.css");
@import url("./base.css");

/* Dedicated tag workspaces shared by parent and professional shells. */
.tag-page__head .p-back { margin-bottom: 12px; }
.tag-workspace { min-width: 0; overflow: hidden; }
.tag-workspace__intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.tag-workspace__intro > div { min-width: 0; }
.tag-workspace__intro h2 { margin: 4px 0 5px; font-size: var(--text-xl); }
.tag-workspace__intro p { margin: 0; color: var(--pt-ink-soft); }
.tag-workspace__eyebrow { color: var(--pt-muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tag-workspace__section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--pt-border); }

.tag-species-lock { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 8px 11px; border: 1px solid rgba(203,80,58,.25); border-radius: var(--radius-pill); background: var(--pt-warm-soft); color: var(--petparent-deep); font-size: 13px; font-weight: 700; }
.tag-species-lock--open { border-color: rgba(21,128,140,.25); background: var(--pt-cool-soft); color: var(--petprofessional-deep); }
.tag-species-lock :is(i, svg) { width: 15px; height: 15px; }

.tag-pet-switcher { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.tag-pet-switcher__item { display: inline-flex; align-items: center; gap: 9px; min-width: 150px; padding: 9px 12px; border: 1px solid var(--pt-border); border-radius: var(--radius-lg); background: var(--pt-surface); color: var(--pt-ink); text-decoration: none; }
.tag-pet-switcher__item:hover { border-color: var(--pt-border-strong); background: var(--pt-bg-soft); }
.tag-pet-switcher__item.is-current { border-color: rgba(203,80,58,.4); background: var(--pt-warm-soft); box-shadow: inset 0 0 0 1px rgba(203,80,58,.08); }
.tag-pet-switcher__icon { display: grid; width: 34px; height: 34px; flex: none; place-items: center; border-radius: 12px; background: var(--pt-warm-soft); color: var(--petparent-deep); }
.tag-pet-switcher__icon :is(i, svg) { width: 18px; height: 18px; }
.tag-pet-switcher__item span:last-child { display: grid; min-width: 0; }
.tag-pet-switcher__item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-pet-switcher__item small { color: var(--pt-muted); font-size: 12px; }

.tag-category-nav { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
.tag-category-tab { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 46px; padding: 8px 28px 8px 10px; border: 1px solid var(--tag-border); border-radius: 14px; background: var(--pt-surface); color: var(--pt-ink-soft); font-size: 13px; font-weight: 700; text-decoration: none; }
.tag-category-tab :is(i, svg) { width: 16px; height: 16px; flex: none; color: var(--tag-color); }
.tag-category-tab:hover { background: var(--tag-soft); color: var(--tag-color); }
.tag-category-tab.is-current { background: var(--tag-soft); color: var(--tag-color); box-shadow: inset 0 0 0 1px var(--tag-border); }
.tag-category-count { position: absolute; top: 5px; right: 5px; display: inline-grid; min-width: 20px; height: 20px; padding: 0 5px; place-items: center; border-radius: var(--radius-pill); background: var(--tag-color); color: #fff; font-size: 11px; font-weight: 800; line-height: 1; }

.tag-filter-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; margin: 20px 0; }
.tag-filter-bar--professional { grid-template-columns: minmax(170px, .65fr) minmax(0, 1.35fr) auto; }
.tag-filter-bar .pt-button { min-height: 48px; }
.tag-search-field { position: relative; }
.tag-search-field > :is(i, svg) { position: absolute; top: 50%; left: 13px; z-index: 1; width: 18px; height: 18px; color: var(--pt-muted); transform: translateY(-50%); pointer-events: none; }
.tag-search-field .pt-input { padding-left: 40px; }

.tag-catalogue__group { min-width: 0; margin: 0; padding: 0; border: 0; }
.tag-catalogue__group legend { color: var(--pt-ink); font-weight: 800; }
.tag-catalogue__group legend span { display: inline-grid; min-width: 24px; height: 24px; margin-left: 5px; padding: 0 6px; place-items: center; border-radius: var(--radius-pill); background: var(--pt-pending-soft); color: var(--pt-muted); font-size: 12px; }
.tag-selected-panel { margin-bottom: 22px; padding: 16px; border: 1px solid var(--pt-border); border-radius: var(--radius-lg); background: var(--pt-bg-soft); }
.tag-selected-panel .pt-help { margin: 1px 0 11px; }
.tag-results-panel > legend { margin-bottom: 11px; font-size: var(--text-lg); }
.tag-catalogue__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-catalogue__results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }

.tag-badge { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; padding: 8px 11px; border: 1px solid var(--tag-border); border-radius: var(--radius-pill); background: var(--tag-soft); color: var(--pt-ink); cursor: pointer; }
.tag-badge:hover { box-shadow: 0 2px 8px rgba(22,50,58,.08); }
.tag-badge input { width: 17px; height: 17px; flex: none; margin: 0; accent-color: var(--tag-color); }
.tag-badge > :is(i, svg) { width: 16px; height: 16px; flex: none; color: var(--tag-color); }
.tag-badge > span { display: grid; min-width: 0; line-height: 1.15; }
.tag-badge strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.tag-badge small { margin-top: 2px; color: var(--tag-color); font-size: 11px; font-weight: 700; }
.tag-badge--clear { --tag-color: var(--pt-muted); --tag-border: var(--pt-border); --tag-soft: var(--pt-surface); }

.tag-choice { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 10px; align-items: center; min-width: 0; min-height: 66px; padding: 10px 12px; border: 1px solid var(--tag-border); border-radius: 18px; background: var(--pt-surface); cursor: pointer; }
.tag-choice:hover { background: var(--tag-soft); box-shadow: 0 3px 12px rgba(22,50,58,.07); }
.tag-choice:has(input:checked) { background: var(--tag-soft); box-shadow: inset 0 0 0 1px var(--tag-border); }
.tag-choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--tag-color); }
.tag-choice__icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 12px; background: var(--tag-soft); color: var(--tag-color); }
.tag-choice__icon :is(i, svg) { width: 18px; height: 18px; }
.tag-choice__copy { display: grid; min-width: 0; color: var(--pt-ink); }
.tag-choice__copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-choice__copy small { display: -webkit-box; overflow: hidden; margin-top: 2px; color: var(--pt-muted); font-size: 12px; font-weight: 400; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.tag-choice__age-match, .tag-choice__age-warning { align-items: center; gap: 5px; margin-top: 6px; font-size: 11px; font-weight: 800; line-height: 1.25; }
.tag-choice__age-match { display: inline-flex; color: var(--pt-success); }
.tag-choice__age-warning { display: none; color: var(--pt-danger); }
.tag-choice:has(input:checked) .tag-choice__age-warning { display: inline-flex; }
.tag-choice__age-match :is(i, svg), .tag-choice__age-warning :is(i, svg) { width: 14px; height: 14px; flex: none; }
.tag-age-alert { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 18px; }
.tag-age-alert :is(i, svg) { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.tag-catalogue__actions { display: flex; justify-content: flex-end; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--pt-border); }

.tag-empty-state { display: grid; justify-items: center; gap: 5px; padding: 34px 18px; border: 1px dashed var(--pt-border-strong); border-radius: var(--radius-lg); color: var(--pt-muted); text-align: center; }
.tag-empty-state :is(i, svg) { width: 24px; height: 24px; margin-bottom: 3px; }
.tag-empty-state strong { color: var(--pt-ink); }

.tag-profile-summary { display: flex; flex-wrap: wrap; gap: 7px; }
.tag-profile-badge { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 9px; border: 1px solid var(--tag-border); border-radius: var(--radius-pill); background: var(--tag-soft); color: var(--tag-color); font-size: 12px; font-weight: 700; }
.tag-profile-badge :is(i, svg) { width: 14px; height: 14px; }
.tag-profile-badge--more { --tag-color: var(--pt-muted); --tag-border: var(--pt-border); --tag-soft: var(--pt-bg-soft); }
.tag-profile-manage { width: 100%; justify-content: center; margin-top: 14px; }

.tag-tone--age { --tag-color: #6b5795; --tag-border: #cfc3e4; --tag-soft: #f5f1fb; }
.tag-tone--health { --tag-color: #a13f54; --tag-border: #e3b9c2; --tag-soft: #fff1f4; }
.tag-tone--behaviour { --tag-color: #886019; --tag-border: #e2ca92; --tag-soft: #fff7e2; }
.tag-tone--training { --tag-color: #326d9d; --tag-border: #b5d1e7; --tag-soft: #eef7ff; }
.tag-tone--environment { --tag-color: #34745e; --tag-border: #b4d6c8; --tag-soft: #eef8f3; }
.tag-tone--special-care { --tag-color: #9a562f; --tag-border: #e2c1ad; --tag-soft: #fff3ea; }

@media (max-width: 640px) {
  .tag-workspace__intro { display: grid; gap: 12px; }
  .tag-species-lock { width: fit-content; }
  .tag-pet-switcher { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tag-pet-switcher__item { min-width: 0; }
  .tag-category-nav { display: flex; margin-right: -20px; padding-right: 20px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
  .tag-category-tab { flex: 0 0 auto; min-width: 112px; }
  .tag-filter-bar, .tag-filter-bar--professional { grid-template-columns: 1fr; }
  .tag-filter-bar .pt-button { width: 100%; justify-content: center; }
  .tag-catalogue__results { grid-template-columns: 1fr; }
  .tag-catalogue__actions .pt-button { width: 100%; justify-content: center; }
  .tag-selected-panel { padding: 14px; }
}