/* TrackMed Professional Dashboard Styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --color-primary: #1b4680;
    --color-secondary: #95b5df;
    --color-background: #f9fafb;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    background-color: var(--color-background);
    color: #1f2937;
}

/* Utility Classes */
.text-primary {
    color: var(--color-primary);
}

.bg-primary {
    background-color: var(--color-primary);
}

.bg-gradient-primary {
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
}

.border-primary {
    border-color: var(--color-primary);
}

/* Note: Tailwind CSS is loaded via CDN in the layout files */

/* Custom scrollbar for better aesthetics */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Modal scrollbar - always visible */
.modal-scroll {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

.modal-scroll::-webkit-scrollbar {
    width: 10px;
}

.modal-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.modal-scroll::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.modal-scroll::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Modal content scrollbar */
.modal-content-scroll {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

.modal-content-scroll::-webkit-scrollbar {
    width: 8px;
}

.modal-content-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.modal-content-scroll::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.modal-content-scroll::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Message chat scrollbar - always visible */
.message-chat-scroll {
    overflow-y: scroll !important;
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

.message-chat-scroll::-webkit-scrollbar {
    width: 8px;
}

.message-chat-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.message-chat-scroll::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.message-chat-scroll::-webkit-scrollbar-thumb:hover {
    background: #555;
}