/* css/customers.css — styles owned by the matching view files (customers.js and reminders.js) */

/* ---------- Customers: list ---------- */
.cust-filters{border-bottom:1px solid var(--border);flex-wrap:wrap;gap:10px}
.cust-filters .search{flex:1;min-width:200px}
.cust-filters .cust-count{margin-left:auto}
.cust-scroll{overflow-x:auto}
.tabular{font-variant-numeric:tabular-nums}
.cust-table .who small{font-size:var(--fs-xs)}
.cust-table .who .phone-only{display:none;color:var(--text-soft);margin-top:2px}

/* ---------- Customers: record ---------- */
.backlink{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--text-muted);text-decoration:none;margin-bottom:6px}
.backlink:hover{color:var(--text);text-decoration:underline}
.cust-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.empty.compact{padding:12px 0}
.pkg{border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;display:flex;flex-direction:column;gap:8px;font-size:var(--fs-sm)}
.pkg .top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.pkg .top b{font-weight:500}
.pkg .meta{display:flex;gap:6px;flex-wrap:wrap}
.pkg .addons{color:var(--text-muted);font-size:var(--fs-xs)}
.note-actions{display:flex;justify-content:flex-end;margin-top:12px}

/* ---------- Customers: new and edit dialog ---------- */
.cust-form{display:flex;flex-direction:column;gap:var(--gap)}
.cust-form .quick{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.cust-form .span2{grid-column:1 / -1}
.cust-form .field[hidden]{display:none}
.field .error a{color:inherit;font-weight:500}

/* ---------- Reminders ---------- */
.rem-nav .seg button{display:inline-flex;align-items:center}
.rem-date{width:auto;min-width:170px}
.rem-card{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);padding:14px;display:grid;grid-template-columns:64px 1.1fr 1.6fr auto;gap:14px;align-items:start}
.rem-time{font-weight:600;font-variant-numeric:tabular-nums;padding-top:2px}
.rem-who{display:flex;flex-direction:column;gap:4px;min-width:0}
.rem-who small{color:var(--text-muted)}
.rem-who .row{flex-wrap:wrap;gap:6px;margin-top:2px}
.rem-link{font-weight:500;text-decoration:none}
.rem-link:hover{text-decoration:underline}
.rem-preview{font-size:var(--fs-sm);background:var(--muted-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px}
.rem-preview small{display:block;color:var(--text-muted);font-size:var(--fs-xs);margin-bottom:4px}
.rem-actions{display:flex;flex-direction:column;gap:8px;min-width:220px}
.rem-actions .btn{justify-content:center}
.rem-note{display:inline-flex;align-items:center;gap:8px;min-height:var(--control-h);color:var(--text-muted);font-size:var(--fs-sm)}
.rem-sent{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-xs);color:var(--text-muted)}

/* ---------- Breakpoints ---------- */
@media (max-width:1023px){
  .rem-card{grid-template-columns:64px 1fr}
  .rem-preview,.rem-actions{grid-column:1 / -1}
  .rem-actions{flex-direction:row;flex-wrap:wrap}
  .rem-actions .btn{flex:1}
}
@media (max-width:640px){
  .card.tight .cust-table{min-width:0}
  .cust-table .ph-hide{display:none}
  .cust-table .who .phone-only{display:block}
  .cust-table td{white-space:normal}
  .cust-table .actions-cell{display:none}
  .cust-filters .seg{width:100%}
  .cust-filters .seg button{flex:1}
  .rem-nav{width:100%}
  .rem-date{flex:1}
  .rem-card{grid-template-columns:1fr;gap:10px}
  .rem-actions{flex-direction:column;min-width:0}
}