/* public/stylesheet.css */

/* Target the primary theme variables using HSL values */
:root {
    /* 221 83% 53% is a vibrant blue */
    --primary: 221 83% 53% !important; 
    --primary-foreground: 210 40% 98% !important; /* White/Light text */
    
    /* Fallbacks for older version variables */
    --primary-main: #1d4ed8 !important;   
    --primary-light: #3b82f6 !important;  
    --primary-dark: #1e3a8a !important;   
}

/* Force override on the login button if it uses Material UI selectors */
.MuiButton-containedPrimary {
    background-color: #1d4ed8 !important;
}
.MuiButton-containedPrimary:hover {
    background-color: #1e3a8a !important;
}

/* Force override for newer Shadcn-based Tailwind login components */
button[type="submit"], .bg-primary {
    background-color: hsl(221 83% 53%) !important;
    color: hsl(210 40% 98%) !important;
}

/* Target standard input and textarea focus outlines */
input:focus, 
textarea:focus,
input:focus-visible,
textarea:focus-visible {    
    outline: none !important;
    box-shadow: none !important;
}

/* Target Chainlit's Tailwind focus ring utilities */
.focus\:border-primary:focus {
    border-color: hsl(221 83% 53%) !important;
}

.focus\:ring-primary:focus {
    --tw-ring-color: hsl(221 83% 53%) !important;
    box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
}

/* Target Material UI input focus states (used in older/login variants) */
.Mui-focused .MuiOutlinedInput-notchedOutline {
    border-color: #1d4ed8 !important;
    border-width: 2px !important;
}

.MuiFormLabel-root.Mui-focused {
    color: #1d4ed8 !important;
}
/* Style the banner to be sticky at the top of its parent container */
.my-custom-banner {
    background-color: #0080ff;
    padding: 10px;
    text-align: center;
    font-size: small;
    color: white;
    position: fixed; /* The magic property */
    top: 0; /* Pins the banner to the top of its container */
    z-index: 10; /* Ensures it stays on top of the messages */
    width: 48%; /* Take full width up to max-width */
    
    /* Center the fixed element horizontally */
    left: 50%; /* Start at the center of the viewport */
    transform: translateX(-50%); /* Shift it left by half of its own width */
}
/* Custom background color for the send button 
.flex.items-center.gap-1 {
  background-color: #0080ff; 
}
*/