/*
* Estilos de layout — usar em
* Padrão: painel (igual ao design original).
*/
/* ========== Compacto: mais denso, menos espaço ========== */
[data-layout="compacto"] .app-main {
padding: 18px 12px 28px;
padding-left: 52px;
}
@media (min-width: 640px) {
[data-layout="compacto"] .app-main {
padding-left: 18px;
padding-right: 18px;
padding-bottom: 36px;
}
}
@media (min-width: 1024px) {
[data-layout="compacto"] .app-main {
padding: 22px 18px 36px;
}
}
[data-layout="compacto"] .section-card {
padding: 0.75rem 1rem;
margin-bottom: 0.85rem;
border-radius: var(--radius-sm);
}
@media (min-width: 640px) {
[data-layout="compacto"] .section-card {
padding: 0.9rem 1.15rem;
}
}
[data-layout="compacto"] .section-title {
font-size: 0.78rem;
margin-bottom: 0.55rem;
}
@media (min-width: 640px) {
[data-layout="compacto"] .section-title {
font-size: 0.9rem;
margin-bottom: 0.75rem;
}
}
[data-layout="compacto"] .page-title {
font-size: 1.15rem;
margin-bottom: 1rem;
}
@media (min-width: 640px) {
[data-layout="compacto"] .page-title {
font-size: 1.35rem;
margin-bottom: 1.15rem;
}
}
[data-layout="compacto"] .card-stat {
padding: 0.85rem 1rem;
}
[data-layout="compacto"] .card-stat .value {
font-size: 1.2rem;
}
[data-layout="compacto"] .cards-grid {
gap: 10px !important;
}
@media (min-width: 640px) {
[data-layout="compacto"] .cards-grid {
gap: 10px !important;
}
}
[data-layout="compacto"] .grid-charts {
gap: 12px !important;
}
[data-layout="compacto"] .chart-container {
height: 220px;
padding: 8px;
}
@media (min-width: 640px) {
[data-layout="compacto"] .chart-container {
height: 240px;
}
}
[data-layout="compacto"] .app-content-header {
height: 52px;
padding: 0 18px;
}
[data-layout="compacto"] .app-sidebar-inner {
padding: 12px 10px;
}
[data-layout="compacto"] .app-sidebar .app-nav a {
padding: 8px 10px;
font-size: 0.875rem;
}
[data-layout="compacto"] .app-sidebar .app-nav-icon {
width: 2rem;
height: 2rem;
min-width: 2rem;
min-height: 2rem;
}
/* ========== Amplo: área útil maior, respiro extra ========== */
[data-layout="amplo"] .app-main {
padding: 28px 20px 40px;
padding-left: 56px;
}
@media (min-width: 640px) {
[data-layout="amplo"] .app-main {
padding-left: 28px;
padding-right: 28px;
padding-bottom: 56px;
}
}
@media (min-width: 1024px) {
[data-layout="amplo"] .app-main {
padding: 40px 32px 64px;
}
}
[data-layout="amplo"] .section-card {
padding: 1.35rem 1.65rem;
margin-bottom: 1.5rem;
border-radius: 14px;
}
@media (min-width: 640px) {
[data-layout="amplo"] .section-card {
padding: 1.5rem 1.85rem;
}
}
[data-layout="amplo"] .glass {
border-radius: 14px;
}
[data-layout="amplo"] .page-title {
font-size: 1.35rem;
margin-bottom: 1.35rem;
}
@media (min-width: 640px) {
[data-layout="amplo"] .page-title {
font-size: 1.9rem;
margin-bottom: 1.65rem;
}
}
[data-layout="amplo"] .section-title {
font-size: 0.875rem;
margin-bottom: 1rem;
}
@media (min-width: 640px) {
[data-layout="amplo"] .section-title {
font-size: 1.05rem;
margin-bottom: 1.15rem;
}
}
[data-layout="amplo"] .card-stat {
padding: 1.35rem 1.5rem;
}
[data-layout="amplo"] .card-stat .value {
font-size: 1.5rem;
}
[data-layout="amplo"] .cards-grid {
gap: 16px !important;
}
@media (min-width: 640px) {
[data-layout="amplo"] .cards-grid {
gap: 18px !important;
}
}
[data-layout="amplo"] .grid-charts {
gap: 20px !important;
}
[data-layout="amplo"] .chart-container {
height: 260px;
padding: 16px;
}
@media (min-width: 640px) {
[data-layout="amplo"] .chart-container {
height: 280px;
}
}
[data-layout="amplo"] .app-content-header {
height: 60px;
padding: 0 28px;
}
/* ========== Minimal: plano, pouca sombra, foco no conteúdo ========== */
[data-layout="minimal"] .glass,
[data-layout="minimal"] .section-card,
[data-layout="minimal"] .modal-glass,
[data-layout="minimal"] .card-stat {
box-shadow: none !important;
border: 1px solid var(--border);
}
[data-layout="minimal"] .glass:hover,
[data-layout="minimal"] .section-card:hover,
[data-layout="minimal"] .card-stat:hover {
box-shadow: none !important;
border-color: var(--border-focus);
}
[data-layout="minimal"] .app-sidebar {
box-shadow: none;
border-right: 1px solid var(--border);
}
[data-layout="minimal"] .app-sidebar.open {
box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
}
[data-layout="minimal"] .app-content-header {
box-shadow: none;
border-bottom: 1px solid var(--border);
}
[data-layout="minimal"] .page-dashboard {
background: var(--bg);
}
[data-layout="minimal"] .btn-glass {
box-shadow: none;
}
[data-layout="minimal"] .table-wrap {
box-shadow: none;
}
/* Mobile: só margin-top — compacto/ampli redefine padding e vinha por cima do liquid-glass */
@media (max-width: 1023px) {
[data-layout="compacto"] .app-main,
[data-layout="amplo"] .app-main {
margin-top: max(0px, calc(12px + var(--safe-top) + 44px + 8px - 18px));
}
}
@media (max-width: 768px) {
[data-layout="compacto"] .app-main,
[data-layout="amplo"] .app-main {
margin-top: max(0px, calc(12px + var(--safe-top) + 44px + 8px - 16px)) !important;
}
}
@media (max-width: 480px) {
[data-layout="compacto"] .app-main,
[data-layout="amplo"] .app-main {
margin-top: max(0px, calc(8px + var(--safe-top) + 42px + 8px - 12px)) !important;
}
}