/**
 * Overrides spécifiques pour le mode sombre
 * Les variables principales sont dans variables.css avec [data-theme="dark"]
 */

[data-theme="dark"] {
    color-scheme: dark;
}

/* Ajustements de bordure en mode sombre */
[data-theme="dark"] .card {
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .table-container {
    border-color: rgba(255, 255, 255, 0.08);
}

/* Images et logos */
[data-theme="dark"] .logo-light {
    display: none;
}

[data-theme="dark"] .logo-dark {
    display: block;
}

[data-theme="light"] .logo-dark {
    display: none;
}

/* Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Input placeholder */
[data-theme="dark"] ::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* Select dropdown arrow */
[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Badge catégorie */
[data-theme="dark"] .badge-category.homme {
    background: rgba(82, 156, 202, 0.2);
    color: #7ab8e0;
}

[data-theme="dark"] .badge-category.femme {
    background: rgba(235, 111, 168, 0.2);
    color: #f098c0;
}

/* Table header */
[data-theme="dark"] .table th {
    background: rgba(255, 255, 255, 0.03);
}

/* Sortable columns */
[data-theme="dark"] .table th.sortable:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Toast */
[data-theme="dark"] .toast {
    background: #2d2d2d;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Dropdown */
[data-theme="dark"] .dropdown-menu {
    background: #2d2d2d;
    border-color: rgba(255, 255, 255, 0.08);
}

/* Bottom sheet */
[data-theme="dark"] .bottomsheet {
    background: #252525;
}

/* Skeleton */
[data-theme="dark"] .skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 75%
    );
    background-size: 200% 100%;
}

/* Sidebar */
[data-theme="dark"] .app-sidebar {
    background: #1a1a1a;
}

/* Effet de brillance sur hover en mode sombre */
[data-theme="dark"] .card-interactive:hover {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.02) 0%,
        transparent 100%
    );
}