/* Badge base */
.status-aprovacao-badge {
    transition: all 0.25s cubic-bezier(.4, 0, .2, 1);
    cursor: pointer;
    border-radius: 1000px;
    padding: 7px 12px;
    min-width: 0;
    background: var(--default-bg);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    flex-shrink: 0;
    /* Garante que todos os badges tenham largura fixa e não encolham demais */
}

/* Ícone e número sempre visíveis */
.status-aprovacao-badge i,
.status-aprovacao-badge .status-aprovacao-count {
    display: inline-block;
    vertical-align: middle;
}

/* Texto do status */
.status-aprovacao-badge .status-aprovacao-label {
    display: inline-block;
    margin-left: 6px;
    opacity: 1;
    transition: opacity 0.2s;
}

.status-aprovacao-badge.all-approved {
    background: var(--status-all-approved-bg) !important;
    color: #4b5563 !important;
    font-weight: 600 !important;
    font-size: 13px;
}

/* Estado aberto: mostra tudo */
.status-aprovacao-badge.status-open {
    background: var(--badge-open-bg);
}

.status-aprovacao-badge.status-open .status-aprovacao-label {
    opacity: 1;
    max-width: 300px;
}

/* Estado fechado: só ícone e número */
.status-aprovacao-badge:not(.status-open) .status-aprovacao-label {
    opacity: 0;
    max-width: 0;
    width: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Estado fechado: reduz largura */
.status-aprovacao-badge:not(.status-open) {
    padding-right: 10px;
    padding-left: 10px;
    min-width: 0;
    width: 48px;
    background: var(--badge-collapsed-bg);
}

/* Hover: expande o item, encolhe os outros */
.status-aprovacao-badge:not(.status-open):hover,
.status-aprovacao-badge:not(.status-open):focus {
    background: var(--badge-open-bg);
    width: auto;
    min-width: 120px;
    z-index: 2;
    font-weight: 500;
}

.status-aprovacao-badge:not(.status-open):hover .status-aprovacao-label,
.status-aprovacao-badge:not(.status-open):focus .status-aprovacao-label {
    opacity: 1;
    max-width: 300px;
    width: auto;
    pointer-events: auto;
}

/* Primeiro badge vem antes visualmente e encolhe quando outros são focados/hover */
.status-aprovacao-badge.status-aprovacao-badge--first-open {
    order: -1;
}

.status-aprovacao-container .status-aprovacao-badge:hover~.status-aprovacao-badge--first-open,
.status-aprovacao-container .status-aprovacao-badge:focus~.status-aprovacao-badge--first-open {
    padding-right: 10px;
    padding-left: 10px;
    min-width: 0;
    width: 48px;
    background: var(--badge-collapsed-bg);
    font-weight: 400;
}

.status-aprovacao-container .status-aprovacao-badge:hover~.status-aprovacao-badge--first-open .status-aprovacao-label,
.status-aprovacao-container .status-aprovacao-badge:focus~.status-aprovacao-badge--first-open .status-aprovacao-label {
    opacity: 0;
    max-width: 0;
    width: 0;
    overflow: hidden;
    pointer-events: none;
}


/* Cores dos status */
.status-aprovacao-badge.status-aprovado {
    background: var(--status-aprovado-bg);
    color: var(--status-aprovado-fg);
}

.status-aprovacao-badge.status-aprovado.status-open {
    background: var(--status-aprovado-bg);
    color: var(--status-aprovado-fg);
}

.status-aprovacao-badge.status-aprovado:not(.status-open) {
    background: var(--status-aprovado-bg);
    color: var(--status-aprovado-fg);
}

.status-aprovacao-badge.status-aprovado:not(.status-open):hover,
.status-aprovacao-badge.status-aprovado:not(.status-open):focus {
    background: var(--status-aprovado-bg);
    color: var(--status-aprovado-fg);
}

/* ícone (font-awesome) por status */
.status-aprovacao-badge.status-aprovado i.status-aprovacao-icon {
    color: var(--status-aprovado-icon);
}

.status-aprovacao-badge.status-aguardando-material i.status-aprovacao-icon {
    color: var(--status-aguardando-material-icon);
}

.status-aprovacao-badge.status-aguardando-aprovacao i.status-aprovacao-icon {
    color: var(--status-aguardando-aprovacao-icon);
}

.status-aprovacao-badge.status-em-alteracao i.status-aprovacao-icon {
    color: var(--status-em-alteracao-icon);
}

.status-aprovacao-badge.status-alterado-aguardando-aprovacao i.status-aprovacao-icon {
    color: var(--status-alterado-aguardando-aprovacao-icon);
}

/* aguardando material */
.status-aprovacao-badge.status-aguardando-material {
    background: var(--status-aguardando-material-bg);
    color: var(--status-aguardando-material-fg);
}

.status-aprovacao-badge.status-aguardando-material.status-open {
    background: var(--status-aguardando-material-open-bg);
    color: var(--status-aguardando-material-fg);
}

.status-aprovacao-badge.status-aguardando-material:not(.status-open) {
    background: var(--status-aguardando-material-bg);
    color: var(--status-aguardando-material-fg);
}

.status-aprovacao-badge.status-aguardando-material:not(.status-open):hover,
.status-aprovacao-badge.status-aguardando-material:not(.status-open):focus {
    background: var(--status-aguardando-material-bg);
    color: var(--status-aguardando-material-fg);
}

/* failed */
.status-aprovacao-badge.status-failed {
    background: var(--status-failed-bg);
    color: var(--status-failed-fg);
    border: 1px solid var(--status-failed-bg);
}

.status-aprovacao-badge.status-failed.status-open {
    background: var(--status-failed-bg);
    color: var(--status-failed-fg);
}

.status-aprovacao-badge.status-failed:not(.status-open) {
    background: var(--status-failed-bg);
    color: var(--status-failed-fg);
}

.status-aprovacao-badge.status-failed:not(.status-open):hover,
.status-aprovacao-badge.status-failed:not(.status-open):focus {
    background: var(--status-failed-bg);
    color: var(--status-failed-fg);
}

/* aguardando aprovação */
.status-aprovacao-badge.status-aguardando-aprovacao {
    background: var(--status-aguardando-aprovacao-bg);
    color: var(--status-aguardando-aprovacao-fg);
}

.status-aprovacao-badge.status-aguardando-aprovacao.status-open {
    background: var(--status-aguardando-aprovacao-bg);
    color: var(--status-aguardando-aprovacao-fg);
}

.status-aprovacao-badge.status-aguardando-aprovacao:not(.status-open) {
    background: var(--status-aguardando-aprovacao-bg);
    color: var(--status-aguardando-aprovacao-fg);
}

.status-aprovacao-badge.status-aguardando-aprovacao:not(.status-open):hover,
.status-aprovacao-badge.status-aguardando-aprovacao:not(.status-open):focus {
    background: var(--status-aguardando-aprovacao-bg);
    color: var(--status-aguardando-aprovacao-fg);
}

/* em alteração */
.status-aprovacao-badge.status-em-alteracao {
    background: var(--status-em-alteracao-bg);
    color: var(--status-em-alteracao-fg);
}

.status-aprovacao-badge.status-em-alteracao.status-open {
    background: var(--status-em-alteracao-bg);
    color: var(--status-em-alteracao-fg);
}

.status-aprovacao-badge.status-em-alteracao:not(.status-open) {
    background: var(--status-em-alteracao-bg);
    color: var(--status-em-alteracao-fg);
}

.status-aprovacao-badge.status-em-alteracao:not(.status-open):hover,
.status-aprovacao-badge.status-em-alteracao:not(.status-open):focus {
    background: var(--status-em-alteracao-bg);
    color: var(--status-em-alteracao-fg);
}

/* alterado aguardando aprovação */
.status-aprovacao-badge.status-alterado-aguardando-aprovacao {
    background: var(--status-alterado-aguardando-aprovacao-bg);
    color: var(--status-alterado-aguardando-aprovacao-fg);
}

.status-aprovacao-badge.status-alterado-aguardando-aprovacao.status-open {
    background: var(--status-alterado-aguardando-aprovacao-bg);
    color: var(--status-alterado-aguardando-aprovacao-fg);
}

.status-aprovacao-badge.status-alterado-aguardando-aprovacao:not(.status-open) {
    background: var(--status-alterado-aguardando-aprovacao-bg);
    color: var(--status-alterado-aguardando-aprovacao-fg);
}

.status-aprovacao-badge.status-alterado-aguardando-aprovacao:not(.status-open):hover,
.status-aprovacao-badge.status-alterado-aguardando-aprovacao:not(.status-open):focus {
    background: var(--status-alterado-aguardando-aprovacao-bg);
    color: var(--status-alterado-aguardando-aprovacao-fg);
}

/* === Início: estilos do switch Ativo / Arquivado === */
.switch {
    --button-width: 3.5em;
    --button-height: 1.9em;
    --toggle-diameter: 1.4em;
    --button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
    --toggle-shadow-offset: 6px;
    --toggle-wider: 3em;
    --color-grey: #cbcadc;
    --color-green: #4338CA;
    display: inline-block;
    vertical-align: middle;
    margin: 0 4px;
    /* menor espaçamento para aproximar os textos */
}

.switch .slider {
    display: inline-block;
    width: var(--button-width);
    height: var(--button-height);
    background-color: var(--color-grey);
    border-radius: calc(var(--button-height) / 2);
    position: relative;
    transition: 0.25s all ease-in-out;
    margin: 0 5px;
}

.switch .slider::after {
    content: "";
    display: inline-block;
    width: var(--toggle-diameter);
    height: var(--toggle-diameter);
    background-color: #fff;
    border-radius: calc(var(--toggle-diameter) / 2);
    position: absolute;
    top: var(--button-toggle-offset);
    transform: translateX(var(--button-toggle-offset));
    box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 2) rgba(0, 0, 0, 0.08);
    transition: 0.25s all ease-in-out;
}

