:root { --body: #edf4fa; }
html.l2f-theme-dark,
body.l2f-theme-dark,
body.l2f-design-global.l2f-theme-dark { --body: #0A111E; }

* {font-family:'Outfit', sans-serif;font-size:13px;font-weight:400;color:inherit;}
.modal * {font-family:'Outfit', sans-serif;font-size:13px;font-weight:400;color:var(--img-bg) !important;}
.is-open * {font-family:'Outfit', sans-serif;font-size:13px;font-weight:400;color:var(--img-bg) !important;}
.modal input {font-family:'Outfit', sans-serif;font-size:13px;font-weight:400;color:var(--img-bg) !important;background:transparent;border:1px solid var(--img-bg);}
.modal input[type="text"],
.modal input[type="search"],
.is-open input[type="text"],
.is-open input[type="search"],
#modal_div input[type="text"],
#modal_div input[type="search"] {
  background: rgb(237, 244, 250) !important;
  border: 0 !important;
  box-shadow: none !important;
}
.modal select,
.is-open select,
#modal_div select {
  background: rgb(237, 244, 250) !important;
  border: 0 !important;
  box-shadow: none !important;
}
.modal .l2f-modal-btn-row {
  display: block;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  padding: 20px;
  border-top: 2px solid rgba(31, 48, 79, 0.1) !important;
}
/* Base */
a { text-decoration: none; color: inherit; }
html,
body { overflow-x: hidden; overflow-y: auto; width: 100%; max-width: 100%; height: auto; }
body { background: var(--body); padding: 0; margin: 0; }
body.l2f-design-global { font-family: 'Outfit', sans-serif; font-weight: 300; }

#navbar {
  background: var(--card) !important;
  padding: 13px 20px;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
#corps { display: flex; flex-wrap: wrap; padding: 0; margin: 0; background: var(--body); }
#bodypad { background: var(--body); padding: 10px; }

.card {
  box-sizing: border-box;
  background: var(--card);
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
  position: relative;
  border: 0;
  box-shadow: none;
  font-size:13px;
}

 #l2fDesignShell .l2f-design-chart-scroll {
    overflow-x: hidden !important;
  }
  #l2fDesignShell .l2f-design-bars {
    grid-template-columns: repeat(var(--bars-count, 31), minmax(0, 1fr)) !important;
  }
  #l2fDesignShell .l2f-design-months {
    grid-template-columns: repeat(var(--bars-count, 31), minmax(0, 1fr)) !important;
  }
  #l2fDesignShell .l2f-design-months span {
    font-size: 8px !important;
  }
  #l2fDesignShell .l2f-design-bar {
    border-radius: 4px !important;
  }
  
