/* ------------------------------------------------------------------
   MetaERP - Design System (surcouche Bootstrap 5)
   Phase 0 : variables et fondations.
   Phase 1 : composants Administration (topbar, menu module, MetaGrid, MetaForm).
   ------------------------------------------------------------------ */

:root {
    --color-primary: #1e5fbf;
    --color-primary-dark: #164a94;
    --color-primary-light: #eaf1fb;
    --color-accent: #0e9f6e;
    --color-danger: #d92d20;
    --color-warning: #f79009;
    --color-warning-soft: #eab308;
    --color-process: #7c3aed;
    --color-neutral: #6b7280;
    --color-text: #1f2937;
    --color-text-muted: #6b7280;
    --color-bg: #f3f4f6;
    --color-surface: #ffffff;
    --color-surface-muted: #f9fafb;
    --color-border: #e5e7eb;

    --radius: 8px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);

    --topbar-height: 56px;

    --font-sans: "Inter", "Segoe UI", "Noto Sans Arabic", "Tahoma", sans-serif;

    --bs-primary: var(--color-primary);
    --bs-primary-rgb: 30, 95, 191;
    --bs-link-color: var(--color-primary);
    --bs-body-font-family: var(--font-sans);
    --bs-body-color: var(--color-text);
    --bs-body-bg: var(--color-bg);
    --bs-border-color: var(--color-border);
}

body {
    font-family: var(--font-sans);
    font-size: 14px;
    background-color: var(--color-bg);
    color: var(--color-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--color-primary);
}

.btn-primary {
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary-dark);
    --bs-btn-hover-border-color: var(--color-primary-dark);
    --bs-btn-active-bg: var(--color-primary-dark);
    --bs-btn-active-border-color: var(--color-primary-dark);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* ------------------------------ Topbar ------------------------------ */

.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--topbar-height);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 24px;
    padding-inline: 24px;
    box-shadow: var(--shadow-sm);
}

.topbar__brand {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.topbar__brand a {
    color: var(--color-text);
}

.topbar__brand a:hover {
    text-decoration: none;
}

.topbar__brand span {
    color: var(--color-primary);
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    overflow-x: auto;
}

.main-nav__link {
    padding: 6px 12px;
    border-radius: 6px;
    color: var(--color-text-muted);
    font-weight: 500;
    white-space: nowrap;
}

.main-nav__link:hover {
    color: var(--color-primary);
    background: var(--color-primary-light);
    text-decoration: none;
}

.main-nav__link.is-active {
    color: var(--color-primary);
    background: var(--color-primary-light);
}

.topbar__right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar__user {
    font-weight: 600;
    color: var(--color-text);
}

.topbar__company {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--color-text);
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--color-surface);
}

/* --------------------------- Pro menu (topbar) --------------------------- */

.topbar__tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.topbar__hamburger {
    display: none;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 18px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.topbar__dd {
    position: relative;
}

.topbar__dd-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.topbar__dd-toggle:hover,
.topbar__dd-toggle:focus-visible {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
    outline: none;
}

.topbar__company-btn {
    padding: 5px 12px;
    font-weight: 600;
}

.topbar__company-code {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar__dd-caret {
    font-size: 11px;
    color: var(--color-text-muted);
}

.topbar__icon-btn {
    width: 36px;
    height: 36px;
    justify-content: center;
    font-size: 17px;
}

.topbar__badge {
    position: absolute;
    top: -2px;
    inset-inline-end: -2px;
    min-width: 16px;
    height: 16px;
    padding-inline: 4px;
    border-radius: 999px;
    background: var(--color-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.topbar__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    background: var(--color-primary);
    border: none;
    text-decoration: none;
    transition: box-shadow 0.15s ease, background 0.15s ease;
}

.topbar__avatar--link:hover,
.topbar__avatar--link:focus-visible {
    color: #fff;
    text-decoration: none;
    background: var(--color-primary-dark);
    box-shadow: 0 0 0 3px var(--color-primary-light);
    outline: none;
}

.topbar__avatar--lg {
    width: 42px;
    height: 42px;
    font-size: 15px;
}

.topbar__user-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    position: relative; /* pour le badge de notification sur l'avatar */
}

/* Menu avatar : contient notifications + accès rapide + messagerie + sociétés → défilant */
.topbar__dd-menu--user {
    width: 340px;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
}
.topbar__dd-menu--user .topbar__dd-header {
    position: sticky;
    top: 0;
    background: var(--color-surface);
    z-index: 1;
}

.topbar__dd-caret-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 11px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.topbar__dd-caret-btn:hover,
.topbar__dd-caret-btn:focus-visible {
    color: var(--color-primary);
    background: var(--color-primary-light);
    outline: none;
}

.topbar__dd-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    min-width: 240px;
    max-width: calc(100vw - 24px);
    padding: 6px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    z-index: 200;
}

.topbar__dd-menu--wide {
    min-width: 300px;
}

.topbar__dd.is-open > .topbar__dd-menu {
    display: block;
}

.topbar__dd-header {
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
}

.topbar__dd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text);
    font-family: inherit;
    font-size: 13px;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

.topbar__dd-item:hover,
.topbar__dd-item:focus-visible {
    background: var(--color-primary-light);
    color: var(--color-primary);
    outline: none;
    text-decoration: none;
}

.topbar__dd-item.is-current {
    background: var(--color-primary-light);
    font-weight: 600;
}

.topbar__dd-item.is-current:hover {
    color: var(--color-text);
}

.topbar__dd-item[disabled] {
    cursor: default;
    opacity: 0.9;
}

.topbar__dd-item-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.topbar__dd-item-text span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar__dd-check {
    color: var(--color-accent);
    font-size: 15px;
    flex-shrink: 0;
}

.topbar__dd-item--danger {
    color: var(--color-danger);
}

.topbar__dd-item--danger:hover,
.topbar__dd-item--danger:focus-visible {
    background: #fef3f2;
    color: var(--color-danger);
}

