/* Ecosphere Projects Custom CSS - For Primer UI */

/* Modern card styles */
.Box {
    border-radius: 6px;
    transition: all 0.2s ease-in-out;
}

.Box-header {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background-color: var(--color-canvas-subtle);
}

/* Enhanced hover effects */
.color-bg-default.border:hover,
.Box:hover {
    box-shadow: 0 8px 24px rgba(140, 149, 159, 0.2);
    transition: box-shadow 0.2s ease-in-out;
}

[data-color-mode="dark"] .color-bg-default.border:hover,
[data-color-mode="dark"] .Box:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Additional themes */
[data-color-mode="light"][data-light-theme="light_high_contrast"] {
    --color-fg-default: #0E1116;
    --color-canvas-default: #ffffff;
    --color-border-default: #20252c;
}

[data-color-mode="dark"][data-dark-theme="dark_high_contrast"] {
    --color-fg-default: #f0f3f6;
    --color-canvas-default: #0a0c10;
    --color-border-default: #6e7681;
}

[data-color-mode="dark"][data-dark-theme="dark_dimmed"] {
    --color-fg-default: #adbac7;
    --color-canvas-default: #22272e;
}

/* Custom animations */
@keyframes fadeOutCustom {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.animate-fade-out {
    animation: fadeOutCustom 1s forwards;
}

.animate-fade-in {
    animation: fadeIn 0.5s;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Additional utility classes */
.w-100 {
    width: 100% !important;
}

.container-login {
    max-width: 420px;
    margin: 0 auto;
    padding-top: 40px;
}

/* Toast/alert styling with improved design */
.flash {
    margin-bottom: 16px;
    border-radius: 6px;
    padding: 16px;
    border-width: 1px;
    border-style: solid;
}