/*
 * MOZinONE Analytics Pro v4.2
 * CSS completamente isolado do tema Wilcity.
 * Todas as regras prefixadas com .moz-wrap para evitar conflitos
 * com as fontes Roboto/Poppins e resets globais do Wilcity.
 *
 * Paleta alinhada com o design system global do MOZinONE App
 * (Navy / Vermelho / Off-white / Dourado, fonte Inter).
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ---- Reset isolado — só afecta dentro do .moz-wrap ---- */
.moz-wrap,
.moz-wrap * {
    box-sizing: border-box !important;
    font-family: 'Inter', sans-serif !important;
}

.moz-wrap h1,
.moz-wrap h2,
.moz-wrap h3,
.moz-wrap h4 {
    font-family: 'Inter', sans-serif !important;
    color: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
}

.moz-wrap p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: inherit !important;
    color: inherit !important;
}

.moz-wrap a {
    text-decoration: none !important;
    transition: none !important;
    color: inherit !important;
}

.moz-wrap table {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin: 0 !important;
}

.moz-wrap table th {
    font-weight: 700 !important;
    text-align: left !important;
}

.moz-wrap select,
.moz-wrap input,
.moz-wrap button {
    font-family: 'Inter', sans-serif !important;
    outline: none !important;
}

.moz-wrap img {
    max-width: none !important;
    height: auto;
    border: 0;
}

/* ---- Variáveis MOZinONE App (Direção A — Navy / Vermelho / Off-white / Dourado) ---- */
.moz-wrap {
    --bg:         #ffffff;
    --bg2:        #ffffff;
    --surface:    #F4F3FB;
    --border:     #E5E2F0;
    --primary:    #1B1640;
    --accent:     #E4385C;
    --gold:       #FAC775;
    --green:      #E4385C;
    --green2:     #FAC775;
    --positive:   #1FAA59;
    --green-dark: #1FAA59;
    --red:        #E4385C;
    --yellow:     #FAC775;
    --blue:       #5B6FE3;
    --muted:      #6E6A8C;
    --text:       #1B1640;
    --text2:      #4B4570;
    --radius:     8px;
    --radius-lg:  10px;
    --shadow:     0 1px 4px rgba(27,22,64,0.06);
    --glow:       0 2px 10px rgba(228,56,92,0.10);

    background: var(--bg) !important;
    color: var(--text) !important;
    padding: 30px 15px 60px !important;
    max-width: 1170px !important;
    margin: 0 auto !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* ---- Header ---- */
.moz-wrap .analytics-header {
    margin-bottom: 28px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid var(--border) !important;
}
.moz-wrap .analytics-header h1 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
    margin-bottom: 8px !important;
    padding-left: 14px !important;
    border-left: 4px solid var(--accent) !important;
    line-height: 1.3 !important;
}
.moz-wrap .analytics-header p {
    color: var(--text2) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    padding-left: 14px !important;
}

/* ---- KPI Grid ---- */
.moz-wrap .kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 32px !important;
}
.moz-wrap .kpi-card {
    background: var(--bg2) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 18px 20px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    cursor: default !important;
}
.moz-wrap .kpi-card:hover {
    border-color: var(--accent) !important;
    box-shadow: var(--glow) !important;
}
.moz-wrap .kpi-label {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: var(--muted) !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
    display: block !important;
}
.moz-wrap .kpi-value {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: var(--accent) !important;
    font-family: 'Inter', sans-serif !important;
    margin-bottom: 4px !important;
    display: block !important;
    line-height: 1.1 !important;
}
.moz-wrap .kpi-change {
    font-size: 12px !important;
    font-weight: 600 !important;
    display: block !important;
}
.moz-wrap .kpi-change.up   { color: var(--positive) !important; }
.moz-wrap .kpi-change.down { color: var(--accent) !important; }

/* ---- Filters ---- */
.moz-wrap .moz-filters {
    display: flex !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    margin-bottom: 24px !important;
    padding: 14px 18px !important;
    background: var(--bg2) !important;
    border: 1px solid var(--border) !important;
    border-left: 3px solid var(--accent) !important;
    border-radius: var(--radius) !important;
}
.moz-wrap .moz-filter-group label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--muted) !important;
    margin-bottom: 5px !important;
}
.moz-wrap .moz-filter-group select {
    background: #fff !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    color: var(--text) !important;
    font-size: 13px !important;
    cursor: pointer !important;
    min-width: 180px !important;
    -webkit-appearance: auto !important;
    appearance: auto !important;
}
.moz-wrap .moz-filter-group select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(228,56,92,0.12) !important;
}
.moz-wrap .moz-clear-btn {
    background: none !important;
    border: 1px solid var(--accent) !important;
    color: var(--accent) !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}
.moz-wrap .moz-clear-btn:hover {
    background: var(--accent) !important;
    color: #fff !important;
}

