/* ====================== Recette / Dépense (cahier de caisse owner) ====================== */
.recette-shell {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

.recette-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.recette-head .section-title { margin-bottom: 0; }
.recette-head .page-intro { margin: 4px 0 0; }
.recette-head-title { display: flex; align-items: center; gap: 14px; }
.recette-head-title > i {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px;
  background: linear-gradient(135deg, #14a44d, #0c7d3a); color: #fff; flex: none;
  box-shadow: 0 10px 22px rgba(20, 138, 67, 0.32);
}
.recette-head-title h1 { margin: 0; font-size: 26px; letter-spacing: -0.02em; }
.recette-head-title p { margin: 3px 0 0; color: #5d6473; font-size: 14px; }
.recette-head-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* KPI */
.recette-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.recette-kpi {
  position: relative; background: #fff; border: 1px solid #e7e9f0; border-radius: 18px;
  padding: 20px 22px; box-shadow: 0 8px 22px rgba(17, 20, 45, 0.05); overflow: hidden;
}
.recette-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
.recette-kpi.is-revenue::before { background: #14a44d; }
.recette-kpi.is-expense::before { background: #e53a46; }
.recette-kpi.is-net-pos::before { background: #1268df; }
.recette-kpi.is-net-neg::before { background: #e53a46; }
.recette-kpi-ico { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #f1f3f9; color: #41485a; margin-bottom: 10px; }
.recette-kpi.is-revenue .recette-kpi-ico { background: #e7f7ee; color: #14a44d; }
.recette-kpi.is-expense .recette-kpi-ico { background: #fdeaec; color: #e53a46; }
.recette-kpi.is-net-pos .recette-kpi-ico { background: #e7f0fd; color: #1268df; }
.recette-kpi.is-net-neg .recette-kpi-ico { background: #fdeaec; color: #e53a46; }
.recette-kpi-value { font-size: 27px; font-weight: 800; letter-spacing: -0.02em; color: #14171f; }
.recette-kpi.is-net-neg .recette-kpi-value { color: #e53a46; }
.recette-kpi-label { color: #5d6473; font-size: 13px; font-weight: 600; margin-top: 2px; }

/* Panneaux */
.recette-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; }
.recette-panel { background: #fff; border: 1px solid #e7e9f0; border-radius: 18px; padding: 20px 22px; box-shadow: 0 8px 22px rgba(17, 20, 45, 0.05); }
.recette-panel-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.recette-panel-title h2 { margin: 0; font-size: 16px; font-weight: 700; }
.recette-count { background: #f1f3f9; color: #41485a; font-weight: 700; font-size: 13px; border-radius: 999px; padding: 3px 11px; }

/* Graphe mensuel (barres verticales recette vs dépense) */
.recette-chart { display: flex; align-items: flex-end; gap: 10px; height: 170px; padding-top: 6px; }
.recette-chart-month { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; }
.recette-bars { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 5px; width: 100%; }
.recette-bar-track { width: 44%; max-width: 26px; height: 100%; display: flex; align-items: flex-end; }
.recette-bar-track > i { display: block; width: 100%; min-height: 3px; border-radius: 6px 6px 0 0; }
.recette-bar-track > i.is-revenue { background: linear-gradient(180deg, #25c065, #148a43); }
.recette-bar-track > i.is-expense { background: linear-gradient(180deg, #f0616d, #d22f3c); }
.recette-chart-label { font-size: 11.5px; color: #6b7280; font-weight: 600; text-transform: capitalize; }
.recette-legend { display: flex; gap: 18px; margin-top: 14px; font-size: 12.5px; color: #5d6473; }
.recette-legend i.dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.recette-legend i.dot.is-revenue { background: #148a43; }
.recette-legend i.dot.is-expense { background: #e53a46; }

/* Formulaire */
.recette-form { display: flex; flex-direction: column; gap: 16px; }
.recette-type-toggle { display: inline-flex; gap: 8px; background: #f1f3f9; border-radius: 12px; padding: 5px; width: fit-content; }
.recette-type {
  appearance: none; border: none; background: transparent; cursor: pointer; display: inline-flex; align-items: center;
  gap: 7px; font-weight: 650; font-size: 14px; color: #5d6473; padding: 9px 18px; border-radius: 9px; transition: all .15s ease;
}
.recette-type.is-revenue.active { background: #fff; color: #14a44d; box-shadow: 0 2px 8px rgba(20, 138, 67, .2); }
.recette-type.is-expense.active { background: #fff; color: #e53a46; box-shadow: 0 2px 8px rgba(229, 58, 70, .2); }
.recette-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: #41485a; }
.recette-field-wide { grid-column: 1 / -1; }
.recette-msg { font-size: 13px; font-weight: 600; }
.recette-msg.state-success { color: #14a44d; }
.recette-msg.state-error { color: #e53a46; }

/* Historique */
.recette-history { display: flex; flex-direction: column; gap: 9px; }
.recette-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 16px; border: 1px solid #eceef4; border-left-width: 4px; border-radius: 12px; background: #fcfcfe;
}
.recette-row.tone-revenue { border-left-color: #14a44d; }
.recette-row.tone-expense { border-left-color: #e53a46; }
.recette-row-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.recette-row-main > strong { font-size: 14.5px; font-weight: 650; color: #14171f; overflow-wrap: anywhere; }
.recette-row-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 12.5px; color: #6b7280; }
.recette-chip { background: #eef1f7; color: #41485a; border-radius: 999px; padding: 2px 9px; font-weight: 600; }
.recette-auto { display: inline-flex; align-items: center; gap: 4px; color: #8a93a6; font-style: italic; }
.recette-row-amount { display: flex; align-items: center; gap: 12px; flex: none; }
.recette-row-amount > strong { font-size: 15px; font-weight: 750; white-space: nowrap; }
.recette-row-amount .is-revenue { color: #148a43; }
.recette-row-amount .is-expense { color: #d22f3c; }
.recette-del {
  appearance: none; border: 1px solid #f0c2c8; background: #fff; color: #d22f3c; cursor: pointer;
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; transition: all .15s ease;
}
.recette-del:hover { background: #fdeaec; }
.recette-del:disabled { opacity: .5; cursor: default; }

@media (max-width: 900px) {
  .recette-kpis { grid-template-columns: 1fr; }
  .recette-grid { grid-template-columns: 1fr; }
}