/* useai/assets/css/styles.css */

/* Global styles and custom utilities not covered by Tailwind */

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

/* Apply Inter font family globally */
body {
    font-family: 'Inter', sans-serif;
    /* Ensure smooth scrolling for anchors */
    scroll-behavior: smooth;
    /* Prevent horizontal scroll issues on very small screens for content that might overflow */
    overflow-x: hidden;
}

/* Base styles for HTML elements that Tailwind might not directly style, or to provide defaults */
h1, h2, h3, h4, h5, h6 {
    @apply font-bold; /* Apply Tailwind's font-bold for all headings */
}

a {
    @apply no-underline; /* Remove underline from links by default */
}

/* Custom shadow for gradients if needed */
.drop-shadow-lg {
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.drop-shadow-2xl {
    text-shadow: 0 10px 15px rgba(0, 0, 0, 0.7);
}

/* Enhance form element focus states */
input:focus, textarea:focus, button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 194, 255, 0.5), 0 0 0 6px rgba(138, 43, 226, 0.3); /* Custom focus ring with colors */
}

/* Keyframe for subtle pulse animation */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Ensure images scale correctly within their containers */
img {
    max-width: 100%;
    height: auto;
    display: block; /* Removes extra space below images */
}

/* For rounded elements to ensure content doesn't overflow corners */
.rounded-xl {
    overflow: hidden;
}


/* Styles for the category tabs in gallery.php */
.category-tab.active {
    @apply bg-[#00C2FF] text-[#0A0A1F]; /* Active tab style */
}

/* Styles for image cards in gallery.php */
.media-item {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.media-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 194, 255, 0.2);
}

/* Specific styles for the modal content to prevent overflow */
#imageDetailModal > div {
    max-height: 90vh; /* Limit modal height */
    overflow-y: auto; /* Enable scrolling within the modal if content overflows */
}

/* Make sure the image in modal respects aspect ratio and fits */
#modalImage {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 75vh; /* Adjust based on desired modal height */
}


/* useai/assets/css/styles.css */

/* Add the following to your existing styles.css file */

/* Styles for authentication forms (login, register, forgot/reset password) */
.min-h-\[calc\(100vh-160px\)\] {
    min-height: calc(100vh - 160px); /* Adjust based on header/footer height */
}

/* General form input styling, already mostly covered by Tailwind, but ensures consistency */
/* .form-input {
    @apply w-full px-5 py-3 rounded-lg bg-[#0A0A1F] border border-[#00C2FF]/30 text-[#E0E0E0] placeholder-[#A0A0A0] focus:outline-none focus:ring-2 focus:ring-[#8A2BE2] transition duration-300;
} */

/* Message boxes for success/error/info */
.message-box {
    @apply p-4 rounded-lg shadow-md font-semibold;
}

/* For temporary messages that appear at the top of the screen */
.message-box.fixed {
    animation: fadeOut 5s forwards; /* Message fades out after 5 seconds */
}

@keyframes fadeOut {
    0% { opacity: 1; transform: translate(-50%, 0); }
    80% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, -20px); display: none; }
}


/* useai/assets/css/styles.css */

/* Add the following to your existing styles.css file */

/* --- Layout for Dashboard/My Media pages --- */
.flex.min-h-screen {
    /* Ensures the main flex container takes full viewport height, minus header/footer */
    /* Adjust as needed based on exact header/footer height */
    min-height: calc(100vh - 120px); /* Example: 60px header + 60px footer */
}

/* Sidebar Specific Styles */
aside {
    min-width: 256px; /* 64 * 4px */
    height: calc(100vh - 48px); /* Adjust based on header/footer margins */
    position: sticky;
    top: 24px; /* Adjust based on header/body padding */
    margin-left: 24px; /* Matching overall layout margin */
    /* Example: adjust max-height if scrolling issues arise with content */
    max-height: calc(100vh - 48px);
}

aside a.active {
    background-color: #00C2FF; /* Active background */
    color: #0A0A1F; /* Active text color */
}

aside a.active i {
    color: #0A0A1F; /* Active icon color */
}

