/* Guidalia Tickets — web extensions of the Guidalia design system. */

html { color-scheme: dark; }

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
a { color: inherit; text-decoration: none; }

/* ---- App shell: top bar ---- */
.cs-topbar {
  display: flex; align-items: center; gap: var(--g-sp-5);
  padding: 0 var(--g-sp-6); height: 56px;
  background: var(--g-ink-700); border-bottom: 1px solid var(--g-line);
  position: sticky; top: 0; z-index: 10;
}
.cs-topbar__title { font-size: 17px; font-weight: var(--g-w-semi); color: var(--g-fg-1); }
.cs-topbar__spacer { flex: 1; }
.cs-avatar {
  width: 32px; height: 32px; border-radius: 999px; background: var(--g-ink-500);
  display: flex; align-items: center; justify-content: center;
  color: var(--g-fg-1); font-size: 13px; font-weight: var(--g-w-semi); cursor: pointer;
}

.cs-main { max-width: 960px; margin: 0 auto; padding: var(--g-sp-6); }

/* ---- Auth page ---- */
.cs-auth-page {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; gap: var(--g-sp-5); padding: var(--g-sp-6);
  text-align: center;
}

/* ---- Spinner ---- */
.cs-spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid var(--g-ink-500); border-top-color: var(--g-green-700);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Empty / no-access ---- */
.cs-empty { text-align: center; padding: var(--g-sp-8); }

/* ---- Buttons ---- */
.g-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--g-sp-2);
  height: 44px; padding: 0 var(--g-sp-6); border-radius: var(--g-radius-pill);
  border: none; cursor: pointer; font-family: var(--g-font-sans);
  font-size: 15px; font-weight: var(--g-w-semi);
  background: var(--g-green-700); color: var(--g-on-green);
  transition: background var(--g-dur-base) var(--g-ease-standard);
}
.g-btn:hover { background: var(--g-green-600); }
.g-btn:focus-visible { outline: none; box-shadow: var(--g-ring-focus); }

/* ---- Issue page ---- */
.issue-page { display: flex; flex-direction: column; gap: var(--g-sp-6); }
.issue-section-title { margin: 0 0 var(--g-sp-3); color: var(--g-fg-2); }
.issue-presets__grid { display: flex; flex-wrap: wrap; gap: var(--g-sp-3); }
.issue-preset-btn { background: var(--g-ink-500); color: var(--g-fg-1); }
.issue-preset-btn:hover { background: var(--g-ink-400); }
.issue-packages__list { display: flex; flex-direction: column; gap: var(--g-sp-2); }
.issue-package-tile {
  display: flex; align-items: center; gap: var(--g-sp-3);
  padding: var(--g-sp-3) var(--g-sp-4); border-radius: var(--g-radius-md);
  border: 1.5px solid var(--g-line); cursor: pointer; transition: border-color 0.15s;
}
.issue-package-tile--selected { border-color: var(--g-green-700); background: rgba(0,180,80,0.06); }
.issue-package-check { accent-color: var(--g-green-700); width: 18px; height: 18px; }
.issue-package-label { font-size: 15px; color: var(--g-fg-1); }
.issue-quantity__stepper { display: flex; align-items: center; gap: var(--g-sp-4); }
.issue-qty-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--g-line);
  background: transparent; color: var(--g-fg-1); font-size: 20px; cursor: pointer; line-height: 1;
}
.issue-qty-btn:disabled { opacity: 0.3; cursor: default; }
.issue-qty-value { font-size: 20px; font-weight: var(--g-w-semi); min-width: 2ch; text-align: center; }
.issue-form-error, .issue-void-error { color: var(--g-red-500); font-size: 14px; margin: 0; }
.issue-no-packages { color: var(--g-fg-3); font-size: 15px; }
.issue-generate-btn { align-self: flex-start; }

/* ---- Result panel ---- */
.issue-result {
  display: flex; flex-direction: column; align-items: center; gap: var(--g-sp-5);
  padding: var(--g-sp-6); border-radius: var(--g-radius-lg);
  border: 1.5px solid var(--g-line); text-align: center;
}
.issue-result__logo { max-height: 60px; object-fit: contain; }
.issue-result__title { margin: 0; }
.issue-result__packages { color: var(--g-fg-2); font-size: 15px; margin: 0; }
.issue-result__expires { color: var(--g-fg-3); font-size: 14px; margin: 0; }
.issue-result__qr { background: #fff; border-radius: var(--g-radius-md); padding: 12px; }
.issue-result__actions { display: flex; gap: var(--g-sp-4); flex-wrap: wrap; justify-content: center; }
.issue-new-sale-btn { background: var(--g-ink-500); }
.issue-new-sale-btn:hover { background: var(--g-ink-400); }

/* ---- Recent operations ---- */
.issue-recent { margin-top: var(--g-sp-8); }
.issue-recent-empty { color: var(--g-fg-3); font-size: 15px; }
.issue-recent__list { display: flex; flex-direction: column; gap: var(--g-sp-4); }
.issue-recent-group {
  padding: var(--g-sp-4); border-radius: var(--g-radius-md); border: 1px solid var(--g-line);
}
.issue-recent-group__header {
  display: flex; align-items: center; gap: var(--g-sp-4); flex-wrap: wrap; margin-bottom: var(--g-sp-3);
}
.issue-recent-group__time { color: var(--g-fg-3); font-size: 13px; }
.issue-recent-group__packages { font-size: 14px; color: var(--g-fg-2); flex: 1; }
.issue-reprint-btn { height: 32px; font-size: 13px; padding: 0 var(--g-sp-4); }
.issue-recent-group__entitlements { display: flex; flex-wrap: wrap; gap: var(--g-sp-2); }
.issue-entitlement { display: flex; align-items: center; gap: var(--g-sp-2); }
.issue-void-btn {
  font-size: 12px; padding: 2px 10px; border-radius: var(--g-radius-pill);
  background: transparent; border: 1px solid var(--g-red-500); color: var(--g-red-500); cursor: pointer;
}
.issue-void-btn:hover { background: rgba(220,50,50,0.08); }

/* ---- Status chips ---- */
.issue-status-chip {
  display: inline-block; padding: 2px 8px; border-radius: var(--g-radius-pill);
  font-size: 12px; font-weight: var(--g-w-semi);
}
.issue-status-chip--unredeemed { background: rgba(0,180,80,0.12); color: var(--g-green-700); }
.issue-status-chip--redeemed   { background: rgba(100,100,255,0.12); color: #6464ff; }
.issue-status-chip--expired    { background: rgba(180,140,0,0.12); color: #b48c00; }
.issue-status-chip--voided     { background: rgba(180,50,50,0.1); color: var(--g-red-500); }

/* QR wrapper */
.qr-svg-wrapper { display: inline-block; }
.qr-svg-wrapper svg { width: 100%; height: 100%; }

/* ---- Print ---- */
@media print {
  body * { visibility: hidden; }
  .print-area, .print-area * { visibility: visible; }
  .print-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border: none !important;
    padding: 0 !important;
  }
  body { background: #fff !important; color: #000 !important; }
}