.topbar__dd-notif {
    align-items: flex-start;
}

.topbar__dd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 10px;
    color: var(--color-text-muted);
    font-size: 13px;
    text-align: center;
}

.topbar__dd-empty i {
    font-size: 20px;
}

.topbar__dd-footer {
    display: block;
    padding: 8px 10px;
    border-top: 1px solid var(--color-border);
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary);
    text-align: center;
    text-decoration: none;
}

.topbar__dd-footer:hover {
    text-decoration: underline;
}

.topbar__dd-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
}

.topbar__dd-profile-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.topbar__dd-profile-text strong,
.topbar__dd-profile-text span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar__dd-divider {
    height: 1px;
    margin: 4px 0;
    background: var(--color-border);
}

.topbar__dd-form {
    padding: 4px 10px;
}

.topbar__dd-label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--color-text-muted);
}

/* ------------------------------ Shell admin ------------------------------ */

.admin-shell {
    flex: 1;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 16px 24px 24px;
}

.breadcrumb-bar {
    margin-bottom: 12px;
}

/* En-tête de page mobile : bouton Menu (sidebar) + breadcrumb sur une même ligne */
.module-head {
    margin-bottom: 12px;
}
.module-head .breadcrumb-bar {
    margin-bottom: 0;
}

.breadcrumb {
    font-size: 13px;
}

.breadcrumb-item a {
    text-decoration: none;
}

.module-menu {
    margin-bottom: 16px;
}

.module-menu .nav-pills {
    gap: 4px;
    flex-wrap: wrap;
}

