@import url('lib/tailwindcss/dist/preflight.css');

html {
    min-height: 100vh;
}

html, .main-background-gradient {
    background: linear-gradient(to bottom, rgb(225 227 233), #f4f4f4 25rem);
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

    html::after {
        content: '';
        background-image: linear-gradient(to right, #3a4ed5, #3acfd5 15%, #d53abf 85%, red);
        width: 100%;
        height: 2px;
        position: fixed;
        top: 0;
    }

h1 {
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: 600;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.btn-default {
    display: flex;
    padding: 0.25rem 0.75rem;
    gap: 0.25rem;
    align-items: center;
    border-radius: 0.25rem;
    border: 1px solid #9CA3AF;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    background-color: #D1D5DB;
}

    .btn-default:hover {
        background-color: #E5E7EB;
    }

.btn-subtle {
    display: flex;
    padding: 0.25rem 0.75rem;
    gap: 0.25rem;
    align-items: center;
    border-radius: 0.25rem;
    border: 1px solid #D1D5DB;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

    .btn-subtle:hover {
        border-color: #93C5FD;
        background-color: #DBEAFE;
    }

.page-width {
    max-width: 1024px;
    margin: auto;
}

.admin-login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    padding: 20px;
    max-width: 400px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

    .admin-login-container h3 {
        margin-bottom: 20px;
        font-size: 1.5rem;
        color: #333;
    }

.admin-sidebar {
/*    min-width: 220px;
    max-width: 240px;
    width: 220px;*/
    flex-shrink: 0;
}

.d-flex {
    display: flex !important;
    flex-direction: row;
    align-items: flex-start;
}

.login-form .form-group {
    margin-bottom: 15px;
}

.login-form .form-control {
    width: 100%;
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.login-form .btn-primary {
    width: 100%;
    padding: 10px;
    font-size: 1rem;
    background-color: #007bff;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
}

    .login-form .btn-primary:hover {
        background-color: #0056b3;
    }

.text-danger {
    color: #dc3545;
    margin-bottom: 15px;
}

.form-group .form-control {
    width: 100% !important;
    max-width: none !important;
}

.edit-form-container {
    width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.75rem;
}

.textarea-container {
    padding-top: 0.75rem;
    padding-bottom: 1.5rem;
    border-top-width: 1px;
    background-color: #F3F4F6;
    border-color: #E5E7EB;
}

/* Admin Menu Specific Styles (add to your existing app.css) */

.admin-menu-container {
    min-width: 220px;
    max-width: 240px;
    /* Default for desktop: visible and flex column */
    display: flex;
    flex-direction: column;
    transition: left 0.3s ease-in-out;
    background: #f8f9fa; /* Tailwind equivalent: bg-gray-50 or bg-white with a slight tint */
    z-index: 1051;
}

/* Mobile specific styles for the sidebar */
@media (max-width: 767.98px) {
    .admin-menu-container {
        position: fixed;
        top: 0;
        left: -260px; /* Hidden off-screen by default on mobile */
        height: 100vh;
        width: 220px;
        box-shadow: 2px 0 8px rgba(0,0,0,0.1);
        /* Ensure it's block/flex on mobile when hidden, so transition works */
        display: flex;
        flex-direction: column;
    }

        .admin-menu-container.show-menu {
            left: 0; /* Slide in when 'show-menu' class is present */
        }
}

/* Active NavLink styling */
.admin-link.active-link {
    background-color: #EEF2FF; /* A light indigo background for active state */
    color: #4F46E5; /* A darker indigo text color */
    font-weight: 600; /* Make it slightly bolder */
}

.chat-message-item-wrapper {
    position: relative;
}

.chat-answer-thumbs {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.25rem;
    margin-bottom: 1rem;
}

.thumb-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    padding: 0;
    opacity: 0.7;
    transition: opacity 0.2s;
}

    .thumb-btn:hover {
        opacity: 1;
    }
.thumb-selected {
    color: #4F46E5; /* Indigo or your highlight color */
    font-weight: bold;
    opacity: 1 !important;
    background: #EEF2FF;
    border-radius: 50%;
}
.modal.show.d-block {
    display: block;
    background: rgba(0,0,0,0.3);
}

/* Custom styling for rounded corners on the modal content if not covered by Bootstrap/Tailwind */
.modal-content {
    border-radius: 0.5rem; /* Standard rounded corners */
}

/* IMPORTANT: Custom CSS to force the modal container to cover the viewport and center its content */
/* This ensures centering even if Bootstrap JS isn't fully positioning it */
.modal.show.d-block { /* Target the modal when it's visible with these classes */
    position: fixed; /* Position relative to the viewport */
    top: 0;
    left: 0;
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    display: flex; /* Use flexbox for centering its child (.modal-dialog) */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    z-index: 1050; /* Ensure it's above other content (Bootstrap's default modal z-index) */
    background: rgba(120, 120, 120, 0.5); /* Your requested background color */
    overflow-x: hidden; /* Prevent horizontal scrollbar */
    overflow-y: auto; /* Allow vertical scrolling if modal content is too tall */
}

/* Override Bootstrap's default modal backdrop to match your requested color */
/* Note: With the above .modal.show.d-block styling, this .modal-backdrop might not be needed
           if you're directly controlling the display with Blazor, as the background is now on the modal itself.
           However, keeping it here for completeness if Bootstrap JS is also involved. */
.modal-backdrop.show {
    opacity: 1; /* Ensure it's fully visible */
    background: rgba(120, 120, 120, 0.5); /* Your requested background color */
}


/* Styling for the close button to ensure good touch target and appearance */
.btn-close {
    background-color: transparent;
    border: none;
    font-size: 1.5rem; /* Larger icon for better touch target */
    opacity: 0.8;
    transition: opacity 0.2s ease-in-out;
    /* Ensure it sits above the header content */
    z-index: 1;
}

    .btn-close:hover {
        opacity: 1;
    }

/* Position the close button absolutely within the header */
.modal-header .btn-close {
    position: absolute;
    top: 0.5rem; /* Distance from top */
    right: 0.5rem; /* Distance from right */
    margin: 0; /* Override any default margins */
    padding: 0.5rem; /* Add padding for a larger clickable area */
}