:root {
    --accent: #6c4de0;
    --accent-dark: #4f36b3;
    --accent-light: #f1eefb;

    /* Retinta a cor primaria padrao (azul) do Tabler pra usar nossa marca -
       essas variaveis sao referenciadas via var() em todos os componentes
       (botoes, badges, links, foco de formulario, navbar-vertical ativo),
       entao um override aqui propaga pro painel inteiro sem precisar tocar
       em cada componente. */
    --tblr-primary: var(--accent);
    --tblr-primary-rgb: 108, 77, 224;
    --tblr-primary-darken: var(--accent-dark);
    --tblr-primary-fg: #ffffff;
    --tblr-primary-lt: var(--accent-light);
    --tblr-primary-lt-rgb: 241, 238, 251;
    --tblr-primary-bg-subtle: var(--accent-light);
    --tblr-primary-border-subtle: #d6cbf5;
    --tblr-primary-text-emphasis: var(--accent-dark);

    /* Tabler renomeou TODAS as variaveis do Bootstrap de --bs-* pra --tblr-*
       e nao mantem as antigas como alias - qualquer biblioteca de terceiro
       que ainda espera --bs-* (Tom Select, por ex.) fica sem cor nenhuma
       (fundo transparente, texto sumindo). Alias generico aqui uma vez,
       em vez de sobrescrever cada seletor de cada biblioteca uma por uma. */
    --bs-body-bg: var(--tblr-bg-surface, #fff);
    --bs-body-color: var(--tblr-body-color);
    --bs-border-color: var(--tblr-border-color);
    --bs-border-color-translucent: var(--tblr-border-color-translucent);
    --bs-border-radius: var(--tblr-border-radius);
    --bs-border-radius-lg: var(--tblr-border-radius-lg);
    --bs-border-radius-sm: var(--tblr-border-radius-sm);
    --bs-border-width: var(--tblr-border-width);
    --bs-box-shadow-inset: var(--tblr-box-shadow-inset);
    --bs-form-invalid-color: var(--tblr-form-invalid-color);
    --bs-form-valid-color: var(--tblr-form-valid-color);
    --bs-secondary-bg: var(--tblr-secondary-bg);
    --bs-secondary-color: var(--tblr-secondary-color);
    --bs-tertiary-bg: var(--tblr-tertiary-bg);
}

body.admin-body {
    font-family: 'Poppins', sans-serif;
}

/* ---------- Marca (sidebar do admin, navbar do master, tela de login) ---------- */

.brand-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.login-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    font-size: 1.2rem;
    color: inherit;
    text-decoration: none;
}

/* ---------- Cards ---------- */
/* Sem override de border/radius/shadow aqui de proposito - o Tabler ja
   define esses tokens (--tblr-card-border-radius, --tblr-shadow-card) e
   fica mais consistente deixar ele governar em vez de empilhar sombra. */

.card-header {
    background: transparent;
    font-weight: 600;
}

/* ---------- Stat cards (dashboard) ---------- */

.stat-card {
    border-radius: var(--tblr-border-radius-lg, 12px);
    padding: 1.25rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--tblr-shadow-card);
    height: 100%;
}

.stat-card .stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
}

.stat-card .stat-label {
    font-size: 0.8rem;
    opacity: 0.85;
    margin-top: 0.25rem;
}

.stat-card .stat-icon {
    font-size: 1.8rem;
    opacity: 0.55;
}

.stat-card.bg-a { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); }
.stat-card.bg-b { background: linear-gradient(135deg, #1f9d55, #34c77a); }
.stat-card.bg-c { background: linear-gradient(135deg, #565a6e, #7c8098); }
.stat-card.bg-d { background: linear-gradient(135deg, #c9862f, #e0a94f); }

/* ---------- FullCalendar ---------- */

.fc .fc-button-primary {
    background: var(--accent);
    border-color: var(--accent);
}

.fc .fc-button-primary:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
}

.fc .fc-button-primary:not(:disabled).fc-button-active {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
}

.fc .fc-toolbar {
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

@media (max-width: 576px) {
    .fc .fc-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .fc .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }

    .fc .fc-toolbar-title {
        font-size: 1.1rem;
        text-align: center;
    }

    .fc .fc-button {
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
    }
}

/* ---------- Cards de item (servicos, profissionais) ---------- */

.admin-item-card {
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.admin-item-card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, .1);
    transform: translateY(-2px);
}

.admin-item-icon {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: var(--accent-light);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    overflow: hidden;
}

.admin-item-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-image-upload {
    position: relative;
    cursor: pointer;
}

.service-image-upload__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    opacity: 0;
    transition: opacity 0.15s;
}

.service-image-upload:hover .service-image-upload__overlay {
    opacity: 1;
}

.service-image-remove-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 50%;
    background: #dc3545;
    color: #fff;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    line-height: 1;
}

.admin-avatar-lg {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 600;
}

/* ---------- Banner de impersonate ---------- */

.impersonate-banner {
    background: #fff3cd;
    border: 1px solid #ffe69c;
    color: #664d03;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

/* ---------- Grid de horarios (criar/remarcar agendamento) ---------- */

.time-slot-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.btn-time-slot {
    color: #333;
    border-color: #dee2e6;
}

.btn-time-slot.selected {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* ---------- Configuracoes da loja ---------- */

.store-settings-preview {
    display: block;
    max-width: 140px;
    max-height: 90px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    object-fit: cover;
}