/* Cashier — WhatsApp inbox — dashboard design, scoped under .crdts-dash.
   Page-private classes live here so the shell stylesheet stays generic. */

/* Font guard: the design sets Rubik/Cairo; keep the icon font out of it. */
.crdts-dash h1,.crdts-dash h2,.crdts-dash h3,.crdts-dash h4,.crdts-dash h5,.crdts-dash h6,.crdts-dash p,.crdts-dash span,.crdts-dash a,.crdts-dash b,.crdts-dash strong,.crdts-dash small,.crdts-dash em,.crdts-dash i,.crdts-dash li,.crdts-dash ul,.crdts-dash ol,.crdts-dash button,.crdts-dash label,.crdts-dash input,.crdts-dash textarea,.crdts-dash select,.crdts-dash summary,.crdts-dash blockquote,.crdts-dash th,.crdts-dash td,.crdts-dash legend,.crdts-dash figcaption,.crdts-dash option:not(.material-symbols-outlined):not([class*="material-symbols"]):not(.material-symbols-rounded):not([class*="material-symbols-rounded"]){font-family:inherit}
.crdts-dash .material-symbols-outlined,.crdts-dash [class*="material-symbols"]{
  font-family:'Material Symbols Outlined'!important;font-weight:400;font-style:normal;
  line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;
  white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:'liga';
  -webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}

/* ============ whatsapp inbox: three-pane cockpit ============ */

