/* =====================================================================
   PrefeituraZAP - Modernização dos cards do Dashboard
   ---------------------------------------------------------------------
   Overlay de estilo sobre o tema Metronic (Bootstrap 3).
   NÃO altera o HTML nem o PHP: apenas redefine a aparência das classes
   já existentes.

   IMPORTANTE: este arquivo precisa ser carregado DEPOIS do CSS do
   Metronic, senão os estilos base sobrescrevem este overlay.

   Para remover/reverter: basta retirar o <link> deste arquivo.
   ===================================================================== */

/* Tokens reutilizáveis ------------------------------------------------ */
:root {
    --pz-radius: 16px;
    --pz-ease: cubic-bezier(.4, 0, .2, 1);
    --pz-shadow-sm: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    --pz-shadow-lg: 0 14px 28px rgba(16, 24, 40, .12), 0 5px 10px rgba(16, 24, 40, .06);
    --pz-ink: #101828;
    --pz-muted: #667085;
}

/* =====================================================================
   1) KPIs DO TOPO  ->  .widget-thumb
   ===================================================================== */
.widget-thumb {
    border-radius: var(--pz-radius) !important;
    border: 1px solid #eef0f4 !important;
    background: #fff !important;
    box-shadow: var(--pz-shadow-sm) !important;
    padding: 22px 22px 20px !important;
    transition: transform .25s var(--pz-ease), box-shadow .25s var(--pz-ease);
}

.widget-thumb:hover {
    transform: translateY(-4px);
    box-shadow: var(--pz-shadow-lg) !important;
}

.widget-thumb .widget-thumb-heading {
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .04em;
    color: var(--pz-muted) !important;
    margin: 0 0 16px !important;
}

.widget-thumb .widget-thumb-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Ícone vira um "quadradinho" arredondado com gradiente */
.widget-thumb .widget-thumb-icon {
    width: 56px !important;
    height: 56px !important;
    line-height: 56px !important;
    border-radius: 14px !important;
    font-size: 24px !important;
    color: #fff !important;
    text-align: center;
    flex: 0 0 auto;
    margin: 0 !important;
    box-shadow: 0 6px 14px rgba(16, 24, 40, .18);
}

/* Variantes de cor do ícone (classes bg-* do Metronic) */
.widget-thumb .widget-thumb-icon.bg-green  { background-image: linear-gradient(135deg, #34d399, #10b981) !important; }
.widget-thumb .widget-thumb-icon.bg-red    { background-image: linear-gradient(135deg, #fb7185, #e11d48) !important; }
.widget-thumb .widget-thumb-icon.bg-purple { background-image: linear-gradient(135deg, #a78bfa, #7c3aed) !important; }
.widget-thumb .widget-thumb-icon.bg-blue   { background-image: linear-gradient(135deg, #60a5fa, #2563eb) !important; }
.widget-thumb .widget-thumb-icon.bg-yellow { background-image: linear-gradient(135deg, #fbbf24, #f59e0b) !important; }
.widget-thumb .widget-thumb-icon.bg-dark   { background-image: linear-gradient(135deg, #475569, #1e293b) !important; }

.widget-thumb .widget-thumb-body {
    display: flex;
    flex-direction: column;
}

.widget-thumb .widget-thumb-subtitle {
    font-size: 11px !important;
    font-weight: 600;
    letter-spacing: .05em;
    color: var(--pz-muted) !important;
}

.widget-thumb .widget-thumb-body-stat {
    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 1.1;
    color: var(--pz-ink) !important;
}

/* =====================================================================
   2) CARDS DE AÇÃO  ->  .dashboard-stat.dashboard-stat-v2
   ===================================================================== */
.dashboard-stat.dashboard-stat-v2 {
    border-radius: var(--pz-radius) !important;
    overflow: hidden;
    position: relative;
    box-shadow: var(--pz-shadow-sm) !important;
    transition: transform .25s var(--pz-ease), box-shadow .25s var(--pz-ease);
}

.dashboard-stat.dashboard-stat-v2:hover {
    transform: translateY(-4px);
    box-shadow: var(--pz-shadow-lg) !important;
}

/* Tira o sublinhado/azul do link que envolve o card */
a:hover .dashboard-stat.dashboard-stat-v2,
a:focus .dashboard-stat.dashboard-stat-v2 {
    text-decoration: none;
}

/* Gradientes por cor (modificadores do Metronic) */
.dashboard-stat-v2.purple { background-image: linear-gradient(135deg, #8b5cf6, #6d28d9) !important; background-color: #7c3aed !important; }
.dashboard-stat-v2.red    { background-image: linear-gradient(135deg, #fb7185, #e11d48) !important; background-color: #e11d48 !important; }
.dashboard-stat-v2.green  { background-image: linear-gradient(135deg, #34d399, #059669) !important; background-color: #10b981 !important; }
.dashboard-stat-v2.blue   { background-image: linear-gradient(135deg, #60a5fa, #2563eb) !important; background-color: #2563eb !important; }
.dashboard-stat-v2.yellow { background-image: linear-gradient(135deg, #fbbf24, #f59e0b) !important; background-color: #f59e0b !important; }

/* Texto e números em branco, legíveis sobre o gradiente */
.dashboard-stat-v2 .details .number,
.dashboard-stat-v2 .details .number span {
    color: #fff !important;
    font-weight: 700 !important;
}

.dashboard-stat-v2 .details .desc {
    color: rgba(255, 255, 255, .92) !important;
    font-weight: 600;
}

.dashboard-stat-v2 .details .desc small {
    color: rgba(255, 255, 255, .75) !important;
}

/* Ícone "marca d'água" no canto, com leve flutuação no hover */
.dashboard-stat-v2 .visual i {
    opacity: .22 !important;
    transition: transform .35s var(--pz-ease), opacity .25s var(--pz-ease);
}

.dashboard-stat.dashboard-stat-v2:hover .visual i {
    opacity: .3 !important;
    transform: scale(1.06);
}

/* Pequeno brilho diagonal no topo do card (detalhe sutil) */
.dashboard-stat-v2::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0));
    pointer-events: none;
}