/* styles.css */

/* Import Tailwind base, components, and utilities */
/* If you are using a CDN, this file might be minimal or not needed,
   as Tailwind classes are applied directly in the HTML.
   However, you can add custom global styles or component styles here.
*/

/* Example: Custom font import if not using Google Fonts CDN in HTML */
/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); */

body {
    /* font-family: 'Inter', sans-serif; /* Applied via Tailwind's font-inter class */
    /* background-color: #f1f5f9; /* Applied via Tailwind's bg-slate-100 */
    /* color: #334155; /* Applied via Tailwind's text-slate-800 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Custom scrollbar for a more polished look (optional) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9; /* slate-100 */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: #94a3b8; /* slate-400 */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #64748b; /* slate-500 */
}

/* Additional custom styles can go here if needed */
/* For example, if you need to style something not easily achievable with Tailwind utility classes */

.min-h-screen {
    min-height: 100vh;
}

/* Ensure Chart.js canvas is responsive */
#drinksChart {
    max-width: 100%;
    height: auto !important; /* Override Chart.js inline style if it causes issues */
}

/* Add a little more visual separation or specific styling if desired */
/* header {
    border-bottom: 1px solid #e2e8f0; /* slate-200 */
/* } */

/* footer {
    border-top: 1px solid #e2e8f0; /* slate-200 */
/* } */

/* Styles for loading messages to ensure they are centered and visible */
#chartLoadingMessage, #statsLoadingMessage {
    padding: 2rem; /* More padding for visibility */
    font-size: 1.125rem; /* text-lg */
    color: #64748b; /* slate-500 */
}

/* Hide elements using 'hidden' class (Tailwind provides this) */
.hidden {
    display: none;
}