@import 'tailwindcss';
/*@import "@plugins/Toastra/src/message.css";*/
@import '@plugins/GlassToastra/style.css';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';
    --color-glass-bg: rgba(17, 24, 39, 0.55);
    --color-glass-border: rgba(255, 255, 255, 0.08);
    --color-glass-light: rgba(31, 41, 55, 0.4);

    --color-accent: #06b6d4;      /* cyan-500 */
    --color-accent-600: #0891b2;  /* cyan-600 */
    --color-accent-700: #0e7490;  /* cyan-700 */
    --color-ring: rgba(34, 197, 94, .35); /* ein Hauch Grün im Focus-Glow */
}


/* Reusable utilities */
.glass-card {
    @apply bg-glass-bg/70 backdrop-blur-md border border-glass-border rounded-2xl shadow-[0_8px_30px_rgba(0,0,0,.25)];
}
.glass-input {
    @apply bg-glass-light/50 border border-glass-border rounded-lg text-gray-100 placeholder-gray-400
    focus:outline-none focus:ring-4 focus:ring-[var(--color-ring)] focus:border-cyan-500/60
    transition-colors;
}
.btn-primary {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-lg text-white font-medium
    bg-gradient-to-b from-cyan-500 to-cyan-600 hover:from-cyan-400 hover:to-cyan-600
    focus:outline-none focus:ring-4 focus:ring-[var(--color-ring)]
    shadow-[inset_0_1px_0_rgba(255,255,255,.08),0_8px_20px_rgba(0,0,0,.25)];
}
.badge {
    @apply text-xs px-2 py-0.5 rounded-md border border-glass-border text-gray-300/80 bg-glass-light/40;
}
.card-title {
    @apply text-gray-100/95 font-semibold tracking-wide;
}
.card-subtle {
    @apply text-gray-300/70 text-sm leading-relaxed;
}

/* Zustände für Inputs */
.input-error {
    @apply border-red-400/50 focus:border-red-400/70 focus:ring-red-400/30;
}
.input-success {
    @apply border-emerald-400/50 focus:border-emerald-400/70 focus:ring-emerald-400/30;
}
.input-disabled {
    @apply opacity-60 cursor-not-allowed;
}

/* Label & Fehlermeldung */
.field-label {
    @apply block text-sm text-gray-300 mb-1;
}
.field-error {
    @apply mt-1 text-xs text-red-300;
}
.field-help {
    @apply mt-1 text-xs text-gray-400;
}

/* Select im gleichen Look wie .glass-input */
.glass-select {
    @apply bg-glass-light/50 border border-glass-border rounded-lg text-gray-100
    focus:outline-none focus:ring-4 focus:ring-[var(--color-ring)]
    focus:border-cyan-500/60 transition-colors;
}

/* Input mit Icon links (Wrapper) */
.input-with-icon {
    @apply relative;
}
.input-with-icon > .icon-left {
    @apply absolute inset-y-0 left-3 flex items-center text-gray-400;
}
.input-with-icon > input {
    @apply pl-10; /* Platz für Icon */
}

/* Karten-Interaktion (leichtes Hover-Lift) */
.glass-card:hover {
    @apply shadow-[0_12px_38px_rgba(0,0,0,.3)];
}

/* Buttons – zusätzliche Varianten */
.btn-ghost {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-lg text-gray-200
    bg-white/5 border border-white/10 hover:bg-white/10
    focus:outline-none focus:ring-4 focus:ring-[var(--color-ring)];
}
.btn-danger {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-lg text-white
    bg-gradient-to-b from-rose-500 to-rose-600 hover:from-rose-400 hover:to-rose-600
    focus:outline-none focus:ring-4 focus:ring-rose-400/40;
}

/* Checkbox/Switch im Glas-Look */
.glass-checkbox {
    @apply h-4 w-4 rounded border border-glass-border bg-white/10
    checked:bg-cyan-500 checked:border-cyan-500
    focus:ring-2 focus:ring-[var(--color-ring)];
}

/* Trennlinie in Karten */
.divider {
    @apply border-t border-glass-border/80 my-6;
}