@import 'tailwindcss';
@import './themes/cuba/variables.css';

[x-cloak] { display: none !important; }

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

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-cuba: 'Rubik', 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
    --color-cuba-primary: #7366ff;
    --color-cuba-primary-dark: #5f52e8;
    --color-cuba-secondary: #838383;
    --color-cuba-success: #65c15c;
    --color-cuba-info: #40b8f4;
    --color-cuba-warning: #f3d04f;
    --color-cuba-danger: #ff4c52;
    --color-cuba-surface: #ffffff;
    --color-cuba-canvas: #f7f8f9;
    --color-cuba-ink: #404040;
    --shadow-cuba-card: 0 9px 20px rgba(46, 35, 94, 0.07);
    --radius-cuba-card: 15px;
}

@layer components {
    .cuba-app-shell {
        @apply min-h-screen;
    }

    .cuba-sidebar {
        @apply fixed inset-y-0 left-0 z-50 flex w-64 flex-col border-r border-slate-100 bg-white shadow-sm transition-transform duration-300 ease-out;
    }

    .cuba-brand {
        @apply flex h-[76px] shrink-0 items-center gap-3 border-b border-slate-100 px-6 no-underline;
    }

    .cuba-brand-mark {
        @apply grid size-10 place-items-center rounded-xl bg-gradient-to-br from-cuba-primary to-cuba-primary-dark text-lg font-bold text-white shadow-sm;
    }

    .cuba-brand strong {
        @apply block text-sm font-bold tracking-wide text-slate-800;
    }

    .cuba-brand small {
        @apply mt-0.5 block text-xs text-slate-400;
    }

    .cuba-sidebar-scroll {
        @apply flex-1 overflow-y-auto px-4 py-6;
    }

    .cuba-nav-caption {
        @apply mb-3 px-3 text-[10px] font-bold uppercase tracking-[.16em] text-slate-400;
    }

    .cuba-nav-group + .cuba-nav-group {
        @apply mt-6 border-t border-slate-100 pt-5;
    }

    .cuba-sidebar-link {
        @apply flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-slate-600 no-underline transition hover:bg-violet-50 hover:text-cuba-primary;
    }

    .cuba-sidebar-link.is-active {
        @apply bg-violet-50 font-semibold text-cuba-primary;
    }

    .cuba-nav-icon {
        @apply grid size-8 shrink-0 place-items-center rounded-lg bg-slate-50 text-base text-slate-500;
    }

    .cuba-sidebar-link.is-active .cuba-nav-icon {
        @apply bg-white text-cuba-primary shadow-sm;
    }

    .cuba-sidebar-user {
        @apply flex shrink-0 items-center gap-3 border-t border-slate-100 px-4 py-4 text-xs text-slate-700;
    }

    .cuba-sidebar-user strong {
        @apply text-xs font-semibold;
    }

    .cuba-sidebar-user small {
        @apply mt-0.5 text-[10px] text-slate-400;
    }

    .cuba-account-action {
        @apply inline-flex min-h-9 items-center justify-center rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs font-semibold text-slate-600 no-underline transition hover:border-violet-200 hover:bg-violet-50 hover:text-cuba-primary;
    }

    .cuba-account-action.is-active {
        @apply border-violet-200 bg-violet-50 text-cuba-primary;
    }

    .cuba-avatar {
        @apply grid size-9 shrink-0 place-items-center rounded-full bg-violet-100 text-xs font-bold uppercase text-cuba-primary;
    }

    .cuba-user-menu {
        @apply absolute right-0 top-full z-50 mt-3 w-60 overflow-hidden rounded-xl border bg-white py-1;
        border-color: #dedbea;
        box-shadow: 0 16px 38px rgba(46, 35, 94, 0.18);
    }

    .cuba-user-menu-link {
        @apply block px-4 py-3 text-sm font-medium text-slate-700 no-underline transition hover:bg-violet-50 hover:text-cuba-primary;
    }

    .cuba-logout {
        @apply grid size-8 place-items-center rounded-lg text-base text-slate-400 transition hover:bg-rose-50 hover:text-rose-600;
    }

    .cuba-main {
        @apply min-h-screen min-w-0;
        width: 100%;
    }

    .cuba-header {
        @apply sticky top-0 z-30 flex min-h-[76px] items-center gap-4 border-b border-slate-200/80 bg-white/90 px-5 backdrop-blur-md sm:px-8;
    }

    .cuba-header-eyebrow {
        @apply mb-0 text-[10px] font-semibold uppercase tracking-[.12em] text-slate-400;
    }

    .cuba-header h1 {
        @apply mt-0.5 text-base font-semibold tracking-tight text-slate-800;
    }

    .cuba-header-date {
        @apply text-xs font-medium text-slate-500;
    }

    .cuba-menu-toggle {
        @apply grid size-10 shrink-0 place-items-center rounded-xl border border-slate-200 bg-white text-lg text-slate-600 transition hover:border-violet-200 hover:text-cuba-primary lg:hidden;
    }

    .cuba-content {
        @apply min-w-0 px-0 py-1 font-cuba;
    }

    .cuba-card {
        @apply rounded-[var(--radius-cuba-card)] border border-slate-200 bg-white shadow-cuba-card;
        border-color: #dedbea;
        box-shadow: 0 12px 30px rgba(46, 35, 94, 0.11), 0 2px 5px rgba(46, 35, 94, 0.05);
    }

    .cuba-topbar {
        @apply border-b border-slate-200 bg-white shadow-sm;
    }

    .cuba-button-primary {
        @apply inline-flex items-center justify-center rounded-xl bg-cuba-primary px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-cuba-primary-dark focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cuba-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
    }

    .cuba-field {
        @apply w-full rounded-lg border border-slate-200 bg-white px-3 py-2.5 text-sm text-cuba-ink outline-none transition placeholder:text-slate-400 focus:border-cuba-primary focus:ring-2 focus:ring-cuba-primary/15 disabled:bg-slate-50;
    }

    body > main > section.rounded-2xl.border.bg-white {
        border-color: #ebeaf2;
        border-radius: 18px;
        box-shadow: 0 14px 40px rgba(46, 35, 94, 0.1);
    }

    body > main > section .text-emerald-700 {
        color: #7366ff;
    }

    body > main > section button.bg-emerald-700 {
        background-image: linear-gradient(135deg, #7366ff, #5f52e8);
    }

    .cuba-content .rounded-2xl.border.bg-white,
    .cuba-content .rounded-2xl.bg-white,
    .cuba-content .rounded-xl.border.bg-white {
        border-color: #dedbea;
        border-radius: 15px;
        box-shadow: 0 12px 30px rgba(46, 35, 94, 0.11), 0 2px 5px rgba(46, 35, 94, 0.05);
    }

    .cuba-content table thead {
        background: #f7f6ff;
    }

    .cuba-content table thead th {
        color: #6d6685;
    }

    .cuba-content input:focus,
    .cuba-content select:focus,
    .cuba-content textarea:focus {
        border-color: #7366ff;
        outline: 2px solid rgb(115 102 255 / 14%);
        outline-offset: 0;
    }

    .cuba-content button.bg-emerald-700,
    .cuba-content a.bg-emerald-700 {
        background-color: #7366ff;
    }

    .cuba-content button.bg-emerald-700:hover,
    .cuba-content a.bg-emerald-700:hover {
        background-color: #5f52e8;
    }

    .cuba-content button.bg-emerald-800,
    .cuba-content button.bg-emerald-700,
    .cuba-content a.bg-emerald-700 {
        background-image: linear-gradient(135deg, #7366ff, #5f52e8);
    }

    .cuba-content .text-emerald-700 {
        color: #7366ff;
    }

    .cuba-content .bg-emerald-950 {
        background-image: linear-gradient(125deg, #7366ff 0%, #5f52e8 58%, #493bc8 100%);
    }

    .cuba-content .text-emerald-800 {
        color: #5f52e8;
    }

    .cuba-content .bg-emerald-950.rounded-2xl {
        border-radius: 18px;
        box-shadow: 0 16px 35px rgb(95 82 232 / 20%);
    }
}

.cuba-stat-grid > div {
    position: relative;
    isolation: isolate;
    min-height: 132px;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 35%) !important;
    border-radius: 18px !important;
    padding: 1.25rem !important;
    background: linear-gradient(135deg, #3885f6, #315edb) !important;
    box-shadow: 0 16px 32px rgb(39 81 179 / 19%), inset 0 1px rgb(255 255 255 / 18%) !important;
    color: #fff !important;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.cuba-overview-stat {
    border-color: rgb(255 255 255 / 22%) !important;
    background: linear-gradient(145deg, rgb(255 255 255 / 17%), rgb(255 255 255 / 8%)) !important;
    box-shadow: 0 10px 24px rgb(25 20 80 / 15%), inset 0 1px rgb(255 255 255 / 15%) !important;
    backdrop-filter: blur(8px);
}

.cuba-stat-grid > div:nth-child(2) {
    background: linear-gradient(135deg, #8175ff, #5d4ce0) !important;
    box-shadow: 0 16px 32px rgb(92 76 224 / 20%), inset 0 1px rgb(255 255 255 / 18%) !important;
}

.cuba-stat-grid > div:nth-child(3) {
    background: linear-gradient(135deg, #21a6c5, #087f9e) !important;
    box-shadow: 0 16px 32px rgb(8 127 158 / 20%), inset 0 1px rgb(255 255 255 / 18%) !important;
}

.cuba-stat-grid > div:nth-child(4) {
    background: linear-gradient(135deg, #ed9a47, #d36c2c) !important;
    box-shadow: 0 16px 32px rgb(211 108 44 / 20%), inset 0 1px rgb(255 255 255 / 18%) !important;
}

.cuba-stat-grid > div::after {
    position: absolute;
    z-index: -1;
    right: -2.5rem;
    bottom: -4rem;
    width: 10rem;
    height: 10rem;
    border: 1px solid rgb(255 255 255 / 17%);
    border-radius: 9999px;
    background: rgb(255 255 255 / 8%);
    content: '';
}

.cuba-stat-grid > div > div:first-child,
.cuba-stat-grid > div > div:last-child {
    color: rgb(255 255 255 / 86%) !important;
}

.cuba-stat-grid > div > div:nth-child(2) {
    color: #fff !important;
    font-size: 2rem;
    line-height: 1.1;
    font-weight: 700;
}

@media (hover: hover) {
    .cuba-stat-grid > div:hover {
        transform: translateY(-3px);
        box-shadow: 0 21px 38px rgb(39 81 179 / 25%), inset 0 1px rgb(255 255 255 / 18%) !important;
    }
}

@media (min-width: 1024px) {
    .cuba-main {
        margin-left: 16rem;
        width: calc(100% - 16rem);
    }
}

@media (max-width: 639px) {
    .cuba-header {
        gap: 0.65rem;
        padding-inline: 0.875rem;
    }

    .cuba-header h1 {
        font-size: 0.9rem;
    }

    .cuba-content label.min-w-56,
    .cuba-content label.min-w-72 {
        width: 100%;
        min-width: 0;
    }
}