/**
* Estilos globais do sistema
* Usa CSS Custom Properties definidas em themes.css
*/
/* ==============================
Tooltip (Floating UI)
============================== */
#app-tooltip {
position: fixed;
z-index: 99999;
background: var(--chart-tooltip-bg);
color: var(--chart-tooltip-text);
border: 1px solid var(--chart-tooltip-border);
padding: 8px 12px;
border-radius: var(--radius-sm);
font-size: 12px;
font-weight: 500;
line-height: 1.5;
/* width:max-content dimensiona pelo conteudo (nao pelo espaco ate a borda),
evitando o tooltip espremido/estreito perto das bordas. O max-width limita a
largura e o calc protege telas pequenas (nunca passa da viewport). */
width: max-content;
max-width: min(280px, calc(100vw - 24px));
white-space: normal;
text-align: left;
box-shadow: 0 6px 20px rgba(0,0,0,.3);
pointer-events: none;
opacity: 0;
transition: opacity .15s ease;
word-break: break-word;
}
#app-tooltip[data-show] {
opacity: 1;
}
/* ==============================
iOS PWA Safe Areas e fixes
============================== */
/* ===== PWA / iOS =====
Fix iOS: viewport-fit=cover + black-translucent empurra conteúdo
atrás da barra de status. min-height + safe-area corrige o gap.
Ref: https://dev.to/karmasakshi/make-your-pwas-look-handsome-on-ios-1o08 */
@media (display-mode: standalone) {
html {
min-height: calc(100% + env(safe-area-inset-top));
}
.modal-overlay {
padding-top: env(safe-area-inset-top, 0px);
}
body {
padding-bottom: env(safe-area-inset-bottom, 0px);
}
}
/* Evita zoom automatico em inputs no iOS */
input, textarea, select {
font-size: 16px;
}
@media (min-width: 769px) {
input, textarea, select {
font-size: 14px;
}
}
/* Hover effects apenas em dispositivos com mouse */
@media (hover: hover) {
.btn:hover:not(:disabled) { filter: brightness(1.1); }
.sidebar-nav-item:hover { background-color: var(--color-bg-card-hover); }
}
/* ==============================
Reset e Base
============================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-body);
background-color: var(--color-bg-body);
color: var(--color-text-primary);
min-height: 100vh;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overscroll-behavior-y: auto;
-webkit-overflow-scrolling: touch;
}
/* ==============================
Scrollbar customizada
============================== */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: var(--color-bg-body);
}
::-webkit-scrollbar-thumb {
background: var(--color-border-light);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-text-muted);
}
/* ==============================
Layout Principal
============================== */
.app-layout {
display: flex;
min-height: 100vh;
}
.app-sidebar {
width: var(--sidebar-width);
background-color: var(--color-bg-sidebar);
border-right: 1px solid var(--color-border);
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 40;
display: flex;
flex-direction: column;
transition: var(--transition);
overflow-y: auto;
}
.app-main {
flex: 1;
margin-left: var(--sidebar-width);
min-height: 100vh;
display: flex;
flex-direction: column;
overflow-x: hidden;
min-width: 0;
}
/* Barra de marca (padrao Dash): faixa flutuante na cor primaria, raio 12px,
logo dentro de chip escuro e acoes em chips escuros a direita. */
.app-topbar {
display: flex;
align-items: center;
justify-content: space-between;
margin: 12px 32px 20px;
padding: 8px 10px 8px 10px;
padding-top: calc(8px + env(safe-area-inset-top, 0px));
gap: 8px;
min-height: 56px;
position: relative;
z-index: 30;
background: var(--color-bg-topbar);
background-image: linear-gradient(90deg, var(--color-bg-topbar) 0%, var(--color-bg-topbar) 62%, color-mix(in srgb, var(--color-bg-topbar) 78%, #000) 100%);
color: var(--color-topbar-text);
border-radius: var(--radius-md);
box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--color-bg-topbar) 45%, transparent);
}
.app-topbar .mobile-menu-btn {
display: none;
}
.app-topbar a:has(> .app-topbar-logo) {
display: inline-flex;
line-height: 0;
border-radius: 10px;
}
.app-topbar-logo {
display: block;
box-sizing: border-box;
height: 40px;
width: auto;
max-width: 180px;
padding: 6px 10px;
object-fit: contain;
background: var(--color-topbar-chip);
border-radius: 10px;
}
/* Sem logo cadastrada: nome do sistema como marca (estilo "Sua Marca | Geral") */
.app-topbar-brand {
display: inline-flex;
align-items: center;
height: 40px;
padding: 0 14px;
font-family: var(--font-display);
font-size: 17px;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--color-topbar-text);
text-decoration: none;
white-space: nowrap;
}
.app-topbar-right {
display: flex;
align-items: center;
gap: 6px;
margin-left: auto;
}
/* Botoes de icone sobre a barra: chips escuros com icone claro */
.app-topbar > .btn-ghost,
.app-topbar-right > .btn-ghost,
.app-topbar .topbar-icon-btn,
.app-topbar .notification-bell-btn {
width: 38px;
height: 38px;
padding: 0;
align-items: center;
justify-content: center;
background: var(--color-topbar-chip);
color: var(--color-topbar-chip-text);
border: 1px solid transparent;
border-radius: 10px;
}
.app-topbar > .btn-ghost:hover,
.app-topbar-right > .btn-ghost:hover,
.app-topbar .topbar-icon-btn:hover,
.app-topbar .notification-bell-btn:hover {
background: var(--color-topbar-chip);
color: var(--color-primary);
border-color: color-mix(in srgb, var(--color-topbar-chip-text) 18%, transparent);
filter: none;
}
.app-topbar .notification-badge {
top: -4px;
right: -4px;
box-shadow: 0 0 0 2px var(--color-bg-topbar);
}
.app-topbar .notification-panel {
margin-top: 8px;
color: var(--color-text-primary);
}
.app-content {
flex: 1;
padding: 0 32px 24px;
}
/* ==============================
Sidebar
============================== */
.sidebar-header {
padding: 20px 20px 16px;
border-bottom: 1px solid var(--color-divider);
display: flex;
align-items: center;
gap: 12px;
}
.sidebar-logo {
width: 36px;
height: 36px;
border-radius: var(--radius-sm);
object-fit: contain;
}
.sidebar-logo-placeholder {
width: 36px;
height: 36px;
border-radius: 10px;
background-color: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary-text);
font-family: var(--font-display);
font-weight: 800;
font-size: 17px;
}
.sidebar-title {
font-family: var(--font-display);
font-size: 18px;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--color-text-primary);
display: block;
line-height: 1.1;
}
.sidebar-version {
font-size: 10px;
font-weight: 400;
color: var(--color-text-muted);
letter-spacing: 0.5px;
display: block;
margin-top: 1px;
}
/* ========= Client Switcher ========= */
.client-switcher {
position: relative;
padding: 10px 10px 12px;
border-bottom: 1px solid var(--color-divider);
}
.client-switcher-btn {
width: 100%;
display: flex;
align-items: center;
gap: 9px;
padding: 8px 10px;
border-radius: 10px;
border: 1px solid var(--color-border);
background: var(--color-bg-elevated);
cursor: pointer;
color: var(--color-text-primary);
font-family: var(--font-display);
transition: background .12s, border-color .12s, box-shadow .12s;
}
.client-switcher-btn svg { color: var(--color-text-muted); flex-shrink: 0; }
.client-switcher-btn:hover,
.client-switcher-btn.is-open { background: var(--color-bg-elevated); border-color: var(--color-primary); box-shadow: var(--glow-primary); }
.cs-avatar {
width: 26px; height: 26px; border-radius: 7px;
color: #FFFFFF; font-size: 11px; font-weight: 700;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cs-avatar--empty { background: var(--color-neutral-light); color: var(--color-text-muted); }
.cs-name { flex: 1; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.cs-name--empty { color: var(--color-text-muted); font-weight: 400; }
.client-switcher-dropdown {
position: absolute;
left: 10px; right: 10px;
top: calc(100% + 4px);
z-index: 300;
}
.cs-dropdown-inner {
background: var(--color-bg-card);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: 5px;
max-height: 280px;
overflow-y: auto;
}
.cs-option {
width: 100%;
display: flex; align-items: center; gap: 8px;
padding: 8px 9px; border-radius: var(--radius-sm);
border: 0; background: transparent; cursor: pointer;
font-size: 12.5px; color: var(--color-text-primary);
font-family: inherit;
text-align: left; text-decoration: none;
transition: background .1s;
}
.cs-option:hover { background: var(--color-bg-elevated); }
.cs-option.is-active { color: var(--color-primary-strong); font-weight: 600; background: var(--color-primary-light); }
.cs-opt-avatar {
width: 20px; height: 20px; border-radius: 5px;
color: #FFFFFF; font-size: 9px; font-weight: 700;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cs-divider { height: 1px; background: var(--color-border); margin: 4px 2px; }
.cs-option--all { color: var(--color-text-muted); font-style: normal; }
/* ===================================== */
.sidebar-nav {
padding: 12px 8px;
flex: 1;
overflow-y: auto;
}
.sidebar-group-label {
font-family: var(--font-display);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-text-muted);
padding: 18px 14px 6px;
user-select: none;
}
.sidebar-group-label:first-child {
padding-top: 4px;
}
.sidebar-nav-item {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 9px 14px;
border-radius: 10px;
border-left: 3px solid transparent;
color: var(--color-text-secondary);
text-decoration: none;
font-family: var(--font-display);
font-size: 14px;
font-weight: 500;
transition: var(--transition);
margin-bottom: 2px;
}
.sidebar-nav-item:hover {
background-color: var(--color-bg-elevated);
color: var(--color-text-primary);
}
.sidebar-nav-item.active {
background-color: var(--color-primary-light);
border-left-color: var(--color-primary);
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
color: var(--color-text-primary);
font-weight: 600;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, transparent), 0 0 24px color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.sidebar-nav-item.active svg {
color: var(--color-primary-strong);
}
.sidebar-nav-item svg {
flex-shrink: 0;
color: var(--color-text-muted);
transition: var(--transition);
}
.sidebar-nav-item:hover svg {
color: var(--color-text-primary);
}
.sidebar-footer {
padding: 12px 12px;
border-top: 1px solid var(--color-divider);
display: flex;
align-items: center;
gap: 8px;
}
.sidebar-footer-actions {
display: flex;
gap: 4px;
flex-shrink: 0;
}
.sidebar-action-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
color: var(--color-text-muted);
transition: var(--transition);
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
cursor: pointer;
text-decoration: none;
}
.sidebar-action-btn:hover {
color: var(--color-primary-strong);
border-color: var(--color-primary);
background-color: var(--color-bg-elevated);
}
.sidebar-user {
display: flex;
align-items: center;
gap: 12px;
padding: 8px;
border-radius: var(--border-radius);
transition: var(--transition);
cursor: pointer;
text-decoration: none;
flex: 1;
min-width: 0;
color: inherit;
}
.sidebar-user:hover {
background-color: var(--color-bg-elevated);
}
.sidebar-user-avatar {
width: 36px;
height: 36px;
border-radius: 10px;
background-color: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary-text);
font-family: var(--font-display);
font-weight: 800;
font-size: 14px;
flex-shrink: 0;
object-fit: cover;
box-shadow: 0 0 0 1px var(--color-border-light);
}
.sidebar-user-info {
flex: 1;
min-width: 0;
}
.sidebar-user-name {
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
color: var(--color-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-user-role {
font-size: 11px;
color: var(--color-text-muted);
}
/* ==============================
Page Header
============================== */
.page-header {
margin-bottom: 24px;
}
.page-header-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 4px;
}
.page-title {
font-family: var(--font-display);
font-size: 26px;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.2;
color: var(--color-text-primary);
}
.page-subtitle {
font-size: 14px;
color: var(--color-text-secondary);
line-height: 1.4;
min-height: calc(2 * 1.4em);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ==============================
Cards
============================== */
.card {
position: relative;
background-color: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: 14px;
padding: 24px;
transition: var(--transition);
}
.card-hover:hover {
border-color: var(--color-border-light);
box-shadow: var(--shadow-md);
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.card-title {
font-family: var(--font-display);
font-size: 15px;
font-weight: 700;
letter-spacing: -0.005em;
color: var(--color-text-primary);
display: flex;
align-items: center;
gap: 8px;
}
/* ==============================
Stats Card (KPI padrao Dash)
chip de icone amarelo | label pequena em cima + valor grande embaixo.
A ordem label -> valor e' feita com column-reverse, sem mexer no markup.
============================== */
.stats-card {
position: relative;
background-color: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: 14px;
padding: 16px 18px;
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
transition: var(--transition);
}
.stats-card:hover {
border-color: var(--color-border-light);
box-shadow: var(--shadow-md);
}
.stats-card-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: var(--color-primary) !important;
color: var(--color-primary-text) !important;
}
.stats-card-icon svg {
width: 20px;
height: 20px;
}
.stats-card > div:not(.stats-card-icon) {
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
flex: 1 1 auto;
min-width: 0;
}
.stats-card-value {
font-family: var(--font-display);
font-size: clamp(18px, 1.6vw, 26px);
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-text-primary);
line-height: 1.15;
font-variant-numeric: tabular-nums;
min-width: 0;
overflow-wrap: anywhere;
}
.stats-card-label {
font-size: 11px;
font-weight: 500;
color: var(--color-text-secondary);
margin-bottom: 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ==============================
Tabelas
============================== */
.data-table {
width: 100%;
border-collapse: collapse;
}
.data-table thead th {
text-align: left;
padding: 12px 16px;
font-family: var(--font-display);
font-size: 11px;
font-weight: 600;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
border-bottom: 1px solid var(--color-border);
}
.data-table tbody td {
padding: 14px 16px;
font-size: 14px;
color: var(--color-text-primary);
border-bottom: 1px solid var(--color-divider);
font-variant-numeric: tabular-nums;
}
.data-table tbody tr {
transition: background-color .15s ease;
}
.data-table tbody tr:hover {
background-color: var(--color-bg-card-hover);
}
/* Colunas numericas: alinhadas a direita (classes usadas nas views + atributo) */
.data-table th.text-right,
.data-table td.text-right,
.data-table th.num,
.data-table td.num,
.data-table td[data-num] {
text-align: right;
}
/* Links dentro de tabelas e listas: sem azul/sublinhado do navegador */
.data-table a:not(.btn):not(.badge),
.list-rows a:not(.btn):not(.badge):not(.list-row) {
color: var(--color-text-primary);
text-decoration: none;
transition: color .15s ease;
}
.data-table a:not(.btn):not(.badge):hover,
.list-rows a:not(.btn):not(.badge):not(.list-row):hover {
color: var(--color-primary-strong);
text-decoration: underline;
text-decoration-color: var(--color-primary);
text-underline-offset: 3px;
}
.data-table tbody tr:last-child td {
border-bottom: none;
}
/* ==============================
Botoes
============================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 16px;
border-radius: 10px;
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
border: 1px solid transparent;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, filter .15s ease;
text-decoration: none;
white-space: nowrap;
line-height: 1.5;
}
.btn:focus-visible {
outline: none;
box-shadow: var(--glow-primary);
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn-primary {
background-color: var(--color-primary);
color: var(--color-primary-text);
}
.btn-primary:hover:not(:disabled) {
background-color: var(--color-primary-hover);
box-shadow: var(--glow-primary);
filter: none;
}
.btn-secondary {
background-color: var(--color-bg-elevated);
color: var(--color-text-primary);
border: 1px solid var(--color-border-light);
}
.btn-secondary:hover:not(:disabled) {
background-color: var(--color-bg-elevated);
border-color: var(--color-primary);
filter: none;
}
.btn-danger {
background-color: var(--color-error);
color: #FFFFFF;
}
.btn-danger:hover:not(:disabled) {
background-color: var(--color-error-hover);
filter: none;
}
.btn-success {
background-color: var(--color-success);
color: #FFFFFF;
}
.btn-success:hover:not(:disabled) {
background-color: color-mix(in srgb, var(--color-success) 85%, #000);
filter: none;
}
.btn-ghost {
background: transparent;
color: var(--color-text-secondary);
padding: 6px 8px;
}
.btn-ghost:hover {
background-color: var(--color-bg-elevated);
color: var(--color-text-primary);
}
.btn-sm {
padding: 6px 12px;
font-size: 13px;
border-radius: var(--radius-sm);
}
.btn-lg {
padding: 12px 24px;
font-size: 16px;
}
.btn-icon {
padding: 8px;
width: 36px;
height: 36px;
}
/* ==============================
Formularios
============================== */
.form-group {
margin-bottom: 16px;
}
.form-label {
display: block;
font-size: 13px;
font-weight: 500;
color: var(--color-text-secondary);
margin-bottom: 6px;
}
.form-input {
width: 100%;
padding: 10px 14px;
background-color: var(--color-bg-input);
border: 1px solid var(--color-border-light);
border-radius: 10px;
color: var(--color-text-primary);
font-family: inherit;
font-size: 14px;
transition: var(--transition);
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* Input de data: garante estilo consistente no iOS */
.form-input[type="date"] {
-webkit-appearance: none;
min-height: 42px;
color-scheme: inherit;
}
/* Remove fundo amarelo/azul do autofill no iOS/Chrome */
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0px 1000px var(--color-bg-input) inset;
-webkit-text-fill-color: var(--color-text-primary);
transition: background-color 5000s ease-in-out 0s;
}
.form-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
margin-top: 24px;
flex-wrap: wrap;
}
.form-input:focus {
border-color: var(--color-primary);
box-shadow: var(--glow-primary);
}
.form-input:hover:not(:focus):not(:disabled),
.form-select:hover:not(:focus):not(:disabled) {
border-color: color-mix(in srgb, var(--color-text-muted) 60%, var(--color-border-light));
}
.form-input::placeholder {
color: var(--color-text-muted);
}
.form-select {
width: 100%;
padding: 10px 14px;
background-color: var(--color-bg-input);
border: 1px solid var(--color-border-light);
border-radius: 10px;
color: var(--color-text-primary);
font-family: inherit;
font-size: 14px;
transition: var(--transition);
outline: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
cursor: pointer;
}
.form-select option {
background-color: var(--color-bg-card);
color: var(--color-text-primary);
}
.form-select:focus {
border-color: var(--color-primary);
box-shadow: var(--glow-primary);
}
.form-error {
font-size: 12px;
color: var(--color-error);
margin-top: 4px;
}
/* ==============================
Modal
============================== */
.modal-overlay {
position: fixed;
inset: 0;
background-color: var(--color-overlay);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
display: flex;
align-items: center;
justify-content: center;
z-index: 50;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
padding: 16px;
}
.modal-overlay.active {
opacity: 1;
visibility: visible;
}
.modal-container {
background-color: var(--color-bg-modal);
border: 1px solid var(--color-border-light);
border-top-color: var(--card-tab-border);
border-radius: var(--radius-lg);
width: 100%;
max-width: 520px;
max-height: 90vh;
overflow-y: auto;
transform: scale(0.95) translateY(10px);
transition: all 0.2s ease;
box-shadow: var(--shadow-lg);
}
.modal-overlay.active .modal-container {
transform: scale(1) translateY(0);
}
.modal-container.modal-lg {
max-width: 680px;
}
.modal-container.modal-sm {
max-width: 400px;
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px 16px;
border-bottom: 1px solid var(--color-border);
}
.modal-title {
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
color: var(--color-text-primary);
}
.modal-close {
background: transparent;
border: none;
color: var(--color-text-muted);
cursor: pointer;
padding: 4px;
border-radius: var(--radius-sm);
transition: var(--transition);
}
.modal-close:hover {
background-color: var(--color-bg-elevated);
color: var(--color-text-primary);
}
.modal-body {
padding: 20px 24px;
}
.modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
padding: 16px 24px 20px;
border-top: 1px solid var(--color-border);
}
/* Alias: permite usar .modal como .modal-container (mais curto) */
.modal-overlay > .modal:not(.modal-container) {
background-color: var(--color-bg-modal);
border: 1px solid var(--color-border-light);
border-top-color: var(--card-tab-border);
border-radius: var(--radius-lg);
width: 100%;
max-width: 520px;
max-height: 90vh;
overflow-y: auto;
transform: scale(0.95) translateY(10px);
transition: all 0.2s ease;
box-shadow: var(--shadow-lg);
}
.modal-overlay.active > .modal:not(.modal-container) {
transform: scale(1) translateY(0);
}
/* ==============================
Toast / Notificacoes
============================== */
.toast-container {
position: fixed;
top: calc(16px + env(safe-area-inset-top, 0px));
right: 16px;
z-index: 60;
display: flex;
flex-direction: column;
gap: 8px;
max-width: 380px;
}
@media (max-width: 768px) {
.toast-container {
left: 16px;
right: 16px;
max-width: none;
}
}
.toast {
background-color: var(--color-bg-elevated);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-md);
padding: 14px 16px;
display: flex;
align-items: flex-start;
gap: 12px;
box-shadow: var(--shadow-lg);
animation: toastSlideIn 0.3s ease;
transition: all 0.3s ease;
}
.toast.removing {
opacity: 0;
transform: translateX(100%);
}
.toast-icon {
flex-shrink: 0;
margin-top: 1px;
}
.toast-success { border-left: 3px solid var(--color-success); }
.toast-success .toast-icon { color: var(--color-success); }
.toast-error { border-left: 3px solid var(--color-error); }
.toast-error .toast-icon { color: var(--color-error); }
.toast-warning { border-left: 3px solid var(--color-warning); }
.toast-warning .toast-icon { color: var(--color-warning); }
.toast-info { border-left: 3px solid var(--color-info); }
.toast-info .toast-icon { color: var(--color-info); }
.toast-content {
flex: 1;
min-width: 0;
}
.toast-title {
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
color: var(--color-text-primary);
margin-bottom: 2px;
}
.toast-message {
font-size: 13px;
color: var(--color-text-secondary);
}
.toast-close {
background: transparent;
border: none;
color: var(--color-text-muted);
cursor: pointer;
padding: 2px;
flex-shrink: 0;
}
@keyframes toastSlideIn {
from {
opacity: 0;
transform: translateX(100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* ==============================
Paginacao
============================== */
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
margin-top: 24px;
}
.pagination-item {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 10px;
font-family: var(--font-display);
font-size: 14px;
font-weight: 500;
color: var(--color-text-secondary);
text-decoration: none;
transition: var(--transition);
background-color: var(--color-bg-card);
border: 1px solid var(--color-border);
font-variant-numeric: tabular-nums;
}
.pagination-item:hover {
background-color: var(--color-bg-elevated);
border-color: var(--color-border-light);
color: var(--color-text-primary);
}
.pagination-item.active {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-primary-text);
font-weight: 700;
}
.pagination-item.disabled {
opacity: 0.3;
pointer-events: none;
}
/* ==============================
Badges / Tags
============================== */
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
border-radius: 6px;
font-size: 11.5px;
font-weight: 600;
line-height: 1.5;
letter-spacing: 0.01em;
white-space: nowrap;
}
.badge-primary {
background-color: var(--color-primary-light);
color: var(--color-primary-strong);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.badge-accent {
background-color: var(--color-accent-soft);
color: var(--color-accent-light);
}
.badge-secondary {
background-color: var(--color-neutral-light);
color: var(--color-text-secondary);
}
.badge-success {
background-color: var(--color-success-light);
color: var(--color-success);
}
.badge-warning {
background-color: var(--color-warning-light);
color: var(--color-warning);
}
.badge-error {
background-color: var(--color-error-light);
color: var(--color-error);
}
.badge-info {
background-color: var(--color-info-light);
color: var(--color-info);
}
.badge-neutral {
background-color: var(--color-neutral-light);
color: var(--color-text-muted);
}
/* ==============================
Tabs (pilulas no padrao Dash)
============================== */
.tabs {
display: flex;
gap: 6px;
flex-wrap: wrap;
padding-bottom: 12px;
border-bottom: 1px solid var(--color-divider);
margin-bottom: 24px;
}
.tab-item {
padding: 7px 14px;
font-family: var(--font-display);
font-size: 13.5px;
font-weight: 600;
color: var(--color-text-secondary);
text-decoration: none;
background-color: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: 10px;
transition: var(--transition);
display: flex;
align-items: center;
gap: 8px;
}
.tab-item:hover {
color: var(--color-text-primary);
border-color: var(--color-border-light);
background-color: var(--color-bg-elevated);
}
.tab-item.active {
color: var(--color-primary-text);
background-color: var(--color-primary);
border-color: var(--color-primary);
}
/* ==============================
Upload Card
============================== */
.upload-card {
background-color: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-lg);
padding: 20px;
text-align: center;
}
.upload-card-left {
display: contents;
}
.upload-card-desc {
font-size: 11px;
color: var(--color-text-muted);
margin-bottom: 8px;
}
.upload-card-actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
justify-content: center;
min-width: 180px;
}
.upload-card-label {
font-size: 13px;
font-weight: 500;
color: var(--color-text-secondary);
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 6px;
justify-content: center;
}
.upload-card-preview {
width: 100%;
height: 100px;
border-radius: var(--border-radius);
background-color: var(--color-bg-input);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
overflow: hidden;
}
.upload-card-preview img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
/* ==============================
Theme Circle
============================== */
.theme-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 16px;
}
.theme-option {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 16px;
border: 2px solid var(--color-border);
border-radius: var(--border-radius-lg);
cursor: pointer;
transition: var(--transition);
background: transparent;
}
.theme-option:hover {
border-color: var(--color-border-light);
}
.theme-option.active {
border-color: var(--color-primary);
box-shadow: var(--glow-primary);
}
.theme-circles {
display: flex;
gap: 4px;
}
.theme-circle {
width: 32px;
height: 32px;
border-radius: 50%;
border: 2px solid var(--color-border);
}
.theme-name {
font-size: 11px;
color: var(--color-text-secondary);
text-align: center;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.3px;
}
/* ==============================
Security Card
============================== */
.security-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
}
.security-card {
background-color: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-lg);
padding: 20px;
}
.security-card-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.security-card-icon {
color: var(--color-primary-strong);
}
.security-card-title {
font-size: 14px;
font-weight: 600;
color: var(--color-text-primary);
}
.security-card-desc {
font-size: 12px;
color: var(--color-text-muted);
margin-bottom: 12px;
}
/* ==============================
Quick Links
============================== */
.quick-link {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-radius: 10px;
border: 1px solid transparent;
color: var(--color-text-secondary);
text-decoration: none;
font-family: var(--font-display);
font-size: 14px;
font-weight: 500;
transition: var(--transition);
}
.quick-link:hover {
background-color: var(--color-bg-elevated);
border-color: var(--color-border);
color: var(--color-text-primary);
}
.quick-link svg {
color: var(--color-primary-strong);
}
/* ==============================
Empty State
============================== */
.empty-state {
text-align: center;
padding: 44px 24px;
color: var(--color-text-muted);
}
.empty-state svg {
display: block;
box-sizing: content-box;
margin: 0 auto 14px;
padding: 12px;
border-radius: 14px;
color: var(--color-primary-strong);
background-color: var(--color-primary-light);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 25%, transparent);
}
.empty-state > svg {
width: 26px;
height: 26px;
}
.empty-state-text {
font-size: 14px;
color: var(--color-text-secondary);
}
/* ==============================
Login Page
============================== */
.login-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-bg-body);
background-size: cover;
background-position: center;
position: relative;
padding-top: env(safe-area-inset-top, 0px);
padding-bottom: env(safe-area-inset-bottom, 0px);
padding: 16px;
}
/* Fundo carvao com brilho amarelo suave atras do card (sobre a imagem de fundo, se houver) */
.login-page::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(520px 380px at 50% 50%, color-mix(in srgb, var(--color-primary) 16%, transparent) 0%, transparent 70%),
radial-gradient(420px 320px at 62% 40%, color-mix(in srgb, var(--color-accent) 10%, transparent) 0%, transparent 70%),
color-mix(in srgb, var(--color-bg-body) 72%, transparent);
}
.login-card {
position: relative;
z-index: 1;
background-color: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 40px 36px;
width: 100%;
max-width: 400px;
box-shadow: var(--shadow-lg), 0 0 80px -20px color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.login-logo {
text-align: center;
margin-bottom: 24px;
}
.login-logo img {
height: 48px;
object-fit: contain;
}
.login-title {
text-align: center;
font-family: var(--font-display);
font-size: 24px;
font-weight: 800;
letter-spacing: -0.02em;
margin-bottom: 4px;
color: var(--color-text-primary);
}
.login-subtitle {
text-align: center;
font-size: 14px;
color: var(--color-text-secondary);
margin-bottom: 24px;
}
/* ==============================
Alertas Inline
============================== */
.alert {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
border-radius: var(--radius-md);
border-left-width: 3px !important;
margin-bottom: 16px;
font-size: 14px;
}
.alert svg { flex-shrink: 0; margin-top: 2px; }
.alert-success {
background-color: var(--color-success-light);
color: var(--color-success);
border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent);
border-left-color: var(--color-success);
}
.alert-error {
background-color: var(--color-error-light);
color: var(--color-error);
border: 1px solid color-mix(in srgb, var(--color-error) 30%, transparent);
border-left-color: var(--color-error);
}
.alert-warning {
background-color: var(--color-warning-light);
color: var(--color-warning);
border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent);
border-left-color: var(--color-warning);
}
.alert-info {
background-color: var(--color-info-light);
color: var(--color-info);
border: 1px solid color-mix(in srgb, var(--color-info) 30%, transparent);
border-left-color: var(--color-info);
}
/* ==============================
Footer
============================== */
.app-footer {
padding: 16px 32px;
text-align: center;
font-size: 12px;
color: var(--color-text-muted);
border-top: 1px solid var(--color-border);
}
.app-footer a {
color: var(--color-primary-strong);
text-decoration: none;
}
/* ==============================
Toggle Switch
============================== */
.toggle {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
}
.toggle input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
cursor: pointer;
inset: 0;
background-color: var(--color-bg-elevated);
border: 1px solid var(--color-border-light);
border-radius: 24px;
transition: var(--transition);
}
.toggle-slider::before {
content: '';
position: absolute;
height: 16px;
width: 16px;
left: 3px;
top: 3px;
background-color: var(--color-text-muted);
border-radius: 50%;
transition: var(--transition);
}
.toggle input:checked + .toggle-slider {
background-color: var(--color-primary);
border-color: var(--color-primary);
}
.toggle input:checked + .toggle-slider::before {
transform: translateX(20px);
background-color: var(--color-primary-text);
}
.toggle input:focus-visible + .toggle-slider {
box-shadow: var(--glow-primary);
}
/* ==============================
Responsivo
============================== */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; overflow: hidden; }
.search-form {
display: flex;
gap: 12px;
align-items: flex-end;
flex-wrap: wrap;
}
.search-form-field {
margin-bottom: 0;
min-width: 140px;
flex: 1;
}
/* ==============================
Utilitarios
============================== */
.text-primary { color: var(--color-primary-strong) !important; }
.text-success { color: var(--color-success) !important; }
.text-error { color: var(--color-error) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-muted { color: var(--color-text-muted) !important; }
.bg-primary-light { background-color: var(--color-primary-light) !important; }
.bg-success-light { background-color: var(--color-success-light) !important; }
.bg-error-light { background-color: var(--color-error-light) !important; }
.bg-warning-light { background-color: var(--color-warning-light) !important; }
.flex-between {
display: flex;
align-items: center;
justify-content: space-between;
}
.gap-sm { gap: 8px; }
.gap-md { gap: 16px; }
.gap-lg { gap: 24px; }
.mt-sm { margin-top: 8px; }
.mt-md { margin-top: 16px; }
.mt-lg { margin-top: 24px; }
.mb-sm { margin-bottom: 8px; }
.mb-md { margin-bottom: 16px; }
.mb-lg { margin-bottom: 24px; }
/* ============================================
Avatar de Perfil
============================================ */
.profile-avatar-section {
display: flex;
align-items: center;
gap: 20px;
padding: 4px;
}
.profile-avatar-wrapper {
flex-shrink: 0;
}
.profile-avatar-img {
border: 3px solid var(--color-border);
}
.profile-avatar-info {
flex: 1;
min-width: 0;
}
.user-avatar {
border-radius: 50%;
object-fit: cover;
}
/* ============================================
Notificacoes — Sino e Painel
============================================ */
.notification-bell {
position: relative;
}
.notification-bell-btn {
position: relative;
background: none;
border: none;
color: var(--color-text-secondary);
cursor: pointer;
padding: 8px;
border-radius: var(--border-radius);
transition: var(--transition);
display: flex;
align-items: center;
}
.notification-bell-btn:hover {
background-color: var(--color-bg-input);
color: var(--color-text-primary);
}
.notification-badge {
position: absolute;
top: 2px;
right: 2px;
background-color: var(--color-error);
color: #FFFFFF;
font-size: 10px;
font-weight: 700;
min-width: 18px;
height: 18px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
line-height: 1;
}
.notification-panel {
position: absolute;
top: 100%;
right: 0;
width: 360px;
max-height: 420px;
background-color: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-lg);
z-index: 1000;
display: flex;
flex-direction: column;
overflow: hidden;
}
.notification-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid var(--color-border);
font-size: 14px;
color: var(--color-text-primary);
}
.notification-panel-list {
flex: 1;
overflow-y: auto;
max-height: 300px;
}
.notification-panel-footer {
padding: 10px 16px;
border-top: 1px solid var(--color-border);
text-align: center;
}
.notification-panel-footer a {
color: var(--color-primary-strong);
font-size: 13px;
text-decoration: none;
}
.notification-panel-footer a:hover {
text-decoration: underline;
}
.notification-empty {
padding: 32px 16px;
text-align: center;
color: var(--color-text-muted);
font-size: 13px;
}
.notification-dropdown-item {
padding: 12px 16px;
border-bottom: 1px solid var(--color-border-light);
cursor: pointer;
transition: var(--transition);
}
.notification-dropdown-item:hover {
background-color: var(--color-bg-input);
}
.notification-dropdown-item:last-child {
border-bottom: none;
}
.notification-dropdown-title {
font-size: 13px;
font-weight: 500;
color: var(--color-text-primary);
margin-bottom: 2px;
}
.notification-dropdown-msg {
font-size: 12px;
color: var(--color-text-muted);
margin-bottom: 4px;
}
.notification-dropdown-time {
font-size: 11px;
color: var(--color-text-muted);
}
.notification-type-warning .notification-dropdown-title { color: var(--color-warning); }
.notification-type-error .notification-dropdown-title { color: var(--color-error); }
.notification-type-success .notification-dropdown-title { color: var(--color-success); }
.notification-full-list {
border-top: 1px solid var(--color-border-light);
}
.notification-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 20px;
border-bottom: 1px solid var(--color-border-light);
transition: var(--transition);
}
.notification-item.unread {
background-color: var(--color-primary-light);
}
.notification-item-icon {
flex-shrink: 0;
color: var(--color-text-muted);
margin-top: 2px;
}
.notification-item.unread .notification-item-icon {
color: var(--color-primary-strong);
}
.notification-item-content {
flex: 1;
min-width: 0;
}
.notification-item-title {
font-size: 14px;
font-weight: 500;
color: var(--color-text-primary);
}
.notification-item-title a {
color: var(--color-primary-strong);
text-decoration: underline;
text-decoration-color: transparent;
text-underline-offset: 3px;
transition: text-decoration-color .15s;
}
.notification-item-title a:hover {
text-decoration-color: var(--color-primary);
}
/* Linha inteira clicavel quando ha destino */
.notification-item.has-link {
cursor: pointer;
}
.notification-item.has-link:hover {
background-color: var(--color-bg-card-hover, rgba(0, 0, 0, 0.03));
}
.notification-item-open {
flex-shrink: 0;
align-self: center;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
@media (max-width: 640px) {
.notification-item-open span { display: none; }
}
.notification-item-message {
font-size: 13px;
color: var(--color-text-muted);
margin-top: 2px;
}
.notification-item-time {
font-size: 12px;
color: var(--color-text-muted);
margin-top: 4px;
}
/* ============================================
Gerenciador de Midia
============================================ */
.media-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px;
}
.media-card {
position: relative;
background-color: var(--color-bg-input);
border: 1px solid var(--color-border-light);
border-radius: var(--border-radius-lg);
overflow: hidden;
transition: var(--transition);
}
.media-card:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-md);
}
.media-card-preview {
position: relative;
height: 140px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background-color: var(--color-bg-body);
cursor: pointer;
}
.media-card-preview img {
width: 100%;
height: 100%;
object-fit: cover;
}
.media-card-icon {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
color: var(--color-text-muted);
}
.media-card-icon span {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
.media-card-info {
padding: 8px 12px 10px;
text-align: left;
min-height: 80px;
}
.media-card-name {
font-size: 13px;
font-weight: 600;
color: var(--color-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.media-card-meta {
font-size: 11px;
color: var(--color-text-muted);
margin-top: 2px;
}
.media-card-actions {
position: absolute;
bottom: 6px;
right: 6px;
display: flex;
gap: 4px;
}
.media-card-tags {
display: flex;
flex-wrap: wrap;
gap: 3px;
margin-top: 4px;
margin-left: -3px;
line-height: 1;
}
.media-card-detail {
font-size: 12px;
color: var(--color-text-secondary);
margin-top: 2px;
min-height: 38px;
}
.media-card-muted {
font-size: 11px;
color: var(--color-text-muted);
margin-top: 4px;
}
.media-card-zoom {
position: absolute;
top: 6px;
right: 6px;
background: rgba(0,0,0,0.55);
border: none;
border-radius: 50%;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #fff;
}
/* ============================================
Grade Quantity Input (Pedidos)
============================================ */
.grade-qty-input {
width: 42px;
text-align: center;
padding: 4px 2px;
border: 1px solid var(--color-border);
border-radius: 4px;
background: var(--color-bg-card);
color: var(--color-text-primary);
font-size: 12px;
font-weight: 600;
outline: none;
user-select: none;
-webkit-user-select: none;
}
.grade-qty-input:focus {
border-color: var(--color-primary);
}
/* Spinners sempre visíveis */
.grade-qty-input::-webkit-inner-spin-button,
.grade-qty-input::-webkit-outer-spin-button {
opacity: 1;
height: 20px;
}
/* ============================================
Media Picker (Seletor do servidor)
============================================ */
#mediaPickerModal .modal-container {
width: 90vw;
max-width: 900px;
}
.media-picker-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 8px;
max-height: 60vh;
overflow-y: auto;
padding: 4px;
}
.media-picker-item {
cursor: pointer;
border: 2px solid transparent;
border-radius: var(--border-radius);
overflow: hidden;
transition: var(--transition);
background-color: var(--color-bg-input);
}
.media-picker-item:hover {
border-color: var(--color-primary);
box-shadow: 0 0 0 1px var(--color-primary);
}
.media-picker-thumb {
width: 100%;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background-color: var(--color-bg-body);
}
.media-picker-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.media-picker-file-icon {
color: var(--color-text-muted);
}
.media-picker-name {
font-size: 10px;
color: var(--color-text-secondary);
padding: 3px 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
/* ============================================
Responsivo — Mobile (768px)
Todas as regras mobile DEVEM ficar aqui
============================================ */
@media (max-width: 768px) {
.app-sidebar {
transform: translateX(-100%);
z-index: 50;
}
.app-sidebar.open {
transform: translateX(0);
}
.app-main {
margin-left: 0;
}
/* Topbar mobile: logo a esquerda, acoes + hamburguer agrupados a direita.
Reordenado via flex `order` (o HTML continua menu -> logo -> acoes);
margin-left:auto no primeiro item do grupo da direita e' o que empurra
hamburguer+acoes juntos pro canto, deixando so' a logo isolada a esquerda. */
.app-topbar {
padding: 6px;
padding-top: calc(6px + env(safe-area-inset-top, 0px));
justify-content: flex-start;
margin: 8px 8px 12px;
min-height: 50px;
}
.app-topbar a:has(> .app-topbar-logo) {
order: -1;
flex-shrink: 0;
}
.app-topbar-logo {
display: block;
flex-shrink: 0;
order: -1;
height: 38px;
max-width: 140px;
}
.app-topbar > .btn-ghost,
.app-topbar-right > .btn-ghost,
.app-topbar .topbar-icon-btn,
.app-topbar .notification-bell-btn {
width: 36px;
height: 36px;
}
.app-topbar .mobile-menu-btn {
display: flex;
flex: 0 0 auto;
justify-content: center;
padding: 0;
order: 2;
margin-left: auto;
}
.app-topbar-right {
flex: 0 0 auto;
justify-content: flex-end;
order: 3;
margin-left: 0;
}
.app-content {
padding: 8px 8px 16px;
overflow-x: hidden;
max-width: 100vw;
}
.sidebar-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 45;
}
.sidebar-overlay.active {
display: block;
}
.mobile-menu-btn {
display: flex;
}
.stats-grid {
grid-template-columns: 1fr;
}
.security-grid {
grid-template-columns: 1fr 1fr;
}
.theme-grid {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
/* Tabelas: viram cards empilhados */
.data-table thead {
display: none;
}
.data-table,
.data-table tbody,
.data-table tr,
.data-table td {
display: block;
width: 100%;
}
.data-table tbody tr {
padding: 12px 0;
border-bottom: 1px solid var(--color-border);
}
.data-table tbody td {
padding: 4px 0;
font-size: 13px;
border-bottom: none;
text-align: left !important;
}
.data-table tbody td::before {
content: attr(data-label);
display: block;
font-size: 11px;
font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase;
margin-bottom: 2px;
}
.data-table tbody td:last-child {
padding-top: 8px;
}
/* ── Cards sem padding lateral — app-content tem 8px, card preenche o resto
Sem negative margin para não conflitar com overflow-x nas tabelas.
─────────────────────────────────────────────────────────────────── */
.card {
padding: 0;
border-radius: 0;
border-left: none;
border-right: none;
}
/* Card-header: padding explícito + margem vertical compacta */
.card-header {
flex-wrap: wrap;
gap: 8px;
padding: 14px 16px 0;
margin-bottom: 10px;
}
/* Metric pills em card-header perdem margin-left:auto e ficam flush-left */
.card-header .metric-pills { margin-left: 0 !important; }
/* Filtros inline: inputs e selects tomam largura disponivel */
.filters-inline { flex-wrap: wrap; }
.filters-inline input, .filters-inline select {min-width: 0 !important;flex: 1 1 auto;}
/* btn-apply fica compacto — não vira barra larga */
.filters-inline .btn:not(.btn-apply),
.filters-inline button[type="submit"]:not(.btn-apply) { width: 100%; justify-content: center; }
.btn-apply { width: auto !important; flex-shrink: 0; }
/* Order pills → substituídos por select no mobile */
.order-pills { display: none !important; }
/* Select de ordenação — mobile only */
.order-select {
display: block;
width: 100%;
padding: 9px 12px;
font-size: 13px;
font-weight: 500;
border: 1px solid var(--color-border-light);
border-radius: 10px;
background: var(--color-bg-card);
color: var(--color-text-primary);
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
/* Divisores de seção: margem compacta em mobile */
.pa-divider { margin: 16px 0 8px !important; }
/* Grids empilham */
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
.grid-2-keep { grid-template-columns: repeat(2, 1fr) !important; }
/* Upload cards: tudo empilhado centralizado */
.upload-card {
padding: 12px;
text-align: center;
}
.upload-card-left {
display: contents;
}
.upload-card-label {
margin-bottom: 6px;
font-size: 12px;
}
.upload-card-preview {
width: 48px;
height: 48px;
margin: 0 auto 6px;
border-radius: 8px;
}
.upload-card-desc {
font-size: 10px;
margin-bottom: 8px;
}
.upload-card-actions {
justify-content: center;
gap: 4px;
width: 100%;
min-width: 0;
}
.upload-card-actions form {
display: inline;
}
.upload-card-actions .btn {
font-size: 10px;
padding: 3px 5px;
}
.upload-card-actions .btn svg {
width: 12px;
height: 12px;
}
.upload-card {
overflow: hidden;
min-width: 0;
word-break: break-word;
}
.upload-card-desc {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.grid-2-keep {
overflow: hidden;
}
/* Notification panel fullscreen em mobile */
.notification-bell .notification-panel {
position: fixed !important;
top: 48px !important;
left: 8px !important;
right: 8px !important;
width: auto !important;
max-height: 70vh !important;
z-index: 1001;
}
/* Page header */
.page-header h1 {
font-size: 20px;
}
.page-header-top {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.page-header-top > div:last-child {
display: flex;
flex-wrap: wrap;
gap: 6px;
width: 100%;
}
.page-header-top > div:last-child .btn {
flex: 1 1 auto;
justify-content: center;
min-width: 0;
font-size: 12px;
padding: 6px 10px;
}
/* Date picker e window pills em mobile */
.date-range-form {
height: auto;
flex-wrap: wrap;
padding: 4px 8px;
width: auto;
max-width: 100%;
box-sizing: border-box;
gap: 4px;
}
.date-range-divider { display: none; }
.window-pills {
width: 100%;
overflow-x: auto;
flex-wrap: nowrap;
scrollbar-width: none;
}
.window-pills::-webkit-scrollbar { display: none; }
/* Tabs menores */
.tabs {
gap: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
flex-wrap: nowrap;
}
.tabs::-webkit-scrollbar {
display: none;
}
.tab-item {
font-size: 12px;
padding: 8px 10px;
white-space: nowrap;
flex-shrink: 0;
}
/* Forms: compactos no mobile */
.form-input, .form-select {
font-size: 14px;
padding: 8px 10px;
}
.form-select {
padding-right: 30px;
background-position: right 8px center;
text-overflow: ellipsis;
overflow: hidden;
}
.form-input[type="date"] {
min-height: 38px;
padding: 6px 8px;
}
.form-label {
font-size: 11px;
margin-bottom: 4px;
}
.form-group {
margin-bottom: 10px;
}
/* Botões compactos */
.btn {
font-size: 13px;
}
.btn-sm {
font-size: 12px;
padding: 5px 10px;
}
/* Filtros empilhados */
.filter-bar {
flex-direction: column;
}
/* Media grid menor */
.media-grid {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.media-card-preview {
height: 100px;
}
/* Media picker */
#mediaPickerModal .modal-container {
width: 95vw;
margin: 8px;
}
.media-picker-grid {
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.media-picker-thumb {
height: 65px;
}
/* Search form: campos em 2 colunas */
.search-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 8px;
}
.search-form-field {
min-width: 0;
}
.search-form-field .form-input,
.search-form-field .form-select {
width: 100%;
min-width: 0;
min-height: 40px;
}
.search-form-field .form-input[type="date"] {
padding: 8px;
}
.search-form .btn {
grid-column: 1 / -1;
}
/* Security cards em mobile */
.security-card {
padding: 12px;
}
/* Modal menor */
.modal-container {
width: 95vw;
margin: 8px;
max-height: 90vh;
}
.modal-body {
max-height: 70vh;
overflow-y: auto;
}
/* Media grid: 2 colunas */
.media-grid {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.media-card-preview {
height: 100px;
}
/* Media picker */
#mediaPickerModal .modal-container {
width: 95vw;
margin: 8px;
}
.media-picker-grid {
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.media-picker-thumb {
height: 65px;
}
}
/* ========== STAT CARDS (reutilizável) ========== */
.dash-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
margin-bottom: 20px;
}
.dash-card {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
min-width: 0;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: 14px;
text-decoration: none;
color: inherit;
transition: box-shadow 0.2s, border-color 0.2s;
}
.dash-card:hover {
box-shadow: var(--shadow-md);
border-color: var(--color-border-light);
}
/* Chip de icone do KPI: amarelo com icone escuro em todas as variantes
(a semantica fica na cor do badge de variacao, nao no chip) */
.dash-card-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: var(--color-primary);
color: var(--color-primary-text);
}
.dash-card-icon svg {
width: 20px;
height: 20px;
}
.dash-card-icon--primary,
.dash-card-icon--success,
.dash-card-icon--warning,
.dash-card-icon--error,
.dash-card-icon--info {
background: var(--color-primary);
color: var(--color-primary-text);
}
/* Label em cima, valor embaixo (column-reverse: o markup tem valor antes da label) */
.dash-card-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
}
.dash-card-value {
font-family: var(--font-display);
font-size: clamp(18px, 1.6vw, 26px);
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.15;
color: var(--color-text-primary);
font-variant-numeric: tabular-nums;
}
.dash-card-label {
font-size: 11px;
font-weight: 500;
color: var(--color-text-secondary);
margin-bottom: 3px;
}
@media (max-width: 768px) {
.dash-cards {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin-bottom: 14px;
}
.dash-card {
padding: 10px 12px;
gap: 8px;
border-radius: 8px;
}
.dash-card-icon {
width: 32px;
height: 32px;
border-radius: 8px;
}
.dash-card-icon svg {
width: 16px;
height: 16px;
}
.dash-card-value {
font-size: 18px;
}
.dash-card-label {
font-size: 11px;
}
}
/* Variante: linha unica no desktop (util com 6+ KPIs lado a lado),
grade compacta de 3 colunas no mobile em vez de empilhar/quebrar.
!important necessario: existe um .dash-cards{grid-template-columns:...!important}
mais abaixo neste arquivo que senao sobrescreveria esta variante. */
.dash-cards--linha {
grid-template-columns: unset !important;
grid-auto-flow: column;
grid-auto-columns: 1fr;
}
@media (max-width: 768px) {
.dash-cards--linha {
grid-auto-flow: row;
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (min-width: 769px) {
.mobile-menu-btn {
display: none;
}
.sidebar-overlay {
display: none !important;
}
}
/* ============================================
DESIGN SYSTEM — Padroes globais ADS-PRO
============================================ */
/* Wrap de tabela: scroll horizontal somente quando realmente precisar */
.data-table-wrap {
overflow-x: auto;
width: 100%;
-webkit-overflow-scrolling: touch;
}
.data-table-wrap::-webkit-scrollbar { height: 6px; }
.data-table-wrap::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
/* Filtros: card-header com filtros sempre alinhados a direita */
.card-header.filters-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
.filters-inline {
display: flex;
gap: 8px;
margin-left: auto;
justify-content: space-between;
align-items: center;
flex-direction: row;
}
/* Form input pequeno (para filtros inline) */
.form-input-sm {
padding: 7px 10px !important;
font-size: 13px !important;
min-height: 34px;
width: auto;
}
/* Date picker — styled com borda completa, alinhado ao design system */
.date-range-form {
display: inline-flex;
align-items: center;
gap: 10px;
border: 1px solid var(--color-border-light);
border-radius: 10px;
padding: 3px 4px 3px 12px;
transition: border-color .15s, box-shadow .15s;
height: 38px;
justify-content: center;
width: unset !important;
background: var(--color-bg-card) !important;
}
.date-range-form:hover {
border-color: color-mix(in srgb, var(--color-text-muted) 60%, var(--color-border-light));
}
.date-range-form:focus-within {
border-color: var(--color-primary);
box-shadow: var(--glow-primary);
}
.date-pick {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 112px;
background: transparent !important;
}
/* Icone de calendario a esquerda, so no primeiro campo */
.date-range-form .date-pick:first-of-type::before {
display: block;
width: 14px;
}
.date-pick::before {
content: "";
height: 14px;
flex-shrink: 0;
display:none;
background: var(--color-text-muted);
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.date-pick input[type="date"] {
background: transparent;
padding: 0;
margin: 0;
font-size: 13px;
color: var(--color-text-primary);
min-width: 80px;
font-family: inherit;
cursor: pointer;
}
.date-range-form input.form-control.input {
border: none;
outline: none !important;
background: transparent !important;
width: 100% !important;
color: var(--color-text-primary);
font-family: var(--font-display);
font-size: 13px;
font-weight: 500;
font-variant-numeric: tabular-nums;
cursor: pointer;
}
.date-pick input[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0;
position: absolute;
inset: 0;
width: 100%;
cursor: pointer;
}
.date-range-sep {
color: var(--color-text-muted);
font-size: 11px;
font-weight: 500;
padding: 0 2px;
user-select: none;
display:none;
}
.date-range-divider {
width: 1px;
height: 18px;
background: var(--color-border-light);
margin: 0 2px;
}
/* Botao Aplicar no date picker */
.btn-apply {
display: flex;
align-items: center;
gap: 5px;
background: var(--color-primary);
color: var(--color-primary-text);
border: 0;
border-radius: var(--radius-sm);
padding: 5px 14px;
font-family: var(--font-display);
font-size: 12.5px;
font-weight: 700;
cursor: pointer;
transition: background-color .15s, box-shadow .15s, transform .05s;
white-space: nowrap;
height: 30px;
}
.btn-apply:hover { background: var(--color-primary-hover); box-shadow: var(--glow-primary); }
.btn-apply:active { transform: translateY(1px); }
/* Janela de tempo (pills): trilho escuro arredondado, pilula ativa amarela */
.window-pills {
display: inline-flex;
gap: 2px;
padding: 3px;
background: var(--color-bg-card);
border: 1px solid var(--color-border-light);
border-radius: 10px;
align-content: center;
align-items: center;
justify-content: flex-start;
}
@media (max-width: 768px) {
.filters-inline {flex-wrap: wrap;}
.date-range-form {
margin-top: 8px;
}
}
.window-pills a, .window-pills button {
padding: 5px 10px;
font-family: var(--font-display);
font-size: 12.5px;
font-weight: 600;
color: var(--color-text-secondary);
text-decoration: none;
border-radius: var(--radius-sm);
background: transparent;
border: 0;
cursor: pointer;
white-space: nowrap;
transition: background .15s, color .15s;
}
.window-pills a:hover, .window-pills button:hover {
color: var(--color-text-primary);
background: var(--color-bg-elevated);
}
.window-pills .is-active,
.window-pills a.active,
.window-pills button.active {
background: var(--color-primary);
color: var(--color-primary-text) !important;
border-radius: var(--radius-sm);
}
.window-pills .is-active:hover,
.window-pills a.active:hover,
.window-pills button.active:hover {
background: var(--color-primary-hover);
}
/* Select de ordenação: só visível em mobile */
@media (min-width: 769px) { .order-select { display: none; } }
/* KPI Row: cards horizontais que NAO empilham conteudo (cresce livre) */
.kpi-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 20px;
}
.kpi-card {
position: relative;
flex: 1 1 200px;
min-width: 0;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: 14px;
transition: box-shadow .15s, border-color .15s;
}
.kpi-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-light); }
.kpi-card .kpi-icon {
width: 40px; height: 40px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
background: var(--color-primary);
color: var(--color-primary-text);
}
.kpi-card .kpi-icon svg { width: 20px; height: 20px; }
.kpi-card .kpi-icon--success,
.kpi-card .kpi-icon--warning,
.kpi-card .kpi-icon--error,
.kpi-card .kpi-icon--info { background: var(--color-primary); color: var(--color-primary-text); }
.kpi-card .kpi-body { flex: 1 1 auto; min-width: 0; }
.kpi-card .kpi-label {
font-size: 11px;
font-weight: 500;
color: var(--color-text-secondary);
margin-bottom: 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kpi-card .kpi-value {
font-family: var(--font-display);
font-size: clamp(18px, 1.6vw, 26px);
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.15;
color: var(--color-text-primary);
font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
}
.kpi-card .kpi-sub {
font-size: 12px;
color: var(--color-text-muted);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 768px) {
.kpi-card { flex-basis: 100%; }
.date-pick {
display: inline-flex;
align-items: center;
gap: 5px;
max-width: 100%!important;
background: transparent!important;
}
}
/* Card de grafico: flat, sem borda dura, sem padding interno excessivo */
.chart-card {
position: relative;
background: var(--color-bg-card);
border-radius: 14px;
padding: 16px 18px;
box-shadow: none;
border: 1px solid var(--color-border);
}
.chart-card-title {
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
color: var(--color-text-primary);
margin: 0 0 12px;
display: flex;
align-items: center;
gap: 8px;
}
.chart-card-title svg { color: var(--color-primary-strong); }
.chart-card canvas {
border: 0 !important;
background: transparent !important;
}
/* Layout chart + sumario textual lado a lado */
.chart-with-summary {
display: grid;
grid-template-columns: minmax(180px, 1fr) minmax(160px, 1.1fr);
gap: 16px;
align-items: center;
}
@media (max-width: 640px) {
.chart-with-summary { grid-template-columns: 1fr; }
}
/* Legenda customizada (ao inves do legend do Chart.js) */
.chart-legend {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.chart-legend li {
display: grid;
grid-template-columns: 8px 1fr auto auto;
align-items: center;
gap: 8px;
font-size: 12px;
line-height: 1.3;
padding: 5px 0;
border-bottom: 1px solid var(--color-divider);
}
.chart-legend li:last-child { border-bottom: 0; }
.chart-legend .lg-dot {
width: 8px;
height: 8px;
border-radius: 3px;
flex-shrink: 0;
}
.chart-legend .lg-name {
color: var(--color-text-secondary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.chart-legend .lg-val {
font-family: var(--font-display);
color: var(--color-text-primary);
font-weight: 600;
font-variant-numeric: tabular-nums;
text-align: right;
}
.chart-legend .lg-pct {
color: var(--color-text-muted);
font-size: 11px;
font-variant-numeric: tabular-nums;
text-align: right;
min-width: 38px;
}
/* Listagem clicavel (ganhadores/perdedores, top items) */
.list-rows {
display: flex;
flex-direction: column;
gap: 4px;
}
.list-rows a.list-row,
.list-rows .list-row {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: var(--radius-sm);
text-decoration: none;
color: var(--color-text-primary);
transition: background .12s;
font-size: 13px;
}
.list-rows a.list-row:hover {
background: var(--color-bg-elevated);
}
.list-rows a.list-row:hover .lr-name {
color: var(--color-primary-strong);
}
.list-rows .lr-metric {
font-weight: 700;
font-variant-numeric: tabular-nums;
min-width: 56px;
}
.list-rows .lr-metric--pos { color: var(--color-success); }
.list-rows .lr-metric--neg { color: var(--color-error); }
.list-rows .lr-metric--mid { color: var(--color-warning); }
.list-rows .lr-name {
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Cards de top anuncios (com thumbnail) — link clicavel */
.ad-card {
display: flex;
gap: 10px;
padding: 10px;
background: var(--color-bg-card);
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
text-decoration: none;
color: inherit;
transition: box-shadow .15s, border-color .15s;
}
.ad-card:hover {
box-shadow: var(--glow-primary);
border-color: var(--color-primary);
}
.ad-card .ad-thumb {
flex: 0 0 64px;
width: 64px;
height: 64px;
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--color-bg-elevated);
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.ad-card .ad-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ad-card .ad-thumb .ad-thumb-fallback {
color: var(--color-text-muted);
opacity: .55;
}
.ad-card .ad-thumb-badge {
position: absolute;
top: 4px;
right: 4px;
background: rgba(0,0,0,.55);
color: #fff;
font-size: 9px;
padding: 1px 5px;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: .04em;
line-height: 1.2;
}
.ad-card .ad-body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.ad-card .ad-title {
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
color: var(--color-text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ad-card .ad-meta {
font-size: 11px;
color: var(--color-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ad-card .ad-metrics {
display: flex;
gap: 12px;
margin-top: 2px;
font-size: 11px;
color: var(--color-text-muted);
}
.ad-card .ad-metrics b {
color: var(--color-text-primary);
font-variant-numeric: tabular-nums;
font-weight: 600;
margin-left: 2px;
}
.ad-card .ad-metrics .pos { color: var(--color-success); }
.ad-card .ad-metrics .neg { color: var(--color-error); }
/* Thumbnail de criativo (Top anuncios, Hero do anuncio, Relatorio) */
.creative-thumb {
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
flex-shrink: 0;
position: relative;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-muted);
}
.creative-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.creative-thumb .ct-ph {
width: 40%;
height: 40%;
color: var(--color-text-muted);
}
.creative-thumb .ct-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,.18);
pointer-events: none;
}
.creative-thumb .ct-play svg {
width: 32%;
max-width: 48px;
height: auto;
aspect-ratio: 1;
background: rgba(0,0,0,.55);
border-radius: 50%;
padding: 6px;
}
.creative-thumb .ct-badge {
position: absolute;
top: 6px;
right: 6px;
background: rgba(0,0,0,.7);
color: #fff;
padding: 2px 6px;
border-radius: 3px;
font-size: 9px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
line-height: 1.2;
}
.creative-thumb[data-kind="dynamic"] .ct-badge { background: color-mix(in srgb, var(--color-success) 85%, transparent); }
.creative-thumb[data-kind="carousel"] .ct-badge { background: color-mix(in srgb, var(--color-accent) 88%, transparent); }
/* Anuncio dinamico: overlay textual centralizado (Meta nao tem arte fixa) */
.creative-thumb[data-kind="dynamic"]::after {
content: "Criativo dinamico";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 4px;
background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 92%, transparent), color-mix(in srgb, var(--color-accent-dark) 92%, transparent));
color: #fff;
font-size: 10px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
line-height: 1.2;
}
.creative-thumb[data-kind="dynamic"] .ct-badge,
.creative-thumb[data-kind="dynamic"] .ct-ph,
.creative-thumb[data-kind="dynamic"] img { display: none !important; }
.creative-thumb[data-kind="dynamic"][style*="aspect-ratio"]::after,
.creative-thumb[data-kind="dynamic"][style*="100%"]::after {
font-size: 14px;
}
/* Tabela compacta para nao gerar scroll horizontal sem precisar */
.data-table { table-layout: auto; }
.data-table thead th, .data-table tbody td { padding: 10px 12px; }
.data-table tbody td { font-size: 13px; }
.data-table tbody td:last-child { padding-right: 8px; }
@media (min-width: 1100px) {
.data-table-wrap { overflow-x: visible; }
}
/* Garante que valores grandes nao quebrem em duas linhas */
.dash-card-value {
white-space: normal;
overflow-wrap: anywhere;
min-width: 0;
}
.dash-cards {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
}
/* Performance: previne overflow horizontal de cards/grids */
.perf-ad-card { min-width: 0; }
.perf-ad-info { min-width: 0; overflow: hidden; }
.perf-win-box { min-width: 0; overflow: hidden; }
.media-type-card { min-width: 0; overflow: hidden; }
.media-type-card > div { min-width: 0; }
/* ─── Entity toggle (ativar/pausar campanha, conjunto, anúncio) ─── */
.entity-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 10px;
font-family: var(--font-display);
font-size: 11.5px;
font-weight: 600;
cursor: pointer;
border: 1px solid var(--color-border-light);
background: var(--color-bg-card);
color: var(--color-text-secondary);
transition: all .15s;
line-height: 1;
white-space: nowrap;
}
.entity-toggle:hover:not(:disabled) {
border-color: var(--color-text-muted);
color: var(--color-text-primary);
}
.entity-toggle:disabled {
opacity: .55;
cursor: wait;
}
.entity-toggle .dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--color-text-muted);
flex-shrink: 0;
}
.entity-toggle.is-active {
background: var(--color-success-light);
border-color: color-mix(in srgb, var(--color-success) 45%, transparent);
color: var(--color-success);
}
.entity-toggle.is-active .dot {
background: var(--color-success);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 20%, transparent);
}
.entity-toggle.is-paused {
background: var(--color-bg-elevated);
color: var(--color-text-muted);
}
.entity-toggle.is-loading {
pointer-events: none;
}
/* ─── Inputs a 16px em dispositivos de toque ───
iOS da' zoom automatico ao focar um input/select com fonte < 16px. O bloco
mobile (@media max-width:768px) la' em cima forca 14px pra ficar compacto —
isso corrige so' pra toque (nao afeta desktop com janela estreita), sem
desfazer o layout compacto (so' o font-size muda). */
@media (hover: none) and (pointer: coarse) {
input,
select,
textarea,
.form-input,
.form-select,
.form-textarea,
.form-control {
font-size: 16px !important;
}
}
/* ============================================
DASH PRO — assinatura visual e ajustes globais
(camada final: vale para todos os temas, usa so tokens de themes.css)
============================================ */
/* Tipografia de display em titulos */
h1, h2, h3, h4 {
font-family: var(--font-display);
letter-spacing: -0.01em;
}
::selection {
background: var(--color-primary);
color: var(--color-primary-text);
}
/* --- Card com "aba" -------------------------------------------------------
Contorno de 1px na cor --card-tab-border que nasce no canto superior
esquerdo e se dissolve ao longo do topo e da lateral (sem markup extra:
pseudo-elemento com mascara radial). Os cards precisam de position:relative. */
.card::before,
.stats-card::before,
.dash-card::before,
.kpi-card::before,
.chart-card::before,
.login-card::before,
.perf-kpi-grid > .perf-card::before,
.ads-grid .ads-metric-card::before {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
border: 1px solid var(--card-tab-border);
pointer-events: none;
opacity: .9;
-webkit-mask: radial-gradient(circle 260px at 0 0, #000 30%, transparent 100%);
mask: radial-gradient(circle 260px at 0 0, #000 30%, transparent 100%);
transition: opacity .2s ease;
}
/* Filhos de .grid-N tem overflow:hidden (anti-estouro): a aba vai para dentro da borda */
:is(.grid-2, .grid-3, .grid-4) > :is(.card, .stats-card, .dash-card, .kpi-card, .chart-card)::before {
inset: 0;
}
.stats-card:hover::before,
.dash-card:hover::before,
.kpi-card:hover::before,
.perf-kpi-grid > .perf-card:hover::before,
.ads-grid .ads-metric-card:hover::before {
opacity: 1;
-webkit-mask: radial-gradient(circle 400px at 0 0, #000 34%, transparent 100%);
mask: radial-gradient(circle 400px at 0 0, #000 34%, transparent 100%);
}
/* Cards de KPI locais das views (perf-card em clients/show, ads-metric-card no dashboard) */
.perf-kpi-grid > .perf-card,
.ads-grid .ads-metric-card {
position: relative;
min-width: 0;
border-radius: 14px;
border: 1px solid var(--color-border);
border-left: 1px solid var(--color-border) !important;
background: var(--color-bg-card);
}
.ads-grid .ads-metric-card--highlight {
background: linear-gradient(135deg, var(--color-bg-card) 40%, var(--color-primary-light));
}
.perf-kpi-grid .perf-kpi-value,
.ads-grid .ads-metric-card__value {
font-family: var(--font-display);
font-size: clamp(18px, 1.6vw, 26px);
letter-spacing: -0.01em;
min-width: 0;
overflow-wrap: anywhere;
}
.perf-kpi-grid .perf-kpi-label svg,
.ads-grid .ads-metric-card__label svg {
color: var(--color-primary-strong);
}
/* --- KPIs em cards estreitos ------------------------------------------------
Quando nao ha espaco para chip + valor lado a lado (ex.: 5-6 KPIs por linha
em 1440px com sidebar), o corpo quebra para baixo do chip e usa a largura
toda do card, em vez de partir o valor. So CSS, sem mudar markup. */
.dash-card,
.stats-card,
.kpi-card {
flex-wrap: wrap;
row-gap: 10px;
}
.dash-card-body,
.stats-card > div:not(.stats-card-icon),
.kpi-card .kpi-body {
flex: 1 1 150px;
}
/* --- KPIs com valor longo (moeda) ------------------------------------------
O valor nunca estoura o card: fonte fluida (clamp), quebra de emergencia e o
badge de variacao / texto auxiliar descem para a linha de baixo. */
.stats-card-value[style*="flex"] {
min-width: 0;
flex-wrap: wrap;
row-gap: 4px;
/* o valor (no texto direto) nunca parte letra por letra: a quebra de
emergencia fica so para o caso de nao caber nem sozinho na linha */
overflow-wrap: normal;
word-break: keep-all;
}
.stats-card-value > span {
order: 3;
font-family: var(--font-body);
letter-spacing: 0;
}
.stats-card-value::after {
content: '';
order: 2;
flex-basis: 100%;
height: 0;
}
.metric-trend {
flex-shrink: 0;
white-space: nowrap;
font-variant-numeric: tabular-nums;
border-radius: 6px !important;
}
/*