/* Create the watermark effect */
.bg-watermark {
    position: fixed;
    top: 50%;
    left: 50%;
    /* Combine centering with your 14deg rotation */
    transform: translate(-50%, -50%) rotate(14deg);
    
    /* 33% opacity */
    opacity: 0.33;
    
    /* Ensure it stays behind everything */
    z-index: -1; 
    
    /* Stop the logo from blocking clicks on links/buttons */
    pointer-events: none;
    
    /* Size adjustment */
    width: 60%; 
    max-width: 500px;
}

.card-glass {
    /* Uses Bootstrap's RGB theme variables to stay adaptive */
    background-color: rgba(var(--bs-body-bg-rgb), 0.1) !important;
    
    /* The "Glassmorphism" effect */
    /* backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); */
    
    /* Adaptive border color */
    border: 1px solid rgba(var(--bs-emphasis-color-rgb), 0.1);
    
    /* Adds a subtle lift */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

/* Optional: Make it pop slightly on hover */
.card-glass:hover {
    background-color: rgba(var(--bs-body-bg-rgb), 0.6) !important;
    transform: translateY(-2px);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); 
}


/* When Bootstrap's dark theme is active */
[data-bs-theme="dark"] {
    /* Main Editor UI Colors */
    --ck-color-base-background: var(--bs-body-bg);
    --ck-color-base-border: var(--bs-border-color);
    --ck-color-text: var(--bs-body-color);
    
    /* Toolbar & Buttons */
    --ck-color-toolbar-background: var(--bs-tertiary-bg);
    --ck-color-toolbar-border: var(--bs-border-color);
    --ck-color-button-default-hover-background: var(--bs-secondary-bg);
    --ck-color-button-on-background: var(--bs-primary-bg-subtle);
    --ck-color-button-on-color: var(--bs-primary-text-emphasis);
    
    /* Dropdowns and Overlays */
    --ck-color-list-background: var(--bs-body-bg);
    --ck-color-panel-background: var(--bs-body-bg);
    --ck-color-panel-border: var(--bs-border-color);
    
    /* Input Fields (Link URL, etc) */
    --ck-color-input-background: var(--bs-body-bg);
    --ck-color-input-text: var(--bs-body-color);
}

/* Ensure the typing area (editable) is also dark */
[data-bs-theme="dark"] .ck-editor__main .ck-content {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
}

/* Fix for the sticky toolbar if used */
[data-bs-theme="dark"] .ck-sticky-panel__content {
    border-bottom: 1px solid var(--bs-border-color) !important;
}