:root {
    --primary-color: #0d6efd;
    --success-color: #198754;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
    --dark-color: #212529;
}

body {
    background-color: #f8f9fa;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.dashboard .metric-card {
    border-radius: 15px;
    border: none;
    transition: transform 0.3s;
}

.dashboard .metric-card:hover {
    transform: translateY(-5px);
}

.dashboard .metric-card .card-title {
    font-weight: 700;
}

.table {
    font-size: 0.9rem;
}

.table th {
    white-space: nowrap;
}

.badge {
    font-weight: 500;
    padding: 0.5rem 1rem;
}

.progress {
    border-radius: 10px;
}

.card-header {
    border-bottom: none;
}

.navbar-brand {
    font-weight: 700;
}

.nav-link.active {
    font-weight: 600;
    border-bottom: 3px solid var(--primary-color);
}

@media (max-width: 768px) {
    .dashboard .metric-card .card-title {
        font-size: 1.5rem;
    }
    
    .table {
        font-size: 0.8rem;
    }
}

/* Ranking colors */
.bg-gold {
    background: linear-gradient(135deg, #f7971e, #ffd200);
}

.bg-silver {
    background: linear-gradient(135deg, #bdc3c7, #ecf0f1);
}

.bg-bronze {
    background: linear-gradient(135deg, #cd7f32, #e6c3a0);
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card {
    animation: fadeInUp 0.5s ease;
}

/* Interface modular do leitor da planilha */
:root {
    --ink: #17221f;
    --muted: #71807b;
    --paper: #f4f7f5;
    --line: #dce6e1;
    --green: #181818;
    --green-dark: #0b0b0b;
    --accent: #f4c400;
    --accent-soft: #fff7cc;
}

* { box-sizing: border-box; }

body.app-shell {
    background: var(--paper);
    color: var(--ink);
    font-family: 'DM Sans', sans-serif;
    margin: 0;
}

.app-shell h1, .app-shell h2, .brand strong { font-family: 'Space Grotesk', sans-serif; }
.sidebar { background: var(--green-dark); color: #f5f5f5; display: flex; flex-direction: column; min-height: 100vh; padding: 28px 16px 18px; position: fixed; width: 255px; z-index: 30; }
.brand { align-items: center; display: flex; gap: 12px; margin: 0 10px 42px; }
.brand-mark { align-items: center; background: var(--accent); border-radius: 12px; color: #111; display: flex; font-size: 21px; height: 42px; justify-content: center; width: 42px; }
.brand strong, .brand span { display: block; }
.brand strong { color: #fff; font-size: 15px; letter-spacing: 1px; }
.brand span { color: #91b2a6; font-size: 8px; letter-spacing: 1.2px; margin-top: 3px; }
.sidebar-label { color: #78998d; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; margin: 0 12px 12px; text-transform: uppercase; }
.module-nav { display: grid; gap: 4px; }
.module-link { align-items: center; border-radius: 9px; color: #b5b5b5; display: flex; font-size: 13px; gap: 12px; padding: 11px 12px; text-decoration: none; transition: background .2s, color .2s, transform .2s; }
.module-link i { color: #858585; font-size: 16px; width: 18px; }
.module-link:hover { background: #242424; color: #fff; transform: translateX(2px); }
.module-link.active { background: var(--accent); color: #111; font-weight: 700; }
.module-link.active i { color: #111; }
.module-link.active i { color: var(--accent); }
.source-link { border-top: 1px solid #333; color: #c3c3c3; font-size: 12px; margin-top: auto; padding: 18px 12px 0; text-decoration: none; }
.source-link i { margin-right: 8px; }
.main-content { margin-left: 255px; min-height: 100vh; }
.topbar { align-items: center; background: #fff; border-bottom: 1px solid var(--line); display: flex; height: 72px; justify-content: space-between; padding: 0 42px; }
.breadcrumb { align-items: center; color: var(--muted); display: flex; font-size: 13px; gap: 10px; }
.breadcrumb strong { color: var(--ink); }
.breadcrumb i { font-size: 10px; }
.connection-status { color: #555; font-size: 12px; font-weight: 600; }
.connection-status span { background: #5cad6c; border-radius: 50%; display: inline-block; height: 7px; margin-right: 6px; width: 7px; }
.user-menu { align-items: center; display: flex; gap: 18px; }
.user-name { border-left: 1px solid var(--line); color: var(--ink); font-size: 12px; padding-left: 18px; }
.user-menu > a { color: var(--muted); font-size: 18px; }
.menu-toggle { background: none; border: 0; color: var(--green-dark); display: none; font-size: 24px; }
.sidebar-overlay { background: #0009; inset: 0; position: fixed; z-index: 20; }
.content-area { margin: 0 auto; max-width: 1500px; padding: 45px 42px 60px; }
.page-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 34px; }
.eyebrow { color: var(--green); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; margin: 0 0 8px; text-transform: uppercase; }
.eyebrow i { margin-right: 5px; }
.page-heading h1 { font-size: clamp(28px, 4vw, 42px); letter-spacing: -.8px; margin: 0; }
.subtitle { color: var(--muted); font-size: 14px; margin: 9px 0 0; }
.outline-button { border: 1px solid #bfd2c8; border-radius: 8px; color: var(--green); font-size: 12px; font-weight: 700; padding: 11px 15px; text-decoration: none; }
.outline-button:hover { background: var(--green); color: #fff; }
.stats-row { display: grid; gap: 15px; grid-template-columns: repeat(3, 1fr); margin-bottom: 20px; }
.stat-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; min-height: 108px; padding: 18px 20px; position: relative; }
.stat-card span, .stat-card strong { display: block; }
.stat-card span { color: var(--muted); font-size: 12px; }
.stat-card strong { font-family: 'Space Grotesk', sans-serif; font-size: 27px; margin-top: 9px; }
.stat-card > i { color: #afd0c1; font-size: 27px; position: absolute; right: 19px; top: 35px; }
.data-panel { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.panel-toolbar { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 19px 22px; }
.panel-toolbar h2 { font-size: 17px; margin: 0 0 4px; }
.panel-toolbar small { color: var(--muted); font-size: 12px; }
.toolbar-actions { align-items: center; display: flex; gap: 10px; }
.search-box { align-items: center; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); display: flex; gap: 8px; padding: 8px 11px; }
.search-box input { border: 0; font: inherit; font-size: 12px; outline: 0; width: 190px; }
.icon-button { background: var(--green); border: 0; border-radius: 7px; color: #fff; cursor: pointer; height: 36px; width: 38px; }
.table-wrap { max-height: 66vh; overflow: auto; }
.data-table { border-collapse: collapse; font-size: 12px; min-width: 100%; white-space: nowrap; }
.data-table tr { border-bottom: 1px solid #edf2ef; }
.data-table tr:first-child { background: #edf5f1; font-weight: 700; position: sticky; top: 0; z-index: 1; }
.data-table .table-header-row { background: #edf5f1; font-weight: 700; position: sticky; top: 0; z-index: 1; }
.data-table td { border-right: 1px solid #edf2ef; max-width: 340px; padding: 13px 16px; }
.data-table td:not(.row-number) { white-space: normal; }
.row-number { background: #fafcfb; color: #96aaa1; font-size: 11px; text-align: center; width: 42px; }
.notice { align-items: center; border-radius: 10px; display: flex; gap: 12px; padding: 16px 18px; }
.notice.error { background: #fff0ef; color: #a33d35; }
.notice.success { background: #eaf7ef; color: #23764b; margin-bottom: 14px; }
.edit-hint { background: #f1f8f4; border-bottom: 1px solid var(--line); color: var(--green); font-size: 12px; padding: 11px 22px; }
.action-cell { text-align: center; }
.row-edit, .save-button { background: none; border: 1px solid #bad3c6; border-radius: 6px; color: var(--green); cursor: pointer; font-size: 11px; font-weight: 700; padding: 6px 9px; }
.row-edit:hover, .save-button { background: var(--green); color: #fff; }
.edit-row { background: #f8fcfa; }
.edit-fields { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.edit-fields label { color: var(--muted); display: flex; flex: 1 1 180px; flex-direction: column; font-size: 10px; gap: 4px; }
.edit-fields input { border: 1px solid #cbded4; border-radius: 5px; font: inherit; min-width: 0; padding: 8px; }
.empty-state { color: var(--muted); padding: 60px; text-align: center; }
.empty-state i, .empty-state strong { display: block; }
.empty-state i { font-size: 34px; margin-bottom: 10px; }
.primary-button { background: var(--green); border: 0; border-radius: 7px; color: #fff; cursor: pointer; font-size: 12px; font-weight: 700; padding: 10px 13px; white-space: nowrap; }
.primary-button:hover, .save-button:hover { background: var(--green-dark); }
.dashboard-hero { align-items: center; background: linear-gradient(115deg, #101010, #292929); border-bottom: 4px solid var(--accent); border-radius: 15px; color: #fff; display: flex; justify-content: space-between; margin-bottom: 20px; overflow: hidden; padding: 28px 32px; position: relative; }
.dashboard-hero h2 { font-size: 28px; margin: 5px 0; }
.dashboard-hero p { color: #d0d0d0; font-size: 13px; margin: 0; }
.dashboard-hero .eyebrow { color: var(--accent); }
.dashboard-hero > i { color: #ffffff2b; font-size: 120px; position: absolute; right: 30px; transform: rotate(-12deg); }
.dashboard-stats { grid-template-columns: repeat(4, 1fr); }
.stat-card small { color: var(--muted); display: block; font-size: 11px; margin-top: 4px; }
.accent-gold { border-top: 3px solid var(--accent); }.accent-green { border-top: 3px solid #4db783; }.accent-blue { border-top: 3px solid #5d9bd4; }
.dashboard-grid { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
.dashboard-charts { margin-top: 20px; }
.chart-heading-icon { color: var(--accent); font-size: 20px; }
.bar-chart { padding: 10px 22px 25px; }.bar-chart > div { align-items: center; display: grid; gap: 10px; grid-template-columns: 75px 1fr 25px; margin: 14px 0; }.bar-chart span, .bar-chart strong { font-size: 12px; }.bar-chart b { background: #f0f0f0; border-radius: 6px; height: 9px; overflow: hidden; }.bar-chart i { background: var(--accent); border-radius: 6px; display: block; height: 100%; transition: width .7s ease; }.insight-content { padding: 15px 22px 25px; }.insight-content strong { font-family: 'Space Grotesk', sans-serif; font-size: 20px; }.insight-content p { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 12px 0 18px; }
.compact-panel { min-height: 250px; }
.text-link { color: var(--green); font-size: 12px; font-weight: 700; text-decoration: none; }
.activity-list, .ranking-list { padding: 5px 22px 20px; }
.activity-list > div, .ranking-list > div { align-items: center; border-bottom: 1px solid #edf2ef; display: flex; gap: 12px; padding: 16px 0; }
.activity-list i { background: #edf5f1; border-radius: 8px; color: var(--green); padding: 9px; }
.activity-list span, .ranking-list span { color: var(--muted); font-size: 13px; }.activity-list strong, .ranking-list strong { margin-left: auto; }
.ranking-list b { align-items: center; background: #f1f6f3; border-radius: 50%; color: var(--green); display: flex; font-size: 12px; height: 27px; justify-content: center; width: 27px; }
.modal-open { overflow: hidden; }.modal-backdrop { align-items: center; background: #102a22aa; display: flex; inset: 0; justify-content: center; padding: 20px; position: fixed; z-index: 20; }
.modal-backdrop[hidden] { display: none !important; }
.record-modal { background: #fff; border-radius: 14px; box-shadow: 0 24px 70px #102a2240; max-height: 90vh; max-width: 760px; overflow: auto; padding: 30px; position: relative; width: 100%; }
.record-modal h2 { font-size: 24px; margin: 0 0 22px; }.modal-close { background: #f1f5f3; border: 0; border-radius: 50%; color: var(--muted); cursor: pointer; height: 32px; position: absolute; right: 20px; top: 20px; width: 32px; }
.modal-fields { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }.modal-fields label { color: var(--muted); display: grid; font-size: 11px; gap: 5px; }.modal-fields input { border: 1px solid var(--line); border-radius: 6px; font: inherit; padding: 10px; }.modal-save { margin-top: 22px; }
.login-page { align-items: center; background: radial-gradient(circle at 10% 10%, #d6e9df, transparent 35%), var(--paper); display: flex; justify-content: center; min-height: 100vh; padding: 24px; }
.login-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px #173e3014; max-width: 430px; padding: 42px; width: 100%; }
.login-brand { margin: 0 0 42px; }
.login-card h1 { font-size: 29px; margin: 0; }
.login-subtitle, .login-note { color: var(--muted); font-size: 13px; }
.login-card form { display: grid; gap: 17px; margin-top: 28px; }
.login-card label { color: var(--ink); display: grid; font-size: 12px; font-weight: 700; gap: 7px; }
.login-card input { border: 1px solid var(--line); border-radius: 7px; font: inherit; padding: 12px; }
.login-card select { background: #fff; border: 1px solid var(--line); border-radius: 7px; font: inherit; padding: 12px; }
.login-card input:focus, .login-card select:focus { border-color: var(--green); box-shadow: 0 0 0 3px #1d6b5417; outline: 0; }
.login-button { background: var(--green); border: 0; border-radius: 7px; color: #fff; cursor: pointer; font-weight: 700; padding: 13px; text-align: left; }
.login-button span { float: right; font-size: 18px; line-height: 13px; }
.login-divider { align-items: center; color: var(--muted); display: flex; font-size: 11px; gap: 10px; margin-top: 24px; text-transform: uppercase; }
.login-divider::before, .login-divider::after { background: var(--line); content: ''; flex: 1; height: 1px; }
.login-error { background: #fff0ef; border-radius: 7px; color: #a33d35; font-size: 12px; margin-top: 18px; padding: 11px; }
.login-note { display: block; margin-top: 24px; }

@media (max-width: 900px) {
    .sidebar { transform: translateX(-100%); transition: transform .25s; }
    .sidebar.open { box-shadow: 12px 0 35px #0e2d2433; transform: translateX(0); }
    .main-content { margin-left: 0; }
    .menu-toggle { display: block; }
    .topbar { padding: 0 20px; }
    .content-area { padding: 32px 20px 45px; }
}

@media (max-width: 620px) {
    .page-heading { align-items: start; flex-direction: column; gap: 20px; }
    .stats-row { grid-template-columns: 1fr; }
    .panel-toolbar { align-items: start; flex-direction: column; gap: 16px; }
    .toolbar-actions, .search-box { width: 100%; }
    .search-box input { width: 100%; }
    .connection-status { display: none; }
    .user-name { display: none; }
    .dashboard-stats, .dashboard-grid { grid-template-columns: 1fr; }
    .dashboard-hero { padding: 24px 20px; }.dashboard-hero h2 { font-size: 23px; }.dashboard-hero > i { font-size: 80px; right: 8px; }
    .modal-fields { grid-template-columns: 1fr; }
    .record-modal { padding: 24px 18px; }
}