/* input escondido, usamos o foco/checked do input para estilizar */
.switch input[type="checkbox"] {
    display: none;
}

.switch input[type="checkbox"]:checked+.slider {
    background-color: var(--color-green);
}

.switch input[type="checkbox"]:checked+.slider::after {
    transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
    box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 2) rgba(0, 0, 0, 0.08);
}

.switch input[type="checkbox"]:active+.slider::after {
    width: var(--toggle-wider);
}

.switch input[type="checkbox"]:checked:active+.slider::after {
    transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
}

/* Rótulos ao lado do switch */
.status-switch-label {
    font-size: 0.95rem;
    color: #374151;
    margin: 0;
    /* margem controlada via classes mr-2 / ml-2 no template */
    opacity: 0.6;
    transition: opacity 0.15s ease, color 0.15s ease, transform 0.12s ease;
    cursor: pointer;
    user-select: none;
}

/* Estado ativo (mais opaco / destacado) */
.status-switch-label.active {
    opacity: 1;
    color: #4338CA;
    font-weight: 600;
    transform: translateY(-1px);
}

/* Estado inativo (mais transparente) */
.status-switch-label.inactive {
    opacity: 0.45;
    color: #6b7280;
    font-weight: 400;
}

/* Melhor alinhamento em telas pequenas */
@media (max-width: 640px) {
    .switch {
        --button-width: 3em;
        --button-height: 1.6em;
        --toggle-diameter: 1.1em;
    }
}

