/* Additional custom styles for Boxed file storage */
.smooth-scroll {
    scroll-behavior: smooth;
}

/* Custom animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}
/* Mild site background gradient */
.site-bg {
    background: linear-gradient(135deg, #fff7ed 0%, #fff 100%);
    /* #fff7ed is Tailwind orange-50 */
}

/* Hover effects */
.feature-card {
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
}

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, #fb923c, #f59e42);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Custom button styles */
.btn-primary {
    background: linear-gradient(135deg, #fb923c, #f59e42);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #f59e42, #ea580c);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(251, 146, 60, 0.3);
}

/* Loading animation */
.loading-dots {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.loading-dots div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fb923c;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.loading-dots div:nth-child(1) {
    left: 8px;
    animation: loading-dots1 0.6s infinite;
}

.loading-dots div:nth-child(2) {
    left: 8px;
    animation: loading-dots2 0.6s infinite;
}

.loading-dots div:nth-child(3) {
    left: 32px;
    animation: loading-dots2 0.6s infinite;
}

.loading-dots div:nth-child(4) {
    left: 56px;
    animation: loading-dots3 0.6s infinite;
}

@keyframes loading-dots1 {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes loading-dots3 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

@keyframes loading-dots2 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(24px, 0);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-section h1 {
        font-size: 2.5rem;
    }
    
    .feature-grid {
        grid-template-columns: 1fr;
    }
    
    .pricing-grid {
        grid-template-columns: 1fr;
    }
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Focus styles for accessibility */
button:focus,
a:focus {
    outline: 2px solid #fb923c;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
}

/* ------------------------------------------------------------------
   Dark mode overrides (html.dark ...)
   Palette: neutral charcoal + warm brown (no blue tones)
   ------------------------------------------------------------------ */

html.dark body {
    background-color: #121212;       /* neutral charcoal */
    color: #f5f2ec;                  /* warm off‑white */
}

/* Common containers and surfaces */
html.dark .bg-white {
    background-color: #17100e !important; /* very dark warm brown */
}

html.dark .bg-gray-50 {
    background-color: #1d1512 !important; /* dark warm surface */
}

html.dark .bg-gray-100 {
    background-color: #261b16 !important;
}

html.dark .bg-gray-200,
html.dark .bg-gray-300 {
    background-color: #2f211b !important;
}

html.dark .border-gray-200 {
    border-color: #4a3428 !important;     /* warm brown border */
}

/* Danger panel */
html.dark .bg-red-50 {
    background-color: #4b1515 !important; /* deeper warm red */
}

/* Text colors */
html.dark .text-gray-900,
html.dark .text-gray-800 {
    color: #f5f2ec !important; /* main text */
}

html.dark .text-gray-700,
html.dark .text-gray-600,
html.dark .text-gray-500 {
    color: #d0c2b5 !important; /* muted warm text */
}

/* Inputs & form controls */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="tel"],
html.dark input[type="search"],
html.dark select,
html.dark textarea {
    background-color: #17100e !important;
    border-color: #4a3428 !important;
    color: #f5f2ec !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #a68b79 !important;
}

/* Search bar background */
html.dark #global-search-input {
    background-color: #17100e !important;
    border-color: #4a3428 !important;
    color: #f5f2ec !important;
}

/* Hover grays become darker warm surfaces */
html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-gray-100:hover {
    background-color: #1d1512 !important;
}

/* Scrollbar tweaks for dark mode */
html.dark ::-webkit-scrollbar-track {
    background: #121212;
}

html.dark ::-webkit-scrollbar-thumb {
    background: #6d4b35; /* warm brown */
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: #8a5d3f; /* lighter warm brown */
}
/* ------------------------------------------------------------------
   Full dark theme variants (background + surfaces + accents)
   Controlled via classes on <html>: html.dark.theme-*
   ------------------------------------------------------------------ */

/* NOTE:
 * The base html.dark block above is the default "Brown" theme.
 * The variants below override background/surfaces + accent colors
 * when a theme-* class is present on <html>.
 */

/* === Brown theme (matches current default) ======================= */
html.dark.theme-brown body {
    background-color: #121212;
    color: #f5f2ec;
}
html.dark.theme-brown .bg-white {
    background-color: #17100e !important;
}
html.dark.theme-brown .bg-gray-50 {
    background-color: #1d1512 !important;
}
html.dark.theme-brown .bg-gray-100 {
    background-color: #261b16 !important;
}
html.dark.theme-brown .bg-gray-200,
html.dark.theme-brown .bg-gray-300 {
    background-color: #2f211b !important;
}
html.dark.theme-brown .border-gray-200 {
    border-color: #4a3428 !important;
}
html.dark.theme-brown .bg-red-50 {
    background-color: #4b1515 !important;
}
html.dark.theme-brown .text-gray-900,
html.dark.theme-brown .text-gray-800 {
    color: #f5f2ec !important;
}
html.dark.theme-brown .text-gray-700,
html.dark.theme-brown .text-gray-600,
html.dark.theme-brown .text-gray-500 {
    color: #d0c2b5 !important;
}
html.dark.theme-brown input[type="text"],
html.dark.theme-brown input[type="email"],
html.dark.theme-brown input[type="password"],
html.dark.theme-brown input[type="tel"],
html.dark.theme-brown input[type="search"],
html.dark.theme-brown select,
html.dark.theme-brown textarea {
    background-color: #17100e !important;
    border-color: #4a3428 !important;
    color: #f5f2ec !important;
}
html.dark.theme-brown input::placeholder,
html.dark.theme-brown textarea::placeholder {
    color: #a68b79 !important;
}
html.dark.theme-brown #global-search-input {
    background-color: #17100e !important;
    border-color: #4a3428 !important;
    color: #f5f2ec !important;
}
html.dark.theme-brown ::-webkit-scrollbar-track {
    background: #121212;
}
html.dark.theme-brown ::-webkit-scrollbar-thumb {
    background: #6d4b35;
}
html.dark.theme-brown ::-webkit-scrollbar-thumb:hover {
    background: #8a5d3f;
}
/* Accents for Brown */
html.dark.theme-brown .bg-orange-500 { background-color: #f97316 !important; }
html.dark.theme-brown .text-orange-500,
html.dark.theme-brown .hover\:text-orange-500:hover { color: #f97316 !important; }
html.dark.theme-brown .border-orange-400 { border-color: #fb923c !important; }

/* === Blue theme (original blue-ish dark) ========================= */
html.dark.theme-blue body {
    background-color: #020617; /* slate-950 style */
    color: #e5e7eb;
}
html.dark.theme-blue .bg-white {
    background-color: #020617 !important;
}
html.dark.theme-blue .bg-gray-50 {
    background-color: #020617 !important;
}
html.dark.theme-blue .bg-gray-100 {
    background-color: #0f172a !important; /* slate-900 */
}
html.dark.theme-blue .bg-gray-200,
html.dark.theme-blue .bg-gray-300 {
    background-color: #111827 !important; /* gray-900 */
}
html.dark.theme-blue .border-gray-200 {
    border-color: #1f2937 !important;
}
html.dark.theme-blue .bg-red-50 {
    background-color: #3f1d1d !important;
}
html.dark.theme-blue .text-gray-900,
html.dark.theme-blue .text-gray-800 {
    color: #e5e7eb !important;
}
html.dark.theme-blue .text-gray-700,
html.dark.theme-blue .text-gray-600,
html.dark.theme-blue .text-gray-500 {
    color: #9ca3af !important;
}
html.dark.theme-blue input[type="text"],
html.dark.theme-blue input[type="email"],
html.dark.theme-blue input[type="password"],
html.dark.theme-blue input[type="tel"],
html.dark.theme-blue input[type="search"],
html.dark.theme-blue select,
html.dark.theme-blue textarea {
    background-color: #020617 !important;
    border-color: #1f2937 !important;
    color: #e5e7eb !important;
}
html.dark.theme-blue input::placeholder,
html.dark.theme-blue textarea::placeholder {
    color: #6b7280 !important;
}
html.dark.theme-blue #global-search-input {
    background-color: #020617 !important;
    border-color: #1f2937 !important;
    color: #e5e7eb !important;
}
html.dark.theme-blue ::-webkit-scrollbar-track {
    background: #020617;
}
html.dark.theme-blue ::-webkit-scrollbar-thumb {
    background: #374151;
}
html.dark.theme-blue ::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
}
/* Accents for Blue */
html.dark.theme-blue .bg-orange-500 { background-color: #3b82f6 !important; } /* blue-500 */
html.dark.theme-blue .text-orange-500,
html.dark.theme-blue .hover\:text-orange-500:hover { color: #3b82f6 !important; }
html.dark.theme-blue .border-orange-400 { border-color: #60a5fa !important; }

/* === Emerald theme ============================================== */
html.dark.theme-emerald body {
    background-color: #022c22; /* emerald-950-like */
    color: #ecfdf3;
}
html.dark.theme-emerald .bg-white {
    background-color: #022c22 !important;
}
html.dark.theme-emerald .bg-gray-50 {
    background-color: #022c22 !important;
}
html.dark.theme-emerald .bg-gray-100 {
    background-color: #064e3b !important;
}
html.dark.theme-emerald .bg-gray-200,
html.dark.theme-emerald .bg-gray-300 {
    background-color: #065f46 !important;
}
html.dark.theme-emerald .border-gray-200 {
    border-color: #10b981 !important;
}
html.dark.theme-emerald .bg-red-50 {
    background-color: #3f1d1d !important;
}
html.dark.theme-emerald .text-gray-900,
html.dark.theme-emerald .text-gray-800 {
    color: #ecfdf3 !important;
}
html.dark.theme-emerald .text-gray-700,
html.dark.theme-emerald .text-gray-600,
html.dark.theme-emerald .text-gray-500 {
    color: #a7f3d0 !important;
}
html.dark.theme-emerald input[type="text"],
html.dark.theme-emerald input[type="email"],
html.dark.theme-emerald input[type="password"],
html.dark.theme-emerald input[type="tel"],
html.dark.theme-emerald input[type="search"],
html.dark.theme-emerald select,
html.dark.theme-emerald textarea {
    background-color: #022c22 !important;
    border-color: #10b981 !important;
    color: #ecfdf3 !important;
}
html.dark.theme-emerald input::placeholder,
html.dark.theme-emerald textarea::placeholder {
    color: #6ee7b7 !important;
}
html.dark.theme-emerald #global-search-input {
    background-color: #022c22 !important;
    border-color: #10b981 !important;
    color: #ecfdf3 !important;
}
html.dark.theme-emerald ::-webkit-scrollbar-track {
    background: #022c22;
}
html.dark.theme-emerald ::-webkit-scrollbar-thumb {
    background: #047857;
}
html.dark.theme-emerald ::-webkit-scrollbar-thumb:hover {
    background: #059669;
}
/* Accents for Emerald */
html.dark.theme-emerald .bg-orange-500 { background-color: #22c55e !important; }
html.dark.theme-emerald .text-orange-500,
html.dark.theme-emerald .hover\:text-orange-500:hover { color: #22c55e !important; }
html.dark.theme-emerald .border-orange-400 { border-color: #4ade80 !important; }

/* === Purple theme =============================================== */
html.dark.theme-purple body {
    background-color: #090422;
    color: #f5f3ff;
}
html.dark.theme-purple .bg-white {
    background-color: #090422 !important;
}
html.dark.theme-purple .bg-gray-50 {
    background-color: #0f172a !important;
}
html.dark.theme-purple .bg-gray-100 {
    background-color: #1e1b4b !important;
}
html.dark.theme-purple .bg-gray-200,
html.dark.theme-purple .bg-gray-300 {
    background-color: #312e81 !important;
}
html.dark.theme-purple .border-gray-200 {
    border-color: #6366f1 !important;
}
html.dark.theme-purple .bg-red-50 {
    background-color: #3f1d1d !important;
}
html.dark.theme-purple .text-gray-900,
html.dark.theme-purple .text-gray-800 {
    color: #f5f3ff !important;
}
html.dark.theme-purple .text-gray-700,
html.dark.theme-purple .text-gray-600,
html.dark.theme-purple .text-gray-500 {
    color: #c7d2fe !important;
}
html.dark.theme-purple input[type="text"],
html.dark.theme-purple input[type="email"],
html.dark.theme-purple input[type="password"],
html.dark.theme-purple input[type="tel"],
html.dark.theme-purple input[type="search"],
html.dark.theme-purple select,
html.dark.theme-purple textarea {
    background-color: #090422 !important;
    border-color: #4f46e5 !important;
    color: #f5f3ff !important;
}
html.dark.theme-purple input::placeholder,
html.dark.theme-purple textarea::placeholder {
    color: #a5b4fc !important;
}
html.dark.theme-purple #global-search-input {
    background-color: #090422 !important;
    border-color: #4f46e5 !important;
    color: #f5f3ff !important;
}
html.dark.theme-purple ::-webkit-scrollbar-track {
    background: #090422;
}
html.dark.theme-purple ::-webkit-scrollbar-thumb {
    background: #4f46e5;
}
html.dark.theme-purple ::-webkit-scrollbar-thumb:hover {
    background: #6366f1;
}
/* Accents for Purple */
html.dark.theme-purple .bg-orange-500 { background-color: #a855f7 !important; }
html.dark.theme-purple .text-orange-500,
html.dark.theme-purple .hover\:text-orange-500:hover { color: #a855f7 !important; }
html.dark.theme-purple .border-orange-400 { border-color: #c4b5fd !important; }

/* === Rose theme ================================================= */
html.dark.theme-rose body {
    background-color: #1f0710;
    color: #ffe4e6;
}
html.dark.theme-rose .bg-white {
    background-color: #1f0710 !important;
}
html.dark.theme-rose .bg-gray-50 {
    background-color: #1f2933 !important;
}
html.dark.theme-rose .bg-gray-100 {
    background-color: #3f101d !important;
}
html.dark.theme-rose .bg-gray-200,
html.dark.theme-rose .bg-gray-300 {
    background-color: #4c0519 !important;
}
html.dark.theme-rose .border-gray-200 {
    border-color: #fb7185 !important;
}
html.dark.theme-rose .bg-red-50 {
    background-color: #4b1515 !important;
}
html.dark.theme-rose .text-gray-900,
html.dark.theme-rose .text-gray-800 {
    color: #ffe4e6 !important;
}
html.dark.theme-rose .text-gray-700,
html.dark.theme-rose .text-gray-600,
html.dark.theme-rose .text-gray-500 {
    color: #fecdd3 !important;
}
html.dark.theme-rose input[type="text"],
html.dark.theme-rose input[type="email"],
html.dark.theme-rose input[type="password"],
html.dark.theme-rose input[type="tel"],
html.dark.theme-rose input[type="search"],
html.dark.theme-rose select,
html.dark.theme-rose textarea {
    background-color: #1f0710 !important;
    border-color: #fb7185 !important;
    color: #ffe4e6 !important;
}
html.dark.theme-rose input::placeholder,
html.dark.theme-rose textarea::placeholder {
    color: #fda4af !important;
}
html.dark.theme-rose #global-search-input {
    background-color: #1f0710 !important;
    border-color: #fb7185 !important;
    color: #ffe4e6 !important;
}
html.dark.theme-rose ::-webkit-scrollbar-track {
    background: #1f0710;
}
html.dark.theme-rose ::-webkit-scrollbar-thumb {
    background: #fb7185;
}
html.dark.theme-rose ::-webkit-scrollbar-thumb:hover {
    background: #fb7185;
}
/* Accents for Rose */
html.dark.theme-rose .bg-orange-500 { background-color: #fb7185 !important; }
html.dark.theme-rose .text-orange-500,
html.dark.theme-rose .hover\:text-orange-500:hover { color: #fb7185 !important; }
html.dark.theme-rose .border-orange-400 { border-color: #fecdd3 !important; }

/* === Slate theme (neutral gray) ================================ */
html.dark.theme-slate body {
    background-color: #020617;
    color: #e5e7eb;
}
html.dark.theme-slate .bg-white {
    background-color: #020617 !important;
}
html.dark.theme-slate .bg-gray-50 {
    background-color: #020617 !important;
}
html.dark.theme-slate .bg-gray-100 {
    background-color: #111827 !important;
}
html.dark.theme-slate .bg-gray-200,
html.dark.theme-slate .bg-gray-300 {
    background-color: #1f2937 !important;
}
html.dark.theme-slate .border-gray-200 {
    border-color: #4b5563 !important;
}
html.dark.theme-slate .bg-red-50 {
    background-color: #3f1d1d !important;
}
html.dark.theme-slate .text-gray-900,
html.dark.theme-slate .text-gray-800 {
    color: #e5e7eb !important;
}
html.dark.theme-slate .text-gray-700,
html.dark.theme-slate .text-gray-600,
html.dark.theme-slate .text-gray-500 {
    color: #9ca3af !important;
}
html.dark.theme-slate input[type="text"],
html.dark.theme-slate input[type="email"],
html.dark.theme-slate input[type="password"],
html.dark.theme-slate input[type="tel"],
html.dark.theme-slate input[type="search"],
html.dark.theme-slate select,
html.dark.theme-slate textarea {
    background-color: #020617 !important;
    border-color: #4b5563 !important;
    color: #e5e7eb !important;
}
html.dark.theme-slate input::placeholder,
html.dark.theme-slate textarea::placeholder {
    color: #6b7280 !important;
}
html.dark.theme-slate #global-search-input {
    background-color: #020617 !important;
    border-color: #4b5563 !important;
    color: #e5e7eb !important;
}
html.dark.theme-slate ::-webkit-scrollbar-track {
    background: #020617;
}
html.dark.theme-slate ::-webkit-scrollbar-thumb {
    background: #4b5563;
}
html.dark.theme-slate ::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}
/* Accents for Slate (keep orange) */
html.dark.theme-slate .bg-orange-500 { background-color: #f97316 !important; }
html.dark.theme-slate .text-orange-500,
html.dark.theme-slate .hover\:text-orange-500:hover { color: #f97316 !important; }
html.dark.theme-slate .border-orange-400 { border-color: #fb923c !important; }

/* === Amber theme (golden dark) ================================= */
html.dark.theme-amber body {
    background-color: #1f1300;
    color: #fffbeb;
}
html.dark.theme-amber .bg-white {
    background-color: #1f1300 !important;
}
html.dark.theme-amber .bg-gray-50 {
    background-color: #1c1917 !important;
}
html.dark.theme-amber .bg-gray-100 {
    background-color: #2b2010 !important;
}
html.dark.theme-amber .bg-gray-200,
html.dark.theme-amber .bg-gray-300 {
    background-color: #3b2a0f !important;
}
html.dark.theme-amber .border-gray-200 {
    border-color: #fbbf24 !important;
}
html.dark.theme-amber .bg-red-50 {
    background-color: #4b1515 !important;
}
html.dark.theme-amber .text-gray-900,
html.dark.theme-amber .text-gray-800 {
    color: #fffbeb !important;
}
html.dark.theme-amber .text-gray-700,
html.dark.theme-amber .text-gray-600,
html.dark.theme-amber .text-gray-500 {
    color: #fde68a !important;
}
html.dark.theme-amber input[type="text"],
html.dark.theme-amber input[type="email"],
html.dark.theme-amber input[type="password"],
html.dark.theme-amber input[type="tel"],
html.dark.theme-amber input[type="search"],
html.dark.theme-amber select,
html.dark.theme-amber textarea {
    background-color: #1f1300 !important;
    border-color: #facc15 !important;
    color: #fffbeb !important;
}
html.dark.theme-amber input::placeholder,
html.dark.theme-amber textarea::placeholder {
    color: #facc15 !important;
}
html.dark.theme-amber #global-search-input {
    background-color: #1f1300 !important;
    border-color: #facc15 !important;
    color: #fffbeb !important;
}
html.dark.theme-amber ::-webkit-scrollbar-track {
    background: #1f1300;
}
html.dark.theme-amber ::-webkit-scrollbar-thumb {
    background: #f59e0b;
}
html.dark.theme-amber ::-webkit-scrollbar-thumb:hover {
    background: #fbbf24;
}
/* Accents for Amber */
html.dark.theme-amber .bg-orange-500 { background-color: #fbbf24 !important; }
html.dark.theme-amber .text-orange-500,
html.dark.theme-amber .hover\:text-orange-500:hover { color: #fbbf24 !important; }
html.dark.theme-amber .border-orange-400 { border-color: #facc15 !important; }

/* Sidebar scroll (scrollable but visually hidden scrollbar) */
.sidebar-scroll {
    overflow-y: auto;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;     /* Firefox */
}
.sidebar-scroll::-webkit-scrollbar {
    display: none;             /* Chrome, Safari, Opera */
}