/* ===================================================================
   Overrides UI Filament — branchés via render hook PanelsRenderHook::HEAD_END
   dans App\Providers\AppServiceProvider.
   =================================================================== */

/* 1. Avatars (logos) : object-fit contain pour ne pas couper les logos
      portrait/paysage qui ne sont pas carrés.
      ----------------------------------------------------------------- */
img.fi-avatar,
.fi-avatar > img {
    object-fit: contain !important;
    background-color: rgb(255 255 255 / 0.08);
    padding: 2px;
}

/* 2. User menu (haut-droit) : pattern "Nom user + roue crantée" → clic ouvre
      le dropdown Filament avec "Mon entreprise" + Sign out.
      Le nom de l'user est injecté via render hook USER_MENU_BEFORE
      (cf AppServiceProvider::registerFilamentUiOverrides).
      ----------------------------------------------------------------- */

/* Le span injecté avant le user menu (nom du user connecté) */
.topbar-user-name {
    display: inline-flex;
    align-items: center;
    color: rgb(203 213 225);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0 0.5rem 0 0.75rem;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sur petits écrans, masque le nom (la cog seule reste cliquable) */
@media (max-width: 768px) {
    .topbar-user-name { display: none; }
}

/* Cache le header de profil dans le dropdown user (redondant avec le nom
   désormais affiché en topbar). Filament rend ce header via x-filament::dropdown.header
   contenant le label de l'item profile. */
.fi-user-menu .fi-dropdown-header {
    display: none !important;
}

button.fi-user-menu-trigger img.fi-avatar,
button.fi-user-menu-trigger img.fi-user-avatar,
button.fi-user-menu-trigger .fi-user-menu-trigger-text {
    display: none !important;
}

button.fi-user-menu-trigger {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: rgb(148 163 184);
    transition: color .15s, background-color .15s;
}

button.fi-user-menu-trigger:hover {
    color: rgb(241 245 249);
    background-color: rgb(255 255 255 / 0.06);
}

button.fi-user-menu-trigger::before {
    content: "";
    width: 22px;
    height: 22px;
    background-color: currentColor;
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M11.078 2.25c-.917 0-1.699.663-1.85 1.567L9.05 4.889c-.02.12-.115.26-.297.348a7.493 7.493 0 0 0-.986.57c-.166.115-.334.126-.45.083L6.3 5.508a1.875 1.875 0 0 0-2.282.819l-.922 1.597a1.875 1.875 0 0 0 .432 2.385l.84.692c.095.078.17.229.154.43a7.598 7.598 0 0 0 0 1.139c.015.2-.059.352-.153.43l-.841.692a1.875 1.875 0 0 0-.432 2.385l.922 1.597a1.875 1.875 0 0 0 2.282.818l1.019-.382c.115-.043.283-.031.45.082.312.214.641.405.985.57.182.088.277.228.297.35l.178 1.071c.151.904.933 1.567 1.85 1.567h1.844c.916 0 1.699-.663 1.85-1.567l.178-1.072c.02-.12.114-.26.297-.349.344-.165.673-.356.985-.57.167-.114.335-.125.45-.082l1.02.382a1.875 1.875 0 0 0 2.28-.819l.923-1.597a1.875 1.875 0 0 0-.432-2.385l-.84-.692c-.095-.078-.17-.229-.154-.43a7.614 7.614 0 0 0 0-1.139c-.016-.2.059-.352.153-.43l.84-.692c.708-.582.891-1.59.433-2.385l-.922-1.597a1.875 1.875 0 0 0-2.282-.818l-1.02.382c-.114.043-.282.031-.449-.083a7.49 7.49 0 0 0-.985-.57c-.183-.087-.277-.227-.297-.348l-.179-1.072a1.875 1.875 0 0 0-1.85-1.567h-1.843ZM12 15.75a3.75 3.75 0 1 0 0-7.5 3.75 3.75 0 0 0 0 7.5Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M11.078 2.25c-.917 0-1.699.663-1.85 1.567L9.05 4.889c-.02.12-.115.26-.297.348a7.493 7.493 0 0 0-.986.57c-.166.115-.334.126-.45.083L6.3 5.508a1.875 1.875 0 0 0-2.282.819l-.922 1.597a1.875 1.875 0 0 0 .432 2.385l.84.692c.095.078.17.229.154.43a7.598 7.598 0 0 0 0 1.139c.015.2-.059.352-.153.43l-.841.692a1.875 1.875 0 0 0-.432 2.385l.922 1.597a1.875 1.875 0 0 0 2.282.818l1.019-.382c.115-.043.283-.031.45.082.312.214.641.405.985.57.182.088.277.228.297.35l.178 1.071c.151.904.933 1.567 1.85 1.567h1.844c.916 0 1.699-.663 1.85-1.567l.178-1.072c.02-.12.114-.26.297-.349.344-.165.673-.356.985-.57.167-.114.335-.125.45-.082l1.02.382a1.875 1.875 0 0 0 2.28-.819l.923-1.597a1.875 1.875 0 0 0-.432-2.385l-.84-.692c-.095-.078-.17-.229-.154-.43a7.614 7.614 0 0 0 0-1.139c-.016-.2.059-.352.153-.43l.84-.692c.708-.582.891-1.59.433-2.385l-.922-1.597a1.875 1.875 0 0 0-2.282-.818l-1.02.382c-.114.043-.282.031-.449-.083a7.49 7.49 0 0 0-.985-.57c-.183-.087-.277-.227-.297-.348l-.179-1.072a1.875 1.875 0 0 0-1.85-1.567h-1.843ZM12 15.75a3.75 3.75 0 1 0 0-7.5 3.75 3.75 0 0 0 0 7.5Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* 3. Tenant menu sidebar : cache le chevron dropdown (devenu inutile depuis
      qu'on a retiré l'item profile via tenantMenuItems), aligne le bloc à
      gauche avec les items de navigation pour un rendu uniforme.
      ----------------------------------------------------------------- */

/* Cache le chevron */
.fi-tenant-menu .fi-tenant-menu-trigger > svg,
.fi-tenant-menu .fi-tenant-menu-trigger svg.fi-icon[aria-hidden="true"] {
    display: none !important;
}

/* Le trigger n'est plus cliquable utile : curseur default + plus de hover bg */
.fi-tenant-menu .fi-tenant-menu-trigger {
    cursor: default !important;
    width: 100%;
    justify-content: flex-start !important;
    text-align: start;
    padding-inline-start: 0.625rem !important;  /* aligné avec les fi-sidebar-item */
    padding-inline-end: 0.5rem !important;
    background-color: transparent !important;
}

/* Pas de feedback visuel au survol/focus puisque le bouton n'a plus d'action */
.fi-tenant-menu .fi-tenant-menu-trigger:hover,
.fi-tenant-menu .fi-tenant-menu-trigger:focus,
.fi-tenant-menu .fi-tenant-menu-trigger:active {
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Le wrapper dropdown ne doit pas centrer son contenu : flex stretch pour
   coller à la sidebar gauche comme tous les autres items. */
.fi-sidebar .fi-tenant-menu,
.fi-sidebar-header .fi-tenant-menu {
    width: 100%;
    align-self: stretch;
    margin: 0;
    padding: 0;
}

.fi-tenant-menu .fi-dropdown-trigger {
    width: 100%;
}

/* 4. Footer global du panel (FOOTER hook) : liens légaux + copyright.
      ----------------------------------------------------------------- */
.admin-footer {
    margin-top: 2rem;
    padding: 1.25rem 1rem;
    border-top: 1px solid rgb(255 255 255 / 0.06);
    text-align: center;
    font-size: 0.75rem;
    color: rgb(148 163 184);
    line-height: 1.6;
}

.admin-footer-links {
    margin-bottom: 0.375rem;
}

.admin-footer-links a {
    color: rgb(148 163 184);
    text-decoration: none;
    transition: color .15s;
}

.admin-footer-links a:hover {
    color: rgb(241 245 249);
    text-decoration: underline;
}

.admin-footer-links .sep {
    color: rgb(71 85 105);
    margin: 0 0.5rem;
}

.admin-footer-copyright {
    color: rgb(100 116 139);
}

.admin-footer-copyright .env-pill {
    display: inline-block;
    padding: 0.0625rem 0.5rem;
    border-radius: 9999px;
    background: rgb(245 158 11);
    color: rgb(15 23 42);
    font-size: 0.6875rem;
    font-weight: 700;
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* 5. Sidebar footer : lien d'aide en bas de la sidebar (SIDEBAR_FOOTER hook).
      ----------------------------------------------------------------- */
.admin-sidebar-help {
    border-top: 1px solid rgb(255 255 255 / 0.06);
    padding: 0.75rem 0.625rem;
    margin-top: auto;  /* pousse le bloc en bas si la sidebar a flex-direction column */
}

.admin-sidebar-help-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.375rem;
    color: rgb(148 163 184);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}

.admin-sidebar-help-link:hover {
    color: rgb(241 245 249);
    background-color: rgb(255 255 255 / 0.04);
}

.admin-sidebar-help-link svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

/* Sidebar collapsed : centre l'icône Aide & support (le span texte est
   masqué par Alpine via x-show="$store.sidebar.isOpen"). */
.fi-sidebar:not(.fi-sidebar-open) .admin-sidebar-help-link,
.fi-sidebar-collapsed .admin-sidebar-help-link {
    justify-content: center;
    gap: 0;
}

/* 6. Page Identité graphique : sélecteurs visuels (couleur + mode).
      ----------------------------------------------------------------- */
.brand-block {
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    background-color: rgb(0 0 0 / 0.03);
    border: 1px solid rgb(0 0 0 / 0.06);
    border-radius: 0.75rem;
}

.dark .brand-block {
    background-color: rgb(255 255 255 / 0.02);
    border-color: rgb(255 255 255 / 0.06);
}

.brand-block-header { margin-bottom: 1rem; }
.brand-block-header h3 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 600;
}
.brand-block-header p {
    margin: 0;
    font-size: 0.8125rem;
    color: rgb(100 116 139);
}
.dark .brand-block-header p {
    color: rgb(148 163 184);
}

/* --- Sélecteur de couleur primaire --- */
.brand-color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
}

.brand-color-card {
    position: relative;
    background: var(--filament-card-bg, white);
    border: 2px solid rgb(0 0 0 / 0.08);
    border-radius: 0.5rem;
    padding: 0.875rem 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: border-color .15s, transform .15s, box-shadow .15s;
    text-align: start;
}

.dark .brand-color-card {
    background: rgb(255 255 255 / 0.04);
    border-color: rgb(255 255 255 / 0.08);
}

.brand-color-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.08);
}

