/* Guidalia Tickets — web extensions of the Guidalia design system (light theme). */

html { color-scheme: light; }

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--g-bg); color: var(--g-fg-1); }
a { color: inherit; text-decoration: none; }

/* App shell wraps the layout so the footer sticks to the bottom on short pages. */
.cs-shell { display: flex; flex-direction: column; min-height: 100vh; }
.cs-shell > .cs-main { flex: 1 0 auto; }

/* ==========================================================================
   Top bar — two-tier: brand band + nav row
   ========================================================================== */
.cs-topbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--g-surface);
  border-bottom: 1px solid var(--g-border);
}

/* --- Tier 1: brand band (large partner logo + name) --- */
.cs-topbar__brand {
  display: flex; align-items: center; gap: var(--g-sp-4);
  padding: var(--g-sp-4) var(--g-sp-6);
  border-bottom: 1px solid var(--g-border);
}
.cs-topbar__partner {
  display: flex; align-items: center; gap: var(--g-sp-4); min-width: 0;
}
.cs-topbar__partner-logo {
  height: 56px; width: auto; max-width: 220px;
  object-fit: contain; border-radius: var(--g-radius-sm);
}
.cs-topbar__partner-name {
  font-size: 22px; line-height: 1.2; font-weight: var(--g-w-semi);
  letter-spacing: -0.005em; color: var(--g-fg-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-topbar__brand-fallback {
  font-size: 17px; font-weight: var(--g-w-semi); color: var(--g-fg-1);
}

/* --- Tier 2: nav row (admin links + account) --- */
.cs-topbar__row {
  display: flex; align-items: center; gap: var(--g-sp-5);
  padding: 0 var(--g-sp-6); height: 52px;
}
.cs-topbar__title { font-size: 15px; font-weight: var(--g-w-semi); color: var(--g-fg-2); cursor: pointer; }
.cs-topbar__title:hover { color: var(--g-fg-1); }
.cs-topbar__nav { display: flex; align-items: center; gap: var(--g-sp-2); }
.cs-topbar__nav-link {
  padding: 6px var(--g-sp-3); border-radius: var(--g-radius-sm);
  font-size: 14px; font-weight: var(--g-w-medium); color: var(--g-fg-2);
  transition: background var(--g-dur-fast) var(--g-ease-standard), color var(--g-dur-fast) var(--g-ease-standard);
}
.cs-topbar__nav-link:hover { background: var(--g-surface-2); color: var(--g-fg-1); }
.cs-topbar__nav-link.active { background: var(--g-green-100); color: var(--g-green-800); }
.cs-topbar__spacer { flex: 1; }

.cs-avatar {
  width: 34px; height: 34px; border-radius: 999px; background: var(--g-green-700);
  display: flex; align-items: center; justify-content: center;
  color: var(--g-on-green); font-size: 14px; font-weight: var(--g-w-semi); cursor: pointer;
}
.cs-avatar:hover { background: var(--g-green-600); }
.cs-topbar__account { position: relative; }
.cs-topbar__account-btn { border: none; padding: 0; }
.cs-topbar__account-btn:focus-visible { outline: none; box-shadow: var(--g-ring-focus); }
.cs-topbar__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  min-width: 160px; padding: 4px; border-radius: var(--g-radius-md);
  background: var(--g-surface); border: 1px solid var(--g-border);
  box-shadow: var(--g-shadow-float);
}
.cs-topbar__menu-item {
  display: block; width: 100%; text-align: left; border: none; background: none;
  padding: 8px 12px; border-radius: var(--g-radius-sm); cursor: pointer;
  color: var(--g-fg-1); font-size: 14px;
}
.cs-topbar__menu-item:hover { background: var(--g-surface-2); }

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

/* ==========================================================================
   Footer — "Powered by" Guidalia
   ========================================================================== */
.cs-footer {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; gap: var(--g-sp-2);
  padding: var(--g-sp-5) var(--g-sp-6);
  border-top: 1px solid var(--g-border);
  background: var(--g-surface);
}
.cs-footer__label {
  font-size: 12px; color: var(--g-fg-3); letter-spacing: 0.01em;
}
.cs-footer__logo { height: 22px; width: auto; object-fit: contain; }
.cs-footer__wordmark {
  font-size: 15px; font-weight: var(--g-w-semi); letter-spacing: -0.01em;
  color: var(--g-green-700);
}

/* ==========================================================================
   Auth page (SignIn / Invite)
   ========================================================================== */
.cs-auth-page {
  flex: 1 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--g-sp-5); padding: var(--g-sp-8) var(--g-sp-6);
  text-align: center;
}
.cs-auth-page__stack {
  display: flex; flex-direction: column; gap: var(--g-sp-3);
  width: 100%; max-width: 340px;
  padding: var(--g-sp-6);
  background: var(--g-surface); border: 1px solid var(--g-border);
  border-radius: var(--g-radius-lg); box-shadow: var(--g-shadow-card);
}
.cs-auth-page__stack .g-btn { width: 100%; }

