/* ============================================================
   WaMojo — App shell (dashboard / reseller / admin)
   ============================================================ */

.app { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
@media (max-width: 900px){ .app{ grid-template-columns: 74px 1fr; } .side .lbl,.side .brand-txt,.side .side-foot{ display:none; } }

/* ---- Sidebar ---- */
.side { background: var(--wa-teal-deep); color: #cfeede; display: flex; flex-direction: column; padding: 1.1rem .8rem; position: sticky; top: 0; height: 100vh; }
:root[data-theme="dark"] .side { background: #06231f; border-right: 1px solid #0d3a33; }
.side .brand { display:flex; align-items:center; gap:.6rem; padding:.4rem .5rem 1.2rem; }
.side .brand img { height: 30px; }
.side .brand-txt { font: 700 1.15rem/1 var(--font-display); color:#fff; }
.side nav { display: flex; flex-direction: column; gap: .25rem; }
.side .navitem { display:flex; align-items:center; gap:.85rem; padding:.7rem .8rem; border-radius: 12px; color:#bfe6d3; font-weight:500; font-size:.92rem; transition: background .2s, color .2s; }
.side .navitem svg { width:20px; height:20px; }
.side .navitem:hover { background: rgba(255,255,255,.08); color:#fff; }
.side .navitem.active { background: var(--wa-green); color:#053; font-weight:600; }
.side .navsec { font:700 .68rem/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:#6fae95; padding:1rem .8rem .4rem; }
.side-foot { margin-top:auto; background: rgba(255,255,255,.07); border-radius: 14px; padding: .9rem; }
.side-foot .bar { height:7px; background: rgba(255,255,255,.15); border-radius:99px; overflow:hidden; margin:.5rem 0; }
.side-foot .bar i { display:block; height:100%; background: linear-gradient(90deg,var(--mojo-lime),var(--wa-green)); border-radius:99px; }
.side-foot small { color:#a9d6c2; font-size:.72rem; }

/* ---- Main ---- */
.main { background: var(--bg); min-width:0; }
.topbar { position: sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: .9rem clamp(1rem,3vw,2rem); background: color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter: blur(10px); border-bottom:1px solid var(--line); }
.topbar h1 { font-size: 1.4rem; }
.searchbox { display:flex; align-items:center; gap:.6rem; background: var(--bg-elevated); border:1px solid var(--line-2); border-radius: var(--r-pill); padding:.55rem 1rem; color: var(--ink-3); width:min(360px,40vw); }
.searchbox input { border:none; background:none; outline:none; color:var(--ink); width:100%; font-size:.9rem; }
.topbar .actions { display:flex; align-items:center; gap:.7rem; }
.iconbtn { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; color:var(--ink-2); background:var(--bg-elevated); border:1px solid var(--line); position:relative; }
.iconbtn:hover{ border-color:var(--wa-green); color:var(--wa-teal); }
.iconbtn .dot { position:absolute; top:8px; right:9px; width:8px; height:8px; background:var(--mojo-coral); border-radius:50%; border:2px solid var(--bg-elevated); }
.avatar { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--mojo-mint),var(--wa-green)); display:grid; place-items:center; color:#053; font:700 .9rem/1 var(--font-body); }
.content { padding: clamp(1rem,3vw,2rem); }

/* ---- KPI cards ---- */
.kpis { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-4); }
@media (max-width: 1050px){ .kpis{ grid-template-columns:1fr 1fr; } }
.kpi { background: var(--bg-elevated); border:1px solid var(--line); border-radius: var(--r-md); padding: 1.2rem; }
.kpi .ic { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; margin-bottom:.7rem; }
.kpi .ic svg{ width:22px;height:22px; }
.kpi .val { font:700 1.9rem/1 var(--font-display); color:var(--ink); }
.kpi .lbl { color:var(--ink-3); font-size:.82rem; margin-top:.2rem; }
.kpi .delta { font-size:.75rem; font-weight:700; margin-top:.5rem; display:inline-flex; gap:.3rem; align-items:center; }
.kpi .delta.up { color: var(--wa-green-700); } .kpi .delta.down{ color: var(--mojo-coral); }
.ic.g{background:var(--wa-green-tint);color:var(--wa-teal)} .ic.v{background:#efeaff;color:var(--mojo-violet)} .ic.o{background:#fff3d6;color:#b8860b} .ic.c{background:#ffe9e5;color:var(--mojo-coral)}
:root[data-theme="dark"] .ic.v{background:#241d3d}:root[data-theme="dark"] .ic.o{background:#332a10}:root[data-theme="dark"] .ic.c{background:#3a1f1b}

/* ---- Panels / cards ---- */
.panel { background: var(--bg-elevated); border:1px solid var(--line); border-radius: var(--r-md); padding: 1.3rem; }
.panel h3 { font-size:1.05rem; display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.panel h3 a { font:600 .8rem/1 var(--font-body); color:var(--wa-teal); }
.grid-2 { display:grid; grid-template-columns: 2fr 1fr; gap: var(--sp-4); }
@media (max-width: 1050px){ .grid-2{ grid-template-columns:1fr; } }

/* ---- Chart (pure CSS/SVG) ---- */
.bars { display:flex; align-items:flex-end; gap:.7rem; height:180px; padding-top:.5rem; }
.bars .b { flex:1; background: linear-gradient(180deg,var(--wa-green),var(--wa-green-700)); border-radius:8px 8px 3px 3px; position:relative; min-width:8px; }
.bars .b span { position:absolute; bottom:-22px; left:0; right:0; text-align:center; font-size:.7rem; color:var(--ink-3); }
.bars .b.alt { background: linear-gradient(180deg,var(--mojo-mint),var(--wa-teal)); opacity:.9; }
.donut { width:150px; height:150px; border-radius:50%; background:
  conic-gradient(var(--wa-green) 0 62%, var(--mojo-gold) 62% 82%, var(--mojo-violet) 82% 100%); display:grid; place-items:center; margin-inline:auto; }
.donut .hole { width:96px; height:96px; border-radius:50%; background:var(--bg-elevated); display:grid; place-items:center; text-align:center; }
.legend { display:flex; flex-direction:column; gap:.5rem; margin-top:1rem; font-size:.82rem; }
.legend i { width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:.5rem; }

/* ---- Tables ---- */
.tbl { width:100%; border-collapse:separate; border-spacing:0; }
.tbl th { text-align:left; font:700 .72rem/1 var(--font-body); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); padding:.6rem .7rem; border-bottom:1px solid var(--line); }
.tbl td { padding:.75rem .7rem; border-bottom:1px solid var(--line); font-size:.88rem; color:var(--ink-2); }
.tbl tr:last-child td{ border-bottom:none; }
.tbl tr:hover td{ background: color-mix(in srgb,var(--wa-green) 5%,transparent); }
.st { display:inline-flex; align-items:center; gap:.4rem; font-weight:600; font-size:.76rem; padding:.28rem .6rem; border-radius:99px; }
.st.ok{ background:var(--wa-green-tint); color:var(--wa-green-700);} .st.warn{ background:#fff3d6; color:#9a7000;} .st.off{ background:#ffe9e5; color:var(--mojo-coral);} .st.info{ background:#e6f4ff; color:#0a6ebd;}
:root[data-theme="dark"] .st.warn{background:#332a10}:root[data-theme="dark"] .st.info{background:#0d2a3d}:root[data-theme="dark"] .st.off{background:#3a1f1b}
.mini-avatar{ width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--mojo-mint),var(--wa-green));display:inline-grid;place-items:center;color:#053;font:700 .72rem/1 var(--font-body);margin-right:.55rem;vertical-align:middle;}

/* ---- Buttons in app ---- */
.b-sm{ --pad-y:.55rem; --pad-x:1rem; font-size:.85rem; }

/* ---- Chat bubbles (shared with landing) ---- */
.bubble { max-width: 78%; padding: .5rem .75rem; border-radius: 12px; font-size: .9rem; box-shadow: var(--sh-sm); margin-bottom:.5rem; position:relative; width:fit-content; }
.bubble.in { background: var(--bubble-in); color: var(--ink); border-top-left-radius: 4px; }
.bubble.out { background: var(--bubble-out); color: var(--ink); margin-left:auto; border-top-right-radius: 4px; }
.bubble .meta { display:flex; align-items:center; gap:.3rem; justify-content:flex-end; font-size:.66rem; color: var(--ink-3); margin-top:.2rem; }
.ticks { color: var(--tick-blue); font-size:.8rem; }

/* ---- WhatsApp Web injected sidebar mock ---- */
.wa-shell { display:grid; grid-template-columns: 72px 400px 1fr 360px; height:100vh; background:var(--bg-chat); }
@media (max-width:1100px){ .wa-shell{ grid-template-columns:72px 1fr 340px; } .wa-shell .wa-chatlist{ display:none; } }
.wa-rail { background:#202c33; display:flex; flex-direction:column; align-items:center; gap:.4rem; padding:1rem .4rem; }
:root[data-theme="light"] .wa-rail{ background:#f0f2f5; }
.wa-rail .r { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:#8696a0; }
.wa-rail .r.on, .wa-rail .r:hover { background: var(--wa-green); color:#053; }
.wa-rail .r svg{ width:22px; height:22px; }
.wa-rail .rlabel{ font-size:.5rem; }
.wa-chatlist { background: var(--bg-elevated); border-right:1px solid var(--line); overflow:hidden; }
.wa-chatlist .search{ padding:.6rem .8rem; }
.wa-chatlist .search div{ background:var(--bg); border-radius:99px; padding:.5rem .9rem; color:var(--ink-3); font-size:.85rem; }
.wa-chatrow{ display:flex; gap:.7rem; padding:.7rem .8rem; border-bottom:1px solid var(--line); cursor:pointer; }
.wa-chatrow:hover{ background:var(--bg); }
.wa-chatrow.active{ background: color-mix(in srgb,var(--wa-green) 8%,transparent); }
.wa-chatrow .a{ width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--mojo-mint),var(--wa-green));flex:0 0 auto;display:grid;place-items:center;color:#053;font:700 .85rem/1 var(--font-body); }
.wa-chatrow .nm{ font-weight:600; color:var(--ink); font-size:.9rem; display:flex; justify-content:space-between; }
.wa-chatrow .nm span{ font-weight:500; color:var(--ink-3); font-size:.7rem; }
.wa-chatrow .pv{ color:var(--ink-3); font-size:.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:230px; }
.wa-chatrow .tag{ font-size:.64rem; padding:.1rem .45rem; border-radius:99px; background:var(--wa-green-tint); color:var(--wa-teal); font-weight:700; }
.wa-conv { display:flex; flex-direction:column; background:var(--bg-chat);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20h40M20 0v40' stroke='%2300000006' stroke-width='1'/%3E%3C/svg%3E"); }
.wa-conv .ch-top{ display:flex; align-items:center; gap:.7rem; padding:.7rem 1rem; background:var(--bg-elevated); border-bottom:1px solid var(--line); }
.wa-conv .ch-body{ flex:1; padding:1rem; overflow:auto; }
.wa-conv .ch-input{ display:flex; gap:.6rem; align-items:center; padding:.7rem 1rem; background:var(--bg-elevated); border-top:1px solid var(--line); }
.wa-conv .ch-input .box{ flex:1; background:var(--bg); border-radius:99px; padding:.6rem 1rem; color:var(--ink-3); font-size:.88rem; }
.wa-chips{ display:flex; gap:.4rem; flex-wrap:wrap; padding:.5rem 1rem; background:var(--bg-elevated); border-top:1px dashed var(--line); }
.wa-chip{ display:inline-flex; align-items:center; gap:.35rem; font:600 .74rem/1 var(--font-body); padding:.4rem .7rem; border-radius:99px; background:var(--wa-green-tint); color:var(--wa-teal); cursor:pointer; }
.wa-chip svg{ width:14px; height:14px; }
.wa-chip:hover{ background:var(--wa-green); color:#053; }

/* WaMojo panel docked on right of WA Web */
.wm-panel { background:var(--bg-elevated); border-left:1px solid var(--line); display:flex; flex-direction:column; }
.wm-panel .p-top{ background: var(--wa-teal-deep); color:#fff; padding:.9rem 1rem; display:flex; align-items:center; gap:.6rem; }
.wm-panel .p-top img{ height:22px; }
.wm-panel .p-top .t{ font:700 .95rem/1 var(--font-display); }
.wm-panel .p-body{ padding:1rem; overflow:auto; display:flex; flex-direction:column; gap:1rem; }
.wm-card{ border:1px solid var(--line); border-radius:14px; padding:1rem; }
.wm-card h4{ font:700 .8rem/1 var(--font-body); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); margin-bottom:.7rem; display:flex; justify-content:space-between; }
.field{ display:flex; flex-direction:column; gap:.35rem; margin-bottom:.7rem; }
.field label{ font-size:.76rem; color:var(--ink-3); font-weight:600; }
.field .inp{ border:1px solid var(--line-2); border-radius:10px; padding:.55rem .7rem; font-size:.85rem; color:var(--ink); background:var(--bg); }
.range-row{ display:flex; align-items:center; justify-content:space-between; font-size:.8rem; color:var(--ink-2); padding:.3rem 0; }
.switch{ width:38px; height:22px; border-radius:99px; background:var(--wa-green); position:relative; }
.switch::after{ content:''; position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%; background:#fff; }
.switch.off{ background:var(--line-2);} .switch.off::after{ left:2px; right:auto; }
.progress{ height:8px; background:var(--line); border-radius:99px; overflow:hidden; }
.progress i{ display:block; height:100%; background:linear-gradient(90deg,var(--wa-green),var(--wa-green-700)); }

/* kanban */
.kanban{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(240px,1fr); gap:1rem; overflow-x:auto; padding-bottom:.5rem; }
.kcol{ background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:.8rem; }
.kcol .kh{ display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:.85rem; margin-bottom:.7rem; }
.kcol .kh .cnt{ font-size:.7rem; background:var(--wa-green-tint); color:var(--wa-teal); padding:.15rem .5rem; border-radius:99px; }
.kcard{ background:var(--bg-elevated); border:1px solid var(--line); border-radius:12px; padding:.7rem; margin-bottom:.6rem; box-shadow:var(--sh-sm); }
.kcard .kn{ font-weight:600; font-size:.85rem; color:var(--ink); display:flex; align-items:center; }
.kcard .kp{ color:var(--ink-3); font-size:.76rem; margin:.35rem 0; }
.kcard .kt{ display:flex; gap:.3rem; flex-wrap:wrap; }
.kcard .kt span{ font-size:.62rem; padding:.12rem .45rem; border-radius:99px; background:var(--wa-green-tint); color:var(--wa-teal); font-weight:700; }
.dot-col{ width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:.4rem;}