/* ============================================
   KonX — Professional Mobile UI/UX
   Comprehensive Mobile Experience System
   ============================================ */

/* ============================================
   MOBILE BOTTOM NAVIGATION BAR
   ============================================ */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--white);
    border-top: 1px solid var(--neutral-200);
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.95);
}

.mobile-bottom-nav .mobile-nav-list {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
    height: 60px;
}

.mobile-bottom-nav .mobile-nav-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-bottom-nav .mobile-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 0;
    width: 100%;
    text-decoration: none;
    color: var(--neutral-400);
    font-size: 10px;
    font-weight: var(--weight-medium);
    letter-spacing: 0.01em;
    transition: color 0.2s ease;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

.mobile-bottom-nav .mobile-nav-link i {
    font-size: 20px;
    transition: transform 0.2s ease, color 0.2s ease;
    line-height: 1;
}

.mobile-bottom-nav .mobile-nav-link span {
    line-height: 1;
    white-space: nowrap;
}

/* Active state */
.mobile-bottom-nav .mobile-nav-link.active {
    color: var(--primary-500);
}

.mobile-bottom-nav .mobile-nav-link.active i {
    transform: scale(1.05);
}

.mobile-bottom-nav .mobile-nav-link.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 3px;
    background: var(--primary-500);
    border-radius: 0 0 4px 4px;
}

/* Tap feedback */
.mobile-bottom-nav .mobile-nav-link:active i {
    transform: scale(0.9);
}

/* FAB Center button */
.mobile-bottom-nav .mobile-nav-item.fab-item {
    position: relative;
    flex: 1;
}

.mobile-bottom-nav .mobile-nav-link.fab-link {
    position: relative;
}

.mobile-bottom-nav .fab-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    border-radius: 50%;
    color: var(--white);
    box-shadow: 0 4px 16px rgba(185, 28, 28, 0.35);
    margin-top: -20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mobile-bottom-nav .fab-circle i {
    font-size: 20px;
    color: var(--white);
}

.mobile-bottom-nav .fab-link:active .fab-circle {
    transform: scale(0.92);
    box-shadow: 0 2px 8px rgba(185, 28, 28, 0.25);
}

.mobile-bottom-nav .fab-link span {
    color: var(--neutral-500);
    margin-top: 2px;
}

/* ============================================
   MOBILE FAB MENU (Expandable)
   ============================================ */
.mobile-fab-menu {
    display: none;
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mobile-fab-menu.open {
    display: block;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.mobile-fab-menu-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-fab-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-direction: row-reverse;
}

.mobile-fab-menu-item a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex-direction: row-reverse;
}

.mobile-fab-menu-item .fab-menu-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
    color: var(--primary-500);
    font-size: 16px;
    transition: transform 0.2s ease;
}

