@import "tailwindcss";
@plugin "daisyui";
@plugin "daisyui/theme" {
    name: "bumblebee";
    default: true;
    prefersdark: true;
    color-scheme: "light";
    --color-base-100: oklch(100% 0 0);
    --color-base-200: oklch(97% 0 0);
    --color-base-300: oklch(92% 0 0);
    --color-base-content: oklch(20% 0 0);
    --color-primary: oklch(85% 0.199 91.936);
    --color-primary-content: oklch(42% 0.095 57.708);
    --color-secondary: oklch(75% 0.183 55.934);
    --color-secondary-content: oklch(40% 0.123 38.172);
    --color-accent: oklch(0% 0 0);
    --color-accent-content: oklch(100% 0 0);
    --color-neutral: oklch(37% 0.01 67.558);
    --color-neutral-content: oklch(92% 0.003 48.717);
    --color-info: oklch(74% 0.16 232.661);
    --color-info-content: oklch(39% 0.09 240.876);
    --color-success: oklch(76% 0.177 163.223);
    --color-success-content: oklch(37% 0.077 168.94);
    --color-warning: oklch(82% 0.189 84.429);
    --color-warning-content: oklch(41% 0.112 45.904);
    --color-error: oklch(70% 0.191 22.216);
    --color-error-content: oklch(39% 0.141 25.723);
    --radius-selector: 1rem;
    --radius-field: 0.25rem;
    --radius-box: 0.25rem;
    --size-selector: 0.25rem;
    --size-field: 0.25rem;
    --border: 1px;
    --depth: 1;
    --noise: 0;
}

:root {
    --ifs-green: #4eb48a;
    --ifs-yellow: #d3be2a;
    --ifs-orange: #faae17;
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", Helvetica, Arial, sans-serif;
}

a {
    @apply underline;
    @apply underline-offset-4;
}

a.btn {
    @apply no-underline;
}

.bg-ifs-green {
    background-color: var(--ifs-green);
}
.bg-ifs-yellow {
    background-color: var(--ifs-yellow);
}
.bg-ifs-orange {
    background-color: var(--ifs-orange);
}

.bg-ifs-green-20 {
    background-color: rgba(78, 180, 138, 0.2);
}
.bg-ifs-yellow-20 {
    background-color: rgba(211, 190, 42, 0.2);
}
.bg-ifs-orange-20 {
    background-color: rgba(250, 174, 23, 0.2);
}

.text-ifs-green {
    color: var(--ifs-green);
}
.text-ifs-yellow {
    color: var(--ifs-yellow);
}
.text-ifs-orange {
    color: var(--ifs-orange);
}

.border-ifs-green {
    border-color: var(--ifs-green);
}
.border-ifs-yellow {
    border-color: var(--ifs-yellow);
}
.border-ifs-orange {
    border-color: var(--ifs-orange);
}

.hover\:bg-ifs-green:hover {
    background-color: var(--ifs-green);
}
.hover\:bg-ifs-yellow:hover {
    background-color: var(--ifs-yellow);
}
.hover\:bg-ifs-orange:hover {
    background-color: var(--ifs-orange);
}

.hover\:text-ifs-green:hover {
    color: var(--ifs-green);
}
.hover\:text-ifs-yellow:hover {
    color: var(--ifs-yellow);
}
.hover\:text-ifs-orange:hover {
    color: var(--ifs-orange);
}

.hover\:border-ifs-green:hover {
    border-color: var(--ifs-green);
}
.hover\:border-ifs-yellow:hover {
    border-color: var(--ifs-yellow);
}
.hover\:border-ifs-orange:hover {
    border-color: var(--ifs-orange);
}

/* Animation for blobs */
@keyframes blob {
    0% {
        transform: scale(1);
    }
    33% {
        transform: scale(1.1);
    }
    66% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}
.animate-blob {
    animation: blob 7s infinite;
}
.animation-delay-2000 {
    animation-delay: 2s;
}
.animation-delay-4000 {
    animation-delay: 4s;
}

.system-container {
    display: flex;

    .system-view {
        height: 100vh;
        flex: 1;
        &.minimal {
            max-height: 36rem;
        }
        .node {
            display: flex;
            height: 100px;
            width: 100px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-position: center center;
            padding: 1rem;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            background-image: url("/images/nodes/unknown.svg");

            &.manager {
                background-image: url("/images/nodes/manager.svg");
            }
            &.exile {
                background-image: url("/images/nodes/exile.svg");
            }
            &.firefighter {
                background-image: url("/images/nodes/firefighter.svg");
            }
        }

        /* Custom edge styles based on relationship */
        .edge-unknown {
            stroke: #999999;
        }

        .edge-protective {
            stroke: #4caf50;
        }

        .edge-polarization {
            stroke: #f44336;
        }

        .edge-alliance {
            stroke: #2196f3;
        }

        .edge-burden {
            stroke: #ff9800;
        }

        .edge-blended {
            stroke: #9c27b0;
        }

        .node-wrapper {
            padding: 0.5rem;
            margin: -0.5rem;
        }

        .selected .node-wrapper {
            background-color: rgba(0, 0, 0, 0.08);
            border-radius: 0.5em;
        }

        .logo {
            margin-top: 1em;
            a {
                display: flex;
                height: 1.5rem;
                width: auto;

                svg {
                    margin-right: 5px;
                    margin-top: 3px;
                }
            }
        }

        .parts-toolbar {
            background-color: var(--color-base-100);
            border-radius: var(--radius-box);
            padding: 0.2rem 0.5rem;
            border: 1px solid #cccccc;
        }
    }

    .sidebar-container {
        width: 200px;
    }
}
