@import "tailwindcss/theme.css";
@import "tailwindcss/utilities.css";
@custom-variant dark (&:where(.dark, .dark *));

@theme inline {
    --color-hBackground: rgb(var(--v-theme-background));
    --color-hOnBackground: rgb(var(--v-theme-on-background));
    --color-hSurface: rgb(var(--v-theme-surface));
    --color-hOnSurface: rgb(var(--v-theme-on-surface));
    --color-hPrimary: rgb(var(--v-theme-primary));
    --color-hOnPrimary: rgb(var(--v-theme-on-primary));
    --color-hSecondary: rgb(var(--v-theme-secondary));
    --color-hOnSecondary: rgb(var(--v-theme-on-secondary));
    --color-hTertiary: rgb(var(--v-theme-tertiary));
    --color-hOnTertiary: rgb(var(--v-theme-on-tertiary));
    --color-hError: rgb(var(--v-theme-error));
    --color-hOnError: rgb(var(--v-theme-on-error));
}

html,
body,
#app {
    min-height: 100%;
    background: #f4f6f3;
}

html {
    --app-color-background: rgb(var(--v-theme-background));
    --app-color-on-background: rgb(var(--v-theme-on-background));
    --app-color-surface: rgb(var(--v-theme-surface));
    --app-color-surface-muted: rgb(var(--v-theme-surface-muted));
    --app-color-on-surface: rgb(var(--v-theme-on-surface));
    --app-color-control: rgb(var(--v-theme-control));
    --app-color-control-hover: rgb(var(--v-theme-control-hover));
    --app-color-control-focus: rgb(var(--v-theme-control-focus));
    --app-color-border: rgb(var(--v-theme-border));
    --app-color-border-strong: rgb(var(--v-theme-border-strong));
    --app-color-primary: rgb(var(--v-theme-primary));
    --app-color-on-primary: rgb(var(--v-theme-on-primary));
    --app-color-secondary: rgb(var(--v-theme-secondary));
    --app-color-on-secondary: rgb(var(--v-theme-on-secondary));
    --app-color-tertiary: rgb(var(--v-theme-tertiary));
    --app-color-on-tertiary: rgb(var(--v-theme-on-tertiary));
    --app-color-accent: rgb(var(--v-theme-accent));
    --app-color-accent-strong: rgb(var(--v-theme-accent-strong));
    --app-color-highlight: rgb(var(--v-theme-highlight));
    --app-color-danger: rgb(var(--v-theme-error));
    --app-color-on-danger: rgb(var(--v-theme-on-error));
    --app-text-muted: #526178;
    --app-text-subtle: #7a8799;
    --app-border-subtle: rgba(23, 32, 51, 0.08);
    --app-border-muted: rgba(23, 32, 51, 0.06);
    --app-surface-glass: rgba(251, 250, 246, 0.84);
    --app-surface-raised: #ffffff;
    --app-control-subtle: rgb(var(--v-theme-control));
    --app-control-hover: rgb(var(--v-theme-control-hover));
    --app-control-active: rgba(23, 32, 51, 0.1);
    --app-danger-muted: rgb(var(--v-theme-error));
    --app-shadow-popover: 0 18px 40px var(--app-border-subtle);
}

a {
    color: inherit;
}

input::placeholder,
textarea::placeholder {
    color: #68778a;
}

@layer components {
    .app-sidebar .sidebar-control {
        @apply flex min-w-0 items-center gap-3 rounded-[1.1rem] px-4 py-3 text-sm font-semibold no-underline transition-colors;
        background: transparent;
        color: #44516a;
    }

    .app-sidebar .sidebar-control:hover {
        background: var(--app-control-hover);
        color: var(--app-color-on-surface);
    }

    .app-sidebar .sidebar-control-active {
        background: linear-gradient(135deg, rgba(255, 138, 61, 0.14), rgba(239, 68, 68, 0.1));
        box-shadow: inset 0 0 0 1px rgba(255, 138, 61, 0.2);
        color: var(--app-color-on-surface);
    }

    .app-sidebar .sidebar-icon-button {
        @apply flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-[1rem] transition-colors no-underline;
        background: transparent;
        color: var(--app-text-muted);
    }

    .app-sidebar .sidebar-icon-button:hover {
        background: var(--app-control-hover);
        color: var(--app-color-on-surface);
    }

    .app-sidebar .sidebar-menu-surface {
        @apply z-30 flex flex-col gap-1 rounded-[1.25rem] border p-2;
        background: var(--app-surface-raised);
        border-color: var(--app-border-subtle);
        box-shadow: var(--app-shadow-popover);
    }

    .app-sidebar .sidebar-menu-option {
        @apply flex items-center gap-3 rounded-[0.95rem] px-4 py-3 text-left text-sm font-semibold transition-colors;
        color: var(--app-color-on-surface);
    }

    .app-sidebar .sidebar-menu-option:hover {
        background: var(--app-control-hover);
    }

    .app-sidebar .sidebar-menu-option .v-icon {
        @apply text-base;
        color: var(--app-text-muted);
    }

    .app-sidebar .sidebar-menu-option-danger {
        color: var(--app-danger-muted);
    }

    .app-sidebar .sidebar-menu-option-danger .v-icon {
        color: var(--app-danger-muted);
    }

    .app-sidebar .sidebar-menu-separator {
        @apply my-1;
        border-top: 1px solid var(--app-border-subtle);
    }
}