@import "tailwindcss";
@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;
}

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

.v-application {
    background: rgb(var(--v-theme-background)) !important;
    color: rgb(var(--v-theme-on-background));
}

.v-card,
.v-sheet,
.v-list,
.v-menu > .v-overlay__content,
.v-dialog > .v-overlay__content {
    background-color: rgb(var(--v-theme-surface)) !important;
    border: 1px solid rgb(var(--v-theme-border));
}

.v-field {
    background-color: rgb(var(--v-theme-control)) !important;
    color: rgb(var(--v-theme-on-surface));
}

.v-field:hover {
    background-color: rgb(var(--v-theme-control-hover)) !important;
}

.v-field--focused {
    background-color: rgb(var(--v-theme-control-focus)) !important;
}

.v-field__outline {
    color: rgb(var(--v-theme-border-strong));
}

.v-field--focused .v-field__outline {
    color: rgb(var(--v-theme-highlight));
}

.v-field__input,
.v-field-label {
    color: rgb(var(--v-theme-on-surface));
}

.v-select .v-field .v-field__input > input,
.v-select .v-field .v-field__input > input::placeholder {
    color: transparent !important;
    caret-color: transparent;
}

.panel,
[class$='-panel'],
[class$='-card'],
div.card {
    border-color: rgb(var(--v-theme-border)) !important;
}

@layer components {
    .btn {
        @apply min-w-24 w-full;
        @apply p-4;
        @apply flex flex-nowrap gap-4 items-center justify-center;
        @apply rounded-lg;
        @apply capitalize text-base font-sans font-medium;
        @apply px-10;
        @apply cursor-pointer;
    }

    button.primary {
        @apply min-w-24 w-full;
        @apply p-4;
        @apply flex flex-nowrap gap-4 items-center justify-center;
        @apply rounded-lg;
        @apply capitalize text-base font-sans font-medium;
        @apply px-10;
        @apply cursor-pointer;
        @apply bg-hPrimary text-hOnPrimary;
        @apply hover:brightness-125;
    }

    button.secondary {
        @apply min-w-24 w-full;
        @apply p-4;
        @apply flex flex-nowrap gap-4 items-center justify-center;
        @apply rounded-lg;
        @apply capitalize text-base font-sans font-medium;
        @apply px-10;
        @apply cursor-pointer;
        @apply bg-hSecondary text-hOnSecondary;
        @apply hover:brightness-125;
    }

    div.dialog {
        @apply max-h-[90vh];
        @apply place-self-center;
    }

    div.card {
        @apply w-full max-w-[1024px];
        @apply rounded-xl p-4;
        @apply flex flex-col gap-4;
        @apply bg-hSurface text-hOnSurface;
    }

    /* Specific styling for dialog cards */
    div.card.dialog {
        @apply bg-hSurface text-hOnSurface;
        @apply rounded-xl;
        @apply shadow-lg;
    }

    div.card-title {
        @apply font-sans font-bold text-2xl;
        @apply p-2;
        @apply text-hOnSurface;
    }

    div.card-content {
        @apply flex flex-col gap-4;
        @apply p-2;
        @apply text-hOnSurface;
        @apply overflow-y-auto max-h-[60vh];
    }

    div.card-actions {
        @apply p-2;
        @apply flex flex-row gap-4 justify-end;
    }

    div.card-actions > * {
        @apply w-fit;
        @apply sm:min-w-40 min-w-0;
    }
}