/* Dashboard tables (Last activity, Product sales). Colours come from the active theme's --cy-* tokens. */
.cy-widget-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.cy-widget-head h3 { margin: 0; letter-spacing: -.01em; }
.cy-widget-link { font-size: 18px; line-height: 1; text-decoration: none; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--cy-muted); border: 1px solid var(--cy-border); transition: all .15s; }
.cy-widget-link:hover { background: var(--cy-surface-2); color: var(--cy-text); }
.cy-widget-body { min-height: 60px; }
.cy-widget-empty { padding: 20px 0; margin: 0; }
.cy-widget-table { width: 100%; border-collapse: collapse; background: transparent; }
.cy-widget-table th, .cy-widget-table td { padding: 14px 10px; vertical-align: middle; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--cy-border) 60%, transparent); color: var(--cy-text); }
.cy-widget-table tbody tr:last-child td { border-bottom: 0; }
.cy-widget-table thead th { font-size: 13px; font-weight: 500; color: var(--cy-muted); padding-top: 4px; }
.cy-widget-table tbody tr:hover td { background: color-mix(in srgb, var(--cy-accent) 6%, transparent); }
.cy-who, .cy-item { display: flex; align-items: center; gap: 14px; }
.cy-widget-table td.cy-who, .cy-widget-table td.cy-item { display: table-cell; }
.cy-who > *, .cy-item > * { vertical-align: middle; }
.cy-avatar { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; flex-shrink: 0; margin-right: 12px; }
.cy-who-text { display: inline-flex; flex-direction: column; line-height: 1.35; vertical-align: middle; }
.cy-who-text b { font-weight: 500; font-size: 15.5px; }
.cy-who-text small { font-size: 13px; }
.cy-st-paid { color: var(--cy-green); } .cy-st-due, .cy-st-refund { color: var(--cy-red); } .cy-st-partial { color: var(--cy-orange); }
.cy-inv, .cy-muted-num { color: var(--cy-muted); }
.cy-amt { font-weight: 500; text-align: right; white-space: nowrap; }
.cy-thumbs { text-align: right; white-space: nowrap; padding-left: 0; }
.cy-thumb { display: inline-flex; width: 38px; height: 38px; border-radius: 50%; background: var(--cy-surface-2); align-items: center; justify-content: center; overflow: hidden; margin-left: -8px; border: 2px solid var(--cy-surface); vertical-align: middle; font-size: 12px; font-weight: 600; color: var(--cy-text); }
.cy-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cy-more { background: var(--cy-lilac, var(--cy-surface-2)); }
.cy-thumb-lg { width: 48px; height: 48px; margin: 0 14px 0 0; border-radius: 14px; border: 0; }
.cy-product-table td.cy-item { white-space: nowrap; }

/* Chart frames: the old dashed grey box is replaced by the chart itself */
.tw-grid.tw-border-dashed, .tw-border-dashed.tw-bg-gray-50 { border-style: solid !important; border-color: transparent !important; background: transparent !important; }
.highcharts-xaxis-grid, .highcharts-minor-grid-line { display: none !important; }
.highcharts-yaxis-grid .highcharts-grid-line { stroke-dasharray: 4 4; }

