@tailwind base;
@tailwind components;
@tailwind utilities;
@import 'btn.css';
@import 'provisioning.css';
@import 'bootstrap-icons/font/bootstrap-icons.min.css';
@import 'flatpickr/dist/flatpickr.min.css';
.input-text {
    @apply py-3 px-4 block w-full border border-gray-200 rounded-lg text-sm transition-colors duration-200 focus:border-violet-500 focus:ring-violet-500 disabled:opacity-50 disabled:pointer-events-none;
}
.img-auth {
    border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
}
.text-primary {
    @apply text-violet-600;
}
.text-secondary {
    @apply text-gray-600;
}
.text-danger {
    @apply text-red-600;
}
.text-warning {
    @apply text-yellow-600;
}
.bg-primary {
    @apply bg-violet-600;
}
.card {
    @apply bg-white rounded-xl shadow-sm p-6 mb-4 border border-gray-100
}
.card-sm {
    @apply bg-white rounded-xl shadow-sm p-3 mb-4 border border-gray-100
}
.card-title {
    @apply text-lg font-semibold mb-2
}
.card-heading {
    @apply pb-2 grid gap-3 md:flex md:justify-between md:items-center dark:border-gray-700;
}
.w-50 {
    width: 50%!important;
}
.vps-running {
    @apply bg-emerald-600;
}
.vps-stopped {
    @apply bg-red-600;
}
.vps-warning {
    @apply bg-yellow-600;
}

.gateway-selected {
    @apply border-violet-600 bg-violet-50 text-violet-600;
}
.dark .card {
    @apply bg-gray-800 text-white rounded-xl border border-gray-700/50 p-6 mb-4
}
.dark .card-sm {
    @apply bg-gray-800 text-white rounded-xl border border-gray-700/50 p-3 mb-2
}
.dark #content {
    background: #07001a;
    @apply text-white;
}
.dark .card {
    background: rgba(15,5,39,0.85);
    border-color: rgba(109,40,217,0.2);
}
.dark .input-text {
    @apply bg-gray-700 border-gray-600 text-gray-300 placeholder-gray-500
}
.dark .text-danger {
    @apply text-red-400
}
.dark .text-warning {
    @apply text-yellow-400
}
.dark .gateway-selected {
    @apply border-violet-400 bg-violet-900/30 text-violet-400
}

