@import 'tailwindcss';

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

@theme {
    --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
}

@layer base {
    body {
        font-family: var(--font-sans);
        min-height: 100vh;
        background:
            radial-gradient(circle at top left, rgba(20, 184, 166, 0.24), transparent 28%),
            radial-gradient(circle at top right, rgba(249, 115, 22, 0.24), transparent 30%),
            linear-gradient(160deg, #07111d 0%, #0d1724 50%, #101b2a 100%);
        color: #e5eef8;
    }

    .container {
        @apply mx-auto px-6 max-w-7xl;
    }

    .hero-badge {
        @apply inline-flex items-center rounded-full bg-amber-500/10 border border-amber-400/30 px-4 py-2 text-sm font-semibold text-amber-100;
    }

    .glass-card {
        @apply rounded-[2rem] bg-white/10 border border-white/10 shadow-[0_24px_80px_rgba(0,0,0,0.22)] backdrop-blur-xl;
    }

    .text-soft {
        color: rgba(229, 238, 248, 0.72);
    }

    .section-label {
        @apply uppercase tracking-[0.18em] text-xs text-cyan-300 font-semibold;
    }

    .btn {
        @apply inline-flex items-center justify-center rounded-2xl border border-transparent px-5 py-3 text-sm font-semibold transition-all duration-200 ease-in-out;
    }

    .btn-warning {
        @apply bg-amber-500 text-slate-950 hover:bg-amber-400;
    }

    .btn-outline-light {
        @apply border border-slate-200/20 text-slate-100 hover:bg-white/10;
    }

    .btn-outline-info {
        @apply border border-sky-400/30 text-sky-300 hover:bg-sky-500/10;
    }

    .btn-sm {
        @apply px-3 py-2 text-xs;
    }

    .badge {
        @apply inline-flex items-center rounded-full px-3 py-1 text-[0.65rem] font-semibold uppercase tracking-[0.22em] bg-slate-800/70 text-slate-100;
    }

    .badge-success {
        @apply border border-emerald-400/20 bg-emerald-500/15 text-emerald-200;
    }

    .badge-secondary {
        @apply border border-slate-500/20 bg-slate-700/20 text-slate-100;
    }

    .badge-info {
        @apply border border-sky-400/20 bg-sky-500/15 text-sky-100;
    }

    .badge-warning {
        @apply border border-amber-400/20 bg-amber-500/15 text-amber-100;
    }

    .form-control,
    .form-select,
    .form-textarea {
        @apply w-full rounded-2xl border border-white/15 bg-white/5 px-4 py-3 text-slate-100 placeholder:text-slate-400 focus:border-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-500/25;
    }

    .form-control.is-invalid,
    .form-select.is-invalid {
        @apply border-rose-400;
    }

    .invalid-feedback {
        @apply mt-2 text-sm text-rose-300;
    }

    .form-actions {
        @apply mt-6 flex flex-wrap gap-3 border-t border-white/10 pt-4;
    }

    .alert {
        @apply fixed right-4 top-4 z-50 min-w-[300px] rounded-2xl border border-white/10 px-5 py-4 shadow-2xl;
    }

    .alert-success {
        @apply bg-emerald-500/10 border-emerald-500/20 text-emerald-100;
    }

    .alert-danger {
        @apply bg-rose-500/10 border-rose-500/20 text-rose-100;
    }

    .alert-warning {
        @apply bg-amber-500/10 border-amber-500/20 text-amber-100;
    }

    .alert-info {
        @apply bg-sky-500/10 border-sky-500/20 text-sky-100;
    }

    .btn-close {
        @apply inline-flex h-8 w-8 items-center justify-center rounded-full text-slate-300 hover:bg-white/10 hover:text-white;
    }

    .btn-close-white {
        @apply text-slate-200;
    }

    .breadcrumb {
        @apply flex flex-wrap items-center gap-2 text-slate-400 list-none p-0 m-0;
    }

    .breadcrumb-item a {
        @apply text-cyan-300 hover:text-amber-300;
    }

    .breadcrumb-item.active {
        @apply text-slate-100;
    }

    .breadcrumb-item + .breadcrumb-item::before {
        content: '/';
        @apply text-slate-500;
        margin: 0 0.5rem;
    }

    .sidebar-overlay {
        @apply fixed inset-0 z-40 hidden bg-slate-950/70;
    }

    .sidebar {
        @apply fixed inset-y-0 left-0 z-50 w-72 transform border-r border-slate-700 bg-slate-950 transition-transform duration-300 ease-in-out;
    }

    @media (min-width: 1024px) {
        .sidebar {
            transform: translateX(0) !important;
        }
    }

    .sidebar-hidden {
        transform: translateX(-100%);
    }

    .sidebar-visible {
        transform: translateX(0);
    }

    .transition {
        @apply transition duration-200 ease-in-out;
    }

    .text-decoration-none {
        text-decoration: none;
    }

    .fw-bold {
        font-weight: 700;
    }

    .fw-semibold {
        font-weight: 600;
    }

    .fw-black {
        font-weight: 900;
    }

    .text-light {
        color: rgba(255, 255, 255, 0.9);
    }

    .text-secondary {
        color: #94a3b8;
    }

    .text-muted {
        color: #94a3b8;
    }

    .border-secondary {
        border-color: rgba(148, 163, 184, 0.25);
    }

    .rounded-4 {
        border-radius: 1rem;
    }

    .rounded-5 {
        border-radius: 1.25rem;
    }

    .rounded-pill {
        border-radius: 9999px;
    }

    .d-flex {
        @apply flex;
    }

    .align-items-center {
        @apply items-center;
    }

    .justify-content-between {
        @apply justify-between;
    }

    .flex-wrap {
        @apply flex-wrap;
    }

    .gap-2 {
        @apply gap-2;
    }

    .gap-3 {
        @apply gap-3;
    }

    .g-5 > * {
        padding: 1.25rem;
    }

    .g-4 > * {
        padding: 1rem;
    }

    .g-3 > * {
        padding: 0.75rem;
    }

    .w-100 {
        @apply w-full;
    }

    .h-100 {
        height: 100%;
    }

    .px-3 {
        @apply px-3;
    }

    .py-3 {
        @apply py-3;
    }

    .px-4 {
        @apply px-4;
    }

    .py-4 {
        @apply py-4;
    }

    .row {
        @apply flex flex-wrap -mx-3;
    }

    .row > * {
        @apply px-3;
    }

    .col-lg-6,
    .col-md-6,
    .col-6 {
        @apply w-full;
    }

    @media (min-width: 768px) {
        .col-md-6,
        .col-6 {
            width: 50%;
        }
    }

    @media (min-width: 992px) {
        .col-lg-6 {
            width: 50%;
        }
    }

    .col-lg-5 {
        @apply w-full;
    }

    @media (min-width: 992px) {
        .col-lg-5 {
            width: 41.666667%;
        }
    }

    .form-label {
        @apply block text-sm font-semibold text-slate-100;
    }

    .form-check-input {
        @apply h-4 w-4 rounded border-white/20 bg-slate-900 text-amber-500;
    }

    .form-check-label {
        @apply inline-flex items-center gap-2 text-soft;
    }

    .list-unstyled {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .row {
        @apply flex flex-wrap -mx-3;
    }

    .row > * {
        @apply px-3;
    }

    .col-12 {
        @apply w-full;
    }

    .col-md-6 {
        @apply w-full;
    }

    @media (min-width: 768px) {
        .col-md-6 {
            width: 50%;
        }
    }
}