/* ============================================================
   Crudia UI — Shell applicatif (sidebar produit + topbar)
   Rendu en SSR statique par MainLayout : aucune hydratation,
   donc aucun flash du menu. L'état replié vient d'un cookie lu
   côté serveur (même HTML au prérendu et après navigation).
   ============================================================ */

.cr-skip-link {
    position: absolute; left: 8px; top: -40px; z-index: var(--cr-z-critical);
    padding: 8px 12px; background: var(--cr-color-primary); color: #fff; border-radius: var(--cr-radius-md);
    font-weight: 600; transition: top var(--cr-duration-fast);
}
.cr-skip-link:focus { top: 8px; color: #fff; text-decoration: none; }

.cr-shell {
    display: flex;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    overflow: hidden;
    background: var(--cr-color-bg);
}

/* ---------- Sidebar ---------- */
.cr-sidebar {
    position: relative;
    z-index: var(--cr-z-shell);
    display: flex; flex-direction: column;
    width: var(--cr-shell-sidebar-width);
    flex-shrink: 0;
    background: var(--cr-shell-sidebar-bg);
    color: var(--cr-shell-sidebar-text);
    transition: width var(--cr-duration-base) var(--cr-easing);
}
.cr-sidebar__brand {
    display: flex; align-items: center; gap: 10px;
    height: var(--cr-shell-topbar-height);
    padding: 0 12px 0 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    min-width: 0;
}
.cr-sidebar__logo {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 28px; height: 28px; border-radius: var(--cr-radius-md);
    background: var(--cr-brand); color: #fff; font-weight: 700; font-size: 14px; letter-spacing: -0.02em;
    text-decoration: none;
}
.cr-sidebar__logo:hover { color: #fff; text-decoration: none; }
.cr-sidebar__tenant { display: flex; flex-direction: column; min-width: 0; line-height: 16px; }
.cr-sidebar__product { color: #fff; font-weight: 600; font-size: 14px; }
.cr-sidebar__tenant-name { color: var(--cr-shell-sidebar-text-muted); font-size: var(--cr-font-size-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cr-sidebar__nav {
    flex: 1 1 auto; overflow-y: auto; overflow-x: hidden;
    padding: 10px 8px 16px;
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
}
.cr-sidebar__nav::-webkit-scrollbar { width: 6px; }
.cr-sidebar__nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 3px; }
.cr-sidebar__section + .cr-sidebar__section { margin-top: 14px; }
.cr-sidebar__section-label {
    display: block; padding: 0 8px 4px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--cr-shell-sidebar-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cr-sidebar__item {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    height: 32px; padding: 0 8px;
    border-radius: var(--cr-radius-md);
    color: var(--cr-shell-sidebar-text);
    font-size: var(--cr-font-size-md); font-weight: 500;
    text-decoration: none; white-space: nowrap;
    transition: background-color var(--cr-duration-fast), color var(--cr-duration-fast);
}
.cr-sidebar__item + .cr-sidebar__item { margin-top: 1px; }
.cr-sidebar__item > .bi { width: 18px; flex-shrink: 0; text-align: center; font-size: 15px; line-height: 1; color: inherit; opacity: 0.85; }
.cr-sidebar__item:hover { background: var(--cr-shell-sidebar-bg-hover); color: #fff; text-decoration: none; }
.cr-sidebar__item.active, .cr-sidebar__item[aria-current="page"] { background: var(--cr-shell-sidebar-bg-active); color: #fff; }
.cr-sidebar__item.active::before, .cr-sidebar__item[aria-current="page"]::before {
    content: ""; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 2px 2px 0; background: var(--cr-shell-sidebar-accent);
}
.cr-sidebar__item.active > .bi, .cr-sidebar__item[aria-current="page"] > .bi { opacity: 1; color: var(--cr-shell-sidebar-accent); }
.cr-sidebar__item:focus-visible { box-shadow: 0 0 0 2px var(--cr-shell-sidebar-accent); outline: none; }
.cr-sidebar__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cr-sidebar__count {
    min-width: 20px; height: 18px; padding: 0 6px; border-radius: var(--cr-radius-pill);
    background: rgba(255, 255, 255, 0.1); color: #fff;
    font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
}
.cr-sidebar__footer {
    display: flex; align-items: center; gap: 4px;
    padding: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}
.cr-sidebar__footer .cr-sidebar__item { flex: 1 1 auto; }
.cr-sidebar__toggle {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 32px; height: 32px; border: 0; border-radius: var(--cr-radius-md);
    background: transparent; color: var(--cr-shell-sidebar-text-muted); cursor: pointer;
}
.cr-sidebar__toggle:hover { background: var(--cr-shell-sidebar-bg-hover); color: #fff; }
.cr-sidebar__toggle:focus-visible { box-shadow: 0 0 0 2px var(--cr-shell-sidebar-accent); outline: none; }
.cr-sidebar__toggle .bi { transition: transform var(--cr-duration-base) var(--cr-easing); }

/* Replié : rail d'icônes (libellés en infobulle) */
.cr-shell.is-collapsed .cr-sidebar { width: var(--cr-shell-sidebar-width-collapsed); }
.cr-shell.is-collapsed .cr-sidebar__tenant,
.cr-shell.is-collapsed .cr-sidebar__label,
.cr-shell.is-collapsed .cr-sidebar__count,
.cr-shell.is-collapsed .cr-sidebar__footer .cr-sidebar__item { display: none; }
.cr-shell.is-collapsed .cr-sidebar__brand { justify-content: center; padding: 0; }
.cr-shell.is-collapsed .cr-sidebar__section-label { height: 1px; padding: 0; margin: 4px 8px 8px; background: rgba(255, 255, 255, 0.08); color: transparent; }
.cr-shell.is-collapsed .cr-sidebar__item { justify-content: center; padding: 0; }
.cr-shell.is-collapsed .cr-sidebar__item.has-count::after {
    content: ""; position: absolute; top: 6px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--cr-shell-sidebar-accent);
}
.cr-shell.is-collapsed .cr-sidebar__footer { justify-content: center; }
.cr-shell.is-collapsed .cr-sidebar__toggle .bi { transform: rotate(180deg); }

/* ---------- Zone principale ---------- */
.cr-shell__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cr-shell__content { flex: 1 1 auto; min-height: 0; overflow: auto; position: relative; display: flex; flex-direction: column; }
.cr-shell__content > * { flex-shrink: 0; }
.cr-shell__content > .cr-page, .cr-shell__content > .cr-fill { flex: 1 1 auto; min-height: 0; }

/* ---------- Topbar ---------- */
.cr-topbar {
    position: relative;
    z-index: var(--cr-z-shell);
    display: flex; align-items: center; gap: 8px;
    height: var(--cr-shell-topbar-height);
    padding: 0 12px 0 16px;
    background: var(--cr-color-surface);
    border-bottom: 1px solid var(--cr-color-border);
    flex-shrink: 0;
}
.cr-topbar__menu { display: none; }
.cr-topbar__search { position: relative; flex: 0 1 420px; min-width: 0; }
.cr-topbar__search .cr-input { background: var(--cr-color-surface-subtle); height: 32px; padding-left: 32px; padding-right: 64px; }
.cr-topbar__search .cr-input:focus { background: var(--cr-color-surface); }
.cr-topbar__search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--cr-color-text-muted); pointer-events: none; }
.cr-topbar__search-hint { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; gap: 2px; pointer-events: none; }
.cr-topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.cr-topbar__icon-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border: 0; border-radius: var(--cr-radius-md);
    background: transparent; color: var(--cr-color-text-secondary); cursor: pointer; text-decoration: none;
}
.cr-topbar__icon-btn:hover { background: var(--cr-color-hover); color: var(--cr-color-text-strong); text-decoration: none; }
.cr-topbar__icon-btn .bi { font-size: 16px; line-height: 1; }
.cr-topbar__icon-btn[aria-expanded="true"] { background: var(--cr-color-hover); color: var(--cr-color-text-strong); }
.cr-topbar__dot { position: absolute; top: 6px; right: 6px; min-width: 8px; height: 8px; border-radius: 50%; background: var(--cr-color-danger); border: 2px solid var(--cr-color-surface); box-sizing: content-box; }
.cr-topbar__divider { width: 1px; height: 20px; background: var(--cr-color-border); margin: 0 6px; }
.cr-topbar__user {
    display: inline-flex; align-items: center; gap: 8px;
    height: 36px; padding: 0 6px 0 4px; border: 0; border-radius: var(--cr-radius-md);
    background: transparent; cursor: pointer; color: var(--cr-color-text); max-width: 240px;
}
.cr-topbar__user:hover, .cr-topbar__user[aria-expanded="true"] { background: var(--cr-color-hover); }
.cr-topbar__user-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 15px; }
.cr-topbar__user-name { font-size: var(--cr-font-size-sm); font-weight: 600; color: var(--cr-color-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.cr-topbar__user-role { font-size: var(--cr-font-size-xs); color: var(--cr-color-text-secondary); white-space: nowrap; }
.cr-topbar__user-card { padding: 10px 12px 8px; border-bottom: 1px solid var(--cr-color-border-subtle); margin-bottom: 4px; min-width: 240px; }
.cr-topbar form { margin: 0; }

.cr-shell__scrim { display: none; }


/* ---------- Administration (Admin Center) ---------- */
.cr-fill { flex: 1 1 auto; min-height: 0; }
.cr-settings-main { overflow: auto; background: var(--cr-color-bg); }
.cr-settings-main > .cr-page { min-height: 100%; }
.cr-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.cr-admin-card {
    display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px;
    background: var(--cr-color-surface); border: 1px solid var(--cr-color-border); border-radius: var(--cr-radius-md);
    color: var(--cr-color-text); text-decoration: none; min-width: 0;
    transition: border-color var(--cr-duration-fast), background-color var(--cr-duration-fast);
}
.cr-admin-card:hover { border-color: var(--cr-color-border-strong); background: var(--cr-color-surface-subtle); text-decoration: none; color: var(--cr-color-text-strong); }
.cr-admin-card:focus-visible { box-shadow: var(--cr-focus-ring); }
.cr-admin-card__icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--cr-radius-md); background: var(--cr-color-primary-subtle); color: var(--cr-color-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.cr-admin-card__text { display: flex; flex-direction: column; min-width: 0; }
.cr-admin-card__title { font-weight: var(--cr-font-weight-semibold); color: var(--cr-color-text-strong); line-height: 20px; }
.cr-admin-card__desc { font-size: var(--cr-font-size-sm); color: var(--cr-color-text-secondary); line-height: 16px; }

/* ---------- Mise en page sans shell (connexion, erreurs, landing) ---------- */
.cr-bare { min-height: 100vh; min-height: 100dvh; background: var(--cr-color-bg); }


/* ---------- Pages d'identité (connexion, mot de passe, 2FA) ---------- */
.cr-auth { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; background: var(--cr-color-bg); }
.cr-auth__card { width: 100%; max-width: 400px; padding: 28px 28px 20px; background: var(--cr-color-surface); border: 1px solid var(--cr-color-border); border-radius: var(--cr-radius-lg); }
.cr-auth__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.cr-auth__brand-text { display: flex; flex-direction: column; line-height: 16px; }
.cr-auth__product { font-weight: 700; color: var(--cr-color-text-strong); }
.cr-auth__tenant { font-size: var(--cr-font-size-sm); color: var(--cr-color-text-secondary); }
.cr-auth__title { margin: 0; font-size: var(--cr-font-size-xl); line-height: 24px; font-weight: 600; color: var(--cr-color-text-strong); }
.cr-auth__subtitle { margin: 4px 0 0; color: var(--cr-color-text-secondary); }
.cr-auth__body { margin-top: 20px; }
.cr-auth__footer { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--cr-color-border-subtle); display: flex; flex-direction: column; gap: 6px; font-size: var(--cr-font-size-sm); color: var(--cr-color-text-secondary); }
.cr-auth__separator { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: var(--cr-color-text-muted); font-size: var(--cr-font-size-sm); }
.cr-auth__separator::before, .cr-auth__separator::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--cr-color-border-subtle); }
.cr-auth__legal { margin: 16px 0 0; font-size: var(--cr-font-size-xs); color: var(--cr-color-text-muted); }
.cr-auth__legal a { color: var(--cr-color-text-secondary); }

/* ---------- Responsive : < 1024 px → navigation hors écran ---------- */
@media (max-width: 1023.98px) {
    .cr-sidebar {
        position: fixed; top: 0; bottom: 0; left: 0;
        z-index: var(--cr-z-drawer);
        width: var(--cr-shell-sidebar-width) !important;
        transform: translateX(-100%);
        transition: transform var(--cr-duration-base) var(--cr-easing);
        box-shadow: none;
    }
    .cr-shell.is-mobile-open .cr-sidebar { transform: none; box-shadow: var(--cr-shadow-modal); }
    .cr-shell.is-mobile-open .cr-shell__scrim { display: block; position: fixed; inset: 0; z-index: calc(var(--cr-z-drawer) - 1); background: rgba(20, 31, 41, 0.4); }
    /* En mobile, jamais de rail replié : on montre les libellés. */
    .cr-shell.is-collapsed .cr-sidebar__tenant, .cr-shell.is-collapsed .cr-sidebar__label, .cr-shell.is-collapsed .cr-sidebar__count { display: revert; }
    .cr-shell.is-collapsed .cr-sidebar__item { justify-content: flex-start; padding: 0 8px; }
    .cr-shell.is-collapsed .cr-sidebar__brand { justify-content: flex-start; padding: 0 12px 0 14px; }
    .cr-shell.is-collapsed .cr-sidebar__section-label { height: auto; padding: 0 8px 4px; margin: 0; background: none; color: var(--cr-shell-sidebar-text-muted); }
    .cr-sidebar__footer .cr-sidebar__toggle { display: none; }
    .cr-topbar__menu { display: inline-flex; }
    .cr-topbar { padding: 0 8px; }
    .cr-topbar__search { flex: 1 1 auto; }
    .cr-topbar__search-hint { display: none; }
    .cr-topbar__user-text { display: none; }
}
@media (max-width: 575.98px) {
    .cr-topbar__search .cr-input { padding-right: 10px; }
    .cr-topbar__hide-sm { display: none !important; }
}