/* =====================================================================
   public/app/lists.css: the list system the owner chose (14 October 2026), for Customers and Bookings

   "Version 3": the new surfaces with the old density (tokens in shell.css). Filters are chips with 10px corners and
   a plain count; the search a field with 10px corners; the list one soft panel; rows 56 with a hairline between them
   and round ends, so a tinted row (under the pointer, open, urgent) is a soft shape, never a box; neutral avatars 32;
   the plain status chip; one quiet row button 34. Each page keeps only its own parts (customers.css, schedule.css,
   money.css; Money's period tabs are these chips too).
   Every colour and size is a token. Hover only where a pointer hovers.
   ===================================================================== */

/* ---------- the filters: chips ---------- */
#crm .cust-bar .t-tabs,#bookings .t-tabs.bk-f,#crm .mo-bar .t-tabs{gap:6px;padding:0;border:0;border-radius:0;background:none}
#crm .cust-bar .t-tabs-pill,#bookings .bk-f .t-tabs-pill,#crm .mo-bar .t-tabs-pill{display:none}
#crm .cust-bar .t-tab,#bookings .bk-f .t-tab,#crm .mo-bar .t-tab{flex:none;gap:6px;height:var(--h-filter);padding:0 12px;border-radius:var(--r-btn);background:var(--chip-off);box-shadow:inset 0 0 0 1px var(--chip-off-ring);font-size:var(--fs-sm);font-weight:500;white-space:nowrap;color:var(--ink-2);
  transition:background-color var(--duration-quick) var(--ease-out),color var(--duration-quick) var(--ease-out),scale var(--duration-quick) var(--ease-out)}
