:root {
    --tpu-primary: #2458D8;
    --tpu-primary-dark: #153A78;
    --tpu-accent: #0EA5E9;
    --tpu-page: #F4F7FB;
    --tpu-text: #0F172A;
    --tpu-surface: #ffffff;
    --tpu-surface-soft: #f8fafc;
    --tpu-muted: #64748b;
    --tpu-muted-2: #94a3b8;
    --tpu-border: #e3e9f0;
    --tpu-border-strong: #d4dce6;
    --tpu-danger: #d92d20;
    --tpu-warning: #b7791f;
    --tpu-success: #16845b;
    --tpu-radius: 14px;
    --tpu-radius-sm: 9px;
    --tpu-radius-xs: 7px;
    --tpu-shadow: 0 1px 2px rgba(15,23,42,.025), 0 8px 24px rgba(15,23,42,.065);
    --tpu-shadow-hover: 0 16px 38px rgba(15,23,42,.105);
    --tpu-speed: 170ms;
    --tpu-rowpad: 10px;
    --tpu-sticky-top: 40px;
}

html { scroll-behavior: smooth; }
body, input, button, select, textarea {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body {
    background: var(--tpu-page) !important;
    color: var(--tpu-text);
    letter-spacing: -.005em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
#id-right { background: var(--tpu-page) !important; }
.fiche { max-width: none; }
a { text-underline-offset: 2px; }

/* ============================================================
   TOP NAVIGATION
   ============================================================ */
.side-nav-vert, #id-top {
    background: linear-gradient(115deg, var(--tpu-primary-dark), var(--tpu-primary)) !important;
    box-shadow: 0 2px 14px rgba(15,23,42,.18) !important;
}
.side-nav-vert a, .side-nav-vert .mainmenu, .side-nav-vert .login_block {
    transition: opacity var(--tpu-speed), transform var(--tpu-speed), background var(--tpu-speed);
}
.side-nav-vert a:hover { opacity: .96; }
li.tmenusel, li.tmenu:hover {
    background: rgba(255,255,255,.07) !important;
    border-radius: 8px 8px 0 0;
}

/* ============================================================
   LEFT SIDEBAR
   ============================================================ */
.side-nav, #id-left {
    background: #fff !important;
    border-right: 1px solid var(--tpu-border) !important;
}
.side-nav {
    box-shadow: 3px 0 18px rgba(15,23,42,.045) !important;
    transition: width .2s ease, opacity .15s ease !important;
}
div.blockvmenupair, div.blockvmenuimpair {
    border: 0 !important;
    border-bottom: 1px solid #f0f3f7 !important;
    padding: 4px 5px !important;
}
.blockvmenu .menu_titre, .menu_contenu {
    border-radius: var(--tpu-radius-sm) !important;
    transition: background var(--tpu-speed), color var(--tpu-speed), transform var(--tpu-speed) !important;
}
.blockvmenu .menu_titre { padding: 7px 8px !important; }
.menu_contenu { padding: 6px 8px !important; }
.menu_contenu:hover {
    background: color-mix(in srgb, var(--tpu-primary) 8%, #fff) !important;
    transform: translateX(1px);
}
a.vmenu, a.vsmenu { color: #334155 !important; text-decoration: none !important; }
a.vmenu:hover, a.vsmenu:hover { color: var(--tpu-primary) !important; }

/* ============================================================
   PAGE / CARDS / TITLES
   ============================================================ */
div.tabBar {
    background: var(--tpu-surface) !important;
    border: 1px solid var(--tpu-border) !important;
    border-radius: var(--tpu-radius) !important;
    box-shadow: var(--tpu-shadow) !important;
}
div.tabBar { padding: 18px !important; margin-bottom: 22px !important; }
.underbanner:not(:empty) { padding: 12px !important; }
.refid {
    color: var(--tpu-text) !important;
    font-weight: 720 !important;
    letter-spacing: -.025em;
}
.refidno, .opacitymedium { color: var(--tpu-muted) !important; }
div.titre {
    color: var(--tpu-text) !important;
    font-weight: 680 !important;
    letter-spacing: -.015em;
}
table.table-fiche-title { margin-bottom: 14px !important; }
.fiche > .listactionsfilter {
    background: rgba(255,255,255,.82);
    border: 1px solid var(--tpu-border);
    border-radius: var(--tpu-radius);
    box-shadow: 0 4px 16px rgba(15,23,42,.035);
    padding: 4px 8px;
    margin-bottom: 10px;
    backdrop-filter: blur(7px);
}

/* ============================================================
   TABS
   ============================================================ */
div.tabs { margin-bottom: 8px !important; }
.tabs .tab, .tabs a.tab {
    border: 0 !important;
    border-radius: var(--tpu-radius-sm) !important;
    padding: 9px 13px !important;
    transition: all var(--tpu-speed) !important;
}
.tabs .tabunactive { color: #64748b !important; }
.tabs .tabunactive:hover {
    background: #eaf0f6 !important;
    color: var(--tpu-primary) !important;
    text-decoration: none !important;
}
.tabs .tabactive, .tabs a.tab#active {
    background: color-mix(in srgb, var(--tpu-primary) 10%, #fff) !important;
    color: var(--tpu-primary) !important;
    box-shadow: inset 0 -3px 0 var(--tpu-primary) !important;
    font-weight: 680 !important;
}

/* ============================================================
   BASE TABLE SURFACE
   ============================================================ */
table.liste, table.noborder {
    background: #fff !important;
    border: 1px solid var(--tpu-border) !important;
    border-radius: var(--tpu-radius) !important;
    box-shadow: 0 3px 16px rgba(15,23,42,.04) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden !important;
}
table.liste td, table.noborder td {
    padding-top: var(--tpu-rowpad) !important;
    padding-bottom: var(--tpu-rowpad) !important;
    border-color: #edf1f5 !important;
}

/* ============================================================
   PREMIUM LIST TABLES V1.1
   ============================================================ */
table.tpu-table {
    --tpu-table-head: #f7f9fc;
    overflow: visible !important; /* required for sticky cells */
}
table.tpu-table tr.tpu-filter-row > th,
table.tpu-table tr.tpu-filter-row > td,
table.tpu-table .liste_titre_filter {
    background: linear-gradient(180deg, #fbfcfe 0%, #f5f8fb 100%) !important;
    border-bottom: 1px solid var(--tpu-border) !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
table.tpu-table tr.tpu-filter-row input,
table.tpu-table tr.tpu-filter-row select,
table.tpu-table tr.tpu-filter-row .select2-selection {
    min-height: 32px !important;
    background: #fff !important;
}
table.tpu-table tr.tpu-subheader-row > th,
table.tpu-table tr.tpu-subheader-row > td,
table.tpu-table tr.tpu-header-row > th,
table.tpu-table tr.tpu-header-row > td {
    background: var(--tpu-table-head) !important;
    color: #496076 !important;
    font-size: .92em;
    font-weight: 700 !important;
    letter-spacing: .005em;
    border-bottom: 1px solid #dfe6ee !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
table.tpu-table.tpu-sticky-table tr.tpu-header-row > th,
table.tpu-table.tpu-sticky-table tr.tpu-header-row > td {
    position: sticky;
    top: var(--tpu-sticky-top);
    z-index: 20;
    box-shadow: 0 1px 0 #dfe6ee, 0 7px 12px rgba(15,23,42,.045);
}
table.tpu-table tbody tr.oddeven:nth-of-type(even) > td { background: #fbfcfe !important; }
table.tpu-table tbody tr.oddeven:nth-of-type(odd) > td { background: #fff !important; }
table.tpu-table tbody tr.oddeven > td {
    transition: background var(--tpu-speed), box-shadow var(--tpu-speed), color var(--tpu-speed) !important;
}
table.tpu-table tbody tr.oddeven:hover > td {
    background: color-mix(in srgb, var(--tpu-primary) 5%, #fff) !important;
}
table.tpu-table tbody tr.oddeven:hover > td:first-child {
    box-shadow: inset 3px 0 0 var(--tpu-primary);
}
table.tpu-table td.right, table.tpu-table th.right {
    font-variant-numeric: tabular-nums;
}
table.tpu-table tbody td a:not(.button):not(.butAction) {
    text-decoration: none;
    transition: color var(--tpu-speed);
}
table.tpu-table tbody td a:not(.button):not(.butAction):hover { color: var(--tpu-primary-dark) !important; }
table.tpu-table input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--tpu-primary);
    vertical-align: middle;
}
table.tpu-table .badge,
table.tpu-table .badge-status,
table.tpu-table [class*="badge-status"] {
    border-radius: 999px !important;
    padding: 3px 8px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.035);
}

/* ============================================================
   DASHBOARD GENERIC BOXES
   ============================================================ */
.boxtable, .box {
    background: #fff !important;
    border: 1px solid var(--tpu-border) !important;
    border-radius: var(--tpu-radius) !important;
    box-shadow: var(--tpu-shadow) !important;
    overflow: hidden !important;
    transition: box-shadow var(--tpu-speed), transform var(--tpu-speed), border-color var(--tpu-speed) !important;
}
tr.box_titre, .box_titre {
    background: #f3f6fa !important;
    color: #243447 !important;
    font-weight: 670 !important;
    border-bottom: 1px solid var(--tpu-border) !important;
}

/* ============================================================
   HOME KPI CARDS - DOLIBARR OPENED DASHBOARD
   ============================================================ */
.opened-dash-board-wrap { margin: 6px 0 28px !important; }
.opened-dash-board-wrap .box-flex-container {
    width: 100% !important;
    margin: 0 !important;
    gap: 15px;
    align-items: stretch;
}
.opened-dash-board-wrap .box-flex-item {
    margin: 0 !important;
    width: 280px;
    min-width: 250px;
    flex: 1 1 280px;
}
.opened-dash-board-wrap .box-flex-item.filler { display: none !important; }
.opened-dash-board-wrap .info-box {
    min-height: 98px !important;
    margin: 0 !important;
    background: linear-gradient(145deg, #ffffff 0%, #fbfdff 100%) !important;
    border: 1px solid var(--tpu-border) !important;
    border-radius: var(--tpu-radius) !important;
    box-shadow: 0 5px 18px rgba(15,23,42,.055) !important;
    overflow: hidden !important;
    isolation: isolate;
    transition: transform var(--tpu-speed), box-shadow var(--tpu-speed), border-color var(--tpu-speed) !important;
}
.opened-dash-board-wrap .info-box::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--tpu-primary), var(--tpu-accent));
    opacity: .82;
    z-index: 2;
}
.opened-dash-board-wrap .info-box:hover {
    transform: translateY(-2px);
    box-shadow: var(--tpu-shadow-hover) !important;
    border-color: color-mix(in srgb, var(--tpu-primary) 22%, var(--tpu-border)) !important;
}
.opened-dash-board-wrap .info-box .info-box-icon,
.opened-dash-board-wrap .info-box-sm .info-box-icon {
    width: 60px !important;
    height: 60px !important;
    line-height: 60px !important;
    margin: 18px 0 18px 15px !important;
    border-radius: 16px !important;
    background: color-mix(in srgb, currentColor 11%, #ffffff) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent) !important;
    font-size: 24px !important;
    opacity: 1 !important;
}
.opened-dash-board-wrap .info-box .info-box-content,
.opened-dash-board-wrap .info-box-sm .info-box-content {
    margin-left: 88px !important;
    height: auto !important;
    min-height: 72px;
    padding: 14px 13px 10px 0 !important;
}
.opened-dash-board-wrap .info-box-title {
    width: 100% !important;
    color: #64748b !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: .065em;
    text-transform: uppercase;
    opacity: 1 !important;
    margin-bottom: 7px !important;
}
.opened-dash-board-wrap .info-box-lines { display: grid; gap: 2px; }
.opened-dash-board-wrap .info-box-line {
    display: flex;
    align-items: center;
    min-height: 20px;
    line-height: 1.25em !important;
}
.opened-dash-board-wrap .info-box-line-text {
    width: auto !important;
    max-width: none !important;
    flex: 1 1 auto;
    color: #334155;
}
.opened-dash-board-wrap .info-box-text-a { color: var(--tpu-primary) !important; font-weight: 570; }
.opened-dash-board-wrap .badge {
    min-width: 25px;
    text-align: center;
    border-radius: 999px !important;
    padding: 2px 7px !important;
    font-weight: 750 !important;
}

/* The draggable dashboard widgets under KPI cards */
.tpu-dashboard-widget {
    border-radius: var(--tpu-radius) !important;
    border: 1px solid var(--tpu-border) !important;
    box-shadow: 0 7px 22px rgba(15,23,42,.055) !important;
    background: #fff !important;
    margin-bottom: 18px !important;
    overflow: hidden !important;
}
.tpu-dashboard-widget:hover {
    border-color: color-mix(in srgb, var(--tpu-primary) 15%, var(--tpu-border)) !important;
    box-shadow: 0 13px 30px rgba(15,23,42,.085) !important;
}
.tpu-dashboard-widget > table.boxtable,
.tpu-dashboard-widget table.boxtable {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}
.tpu-dashboard-widget tr.box_titre,
.tpu-dashboard-widget tr.liste_titre.box_titre {
    height: 42px !important;
    background: linear-gradient(180deg, #fbfcfe 0%, #f5f8fb 100%) !important;
    border-bottom: 1px solid var(--tpu-border) !important;
}
.tpu-dashboard-widget tr.box_titre > td,
.tpu-dashboard-widget tr.box_titre > th {
    color: #334155 !important;
    font-size: 12.5px;
    font-weight: 730 !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}
.tpu-dashboard-widget .boxhandle,
.tpu-dashboard-widget .boxclose,
.tpu-dashboard-widget .boxfilter {
    opacity: .5;
    transition: opacity var(--tpu-speed), transform var(--tpu-speed);
}
.tpu-dashboard-widget:hover .boxhandle,
.tpu-dashboard-widget:hover .boxclose,
.tpu-dashboard-widget:hover .boxfilter { opacity: .82; }
.tpu-dashboard-widget .boxhandle:hover,
.tpu-dashboard-widget .boxclose:hover { transform: scale(1.08); }

/* ============================================================
   GRAPH / CHART POLISH
   Dolibarr uses .dolgraph / .dolgraphchart and Flot labels.
   ============================================================ */
.tpu-widget-chart .dolgraph,
.tpu-widget-chart div.dolgraph {
    --dolgraphbg: transparent;
    margin: 8px !important;
    padding: 12px 12px 10px !important;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%) !important;
    border: 1px solid #edf1f5;
    border-radius: 11px;
}
.tpu-widget-chart .dolgraphtitle,
.dolgraph .dolgraphtitle {
    color: #334155 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: -.005em;
    margin: 2px 0 10px !important;
}
.tpu-widget-chart .dolgraphchart {
    border-radius: 9px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 20%, #ffffff 0%, #fbfdff 100%);
}
.tpu-widget-chart .dolgraphchart canvas {
    filter: saturate(.92) contrast(1.015);
    opacity: .97;
}
.tpu-widget-chart .flot-tick-label,
.tpu-widget-chart .flot-text .flot-tick-label,
.tpu-widget-chart .tickLabel {
    color: #738296 !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 10.5px !important;
}
.tpu-widget-chart div.dolgraph div.legend,
.tpu-widget-chart div.dolgraph div.legend div { background: transparent !important; }
.tpu-widget-chart div.dolgraph div.legend table {
    border-collapse: separate !important;
    border-spacing: 5px 2px !important;
    font-size: 11px;
}
.tpu-widget-chart td.legendLabel {
    color: #64748b !important;
    padding-right: 8px !important;
}
.tpu-widget-chart td.legendColorBox > div {
    border: 0 !important;
    border-radius: 4px !important;
    overflow: hidden;
}

/* ============================================================
   FORMS
   ============================================================ */
input.flat, textarea.flat, select.flat,
input.minwidth100, input.minwidth200,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
    border: 1px solid var(--tpu-border-strong) !important;
    border-radius: var(--tpu-radius-sm) !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.02) !important;
    transition: border-color var(--tpu-speed), box-shadow var(--tpu-speed), background var(--tpu-speed) !important;
}
input.flat:hover, textarea.flat:hover, select.flat:hover,
.select2-container .select2-selection--single:hover,
.select2-container .select2-selection--multiple:hover {
    border-color: #bec9d6 !important;
}
input.flat:focus, textarea.flat:focus, select.flat:focus,
input:focus-visible, textarea:focus-visible,
.select2-container--focus .select2-selection {
    border-color: var(--tpu-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tpu-primary) 14%, transparent) !important;
    outline: none !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.butAction,
#mainbody input.button:not(.buttongen):not(.bordertransp),
#mainbody a.button:not(.buttongen):not(.bordertransp),
button.button {
    background: linear-gradient(135deg, var(--tpu-primary), var(--tpu-primary-dark)) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--tpu-radius-sm) !important;
    padding: 8px 15px !important;
    font-weight: 680 !important;
    text-transform: none !important;
    box-shadow: 0 3px 8px color-mix(in srgb, var(--tpu-primary) 24%, transparent) !important;
    transition: transform var(--tpu-speed), box-shadow var(--tpu-speed), filter var(--tpu-speed) !important;
}
.butAction:hover,
#mainbody input.button:hover,
#mainbody a.button:hover,
button.button:hover {
    filter: brightness(1.04) !important;
    box-shadow: 0 7px 16px color-mix(in srgb, var(--tpu-primary) 26%, transparent) !important;
    transform: translateY(-1px);
    text-decoration: none !important;
}
.butActionDelete, .buttonDelete {
    background: #fff1f0 !important;
    color: var(--tpu-danger) !important;
    border: 1px solid #ffd7d2 !important;
    box-shadow: none !important;
}
.butActionRefused {
    background: #f1f4f7 !important;
    color: #94a3b8 !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
}

/* ============================================================
   BADGES / MESSAGES / PAGINATION
   ============================================================ */
.badge, .badge-status, .badge-status1, .badge-status4, .badge-status6, .badge-status8 {
    border-radius: 999px !important;
    font-weight: 680 !important;
}
.info, .warning, .error, .ok {
    border-radius: var(--tpu-radius-sm) !important;
    box-shadow: 0 2px 8px rgba(15,23,42,.04);
}
.pagination a {
    border-radius: 7px !important;
    transition: background var(--tpu-speed), color var(--tpu-speed), transform var(--tpu-speed) !important;
}
.pagination a:hover {
    background: color-mix(in srgb, var(--tpu-primary) 9%, #fff) !important;
    color: var(--tpu-primary) !important;
    transform: translateY(-1px);
}
.tabsAction { padding-top: 16px !important; padding-bottom: 12px !important; }

/* ============================================================
   SIDEBAR TOGGLE
   ============================================================ */
#tpu-sidebar-toggle {
    position: fixed;
    left: 228px;
    top: 52px;
    z-index: 1200;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--tpu-border);
    background: #fff;
    color: var(--tpu-primary);
    box-shadow: 0 4px 14px rgba(15,23,42,.14);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    transition: left .2s ease, background var(--tpu-speed), color var(--tpu-speed), transform var(--tpu-speed), box-shadow var(--tpu-speed);
}
#tpu-sidebar-toggle:hover {
    background: var(--tpu-primary);
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 7px 18px color-mix(in srgb, var(--tpu-primary) 28%, transparent);
}
body.tpu-sidebar-collapsed .side-nav,
body.tpu-sidebar-collapsed #id-left { display: none !important; }
body.tpu-sidebar-collapsed #id-right { width: 100% !important; }
body.tpu-sidebar-collapsed #tpu-sidebar-toggle { left: 8px; }

/* Search shortcut feedback */
.tpu-search-pulse { animation: tpuPulse .55s ease; }
@keyframes tpuPulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tpu-primary) 35%, transparent); }
    100% { box-shadow: 0 0 0 10px transparent; }
}

/* Scrollbars */
@supports selector(::-webkit-scrollbar) {
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border: 2px solid transparent;
        background-clip: padding-box;
        border-radius: 999px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
        border: 2px solid transparent;
        background-clip: padding-box;
    }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
    .opened-dash-board-wrap .box-flex-item { min-width: 230px; }
}
@media (max-width: 999px) {
    #tpu-sidebar-toggle { display: none !important; }
    div.tabBar { padding: 12px !important; box-shadow: none !important; }
    table.liste, table.noborder { box-shadow: none !important; border-radius: 8px !important; }
    .butAction { padding: 9px 12px !important; }
    .fiche > .listactionsfilter { backdrop-filter: none; }
    table.tpu-table.tpu-sticky-table tr.tpu-header-row > th,
    table.tpu-table.tpu-sticky-table tr.tpu-header-row > td { position: static; box-shadow: none; }
}
@media (max-width: 768px) {
    .opened-dash-board-wrap .box-flex-container { gap: 10px; }
    .opened-dash-board-wrap .box-flex-item { width: 100% !important; min-width: 0 !important; }
    .opened-dash-board-wrap .info-box .info-box-icon,
    .opened-dash-board-wrap .info-box-sm .info-box-icon {
        width: 52px !important;
        height: 52px !important;
        line-height: 52px !important;
        margin: 14px 0 14px 12px !important;
        border-radius: 14px !important;
    }
    .opened-dash-board-wrap .info-box .info-box-content,
    .opened-dash-board-wrap .info-box-sm .info-box-content {
        margin-left: 76px !important;
        padding-top: 11px !important;
    }
    .tpu-widget-chart .dolgraph { margin: 5px !important; padding: 8px !important; }
}

