/* ============================================================
   PASSAGE — fee schedules / retainer / invoice UI.
   All new classes here are prefixed `fee-`. Mobile-first: base rules
   target the ~390px phone width used elsewhere in the app; wider
   layouts are added at the same breakpoints as mobile.css/mobile-
   records.css (640px / 900px) rather than introducing new ones.
   ============================================================ */

.fee-panels{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:900px){ .fee-panels{ grid-template-columns:1fr; } }
/* grid items default to a content-based min-width, so a panel can render
   wider than its own 1fr track and force the page to scroll sideways —
   this is what actually let the "Send retainer" button run off a 390px
   screen even though nothing inside the panel needs more than ~350px. */
.fee-panel{ min-width:0; }

.fee-panel .hint{ font-weight:500; }

.fee-send-row{ display:flex; gap:8px; align-items:center; margin:8px 0 14px; flex-wrap:wrap; }
.fee-pkg-select{
  flex:1 1 180px; min-width:0; border:1px solid var(--stroke); border-radius:12px;
  padding:9px 12px; background:var(--paper); font-size:13.5px; color:var(--ink);
}
@media (max-width:480px){
  /* a select + button sharing one row is the first thing to get tight on a
     phone — stack instead of letting either get squeezed into clipping. */
  .fee-send-row{ flex-direction:column; align-items:stretch; }
  .fee-send-row .fee-pkg-select{ flex-basis:auto; }
  .fee-send-row button{ width:100%; }
}

.fee-row-list{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.fee-row-card{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 13px; border:1px solid var(--stroke-soft); border-radius:14px;
  background:var(--paper); cursor:pointer; transition:border-color .2s,transform .2s;
}
.fee-row-card:hover{ border-color:var(--gold); transform:translateY(-1px); }
.fee-row-main{ min-width:0; flex:1; }
.fee-row-title{ font-weight:600; font-size:13.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fee-row-sub{ font-size:12px; color:var(--ink-soft); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fee-row-side{ display:flex; align-items:center; gap:8px; flex:0 0 auto; flex-wrap:wrap; justify-content:flex-end; }
.fee-link-chip{
  font-size:11px; font-weight:600; color:var(--gold-deep); background:rgba(169,130,76,.1);
  padding:3px 9px; border-radius:99px; white-space:nowrap;
}
.fee-inline-link{
  margin:10px 0; padding:9px 12px; border-radius:12px; background:var(--bone);
  font-size:13px; color:var(--ink-soft); cursor:pointer;
}
.fee-inline-link b{ color:var(--gold-deep); }

.fee-add-link{ font-size:12px; font-weight:600; color:var(--gold-deep); text-decoration:none; float:right; }

.fee-item-row{
  display:grid; grid-template-columns:1fr 60px 90px 80px 28px; gap:6px; align-items:center; margin-bottom:6px;
}
@media (max-width:520px){
  .fee-item-row{ grid-template-columns:1fr 1fr; grid-template-areas:"desc desc" "qty price" "line remove"; }
  .fee-item-row .fi-desc{ grid-area:desc; }
  .fee-item-row .fi-qty{ grid-area:qty; }
  .fee-item-row .fi-price{ grid-area:price; }
  .fee-item-row .fi-line{ grid-area:line; }
  .fee-item-row .fi-remove{ grid-area:remove; justify-self:end; }
}
.fee-item-row input{
  border:1px solid var(--stroke); border-radius:10px; padding:7px 9px; font-size:13px;
  background:var(--paper); color:var(--ink); width:100%;
}
.fee-item-row .fi-line{ font-size:13px; font-weight:600; text-align:right; color:var(--ink); white-space:nowrap; }
.fee-item-row .fi-remove{
  border:none; background:transparent; color:var(--ink-faint); font-size:18px; line-height:1; cursor:pointer;
  width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.fee-item-row .fi-remove:hover{ background:rgba(140,59,46,.1); color:var(--red); }

.fee-mini-totals{ display:flex; gap:14px; font-size:13px; color:var(--ink-soft); flex-wrap:wrap; }
.fee-mini-totals .fee-grand{ font-weight:700; color:var(--gold-deep); }
.fee-mini-totals b{ color:var(--ink); }
.fee-mini-totals .fee-grand b{ color:var(--gold-deep); }

.fee-settings-panel .fee-pkg-group{ margin-top:18px; }
.fee-settings-panel .fee-pkg-group:first-of-type{ margin-top:8px; }
.fee-pkg-group-h{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft);
  margin-bottom:8px;
}
.fee-pkg-card{
  display:flex; flex-direction:column; gap:2px; padding:10px 13px; border:1px solid var(--stroke-soft);
  border-radius:14px; background:var(--paper); cursor:pointer; margin-bottom:8px; transition:border-color .2s;
}
.fee-pkg-card:hover{ border-color:var(--gold); }
.fee-pkg-name{ font-weight:600; font-size:13.5px; color:var(--ink); }
.fee-pkg-sub{ font-size:12px; color:var(--ink-soft); }

.fee-complete-banner{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:13px 16px; margin-bottom:14px; border-radius:16px;
  background:linear-gradient(135deg, rgba(169,130,76,.14), rgba(216,184,119,.08));
  border:1px solid rgba(169,130,76,.35);
}
.fee-complete-txt{ font-size:13.5px; color:var(--ink); }
.fee-complete-txt b{ color:var(--gold-deep); }

@media (max-width:600px){
  .fee-complete-banner{ flex-direction:column; align-items:flex-start; }
  .fee-row-card{ flex-wrap:wrap; }
  .fee-row-side{ width:100%; justify-content:flex-start; }
}