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

@layer base {
    html {
        -webkit-tap-highlight-color: transparent;
    }

    body {
        @apply bg-slate-100 text-slate-800 antialiased;
    }

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

@layer components {
    .hms-card {
        @apply rounded-xl border border-slate-200 bg-white shadow-card;
    }

    .hms-card-header {
        @apply flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 px-5 py-4;
    }

    .hms-card-body {
        @apply px-5 py-4;
    }

    .hms-label {
        @apply mb-1 block text-sm font-medium text-slate-700;
    }

    .hms-input {
        @apply block w-full rounded-lg border-slate-300 text-sm shadow-sm placeholder:text-slate-400 focus:border-brand-500 focus:ring-brand-500 disabled:bg-slate-100 disabled:text-slate-500;
    }

    .hms-hint {
        @apply mt-1 text-xs text-slate-500;
    }

    .hms-error {
        @apply mt-1 text-xs font-medium text-red-600;
    }

    .hms-btn {
        @apply inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-semibold transition focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60;
    }

    .hms-btn-primary {
        @apply hms-btn bg-brand-600 text-white hover:bg-brand-700 focus:ring-brand-500;
    }

    .hms-btn-secondary {
        @apply hms-btn border border-slate-300 bg-white text-slate-700 hover:bg-slate-50 focus:ring-brand-500;
    }

    .hms-btn-danger {
        @apply hms-btn bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
    }

    .hms-btn-ghost {
        @apply hms-btn text-slate-600 hover:bg-slate-100 focus:ring-slate-400;
    }

    .hms-btn-sm {
        @apply px-2.5 py-1.5 text-xs;
    }

    .hms-table {
        @apply min-w-full divide-y divide-slate-200 text-sm;
    }

    .hms-table thead {
        @apply bg-slate-50;
    }

    .hms-table th {
        @apply whitespace-nowrap px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500;
    }

    .hms-table td {
        @apply whitespace-nowrap px-4 py-3 text-slate-700;
    }

    .hms-table tbody tr {
        @apply border-b border-slate-100 last:border-0 hover:bg-slate-50/70;
    }

    .hms-link {
        @apply font-medium text-brand-700 hover:text-brand-800 hover:underline;
    }

    .hms-tab {
        @apply whitespace-nowrap border-b-2 border-transparent px-4 py-3 text-sm font-medium text-slate-500 hover:border-slate-300 hover:text-slate-700;
    }

    .hms-tab-active {
        @apply border-brand-600 text-brand-700;
    }

    .hms-dl dt {
        @apply text-xs font-medium uppercase tracking-wide text-slate-500;
    }

    .hms-dl dd {
        @apply mt-0.5 text-sm text-slate-800;
    }
}

@media print {
    .no-print {
        display: none !important;
    }

    body {
        @apply bg-white;
    }

    .print-block {
        break-inside: avoid;
    }
}