/* Utilities */
.text-white { color: #fff !important; }
.success, .text-success { color: var(--success) !important; }
.warning, .text-warning { color: var(--warning) !important; }
.danger, .text-danger { color: var(--danger) !important; }
.bg-body { background: var(--body) !important; }
.bg-card { background: var(--card) !important; }
.font-outfit { font-family: 'Outfit', sans-serif !important; }
.font-manrope { font-family: 'Manrope', sans-serif !important; }
.ls-0 { letter-spacing: 0 !important; }
.ls-n2 { letter-spacing: -0.02em !important; }
.ls-n3 { letter-spacing: -0.03em !important; }

.fw-100 { font-weight: 100 !important; }
.fw-200 { font-weight: 200 !important; }
.fw-300 { font-weight: 300 !important; }
.fw-400 { font-weight: 400 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }
.fw-900 { font-weight: 900 !important; }

.fs-10 { font-size: 10px !important; }
.fs-11 { font-size: 11px !important; }
.fs-12 { font-size: 12px !important; }
.fs-13 { font-size: 13px !important; }
.fs-14 { font-size: 14px !important; }
.fs-15 { font-size: 15px !important; }
.fs-16 { font-size: 16px !important; }
.fs-17 { font-size: 17px !important; }
.fs-18 { font-size: 18px !important; }
.fs-19 { font-size: 19px !important; }
.fs-20 { font-size: 20px !important; }
.fs-21 { font-size: 21px !important; }
.fs-22 { font-size: 22px !important; }
.fs-23 { font-size: 23px !important; }
.fs-24 { font-size: 24px !important; }
.fs-25 { font-size: 25px !important; }
.fs-26 { font-size: 26px !important; }
.fs-27 { font-size: 27px !important; }
.fs-28 { font-size: 28px !important; }
.fs-29 { font-size: 29px !important; }
.fs-30 { font-size: 30px !important; }
.fs-34 { font-size: 34px !important; }

.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mt-4 { margin-top: 4px !important; }
.mt-5 { margin-top: 5px !important; }
.mt-8 { margin-top: 8px !important; }
.mt-10 { margin-top: 10px !important; }
.mt-12 { margin-top: 12px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-5 { margin-bottom: 5px !important; }
.mb-8 { margin-bottom: 8px !important; }
.mb-10 { margin-bottom: 10px !important; }
.ml-0 { margin-left: 0 !important; }
.mr-0 { margin-right: 0 !important; }
.p-0 { padding: 0 !important; }
.p-5 { padding: 5px !important; }
.p-8 { padding: 8px !important; }
.p-10 { padding: 10px !important; }
.p-12 { padding: 12px !important; }
.p-14 { padding: 14px !important; }
.p-15 { padding: 15px !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-5 { padding-top: 5px !important; padding-bottom: 5px !important; }
.py-8 { padding-top: 8px !important; padding-bottom: 8px !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-5 { padding-left: 5px !important; padding-right: 5px !important; }
.px-8 { padding-left: 8px !important; padding-right: 8px !important; }
.px-10 { padding-left: 10px !important; padding-right: 10px !important; }
.px-15 { padding-left: 15px !important; padding-right: 15px !important; }

.w-100 { width: 100% !important; }
.w-75 { width: 75% !important; }
.w-60 { width: 60% !important; }
.w-50 { width: 50% !important; }
.w-40 { width: 40% !important; }
.w-33 { width: 33.333% !important; }
.w-25 { width: 25% !important; }
.min-w-0 { min-width: 0 !important; }
.br-6 { border-radius: 6px !important; }
.br-8 { border-radius: 8px !important; }
.br-10 { border-radius: 10px !important; }
.br-12 { border-radius: 12px !important; }
.br-30 { border-radius: 30px !important; }
.br-pill { border-radius: 999px !important; }
.border-0 { border: 0 !important; }
.bb-1 { border-bottom: 1px solid var(--border) !important; }
.bb-2 { border-bottom: 2px solid var(--border) !important; }
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.flex-wrap { flex-wrap: wrap !important; }
.ai-center { align-items: center !important; }
.jc-center { justify-content: center !important; }
.jc-between { justify-content: space-between !important; }
.gap-0 { gap: 0 !important; }
.gap-5 { gap: 5px !important; }
.gap-8 { gap: 8px !important; }
.gap-10 { gap: 10px !important; }
.ta-left { text-align: left !important; }
.ta-center { text-align: center !important; }
.ta-right { text-align: right !important; }
.pointer { cursor: pointer !important; }

/* Lists: no bottom border on the last row + no extra bottom padding on list cards */
#l2fDesignShell table tbody tr:last-child td,
#l2fDesignShell .product-line:last-child,
#l2fDesignShell .product-line-2:last-child {
  border-bottom: 0 !important;
}
#l2fDesignShell .card[style*="padding-bottom"] {
  padding-bottom: 0 !important;
}

/* Uniform list rendering: no parent bottom padding, header 2px, rows 1px, last row no border */
#l2fDesignShell .card:has(table),
#l2fDesignShell .card:has(.product-line),
#l2fDesignShell .card:has(.product-line-2),
#l2fDesignShell .card:has(.compta-list-row) {
  padding-bottom: 0 !important;
}
#l2fDesignShell table thead tr {
  border-top: 0 !important;
  border-bottom: 2px solid var(--border) !important;
}
#l2fDesignShell table thead th {
  border-top: 0 !important;
  border-bottom: 0 !important;
}
#l2fDesignShell table tbody td {
  border-top: 0 !important;
  border-bottom: 1px solid var(--border) !important;
}
#l2fDesignShell table tbody tr:last-child td {
  border-bottom: 0 !important;
}
#l2fDesignShell .card .product-line,
#l2fDesignShell .card .product-line-2,
#l2fDesignShell .card .compta-list-row {
  border-top: 0 !important;
  border-bottom: 1px solid var(--border) !important;
}
#l2fDesignShell .card .product-line:last-child,
#l2fDesignShell .card .product-line-2:last-child,
#l2fDesignShell .card .compta-list-row:last-child {
  border-bottom: 0 !important;
}

/* Columns */
.col-10 { flex: 0 0 calc(10% - 20px); }
.col-16 { flex: 0 0 calc(16.666% - 20px); }
.col-20 { flex: 0 0 calc(20% - 20px); }
.col-25 { flex: 0 0 calc(25% - 20px); }
.col-30 { flex: 0 0 calc(30% - 20px); }
.col-33 { flex: 0 0 calc(33.333% - 20px); }
.col-40 { flex: 0 0 calc(40% - 20px); }
.col-50 { flex: 0 0 calc(50% - 20px); }
.col-60 { flex: 0 0 calc(60% - 20px); }
.col-70 { flex: 0 0 calc(70% - 20px); }
.col-100 { flex: 0 0 calc(100% - 20px); }

/* App shell */
body.l2f-design-global #navbar,
body.l2f-design-global #verticalMenu,
body.l2f-design-global #menuOverlay { display: none !important; }
body.l2f-design-global #bodypad {
  margin-left: 250px;
  width: calc(100% - 250px);
  padding: 68px 0 0;
  background: var(--body) !important;
  min-height: 100vh;
  box-sizing: border-box;
  overflow-x: hidden;
}
body.l2f-design-global #corps { width: 100%; margin: 0 !important; background: transparent !important; }