/* ===== SERVICE SHOW SIDEBAR ===== */
.sidebar-info-card {
    @apply flex items-center gap-4 p-4 bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700 shadow-sm;
}
.sidebar-info-icon {
    @apply flex-shrink-0 w-11 h-11 rounded-xl flex items-center justify-center shadow-sm;
}
.sidebar-action-btn {
    @apply w-full inline-flex items-center gap-2.5 px-4 py-3 rounded-xl text-sm font-semibold border transition-all duration-200;
    @apply bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 border-gray-200 dark:border-gray-600;
    @apply hover:border-violet-300 dark:hover:border-violet-600 hover:text-violet-700 dark:hover:text-violet-300 hover:bg-violet-50 dark:hover:bg-violet-900/20;
}
.sidebar-action-btn--primary {
    @apply text-white border-transparent hover:border-transparent hover:text-white hover:bg-transparent;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    box-shadow: 0 2px 10px rgba(124, 58, 237, 0.25);
}
.sidebar-action-btn--primary:hover {
    background: linear-gradient(135deg, #6d28d9, #9333ea);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4);
}
.sidebar-action-btn--violet {
    @apply text-violet-600 dark:text-violet-400 border-violet-200 dark:border-violet-700 bg-violet-50 dark:bg-violet-900/20;
    @apply hover:bg-violet-100 dark:hover:bg-violet-900/40 hover:text-violet-700 dark:hover:text-violet-300 hover:border-violet-300;
}
.sidebar-action-btn--danger {
    @apply text-red-600 dark:text-red-400 border-red-200 dark:border-red-800/50 bg-red-50 dark:bg-red-900/10;
    @apply hover:bg-red-100 dark:hover:bg-red-900/20 hover:border-red-300 hover:text-red-700;
}

/* ===== PRODUCT CARDS ===== */
.product-card-pinned {
    background: #ffffff;
    border: 2px solid #7c3aed;
}
.dark .product-card-pinned {
    background: #1a0f35;
    border-color: #6d28d9;
}

/* ===== PAGE BANNERS (store, group, etc.) ===== */
.page-banner-dark {
    background: linear-gradient(135deg, #3b0764 0%, #4c1d95 40%, #701a75 100%);
    position: relative;
    overflow: hidden;
}

/* ===== HOME PAGE HERO / HEADER ===== */
/* Ces classes utilisent du CSS pur (pas @apply) donc jamais purgées par Tailwind */
.hero-header {
    background: linear-gradient(135deg, #4c1d95 0%, #5b21b6 50%, #6d28d9 100%);
    border-bottom-color: rgba(139, 92, 246, 0.25) !important;
}
.hero-header-overlay {
    background: #4c1d95;
}
.hero-nav-menu {
    background: linear-gradient(135deg, #4c1d95 0%, #5b21b6 100%);
    border-color: rgba(139, 92, 246, 0.2);
}
.hero-section-bg {
    background: linear-gradient(135deg, #4c1d95 0%, #5b21b6 40%, #701a75 100%);
}

.ProseMirror:focus {
    outline: none;
}

.blur {
    filter: blur(5px);
    transition: filter 0.3s ease;
}

.blur:hover {
    filter: none;
}
.dark .os-icon {
    @apply text-gray-400;
}
.icon-width::before {
    font-size: 24px;
    width: 24px;
    height: 24px;
}

.custom-scroll {
    @apply overflow-y-auto
    [&::-webkit-scrollbar]:w-2
    [&::-webkit-scrollbar-track]:bg-gray-100
    [&::-webkit-scrollbar-thumb]:bg-gray-300
    dark:[&::-webkit-scrollbar-track]:bg-neutral-700
    dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500;
}

/* ===== EXTENSION CARDS (fund, giftcard) ===== */
.lumo-ext-card > .card,
.lumo-ext-card .card {
    border-radius: 0.75rem !important;
    border: 1px solid #f3f4f6 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    overflow: hidden;
    margin-bottom: 0 !important;
    background: #fff !important;
}
.dark .lumo-ext-card > .card,
.dark .lumo-ext-card .card {
    background: rgba(15,5,39,0.85) !important;
    border-color: rgba(109,40,217,0.2) !important;
}

/* Card header */
.lumo-ext-card .card-header {
    background: transparent !important;
    border-bottom: 1px solid #f3f4f6 !important;
    padding: 1rem 1.25rem !important;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1f2937 !important;
}
.dark .lumo-ext-card .card-header {
    border-bottom-color: rgba(109,40,217,0.15) !important;
    color: #fff !important;
}
.lumo-ext-card .card-header p,
.lumo-ext-card .card-header small,
.lumo-ext-card .card-header .text-muted {
    font-size: 0.75rem;
    color: #6b7280 !important;
    font-weight: 400;
    margin-top: 0.125rem;
}

/* Card body */
.lumo-ext-card .card-body {
    padding: 1.25rem !important;
}

/* Inputs */
.lumo-ext-card input[type="number"],
.lumo-ext-card input[type="text"],
.lumo-ext-card input[type="email"],
.lumo-ext-card select,
.lumo-ext-card textarea {
    width: 100%;
    padding: 0.625rem 1rem !important;
    border-radius: 0.5rem !important;
    border: 1px solid #e5e7eb !important;
    font-size: 0.875rem !important;
    transition: border-color 0.15s;
    background: #fff !important;
    color: #1f2937 !important;
}
.lumo-ext-card input[type="number"]:focus,
.lumo-ext-card input[type="text"]:focus,
.lumo-ext-card select:focus {
    outline: none !important;
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.1) !important;
}
.dark .lumo-ext-card input[type="number"],
.dark .lumo-ext-card input[type="text"],
.dark .lumo-ext-card input[type="email"],
.dark .lumo-ext-card select,
.dark .lumo-ext-card textarea {
    background: #0a0120 !important;
    border-color: rgba(109,40,217,0.3) !important;
    color: #f3f4f6 !important;
}

/* Labels */
.lumo-ext-card label,
.lumo-ext-card .form-label {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #374151 !important;
    margin-bottom: 0.375rem;
}
.dark .lumo-ext-card label,
.dark .lumo-ext-card .form-label {
    color: #d1d5db !important;
}

/* Tous les boutons → violet gradient */
.lumo-ext-card .btn,
.lumo-ext-card button[type="submit"],
.lumo-ext-card .btn-success,
.lumo-ext-card .btn-primary,
.lumo-ext-card .btn-green {
    background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
    border-color: transparent !important;
    box-shadow: 0 2px 8px rgba(124,58,237,0.3) !important;
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    color: #fff !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    padding: 0.5rem 1.25rem !important;
}
.lumo-ext-card .btn:hover,
.lumo-ext-card button[type="submit"]:hover,
.lumo-ext-card .btn-success:hover,
.lumo-ext-card .btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(124,58,237,0.4) !important;
    color: #fff !important;
}

/* Bouton danger → reste rouge */
.lumo-ext-card .btn-danger {
    background: linear-gradient(135deg, #dc2626, #ef4444) !important;
    box-shadow: 0 2px 8px rgba(220,38,38,0.3) !important;
}

/* Résumé / summary panel */
.lumo-ext-card [class*="bg-gray"],
.lumo-ext-card .bg-light,
.lumo-ext-card .summary,
.lumo-ext-card .card-summary {
    background: #f9fafb !important;
    border-radius: 0.5rem !important;
    border: 1px solid #f3f4f6 !important;
}
.dark .lumo-ext-card [class*="bg-gray"],
.dark .lumo-ext-card .bg-light {
    background: rgba(109,40,217,0.05) !important;
    border-color: rgba(109,40,217,0.1) !important;
}

/* Alertes warning */
.lumo-ext-card .alert-warning,
.lumo-ext-card .alert.alert-warning {
    background: rgba(251,191,36,0.1) !important;
    border-color: rgba(251,191,36,0.3) !important;
    border-radius: 0.5rem !important;
    color: #92400e !important;
    font-size: 0.875rem;
    padding: 0.75rem 1rem !important;
}
.dark .lumo-ext-card .alert-warning {
    color: #fbbf24 !important;
    background: rgba(251,191,36,0.08) !important;
}

/* Alertes info */
.lumo-ext-card .alert-info {
    background: rgba(99,102,241,0.08) !important;
    border-color: rgba(99,102,241,0.2) !important;
    border-radius: 0.5rem !important;
    color: #4338ca !important;
    font-size: 0.875rem;
    padding: 0.75rem 1rem !important;
}

/* Tables (historique des transferts) */
.lumo-ext-card table {
    width: 100%;
    font-size: 0.875rem;
}
.lumo-ext-card table thead th {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #6b7280 !important;
    padding: 0.625rem 1rem !important;
    background: #f9fafb !important;
    border-bottom: 1px solid #f3f4f6 !important;
}
.dark .lumo-ext-card table thead th {
    background: rgba(109,40,217,0.08) !important;
    color: #9ca3af !important;
    border-bottom-color: rgba(109,40,217,0.15) !important;
}
.lumo-ext-card table tbody td {
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid #f9fafb !important;
    color: #374151;
}
.dark .lumo-ext-card table tbody td {
    border-bottom-color: rgba(109,40,217,0.08) !important;
    color: #d1d5db !important;
}
.lumo-ext-card table tbody tr:hover td {
    background: rgba(124,58,237,0.03) !important;
}

/* "Aucun résultat" */
.lumo-ext-card .text-muted,
.lumo-ext-card .text-gray-500 {
    color: #9ca3af !important;
    font-size: 0.875rem;
}

/* ===== GATEWAY FORMS (Ajouter un moyen de paiement) ===== */
/* Override les boutons verts/bleus des gateways */
#content .gateway-form-wrapper button[type="submit"],
#content .gateway-form-wrapper .btn-success,
#content .gateway-form-wrapper .btn-primary {
    background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
    border-color: transparent !important;
    box-shadow: 0 2px 8px rgba(124,58,237,0.3) !important;
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
    color: #fff !important;
    width: 100%;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}