/* components.css */
/* ===== SISTEMA DE BOTÕES ===== */
.btn {
    border: none;
    border-radius: var(--border-radius);
    padding: var(--space-sm) var(--space-lg);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Botão Primário */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--white);
    box-shadow: var(--shadow-md);
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-primary:active:not(:disabled) {
    transform: translateY(0);
}

/* Botão Verde (Sucesso) */
.btn-green {
    background: linear-gradient(135deg, var(--success-color), #38a169);
    color: var(--white);
    box-shadow: var(--shadow-md);
}

.btn-green:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(72, 187, 120, 0.4);
}

/* Botão Vermelho (Perigo) */
.btn-red {
    background: linear-gradient(135deg, var(--danger-color), #e53e3e);
    color: var(--white);
    box-shadow: var(--shadow-md);
}

.btn-red:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 101, 101, 0.4);
}

/* Botão Secundário */
.btn-secondary {
    background: var(--gray-lighter);
    color: var(--gray-dark);
    box-shadow: var(--shadow-sm);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--gray-light);
    transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════
   🎨 SISTEMA DE BOTÕES OUTLINE - PADRONIZADO V2.0
   Usado em: my_clients.php, day_view.php, notifications.php
   ═══════════════════════════════════════════════════════════ */

/* Base para todos os botões outline */
.btn-outline-primary,
.btn-outline-success,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-danger,
.btn-outline-secondary,
.btn-outline-orange {
    background: transparent;
    border: 1.5px solid;
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* ═══════════════════════════════════════════════════════════
   📝 SISTEMA DE ANOTAÇÕES VISUAIS EM BOTÕES
   Badge circular integrado DENTRO de botões
   ═══════════════════════════════════════════════════════════ */

/* Container do botão com anotação - agora o próprio botão */
.btn-with-note {
    position: relative;
    overflow: visible !important; /* Crítico: permitir que badge saia dos limites */
}

/* Badge circular de anotação (canto superior direito DENTRO do botão) */
.btn-note-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    background: white;
    border: 2px solid #e53e3e; /* Vermelho */
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: #e53e3e;
    cursor: help;
    z-index: 100 !important; /* Z-index alto para ficar acima de tudo */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
    pointer-events: auto; /* Permite interação com tooltip */
}

/* Hover: aumenta ligeiramente e destaca */
.btn-note-badge:hover {
    transform: scale(1.2);
    box-shadow: 0 3px 10px rgba(229, 62, 62, 0.4);
    border-color: #c53030; /* Vermelho mais escuro */
    color: #c53030;
}

/* Animação de pulso sutil para chamar atenção */
@keyframes note-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

.btn-note-badge {
    animation: note-pulse 2.5s ease-in-out infinite;
}

/* Remove animação no hover */
.btn-note-badge:hover {
    animation: none;
}

/* Variante amarela (warning) */
.btn-note-badge.warning {
    border-color: #520df2;
    color: #520df2;
    background: #fffbeb;
}

.btn-note-badge.warning:hover {
    border-color: #d97706;
    color: #d97706;
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.4);
}

/* Variante verde (sucesso) */
.btn-note-badge.success {
    border-color: #10b981;
    color: #10b981;
    background: #f0fdf4;
}

.btn-note-badge.success:hover {
    border-color: #059669;
    color: #059669;
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.4);
}

/* Hover universal: fundo suave + sombra + lift */
.btn-outline-primary:hover:not(:disabled),
.btn-outline-success:hover:not(:disabled),
.btn-outline-info:hover:not(:disabled),
.btn-outline-warning:hover:not(:disabled),
.btn-outline-danger:hover:not(:disabled),
.btn-outline-secondary:hover:not(:disabled),
.btn-outline-orange:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Primary (Roxo) */
.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-outline-primary:hover:not(:disabled) {
    background-color: rgba(102, 126, 234, 0.1);
    border-color: var(--primary-color);
}

/* Success (Verde) */
.btn-outline-success {
    color: #28a745;
    border-color: #28a745;
}

.btn-outline-success:hover:not(:disabled) {
    background-color: rgba(40, 167, 69, 0.1);
    border-color: #28a745;
}

/* Info (Azul) */
.btn-outline-info {
    color: #17a2b8;
    border-color: #17a2b8;
}

.btn-outline-info:hover:not(:disabled) {
    background-color: rgba(23, 162, 184, 0.1);
    border-color: #17a2b8;
}

/* Warning (Amarelo) */
.btn-outline-warning {
    color: #cc9900;
    border-color: #cc9900;
}

.btn-outline-warning:hover:not(:disabled) {
    background-color: rgba(204, 153, 0, 0.1);
    border-color: #cc9900;
}

/* Danger (Vermelho) */
.btn-outline-danger {
    color: #dc3545;
    border-color: #dc3545;
}

.btn-outline-danger:hover:not(:disabled) {
    background-color: rgba(220, 53, 69, 0.1);
    border-color: #dc3545;
}

/* Secondary (Cinza) */
.btn-outline-secondary {
    color: #6c757d;
    border-color: #6c757d;
}

.btn-outline-secondary:hover:not(:disabled) {
    background-color: rgba(108, 117, 125, 0.1);
    border-color: #6c757d;
    color: var(--dark-color);
}

/* Orange (Pagamentos em atraso) */
.btn-outline-orange {
    color: var(--orange-color);
    border-color: var(--orange-color);
}

.btn-outline-orange:hover:not(:disabled) {
    background-color: rgba(253, 126, 20, 0.1);
    border-color: var(--orange-color);
}

/* Tamanhos de Botões */
.btn-sm {
    padding: var(--space-xs) var(--space-md);
    font-size: 0.8rem;
}

.btn-lg {
    padding: var(--space-md) var(--space-xl);
    font-size: 1rem;
}

/* Botões Compactos */
.btn-compact {
    padding: 8px 16px !important;
    font-size: 0.8rem !important;
    min-width: 130px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
    border: 1px solid rgba(102, 126, 234, 0.3);
    color: #667eea;
    font-weight: 600;
    border-radius: var(--border-radius-sm);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.btn-compact:hover {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
}

@media (max-width: 768px) {
    .btn-compact {
        padding: 6px 12px !important;
        font-size: 0.75rem !important;
        min-width: 110px;
    }
}

@media (max-width: 480px) {
    .btn-compact {
        min-width: 100px;
        padding: 5px 10px !important;
        font-size: 0.7rem !important;
    }
}

/* ===== CAIXA-TOPO ===== */
.caixa-topo {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.45) 100%) !important;
    backdrop-filter: blur(15px) !important;
    border: 2px solid rgba(128, 128, 128, 0.3) !important;
    border-radius: var(--border-radius-xl) !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 15px 20px !important;
    margin-bottom: 0 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
}

