/* css/customers.css — styles owned by the matching view files (customers.js, co-holders.js, package.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}
.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;height:auto;min-height:calc(var(--control-h) - 8px);padding:4px 8px;line-height:1.2} /* a label may wrap on a phone; the button grows with it */
  .rem-nav{width:100%}
  .rem-date{flex:1}
  .rem-card{grid-template-columns:1fr;gap:10px}
  .rem-actions{flex-direction:column;min-width:0}
}

/* ---------- Mobile numbers, co-holders, emergency contacts ---------- */
.numbers{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-direction:column;gap:4px}
.num-edit{border:0;padding:0;margin:0;min-width:0}
.num-edit legend{font-size:var(--fs-sm);font-weight:500;padding:0;margin-bottom:8px}
.num-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px}
.num-row .num-hint{grid-column:1 / -1}
.num-field{display:flex;flex-wrap:wrap;gap:6px;min-width:0} /* the number goes under the country when the space is narrow */
.num-field .num-cc{flex:0 0 auto;width:auto;max-width:150px}
.num-field .input{flex:1 1 120px;min-width:0}
.num-warn{padding:6px 10px;margin-top:4px;font-size:var(--fs-xs)}
.num-row .num-hint:empty{display:none}
.num-hint a,.nv-new .hint a{color:inherit;font-weight:500}
.coholders{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:var(--fs-xs)}
.chip a{color:inherit}
.chip-x{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:-4px;border:0;border-radius:9999px;background:transparent;color:var(--text-muted);cursor:pointer;padding:0}
.chip-x:hover,.chip-x:focus-visible{background:var(--muted);color:var(--text)}
.chip-x .lucide{width:12px;height:12px}
.ec-list{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm)}
.ec-list li{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.ec-peek{margin-top:12px;padding-top:10px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:6px}
.btn.pick{justify-content:flex-start;height:auto;min-height:var(--control-h);padding:6px 10px;text-align:left;white-space:normal}
@media (max-width:640px){ .num-row{grid-template-columns:minmax(0,1fr) auto} .num-row label{grid-column:1} .num-field .num-cc{max-width:104px} }
.addons .held{margin:4px 0 0;padding-left:18px}

/* ---------- The package page: js/views/package.js ---------- */
.pkg .top .pkg-link{font-weight:500;color:inherit;text-decoration:underline;text-underline-offset:2px}
.pk-actions:not(:empty){margin-top:12px}
.pk-figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px}
.pk-figures > div{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius-sm)}
.pk-figures span{font-size:var(--fs-xs);color:var(--text-muted)}
.pk-figures b{font-size:calc(var(--fs) * 1.25);font-weight:600;font-variant-numeric:tabular-nums}
.pk-addons{margin:10px 0 0;padding-left:18px;font-size:var(--fs-sm)}
.pk-holders{display:flex;flex-direction:column;gap:8px;font-size:var(--fs-sm)}
.pk-filter{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:0 var(--pad) 12px}
.pk-count{font-variant-numeric:tabular-nums;color:var(--text-muted);margin-left:2px}
.pk-filter .seg button{height:auto;min-height:calc(var(--control-h) - 8px);padding:4px 10px;line-height:1.2;white-space:nowrap}
.pk-history{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm)}
.uses-table td{white-space:normal}
.uses-table td.pk-when{white-space:nowrap}
@media (max-width:640px){
  /* Each use is a card: when, branch, visit, who and what on the left, the status on the right. */
  .card.tight .uses-table{min-width:0}
  .uses-table,.uses-table tbody{display:block}
  .uses-table thead{display:none}
  .uses-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:12px;border-bottom:1px solid var(--border)}
  .uses-table td{display:block;height:auto;padding:0;border:0}
  .uses-table td:last-child{grid-column:2;grid-row:1 / span 3;justify-self:end}
  .uses-table tbody tr:hover td{background:none}
  .pk-filter{padding:0 12px 12px}
  .pk-filter .seg.wrap{display:flex}
}