.stock-page {
  padding: 28px;
  background: #f3f6fb;
  min-height: 100vh;
}

.stock-header,
.stock-toolbar,
.stock-table-card {
  background: #ffffff;
  border-radius: 22px;
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.08);
}

.stock-header {
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stock-subtitle {
  color: #64748b;
  font-weight: 600;
  margin: 0;
}

.stock-header h1 {
  margin: 6px 0 0;
  color: #0f172a;
  font-size: 30px;
}

.stock-header-actions,
.stock-toolbar-right,
.view-switcher {
  display: flex;
  gap: 10px;
  align-items: center;
}

.primary-btn,
.secondary-btn {
  border: none;
  border-radius: 14px;
  padding: 12px 18px;
  font-weight: 700;
  display: flex;
  gap: 8px;
  align-items: center;
  cursor: pointer;
}

.primary-btn {
  background: #0f172a;
  color: white;
}

.secondary-btn {
  background: #e2e8f0;
  color: #0f172a;
}

.stock-toolbar {
  margin-top: 18px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.stock-subtabs {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  background: #ffffff;
  border-radius: 18px;
  padding: 8px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
}

.stock-subtabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border: none;
  border-radius: 12px;
  background: #f1f5f9;
  color: #334155;
  padding: 0 16px;
  font-weight: 900;
}

.stock-subtabs button.active {
  background: #0f172a;
  color: #ffffff;
}

.stock-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 0 14px;
}

.stock-search input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  padding: 14px 0;
  font-size: 15px;
}

.view-switcher {
  background: #f1f5f9;
  padding: 5px;
  border-radius: 14px;
}

.view-switcher button {
  border: none;
  background: transparent;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  color: #64748b;
}

.view-switcher button.active {
  background: #0f172a;
  color: white;
}

.stock-stats {
  display: flex;
  gap: 16px;
  margin-top: 18px;
}

.stock-stat-card {
  background: white;
  border-radius: 18px;
  padding: 18px;
  min-width: 180px;
  display: flex;
  gap: 12px;
  align-items: center;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
}

.stock-stat-card h3 {
  margin: 0;
  font-size: 24px;
}

.stock-stat-card p {
  margin: 2px 0 0;
  color: #64748b;
}

.stock-content {
  margin-top: 20px;
}

/* TABLE */

.stock-table-card {
  overflow: hidden;
}

.stock-table-top {
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stock-table-top h2 {
  margin: 0;
}

.stock-table-top p {
  margin: 4px 0 0;
  color: #64748b;
}

.table-count {
  background: #eff6ff;
  color: #1d4ed8;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
}

.stock-table-wrapper {
  overflow-x: auto;
}

.stock-table {
  width: 100%;
  border-collapse: collapse;
}

.stock-table th {
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  text-transform: uppercase;
  text-align: left;
  padding: 14px 16px;
}

.stock-table td {
  padding: 16px;
  border-top: 1px solid #e2e8f0;
  color: #0f172a;
}

.stock-table tr {
  cursor: pointer;
  transition: 0.2s;
}

.stock-table tbody tr:hover {
  background: #f8fafc;
}

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

.article-cell span {
  display: block;
  color: #64748b;
  font-size: 13px;
  margin-top: 3px;
}

.article-mini-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #e0f2fe;
  color: #0369a1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-pill,
.stock-badge {
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.category-pill {
  background: #f1f5f9;
  color: #475569;
}

.badge-success {
  background: #dcfce7;
  color: #166534;
}

.badge-warning {
  background: #fef3c7;
  color: #92400e;
}

.badge-danger {
  background: #fee2e2;
  color: #991b1b;
}

.table-action-btn {
  border: none;
  background: #0f172a;
  color: white;
  padding: 9px 12px;
  border-radius: 12px;
  display: flex;
  gap: 6px;
  align-items: center;
  cursor: pointer;
}

/* CARTES ARTICLES */

.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}

.article-card {
  background: white;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  cursor: pointer;
  transition: 0.25s;
}

.article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}

.article-image {
  height: 150px;
  background: linear-gradient(135deg, #e2e8f0, #f8fafc);
  display: flex;
  align-items: center;
  justify-content: center;
}

.article-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-image-light {
  color: #64748b;
}

.article-placeholder {
  font-size: 46px;
}

.article-body {
  padding: 16px;
}

.article-body h3 {
  margin: 0;
  font-size: 16px;
  color: #0f172a;
}

.article-code {
  margin: 5px 0 12px;
  color: #64748b;
  font-size: 13px;
}

.article-price {
  font-size: 20px;
  font-weight: 900;
  color: #0f172a;
}

.article-stock {
  margin-top: 10px;
  background: #f8fafc;
  padding: 9px;
  border-radius: 12px;
  font-weight: 700;
}

.article-footer {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  color: #475569;
  font-size: 13px;
}

.empty-stock {
  padding: 50px;
  text-align: center;
  color: #64748b;
}

.loading-text {
  background: white;
  padding: 30px;
  border-radius: 18px;
}

.stock-pagination {
  margin-top: 14px;
  padding: 12px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.stock-pagination > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stock-pagination button,
.stock-pagination select {
  border: 1px solid #cbd5e1;
  background: white;
  color: #0f172a;
  border-radius: 8px;
  padding: 8px 10px;
  font-weight: 800;
}

.stock-pagination button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.mobile-stock-list {
  display: grid;
  gap: 10px;
}

.mobile-stock-row {
  width: 100%;
  border: 1px solid #e2e8f0;
  background: white;
  border-radius: 12px;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  text-align: left;
}

.mobile-stock-main strong {
  display: block;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.25;
}

.mobile-stock-main span,
.mobile-stock-values span {
  color: #64748b;
  font-size: 12px;
}

.mobile-stock-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
}

.mobile-stock-values b {
  color: #2563eb;
  text-align: right;
  font-size: 13px;
}

@media (max-width: 760px) {
  .stock-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .stock-pagination > div {
    justify-content: space-between;
  }

  .stock-stats {
    grid-template-columns: 1fr;
  }
}

.stock-zone-page {
  display: grid;
  gap: 18px;
  margin-top: 20px;
}

.stock-zone-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  min-height: 140px;
  border-radius: 18px;
  padding: 24px;
  color: #ffffff;
  background: linear-gradient(135deg, #0f172a, #1d4ed8);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16);
}

.stock-zone-page.depot .stock-zone-hero {
  background: linear-gradient(135deg, #111827, #0369a1);
}

.stock-zone-hero-title {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stock-zone-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.stock-zone-hero p {
  margin: 0;
  color: #bfdbfe;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.stock-zone-hero h2 {
  margin: 5px 0;
  font-size: 32px;
  color: #ffffff;
}

.stock-zone-hero-title span:last-child {
  color: #e0f2fe;
  font-weight: 800;
}

.stock-zone-badge {
  border-radius: 999px;
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-weight: 950;
  white-space: nowrap;
}

.stock-zone-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.stock-zone-kpis div,
.stock-zone-table-card {
  background: #ffffff;
  border: 1px solid #dbe4f0;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07);
}

.stock-zone-kpis div {
  display: grid;
  gap: 7px;
  padding: 16px;
}

.stock-zone-kpis span {
  color: #64748b;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.stock-zone-kpis strong {
  color: #0f172a;
  font-size: 22px;
}

.stock-zone-kpis .warning strong {
  color: #d97706;
}

.stock-zone-kpis .danger strong {
  color: #dc2626;
}

.stock-zone-table-card {
  overflow: hidden;
}

.stock-zone-table-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid #e2e8f0;
}

.stock-zone-table-head h3 {
  margin: 0;
  font-size: 22px;
  color: #0f172a;
}

.stock-zone-table-head p {
  margin: 4px 0 0;
  color: #64748b;
  font-weight: 800;
}

.stock-zone-table-head > span {
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 8px 12px;
  font-weight: 950;
}

.stock-zone-table-wrap {
  overflow: auto;
}

.stock-zone-table-wrap table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
}

.stock-zone-table-wrap th {
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  text-transform: uppercase;
  text-align: left;
  padding: 14px 16px;
}

.stock-zone-table-wrap td {
  padding: 15px 16px;
  border-top: 1px solid #e2e8f0;
  color: #0f172a;
  font-weight: 750;
}

.stock-zone-table-wrap tr {
  cursor: pointer;
}

.stock-zone-table-wrap tbody tr:hover {
  background: #f8fafc;
}

.stock-transfer-layout {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 18px;
  margin-top: 20px;
}

.stock-transfer-card,
.stock-transfer-history {
  background: #ffffff;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.transfer-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.transfer-card-header p {
  margin: 0;
  color: #64748b;
  font-weight: 800;
}

.transfer-card-header h2 {
  margin: 4px 0 0;
  color: #0f172a;
}

.stock-transfer-card {
  display: grid;
  gap: 13px;
}

.stock-transfer-card label {
  display: grid;
  gap: 7px;
  color: #334155;
  font-size: 13px;
  font-weight: 900;
}

.stock-transfer-card input,
.stock-transfer-card select,
.stock-transfer-card textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 11px 12px;
  background: #ffffff;
  color: #0f172a;
  font-weight: 800;
}

.stock-transfer-card textarea {
  min-height: 92px;
  resize: vertical;
}

.transfer-message {
  border-radius: 12px;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 11px 12px;
  font-weight: 900;
}

.transfer-stock-preview,
.transfer-route {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.transfer-article-results {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 8px;
  background: #f8fafc;
}

.transfer-article-results button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  padding: 10px;
  text-align: left;
  color: #0f172a;
}

.transfer-article-results button.active {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.transfer-article-results span {
  display: grid;
  gap: 3px;
}

.transfer-article-results small {
  color: #64748b;
}

.transfer-article-results b {
  color: #2563eb;
  white-space: nowrap;
}

.transfer-stock-preview div {
  display: grid;
  gap: 4px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px;
  background: #f8fafc;
}

.transfer-stock-preview span {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.transfer-stock-preview strong {
  color: #0f172a;
}

.transfer-route {
  grid-template-columns: 1fr 44px 1fr;
  align-items: end;
}

.transfer-route > button {
  height: 42px;
  border: none;
  border-radius: 12px;
  background: #0f172a;
  color: #ffffff;
  display: grid;
  place-items: center;
}

.transfer-table-wrap {
  overflow: auto;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
}

.transfer-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.transfer-table-wrap th,
.transfer-table-wrap td {
  padding: 12px;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
  white-space: nowrap;
  font-size: 13px;
}

.transfer-table-wrap th {
  background: #f8fafc;
  color: #475569;
  text-transform: uppercase;
  font-size: 12px;
}

.transfer-table-wrap button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  color: #1d4ed8;
  padding: 8px 10px;
  font-weight: 900;
}

.transfer-order-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: auto;
  background: rgba(15, 23, 42, 0.58);
  padding: 24px;
}

.transfer-order-sheet {
  max-width: 960px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 10px;
  padding: 24px;
  color: #0f172a;
}

.transfer-order-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 16px;
}

.transfer-order-actions button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  padding: 0 14px;
  font-weight: 900;
}

.transfer-order-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 2px solid #0f172a;
  padding-bottom: 16px;
  margin-bottom: 16px;
}

.transfer-order-header p {
  margin: 0;
  color: #64748b;
  font-weight: 900;
}

.transfer-order-header h1 {
  margin: 4px 0 0;
  font-size: 27px;
  text-transform: uppercase;
}

.transfer-order-header strong {
  align-self: start;
  border: 1px solid #0f172a;
  border-radius: 8px;
  padding: 9px 12px;
}

.transfer-order-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.transfer-order-grid div,
.transfer-order-note {
  display: grid;
  gap: 5px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}

.transfer-order-grid span,
.transfer-order-note span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.transfer-order-note {
  margin-top: 12px;
  min-height: 90px;
}

.transfer-order-note p {
  margin: 0;
}

.transfer-signatures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 70px;
}

.transfer-signatures div {
  border-top: 1px solid #0f172a;
  padding-top: 10px;
  text-align: center;
  font-weight: 900;
}

.inventory-layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 18px;
  margin-top: 20px;
}

.inventory-sidebar {
  display: grid;
  gap: 16px;
  align-content: start;
}

.inventory-card,
.inventory-main,
.inventory-empty {
  background: #ffffff;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.inventory-card {
  display: grid;
  gap: 12px;
}

.inventory-card label {
  display: grid;
  gap: 7px;
  color: #334155;
  font-size: 13px;
  font-weight: 900;
}

.inventory-card input,
.inventory-card select,
.inventory-card textarea,
.inventory-actions select,
.inventory-table input {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px 11px;
  background: #ffffff;
  color: #0f172a;
  font-weight: 800;
}

.inventory-card textarea {
  min-height: 82px;
  resize: vertical;
}

.inventory-list {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
}

.inventory-list button {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  padding: 10px;
  display: grid;
  gap: 4px;
  text-align: left;
  cursor: pointer;
}

.inventory-list button.active {
  border-color: #2563eb;
  background: #eff6ff;
}

.inventory-list span,
.inventory-list em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.inventory-main {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.inventory-empty {
  text-align: center;
  color: #64748b;
  padding: 70px 20px;
}

.inventory-head,
.inventory-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.inventory-head p {
  margin: 0;
  color: #64748b;
  font-weight: 900;
}

.inventory-head h2 {
  margin: 4px 0 0;
  color: #0f172a;
}

.inventory-status {
  border-radius: 999px;
  padding: 8px 12px;
  background: #e2e8f0;
  color: #0f172a;
  font-weight: 950;
}

.inventory-status.VALIDE {
  background: #dcfce7;
  color: #166534;
}

.inventory-status.EN_ATTENTE_VALIDATION {
  background: #fef3c7;
  color: #92400e;
}

.inventory-kpis {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 10px;
}

.inventory-kpi {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px;
  background: #f8fafc;
}

.inventory-kpi strong {
  display: block;
  color: #0f172a;
  font-size: 18px;
  font-weight: 950;
}

.inventory-kpi span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.inventory-kpi.good strong,
.inv-good {
  color: #16a34a;
}

.inventory-kpi.bad strong,
.inv-bad {
  color: #dc2626;
}

.inventory-table-wrap {
  overflow: auto;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
}

.inventory-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
}

.inventory-table th,
.inventory-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
  font-size: 13px;
}

.inventory-table th {
  background: #0f172a;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 11px;
}

.inventory-table input {
  min-width: 110px;
}

.inv-badge {
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 950;
  background: #e2e8f0;
}

.inv-badge.OK {
  background: #dcfce7;
  color: #166534;
}

.inv-badge.MANQUE {
  background: #fee2e2;
  color: #991b1b;
}

.inv-badge.SURPLUS {
  background: #dbeafe;
  color: #1d4ed8;
}

@media (max-width: 1050px) {
  .stock-transfer-layout,
  .inventory-layout,
  .transfer-order-grid,
  .transfer-signatures {
    grid-template-columns: 1fr;
  }

  .inventory-kpis {
    grid-template-columns: repeat(2, 1fr);
  }

  .stock-zone-kpis {
    grid-template-columns: repeat(2, 1fr);
  }

  .stock-zone-hero {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 700px) {
  .stock-zone-kpis {
    grid-template-columns: 1fr;
  }

  .stock-zone-hero h2 {
    font-size: 26px;
  }
}

@media print {
  body:has(#ordre-transfert-print) * {
    visibility: hidden !important;
  }

  #ordre-transfert-print,
  #ordre-transfert-print * {
    visibility: visible !important;
  }

  .transfer-order-overlay {
    position: static;
    inset: auto;
    background: #ffffff;
    padding: 0;
  }

  .transfer-order-sheet {
    max-width: none;
    width: 100%;
    border-radius: 0;
    padding: 0;
  }

  .transfer-order-actions {
    display: none !important;
  }

  @page {
    size: A4;
    margin: 12mm;
  }
}
/* =========================
   DRAWER ARTICLE
========================= */

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 9999;

  display: flex;
  justify-content: flex-end;
}

.article-drawer {
  width: 480px;
  max-width: 100%;
  height: 100vh;

  background: #ffffff;

  overflow-y: auto;

  padding: 24px;

  box-shadow: -12px 0 40px rgba(0,0,0,0.15);

  animation: drawerSlide 0.25s ease;
}

@keyframes drawerSlide {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  margin-bottom: 20px;
}

.drawer-subtitle {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}

.drawer-header h2 {
  margin: 5px 0;
  font-size: 24px;
  color: #0f172a;
}

.drawer-code {
  background: #eff6ff;
  color: #1d4ed8;

  padding: 6px 10px;

  border-radius: 999px;

  font-size: 12px;
  font-weight: 700;
}

.drawer-close {
  border: none;

  width: 40px;
  height: 40px;

  border-radius: 50%;

  background: #fee2e2;
  color: #b91c1c;

  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
}

.drawer-image {
  height: 220px;

  border-radius: 22px;

  background: linear-gradient(
    135deg,
    #e2e8f0,
    #f8fafc
  );

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 22px;
}

.drawer-image-placeholder {
  font-size: 70px;
}

.drawer-stats {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 12px;

  margin-bottom: 24px;
}

.drawer-stat-card {
  background: #f8fafc;

  border-radius: 18px;

  padding: 14px;

  display: flex;
  gap: 10px;
  align-items: center;
}

.drawer-stat-card strong {
  display: block;
  color: #0f172a;
}

.drawer-stat-card span {
  font-size: 12px;
  color: #64748b;
}

.drawer-form-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 16px;
}

.drawer-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drawer-input-group.full {
  grid-column: 1 / -1;
}

.drawer-input-group label {
  font-size: 13px;
  font-weight: 700;
  color: #475569;

  display: flex;
  align-items: center;
  gap: 6px;
}

.drawer-input-group input {
  border: 1px solid #cbd5e1;

  border-radius: 14px;

  padding: 13px;

  font-size: 14px;

  outline: none;
}

.drawer-input-group input:focus {
  border-color: #0f172a;
}

.drawer-footer {
  margin-top: 30px;

  display: flex;
  justify-content: space-between;

  gap: 12px;
}

.drawer-delete-btn,
.drawer-save-btn {
  flex: 1;

  border: none;

  padding: 14px;

  border-radius: 16px;

  font-weight: 800;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  cursor: pointer;
}

.drawer-delete-btn {
  background: #dc2626;
  color: white;
}

.drawer-save-btn {
  background: #0f172a;
  color: white;
}
.supplier-center{position:relative;min-width:0;color:#07183d;font-family:Inter,system-ui,sans-serif}.supplier-center.with-drawer{padding-right:390px}.supplier-hero{position:relative;min-height:218px;margin-bottom:12px;overflow:hidden;background:#fff;border:1px solid #e4ecf8;border-radius:12px;box-shadow:0 4px 16px rgba(30,64,175,.04)}.supplier-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,#fff 0%,#fff 42%,#eff6ff 68%,#fff 100%);opacity:.9}.supplier-hero:after{content:"";position:absolute;right:0;bottom:0;width:52%;height:75%;background:repeating-linear-gradient(90deg,rgba(37,99,235,.05) 0 1px,transparent 1px 32px),repeating-linear-gradient(0deg,rgba(37,99,235,.05) 0 1px,transparent 1px 26px);mask-image:linear-gradient(to left,#000,transparent)}.supplier-hero-copy{position:relative;z-index:2;padding:17px 22px}.supplier-hero-copy p{margin:0 0 4px;color:#075bf6;font-size:14px;font-weight:800}.supplier-hero-copy h1{margin:0 0 4px;font-size:23px;letter-spacing:0}.supplier-hero-copy span{color:#42577b;font-size:11px}.supplier-hero-alerts{position:absolute;z-index:3;left:16px;right:300px;bottom:12px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.supplier-hero-alerts article{display:grid;grid-template-columns:38px minmax(0,1fr);grid-template-rows:auto auto auto;gap:0 7px;min-height:92px;padding:10px;background:rgba(255,255,255,.94);border:1px solid #e5edf9;border-radius:9px;box-shadow:0 4px 12px rgba(15,23,42,.04)}.supplier-alert-icon{grid-row:1/4;display:grid;width:34px;height:34px;place-items:center;border-radius:9px}.supplier-alert-icon.red{color:#f5223e;background:#ffe9ed}.supplier-alert-icon.blue{color:#075bf6;background:#e7f0ff}.supplier-alert-icon.orange{color:#f97316;background:#fff0df}.supplier-alert-icon.purple{color:#7c3aed;background:#f1e9ff}.supplier-alert-icon.green{color:#16a34a;background:#e8faee}.supplier-hero-alerts strong{align-self:end;overflow:hidden;color:#075bf6;font-size:14px;white-space:nowrap;text-overflow:ellipsis}.supplier-hero-alerts article:first-child strong{color:#f5223e}.supplier-hero-alerts span{color:#14254c;font-size:9px;font-weight:800;line-height:1.35}.supplier-hero-alerts small{color:#32466b;font-size:8px;font-weight:700}.supplier-hero-visual{position:absolute;z-index:2;right:20px;bottom:-10px;width:280px;height:215px}.supplier-hero-visual img{width:100%;height:100%;object-fit:contain;object-position:center bottom}
.supplier-kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin-bottom:12px;padding:0;background:#fff;border:1px solid #e5edf8;border-radius:12px;box-shadow:0 4px 16px rgba(30,64,175,.04);overflow:hidden}.supplier-kpi-card{display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-rows:auto auto;gap:6px 7px;min-height:145px;padding:18px 12px 8px;border-right:1px solid #edf2fa;background:#fff}.supplier-kpi-card:last-child{border-right:0}.supplier-kpi-icon{display:grid;width:50px;height:50px;place-items:center;border-radius:50%}.supplier-kpi-icon.blue{color:#075bf6;background:#e7f0ff}.supplier-kpi-icon.green{color:#0b9d4c;background:#e6f8ec}.supplier-kpi-icon.orange{color:#f97316;background:#fff0df}.supplier-kpi-icon.purple{color:#7c3aed;background:#eee7ff}.supplier-kpi-icon.red{color:#e42136;background:#ffe8eb}.supplier-kpi-copy{min-width:0}.supplier-kpi-copy strong,.supplier-kpi-copy span,.supplier-kpi-copy small{display:block}.supplier-kpi-copy strong{min-height:31px;overflow-wrap:anywhere;font-size:16px;line-height:1.05}.supplier-kpi-copy span{margin-top:4px;color:#21345b;font-size:10px}.supplier-kpi-copy small{margin-top:8px;color:#079447;font-size:9px;font-weight:800}.supplier-kpi-card.red .supplier-kpi-copy small{color:#e42136}.supplier-kpi-trend{grid-column:1/-1}.supplier-kpi-trend b{display:none}.supplier-sparkline{width:100%;height:29px;overflow:visible}.supplier-sparkline polyline{fill:none;stroke:#075bf6;stroke-width:1.6;vector-effect:non-scaling-stroke}.supplier-sparkline.green polyline{stroke:#0b9d4c}.supplier-sparkline.orange polyline{stroke:#f97316}.supplier-sparkline.purple polyline{stroke:#7c3aed}.supplier-sparkline.red polyline{stroke:#e42136}.supplier-sparkline.large{height:120px}.supplier-sparkline.large circle{fill:#075bf6;vector-effect:non-scaling-stroke}
.supplier-table-panel{background:#fff;border:1px solid #e5edf8;border-radius:12px;box-shadow:0 4px 16px rgba(30,64,175,.04);overflow:visible}.supplier-search-row{display:grid;grid-template-columns:minmax(0,1fr) 175px;gap:10px;padding:14px 16px 8px}.supplier-search{display:flex;align-items:center;gap:9px;height:38px;padding:0 12px;color:#1d4ed8;background:#fff;border:1px solid #d9e5f5;border-radius:6px}.supplier-search input{min-width:0;width:100%;border:0;outline:0;color:#17284e;font-size:10px}.supplier-advanced-btn,.supplier-reset-btn,.supplier-search-btn,.supplier-export-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;border-radius:6px;font-size:10px;font-weight:800;cursor:pointer}.supplier-advanced-btn{color:#075bf6;background:#fff;border:1px solid #cfe0f8}.supplier-filter-bar{display:grid;grid-template-columns:repeat(5,minmax(110px,1fr)) 110px 95px;gap:10px;align-items:end;padding:5px 16px 12px;border-bottom:1px solid #edf2fa}.supplier-filter-bar label{display:grid;gap:4px;color:#41557b;font-size:9px;font-weight:800}.supplier-filter-bar select,.supplier-table-footer select{height:34px;padding:0 9px;color:#17284e;background:#fff;border:1px solid #d9e5f5;border-radius:6px;font-size:10px;font-weight:700}.supplier-reset-btn{color:#25395f;background:#fff;border:1px solid #d9e5f5}.supplier-search-btn,.supplier-export-btn{color:#fff;background:#075bf6;border:1px solid #075bf6}.supplier-table-scroll{overflow-x:auto}.supplier-table{width:100%;min-width:850px;border-collapse:collapse}.supplier-table th{padding:10px 12px;color:#41557b;background:#fff;border-bottom:1px solid #edf2fa;text-align:left;font-size:9px}.supplier-table td{padding:7px 12px;color:#17284e;border-bottom:1px solid #edf2fa;font-size:10px}.supplier-table tbody tr{cursor:pointer;transition:background .18s}.supplier-table tbody tr:hover{background:#f8fbff}.supplier-name-cell{display:flex;align-items:center;gap:9px}.supplier-name-cell strong{font-size:10px}.supplier-avatar{display:grid;flex:0 0 28px;width:28px;height:28px;place-items:center;color:#fff;background:linear-gradient(135deg,#15a0e8,#2964e8);border-radius:50%;font-size:9px;font-weight:900}.supplier-avatar.large{flex-basis:48px;width:48px;height:48px;background:linear-gradient(135deg,#8b5cf6,#651df0);font-size:14px}.supplier-region{display:inline-flex;padding:4px 9px;color:#17366e;background:#e9f1ff;border-radius:999px;font-size:8px;font-weight:800}.supplier-balance{color:#f5223e!important;font-weight:900}.supplier-balance.zero{color:#08a04b!important}.supplier-status{display:inline-flex;padding:4px 9px;border-radius:999px;font-size:8px;font-weight:900}.supplier-status.ok,.supplier-status.due{color:#079447;background:#dff8e9}.supplier-status.risk{color:#c72032;background:#ffe8eb}.supplier-actions-cell{position:relative}.supplier-actions-cell>button{display:grid;width:29px;height:25px;place-items:center;color:#17366e;background:#fff;border:1px solid #d9e5f5;border-radius:999px;cursor:pointer}.supplier-action-menu{position:absolute;top:34px;right:12px;z-index:10;width:140px;padding:5px;background:#fff;border:1px solid #d9e5f5;border-radius:7px;box-shadow:0 12px 28px rgba(15,23,42,.14)}.supplier-action-menu button,.supplier-action-menu a{display:block;width:100%;padding:7px 8px;color:#334155;background:transparent;border:0;border-radius:4px;text-align:left;text-decoration:none;font-size:10px;cursor:pointer}.supplier-action-menu button:hover,.supplier-action-menu a:hover{background:#f1f5f9}.supplier-empty{padding:25px!important;color:#64748b!important;text-align:center!important}.supplier-table-footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:9px 16px}.supplier-table-footer label{display:flex;align-items:center;gap:10px;color:#17284e;font-size:9px;font-weight:800}.supplier-table-footer label select{width:55px;height:30px}.supplier-table-footer>div{display:flex;gap:6px}.supplier-table-footer>div button,.supplier-table-footer>div b{display:grid;width:28px;height:28px;place-items:center;border-radius:6px;font-size:10px}.supplier-table-footer>div button{color:#17366e;background:#fff;border:1px solid #d9e5f5;cursor:pointer}.supplier-table-footer>div b{color:#fff;background:#075bf6}.supplier-export-btn{justify-self:end;height:31px;padding:0 13px}
.supplier-drawer{position:fixed;z-index:60;top:64px;right:0;display:flex;flex-direction:column;width:390px;height:calc(100vh - 64px);background:#fff;border-left:1px solid #e5edf8;box-shadow:-12px 0 28px rgba(15,23,42,.08);animation:supplier-slide .2s ease-out}.supplier-drawer header{display:grid;grid-template-columns:48px minmax(0,1fr) 28px;gap:10px;align-items:center;padding:18px 16px;border-bottom:1px solid #edf2fa}.supplier-drawer header h2{margin:0;color:#07183d;font-size:15px}.supplier-drawer header p{display:flex;align-items:center;gap:7px;margin:7px 0 0;color:#42577b;font-size:9px}.supplier-drawer header button{display:grid;width:27px;height:27px;place-items:center;color:#07183d;background:#fff;border:0;cursor:pointer}.supplier-drawer nav{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid #e5edf8}.supplier-drawer nav button{display:grid;gap:5px;place-items:center;padding:10px 2px 8px;color:#3e5278;background:#fff;border:0;border-bottom:2px solid transparent;font-size:8px;cursor:pointer}.supplier-drawer nav button.active{color:#075bf6;border-bottom-color:#075bf6}.supplier-drawer-body{flex:1;overflow:auto;padding:16px}.supplier-drawer-body h3{margin:0 0 12px;color:#07183d;font-size:11px}.supplier-general-info,.supplier-finance,.supplier-evolution{padding-bottom:15px;margin-bottom:15px;border-bottom:1px solid #edf2fa}.supplier-general-info>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;padding:4px 0;font-size:9px}.supplier-general-info span{color:#42577b}.supplier-general-info strong{color:#07183d}.supplier-finance>div{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.supplier-finance article{padding:12px 8px;border-radius:7px}.supplier-finance article.red{background:#fff0f2}.supplier-finance article.blue{background:#eef5ff}.supplier-finance article.green{background:#edfbf1}.supplier-finance article span,.supplier-finance article strong{display:block}.supplier-finance article span{font-size:8px;font-weight:700}.supplier-finance article strong{margin-top:7px;overflow-wrap:anywhere;font-size:11px}.supplier-finance article.red strong{color:#e42136}.supplier-finance article.blue strong{color:#075bf6}.supplier-finance article.green strong{color:#079447}.supplier-evolution{border-bottom:0}.supplier-drawer-list>div{display:grid;grid-template-columns:82px minmax(0,1fr) auto;gap:8px;padding:9px 0;border-bottom:1px solid #edf2fa;font-size:9px}.supplier-drawer-list span{color:#64748b}.supplier-drawer-list b{color:#07183d}.supplier-drawer footer{padding:12px 16px;border-top:1px solid #edf2fa}.supplier-drawer footer a{display:flex;align-items:center;justify-content:center;height:35px;color:#fff;background:#075bf6;border-radius:6px;font-size:10px;font-weight:800;text-decoration:none}
@keyframes supplier-slide{from{transform:translateX(20px);opacity:.4}to{transform:translateX(0);opacity:1}}
@media(max-width:1250px){.supplier-center.with-drawer{padding-right:0}.supplier-drawer{width:360px}.supplier-hero-alerts{right:230px}.supplier-hero-visual{right:-30px}.supplier-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.supplier-filter-bar{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){.supplier-hero{min-height:420px}.supplier-hero-alerts{left:12px;right:12px;grid-template-columns:repeat(2,minmax(0,1fr))}.supplier-hero-visual{display:none}.supplier-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.supplier-search-row{grid-template-columns:1fr}.supplier-filter-bar{grid-template-columns:repeat(2,minmax(0,1fr))}.supplier-table-footer{grid-template-columns:1fr}.supplier-export-btn{justify-self:start}.supplier-drawer{top:0;width:100%;height:100vh}}
.developer-page {
  min-height: 100vh;
  background: #f3f6fb;
  padding: 26px;
  color: #0f172a;
}

.developer-header,
.developer-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.07);
}

.developer-header {
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.developer-header p {
  margin: 0;
  color: #64748b;
  font-weight: 900;
}

.developer-header h1 {
  margin: 4px 0 0;
  font-size: 30px;
}

.developer-code {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: end;
  min-width: 360px;
}

.developer-code label {
  grid-column: 1 / -1;
  color: #64748b;
  font-weight: 900;
}

.developer-code input,
.developer-code button,
.developer-card button {
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  padding: 0 13px;
  font-weight: 900;
}

.developer-card select {
  width: 100%;
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  padding: 0 13px;
  font-weight: 800;
  margin-bottom: 10px;
}

.developer-code button,
.developer-card button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}

.developer-message {
  margin-top: 16px;
  border-radius: 14px;
  background: #e8f2ff;
  color: #1d4ed8;
  padding: 13px 16px;
  font-weight: 900;
}

.developer-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
  gap: 16px;
}

.developer-card {
  padding: 20px;
  margin-top: 18px;
}

.developer-grid .developer-card {
  margin-top: 0;
}

.developer-card.wide {
  grid-row: span 2;
}

.dev-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.dev-card-title h2 {
  margin: 0;
  font-size: 20px;
}

.dev-status-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.dev-info {
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  padding: 11px;
  background: #f8fafc;
  min-width: 0;
}

.dev-info span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 5px;
}

.dev-info strong {
  display: block;
  overflow-wrap: anywhere;
}

.dev-primary {
  background: #0f172a !important;
  color: #ffffff;
  border-color: #0f172a !important;
}

.restore-card {
  border-color: #fed7aa;
  background: #fffaf4;
}

.restore-card p {
  color: #9a3412;
  font-weight: 800;
}

.restore-btn {
  width: 100%;
  border-color: #f97316 !important;
  background: #f97316 !important;
  color: #ffffff !important;
}

.settings-switch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.settings-switch-grid label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 8px;
  align-items: start;
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  padding: 11px;
  background: #f8fafc;
}

.settings-switch-grid small {
  grid-column: 2;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.official-start-card {
  border-color: #bfdbfe;
  background: #f8fbff;
}

.official-start-card > p {
  color: #334155;
  font-weight: 800;
  margin-top: -4px;
}

.official-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 16px 0;
}

.official-mode-grid button {
  display: block;
  text-align: left;
  min-height: 112px;
  padding: 13px;
  border-color: #cbd5e1;
  background: #ffffff;
}

.official-mode-grid button.selected {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.14);
}

.official-mode-grid strong,
.official-mode-grid span {
  display: block;
}

.official-mode-grid strong {
  margin-bottom: 7px;
  color: #0f172a;
}

.official-mode-grid span {
  color: #475569;
  font-size: 12px;
  line-height: 1.45;
}

.official-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.official-preview > div {
  border: 1px solid #dbeafe;
  border-radius: 14px;
  background: #ffffff;
  padding: 13px;
}

.official-preview h3 {
  margin: 0 0 8px;
  font-size: 14px;
}

.official-preview ul {
  margin: 0;
  padding-left: 18px;
  color: #334155;
  font-weight: 800;
}

.official-table-wrap {
  border: 1px solid #dbeafe;
  border-radius: 14px;
  overflow: auto;
  background: #ffffff;
}

.official-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
}

.official-table-wrap th,
.official-table-wrap td {
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
  font-size: 13px;
}

.official-table-wrap th {
  background: #eff6ff;
  color: #1e3a8a;
  font-weight: 900;
}

.official-danger-btn {
  width: 100%;
  margin-top: 14px;
  background: #b91c1c !important;
  border-color: #b91c1c !important;
  color: #ffffff !important;
}

.danger-zone {
  border-color: #fecaca;
  background: #fff7f7;
}

.danger-zone p {
  color: #991b1b;
  font-weight: 900;
}

.danger-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.danger-actions button {
  border-color: #fca5a5;
  color: #991b1b;
  background: #ffffff;
}

.danger-actions button.critical {
  background: #991b1b;
  border-color: #991b1b;
  color: #ffffff;
}

.developer-log-table {
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
}

.developer-log-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 820px;
}

.developer-log-table th,
.developer-log-table td {
  padding: 11px 12px;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
  font-size: 13px;
}

.developer-log-table th {
  background: #0f172a;
  color: #ffffff;
}

.developer-card pre {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 14px;
  padding: 16px;
  overflow: auto;
}

