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

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

@layer components {
    .btn {
        @apply inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2.5 text-sm font-semibold transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50;
    }
    .btn-primary {
        @apply btn bg-transtev-600 text-white hover:bg-transtev-700 focus:ring-transtev-500 shadow-sm;
    }
    .btn-secondary {
        @apply btn bg-white text-slate-700 border border-slate-200 hover:bg-slate-50 focus:ring-slate-300;
    }
    .btn-danger {
        @apply btn bg-red-50 text-red-700 border border-red-100 hover:bg-red-100 focus:ring-red-300;
    }
    .btn-success {
        @apply btn bg-emerald-600 text-white hover:bg-emerald-700 focus:ring-emerald-500;
    }
    .btn-accent {
        @apply btn bg-transtev-accent text-white hover:bg-amber-600 focus:ring-amber-400;
    }
    .btn-sm {
        @apply px-3 py-1.5 text-xs;
    }
    .card {
        @apply bg-white rounded-2xl border border-slate-100 shadow-card;
    }
    .input-modern {
        @apply w-full rounded-lg border-slate-200 shadow-sm focus:border-transtev-500 focus:ring-transtev-500 text-sm;
    }
    .sidebar-link {
        @apply flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium transition-all duration-200;
    }
    .sidebar-link-active {
        @apply sidebar-link bg-white/15 text-white shadow-sm;
    }
    .sidebar-link-inactive {
        @apply sidebar-link text-blue-100 hover:bg-white/10 hover:text-white;
    }
    .stat-card {
        @apply card p-6 hover:shadow-card-hover transition-shadow duration-300;
    }
    .table-modern thead {
        @apply bg-slate-50;
    }
    .table-modern th {
        @apply px-5 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500;
    }
    .table-modern td {
        @apply px-5 py-4 text-sm text-slate-700;
    }
    .table-modern tbody tr {
        @apply border-t border-slate-100 hover:bg-slate-50/50 transition-colors;
    }
    .badge {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold;
    }
    .badge-success {
        @apply badge bg-emerald-100 text-emerald-800;
    }
    .badge-warning {
        @apply badge bg-amber-100 text-amber-800;
    }
    .badge-danger {
        @apply badge bg-red-100 text-red-800;
    }
    .badge-info {
        @apply badge bg-blue-100 text-blue-800;
    }
    .table-scroll-wrap {
        @apply overflow-x-auto overflow-y-auto w-full max-h-80 sm:max-h-[28rem] rounded-xl border border-slate-200;
    }
    .table-scroll-wrap table {
        @apply min-w-full text-sm;
    }
    .table-scroll-wrap thead th {
        @apply sticky top-0 z-10 shadow-[0_1px_0_0_rgb(226_232_240)];
    }
    .group-content-scroll {
        @apply overflow-y-auto overflow-x-auto w-full min-h-0;
    }
    .group-content-scroll--l1 {
        @apply max-h-[min(70vh,calc(100vh-14rem))];
    }
    .group-content-scroll--l2 {
        @apply max-h-[min(55vh,calc(100vh-18rem))];
    }
    .group-content-scroll--l3 {
        @apply max-h-[min(45vh,calc(100vh-22rem))];
    }

    /* --- Pièces jointes : carte d'aperçu --- */
    .file-preview-card {
        @apply inline-flex items-center gap-3 max-w-full rounded-xl border border-slate-200 bg-white px-3 py-2 shadow-sm;
    }
    .file-preview-card--compact {
        @apply gap-2 px-2 py-1.5;
    }
    .file-preview-thumb {
        @apply shrink-0 h-12 w-12 overflow-hidden rounded-lg border border-slate-200 bg-slate-50 transition hover:ring-2 hover:ring-transtev-400;
    }
    .file-preview-thumb img {
        @apply h-full w-full object-cover;
    }
    .file-preview-icon {
        @apply shrink-0 flex h-12 w-12 items-center justify-center rounded-lg;
    }
    .file-preview-icon svg {
        @apply h-6 w-6;
    }
    .file-preview-icon--pdf {
        @apply bg-red-50 text-red-500;
    }
    .file-preview-icon--doc {
        @apply bg-slate-100 text-slate-500;
    }
    .file-preview-body {
        @apply min-w-0 flex flex-col;
    }
    .file-preview-name {
        @apply truncate max-w-[220px] text-sm font-medium text-slate-700;
    }
    .file-preview-card--compact .file-preview-name {
        @apply max-w-[130px] text-xs;
    }
    .file-preview-actions {
        @apply flex items-center gap-3 mt-0.5;
    }
    .file-preview-link {
        @apply text-xs font-semibold text-transtev-600 hover:text-transtev-700 hover:underline cursor-pointer;
    }
    .file-preview-link--muted {
        @apply text-slate-500 hover:text-slate-700 font-medium;
    }

    /* --- Pièces jointes : zone d'upload --- */
    .file-dropzone {
        @apply flex items-center gap-3 w-full cursor-pointer rounded-xl border-2 border-dashed border-slate-300 bg-slate-50 px-4 py-3 text-sm text-slate-600 transition hover:border-transtev-400 hover:bg-transtev-50/40;
    }
    .file-dropzone--sm {
        @apply gap-2 px-2.5 py-1.5 text-xs;
    }
    .file-dropzone--filled {
        @apply border-solid border-transtev-300 bg-transtev-50/40;
    }
    .file-dropzone-icon {
        @apply shrink-0 h-5 w-5 text-transtev-500;
    }
    .file-dropzone--sm .file-dropzone-icon {
        @apply h-4 w-4;
    }
    .file-dropzone-text {
        @apply min-w-0 truncate;
    }
    .file-dropzone-accent {
        @apply font-semibold text-transtev-600;
    }
    .file-dropzone-filename {
        @apply truncate font-medium text-slate-700;
    }
    .file-input-local-preview {
        @apply mt-1;
    }
    .file-input-local-thumb {
        @apply h-20 w-20 rounded-lg border border-slate-200 object-cover;
    }

    /* --- Pièces jointes : lightbox --- */
    .file-lightbox {
        @apply fixed inset-0 z-[100] flex flex-col bg-slate-900/80 p-4 sm:p-8 backdrop-blur-sm;
    }
    .file-lightbox-header {
        @apply flex items-center justify-between gap-4 text-white mb-3;
    }
    .file-lightbox-title {
        @apply truncate text-sm font-medium;
    }
    .file-lightbox-header-actions {
        @apply flex items-center gap-4 shrink-0;
    }
    .file-lightbox-btn {
        @apply text-sm font-semibold text-white/90 hover:text-white hover:underline;
    }
    .file-lightbox-close {
        @apply flex h-9 w-9 items-center justify-center rounded-full bg-white/10 text-2xl leading-none text-white hover:bg-white/20;
    }
    .file-lightbox-body {
        @apply flex-1 min-h-0 flex items-center justify-center;
    }
    .file-lightbox-image {
        @apply max-h-full max-w-full rounded-lg object-contain shadow-2xl;
    }
    .file-lightbox-frame {
        @apply h-full w-full max-w-5xl rounded-lg bg-white;
    }
}

@layer utilities {
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }
    .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}