/* Shared application foundation. Loaded after page CSS in both shells. */
:root {
    --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --ui-radius: 16px;
    --ui-control-radius: 12px;
    --ui-gap: 16px;
    --bo-font-xs: 11px;
    --bo-font-sm: 12px;
    --bo-font-md: 14px;
    --bo-font-lg: 15px;
    --bo-radius-lg: var(--ui-radius);
    --bo-control-height: 44px;
}
html[data-theme="dark"] {
    --border: color-mix(in srgb, var(--text-primary) 16%, var(--surface));
    --border-strong: color-mix(in srgb, var(--text-primary) 26%, var(--surface));
    --primary-strong: var(--primary);
    --danger: color-mix(in srgb, var(--danger-text) 65%, var(--text-primary));
    --danger-hover: color-mix(in srgb, var(--danger-text) 55%, var(--text-primary));
}
html { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body, body.dashboard-body { font-family: var(--ui-font); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
body .ui-surface { border-radius: var(--ui-radius); border-color: var(--border); box-shadow: 0 1px 2px color-mix(in srgb, var(--text-primary) 4%, transparent); }
body :is(button, input, select, textarea, h1, h2, h3, h4, p, a, label, span, strong, small, td, th, dt, dd) { font-family: var(--ui-font); }
:is(.dashboard-app, .backoffice-app) { color: var(--text-primary); }
:is(.dashboard-content-inner, .backoffice-content) { min-width: 0; }
:is(.dashboard-app, .backoffice-app) h1 { font-size: clamp(24px, 2.5vw, 32px); line-height: 1.2; letter-spacing: -.035em; font-weight: 700; }
:is(.dashboard-app, .backoffice-app) h2 { font-size: 17px; line-height: 1.35; letter-spacing: -.015em; font-weight: 650; }
:is(.dashboard-app, .backoffice-app) h3 { font-size: 15px; line-height: 1.4; font-weight: 650; }
:is(.dashboard-app, .backoffice-app) :is(.backoffice-panel-header, .backoffice-page-header) p { font-size: 14px; line-height: 1.55; }
:is(.backoffice-panel, .backoffice-stat-card, .backoffice-summary-card, .dashboard-card, .airtime-card, .data-purchase-card, .data-review-card, .receipt-card) {
    border: 1px solid var(--border);
    border-radius: var(--ui-radius);
    background: var(--surface);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--text-primary) 4%, transparent);
}
.backoffice-panel + .backoffice-panel { margin-top: var(--ui-gap); }
.backoffice-panel-header { padding: 20px; }
.backoffice-panel-header :is(h2, p) { margin: 4px 0 0; }
body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="file"]), select, textarea) {
    max-width: 100%; min-width: 0; font-family: var(--ui-font); border-radius: var(--ui-control-radius);
}
:is(.backoffice-input, .backoffice-select, .backoffice-textarea) { font-size: 14px; line-height: 1.5; }
body :is(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
body :is(.backoffice-status-badge, .backoffice-badge) { width: fit-content; max-width: 100%; white-space: normal; }
.ui-action-group { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ui-action-group > form { margin: 0; }
.ui-mobile-nav { display: none; }

/* The same form language for airtime and data. */
body :is(.airtime-layout, .data-purchase-layout) { width: min(100%, 760px); margin-inline: auto; }
body :is(.airtime-form, .data-purchase-form) { display: grid; gap: 16px; }
body :is(.airtime-card, .data-purchase-card) { padding: 24px; margin: 0; }
body :is(.airtime-card-heading, .data-purchase-card-heading) { margin-bottom: 20px; gap: 12px; }
body :is(.airtime-step, .data-purchase-step) { width: 28px; height: 28px; min-width: 28px; border: 0; border-radius: 9px; background: var(--surface-muted); color: var(--text-secondary); font-size: 12px; box-shadow: none; }
body :is(.airtime-card-heading, .data-purchase-card-heading) p { font-size: 13px; color: var(--text-muted); }
body :is(.airtime-field > label, .airtime-fieldset > legend, .data-purchase-recipient > label) { font-size: 13px; font-weight: 600; }
body :is(.airtime-presets, .data-network-options) { gap: 8px; }
body :is(.airtime-preset, .data-filter-button) { min-height: 44px; padding: 10px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; box-shadow: none; transform: none; }
body :is(.airtime-preset, .data-filter-button, .data-network-option, .data-plan-option) { color: var(--text-primary); border: 1px solid var(--border); background: var(--surface); }
body :is(.airtime-preset, .data-filter-button, .data-network-option, .data-plan-option).is-selected { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); transform: none; }
body .data-network-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
body .data-network-option { display: flex; flex-direction: column; min-height: 48px; padding: 12px 4px; gap: 6px; border-radius: 12px; box-shadow: none; transform: none; }
body .data-network-mark { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-muted); color: var(--text-secondary); font-size: 12px; }
body .data-network-option strong { font-size: 12px; font-weight: 600; white-space: normal; overflow: visible; text-overflow: clip; }
body .data-network-mark { display: none; }
body .data-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body .data-plan-option { min-width: 0; min-height: 92px; padding: 16px; border-radius: 12px; box-shadow: none; transform: none; }
body .data-plan-top > strong { font-size: 18px; font-weight: 650; letter-spacing: -.025em; }
body .data-plan-top > span { font-size: 11px; }
body .data-plan-bottom { margin-top: 10px; gap: 8px; border: 0; padding-top: 0; }
body .data-plan-bottom > strong { font-size: 15px; font-weight: 650; }
body .data-plan-bottom > span { font-size: 12px; }
body .data-filter-options { display: flex; flex-wrap: wrap; gap: 8px; overflow: visible; }
body :is(.airtime-wallet, .data-wallet) { padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); box-shadow: none; }
body :is(.airtime-wallet, .data-wallet) > strong { font-size: 18px; font-weight: 650; }
body :is(.airtime-wallet-icon, .data-wallet-icon) { width: 36px; height: 36px; background: var(--surface-muted); color: var(--text-secondary); border-radius: 10px; }
body :is(.airtime-security, .data-purchase-security) { font-size: 12px; margin: 0; }
body [hidden] { display: none !important; }