/* Responsivo para mobile */
@media (max-width: 600px) {
    .status-aprovacao-badge {
        padding: 6px 8px;
        font-size: 13px;
    }

    .status-aprovacao-badge:not(.status-open) {
        width: 38px;
        padding-right: 6px;
        padding-left: 6px;
    }

    .status-aprovacao-badge:not(.status-open):hover,
    .status-aprovacao-badge:not(.status-open):focus {
        width: 120px;
        min-width: 80px;
    }

    .status-aprovacao-container .status-aprovacao-badge:hover~.status-aprovacao-badge--first-open,
    .status-aprovacao-container .status-aprovacao-badge:focus~.status-aprovacao-badge--first-open {
        width: 38px;
        padding-right: 6px;
        padding-left: 6px;
    }
}

/* Variáveis para cores dos status, ícones e padrões (mover/atualizar conforme necessário) */
:root {
    --default-bg: #f9f9f9;
    --default-fg: #374151;

    --badge-open-bg: #f3f4f6;
    /* usado em estado aberto / hover */
    --badge-collapsed-bg: #f4f4f4;
    /* usado quando fechado */

    --status-all-approved-bg: #f7f7f7;

    /* aprovado (Green) */
    --status-aprovado-bg: #dcfce7;
    --status-aprovado-border: #86efac;
    --status-aprovado-fg: #166534;
    --status-aprovado-icon: #16a34a;

    /* aguardando material (Blue) */
    --status-aguardando-material-bg: #dbeafe;
    --status-aguardando-material-border: #93c5fd;
    --status-aguardando-material-open-bg: #dbeafe;
    --status-aguardando-material-fg: #1e40af;
    --status-aguardando-material-icon: #2563eb;

    /* aguardando aprovação (Yellow) */
    --status-aguardando-aprovacao-bg: #fef9c3;
    --status-aguardando-aprovacao-border: #fde047;
    --status-aguardando-aprovacao-fg: #854d0e;
    --status-aguardando-aprovacao-icon: #ca8a04;

    /* em alteração (Red theme - previously failed theme) */
    --status-em-alteracao-bg: #fee2e2;
    --status-em-alteracao-border: #fca5a5;
    --status-em-alteracao-fg: #991b1b;
    --status-em-alteracao-icon: #dc2626;

    /* alterado aguardando aprovação (Orange) */
    --status-alterado-aguardando-aprovacao-bg: #ffedd5;
    --status-alterado-aguardando-aprovacao-border: #fdba74;
    --status-alterado-aguardando-aprovacao-fg: #9a3412;
    --status-alterado-aguardando-aprovacao-icon: #ea580c;

    /* failed (Grey bg with red icon/text) */
    --status-failed-bg: #f3f4f6;
    --status-failed-border: #d1d5db;
    --status-failed-fg: #dc2626;
    --status-failed-icon: #dc2626;

    /* publicado (Gray) */
    --status-publicado-bg: #f3f4f6;
    --status-publicado-border: #d1d5db;
    --status-publicado-fg: #374151;
    --status-publicado-icon: #4b5563;

    /* agendado (Indigo/Blue) */
    --status-agendado-bg: #eef2ff;
    --status-agendado-border: #e0e7ff;
    --status-agendado-fg: #4338ca;
    --status-agendado-icon: #4338ca;
}

