/* Admin -> Licences (admin_licences.html, admin_licence_edit.html) only.
   Reuses the Overview tile look (.p-ov-kpi) with its colour tokens; adds the
   settings groups, the payment ledger and the licence timeline. Hovers change
   colour only, never position (no movement on hover). */
body.ui-premium .lic-page {
    --ov-ink: #f0f6fc; --ov-muted: #8b949e; --ov-line: #2b323d; --ov-link: #58a6ff; --ov-warn: #e3b341;
    --lic-ok: #3fb950; --lic-bad: #f85149; --lic-info: #58a6ff; --lic-warn: #e3b341; --lic-dim: #6e7681;
}
body.ui-premium .lic-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0.25rem 0 0.9rem; }
body.ui-premium .lic-head__title { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--ov-ink); }
body.ui-premium .lic-head__actions { margin-left: auto; display: flex; gap: 0.5rem; }
body.ui-premium .lic-kpis { margin-bottom: 0.9rem; }
body.ui-premium .lic-kpis .p-ov-kpi__value small { font-size: 0.9rem; font-weight: 600; color: var(--ov-muted); }
body.ui-premium .lic-meter { display: block; height: 4px; border-radius: 2px; background: #232a34; overflow: hidden; margin: 0.3rem 0 0.35rem; }
body.ui-premium .lic-meter > span { display: block; height: 100%; background: var(--lic-info); }
body.ui-premium .lic-meter--full > span { background: var(--lic-warn); }

/* Settings form: titled groups instead of one long grid. */
body.ui-premium .lic-group + .lic-group { border-top: 1px solid var(--ov-line); margin-top: 0.85rem; padding-top: 0.85rem; }
body.ui-premium .lic-group__title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ov-muted); margin-bottom: 0.5rem; }
body.ui-premium .lic-group .form-label { margin-bottom: 0.2rem; color: #c9d1d9; }

/* Card on file */
body.ui-premium .lic-card { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.85rem; border: 1px solid var(--ov-line); border-radius: 0.5rem; background: #161b22; }
body.ui-premium .lic-card__icon { font-size: 1.4rem; color: var(--lic-info); }
body.ui-premium .lic-card--none .lic-card__icon { color: var(--lic-dim); }
body.ui-premium .lic-card__main { min-width: 0; }
body.ui-premium .lic-card__title { font-weight: 600; color: var(--ov-ink); }
body.ui-premium .lic-card__sub { font-size: 0.8rem; color: var(--ov-muted); overflow-wrap: anywhere; }

/* Payment ledger */
body.ui-premium .lic-ledger td, body.ui-premium .lic-ledger th { white-space: nowrap; }
body.ui-premium .lic-ledger td.lic-ledger__what { white-space: normal; }
body.ui-premium .lic-ledger tfoot td { border-top: 1px solid var(--ov-line); font-weight: 600; color: var(--ov-ink); }
body.ui-premium .lic-amount--muted { color: var(--ov-muted); text-decoration: line-through; }

/* Timeline */
body.ui-premium .lic-tl { list-style: none; margin: 0; padding: 0.25rem 0 0; position: relative; }
body.ui-premium .lic-tl::before { content: ""; position: absolute; left: 0.8rem; top: 0.5rem; bottom: 0.5rem; width: 2px; background: var(--ov-line); }
body.ui-premium .lic-tl__item { position: relative; display: grid; grid-template-columns: 1.6rem 1fr auto; gap: 0 0.65rem; padding: 0.35rem 0; }
body.ui-premium .lic-tl__dot { position: relative; z-index: 1; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #1a2029; border: 2px solid var(--lic-dim); color: var(--lic-dim); font-size: 0.8rem; }
body.ui-premium .lic-tl__item--success .lic-tl__dot { border-color: var(--lic-ok); color: var(--lic-ok); }
body.ui-premium .lic-tl__item--danger .lic-tl__dot { border-color: var(--lic-bad); color: var(--lic-bad); }
body.ui-premium .lic-tl__item--warning .lic-tl__dot { border-color: var(--lic-warn); color: var(--lic-warn); }
body.ui-premium .lic-tl__item--info .lic-tl__dot { border-color: var(--lic-info); color: var(--lic-info); }
body.ui-premium .lic-tl__title { color: var(--ov-ink); font-weight: 600; font-size: 0.86rem; line-height: 1.6rem; }
body.ui-premium .lic-tl__detail { color: var(--ov-muted); font-size: 0.8rem; overflow-wrap: anywhere; }
body.ui-premium .lic-tl__when { color: var(--ov-muted); font-size: 0.78rem; text-align: right; line-height: 1.6rem; white-space: nowrap; }
body.ui-premium .lic-tl__who { display: block; line-height: 1.2; }
body.ui-premium .lic-tl__item--muted .lic-tl__title { font-weight: 500; color: #c9d1d9; }

/* Danger zone */
body.ui-premium .lic-danger summary { cursor: pointer; color: var(--ov-muted); font-weight: 600; list-style: none; }
body.ui-premium .lic-danger summary::-webkit-details-marker { display: none; }
body.ui-premium .lic-danger summary:hover { color: var(--ov-ink); }
body.ui-premium .lic-danger[open] summary { margin-bottom: 0.75rem; }
body.ui-premium .lic-danger__row + .lic-danger__row { border-top: 1px solid var(--ov-line); margin-top: 0.75rem; padding-top: 0.75rem; }

body.ui-premium .lic-mailboxes td:first-child, body.ui-premium .lic-mailboxes td.lic-mail { white-space: nowrap; }
@media (max-width: 991.98px) { body.ui-premium .lic-tl__item { grid-template-columns: 1.6rem 1fr; } body.ui-premium .lic-tl__when { grid-column: 2; text-align: left; } }

/* Paystack hand-off and return (paystack_handoff.html, paystack_outcome.html):
   the sign-in page's centred card. Selectors out-rank ui-premium's heading pass. */
.pay-transit { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.pay-transit__shell { width: 100%; max-width: 24rem; text-align: center; }
.pay-transit__logo { display: block; width: 54px; height: 64px; box-sizing: content-box; margin: 0 auto 1.25rem; filter: drop-shadow(0 0 12px rgba(42, 150, 251, 0.8)) drop-shadow(0 0 25px rgba(42, 150, 251, 0.5)); }
.pay-transit .card-body { padding: 1.75rem 1.6rem 1.5rem; }
.pay-transit__spin { width: 2rem; height: 2rem; margin-bottom: 1rem; }
body.ui-premium main .pay-transit .card-body h1.pay-transit__title { font-size: 1.25rem !important; font-weight: 700 !important; margin: 0 0 0.4rem !important; }
.pay-transit__line { color: var(--ui-text-dim, #8b949e); margin: 0 0 1.1rem; }
.pay-transit__link { font-size: 0.85rem; }
.pay-transit__foot { color: var(--ui-text-dim, #8b949e); font-size: 0.78rem; margin: 1rem 0 0; }