/* =====================================================================
 *  OptionPay — painel novo (cliente)
 *  Visual: fundo preto, bordas cinza translúcidas, título em degradê.
 *  Tokens e componentes comuns; a casca (menu lateral/dock) e o dashboard ficam em novo-dash.css.
 * ===================================================================== */

:root,
:root[data-theme="dark"] {
  --np-bg:            #000000;
  --np-surface:       rgba(10, 10, 11, 0.88);
  --np-surface-2:     #0e0e10;
  --np-surface-3:     #18181b;
  --np-border:        rgba(39, 39, 42, 0.75);
  --np-border-strong: #3f3f46;
  --np-text:          #ffffff;
  --np-text-2:        rgba(255, 255, 255, 0.62);
  --np-muted:         #9ca3af;
  --np-dim:           #868c97;
  --np-hover:         rgba(39, 39, 42, 0.55);
  --np-nav-bg:        rgba(0, 0, 0, 0.8);
  --np-grid:          rgba(255, 255, 255, 0.07);
  --np-baseline:      rgba(255, 255, 255, 0.18);
  --np-shadow:        0 25px 50px -12px rgba(0, 0, 0, 0.75);
  --np-headline:      linear-gradient(to bottom, #ffffff, #ffffff, rgba(255, 255, 255, 0.6));
  --np-btn-grad:      linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));
  --np-btn-grad-ink:  #000000;
  --np-btn-default:   #ffffff;
  --np-btn-default-h: #f3f4f6;
  --np-btn-default-ink: #000000;
  --np-btn-sec:       #1f2937;
  --np-btn-sec-h:     #374151;
  --np-btn-sec-ink:   #ffffff;
  /* séries do gráfico (validadas: dataviz validate_palette, superfície escura) */
  --np-in:            #16A34A;
  --np-out:           #3B82F6;
  --np-in-tint:       rgba(22, 163, 74, 0.16);
  --np-out-tint:      rgba(59, 130, 246, 0.16);
  --np-in-ink:        #4ade80;
  --np-out-ink:       #93c5fd;
  /* status */
  --np-ok:            #22c55e;
  --np-warn:          #f59e0b;
  --np-bad:           #ef4444;
  --np-warn-bg:       rgba(245, 158, 11, 0.07);
  --np-warn-border:   rgba(245, 158, 11, 0.32);
  --np-glow-a:        rgba(255, 255, 255, 0.14);
  --np-glow-b:        rgba(22, 163, 74, 0.22);
  --np-glow-c:        rgba(200, 16, 46, 0.16);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --np-bg:            #fafafa;
  --np-surface:       rgba(255, 255, 255, 0.9);
  --np-surface-2:     #ffffff;
  --np-surface-3:     #f4f4f5;
  --np-border:        #e4e4e7;
  --np-border-strong: #d4d4d8;
  --np-text:          #09090b;
  --np-text-2:        rgba(9, 9, 11, 0.62);
  --np-muted:         #52525b;
  --np-dim:           #71717a;
  --np-hover:         #f4f4f5;
  --np-nav-bg:        rgba(250, 250, 250, 0.8);
  --np-grid:          rgba(9, 9, 11, 0.07);
  --np-baseline:      rgba(9, 9, 11, 0.2);
  --np-shadow:        0 25px 50px -12px rgba(15, 23, 42, 0.18);
  --np-headline:      linear-gradient(to bottom, #09090b, #09090b, rgba(9, 9, 11, 0.55));
  --np-btn-grad:      linear-gradient(to bottom, #18181b, #18181b, rgba(24, 24, 27, 0.78));
  --np-btn-grad-ink:  #ffffff;
  --np-btn-default:   #09090b;
  --np-btn-default-h: #27272a;
  --np-btn-default-ink: #ffffff;
  --np-btn-sec:       #f4f4f5;
  --np-btn-sec-h:     #e4e4e7;
  --np-btn-sec-ink:   #09090b;
  /* séries do gráfico (validadas na superfície clara) */
  --np-in:            #16A34A;
  --np-out:           #2563EB;
  --np-in-tint:       rgba(22, 163, 74, 0.12);
  --np-out-tint:      rgba(37, 99, 235, 0.12);
  --np-in-ink:        #15803d;
  --np-out-ink:       #1d4ed8;
  --np-ok:            #16a34a;
  --np-warn:          #d97706;
  --np-bad:           #dc2626;
  --np-warn-bg:       rgba(245, 158, 11, 0.08);
  --np-warn-border:   rgba(217, 119, 6, 0.35);
  --np-glow-a:        rgba(24, 24, 27, 0.06);
  --np-glow-b:        rgba(22, 163, 74, 0.14);
  --np-glow-c:        rgba(200, 16, 46, 0.09);
  color-scheme: light;
}

/* ---------- base ---------- */
body.np-body {
  margin: 0;
  min-height: 100vh;
  background: var(--np-bg);
  color: var(--np-text);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body.np-body a { color: inherit; text-decoration: none; }
body.np-body a:hover { color: inherit; }
body.np-body :focus-visible { outline: 2px solid var(--np-text-2); outline-offset: 2px; border-radius: 6px; }
.np-ic { display: inline-block; flex: none; vertical-align: middle; }
.np-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.np-skip { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 8px 14px; border-radius: 8px; background: var(--np-btn-default); color: var(--np-btn-default-ink) !important; font-size: 13px; }
.np-skip:focus { top: 12px; }
.np-brand-red { color: #E0252E; }
.np-brand-green { color: #2EB35E; }
[data-theme="light"] .np-brand-red { color: #C8102E; }
[data-theme="light"] .np-brand-green { color: #16A34A; }

/* ---------- botões ---------- */
.np-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  white-space: nowrap; border-radius: 8px; border: 0; cursor: pointer;
  font-family: inherit; font-weight: 500; line-height: 1;
  transition: background-color .15s, color .15s, transform .15s, box-shadow .15s;
}
.np-btn--xs { height: 30px; padding: 0 10px; font-size: 12px; }
.np-btn--sm { height: 38px; padding: 0 16px; font-size: 14px; }
.np-btn--lg { height: 48px; padding: 0 28px; font-size: 15px; border-radius: 10px; }
.np-btn:not(.np-btn--xs):not(.np-btn--sm):not(.np-btn--lg) { height: 42px; padding: 0 18px; font-size: 14px; }
.np-btn--default { background: var(--np-btn-default); color: var(--np-btn-default-ink) !important; }
.np-btn--default:hover { background: var(--np-btn-default-h); }
.np-btn--secondary { background: var(--np-btn-sec); color: var(--np-btn-sec-ink) !important; }
.np-btn--secondary:hover { background: var(--np-btn-sec-h); }
.np-btn--ghost { background: transparent; color: var(--np-text) !important; }
.np-btn--ghost:hover { background: var(--np-hover); }
.np-btn--gradient { background: var(--np-btn-grad); color: var(--np-btn-grad-ink) !important; box-shadow: 0 8px 30px -10px rgba(255, 255, 255, .35); }
[data-theme="light"] .np-btn--gradient { box-shadow: 0 8px 24px -10px rgba(9, 9, 11, .45); }
.np-btn--gradient:hover { transform: scale(1.05); }
.np-btn--gradient:active { transform: scale(.95); }

/* botão de tema (sol/lua) */
.np-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none;
  border: 1px solid var(--np-border); border-radius: 999px; background: transparent; color: var(--np-text-2); cursor: pointer;
  transition: color .15s, background-color .15s, border-color .15s;
}
.np-icon-btn:hover { color: var(--np-text); background: var(--np-hover); border-color: var(--np-border-strong); }
.np-icon-btn span { display: inline-flex; }

/* escolha explícita: Claro | Escuro */
.np-theme-seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--np-border); border-radius: 10px; background: var(--np-surface-3); }
.np-theme-seg button {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 7px;
  background: transparent; color: var(--np-text-2); font: 500 13px/1 'Poppins', sans-serif; cursor: pointer; transition: background-color .15s, color .15s;
}
.np-theme-seg button:hover { color: var(--np-text); }
.np-theme-seg button[aria-pressed="true"] { background: var(--np-surface-2); color: var(--np-text); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.np-menu__theme { padding: 8px 10px; }

/* avatar + menu da conta */
.np-menu { position: relative; }
.np-avatar {
  width: 38px; height: 38px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--np-border-strong); background: var(--np-surface-3); color: var(--np-text);
  font: 600 13px/1 'Poppins', sans-serif; letter-spacing: .02em;
  display: inline-flex; align-items: center; justify-content: center;
}
.np-avatar:hover { border-color: var(--np-text-2); }
.np-menu__panel a,
.np-menu__panel button,
.np-menu__panel #opPushBtn {
  display: flex; align-items: center; gap: 10px; width: 100%; height: auto; padding: 9px 10px;
  border: 0; border-radius: 8px; background: transparent; box-shadow: none;
  color: var(--np-text-2) !important; font: 400 14px/1.3 'Poppins', sans-serif; text-align: left; cursor: pointer;
}
.np-menu__panel a:hover,
.np-menu__panel button:hover,
.np-menu__panel #opPushBtn:hover { background: var(--np-hover); color: var(--np-text) !important; }
.np-menu__panel .np-menu__danger { color: #f87171 !important; }
[data-theme="light"] .np-menu__panel .np-menu__danger { color: #dc2626 !important; }
.np-theme-toggle span { display: inline-flex; align-items: center; gap: 10px; }
.np-when-light { display: none !important; }
[data-theme="light"] .np-when-light { display: inline-flex !important; }
[data-theme="light"] .np-when-dark { display: none !important; }

.np-callout {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px;
  border: 1px solid var(--np-warn-border); border-radius: 12px; background: var(--np-warn-bg);
}
.np-callout > .np-ic { color: var(--np-warn); }
.np-callout > div { flex: 1 1 200px; min-width: 0; }
.np-callout > .np-btn { margin-left: auto; }
.np-callout strong { display: block; font-size: 14px; font-weight: 600; }
.np-callout p { margin: 2px 0 0; font-size: 13px; color: var(--np-muted); }

.np-card {
  position: relative; min-width: 0; padding: 16px;
  border: 1px solid var(--np-border); border-radius: 14px; background: var(--np-surface-2);
}
@media (min-width: 720px) { .np-card { padding: 24px; } }
.np-card__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; margin-bottom: 16px; }
.np-card__title { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.np-card__sub { margin: 2px 0 0; font-size: 13px; color: var(--np-muted); }

/* ---------- gráfico ---------- */
.np-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--np-text-2); }
.np-legend li { display: inline-flex; align-items: center; gap: 8px; }
.np-legend strong { color: var(--np-text); font-weight: 600; }
.np-legend__key { width: 10px; height: 10px; border-radius: 3px; }
.np-legend__key--in { background: var(--np-in); }
.np-legend__key--out { background: var(--np-out); }
.np-chart__plot { position: relative; height: 240px; }
.np-chart__plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.np-chart__plot:focus-visible { outline-offset: 4px; }
.np-chart__empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-size: 14px; color: var(--np-muted); }
.np-grid { stroke: var(--np-grid); stroke-width: 1; shape-rendering: crispEdges; }
.np-baseline { stroke: var(--np-baseline); stroke-width: 1; shape-rendering: crispEdges; }
.np-axis { fill: var(--np-dim); font: 400 12px 'Poppins', sans-serif; font-variant-numeric: tabular-nums; }
.np-axis--today { fill: var(--np-text-2); font-weight: 500; }
.np-value-label { fill: var(--np-text-2); font: 500 12px 'Poppins', sans-serif; }
.np-bar--in { fill: var(--np-in); }
.np-bar--out { fill: var(--np-out); }
.np-day { transition: opacity .12s; }
.np-chart.is-hovering .np-day:not(.is-active) { opacity: .35; }
.np-day__hit { fill: transparent; cursor: default; }
.np-day.is-active .np-day__hit { fill: var(--np-hover); }
.np-tooltip {
  position: absolute; z-index: 5; min-width: 190px; padding: 10px 12px; pointer-events: none;
  border: 1px solid var(--np-border-strong); border-radius: 10px; background: var(--np-surface-3);
  box-shadow: var(--np-shadow); font-size: 12px; color: var(--np-text-2);
}
.np-tooltip[hidden] { display: none; }
.np-tooltip__title { margin-bottom: 6px; color: var(--np-text); font-weight: 600; }
.np-tooltip__row { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 8px; padding: 2px 0; }
.np-tooltip__row b { color: var(--np-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.np-tooltip__row small { color: var(--np-dim); }
.np-chart__table { margin-top: 12px; }
.np-chart__table summary { width: max-content; font-size: 12px; color: var(--np-muted); cursor: pointer; }
.np-chart__table summary:hover { color: var(--np-text); }
.np-chart__table .np-table-wrap { margin-top: 10px; max-height: 280px; overflow: auto; }

/* ---------- tabelas ---------- */
.np-table-wrap { position: relative; overflow-x: auto; }
.np-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.np-table th { padding: 10px 12px; text-align: left; font-size: 12px; font-weight: 500; color: var(--np-muted); border-bottom: 1px solid var(--np-border); white-space: nowrap; }
.np-table td { padding: 13px 12px; border-bottom: 1px solid var(--np-border); vertical-align: middle; }
.np-table tbody tr:last-child td { border-bottom: 0; }
.np-table tbody tr:hover td { background: rgba(127, 127, 127, .04); }
.np-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.np-table--compact td { padding: 8px 12px; font-size: 13px; }

.np-tx__type { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; white-space: nowrap; font-weight: 500; }
.np-tx__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.np-tx__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; flex: none; }
.np-tx__icon--in { background: var(--np-in-tint); color: var(--np-in-ink); }
.np-tx__icon--out { background: var(--np-out-tint); color: var(--np-out-ink); }
.np-tx__details { max-width: 280px; color: var(--np-text-2); font-size: 13px; }
.np-tx__details > span:first-child { display: block; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-tx__details code { display: block; margin-top: 2px; font: 400 11px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--np-dim); }
.np-tx__split { display: block; margin-top: 3px; font-size: 12px; color: var(--np-in-ink); }
.np-tx__amount { font-weight: 600; }
.np-tx__amount--out { color: var(--np-text-2); }
.np-tx__date { color: var(--np-muted); font-size: 13px; white-space: nowrap; }
.np-tx__receipt { text-align: right; width: 1%; }
.np-tx__receipt .np-btn { border: 1px solid var(--np-border); }

.np-status { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--np-border); font-size: 12px; color: var(--np-text-2); white-space: nowrap; }
.np-status i { width: 6px; height: 6px; border-radius: 99px; }
.np-status--ok i { background: var(--np-ok); }
.np-status--warn i { background: var(--np-warn); }
.np-status--bad i { background: var(--np-bad); }