/* Remove qualquer outra caixa-topo duplicada */
.caixa-topo:not(:first-of-type) {
    display: none !important;
}

.caixa-topo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    opacity: 0.8;
}

/* Texto do PT */
.caixa-topo .card-text.mb-2 {
    font-size: 0.95rem;
    margin-bottom: 15px !important;
    text-align: center;
    font-weight: 600;
    color: #2d3748;
}

/* Summary mais compacto */
.caixa-topo .summary {
    margin-bottom: 5px !important;
}

/* Sem PT */
.caixa-topo .text-warning {
    font-size: 0.9rem;
    margin-bottom: 10px !important;
}

.caixa-topo h2.text-center {
    font-size: 1.3rem;
    margin: 0;
}

@media (max-width: 768px) {
    .caixa-topo {
        padding: 12px 15px !important;
        border-radius: var(--border-radius-lg);
    }
    
    .caixa-topo .card-text.mb-2 {
        font-size: 0.85rem;
        margin-bottom: 10px !important;
    }
}

@media (max-width: 480px) {
    .caixa-topo {
        padding: 10px 12px !important;
        border-radius: var(--border-radius-sm);
    }
    
    .caixa-topo .card-text.mb-2 {
        margin-bottom: 8px !important;
    }
}

/* ===== SISTEMA DE MODAIS ===== */
.modal-content {
    border: none;
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(10px);
}

.modal-header {
    background: linear-gradient(135deg, var(--gray-dark), var(--gray-light));
    color: var(--white);
    border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
    border-bottom: none;
    padding: var(--space-lg);
}

.modal-header .modal-title {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--white);
}

/* Botão Close Modernizado */
.modal-header .btn-close {
    filter: invert(1);
    opacity: 0.8;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    position: relative;
}

.modal-header .btn-close::before {
    content: '×';
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--white);
    line-height: 1;
}

.modal-header .btn-close {
    background-image: none !important;
}

.modal-header .btn-close:hover {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

.modal-header .btn-close:active {
    transform: scale(0.95);
}

.modal-body {
    padding: var(--space-md);
    background: var(--white);
}

.modal-footer {
    background: var(--gray-lighter);
    border-top: 1px solid var(--gray-light);
    border-radius: 0 0 var(--border-radius-xl) var(--border-radius-xl);
    padding: var(--space-lg);
}

/* ═══════════════════════════════════════════════════════════
   🎨 SISTEMA DE MODAIS PADRONIZADO V2.0
   Usado em: modal_helper.php, day_view.php, todas as páginas
   ═══════════════════════════════════════════════════════════ */

/* Layout Responsivo do Footer - Centralizado com Empilhamento */
.modal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    padding: var(--space-lg);
    border-top: 1px solid var(--gray-light);
}

/* Botões de Modal - Larguras Padronizadas */
.modal-footer .btn {
    min-width: 100px;
    max-width: 200px;
}

.modal-footer .btn-success {
    min-width: 120px; /* Botão principal (Confirmar/Marcar) ligeiramente maior */
}

