/* _content/BelezaSaaS/Pages/Shared/_Layout.cshtml.rz.scp.css */
/* Please see documentation at https://learn.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand[b-x53pqufuxx] {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

a[b-x53pqufuxx] {
    color: #0077cc;
}

.btn-primary[b-x53pqufuxx] {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active[b-x53pqufuxx], .nav-pills .show > .nav-link[b-x53pqufuxx] {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.border-top[b-x53pqufuxx] {
    border-top: 1px solid #e5e5e5;
}

.border-bottom[b-x53pqufuxx] {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow[b-x53pqufuxx] {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy[b-x53pqufuxx] {
    font-size: 1rem;
    line-height: inherit;
}

.footer[b-x53pqufuxx] {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
}
#createContactButton {
    width: auto; /* Define a largura automática do botão */
    display: inline-block; /* Garante que o botão se ajuste ao seu conteúdo */
    margin-right: auto; /* Ajusta o botão para não ocupar a largura total */
    margin-left: 0; /* Remove possíveis centralizações indesejadas */
}
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-left: 15px;
    padding-right: 15px;
    min-width: 100%;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}


.kanban-board {
    display: flex;
    flex-grow: 1;
    padding: 0px;
    overflow-x: auto;
    height: calc(100vh - 130px); /* Desconta a altura da navbar ou cabeçalho, se houver */
    background-color: #f8f9fc;
}

.kanban-columns {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: calc(100vh - 130px);
}

.kanban-column {
    width: 19%;
    background-color: #f8f9fc;
    padding: 5px;
    box-sizing: border-box;
    position: relative;
}

.kanban-column-content {
    overflow-y: auto; /* Permite rolagem vertical apenas no conteúdo */
    max-height: calc(100vh - 180px); /* Ajusta a altura do conteúdo para rolar, descontando o título */
}

    /* Estilização personalizada da barra de rolagem */
    .kanban-column-content::-webkit-scrollbar {
        width: 6px; /* Define a largura da barra de rolagem */
    }

    .kanban-column-content::-webkit-scrollbar-thumb {
        background-color: #888; /* Cor da barra de rolagem */
        border-radius: 10px; /* Arredonda a barra de rolagem */
    }

        .kanban-column-content::-webkit-scrollbar-thumb:hover {
            background-color: #555; /* Cor da barra de rolagem quando em hover */
        }

    /* Estilização da contagem de cards */
    .kanban-column h3 {
        display: flex;
        padding: 5px;
        justify-content: space-between;
        align-items: center;
        font-size: 10px; /* Mantém o tamanho da fonte */
    }

.card-kanban-count {
    font-weight: normal;
    color: #555; /* Cor diferenciada para a contagem */
    font-size: 10px; /* Tamanho menor para a contagem */
}

/* Estilos dos cards */
.kanban-card {
    background-color: white;
    padding: 8px; /* Reduz o padding interno do card */
    margin-bottom: 10px;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    cursor: grab;
    text-align: left; /* Alinha o conteúdo à esquerda */
    width: 100%; /* Garante que o card ocupe a largura da coluna */
}

/* Header do card com a data alinhada à direita */
.card-kanban-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 5px;
}

.card-kanban-date {
    font-size: 8px;
    color: gray;
}

/* Estilos para o conteúdo do card */
.card-kanban-body {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Alinha a foto e o texto à esquerda */
}

/* Alinha a foto à esquerda e define tamanho reduzido */
.card-kanban-photo {
    margin-right: 8px; /* Reduz o espaçamento da foto */
}

    .card-kanban-photo img {
        width: 25px; /* Reduz ainda mais o tamanho da imagem */
        height: 25px;
        border-radius: 50%;
        object-fit: cover;
    }

/* Nome da pessoa e serviço à direita da foto */
.card-kanban-info h4 {
    margin: 0;
    font-size: 11px; /* Reduz o tamanho do nome */
    font-weight: bold;
}

.card-kanban-info p {
    margin: 3px 0;
    font-size: 9px; /* Reduz o tamanho da fonte do serviço */
}