/* ---- Analytics Grid ---- */
.moz-wrap .analytics-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
}
@media (max-width: 768px) {
    .moz-wrap .analytics-grid { grid-template-columns: 1fr !important; }
}

/* ---- Analytics Card ---- */
.moz-wrap .analytics-card {
    background: var(--bg2) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    padding: 24px !important;
    box-shadow: var(--shadow) !important;
}
.moz-wrap .analytics-card-full {
    width: 100% !important;
    margin-bottom: 20px !important;
}
.moz-wrap .analytics-card-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
    color: var(--text) !important;
    display: block !important;
}
.moz-wrap .analytics-card-sub {
    font-size: 11px !important;
    color: var(--muted) !important;
    margin-bottom: 20px !important;
    display: block !important;
}

/* ---- Chart wrappers ---- */
.moz-wrap .chart-wrapper    { position: relative !important; height: 280px !important; }
.moz-wrap .chart-wrapper-lg { position: relative !important; height: 320px !important; }

/* ---- Leaderboard ---- */
.moz-wrap .lb-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--border) !important;
    cursor: pointer !important;
    transition: color 0.15s !important;
}
.moz-wrap .lb-item:hover { color: var(--accent) !important; }
.moz-wrap .lb-item:last-child { border-bottom: none !important; }

.moz-wrap .lb-rank {
    width: 28px !important; height: 28px !important;
    border-radius: 8px !important;
    background: var(--surface) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 12px !important; font-weight: 700 !important;
    color: var(--muted) !important;
    flex-shrink: 0 !important;
    font-family: 'Inter', sans-serif !important;
}
.moz-wrap .lb-rank.gold   { background: rgba(250,199,117,0.30) !important; color: #B9842F !important; }
.moz-wrap .lb-rank.silver { background: rgba(150,150,150,0.2) !important; color: #777 !important; }
.moz-wrap .lb-rank.bronze { background: rgba(205,127,50,0.2) !important; color: #cd7f32 !important; }

.moz-wrap .lb-logo     { font-size: 20px !important; flex-shrink: 0 !important; }
.moz-wrap .lb-logo-img { width: 28px !important; height: 28px !important; border-radius: 6px !important; object-fit: cover !important; flex-shrink: 0 !important; }
.moz-wrap .lb-info     { flex: 1 !important; min-width: 0 !important; }
.moz-wrap .lb-name     { font-size: 13px !important; font-weight: 600 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; color: var(--text) !important; display: block !important; }
.moz-wrap .lb-cat      { font-size: 11px !important; color: var(--muted) !important; display: block !important; }
.moz-wrap .lb-stats    { text-align: right !important; flex-shrink: 0 !important; }
.moz-wrap .lb-views    { font-size: 13px !important; font-weight: 700 !important; font-family: 'Inter', sans-serif !important; color: var(--accent) !important; display: block !important; }
.moz-wrap .lb-trend    { font-size: 11px !important; font-weight: 600 !important; display: block !important; }

/* ---- Growth list ---- */
.moz-wrap .gl-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 8px !important;
    border-bottom: 1px solid var(--border) !important;
    cursor: pointer !important;
    border-radius: 8px !important;
    transition: background 0.15s !important;
}
.moz-wrap .gl-item:hover { background: var(--surface) !important; }
.moz-wrap .gl-item:last-child { border-bottom: none !important; }
.moz-wrap .gl-growth { text-align: right !important; min-width: 70px !important; }
.moz-wrap .gl-growth-val { font-size: 15px !important; font-weight: 700 !important; font-family: 'Inter', sans-serif !important; display: block !important; }
.moz-wrap .gl-growth-sub { font-size: 10px !important; color: var(--muted) !important; display: block !important; }
.moz-wrap .gl-spark { width: 80px !important; height: 30px !important; flex-shrink: 0 !important; }

/* ---- Companies Table ---- */
.moz-wrap .moz-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 13px !important;
}
.moz-wrap .moz-table thead tr {
    background: var(--bg2) !important;
    border-bottom: 2px solid var(--accent) !important;
}
.moz-wrap .moz-table th {
    color: var(--primary) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 12px !important;
    text-align: left !important;
    white-space: nowrap !important;
    border: none !important;
    background: transparent !important;
}
.moz-wrap .moz-table td {
    padding: 11px 12px !important;
    border-bottom: 1px solid var(--border) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    vertical-align: middle !important;
    color: var(--text) !important;
    background: transparent !important;
}
.moz-wrap .moz-table tbody tr { cursor: pointer !important; }
.moz-wrap .moz-table tbody tr:hover td { background: var(--surface) !important; }
.moz-wrap .moz-table tbody tr:last-child td { border-bottom: none !important; }

/* ---- Misc ---- */
.moz-wrap .moz-count { font-size: 13px !important; color: var(--muted) !important; font-weight: 400 !important; margin-left: 8px !important; }
.moz-wrap .moz-empty { text-align: center !important; padding: 48px 20px !important; color: var(--muted) !important; font-size: 13px !important; }