.module-menu .nav-link {
    color: var(--color-text-muted);
    font-weight: 500;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.module-menu .nav-link:hover {
    color: var(--color-primary);
    background: var(--color-primary-light);
}

.module-menu .nav-link.active {
    background: var(--color-primary);
    color: #fff;
}

/* ------------------------------ Contenu ------------------------------ */

.main {
    flex: 1;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px;
}

.page__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.page__title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.page__subtitle {
    margin: 4px 0 0;
    color: var(--color-text-muted);
}

.page__actions {
    display: flex;
    gap: 8px;
}

.section-title {
    margin: 28px 0 16px;
    font-size: 16px;
    font-weight: 600;
}

/* ------------------------------ Cartes ------------------------------ */

.card {
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.card-title {
    font-size: 16px;
    font-weight: 700;
}

/* --------------------------- PageControl (onglets) --------------------------- */

.pagecontrol__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: -1rem -1rem 0;
    padding: 0 6px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.pagecontrol__tab {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 12px 18px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    white-space: nowrap;
}

.pagecontrol__tab:hover {
    color: var(--color-primary);
}

.pagecontrol__tab.is-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.pagecontrol__panel {
    display: none;
    padding: 1.25rem 0 0;
}

.pagecontrol__panel.is-active {
    display: block;
}

@media (max-width: 575.98px) {
    .pagecontrol__tab {
        padding: 10px 12px;
        font-size: 13px;
    }
}

.welcome-card {
    background: linear-gradient(120deg, var(--color-primary) 0%, #2f7be0 100%);
    color: #ffffff;
    border-radius: 12px;
    padding: 28px 32px;
    box-shadow: var(--shadow-md);
}

.welcome-card h2 {
    margin: 0 0 6px;
    font-size: 20px;
}

.welcome-card p {
    margin: 0;
    opacity: 0.9;
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.module-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    box-shadow: var(--shadow-sm);
    color: var(--color-text);
    text-decoration: none;
}

.module-card:hover {
    text-decoration: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.module-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.module-card__name {
    font-weight: 600;
}

.stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--shadow-sm);
    height: 100%;
}

.stat-card__icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.stat-card__value {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
}

.stat-card__label {
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.stat-card--link {
    color: var(--color-text);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.stat-card--link:hover {
    text-decoration: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.module-card--available {
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.module-card--available:hover {
    text-decoration: none;
    border-color: var(--color-success);
}

.module-card--pending {
    opacity: 0.6;
    cursor: not-allowed;
}

.module-card--pending:hover {
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}

.activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.activity-list__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 14px;
}

.activity-list__item:last-child {
    border-bottom: none;
}

.activity-list__item > i {
    color: var(--color-primary);
}

.activity-list__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.activity-list__action {
    font-weight: 600;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.activity-list__user {
    color: var(--color-text-muted);
    font-size: 12px;
}

.activity-list__date {
    color: var(--color-text-muted);
    font-size: 12px;
    white-space: nowrap;
}

/* ------------------------------ MetaGrid ------------------------------ */

.metagrid__table {
    margin-bottom: 0;
}

.metagrid__table thead th {
    background: #f9fafb;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.metagrid__table td {
    vertical-align: middle;
}

.metagrid__filters {
    background: var(--color-surface-muted);
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.mg-filter { position: relative; min-width: 130px; }
.mg-filter__btn { cursor: pointer; padding-right: 24px; overflow: hidden; text-overflow: ellipsis; }
.mg-filter__drop { display: none; position: absolute; top: 100%; left: 0; z-index: 50; min-width: 220px; max-height: 300px; background: #fff; border: 1px solid var(--color-border); border-radius: 8px; box-shadow: var(--shadow-md); padding: 6px; }
.mg-filter__drop.is-open { display: block; }
.mg-filter__search { margin-bottom: 4px; }
.mg-filter__list { max-height: 200px; overflow-y: auto; }
.mg-filter__opt { display: flex; align-items: center; gap: 6px; padding: 3px 6px; font-size: 12px; cursor: pointer; border-radius: 4px; margin: 0; }
.mg-filter__opt:hover { background: var(--color-primary-light); }
.mg-filter__opt input { margin: 0; }

/* ------------------------------ Tabulator Theme MetaERP ------------------------------ */
.metadatagrid {
    width: 100%;
    max-width: 100%;
}

.metadatagrid .tabulator,
.metadatagrid .tabulator-tableholder {
    width: 100% !important;
}

.metadatagrid .tabulator-tableholder .tabulator-table {
    min-width: 100%;
}

.metadatagrid .tabulator .tabulator-header .tabulator-col.tabulator-frozen-right,
.metadatagrid .tabulator .tabulator-tableholder .tabulator-row .tabulator-cell.tabulator-frozen-right {
    background: #fff;
    z-index: 12;
    box-shadow: -3px 0 6px rgba(0, 0, 0, 0.05);
}

.metadatagrid .tabulator .tabulator-tableholder .tabulator-row.tabulator-row-even .tabulator-cell.tabulator-frozen-right {
    background: #F8FAFC;
}

.metadatagrid .tabulator .tabulator-header .tabulator-col.tabulator-frozen-right {
    background: #fff;
}

.tabulator {
    background: transparent;
    border: none;
    font-size: 13px;
    color: #1F2937;
}

.tabulator .tabulator-header {
    background: transparent;
    border-bottom: 1px solid #E5E7EB;
}

.tabulator .tabulator-header .tabulator-col {
    background: transparent;
    border-right: none;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
    padding: 10px 14px;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
    font-size: 12px;
    font-weight: 600;
    color: #6B7280;
    text-transform: none;
    letter-spacing: 0;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
    background: #EEF2FF;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="asc"] .tabulator-col-content .tabulator-col-title,
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="desc"] .tabulator-col-content .tabulator-col-title {
    color: #2563EB;
}

.tabulator .tabulator-header .tabulator-col .tabulator-arrow {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid #9CA3AF;
    margin-left: 5px;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="asc"] .tabulator-arrow {
    border-bottom: none;
    border-top: 4px solid #2563EB;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="desc"] .tabulator-arrow {
    border-bottom-color: #2563EB;
}

.tabulator .tabulator-tableholder .tabulator-table {
    background: #fff;
    color: #1F2937;
}

.tabulator .tabulator-tableholder .tabulator-row {
    border-bottom: 1px solid #F3F4F6;
    min-height: 40px;
}

.tabulator .tabulator-tableholder .tabulator-row.tabulator-row-even {
    background: #F8FAFC;
}

.tabulator .tabulator-tableholder .tabulator-row.tabulator-selectable:hover {
    background: #EEF2FF !important;
}

.tabulator .tabulator-tableholder .tabulator-row .tabulator-cell {
    padding: 8px 14px;
}

.tabulator .tabulator-footer {
    background: transparent;
    border-top: none;
    padding: 8px 14px;
}

.tabulator .tabulator-footer .tabulator-page {
    border-radius: 6px;
    border: 1px solid #E5E7EB;
    color: #2563EB;
    background: #fff;
    padding: 4px 10px;
    font-size: 13px;
    min-width: 32px;
    text-align: center;
}

.tabulator .tabulator-footer .tabulator-page.active {
    background: #2563EB;
    border-color: #2563EB;
    color: #fff;
}

.tabulator .tabulator-footer .tabulator-page:not(.disabled):hover {
    background: #EEF2FF;
    color: #1D4ED8;
}

.tabulator .tabulator-footer .tabulator-page-size {
    border: 1px solid #E5E7EB;
    border-radius: 6px;
}

/* Action buttons */
.mdg-actions { display: flex; gap: 2px; }
.mdg-actions .btn { border: none; background: transparent; color: #6B7280; padding: 4px 6px; border-radius: 6px; font-size: 13px; line-height: 1; }
.mdg-actions .btn:hover { background: #F3F4F6; color: #1F2937; }
.mdg-actions .btn-danger { color: #EF4444; }
.mdg-actions .btn-danger:hover { background: #FEF2F2; color: #DC2626; }

/* Custom badges — palette sémantique (skill metaerp-ui-ux §7) : soft en fond, couleur forte en texte */
.badge { font-weight: 500; font-size: 12px; padding: 3px 10px; border-radius: 20px; }
.bg-blue { background: #DBEAFE; color: var(--color-primary-dark); }
.bg-amber { background: #FEF3C7; color: #92400E; }
.bg-cyan { background: #CFFAFE; color: #155E75; }
.bg-green { background: #D1FAE5; color: #065F46; }
.bg-slate { background: #F1F5F9; color: var(--color-neutral); }
.bg-purple { background: #EDE9FE; color: #5B21B6; }
.bg-orange { background: #FFF7ED; color: #9A3412; }
.bg-emerald { background: #D1FAE5; color: #065F46; }
.bg-red { background: #FEE2E2; color: #991B1B; }

/* Tableaux → cartes sur mobile (skill metaerp-ui-ux §4) : une ligne = une carte, colonnes fusionnées en lignes libellées.
   À appliquer via la classe table-cards-mobile + data-label="..." sur chaque <td>. */
@media (max-width: 767.98px) {
    .table-cards-mobile thead { display: none; }
    .table-cards-mobile, .table-cards-mobile tbody, .table-cards-mobile tr, .table-cards-mobile td { display: block; width: 100%; box-sizing: border-box; }
    .table-cards-mobile tr { border: 1px solid var(--color-border); border-radius: 6px; margin-bottom: 5px; padding: 3px 2px; background: var(--color-surface); box-shadow: none; }
    .table-cards-mobile tr.row-late { border-left: 4px solid var(--color-danger); background: #fffafa; }
    .table-cards-mobile tr.row-warn { border-left: 4px solid var(--color-warning); background: #fffaf0; }
    .table-cards-mobile td { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 0 !important; padding: 2px 8px; font-size: 12px; line-height: 1.25; }
    .table-cards-mobile td::before { content: attr(data-label); flex: 0 0 auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); }
    .table-cards-mobile td.r { text-align: right; }
    .table-cards-mobile td:first-child { font-size: 13px; padding-top: 4px; }
    .table-cards-mobile .btn { white-space: nowrap; padding: 2px 8px; font-size: 11px; }
    .table-cards-mobile .badge { font-size: 10px; padding: 2px 8px; }
    .table-cards-mobile td.month-empty { display: none; }

    /* Breadcrumb : "Poste de travail" devient une icône maison sur mobile (gain d'espace) */
    .breadcrumb-item:first-child a {
        font-size: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .breadcrumb-item:first-child a::before {
        content: "\f424";
        font-family: "bootstrap-icons";
        font-size: 14px;
        line-height: 1;
    }

    /* Réduire le bruit sur mobile : bandeaux et sous-titres masqués (jamais supprimés du DOM), KPIs en tête */
    .kpi-strip .doc-head { display: none; }
    .page__subtitle { display: none; }
    .page__header { flex-wrap: wrap; gap: 8px; }
    .page__header .page__title { font-size: 1.15rem; }
}

/* ------------------------------ Connexion ------------------------------ */

.auth-body {
    background: linear-gradient(160deg, #eef3fb 0%, #dde7f6 100%);
    align-items: center;
    justify-content: center;
}

.auth-lang {
    position: absolute;
    top: 16px;
    inset-inline-end: 16px;
}

.auth-flash {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    max-width: 420px;
    box-shadow: var(--shadow-md);
}

.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--color-surface);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    padding: 40px 36px;
    margin: 24px;
}

.auth-card__brand {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-align: center;
}

.auth-card__brand span {
    color: var(--color-primary);
}

.auth-card__title {
    margin: 20px 0 4px;
    font-size: 22px;
    text-align: center;
}

.auth-card__subtitle {
    margin: 0 0 24px;
    color: var(--color-text-muted);
    text-align: center;
}

.login-company {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 8px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.login-company:hover {
    border-color: var(--color-primary);
    background: var(--color-surface-muted);
}

.login-company .form-check-input {
    flex-shrink: 0;
}

.login-company .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* ------------------------------ Pied de page ------------------------------ */

.footer {
    padding: 16px 24px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 13px;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

/* ------------------------------ RTL (arabe) ------------------------------ */

[dir="rtl"] body {
    letter-spacing: 0;
}

/* ===== RTL : les nombres (séparateur d'espace/milliers) doivent rester en LTR ===== */
/* `unicode-bidi: isolate` isole le contenu numérique sans changer l'alignement du parent. */
[dir="rtl"] .kpi-val,
[dir="rtl"] .kpi-val span,
[dir="rtl"] .doc-total .v,
[dir="rtl"] .doc-net .v,
[dir="rtl"] .doc-total span.v,
[dir="rtl"] .doc-net span.v,
[dir="rtl"] .doc-words,
[dir="rtl"] .doc-words span,
[dir="rtl"] .stat-card__value,
[dir="rtl"] .stat-card__value span,
[dir="rtl"] .card-title,
[dir="rtl"] td.r,
[dir="rtl"] th.r,
[dir="rtl"] .table td.r,
[dir="rtl"] .table th.r,
[dir="rtl"] .doc-table td.r,
[dir="rtl"] .doc-table th.r,
[dir="rtl"] .kpi-sub,
[dir="rtl"] .kpi-lbl,
[dir="rtl"] .badge {
    unicode-bidi: isolate;
}

/* Les valeurs numériques pures : direction LTR pour éviter l'inversion.
   Utiliser un wrapper inline (span) ne change pas l'alignement du parent. */
[dir="rtl"] .doc-total .v,
[dir="rtl"] .doc-net .v,
[dir="rtl"] .kpi-val {
    direction: ltr;
}

/* Ne pas inverser l'alignement des cellules .text-end en RTL */
[dir="rtl"] .text-end {
    text-align: right;
}

[dir="rtl"] .module-menu .nav-link,
[dir="rtl"] .main-nav__link {
    gap: 6px;
}

/* ------------------------------ Responsive (mobile / tablette) ------------------------------ */

@media (max-width: 1099.98px) {
    .topbar__hamburger {
        display: inline-flex;
    }

    .main-nav__link {
        padding: 6px 8px;
        font-size: 12.5px;
    }

    .main {
        padding: 16px;
    }

    .admin-shell {
        padding: 12px 16px 20px;
    }

    .welcome-card {
        padding: 20px;
    }

    .page__header {
        flex-wrap: wrap;
    }
}

@media (max-width: 575.98px) {
    .topbar {
        padding-inline: 12px;
    }

    .topbar__brand {
        font-size: 18px;
    }

    .main {
        padding: 12px;
    }

    .admin-shell {
        padding: 10px 12px 16px;
    }

    .page__header {
        gap: 12px;
        margin-bottom: 16px;
    }

    .page__title {
        font-size: 20px;
    }

    .welcome-card {
        padding: 18px 16px;
    }

    .module-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }

    .stat-card {
        padding: 14px;
    }

    .fiche-toolbar,
    .fiche-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .fiche-header > div {
        max-width: 100%;
    }

    .metagrid .card-header .card-title {
        font-size: 15px;
    }
}

/* ------------------------------ Module Sidebar (contextuelle) ------------------------------ */

:root {
    --msidebar-width: 250px;
}

.app-layout {
    display: flex;
    min-height: calc(100vh - var(--topbar-height));
}

.module-sidebar {
    width: var(--msidebar-width);
    min-width: var(--msidebar-width);
    background: var(--color-surface);
    border-inline-end: 1px solid var(--color-border);
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.25s ease, min-width 0.25s ease;
    display: flex;
    flex-direction: column;
    padding: 12px 0;
}

.module-sidebar.is-collapsed {
    width: 36px;
    min-width: 36px;
    padding: 12px 0;
    overflow: visible;
    border-inline-end: 1px solid var(--color-border);
}

/* Replié : on garde les ICÔNES, on masque les libellés / groupes / recherche */
.module-sidebar.is-collapsed .module-sidebar__menu {
    display: flex;
    padding: 0 4px;
}
.module-sidebar.is-collapsed .module-sidebar__search { display: none; }
.module-sidebar.is-collapsed .module-sidebar__label { display: none; }
.module-sidebar.is-collapsed .module-sidebar__badge { display: none; }
.module-sidebar.is-collapsed .module-sidebar__group { display: none; }
.module-sidebar.is-collapsed .module-sidebar__item {
    justify-content: center;
    padding: 8px 0;
    gap: 0;
}
.module-sidebar.is-collapsed .module-sidebar__parent::after { display: none; }
/* Replié : un parent devient relatif → ses enfants s'ouvrent en FLYOUT à droite au survol */
.module-sidebar.is-collapsed .module-sidebar__parent { position: relative; border-top: none; margin-top: 2px; }
.module-sidebar.is-collapsed .module-sidebar__children {
    display: none;
    position: absolute;
    inset-inline-start: 100%;
    top: 0;
    min-width: 230px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    padding: 6px;
    z-index: 120;
}
.module-sidebar.is-collapsed .module-sidebar__parent:hover + .module-sidebar__children,
.module-sidebar.is-collapsed .module-sidebar__children:hover,
.module-sidebar.is-collapsed .module-sidebar__parent:focus-visible + .module-sidebar__children {
    display: block;
}
/* Dans le flyout : libellés + items réaffichés et lisibles */
.module-sidebar.is-collapsed .module-sidebar__children .module-sidebar__label { display: inline; }
.module-sidebar.is-collapsed .module-sidebar__children .module-sidebar__group { display: block; }
.module-sidebar.is-collapsed .module-sidebar__children .module-sidebar__item {
    justify-content: flex-start;
    padding: 8px 12px;
    gap: 10px;
    white-space: nowrap;
}
.module-sidebar.is-collapsed .module-sidebar__children .module-sidebar__item i {
    font-size: 15px;
    color: var(--color-text);
    display: inline-block;
    min-width: 18px;
    text-align: center;
    flex: 0 0 auto;
}
.module-sidebar.is-collapsed .module-sidebar__children .module-sidebar__item .module-sidebar__label {
    color: var(--color-text);
}
.module-sidebar.is-collapsed .module-sidebar__children .module-sidebar__parent {
    justify-content: flex-start;
    padding: 10px 12px;
    gap: 10px;
    margin-top: 4px;
}
.module-sidebar.is-collapsed .module-sidebar__toggle {
    margin: 0 auto 8px;
}

.module-sidebar__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 14px;
    cursor: pointer;
    margin: 0 8px 8px;
    transition: background 0.15s ease;
}

.module-sidebar__toggle:hover {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.module-sidebar__menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 8px;
}

/* En-tête de module (logo + titre + sous-titre) */
.module-sidebar__mod {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 12px;
}
.module-sidebar__mod-logo {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    display: grid;
    place-items: center;
    color: #fff;
    flex-shrink: 0;
}
.module-sidebar__mod-logo i { font-size: 18px; }
.module-sidebar__mod-txt b { font-size: 15px; color: var(--color-text); display: block; line-height: 1.15; }
.module-sidebar__mod-txt small { color: var(--color-text-muted); font-size: 11px; }
.module-sidebar.is-collapsed .module-sidebar__mod { display: none; }

/* Teintes d'icônes par groupe */
.module-sidebar__parent[data-tint="blue"] i { color: var(--color-primary); }
.module-sidebar__parent[data-tint="amber"] i { color: #b45309; }
.module-sidebar__parent[data-tint="red"] i { color: #b91c1c; }
.module-sidebar__parent[data-tint="indigo"] i { color: #4f46e5; }
.module-sidebar__parent[data-tint="teal"] i { color: #0d9488; }
.module-sidebar__parent[data-tint="slate"] i { color: #334155; }

.module-sidebar__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--color-text);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    transition: background 0.15s ease, color 0.15s ease;
}

.module-sidebar__item:hover {
    background: var(--color-primary-light);
    color: var(--color-primary);
    text-decoration: none;
}

.module-sidebar__item.is-active {
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: 600;
}

.module-sidebar__item.is-active::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--color-primary);
}

.module-sidebar__item.is-active:hover {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.module-sidebar__item i {
    font-size: 16px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.module-sidebar__badge {
    margin-inline-start: auto;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.5;
    min-width: 18px;
    text-align: center;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--color-border);
    color: var(--color-text-muted);
}

.module-sidebar__badge.is-blue { background: var(--color-primary-light); color: var(--color-primary); }
.module-sidebar__badge.is-amber { background: #fef3c7; color: #b45309; }
.module-sidebar__badge.is-red { background: #fee2e2; color: #b91c1c; }
.module-sidebar__item.is-active .module-sidebar__badge { background: #fff; color: var(--color-primary); }

.module-sidebar__group {
    padding: 14px 12px 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    white-space: nowrap;
    border-top: 1px solid var(--color-border);
    margin-top: 6px;
}

.module-sidebar__group:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 4px;
}

.module-sidebar__search {
    position: relative;
    padding: 8px 10px;
}

.module-sidebar__search i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--color-text-muted);
    pointer-events: none;
}

.module-sidebar__search input {
    font-size: 12px;
    border-radius: 999px;
    padding-left: 30px;
    background: #f8fafc;
    border-color: var(--color-border);
}

.module-sidebar__search input:focus {
    background: #fff;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.module-sidebar__parent {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 0;
    border-top: 1px solid var(--color-border);
    border-radius: 8px;
    background: transparent;
    color: var(--color-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    width: 100%;
    text-align: start;
    margin-top: 6px;
    transition: color 0.15s, background 0.15s;
}

.module-sidebar__parent i {
    font-size: 16px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    color: var(--color-primary);
}

.module-sidebar__parent:first-child {
    border-top: none;
    margin-top: 0;
}

.module-sidebar__parent:hover {
    color: var(--color-primary);
    background: var(--color-primary-light);
}

.module-sidebar__parent::after {
    content: '\F282';
    font-family: 'bootstrap-icons';
    font-size: 10px;
    margin-inline-start: auto;
    transition: transform 0.2s ease;
    opacity: 0.5;
}

.module-sidebar__parent.is-expanded {
    color: var(--color-primary);
}

.module-sidebar__parent.is-expanded::after {
    transform: rotate(90deg);
    opacity: 1;
}

.module-sidebar__children {
    display: none;
    flex-direction: column;
    gap: 1px;
    padding: 2px 0 6px 4px;
}

.module-sidebar__children.is-open {
    display: flex;
}

.module-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    top: var(--topbar-height);
    background: rgba(0, 0, 0, 0.3);
    z-index: 89;
}

.main-content--full {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    padding: 16px 24px 24px;
}

/* Bouton "Menu" : masqué par défaut (desktop), affiché uniquement sur mobile */
.module-sidebar-mobile-toggle {
    display: none;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    white-space: nowrap;
}

@media (max-width: 1099.98px) {
    .module-sidebar {
        position: fixed;
        top: var(--topbar-height);
        inset-inline-start: 0;
        bottom: 0;
        z-index: 90;
        box-shadow: var(--shadow-md);
        transform: translateX(0);
        transition: transform 0.25s ease;
    }

    .module-sidebar.is-collapsed {
        transform: translateX(-100%);
        width: var(--msidebar-width);
        min-width: var(--msidebar-width);
        padding: 12px 0;
    }

    .module-sidebar__toggle {
        display: inline-flex;
        position: absolute;
        top: 8px;
        inset-inline-end: 8px;
        z-index: 5;
    }

    .module-sidebar-overlay.is-visible {
        display: block;
    }

    .main-content--full {
        padding: 16px;
    }

    .module-sidebar-mobile-toggle {
        display: flex;
    }
}

/* Tablette (768-1099px) : sidebar réduite PAR DÉFAUT (icônes seules) pour plus d'espace
   — s'étend au clic sur le chevron ; l'overlay et le bouton "Menu" du contenu sont inutiles ici */
@media (min-width: 768px) and (max-width: 1099.98px) {
    .module-sidebar {
        position: static;
        transform: none;
        width: 36px;
        min-width: 36px;
        padding: 12px 0;
        overflow: visible;
        box-shadow: none;
    }
    .module-sidebar .module-sidebar__menu { display: none; }
    .module-sidebar.is-collapsed {
        transform: none;
        width: 36px;
        min-width: 36px;
    }
    .module-sidebar:not(.is-collapsed) {
        width: var(--msidebar-width);
        min-width: var(--msidebar-width);
    }
    .module-sidebar:not(.is-collapsed) .module-sidebar__menu { display: flex; }
    .module-sidebar-overlay { display: none !important; }
    .module-sidebar__toggle { position: static; margin: 0 auto 8px; }
    .module-sidebar-mobile-toggle { display: none !important; }
}

@media (max-width: 575.98px) {
    .main-content--full {
        padding: 12px;
    }
}

/* ------------------------------------------------------------------
   Topbar v2 — deux étages
   Desktop :  étage 1 = logo · recherche(droite) · société · outils
              étage 2 = menu des modules (centré)
   Mobile  :  étage 1 = logo + avatar ; étage 2 = recherche + société ;
              menu via hamburger
   ------------------------------------------------------------------ */
.topbar {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
}

.topbar__row--top {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    width: 100%;
    height: 56px;
    padding-inline: 24px;
    flex-wrap: nowrap;
}

.topbar__row--nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 46px;
    border-top: 1px solid var(--color-border);
    padding-inline: 12px;
}

.topbar__left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Recherche : icône loupe ; le champ s'ouvre au clic dans un panneau flottant centré
   (entre le logo et l'avatar) — règle Billel : moins de place occupée dans la barre. */
.topbar__search {
    position: relative;
    margin-inline-start: auto; /* alignée à droite en desktop */
}

.topbar__search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.topbar__search-toggle:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

.topbar__search-pop {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: min(440px, calc(100vw - 24px));
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
    padding: 10px 12px;
    z-index: 1060;
}
.topbar__search-pop.is-open {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.topbar__search-pop-icon {
    font-size: 14px;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.topbar__search-input {
    border: 0;
    outline: none;
    background: transparent;
    flex: 1 1 160px;
    min-width: 0;
    font-size: 13px;
    color: var(--color-text);
}

.topbar__search-input::placeholder {
    color: var(--color-text-muted);
}

.topbar__search-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    flex-shrink: 0;
}
.topbar__search-close:hover {
    color: var(--color-danger);
    background: #fef2f2;
}

.topbar__search-pop .search-palette {
    flex-basis: 100%;
}

/* Filtre de tableau : compact sur desktop, pleine largeur sur mobile (Billel) */
.table-filter {
    max-width: 180px;
}

/* Bouton flottant "remonter en haut" */
.go-top {
    position: fixed;
    bottom: 20px;
    inset-inline-end: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-primary);
    color: #fff;
    font-size: 18px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.25);
    z-index: 1040;
}
.go-top.is-visible {
    display: inline-flex;
}
.go-top:hover {
    background: var(--color-primary-dark);
}

/* Boutons flottants libres (imprimer, retour…) : au-dessus du go-top, bas droite */
.page-float-actions {
    position: fixed;
    bottom: 76px;
    inset-inline-end: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1040;
}
.page-float-actions .btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

/* Desktop / tablette : toolbar complète — icônes + société + recherche visibles (Billel) */
@media (min-width: 768px) {
    .dd-desktop { display: inline-flex !important; }
    .dd-mobile-only { display: none !important; }

    .topbar__search-toggle { display: none; }
    .topbar__search-pop {
        display: flex;
        position: static;
        transform: none;
        width: 280px;
        box-shadow: none;
        border: 1px solid var(--color-border);
        border-radius: 999px;
        padding: 6px 14px;
        background: var(--color-surface-muted);
    }
    .topbar__search-pop-icon { color: var(--color-text-muted); }
    .topbar__search-close { display: none; }
    .topbar__badge--avatar { display: none !important; }
    .topbar__dd-menu--user { width: 300px; }
}

.topbar__company {
    flex-shrink: 0;
}

.topbar__row--nav .main-nav {
    flex: 0 1 auto;
    min-width: 0;
    justify-content: center;
}

.topbar__company-name {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Palette de recherche de commandes (type SAP) */
.search-palette {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    min-width: 320px;
    z-index: 300;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    max-height: 420px;
    overflow-y: auto;
    padding: 6px;
    text-align: start;
}

.search-palette.is-open {
    display: block;
}

.search-palette .sp-group {
    padding: 6px 10px 2px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.search-palette .sp-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--color-text);
    text-decoration: none;
}

.search-palette .sp-item:hover,
.search-palette .sp-item.is-selected {
    background: var(--color-primary-light);
    color: var(--color-primary);
    text-decoration: none;
}

.search-palette .sp-item i {
    font-size: 15px;
    flex-shrink: 0;
}

.search-palette .sp-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-palette .sp-code {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 1px 6px;
    flex-shrink: 0;
}

.search-palette .sp-empty {
    padding: 18px 10px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 13px;
}

/* Boutons Libre / Contrôle — UN SEUL coloré à la fois.
   État non coché basé sur la radio (:not(:checked)) pour que le clic bascule
   correctement ; l'état coché est coloré par :checked et par la classe
   serveur .is-checked (garantie après rechargement). */
.mode-toggle .btn {
    --bs-btn-color: var(--color-text);
    --bs-btn-border-color: var(--color-border);
    --bs-btn-bg: var(--color-surface-muted);
}

.mode-toggle .btn-check:not(:checked) + .btn {
    background-color: var(--color-surface-muted);
    border-color: var(--color-border);
    color: var(--color-text);
}

.mode-toggle .btn-check:checked + .btn-outline-success,
.mode-toggle .btn.is-checked.btn-outline-success {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.mode-toggle .btn-check:checked + .btn-outline-warning,
.mode-toggle .btn.is-checked.btn-outline-warning {
    background-color: var(--color-warning);
    border-color: var(--color-warning);
    color: #fff;
}

@media (max-width: 991.98px) {
    .topbar {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 12px;
        padding: 8px 12px;
    }

    /* Les enfants de l'étage 1 rejoignent le conteneur pour former 2 lignes */
    .topbar__row--top {
        display: contents;
    }

    .topbar__left {
        order: 1;
    }

    .topbar__right {
        order: 4;
        margin-inline-start: auto;
    }

    .topbar__search {
        order: 3;
        flex: 0 0 auto;
        margin-inline-start: auto;
    }

    /* Panneau de recherche : fixé sous la barre, pleine largeur (jamais hors écran), s'ouvre à gauche */
    .topbar__search-pop {
        position: fixed;
        top: calc(var(--topbar-height) + 6px);
        inset-inline-start: 10px;
        inset-inline-end: 10px;
        width: auto;
        transform: none;
    }

    /* Mobile : icônes + société masquées (elles vivent dans le menu avatar) */
    .dd-desktop { display: none !important; }
    .dd-mobile-only { display: block; }

/* Barre de filtres de grille : un seul bloc, jamais de retour à la ligne
   (combobox dépôt + recherche sur la même ligne, même sur mobile) */
.mdg-filter-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: nowrap;
}
.mdg-filter-bar .filter-select {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    min-width: 130px;
}
.mdg-filter-bar .mdg-global-search {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: none;
}
@media (max-width: 767.98px) {
    .mdg-filter-bar .filter-select,
    .mdg-filter-bar .mdg-global-search {
        max-width: none !important;
        width: auto !important;
    }
    .mdg-filter-bar .filter-select { min-width: 118px; }
}

    /* Filtres de tableau : pleine largeur sur mobile */
    .table-filter,
    .table-status-filter,
    .filter-select {
        max-width: 100%;
        width: 100%;
    }

    .topbar__company {
        order: 4;
    }

    /* Menu des modules : panneau ouvert par le hamburger (état d'origine — ne pas modifier) */
    .topbar__row--nav {
        order: 5;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: auto;
        max-height: calc(100vh - var(--topbar-height));
        overflow-y: auto;
        flex-direction: column;
        align-items: stretch;
        padding: 6px 8px;
        background: var(--color-surface);
        border-top: 1px solid var(--color-border);
        box-shadow: var(--shadow-md);
        display: none;
    }

    .topbar__row--nav.is-open {
        display: flex;
    }

    .topbar__row--nav .main-nav {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    /* Dropdowns topbar : rester à l'écran (fixés sous la barre, défilants) */
    .topbar__dd-menu {
        position: fixed;
        top: calc(var(--topbar-height) + 6px);
        inset-inline-end: 10px;
        max-width: calc(100vw - 20px);
        max-height: calc(100vh - var(--topbar-height) - 12px);
        overflow-y: auto;
    }
}

@media (max-width: 575.98px) {
    .topbar__company-btn .badge {
        display: none;
    }

    .topbar__company-name {
        max-width: 90px;
    }
}

/* ============================================================
   STYLE DOCUMENT (En-tête → Détail → Totaux) — global MetaERP
   ============================================================ */
.doc-card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.doc-head{display:flex;align-items:center;gap:10px;padding:10px 18px;border-bottom:1px solid #e5e7eb;background:#f8fafc;border-radius:10px 10px 0 0}
.doc-title{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#1e293b;display:flex;align-items:center;gap:8px}

/* Lignes de tableau : survol (hover) — feedback visuel (Billel) */
.doc-table tbody tr {
    transition: background 0.12s ease;
}
.doc-table tbody tr:hover {
    background: var(--color-primary-light);
}
/* Indicateur de tri par colonne */
.doc-table th.sort-asc::after { content: " ▲"; font-size: 9px; }
.doc-table th.sort-desc::after { content: " ▼"; font-size: 9px; }
.doc-title .ico{color:#2563eb}
.doc-body{padding:18px}
.doc-label{display:block;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#64748b;margin-bottom:5px}

/* Carte d'en-tête document compacte : une ligne par champ, label gauche / valeur droite (Billel) */
.doc .doc-body { padding: 10px 14px; }
.doc-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 3px 0;
    border-bottom: 1px dashed #f1f5f9;
    font-size: 13px;
}
.doc-line:last-child { border-bottom: 0; }
.doc-line__k {
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #64748b;
}
.doc-line__v {
    text-align: right;
    font-weight: 600;
    color: #0f172a;
    word-break: break-word;
    max-width: 70%;
}
.doc-cell{border:1px solid #eef2f6;border-radius:6px;padding:8px 10px;background:#fbfcfe}

.doc-cell-warn{border-color:#f79009;background:#fffbeb}
.doc-cell-warn .v{color:#b45309}
.doc-cell .k{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#94a3b8}
.doc-cell .v{font-size:14px;font-weight:600;color:#0f172a;margin-top:2px}

/* Vue d'ensemble : KPIs compacts (la décision en un coup d'œil, sans encombrer) */
.kpi-strip .doc-body{padding:10px 12px}
.kpi-strip .doc-cell{padding:4px 8px;border-radius:5px}
.kpi-strip .doc-cell .k{font-size:8.5px;letter-spacing:.05em}
.kpi-strip .doc-cell .v{font-size:12px;margin-top:1px;font-weight:700}
.doc-table{width:100%;border-collapse:collapse;font-size:13px}
.doc-table thead th{background:#1e293b;color:#fff;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:9px 10px;text-align:left;white-space:nowrap;border:0}
.doc-table thead th.r,.doc-table td.r{text-align:right}
.doc-table td{padding:7px 10px;border-bottom:1px solid #eef2f6;vertical-align:middle}
.doc-table tbody tr:hover{background:#f8fafc}
.doc-total{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:13px;border-bottom:1px dashed #e5e7eb}
.doc-total .k{color:#475569}
.doc-total .v{font-weight:600;font-variant-numeric:tabular-nums}
.doc-net{margin-top:10px;display:flex;justify-content:space-between;align-items:center;background:#1e293b;color:#fff;border-radius:8px;padding:10px 14px}
.doc-net .k{font-size:12px;font-weight:700;letter-spacing:.06em}
.doc-net .v{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.doc-words{margin-top:12px;padding:9px 12px;background:#f1f5f9;border-left:3px solid #2563eb;border-radius:0 6px 6px 0;font-size:12px;font-style:italic;color:#334155}

/* ── Compact mobile : vue d'ensemble 2 cartes/ligne, espace réduit, boutons compacts ── */
@media (max-width: 767.98px) {
    /* Vue d'ensemble : cartes plus denses (2 par ligne via col-6) */
    .kpi-strip .doc-body{padding:8px 10px}
    .kpi-strip .doc-cell{padding:6px 8px}
    .kpi-strip .doc-cell .k{font-size:9px}
    .kpi-strip .doc-cell .v{font-size:13px;margin-top:1px}
    /* Espaces vides réduits */
    .doc-card{margin-bottom:10px !important}
    .doc-head{padding:7px 12px}
    .doc-body{padding:10px 12px}
    .page__header{padding:12px 14px 8px}
    .page__header .page__title{font-size:18px}
    /* Boutons compacts en tête (actions principales restent accessibles) */
    .page__header .btn{padding:.26rem .55rem;font-size:.8rem}
    .mdg-actions .btn{width:30px;height:30px;padding:0;font-size:.8rem;display:inline-flex;align-items:center;justify-content:center}
    .btn-sm{padding:.22rem .5rem;font-size:.78rem}
    /* Totaux moins encombrants */
    .doc-net .v{font-size:16px}
    /* Grille : header de colonnes masqué en mobile (filtres externes suffisent) */
    .metadatagrid .tabulator-header-contents,
    .metadatagrid .tabulator-col,
    .metadatagrid .tabulator-header{display:none !important}
    .metadatagrid .tabulator-row{min-height:38px}
    /* Footer de pagination : 2 lignes si l'espace manque */
    .metadatagrid .tabulator-footer-contents{flex-wrap:wrap;gap:4px 10px;justify-content:center}
    .metadatagrid .tabulator-page-counter{order:3;width:100%;text-align:center}
}


/* ===== Combobox locale (select � recherche) ===== */
.meta-ac{position:relative}
.meta-ac .ac-search{padding-right:28px}
.meta-ac .ac-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:none;color:#94a3b8;cursor:pointer;display:none;line-height:1}
.meta-ac.has-value .ac-clear{display:inline}
.meta-ac .ac-list{position:absolute;top:100%;left:0;right:0;z-index:40;background:#fff;border:1px solid #cbd5e1;border-top:none;border-radius:0 0 10px 10px;max-height:220px;overflow:auto;display:none;box-shadow:0 10px 24px rgba(0,0,0,.12)}
.meta-ac.is-open .ac-list{display:block}
.meta-ac .ac-item{padding:6px 10px;cursor:pointer;font-size:13px;display:flex;justify-content:space-between;gap:8px}
.meta-ac .ac-item b{color:#2563eb;font-weight:600}
.meta-ac .ac-item .ac-code{font-size:11px;color:#64748b}
.meta-ac .ac-item:hover,.meta-ac .ac-item.active{background:#eff6ff}
.meta-ac .ac-empty{padding:8px 10px;color:#94a3b8;font-size:13px}