.l2f-design-shell {
  width: 100%; max-width: 100%; min-height: 100vh;
  display: grid; grid-template-columns: 250px 1fr;
  border-radius: 0; overflow: hidden;
  background: var(--body); border: 0;
  box-shadow: 0 25px 70px rgba(22,53,96,.14);
}
.l2f-design-main {
  width: 100%; max-width: 100%; min-width: 0;
  overflow-x: hidden; display: flex; flex-wrap: wrap; gap: 15px;
  padding: 5px 15px !important;
  box-sizing: border-box !important;
}
.l2f-design-main > * { max-width: 100%; min-width: 0; }
.l2f-design-shell, .l2f-design-shell *,
#l2fDesignShell, #l2fDesignShell * { box-sizing: border-box; }
.l2f-design-desktop-only { display: block; }
.l2f-design-mobile-only { display: none; }
#l2fDesignShell { width: 100%; max-width: 100%; overflow-x: hidden; }

#l2fDesignShell .card {
  margin: 0 !important;
}

#l2fDesignShell .col-10 { flex: 0 0 calc(10% - 13.5px) !important; max-width: calc(10% - 13.5px) !important; }
#l2fDesignShell .col-16 { flex: 0 0 calc(16.666% - 12.5px) !important; max-width: calc(16.666% - 12.5px) !important; }
#l2fDesignShell .col-20 { flex: 0 0 calc(20% - 12px) !important; max-width: calc(20% - 12px) !important; }
#l2fDesignShell .col-25 { flex: 0 0 calc(25% - 11.25px) !important; max-width: calc(25% - 11.25px) !important; }
#l2fDesignShell .col-30 { flex: 0 0 calc(30% - 10.5px) !important; max-width: calc(30% - 10.5px) !important; }
#l2fDesignShell .col-33 { flex: 0 0 calc(33.333% - 10px) !important; max-width: calc(33.333% - 10px) !important; }
#l2fDesignShell .col-40 { flex: 0 0 calc(40% - 9px) !important; max-width: calc(40% - 9px) !important; }
#l2fDesignShell .col-50 { flex: 0 0 calc(50% - 7.5px) !important; max-width: calc(50% - 7.5px) !important; }
#l2fDesignShell .col-60 { flex: 0 0 calc(60% - 6px) !important; max-width: calc(60% - 6px) !important; }
#l2fDesignShell .col-70 { flex: 0 0 calc(70% - 4.5px) !important; max-width: calc(70% - 4.5px) !important; }
#l2fDesignShell .col-100 { flex: 0 0 100% !important; max-width: 100% !important; }

.l2f-design-sidebar,
.l2f-design-global-sidebar {
  width: 250px; min-width: 250px; max-width: 250px;
  box-sizing: border-box; overflow-x: hidden;
  border-right: 0; background: var(--card);
  padding: 28px 18px; display: flex;
  flex-direction: column; justify-content: space-between;
}
.l2f-design-logo-wrap { display: flex; align-items: center; gap: 10px; margin: 8px 0 24px; min-width: 0; }
.l2f-design-logo-icon {
  width: 28px; height: 28px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(145deg, color(display-p3 0.9331 0.4509 0.3999), rgb(254, 166, 39));
  font-size: 12px; font-weight: 700; color: var(--body) !important;
}
.l2f-design-logo-text {
  font-size: 17px !important; font-weight: 700 !important; letter-spacing: -0.02em !important;
  color: var(--defaut) !important; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; text-transform: uppercase;
}

.l2f-design-nav { display: grid; gap: 6px; max-height: calc(100dvh - 320px); overflow: auto; padding-right: 2px; }
.l2f-design-menu-link,
.l2f-design-submenu-link,
.l2f-design-submenu-toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 14px;
  color: var(--defaut); font-size: 14px; font-weight: 400;
}
.l2f-design-submenu-link { font-size: 13px; padding: 9px 10px; border-radius: 12px; }
.l2f-design-menu-link:hover,
.l2f-design-menu-link.active { background: var(--body) !important; color: var(--defaut) !important; }
.l2f-design-menu-link:hover, .l2f-design-menu-link.active * {background: var(--body) !important;color: var(--defaut) !important;}
.l2f-design-submenu-main, .l2f-design-menu-link * {color: var(--second) !important;}
.l2f-design-menu-icon { width: 16px; height: 16px; flex: 0 0 16px; display: inline-flex; align-items: center; justify-content: center; }
.l2f-design-menu-link .icon-feather-sliders,
.l2f-design-menu-link .icon-feather-server,
.l2f-design-menu-link .icon-feather-trello,
.l2f-design-menu-link .icon-feather-file-text,
.l2f-design-menu-link .icon-feather-coffee,
.l2f-design-menu-link .icon-feather-bar-chart,
.l2f-design-menu-link .icon-feather-clock,
.l2f-design-menu-link .icon-feather-settings { width: 16px; height: 16px; stroke-width: 2; }
.l2f-design-submenu-group { display: grid; gap: 4px; }
.l2f-design-submenu-main { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.l2f-design-submenu-arrow { margin-left: auto; font-size: 11px; opacity: .7; transition: .2s; }
.l2f-design-submenu-group.open > .l2f-design-submenu-toggle .l2f-design-submenu-arrow { transform: rotate(180deg); }
.l2f-design-submenu { display: grid; gap: 4px; padding-left: 16px; max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; transform: translateY(-4px); transition: max-height .25s, opacity .2s, transform .25s; }
.l2f-design-submenu-group.open > .l2f-design-submenu { max-height: 360px; opacity: 1; pointer-events: auto; transform: translateY(0); }
.l2f-design-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--second2); }

