/* Kontex Ventes — Rappels (#/a-faire, topbar badge, Paramètres › Rappels).
   Spec: design/13-phase2-spec.md §2.R. Feature R owns this file.
   Kontex Design System only (tokens of /kontex.css): one amber element per screen at most (none here: row actions
   only), Teal 700 actions, Plex Mono for money and refs, no horizontal scroll at 390 px. Every class is prefixed "rm-". */

/* ---------- « À faire »: a list of cards (not a table, so it stacks on phones) ---------- */
.rm-filters .rm-n{font-size:12px;font-weight:500;color:var(--text3);margin-inline-start:2px}
.rm-filters .filter-chip[aria-pressed="true"] .rm-n{color:var(--brand-text)}
.rm-summary{margin-top:-4px}
.rm-list{display:flex;flex-direction:column;gap:12px;min-width:0}
.rm-card{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:14px;row-gap:4px;align-items:start;padding:16px 20px;min-width:0}
.rm-card>*{grid-column:2;min-width:0}
.rm-card>.rm-ico{grid-column:1;grid-row:1}
.rm-card>.rm-top{grid-row:1;min-height:36px;align-items:center}
.rm-card--late{border-inline-start:3px solid var(--late-dot);padding-inline-start:18px}
.rm-ico{width:36px;height:36px;border-radius:var(--kx-radius-pill);background:var(--tint);color:var(--brand-text);display:flex;align-items:center;justify-content:center}
.rm-card--late .rm-ico{background:var(--late-bg);color:var(--late-text)}
.rm-top{display:flex;align-items:flex-start;justify-content:space-between;gap:6px 12px;flex-wrap:wrap}
.rm-title{font:600 15px/1.4 var(--kx-font-sans);color:var(--text);min-width:0;flex:1 1 220px;overflow-wrap:anywhere}
.rm-body{font:400 14px/1.5 var(--kx-font-sans);color:var(--text2);overflow-wrap:anywhere}
.rm-meta{font:400 12px/1.5 var(--kx-font-sans);color:var(--text3)}
.rm-ref,.rm-money{font-variant-numeric:tabular-nums;white-space:nowrap}
.rm-title .rm-ref{font-weight:600}
.rm-body .rm-money{font-size:13px;font-weight:500;color:var(--text)}
.rm-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.rm-snooze{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:4px;padding:10px 12px;background:var(--bg);border:1px solid var(--border-subtle);border-radius:var(--kx-radius-sm)}
.rm-snooze__lab{font:500 13px/1.4 var(--kx-font-sans);color:var(--text2);margin-inline-end:4px}

/* phones: the icon sits beside the title only; body and actions use the whole card width */
@media (max-width:767px){
  .rm-card{grid-template-columns:32px minmax(0,1fr);column-gap:12px;padding:14px 16px}
  .rm-card--late{padding-inline-start:14px}
  .rm-card>*{grid-column:1 / -1}
  .rm-card>.rm-ico{grid-column:1;grid-row:1;width:32px;height:32px}
  .rm-card>.rm-top{grid-column:2;grid-row:1;align-self:center}
  .rm-title{flex-basis:100%}
  /* default-size buttons (easy to tap): « Ouvrir » and « Fait » side by side, the long ones on their own row */
  .rm-acts .kx-btn{flex:1 1 calc(50% - 4px);min-width:0}
  .rm-acts [data-rm="wa"]{flex-basis:100%}
  .rm-snooze__lab{flex-basis:100%}
  .rm-snooze .kx-btn{flex:1 1 0;min-width:0}
}

/* ---------- Paramètres › Rappels ---------- */
.rm-rules{display:flex;flex-direction:column}
.rm-rule{display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,3fr);gap:12px 24px;padding:14px 0;border-top:1px solid var(--border-subtle);align-items:start}
.rm-rule:first-child{border-top:none;padding-top:0}
.rm-rule:last-child{padding-bottom:0}
.rm-rule__head{display:flex;flex-direction:column;gap:2px;min-width:0}
.rm-rule__label{font:500 14px/1.4 var(--kx-font-sans);color:var(--text)}
.rm-rule__fields{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px;min-width:0}
.rm-num{width:200px}
.rm-unit{display:flex;align-items:center;gap:8px}
.rm-unit .kx-input{width:88px}
.rm-unit span{font:400 13px/1.4 var(--kx-font-sans);color:var(--text3)}
.rm-rule--off .rm-rule__fields{opacity:.55}
.rm-save{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

@media (max-width:767px){
  .rm-rule{grid-template-columns:minmax(0,1fr);gap:8px}
  .rm-rule__head{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
  .rm-rule__fields{gap:12px}
  .rm-num{width:100%}
  .rm-unit .kx-input{flex:0 0 96px}
}