/* Live chat rail and compact, centered dialogs. */
body:not(.light)[data-route=chat] .support-layout .support-client{background:#161717;--chat-panel:#161717}
@media(min-width:1601px){body[data-route=chat] .support-layout{grid-template-columns:75px 305px minmax(0,1fr) 186px 290px}}
@media(min-width:1281px) and (max-width:1600px){body[data-route=chat] .support-layout{grid-template-columns:72px 280px minmax(0,1fr) 176px 280px}}
@media(min-width:1081px) and (max-width:1280px){body[data-route=chat] .support-layout{grid-template-columns:70px 265px minmax(0,1fr) 280px}}
@media(max-width:1080px){body[data-route=chat] .support-layout.panel-client .support-client{width:310px;max-width:calc(100vw - 20px)}}
body #modal[open]{inset:0;margin:auto;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px)}
body #modal[data-kind=chat-ticket]{width:445px;border-radius:15px;background:#0d0e0e;color:#f5f5f5}
body #modal[data-kind=chat-ticket] .modal-head{min-height:54px;padding:16px 20px;background:linear-gradient(105deg,#1fc557,#11a447)}
body #modal[data-kind=chat-ticket] #modal-content{padding:16px 20px 0}
body #modal[data-kind=chat-ticket] .chat-form-intro{margin:0 0 17px;color:#99999c;font-size:13px;line-height:1.45;font-style:italic}
body #modal[data-kind=chat-ticket] .chat-contact-field{margin-top:12px}
body #modal[data-kind=chat-ticket] .chat-contact-field input,body #modal[data-kind=chat-ticket] .picker-trigger{height:36px;min-height:36px;border-color:#444549;border-radius:8px;color:#ececee}
body #modal[data-kind=chat-ticket] .modal-actions{margin:17px -20px 0;padding:14px 20px 17px;gap:10px;border:0}
body #modal[data-kind=chat-ticket] .modal-actions>.btn{min-height:30px;height:30px;min-width:81px;padding:6px 18px;border-radius:8px;font-size:12px}
body #modal[data-kind=chat-ticket] .modal-actions>.secondary{min-width:88px;color:#a5a5a8;border-color:#c4c4c7}
body #modal[data-kind=chat-ticket] .chat-form-save{background:#a4f1d0;border-color:#a4f1d0;color:#174c3b}
body #modal[data-kind=chat-ticket] .chat-form-save:disabled{background:#a4f1d0;border-color:#a4f1d0;color:#174c3b;opacity:.65}
body #modal:is([data-kind=sale-delete],[data-kind=confirmation],[data-kind=""]){width:510px;padding:0;border:1px solid var(--line);border-radius:15px;background:var(--panel)}
body #modal:is([data-kind=sale-delete],[data-kind=confirmation],[data-kind=""]) .modal-head{padding:18px 24px;min-height:60px;border-bottom:1px solid var(--line)}
body #modal:is([data-kind=sale-delete],[data-kind=confirmation],[data-kind=""]) #modal-content{padding:21px 24px 20px}
body #modal:is([data-kind=sale-delete],[data-kind=confirmation],[data-kind=""]) .modal-description{margin:0;font-size:14px;line-height:1.65;white-space:normal;overflow-wrap:anywhere;color:var(--muted)}
body #modal:is([data-kind=sale-delete],[data-kind=confirmation],[data-kind=""]) .modal-actions{margin:23px 0 0;padding:0;display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
body #modal:is([data-kind=sale-delete],[data-kind=confirmation],[data-kind=""]) .modal-actions>.btn{min-height:36px;padding:8px 14px;border-radius:8px;font-size:13px;box-shadow:none}
body #modal[data-kind=sale-delete] .modal-actions>.reference-red{background:#e52d4a;border-color:#e52d4a;color:#fff}

/* Distinct accents retain Ariabot's charcoal palette. */
body[data-route=dashboard] .sales-dashboard .color-icon.electric-orange{background:#f57632;color:#fff}
body[data-route=dashboard] .sales-dashboard .color-icon.electric-teal{background:#00b99a;color:#fff}
body[data-route=dashboard] .sales-dashboard .color-icon.electric-lime{background:#73c90c;color:#fff}
body[data-route=dashboard] .sales-dashboard .metric-value.electric-orange{color:#ffa469}
body[data-route=dashboard] .sales-dashboard .metric-value.electric-teal{color:#35ddc5}
body[data-route=dashboard] .sales-dashboard .color-icon{border:1px solid #ffffff30;box-shadow:inset 0 1px #ffffff25,0 3px #0002}

/* Shared axes and plot heights keep the period and hourly cards aligned. */
body[data-route=dashboard] .sales-dashboard .chart-panel{height:auto;min-height:360px;display:flex;flex-direction:column}
body[data-route=dashboard] .sales-dashboard .period-data-chart,body[data-route=dashboard] .sales-dashboard .hourly-chart{height:264px;min-height:264px;margin-top:auto;padding-top:15px;flex:0 0 264px;box-sizing:content-box}
body[data-route=dashboard] .sales-dashboard .period-data-chart line,body[data-route=dashboard] .sales-dashboard .hourly-chart line{stroke:var(--line);stroke-opacity:.65;stroke-dasharray:2 5;vector-effect:non-scaling-stroke}
body[data-route=dashboard] .sales-dashboard .sales-chart-line{stroke-width:2;vector-effect:non-scaling-stroke}
body[data-route=dashboard] .sales-dashboard .hourly-chart text{font-size:12px;font-weight:400}
body[data-route=dashboard] .sales-dashboard .period-chart[data-measure] .period-measure .segments>button.selected{background:#9655f4;color:#fff}
.sales-dashboard.whop-dashboard .charts-two{grid-template-columns:repeat(2,minmax(0,1fr))}
body[data-route=dashboard] .sales-dashboard .charts-three>.panel{display:flex;flex-direction:column;height:360px;min-height:0;overflow:hidden}
.sales-dashboard .charts-three .sales-distribution{min-height:0;max-height:none;overflow-y:auto}
.sales-dashboard .charts-three .dashboard-no-data{min-height:0}
.sales-dashboard .dashboard-no-data{border:0;flex:1;min-height:180px;margin:0;font-size:12px}
.sales-dashboard .thirty-day-panel .trend-legend{display:flex;align-items:center;gap:17px;flex:0 0 auto;margin:17px 0 0;color:var(--muted);font-size:11px;line-height:1.4}
.trend-legend>span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.trend-legend>span:before{content:"";width:7px;height:7px;border-radius:50%;background:#18afe9}
.trend-legend>[data-series=sales]:before{background:#9b5cff}
.trend-legend>[data-series=revenue]:before{background:#35ddc5}
.thirty-day-chart{display:block;width:100%;height:210px;min-height:0;flex:1 1 0;margin-top:12px;padding-top:0;box-sizing:border-box}
.thirty-day-chart line{stroke:var(--line);stroke-dasharray:2 5;vector-effect:non-scaling-stroke}
.thirty-day-chart text{font-family:var(--font-system);font-size:12px;fill:var(--muted)}
.thirty-day-chart .trend-line{fill:none;stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.thirty-day-chart .trend-contacts{stroke:#18afe9}
.thirty-day-chart .trend-sales{stroke:#9b5cff;stroke-dasharray:5 3}
.thirty-day-chart .trend-revenue{stroke:#35ddc5}
.sales-dashboard .funnel-rows{margin-top:26px;display:grid;gap:17px}
.sales-dashboard .funnel-item>div:first-child{font-size:12px}
.sales-dashboard .funnel-item .progress-track{height:7px;margin-top:7px;background:transparent;overflow:visible}
.sales-dashboard .funnel-item .progress-track>span{display:block;min-width:7px;height:7px;border-radius:5px}

/* Ranking and performance. */
body[data-route=dashboard] .sales-dashboard .dashboard-bottom>.panel{height:auto;min-height:300px}
.sales-dashboard .store-ranking{min-width:0}
.store-ranking .table-scroll{overflow:auto;margin-top:22px;max-height:480px}
.store-ranking table{width:100%;border-collapse:collapse;min-width:790px}
.store-ranking th{padding:12px 12px 17px;font-size:12px;color:var(--muted);font-weight:700;white-space:nowrap;border-bottom:1px solid var(--line);text-align:right}
.store-ranking td{padding:19px 12px;font-size:13px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line)}
.store-ranking th:first-child,.store-ranking td:first-child{padding-left:0;text-align:left;width:30px;color:var(--muted)}
.store-ranking th:nth-child(2),.store-ranking td:nth-child(2){text-align:left;min-width:155px}
.ranking-name>strong{font-size:14px;display:block;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.ranking-track{display:block;width:100%;max-width:160px;background:var(--bg);height:6px;border-radius:4px;margin-top:9px;overflow:hidden}
.ranking-track>i{display:block;height:100%;background:#18afe9;border-radius:4px}
.ranking-income{font-weight:750;color:#35ddc5}
.ranking-conversion{padding:4px 8px;border-radius:14px;background:#18afe917;color:#77cdff;font-size:12px;font-weight:700}
.store-ranking .table-empty{height:170px;white-space:normal;text-align:center!important;font-size:12px!important;line-height:1.6}
.sales-dashboard .performance-donut{position:relative;display:grid;place-items:center;min-height:210px;margin:12px auto 0}
.performance-ring{width:142px;height:142px;border-radius:50%;background:var(--line);position:relative}
.performance-ring:after{content:"";position:absolute;inset:21px;border-radius:50%;background:var(--panel)}
.performance-donut>p{position:absolute;margin:0;padding:10px;text-align:center;color:var(--muted);font-size:11px;line-height:1.6}
.performance-total{position:absolute;display:grid;gap:5px;text-align:center;max-width:110px}
.performance-total>strong{font-size:13px;overflow-wrap:anywhere}
.performance-total>span{font-size:10px;color:var(--muted)}
.performance-legend{display:grid;gap:12px;max-height:210px;overflow:auto;margin-top:5px}
.performance-legend>div{display:flex;align-items:center;gap:7px;font-size:11px}
.performance-legend i{width:7px;height:7px;border-radius:50%;flex:0 0 7px}
.performance-legend span{flex:1;min-width:0;overflow-wrap:anywhere}
.performance-legend strong{font-size:11px;white-space:nowrap}
.sales-dashboard .product-performance .panel-title-row{align-items:flex-start;flex-wrap:wrap}
.sales-dashboard .product-performance .segments{flex-shrink:0;margin-left:auto}
.sales-dashboard .sales-history .history-status{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#35ddc5;background:#00b99a14;border:0;border-radius:5px;padding:5px 7px}
.history-status>.icon{width:12px;height:12px}
@media(max-width:1080px){.sales-dashboard.whop-dashboard .charts-two{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){
 body[data-route=dashboard] .sales-dashboard .chart-panel{min-height:325px}
 body[data-route=dashboard] .sales-dashboard .charts-three>.panel{height:325px}
 body[data-route=dashboard] .sales-dashboard .period-data-chart,body[data-route=dashboard] .sales-dashboard .hourly-chart{height:230px;min-height:230px;flex-basis:230px}
 body #modal:is([data-kind=sale-delete],[data-kind=confirmation],[data-kind=""]) .modal-head{padding:16px 19px}
 body #modal:is([data-kind=sale-delete],[data-kind=confirmation],[data-kind=""]) #modal-content{padding:19px}
 .store-ranking table{min-width:740px}
}