/* Custom utility classes for Filament admin views
 * Plain CSS equivalents of Tailwind classes used in custom blade views.
 * Loaded via FilamentAsset in AppServiceProvider.
 */

/* ── Primary color utilities (suivent la couleur du panel) ── */
.bg-primary-50       { background-color: rgb(var(--primary-50)); }
.bg-primary-100      { background-color: rgb(var(--primary-100)); }
.bg-primary-500      { background-color: rgb(var(--primary-500)); }
.bg-primary-600      { background-color: rgb(var(--primary-600)); }
.hover\:bg-primary-500:hover { background-color: rgb(var(--primary-500)); }

.text-primary-500    { color: rgb(var(--primary-500)); }
.text-primary-600    { color: rgb(var(--primary-600)); }
.text-primary-700    { color: rgb(var(--primary-700)); }
.text-primary-800    { color: rgb(var(--primary-800)); }
.hover\:text-primary-600:hover { color: rgb(var(--primary-600)); }
.hover\:text-primary-800:hover { color: rgb(var(--primary-800)); }

.border-primary-500  { border-color: rgb(var(--primary-500)); }
.focus\:border-primary-500:focus { border-color: rgb(var(--primary-500)); }
.focus\:ring-primary-500:focus   { --tw-ring-color: rgb(var(--primary-500)); }
.focus\:ring-primary-600:focus   { --tw-ring-color: rgb(var(--primary-600)); }

.file\:bg-primary-50::file-selector-button       { background-color: rgb(var(--primary-50)); }
.file\:text-primary-700::file-selector-button    { color: rgb(var(--primary-700)); }
.hover\:file\:bg-primary-100:hover::file-selector-button { background-color: rgb(var(--primary-100)); }

@media (prefers-color-scheme: dark) {
    .dark\:text-primary-400 { color: rgb(var(--primary-400)); }
}

/* ── Spacing ────────────────────────────────────── */
.mb-1  { margin-bottom: 0.25rem; }
.mb-2  { margin-bottom: 0.5rem; }
.mb-3  { margin-bottom: 0.75rem; }
.mb-4  { margin-bottom: 1rem; }
.mt-1  { margin-top: 0.25rem; }
.mt-2  { margin-top: 0.5rem; }
.mt-3  { margin-top: 0.75rem; }
.mt-4  { margin-top: 1rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.ml-1  { margin-left: 0.25rem; }
.ml-2  { margin-left: 0.5rem; }
.ml-7  { margin-left: 1.75rem; }
.mr-1  { margin-right: 0.25rem; }
.mr-4  { margin-right: 1rem; }
.mx-1  { margin-left: 0.25rem; margin-right: 0.25rem; }
.mx-2  { margin-left: 0.5rem;  margin-right: 0.5rem; }

/* ── Border radius ──────────────────────────────── */
.rounded-lg   { border-radius: 0.5rem; }
.rounded-xl   { border-radius: 0.75rem; }
.rounded-2xl  { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }

/* ── Backgrounds ────────────────────────────────── */
.bg-red-50    { background-color: #fef2f2; }
.bg-red-100   { background-color: #fee2e2; }
.bg-red-200   { background-color: #fecaca; }
.bg-red-600   { background-color: #dc2626; }

.bg-green-50  { background-color: #f0fdf4; }
.bg-green-100 { background-color: #dcfce7; }
.bg-green-200 { background-color: #bbf7d0; }
.bg-green-500 { background-color: #22c55e; }
.bg-green-600 { background-color: #16a34a; }

.bg-amber-100  { background-color: #fef3c7; }
.bg-amber-400  { background-color: #fbbf24; }

.bg-yellow-100 { background-color: #fef9c3; }

.bg-orange-100 { background-color: #ffedd5; }

.bg-blue-100   { background-color: #dbeafe; }

.bg-gray-600   { background-color: #4b5563; }
.bg-gray-700   { background-color: #374151; }
.bg-gray-800   { background-color: #1f2937; }

/* ── Text colors ────────────────────────────────── */
.text-red-400   { color: #f87171; }
.text-red-800   { color: #991b1b; }

.text-green-400 { color: #4ade80; }
.text-green-800 { color: #166534; }

.text-amber-800  { color: #92400e; }

.text-gray-900   { color: #111827; }

.text-yellow-800 { color: #854d0e; }

.text-orange-800 { color: #9a3412; }

.text-blue-800   { color: #1e40af; }

/* ── Border colors ──────────────────────────────── */
.border-red-200   { border-color: #fecaca; }
.border-green-200 { border-color: #bbf7d0; }

/* ── Hover states ───────────────────────────────── */
.hover\:bg-red-500:hover    { background-color: #ef4444; }
.hover\:bg-green-500:hover  { background-color: #22c55e; }
.hover\:bg-gray-50:hover    { background-color: #f9fafb; }
.hover\:bg-gray-100:hover   { background-color: #f3f4f6; }
.hover\:bg-gray-700:hover   { background-color: #374151; }


/* ── Success color utilities ────────────────────── */
.bg-success-500      { background-color: rgb(var(--success-500, 34 197 94)); }
.bg-success-600      { background-color: rgb(var(--success-600, 22 163 74)); }
.hover\:bg-success-500:hover { background-color: rgb(var(--success-500, 34 197 94)); }
.text-success-600    { color: rgb(var(--success-600, 22 163 74)); }

/* ── File input button (album photos) ───────────── */
#myfiles::file-selector-button {
    margin-right: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: none;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    background-color: rgb(var(--primary-600, 20 184 166));
    color: #ffffff;
    transition: background-color 0.15s ease;
}
#myfiles::file-selector-button:hover {
    background-color: rgb(var(--primary-500, 45 212 191));
}

/* ── Disabled buttons ───────────────────────────── */
button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Table row actions ──────────────────────────── */
.fi-ta-actions .fi-link,
.fi-ta-actions .fi-btn {
    font-size: 0.70rem;
}

/* ── Dark mode overrides ────────────────────────── */
@media (prefers-color-scheme: dark) {
    .dark\:bg-red-900\/20   { background-color: rgba(127, 29, 29, 0.2); }
    .dark\:border-red-800   { border-color: #991b1b; }
    .dark\:text-red-400     { color: #f87171; }

    .dark\:bg-green-900\/20 { background-color: rgba(20, 83, 45, 0.2); }
    .dark\:border-green-800 { border-color: #166534; }
    .dark\:text-green-400   { color: #4ade80; }

    .dark\:bg-red-900\/30   { background-color: rgba(127, 29, 29, 0.3); }
    .dark\:bg-green-900\/30 { background-color: rgba(20, 83, 45, 0.3); }

    .dark\:bg-gray-600      { background-color: #4b5563; }
}