/* Variáveis de Cores e Estilos Globais - Estilo Power BI Light */
:root {
    --bg-page: #f3f2f1;
    /* Fundo padrão do Power BI */
    --bg-card: #ffffff;
    /* Modern Sales Dashboard styles */
    :root{
      --bg: #f6f7fb;
      --card: #ffffff;
      --muted: #6b7280;
      --text: #0f172a;
      --primary: #ff7a18; /* Trend Grill orange */
      --accent: #0ea5ff; /* blue */
      --glass: rgba(255,255,255,0.6);
      --shadow: 0 8px 24px rgba(16,24,40,0.06);
    }

    *{box-sizing:border-box;margin:0;padding:0}
    html,body{height:100%}
    body{font-family:'Outfit',Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased}

    .dashboard-container{max-width:1200px;margin:28px auto;padding:24px}

    /* Top bar */
    header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
    .logo-area{display:flex;align-items:center;gap:12px}
    .logo-area h1{font-size:24px;font-weight:700;color:var(--text);letter-spacing:-0.3px}
    .badge{background:linear-gradient(90deg,var(--glass),#fff);padding:6px 8px;border-radius:8px;color:var(--muted);font-size:12px;border:1px solid rgba(15,23,42,0.04)}

    .controls-area{display:flex;gap:12px;align-items:center}
    .control-group{display:flex;flex-direction:column;gap:6px}
    .control-group label{font-size:12px;color:var(--muted);font-weight:600}
    .control-group input,.control-group select{padding:10px 12px;border-radius:8px;border:1px solid rgba(15,23,42,0.06);background:#fff;min-width:220px}

    .btn-primary{background:linear-gradient(90deg,var(--primary),#ff9b47);border:none;color:#fff;padding:10px 14px;border-radius:10px;font-weight:700;cursor:pointer;box-shadow:var(--shadow)}
    .btn-secondary{background:#fff;border:1px solid rgba(15,23,42,0.06);padding:10px 12px;border-radius:10px;cursor:pointer}
    .icon-btn{display:inline-flex;align-items:center;gap:8px}

    /* KPI grid */
    .kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px}
    .kpi-card{background:var(--card);border-radius:12px;padding:18px;box-shadow:var(--shadow);display:flex;align-items:center;gap:12px}
    .kpi-icon{width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff}
    .kpi-icon.money{background:linear-gradient(180deg,#0ea5ff,#0b74c5)}
    .kpi-icon.box{background:linear-gradient(180deg,#ffd89b,#ff7a18)}
    .kpi-icon.refresh{background:linear-gradient(180deg,#8be78b,#1db954)}
    .kpi-icon.truck{background:linear-gradient(180deg,#f78da7,#ff3366)}
    .kpi-details h3{font-size:13px;color:var(--muted);font-weight:700;margin-bottom:6px}
    .kpi-details p{font-size:20px;font-weight:800;color:var(--text)}

    /* Charts area */
    .charts-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-top:18px}
    .chart-card{background:var(--card);border-radius:12px;padding:16px;box-shadow:var(--shadow)}
    .chart-card h2{font-size:16px;margin-bottom:12px}
    .chart-wrapper{height:360px}

    /* Table */
    .table-wrapper{max-height:360px;overflow:auto}
    .pbi-table{width:100%;border-collapse:collapse;font-size:14px}
    .pbi-table th{position:sticky;top:0;background:#fff;padding:10px;text-align:left;border-bottom:1px solid rgba(15,23,42,0.06);font-weight:700}
    .pbi-table td{padding:10px;border-bottom:1px solid rgba(15,23,42,0.04)}
    .pbi-table td.col-valor{text-align:right}
    .pbi-table tbody tr:hover{background:linear-gradient(90deg,rgba(14,165,255,0.03),transparent)}

    /* Loader */
    .loading-overlay{display:flex;flex-direction:column;align-items:center;justify-content:center;height:320px}
    .spinner{width:36px;height:36px;border-radius:50%;border:4px solid rgba(15,23,42,0.06);border-top-color:var(--primary);animation:spin 1s linear infinite}
    @keyframes spin{to{transform:rotate(360deg)}}

    /* Responsive */
    @media (max-width:1000px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.charts-grid{grid-template-columns:1fr}}
    @media (max-width:640px){.controls-area{flex-direction:column;align-items:flex-start}.control-group input,.control-group select{min-width:100%}}
