/* Lot 11A-5.33 — structure plate et onglets identiques à la fiche Projet. */
.charges-page {
  display: grid;
  gap: 16px;
}

.charges-page-card {
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body #main-content .charges-page > .charges-page-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.charges-period-bar,
.charges-period-controls,
.charges-period-copy {
  display: flex;
  align-items: center;
}

.charges-period-bar {
  justify-content: space-between;
  gap: 18px;
  padding: 12px 14px;
  border-radius: 12px;
  box-shadow: 0 3px 14px rgba(15, 23, 42, .045);
}

.charges-period-copy {
  min-width: 0;
  gap: 8px;
}

.charges-period-copy > span {
  color: var(--hd-color-text-muted, var(--muted));
  font-size: .76rem;
}

.charges-period-copy > strong {
  white-space: nowrap;
}

.charges-period-copy > small {
  padding-left: 8px;
  border-left: 1px solid var(--hd-color-border, var(--border));
  color: var(--hd-color-text-muted, var(--muted));
}

.charges-period-controls {
  flex: 0 0 auto;
  gap: 6px;
}

.charges-period-select select {
  min-width: 170px;
  min-height: 38px;
  padding: 7px 34px 7px 11px;
  border: 1px solid var(--hd-color-border, var(--border));
  border-radius: 9px;
  background: var(--panel, #fff);
  color: var(--hd-color-text, var(--text));
  font: inherit;
  font-weight: 600;
}

.charges-period-arrow {
  width: 38px;
  min-width: 38px;
  padding-inline: 0;
}

.charges-page-actions .btn,
.charges-page-actions .btn-secondary {
  min-height: 38px;
}

#chargesPageCreate .lucide:last-child {
  width: 15px;
  height: 15px;
  opacity: .7;
}

.charges-page-status {
  padding: 28px;
  border: 1px solid var(--hd-color-border, var(--border));
  border-radius: 12px;
  background: var(--hd-color-surface, var(--panel));
  color: var(--hd-color-text-muted, var(--muted));
  text-align: center;
}

.charges-page-workspace {
  position: relative;
  min-width: 0;
  min-height: 160px;
  display: grid;
  gap: 12px;
  background: transparent;
}

.charges-page-workspace.is-refreshing {
  pointer-events: none;
}

.charges-page-workspace.is-refreshing::before {
  position: absolute;
  z-index: 5;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--accent, #f59e0b), transparent);
  content: "";
  animation: charges-page-refresh 850ms ease-in-out infinite;
  transform-origin: left center;
}

@keyframes charges-page-refresh {
  0% { transform: scaleX(.08); opacity: .35; }
  50% { transform: scaleX(.72); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .charges-page-workspace.is-refreshing::before {
    animation: none;
    opacity: .8;
  }
}

.charges-page-workspace.cc-mega-modal .cc-panel {
  display: none;
  gap: 14px;
  padding: 0;
  max-height: none;
  overflow: visible;
  background: transparent;
}

.charges-page-workspace.cc-mega-modal .cc-panel.active {
  display: grid;
}

.charges-page-workspace .cc-overview {
  padding: 12px 14px;
  overflow: hidden;
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 97%, var(--accent) 3%);
  box-shadow: 0 3px 14px rgba(15, 23, 42, .045);
}

.charges-page-workspace .cc-overview-period strong {
  font-size: .875rem;
}

.charges-page-workspace .cc-balance-banner {
  margin: 0;
  box-shadow: 0 3px 14px rgba(15, 23, 42, .045);
}

.charges-page-workspace .cc-kpis {
  padding: 0;
}

/* La barre emploie directement .project-page-tabs, comme la fiche Projet.
   Seul le badge numérique reste spécifique aux charges. */
.charges-page-workspace .project-page-tabs .cc-tab-count {
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--bg);
  color: currentColor;
  font-size: 9px;
  text-align: center;
}

.charges-page-workspace .cc-list-toolbar {
  margin: 0;
  padding: 10px 12px;
  border-radius: 11px;
  box-shadow: 0 3px 14px rgba(15, 23, 42, .045);
}

.charges-page-workspace .cc-repartition-block,
.charges-page-workspace .cc-billing-summary,
.charges-page-workspace .cc-billing-grid {
  margin: 0;
}

