/* === Cliente Hub Odonto — Design System CSS === */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap');

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

/* Brand Gradient — Odonto Blue → Green */
.vitality-gradient {
    background: linear-gradient(135deg, #005691 0%, #0077b6 50%, #4CAF50 100%);
}
.vitality-gradient-subtle {
    background: linear-gradient(135deg, rgba(0,86,145,0.08) 0%, rgba(76,175,80,0.08) 100%);
}

/* Glass Panel */
.glass-panel {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.glass-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Ghost Border */
.ghost-border {
    outline: 1px solid rgba(0, 86, 145, 0.08);
}

/* Nav active state — Odonto Blue */
.nav-item.active {
    background-color: #E3F2FD;
    color: #005691;
    border-radius: 0.5rem;
    border-left: 3px solid #005691;
}
.nav-item.active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    color: #005691;
}

/* Page transitions */
#app-content {
    animation: fadeIn 0.3s 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 — Odonto Blue */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #90CAF9; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #64B5F6; }

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

/* Status badges */
.badge-active { background: #E8F5E9; color: #2E7D32; }
.badge-prospect { background: #E3F2FD; color: #005691; }
.badge-inactive { background: #ECEFF1; color: #546E7A; }
.badge-urgent { background: #FFEBEE; color: #C62828; }
.badge-treatment { background: #FFF3E0; color: #E65100; }

/* 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; }
}

/* ========================================
   ODONTOGRAMA — SVG Styles
   ======================================== */

.odontogram-container {
    background: #FFFFFF;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 4px 24px rgba(0,86,145,0.06);
    border: 1px solid rgba(0,86,145,0.08);
}

/* Dente SVG */
.tooth-group {
    cursor: pointer;
    transition: all 0.2s ease;
}
.tooth-group:hover {
    filter: brightness(0.95);
    transform: scale(1.05);
}
.tooth-group.selected {
    filter: drop-shadow(0 0 6px rgba(0,86,145,0.5));
}

/* Faces do dente */
.tooth-face {
    stroke: #B0BEC5;
    stroke-width: 1;
    transition: fill 0.2s ease;
    cursor: pointer;
}
.tooth-face:hover {
    stroke: #005691;
    stroke-width: 2;
}

/* Cores por condição */
.face-healthy    { fill: #E8F5E9; }
.face-caries     { fill: #EF5350; }
.face-restored   { fill: #42A5F5; }
.face-canal      { fill: #FFA726; }
.face-extraction { fill: #78909C; }
.face-implant    { fill: #8D6E63; }
.face-crown      { fill: #AB47BC; }
.face-missing    { fill: #ECEFF1; stroke-dasharray: 4 2; }
.face-planned    { fill: #FFF9C4; stroke: #F9A825; stroke-dasharray: 3 2; }

/* Número do dente */
.tooth-number {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    fill: #546E7A;
    text-anchor: middle;
    pointer-events: none;
    user-select: none;
}

/* Separador de arcadas */
.arcade-divider {
    stroke: #B0BEC5;
    stroke-width: 1;
    stroke-dasharray: 6 3;
}

/* Legenda do odontograma */
.odonto-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem;
    background: #F4F7F6;
    border-radius: 0.75rem;
    margin-top: 1rem;
}
.odonto-legend-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: #546E7A;
    font-weight: 500;
}
.odonto-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.1);
}

/* Painel lateral do dente */
.tooth-panel {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    height: 100vh;
    background: #FFFFFF;
    box-shadow: -8px 0 32px rgba(0,0,0,0.12);
    z-index: 60;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
}
.tooth-panel.open {
    right: 0;
}
.tooth-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 55;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.tooth-panel-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

/* Toggle dentição */
.dentition-toggle {
    display: flex;
    background: #F4F7F6;
    border-radius: 0.75rem;
    padding: 4px;
    gap: 4px;
}
.dentition-toggle button {
    flex: 1;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #546E7A;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}
.dentition-toggle button.active {
    background: #005691;
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(0,86,145,0.25);
}

/* ========================================
   PRONTUÁRIO ELETRÔNICO
   ======================================== */

.clinical-note-card {
    border-left: 3px solid #005691;
    background: #FFFFFF;
    padding: 1rem 1.25rem;
    border-radius: 0 0.75rem 0.75rem 0;
    margin-bottom: 0.75rem;
    transition: box-shadow 0.2s ease;
}
.clinical-note-card:hover {
    box-shadow: 0 4px 16px rgba(0,86,145,0.08);
}

.anamnesis-alert {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
}
.anamnesis-alert.danger {
    background: #FFEBEE;
    color: #C62828;
    border: 1px solid #FFCDD2;
}
.anamnesis-alert.warning {
    background: #FFF8E1;
    color: #E65100;
    border: 1px solid #FFE082;
}
.anamnesis-alert.info {
    background: #E3F2FD;
    color: #005691;
    border: 1px solid #90CAF9;
}

/* Treatment plan status */
.treatment-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.treatment-pending   { background: #FFF3E0; color: #E65100; }
.treatment-approved  { background: #E3F2FD; color: #005691; }
.treatment-progress  { background: #FFF9C4; color: #F57F17; }
.treatment-completed { background: #E8F5E9; color: #2E7D32; }

/* ========================================
   AGENDA — Cores por Procedimento
   ======================================== */

.appt-consulta     { border-left: 4px solid #005691; background: rgba(0,86,145,0.04); }
.appt-limpeza      { border-left: 4px solid #4CAF50; background: rgba(76,175,80,0.04); }
.appt-restauracao  { border-left: 4px solid #FFA726; background: rgba(255,167,38,0.04); }
.appt-emergencia   { border-left: 4px solid #EF5350; background: rgba(239,83,80,0.04); }
.appt-cirurgia     { border-left: 4px solid #AB47BC; background: rgba(171,71,188,0.04); }
.appt-canal        { border-left: 4px solid #8D6E63; background: rgba(141,110,99,0.04); }
.appt-retorno      { border-left: 4px solid #78909C; background: rgba(120,144,156,0.04); }
.appt-protese      { border-left: 4px solid #26A69A; background: rgba(38,166,154,0.04); }

/* ========================================
   BOTTOM NAV — Mobile
   ======================================== */

.bottom-nav-item.active {
    color: #005691;
}
.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;
}

/* ========================================
   BOLSA DO ODONTO — Styles
   ======================================== */

.animate-fadeIn {
    animation: fadeIn 0.4s ease-out;
}
#bolsa-content {
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

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

@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%;
    }
    /* Odontograma mobile */
    .odontogram-container {
        padding: 1rem;
        overflow-x: auto;
    }
    .tooth-panel {
        width: 100%;
        right: -100%;
    }
    .odonto-legend {
        gap: 0.5rem;
    }
}