/* PCR Global Button System — Spec 2D
   All classes scoped to [data-theme='porsche'].
   Uses !important to override inline styles when class is applied.
   Token source: pcr-theme.css — no hardcoded hex values. */

/* ══ 1. PRIMARY — silver fill, dark text ══ */
[data-theme='porsche'] .pcr-btn-primary {
  height: 52px !important;
  padding: 0 24px !important;
  border-radius: var(--radius-btn) !important;
  background: var(--accent) !important;
  color: var(--bg-primary) !important;
  font: var(--fw-button) var(--fs-button)/1 var(--font-sans) !important;
  border: none !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background var(--dur-hover) var(--ease-standard),
              transform var(--dur-press) var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
  text-decoration: none !important;
  box-shadow: none !important;
}
[data-theme='porsche'] .pcr-btn-primary:hover  { background: var(--accent-hover) !important; }
[data-theme='porsche'] .pcr-btn-primary:active { transform: scale(0.97); }

/* ══ 2. SECONDARY — transparent + silver border ══ */
[data-theme='porsche'] .pcr-btn-secondary {
  height: 52px !important;
  padding: 0 24px !important;
  border-radius: var(--radius-btn) !important;
  background: transparent !important;
  color: var(--accent) !important;
  font: var(--fw-button) var(--fs-button)/1 var(--font-sans) !important;
  border: 1px solid var(--accent) !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background var(--dur-hover) var(--ease-standard),
              transform var(--dur-press) var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
  text-decoration: none !important;
  box-shadow: none !important;
}
[data-theme='porsche'] .pcr-btn-secondary:hover  { background: var(--overlay-hover) !important; }
[data-theme='porsche'] .pcr-btn-secondary:active { transform: scale(0.97); }

/* ══ 3. SILVER TINT — silver ghost fill ══ */
[data-theme='porsche'] .pcr-btn-silver-tint {
  height: 52px !important;
  padding: 0 24px !important;
  border-radius: var(--radius-btn) !important;
  background: var(--tint-silver-bg) !important;
  color: var(--tint-silver-fg) !important;
  font: var(--fw-button) var(--fs-button)/1 var(--font-sans) !important;
  border: 1px solid var(--tint-silver-border) !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background var(--dur-hover) var(--ease-standard),
              transform var(--dur-press) var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
  text-decoration: none !important;
  box-shadow: none !important;
}
[data-theme='porsche'] .pcr-btn-silver-tint:active { transform: scale(0.97); }

/* ══ 4. DANGER TINT — red ghost fill ══ */
[data-theme='porsche'] .pcr-btn-danger-tint {
  height: 52px !important;
  padding: 0 24px !important;
  border-radius: var(--radius-btn) !important;
  background: var(--tint-danger-bg) !important;
  color: var(--tint-danger-fg) !important;
  font: var(--fw-button) var(--fs-button)/1 var(--font-sans) !important;
  border: 1px solid var(--tint-danger-border) !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background var(--dur-hover) var(--ease-standard),
              transform var(--dur-press) var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
  text-decoration: none !important;
  box-shadow: none !important;
}
[data-theme='porsche'] .pcr-btn-danger-tint:active { transform: scale(0.97); }

/* ══ 5. GHOST — transparent, secondary text, borderless ══ */
[data-theme='porsche'] .pcr-btn-ghost {
  height: 44px !important;
  padding: 0 16px !important;
  border-radius: var(--radius-btn) !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  font: var(--fw-button) var(--fs-button)/1 var(--font-sans) !important;
  border: none !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: color var(--dur-hover) var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
  text-decoration: none !important;
  box-shadow: none !important;
}
[data-theme='porsche'] .pcr-btn-ghost:hover { color: var(--text-primary) !important; }

/* ══ 6. ICON — 44×44 circle ══ */
[data-theme='porsche'] .pcr-btn-icon {
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--dur-hover) var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
  box-shadow: none !important;
}
[data-theme='porsche'] .pcr-btn-icon:active { background: var(--bg-elevated) !important; }

/* ══ 7. EXPANDABLE — full-width row with icon + label + chevron ══ */
[data-theme='porsche'] .pcr-btn-expandable {
  width: 100% !important;
  min-height: 52px !important;
  padding: 14px 18px !important;
  border-radius: var(--radius-md) !important;
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  font: var(--fw-button) var(--fs-button)/1.2 var(--font-sans) !important;
  border: 1px solid var(--border) !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  gap: 12px;
  text-align: left;
  transition: background var(--dur-hover) var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
  box-shadow: none !important;
}
[data-theme='porsche'] .pcr-btn-expandable:active { background: var(--bg-elevated) !important; }
[data-theme='porsche'] .pcr-btn-expandable .expandable-label { flex: 1; color: var(--text-primary); }
[data-theme='porsche'] .pcr-btn-expandable .expandable-chevron {
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: transform var(--dur-hover) var(--ease-standard);
}
[data-theme='porsche'] .pcr-btn-expandable.open .expandable-chevron { transform: rotate(180deg); }

/* ══ UTILITY — help header button (shared across pages) ══ */
[data-theme='porsche'] .help-btn-hdr {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: none;
  color: var(--text-secondary);
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
}
[data-theme='porsche'] .help-btn-hdr:active { background: var(--border-strong); }

/* ══ SPECIFICITY BOOST: My Zone — Add new zone button ══ */
[data-theme='porsche'] #gze-add-btn {
  background: transparent !important;
  border: 1px solid rgba(192,192,192,0.3) !important;
  border-style: solid !important;
  border-radius: 8px !important;
  color: #C0C0C0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 48px !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}