.brand-color-card.is-selected {
    border-color: rgb(var(--primary-500, 245 158 11));
    box-shadow: 0 0 0 3px rgb(var(--primary-500, 245 158 11) / 0.15);
}

.brand-color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgb(255 255 255 / 0.4), inset 0 0 0 1px rgb(0 0 0 / 0.1);
}

.brand-color-label {
    font-size: 0.875rem;
    font-weight: 500;
    flex: 1;
}

.brand-color-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: rgb(var(--primary-500, 245 158 11));
    color: white;
    flex-shrink: 0;
}
.brand-color-check svg { width: 0.875rem; height: 0.875rem; }

/* --- Sélecteur de mode (Light / Dark / Auto) --- */
.brand-mode-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}
@media (max-width: 640px) {
    .brand-mode-grid { grid-template-columns: 1fr; }
}

.brand-mode-card {
    background: white;
    border: 2px solid rgb(0 0 0 / 0.08);
    border-radius: 0.5rem;
    padding: 1.25rem 1rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}

.dark .brand-mode-card {
    background: rgb(255 255 255 / 0.04);
    border-color: rgb(255 255 255 / 0.08);
}

.brand-mode-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.08);
}

.brand-mode-card.is-selected {
    border-color: rgb(var(--primary-500, 245 158 11));
    background: rgb(var(--primary-500, 245 158 11) / 0.08);
    box-shadow: 0 0 0 3px rgb(var(--primary-500, 245 158 11) / 0.15);
}

.brand-mode-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgb(100 116 139);
}

.brand-mode-card.is-selected .brand-mode-icon {
    color: rgb(var(--primary-600, 217 119 6));
}

.dark .brand-mode-icon { color: rgb(148 163 184); }

.brand-mode-icon svg { width: 28px; height: 28px; }

.brand-mode-label {
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
}