/* Kronos Dashboard — ranking bars (sem equivalente nativo no Filament) */
.kd-rank-bar-track {
    width: 100%;
    height: 0.375rem;
    border-radius: 999px;
    background: #e1e0d9;
    overflow: hidden;
}
.kd-rank-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: #2a78d6;
}
.dark .kd-rank-bar-track {
    background: #2c2c2a;
}

/* Kronos Dashboard — layout geral (não depende de utilitários Tailwind
   arbitrários, pois o bundle CSS do Filament só inclui as classes que o
   próprio painel usa internamente — ex.: `lg:grid-cols-2` e `space-y-10`
   não existem nesse bundle, então precisam de regra própria aqui). */
.kd-dashboard .kd-section {
    margin-bottom: 2.5rem;
}
.kd-dashboard .kd-section:last-child {
    margin-bottom: 0;
}
.kd-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 900px) {
    .kd-grid-2 {
        grid-template-columns: 1fr 1fr;
    }
}
.kd-mt-6 {
    margin-top: 1.5rem;
}

/* Kronos Dashboard — section headings */
.kd-dashboard .kd-section-heading {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.kd-dashboard .kd-section-icon {
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    color: #0f265c;
    margin-top: 0.125rem;
}
.kd-dashboard .kd-section-heading h2 {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    color: #0b0b0b;
}
.kd-dashboard .kd-section-heading p {
    font-size: 0.8125rem;
    color: #6b7280;
    margin-top: 0.125rem;
}
.dark .kd-dashboard .kd-section-icon { color: #6d8fd6; }
.dark .kd-dashboard .kd-section-heading h2 { color: #ffffff; }
.dark .kd-dashboard .kd-section-heading p { color: #9ca3af; }

/* Kronos Dashboard — mapa: barra de filtros */
.kd-map-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(11, 11, 11, 0.08);
}
.dark .kd-map-toolbar {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
.kd-map-field-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #898781;
    margin-bottom: 0.3125rem;
}
.kd-map-count {
    font-size: 0.8125rem;
    color: #6b7280;
}
.dark .kd-map-count { color: #9ca3af; }
.kd-map-count strong {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0b0b0b;
    font-variant-numeric: tabular-nums;
    display: block;
    line-height: 1.2;
}
.dark .kd-map-count strong { color: #ffffff; }

.kd-map-filter-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 0.5rem;
    background: #f4f4f2;
}
.dark .kd-map-filter-group { background: rgba(255, 255, 255, 0.05); }

.kd-map-filter-btn {
    padding: 0.3125rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 0.375rem;
    border: none;
    background: transparent;
    color: #52514e;
    transition: background-color 0.12s ease, color 0.12s ease;
    cursor: pointer;
}
.kd-map-filter-btn:hover { background: rgba(11, 11, 11, 0.06); }
.dark .kd-map-filter-btn { color: #c3c2b7; }
.dark .kd-map-filter-btn:hover { background: rgba(255, 255, 255, 0.08); }

.kd-map-filter-btn.is-active {
    background: #0f265c;
    color: #ffffff;
}
.kd-map-filter-btn.is-active:hover { background: #0f265c; }

.kd-map-widget {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.kd-map-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
}

/* Campos e botões do mapa — as variantes `dark:*` do Tailwind não existem
   no bundle CSS pré-compilado do Filament a menos que o próprio painel já
   as use em algum lugar, então esses controles precisam de estilo próprio
   (ver nota acima sobre o bundle purgado). */
.kd-field {
    font-size: 0.875rem;
    border: 1px solid #c3c2b7;
    border-radius: 0.375rem;
    padding: 0.375rem 0.625rem;
    background-color: #fcfcfb;
    color: #52514e;
    width: 100%;
}
.dark .kd-field {
    border-color: #383835;
    background-color: #1a1a19;
    color: #ffffff;
}

/* Remove a seta nativa duplicada do <select> — o Filament já injeta seu
   próprio background-image de seta em elementos select, então sem
   `appearance: none` aqui o navegador desenha a seta nativa por cima. */
select.kd-field {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2352514e'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    background-size: 1rem;
    padding-right: 2.25rem;
}
.dark select.kd-field {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23c3c2b7'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.kd-field-wide {
    width: 100%;
}
@media (min-width: 640px) {
    .kd-field-wide {
        width: 18rem;
    }
}
.kd-btn-ghost {
    width: auto;
    cursor: pointer;
    white-space: nowrap;
}
.kd-btn-ghost:hover {
    background: #f4f4f2;
}
.dark .kd-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.08);
}

.kd-map-frame {
    border: 1px solid #e1e0d9;
    border-radius: 0.375rem;
    background: #fcfcfb;
}
.dark .kd-map-frame {
    border-color: #2c2c2a;
    background: #1a1a19;
}

/* Kronos Dashboard — ranking de usuários */
.kd-rank-list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.kd-rank-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
}
.kd-rank-row.is-top {
    background: #f4f4f2;
}
.dark .kd-rank-row.is-top {
    background: rgba(255, 255, 255, 0.05);
}
.kd-rank-position {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    flex-shrink: 0;
}
.kd-rank-number {
    font-size: 0.875rem;
    font-weight: 500;
    color: #898781;
}
.kd-trophy-gold { color: #eda100; }
.kd-trophy-silver { color: #898781; }
.kd-trophy-bronze { color: #eb6834; }

.kd-rank-user {
    width: 11rem;
    flex-shrink: 0;
    overflow: hidden;
}
.kd-rank-user-name {
    font-weight: 500;
    font-size: 0.875rem;
    color: #0b0b0b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dark .kd-rank-user-name { color: #ffffff; }
.kd-rank-user-group {
    font-size: 0.75rem;
    color: #898781;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kd-rank-bar {
    flex: 1 1 auto;
    min-width: 0;
}

.kd-rank-count {
    width: 3rem;
    flex-shrink: 0;
    text-align: right;
    font-size: 0.875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #0b0b0b;
}
.dark .kd-rank-count { color: #ffffff; }

.kd-rank-empty {
    padding: 2rem 0;
    text-align: center;
    color: #898781;
}
.kd-rank-empty svg {
    margin: 0 auto 0.5rem;
    color: #c3c2b7;
}

.kd-rank-footnote {
    margin-top: 1rem;
    font-size: 0.75rem;
    text-align: center;
    color: #898781;
}

/* Kronos Dashboard — estado de acesso restrito */
.kd-restricted {
    text-align: center;
    padding: 3rem 0;
}
.kd-restricted h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #0b0b0b;
    margin-bottom: 1rem;
}
.dark .kd-restricted h2 { color: #ffffff; }
.kd-restricted p {
    color: #52514e;
}
.dark .kd-restricted p { color: #c3c2b7; }