@media (max-width: 900px) {
    .backoffice-sidebar:not(.is-open) { box-shadow: none; }
    :is(.backoffice-content, .dashboard-content-inner) { padding: 20px; }
    .ui-record-table { width: 100% !important; min-width: 0 !important; display: block !important; }
    .ui-record-table thead { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%); }
    .ui-record-table tbody { display: grid !important; gap: 12px; width: 100%; }
    .ui-record-table tbody tr { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; width: 100% !important; min-width: 0 !important; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: none; }
    .ui-record-table tbody tr td { display: flex !important; flex-direction: column; align-items: flex-start; gap: 5px; width: auto !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; white-space: normal !important; text-align: left !important; overflow-wrap: anywhere; font-size: 13px; }
    .ui-record-table tbody tr td::before { content: attr(data-label); display: block; color: var(--text-muted); font-size: 11px; font-weight: 600; letter-spacing: .025em; line-height: 1.4; text-transform: none; }
    .ui-record-table tbody tr td:first-child { grid-column: 1 / -1; padding-bottom: 12px !important; border-bottom: 1px solid var(--border) !important; }
    .ui-record-table tbody tr td.ui-record-actions, .ui-record-table tbody tr td[colspan] { grid-column: 1 / -1; }
    .ui-record-table tbody tr td.ui-record-actions { border-top: 1px solid var(--border) !important; padding-top: 12px !important; }
    .ui-record-table td.ui-record-actions > div { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
    .ui-record-table td.ui-record-actions form { margin: 0; }
    .ui-record-table td[data-label=""]::before { display: none; }
    .ui-record-table colgroup { display: none; }
    .ui-record-container { overflow: visible !important; min-width: 0 !important; width: 100%; }
}
@media (max-width: 600px) {
    .dashboard-sidebar-shell:not(.is-open) { box-shadow: none; }
    body .backoffice-catalogue-network-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    body .backoffice-stat-card { padding: 16px; min-height: 100px; }
    .dashboard-main > .site-footer { display: none; }
    body.sidebar-open .ui-mobile-nav { visibility: hidden; }
    body.backoffice-sidebar-open .ui-mobile-nav { visibility: hidden; }
    .backoffice-main { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
    .ui-mobile-nav.ui-mobile-nav--office { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
    :is(.dashboard-content, .backoffice-content) { padding: 16px; }
    .dashboard-content-inner { padding: 0; }
    .dashboard-main { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
    :is(.dashboard-app, .backoffice-app) h1 { font-size: 25px; }
    :is(.backoffice-topbar, .topbar) { min-height: 60px; padding-inline: 16px; background: var(--surface); }
    :is(.backoffice-panel-header, .backoffice-panel-body, .backoffice-panel-footer) { padding: 16px; }
    :is(.backoffice-filter-bar, .backoffice-form-grid) { grid-template-columns: minmax(0, 1fr); }
    :is(.backoffice-stats-grid, .backoffice-summary-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]), select, textarea) { font-size: 16px; }
    body :is(.airtime-page, .data-purchase-page) { padding: 0; }
    body :is(.airtime-card, .data-purchase-card) { padding: 16px; border-radius: 14px; }
    body :is(.airtime-header, .data-purchase-header) { margin-bottom: 20px; }
    body :is(.airtime-header, .data-purchase-header) p { font-size: 13px; }
    body :is(.airtime-type-grid, .data-plan-grid) { grid-template-columns: minmax(0, 1fr); }
    body .data-plan-option { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 80px; gap: 12px; }
    body .data-plan-top, body .data-plan-bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; }
    body .data-plan-bottom { align-items: flex-end; }
    body .data-plan-bottom > strong { order: -1; }
    body .data-purchase-plans { padding: 16px; }
    body .ui-action-group { width: 100%; }
    body .ui-action-group > :is(a, button, form) { flex: 1 1 auto; }
    body .ui-action-group form .ui-button { width: 100%; }
    .ui-mobile-nav { position: fixed; inset: auto 0 0; z-index: 95; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); }
    .ui-mobile-nav a { display: grid; justify-items: center; gap: 4px; min-height: 48px; padding: 5px; color: var(--text-muted); text-decoration: none; border-radius: 12px; font-size: 11px; font-weight: 600; }
    .ui-mobile-nav a[aria-current="page"] { color: var(--primary); background: var(--primary-soft); }
    .ui-mobile-nav svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
}
@media print { .ui-mobile-nav { display: none !important; } .dashboard-main { padding-bottom: 0; } }