/* Tailwind Imports */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Base Styles (Mobile-First) */
@layer base {
    html {
        font-size: 16px;
        scroll-behavior: smooth;
    }

    body {
        @apply bg-yellow-100 text-gray-900 min-h-screen font-sans;
    }

    .container {
        @apply max-w-full mx-auto px-4;
    }
}

/* Assessment Card (Unrelated to Admin Dashboard, Kept for Compatibility) */
.assessment-card {
    width: 672px;
    height: 600px;
    @apply bg-white p-8 rounded-lg shadow-lg flex flex-col;
}

.assessment-card .content {
    @apply flex-1 overflow-y-auto mb-4;
}

.assessment-card .content::-webkit-scrollbar {
    width: 8px;
}

.assessment-card .content::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded-full;
}

.assessment-card .content::-webkit-scrollbar-track {
    @apply bg-transparent;
}

.assessment-card form#answer-form {
    @apply flex flex-col flex-1 p-0 m-0 shadow-none bg-transparent;
}

.container:has(.assessment-card) {
    @apply max-w-[672px] px-0;
}

/* Sidebar Styles */
.sidebar-container {
    @apply fixed inset-y-0 left-0 w-64 bg-yellow-600 text-black h-screen transition-transform duration-300 z-40 transform -translate-x-full md:static md:translate-x-0;
}

/* Hamburger Button Animation */
#hamburger-btn {
    @apply md:hidden p-3 bg-yellow-500 rounded-md fixed top-4 right-4 z-50 flex flex-col justify-center items-center;
}

#hamburger-btn .hamburger-top,
#hamburger-btn .hamburger-middle,
#hamburger-btn .hamburger-bottom {
    @apply bg-black h-1 w-6 mb-1 transition-all duration-300;
}

#hamburger-btn.active .hamburger-top {
    @apply transform translate-y-[8px] rotate-45;
}

#hamburger-btn.active .hamburger-middle {
    @apply opacity-0;
}

#hamburger-btn.active .hamburger-bottom {
    @apply transform -translate-y-[8px] -rotate-45;
}

/* Sidebar Toggle */
.sidebar-container.sidebar-open {
    @apply transform translate-x-0;
}

/* Overlay for Mobile */
.overlay {
    @apply hidden fixed inset-0 bg-black bg-opacity-50 z-30;
}

.sidebar-container.sidebar-open ~ .overlay {
    @apply block;
}

/* Main Content Area */
.content-area {
    @apply min-h-screen bg-gray-100 transition-all duration-300 md:ml-64 w-full md:w-[calc(100%-16rem)];
}

@media (max-width: 767px) {
    .content-area {
        @apply ml-0 w-full;
    }
}

/* Button Styles */
.btn {
    @apply flex items-center w-full p-3 text-black text-base font-medium transition-colors duration-200;
}

.btn:hover, .btn.active {
    @apply bg-yellow-500 text-black;
}

.btn i {
    @apply mr-2 text-lg;
}

.btn span {
    @apply flex-1;
}

/* Toggle Status Button */
.toggle-status {
    @apply text-white px-3 py-1 rounded cursor-pointer text-sm font-medium transition-colors duration-200;
}

.toggle-status-bg-green {
    @apply bg-green-600 hover:bg-green-700;
}

.toggle-status-bg-red {
    @apply bg-red-600 hover:bg-red-700;
}

/* Badge Styles */
.badge {
    @apply inline-block px-3 py-1 rounded-md text-xs font-semibold;
}

.badge-gold {
    @apply bg-yellow-500 text-gray-900;
}

.badge-silver {
    @apply bg-gray-300 text-gray-900;
}

.badge-bronze {
    @apply bg-orange-600 text-white;
}

.badge-image {
    @apply w-12 h-12 object-contain mx-auto;
}

/* Icon Buttons */
.edit-test, .edit-question, .edit-motivation, .edit-content {
    @apply bg-blue-600 text-white p-2 rounded-md hover:bg-blue-700 flex items-center justify-center;
    min-width: 40px;
}

.delete-test, .delete-question, .delete-motivation, .delete-content {
    @apply bg-red-600 text-white p-2 rounded-md hover:bg-red-700 flex items-center justify-center;
    min-width: 40px;
}

/* Score List (Table) */
#scores-list {
    @apply w-full bg-white rounded-lg shadow-md overflow-x-auto;
}

#scores-list table {
    @apply w-full border-collapse;
}

#scores-list thead {
    @apply bg-blue-600 text-white;
}

#scores-list th {
    @apply p-3 text-sm font-semibold text-left;
}

#scores-list tbody tr {
    @apply border-b border-gray-200;
}

#scores-list td {
    @apply p-3 text-sm;
}

/* Evaluation List (Cards) */
#evaluations-list {
    @apply space-y-4;
}

