/* ============================================================
 * PVA Voucher Redemption v1.0 — Design Tokens
 * Source of truth: trang_chu_ui_guidance.md
 * ONLY file allowed to contain raw hex values / px scales.
 * Shared by: pva-redemption-cp, pva-admin-cp, pva-lookup-dashboard.
 * ============================================================ */

:root {
  /* Typography */
  --font-base: 'Open Sans', Helvetica, Arial, sans-serif;
  --fs-12: 12px;   /* captions, legal micro-copy */
  --fs-14: 14px;   /* nav items, secondary buttons, meta */
  --fs-16: 16px;   /* body, primary buttons, inputs */
  --fs-18: 18px;   /* subheadings, card titles */
  --fs-26: 26px;   /* H3 / page sub-sections */
  --fs-32: 32px;   /* H2 / section headers */
  --fs-48: 48px;   /* H1 / hero headings */
  --fw-base: 400;
  --lh-base: 24px;

  /* Color semantics (WCAG 2.2 AA pairs: primary on base, tertiary on muted) */
  --color-text-primary: #ffffff;
  --color-text-secondary: #da291c;
  --color-text-tertiary: #1c1d1b;
  --color-text-inverse: #dfdfdf;
  --color-surface-base: #000000;
  --color-surface-muted: #fbeae8;
  --color-surface-soft: #f4f4f5;   /* slightly-gray card surface (was plain white) */

  /* Campaign status semantics (added for CEP Campaign Manager calendar/Gantt;
     additive — shared across all admin pages that render campaign status) */
  --color-status-draft: #9aa5b1;
  --color-status-active: #16a34a;
  --color-status-paused: #f59e0b;
  --color-status-completed: #3b82f6;

  /* Spacing scale — the ONLY allowed spacing values */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-32: 32px;

  /* Radii */
  --radius-xs: 8px;    /* cards, inputs */
  --radius-sm: 96px;   /* pills, tags, badges */
  --radius-md: 100px;  /* buttons, fully rounded */

  /* Motion */
  --motion: 300ms ease-in-out;

  /* Derived layout */
  --touch-target: 48px;
  --container-md: 720px;   /* >=768px */
  --container-lg: 960px;   /* >=1024px */
  --container-xl: 1240px;  /* page body cap (all CP pages) */
}

/* ============ Base ============ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* The `hidden` attribute MUST always win. Components like .pva-btn/.pva-combo set
   an explicit `display`, and author rules beat the UA `[hidden]{display:none}` rule
   regardless of specificity — so without this, hiding a .pva-btn via JS (el.hidden =
   true) has no effect and the button stays visible. Force it globally. */
[hidden] { display: none !important; }
body {
  margin: 0 auto;
  max-width: var(--container-xl);
  font-family: var(--font-base);
  font-size: var(--fs-16);
  font-weight: var(--fw-base);
  line-height: var(--lh-base);
  background: var(--color-surface-base);
  color: var(--color-text-primary);
}

/* Focus visibility — never remove outlines without a substitute */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-text-primary); outline-offset: 2px; }

/* ============ Buttons (state matrix per guidance) ============ */
.pva-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: var(--sp-32);
  padding: var(--sp-8) var(--sp-16);
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-text-secondary);
  color: var(--color-text-primary);
  font-family: var(--font-base);
  font-size: var(--fs-16);
  font-weight: var(--fw-base);
  line-height: 1;
  text-decoration: none;   /* anchors styled as buttons (<a class="pva-btn">) must not underline */
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  transition: background-color var(--motion), color var(--motion), opacity var(--motion);
}
/* invisible touch padding to reach 48x48 minimum */
.pva-btn::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  width: 100%; height: 100%;
}
.pva-btn:hover { background: var(--color-text-tertiary); color: var(--color-text-primary); }
.pva-btn:focus-visible { background: var(--color-text-secondary); color: var(--color-text-primary); outline: 2px solid var(--color-text-primary); outline-offset: 2px; }
.pva-btn:active { background: var(--color-surface-base); color: var(--color-text-inverse); }
.pva-btn:disabled,
.pva-btn[aria-disabled="true"] {
  background: var(--color-surface-muted);
  color: var(--color-text-inverse);
  cursor: not-allowed;
  opacity: 0.6;
}
.pva-btn.is-loading { color: transparent; pointer-events: none; background: var(--color-text-secondary); }
.pva-btn.is-loading::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: var(--sp-16); height: var(--sp-16);
  margin-left: calc(var(--sp-8) * -1);
  margin-top: calc(var(--sp-8) * -1);
  border: 2px solid var(--color-text-primary);
  border-top-color: transparent;
  border-radius: var(--radius-md);
  animation: pva-spin 0.8s linear infinite;
}
.pva-btn.is-error { animation: pva-shake var(--motion); }
@keyframes pva-spin { to { transform: rotate(360deg); } }
@keyframes pva-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(calc(var(--sp-4) * -1)); }
  75% { transform: translateX(var(--sp-4)); }
}
/* Secondary (ghost) — all pages use a light background, so dark text/border at rest;
   on hover the surface goes dark, so the label flips to white. */
