/* Shared platform finish and page adapters. */
:root { --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --sidebar-item-font-size: 14px; --sidebar-item-font-weight: 550; }
body, body.dashboard-body { font-family: var(--ui-font); font-size: 14px; line-height: 1.55; }
body :is(input,select,textarea,button,label) { font-family: var(--ui-font); }
body :is(.dashboard-sidebar-shell,.backoffice-sidebar) .ui-sidebar-item,
body :is(.dashboard-sidebar-shell,.backoffice-sidebar) .ui-sidebar-item__label {
    font-family: var(--ui-font); font-size: 14px; font-weight: 550; line-height: 1.45; letter-spacing: 0; text-transform: none;
}
body :is(.dashboard-sidebar-shell,.backoffice-sidebar) .ui-sidebar-item { min-height: 46px; padding: 11px 14px; gap: 12px; border-radius: 12px; }
body :is(.dashboard-sidebar-shell,.backoffice-sidebar) .ui-sidebar-item__icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: 0 0 24px; background: transparent; border-radius: 0; }
body :is(.dashboard-sidebar-shell,.backoffice-sidebar) :is(.ui-sidebar-item__icon svg,.ui-icon) { width: 21px; height: 21px; flex-basis: 21px; stroke-width: 1.7; }
body :is(.sidebar-section-title,.sidebar-group-label,.backoffice-nav-heading) { margin: 22px 14px 10px; color: var(--text-muted); font-size: 11px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
body .ui-card.ui-card { border-color: var(--border); border-radius: 18px; box-shadow: 0 2px 6px color-mix(in srgb,var(--text-primary) 3%,transparent); }
body .topbar { min-width: 0; gap: 16px; padding: 16px 24px; }
body .topbar-left { min-width: 0; }
body .topbar-right { display: flex; align-items: center; gap: 14px; min-width: 0; margin-left: auto; }
body .topbar-user-chip { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 0; border: 0; background: transparent; }
body .topbar-user-meta { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
body .topbar-user-meta strong { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 650; }
body .topbar-user-meta span { display: block; color: var(--text-secondary); font-size: 12px; line-height: 1.4; }
body .topbar-greeting-block { display: none; }
body :is(.airtime-layout,.airtime-review-layout) { width: min(100%,720px); margin-inline: auto; }
body .airtime-form { display: flex; flex-direction: column; gap: 18px; }
body .airtime-form > * { min-width: 0; width: 100%; margin: 0; }
body .airtime-form .airtime-card { display: flex; flex-direction: column; gap: 24px; grid-column: auto; }
body .airtime-card :is(.airtime-field,.airtime-fieldset) { width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; }
body .airtime-card :is(label,legend) { margin-bottom: 10px; color: var(--text-primary); font-size: 13px; font-weight: 600; }
body .airtime-type-grid { display: flex; flex-direction: column; gap: 10px; }
body .airtime-type-option { display: flex; align-items: center; gap: 12px; min-height: 56px; margin: 0; padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); }
body .airtime-type-option:has(input:checked) { background: var(--primary-soft); border-color: var(--primary); }
body :is(.airtime-select-wrap,.airtime-amount-input) { display: flex; align-items: center; width: 100%; min-height: 52px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); }
body .airtime-select-wrap { position: relative; }
body .airtime-select-wrap select { width: 100%; min-width: 0; min-height: 52px; padding: 12px 28px 12px 0; border: 0; border-radius: 0; color: var(--text-primary); background: transparent; appearance: none; font-size: 16px; }
body .airtime-select-wrap > svg { position: absolute; right: 14px; width: 18px; height: 18px; pointer-events: none; }
body .airtime-amount-input input { min-width: 0; flex: 1 1 0; min-height: 52px; padding: 12px; border: 0; border-radius: 0; background: transparent; color: var(--text-primary); font-size: 16px; }
body .airtime-amount-input > :is(span,strong) { flex: 0 0 auto; font-size: 13px; }
body .airtime-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
body :is(.airtime-wallet,.data-wallet) { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-soft); }
body :is(.airtime-wallet,.data-wallet) > strong { margin-left: auto; color: var(--text-primary); font-size: 20px; font-weight: 650; overflow-wrap: anywhere; }
body :is(.airtime-wallet-icon,.data-wallet-icon) { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--primary); }
body :is(.airtime-wallet-icon,.data-wallet-icon) svg { width: 22px; height: 22px; transform: none; }
body :is(.airtime-review-grid,.airtime-review-main) { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
body :is(.airtime-review-summary,.airtime-review-card,.airtime-review-payment) { width: 100%; min-width: 0; margin: 0; }
body .airtime-review-payment { position: static; top: auto; background: var(--surface); color: var(--text-primary); }
body :is(.airtime-review-details,.airtime-review-payment-rows) { margin: 20px 0 0; }
body :is(.airtime-review-details,.airtime-review-payment-rows) > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; padding: 12px 0; }
body :is(.airtime-review-details,.airtime-review-payment-rows) dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }
body .airtime-review-payment-rows .airtime-review-total { align-items: center; margin: 14px 0 0; padding: 20px; border: 1px solid var(--primary); border-radius: 14px; background: var(--primary-soft); }
body .airtime-review-total dt { color: var(--text-primary); font-size: 14px; font-weight: 600; }
body .airtime-review-total dd { color: var(--primary); font-size: clamp(24px,4vw,30px); font-weight: 700; }
body .airtime-review-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
body .airtime-review-actions > *, body .airtime-review-actions .ui-button { width: 100%; margin: 0; }
body .data-network-options { display: flex; flex-wrap: wrap; gap: 10px; }
body .data-network-option { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; flex: 1 1 100px; min-height: 48px; margin: 0; padding: 12px 16px; gap: 8px; border: 1px solid var(--border-strong); border-radius: 12px; color: var(--text-primary); background: var(--surface); box-shadow: none; }
body .data-network-option strong { font-size: 13px; font-weight: 600; }
body .data-filter-options { display: flex; flex-wrap: wrap; gap: 8px; }
body .data-filter-button { min-height: 40px; padding: 9px 14px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text-primary); background: var(--surface); font-size: 12px; font-weight: 600; line-height: 1.4; }
body :is(.data-network-option,.data-filter-button,.airtime-preset).is-selected { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
body .data-plan-option { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; min-width: 0; padding: 18px; gap: 12px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface); color: var(--text-primary); text-align: left; }
body .data-plan-option .data-plan-top, body .data-plan-option .data-plan-bottom { display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
body .data-plan-option .data-plan-bottom > strong { order: initial; }
body .data-plan-description { display: block; width: 100%; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); color: var(--text-secondary); font-size: 11px; font-weight: 400; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; }
body .receipt-page .receipt-actions-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; }
body .receipt-page .receipt-actions-card :is(h2,p,button) { margin: 0; }
body .receipt-page .receipt-actions-card p { margin: 2px 0 8px; }
body .receipt-page .receipt-actions-card .receipt-action-button + .receipt-action-button { margin: 0; }
body .receipt-page .receipt-action-button { min-height: 44px; padding: 10px 14px; }
body .receipt-page .receipt-card { box-shadow: none; }
body .receipt-page .receipt-divider { margin: 22px 0; }
body .receipt-page .receipt-footer { margin-top: 24px; padding-top: 20px; }
body .backoffice-operation-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: var(--ui-card-padding); }
body .backoffice-operation-item { display: flex; align-items: center; min-width: 0; gap: 12px; margin: 0; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-soft); text-decoration: none; color: var(--text-primary); }
body .backoffice-operation-item:hover { background: var(--surface-hover); border-color: var(--primary); }
body .backoffice-operation-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; background: var(--surface); color: var(--primary); }
body .backoffice-operation-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
body .backoffice-operation-copy strong { font-size: 13px; font-weight: 600; }
body .backoffice-operation-copy > span { color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
body .backoffice-operation-arrow { margin-left: auto; }
@media (max-width: 900px) {
    body .ui-record-table tbody tr { gap: 12px 16px; padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
    body .ui-record-table tbody tr td { font-family: var(--ui-font); font-size: 13px; line-height: 1.5; }
    body .ui-record-table td::before { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
}
@media (max-width: 600px) {
    body .ui-card.ui-card { border-radius: 14px; }
    body .topbar { padding: 12px 16px; }
    body .topbar-right { gap: 10px; }
    body .topbar-user-chip .user-avatar { display: none; }
    body .topbar-user-meta { display: flex; }
    body .topbar-user-meta strong { max-width: 130px; font-size: 13px; }
    body .topbar-user-meta span { font-size: 11px; }
    body .backoffice-operation-list { grid-template-columns: minmax(0,1fr); }
    body .data-plan-grid { grid-template-columns: minmax(0,1fr); }
    body :is(.airtime-wallet,.data-wallet) { padding: 16px; }
}
@media print { body .receipt-page .receipt-actions-card { display: none !important; } }
body .wallet-label { display: inline-flex; align-items: center; gap: 8px; }
body .wallet-label .ui-icon { width: 20px; height: 20px; flex-basis: 20px; }
:root { --ui-list-padding: 18px; --ui-list-radius: 14px; }
body .ui-list-card { min-width: 0; padding: var(--ui-list-padding); border: 1px solid var(--border); border-radius: var(--ui-list-radius); background: var(--surface); }
body .ui-record-table { font-family: var(--ui-font); color: var(--text-primary); }
@media (min-width: 901px) {
    body .ui-record-container { border-radius: var(--ui-list-radius); }
    body .ui-record-table th { padding: 14px 18px; background: var(--surface-soft); color: var(--text-secondary); font-size: 12px; font-weight: 600; line-height: 1.5; }
    body .ui-record-table td { padding: 16px 18px; border-bottom: 1px solid var(--border); color: var(--text-primary); font-size: 13px; line-height: 1.5; }
    body .ui-record-table tbody tr:hover td { background: var(--surface-hover); }
}
@media (max-width: 900px) {
    body .ui-record-table tbody tr { padding: var(--ui-list-padding); border-radius: var(--ui-list-radius); }
}

/* Keep table actions readable even when the table has many columns. */
body :is(.dashboard-app, .backoffice-app) table .ui-button {
    flex-shrink: 0;
    min-width: max-content;
    max-width: none;
    white-space: nowrap !important;
    overflow-wrap: normal;
    word-break: normal;
}
@media (min-width: 901px) {
    body .ui-record-table { table-layout: auto; }
    body :is(.ui-record-table, .backoffice-table) :is(.ui-record-actions, .backoffice-table-action-cell, td[data-label="Actions"]) {
        width: 1%;
        min-width: 104px;
        white-space: nowrap;
        vertical-align: middle;
        text-align: right;
    }
    body .ui-record-actions > :is(div, form) { min-width: max-content; }
}

/* Analytics typography. History owns its responsive layout in history.css. */
body .sales-analytics-page { font-size: 16px; line-height: 1.6; }
body .sales-analytics-page .ui-record-table :is(td,th) { font-size: 14px; }
body .sales-analytics-page .ui-segmented__option { font-size: 14px; }

body .developer-api-quickstart { margin-top: 24px; font-size: 15px; }
body .developer-api-quickstart p { line-height: 1.7; color: var(--text-secondary); }
body .developer-api-quickstart dl > div { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 10px 0; }
body .developer-api-quickstart dd { margin: 0; overflow-wrap: anywhere; }
body .developer-api-quickstart pre { padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }