/* ============================================================
   DASH-PAGE.CSS  — Minimalismo moderno, icons coloridos
   Neutro em tudo exceto icons de diferenciação por seção
   ============================================================ */

/* ── Hero ──────────────────────────────────────────────────── */
.dash-hero {
     padding: 48px 0 40px;
     border-bottom: 1px solid var(--border);
}

.dash-hero__inner {
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 48px;
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     gap: 24px;
     flex-wrap: wrap;
}

.dash-hero__label {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     color: var(--muted);
     font-size: 0.71rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.09em;
     margin-bottom: 12px;
}

.dash-hero h1 {
     font-size: 2.1rem;
     font-weight: 800;
     letter-spacing: -0.035em;
     color: var(--text);
     margin-bottom: 8px;
     line-height: 1.1;
}

.dash-hero p {
     font-size: 0.93rem;
     color: var(--muted);
     line-height: 1.65;
     max-width: 440px;
}

.dash-hero__actions {
     display: flex;
     align-items: center;
     gap: 8px;
     flex-wrap: wrap;
     flex-shrink: 0;
}

/* ── Status chip ────────────────────────────────────────────── */
.dash-status {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     padding: 6px 12px;
     border-radius: 7px;
     font-size: 0.81rem;
     font-weight: 500;
     background: var(--surface-2);
     border: 1px solid var(--border);
     color: var(--muted);
}

.dash-status strong {
     color: var(--text);
     font-weight: 600;
}

.dash-status__dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: #22c55e;
     flex-shrink: 0;
     animation: dp-pulse 2.2s ease-in-out infinite;
}

@keyframes dp-pulse {

     0%,
     100% {
          opacity: 1;
     }

     50% {
          opacity: 0.25;
     }
}

/* ── Container ─────────────────────────────────────────────── */
.dash-container {
     max-width: 1400px;
     margin: 0 auto;

}

/* ── Filter bar ────────────────────────────────────────────── */
.dash-filters {
     display: flex;
     align-items: center;
     gap: 10px;
     flex-wrap: wrap;
     padding: 14px 48px;
     border-bottom: 1px solid var(--border);
     margin-bottom: 24px;
}

.dash-filters__label {
     font-size: 0.71rem;
     font-weight: 700;
     color: var(--muted);
     text-transform: uppercase;
     letter-spacing: 0.07em;
     flex-shrink: 0;
}

.dash-select {
     padding: 6px 10px;
     font-size: 0.84rem;
     font-family: inherit;
     border: 1px solid var(--border);
     border-radius: 7px;
     background: var(--surface);
     color: var(--text);
     outline: none;
     cursor: pointer;
     transition: border-color 0.12s;
}

.dash-select:focus {
     border-color: var(--text);
}

html.dark-mode .dash-select {
     background: var(--surface-2);
}

.dash-filters__sep {
     width: 1px;
     height: 18px;
     background: var(--border);
     flex-shrink: 0;
}

.dash-search-wrap {
     position: relative;
     flex: 1;
     min-width: 160px;
     max-width: 240px;
}

.dash-search-wrap i {
     position: absolute;
     left: 10px;
     top: 50%;
     transform: translateY(-50%);
     color: var(--muted);
     font-size: 0.74rem;
     pointer-events: none;
     z-index: 1;
}

.dash-search-wrap input {
     width: 100%;
     padding: 6px 10px 6px 30px;
     font-size: 0.84rem;
     font-family: inherit;
     border: 1px solid var(--border);
     border-radius: 7px;
     background: var(--surface);
     color: var(--text);
     outline: none;
     box-sizing: border-box;
     transition: border-color 0.12s;
}

.dash-search-wrap input:focus {
     border-color: var(--text);
}

.dash-search-wrap input::placeholder {
     color: var(--muted);
}

html.dark-mode .dash-search-wrap input {
     background: var(--surface-2);
}

.dash-filters__actions {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-left: auto;
}

/* ── Botões ─────────────────────────────────────────────────── */
.dash-btn {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 6px 12px;
     border-radius: 7px;
     font-size: 0.83rem;
     font-weight: 500;
     font-family: inherit;
     cursor: pointer;
     border: 1px solid var(--border);
     background: var(--surface);
     color: var(--muted);
     transition: background 0.12s, color 0.12s;
     white-space: nowrap;
     text-decoration: none;
}

.dash-btn:hover,
.dash-btn--ghost:hover {
     background: var(--surface-2);
     color: var(--text);
}

.dash-btn--ghost {
     background: transparent;
}

/* ── Empty state ────────────────────────────────────────────── */
.dash-empty {
     text-align: center;
     padding: 64px 20px;
     color: var(--muted);
}

.dash-empty i {
     font-size: 2rem;
     margin-bottom: 12px;
     display: block;
     opacity: 0.2;
}

.dash-empty p {
     font-size: 0.88rem;
     opacity: 0.6;
}

.dash-empty a {
     color: var(--text);
}

/* ── KPI Grid — 4 cols > 3 > 2 > 1 ────────────────────────── */
.kpi-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 12px;
     margin-bottom: 16px;
}

/* ── Charts row: Trend (fills) | Donut (fixed 310px) ───────── */
.dash-charts-row {
     display: grid;
     grid-template-columns: 1fr 310px;
     gap: 14px;
     margin-bottom: 14px;
     align-items: stretch;
}

/* Cards dentro do charts-row esticam para mesma altura */
.dash-charts-row>.dash-section-card {
     display: flex;
     flex-direction: column;
     margin-bottom: 0;
}

.dash-charts-row>.dash-section-card>.dash-section-card__body {
     flex: 1;
     overflow-y: auto;
}

/* ── Section card — card com header delimitado ──────────────── */
.dash-section-card {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: 12px;
     overflow: hidden;
     margin-bottom: 14px;
}

/* Header: título à esq, controles à dir */
.dash-section-card__header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 13px 20px;
     border-bottom: 1px solid var(--border);
     gap: 12px;
     flex-wrap: wrap;
}

.dash-section-card__title {
     font-size: 0.86rem;
     font-weight: 700;
     color: var(--text);
     display: flex;
     align-items: center;
     gap: 8px;
     flex-shrink: 0;
}

.dash-section-card__title i {
     font-size: 0.82rem;
}

/* Body com padding */
.dash-section-card__body {
     padding: 18px 20px;
}

/* Body sem padding — para a tabela encostar nas bordas */
.dash-section-card__body--flush {
     padding: 0;
}

/* ── Sub-filtro do gráfico inferior ─────────────────────────── */
.dash-subfiltro {
     margin-top: 14px;
     padding: 14px;
     background: var(--bg);
     border: 1px solid var(--border);
     border-radius: 8px;
}

.dash-subfiltro__bar {
     display: flex;
     gap: 8px;
     align-items: center;
     flex-wrap: wrap;
     margin-bottom: 10px;
}

.dash-subfiltro__label {
     font-size: 0.7rem;
     font-weight: 700;
     color: var(--muted);
     text-transform: uppercase;
     letter-spacing: 0.06em;
     flex-shrink: 0;
}

/* ── Export buttons ─────────────────────────────────────────── */
.dash-table-exports {
     display: flex;
     gap: 7px;
     flex-wrap: wrap;
}

/* ── Donut tabs (filtra por grupo de KPI) ───────────────────── */
.donut-tabs {
     display: flex;
     flex-wrap: wrap;
     gap: 4px;
     margin-bottom: 12px;
}

.donut-tab {
     padding: 3px 9px;
     border-radius: 5px;
     font-size: 0.74rem;
     font-weight: 700;
     font-family: inherit;
     cursor: pointer;
     border: 1px solid var(--border);
     background: transparent;
     color: var(--muted);
     transition: background 0.12s, color 0.12s, border-color 0.12s;
     line-height: 1.6;
}

.donut-tab:hover {
     background: var(--surface-2);
     color: var(--text);
}

.donut-tab.active {
     background: var(--text);
     color: var(--bg);
     border-color: var(--text);
}

/* ── Hidden compat ──────────────────────────────────────────── */
.js-compat {
     display: none !important;
}

/* ── Responsive ─────────────────────────────────────────────── */

/* Telas médias: 3 KPIs, donut vai abaixo do trend */
@media (max-width: 1280px) {
     .kpi-grid {
          grid-template-columns: repeat(3, 1fr);
     }
}

/* 1100px: padding menor */
@media (max-width: 1100px) {

     .dash-hero__inner,
     .dash-container {
          padding-left: 28px;
          padding-right: 28px;
     }

     .dash-charts-row {
          grid-template-columns: 1fr;
     }
}

/* Tablets: 2 KPIs */
@media (max-width: 900px) {
     .kpi-grid {
          grid-template-columns: repeat(2, 1fr);
     }

     .dash-hero__actions {
          display: none;
     }
}

/* Mobile: 1 KPI, sem hero actions */
@media (max-width: 580px) {
     .dash-hero {
          padding: 30px 0 24px;
     }

     .dash-hero h1 {
          font-size: 1.65rem;
     }

     .dash-hero__inner,
     .dash-container {
          padding-left: 16px;
          padding-right: 16px;
     }

     .kpi-grid {
          grid-template-columns: 1fr;
     }
}

/* ── Skeleton loader ──────────────────────────────────────────────── */
.kpi-skeleton {
     border-radius: 10px;
     background: var(--surface);
     border: 1px solid var(--border);
     padding: 16px;
     min-height: 110px;
}

.kpi-skeleton__line {
     height: 11px;
     border-radius: 6px;
     background: linear-gradient(90deg, var(--border) 25%, var(--surface-2) 50%, var(--border) 75%);
     background-size: 200% 100%;
     animation: kpi-shimmer 1.4s infinite;
     margin-bottom: 10px;
}

@keyframes kpi-shimmer {
     0% {
          background-position: 200% 0;
     }

     100% {
          background-position: -200% 0;
     }
}

/* ── Toast ────────────────────────────────────────────────────────── */
.dash-toast {
     position: fixed;
     bottom: 24px;
     right: 24px;
     padding: 10px 16px;
     border-radius: 9px;
     font-size: 0.85rem;
     font-weight: 500;
     color: #fff;
     background: #1a1a1a;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
     z-index: 9999;
     opacity: 0;
     transform: translateY(8px);
     transition: opacity 0.22s, transform 0.22s;
     pointer-events: none;
     max-width: 320px;
}

.dash-toast.show {
     opacity: 1;
     transform: translateY(0);
}

.dash-toast--success {
     background: #16a34a;
}

.dash-toast--error {
     background: #ef4444;
}

.dash-toast--info {
     background: #0b69ff;
}

/* ── Delta chip ───────────────────────────────────────────────────── */
.delta-chip {
     display: inline-flex;
     align-items: center;
     gap: 3px;
     padding: 2px 7px;
     border-radius: 20px;
     font-size: 0.72rem;
     font-weight: 700;
     margin-top: 4px;
     margin-left: 4px;
}

.delta-chip--up {
     background: #dcfce7;
     color: #16a34a;
}

.delta-chip--down {
     background: #fee2e2;
     color: #ef4444;
}

.delta-chip--flat {
     background: var(--surface-2);
     color: var(--muted);
}

html.dark-mode .delta-chip--up {
     background: rgba(22, 163, 74, 0.18);
     color: #4ade80;
}

html.dark-mode .delta-chip--down {
     background: rgba(239, 68, 68, 0.18);
     color: #f87171;
}

/* ── Sparkline ────────────────────────────────────────────────────── */
.kpi-sparkline-wrap {
     position: relative;
     width: 100%;
     height: 80px;
     margin: 8px 0 4px;
     overflow: hidden;
}

.kpi-sparkline {
     position: absolute;
     inset: 0;
     width: 100% !important;
     height: 100% !important;
     display: block;
}

/* ── Delta chip year-over-year ────────────────────────────────────── */
.kpi-delta {
     min-height: 1.4em;
     margin: 2px 0 0;
}

/* ── Meta (valor ano anterior) ───────────────────────────────────── */
.kpi-card .meta {
     font-size: 0.82rem;
     font-weight: 700;
     color: #ef4444;
     margin-top: 2px;
     min-height: 1.2em;
}

html.dark-mode .kpi-card .meta {
     color: #f87171;
}

/* ── Copy hint ────────────────────────────────────────────────────── */
.valor[data-copyable] {
     cursor: pointer;
     -webkit-user-select: none;
     user-select: none;
     position: relative;
     transition: opacity 0.15s;
}

.valor[data-copyable]:hover::after {
     content: 'copiar';
     position: absolute;
     right: 0;
     top: -18px;
     font-size: 0.62rem;
     font-weight: 700;
     color: var(--muted);
     background: var(--surface-2);
     padding: 2px 5px;
     border-radius: 4px;
     text-transform: uppercase;
     letter-spacing: 0.06em;
     white-space: nowrap;
}

.valor.copied {
     opacity: 0.45;
}

/* ── Table sort ───────────────────────────────────────────────────── */
#dataTable thead th {
     cursor: pointer;
     -webkit-user-select: none;
     user-select: none;
     white-space: nowrap;
}

#dataTable thead th:hover {
     background: var(--surface-2);
}

.sort-icon {
     opacity: 0.3;
     margin-left: 3px;
     font-size: 0.72em;
}

.sort-icon.asc {
     opacity: 1;
}

.sort-icon.desc {
     opacity: 1;
}

/* ── Search highlight ─────────────────────────────────────────────── */
.kpi-card h4 mark {
     background: #fef08a;
     color: inherit;
     border-radius: 2px;
     padding: 0 1px;
}

html.dark-mode .kpi-card h4 mark {
     background: #854d0e;
     color: #fef9c3;
}

/* ── Donut legend CSS classes ─────────────────────────────────────── */
.donut-legend-container {
     padding: 12px;
     background: var(--surface-2);
     border-radius: 8px;
}

.donut-legend-actions {
     display: flex;
     gap: 8px;
     margin-bottom: 12px;
}

.donut-legend-btn {
     flex: 1;
     padding: 7px 10px;
     border: none;
     border-radius: 6px;
     font-weight: 600;
     font-size: 0.85rem;
     cursor: pointer;
     font-family: inherit;
     transition: opacity 0.15s;
}

