/* === ClienteHub Clínicas — Design System CSS === */

/* Material Symbols */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Brand Gradient — Medical Teal/Blue */
.vitality-gradient {
    background: linear-gradient(135deg, #0d7377 0%, #14919b 100%);
}

/* Glass Panel */
.glass-panel {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
}

.glass-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
}

/* Ghost Border */
.ghost-border {
    outline: 1px solid rgba(183, 201, 199, 0.15);
}

/* Nav active state — Teal */
.nav-item.active {
    background-color: #e0f2f1;
    color: #004d40;
    border-radius: 0.5rem;
}
.nav-item.active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Page transitions */
#app-content {
    animation: fadeIn 0.25s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Toast animations */
.toast {
    animation: slideInRight 0.3s ease-out;
}
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(100px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Modal animations */
#modal-overlay.show {
    display: flex !important;
    animation: fadeInModal 0.2s ease-out;
}
@keyframes fadeInModal {
    from { opacity: 0; }
    to { opacity: 1; }
}
#modal-overlay.show #modal-content {
    animation: slideUp 0.25s ease-out;
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Scrollbar — Teal */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #b2dfdb; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #80cbc4; }

/* Loading spinner — Teal */
.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(13, 115, 119, 0.2);
    border-top-color: #0d7377;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Status badge */
.badge-active { background: #e0f2f1; color: #004d40; }
.badge-prospect { background: #fce4ec; color: #880e4f; }
.badge-inactive { background: #e1e3e1; color: #41493b; }

/* Pulse for live indicators */
.pulse-live {
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Slide-down for bulk actions bar */
.animate-slide-down {
    animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Skeleton animation */
.animate-pulse {
    animation: skeletonPulse 1.5s ease-in-out infinite;
}
@keyframes skeletonPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ========================================
   RESPONSIVE MOBILE LAYOUT
   ======================================== */

/* Bottom Nav active state — Teal */
.bottom-nav-item.active {
    color: #0d7377;
}
.bottom-nav-item.active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}

/* Sidebar overlay show state */
#sidebar-overlay.show {
    display: block !important;
    opacity: 1;
}

/* Mobile-specific styles */
@media (max-width: 767px) {
    #sidebar.open {
        transform: translateX(0) !important;
    }

    .font-headline.text-3xl {
        font-size: 1.35rem;
        line-height: 1.3;
    }
    .font-headline.text-5xl,
    .text-5xl {
        font-size: 2rem;
    }
    .text-2xl {
        font-size: 1.25rem;
    }

    #app-content {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .flex.items-center.justify-between.flex-wrap {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.75rem;
    }

    .space-y-8.flex-1.flex.overflow-hidden {
        flex-direction: column !important;
    }
    .space-y-8.flex-1.flex.overflow-hidden > aside {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 1.5rem;
    }
    #schedule-grid {
        min-width: 700px;
    }
    .bg-surface-container-lowest.rounded-3xl {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .grid.grid-cols-8.border-b {
        min-width: 700px;
    }

    .inv-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .inv-table-wrap table {
        min-width: 580px;
    }

    #modal-content {
        margin: 0.5rem !important;
        max-height: 92vh;
        overflow-y: auto;
    }
    #modal-content .p-8 {
        padding: 1.25rem;
    }
    #modal-content .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    #modal-content .grid.grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
    #modal-content .grid.grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    #bulk-bar {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }
    #bulk-bar > div:last-child {
        flex-wrap: wrap;
        gap: 0.375rem;
    }

    #fab-container {
        bottom: 5rem !important;
    }

    .grid.grid-cols-2.gap-4,
    .grid.grid-cols-2.gap-6 {
        grid-template-columns: 1fr !important;
    }
    .grid.grid-cols-3.gap-4 {
        grid-template-columns: 1fr !important;
    }

    .flex.items-center.gap-6.mb-6 {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .flex.items-center.gap-3:has(#set-booking-slug) {
        flex-direction: column;
    }
    [data-flex-day] {
        flex-wrap: wrap;
        gap: 0.5rem !important;
    }
    [data-flex-day] input[type="time"] {
        width: 5.5rem !important;
        flex-shrink: 0;
    }
    #lunch-fields {
        flex-wrap: wrap;
    }

    .mobile-grid-2x2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .flex.gap-5.group {
        gap: 0.75rem;
    }
    .flex.flex-col.items-center.gap-1.shrink-0 {
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .inv-hide-mobile {
        display: none !important;
    }

    body {
        overflow-x: hidden;
    }
    .mobile-full-width {
        max-width: 100%;
    }
}