.card-kanban-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
    font-size:9px;
}

.montante {
    width: 30%; /* Define uma largura para o montante */
    text-align: left;
}

.tags-kanban {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 60%; /* Define a largura para as tags */
}

.tag {
    background-color: #e0e0e0;
    color: #333;
    font-size: 9px;
    padding: 2px 6px;
    margin-right: 5px;
    border-radius: 4px;
}
/* Sidebar recolhida */
.sidebar-collapsed {
    width: 80px;
    transition: width 0.3s ease;
}

.sidebar-expanded {
    width: 280px;
    transition: width 0.3s ease;
}

/* Quando a sidebar está expandida */
.content-expanded {
    width: calc(100% - 60px); /* A largura será ajustada conforme a sidebar recolhida */
    margin-left: 60px;
    transition: margin-left 0.3s ease, width 0.3s ease;
}

/* Quando a sidebar está recolhida */
.content-collapsed {
    width: calc(100% - 280px); /* A largura será ajustada conforme a sidebar */
    margin-left: 280px;
    transition: margin-left 0.3s ease, width 0.3s ease;
    
}


/* Estilo quando a sidebar está recolhida */
.sidebar-collapsed .nav-link span {
    display: none;
}

.sidebar-collapsed .fs-4 {
    display: none;
}

.sidebar-collapsed .bi {
    margin-right: 0;
}
/* Quando a sidebar está recolhida */
.sidebar-collapsed .menu-text {
    display: none; /* Oculta o texto do menu quando a sidebar está recolhida */
}

/* Quando a sidebar está expandida */
.sidebar-expanded .menu-text {
    display: inline; /* Exibe o texto do menu quando a sidebar está expandida */
}
#toggleSidebar {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    height: 60px; /* Ajuste conforme necessário */
    padding: 0; /* Remove o padding padrão do botão */
    outline: none; /* Remove a borda de foco padrão */
    box-shadow: none; /* Remove qualquer sombra ao redor do botão */
}
/* Quando a sidebar está recolhida, ocultar o link */
.sidebar-collapsed #sidebarLink {
    display: none; /* Oculta o link e remove o espaço */
}

.sidebar-expanded #sidebarLink {
    display: inline; /* Exibe o texto do menu quando a sidebar está expandida */
}
#toggleSidebar:focus {
    outline: none; /* Remove a borda de foco ao clicar */
    box-shadow: none; /* Remove qualquer sombra ao redor do botão no foco */
}

#toggleSidebar:active {
    outline: none; /* Remove a borda de foco ao clicar */
    box-shadow: none; /* Remove qualquer sombra ao redor do botão no estado ativo */
}
.kanban-header {
    display: flex;
    justify-content: space-between; /* Espaça os botões entre os extremos */
    align-items: center; /* Alinha verticalmente no centro */
    padding: 0 15px; /* Adiciona espaçamento interno, se necessário */
    margin-bottom: 20px; /* Espaçamento abaixo do cabeçalho */
}

#filterButton {
    margin: 0; /* Remove margens automáticas que podem deslocar o botão */
    padding: 8px 16px;
    font-size: 14px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 40px;
    left: 100px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 4px;
    z-index: 1000;
    min-width: 200px;
}

    .dropdown-menu.show {
        display: block;
    }

    .dropdown-menu .form-group {
        margin-bottom: 15px;
    }

    .dropdown-menu label {
        display: block;
        font-size: 14px;
        cursor: pointer;
        margin-bottom: 5px;
    }
#filterDropdown {
    position: absolute; /* Posiciona em relação ao elemento pai mais próximo com position: relative */
    top: 100%; /* Alinha o topo do dropdown com a parte inferior do botão */
    left: 15px; /* Alinha o dropdown à esquerda do botão */
    margin-top: 5px; /* Espaçamento entre o botão e o dropdown */
    z-index: 1050; /* Garante que o dropdown fique acima de outros elementos */
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    padding: 10px;
    display: none; /* Esconde o dropdown por padrão */
}

    #filterDropdown.show {
        display: block; /* Exibe o dropdown quando ativado */
    }