/* viva-practicles/css/style.css */

/* Include Tailwind CSS CDN */
@import url('https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css');

/* Custom fonts (e.g., Inter) - Tailwind uses sans-serif by default, but you can add more */
@import url('https://rsms.me/inter/inter.css');

html { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
  html { font-family: 'Inter var', sans-serif; }
}

/* Base styles that Tailwind might not cover or for specific overrides */
body {
    background-color: #f3f4f6; /* Tailwind gray-100 */
    color: #1f2937; /* Tailwind gray-900 */
}

/* Container for consistent padding and max-width */
.container {
    max-width: 1280px; /* Tailwind max-w-7xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* Tailwind px-4 */
    padding-right: 1rem; /* Tailwind px-4 */
}

/* Alert messages (Tailwind-like classes for custom alerts) */
.alert {
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 0.375rem; /* Tailwind rounded-md */
    font-weight: 500; /* Tailwind font-medium */
}

.alert-success {
    background-color: #d1fae5; /* Tailwind bg-green-100 */
    color: #065f46; /* Tailwind text-green-800 */
    border: 1px solid #a7f3d0; /* Tailwind border-green-300 */
}

.alert-error {
    background-color: #fee2e2; /* Tailwind bg-red-100 */
    color: #991b1b; /* Tailwind text-red-800 */
    border: 1px solid #fca5a5; /* Tailwind border-red-300 */
}

/* Table responsive overflow */
.table-responsive {
    overflow-x: auto;
}

/* Custom button styles (if not fully covered by Tailwind) */
.button {
    @apply px-4 py-2 rounded-md font-medium text-white transition duration-150 ease-in-out;
    @apply bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
}

.button-secondary {
    @apply bg-gray-500 hover:bg-gray-600 focus:ring-gray-400;
}

.button-danger {
    @apply bg-red-600 hover:bg-red-700 focus:ring-red-500;
}

.button-small {
    @apply px-3 py-1 text-sm;
}

/* Modal styles (from previous implementation, adjusted for Tailwind if possible) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    @apply flex items-center justify-center; /* Center modal content */
}

.modal-content {
    background-color: #fefefe;
    padding: 20px;
    border: 1px solid #888;
    width: 90%; /* Responsive width */
    max-width: 600px;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    @apply p-6 rounded-lg shadow-xl; /* Tailwind styling */
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    @apply text-gray-500 hover:text-gray-800;
}