.mobile-fab-menu-item .fab-menu-label {
    background: var(--neutral-800);
    color: var(--white);
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: var(--weight-medium);
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.mobile-fab-menu-item:active .fab-menu-icon {
    transform: scale(0.9);
}

.mobile-fab-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.mobile-fab-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

/* ============================================
   MOBILE SEARCH OVERLAY
   ============================================ */
.mobile-search-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    background: var(--white);
    padding: 12px 16px;
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    transform: translateY(-100%);
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-search-overlay.open {
    transform: translateY(0);
    pointer-events: auto;
}

.mobile-search-inner {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mobile-search-inner .mobile-search-input {
    flex: 1;
    height: 44px;
    border: 2px solid var(--neutral-200);
    border-radius: 12px;
    padding: 0 16px;
    font-size: 16px;
    /* Prevent iOS zoom */
    font-family: var(--font-family);
    background: var(--neutral-50);
    color: var(--neutral-900);
    transition: border-color 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.mobile-search-inner .mobile-search-input:focus {
    outline: none;
    border-color: var(--primary-400);
    background: var(--white);
}

.mobile-search-inner .mobile-search-close {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral-600);
    font-size: 18px;
    background: var(--neutral-100);
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.mobile-search-inner .mobile-search-close:active {
    background: var(--neutral-200);
}

/* ============================================
   MOBILE PULL INDICATOR (visual only)
   ============================================ */
.mobile-pull-indicator {
    display: none;
    width: 36px;
    height: 4px;
    background: var(--neutral-300);
    border-radius: 2px;
    margin: 8px auto 0;
}

/* ============================================
   RESPONSIVE — TABLET (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {

    /* ── Prevent horizontal overflow globally ── */
    html,
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    .app-layout {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    /* Show mobile bottom nav */
    .mobile-bottom-nav {
        display: block;
    }

    /* Add padding at bottom for bottom nav */
    .main-content {
        padding-bottom: calc(70px + env(safe-area-inset-bottom, 0));
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    .dashboard-content,
    .factures-page,
    .carnet-page,
    .clients-page,
    .produits-page,
    .rapports-page,
    .st-app,
    .nf-page,
    .nc-page,
    .np-page {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0)) !important;
    }

    /* ---- Improved Mobile Header ---- */
    .top-header {
        height: 52px;
        padding: 0 12px;
        gap: 8px;
    }

    .header-left {
        gap: 8px;
    }

    /* Better menu toggle */
    .menu-toggle {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        font-size: 18px;
    }

    /* Show mobile search button instead of search box */
    .search-box {
        display: none !important;
    }

    .header-actions {
        gap: 2px;
    }

    .header-btn {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .header-btn span:not(.notification-badge) {
        display: none;
    }

    /* Mobile search button (injected by JS) */
    .mobile-search-btn {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--neutral-600);
        font-size: 16px;
        background: transparent;
        border: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.2s ease;
    }

    .mobile-search-btn:active {
        background: var(--neutral-100);
    }

    /* Notification badge size */
    .notification-badge {
        min-width: 16px;
        height: 16px;
        font-size: 9px;
        top: 4px;
        right: 4px;
    }

    /* Header primary button */
    .btn-new {
        padding: 0 12px;
        height: 36px;
        font-size: 12px;
        border-radius: 10px;
    }

    .btn-new span {
        display: none !important;
    }

    .btn-new i {
        margin: 0;
        font-size: 14px;
    }

    /* Language switcher compact */
    .language-switcher {
        margin: 0;
        padding: 2px;
        border-radius: 8px;
        flex-shrink: 0;
        gap: 2px;
    }

    .lang-btn {
        padding: 4px 8px;
        font-size: 11px;
        border-radius: 6px;
        min-width: 32px;
        min-height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* User avatar in header */
    .user-avatar-header {
        width: 32px;
        height: 32px;
    }

    .user-avatar-header img {
        width: 32px;
        height: 32px;
    }

    /* ---- Improved Mobile Sidebar ---- */
    .sidebar {
        width: 280px;
        z-index: 1001;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: none;
    }

    .sidebar.open {
        box-shadow: 8px 0 30px rgba(0, 0, 0, 0.2);
    }

    .sidebar-backdrop {
        z-index: 1000;
        transition: opacity 0.35s ease;
        pointer-events: none;
    }

    .sidebar-backdrop.visible {
        pointer-events: auto;
    }

    .sidebar-header {
        padding: 16px 20px;
    }

    .sidebar-header .logo-icon {
        cursor: pointer;
    }

    .nav-link {
        padding: 12px 20px;
        font-size: 14px;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .nav-link i {
        width: 24px;
        font-size: 16px;
    }

    .sidebar-footer {
        padding: 12px 16px;
    }

    /* ---- Touch-Friendly KPI Cards ---- */
    .kpi-card {
        padding: 16px;
        border-radius: 14px;
        min-height: auto;
    }

    .kpi-header {
        margin-bottom: 10px;
    }

    .kpi-body {
        margin-bottom: 8px;
    }

    .kpi-label {
        font-size: 12px;
    }

    .kpi-amount {
        font-size: 22px !important;
    }

    .kpi-currency {
        font-size: 13px;
    }

    /* ---- Mobile-Friendly Data Tables ---- */
    .data-table {
        border-radius: 12px;
    }

    .data-table th {
        padding: 10px 12px;
        font-size: 11px;
        white-space: nowrap;
    }

    .data-table td {
        padding: 12px;
        font-size: 13px;
    }

    /* ---- Floating Action Button (FAB) ---- */
    /* FAB menu & backdrop are controlled by JS display toggling */
    /* Do NOT set display:block here — it would make the invisible
       backdrop cover the screen and block all taps */

    /* Search overlay is also controlled by JS */

    .mobile-pull-indicator {
        display: block;
    }

    /* ---- Modal as Bottom Sheet ---- */
    .konx-modal-overlay,
    [class*="-modal-overlay"] {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .konx-modal,
    [class*="-modal-overlay"]>div:first-child:not([class*="backdrop"]) {
        border-radius: 20px 20px 0 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        animation: slideUpSheet 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0)) !important;
    }

    /* Modal drag handle */
    .konx-modal::before,
    .modal-content::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: var(--neutral-300);
        border-radius: 2px;
        margin: 0 auto 12px;
    }

    /* Modal action buttons full width */
    .konx-modal .modal-actions,
    .modal-footer,
    [class*="modal-actions"] {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .konx-modal .modal-actions button,
    .modal-footer button,
    [class*="modal-actions"] button {
        width: 100% !important;
        min-height: 44px !important;
        border-radius: 12px !important;
        font-size: 14px !important;
    }

    /* ---- Notification Panel as Bottom Sheet ---- */
    .konx-notif-panel {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 80vh !important;
        border-radius: 20px 20px 0 0 !important;
        transform: translateY(100%) !important;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0)) !important;
    }

    .konx-notif-panel.visible {
        transform: translateY(0) !important;
    }

    .konx-notif-overlay {
        z-index: 1050 !important;
    }

    .konx-notif-panel {
        z-index: 1051 !important;
    }

    /* ---- Hide top-header breadcrumb on mobile ---- */
    .top-header .breadcrumb,
    .top-header .breadcrumb-item,
    .top-header .breadcrumb-sep,
    .top-header .breadcrumb [class*="sep"] {
        display: none !important;
    }

    /* Keep top header clean/aligned after breadcrumb is removed */
    .top-header .header-left {
        gap: 0;
        min-width: 0;
        flex-shrink: 0;
    }

    .top-header .header-right {
        margin-inline-start: auto;
        min-width: 0;
    }

    /* ---- Touch-friendly buttons ---- */
    .btn,
    button:not(.mobile-nav-link):not(.lang-btn):not(.page-btn) {
        min-height: 40px;
    }

    /* ---- Toast position above bottom nav ---- */
    [class$="-toast"] {
        bottom: calc(80px + env(safe-area-inset-bottom, 0)) !important;
        left: 16px !important;
        right: 16px !important;
        max-width: none !important;
        width: auto !important;
        border-radius: 14px !important;
        font-size: 13px !important;
    }

    /* ---- Page-Specific Mobile Overrides ---- */

    /* ---- Shared page styles (all pages) ---- */
    .page-content {
        padding: 16px 12px !important;
        gap: 16px !important;
    }

    .page-header,
    .page-header-left,
    [class*="page-header"] {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start !important;
    }

    .page-title,
    [class*="page-title"]:not(.st-page-subtitle):not(.page-title-row) {
        font-size: 20px !important;
        line-height: 1.3;
    }

    .page-subtitle,
    .st-page-subtitle,
    [class*="page-subtitle"] {
        font-size: 13px !important;
    }

    .page-badge {
        font-size: 10px !important;
    }

    /* All toolbars stack vertically */
    [class*="toolbar"] {
        flex-direction: column;
        gap: 10px;
    }

    [class*="toolbar"] [class*="toolbar-left"],
    [class*="toolbar"] [class*="toolbar-right"] {
        width: 100%;
        flex-wrap: wrap;
    }

    /* All KPI rows single column */
    [class*="kpi-row"],
    .cl-kpi-row {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* All KPI cards consistent */
    [class*="kpi-card"],
    .cl-kpi-card {
        border-radius: 14px !important;
        padding: 14px !important;
    }

    /* All table wrappers scrollable */
    [class*="table-wrapper"],
    [class*="table-wrap"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 12px;
    }

    /* All cards consistent radius */
    [class*="-card"]:not(.kpi-card):not(.mobile-nav-item):not(.cl-kpi-card) {
        border-radius: 14px;
    }

    /* All page header action bars */
    [class*="header-actions"]:not(.header-actions) {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
    }

    [class*="header-actions"]:not(.header-actions) .btn {
        flex: 1;
        min-width: 0;
        justify-content: center;
        font-size: 12px;
        padding: 0 12px;
        height: 40px;
        border-radius: 10px;
    }

    /* All footer action bars */
    [class*="footer-actions"] {
        flex-direction: column;
        gap: 8px;
    }

    [class*="footer-actions"] .btn,
    [class*="footer-actions"] button {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }

    /* All pagination controls */
    [class*="pagination"]:not([class*="-btns"]):not([class*="-controls"]) {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    [class*="pagination"] [class*="pagination-btns"],
    [class*="pagination"] [class*="pagination-controls"],
    .pagination,
    .cl-pagination-controls {
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }

    /* -- Dashboard / Index page -- */
    .dashboard-content {
        padding: 16px 12px !important;
        gap: 16px !important;
    }

    .kpi-row {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .kpi-card {
        border-radius: 14px !important;
        padding: 14px !important;
    }

    .kpi-header {
        gap: 8px;
    }

    .kpi-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .kpi-amount {
        font-size: 22px !important;
    }

    .kpi-chart canvas {
        height: 36px !important;
    }

    .middle-row {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .card {
        border-radius: 14px !important;
    }

    .card-header {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

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

    .carnet-card,
    .facture-rapide-card {
        border-radius: 14px !important;
    }

    .factures-card {
        border-radius: 14px !important;
    }

    /* Dashboard quick invoice form mobile */
    .facture-form .form-group {
        margin-bottom: 10px;
    }

    .facture-form .designation-row {
        flex-direction: column;
        gap: 8px;
    }

    .facture-form .amount-input-wrap {
        flex-direction: row;
    }

    .facture-form .form-total {
        flex-wrap: wrap;
        gap: 8px;
    }

    .facture-form .btn-submit {
        width: 100%;
        min-height: 44px;
        border-radius: 10px;
    }

    .facture-form .btn-add-line {
        min-height: 40px;
    }

    /* Dashboard tables → card-based layout */
    .factures-card .card-body,
    .carnet-card .card-body {
        overflow-x: hidden !important;
    }

    /* ── Carnet Actif table → cards ── */
    .carnet-card .data-table {
        display: block;
        width: 100%;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    .carnet-card .data-table thead {
        display: none !important;
    }

    .carnet-card .data-table tbody {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .carnet-card .data-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: 6px 10px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--neutral-100);
        background: var(--white);
        border-radius: 10px;
    }

    .carnet-card .data-table tbody tr:last-child {
        border-bottom: none;
    }

    .carnet-card .data-table tbody td {
        display: flex;
        padding: 0 !important;
        border: none !important;
        min-width: 0;
        overflow: hidden;
    }

    /* Client cell — row 1, col 1 */
    .carnet-card .data-table tbody td:nth-child(1) {
        grid-row: 1;
        grid-column: 1;
    }

    .client-cell {
        gap: 8px;
        min-width: 0;
    }

    .client-cell .avatar {
        width: 36px;
        height: 36px;
        font-size: 11px;
        flex-shrink: 0;
    }

    .client-info {
        min-width: 0;
    }

    .client-name {
        font-size: 13px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .client-city {
        font-size: 11px;
    }

    /* Lines count — hide on mobile */
    .carnet-card .data-table tbody td:nth-child(2) {
        display: none !important;
    }

    /* Activity — row 2, col 1 */
    .carnet-card .data-table tbody td:nth-child(3) {
        grid-row: 2;
        grid-column: 1;
    }

    .activity-cell {
        gap: 6px;
        min-width: 0;
    }

    .activity-text {
        font-size: 11px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .activity-time {
        font-size: 10px;
        flex-shrink: 0;
    }

    /* Encours — row 1, col 2 */
    .carnet-card .data-table tbody td:nth-child(4) {
        grid-row: 1;
        grid-column: 2;
        justify-content: flex-end;
        align-items: flex-start;
    }

    .encours-amount {
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
    }

    /* Actions — row 2, col 2 */
    .carnet-card .data-table tbody td:nth-child(5) {
        grid-row: 2;
        grid-column: 2;
        justify-content: flex-end;
        align-items: center;
    }

    .actions-cell {
        gap: 4px;
    }

    .actions-cell .btn-facturer {
        font-size: 10px !important;
        padding: 4px 8px !important;
        border-radius: 6px !important;
        min-height: 28px;
        white-space: nowrap;
    }

    .action-icon-btn {
        width: 28px;
        height: 28px;
        border-radius: 6px;
    }

    /* ── Dernières Factures table → cards ── */
    .factures-card .data-table,
    .factures-table {
        display: block;
        width: 100%;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    .factures-card .data-table thead,
    .factures-table thead {
        display: none !important;
    }

    .factures-card .data-table tbody,
    .factures-table tbody {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .factures-card .data-table tbody tr,
    .factures-table tbody tr {
        display: grid;
        grid-template-columns: auto 1fr auto auto;
        grid-template-rows: auto auto;
        gap: 4px 10px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--neutral-100);
        background: var(--white);
        border-radius: 10px;
        align-items: center;
    }

    .factures-card .data-table tbody tr:last-child,
    .factures-table tbody tr:last-child {
        border-bottom: none;
    }

    .factures-card .data-table tbody td,
    .factures-table tbody td {
        display: flex;
        padding: 0 !important;
        border: none !important;
        min-width: 0;
        overflow: hidden;
        align-items: center;
    }

    /* Status dot — row 1, col 1 */
    .factures-card .data-table tbody td:nth-child(1),
    .factures-table tbody td:nth-child(1) {
        grid-row: 1;
        grid-column: 1;
    }

    /* Date — row 1, col 2  */
    .factures-card .data-table td.date-cell,
    .factures-table td.date-cell {
        grid-row: 2;
        grid-column: 2;
        font-size: 11px;
        color: var(--neutral-400);
    }

    /* Facture number — row 1, col 2 */
    .factures-card .data-table tbody td:nth-child(3),
    .factures-table tbody td:nth-child(3) {
        grid-row: 1;
        grid-column: 2;
    }

    .facture-num {
        font-size: 13px;
        font-weight: 600;
    }

    /* Client — row 2, col 1-2 (hide, merged with facture num) */
    .factures-card .data-table tbody td:nth-child(4),
    .factures-table tbody td:nth-child(4) {
        grid-row: 2;
        grid-column: 1;
        font-size: 12px;
        color: var(--neutral-500);
    }

    /* Montant — row 1, col 3 */
    .factures-card .data-table td.montant-cell,
    .factures-table td.montant-cell {
        grid-row: 1;
        grid-column: 3;
        justify-content: flex-end;
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
    }

    /* Actions — row 1, col 4 */
    .factures-card .data-table td.td-actions,
    .factures-table td.td-actions {
        grid-row: 1 / 3;
        grid-column: 4;
        justify-content: flex-end;
        align-items: center;
    }

    .data-table th {
        padding: 10px 12px;
        font-size: 11px;
    }

    .data-table td {
        padding: 12px;
        font-size: 13px;
    }

    .link-voir-tout {
        font-size: 13px;
    }

    /* -- Nouvelle Facture Page -- */
    .nf-page {
        grid-template-columns: 1fr !important;
        padding: 14px 12px !important;
        gap: 14px !important;
    }

    .nf-form-col {
        gap: 14px !important;
        min-width: 0 !important;
    }

    .nf-side-col {
        position: static !important;
        gap: 14px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .nf-card {
        border-radius: 14px !important;
        overflow: hidden;
    }

    /* NF Client row — stack fields */
    .nf-client-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 14px 16px !important;
    }

    .nf-field-client {
        grid-column: 1 !important;
    }

    .nf-client-search {
        flex-direction: column;
        gap: 8px;
    }

    .nf-btn-new-client {
        width: 100%;
        min-height: 40px;
        justify-content: center;
    }

    .nf-input,
    .nf-select {
        min-height: 44px;
        font-size: 14px;
        border-radius: 10px;
    }

    .nf-label {
        font-size: 11px;
    }

    /* NF Lines table → card layout */
    .nf-lines-card {
        overflow: visible !important;
    }

    .nf-lines-table {
        display: block !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    .nf-lines-table thead {
        display: none !important;
    }

    .nf-lines-table tbody {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 4px;
    }

    .nf-lines-table tbody tr.nf-line {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        gap: 8px;
        padding: 14px;
        border-bottom: 1px solid var(--neutral-100);
        background: var(--white);
        border-radius: 12px;
        position: relative;
    }

    .nf-lines-table tbody tr.nf-line:last-child {
        border-bottom: none;
    }

    .nf-lines-table tbody td {
        display: flex;
        padding: 0 !important;
        border: none !important;
        min-width: 0;
    }

    /* Drag handle — hide on mobile */
    .nf-lines-table tbody td.td-drag {
        display: none !important;
    }

    /* Product name — row 1, full width */
    .nf-lines-table tbody td:nth-child(2) {
        grid-row: 1;
        grid-column: 1 / -1;
    }

    .nf-lines-table tbody td:nth-child(2) .nf-input {
        font-weight: 600;
        font-size: 14px;
    }

    /* Description — row 2, full width */
    .nf-lines-table tbody td:nth-child(3) {
        grid-row: 2;
        grid-column: 1 / -1;
    }

    .nf-lines-table tbody td:nth-child(3) .nf-input {
        font-size: 12px;
        min-height: 38px;
    }

    /* Quantity — row 3, col 1 */
    .nf-lines-table tbody td.td-num:nth-child(4) {
        grid-row: 3;
        grid-column: 1;
    }

    /* Unit Price — row 3, col 2 */
    .nf-lines-table tbody td.td-num:nth-child(5) {
        grid-row: 3;
        grid-column: 2;
    }

    .nf-input-num {
        min-height: 40px;
        text-align: center;
    }

    /* TVA — row 4, col 1 */
    .nf-lines-table tbody td.td-tva {
        grid-row: 4;
        grid-column: 1;
    }

    .nf-select-tva {
        min-height: 40px;
        width: 100%;
        border-radius: 10px;
        font-size: 13px;
    }

    /* Amount HT — row 4, col 2 */
    .nf-lines-table tbody td.td-num.td-montant {
        grid-row: 4;
        grid-column: 2;
        align-items: center;
        justify-content: flex-end;
    }

    .line-total {
        font-size: 15px;
        font-weight: 700;
    }

    /* Delete button — absolute top-right */
    .nf-lines-table tbody td.td-del {
        position: absolute;
        top: 10px;
        right: 10px;
        grid-row: unset;
        grid-column: unset;
    }

    .btn-del-line {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

    /* NF Lines footer */
    .nf-lines-footer {
        padding: 12px 14px !important;
    }

    .nf-btn-add-line {
        width: 100%;
        min-height: 44px;
        border-radius: 10px;
        font-size: 14px;
    }

    .nf-expert-hint {
        display: none !important;
    }

    .nf-lines-meta {
        justify-content: center;
    }

    /* NF Notes row */
    .nf-notes-row {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding: 14px 16px !important;
    }

    .nf-textarea {
        min-height: 70px;
        font-size: 14px;
        border-radius: 10px;
    }

    /* NF Resume card */
    .nf-resume-card {
        padding: 16px !important;
    }

    .nf-total-number {
        font-size: 1.6rem;
    }

    .nf-btn-validate,
    .nf-btn-preview,
    .nf-btn-draft {
        min-height: 48px;
        border-radius: 12px;
        font-size: 15px;
    }

    /* NF Actions card */
    .nf-actions-card {
        padding: 16px !important;
    }

    .nf-actions-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .nf-action-item {
        min-height: 60px;
        border-radius: 10px;
    }

    /* NF Preview modal — full screen on mobile */
    .nf-preview-overlay {
        padding: 0 !important;
    }

    .nf-preview-container {
        max-width: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        height: 100%;
    }

    .nf-preview-toolbar {
        padding: 12px 16px;
        border-radius: 0 !important;
    }

    .nf-preview-modal-title {
        font-size: 15px;
    }

    .nf-preview-scroll {
        padding: 16px !important;
    }

    .nf-invoice-paper {
        padding: 20px !important;
        font-size: 12px;
    }

    .inv-header {
        flex-direction: column;
        gap: 14px;
    }

    .inv-title-area {
        text-align: left;
    }

    .inv-title {
        font-size: 1.5rem;
    }

    .inv-meta-row {
        justify-content: flex-start;
    }

    .inv-footer-section {
        grid-template-columns: 1fr;
    }

    .inv-totals-table {
        width: 100%;
    }

    /* NF Offline banner */
    .nf-banner {
        flex-direction: column;
        gap: 8px;
        padding: 12px 16px;
        border-radius: 0;
    }

    .nf-banner-action {
        width: 100%;
        min-height: 40px;
        justify-content: center;
    }

    /* -- Factures Page -- */
    .factures-toolbar {
        flex-direction: column;
        gap: 10px;
        padding: 12px !important;
        border-radius: 14px !important;
    }

    .factures-toolbar .toolbar-left,
    .factures-toolbar .toolbar-right {
        width: 100%;
    }

    .factures-toolbar .toolbar-left {
        flex-wrap: wrap;
        gap: 8px;
    }

    .factures-toolbar .toolbar-right {
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 8px;
    }

    .factures-toolbar .fac-search-box {
        flex: 1;
        min-width: 120px;
    }

    .factures-toolbar select,
    .factures-toolbar .fac-search-box {
        height: 40px;
        font-size: 13px;
        border-radius: 10px;
    }

    /* Facture filter dropdowns — 2-column grid */
    .factures-toolbar .toolbar-filters {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
    }

    .factures-toolbar .filter-dropdown,
    .factures-toolbar .filter-btn {
        width: 100%;
        height: 40px;
        border-radius: 10px;
        font-size: 12px;
        justify-content: center;
        min-width: 0;
    }

    .factures-toolbar .filter-btn.filter-more {
        grid-column: 1 / -1;
    }

    /* Hide toolbar actions on mobile (available via card dots menu) */
    .factures-toolbar .toolbar-actions {
        display: none !important;
    }

    /* Facture list card */
    .factures-list-card {
        border-radius: 14px !important;
        overflow: visible !important;
    }

    /* ── Factures table → card-based layout ── */
    .factures-full-table {
        display: block;
        width: 100%;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    .factures-full-table thead {
        display: none !important;
    }

    .factures-full-table tbody {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 4px;
    }

    .factures-full-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto auto;
        gap: 6px 10px;
        padding: 14px;
        border-bottom: 1px solid var(--neutral-100);
        position: relative;
        align-items: start;
        background: var(--white);
        border-radius: 12px;
        transition: background 0.15s ease;
    }

    .factures-full-table tbody tr:last-child {
        border-bottom: none;
    }

    .factures-full-table tbody tr:active {
        background: var(--neutral-50);
    }

    .factures-full-table tbody td {
        display: flex;
        padding: 0 !important;
        border: none !important;
        min-width: 0;
        overflow: hidden;
    }

    /* Checkbox — hide on mobile cards */
    .factures-full-table tbody td.td-checkbox {
        display: none !important;
    }

    /* Invoice Number — row 1, col 1 */
    .factures-full-table tbody td:nth-child(2) {
        grid-row: 1;
        grid-column: 1;
    }

    .invoice-num {
        font-size: 14px;
        font-weight: 600;
    }

    /* Client — row 2, col 1 */
    .factures-full-table tbody td.td-client {
        grid-row: 2;
        grid-column: 1;
        font-size: 13px;
        color: var(--neutral-500);
    }

    /* Date — row 1, col 2 (top-right) */
    .factures-full-table tbody td.td-date {
        grid-row: 1;
        grid-column: 2;
        justify-content: flex-end;
        font-size: 12px;
        color: var(--neutral-400);
    }

    /* Amount — row 3, col 1 */
    .factures-full-table tbody td.td-amount {
        grid-row: 3;
        grid-column: 1;
        font-size: 15px;
        font-weight: 700;
        margin-top: 4px;
    }

    /* Status badge — row 2, col 2 */
    .factures-full-table tbody td:nth-child(6) {
        grid-row: 2;
        grid-column: 2;
        justify-content: flex-end;
    }

    /* Payment badge — row 3, col 2 */
    .factures-full-table tbody td:nth-child(7) {
        grid-row: 3;
        grid-column: 2;
        justify-content: flex-end;
        align-items: center;
        margin-top: 4px;
    }

    /* Canal — row 4, col 1 */
    .factures-full-table tbody td:nth-child(8) {
        grid-row: 4;
        grid-column: 1;
    }

    .canal-badge {
        font-size: 11px;
    }

    /* Actions — row 4, col 2 */
    .factures-full-table tbody td.td-actions {
        grid-row: 4;
        grid-column: 2;
        justify-content: flex-end;
        align-items: center;
    }

    .btn-dots {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        flex-shrink: 0;
    }

    /* Action dropdown — bottom sheet */
    .action-dropdown {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0)) !important;
        z-index: 10000 !important;
    }

    /* Facture status badges mobile */
    .status-badge,
    .payment-badge,
    .canal-badge {
        font-size: 10px;
        padding: 3px 8px;
        border-radius: 8px;
        white-space: nowrap;
    }

    /* Page header */
    .page-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .page-title-row {
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
    }

    .page-badge {
        font-size: 10px;
        padding: 3px 8px;
    }

    .fac-page-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .fac-page-header .page-title-group h1,
    .page-title {
        font-size: 20px;
    }

    .page-subtitle {
        font-size: 13px;
    }

    .fac-header-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
    }

    .fac-header-actions .btn {
        flex: 1;
        min-width: 0;
        justify-content: center;
        font-size: 12px;
        padding: 0 12px;
        height: 40px;
        border-radius: 10px;
    }

    .fac-header-actions .btn span {
        display: none;
    }

    /* Facture pagination */
    .fac-pagination,
    .table-footer {
        flex-direction: column;
        gap: 10px;
        align-items: center;
        padding: 14px !important;
    }

    .table-info {
        font-size: 12px;
        text-align: center;
    }

    .fac-pagination .pagination-btns,
    .pagination {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }

    .page-btn {
        min-width: 36px;
        min-height: 36px;
        border-radius: 8px;
        font-size: 13px;
    }

    .page-ellipsis {
        min-width: 36px;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* -- Carnet page -- */

    /* Page header */
    .cr-page-header {
        flex-direction: column;
        gap: 8px;
    }

    .cr-page-title-row {
        flex-wrap: wrap;
        gap: 6px;
    }

    .cr-page-title {
        font-size: 20px !important;
    }

    .cr-page-title-sep {
        display: none;
    }

    .cr-page-title-sub {
        font-size: 16px !important;
        width: 100%;
    }

    .cr-page-subtitle {
        font-size: 13px;
    }

    /* Client info cards — 2 columns on mobile */
    .cr-client-cards {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .cr-client-card {
        border-radius: 14px !important;
        padding: 14px !important;
        gap: 6px;
    }

    .cr-card-label {
        font-size: 9px;
    }

    .cr-card-value {
        font-size: 15px;
    }

    .cr-card-value-mono {
        font-size: 12px;
        word-break: break-all;
    }

    .cr-card-detail {
        font-size: 12px;
    }

    .cr-card-badge {
        font-size: 9px;
        padding: 3px 8px;
    }

    /* Toolbar — tabs row + buttons row */
    .cr-toolbar {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px;
        align-items: center !important;
    }

    .cr-tabs {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 2px;
        padding: 4px;
        border-radius: 12px;
    }

    .cr-tab {
        padding: 8px 14px;
        font-size: 13px;
        white-space: nowrap;
        border-radius: 8px;
        min-height: 40px;
        flex-shrink: 0;
    }

    .cr-btn-add-line {
        flex: 1 1 0% !important;
        justify-content: center;
        min-height: 40px;
        border-radius: 10px;
        margin-left: 0 !important;
        font-size: 13px !important;
        padding: 8px 6px !important;
        gap: 5px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cr-btn-add-line .fas {
        font-size: 11px;
    }

    .cr-toolbar-actions {
        flex: 2 1 0% !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 6px;
        margin-left: 0 !important;
    }

    .cr-toolbar-actions .btn {
        flex: 1 1 0% !important;
        justify-content: center;
        min-height: 40px;
        border-radius: 10px;
        font-size: 13px;
        padding: 8px 6px;
        white-space: nowrap;
    }

    /* Table → card-based layout */
    .cr-table-section {
        border-radius: 14px !important;
        overflow: visible !important;
    }

    .cr-table {
        display: block;
        width: 100%;
        min-width: 0 !important;
    }

    .cr-table thead {
        display: none !important;
    }

    .cr-table tbody {
        display: flex;
        flex-direction: column;
    }

    .cr-table tbody tr {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto auto;
        gap: 8px 12px;
        padding: 16px;
        border-bottom: 1px solid var(--neutral-100);
        position: relative;
        align-items: start;
    }

    .cr-table tbody tr:last-child {
        border-bottom: none;
    }

    .cr-table tbody td {
        display: flex;
        padding: 0 !important;
        border: none !important;
        vertical-align: top;
    }

    /* Checkbox — row 1, col 1 */
    .cr-table tbody td.cr-td-check {
        grid-row: 1;
        grid-column: 1;
        align-items: center;
        padding-top: 2px !important;
    }

    .cr-checkmark {
        width: 20px;
        height: 20px;
    }

    /* Date/Ref — row 1, col 2 */
    .cr-table tbody td:nth-child(2) {
        grid-row: 1;
        grid-column: 2;
    }

    .cr-date-cell strong {
        font-size: 14px;
    }

    .cr-date-cell span {
        font-size: 11px;
    }

    /* Details — row 2, col 2 (spans to col 3) */
    .cr-table tbody td:nth-child(3) {
        grid-row: 2;
        grid-column: 2 / 4;
    }

    .cr-detail-cell strong {
        font-size: 14px;
    }

    .cr-detail-cell span {
        font-size: 12px;
    }

    /* Quantity — row 3, col 1-2 area, inline with total */
    .cr-table tbody td:nth-child(4) {
        grid-row: 3;
        grid-column: 1;
        align-items: center;
    }

    .cr-qty-box {
        width: 36px;
        height: 30px;
        font-size: 13px;
        border-radius: 6px;
    }

    /* Total — row 3, col 2 */
    .cr-table tbody td:nth-child(5) {
        grid-row: 3;
        grid-column: 2;
        align-items: center;
    }

    .cr-total-cell {
        flex-direction: row;
        align-items: center;
        gap: 6px;
    }

    .cr-total-cell strong {
        font-size: 15px;
    }

    .cr-total-cell span {
        font-size: 11px;
    }

    /* Status — row 1, col 3 (positioned top-right) */
    .cr-table tbody td:nth-child(6) {
        grid-row: 1;
        grid-column: 3;
        justify-content: flex-end;
    }

    .cr-status {
        font-size: 10px;
        padding: 4px 10px;
        border-radius: 20px;
    }

    .cr-status i {
        font-size: 6px;
    }

    /* Actions — row 3, col 3 */
    .cr-table tbody td:nth-child(7) {
        grid-row: 3;
        grid-column: 3;
        justify-content: flex-end;
        align-items: center;
    }

    .cr-btn-facturer-row,
    .cr-btn-signer {
        font-size: 11px !important;
        padding: 6px 12px !important;
        border-radius: 8px !important;
        min-height: 32px;
    }

    .cr-actions-cell .action-icon-btn {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

    /* Bottom row — single column */
    .cr-bottom-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .cr-notes-card {
        border-radius: 14px !important;
        padding: 16px !important;
    }

    .cr-notes-header {
        font-size: 11px;
    }

    .cr-notes-text {
        font-size: 13px;
    }

    .cr-totals-card {
        border-radius: 14px !important;
        padding: 16px !important;
    }

    .cr-totals-title {
        font-size: 11px;
    }

    .cr-totals-row span {
        font-size: 13px;
    }

    .cr-totals-row strong {
        font-size: 14px;
    }

    .cr-totals-row-final strong {
        font-size: 18px;
    }

    /* Footer actions — full width stacked */
    .cr-footer-actions {
        flex-direction: column;
        gap: 10px;
    }

    .cr-footer-actions .btn,
    .cr-btn-reject,
    .cr-btn-generate {
        width: 100%;
        justify-content: center;
        min-height: 48px;
        border-radius: 12px !important;
        font-size: 15px !important;
    }

    /* Modal — bottom sheet style */
    .cr-modal-overlay {
        align-items: flex-end !important;
    }

    .cr-modal {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 92vh !important;
    }

    .cr-modal-header {
        padding: 16px;
    }

    .cr-modal-title {
        font-size: 16px;
    }

    .cr-modal-subtitle {
        font-size: 12px;
    }

    .cr-modal-body {
        padding: 16px;
    }

    .cr-modal-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .cr-modal-row-3 {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .cr-modal-field {
        width: 100% !important;
    }

    .cr-modal-label {
        font-size: 13px;
    }

    .cr-modal-input,
    .cr-modal-select {
        min-height: 44px;
        font-size: 16px !important;
        border-radius: 10px;
    }

    .cr-modal-preview {
        border-radius: 12px;
        padding: 14px;
    }

    .cr-modal-footer {
        padding: 16px;
        padding-bottom: calc(24px + 90px + env(safe-area-inset-bottom, 0px));
        flex-direction: column;
        gap: 10px;
        position: sticky;
        bottom: 0;
        background: var(--white, #fff);
        border-top: 1px solid var(--neutral-100, #f0f0f0);
        z-index: 2;
    }

    .cr-modal-footer .btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
        border-radius: 10px;
    }

    /* -- Clients page -- */
    .cl-kpi-row {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .cl-kpi-card {
        border-radius: 14px !important;
        padding: 14px !important;
    }

    .cl-kpi-top {
        gap: 10px;
    }

    .cl-kpi-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .cl-kpi-number,
    .cl-kpi-number-accent {
        font-size: 22px;
    }

    .cl-kpi-amount {
        font-size: 14px;
    }

    .cl-table-section {
        border-radius: 14px !important;
        overflow: visible !important;
    }

    .cl-table-header {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .cl-table-header .header-actions,
    .cl-table-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
    }

    .cl-table-title {
        font-size: 16px;
    }

    .cl-table-subtitle {
        font-size: 12px;
    }

    .cl-btn-filter,
    .cl-btn-export {
        flex: 1;
        min-height: 40px;
        border-radius: 10px;
        justify-content: center;
        font-size: 13px;
    }

    /* ── Clients table → card-based layout ── */
    .cl-table {
        display: block;
        width: 100%;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    .cl-table thead {
        display: none !important;
    }

    .cl-table tbody {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 4px;
    }

    .cl-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto;
        gap: 6px 10px;
        padding: 14px;
        border-bottom: 1px solid var(--neutral-100);
        position: relative;
        align-items: start;
        background: var(--white);
        border-radius: 12px;
        transition: background 0.15s ease;
    }

    .cl-table tbody tr:last-child {
        border-bottom: none;
    }

    .cl-table tbody tr:active {
        background: var(--neutral-50);
    }

    .cl-table tbody td {
        display: flex;
        padding: 0 !important;
        border: none !important;
        vertical-align: top;
        min-width: 0;
        overflow: hidden;
    }

    /* Client name + avatar — row 1, col 1 */
    .cl-table tbody td:nth-child(1) {
        grid-row: 1;
        grid-column: 1;
        overflow: hidden;
    }

    .cl-client-cell {
        gap: 10px;
        min-width: 0;
        overflow: hidden;
    }

    .cl-avatar {
        width: 40px;
        height: 40px;
        font-size: 13px;
        flex-shrink: 0;
    }

    .cl-client-info {
        min-width: 0;
        overflow: hidden;
    }

    .cl-client-info strong {
        font-size: 14px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cl-client-info span {
        font-size: 11px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ICE — row 2, col 1-2 (full width below name) */
    .cl-table tbody td:nth-child(2) {
        grid-row: 2;
        grid-column: 1 / -1;
    }

    .cl-ice-cell {
        font-size: 11px !important;
        color: var(--neutral-400) !important;
        padding-left: 50px !important;
        letter-spacing: 0.04em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

    /* Status badge — row 1, col 2 (top-right) */
    .cl-table tbody td:nth-child(3) {
        grid-row: 1;
        grid-column: 2;
        justify-content: flex-end;
        align-items: flex-start;
        flex-shrink: 0;
    }

    .cl-badge {
        font-size: 10px;
        padding: 3px 8px;
        border-radius: 20px;
        white-space: nowrap;
    }

    .cl-badge i {
        font-size: 5px;
    }

    /* Encours — row 3, col 1 */
    .cl-table tbody td:nth-child(4) {
        grid-row: 3;
        grid-column: 1;
        margin-top: 4px;
    }

    .cl-encours-cell {
        flex-direction: row;
        align-items: baseline;
        gap: 6px;
        min-width: 0;
    }

    .cl-encours-cell strong {
        font-size: 15px;
        font-weight: 700;
        white-space: nowrap;
    }

    .cl-encours-cell span {
        font-size: 10px;
        color: var(--neutral-400);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Actions — row 3, col 2 (bottom-right) */
    .cl-table tbody td:nth-child(5) {
        grid-row: 3;
        grid-column: 2;
        justify-content: flex-end;
        align-items: center;
        margin-top: 4px;
        flex-shrink: 0;
    }

    /* Client action buttons */
    .cl-actions-cell {
        gap: 4px;
        flex-wrap: nowrap;
    }

    .cl-btn-icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        flex-shrink: 0;
    }

    .cl-btn-facturer {
        font-size: 11px !important;
        padding: 6px 10px !important;
        border-radius: 8px !important;
        min-height: 32px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Clients pagination */
    .cl-pagination {
        flex-direction: column;
        gap: 10px;
        align-items: center;
        padding: 14px !important;
    }

    .cl-pagination-info {
        font-size: 12px;
        text-align: center;
    }

    .cl-pagination-controls {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }

    .cl-page-btn {
        min-width: 36px;
        min-height: 36px;
        border-radius: 8px;
    }

    .cl-profile-panel {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.15) !important;
    }

    .cl-profile-header {
        padding: 16px;
        border-radius: 20px 20px 0 0;
    }

    .cl-profile-body {
        padding: 16px;
    }

    /* -- Produits page -- */
    .pr-page-title-section {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .pr-page-title {
        font-size: 20px !important;
    }

    .pr-page-subtitle {
        font-size: 13px;
    }

    .pr-kpi-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .pr-kpi-card {
        border-radius: 14px !important;
        padding: 14px !important;
    }

    .pr-kpi-number {
        font-size: 22px;
    }

    .pr-table-section {
        border-radius: 14px !important;
        overflow: hidden;
    }

    .pr-toolbar {
        flex-direction: column;
        gap: 10px;
        padding: 12px !important;
    }

    .pr-tabs {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 4px;
        padding-bottom: 4px;
    }

    .pr-tab {
        white-space: nowrap;
        padding: 8px 14px;
        font-size: 13px;
        border-radius: 10px;
        min-height: 40px;
    }

    .pr-toolbar .toolbar-left,
    .pr-toolbar .toolbar-right,
    .pr-toolbar-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
    }

    .pr-btn-filter,
    .pr-btn-export {
        flex: 1;
        min-height: 40px;
        border-radius: 10px;
        justify-content: center;
        font-size: 13px;
    }

    /* ── Produits table → card layout ── */
    .pr-table-wrapper {
        overflow-x: hidden !important;
    }

    .pr-table {
        display: block;
        width: 100%;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    .pr-table thead {
        display: none !important;
    }

    .pr-table tbody {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 4px;
    }

    .pr-table tbody tr.pr-row {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: 6px 10px;
        padding: 14px;
        border-bottom: 1px solid var(--neutral-100);
        background: var(--white);
        border-radius: 12px;
        align-items: center;
    }

    .pr-table tbody tr.pr-row:last-child {
        border-bottom: none;
    }

    .pr-table tbody td {
        display: flex;
        padding: 0 !important;
        border: none !important;
        min-width: 0;
        overflow: hidden;
        align-items: center;
    }

    /* Product cell (icon + name + ref) — row 1, col 1 */
    .pr-table tbody td:nth-child(1) {
        grid-row: 1;
        grid-column: 1;
    }

    .pr-product-cell {
        gap: 10px;
        min-width: 0;
    }

    .pr-product-icon {
        width: 36px;
        height: 36px;
        font-size: 14px;
        flex-shrink: 0;
        border-radius: 10px;
    }

    .pr-product-info {
        min-width: 0;
    }

    .pr-product-info strong {
        font-size: 13px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pr-product-info span {
        font-size: 11px;
    }

    /* Unit — row 2, col 1 */
    .pr-table tbody td.pr-unit-cell {
        grid-row: 2;
        grid-column: 1;
        font-size: 12px;
        color: var(--neutral-500);
    }

    /* Price — row 1, col 2 */
    .pr-table tbody td.pr-price-cell {
        grid-row: 1;
        grid-column: 2;
        justify-content: flex-end;
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
    }

    /* TVA badge — row 2, show between unit and actions */
    .pr-table tbody td:nth-child(4) {
        grid-row: 2;
        grid-column: 1;
        margin-left: auto;
        padding-left: 8px !important;
    }

    /* Actions — row 2, col 2 */
    .pr-table tbody td:nth-child(5) {
        grid-row: 2;
        grid-column: 2;
        justify-content: flex-end;
    }

    /* Produits pagination */
    .pr-pagination {
        flex-direction: column;
        gap: 10px;
        align-items: center;
        padding: 14px !important;
    }

    .pr-pagination-info {
        font-size: 12px;
        text-align: center;
    }

    .pr-pagination-controls {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }

    .pr-page-btn {
        min-width: 36px;
        min-height: 36px;
        border-radius: 8px;
    }

    /* Produit badges */
    .pr-tva-badge {
        font-size: 10px;
        padding: 3px 8px;
        border-radius: 8px;
    }

    /* Produit action buttons */
    .pr-actions-cell {
        gap: 4px;
    }

    .pr-btn-icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

    /* -- Rapports page -- */
    .rp-title-row {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .rp-page-title {
        font-size: 20px !important;
    }

    .rp-page-subtitle {
        font-size: 13px;
    }

    .rp-period-picker {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
        min-height: 40px;
        border-radius: 10px;
        padding: 8px 14px;
    }

    .rp-period-picker input,
    .rp-period-picker select {
        flex: 1;
        min-width: 100px;
    }

    .rp-kpi-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .rp-kpi-card {
        border-radius: 14px !important;
        padding: 14px !important;
    }

    .rp-kpi-number {
        font-size: 20px;
    }

    .rp-kpi-label {
        font-size: 11px;
    }

    .rp-middle-row {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .rp-chart-card {
        border-radius: 14px !important;
        overflow: hidden;
    }

    .rp-chart-header {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
        padding: 14px 16px !important;
    }

    .rp-chart-title {
        font-size: 16px;
    }

    .rp-chart-subtitle {
        font-size: 12px;
    }

    .rp-chart-header .chart-actions,
    .rp-chart-actions {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        gap: 6px;
    }

    .rp-chart-filter-btn {
        white-space: nowrap;
        font-size: 12px;
        min-height: 34px;
        border-radius: 8px;
        padding: 6px 12px;
    }

    .rp-chart-kpis {
        flex-direction: row;
        gap: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 12px;
    }

    .rp-chart-kpi {
        padding: 10px;
        border-radius: 0;
        flex-shrink: 0;
        min-width: 100px;
    }

    .rp-chart-kpi-sep {
        display: block;
        width: 1px;
        flex-shrink: 0;
    }

    .rp-chart-kpi-number {
        font-size: 16px;
    }

    .rp-chart-canvas-wrap {
        min-height: 200px;
        padding: 0 8px;
    }

    /* Export card mobile */
    .rp-export-card {
        border-radius: 14px !important;
        padding: 20px 16px !important;
    }

    .rp-export-title {
        font-size: 20px;
    }

    .rp-export-desc {
        font-size: 13px;
    }

    .rp-export-features {
        gap: 8px;
    }

    .rp-export-features li {
        font-size: 13px;
    }

    .rp-export-btn {
        width: 100%;
        min-height: 48px;
        border-radius: 12px;
        font-size: 14px;
    }

    /* ── Journal table → card layout ── */
    .rp-journal-section {
        border-radius: 14px !important;
        overflow: hidden;
    }

    .rp-journal-header {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
        padding: 14px 16px !important;
    }

    .rp-journal-title {
        font-size: 16px;
    }

    .rp-journal-table-wrap {
        overflow-x: hidden !important;
    }

    .rp-journal-table {
        display: block;
        width: 100%;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    .rp-journal-table thead {
        display: none !important;
    }

    .rp-journal-table tbody {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 4px;
    }

    .rp-journal-table tbody tr.rp-journal-row {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: 6px 10px;
        padding: 14px;
        border-bottom: 1px solid var(--neutral-100);
        background: var(--white);
        border-radius: 12px;
        align-items: center;
    }

    .rp-journal-table tbody tr.rp-journal-row:last-child {
        border-bottom: none;
    }

    .rp-journal-table tbody td {
        display: flex;
        padding: 0 !important;
        border: none !important;
        min-width: 0;
        align-items: center;
    }

    /* Action cell (icon + name) — row 1, col 1 */
    .rp-journal-table tbody td:nth-child(1) {
        grid-row: 1;
        grid-column: 1;
    }

    .rp-action-cell {
        gap: 8px;
    }

    .rp-action-icon {
        width: 30px;
        height: 30px;
        font-size: 12px;
        flex-shrink: 0;
        border-radius: 8px;
    }

    .rp-action-cell>span {
        font-size: 13px;
        font-weight: 600;
    }

    /* Element — row 1, col 2 */
    .rp-journal-table tbody td.rp-element-cell {
        grid-row: 1;
        grid-column: 2;
        justify-content: flex-end;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
    }

    /* Author — row 2, col 1 */
    .rp-journal-table tbody td:nth-child(3) {
        grid-row: 2;
        grid-column: 1;
    }

    .rp-author-cell img {
        width: 22px;
        height: 22px;
    }

    .rp-author-cell span {
        font-size: 12px;
    }

    /* Date — hide on mobile cards (space too tight) */
    .rp-journal-table tbody td.rp-date-cell {
        display: none !important;
    }

    /* Status badge — row 2, col 2 */
    .rp-journal-table tbody td:nth-child(5) {
        grid-row: 2;
        grid-column: 2;
        justify-content: flex-end;
    }

    .rp-status-badge {
        font-size: 10px;
        padding: 3px 8px;
        border-radius: 8px;
    }

    /* -- Paramètres page -- */
    .st-layout {
        grid-template-columns: 1fr !important;
    }

    .st-sidebar {
        border-radius: 14px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 4px;
        padding: 6px;
        position: static;
        background: var(--white);
        box-shadow: var(--shadow-sm);
    }

    .st-sidebar-item {
        white-space: nowrap;
        padding: 10px 14px;
        font-size: 13px;
        border-radius: 10px;
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
        touch-action: manipulation;
    }

    .st-sidebar-item i {
        font-size: 14px;
    }

    .st-form-grid {
        grid-template-columns: 1fr !important;
    }

    .st-users-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 12px;
    }

    /* ── Utilisateurs card-based layout for mobile ── */
    .st-card-body.st-no-padding {
        padding: 0 !important;
    }

    .st-users-table {
        display: block;
        width: 100%;
    }

    .st-users-table thead {
        display: none !important;
    }

    .st-users-table tbody {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .st-users-table tbody tr {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        padding: 16px;
        padding-right: 100px;
        border-bottom: 1px solid var(--neutral-100);
        gap: 8px;
        position: relative;
    }

    .st-users-table tbody tr:last-child {
        border-bottom: none;
    }

    .st-users-table tbody td {
        display: flex;
        align-items: center;
        padding: 0 !important;
        border: none !important;
        font-size: 13px;
    }

    /* First td: user cell — full width, prominent */
    .st-users-table tbody td:first-child {
        width: 100%;
        margin-bottom: 4px;
    }

    .st-user-cell {
        width: 100%;
        gap: 12px;
    }

    .st-user-cell img {
        width: 42px;
        height: 42px;
    }

    .st-user-info strong {
        font-size: 15px;
    }

    .st-user-info span {
        font-size: 12px;
        color: var(--neutral-500);
    }

    /* Role badge, status, date — show inline as a metadata row */
    .st-users-table tbody td:nth-child(2),
    .st-users-table tbody td:nth-child(3),
    .st-users-table tbody td:nth-child(4) {
        display: inline-flex;
        margin-right: 10px;
    }

    /* Role badge */
    .st-role-badge {
        font-size: 11px;
        padding: 3px 10px;
    }

    /* Status */
    .st-status-dot {
        width: 7px;
        height: 7px;
    }

    /* Date cell */
    .st-date-cell {
        font-size: 12px !important;
        color: var(--neutral-400) !important;
    }

    /* Actions cell — positioned to the right of the user cell */
    .st-users-table tbody td:last-child {
        position: absolute;
        top: 16px;
        right: 16px;
    }

    .st-actions-cell {
        gap: 6px;
    }

    .st-btn-icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

    /* Add User button in card header */
    .st-btn-add-user {
        width: 100%;
        justify-content: center;
        min-height: 44px;
        border-radius: 10px;
        font-size: 14px !important;
    }

    /* ── Toggle rows (Sécurité tab) ── */
    .st-toggle-row {
        flex-direction: row;
        gap: 12px;
        padding: 14px 0;
    }

    .st-toggle-info strong {
        font-size: 14px;
    }

    .st-toggle-info span {
        font-size: 12px;
    }

    .st-toggle {
        flex-shrink: 0;
    }

    /* ── Sessions (Sécurité tab) ── */
    .st-session-list {
        gap: 10px !important;
    }

    .st-session-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 14px !important;
        border-radius: 12px !important;
    }

    .st-session-icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        font-size: 14px;
    }

    .st-session-info strong {
        font-size: 13px;
    }

    .st-session-info span {
        font-size: 12px;
    }

    .st-session-badge {
        font-size: 11px;
        align-self: flex-start;
    }

    .st-session-revoke {
        align-self: stretch;
        text-align: center;
        min-height: 38px;
        border-radius: 8px;
    }

    /* ── Danger Zone (Sécurité tab) ── */
    .st-danger-item {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px;
        padding: 14px 0;
    }

    .st-danger-info strong {
        font-size: 14px;
    }

    .st-danger-info span {
        font-size: 12px;
    }

    .st-danger-item .btn {
        width: 100%;
        min-height: 40px;
        justify-content: center;
        border-radius: 10px;
    }

    /* ── Card icon + title-area layout ── */
    .st-card-icon {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        font-size: 16px;
        flex-shrink: 0;
    }

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

    .st-card-subtitle {
        font-size: 12px;
    }

    /* ── Form inputs (all settings tabs) ── */
    .st-field .st-label {
        font-size: 13px;
    }

    .st-field .st-input,
    .st-field .st-select {
        min-height: 44px;
        font-size: 14px;
        border-radius: 10px;
    }

    /* ── TVA Items (TVA & Taxes tab) ── */
    .st-tva-item {
        gap: 12px;
        padding: 14px 0;
    }

    .st-tva-left {
        gap: 10px;
        flex: 1;
        min-width: 0;
    }

    .st-tva-badge {
        width: 44px;
        height: 32px;
        font-size: 13px;
        border-radius: 8px;
        flex-shrink: 0;
    }

    .st-tva-info strong {
        font-size: 14px;
    }

    .st-tva-info span {
        font-size: 11px;
    }

    .st-page-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .st-header-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
    }

    .st-page-title {
        font-size: 20px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .st-page-subtitle {
        font-size: 13px;
        word-wrap: break-word;
    }

    .st-page-title-section {
        padding: 0 4px;
    }

    .page-content {
        padding: 16px 12px;
    }

    .st-card {
        border-radius: 14px;
    }

    .st-card-header {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .st-footer-actions {
        flex-direction: column;
        gap: 8px;
    }

    .st-btn-cancel,
    .st-btn-save {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }

    .st-upload-row {
        grid-template-columns: 1fr !important;
    }

    /* -- Nouvelle Facture page -- */
    .nf-page-grid {
        grid-template-columns: 1fr !important;
    }

    .nf-side-col {
        order: -1;
    }

    .nf-client-row {
        grid-template-columns: 1fr !important;
    }

    .nf-items-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 12px;
    }

    .nf-preview-container {
        max-width: 100% !important;
    }

    .nf-page-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .nf-header-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
    }

    .nf-header-actions .btn {
        flex: 1;
        justify-content: center;
        min-width: 0;
        font-size: 12px;
        height: 40px;
        border-radius: 10px;
    }

    /* NF cards */
    .nf-card,
    .nf-section {
        border-radius: 14px !important;
    }

    .nf-card-header {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    /* NF totals */
    .nf-totals-row {
        flex-direction: column;
        gap: 8px;
    }

    /* NF footer */
    .nf-footer-actions {
        flex-direction: column;
        gap: 8px;
    }

    .nf-footer-actions .btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }

    /* -- Nouveau Client page -- */
    .nc-page {
        grid-template-columns: 1fr !important;
        padding: 14px 12px !important;
        gap: 14px !important;
    }

    .nc-page-grid {
        grid-template-columns: 1fr !important;
    }

    .nc-form-col {
        gap: 14px !important;
    }

    .nc-side-col {
        position: static !important;
        gap: 14px !important;
    }

    .nc-row-2,
    .nc-row-3 {
        grid-template-columns: 1fr !important;
    }

    /* NC cards */
    .nc-card,
    .nc-section {
        border-radius: 14px !important;
        overflow: hidden;
    }

    .nc-card-header {
        padding: 14px 16px !important;
        gap: 10px;
    }

    .nc-card-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

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

    .nc-card-subtitle {
        font-size: 12px;
    }

    .nc-card-body {
        padding: 14px 16px !important;
        gap: 14px !important;
    }

    /* NC form inputs — touch-friendly */
    .nc-input,
    .nc-select {
        min-height: 44px;
        font-size: 14px;
        border-radius: 10px;
        padding: 10px 14px;
    }

    .nc-textarea {
        min-height: 80px;
        font-size: 14px;
        border-radius: 10px;
    }

    .nc-label {
        font-size: 11px;
    }

    /* NC type toggle */
    .nc-type-toggle {
        flex-direction: column;
    }

    .nc-type-btn {
        min-height: 44px;
        border-radius: 10px;
        font-size: 14px;
    }

    /* NC ICE verify */
    .nc-input-with-action,
    .nc-input-action {
        flex-direction: column;
    }

    .nc-btn-verify {
        padding: 10px 16px;
        justify-content: center;
        min-height: 44px;
        border-radius: 10px;
    }

    /* NC Resume card */
    .nc-resume-card {
        padding: 16px !important;
    }

    .nc-resume-avatar {
        width: 52px;
        height: 52px;
        font-size: 20px;
    }

    .nc-resume-name {
        font-size: 16px;
    }

    /* NC Save buttons */
    .nc-btn-save {
        min-height: 48px;
        border-radius: 12px;
        font-size: 15px;
    }

    .nc-btn-save-draft {
        min-height: 44px;
        border-radius: 10px;
    }

    /* NC page header */
    .nc-page-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .nc-header-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
    }

    .nc-header-actions .btn {
        flex: 1;
        min-width: 0;
        min-height: 40px;
        justify-content: center;
        font-size: 12px;
        border-radius: 10px;
    }

    /* NC footer */
    .nc-footer-actions {
        flex-direction: column;
        gap: 8px;
    }

    .nc-footer-actions .btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }

    /* -- Nouvelle Prestation page -- */
    .np-page {
        grid-template-columns: 1fr !important;
        padding: 14px 12px !important;
        gap: 14px !important;
    }

    .np-page-grid {
        grid-template-columns: 1fr !important;
    }

    .np-form-col {
        gap: 14px !important;
    }

    .np-side-col {
        position: static !important;
        gap: 14px !important;
    }

    .np-row-2,
    .np-row-3 {
        grid-template-columns: 1fr !important;
    }

    /* NP cards */
    .np-card,
    .np-section {
        border-radius: 14px !important;
        overflow: hidden;
    }

    .np-card-header {
        padding: 14px 16px !important;
        gap: 10px;
    }

    .np-card-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

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

    .np-card-subtitle {
        font-size: 12px;
    }

    .np-card-body {
        padding: 14px 16px !important;
        gap: 14px !important;
    }

    /* NP inputs — touch-friendly */
    .np-input,
    .np-select {
        min-height: 44px;
        font-size: 14px;
        border-radius: 10px;
        padding: 10px 14px;
    }

    .np-textarea {
        min-height: 80px;
        font-size: 14px;
        border-radius: 10px;
    }

    .np-label {
        font-size: 11px;
    }

    /* NP Type toggle */
    .np-type-toggle {
        flex-direction: column;
    }

    .np-type-btn {
        min-height: 44px;
        border-radius: 10px;
        font-size: 14px;
    }

    /* NP TVA grid — 3 across */
    .np-tva-grid {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 8px;
    }

    .np-tva-btn {
        min-height: 52px;
        border-radius: 10px;
        padding: 8px;
    }

    .np-tva-rate {
        font-size: 14px;
    }

    .np-tva-name {
        font-size: 10px;
    }

    /* NP Input with suffix (MAD) */
    .np-input-with-suffix {
        border-radius: 10px;
    }

    .np-input-price {
        min-height: 44px;
    }

    /* NP Calc strip */
    .np-calc-strip {
        flex-direction: column;
        gap: 8px;
        padding: 12px !important;
        border-radius: 12px;
    }

    .np-calc-item {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .np-calc-sep {
        display: none;
    }

    .np-calc-total {
        border-top: 1px solid var(--neutral-200);
        padding-top: 8px;
    }

    /* NP Toggle switch */
    .np-toggle-switch {
        min-height: 44px;
        align-items: center;
    }

    /* NP Resume card */
    .np-resume-card {
        padding: 16px !important;
    }

    .np-resume-icon {
        width: 52px;
        height: 52px;
        font-size: 20px;
    }

    .np-resume-name {
        font-size: 16px;
    }

    .np-ttc-amount {
        font-size: 1.5rem;
    }

    /* NP Save buttons */
    .np-btn-save {
        min-height: 48px;
        border-radius: 12px;
        font-size: 15px;
    }

    .np-btn-save-draft {
        min-height: 44px;
        border-radius: 10px;
    }

    /* NP Help card */
    .np-help-card {
        border-radius: 14px !important;
        padding: 16px !important;
    }

    .np-help-list li {
        font-size: 13px;
        line-height: 1.5;
    }

    /* NP page header */
    .np-page-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .np-header-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
    }

    .np-header-actions .btn {
        flex: 1;
        min-width: 0;
        min-height: 40px;
        justify-content: center;
        font-size: 12px;
        border-radius: 10px;
    }

    /* NP footer */
    .np-footer-actions {
        flex-direction: column;
        gap: 8px;
    }

    .np-footer-actions .btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }

    /* ---- General mobile form improvements ---- */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="search"],
    input[type="url"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important;
        /* Prevent iOS zoom on focus */
        min-height: 44px;
        border-radius: 10px !important;
    }

    textarea {
        min-height: 88px;
    }

    /* ---- Dropdown menus ---- */
    .dropdown-menu {
        min-width: 180px;
        border-radius: 14px !important;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
    }

    .dropdown-item {
        padding: 12px 16px;
        min-height: 44px;
        font-size: 14px;
    }
}

/* ============================================
   RESPONSIVE — SMALL PHONES (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {

    /* Tighter header */
    .top-header {
        height: 48px;
        padding: 0 10px;
    }

    .menu-toggle {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .header-btn {
        width: 34px;
        height: 34px;
    }

    .mobile-search-btn {
        width: 34px;
        height: 34px;
    }

    .btn-new {
        width: 34px;
        height: 34px;
        padding: 0;
        border-radius: 10px;
    }

    .user-avatar-header {
        display: none;
    }

    /* KPI even more compact */
    .kpi-card {
        padding: 12px;
    }

    .kpi-amount {
        font-size: 20px !important;
    }

    .kpi-chart canvas {
        height: 32px !important;
    }

    /* Dashboard content tighter */
    .dashboard-content {
        padding: 12px !important;
        gap: 12px !important;
    }

    /* Bottom nav slightly smaller */
    .mobile-bottom-nav .mobile-nav-list {
        height: 56px;
    }

    .mobile-bottom-nav .mobile-nav-link i {
        font-size: 18px;
    }

    .mobile-bottom-nav .mobile-nav-link span {
        font-size: 9px;
    }

    .mobile-bottom-nav .fab-circle {
        width: 44px;
        height: 44px;
        margin-top: -18px;
    }

    /* FAB menu position */
    .mobile-fab-menu {
        bottom: 76px;
    }

    /* Page headers more compact */
    .fac-page-header .page-title-group h1,
    .page-title,
    [class*="page-header"] h1 {
        font-size: 18px !important;
    }

    [class*="page-header"] .page-subtitle,
    [class*="page-header"] p {
        font-size: 12px !important;
    }

    /* Section titles */
    .section-title,
    .card-title {
        font-size: 15px;
    }

    /* Table cells tighter */
    .data-table th {
        padding: 8px 10px;
        font-size: 10px;
    }

    .data-table td {
        padding: 10px;
        font-size: 12px;
    }

    /* Carnet — single column client cards on very small */
    .cr-client-cards {
        grid-template-columns: 1fr !important;
    }

    .cr-table tbody tr {
        padding: 12px;
        padding-right: 12px;
        grid-template-columns: auto 1fr auto;
        gap: 6px 8px;
    }

    .cr-page-title {
        font-size: 18px !important;
    }

    .cr-page-title-sub {
        font-size: 14px !important;
    }

    .cr-totals-row-final strong {
        font-size: 16px;
    }
}

/* ============================================
   RESPONSIVE — VERY SMALL (max-width: 375px)
   ============================================ */
@media (max-width: 375px) {
    .top-header {
        padding: 0 8px;
        gap: 4px;
    }

    .language-switcher {
        display: none;
    }

    .btn-new {
        width: 32px;
        height: 32px;
    }

    .breadcrumb {
        max-width: 100px;
    }

    .kpi-amount {
        font-size: 18px !important;
    }

    .mobile-bottom-nav .mobile-nav-link span {
        display: none;
    }

    .mobile-bottom-nav .mobile-nav-link.active span {
        display: block;
        font-size: 8px;
    }
}

/* ============================================
   RTL MOBILE SUPPORT
   ============================================ */
@media (max-width: 768px) {
    html[dir="rtl"] .main-content {
        margin-right: 0;
    }

    html[dir="rtl"] .sidebar {
        transform: translateX(100%);
    }

    html[dir="rtl"] .sidebar.open {
        transform: translateX(0);
    }

    html[dir="rtl"] .mobile-bottom-nav {
        direction: rtl;
    }

    html[dir="rtl"] .mobile-fab-menu-item {
        flex-direction: row;
    }

    html[dir="rtl"] .mobile-fab-menu-item a {
        flex-direction: row;
    }

    html[dir="rtl"] .konx-notif-panel {
        right: 0 !important;
        left: 0 !important;
    }

    /* RTL table card layout - ensure proper alignment */
    html[dir="rtl"] .data-table tbody td,
    html[dir="rtl"] .factures-full-table tbody td,
    html[dir="rtl"] .cl-table tbody td,
    html[dir="rtl"] .pr-table tbody td,
    html[dir="rtl"] .cr-table tbody td,
    html[dir="rtl"] .rp-journal-table tbody td {
        text-align: right !important;
    }

    /* RTL - keep amount cells LTR aligned left */
    html[dir="rtl"] .td-amount,
    html[dir="rtl"] .montant-cell,
    html[dir="rtl"] .encours-amount,
    html[dir="rtl"] .cl-encours-cell strong,
    html[dir="rtl"] .pr-price-cell,
    html[dir="rtl"] .line-total {
        text-align: left !important;
        direction: ltr !important;
    }

    /* RTL - pagination row direction */
    html[dir="rtl"] .pagination,
    html[dir="rtl"] .cl-pagination-controls,
    html[dir="rtl"] .pr-pagination-controls {
        flex-direction: row !important;
    }

    /* RTL - page header direction */
    html[dir="rtl"] .page-header,
    html[dir="rtl"] .page-title-row,
    html[dir="rtl"] .fac-header-actions {
        flex-direction: column !important;
    }

    /* RTL - filter buttons */
    html[dir="rtl"] .toolbar-filters {
        direction: rtl;
    }

    /* RTL - action dropdown as bottom sheet */
    html[dir="rtl"] .action-dropdown {
        direction: rtl;
    }

    html[dir="rtl"] .dropdown-item {
        flex-direction: row;
        justify-content: flex-start;
        direction: rtl;
        text-align: right;
    }
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes slideUpSheet {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideDownSheet {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

@keyframes fabPop {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    70% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.mobile-fab-menu.open .mobile-fab-menu-item:nth-child(1) {
    animation: fabPop 0.3s ease-out 0.05s both;
}

.mobile-fab-menu.open .mobile-fab-menu-item:nth-child(2) {
    animation: fabPop 0.3s ease-out 0.1s both;
}

.mobile-fab-menu.open .mobile-fab-menu-item:nth-child(3) {
    animation: fabPop 0.3s ease-out 0.15s both;
}

/* ============================================
   SAFE AREA & VIEWPORT FIXES
   ============================================ */
@supports (padding: env(safe-area-inset-bottom)) {
    .mobile-bottom-nav {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .mobile-search-overlay {
        padding-top: calc(12px + env(safe-area-inset-top));
    }
}

/* ============================================
   PRINT: HIDE MOBILE ELEMENTS
   ============================================ */
@media print {

    .mobile-bottom-nav,
    .mobile-fab-menu,
    .mobile-fab-backdrop,
    .mobile-search-overlay,
    .mobile-search-btn,
    .mobile-pull-indicator {
        display: none !important;
    }
}

/* ============================================
   TOUCH OPTIMIZATION
   ============================================ */
@media (hover: none) and (pointer: coarse) {

    /* Prevent double-tap zoom on interactive elements (safe CSS approach) */
    button,
    a,
    .nav-link,
    .mobile-nav-link,
    .kpi-card,
    .dropdown-item,
    .st-sidebar-item,
    .menu-toggle,
    .header-btn,
    .mobile-search-btn,
    input,
    select,
    textarea,
    label {
        touch-action: manipulation;
    }

    /* Remove hover effects on touch devices */
    .nav-link:hover,
    .header-btn:hover,
    .btn:hover,
    .kpi-card:hover {
        transform: none;
    }

    /* Better active states */
    .nav-link:active {
        background: var(--neutral-100);
    }

    .kpi-card:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }

    .btn:active,
    button:active {
        opacity: 0.85;
        transform: scale(0.97);
    }

    /* Smooth scrolling everywhere */
    * {
        -webkit-overflow-scrolling: touch;
    }

    /* Prevent text selection on interactive elements */
    button,
    .nav-link,
    .mobile-nav-link,
    .kpi-card,
    .dropdown-item {
        -webkit-user-select: none;
        user-select: none;
    }

    /* Ripple-like tap feedback */
    .header-btn,
    .menu-toggle,
    .mobile-search-btn {
        position: relative;
        overflow: hidden;
    }

    .header-btn::after,
    .menu-toggle::after,
    .mobile-search-btn::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle, rgba(0, 0, 0, 0.08) 0%, transparent 70%);
        transform: translate(-50%, -50%) scale(0);
        border-radius: 50%;
        transition: transform 0.3s ease;
    }

    .header-btn:active::after,
    .menu-toggle:active::after,
    .mobile-search-btn:active::after {
        transform: translate(-50%, -50%) scale(2);
    }
}

/* ============================================
   LANDSCAPE MOBILE
   ============================================ */
@media (max-width: 768px) and (orientation: landscape) {
    .mobile-bottom-nav .mobile-nav-list {
        height: 48px;
    }

    .mobile-bottom-nav .mobile-nav-link span {
        display: none;
    }

    .mobile-bottom-nav .fab-circle {
        width: 40px;
        height: 40px;
        margin-top: -14px;
    }

    .mobile-bottom-nav .fab-circle i {
        font-size: 16px;
    }

    .main-content {
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0));
    }

    .konx-modal,
    [class*="-modal-overlay"]>div:first-child:not([class*="backdrop"]) {
        max-height: 85vh !important;
    }
}