/* Specific active color for visibility filter on My Media (purple) */
.filter-tab.active-purple {
    @apply bg-[#8A2BE2] text-[#0A0A1F] !important; /* Use !important to override other active states */
}


/* Adjustments for the main content area to sit next to sidebar */
.flex-grow.p-6 {
    flex-grow: 1;
}

/* User profile dropdown in dashboard/my_media header */
.group:hover .group-hover\:opacity-100 {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}
.group-hover\:scale-100 {
    transform: scale(1);
}

/* Media Item Specific Styles for Dashboard (Recent Creations) */
.recent-creation-item img {
    object-fit: cover;
}

/* My Media Page - Hover Overlay for Actions */
.my-media-item .group-hover\:opacity-100 {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.my-media-item:hover .group-hover\:opacity-100 {
    opacity: 1;
}

/* Ensure placeholder images fill the space */
img[src*="placehold.co"] {
    object-fit: cover;
}

/* Modal specific styles to ensure video/audio controls are visible */
#myMediaModalVideo, #myMediaModalAudio {
    max-width: 100%;
    max-height: 75vh; /* Adjust as needed */
    width: auto; /* Allow natural width */
}


/* useai/assets/css/styles.css */

/* Add the following to your existing styles.css file */

/* --- General Form Styles for Canvas Pages --- */
.canvas-form-container {
    @apply bg-[#0A0A1F] p-8 rounded-xl shadow-lg border border-[#00C2FF]/10;
}

.canvas-result-area {
    @apply bg-[#0A0A1F] p-8 rounded-xl shadow-lg border border-[#00C2FF]/10 flex flex-col items-center justify-center;
}

/* Custom styling for file inputs */
input[type="file"]::file-selector-button {
    @apply cursor-pointer bg-[#00C2FF] text-white py-2 px-4 rounded-full border-0 text-sm font-semibold hover:bg-[#8A2BE2] transition-colors duration-300;
}

/* Custom styling for range/slider inputs */
input[type="range"] {
    -webkit-appearance: none; /* Override default */
    appearance: none;
    background: transparent; /* Hide default track */
    cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
    background: #00C2FF; /* Base track color */
    height: 8px;
    border-radius: 4px;
}

input[type="range"]::-moz-range-track {
    background: #00C2FF;
    height: 8px;
    border-radius: 4px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default */
    appearance: none;
    margin-top: -6px; /* Center thumb vertically */
    background-color: #8A2BE2;
    border: 2px solid #E0E0E0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    transition: background-color 0.2s ease-in-out;
}

input[type="range"]::-moz-range-thumb {
    background-color: #8A2BE2;
    border: 2px solid #E0E0E0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    transition: background-color 0.2s ease-in-out;
}

input[type="range"]:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(0, 194, 255, 0.5), 0 0 0 6px rgba(138, 43, 226, 0.3);
}

input[type="range"]:focus::-moz-range-thumb {
    box-shadow: 0 0 0 3px rgba(0, 194, 255, 0.5), 0 0 0 6px rgba(138, 43, 226, 0.3);
}


/* Styling for radio buttons (especially important if using custom designs) */
/* This ensures basic visual consistency */
input[type="radio"].form-radio {
    @apply appearance-none h-5 w-5 border border-[#00C2FF]/50 rounded-full bg-transparent checked:bg-[#00C2FF] checked:border-transparent focus:outline-none focus:ring-2 focus:ring-[#8A2BE2] transition duration-200;
}

input[type="radio"].form-radio:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}


/* useai/assets/css/styles.css */

/* Add the following to your existing styles.css file */

/* --- Profile Picture Upload Preview --- */
#profilePreview {
    display: block; /* Ensure it takes its own space */
    margin: 0 auto 1.5rem auto; /* Center and add some bottom margin */
}

@media (min-width: 768px) { /* Adjust for medium screens and up */
    #profilePreview {
        margin: 0; /* Remove centering margin on larger screens */
    }
}

/* For the file input button, if you need more custom styling beyond Tailwind's `file:` utilities */
/* input[type="file"]::file-selector-button {
    background-color: var(--color-accent-primary);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    cursor: pointer;
    transition: background-color 0.2s;
}

input[type="file"]::file-selector-button:hover {
    background-color: var(--color-accent-secondary);
} */

/* Ensure the upgrade buttons on the subscription page are styled well */
.upgrade-plan-btn {
    /* Already styled by Tailwind gradients but good to have a class for specificity */
    display: block; /* Ensures button takes full width of its container */
    text-align: center;
}

/* Style for plan comparison checkmarks (if not directly covered by previous rules) */
.fa-check-circle {
    color: #00C2FF; /* Primary accent color for success checks */
}
.fa-times-circle {
    color: #ef4444; /* Red for disabled features */
}


/* useai/assets/css/styles.css */

/* Add the following to your existing styles.css file */

/* --- Admin Panel Specific Styles --- */

/* Base layout for admin pages */
.admin-sidebar-sticky {
    position: sticky;
    top: 1.5rem; /* Matches m-4 (16px) + some extra */
    height: calc(100vh - 3rem); /* Full viewport height minus top/bottom margin */
    /* On smaller screens, this might need to become a toggleable overlay */
}

/* Common card style for admin dashboard widgets */
.admin-card {
    @apply bg-[#0A0A1F] p-6 rounded-xl shadow-lg border border-[#00C2FF]/10;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 194, 255, 0.15);
}

/* Adjustments for the dashboard's main content area when sidebar is present */
.flex-grow.p-6.md\:p-10.rounded-xl.m-4.md\:m-6 {
    /* Existing styles are fine, but adding a note for context */
    /* This section is the main content wrapper next to the sidebar */
}

/* Specific text colors for admin icons/numbers for visual hierarchy */
.admin-card .text-green-400 {
    color: #4CAF50; /* A brighter green for success/positive metrics */
}
.admin-card .text-yellow-400 {
    color: #FFC107; /* A brighter yellow for warnings/pending */
}

/* If you introduce more complex tables, add styles here */
.admin-table {
    @apply w-full text-left table-auto;
}
.admin-table th, .admin-table td {
    @apply px-4 py-3;
}
.admin-table th {
    @apply bg-[#00C2FF] text-[#0A0A1F] font-bold uppercase text-sm rounded-t-lg;
}
.admin-table tr:nth-child(even) {
    @apply bg-[#1A1A3A];
}
.admin-table tr:nth-child(odd) {
    @apply bg-[#0A0A1F];
}
.admin-table tr:hover {
    @apply bg-[#00C2FF]/20;
}
.admin-table td {
    @apply border-b border-[#00C2FF]/10;
}



/* useai/assets/css/styles.css */

/* Add the following to your existing styles.css file */

/* --- Admin Panel Specific Styles --- */

/* Base layout for admin pages */
.admin-sidebar-sticky {
    position: sticky;
    top: 1.5rem; /* Matches m-4 (16px) + some extra */
    height: calc(100vh - 3rem); /* Full viewport height minus top/bottom margin */
    /* On smaller screens, this might need to become a toggleable overlay */
}

/* Common card style for admin dashboard widgets */
.admin-card {
    @apply bg-[#0A0A1F] p-6 rounded-xl shadow-lg border border-[#00C2FF]/10;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 194, 255, 0.15);
}

/* Adjustments for the dashboard's main content area when sidebar is present */
.flex-grow.p-6.md\:p-10.rounded-xl.m-4.md\:m-6 {
    /* Existing styles are fine, but adding a note for context */
    /* This section is the main content wrapper next to the sidebar */
}

/* Specific text colors for admin icons/numbers for visual hierarchy */
.admin-card .text-green-500 { /* Changed from green-400 to 500 for consistency with Tailwind defaults for success */
    color: #22c55e;
}
.admin-card .text-yellow-500 { /* Changed from yellow-400 to 500 */
    color: #eab308;
}
.admin-card .text-red-500 {
    color: #ef4444;
}

/* Admin Table Styles */
.admin-table {
    @apply w-full text-left table-auto border-collapse; /* Added border-collapse */
}
.admin-table th, .admin-table td {
    @apply px-4 py-3;
}
.admin-table th {
    @apply bg-[#00C2FF] text-[#0A0A1F] font-bold uppercase text-sm;
}
.admin-table thead th:first-child {
    @apply rounded-tl-lg;
}
.admin-table thead th:last-child {
    @apply rounded-tr-lg;
}
.admin-table tbody tr:nth-child(even) {
    @apply bg-[#1A1A3A];
}
.admin-table tbody tr:nth-child(odd) {
    @apply bg-[#0A0A1F];
}
.admin-table tbody tr:hover {
    @apply bg-[#00C2FF]/20;
}
.admin-table td {
    @apply border-b border-[#00C2FF]/10;
}
.admin-table tbody tr:last-child td {
    @apply border-b-0; /* Remove bottom border for last row */
}

/* Admin Form Inputs */
.admin-input {
    @apply w-full px-5 py-3 rounded-lg bg-[#0A0A1F] border border-[#00C2FF]/30 text-[#E0E0E0] placeholder-[#A0A0A0] focus:outline-none focus:ring-2 focus:ring-[#8A2BE2] transition duration-300;
}
.admin-select {
    @apply w-full px-5 py-3 rounded-lg bg-[#0A0A1F] border border-[#00C2FF]/30 text-[#E0E0E0] focus:outline-none focus:ring-2 focus:ring-[#8A2BE2] transition duration-300;
}

/* Checkbox specific overrides if needed (Tailwind's form-checkbox class should handle most) */
.form-checkbox {
    @apply appearance-none h-5 w-5 border border-[#00C2FF]/50 rounded-md bg-transparent checked:bg-[#00C2FF] checked:border-transparent focus:outline-none focus:ring-2 focus:ring-[#8A2BE2] transition duration-200;
}

.form-checkbox:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

/* Basic styling for the Prose class for static pages (if you use it) */
.prose {
    color: var(--text-light-gray);
}
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    color: var(--text-white);
}
.prose a {
    color: var(--accent-cyan);
}
.prose ol, .prose ul {
    list-style-type: disc; /* Or decimal for ol */
    margin-left: 1.5em;
}
.prose li {
    margin-bottom: 0.5em;
}

/* Specific styling for the ad banner placeholder */
.ad-banner {
    @apply bg-gray-900 text-gray-400 text-center py-4 px-2 rounded-xl shadow-lg border border-gray-700/50 mt-8;
}
.ad-banner strong {
    @apply text-white;
}



/* useai/assets/css/styles.css */

/* Add the following to your existing styles.css file */

/* --- Admin Panel Specific Styles (from previous turns, consolidated) --- */

/* Base layout for admin pages */
.admin-sidebar-sticky {
    position: sticky;
    top: 1.5rem; /* Matches m-4 (16px) + some extra */
    height: calc(100vh - 3rem); /* Full viewport height minus top/bottom margin */
    /* On smaller screens, this might need to become a toggleable overlay */
}

/* Common card style for admin dashboard widgets and content sections */
.admin-card {
    @apply bg-[#0A0A1F] p-6 rounded-xl shadow-lg border border-[#00C2FF]/10;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 194, 255, 0.15);
}

/* Adjustments for the dashboard's main content area when sidebar is present */
.flex-grow.p-6.md\:p-10.rounded-xl.m-4.md\:m-6 {
    /* Existing styles are fine, but adding a note for context */
    /* This section is the main content wrapper next to the sidebar */
}

/* Specific text colors for admin icons/numbers for visual hierarchy */
.admin-card .text-green-400,
.text-green-500 { /* Applied to check-circle for positive status */
    color: #4CAF50; /* A brighter green for success/positive metrics */
}
.admin-card .text-yellow-400,
.bg-yellow-600 { /* For 'Unlimited' plan or 'Unread' messages */
    color: #FFC107; /* A brighter yellow for warnings/pending */
    background-color: #f59e0b; /* Tailwind yellow-600 for bg */
}
.text-red-500 { /* For times-circle for negative status */
    color: #ef4444; /* Tailwind red-500 */
}

/* --- Table Specific Styles (from previous turns, consolidated) --- */
.admin-table {
    @apply w-full text-left table-auto;
    border-collapse: collapse; /* Ensure borders are not doubled */
}
.admin-table th, .admin-table td {
    @apply px-4 py-3;
    border-bottom: 1px solid rgba(0, 194, 255, 0.1); /* Lighter border for rows */
}
.admin-table th {
    @apply bg-[#00C2FF] text-[#0A0A1F] font-bold uppercase text-sm rounded-t-lg;
    border-bottom: 2px solid rgba(0, 194, 255, 0.3); /* Stronger border for header */
}
.admin-table tr:nth-child(even) {
    @apply bg-[#1A1A3A];
}
.admin-table tr:nth-child(odd) {
    @apply bg-[#0A0A1F];
}
.admin-table tr:hover {
    @apply bg-[#00C2FF]/20;
}
.admin-table td {
    /* Keeping existing style, ensures horizontal borders */
}

/* Ensure video/audio players fit in table cell (for media.php) */
.admin-table video, .admin-table audio {
    max-width: 100%;
    height: auto;
    display: block; /* Remove extra space below inline elements */
    margin: 0 auto; /* Center in cell if needed */
}
.admin-table video {
    max-height: 80px; /* Limit height for video previews in table */
}

/* Style for visibility pills in table (for media.php) */
.bg-green-600 {
    background-color: #22c55e; /* Tailwind green-600 */
}
.bg-orange-600 {
    background-color: #f97316; /* Tailwind orange-600 */
}

/* Specific styling for the checkbox in various modals */
input[type="checkbox"].form-checkbox {
    @apply appearance-none h-5 w-5 border border-[#00C2FF]/50 rounded bg-transparent checked:bg-[#00C2FF] checked:border-transparent focus:outline-none focus:ring-2 focus:ring-[#8A2BE2] transition duration-200;
}

input[type="checkbox"].form-checkbox:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

/* Additional colors for access levels in API integrations table */
.bg-gray-600 { background-color: #4b5563; } /* Tailwind gray-600 */
.bg-blue-600 { background-color: #2563eb; } /* Tailwind blue-600 */
.bg-purple-600 { background-color: #9333ea; } /* Tailwind purple-600 */
/* yellow-600 is already defined */

/* For support messages unread status */
.message-row {
    transition: background-color 0.2s ease;
}
.message-row.font-bold {
    color: #E0E0E0; /* Ensure unread messages stand out */
}



/* useai/assets/css/styles.css */

/* --- General Form Elements & Buttons (consolidated) --- */
/* (Ensure these are present or updated in your existing CSS) */

.form-input {
    @apply w-full px-5 py-3 rounded-lg bg-[#0A0A1F] border border-[#00C2FF]/30 text-[#E0E0E0] placeholder-[#A0A0A0] focus:outline-none focus:ring-2 focus:ring-[#8A2BE2] transition duration-300;
}

.primary-button {
    @apply w-full px-6 py-3 bg-gradient-to-r from-[#00C2FF] to-[#8A2BE2] text-white font-bold rounded-full shadow-lg hover:shadow-xl transition duration-300 transform hover:-translate-y-1;
}

.secondary-button {
    @apply px-4 py-2 bg-[#8A2BE2] hover:bg-[#00C2FF] text-white rounded-lg text-sm transition duration-300;
}

.danger-button {
    @apply px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg text-sm transition duration-300;
}

/* --- Message Box Styles (from previous turns, consolidated) --- */
.message-box {
    animation: fadeOut 8s forwards; /* Adjust duration as needed */
    position: relative; /* Ensure z-index works correctly */
    z-index: 100; /* Above most content */
}

/* Animation for fading out messages */
@keyframes fadeOut {
    0% { opacity: 1; transform: translateY(0); }
    80% { opacity: 1; transform: translateY(0); } /* Stay visible for most of the duration */
    100% { opacity: 0; transform: translateY(-20px); display: none; }
}

/* --- Admin Panel Specific Styles (from previous turns, consolidated) --- */

.admin-sidebar-sticky {
    position: sticky;
    top: 1.5rem;
    height: calc(100vh - 3rem);
}

.admin-card {
    @apply bg-[#0A0A1F] p-6 rounded-xl shadow-lg border border-[#00C2FF]/10;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 194, 255, 0.15);
}

.admin-table {
    @apply w-full text-left table-auto;
    border-collapse: collapse;
}
.admin-table th, .admin-table td {
    @apply px-4 py-3;
    border-bottom: 1px solid rgba(0, 194, 255, 0.1);
}
.admin-table th {
    @apply bg-[#00C2FF] text-[#0A0A1F] font-bold uppercase text-sm rounded-t-lg;
    border-bottom: 2px solid rgba(0, 194, 255, 0.3);
}
.admin-table tr:nth-child(even) {
    @apply bg-[#1A1A3A];
}
.admin-table tr:nth-child(odd) {
    @apply bg-[#0A0A1F];
}
.admin-table tr:hover {
    @apply bg-[#00C2FF]/20;
}

.admin-table video, .admin-table audio {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.admin-table video {
    max-height: 80px;
}

/* Status / Pill colors */
.bg-green-600 { background-color: #22c55e; } /* Tailwind green-600 */
.bg-orange-600 { background-color: #f97316; } /* Tailwind orange-600 */
.bg-gray-600 { background-color: #4b5563; } /* Tailwind gray-600 */
.bg-blue-600 { background-color: #2563eb; } /* Tailwind blue-600 */
.bg-purple-600 { background-color: #9333ea; } /* Tailwind purple-600 */
.bg-yellow-600 { background-color: #f59e0b; } /* Tailwind yellow-600 */

.text-green-500 { color: #22c55e; } /* Tailwind green-500 */
.text-red-500 { color: #ef4444; } /* Tailwind red-500 */
.text-yellow-400 { color: #FFC107; } /* A brighter yellow */

/* Checkbox styles */
input[type="checkbox"].form-checkbox {
    @apply appearance-none h-5 w-5 border border-[#00C2FF]/50 rounded bg-transparent checked:bg-[#00C2FF] checked:border-transparent focus:ring-2 focus:ring-[#8A2BE2] transition duration-200;
}
input[type="checkbox"].form-checkbox:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

/* For unread support messages */
.message-row {
    transition: background-color 0.2s ease;
}
.message-row.font-bold {
    color: #E0E0E0; /* Ensure unread messages stand out */
}

/* For input focus styles (applied generally) */
input:focus,
textarea:focus,
select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.5); /* Blue-violet focus ring */
    border-color: transparent; /* Remove default border color on focus */
}



/* useai/assets/css/styles.css */

/* Add the following to your existing styles.css file */

/* --- Sidebar Specific Styles (Consolidated and Adjusted for Mobile) --- */

/* Base style for both sidebars */
.admin-sidebar-sticky,
.user-sidebar-sticky {
    position: fixed; /* Use fixed for mobile overlay behavior */
    top: 0;
    left: 0;
    width: 64%; /* Adjust width for mobile if needed, e.g., w-64 is 16rem */
    max-width: 256px; /* Max width for sidebars */
    height: 100vh; /* Full height */
    background-color: #0A0A1F;
    color: #E0E0E0;
    padding: 1.5rem; /* p-6 */
    display: flex;
    flex-direction: column;
    z-index: 50; /* Ensure sidebar is above main content */
    transform: translateX(-100%); /* Hidden by default on mobile */
    transition: transform 0.3s ease-in-out;
    box-shadow: 0 0 20px rgba(0, 194, 255, 0.3); /* Subtle shadow when open */
}

/* Specific to large screens (lg:breakpoint) */
@media (min-width: 1024px) { /* Equivalent to Tailwind's 'lg' breakpoint */
    .admin-sidebar-sticky,
    .user-sidebar-sticky {
        position: sticky; /* Sticky on large screens */
        top: 1.5rem; /* Matches m-4 (16px) + some extra */
        height: calc(100vh - 3rem); /* Full viewport height minus top/bottom margin */
        transform: translateX(0%); /* Always visible on large screens */
        box-shadow: none; /* No shadow when static */
        width: 16rem; /* Tailwind w-64 */
        flex-shrink: 0; /* Prevents it from shrinking */
    }
}

/* Sidebar overlay for mobile */
#adminSidebarOverlay,
#userSidebarOverlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7); /* Dark semi-transparent overlay */
    z-index: 40; /* Behind sidebar but above main content */
}

/* Ensure body doesn't scroll when sidebar is open */
.overflow-hidden-when-sidebar-open {
    overflow: hidden;
}

/* Mobile Toggle Button (Admin) */
#adminMobileSidebarToggle,
#userMobileSidebarToggle {
    display: block; /* Show on small screens */
    position: fixed;
    top: 1rem; /* Adjust as needed */
    left: 1rem; /* Adjust as needed */
    z-index: 50; /* Above regular content, below open sidebar */
}

@media (min-width: 1024px) {
    #adminMobileSidebarToggle,
    #userMobileSidebarToggle {
        display: none; /* Hide on large screens */
    }
}

/* Close button inside sidebar (for mobile) */
#closeAdminSidebarBtn,
#closeUserSidebarBtn {
    display: block; /* Show on small screens */
}

@media (min-width: 1024px) {
    #closeAdminSidebarBtn,
    #closeUserSidebarBtn {
        display: none; /* Hide on large screens */
    }
}