/* === Início: estilos do sistema de filtro (mesclado de status-filter-dropdown.css) === */

/* Container geral do filtro */
.status-filter-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    position: relative;
}

.filter-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--default-fg);
}

.status-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.status-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background-color: #f3f4f6;
    border-radius: 9999px;
    font-size: 0.825rem;
    color: var(--default-fg);
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    white-space: nowrap;
    height: 32px;
}

.status-chip:hover {
    background-color: #e5e7eb;
}

.status-chip.active {
    background-color: #e0e7ff;
    border-color: #c7d2fe;
    color: #4f46e5;
    font-weight: 500;
}

.status-chip .remove-icon {
    margin-left: 6px;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    font-size: 12px;
    font-weight: bold;
}

/* Status-specific chips use the same semantic variables from above */
.status-chip.todos {
    background-color: rgba(99, 102, 241, 0.1);
    border-color: #6366f1;
    color: #4f46e5;
}

.status-chip.rascunho {
    background-color: #f3f4f6;
    border-color: #d1d5db;
    color: var(--default-fg);
}

.status-chip.aguardando_aprovacao {
    background-color: var(--status-aguardando-aprovacao-bg);
    border-color: var(--status-aguardando-aprovacao-border);
    color: var(--status-aguardando-aprovacao-fg);
}

.status-chip.alterado_aguardando_aprovacao {
    background-color: var(--status-alterado-aguardando-aprovacao-bg);
    border-color: var(--status-alterado-aguardando-aprovacao-border);
    color: var(--status-alterado-aguardando-aprovacao-fg);
}

.status-chip.aprovado {
    background-color: var(--status-aprovado-bg);
    border-color: var(--status-aprovado-bg);
    color: var(--status-aprovado-fg);
}

.status-chip.aguardando_material {
    background-color: var(--status-aguardando-material-bg);
    border-color: var(--status-aguardando-material-border);
    color: var(--status-aguardando-material-fg);
}

.status-chip.em_alteracao {
    background-color: var(--status-em-alteracao-bg);
    border-color: var(--status-em-alteracao-border);
    color: var(--status-em-alteracao-fg);
}

.status-chip.scheduled {
    background-color: var(--status-agendado-bg);
    border-color: var(--status-agendado-border);
    color: var(--status-agendado-fg);
}

.status-chip.published {
    background-color: var(--status-publicado-bg);
    border-color: var(--status-publicado-border);
    color: var(--status-publicado-fg);
}

.add-filter-button {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    background-color: #ffffff;
    border: 1px dashed #d1d5db;
    border-radius: 9999px;
    font-size: 0.825rem;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    height: 32px;
}

.add-filter-button:hover {
    background-color: #f9fafb;
    border-color: #9ca3af;
    color: var(--default-fg);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 0.75rem;
    white-space: nowrap;
    color: white;
    margin: 1px 0;
}

.status-pill .remove-pill {
    margin-left: 4px;
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
}

.status-pill .remove-pill:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

.status-pill.rascunho {
    background-color: #6B7280;
}

.status-pill.aguardando_aprovacao {
    background-color: var(--status-aguardando-aprovacao-bg);
    color: var(--status-aguardando-aprovacao-fg);
}

.status-pill.alterado_aguardando_aprovacao {
    background-color: var(--status-alterado-aguardando-aprovacao-bg);
    color: var(--status-alterado-aguardando-aprovacao-fg);
}

.status-pill.aprovado {
    background-color: var(--status-aprovado-bg);
    color: var(--status-aprovado-fg);
}

.status-pill.aguardando_material {
    background-color: var(--status-aguardando-material-bg);
    color: var(--status-aguardando-material-fg);
}

