/* ========================================================================
   Custom utilities + decorative styles kept after DaisyUI v5 migration.

   DaisyUI v5 (registered in site.css) supplies all components (btn, card,
   navbar, alert, badge, modal, table, etc.). What remains here is:
   - the warm "organic" CSS custom-properties referenced by inline styles
   - hero/blob decoration that has no DaisyUI equivalent
   - keyframes + animation utility classes
   - typography & palette utility classes
   - page-specific upload UX (drop-zone, control buttons, success banner)
   - Material Icons baseline styling
   ======================================================================== */

/* ------------------------------------------------------------------------
   ORGANIC DESIGN TOKENS (still used in inline styles & a few utility classes)
   ------------------------------------------------------------------------ */
:root {
    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Source Sans 3', system-ui, sans-serif;
    --font-accent: 'Caveat', cursive;

    --organic-primary: #E85D4C;
    --organic-primary-hover: #C94B3D;
    --organic-primary-light: #F2857A;
    --organic-primary-subtle: #FDECEA;

    --organic-sand: #F5EFE6;
    --organic-stone: #E8DFD3;
    --organic-desert-rose: #D4A59A;
    --organic-almond: #C9B8A8;
    --organic-walnut: #8B7355;

    --organic-cream: #FFFBF7;
    --organic-warm-100: #F7F3EF;
    --organic-warm-200: #E6DED4;
    --organic-warm-400: #B8A99A;
    --organic-warm-600: #7A6B5C;
    --organic-warm-800: #4A3F35;
    --organic-espresso: #2D2520;

    --organic-success: #6B9B7A;
    --organic-warning: #D4A253;
    --organic-error: #C45C5C;
    --organic-info: #5C8EB8;

    --organic-shadow-sm: 0 1px 2px rgba(139, 115, 85, 0.08);
    --organic-shadow-md: 0 4px 12px rgba(139, 115, 85, 0.12);
    --organic-shadow-lg: 0 8px 24px rgba(139, 115, 85, 0.16);
    --organic-shadow-xl: 0 16px 48px rgba(139, 115, 85, 0.20);
    --organic-shadow-glow: 0 0 20px rgba(232, 93, 76, 0.25);

    --organic-radius-sm: 8px;
    --organic-radius-md: 16px;
    --organic-radius-lg: 24px;
    --organic-radius-xl: 32px;
    --organic-radius-full: 9999px;

    --organic-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
    --organic-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --organic-duration-fast: 150ms;
    --organic-duration-normal: 300ms;
    --organic-duration-slow: 500ms;
}

/* ------------------------------------------------------------------------
   HERO / BLOB DECORATION (public landing hero only)
   ------------------------------------------------------------------------ */

.organic-hero {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--organic-cream) 0%, var(--organic-sand) 50%, var(--organic-stone) 100%);
}

.organic-blob {
    position: absolute;
    border-radius: 60% 40% 55% 45% / 55% 60% 40% 45%;
    filter: blur(60px);
    opacity: 0.6;
    animation: blob 20s ease-in-out infinite;
    pointer-events: none;
}

.organic-blob-1 {
    width: 600px;
    height: 600px;
    background: linear-gradient(135deg, var(--organic-primary-subtle) 0%, var(--organic-desert-rose) 100%);
    top: -200px;
    right: -100px;
    animation-delay: 0s;
}

.organic-blob-2 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, var(--organic-sand) 0%, var(--organic-almond) 100%);
    bottom: -100px;
    left: -100px;
    animation-delay: -5s;
}

.organic-blob-3 {
    width: 300px;
    height: 300px;
    background: var(--organic-primary-subtle);
    top: 50%;
    left: 30%;
    animation-delay: -10s;
}

.organic-noise {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
}

/* ------------------------------------------------------------------------
   KEYFRAMES + ANIMATION UTILITIES
   ------------------------------------------------------------------------ */