/* Cores de Header por Contexto */
.modal-warning .modal-header {
    background: linear-gradient(135deg, var(--warning-color), #dd6b20);
    color: white;
}

.modal-success .modal-header {
    background: linear-gradient(135deg, var(--success-color), #38a169);
    color: white;
}

.modal-error .modal-header,
.modal-danger .modal-header {
    background: linear-gradient(135deg, var(--danger-color), #e53e3e);
    color: white;
}

.modal-info .modal-header {
    background: linear-gradient(135deg, var(--info-color), #3182ce);
    color: white;
}

/* Bordas Contextuais do Modal Content */
.modal-success .modal-content {
    border-color: var(--success-color);
}

.modal-error .modal-content,
.modal-danger .modal-content {
    border-color: var(--danger-color);
}

.modal-warning .modal-content {
    border-color: var(--warning-color);
}

.modal-info .modal-content {
    border-color: var(--info-color);
}

/* DEPRECATED: Remover após migração completa */
.modal-success .modal-content.legacy-bg {
    background: linear-gradient(135deg, var(--success-color), #38a169);
}
.modal-error .modal-content.legacy-bg {
    background: linear-gradient(135deg, var(--danger-color), #e53e3e);
}
.modal-warning .modal-content.legacy-bg {
    background: linear-gradient(135deg, var(--warning-color), #dd6b20);
}
.modal-info .modal-content.legacy-bg {
    background: linear-gradient(135deg, var(--info-color), #3182ce);
}

/* ===== COMPONENTES DE AÇÃO ===== */
.action-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    margin: 0 auto;
}

.action-icon,
.custom-checkbox-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 1.3rem;
    margin: 0 auto;
}

/* Checkbox Personalizado */
.custom-checkbox-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0 auto;
    cursor: pointer;
}

.custom-checkbox-icon.icon-unchecked::before {
    content: '◯';
    color: var(--primary-color);
    background: rgba(102, 126, 234, 0.1);
    border-radius: 50%;
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: all 0.3s ease;
}

.custom-checkbox-wrapper:hover .custom-checkbox-icon.icon-unchecked::before {
    background: rgba(102, 126, 234, 0.15);
    transform: scale(1.05);
}

.custom-checkbox-icon.icon-checked::before {
    content: '📅';
    color: var(--success-color);
    background: rgba(72, 187, 120, 0.15);
    border-radius: 50%;
    padding: 3px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    box-shadow: 0 2px 8px rgba(72, 187, 120, 0.3);
    animation: calendar-appear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center;
}

@keyframes calendar-appear {
    0% {
        transform: scale(0.5) rotate(-10deg);
        opacity: 0;
    }
    70% {
        transform: scale(1.1) rotate(5deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.custom-checkbox-wrapper:hover .custom-checkbox-icon.icon-checked::before {
    background: rgba(72, 187, 120, 0.2);
    transition: background 0.2s ease;
}

/* Ícone de Indisponível */
.icon-unavailable-circle {
    position: relative;
    color: var(--danger-color);
    background: rgba(245, 101, 101, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.icon-unavailable-circle::before {
    content: '◯';
    font-size: 1.5rem;
    line-height: 1;
}

.icon-unavailable-circle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 18px;
    height: 2px;
    background: var(--danger-color);
    border-radius: var(--border-radius);
}

/* ===== TABELAS ===== */
.table-compact {
    width: 100%;
    border-collapse: collapse;
}

.table-compact th,
.table-compact td {
    padding: var(--space-sm);
    text-align: left;
    border-bottom: 1px solid var(--gray-lighter);
}

.table-compact th {
    background: var(--gray-lighter);
    font-weight: 600;
    color: var(--gray-dark);
}

.table-compact th:nth-child(3),
.table-compact td:nth-child(3) {
    width: 80px;
    text-align: center;
}

/* ===== BADGES ===== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--border-radius);
    font-size: 0.75rem;
    font-weight: 600;
}

.badge.bg-warning {
    background: var(--warning-color) !important;
    color: var(--white);
}

/* ===== FORMULÁRIOS ===== */
.form-select, .form-control {
    border: 2px solid var(--gray-lighter);
    border-radius: var(--border-radius);
    padding: var(--space-sm);
    transition: all var(--transition-fast);
}

.form-select:focus, .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    outline: none;
}

/* ===== ANIMAÇÕES ===== */
@keyframes slideInDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal.fade .modal-dialog {
    animation: slideInDown 0.3s ease;
}

/* ===== IMPERSONATION BANNER ===== */
.impersonation-banner {
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    animation: slideIn 0.5s forwards;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .impersonation-banner {
        top: 60px;
        left: 10px;
        right: 10px;
        flex-direction: column;
        align-items: flex-start;
    }

    .impersonation-banner a {
        margin-top: 10px;
        align-self: flex-end;
    }
    
    /* Responsive para modais */
    .modal-dialog {
        margin: var(--space-sm);
    }
    
    .modal-body {
        padding: var(--space-sm);
    }
    
    .btn {
        width: 100%;
        margin-bottom: var(--space-sm);
    }
    
    .modal-footer {
        flex-direction: column;
        gap: var(--space-sm);
    }
    
    .modal-footer .btn {
        margin: 0;
    }
    
    /* Ações em mobile */
    .action-container {
        min-height: 35px;
    }
    
    .action-container .action-button {
        padding: 3px 6px;
        font-size: 0.75rem;
        white-space: nowrap;
    }
}

/* ===== COMPONENTES ADICIONAIS Transitados da my_bookings.php===== */
.summary {
    padding: 5px;
}

.summary-item {
    margin-right: 15px;
}

.summary-item i {
    margin-right: 5px;
    color: #28a745;
}

.summary-item:nth-child(2) i {
    color: #17a2b8;
}

.group-icon i {
    font-size: 1em;
    margin-left: 5px;
    color: #28a745;
}

.group-icon:hover {
    cursor: help;
}

/* Links de tabela */
.table-compact td a.text-decoration-none:hover {
    text-decoration: underline !important;
}

/* Badge específico */
.badge.bg-warning.text-dark {
    font-size: 0.8em;
}

/* Select customizado para formulários */
.client-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    border: 1px solid #ccc;
    padding: 0.2rem 0.3rem;
    font-size: 0.875rem;
    line-height: 1.5;
    width: auto;
}

/* Botão compacto específico */
.btn-compact {
    padding: 0.1rem 0.3rem !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.btn-compact i {
    margin: 0px !important;
}

/* Ajustar o botão "Marcar Lidas" no cabeçalho */
.table-compact th form .btn {
    padding: 0.1rem 0.3rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

@media (max-width: 576px) {
    .form-label {
        font-size: 0.9rem;
    }
    
    .form-select {
        font-size: 0.9rem;
        max-width: 250px !important;
    }
    
    .col-6 {
        padding-right: 5px;
        padding-left: 5px;
    }
    
    /* Responsividade para caixa-topo */
    .caixa-topo {
        padding: 12px 15px !important;
        border-radius: var(--border-radius-xl);
    }
}
/* Otimização para tabela de marcações em mobile */
@media (max-width: 768px) {
    .table-compact td:nth-child(1) {
        min-width: 120px;
    }
    
    .table-compact td:nth-child(2) {
        font-size: 0.8rem;
    }
    
    .table-compact .btn-sm {
        padding: 0.2rem 0.4rem;
        font-size: 0.75rem;
    }
}

/* ===== NOTIFICAÇÕES ===== Transitados da da notifications.php*/
/* Coluna "Ações" com largura fixa */
.table-compact th.action-column,
.table-compact td.action-column {
    width: 120px;
    text-align: center;
}

/* Estilo para cabeçalhos clicáveis */
.sortable {
    cursor: pointer;
}

.sortable:hover {
    background-color: #f1f1f1;
}

/* Estilo para o cabeçalho personalizado */
.btn-header-custom {
    cursor: default;
    font-weight: 500;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

/* Ajuste para o container do cabeçalho */
.view-header {
    padding: 0.5rem;
    text-align: center;
    width: 100px;
}

/* Paginação específica para notificações */
.pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Responsividade para notificações */
@media (max-width: 768px) {
    .table-compact th.action-column,
    .table-compact td.action-column {
        width: 80px;
    }
    
    .view-header {
        width: 70px;
    }
    
    .btn-header-custom {
        font-size: 0.8rem;
        padding: 0.2rem 0.4rem !important;
    }
}

/* ===== WELCOME SECTIONS MODERNAS transitados da home_slideshow.php===== */
.welcome-section {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85)) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--border-radius-xl);
    padding: 12px 15px; /* Reduzido */
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.15),
        0 2px 8px rgba(255, 255, 255, 0.2) inset;
    z-index: 100;
    max-width: 500px;
    width: 90%;
    max-height: 25vh; /* Reduzido */
    overflow-y: auto;
    animation: slideInDown 0.6s ease-out;
}

.welcome-title {
    font-size: 1.2rem; /* Reduzido */
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px; /* Reduzido */
    text-align: center;
}

/* Sessions List Ultra Condensada */
.session-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px; /* MUITO reduzido */
    background: rgba(255, 255, 255, 0.6);
    border-radius: var(--border-radius-sx);
    margin-bottom: 4px; /* Reduzido */
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    gap: 6px;
    min-height: 32px; /* Altura mínima compacta */
}

.session-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.8);
}

/* Detalhes da sessão em linha única compacta */
.session-details {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.session-date {
    font-weight: 700;
    color: var(--dark-color);
    font-size: 0.8rem; /* Reduzido */
    white-space: nowrap;
}

.session-time {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.75rem; /* Reduzido */
    white-space: nowrap;
}

.session-info {
    color: var(--gray-dark);
    font-size: 0.95rem; /* Reduzido */
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.session-status {
    font-style: italic;
    color: var(--gray-medium);
    font-size: 0.7rem; /* Reduzido */
    white-space: nowrap;
}

/* Botão Ver ultra compacto */
.action-column {
    flex-shrink: 0;
}

.action-column .btn {
    padding: 3px 6px !important; /* SUPER compacto */
    border-radius: var(--border-radius-sx);
    font-size: 0.7rem !important; /* Reduzido */
    white-space: nowrap;
    min-width: 45px; /* Compacto */
    height: 24px; /* Altura fixa */
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-column .btn i {
    font-size: 0.7rem; /* Ícone menor */
    margin-right: 2px;
}

.no-sessions {
    font-size: 0.85rem; /* Reduzido */
    color: var(--gray-medium);
    text-align: center;
    padding: 12px; /* Reduzido */
    font-style: italic;
}

/* Payment Alert Section mais compacta */
.payment-alert-section {
    position: absolute !important;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(255, 243, 205, 0.95), rgba(255, 238, 186, 0.9)) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: var(--border-radius-xl);
    padding: 12px 15px; /* Reduzido */
    box-shadow: 
        0 8px 32px rgba(255, 193, 7, 0.15),
        0 2px 8px rgba(255, 255, 255, 0.3) inset;
    z-index: 100;
    max-width: 500px;
    width: 90%;
    max-height: 30vh; /* Reduzido */
    overflow-y: auto;
    animation: gentlePulse 3s ease-in-out infinite;
}

.payment-alert-section .welcome-title {
    font-size: 1.2rem; /* Reduzido */
    background: linear-gradient(135deg, #fd7e14, #e53e3e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px; /* Reduzido */
}

/* Tabela de Pagamentos mais compacta */
.payment-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 6px 0; /* Reduzido */
    background: rgba(255, 255, 255, 0.7);
    border-radius: var(--border-radius-sx);
    overflow: hidden;
    backdrop-filter: blur(10px);
    font-size: 0.75rem; /* Reduzido */
}

.payment-table th {
    background: linear-gradient(135deg, #fd7e14, #e53e3e);
    color: white;
    padding: 4px 6px !important; /* MUITO compacto */
    font-weight: 600;
    text-align: center;
    font-size: 0.7rem; /* Reduzido */
}

.payment-table td {
    padding: 4px 6px !important; /* MUITO compacto */
    border-bottom: 1px solid rgba(255, 193, 7, 0.2);
    text-align: center;
    font-size: 0.7rem; /* Reduzido */
}

.payment-table tr:last-child td {
    border-bottom: none;
}

.total-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; /* Reduzido */
    height: 20px; /* Reduzido */
    border-radius: 50%;
    background: linear-gradient(135deg, #fd7e14, #e53e3e);
    color: white;
    font-weight: 700;
    font-size: 0.65rem; /* Reduzido */
    box-shadow: 0 2px 6px rgba(253, 126, 20, 0.3);
}

/* Textos da payment section mais compactos */
.payment-alert-section p {
    margin: 6px 0 0; /* Reduzido */
    font-size: 0.75rem; /* Reduzido */
    line-height: 1.3;
}

/* Responsividade para Mobile Compacto */
@media (max-width: 768px) {
    .welcome-section,
    .payment-alert-section {
        width: 95%;
        padding: 10px 12px;
        max-height: 22vh;
    }
    
    .welcome-title {
        font-size: 1.1rem;
    }
    
    .session-item {
        padding: 5px 6px;
        gap: 4px;
        min-height: 28px;
    }
    
    .session-details {
        gap: 4px;
    }
    
    .session-date,
    .session-time,
    .session-info,
    .session-status {
        font-size: 0.7rem;
    }
    
    .session-info {
        max-width: 120px; /* ESPAÇO SUFICIENTE */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .action-column .btn {
        padding: 2px 4px !important;
        font-size: 0.65rem !important;
        min-width: 40px;
        height: 22px;
    }
    
    .payment-table {
        font-size: 0.7rem;
    }
    
    .payment-table th,
    .payment-table td {
        padding: 3px 4px !important;
    }
}

@media (max-width: 576px) {
    .session-details {
        gap: 3px;
    }
    
    .session-date {
        font-size: 0.65rem;
    }
    
    .session-time {
        font-size: 0.65rem;
    }
    
    .session-info {
        font-size: 0.75rem;
        max-width: 100px; /* ESPAÇO SUFICIENTE */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Para ecrãs MUITO pequenos (menos de 400px) */
@media (max-width: 400px) {
    .session-date {
        display: none; /* Esconde data para dar mais espaço ao nome */
    }
    
    .session-info {
        max-width: 120px !important; /* MÁXIMO ESPAÇO */
        font-size: 0.7rem !important;
    }
    
    .action-column .btn span {
        display: none; /* Só ícone */
    }
    
    .action-column .btn i {
        margin-right: 0;
        font-size: 0.8rem !important;
    }
}

/* ===== SUMMARY BADGES transitados da my_shedules.php ===== */
.summary-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 8px;
    border-radius: var(--border-radius);
    border: 2px solid;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all var(--transition-fast);
}

.summary-badge i {
    font-size: 1.1em;
}

/* Cores para Clientes Individuais */
.summary-badge.individual {
    color: #1659e9;
    border-color: #1659e9;
    background-color: rgba(15, 62, 163, 0.18);
}

/* Cores para Clientes Individuais */
.summary-badge.amarelinho {
    color: #000000;
    border-color: #cccc00;
    background-color: rgba(255, 255, 0, 0.18);
}

.summary-badge.laranjinha {
    color: #000000;
    border-color: #9b59b6;
    border-width: 2px;
    background-color: rgba(255, 140, 0, 0.18);
}

.summary-badge.cinzentinho {
    color: #000000;
    border-color: #6C757D;
    background-color: rgba(108, 117, 125, 0.18);
}

/* Cores para Grupos */
.summary-badge.group {
    color: #1cc8e3;
    border-color: #1cc8e3;
    background-color: rgba(28, 200, 227, 0.18);
}

/* Cores para Horas Disponíveis */
.summary-badge.available {
    color: #33cc33;
    border-color: #33cc33;
    background-color: rgba(51, 204, 51, 0.18);
}

/* Cores para Horas Indisponíveis */
.summary-badge.unavailable {
    color: #520df2;
    border-color: #520df2;
    background-color: rgba(82, 13, 242, 0.18);
}

/* PT Select Styles */
.pt-select-wrapper {
    max-width: 300px;
    margin: 0 auto;
}

.pt-select {
    background-color: #e7f1ff;
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    padding: var(--space-sm);
    font-family: "Poppins", sans-serif;
    transition: all var(--transition-fast);
}

.pt-select:focus {
    border-color: var(--primary-dark);
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    background-color: var(--white);
}

.pt-select option {
    background-color: var(--white);
    color: var(--dark-color);
}

.pt-select option:checked {
    background-color: var(--primary-color);
    color: var(--white);
}

.pt-select option[value="all"] {
    font-weight: bold;
    background-color: var(--gray-lighter);
}

/* Calendar Day Content Styles */
.calendar .day p {
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.4;
    min-height: 60px;
}

.calendar .day p small {
    font-size: 0.75rem;
}

.calendar .day p i {
    margin-right: 4px;
    font-size: 0.9rem;
    cursor: help;
    display: inline-block;
}

.calendar .day p br {
    margin-bottom: 2px;
}

.calendar .day p strong {
    font-weight: 600;
}

/* Text Colors para Status */
.text-vacation {
    color: rgb(240, 36, 172);
}

.text-absence {
    color: rgb(151, 5, 19);
}

.text-unavailable {
    color: var(--gray-medium);
}

/* Hover effects para Summary Badges */
.summary-badge:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.summary-badge.individual:hover {
    background-color: rgba(15, 62, 163, 0.12);
}

.summary-badge.group:hover {
    background-color: rgba(28, 200, 227, 0.12);
}

.summary-badge.available:hover {
    background-color: rgba(51, 204, 51, 0.12);
}

.summary-badge.unavailable:hover {
    background-color: rgba(82, 13, 242, 0.12);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .summary-badge {
        padding: 6px 10px;
        font-size: 0.85rem;
        gap: 6px;
    }
    
    .summary-badge i {
        font-size: 1em;
    }
    
    .pt-select-wrapper {
        max-width: 100%;
    }
    
    .calendar .day p {
        font-size: 0.75rem;
        min-height: 50px;
    }
}

/* ===== DAY_VIEW COMPONENTS transitados da day_view.php ===== */

/* Group Icon */
.group-icon i {
    font-size: 1em;
    margin-left: 5px;
    color: var(--info-color);
}

.group-icon:hover {
    cursor: help;
}

/* Status Badges */
.status-badge,
.status-text {
    display: inline-block;
    min-width: 100px;
    text-align: left;
}

/* Table Cell Specifics */
.table-compact .status-cell,
.table-compact .option-cell {
    width: auto; 
    white-space: nowrap;
}

.table-compact .option-cell {
    text-align: center;
}

/* Option Container */
.option-container {
    display: inline-block;
}

/* Actions Container */
.actions-container {
    margin-top: 4px;
}

/* Client Name */
.client-name {
    margin-bottom: 1px;
}

/* Group Rows */
.group-row {
    border-left: 3px solid var(--primary-color);
}

.group-row:hover {
    background-color: rgba(13, 110, 253, 0.1) !important;
}

/* Dropdown Options */
option.group-option {
    color: var(--primary-color);
    background-color: #e7f1ff;
}

option.individual-option {
    color: var(--dark-color);
    background-color: var(--white);
}

.client-unavailable {
    opacity: 0.6;
    color: var(--gray-medium) !important;
}

.client-unavailable-option {
    color: var(--danger-color) !important;
    background-color: #f8d7da !important;
}

.client-available-option {
    color: var(--success-color) !important;
    background-color: #d1e7dd !important;
}

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.loading-overlay.show {
    opacity: 1;
    visibility: visible;
}

.loading-spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Transfer Button States */
.transfer-btn.disabled,
.change-time-btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Modal Button States */
#confirmTransfer:disabled,
#confirmChangeTime:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#confirmTransfer.checking::after,
#confirmChangeTime.checking::after {
    content: " (Verificando...)";
    font-style: italic;
}

/* ===== RESPONSIVE DAY_VIEW ===== */
/* ===== RESPONSIVE DAY_VIEW ===== */
@media (max-width: 768px) {
    /* HEADERS VISÍVEIS EM MOBILE - MANTÉM LAYOUT ORGANIZADO */
    .day-view-table thead {
        display: table-header-group;
        position: static;
        width: auto;
        height: auto;
        padding: normal;
        margin: normal;
        overflow: visible;
        clip: auto;
        white-space: normal;
        border: normal;
    }
    
    /* Headers alinhados À ESQUERDA em mobile */
    .day-view-table thead th {
        padding: 8px 4px;
        font-size: 0.8rem;
        text-align: left !important; /* ✅ ESQUERDA */
    }
    
    /* Botão Marcar alinhado À ESQUERDA */
    .day-view-mobile-layout .book-modal-btn {
        width: auto;
        min-width: 70px;
        align-self: flex-start !important; /* ✅ ESQUERDA */
        margin: 0 !important; /* ✅ REMOVER CENTRAGEM */
    }
 
    /* Client actions cell in mobile - alinhado à esquerda */
    .client-actions-cell {
        /* display: flex;
        flex-direction: column; */
        gap: 8px;
        padding: 6px 0;
        align-items: flex-start !important; /* ✅ ESQUERDA */
    }
    
    .client-actions-cell .client-name {
        color: var(--primary-dark);
        font-weight: bolder;
        padding: 1px 0 1px;
        text-align: left !important; /* ✅ ESQUERDA */
    }
    
    .client-actions-cell .actions-container {
        display: flex;
        justify-content: flex-start !important; /* ✅ ESQUERDA */
        gap: 8px;
        flex-wrap: wrap;
    }
    
    /* Garantir que todo o conteúdo da tabela fica à esquerda */
    .day-view-table td {
        text-align: left !important; /* ✅ ESQUERDA */
    }
    
    .time-cell {
        text-align: left !important; /* ✅ ESQUERDA */
    }
    
    .option-cell {
        text-align: left !important; /* ✅ ESQUERDA */
    }
    
    /* Restore zebra striping for mobile */
    .day-view-table.table-striped tbody tr {
        background-color: transparent !important;
    }
    
    .day-view-table .schedule-row:nth-of-type(odd) {
        background-color: rgba(0, 0, 0, 0.05) !important;
    }
    
    .day-view-table .schedule-row:nth-of-type(even) {
        background-color: var(--white) !important;
    }
}

@media (max-width: 576px) {
    .day-view-table.table-compact {
        font-size: 0.8rem;
    }
    
    .day-view-table .summary-badge {
        font-size: 0.7rem;
        padding: 2px 6px;
    }
}

/* ===== ACTION BUTTONS SPECIFIC STYLES mais transitados da day_view.php ===== */

/* Botões de ação na coluna de ações */
.actions-container .badge {
    margin: 1px;
    padding: 4px 8px;
    font-size: 0.75rem;
    border: 1px solid;
    border-radius: var(--border-radius);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    text-decoration: none;
}

/* Estados dos botões de ação */
.actions-container .badge:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.actions-container .badge:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* Cores específicas para botões de ação */
.actions-container .summary-badge.individual {
    color: #1659e9;
    border-color: #1659e9;
    background-color: rgba(15, 62, 163, 0.18);
}

.actions-container .summary-badge.group {
    color: #1cc8e3;
    border-color: #1cc8e3;
    background-color: rgba(28, 200, 227, 0.18);
}

.actions-container .summary-badge.available {
    color: #33cc33;
    border-color: #33cc33;
    background-color: rgba(51, 204, 51, 0.18);
}

.actions-container .summary-badge.unavailable {
    color: #520df2;
    border-color: #520df2;
    background-color: rgba(82, 13, 242, 0.18);
}

.actions-container .summary-badge.redezinho {
    color: #eb1414;
    border-color: #eb1414;
    background-color: rgba(235, 20, 20, 0.18);
}

.actions-container .summary-badge.amarelinho {
    color: #000000;
    border-color: #cccc00;
    background-color: rgba(255, 255, 0, 0.18);
}

.actions-container .summary-badge.laranjinha {
    color: #000000;
    border-color: #ff8000;
    background-color: rgba(255, 128, 0, 0.18);
}

.actions-container .summary-badge.cinzentinho {
    color: #000000;
    border-color: #6C757D;
    background-color: rgba(108, 117, 125, 0.18);
}

/* Hover states para botões de ação */
.actions-container .summary-badge.individual:hover:not(:disabled) {
    background-color: rgba(15, 62, 163, 0.25);
}

.actions-container .summary-badge.group:hover:not(:disabled) {
    background-color: rgba(28, 200, 227, 0.25);
}

.actions-container .summary-badge.available:hover:not(:disabled) {
    background-color: rgba(51, 204, 51, 0.25);
}

.actions-container .summary-badge.unavailable:hover:not(:disabled) {
    background-color: rgba(82, 13, 242, 0.25);
}

.actions-container .summary-badge.redezinho:hover:not(:disabled) {
    background-color: rgba(235, 20, 20, 0.25);
}

.actions-container .summary-badge.amarelinho:hover:not(:disabled) {
    background-color: rgba(255, 255, 0, 0.25);
}

.actions-container .summary-badge.laranjinha:hover:not(:disabled) {
    background-color: rgba(255, 128, 0, 0.25);
}

.actions-container .summary-badge.cinzentinho:hover:not(:disabled) {
    background-color: rgba(108, 117, 125, 0.25);
}

/* Botões específicos de ação */
.action-btn,
.transfer-btn,
.change-time-btn,
.change-group-time-btn,
.cancel-group-btn,
.book-modal-btn,
.toggle-availability {
    /* border: none; */
    cursor: pointer;
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: var(--border-radius);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Estados de desabilitado para botões específicos */
.action-btn:disabled,
.transfer-btn:disabled,
.change-time-btn:disabled,
.change-group-time-btn:disabled,
.cancel-group-btn:disabled,
.book-modal-btn:disabled,
.toggle-availability:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* Toggle All Day button específico */
.toggle-all-day {
    padding: 6px 12px;
    font-size: 0.8rem;
    border: 2px solid;
    border-radius: var(--border-radius-sx);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    overflow: visible !important; /* Garantir que o badge seja visível */
    position: relative;
}

.toggle-all-day:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* Botões dentro de formulários na coluna ações */
.actions-container form {
    display: inline;
    margin: 0 2px;
}

.actions-container form .badge {
    margin: 0;
}

/* Responsividade para botões de ação */
@media (max-width: 768px) {
    .actions-container .badge {
        padding: 3px 6px;
        font-size: 0.7rem;
        gap: 3px;
    }
    
    .action-btn,
    .transfer-btn,
    .change-time-btn,
    .change-group-time-btn,
    .cancel-group-btn,
    .book-modal-btn,
    .toggle-availability {
        padding: 3px 6px;
        font-size: 0.7rem;
        gap: 3px;
    }
    
    .toggle-all-day {
        padding: 4px 8px;
        font-size: 0.75rem;
    }
    
    .actions-container {
        gap: 4px;
    }
}

@media (max-width: 576px) {
    .actions-container .badge {
        padding: 2px 4px;
        font-size: 0.65rem;
    }
    
    .action-btn,
    .transfer-btn,
    .change-time-btn,
    .change-group-time-btn,
    .cancel-group-btn,
    .book-modal-btn,
    .toggle-availability {
        padding: 2px 4px;
        font-size: 0.65rem;
    }
    
    .actions-container {
        gap: 3px;
        justify-content: center;
    }
}

/* ===== TOGGLE AVAILABILITY BUTTONS FIX ===== */

/* Botões toggle-availability específicos */
.toggle-availability {
    border: 2px solid;
    border-radius: var(--border-radius);
    padding: 4px 8px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
}

/* Garantir que os summary-badge colors funcionem nos toggle buttons */
.toggle-availability.summary-badge.individual {
    color: #1659e9;
    border-color: #1659e9;
    background-color: rgba(15, 62, 163, 0.18);
}

.toggle-availability.summary-badge.group {
    color: #1cc8e3;
    border-color: #1cc8e3;
    background-color: rgba(28, 200, 227, 0.18);
}

.toggle-availability.summary-badge.available {
    color: #33cc33;
    border-color: #33cc33;
    background-color: rgba(51, 204, 51, 0.18);
}

.toggle-availability.summary-badge.unavailable {
    color: #520df2;
    border-color: #520df2;
    background-color: rgba(82, 13, 242, 0.18);
}

.toggle-availability.summary-badge.redezinho {
    color: #eb1414;
    border-color: #eb1414;
    background-color: rgba(235, 20, 20, 0.18);
}

.toggle-availability.summary-badge.amarelinho {
    color: #000000;
    border-color: #cccc00;
    background-color: rgba(255, 255, 0, 0.18);
}

.toggle-availability.summary-badge.laranjinha {
    color: #000000;
    border-color: #ff8000;
    background-color: rgba(255, 128, 0, 0.18);
}

.toggle-availability.summary-badge.cinzentinho {
    color: #000000;
    border-color: #6C757D;
    background-color: rgba(108, 117, 125, 0.18);
}

/* Hover states para toggle-availability */
.toggle-availability.summary-badge.individual:hover:not(:disabled) {
    background-color: rgba(15, 62, 163, 0.25);
    transform: translateY(-1px);
}

.toggle-availability.summary-badge.group:hover:not(:disabled) {
    background-color: rgba(28, 200, 227, 0.25);
    transform: translateY(-1px);
}

.toggle-availability.summary-badge.available:hover:not(:disabled) {
    background-color: rgba(51, 204, 51, 0.25);
    transform: translateY(-1px);
}

.toggle-availability.summary-badge.unavailable:hover:not(:disabled) {
    background-color: rgba(82, 13, 242, 0.25);
    transform: translateY(-1px);
}

.toggle-availability.summary-badge.redezinho:hover:not(:disabled) {
    background-color: rgba(235, 20, 20, 0.25);
    transform: translateY(-1px);
}

.toggle-availability.summary-badge.amarelinho:hover:not(:disabled) {
    background-color: rgba(255, 255, 0, 0.25);
    transform: translateY(-1px);
}

.toggle-availability.summary-badge.laranjinha:hover:not(:disabled) {
    background-color: rgba(255, 128, 0, 0.25);
    transform: translateY(-1px);
}

.toggle-availability.summary-badge.cinzentinho:hover:not(:disabled) {
    background-color: rgba(108, 117, 125, 0.25);
    transform: translateY(-1px);
}

/* Estados disabled para toggle buttons */
.toggle-availability:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* Badges estáticos (como "Agendado", "Passado") */
.option-cell .summary-badge.cinzentinho {
    color: #000000;
    border-color: #6C757D;
    background-color: rgba(108, 117, 125, 0.18);
    padding: 4px 8px;
    border-radius: var(--border-radius);
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 2px solid;
}

/* Badges estáticos (como "Agendado", "Passado") */
.client-actions-cell .summary-badge.cinzentinho {
    color: #000000;
    border-color: #6C757D;
    background-color: rgba(108, 117, 125, 0.18);
    padding: 4px 8px;
    border-radius: var(--border-radius);
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 2px solid;
}

/* Garantir que o botão do topo também funcione */
.toggle-all-day.summary-badge.amarelinho {
    color: #000000;
    border-color: #cccc00;
    background-color: rgba(255, 255, 0, 0.18);
    border: 2px solid;
}

.toggle-all-day.summary-badge.amarelinho:hover:not(:disabled) {
    background-color: rgba(255, 255, 0, 0.25);
    transform: translateY(-1px);
}

/* Responsividade para toggle buttons */
@media (max-width: 768px) {
    .toggle-availability {
        padding: 3px 6px;
        font-size: 0.7rem;
        gap: 3px;
    }
    
    .option-cell .summary-badge.cinzentinho {
        padding: 3px 6px;
        font-size: 0.7rem;
        gap: 3px;
    }
}

@media (max-width: 576px) {
    .toggle-availability {
        padding: 2px 4px;
        font-size: 0.65rem;
    }
    
    .option-cell .summary-badge.cinzentinho {
        padding: 2px 4px;
        font-size: 0.65rem;
    }
}
/* Badge estático "Pendente" com mesma cor do botão Confirmar */
.option-cell .summary-badge.available {
    color: #33cc33;
    border-color: #33cc33;
    background-color: rgba(51, 204, 51, 0.18);
    padding: 4px 8px;
    border-radius: var(--border-radius);
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 2px solid;
    cursor: default; /* Não é clicável */
}

/* Garantir que o badge "Pendente" não tenha hover effects */
.option-cell .summary-badge.available:hover {
    transform: none;
    box-shadow: none;
    background-color: rgba(51, 204, 51, 0.18); /* Mantém a mesma cor */
}

/* Responsividade para o badge Pendente */
@media (max-width: 768px) {
    .option-cell .summary-badge.available {
        padding: 3px 6px;
        font-size: 0.7rem;
        gap: 3px;
    }
}

@media (max-width: 576px) {
    .option-cell .summary-badge.available {
        padding: 2px 4px;
        font-size: 0.65rem;
    }
}

/* ===== DAY_VIEW SPECIFIC STYLES ===== */

/* Tabela day_view compacta */
.table-compact.day-view-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

/* Larguras específicas para day_view */
.table-compact.day-view-table th:nth-child(1),
.table-compact.day-view-table td:nth-child(1) {
    width: 60px;
    min-width: 60px;
    padding: 5px 5px;
}

.table-compact.day-view-table th:nth-child(2),
.table-compact.day-view-table td:nth-child(2) {
    width: 105px;
    min-width: 105px;
    padding: 5px 5px;
}

.table-compact.day-view-table th:nth-child(3),
.table-compact.day-view-table td:nth-child(3) {
    width: 85px;
    min-width: 85px;
    padding: 5px 5px;
    text-align: center;
}

.table-compact.day-view-table th:nth-child(4),
.table-compact.day-view-table td:nth-child(4) {
    width: auto;
    min-width: 120px;
    padding: 5px 5px;
    justify-content: center !important;
    align-content: center !important;
}

/* Time cell responsivo */
.time-cell {
    white-space: nowrap;
    font-size: 0.82rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.3;
    vertical-align: middle !important;
    
}

.time-cell .time-start::after {
    content: " - ";
    margin: 0 2px;
}

/* Mobile: time cell vertical */
@media (max-width: 768px) {
    .time-cell {
        white-space: normal;
    }
    
    .time-cell .time-start::after {
        content: "";
    }
    
    .time-cell .time-start,
    .time-cell .time-end {
        display: block;
        line-height: 1.2;
    }
    
    .time-cell .time-start {
        font-weight: 600;
    }
    
    .time-cell .time-end {
        font-size: 0.8em;
        color: var(--gray-medium);
    }
}

/* Status cell */
.status-cell {
    white-space: normal;
    font-size: 0.78rem;
    line-height: 1.3;
    vertical-align: middle !important;
}

/* Option cell */
.option-cell {
    text-align: center;
    vertical-align: middle !important;
}

/* Container de ações day_view */
.day-view-actions {
    margin-top: 3px;
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    align-items: center;
    vertical-align: middle !important;
    justify-content: center;
}

/* Mobile específico para day_view */
@media (max-width: 768px) {
    .table-compact.day-view-table {
        table-layout: auto;
    }
    
    .day-view-mobile-layout .client-actions-cell {
        display: flex;
        flex-direction: column;
        gap: 3px;
        justify-content: center !important;
    }
    
    .day-view-mobile-layout .day-view-actions {
        justify-content: flex-start;
        gap: 3px;
    }
}

/* ===== DAY_VIEW DESKTOP OPTIMIZATION - VERSÃO CORRIGIDA ===== */
@media (min-width: 769px) {
    .day-view-table {
        table-layout: fixed;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }
    
    /* DISTRIBUIÇÃO CORRIGIDA - mais equilibrada */
    .day-view-table th:nth-child(1),
    .day-view-table td:nth-child(1) {
        width: 12% !important; /* Horário */
        min-width: 100px;
        max-width: 120px;
        text-align: center;
        padding: 12px 8px !important;
    }
    
    .day-view-table th:nth-child(2),
    .day-view-table td:nth-child(2) {
        width: 25% !important; /* Estado */
        min-width: 150px;
        max-width: 250px;
        text-align: left;
        padding: 12px 10px !important;
    }
    
    .day-view-table th:nth-child(3),
    .day-view-table td:nth-child(3) {
        width: 13% !important; /* Opção */
        min-width: 100px;
        max-width: 120px;
        text-align: center;
        padding: 12px 8px !important;
    }
    
    .day-view-table th:nth-child(4),
    .day-view-table td:nth-child(4) {
        width: 50% !important; /* Cliente & Ações */
        min-width: 250px;
        text-align: left;
        padding: 12px 15px !important;
        justify-content: center !important;
        align-content: center !important;
    }
    
    /* Garantir que as células não quebram */
    .day-view-table td {
        vertical-align: top;
        word-wrap: break-word;
        overflow-wrap: break-word;
        border-bottom: 1px solid var(--gray-lighter);
        align-content: center !important;
    }
    
    /* TIME-CELL - Versão compacta para desktop */
    .time-cell {
        font-weight: 600;
        font-size: 0.85rem;
        line-height: 1.3;
        vertical-align: middle !important;
        justify-content: center !important;
    }
    
    .time-cell .time-start::after {
        content: "às";
        display: block;
        font-size: 0.7rem;
        font-weight: normal;
        color: var(--gray-medium);
        margin: 2px 0;
    }
    
    .time-cell .time-start,
    .time-cell .time-end {
        display: block;
        text-align: center;
    }
    
    .time-cell .time-start {
        color: var(--primary-color);
        font-weight: 700;
    }
    
    .time-cell .time-end {
        color: var(--gray-dark);
        font-size: 0.8rem;
    }
    
    /* STATUS-CELL - Conteúdo organizado */
    .status-cell {
        font-size: 0.8rem;
        line-height: 1.4;
    }
    
    .status-cell .status-badge {
        display: block;
        margin-bottom: 4px;
    }
    
    .status-cell .status-text {
        display: block;
        font-weight: 500;
        color: var(--dark-color);
        padding: 4px 0;
    }
    
    /* OPTION-CELL - Centralizado e compacto */
    .option-cell {
        text-align: center;
        vertical-align: middle !important;
    }
    
    .option-cell .option-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .option-cell .badge {
        margin: 0 auto;
        min-width: 80px;
        justify-content: center;
    }
    
    /* CLIENT-ACTIONS-CELL - Conteúdo organizado */
    .client-actions-cell {
        padding: 1px 1px !important;
    }
    
    .client-actions-cell .client-name {
        font-weight: 600;
        margin-bottom: 2px;
        font-size: 0.9rem;
        color: var(--primary-dark);
        line-height: 1.0;
        justify-content: center !important;
    }
    
    .client-actions-cell .group-icon {
        margin-left: 8px;
        justify-content: center !important;
    }
    
    /* ACTIONS CONTAINER - Organizado em linha */
    .day-view-actions {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        align-items: center;
    }
    
    .day-view-actions .badge {
        padding: 5px 8px;
        font-size: 0.75rem;
        min-height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* HEADERS MELHORADOS */
    .day-view-table th {
        padding: 16px 10px !important;
        text-align: center;
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        color: var(--white);
        font-weight: 600;
        border: none;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    
    .day-view-table th:nth-child(4) {
        text-align: left;
    }
    
    /* CONTAINER PRINCIPAL */
    .table-responsive .day-view-table {
        margin: 0 auto;
        max-width: 1100px;
        box-shadow: var(--shadow-md);
        border-radius: var(--border-radius-lg);
        overflow: hidden;
    }
    
    .meu-container {
        max-width: 1300px;
        margin: 85px auto 0 auto;
        padding: 0 var(--space-lg);
    }
    
    /* CAIXA TOPO OTIMIZADA */
    .caixa-topo {
        max-width: 1100px;
        margin: 0 auto 25px auto;
        padding: 20px 30px !important;
    }
}

/* ===== LARGE DESKTOP ENHANCEMENTS ===== */
@media (min-width: 992px) {
    .day-view-table th:nth-child(1),
    .day-view-table td:nth-child(1) {
        width: 10% !important;
    }
    
    .day-view-table th:nth-child(2),
    .day-view-table td:nth-child(2) {
        width: 20% !important;
    }
    
    .day-view-table th:nth-child(3),
    .day-view-table td:nth-child(3) {
        width: 10% !important;
    }
    
    .day-view-table th:nth-child(4),
    .day-view-table td:nth-child(4) {
        width: 60% !important;
        justify-content: center !important;
    }
    
    .table-responsive .day-view-table {
        max-width: 1200px;
    }
    
    .day-view-actions {
        gap: 8px;
    }
    
    .day-view-actions .badge {
        padding: 6px 10px;
        font-size: 0.8rem;
    }
}

/* ===== EXTRA LARGE SCREENS ===== */
@media (min-width: 1200px) {
    .meu-container {
        max-width: 1400px;
        padding: 0 var(--space-xl);
    }
    
    .table-responsive .day-view-table {
        max-width: 1300px;
    }
    
    .day-view-table td {
        padding: 14px 12px !important;
    }
    
    .time-cell {
        font-size: 0.9rem;
    }
    
    .client-actions-cell .client-name {
        font-size: 0.95rem;
    }
}

/* ===== SUPER LARGE SCREENS ===== */
@media (min-width: 1400px) {
    .table-responsive .day-view-table {
        max-width: 1400px;
    }
    
    .day-view-table th:nth-child(1),
    .day-view-table td:nth-child(1) {
        width: 8% !important;
    }
    
    .day-view-table th:nth-child(2),
    .day-view-table td:nth-child(2) {
        width: 18% !important;
    }
    
    .day-view-table th:nth-child(3),
    .day-view-table td:nth-child(3) {
        width: 8% !important;
    }
    
    .day-view-table th:nth-child(4),
    .day-view-table td:nth-child(4) {
        width: 66% !important;
        justify-content: center !important;
        align-content: center !important;
    }
}

/* ===== MANTER COMPATIBILIDADE MOBILE ===== */
@media (max-width: 768px) {
    .day-view-mobile-layout .client-actions-cell {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: flex-start !important;
    }
    
    .day-view-mobile-layout .day-view-actions {
        justify-content: flex-start;
        gap: 4px;
    }
    
    .day-view-mobile-layout .book-modal-btn {
        align-self: flex-start;
        margin: 0 !important;
    }
    
    /* Reset para mobile */
    .day-view-table {
        table-layout: auto !important;
    }
    
    .day-view-table th,
    .day-view-table td {
        width: auto !important;
        max-width: none !important;
    }
}

/* Garantir que todos os ícones tenham a mesma altura de linha */
.day-view-actions .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
}

.day-view-actions .badge i {
    font-size: 0.9em;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Verde mais bonito para disponível */
.bg-success-subtle {
    background-color: rgba(25, 135, 84, 0.1) !important;
}
.border-success {
    border-color: #198754 !important;
}
.list-group-item:hover {
    background-color: rgba(25, 135, 84, 0.15) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}