@charset "UTF-8";

/* ==================================================================
   MAIN STYLES & THEMES
   Extracted from index.html for Junctly
   ================================================================== */

body {
    font-family: 'Inter', sans-serif;
}

/* ==================================================================
   SEPIA MODE V1.2 (STRICT OVERRIDES)
   ================================================================== */

.sepia,
.sepia body,
.sepia nav,
.sepia header,
.sepia .modal-bg {
    filter: none !important;
    backdrop-filter: none !important;
}

/* GLOBAL BACKGROUND */
.sepia body {
    background-color: #F3EAD8 !important;
    color: #5C4B37 !important;
}

/* NAVBAR */
.sepia nav {
    background-color: #E6D7C3 !important;
    border-bottom: 1px solid #D1C0A5 !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* HEADER & HERO */
.sepia header {
    background: transparent !important;
    background-image: none !important;
}

.sepia header .group .absolute {
    display: none !important;
}

/* CARDS & MODALS */
.sepia .tool-card,
.sepia .modal-content {
    background-color: #FFFBF2 !important;
    border: 1px solid #DCC8B0 !important;
    color: #5C4B37 !important;
    box-shadow: 2px 2px 0px rgba(92, 75, 55, 0.05) !important;
}

.sepia .tool-card:hover {
    border-color: #8D6E63 !important;
    transform: translateY(-2px);
    box-shadow: 4px 4px 0px rgba(92, 75, 55, 0.1) !important;
}

/* INPUTS */
.sepia input,
.sepia select,
.sepia textarea {
    background-color: #FFFBF2 !important;
    border: 1px solid #DCC8B0 !important;
    color: #5C4B37 !important;
    box-shadow: none !important;
}

.sepia input::placeholder,
.sepia textarea::placeholder {
    color: #A89985 !important;
}

/* BUTTONS & TAGS */
.sepia .filter-btn.bg-white,
.sepia .action-btn {
    background-color: #FFFBF2 !important;
    border: 1px solid #DCC8B0 !important;
    color: #5C4B37 !important;
}

/* Active State / Primary Brand Color Override - COFFEE BROWN */
.sepia .filter-btn.active,
.sepia .primary-btn,
.sepia .bg-brand-600,
.sepia .hover\:bg-brand-600:hover {
    background-color: #8D6E63 !important;
    color: #FFFBF2 !important;
    border-color: #8D6E63 !important;
}

/* TEXT OVERRIDES - STRICT NO PURPLE */
.sepia .text-slate-900,
.sepia .text-slate-800,
.sepia .text-slate-600,
.sepia .text-slate-500,
.sepia .text-gray-900,
.sepia .text-white,
.sepia .dark\:text-white {
    color: #5C4B37 !important;
}

.sepia .text-slate-300,
.sepia .text-slate-400 {
    color: #A89985 !important;
}

/* BRANDING TEXT OVERRIDE */
.sepia .text-brand-600,
.sepia .dark\:text-brand-400,
.sepia .group-hover\:text-brand-600:hover {
    color: #8D6E63 !important;
}

.sepia header .bg-brand-50 {
    background-color: rgba(141, 110, 99, 0.1) !important;
    border: 1px solid #8D6E63 !important;
    color: #8D6E63 !important;
}

/* RINGS & FOCUS */
.sepia .focus\:ring-brand-600:focus,
.sepia .ring-brand-600 {
    --tw-ring-color: #8D6E63 !important;
    outline-color: #8D6E63 !important;
}

.sepia .pinned-border {
    border: 2px solid #8D6E63 !important;
    background-color: rgba(141, 110, 99, 0.05) !important;
}

/* Notification Dot (Sepia) */
.sepia .notif-dot {
    background-color: #D32F2F !important;
    border: 1px solid #FFFBF2 !important;
}

/* --- STANDARD STYLES --- */
.glass-effect {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.dark .glass-effect {
    background: rgba(15, 23, 42, 0.85);
    border-bottom: 1px solid rgba(51, 65, 85, 0.5);
}

.grayscale-mode {
    filter: grayscale(100%);
    opacity: 0.6;
    cursor: not-allowed;
}

.pinned-border {
    border-color: #fbbf24 !important;
    background-color: rgba(251, 191, 36, 0.05);
}

.dark .pinned-border {
    border-color: #fbbf24 !important;
    background-color: rgba(251, 191, 36, 0.05);
}

/* Transition utility for Vue lists */
.list-enter-active,
.list-leave-active {
    transition: all 0.4s ease;
}

.list-enter-from,
.list-leave-to {
    opacity: 0;
    transform: translateY(20px);
}

::-webkit-scrollbar {
    width: 8px;
}

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

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

.dark ::-webkit-scrollbar-thumb {
    background: #475569;
}

.sepia ::-webkit-scrollbar-thumb {
    background: #D1C0A5;
}

a.primary-btn.flex.w-full.justify-center.rounded-xl.bg-brand-600.px-4.py-3.text-sm.font-semibold.text-white.shadow-sm.hover\:bg-brand-900.transition,
button.primary-btn.flex.w-full.justify-center.rounded-lg.bg-brand-600.px-3.py-2\.5.text-sm.font-semibold.text-white.shadow-sm.hover\:bg-brand-500.transition,
.w-8.h-8.bg-brand-600.rounded-lg.flex.items-center.justify-center.text-white.font-bold.shadow-lg.shadow-brand-600\/20.transition-colors {
    color: white !important;
}

@media (max-width: 768px) {
    .px-6.py-6 {
        width: 370px;
    }
}

[v-cloak] {
    display: none;
}