.status-pill.em_alteracao {
    background-color: var(--status-em-alteracao-bg);
    color: var(--status-em-alteracao-fg);
}

.status-pill.scheduled {
    background-color: var(--status-agendado-bg);
    color: var(--status-agendado-fg);
}

.status-pill.published {
    background-color: var(--status-publicado-bg);
    color: var(--status-publicado-fg);
}

.filter-options-panel {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    width: 250px;
    z-index: 50;
    border: 1px solid #e5e7eb;
    padding: 8px 0;
    display: none;
    animation: fadeIn 0.2s ease-out;
}

.filter-options-panel.visible {
    display: block;
}

.filter-option {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    cursor: pointer;
    transition: background-color 0.15s;
}

.filter-option:hover {
    background-color: #f3f4f6;
}

.filter-option .status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 12px;
}

/* Map status-indicator colors to variables */
.status-indicator.todos {
    background-color: #6366f1;
}

.status-indicator.rascunho {
    background-color: #9ca3af;
}

.status-indicator.aguardando_aprovacao {
    background-color: var(--status-aguardando-aprovacao-icon);
}

.status-indicator.alterado_aguardando_aprovacao {
    background-color: var(--status-alterado-aguardando-aprovacao-icon);
}

.status-indicator.aprovado {
    background-color: var(--status-aprovado-icon);
}

.status-indicator.aguardando_material {
    background-color: var(--status-aguardando-material-icon);
}

.status-indicator.em_alteracao {
    background-color: var(--status-em-alteracao-icon);
}

.status-indicator.publicado {
    background-color: var(--status-publicado-icon);
}

.status-indicator.agendado {
    background-color: var(--status-agendado-icon);
}

.status-dropdown {
    position: absolute;
    z-index: 100;
    margin-top: 0.25rem;
    background-color: white;
    border-radius: 0.375rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    width: 250px;
    max-height: 350px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
}

.status-dropdown.show {
    display: block;
    animation: fadeIn 0.2s ease-out;
}

.status-dropdown-header {
    padding: 0.5rem 1rem;
    font-weight: 500;
    color: var(--default-fg);
    background-color: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.status-dropdown-list {
    padding: 0.5rem 0;
}

.status-dropdown-item {
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.15s;
}

.status-dropdown-item:hover {
    background-color: #f3f4f6;
}

.status-dropdown-item input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1rem;
    height: 1rem;
    border: 2px solid #9ca3af;
    border-radius: 0.25rem;
    margin-right: 0.75rem;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.status-dropdown-item input[type="checkbox"]:checked {
    background-color: #4f46e5;
    border-color: #4f46e5;
}

.status-dropdown-item input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    width: 0.25rem;
    height: 0.5rem;
    border: solid white;
    border-width: 0 0.125rem 0.125rem 0;
    transform: rotate(45deg);
    top: 1px;
}

.status-indicator {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

/* Colors for inline status indicators using variables */
.status-indicator.rascunho {
    background-color: #9ca3af;
}

.status-indicator.aguardando_aprovacao {
    background-color: var(--status-aguardando-aprovacao-fg);
}

.status-indicator.aprovado {
    background-color: var(--status-aprovado-icon);
}

.status-indicator.aguardando_material {
    background-color: var(--status-aguardando-material-icon);
}

.status-indicator.em_alteracao {
    background-color: var(--status-em-alteracao-icon);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    margin-left: 0.5rem;
    background-color: var(--status-aprovado-bg);
    color: var(--status-aprovado-fg);
}

.status-filter-footer {
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #e5e7eb;
    background-color: #f9fafb;
}

.status-filter-footer button {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    border-radius: 0.25rem;
    font-weight: 500;
    cursor: pointer;
}

.btn-clear {
    background-color: transparent;
    border: 1px solid #d1d5db;
    color: var(--default-fg);
}

.btn-clear:hover {
    background-color: #f3f4f6;
}

.btn-apply {
    background-color: #4f46e5;
    border: 1px solid #4f46e5;
    color: white;
}

.btn-apply:hover {
    background-color: #4338ca;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .status-filter-container {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .filter-label {
        margin-right: 0;
        width: 100%;
    }

    .status-chips-row {
        width: 100%;
    }

    .add-filter-button {
        width: 100%;
        justify-content: center;
        margin-left: 0;
    }

    .filter-options-panel {
        width: min(100vw - 32px, 300px);
        left: 0;
        right: auto;
    }
}

@media (max-width: 480px) {
    .status-filter-container {
        gap: 4px;
    }

    .filter-options-panel {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: calc(100vw - 32px);
    }
}

/* === Fim: estilos do sistema de filtro === */