/* BookingSaaS Admin — Custom Styles */

body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

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

/* Sidebar active state */
.sidebar-item-active {
    background-color: rgba(37, 37, 244, 0.08);
    color: #2525f4;
}

/* Glass panel effect */
.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
}

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #dbdbe6;
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #b0b0c0;
}

/* Transcript scroll */
.transcript-scroll::-webkit-scrollbar {
    width: 4px;
}
.transcript-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.transcript-scroll::-webkit-scrollbar-thumb {
    background: #dbdbe6;
    border-radius: 10px;
}

/* Calendar grid */
.calendar-grid {
    display: grid;
    grid-template-rows: auto repeat(13, 80px);
}
.time-border {
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.staff-border {
    border-right: 1px solid rgba(0,0,0,0.05);
}
.appointment-card {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Dark mode toggle icons */
html.dark .dark-icon { display: none; }
html.dark .light-icon { display: inline; }
html:not(.dark) .dark-icon { display: inline; }
html:not(.dark) .light-icon { display: none; }

/* Settings tab active */
.settings-tab-active {
    color: #2525f4;
    border-bottom-color: #2525f4;
}

/* Drawer slide-in animation */
.drawer-overlay {
    transition: opacity 0.3s ease;
}
.drawer-panel {
    transition: transform 0.3s ease;
}
.drawer-panel.closed {
    transform: translateX(100%);
}

/* Dark mode specific overrides */
html.dark .time-border {
    border-bottom-color: rgba(255,255,255,0.05);
}
html.dark .staff-border {
    border-right-color: rgba(255,255,255,0.05);
}