/* My Page — Dashboard-specific styles (shell styles are in shell.css) */

/* Page header */
.page-header { margin-bottom: var(--space-32); }
.page-header h1 { font-size: 28px; font-weight: 800; margin-bottom: var(--space-8); }
.page-header p { font-size: 15px; color: var(--text-muted); line-height: 1.7; }
.page-header .page-actions { margin-top: var(--space-16); }

/* Summary cards row */
.summary-cards { display: grid; gap: var(--space-16); margin-bottom: var(--space-32); }
@media (min-width: 600px) { .summary-cards { grid-template-columns: repeat(3, 1fr); } }
.summary-card { padding: var(--space-24); }
.summary-card .sc-label { font-size: 12px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.04em; margin-bottom: var(--space-8); }
.summary-card .sc-value { font-size: 28px; font-weight: 800; margin-bottom: 4px; }
.summary-card .sc-helper { font-size: 13px; color: var(--text-muted); }

/* Section blocks */
.app-section { margin-bottom: var(--space-48); }
.app-section h2 { font-size: 20px; font-weight: 700; margin-bottom: var(--space-4); }
.app-section .section-sub { font-size: 14px; color: var(--text-muted); margin-bottom: var(--space-16); }

/* Data table */
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th, .data-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.data-table th { font-weight: 600; background: var(--surface-muted); font-size: 13px; color: var(--text-muted); }
.data-table td { color: var(--text-muted); }
.data-table .cell-primary { color: var(--text); font-weight: 600; }

/* Status badge */
.status-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.status-badge.active { background: #ecfdf5; color: #065f46; }
.status-badge.scheduled-end { background: #fefce8; color: #854d0e; }
.status-badge.past-due { background: #fef2f2; color: #991b1b; }
.status-badge.expired { background: var(--surface-muted); color: var(--text-muted); }
.status-badge.revoked { background: var(--surface-muted); color: var(--text-muted); }

/* Info note */
.info-note {
  padding: var(--space-16); border-radius: var(--radius-md);
  background: var(--surface-muted); font-size: 14px; color: var(--text-muted);
  line-height: 1.7; margin-bottom: var(--space-24);
}
.info-note strong { color: var(--text); }

/* Warning note */
.warning-note {
  padding: var(--space-16); border-radius: var(--radius-md);
  background: #fefce8; border: 1px solid #fde68a; font-size: 14px; color: #854d0e;
  line-height: 1.7; margin-bottom: var(--space-24);
}

/* Setup checklist */
.checklist { list-style: none; margin-bottom: var(--space-24); }
.checklist li { display: flex; align-items: center; gap: var(--space-12); padding: 8px 0; font-size: 14px; }
.checklist .check-icon { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.checklist .check-icon.done { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Next steps */
.next-step-card { display: flex; align-items: center; justify-content: space-between; padding: var(--space-16); margin-bottom: var(--space-8); }
.next-step-card .nsc-text { font-size: 14px; }
.next-step-card .nsc-cta { font-size: 14px; font-weight: 600; color: var(--accent); white-space: nowrap; }

/* Modal overlay */
.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  z-index: 100; align-items: center; justify-content: center;
}
.modal-overlay.visible { display: flex; }
.modal-box {
  background: var(--bg); border-radius: var(--radius-lg); padding: var(--space-32);
  max-width: 480px; width: 90%; max-height: 80vh; overflow-y: auto;
}
.modal-box h2 { font-size: 20px; font-weight: 700; margin-bottom: var(--space-16); }
.modal-box p { font-size: 14px; color: var(--text-muted); line-height: 1.7; margin-bottom: var(--space-16); }
.modal-actions { display: flex; gap: var(--space-12); justify-content: flex-end; margin-top: var(--space-24); }

/* Token reveal */
.token-reveal {
  background: #1a1a1a; color: #e0e0e0; padding: var(--space-16);
  border-radius: var(--radius-md); font-family: "SF Mono", "Fira Code", monospace;
  font-size: 13px; word-break: break-all; margin-bottom: var(--space-16);
  position: relative;
}
.token-reveal .copy-btn {
  position: absolute; top: 8px; right: 8px; padding: 4px 12px;
  font-size: 12px; background: rgba(255,255,255,0.1); color: #e0e0e0;
  border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-sm); cursor: pointer;
}
.token-reveal .copy-btn:hover { background: rgba(255,255,255,0.2); }

/* Toast */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  padding: 12px 24px; border-radius: var(--radius-md); font-size: 14px;
  background: var(--text); color: var(--bg); z-index: 200;
  opacity: 0; transition: opacity 0.3s;
}
.toast.visible { opacity: 1; }

/* Subscription card */
.sub-card { margin-bottom: var(--space-16); }
.sub-card .sub-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-12); }
.sub-card .sub-name { font-size: 16px; font-weight: 700; }
.sub-card .sub-detail { font-size: 14px; color: var(--text-muted); margin-bottom: 4px; }
.sub-card .sub-actions { margin-top: var(--space-16); }

/* Responsive table → card */
@media (max-width: 768px) {
  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; }
  .data-table tr { padding: var(--space-16) 0; border-bottom: 1px solid var(--line); }
  .data-table td { padding: 4px 0; border: none; }
  .data-table td::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.04em; margin-bottom: 2px; }
}

/* Unauth state */
.unauth-block { text-align: center; padding: var(--space-64) 0; }
.unauth-block h2 { font-size: 22px; font-weight: 700; margin-bottom: var(--space-16); }
.unauth-block p { font-size: 15px; color: var(--text-muted); margin-bottom: var(--space-24); }

/* Skeleton overrides for app pages */
.sk-row { display: flex; gap: var(--space-16); margin-bottom: var(--space-16); }
.sk-row .skeleton { height: 16px; flex: 1; }