/* ============================================================
   Palmer's Home Care — Tag & Button Components
   palmers-tags.css
   Matches the site's design tokens (gold #ECC50E, charcoal
   #262626, navy #0b1b3b, red #f43334, Open Sans / DM Serif).
   ============================================================ */

/* ── Design Tokens ─────────────────────────────────────────────────────── */
:root {
  --phc-gold:        #ECC50E;
  --phc-gold-dark:   #BE9F0C;
  --phc-gold-light:  #fef9e0;
  --phc-gold-border: #f0d555;
  --phc-charcoal:    #262626;
  --phc-navy:        #0b1b3b;
  --phc-red:         #f43334;
  --phc-red-dark:    #d42b2c;
  --phc-body-text:   #555555;
  --phc-muted:       #a4a4a4;
  --phc-border:      #dddddd;
  --phc-light-bg:    #f2f2f2;
  --phc-transition:  all 0.3s ease-out;
  --phc-pill:        20px;   /* pill tags & chips */
  --phc-tag:         4px;    /* square-corner tags & action btns */
  --phc-btn:         28px;   /* large upload button */
}

/* ══════════════════════════════════════════════════════════════════════════
   TAG ROW
   Wrap in: <div class="tag-row">…</div>

   Variants:  .tag--gold   .tag--outline   .tag--red
              .tag--navy   .tag--ghost
   Shape mod: add .tag--square for 4px radius instead of pill
   ══════════════════════════════════════════════════════════════════════════ */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 22px;
  border-radius: var(--phc-pill);
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: var(--phc-transition);
  cursor: pointer;
  text-decoration: none;
}

a.tag {text-decoration: none; color: inherit;}
.tag--square { border-radius: var(--phc-tag); }

.tag--gold    { background: var(--phc-gold);     color: var(--phc-charcoal); border: 1px solid var(--phc-gold);     }
.tag--gold:hover { background: var(--phc-gold-dark); border-color: var(--phc-gold-dark); }

.tag--outline { background: transparent;          color: var(--phc-charcoal); border: 1.5px solid var(--phc-charcoal); }
.tag--outline:hover { background: var(--phc-charcoal); color: #fff; }

.tag--red     { background: var(--phc-red);       color: #fff;                border: 1px solid var(--phc-red);     }
.tag--red:hover { background: var(--phc-red-dark); border-color: var(--phc-red-dark); }

.tag--navy    { background: var(--phc-navy);      color: #fff;                border: 1px solid var(--phc-navy);    }
.tag--navy:hover { background: #0e2450; border-color: #0e2450; }

.tag--ghost   { background: var(--phc-light-bg);  color: var(--phc-body-text); border: 1px solid var(--phc-border); }
.tag--ghost:hover { background: var(--phc-border); }


/* ══════════════════════════════════════════════════════════════════════════
   DISMISSIBLE CHIP  (file attachment / selected PDF)
   Usage: <span class="chip"> filename.pdf
            <button class="chip-remove"
              onclick="this.closest('.chip').remove()">×</button>
          </span>
   ══════════════════════════════════════════════════════════════════════════ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 7px 5px 10px;
  border-radius: var(--phc-pill);
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  background: var(--phc-gold-light);
  color: var(--phc-charcoal);
  border: 1.5px solid var(--phc-gold-border);
  white-space: nowrap;
}

.chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--phc-gold);
  color: var(--phc-charcoal);
  font-size: 14px;
  line-height: 1;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: var(--phc-transition);
  font-weight: 700;
  flex-shrink: 0;
}
.chip-remove:hover { background: var(--phc-red); color: #fff; }


/* ══════════════════════════════════════════════════════════════════════════
   UPLOAD BUTTON  (pill, large)
   Variants: .btn--primary  .btn--outline  .btn--red
   Size mod: add .btn--sm for smaller
   ══════════════════════════════════════════════════════════════════════════ */
.phc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--phc-btn);
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--phc-transition);
  border: 1.5px solid transparent;
  white-space: nowrap;
  line-height: 1;
  text-decoration: none;
}

.phc-btn--sm { font-size: 12px; padding: 7px 16px; }

.phc-btn--primary {
  background: var(--phc-gold);
  color: var(--phc-charcoal);
  border-color: var(--phc-gold);
}
.phc-btn--primary:hover {
  background: var(--phc-charcoal);
  color: #fff;
  border-color: var(--phc-charcoal);
}

.phc-btn--outline {
  background: transparent;
  color: var(--phc-charcoal);
  border-color: var(--phc-charcoal);
}
.phc-btn--outline:hover {
  background: var(--phc-charcoal);
  color: #fff;
}

.phc-btn--red {
  background: var(--phc-red);
  color: #fff;
  border-color: var(--phc-red);
}
.phc-btn--red:hover {
  background: var(--phc-red-dark);
  border-color: var(--phc-red-dark);
}


/* ══════════════════════════════════════════════════════════════════════════
   ACTION BUTTONS  (small, square-corner, for sidebar rows)
   Wrap in: <div class="action-row">…</div>
   Variants: --filled  --ghost  --dark  --subtle
   ══════════════════════════════════════════════════════════════════════════ */
.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: var(--phc-tag);
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--phc-transition);
  border: 1.5px solid transparent;
  white-space: nowrap;
  letter-spacing: 0.1px;
  line-height: 1;
  text-decoration: none;
}

