/* ── SQUIRE LIGHT THEME — matched from screenshot ────────────────────────── */
:root {
  /* Surfaces */
  --bg:       #F2F2F7;
  --s1:       #FFFFFF;
  --s2:       #F8F8F8;
  --s3:       #EFEFEF;
  --s4:       #E5E5EA;

  /* Borders */
  --b1:       rgba(0,0,0,0.06);
  --b2:       rgba(0,0,0,0.10);
  --b3:       rgba(0,0,0,0.16);

  /* Text */
  --t1:       #1A1A1A;
  --t2:       rgba(0,0,0,0.50);
  --t3:       rgba(0,0,0,0.32);
  --t4:       rgba(0,0,0,0.15);

  /* Brand — electric blue */
  --blue:     #2B6FED;
  --blue-dim: rgba(43,111,237,0.10);
  --blue-mid: rgba(43,111,237,0.20);

  /* Semantic */
  --amber:     #D97706;
  --amber-dim: rgba(217,119,6,0.10);
  --red:       #E5342A;
  --red-dim:   rgba(229,52,42,0.09);
  --red-mid:   rgba(229,52,42,0.18);

  --topbar-h:   80px;
  --col-head-h: 72px;
  --botnav-h:   64px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;}
body{
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--t1);
  font-size:13px;
  -webkit-font-smoothing:antialiased;
}
button{font-family:'Inter',sans-serif;border:none;cursor:pointer;}

/* ── APP SHELL ────────────────────────────────────────────────────────────── */
.app{
  height:100vh;
  display:grid;
  grid-template-rows:var(--topbar-h) 1fr var(--botnav-h);
  overflow:hidden;
}

/* ── TOP BAR ─────────────────────────────────────────────────────────────── */
.topbar{
  background:#FAFAF7;
  border-bottom:1px solid var(--b1);
  display:flex;
  align-items:center;
  padding:0 20px;
  gap:16px;
}

.tb-brand{
  display:flex;align-items:center;gap:10px;flex:1;
}

.tb-clock{text-align:center;padding:0 20px;}
.tb-time{font-size:24px;font-weight:800;color:var(--t1);letter-spacing:-1px;line-height:1;}
.tb-date{font-size:11px;color:var(--t3);margin-top:2px;letter-spacing:0.01em;}

