/* Admin panel styles added in phase 68: the always-visible payment section, the
   usage charts, and the backup panel now rendered inline instead of in a modal.

   Loaded AFTER styles.css, so these rules extend or override the .admin*,
   .billing*, and .sy-* classes defined there. This lives in its own file for a
   hard reason, not tidiness: the CSP is `style-src 'self'`, which forbids inline
   <style> blocks and inline style attributes, so every rule the panel needs has
   to be reachable from a stylesheet the page already trusts. Nothing here may
   depend on a remote font or image either (`default-src 'none'`). */

.admin-h3 {
  font-family: var(--serif); font-size: 15px; color: var(--navy);
  margin: 22px 0 10px;
}

/* ---- payment and credit ---------------------------------------------------
   The section is on screen at all times now, so the resting state has to look
   calm. Only a real problem gets the warning treatment. */
.billing-card-line {
  margin: 12px 0 0; font-size: 14px; font-weight: 600; color: var(--navy);
}
.billing-msg { margin: 10px 0 0; line-height: 1.6; }
.billing-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

.admin-warn {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 10px;
  border: 1px solid #f0d9ae; background: #fdf6e9; color: #8a5a08;
  font-size: 13.5px; line-height: 1.6;
}
.admin-warn.danger {
  border-color: #f0c2bd; background: #fdeeec; color: var(--danger);
}

/* styles.css colours "blocked" and "active"; these are the phase 68 states. */
.billing-status-val.credit { color: var(--navy); }
.billing-status-val.past_due { color: #b26a00; }

/* ---- usage charts ---------------------------------------------------------
   The SVG is hand-rolled by usagechart.js and returned without a fixed size, so
   it is scaled here by its container rather than by an inline attribute. */
.admin-charts { display: flex; flex-direction: column; gap: 18px; }
.admin-chart {
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel-2); padding: 12px 12px 10px; overflow-x: auto;
}
.admin-chart svg { display: block; width: 100%; height: auto; max-width: 100%; }
.admin-chart-total {
  margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--navy);
}
.admin-usage-table { margin-top: 4px; }

/* ---- backup and sync, inline ----------------------------------------------
   Same markup as the modal. .sy-body brings the typography and the vertical
   rhythm with it; only the overlay's own padding and scrolling are undone. */
.admin-sync { padding: 0; overflow: visible; }
.admin-sync .sy-status { margin-top: 0; }

/* ---- users (admin tiers, 2026-08-11) ------------------------------------ */
.admin-users .admin-table td { vertical-align: middle; }
.admin-user-actions { display: flex; gap: 8px; justify-content: flex-end; }
.btn-small {
  padding: 4px 10px; font-size: 13px; cursor: pointer; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel-2);
  color: var(--navy, #23406e); font-weight: 600;
}
.btn-small:hover { background: var(--panel, #fff); }
.btn-small.danger { color: #8f2727; border-color: rgba(143,39,39,.45); }
.btn-small.danger:hover { background: rgba(143,39,39,.08); }
.admin-user-status { font-size: 13px; font-weight: 600; }
.admin-user-status.active { color: #1d6b3a; }
.admin-user-status.paused { color: #9a6a00; }
.admin-user-status.invited { color: var(--navy, #23406e); }
.admin-user-status.disabled { color: #8f2727; }
.admin-invite { display: flex; gap: 10px; align-items: flex-end; margin-top: 14px; }
.admin-invite .field { flex: 1; margin: 0; }

@media (max-width: 720px) {
  .billing-actions .btn { width: 100%; }
  .admin-invite { flex-direction: column; align-items: stretch; }
}