.evaluation-card {
    @apply bg-white p-5 rounded-lg shadow-lg;
}

.evaluation-card .see-answers-btn,
.evaluation-card .see-ratings-btn {
    @apply px-4 py-2 rounded-md text-sm font-semibold transition-colors duration-200;
}

.evaluation-card .see-answers-btn {
    @apply bg-blue-600 text-white hover:bg-blue-700;
}

.evaluation-card .see-ratings-btn {
    @apply bg-green-600 text-white hover:bg-green-700;
}

.collapsible {
    @apply transition-all duration-300 ease-in-out;
}

.eval-answers,
.eval-ratings {
    @apply mt-4 p-4 bg-gray-50 rounded-md border border-gray-200;
}

/* Updates List */
#updates-list {
    @apply space-y-4;
}

.update-item {
    @apply bg-white p-5 rounded-lg shadow-md;
}

.update-item h3 {
    @apply text-lg font-semibold text-blue-800 mb-2;
}

.update-item p {
    @apply text-sm text-gray-700;
}

/* Slideshow for Content */
.slideshow {
    @apply relative w-full h-48 overflow-hidden rounded-lg;
}

.slideshow-image {
    @apply w-full h-full object-cover;
}

.slideshow-prev,
.slideshow-next {
    @apply absolute top-1/2 -translate-y-1/2 bg-gray-800 text-white p-2 rounded-full hover:bg-gray-700 cursor-pointer;
}

.slideshow-prev {
    @apply left-2;
}

.slideshow-next {
    @apply right-2;
}

/* Content Card Layout */
#content-list {
    @apply grid grid-cols-1 gap-6;
}

#content-list .content-item {
    @apply bg-white p-4 rounded-lg shadow-lg transition-all duration-200 hover:shadow-xl;
}

/* Modal for Content */
#content-modal {
    @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4;
}

#content-modal .modal-content {
    @apply bg-white p-6 rounded-lg w-full max-w-3xl max-h-[90vh] overflow-y-auto relative;
}

#modal-prev,
#modal-next {
    @apply absolute top-1/2 -translate-y-1/2 bg-gray-800 text-white p-2 rounded-full hover:bg-gray-700 cursor-pointer;
}

#modal-prev {
    @apply left-4;
}

#modal-next {
    @apply right-4;
}

#modal-image {
    @apply w-full h-64 object-cover rounded-lg mb-4;
}

#modal-videos video {
    @apply w-full mb-2 rounded-lg;
}

/* Updates Filter Row */
#admin-updates-content .flex {
    @apply flex flex-col sm:flex-row gap-4 items-stretch sm:items-center mb-4;
}

#date-filter {
    @apply p-2 border border-gray-300 rounded-md flex-grow text-sm;
}

#apply-date-filter {
    @apply bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 text-sm font-semibold;
}

/* Error and Success Messages */
.text-error {
    @apply text-red-600 text-sm font-semibold mb-2;
}

.text-success {
    @apply text-green-600 text-sm font-semibold mb-2;
}

/* Form Styling */
form:not(#answer-form) {
    @apply bg-white p-6 rounded-lg shadow-lg mb-4;
}

input, textarea, select {
    @apply border border-gray-300 rounded-md p-2 w-full text-sm;
}

input:focus, textarea:focus, select:focus {
    @apply border-blue-600 ring-2 ring-blue-600 outline-none;
}

button {
    @apply px-4 py-2 rounded-md text-sm font-semibold;
}

form button[type="submit"] {
    @apply bg-blue-600 text-white hover:bg-blue-700;
}

/* Login Page */
#login-section {
    @apply max-w-md mx-auto p-6 bg-white shadow-lg rounded-lg my-8;
}

/* Loading Spinner */
#loading-spinner {
    @apply flex items-center gap-2 text-gray-600 text-sm;
}

#loading-spinner i {
    @apply animate-spin;
}

/* Hidden Elements */
.hidden {
    @apply hidden;
}

/* Responsive Design */
@screen sm {
    #content-list {
        @apply grid-cols-2;
    }

    #admin-updates-content .flex {
        @apply flex-row;
    }
}

@screen md {
    #content-list {
        @apply grid-cols-3;
    }
}

@screen lg {
    #content-list {
        @apply grid-cols-4;
    }
}

@screen xl {
    .container {
        @apply max-w-7xl;
    }

    #content-list {
        @apply grid-cols-5;
    }
}

@screen max-md {
    #content-list {
        @apply grid-cols-1;
    }

    #content-modal .modal-content {
        @apply p-4 max-h-[80vh];
    }

    #modal-image {
        @apply h-48;
    }

    .assessment-card {
        @apply w-[90vw] max-w-[672px] h-[600px] mx-auto;
    }

    .container:has(.assessment-card) {
        @apply max-w-full px-4;
    }
}