/* Base Styles */
[x-cloak] { display: none !important; }

/* Login Page Interactive Background */
.login-bg-container {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%, #312e81 100%);
    position: relative;
    overflow: hidden;
}

#svg-particles {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}

.login-panel {
    z-index: 10;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Quill Editor Overrides & Fixes */
.ql-editor {
    min-height: 250px;
    font-size: 16px;
    font-family: inherit;
    /* Prevent text/images from shattering the layout */
    word-break: break-word; 
    overflow-wrap: break-word;
}

/* Ensure images inside notes don't break out of the container on mobile */
.ql-editor img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

/* Custom Scrollbar Styling (Used in Sidebar and Note contents) */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.5); /* Tailwind slate-400 with opacity */
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(100, 116, 139, 0.8); /* Tailwind slate-500 */
}

/* For Firefox */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}