/* Using Tailwind CSS via CDN, but you can add custom styles here if needed */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Add a subtle transition for the main panels */
#documents-panel, #viewer-panel {
    transition: box-shadow 0.3s ease-in-out;
}

#documents-panel:hover, #viewer-panel:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Style for the selected document */
#doc-list .doc-item.selected {
    background-color: #e0f2fe; /* light-blue-100 */
    color: #0c4a6e; /* light-blue-900 */
    font-weight: bold;
}

/* Custom styles for the prose class from Tailwind typography plugin if not using the plugin */
.prose h1 { font-size: 2.25em; margin-bottom: 0.5em; }
.prose h2 { font-size: 1.8em; margin-bottom: 0.5em; }
.prose p { margin-bottom: 1em; line-height: 1.6; }
.prose pre { background-color: #f3f4f6; padding: 1em; border-radius: 0.5em; overflow-x: auto; }
.prose code { font-family: monospace; }

/* Ensure the modal appears above everything */
#users-modal {
    z-index: 1000;
}