.l2f-design-logout {
  margin-top: 12px; width: 100%; max-width: 100%;
  height: 25px; min-height: 25px; max-height: 25px;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 0 10px; border-radius: 8px; border: 1px solid var(--border);
  color: var(--second); font-size: 12px; font-weight: 400;
  box-sizing: border-box; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
}
.l2f-design-logout .icon-feather-log-out { width: 13px; height: 13px; stroke-width: 2 !important; }

.l2f-design-topbar,
.l2f-design-global-topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; background: var(--card); border: 0; }
.l2f-design-search-wrap { position: relative; display: flex; align-items: center; gap: 8px; width: min(540px, 62%); background: var(--body); border: 0; border-radius: 12px; padding: 10px 14px; overflow: visible; }
.l2f-design-search-wrap input { border: 0; outline: 0; background: transparent; width: 100%; font-size: 14px; color: var(--defaut); }
.l2f-design-search-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 140;
  display: none;
  max-height: min(55vh, 420px);
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(10, 17, 30, 0.18);
  padding: 6px;
}
.l2f-design-search-results.open { display: block; }
.l2f-design-search-empty {
  padding: 10px;
  color: var(--second);
  font-size: 12px;
  text-align: left;
}
.l2f-design-search-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-decoration: none;
  border-radius: 8px;
  padding: 8px 10px;
}
.l2f-design-search-item:hover,
.l2f-design-search-item:focus {
  background: var(--body);
}
.l2f-design-search-item-ref {
  color: var(--defaut);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}
.l2f-design-search-item-meta {
  color: var(--second);
  font-size: 11px;
  line-height: 1.2;
}
.l2f-design-profile-wrap, .l2f-design-topbar-actions { display: flex; align-items: center; gap: 8px; }
.l2f-design-icon-btn, .l2f-design-theme-btn, #l2fDesignMenuBtn { width: 36px; height: 36px; border: 0 !important; border-radius: 10px; background: var(--body) !important; color: var(--second); display: inline-flex; align-items: center; justify-content: center; }
.l2f-design-icon-btn [class^="icon-feather-"], .l2f-design-theme-icon-btn .l2f-theme-icon { width: 19px; height: 19px; stroke: var(--second); stroke-width: 2; }
.l2f-design-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: linear-gradient(145deg,#242a35,#4a556c); color: #fff; overflow: hidden; }
.l2f-design-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.l2f-design-who strong { display: block; font-size: 13px; color: var(--defaut); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.l2f-design-who small { color: var(--second); font-size: 11px; }

.l2f-design-mobilebar,
.l2f-design-global-mobilebar { display: none; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; background: var(--card); border: 0; }
.l2f-design-mobile-left, .l2f-design-mobile-actions { display: flex; align-items: center; gap: 6px; }
.l2f-design-mobile-brand { font-weight: 700; color: var(--defaut); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l2f-design-mobile-footer-row { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--body); }
.l2f-design-mobile-footer-item {
  width: 50%; height: 25px; min-height: 25px; max-height: 25px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  box-sizing: border-box; margin: 0 !important; padding: 0 8px !important;
}
.l2f-design-mobile-footer-item + .l2f-design-mobile-footer-item { border-left: 1px solid var(--border); }
.l2f-design-mobile-footer-row .l2f-design-theme-btn,
.l2f-design-mobile-footer-row .l2f-design-logout {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.l2f-design-theme-btn-drawer .l2f-theme-icon {
  width: 14px !important;
  height: 14px !important;
  stroke: var(--second) !important;
  color: var(--second) !important;
  display: block;
}
.l2f-design-theme-btn-drawer span {
  font-size: 12px;
  line-height: 1;
}

#l2fGlobalSidebar .l2f-design-logout {
  width: 100%;
  height: 25px;
  min-height: 25px;
  max-height: 25px;
}
.l2f-design-overlay { position: fixed; inset: 0; background: rgba(5,10,20,.35); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); opacity: 0; visibility: hidden; pointer-events: none; transition: .3s; z-index: 40; }
.l2f-design-overlay.show { opacity: 1; visibility: visible; pointer-events: auto; }
.l2f-design-drawer { position: fixed; left: 0; top: 0; bottom: 0; width: min(82vw,250px); max-width: 250px; background: var(--card); border-right: 0; transform: translateX(-100%); transition: .25s; z-index: 50; padding: 26px 14px; display: flex; flex-direction: column; justify-content: space-between; }
.l2f-design-drawer.open { transform: translateX(0); }

/* Desktop fixed layout */
@media (min-width: 1150px) {
  .l2f-design-sidebar,
  .l2f-design-global-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 60;
  }

  .l2f-design-topbar,
  .l2f-design-global-topbar {
    position: fixed;
    top: 0;
    left: 250px;
    right: 0;
    z-index: 55;
  }

  body.l2f-design-global #bodypad {
    margin-left: 250px;
    width: calc(100% - 250px);
    padding: 68px 0 0;
  }
}

