@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    body {
        @apply bg-gray-50 text-slate-800 antialiased;
    }

    /* Force all form layouts to stack vertically system-wide. */
    form[class*="grid-cols-"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    form[class*="flex-row"],
    form[class*="sm:flex-row"],
    form[class*="md:flex-row"],
    form[class*="lg:flex-row"] {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    form[class*="grid-cols-"] > * {
        min-width: 0;
    }

    form input[type="text"],
    form input[type="email"],
    form input[type="number"],
    form input[type="date"],
    form input[type="password"],
    form input[type="datetime-local"],
    form select,
    form textarea {
        @apply mt-1.5 w-full rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-800 placeholder:text-slate-400 focus:border-emerald-500 focus:ring-emerald-500/20;
    }

    form label {
        @apply text-sm font-medium text-slate-700;
    }

    form textarea {
        @apply min-h-24;
    }

    form button[type="submit"]:not([class*="bg-rose"]):not([class*="bg-red"]) {
        @apply inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-emerald-600 to-teal-600 px-5 py-2.5 text-sm font-semibold text-white shadow-md shadow-emerald-600/20 transition hover:from-emerald-500 hover:to-teal-500 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60;
    }

    form button[type="button"]:not([class*="bg-rose"]):not([class*="bg-red"]) {
        @apply inline-flex items-center justify-center rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50;
    }

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

@layer components {
    /* Dashboard shell aligned with ezEvents-style: dark sidebar + light content */
    .app-shell {
        @apply flex min-h-screen flex-col bg-gray-50 lg:flex-row;
    }

    .app-sidebar-overlay {
        @apply fixed inset-0 z-30 bg-slate-900/50 backdrop-blur-[2px] lg:hidden;
    }

    .app-sidebar {
        @apply fixed inset-y-0 left-0 z-40 flex w-[min(18rem,92vw)] flex-col border-r border-white/10 bg-[#2f344b] text-slate-200 shadow-xl transition-transform duration-200 ease-out lg:w-72 lg:translate-x-0 lg:shadow-none;
    }

    .app-sidebar,
    .app-sidebar * {
        scrollbar-width: thin;
        scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
    }

    .app-sidebar ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

    .app-sidebar ::-webkit-scrollbar-thumb {
        background-color: rgba(148, 163, 184, 0.2);
        border-radius: 9999px;
    }

    .app-sidebar:hover ::-webkit-scrollbar-thumb {
        background-color: rgba(148, 163, 184, 0.45);
    }

    .app-sidebar ::-webkit-scrollbar-track {
        background: transparent;
    }

    .app-sidebar-link {
        @apply flex items-center rounded-lg px-3 py-2.5 text-sm font-medium text-slate-300 transition hover:bg-white/10 hover:text-white;
    }

    .app-sidebar-link-icon {
        @apply mr-2.5 h-4 w-4 flex-shrink-0 text-slate-400;
    }

    .app-sidebar-link-active {
        @apply bg-emerald-600/90 text-white hover:bg-emerald-600 hover:text-white;
    }

    .app-sidebar-link-active .app-sidebar-link-icon {
        @apply text-white;
    }

    .app-content {
        @apply flex min-h-screen flex-1 flex-col bg-gray-50 lg:pl-72;
    }

    .app-topbar {
        @apply sticky top-0 z-20 border-b border-slate-200/80 bg-white/95 shadow-sm backdrop-blur;
    }

    .page-wrap {
        @apply w-full px-4 sm:px-6 lg:px-8 py-6;
    }

    .panel {
        @apply bg-white rounded-xl shadow-sm border border-slate-200;
    }

    .mobile-scroll-table {
        @apply overflow-x-auto;
    }

    .soft-card {
        @apply rounded-2xl bg-white shadow-sm border border-slate-100;
    }

    .accent-card {
        @apply rounded-2xl bg-gradient-to-r from-indigo-500 to-violet-500 text-white shadow-md;
    }

    .chip {
        @apply inline-flex items-center rounded-xl bg-white border border-slate-200 px-3 py-2 text-xs text-slate-600;
    }

    .metric-card {
        @apply relative overflow-hidden rounded-2xl border border-slate-200 bg-white p-4 shadow-sm transition hover:shadow-md hover:-translate-y-0.5;
    }

    .metric-card-title {
        @apply text-xs font-semibold uppercase tracking-wide text-slate-500;
    }

    .metric-card-value {
        @apply mt-2 text-3xl font-bold text-slate-900;
    }

    .metric-card-foot {
        @apply mt-2 inline-flex items-center gap-1 rounded-lg px-2 py-1 text-xs font-medium;
    }

    .search-input {
        @apply w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-700 placeholder:text-slate-400 focus:border-emerald-500 focus:ring-emerald-500/20;
    }

    .mobile-tab {
        @apply flex flex-col items-center justify-center gap-1 text-[11px] text-slate-500;
    }

    .mobile-tab-active {
        @apply font-semibold text-emerald-700;
    }
}

/* Keep legacy indigo button classes visually aligned with the green theme. */
button.bg-indigo-600,
a.bg-indigo-600 {
    background-color: rgb(5 150 105) !important; /* emerald-600 */
}

button.hover\:bg-indigo-500:hover,
a.hover\:bg-indigo-500:hover,
button.hover\:bg-indigo-600:hover,
a.hover\:bg-indigo-600:hover {
    background-color: rgb(16 185 129) !important; /* emerald-500 */
}

button.focus\:ring-indigo-400:focus,
button.focus\:ring-indigo-500:focus,
a.focus\:ring-indigo-400:focus,
a.focus\:ring-indigo-500:focus {
    --tw-ring-color: rgb(52 211 153 / 0.55) !important; /* emerald-400 */
}

button.text-indigo-600,
a.text-indigo-600 {
    color: rgb(5 150 105) !important; /* emerald-600 */
}