.action-btn--filled  { background: var(--phc-gold);     color: var(--phc-charcoal); border-color: var(--phc-gold);     }
.action-btn--filled:hover  { background: var(--phc-gold-dark); border-color: var(--phc-gold-dark); }

.action-btn--dark    { background: var(--phc-charcoal); color: #fff;                border-color: var(--phc-charcoal); }
.action-btn--dark:hover    { background: #3a3a3a; border-color: #3a3a3a; }

.action-btn--ghost   { background: transparent;          color: var(--phc-charcoal); border-color: var(--phc-charcoal); }
.action-btn--ghost:hover   { background: var(--phc-charcoal); color: #fff; }

.action-btn--subtle  { background: var(--phc-light-bg);  color: var(--phc-body-text); border-color: var(--phc-border); }
.action-btn--subtle:hover  { background: var(--phc-border); color: var(--phc-charcoal); }


/* ══════════════════════════════════════════════════════════════════════════
   STATUS BADGES
   Variants: .status--uploaded  .status--pending
             .status--error     .status--processing
   ══════════════════════════════════════════════════════════════════════════ */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--phc-tag);
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status--uploaded   { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.status--uploaded   .status-dot { background: #22c55e; }

.status--pending    { background: #fefce8; color: #854d0e; border-color: #fde68a; }
.status--pending    .status-dot { background: var(--phc-gold); }

.status--error      { background: #fff1f2; color: #9f1239; border-color: #fecdd3; }
.status--error      .status-dot { background: var(--phc-red); }

.status--processing { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.status--processing .status-dot { background: #60a5fa; }


/* ══════════════════════════════════════════════════════════════════════════
   FILTER TAGS  (toggleable, pill shape)
   Toggle active state with JS: btn.classList.toggle('is-active')
   ══════════════════════════════════════════════════════════════════════════ */
.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--phc-pill);
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--phc-transition);
  background: var(--phc-light-bg);
  color: var(--phc-body-text);
  border: 1.5px solid var(--phc-border);
  white-space: nowrap;
}
.filter-tag:hover {
  border-color: var(--phc-gold-dark);
  color: var(--phc-charcoal);
  background: var(--phc-gold-light);
}
.filter-tag.is-active {
  background: var(--phc-charcoal);
  color: #fff;
  border-color: var(--phc-charcoal);
}
.filter-tag.is-active:hover {
  background: var(--phc-gold-dark);
  border-color: var(--phc-gold-dark);
  color: var(--phc-charcoal);
}