/**
 * OpticFlow - macOS Retina & High-DPI Display Enhancements
 * Optimisations d'affichage haute résolution : anticrénelage des polices, netteté des logos,
 * accélération matérielle et gestion fluide des défilements sur macOS.
 */

/* 1. Typographie & Anticrénelage net sur macOS / Safari / Chrome */
html, body {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    overscroll-behavior-x: none;
}

/* 2. Logos et Images haute définition : anticrénelage fluide et lissage haute fidélité (évite la pixellisation causée par crisp-edges) */
.optic-shell-brand__logo-image,
.optic-public-brand__image,
.brand-logo img,
.optic-sidebar-brandbar img,
.optic-sidebar-profile-card__avatar,
.optic-topbar-profile__avatar,
img[alt="profile"],
img[alt="platform logo"],
.optic-company-logo,
.optic-brand-image {
    image-rendering: auto !important;
    image-rendering: smooth !important;
    -ms-interpolation-mode: bicubic;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Prévient l'écrasement ou la distorsion des logos dans la barre et les formulaires */
.optic-shell-brand {
    display: flex;
    align-items: center;
    min-width: 0;
}

.optic-shell-brand__logo {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    max-width: 220px;
    min-height: 48px;
}

.optic-shell-brand__logo-image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 56px;
    object-fit: contain;
}

/* 1. Logo dans la barre latérale (Sidebar Admin & Tenant) : élargi et bien lisible */
.optic-sidebar-brandbar {
    min-height: 74px;
    align-items: center;
}

.optic-sidebar-brandbar .brand-logo {
    width: 100%;
}

.optic-sidebar-brandbar .optic-shell-brand {
    width: 100%;
}

.optic-sidebar-brandbar .optic-shell-brand__logo {
    width: 100%;
    max-width: 220px;
    min-height: 58px;
    justify-content: flex-start;
}

.optic-sidebar-brandbar .optic-shell-brand__logo-image {
    max-width: 215px;
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: left center;
}

/* Mini-sidebar repliée */
body[data-sidebartype="mini-sidebar"] .optic-sidebar-brandbar .optic-shell-brand__logo {
    max-width: 44px;
    justify-content: center;
}

body[data-sidebartype="mini-sidebar"] .optic-sidebar-brandbar .optic-shell-brand__logo-image {
    max-width: 40px;
    max-height: 40px;
}

/* 2. Logo héroïque sur les cartes d'authentification (login, register, forgot-password) */
.card .optic-shell-brand,
.optic-surface-card .optic-shell-brand {
    justify-content: center;
    width: 100%;
}

.card .optic-shell-brand__logo,
.optic-surface-card .optic-shell-brand__logo {
    width: auto;
    max-width: 320px;
    min-height: 72px;
    justify-content: center;
    margin: 0 auto;
}

.card .optic-shell-brand__logo-image,
.optic-surface-card .optic-shell-brand__logo-image {
    max-width: 300px;
    max-height: 78px;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
    margin: 0 auto;
}

/* 3. Logo dans le bandeau supérieur (Portail Client & Header) */
.top-header .optic-shell-brand__logo {
    max-width: 210px;
    min-height: 48px;
    justify-content: flex-start;
}

.top-header .optic-shell-brand__logo-image {
    max-width: 200px;
    max-height: 52px;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: left center;
}

/* 4. Lissage des badges, icônes, conteneurs et cartes sur DPR >= 1.5 */
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
    .optic-shell-brand__mark,
    .optic-icon-btn,
    .card,
    .optic-surface-card,
    .btn {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}

/* 4. Barres de défilement discrètes et stables sur macOS */
html {
    scrollbar-gutter: stable;
}

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.25);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.45);
}

.dark ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* 5. Clarté des séparateurs et bordures 1px */
.border,
.border-b,
.border-t,
.border-r,
.border-l {
    border-style: solid;
}

/* ==========================================================================
   6. Résolution macOS Dark Mode : Protection du contraste texte / fond
   Empêche les classes dark:text-white de s'activer sur macOS si le site est en thème clair
   ========================================================================== */
html:not(.dark),
html.light,
body:not(.dark) {
    color-scheme: light !important;
}

/* 6.1 Neutralise les classes Tailwind dark:text-white quand le site est en mode clair */
html:not(.dark) .dark\:text-white,
html.light .dark\:text-white,
body:not(.dark) .dark\:text-white {
    color: #111827 !important;
}

html:not(.dark) .dark\:text-darklink,
html.light .dark\:text-darklink,
body:not(.dark) .dark\:text-darklink {
    color: #64748b !important;
}

html:not(.dark) .dark\:text-white\!,
html.light .dark\:text-white\! {
    color: #111827 !important;
}

/* 6.2 En-tête de page (Bannière bleue claire : Titre & Fil d'Ariane) */
.optic-page-header .optic-page-header__title,
.optic-page-header h4,
html:not(.dark) .optic-page-header .optic-page-header__title,
html:not(.dark) .optic-page-header h4,
html:not(.dark) .optic-page-header .text-dark,
html:not(.dark) .optic-page-header .dark\:text-white {
    color: #111827 !important;
}

.optic-page-header ol,
.optic-page-header li,
.optic-page-header span,
.optic-page-header a,
html:not(.dark) .optic-page-header ol,
html:not(.dark) .optic-page-header li,
html:not(.dark) .optic-page-header span,
html:not(.dark) .optic-page-header a {
    color: #475569 !important;
}

.optic-page-header a:hover,
html:not(.dark) .optic-page-header a:hover {
    color: #5d87ff !important;
}

.optic-page-header .optic-page-header__crumb-separator,
html:not(.dark) .optic-page-header .optic-page-header__crumb-separator {
    background-color: #94a3b8 !important;
}

/* 6.3 Carte utilisateur dans la barre latérale (Profil en bas à gauche : Mohamed) */
.optic-sidebar-profile-card__title,
html:not(.dark) .optic-sidebar-profile-card__title,
html:not(.dark) .optic-sidebar-profile-card .dark\:text-white {
    color: #111827 !important;
}

.optic-sidebar-profile-card__meta,
html:not(.dark) .optic-sidebar-profile-card__meta,
html:not(.dark) .optic-sidebar-profile-card .dark\:text-darklink {
    color: #64748b !important;
}

/* 6.4 Titres et textes dans les cartes standard */
html:not(.dark) .card .text-dark,
html.light .card .text-dark {
    color: #111827 !important;
}

html:not(.dark) .card .card-subtitle,
html.light .card .card-subtitle {
    color: #64748b !important;
}

/* Liens de menu de la barre latérale */
html:not(.dark) .sidebar-link:not(.active),
html.light .sidebar-link:not(.active) {
    color: #2a3547 !important;
}

html:not(.dark) .sidebar-link.active,
html.light .sidebar-link.active {
    color: #ffffff !important;
}

/* 6.5 Mode sombre explicite : réactive le blanc uniquement si html.dark est présent */
html.dark .optic-page-header .optic-page-header__title,
html.dark .optic-page-header h4,
html.dark .optic-sidebar-profile-card__title,
html.dark .dark\:text-white {
    color: #ffffff !important;
}

html.dark .optic-page-header ol,
html.dark .optic-page-header li,
html.dark .optic-page-header span,
html.dark .optic-page-header a,
html.dark .optic-sidebar-profile-card__meta,
html.dark .dark\:text-darklink {
    color: #a1aab7 !important;
}