@keyframes blob {
    0% { border-radius: 60% 40% 55% 45% / 55% 60% 40% 45%; }
    50% { border-radius: 40% 60% 45% 55% / 45% 40% 60% 55%; }
    100% { border-radius: 60% 40% 55% 45% / 55% 60% 40% 45%; }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.animate-fade-in-up { animation: fadeInUp 0.5s ease-out forwards; }
.animate-delay-100 { animation-delay: 0.1s; }
.animate-delay-200 { animation-delay: 0.2s; }
.animate-delay-300 { animation-delay: 0.3s; }
.animate-delay-400 { animation-delay: 0.4s; }
.stagger-init { opacity: 0; }

/* ------------------------------------------------------------------------
   TYPOGRAPHY + PALETTE UTILITIES
   ------------------------------------------------------------------------ */

.font-display { font-family: var(--font-display); }
.font-body { font-family: var(--font-body); }
.font-accent { font-family: var(--font-accent); }

.text-espresso { color: var(--organic-espresso); }
.text-walnut { color: var(--organic-walnut); }
.text-warm { color: var(--organic-warm-600); }
.text-coral { color: var(--organic-primary); }

.bg-cream { background-color: var(--organic-cream); }
.bg-sand { background-color: var(--organic-sand); }
.bg-warm-gradient {
    background: linear-gradient(135deg, var(--organic-cream) 0%, var(--organic-sand) 100%);
}

/* ------------------------------------------------------------------------
   MATERIAL ICONS BASELINE
   ------------------------------------------------------------------------ */

.material-icons,
.material-icons-outlined,
.material-icons-round {
    font-size: 24px;
    line-height: 1;
    display: inline-flex;
    vertical-align: middle;
}

.md-icon { width: 1.25rem; height: 1.25rem; }
.md-icon-sm { width: 1rem; height: 1rem; }
.md-icon-lg { width: 1.5rem; height: 1.5rem; }

/* ------------------------------------------------------------------------
   UPLOAD PAGE — page-specific UX (drop zone, controls, success banner, FAB)
   No DaisyUI equivalent for these patterns.
   ------------------------------------------------------------------------ */

.organic-upload-container {
    min-height: calc(100vh - 180px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 2rem 1rem;
}

.organic-upload-zone {
    background: linear-gradient(135deg, var(--organic-sand) 0%, #E8DFD3 100%);
    border: 3px dashed var(--organic-walnut);
    border-radius: var(--organic-radius-xl);
    transition: all 0.3s var(--organic-ease);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.organic-upload-zone::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(232, 93, 76, 0.05) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.organic-upload-zone:hover {
    border-color: var(--organic-primary);
    background: linear-gradient(135deg, #FEF3F1 0%, #FCEAE7 100%);
    transform: scale(1.01);
    box-shadow: var(--organic-shadow-lg);
}

.organic-upload-zone:hover::before { opacity: 1; }

.organic-upload-zone.dragover {
    border-color: var(--organic-primary);
    border-style: solid;
    background: linear-gradient(135deg, #FEF3F1 0%, #FCEAE7 100%);
    box-shadow: 0 0 40px rgba(232, 93, 76, 0.25), var(--organic-shadow-xl);
    transform: scale(1.02);
}

.organic-upload-zone.dragover::before {
    opacity: 1;
    animation: pulse 1s ease-in-out infinite;
}

.organic-upload-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 3rem 2rem;
    text-align: center;
}

.organic-upload-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--organic-primary) 0%, var(--organic-primary-hover) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 24px rgba(232, 93, 76, 0.3);
    animation: float 3s ease-in-out infinite;
}

.organic-upload-icon svg,
.organic-upload-icon i {
    width: 40px;
    height: 40px;
    color: white;
}

.organic-upload-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--organic-espresso);
    margin-bottom: 0.5rem;
}

.organic-upload-subtitle {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--organic-walnut);
    margin-bottom: 1.5rem;
}

.organic-upload-hint {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--organic-warm-600);
    margin-top: 1rem;
}

.organic-upload-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    flex-wrap: wrap;
}

.organic-upload-controls > .hidden {
    display: none;
}

.organic-upload-loading {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    border-radius: inherit;
    z-index: 10;
}

.organic-upload-loading-text {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    color: var(--organic-espresso);
}

.organic-upload-header {
    text-align: center;
    margin-bottom: 2rem;
    padding: 0 1rem;
}

.organic-upload-header h1 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--organic-espresso);
    margin-bottom: 0.5rem;
}

.organic-upload-header p {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--organic-walnut);
    max-width: 500px;
    margin: 0 auto;
}

.organic-control-btn {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--organic-primary) 0%, var(--organic-primary-hover) 100%);
    color: white;
    border: none;
    box-shadow: var(--organic-shadow-md);
    transition: all 0.3s var(--organic-ease);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.organic-control-btn:hover {
    transform: translateY(-3px) scale(1.08);
    box-shadow: var(--organic-shadow-lg), 0 0 20px rgba(232, 93, 76, 0.35);
}

.organic-control-btn:active {
    transform: translateY(-1px) scale(1.02);
}

.organic-control-btn:disabled {
    background: var(--organic-warm-200);
    cursor: not-allowed;
    box-shadow: none;
}

.organic-control-btn:disabled:hover { transform: none; }

.organic-control-btn svg,
.organic-control-btn i {
    width: 24px;
    height: 24px;
}

.organic-control-btn.secondary {
    background: var(--organic-cream);
    color: var(--organic-primary);
    border: 2px solid var(--organic-primary);
}

.organic-control-btn.secondary:hover {
    background: var(--organic-primary-subtle);
}