/* ==========================================================================
   Spinner / empty
   ========================================================================== */
.cs-spinner {
  width: 36px; height: 36px; border-radius: 50%; margin: var(--g-sp-8) auto;
  border: 3px solid var(--g-border); border-top-color: var(--g-green-700);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.cs-empty { text-align: center; padding: var(--g-sp-8); }

/* ==========================================================================
   Typographic helpers used in markup
   ========================================================================== */
.g-label {
  display: block; font-size: 13px; font-weight: var(--g-w-semi);
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--g-fg-3);
}

/* ==========================================================================
   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); }
.g-btn:disabled { opacity: 0.5; cursor: default; }

/* Secondary / ghost — light outline button */
.g-btn--ghost {
  background: var(--g-surface); color: var(--g-fg-1);
  border: 1px solid var(--g-border);
}
.g-btn--ghost:hover { background: var(--g-surface-2); }

/* ==========================================================================
   Inputs
   ========================================================================== */
.g-input,
.tickets-signin__email, .invite__email,
.settings-label-input, .settings-preset-label-input, .settings-preset-qty-input,
.users-invite-email-input, .users-invite-role-select, .usage-month-picker {
  height: 44px; padding: 0 var(--g-sp-4); border-radius: var(--g-radius-sm);
  border: 1px solid var(--g-border); background: var(--g-surface);
  color: var(--g-fg-1); font-family: var(--g-font-sans); font-size: 15px;
  transition: border-color var(--g-dur-fast) var(--g-ease-standard), box-shadow var(--g-dur-fast) var(--g-ease-standard);
}
.g-input::placeholder, .g-input::-webkit-input-placeholder { color: var(--g-fg-3); }
.g-input:focus, .g-input:focus-visible,
.tickets-signin__email:focus, .invite__email:focus,
.settings-label-input:focus, .settings-preset-label-input:focus, .settings-preset-qty-input:focus,
.users-invite-email-input:focus, .users-invite-role-select:focus, .usage-month-picker:focus {
  outline: none; border-color: var(--g-green-700); box-shadow: var(--g-ring-focus);
}

/* ==========================================================================
   Issue page
   ========================================================================== */
.issue-page { display: flex; flex-direction: column; gap: var(--g-sp-6); }
.issue-page > section {
  background: var(--g-surface); border: 1px solid var(--g-border);
  border-radius: var(--g-radius-lg); box-shadow: var(--g-shadow-card);
  padding: var(--g-sp-5) var(--g-sp-6);
}
.issue-section-title { margin: 0 0 var(--g-sp-4); }

.issue-presets__grid { display: flex; flex-wrap: wrap; gap: var(--g-sp-3); }
.issue-preset-btn { background: var(--g-green-100); color: var(--g-green-800); }
.issue-preset-btn:hover { background: var(--g-green-200); }