#crm .cust-bar .t-tab[aria-selected="true"],#bookings .bk-f .t-tab[aria-selected="true"],#crm .mo-bar .t-tab[aria-selected="true"]{background:var(--chip-on);box-shadow:var(--chip-on-hi);font-weight:600;color:var(--on-chip-on)}
#crm .cust-bar .t-tab .tab-n,#bookings .bk-f .t-tab .tab-n,#crm .mo-bar .t-tab .tab-n{min-width:0;height:auto;padding:0;border-radius:0;background:none;font-size:var(--fs-sm);font-weight:500;color:var(--ink-3)}
#crm .cust-bar .t-tab[aria-selected="true"] .tab-n,#bookings .bk-f .t-tab[aria-selected="true"] .tab-n,#crm .mo-bar .t-tab[aria-selected="true"] .tab-n{color:var(--chip-on-n)}
@media (hover:hover){#crm .cust-bar .t-tab:not([aria-selected="true"]):hover,#bookings .bk-f .t-tab:not([aria-selected="true"]):hover,#crm .mo-bar .t-tab:not([aria-selected="true"]):hover{background:var(--chip-off-hover);color:var(--ink)}}
#crm .cust-bar .t-tab:active,#bookings .bk-f .t-tab:active,#crm .mo-bar .t-tab:active{scale:.96}

/* ---------- the list on one soft panel ---------- */
#crm .cu-split>.card,#bookings #bk-list.card{overflow:hidden;border:1px solid var(--card-edge);border-radius:var(--r-panel);background:var(--card-sheen);box-shadow:var(--card-lift)}
:is(#crm,#bookings) .tbl-wrap{padding:8px 12px 4px}
:is(#crm,#bookings) .tbl.lt thead th{background:none;box-shadow:inset 0 -1px 0 var(--hair-2);border-radius:0;font-weight:500;color:var(--ink-3)}
/* every row has round ends, so a tinted one is a soft shape in the round panel, never a box (the owner); the hairline
   between rows is a 1px line drawn in the cells' background, which the ends clip */
:is(#crm,#bookings) .tbl.lt td{height:var(--h-list-row);border-bottom:0;background-image:linear-gradient(var(--hair),var(--hair));background-repeat:no-repeat;background-size:100% 1px;background-position:0 100%}
:is(#crm,#bookings) .tbl.lt tbody tr:last-child td{background-image:none}
:is(#crm,#bookings) .tbl.lt tbody td:first-child{border-start-start-radius:var(--r-row-tint);border-end-start-radius:var(--r-row-tint)}
:is(#crm,#bookings) .tbl.lt tbody td:last-child{border-start-end-radius:var(--r-row-tint);border-end-end-radius:var(--r-row-tint)}
@media (hover:hover){:is(#crm,#bookings) .tbl tr.row:hover td{background:var(--row-hover)}}
:is(#crm,#bookings) .tbl tr.row.sel td,:is(#crm,#bookings) .tbl.lt tr[aria-current="true"] td{background:var(--btn-2-hover)}
:is(#crm,#bookings) .lt-who{gap:12px}
:is(#crm,#bookings) .lt-who b{font-weight:600}
:is(#crm,#bookings) .lt-av,:is(#crm,#bookings) .lt-av.info,:is(#crm,#bookings) .lt-av.ok{width:var(--av-list);height:var(--av-list);background:var(--avatar-row);box-shadow:inset 0 1px 0 var(--btn-2-hi),inset 0 0 0 1px var(--tile-ring);font-size:var(--fs-meta);color:var(--avatar-ink)}
:is(#crm,#bookings) .lt-act{gap:8px;min-width:92px;height:var(--h-list-btn);padding:0 12px;border:0;border-radius:var(--r-btn);background:var(--btn-2);box-shadow:inset 0 1px 0 var(--btn-2-hi),inset 0 0 0 1px var(--btn-2-ring);font-size:var(--fs-sm);font-weight:500;color:var(--ink)}
:is(#crm,#bookings) .lt-act svg.i{width:16px;height:16px}
@media (hover:hover){:is(#crm,#bookings) .lt-act:hover{background:var(--btn-2-hover);color:var(--ink)}}
:is(#crm,#bookings) .lt-act:active{scale:.96}
:is(#crm,#bookings) .lt-more{width:36px;height:36px;border-radius:50%;color:var(--ink-3)}
:is(#crm,#bookings) .tfoot{padding:12px 24px 16px}

/* ---------- the side panel that opens a record (an appointment, a lead): quiet buttons with 10px corners, the main one lit ---------- */
.drawer{border-radius:var(--r-panel)}
.drawer .dr-h,.drawer .dr-f{border-color:var(--hair)}
.drawer .btn{gap:8px;height:var(--h-field);padding:0 14px;border:0;border-radius:var(--r-btn);background:var(--btn-2);box-shadow:inset 0 1px 0 var(--btn-2-hi),inset 0 0 0 1px var(--btn-2-ring);font-size:var(--fs-sm);font-weight:500;color:var(--ink)}
.drawer .btn svg.i{width:16px;height:16px}
.drawer :is(.btn-primary,.btn-strong){background:var(--lime);box-shadow:var(--edge-primary),var(--glow-btn);font-weight:600;color:var(--night)}
.drawer .btn-danger{color:var(--err-ink)}
.drawer .btn-ghost{background:none;box-shadow:none;color:var(--ink-2)}
@media (hover:hover){.drawer .btn:not(.btn-primary):not(.btn-strong):not(.btn-danger):not(.btn-ghost):hover{background:var(--btn-2-hover);color:var(--ink)}.drawer :is(.btn-primary,.btn-strong):hover{background:var(--lime-hover);color:var(--night)}.drawer .btn-danger:hover{background:var(--err-bg);box-shadow:inset 0 0 0 1px var(--err-line)}}
.drawer .btn:active{scale:.96}

/* ---------- a phone: each row a soft stacked shape (each page lays out its own lines) ---------- */
@media (max-width:760px){
  :is(#crm,#bookings) .tbl.lt td{height:auto;border-bottom:0}
  :is(#crm,#bookings) .tbl tr.row{border-bottom:0;border-radius:var(--r-row-tint);background-image:linear-gradient(var(--hair),var(--hair));background-repeat:no-repeat;background-size:100% 1px;background-position:0 100%}
  :is(#crm,#bookings) .tbl tbody tr.row:last-child{background-image:none}
  :is(#crm,#bookings) .tbl-wrap{padding:6px 6px 2px}
  #crm .cust-bar .t-tabs,#bookings .t-tabs.bk-f,#crm .mo-bar .t-tabs{display:flex;overflow-x:auto;scrollbar-width:none}
  #crm .cust-bar .t-tab,#bookings .bk-f .t-tab,#crm .mo-bar .t-tab{flex:none;min-width:0;padding:0 14px}
}
@media (pointer:coarse){
  #crm .cust-bar .t-tab,#bookings .bk-f .t-tab,#crm .mo-bar .t-tab{height:40px}
  #crm .cust-bar .t-tab::after,#bookings .bk-f .t-tab::after,#crm .mo-bar .t-tab::after{content:"";position:absolute;inset:-2px 0}
  :is(#crm,#bookings) .lt-act{height:var(--h-ctl)} /* 32 to see (Solid Glass), 44 to press by the button's invisible edge (app.css) */
  :is(#crm,#bookings) .lt-more{width:var(--h-touch);height:var(--h-touch)}
  .drawer .btn{height:var(--h-ctl)}
}
@media (prefers-reduced-motion:reduce){
  #crm .cust-bar .t-tab,#bookings .bk-f .t-tab,#crm .mo-bar .t-tab{transition:none}
  #crm .cust-bar .t-tab:active,#bookings .bk-f .t-tab:active,#crm .mo-bar .t-tab:active,:is(#crm,#bookings) .lt-act:active,.drawer .btn:active{scale:1}
}