/* Les charges mensuelles et ponctuelles reprennent la densité et le rythme
   des listes métier : en-tête net, lignes séparées et survol discret. */
.charges-page-workspace .cc-charge-group {
  margin: 0 !important;
  padding: 0;
  overflow: hidden;
}

.charges-page-workspace .cc-charge-group + .cc-charge-group {
  margin-top: 0 !important;
}

.charges-page-workspace .cc-charge-group .charges-block-header {
  min-height: 50px;
  margin: 0;
  padding: 11px 14px;
  border-bottom: 1px solid var(--hd-color-border, var(--border));
  background: var(--hd-color-surface, var(--panel));
}

.charges-page-workspace .cc-charge-group .charges-subtitle {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

.charges-page-workspace .cc-charge-group .charges-total {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 650;
}

.charges-page-workspace .cc-charge-group .home-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  background: var(--hd-color-surface, var(--panel));
}

.charges-page-workspace :is(#chargesMensuellesList, #chargesPonctuellesList) > li.card-item {
  position: relative;
  min-height: 54px;
  padding: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--hd-color-border, var(--border)) 72%, transparent);
  background: var(--hd-color-surface, var(--panel));
  transition: background-color .15s ease, box-shadow .15s ease;
}

.charges-page-workspace :is(#chargesMensuellesList, #chargesPonctuellesList) > li.card-item:last-child {
  border-bottom: 0;
}

.charges-page-workspace :is(#chargesMensuellesList, #chargesPonctuellesList) > li.card-item::before {
  display: none;
}

.charges-page-workspace :is(#chargesMensuellesList, #chargesPonctuellesList) > li.card-item:hover,
.charges-page-workspace :is(#chargesMensuellesList, #chargesPonctuellesList) > li.card-item:focus-within {
  background: color-mix(in srgb, var(--panel) 94%, var(--accent) 6%);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 72%, transparent);
}

.charges-page-workspace.cc-mega-modal .cc-charge-group .rowChargeMensPonct {
  min-height: 54px;
  padding: 8px 12px 8px 14px;
  border-radius: 0;
  background: transparent;
}

.charges-page-workspace.cc-mega-modal .cc-charge-group .rowChargeMensPonct:hover {
  background: transparent;
}

.charges-page-workspace.cc-mega-modal .cc-charge-group .charge-title {
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
}

.charges-page-workspace.cc-mega-modal .cc-charge-group .titleRow {
  margin-right: 0;
}

.charges-page-workspace.cc-mega-modal .cc-charge-group .montantCharge {
  font-size: 13px;
  font-weight: 700;
}

.charges-page-workspace.cc-mega-modal .cc-charge-group .meta-charge,
.charges-page-workspace.cc-mega-modal .cc-charge-group .participation-pill {
  font-size: 12px;
  line-height: 1.4;
}

.charges-page-workspace .cc-charge-group .cc-group-actions {
  margin: 0;
  padding: 11px 14px;
  border-top: 1px solid var(--hd-color-border, var(--border));
  background: color-mix(in srgb, var(--panel) 97%, var(--accent) 3%);
}

@media (max-width: 720px) {
  .charges-page-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .charges-page-actions > button {
    width: 100%;
  }

  .charges-page-card {
    margin-inline: 0;
  }

  .charges-period-bar,
  .charges-period-copy {
    align-items: stretch;
    flex-direction: column;
  }

  .charges-period-copy {
    gap: 3px;
  }

  .charges-period-copy > small {
    padding: 0;
    border: 0;
  }

  .charges-period-controls {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    width: 100%;
  }

  .charges-period-select select {
    width: 100%;
    min-width: 0;
  }

  #chargesPeriodToday {
    grid-column: 1 / -1;
    width: 100%;
  }

  .charges-page-workspace.cc-mega-modal .cc-panel {
    padding: 0;
  }

  .charges-page-workspace .cc-overview {
    align-items: stretch;
    flex-direction: column;
    padding: 12px;
  }

  .charges-page-workspace .cc-overview-period {
    min-width: 0;
  }

  .charges-page-workspace .cc-overview-stats {
    justify-content: flex-start;
  }

  .charges-page-workspace .cc-balance-banner {
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 0;
  }

  .charges-page-workspace .cc-balance-banner > small {
    width: 100%;
  }

  .charges-page-workspace .cc-kpis {
    padding: 0;
  }
}