/* Dashboard */
.l2f-design-kpi-card, .l2f-design-chart-card, .l2f-design-alert-card, .l2f-design-mini-card, .l2f-design-quick-card, .l2f-design-pointage-card, .l2f-design-caisse-card { padding: 14px; }
.l2f-design-kpi-card-wide { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 20px; }
.l2f-design-score-card { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; gap: 6px; }
.l2f-design-muted { margin: 0; color: var(--second); font-size: 13px; font-weight: 400; }
.l2f-design-mini-value { font-family: 'Manrope', sans-serif !important; font-weight: 900 !important; letter-spacing: -0.03em !important; color: var(--defaut) !important; font-size: 34px; }
.l2f-design-mini-value-sm { font-size: 26px !important; }
.l2f-design-mini-label { margin-top: -5px; color: var(--second) !important; font-size: 13px; font-weight: 700; }
.l2f-design-trend { font-family: 'Outfit', sans-serif !important; font-size: 12px; font-weight: 500 !important; letter-spacing: 0; border-radius: 999px; padding: 1px 5px; vertical-align: middle; margin-left: 8px; display: inline-flex; align-items: center; gap: 0; }
.l2f-design-trend.up, .l2f-design-trend.success { background: var(--success-bg); color: var(--success); }
.l2f-design-trend.down, .l2f-design-trend.danger { background: var(--danger-bg); color: var(--danger); }
.l2f-design-trend.l2f-design-trend-loss.up { background: var(--danger-bg); color: var(--danger); }
.l2f-design-trend.l2f-design-trend-loss.down { background: var(--success-bg); color: var(--success); }
.l2f-design-trend.warning, .l2f-design-trend.pending { background: var(--warning-bg); color: var(--warning); }
.l2f-design-trend.flat { background: var(--second2); color: var(--second); }
.l2f-design-trend.up::before,
.l2f-design-trend.down::before {
  content: '';
  width: 12px;
  height: 12px;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}
