@import 'tailwindcss';

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

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

    /* Merahkie PMS Lite Brand Colors */
    --color-brand-50:  #eef2ff;
    --color-brand-100: #e0e7ff;
    --color-brand-200: #c7d2fe;
    --color-brand-300: #a5b4fc;
    --color-brand-400: #818cf8;
    --color-brand-500: #6366f1;
    --color-brand-600: #4f46e5;
    --color-brand-700: #4338ca;
    --color-brand-800: #3730a3;
    --color-brand-900: #312e81;

    /* Sidebar */
    --color-sidebar-bg: #0f172a;
    --color-sidebar-hover: #1e293b;
    --color-sidebar-active: #4f46e5;
    --color-sidebar-text: #94a3b8;
    --color-sidebar-text-active: #ffffff;
}

/* Sidebar nav link */
.sidebar-link {
    @apply flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-400 text-sm font-medium transition-all duration-150 cursor-pointer;
}
.sidebar-link:hover {
    @apply bg-slate-800 text-white;
}
.sidebar-link.active {
    @apply bg-indigo-600 text-white;
}
.sidebar-link .nav-icon {
    @apply w-5 h-5 shrink-0 opacity-70;
}
.sidebar-link.active .nav-icon {
    @apply opacity-100;
}

/* Status badges */
.badge-available  { @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-700; }
.badge-occupied   { @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-red-100 text-red-700; }
.badge-reserved   { @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-blue-100 text-blue-700; }
.badge-maintenance{ @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-amber-100 text-amber-700; }
.badge-confirmed  { @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-indigo-100 text-indigo-700; }
.badge-checkedin  { @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-700; }
.badge-checkedout { @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-slate-100 text-slate-600; }
.badge-cancelled  { @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-red-100 text-red-700; }
.badge-clean      { @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-700; }
.badge-dirty      { @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-red-100 text-red-700; }
.badge-inspecting { @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-amber-100 text-amber-700; }

/* Table styles */
.pms-table { @apply min-w-full divide-y divide-gray-200; }
.pms-table thead { @apply bg-gray-50; }
.pms-table th { @apply px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider; }
.pms-table td { @apply px-4 py-3.5 text-sm text-gray-700 whitespace-nowrap; }
.pms-table tbody tr { @apply border-b border-gray-100 hover:bg-gray-50 transition-colors; }

/* Form inputs */
.pms-input  { @apply block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500; }
.pms-input.pl-9 { padding-left: 2.25rem !important; }
.pms-select { @apply block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500; }
.pms-label  { @apply block text-sm font-medium text-gray-700 mb-1; }

/* Buttons */
.btn-primary   { @apply inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-colors; }
.btn-secondary { @apply inline-flex items-center gap-2 rounded-lg bg-white px-4 py-2 text-sm font-semibold text-gray-700 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 transition-colors; }
.btn-danger    { @apply inline-flex items-center gap-2 rounded-lg bg-red-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-700 transition-colors; }
.btn-success   { @apply inline-flex items-center gap-2 rounded-lg bg-emerald-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-emerald-700 transition-colors; }
.btn-warning   { @apply inline-flex items-center gap-2 rounded-lg bg-amber-500 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-amber-600 transition-colors; }
.btn-sm        { @apply px-3 py-1.5 text-xs; }
.btn-icon      { @apply inline-flex items-center justify-center w-8 h-8 rounded-lg text-gray-400 hover:bg-gray-100 hover:text-gray-600 transition-colors; }

/* Card */
.pms-card { @apply bg-white rounded-xl shadow-sm border border-gray-100; }
.pms-card-header { @apply px-5 py-4 border-b border-gray-100 flex items-center justify-between; }

/* Drawer (slide-over) */
.drawer-overlay { @apply fixed inset-0 bg-gray-900/60 z-40 backdrop-blur-sm; }
.drawer-panel   { @apply fixed right-0 top-0 h-full w-full max-w-lg bg-white z-50 shadow-2xl flex flex-col; }
.drawer-header  { @apply flex items-center justify-between px-6 py-5 border-b border-gray-100; }
.drawer-body    { @apply flex-1 overflow-y-auto px-6 py-5; }
.drawer-footer  { @apply px-6 py-4 border-t border-gray-100 flex items-center justify-end gap-3; }

/* Stat card */
.stat-card { @apply bg-white rounded-xl p-5 shadow-sm border border-gray-100 flex items-center gap-4; }
.stat-icon { @apply w-12 h-12 rounded-xl flex items-center justify-center text-2xl shrink-0; }

/* Hide scrollbar utility */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