.organic-success-banner {
    background: linear-gradient(135deg, var(--organic-success) 0%, #5A8A69 100%);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 0 0 var(--organic-radius-lg) var(--organic-radius-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    box-shadow: 0 4px 12px rgba(107, 155, 122, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
}

.organic-success-banner:hover {
    background: linear-gradient(135deg, #5A8A69 0%, #4A7A59 100%);
}

.organic-success-banner-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.organic-success-banner-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.organic-success-banner-text {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
}

.organic-success-banner-close {
    width: 24px;
    height: 24px;
    opacity: 0.8;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}

.organic-success-banner-close:hover { opacity: 1; }

.organic-fab {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--organic-primary) 0%, var(--organic-primary-hover) 100%);
    color: white;
    border: none;
    box-shadow: 0 6px 24px rgba(232, 93, 76, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s var(--organic-ease);
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 50;
}

.organic-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 32px rgba(232, 93, 76, 0.5);
}

.organic-fab:active { transform: scale(0.95); }

.organic-fab:disabled {
    background: var(--organic-warm-200);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    cursor: not-allowed;
}

.organic-fab svg,
.organic-fab i {
    width: 32px;
    height: 32px;
}

.organic-fab.hidden {
    display: none;
}

@media (min-width: 768px) {
    .organic-fab {
        display: none;
    }
}

@media (max-width: 768px), (max-height: 700px) {
    .canvas-container {
        padding: 1.5rem 1rem 6rem;
    }

    .canvas-wrapper {
        width: 100%;
        margin: 0.75rem auto;
    }

    .canvas-upload-area {
        box-sizing: border-box;
        min-width: min(20rem, calc(100vw - 2rem));
        min-height: 18rem;
    }

    .organic-upload-header {
        margin-bottom: 1rem;
        padding: 0;
    }

    .organic-upload-header h1 {
        font-size: 1.75rem;
    }

    .organic-upload-header p {
        font-size: 0.95rem;
    }

    .organic-upload-controls {
        gap: 0.75rem;
        padding: 0.75rem 1rem 1rem;
    }

    .organic-control-btn {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }

    .organic-upload-inner {
        gap: 0.5rem;
        padding: 1.25rem;
    }

    .organic-upload-icon {
        width: 56px;
        height: 56px;
        margin-bottom: 0.25rem;
    }

    .organic-upload-icon svg,
    .organic-upload-icon i {
        width: 30px;
        height: 30px;
    }

    .organic-upload-title {
        font-size: 1.25rem;
        line-height: 1.25;
        margin-bottom: 0;
    }

    .organic-upload-subtitle {
        margin-bottom: 0.5rem;
    }

    .organic-upload-hint {
        margin-top: 0.5rem;
    }

    .organic-upload-inner .btn {
        min-height: 2.75rem;
        height: auto;
        padding-inline: 1rem;
        white-space: nowrap;
    }
}

@media (max-width: 380px) {
    .canvas-upload-area {
        min-width: calc(100vw - 1.5rem);
        min-height: 17rem;
    }

    .organic-upload-title {
        font-size: 1.125rem;
    }

    .organic-upload-subtitle,
    .organic-upload-hint {
        font-size: 0.875rem;
    }

    .organic-upload-inner .btn {
        width: 100%;
        max-width: 14rem;
    }
}

.canvas-wrapper-compact {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.canvas-upload-area.canvas-upload-area-compact {
    min-width: 0;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 0;
    border: 3px solid var(--organic-espresso);
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0 12px 30px rgba(45, 37, 32, 0.16), 0 0 0 8px rgba(45, 37, 32, 0.05);
    cursor: pointer;
    overflow: hidden;
}

.canvas-upload-area.canvas-upload-area-compact:hover,
.canvas-upload-area.canvas-upload-area-compact.dragover {
    border-color: var(--organic-primary);
    background: #FFFFFF;
    transform: scale(1.04);
    box-shadow: 0 14px 34px rgba(45, 37, 32, 0.2), 0 0 0 8px rgba(232, 93, 76, 0.12);
}

.organic-upload-inner-compact {
    min-height: 0;
    padding: 0;
}

.organic-upload-compact-icon {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--organic-primary);
    background:
        linear-gradient(rgba(45, 37, 32, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(45, 37, 32, 0.04) 1px, transparent 1px),
        #FFFFFF;
    background-size: 12px 12px;
}

.organic-upload-compact-icon svg,
.organic-upload-compact-icon i {
    width: 32px;
    height: 32px;
}

.organic-upload-compact-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

.organic-upload-compact-actions .btn {
    min-height: 2.75rem;
    height: auto;
    padding-inline: 1.25rem;
}

.organic-upload-compact-hint {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--organic-warm-600);
}

.canvas-editor.canvas-editor-compact:not(.hidden) {
    display: flex;
    align-items: center;
    justify-content: center;
}

.canvas-editor-compact canvas {
    width: var(--target-preview-width) !important;
    height: var(--target-preview-height) !important;
}