@charset "UTF-8";

/* Selection orange Boracay applique partout (back-office, fournisseur, client) */
::selection      { background: var(--cp-primary); color: #fff; }
::-moz-selection { background: var(--cp-primary); color: #fff; }

/* Dialog header style */
:root {
  /*    --mud-input-border-radius: 0px;
  --mud-chip-border-radius: 8px;
  --mud-button-border-radius: 8px;
  --mud-dialog-close-button-color: white;
  --table-pager-height: 48px;
  --table-toolbar-height: 40px;
  --table-toolbar-margin: 5px;
  --highliter-color: var(--mud-palette-secondary);
  --datagrid-header-height: 32px;
  --form-spacing: 10px;
  --form-padding: 7px;
  --main-content-padding: 15px;
  --mud-drawer-width-left: 190px;*/
  --chips-primary-1: #DC2626;
  --chips-secondary-1: #FECCCF;
  --chips-primary-2: #EA580C;
  --chips-secondary-2: #FFEDD5;
  --chips-primary-3: #BE9000;
  --chips-secondary-3: #FEF6C6;
  --chips-primary-4: #5D9A06;
  --chips-secondary-4: #ecfccc;
  --chips-primary-5: #16A34A;
  --chips-secondary-5: #DCFCE7;
  --chips-primary-6: #0D9488;
  --chips-secondary-6: #CCFBF1;
  --chips-primary-7: #0991B2;
  --chips-secondary-7: #CFFAFE;
  --chips-primary-8: #208A9E;
  --chips-secondary-8: #DBEAFE;
  --chips-primary-9: #8C46E5;
  --chips-secondary-9: #EBE1FF;
  --chips-primary-10: #C027D3;
  --chips-secondary-10: #F8EAFD;
  --chips-primary-11: #FF099C;
  --chips-secondary-11: #FBDBFE;
  --chips-primary-12: #676767;
  --chips-secondary-12: #D8D8D8;
}

html, body, input, button, select, textarea {
  font-family: 'Inter', Roboto, Helvetica, Arial, sans-serif;
}

.icon-small {
  font-size: 1rem;
  align-self: center;
}

/* --------- Modification de style qui concerne les Datagrids ------------ */
/* Réduction des padding des datagrid dense */
.mud-table-dense * .mud-table-row .mud-table-cell {
  padding: 1px 24px 1px 16px;
}

.mud-card-header {
  padding: 10px 16px 2px 16px;
}

/* Mise en gris du fond des headers de data-grid */
.background-grey {
  background-color: var(--mud-palette-background-gray);
}
.background-grey .mud-table-row *:not(.mud-resizer) {
  background-color: var(--mud-palette-gray-lighter) !important;
  padding-bottom: 2px !important;
}
.background-grey *:not(.mud-resizer) {
  background-color: var(--mud-palette-gray-lighter);
}

.section-bg {
  background-color: white;
  padding: 16px;
  border-radius: 8px;
}

.blury-background-dialog {
  backdrop-filter: blur(10px);
}

.fullwidth-table .mud-table-container {
  width: 100% !important;
  overflow: hidden;
}

.minwidthtable-column .mud-table .mud-table-container {
  width: auto !important;
  white-space: nowrap;
}

.minwidthtable-column .mud-table-dense * .mud-table-row .mud-table-cell {
  padding: 4px 1px 4px 5px;
}

.my-fixed-grid {
  height: 400px !important;
  display: flex;
  flex-direction: column;
}

.my-fixed-grid .mud-data-grid {
  height: 100% !important;
}

.my-fixed-grid .mud-table-cell {
  white-space: normal !important;
}

.my-fixed-grid .mud-table-container {
  overflow-x: hidden !important;
}

.my-fixed-grid .mud-table-head .mud-table-cell {
  white-space: nowrap !important;
}

.my-fixed-grid .mud-table-body .mud-table-cell {
  white-space: normal !important;
}

.uppercase-input input {
  text-transform: uppercase;
}

.TabPanelClass-bg-White {
  background-color: var(--mud-palette-surface);
}

.mud-table-sticky-header * .mud-table-root .mud-table-head.mud-table-dense .filter-header-cell {
  top: 37px;
  padding-top: 5px;
}

.mud-data-grid {
  /*.mud-table-root {
      table-layout: fixed;
  }*/
  /*.mud-table-cell .mud-resizer {
      bottom: 0;
      z-index: 2;
  }*/
  /*.cell-truncate {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
  }*/
  /*// La dernière colonne absorbe l'espace restant — évite le blanc sur la droite
  thead tr th.mud-table-cell:last-child {
      width: auto !important;
  }*/
}
.mud-data-grid .text-truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 0;
}
.mud-data-grid .mud-table-root {
  width: 100% !important;
}
.mud-data-grid thead tr th.mud-table-cell:last-child,
.mud-data-grid tbody tr td.mud-table-cell:last-child {
  width: auto !important;
}
.mud-data-grid .mud-table {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.mud-data-grid .mud-table-container {
  flex: 1;
  min-height: 0;
  height: unset !important;
  overflow-y: auto !important;
}
.mud-data-grid td.mud-table-cell:has(.mud-chip) {
  min-width: 10em;
}
.mud-data-grid th.mud-table-cell .mud-resizer {
  opacity: 0;
  transition: opacity 0.1s;
}
.mud-data-grid th.mud-table-cell:hover .mud-resizer {
  opacity: 1;
}
.mud-data-grid th.mud-table-cell .column-header {
  overflow: hidden;
  width: inherit;
  min-width: 40px;
}
.mud-data-grid th.mud-table-cell .column-header .sortable-column-header {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 2em;
}

/* ── Pages de master liste : la grille scrolle en interne, la page reste fixe ──
   Active UNIQUEMENT sur les pages qui utilisent <MyListMainContentStack>
   (qui ajoute la classe marker `.bcy-list-page`). Les pages detail avec
   sous-grille ne sont PAS impactees. */
.bcy-content:has(.bcy-list-page) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bcy-content > .bcy-list-page {
  height: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
.bcy-content > .bcy-list-page > .mud-stack:has(> .mud-data-grid) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
}
.bcy-list-page .mud-stack > .mud-data-grid {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: auto !important;
  display: flex;
  flex-direction: column;
}
.bcy-list-page .mud-stack > .mud-data-grid .mud-table-container {
  flex: 1 1 auto;
  min-height: 0;
}

/* ── Pages avec MyTabs dans bcy-list-page (CustomerTabs, SalesQuoteDetail) ──
   Tabs header sticky en haut, panneau actif fill + contenu scrollable.
   Quand le stack ne contient que des tabs (eventuellement avec un form),
   on annule la margin ma-4 pour aligner les tabs avec l'app bar. */
.bcy-list-page:has(> .mud-tabs),
.bcy-list-page:has(> .mud-form > .mud-tabs) {
  margin: 0 !important;
}
.bcy-list-page > .mud-form,
.bcy-list-page > form {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.bcy-list-page .mud-tabs {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.bcy-list-page .mud-tabs > .mud-tabs-toolbar {
  flex: 0 0 auto;
}
.bcy-list-page .mud-tabs .mud-tabs-panels {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bcy-list-page .mud-tabs .mud-tab-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* MudStack/MyMainContentStack ne portent PAS de classe `.mud-stack` : le div
   rendu est `.d-flex.ma-4` avec un inline `height: calc(100% - 77px)` (reserve
   a la sticky app bar des pages detail). Dans un onglet il n'y a pas d'app bar
   au-dessus → ce calc laisse ~77px de marge vide en bas. Comme .mud-tab-panel
   est en `display:contents`, l'enfant direct du panneau devient l'item flex de
   .mud-tabs-panels : on le force a remplir et on annule le height calc. */
.bcy-list-page .mud-tabs .mud-tabs-panels > .mud-tab-panel > * {
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;
  /* Scroll INTERNE du panneau (2026-07-20) : le shell est en page fixe (overflow hidden
     en cascade), donc un contenu d'onglet plus haut que l'ecran etait rogne sans aucun
     scroll possible (ex : devis avec details d'adresse de livraison depliee). Le header
     des tabs reste sticky, seul le contenu du panneau actif scrolle. Les panneaux dont
     la grille scrolle deja en interne ne debordent pas → aucune scrollbar ajoutee. */
  overflow-y: auto;
}
/* Onglet Général du devis : le panneau contient un MudForm (scope ReadOnly) qui enveloppe
   le MyMainContentStack — le `height: calc(100% - 77px)` inline du stack doit aussi etre
   annule a ce niveau pour que le contenu s'etale naturellement dans le form scrollable. */
.bcy-list-page .mud-tabs .mud-tabs-panels > .mud-tab-panel > .mud-form > *,
.bcy-list-page .mud-tabs .mud-tabs-panels > .mud-tab-panel > form > * {
  height: auto !important;
}

/* ── Master listes (MyDataGrid) — look back-office sobre ────────────────── */
.mud-data-grid {
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  /* Fine bordure neutre via box-shadow (pas de hauteur ajoutee) */
  box-shadow: 0 0 0 1px #e6e6e6;
}
.mud-data-grid .background-grey,
.mud-data-grid .background-grey *:not(.mud-resizer) {
  background-color: #f7f7f7 !important;
}
.mud-data-grid .mud-table-head {
  border-bottom: 1px solid #e6e6e6;
}
.mud-data-grid .mud-table-head .mud-table-cell {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  vertical-align: middle;
}
.mud-data-grid .mud-table-head .filter-header-cell {
  top: 50px !important;
}
.mud-data-grid .mud-table-head .column-header {
  font-weight: 600;
  color: var(--cp-dark, #373854);
}
.mud-data-grid tbody .mud-table-cell {
  border-bottom: 1px solid #f0f0f0;
}
.mud-data-grid tbody .mud-table-row:nth-of-type(even) > .mud-table-cell {
  background-color: #fafbfc;
}
.mud-data-grid tbody .mud-table-row:hover > .mud-table-cell {
  background-color: rgba(239, 124, 89, 0.05) !important;
}
.mud-data-grid tbody .mud-table-row.selected > .mud-table-cell {
  background-color: rgba(239, 124, 89, 0.10) !important;
}
.mud-data-grid .mud-table-pagination {
  border-top: 1px solid #e6e6e6;
  background-color: #f7f7f7;
}
.mud-data-grid .mud-table-container::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.mud-data-grid .mud-table-container::-webkit-scrollbar-track {
  background: transparent;
}
.mud-data-grid .mud-table-container::-webkit-scrollbar-thumb {
  background: #d0d0d0;
  border-radius: 5px;
  border: 2px solid #fff;
}
.mud-data-grid .mud-table-container::-webkit-scrollbar-thumb:hover {
  background: #b0b0b0;
}

.grid-lines-table tr:not(:hover) .row-actions-hover {
  visibility: hidden;
}

/* ==========================================================================
   Boracay layout — bcy-shell, sidebar, topbar
   ========================================================================== */

.bcy-shell, .bcy-shell input, .bcy-shell button, .bcy-shell a {
  font-family: inherit;
}
.bcy-shell {
  display: flex; flex-direction: row; height: 100vh; width: 100vw; overflow: hidden; color: #373854;
}
.bcy-sidebar {
  flex: 0 0 auto; display: flex; flex-direction: column; height: 100vh;
  background-color: #fff; border-right: 1px solid #d8dbe2;
  box-shadow: 4px 0 18px rgba(55,56,84,0.06);
  transition: width 220ms cubic-bezier(0.4,0,0.2,1); z-index: 1100; position: relative;
}
.bcy-sidebar.is-open { width: 270px; }
.bcy-sidebar.is-mini { width: 76px; }
.bcy-brand {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  height: 72px; padding: 0 18px; border-bottom: 1px solid #ecedf2;
  background: linear-gradient(180deg,#fffaf7 0%,#fff 100%);
}
.bcy-brand-img { height: 38px; width: auto; object-fit: contain; display: block; }
.bcy-brand-img-mini { height: 38px; width: 38px; border-radius: 50%; object-fit: cover; object-position: 0 50%; display: block; }
.bcy-nav {
  flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 16px 12px 12px;
  scrollbar-width: thin; scrollbar-color: #ddd transparent;
}
.bcy-nav::-webkit-scrollbar { width: 6px; }
.bcy-nav::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }
.bcy-sidebar.is-mini .bcy-nav { padding: 16px 0; }
.bcy-section-label {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px 8px;
  font-size: 0.66rem; font-weight: 900; letter-spacing: 1.8px; color: #EF7C59;
  text-transform: uppercase; user-select: none;
}
.bcy-section-label:not(:first-child) { padding-top: 18px; }
.bcy-section-bullet {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg,#EF7C59 0%,#e0523c 100%);
  box-shadow: 0 0 0 3px rgba(239,124,89,0.15);
}
.bcy-navlink {
  position: relative; display: flex; align-items: center; gap: 12px;
  width: 100%; margin: 3px 0; padding: 12px 14px; border: none; background: transparent;
  border-radius: 12px; color: #373854; font-size: 0.92rem; font-weight: 700;
  letter-spacing: -0.1px; text-decoration: none; cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4,0,0.2,1); text-align: left; box-sizing: border-box;
}
.bcy-navlink .mud-icon-root.bcy-navlink-icon {
  flex: 0 0 auto; color: #888; font-size: 22px !important; width: 22px; height: 22px; transition: color 0.18s ease;
}
.bcy-navlink-text { flex: 1 1 auto; color: inherit; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bcy-navlink:hover { background-color: #fdf2ef; color: #EF7C59; transform: translateX(2px); }
.bcy-navlink:hover .mud-icon-root.bcy-navlink-icon { color: #EF7C59; }
.bcy-navlink.active {
  background: linear-gradient(135deg,#EF7C59 0%,#e0523c 100%); color: #fff !important;
  font-weight: 800; box-shadow: 0 6px 18px rgba(239,124,89,0.40); transform: none;
}
.bcy-navlink.active .bcy-navlink-text { color: #fff !important; }
.bcy-navlink.active .mud-icon-root.bcy-navlink-icon { color: #fff !important; }
.bcy-navlink.active:hover { transform: none; }
.bcy-group { display: block; }
.bcy-group-trigger.has-active { color: #EF7C59; }
.bcy-group-trigger.has-active .mud-icon-root.bcy-navlink-icon { color: #EF7C59; }
.bcy-group-trigger .mud-icon-root.bcy-group-chev {
  flex: 0 0 auto; color: #bbb; font-size: 18px !important; width: 18px; height: 18px;
  transition: transform 0.22s ease, color 0.18s ease;
}
.bcy-group.is-expanded .bcy-group-trigger .mud-icon-root.bcy-group-chev { transform: rotate(180deg); color: #EF7C59; }
.bcy-submenu {
  max-height: 0; overflow: hidden; margin-left: 22px; padding-left: 12px;
  border-left: 2px solid #fdf2ef; transition: max-height 0.28s cubic-bezier(0.4,0,0.2,1);
}
.bcy-group.is-expanded .bcy-submenu { max-height: 600px; padding-top: 4px; padding-bottom: 6px; }
.bcy-sublink {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin: 2px 0;
  border-radius: 10px; color: #888; font-size: 0.86rem; font-weight: 600;
  text-decoration: none; transition: all 0.18s ease;
}
.bcy-sublink-bullet {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%; background-color: #d4d6e0;
  flex: 0 0 auto; transition: background-color 0.18s ease, transform 0.18s ease;
}
.bcy-sublink-text { color: inherit; }
.bcy-sublink:hover { background-color: #fdf2ef; color: #EF7C59; transform: translateX(2px); }
.bcy-sublink:hover .bcy-sublink-bullet { background-color: #EF7C59; transform: scale(1.3); }
.bcy-sublink.active {
  background: linear-gradient(135deg,#EF7C59 0%,#e0523c 100%); color: #fff !important;
  font-weight: 800; box-shadow: 0 4px 14px rgba(239,124,89,0.35); transform: none;
}
.bcy-sublink.active .bcy-sublink-text { color: #fff !important; }
.bcy-sublink.active .bcy-sublink-bullet { background-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.4); }
.bcy-sidebar.is-mini .bcy-navlink {
  width: 52px; height: 52px; margin: 4px auto; padding: 0; border-radius: 14px; justify-content: center;
}
.bcy-sidebar.is-mini .bcy-navlink:hover { transform: none; }
.bcy-sidebar.is-mini .bcy-navlink.active { transform: none; }
.bcy-mini-wrap { position: relative; display: flex; justify-content: center; }
.bcy-footer {
  flex: 0 0 auto; padding: 12px; border-top: 1px solid #ecedf2;
  background-color: #fafbfd; position: relative;
}
.bcy-sidebar.is-mini .bcy-footer { padding: 12px 0; display: flex; flex-direction: column; align-items: center; }
.bcy-user-wrap { position: relative; }
.bcy-user-card {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px;
  background-color: #fff; border: 1.5px solid #e0e2e8; border-radius: 14px;
  cursor: pointer; text-align: left; transition: all 0.18s ease;
  box-shadow: 0 2px 8px rgba(55,56,84,0.04); box-sizing: border-box;
}
.bcy-user-card:hover {
  border-color: #EF7C59; background-color: #fdf2ef;
  transform: translateY(-1px); box-shadow: 0 6px 18px rgba(239,124,89,0.16);
}
.bcy-user-card.mini { width: 52px; height: 52px; padding: 0; justify-content: center; border-radius: 14px; }
.bcy-user-text { flex: 1 1 auto; overflow: hidden; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; align-items: flex-start; }
.bcy-user-name { font-size: 0.88rem; font-weight: 800; color: #373854; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bcy-user-mail { font-size: 0.72rem; color: #888; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; margin-top: 1px; }
.bcy-user-card .mud-icon-root.bcy-user-chev { color: #bbb; font-size: 18px !important; flex: 0 0 auto; transition: color 0.18s ease; }
.bcy-user-card:hover .mud-icon-root.bcy-user-chev { color: #EF7C59; }
.bcy-avatar {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg,#EF7C59 0%,#e0523c 100%);
  color: #fff; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.4px;
  flex: 0 0 auto; box-shadow: 0 4px 12px rgba(239,124,89,0.30);
}
.bcy-avatar-lg { width: 52px; height: 52px; font-size: 1rem; box-shadow: 0 6px 18px rgba(239,124,89,0.35); }
.bcy-version-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 6px 2px; }
.bcy-version-label { font-size: 0.66rem; font-weight: 800; letter-spacing: 1.4px; color: #bbb; text-transform: uppercase; }
.bcy-version-tag {
  display: inline-flex; align-items: center; padding: 3px 10px; background-color: #fdf2ef;
  color: #EF7C59; font-size: 0.7rem; font-weight: 800; border-radius: 999px;
  letter-spacing: 0.2px; border: 1px solid rgba(239,124,89,0.25);
}
.bcy-user-popover {
  position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; background-color: #fff;
  border: 1px solid #e0e2e8; border-radius: 18px;
  box-shadow: 0 20px 50px rgba(55,56,84,0.22); overflow: hidden; z-index: 1000;
}
.bcy-user-popover-mini { left: calc(100% + 12px); right: auto; bottom: 0; width: 280px; }
.bcy-user-popover-header {
  display: flex; align-items: center; gap: 14px; padding: 18px 18px 16px;
  background: linear-gradient(135deg,#fdf2ef 0%,#fff 100%); border-bottom: 1px solid #f5f5f5;
}
.bcy-user-popover-info { flex: 1 1 auto; overflow: hidden; min-width: 0; }
.bcy-user-popover-name { font-size: 1rem; font-weight: 800; color: #373854; line-height: 1.25; }
.bcy-user-popover-mail { font-size: 0.8rem; color: #888; margin-top: 2px; font-weight: 500; }
.bcy-user-popover-badge {
  display: inline-block; margin-top: 8px; padding: 3px 10px; background-color: #EF7C59; color: #fff;
  font-size: 0.65rem; font-weight: 800; letter-spacing: 0.8px; border-radius: 999px;
  text-transform: uppercase; box-shadow: 0 2px 6px rgba(239,124,89,0.30);
}
.bcy-user-popover-body { padding: 6px; }
.bcy-popover-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: none;
  background: transparent; border-radius: 10px; color: #373854; font-size: 0.88rem;
  font-weight: 700; text-align: left; cursor: pointer; transition: all 0.15s ease;
}
.bcy-popover-item .mud-icon-root.bcy-popover-icon { color: #888; font-size: 18px !important; width: 18px; height: 18px; flex: 0 0 auto; }
.bcy-popover-item:hover { background-color: #fdf2ef; color: #EF7C59; }
.bcy-popover-item:hover .mud-icon-root.bcy-popover-icon { color: #EF7C59; }
.bcy-popover-danger { color: #dc3545 !important; }
.bcy-popover-danger .mud-icon-root.bcy-popover-icon { color: #dc3545 !important; }
.bcy-popover-danger:hover { background-color: #fef2f2 !important; color: #dc3545 !important; }
.bcy-popover-danger:hover .mud-icon-root.bcy-popover-icon { color: #dc3545 !important; }
.bcy-popover-sep { height: 1px; margin: 6px 4px; background-color: #ecedf2; }
.bcy-backdrop { position: fixed; inset: 0; background: transparent; z-index: 900; }
.bcy-edge-toggle {
  position: absolute; top: 56px; right: -14px; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #e0e2e8; border-radius: 50%; background-color: #fff; color: #373854;
  cursor: pointer; box-shadow: 0 2px 8px rgba(55,56,84,0.12);
  opacity: 0; transform: translateX(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  z-index: 70; padding: 0;
}
.bcy-sidebar:hover .bcy-edge-toggle, .bcy-edge-toggle:focus-visible { opacity: 1; transform: translateX(0); }
.bcy-edge-toggle:hover { background-color: #fdf2ef; border-color: #EF7C59; color: #EF7C59; }
.bcy-main {
  flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0;
  height: 100vh; overflow: hidden; background-color: #f4f5f8;
}
.bcy-topbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 0 20px;
  height: 72px; background-color: #ffffff; z-index: 50;
  border-bottom: 1px solid #d8dbe2; box-shadow: 0 6px 18px rgba(55,56,84,0.06);
  position: sticky; top: 0;
}
.bcy-title-block { display: flex; flex-direction: column; line-height: 1.1; gap: 2px; margin-left: 8px; }
.bcy-subtitle { margin: 2px 0 0; font-size: 0.82rem; font-weight: 500; color: #888; letter-spacing: 0; }
.bcy-title { font-size: 1.35rem; font-weight: 900; color: #373854; margin: 0; letter-spacing: -0.4px; }
.bcy-spacer { flex: 1 1 auto; }
.bcy-topbar-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.bcy-action-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px;
  border: 1.5px solid #e0e2e8; border-radius: 10px; background-color: #ffffff; color: #373854;
  font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: all 0.15s ease;
  font-family: inherit;
}
.bcy-action-btn:hover:not(:disabled) { background-color: #fdf2ef; border-color: #EF7C59; color: #EF7C59; transform: translateY(-1px); }
.bcy-action-btn:disabled { opacity: 0.55; cursor: default; }
.bcy-action-btn-primary {
  background: linear-gradient(135deg, #EF7C59 0%, #e0523c 100%);
  border-color: transparent; color: #ffffff;
  box-shadow: 0 4px 12px rgba(239,124,89,0.30);
}
.bcy-action-btn-primary:hover:not(:disabled) { color: #ffffff; background: linear-gradient(135deg, #e96c47 0%, #d54730 100%); border-color: transparent; box-shadow: 0 6px 16px rgba(239,124,89,0.40); }
.bcy-action-btn .mud-icon-root { font-size: 18px !important; width: 18px; height: 18px; }
.bcy-content { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; }


/* ==========================================================================
   Design tokens portail client (--cp-*)
   Disponibles dans les 3 apps via Naruto.SharedUI.
   ========================================================================== */
:root {
    /* ── Couleur primaire (orange Boracay) ── */
    --cp-primary:        #EF7C59;
    --cp-primary-dark:   #e0523c;
    --cp-primary-tint:   #fdf2ef;
    --cp-primary-hover:  #fff9f7;
    --cp-primary-glow:   rgba(239, 124, 89, 0.35);

    /* ── Neutres ── */
    --cp-dark:   #1a1a1a;
    --cp-white:  #ffffff;
    --cp-light:  #f9f9f9;
    --cp-muted:  #888;
    --cp-subtle: #bbb;

    /* ── Couleurs semantiques ── */
    --cp-success:        #1e9e62;
    --cp-success-dark:   #178451;
    --cp-success-tint:   #e8f8f0;
    --cp-success-border: #b8ecd6;

    --cp-danger:         #dc3545;
    --cp-danger-tint:    #fef2f2;
    --cp-danger-border:  #f8c0c0;

    --cp-warning:        #d97706;
    --cp-warning-tint:   #fffbeb;
    --cp-warning-border: #fde68a;

    --cp-info:           #4a6fd8;
    --cp-info-tint:      #eff4ff;
    --cp-info-border:    #c3d4f8;

    /* ── Bordures ── */
    --cp-border:       #eee;
    --cp-border-light: #f0f0f0;

    /* ── Ombres ── */
    --cp-shadow-sm: 0 2px 8px rgba(0,0,0,.06);
    --cp-shadow-md: 0 4px 20px rgba(0,0,0,.08);
    --cp-shadow-lg: 0 20px 60px rgba(0,0,0,.12);

    /* ── Rayons ── */
    --cp-radius-sm:   6px;
    --cp-radius-md:   12px;
    --cp-radius-lg:   20px;
    --cp-radius-xl:   32px;
    --cp-radius-full: 9999px;
}

/* ==========================================================================
   CARTE (.acc-card) — partagée entre le portail client et le back-office
   ========================================================================== */

.acc-card {
    background:    var(--cp-white);
    border:        1px solid var(--cp-border);
    border-radius: var(--cp-radius-lg);
    padding:       24px 28px;
    box-shadow:    var(--cp-shadow-md);
}
/* display + flex-direction explicites pour ecraser le .mud-card display:flex column
   qui s'applique aussi quand MyCard est rendu en MudCard */
.acc-card--section { display: block; }
.acc-card--row     { display: flex; flex-direction: row; align-items: center; gap: 18px; }

/* ========================================================================
   MyTextField / MyNumericField (heritent de MudTextField/MudNumericField)
   Overrides DA portail client
   ======================================================================== */

/* Surcharge la variable Primary localement : MudBlazor utilise cette variable
   pour la bordure focus, le label focus et le caret. Resultat : focus orange. */
.my-tf,
.my-nf,
.my-sel,
.my-ac,
.my-dp {
    --mud-palette-primary: var(--mud-palette-secondary);
}

/* Champs de filtre des datagrid (inputs MudBlazor bruts) : focus orange */
.mud-data-grid .mud-input,
.mud-data-grid .mud-input-control {
    --mud-palette-primary: var(--mud-palette-secondary);
}

/* Radius doux 8px (defaut theme = 4px) */
.my-tf .mud-input-outlined .mud-input-outlined-border,
.my-tf .mud-input.mud-input-outlined,
.my-nf .mud-input-outlined .mud-input-outlined-border,
.my-nf .mud-input.mud-input-outlined,
.my-sel .mud-input-outlined .mud-input-outlined-border,
.my-sel .mud-input.mud-input-outlined,
.my-ac .mud-input-outlined .mud-input-outlined-border,
.my-ac .mud-input.mud-input-outlined,
.my-dp .mud-input-outlined .mud-input-outlined-border,
.my-dp .mud-input.mud-input-outlined {
    border-radius: 8px;
}

/* MyDatePicker — calendrier popover (detache du DOM, donc cible global sur
   .mud-picker-calendar — tous les date pickers de l'app passent par MyDatePicker) */
.mud-picker {
    --mud-palette-primary: var(--mud-palette-secondary);
}

.mud-picker.mud-picker-paper {
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}

.mud-picker-calendar .mud-day.mud-current:not(.mud-selected) {
    color: var(--mud-palette-secondary);
    border: 1px solid var(--mud-palette-secondary);
}

.mud-picker-calendar .mud-day.mud-selected {
    background-color: var(--mud-palette-secondary) !important;
    color: #fff !important;
}

.mud-picker-calendar .mud-day:hover:not(.mud-disabled):not(.mud-selected) {
    background-color: rgba(239, 124, 89, 0.10);
}

/* Label : reserve la place de l'icone adornment-end en position non-shrunk
   (par defaut MudBlazor max-width: calc(100% - 14px) -> le label deborde sur l'icone) */
.my-tf .mud-input.mud-input-adorned-end ~ label.mud-input-label-outlined,
.my-nf .mud-input.mud-input-adorned-end ~ label.mud-input-label-outlined,
.my-sel .mud-input.mud-input-adorned-end ~ label.mud-input-label-outlined,
.my-ac .mud-input.mud-input-adorned-end ~ label.mud-input-label-outlined,
.my-dp .mud-input.mud-input-adorned-end ~ label.mud-input-label-outlined {
    max-width: calc(100% - 50px);
}

/* Fond surface sur le label floattant (couvre la bordure derriere — fallback
   si la "notch" du <legend> du fieldset ne se cree pas correctement) */
.my-tf .mud-shrink ~ label.mud-input-label-outlined,
.my-tf .mud-input:focus-within ~ label.mud-input-label-outlined,
.my-nf .mud-shrink ~ label.mud-input-label-outlined,
.my-nf .mud-input:focus-within ~ label.mud-input-label-outlined,
.my-sel .mud-shrink ~ label.mud-input-label-outlined,
.my-sel .mud-input:focus-within ~ label.mud-input-label-outlined,
.my-ac .mud-shrink ~ label.mud-input-label-outlined,
.my-ac .mud-input:focus-within ~ label.mud-input-label-outlined,
.my-dp .mud-shrink ~ label.mud-input-label-outlined,
.my-dp .mud-input:focus-within ~ label.mud-input-label-outlined {
    background-color: var(--mud-palette-surface);
}

/* MySelect — chip compact dans le bouton ferme (la taille naturelle de MyChip
   ecrase la box compacte de MudSelect, repris de l'ancien MySelect custom) */
.my-sel .client-chip {
    width: auto !important;
    max-width: 100%;
    padding: 2px 10px !important;
    font-size: 0.80rem !important;
    border-width: 1px !important;
    line-height: 1.3 !important;
}

/* MySelect — centrage vertical du contenu selectionne dans le bouton ferme
   (le ChildContent du MudSelectItem peut etre du markup avec sa propre hauteur
   ex. MudStack/MudText qui s'aligne en haut par defaut) */
.my-sel .mud-select-input,
.my-sel .mud-input-slot.mud-select-input {
    display: flex;
    align-items: center;
}

/* MyNumericField — mode MyGridCell : ultra compact pour edition inline dans <td>
   (alignement a droite garde uniquement ici, pattern table financiere) */
.my-nf-gridcell .mud-input.mud-input-outlined,
.my-nf-gridcell .mud-input-outlined .mud-input-outlined-border {
    border-radius: 4px;
    min-height: 24px;
}

.my-nf-gridcell input {
    font-size: 0.75rem;
    padding: 0 6px !important;
    text-align: right;
}