/* ===================================================================== */
/* ESTILOS GLOBAIS DA AGENDA (Syncfusion Scheduler) — Route 1            */
/* Fonte ÚNICA: vive na lib compartilhada e é servido como               */
/* _content/Vixara.Shared/agenda.css, referenciado pelo LocalApp E pelo   */
/* Portal → estilo IDÊNTICO nos dois, sem duplicar/divergir.              */
/* São GLOBAIS (não scoped) de propósito: miram o DOM que o Syncfusion    */
/* renderiza via JS (.e-schedule .e-appointment ...), onde o atributo de  */
/* scoped CSS (b-xxxx) não chega.                                         */
/* ===================================================================== */

.e-schedule .e-appointment-wrapper .e-appointment .ap-wrap {
    display: flex !important;            /* força o layout flexível */
    flex-direction: row !important;      /* força a direção horizontal */
    justify-content: space-between !important;
    align-items: center !important;
    width: 100%;
    height: 100%;
    gap: 0px;
    padding: 2px 5px;
    overflow: hidden;
    color: white !important;
}

.ap-block {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* Texto do bloqueio */
.bloqueio-texto {
    font-weight: 600;
    font-size: .95rem;
    color: #C23B22; /* laranja-avermelhado */
}

/* Fundo leve e borda sutil para o evento de bloqueio */
.e-schedule .e-appointment.evento-bloqueio {
    background-color: #FFE8D9 !important;
    border-left: 4px solid #F28C6B !important;
    color: #C23B22 !important;
}

.ap-wrap .titulo-evento {
    flex-grow: 1;
    white-space: normal;
    word-wrap: break-word;
    text-align: left;
    min-width: 0;
}

.ap-wrap .checkin-container {
    display: flex;
    align-items: center;
    gap: 0px !important;
    flex-shrink: 0;
}

.ap-wrap .ap-checkin {
    font-size: 0.8rem;
    font-weight: bold;
    white-space: nowrap;
    color: white !important;
}

/* Bloqueio: listrado cinza (vence a regra leve acima por vir depois) */
.e-schedule .e-appointment.evento-bloqueio {
    background: repeating-linear-gradient(-45deg, #6c757d, #6c757d 10px, #868e96 10px, #868e96 20px);
    border-left: 5px solid #343a40 !important;
}

.ap-wrap .btn-checkin {
    background-color: #28a745; /* verde sucesso */
    color: white;
    border-radius: 30px 0px 0px 30px;
    width: 50px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 2px 0px 2px 20px;
    padding: 0;
    border: none;
}

.ap-wrap .btn-checkin-canc {
    background-color: #28a745;
    color: white;
    border-radius: 30px 0px 0px 30px;
    width: 45px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 2px 0px 2px 0px;
    padding: 0;
    border: none;
}

.ap-wrap .btn-dados {
    background-color: #28a745;
    color: white;
    border-radius: 0px 30px 30px 0px;
    width: 50px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 2px 40px 2px 0px;
    padding: 0;
    border: none;
}

.ap-wrap .btn-whatsapp {
    background-color: #28a745;
    color: white;
    border-radius: 0px;
    width: 45px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 2px 0px 2px 0px !important;
    padding: 0;
    border: none;
}

.btn-custom-icon {
    width: 18px;
    height: 18px;
}

.ap-wrap .btn-acompanhante {
    background-color: #28a745;
    color: white;
    border-radius: 0px;
    width: 45px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 2px 0px 2px 0px !important;
    padding: 0;
    border: none;
}

.ap-wrap .btn-checkin:hover {
    background-color: #218838; /* verde mais escuro no hover */
    color: white;
}

.ap-wrap .btn-checkin .bi {
    font-size: 1rem; /* tamanho do ícone */
}

/* ----- Cores do evento por STATUS (classe aplicada via OnEventRendered) ----- */
.e-schedule .status-agendado {
    background-color: #0d6efd !important; /* azul padrão */
}

.e-schedule .status-confirmado {
    background-color: #198754 !important; /* verde sucesso */
}

.e-schedule .status-cancelado {
    background-color: #6c757d !important; /* cinza secundário */
    border-left: 5px solid #dc3545 !important; /* borda vermelha de destaque */
}

.e-schedule .status-nao-compareceu {
    background-color: #ffc107 !important; /* amarelo aviso */
    color: #000 !important; /* texto preto p/ leitura */
}

/* Garante texto branco dentro do evento na maioria dos casos */
.e-schedule .e-appointment .e-appointment-content {
    color: white !important;
}

/* Altura mínima do slot (linha) — deixa a linha um pouco mais alta para os botões do
   evento (check-in/acompanhante/whatsapp/dados, 25px) caberem confortavelmente.
   Com EnableAutoRowHeight a linha ainda cresce além disto quando há eventos sobrepostos.
   Ajuste o valor se precisar mais grosso/fino. */
.e-schedule .e-work-cells,
.e-schedule .e-time-cells {
    height: 44px;
}