.donut-legend-btn--all {
     background: #0b69ff;
     color: #fff;
}

.donut-legend-btn--none {
     background: #ef4444;
     color: #fff;
}

.donut-legend-btn:hover {
     opacity: 0.88;
}

.donut-legend-item {
     display: flex;
     gap: 10px;
     align-items: center;
     margin: 7px 0;
     padding: 6px 8px;
     border-radius: 6px;
     cursor: pointer;
     transition: background 0.15s;
}

.donut-legend-item--active {
     background: var(--surface);
}

.donut-legend-item--inactive {
     opacity: 0.5;
}

.donut-legend-dot {
     width: 14px;
     height: 14px;
     border-radius: 3px;
     flex-shrink: 0;
}

.donut-legend-label {
     flex: 1;
     font-size: 0.87rem;
     font-weight: 500;
     color: var(--text);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}

.donut-legend-value {
     font-size: 0.82rem;
     font-weight: 600;
     color: var(--text);
     white-space: nowrap;
}

.donut-legend-pct {
     font-size: 0.78rem;
     color: var(--muted);
     min-width: 38px;
     text-align: right;
}

.donut-legend-total {
     margin-top: 10px;
     padding-top: 10px;
     border-top: 1px solid var(--border);
     display: flex;
     justify-content: space-between;
     font-weight: 700;
     color: var(--text);
     font-size: 0.87rem;
}

/* ── Group badge ──────────────────────────────────────────────────── */
.kpi-group-badge {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 18px;
     height: 18px;
     border-radius: 50%;
     font-size: 0.62rem;
     font-weight: 800;
     color: #fff;
     flex-shrink: 0;
     margin-right: 5px;
     vertical-align: middle;
}

/* ── Admin inline no dashboard ───────────────────────────────────── */
.dash-admin-workspace {
     display: none;
     padding: 26px 0 34px;
}

.main-dashboard-content.admin-view .dash-hero,
.main-dashboard-content.admin-view .dash-container {
     display: none;
}

.main-dashboard-content.admin-view .dash-admin-workspace {
     display: block;
}

.dash-admin-shell {
     padding: 0 48px;
}

.dash-admin-header-actions {
     display: flex;
     align-items: center;
     gap: 8px;
     flex-wrap: wrap;
}

.dash-admin-tabs {
     display: inline-flex;
     border: 1px solid var(--border);
     border-radius: 9px;
     overflow: hidden;
     margin-bottom: 14px;
}

.dash-admin-tab {
     border: 0;
     border-right: 1px solid var(--border);
     background: var(--surface);
     color: var(--muted);
     font: inherit;
     font-size: 0.83rem;
     font-weight: 600;
     padding: 8px 13px;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     gap: 6px;
     transition: background 0.12s, color 0.12s;
}

.dash-admin-tab:last-child {
     border-right: 0;
}

.dash-admin-tab:hover {
     background: var(--surface-2);
     color: var(--text);
}

.dash-admin-tab.active {
     background: var(--text);
     color: var(--bg);
}

.dash-admin-panel[hidden] {
     display: none !important;
}

.dash-admin-kpis {
     margin-bottom: 0;
}

.dash-admin-toolbar {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 8px;
     margin-bottom: 12px;
}

.dash-admin-result-count {
     margin-left: auto;
     font-size: 0.8rem;
     font-weight: 600;
     color: var(--muted);
}

.dash-admin-table-wrap {
     margin-top: 0;
     max-height: 460px;
}

.dash-admin-table {
     min-width: 920px;
}

.dash-admin-empty {
     font-size: 0.85rem;
     color: var(--muted);
     margin: 8px 0 0;
}

.dash-admin-error {
     border: 1px solid rgba(239, 68, 68, 0.3);
     background: rgba(239, 68, 68, 0.08);
     color: #ef4444;
     padding: 10px 12px;
     border-radius: 8px;
     margin-bottom: 12px;
     font-size: 0.83rem;
     font-weight: 600;
}

html.dark-mode .dash-admin-error {
     border-color: rgba(248, 113, 113, 0.35);
     background: rgba(248, 113, 113, 0.12);
     color: #fda4af;
}

@media (max-width: 1100px) {
     .dash-admin-shell {
          padding: 0 28px;
     }
}

@media (max-width: 580px) {
     .dash-admin-shell {
          padding: 0 16px;
     }

     .dash-admin-tabs {
          width: 100%;
          display: flex;
     }

     .dash-admin-tab {
          flex: 1;
          justify-content: center;
          padding: 8px 7px;
          font-size: 0.77rem;
     }

     .dash-admin-toolbar .input,
     .dash-admin-toolbar .dash-select,
     .dash-admin-toolbar .dash-btn {
          width: 100%;
     }

     .dash-admin-result-count {
          margin-left: 0;
     }
}