.np-empty { display: grid; justify-items: center; gap: 12px; padding: 40px 0; color: var(--np-muted); font-size: 14px; }
.np-empty p { margin: 0; }

/* transações viram cartões no celular */
@media (max-width: 1099px) {
  .np-tx thead { display: none; }
  .np-tx, .np-tx tbody { display: block; }
  .np-tx tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 16px 0;
    grid-template-areas: "type amount" "details details" "date date" "status receipt";
    align-items: center; border-bottom: 1px solid var(--np-border);
  }
  .np-tx tbody tr:last-child { border-bottom: 0; }
  .np-tx td { display: block; padding: 0; border: 0; }
  .np-tx tbody tr:hover td { background: none; }
  .np-tx td:nth-child(1) { grid-area: type; min-width: 0; }
  .np-tx td:nth-child(1) .np-tx__type { display: flex; }
  .np-tx td:nth-child(2) { grid-area: details; max-width: none; padding-left: 38px; }
  .np-tx td:nth-child(2) > span:first-child { max-width: none; }
  .np-tx td:nth-child(3) { grid-area: amount; }
  .np-tx td:nth-child(4) { grid-area: status; padding-left: 38px; }
  .np-tx td:nth-child(5) { grid-area: date; padding-left: 38px; margin-top: -4px; font-size: 12px; }
  .np-tx td:nth-child(6) { grid-area: receipt; width: auto; }
}