.crdts-dash .wa-notice{display:flex;align-items:center;gap:13px;background:#fff9e4;
  border:1px solid #f6edb9;border-radius:11px;padding:15px 20px;margin-bottom:18px}
.crdts-dash .wa-notice-ico{width:38px;height:38px;border-radius:10px;background:#fff;
  border:1px solid #f2e7bd;color:#d99500;display:grid;place-items:center;flex-shrink:0}
.crdts-dash .wa-notice-ico svg{width:18px;height:18px}
.crdts-dash .wa-notice-body{min-width:0;flex:1}
.crdts-dash .wa-notice-body p{font-size:13px;font-weight:600;color:#38382d;margin:0}
.crdts-dash .wa-notice-body span{font-size:11.5px;color:#8c8c81;display:block;margin-top:3px}

.crdts-dash .wa-grid{display:grid;grid-template-columns:minmax(0,264px) minmax(0,1fr) minmax(0,250px);
  gap:18px;align-items:stretch;height:calc(100vh - 268px);min-height:540px}
.crdts-dash .wa-grid.two{grid-template-columns:minmax(0,264px) minmax(0,1fr)}
.crdts-dash .wa-col{display:flex;flex-direction:column}
.crdts-dash .wa-col-list,.crdts-dash .wa-col-chat,.crdts-dash .wa-col-detail{min-width:0}
.crdts-dash .wa-col-head{display:flex;align-items:center;gap:11px;padding:14px 16px;
  border-bottom:1px solid var(--line);background:#fff;flex-shrink:0}
.crdts-dash .wa-col-head h2{font-size:15px;margin:0;flex:1;min-width:0;line-height:1.7}
.crdts-dash .wa-col-head .icon-action{flex-shrink:0}
.crdts-dash .wa-col-body{flex:1;min-height:0;overflow-y:auto}
.crdts-dash .wa-avatar{width:40px;height:40px;background:#f6f3e8;color:#9c936f}
.crdts-dash .wa-avatar-fb{background:#f6f3e8;color:#9c936f;font-size:12px}
.crdts-dash .wa-avatar-wrap{position:relative;flex-shrink:0;display:block}
.crdts-dash .wa-avatar-lg{width:84px;height:84px;margin:0 auto}
.crdts-dash .wa-avatar-lg-fb{background:#171714;color:#fff;font-size:24px;font-weight:700}
.crdts-dash .wa-spin{animation:waSpin 1s linear infinite}
@keyframes waSpin{to{transform:rotate(360deg)}}
.crdts-dash .wa-loading{display:flex;align-items:center;justify-content:center;gap:9px;
  padding:26px 0;color:#8c8c81;font-size:12px}
.crdts-dash .wa-loading svg{width:18px;height:18px;color:#c9c9bd}
.crdts-dash .wa-pane-empty{flex:1;min-height:0;display:grid;place-items:center;padding:22px 16px}
.crdts-dash .wa-pane-empty .ai-empty h3{font-size:14px}

.crdts-dash .wa-list-head{display:block;padding:14px 14px 12px}
.crdts-dash .wa-list-top{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.crdts-dash .wa-list-top h2{flex:1;min-width:0}
.crdts-dash .wa-sliders{color:#babbb0;display:inline-flex;align-items:center}
.crdts-dash .wa-sliders svg{width:16px;height:16px}
.crdts-dash .wa-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;
  padding:0 6px;border-radius:20px;background:#171714;color:#fff;font-size:10px;font-weight:700}
.crdts-dash .wa-badge.hot{background:var(--orange)}
.crdts-dash .wa-search{width:100%;margin-bottom:10px}
.crdts-dash .wa-search input{width:100%}
.crdts-dash .wa-filters{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.crdts-dash .wa-chip{border:1px solid #eaeae1;background:#f8f8f2;border-radius:20px;
  padding:6px 11px;font-size:11px;color:#7e7e6e;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s}
.crdts-dash .wa-chip:hover{background:#fff6d4;border-color:#f0dfa8}
.crdts-dash .wa-chip.on{background:#171714;border-color:#171714;color:#fff;font-weight:600}
.crdts-dash .wa-sync{margin-inline-start:auto;width:28px;height:28px;border-radius:50%;
  border:1px solid #eaeae1;background:#fff;color:#8a8a78;display:grid;place-items:center;
  cursor:pointer;flex-shrink:0}
.crdts-dash .wa-sync:hover:not(:disabled){background:#fff6d4}
.crdts-dash .wa-sync:disabled{opacity:.5;cursor:not-allowed}
.crdts-dash .wa-sync svg{width:14px;height:14px}

.crdts-dash .wa-list-body{padding:8px}
.crdts-dash .wa-list-body>.crdts-dash{background:transparent;padding:18px 6px}
.crdts-dash .wa-conv{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:start;
  padding:11px 10px;border-radius:8px;border:1px solid transparent;cursor:pointer;
  transition:background .15s,border-color .15s}
.crdts-dash .wa-conv:hover{background:#f8f8f5}
.crdts-dash .wa-conv.on{background:#fff9e4;border-color:#f0d99a}
.crdts-dash .wa-conv-body{min-width:0;flex:1;display:block}
.crdts-dash .wa-conv-row1{display:flex;align-items:center;gap:8px}
.crdts-dash .wa-conv-name{font-size:12.5px;font-weight:700;color:#38382d;min-width:0;flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crdts-dash .wa-conv-time{font-size:10px;color:#b4b4a7;flex-shrink:0}
.crdts-dash .wa-conv.unread .wa-conv-time{color:var(--orange);font-weight:700}
.crdts-dash .wa-conv-tag{margin-top:6px;display:inline-block}
.crdts-dash .wa-conv-row2{display:flex;align-items:center;gap:8px;margin-top:5px}
.crdts-dash .wa-conv-msg{font-size:11.5px;color:#a1a18f;min-width:0;flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crdts-dash .wa-conv-msg svg{width:13px;height:13px;vertical-align:-2px;margin-inline-end:4px;
  color:#8c8c81}
.crdts-dash .wa-dot-green{position:absolute;inset-block-end:0;inset-inline-end:0;width:12px;
  height:12px;border-radius:50%;background:#648166;border:2px solid #fff;display:block}

.crdts-dash .wa-chat-head{gap:12px;padding:12px 16px}
.crdts-dash .wa-chat-who{display:flex;align-items:center;gap:11px;min-width:0;flex:1}
.crdts-dash .wa-chat-id{min-width:0;display:block}
.crdts-dash .wa-chat-name{display:block;font-size:13px;font-weight:700;color:#171714;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crdts-dash .wa-chat-sub{display:flex;align-items:center;gap:9px;margin-top:4px}
.crdts-dash .wa-phone{font-size:11px;color:#a1a194;margin:0;direction:ltr;text-align:end}
.crdts-dash .wa-head-acts{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.crdts-dash .wa-mini{display:inline-flex;align-items:center;gap:6px;border:1px solid #eaeae1;
  background:#fff;border-radius:6px;padding:7px 10px;font-size:11px;color:#7e7e6e;cursor:pointer;
  white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.crdts-dash .wa-mini svg{width:13px;height:13px}
.crdts-dash .wa-mini:hover:not(:disabled){background:#fff6d4;border-color:#f0dfa8}
.crdts-dash .wa-mini.on{background:#171714;border-color:#171714;color:#fff}
.crdts-dash .wa-mini.gold{background:#fff9e4;border-color:#f6edb9;color:#8a6d00}
.crdts-dash .wa-mini.danger{color:#c94742;border-color:#f0d5cb}
.crdts-dash .wa-mini:disabled{opacity:.5;cursor:not-allowed}
.crdts-dash .wa-back{display:none}

.crdts-dash .wa-thread{flex:1;min-height:0;overflow-y:auto;background:#f8f8f5;padding:18px 20px;
  display:flex;flex-direction:column;gap:10px}
.crdts-dash .wa-thread>.wa-loading,.crdts-dash .wa-thread>.ai-empty{margin:auto}
.crdts-dash .wa-thread>.ai-empty{max-width:320px;padding:22px 14px}
.crdts-dash .wa-bubble-row{display:flex}
.crdts-dash .wa-bubble-row.me{justify-content:flex-end}
.crdts-dash .wa-bubble{max-width:78%;border-radius:12px;padding:10px 13px;font-size:12.5px;
  line-height:1.85;word-break:break-word;white-space:pre-wrap}
.crdts-dash .wa-bubble.ai{background:#fff;border:1px solid #efefe7;color:#494938;
  border-start-start-radius:3px;border-end-start-radius:3px}
.crdts-dash .wa-bubble.me{background:#171714;color:#fff;border-start-end-radius:3px;
  border-end-end-radius:3px}
.crdts-dash .wa-bubble-media{display:block;max-width:100%;max-height:250px;border-radius:8px;
  margin-bottom:8px}
.crdts-dash .wa-bubble-file{display:flex;align-items:center;gap:8px;border-radius:8px;padding:8px 10px;
  margin-bottom:8px;font-size:11.5px;font-weight:600}
.crdts-dash .wa-bubble.ai .wa-bubble-file{background:#f8f8f5;color:#494938}
.crdts-dash .wa-bubble.me .wa-bubble-file{background:#ffffff24;color:#fff}
.crdts-dash .wa-bubble-file svg{width:14px;height:14px;flex-shrink:0}
.crdts-dash .wa-bubble-file span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crdts-dash .wa-bubble-text{margin:0}
.crdts-dash .wa-bubble-foot{display:flex;align-items:center;gap:5px;margin-top:6px;font-size:9.5px;
  opacity:.65}
.crdts-dash .wa-bubble-row.me .wa-bubble-foot{justify-content:flex-end}
.crdts-dash .wa-bubble-foot svg{width:13px;height:13px}

.crdts-dash .wa-composer-wrap{border-top:1px solid var(--line);background:#fff;flex-shrink:0;
  padding:11px 16px 14px;display:grid;gap:10px}
.crdts-dash .wa-quickbar{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.crdts-dash .wa-composer{display:flex;align-items:center;gap:9px}
.crdts-dash .wa-composer-input{flex:1;min-width:0;height:40px;border:1px solid #e5e5db;
  border-radius:8px;background:#f8f8f5;padding:0 14px;font-size:12.5px;color:inherit;
  font-family:inherit;outline:none;transition:border-color .15s,background .15s}
.crdts-dash .wa-composer-input:focus{border-color:#e0c266;background:#fff}
.crdts-dash .wa-composer-input::placeholder{color:#a1a194}
.crdts-dash .wa-send{width:40px;height:40px;border-radius:9px;background:#171714;color:#fff;
  display:grid;place-items:center;cursor:pointer;flex-shrink:0;transition:background .15s}
.crdts-dash .wa-send:hover:not(:disabled){background:#38382f}
.crdts-dash .wa-send:disabled{opacity:.4;cursor:not-allowed}
.crdts-dash .wa-send svg{width:17px;height:17px}
.crdts-dash .wa-tools{display:flex;align-items:center;gap:2px;position:relative;flex-shrink:0}
.crdts-dash .wa-tool{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;
  color:#8c8c81;cursor:pointer}
.crdts-dash .wa-tool:hover:not(:disabled){background:#f8f8f5;color:#6c6c5e}
.crdts-dash .wa-tool:disabled{opacity:.45;cursor:not-allowed}
.crdts-dash .wa-tool svg{width:17px;height:17px}
.crdts-dash .wa-emoji{position:absolute;inset-block-end:40px;inset-inline-end:0;z-index:30;
  width:286px;background:#fff;border:1px solid var(--line);border-radius:11px;
  box-shadow:0 12px 34px #1717141f;padding:10px;display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.crdts-dash .wa-emoji button{height:30px;border-radius:6px;font-size:16px;line-height:1;cursor:pointer}
.crdts-dash .wa-emoji button:hover{background:#fff6d4}
.crdts-dash .wa-attach{display:flex;align-items:center;gap:9px;border:1px solid #efefe7;
  background:#f8f8f5;border-radius:8px;padding:8px 10px;font-size:11.5px;color:#6c6c5e}
.crdts-dash .wa-attach img{width:36px;height:36px;border-radius:6px;object-fit:cover}
.crdts-dash .wa-attach>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crdts-dash .wa-attach button{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;
  color:#a1a194;cursor:pointer;flex-shrink:0}
.crdts-dash .wa-attach button:hover{background:#fff0ed;color:#c94742}
.crdts-dash .wa-attach svg{width:14px;height:14px}

.crdts-dash .wa-detail-body{padding:16px 16px 20px;display:grid;gap:18px;align-content:start}
.crdts-dash .wa-cust{text-align:center}
.crdts-dash .wa-cust-name{display:block;font-size:15px;font-weight:700;color:#171714;margin-top:12px;
  line-height:1.6}
.crdts-dash .wa-note-chip{display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  background:#fff6d8;border:1px solid #f2e7bd;color:#a5760d;border-radius:20px;padding:6px 11px;
  font-size:10.5px;line-height:1.7}
.crdts-dash .wa-note-chip svg{width:13px;height:13px}
.crdts-dash .wa-progress{display:flex;align-items:center;gap:9px;margin-top:14px}
.crdts-dash .wa-progress b{font-size:11px;color:#b87512;flex-shrink:0}
.crdts-dash .wa-progress .quota-bar{flex:1}
.crdts-dash .wa-progress-label{font-size:10px;color:#b4b4a7;margin:7px 0 0}
.crdts-dash .wa-acts{display:flex;gap:8px;margin-top:14px}
.crdts-dash .wa-acts>*{flex:1;justify-content:center}
.crdts-dash .wa-full{width:100%;justify-content:center}
.crdts-dash .wa-mt{margin-top:9px}
.crdts-dash .wa-acts svg,.crdts-dash .wa-full svg{width:14px;height:14px}
.crdts-dash .wa-block-title{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:11px;font-weight:700;color:#a1a194;margin:0 0 10px}
.crdts-dash .wa-block-link{font-size:10px;color:var(--orange);font-weight:400}
.crdts-dash .wa-wallet{border:1px solid #f6edb9;border-radius:11px;padding:15px 16px;
  background:linear-gradient(120deg,#fff9e4,#fff3bf);color:#8a6d00}
.crdts-dash .wa-tier{display:inline-block;background:#fff;border-radius:20px;padding:4px 9px;
  font-size:10.5px;font-weight:700;color:#8a6d00;margin-bottom:9px}
.crdts-dash .wa-wallet small{display:block;font-size:10.5px;color:#a08a3e}
.crdts-dash .wa-wallet strong{display:block;font-size:26px;line-height:1.35;color:#5b4700;margin-top:2px}
.crdts-dash .wa-wallet strong span{font-size:12px;font-weight:400;color:#a08a3e}
.crdts-dash .wa-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}
.crdts-dash .wa-tile{border:1px solid #efefe7;background:#fcfcfa;border-radius:9px;padding:12px 8px;
  text-align:center;cursor:pointer;transition:background .15s,border-color .15s}
.crdts-dash .wa-tile:hover{background:#fff6d4;border-color:#f0dfa8}
.crdts-dash .wa-tile svg{width:17px;height:17px;color:var(--orange);margin:0 auto 7px;display:block}
.crdts-dash .wa-tile b{display:block;font-size:11.5px;color:#38382d;font-weight:600}
.crdts-dash .wa-tile span{font-size:10px;color:#a1a18f;display:block;margin-top:3px}
.crdts-dash .wa-txs{display:grid;gap:7px}
.crdts-dash .wa-tx-empty{font-size:11px;color:#a1a194;text-align:center;padding:10px 0;margin:0}
.crdts-dash .wa-tx{display:flex;align-items:center;gap:9px;border:1px solid #efefe7;border-radius:8px;
  padding:9px 10px;background:#fcfcfa}
.crdts-dash .wa-tx-ico{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  font-size:13px;font-weight:700;flex-shrink:0}
.crdts-dash .wa-tx-ico.pos{background:#f2f8f2;color:#4e6b4f}
.crdts-dash .wa-tx-ico.neg{background:#fff0ed;color:#c94742}
.crdts-dash .wa-tx-body{min-width:0;flex:1;display:block}
.crdts-dash .wa-tx-body b{display:block;font-size:11.5px;font-weight:500;color:#38382d;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crdts-dash .wa-tx-body span{font-size:9.5px;color:#b4b4a7}
.crdts-dash .wa-tx-amt{font-size:11.5px;font-weight:700;flex-shrink:0}
.crdts-dash .wa-tx-amt.pos{color:#648166}
.crdts-dash .wa-tx-amt.neg{color:#c94742}
.crdts-dash .wa-guest{text-align:center;padding:14px 4px 4px}
.crdts-dash .wa-guest .wa-avatar{width:64px;height:64px;margin:0 auto 4px}
.crdts-dash .wa-guest-note{font-size:11.5px;color:#a1a194;line-height:1.9;margin:12px 0 14px}

@media(max-width:1200px){
  .crdts-dash .wa-grid{grid-template-columns:minmax(0,218px) minmax(0,1fr) minmax(0,206px);gap:14px}
  .crdts-dash .wa-grid.two{grid-template-columns:minmax(0,218px) minmax(0,1fr)}
}
@media(max-width:980px){
  .crdts-dash .wa-grid,.crdts-dash .wa-grid.two{grid-template-columns:1fr;height:auto;min-height:0}
  .crdts-dash .wa-col-list,.crdts-dash .wa-col-chat{height:calc(100vh - 214px);min-height:460px}
  .crdts-dash .wa-col-list.on-thread{display:none}
  .crdts-dash .wa-col-chat.no-thread{display:none}
  .crdts-dash .wa-back{display:grid}
}
@media(max-width:680px){
  .crdts-dash .wa-grid{gap:14px}
  .crdts-dash .wa-notice{flex-wrap:wrap}
  .crdts-dash .wa-notice-body{flex:1 0 100%}
  .crdts-dash .wa-thread{padding:14px 12px}
  .crdts-dash .wa-bubble{max-width:86%}
  .crdts-dash .wa-head-acts{gap:6px}
  .crdts-dash .wa-emoji{width:238px;grid-template-columns:repeat(7,1fr)}
}