/* Dashboard (assets/js/dashboard.js), the Contacts/Companies stats chips and column resizing. */

/* ------------------------------------------------------------------ Dashboard */
.dx { max-width: 1480px; margin: 0 auto; width: 100%; }
.dx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.dx-title h1 { margin: 0 0 6px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--text-primary); }
.dx-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-hover); font-size: 12px; font-weight: 600; border: 1px solid #ccfbf1; }
.dx-chip svg { width: 14px; height: 14px; }
.dx-sub { font-size: 12.5px; color: var(--text-muted); }
.dx-tools { display: flex; align-items: center; gap: 10px; }
.dx-rangewrap { position: relative; }
.dx-range { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 12px; background: #fff; color: var(--text-primary); cursor: pointer; font-family: inherit; box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s; }
.dx-range:hover, .dx-range[aria-expanded="true"] { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.dx-range > svg { width: 18px; height: 18px; color: var(--brand); flex-shrink: 0; }
.dx-range > svg:last-child { width: 15px; height: 15px; color: var(--text-muted); }
.dx-range-t { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
.dx-range-t b { font-size: 13.5px; font-weight: 700; }
.dx-range-t small { font-size: 11.5px; color: var(--text-muted); }
.dx-iconbtn { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-strong); border-radius: 12px; background: #fff; color: var(--text-secondary); cursor: pointer; box-shadow: var(--shadow-sm); }
.dx-iconbtn:hover { border-color: var(--brand); color: var(--brand); }
.dx-iconbtn svg { width: 18px; height: 18px; }
.dx-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 50px rgba(15,23,42,.2); width: 520px; max-width: calc(100vw - 32px); animation: dx-pop .14s ease-out; }
@keyframes dx-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dx-pop-in { display: grid; grid-template-columns: 190px 1fr; }
.dx-presets { padding: 10px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; max-height: 360px; overflow-y: auto; }
.dx-presets button { text-align: left; border: none; background: transparent; padding: 8px 12px; border-radius: 8px; font: 500 13px/1.2 inherit; font-family: inherit; color: var(--text-secondary); cursor: pointer; }
.dx-presets button:hover { background: var(--bg-hover); color: var(--text-primary); }
.dx-presets button.on { background: var(--brand-soft); color: var(--brand-hover); font-weight: 700; }
.dx-custom { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.dx-custom h4 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.dx-custom label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.dx-custom input[type=date] { height: 40px; border: 1px solid var(--border-strong); border-radius: 8px; padding: 0 10px; font: 400 14px/1 inherit; font-family: inherit; color: var(--text-primary); background: #fff; }
.dx-custom input[type=date]:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.dx-err { font-size: 12px; color: var(--danger); }
.dx-pop-act { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }
.dx-btn { height: 36px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--border-strong); background: #fff; font: 600 13px/1 inherit; font-family: inherit; color: var(--text-primary); cursor: pointer; }
.dx-btn:hover { background: var(--bg-hover); }
.dx-btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.dx-btn.primary:hover { background: var(--brand-hover); }
.dx-btn:disabled { opacity: .5; cursor: not-allowed; }

/* KPI cards */
.dx-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.dx-card { --tone: #0d9488; --tone-bg: #f0fdfa; position: relative; display: flex; flex-direction: column; gap: 10px; text-align: left; padding: 16px 18px 14px; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-sm); cursor: pointer; font-family: inherit; color: inherit; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.dx-card::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--tone); opacity: .9; }
.dx-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(15,23,42,.1); border-color: var(--tone); }
.dx-card:focus-visible { outline: 2px solid var(--tone); outline-offset: 2px; }
.dx-card.tone-teal { --tone: #0d9488; --tone-bg: #f0fdfa; } .dx-card.tone-blue { --tone: #3b82f6; --tone-bg: #eff6ff; } .dx-card.tone-violet { --tone: #8b5cf6; --tone-bg: #f5f3ff; }
.dx-card.tone-green { --tone: #10b981; --tone-bg: #ecfdf5; } .dx-card.tone-amber { --tone: #f59e0b; --tone-bg: #fffbeb; } .dx-card.tone-sky { --tone: #0ea5e9; --tone-bg: #f0f9ff; }
.dx-card.tone-indigo { --tone: #6366f1; --tone-bg: #eef2ff; } .dx-card.tone-red { --tone: #ef4444; --tone-bg: #fef2f2; }
.dx-card.danger .dx-val { color: #dc2626; }
.dx-card-top { display: flex; align-items: center; gap: 10px; }
.dx-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--tone-bg); color: var(--tone); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dx-ic svg { width: 18px; height: 18px; }
.dx-label { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-val { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.dx-card-bot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; min-height: 30px; }
.dx-subtxt { font-size: 12px; color: var(--text-muted); line-height: 1.35; }
.dx-spark { width: 84px; height: 30px; flex-shrink: 0; }
.dx-delta { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px 2px 6px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.dx-delta svg { width: 11px; height: 11px; }
.dx-delta.up { background: #dcfce7; color: #15803d; } .dx-delta.down { background: #fee2e2; color: #b91c1c; } .dx-delta.flat { background: #f1f5f9; color: #64748b; padding-left: 8px; }
.dx-live { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tone); }
.dx-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 0 0 var(--tone); animation: dx-pulse 2s infinite; }
@keyframes dx-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tone) 45%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* panels */
.dx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.dx-grid.g-trend { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
.dx-panel { background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-sm); padding: 18px 20px; min-width: 0; position: relative; }
.dx-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.dx-panel h3 { margin: 0; font-size: 15px; font-weight: 700; }
.dx-hint { font-size: 12px; color: var(--text-muted); }
.dx-link { border: none; background: none; color: var(--brand-hover); font: 600 12.5px/1 inherit; font-family: inherit; cursor: pointer; padding: 4px 0; }
.dx-link:hover { text-decoration: underline; }
.dx-empty { padding: 36px 12px; text-align: center; color: var(--text-muted); font-size: 13px; }
.dx-skel { pointer-events: none; }

.dx-seg { display: inline-flex; background: var(--bg-active); padding: 3px; border-radius: 10px; gap: 2px; flex-wrap: wrap; }
.dx-seg button { border: none; background: transparent; padding: 6px 12px; border-radius: 8px; font: 600 12px/1 inherit; font-family: inherit; color: var(--text-secondary); cursor: pointer; }
.dx-seg button:hover { color: var(--text-primary); }
.dx-seg button.on { background: #fff; color: var(--c, var(--brand-hover)); box-shadow: var(--shadow-sm); }
.dx-chart { position: relative; width: 100%; min-height: 270px; }
.dx-chart svg { display: block; overflow: visible; }
.dx-chart .grid { stroke: #eef2f6; stroke-width: 1; }
.dx-chart .ax { fill: #94a3b8; font-size: 11px; }
.dx-chart .guide { stroke: #cbd5e1; stroke-width: 1; stroke-dasharray: 3 3; }
.dx-chart .hidden, .dx-tip.hidden { display: none; }
.dx-chart-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 13px; pointer-events: none; }
.dx-tip { position: absolute; z-index: 5; pointer-events: none; background: #0f172a; color: #fff; border-radius: 9px; padding: 8px 12px; display: flex; flex-direction: column; gap: 1px; box-shadow: 0 8px 24px rgba(15,23,42,.3); min-width: 110px; }
.dx-tip small { color: #94a3b8; font-size: 11px; } .dx-tip b { font-size: 15px; } .dx-tip span { font-size: 11px; color: #cbd5e1; }
.dx-trend { position: relative; }
.dx-trend .dx-tip { top: 0; }
.dx-trend .dx-chart { margin-top: 2px; }
.dx-panel.dx-trend .dx-tip { position: absolute; }

.dx-donut { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.dx-donut-svg { position: relative; width: 170px; height: 170px; }
.dx-donut-svg svg { width: 100%; height: 100%; }
.dx-donut .seg { transition: opacity .15s, stroke-width .15s; cursor: pointer; }
.dx-donut .seg.dim { opacity: .25; }
.dx-donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; padding: 0 34px; }
.dx-donut-c b { font-size: 24px; letter-spacing: -.02em; } .dx-donut-c span { font-size: 11.5px; color: var(--text-muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-legend { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 2px; }
.dx-legend li { display: grid; grid-template-columns: 10px 1fr auto 42px; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; font-size: 12.5px; cursor: default; outline: none; }
.dx-legend li.on, .dx-legend li:hover, .dx-legend li:focus { background: var(--bg-hover); }
.dx-legend i { width: 10px; height: 10px; border-radius: 3px; }
.dx-legend span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.dx-legend em { font-style: normal; color: var(--text-muted); text-align: right; }

.dx-stages { display: flex; flex-direction: column; gap: 4px; }
.dx-stage { display: block; width: 100%; text-align: left; background: transparent; border: none; padding: 8px 10px; border-radius: 10px; cursor: pointer; font-family: inherit; color: inherit; }
.dx-stage:hover { background: var(--bg-hover); }
.dx-stage-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; font-size: 13px; }
.dx-stage-top span { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary); font-weight: 500; }
.dx-stage-top i { width: 9px; height: 9px; border-radius: 50%; }
.dx-stage-top b { font-weight: 700; }
.dx-bar { height: 8px; background: #eef2f6; border-radius: 6px; overflow: hidden; }
.dx-bar > div { height: 100%; border-radius: 6px; animation: dx-grow .7s ease-out; transform-origin: left; }
@keyframes dx-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.dx-stage small { display: block; margin-top: 5px; color: var(--text-muted); font-size: 11.5px; }

.dx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dx-list li + li { border-top: 1px solid var(--border-subtle); }
.dx-list button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 6px; border: none; background: transparent; text-align: left; cursor: pointer; font-family: inherit; color: inherit; border-radius: 8px; }
.dx-list button:hover { background: var(--bg-hover); }
.dx-li-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dx-li-main b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-li-main small { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-li-val { font-weight: 700; font-size: 13px; white-space: nowrap; }
.dx-li-date { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.dx-av { width: 34px; height: 34px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-hover); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.dx-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin: 0 4px; }
.dx-dot.red { background: #ef4444; } .dx-dot.green { background: #10b981; }
.dx-tag { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.dx-tag.red { background: #fee2e2; color: #b91c1c; } .dx-tag.green { background: #dcfce7; color: #15803d; }

@media (max-width: 1200px) { .dx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dx-grid.g-trend { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .dx-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .dx-kpis { grid-template-columns: 1fr 1fr; gap: 10px; } .dx-val { font-size: 22px; } .dx-card { padding: 12px 12px 10px; } .dx-spark { display: none; }
  .dx-head { align-items: stretch; } .dx-tools { width: 100%; } .dx-rangewrap { flex: 1; } .dx-range { width: 100%; }
  .dx-pop { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; max-height: 82vh; overflow-y: auto; }
  .dx-pop-in { grid-template-columns: 1fr; } .dx-presets { border-right: none; border-bottom: 1px solid var(--border); flex-direction: row; flex-wrap: wrap; max-height: none; }
  .dx-seg { width: 100%; } .dx-seg button { flex: 1; padding: 6px 6px; }
}
@media (prefers-reduced-motion: reduce) { .dx-card, .dx-bar > div, .dx-pop, .dx-live::before { animation: none !important; transition: none !important; } }

/* ------------------------------------------------------------------ stats chips under Contacts / Companies */
.deals-stats-bar .stat-chip { border: 1px solid transparent; background: transparent; padding: 3px 10px; border-radius: 999px; font: inherit; font-size: inherit; color: inherit; cursor: pointer; white-space: nowrap; }
.deals-stats-bar .stat-chip:hover { background: var(--brand-soft); border-color: #99f6e4; }
.deals-stats-bar .stat-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.deals-stats-bar .stat-chip.on strong { color: #fff; }

/* ------------------------------------------------------------------ resizable columns */
table.resizable-table { border-collapse: separate; border-spacing: 0; }
table.resizable-table th, table.resizable-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.resizable-table th:last-child, table.resizable-table td:last-child { overflow: visible; }
.col-resizer { position: absolute; top: 0; right: -4px; bottom: 0; width: 9px; cursor: col-resize; z-index: 3; touch-action: none; }
.col-resizer::after { content: ''; position: absolute; left: 4px; top: 22%; bottom: 22%; width: 2px; border-radius: 2px; background: var(--border-strong); opacity: 0; transition: opacity .12s; }
th:hover > .col-resizer::after { opacity: .9; }
.col-resizer:hover::after, .col-resizer.active::after { opacity: 1; background: var(--brand); width: 3px; left: 3px; top: 10%; bottom: 10%; }
body.col-resizing { cursor: col-resize; user-select: none; }
body.col-resizing * { cursor: col-resize !important; }


/* ---- Dashboard entrance: cards and panels rise in a cascade, charts build up from zero, rings and bars draw themselves. */
@keyframes dx-rise { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes dx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dx-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes dx-rise-y { from { transform: scaleY(0); opacity: .2; } to { transform: scaleY(1); opacity: 1; } }
@keyframes dx-dot { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes dx-slide { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.dx-head { animation: dx-fade .5s ease backwards; }
.dx-card:not(.dx-skel) { animation: dx-rise .65s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(var(--i, 0) * 65ms + .05s); }
.dx-card .dx-ic { animation: dx-dot .5s cubic-bezier(.3,1.4,.5,1) backwards; animation-delay: calc(var(--i, 0) * 65ms + .25s); }
.dx-card .dx-spark .ln { stroke-dasharray: 1; animation: dx-draw 1.1s cubic-bezier(.4,.1,.2,1) backwards; animation-delay: calc(var(--i, 0) * 65ms + .4s); }
.dx-card .dx-spark path:first-of-type { animation: dx-fade .8s ease backwards; animation-delay: calc(var(--i, 0) * 65ms + .9s); }
.dx-grid .dx-panel:not(.dx-skel) { animation: dx-rise .7s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: .55s; }
.dx-grid:nth-child(3) .dx-panel:not(.dx-skel) { animation-delay: .7s; } .dx-grid:nth-child(4) .dx-panel:not(.dx-skel) { animation-delay: .85s; }
.dx-grid .dx-panel:nth-child(2) { animation-delay: calc(.55s + .09s); }
.dx-grid:nth-child(3) .dx-panel:nth-child(2) { animation-delay: .79s; } .dx-grid:nth-child(4) .dx-panel:nth-child(2) { animation-delay: .94s; }
.dx-chart .plot.rise { animation: dx-rise-y 1.1s cubic-bezier(.25,.8,.25,1) backwards; animation-delay: .65s; }
.dx-chart .dots.pop circle { transform-box: fill-box; transform-origin: center; animation: dx-dot .4s cubic-bezier(.3,1.5,.5,1) backwards; animation-delay: calc(1.3s + var(--k, 0) * 28ms); }
.dx-stages .dx-stage .dx-bar > div { animation: dx-grow 1s cubic-bezier(.25,.8,.25,1) backwards; animation-delay: calc(.8s + var(--i, 0) * 90ms); }
.dx-list li { animation: dx-slide .5s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: 1s; }
.dx-list li:nth-child(2) { animation-delay: 1.07s; } .dx-list li:nth-child(3) { animation-delay: 1.14s; } .dx-list li:nth-child(4) { animation-delay: 1.21s; }
.dx-list li:nth-child(5) { animation-delay: 1.28s; } .dx-list li:nth-child(n+6) { animation-delay: 1.35s; }
.dx-legend li { animation: dx-slide .5s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: .9s; }
.dx-legend li:nth-child(2) { animation-delay: .98s; } .dx-legend li:nth-child(3) { animation-delay: 1.06s; } .dx-legend li:nth-child(n+4) { animation-delay: 1.14s; }
.dx-cu { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .dx-head, .dx-card .dx-ic, .dx-card .dx-spark *, .dx-panel, .dx-chart .plot, .dx-chart .dots circle, .dx-list li, .dx-legend li { animation: none !important; } }
/* my tasks */
.dx-grid.dx-one { grid-template-columns: minmax(0, 1fr); }
.dx-hdr-r { display: inline-flex; gap: 16px; align-items: center; }
.dx-count { display: inline-block; margin-left: 6px; font-size: 11.5px; font-weight: 700; background: var(--brand-soft); color: var(--brand-hover); border-radius: 999px; padding: 2px 8px; vertical-align: 1px; }
.dx-task-scroll { max-height: 330px; overflow-y: auto; margin-right: -8px; padding-right: 8px; }
.dx-task-grp + .dx-task-grp { margin-top: 12px; }
.dx-task-grp h4 { margin: 0 0 4px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.dx-task-grp h4.red { color: #b91c1c; } .dx-task-grp h4.amber { color: #b45309; } .dx-task-grp h4.green { color: #15803d; }
.dx-task-grp h4 span { font-weight: 600; opacity: .7; margin-left: 3px; }
.dx-tasklist { list-style: none; margin: 0; padding: 0; }
.dx-task { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-radius: 8px; border-top: 1px solid var(--border-subtle); transition: opacity .3s, transform .3s, max-height .3s; max-height: 70px; }
.dx-task:first-child { border-top: none; }
.dx-task:hover { background: var(--bg-hover); }
.dx-task.gone { opacity: 0; transform: translateX(14px); max-height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; }
.dx-tick { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #cbd5e1; background: #fff; cursor: pointer; flex-shrink: 0; padding: 0; position: relative; transition: border-color .15s, background .15s; }
.dx-tick:hover { border-color: var(--brand-hover); }
.dx-tick.on { background: var(--brand-hover); border-color: var(--brand-hover); }
.dx-tick.on::after { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.dx-task-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dx-task-main b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-task-main small { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-task-main.link { cursor: pointer; } .dx-task-main.link:hover b { color: var(--brand-hover); text-decoration: underline; }
.dx-tag.amber { background: #fef3c7; color: #b45309; }
/* ---- cleaner, smaller dashboard ---- */
.dx-head { margin-bottom: 12px; }
.dx-title h1 { font-size: 20px; margin-bottom: 4px; }
.dx-range { height: 38px; padding: 0 12px; border-radius: 10px; } .dx-iconbtn { width: 38px; height: 38px; border-radius: 10px; }
.dx-kpis { gap: 10px; margin-bottom: 12px; }
.dx-card { padding: 9px 13px 9px 15px; gap: 2px; border-radius: 10px; box-shadow: none; }
.dx-card::before { top: 10px; bottom: 10px; width: 2px; }
.dx-card:hover { transform: none; box-shadow: var(--shadow-sm); }
.dx-card-top { gap: 8px; }
.dx-ic { width: 24px; height: 24px; border-radius: 7px; } .dx-ic svg { width: 14px; height: 14px; }
.dx-label { font-size: 12px; }
.dx-val { font-size: 21px; line-height: 1.15; }
.dx-card-bot { min-height: 0; }
.dx-subtxt { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dx-spark { display: none; }
.dx-live { font-size: 9.5px; }
.dx-grid { gap: 12px; margin-bottom: 12px; }
.dx-panel { padding: 12px 14px; border-radius: 10px; box-shadow: none; }
.dx-panel > header { margin-bottom: 8px; } .dx-panel h3 { font-size: 14px; }
.dx-list button { padding: 6px 4px; gap: 10px; }
.dx-av { width: 28px; height: 28px; border-radius: 8px; font-size: 12px; }
.dx-donut-svg { width: 140px; height: 140px; } .dx-donut { gap: 10px; }
.dx-legend li { padding: 4px 6px; }
.dx-stage { padding: 5px 8px; } .dx-stage-top { margin-bottom: 4px; } .dx-stage small { margin-top: 3px; }
.dx-empty { padding: 22px 10px; }
.dx-chart { min-height: 220px; }
.dx-task-scroll { max-height: 280px; }