@media print {
    #tpu-sidebar-toggle { display: none !important; }
    body { background: #fff !important; }
    table.liste, table.noborder, .boxtable, div.tabBar, .tpu-dashboard-widget { box-shadow: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *:before, *:after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}


/* ============================================================
   V1.2 - HIGH IMPACT DASHBOARD / CHARTS / MOBILE LISTS
   ============================================================ */

/* Stronger visual hierarchy for dashboard widgets */
.tpu-dashboard-widget {
    background: #fff !important;
    border-color: #dde5ee !important;
    box-shadow: 0 8px 28px rgba(15,23,42,.065) !important;
}
.tpu-dashboard-widget:hover {
    border-color: color-mix(in srgb, var(--tpu-primary) 18%, #dde5ee) !important;
    box-shadow: 0 14px 34px rgba(15,23,42,.09) !important;
}
.tpu-dashboard-widget tr.box_titre,
.tpu-dashboard-widget .box_titre {
    background: linear-gradient(180deg, #fbfdff 0%, #f4f7fb 100%) !important;
    border-bottom: 1px solid #e1e8f0 !important;
}
.tpu-dashboard-widget tr.box_titre > td,
.tpu-dashboard-widget tr.box_titre > th {
    padding: 11px 12px !important;
    font-size: 12.5px !important;
    letter-spacing: -.01em;
}
.opened-dash-board-wrap .info-box {
    box-shadow: 0 7px 22px rgba(15,23,42,.065) !important;
}
.opened-dash-board-wrap .info-box::before {
    content: "";
    position: absolute;
    width: 86px;
    height: 86px;
    right: -28px;
    bottom: -44px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tpu-primary) 7%, transparent);
    pointer-events: none;
}

/* ============================================================
   CHART.JS / DOLGRAPH - STABLE RESPONSIVE MODE (v1.3)
   Important: never force a CSS width/height on the canvas itself.
   Chart.js owns the canvas dimensions. We only size its parent.
   ============================================================ */
.tpu-widget-chart {
    --tpu-chart-grid: rgba(100,116,139,.12);
}
.tpu-widget-chart .tpu-chart-holder,
.tpu-widget-chart .dolgraphchart[id^="placeholder_"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 230px !important;
    min-height: 230px !important;
    max-height: 230px !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 4px 6px 2px !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 12px !important;
}
.tpu-widget-chart .dolgraphcharpie.tpu-chart-holder,
.tpu-widget-chart .dolgraphcharpiesemicircle.tpu-chart-holder,
.tpu-widget-chart .dolgraphcharpolar.tpu-chart-holder {
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
}
/* Do NOT put width/height !important on canvas: doing so stretches the bitmap
   independently of Chart.js and causes cropped doughnuts / blank charts. */
.tpu-widget-chart .tpu-chart-holder > canvas {
    display: block !important;
    max-width: 100% !important;
    max-height: 100% !important;
    filter: none !important;
}
.tpu-widget-chart .dolgraphtitle {
    color: #334155 !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    margin: 12px 8px 5px !important;
}
.tpu-widget-chart .nographyettext {
    color: #94a3b8 !important;
    font-size: 12px;
    padding: 18px;
}

/* ============================================================
   MOBILE LIST CARDS (v1.3)
   Converts standard Dolibarr list rows to compact cards while keeping the
   original DOM nodes, links and permissions. No horizontal table scroll.
   ============================================================ */
@media (max-width: 820px) {
    body.tpu-mobile-list-active,
    body.tpu-mobile-list-active #id-right,
    body.tpu-mobile-list-active #id-right .fiche,
    body.tpu-mobile-list-active .fichecenter,
    body.tpu-mobile-list-active .fichecenterbis,
    body.tpu-mobile-list-active form {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    body.tpu-mobile-list-active #id-right {
        width: 100% !important;
        overflow-x: hidden !important;
    }
    .tpu-mobile-card-wrapper,
    .div-table-responsive.tpu-mobile-card-wrapper,
    .div-table-responsive-inside.tpu-mobile-card-wrapper {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: visible !important;
        overflow-x: visible !important;
        box-sizing: border-box !important;
        padding: 0 !important;
    }
    table.tpu-mobile-cards {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: auto !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
        margin: 0 !important;
    }
    table.tpu-mobile-cards > tbody,
    table.tpu-mobile-cards > thead,
    table.tpu-mobile-cards > tfoot {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    table.tpu-mobile-cards tr.tpu-header-row,
    table.tpu-mobile-cards tr.tpu-subheader-row,
    table.tpu-mobile-cards tr.liste_titre:not(.liste_titre_filter) {
        display: none !important;
    }
    table.tpu-mobile-cards tr.oddeven.tpu-mobile-row {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 0 10px !important;
        padding: 11px 13px 8px !important;
        border: 1px solid #dfe7f0 !important;
        border-radius: 14px !important;
        background: #fff !important;
        box-shadow: 0 5px 18px rgba(15,23,42,.055) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    table.tpu-mobile-cards tr.oddeven.tpu-mobile-row::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: linear-gradient(180deg, var(--tpu-primary), var(--tpu-accent));
        opacity: .86;
    }
    table.tpu-mobile-cards tr.oddeven.tpu-mobile-row > td {
        display: none !important;
        float: none !important;
        position: static;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        padding: 6px 3px !important;
        border: 0 !important;
        background: transparent !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        line-height: 1.35 !important;
    }
    table.tpu-mobile-cards tr.oddeven.tpu-mobile-row > td * {
        max-width: 100%;
        box-sizing: border-box;
    }
    table.tpu-mobile-cards tr.oddeven.tpu-mobile-row > td table,
    table.tpu-mobile-cards tr.oddeven.tpu-mobile-row > td .nobordernopadding {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        display: inline-table !important;
    }
    table.tpu-mobile-cards tr.oddeven.tpu-mobile-row > td.tpu-mobile-essential,
    table.tpu-mobile-cards tr.oddeven.tpu-mobile-row.tpu-mobile-expanded > td.tpu-mobile-extra {
        display: flex !important;
        align-items: baseline !important;
        justify-content: space-between !important;
        gap: 14px !important;
    }
    table.tpu-mobile-cards tr.oddeven.tpu-mobile-row > td[data-tpu-label]::before {
        content: attr(data-tpu-label);
        flex: 0 0 34%;
        max-width: 34%;
        color: #7b8a9d;
        font-size: 10px;
        font-weight: 760;
        letter-spacing: .045em;
        text-transform: uppercase;
    }
    table.tpu-mobile-cards tr.oddeven.tpu-mobile-row > td.tpu-mobile-primary {
        display: block !important;
        width: calc(100% - 82px) !important;
        padding: 2px 82px 9px 3px !important;
        font-size: 15px !important;
        font-weight: 760 !important;
    }
    table.tpu-mobile-cards tr.oddeven.tpu-mobile-row > td.tpu-mobile-primary::before,
    table.tpu-mobile-cards tr.oddeven.tpu-mobile-row > td.tpu-mobile-status::before,
    table.tpu-mobile-cards tr.oddeven.tpu-mobile-row > td.tpu-mobile-selection::before {
        display: none !important;
    }
    table.tpu-mobile-cards tr.oddeven.tpu-mobile-row > td.tpu-mobile-primary a {
        color: var(--tpu-primary) !important;
        font-weight: 760 !important;
    }
    table.tpu-mobile-cards tr.oddeven.tpu-mobile-row > td.tpu-mobile-status {
        position: absolute !important;
        top: 10px !important;
        right: 11px !important;
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 42% !important;
        padding: 1px !important;
        text-align: right !important;
        z-index: 2;
    }
    table.tpu-mobile-cards tr.oddeven.tpu-mobile-row > td.tpu-mobile-selection {
        position: absolute !important;
        right: 12px !important;
        bottom: 10px !important;
        display: block !important;
        width: 22px !important;
        padding: 0 !important;
        z-index: 2;
    }
    table.tpu-mobile-cards tr.oddeven.tpu-mobile-row > td.tpu-mobile-toggle-cell {
        display: flex !important;
        justify-content: flex-end !important;
        width: 100% !important;
        margin-top: 4px !important;
        padding: 7px 30px 1px 3px !important;
        border-top: 1px solid #eef2f6 !important;
    }
    .tpu-mobile-more {
        appearance: none;
        border: 0;
        background: transparent;
        color: var(--tpu-primary);
        font: inherit;
        font-size: 11.5px;
        font-weight: 740;
        padding: 5px 2px;
        cursor: pointer;
    }
    .tpu-mobile-more::after {
        content: "⌄";
        display: inline-block;
        margin-left: 6px;
        font-size: 15px;
        line-height: 10px;
        transition: transform var(--tpu-speed);
    }
    .tpu-mobile-expanded .tpu-mobile-more::after { transform: rotate(180deg); }
    table.tpu-mobile-cards tr.oddeven.tpu-mobile-row.tpu-mobile-expanded > td.tpu-mobile-extra {
        border-top: 1px dashed #edf1f5 !important;
    }
    table.tpu-mobile-cards tr.oddeven.tpu-mobile-row > td.tpu-mobile-empty { display: none !important; }

    /* Hide total/footer rows that still carry the desktop column geometry. */
    table.tpu-mobile-cards tr.liste_total,
    table.tpu-mobile-cards tr.total { max-width: 100% !important; }
}

@media (max-width: 820px) {
    .tpu-mobile-filter-toggle {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin: 0 0 9px;
        padding: 10px 12px;
        border: 1px solid #dfe6ee;
        border-radius: 11px;
        background: #fff;
        color: #334155;
        box-shadow: 0 2px 10px rgba(15,23,42,.035);
        font-size: 13px;
        font-weight: 730;
    }
    .tpu-mobile-filter-toggle::after {
        content: "⌄";
        font-size: 17px;
        transition: transform var(--tpu-speed);
    }
    .tpu-mobile-filter-toggle[aria-expanded="true"]::after {
        transform: rotate(180deg);
    }
    table.tpu-mobile-cards.tpu-mobile-filters-collapsed tr.tpu-filter-row {
        display: none !important;
    }
    table.tpu-mobile-cards tr.tpu-filter-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        gap: 8px;
        margin-bottom: 10px;
        padding: 11px !important;
        border: 1px solid #dfe6ee !important;
        border-radius: 12px !important;
        background: #f7f9fc !important;
        box-sizing: border-box !important;
    }
    table.tpu-mobile-cards tr.tpu-filter-row > td,
    table.tpu-mobile-cards tr.tpu-filter-row > th {
        display: none !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }
    table.tpu-mobile-cards tr.tpu-filter-row > td.tpu-mobile-filter-active,
    table.tpu-mobile-cards tr.tpu-filter-row > th.tpu-mobile-filter-active {
        display: block !important;
    }
    table.tpu-mobile-cards tr.tpu-filter-row input,
    table.tpu-mobile-cards tr.tpu-filter-row select,
    table.tpu-mobile-cards tr.tpu-filter-row .select2,
    table.tpu-mobile-cards tr.tpu-filter-row .select2-container {
        max-width: 100% !important;
    }
}

@media (max-width: 820px) {
    .tpu-widget-chart .tpu-chart-holder,
    .tpu-widget-chart .dolgraphchart[id^="placeholder_"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 215px !important;
        min-height: 215px !important;
        max-height: 215px !important;
        padding: 2px 4px !important;
    }
    .tpu-widget-chart .dolgraphcharpie.tpu-chart-holder,
    .tpu-widget-chart .dolgraphcharpiesemicircle.tpu-chart-holder,
    .tpu-widget-chart .dolgraphcharpolar.tpu-chart-holder {
        height: 210px !important;
        min-height: 210px !important;
        max-height: 210px !important;
    }
    .tpu-dashboard-widget {
        border-radius: 13px !important;
        box-shadow: 0 5px 18px rgba(15,23,42,.055) !important;
    }
    .fiche:has(.tpu-mobile-cards) {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    .fiche:has(.tpu-mobile-cards) .liste_titre_create,
    .fiche:has(.tpu-mobile-cards) .pagination { max-width: 100% !important; }
}


/* ============================================================
   MOBILE FULL-SCREEN PRODUCT / SERVICE LINE EDITOR (v1.4)
   Keeps Dolibarr's native add-line controls and only changes layout.
   ============================================================ */
@media (max-width: 820px) {
    body.tpu-mobile-line-modal-open {
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    tr.tpu-mobile-line-title-hidden {
        display: none !important;
    }

    .tpu-mobile-line-launcher-wrap {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 14px 4px 10px !important;
        box-sizing: border-box !important;
    }
    .tpu-mobile-line-launcher {
        appearance: none;
        -webkit-appearance: none;
        width: min(100%, 420px);
        min-height: 50px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 12px 18px;
        border: 0;
        border-radius: 14px;
        background: linear-gradient(135deg, var(--tpu-primary), var(--tpu-accent));
        color: #fff;
        box-shadow: 0 9px 24px color-mix(in srgb, var(--tpu-primary) 20%, transparent);
        font: inherit;
        font-size: 15px;
        font-weight: 760;
        cursor: pointer;
    }
    .tpu-mobile-line-launcher .fa {
        font-size: 18px;
    }
    .tpu-mobile-line-launcher:active {
        transform: translateY(1px);
        box-shadow: 0 5px 14px color-mix(in srgb, var(--tpu-primary) 18%, transparent);
    }

    .tpu-mobile-line-modal[hidden] {
        display: none !important;
    }
    .tpu-mobile-line-modal {
        position: fixed !important;
        inset: 0 !important;
        z-index: 50000 !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-width: 100vw !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #f4f7fb !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    .tpu-mobile-line-modal-header {
        position: relative;
        flex: 0 0 auto;
        min-height: 72px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: max(12px, env(safe-area-inset-top)) 14px 12px;
        border-bottom: 1px solid #dfe7f0;
        background: rgba(255,255,255,.96);
        box-shadow: 0 3px 16px rgba(15,23,42,.06);
        z-index: 3;
    }
    .tpu-mobile-line-modal-titlewrap {
        min-width: 0;
    }
    .tpu-mobile-line-modal-title {
        color: #1f334b;
        font-size: 18px;
        font-weight: 800;
        line-height: 1.15;
        letter-spacing: -.015em;
    }
    .tpu-mobile-line-modal-hint {
        margin-top: 4px;
        color: #7b8a9d;
        font-size: 11px;
        line-height: 1.3;
    }
    .tpu-mobile-line-modal-close {
        appearance: none;
        -webkit-appearance: none;
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid #dfe7f0;
        border-radius: 50%;
        background: #fff;
        color: #475569;
        box-shadow: 0 2px 8px rgba(15,23,42,.05);
        font-size: 28px;
        font-weight: 400;
        line-height: 1;
        cursor: pointer;
    }

    .tpu-mobile-line-modal-body {
        flex: 1 1 auto;
        width: 100%;
        min-height: 0;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 12px 12px calc(28px + env(safe-area-inset-bottom));
        box-sizing: border-box;
    }
    table.tpu-mobile-line-modal-table,
    table.tpu-mobile-line-modal-table > tbody {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        table-layout: auto !important;
        box-sizing: border-box !important;
    }

    tr.tpu-mobile-line-editor-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }
    tr.tpu-mobile-line-editor-row > td.tpu-mobile-line-field {
        display: block !important;
        float: none !important;
        position: relative !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 12px !important;
        border: 1px solid #dfe7f0 !important;
        border-radius: 13px !important;
        background: #fff !important;
        box-shadow: 0 4px 14px rgba(15,23,42,.045) !important;
        text-align: left !important;
        white-space: normal !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }
    tr.tpu-mobile-line-editor-row > td.tpu-mobile-line-field[data-tpu-field-label]::before,
    tr.tpu-mobile-line-dates-row > td[data-tpu-field-label]::before {
        content: attr(data-tpu-field-label);
        display: block;
        margin: 0 0 8px;
        color: #718096;
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: .055em;
        line-height: 1.2;
        text-transform: uppercase;
    }
    tr.tpu-mobile-line-editor-row > td.linecoldescription {
        grid-column: 1 / -1 !important;
        padding: 14px !important;
    }
    tr.tpu-mobile-line-editor-row > td.linecolrefsupplier,
    tr.tpu-mobile-line-editor-row > td.linecoluht_currency,
    tr.tpu-mobile-line-editor-row > td.margininfos {
        grid-column: auto !important;
    }
    tr.tpu-mobile-line-editor-row > td.linecoledit.tpu-mobile-line-submit {
        grid-column: 1 / -1 !important;
        position: sticky !important;
        bottom: -1px !important;
        z-index: 4 !important;
        padding: 10px 0 2px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: linear-gradient(180deg, rgba(244,247,251,0), #f4f7fb 32%) !important;
        box-shadow: none !important;
        text-align: center !important;
    }
    tr.tpu-mobile-line-editor-row > td.linecoledit.tpu-mobile-line-submit #addline,
    tr.tpu-mobile-line-editor-row > td.linecoledit.tpu-mobile-line-submit input[name="addline"] {
        width: 100% !important;
        min-height: 52px !important;
        margin: 12px 0 0 !important;
        border: 0 !important;
        border-radius: 14px !important;
        background: linear-gradient(135deg, var(--tpu-primary), var(--tpu-accent)) !important;
        color: #fff !important;
        box-shadow: 0 9px 24px color-mix(in srgb, var(--tpu-primary) 20%, transparent) !important;
        font-size: 15px !important;
        font-weight: 800 !important;
    }

    /* Native Dolibarr product/free-line controls */
    .tpu-mobile-line-modal .prod_entry_mode_free,
    .tpu-mobile-line-modal .prod_entry_mode_predef {
        white-space: normal !important;
    }
    .tpu-mobile-line-modal span.prod_entry_mode_free,
    .tpu-mobile-line-modal span.prod_entry_mode_predef {
        display: block !important;
        width: 100% !important;
        margin: 3px 0 8px !important;
    }
    .tpu-mobile-line-modal .linecoldescription br {
        line-height: 8px;
    }
    .tpu-mobile-line-modal input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
    .tpu-mobile-line-modal select,
    .tpu-mobile-line-modal textarea,
    .tpu-mobile-line-modal .select2,
    .tpu-mobile-line-modal .select2-container,
    .tpu-mobile-line-modal .select2-selection,
    .tpu-mobile-line-modal .flat {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .tpu-mobile-line-modal input[type="text"],
    .tpu-mobile-line-modal input[type="number"],
    .tpu-mobile-line-modal input[type="date"],
    .tpu-mobile-line-modal select,
    .tpu-mobile-line-modal .select2-selection--single {
        min-height: 42px !important;
    }
    .tpu-mobile-line-modal .select2-selection--single .select2-selection__rendered {
        line-height: 40px !important;
        padding-left: 11px !important;
        padding-right: 30px !important;
    }
    .tpu-mobile-line-modal .select2-selection--single .select2-selection__arrow {
        height: 40px !important;
    }
    .tpu-mobile-line-modal .cke,
    .tpu-mobile-line-modal .tox,
    .tpu-mobile-line-modal .mce-container,
    .tpu-mobile-line-modal iframe,
    .tpu-mobile-line-modal #dp_desc,
    .tpu-mobile-line-modal [id*="dp_desc"] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .tpu-mobile-line-modal textarea {
        min-height: 120px !important;
    }
    .tpu-mobile-line-modal #attributes_box,
    .tpu-mobile-line-modal #extrafield_lines_area_create {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    .tpu-mobile-line-modal .dropdown-menu {
        max-width: calc(100vw - 28px) !important;
    }

    tr.tpu-mobile-line-dates-row {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 10px 0 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }
    tr.tpu-mobile-line-dates-row > td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 12px !important;
        border: 1px solid #dfe7f0 !important;
        border-radius: 13px !important;
        background: #fff !important;
        box-shadow: 0 4px 14px rgba(15,23,42,.045) !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }
    tr.tpu-mobile-line-dates-row select,
    tr.tpu-mobile-line-dates-row input {
        max-width: 100% !important;
    }

    /* Select2 / calendars often render outside the modal itself. */
    body.tpu-mobile-line-modal-open .select2-container--open,
    body.tpu-mobile-line-modal-open .ui-datepicker,
    body.tpu-mobile-line-modal-open .ui-autocomplete {
        z-index: 60050 !important;
    }
}

@media (min-width: 821px) {
    .tpu-mobile-line-launcher-wrap,
    .tpu-mobile-line-modal {
        display: none !important;
    }
}

/* ============================================================
   MOBILE DOCUMENT / INTERVENTION UX (v1.5)
   Native Dolibarr DOM is preserved; only layout is changed.
   ============================================================ */
@media (max-width: 820px) {
    body.tpu-mobile-document-lines-active #id-right,
    body.tpu-mobile-document-lines-active #id-right .fiche,
    body.tpu-mobile-document-lines-active #id-right form,
    body.tpu-mobile-expense-lines-active #id-right,
    body.tpu-mobile-expense-lines-active #id-right .fiche,
    body.tpu-mobile-expense-lines-active #id-right form {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* --------------------------------------------------------
       Existing document lines: proposal/order/invoice/contract
       -------------------------------------------------------- */
    .tpu-document-lines-wrapper {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: visible !important;
    }
    table.tpu-document-lines-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        table-layout: auto !important;
    }
    table.tpu-document-lines-table > thead,
    table.tpu-document-lines-table > tbody {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    table.tpu-document-lines-table tr.tpu-docline-title-row {
        display: none !important;
    }
    table.tpu-document-lines-table > tbody > tr:not(.tpu-docline-card):not(.tpu-mobile-line-editor-row) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    tr.tpu-docline-card {
        position: relative !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        gap: 0 !important;
        width: calc(100% - 2px) !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 9px 1px 12px !important;
        padding: 6px 8px 4px !important;
        border: 1px solid #dfe7f0 !important;
        border-radius: 16px !important;
        background: #fff !important;
        box-shadow: 0 5px 18px rgba(15,23,42,.055) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    tr.tpu-docline-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: linear-gradient(180deg, var(--tpu-primary), var(--tpu-accent));
    }
    tr.tpu-docline-card > td {
        float: none !important;
        min-width: 0 !important;
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
        padding: 9px 9px !important;
        border: 0 !important;
        background: transparent !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        box-sizing: border-box !important;
    }
    tr.tpu-docline-card > td *,
    tr.tpu-docline-card > td .nowrap,
    tr.tpu-docline-card > td .nowraponall,
    tr.tpu-docline-card > td .minwidth300imp,
    tr.tpu-docline-card > td .minwidth250onall {
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
    tr.tpu-docline-card > td.tpu-docline-number {
        display: none !important;
    }
    tr.tpu-docline-card > td.tpu-docline-primary {
        display: block !important;
        flex: 0 0 100% !important;
        padding: 11px 10px 13px !important;
        border-bottom: 1px solid #edf1f5 !important;
        color: #25364a !important;
        font-size: 14px !important;
        line-height: 1.45 !important;
    }
    tr.tpu-docline-card > td.tpu-docline-primary::before {
        display: none !important;
    }
    /* Keep the primary description cell full-width. It is also marked
       tpu-docline-essential, so excluding it here prevents this later rule
       from overriding the 100% flex-basis defined above. */
    tr.tpu-docline-card > td.tpu-docline-essential:not(.tpu-docline-primary) {
        display: block !important;
        flex: 1 1 46% !important;
    }
    tr.tpu-docline-card > td.tpu-docline-essential:not(.tpu-docline-primary)::before,
    tr.tpu-docline-card > td.tpu-docline-extra::before {
        content: attr(data-tpu-line-label);
        display: block;
        margin-bottom: 4px;
        color: #8390a0;
        font-size: 9.5px;
        font-weight: 800;
        letter-spacing: .055em;
        line-height: 1.15;
        text-transform: uppercase;
    }
    tr.tpu-docline-card > td.linecolht,
    tr.tpu-docline-card > td.linecolttc {
        color: #0f766e !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        font-variant-numeric: tabular-nums;
    }
    tr.tpu-docline-card > td.linecoluht,
    tr.tpu-docline-card > td.linecolqty {
        font-variant-numeric: tabular-nums;
        font-weight: 700;
    }
    tr.tpu-docline-card > td.tpu-docline-extra {
        display: none !important;
        flex: 1 1 46% !important;
        margin: 2px 3px !important;
        padding: 9px 10px !important;
        border-radius: 10px !important;
        background: #f7f9fc !important;
    }
    tr.tpu-docline-card.tpu-docline-expanded > td.tpu-docline-extra {
        display: block !important;
    }
    tr.tpu-docline-card > td.tpu-docline-action {
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        padding: 8px 5px !important;
    }
    tr.tpu-docline-card > td.tpu-docline-action a,
    tr.tpu-docline-card > td.tpu-docline-action button {
        width: 36px !important;
        height: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid #e1e7ef !important;
        border-radius: 10px !important;
        background: #f8fafc !important;
        color: #3d536b !important;
        text-decoration: none !important;
    }
    tr.tpu-docline-card > td.linecoldelete a {
        background: #fff7f7 !important;
        border-color: #fee2e2 !important;
    }
    tr.tpu-docline-card > td.linecolmove {
        display: none !important;
    }
    tr.tpu-docline-card > td.tpu-docline-toggle {
        display: block !important;
        flex: 1 0 100% !important;
        padding: 6px 8px 5px !important;
        border-top: 1px solid #edf1f5 !important;
        text-align: right !important;
    }
    .tpu-docline-more {
        appearance: none;
        -webkit-appearance: none;
        min-height: 36px;
        padding: 7px 10px;
        border: 0;
        background: transparent;
        color: var(--tpu-primary);
        font: inherit;
        font-size: 12px;
        font-weight: 800;
        cursor: pointer;
    }
    .tpu-docline-more::after {
        content: "⌄";
        display: inline-block;
        margin-left: 7px;
        font-size: 14px;
        transition: transform .15s ease;
    }
    .tpu-docline-expanded .tpu-docline-more::after {
        transform: rotate(180deg);
    }

    /* --------------------------------------------------------
       Intervention lines
       -------------------------------------------------------- */
    .tpu-intervention-lines-wrapper {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: visible !important;
    }
    table.tpu-intervention-lines-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        border: 0 !important;
        background: transparent !important;
    }
    table.tpu-intervention-lines-table > tbody {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    table.tpu-intervention-lines-table tr.tpu-intervention-title-row {
        display: none !important;
    }
    tr.tpu-intervention-card {
        position: relative !important;
        display: flex !important;
        flex-wrap: wrap !important;
        width: calc(100% - 2px) !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 8px 1px 12px !important;
        padding: 7px 8px 5px !important;
        border: 1px solid #dfe7f0 !important;
        border-radius: 16px !important;
        background: #fff !important;
        box-shadow: 0 5px 18px rgba(15,23,42,.055) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    tr.tpu-intervention-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: linear-gradient(180deg, #0ea5e9, #14b8a6);
    }
    tr.tpu-intervention-card > td {
        display: block !important;
        float: none !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 9px 10px !important;
        border: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        box-sizing: border-box !important;
    }
    tr.tpu-intervention-card > td.tpu-intervention-number {
        display: none !important;
    }
    tr.tpu-intervention-card > td.tpu-intervention-description {
        flex: 0 0 100% !important;
        padding: 11px 10px 13px !important;
        border-bottom: 1px solid #edf1f5 !important;
        font-size: 14px !important;
        line-height: 1.45 !important;
    }
    tr.tpu-intervention-card > td.tpu-intervention-description::before {
        display: none !important;
    }
    tr.tpu-intervention-card > td.tpu-intervention-meta {
        flex: 1 1 45% !important;
        font-weight: 700 !important;
        font-variant-numeric: tabular-nums;
    }
    tr.tpu-intervention-card > td.tpu-intervention-meta::before {
        content: attr(data-tpu-line-label);
        display: block;
        margin-bottom: 4px;
        color: #8390a0;
        font-size: 9.5px;
        font-weight: 800;
        letter-spacing: .055em;
        text-transform: uppercase;
    }
    tr.tpu-intervention-card > td.tpu-intervention-action {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 7px 5px !important;
    }
    tr.tpu-intervention-card > td.tpu-intervention-action a {
        width: 36px !important;
        height: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 2px !important;
        padding: 0 !important;
        border: 1px solid #e1e7ef !important;
        border-radius: 10px !important;
        background: #f8fafc !important;
        text-decoration: none !important;
    }


    /* --------------------------------------------------------
       Expense report lines (v1.6)
       -------------------------------------------------------- */
    .tpu-expense-lines-wrapper {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: visible !important;
    }
    table.tpu-expense-lines-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        table-layout: auto !important;
    }
    table.tpu-expense-lines-table > tbody {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    table.tpu-expense-lines-table tr.tpu-expense-title-row {
        display: none !important;
    }
    tr.tpu-expense-card {
        position: relative !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        width: calc(100% - 2px) !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 9px 1px 12px !important;
        padding: 7px 8px 5px !important;
        border: 1px solid #dfe7f0 !important;
        border-radius: 16px !important;
        background: #fff !important;
        box-shadow: 0 5px 18px rgba(15,23,42,.055) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    tr.tpu-expense-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: linear-gradient(180deg, #8b5cf6, var(--tpu-accent));
    }
    tr.tpu-expense-card > td {
        display: block !important;
        float: none !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        padding: 9px 10px !important;
        border: 0 !important;
        background: transparent !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        box-sizing: border-box !important;
    }
    tr.tpu-expense-card > td *,
    tr.tpu-expense-card > td .nowrap,
    tr.tpu-expense-card > td .nowraponall,
    tr.tpu-expense-card > td .minwidth100imp,
    tr.tpu-expense-card > td .maxwidth300 {
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
    tr.tpu-expense-card > td.tpu-expense-number,
    tr.tpu-expense-card > td.tpu-expense-empty {
        display: none !important;
    }
    tr.tpu-expense-card > td.tpu-expense-primary {
        flex: 0 0 100% !important;
        padding: 11px 10px 13px !important;
        border-bottom: 1px solid #edf1f5 !important;
        color: #25364a !important;
        font-size: 14px !important;
        line-height: 1.45 !important;
    }
    tr.tpu-expense-card > td.tpu-expense-primary::before {
        display: none !important;
    }
    tr.tpu-expense-card > td.tpu-expense-essential {
        flex: 1 1 44% !important;
    }
    tr.tpu-expense-card > td.tpu-expense-essential::before,
    tr.tpu-expense-card > td.tpu-expense-extra::before {
        content: attr(data-tpu-line-label);
        display: block;
        margin-bottom: 4px;
        color: #8390a0;
        font-size: 9.5px;
        font-weight: 800;
        letter-spacing: .055em;
        line-height: 1.15;
        text-transform: uppercase;
    }
    tr.tpu-expense-card > td.linecoltype {
        color: #4f46e5 !important;
        font-weight: 800 !important;
    }
    tr.tpu-expense-card > td.linecoldate {
        font-weight: 750 !important;
        font-variant-numeric: tabular-nums;
    }
    tr.tpu-expense-card > td.linecoltotalttc {
        color: #0f766e !important;
        font-size: 16px !important;
        font-weight: 850 !important;
        font-variant-numeric: tabular-nums;
        text-align: right !important;
    }
    tr.tpu-expense-card > td.tpu-expense-receipt {
        flex: 0 0 auto !important;
        min-width: 84px !important;
        text-align: center !important;
    }
    tr.tpu-expense-card > td.tpu-expense-receipt img {
        max-width: 62px !important;
        max-height: 62px !important;
        height: auto !important;
        border-radius: 9px !important;
    }
    tr.tpu-expense-card > td.tpu-expense-extra {
        display: none !important;
        flex: 1 1 44% !important;
        margin: 2px 3px !important;
        padding: 9px 10px !important;
        border-radius: 10px !important;
        background: #f7f9fc !important;
    }
    tr.tpu-expense-card.tpu-expense-expanded > td.tpu-expense-extra {
        display: block !important;
    }
    tr.tpu-expense-card > td.tpu-expense-action {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 7px 5px !important;
    }
    tr.tpu-expense-card > td.tpu-expense-action a {
        width: 36px !important;
        height: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid #e1e7ef !important;
        border-radius: 10px !important;
        background: #f8fafc !important;
        text-decoration: none !important;
    }
    tr.tpu-expense-card > td.tpu-expense-toggle {
        flex: 1 0 100% !important;
        padding: 6px 8px 5px !important;
        border-top: 1px solid #edf1f5 !important;
        text-align: right !important;
    }

    /* Expense payment summary / payment list */
    .tpu-expense-payment-wrapper {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: visible !important;
    }
    table.paymenttable.tpu-expense-payment-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 8px 0 14px !important;
        border: 1px solid #dfe7f0 !important;
        border-radius: 15px !important;
        background: #fff !important;
        box-shadow: 0 5px 18px rgba(15,23,42,.045) !important;
        overflow: hidden !important;
        table-layout: auto !important;
        box-sizing: border-box !important;
    }
    table.paymenttable.tpu-expense-payment-table > tbody {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    table.paymenttable.tpu-expense-payment-table tr.tpu-expense-payment-header {
        display: none !important;
    }
    table.paymenttable.tpu-expense-payment-table tr.tpu-expense-payment-entry {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 8px 10px !important;
        border-bottom: 1px solid #edf1f5 !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }
    table.paymenttable.tpu-expense-payment-table tr.tpu-expense-payment-entry > td {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 8px 9px !important;
        border: 0 !important;
        background: transparent !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }
    table.paymenttable.tpu-expense-payment-table tr.tpu-expense-payment-entry > td[data-tpu-payment-label]::before {
        content: attr(data-tpu-payment-label);
        display: block;
        margin-bottom: 3px;
        color: #8390a0;
        font-size: 9.5px;
        font-weight: 800;
        letter-spacing: .05em;
        text-transform: uppercase;
    }
    table.paymenttable.tpu-expense-payment-table td.tpu-expense-payment-amount {
        color: #0f766e !important;
        font-weight: 800 !important;
        font-variant-numeric: tabular-nums;
    }
    table.paymenttable.tpu-expense-payment-table td.tpu-expense-payment-empty {
        display: none !important;
    }
    table.paymenttable.tpu-expense-payment-table tr.tpu-expense-payment-summary {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 0 14px !important;
        border-bottom: 1px solid #edf1f5 !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }
    table.paymenttable.tpu-expense-payment-table tr.tpu-expense-payment-summary:last-child {
        border-bottom: 0 !important;
    }
    table.paymenttable.tpu-expense-payment-table tr.tpu-expense-payment-summary > td {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 13px 0 !important;
        border: 0 !important;
        background: transparent !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }
    table.paymenttable.tpu-expense-payment-table td.tpu-expense-payment-summary-label {
        color: #56677b !important;
        font-size: 13px !important;
        font-weight: 650 !important;
        text-align: left !important;
    }
    table.paymenttable.tpu-expense-payment-table td.tpu-expense-payment-summary-value {
        color: #1f334b !important;
        font-size: 15px !important;
        font-weight: 820 !important;
        text-align: right !important;
        font-variant-numeric: tabular-nums;
        white-space: nowrap !important;
    }
    table.paymenttable.tpu-expense-payment-table tr.tpu-expense-payment-summary-main {
        background: #fff8f7 !important;
    }
    table.paymenttable.tpu-expense-payment-table tr.tpu-expense-payment-summary-main td.tpu-expense-payment-summary-label {
        color: #7f1d1d !important;
        font-weight: 800 !important;
    }
    table.paymenttable.tpu-expense-payment-table tr.tpu-expense-payment-summary-main td.tpu-expense-payment-summary-value {
        color: #a61b1b !important;
        font-size: 20px !important;
        font-weight: 900 !important;
    }

    /* v1.6.2: payment summary is rendered as a dedicated mobile card.
       Keeping the native colspan rows inside a CSS-grid table is unreliable
       on mobile WebKit/Chromium and could clip the first summary line. */
    table.paymenttable.tpu-expense-payment-table tr.tpu-expense-payment-summary-source {
        display: none !important;
    }
    table.paymenttable.tpu-expense-payment-table.tpu-expense-payment-no-entries {
        display: none !important;
    }
    .tpu-expense-payment-mobile-summary {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 8px 0 18px !important;
        border: 1px solid #dfe7f0 !important;
        border-radius: 15px !important;
        background: #fff !important;
        box-shadow: 0 5px 18px rgba(15,23,42,.045) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    .tpu-expense-payment-mobile-summary[hidden] {
        display: none !important;
    }
    .tpu-expense-payment-mobile-summary-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 14px !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 14px 16px !important;
        border-bottom: 1px solid #edf1f5 !important;
        box-sizing: border-box !important;
    }
    .tpu-expense-payment-mobile-summary-row:last-child {
        border-bottom: 0 !important;
    }
    .tpu-expense-payment-mobile-summary-label {
        min-width: 0 !important;
        color: #56677b !important;
        font-size: 13px !important;
        font-weight: 680 !important;
        line-height: 1.25 !important;
        overflow-wrap: anywhere !important;
    }
    .tpu-expense-payment-mobile-summary-value {
        color: #1f334b !important;
        font-size: 16px !important;
        font-weight: 850 !important;
        line-height: 1.15 !important;
        text-align: right !important;
        white-space: nowrap !important;
        font-variant-numeric: tabular-nums !important;
    }
    .tpu-expense-payment-mobile-summary-main {
        background: #fff8f7 !important;
    }
    .tpu-expense-payment-mobile-summary-main .tpu-expense-payment-mobile-summary-label {
        color: #7f1d1d !important;
        font-weight: 820 !important;
    }
    .tpu-expense-payment-mobile-summary-main .tpu-expense-payment-mobile-summary-value {
        color: #a61b1b !important;
        font-size: 21px !important;
        font-weight: 920 !important;
    }

    /* Expense add/edit full-screen editor */
    tr.tpu-mobile-expense-editor-row > td.inputcomment,
    tr.tpu-mobile-expense-editor-row > td.tpu-mobile-line-description {
        grid-column: 1 / -1 !important;
    }
    tr.tpu-mobile-expense-editor-row > td.inputproject,
    tr.tpu-mobile-expense-editor-row > td.inputtype,
    tr.tpu-mobile-expense-editor-row > td.fk_c_exp_tax_cat {
        grid-column: 1 / -1 !important;
    }
    tr.tpu-mobile-expense-editor-row > td.inputdate select,
    tr.tpu-mobile-expense-editor-row > td.inputdate input,
    tr.tpu-mobile-expense-editor-row > td[data-tpu-field-label="Date"] select,
    tr.tpu-mobile-expense-editor-row > td[data-tpu-field-label="Date"] input {
        width: auto !important;
        min-width: 56px !important;
        max-width: 100% !important;
        margin: 2px 2px 2px 0 !important;
    }
    tr.tpu-mobile-expense-editor-row textarea[name="comments"] {
        width: 100% !important;
        min-height: 118px !important;
        resize: vertical !important;
    }
    tr.tpu-mobile-expense-editor-row > td.inputbuttons,
    tr.tpu-mobile-expense-editor-row > td.tpu-mobile-line-submit {
        grid-column: 1 / -1 !important;
    }

    /* v1.6.1: expense editor uses a dedicated vertical flow. */
    tr.tpu-mobile-expense-editor-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        align-items: start !important;
    }
    tr.tpu-mobile-expense-editor-row > td.inputdate {
        grid-column: 1 / -1 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 6px !important;
        min-height: 0 !important;
    }
    tr.tpu-mobile-expense-editor-row > td.inputdate::before {
        flex: 0 0 100% !important;
        margin-bottom: 4px !important;
    }
    tr.tpu-mobile-expense-editor-row > td.inputdate select,
    tr.tpu-mobile-expense-editor-row > td.inputdate input:not([type="hidden"]),
    tr.tpu-mobile-expense-editor-row > td.inputdate .select2-container {
        flex: 1 1 72px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    tr.tpu-mobile-expense-editor-row > td.inputdate a,
    tr.tpu-mobile-expense-editor-row > td.inputdate img,
    tr.tpu-mobile-expense-editor-row > td.inputdate .fa {
        flex: 0 0 auto !important;
    }
    tr.tpu-mobile-expense-editor-row > td.inputproject,
    tr.tpu-mobile-expense-editor-row > td.inputtype,
    tr.tpu-mobile-expense-editor-row > td.fk_c_exp_tax_cat,
    tr.tpu-mobile-expense-editor-row > td.inputcomment {
        grid-column: 1 / -1 !important;
    }
    tr.tpu-mobile-expense-editor-row > td.inputvat,
    tr.tpu-mobile-expense-editor-row > td.inputpricenet,
    tr.tpu-mobile-expense-editor-row > td.inputtax,
    tr.tpu-mobile-expense-editor-row > td.inputqty {
        min-height: 92px !important;
    }
    tr.tpu-mobile-expense-editor-row > td.inputvat select,
    tr.tpu-mobile-expense-editor-row > td.inputpricenet input,
    tr.tpu-mobile-expense-editor-row > td.inputtax input,
    tr.tpu-mobile-expense-editor-row > td.inputqty input {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .tpu-mobile-expense-receipt-section {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 14px 0 4px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    .tpu-mobile-expense-receipt-title {
        margin: 0 2px 8px !important;
        color: #5d6f83 !important;
        font-size: 11px !important;
        font-weight: 850 !important;
        letter-spacing: .055em !important;
        text-transform: uppercase !important;
    }
    table.tpu-mobile-expense-receipt-table,
    table.tpu-mobile-expense-receipt-table > tbody {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    .tpu-mobile-expense-modal-footer {
        flex: 0 0 auto !important;
        width: 100% !important;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
        border-top: 1px solid #dfe7f0 !important;
        background: rgba(255,255,255,.97) !important;
        box-shadow: 0 -5px 20px rgba(15,23,42,.08) !important;
        box-sizing: border-box !important;
        z-index: 5 !important;
    }
    table.tpu-mobile-expense-footer-table,
    table.tpu-mobile-expense-footer-table > tbody,
    table.tpu-mobile-expense-footer-table tr {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .tpu-mobile-expense-footer-table td.tpu-mobile-line-submit,
    .tpu-mobile-expense-footer-table td.inputbuttons {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        gap: 9px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }
    .tpu-mobile-expense-footer-table input[type="submit"],
    .tpu-mobile-expense-footer-table button[type="submit"],
    .tpu-mobile-expense-footer-table .button {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 50px !important;
        margin: 0 !important;
        padding: 10px 14px !important;
        border-radius: 13px !important;
        font-size: 14px !important;
        font-weight: 820 !important;
    }
    .tpu-mobile-expense-footer-table input[name="add"],
    .tpu-mobile-expense-footer-table input[name="save"],
    .tpu-mobile-expense-footer-table button[name="add"],
    .tpu-mobile-expense-footer-table button[name="save"],
    .tpu-mobile-expense-footer-table .button-save {
        border: 0 !important;
        background: linear-gradient(135deg, var(--tpu-primary), var(--tpu-accent)) !important;
        color: #fff !important;
        box-shadow: 0 8px 20px color-mix(in srgb, var(--tpu-primary) 20%, transparent) !important;
    }
    .tpu-mobile-expense-footer-table input[name="cancel"],
    .tpu-mobile-expense-footer-table button[name="cancel"],
    .tpu-mobile-expense-footer-table .button-cancel {
        border: 1px solid #d8e0ea !important;
        background: #fff !important;
        color: #526479 !important;
        box-shadow: none !important;
    }

    /* v1.6.2: native expense attachment toggles are moved out of the
       original table header row. This prevents the links from covering the
       file picker / upload button while preserving Dolibarr's click handlers. */
    .tpu-expense-receipt-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 0 10px !important;
        box-sizing: border-box !important;
    }
    .tpu-expense-receipt-actions a.tpu-expense-receipt-action-button,
    .tpu-expense-receipt-actions a.tpu-expense-receipt-action-button.reposition {
        position: static !important;
        inset: auto !important;
        float: none !important;
        clear: both !important;
        transform: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 10px 13px !important;
        border: 1px solid #dce6f2 !important;
        border-radius: 12px !important;
        background: #eef5ff !important;
        color: var(--tpu-primary) !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        text-decoration: none !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        box-sizing: border-box !important;
    }
    .tpu-expense-receipt-actions a.tpu-expense-receipt-action-button:hover,
    .tpu-expense-receipt-actions a.tpu-expense-receipt-action-button:focus {
        background: #e5efff !important;
        border-color: #cbdcf5 !important;
        text-decoration: none !important;
    }
    tr.tpu-expense-receipt-action-source {
        display: none !important;
    }

    /* Native receipt controls stay available in the modal. */
    tr.tpu-mobile-expense-aux-row {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 0 10px !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }
    tr.tpu-mobile-expense-attachment-actions {
        display: block !important;
    }
    tr.tpu-mobile-expense-aux-row.truploadnewfilenow[style*="display: none"],
    tr.tpu-mobile-expense-aux-row.trattachnewfilenow[style*="display: none"] {
        display: none !important;
    }
    tr.tpu-mobile-expense-aux-row.truploadnewfilenow:not([style*="display: none"]),
    tr.tpu-mobile-expense-aux-row.trattachnewfilenow:not([style*="display: none"]) {
        display: block !important;
    }
    tr.tpu-mobile-expense-aux-row > td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 12px !important;
        border: 1px solid #dfe7f0 !important;
        border-radius: 13px !important;
        background: #fff !important;
        box-shadow: 0 4px 14px rgba(15,23,42,.045) !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        box-sizing: border-box !important;
    }
    tr.tpu-mobile-expense-attachment-actions > td {
        background: #f8fbff !important;
        border-style: dashed !important;
    }
    tr.tpu-mobile-expense-attachment-actions a {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 38px !important;
        margin: 3px 8px 3px 0 !important;
        padding: 7px 10px !important;
        border-radius: 9px !important;
        background: #eef5ff !important;
        color: var(--tpu-primary) !important;
        font-weight: 750 !important;
        text-decoration: none !important;
    }
    tr.tpu-mobile-expense-aux-row .formattachnewfile,
    tr.tpu-mobile-expense-aux-row input[type="file"],
    tr.tpu-mobile-expense-aux-row .fileupload,
    tr.tpu-mobile-expense-aux-row .inline-block {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Make the native FormFile upload block truly one-column on phones. */
    tr.tpu-mobile-expense-aux-row.truploadnewfilenow > td {
        overflow: visible !important;
    }
    tr.tpu-mobile-expense-aux-row .formattachnewfile,
    tr.tpu-mobile-expense-aux-row .formattachnewfile > div,
    tr.tpu-mobile-expense-aux-row .formattachnewfile .attacharea,
    tr.tpu-mobile-expense-aux-row .formattachnewfile table.nobordernopadding,
    tr.tpu-mobile-expense-aux-row .formattachnewfile table.nobordernopadding > tbody,
    tr.tpu-mobile-expense-aux-row .formattachnewfile table.nobordernopadding > tbody > tr,
    tr.tpu-mobile-expense-aux-row .formattachnewfile table.nobordernopadding > tbody > tr > td {
        display: block !important;
        flex: 1 1 220px !important;
        position: static !important;
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        overflow: visible !important;
    }
    tr.tpu-mobile-expense-aux-row .formattachnewfile table.nobordernopadding > tbody > tr > td {
        padding: 0 !important;
    }
    tr.tpu-mobile-expense-aux-row .formattachnewfile input[type="file"] {
        position: static !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 46px !important;
        margin: 0 0 10px !important;
        padding: 8px !important;
        border: 1px solid #d7e0ea !important;
        border-radius: 10px !important;
        background: #fff !important;
        color: #334155 !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        box-sizing: border-box !important;
    }
    tr.tpu-mobile-expense-aux-row .formattachnewfile input[name="sendit"],
    tr.tpu-mobile-expense-aux-row .formattachnewfile input[name="senditdisabled"] {
        position: static !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 44px !important;
        margin: 0 0 10px !important;
        padding: 9px 12px !important;
        border: 0 !important;
        border-radius: 10px !important;
        background: linear-gradient(135deg, var(--tpu-primary), var(--tpu-accent)) !important;
        color: #fff !important;
        font-weight: 800 !important;
        box-sizing: border-box !important;
    }
    tr.tpu-mobile-expense-aux-row .formattachnewfile .savingdocmask {
        flex: 0 0 auto !important;
        width: 20px !important;
        height: 20px !important;
        margin: 1px 7px 0 0 !important;
    }
    tr.tpu-mobile-expense-aux-row .formattachnewfile label[for="savingdocmask"] {
        display: inline !important;
        width: auto !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    tr.tpu-mobile-expense-aux-row .photoref,
    tr.tpu-mobile-expense-aux-row .photoexpensereport {
        max-width: 100% !important;
    }

    /* --------------------------------------------------------
       v1.5 full-screen add/edit refinements
       -------------------------------------------------------- */
    tr.tpu-mobile-line-editor-row > td.tpu-mobile-hidden-field {
        display: none !important;
    }
    tr.tpu-mobile-line-editor-row > td.tpu-mobile-line-description,
    tr.tpu-mobile-line-editor-row > td.linecoldesc {
        grid-column: 1 / -1 !important;
        padding: 14px !important;
    }
    tr.tpu-mobile-line-editor-row > td.tpu-mobile-line-submit {
        grid-column: 1 / -1 !important;
        position: sticky !important;
        bottom: -1px !important;
        z-index: 4 !important;
        display: flex !important;
        gap: 9px !important;
        align-items: center !important;
        justify-content: stretch !important;
        padding: 14px 0 4px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: linear-gradient(180deg, rgba(244,247,251,0), #f4f7fb 30%) !important;
        box-shadow: none !important;
    }
    tr.tpu-mobile-line-editor-row > td.tpu-mobile-line-submit input[type="submit"],
    tr.tpu-mobile-line-editor-row > td.tpu-mobile-line-submit button[type="submit"] {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 50px !important;
        margin: 10px 0 0 !important;
        padding: 10px 14px !important;
        border-radius: 13px !important;
        font-size: 14px !important;
        font-weight: 800 !important;
    }
    tr.tpu-mobile-line-editor-row > td.tpu-mobile-line-submit .button-save,
    tr.tpu-mobile-line-editor-row > td.tpu-mobile-line-submit input[name="addline"],
    tr.tpu-mobile-line-editor-row > td.tpu-mobile-line-submit #addline {
        border: 0 !important;
        background: linear-gradient(135deg, var(--tpu-primary), var(--tpu-accent)) !important;
        color: #fff !important;
        box-shadow: 0 8px 20px color-mix(in srgb, var(--tpu-primary) 20%, transparent) !important;
    }
    tr.tpu-mobile-line-editor-row > td.tpu-mobile-line-submit .button-cancel {
        border: 1px solid #d8e0ea !important;
        background: #fff !important;
        color: #526479 !important;
        box-shadow: none !important;
    }

    .tpu-mobile-line-modal #np_desc,
    .tpu-mobile-line-modal [id*="np_desc"],
    .tpu-mobile-line-modal #product_desc,
    .tpu-mobile-line-modal [name="product_desc"],
    .tpu-mobile-line-modal #extrafield_lines_area_edit,
    .tpu-mobile-line-modal [id^="extrafield_lines_area_"] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Date and duration controls are better as compact wrapped controls than
       one huge select per line. */
    tr.tpu-mobile-intervention-editor-row > td:not(.tpu-mobile-line-description):not(.tpu-mobile-line-submit) select,
    tr.tpu-mobile-intervention-editor-row > td:not(.tpu-mobile-line-description):not(.tpu-mobile-line-submit) input[type="text"] {
        width: auto !important;
        min-width: 62px !important;
        max-width: 100% !important;
        margin: 2px 2px 2px 0 !important;
    }
    tr.tpu-mobile-intervention-editor-row > td {
        overflow-wrap: normal !important;
    }

    .tpu-mobile-existing-line-editor-row .linecoldesc .cke,
    .tpu-mobile-existing-line-editor-row .linecoldesc .tox,
    .tpu-mobile-existing-line-editor-row .linecoldesc iframe {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Keep Select2 and calendars above every full-screen editor. */
    body.tpu-mobile-line-modal-open .select2-dropdown,
    body.tpu-mobile-line-modal-open .ui-datepicker,
    body.tpu-mobile-line-modal-open .ui-autocomplete {
        z-index: 60060 !important;
    }
}

@media (min-width: 821px) {
    .tpu-docline-toggle,
    .tpu-expense-toggle,
    .tpu-mobile-native-modal {
        display: none !important;
    }
}



/* ============================================================
   MOBILE APP MENU V1.7
   ============================================================ */
@media (max-width: 920px) {
    body.tpu-mobile-app-menu-enabled .side-nav,
    body.tpu-mobile-app-menu-enabled #id-left,
    body.tpu-mobile-app-menu-enabled #tpu-sidebar-toggle {
        display: none !important;
    }

    body.tpu-mobile-app-menu-enabled .side-nav-vert,
    body.tpu-mobile-app-menu-enabled #id-top,
    body.tpu-mobile-app-menu-enabled .tpu-mobile-top-host {
        position: relative !important;
        min-height: 62px !important;
        overflow: hidden !important;
    }

    body.tpu-mobile-app-menu-enabled #id-top li.tmenu,
    body.tpu-mobile-app-menu-enabled #id-top li.tmenusel,
    body.tpu-mobile-app-menu-enabled #id-top .mainmenu,
    body.tpu-mobile-app-menu-enabled #id-top .login_block,
    body.tpu-mobile-app-menu-enabled .side-nav-vert li.tmenu,
    body.tpu-mobile-app-menu-enabled .side-nav-vert li.tmenusel,
    body.tpu-mobile-app-menu-enabled .side-nav-vert .mainmenu,
    body.tpu-mobile-app-menu-enabled .side-nav-vert .login_block {
        display: none !important;
    }

    #tpu-mobile-topbar {
        position: absolute;
        inset: 0;
        z-index: 20;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        color: #fff;
        background: linear-gradient(115deg, rgba(21,58,120,.95), rgba(36,88,216,.95));
        backdrop-filter: blur(6px);
    }
    .tpu-mobile-topbar__toggle,
    .tpu-mobile-topbar__more {
        border: 0;
        background: rgba(255,255,255,.08);
        color: #fff;
        width: 42px;
        height: 42px;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
    }
    .tpu-mobile-topbar__toggle span {
        display: block;
        width: 18px;
        height: 2px;
        background: #fff;
        border-radius: 999px;
        margin: 2px 0;
    }
    .tpu-mobile-topbar__current {
        flex: 1 1 auto;
        min-width: 0;
        border: 0;
        background: rgba(255,255,255,.08);
        color: #fff;
        height: 42px;
        border-radius: 12px;
        padding: 0 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        font-size: 15px;
        font-weight: 700;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
    }
    .tpu-mobile-topbar__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tpu-mobile-topbar__chev,
    .tpu-mobile-topbar__more { font-size: 20px; line-height: 1; }

    #tpu-mobile-drawer-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15,23,42,.42);
        backdrop-filter: blur(2px);
        z-index: 1998;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--tpu-speed);
    }
    #tpu-mobile-drawer {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(88vw, 380px);
        background: linear-gradient(180deg, #fbfdff 0%, #f4f7fb 100%);
        box-shadow: 18px 0 44px rgba(15,23,42,.22);
        z-index: 1999;
        transform: translateX(-102%);
        transition: transform var(--tpu-speed);
        display: flex;
        flex-direction: column;
        border-right: 1px solid rgba(255,255,255,.4);
    }
    body.tpu-mobile-drawer-open { overflow: hidden; }
    body.tpu-mobile-drawer-open #tpu-mobile-drawer-backdrop { opacity: 1; pointer-events: auto; }
    body.tpu-mobile-drawer-open #tpu-mobile-drawer { transform: translateX(0); }

    .tpu-mobile-drawer__header {
        padding: 18px 18px 14px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        background: linear-gradient(135deg, var(--tpu-primary-dark), var(--tpu-primary));
        color: #fff;
    }
    .tpu-mobile-drawer__eyebrow {
        font-size: 11px;
        letter-spacing: .12em;
        text-transform: uppercase;
        opacity: .76;
        margin-bottom: 6px;
    }
    .tpu-mobile-drawer__title { font-size: 22px; font-weight: 800; line-height: 1.1; }
    .tpu-mobile-drawer__subtitle { font-size: 13px; line-height: 1.35; opacity: .88; margin-top: 6px; max-width: 240px; }
    .tpu-mobile-drawer__close {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        border: 0;
        background: rgba(255,255,255,.14);
        color: #fff;
        font-size: 28px;
        line-height: 1;
        flex: 0 0 auto;
    }
    .tpu-mobile-drawer__body {
        flex: 1 1 auto;
        overflow: auto;
        padding: 16px 14px 28px;
    }
    .tpu-mobile-drawer__sectionlabel {
        font-size: 12px;
        font-weight: 800;
        color: var(--tpu-muted);
        text-transform: uppercase;
        letter-spacing: .1em;
        margin: 0 6px 10px;
    }
    .tpu-mnav-module {
        background: rgba(255,255,255,.92);
        border: 1px solid var(--tpu-border);
        border-radius: 18px;
        box-shadow: 0 8px 20px rgba(15,23,42,.05);
        overflow: hidden;
        margin-bottom: 10px;
    }
    .tpu-mnav-module__toggle {
        width: 100%;
        border: 0;
        background: transparent;
        padding: 14px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        color: var(--tpu-text);
    }
    .tpu-mnav-module__main {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
        text-align: left;
    }
    .tpu-mnav-module__label {
        font-size: 16px;
        font-weight: 760;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .tpu-mnav-module__arrow {
        font-size: 18px;
        color: var(--tpu-muted);
        transition: transform var(--tpu-speed);
    }
    .tpu-mnav-module.is-open .tpu-mnav-module__arrow { transform: rotate(180deg); }
    .tpu-mnav-icon,
    .tpu-mnav-icon-img {
        width: 22px;
        height: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 22px;
    }
    .tpu-mnav-icon img, .tpu-mnav-icon svg, .tpu-mnav-icon i,
    .tpu-mnav-icon-img { max-width: 22px; max-height: 22px; }
    .tpu-mnav-icon--placeholder {
        background: linear-gradient(135deg, rgba(36,88,216,.12), rgba(14,165,233,.08));
        border-radius: 8px;
    }
    .tpu-mnav-module.is-active > .tpu-mnav-module__toggle {
        background: linear-gradient(180deg, rgba(36,88,216,.08), rgba(36,88,216,.03));
    }
    .tpu-mnav-module__panel {
        display: none;
        padding: 0 12px 14px;
    }
    .tpu-mnav-module.is-open .tpu-mnav-module__panel { display: block; }
    .tpu-mnav-module__open {
        display: block;
        background: linear-gradient(135deg, var(--tpu-primary), var(--tpu-primary-dark));
        color: #fff !important;
        text-decoration: none !important;
        padding: 11px 14px;
        border-radius: 14px;
        font-weight: 700;
        margin: 0 2px 10px;
        box-shadow: 0 10px 18px rgba(36,88,216,.22);
    }
    .tpu-mobile-drawer__group {
        background: #fff;
        border: 1px solid var(--tpu-border);
        border-radius: 14px;
        padding: 10px;
        margin: 0 2px 10px;
    }
    .tpu-mobile-drawer__group-title {
        font-size: 13px;
        font-weight: 800;
        color: var(--tpu-muted);
        text-transform: uppercase;
        letter-spacing: .08em;
        margin-bottom: 8px;
    }
    .tpu-mobile-drawer__links {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .tpu-mobile-drawer__link {
        display: block;
        padding: 11px 12px;
        border-radius: 12px;
        text-decoration: none !important;
        color: #243247 !important;
        font-weight: 650;
        background: #f8fafc;
    }
    .tpu-mobile-drawer__link.is-current {
        background: color-mix(in srgb, var(--tpu-primary) 10%, #fff);
        color: var(--tpu-primary) !important;
    }
}


/* ============================================================
   V1.8 - DESKTOP GUARDS
   Mobile-only elements injected by JS must never remain visible
   after a rotation or window resize back to desktop widths.
   ============================================================ */
@media (min-width: 821px) {
    td.tpu-mobile-toggle-cell,
    .tpu-mobile-filter-toggle,
    .tpu-expense-payment-mobile-summary,
    .tpu-mobile-line-launcher-wrap {
        display: none !important;
    }
}
@media (min-width: 921px) {
    #tpu-mobile-topbar,
    #tpu-mobile-drawer,
    #tpu-mobile-drawer-backdrop {
        display: none !important;
    }
}


/* ============================================================
   V1.8.5 - ISOLATE TEKYNOD MOBILE DRAWER FROM ELDY NATIVE MENUS
   Eldy moves login/quick-add/bookmarks into its own mobile panel.
   They must stay hidden while TekynodUI owns mobile navigation.
   ============================================================ */
@media (max-width: 920px) {
    body.tpu-mobile-app-menu-enabled .login_block,
    body.tpu-mobile-app-menu-enabled div.login_block,
    body.tpu-mobile-app-menu-enabled .login_block_tools,
    body.tpu-mobile-app-menu-enabled .login_block_user,
    body.tpu-mobile-app-menu-enabled .login_block_other,
    body.tpu-mobile-app-menu-enabled .side-nav-vert .user-menu,
    body.tpu-mobile-app-menu-enabled .side-nav-vert .user-menu .dropdown-menu,
    body.tpu-mobile-app-menu-enabled #topmenu-quickadd-dropdown,
    body.tpu-mobile-app-menu-enabled #topmenu-quickadd-dropdown .dropdown-menu,
    body.tpu-mobile-app-menu-enabled #topmenu-bookmark-dropdown,
    body.tpu-mobile-app-menu-enabled #topmenu-bookmark-dropdown .dropdown-menu,
    body.tpu-mobile-app-menu-enabled #tmenu_tooltip,
    body.tpu-mobile-app-menu-enabled .tpu-mobile-top-host .dropdown-menu:not(#tpu-mobile-drawer *),
    body.tpu-mobile-app-menu-enabled .tpu-mobile-top-host .dropdown:not(#tpu-mobile-drawer *) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* The native Eldy hamburger must not reopen the old side navigation. */
    body.tpu-mobile-app-menu-enabled .menuhider,
    body.tpu-mobile-app-menu-enabled #mainmenutd_menu {
        display: none !important;
    }

    /* Keep our own drawer above every native Eldy mobile layer. */
    body.tpu-mobile-app-menu-enabled #tpu-mobile-drawer-backdrop { z-index: 2147483000 !important; }
    body.tpu-mobile-app-menu-enabled #tpu-mobile-drawer { z-index: 2147483001 !important; }
}


/* ============================================================
   V1.8.6 - SIMPLIFIED MOBILE TOPBAR + USER ACCOUNT POPOVER
   One action per control: menu / current module / user account.
   ============================================================ */
@media (max-width: 920px) {
    #tpu-mobile-topbar {
        display: grid !important;
        grid-template-columns: 48px minmax(0, 1fr) 48px !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 10px 12px !important;
    }

    .tpu-mobile-topbar__toggle,
    .tpu-mobile-topbar__user {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        border: 1px solid rgba(255,255,255,.12) !important;
        border-radius: 14px !important;
        background: rgba(255,255,255,.08) !important;
        color: #fff !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 4px 14px rgba(0,0,0,.06) !important;
        padding: 0 !important;
    }

    /* Real hamburger: three horizontal bars stacked vertically. */
    .tpu-mobile-topbar__toggle {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
    }
    .tpu-mobile-topbar__toggle span {
        display: block !important;
        width: 22px !important;
        height: 2.5px !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
        border-radius: 999px !important;
        background: #fff !important;
    }

    .tpu-mobile-topbar__current {
        height: 48px !important;
        min-width: 0 !important;
        border: 0 !important;
        border-radius: 14px !important;
        background: rgba(255,255,255,.08) !important;
        color: #fff !important;
        padding: 0 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        pointer-events: none !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
    }
    .tpu-mobile-topbar__label {
        display: block !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 17px !important;
        font-weight: 780 !important;
        letter-spacing: -.015em !important;
    }
    .tpu-mobile-topbar__chev,
    #tpu-mobile-menu-more { display: none !important; }

    .tpu-mobile-topbar__user {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }
    .tpu-mobile-topbar__user img {
        width: 36px !important;
        height: 36px !important;
        object-fit: cover !important;
        border-radius: 50% !important;
        border: 2px solid rgba(255,255,255,.8) !important;
        background: #fff !important;
    }
    .tpu-mobile-topbar__userfallback {
        font-size: 22px !important;
        line-height: 1 !important;
        filter: grayscale(1) brightness(4);
    }

    #tpu-mobile-user-popover {
        position: fixed !important;
        z-index: 2147483005 !important;
        width: min(420px, calc(100vw - 24px)) !important;
        max-height: min(76dvh, 680px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        display: none;
        padding: 0 !important;
        border: 1px solid rgba(226,232,240,.95) !important;
        border-radius: 22px !important;
        background: rgba(255,255,255,.985) !important;
        box-shadow: 0 24px 58px rgba(15,23,42,.24) !important;
        backdrop-filter: blur(18px) !important;
    }
    #tpu-mobile-user-popover.is-open { display: block !important; }

    .tpu-mobile-user-popover__profile {
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;
        padding: 18px !important;
        background: linear-gradient(135deg, color-mix(in srgb, var(--tpu-primary) 9%, #fff), #fff 66%) !important;
        border-bottom: 1px solid var(--tpu-border) !important;
    }
    .tpu-mobile-user-popover__avatar {
        width: 70px !important;
        height: 70px !important;
        flex: 0 0 70px !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        background: #fff !important;
        box-shadow: 0 0 0 3px #fff, 0 7px 20px rgba(15,23,42,.15) !important;
    }
    .tpu-mobile-user-popover__avatar img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 50% !important;
    }
    .tpu-mobile-user-popover__avatarfallback {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 32px !important;
        background: #f1f5f9 !important;
    }
    .tpu-mobile-user-popover__identity {
        min-width: 0 !important;
        color: var(--tpu-text) !important;
        font-size: 14px !important;
        line-height: 1.45 !important;
    }
    .tpu-mobile-user-popover__identity > br:first-child { display: none !important; }
    .tpu-mobile-user-popover__identity small {
        color: var(--tpu-muted) !important;
        font-size: 12px !important;
    }

    .tpu-mobile-user-popover__sections {
        padding: 10px 12px 4px !important;
    }
    .tpu-mobile-user-popover__section {
        border-bottom: 1px solid #edf1f5 !important;
    }
    .tpu-mobile-user-popover__section:last-child { border-bottom: 0 !important; }
    .tpu-mobile-user-popover__section-toggle {
        width: 100% !important;
        min-height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        padding: 11px 6px !important;
        border: 0 !important;
        background: transparent !important;
        color: #475569 !important;
        font-size: 14px !important;
        font-weight: 680 !important;
        text-align: left !important;
    }
    .tpu-mobile-user-popover__section-chevron {
        color: var(--tpu-muted) !important;
        font-size: 24px !important;
        line-height: 1 !important;
        transition: transform var(--tpu-speed) !important;
    }
    .tpu-mobile-user-popover__section.is-open .tpu-mobile-user-popover__section-chevron {
        transform: rotate(90deg) !important;
    }
    .tpu-mobile-user-popover__section-content {
        margin: 0 0 10px !important;
        padding: 11px 12px !important;
        border-radius: 13px !important;
        background: #f8fafc !important;
        color: #475569 !important;
        font-size: 12px !important;
        line-height: 1.55 !important;
        overflow-wrap: anywhere !important;
    }
    .tpu-mobile-user-popover__section-content[hidden] { display: none !important; }

    .tpu-mobile-user-popover__actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding: 12px !important;
        border-top: 1px solid var(--tpu-border) !important;
        background: #fbfcfe !important;
    }
    .tpu-mobile-user-popover__action {
        min-width: 0 !important;
        min-height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 10px 12px !important;
        border: 1px solid var(--tpu-border) !important;
        border-radius: 13px !important;
        background: #fff !important;
        color: #334155 !important;
        text-decoration: none !important;
        font-size: 13px !important;
        font-weight: 720 !important;
        text-align: center !important;
    }
    .tpu-mobile-user-popover__action.is-logout {
        grid-column: 1 / -1 !important;
        color: var(--tpu-danger) !important;
        background: #fff4f2 !important;
        border-color: #ffd9d4 !important;
    }
    .tpu-mobile-user-popover__action-icon {
        width: 20px !important;
        height: 20px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 20px !important;
    }
    .tpu-mobile-user-popover__action-label {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    .tpu-mobile-user-popover__empty {
        padding: 16px !important;
        color: var(--tpu-muted) !important;
        font-size: 13px !important;
    }

}

@media (min-width: 921px) {
    #tpu-mobile-user-popover { display: none !important; }
}


/* ============================================================
   PWA INSTALL EXPERIENCE V1.9
   ============================================================ */
#tpu-pwa-install-banner {
    position: fixed;
    z-index: 2600;
    left: 18px;
    right: 18px;
    bottom: max(18px, env(safe-area-inset-bottom));
    margin: 0 auto;
    max-width: 680px;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 20px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 22px 60px rgba(15,23,42,.22);
    backdrop-filter: blur(16px);
    color: var(--tpu-text);
}
.tpu-pwa-install-banner__icon {
    width: 56px;
    height: 56px;
    border-radius: 15px;
    box-shadow: 0 7px 18px rgba(15,23,42,.14);
}
.tpu-pwa-install-banner__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tpu-pwa-install-banner__copy strong {
    font-size: 16px;
    line-height: 1.2;
}
.tpu-pwa-install-banner__copy span {
    color: var(--tpu-muted);
    font-size: 13px;
    line-height: 1.35;
}
.tpu-pwa-install-banner__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tpu-pwa-install-banner__actions button {
    border: 0;
    border-radius: 11px;
    min-height: 42px;
    padding: 0 14px;
    font-weight: 750;
    cursor: pointer;
}
.tpu-pwa-install-banner__later {
    background: #eef2f7;
    color: #475569;
}
.tpu-pwa-install-banner__install {
    background: linear-gradient(135deg, var(--tpu-primary), var(--tpu-primary-dark));
    color: #fff;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--tpu-primary) 30%, transparent);
}
.tpu-mobile-user-popover__action.is-pwa-install {
    background: color-mix(in srgb, var(--tpu-primary) 9%, #fff) !important;
    color: var(--tpu-primary) !important;
}

@media (max-width: 680px) {
    #tpu-pwa-install-banner {
        left: 10px;
        right: 10px;
        bottom: max(10px, env(safe-area-inset-bottom));
        grid-template-columns: 48px minmax(0, 1fr);
        border-radius: 18px;
        padding: 12px;
    }
    .tpu-pwa-install-banner__icon { width: 48px; height: 48px; border-radius: 13px; }
    .tpu-pwa-install-banner__actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
    .tpu-pwa-install-banner__actions button { flex: 1 1 0; }
}


/* ============================================================
   MOBILE PROJECT TIME-SPENT EDITOR V1.9.5
   ============================================================ */
@media (max-width: 820px) {
    .tpu-mobile-project-time-source {
        display: none !important;
    }
    tr.tpu-mobile-project-time-editor-row {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 11px !important;
    }
    tr.tpu-mobile-project-time-editor-row > td.tpu-mobile-line-field {
        grid-column: 1 / -1 !important;
        padding: 14px !important;
    }
    tr.tpu-mobile-project-time-editor-row > td.tpu-mobile-project-time-date,
    tr.tpu-mobile-project-time-editor-row > td.tpu-mobile-project-time-duration {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
    }
    tr.tpu-mobile-project-time-editor-row > td.tpu-mobile-project-time-date::before,
    tr.tpu-mobile-project-time-editor-row > td.tpu-mobile-project-time-duration::before {
        flex: 0 0 100% !important;
        width: 100% !important;
        margin-bottom: 2px !important;
    }
    tr.tpu-mobile-project-time-editor-row > td.tpu-mobile-project-time-date select,
    tr.tpu-mobile-project-time-editor-row > td.tpu-mobile-project-time-date input:not([type="hidden"]),
    tr.tpu-mobile-project-time-editor-row > td.tpu-mobile-project-time-duration select,
    tr.tpu-mobile-project-time-editor-row > td.tpu-mobile-project-time-duration input:not([type="hidden"]) {
        width: auto !important;
        min-width: 64px !important;
        max-width: 100% !important;
        flex: 1 1 70px !important;
    }
    tr.tpu-mobile-project-time-editor-row > td.tpu-mobile-project-time-date .select2-container,
    tr.tpu-mobile-project-time-editor-row > td.tpu-mobile-project-time-duration .select2-container {
        width: auto !important;
        min-width: 82px !important;
        flex: 1 1 90px !important;
    }
    tr.tpu-mobile-project-time-editor-row > td.tpu-mobile-project-time-note textarea {
        min-height: 105px !important;
        resize: vertical !important;
    }
    tr.tpu-mobile-project-time-editor-row > td.tpu-mobile-project-time-actions,
    tr.tpu-mobile-project-time-editor-row > td.tpu-mobile-line-submit {
        position: sticky !important;
        bottom: -1px !important;
        z-index: 5 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, .72fr) !important;
        gap: 10px !important;
        padding: 16px 0 4px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: linear-gradient(180deg, rgba(244,247,251,0), #f4f7fb 28%) !important;
        box-shadow: none !important;
    }
    tr.tpu-mobile-project-time-editor-row > td.tpu-mobile-line-submit input[type="submit"],
    tr.tpu-mobile-project-time-editor-row > td.tpu-mobile-line-submit button[type="submit"] {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 50px !important;
        margin: 0 !important;
        border-radius: 14px !important;
        font-size: 15px !important;
        font-weight: 800 !important;
    }
    tr.tpu-mobile-project-time-editor-row > td.tpu-mobile-line-submit input[name="save"],
    tr.tpu-mobile-project-time-editor-row > td.tpu-mobile-line-submit button[name="save"] {
        border: 0 !important;
        background: linear-gradient(135deg, var(--tpu-primary), var(--tpu-accent)) !important;
        color: #fff !important;
        box-shadow: 0 9px 24px color-mix(in srgb, var(--tpu-primary) 20%, transparent) !important;
    }
    tr.tpu-mobile-project-time-editor-row > td.tpu-mobile-line-submit input[name="cancel"],
    tr.tpu-mobile-project-time-editor-row > td.tpu-mobile-line-submit button[name="cancel"] {
        background: #fff !important;
        color: #475569 !important;
        border: 1px solid #d9e2ec !important;
        box-shadow: none !important;
    }
}


/* ============================================================
   MOBILE PROJECT TIME-SPENT DURATION FIX V1.9.5
   Dolibarr select_duration(typehour=text) renders:
   [hours] : [minutes] inside span.nowraponall. On narrow screens,
   the native nowrap/maxwidth rules can push the minute field outside.
   ============================================================ */
@media (max-width: 820px) {
    tr.tpu-mobile-project-time-editor-row > td.tpu-mobile-project-time-duration {
        display: block !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    tr.tpu-mobile-project-time-editor-row > td.tpu-mobile-project-time-duration::before {
        display: block !important;
        width: 100% !important;
        margin: 0 0 10px !important;
    }

    tr.tpu-mobile-project-time-editor-row > td.tpu-mobile-project-time-duration > span.nowraponall,
    tr.tpu-mobile-project-time-editor-row > td.tpu-mobile-project-time-duration span.nowraponall:has(input[name="timespent_durationhour"]) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        white-space: normal !important;
        font-size: 0 !important; /* hide the native ':' text node */
        box-sizing: border-box !important;
    }

    tr.tpu-mobile-project-time-editor-row > td.tpu-mobile-project-time-duration input[name="timespent_durationhour"],
    tr.tpu-mobile-project-time-editor-row > td.tpu-mobile-project-time-duration input[name="timespent_durationmin"] {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
        text-align: center !important;
    }

    tr.tpu-mobile-project-time-editor-row > td.tpu-mobile-project-time-duration input[name="timespent_durationhour"] {
        grid-column: 1 !important;
    }
    tr.tpu-mobile-project-time-editor-row > td.tpu-mobile-project-time-duration input[name="timespent_durationmin"] {
        grid-column: 2 !important;
    }
}


/* ============================================================
   MOBILE CONTENT GUTTERS V1.9.5
   Dolibarr already gives .fiche small left/right margins on small screens.
   Some TekynodUI responsive modes later forced width:100%, which made the
   element width + native margins overflow to the right. Keep a real symmetric
   application gutter instead of compensating with horizontal scrolling.
   ============================================================ */
@media (max-width: 820px) {
    body:not(.tpu-dashboard-page) #id-right > .fiche,
    body.tpu-mobile-list-active #id-right .fiche:has(.tpu-mobile-cards),
    body.tpu-mobile-document-lines-active #id-right > .fiche,
    body.tpu-mobile-expense-lines-active #id-right > .fiche {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin-inline: 16px !important;
        box-sizing: border-box !important;
    }

    /* The card/list wrappers must fill the fiche, not the viewport. */
    body.tpu-mobile-list-active .tpu-mobile-card-wrapper,
    body.tpu-mobile-list-active table.tpu-mobile-cards,
    body.tpu-mobile-document-lines-active .tpu-document-lines-wrapper,
    body.tpu-mobile-document-lines-active table.tpu-document-lines-table {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Avoid an old fixed/min width child re-expanding the fiche. */
    body:not(.tpu-dashboard-page) #id-right > .fiche > *,
    body.tpu-mobile-list-active #id-right .fiche:has(.tpu-mobile-cards) > * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}


/* Mobile filter field labels - v1.9.5 */
@media (max-width: 820px) {
    table.tpu-mobile-cards tr.tpu-filter-row > td.tpu-mobile-filter-labelled,
    table.tpu-mobile-cards tr.tpu-filter-row > th.tpu-mobile-filter-labelled {
        position: relative !important;
        padding-top: 24px !important;
        margin-bottom: 3px !important;
    }
    table.tpu-mobile-cards tr.tpu-filter-row > td.tpu-mobile-filter-labelled::before,
    table.tpu-mobile-cards tr.tpu-filter-row > th.tpu-mobile-filter-labelled::before {
        content: attr(data-tpu-filter-label);
        position: absolute;
        top: 2px;
        left: 1px;
        right: 1px;
        display: block;
        color: #64748b;
        font-size: 10px;
        line-height: 1.15;
        font-weight: 800;
        letter-spacing: .075em;
        text-transform: uppercase;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        pointer-events: none;
    }
    table.tpu-mobile-cards tr.tpu-filter-row > td.tpu-mobile-filter-labelled input,
    table.tpu-mobile-cards tr.tpu-filter-row > td.tpu-mobile-filter-labelled select,
    table.tpu-mobile-cards tr.tpu-filter-row > td.tpu-mobile-filter-labelled .select2-container,
    table.tpu-mobile-cards tr.tpu-filter-row > th.tpu-mobile-filter-labelled input,
    table.tpu-mobile-cards tr.tpu-filter-row > th.tpu-mobile-filter-labelled select,
    table.tpu-mobile-cards tr.tpu-filter-row > th.tpu-mobile-filter-labelled .select2-container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}


/* Mobile filter technical/action cells - v1.9.5 */
@media (max-width: 820px) {
    table.tpu-mobile-cards tr.tpu-filter-row > td.tpu-mobile-filter-actions,
    table.tpu-mobile-cards tr.tpu-filter-row > th.tpu-mobile-filter-actions {
        padding-top: 8px !important;
        margin-top: 2px !important;
        text-align: center !important;
        font-size: 0 !important;
        line-height: 1 !important;
    }
    table.tpu-mobile-cards tr.tpu-filter-row > td.tpu-mobile-filter-actions::before,
    table.tpu-mobile-cards tr.tpu-filter-row > th.tpu-mobile-filter-actions::before {
        content: none !important;
        display: none !important;
    }
    table.tpu-mobile-cards tr.tpu-filter-row > td.tpu-mobile-filter-actions .dropdown,
    table.tpu-mobile-cards tr.tpu-filter-row > th.tpu-mobile-filter-actions .dropdown,
    table.tpu-mobile-cards tr.tpu-filter-row > td.tpu-mobile-filter-actions .multiselectcheckboxselectedfields,
    table.tpu-mobile-cards tr.tpu-filter-row > th.tpu-mobile-filter-actions .multiselectcheckboxselectedfields,
    table.tpu-mobile-cards tr.tpu-filter-row > td.tpu-mobile-filter-actions input[name="selectedfields"],
    table.tpu-mobile-cards tr.tpu-filter-row > th.tpu-mobile-filter-actions input[name="selectedfields"] {
        display: none !important;
    }
    table.tpu-mobile-cards tr.tpu-filter-row > td.tpu-mobile-filter-actions button,
    table.tpu-mobile-cards tr.tpu-filter-row > th.tpu-mobile-filter-actions button,
    table.tpu-mobile-cards tr.tpu-filter-row > td.tpu-mobile-filter-actions input[type="submit"],
    table.tpu-mobile-cards tr.tpu-filter-row > th.tpu-mobile-filter-actions input[type="submit"] {
        font-size: 16px !important;
    }
}


/* ============================================================
   MOBILE TICKET UX V2.0.0
   ============================================================ */
@media (max-width: 820px) {
    /* Ticket list: make the subject the visual heart of the card while
       retaining reference/status in the card header. */
    table.tpu-mobile-cards.tpu-ticket-list tr.tpu-mobile-row > td.tpu-ticket-subject {
        display: block !important;
        padding: 7px 3px 9px !important;
        font-size: 15px !important;
        font-weight: 760 !important;
        line-height: 1.35 !important;
    }
    table.tpu-mobile-cards.tpu-ticket-list tr.tpu-mobile-row > td.tpu-ticket-subject::before {
        display: block !important;
        max-width: none !important;
        margin-bottom: 3px !important;
    }
    table.tpu-mobile-cards.tpu-ticket-list tr.tpu-mobile-row > td.tpu-ticket-assigned,
    table.tpu-mobile-cards.tpu-ticket-list tr.tpu-mobile-row > td.tpu-ticket-party,
    table.tpu-mobile-cards.tpu-ticket-list tr.tpu-mobile-row > td.tpu-ticket-severity {
        min-width: 0 !important;
    }
    table.tpu-mobile-cards.tpu-ticket-list tr.tpu-mobile-row > td.tpu-ticket-assigned img,
    table.tpu-mobile-cards.tpu-ticket-list tr.tpu-mobile-row > td.tpu-ticket-party img {
        width: 24px !important;
        height: 24px !important;
        object-fit: cover !important;
        border-radius: 50% !important;
    }

    /* Create/edit ticket form becomes a native-looking mobile stack. */
    body.mod-ticket.page-card.tpu-ticket-mobile-form-page #form_create_ticket {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body.mod-ticket.page-card .tpu-ticket-mobile-form table.tpu-ticket-mobile-table,
    body.mod-ticket.page-card .tpu-ticket-mobile-form table.tpu-ticket-mobile-table > tbody,
    body.mod-ticket.page-card .tpu-ticket-mobile-message-form table.tpu-ticket-mobile-table,
    body.mod-ticket.page-card .tpu-ticket-mobile-message-form table.tpu-ticket-mobile-table > tbody {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .tpu-ticket-mobile-row {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 0 11px !important;
        padding: 14px !important;
        border: 1px solid #dfe7f0 !important;
        border-radius: 16px !important;
        background: #fff !important;
        box-shadow: 0 5px 18px rgba(15,23,42,.045) !important;
        box-sizing: border-box !important;
    }
    .tpu-ticket-mobile-row > .tpu-ticket-mobile-cell {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        overflow: visible !important;
    }
    .tpu-ticket-mobile-row > .tpu-ticket-mobile-label {
        margin: 0 0 8px !important;
        color: #6f7f93 !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        letter-spacing: .07em !important;
        text-transform: uppercase !important;
    }
    .tpu-ticket-mobile-row--message > .tpu-ticket-mobile-label,
    .tpu-ticket-mobile-row--full > .tpu-ticket-mobile-label:empty {
        display: none !important;
    }
    .tpu-ticket-mobile-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="image"]),
    .tpu-ticket-mobile-form select,
    .tpu-ticket-mobile-form textarea,
    .tpu-ticket-mobile-form .select2-container,
    .tpu-ticket-mobile-message-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="image"]),
    .tpu-ticket-mobile-message-form select,
    .tpu-ticket-mobile-message-form textarea,
    .tpu-ticket-mobile-message-form .select2-container {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .tpu-ticket-mobile-form input[type="text"],
    .tpu-ticket-mobile-form select,
    .tpu-ticket-mobile-message-form input[type="text"],
    .tpu-ticket-mobile-message-form select {
        min-height: 48px !important;
        border-radius: 12px !important;
    }
    .tpu-ticket-mobile-form input[type="file"],
    .tpu-ticket-mobile-message-form input[type="file"] {
        display: block !important;
        width: 100% !important;
        margin: 0 0 9px !important;
        padding: 10px !important;
        border: 1px dashed #cbd7e5 !important;
        border-radius: 12px !important;
        background: #f8fafc !important;
    }
    .tpu-ticket-mobile-form .cke,
    .tpu-ticket-mobile-form .tox,
    .tpu-ticket-mobile-form .mce-container,
    .tpu-ticket-mobile-message-form .cke,
    .tpu-ticket-mobile-message-form .tox,
    .tpu-ticket-mobile-message-form .mce-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .tpu-ticket-mobile-form textarea[name="message"],
    .tpu-ticket-mobile-message-form textarea[name="message"] {
        min-height: 180px !important;
    }
    .tpu-ticket-mobile-row--checkbox > .tpu-ticket-mobile-value {
        display: flex !important;
        align-items: center !important;
        gap: 9px !important;
        flex-wrap: wrap !important;
    }
    .tpu-ticket-mobile-row--checkbox input[type="checkbox"] {
        width: 22px !important;
        height: 22px !important;
        flex: 0 0 22px !important;
    }

    .tpu-ticket-mobile-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, .72fr) !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 14px 0 0 !important;
        padding: 12px 0 max(6px, env(safe-area-inset-bottom)) !important;
        box-sizing: border-box !important;
    }
    .tpu-ticket-mobile-actions input[type="submit"],
    .tpu-ticket-mobile-actions button[type="submit"],
    .tpu-ticket-mobile-actions .button,
    .tpu-ticket-mobile-actions .butAction {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 50px !important;
        margin: 0 !important;
        border-radius: 14px !important;
        font-size: 15px !important;
        font-weight: 800 !important;
    }

    /* Ticket reply/message form: full-screen editor like the other TekynodUI
       mobile editors, while preserving Dolibarr's native form and handlers. */
    body.tpu-ticket-message-modal-open .tpu-ticket-mobile-message-form {
        position: fixed !important;
        inset: 0 !important;
        z-index: 2100 !important;
        display: block !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        margin: 0 !important;
        padding: 0 18px calc(18px + env(safe-area-inset-bottom)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: #f4f7fb !important;
        box-sizing: border-box !important;
    }
    .tpu-ticket-message-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 8 !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 14px !important;
        margin: 0 -18px 18px !important;
        padding: calc(17px + env(safe-area-inset-top)) 18px 17px !important;
        background: rgba(255,255,255,.96) !important;
        border-bottom: 1px solid #dfe7f0 !important;
        box-shadow: 0 5px 20px rgba(15,23,42,.06) !important;
        backdrop-filter: blur(10px) !important;
    }
    .tpu-ticket-message-header__title {
        color: #1f2e43 !important;
        font-size: 21px !important;
        font-weight: 820 !important;
        line-height: 1.15 !important;
    }
    .tpu-ticket-message-header__hint {
        margin-top: 5px !important;
        color: #708095 !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
    }
    .tpu-ticket-message-header__close {
        width: 44px !important;
        height: 44px !important;
        flex: 0 0 44px !important;
        border: 1px solid #dfe7f0 !important;
        border-radius: 50% !important;
        background: #fff !important;
        color: #405269 !important;
        font-size: 29px !important;
        line-height: 1 !important;
        box-shadow: 0 4px 13px rgba(15,23,42,.06) !important;
    }

    /* Ticket card itself: collapse the desktop two-column layout. */
    body.mod-ticket.page-card .tpu-ticket-mobile-card {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    body.mod-ticket.page-card .tpu-ticket-mobile-half {
        float: none !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 12px !important;
        padding: 0 !important;
    }
    body.mod-ticket.page-card table.tpu-ticket-detail-table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }
    body.mod-ticket.page-card table.tpu-ticket-detail-table > tbody > tr > td {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        min-width: 0 !important;
    }
    body.mod-ticket.page-card table.tpu-ticket-detail-table > tbody > tr > td:first-child {
        width: 42% !important;
        color: #738297 !important;
        font-size: 12px !important;
        font-weight: 720 !important;
    }
    body.mod-ticket.page-card .tpu-ticket-card-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
        width: 100% !important;
    }
    body.mod-ticket.page-card .tpu-ticket-card-actions .butAction,
    body.mod-ticket.page-card .tpu-ticket-card-actions .butActionDelete {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 46px !important;
        margin: 0 !important;
        white-space: normal !important;
        text-align: center !important;
    }
}


/* V2.0.0 - Never expose technical/helper cells when a desktop list becomes
   a mobile card. Some hooks/extrafields keep formula source in table cells. */
@media (max-width: 820px) {
    table.tpu-mobile-cards tr.tpu-mobile-row > td.tpu-mobile-technical,
    table.tpu-mobile-cards.tpu-ticket-list tr.tpu-mobile-row > td.tpu-mobile-technical {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
    }
}


/* ============================================================
   PWA UPDATE AVAILABLE V2.0.1
   ============================================================ */
#tpu-pwa-update-banner {
    position: fixed;
    left: 18px;
    right: 18px;
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 4200;
    max-width: 760px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid rgba(36,88,216,.18);
    border-radius: 18px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 20px 55px rgba(15,23,42,.22);
    backdrop-filter: blur(14px);
}
.tpu-pwa-update-banner__icon {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 5px 14px rgba(15,23,42,.12);
}
.tpu-pwa-update-banner__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.tpu-pwa-update-banner__copy strong {
    color: var(--tpu-text);
    font-size: 15px;
    font-weight: 800;
}
.tpu-pwa-update-banner__copy span {
    color: var(--tpu-muted);
    font-size: 13px;
    line-height: 1.35;
}
.tpu-pwa-update-banner__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tpu-pwa-update-banner__actions button {
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 11px;
    border: 1px solid var(--tpu-border-strong);
    font-weight: 750;
    cursor: pointer;
}
.tpu-pwa-update-banner__later {
    background: #fff;
    color: var(--tpu-muted);
}
.tpu-pwa-update-banner__install {
    border-color: transparent !important;
    color: #fff;
    background: linear-gradient(135deg, var(--tpu-primary), var(--tpu-primary-dark));
    box-shadow: 0 7px 16px rgba(36,88,216,.22);
}
.tpu-pwa-update-banner__install:disabled { opacity: .7; cursor: wait; }
.tpu-mobile-user-popover__action.is-pwa-update {
    background: color-mix(in srgb, var(--tpu-primary) 8%, #fff);
    color: var(--tpu-primary) !important;
}
@media (max-width: 620px) {
    #tpu-pwa-update-banner {
        left: 12px;
        right: 12px;
        bottom: max(12px, env(safe-area-inset-bottom));
        grid-template-columns: auto minmax(0, 1fr);
        gap: 11px;
        padding: 13px;
    }
    .tpu-pwa-update-banner__icon { width: 46px; height: 46px; border-radius: 12px; }
    .tpu-pwa-update-banner__actions {
        grid-column: 1 / -1;
        width: 100%;
    }
    .tpu-pwa-update-banner__actions button { flex: 1 1 0; }
}


/* ============================================================
   V2.0.3 - DESKTOP KPI BADGES + ACTION DROPDOWN READABILITY
   ============================================================ */
@media (min-width: 921px) {
    /* Dashboard KPI cards: keep counters and warning pills inside the card. */
    .opened-dash-board-wrap .info-box,
    .opened-dash-board-wrap .info-box-sm {
        position: relative !important;
    }

    .opened-dash-board-wrap .info-box .info-box-content,
    .opened-dash-board-wrap .info-box-sm .info-box-content {
        width: calc(100% - 88px) !important;
        max-width: calc(100% - 88px) !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding-right: 18px !important;
        overflow: visible !important;
    }

    .opened-dash-board-wrap .info-box-lines,
    .opened-dash-board-wrap .info-box-line {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .opened-dash-board-wrap .info-box-line {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        overflow: visible !important;
    }

    .opened-dash-board-wrap .info-box-line-text {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        padding-right: 2px !important;
    }

    .opened-dash-board-wrap .info-box-line > .badge,
    .opened-dash-board-wrap .info-box-line > [class*="badge"],
    .opened-dash-board-wrap .info-box-line .badge {
        flex: 0 0 auto !important;
        max-width: none !important;
        white-space: nowrap !important;
        position: static !important;
        right: auto !important;
        left: auto !important;
        transform: none !important;
        margin-right: 0 !important;
    }

    .opened-dash-board-wrap .info-box-line-text + .badge,
    .opened-dash-board-wrap .info-box-line-text + [class*="badge"] {
        margin-left: auto !important;
    }

    /* Action dropdowns used below documents (Subtotal, Title, etc.). */
    .tabsAction .dropdown-menu,
    .tabsAction .dropdown-content,
    .tabsAction [class*="dropdown-menu"],
    .tabsAction [class*="dropdown-content"] {
        min-width: 250px !important;
        padding: 7px !important;
        background: #ffffff !important;
        border: 1px solid var(--tpu-border) !important;
        border-radius: 11px !important;
        box-shadow: 0 14px 34px rgba(15,23,42,.16) !important;
        overflow: hidden !important;
    }

    .tabsAction .dropdown-menu > a,
    .tabsAction .dropdown-menu > li > a,
    .tabsAction .dropdown-content > a,
    .tabsAction .dropdown-content > li > a,
    .tabsAction .dropdown-menu .butAction,
    .tabsAction .dropdown-content .butAction,
    .dropdown-menu a.butAction,
    .dropdown-content a.butAction {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 38px !important;
        box-sizing: border-box !important;
        margin: 2px 0 !important;
        padding: 9px 12px !important;
        border: 0 !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        color: #243247 !important;
        box-shadow: none !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        text-align: left !important;
        white-space: normal !important;
        transform: none !important;
        filter: none !important;
        text-decoration: none !important;
    }

    .tabsAction .dropdown-menu > a:hover,
    .tabsAction .dropdown-menu > li > a:hover,
    .tabsAction .dropdown-content > a:hover,
    .tabsAction .dropdown-content > li > a:hover,
    .tabsAction .dropdown-menu .butAction:hover,
    .tabsAction .dropdown-content .butAction:hover,
    .dropdown-menu a.butAction:hover,
    .dropdown-content a.butAction:hover {
        background: color-mix(in srgb, var(--tpu-primary) 9%, #ffffff) !important;
        color: var(--tpu-primary-dark) !important;
        box-shadow: none !important;
        transform: none !important;
        filter: none !important;
    }

    .tabsAction .dropdown-menu > * + *,
    .tabsAction .dropdown-content > * + * {
        border-top: 1px solid rgba(226,232,240,.68) !important;
    }
}

/* ============================================================
   V2.0.4 - MOBILE ACTION DROPDOWN READABILITY
   ============================================================ */
@media (max-width: 920px) {
    .tabsAction .dropdown-menu,
    .tabsAction .dropdown-content,
    .tabsAction [class*="dropdown-menu"],
    .tabsAction [class*="dropdown-content"],
    #mainbody .dropdown-menu,
    #mainbody .dropdown-content {
        min-width: min(280px, calc(100vw - 26px)) !important;
        max-width: calc(100vw - 26px) !important;
        padding: 6px !important;
        background: #ffffff !important;
        border: 1px solid var(--tpu-border) !important;
        border-radius: 14px !important;
        box-shadow: 0 16px 34px rgba(15,23,42,.18) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .tabsAction .dropdown-menu > a,
    .tabsAction .dropdown-menu > li > a,
    .tabsAction .dropdown-content > a,
    .tabsAction .dropdown-content > li > a,
    .tabsAction .dropdown-menu .butAction,
    .tabsAction .dropdown-content .butAction,
    #mainbody .dropdown-menu a.butAction,
    #mainbody .dropdown-content a.butAction,
    #mainbody .dropdown-menu > li > a,
    #mainbody .dropdown-content > li > a,
    #mainbody .dropdown-menu > a,
    #mainbody .dropdown-content > a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-height: 46px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 12px 14px !important;
        border: 0 !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        color: #243247 !important;
        box-shadow: none !important;
        font-weight: 650 !important;
        font-size: 15px !important;
        line-height: 1.35 !important;
        text-align: left !important;
        white-space: normal !important;
        text-decoration: none !important;
        transform: none !important;
        filter: none !important;
    }

    .tabsAction .dropdown-menu > a:hover,
    .tabsAction .dropdown-menu > li > a:hover,
    .tabsAction .dropdown-content > a:hover,
    .tabsAction .dropdown-content > li > a:hover,
    .tabsAction .dropdown-menu .butAction:hover,
    .tabsAction .dropdown-content .butAction:hover,
    #mainbody .dropdown-menu a.butAction:hover,
    #mainbody .dropdown-content a.butAction:hover,
    #mainbody .dropdown-menu > li > a:hover,
    #mainbody .dropdown-content > li > a:hover,
    #mainbody .dropdown-menu > a:hover,
    #mainbody .dropdown-content > a:hover {
        background: color-mix(in srgb, var(--tpu-primary) 9%, #ffffff) !important;
        color: var(--tpu-primary-dark) !important;
        box-shadow: none !important;
        transform: none !important;
        filter: none !important;
    }

    .tabsAction .dropdown-menu > * + *,
    .tabsAction .dropdown-content > * + *,
    #mainbody .dropdown-menu > * + *,
    #mainbody .dropdown-content > * + * {
        border-top: 1px solid rgba(226,232,240,.75) !important;
    }
}

/* ============================================================
   V2.0.5 - MOBILE DROPDOWN HARMONIZATION & VIEWPORT CONTAINMENT
   ============================================================ */
@media (max-width: 920px) {
    /* Keep content-area dropdowns inside the viewport on mobile. */
    #mainbody .dropdown,
    #mainbody .dropmenu,
    #mainbody .menu-dropdown,
    #mainbody [class*="dropdown"] {
        box-sizing: border-box;
    }

    #mainbody .dropdown-menu,
    #mainbody .dropdown-content,
    #mainbody [class*="dropdown-menu"],
    #mainbody [class*="dropdown-content"],
    #mainbody .dropmenu,
    #mainbody .menu-dropdown {
        left: auto !important;
        right: 0 !important;
        inset-inline-start: auto !important;
        inset-inline-end: 0 !important;
        min-width: min(300px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        width: max-content;
        box-sizing: border-box !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        z-index: 1200 !important;
    }

    /* If a dropdown is inside an action row, let it align from the right edge cleanly. */
    #mainbody .tabsAction,
    #mainbody .tabsAction > *,
    #mainbody .tabBar,
    #mainbody .divButAction {
        position: relative;
    }

    #mainbody .tabsAction .dropdown-menu,
    #mainbody .tabsAction .dropdown-content,
    #mainbody .tabsAction [class*="dropdown-menu"],
    #mainbody .tabsAction [class*="dropdown-content"],
    #mainbody .tabsAction .dropmenu,
    #mainbody .tabsAction .menu-dropdown,
    #mainbody .tabBar .dropdown-menu,
    #mainbody .tabBar .dropdown-content,
    #mainbody .divButAction .dropdown-menu,
    #mainbody .divButAction .dropdown-content {
        left: auto !important;
        right: 0 !important;
        inset-inline-start: auto !important;
        inset-inline-end: 0 !important;
    }

    /* Consistent readable items on all mobile dropdowns in page content. */
    #mainbody .dropdown-menu > a,
    #mainbody .dropdown-menu > li > a,
    #mainbody .dropdown-content > a,
    #mainbody .dropdown-content > li > a,
    #mainbody [class*="dropdown-menu"] > a,
    #mainbody [class*="dropdown-menu"] > li > a,
    #mainbody [class*="dropdown-content"] > a,
    #mainbody [class*="dropdown-content"] > li > a,
    #mainbody .dropmenu > a,
    #mainbody .dropmenu > li > a,
    #mainbody .menu-dropdown > a,
    #mainbody .menu-dropdown > li > a,
    #mainbody .dropdown-menu a.butAction,
    #mainbody .dropdown-content a.butAction {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        text-align: left !important;
    }
}

/* ============================================================
   V2.0.7 - MOBILE PRODUCT / SERVICE ENTRY MODE (STRUCTURAL FIX)
   ============================================================ */
@media (max-width: 920px) {
    /* The two native Dolibarr entry-mode spans become independent cards.
       No duplicated labels, no absolute positioning, no floats. */
    .tpu-mobile-line-modal .linecoldescription span.tpu-mobile-entry-mode {
        position: relative !important;
        float: none !important;
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 0 12px !important;
        padding: 13px !important;
        border: 1px solid #dfe7f0 !important;
        border-radius: 14px !important;
        background: #f8fafc !important;
        white-space: normal !important;
        overflow: visible !important;
        column-gap: 10px !important;
        row-gap: 9px !important;
        align-items: center !important;
    }

    .tpu-mobile-line-modal .linecoldescription span.tpu-mobile-entry-mode::before {
        content: attr(data-tpu-entry-label);
        grid-column: 1 / -1;
        display: block;
        min-width: 0;
        margin: 0 0 1px;
        color: #66768a;
        font-size: 11px;
        font-weight: 800;
        line-height: 1.25;
        letter-spacing: .045em;
        text-transform: uppercase;
    }

    .tpu-mobile-line-modal .linecoldescription span.tpu-mobile-entry-mode.is-selected {
        border-color: color-mix(in srgb, var(--tpu-primary) 28%, #dfe7f0) !important;
        background: color-mix(in srgb, var(--tpu-primary) 4%, #f8fafc) !important;
    }

    /* Free/custom line: radio in the left column, original Dolibarr label/select
       in the remaining width. */
    .tpu-mobile-line-modal span.tpu-mobile-entry-mode-free {
        grid-template-columns: 34px minmax(0, 1fr) !important;
        grid-template-areas:
            "heading heading"
            "radio field" !important;
    }
    .tpu-mobile-line-modal span.tpu-mobile-entry-mode-free::before { grid-area: heading; }
    .tpu-mobile-line-modal span.tpu-mobile-entry-mode-free > input#prod_entry_mode_free[type="radio"] {
        grid-area: radio !important;
        position: static !important;
        float: none !important;
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        accent-color: var(--tpu-primary);
        align-self: center !important;
    }
    .tpu-mobile-line-modal span.tpu-mobile-entry-mode-free > label {
        grid-area: field !important;
        position: static !important;
        float: none !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Use the original free-line type field, but render it as a native mobile
       select so the selected Product/Service text is always visible. */
    .tpu-mobile-line-modal span.tpu-mobile-entry-mode-free select#select_type.tpu-mobile-native-line-type,
    .tpu-mobile-line-modal span.tpu-mobile-entry-mode-free select.tpu-mobile-native-line-type,
    .tpu-mobile-line-modal span.tpu-mobile-entry-mode-free select[name="type"].tpu-mobile-native-line-type {
        display: block !important;
        position: static !important;
        float: none !important;
        clip: auto !important;
        clip-path: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 38px 0 12px !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
        border: 1px solid var(--tpu-border-strong) !important;
        border-radius: 11px !important;
        background-color: #fff !important;
        color: #243247 !important;
        font-size: 16px !important;
        line-height: normal !important;
        box-sizing: border-box !important;
        -webkit-appearance: menulist !important;
        appearance: auto !important;
    }
    .tpu-mobile-line-modal span.tpu-mobile-entry-mode-free .tpu-mobile-hide-line-type-select2,
    .tpu-mobile-line-modal span.tpu-mobile-entry-mode-free select.tpu-mobile-native-line-type + .select2-container {
        display: none !important;
    }

    /* Predefined/catalogue line: radio + catalogue + optional add button. */
    .tpu-mobile-line-modal span.tpu-mobile-entry-mode-predef {
        grid-template-columns: 34px minmax(0, 1fr) auto !important;
        grid-template-areas:
            "heading heading heading"
            "radio field action" !important;
    }
    .tpu-mobile-line-modal span.tpu-mobile-entry-mode-predef::before { grid-area: heading; }
    .tpu-mobile-line-modal span.tpu-mobile-entry-mode-predef > label[for="prod_entry_mode_predef"] {
        grid-area: radio !important;
        position: static !important;
        float: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .tpu-mobile-line-modal span.tpu-mobile-entry-mode-predef > label[for="prod_entry_mode_predef"] input[type="radio"] {
        position: static !important;
        float: none !important;
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        margin: 0 !important;
        padding: 0 !important;
        accent-color: var(--tpu-primary);
    }
    .tpu-mobile-line-modal span.tpu-mobile-entry-mode-predef > select#idprod,
    .tpu-mobile-line-modal span.tpu-mobile-entry-mode-predef > select#idprodfournprice,
    .tpu-mobile-line-modal span.tpu-mobile-entry-mode-predef > .select2-container {
        grid-area: field !important;
        position: static !important;
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    .tpu-mobile-line-modal span.tpu-mobile-entry-mode-predef > #dropdownAddProductAndService {
        grid-area: action !important;
        position: relative !important;
        float: none !important;
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        align-self: center !important;
    }
    .tpu-mobile-line-modal span.tpu-mobile-entry-mode-predef #dropdownAddProductAndServiceLink {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 42px !important;
        height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 11px !important;
        background: color-mix(in srgb, var(--tpu-primary) 10%, #fff) !important;
        color: var(--tpu-primary) !important;
    }
    .tpu-mobile-line-modal span.tpu-mobile-entry-mode-predef #dropdownAddProductAndServiceLink .fa {
        padding-left: 0 !important;
    }

    /* Dolibarr's surrounding nowrap span and legacy BRs must not constrain the
       new card layout. */
    .tpu-mobile-line-modal .linecoldescription > span.nowraponall {
        white-space: normal !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    .tpu-mobile-line-modal .linecoldescription > br,
    .tpu-mobile-line-modal .linecoldescription span.nowraponall > br {
        display: none !important;
    }

    /* Editor remains below the two choices and spans the full card width. */
    .tpu-mobile-line-modal .linecoldescription .cke,
    .tpu-mobile-line-modal .linecoldescription textarea,
    .tpu-mobile-line-modal .linecoldescription .dolibarr-editor-container {
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ============================================================
   V2.0.8 - MOBILE PRODUCT/SERVICE CHOICES: REAL DOM SEPARATION
   ============================================================ */
@media (max-width: 920px) {
    .tpu-mobile-line-modal .tpu-mobile-entry-choices {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 4px 0 14px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .tpu-mobile-line-modal .tpu-mobile-entry-card {
        display: block !important;
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 12px !important;
        box-sizing: border-box !important;
        border: 1px solid #dfe7f0 !important;
        border-radius: 14px !important;
        background: #f8fafc !important;
        overflow: visible !important;
    }
    .tpu-mobile-line-modal .tpu-mobile-entry-card.is-selected {
        border-color: color-mix(in srgb, var(--tpu-primary) 34%, #dfe7f0) !important;
        background: color-mix(in srgb, var(--tpu-primary) 4%, #f8fafc) !important;
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--tpu-primary) 6%, transparent) !important;
    }
    .tpu-mobile-line-modal .tpu-mobile-entry-card-title {
        display: block !important;
        margin: 0 0 10px !important;
        padding: 0 !important;
        color: #66768a !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        letter-spacing: .045em !important;
        text-transform: uppercase !important;
        white-space: normal !important;
    }
    .tpu-mobile-line-modal .tpu-mobile-entry-card-body {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Free/custom entry: original radio + original label/select. */
    .tpu-mobile-line-modal .tpu-mobile-entry-card-free span.prod_entry_mode_free {
        display: grid !important;
        grid-template-columns: 30px minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
        float: none !important;
        white-space: normal !important;
    }
    .tpu-mobile-line-modal .tpu-mobile-entry-card-free span.prod_entry_mode_free > input#prod_entry_mode_free[type="radio"] {
        position: static !important;
        float: none !important;
        display: block !important;
        width: 24px !important;
        min-width: 24px !important;
        height: 24px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        accent-color: var(--tpu-primary);
    }
    .tpu-mobile-line-modal .tpu-mobile-entry-card-free span.prod_entry_mode_free > label[for="prod_entry_mode_free"] {
        display: block !important;
        position: static !important;
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .tpu-mobile-line-modal .tpu-mobile-entry-card-free select.tpu-mobile-native-line-type {
        display: block !important;
        position: static !important;
        float: none !important;
        clip: auto !important;
        clip-path: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 38px 0 12px !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
        border: 1px solid var(--tpu-border-strong) !important;
        border-radius: 11px !important;
        background: #fff !important;
        color: #243247 !important;
        font-size: 16px !important;
        line-height: normal !important;
        box-sizing: border-box !important;
        -webkit-appearance: menulist !important;
        appearance: auto !important;
    }
    .tpu-mobile-line-modal .tpu-mobile-entry-card-free .tpu-mobile-hide-line-type-select2,
    .tpu-mobile-line-modal .tpu-mobile-entry-card-free select.tpu-mobile-native-line-type + .select2-container {
        display: none !important;
    }

    /* Predefined entry: original radio + catalogue Select2 + optional + action. */
    .tpu-mobile-line-modal .tpu-mobile-entry-card-predef span.prod_entry_mode_predef {
        display: grid !important;
        grid-template-columns: 30px minmax(0, 1fr) 44px !important;
        gap: 10px !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
        float: none !important;
        white-space: normal !important;
    }
    .tpu-mobile-line-modal .tpu-mobile-entry-card-predef span.prod_entry_mode_predef > label[for="prod_entry_mode_predef"] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: static !important;
        float: none !important;
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .tpu-mobile-line-modal .tpu-mobile-entry-card-predef span.prod_entry_mode_predef input#prod_entry_mode_predef[type="radio"] {
        position: static !important;
        float: none !important;
        display: block !important;
        width: 24px !important;
        min-width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
        padding: 0 !important;
        accent-color: var(--tpu-primary);
    }
    .tpu-mobile-line-modal .tpu-mobile-entry-card-predef span.prod_entry_mode_predef > select#idprod,
    .tpu-mobile-line-modal .tpu-mobile-entry-card-predef span.prod_entry_mode_predef > select#idprodfournprice,
    .tpu-mobile-line-modal .tpu-mobile-entry-card-predef span.prod_entry_mode_predef > .select2-container {
        grid-column: 2 !important;
        position: static !important;
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    .tpu-mobile-line-modal .tpu-mobile-entry-card-predef span.prod_entry_mode_predef > #dropdownAddProductAndService {
        grid-column: 3 !important;
        display: block !important;
        position: relative !important;
        float: none !important;
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .tpu-mobile-line-modal .tpu-mobile-entry-card-predef #dropdownAddProductAndServiceLink {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 11px !important;
        background: color-mix(in srgb, var(--tpu-primary) 10%, #fff) !important;
        color: var(--tpu-primary) !important;
    }

    /* The old Dolibarr outer nowrap shell contains only BR/script/hidden helpers
       once the predefined controls have been moved. Keep helpers in DOM but remove
       their visual footprint. */
    .tpu-mobile-line-modal .tpu-mobile-entry-native-remainder {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* Disable all previous 2.0.7 pseudo-card styling if a stale class survives. */
    .tpu-mobile-line-modal .tpu-mobile-entry-card .tpu-mobile-entry-mode::before {
        content: none !important;
        display: none !important;
    }
}

/* ============================================================
   V2.0.9 - MOBILE PREDEFINED PRODUCT ROW FINAL ALIGNMENT
   ============================================================ */
@media (max-width: 920px) {
    .tpu-mobile-line-modal .tpu-mobile-entry-card-predef .tpu-mobile-entry-card-body {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    .tpu-mobile-line-modal .tpu-mobile-predef-row {
        display: grid !important;
        grid-template-columns: 32px minmax(0, 1fr) 48px !important;
        column-gap: 10px !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        position: relative !important;
    }

    .tpu-mobile-line-modal .tpu-mobile-predef-row > .tpu-mobile-predef-radio {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
        float: none !important;
    }

    .tpu-mobile-line-modal .tpu-mobile-predef-row > .tpu-mobile-predef-radio input#prod_entry_mode_predef[type="radio"] {
        display: block !important;
        position: static !important;
        float: none !important;
        width: 24px !important;
        min-width: 24px !important;
        max-width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
        padding: 0 !important;
        accent-color: var(--tpu-primary);
    }

    /* The native select stays in the row so a late Select2 initialisation inserts
       the visual Select2 container at the right place. */
    .tpu-mobile-line-modal .tpu-mobile-predef-row > select#idprod,
    .tpu-mobile-line-modal .tpu-mobile-predef-row > select#idprodfournprice {
        grid-column: 2 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .tpu-mobile-line-modal .tpu-mobile-predef-row > .select2-container,
    .tpu-mobile-line-modal .tpu-mobile-predef-row > .tpu-mobile-predef-select2 {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: block !important;
        position: static !important;
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        align-self: center !important;
    }

    .tpu-mobile-line-modal .tpu-mobile-predef-row > .select2-container .select2-selection--single {
        min-height: 48px !important;
        height: 48px !important;
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    .tpu-mobile-line-modal .tpu-mobile-predef-row > .select2-container .select2-selection__rendered {
        width: 100% !important;
        min-width: 0 !important;
        padding-left: 12px !important;
        padding-right: 36px !important;
        line-height: 46px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .tpu-mobile-line-modal .tpu-mobile-predef-row > #dropdownAddProductAndService,
    .tpu-mobile-line-modal .tpu-mobile-predef-row > .tpu-mobile-predef-add {
        grid-column: 3 !important;
        grid-row: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        float: none !important;
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .tpu-mobile-line-modal .tpu-mobile-predef-row #dropdownAddProductAndServiceLink {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 12px !important;
    }

    /* Empty native shell after its visible controls have been moved into row. */
    .tpu-mobile-line-modal .tpu-mobile-entry-card-predef .tpu-mobile-predef-native-remainder {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
}


/* ============================================================
   V2.0.10 - DESKTOP FICHE SEPARATORS + SELECT2 LABEL VISIBILITY
   ============================================================ */
@media (min-width: 921px) {
    /* Dolibarr uses an empty .underbanner.clearboth as a structural clearfix
       before many card tables. It must not become a visible rounded card. */
    .fichecenter .underbanner.clearboth:empty,
    .fichecenterbis .underbanner.clearboth:empty,
    .fichehalfleft .underbanner.clearboth:empty,
    .fichehalfright .underbanner.clearboth:empty {
        display: block !important;
        width: 100% !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
        clear: both !important;
    }

    /* Ensure Select2 selected labels are never hidden by theme inheritance. */
    .select2-container .select2-selection--single .select2-selection__rendered {
        color: var(--tpu-text) !important;
        opacity: 1 !important;
        visibility: visible !important;
        text-indent: 0 !important;
    }
    .select2-container .select2-selection--single .select2-selection__placeholder {
        color: #94a3b8 !important;
        opacity: 1 !important;
    }
}


/* ============================================================
   V2.0.11 - GLOBAL EMPTY DOLIBARR STRUCTURAL SEPARATORS
   ============================================================ */
/* Dolibarr uses empty .underbanner blocks as structural clearfixes in many
   cards (third parties, products, invoices, payments, documents, HRM, etc.).
   They must remain layout helpers and must never inherit TekynodUI card/chip
   styling. This applies on desktop and mobile, but ONLY when truly empty. */
.underbanner.clearboth:empty,
.underbanner.underbanner-before-box.clearboth:empty,
.fiche .underbanner:empty,
.tabBar .underbanner:empty,
.fichecenter .underbanner:empty,
.fichecenterbis .underbanner:empty,
.fichehalfleft .underbanner:empty,
.fichehalfright .underbanner:empty {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
    overflow: visible !important;
    clear: both !important;
}

/* ============================================================
   V2.0.12 - EXPENSE REPORT DESKTOP FLOW + MOBILE PAYMENTS
   ============================================================ */
/* Keep the structural clearfix invisible, but restore the small vertical
   breathing room the expense-report two-column layout relies on. */
body.tpu-expense-page .underbanner.clearboth:empty,
body.tpu-expense-page .underbanner.underbanner-before-box.clearboth:empty,
body.tpu-expense-page .fiche .underbanner:empty {
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    clear: both !important;
}

@media (min-width: 921px) {
    /* Expense cards use floated/half-width detail blocks. Make sure they start
       below the large reference banner instead of slipping underneath it. */
    body.tpu-expense-page .fichecenter,
    body.tpu-expense-page .fichecenterbis {
        clear: both !important;
        padding-top: 4px !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 920px) {
    /* The native payment table is desktop-oriented. TekynodUI now renders its
       payment entries as mobile cards, avoiding the clipped header seen on
       expense reports. */
    body.tpu-expense-page table.paymenttable.tpu-expense-payment-table {
        display: none !important;
    }

    body.tpu-expense-page .tpu-expense-payment-wrapper {
        overflow: visible !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .tpu-expense-payment-mobile-list {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 8px 0 10px !important;
        box-sizing: border-box !important;
    }
    .tpu-expense-payment-mobile-list[hidden] {
        display: none !important;
    }
    .tpu-expense-payment-mobile-entry-card {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 10px !important;
        padding: 4px 14px !important;
        border: 1px solid #dfe7f0 !important;
        border-radius: 15px !important;
        background: #ffffff !important;
        box-shadow: 0 5px 18px rgba(15,23,42,.045) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    .tpu-expense-payment-mobile-entry-field {
        display: grid !important;
        grid-template-columns: minmax(105px, .85fr) minmax(0, 1.35fr) !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 10px 0 !important;
        border-bottom: 1px solid #edf1f5 !important;
        box-sizing: border-box !important;
    }
    .tpu-expense-payment-mobile-entry-field:last-child {
        border-bottom: 0 !important;
    }
    .tpu-expense-payment-mobile-entry-label {
        min-width: 0 !important;
        color: #7b8796 !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        letter-spacing: .035em !important;
        text-transform: uppercase !important;
        line-height: 1.25 !important;
        overflow-wrap: anywhere !important;
    }
    .tpu-expense-payment-mobile-entry-value {
        min-width: 0 !important;
        color: #1f334b !important;
        font-size: 14px !important;
        font-weight: 650 !important;
        line-height: 1.3 !important;
        text-align: right !important;
        overflow-wrap: anywhere !important;
    }
    .tpu-expense-payment-mobile-entry-value a {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }

    /* Slightly separate payment list/summary from the totals block above. */
    body.tpu-expense-page .tpu-expense-payment-mobile-summary {
        margin-top: 10px !important;
    }
}

/* ============================================================
   V2.0.13 - RESTORE NATIVE UNDERBANNER SPACING WITHOUT "BUBBLES"
   ============================================================ */
/*
 * Dolibarr uses empty .underbanner blocks throughout object cards as real
 * structural separators. TekynodUI must not turn them into rounded cards,
 * but it must preserve their native visual/layout role.
 *
 * Previous 2.0.11/2.0.12 rules removed border + spacing completely, which
 * made adjacent detail tables appear glued to the object banner and could
 * disturb two-column card flow. Restore a subtle separator and breathing
 * room globally, on desktop and mobile, while keeping the element visually
 * flat (no surface, no radius, no shadow).
 */
.underbanner.clearboth:empty,
.fiche .underbanner:empty,
.tabBar .underbanner:empty,
.fichecenter .underbanner:empty,
.fichecenterbis .underbanner:empty,
.fichehalfleft .underbanner:empty,
.fichehalfright .underbanner:empty {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 1px !important;
    min-height: 1px !important;
    max-height: none !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--tpu-border) !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
    overflow: visible !important;
    clear: both !important;
}

/* Dolibarr explicitly uses this variant before statistic/status boxes without
 * the separator line. Keep only a small amount of structural breathing room. */
.underbanner.underbanner-before-box.clearboth:empty,
.fiche .underbanner.underbanner-before-box:empty,
.tabBar .underbanner.underbanner-before-box:empty,
.fichecenter .underbanner.underbanner-before-box:empty,
.fichecenterbis .underbanner.underbanner-before-box:empty,
.fichehalfleft .underbanner.underbanner-before-box:empty,
.fichehalfright .underbanner.underbanner-before-box:empty {
    height: 1px !important;
    min-height: 1px !important;
    max-height: none !important;
    margin: 0 0 6px 0 !important;
    border: 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* On phone/tablet the object card is already more vertically spaced, so use a
 * slightly tighter separator while preserving the same semantics. */
@media (max-width: 920px) {
    .underbanner.clearboth:empty,
    .fiche .underbanner:empty,
    .tabBar .underbanner:empty,
    .fichecenter .underbanner:empty,
    .fichecenterbis .underbanner:empty,
    .fichehalfleft .underbanner:empty,
    .fichehalfright .underbanner:empty {
        margin-bottom: 8px !important;
    }

    .underbanner.underbanner-before-box.clearboth:empty,
    .fiche .underbanner.underbanner-before-box:empty,
    .tabBar .underbanner.underbanner-before-box:empty,
    .fichecenter .underbanner.underbanner-before-box:empty,
    .fichecenterbis .underbanner.underbanner-before-box:empty,
    .fichehalfleft .underbanner.underbanner-before-box:empty,
    .fichehalfright .underbanner.underbanner-before-box:empty {
        margin-bottom: 5px !important;
    }
}

/* ============================================================
   V2.0.15 - MOBILE EMBEDDED TABLES / EVENTS / DASHBOARD CHARTS
   ============================================================ */
@media (max-width: 820px) {
    /* Small read-only tables embedded in cards, dashboards and object history. */
    .tpu-mobile-compact-wrapper,
    .div-table-responsive.tpu-mobile-compact-wrapper,
    .div-table-responsive-no-min.tpu-mobile-compact-wrapper,
    .div-table-responsive-inside.tpu-mobile-compact-wrapper {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        box-sizing: border-box !important;
    }

    table.tpu-mobile-compact-table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        table-layout: auto !important;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        margin: 0 !important;
    }
    table.tpu-mobile-compact-table > tbody,
    table.tpu-mobile-compact-table > thead,
    table.tpu-mobile-compact-table > tfoot {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    table.tpu-mobile-compact-table tr.tpu-mobile-compact-header {
        display: none !important;
    }
    table.tpu-mobile-compact-table tr.tpu-mobile-compact-row {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 8px !important;
        padding: 9px 11px !important;
        border: 1px solid #e1e8f0 !important;
        border-radius: 12px !important;
        background: #fff !important;
        box-shadow: 0 3px 12px rgba(15,23,42,.04) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    table.tpu-mobile-compact-table tr.tpu-mobile-compact-row > td.tpu-mobile-compact-cell {
        display: flex !important;
        align-items: baseline !important;
        justify-content: space-between !important;
        gap: 12px !important;
        float: none !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        padding: 5px 1px !important;
        border: 0 !important;
        background: transparent !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        box-sizing: border-box !important;
    }
    table.tpu-mobile-compact-table tr.tpu-mobile-compact-row > td.tpu-mobile-compact-cell::before {
        content: attr(data-tpu-compact-label);
        flex: 0 0 34%;
        max-width: 34%;
        color: #7b8a9d;
        font-size: 10px;
        line-height: 1.25;
        font-weight: 760;
        letter-spacing: .04em;
        text-transform: uppercase;
    }
    table.tpu-mobile-compact-table tr.tpu-mobile-compact-row > td.tpu-mobile-compact-cell:not([data-tpu-compact-label])::before {
        display: none !important;
    }
    table.tpu-mobile-compact-table tr.tpu-mobile-compact-row > td.tpu-mobile-compact-cell > * {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    table.tpu-mobile-compact-table tr.tpu-mobile-compact-row > td.tpu-mobile-compact-primary,
    table.tpu-mobile-compact-table tr.tpu-mobile-compact-row > td.tpu-mobile-compact-secondary {
        font-weight: 690 !important;
    }
    table.tpu-mobile-compact-table tr.tpu-mobile-compact-row > td.tpu-mobile-compact-primary a {
        color: var(--tpu-primary) !important;
        font-weight: 760 !important;
    }
    table.tpu-mobile-compact-table tr.tpu-mobile-compact-empty-row > td {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        color: #94a3b8 !important;
    }

    /* DolGraph / Chart.js: use vertical space instead of horizontal scrolling. */
    .dolgraph,
    div.dolgraph,
    .tpu-widget-chart .dolgraph,
    .tpu-widget-chart div.dolgraph {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .dolgraphchart,
    .tpu-widget-chart .dolgraphchart,
    .tpu-widget-chart .tpu-chart-holder,
    .tpu-widget-chart .dolgraphchart[id^="placeholder_"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    .tpu-widget-chart .tpu-chart-holder,
    .tpu-widget-chart .dolgraphchart[id^="placeholder_"] {
        height: 300px !important;
        min-height: 300px !important;
        max-height: 300px !important;
    }
    .div-table-responsive:has(.dolgraph),
    .div-table-responsive-no-min:has(.dolgraph),
    .div-table-responsive-inside:has(.dolgraph) {
        overflow-x: hidden !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .tpu-mobile-chart-responsive canvas {
        max-width: 100% !important;
    }

    /* Embedded summary widgets must not impose desktop minimum widths. */
    .fichecenter .div-table-responsive-no-min,
    .fichecenterbis .div-table-responsive-no-min,
    .twocolumns .div-table-responsive-no-min,
    .fichehalfleft .div-table-responsive-no-min,
    .fichehalfright .div-table-responsive-no-min {
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

@media (max-width: 820px) {
    .dolgraph.tpu-mobile-chart-responsive .dolgraphchart,
    div.dolgraph.tpu-mobile-chart-responsive .dolgraphchart {
        height: 310px !important;
        min-height: 310px !important;
        max-height: 310px !important;
    }
}

/* ============================================================
   2.0.0 - MOBILE COMPACT SECTION TITLES + CHART CONSISTENCY
   ============================================================ */
@media (max-width: 820px) {
    .tpu-mobile-compact-section-title {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 18px 0 8px !important;
        padding: 0 2px !important;
        box-sizing: border-box !important;
        color: #243247 !important;
        font-size: 17px !important;
        line-height: 1.3 !important;
        font-weight: 760 !important;
        letter-spacing: -.01em !important;
    }

    /* One geometry model for all Chart.js/DolGraph widgets on phones. The
       variable is calculated from the number of legend items in JS. */
    .dolgraph.tpu-mobile-chart-responsive,
    div.dolgraph.tpu-mobile-chart-responsive {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    .dolgraph.tpu-mobile-chart-responsive .dolgraphchart,
    div.dolgraph.tpu-mobile-chart-responsive .dolgraphchart,
    .tpu-widget-chart .dolgraph.tpu-mobile-chart-responsive .tpu-chart-holder,
    .tpu-widget-chart .dolgraph.tpu-mobile-chart-responsive .dolgraphchart[id^="placeholder_"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: var(--tpu-mobile-chart-height, 350px) !important;
        min-height: var(--tpu-mobile-chart-height, 350px) !important;
        max-height: var(--tpu-mobile-chart-height, 350px) !important;
        padding: 4px 6px 8px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    .dolgraph.tpu-mobile-chart-responsive canvas,
    div.dolgraph.tpu-mobile-chart-responsive canvas {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

/* ============================================================
   2.0.0
   UNIFIED MODULE DASHBOARDS - MOBILE / DESKTOP
   ============================================================ */
.tpu-dashboard-surface {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 820px) {
    /* The same no-horizontal-scroll policy used on Facturation must also be
       valid on Home and every module overview/dashboard. */
    .tpu-dashboard-surface,
    .tpu-dashboard-surface > *,
    .tpu-dashboard-widget,
    .tpu-dashboard-widget > table.boxtable {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .tpu-dashboard-surface .div-table-responsive,
    .tpu-dashboard-surface .div-table-responsive-no-min,
    .tpu-dashboard-surface .div-table-responsive-inside,
    .tpu-dashboard-widget .div-table-responsive,
    .tpu-dashboard-widget .div-table-responsive-no-min,
    .tpu-dashboard-widget .div-table-responsive-inside {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: visible !important;
        box-sizing: border-box !important;
    }

    /* When an external section heading has been generated for a compact card
       table, hide only the original dashboard title row to avoid duplication. */
    table.tpu-mobile-compact-table tr.tpu-mobile-compact-native-title {
        display: none !important;
    }

    /* Dashboard boxes may have a fixed/min-width from individual Dolibarr
       modules. The mobile card renderer owns their layout once marked. */
    .tpu-dashboard-widget table.tpu-mobile-compact-table,
    .tpu-dashboard-surface table.tpu-mobile-compact-table {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Apply the chart geometry to all DolGraph module dashboards, even when
       they are not wrapped by the classic .box structure. */
    .tpu-chart-root,
    .tpu-chart-root .tpu-chart-holder,
    .tpu-dashboard-surface .dolgraph,
    .tpu-dashboard-surface .dolgraphchart {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ============================================================
   2.0.0
   MOBILE TITLE-ONLY DASHBOARD TABLES
   Some Dolibarr dashboard helpers (for example startSimpleTable()) render a
   title row followed directly by data rows, without a separate column header.
   They must use the same card renderer instead of keeping desktop width.
   ============================================================ */
@media (max-width: 820px) {
    table.tpu-mobile-compact-table.tpu-mobile-compact-no-header,
    table.tpu-mobile-compact-table.tpu-mobile-compact-no-header > tbody,
    table.tpu-mobile-compact-table.tpu-mobile-compact-no-header > thead,
    table.tpu-mobile-compact-table.tpu-mobile-compact-no-header > tfoot {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    table.tpu-mobile-compact-table.tpu-mobile-compact-no-header tr.tpu-mobile-compact-row {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    table.tpu-mobile-compact-table.tpu-mobile-compact-no-header tr.tpu-mobile-compact-row > td.tpu-mobile-compact-cell {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 5px 2px !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    table.tpu-mobile-compact-table.tpu-mobile-compact-no-header tr.tpu-mobile-compact-row > td.tpu-mobile-compact-cell::before {
        display: none !important;
    }

    table.tpu-mobile-compact-table.tpu-mobile-compact-no-header tr.tpu-mobile-compact-row > td.tpu-mobile-compact-cell a,
    table.tpu-mobile-compact-table.tpu-mobile-compact-no-header tr.tpu-mobile-compact-row > td.tpu-mobile-compact-cell span,
    table.tpu-mobile-compact-table.tpu-mobile-compact-no-header tr.tpu-mobile-compact-row > td.tpu-mobile-compact-cell div {
        max-width: 100% !important;
        min-width: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    /* Never let a remaining read-only dashboard table widen the whole page. */
    .tpu-dashboard-surface table.noborder,
    .tpu-dashboard-surface table.liste,
    .tpu-dashboard-surface table.boxtable,
    .tpu-dashboard-widget table.noborder,
    .tpu-dashboard-widget table.liste,
    .tpu-dashboard-widget table.boxtable {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

/* ============================================================
   2.0.0
   NATIVE SIMPLETABLE -> MOBILE CARDS
   Project/Commerce/Product dashboards often use a single liste_titre row as
   the widget title and have no column-header row. Use the same mobile card
   model validated on the invoicing dashboard.
   ============================================================ */
@media (max-width: 820px) {
    table.tpu-mobile-compact-title-table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    table.tpu-mobile-compact-title-table tr.tpu-mobile-compact-native-title {
        display: none !important;
    }

    table.tpu-mobile-compact-title-table tr.tpu-mobile-compact-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        column-gap: 12px !important;
        row-gap: 4px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 13px 14px !important;
        margin: 0 0 10px !important;
        overflow: hidden !important;
    }

    table.tpu-mobile-compact-title-table tr.tpu-mobile-compact-row > td.tpu-mobile-compact-cell {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 3px 0 !important;
        border: 0 !important;
        text-align: left !important;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        overflow-wrap: anywhere !important;
    }

    table.tpu-mobile-compact-title-table tr.tpu-mobile-compact-row > td.tpu-mobile-compact-cell::before {
        display: none !important;
    }

    table.tpu-mobile-compact-title-table tr.tpu-mobile-compact-row > td.tpu-mobile-compact-primary {
        grid-column: 1 / -1 !important;
        font-size: 16px !important;
        font-weight: 760 !important;
    }

    table.tpu-mobile-compact-title-table tr.tpu-mobile-compact-row > td.tpu-mobile-compact-secondary,
    table.tpu-mobile-compact-title-table tr.tpu-mobile-compact-row > td.tpu-mobile-compact-thirdparty,
    table.tpu-mobile-compact-title-table tr.tpu-mobile-compact-row > td.tpu-mobile-compact-objectref {
        grid-column: 1 / 2 !important;
        font-weight: 650 !important;
    }

    table.tpu-mobile-compact-title-table tr.tpu-mobile-compact-row > td.tpu-mobile-compact-metric,
    table.tpu-mobile-compact-title-table tr.tpu-mobile-compact-row > td.right,
    table.tpu-mobile-compact-title-table tr.tpu-mobile-compact-row > td.tdamount {
        grid-column: 2 / 3 !important;
        justify-self: end !important;
        text-align: right !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }

    table.tpu-mobile-compact-title-table tr.tpu-mobile-compact-row > td.tpu-mobile-compact-status {
        justify-self: end !important;
    }

    table.tpu-mobile-compact-title-table tr.tpu-mobile-compact-row table.nobordernopadding,
    table.tpu-mobile-compact-title-table tr.tpu-mobile-compact-row table.nobordernopadding tbody,
    table.tpu-mobile-compact-title-table tr.tpu-mobile-compact-row table.nobordernopadding tr,
    table.tpu-mobile-compact-title-table tr.tpu-mobile-compact-row table.nobordernopadding td {
        max-width: 100% !important;
        min-width: 0 !important;
        width: auto !important;
        white-space: normal !important;
    }

    .tpu-mobile-compact-section-title + .tpu-mobile-compact-wrapper,
    .tpu-mobile-compact-section-title + table.tpu-mobile-compact-title-table {
        margin-top: 8px !important;
    }
}

/* ============================================================
   2.0.0
   CHART HOST TABLE SAFETY
   Native DolGraph widgets can live inside the same SimpleTable structure as
   dashboard lists. Their host tables must never receive mobile-card geometry.
   ============================================================ */
@media (max-width: 820px) {
    table.tpu-chart-host-table,
    table.tpu-chart-host-table > tbody,
    table.tpu-chart-host-table > thead,
    table.tpu-chart-host-table > tfoot {
        display: table !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        table-layout: auto !important;
        overflow: visible !important;
    }

    table.tpu-chart-host-table > tbody,
    table.tpu-chart-host-table > thead,
    table.tpu-chart-host-table > tfoot {
        display: table-row-group !important;
    }

    table.tpu-chart-host-table tr {
        display: table-row !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    table.tpu-chart-host-table td,
    table.tpu-chart-host-table th {
        display: table-cell !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    /* Chart host wrappers must keep the geometry calculated by the chart
       engine, never the compact-card row height. */
    table.tpu-chart-host-table .dolgraph,
    table.tpu-chart-host-table .dolgraphchart,
    table.tpu-chart-host-table .tpu-chart-holder {
        overflow: visible !important;
    }
}


/* ============================================================
   2.0.0
   PROJECT DASHBOARD OPPORTUNITY GRAPH - MOBILE CONTAINMENT
   ============================================================ */
@media (max-width: 820px) {
    body.mod-project.page-dashboard {
        overflow-x: hidden !important;
    }

    body.mod-project.page-dashboard .div-table-responsive-no-min:has(#placeholder_idgraphstatus),
    body.mod-project.page-dashboard .div-table-responsive:has(#placeholder_idgraphstatus),
    body.mod-project.page-dashboard .div-table-responsive-inside:has(#placeholder_idgraphstatus) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: visible !important;
        box-sizing: border-box !important;
    }

    body.mod-project.page-dashboard table:has(#placeholder_idgraphstatus) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
        box-sizing: border-box !important;
    }

    body.mod-project.page-dashboard table:has(#placeholder_idgraphstatus) th,
    body.mod-project.page-dashboard table:has(#placeholder_idgraphstatus) td {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body.mod-project.page-dashboard table:has(#placeholder_idgraphstatus) tr.liste_titre th {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
        line-height: 1.3 !important;
    }

    body.mod-project.page-dashboard #placeholder_idgraphstatus,
    body.mod-project.page-dashboard #placeholder_idgraphstatus.dolgraphchart,
    body.mod-project.page-dashboard .dolgraphchart:has(#canvas_idgraphstatus) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    body.mod-project.page-dashboard #canvas_idgraphstatus {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    body.mod-project.page-dashboard table:has(#placeholder_idgraphstatus) tr.liste_total > td:first-child {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        padding-right: 8px !important;
    }

    body.mod-project.page-dashboard table:has(#placeholder_idgraphstatus) tr.liste_total > td:last-child {
        width: 96px !important;
        min-width: 78px !important;
        max-width: 112px !important;
        white-space: nowrap !important;
        text-align: right !important;
    }
}


/* ============================================================
   2.0.0
   EXPENSE REPORT MOBILE - COMPACT EXISTING LINES
   Keep only the useful summary visible while a card is collapsed.
   The financial breakdown remains available through "Afficher plus".
   ============================================================ */
@media (max-width: 820px) {
    body.tpu-mobile-expense-lines-active table#tablelines tr.linetr.tpu-expense-card > td.linecollinenb {
        display: none !important;
    }

    body.tpu-mobile-expense-lines-active table#tablelines tr.linetr.tpu-expense-card:not(.tpu-expense-expanded) > td.linecolvatrate,
    body.tpu-mobile-expense-lines-active table#tablelines tr.linetr.tpu-expense-card:not(.tpu-expense-expanded) > td.linecolunitht,
    body.tpu-mobile-expense-lines-active table#tablelines tr.linetr.tpu-expense-card:not(.tpu-expense-expanded) > td.linecolunitttc,
    body.tpu-mobile-expense-lines-active table#tablelines tr.linetr.tpu-expense-card:not(.tpu-expense-expanded) > td.linecolqty,
    body.tpu-mobile-expense-lines-active table#tablelines tr.linetr.tpu-expense-card:not(.tpu-expense-expanded) > td.linecoltotalht,
    body.tpu-mobile-expense-lines-active table#tablelines tr.linetr.tpu-expense-card:not(.tpu-expense-expanded) > td.linecoltaxcat {
        display: none !important;
    }

    body.tpu-mobile-expense-lines-active table#tablelines tr.linetr.tpu-expense-card > td.linecoldate,
    body.tpu-mobile-expense-lines-active table#tablelines tr.linetr.tpu-expense-card > td.linecoltype {
        flex: 1 1 44% !important;
    }

    body.tpu-mobile-expense-lines-active table#tablelines tr.linetr.tpu-expense-card > td.lineproject,
    body.tpu-mobile-expense-lines-active table#tablelines tr.linetr.tpu-expense-card > td.linecolcomment {
        flex: 0 0 100% !important;
    }

    body.tpu-mobile-expense-lines-active table#tablelines tr.linetr.tpu-expense-card > td.linecoltotalttc {
        flex: 1 1 55% !important;
        margin-left: auto !important;
    }

    body.tpu-mobile-expense-lines-active table#tablelines tr.linetr.tpu-expense-card > td.linecolpreview {
        flex: 0 0 88px !important;
    }
}


/* ============================================================
   2.0.1 - THIRD-PARTY MODULE / SUPPLIER-LINE MOBILE HARDENING
   ============================================================ */
@media (max-width: 820px) {
    /* Some Dolibarr title/summary cells contain inline technical scripts
       (margin toggles, hooks, module helpers). They must remain technical even
       when a table is transformed into a mobile card/compact widget. */
    .tpu-mobile-compact-table script,
    .tpu-mobile-compact-table style,
    .tpu-mobile-compact-table template,
    .tpu-mobile-compact-table noscript,
    .tpu-document-lines-table script,
    .tpu-document-lines-table style,
    .tpu-document-lines-table template,
    .tpu-document-lines-table noscript {
        display: none !important;
    }

    /* When a commercial line carries fk_fournprice, Dolibarr adds the supplier
       and supplier reference inside linecoldescription. Avoid the aggressive
       overflow-wrap:anywhere rule from splitting references/words vertically.
       This is generic and therefore also covers supplier-aware third-party
       modules, not only TkdAlltron. */
    tr.tpu-docline-card > td.linecoldescription,
    tr.tpu-docline-card > td.linecoldescription * {
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }
    tr.tpu-docline-card > td.linecoldescription > .clearboth {
        display: block !important;
        width: 100% !important;
        height: 5px !important;
        min-height: 5px !important;
        clear: both !important;
    }
    tr.tpu-docline-card > td.linecoldescription > a,
    tr.tpu-docline-card > td.linecoldescription > span,
    tr.tpu-docline-card > td.linecoldescription > .nowrap,
    tr.tpu-docline-card > td.linecoldescription > .nowraponall,
    tr.tpu-docline-card > td.linecoldescription > .inline-block {
        display: inline !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
    }
    tr.tpu-docline-card > td.linecoldescription a {
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }
}


/* ============================================================
   2.0.2 - MOBILE DOCUMENT LINE PRIMARY-CELL LAYOUT FIX
   ============================================================ */
@media (max-width: 820px) {
    /* The description cell is intentionally both "primary" and "essential".
       In 2.0.1 the generic essential rule appeared later in the cascade and
       could shrink the primary cell back to ~46%, which made native Dolibarr
       product/supplier metadata wrap one character per line. Keep this cell
       unconditionally on its own full-width flex row. */
    tr.tpu-docline-card > td.tpu-docline-primary,
    tr.tpu-docline-card > td.tpu-docline-primary.tpu-docline-essential,
    tr.tpu-docline-card > td.linecoldescription.tpu-docline-primary {
        display: block !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        align-self: stretch !important;
        box-sizing: border-box !important;
    }

    /* Neutralise width/float constraints carried by native links and by
       supplier-aware modules without changing the DOM or click targets. */
    tr.tpu-docline-card > td.linecoldescription > a,
    tr.tpu-docline-card > td.linecoldescription > span,
    tr.tpu-docline-card > td.linecoldescription a[href*="/product/card.php"],
    tr.tpu-docline-card > td.linecoldescription a[href*="/product/price_suppliers.php"],
    tr.tpu-docline-card > td.linecoldescription a[href*="/societe/card.php"] {
        float: none !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        vertical-align: middle !important;
    }

    /* Product and supplier references are short identifiers: they should wrap
       as a unit, never digit-by-digit. Long descriptions and supplier names
       are still allowed to wrap normally around them. */
    tr.tpu-docline-card > td.linecoldescription a[href*="/product/card.php"] .aaa,
    tr.tpu-docline-card > td.linecoldescription a[href*="/product/price_suppliers.php"] .aaa,
    tr.tpu-docline-card > td.linecoldescription .nowraponall .aaa {
        display: inline !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
    }

    tr.tpu-docline-card > td.linecoldescription > .clearboth {
        float: none !important;
        clear: both !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
}


/* ============================================================
   2.0.3 - MOBILE COMMERCIAL LINE COLLAPSED SUMMARY
   Collapsed cards show only product/service name, quantity and
   client unit selling price. Native details/actions are revealed
   by "Afficher plus" and hidden again by "Afficher moins".
   ============================================================ */
@media (max-width: 820px) {
    tr.tpu-docline-card > td.tpu-docline-summary {
        display: block !important;
        order: -20 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 13px 12px 10px 14px !important;
        border: 0 !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    tr.tpu-docline-card > td.tpu-docline-summary .tpu-docline-summary-name {
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 0 11px !important;
        color: #25364a !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    tr.tpu-docline-card > td.tpu-docline-summary .tpu-docline-summary-metrics {
        display: grid !important;
        grid-template-columns: minmax(72px, .8fr) minmax(120px, 1.2fr) !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    tr.tpu-docline-card > td.tpu-docline-summary .tpu-docline-summary-metric {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-width: 0 !important;
        padding: 8px 10px !important;
        border-radius: 10px !important;
        background: #f7f9fc !important;
        box-sizing: border-box !important;
    }

    tr.tpu-docline-card > td.tpu-docline-summary .tpu-docline-summary-label {
        display: block !important;
        margin: 0 0 3px !important;
        color: #8390a0 !important;
        font-size: 9.5px !important;
        font-weight: 800 !important;
        letter-spacing: .055em !important;
        line-height: 1.15 !important;
        text-transform: uppercase !important;
    }

    tr.tpu-docline-card > td.tpu-docline-summary .tpu-docline-summary-value {
        display: block !important;
        min-width: 0 !important;
        color: #25364a !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        font-variant-numeric: tabular-nums !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    tr.tpu-docline-card > td.tpu-docline-summary .tpu-docline-summary-price .tpu-docline-summary-value {
        color: #0f766e !important;
        text-align: right !important;
    }

    /* The compact state is deliberately strict: no reference, supplier,
       VAT, cost price, discount, margin, total, checkbox or edit/delete
       control is exposed until the user asks for details. */
    tr.tpu-docline-card:not(.tpu-docline-expanded) > td:not(.tpu-docline-summary):not(.tpu-docline-toggle) {
        display: none !important;
    }

    tr.tpu-docline-card.tpu-docline-expanded > td.tpu-docline-summary {
        display: none !important;
    }

    tr.tpu-docline-card > td.tpu-docline-toggle {
        order: 100 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 4px 10px 7px !important;
        border-top: 1px solid #edf1f5 !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    tr.tpu-docline-card:not(.tpu-docline-expanded) > td.tpu-docline-toggle {
        border-top-color: transparent !important;
    }

    tr.tpu-docline-card > td.tpu-docline-toggle .tpu-docline-more {
        min-height: 32px !important;
        padding: 5px 2px !important;
        font-size: 12px !important;
    }
}

/* ============================================================
   2.0.4 - MOBILE COMMERCIAL LINE HARDENING
   Critical collapsed visibility/geometry is also enforced by JS
   so a third-party table rule cannot expose native cells or push
   the client price outside the card.
   ============================================================ */
@media (max-width: 820px) {
    tr.tpu-docline-card > td.tpu-docline-summary::before,
    tr.tpu-docline-card > td.tpu-docline-summary::after {
        content: none !important;
        display: none !important;
    }

    tr.tpu-docline-card > td.tpu-docline-summary {
        overflow: hidden !important;
    }

    tr.tpu-docline-card > td.tpu-docline-summary .tpu-docline-summary-name {
        width: 100% !important;
        margin: 0 0 10px !important;
        padding: 0 !important;
        font-size: 16px !important;
        line-height: 1.35 !important;
    }

    tr.tpu-docline-card > td.tpu-docline-summary .tpu-docline-summary-metrics {
        grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr) !important;
        align-items: stretch !important;
        overflow: hidden !important;
    }

    tr.tpu-docline-card > td.tpu-docline-summary .tpu-docline-summary-metric {
        overflow: hidden !important;
    }

    tr.tpu-docline-card > td.tpu-docline-summary .tpu-docline-summary-price {
        text-align: right !important;
    }

    tr.tpu-docline-card > td.tpu-docline-summary .tpu-docline-summary-price .tpu-docline-summary-label,
    tr.tpu-docline-card > td.tpu-docline-summary .tpu-docline-summary-price .tpu-docline-summary-value {
        text-align: right !important;
    }
}


/* ============================================================
   2.0.5 - AGENDA EVENT TITLE VISIBILITY (DESKTOP + MOBILE)
   Dolibarr 23 renders each calendar event label inside a td.tdoverflow.
   The native tdoverflow helper uses max-width:0 + nowrap + ellipsis and
   Dolibarr explicitly warns that cal_event_title must not become inline-block.
   Keep the override strictly scoped to Agenda calendar sections so no other
   list/table truncation policy is changed.
   ============================================================ */
.sectioncalendarbymonth div.event table.cal_event td.tdoverflow.cal_event,
.sectioncalendarbyweek div.event table.cal_event td.tdoverflow.cal_event,
.sectioncalendarbyday div.event table.cal_event td.tdoverflow.cal_event,
.sectioncalendarbymonth div.event table.cal_event td.cal_event.tdoverflow,
.sectioncalendarbyweek div.event table.cal_event td.cal_event.tdoverflow,
.sectioncalendarbyday div.event table.cal_event td.cal_event.tdoverflow {
    max-width: none !important;
    min-width: 0 !important;
    width: auto !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
}

.sectioncalendarbymonth div.event table.cal_event a.cal_event_title,
.sectioncalendarbyweek div.event table.cal_event a.cal_event_title,
.sectioncalendarbyday div.event table.cal_event a.cal_event_title {
    display: inline !important;
    position: static !important;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    line-height: 1.3 !important;
}

.sectioncalendarbymonth div.event table.cal_event,
.sectioncalendarbyweek div.event table.cal_event,
.sectioncalendarbyday div.event table.cal_event {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
}

/* On narrow screens, keep titles readable rather than forcing a single line.
   This applies to month/week/day only and intentionally leaves user/avatar and
   event action controls untouched. */
@media (max-width: 820px) {
    .sectioncalendarbymonth div.event table.cal_event td.tdoverflow.cal_event,
    .sectioncalendarbyweek div.event table.cal_event td.tdoverflow.cal_event,
    .sectioncalendarbyday div.event table.cal_event td.tdoverflow.cal_event,
    .sectioncalendarbymonth div.event table.cal_event td.cal_event.tdoverflow,
    .sectioncalendarbyweek div.event table.cal_event td.cal_event.tdoverflow,
    .sectioncalendarbyday div.event table.cal_event td.cal_event.tdoverflow {
        max-width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .sectioncalendarbymonth div.event table.cal_event a.cal_event_title,
    .sectioncalendarbyweek div.event table.cal_event a.cal_event_title,
    .sectioncalendarbyday div.event table.cal_event a.cal_event_title {
        display: inline !important;
        max-width: none !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
}

/* 2.0.6: readable agenda titles and no helper-source labels in mobile lists. */
@media (max-width: 820px) {
    table.tpu-mobile-cards tr.oddeven.tpu-mobile-row > td.tpu-mobile-title {
        display: block !important;
        font-weight: 700 !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
    }
    table.tpu-mobile-cards tr.oddeven.tpu-mobile-row > td.tpu-mobile-title::before {
        display: block !important;
        max-width: none !important;
        margin-bottom: 4px !important;
    }
    table.tpu-mobile-cards tr.oddeven.tpu-mobile-row > td.tpu-mobile-title a,
    table.tpu-mobile-cards tr.oddeven.tpu-mobile-row > td.tpu-ticket-subject a {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
    table.tpu-mobile-cards tr.oddeven.tpu-mobile-row > td.tpu-mobile-selection::before {
        content: none !important;
        display: none !important;
    }
    table.tpu-mobile-cards script,
    table.tpu-mobile-cards style,
    table.tpu-mobile-cards template,
    table.tpu-mobile-cards noscript {
        display: none !important;
    }
}

/* Native user list grouping: the hidden server markers are removed before table enhancement. */
.tpu-user-kind-marker,.tpu-user-grouping-marker{display:none!important}
.tpu-users-group caption{text-align:left;caption-side:top;font-size:18px;font-weight:700;color:var(--tpu-text);padding:18px 8px 14px}
.tpu-users-hint{font-size:13px;color:var(--tpu-muted);margin:18px 0 8px}.tpu-users-wrapper{margin-top:22px}.tpu-users-empty td{padding:24px!important;color:var(--tpu-muted);text-align:center}.tpu-users-total-note{display:block;font-size:11px;font-weight:400}

@media(max-width:820px){table.tpu-users-group caption{display:block;width:100%;box-sizing:border-box}}