/* ---------- rodapé ---------- */
.np-foot {
  max-width: 1120px; margin: 0 auto; padding: 24px 24px calc(40px + env(safe-area-inset-bottom, 0));
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  font-size: 12px; color: var(--np-dim); border-top: 1px solid var(--np-border);
}
.np-foot a:hover { color: var(--np-text) !important; }

@media (max-width: 560px) {
  .np-callout > .np-btn { width: 100%; margin-left: 0; }
}

/* ---------- alvos de toque (>= 44 px) ---------- */
@media (pointer: coarse), (max-width: 719px) {
  .np-btn--sm { height: 44px; }
  .np-btn--xs { height: 40px; padding: 0 12px; }
  .np-btn:not(.np-btn--xs):not(.np-btn--sm):not(.np-btn--lg) { height: 44px; }
  .np-theme-seg button { height: 38px; }
  .np-menu__panel a, .np-menu__panel button, .np-menu__panel #opPushBtn { min-height: 44px; }
  .np-chart__table summary { padding: 10px 0; }
}

/* ---------- faixa "instale o app" (libs/pwa_install_banner.php, estilos inline) ----------
 * Vira cartão flutuante no estilo do painel; o JS dá recuo no fim da página enquanto ela aparece. */
html[data-ui="novo"] #opPwaBanner {
  left: 12px !important; right: 12px !important; bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  max-width: 640px; margin: 0 auto; overflow: hidden; z-index: 45 !important;   /* abaixo da barra e do menu (50) */
  background: var(--np-surface-3) !important; border: 1px solid var(--np-border-strong) !important;
  border-radius: 14px !important; box-shadow: var(--np-shadow) !important; padding-bottom: 0 !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-family: 'Poppins', -apple-system, sans-serif !important; animation: npSlideUp .3s ease-out;
}
html[data-ui="novo"] #opPwaBanner [style*="#8DA59A"] { color: var(--np-muted) !important; }
html[data-ui="novo"] #opPwaBanner [style*="#E6EFE9"] { color: var(--np-text) !important; }
html[data-ui="novo"] #opPwaBanner [style*="font-weight:700;color:#fff"] { color: var(--np-text) !important; font-weight: 600 !important; }
html[data-ui="novo"] #opPwaBanner img { border-radius: 10px !important; box-shadow: none !important; }
html[data-ui="novo"] #opPwaInstallBtn,
html[data-ui="novo"] #opPwaHowBtn,
html[data-ui="novo"] #opPwaCloseBtn { height: 40px !important; border-radius: 8px !important; gap: 6px !important; font-family: inherit !important; font-weight: 500 !important; }
html[data-ui="novo"] #opPwaInstallBtn { background: var(--np-btn-default) !important; color: var(--np-btn-default-ink) !important; }
html[data-ui="novo"] #opPwaHowBtn { background: transparent !important; color: var(--np-text-2) !important; border: 1px solid var(--np-border-strong) !important; }
html[data-ui="novo"] #opPwaCloseBtn { width: 40px !important; color: var(--np-text-2) !important; border: 1px solid var(--np-border) !important; }
html[data-ui="novo"] #opPwaHowBtn:hover, html[data-ui="novo"] #opPwaCloseBtn:hover { background: var(--np-hover) !important; color: var(--np-text) !important; }
html[data-ui="novo"] #opPwaTutorial { background: var(--np-surface-2) !important; border-top: 1px solid var(--np-border) !important; }
@media (max-width: 420px) { html[data-ui="novo"] #opPwaHowBtn .np-pwa-how-long { display: none; } }

/* ---------- animações ---------- */
@keyframes npFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes npSlideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes npSlideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .np-btn--gradient:hover, .np-btn--gradient:active { transform: none; }
}