@media (max-width: 1100px) {
  .developer-grid,
  .settings-switch-grid,
  .official-mode-grid,
  .official-preview,
  .danger-actions,
  .dev-status-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .developer-header,
  .developer-grid {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .developer-code,
  .settings-switch-grid,
  .official-mode-grid,
  .official-preview,
  .danger-actions,
  .dev-status-grid {
    grid-template-columns: 1fr;
    min-width: 0;
  }
}
.rh-page {
  padding: 24px;
  background: #f4f7fb;
  min-height: 100vh;
  color: #0f1f3d;
}

.rh-header {
  min-height: 96px;
  border: 1px solid #e1e8f2;
  border-radius: 14px;
  background: #fff;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 12px 28px rgba(15, 31, 61, .06);
}

.rh-header p,
.rh-header h1,
.rh-header span {
  margin: 0;
}

.rh-header p {
  color: #1769e8;
  font-size: 12px;
  font-weight: 850;
}

.rh-header h1 {
  margin-top: 4px;
  font-size: 26px;
}

.rh-header span {
  display: block;
  margin-top: 5px;
  color: #64748b;
  font-size: 13px;
}

.rh-header button,
.rh-primary,
.rh-actions button {
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  padding: 0 14px;
  background: #1769e8;
  color: #fff;
  font-weight: 850;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.rh-tabs {
  margin: 14px 0;
  padding: 8px;
  border: 1px solid #e1e8f2;
  border-radius: 12px;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rh-tabs button {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #42526d;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  cursor: pointer;
}

.rh-tabs button.active {
  background: #eaf2ff;
  border-color: #cfe0ff;
  color: #1769e8;
}

.rh-message {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: #eaf2ff;
  color: #1769e8;
  font-weight: 800;
}

.rh-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.rh-kpi,
.rh-card {
  border: 1px solid #e1e8f2;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 31, 61, .05);
}

.rh-kpi {
  min-height: 104px;
  padding: 16px;
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 12px;
}

.rh-kpi svg {
  color: #1769e8;
}

.rh-kpi strong,
.rh-kpi span,
.rh-kpi small {
  display: block;
}

.rh-kpi strong {
  font-size: 20px;
}

.rh-kpi span {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 850;
}

.rh-kpi small {
  margin-top: 4px;
  color: #71809a;
  font-size: 11px;
}

.rh-grid,
.rh-two-col {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.rh-card {
  padding: 18px;
}

.rh-card h2 {
  margin: 0 0 14px;
  font-size: 17px;
}

.rh-card-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 12px;
  margin-bottom: 14px;
}

.rh-card-head.compact {
  align-items: flex-start;
}

.rh-card-head p {
  margin: 4px 0 0;
  color: #71809a;
  font-size: 12px;
  font-weight: 700;
}

.rh-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.rh-card label {
  display: grid;
  gap: 6px;
  color: #53627c;
  font-size: 12px;
  font-weight: 800;
}

.rh-card input,
.rh-card select {
  height: 38px;
  border: 1px solid #dce4ef;
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
  color: #0f1f3d;
}

.rh-primary {
  margin-top: 14px;
}

.rh-search {
  height: 42px;
  border: 1px solid #dce4ef;
  border-radius: 9px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rh-search input {
  border: 0;
  outline: 0;
  width: 100%;
}

.rh-table-wrap {
  margin-top: 14px;
  overflow: auto;
}

.rh-table-wrap table {
  width: 100%;
  border-collapse: collapse;
}

.rh-table-wrap th,
.rh-table-wrap td {
  padding: 11px 10px;
  border-bottom: 1px solid #edf2f7;
  text-align: left;
  font-size: 12px;
}

.rh-table-wrap th {
  color: #53627c;
  font-weight: 900;
}

.rh-line {
  min-height: 54px;
  border: 1px solid #edf2f7;
  border-radius: 9px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.rh-line + .rh-line {
  margin-top: 8px;
}

.rh-line strong,
.rh-line span {
  display: block;
}

.rh-line span {
  margin-top: 4px;
  color: #71809a;
  font-size: 11px;
}

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

.rh-actions button {
  min-height: 30px;
  background: #eef4ff;
  color: #1769e8;
}

.rh-ghost,
.rh-mini-btn,
.rh-document-actions button {
  border: 1px solid #dbe6f4;
  border-radius: 8px;
  background: #fff;
  color: #1769e8;
  font-weight: 850;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}

.rh-ghost {
  min-height: 34px;
  padding: 0 11px;
}

.rh-mini-btn {
  min-height: 30px;
  padding: 0 9px;
  font-size: 11px;
}

.rh-document-actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rh-document-actions button {
  min-height: 34px;
  padding: 0 12px;
}

.rh-badge {
  padding: 5px 9px;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-weight: 850;
  font-size: 11px;
}

.rh-empty {
  color: #71809a;
  margin: 0;
}

@media (max-width: 1100px) {
  .rh-kpis,
  .rh-grid,
  .rh-two-col {
    grid-template-columns: 1fr;
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.qmp-route-loader {
  position: fixed;
  left: var(--sidebar-width, 240px);
  right: 0;
  top: 0;
  height: 3px;
  z-index: 7600;
  overflow: hidden;
  background: rgba(11, 99, 246, 0.08);
}

.qmp-route-loader span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #0b63f6, #22c55e);
  box-shadow: 0 0 14px rgba(11, 99, 246, 0.42);
  animation: qmpRouteLoader 0.78s ease-in-out infinite;
}

@keyframes qmpRouteLoader {
  from {
    transform: translateX(-120%);
  }
  to {
    transform: translateX(260%);
  }
}

@media (max-width: 900px) {
  .qmp-route-loader {
    left: 0;
  }
}

.qmp-app-header {
  z-index: 5000 !important;
  overflow: visible !important;
}

.qmp-header-tools,
.qmp-notification-wrap {
  overflow: visible !important;
}

.qmp-notification-panel {
  position: fixed !important;
  top: 50px !important;
  right: 300px !important;
  width: min(360px, calc(100vw - 24px)) !important;
  max-height: calc(100vh - 72px);
  overflow-y: auto;
  z-index: 7000 !important;
}

.qmp-toast {
  position: fixed;
  z-index: 7200;
  top: 78px;
  right: 22px;
  width: min(420px, calc(100vw - 28px));
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 30px;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid #dbe6f4;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 22px 55px rgba(15, 23, 42, 0.18);
  animation: qmpToastIn 0.2s ease-out;
}

.qmp-toast > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
}

.qmp-toast.success > span {
  color: #15803d;
  background: #dcfce7;
}

.qmp-toast.error > span {
  color: #dc2626;
  background: #fee2e2;
}

.qmp-toast strong {
  display: block;
  color: #07152f;
  font-size: 14px;
  font-weight: 950;
}

.qmp-toast small {
  display: block;
  margin-top: 4px;
  color: #52637d;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.qmp-toast button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  color: #64748b;
  background: #f8fafc;
  cursor: pointer;
}

@keyframes qmpToastIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 980px) {
  .qmp-notification-panel {
    right: 12px !important;
  }
}

/* ERP scroll final pass: appended last so module table scroll wins. */
@media screen and (min-width: 761px) {
  .qmp-main-panel:has(.stock-page),
  .qmp-main-panel:has(.sales-center-page),
  .qmp-main-panel:has(.credits-page),
  .qmp-main-panel:has(.fournisseurs-page),
  .qmp-main-panel:has(.fournisseur-achat-page),
  .qmp-main-panel:has(.compte-page),
  .qmp-main-panel:has(.voyages-pro-page),
  .qmp-main-panel:has(.reports-page) {
    overflow: hidden !important;
  }

  .stock-page,
  .sales-center-page,
  .credits-page,
  .fournisseurs-page,
  .fournisseur-achat-page,
  .compte-page,
  .voyages-pro-page,
  .reports-page {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .stock-content,
  .ventes-pro-card.sales-list-card,
  .fournisseur-list-card,
  .reports-tables,
  .stock-zone-table-card,
  .voyages-pro-page > .voyages-pro-section:last-child {
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
  }

  .stock-table-wrapper,
  .ventes-pro-table-wrap,
  .credit-table-wrap,
  .report-table-wrap,
  .stock-zone-table-wrap,
  .inventory-table-wrap,
  .transfer-table-wrap {
    min-height: 180px !important;
    overflow: auto !important;
    scrollbar-gutter: stable both-edges;
  }

  .stock-content > .stock-table-wrapper,
  .ventes-pro-card.sales-list-card > .ventes-pro-table-wrap,
  .fournisseur-list-card > .credit-table-wrap,
  .report-table-card > .report-table-wrap,
  .stock-zone-table-card > .stock-zone-table-wrap {
    flex: 1 1 auto !important;
  }

  .stock-table thead th,
  .ventes-pro-table thead th,
  .credit-table thead th,
  .report-table thead th,
  .inventory-table thead th,
  .transfer-table-wrap thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    background: #ffffff !important;
  }
}
/* ERP scroll final pass: appended last so module table scroll wins. */
@media screen and (min-width: 761px) {
  .qmp-main-panel:has(.stock-page),
  .qmp-main-panel:has(.sales-center-page),
  .qmp-main-panel:has(.credits-page),
  .qmp-main-panel:has(.fournisseurs-page),
  .qmp-main-panel:has(.fournisseur-achat-page),
  .qmp-main-panel:has(.compte-page),
  .qmp-main-panel:has(.voyages-pro-page),
  .qmp-main-panel:has(.reports-page) {
    overflow: hidden !important;
  }

  .stock-page,
  .sales-center-page,
  .credits-page,
  .fournisseurs-page,
  .fournisseur-achat-page,
  .compte-page,
  .voyages-pro-page,
  .reports-page {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .stock-content,
  .ventes-pro-card.sales-list-card,
  .fournisseur-list-card,
  .reports-tables,
  .stock-zone-table-card,
  .voyages-pro-page > .voyages-pro-section:last-child {
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
  }

  .stock-table-wrapper,
  .ventes-pro-table-wrap,
  .credit-table-wrap,
  .report-table-wrap,
  .stock-zone-table-wrap,
  .inventory-table-wrap,
  .transfer-table-wrap {
    min-height: 180px !important;
    overflow: auto !important;
    scrollbar-gutter: stable both-edges;
  }

  .stock-content > .stock-table-wrapper,
  .ventes-pro-card.sales-list-card > .ventes-pro-table-wrap,
  .fournisseur-list-card > .credit-table-wrap,
  .report-table-card > .report-table-wrap,
  .stock-zone-table-card > .stock-zone-table-wrap {
    flex: 1 1 auto !important;
  }

  .stock-table thead th,
  .ventes-pro-table thead th,
  .credit-table thead th,
  .report-table thead th,
  .inventory-table thead th,
  .transfer-table-wrap thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    background: #ffffff !important;
  }
}

/* Final override: ERP screens keep page chrome fixed and scroll only lists/tables. */
@media screen and (min-width: 761px) {
  .qmp-main-panel:has(.stock-page),
  .qmp-main-panel:has(.sales-center-page),
  .qmp-main-panel:has(.credits-page),
  .qmp-main-panel:has(.fournisseurs-page),
  .qmp-main-panel:has(.fournisseur-achat-page),
  .qmp-main-panel:has(.compte-page),
  .qmp-main-panel:has(.voyages-pro-page),
  .qmp-main-panel:has(.reports-page) {
    overflow: hidden !important;
  }

  .stock-page,
  .sales-center-page,
  .credits-page,
  .fournisseurs-page,
  .fournisseur-achat-page,
  .compte-page,
  .voyages-pro-page,
  .reports-page {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .stock-content,
  .ventes-pro-card.sales-list-card,
  .fournisseur-list-card,
  .reports-tables,
  .stock-zone-table-card,
  .voyages-pro-page > .voyages-pro-section:last-child {
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
  }

  .stock-table-wrapper,
  .ventes-pro-table-wrap,
  .credit-table-wrap,
  .report-table-wrap,
  .stock-zone-table-wrap,
  .inventory-table-wrap,
  .transfer-table-wrap {
    min-height: 180px !important;
    overflow: auto !important;
    scrollbar-gutter: stable both-edges;
  }

  .stock-content > .stock-table-wrapper,
  .ventes-pro-card.sales-list-card > .ventes-pro-table-wrap,
  .fournisseur-list-card > .credit-table-wrap,
  .report-table-card > .report-table-wrap,
  .stock-zone-table-card > .stock-zone-table-wrap {
    flex: 1 1 auto !important;
  }

  .stock-table thead th,
  .ventes-pro-table thead th,
  .credit-table thead th,
  .report-table thead th,
  .inventory-table thead th,
  .transfer-table-wrap thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    background: #ffffff !important;
  }
}

/* ================= QMP ERP SCROLL ARCHITECTURE ================= */
@media screen and (min-width: 761px) {
  html,
  body,
  #root {
    height: 100%;
    overflow: hidden;
  }

  .qmp-app-layout {
    height: 100vh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .qmp-main-column,
  .qmp-main-panel {
    min-height: 0 !important;
  }

  .qmp-main-panel:has(.stock-page),
  .qmp-main-panel:has(.sales-center-page),
  .qmp-main-panel:has(.credits-page),
  .qmp-main-panel:has(.fournisseurs-page),
  .qmp-main-panel:has(.fournisseur-achat-page),
  .qmp-main-panel:has(.compte-page),
  .qmp-main-panel:has(.voyages-pro-page),
  .qmp-main-panel:has(.reports-page),
  .qmp-main-panel:has(.stock-zone-page),
  .qmp-main-panel:has(.stock-transfer-layout) {
    overflow: hidden !important;
  }

  .stock-page,
  .sales-center-page,
  .credits-page,
  .fournisseurs-page,
  .fournisseur-achat-page,
  .compte-page,
  .voyages-pro-page,
  .reports-page,
  .stock-zone-page {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .stock-header,
  .stock-toolbar,
  .stock-subtabs,
  .sales-center-topbar,
  .sales-center-header,
  .sales-center-kpis,
  .sales-filter-bar,
  .credits-pro-heading,
  .credit-erp-tabs,
  .credits-header,
  .fournisseurs-page > .credits-header,
  .fournisseurs-page > .compte-stats,
  .compte-topbar,
  .compte-header,
  .reports-header,
  .reports-actions,
  .reports-tabs,
  .reports-filters,
  .voyages-pro-header,
  .voyages-pro-kpis {
    flex: 0 0 auto !important;
  }

  .stock-content,
  .ventes-pro-card.sales-list-card,
  .credits-page > .credit-card,
  .credits-pro-page,
  .fournisseur-list-card,
  .fournisseur-achat-card,
  .compte-page > .cash-report-panel,
  .compte-page > .historique-panel,
  .reports-tables,
  .reports-grid,
  .voyages-pro-page > .voyages-pro-section:last-child,
  .stock-zone-table-card {
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .stock-content,
  .credits-pro-page,
  .fournisseur-list-card,
  .reports-grid,
  .reports-tables,
  .voyages-pro-page > .voyages-pro-section:last-child,
  .stock-zone-table-card {
    flex: 1 1 auto !important;
  }

  .stock-search-row,
  .stock-filters,
  .stock-count,
  .table-header,
  .documents-toolbar,
  .stock-zone-table-head,
  .voyages-pro-section-head,
  .report-table-card > h3,
  .report-table-card > p {
    flex: 0 0 auto !important;
  }

  .stock-table-wrapper,
  .ventes-pro-table-wrap,
  .credit-table-wrap,
  .report-table-wrap,
  .stock-zone-table-wrap,
  .inventory-table-wrap,
  .transfer-table-wrap {
    min-height: 180px !important;
    overflow: auto !important;
    scrollbar-gutter: stable both-edges;
  }

  .stock-content > .stock-table-wrapper,
  .ventes-pro-card.sales-list-card > .ventes-pro-table-wrap,
  .fournisseur-list-card > .credit-table-wrap,
  .stock-zone-table-card > .stock-zone-table-wrap,
  .report-table-card > .report-table-wrap {
    flex: 1 1 auto !important;
  }

  .stock-table thead th,
  .ventes-pro-table thead th,
  .credit-table thead th,
  .report-table thead th,
  .stock-zone-table-wrap thead th,
  .inventory-table thead th,
  .transfer-table-wrap thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    background: #ffffff !important;
  }
}

@media screen and (max-width: 760px) {
  html,
  body,
  #root,
  .qmp-app-layout,
  .qmp-main-panel {
    min-height: 100%;
    overflow: auto;
  }
}

@media print {
  /* QMP route sheet final print override. Keep this block at the end of the file. */
  body:has(.route-sheet-page) * {
    visibility: hidden !important;
  }

  body:has(.route-sheet-page) .route-sheet,
  body:has(.route-sheet-page) .route-sheet * {
    visibility: visible !important;
  }

  body:has(.route-sheet-page) .document-toolbar,
  body:has(.route-sheet-page) .route-form-panel,
  body:has(.route-sheet-page) .sidebar,
  body:has(.route-sheet-page) .sidebar-user,
  body:has(.route-sheet-page) .app-header,
  body:has(.route-sheet-page) .topbar,
  body:has(.route-sheet-page) nav {
    display: none !important;
  }

  body:has(.route-sheet-page),
  body:has(.route-sheet-page) .app-layout,
  body:has(.route-sheet-page) .main-content,
  body:has(.route-sheet-page) .document-page,
  body:has(.route-sheet-page) .route-sheet-page {
    display: block !important;
    width: 100% !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #ffffff !important;
  }

  body:has(.route-sheet-page) .route-sheet {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 5mm !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #111827 !important;
    background: #ffffff !important;
    font-family: Arial, sans-serif !important;
  }

  body:has(.route-sheet-page) .route-header {
    display: grid !important;
    grid-template-columns: 1.2fr 0.8fr !important;
    gap: 8mm !important;
    padding-bottom: 4mm !important;
    border-bottom: 1.5px solid #111827 !important;
    break-inside: avoid !important;
  }

  body:has(.route-sheet-page) .route-header img {
    width: 58px !important;
    height: 42px !important;
  }

  body:has(.route-sheet-page) .route-header h1 {
    font-size: 18px !important;
    margin: 0 0 2mm !important;
  }

  body:has(.route-sheet-page) .route-header strong {
    font-size: 12px !important;
  }

  body:has(.route-sheet-page) .route-header span,
  body:has(.route-sheet-page) .route-header p {
    font-size: 9px !important;
    margin: 0 0 1mm !important;
  }

  body:has(.route-sheet-page) .route-info-grid,
  body:has(.route-sheet-page) .route-summary {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 2mm !important;
    margin: 4mm 0 !important;
    break-inside: avoid !important;
  }

  body:has(.route-sheet-page) .route-info-grid div,
  body:has(.route-sheet-page) .route-summary div {
    min-height: 0 !important;
    padding: 2mm !important;
    border-radius: 0 !important;
    background: #ffffff !important;
  }

  body:has(.route-sheet-page) .route-info-grid span,
  body:has(.route-sheet-page) .route-summary span {
    font-size: 7.5px !important;
  }

  body:has(.route-sheet-page) .route-info-grid strong,
  body:has(.route-sheet-page) .route-summary strong {
    font-size: 9px !important;
    margin-top: 1mm !important;
  }

  body:has(.route-sheet-page) .route-table-section {
    margin-top: 4mm !important;
    break-inside: auto !important;
    page-break-inside: auto !important;
  }

  body:has(.route-sheet-page) .route-table-section h2 {
    font-size: 10px !important;
    margin: 0 0 2mm !important;
  }

  body:has(.route-sheet-page) .route-table-section table {
    table-layout: fixed !important;
    width: 100% !important;
    border-collapse: collapse !important;
    border-color: #111827 !important;
    page-break-inside: auto !important;
  }

  body:has(.route-sheet-page) .route-table-section thead {
    display: table-header-group !important;
  }

  body:has(.route-sheet-page) .route-table-section tr {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  body:has(.route-sheet-page) .route-table-section th,
  body:has(.route-sheet-page) .route-table-section td {
    padding: 1.2mm 1.5mm !important;
    font-size: 8px !important;
    line-height: 1.15 !important;
    vertical-align: top !important;
    overflow-wrap: anywhere !important;
  }

  body:has(.route-sheet-page) .route-table-section th {
    background: #111827 !important;
    color: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body:has(.route-sheet-page) .route-table-section td {
    font-weight: 600 !important;
  }

  body:has(.route-sheet-page) .route-table-clients th:nth-child(1),
  body:has(.route-sheet-page) .route-table-clients td:nth-child(1) {
    width: 8mm !important;
  }

  body:has(.route-sheet-page) .route-table-clients th:nth-child(3),
  body:has(.route-sheet-page) .route-table-clients td:nth-child(3),
  body:has(.route-sheet-page) .route-table-clients th:nth-child(4),
  body:has(.route-sheet-page) .route-table-clients td:nth-child(4) {
    width: 25mm !important;
  }

  body:has(.route-sheet-page) .route-table-chargement th:nth-child(2),
  body:has(.route-sheet-page) .route-table-chargement td:nth-child(2),
  body:has(.route-sheet-page) .route-table-chargement th:nth-child(3),
  body:has(.route-sheet-page) .route-table-chargement td:nth-child(3) {
    width: 18mm !important;
  }

  body:has(.route-sheet-page) .route-signatures {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8mm !important;
    margin-top: 10mm !important;
    break-inside: avoid !important;
  }

  body:has(.route-sheet-page) .route-signatures div {
    min-height: 18mm !important;
  }

  body:has(.route-sheet-page) .route-signatures span {
    font-size: 9px !important;
  }

  @page {
    size: A4 landscape;
    margin: 6mm;
  }
}

@media print {
  /* QMP route sheet final print override. Keep this block at the end of the file. */
  body:has(.route-sheet-page) * {
    visibility: hidden !important;
  }

  body:has(.route-sheet-page) .route-sheet,
  body:has(.route-sheet-page) .route-sheet * {
    visibility: visible !important;
  }

  body:has(.route-sheet-page) .document-toolbar,
  body:has(.route-sheet-page) .route-form-panel,
  body:has(.route-sheet-page) .sidebar,
  body:has(.route-sheet-page) .sidebar-user,
  body:has(.route-sheet-page) .app-header,
  body:has(.route-sheet-page) .topbar,
  body:has(.route-sheet-page) nav {
    display: none !important;
  }

  body:has(.route-sheet-page),
  body:has(.route-sheet-page) .app-layout,
  body:has(.route-sheet-page) .main-content,
  body:has(.route-sheet-page) .document-page,
  body:has(.route-sheet-page) .route-sheet-page {
    display: block !important;
    width: 100% !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #ffffff !important;
  }

  body:has(.route-sheet-page) .route-sheet {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 5mm !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #111827 !important;
    background: #ffffff !important;
    font-family: Arial, sans-serif !important;
  }

  body:has(.route-sheet-page) .route-header {
    display: grid !important;
    grid-template-columns: 1.2fr 0.8fr !important;
    gap: 8mm !important;
    padding-bottom: 4mm !important;
    border-bottom: 1.5px solid #111827 !important;
    break-inside: avoid !important;
  }

  body:has(.route-sheet-page) .route-header img {
    width: 58px !important;
    height: 42px !important;
  }

  body:has(.route-sheet-page) .route-header h1 {
    font-size: 18px !important;
    margin: 0 0 2mm !important;
  }

  body:has(.route-sheet-page) .route-header strong {
    font-size: 12px !important;
  }

  body:has(.route-sheet-page) .route-header span,
  body:has(.route-sheet-page) .route-header p {
    font-size: 9px !important;
    margin: 0 0 1mm !important;
  }

  body:has(.route-sheet-page) .route-info-grid,
  body:has(.route-sheet-page) .route-summary {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 2mm !important;
    margin: 4mm 0 !important;
    break-inside: avoid !important;
  }

  body:has(.route-sheet-page) .route-info-grid div,
  body:has(.route-sheet-page) .route-summary div {
    min-height: 0 !important;
    padding: 2mm !important;
    border-radius: 0 !important;
    background: #ffffff !important;
  }

  body:has(.route-sheet-page) .route-info-grid span,
  body:has(.route-sheet-page) .route-summary span {
    font-size: 7.5px !important;
  }

  body:has(.route-sheet-page) .route-info-grid strong,
  body:has(.route-sheet-page) .route-summary strong {
    font-size: 9px !important;
    margin-top: 1mm !important;
  }

  body:has(.route-sheet-page) .route-table-section {
    margin-top: 4mm !important;
    break-inside: auto !important;
    page-break-inside: auto !important;
  }

  body:has(.route-sheet-page) .route-table-section h2 {
    font-size: 10px !important;
    margin: 0 0 2mm !important;
  }

  body:has(.route-sheet-page) .route-table-section table {
    table-layout: fixed !important;
    width: 100% !important;
    border-collapse: collapse !important;
    border-color: #111827 !important;
    page-break-inside: auto !important;
  }

  body:has(.route-sheet-page) .route-table-section thead {
    display: table-header-group !important;
  }

  body:has(.route-sheet-page) .route-table-section tr {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  body:has(.route-sheet-page) .route-table-section th,
  body:has(.route-sheet-page) .route-table-section td {
    padding: 1.2mm 1.5mm !important;
    font-size: 8px !important;
    line-height: 1.15 !important;
    vertical-align: top !important;
    overflow-wrap: anywhere !important;
  }

  body:has(.route-sheet-page) .route-table-section th {
    background: #111827 !important;
    color: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body:has(.route-sheet-page) .route-table-section td {
    font-weight: 600 !important;
  }

  body:has(.route-sheet-page) .route-table-clients th:nth-child(1),
  body:has(.route-sheet-page) .route-table-clients td:nth-child(1) {
    width: 8mm !important;
  }

  body:has(.route-sheet-page) .route-table-clients th:nth-child(3),
  body:has(.route-sheet-page) .route-table-clients td:nth-child(3),
  body:has(.route-sheet-page) .route-table-clients th:nth-child(4),
  body:has(.route-sheet-page) .route-table-clients td:nth-child(4) {
    width: 25mm !important;
  }

  body:has(.route-sheet-page) .route-table-chargement th:nth-child(2),
  body:has(.route-sheet-page) .route-table-chargement td:nth-child(2),
  body:has(.route-sheet-page) .route-table-chargement th:nth-child(3),
  body:has(.route-sheet-page) .route-table-chargement td:nth-child(3) {
    width: 18mm !important;
  }

  body:has(.route-sheet-page) .route-signatures {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8mm !important;
    margin-top: 10mm !important;
    break-inside: avoid !important;
  }

  body:has(.route-sheet-page) .route-signatures div {
    min-height: 18mm !important;
  }

  body:has(.route-sheet-page) .route-signatures span {
    font-size: 9px !important;
  }

  @page {
    size: A4 landscape;
    margin: 6mm;
  }
}

@media print {
  body:has(.route-sheet-page) * {
    visibility: hidden !important;
  }

  body:has(.route-sheet-page) .route-sheet,
  body:has(.route-sheet-page) .route-sheet * {
    visibility: visible !important;
  }

  body:has(.route-sheet-page) .document-toolbar,
  body:has(.route-sheet-page) .route-form-panel,
  body:has(.route-sheet-page) .sidebar,
  body:has(.route-sheet-page) .sidebar-user,
  body:has(.route-sheet-page) .app-header,
  body:has(.route-sheet-page) .topbar,
  body:has(.route-sheet-page) nav {
    display: none !important;
  }

  body:has(.route-sheet-page),
  body:has(.route-sheet-page) .app-layout,
  body:has(.route-sheet-page) .main-content,
  body:has(.route-sheet-page) .document-page,
  body:has(.route-sheet-page) .route-sheet-page {
    display: block !important;
    width: 100% !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #ffffff !important;
  }

  body:has(.route-sheet-page) .route-sheet {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 5mm !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #111827 !important;
    background: #ffffff !important;
    font-family: Arial, sans-serif !important;
  }

  body:has(.route-sheet-page) .route-header {
    display: grid !important;
    grid-template-columns: 1.2fr 0.8fr !important;
    gap: 8mm !important;
    padding-bottom: 4mm !important;
    border-bottom: 1.5px solid #111827 !important;
    break-inside: avoid !important;
  }

  body:has(.route-sheet-page) .route-header img {
    width: 58px !important;
    height: 42px !important;
  }

  body:has(.route-sheet-page) .route-header h1 {
    font-size: 18px !important;
    margin: 0 0 2mm !important;
  }

  body:has(.route-sheet-page) .route-header strong {
    font-size: 12px !important;
  }

  body:has(.route-sheet-page) .route-header span,
  body:has(.route-sheet-page) .route-header p {
    font-size: 9px !important;
    margin: 0 0 1mm !important;
  }

  body:has(.route-sheet-page) .route-info-grid,
  body:has(.route-sheet-page) .route-summary {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 2mm !important;
    margin: 4mm 0 !important;
    break-inside: avoid !important;
  }

  body:has(.route-sheet-page) .route-info-grid div,
  body:has(.route-sheet-page) .route-summary div {
    min-height: 0 !important;
    padding: 2mm !important;
    border-radius: 0 !important;
    background: #ffffff !important;
  }

  body:has(.route-sheet-page) .route-info-grid span,
  body:has(.route-sheet-page) .route-summary span {
    font-size: 7.5px !important;
  }

  body:has(.route-sheet-page) .route-info-grid strong,
  body:has(.route-sheet-page) .route-summary strong {
    font-size: 9px !important;
    margin-top: 1mm !important;
  }

  body:has(.route-sheet-page) .route-table-section {
    margin-top: 4mm !important;
    break-inside: auto !important;
    page-break-inside: auto !important;
  }

  body:has(.route-sheet-page) .route-table-section h2 {
    font-size: 10px !important;
    margin: 0 0 2mm !important;
  }

  body:has(.route-sheet-page) .route-table-section table {
    table-layout: fixed !important;
    width: 100% !important;
    border-collapse: collapse !important;
    border-color: #111827 !important;
    page-break-inside: auto !important;
  }

  body:has(.route-sheet-page) .route-table-section thead {
    display: table-header-group !important;
  }

  body:has(.route-sheet-page) .route-table-section tr {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  body:has(.route-sheet-page) .route-table-section th,
  body:has(.route-sheet-page) .route-table-section td {
    padding: 1.2mm 1.5mm !important;
    font-size: 8px !important;
    line-height: 1.15 !important;
    vertical-align: top !important;
    overflow-wrap: anywhere !important;
  }

  body:has(.route-sheet-page) .route-table-section th {
    background: #111827 !important;
    color: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body:has(.route-sheet-page) .route-table-section td {
    font-weight: 600 !important;
  }

  body:has(.route-sheet-page) .route-table-clients th:nth-child(1),
  body:has(.route-sheet-page) .route-table-clients td:nth-child(1) {
    width: 8mm !important;
  }

  body:has(.route-sheet-page) .route-table-clients th:nth-child(3),
  body:has(.route-sheet-page) .route-table-clients td:nth-child(3),
  body:has(.route-sheet-page) .route-table-clients th:nth-child(4),
  body:has(.route-sheet-page) .route-table-clients td:nth-child(4) {
    width: 25mm !important;
  }

  body:has(.route-sheet-page) .route-table-chargement th:nth-child(2),
  body:has(.route-sheet-page) .route-table-chargement td:nth-child(2),
  body:has(.route-sheet-page) .route-table-chargement th:nth-child(3),
  body:has(.route-sheet-page) .route-table-chargement td:nth-child(3) {
    width: 18mm !important;
  }

  body:has(.route-sheet-page) .route-signatures {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8mm !important;
    margin-top: 10mm !important;
    break-inside: avoid !important;
  }

  body:has(.route-sheet-page) .route-signatures div {
    min-height: 18mm !important;
  }

  body:has(.route-sheet-page) .route-signatures span {
    font-size: 9px !important;
  }

  @page {
    size: A4 landscape;
    margin: 6mm;
  }
}

@media print {
  body:has(.route-sheet-page) * {
    visibility: hidden !important;
  }

  body:has(.route-sheet-page) .route-sheet,
  body:has(.route-sheet-page) .route-sheet * {
    visibility: visible !important;
  }

  body:has(.route-sheet-page) .document-toolbar,
  body:has(.route-sheet-page) .route-form-panel,
  body:has(.route-sheet-page) .sidebar,
  body:has(.route-sheet-page) .sidebar-user,
  body:has(.route-sheet-page) .app-header,
  body:has(.route-sheet-page) .topbar,
  body:has(.route-sheet-page) nav {
    display: none !important;
  }

  body:has(.route-sheet-page),
  body:has(.route-sheet-page) .app-layout,
  body:has(.route-sheet-page) .main-content,
  body:has(.route-sheet-page) .document-page,
  body:has(.route-sheet-page) .route-sheet-page {
    display: block !important;
    width: 100% !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #ffffff !important;
  }

  body:has(.route-sheet-page) .route-sheet {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 5mm !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #111827 !important;
    background: #ffffff !important;
    font-family: Arial, sans-serif !important;
  }

  body:has(.route-sheet-page) .route-header {
    display: grid !important;
    grid-template-columns: 1.2fr 0.8fr !important;
    gap: 8mm !important;
    padding-bottom: 4mm !important;
    border-bottom: 1.5px solid #111827 !important;
    break-inside: avoid !important;
  }

  body:has(.route-sheet-page) .route-header img {
    width: 58px !important;
    height: 42px !important;
  }

  body:has(.route-sheet-page) .route-header h1 {
    font-size: 18px !important;
    margin: 0 0 2mm !important;
  }

  body:has(.route-sheet-page) .route-header strong {
    font-size: 12px !important;
  }

  body:has(.route-sheet-page) .route-header span,
  body:has(.route-sheet-page) .route-header p {
    font-size: 9px !important;
    margin: 0 0 1mm !important;
  }

  body:has(.route-sheet-page) .route-info-grid,
  body:has(.route-sheet-page) .route-summary {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 2mm !important;
    margin: 4mm 0 !important;
    break-inside: avoid !important;
  }

  body:has(.route-sheet-page) .route-info-grid div,
  body:has(.route-sheet-page) .route-summary div {
    min-height: 0 !important;
    padding: 2mm !important;
    border-radius: 0 !important;
    background: #ffffff !important;
  }

  body:has(.route-sheet-page) .route-info-grid span,
  body:has(.route-sheet-page) .route-summary span {
    font-size: 7.5px !important;
  }

  body:has(.route-sheet-page) .route-info-grid strong,
  body:has(.route-sheet-page) .route-summary strong {
    font-size: 9px !important;
    margin-top: 1mm !important;
  }

  body:has(.route-sheet-page) .route-table-section {
    margin-top: 4mm !important;
    break-inside: auto !important;
    page-break-inside: auto !important;
  }

  body:has(.route-sheet-page) .route-table-section h2 {
    font-size: 10px !important;
    margin: 0 0 2mm !important;
  }

  body:has(.route-sheet-page) .route-table-section table {
    table-layout: fixed !important;
    width: 100% !important;
    border-collapse: collapse !important;
    border-color: #111827 !important;
    page-break-inside: auto !important;
  }

  body:has(.route-sheet-page) .route-table-section thead {
    display: table-header-group !important;
  }

  body:has(.route-sheet-page) .route-table-section tr {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  body:has(.route-sheet-page) .route-table-section th,
  body:has(.route-sheet-page) .route-table-section td {
    padding: 1.2mm 1.5mm !important;
    font-size: 8px !important;
    line-height: 1.15 !important;
    vertical-align: top !important;
    overflow-wrap: anywhere !important;
  }

  body:has(.route-sheet-page) .route-table-section th {
    background: #111827 !important;
    color: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body:has(.route-sheet-page) .route-table-section td {
    font-weight: 600 !important;
  }

  body:has(.route-sheet-page) .route-table-clients th:nth-child(1),
  body:has(.route-sheet-page) .route-table-clients td:nth-child(1) {
    width: 8mm !important;
  }

  body:has(.route-sheet-page) .route-table-clients th:nth-child(3),
  body:has(.route-sheet-page) .route-table-clients td:nth-child(3),
  body:has(.route-sheet-page) .route-table-clients th:nth-child(4),
  body:has(.route-sheet-page) .route-table-clients td:nth-child(4) {
    width: 25mm !important;
  }

  body:has(.route-sheet-page) .route-table-chargement th:nth-child(2),
  body:has(.route-sheet-page) .route-table-chargement td:nth-child(2),
  body:has(.route-sheet-page) .route-table-chargement th:nth-child(3),
  body:has(.route-sheet-page) .route-table-chargement td:nth-child(3) {
    width: 18mm !important;
  }

  body:has(.route-sheet-page) .route-signatures {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8mm !important;
    margin-top: 10mm !important;
    break-inside: avoid !important;
  }

  body:has(.route-sheet-page) .route-signatures div {
    min-height: 18mm !important;
  }

  body:has(.route-sheet-page) .route-signatures span {
    font-size: 9px !important;
  }

  @page {
    size: A4 landscape;
    margin: 6mm;
  }
}

.inventory-recovery-page {
  padding: 28px;
  background: #f3f6fb;
  min-height: calc(100vh - 72px);
  color: #0f172a;
}

.inventory-recovery-hero {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: 24px;
  border: 1px solid #dbe6f5;
  border-radius: 18px;
  background: linear-gradient(135deg, #ffffff 0%, #eef5ff 100%);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

.inventory-recovery-hero span {
  color: #0b63f6;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.inventory-recovery-hero h1 {
  margin: 8px 0 6px;
  font-size: 28px;
}

.inventory-recovery-hero p {
  margin: 0;
  color: #475569;
}

.inventory-recovery-hero button,
.inventory-recovery-table button,
.inventory-expense-form button,
.inventory-new-article-form button {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  background: #0b63f6;
  color: #fff;
  padding: 11px 16px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(11, 99, 246, 0.22);
}

.inventory-recovery-table button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.inventory-recovery-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.inventory-recovery-kpi,
.inventory-recovery-card,
.inventory-recovery-notice {
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}

.inventory-recovery-kpi {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px;
}

.inventory-recovery-kpi > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #0b63f6;
  background: #eaf2ff;
}

.inventory-recovery-kpi p {
  margin: 0 0 4px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.inventory-recovery-kpi strong {
  font-size: 18px;
}

.inventory-recovery-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-weight: 800;
}

.inventory-recovery-notice.success {
  color: #047857;
  background: #ecfdf5;
}

.inventory-recovery-notice.error {
  color: #b91c1c;
  background: #fef2f2;
}

.inventory-recovery-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0;
}

.inventory-recovery-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #dbe6f5;
  border-radius: 999px;
  background: #fff;
  color: #334155;
  padding: 10px 14px;
  font-weight: 800;
  cursor: pointer;
}

.inventory-recovery-tabs button.active {
  color: #fff;
  border-color: #0b63f6;
  background: #0b63f6;
}

.inventory-recovery-card {
  padding: 18px;
  margin-top: 14px;
}

.inventory-recovery-card-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
}

.inventory-recovery-card-head h2 {
  margin: 0;
  font-size: 18px;
}

.inventory-recovery-card-head p {
  margin: 4px 0 0;
  color: #64748b;
}

.inventory-recovery-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 310px;
  border: 1px solid #dbe6f5;
  border-radius: 12px;
  padding: 0 12px;
  background: #fff;
}

.inventory-recovery-search input,
.inventory-recovery-table input,
.inventory-recovery-table select,
.inventory-expense-form input,
.inventory-expense-form select,
.inventory-new-article-form input {
  width: 100%;
  border: 1px solid #dbe6f5;
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
  background: #fff;
}

.inventory-recovery-search input {
  border: 0;
}

.inventory-recovery-table-wrap {
  overflow: auto;
}

.inventory-recovery-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 940px;
}

.inventory-recovery-table th {
  text-align: left;
  padding: 12px;
  color: #475569;
  font-size: 12px;
  border-bottom: 1px solid #e2e8f0;
}

.inventory-recovery-table td {
  padding: 12px;
  border-bottom: 1px solid #eef2f7;
  vertical-align: middle;
}

.inventory-recovery-table td strong,
.inventory-recovery-table td small {
  display: block;
}

.inventory-recovery-table td small {
  color: #64748b;
  margin-top: 3px;
}

.inventory-recovery-table .positive,
.inventory-recovery-history .positive {
  color: #059669;
  font-weight: 900;
}

.inventory-recovery-table .negative,
.inventory-recovery-history .negative {
  color: #dc2626;
  font-weight: 900;
}

.inventory-expense-form {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.4fr auto;
  gap: 12px;
  align-items: end;
}

.inventory-expense-form label {
  display: grid;
  gap: 6px;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.inventory-new-article-form {
  display: grid;
  grid-template-columns: 1.35fr repeat(7, minmax(90px, 1fr)) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  margin-bottom: 14px;
  border: 1px solid #dbe6f5;
  border-radius: 14px;
  background: #f8fbff;
}

.inventory-new-article-form div {
  display: grid;
  gap: 4px;
}

.inventory-new-article-form strong {
  color: #0f172a;
  font-size: 13px;
}

.inventory-new-article-form span {
  color: #64748b;
  font-size: 11px;
  line-height: 1.35;
}

.inventory-recovery-history {
  display: grid;
  gap: 8px;
}

.inventory-recovery-history div {
  display: grid;
  grid-template-columns: 120px 1fr 150px;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  background: #f8fafc;
}

.inventory-recovery-history span {
  color: #475569;
}

@media (max-width: 1020px) {
  .inventory-recovery-kpis {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }

  .inventory-expense-form {
    grid-template-columns: 1fr 1fr;
  }

  .inventory-new-article-form {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .inventory-recovery-page {
    padding: 16px;
  }

  .inventory-recovery-hero,
  .inventory-recovery-card-head {
    align-items: stretch;
    flex-direction: column;
  }

  .inventory-recovery-kpis,
  .inventory-expense-form,
  .inventory-new-article-form,
  .inventory-recovery-history div {
    grid-template-columns: 1fr;
  }

  .inventory-recovery-search {
    min-width: 0;
  }
}

.advanced-stats-page {
  min-height: calc(100vh - 72px);
  padding: 28px;
  background: #f4f7fb;
  color: #0f172a;
}

.advanced-stats-hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 24px;
  border: 1px solid #dbe6f5;
  border-radius: 18px;
  background: linear-gradient(135deg, #ffffff 0%, #edf5ff 100%);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.advanced-stats-hero span {
  color: #0b63f6;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.advanced-stats-hero h1 {
  margin: 8px 0 6px;
  font-size: 30px;
  letter-spacing: 0;
}

.advanced-stats-hero p {
  margin: 0;
  color: #52637d;
}

.advanced-stats-actions,
.advanced-stats-nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.advanced-stats-actions button,
.advanced-stats-filters button,
.advanced-stats-nav button,
.advanced-conclusion button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 12px;
  padding: 11px 14px;
  background: #0b63f6;
  color: #fff;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(11, 99, 246, 0.18);
}

.advanced-stats-actions button:nth-child(2),
.advanced-stats-actions button:nth-child(3),
.advanced-stats-nav button {
  border: 1px solid #dbe6f5;
  background: #fff;
  color: #1e3a8a;
  box-shadow: none;
}

.advanced-stats-nav button.active {
  border-color: #0b63f6;
  background: #0b63f6;
  color: #fff;
}

.advanced-stats-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 12px;
  margin: 18px 0;
  padding: 16px;
  border: 1px solid #dbe6f5;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}

.advanced-stats-filters label {
  display: grid;
  gap: 6px;
  color: #475569;
  font-size: 12px;
  font-weight: 850;
}

.advanced-stats-filters input,
.advanced-stats-filters select {
  width: 100%;
  border: 1px solid #dbe6f5;
  border-radius: 10px;
  padding: 10px 11px;
  background: #fff;
  color: #0f172a;
  outline: none;
}

.advanced-stats-message {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff7ed;
  color: #c2410c;
  font-weight: 800;
}

.advanced-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.advanced-kpi-card,
.advanced-chart-card,
.advanced-table-card,
.advanced-conclusion {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}

.advanced-kpi-card {
  padding: 16px;
}

.advanced-kpi-card span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 8px;
}

.advanced-kpi-card strong {
  font-size: 20px;
  font-weight: 950;
}

.advanced-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.advanced-chart-card {
  padding: 16px;
  min-height: 330px;
}

.advanced-chart-card h3,
.advanced-table-card h2,
.advanced-conclusion h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 17px;
}

.advanced-table-card,
.advanced-conclusion {
  padding: 18px;
  margin-top: 18px;
}

.advanced-table-wrap {
  overflow: auto;
}

.advanced-table-card table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
}

.advanced-table-card th {
  text-align: left;
  padding: 11px;
  color: #475569;
  font-size: 12px;
  border-bottom: 1px solid #dbe6f5;
  background: #f8fafc;
}

.advanced-table-card td {
  padding: 11px;
  border-bottom: 1px solid #eef2f7;
  font-size: 13px;
}

.advanced-table-card tbody tr:hover {
  background: #f8fbff;
}

.advanced-conclusion {
  background: #0f172a;
  color: #fff;
}

.advanced-conclusion p {
  color: #dbeafe;
  line-height: 1.65;
  font-size: 15px;
}

.advanced-conclusion button {
  background: #fff;
  color: #0b63f6;
}

@media (max-width: 1100px) {
  .advanced-stats-filters,
  .advanced-kpi-grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}

@media (max-width: 780px) {
  .advanced-stats-page {
    padding: 16px;
  }

  .advanced-stats-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .advanced-stats-filters,
  .advanced-kpi-grid,
  .advanced-chart-grid {
    grid-template-columns: 1fr;
  }
}

@media print {
  .advanced-stats-actions,
  .advanced-stats-filters,
  .advanced-stats-nav,
  .qmp-sidebar,
  .qmp-app-header {
    display: none !important;
  }

  .advanced-stats-page {
    padding: 0;
    background: #fff;
  }

  .advanced-kpi-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .advanced-chart-card,
  .advanced-table-card,
  .advanced-conclusion {
    break-inside: avoid;
    box-shadow: none;
  }
}

.article-label-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #dbe6f5;
  border-radius: 14px;
  background: #f8fbff;
}

.article-label-preview h3 {
  margin: 0 0 4px;
  font-size: 15px;
}

.article-label-preview p {
  margin: 0 0 6px;
  color: #52637d;
  font-size: 12px;
}

.article-label-preview img {
  width: 100%;
  max-width: 280px;
  height: 44px;
  object-fit: contain;
  background: #fff;
}

.mobile-scan-page {
  min-height: calc(100vh - 72px);
  padding: 18px;
  background: #eef4fb;
  color: #0f172a;
}

.mobile-scan-header,
.mobile-camera-card,
.mobile-article-card,
.mobile-count-list {
  border: 1px solid #dbe6f5;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

.mobile-scan-header {
  padding: 20px;
}

.mobile-scan-header span {
  color: #0b63f6;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.mobile-scan-header h1 {
  margin: 6px 0;
  font-size: 25px;
}

.mobile-scan-header p {
  margin: 0;
  color: #52637d;
}

.mobile-scan-modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0;
}

.mobile-scan-modes button,
.mobile-camera-actions button,
.mobile-count-buttons button {
  border: 0;
  border-radius: 12px;
  padding: 11px 12px;
  background: #fff;
  color: #1e3a8a;
  font-weight: 850;
  cursor: pointer;
}

.mobile-scan-modes button.active,
.mobile-camera-actions button {
  background: #0b63f6;
  color: #fff;
}

.mobile-camera-card {
  padding: 12px;
}

.mobile-camera-card video {
  width: 100%;
  min-height: 240px;
  max-height: 48vh;
  border-radius: 14px;
  background: #0f172a;
  object-fit: cover;
}

.mobile-camera-actions {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  margin-top: 10px;
}

.mobile-camera-actions form {
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid #dbe6f5;
  border-radius: 12px;
  padding: 0 8px;
  background: #fff;
}

.mobile-camera-actions input {
  width: 100%;
  border: 0;
  padding: 12px 4px;
  outline: none;
}

.mobile-scan-message {
  margin: 12px 0;
  padding: 12px;
  border-radius: 12px;
  background: #fff7ed;
  color: #c2410c;
  font-weight: 800;
}

.mobile-article-card,
.mobile-count-list {
  margin-top: 12px;
  padding: 16px;
}

.mobile-article-card > div:first-child span {
  color: #0b63f6;
  font-size: 12px;
  font-weight: 900;
}

.mobile-article-card h2 {
  margin: 5px 0;
}

.mobile-article-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.mobile-article-grid div {
  padding: 12px;
  border-radius: 12px;
  background: #f8fafc;
}

.mobile-article-grid span,
.mobile-count-list span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.mobile-article-grid strong {
  display: block;
  margin-top: 4px;
}

.mobile-count-panel {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: end;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
}

.mobile-count-panel label {
  display: grid;
  gap: 6px;
  color: #475569;
  font-size: 12px;
  font-weight: 850;
}

.mobile-count-panel input {
  border: 1px solid #dbe6f5;
  border-radius: 10px;
  padding: 11px;
}

.mobile-count-buttons {
  display: flex;
  gap: 6px;
}

.mobile-count-buttons button {
  background: #eaf2ff;
  color: #0b63f6;
}

.mobile-count-panel .positive,
.mobile-count-list .positive {
  color: #059669;
}

.mobile-count-panel .negative,
.mobile-count-list .negative {
  color: #dc2626;
}

.mobile-count-list div {
  display: grid;
  grid-template-columns: 1fr 72px 72px;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eef2f7;
}

@media (max-width: 760px) {
  .article-label-preview {
    grid-template-columns: 1fr;
  }

  .mobile-scan-page {
    padding: 12px;
  }

  .mobile-scan-modes,
  .mobile-camera-actions,
  .mobile-count-panel {
    grid-template-columns: 1fr;
  }
}

.supplier-purchase-list-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 16px;
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid #dce8f7;
  border-radius: 16px;
  background: linear-gradient(135deg, #ffffff, #edf5ff);
}

.supplier-purchase-list-hero span {
  color: #075bf6;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.supplier-purchase-list-hero h2 {
  margin: 6px 0;
  color: #07152f;
  font-size: 28px;
}

.supplier-purchase-list-hero p {
  margin: 0;
  color: #52637d;
  font-size: 13px;
  font-weight: 700;
}

.supplier-purchase-list-hero > div:last-child {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.supplier-purchase-list-hero article {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid #e1e9f5;
  border-radius: 12px;
  background: #ffffff;
}

.supplier-purchase-list-hero article svg {
  color: #075bf6;
}

.supplier-purchase-list-hero article strong {
  color: #07152f;
  font-size: 18px;
}

.supplier-purchase-list-hero article small {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.supplier-purchase-filters,
.credit-client-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr)) auto;
  gap: 10px;
  align-items: end;
  margin: -4px 0 16px;
  padding: 12px;
  border: 1px solid #e4edf8;
  border-radius: 12px;
  background: #f8fbff;
}

.supplier-purchase-filters label,
.credit-client-filters label {
  display: grid;
  gap: 5px;
  color: #41557b;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.supplier-purchase-filters input,
.supplier-purchase-filters select,
.credit-client-filters select {
  min-height: 34px;
  border: 1px solid #d6e2f2;
  border-radius: 8px;
  padding: 0 10px;
  background: #ffffff;
  color: #17284e;
  font-weight: 800;
}

.supplier-purchase-filters button,
.credit-client-filters button {
  min-height: 34px;
  border: 1px solid #d6e2f2;
  border-radius: 8px;
  background: #ffffff;
  color: #17366e;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.supplier-purchase-list-table td small {
  color: #64748b;
  font-size: 11px;
}

.supplier-purchase-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  color: #15803d;
  background: #dcfce7;
  font-size: 10px;
  font-weight: 950;
}

.supplier-purchase-status.annule {
  color: #dc2626;
  background: #fee2e2;
}

.credit-client-table-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.credit-client-table-actions .small-search {
  min-width: min(320px, 100%);
}

@media (max-width: 900px) {
  .supplier-purchase-list-hero,
  .supplier-purchase-filters,
  .credit-client-filters {
    grid-template-columns: 1fr;
  }

  .supplier-purchase-list-hero > div:last-child {
    grid-template-columns: 1fr;
  }
}

.qmp-app-header {
  z-index: 1200 !important;
}

.qmp-notification-wrap {
  position: relative;
  z-index: 1300;
}

.qmp-notification-panel {
  z-index: 3000 !important;
}

.supplier-purchase-page {
  display: grid;
  gap: 18px;
}

.supplier-purchase-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border: 1px solid #dbe7f5;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(7, 91, 246, 0.10), rgba(255, 255, 255, 0.92)),
    #ffffff;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

.supplier-purchase-kicker {
  display: inline-flex;
  margin-bottom: 8px;
  color: #075bf6;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.supplier-purchase-hero h1 {
  margin: 0;
  color: #07152f;
  font-size: 28px;
  line-height: 1.05;
}

.supplier-purchase-hero p {
  margin: 8px 0 0;
  color: #52637d;
  font-size: 13px;
  font-weight: 700;
}

.supplier-purchase-hero-actions,
.supplier-purchase-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.supplier-purchase-primary,
.supplier-purchase-ghost,
.supplier-purchase-lines-head button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.supplier-purchase-primary {
  border: 0;
  color: #ffffff;
  background: linear-gradient(135deg, #075bf6, #0146ca);
  box-shadow: 0 10px 20px rgba(7, 91, 246, 0.24);
}

.supplier-purchase-primary:hover,
.supplier-purchase-lines-head button:hover,
.supplier-purchase-ghost:hover {
  transform: translateY(-1px);
}

.supplier-purchase-primary:disabled {
  cursor: not-allowed;
  opacity: 0.62;
  transform: none;
}

.supplier-purchase-ghost {
  border: 1px solid #d8e4f2;
  color: #17366e;
  background: #ffffff;
}

.supplier-purchase-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.supplier-purchase-kpi {
  min-height: 88px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid #e1e9f5;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.supplier-purchase-kpi > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
}

.supplier-purchase-kpi small {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.supplier-purchase-kpi strong {
  display: block;
  margin-top: 5px;
  color: #07152f;
  font-size: 18px;
  font-weight: 950;
}

.supplier-purchase-kpi.blue > span { color: #075bf6; background: #e8f1ff; }
.supplier-purchase-kpi.green > span { color: #16a34a; background: #dcfce7; }
.supplier-purchase-kpi.orange > span { color: #f97316; background: #ffedd5; }
.supplier-purchase-kpi.purple > span { color: #7c3aed; background: #ede9fe; }

.supplier-purchase-workspace {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.supplier-purchase-side,
.supplier-purchase-card {
  min-width: 0;
}

.supplier-purchase-side {
  display: grid;
  gap: 14px;
}

.supplier-purchase-card,
.supplier-purchase-total-card,
.supplier-purchase-alert {
  border: 1px solid #e1e9f5;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}

.supplier-purchase-card {
  padding: 16px;
}

.supplier-purchase-card-title,
.supplier-purchase-lines-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.supplier-purchase-card-title {
  justify-content: flex-start;
  margin-bottom: 14px;
  color: #075bf6;
}

.supplier-purchase-card h2,
.supplier-purchase-lines-head h2 {
  margin: 0;
  color: #07152f;
  font-size: 17px;
}

.supplier-purchase-lines-head p {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.supplier-purchase-card label {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  color: #334155;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.supplier-purchase-card input,
.supplier-purchase-card textarea,
.supplier-purchase-table input {
  width: 100%;
  min-width: 0;
  border: 1px solid #d8e4f2;
  border-radius: 10px;
  padding: 10px 11px;
  background: #ffffff;
  color: #0f172a;
  font-weight: 800;
  box-sizing: border-box;
  outline: none;
}

.supplier-purchase-card input:focus,
.supplier-purchase-card textarea:focus,
.supplier-purchase-table input:focus {
  border-color: #075bf6;
  box-shadow: 0 0 0 3px rgba(7, 91, 246, 0.11);
}

.supplier-purchase-card textarea {
  min-height: 92px;
  resize: vertical;
}

.supplier-purchase-total-card {
  padding: 18px;
  background: linear-gradient(135deg, #07152f, #075bf6);
  color: #ffffff;
}

.supplier-purchase-total-card span,
.supplier-purchase-total-card small {
  display: block;
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.supplier-purchase-total-card strong {
  display: block;
  margin: 7px 0;
  font-size: 24px;
  font-weight: 950;
}

.supplier-purchase-alert {
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 900;
}

.supplier-purchase-alert.error {
  color: #991b1b;
  background: #fef2f2;
  border-color: #fecaca;
}

.supplier-purchase-alert.success {
  color: #166534;
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.supplier-purchase-lines {
  padding: 0;
  overflow: hidden;
}

.supplier-purchase-lines-head {
  padding: 16px 16px 14px;
  border-bottom: 1px solid #edf2f7;
}

.supplier-purchase-lines-head button {
  border: 1px solid #c7d9f4;
  color: #075bf6;
  background: #eff6ff;
}

.supplier-purchase-table-wrap {
  max-height: calc(100vh - 360px);
  min-height: 280px;
  overflow: auto;
}

.supplier-purchase-table {
  width: 100%;
  min-width: 960px;
  border-collapse: separate;
  border-spacing: 0;
}

.supplier-purchase-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px 10px;
  color: #64748b;
  background: #f8fbff;
  border-bottom: 1px solid #e5edf7;
  font-size: 11px;
  font-weight: 950;
  text-align: left;
  text-transform: uppercase;
}

.supplier-purchase-table td {
  padding: 12px 10px;
  border-bottom: 1px solid #edf2f7;
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
  vertical-align: middle;
}

.supplier-purchase-table tbody tr:hover {
  background: #f8fbff;
}

.supplier-purchase-table th:nth-child(1),
.supplier-purchase-table td:nth-child(1) {
  width: 280px;
}

.supplier-purchase-table th:nth-child(5),
.supplier-purchase-table td:nth-child(5) {
  width: 112px;
}

.supplier-purchase-table th:nth-child(6),
.supplier-purchase-table td:nth-child(6),
.supplier-purchase-table th:nth-child(7),
.supplier-purchase-table td:nth-child(7) {
  width: 150px;
}

.supplier-purchase-code {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 0 10px;
  color: #075bf6;
  background: #eef6ff;
  font-size: 11px;
  font-weight: 950;
}

.supplier-purchase-delete {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #fee2e2;
  border-radius: 10px;
  color: #dc2626;
  background: #fff7f7;
  cursor: pointer;
}

.supplier-purchase-footer {
  padding: 14px 16px;
  border-top: 1px solid #edf2f7;
  background: #fbfdff;
}

@media (max-width: 1180px) {
  .supplier-purchase-workspace {
    grid-template-columns: 1fr;
  }

  .supplier-purchase-side {
    grid-template-columns: minmax(0, 1fr) 260px;
  }
}

@media (max-width: 900px) {
  .supplier-purchase-hero,
  .supplier-purchase-hero-actions,
  .supplier-purchase-footer,
  .supplier-purchase-lines-head {
    align-items: stretch;
    flex-direction: column;
  }

  .supplier-purchase-kpis,
  .supplier-purchase-side {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .supplier-purchase-kpis,
  .supplier-purchase-side {
    grid-template-columns: 1fr;
  }
}

/* Executive dashboard */
.executive-dashboard{min-width:0;padding:0 18px 28px;color:#0f1b33}
.executive-topbar,.executive-welcome,.executive-actions,.executive-balance,.executive-kpi,.category-layout,.health-card{display:flex}
.executive-topbar{min-height:64px;margin:0 -18px 14px;padding:10px 18px;align-items:center;justify-content:space-between;gap:16px;background:#fff;border-bottom:1px solid #e7edf5}
.executive-topbar h1,.executive-welcome h2,.executive-panel h3{margin:0}
.executive-topbar h1{font-size:18px}.executive-topbar p,.executive-welcome p,.panel-heading p{margin:4px 0 0;color:#64748b;font-size:12px}
.executive-actions{align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.executive-actions button,.executive-balance button{border:0;cursor:pointer}
.executive-actions button{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:7px;color:#fff;font-weight:800;font-size:12px;box-shadow:0 4px 12px rgba(15,23,42,.08)}
.action-blue{background:#1769e8}.action-green{background:#18a957}.action-teal{background:#13a98e}.action-orange{background:#fb8c16}.action-purple{background:#8147dd}
.executive-actions .executive-refresh{width:36px;padding:0;justify-content:center;color:#475569;background:#f8fafc;border:1px solid #dbe4ef}
.executive-welcome{min-height:86px;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px;padding:14px 18px;background:#fff;border:1px solid #e5ebf3;border-radius:8px;box-shadow:0 3px 10px rgba(15,23,42,.03)}
.executive-welcome h2{font-size:22px}.executive-welcome p strong{color:#2563eb}
.executive-balance{align-items:center;gap:14px;min-width:245px;padding:10px 12px;border:1px solid #edf1f6;border-radius:8px}.executive-balance div{flex:1}
.executive-balance span,.executive-balance strong{display:block}.executive-balance span{color:#64748b;font-size:11px;font-weight:700}.executive-balance strong{margin-top:5px;font-size:17px}
.executive-balance button{width:34px;height:34px;color:#2563eb;background:#f3f7ff;border-radius:7px}
.executive-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:14px}
.executive-kpi{min-width:0;min-height:92px;align-items:flex-start;gap:11px;padding:14px 12px;background:#fff;border:1px solid #e5ebf3;border-radius:8px;box-shadow:0 3px 10px rgba(15,23,42,.03)}
.executive-icon{display:grid;flex:0 0 42px;width:42px;height:42px;place-items:center;border-radius:8px}
.executive-icon.blue{color:#2563eb;background:#eaf2ff}.executive-icon.teal{color:#10a889;background:#e6faf5}.executive-icon.amber{color:#f59e0b;background:#fff6e6}.executive-icon.red{color:#ef4444;background:#fff0f0}.executive-icon.purple{color:#7c3aed;background:#f2ecff}.executive-icon.coral{color:#f05252;background:#fff0ee}
.executive-kpi span,.executive-kpi strong,.executive-kpi small{display:block}.executive-kpi span{color:#536987;font-size:10px;font-weight:800;text-transform:uppercase}.executive-kpi strong{margin:7px 0 5px;overflow-wrap:anywhere;font-size:15px}.executive-kpi small{color:#64748b;font-size:10px}
.executive-panel{min-width:0;background:#fff;border:1px solid #e5ebf3;border-radius:8px;box-shadow:0 3px 10px rgba(15,23,42,.03)}
.executive-performance{display:grid;grid-template-columns:minmax(0,2.8fr) repeat(3,minmax(150px,1fr));gap:12px;margin-bottom:14px}
.performance-main{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:164px;padding:16px}
.performance-copy span,.performance-copy strong,.performance-copy em{display:block}.performance-copy span{font-size:12px;font-weight:800}.performance-copy span small,.executive-panel h3 small{color:#64748b;font-size:11px;font-weight:600}
.performance-copy strong{margin:12px 0 7px;font-size:20px}.performance-copy p{margin:0;color:#45617f;font-size:12px}.performance-copy em{margin-top:20px;color:#16a34a;font-size:11px;font-style:normal;font-weight:700}.performance-chart{height:132px}
.executive-metric-tile{display:flex;flex-direction:column;justify-content:center;gap:9px;padding:16px;border-radius:8px}.executive-metric-tile.blue{color:#2563eb;background:#edf5ff}.executive-metric-tile.amber{color:#e88a08;background:#fff8ec}.executive-metric-tile.red{color:#e14949;background:#fff3f3}
.executive-metric-tile strong{color:#0f1b33;overflow-wrap:anywhere;font-size:17px}.executive-metric-tile span{color:#45617f;font-size:11px;font-weight:800;text-transform:uppercase}.executive-metric-tile small{color:#64748b;font-size:10px}
.executive-middle{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1.45fr) minmax(250px,1fr);gap:12px;margin-bottom:14px}
.chart-panel,.category-panel,.alerts-panel,.recent-panel,.rank-panel{padding:15px}.executive-panel h3{font-size:13px}.large-chart{height:180px;margin-top:12px}
.category-layout{align-items:center;gap:18px;min-height:190px}.doughnut-wrap{position:relative;flex:0 0 155px;height:155px}.doughnut-wrap>div{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}
.doughnut-wrap strong,.doughnut-wrap span{display:block}.doughnut-wrap strong{font-size:17px}.doughnut-wrap span{color:#64748b;font-size:10px}.category-legend{flex:1;min-width:0}
.category-legend>div{display:grid;grid-template-columns:10px minmax(0,1fr) 34px;gap:7px;align-items:center;margin-bottom:10px}.category-legend i{width:9px;height:9px;border-radius:2px}.category-legend span,.category-legend strong,.category-legend small{font-size:10px}.category-legend strong{text-align:right}.category-legend small{grid-column:2/4;color:#64748b;text-align:right}
.alerts-panel h3 b{display:inline-grid;min-width:18px;height:18px;margin-left:5px;place-items:center;color:#fff;background:#ef4444;border-radius:50%;font-size:10px}
.alerts-panel button{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:7px;width:100%;align-items:center;padding:11px 0;color:#0f1b33;background:transparent;border:0;border-bottom:1px solid #eef2f7;cursor:pointer;text-align:left}.alerts-panel button svg{color:#f59e0b}.alerts-panel button span{font-size:11px}.alerts-panel button strong{color:#2563eb;font-size:10px}
.executive-bottom{display:grid;grid-template-columns:minmax(0,2.5fr) minmax(180px,.9fr) minmax(180px,.9fr) minmax(220px,1fr);gap:12px}.recent-panel{overflow:hidden}.panel-heading{margin-bottom:10px}.recent-panel .credit-table-wrap{overflow-x:auto}.recent-panel .credit-table{min-width:620px}.recent-panel .credit-table th,.recent-panel .credit-table td{padding:8px 7px;font-size:10px}
.amount-positive{color:#16a34a;font-weight:800}.amount-negative{color:#ef4444;font-weight:800}.panel-link{display:block;margin:11px auto 0;color:#2563eb;background:transparent;border:0;cursor:pointer;font-size:10px;font-weight:800}.panel-link span{margin-left:6px;font-size:16px}
.rank-panel{display:flex;flex-direction:column}.rank-panel ol{flex:1;margin:13px 0 0;padding-left:18px}.rank-panel li{padding:7px 0;font-size:10px}.rank-panel li span{display:inline-block;max-width:62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}.rank-panel li strong{float:right;font-size:10px}.rank-panel .rank-empty{color:#64748b}
.executive-health{display:grid;gap:10px}.health-card{min-width:0;align-items:center;gap:12px;padding:14px;border-radius:8px}.health-card.green{color:#16a34a;background:#edfcf3}.health-card.blue{color:#2563eb;background:#edf5ff}.health-card.purple{color:#7c3aed;background:#f5f0ff}.health-card div{flex:1;min-width:0}.health-card span,.health-card strong,.health-card small{display:block}.health-card span{color:#45617f;font-size:10px}.health-card strong{margin:4px 0;color:#0f1b33;overflow-wrap:anywhere;font-size:15px}.health-card small{color:#64748b;font-size:10px}.health-card b{color:#0f1b33;font-size:11px}
@media(max-width:1320px){.executive-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.executive-performance{grid-template-columns:repeat(3,minmax(0,1fr))}.performance-main{grid-column:1/-1}.executive-middle{grid-template-columns:repeat(2,minmax(0,1fr))}.alerts-panel{grid-column:1/-1}.executive-bottom{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.executive-dashboard{padding:0 10px 20px}.executive-topbar{margin:0 -10px 10px;padding:10px;align-items:flex-start}.executive-topbar,.executive-welcome{flex-direction:column}.executive-actions{justify-content:flex-start}.executive-actions button{min-height:34px;padding:0 10px;font-size:11px}.executive-welcome{align-items:stretch}.executive-balance{min-width:0}.executive-kpis,.executive-performance,.executive-middle,.executive-bottom{grid-template-columns:1fr}.executive-kpis{gap:8px}.executive-kpi{min-height:76px}.performance-main{grid-template-columns:1fr}.performance-chart{margin-top:12px}.alerts-panel{grid-column:auto}.category-layout{flex-direction:column;align-items:stretch}.doughnut-wrap{align-self:center}}

/* Application header and notifications */
.qmp-app-header{height:64px;background:#fff;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;padding:0 18px;position:sticky;top:0;z-index:20}
.qmp-header-brand h1{font-size:18px;margin:0;color:#111827}.qmp-header-brand>div>div{font-size:12px;color:#6b7280}
.qmp-header-search{display:flex;align-items:center;gap:8px;width:min(440px,38vw);height:34px;padding:0 10px;color:#1d4ed8;background:#fff;border:1px solid #dce7f5;border-radius:6px}.qmp-header-search input{min-width:0;width:100%;border:0;outline:0;color:#17366e;font-size:10px}.qmp-header-search kbd{padding:3px 5px;color:#60759a;background:#f3f6fb;border-radius:4px;font-size:8px;white-space:nowrap}
.qmp-header-tools{display:flex;align-items:center;gap:9px}.qmp-header-icon-btn{position:relative;width:34px;height:34px;display:grid;place-items:center;color:#0f172a;background:#fff;border:0;border-radius:7px;cursor:pointer}
.qmp-header-icon-btn:hover{background:#f1f5f9}.qmp-header-icon-btn.close-page{color:#dc2626}.qmp-header-icon-btn.close-page:hover{background:#fee2e2}.qmp-header-icon-btn b{position:absolute;top:1px;right:1px;min-width:15px;height:15px;display:grid;place-items:center;padding:0 3px;color:#fff;background:#ef4444;border:2px solid #fff;border-radius:999px;font-size:8px}
.qmp-work-window-shell{min-width:0;min-height:100%;display:flex;flex-direction:column;border:1px solid rgba(15,42,74,.16);border-radius:10px;background:#f8fafc;box-shadow:0 14px 36px rgba(15,23,42,.08);overflow:hidden}.qmp-work-window-shell.maximized{position:fixed;inset:10px 10px 12px 10px;z-index:1700;min-height:0;border-radius:10px;box-shadow:0 26px 90px rgba(15,23,42,.32)}.qmp-work-window-bar{position:relative;z-index:12;height:42px;flex:0 0 42px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 10px 0 14px;color:#fff;background:linear-gradient(135deg,#0f2a4a,#1d4ed8)}.qmp-work-window-shell.maximized .qmp-work-window-bar{position:sticky;top:0;height:48px;flex-basis:48px;box-shadow:0 10px 24px rgba(15,23,42,.18)}.qmp-work-window-bar div{min-width:0}.qmp-work-window-bar span{display:block;color:#bfdbfe;font-size:9px;font-weight:900;text-transform:uppercase}.qmp-work-window-bar strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:950}.qmp-work-window-bar nav{display:flex;flex:0 0 auto;gap:6px}.qmp-work-window-bar button{width:30px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.22);border-radius:7px;background:rgba(255,255,255,.1);color:#fff;cursor:pointer}.qmp-work-window-bar button span{display:none;color:#fff;font-size:11px;font-weight:900;text-transform:none}.qmp-work-window-shell.maximized .qmp-work-window-bar button{width:auto;min-width:92px;padding:0 10px;gap:6px}.qmp-work-window-shell.maximized .qmp-work-window-bar button span{display:inline}.qmp-work-window-shell.maximized .qmp-work-window-bar button.minimize{background:rgba(22,163,74,.88);border-color:rgba(187,247,208,.55)}.qmp-work-window-bar button:hover{background:rgba(255,255,255,.2)}.qmp-work-window-bar button.close{background:rgba(220,38,38,.84)}.qmp-work-window-content{min-width:0;flex:1;overflow:auto;padding:16px;background:#f1f5f9}.qmp-work-window-shell.maximized .qmp-work-window-content{height:calc(100vh - 60px);max-height:calc(100vh - 60px)}
.qmp-notification-wrap{position:relative}.qmp-notification-panel{position:absolute;top:44px;right:0;width:310px;padding:10px 12px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 16px 35px rgba(15,23,42,.18);z-index:50}
.qmp-notification-panel>div{display:flex;align-items:center;justify-content:space-between;padding:3px 3px 10px;border-bottom:1px solid #eef2f7}.qmp-notification-panel>div strong{font-size:11px}.qmp-notification-panel>div button{border:0;background:transparent;cursor:pointer}.qmp-notification-panel>button{width:100%;display:flex;align-items:center;gap:9px;padding:10px 5px;color:#172033;background:transparent;border:0;border-bottom:1px solid #f1f5f9;cursor:pointer;text-align:left;font-size:10px;font-weight:700}.qmp-notification-panel>button svg{color:#075bf6}.qmp-notification-panel p{margin:14px 4px;color:#64748b;font-size:12px}.qmp-notification-panel .qmp-notification-all{justify-content:center;color:#075bf6;border-bottom:0;font-weight:800}
.qmp-session-role{display:grid;gap:2px;background:transparent;padding:0 4px;border-radius:0;color:#07183d}.qmp-session-role strong{font-size:10px}.qmp-session-role span{color:#5d7094;font-size:9px}.qmp-user-avatar{width:34px;height:34px;border-radius:50%;background:#075bf6;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:800}.qmp-logout-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid #dbe4f0;background:#fff;border-radius:7px;padding:8px 12px;color:#07183d;font-size:10px;font-weight:800;cursor:pointer}
.supplier-page-body{padding:10px 12px!important;background:#f6f9fe}
.commercial-page-body{padding:18px 24px!important;background:#f7f9fd}

/* Commercial portfolio center */
.commercial-pro-page{position:relative;min-width:0;color:#07183d;font-family:Inter,system-ui,sans-serif}.commercial-pro-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}.commercial-pro-header p{display:flex;align-items:center;gap:8px;margin:0 0 6px;color:#075bf6;font-size:10px;font-weight:900;text-transform:uppercase}.commercial-pro-header p span{color:#536987;font-weight:600;text-transform:none}.commercial-pro-header h1{margin:0 0 5px;font-size:23px;letter-spacing:0}.commercial-pro-header em{color:#607397;font-size:11px;font-style:normal}.commercial-pro-header>button{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 15px;color:#fff;background:#075bf6;border:1px solid #075bf6;border-radius:6px;font-size:10px;font-weight:800;cursor:pointer}
.commercial-pro-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}.commercial-pro-metric{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:center;min-height:86px;padding:14px 16px;background:#fff;border:1px solid #e3eaf5;border-radius:9px;box-shadow:0 5px 16px rgba(15,23,42,.04)}.commercial-pro-metric-icon{display:grid;width:48px;height:48px;place-items:center;color:#075bf6;background:#eaf2ff;border-radius:7px}.commercial-pro-metric div{min-width:0}.commercial-pro-metric small,.commercial-pro-metric strong,.commercial-pro-metric em{display:block}.commercial-pro-metric small{color:#536987;font-size:9px;font-weight:800}.commercial-pro-metric strong{margin:5px 0;color:#07183d;overflow-wrap:anywhere;font-size:13px}.commercial-pro-metric em{color:#7a8ba9;font-size:8px;font-style:normal}.commercial-pro-metric>b{position:absolute;right:14px;bottom:14px;color:#607397;font-size:8px}.commercial-pro-metric>b.positive{color:#08a04b}
.commercial-pro-workspace{display:grid;grid-template-columns:270px minmax(0,1fr);gap:18px;min-height:475px;margin-bottom:16px}.commercial-pro-roster,.commercial-pro-panel,.commercial-pro-profile,.commercial-pro-summary{background:#fff;border:1px solid #e3eaf5;border-radius:9px;box-shadow:0 5px 16px rgba(15,23,42,.04)}.commercial-pro-roster{display:flex;flex-direction:column;min-height:0;padding:14px 10px}.commercial-pro-roster>header{padding:0 5px 10px}.commercial-pro-roster h2{margin:0 0 4px;font-size:13px}.commercial-pro-roster header span{color:#607397;font-size:9px}.commercial-pro-roster>label{display:flex;align-items:center;gap:7px;height:34px;margin:0 0 9px;padding:0 9px;color:#607397;border:1px solid #dbe5f3;border-radius:5px}.commercial-pro-roster input{min-width:0;width:100%;border:0;outline:0;color:#17366e;font-size:9px}.commercial-pro-roster-list{display:grid;gap:7px;overflow:auto}.commercial-pro-roster-list>button{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;align-items:start;min-height:70px;padding:10px;color:#07183d;background:#fff;border:1px solid #e3eaf5;border-radius:6px;text-align:left;cursor:pointer}.commercial-pro-roster-list>button.active{border-color:#075bf6;background:#f8fbff;box-shadow:0 0 0 1px rgba(7,91,246,.08)}.commercial-pro-avatar{display:grid;flex:0 0 48px;width:48px;height:48px;place-items:center;color:#075bf6;background:#e7f0ff;border-radius:50%;font-size:21px}.commercial-pro-avatar.small{flex-basis:32px;width:32px;height:32px}.commercial-pro-roster-list strong,.commercial-pro-roster-list small,.commercial-pro-roster-list b{display:block}.commercial-pro-roster-list strong{font-size:10px}.commercial-pro-roster-list small{margin:4px 0 8px;color:#607397;font-size:8px}.commercial-pro-roster-list b{color:#075bf6;font-size:10px}.commercial-pro-roster>footer,.commercial-pro-panel>footer{display:flex;align-items:center;justify-content:center;gap:8px;height:34px;margin-top:auto;color:#17366e;border:1px solid #e3eaf5;border-radius:5px;font-size:9px;font-weight:700}
.commercial-pro-detail{display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px;min-width:0}.commercial-pro-profile{display:flex;align-items:center;gap:12px;min-height:64px;padding:7px 12px}.commercial-pro-profile>div{min-width:0;flex:1}.commercial-pro-profile h2{margin:0 0 4px;font-size:14px}.commercial-pro-profile p{margin:0;color:#607397;font-size:9px}.commercial-pro-profile nav{display:flex;gap:7px}.commercial-pro-profile nav a,.commercial-pro-profile nav button{display:grid;width:29px;height:29px;place-items:center;color:#17366e;background:#fff;border:1px solid #e3eaf5;border-radius:50%;cursor:pointer;text-decoration:none}.commercial-pro-columns{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,1fr);gap:10px;min-height:0}.commercial-pro-panel{display:flex;flex-direction:column;min-width:0;padding:12px}.commercial-pro-panel>header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px}.commercial-pro-panel h3{margin:0 0 3px;font-size:11px}.commercial-pro-panel header p{margin:0;color:#607397;font-size:8px}.commercial-pro-client-list{display:grid;align-content:start;gap:6px;overflow:auto}.commercial-pro-client-list article{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:43px;padding:8px 10px;background:#fbfcfe;border:1px solid #e3eaf5;border-radius:5px}.commercial-pro-client-list article>div{min-width:0}.commercial-pro-client-list article>div:last-child{text-align:right}.commercial-pro-client-list strong,.commercial-pro-client-list span,.commercial-pro-client-list b{display:block}.commercial-pro-client-list strong{color:#07183d;font-size:9px}.commercial-pro-client-list span{margin-top:3px;color:#607397;font-size:8px}.commercial-pro-client-list b{color:#f5223e;font-size:10px}.commercial-pro-loading{position:fixed;right:18px;bottom:18px;padding:7px 10px;color:#075bf6;background:#fff;border:1px solid #dbe5f3;border-radius:5px;font-size:9px;font-weight:800}
.commercial-pro-summary{padding:11px 12px}.commercial-pro-summary>header{display:flex;align-items:center;gap:10px;margin-bottom:8px}.commercial-pro-summary h3{margin:0;font-size:11px}.commercial-pro-summary-mark{display:grid;width:31px;height:31px;place-items:center;color:#fff;background:#0b2b65;border-radius:6px}.commercial-pro-summary>div{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}.commercial-pro-summary article{display:flex;align-items:center;gap:9px;min-width:0;padding:4px 12px;border-right:1px solid #e3eaf5}.commercial-pro-summary article:last-child{border-right:0}.commercial-pro-summary-icon{display:grid;flex:0 0 29px;width:29px;height:29px;place-items:center;color:#fff;border-radius:50%}.commercial-pro-summary-icon.navy{background:#07183d}.commercial-pro-summary-icon.green{background:#0baa55}.commercial-pro-summary-icon.orange{background:#f59e0b}.commercial-pro-summary-icon.purple{background:#9333ea}.commercial-pro-summary-icon.blue{background:#075bf6}.commercial-pro-summary article small,.commercial-pro-summary article strong,.commercial-pro-summary article em{display:block}.commercial-pro-summary article small{color:#607397;font-size:8px}.commercial-pro-summary article strong{margin:3px 0;color:#07183d;overflow-wrap:anywhere;font-size:10px}.commercial-pro-summary article em{color:#607397;font-size:8px;font-style:normal}
@media(max-width:1150px){.commercial-pro-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.commercial-pro-workspace{grid-template-columns:230px minmax(0,1fr)}.commercial-pro-columns{grid-template-columns:1fr}.commercial-pro-summary>div{grid-template-columns:repeat(3,minmax(0,1fr))}.commercial-pro-summary article{border-right:0}}
@media(max-width:760px){.commercial-pro-header{flex-direction:column}.commercial-pro-metrics,.commercial-pro-workspace,.commercial-pro-summary>div{grid-template-columns:1fr}.commercial-pro-roster{max-height:340px}.commercial-pro-profile nav{display:none}}

/* Sales analysis center */
.sales-center-page{min-width:0;color:#0f1b33}.sales-center-topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:15px}.sales-center-topbar .ventes-pro-search{max-width:480px;flex:1}.sales-center-actions{display:flex;gap:10px}.sales-center-actions button{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 13px;border-radius:7px;font-weight:800;cursor:pointer}.sales-export-btn{color:#fff;background:#2563eb;border:1px solid #2563eb}
.sales-center-header{margin-bottom:16px}.sales-center-header p{margin:0 0 8px;color:#64748b;font-size:12px}.sales-center-header p span{padding:0 7px;color:#94a3b8}.sales-center-header h1{margin:0 0 6px;font-size:25px;letter-spacing:0}.sales-center-header>div>span{color:#64748b;font-size:13px}
.sales-center-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:16px}.sales-center-kpis .ventes-stat-card{min-width:0;min-height:105px;padding:15px 10px;border:1px solid #e4ebf4;border-radius:8px;box-shadow:0 3px 12px rgba(15,23,42,.03)}.sales-center-kpis .ventes-stat-card h3{font-size:12px;white-space:nowrap}.sales-center-kpis .ventes-stat-card p{text-transform:uppercase;font-size:9px;font-weight:800;color:#536987}
.sales-filter-bar{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr)) auto;gap:12px;align-items:end;margin-bottom:16px;padding:13px 15px;background:#fff;border:1px solid #e5ebf3;border-radius:8px}.sales-filter-bar label{display:grid;gap:5px;color:#536987;font-size:10px;font-weight:700}.sales-filter-bar input,.sales-filter-bar select{width:100%;min-height:36px;padding:0 9px;background:#fff;border:1px solid #dbe4ef;border-radius:6px;color:#172033;font-size:11px}.sales-filter-bar button{min-height:36px;padding:0 12px;color:#64748b;background:#fff;border:1px solid #dbe4ef;border-radius:6px;cursor:pointer;font-size:11px;font-weight:700}
.sales-analysis-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:14px;margin-bottom:16px}.sales-analysis-card{min-width:0;padding:16px;background:#fff;border:1px solid #e5ebf3;border-radius:8px;box-shadow:0 3px 12px rgba(15,23,42,.03)}.sales-analysis-card h3{margin:0 0 12px;font-size:13px}.sales-analysis-card>div{height:185px}.sales-payment-layout{display:flex;align-items:center;gap:18px}.sales-doughnut{position:relative;flex:0 0 155px;height:155px}.sales-doughnut>strong{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-size:12px;pointer-events:none}.sales-doughnut small{display:block;font-size:9px;color:#64748b}.sales-payment-legend{flex:1;min-width:0}.sales-payment-legend p{display:grid;grid-template-columns:9px minmax(0,1fr);gap:3px 7px;align-items:center;margin:0;padding:5px 0;border-bottom:1px solid #f1f5f9;font-size:9px}.sales-payment-legend i{width:8px;height:8px;border-radius:2px}.sales-payment-legend strong{grid-column:2;color:#64748b;font-size:8px;white-space:nowrap}
.sales-list-card{border-radius:8px}.sales-list-card .ventes-card-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.sales-list-card .ventes-card-header h2{font-size:15px}.sales-list-card .ventes-card-header p{display:inline-flex;padding:3px 7px;background:#f1f5f9;border-radius:999px;font-size:10px}.ventes-list-search{display:flex;align-items:center;gap:8px;flex:0 1 390px;min-width:260px;height:36px;padding:0 10px;color:#2563eb;background:#f8fbff;border:1px solid #dbe7f6;border-radius:7px}.ventes-list-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#0f1b33;font-size:11px}.sales-list-card .ventes-pro-table th{font-size:10px;text-transform:uppercase}.sales-list-card .ventes-pro-table td{font-size:11px}.sales-status-valid{display:inline-flex;padding:3px 7px;color:#15803d;background:#dcfce7;border-radius:999px;font-size:10px;font-weight:800}
.sales-detail-drawer{width:360px!important;padding:0!important;background:#fff}.sales-detail-drawer .vente-drawer-header{padding:18px;border-bottom:1px solid #edf1f6}.sales-detail-drawer .vente-drawer-header p{margin:0 0 10px;color:#64748b;font-size:12px}.sales-detail-drawer .vente-drawer-header h2{font-size:17px}.sales-detail-ticket{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;color:#64748b;font-size:11px}.sales-detail-ticket b{padding:3px 7px;color:#15803d;background:#dcfce7;border-radius:999px;font-size:9px}
.sales-detail-section{padding:15px 18px;border-top:1px solid #edf1f6}.sales-detail-section h3{margin:0 0 12px;font-size:11px}.sales-detail-info-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 0;font-size:10px}.sales-detail-info-row span{color:#64748b}.sales-detail-info-row strong{font-size:10px;text-align:right}.sales-detail-info-row strong.badge{padding:3px 6px;color:#15803d;background:#dcfce7;border-radius:999px;font-size:9px}.sales-detail-info-row strong.total{color:#2563eb;font-size:12px}
.sales-detail-lines>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 8px;padding:7px 0;border-bottom:1px solid #f1f5f9;font-size:10px}.sales-detail-lines span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sales-detail-lines small{grid-column:1;color:#64748b}.sales-detail-lines strong{grid-column:2;grid-row:1/3;align-self:center}.sales-detail-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.sales-detail-actions button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 8px;color:#1d4ed8;background:#f4f7ff;border:1px solid #e3eaff;border-radius:6px;cursor:pointer;font-size:10px;font-weight:800}.sales-detail-actions button:last-child{grid-column:1/-1;color:#dc2626;background:#fff5f5;border-color:#fee2e2}
.stock-import-export-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}.stock-import-export-panel>div{padding:24px;background:#fff;border:1px solid #e5ebf3;border-radius:8px}.stock-import-export-panel svg{color:#2563eb}.stock-import-export-panel h3{margin:14px 0 7px}.stock-import-export-panel p{margin:0 0 18px;color:#64748b;font-size:13px}.stock-import-export-panel .primary-btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}

@media(max-width:1250px){.sales-center-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.sales-filter-bar{grid-template-columns:repeat(3,minmax(0,1fr))}.sales-analysis-grid{grid-template-columns:1fr}}
@media(max-width:760px){.qmp-app-header{height:auto;min-height:58px;padding:8px 10px}.qmp-session-role,.qmp-logout-btn{display:none}.qmp-header-tools{gap:4px}.qmp-notification-panel{position:fixed;top:62px;left:10px;right:10px;width:auto}.sales-center-topbar{align-items:stretch;flex-direction:column}.sales-center-actions{overflow-x:auto}.sales-center-actions button{white-space:nowrap}.sales-center-kpis,.sales-filter-bar{grid-template-columns:1fr 1fr}.sales-analysis-grid{grid-template-columns:1fr}.sales-payment-layout{flex-direction:column;height:auto!important}.sales-analysis-card>div{height:180px}.sales-center-header h1{font-size:21px}.sales-list-card .ventes-card-header{align-items:stretch;flex-direction:column}.ventes-list-search{width:100%;min-width:0;flex:none}.stock-import-export-panel{grid-template-columns:1fr}}

.commercial-account-page {
  min-height: 100%;
  padding: 24px;
  color: #0f172a;
  background: #f6f8fb;
}

.commercial-account-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.commercial-account-header h1 {
  margin: 4px 0 6px;
  font-size: 28px;
  line-height: 1.15;
}

.commercial-account-header p,
.panel-heading p,
.commercial-profile-main p {
  margin: 0;
  color: #64748b;
}

.page-kicker {
  color: #2563eb;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.qmp-alert-error {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #991b1b;
  background: #fff1f2;
  font-weight: 700;
}

.commercial-account-layout {
  display: grid;
  grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.commercial-roster,
.commercial-panel,
.commercial-profile-band,
.commercial-empty-state {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.commercial-roster {
  position: sticky;
  top: 16px;
  padding: 16px;
}

.commercial-roster-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.commercial-roster-title h2,
.panel-heading h3,
.commercial-profile-main h2 {
  margin: 0;
}

.commercial-roster-title span,
.commercial-client-card span,
.commercial-trip-item span,
.commercial-kpi-card em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
}

.commercial-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  margin-bottom: 12px;
  padding: 0 12px;
  border: 1px solid #dbe4ef;
  border-radius: 8px;
  color: #64748b;
  background: #f8fafc;
}

.commercial-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #0f172a;
  font: inherit;
}

.commercial-roster-list,
.commercial-client-list,
.commercial-trip-list {
  display: grid;
  gap: 10px;
}

.commercial-roster-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  text-align: left;
  color: #0f172a;
  background: #ffffff;
  cursor: pointer;
}

.commercial-roster-item.active {
  border-color: #2563eb;
  background: #eff6ff;
}

.commercial-roster-item strong,
.commercial-roster-item small,
.commercial-roster-item em {
  display: block;
}

.commercial-roster-item small {
  margin-top: 2px;
  color: #64748b;
  font-size: 12px;
}

.commercial-roster-item em {
  grid-column: 2;
  color: #1d4ed8;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.commercial-avatar,
.commercial-profile-icon,
.commercial-kpi-card > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #1d4ed8;
  background: #dbeafe;
}

.commercial-avatar {
  width: 38px;
  height: 38px;
}

.commercial-detail {
  display: grid;
  gap: 16px;
}

.commercial-empty-state {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
  color: #64748b;
}

.commercial-empty-state h2 {
  margin: 12px 0 6px;
  color: #0f172a;
}

.commercial-profile-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
}

.commercial-profile-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.commercial-profile-icon {
  width: 48px;
  height: 48px;
}

.commercial-profile-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.commercial-profile-meta span,
.trip-status,
.loading-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  color: #475569;
  background: #f1f5f9;
  font-size: 12px;
  font-weight: 700;
}

.commercial-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.commercial-kpi-card {
  display: flex;
  gap: 12px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
}

.commercial-kpi-card > span {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
}

.commercial-kpi-card small,
.commercial-kpi-card strong,
.commercial-kpi-card em {
  display: block;
}

.commercial-kpi-card small {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.commercial-kpi-card strong {
  margin: 4px 0 2px;
  font-size: 18px;
}

.commercial-panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.commercial-panel {
  padding: 16px;
}

.panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.commercial-client-card,
.commercial-trip-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.commercial-client-card > div,
.commercial-trip-item > div {
  display: grid;
  gap: 3px;
}

.commercial-client-card > div:last-child,
.commercial-trip-item > div:last-child {
  text-align: right;
}

.commercial-client-card.compact {
  align-items: flex-start;
}

.commercial-client-card .debt {
  color: #b45309;
}

.commercial-client-card .paid {
  color: #047857;
}

.trip-status.ouvert {
  color: #0369a1;
  background: #e0f2fe;
}

.trip-status.cloture {
  color: #047857;
  background: #dcfce7;
}

.loading-pill {
  color: #1d4ed8;
  background: #dbeafe;
}

@media (max-width: 1180px) {
  .commercial-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .commercial-panel-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .commercial-account-page {
    padding: 16px;
  }

  .commercial-account-layout {
    grid-template-columns: 1fr;
  }

  .commercial-roster {
    position: static;
  }

  .commercial-profile-band,
  .commercial-account-header {
    flex-direction: column;
  }

  .commercial-profile-meta {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .commercial-kpi-grid {
    grid-template-columns: 1fr;
  }

  .commercial-client-card,
  .commercial-trip-item {
    align-items: flex-start;
    flex-direction: column;
  }

  .commercial-client-card > div:last-child,
  .commercial-trip-item > div:last-child {
    text-align: left;
  }
}

.voyage-report-page {
  min-height: 100%;
  padding: 24px;
  color: #0f172a;
  background: #f6f8fb;
}

.voyage-report-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.voyage-report-hero,
.voyage-report-panel {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.voyage-report-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px;
  margin-bottom: 16px;
}

.voyage-report-hero h1 {
  margin: 4px 0 6px;
  font-size: 30px;
}

.voyage-report-hero p {
  margin: 0;
  color: #64748b;
}

.voyage-report-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.voyage-report-meta span {
  min-height: 30px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #475569;
  background: #f1f5f9;
  font-size: 12px;
  font-weight: 800;
}

.voyage-report-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.voyage-report-kpi {
  display: flex;
  gap: 12px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
}

.voyage-report-kpi > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  color: #1d4ed8;
  background: #dbeafe;
}

.voyage-report-kpi.good > span {
  color: #047857;
  background: #dcfce7;
}

.voyage-report-kpi.danger > span {
  color: #b91c1c;
  background: #fee2e2;
}

.voyage-report-kpi small,
.voyage-report-kpi strong,
.voyage-report-kpi em {
  display: block;
}

.voyage-report-kpi small {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.voyage-report-kpi strong {
  margin: 4px 0 2px;
  font-size: 18px;
}

.voyage-report-kpi em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
}

.voyage-report-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.voyage-report-summary div {
  padding: 12px;
  border: 1px solid #dbe4ef;
  border-radius: 8px;
  background: #ffffff;
}

.voyage-report-summary span,
.voyage-report-summary strong {
  display: block;
}

.voyage-report-summary span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.voyage-report-summary strong {
  margin-top: 5px;
}

.voyage-report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.voyage-report-panel {
  padding: 16px;
  margin-bottom: 16px;
}

.voyage-inline-form {
  display: grid;
  grid-template-columns: 0.8fr 1.5fr 0.7fr 0.7fr 0.9fr 0.9fr auto;
  gap: 8px;
  margin-bottom: 14px;
}

.voyage-inline-form.frais {
  grid-template-columns: 0.9fr 1fr 1.4fr 0.9fr 1fr auto;
}

.voyage-inline-form input,
.voyage-inline-form select {
  min-width: 0;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #dbe4ef;
  border-radius: 8px;
  color: #0f172a;
  background: #ffffff;
}

.icon-danger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  color: #b91c1c;
  background: #fee2e2;
  cursor: pointer;
}

.voyage-profit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.voyages-pro-page {
  background: #f4f7fb;
}

.voyages-pro-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.voyages-pro-header h1 {
  margin: 3px 0 5px;
  font-size: 28px;
  color: #0f172a;
}

.voyages-pro-header p {
  margin: 0;
  color: #5d6b82;
  font-weight: 700;
}

.voyages-pro-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.voyages-pro-actions button,
.voyages-pro-actions a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.voyages-pro-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.voyages-pro-kpi {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 15px;
  border: 1px solid #dfe7f1;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

.voyages-pro-kpi > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: #155eef;
  background: #e8f0ff;
}

.voyages-pro-kpi.good > span {
  color: #047857;
  background: #dcfce7;
}

.voyages-pro-kpi.danger > span {
  color: #b91c1c;
  background: #fee2e2;
}

.voyages-pro-kpi div {
  min-width: 0;
}

.voyages-pro-kpi small,
.voyages-pro-kpi strong,
.voyages-pro-kpi em {
  display: block;
}

.voyages-pro-kpi small {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

.voyages-pro-kpi strong {
  margin: 4px 0 2px;
  color: #0f172a;
  font-size: 17px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.voyages-pro-kpi em {
  color: #708198;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.voyages-pro-section {
  margin-bottom: 16px;
  border: 1px solid #dfe7f1;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

.voyages-pro-section-head {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border: 0;
  background: #ffffff;
  color: #0f172a;
  text-align: left;
  cursor: pointer;
}

.voyages-pro-section-head > span {
  display: inline-flex;
  color: #2563eb;
}

.voyages-pro-section-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
}

.voyages-pro-section-head p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

.voyages-pro-section-head > strong {
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
}

.voyages-pro-section-body {
  padding: 0 16px 16px;
}

.voyages-pro-form {
  margin-top: 4px;
}

@media (max-width: 1180px) {
  .voyage-report-kpis,
  .voyage-report-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .voyage-report-grid {
    grid-template-columns: 1fr;
  }

  .voyage-profit-grid {
    grid-template-columns: 1fr;
  }

  .voyages-pro-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .voyage-inline-form,
  .voyage-inline-form.frais {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .voyage-report-page {
    padding: 16px;
  }

  .voyage-report-hero {
    flex-direction: column;
  }

  .voyage-report-meta {
    justify-content: flex-start;
  }

  .voyage-report-kpis,
  .voyage-report-summary,
  .voyage-inline-form,
  .voyage-inline-form.frais {
    grid-template-columns: 1fr;
  }

  .voyages-pro-header {
    flex-direction: column;
  }

  .voyages-pro-actions,
  .voyages-pro-actions button {
    width: 100%;
  }

  .voyages-pro-kpis {
    grid-template-columns: 1fr;
  }
}

@media print {
  .voyage-report-page {
    padding: 0;
    background: #ffffff;
  }

  .voyage-report-toolbar,
  .voyage-inline-form,
  .icon-danger-btn {
    display: none !important;
  }

  .voyage-report-hero,
  .voyage-report-panel,
  .voyage-report-kpi,
  .voyage-report-summary div {
    box-shadow: none;
    break-inside: avoid;
  }
}

@media print {
  @page {
    size: A4 portrait;
    margin: 7mm;
  }

  body:has(.credit-statement-document),
  body:has(.credit-statement-document) #root {
    width: 210mm !important;
    min-height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: #ffffff !important;
  }

  body:has(.credit-statement-document) * {
    visibility: hidden !important;
  }

  body:has(.credit-statement-document) .document-sheet,
  body:has(.credit-statement-document) .document-sheet * {
    visibility: visible !important;
  }

  body:has(.credit-statement-document) .qmp-app-header,
  body:has(.credit-statement-document) .qmp-app-sidebar,
  body:has(.credit-statement-document) .sidebar,
  body:has(.credit-statement-document) .document-toolbar,
  body:has(.credit-statement-document) .document-filters {
    display: none !important;
  }

  body:has(.credit-statement-document) .qmp-app-layout,
  body:has(.credit-statement-document) .qmp-main-column,
  body:has(.credit-statement-document) .qmp-main-panel,
  body:has(.credit-statement-document) .document-page {
    display: block !important;
    width: 100% !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #ffffff !important;
  }

  body:has(.credit-statement-document) .document-sheet {
    position: static !important;
    width: 196mm !important;
    max-width: 196mm !important;
    min-height: auto !important;
    margin: 0 auto !important;
    padding: 7mm !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 9px !important;
    line-height: 1.22 !important;
  }

  body:has(.credit-statement-document) .document-header {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8mm !important;
    align-items: start !important;
    margin-bottom: 5mm !important;
    padding-bottom: 3mm !important;
    border-bottom: 1px solid #0f172a !important;
    break-inside: avoid !important;
  }

  body:has(.credit-statement-document) .document-brand,
  body:has(.credit-statement-document) .document-title {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
  }

  body:has(.credit-statement-document) .document-title {
    text-align: right !important;
  }

  body:has(.credit-statement-document) .document-logo-img {
    width: 28mm !important;
    height: auto !important;
    margin: 0 0 2mm !important;
  }

  body:has(.credit-statement-document) .document-title h1 {
    margin: 0 0 2mm !important;
    font-size: 16px !important;
    line-height: 1.1 !important;
    color: #0f172a !important;
  }

  body:has(.credit-statement-document) .document-header strong,
  body:has(.credit-statement-document) .document-title span,
  body:has(.credit-statement-document) .document-header span {
    font-size: 9px !important;
    line-height: 1.25 !important;
  }

  body:has(.credit-statement-document) .document-info-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 2mm !important;
    margin-bottom: 3mm !important;
    break-inside: avoid !important;
  }

  body:has(.credit-statement-document) .document-summary-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 2mm !important;
    margin-bottom: 4mm !important;
    break-inside: avoid !important;
  }

  body:has(.credit-statement-document) .document-info,
  body:has(.credit-statement-document) .document-summary {
    padding: 2.5mm !important;
    border: 1px solid #d9e2ef !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #ffffff !important;
  }

  body:has(.credit-statement-document) .document-info span,
  body:has(.credit-statement-document) .document-summary span {
    font-size: 7.5px !important;
    line-height: 1.15 !important;
  }

  body:has(.credit-statement-document) .document-info strong,
  body:has(.credit-statement-document) .document-summary strong {
    font-size: 9px !important;
    line-height: 1.15 !important;
  }

  body:has(.credit-statement-document) .document-block {
    margin: 0 !important;
  }

  body:has(.credit-statement-document) .document-block h2 {
    margin: 0 0 2mm !important;
    font-size: 11px !important;
  }

  body:has(.credit-statement-document) .document-table {
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
    font-size: 7.4px !important;
  }

  body:has(.credit-statement-document) .document-table th,
  body:has(.credit-statement-document) .document-table td {
    padding: 1.4mm 1mm !important;
    border: 1px solid #d9e2ef !important;
    vertical-align: top !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  body:has(.credit-statement-document) .document-table th {
    background: #eef4ff !important;
    color: #10203f !important;
    font-size: 7px !important;
  }

  body:has(.credit-statement-document) .document-subrow,
  body:has(.credit-statement-document) .document-articles {
    display: none !important;
  }

  body:has(.credit-statement-document) .doc-badge {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #0f172a !important;
    font-size: 7px !important;
  }

  body:has(.credit-statement-document) .document-final {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 3mm !important;
    margin-top: 4mm !important;
    break-inside: avoid !important;
  }

  body:has(.credit-statement-document) .document-final > div {
    padding: 3mm !important;
    border: 1px solid #0f172a !important;
    border-radius: 0 !important;
    background: #ffffff !important;
  }

  body:has(.credit-statement-document) .document-final strong {
    font-size: 12px !important;
  }

  body:has(.credit-statement-document) .document-observation {
    margin: 4mm 0 !important;
    font-size: 8px !important;
  }

  body:has(.credit-statement-document) .document-signatures {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 18mm !important;
    margin-top: 9mm !important;
    break-inside: avoid !important;
  }

  body:has(.credit-statement-document) .document-signatures div {
    height: 18mm !important;
    border-top: 1px solid #0f172a !important;
    border-radius: 0 !important;
    padding-top: 2mm !important;
    text-align: center !important;
  }
}

body {
  font-family: Inter, Arial, sans-serif;
  background: #f1f5f9;
  color: #0f172a;
}

a {
  text-decoration: none;
}

button {
  cursor: pointer;
}

.app-layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 260px;
  flex: 0 0 260px;
  background: #0f172a;
  color: white;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  transition: width 0.2s ease, flex-basis 0.2s ease, padding 0.2s ease;
  position: relative;
}

.sidebar-collapse-btn {
  position: absolute;
  top: 14px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.sidebar-logo h1 {
  font-size: 38px;
  margin-bottom: 8px;
}

.sidebar-logo p {
  font-size: 13px;
  opacity: 0.8;
}

.sidebar-logo small {
  display: block;
  margin-top: 8px;
  color: #93c5fd;
  font-size: 11px;
  font-weight: 800;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #cbd5e1;
  padding: 14px;
  border-radius: 14px;
  transition: 0.2s;
  font-weight: 500;
}

.sidebar-menu-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 6px;
  align-items: center;
}

.sidebar-window-btn {
  width: 34px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: #cbd5e1;
}

.sidebar-window-btn:hover {
  background: rgba(37, 99, 235, 0.28);
  color: #ffffff;
}

.sidebar-link:hover {
  background: #1e293b;
}

.sidebar-link.active {
  background: #2563eb;
  color: white;
}

.sidebar-user {
  margin-top: auto;
  display: grid;
  gap: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 16px;
}

.sidebar-user strong {
  color: #ffffff;
}

.sidebar-user span {
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 800;
}

.sidebar-user button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-weight: 900;
}

.sidebar.collapsed {
  width: 76px;
  flex-basis: 76px;
  padding: 16px 10px;
  align-items: center;
  gap: 24px;
}

.sidebar.collapsed .sidebar-logo h1 {
  font-size: 22px;
  margin-top: 36px;
}

.sidebar.collapsed .sidebar-logo p,
.sidebar.collapsed .sidebar-logo small,
.sidebar.collapsed .sidebar-link span,
.sidebar.collapsed .sidebar-user strong,
.sidebar.collapsed .sidebar-user span,
.sidebar.collapsed .sidebar-user button span {
  display: none;
}

.sidebar.collapsed .sidebar-nav {
  width: 100%;
}

.sidebar.collapsed .sidebar-link {
  justify-content: center;
  padding: 14px 0;
  border-radius: 12px;
}

.sidebar.collapsed .sidebar-menu-row {
  grid-template-columns: 1fr;
}

.sidebar.collapsed .sidebar-window-btn {
  display: none;
}

.sidebar.collapsed .sidebar-user {
  width: 100%;
}

.sidebar.collapsed .sidebar-user button {
  width: 100%;
  padding: 0;
}

.qmp-splash,
.qmp-login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 18%, rgba(37, 99, 235, 0.18), transparent 28%),
    radial-gradient(circle at 18% 78%, rgba(14, 165, 233, 0.14), transparent 24%),
    linear-gradient(145deg, #f8fbff 0%, #eef4ff 45%, #dfe8f6 100%);
  color: #0f172a;
}

.qmp-splash {
  position: relative;
  overflow: hidden;
  align-content: start;
  padding: 34px 18px;
  animation: splashFadeIn 0.7s ease both;
}

.qmp-splash::before {
  content: "";
  position: absolute;
  inset: 26px;
  border: 1px solid rgba(37, 99, 235, 0.10);
  border-radius: 24px;
  pointer-events: none;
}

.qmp-splash::after {
  content: "";
  position: absolute;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0));
  filter: blur(2px);
  pointer-events: none;
}

.splash-topline {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: center;
}

.splash-topline img {
  width: min(430px, 84vw);
  height: auto;
  object-fit: contain;
  margin: 0 auto;
  filter: drop-shadow(0 16px 28px rgba(15, 23, 42, 0.12));
}

.qmp-splash-center {
  position: relative;
  z-index: 2;
  margin-top: 88px;
  text-align: center;
  animation: splashRise 0.9s ease 0.15s both;
}

.splash-system-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 16px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.10);
}

.qmp-splash-center h1 {
  margin-top: 18px;
  font-size: clamp(76px, 12vw, 132px);
  line-height: 1;
  letter-spacing: 0;
  color: #07152f;
  text-shadow: 0 18px 34px rgba(15, 23, 42, 0.12);
}

.qmp-splash-center p {
  margin-top: 10px;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900;
  color: #1e293b;
}

.qmp-splash-center strong {
  display: block;
  margin-top: 12px;
  color: #475569;
  font-size: 15px;
  font-weight: 900;
}

.qmp-splash-center small,
.qmp-login-card small {
  display: block;
  margin-top: 18px;
  color: #2563eb;
  font-weight: 900;
}

.splash-loader {
  width: min(420px, 72vw);
  height: 10px;
  border-radius: 999px;
  background: rgba(203, 213, 225, 0.75);
  overflow: hidden;
  margin: 36px auto 0;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.12);
}

.splash-loader span {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0f172a, #2563eb, #38bdf8);
  animation: qmpLoad 1.35s ease-in-out infinite;
  box-shadow: 0 0 18px rgba(37, 99, 235, 0.45);
}

.splash-steps {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.splash-steps span {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.70);
  border: 1px solid rgba(148, 163, 184, 0.28);
  color: #334155;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 900;
  animation: splashPulse 1.8s ease-in-out infinite;
}

.splash-steps span:nth-child(2) {
  animation-delay: 0.25s;
}

.splash-steps span:nth-child(3) {
  animation-delay: 0.5s;
}

.splash-version {
  position: absolute;
  z-index: 2;
  right: 42px;
  bottom: 34px;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

@keyframes qmpLoad {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(240%); }
}

@keyframes splashFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes splashRise {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes splashPulse {
  0%, 100% {
    opacity: 0.58;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

.qmp-login-card {
  width: min(430px, calc(100vw - 28px));
  display: grid;
  gap: 13px;
  background: #ffffff;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  padding: 26px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12);
}

.qmp-login-card img {
  width: 128px;
  height: 128px;
  object-fit: contain;
  justify-self: center;
}

.qmp-login-card h1 {
  text-align: center;
  font-size: 44px;
  color: #07152f;
}

.qmp-login-card p,
.qmp-login-card > span {
  text-align: center;
  color: #475569;
  font-weight: 800;
}

.qmp-login-card label {
  display: grid;
  gap: 7px;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

.qmp-login-card input {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 12px;
  color: #0f172a;
  font-weight: 800;
}

.qmp-login-card button {
  min-height: 44px;
  border: none;
  border-radius: 8px;
  background: #2563eb;
  color: #ffffff;
  font-weight: 900;
}

.qmp-login-error {
  border-radius: 8px;
  background: #fee2e2;
  color: #991b1b;
  padding: 10px 12px;
  font-weight: 900;
}

.qmp-splash-screen-official {
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 183, 255, 0.18), transparent 34%),
    radial-gradient(circle at 88% 78%, rgba(138, 22, 245, 0.25), transparent 35%),
    linear-gradient(135deg, #020a2d 0%, #06124d 55%, #05072e 100%);
  color: #fff;
}

.qmp-splash-screen-official::before,
.qmp-splash-screen-official::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(80, 150, 255, 0.16);
  transform: rotate(30deg);
}

.qmp-splash-screen-official::before {
  left: -160px;
  top: -170px;
}

.qmp-splash-screen-official::after {
  right: -170px;
  bottom: -180px;
}

.qmp-splash-card {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 10px;
  animation: qmpOfficialSplashIn 0.55s ease both;
}

.qmp-splash-card img {
  width: 256px;
  height: 256px;
  object-fit: contain;
  filter: drop-shadow(0 26px 36px rgba(0, 0, 0, 0.32));
}

.qmp-splash-card h1 {
  margin: 0;
  font-size: 58px;
  font-weight: 950;
  letter-spacing: 0;
}

.qmp-splash-card p {
  margin: 0;
  font-size: 20px;
  color: #eaf2ff;
}

.qmp-splash-card strong {
  margin-top: 10px;
  color: #a8c7ff;
  font-size: 16px;
}

.qmp-splash-card span {
  width: 230px;
  height: 4px;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.qmp-splash-card span::after {
  content: "";
  display: block;
  width: 45%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #00b7ff, #8a16f5);
  animation: qmpOfficialSplashLoad 1.4s ease-in-out infinite;
}

@keyframes qmpOfficialSplashIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes qmpOfficialSplashLoad {
  0% {
    transform: translateX(-105%);
  }
  100% {
    transform: translateX(235%);
  }
}

.main-content {
  flex: 1;
  padding: 26px;
}

.qmp-sidebar {
  transition: width 0.2s ease, flex-basis 0.2s ease, padding 0.2s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 180px !important;
  flex-basis: 180px !important;
  height: 100vh !important;
  min-height: 0 !important;
  padding: 14px 10px !important;
  overflow: hidden !important;
  background: linear-gradient(180deg,#061b43 0%,#052556 100%) !important;
}

.qmp-sidebar.closed {
  width: 0 !important;
  flex-basis: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: hidden !important;
}

.qmp-sidebar a {
  display: flex;
  align-items: center;
  gap: 9px;
}
.qmp-sidebar-brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;margin-bottom:12px}.qmp-sidebar-brand img{width:32px;height:32px;border-radius:8px}.qmp-sidebar-brand h1{margin:0;font-size:18px}.qmp-sidebar-brand p{margin:3px 0 0;color:#d4e1f7;font-size:8px}.qmp-sidebar-menu{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:3px;scrollbar-gutter:stable}.qmp-sidebar-section-toggle{display:flex;width:100%;align-items:center;justify-content:space-between;gap:6px;margin:0 0 6px;padding:5px 3px;border:0;background:transparent;color:#a9bddc;text-align:left;text-transform:uppercase;font-size:9px;font-weight:650;cursor:pointer}.qmp-sidebar-section-toggle svg{flex:0 0 auto;color:#d9e6ff}.qmp-sidebar-section-toggle:hover{color:#ffffff}.qmp-sidebar-section nav{gap:2px!important}.qmp-sidebar-section a{padding:8px 9px!important;border-radius:6px!important;font-size:10px!important}.qmp-sidebar-section a svg{width:15px;height:15px}.qmp-sidebar-user{position:static;flex:0 0 auto;display:flex;align-items:center;gap:9px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}.qmp-sidebar-user>div{display:grid;width:33px;height:33px;place-items:center;color:#fff;background:#075bf6;border-radius:50%;font-size:11px;font-weight:800}.qmp-sidebar-user span{display:grid;gap:2px}.qmp-sidebar-user strong{font-size:10px}.qmp-sidebar-user small{color:#20d75a;font-size:8px}

.qmp-header-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.qmp-menu-toggle {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: #0f172a;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.qmp-menu-toggle:hover {
  background: #f1f5f9;
}

@media screen {
  html,
  body,
  #root {
    height: 100%;
  }

  .app-layout {
    height: 100vh;
    overflow: hidden;
  }

  .main-content {
    height: 100vh;
    overflow: auto;
    scroll-padding-top: 150px;
  }

  .workspace-window-body {
    scroll-padding-top: 130px;
  }

  .stock-header,
  .credits-topbar,
  .reports-header,
  .settings-header,
  .caisse-admin-header,
  .cash-doc-toolbar,
  .document-toolbar,
  .ventes-pro-topbar,
  .compte-topbar,
  .developer-header,
  .dashboard-header {
    position: sticky;
    top: 0;
    z-index: 90;
  }

  .credits-header,
  .ventes-pro-header,
  .compte-header {
    position: sticky;
    top: 64px;
    z-index: 85;
    background: #f4f7fb;
    padding: 8px 0;
  }

  .stock-toolbar,
  .stock-subtabs,
  .credit-erp-tabs,
  .ventes-tabs,
  .reports-tabs,
  .reports-filters {
    position: sticky;
    top: 124px;
    z-index: 82;
  }

  .stock-toolbar,
  .stock-subtabs,
  .credit-erp-tabs,
  .ventes-tabs,
  .reports-tabs,
  .reports-filters,
  .settings-submenu {
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  }

  .settings-submenu {
    position: sticky;
    top: 92px;
    z-index: 80;
    background: #ffffff;
  }

  .workspace-window-body .stock-header,
  .workspace-window-body .credits-topbar,
  .workspace-window-body .reports-header,
  .workspace-window-body .settings-header,
  .workspace-window-body .caisse-admin-header,
  .workspace-window-body .cash-doc-toolbar,
  .workspace-window-body .document-toolbar,
  .workspace-window-body .ventes-pro-topbar,
  .workspace-window-body .compte-topbar,
  .workspace-window-body .developer-header,
  .workspace-window-body .dashboard-header {
    top: 0;
  }

  .workspace-window-body .credits-header,
  .workspace-window-body .ventes-pro-header,
  .workspace-window-body .compte-header {
    top: 58px;
  }

  .workspace-window-body .stock-toolbar,
  .workspace-window-body .stock-subtabs,
  .workspace-window-body .credit-erp-tabs,
  .workspace-window-body .ventes-tabs,
  .workspace-window-body .reports-tabs,
  .workspace-window-body .reports-filters {
    top: 112px;
  }

  .stock-table th,
  .ventes-table th,
  .ventes-pro-table th,
  .credit-table thead th,
  .cash-table-wrap th,
  .report-table-wrap th {
    position: sticky;
    top: 0;
    z-index: 8;
  }
}

.workspace-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1800;
}

.workspace-window {
  position: fixed;
  display: flex;
  flex-direction: column;
  min-width: 420px;
  min-height: 280px;
  border: 1px solid rgba(15, 42, 74, 0.24);
  border-radius: 10px;
  background: #f8fafc;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.30);
  overflow: hidden;
  pointer-events: auto;
}

.workspace-window.maximized {
  inset: 18px 18px 58px 18px;
  width: auto;
  height: auto;
}

.workspace-window.dragging {
  user-select: none;
}

.workspace-window-header {
  height: 48px;
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px 0 16px;
  background: linear-gradient(135deg, #0f2a4a, #1d4ed8);
  color: #ffffff;
  cursor: move;
}

.workspace-window-header div {
  min-width: 0;
}

.workspace-window-header span {
  display: block;
  color: #bfdbfe;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.workspace-window-header strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 950;
}

.workspace-window-header nav {
  display: flex;
  gap: 6px;
  cursor: default;
}

.workspace-window-header button {
  width: 30px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
}

.workspace-window-header button.close {
  background: rgba(220, 38, 38, 0.84);
}

.workspace-window-body {
  flex: 1;
  overflow: auto;
  background: #f1f5f9;
}

.workspace-window-body .credits-page,
.workspace-window-body .stock-page,
.workspace-window-body .reports-page,
.workspace-window-body .settings-page {
  min-height: auto;
}

.workspace-taskbar {
  position: fixed;
  left: 92px;
  right: 18px;
  bottom: 12px;
  z-index: 2600;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.92);
  box-shadow: 0 16px 44px rgba(15, 23, 42, 0.24);
}

.workspace-taskbar button {
  display: grid;
  gap: 2px;
  min-width: 150px;
  max-width: 220px;
  min-height: 44px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  text-align: left;
}

.workspace-taskbar button.minimized {
  background: rgba(37, 99, 235, 0.38);
}

.workspace-taskbar span {
  color: #93c5fd;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.workspace-taskbar strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.qmp-work-window-shell,
.qmp-work-window-shell.maximized {
  width: auto;
  max-width: calc(100vw - 20px);
  box-sizing: border-box;
}

.qmp-work-window-shell.maximized {
  inset: 8px 8px 58px 8px;
}

.qmp-work-window-bar > div,
.workspace-window-header > div {
  flex: 1 1 auto;
  min-width: 0;
}

.qmp-work-window-bar nav,
.workspace-window-header nav {
  margin-left: auto;
  flex: 0 0 auto;
}

.workspace-window.maximized {
  inset: 8px 8px 58px 8px;
}

.workspace-window-header {
  position: relative;
  z-index: 20;
}

.workspace-window-header button {
  gap: 6px;
}

.workspace-window-header button span {
  display: none;
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
}

.workspace-window.maximized .workspace-window-header button {
  width: auto;
  min-width: 92px;
  padding: 0 10px;
}

.workspace-window.maximized .workspace-window-header button span {
  display: inline;
}

.workspace-window.maximized .workspace-window-header button:first-child {
  background: rgba(22, 163, 74, 0.88);
  border-color: rgba(187, 247, 208, 0.55);
}

.qmp-work-window-floating-controls {
  position: fixed;
  top: 56px;
  right: 16px;
  z-index: 4200;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  background: rgba(15, 42, 74, 0.96);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.28);
}

.qmp-work-window-floating-controls button {
  min-width: 92px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.qmp-work-window-floating-controls button:hover {
  background: rgba(255, 255, 255, 0.20);
}

.qmp-work-window-floating-controls button.minimize {
  background: rgba(22, 163, 74, 0.92);
  border-color: rgba(187, 247, 208, 0.55);
}

.qmp-work-window-floating-controls button.close {
  background: rgba(220, 38, 38, 0.90);
}

.qmp-work-window-shell.maximized .qmp-work-window-bar button,
.workspace-window.maximized .workspace-window-header button {
  width: 32px;
  min-width: 32px;
  padding: 0;
  gap: 0;
}

.qmp-work-window-shell.maximized .qmp-work-window-bar button span,
.workspace-window.maximized .workspace-window-header button span {
  display: none;
}

.qmp-work-window-floating-controls {
  top: 54px;
  right: 12px;
  gap: 6px;
  padding: 5px;
  border-radius: 9px;
  background: rgba(15, 42, 74, 0.88);
}

.qmp-work-window-floating-controls button {
  width: 32px;
  min-width: 32px;
  height: 30px;
  padding: 0;
  gap: 0;
}

.workspace-floating-controls {
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 5200;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 9px;
  background: rgba(15, 42, 74, 0.88);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.28);
}

.workspace-floating-controls button {
  width: 32px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
  cursor: pointer;
}

.workspace-floating-controls button:hover {
  background: rgba(255, 255, 255, 0.20);
}

.workspace-floating-controls button.minimize {
  background: rgba(22, 163, 74, 0.92);
  border-color: rgba(187, 247, 208, 0.55);
}

.workspace-floating-controls button.close {
  background: rgba(220, 38, 38, 0.90);
}

/* Fenetres ERP agrandies: sous la topbar, a droite du menu, avec barre de titre separee */
.workspace-layer {
  z-index: 1500;
}

.qmp-work-window-shell.maximized,
.workspace-window.maximized {
  top: 76px !important;
  left: 192px !important;
  right: 14px !important;
  bottom: 58px !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  border-radius: 10px;
  z-index: 1500;
}

.qmp-work-window-shell.maximized {
  position: fixed;
}

.qmp-work-window-shell.maximized .qmp-work-window-bar,
.workspace-window.maximized .workspace-window-header {
  height: 42px;
  flex: 0 0 42px;
  padding: 0 12px 0 16px;
  gap: 16px;
  position: relative;
  top: auto;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

.qmp-work-window-shell.maximized .qmp-work-window-bar nav,
.workspace-window.maximized .workspace-window-header nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 14px;
  margin-left: auto;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.qmp-work-window-shell.maximized .qmp-work-window-bar button,
.workspace-window.maximized .workspace-window-header button {
  width: 30px;
  min-width: 30px;
  height: 28px;
  padding: 0;
  border-radius: 7px;
}

.qmp-work-window-shell.maximized .qmp-work-window-content,
.workspace-window.maximized .workspace-window-body {
  height: auto;
  max-height: none;
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
}

@media (max-width: 900px) {
  .qmp-work-window-shell.maximized,
  .workspace-window.maximized {
    top: 70px !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 56px !important;
  }
}

/* Barre inferieure compacte des fenetres de travail */
.workspace-taskbar {
  left: 188px;
  right: 12px;
  bottom: 6px;
  min-height: 36px;
  max-height: 40px;
  height: 38px;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 9px;
  overflow: hidden;
}

.workspace-taskbar-tabs {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.workspace-taskbar-tab {
  flex: 0 0 auto;
  min-width: 136px;
  max-width: 210px;
  height: 28px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
}

.workspace-taskbar-tab.minimized {
  background: rgba(37, 99, 235, 0.40);
}

.workspace-taskbar-tab-main {
  min-width: 0;
  flex: 1 1 auto;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: #ffffff;
  text-align: left;
  cursor: pointer;
}

.workspace-taskbar-tab-main strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 850;
}

.workspace-taskbar-tab-close {
  flex: 0 0 26px;
  width: 26px;
  height: 100%;
  display: grid;
  place-items: center;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.10);
  background: transparent;
  color: #cbd5e1;
  cursor: pointer;
}

.workspace-taskbar-tab-close:hover {
  color: #ffffff;
  background: rgba(220, 38, 38, 0.82);
}

.workspace-taskbar-clear {
  flex: 0 0 auto;
  height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}

.workspace-taskbar-clear:hover {
  background: rgba(255, 255, 255, 0.18);
}

.workspace-taskbar > button:not(.workspace-taskbar-clear),
.workspace-taskbar span {
  display: none;
}

.qmp-main-panel {
  padding-bottom: 58px !important;
}

.qmp-work-window-shell.maximized,
.workspace-window.maximized {
  bottom: 48px !important;
}

@media (max-width: 900px) {
  .workspace-taskbar {
    left: 8px;
    right: 8px;
  }

  .qmp-work-window-shell.maximized,
  .workspace-window.maximized {
    bottom: 48px !important;
  }
}

/* ================= PARAMETRES ================= */

.settings-page {
  display: grid;
  gap: 18px;
}

.settings-header,
.settings-section,
.settings-card,
.role-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.settings-header {
  padding: 22px;
}

.settings-header h1 {
  font-size: 28px;
  color: #0f172a;
}

.settings-header p,
.settings-section-title p,
.settings-card p,
.role-card p {
  color: #64748b;
  margin-top: 5px;
}

.settings-message {
  padding: 13px 16px;
  border-radius: 8px;
  background: #dcfce7;
  color: #166534;
  font-weight: 900;
}

.settings-section {
  padding: 18px;
}

.settings-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  color: #0f172a;
}

.settings-admin-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 16px;
}

.settings-submenu {
  display: grid;
  align-content: start;
  gap: 8px;
  border-right: 1px solid #e2e8f0;
  padding-right: 14px;
}

.settings-submenu button {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #dbe3ef;
  background: #f8fafc;
  color: #334155;
  border-radius: 8px;
  padding: 12px;
  font-weight: 900;
  text-align: left;
}

.settings-submenu button.active {
  background: #2563eb;
  border-color: #2563eb;
  color: white;
}

.settings-panel {
  min-width: 0;
}

.settings-card {
  padding: 18px;
}

.cash-link-grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.cash-link-grid label {
  display: grid;
  gap: 7px;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

.cash-link-grid input {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 11px 12px;
  color: #0f172a;
  font-weight: 800;
}

.cash-link-grid select {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 11px 12px;
  color: #0f172a;
  font-weight: 800;
  background: white;
}

.user-form {
  margin-bottom: 14px;
}

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.settings-actions button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: white;
  color: #1d4ed8;
  padding: 11px 14px;
  font-weight: 900;
}

.settings-actions button.primary {
  border-color: #16a34a;
  background: #16a34a;
  color: white;
}

.roles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.role-card {
  padding: 16px;
}

.role-card div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.role-card span {
  background: #eef2ff;
  color: #3730a3;
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 900;
}

.permissions-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.permissions-list label {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  padding: 11px;
  color: #334155;
  font-weight: 900;
}

.permissions-manager {
  display: grid;
  gap: 16px;
}

.permissions-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.permissions-count {
  min-width: 96px;
  text-align: center;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 8px 12px;
  font-weight: 900;
}

.permission-user-selector {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 260px;
  gap: 12px;
}

.permission-user-selector label {
  display: grid;
  gap: 7px;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

.permission-user-selector select {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 11px 12px;
  background: #ffffff;
  color: #0f172a;
  font-weight: 800;
}

.permission-user-card {
  display: grid;
  gap: 3px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}

.permission-user-card strong {
  color: #0f172a;
}

.permission-user-card span,
.permission-user-card em {
  color: #64748b;
  font-style: normal;
  font-weight: 800;
  font-size: 12px;
}

.permission-groups {
  display: grid;
  gap: 14px;
}

.permission-group {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px;
  background: #ffffff;
}

.permission-group h4 {
  margin: 0 0 10px;
  color: #0f172a;
}

.permission-group .permissions-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.permission-group .permissions-list label {
  align-items: flex-start;
  background: #f8fafc;
}

.permission-group .permissions-list label span {
  display: block;
}

.permission-group .permissions-list label small {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

@media (max-width: 900px) {
  .settings-admin-layout,
  .cash-link-grid,
  .roles-grid,
  .permissions-list,
  .permission-user-selector,
  .permission-group .permissions-list {
    grid-template-columns: 1fr;
  }

  .settings-submenu {
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
    padding-right: 0;
    padding-bottom: 14px;
  }
}

/* ================= CAISSE ================= */

.caisse-admin-page {
  display: grid;
  gap: 18px;
}

.caisse-admin-header,
.caisse-admin-status,
.caisse-admin-panel,
.caisse-admin-kpi {
  background: #ffffff;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.caisse-admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px;
}

.caisse-admin-header span {
  color: #2563eb;
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
}

.caisse-admin-header h1 {
  margin-top: 5px;
  color: #07152f;
  font-size: 28px;
}

.caisse-admin-header p,
.panel-title p,
.caisse-link-box p {
  margin-top: 5px;
  color: #64748b;
  font-weight: 700;
}

.caisse-admin-refresh,
.caisse-admin-actions a,
.caisse-open-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  padding: 0 14px;
  font-weight: 900;
}

.caisse-admin-status {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.4fr);
  gap: 16px;
  padding: 20px;
}

.caisse-admin-status.open {
  border-color: #86efac;
}

.caisse-admin-status.closed {
  border-color: #fecaca;
}

.caisse-admin-status-main {
  display: flex;
  align-items: center;
  gap: 14px;
}

.status-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 12px;
  background: #eff6ff;
  color: #2563eb;
}

.caisse-admin-status.open .status-icon {
  background: #dcfce7;
  color: #15803d;
}

.caisse-admin-status.closed .status-icon {
  background: #fee2e2;
  color: #b91c1c;
}

.caisse-admin-status-main span,
.caisse-admin-session-grid span,
.caisse-admin-kpi span,
.caisse-link-box span {
  color: #64748b;
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
}

.caisse-admin-status-main h2 {
  margin-top: 4px;
  color: #0f172a;
  font-size: 24px;
}

.caisse-admin-status-main p {
  margin-top: 4px;
  color: #64748b;
  font-weight: 700;
}

.caisse-admin-session-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.caisse-admin-session-grid div {
  display: grid;
  gap: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  padding: 12px;
}

.caisse-admin-session-grid strong {
  color: #0f172a;
}

.caisse-admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 16px;
}

.caisse-admin-panel {
  padding: 18px;
}

.panel-title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}

.panel-title svg {
  color: #2563eb;
  margin-top: 2px;
}

.panel-title h2 {
  color: #0f172a;
  font-size: 20px;
}

.caisse-open-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 170px auto;
  gap: 12px;
  align-items: end;
}

.caisse-open-form label {
  display: grid;
  gap: 7px;
  color: #334155;
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
}

.caisse-open-form input,
.caisse-open-form select {
  width: 100%;
  min-height: 42px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 0 12px;
  background: #ffffff;
  color: #0f172a;
  font-weight: 900;
}

.caisse-open-form button {
  border-color: #16a34a;
  background: #16a34a;
  color: #ffffff;
}

.caisse-open-form button:disabled {
  background: #94a3b8;
  border-color: #94a3b8;
  cursor: not-allowed;
}

.caisse-link-box {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  border: 1px dashed #93c5fd;
  border-radius: 8px;
  background: #eff6ff;
  padding: 12px;
}

.caisse-link-box strong {
  color: #1d4ed8;
  word-break: break-all;
}

.caisse-admin-actions {
  display: grid;
  gap: 10px;
}

.caisse-admin-actions a {
  border-color: #1d4ed8;
  background: #1d4ed8;
  color: #ffffff;
}

.caisse-admin-actions a + a {
  border-color: #0f172a;
  background: #0f172a;
}

.caisse-admin-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.caisse-admin-kpi {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.caisse-admin-kpi svg {
  color: #2563eb;
}

.caisse-admin-kpi strong {
  color: #0f172a;
  font-size: 20px;
}

.caisse-admin-message {
  border-radius: 8px;
  padding: 12px 14px;
  font-weight: 900;
}

.caisse-admin-message.success {
  background: #dcfce7;
  color: #166534;
}

.caisse-admin-message.error {
  background: #fee2e2;
  color: #991b1b;
}

@media (max-width: 1200px) {
  .caisse-admin-status,
  .caisse-admin-layout,
  .caisse-open-form {
    grid-template-columns: 1fr;
  }

  .caisse-admin-session-grid,
  .caisse-admin-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .caisse-admin-header {
    align-items: stretch;
    flex-direction: column;
  }

  .caisse-admin-session-grid,
  .caisse-admin-kpis {
    grid-template-columns: 1fr;
  }
}

.caisse-page-pro {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.caisse-header-pro {
  background: white;
  border-radius: 24px;
  padding: 22px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.caisse-header-pro h1 {
  font-size: 30px;
}

.caisse-header-pro p {
  color: #64748b;
  margin-top: 5px;
}

.caisse-status-open {
  background: #dcfce7;
  color: #166534;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 900;
}

.caisse-error {
  background: #fee2e2;
  color: #991b1b;
  padding: 14px 18px;
  border-radius: 14px;
  font-weight: 800;
}

.caisse-success {
  background: #dcfce7;
  color: #166534;
  padding: 14px 18px;
  border-radius: 14px;
  font-weight: 800;
}

.caisse-layout-pro {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 420px;
  gap: 18px;
  align-items: start;
}

.caisse-products-panel,
.panier-panel-pro,
.payment-side-panel {
  background: white;
  border-radius: 24px;
  padding: 20px;
}

.caisse-search-zone input {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid #cbd5e1;
  border-radius: 18px;
  font-size: 15px;
  outline: none;
  margin-bottom: 18px;
}

.articles-grid-pro {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}

.article-card-pro {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 22px;
  padding: 18px;
  min-height: 145px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.article-card-pro:hover {
  background: white;
  border-color: #2563eb;
}

.article-card-pro.recupture {
  opacity: 0.55;
  background: #fee2e2;
}

.article-name {
  font-weight: 900;
  font-size: 16px;
}

.article-code {
  color: #64748b;
  font-size: 12px;
  margin-top: 6px;
}

.article-bottom strong {
  color: #2563eb;
  font-size: 18px;
}

.article-bottom span {
  display: block;
  margin-top: 4px;
  color: #475569;
  font-weight: 700;
}

.panier-panel-pro,
.payment-side-panel {
  position: sticky;
  top: 20px;
}

.panier-header-pro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.panier-header-pro h2 {
  font-size: 24px;
}

.panier-header-pro span {
  background: #e0f2fe;
  color: #0369a1;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
}

.panier-list-pro {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 300px;
  overflow-y: auto;
}

.panier-empty {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  color: #64748b;
  text-align: center;
  border-radius: 18px;
  padding: 30px;
  font-weight: 800;
}

.panier-item-pro {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 14px;
}

.panier-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

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

.panier-info span {
  color: #64748b;
  font-size: 13px;
}

.panier-actions-pro {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.panier-actions-pro button,
.panier-item-pro > .remove-line {
  border: none;
  background: #dc2626;
  color: white;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-weight: 900;
  display: grid;
  place-items: center;
}

.panier-actions-pro .remove-line,
.panier-item-pro > .remove-line {
  background: #dc2626;
  margin-left: auto;
}

.ligne-total {
  text-align: right;
  margin-top: 10px;
  font-weight: 900;
}

.paiement-zone-pro {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 18px;
}

.paiement-zone-pro button {
  border: 1px solid #cbd5e1;
  background: white;
  padding: 13px;
  border-radius: 14px;
  font-weight: 900;
  color: #334155;
}

.paiement-zone-pro button.active {
  background: #2563eb;
  color: white;
  border-color: #2563eb;
}

.mixte-zone {
  margin-top: 14px;
  border: 1px solid #dbe3ef;
  background: #f8fafc;
  border-radius: 16px;
  padding: 14px;
  display: grid;
  gap: 10px;
}

.mixte-header,
.mixte-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.mixte-header strong,
.mixte-total strong {
  color: #0f172a;
}

.mixte-header span,
.mixte-total span {
  color: #475569;
  font-size: 13px;
  font-weight: 800;
}

.mixte-zone label {
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 13px;
  font-weight: 900;
}

.mixte-zone input {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 11px 12px;
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  background: white;
  outline: none;
}

.credit-client-zone {
  margin-top: 14px;
  border: 1px solid #dbe3ef;
  background: #f8fafc;
  border-radius: 16px;
  padding: 14px;
  display: grid;
  gap: 10px;
}

.credit-client-zone label {
  color: #334155;
  font-size: 13px;
  font-weight: 900;
}

.credit-client-zone select,
.credit-client-zone input {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 11px 12px;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  background: white;
  outline: none;
}

.voyage-sale-zone {
  margin-top: 14px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  border-radius: 16px;
  padding: 14px;
  display: grid;
  gap: 10px;
}

.voyage-sale-check {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  cursor: pointer;
}

.voyage-sale-check input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #2563eb;
}

.voyage-sale-check strong,
.voyage-sale-check small {
  display: block;
}

.voyage-sale-check strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 950;
}

.voyage-sale-check small {
  margin-top: 3px;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.voyage-sale-fields {
  display: grid;
  gap: 8px;
}

.voyage-sale-fields label {
  color: #1e3a8a;
  font-size: 12px;
  font-weight: 900;
}

.voyage-sale-fields select {
  width: 100%;
  border: 1px solid #93c5fd;
  border-radius: 12px;
  padding: 11px 12px;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  background: white;
  outline: none;
}

.credit-type-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.credit-type-switch button {
  border: 1px solid #cbd5e1;
  background: white;
  color: #334155;
  border-radius: 12px;
  padding: 10px;
  font-weight: 900;
}

.credit-type-switch button.active {
  border-color: #2563eb;
  background: #2563eb;
  color: white;
}

.total-zone-pro {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #e2e8f0;
}

.total-zone-pro span {
  color: #64748b;
  font-weight: 800;
}

.total-zone-pro h2 {
  font-size: 34px;
  margin: 8px 0 18px;
}

.price-edit-line {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  color: #475569;
  font-size: 11px;
  font-weight: 900;
}

.price-edit-line input {
  width: 130px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 8px 10px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}

.qty-edit-line {
  display: grid;
  gap: 4px;
  color: #475569;
  font-size: 11px;
  font-weight: 900;
}

.qty-edit-line input {
  width: 72px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 8px 10px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.remise-zone {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  background: #f8fafc;
}

.remise-zone label {
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

.remise-zone input {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px 12px;
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
}

.remise-zone div {
  display: grid;
  gap: 4px;
  text-align: right;
}

.remise-zone strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
}

.delivery-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  cursor: pointer;
}

.delivery-option input {
  width: 18px;
  height: 18px;
  accent-color: #0f766e;
}

.delivery-option span {
  display: grid;
  gap: 2px;
}

.delivery-option strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}

.delivery-option small {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

.validate-sale,
.hold-sale,
.clear-sale {
  width: 100%;
  border: none;
  padding: 16px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 900;
  margin-bottom: 10px;
}

.validate-sale {
  background: #16a34a;
  color: white;
}

.hold-sale {
  background: #f59e0b;
  color: white;
}

.clear-sale {
  background: #e2e8f0;
  color: #0f172a;
}

.preview-sale {
  width: 100%;
  border: 1px solid #cbd5e1;
  padding: 15px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 900;
  margin-bottom: 10px;
  background: white;
  color: #1d4ed8;
}

/* Interface caisse inspiree du modele fourni */
.caisse-page-pro {
  gap: 14px;
  overflow-x: auto;
}

.caisse-header-pro {
  display: none;
}

.caisse-topbar-pro {
  display: grid;
  grid-template-columns: 150px 140px minmax(280px, 1fr) 210px 150px;
  gap: 12px;
  align-items: stretch;
  background: linear-gradient(90deg, #082f49, #0f172a);
  border-radius: 14px;
  padding: 12px;
  color: white;
}

.caisse-brand-block,
.caisse-title-block,
.cashier-card {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
}

.caisse-brand-block strong {
  font-size: 28px;
  line-height: 1;
}

.caisse-brand-block span,
.caisse-title-block p,
.cashier-card span,
.cashier-card small {
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 700;
}

.caisse-title-block h1 {
  font-size: 21px;
  letter-spacing: 0;
}

.caisse-search-zone.top-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  padding: 0 12px;
  color: #0f172a;
}

.caisse-search-zone.top-search input {
  margin: 0;
  padding: 12px 0;
  border: none;
  border-radius: 0;
  min-width: 0;
}

.quick-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: #0b4a6f;
  color: white;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.cashier-card {
  padding: 0 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.cashier-card strong {
  font-size: 13px;
}

.cashier-card button {
  margin-top: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: white;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 900;
}

.caisse-login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #e8eef5;
}

.caisse-login-card {
  width: min(420px, 100%);
  display: grid;
  gap: 14px;
  background: white;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.12);
}

.caisse-login-card h1 {
  color: #0f172a;
}

.caisse-login-card p {
  color: #64748b;
  font-weight: 700;
}

.caisse-login-card label {
  display: grid;
  gap: 7px;
  color: #334155;
  font-size: 13px;
  font-weight: 900;
}

.caisse-login-card input {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 12px;
  color: #0f172a;
  font-weight: 900;
}

.caisse-login-card button {
  border: none;
  border-radius: 8px;
  background: #16a34a;
  color: white;
  padding: 13px;
  font-weight: 900;
}

.caisse-login-card button:disabled {
  background: #94a3b8;
}

.caisse-layout-pro {
  grid-template-columns: minmax(220px, 1fr) 640px 380px;
  gap: 16px;
  justify-content: start;
}

.caisse-products-panel,
.panier-panel-pro,
.payment-side-panel {
  border-radius: 8px;
  border: 1px solid #dbe3ef;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.caisse-products-panel {
  padding: 14px;
}

.caisse-products-panel > .caisse-search-zone {
  display: none;
}

.caisse-categories {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 10px;
  margin-bottom: 6px;
}

.caisse-categories button {
  flex: 0 0 auto;
  min-height: 40px;
  border: 1px solid #dbe3ef;
  border-radius: 6px;
  background: #f8fafc;
  color: #111827;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.caisse-categories button.active {
  background: #2563eb;
  color: white;
  border-color: #2563eb;
}

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

.article-card-pro {
  border-radius: 6px;
  padding: 9px;
  min-height: 205px;
  background: white;
  justify-content: flex-start;
  gap: 8px;
}

.article-card-pro:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.12);
}

.article-visual {
  height: 84px;
  border-radius: 5px;
  background: #f8fafc;
  color: #64748b;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.article-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-name {
  font-size: 13px;
  line-height: 1.25;
  min-height: 32px;
}

.article-code {
  margin-top: 0;
  font-size: 11px;
}

.article-bottom {
  margin-top: auto;
}

.article-bottom strong {
  color: #0f2f66;
  font-size: 15px;
}

.article-bottom span {
  font-size: 12px;
}

.panier-panel-pro {
  top: 12px;
  padding: 0;
  overflow: hidden;
}

.payment-side-panel {
  top: 12px;
  padding: 0;
  overflow: hidden;
}

.panier-header-pro {
  margin: 0;
  padding: 13px 14px;
  background: #2563eb;
  color: white;
}

.panier-header-pro h2 {
  font-size: 19px;
}

.panier-header-pro span {
  background: transparent;
  color: white;
  padding: 0;
  font-size: 12px;
}

.cart-trash-btn {
  border: none;
  border-radius: 7px;
  background: #dc2626;
  color: white;
  width: 42px;
  height: 38px;
  display: grid;
  place-items: center;
}

.cart-table-head {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) 108px 76px 98px 30px;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid #e2e8f0;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

.panier-list-pro {
  gap: 0;
  max-height: 330px;
}

.panier-item-pro {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) 108px 76px 98px 30px;
  gap: 8px;
  align-items: start;
  border: none;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 0;
  background: white;
  padding: 14px;
}

.panier-info strong {
  font-size: 12px;
  line-height: 1.25;
  word-break: break-word;
}

.panier-info span {
  font-size: 10px;
}

.panier-actions-pro {
  display: contents;
  margin: 0;
}

.panier-actions-pro .qty-edit-line {
  grid-column: 2;
  grid-row: 1;
  font-size: 12px;
}

.panier-actions-pro .remove-line {
  grid-column: 5;
  grid-row: 1;
  justify-self: end;
  width: 28px;
  height: 28px;
  margin-left: 0;
  border-radius: 7px;
  color: white;
  font-size: 0;
}

.panier-actions-pro .remove-line::before {
  content: "🗑";
  font-size: 14px;
  line-height: 1;
}

.price-edit-line,
.qty-edit-line {
  margin: 0;
  gap: 4px;
}

.panier-item-pro .qty-edit-line {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: 24px minmax(44px, 1fr) 24px;
  align-items: center;
  width: 100%;
}

.panier-item-pro .price-edit-line {
  grid-column: 3;
  grid-row: 1;
  width: 100%;
  height: 30px;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 6px;
  font-size: 12px;
  text-align: right;
}

.panier-item-pro .ligne-total {
  grid-column: 4;
  grid-row: 1;
}

.qty-edit-line input {
  width: 100%;
  min-width: 0;
  height: 30px;
  box-sizing: border-box;
  border-radius: 6px;
  padding: 8px 6px;
  font-size: 12px;
  text-align: center;
}

.qty-edit-line button {
  width: 24px;
  height: 30px;
  border-radius: 6px;
  padding: 0;
  font-size: 12px;
  line-height: 1;
}

.ligne-total {
  margin-top: 0;
  text-align: right;
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.payment-panel-pro {
  padding: 16px;
  border-top: 1px solid #e2e8f0;
}

.payment-panel-pro h3 {
  margin: 0 0 10px;
  color: #0f172a;
  font-size: 14px;
  text-transform: uppercase;
}

.invoice-toggle {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid #c7d2fe;
  border-radius: 7px;
  background: #eef2ff;
  color: #0f172a;
}

.invoice-toggle input {
  margin-top: 3px;
}

.invoice-toggle strong,
.invoice-toggle small {
  display: block;
}

.invoice-toggle strong {
  font-size: 13px;
  font-weight: 900;
}

.invoice-toggle small {
  margin-top: 3px;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.invoice-toggle:has(input:disabled) {
  opacity: 0.62;
}

.paiement-zone-pro {
  margin-top: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.payment-btn {
  min-height: 76px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 7px !important;
  color: white !important;
  border: none !important;
}

.payment-btn.especes {
  background: #16833a !important;
}

.payment-btn.wave {
  background: #1d74f5 !important;
}

.payment-btn.orange {
  background: #f97316 !important;
}

.payment-btn.mixte {
  background: #6d5bd0 !important;
}

.payment-btn.credit {
  grid-column: span 2;
  background: #374151 !important;
}

.payment-btn:not(.active) {
  opacity: 0.84;
}

.payment-btn.active {
  outline: 3px solid #93c5fd;
  outline-offset: 1px;
}

.cart-summary-box {
  border-top: 1px solid #e2e8f0;
  padding: 14px;
}

.sale-document-choice {
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid #c7d2fe;
  border-radius: 7px;
  background: #eef2ff;
}

.sale-document-choice > span {
  display: block;
  margin-bottom: 7px;
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.sale-document-choice > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.sale-document-choice button {
  min-height: 34px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #ffffff;
  color: #334155;
  font-size: 11px;
  font-weight: 900;
}

.sale-document-choice button.active {
  border-color: #2563eb;
  background: #2563eb;
  color: #ffffff;
}

.sale-document-choice button:disabled {
  opacity: 0.55;
}

.sale-document-choice small {
  display: block;
  margin-top: 7px;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
}

.invoice-info-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  background: #f8fafc;
}

.invoice-info-box label {
  display: grid;
  gap: 6px;
  color: #475569;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.invoice-info-box label:nth-child(3),
.invoice-info-box label:nth-child(4),
.invoice-info-box label:nth-child(5) {
  grid-column: 1 / -1;
}

.invoice-info-box input {
  min-height: 36px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 0 10px;
  background: #ffffff;
  color: #0f172a;
  font-weight: 800;
}

.cart-summary-box .remise-zone {
  grid-template-columns: 1fr 104px;
  align-items: end;
  margin: 0 0 14px;
  padding: 0;
  border: none;
  background: transparent;
}

.cart-summary-box .remise-zone button {
  height: 38px;
  border: 1px solid #dbe3ef;
  border-radius: 7px;
  background: #f8fafc;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.summary-line,
.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}

.summary-line span {
  color: #334155;
  font-size: 14px;
  font-weight: 800;
}

.summary-line strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
}

.summary-total {
  margin-top: 18px;
}

.summary-total span {
  color: #0f172a;
  font-size: 18px;
  font-weight: 900;
}

.summary-total strong {
  color: #2563eb;
  font-size: 24px;
  font-weight: 900;
}

.payment-remise-hidden {
  display: none;
}

.cash-received-zone {
  display: grid;
  gap: 12px;
  margin: 0 0 14px;
}

.cash-received-zone label,
.cash-received-zone div {
  display: grid;
  gap: 7px;
  padding: 11px;
  border: 1px solid #dbe3ef;
  border-radius: 7px;
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.cash-received-zone label {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.cash-received-zone label input {
  grid-column: 1 / 2;
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  padding: 10px;
  color: #0f172a;
  font-weight: 900;
}

.cash-received-zone label span {
  grid-column: 2 / 3;
  align-self: end;
  padding-bottom: 10px;
}

.cash-received-zone div strong {
  color: #16a34a;
  font-size: 18px;
  text-align: right;
}

.cashier-actions {
  display: flex;
  gap: 6px;
}

.cashier-actions button {
  flex: 1;
}

.cash-stop-btn {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border-color: #fecaca !important;
}

.cash-info-panel {
  margin: 14px 16px 16px;
  padding: 16px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
}

.cash-info-panel h3 {
  margin: 0 0 14px;
  color: #0f172a;
  font-size: 15px;
  text-transform: uppercase;
}

.cash-info-grid {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) 1fr;
  gap: 9px 12px;
  color: #64748b;
  font-size: 13px;
}

.cash-info-grid strong {
  color: #0f172a;
  text-align: right;
}

.cash-journal-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  border: none;
  background: transparent;
  color: #2563eb;
  font-weight: 900;
  cursor: pointer;
}

.mixte-zone,
.credit-client-zone,
.total-zone-pro,
.tickets-attente-zone {
  margin-left: 16px;
  margin-right: 16px;
}

.total-zone-pro {
  margin-top: 14px;
}

.remise-zone {
  border-radius: 7px;
}

.total-zone-pro h2 {
  color: #2563eb;
  text-align: right;
}

.validate-sale,
.hold-sale,
.clear-sale,
.preview-sale {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 7px;
}

@media (max-width: 1300px) {
  .caisse-topbar-pro {
    grid-template-columns: 140px minmax(260px, 1fr) 170px;
  }

  .caisse-title-block,
  .cashier-card {
    display: none;
  }

  .caisse-layout-pro {
    grid-template-columns: minmax(220px, 1fr) 600px 350px;
  }
}

@media (max-width: 980px) {
  .caisse-topbar-pro,
  .caisse-layout-pro {
    grid-template-columns: 1fr;
  }

  .panier-panel-pro,
  .payment-side-panel {
    position: static;
  }

  .cart-table-head,
  .panier-item-pro {
    grid-template-columns: minmax(0, 1fr) 70px 100px;
  }

  .cart-table-head span:nth-child(4),
  .ligne-total {
    grid-column: 1 / -1;
  }
}

/* ================= TICKET SANS VOILE ================= */

.ticket-preview-wrap {
  background: #0f172a;
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.ticket-preview-header {
  width: 100%;
  max-width: 360px;
  color: white;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.ticket-preview-header strong {
  font-size: 18px;
}

.ticket-preview-header span {
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 800;
}

.ticket-paper {
  width: 420px;
  background: white;
  color: #000;
  border-radius: 18px;
  padding: 20px;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}

.ticket-brand {
  text-align: center;
}

.ticket-brand h2 {
  font-size: 34px;
  font-weight: 900;
  margin-bottom: 4px;
}

.ticket-brand p {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.ticket-separator {
  border-top: 2px dashed #000;
  margin: 10px 0;
}

.document-title {
  text-align: center;
  display: grid;
  gap: 4px;
  font-weight: 900;
}

.document-title strong {
  font-size: 18px;
  letter-spacing: 0;
}

.document-title span {
  font-size: 12px;
}

.ticket-meta-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  font-weight: 800;
}

.ticket-meta-line span:last-child {
  text-align: right;
}

.ticket-meta {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 800;
  display: grid;
  gap: 3px;
}

.ticket-table-head,
.ticket-item {
  display: grid;
  grid-template-columns: 1.7fr 0.45fr 0.7fr 0.85fr;
  gap: 6px;
}

.ticket-table-head {
  font-size: 14px;
  font-weight: 900;
  border-bottom: 1px solid #000;
  padding-bottom: 5px;
}

.ticket-item {
  font-size: 14px;
  font-weight: 700;
  padding: 6px 0;
  border-bottom: 1px dotted #999;
}

.ticket-table-head span:nth-child(2),
.ticket-table-head span:nth-child(3),
.ticket-table-head span:nth-child(4),
.ticket-item span:nth-child(2),
.ticket-item span:nth-child(3),
.ticket-item span:nth-child(4) {
  text-align: right;
}

.ticket-grand-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 24px;
  font-weight: 900;
}

.ticket-grand-total strong {
  font-size: 26px;
}

.ticket-footer {
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  margin-top: 8px;
}

.ticket-footer.small {
  margin-top: 3px;
}

.ticket-actions {
  display: flex;
  gap: 12px;
}

.ticket-actions button {
  border: none;
  padding: 14px 28px;
  border-radius: 14px;
  color: white;
  font-weight: 900;
  font-size: 15px;
}

.ticket-actions button:first-child {
  background: #16a34a;
}

.ticket-actions button:last-child {
  background: #dc2626;
}

/* ================= IMPRESSION ================= */

@media print {
  body * {
    visibility: hidden !important;
  }
  .ticket-logo {
    width: 22mm !important;
    margin: 0 auto 1mm !important;
  }

  #ticket-print,
  #ticket-print * {
    visibility: visible !important;
  }

  #ticket-print {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;

    width: 58mm !important;
    max-width: 58mm !important;
    min-height: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 2mm 2mm !important;

    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 10px !important;
    line-height: 1.18 !important;
    overflow: visible !important;

    page-break-after: avoid !important;
    page-break-before: avoid !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
  }

  #ticket-print.a4-document {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    min-height: auto !important;
    height: auto !important;
    padding: 10mm !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
    overflow: visible !important;
  }

  #ticket-print.a4-document .a4-title h1 {
    font-size: 26px !important;
  }

  #ticket-print.a4-document .a4-lines {
    font-size: 12px !important;
  }

  #ticket-print.a4-document .a4-lines th,
  #ticket-print.a4-document .a4-lines td {
    padding: 8px !important;
  }

  .vente-drawer-overlay,
  .vente-drawer,
  .vente-drawer-actions,
  .vente-drawer-header,
  .document-toolbar,
  .document-form-panel {
    all: unset !important;
  }

  .document-toolbar,
  .document-form-panel {
    display: none !important;
  }

  .ticket-brand h2 {
    font-size: 16px !important;
    margin: 0 !important;
  }

  .ticket-brand p,
  .ticket-meta p,
  .ticket-footer {
    font-size: 9px !important;
    margin: 2px 0 !important;
    font-weight: 600 !important;
  }

  .ticket-separator {
    margin: 5px 0 !important;
  }

  .ticket-item {
    font-size: 8.6px !important;
    padding: 2px 0 !important;
    font-weight: 600 !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  .ticket-table-head,
  .ticket-item {
    grid-template-columns: minmax(0, 1fr) 18px 36px 42px !important;
    column-gap: 2px !important;
  }

  .ticket-grand-total {
    font-size: 12px !important;
    margin-top: 4px !important;
    font-weight: 800 !important;
  }

  @page {
    size: 58mm auto;
    margin: 0;
  }

}
/* ================= VENTES ================= */

.ventes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.ventes-header h1 {
  font-size: 30px;
}

.ventes-header p {
  color: #64748b;
  margin-top: 5px;
}

.ventes-table-wrapper {
  overflow-x: auto;
}

.ventes-table {
  width: 100%;
  border-collapse: collapse;
}

.ventes-table th {
  background: #f8fafc;
  padding: 16px;
  text-align: left;
  font-size: 14px;
}

.ventes-table td {
  padding: 16px;
  border-top: 1px solid #e2e8f0;
  font-weight: 600;
}

.ventes-table tbody tr:hover {
  background: #f8fafc;
}
/* ================= STOCK PAGE PRO ================= */

.stock-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.stock-header {
  background: white;
  padding: 24px;
  border-radius: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stock-header h1 {
  font-size: 34px;
  margin-top: 5px;
}

.stock-header p {
  color: #64748b;
}

.stock-actions {
  display: flex;
  gap: 12px;
}

.stock-actions button {
  border: none;
  padding: 14px 18px;
  border-radius: 14px;
  font-weight: 800;
  background: #2563eb;
  color: white;
}

.stock-content {
  background: white;
  border-radius: 24px;
  padding: 24px;
}

.stock-search-row {
  display: flex;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.stock-search-row input {
  flex: 1;
  min-width: 260px;
  padding: 15px 18px;
  border: 1px solid #cbd5e1;
  border-radius: 16px;
  font-size: 15px;
}

.stock-toolbar .stock-search {
  position: relative;
}

.article-suggestion-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 280px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #d9e2f2;
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
  padding: 6px;
}

.article-suggestion-list button {
  width: 100%;
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  padding: 9px 10px;
  text-align: left;
  color: #0f172a;
  cursor: pointer;
}

.article-suggestion-list button:hover {
  background: #eff6ff;
}

.article-suggestion-list strong,
.article-suggestion-list span,
.article-suggestion-list small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.article-suggestion-list small {
  color: #64748b;
  white-space: nowrap;
}

.stock-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.stock-filters button {
  border: none;
  background: #e2e8f0;
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 800;
}

.stock-filters button.active {
  background: #2563eb;
  color: white;
}

.column-filter-toggle,
.column-filter-clear {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #ffffff;
  color: #1f2937;
  padding: 0 12px;
  font-weight: 900;
}

.column-filter-toggle.active {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
}

.column-filter-clear {
  border-color: #fee2e2;
  background: #fff7f7;
  color: #b91c1c;
}

.stock-count {
  margin: 20px 0;
  color: #64748b;
  font-weight: 700;
}

.stock-table-wrapper {
  overflow: auto;
  scrollbar-gutter: stable both-edges;
}

.stock-table {
  width: 100%;
  min-width: 1180px;
  border-collapse: collapse;
  table-layout: fixed;
}

.stock-table th:nth-child(1),
.stock-table td:nth-child(1) {
  width: 30%;
}

.stock-table th:nth-child(2),
.stock-table td:nth-child(2) {
  width: 10%;
}

.stock-table th:nth-child(3),
.stock-table td:nth-child(3),
.stock-table th:nth-child(4),
.stock-table td:nth-child(4),
.stock-table th:nth-child(5),
.stock-table td:nth-child(5) {
  width: 7%;
}

.stock-table th:nth-child(6),
.stock-table td:nth-child(6),
.stock-table th:nth-child(7),
.stock-table td:nth-child(7),
.stock-table th:nth-child(8),
.stock-table td:nth-child(8) {
  width: 11%;
}

.stock-table th:nth-child(9),
.stock-table td:nth-child(9) {
  width: 10%;
}

.stock-table th:nth-child(10),
.stock-table td:nth-child(10) {
  width: 8%;
}

.stock-table th {
  background: #f8fafc;
  padding: 16px;
  text-align: left;
  font-size: 14px;
  white-space: nowrap;
}

.stock-column-filter-row th {
  top: 47px;
  padding: 8px 10px;
  background: #eef4fb;
  border-top: 1px solid #dbe3ef;
  border-bottom: 1px solid #dbe3ef;
  z-index: 9;
}

.stock-column-filter-row input,
.stock-column-filter-row select {
  width: 100%;
  min-width: 76px;
  height: 34px;
  max-width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 800;
  outline: none;
}

.stock-column-filter-row input:focus,
.stock-column-filter-row select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.stock-table td {
  padding: 16px;
  border-top: 1px solid #e2e8f0;
  font-weight: 700;
  white-space: nowrap;
}

.stock-table td:nth-child(1),
.stock-table td:nth-child(2) {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.stock-table .article-cell {
  min-width: 0;
  align-items: flex-start;
}

.stock-table .article-cell > div:last-child {
  min-width: 0;
}

.stock-table .article-cell strong,
.stock-table .article-cell span {
  display: block;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.25;
}

.stock-table .article-mini-icon {
  flex: 0 0 auto;
}

.stock-table .category-pill {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.2;
}

.stock-table tbody tr:hover {
  background: #f8fafc;
}

.stock-status {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  display: inline-block;
}

.stock-status.ok {
  background: #dcfce7;
  color: #166534;
}

.stock-status.recupture {
  background: #fee2e2;
  color: #991b1b;
}

.stock-value {
  font-weight: 900;
}

@media (max-width: 900px) {
  .stock-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .stock-search-row {
    flex-direction: column;
  }
}
/* ================= DASHBOARD PRO ================= */

.dashboard-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.stat-card {
  background: white;
  padding: 24px;
  border-radius: 24px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.04);
}

.stat-card h3 {
  font-size: 34px;
  margin-bottom: 8px;
}

.stat-card p {
  color: #64748b;
  font-weight: 700;
}

.stat-card small {
  display: block;
  margin-top: 8px;
  color: #64748b;
  font-weight: 800;
}

.stat-card.sales {
  background: linear-gradient(135deg, #0f2a4a, #2563eb);
  color: #ffffff;
}

.stat-card.sales p,
.stat-card.sales small {
  color: rgba(255, 255, 255, 0.82);
}

.stat-card.sales.month {
  background: linear-gradient(135deg, #065f46, #16a34a);
}

.stat-card.danger {
  background: #fee2e2;
}

.stat-card.warning {
  background: #fef3c7;
}

.dashboard-charts {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

.page-content {
  background: white;
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.04);
}

.page-content h1 {
  margin-bottom: 18px;
}

@media (max-width: 1100px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-charts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}
/* ================= VENTES SPLIT ================= */

.ventes-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: 22px;
  align-items: start;
}

.ventes-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ticket-side-panel {
  position: sticky;
  top: 20px;
  background: #0f172a;
  border-radius: 26px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: fit-content;
}

.ticket-side-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  color: white;
}

.ticket-side-header p {
  color: #cbd5e1;
  font-weight: 700;
}

.ticket-side-header h2 {
  margin-top: 4px;
  font-size: 28px;
}

.ticket-side-actions {
  display: flex;
  gap: 10px;
}

.ticket-side-actions button {
  border: none;
  padding: 12px 16px;
  border-radius: 14px;
  color: white;
  font-weight: 900;
}

.ticket-side-actions button:first-child {
  background: #16a34a;
}

.ticket-side-actions button:last-child {
  background: #dc2626;
}

@media (max-width: 1200px) {
  .ventes-layout {
    grid-template-columns: 1fr;
  }

  .ticket-side-panel {
    position: static;
  }
}
.credits-page {
  width: 100%;
  min-height: 100vh;
  padding: 24px;
  background: #f4f7fb;
}

.credits-page-body {
  background: #f5f8fc !important;
  padding: 0 !important;
}

.credits-pro-page {
  padding: 18px 22px 26px;
  background: #f5f8fc;
}

.credits-pro-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.credits-pro-breadcrecumb {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 7px;
  color: #61708a;
  font-size: 12px;
}

.credits-pro-heading h1 {
  margin: 0;
  color: #0b1739;
  font-size: 25px;
  font-weight: 850;
  letter-spacing: 0;
}

.credits-pro-heading span {
  display: block;
  margin-top: 5px;
  color: #60708b;
  font-size: 13px;
}

.credits-pro-export {
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 7px;
  background: #0f66eb;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  box-shadow: 0 7px 14px rgba(15, 102, 235, .18);
}

.credits-pro-tabs {
  gap: 18px;
  margin-bottom: 12px;
  padding: 0 16px;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .04);
}

.credits-pro-tabs button {
  min-height: 48px;
  padding: 0 8px;
  border-radius: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #1b2945;
  font-weight: 650;
}

.credits-pro-tabs button.active {
  background: transparent;
  color: #0f66eb;
  box-shadow: inset 0 -2px #0f66eb;
}

.credits-pro-dashboard {
  display: grid;
  gap: 12px;
}

.credits-pro-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.credits-pro-kpi {
  min-height: 138px;
  padding: 18px;
  border: 1px solid #e5ebf4;
  border-radius: 8px;
  background: #fff;
  text-align: left;
  position: relative;
  display: flex;
  gap: 14px;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(15, 23, 42, .035);
  transition: transform .2s ease, box-shadow .2s ease;
}

.credits-pro-kpi:hover,
.credits-pro-panel:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .07);
}

.credits-pro-kpi > i {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  flex: 0 0 50px;
  display: grid;
  place-items: center;
}

.credits-pro-kpi > i.purple { background: #e8dcff; color: #7138e7; }
.credits-pro-kpi > i.blue { background: #dcebff; color: #1265e8; }
.credits-pro-kpi > i.green { background: #d9f6e2; color: #159447; }
.credits-pro-kpi > i.orange { background: #ffedc9; color: #f19700; }

.credits-pro-kpi div { min-width: 0; }
.credits-pro-kpi strong { display: block; color: #0b132d; font-size: 20px; line-height: 1.15; font-weight: 850; }
.credits-pro-kpi b { display: block; margin-top: 7px; color: #16213d; font-size: 13px; }
.credits-pro-kpi span { display: block; margin-top: 4px; color: #71809a; font-size: 11px; }
.credits-pro-kpi em { display: block; margin-top: 8px; color: #14a44d; font-size: 11px; font-style: normal; font-weight: 700; }
.credits-pro-kpi > small { position: absolute; left: 18px; bottom: 14px; color: #0f66eb; display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 650; }

.credits-pro-middle {
  display: grid;
  grid-template-columns: 1fr 1.08fr 1.15fr;
  gap: 12px;
}

.credits-pro-bottom {
  display: grid;
  grid-template-columns: 1.62fr 1fr;
  gap: 12px;
}

.credits-pro-panel {
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid #e5ebf4;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 5px 15px rgba(15, 23, 42, .035);
  transition: transform .2s ease, box-shadow .2s ease;
}

.credits-pro-panel-title {
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.credits-pro-panel-title h2 {
  margin: 0;
  color: #0b132d;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 800;
}

.credits-pro-panel-title span {
  color: #71809a;
  font-size: 11px;
}

.credits-pro-alerts,
.credits-pro-debtors {
  display: grid;
  gap: 8px;
}

.credits-pro-alerts button {
  min-height: 55px;
  padding: 8px 10px;
  border: 1px solid #e6ebf3;
  border-radius: 7px;
  background: #fbfcfe;
  display: grid;
  grid-template-columns: 40px 34px 1fr 16px;
  align-items: center;
  gap: 8px;
  color: #6c7b94;
  text-align: left;
  cursor: pointer;
}

.credits-pro-alerts i {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.credits-pro-alerts i.red { background: #ffe1e1; color: #f04444; }
.credits-pro-alerts i.amber { background: #fff0ca; color: #f0a500; }
.credits-pro-alerts i.blue { background: #dcecff; color: #3a83ed; }
.credits-pro-alerts strong { color: #101a36; font-size: 16px; }
.credits-pro-alerts span { font-size: 11px; }

.credits-pro-debtors button {
  min-height: 36px;
  padding: 0 2px;
  border: 0;
  border-bottom: 1px solid #edf1f6;
  background: transparent;
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 8px;
  color: #14203c;
  text-align: left;
  cursor: pointer;
}

.credits-pro-debtors i {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #eef2f7;
  display: grid;
  place-items: center;
  color: #53617a;
  font-size: 10px;
  font-style: normal;
}

.credits-pro-debtors button:first-child i { background: #ffe5a7; color: #c98200; }
.credits-pro-debtors button:nth-child(2) i { background: #dce2eb; }
.credits-pro-debtors button:nth-child(3) i { background: #ffd8ad; color: #c56b00; }
.credits-pro-debtors span { font-size: 11px; font-weight: 700; }
.credits-pro-debtors strong { color: #e72a2a; font-size: 11px; }

.credits-pro-link {
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #0f66eb;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}

.credits-pro-distribution {
  min-height: 170px;
  display: grid;
  grid-template-columns: 155px 1fr;
  align-items: center;
  gap: 12px;
}

.credits-pro-doughnut {
  width: 150px;
  height: 150px;
  position: relative;
}

.credits-pro-doughnut > strong {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  color: #101a36;
  font-size: 16px;
  text-align: center;
}

.credits-pro-doughnut small { display: block; margin-top: 2px; font-size: 10px; font-weight: 600; }
.credits-pro-legend { display: grid; gap: 7px; }
.credits-pro-legend div { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 7px; color: #1a2744; font-size: 10px; }
.credits-pro-legend i { width: 7px; height: 7px; border-radius: 50%; }
.credits-pro-legend span small { display: block; margin-top: 2px; color: #7a879e; }
.credits-pro-legend b { font-size: 10px; }

.credits-pro-table-wrap { overflow-x: auto; }
.credits-pro-table { width: 100%; border-collapse: collapse; }
.credits-pro-table th { padding: 9px 10px; border-bottom: 1px solid #e9eef5; color: #53617b; font-size: 10px; text-align: left; white-space: nowrap; }
.credits-pro-table td { padding: 10px; border-bottom: 1px solid #edf1f6; color: #17233f; font-size: 10px; font-weight: 600; white-space: nowrap; }
.credits-pro-table td.late { color: #ed2e2e; }
.credits-pro-status { padding: 4px 7px; border-radius: 5px; font-size: 9px; font-weight: 700; }
.credits-pro-status.en_retard { background: #ffe2e2; color: #e62d2d; }
.credits-pro-status.a_echeance { background: #fff0ce; color: #d88600; }
.credits-pro-status.a_venir { background: #deebff; color: #1769e8; }

.credits-pro-line {
  height: 205px;
}

.qmp-notification-panel > button.unread {
  background: #f1f6ff;
}

.qmp-notification-panel > button span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.qmp-notification-panel > button span strong {
  color: #15213d;
  font-size: 12px;
}

.qmp-notification-panel > button span small {
  color: #71809a;
  font-size: 10px;
  line-height: 1.35;
}

.notification-settings-card {
  display: grid;
  gap: 22px;
}

.entreprise-settings-card {
  display: grid;
  gap: 18px;
}

.entreprise-settings-card h4 {
  margin: 4px 0 -4px;
  color: #17233f;
  font-size: 13px;
  font-weight: 850;
}

.entreprise-logo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid #e1e8f2;
  border-radius: 8px;
  background: #fbfcfe;
}

.entreprise-logo-preview {
  width: 92px;
  height: 72px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #fff;
  color: #1769e8;
  overflow: hidden;
}

.entreprise-logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.entreprise-upload {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #dce4ef;
  border-radius: 8px;
  background: #fff;
  color: #1769e8;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.entreprise-upload input {
  display: none;
}

.entreprise-form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.entreprise-document-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.entreprise-document-options label {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #dce4ef;
  border-radius: 8px;
  background: #fff;
  color: #17233f;
  font-size: 12px;
  font-weight: 750;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.notification-settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.notification-settings-head > svg {
  color: #1769e8;
}

.notification-channel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.notification-channel {
  min-height: 82px;
  padding: 14px;
  border: 1px solid #e1e8f2;
  border-radius: 8px;
  background: #fbfcfe;
  display: grid;
  grid-template-columns: 36px 1fr 38px;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.notification-channel > span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e4efff;
  color: #1769e8;
  display: grid;
  place-items: center;
}

.notification-channel strong,
.notification-channel small {
  display: block;
}

.notification-channel strong {
  color: #17233f;
  font-size: 13px;
}

.notification-channel small {
  margin-top: 4px;
  color: #71809a;
  font-size: 10px;
  line-height: 1.35;
}

.notification-channel input {
  display: none;
}

.notification-channel > i {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: #cbd5e1;
  position: relative;
  transition: .2s ease;
}

.notification-channel > i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: .2s ease;
}

.notification-channel input:checked + i {
  background: #1769e8;
}

.notification-channel input:checked + i::after {
  transform: translateX(16px);
}

.notification-contact-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.notification-threshold-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.notification-threshold {
  display: grid;
  gap: 7px;
}

.notification-threshold > span {
  color: #56657f;
  font-size: 12px;
  font-weight: 750;
}

.notification-threshold > div {
  height: 42px;
  border: 1px solid #dce4ef;
  border-radius: 7px;
  background: #fff;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  overflow: hidden;
}

.notification-threshold input {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  padding: 0 12px;
  color: #17233f;
  font-weight: 750;
}

.notification-threshold small {
  padding: 0 10px;
  color: #71809a;
  font-size: 10px;
  font-weight: 750;
}

.notification-choice-section {
  display: grid;
  gap: 10px;
}

.notification-choice-section h4 {
  margin: 0;
  color: #17233f;
  font-size: 13px;
}

.notification-choice-section > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.notification-choice-section label {
  cursor: pointer;
}

.notification-choice-section input {
  display: none;
}

.notification-choice-section span {
  min-height: 31px;
  padding: 0 11px;
  border: 1px solid #dce4ef;
  border-radius: 6px;
  background: #fff;
  color: #56657f;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
}

.notification-choice-section input:checked + span {
  border-color: #1769e8;
  background: #edf4ff;
  color: #1769e8;
}

.notification-diagnostic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border: 1px solid #dce4ef;
  border-radius: 8px;
  background: #f8fbff;
}

.notification-diagnostic > div {
  display: grid;
  gap: 5px;
}

.notification-diagnostic strong {
  color: #17233f;
  font-size: 12px;
}

.notification-diagnostic span,
.notification-diagnostic p {
  margin: 0;
  color: #64748b;
  font-size: 11px;
}

.notification-diagnostic-log {
  grid-column: span 2;
}

.notification-diagnostic-log p {
  padding: 8px 0;
  border-top: 1px solid #e6edf6;
}

.notification-diagnostic-log b {
  color: #1769e8;
}

.notification-diagnostic-log small {
  display: block;
  margin-top: 4px;
  color: #dc2626;
}

@media (max-width: 1200px) {
  .credits-pro-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .credits-pro-middle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .credits-pro-middle .credits-pro-panel:last-child { grid-column: span 2; }
  .credits-pro-bottom { grid-template-columns: 1fr; }
  .notification-channel-grid,
  .notification-contact-grid,
  .notification-threshold-grid,
  .notification-diagnostic { grid-template-columns: 1fr; }
  .notification-diagnostic-log { grid-column: auto; }
}

@media (max-width: 760px) {
  .credits-pro-page { padding: 14px; }
  .credits-pro-heading { align-items: flex-start; flex-direction: column; }
  .credits-pro-kpis, .credits-pro-middle { grid-template-columns: 1fr; }
  .credits-pro-middle .credits-pro-panel:last-child { grid-column: auto; }
  .credits-pro-tabs { gap: 6px; overflow-x: auto; flex-wrap: nowrap; }
  .credits-pro-tabs button { white-space: nowrap; }
}

@media screen {
  .main-content:has(.credits-page),
  .workspace-window-body:has(.credits-page) {
    overflow: hidden;
  }

  .credits-page {
    height: calc(100vh - 52px);
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .workspace-window-body .credits-page {
    height: 100%;
  }

  .credits-topbar,
  .credits-header,
  .credit-erp-tabs {
    flex: 0 0 auto;
  }

  .credits-scroll-area {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 14px 4px 24px;
    scrollbar-gutter: stable both-edges;
  }

  .credits-scroll-area .credit-card > .card-title,
  .credits-scroll-area .credit-card > .table-header,
  .credits-scroll-area .erp-placeholder-card > h2,
  .credits-scroll-area .erp-placeholder-card > p {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #ffffff;
  }

  .credits-scroll-area .credit-card > .card-title,
  .credits-scroll-area .credit-card > .table-header {
    margin: -24px -24px 18px;
    padding: 22px 24px 16px;
    border-bottom: 1px solid #edf1f7;
    border-radius: 22px 22px 0 0;
  }

  .credits-scroll-area .erp-placeholder-card > h2 {
    margin: -24px -24px 0;
    padding: 22px 24px 8px;
    border-radius: 22px 22px 0 0;
  }

  .credits-scroll-area .erp-placeholder-card > p {
    top: 54px;
    margin: 0 -24px 12px;
    padding: 0 24px 14px;
    border-bottom: 1px solid #edf1f7;
  }

  .credits-scroll-area .credit-table thead th {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #ffffff;
  }
}

.credits-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.credits-search {
  width: 420px;
  height: 46px;
  background: #ffffff;
  border: 1px solid #dde5f0;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  color: #64748b;
}

.credits-search input,
.small-search input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font-size: 14px;
}

.credits-admin {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #0f172a;
}

.admin-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.credits-header {
  margin-bottom: 22px;
}

.credits-header h1 {
  font-size: 30px;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 6px;
}

.credits-header p {
  color: #64748b;
  font-size: 15px;
}

.credit-erp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
  padding: 8px;
  border: 1px solid #dbe5f2;
  border-radius: 12px;
  background: #ffffff;
}

.credit-erp-tabs button {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: #f8fafc;
  color: #334155;
  font-size: 13px;
  font-weight: 900;
}

.credit-erp-tabs button.active {
  background: #1d4ed8;
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
}

.credits-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 22px;
}

.credit-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 18px;
  margin-bottom: 22px;
}

.credit-alert-list,
.credit-top-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.credit-alert-list div,
.credit-top-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.credit-alert-list strong,
.credit-top-list strong {
  color: #0f172a;
  font-size: 15px;
  font-weight: 950;
}

.credit-alert-list span,
.credit-top-list span {
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.credit-top-list button {
  text-align: left;
}

.credit-payment-search {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
}

.credit-payment-search input {
  width: 100%;
  height: 38px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 0 12px;
  color: #0f172a;
  background: #ffffff;
  font-size: 12px;
  font-weight: 750;
}

.credit-payment-search span {
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.credit-payment-results {
  display: grid;
  gap: 8px;
  max-height: 420px;
  overflow: auto;
  padding-right: 4px;
}

.credit-payment-results button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  text-align: left;
  cursor: pointer;
}

.credit-payment-results button:hover {
  border-color: #2563eb;
  background: #eef4ff;
}

.credit-payment-results button span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.credit-payment-results button strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.credit-payment-results button small {
  overflow: hidden;
  color: #64748b;
  font-size: 10px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.credit-payment-results button b {
  color: #dc2626;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.compte-client-search-box {
  display: grid;
  gap: 8px;
}

.compte-client-search-box > input {
  height: 38px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 0 12px;
  color: #0f172a;
  background: #fff;
  font-size: 12px;
  font-weight: 750;
}

.compte-client-results {
  display: grid;
  gap: 7px;
  max-height: 260px;
  overflow: auto;
  padding-right: 3px;
}

.compte-client-results button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  text-align: left;
  cursor: pointer;
}

.compte-client-results button:hover {
  border-color: #2563eb;
  background: #eef4ff;
}

.compte-client-results span,
.compte-selected-client {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.compte-client-results strong,
.compte-selected-client strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 12px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compte-client-results small,
.compte-selected-client small {
  overflow: hidden;
  color: #64748b;
  font-size: 10px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compte-client-results b,
.compte-selected-client span {
  color: #dc2626;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.compte-selected-client {
  position: relative;
  padding: 10px 88px 10px 12px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
}

.compte-selected-client button {
  position: absolute;
  top: 8px;
  right: 8px;
  height: 28px;
  border: 1px solid #bfdbfe;
  border-radius: 7px;
  background: #fff;
  color: #1d4ed8;
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}

.erp-placeholder-card {
  margin-bottom: 18px;
}

.erp-placeholder-card p {
  margin: 6px 0 12px;
  color: #64748b;
  font-weight: 700;
}

.erp-credit-grid.tab-dashboard,
.erp-credit-grid.tab-paiements,
.erp-credit-grid.tab-releves,
.erp-credit-grid.tab-rapports {
  display: none;
}

.erp-credit-grid.tab-commerciaux {
  grid-template-columns: 1fr;
}

.erp-credit-grid.tab-commerciaux .credits-right {
  display: none;
}

.erp-credit-grid.tab-clients {
  grid-template-columns: 1fr;
}

.erp-credit-grid.tab-clients .credits-left {
  display: none;
}

.fournisseurs-achats-section {
  margin-bottom: 18px;
}

.fournisseurs-achats-section:not(.tab-achats) {
  display: none;
}

.fournisseurs-main-grid:not(.tab-fournisseurs) {
  display: none;
}

.credit-stat-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  border: 1px solid #edf1f7;
}

.stat-icon {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-icon svg {
  width: 30px;
  height: 30px;
}

.stat-icon.purple {
  background: #f1e8ff;
  color: #7c3aed;
}

.stat-icon.blue {
  background: #e8f2ff;
  color: #2563eb;
}

.stat-icon.green {
  background: #dcfce7;
  color: #16a34a;
}

.stat-icon.orange {
  background: #fff3df;
  color: #f59e0b;
}

.credit-stat-card h3 {
  font-size: 24px;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 4px;
}

.credit-stat-card strong {
  display: block;
  font-size: 14px;
  color: #0f172a;
}

.credit-stat-card p {
  font-size: 13px;
  color: #64748b;
  margin-top: 4px;
}
.credits-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 22px;
}

.credits-left,
.credits-right {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.credit-card {
  background: #ffffff;
  border-radius: 22px;
  padding: 24px;
  border: 1px solid #edf1f7;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}

.title-inline {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.card-title h2,
.credit-card h2 {
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
}

.icon-box {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-box.purple {
  background: #f1e8ff;
  color: #7c3aed;
}

.icon-box.blue {
  background: #e8f2ff;
  color: #2563eb;
}

.credit-form,
.client-form {
  display: grid;
  gap: 16px;
}

.client-form {
  grid-template-columns: repeat(2, 1fr);
}

.client-form .full {
  grid-column: span 2;
}

.credit-form label,
.client-form label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
}

.credit-form input,
.client-form input,
.client-form select {
  width: 100%;
  height: 50px;
  border-radius: 14px;
  border: 1px solid #dbe4f0;
  background: #f8fafc;
  padding: 0 16px;
  font-size: 14px;
  transition: 0.2s;
}

.credit-form input:focus,
.client-form input:focus,
.client-form select:focus {
  border-color: #2563eb;
  background: #ffffff;
  outline: none;
}

.primary-btn {
  height: 52px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: 0.2s;
}

.primary-btn,
.secondary-btn {
  text-decoration: none;
}

.primary-btn:hover {
  transform: translateY(-2px);
  opacity: 0.95;
}

.secondary-btn {
  height: 52px;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  background: #ffffff;
  color: #2563eb;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: 0.2s;
}

.secondary-btn:hover {
  background: #f8fafc;
  border-color: #2563eb;
}

.compact-btn,
.small-btn {
  min-height: 36px;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 12px;
  white-space: nowrap;
}

.inline-credit-form {
  display: none;
}

.releve-actions {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(92px, 0.75fr);
  gap: 8px;
  align-items: center;
  min-width: 230px;
}

.releve-actions .small-btn {
  width: 100%;
}

.qmp-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(2px);
}

.qmp-modal {
  width: min(720px, calc(100vw - 34px));
  max-height: min(86vh, 760px);
  overflow: auto;
  border: 1px solid #dbe4f0;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.34);
}

.qmp-modal.wide {
  width: min(920px, calc(100vw - 34px));
}

.qmp-modal-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid #e2e8f0;
  background: #ffffff;
}

.qmp-modal-header > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.qmp-modal-header h2 {
  margin: 0;
  color: #0f172a;
  font-size: 22px;
  font-weight: 950;
}

.qmp-modal-header p {
  margin-top: 4px;
  color: #64748b;
  font-size: 13px;
  font-weight: 750;
}

.modal-form {
  padding: 22px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.commercial-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}

.commercial-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8fafc;
  border: 1px solid #edf1f7;
  border-radius: 14px;
  padding: 14px;
}

.commercial-toggle-row {
  width: 100%;
  cursor: pointer;
  text-align: left;
}

.commercial-toggle-row .chevron-open {
  transform: rotate(90deg);
}

.commercial-item strong {
  flex: 1;
  color: #0f172a;
}

.commercial-group {
  background: #ffffff;
  border: 1px solid #edf1f7;
  border-radius: 16px;
  overflow: hidden;
}

.commercial-group .commercial-item {
  border: none;
  border-radius: 0;
}

.commercial-clients {
  border-top: 1px solid #edf1f7;
  padding: 10px;
  display: grid;
  gap: 8px;
}

.commercial-client-row {
  border: 1px solid #edf1f7;
  background: #f8fafc;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  color: #334155;
  font-weight: 800;
}

.commercial-client-row strong,
.client-count.debt {
  color: #991b1b;
}

.commercial-client-row span {
  display: grid;
  gap: 3px;
}

.commercial-client-row small,
.credit-source-tag {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
}

.mini-avatar {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: #f1e8ff;
  color: #7c3aed;
  display: flex;
  align-items: center;
  justify-content: center;
}

.client-count {
  background: #ede9fe;
  color: #7c3aed;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
}

.table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.small-search {
  width: 260px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid #dbe4f0;
  background: #f8fafc;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  color: #64748b;
}

.documents-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.documents-toolbar .small-search {
  flex: 1;
  min-width: 260px;
}

.documents-toolbar .small-search input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
}

.documents-toolbar select {
  min-height: 42px;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  padding: 0 12px;
  background: #ffffff;
  font-weight: 900;
}

.credit-table-wrap {
  overflow-x: auto;
}

@media screen {
  .fournisseurs-page .credits-header,
  .fournisseurs-page .compte-stats {
    flex: 0 0 auto;
  }

  .fournisseurs-page .fournisseur-list-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: 12px;
  }

  .fournisseurs-page .fournisseur-list-card > div:first-child {
    flex: 0 0 auto;
  }

  .fournisseurs-page .fournisseur-list-card > .credit-table-wrap {
    flex: 1;
    min-height: 260px;
    overflow: auto;
    scrollbar-gutter: stable both-edges;
  }

  .fournisseurs-page .credit-table thead th,
  .fournisseur-achat-page .credit-table thead th,
  .compte-page .credit-table thead th {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #ffffff;
  }

  .fournisseur-achat-page {
    height: calc(100vh - 52px);
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .fournisseur-achat-page .credits-header {
    flex: 0 0 auto;
  }

  .fournisseur-achat-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .fournisseur-achat-card .client-form,
  .fournisseur-achat-card h2,
  .fournisseur-achat-card button,
  .fournisseur-achat-card > div:not(.credit-table-wrap) {
    flex: 0 0 auto;
  }

  .fournisseur-achat-card .achat-lines-table {
    flex: 1;
    min-height: 240px;
    overflow: auto;
    scrollbar-gutter: stable both-edges;
  }
}

.credit-table {
  width: 100%;
  border-collapse: collapse;
}

.credit-table thead th {
  text-align: left;
  padding: 16px;
  font-size: 13px;
  color: #64748b;
  border-bottom: 1px solid #edf1f7;
}

.credit-table tbody td {
  padding: 18px 16px;
  border-bottom: 1px solid #f1f5f9;
  color: #0f172a;
  font-size: 14px;
}

.credit-table tbody tr:hover {
  background: #f8fafc;
}

.fournisseur-achat-wrap {
  margin-top: 18px;
}

.achat-search-field {
  position: relative;
  z-index: 5;
}

.achat-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.14);
  padding: 6px;
}

.achat-suggestions button {
  width: 100%;
  border: none;
  background: transparent;
  border-radius: 10px;
  padding: 10px;
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 10px;
  align-items: center;
  text-align: left;
  cursor: pointer;
}

.achat-suggestions button:hover {
  background: #f1f5f9;
}

.achat-suggestions strong {
  color: #0f2a4a;
  font-size: 13px;
}

.achat-suggestions span {
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
}

.achat-suggestions em {
  color: #2563eb;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.fournisseur-achat-table {
  min-width: 780px;
  table-layout: fixed;
}

.fournisseur-achat-table th,
.fournisseur-achat-table td {
  vertical-align: middle;
  word-break: normal;
}

.fournisseur-achat-table th:nth-child(1),
.fournisseur-achat-table td:nth-child(1) {
  width: 115px;
}

.fournisseur-achat-table th:nth-child(2),
.fournisseur-achat-table td:nth-child(2) {
  width: 270px;
}

.fournisseur-achat-table th:nth-child(3),
.fournisseur-achat-table td:nth-child(3) {
  width: 90px;
  text-align: right;
}

.fournisseur-achat-table th:nth-child(4),
.fournisseur-achat-table td:nth-child(4),
.fournisseur-achat-table th:nth-child(5),
.fournisseur-achat-table td:nth-child(5) {
  width: 150px;
  text-align: right;
  white-space: nowrap;
}

.achat-fournisseur-selected {
  color: #0f2a4a;
  background: #e8f2ff;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  padding: 8px 12px;
}

.debt {
  color: #dc2626 !important;
  font-weight: 800;
}

.paid {
  color: #16a34a !important;
  font-weight: 800;
}

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

.actions button {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid #dbe4f0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.2s;
}

.actions button:hover {
  background: #2563eb;
  color: #ffffff;
}

.empty-text,
.empty-row {
  color: #64748b;
  text-align: center;
  padding: 24px;
}

@media (max-width: 1200px) {
  .credits-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .credits-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .credits-page {
    padding: 16px;
  }

  .credits-stats {
    grid-template-columns: 1fr;
  }

  .client-form {
    grid-template-columns: 1fr;
  }

  .client-form .full {
    grid-column: span 1;
  }

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

  .small-search,
  .credits-search {
    width: 100%;
  }
}
.client-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 999;
  display: flex;
  justify-content: flex-end;
  backdrop-filter: blur(4px);
}

.client-drawer {
  width: 520px;
  height: 100vh;
  background: #ffffff;
  overflow-y: auto;
  padding: 28px;
  box-shadow: -10px 0 40px rgba(15, 23, 42, 0.15);
  animation: drawerSlide 0.25s ease;
}

@keyframes drawerSlide {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

.drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
}

.drawer-header h2 {
  font-size: 28px;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 6px;
}

.drawer-header p {
  color: #64748b;
  font-size: 14px;
}

.supplier-detail-drawer .drawer-header {
  position: sticky;
  top: 0;
  z-index: 8;
  background: #ffffff;
  padding: 0 0 14px;
  border-bottom: 1px solid #e5e7eb;
}

.supplier-drawer-return-btn {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(29, 78, 216, 0.12);
}

.supplier-drawer-return-btn:hover {
  background: #dbeafe;
  border-color: #93c5fd;
}

.supplier-drawer-floating-return {
  position: sticky;
  top: 10px;
  float: right;
  z-index: 50;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #fca5a5;
  border-radius: 10px;
  background: #dc2626;
  color: #ffffff;
  padding: 8px 13px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 14px 26px rgba(220, 38, 38, 0.28);
}

.supplier-drawer-floating-return:hover {
  background: #b91c1c;
}

.close-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid #dbe4f0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.2s;
}

.close-btn:hover {
  background: #ef4444;
  color: #ffffff;
}

.drawer-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 26px;
}

.drawer-stat {
  background: #f8fafc;
  border: 1px solid #edf1f7;
  border-radius: 18px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.drawer-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: #dcfce7;
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drawer-icon.blue {
  background: #e8f2ff;
  color: #2563eb;
}

.drawer-stat strong {
  display: block;
  font-size: 18px;
  font-weight: 900;
  color: #0f172a;
}

.drawer-stat p {
  font-size: 13px;
  color: #64748b;
  margin-top: 4px;
}

.drawer-section {
  margin-top: 30px;
}

.drawer-section h3 {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 18px;
}

.drawer-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.drawer-info-grid label {
  display: block;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 6px;
}

.drawer-info-grid strong {
  color: #0f172a;
  font-size: 15px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

.small-btn {
  height: 40px;
  padding: 0 16px;
  font-size: 13px;
}

.paiements-list {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.paiement-form {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: 10px;
}

.paiement-form input,
.paiement-form select {
  height: 42px;
  border: 1px solid #dbe4f0;
  background: #f8fafc;
  border-radius: 12px;
  padding: 0 12px;
  font-weight: 800;
  color: #0f172a;
}

.paiement-form input:nth-child(3),
.paiement-form button {
  grid-column: span 2;
}

.retour-fournisseur-form {
  grid-template-columns: 1.1fr 1.3fr 145px 110px 130px;
}

.retour-fournisseur-form input:nth-child(3),
.retour-fournisseur-form button {
  grid-column: auto;
}

.retour-fournisseur-form .full {
  grid-column: 1 / -1;
}

.retour-lines-preview {
  display: grid;
  gap: 8px;
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  background: #f8fafc;
  padding: 10px;
}

.retour-lines-preview div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 8px;
}

.retour-lines-preview div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.retour-lines-preview span {
  color: #0f172a;
  font-weight: 900;
}

.retour-lines-preview strong {
  color: #1d4ed8;
  white-space: nowrap;
}

.retour-lines-preview button {
  grid-column: auto;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: #fee2e2;
  color: #991b1b;
  font-weight: 900;
  padding: 0 10px;
}

.credit-note {
  margin-top: 10px;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.paiement-item {
  background: #f8fafc;
  border: 1px solid #edf1f7;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.paiement-item strong {
  display: block;
  color: #0f172a;
  font-size: 16px;
}

.paiement-item p {
  font-size: 13px;
  color: #64748b;
  margin-top: 4px;
}

.paiement-item span {
  color: #64748b;
  font-size: 13px;
}

.paiement-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.paiement-actions a {
  color: #2563eb;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.paiement-actions button {
  border: none;
  border-radius: 8px;
  background: #fee2e2;
  color: #991b1b;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 900;
}

.document-page {
  min-height: 100vh;
  background: #eef3f8;
  padding: 24px;
}

.document-toolbar {
  max-width: 1120px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.document-toolbar button,
.document-filters button {
  height: 42px;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  font-weight: 900;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.document-toolbar button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

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

.document-filters input {
  height: 42px;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  background: #ffffff;
  padding: 0 12px;
  font-weight: 800;
}

.document-sheet {
  max-width: 1120px;
  margin: 0 auto;
  background: #ffffff;
  color: #0f172a;
  border-radius: 8px;
  border: 1px solid #dbe4f0;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.09);
  padding: 34px;
}

.document-header {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  border-bottom: 3px solid #0f2a4a;
  padding-bottom: 22px;
  margin-bottom: 24px;
}

.document-header > div {
  display: grid;
  gap: 5px;
}

.document-brand {
  max-width: 270px;
}

.document-logo-img {
  width: 150px;
  height: 92px;
  object-fit: contain;
  object-position: left center;
  display: block;
  margin-bottom: 8px;
}

.document-header strong {
  font-size: 18px;
  color: #0f2a4a;
}

.document-header span {
  color: #475569;
  font-size: 13px;
}

.document-title {
  text-align: right;
  align-content: start;
}

.document-title h1 {
  color: #0f2a4a;
  font-size: 28px;
  font-weight: 950;
  margin-bottom: 8px;
}

.document-info-grid,
.document-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.document-summary-grid {
  grid-template-columns: repeat(5, 1fr);
}

.document-info,
.document-summary {
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}

.document-info span,
.document-summary span,
.document-final span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 6px;
}

.document-info strong,
.document-summary strong {
  color: #0f172a;
  font-size: 15px;
}

.document-summary.accent {
  background: #e8f2ff;
  border-color: #2563eb;
}

.document-summary.accent strong,
.document-final strong {
  color: #2563eb;
}

.document-block {
  margin-top: 22px;
}

.document-block h2 {
  color: #0f2a4a;
  font-size: 18px;
  margin-bottom: 12px;
}

.document-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.document-table th {
  background: #0f2a4a;
  color: #ffffff;
  text-align: left;
  padding: 10px;
}

.document-table td {
  border-bottom: 1px solid #e2e8f0;
  padding: 10px;
  vertical-align: top;
}

.document-empty {
  text-align: center;
  color: #64748b;
}

.doc-badge {
  display: inline-flex;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 900;
}

.doc-badge-debit {
  background: #fee2e2;
  color: #991b1b;
}

.doc-badge-credit {
  background: #dcfce7;
  color: #166534;
}

.doc-badge-warning {
  background: #fef3c7;
  color: #92400e;
}

.document-subrow td {
  background: #f8fafc;
  padding-top: 6px;
}

.document-articles {
  display: grid;
  gap: 4px;
  color: #475569;
  font-size: 11px;
}

.document-final {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
  gap: 18px;
}

.document-final > div {
  min-width: 240px;
  border: 2px solid #2563eb;
  border-radius: 8px;
  padding: 14px;
  text-align: right;
}

.document-final strong {
  font-size: 22px;
}

.document-last-payment {
  display: grid;
  gap: 3px;
}

.document-last-payment b {
  color: #2563eb;
  font-size: 20px;
}

.document-last-payment small {
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}

.document-observation {
  margin-top: 24px;
  color: #334155;
  font-weight: 700;
}

.document-signatures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  margin-top: 54px;
}

.document-signatures div {
  border-top: 1px solid #0f172a;
  padding-top: 10px;
  text-align: center;
  font-weight: 900;
  color: #0f2a4a;
}

.receipt-hero {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 14px;
  margin-bottom: 18px;
}

.receipt-hero > div {
  border: 1px solid #c7d7ee;
  border-radius: 10px;
  background: linear-gradient(135deg, #f8fbff, #eef6ff);
  padding: 18px;
}

.receipt-hero span,
.receipt-panel h2,
.receipt-note h2,
.receipt-certification strong {
  color: #0f2a4a;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0;
}

.receipt-hero strong {
  display: block;
  color: #0f172a;
  font-size: 30px;
  font-weight: 950;
  margin: 7px 0 4px;
}

.receipt-hero small {
  color: #475569;
  font-weight: 800;
}

.receipt-two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}

.receipt-panel {
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  padding: 14px;
  background: #ffffff;
}

.receipt-panel h2 {
  margin: 0 0 12px;
}

.receipt-panel .document-info {
  margin-bottom: 8px;
}

.receipt-note {
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  background: #f8fafc;
  padding: 14px 16px;
  margin-top: 12px;
}

.receipt-note h2 {
  margin: 0 0 8px;
}

.receipt-note p {
  margin: 0;
  color: #334155;
  font-weight: 800;
}

.receipt-certification {
  margin-top: 18px;
  border-left: 5px solid #0f2a4a;
  background: #f8fbff;
  padding: 14px 16px;
  display: grid;
  gap: 6px;
}

.receipt-certification span {
  color: #334155;
  font-weight: 750;
  line-height: 1.5;
}

.receipt-signatures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 66px;
}

.receipt-signatures div {
  min-height: 82px;
  border-top: 2px solid #0f172a;
  padding-top: 10px;
  text-align: center;
}

.receipt-signatures span {
  display: block;
  color: #0f2a4a;
  font-weight: 950;
  margin-bottom: 5px;
}

.receipt-signatures strong {
  color: #64748b;
  font-size: 12px;
  text-transform: uppercase;
}

.dashboard-pro {
  min-height: 100%;
  display: grid;
  gap: 20px;
}

.dashboard-pro-hero {
  min-height: 150px;
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  background: linear-gradient(135deg, #0f2a4a 0%, #123b68 54%, #f8fafc 54%);
  color: #ffffff;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 18px 40px rgba(15, 42, 74, 0.12);
}

.dashboard-pro-hero .eyebrow {
  color: #bfdbfe;
}

.dashboard-pro-hero h1 {
  margin: 6px 0;
  color: #ffffff;
  font-size: 31px;
}

.dashboard-pro-hero p {
  color: #dbeafe;
  margin: 0;
  font-weight: 750;
}

.dashboard-pro-actions {
  min-width: 290px;
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.dashboard-pro-actions > div {
  background: #ffffff;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.dashboard-pro-actions span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.dashboard-pro-actions strong {
  display: block;
  color: #0f2a4a;
  font-size: 20px;
  font-weight: 950;
  margin-top: 4px;
}

.dashboard-pro-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(140px, 1fr));
  gap: 14px;
}

.dashboard-pro-card,
.dashboard-pro-panel {
  background: #ffffff;
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.07);
}

.dashboard-pro-card {
  min-height: 138px;
  padding: 16px;
  display: grid;
  align-content: start;
  gap: 8px;
}

.dashboard-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: grid;
  place-items: center;
}

.dashboard-pro-card span,
.dashboard-pro-panel span {
  color: #64748b;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.dashboard-pro-card strong {
  color: #0f172a;
  font-size: 18px;
  font-weight: 950;
}

.dashboard-pro-card small,
.dashboard-pro-panel small,
.dashboard-pro-panel p {
  color: #64748b;
  font-weight: 750;
}

.dashboard-pro-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 18px;
}

.dashboard-pro-panel {
  padding: 20px;
}

.dashboard-pro-focus {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}

.dashboard-pro-focus h2 {
  margin: 8px 0;
  color: #0f2a4a;
  font-size: 30px;
}

.dashboard-pro-meter {
  min-width: 210px;
  border-radius: 12px;
  background: #eef6ff;
  color: #2563eb;
  padding: 18px;
  display: grid;
  gap: 6px;
}

.dashboard-pro-meter strong {
  color: #0f172a;
  font-size: 20px;
  font-weight: 950;
}

.dashboard-pro-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.dashboard-pro-split > div {
  background: #f8fafc;
  border-radius: 10px;
  padding: 14px;
}

.dashboard-pro-split strong {
  display: block;
  color: #0f172a;
  font-size: 18px;
  font-weight: 950;
  margin: 8px 0 4px;
}

.dashboard-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

.dashboard-section-title h2 {
  margin: 0;
  color: #0f2a4a;
}

.dashboard-section-title p {
  margin: 4px 0 0;
  color: #64748b;
}

.dashboard-section-title > strong {
  color: #0f2a4a;
  font-size: 21px;
}

.dashboard-badge {
  display: inline-flex;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 950;
  background: #e0f2fe;
  color: #075985;
}

.dashboard-badge.decaissement {
  background: #fee2e2;
  color: #991b1b;
}

.dashboard-badge.encaissement {
  background: #dcfce7;
  color: #166534;
}

@media (max-width: 1200px) {
  .dashboard-pro-kpis {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
  }
}

@media (max-width: 760px) {
  .receipt-hero,
  .receipt-two-columns,
  .receipt-signatures,
  .dashboard-pro-grid,
  .dashboard-pro-split {
    grid-template-columns: 1fr;
  }

  .dashboard-pro-hero,
  .dashboard-pro-actions,
  .dashboard-pro-focus,
  .dashboard-section-title {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-pro-kpis {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .document-info-grid,
  .document-summary-grid {
    grid-template-columns: 1fr 1fr;
  }

  .document-header {
    flex-direction: column;
  }

  .document-title {
    text-align: left;
  }
}

@media print {
  body {
    background: #ffffff !important;
  }

  .sidebar,
  .document-toolbar,
  .sidebar-user {
    display: none !important;
  }

  .app-layout,
  .main-content,
  .document-page {
    display: block !important;
    width: 100% !important;
    min-height: auto !important;
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .document-sheet {
    max-width: none !important;
    width: 100% !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 12mm !important;
  }

  .document-table th,
  .document-table td {
    padding: 7px;
  }
}

@media (max-width: 768px) {
  .client-drawer {
    width: 100%;
  }

  .drawer-stats,
  .drawer-info-grid {
    grid-template-columns: 1fr;
  }
}
.compte-page {
  width: 100%;
  min-height: 100vh;
  padding: 24px;
  background: #f4f7fb;
}

@media screen {
  .main-content:has(.compte-page),
  .workspace-window-body:has(.compte-page) {
    overflow: hidden;
  }

  .compte-page {
    height: calc(100vh - 52px);
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
  }

  .workspace-window-body .compte-page {
    height: 100%;
  }
}

.compte-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.compte-quick-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.compte-action-btn {
  min-height: 42px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 900;
  cursor: pointer;
}

.compte-action-btn.in {
  color: #15803d;
}

.compte-action-btn.out {
  color: #dc2626;
}

.compte-action-btn.transfer {
  color: #2563eb;
}

.compte-action-btn.supplier {
  color: #7c3aed;
}

.compte-search {
  width: 420px;
  height: 46px;
  background: #fff;
  border: 1px solid #dde5f0;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  color: #64748b;
}

.compte-search input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
}

.new-op-btn {
  height: 46px;
  border: none;
  border-radius: 14px;
  padding: 0 18px;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #fff;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.compte-header h1 {
  font-size: 30px;
  font-weight: 900;
  color: #0f172a;
}

.compte-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.compte-date-range {
  min-height: 40px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #334155;
  font-weight: 800;
  white-space: nowrap;
}

.compte-header p {
  color: #64748b;
  margin-top: 6px;
}

.compte-subnav {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  padding: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border: none;
  border-bottom: 1px solid #dde5f0;
  border-radius: 0;
  background: transparent;
}

.compte-subnav button {
  min-height: 38px;
  border: none;
  border-radius: 0;
  padding: 0 16px;
  background: transparent;
  color: #475569;
  font-weight: 900;
  white-space: nowrap;
}

.compte-subnav button.active {
  background: transparent;
  color: #2563eb;
  box-shadow: inset 0 -2px #2563eb;
}

.compte-stats,
.solde-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 22px;
}

.compte-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  margin-top: 18px;
  min-width: 0;
}

.compte-dashboard-main,
.compte-dashboard-side {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
}

.compte-section-card,
.compte-health-card,
.compte-side-link {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
  box-sizing: border-box;
}

.compte-section-card {
  padding: 16px;
  min-width: 0;
}

.compte-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.compte-section-head h2 {
  margin: 0;
  color: #0f172a;
  font-size: 16px;
}

.compte-section-head p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12px;
}

.compte-section-head button {
  border: none;
  background: transparent;
  color: #2563eb;
  font-weight: 900;
  cursor: pointer;
}

.compte-account-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.compte-account-item {
  min-width: 0;
  padding: 12px;
  border-radius: 8px;
  background: #f8fafc;
  display: flex;
  gap: 10px;
  align-items: center;
}

.compte-account-item .solde-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  flex: 0 0 38px;
}

.compte-account-item div {
  min-width: 0;
}

.compte-account-item small,
.compte-account-item strong,
.compte-account-item em {
  display: block;
  font-style: normal;
}

.compte-account-item small,
.compte-account-item em {
  color: #64748b;
  font-size: 11px;
}

.compte-account-item strong {
  color: #0f172a;
  margin: 3px 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.compte-recent-table {
  max-width: 100%;
  overflow: auto;
}

.compte-health-card {
  padding: 18px;
  display: flex;
  gap: 14px;
  align-items: center;
  background: #f0fdf4;
}

.compte-health-score {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex: 0 0 64px;
  display: grid;
  place-items: center;
  background: #22c55e;
  color: #ffffff;
  font-weight: 900;
}

.compte-health-card span,
.compte-health-card strong,
.compte-health-card p {
  display: block;
}

.compte-health-card span {
  color: #64748b;
  font-size: 12px;
}

.compte-health-card strong {
  color: #0f172a;
  margin-top: 4px;
}

.compte-health-card p {
  color: #166534;
  margin: 5px 0 0;
  font-size: 11px;
}

.compte-side-link {
  width: 100%;
  padding: 14px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 20px;
  gap: 10px;
  align-items: center;
  text-align: left;
  cursor: pointer;
}

.compte-side-link.blue {
  background: #eff6ff;
  color: #1d4ed8;
}

.compte-side-link.green {
  background: #f0fdf4;
  color: #15803d;
}

.compte-side-link strong,
.compte-side-link small {
  display: block;
}

.compte-side-link strong {
  color: #0f172a;
  font-size: 13px;
}

.compte-side-link small {
  margin-top: 3px;
  color: #64748b;
  font-size: 11px;
}

.compte-stat-card,
.solde-card,
.operation-panel,
.historique-panel {
  background: #fff;
  border-radius: 8px;
  padding: 18px;
  border: 1px solid #edf1f7;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.compte-stat-card,
.solde-card {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cash-report-panel {
  margin-top: 0;
  background: #fff;
  border-radius: 22px;
  padding: 22px;
  border: 1px solid #edf1f7;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.cash-report-filters {
  display: grid;
  grid-template-columns: 1.3fr 160px 160px 120px;
  gap: 10px;
  margin-bottom: 14px;
}

.cash-report-filters select,
.cash-report-filters input {
  min-height: 40px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 0 10px;
  font-weight: 800;
}

.cash-report-summary {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.cash-report-mini {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px;
  background: #f8fafc;
}

.cash-report-mini span,
.cash-report-mini strong {
  display: block;
}

.cash-report-mini span {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.cash-report-mini strong {
  margin-top: 5px;
  color: #0f172a;
  font-size: 14px;
}

.cash-report-mini.in strong {
  color: #16a34a;
}

.cash-report-mini.out strong {
  color: #dc2626;
}

.cash-report-mini.strong {
  border-color: #2563eb;
  background: #eff6ff;
}

.compte-stat-icon,
.solde-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.compte-stat-icon.green,
.solde-icon.green {
  background: #dcfce7;
  color: #16a34a;
}

.compte-stat-icon.blue,
.solde-icon.blue {
  background: #e8f2ff;
  color: #2563eb;
}

.compte-stat-icon.red {
  background: #fee2e2;
  color: #dc2626;
}

.compte-stat-icon.purple,
.solde-icon.purple {
  background: #f1e8ff;
  color: #7c3aed;
}

.solde-icon.orange {
  background: #fff3df;
  color: #f59e0b;
}

.compte-stat-card h3,
.solde-card strong {
  font-size: 20px;
  font-weight: 900;
  color: #0f172a;
}

.compte-analytics-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.9fr) minmax(260px, 0.7fr);
  gap: 14px;
  margin-top: 14px;
  min-width: 0;
}

.compte-chart-card,
.compte-alert-card {
  min-width: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}

.compte-chart-card h2,
.compte-alert-card h2 {
  margin: 0 0 12px;
  color: #0f172a;
  font-size: 15px;
}

.compte-alert-card h2 b {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ef4444;
  color: #ffffff;
  font-size: 11px;
}

.compte-chart-canvas {
  height: 210px;
}

.compte-funds-layout {
  min-height: 210px;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.compte-donut-wrap {
  height: 150px;
  position: relative;
}

.compte-donut-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
}

.compte-donut-center span,
.compte-donut-center small {
  color: #64748b;
  font-size: 10px;
}

.compte-donut-center strong {
  color: #0f172a;
  font-size: 12px;
}

.compte-funds-legend {
  display: grid;
  gap: 10px;
}

.compte-funds-legend div {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  gap: 4px 7px;
  align-items: center;
}

.compte-funds-legend i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  grid-row: span 2;
}

.compte-funds-legend span {
  color: #334155;
  font-size: 11px;
  font-weight: 800;
}

.compte-funds-legend strong {
  color: #64748b;
  font-size: 10px;
}

.compte-alert-list {
  display: grid;
  gap: 8px;
}

.compte-alert-list button {
  min-width: 0;
  min-height: 48px;
  border: none;
  background: transparent;
  padding: 8px 0;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 18px;
  gap: 8px;
  align-items: center;
  color: #f97316;
  text-align: left;
  cursor: pointer;
}

.compte-alert-list span {
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}

.compte-stat-card p,
.solde-card p {
  color: #64748b;
  margin-top: 4px;
  font-size: 14px;
}

.compte-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 22px;
  margin-top: 22px;
  grid-template-areas:
    "actions report"
    "form report"
    "history history";
  align-items: start;
}

.compte-operations-grid {
  grid-template-areas: "actions form";
}

@media screen {
  .compte-grid {
    flex: 1;
    min-height: 0;
    align-items: start;
  }

  .operation-panel {
    grid-area: actions;
    position: sticky;
    top: 0;
    z-index: 12;
  }

  .compte-grid > .credit-card {
    grid-area: form;
    align-self: start;
  }

  .cash-report-panel {
    grid-area: report;
    min-height: 0;
    max-height: min(560px, calc(100vh - 340px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .cash-report-panel .table-header,
  .cash-report-panel .cash-report-filters,
  .cash-report-panel .cash-report-summary {
    flex: 0 0 auto;
  }

  .cash-report-panel .credit-table-wrap {
    flex: 1;
    min-height: 220px;
    overflow: auto;
    scrollbar-gutter: stable both-edges;
  }

  .compte-page > .cash-report-panel,
  .compte-page > .historique-panel {
    flex: 1;
    min-height: 0;
    margin-top: 22px;
    max-height: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .historique-panel {
    grid-area: history;
    min-height: 0;
    max-height: 430px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .historique-panel .table-header {
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 10;
    background: #ffffff;
  }

  .historique-panel .credit-table-wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
    scrollbar-gutter: stable both-edges;
  }
}

.panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #0f172a;
  margin-bottom: 18px;
}

.panel-title h2,
.historique-panel h2 {
  font-size: 22px;
  font-weight: 900;
}

.operation-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.operation-btn {
  border: none;
  border-radius: 18px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  text-align: left;
}

.operation-btn strong {
  display: block;
  font-size: 16px;
}

.operation-btn span {
  font-size: 13px;
  opacity: 0.85;
}

.operation-btn.encaissement {
  background: #dcfce7;
  color: #166534;
}

.operation-btn.decaissement {
  background: #fee2e2;
  color: #991b1b;
}

.badge-in,
.badge-out,
.badge-transfer {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.badge-in {
  background: #dcfce7;
  color: #166534;
}

.badge-out {
  background: #fee2e2;
  color: #991b1b;
}

.badge-transfer {
  background: #ede9fe;
  color: #5b21b6;
}

.depenses-grid {
  grid-template-columns: 420px 1fr;
}

.expense-control-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(420px, 1.15fr);
  gap: 18px;
  margin: 0 0 18px;
}

.expense-limit-meter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 10px;
}

.expense-limit-meter div,
.fixed-charge-summary {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 14px;
  padding: 12px;
}

.expense-limit-meter span,
.fixed-charge-summary span,
.fixed-charge-summary small {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.expense-limit-meter strong,
.fixed-charge-summary strong {
  display: block;
  margin-top: 5px;
  color: #0f172a;
  font-size: 18px;
  font-weight: 950;
}

.expense-progress {
  height: 9px;
  overflow: hidden;
  border-radius: 99px;
  background: #e2e8f0;
}

.expense-progress span {
  display: block;
  height: 100%;
  max-width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #f59e0b, #ef4444);
}

.limit-muted,
.limit-danger {
  margin: 9px 0 12px;
  font-size: 12px;
  font-weight: 900;
}

.limit-muted {
  color: #475569;
}

.limit-danger {
  color: #dc2626;
}

.compact-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fixed-charge-summary {
  margin: 12px 0;
}

.fixed-charge-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  max-height: 240px;
  overflow: auto;
}

.fixed-charge-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 12px;
  padding: 10px;
}

.fixed-charge-list strong,
.fixed-charge-list span {
  display: block;
}

.fixed-charge-list strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 950;
}

.fixed-charge-list span {
  margin-top: 3px;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

.fixed-charge-list b {
  color: #dc2626;
  font-size: 12px;
  white-space: nowrap;
}

.fixed-charge-list button {
  border: 1px solid #2563eb;
  border-radius: 10px;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.depense-form-card {
  align-self: start;
}

.danger-line-btn {
  border: none;
  border-radius: 10px;
  padding: 8px 11px;
  background: #fee2e2;
  color: #991b1b;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.danger-line-btn:hover {
  background: #fecaca;
}

@media (max-width: 1200px) {
  .compte-stats,
  .solde-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .compte-grid,
  .depenses-grid,
  .expense-control-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "actions"
      "form"
      "report"
      "history";
  }

  .cash-report-panel {
    max-height: none;
  }

  .cash-report-filters,
  .cash-report-summary {
    grid-template-columns: 1fr 1fr;
  }

  .compte-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .compte-analytics-grid {
    grid-template-columns: 1fr 1fr;
  }

  .compact-form,
  .expense-limit-meter,
  .fixed-charge-list article {
    grid-template-columns: 1fr;
  }

  .compte-chart-card.wide {
    grid-column: 1 / -1;
  }

  .compte-dashboard-side {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .compte-page {
    padding: 16px;
  }

  .compte-topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .compte-header {
    align-items: stretch;
    flex-direction: column;
  }

  .compte-date-range {
    align-self: flex-start;
  }

  .compte-quick-actions {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 3px;
  }

  .compte-action-btn,
  .compte-quick-actions .new-op-btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .compte-search {
    width: 100%;
  }

  .compte-stats,
  .solde-grid {
    grid-template-columns: 1fr;
  }

  .compte-account-strip,
  .compte-dashboard-side,
  .compte-analytics-grid {
    grid-template-columns: 1fr;
  }

  .compte-chart-card.wide {
    grid-column: auto;
  }

  .compte-funds-layout {
    grid-template-columns: 130px minmax(0, 1fr);
  }

  .compte-section-card {
    padding: 12px;
  }

  .compte-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .compte-section-head button {
    align-self: flex-start;
    padding: 0;
  }
}
.ventes-pro-page {
  width: 100%;
  min-height: 100vh;
  padding: 24px;
  background: #f4f7fb;
}

.ventes-pro-topbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.ventes-pro-search {
  width: 460px;
  height: 46px;
  background: #fff;
  border: 1px solid #dde5f0;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  color: #64748b;
}

.ventes-pro-search input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
}

.ventes-refresh-btn {
  height: 46px;
  border: none;
  border-radius: 14px;
  padding: 0 18px;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #fff;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.ventes-pro-header p {
  color: #64748b;
  font-weight: 700;
}

.ventes-pro-header h1 {
  font-size: 30px;
  font-weight: 900;
  color: #0f172a;
  margin: 4px 0;
}

.ventes-pro-header span {
  color: #64748b;
}

.ventes-pro-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 22px 0;
}

.ventes-stat-card,
.ventes-pro-card {
  background: #fff;
  border-radius: 22px;
  padding: 22px;
  border: 1px solid #edf1f7;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.ventes-stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ventes-stat-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ventes-stat-icon.blue {
  background: #e8f2ff;
  color: #2563eb;
}

.ventes-stat-icon.green {
  background: #dcfce7;
  color: #16a34a;
}

.ventes-stat-icon.purple {
  background: #f1e8ff;
  color: #7c3aed;
}

.ventes-stat-icon.orange {
  background: #fff3df;
  color: #f59e0b;
}

.ventes-stat-card h3 {
  font-size: 22px;
  font-weight: 900;
  color: #0f172a;
}

.ventes-stat-card p {
  color: #64748b;
  font-size: 14px;
}

.ventes-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.ventes-card-header h2 {
  font-size: 22px;
  font-weight: 900;
  color: #0f172a;
}

.ventes-card-header p {
  color: #64748b;
}

.ventes-pro-table-wrap {
  overflow-x: auto;
}

.ventes-pro-table {
  width: 100%;
  border-collapse: collapse;
}

.ventes-pro-table th {
  text-align: left;
  padding: 16px;
  font-size: 13px;
  color: #64748b;
  border-bottom: 1px solid #edf1f7;
}

.ventes-pro-table td {
  padding: 18px 16px;
  border-bottom: 1px solid #f1f5f9;
  color: #0f172a;
  font-size: 14px;
}

.ventes-pro-table tr:hover {
  background: #f8fafc;
}

.vente-badge {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.vente-badge.comptoir {
  background: #dcfce7;
  color: #166534;
}

.vente-badge.credit {
  background: #fff3df;
  color: #b45309;
}

.livraison-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-size: 11px;
  font-weight: 900;
}

.livraison-badge.non-livre {
  background: #fee2e2;
  color: #b91c1c;
}

.vente-mode {
  background: #eef2ff;
  color: #3730a3;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.vente-eye-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid #dbe4f0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.vente-eye-btn:hover {
  background: #2563eb;
  color: #fff;
}

.vente-action-group {
  display: flex;
  gap: 6px;
  align-items: center;
}

.livraison-action-btn {
  color: #166534;
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.vente-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 999;
  display: flex;
  justify-content: flex-end;
  backdrop-filter: blur(4px);
}

.vente-drawer {
  width: 520px;
  height: 100vh;
  background: #fff;
  overflow-y: auto;
  padding: 28px;
  box-shadow: -10px 0 40px rgba(15, 23, 42, 0.15);
}

.vente-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.vente-drawer-header h2 {
  font-size: 26px;
  font-weight: 900;
  color: #0f172a;
}

.vente-drawer-header p {
  color: #64748b;
}

.vente-drawer-header button,
.vente-drawer-actions button {
  border: 1px solid #dbe4f0;
  background: #fff;
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
}

.vente-drawer-actions {
  margin: 18px 0;
}

.vente-drawer-actions button {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #2563eb;
  color: #fff;
  border: none;
}

.vente-drawer-actions button.active {
  background: #0f172a;
}

.vente-drawer-header .drawer-return-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  margin-right: 8px;
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.vente-drawer-header .drawer-return-btn:hover {
  border-color: #2563eb;
  background: #2563eb;
  color: #ffffff;
}

.sales-detail-drawer .drawer-return-wide-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: calc(100% - 36px);
  min-height: 38px;
  margin: 0 18px 10px;
  border: 1px solid #bfdbfe;
  border-radius: 7px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
}

.sales-detail-drawer .drawer-return-wide-btn:hover {
  border-color: #2563eb;
  background: #2563eb;
  color: #ffffff;
}

.document-edit-panel {
  display: grid;
  gap: 10px;
  margin: 14px 0 18px;
}

.document-edit-panel input {
  width: 100%;
  border: 1px solid #dbe4f0;
  background: #f8fafc;
  border-radius: 12px;
  padding: 11px 12px;
  font-weight: 800;
  color: #0f172a;
}

.a4-document {
  width: 794px;
  min-height: 1123px;
  margin: 0 auto;
  background: #ffffff;
  color: #0f172a;
  padding: 44px;
  font-family: Arial, Helvetica, sans-serif;
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.12);
}

.a4-header {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  border-bottom: 2px solid #0f172a;
  padding-bottom: 22px;
}

.a4-logo {
  width: 120px;
  display: block;
  margin-bottom: 8px;
}

.a4-header p,
.a4-meta-grid p,
.a4-object,
.a4-note {
  margin: 4px 0;
  font-size: 14px;
}

.a4-title {
  text-align: right;
  display: grid;
  gap: 8px;
  align-content: start;
}

.a4-title h1 {
  font-size: 30px;
  margin: 0;
  letter-spacing: 0;
}

.a4-title strong {
  font-size: 18px;
}

.a4-title span {
  font-size: 13px;
  color: #475569;
  font-weight: 800;
}

.a4-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 28px;
}

.a4-meta-grid > div {
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  padding: 16px;
}

.a4-meta-grid h3 {
  margin: 0 0 10px;
  font-size: 16px;
}

.a4-object {
  margin-top: 18px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  padding: 14px 16px;
}

.a4-lines {
  width: 100%;
  border-collapse: collapse;
  margin-top: 24px;
  font-size: 14px;
}

.a4-lines th {
  background: #0f172a;
  color: white;
  text-align: left;
  padding: 12px 10px;
}

.a4-lines td {
  border: 1px solid #dbe4f0;
  padding: 11px 10px;
  vertical-align: top;
}

.a4-lines th:nth-child(n + 3),
.a4-lines td:nth-child(n + 3) {
  text-align: right;
}

.a4-total {
  width: 320px;
  margin: 24px 0 0 auto;
  border: 2px solid #0f172a;
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  font-weight: 900;
}

.a4-note {
  margin-top: 24px;
  background: #f8fafc;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  padding: 14px 16px;
}

.a4-signatures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-top: 80px;
  font-weight: 900;
}

.a4-signatures.single {
  grid-template-columns: 1fr;
  margin-left: auto;
  width: 260px;
}

.a4-signatures div {
  border-top: 1px solid #0f172a;
  padding-top: 10px;
  text-align: center;
}

.cash-receipt-sheet .a4-signatures {
  grid-template-columns: repeat(3, 1fr);
  gap: 42px;
}

.document-page {
  min-height: 100vh;
  background: #e5e7eb;
  padding: 24px;
  display: grid;
  gap: 18px;
  justify-items: center;
}

.document-toolbar,
.document-form-panel {
  width: min(100%, 794px);
  background: #ffffff;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.document-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.document-toolbar button,
.document-toolbar a {
  border: none;
  background: #0f172a;
  color: #ffffff;
  border-radius: 8px;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
}

.document-form-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.document-form-panel input {
  width: 100%;
  border: 1px solid #dbe4f0;
  background: #f8fafc;
  border-radius: 8px;
  padding: 11px 12px;
  font-weight: 800;
  color: #0f172a;
}

.document-form-panel input:last-child {
  grid-column: span 2;
}

.document-form-panel button {
  min-height: 42px;
  border: none;
  border-radius: 8px;
  background: #2563eb;
  color: #ffffff;
  font-weight: 900;
}

.ventes-empty,
.ticket-empty {
  text-align: center;
  color: #64748b;
  padding: 24px;
}

.ventes-tabs {
  display: flex;
  gap: 10px;
  margin: 16px 0;
  background: #ffffff;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  padding: 8px;
}

.ventes-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  border: none;
  border-radius: 7px;
  background: #f1f5f9;
  color: #334155;
  padding: 0 14px;
  font-weight: 900;
}

.ventes-tabs button.active {
  background: #2563eb;
  color: #ffffff;
}

.retour-message {
  margin-top: 12px;
  border-radius: 8px;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 12px 14px;
  font-weight: 900;
}

.retour-drawer {
  width: min(980px, 100%);
}

.retour-form {
  display: grid;
  gap: 14px;
}

.retour-config-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.retour-config-grid label,
.retour-note {
  display: grid;
  gap: 7px;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

.retour-config-grid input,
.retour-config-grid select,
.retour-note textarea,
.retour-lines input,
.retour-lines select {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 9px 10px;
  color: #0f172a;
  font-weight: 800;
}

.retour-note textarea {
  min-height: 90px;
  resize: vertical;
}

.retour-lines {
  overflow: auto;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.retour-lines table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
}

.retour-lines th,
.retour-lines td {
  border-bottom: 1px solid #e2e8f0;
  padding: 10px;
  text-align: left;
  font-size: 13px;
}

.retour-lines th {
  background: #f8fafc;
  color: #334155;
  text-transform: uppercase;
  font-size: 12px;
}

.retour-lines td span {
  display: block;
  color: #64748b;
  margin-top: 3px;
}

.retour-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border: none;
  border-radius: 8px;
  background: #16a34a;
  color: #ffffff;
  font-weight: 900;
}

.avoir-sheet {
  width: min(900px, 100%);
  min-height: 100vh;
  background: #ffffff;
  padding: 22px;
  overflow: auto;
}

.avoir-print {
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  padding: 22px;
}

.avoir-print header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 2px solid #0f172a;
  padding-bottom: 14px;
  margin-bottom: 16px;
}

.avoir-print header h1 {
  margin: 0 0 8px;
  font-size: 26px;
}

.avoir-print header strong,
.avoir-print header span {
  display: block;
  text-align: right;
}

.avoir-print section p {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e2e8f0;
  padding: 9px 0;
}

.devis-bc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.85fr);
  gap: 16px;
}

.devis-form-card,
.devis-history-card {
  background: #ffffff;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  padding: 16px;
}

.devis-form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

.devis-form-grid label {
  display: grid;
  gap: 7px;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

.devis-form-grid input,
.devis-form-grid select,
.devis-lines input,
.devis-lines select {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 9px 10px;
  color: #0f172a;
  font-weight: 800;
}

.devis-lines {
  overflow: auto;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.devis-lines table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
}

.devis-lines th,
.devis-lines td {
  border-bottom: 1px solid #e2e8f0;
  padding: 9px;
  text-align: left;
  font-size: 13px;
}

.devis-lines th {
  background: #f8fafc;
  color: #334155;
  text-transform: uppercase;
  font-size: 12px;
}

.devis-lines button {
  border: none;
  border-radius: 7px;
  background: #fee2e2;
  color: #991b1b;
  width: 30px;
  height: 30px;
  font-weight: 900;
}

.doc-article-search {
  position: relative;
  min-width: 220px;
}

.doc-search-results {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: 240px;
  overflow: auto;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16);
}

.doc-search-results button {
  width: 100%;
  height: auto;
  display: grid;
  gap: 3px;
  text-align: left;
  border: none;
  border-radius: 0;
  background: #ffffff;
  color: #0f172a;
  padding: 10px 11px;
}

.doc-search-results button:hover {
  background: #eff6ff;
}

.doc-search-results span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.devis-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.devis-actions button {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #1d4ed8;
  padding: 10px 13px;
  font-weight: 900;
}

.devis-actions button[type="submit"] {
  background: #16a34a;
  color: #ffffff;
  border-color: #16a34a;
}

.devis-actions strong {
  margin-left: auto;
  color: #0f172a;
  font-size: 18px;
}

@media (max-width: 1180px) {
  .devis-bc-layout,
  .devis-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .retour-config-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1200px) {
  .ventes-pro-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .ventes-pro-page {
    padding: 16px;
  }

  .ventes-pro-topbar {
    flex-direction: column;
  }

  .ventes-pro-search {
    width: 100%;
  }

  .ventes-pro-stats {
    grid-template-columns: 1fr;
  }

  .vente-drawer {
    width: 100%;
  }
}
.ticket-paper {
  width: 260px;
  margin: 0 auto;
  background: #fff;
  color: #111;
  padding: 6px 8px 8px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10.5px;
  line-height: 1.18;
  letter-spacing: 0;
  border-radius: 10px;
  border: 1px dashed #cbd5e1;
}

.ticket-brand {
  text-align: center;
}

.ticket-brand h2 {
  font-size: 18px;
  font-weight: 900;
  margin: 0;
}

.ticket-brand p {
  margin: 1px 0;
  font-size: 10px;
  line-height: 1.15;
  font-weight: 700;
}

.ticket-separator {
  border-top: 1px dashed #111;
  margin: 5px 0;
}

.ticket-meta p {
  margin: 2px 0;
  font-size: 9.8px;
  font-weight: 600;
}

.ticket-table-head,
.ticket-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px 42px 48px;
  column-gap: 3px;
  row-gap: 0;
  align-items: start;
}

.ticket-table-head {
  font-weight: 800;
  border-bottom: 1px dashed #111;
  padding-bottom: 4px;
  margin-bottom: 4px;
}

.ticket-item {
  padding: 2px 0;
  font-size: 9.4px;
  font-weight: 600;
}

.ticket-table-head span:first-child,
.ticket-item span:first-child {
  min-width: 0;
  padding-right: 2px;
  overflow-wrap: anywhere;
  word-break: normal;
}

.ticket-table-head span:nth-child(2),
.ticket-table-head span:nth-child(3),
.ticket-table-head span:nth-child(4),
.ticket-item span:nth-child(2),
.ticket-item span:nth-child(3),
.ticket-item span:nth-child(4) {
  text-align: right;
  white-space: nowrap;
}

.ticket-grand-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  font-weight: 800;
}

.ticket-grand-total strong {
  font-size: 14px;
}

.ticket-footer {
  text-align: center;
  font-size: 10px;
  margin: 3px 0 0;
  font-weight: 700;
}

.ticket-footer-brand {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0;
}

.sales-reprint-ticket {
  display: none;
}

@media print {
  body * {
    visibility: hidden;
  }

  #ticket-print,
  #ticket-print * {
    visibility: visible;
  }

  #ticket-print {
    position: absolute;
    left: 0;
    top: 0;
    width: 58mm;
    min-height: auto;
    height: auto;
    padding: 0 2mm 2mm;
    border: none;
    border-radius: 0;
    font-size: 10px;
    overflow: visible;
    page-break-inside: auto;
    break-inside: auto;
  }

  .sales-reprint-ticket {
    display: block !important;
  }

  .ticket-table-head,
  .ticket-item {
    grid-template-columns: minmax(0, 1fr) 18px 36px 42px !important;
    column-gap: 2px !important;
  }

  .ticket-item {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .vente-drawer,
  .vente-drawer-overlay {
    position: static;
    background: transparent;
    box-shadow: none;
  }

  @page {
    size: 58mm auto;
    margin: 0;
  }
}
.ticket-logo {
  width: 78px;
  display: block;
  margin: 0 auto 1px;
}
.ticket-logo {
  display: block !important;
  width: 82px !important;
  max-width: 82px !important;
  height: auto !important;
  margin: 0 auto 6px !important;
  object-fit: contain !important;
}

.cash-doc-page {
  min-height: 100vh;
  background: #eef2f7;
  padding: 20px;
  color: #0f172a;
}

.cash-doc-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 1180px;
  margin: 0 auto 14px;
}

.cash-doc-toolbar button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  font-weight: 900;
  cursor: pointer;
}

.cash-doc-toolbar .danger-action {
  background: #dc2626;
  border-color: #dc2626;
  color: #ffffff;
}

.cash-doc-toolbar button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.cash-a4-sheet {
  max-width: 1180px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.cash-doc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 16px;
  margin-bottom: 16px;
}

.cash-doc-header p,
.cash-doc-header span {
  margin: 0;
  color: #64748b;
  font-weight: 800;
}

.cash-doc-header h1 {
  margin: 4px 0;
  font-size: 26px;
}

.cash-doc-header > strong {
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
}

.cash-doc-header .open {
  background: #dcfce7;
  color: #166534;
}

.cash-doc-header .closed {
  background: #fee2e2;
  color: #991b1b;
}

.cash-meta-grid,
.cash-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.cash-meta-grid div,
.cash-kpi,
.payment-breakdown div,
.cash-compare-card {
  display: grid;
  gap: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}

.cash-meta-grid span,
.cash-kpi span,
.payment-breakdown span,
.cash-compare-card span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.cash-meta-grid strong,
.cash-kpi strong,
.payment-breakdown strong,
.cash-compare-card strong {
  color: #0f172a;
  font-size: 15px;
}

.cash-doc-section {
  margin-top: 18px;
}

.cash-doc-section h2 {
  margin: 0 0 10px;
  font-size: 17px;
}

.cash-table-wrap {
  overflow: auto;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.cash-table-wrap table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.cash-table-wrap th,
.cash-table-wrap td {
  padding: 9px 10px;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
  white-space: nowrap;
  font-size: 13px;
}

.cash-table-wrap th {
  background: #f1f5f9;
  color: #334155;
  text-transform: uppercase;
  font-size: 12px;
}

.payment-breakdown {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.cash-stop-grid,
.closure-report-grid,
.signature-row {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 14px;
}

.billetage-input,
.cash-declare-field input,
.cash-observation textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  padding: 9px 10px;
  font-weight: 800;
}

.cash-declare-field,
.cash-observation {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  color: #334155;
  font-weight: 900;
}

.cash-declare-field span {
  color: #64748b;
}

.cash-observation textarea {
  min-height: 110px;
  resize: vertical;
}

.positive {
  color: #15803d !important;
}

.negative {
  color: #b91c1c !important;
}

.closure-report-grid p {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 8px;
}

.signature-row {
  grid-template-columns: 1fr 1fr;
  margin-top: 40px;
}

.signature-row div {
  min-height: 90px;
  border-top: 1px solid #0f172a;
  padding-top: 10px;
  text-align: center;
  font-weight: 900;
}

@media print {
  .ticket-logo {
    display: block !important;
    width: 22mm !important;
    max-width: 22mm !important;
    height: auto !important;
    margin: 0 auto 1mm !important;
    object-fit: contain !important;
    visibility: visible !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  #ticket-print img,
  #ticket-print canvas {
    visibility: visible !important;
    display: block !important;
  }
}

.reports-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  color: #0f172a;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  box-sizing: border-box;
}

.reports-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #ffffff;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  padding: 18px 20px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.reports-header h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 900;
  color: #07152f;
}

.reports-header p {
  margin: 5px 0 0;
  color: #475569;
  font-size: 14px;
}

.premium-header {
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(30, 64, 175, 0.92)),
    #0f172a;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.12);
}

.premium-header h1,
.premium-header p {
  color: #ffffff;
}

.access-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-weight: 900;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.reports-actions,
.reports-tabs,
.reports-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.reports-actions button,
.reports-tabs button,
.reports-filters button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #ffffff;
  color: #0f172a;
  font-weight: 800;
  cursor: pointer;
}

.reports-actions button {
  padding: 0 14px;
}

.reports-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.reports-tabs {
  background: #ffffff;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  padding: 8px;
}

.reports-tabs button {
  flex: 1 1 220px;
  padding: 0 16px;
  background: #f8fafc;
}

.reports-tabs button.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

.reports-filters {
  align-items: end;
  background: #ffffff;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  padding: 14px;
}

.reports-filters label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 150px;
  font-size: 12px;
  font-weight: 900;
  color: #334155;
  text-transform: uppercase;
}

.reports-filters input,
.reports-filters select {
  height: 40px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  padding: 0 12px;
  background: #ffffff;
  color: #0f172a;
  font-weight: 700;
}

.reports-filters button {
  padding: 0 16px;
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
}

.reports-message {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  border-radius: 8px;
  padding: 12px 14px;
  font-weight: 800;
}

.reports-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(140px, 1fr));
  gap: 12px;
}

.report-kpi-card {
  display: grid;
  gap: 8px;
  min-height: 116px;
  background: #ffffff;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  padding: 14px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

.report-kpi-card.premium {
  min-height: 176px;
  align-content: start;
  overflow: hidden;
  position: relative;
}

.report-kpi-card.premium::after {
  content: "";
  position: absolute;
  right: -32px;
  top: -32px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.08);
}

.report-kpi-card svg {
  width: 32px;
  height: 32px;
  padding: 7px;
  border-radius: 8px;
  background: #eef2ff;
  color: #2563eb;
}

.report-kpi-card span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.report-kpi-card strong {
  font-size: 21px;
  color: #0f172a;
  line-height: 1.15;
}

.report-kpi-card.premium strong {
  font-size: 24px;
}

.kpi-variation {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 900;
}

.kpi-variation svg {
  width: 14px;
  height: 14px;
  padding: 0;
  background: transparent;
}

.kpi-variation small,
.kpi-variation em {
  color: #64748b;
  font-style: normal;
  font-weight: 800;
}

.kpi-variation.up {
  color: #15803d;
}

.kpi-variation.down {
  color: #b91c1c;
}

.sparkline-bars {
  display: flex;
  align-items: end;
  gap: 4px;
  height: 52px;
  margin-top: auto;
}

.sparkline-bars i {
  display: block;
  flex: 1;
  min-width: 4px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #60a5fa, #2563eb);
}

.report-kpi-card.green svg {
  background: #dcfce7;
  color: #16a34a;
}

.report-kpi-card.orange svg {
  background: #ffedd5;
  color: #ea580c;
}

.report-kpi-card.red svg {
  background: #fee2e2;
  color: #dc2626;
}

.report-kpi-card.slate svg {
  background: #e2e8f0;
  color: #334155;
}

.reports-status-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  background: #ffffff;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  padding: 12px 14px;
}

.reports-status-row span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-weight: 800;
  font-size: 13px;
}

.profit-badge {
  text-transform: uppercase;
}

.profit-badge.success {
  background: #dcfce7;
  color: #166534;
}

.profit-badge.danger {
  background: #fee2e2;
  color: #991b1b;
}

.profit-badge.neutral {
  background: #fef3c7;
  color: #92400e;
}

.reports-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  min-width: 0;
}

.global-charts {
  grid-template-columns: 1.4fr 0.8fr;
}

.wide-chart {
  grid-column: span 1;
}

.report-chart-card,
.report-table-card {
  background: #ffffff;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.report-chart-card h3,
.report-table-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 16px;
  color: #0f172a;
}

.reports-tables {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 14px;
  min-width: 0;
}

.global-kpi-grid {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
}

.global-filters label {
  min-width: 135px;
}

.global-decision-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.decision-panel {
  background: #ffffff;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

.decision-panel h3 {
  margin: 0 0 12px;
  font-size: 15px;
  color: #0f172a;
}

.decision-panel p {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 9px 0;
  color: #475569;
  font-weight: 800;
}

.decision-panel strong {
  color: #0f172a;
  text-align: right;
}

.global-tables {
  grid-template-columns: 1fr 1fr;
}

.reports-locked {
  display: grid;
  place-items: center;
  min-height: 360px;
  text-align: center;
  background: #ffffff;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  padding: 36px;
  color: #334155;
}

.reports-locked svg {
  color: #dc2626;
  margin-bottom: 10px;
}

.reports-locked h2 {
  margin: 0;
  color: #0f172a;
}

.report-table-wrap {
  overflow: auto;
  max-height: 460px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.report-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  min-width: 920px;
}

.report-table-wrap th,
.report-table-wrap td {
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
  white-space: nowrap;
  font-size: 13px;
}

.report-table-wrap th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
  text-transform: uppercase;
}

.report-table-wrap td {
  color: #0f172a;
  font-weight: 650;
}

.voyage-form {
  gap: 10px;
}

.voyage-date-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.voyage-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.voyage-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid #dbe5f2;
  border-radius: 8px;
  background: #f8fbff;
}

.voyage-item p,
.voyage-item span,
.paiement-item small {
  display: block;
  margin: 3px 0 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.voyage-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  padding: 5px 8px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 900;
}

.voyage-badge.cloture {
  background: #e2e8f0;
  color: #475569;
}

.voyage-badge.annule {
  background: #fee2e2;
  color: #b91c1c;
}

.voyage-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.route-sheet-page {
  background: #e8edf4;
}

.route-form-panel {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  width: min(1120px, calc(100vw - 44px));
  margin: 0 auto 14px;
  padding: 12px;
  border: 1px solid #d7e0eb;
  border-radius: 8px;
  background: #ffffff;
}

.route-form-panel label {
  display: grid;
  gap: 5px;
  color: #334155;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.route-form-panel input {
  min-height: 38px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  padding: 0 10px;
  color: #0f172a;
  font-weight: 800;
}

.route-sheet {
  max-width: 1120px;
  color: #0f172a;
}

.route-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 14px;
  border-bottom: 3px solid #0f2a4a;
}

.route-header > div:first-child {
  display: grid;
  gap: 4px;
}

.route-header img {
  width: 86px;
  height: 62px;
  object-fit: contain;
}

.route-header strong {
  color: #0f2a4a;
  font-size: 16px;
  font-weight: 950;
}

.route-header span,
.route-header p {
  color: #475569;
  font-size: 12px;
  font-weight: 750;
}

.route-header h1 {
  margin: 0 0 8px;
  color: #0f2a4a;
  font-size: 30px;
  text-align: right;
}

.route-info-grid,
.route-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0;
}

.route-info-grid div,
.route-summary div {
  min-height: 58px;
  padding: 10px;
  border: 1px solid #d8e1ec;
  border-radius: 7px;
  background: #f8fafc;
}

.route-info-grid span,
.route-summary span {
  display: block;
  color: #64748b;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.route-info-grid strong,
.route-summary strong {
  display: block;
  margin-top: 5px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 950;
}

.route-table-section {
  margin-top: 16px;
}

.route-document-block {
  padding: 14px;
  margin-top: 18px;
  border: 1px solid #d8e1ec;
  border-radius: 8px;
  background: #ffffff;
}

.route-document-block .route-table-section {
  margin-top: 0;
}

.route-client-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 14px 0 0;
}

.route-cargo-block {
  margin-top: 22px;
}

.route-cargo-summary {
  grid-template-columns: minmax(180px, 260px);
  justify-content: flex-end;
  margin: 14px 0 0;
}

.route-table-section h2 {
  margin: 0 0 8px;
  color: #0f2a4a;
  font-size: 16px;
  text-transform: uppercase;
}

.route-table-section table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #cbd5e1;
}

.route-table-section th,
.route-table-section td {
  padding: 8px;
  border: 1px solid #d8e1ec;
  text-align: left;
  font-size: 12px;
}

.route-table-section th {
  background: #0f2a4a;
  color: #ffffff;
  font-weight: 950;
}

.route-table-section td {
  color: #0f172a;
  font-weight: 700;
}

.route-signatures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 46px;
}

.route-signatures div {
  min-height: 72px;
  border-top: 2px solid #0f172a;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.route-signatures span {
  color: #0f172a;
  font-size: 12px;
  font-weight: 950;
}

@media (max-width: 1100px) {
  .route-form-panel,
  .route-info-grid,
  .route-summary,
  .route-client-summary,
  .route-cargo-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media print {
  body:has(.route-sheet-page) .route-document-block {
    border: 1px solid #cbd5e1;
    border-radius: 0;
    padding: 8px;
    margin-top: 10px;
    break-inside: auto;
    page-break-inside: auto;
  }

  body:has(.route-sheet-page) .route-clients-block {
    break-after: page;
    page-break-after: always;
  }

  body:has(.route-sheet-page) .route-cargo-block {
    break-before: page;
    page-break-before: always;
  }

  body:has(.route-sheet-page) .route-client-summary {
    grid-template-columns: repeat(4, 1fr);
    margin-top: 8px;
  }

  body:has(.route-sheet-page) .route-cargo-summary {
    display: grid;
    grid-template-columns: 1fr;
    width: 190px;
    margin: 8px 0 0 auto;
  }

  body:has(.route-sheet-page) .route-signatures {
    grid-template-columns: repeat(4, 1fr);
    margin-top: 32px;
  }
}

@media print {
  body:has(.route-sheet-page) * {
    visibility: hidden !important;
  }

  body:has(.route-sheet-page) .route-form-panel,
  body:has(.route-sheet-page) .document-toolbar,
  body:has(.route-sheet-page) .sidebar,
  body:has(.route-sheet-page) .sidebar-user,
  body:has(.route-sheet-page) .app-header,
  body:has(.route-sheet-page) .topbar,
  body:has(.route-sheet-page) nav {
    display: none !important;
  }

  body:has(.route-sheet-page) .document-page,
  body:has(.route-sheet-page) .main-content,
  body:has(.route-sheet-page) .app-layout {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    width: 100% !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  body:has(.route-sheet-page) .route-sheet {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 5mm !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: #111827 !important;
    font-family: Arial, sans-serif !important;
  }

  body:has(.route-sheet-page) .route-sheet * {
    visibility: visible !important;
  }

  body:has(.route-sheet-page) .route-header {
    display: grid !important;
    grid-template-columns: 1.2fr 0.8fr !important;
    gap: 8mm !important;
    padding-bottom: 4mm !important;
    border-bottom: 1.5px solid #111827 !important;
    break-inside: avoid !important;
  }

  body:has(.route-sheet-page) .route-header img {
    width: 58px !important;
    height: 42px !important;
  }

  body:has(.route-sheet-page) .route-header h1 {
    font-size: 18px !important;
    margin: 0 0 2mm !important;
  }

  body:has(.route-sheet-page) .route-header strong {
    font-size: 12px !important;
  }

  body:has(.route-sheet-page) .route-header span,
  body:has(.route-sheet-page) .route-header p {
    font-size: 9px !important;
    margin: 0 0 1mm !important;
  }

  .route-info-grid,
  .route-summary {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 2mm !important;
    margin: 4mm 0 !important;
    break-inside: avoid !important;
  }

  body:has(.route-sheet-page) .route-info-grid div,
  body:has(.route-sheet-page) .route-summary div {
    min-height: 0 !important;
    padding: 2mm !important;
    border-radius: 0 !important;
    background: #ffffff !important;
  }

  body:has(.route-sheet-page) .route-info-grid span,
  body:has(.route-sheet-page) .route-summary span {
    font-size: 7.5px !important;
  }

  body:has(.route-sheet-page) .route-info-grid strong,
  body:has(.route-sheet-page) .route-summary strong {
    font-size: 9px !important;
    margin-top: 1mm !important;
  }

  body:has(.route-sheet-page) .route-table-section {
    margin-top: 4mm !important;
    break-inside: auto !important;
    page-break-inside: auto !important;
  }

  body:has(.route-sheet-page) .route-table-section h2 {
    font-size: 10px !important;
    margin: 0 0 2mm !important;
  }

  body:has(.route-sheet-page) .route-table-section table {
    table-layout: fixed !important;
    width: 100% !important;
    border-color: #111827 !important;
    page-break-inside: auto !important;
  }

  body:has(.route-sheet-page) .route-table-section thead {
    display: table-header-group !important;
  }

  body:has(.route-sheet-page) .route-table-section tr {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  body:has(.route-sheet-page) .route-table-section th,
  body:has(.route-sheet-page) .route-table-section td {
    padding: 1.2mm 1.5mm !important;
    font-size: 8px !important;
    line-height: 1.15 !important;
    vertical-align: top !important;
    overflow-wrap: anywhere !important;
  }

  body:has(.route-sheet-page) .route-table-section th {
    background: #111827 !important;
    color: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body:has(.route-sheet-page) .route-table-section td {
    font-weight: 600 !important;
  }

  body:has(.route-sheet-page) .route-table-section:first-of-type th:nth-child(1),
  body:has(.route-sheet-page) .route-table-section:first-of-type td:nth-child(1) {
    width: 8mm !important;
  }

  body:has(.route-sheet-page) .route-table-section:first-of-type th:nth-child(3),
  body:has(.route-sheet-page) .route-table-section:first-of-type td:nth-child(3),
  body:has(.route-sheet-page) .route-table-section:first-of-type th:nth-child(4),
  body:has(.route-sheet-page) .route-table-section:first-of-type td:nth-child(4) {
    width: 25mm !important;
  }

  body:has(.route-sheet-page) .route-table-section:nth-of-type(2) th:nth-child(2),
  body:has(.route-sheet-page) .route-table-section:nth-of-type(2) td:nth-child(2),
  body:has(.route-sheet-page) .route-table-section:nth-of-type(2) th:nth-child(3),
  body:has(.route-sheet-page) .route-table-section:nth-of-type(2) td:nth-child(3) {
    width: 18mm !important;
  }

  .route-signatures {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8mm !important;
    margin-top: 10mm !important;
    break-inside: avoid;
  }

  body:has(.route-sheet-page) .route-signatures div {
    min-height: 18mm !important;
  }

  body:has(.route-sheet-page) .route-signatures span {
    font-size: 9px !important;
  }

  @page {
    size: A4 landscape;
    margin: 6mm;
  }
}

.user-directory-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  margin-top: 16px;
}

.user-directory-list {
  display: grid;
  gap: 8px;
  max-height: 560px;
  overflow: auto;
  padding-right: 4px;
}

.user-directory-list button {
  display: grid;
  gap: 4px;
  text-align: left;
  padding: 12px;
  border: 1px solid #dbe5f2;
  border-radius: 8px;
  background: #f8fafc;
  color: #0f172a;
  cursor: pointer;
}

.user-directory-list button.active {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.user-directory-list strong {
  font-size: 14px;
  font-weight: 900;
}

.user-directory-list span,
.user-directory-list em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
}

.user-detail-card {
  border: 1px solid #dbe5f2;
  border-radius: 8px;
  background: #ffffff;
  padding: 16px;
}

.user-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.user-detail-head span {
  color: #2563eb;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.user-detail-head h3 {
  margin: 4px 0;
  color: #0f172a;
}

.user-detail-head p {
  margin: 0;
  color: #64748b;
  font-weight: 750;
}

.user-detail-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.user-detail-head button,
.user-code-line button {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #1d4ed8;
  font-weight: 850;
  cursor: pointer;
}

.user-detail-head button {
  padding: 9px 12px;
}

.user-detail-actions button.danger {
  border-color: #fecaca;
  background: #fff1f2;
  color: #be123c;
}

.user-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.user-info-grid > div {
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.user-info-grid span,
.user-rights-panel span {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.user-info-grid strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 5px;
  color: #0f172a;
  font-size: 14px;
}

.user-code-line button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
}

.user-rights-panel {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
}

.user-rights-panel > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.user-rights-panel h4 {
  margin: 0;
  color: #0f172a;
}

.user-rights-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.user-rights-list span {
  padding: 6px 9px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  text-transform: none;
}

@media (max-width: 980px) {
  .user-directory-grid {
    grid-template-columns: 1fr;
  }

  .user-info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1280px) {
  .cash-meta-grid,
  .cash-summary-grid,
  .payment-breakdown,
  .cash-stop-grid,
  .closure-report-grid {
    grid-template-columns: 1fr;
  }

  .reports-kpi-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .reports-charts,
  .global-charts,
  .reports-tables {
    grid-template-columns: 1fr;
  }

  .global-decision-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .qmp-app-layout {
    flex-direction: column !important;
    min-height: 100vh;
    overflow: visible !important;
  }

  .qmp-sidebar {
    width: 100% !important;
    flex: 0 0 auto !important;
    min-height: auto !important;
    max-height: 42vh;
    box-sizing: border-box;
    position: relative;
    z-index: 30;
  }

  .qmp-main-column,
  .qmp-main-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .qmp-main-panel {
    padding: 10px !important;
    overflow-x: hidden !important;
  }

  .reports-page {
    padding: 0;
    gap: 12px;
    overflow-x: hidden;
  }

  .reports-header {
    align-items: stretch;
    flex-direction: column;
    padding: 14px;
    position: static !important;
  }

  .reports-kpi-grid {
    grid-template-columns: 1fr;
  }

  .reports-actions,
  .reports-tabs,
  .reports-filters {
    position: static !important;
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .reports-actions button,
  .reports-tabs button,
  .reports-filters button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .reports-filters label {
    flex: 0 0 180px;
    min-width: 180px;
  }

  .reports-charts,
  .global-charts,
  .reports-tables,
  .global-tables {
    grid-template-columns: minmax(0, 1fr);
  }

  .report-chart-card,
  .report-table-card {
    padding: 12px;
  }

  .report-table-wrap {
    overflow-x: auto;
    max-width: 100%;
  }

  .global-decision-grid {
    grid-template-columns: 1fr;
  }
}

@media print {
  body:has(.cash-doc-page) * {
    visibility: visible !important;
  }

  body:has(.cash-doc-page) {
    background: #ffffff !important;
  }

  .cash-doc-toolbar,
  body:has(.cash-doc-page) .sidebar {
    display: none !important;
  }

  .cash-doc-page {
    padding: 0 !important;
    background: #ffffff !important;
  }

  .cash-a4-sheet {
    max-width: none;
    width: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
  }

  .cash-doc-section,
  .cash-kpi,
  .cash-meta-grid div,
  .payment-breakdown div,
  .cash-compare-card {
    break-inside: avoid;
  }

  .cash-table-wrap {
    overflow: visible;
  }

  .cash-table-wrap table {
    min-width: 0;
  }

  @page {
    size: A4;
    margin: 10mm;
  }
}

@media print {
  .sidebar,
  .reports-actions,
  .reports-tabs,
  .reports-filters {
    display: none !important;
  }

  .reports-page {
    padding: 0;
  }

  .reports-header,
  .report-kpi-card,
  .report-chart-card,
  .report-table-card,
  .reports-status-row {
    box-shadow: none;
    break-inside: avoid;
  }

  @page {
    size: A4 landscape;
    margin: 10mm;
  }
}

@media print {
  body:has(.document-page) * {
    visibility: visible !important;
  }

  body:has(.document-page) {
    background: #ffffff !important;
  }

  body:has(.document-page) .sidebar,
  body:has(.document-page) .sidebar-user,
  body:has(.document-page) header,
  body:has(.document-page) .document-toolbar,
  body:has(.document-page) .document-form-panel {
    display: none !important;
    visibility: hidden !important;
  }

  body:has(.document-page) .app-layout,
  body:has(.document-page) .main-content,
  body:has(.document-page) .document-page {
    display: block !important;
    width: 100% !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    overflow: visible !important;
  }

  body:has(.document-page) .document-sheet {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 10mm !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #ffffff !important;
    color: #0f172a !important;
    page-break-after: auto !important;
  }

  body:has(.document-page) .a4-document {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    max-width: none !important;
    min-height: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 9mm !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    background: #ffffff !important;
    color: #0f172a !important;
    page-break-after: auto !important;
  }

  body:has(.document-page) .a4-document * {
    visibility: visible !important;
  }

  body:has(.document-page) .a4-header,
  body:has(.document-page) .a4-meta-grid > div,
  body:has(.document-page) .a4-total,
  body:has(.document-page) .a4-note,
  body:has(.document-page) .a4-signatures {
    break-inside: avoid !important;
  }

  body:has(.document-page) .a4-lines {
    page-break-inside: auto !important;
  }

  body:has(.document-page) .a4-lines tr {
    page-break-inside: avoid !important;
    page-break-after: auto !important;
  }

  body:has(.document-page) .document-sheet * {
    visibility: visible !important;
  }

  body:has(.document-page) .document-header,
  body:has(.document-page) .document-info,
  body:has(.document-page) .document-summary,
  body:has(.document-page) .document-final,
  body:has(.document-page) .document-signatures {
    break-inside: avoid !important;
  }

  body:has(.document-page) .document-table {
    width: 100% !important;
    page-break-inside: auto !important;
  }

  body:has(.document-page) .document-table tr {
    page-break-inside: avoid !important;
    page-break-after: auto !important;
  }

  body:has(.document-page) .document-logo-img {
    display: block !important;
    visibility: visible !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  @page {
    size: A4;
    margin: 8mm;
  }
}

@media print {
  body:has(.document-sale-sheet) {
    width: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  body:has(.document-sale-sheet) .qmp-app-layout,
  body:has(.document-sale-sheet) .qmp-main-panel,
  body:has(.document-sale-sheet) .app-layout,
  body:has(.document-sale-sheet) .main-content,
  body:has(.document-sale-sheet) .document-page {
    display: block !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  body:has(.document-sale-sheet) .document-sale-sheet {
    position: static !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-height: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 7mm !important;
    overflow: visible !important;
    box-shadow: none !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
  }

  body:has(.document-sale-sheet) .a4-lines {
    display: table !important;
    width: 100% !important;
    margin-top: 12px !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
  }

  body:has(.document-sale-sheet) .a4-lines thead {
    display: table-header-group !important;
  }

  body:has(.document-sale-sheet) .a4-lines tfoot {
    display: table-footer-group !important;
  }

  body:has(.document-sale-sheet) .a4-lines tr {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  body:has(.document-sale-sheet) .a4-total,
  body:has(.document-sale-sheet) .a4-note,
  body:has(.document-sale-sheet) .a4-signatures {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  @page {
    size: A4 portrait;
    margin: 8mm;
  }
}

/* Feuille de route : laisser le chargement camion se poursuivre sur toutes les pages. */
@media print {
  html:has(.route-sheet-page),
  body:has(.route-sheet-page),
  body:has(.route-sheet-page) #root,
  body:has(.route-sheet-page) .qmp-app-layout,
  body:has(.route-sheet-page) .qmp-main-panel,
  body:has(.route-sheet-page) .main-content,
  body:has(.route-sheet-page) .document-page,
  body:has(.route-sheet-page) .route-sheet-page {
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body:has(.route-sheet-page) .route-sheet {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
  }

  body:has(.route-sheet-page) .route-header {
    display: grid !important;
  }

  body:has(.route-sheet-page) .route-cargo-block,
  body:has(.route-sheet-page) .route-table-chargement,
  body:has(.route-sheet-page) .route-table-chargement table,
  body:has(.route-sheet-page) .route-table-chargement tbody {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
  }

  body:has(.route-sheet-page) .route-table-chargement thead {
    display: table-header-group !important;
  }

  body:has(.route-sheet-page) .route-table-chargement tbody {
    display: table-row-group !important;
  }

  body:has(.route-sheet-page) .route-table-chargement tr {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    page-break-after: auto !important;
  }
}

/* Final UI overlays: keep notifications and ERP toasts above sticky menus, drawers and previews. */
.qmp-app-header {
  z-index: 5000 !important;
  overflow: visible !important;
}

.qmp-header-tools,
.qmp-notification-wrap {
  overflow: visible !important;
}

.qmp-notification-panel {
  position: fixed !important;
  top: 50px !important;
  right: 300px !important;
  width: min(360px, calc(100vw - 24px)) !important;
  max-height: calc(100vh - 72px);
  overflow-y: auto;
  z-index: 7000 !important;
}

.qmp-toast {
  position: fixed;
  z-index: 7200;
  top: 78px;
  right: 22px;
  width: min(420px, calc(100vw - 28px));
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 30px;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid #dbe6f4;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 22px 55px rgba(15, 23, 42, 0.18);
  animation: qmpToastIn 0.2s ease-out;
}

.qmp-toast > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
}

.qmp-toast.success > span {
  color: #15803d;
  background: #dcfce7;
}

.qmp-toast.error > span {
  color: #dc2626;
  background: #fee2e2;
}

.qmp-toast strong {
  display: block;
  color: #07152f;
  font-size: 14px;
  font-weight: 950;
}

.qmp-toast small {
  display: block;
  margin-top: 4px;
  color: #52637d;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.qmp-toast button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  color: #64748b;
  background: #f8fafc;
  cursor: pointer;
}

@keyframes qmpToastIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 980px) {
  .qmp-notification-panel {
    right: 12px !important;
  }
}

/* ERP scroll final pass: appended after overlays so module table scroll wins. */
@media screen and (min-width: 761px) {
  .qmp-main-panel:has(.stock-page),
  .qmp-main-panel:has(.sales-center-page),
  .qmp-main-panel:has(.credits-page),
  .qmp-main-panel:has(.fournisseurs-page),
  .qmp-main-panel:has(.fournisseur-achat-page),
  .qmp-main-panel:has(.compte-page),
  .qmp-main-panel:has(.voyages-pro-page),
  .qmp-main-panel:has(.reports-page) {
    overflow: hidden !important;
  }

  .stock-page,
  .sales-center-page,
  .credits-page,
  .fournisseurs-page,
  .fournisseur-achat-page,
  .compte-page,
  .voyages-pro-page,
  .reports-page {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .stock-content,
  .ventes-pro-card.sales-list-card,
  .fournisseur-list-card,
  .reports-tables,
  .stock-zone-table-card,
  .voyages-pro-page > .voyages-pro-section:last-child {
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
  }

  .stock-table-wrapper,
  .ventes-pro-table-wrap,
  .credit-table-wrap,
  .report-table-wrap,
  .stock-zone-table-wrap,
  .inventory-table-wrap,
  .transfer-table-wrap {
    min-height: 180px !important;
    overflow: auto !important;
    scrollbar-gutter: stable both-edges;
  }

  .stock-content > .stock-table-wrapper,
  .ventes-pro-card.sales-list-card > .ventes-pro-table-wrap,
  .fournisseur-list-card > .credit-table-wrap,
  .report-table-card > .report-table-wrap,
  .stock-zone-table-card > .stock-zone-table-wrap {
    flex: 1 1 auto !important;
  }

  .stock-table thead th,
  .ventes-pro-table thead th,
  .credit-table thead th,
  .report-table thead th,
  .inventory-table thead th,
  .transfer-table-wrap thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    background: #ffffff !important;
  }
}

/* Caisse: keep the right page scrollbar and limit article rendering area. */
@media screen and (min-width: 761px) {
  .qmp-main-panel:has(.caisse-page-pro) {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-gutter: stable;
  }

  .caisse-page-pro {
    min-height: 100% !important;
    overflow: visible !important;
  }

  .caisse-layout-pro {
    align-items: start !important;
  }

  .caisse-products-panel {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    max-height: calc(100vh - 190px);
    overflow: hidden !important;
  }

  .caisse-categories,
  .caisse-articles-pagination {
    flex: 0 0 auto;
  }

  .articles-grid-pro {
    min-height: 260px;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 6px;
    scrollbar-gutter: stable;
  }

  .panier-panel-pro,
  .payment-side-panel {
    max-height: calc(100vh - 190px);
    overflow-y: auto !important;
    scrollbar-gutter: stable;
  }
}

.caisse-articles-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}

.caisse-articles-pagination span {
  color: #475569;
  font-size: 12px;
  font-weight: 900;
}

.caisse-articles-pagination div {
  display: flex;
  gap: 8px;
}

.caisse-articles-pagination button {
  min-height: 34px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #ffffff;
  color: #1d4ed8;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.caisse-articles-pagination button:disabled {
  cursor: not-allowed;
  color: #94a3b8;
  background: #f8fafc;
}

.ticket-return-note {
  display: block;
  margin-top: 3px;
  color: #dc2626;
  font-size: 10px;
  font-weight: 900;
}

.article-drawer-message {
  margin: 14px 0 0;
  padding: 11px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
}

.article-drawer-message.success {
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  color: #15803d;
}

.article-drawer-message.error {
  border: 1px solid #fecaca;
  background: #fff5f5;
  color: #dc2626;
}

/* Stock pagination: same smooth feeling as caisse, without jumping the page. */
@media screen and (min-width: 761px) {
  .stock-content > .stock-pagination,
  .stock-table-card + .stock-pagination,
  .articles-grid + .stock-pagination {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    z-index: 25;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -8px 18px rgba(15, 23, 42, 0.06);
  }
}

/* Correctif scroll: garder la barre sur le panneau QMP, pas sur le navigateur. */
@media screen and (min-width: 761px) {
  .qmp-sidebar {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    overscroll-behavior: contain;
  }

  .qmp-sidebar-menu {
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  .qmp-main-column {
    height: 100vh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .qmp-app-header {
    flex: 0 0 auto !important;
  }

  .qmp-main-panel:has(.stock-page),
  .qmp-main-panel:has(.sales-center-page),
  .qmp-main-panel:has(.credits-page),
  .qmp-main-panel:has(.fournisseurs-page),
  .qmp-main-panel:has(.fournisseur-achat-page),
  .qmp-main-panel:has(.compte-page),
  .qmp-main-panel:has(.voyages-pro-page),
  .qmp-main-panel:has(.reports-page) {
    height: auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable both-edges;
  }

  .stock-page,
  .sales-center-page,
  .credits-page,
  .fournisseurs-page,
  .fournisseur-achat-page,
  .compte-page,
  .voyages-pro-page,
  .reports-page {
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
  }

  .stock-content,
  .ventes-pro-card.sales-list-card,
  .fournisseur-list-card,
  .reports-tables,
  .stock-zone-table-card,
  .voyages-pro-page > .voyages-pro-section:last-child {
    overflow: visible !important;
  }

  .stock-table-wrapper,
  .ventes-pro-table-wrap,
  .credit-table-wrap,
  .report-table-wrap,
  .stock-zone-table-wrap,
  .inventory-table-wrap,
  .transfer-table-wrap {
    max-height: min(62vh, 680px);
    overflow: auto !important;
    overscroll-behavior: contain;
  }
}
@media print {
  body:has(.route-sheet-page) * {
    visibility: hidden !important;
  }

  body:has(.route-sheet-page) .route-sheet,
  body:has(.route-sheet-page) .route-sheet * {
    visibility: visible !important;
  }

  body:has(.route-sheet-page) .document-toolbar,
  body:has(.route-sheet-page) .route-form-panel,
  body:has(.route-sheet-page) .sidebar,
  body:has(.route-sheet-page) .sidebar-user,
  body:has(.route-sheet-page) .app-header,
  body:has(.route-sheet-page) .topbar,
  body:has(.route-sheet-page) nav {
    display: none !important;
  }

  body:has(.route-sheet-page),
  body:has(.route-sheet-page) .app-layout,
  body:has(.route-sheet-page) .main-content,
  body:has(.route-sheet-page) .document-page,
  body:has(.route-sheet-page) .route-sheet-page {
    display: block !important;
    width: 100% !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #ffffff !important;
  }

  body:has(.route-sheet-page) .route-sheet {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 5mm !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #111827 !important;
    background: #ffffff !important;
    font-family: Arial, sans-serif !important;
  }

  body:has(.route-sheet-page) .route-header {
    display: grid !important;
    grid-template-columns: 1.2fr 0.8fr !important;
    gap: 8mm !important;
    padding-bottom: 4mm !important;
    border-bottom: 1.5px solid #111827 !important;
    break-inside: avoid !important;
  }

  body:has(.route-sheet-page) .route-header img {
    width: 58px !important;
    height: 42px !important;
  }

  body:has(.route-sheet-page) .route-header h1 {
    font-size: 18px !important;
    margin: 0 0 2mm !important;
  }

  body:has(.route-sheet-page) .route-header strong {
    font-size: 12px !important;
  }

  body:has(.route-sheet-page) .route-header span,
  body:has(.route-sheet-page) .route-header p {
    font-size: 9px !important;
    margin: 0 0 1mm !important;
  }

  body:has(.route-sheet-page) .route-info-grid,
  body:has(.route-sheet-page) .route-summary {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 2mm !important;
    margin: 4mm 0 !important;
    break-inside: avoid !important;
  }

  body:has(.route-sheet-page) .route-info-grid div,
  body:has(.route-sheet-page) .route-summary div {
    min-height: 0 !important;
    padding: 2mm !important;
    border-radius: 0 !important;
    background: #ffffff !important;
  }

  body:has(.route-sheet-page) .route-info-grid span,
  body:has(.route-sheet-page) .route-summary span {
    font-size: 7.5px !important;
  }

  body:has(.route-sheet-page) .route-info-grid strong,
  body:has(.route-sheet-page) .route-summary strong {
    font-size: 9px !important;
    margin-top: 1mm !important;
  }

  body:has(.route-sheet-page) .route-table-section {
    margin-top: 4mm !important;
    break-inside: auto !important;
    page-break-inside: auto !important;
  }

  body:has(.route-sheet-page) .route-table-section h2 {
    font-size: 10px !important;
    margin: 0 0 2mm !important;
  }

  body:has(.route-sheet-page) .route-table-section table {
    table-layout: fixed !important;
    width: 100% !important;
    border-collapse: collapse !important;
    border-color: #111827 !important;
    page-break-inside: auto !important;
  }

  body:has(.route-sheet-page) .route-table-section thead {
    display: table-header-group !important;
  }

  body:has(.route-sheet-page) .route-table-section tr {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  body:has(.route-sheet-page) .route-table-section th,
  body:has(.route-sheet-page) .route-table-section td {
    padding: 1.2mm 1.5mm !important;
    font-size: 8px !important;
    line-height: 1.15 !important;
    vertical-align: top !important;
    overflow-wrap: anywhere !important;
  }

  body:has(.route-sheet-page) .route-table-section th {
    background: #111827 !important;
    color: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body:has(.route-sheet-page) .route-table-section td {
    font-weight: 600 !important;
  }

  body:has(.route-sheet-page) .route-table-clients th:nth-child(1),
  body:has(.route-sheet-page) .route-table-clients td:nth-child(1) {
    width: 8mm !important;
  }

  body:has(.route-sheet-page) .route-table-clients th:nth-child(3),
  body:has(.route-sheet-page) .route-table-clients td:nth-child(3),
  body:has(.route-sheet-page) .route-table-clients th:nth-child(4),
  body:has(.route-sheet-page) .route-table-clients td:nth-child(4) {
    width: 25mm !important;
  }

  body:has(.route-sheet-page) .route-table-chargement th:nth-child(2),
  body:has(.route-sheet-page) .route-table-chargement td:nth-child(2),
  body:has(.route-sheet-page) .route-table-chargement th:nth-child(3),
  body:has(.route-sheet-page) .route-table-chargement td:nth-child(3) {
    width: 18mm !important;
  }

  body:has(.route-sheet-page) .route-signatures {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8mm !important;
    margin-top: 10mm !important;
    break-inside: avoid !important;
  }

  body:has(.route-sheet-page) .route-signatures div {
    min-height: 18mm !important;
  }

  body:has(.route-sheet-page) .route-signatures span {
    font-size: 9px !important;
  }

  body:has(.route-sheet-page.route-print-clients) .route-table-chargement,
  body:has(.route-sheet-page.route-print-clients) .route-chargement-summary {
    display: none !important;
    visibility: hidden !important;
  }

  body:has(.route-sheet-page.route-print-chargement) .route-table-clients,
  body:has(.route-sheet-page.route-print-chargement) .route-client-summary,
  body:has(.route-sheet-page.route-print-chargement) .route-signatures {
    display: none !important;
    visibility: hidden !important;
  }
}

@page {
  size: auto;
}