.l2f-design-trend.up::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 19V5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpolyline points='5 12 12 5 19 12' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
}
.l2f-design-trend.down::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5V19' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpolyline points='19 12 12 19 5 12' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
}
.l2f-design-trend-no-icon::before, .l2f-design-support-head .l2f-design-trend::before { content: none !important; }
.l2f-design-score-scale { position: relative; height: 4px; margin-top: 8px; border-radius: 30px; overflow-x: visible; width: 100%; }
.l2f-design-score-scale.rent { background: linear-gradient(90deg,#ff6961 0%,#fda628 50%,#58d141 70%,#58d141 100%); }
.l2f-design-score-scale.loss { background: linear-gradient(90deg,#58d141 0%,#fda628 50%,#ff6961 70%,#ff6961 100%); }
.l2f-design-score-cursor { position: absolute; left: 0; top: -4px; height: 12px; border-right: 2px solid #1d2430; }
html.l2f-theme-dark #l2fDesignShell .l2f-design-score-cursor { border-right: 2px solid #fff !important; }

.l2f-design-chart-card h2 { margin: 6px 0 14px; font-family: 'Manrope', sans-serif; font-size: 40px; font-weight: 900; letter-spacing: -0.03em; color: var(--defaut); }
.l2f-design-chart-scroll { width: 100%; overflow-x: auto; overflow-y: visible; padding-bottom: 2px; }
.l2f-design-bars { position: relative; display: grid; grid-template-columns: repeat(var(--bars-count,31), minmax(10px,1fr)); align-items: end; gap: 6px; min-height: 140px; margin-top: 5px; }
.l2f-design-rent-line { position: absolute; left: 0; right: 0; border-top: 1.5px dashed var(--success); pointer-events: none; z-index: 3; }
.l2f-design-rent-line span { position: absolute; right: 0; top: -5px; transform: translateY(-100%); color: var(--success); font-size: 12px; font-weight: 400; font-family: 'Outfit', sans-serif !important; white-space: nowrap; }
.l2f-design-bar { background-image: linear-gradient(to top,#ff6961 0%,#fda628 var(--l2f-orange-pct,52%),#58d141 var(--l2f-threshold-pct,70%),#58d141 100%); border-radius: 7px; min-height: 5px; transition: .2s; }
.l2f-design-bar.zero { background-image: linear-gradient(to top,#ff6961 0%,#ff6961 100%); }
.l2f-design-bar.future { opacity: .45; }
.l2f-design-bar.active, .l2f-design-bar:hover { filter: brightness(1.08) saturate(1.12); }
.l2f-design-tip { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); background: #111; border-radius: 8px; color: #fff; font-size: 12px; padding: 6px 9px; white-space: nowrap; opacity: 0; pointer-events: none; transition: .2s; z-index: 99999; }
.l2f-design-bar:hover .l2f-design-tip, .l2f-design-bar.active .l2f-design-tip { opacity: 1; }
.l2f-design-months { display: grid; grid-template-columns: repeat(var(--bars-count,31), minmax(10px,1fr)); gap: 6px; margin-top: 10px; }
.l2f-design-months span { font-family: 'Manrope', sans-serif !important; font-size: 10px; color: var(--second); text-align: center; }

.l2f-design-alert-card { display: block; background: var(--card); border: 0; border-radius: 10px; }
.l2f-design-alert-item { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); padding: 10px 0; }
.l2f-design-alert-item:last-child { border-bottom: 0; }
.l2f-design-alert-item > span:not(.l2f-design-alert-icon) { color: var(--second); flex: 1; min-width: 0; }
.l2f-design-alert-item strong { font-family: 'Manrope', sans-serif !important; font-weight: 500; margin-left: auto; white-space: nowrap; text-align: right; }
.l2f-design-alert-icon { width: 18px; height: 18px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; stroke-width: 2px; }
.l2f-design-alert-icon.danger, .l2f-design-alert-item .danger { color: var(--danger); stroke: var(--danger); fill: var(--danger-bg); }
.l2f-design-alert-icon.warning, .l2f-design-alert-item .warning { color: var(--warning); stroke: var(--warning); fill: var(--warning-bg); }
.l2f-design-alert-icon.success, .l2f-design-alert-item .success { color: var(--success); stroke: var(--success); fill: var(--success-bg); }

.l2f-design-section-title { padding-bottom: 10px; border-bottom: 1px solid var(--border); width: 100%; }
.l2f-design-section-title-strong { border-bottom-width: 2px; }
.l2f-design-user-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
.l2f-design-user-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.l2f-design-user-avatar { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); }
.l2f-design-user-dot { width: 24px; height: 24px; border: 0; border-radius: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.l2f-design-user-dot.control-play { background: var(--success-bg); }
.l2f-design-user-dot.control-pause { background: var(--danger-bg); }
.l2f-pointage-icon { width: 24px; height: 24px; fill: none; stroke-width: 1.5; }
.l2f-design-user-dot.control-play .l2f-pointage-icon { stroke: var(--success); }
.l2f-design-user-dot.control-pause .l2f-pointage-icon { stroke: var(--danger); }
.pointage-status, .pointage-time { color: var(--second) !important; }

.l2f-design-action-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; border-radius: 10px; background: transparent; padding: 8px 10px; font-size: 14px; cursor: pointer; }
.l2f-design-action-btn.warning { color: var(--warning); border: 1.5px solid var(--warning); }
.l2f-design-action-btn.success { color: var(--success); border: 1.5px solid var(--success); }
.l2f-design-action-btn.danger { color: var(--danger); border: 1.5px solid var(--danger); }
.l2f-design-caisse-note { margin-top: 10px; color: var(--second); font-size: 12px; line-height: 1.45; }
.l2f-design-ticket-btn-hidden { display: none; margin-top: 15px; }

.l2f-design-support-card { background: var(--body); border: 1px solid var(--border); margin-top: 14px; border-radius: 12px; padding: 10px; }
.l2f-design-support-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.l2f-design-support-head strong { font-size: 12px; font-weight: 900; color: var(--defaut); }
.l2f-design-support-values, .l2f-design-support-labels { display: grid; grid-template-columns: 50% 50%; column-gap: 8px; align-items: center; text-align: center; }
.l2f-design-support-values { margin-top: 12px; }
.l2f-design-support-labels { margin-top: 1px; margin-bottom: 12px; }
.l2f-design-support-id, .l2f-design-support-code-value { font-family: 'Manrope', sans-serif !important; font-size: 17px; font-weight: 800; color: var(--defaut) !important; line-height: 1.1; }
.l2f-design-support-id-label, .l2f-design-support-code-label { min-width: 0; font-size: 12px; font-weight: 400; color: var(--second) !important; line-height: 1.1; margin-top: -1px; }
.l2f-design-support-values > *:nth-child(2), .l2f-design-support-labels > *:nth-child(2) { border-left: 1px solid var(--second); padding-left: 8px; }
.l2f-design-support-timer { margin-top: 6px; font-size: 11px; color: var(--defaut); }
.l2f-design-support-progress { margin-top: 6px; height: 4px; border-radius: 999px; background: var(--second2); overflow: hidden; }
.l2f-support-progress-bar, .l2f-design-support-progress > span { display: block; width: 0; height: 100%; background: var(--defaut); }
.l2f-design-support-head .l2f-design-trend { font-size: 11px !important; margin-left: 0 !important; }
.l2f-design-support-image-link { display: block; width: 100%; margin-top: 8px; line-height: 0; }
.l2f-design-support-image { display: block; width: 100%; height: auto; }

.l2f-design-alert-formula { border: 0 !important; border-radius: 6px; padding: 6px 10px 8px 10px; margin-top: 8px; margin-bottom: 8px; color: var(--l2f-alert-color, var(--defaut)); }
.l2f-design-alert-formula-icon { width: 12px; height: 12px; position: relative; top: 1px; margin-right: 4px; stroke-width: 2; color: var(--l2f-alert-color, var(--defaut)); stroke: var(--l2f-alert-color, var(--defaut)); }
.l2f-design-quick-card { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; cursor: pointer; text-align: center; color: var(--defaut); }
.l2f-clickable { cursor: pointer; }

/* Calendar modal (old style, 2 columns) */
.l2f-period-modal { width: 100%; text-align: left; color: var(--defaut); }
.l2f-period-title { margin-bottom: 8px; }
.l2f-period-grid { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; margin: 0 -6px; padding: 0; }
.l2f-period-item {
  display: flex; align-items: center; justify-content: center;
  background: rgba(31, 48, 79, 0.1) !important;
  border: 0 !important;
  border-radius: 6px; margin: 6px !important; padding: 0 !important;
}
.l2f-period-btn { width: 100%; padding: 10px; border: 0; background: transparent; color: var(--defaut); cursor: pointer; font-weight: 500; }
.l2f-period-btn.l2f-period-btn-selected {
  background: var(--img-bg);
  color: #fff !important;
  border-radius: 8px;
}
.l2f-period-btn.l2f-period-btn-selected * { color: #fff !important; }
.l2f-period-subtitle { margin: 0 0 8px 0; }
.l2f-period-row { display: flex; gap: 8px; flex-wrap: wrap; }
.l2f-period-input {
  flex: 1; min-width: 130px; padding: 8px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--card); color: var(--defaut);
}
.l2f-period-compare { margin: 8px 0 6px 0; color: var(--second); }
.l2f-period-link { text-decoration: underline; cursor: pointer; color: var(--defaut); }
.l2f-period-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.l2f-period-apply {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px;
  background: var(--img-bg);
  color: #fff !important;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.l2f-design-order-status-wrap { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; width: 100%; }
.l2f-design-order-camera-btn { border: 1px solid var(--border); background: transparent; border-radius: 5px; padding: 2px 7px; line-height: 1; }
.l2f-design-order-logo { border: 1.5px solid var(--border); background: var(--img-bg); margin-right: 0; width: 40px !important; height: 40px !important; }
.l2f-design-order-logo.success { border-color: var(--success); }
.l2f-design-order-logo.warning { border-color: var(--warning); }
.l2f-design-order-logo.danger { border-color: var(--danger); }
.l2f-design-order-row { padding: 0 !important; cursor: pointer; }
.l2f-design-order-row-mobile, .l2f-design-order-row-mobile .product-info { border: 0 !important; padding: 0 !important; }
.l2f-design-order-cell-compact { padding: 8px 0; }
.l2f-order-status { font-family: 'Outfit', sans-serif !important; font-weight: 500 !important; letter-spacing: 0 !important; }

/* Theme */
html.l2f-theme-dark #l2fDesignShell { border: 0 !important; box-shadow: none; }
html.l2f-theme-dark .l2f-design-search-wrap { background: #09111e; border: 0; }

@media (max-width: 480px) {
  .prod { flex:0 0 calc((100% - 10px) / 2) !important;max-width:calc((100% - 10px) / 2) !important; }
}
@media (min-width: 480px) and (max-width: 768px) {
  .prod { flex:0 0 calc((100% - 20px) / 3) !important;max-width:calc((100% - 20px) / 3) !important; }
}

/* Responsive */
@media (max-width: 768px) {
  .mob-10 { flex: 0 0 calc(10% - 20px); }
  .mob-16 { flex: 0 0 calc(16.666% - 20px); }
  .mob-20 { flex: 0 0 calc(20% - 20px); }
  .mob-25 { flex: 0 0 calc(25% - 20px); }
  .mob-30 { flex: 0 0 calc(30% - 20px); }
  .mob-33 { flex: 0 0 calc(33.333% - 20px); }
  .mob-40 { flex: 0 0 calc(40% - 20px); }
  .mob-50 { flex: 0 0 calc(50% - 20px); }
  .mob-60 { flex: 0 0 calc(60% - 20px); }
  .mob-70 { flex: 0 0 calc(70% - 20px); }
  .mob-100 { flex: 0 0 calc(100% - 20px); }

  body.l2f-design-global #bodypad { margin-left: 0; width: 100% !important; padding: 0 !important;padding-top: 8px !important; }
  .l2f-design-main { padding: 10px !important; }
  #l2fDesignShell .mob-10 { flex: 0 0 calc(10% - 13.5px) !important; max-width: calc(10% - 13.5px) !important; }
  #l2fDesignShell .mob-16 { flex: 0 0 calc(16.666% - 12.5px) !important; max-width: calc(16.666% - 12.5px) !important; }
  #l2fDesignShell .mob-20 { flex: 0 0 calc(20% - 12px) !important; max-width: calc(20% - 12px) !important; }
  #l2fDesignShell .mob-25 { flex: 0 0 calc(25% - 11.25px) !important; max-width: calc(25% - 11.25px) !important; }
  #l2fDesignShell .mob-30 { flex: 0 0 calc(30% - 10.5px) !important; max-width: calc(30% - 10.5px) !important; }
  #l2fDesignShell .mob-33 { flex: 0 0 calc(33.333% - 10px) !important; max-width: calc(33.333% - 10px) !important; }
  #l2fDesignShell .mob-40 { flex: 0 0 calc(40% - 9px) !important; max-width: calc(40% - 9px) !important; }
  #l2fDesignShell .mob-50 { flex: 0 0 calc(50% - 7.5px) !important; max-width: calc(50% - 7.5px) !important; }
  #l2fDesignShell .mob-60 { flex: 0 0 calc(60% - 6px) !important; max-width: calc(60% - 6px) !important; }
  #l2fDesignShell .mob-70 { flex: 0 0 calc(70% - 4.5px) !important; max-width: calc(70% - 4.5px) !important; }
  #l2fDesignShell .mob-100 { flex: 0 0 100% !important; max-width: 100% !important; }
  #l2fDesignShell .l2f-design-sidebar,
  #l2fDesignShell .l2f-design-topbar,
  body.l2f-design-global .l2f-design-global-sidebar,
  body.l2f-design-global .l2f-design-global-topbar { display: none !important; }
  #l2fDesignShell .l2f-design-mobilebar,
  body.l2f-design-global .l2f-design-global-mobilebar,
  .l2f-design-mobile-only { display: flex !important; }
  .l2f-design-drawer { width: min(82vw, 250px); max-width: 250px; }
}

@media (min-width: 769px) and (max-width: 1150px) {
  .tab-10 { flex: 0 0 calc(10% - 20px); }
  .tab-16 { flex: 0 0 calc(16.666% - 20px); }
  .tab-20 { flex: 0 0 calc(20% - 20px); }
  .tab-25 { flex: 0 0 calc(25% - 20px); }
  .tab-30 { flex: 0 0 calc(30% - 20px); }
  .tab-33 { flex: 0 0 calc(33.333% - 20px); }
  .tab-40 { flex: 0 0 calc(40% - 20px); }
  .tab-50 { flex: 0 0 calc(50% - 20px); }
  .tab-60 { flex: 0 0 calc(60% - 20px); }
  .tab-70 { flex: 0 0 calc(70% - 20px); }
  .tab-100 { flex: 0 0 calc(100% - 20px); }
  .prod { flex:0 0 calc((100% - 20px) / 3) !important;max-width:calc((100% - 20px) / 3) !important; }

  body.l2f-design-global #bodypad { margin-left: 0; width: 100% !important; padding: 0 !important;padding-top: 8px !important; }
  #l2fDesignShell .tab-10 { flex: 0 0 calc(10% - 13.5px) !important; max-width: calc(10% - 13.5px) !important; }
  #l2fDesignShell .tab-16 { flex: 0 0 calc(16.666% - 12.5px) !important; max-width: calc(16.666% - 12.5px) !important; }
  #l2fDesignShell .tab-20 { flex: 0 0 calc(20% - 12px) !important; max-width: calc(20% - 12px) !important; }
  #l2fDesignShell .tab-25 { flex: 0 0 calc(25% - 11.25px) !important; max-width: calc(25% - 11.25px) !important; }
  #l2fDesignShell .tab-30 { flex: 0 0 calc(30% - 10.5px) !important; max-width: calc(30% - 10.5px) !important; }
  #l2fDesignShell .tab-33 { flex: 0 0 calc(33.333% - 10px) !important; max-width: calc(33.333% - 10px) !important; }
  #l2fDesignShell .tab-40 { flex: 0 0 calc(40% - 9px) !important; max-width: calc(40% - 9px) !important; }
  #l2fDesignShell .tab-50 { flex: 0 0 calc(50% - 7.5px) !important; max-width: calc(50% - 7.5px) !important; }
  #l2fDesignShell .tab-60 { flex: 0 0 calc(60% - 6px) !important; max-width: calc(60% - 6px) !important; }
  #l2fDesignShell .tab-70 { flex: 0 0 calc(70% - 4.5px) !important; max-width: calc(70% - 4.5px) !important; }
  #l2fDesignShell .tab-100 { flex: 0 0 100% !important; max-width: 100% !important; }
  .l2f-design-sidebar, .l2f-design-global-sidebar,
  .l2f-design-topbar, .l2f-design-global-topbar { display: none !important; }
  .l2f-design-mobilebar, .l2f-design-global-mobilebar, .l2f-design-mobile-only { display: flex !important; }
  .l2f-design-drawer { width: min(82vw, 250px); max-width: 250px; }
}

body.l2f-design-global.l2f-kiosk-mode .prod { flex:0 0 calc((100% - 40px) / 5) !important;max-width:calc((100% - 40px) / 5 !important; }
body.l2f-design-global.l2f-kiosk-mode #bodypad {
margin-left: 0px !important;
width: 100% !important;
padding: 0 !important;
}

/* Fullscreen */
body.l2f-design-global.l2f-kiosk-mode #bodypad,
html:fullscreen body.l2f-design-global #bodypad,
html:-webkit-full-screen body.l2f-design-global #bodypad {
  margin-left: 0 !important;
  width: 100% !important;
  padding: 0 !important;
  min-height: 100vh !important;
}
body.l2f-design-global.l2f-kiosk-mode #corps,
html:fullscreen body.l2f-design-global #corps,
html:-webkit-full-screen body.l2f-design-global #corps {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}