/* ---------- Statistics cards (customers / revenue / orders) ---------- */
.cy-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 991px) { .cy-stats-grid { grid-template-columns: 1fr; } }
.cy-stat { border-radius: var(--cy-radius, 24px); padding: 22px 24px 20px; min-height: 270px; display: flex; flex-direction: column; color: var(--cy-text); background: var(--cy-surface); box-shadow: var(--cy-shadow); position: relative; overflow: hidden; }
.cy-stat-head { display: flex; justify-content: space-between; align-items: center; font-size: 17px; font-weight: 400; margin-bottom: 14px; }
.cy-dots { width: 12px; height: 12px; background: radial-gradient(circle, currentColor 1.6px, transparent 2px) 0 0 / 6px 6px; opacity: .7; }
.cy-stat-big { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cy-big-num { font-size: clamp(26px, 2.6vw, 38px); font-weight: var(--cy-w-num, 400); letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cy-trend-pill { font-size: 14px; font-weight: 500; }
.cy-trend-pill.is-up { color: #35c28a; } .cy-trend-pill.is-down { color: #ef5b5b; }
.cy-stat-sub { font-size: 14px; opacity: .72; margin: 4px 0 18px; }
.cy-stat-body { margin-top: auto; }
/* split bar (customers) */
.cy-split { display: flex; gap: 10px; height: 60px; }
.cy-split > div { border-radius: 16px; display: flex; align-items: flex-end; padding: 8px 12px; font-size: 18px; }
.cy-split-new { background: repeating-linear-gradient(135deg, rgba(255,255,255,.3) 0 2px, transparent 2px 7px); border: 1px solid rgba(255,255,255,.45); color: #fff; }
.cy-split-ret { background: #fff; color: #17171c; justify-content: flex-end; }
.cy-split-legend { display: flex; justify-content: space-between; margin-top: 14px; font-size: 14px; }
.cy-dot-hollow, .cy-dot-solid { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; border: 1.5px solid currentColor; }
.cy-dot-solid { background: currentColor; }
/* mini bars (revenue) */
.cy-minibars { display: flex; align-items: flex-end; gap: 8px; height: 118px; position: relative; padding-bottom: 20px; }
.cy-minibar-col { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; position: relative; }
.cy-minibar { display: block; width: 100%; background: rgba(255,255,255,.92); border-radius: 8px; transition: background .15s; }
.cy-minibar-col small { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: 12px; opacity: .85; white-space: nowrap; }
.cy-minibar-col.is-peak .cy-minibar, .cy-minibar-col:hover .cy-minibar { background: var(--cy-nav, #17171c); }
.cy-minibar-col::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: #17171c; color: #fff; padding: 6px 10px; border-radius: 10px; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 5; }
.cy-minibar-col:hover::after { opacity: 1; }
.cy-avg-line { position: absolute; left: 0; right: 0; border-top: 1.5px dashed rgba(23, 23, 28, .75); height: 0; margin-top: 0; pointer-events: none; z-index: 2; }
/* line (orders) */
.cy-line { width: 100%; height: 96px; display: block; color: var(--cy-text); overflow: visible; }
.cy-line-labels { display: flex; justify-content: space-between; font-size: 13px; margin-top: 10px; opacity: .8; }
/* export button */
.cy-export-btn { width: 100%; margin-top: 20px; padding: 18px; border: 0; border-radius: var(--cy-radius, 24px); background: var(--cy-nav, #17171c); color: #fff; font-size: 16px; font-weight: 500; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.cy-export-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
/* card colours: Soft = dark / lilac gradient / peach gradient (as designed); Cyber = dark / accent glow / surface */
.cy-stat-1 { background: var(--cy-nav, #17171c); color: #fff; }
html[data-style="soft"] .cy-stat-2 { background: linear-gradient(145deg, #565bb5 0%, #6a5fbd 55%, #7d63c0 100%); color: #fff; }
html[data-style="soft"] .cy-stat-3 { background: linear-gradient(160deg, #f7ece5 0%, #ecd6c8 100%); color: #3b2f2a; }
html[data-style="soft"] .cy-stat-3 .cy-line { color: #17171c; }
html[data-style="cyber"] .cy-stat-2 { background: linear-gradient(145deg, color-mix(in srgb, var(--cy-accent) 30%, var(--cy-nav)) 0%, var(--cy-nav) 100%); color: #fff; }
html[data-style="cyber"] .cy-stat-3 { background: var(--cy-surface); }
html[data-style="cyber"] .cy-stat-3 .cy-line { color: var(--cy-accent); }
html[data-style="cyber"] .cy-split-ret { background: var(--cy-accent); color: var(--cy-accent-ink); }
html[data-style="cyber"] .cy-minibar { background: color-mix(in srgb, var(--cy-accent) 90%, #fff); }
html[data-style="cyber"] .cy-avg-line { border-top-color: rgba(255,255,255,.6); }

/* Product title on the purchase screen is clickable (quick edit) */
a.quick-edit-product { color: inherit; text-decoration: none; font-weight: 500; }
a.quick-edit-product:hover { color: var(--cy-accent-text, var(--cy-accent)); border-bottom-color: currentColor; }

/* ---------- Text colours that stay readable on both themes ---------- */
html[data-theme="light"] { --cy-green-t: #17714b; --cy-red-t: #b42d38; --cy-orange-t: #9a5314; --cy-blue-t: #2457b8; }
html[data-theme="dark"] { --cy-green-t: #4fd6a0; --cy-red-t: #ff8a91; --cy-orange-t: #f5b070; --cy-blue-t: #8fb2ff; }
.cy-st-paid, .cy-trend-pill.is-up, .text-success, .label-success, .badge-success { color: var(--cy-green-t) !important; }
.cy-st-due, .cy-st-refund, .cy-trend-pill.is-down, .text-danger, .label-danger { color: var(--cy-red-t) !important; }
.cy-st-partial, .text-warning, .label-warning { color: var(--cy-orange-t) !important; }
.cy-stat-1 .cy-trend-pill.is-up, .cy-stat-2 .cy-trend-pill.is-up { color: #7ff0bf !important; }
.cy-stat-1 .cy-trend-pill.is-down, .cy-stat-2 .cy-trend-pill.is-down { color: #ffb3b8 !important; }
/* Avatar initials: neutral text on a tint of the person's colour */
.cy-avatar { background: color-mix(in srgb, var(--av, #8b7fd4) 24%, var(--cy-surface)); color: var(--cy-text); }

.cy-stat-1 .cy-stat-sub, .cy-stat-2 .cy-stat-sub { opacity: .92; }

/* Coloured status pills and outline buttons: text always readable on its background */
.label.bg-light-green, .bg-light-green, .label.bg-green, .label.bg-aqua, .label.bg-yellow, .bg-yellow, .bg-aqua, .label.bg-orange { color: #10251a !important; }
.label.bg-red, .label.bg-maroon, .label.bg-purple, .label.bg-navy, .label.bg-light-blue { color: #fff !important; }
.tw-dw-btn-outline.tw-dw-btn-info, .btn-outline-info { color: var(--cy-blue-t) !important; }
.tw-dw-btn-outline.tw-dw-btn-success { color: var(--cy-green-t) !important; }
.tw-dw-btn-outline.tw-dw-btn-error, .tw-dw-btn-outline.tw-dw-btn-danger { color: var(--cy-red-t) !important; }
.tw-dw-btn-outline.tw-dw-btn-warning { color: var(--cy-orange-t) !important; }
.tw-dw-btn-outline.tw-dw-btn-primary, .tw-dw-btn-outline { border-color: currentColor; }
.tw-dw-btn-outline.tw-dw-btn-info:hover, .tw-dw-btn-outline.tw-dw-btn-success:hover, .tw-dw-btn-outline.tw-dw-btn-error:hover, .tw-dw-btn-outline.tw-dw-btn-warning:hover { background: color-mix(in srgb, currentColor 14%, transparent) !important; }
.tw-dw-btn-outline.tw-dw-btn-accent, .tw-dw-btn-outline.tw-dw-btn-secondary { color: var(--cy-blue-t) !important; }

/* Website sales block on the dashboard */
.cy-web { margin-bottom: 20px; }
.cy-web-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cy-web-head h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--cy-text, inherit); }
.cy-web-head h3 i { margin-right: 6px; opacity: .7; }
.cy-web-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 991px) { .cy-web-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .cy-web-grid { grid-template-columns: 1fr; } }
.cy-web-card { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: var(--cy-radius, 16px); background: var(--cy-surface); color: var(--cy-text); box-shadow: var(--cy-shadow); }
.cy-web-card:nth-child(1) { background: linear-gradient(135deg, #5b5fc7, #7c5cc4); color: #fff; border-color: transparent; }
.cy-web-card:nth-child(1) .cy-web-label, .cy-web-card:nth-child(1) .cy-web-sub { color: rgba(255,255,255,.85); }
.cy-web-label { font-size: 12.5px; color: var(--cy-muted); }
.cy-web-value { font-size: 22px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.cy-web-sub { font-size: 12px; color: var(--cy-muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cy-web-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
@media (max-width: 767px) { .cy-web-lists { grid-template-columns: 1fr; } }
.cy-web-lists > div { padding: 14px 18px; border-radius: var(--cy-radius, 16px); background: var(--cy-surface); color: var(--cy-text); box-shadow: var(--cy-shadow); }
.cy-web-lists small { display: block; font-size: 12px; color: var(--cy-muted); margin-bottom: 6px; }
.cy-web-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13.5px; }
.cy-web-row b { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.cy-web-row em { font-style: normal; font-size: 12px; color: var(--cy-muted); min-width: 62px; text-align: right; }
.cy-web-pill { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.cy-web-store { display: inline-block; width: auto; min-width: 170px; margin-left: 12px; vertical-align: middle; font-weight: 400; }