.tb-right{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:16px;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:14px;height:45px;border-radius:12px;
  font-size:14px;font-weight:500;letter-spacing:-0.1px;
  transition:all 0.12s;
  white-space:nowrap;text-align:center;
}
.btn-blue{
  background:#2563EB;
  color:white;
  border:none;
  padding:12px;
  border-radius:8px;
  font-weight:500;
  font-size:14px;
  cursor:pointer;
  font-family:inherit;
}
.btn-green{background:#16A34A;color:#fff;}
.btn-orange{background:#FB923C;color:#fff;}
.btn-ghost{background:var(--s3);color:var(--t2);border:1px solid var(--b2);border-radius:8px;}
.btn-icon{background:var(--s1);color:var(--t2);border:1px solid var(--b2);padding:0;}
.card-foot .btn.btn-icon{flex:0 0 45px;width:45px;border-radius:8px;}

/* ── QUEUE ───────────────────────────────────────────────────────────────── */
.queue{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:20px;
  padding:0 20px;
  background:#FAFAF7;
  overflow:hidden;
  min-height:0;
}
.queue-col{
  display:flex;flex-direction:column;
  overflow:hidden;min-height:0;
}
.queue-col:not(:last-child){border-right:1px solid var(--b1);margin-right:-17px;}

/* Column header */
.col-head{
  height:var(--col-head-h);
  padding:0 24px;
  display:flex;align-items:center;gap:10px;
  flex-shrink:0;
  background:#FAFAF7;
}
.col-title{
  font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.07em;
  color:var(--t1);flex:1;
}
.col-count{
  font-size:11px;font-weight:700;
  padding:2px 8px;border-radius:20px;
  background:var(--s3);color:var(--t3);
}
.col-waiting .col-count{background:var(--amber-dim);color:var(--amber);}
.col-chair   .col-count{background:var(--blue-dim);color:var(--blue);}

.col-head-btn{
  width:60px;height:32px;
  border-radius:8px;
  background:var(--s1);
  border:1px solid var(--b2);
  color:var(--t2);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:all 0.12s;
  flex-shrink:0;
  font-family:inherit;
}
.col-head-btn + .col-head-btn{margin-left:6px;}
.col-head-btn:hover{background:var(--s3);color:var(--t1);border-color:var(--b3);}

/* Card scroll */
.col-cards{
  flex:1;overflow-y:auto;
  padding:0 24px 28px;
  display:flex;flex-direction:column;gap:22px;
  min-height:0;
  background:#FAFAF7;
}
.col-cards{scrollbar-width:none;-ms-overflow-style:none;}
.col-cards::-webkit-scrollbar{display:none;}

.col-loader{
  display:flex;align-items:center;justify-content:center;
  padding:16px 0 8px;
  opacity:0;
  transition:opacity 0.2s;
  pointer-events:none;
}
.col-loader.on{opacity:1;}
.col-loader .spinner{
  width:22px;height:22px;
  border:2.5px solid var(--b2);
  border-top-color:var(--blue);
  border-radius:50%;
  animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── CARDS ───────────────────────────────────────────────────────────────── */
.card{
  background:var(--s1);
  border:1px solid var(--b2);
  border-radius:12px;
  overflow:visible;
  flex-shrink:0;
  animation:cardIn 0.3s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes cardIn{
  from{opacity:0;transform:translateY(5px);}
  to{opacity:1;transform:translateY(0);}
}
.card.leaving{
  animation:cardLeave 0.26s cubic-bezier(0.3,0,0.8,0.9) forwards;
  pointer-events:none;
}
@keyframes cardLeave{
  to{opacity:0;transform:translateX(28px) scale(0.96);}
}
.card.entering{
  animation:cardEnter 0.34s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes cardEnter{
  from{opacity:0;transform:translateX(-22px);}
  to{opacity:1;transform:translateX(0);}
}
.card.celebrate{
  animation:cardCelebrate 1s ease-out both;
}
.card.celebrate .card-foot{
  animation:footCelebrate 1s ease-out both;
}
.card.entering.celebrate{
  animation:
    cardEnter 0.34s cubic-bezier(0.16,1,0.3,1) both,
    cardCelebrate 1s ease-out both;
}
@keyframes cardCelebrate{
  0%,30%{background:var(--blue-dim);}
  100%{background:var(--s1);}
}
@keyframes footCelebrate{
  0%,30%{background:transparent;}
  100%{background:var(--s1);}
}
/* Card body */
.card-body{padding:20px 20px 0px;}

.card-row1{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:3px;}
.cust-name{font-size:18px;font-weight:500;color:var(--t1);letter-spacing:-0.4px;line-height:1.2;}
.card-time{
  font-size:14px;font-weight:400;color:rgba(0,0,0,0.70);
  white-space:nowrap;margin-left:8px;flex-shrink:0;
}
.card-time.delayed{color:var(--amber);}
.card-time.noshow{color:var(--red);}
.card-time.canceled{color:var(--t3);}
.card-time.chair-soon{color:var(--t3);}
.card-time.chair-almost{color:var(--amber);}
.card-time.chair-over{color:var(--red);}
.card-time.empty-stale{color:var(--amber);font-weight:600;}
.card-time.empty-urgent{color:var(--red);font-weight:600;}

/* Empty chair card: dotted border signals "placeholder / not occupied" */
.card-empty{border:2px dotted var(--b3);}
.card-add{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:18px 20px;
  background:transparent;color:var(--t2);
  font-family:inherit;font-size:14px;font-weight:500;letter-spacing:-0.1px;
  cursor:pointer;transition:all 0.12s;
}
.card-add:hover{background:var(--s3);color:var(--t1);border-color:var(--b4);}
.svc-line{font-size:13px;color:rgba(0,0,0,0.70);line-height:1.5;}
.svc-dur{color:var(--t3);}
.barber-line{font-size:13px;color:rgba(0,0,0,0.70);line-height:1.5;}
.barber-link{color:#2563EB;cursor:pointer;}

/* Meta row */
.card-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.barber-av{
  width:18px;height:18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:7px;font-weight:800;color:#000;
}

/* Card footer */
.card-foot{
  padding:18px 20px 22px;
  display:flex;gap:8px;
  border-radius:0 0 11px 11px;
  background:var(--s1);
}
.card-foot .btn{font-size:14.5px;flex:1;}

/* ── BOTTOM NAV ──────────────────────────────────────────────────────────── */
.botnav{
  background:#FAFAF7;
  border-top:1px solid var(--b1);
  display:flex;
  align-items:stretch;
  justify-content:space-around;
  padding:0 8px;
}
.botnav-item{
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:11px;font-weight:600;letter-spacing:-0.1px;
  color:var(--t3);
  background:transparent;
  cursor:pointer;
  transition:color 0.12s;
  padding:8px 6px;
  border-radius:10px;
}
.botnav-item svg{stroke:currentColor;}
.botnav-item.active{color:var(--blue);}

/* ── TOAST ───────────────────────────────────────────────────────────────── */
.toasts{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;z-index:999;pointer-events:none;}
.toast{
  background:var(--t1);
  border:1px solid var(--b2);
  color:#fff;
  border-radius:10px;padding:10px 18px;
  font-size:13px;font-weight:600;
  display:flex;align-items:center;gap:9px;
  animation:toastIn 0.3s cubic-bezier(0.16,1,0.3,1);
  pointer-events:all;white-space:nowrap;
}
@keyframes toastIn{from{opacity:0;transform:translateY(12px) scale(0.96);}to{opacity:1;transform:translateY(0) scale(1);}}
.toast.out{animation:toastOut 0.25s ease forwards;}
@keyframes toastOut{to{opacity:0;transform:translateY(6px) scale(0.97);}}

/* ── BARBER AVATAR (used in transactions) ────────────────────────────────── */
.bi-av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#000;}
.bi-name{font-size:13px;font-weight:600;color:var(--t1);}
.bi-status{font-size:11px;color:var(--t3);}
.bi-status.free{color:var(--blue);}

/* ── ACTION SHEET ────────────────────────────────────────────────────────── */
.sheet-scrim{
  position:fixed;inset:0;z-index:300;
  background:transparent;display:none;
}
.sheet-scrim.on{display:block;}
.sheet{
  position:fixed;z-index:301;
  min-width:230px;
  background:var(--s1);
  border:1px solid var(--b2);
  border-radius:12px;
  padding:6px;
  opacity:0;transform:translateY(4px) scale(0.98);
  transition:opacity 0.14s ease, transform 0.14s ease;
  pointer-events:none;
}
.sheet.on{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.sheet-item{
  display:flex;align-items:center;gap:12px;
  padding:11px 12px;border-radius:8px;
  font-size:13.5px;font-weight:500;color:var(--t1);
  cursor:pointer;
  transition:background 0.12s;
}
.sheet-item:hover{background:var(--s3);}
.sheet-item svg{flex-shrink:0;color:var(--t2);}
.sheet-item.danger{color:var(--red);}
.sheet-item.danger svg{color:var(--red);}
.sheet-sep{height:1px;background:var(--b1);margin:4px 6px;}

/* ── CLIENT AVATAR ────────────────────────────────────────────────────────── */
.client-avatar{
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,#60A5FA,#3B82F6);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:15px;flex-shrink:0;
}

/* ── TRANSACTIONS — LIST PAGE ─────────────────────────────────────────────── */
.tx-main{
  display:grid;
  grid-template-columns:1fr 420px;
  overflow:hidden;min-height:0;
  background:#FAFAF7;
}
.tx-date-nav{display:flex;align-items:center;gap:10px;}
.tx-date-arrow{
  width:36px;height:36px;border-radius:8px;
  background:var(--s3);color:var(--t2);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all 0.12s;flex-shrink:0;
}
.tx-date-arrow:hover{background:var(--s4);color:var(--t1);}
.tx-date-arrow.disabled{opacity:0.3;cursor:not-allowed;pointer-events:none;}

/* Right panel */
.tx-panel{
  background:var(--s1);
  display:flex;flex-direction:column;
  overflow:hidden;min-height:0;
  border-left:1px solid var(--b1);
}
.tx-panel-head{
  padding:20px 24px 16px;
  border-bottom:1px solid var(--b1);
  flex-shrink:0;
}
.tx-panel-title{
  font-size:18px;font-weight:700;letter-spacing:-0.4px;color:var(--t1);
}
.tx-panel-sub{
  font-size:13px;color:var(--t3);margin-top:4px;letter-spacing:-0.1px;
}

/* Panel head variant when showing a transaction detail (back arrow + title) */
.tx-panel-head-detail{
  display:flex;align-items:center;gap:12px;
}

/* Scrollable detail body inside the right panel */
.tx-panel-detail{
  padding:24px 24px 20px;
  overflow-y:auto;min-height:0;
  flex:1;display:flex;flex-direction:column;
  scrollbar-width:none;-ms-overflow-style:none;
}
.tx-panel-detail::-webkit-scrollbar{display:none;}
.tx-panel-detail .tx-amount-hero{font-size:40px;margin-bottom:8px;}
.tx-panel-detail .tx-payment-meta{margin-bottom:20px;}
.tx-panel-detail .tx-party-card,
.tx-panel-detail .tx-services-card{margin-bottom:14px;}
.tx-panel-detail .tx-actions{margin-top:16px;padding-top:0;}

/* Amount hero + send-receipt icon on one row */
.tx-panel-hero{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.tx-panel-hero .tx-amount-hero{margin-bottom:0;}
.tx-hero-send{
  flex:0 0 40px;width:40px;height:40px;border-radius:10px;
  cursor:pointer;
}
.tx-hero-send svg{display:block;}

/* Day summary — vertical stack of metric cards inside panel */
.tx-day-summary{
  display:flex;flex-direction:column;gap:12px;
  padding:20px 24px;
  overflow-y:auto;min-height:0;
}
.tx-day-summary-item{
  display:flex;flex-direction:column;gap:4px;
  background:var(--s1);
  border:1px solid var(--b1);
  border-radius:12px;
  padding:14px 16px;
}
.tx-day-summary-label{
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.08em;
  color:var(--t3);
}
.tx-day-summary-value{
  font-size:20px;font-weight:600;color:var(--t1);
  letter-spacing:-0.3px;font-variant-numeric:tabular-nums;
}

/* List container */
.tx-list{overflow-y:auto;min-height:0;padding:20px 24px 32px;}
.tx-list{scrollbar-width:none;-ms-overflow-style:none;}
.tx-list::-webkit-scrollbar{display:none;}
.tx-group{margin-top:22px;}
.tx-group:first-child{margin-top:16px;}

/* List row */
.card.tx-row{
  display:grid;
  grid-template-columns:64px minmax(0,1fr) 130px 28px 90px 100px 16px;
  align-items:center;gap:14px;
  padding:14px 18px;
  cursor:pointer;
  margin-bottom:8px;
  transition:border-color 0.12s, background 0.12s;
}
.card.tx-row:hover{border-color:var(--b3);background:#FCFCFC;}
.card.tx-row.selected{border-color:var(--blue);background:#F3F8FF;}
.card.tx-row.selected:hover{background:#F3F8FF;}
.tx-row .tx-time{
  font-size:13px;color:var(--t2);font-weight:500;
  font-variant-numeric:tabular-nums;
}
.tx-row .tx-customer{min-width:0;}
.tx-row .tx-customer .cust-name{
  font-size:15px;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tx-row .tx-customer .tx-svc{
  font-size:12.5px;color:var(--t3);line-height:1.3;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tx-row .tx-customer .tx-svc-refund{color:var(--red);font-weight:500;}
.tx-row .tx-barber{display:flex;align-items:center;gap:8px;min-width:0;}
.tx-row .tx-barber .bi-av{width:24px;height:24px;font-size:9px;flex-shrink:0;}
.tx-row .tx-barber .bi-name{
  font-size:13px;color:var(--t2);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tx-row .tx-method{
  display:flex;align-items:center;justify-content:center;
  color:var(--t3);
}
.tx-row .tx-amount{
  font-size:15px;font-weight:600;
  font-variant-numeric:tabular-nums;
  text-align:right;
  letter-spacing:-0.2px;
}
.tx-row .tx-status{justify-self:start;}
.tx-row .tx-chev{
  display:flex;align-items:center;justify-content:center;
  color:var(--t3);
}

/* Status pill variants */
.tx-status{
  padding:4px 10px;border-radius:20px;
  font-size:11px;font-weight:600;letter-spacing:0.02em;
  border:none;background:var(--s3);color:var(--t2);
  white-space:nowrap;
}
.tx-status.paid{background:var(--blue-dim);color:var(--blue);}
.tx-status.refunded{background:var(--red-dim);color:var(--red);}
.tx-status.partial{background:var(--amber-dim);color:var(--amber);}
.tx-status.voided{background:var(--s3);color:var(--t3);}
.tx-status.comped{background:var(--s3);color:var(--t3);}

/* Empty day state */
.tx-empty{
  padding:80px 20px;text-align:center;
  color:var(--t3);font-size:14px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.tx-empty-icon{
  width:56px;height:56px;border-radius:50%;
  background:var(--s3);
  display:flex;align-items:center;justify-content:center;
  color:var(--t3);margin-bottom:6px;
}
.tx-empty-title{font-size:15px;font-weight:600;color:var(--t2);}

/* ── TRANSACTION DETAIL — SHARED WITH DETAIL PAGE ─────────────────────────── */
.tx-detail-shell{
  display:flex;flex-direction:column;
  overflow:hidden;min-height:0;
  background:#FAFAF7;
}
.tx-detail-body{
  display:grid;grid-template-columns:1fr 420px;
  flex:1;overflow:hidden;min-height:0;
}
.tx-left-panel{
  background:var(--s1);
  border-left:1px solid var(--b1);
  padding:32px 32px 28px;
  overflow-y:auto;min-height:0;
  display:flex;flex-direction:column;gap:16px;
}
.tx-left-panel{scrollbar-width:none;-ms-overflow-style:none;}
.tx-left-panel::-webkit-scrollbar{display:none;}
.tx-right-panel{
  background:#FAFAF7;
  padding:40px 48px 32px;
  overflow-y:auto;min-height:0;
  display:flex;flex-direction:column;
}
.tx-right-panel{scrollbar-width:none;-ms-overflow-style:none;}
.tx-right-panel::-webkit-scrollbar{display:none;}

.tx-state-eyebrow{
  font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.1em;
  color:var(--blue);margin-bottom:10px;
}
.tx-state-eyebrow.refunded{color:var(--red);}
.tx-state-eyebrow.partial{color:var(--amber);}
.tx-state-eyebrow.voided,
.tx-state-eyebrow.comped{color:var(--t3);}

.tx-amount-hero{
  font-size:52px;font-weight:700;letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums;line-height:1;
  margin-bottom:10px;color:var(--t1);
}
.tx-payment-meta{
  font-size:14px;color:var(--t2);
  margin-bottom:28px;line-height:1.5;
}

/* Refund banner + history in detail right panel */
.tx-refunded-banner{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;margin-bottom:22px;
  background:var(--red-dim);
  border:1px solid rgba(229,52,42,0.2);
  border-radius:10px;
  color:var(--t1);
}
.tx-refunded-banner svg{color:var(--red);flex-shrink:0;margin-top:1px;}
.tx-refunded-banner-text{font-size:13.5px;line-height:1.5;}
.tx-refunded-banner-text strong{color:var(--red);font-weight:700;}

.tx-refund-history{
  margin-bottom:24px;
  border:1px solid var(--b1);border-radius:10px;
  padding:6px 0;background:var(--s2);
}
.tx-refund-history-title{
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.08em;
  color:var(--t3);padding:10px 14px 8px;
}
.tx-refund-item{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:12px;padding:8px 14px;
  border-top:1px solid var(--b1);
  font-size:13px;
}
.tx-refund-item:first-of-type{border-top:none;}
.tx-refund-item-label{color:var(--t1);font-weight:500;}
.tx-refund-item-meta{font-size:11.5px;color:var(--t3);margin-top:2px;}
.tx-refund-item-amount{
  font-variant-numeric:tabular-nums;font-weight:600;
  color:var(--red);
}

.tx-actions{
  margin-top:auto;padding-top:24px;
  display:flex;flex-direction:column;gap:10px;
}
.tx-actions .btn{width:100%;height:48px;font-size:14.5px;}
.tx-actions .btn-blue{background:var(--blue);}
.tx-actions .btn:disabled{opacity:0.4;cursor:not-allowed;}

/* Client / barber card inside left panel (mirrors checkout brand-module) */
.tx-party-card{
  background:var(--s1);
  border:1px solid var(--b1);
  border-radius:12px;
  padding:14px 16px;
}
.tx-party-row{display:flex;align-items:center;gap:12px;}
.tx-party-row + .tx-party-row{
  margin-top:12px;padding-top:12px;
  border-top:1px solid var(--b1);
}
.tx-party-name{font-size:15px;font-weight:600;color:var(--t1);letter-spacing:-0.2px;}
.tx-party-sub{font-size:12px;color:var(--t2);margin-top:2px;}

/* Services + totals block inside left panel */
.tx-services-card{
  background:var(--s1);
  border:1px solid var(--b1);
  border-radius:12px;
  overflow:hidden;
}
.tx-services-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px 12px;
  font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.08em;
  color:var(--t3);
}
.tx-service-line{
  display:flex;justify-content:space-between;align-items:center;
  gap:16px;padding:10px 16px;
  border-top:1px solid var(--b1);
  font-size:13.5px;
}
.tx-service-name{font-weight:500;color:var(--t1);letter-spacing:-0.1px;}
.tx-service-meta{font-size:11.5px;color:var(--t3);margin-top:1px;}
.tx-service-price{
  font-variant-numeric:tabular-nums;font-weight:500;color:var(--t1);
}
.tx-totals{
  padding:12px 16px 14px;
  border-top:1px solid var(--b1);
  background:var(--s2);
}
.tx-totals-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:4px 0;font-size:13px;color:var(--t2);
  font-variant-numeric:tabular-nums;
}
.tx-totals-row.grand{
  margin-top:6px;padding-top:9px;
  border-top:1px solid var(--b1);
  font-size:15px;font-weight:600;color:var(--t1);
  letter-spacing:-0.2px;
}

/* Refund sheet items */
.sheet-item .sheet-sub{font-size:11.5px;color:var(--t3);margin-top:1px;}
.sheet-item.disabled{opacity:0.4;cursor:not-allowed;pointer-events:none;}

/* Confirm refund modal (reused pattern) */
.tx-confirm-scrim{
  position:fixed;inset:0;z-index:400;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;
  padding:24px;
}
.tx-confirm-scrim.on{display:flex;}
.tx-confirm-card{
  background:var(--s1);border-radius:16px;
  padding:28px;max-width:420px;width:100%;
  text-align:center;
}
.tx-confirm-title{
  font-size:20px;font-weight:700;letter-spacing:-0.3px;
  margin-bottom:8px;color:var(--t1);
}
.tx-confirm-sub{
  font-size:13.5px;color:var(--t2);
  margin-bottom:22px;line-height:1.5;
}
.tx-confirm-actions{display:flex;gap:10px;}
.tx-confirm-actions .btn{flex:1;height:44px;}
.tx-confirm-actions .btn-danger{
  background:var(--red);color:#fff;
}
.tx-confirm-actions .btn-danger:hover{background:#C42B22;}

/* ── CLIENTS — LIST PAGE ──────────────────────────────────────────────────── */
.cl-main{
  display:flex;flex-direction:column;
  overflow:hidden;min-height:0;
  background:#FAFAF7;
}
.cl-toolbar{
  display:flex;align-items:center;gap:12px;
  padding:16px 24px 8px;
  flex-shrink:0;
}
.cl-search{
  position:relative;flex:1;max-width:480px;
}
.cl-search svg{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--t3);pointer-events:none;
}
.cl-search input{
  width:100%;height:40px;
  border:1px solid var(--b2);border-radius:10px;
  background:var(--s1);
  padding:0 14px 0 40px;
  font-family:inherit;font-size:14px;color:var(--t1);
  outline:none;transition:border-color 0.12s;
}
.cl-search input::placeholder{color:var(--t3);}
.cl-search input:focus{border-color:var(--blue);}

.cl-sort{
  display:inline-flex;align-items:center;gap:4px;
  margin-left:auto;
  background:var(--s3);
  border:1px solid var(--b2);
  border-radius:10px;
  padding:3px;
  height:40px;
}
.cl-sort-btn{
  height:32px;padding:0 14px;
  background:transparent;
  border:none;border-radius:7px;
  font-family:inherit;font-size:13px;font-weight:500;
  color:var(--t2);
  cursor:pointer;transition:all 0.12s;
}
.cl-sort-btn:hover{color:var(--t1);}
.cl-sort-btn.active{
  background:var(--t2);
  color:#fff;
  font-weight:600;
}

/* Column-scoped sort bar — sits inline in col-head, right-aligned */
.col-sort{
  display:flex;align-items:center;gap:4px;
  margin-left:auto;
  background:#FAFAF7;
  border:1px solid var(--b2);
  border-radius:10px;
  padding:3px;
  height:32px;
  flex-shrink:0;
}
.col-sort .cl-sort-btn{height:24px;padding:0 10px;font-size:12px;}

.cl-list{overflow-y:auto;min-height:0;padding:20px 24px 32px;}
.cl-list{scrollbar-width:none;-ms-overflow-style:none;}
.cl-list::-webkit-scrollbar{display:none;}

/* Client list row */
.card.cl-row{
  display:grid;
  grid-template-columns:44px minmax(0,1.3fr) minmax(0,1fr) 110px 80px 16px;
  align-items:center;gap:16px;
  padding:12px 18px;
  cursor:pointer;
  margin-bottom:8px;
  transition:border-color 0.12s, background 0.12s;
}
.card.cl-row:hover{border-color:var(--b3);background:#FCFCFC;}
.cl-row .cl-avatar{
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,#60A5FA,#3B82F6);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:14px;flex-shrink:0;
}
.cl-row .cl-name{
  font-size:15px;font-weight:500;color:var(--t1);letter-spacing:-0.1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cl-row .cl-phone{
  font-size:13px;color:var(--t2);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cl-row .cl-last{
  font-size:12.5px;color:var(--t2);
  font-variant-numeric:tabular-nums;
}
.cl-row .cl-last-muted{color:var(--t3);}
.cl-row .cl-visits{
  font-size:13px;font-weight:600;color:var(--t1);
  font-variant-numeric:tabular-nums;text-align:center;
}
.cl-row .cl-visits-label{
  font-size:10.5px;font-weight:500;color:var(--t3);
  letter-spacing:0.02em;margin-top:1px;text-align:center;
}
.cl-row .cl-chev{
  display:flex;align-items:center;justify-content:center;
  color:var(--t3);
}

/* Empty state */
.cl-empty{
  padding:80px 20px;text-align:center;
  color:var(--t3);font-size:14px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.cl-empty-icon{
  width:56px;height:56px;border-radius:50%;
  background:var(--s3);
  display:flex;align-items:center;justify-content:center;
  color:var(--t3);margin-bottom:6px;
}
.cl-empty-title{font-size:15px;font-weight:600;color:var(--t2);}

/* ── CLIENT DETAIL PAGE ───────────────────────────────────────────────────── */
.cl-detail-body{
  display:grid;grid-template-columns:1fr 420px;
  flex:1;overflow-y:auto;min-height:0;
  align-items:start;
  background:linear-gradient(to right,
    transparent 0,
    transparent calc(100% - 421px),
    var(--b1) calc(100% - 421px),
    var(--b1) calc(100% - 420px),
    var(--s1) calc(100% - 420px));
  scrollbar-width:none;-ms-overflow-style:none;
}
.cl-detail-body::-webkit-scrollbar{display:none;}
.cl-detail-left{
  padding:32px 32px 28px;
  display:flex;flex-direction:column;gap:20px;
}
.cl-detail-right{
  padding:32px 32px 28px;
  display:flex;flex-direction:column;gap:16px;
}

/* Hero — big avatar + name + contact + stats */
.cl-hero{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:24px 20px;
  background:var(--s1);
  border:1px solid var(--b1);
  border-radius:14px;
  text-align:center;
}
.cl-hero-avatar{
  width:96px;height:96px;border-radius:50%;
  background:linear-gradient(135deg,#60A5FA,#3B82F6);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:36px;letter-spacing:-0.5px;
}
.cl-hero-name{
  font-size:22px;font-weight:700;color:var(--t1);letter-spacing:-0.4px;
}
.cl-hero-contact{
  display:flex;flex-direction:column;gap:4px;
  font-size:13.5px;color:var(--t2);
  font-variant-numeric:tabular-nums;
}
.cl-hero-contact .cl-contact-email{color:var(--t3);font-size:12.5px;}

/* Stats row under hero */
.cl-stats{
  display:grid;grid-template-columns:repeat(3, 1fr);
  gap:10px;width:100%;margin-top:8px;
}
.cl-stat{
  background:var(--s2);
  border:1px solid var(--b1);
  border-radius:10px;
  padding:12px 10px;
  text-align:center;
}
.cl-stat-value{
  font-size:16px;font-weight:700;color:var(--t1);
  font-variant-numeric:tabular-nums;letter-spacing:-0.2px;
}
.cl-stat-label{
  font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:0.06em;
  color:var(--t3);margin-top:3px;
}

.cl-book-btn{
  width:100%;height:48px;
  background:var(--blue);color:#fff;
  border-radius:10px;
  font-size:14.5px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;transition:background 0.12s;
}
.cl-book-btn:hover{background:#1E5BC8;}

/* Cards on the right column */
.cl-card{
  background:var(--s2);
  border:1px solid var(--b1);
  border-radius:12px;
  overflow:hidden;
}
#detail-left .cl-card{background:var(--s1);}
.cl-card-head{
  padding:12px 16px;
  font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.08em;
  color:var(--t3);
  border-bottom:1px solid var(--b1);
  display:flex;justify-content:space-between;align-items:center;
}

/* Photo card */
.cl-photo-wrap{
  aspect-ratio:1 / 1;
  background:var(--s3);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.cl-photo-wrap img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.cl-photo-empty{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--t3);font-size:13px;
  padding:40px 20px;
}
.cl-photo-empty-icon{
  width:48px;height:48px;border-radius:50%;
  background:var(--s1);border:1px solid var(--b1);
  display:flex;align-items:center;justify-content:center;
}

/* Notes card */
.cl-notes{
  padding:14px 16px;
  font-size:13.5px;color:var(--t1);line-height:1.5;
  white-space:pre-wrap;
}
.cl-notes-empty{
  padding:14px 16px;
  font-size:13px;color:var(--t3);font-style:italic;
}

/* Past transactions mini-list */
.cl-tx-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) 70px 16px;
  align-items:center;gap:12px;
  padding:12px 16px;
  border-top:1px solid var(--b1);
  cursor:pointer;transition:background 0.12s;
}
.cl-tx-item:hover{background:var(--s1);}
.cl-tx-item:first-of-type{border-top:none;}
.cl-tx-date{
  font-size:13.5px;font-weight:500;color:var(--t1);
  font-variant-numeric:tabular-nums;letter-spacing:-0.1px;
}
.cl-tx-svc{
  font-size:12px;color:var(--t3);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cl-tx-amount{
  font-size:14px;font-weight:600;color:var(--t1);
  font-variant-numeric:tabular-nums;text-align:right;
}
.cl-tx-chev{color:var(--t3);display:flex;align-items:center;justify-content:center;}
.cl-tx-empty{
  padding:18px 16px;font-size:13px;color:var(--t3);font-style:italic;
}

/* ── BARBER DETAIL PAGE ──────────────────────────────────────────────────── */
.bb-cal{
  display:grid;
  grid-template-columns:130px 1fr 1fr;
}
.bb-cal-h{
  padding:10px 14px;
  background:var(--s1);
  border-bottom:1px solid var(--b1);
  font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.06em;
  color:var(--t3);
}
.bb-cal-h-sub{
  display:block;margin-top:2px;
  font-size:10.5px;font-weight:500;
  text-transform:none;letter-spacing:0;
  color:var(--t3);
}
.bb-cal-t{
  padding:0 14px;
  border-top:1px solid var(--b1);
  display:flex;align-items:center;
  min-height:44px;
  font-size:12.5px;color:var(--t3);
  font-variant-numeric:tabular-nums;letter-spacing:-0.1px;
  white-space:nowrap;
}
.bb-cal-s{
  padding:0 14px;
  border-top:1px solid var(--b1);
  display:flex;align-items:center;
  min-height:44px;
  font-size:12.5px;
}
.bb-cal-s .barber-link{
  font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bb-book-btn{
  height:28px;padding:0 14px;
  background:var(--blue-dim);
  color:var(--blue);
  border-radius:6px;
  font-family:inherit;
  font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.06em;
  cursor:pointer;
  transition:background 0.12s;
}
.bb-book-btn:hover{background:var(--blue-mid);}

/* Transactions list on barber page — reuses .cl-tx-item but with a third column for time */
.bb-tx-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) 70px 16px;
  align-items:center;gap:12px;
  padding:12px 16px;
  border-top:1px solid var(--b1);
  cursor:pointer;transition:background 0.12s;
}
.bb-tx-item:first-of-type{border-top:none;}
.bb-tx-item:hover{background:var(--s1);}
.bb-tx-name{
  font-size:13.5px;font-weight:600;color:var(--t1);letter-spacing:-0.1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bb-tx-sub{
  font-size:12px;color:var(--t3);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-variant-numeric:tabular-nums;
}