/*
 * account.css — Shared chrome for Nerora customer account pages.
 *
 * Loaded by base.leaf for every page on the site, but every rule is scoped
 * under `.account-page` (applied to <body> by base.leaf when currentPath starts
 * with /account). This guarantees account.css cannot affect non-account pages —
 * same technique used by admin.css (.admin-page) and library.css (.library-page).
 *
 * Page-specific styles continue to live in their respective account templates
 * and may override these defaults via the natural cascade order (account.css
 * loads in base.leaf BEFORE template-inline styles).
 */


/* =============================================================================
   1. Page header
   ============================================================================= */

/* Shared bottom margin for the heading block. Layout (flex vs. block) and
   h2 font-size differ between pages and remain in page-scoped <style> blocks. */
.account-page .account-page-header {
  margin-bottom: 1.5rem;
}


/* =============================================================================
   2. Empty state
   ============================================================================= */

.account-page .account-empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-secondary);
}
.account-page .account-empty-icon {
  font-size: 3rem;
  margin: 0 0 0.5rem;
  line-height: 1;
}
.account-page .account-empty-heading {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
}
.account-page .account-empty-body {
  margin: 0;
  font-size: 0.95rem;
}
.account-page .account-empty-body a {
  color: var(--accent-primary);
  text-decoration: none;
}
.account-page .account-empty-body a:hover {
  text-decoration: underline;
}


/* =============================================================================
   3. Monospace utility
   ============================================================================= */

/* Used for timestamps, amounts, order IDs, and numeric table cells.
   white-space: nowrap prevents dates and prices wrapping mid-token on mobile;
   harmless on order-id cells which already carry word-break: break-all. */
.account-page .acct-mono {
  font-family: monospace;
  font-size: 0.875rem;
  color: var(--text-secondary);
  white-space: nowrap;
}


/* =============================================================================
   4. Orders list table
   ============================================================================= */

/* Scrollable wrapper for narrow viewports */
.account-page .account-orders-table-wrap {
  overflow-x: auto;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.account-page .account-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.account-page .account-orders-table th,
.account-page .account-orders-table td {
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}
.account-page .account-orders-table th {
  background: var(--bg-primary);
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.account-page .account-orders-table tbody tr:last-child td {
  border-bottom: none;
}
.account-page .account-orders-table tbody tr:hover {
  background: var(--bg-primary);
}

/* Amount cell: right-aligned, primary-colour, bold */
.account-page .acct-amount {
  text-align: right;
  color: var(--text-primary);
  font-weight: 600;
}

/* Course name list — multiple courses per order rendered as a plain list */
.account-page .acct-course-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.account-page .acct-course-list li {
  font-size: 0.9rem;
  color: var(--text-primary);
}

/* "View" link in the last column */
.account-page .acct-view-link {
  color: var(--accent-primary);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}
.account-page .acct-view-link:hover {
  text-decoration: underline;
}


/* =============================================================================
   5. Order detail table
   ============================================================================= */

/* Scrollable wrapper — tighter bottom margin than the orders table wrapper
   because it is followed immediately by the totals block. */
.account-page .acct-table-wrap {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  margin-bottom: 1rem;
}

.account-page .acct-line-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.account-page .acct-line-items-table th,
.account-page .acct-line-items-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}
.account-page .acct-line-items-table th {
  background: var(--bg-primary);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.account-page .acct-line-items-table tbody tr:last-child td {
  border-bottom: none;
}

/* Column alignment helpers */
.account-page .acct-col-center { text-align: center; }
.account-page .acct-col-right  { text-align: right; }

/* Line-total cell: primary colour + bold to distinguish from unit price */
.account-page .acct-line-total {
  color: var(--text-primary);
  font-weight: 600;
}

/* Course name — linked (active access) */
.account-page .acct-course-link {
  color: var(--accent-primary);
  text-decoration: none;
  font-weight: 500;
}
.account-page .acct-course-link:hover {
  text-decoration: underline;
}

/* Course name — static record (no active access: refunded etc.) */
.account-page .acct-course-static {
  color: var(--text-secondary);
  font-style: italic;
}

/* Totals block — right-aligned stacked rows */
.account-page .acct-totals {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  font-size: 0.95rem;
}
.account-page .acct-totals-row {
  display: flex;
  gap: 2rem;
  color: var(--text-secondary);
}
.account-page .acct-totals-label {
  min-width: 70px;
  text-align: right;
}
.account-page .acct-totals-value {
  min-width: 70px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.account-page .acct-totals-grand {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-primary);
  border-top: 1px solid var(--border-color);
  padding-top: 0.4rem;
  margin-top: 0.15rem;
}
.account-page .acct-totals-grand .acct-totals-value {
  color: var(--text-primary);
}

/* Receipt link */
.account-page .acct-receipt-note {
  margin: 0;
  font-size: 0.95rem;
}
.account-page .acct-receipt-link {
  color: var(--accent-primary);
  text-decoration: none;
  font-weight: 500;
}
.account-page .acct-receipt-link:hover {
  text-decoration: underline;
}


/* =============================================================================
   6. Status badge
   ============================================================================= */

/* Customer-facing order status badge.
   Colours intentionally match the semantic intent used in admin.css §7
   but are declared independently here because admin.css scopes all
   status-badge rules to .admin-page and must not be reached from here. */
.account-page .acct-status-badge {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  text-transform: capitalize;
}
.account-page .acct-order-pending   { background: #fff3cd; color: #856404; }
.account-page .acct-order-paid      { background: #cce5ff; color: #004085; }
.account-page .acct-order-fulfilled { background: #d4edda; color: #155724; }
.account-page .acct-order-refunded  { background: #e9ecef; color: #495057; }
.account-page .acct-order-cancelled { background: #f8d7da; color: #721c24; }


/* =============================================================================
   7. Accessibility helpers
   ============================================================================= */

/* Visually-hidden text (screen-reader only).
   Used for the "Details" column header in the orders table. */
.account-page .acct-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
