:root {
    --purple:       #7C3AED;
    --purple-dark:  #6D28D9;
    --purple-light: #EDE9FE;
    --pink:         #EC4899;
    --pink-dark:    #DB2777;
    --pink-light:   #FCE7F3;
    --green:        #10B981;
    --amber:        #F59E0B;
    --red:          #EF4444;
    --bg:           #f5f3ff;
    --card:         #ffffff;
    --text:         #1F2937;
    --muted:        #6B7280;
    --border:       #E5E7EB;
    --shadow:       0 4px 24px rgba(124,58,237,0.09);
    --radius:       18px;
    --radius-sm:    12px;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
    background: linear-gradient(135deg, #fce7f3 0%, #f5f3ff 45%, #ede9fe 100%);
    min-height:100vh;
    color:var(--text);
}

.dashboard {
    max-width:1400px;
    margin:0 auto;
    padding:20px;
}

/* ─── HEADER ─────────────────────────────────────────────────────────────── */

.dash-header {
    background:var(--card);
    border-radius:var(--radius);
    padding:22px 32px;
    margin-bottom:18px;
    box-shadow:var(--shadow);
    border-left:6px solid var(--purple);
}

.header-inner {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

.header-brand {
    display:flex;
    align-items:center;
    gap:18px;
}

.brand-logos {
    display:flex;
    align-items:center;
    gap:14px;
}

.logo { height:48px; object-fit:contain; }

.brand-text h1 {
    font-size:1.05rem;
    font-weight:800;
    color:var(--purple);
    text-transform:uppercase;
    letter-spacing:0.5px;
    line-height:1.3;
}

.brand-text h2 {
    font-size:0.85rem;
    font-weight:600;
    color:var(--muted);
    margin-top:3px;
}

.data-date {
    background:linear-gradient(135deg,var(--purple),var(--purple-dark));
    color:white;
    padding:12px 22px;
    border-radius:var(--radius-sm);
    text-align:center;
    min-width:170px;
}

.date-label { display:block; font-size:0.72rem; opacity:.8; margin-bottom:2px; }
.date-value { display:block; font-size:0.95rem; font-weight:700; }

/* ─── FILTERS ─────────────────────────────────────────────────────────────── */

.filter-section {
    background:var(--card);
    border-radius:var(--radius);
    padding:18px 24px;
    margin-bottom:18px;
    box-shadow:var(--shadow);
}

.filter-grid {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:flex-end;
}

.filter-group { flex:1; min-width:140px; }

.filter-group label {
    display:block;
    font-size:0.72rem;
    font-weight:700;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.6px;
    margin-bottom:6px;
}

.filter-group select {
    width:100%;
    padding:10px 32px 10px 14px;
    border:2px solid var(--border);
    border-radius:var(--radius-sm);
    font-size:0.88rem;
    color:var(--text);
    background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7280' d='M6 8 0 0h12z'/%3E%3C/svg%3E") no-repeat right 12px center;
    appearance:none;
    cursor:pointer;
    transition:border-color .2s;
}

.filter-group select:focus { outline:none; border-color:var(--purple); }

.filter-action { display:flex; gap:8px; flex:0; min-width:auto; }

.search-group { flex:1.5; min-width:200px; }

.search-wrap { position:relative; }

.search-wrap input {
    width:100%;
    padding:10px 36px 10px 14px;
    border:2px solid var(--border);
    border-radius:var(--radius-sm);
    font-size:.88rem;
    color:var(--text);
    background:#fff;
    transition:border-color .2s;
}

.search-wrap input:focus { outline:none; border-color:var(--purple); }

.search-icon {
    position:absolute;
    right:12px; top:50%;
    transform:translateY(-50%);
    font-size:.9rem;
    pointer-events:none;
    opacity:.5;
}

.btn-filter, .btn-reset {
    padding:10px 22px;
    border:none;
    border-radius:var(--radius-sm);
    font-size:0.88rem;
    font-weight:700;
    cursor:pointer;
    transition:all .2s;
    white-space:nowrap;
}

.btn-filter {
    background:linear-gradient(135deg,var(--purple),var(--purple-dark));
    color:white;
    box-shadow:0 4px 12px rgba(124,58,237,.3);
}
.btn-filter:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(124,58,237,.4); }

.btn-reset { background:var(--border); color:var(--muted); }
.btn-reset:hover { background:#D1D5DB; }

/* ─── KPI SECTION ─────────────────────────────────────────────────────────── */

.kpi-section {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-bottom:18px;
}

.kpi-group { display:flex; flex-direction:column; gap:12px; }

.kpi-card {
    border-radius:var(--radius);
    padding:22px 26px;
    color:white;
    display:flex;
    align-items:center;
    gap:18px;
    box-shadow:0 8px 32px rgba(0,0,0,.15);
}

.kpi-card.purple { background:linear-gradient(135deg,var(--purple),var(--purple-dark)); }
.kpi-card.pink   { background:linear-gradient(135deg,var(--pink),var(--pink-dark)); }

.kpi-icon { font-size:2.4rem; opacity:.9; flex-shrink:0; }

.kpi-label { font-size:.82rem; opacity:.85; font-weight:500; margin-bottom:4px; }
.kpi-value { font-size:2.6rem; font-weight:800; letter-spacing:-1.5px; line-height:1; }

.kpi-row-small {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.kpi-mini {
    background:var(--card);
    border-radius:var(--radius-sm);
    padding:14px 18px;
    box-shadow:var(--shadow);
}

.kpi-group:first-child .kpi-mini { border-top:3px solid var(--purple-light); }
.kpi-group:last-child  .kpi-mini { border-top:3px solid var(--pink-light); }

.mini-label { font-size:.75rem; color:var(--muted); font-weight:600; margin-bottom:6px; }
.mini-value { font-size:1.55rem; font-weight:800; color:var(--text); }

.kpi-comparison {
    background:var(--card);
    border-radius:var(--radius-sm);
    padding:14px 20px;
    box-shadow:var(--shadow);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
}

.comp-label { font-size:.82rem; color:var(--muted); font-weight:600; }
.comp-value { font-size:1.45rem; font-weight:800; letter-spacing:-.5px; }
.comp-value.positive { color:var(--green); }
.comp-value.negative { color:var(--red); }

.comp-years { display:flex; gap:14px; }
.comp-year-item { text-align:center; }
.comp-year-label { display:block; font-size:.65rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:2px; }
.comp-year-val { display:block; font-size:1.1rem; font-weight:800; color:var(--text); }

/* ─── CHARTS ──────────────────────────────────────────────────────────────── */

.charts-section {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-bottom:18px;
}

.chart-card {
    background:var(--card);
    border-radius:var(--radius);
    padding:22px 24px;
    box-shadow:var(--shadow);
}

.chart-header { margin-bottom:14px; }

.chart-header h3 {
    font-size:.92rem;
    font-weight:700;
    color:var(--text);
}

.chart-body { position:relative; height:320px; }

/* ─── TABLE ───────────────────────────────────────────────────────────────── */

.table-section { margin-bottom:18px; }

.table-card {
    background:var(--card);
    border-radius:var(--radius);
    padding:22px 24px;
    box-shadow:var(--shadow);
    overflow:hidden;
}

.table-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px;
}

.table-header h3 { font-size:.95rem; font-weight:700; }

.table-count {
    background:var(--purple-light);
    color:var(--purple);
    padding:4px 14px;
    border-radius:20px;
    font-size:.78rem;
    font-weight:700;
}

.table-wrap { overflow-x:auto; }

table { width:100%; border-collapse:collapse; font-size:.84rem; }

thead tr {
    background:linear-gradient(135deg,var(--purple),var(--purple-dark));
    color:white;
}

th {
    padding:12px 14px;
    text-align:left;
    font-weight:700;
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:.5px;
    white-space:nowrap;
}

th.sortable {
    cursor:pointer;
    user-select:none;
}

th.sortable:hover { background:rgba(255,255,255,.15); }

th.sort-active { background:rgba(255,255,255,.2); }

.sort-icon { font-style:normal; opacity:.9; }

td { padding:11px 14px; border-bottom:1px solid var(--border); }

tbody tr:hover { background:#F9FAFB; }
tbody tr:nth-child(even) { background:#FAFAFF; }
tbody tr.tr-clickable { cursor:pointer; }
tbody tr.tr-clickable:hover { background:#EDE9FE !important; }

.pct-cell { font-weight:700; }
.pct-high { color:var(--green); }
.pct-mid  { color:var(--amber); }
.pct-low  { color:var(--red); }

.badge-pct {
    display:inline-block;
    padding:2px 10px;
    border-radius:20px;
    font-size:.78rem;
    font-weight:700;
}
.badge-high { background:#D1FAE5; color:#065F46; }
.badge-mid  { background:#FEF3C7; color:#92400E; }
.badge-low  { background:#FEE2E2; color:#991B1B; }

.loading {
    text-align:center;
    color:var(--muted);
    padding:40px;
    font-style:italic;
}

/* ─── PAGINATION ──────────────────────────────────────────────────────────── */

.pagination {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:6px;
    padding:16px 0 4px;
    flex-wrap:wrap;
}

.pg-info {
    font-size:.78rem;
    color:var(--muted);
    margin-right:6px;
}

.pg-btn {
    min-width:34px;
    height:34px;
    padding:0 10px;
    border:2px solid var(--border);
    border-radius:8px;
    background:#fff;
    color:var(--text);
    font-size:.82rem;
    font-weight:600;
    cursor:pointer;
    transition:all .15s;
}

.pg-btn:hover:not(:disabled) {
    border-color:var(--purple);
    color:var(--purple);
}

.pg-btn.active {
    background:var(--purple);
    border-color:var(--purple);
    color:#fff;
}

.pg-btn:disabled {
    opacity:.35;
    cursor:default;
}

/* ─── FOOTER ──────────────────────────────────────────────────────────────── */

.dash-footer {
    text-align:center;
    padding:20px 10px;
    color:var(--muted);
    font-size:.78rem;
}

.dash-footer strong { color:var(--purple); }
.dash-footer .hashtags { margin-top:6px; opacity:.55; letter-spacing:.3px; }

/* ─── RESPONSIVE ──────────────────────────────────────────────────────────── */

@media (max-width:960px) {
    .kpi-section, .charts-section { grid-template-columns:1fr; }
}

@media (max-width:700px) {
    .dashboard { padding:12px; }
    .header-inner { flex-direction:column; text-align:center; }
    .brand-text h1 { font-size:.9rem; }
    .filter-grid { flex-direction:column; }
    .filter-group { min-width:100%; }
    .kpi-value { font-size:2rem; }
    .data-date { min-width:unset; }
}