.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-border); background: var(--g-surface);
  cursor: pointer; transition: border-color var(--g-dur-fast), background var(--g-dur-fast);
}
.issue-package-tile:hover { border-color: var(--g-green-300); }
.issue-package-tile--selected { border-color: var(--g-green-700); background: var(--g-green-100); }
.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: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--g-border);
  background: var(--g-surface); color: var(--g-fg-1); font-size: 20px; cursor: pointer; line-height: 1;
  transition: border-color var(--g-dur-fast), background var(--g-dur-fast);
}
.issue-qty-btn:hover:not(:disabled) { border-color: var(--g-green-300); background: var(--g-surface-2); }
.issue-qty-btn:disabled { opacity: 0.35; cursor: default; }
.issue-qty-value { font-size: 20px; font-weight: var(--g-w-semi); min-width: 2ch; text-align: center; color: var(--g-fg-1); }

.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-7) var(--g-sp-6); border-radius: var(--g-radius-lg);
  border: 1px solid var(--g-border); background: var(--g-surface);
  box-shadow: var(--g-shadow-card); 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: 1px solid var(--g-border);
  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-surface); color: var(--g-fg-1); border: 1px solid var(--g-border); }
.issue-new-sale-btn:hover { background: var(--g-surface-2); }

/* --- 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) var(--g-sp-5); border-radius: var(--g-radius-md);
  border: 1px solid var(--g-border); background: var(--g-surface);
  box-shadow: var(--g-shadow-card);
}
.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-1); flex: 1; font-weight: var(--g-w-medium); }
.issue-reprint-btn { height: 32px; font-size: 13px; padding: 0 var(--g-sp-4); background: var(--g-surface); color: var(--g-fg-1); border: 1px solid var(--g-border); }
.issue-reprint-btn:hover { background: var(--g-surface-2); }
.issue-recent-group__entitlements { display: flex; flex-wrap: wrap; gap: var(--g-sp-3); }
.issue-entitlement { display: flex; align-items: center; gap: var(--g-sp-2); }
.issue-void-btn {
  font-size: 12px; padding: 3px 10px; border-radius: var(--g-radius-pill);
  background: transparent; border: 1px solid var(--g-red-500); color: var(--g-red-500); cursor: pointer;
  transition: background var(--g-dur-fast);
}
.issue-void-btn:hover { background: rgba(220,38,38,0.08); }

/* --- Status chips (light tints, readable on white) --- */
.issue-status-chip {
  display: inline-block; padding: 3px 10px; border-radius: var(--g-radius-pill);
  font-size: 12px; font-weight: var(--g-w-semi);
}
.issue-status-chip--unredeemed { background: var(--g-green-100);        color: var(--g-green-800); }
.issue-status-chip--redeemed   { background: #DBEAFE;                    color: #1D4ED8; }
.issue-status-chip--expired    { background: #FEF3C7;                    color: #B45309; }
.issue-status-chip--voided     { background: #FEE2E2;                    color: #B91C1C; }

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

/* ==========================================================================
   Settings page
   ========================================================================== */
.settings-page, .users-page, .usage-page { display: flex; flex-direction: column; gap: var(--g-sp-6); }
.settings-title, .users-title, .usage-title { margin: 0; }

.settings-page > section, .users-page > section {
  background: var(--g-surface); border: 1px solid var(--g-border);
  border-radius: var(--g-radius-lg); box-shadow: var(--g-shadow-card);
  padding: var(--g-sp-5) var(--g-sp-6);
}
.settings-section-title, .users-section-title { margin: 0 0 var(--g-sp-4); }
.settings-no-packages { color: var(--g-fg-3); font-size: 15px; }

.settings-packages__list { display: flex; flex-direction: column; gap: var(--g-sp-2); }
.settings-package-row {
  display: flex; align-items: center; gap: var(--g-sp-4); flex-wrap: wrap;
  padding: var(--g-sp-3) var(--g-sp-4); border-radius: var(--g-radius-md);
  border: 1px solid var(--g-border); background: var(--g-surface);
}
.settings-package-title { font-weight: var(--g-w-medium); color: var(--g-fg-1); min-width: 140px; }
.settings-package-visible { display: flex; align-items: center; gap: var(--g-sp-2); font-size: 14px; color: var(--g-fg-2); }
.settings-package-visible input, .settings-preset-pkg-check, .settings-preset-enabled-check,
.settings-visible-check { accent-color: var(--g-green-700); width: 16px; height: 16px; }
.settings-label-input { flex: 1; min-width: 160px; }
.settings-move-up-btn, .settings-move-down-btn {
  width: 34px; height: 34px; border-radius: var(--g-radius-sm);
  border: 1px solid var(--g-border); background: var(--g-surface);
  color: var(--g-fg-1); cursor: pointer; font-size: 15px; line-height: 1;
}
.settings-move-up-btn:hover:not(:disabled), .settings-move-down-btn:hover:not(:disabled) { background: var(--g-surface-2); }
.settings-move-up-btn:disabled, .settings-move-down-btn:disabled { opacity: 0.35; cursor: default; }

.settings-save-error, .settings-preset-error { color: var(--g-red-500); font-size: 14px; margin: var(--g-sp-3) 0 0; }
.settings-save-success { color: var(--g-success); font-size: 14px; margin: var(--g-sp-3) 0 0; }
.settings-save-btn, .settings-add-preset-btn { margin-top: var(--g-sp-4); }

/* #312: redemption window + package picker on the partner Settings page. */
.settings-window-label { display: flex; align-items: center; gap: var(--g-sp-3); font-size: 15px; color: var(--g-fg-2); }
.settings-window-input { width: 90px; }
.settings-window-input:disabled { opacity: 0.6; }
.settings-window-save-error { color: var(--g-red-500); font-size: 14px; margin: var(--g-sp-3) 0 0; }
.settings-window-save-success { color: var(--g-success); font-size: 14px; margin: var(--g-sp-3) 0 0; }
.settings-window-save-btn { margin-top: var(--g-sp-4); }

.settings-pkg-picker { margin-top: var(--g-sp-4); }
.settings-pkg-search { width: 100%; max-width: 420px; }
.settings-pkg-results { list-style: none; margin: var(--g-sp-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--g-sp-2); }
.settings-pkg-add-btn { width: 100%; text-align: left; }
.settings-no-packages-to-add { color: var(--g-fg-3); font-size: 14px; margin: var(--g-sp-3) 0 0; }
.settings-pkg-remove-btn {
  border: 1px solid var(--g-border); background: var(--g-surface);
  color: var(--g-fg-2); cursor: pointer; font-size: 14px;
  border-radius: var(--g-radius-sm); padding: var(--g-sp-2) var(--g-sp-3);
}
.settings-pkg-remove-btn:hover { background: var(--g-surface-2); }
.settings-remove-blocked { color: var(--g-red-500); font-size: 14px; margin: var(--g-sp-3) 0 0; }

.settings-preset-row {
  display: flex; align-items: center; gap: var(--g-sp-3); flex-wrap: wrap;
  padding: var(--g-sp-4); margin-bottom: var(--g-sp-3);
  border-radius: var(--g-radius-md); border: 1px solid var(--g-border); background: var(--g-surface);
}
.settings-preset-label-input { min-width: 160px; }
.settings-preset-qty-input { width: 80px; }
.settings-preset-packages { display: flex; flex-wrap: wrap; gap: var(--g-sp-3); }
.settings-preset-pkg-label, .settings-preset-enabled-label {
  display: flex; align-items: center; gap: var(--g-sp-2); font-size: 14px; color: var(--g-fg-2);
}
.settings-preset-save-btn { height: 36px; font-size: 14px; padding: 0 var(--g-sp-4); }
.settings-preset-delete-btn {
  height: 36px; padding: 0 var(--g-sp-4); border-radius: var(--g-radius-pill);
  background: transparent; border: 1px solid var(--g-red-500); color: var(--g-red-500);
  cursor: pointer; font-size: 14px; font-weight: var(--g-w-semi);
}
.settings-preset-delete-btn:hover { background: rgba(220,38,38,0.08); }

/* ==========================================================================
   Tables (Users / Usage)
   ========================================================================== */
.users-members-table, .usage-table {
  width: 100%; border-collapse: collapse; font-size: 14px;
}
.users-members-table thead th, .usage-table thead th {
  text-align: left; padding: var(--g-sp-3) var(--g-sp-4);
  font-size: 12px; font-weight: var(--g-w-semi); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--g-fg-3); background: var(--g-surface-2);
  border-bottom: 1px solid var(--g-border);
}
.users-members-table thead th:first-child, .usage-table thead th:first-child { border-top-left-radius: var(--g-radius-sm); }
.users-members-table thead th:last-child, .usage-table thead th:last-child { border-top-right-radius: var(--g-radius-sm); }
.users-members-table tbody td, .usage-table tbody td {
  padding: var(--g-sp-3) var(--g-sp-4); color: var(--g-fg-1);
  border-bottom: 1px solid var(--g-border);
}
.users-members-table tbody tr:nth-child(even), .usage-table tbody tr:nth-child(even) { background: var(--g-surface-2); }
.usage-table tfoot td {
  padding: var(--g-sp-3) var(--g-sp-4); color: var(--g-fg-1);
  border-top: 2px solid var(--g-border);
}
.usage-total-amount { text-align: left; }

.users-no-members, .users-no-invitations, .usage-empty, .usage-error {
  color: var(--g-fg-3); font-size: 15px;
}
.usage-error, .users-status-error, .users-invite-error, .users-revoke-error { color: var(--g-red-500); }

.users-disable-btn, .users-enable-btn, .users-revoke-btn {
  height: 32px; padding: 0 var(--g-sp-4); border-radius: var(--g-radius-pill);
  background: var(--g-surface); border: 1px solid var(--g-border); color: var(--g-fg-1);
  cursor: pointer; font-size: 13px; font-weight: var(--g-w-medium);
}
.users-disable-btn:hover, .users-revoke-btn:hover { border-color: var(--g-red-500); color: var(--g-red-500); background: rgba(220,38,38,0.05); }
.users-enable-btn:hover { border-color: var(--g-green-700); color: var(--g-green-700); background: var(--g-green-100); }

.users-invite-form { display: flex; gap: var(--g-sp-3); flex-wrap: wrap; align-items: center; }
.users-invite-email-input { flex: 1; min-width: 200px; }

.users-invitations-list { display: flex; flex-direction: column; gap: var(--g-sp-2); }
.users-invitation-row {
  display: flex; align-items: center; gap: var(--g-sp-4); flex-wrap: wrap;
  padding: var(--g-sp-3) var(--g-sp-4); border-radius: var(--g-radius-md);
  border: 1px solid var(--g-border); background: var(--g-surface);
}
.users-invitation-email { font-weight: var(--g-w-medium); color: var(--g-fg-1); flex: 1; }
.users-invitation-role { color: var(--g-fg-2); font-size: 14px; }

/* ==========================================================================
   Usage controls
   ========================================================================== */
.usage-controls {
  display: flex; align-items: center; gap: var(--g-sp-3); flex-wrap: wrap;
  background: var(--g-surface); border: 1px solid var(--g-border);
  border-radius: var(--g-radius-lg); box-shadow: var(--g-shadow-card);
  padding: var(--g-sp-4) var(--g-sp-5);
}
.usage-month-label { font-size: 14px; font-weight: var(--g-w-medium); color: var(--g-fg-2); }

/* ==========================================================================
   Print — keep chrome hidden, QR on white
   ========================================================================== */
@media print {
  body * { visibility: hidden; }
  .cs-topbar, .cs-footer, .no-print { display: none !important; }
  .print-area, .print-area * { visibility: visible; }
  .print-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  body { background: #fff !important; color: #000 !important; }
}