/*
* PartnerBackupCentral — folha de estilos.
*
* **FORK** de PartnerBackup (cliente desktop), commit 346f331 em 2026-05-27.
* Manter sincronizado MANUALMENTE: qualquer mudança no design system precisa
* ser refletida em ambos os projetos (ou divergem silenciosamente). Para uma
* tela "Conectar Dropbox" ou "Dashboard" parecer consistente entre os dois
* produtos, edições aqui devem ser repassadas para
* `*\PartnerBackup\src\PartnerBackupService\wwwroot\css\app.css` (e vice-versa).
* Cada projeto é editado e validado em separado — nunca os dois na mesma
* rodada de mudanças.
*
* Customizações específicas deste fork (não existem no PartnerBackup):
* - `.pb-login-remember` (checkbox "Manter conectado")
* - `.pb-search-input` + `.pb-dashboard-toolbar` (filtro do Dashboard)
* - `.pb-form-label input[type="time"]` no seletor base (picker HH:mm
* usado em /retencao para Agendamento diário)
* - `.pb-form-row-aligned` + `.pb-form-wide` + `.pb-form-hint` (linha
* de form com inputs alinhados pela base + coluna larga 210px para
* labels que não cabem em pb-form-narrow)
* Procure por essas classes para diff fácil ao sincronizar.
*
* Aesthetic: "refined operational" — painel de engenharia, denso onde precisa,
* espaçoso onde respira. Sem framework CSS pra manter binário pequeno e boot
* rápido. Tudo construído em cima de CSS custom properties pra consistência.
*/
/* ============================================================
1. Tokens
============================================================ */
:root {
/* Surfaces */
--bg-app: #f5f6f8;
--bg-surface: #ffffff;
--bg-subtle: #fafafb;
--bg-mute: #f1f3f6;
--bg-shell: #0f172a; /* sidebar slate */
--bg-shell-deep: #0a1224; /* sidebar active */
/* Borders */
--border: #e3e7ed;
--border-strong: #cbd2dc;
--border-faint: #eef0f4;
/* Text */
--text-strong: #0f172a;
--text: #1f2937;
--text-soft: #475569;
--text-muted: #64748b;
--text-faint: #94a3b8;
--text-inverse: #e2e8f0;
--text-inverse-muted: #94a3b8;
/* Accent — blue calibrado pra parecer "decidido" sem espalhafato */
--accent: #2456d6;
--accent-hover: #1d44b3;
--accent-bg: #eef3ff;
--accent-soft: #d6e2fb;
--accent-strong: #0f3aa9;
--accent-ring: rgba(36, 86, 214, 0.22);
/* Semantic */
--success: #15803d;
--success-bg: #dcfce7;
--success-soft: #f0fdf4;
--warning: #b45309;
--warning-bg: #fef3c7;
--warning-soft: #fffbeb;
--danger: #b91c1c;
--danger-bg: #fee2e2;
--danger-soft: #fef2f2;
--running: #1d4ed8;
--running-bg: #dbeafe;
--violet: #6d28d9;
--violet-bg: #f5f3ff;
--violet-soft: #ddd6fe;
/* Type */
--font-sans: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI",
-apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", Arial, sans-serif;
--font-mono: "Cascadia Code", "Cascadia Mono", ui-monospace, "Consolas",
"SF Mono", "Liberation Mono", "Menlo", monospace;
--fs-xs: 0.75rem; /* 12px */
--fs-sm: 0.8125rem; /* 13px */
--fs-base: 0.875rem; /* 14px */
--fs-md: 0.9375rem; /* 15px */
--fs-lg: 1.0625rem; /* 17px */
--fs-xl: 1.3125rem; /* 21px */
--fs-2xl: 1.625rem; /* 26px */
--fs-3xl: 2rem; /* 32px */
--lh-tight: 1.25;
--lh-base: 1.5;
--tracking-wide: 0.04em;
--tracking-wider: 0.08em;
/* Spacing escala — 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64 */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-12: 3rem;
--space-16: 4rem;
/* Radii */
--r-sm: 4px;
--r: 6px;
--r-md: 8px;
--r-lg: 12px;
--r-pill: 999px;
/* Sombras — sistema graduado */
--shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
--shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 8px -4px rgba(15, 23, 42, 0.06);
--shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 10px 20px -8px rgba(15, 23, 42, 0.08);
--shadow-lg: 0 18px 40px -16px rgba(15, 23, 42, 0.22), 0 4px 12px -4px rgba(15, 23, 42, 0.10);
--ring: 0 0 0 3px var(--accent-ring);
--t-fast: 110ms ease;
--t-base: 170ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* ============================================================
2. Reset / base
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body {
margin: 0;
height: 100%;
font-family: var(--font-sans);
font-size: var(--fs-base);
color: var(--text);
background: var(--bg-app);
line-height: var(--lh-base);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
a {
color: var(--accent);
text-decoration: none;
transition: color var(--t-fast);
}
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; }
h1, h2, h3 {
margin: 0 0 var(--space-2) 0;
font-weight: 600;
color: var(--text-strong);
letter-spacing: -0.01em;
line-height: var(--lh-tight);
}
h1 { font-size: var(--fs-2xl); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
code, kbd, samp, pre, tt {
font-family: var(--font-mono);
font-size: 0.92em;
}
/* Foco visível padrão pra qualquer interactive */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
button:focus, input:focus, select:focus, textarea:focus, a:focus { outline: none; }
button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, a:focus-visible {
outline: none;
box-shadow: var(--ring);
}
/* ============================================================
3. Shell — sidebar + main
============================================================ */
.pb-shell {
display: grid;
grid-template-columns: 232px 1fr;
/* App-shell de altura fixa: a página nunca rola — só o .pb-content rola
por dentro (topbar e footer ficam fixos). minmax(0,1fr) força a linha a
ocupar 100vh e permite os filhos encolherem (min-height:0 implícito),
dando ao .pb-content uma altura definida pra páginas .pb-page-fill. */
grid-template-rows: minmax(0, 1fr);
height: 100vh;
overflow: hidden;
}
.pb-sidebar {
background: var(--bg-shell);
color: var(--text-inverse);
display: flex;
flex-direction: column;
border-right: 1px solid #1e293b;
}
.pb-brand {
padding: var(--space-5) var(--space-5);
display: flex;
align-items: center;
gap: var(--space-3);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
/* Logo clicável → home (/). Herda a tipografia da marca; gap entre mark e nome
migra pra cá. Hover/focus discretos só pra sinalizar que é clicável. */
.pb-brand-link {
display: flex;
align-items: center;
gap: var(--space-3);
text-decoration: none;
color: inherit;
border-radius: var(--r-sm, 6px);
transition: opacity 140ms ease;
}
.pb-brand-link:hover { opacity: 0.82; }
.pb-brand-link:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.5);
outline-offset: 3px;
}
.pb-brand-mark {
width: 34px;
height: 34px;
object-fit: contain;
display: block;
flex-shrink: 0;
}
.pb-brand-name {
font-weight: 600;
font-size: var(--fs-md);
color: #ffffff;
letter-spacing: -0.01em;
}
.pb-main {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
background: var(--bg-app);
}
.pb-topbar {
background: var(--bg-surface);
border-bottom: 1px solid var(--border);
height: 56px;
display: flex;
align-items: center;
padding: 0 var(--space-6);
}
.pb-topbar-spacer { flex: 1; }
/*
Status pill — "instrument readout". Heartbeat dot pulsa em verde indicando
que o serviço está vivo (a página só renderiza com o Service de pé). Host
é o anchor primário (qual máquina); versão fica em monospace muted.
*/
.pb-topbar-status {
display: inline-flex;
align-items: center;
gap: var(--space-2);
height: 30px;
padding: 0 var(--space-3);
background: linear-gradient(180deg, var(--bg-subtle) 0%, var(--bg-mute) 100%);
border: 1px solid var(--border);
border-radius: var(--r-pill);
margin-right: var(--space-4);
color: var(--text-soft);
cursor: default;
user-select: none;
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.pb-topbar-status:hover {
border-color: var(--border-strong);
box-shadow: var(--shadow-xs);
}
.pb-topbar-status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--success);
box-shadow: 0 0 0 0 rgba(21, 128, 61, 0.55);
animation: pb-topbar-pulse 2.4s ease-out infinite;
flex-shrink: 0;
}
@keyframes pb-topbar-pulse {
0% { box-shadow: 0 0 0 0 rgba(21, 128, 61, 0.55); }
70% { box-shadow: 0 0 0 6px rgba(21, 128, 61, 0); }
100% { box-shadow: 0 0 0 0 rgba(21, 128, 61, 0); }
}
@media (prefers-reduced-motion: reduce) {
.pb-topbar-status-dot { animation: none; }
}
.pb-topbar-status-host {
color: var(--text-strong);
font-weight: 600;
font-size: var(--fs-sm);
letter-spacing: var(--tracking-wide);
}
.pb-topbar-status-sep {
color: var(--text-faint);
}
.pb-topbar-status-version {
font-family: var(--font-mono);
color: var(--text-muted);
font-size: 0.72rem;
}
/*
Client identity chip — CCliFor + Fantasia. Visualmente "irmão" do status
pill (mesma altura, mesma fonte), mas tinted neutro pra não competir com
o heartbeat verde. Código em monospace (alinha 0000767 verticalmente),
nome em sans regular muted.
*/
.pb-topbar-client {
display: inline-flex;
align-items: center;
gap: var(--space-2);
height: 30px;
padding: 0 var(--space-3);
background: var(--bg-subtle);
border: 1px solid var(--border);
border-radius: var(--r-pill);
margin-right: var(--space-3);
color: var(--text-soft);
cursor: default;
user-select: none;
max-width: 320px;
overflow: hidden;
}
.pb-topbar-client-code {
font-family: var(--font-mono);
color: var(--text-strong);
font-weight: 600;
font-size: 0.78rem;
letter-spacing: 0.02em;
flex-shrink: 0;
}
.pb-topbar-client-sep {
color: var(--text-faint);
flex-shrink: 0;
}
.pb-topbar-client-name {
color: var(--text-muted);
font-size: var(--fs-sm);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pb-content {
flex: 1;
padding: var(--space-6) var(--space-8);
overflow-y: auto;
width: 100%;
min-width: 0;
min-height: 0;
}
/* ============================================================
4. Sidebar nav
============================================================ */
.pb-nav {
padding: var(--space-3) var(--space-2);
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
}
.pb-nav-link {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-3);
margin: 0 var(--space-2);
color: var(--text-inverse-muted);
text-decoration: none;
border-radius: var(--r-sm);
font-size: var(--fs-base);
font-weight: 500;
transition: background var(--t-fast), color var(--t-fast);
position: relative;
}
.pb-nav-link:hover {
background: rgba(255, 255, 255, 0.04);
color: #ffffff;
text-decoration: none;
}
.pb-nav-link.active {
background: rgba(36, 86, 214, 0.18);
color: #ffffff;
}
.pb-nav-link.active::before {
content: '';
position: absolute;
left: -2px;
top: 8px;
bottom: 8px;
width: 3px;
background: var(--accent);
border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.pb-nav-icon {
display: inline-block;
width: 1.15rem;
text-align: center;
opacity: 0.7;
font-size: 0.95em;
}
.pb-nav-link.active .pb-nav-icon { opacity: 1; }
/* ============================================================
4b. Hamburger + drawer mobile
============================================================ */
/* Estado oculto — só serve pra alavancar :checked. */
.pb-sidebar-toggle {
position: absolute;
opacity: 0;
pointer-events: none;
width: 1px;
height: 1px;
}
/* Hamburger button — só aparece em mobile. */
.pb-hamburger {
display: none;
flex-direction: column;
justify-content: space-between;
width: 24px;
height: 18px;
cursor: pointer;
padding: 0;
margin-right: var(--space-3);
background: none;
border: none;
}
.pb-hamburger span {
display: block;
height: 2px;
width: 100%;
background: var(--text-strong);
border-radius: 2px;
transition: transform var(--t-base), opacity var(--t-base);
transform-origin: center;
}
/* Hamburger vira X quando aberto (em mobile). */
.pb-sidebar-toggle:checked ~ .pb-main .pb-hamburger span:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.pb-sidebar-toggle:checked ~ .pb-main .pb-hamburger span:nth-child(2) {
opacity: 0;
}
.pb-sidebar-toggle:checked ~ .pb-main .pb-hamburger span:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
/* Overlay clicável que fecha o drawer. */
.pb-sidebar-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.55);
backdrop-filter: blur(2px);
z-index: 40;
opacity: 0;
transition: opacity var(--t-base);
cursor: pointer;
}
/* Botão X dentro do brand (mobile only). */
.pb-sidebar-close {
display: none;
margin-left: auto;
width: 28px;
height: 28px;
align-items: center;
justify-content: center;
font-size: 1.5rem;
line-height: 1;
color: var(--text-inverse);
cursor: pointer;
border-radius: var(--r-sm);
transition: background var(--t-fast);
}
.pb-sidebar-close:hover { background: rgba(255, 255, 255, 0.08); }
/* ============================================================
5. User menu (topbar)
============================================================ */
/*
User card — pill único agrupando avatar (inicial em gradiente accent),
nome e botão de logout iconizado. Divisor hairline interno separa
"identidade" da "ação". Hover no logout vira danger e empurra o ícone
pra direita (metáfora visual de "saindo pela porta").
*/
.pb-usermenu {
display: inline-flex;
align-items: center;
gap: var(--space-2);
height: 38px;
padding-left: 3px;
padding-right: 3px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--r-pill);
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.pb-usermenu:hover {
border-color: var(--border-strong);
box-shadow: var(--shadow-xs);
}
.pb-usermenu-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: var(--r-pill);
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
color: #ffffff;
font-weight: 600;
font-size: 0.78rem;
letter-spacing: 0.02em;
text-transform: uppercase;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 1px 2px rgba(15, 23, 42, 0.18);
flex-shrink: 0;
}
.pb-usermenu-name {
color: var(--text);
font-weight: 500;
font-size: var(--fs-sm);
white-space: nowrap;
padding: 0 var(--space-2) 0 var(--space-1);
}
.pb-usermenu-form { display: inline-flex; margin: 0; align-items: stretch; }
.pb-usermenu-logout {
display: inline-flex;
align-items: center;
gap: 6px;
height: 30px;
padding: 0 var(--space-3);
background: transparent;
border: none;
border-left: 1px solid var(--border-faint);
color: var(--text-muted);
cursor: pointer;
font: inherit;
font-size: var(--fs-sm);
font-weight: 500;
border-radius: 0 var(--r-pill) var(--r-pill) 0;
transition: background var(--t-fast), color var(--t-fast);
}
.pb-usermenu-logout svg {
transition: transform var(--t-fast);
}
.pb-usermenu-logout:hover {
background: var(--danger-bg);
color: var(--danger);
}
.pb-usermenu-logout:hover svg {
transform: translateX(2px);
}
.pb-usermenu-logout:focus-visible {
outline: none;
box-shadow: var(--ring);
background: var(--danger-bg);
color: var(--danger);
}
/* Compacta em telas estreitas — labels colapsam, ícones permanecem. */
@media (max-width: 720px) {
.pb-topbar-status-version,
.pb-topbar-status-sep { display: none; }
.pb-topbar-client-name,
.pb-topbar-client-sep { display: none; }
.pb-usermenu-name { display: none; }
.pb-usermenu-logout-label { display: none; }
.pb-usermenu-logout { padding: 0 var(--space-3); border-left: none; }
}
.pb-btn-link {
background: none;
border: none;
color: var(--accent);
cursor: pointer;
padding: 0;
font: inherit;
transition: color var(--t-fast);
}
.pb-btn-link:hover { color: var(--accent-hover); text-decoration: underline; }
/* ============================================================
6. Page header
============================================================ */
.pb-page-header {
margin-bottom: var(--space-6);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--border-faint);
}
.pb-page-title {
font-size: var(--fs-2xl);
margin: 0;
letter-spacing: -0.02em;
color: var(--text-strong);
}
.pb-page-subtitle {
color: var(--text-muted);
margin: var(--space-1) 0 0 0;
font-size: var(--fs-md);
}
/* ============================================================
7. Cards (KPI/summary)
============================================================ */
.pb-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-4);
margin-bottom: var(--space-6);
}
.pb-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: var(--space-4) var(--space-5);
box-shadow: var(--shadow-xs);
transition: box-shadow var(--t-base), transform var(--t-base);
}
.pb-card:hover {
box-shadow: var(--shadow-sm);
}
.pb-card-label {
color: var(--text-muted);
font-size: var(--fs-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
margin-bottom: var(--space-2);
}
.pb-card-value {
font-size: var(--fs-3xl);
font-weight: 600;
color: var(--text-strong);
letter-spacing: -0.03em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.pb-card-value-running { color: var(--running); }
.pb-card-value-success { color: var(--success); }
.pb-card-value-failed { color: var(--danger); }
.pb-card-value-pending { color: var(--warning); }
/* Tints — fundo pastel + spine de 4px na borda esquerda em cor saturada.
Os tokens --*-bg/--*-soft já existem; reusamos pra manter coerência com
toasts e badges do resto do app. */
.pb-card-tint-neutral,
.pb-card-tint-running,
.pb-card-tint-pending,
.pb-card-tint-success,
.pb-card-tint-failed {
border-left-width: 4px;
border-left-style: solid;
}
.pb-card-tint-neutral {
background: var(--accent-bg);
border-color: var(--accent-soft);
border-left-color: var(--accent);
}
.pb-card-tint-running {
background: var(--running-bg);
border-color: color-mix(in srgb, var(--running) 18%, transparent);
border-left-color: var(--running);
}
.pb-card-tint-pending {
background: var(--warning-bg);
border-color: color-mix(in srgb, var(--warning) 22%, transparent);
border-left-color: var(--warning);
}
.pb-card-tint-success {
background: var(--success-bg);
border-color: color-mix(in srgb, var(--success) 20%, transparent);
border-left-color: var(--success);
}
.pb-card-tint-failed {
background: var(--danger-bg);
border-color: color-mix(in srgb, var(--danger) 22%, transparent);
border-left-color: var(--danger);
}
/* Label tintado — fica mais "ligado" à cor do card sem perder a hierarquia
(mais claro que o número, mais escuro que muted padrão). */
.pb-card-tint-neutral .pb-card-label { color: var(--accent-strong); }
.pb-card-tint-running .pb-card-label { color: var(--running); }
.pb-card-tint-pending .pb-card-label { color: var(--warning); }
.pb-card-tint-success .pb-card-label { color: var(--success); }
.pb-card-tint-failed .pb-card-label { color: var(--danger); }
/* "Bancos cadastrados" mantém o número em ink escuro — não é status,
é totalizador. Outros já vêm coloridos via pb-card-value-*. */
.pb-card-tint-neutral .pb-card-value { color: var(--accent-strong); }
/* Tint violeta — usado em "Sem backup" no dashboard (/central), espelhando
o roxo do painel de TV. */
.pb-card-tint-violet {
border-left-width: 4px;
border-left-style: solid;
background: var(--violet-bg);
border-color: var(--violet-soft);
border-left-color: var(--violet);
}
.pb-card-tint-violet .pb-card-label { color: var(--violet); }
.pb-card-tint-violet .pb-card-foot { color: color-mix(in srgb, var(--violet) 70%, var(--text-muted)); }
/* Dashboard /central: os números dos KPI seguem a cor semântica do status
(verde/laranja/vermelho/roxo), como no painel de TV. Escopo em .pb-dash
para NÃO mexer nos KPI neutros de /clients. */
.pb-dash .pb-card-tint-success .pb-card-value { color: var(--success); }
.pb-dash .pb-card-tint-pending .pb-card-value { color: var(--warning); }
.pb-dash .pb-card-tint-failed .pb-card-value { color: var(--danger); }
.pb-dash .pb-card-tint-violet .pb-card-value { color: var(--violet); }
.pb-card-value-small {
font-size: var(--fs-md);
font-weight: 600;
color: var(--text-strong);
line-height: 1.3;
letter-spacing: -0.01em;
}
.pb-note {
color: var(--text-muted);
font-size: var(--fs-sm);
font-style: normal;
}
.pb-muted { color: var(--text-faint); }
/* ============================================================
8. Section
============================================================ */
.pb-section {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: var(--space-5) var(--space-6);
margin-bottom: var(--space-6);
box-shadow: var(--shadow-xs);
}
.pb-section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-5);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--border-faint);
gap: var(--space-3);
flex-wrap: wrap;
}
.pb-section-title {
font-size: var(--fs-lg);
margin: 0;
color: var(--text-strong);
font-weight: 600;
letter-spacing: -0.01em;
}
.pb-section > .pb-section-title:not(:only-child) { margin-bottom: var(--space-4); }
/* ============================================================
9. Buttons
============================================================ */
.pb-btn-primary,
.pb-btn-secondary,
.pb-btn-danger,
.pb-btn-link {
font: inherit;
cursor: pointer;
transition: background var(--t-fast), border-color var(--t-fast),
color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
user-select: none;
}
.pb-btn-primary {
background: var(--accent);
color: #ffffff;
border: 1px solid var(--accent);
padding: 0.55rem var(--space-4);
border-radius: var(--r-sm);
font-weight: 600;
font-size: var(--fs-base);
box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.12);
letter-spacing: 0.01em;
}
.pb-btn-primary:hover:not(:disabled) {
background: var(--accent-hover);
border-color: var(--accent-hover);
color: #ffffff;
text-decoration: none;
box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.pb-btn-primary:active:not(:disabled) {
transform: translateY(1px);
box-shadow: var(--shadow-xs), inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.pb-btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }
.pb-btn-secondary {
background: var(--bg-surface);
color: var(--text);
border: 1px solid var(--border-strong);
padding: 0.5rem var(--space-4);
border-radius: var(--r-sm);
font-size: var(--fs-base);
font-weight: 500;
}
.pb-btn-secondary:hover:not(:disabled) {
background: var(--bg-mute);
border-color: var(--text-faint);
color: var(--text-strong);
}
.pb-btn-secondary:disabled { opacity: 0.55; cursor: not-allowed; }
.pb-btn-danger {
background: var(--bg-surface);
color: var(--danger);
border: 1px solid #fcc4c4;
padding: 0.5rem var(--space-4);
border-radius: var(--r-sm);
font-size: var(--fs-base);
font-weight: 500;
}
.pb-btn-danger:hover:not(:disabled) {
background: var(--danger-soft);
border-color: #f87171;
color: #991b1b;
}
.pb-btn-danger:disabled { opacity: 0.55; cursor: not-allowed; }
/* Danger sólido — usado em ações negativas com mais ênfase (ex.: Cancelar modal). */
.pb-btn-danger-solid {
background: var(--danger);
color: #ffffff;
border: 1px solid var(--danger);
padding: 0.55rem var(--space-4);
border-radius: var(--r-sm);
font-size: var(--fs-base);
font-weight: 600;
cursor: pointer;
box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.10);
transition: background var(--t-fast), border-color var(--t-fast),
box-shadow var(--t-fast), transform var(--t-fast);
}
.pb-btn-danger-solid:hover:not(:disabled) {
background: #991b1b;
border-color: #991b1b;
box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.pb-btn-danger-solid:active:not(:disabled) {
transform: translateY(1px);
box-shadow: var(--shadow-xs), inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
.pb-btn-danger-solid:disabled { opacity: 0.55; cursor: not-allowed; }
/* Botão de ícone — pequeno, transparente, pra ações inline como refresh. */
.pb-btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
padding: 0;
margin-left: var(--space-2);
background: transparent;
border: 1px solid var(--border-strong);
border-radius: var(--r-sm);
color: var(--text-soft);
cursor: pointer;
font-size: 0.85rem;
line-height: 1;
vertical-align: middle;
transition: all var(--t-fast);
}
.pb-btn-icon:hover:not(:disabled) {
background: var(--accent-bg);
border-color: var(--accent);
color: var(--accent);
}
.pb-btn-icon:disabled { opacity: 0.5; cursor: not-allowed; }
.pb-btn-sm {
padding: 0.35rem 0.7rem;
font-size: var(--fs-sm);
border-radius: var(--r-sm);
}
.pb-col-actions { white-space: nowrap; text-align: right; }
.pb-col-actions button + button { margin-left: var(--space-1); }
/* ============================================================
10. Badges
============================================================ */
.pb-badge {
display: inline-flex;
align-items: center;
gap: 0.3em;
padding: 0.2rem 0.6rem;
border-radius: var(--r-pill);
font-size: var(--fs-xs);
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
letter-spacing: 0.01em;
}
.pb-badge::before {
content: '';
width: 6px;
height: 6px;
border-radius: var(--r-pill);
flex-shrink: 0;
}
.pb-badge-success { background: var(--success-bg); color: var(--success); }
.pb-badge-success::before { background: var(--success); }
.pb-badge-failed { background: var(--danger-bg); color: var(--danger); }
.pb-badge-failed::before { background: var(--danger); }
.pb-badge-running { background: var(--running-bg); color: var(--running); }
.pb-badge-running::before { background: var(--running); box-shadow: 0 0 0 0 rgba(29, 78, 216, 0.6); animation: pb-pulse 1.6s ease-in-out infinite; }
.pb-badge-pending { background: var(--warning-bg); color: var(--warning); }
.pb-badge-pending::before { background: var(--warning); }
.pb-badge-neutral { background: var(--bg-mute); color: var(--text-soft); }
.pb-badge-neutral::before { background: var(--text-faint); }
@keyframes pb-pulse {
0% { box-shadow: 0 0 0 0 rgba(29, 78, 216, 0.5); }
70% { box-shadow: 0 0 0 5px rgba(29, 78, 216, 0); }
100% { box-shadow: 0 0 0 0 rgba(29, 78, 216, 0); }
}
.pb-public-badge-inline { margin-left: var(--space-2); }
/* ============================================================
11. Tabela
============================================================ */
.pb-table-wrap {
overflow-x: auto;
border-radius: var(--r);
border: 1px solid var(--border-faint);
}
.pb-table {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-base);
}
.pb-table th,
.pb-table td {
text-align: left;
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--border-faint);
}
.pb-table tbody tr:last-child td { border-bottom: none; }
.pb-table th {
background: var(--bg-subtle);
color: var(--text-muted);
font-weight: 600;
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
border-bottom: 1px solid var(--border);
}
.pb-table td code,
.pb-table td .pb-mono {
font-family: var(--font-mono);
font-size: 0.88em;
color: var(--text-soft);
background: var(--bg-mute);
padding: 0.1rem 0.4rem;
border-radius: var(--r-sm);
}
.pb-table tbody tr {
transition: background var(--t-fast);
}
.pb-table tbody tr:hover { background: var(--bg-subtle); }
/* Variante com scroll interno — cap fixo de ~10 linhas + header. Usada nas
listas do dashboard (/central). Header fica grudado no topo ao rolar. */
.pb-table-scroll {
max-height: 29rem;
overflow-y: auto;
}
.pb-table-scroll thead th {
position: sticky;
top: 0;
z-index: 1;
}
/* Fork-specific (não existe no PartnerBackup): página que preenche a altura
útil — page-header fixo no topo + uma pb-section que estica, com a tabela
rolando por dentro. Usada em /clients e /clients/novo pra a lista ocupar a
área visível em vez de um card curto com vão embaixo.
Funciona porque o .pb-shell é app-shell de altura fixa: o .pb-content tem
altura definida, vira coluna flex (via :has) e o pb-page-fill estica nela —
sem scroll na página, só na tabela interna. */
.pb-content:has(.pb-page-fill) {
display: flex;
flex-direction: column;
}
.pb-page-fill {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.pb-page-fill > .pb-page-header { flex: 0 0 auto; }
.pb-page-fill > .pb-section-fill { flex: 1 1 auto; margin-bottom: 0; }
/* A seção vira coluna flex: header/hint/notes fixos, a tabela estica e rola.
Reusa .pb-table-scroll (thead sticky) mas libera o teto de 29rem. */
.pb-section-fill {
display: flex;
flex-direction: column;
min-height: 0;
}
.pb-section-fill > .pb-section-header,
.pb-section-fill > .pb-form-hint,
.pb-section-fill > .pb-form-error,
.pb-section-fill > .pb-note {
flex: 0 0 auto;
}
.pb-section-fill > .pb-table-wrap {
flex: 1 1 auto;
min-height: 0;
}
.pb-section-fill .pb-table-scroll {
max-height: none;
}
.pb-error-cell {
color: var(--danger);
font-size: var(--fs-sm);
cursor: help;
}
/* ============================================================
12. Health
============================================================ */
.pb-health-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--space-4);
}
.pb-health-card {
background: var(--bg-subtle);
border: 1px solid var(--border-faint);
border-radius: var(--r);
padding: var(--space-4);
position: relative;
}
.pb-health-name {
font-weight: 600;
color: var(--text-strong);
margin-bottom: var(--space-1);
font-size: var(--fs-base);
}
.pb-health-status {
font-weight: 600;
font-size: var(--fs-sm);
margin-bottom: var(--space-1);
display: inline-flex;
align-items: center;
gap: 0.4em;
}
.pb-health-status::before {
content: '';
width: 8px;
height: 8px;
border-radius: var(--r-pill);
background: currentColor;
opacity: 0.85;
}
.pb-health-ok { color: var(--success); }
.pb-health-failed { color: var(--danger); }
.pb-health-warn { color: var(--warning); }
.pb-health-unknown { color: var(--text-faint); }
.pb-health-detail {
color: var(--text-muted);
font-size: var(--fs-sm);
line-height: 1.4;
}
.pb-health-list {
list-style: none;
margin: var(--space-2) 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
font-size: var(--fs-sm);
}
.pb-health-list li {
display: flex;
align-items: center;
gap: 0.5em;
line-height: 1.4;
cursor: pointer;
}
.pb-health-list-icon {
display: inline-block;
min-width: 1em;
text-align: center;
font-weight: 800;
font-size: 1.05em;
}
.pb-health-list-name {
color: var(--text-muted);
overflow-wrap: anywhere;
}
.pb-health-list-ok .pb-health-list-icon { color: var(--success); }
.pb-health-list-fail .pb-health-list-icon { color: var(--danger); }
.pb-health-list-fail .pb-health-list-name { color: var(--text-strong); }
/* ============================================================
13. Modal
============================================================ */
.pb-modal-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.55);
backdrop-filter: blur(2px);
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
padding: var(--space-4);
animation: pb-modal-bg 160ms ease;
}
.pb-modal {
background: var(--bg-surface);
border-radius: var(--r-lg);
width: 600px;
max-width: 100%;
max-height: 90vh;
display: flex;
flex-direction: column;
box-shadow: var(--shadow-lg);
overflow: hidden;
animation: pb-modal-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pb-modal-bg { from { opacity: 0; } to { opacity: 1; } }
@keyframes pb-modal-in {
from { opacity: 0; transform: translateY(8px) scale(0.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Overlay de loading dentro do modal — sobrepõe o conteúdo enquanto carrega
dados externos (ex.: lista de bancos da instância SQL). */
.pb-modal-loading {
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(1px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-3);
z-index: 5;
color: var(--text-soft);
font-size: var(--fs-sm);
font-weight: 500;
border-radius: var(--r-lg);
}
/* Spinner CSS-puro — círculo com arco animado. */
.pb-spinner {
width: 36px;
height: 36px;
border: 3px solid var(--border);
border-top-color: var(--accent);
border-radius: var(--r-pill);
animation: pb-spin 0.9s linear infinite;
box-sizing: border-box;
}
.pb-spinner-sm {
width: 13px;
height: 13px;
border-width: 2px;
display: inline-block;
vertical-align: -2px;
margin-right: 0.45rem;
}
@keyframes pb-spin {
to { transform: rotate(360deg); }
}
/* Modal precisa ser position:relative pro overlay de loading ancorar nele. */
.pb-modal {
position: relative;
}
.pb-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-4) var(--space-6);
border-bottom: 1px solid var(--border-faint);
}
.pb-modal-header h2 {
margin: 0;
font-size: var(--fs-lg);
letter-spacing: -0.01em;
}
.pb-modal-close {
background: none;
border: none;
font-size: 1.4rem;
cursor: pointer;
color: var(--text-muted);
line-height: 1;
padding: var(--space-1) var(--space-2);
border-radius: var(--r-sm);
transition: background var(--t-fast), color var(--t-fast);
}
.pb-modal-close:hover { background: var(--bg-mute); color: var(--text-strong); }
.pb-modal-body {
padding: var(--space-5) var(--space-6);
overflow-y: auto;
flex: 1;
}
.pb-modal-footer {
display: flex;
justify-content: flex-end;
gap: var(--space-2);
padding: var(--space-4) var(--space-6);
border-top: 1px solid var(--border-faint);
background: var(--bg-subtle);
}
/* Variante compacta para dialogs de confirmação. */
.pb-modal-sm { width: 460px; }
.pb-confirm-question {
margin: 0 0 var(--space-4);
color: var(--text-strong);
font-size: var(--fs-md);
font-weight: 500;
}
.pb-confirm-details {
margin: 0;
padding: var(--space-3) var(--space-4);
background: var(--bg-subtle);
border: 1px solid var(--border-faint);
border-radius: var(--r);
display: grid;
gap: var(--space-2);
font-size: var(--fs-sm);
}
.pb-confirm-details > div {
display: grid;
grid-template-columns: minmax(140px, 0.6fr) 1fr;
gap: var(--space-3);
align-items: baseline;
}
.pb-confirm-details dt {
margin: 0;
color: var(--text-muted);
font-weight: 500;
}
.pb-confirm-details dd {
margin: 0;
color: var(--text-strong);
overflow-wrap: anywhere;
}
.pb-confirm-details code {
background: var(--bg-mute);
border-radius: var(--r-sm);
padding: 1px 6px;
font-family: var(--font-mono);
font-size: 0.92em;
}
/* ============================================================
14. Form
============================================================ */
.pb-form-row {
display: flex;
gap: var(--space-4);
margin-bottom: var(--space-3);
flex-wrap: wrap;
}
.pb-form-label {
display: flex;
flex-direction: column;
gap: var(--space-1);
flex: 1 1 200px;
font-size: var(--fs-sm);
color: var(--text-soft);
font-weight: 500;
}
.pb-form-narrow { flex: 0 0 130px; }
/* Fork-specific (não existe no PartnerBackup): linha de form em que cada
label pode ter largura sob medida. Alinha inputs pela BASE — se algum
span eventualmente quebrar, ainda fica visualmente alinhado. */
.pb-form-row-aligned {
align-items: flex-end;
}
/* Coluna mais larga (~210px) para labels que não cabem em pb-form-narrow.
Ex.: "Nº meses com último backup" precisa de mais espaço pra não quebrar. */
.pb-form-wide { flex: 0 0 210px; }
/* Texto de ajuda discreto abaixo de uma linha de form */
.pb-form-hint {
margin: var(--space-2) 0 var(--space-4) 0;
font-size: var(--fs-sm);
color: var(--text-muted);
}
.pb-form-hint code {
font-size: 0.95em;
padding: 0 4px;
background: var(--bg-mute);
border-radius: 3px;
}
.pb-form-label input[type="text"],
.pb-form-label input[type="password"],
.pb-form-label input[type="number"],
/* Fork-specific: input[type="time"] usado em /retencao no campo
"Agendamento diário" (picker HH:mm). Não existe no PartnerBackup. */
.pb-form-label input[type="time"],
.pb-form-label select {
padding: 0.5rem var(--space-3);
border: 1px solid var(--border-strong);
border-radius: var(--r-sm);
font: inherit;
background: var(--bg-surface);
color: var(--text-strong);
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.pb-form-label select {
/* mantém altura visual idêntica aos inputs de texto */
height: calc(var(--fs-base) * 1.5 + 1rem + 2px);
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.6rem center;
background-size: 10px 7px;
padding-right: 1.8rem;
}
.pb-form-label input:focus,
.pb-form-label select:focus {
outline: none;
border-color: var(--accent);
box-shadow: var(--ring);
}
.pb-form-label input::placeholder {
color: var(--text-faint);
}
.pb-help-error {
color: var(--danger);
font-size: var(--fs-xs);
margin-top: var(--space-1);
}
/* Input group — input/select + botão de ação anexado à direita.
Compartilha a borda visualmente (botão "encostado" no campo). */
.pb-input-group {
display: flex;
align-items: stretch;
}
.pb-input-group > input,
.pb-input-group > select {
flex: 1;
min-width: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right-width: 0;
}
.pb-input-group-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 var(--space-3);
background: var(--bg-mute);
border: 1px solid var(--border-strong);
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: var(--r-sm);
border-bottom-right-radius: var(--r-sm);
color: var(--text-soft);
font-size: 0.95rem;
line-height: 1;
cursor: pointer;
transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.pb-input-group-btn:hover:not(:disabled) {
background: var(--accent-bg);
color: var(--accent);
border-color: var(--accent);
}
.pb-input-group-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* Foco no campo precisa "puxar" a borda do botão também — efeito unificado. */
.pb-input-group:focus-within > input,
.pb-input-group:focus-within > select {
border-color: var(--accent);
box-shadow: var(--ring);
/* mantém o botão sem ring duplicado */
clip-path: inset(-3px 0 -3px -3px);
}
.pb-input-group:focus-within > .pb-input-group-btn {
border-color: var(--accent);
}
.pb-form-checkbox {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--fs-base);
color: var(--text);
cursor: pointer;
}
.pb-form-checkbox input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--accent);
cursor: pointer;
}
.pb-form-section {
font-size: var(--fs-xs);
color: var(--text-muted);
margin: var(--space-5) 0 var(--space-2) 0;
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
}
.pb-form-subsection {
font-size: var(--fs-sm);
color: var(--text-muted);
margin: var(--space-4) 0 var(--space-2) 0;
font-weight: 600;
}
.pb-form-error {
background: var(--danger-soft);
border: 1px solid #fcc4c4;
border-left: 3px solid var(--danger);
color: #991b1b;
padding: var(--space-3) var(--space-4);
border-radius: var(--r-sm);
margin-bottom: var(--space-4);
font-size: var(--fs-base);
line-height: 1.45;
}
.pb-form-success {
background: var(--success-soft);
border: 1px solid #bbf7d0;
border-left: 3px solid var(--success);
color: #166534;
padding: var(--space-3) var(--space-4);
border-radius: var(--r-sm);
margin-bottom: var(--space-4);
font-size: var(--fs-base);
}
.pb-required { color: var(--danger); font-weight: 600; }
/* Day pills (agendamento) */
.pb-days { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.pb-day-pill {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 0.35rem 0.7rem;
border: 1px solid var(--border-strong);
border-radius: var(--r-pill);
font-size: var(--fs-sm);
cursor: pointer;
background: var(--bg-surface);
transition: all var(--t-fast);
user-select: none;
}
.pb-day-pill:hover { border-color: var(--accent); }
.pb-day-pill input[type="checkbox"] { margin: 0; width: 14px; height: 14px; }
.pb-day-pill:has(input:checked) {
background: var(--accent-bg);
border-color: var(--accent);
color: var(--accent-strong);
font-weight: 600;
}
.pb-test-result {
margin-left: var(--space-2);
font-size: var(--fs-xs);
font-weight: 600;
padding: 0.15rem 0.5rem;
border-radius: var(--r-pill);
}
.pb-test-ok { color: var(--success); background: var(--success-bg); }
.pb-test-fail { color: var(--danger); background: var(--danger-bg); }
.pb-validation-result {
align-self: center;
margin-left: var(--space-2);
font-size: var(--fs-sm);
}
.pb-help {
color: var(--text-muted);
font-size: var(--fs-xs);
margin-top: var(--space-1);
}
/* ============================================================
15. Settings — info grid + sticky form actions
============================================================ */
.pb-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--space-3) var(--space-6);
}
.pb-info-grid > div {
display: flex;
flex-direction: column;
align-items: flex-start; /* impede badges/pills de esticarem na largura */
gap: var(--space-1);
font-size: var(--fs-base);
}
.pb-info-label {
color: var(--text-muted);
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
font-weight: 700;
}
.pb-form-actions {
position: sticky;
bottom: var(--space-2);
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: var(--space-3) var(--space-5);
display: flex;
justify-content: flex-end;
align-items: center;
gap: var(--space-2);
box-shadow: var(--shadow-md);
z-index: 10;
}
/* ============================================================
16. Tabs
============================================================ */
.pb-tabs {
display: flex;
gap: var(--space-1);
border-bottom: 1px solid var(--border);
margin-bottom: var(--space-5);
}
.pb-tab {
background: none;
border: none;
padding: var(--space-3) var(--space-5);
font: inherit;
font-size: var(--fs-base);
color: var(--text-muted);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-weight: 500;
transition: color var(--t-fast), border-color var(--t-fast);
}
.pb-tab:hover { color: var(--text-strong); }
.pb-tab-active {
color: var(--accent);
border-bottom-color: var(--accent);
font-weight: 600;
}
.pb-tab-count {
background: var(--bg-mute);
color: var(--text-soft);
padding: 0.1rem var(--space-2);
border-radius: var(--r-pill);
font-size: 0.7rem;
font-weight: 700;
line-height: 1.4;
font-variant-numeric: tabular-nums;
min-width: 1.5em;
text-align: center;
}
.pb-tab-active .pb-tab-count { background: var(--accent-bg); color: var(--accent-strong); }
/* ============================================================
17. Upload list
============================================================ */
.pb-upload-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.pb-upload-item {
border: 1px solid var(--border);
border-radius: var(--r);
padding: var(--space-4) var(--space-5);
background: var(--bg-surface);
display: flex;
flex-direction: column;
gap: var(--space-3);
box-shadow: var(--shadow-xs);
transition: box-shadow var(--t-base);
}
.pb-upload-item:hover { box-shadow: var(--shadow-sm); }
.pb-upload-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
.pb-upload-name {
display: flex;
align-items: baseline;
gap: var(--space-2);
min-width: 0;
}
.pb-upload-name strong {
color: var(--text-strong);
font-size: var(--fs-md);
font-weight: 600;
}
.pb-upload-id {
color: var(--text-faint);
font-size: var(--fs-xs);
font-family: var(--font-mono);
letter-spacing: -0.02em;
}
.pb-upload-error {
background: var(--danger-soft);
border: 1px solid #fcc4c4;
color: #991b1b;
border-radius: var(--r-sm);
padding: var(--space-2) var(--space-3);
font-size: var(--fs-sm);
cursor: help;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pb-upload-actions {
display: inline-flex;
align-items: center;
gap: var(--space-3);
}
/* Faixa âmbar de "próxima tentativa em Xmin" — sinaliza retry cooldown
sem competir visualmente com a barra de progresso. */
.pb-upload-retry {
background: var(--warning-bg);
border: 1px solid #fde68a;
border-left: 3px solid var(--warning);
color: #78350f;
padding: var(--space-2) var(--space-3);
border-radius: var(--r-sm);
font-size: var(--fs-sm);
font-variant-numeric: tabular-nums;
}
.pb-upload-retry strong {
color: #78350f;
font-weight: 700;
}
/* ============================================================
18. Progress bar
============================================================ */
.pb-progress-wrap {
display: flex;
align-items: center;
gap: var(--space-3);
}
.pb-progress-track {
flex: 1;
height: 8px;
background: var(--bg-mute);
border-radius: var(--r-pill);
overflow: hidden;
box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
}
.pb-progress-fill {
height: 100%;
transition: width 240ms cubic-bezier(0.4, 0, 0.2, 1);
border-radius: var(--r-pill);
position: relative;
}
.pb-progress-running {
background: linear-gradient(90deg, var(--accent) 0%, #4d7ee8 100%);
}
.pb-progress-running::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.25) 50%,
transparent 100%);
animation: pb-progress-shimmer 1.6s linear infinite;
background-size: 200% 100%;
}
@keyframes pb-progress-shimmer {
from { background-position: 200% 0; }
to { background-position: -200% 0; }
}
.pb-progress-success { background: var(--success); }
.pb-progress-failed { background: var(--danger); }
.pb-progress-pending { background: var(--warning); }
.pb-progress-superseded { background: var(--text-faint); }
.pb-progress-text {
font-size: var(--fs-sm);
color: var(--text-muted);
font-variant-numeric: tabular-nums;
min-width: 3.5em;
text-align: right;
font-weight: 500;
}
/* ============================================================
19. Upload stats
============================================================ */
.pb-upload-stats {
display: flex;
gap: var(--space-6);
flex-wrap: wrap;
}
.pb-upload-stat {
display: inline-flex;
flex-direction: column;
gap: var(--space-1);
font-size: var(--fs-base);
}
.pb-upload-stat-label {
color: var(--text-muted);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
font-weight: 700;
}
.pb-upload-stat-value {
color: var(--text-strong);
font-variant-numeric: tabular-nums;
font-weight: 600;
}
/* ============================================================
20. Layout público (cliente final)
============================================================ */
.pb-public-shell {
min-height: 100vh;
background: var(--bg-app);
display: flex;
flex-direction: column;
}
.pb-public-header {
background: var(--bg-shell);
color: #ffffff;
padding: var(--space-3) var(--space-8);
display: flex;
align-items: center;
gap: var(--space-8);
border-bottom: 3px solid var(--accent);
box-shadow: var(--shadow);
}
.pb-public-header .pb-brand-name { font-size: var(--fs-md); }
.pb-public-actions { display: flex; gap: var(--space-3); margin-left: auto; }
.pb-public-link {
color: var(--text-inverse-muted);
text-decoration: none;
font-size: var(--fs-base);
padding: var(--space-1) var(--space-3);
border-radius: var(--r-sm);
font-weight: 500;
transition: background var(--t-fast), color var(--t-fast);
}
.pb-public-link:hover {
background: rgba(255, 255, 255, 0.06);
color: #ffffff;
text-decoration: none;
}
.pb-public-cta {
display: inline-flex;
align-items: center;
gap: var(--space-2);
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.16);
padding: var(--space-2) var(--space-4);
}
.pb-public-cta:hover {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.28);
}
.pb-public-cta svg { display: block; }
.pb-public-content {
flex: 1;
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: var(--space-8);
}
.pb-public-title {
font-size: var(--fs-2xl);
margin: 0 0 var(--space-1) 0;
letter-spacing: -0.02em;
color: var(--text-strong);
}
.pb-public-machine {
color: var(--text-muted);
margin: 0 0 var(--space-6) 0;
font-size: var(--fs-md);
font-family: var(--font-mono);
}
/* -- Identidade do cliente (faixa acima do hero) --------------------------
A primeira coisa que o cliente final lê na home é "isto é MEU backup".
Faixa fina, número tabular tipo "número de conta", regulada por um
filete colorido que herda o tom do veredicto (success/running/failed…) —
amarra identidade ao estado sem repetir cor cheia. Só renderiza quando
ativado; pré-ativação o hero fica como antes. */
.pb-public-identity {
display: flex;
align-items: baseline;
gap: var(--space-3);
margin-bottom: var(--space-3);
padding: var(--space-3) var(--space-5);
border-radius: var(--r);
background: var(--bg-surface);
border: 1px solid var(--border-faint);
border-left: 6px solid var(--text-faint);
box-shadow: var(--shadow-xs);
}
.pb-public-identity-code {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: 1.35rem;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--text-strong);
flex-shrink: 0;
}
.pb-public-identity-sep {
color: var(--text-faint);
flex-shrink: 0;
}
.pb-public-identity-name {
font-size: var(--fs-md);
color: var(--text-soft);
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
/* Tom por estado — mesma matriz semântica do hero, aplicada só no filete. */
.pb-public-identity-success { border-left-color: var(--success); color: var(--success); }
.pb-public-identity-running { border-left-color: var(--running); color: var(--running); }
.pb-public-identity-failed { border-left-color: var(--danger); color: var(--danger); }
.pb-public-identity-warning { border-left-color: var(--warning); color: var(--warning); }
.pb-public-identity-neutral { border-left-color: var(--accent); color: var(--accent); }
/* -- Hero verdict ----------------------------------------------------------
Manchete editorial no topo da home pública. Carrega "uma palavra" do estado
global do backup — sucesso, em curso, atenção. O spine de 6px e o fundo
pastel reusam os mesmos tokens semânticos dos cards e dos painéis, criando
uma linguagem visual: todo container com estado tem cor à esquerda. */
.pb-public-hero {
margin-bottom: var(--space-6);
padding: var(--space-6) var(--space-6) var(--space-6) var(--space-8);
border-radius: var(--r-lg);
border: 1px solid var(--border-faint);
border-left: 6px solid var(--text-faint);
background: var(--bg-subtle);
position: relative;
overflow: hidden;
}
.pb-public-hero::after {
/* Sutil mancha de cor difusa do lado direito — adiciona "atmosfera"
sem competir com o texto. */
content: '';
position: absolute;
top: -40%;
right: -8%;
width: 380px;
height: 380px;
background: radial-gradient(circle, currentColor 0%, transparent 65%);
opacity: 0.08;
pointer-events: none;
}
.pb-public-hero-eyebrow {
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
font-size: var(--fs-xs);
font-weight: 600;
color: var(--text-muted);
margin-bottom: var(--space-3);
font-family: var(--font-mono);
}
.pb-public-hero-headline {
margin: 0;
font-size: 2.75rem;
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1.05;
color: var(--text-strong);
}
.pb-public-hero-sub {
margin: var(--space-3) 0 0;
color: var(--text-muted);
font-size: var(--fs-sm);
line-height: 1.5;
}
/* Tom por estado — cor do spine, cor do título, cor da mancha radial. */
.pb-public-hero-success { border-left-color: var(--success); color: var(--success); }
.pb-public-hero-success .pb-public-hero-headline { color: var(--success); }
.pb-public-hero-running { border-left-color: var(--running); color: var(--running); }
.pb-public-hero-running .pb-public-hero-headline { color: var(--running); }
.pb-public-hero-failed { border-left-color: var(--danger); color: var(--danger); }
.pb-public-hero-failed .pb-public-hero-headline { color: var(--danger); }
.pb-public-hero-warning { border-left-color: var(--warning); color: var(--warning); }
.pb-public-hero-warning .pb-public-hero-headline { color: var(--warning); }
.pb-public-hero-neutral { border-left-color: var(--accent); color: var(--accent); }
.pb-public-hero-neutral .pb-public-hero-headline { color: var(--accent-strong); }
/* -- Stats (5 cards menores que o admin pra caber a faixa) ---------------- */
.pb-public-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--space-3);
margin-bottom: var(--space-5);
}
.pb-public-stats .pb-card-value { font-size: var(--fs-2xl); }
/* -- Database panels ------------------------------------------------------- */
.pb-public-databases { display: flex; flex-direction: column; gap: var(--space-4); }
.pb-db-panel {
background: var(--bg-surface);
border: 1px solid var(--border-faint);
border-left: 6px solid var(--text-faint);
border-radius: var(--r);
padding: var(--space-5) var(--space-6);
box-shadow: var(--shadow-xs);
}
.pb-db-panel-success { border-left-color: var(--success); }
.pb-db-panel-running { border-left-color: var(--running); }
.pb-db-panel-failed { border-left-color: var(--danger); }
.pb-db-panel-pending { border-left-color: var(--warning); }
.pb-db-panel-neutral { border-left-color: var(--text-faint); }
.pb-db-panel-header {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--space-3);
margin-bottom: var(--space-3);
}
.pb-db-panel-title { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.pb-db-panel-name {
margin: 0;
font-size: var(--fs-xl);
font-weight: 600;
letter-spacing: -0.015em;
color: var(--text-strong);
}
.pb-db-panel-streak {
display: inline-flex;
align-items: baseline;
gap: var(--space-1);
padding: 4px var(--space-3);
background: var(--success-bg);
color: var(--success);
border-radius: var(--r-pill);
font-size: var(--fs-sm);
font-weight: 500;
}
.pb-db-panel-streak-num { font-size: var(--fs-md); font-weight: 700; font-variant-numeric: tabular-nums; }
.pb-db-panel-facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--space-3) var(--space-5);
margin: var(--space-3) 0;
padding: var(--space-3) 0;
border-top: 1px solid var(--border-faint);
border-bottom: 1px solid var(--border-faint);
}
.pb-db-panel-facts > div { display: flex; flex-direction: column; gap: 2px; }
.pb-db-panel-facts dt {
margin: 0;
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--text-muted);
font-weight: 600;
}
.pb-db-panel-facts dd {
margin: 0;
font-size: var(--fs-md);
color: var(--text-strong);
font-variant-numeric: tabular-nums;
}
/* -- Tabela compacta de histórico por banco ------------------------------- */
.pb-db-history-table {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-sm);
}
.pb-db-history-table th,
.pb-db-history-table td {
padding: var(--space-2) var(--space-3);
text-align: left;
border-bottom: 1px solid var(--border-faint);
font-variant-numeric: tabular-nums;
}
.pb-db-history-table th {
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
font-size: var(--fs-xs);
}
.pb-db-history-table tbody tr:last-child td { border-bottom: 0; }
.pb-db-history-table tbody tr:hover { background: var(--bg-subtle); }
.pb-db-panel-empty { margin: var(--space-3) 0 0; }
/* ============================================================
20b. App footer (assinatura global — todos os layouts)
------------------------------------------------------------
Refined operational. Discreto em repouso (hairline divider +
tons muted), link de marca acende em accent no hover. Variante
automática no EmptyLayout pela seleção contextual (.pb-empty-shell
.pb-app-footer) — fundo escuro do login pede contraste claro.
============================================================ */
.pb-app-footer {
flex-shrink: 0;
padding: var(--space-4) var(--space-6);
text-align: center;
background: var(--bg-surface);
border-top: 1px solid var(--border-faint);
font-size: var(--fs-xs);
color: var(--text-muted);
line-height: 1.55;
}
.pb-app-footer-note {
margin-bottom: var(--space-2);
color: var(--text-muted);
font-size: var(--fs-xs);
letter-spacing: 0.005em;
}
.pb-app-footer-brand {
display: inline-flex;
align-items: baseline;
flex-wrap: wrap;
justify-content: center;
gap: 0.45rem;
letter-spacing: 0.015em;
}
.pb-app-footer-prefix {
color: var(--text-faint);
}
.pb-app-footer-name {
color: var(--text-soft);
font-weight: 600;
letter-spacing: 0;
}
.pb-app-footer-sep {
color: var(--accent);
opacity: 0.5;
font-weight: 700;
padding: 0 0.15rem;
}
.pb-app-footer-link {
color: var(--text-muted);
text-decoration: none;
transition: color var(--t-fast);
}
.pb-app-footer-link:hover {
color: var(--accent);
text-decoration: none; /* anula o underline global de a:hover do reset */
}
/* Variante dark — quando o footer mora sobre o gradiente do EmptyLayout,
precisa inverter pra ficar legível e respeitar a paleta do shell escuro. */
.pb-empty-shell .pb-app-footer {
position: relative;
z-index: 2;
background: transparent;
border-top-color: rgba(226, 232, 240, 0.10);
color: var(--text-inverse-muted);
}
.pb-empty-shell .pb-app-footer-note,
.pb-empty-shell .pb-app-footer-prefix {
color: rgba(226, 232, 240, 0.45);
}
.pb-empty-shell .pb-app-footer-name {
color: var(--text-inverse);
}
.pb-empty-shell .pb-app-footer-sep {
color: #6e96e0; /* accent suavizado pra contraste no dark */
opacity: 0.7;
}
.pb-empty-shell .pb-app-footer-link {
color: var(--text-inverse-muted);
}
.pb-empty-shell .pb-app-footer-link:hover {
color: #93b9ff;
}
/* ============================================================
21. Login / Activate (EmptyLayout)
============================================================ */
.pb-empty-shell {
min-height: 100vh;
display: flex;
flex-direction: column;
background:
radial-gradient(ellipse at 20% 0%, rgba(36, 86, 214, 0.18) 0%, transparent 50%),
radial-gradient(ellipse at 80% 100%, rgba(36, 86, 214, 0.10) 0%, transparent 50%),
var(--bg-shell);
position: relative;
overflow: hidden;
}
.pb-empty-body {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
position: relative;
z-index: 1;
}
.pb-empty-shell::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
background-size: 48px 48px;
pointer-events: none;
mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
-webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}
.pb-login-card {
background: var(--bg-surface);
width: 400px;
max-width: 100%;
padding: var(--space-8);
border-radius: var(--r-lg);
box-shadow: var(--shadow-lg);
position: relative;
z-index: 1;
}
.pb-login-brand {
display: flex;
align-items: center;
gap: var(--space-3);
justify-content: center;
margin-bottom: var(--space-6);
}
.pb-login-brand .pb-brand-name {
color: var(--text-strong);
font-size: var(--fs-md);
}
.pb-login-title {
text-align: center;
margin: 0 0 var(--space-6) 0;
font-size: var(--fs-xl);
color: var(--text-strong);
letter-spacing: -0.02em;
}
.pb-login-error {
background: var(--danger-soft);
border: 1px solid #fcc4c4;
border-left: 3px solid var(--danger);
color: #991b1b;
padding: var(--space-3) var(--space-4);
border-radius: var(--r-sm);
margin-bottom: var(--space-4);
font-size: var(--fs-base);
line-height: 1.45;
}
.pb-login-error-detail {
margin-top: var(--space-2);
padding-top: var(--space-2);
border-top: 1px dashed #fcc4c4;
font-size: var(--fs-sm);
word-break: break-word;
}
.pb-login-success {
background: var(--success-soft);
border: 1px solid #bbf7d0;
border-left: 3px solid var(--success);
color: #166534;
padding: var(--space-3) var(--space-4);
border-radius: var(--r-sm);
margin-bottom: var(--space-4);
font-size: var(--fs-base);
}
.pb-login-hint {
color: var(--text-muted);
font-size: var(--fs-sm);
margin: 0 0 var(--space-4) 0;
line-height: 1.5;
}
.pb-login-hint code {
background: var(--bg-mute);
padding: 0.1rem 0.35rem;
border-radius: var(--r-sm);
font-size: 0.92em;
color: var(--text-strong);
}
.pb-login-form {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.pb-login-label {
display: flex;
flex-direction: column;
gap: var(--space-2);
font-size: var(--fs-xs);
color: var(--text-soft);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
}
.pb-login-label input {
padding: 0.65rem var(--space-3);
border: 1px solid var(--border-strong);
border-radius: var(--r-sm);
font: inherit;
font-size: var(--fs-base);
font-weight: 400;
text-transform: none;
letter-spacing: normal;
color: var(--text-strong);
background: var(--bg-surface);
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.pb-login-label input:focus {
outline: none;
border-color: var(--accent);
box-shadow: var(--ring);
}
.pb-login-label input::placeholder {
color: var(--text-faint);
text-transform: none;
letter-spacing: normal;
}
/* Toolbar de filtros à direita de pb-section-header (busca + ações) */
.pb-dashboard-toolbar {
display: flex;
align-items: stretch;
gap: var(--space-2);
flex-wrap: nowrap;
}
.pb-search-input {
border: 1px solid var(--border-strong);
border-radius: var(--r-sm);
padding: 0.5rem var(--space-3);
background: var(--bg-surface);
color: var(--text);
font: inherit;
/* line-height: normal (não 1.2) — 1.2 apertava a caixa e cortava o
descender de letras como "g"/"p" no campo de busca. */
line-height: normal;
width: 240px;
max-width: 100%;
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.pb-search-input::placeholder { color: var(--text-faint); }
.pb-search-input:focus {
border-color: var(--accent);
box-shadow: var(--ring);
outline: none;
}
/* Checkbox "Manter conectado" */
.pb-login-remember {
display: flex;
align-items: center;
gap: var(--space-2);
margin-top: calc(-1 * var(--space-1));
font-size: var(--fs-sm);
color: var(--text-soft);
cursor: pointer;
user-select: none;
}
.pb-login-remember input[type="checkbox"] {
width: 16px;
height: 16px;
margin: 0;
accent-color: var(--accent);
cursor: pointer;
}
.pb-login-remember:hover { color: var(--text); }
/* primary do login tem um pouco mais de presença */
.pb-login-card .pb-btn-primary {
margin-top: var(--space-2);
padding: 0.7rem var(--space-4);
font-size: var(--fs-md);
width: 100%;
}
/* ============================================================
22. Utility / responsive
============================================================ */
/* ============================================================
22b. Filter bar — barra de filtro acima de listas
============================================================ */
/* Barra horizontal com label + select compacto + contador.
Estilo "operacional minimal" — sem cartão de fundo, alinhado com a
composição refined das outras telas. */
.pb-filterbar {
display: flex;
align-items: center;
gap: var(--space-3);
margin: 0 0 var(--space-4) 0;
padding: var(--space-3) var(--space-5);
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
box-shadow: var(--shadow-xs);
flex-wrap: wrap;
}
.pb-filterbar-label {
font-size: var(--fs-xs);
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
margin: 0;
}
.pb-filterbar-select {
padding: 0.4rem 1.8rem 0.4rem var(--space-3);
border: 1px solid var(--border-strong);
border-radius: var(--r-sm);
font: inherit;
font-size: var(--fs-base);
background: var(--bg-surface);
color: var(--text-strong);
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.6rem center;
background-size: 10px 7px;
min-width: 220px;
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.pb-filterbar-select:hover {
border-color: var(--text-faint);
}
.pb-filterbar-select:focus {
outline: none;
border-color: var(--accent);
box-shadow: var(--ring);
}
.pb-filterbar-count {
margin-left: auto;
font-size: var(--fs-sm);
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
.pb-filterbar-count strong {
color: var(--text-strong);
font-weight: 600;
}
/* ============================================================
23. Toasts (top-center notifications)
============================================================ */
/* Container fixo no topo central — agrupa toasts em coluna vertical. */
.pb-toaster {
position: fixed;
top: var(--space-4);
left: 50%;
transform: translateX(-50%);
z-index: 9000;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
pointer-events: none; /* gaps clicáveis não — só os toasts em si */
max-width: calc(100vw - 2 * var(--space-4));
width: max-content;
}
/* Toast individual.
- Estrutura: ícone | mensagem | botão fechar | barra de progresso.
- Slide+fade do topo via animation.
- Cor dirigida pelas custom-props --pb-toast-{accent,bg,border}.
*/
.pb-toast {
pointer-events: auto;
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--space-3);
min-width: 320px;
max-width: min(560px, 100%);
padding: var(--space-3) var(--space-4);
padding-right: var(--space-5);
background: var(--pb-toast-bg);
border: 1px solid var(--pb-toast-border);
border-left: 4px solid var(--pb-toast-accent);
border-radius: var(--r-md);
box-shadow: var(--shadow-lg);
color: var(--text-strong);
font-size: var(--fs-base);
line-height: 1.45;
cursor: pointer;
overflow: hidden;
transform-origin: top center;
animation: pb-toast-in 240ms cubic-bezier(0.16, 1, 0.3, 1);
transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.pb-toast:hover {
transform: translateY(-1px);
box-shadow: 0 22px 50px -18px rgba(15, 23, 42, 0.30),
0 6px 14px -4px rgba(15, 23, 42, 0.12);
}
@keyframes pb-toast-in {
from { opacity: 0; transform: translateY(-16px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Ícone circular à esquerda — cor sólida no fundo do accent. */
.pb-toast-icon {
width: 28px;
height: 28px;
border-radius: var(--r-pill);
background: var(--pb-toast-accent);
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.95rem;
line-height: 1;
flex-shrink: 0;
box-shadow: 0 0 0 3px var(--pb-toast-bg),
0 0 0 4px color-mix(in srgb, var(--pb-toast-accent) 25%, transparent);
}
.pb-toast-msg {
min-width: 0;
word-break: break-word;
color: var(--pb-toast-text);
font-weight: 500;
}
/* Botão × pra fechar — discreto, hover aumenta opacidade. */
.pb-toast-close {
background: transparent;
border: none;
color: var(--pb-toast-text);
opacity: 0.55;
font-size: 1.25rem;
line-height: 1;
padding: 0 var(--space-1);
cursor: pointer;
transition: opacity var(--t-fast);
align-self: start;
}
.pb-toast-close:hover { opacity: 1; }
/* Barra de progresso embaixo — drena durante a duração total via CSS animation. */
.pb-toast-bar {
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 100%;
background: var(--pb-toast-accent);
transform-origin: left;
animation: pb-toast-drain var(--pb-toast-duration, 4000ms) linear forwards;
opacity: 0.7;
}
@keyframes pb-toast-drain {
from { transform: scaleX(1); }
to { transform: scaleX(0); }
}
/* Paletas por severidade — cada uma define as 4 custom props. */
.pb-toast-success {
--pb-toast-accent: #15803d;
--pb-toast-bg: #ecfdf5;
--pb-toast-border: #a7f3d0;
--pb-toast-text: #064e3b;
}
.pb-toast-warning {
--pb-toast-accent: #b45309;
--pb-toast-bg: #fffbeb;
--pb-toast-border: #fde68a;
--pb-toast-text: #78350f;
}
.pb-toast-error {
--pb-toast-accent: #b91c1c;
--pb-toast-bg: #fef2f2;
--pb-toast-border: #fecaca;
--pb-toast-text: #7f1d1d;
}
.pb-toast-info {
--pb-toast-accent: var(--accent);
--pb-toast-bg: var(--accent-bg);
--pb-toast-border: var(--accent-soft);
--pb-toast-text: var(--accent-strong);
}
/* Mobile: ocupa quase toda largura, gap menor. */
@media (max-width: 600px) {
.pb-toaster { top: var(--space-2); width: calc(100vw - 2 * var(--space-3)); }
.pb-toast { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.pb-toast { animation: none; }
.pb-toast-bar { animation: none; transform: scaleX(0); }
}
@media (max-width: 900px) {
/* Layout colapsa pra coluna única — sidebar vira drawer off-canvas. */
.pb-shell { grid-template-columns: 1fr; }
.pb-sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 260px;
max-width: 80vw;
z-index: 50;
transform: translateX(-100%);
transition: transform var(--t-base);
box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
}
.pb-sidebar-toggle:checked ~ .pb-sidebar {
transform: translateX(0);
}
.pb-sidebar-toggle:checked ~ .pb-sidebar-overlay {
display: block;
opacity: 1;
}
.pb-hamburger { display: flex; }
.pb-sidebar-close { display: inline-flex; }
.pb-content { padding: var(--space-4); }
.pb-public-content { padding: var(--space-4); }
.pb-public-header { padding: var(--space-3) var(--space-4); }
.pb-section { padding: var(--space-4); }
/* topbar precisa de bg sólido pra hamburger ficar legível por cima dele */
.pb-topbar { padding: 0 var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
.pb-sidebar,
.pb-hamburger span,
.pb-card,
.pb-progress-fill,
.pb-sidebar-overlay { transition: none !important; }
.pb-progress-running::after,
.pb-badge-running::before { animation: none !important; }
}
/* ============================================================
20. Disk space — admin card + public hero band
============================================================
Linguagem visual: "instrument readout". Barra horizontal empilhada com
ticks de threshold (warn em 75%, crit em 90%), grande % numérico em
tabular-nums (monospace pra dígitos), advice condicional em estado
degradado. Cores espelham o sistema semântico (success/warning/danger).
*/
/* ---- Admin card ---------------------------------------------------------- */
.pb-disk-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-left: 4px solid var(--border-strong);
border-radius: var(--r-md);
padding: var(--space-5) var(--space-6);
margin-bottom: var(--space-6);
box-shadow: var(--shadow-xs);
position: relative;
overflow: hidden;
transition: border-color var(--t-base);
}
/* Sutil mancha radial na borda direita — adiciona "atmosfera" cromática
coerente com o estado, sem competir com a leitura. Reusa o padrão do
pb-public-hero pra manter a linguagem visual entre admin e público. */
.pb-disk-card::after {
content: '';
position: absolute;
top: -60%;
right: -10%;
width: 360px;
height: 360px;
background: radial-gradient(circle, currentColor 0%, transparent 65%);
opacity: 0.05;
pointer-events: none;
color: var(--text-faint);
transition: opacity var(--t-base);
}
.pb-disk-card-ok { border-left-color: var(--success); color: var(--success); }
.pb-disk-card-warning { border-left-color: var(--warning); color: var(--warning); }
.pb-disk-card-critical { border-left-color: var(--danger); color: var(--danger); }
.pb-disk-card-unknown { border-left-color: var(--text-faint); }
.pb-disk-card-critical::after { opacity: 0.10; }
.pb-disk-card-warning::after { opacity: 0.08; }
.pb-disk-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--space-4);
margin-bottom: var(--space-5);
flex-wrap: wrap;
position: relative;
z-index: 1;
}
.pb-disk-eyebrow {
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
font-size: var(--fs-xs);
font-weight: 600;
color: var(--text-muted);
font-family: var(--font-mono);
margin-bottom: var(--space-1);
}
.pb-disk-title {
margin: 0;
font-size: var(--fs-xl);
font-weight: 600;
letter-spacing: -0.015em;
color: var(--text-strong);
display: flex;
align-items: baseline;
gap: var(--space-3);
flex-wrap: wrap;
}
.pb-disk-drive {
font-family: var(--font-mono);
font-size: var(--fs-2xl);
font-weight: 700;
color: var(--text-strong);
letter-spacing: -0.02em;
}
.pb-disk-vol-label {
font-size: var(--fs-sm);
font-weight: 500;
color: var(--text-muted);
letter-spacing: 0;
padding: 2px var(--space-2);
background: var(--bg-mute);
border-radius: var(--r-pill);
border: 1px solid var(--border-faint);
}
.pb-disk-verdict {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 4px var(--space-3);
border-radius: var(--r-pill);
background: var(--bg-mute);
border: 1px solid var(--border-faint);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--text-soft);
user-select: none;
}
.pb-disk-verdict-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--text-faint);
flex-shrink: 0;
}
.pb-disk-card-ok .pb-disk-verdict { background: var(--success-bg); border-color: color-mix(in srgb, var(--success) 22%, transparent); color: var(--success); }
.pb-disk-card-ok .pb-disk-verdict-dot { background: var(--success); box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 55%, transparent); animation: pb-topbar-pulse 2.4s ease-out infinite; }
.pb-disk-card-warning .pb-disk-verdict { background: var(--warning-bg); border-color: color-mix(in srgb, var(--warning) 22%, transparent); color: var(--warning); }
.pb-disk-card-warning .pb-disk-verdict-dot { background: var(--warning); }
.pb-disk-card-critical .pb-disk-verdict { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 25%, transparent); color: var(--danger); }
.pb-disk-card-critical .pb-disk-verdict-dot {
background: var(--danger);
animation: pb-disk-pulse-danger 1.2s ease-in-out infinite;
}
@keyframes pb-disk-pulse-danger {
0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 65%, transparent); }
50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--danger) 0%, transparent); }
}
/* ---- Gauge ------------------------------------------------------------- */
.pb-disk-gauge {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: var(--space-5);
position: relative;
z-index: 1;
}
.pb-disk-gauge-track {
position: relative;
height: 28px;
background: var(--bg-mute);
border: 1px solid var(--border-faint);
border-radius: var(--r-pill);
overflow: hidden;
}
.pb-disk-gauge-fill {
height: 100%;
width: var(--pct, 0%);
/* Cor sólida derivada do status no card — usar gradiente dentro do fill
distorce a paleta em percentuais baixos (verde→amarelo→vermelho ficaria
comprimido). O sinal cromático vem do status do card; os TICKS de
threshold (75% / 90%) ficam visíveis sobre o fill ou sobre a track. */
background: var(--success);
border-radius: var(--r-pill) 0 0 var(--r-pill);
transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1),
background var(--t-base);
position: relative;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
inset 0 -1px 0 rgba(0, 0, 0, 0.06);
}
.pb-disk-card-warning .pb-disk-gauge-fill { background: var(--warning); }
.pb-disk-card-critical .pb-disk-gauge-fill { background: var(--danger); }
/* Critical: barra ganha "diagonal scanlines" sutis pra reforçar urgência */
.pb-disk-card-critical .pb-disk-gauge-fill {
background: repeating-linear-gradient(
45deg,
var(--danger) 0,
var(--danger) 10px,
color-mix(in srgb, var(--danger) 80%, black) 10px,
color-mix(in srgb, var(--danger) 80%, black) 20px);
animation: pb-disk-scanlines 1.6s linear infinite;
}
@keyframes pb-disk-scanlines {
from { background-position: 0 0; }
to { background-position: 28px 0; }
}
/* Threshold ticks — hairlines verticais que mostram o usuário onde
warning e critical começam. Ficam por cima do fill (z-index 1). */
.pb-disk-gauge-tick {
position: absolute;
top: 0;
bottom: 0;
left: var(--at, 50%);
width: 1px;
pointer-events: none;
}
.pb-disk-gauge-tick::before {
content: '';
position: absolute;
top: 4px;
bottom: 4px;
left: 0;
width: 1px;
background: rgba(255, 255, 255, 0.55);
mix-blend-mode: overlay;
}
.pb-disk-gauge-tick-warn::before { background: rgba(255, 255, 255, 0.4); }
.pb-disk-gauge-tick-crit::before { background: rgba(0, 0, 0, 0.18); }
.pb-disk-gauge-readout {
text-align: right;
line-height: 1;
}
.pb-disk-gauge-pct {
font-family: var(--font-mono);
font-size: 2.5rem;
font-weight: 700;
color: var(--text-strong);
letter-spacing: -0.04em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.pb-disk-card-ok .pb-disk-gauge-pct { color: var(--text-strong); }
.pb-disk-card-warning .pb-disk-gauge-pct { color: var(--warning); }
.pb-disk-card-critical .pb-disk-gauge-pct { color: var(--danger); }
.pb-disk-gauge-pct-unit {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-muted);
margin-left: 2px;
}
.pb-disk-gauge-pct-sub {
margin-top: var(--space-1);
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
color: var(--text-muted);
font-weight: 600;
font-family: var(--font-mono);
}
/* ---- Stats grid -------------------------------------------------------- */
.pb-disk-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: var(--space-5);
margin: var(--space-5) 0 var(--space-4);
padding: var(--space-4) 0 var(--space-2);
border-top: 1px solid var(--border-faint);
position: relative;
z-index: 1;
}
.pb-disk-stats > div { margin: 0; }
.pb-disk-stats dt {
margin: 0;
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
font-size: 0.6875rem;
font-weight: 600;
color: var(--text-muted);
font-family: var(--font-mono);
margin-bottom: var(--space-1);
}
.pb-disk-stats dd {
margin: 0;
font-size: var(--fs-lg);
font-weight: 600;
color: var(--text-strong);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.pb-disk-stats .pb-disk-stat-free { color: var(--success); }
.pb-disk-card-warning .pb-disk-stats .pb-disk-stat-free { color: var(--warning); }
.pb-disk-card-critical .pb-disk-stats .pb-disk-stat-free { color: var(--danger); }
/* ---- Footer + advice --------------------------------------------------- */
.pb-disk-footer {
display: flex;
align-items: center;
gap: var(--space-3);
padding-top: var(--space-3);
border-top: 1px dashed var(--border-faint);
position: relative;
z-index: 1;
}
.pb-disk-footer-label {
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
font-size: var(--fs-xs);
font-weight: 600;
color: var(--text-muted);
font-family: var(--font-mono);
flex-shrink: 0;
}
.pb-disk-footer-path {
font-family: var(--font-mono);
font-size: var(--fs-sm);
color: var(--text-soft);
background: var(--bg-mute);
padding: 3px var(--space-2);
border-radius: var(--r-sm);
border: 1px solid var(--border-faint);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.pb-disk-advice {
margin-top: var(--space-4);
padding: var(--space-3) var(--space-4);
border-radius: var(--r);
font-size: var(--fs-sm);
line-height: 1.5;
position: relative;
z-index: 1;
}
.pb-disk-advice-warn {
background: var(--warning-bg);
color: #7a3e00;
border: 1px solid color-mix(in srgb, var(--warning) 28%, transparent);
}
.pb-disk-advice-crit {
background: var(--danger-bg);
color: #7f1d1d;
border: 1px solid color-mix(in srgb, var(--danger) 32%, transparent);
}
.pb-disk-error {
padding: var(--space-3) var(--space-4);
border-radius: var(--r);
background: var(--bg-mute);
border: 1px dashed var(--border-strong);
color: var(--text-soft);
font-size: var(--fs-sm);
line-height: 1.5;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.pb-disk-error strong { color: var(--text-strong); }
/* ---- Public sanitized band -------------------------------------------- */
/* Versão pública: omite path, drive letter, label. Mostra só barra grande
+ "X GB livres" como headline positiva (o usuário se importa com o que
tem, não com o que foi gasto). Mais larga e contemplativa que o admin. */
.pb-public-disk {
margin-bottom: var(--space-5);
background: var(--bg-surface);
border: 1px solid var(--border-faint);
border-left: 6px solid var(--text-faint);
border-radius: var(--r-lg);
padding: var(--space-5) var(--space-6);
box-shadow: var(--shadow-xs);
display: grid;
grid-template-columns: minmax(260px, 1fr) minmax(220px, 1.4fr);
gap: var(--space-6);
align-items: center;
position: relative;
overflow: hidden;
}
.pb-public-disk::after {
content: '';
position: absolute;
top: -60%;
right: -10%;
width: 320px;
height: 320px;
background: radial-gradient(circle, currentColor 0%, transparent 65%);
opacity: 0.07;
pointer-events: none;
}
.pb-public-disk-ok { border-left-color: var(--success); color: var(--success); }
.pb-public-disk-warning { border-left-color: var(--warning); color: var(--warning); }
.pb-public-disk-critical { border-left-color: var(--danger); color: var(--danger); }
.pb-public-disk-neutral { border-left-color: var(--text-faint); }
.pb-public-disk-eyebrow {
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
font-size: var(--fs-xs);
font-weight: 600;
color: var(--text-muted);
font-family: var(--font-mono);
margin-bottom: var(--space-2);
}
.pb-public-disk-headline {
display: flex;
align-items: baseline;
gap: var(--space-2);
flex-wrap: wrap;
}
.pb-public-disk-free {
font-size: 2.5rem;
font-weight: 700;
color: var(--text-strong);
letter-spacing: -0.035em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.pb-public-disk-ok .pb-public-disk-free { color: var(--success); }
.pb-public-disk-warning .pb-public-disk-free { color: var(--warning); }
.pb-public-disk-critical .pb-public-disk-free { color: var(--danger); }
.pb-public-disk-free-tag {
font-size: var(--fs-lg);
color: var(--text-muted);
font-weight: 500;
}
.pb-public-disk-sub {
margin-top: var(--space-2);
color: var(--text-soft);
font-size: var(--fs-sm);
}
.pb-public-disk-status {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-3);
padding: 3px var(--space-3);
border-radius: var(--r-pill);
background: var(--bg-mute);
border: 1px solid var(--border-faint);
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
font-weight: 600;
color: var(--text-soft);
font-family: var(--font-mono);
}
.pb-public-disk-status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--text-faint);
flex-shrink: 0;
}
.pb-public-disk-ok .pb-public-disk-status { background: var(--success-bg); border-color: color-mix(in srgb, var(--success) 22%, transparent); color: var(--success); }
.pb-public-disk-ok .pb-public-disk-status-dot { background: var(--success); animation: pb-topbar-pulse 2.4s ease-out infinite; }
.pb-public-disk-warning .pb-public-disk-status { background: var(--warning-bg); border-color: color-mix(in srgb, var(--warning) 22%, transparent); color: var(--warning); }
.pb-public-disk-warning .pb-public-disk-status-dot { background: var(--warning); }
.pb-public-disk-critical .pb-public-disk-status { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 28%, transparent); color: var(--danger); }
.pb-public-disk-critical .pb-public-disk-status-dot { background: var(--danger); animation: pb-disk-pulse-danger 1.2s ease-in-out infinite; }
.pb-public-disk-bar {
position: relative;
height: 56px;
background: var(--bg-mute);
border: 1px solid var(--border-faint);
border-radius: var(--r-md);
overflow: hidden;
}
.pb-public-disk-bar-fill {
height: 100%;
width: var(--pct, 0%);
background: var(--success);
transition: width 800ms cubic-bezier(0.22, 1, 0.36, 1),
background var(--t-base);
border-radius: var(--r-md) 0 0 var(--r-md);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22),
inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}
.pb-public-disk-warning .pb-public-disk-bar-fill { background: var(--warning); }
.pb-public-disk-critical .pb-public-disk-bar-fill { background: var(--danger); }
.pb-public-disk-critical .pb-public-disk-bar-fill {
background: repeating-linear-gradient(
45deg,
var(--danger) 0,
var(--danger) 14px,
color-mix(in srgb, var(--danger) 78%, black) 14px,
color-mix(in srgb, var(--danger) 78%, black) 28px);
animation: pb-disk-scanlines 1.8s linear infinite;
}
.pb-public-disk-bar-label {
position: absolute;
top: 50%;
right: var(--space-4);
transform: translateY(-50%);
font-family: var(--font-mono);
font-size: var(--fs-xl);
font-weight: 700;
color: var(--text-strong);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
pointer-events: none;
z-index: 1;
}
.pb-public-disk-bar-label span {
font-size: var(--fs-md);
color: var(--text-muted);
font-weight: 600;
margin-left: 1px;
}
@media (max-width: 720px) {
.pb-public-disk {
grid-template-columns: 1fr;
gap: var(--space-4);
}
.pb-public-disk-free { font-size: 1.875rem; }
.pb-disk-gauge {
grid-template-columns: 1fr;
gap: var(--space-3);
}
.pb-disk-gauge-readout { text-align: left; }
.pb-disk-gauge-pct { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
.pb-disk-card-critical .pb-disk-gauge-fill,
.pb-public-disk-critical .pb-public-disk-bar-fill { animation: none !important; }
.pb-disk-gauge-fill,
.pb-public-disk-bar-fill { transition: none !important; }
.pb-disk-card-critical .pb-disk-verdict-dot,
.pb-public-disk-critical .pb-public-disk-status-dot,
.pb-public-disk-ok .pb-public-disk-status-dot { animation: none !important; }
}
/* ---------------------------------------------------------------------------
Reativar instalação (/settings → seção Cliente) — botão trigger + modal
com warning strip + dual-column comparison + key input mono.
--------------------------------------------------------------------------- */
/* Botão "Reativar" no header da seção Cliente. Reusa pb-btn-secondary pb-btn-sm
e adiciona só o ícone de "girar" ↻ que ganha um spin sutil no hover —
sinaliza renovação sem ser barulhento. */
.pb-reactivate-trigger {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.pb-reactivate-trigger-icon {
display: inline-block;
font-size: 1.05rem;
line-height: 1;
transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.pb-reactivate-trigger:hover .pb-reactivate-trigger-icon {
transform: rotate(180deg);
}
/* Strip de aviso no topo do modal — tom warning (não danger) porque a ação
é reversível (basta entrar de novo); chamar atenção sem soar como alarme. */
.pb-reactivate-warning {
display: flex;
gap: var(--space-3);
align-items: flex-start;
padding: var(--space-3) var(--space-4);
background: var(--warning-soft);
border: 1px solid color-mix(in srgb, var(--warning) 22%, transparent);
border-left: 3px solid var(--warning);
border-radius: var(--r-md);
margin-bottom: var(--space-5);
font-size: var(--fs-sm);
line-height: 1.5;
}
.pb-reactivate-warning-icon {
flex: 0 0 auto;
font-size: 1.1rem;
color: var(--warning);
line-height: 1.3;
}
.pb-reactivate-warning strong {
display: block;
color: var(--warning);
font-weight: 600;
margin-bottom: 2px;
}
.pb-reactivate-warning span {
color: var(--text-soft);
}
.pb-reactivate-warning code {
background: rgba(180, 83, 9, 0.08);
color: var(--warning);
padding: 0 0.3rem;
border-radius: var(--r-sm);
}
/* Grid de comparação — duas colunas iguais, tints opostos (accent vs success).
Em telas < 540px colapsa pra coluna única empilhada. */
.pb-reactivate-compare {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
margin-bottom: var(--space-5);
}
.pb-reactivate-compare-col {
padding: var(--space-3) var(--space-4) var(--space-4);
border-radius: var(--r-md);
border: 1px solid var(--border-faint);
}
.pb-reactivate-compare-replace {
background: color-mix(in srgb, var(--accent-bg) 70%, transparent);
border-color: var(--accent-soft);
}
.pb-reactivate-compare-keep {
background: color-mix(in srgb, var(--success-bg) 55%, transparent);
border-color: color-mix(in srgb, var(--success) 18%, transparent);
}
.pb-reactivate-compare-title {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--fs-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
margin-bottom: var(--space-3);
line-height: 1;
}
.pb-reactivate-compare-replace .pb-reactivate-compare-title { color: var(--accent-strong); }
.pb-reactivate-compare-keep .pb-reactivate-compare-title { color: var(--success); }
.pb-reactivate-compare-glyph {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: var(--r-pill);
font-size: 0.75rem;
font-weight: 700;
}
.pb-reactivate-compare-replace .pb-reactivate-compare-glyph {
background: var(--accent);
color: white;
}
.pb-reactivate-compare-keep .pb-reactivate-compare-glyph {
background: var(--success);
color: white;
}
.pb-reactivate-compare ul {
list-style: none;
padding: 0;
margin: 0;
}
.pb-reactivate-compare li {
font-size: var(--fs-sm);
color: var(--text-strong);
padding: 3px 0;
line-height: 1.45;
}
.pb-reactivate-compare li::before {
content: '·';
display: inline-block;
width: 14px;
margin-right: var(--space-1);
color: var(--text-faint);
font-weight: 700;
text-align: center;
}
.pb-reactivate-compare li code {
background: rgba(15, 23, 42, 0.05);
color: var(--text);
padding: 0 0.3rem;
border-radius: var(--r-sm);
font-size: 0.92em;
}
/* Input da chave — fonte mono, letter-spacing aumentado pra cada caractere
"respirar" e revelar visualmente o formato XXXX-XXXX-XXXX. Centro alinhado
porque é o foco do form. */
.pb-reactivate-key-input {
font-family: var(--font-mono);
letter-spacing: 0.18em;
text-transform: uppercase;
font-size: 1.0625rem;
text-align: center;
padding: 0.6rem 0.75rem;
}
.pb-reactivate-key-input::placeholder {
letter-spacing: 0.18em;
color: var(--text-faint);
text-transform: uppercase;
}
@media (max-width: 540px) {
.pb-reactivate-compare {
grid-template-columns: 1fr;
}
}
/* ---------------------------------------------------------------------------
Telemetria (/telemetry) — strip de KPI, filterbar com grupos, tabela densa
e modal de detalhe com bloco pretty-JSON.
--------------------------------------------------------------------------- */
/* Foot dos KPI cards — linha discreta abaixo do número grande, dá contexto
sem competir com a hierarquia (label micro-caps + valor 3xl + foot fs-sm). */
.pb-card-foot {
margin-top: var(--space-2);
font-size: var(--fs-xs);
color: var(--text-muted);
letter-spacing: 0.005em;
}
.pb-card-tint-success .pb-card-foot { color: color-mix(in srgb, var(--success) 70%, var(--text-muted)); }
.pb-card-tint-pending .pb-card-foot { color: color-mix(in srgb, var(--warning) 70%, var(--text-muted)); }
.pb-card-tint-failed .pb-card-foot { color: color-mix(in srgb, var(--danger) 70%, var(--text-muted)); }
/* Filterbar com múltiplos grupos label+select. Cada grupo é um par
verticalmente colado; vários grupos respiram no flex. */
.pb-filterbar-group {
display: flex;
align-items: center;
gap: var(--space-2);
}
.pb-filterbar-action {
margin-left: var(--space-2);
}
/* Coluna "Último erro" — limita largura, pinta tom danger, mostra reticências
quando estoura. tooltip nativo (title) traz mensagem inteira. */
.pb-last-error {
display: inline-block;
max-width: 340px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--danger);
font-size: var(--fs-sm);
vertical-align: middle;
}
/* Cell secundária — texto auxiliar dentro de células (ex.: "execução: Failed",
"DatabaseId"). Tom muted, fs-xs, fica abaixo da linha principal. */
.pb-cell-primary { color: var(--text-strong); font-weight: 500; }
.pb-cell-sub {
display: block;
font-size: var(--fs-xs);
color: var(--text-muted);
margin-top: 2px;
}
/* Subtítulo dentro de modais — fica entre seções (info-grid → erro → payload). */
.pb-section-subtitle {
margin: var(--space-4) 0 var(--space-2);
font-size: var(--fs-xs);
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
}
/* Bloco de erro (string longa do servidor) — caixa tint danger + mono pra
evidenciar que é texto técnico bruto, não copy. */
.pb-error-block {
background: var(--danger-soft);
border: 1px solid color-mix(in srgb, var(--danger) 18%, transparent);
border-left: 3px solid var(--danger);
border-radius: var(--r-md);
padding: var(--space-3) var(--space-4);
color: var(--danger);
font-family: var(--font-mono);
font-size: var(--fs-sm);
white-space: pre-wrap;
word-break: break-word;
max-height: 160px;
overflow-y: auto;
}
/* Bloco pretty-JSON — fundo subtle + accent à esquerda + mono indent.
max-height pra não dominar o modal em payloads grandes. */
.pb-payload-block {
background: var(--bg-subtle);
border: 1px solid var(--border-faint);
border-left: 3px solid var(--accent);
border-radius: var(--r-md);
padding: var(--space-3) var(--space-4);
color: var(--text-strong);
font-family: var(--font-mono);
font-size: var(--fs-sm);
line-height: 1.55;
white-space: pre;
overflow: auto;
max-height: 320px;
margin: 0;
user-select: text;
}
/* ---------------------------------------------------------------------------
Folder picker (modal de seleção de pasta — /settings)
Aesthetic: refined operational — micro-caps + monospace path + chevron drift.
--------------------------------------------------------------------------- */
/* Strip de caminho atual: barra accent à esquerda + label micro-caps + path
monospace. Em drives view fica vazia com texto guia. */
.pb-picker-path {
display: flex;
align-items: baseline;
gap: var(--space-4);
padding: var(--space-3) var(--space-4);
background: var(--bg-mute);
border-radius: var(--r-md);
border-left: 3px solid var(--accent);
margin-bottom: var(--space-5);
overflow: hidden;
}
.pb-picker-path-label {
flex: 0 0 auto;
font-size: var(--fs-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--text-muted);
}
.pb-picker-path-value {
flex: 1;
min-width: 0;
font-family: var(--font-mono);
font-size: var(--fs-sm);
color: var(--text-strong);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
direction: ltr;
user-select: text;
}
.pb-picker-path-empty {
flex: 1;
font-size: var(--fs-sm);
color: var(--text-faint);
font-style: italic;
}
/* Cabeçalho da listagem: Voltar à esquerda, título micro-caps + contagem à direita. */
.pb-picker-listheader {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-3);
min-height: 32px;
}
.pb-picker-back {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0.35rem var(--space-3);
background: transparent;
border: 1px solid var(--border-strong);
border-radius: var(--r);
color: var(--text-soft);
font-family: var(--font-sans);
font-size: var(--fs-sm);
font-weight: 500;
cursor: pointer;
transition: background var(--t-fast), color var(--t-fast),
border-color var(--t-fast);
}
.pb-picker-back-arrow {
display: inline-block;
transition: transform var(--t-fast);
line-height: 1;
}
.pb-picker-back:hover:not(:disabled) {
background: var(--accent-bg);
color: var(--accent);
border-color: var(--accent);
}
.pb-picker-back:hover:not(:disabled) .pb-picker-back-arrow {
transform: translateX(-2px);
}
.pb-picker-back:disabled {
opacity: 0.42;
cursor: not-allowed;
}
.pb-picker-listmeta {
display: flex;
align-items: baseline;
gap: var(--space-2);
}
.pb-picker-listtitle {
font-size: var(--fs-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--text-muted);
}
.pb-picker-listcount {
font-size: var(--fs-xs);
color: var(--text-faint);
font-variant-numeric: tabular-nums;
letter-spacing: var(--tracking-wide);
}
/* Caixa da listagem em si — branco crisp com bordas suaves, altura fixa pra
garantir que a modal não pula entre views com poucos/muitos itens. */
.pb-picker-list {
border: 1px solid var(--border-faint);
border-radius: var(--r-md);
background: var(--bg-surface);
min-height: 260px;
max-height: 340px;
overflow-y: auto;
display: flex;
flex-direction: column;
box-shadow: var(--shadow-xs);
}
.pb-picker-row {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border: none;
background: transparent;
text-align: left;
cursor: pointer;
border-bottom: 1px solid var(--border-faint);
font-size: var(--fs-base);
color: var(--text-strong);
transition: background var(--t-fast);
font-family: var(--font-sans);
}
.pb-picker-row:last-child { border-bottom: none; }
.pb-picker-row:hover { background: var(--bg-subtle); }
.pb-picker-row:hover .pb-picker-row-name {
color: var(--accent);
}
.pb-picker-row:hover .pb-picker-row-chev {
color: var(--accent);
transform: translateX(3px);
}
.pb-picker-row:focus-visible {
outline: none;
background: var(--accent-bg);
box-shadow: inset 3px 0 0 var(--accent);
}
.pb-picker-row-icon {
flex: 0 0 auto;
font-size: 1.05rem;
line-height: 1;
width: 1.4rem;
text-align: center;
}
.pb-picker-row-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: color var(--t-fast);
}
.pb-picker-row-chev {
flex: 0 0 auto;
color: var(--text-faint);
font-size: 1.15rem;
line-height: 1;
transition: color var(--t-fast), transform var(--t-fast);
}
.pb-picker-empty {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-6) var(--space-4);
color: var(--text-muted);
font-size: var(--fs-sm);
text-align: center;
font-style: italic;
}
/* ============================================================
24. Monitoramento — dashboard público de TV (/monitoramento)
Alto contraste, fonte grande, leitura à distância.
============================================================ */
.pb-monitor-shell {
/* viewport-lock duro: shell tem altura definida (100vh) + overflow hidden,
o que torna o grid interno definite-size. Sem isso, 1fr em grid indefinite
resolve para max-content e a lista incha pra altura total das linhas,
quebrando o scroll interno do body. O fallback p/ viewports curtos vem
no @media (max-height: 899px) lá embaixo, não na altura do shell aqui */
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
background: radial-gradient(ellipse at top, #14213d 0%, #0a0f1e 65%);
color: #e6edf3;
padding: 1rem 1.5rem 1.1rem 1.5rem;
box-sizing: border-box;
font-family: var(--font-sans, system-ui, sans-serif);
}
.pb-monitor-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 0.6rem;
border-bottom: 2px solid rgba(36, 86, 214, 0.45);
margin-bottom: 0.85rem;
flex-shrink: 0;
}
.pb-monitor-header-brand {
display: flex;
align-items: center;
gap: 0.75rem;
}
.pb-monitor-header-brand .pb-brand-mark {
width: 32px;
height: 32px;
}
.pb-monitor-header-title {
font-size: 1.35rem;
font-weight: 700;
letter-spacing: 0.12em;
color: #d6e2fb;
}
.pb-monitor-header-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
font-variant-numeric: tabular-nums;
}
.pb-monitor-header-updated-label {
font-size: 0.72rem;
color: #94a3b8;
letter-spacing: 0.04em;
line-height: 1;
margin-bottom: 0.18rem;
}
.pb-monitor-header-clock {
font-size: 1.75rem;
font-weight: 700;
color: #f1f5f9;
line-height: 1;
font-feature-settings: "tnum";
}
.pb-monitor-header-date {
font-size: 0.85rem;
color: #94a3b8;
margin-top: 0.2rem;
letter-spacing: 0.04em;
}
/* Countdown linha — pulse verde + texto pequeno; o número usa min-width:2.5ch
pra estabilizar quando vai de "10s" para "9s" sem deslocar o texto à esquerda */
.pb-monitor-header-next {
margin-top: 0.55rem;
font-size: 0.76rem;
color: #94a3b8;
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.pb-monitor-header-next strong {
color: #d6e2fb;
font-weight: 700;
font-variant-numeric: tabular-nums;
min-width: 2.5ch;
display: inline-block;
text-align: right;
}
.pb-monitor-header-pulse {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: #4ade80;
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
animation: pb-monitor-live-pulse 2.2s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes pb-monitor-live-pulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }
50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.04); }
}
/* Cluster direito do header: bloco de relógio/countdown + botão de acesso à central.
Botão discreto (ghost) p/ não competir com os KPIs à distância, mas com
affordância clara de perto: borda azul fina, leve tint, e no hover acende a borda
+ desliza a seta. Vide markup em Monitoramento.razor. */
.pb-monitor-header-right {
display: flex;
align-items: center;
gap: 1.6rem;
}
.pb-monitor-admin-btn {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.5rem 0.95rem;
border-radius: 10px;
border: 1px solid rgba(86, 130, 230, 0.32);
background: rgba(36, 86, 214, 0.10);
color: #aebfe0;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
line-height: 1;
white-space: nowrap;
transition: border-color 160ms ease, background-color 160ms ease,
color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.pb-monitor-admin-btn:hover,
.pb-monitor-admin-btn:focus-visible {
border-color: rgba(120, 160, 255, 0.75);
background: rgba(36, 86, 214, 0.22);
color: #eaf1ff;
box-shadow: 0 0 0 1px rgba(120, 160, 255, 0.25),
0 6px 18px -8px rgba(36, 86, 214, 0.65);
outline: none;
}
.pb-monitor-admin-btn:active {
transform: translateY(1px);
}
.pb-monitor-admin-btn-lock {
width: 15px;
height: 15px;
opacity: 0.7;
flex-shrink: 0;
transition: opacity 160ms ease;
}
.pb-monitor-admin-btn:hover .pb-monitor-admin-btn-lock,
.pb-monitor-admin-btn:focus-visible .pb-monitor-admin-btn-lock {
opacity: 1;
}
.pb-monitor-admin-btn-arrow {
width: 15px;
height: 15px;
flex-shrink: 0;
opacity: 0.55;
transform: translateX(-3px);
transition: transform 180ms ease, opacity 180ms ease;
}
.pb-monitor-admin-btn:hover .pb-monitor-admin-btn-arrow,
.pb-monitor-admin-btn:focus-visible .pb-monitor-admin-btn-arrow {
opacity: 1;
transform: translateX(1px);
}
@media (prefers-reduced-motion: reduce) {
.pb-monitor-admin-btn,
.pb-monitor-admin-btn-arrow { transition: none; }
}
.pb-monitor-banner {
padding: 0.85rem 1.25rem;
border-radius: 10px;
margin-bottom: 1rem;
font-size: 1.05rem;
display: flex;
gap: 0.6rem;
align-items: center;
}
.pb-monitor-banner-error {
background: rgba(185, 28, 28, 0.18);
border: 1px solid rgba(185, 28, 28, 0.55);
color: #fecaca;
}
.pb-monitor-banner-warn {
background: rgba(180, 83, 9, 0.18);
border: 1px solid rgba(180, 83, 9, 0.55);
color: #fed7aa;
}
.pb-monitor-grid {
/* flex-1 dentro do shell; min-height:0 + overflow:hidden permitem que o
1fr da última row funcione como esperado (size definite vindo do shell).
minmax(18rem, 1fr) = piso de ~5 linhas + header+thead na lista; 1fr
distribui o que sobrar. Em viewports tall, o 1fr ganha muito espaço e
as listas mostram 8+ itens. */
flex: 1;
min-height: 0;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto auto minmax(18rem, 1fr);
gap: 0.85rem;
overflow: hidden;
}
.pb-monitor-section-title {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.18em;
color: #94a3b8;
margin-bottom: 0.45rem;
text-transform: uppercase;
}
/* ---- §24.1 Dropbox space card — telemetry HUD ----
Três zonas verticais: identity strip → hero metric + segmented gauge →
stat strip de 4 cells. Operations console aesthetic: monospace tabular,
eyebrow micro-labels tracked, VU-meter segmented gauge.
--------------------------------------------------- */
.pb-dbx-card {
--dbx-ink: #f5f7fb;
--dbx-ink-soft: #94a3b8;
--dbx-ink-muted: #64748b;
--dbx-rail: rgba(15, 23, 42, 0.55);
--dbx-divider: rgba(148, 163, 184, 0.18);
--dbx-accent: #4ade80;
--dbx-accent-bg: rgba(34, 197, 94, 0.12);
--dbx-accent-rim: rgba(34, 197, 94, 0.55);
position: relative;
isolation: isolate;
background:
linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%);
border: 1px solid var(--dbx-divider);
border-radius: 14px;
padding: 1.15rem 1.4rem 1.05rem;
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
display: flex;
flex-direction: column;
gap: 1rem;
transition: border-color .25s ease, box-shadow .25s ease;
overflow: hidden;
}
.pb-dbx-card::before {
/* Glow ambiente que escala com o status. */
content: "";
position: absolute;
inset: -1px;
background: radial-gradient(120% 80% at 8% 50%, var(--dbx-accent-bg) 0%, transparent 55%);
pointer-events: none;
z-index: -1;
opacity: 0.85;
}
.pb-dbx-card-ok { --dbx-accent: #4ade80; --dbx-accent-bg: rgba(34, 197, 94, 0.14); --dbx-accent-rim: rgba(34, 197, 94, 0.55); border-color: rgba(34, 197, 94, 0.4); }
.pb-dbx-card-warning { --dbx-accent: #fbbf24; --dbx-accent-bg: rgba(245, 158, 11, 0.14); --dbx-accent-rim: rgba(245, 158, 11, 0.55); border-color: rgba(245, 158, 11, 0.45); }
.pb-dbx-card-critical { --dbx-accent: #fca5a5; --dbx-accent-bg: rgba(239, 68, 68, 0.18); --dbx-accent-rim: rgba(239, 68, 68, 0.65); border-color: rgba(239, 68, 68, 0.55); }
.pb-dbx-card-neutral { --dbx-accent: #cbd5e1; --dbx-accent-bg: rgba(148, 163, 184, 0.08); --dbx-accent-rim: rgba(148, 163, 184, 0.45); }
.pb-dbx-card-critical {
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.32),
0 0 0 1px rgba(239, 68, 68, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
/* === Zone 1: identity strip ============================= */
.pb-dbx-identity {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.pb-dbx-identity-left {
display: flex;
align-items: center;
gap: 0.65rem;
}
.pb-dbx-pip {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--dbx-accent);
box-shadow: 0 0 0 3px var(--dbx-accent-bg);
flex-shrink: 0;
}
.pb-dbx-card-critical .pb-dbx-pip {
animation: pb-dbx-pulse 1.4s ease-in-out infinite;
}
@keyframes pb-dbx-pulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.20); }
50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.06); }
}
.pb-dbx-eyebrow {
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.24em;
color: var(--dbx-ink-soft);
text-transform: uppercase;
font-feature-settings: "ss01";
}
.pb-dbx-divider {
color: var(--dbx-ink-muted);
font-size: 0.85rem;
opacity: 0.5;
}
.pb-dbx-meta {
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.08em;
color: var(--dbx-ink-muted);
text-transform: lowercase;
font-style: italic;
}
.pb-dbx-verdict {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.24em;
padding: 0.32rem 0.7rem;
border-radius: 4px;
background: var(--dbx-accent-bg);
color: var(--dbx-accent);
border: 1px solid var(--dbx-accent-rim);
font-variant-numeric: tabular-nums;
}
.pb-dbx-verdict-soft {
background: rgba(148, 163, 184, 0.08);
color: var(--dbx-ink-muted);
border-color: rgba(148, 163, 184, 0.2);
letter-spacing: 0.18em;
font-weight: 600;
}
/* === Zone 2: hero + gauge =============================== */
.pb-dbx-hero {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 2fr);
gap: 1.5rem;
align-items: center;
}
.pb-dbx-hero-metric {
display: flex;
flex-direction: column;
gap: 0.35rem;
min-width: 0;
}
.pb-dbx-hero-eyebrow {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.2em;
color: var(--dbx-ink-muted);
}
.pb-dbx-hero-headline {
display: flex;
align-items: baseline;
gap: 0.45rem;
line-height: 0.95;
}
.pb-dbx-hero-value {
font-size: clamp(2rem, 3.4vw, 3.1rem);
font-weight: 800;
color: var(--dbx-accent);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum", "ss01";
letter-spacing: -0.025em;
line-height: 0.92;
white-space: nowrap;
}
.pb-dbx-hero-unit {
font-size: 1.1rem;
font-weight: 600;
color: var(--dbx-ink);
letter-spacing: 0.02em;
text-transform: uppercase;
}
.pb-dbx-hero-sub {
font-size: 0.85rem;
color: var(--dbx-ink-soft);
display: flex;
align-items: baseline;
gap: 0.4rem;
margin-top: 0.15rem;
}
.pb-dbx-hero-sub-pct {
font-weight: 700;
color: var(--dbx-ink);
font-variant-numeric: tabular-nums;
}
.pb-dbx-hero-sub-of {
color: var(--dbx-ink-muted);
}
/* === Segmented VU-meter gauge =========================== */
.pb-dbx-gauge {
display: flex;
flex-direction: column;
gap: 0.45rem;
min-width: 0;
}
.pb-dbx-gauge-rail {
display: grid;
grid-template-columns: repeat(20, 1fr);
gap: 3px;
padding: 5px;
background: var(--dbx-rail);
border: 1px solid rgba(148, 163, 184, 0.14);
border-radius: 6px;
height: 32px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}
.pb-dbx-gauge-seg {
display: block;
height: 100%;
border-radius: 2px;
background: rgba(148, 163, 184, 0.08);
transition: background .22s ease, box-shadow .22s ease;
position: relative;
}
/* segment colors graduate by position (1-15 green, 16-18 amber, 19-20 red),
independent do status do card — comunica visualmente onde está a faixa
crítica. Combina com a cor do status pra reforçar o estado geral. */
.pb-dbx-gauge-seg-lit:nth-child(-n+15) {
background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
box-shadow: 0 0 4px rgba(34, 197, 94, 0.45);
}
.pb-dbx-gauge-seg-lit:nth-child(n+16):nth-child(-n+18) {
background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
box-shadow: 0 0 4px rgba(245, 158, 11, 0.5);
}
.pb-dbx-gauge-seg-lit:nth-child(n+19) {
background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
box-shadow: 0 0 5px rgba(239, 68, 68, 0.55);
}
/* Ticks com absolute positioning — cada label fica no seu X% real do bar,
não em colunas iguais. Os ticks 0 e 100 compensam o padding (5px) + border
(1px) do rail = offset de 6px em cada lado pra alinhar com as bordas dos
segmentos 1 e 20. Os intermediários (50/75/90) ficam ≤3px off, dentro da
tolerância visual a distância de TV. */
.pb-dbx-gauge-ticks {
position: relative;
height: 0.85rem;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--dbx-ink-muted);
font-variant-numeric: tabular-nums;
}
.pb-dbx-gauge-ticks span {
position: absolute;
top: 0;
line-height: 1;
transform: translateX(-50%);
white-space: nowrap;
}
.pb-dbx-gauge-tick-start {
left: 6px;
transform: none;
}
.pb-dbx-gauge-tick-stop {
left: calc(100% - 6px);
transform: translateX(-100%);
}
.pb-dbx-gauge-tick-warn { color: #fbbf24; }
.pb-dbx-gauge-tick-end { color: #fca5a5; }
/* === Zone 3: telemetry stat strip ======================= */
.pb-dbx-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin: 0;
padding: 0.75rem 0 0 0;
border-top: 1px solid var(--dbx-divider);
position: relative;
}
.pb-dbx-stat {
padding: 0.05rem 1rem;
display: flex;
flex-direction: column;
gap: 0.3rem;
position: relative;
min-width: 0;
}
.pb-dbx-stat + .pb-dbx-stat::before {
content: "";
position: absolute;
left: 0;
top: 6%;
bottom: 6%;
width: 1px;
background: linear-gradient(180deg, transparent 0%, var(--dbx-divider) 30%, var(--dbx-divider) 70%, transparent 100%);
}
.pb-dbx-stat:first-child { padding-left: 0; }
.pb-dbx-stat:last-child { padding-right: 0; }
.pb-dbx-stat-label {
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.22em;
color: var(--dbx-ink-muted);
text-transform: uppercase;
margin: 0;
}
.pb-dbx-stat-value {
margin: 0;
display: flex;
align-items: baseline;
gap: 0.32rem;
line-height: 1;
white-space: nowrap;
min-width: 0;
}
.pb-dbx-stat-num {
font-size: clamp(1.1rem, 1.45vw, 1.55rem);
font-weight: 800;
color: var(--dbx-ink);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum", "ss01";
letter-spacing: -0.015em;
}
.pb-dbx-stat-unit {
font-size: 0.74rem;
font-weight: 600;
color: var(--dbx-ink-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.pb-dbx-stat-emph .pb-dbx-stat-num {
color: var(--dbx-accent);
}
.pb-dbx-stat-emph .pb-dbx-stat-label {
color: var(--dbx-accent);
opacity: 0.85;
}
/* === Loading / error states ============================= */
.pb-dbx-loading,
.pb-dbx-error {
padding: 1.4rem 0.25rem 1rem;
color: var(--dbx-ink-soft);
font-size: 0.95rem;
display: flex;
align-items: center;
gap: 0.6rem;
border-top: 1px solid var(--dbx-divider);
}
.pb-dbx-error {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
.pb-dbx-error strong {
color: #fca5a5;
font-weight: 700;
}
.pb-dbx-loading-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--dbx-ink-soft);
animation: pb-dbx-blink 1.1s ease-in-out infinite;
}
@keyframes pb-dbx-blink {
0%, 100% { opacity: 0.3; }
50% { opacity: 1.0; }
}
/* === Responsive ========================================= */
/* Entre 1280 e 1100, o hero 2-col fica cramped; alinhar com o breakpoint
do KPI grid (também colapsa em 1280) mantém a hierarquia visual coerente */
@media (max-width: 1280px) {
.pb-dbx-hero {
grid-template-columns: 1fr;
gap: 1rem;
}
}
@media (max-width: 1100px) {
.pb-dbx-strip {
grid-template-columns: repeat(2, 1fr);
gap: 0.65rem 0;
}
.pb-dbx-stat + .pb-dbx-stat::before { display: none; }
.pb-dbx-stat {
padding: 0.4rem 0 0.4rem 0.85rem;
border-left: 1px solid var(--dbx-divider);
}
.pb-dbx-stat:nth-child(odd) {
padding-left: 0;
border-left: none;
}
}
@media (max-width: 720px) {
.pb-dbx-card { padding: 0.95rem 1rem; }
.pb-dbx-identity { flex-wrap: wrap; gap: 0.5rem; }
.pb-dbx-gauge-rail { height: 24px; }
.pb-dbx-strip { grid-template-columns: 1fr 1fr; }
.pb-dbx-stat-num { font-size: 1.3rem; }
}
/* ---- KPI cards ---- */
.pb-monitor-section {
display: flex;
flex-direction: column;
}
.pb-monitor-kpi-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(4, 1fr);
}
.pb-monitor-kpi-grid-3 {
grid-template-columns: repeat(3, 1fr);
}
.pb-monitor-kpi {
border-radius: 12px;
padding: 0.75rem 1.1rem;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(148, 163, 184, 0.18);
border-left-width: 6px;
display: flex;
flex-direction: column;
gap: 0.2rem;
min-height: 104px;
justify-content: center;
}
.pb-monitor-kpi-value {
font-size: 2.5rem;
font-weight: 800;
line-height: 1;
font-variant-numeric: tabular-nums;
color: #f8fafc;
}
.pb-monitor-kpi-label {
font-size: 0.95rem;
color: #cbd5e1;
font-weight: 600;
letter-spacing: 0.02em;
}
.pb-monitor-kpi-sub {
font-size: 0.72rem;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.12em;
}
.pb-monitor-kpi-ok { border-left-color: #22c55e; background: rgba(20, 83, 45, 0.14); }
.pb-monitor-kpi-ok .pb-monitor-kpi-value { color: #4ade80; }
.pb-monitor-kpi-warn { border-left-color: #f59e0b; background: rgba(146, 64, 14, 0.18); }
.pb-monitor-kpi-warn .pb-monitor-kpi-value { color: #fbbf24; }
.pb-monitor-kpi-danger { border-left-color: #ef4444; background: rgba(127, 29, 29, 0.22); }
.pb-monitor-kpi-danger .pb-monitor-kpi-value { color: #fca5a5; }
.pb-monitor-kpi-purple { border-left-color: #a855f7; background: rgba(88, 28, 135, 0.22); }
.pb-monitor-kpi-purple .pb-monitor-kpi-value { color: #d8b4fe; }
/* ---- Lists ---- */
.pb-monitor-lists {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.85rem;
/* min-height:0 + overflow:hidden propagam o sizing definite até a lista,
sem o que o body não saberia que precisa rolar internamente */
min-height: 0;
overflow: hidden;
}
.pb-monitor-list {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 12px;
display: flex;
flex-direction: column;
/* padding aplicado em header e body separadamente — o body precisa borda-a-borda
pra que a scrollbar não invada o radius e a barra rolável fique alinhada com a
moldura do card. overflow:hidden faz duas coisas: (1) clipa o scrollbar do
body no border-radius, (2) permite que o flex:1 do body resolva pra um
tamanho concreto em vez de inchar com max-content */
padding: 0;
min-height: 0;
overflow: hidden;
}
.pb-monitor-list-header {
display: flex;
flex-direction: column;
gap: 0.15rem;
padding: 0.8rem 1.15rem 0.55rem;
border-bottom: 1px solid rgba(148, 163, 184, 0.18);
flex-shrink: 0;
}
.pb-monitor-list-title {
font-size: 0.92rem;
font-weight: 700;
letter-spacing: 0.15em;
color: #d6e2fb;
}
.pb-monitor-list-subtitle {
font-size: 0.74rem;
color: #94a3b8;
font-style: italic;
}
/* body é o único elemento rolável da página (junto com o gêmeo da outra lista) */
.pb-monitor-list-body {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding: 0 1.15rem;
display: flex;
flex-direction: column;
/* instrument-slider scrollbar — Firefox */
scrollbar-width: thin;
scrollbar-color: rgba(148, 163, 184, 0.28) transparent;
}
/* WebKit/Chromium scrollbar — mesma vibe operations-console do gauge */
.pb-monitor-list-body::-webkit-scrollbar {
width: 8px;
}
.pb-monitor-list-body::-webkit-scrollbar-track {
background: transparent;
margin: 0.3rem 0 0.5rem;
}
.pb-monitor-list-body::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.26);
border-radius: 4px;
border: 1px solid rgba(148, 163, 184, 0.1);
transition: background .2s ease;
}
.pb-monitor-list-body::-webkit-scrollbar-thumb:hover {
background: rgba(36, 86, 214, 0.55);
border-color: rgba(36, 86, 214, 0.4);
}
.pb-monitor-list-empty {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.95rem;
padding: 1.5rem 0.5rem;
text-align: center;
}
/* Variante "loading" — texto isolado, italic muted, sem ícone (a base não
tem ícone; só a variante -ok carrega o tratamento dashed-circle) */
.pb-monitor-list-loading {
color: #94a3b8;
font-style: italic;
font-size: 0.95rem;
}
/* Variante "empty success" — quando a lista está vazia porque NÃO HÁ
problemas. Dashed-circle envolvendo um ícone de inbox + label tracked
uppercase. Tom verde discreto reforça a semântica positiva sem ser
celebratório demais. */
.pb-monitor-empty-icon {
width: 84px;
height: 84px;
border-radius: 50%;
border: 1.5px dashed rgba(148, 163, 184, 0.32);
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(148, 163, 184, 0.55);
background: rgba(148, 163, 184, 0.04);
transition: border-color .3s ease, color .3s ease;
}
.pb-monitor-empty-icon svg {
width: 30px;
height: 30px;
}
.pb-monitor-empty-text {
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.18em;
color: rgba(148, 163, 184, 0.78);
text-transform: uppercase;
line-height: 1.4;
max-width: 22ch;
}
.pb-monitor-list-empty-ok .pb-monitor-empty-icon {
color: rgba(74, 222, 128, 0.85);
border-color: rgba(34, 197, 94, 0.4);
background: rgba(34, 197, 94, 0.06);
}
.pb-monitor-list-empty-ok .pb-monitor-empty-text {
color: rgba(74, 222, 128, 0.92);
}
.pb-monitor-table {
width: 100%;
border-collapse: collapse;
color: #e6edf3;
font-size: 0.95rem;
}
/* sticky thead — fica visível enquanto tbody rola; o solid bg + ring sutil simula
"bezel" de instrumento abaixo do qual o conteúdo desliza */
.pb-monitor-table thead th {
text-align: left;
font-size: 0.72rem;
color: #94a3b8;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 0.5rem 0.5rem 0.45rem;
position: sticky;
top: 0;
z-index: 1;
background: linear-gradient(180deg, #0d1a32 0%, #0c172d 100%);
box-shadow:
inset 0 -1px 0 rgba(148, 163, 184, 0.22),
0 6px 8px -8px rgba(0, 0, 0, 0.55);
}
.pb-monitor-table tbody td {
padding: 0.5rem 0.5rem;
border-bottom: 1px solid rgba(148, 163, 184, 0.08);
vertical-align: middle;
}
.pb-monitor-table tbody tr:last-child td {
border-bottom: none;
}
.pb-monitor-table-code {
width: 78px;
color: #94a3b8;
}
.pb-monitor-table-num {
text-align: right;
width: 130px;
}
/* Coluna estreita alinhada à esquerda — usada em Dias / Status / Livre.
Width fixa garante alinhamento vertical de badges/valores. 160px acomoda
até "30d 23h 59m" (12 chars com letter-spacing) sem quebrar. */
.pb-monitor-table-narrow {
text-align: left;
width: 160px;
}
.pb-monitor-badge {
display: inline-block;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.1em;
padding: 0.18rem 0.55rem;
border-radius: 999px;
white-space: nowrap;
}
.pb-monitor-badge-ok { background: rgba(34, 197, 94, 0.18); color: #4ade80; }
.pb-monitor-badge-warn { background: rgba(245, 158, 11, 0.18); color: #fbbf24; }
.pb-monitor-badge-danger { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }
.pb-monitor-badge-purple { background: rgba(168, 85, 247, 0.2); color: #d8b4fe; }
.pb-monitor-badge-neutral { background: rgba(148, 163, 184, 0.18); color: #cbd5e1; }
/* ---- Responsive ---- */
@media (max-width: 1280px) {
.pb-monitor-kpi-grid { grid-template-columns: repeat(2, 1fr); }
.pb-monitor-kpi-grid-3 { grid-template-columns: repeat(3, 1fr); }
}
/* Fallback de altura: em telas curtas (< 900px), libera page scroll e trava
a track das listas em 18rem fixo. `min-height: auto` no grid é crucial —
faz o grid crescer até seu content min (cards + 18rem) em vez de ficar
preso na distribuição do flex de 100vh e clipar a base das listas. */
@media (max-height: 899px) {
.pb-monitor-shell {
height: auto;
min-height: 100vh;
overflow-y: auto;
}
.pb-monitor-grid {
min-height: auto;
overflow: visible;
grid-template-rows: auto auto auto 18rem;
}
.pb-monitor-lists {
overflow: visible;
}
/* list / list-body: NÃO sobrescrever overflow. A track fixa de 18rem
já garante container definite-size pro body, e o overflow-y:auto da
base permanece ativo = scroll interno funciona */
}
/* Viewports estreitos: listas empilham em coluna única e cada uma recebe
`height: 18rem` explícito (porque sem grid-row template não há quem trave
a altura). Mesmo padrão de page-scroll + body-internal-scroll. */
@media (max-width: 960px) {
.pb-monitor-shell {
height: auto;
min-height: 100vh;
overflow-y: auto;
padding: 1rem;
}
.pb-monitor-grid {
min-height: auto;
overflow: visible;
grid-template-rows: none;
}
.pb-monitor-lists {
grid-template-columns: 1fr;
overflow: visible;
}
.pb-monitor-list {
/* sem template de row pra constringir cada lista, fixo explicitamente.
NÃO mexer em overflow nem max-height — derruba o scroll do body */
height: 18rem;
}
.pb-monitor-header-title { font-size: 1rem; }
.pb-monitor-header-right { gap: 0.85rem; }
.pb-monitor-admin-btn { padding: 0.45rem 0.7rem; letter-spacing: 0.04em; }
/* Em telas estreitas só o cadeado + seta; o texto sai pra economizar largura. */
.pb-monitor-admin-btn-text { display: none; }
.pb-monitor-kpi-grid-3 { grid-template-columns: repeat(2, 1fr); }
.pb-monitor-kpi-value { font-size: 2.2rem; }
}
/* ============================================================
Dropbox space card — variante de TEMA CLARO para telas admin
------------------------------------------------------------
O .pb-dbx-card nasceu para o fundo escuro da TV (ink quase branco).
Em /retencao (fundo claro) o texto some. Esta variante reescreve as
variáveis de cor e o fundo para o tema admin, mantendo a semântica
verde/laranja/vermelho. Aplicada via wrapper .pb-dbx-admin.
============================================================ */
.pb-dbx-admin .pb-dbx-card {
--dbx-ink: var(--text-strong);
--dbx-ink-soft: var(--text-soft);
--dbx-ink-muted: var(--text-muted);
--dbx-rail: var(--bg-mute);
--dbx-divider: var(--border);
background: linear-gradient(180deg, var(--bg-surface), var(--bg-subtle));
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
}
/* glow ambiente mais discreto sobre fundo claro */
.pb-dbx-admin .pb-dbx-card::before { opacity: 0.5; }
/* acentos do status em tons admin (mais escuros, legíveis sobre branco) */
.pb-dbx-admin .pb-dbx-card-ok {
--dbx-accent: var(--success); --dbx-accent-bg: var(--success-bg);
--dbx-accent-rim: color-mix(in srgb, var(--success) 35%, transparent);
border-color: color-mix(in srgb, var(--success) 30%, transparent);
}
.pb-dbx-admin .pb-dbx-card-warning {
--dbx-accent: var(--warning); --dbx-accent-bg: var(--warning-bg);
--dbx-accent-rim: color-mix(in srgb, var(--warning) 38%, transparent);
border-color: color-mix(in srgb, var(--warning) 32%, transparent);
}
.pb-dbx-admin .pb-dbx-card-critical {
--dbx-accent: var(--danger); --dbx-accent-bg: var(--danger-bg);
--dbx-accent-rim: color-mix(in srgb, var(--danger) 40%, transparent);
border-color: color-mix(in srgb, var(--danger) 35%, transparent);
box-shadow: var(--shadow-sm);
}
.pb-dbx-admin .pb-dbx-card-neutral {
--dbx-accent: var(--text-muted); --dbx-accent-bg: var(--bg-mute);
--dbx-accent-rim: var(--border-strong);
}
/* trilho do gauge no claro: track suave + sombra interna leve.
NÃO sobrescrever .pb-dbx-gauge-seg aqui — empata em especificidade com as
regras dos segmentos acesos (…-seg-lit:nth-child) e, por vir depois, mataria
o verde/laranja/vermelho do preenchimento. Os segmentos apagados usam o
default translúcido, que já fica bom sobre o trilho claro. */
.pb-dbx-admin .pb-dbx-gauge-rail {
background: var(--bg-mute);
border-color: var(--border);
box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
}
/* estados / verdict no claro */
.pb-dbx-admin .pb-dbx-error strong { color: var(--danger); }
.pb-dbx-admin .pb-dbx-verdict-soft {
background: var(--bg-mute);
color: var(--text-muted);
border-color: var(--border);
}