.pva-btn--ghost {
  background: transparent;
  color: var(--color-text-tertiary);
  box-shadow: inset 0 0 0 1px var(--color-text-tertiary);
}
.pva-btn--ghost:hover { background: var(--color-text-tertiary); color: var(--color-text-primary); }
/* Ghost buttons inside modals sit on a WHITE surface — the base ghost is tuned for
   dark page backgrounds (white text), so flip to dark text/border to stay visible
   at rest; on hover the surface goes dark, so the label flips back to white. */
.pva-modal .pva-btn--ghost {
  color: var(--color-text-tertiary);
  box-shadow: inset 0 0 0 1px var(--color-text-tertiary);
}
.pva-modal .pva-btn--ghost:hover { background: var(--color-text-tertiary); color: var(--color-text-primary); }
@media (max-width: 767px) {
  .pva-btn { width: 100%; }
}

/* ============ Cards ============ */
.pva-card {
  border-radius: var(--radius-xs);
  background: var(--color-surface-muted);
  color: var(--color-text-tertiary);
  padding: var(--sp-16);
  transition: opacity var(--motion);
}
.pva-card:focus-visible { outline: 3px solid var(--color-text-secondary); }
.pva-card.is-disabled { opacity: 0.4; pointer-events: none; }
.pva-card__category {
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-secondary);
  margin: 0 0 var(--sp-4) 0;
}
.pva-card__title {
  font-size: var(--fs-18);
  line-height: var(--lh-base);
  color: var(--color-text-tertiary);
  margin: 0 0 var(--sp-8) 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pva-card__excerpt {
  font-size: var(--fs-14);
  line-height: 20px;
  color: var(--color-text-tertiary);
  margin: 0;
}
.pva-card.is-loading {
  background: linear-gradient(90deg, var(--color-surface-muted) 25%, var(--color-text-inverse) 50%, var(--color-surface-muted) 75%);
  background-size: 200% 100%;
  animation: pva-shimmer 1.2s infinite, pva-pulse 1.2s infinite alternate;
}
@keyframes pva-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes pva-pulse { from { opacity: 0.4; } to { opacity: 1; } }

/* ============ Pills / badges ============ */
.pva-pill {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
  padding: var(--sp-4) var(--sp-12);
  font-size: var(--fs-12);
  line-height: 1.4;
  background: var(--color-surface-base);
  color: var(--color-text-primary);
}
.pva-pill--accent { background: var(--color-text-secondary); color: var(--color-text-primary); }
.pva-pill--muted { background: var(--color-surface-muted); color: var(--color-text-tertiary); }

/* ============ Inputs ============ */
.pva-input {
  width: 100%;
  min-height: var(--touch-target);
  padding: var(--sp-10) var(--sp-16);
  border: 1px solid var(--color-text-inverse);
  border-radius: var(--radius-xs);
  background: var(--color-text-primary);
  color: var(--color-text-tertiary);
  font-family: var(--font-base);
  font-size: var(--fs-16);
  transition: border-color var(--motion), box-shadow var(--motion);
}
.pva-input:focus-visible {
  outline: 2px solid var(--color-text-secondary);
  outline-offset: 2px;
  border-color: var(--color-text-secondary);
}
.pva-input[aria-invalid="true"] { border-color: var(--color-text-secondary); }
.pva-label {
  display: block;
  font-size: var(--fs-14);
  margin-bottom: var(--sp-4);
}
.pva-field-error {
  font-size: var(--fs-14);
  color: var(--color-text-secondary);
  margin-top: var(--sp-4);
}

/* Checkbox with 48px touch target */
.pva-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: var(--touch-target);
  min-width: var(--touch-target);
  cursor: pointer;
}
.pva-checkbox input[type="checkbox"] {
  width: var(--sp-24);
  height: var(--sp-24);
  accent-color: var(--color-text-secondary);
  cursor: pointer;
}

/* ============ Modal (no focus trap; Esc/backdrop handled in JS) ============ */
.pva-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-surface-base);
  opacity: 0.8;
  z-index: 90;
}
.pva-modal {
  position: fixed;
  z-index: 100;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - var(--sp-32));
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--color-text-primary);
  color: var(--color-text-tertiary);
  border-radius: var(--radius-xs);
  padding: var(--sp-24);
}
/* Mobile: bottom sheet */
@media (max-width: 767px) {
  .pva-modal {
    left: 0;
    top: auto;
    bottom: 0;
    transform: none;
    width: 100%;
    max-width: none;
    border-radius: var(--radius-xs) var(--radius-xs) 0 0;
    padding-bottom: calc(var(--sp-24) + env(safe-area-inset-bottom, 0px));
  }
}
.pva-modal__title {
  font-size: var(--fs-18);
  margin: 0 0 var(--sp-16) 0;
  color: var(--color-text-tertiary);
}

/* ============ Utility ============ */
.pva-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.pva-container {
  width: 100%;
  padding-left: var(--sp-16);
  padding-right: var(--sp-16);
  margin: 0 auto;
}
@media (min-width: 768px)  { .pva-container { max-width: var(--container-md); } }
@media (min-width: 1024px) { .pva-container { max-width: var(--container-lg); } }