/* Chart dock (static/ui/hr-chartdock.js): controls, insight line and sizes for every chart. body:not(#_) beats page CSS. */

body:not(#_) .hx-bar { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; position: relative; z-index: 2; }
body:not(#_) .hx-types, body:not(#_) .hx-sizes { display: inline-flex; padding: 2px; gap: 2px; border-radius: 10px; background: rgba(99, 102, 241, .06); border: 1px solid rgba(99, 102, 241, .14); }
body:not(#_) .hx-types:empty { display: none; }
body:not(#_) .hx-bar button { all: unset; box-sizing: border-box; cursor: pointer; display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 6px;
  border-radius: 8px; font: 700 10.5px/1 Inter, system-ui, sans-serif; color: #6b7393; transition: background .15s, color .15s, box-shadow .15s; }
body:not(#_) .hx-bar button i { font-size: 11.5px; color: inherit; }
body:not(#_) .hx-bar button:hover { color: #3730a3; background: rgba(99, 102, 241, .1); }
body:not(#_) .hx-bar button.is-on { color: #fff; background: linear-gradient(135deg, #6366f1, #8b5cf6 60%, #22d3ee); box-shadow: 0 4px 12px rgba(99, 102, 241, .35); }
body:not(#_) .hx-bar .hx-ic { width: 28px; height: 28px; border-radius: 9px; border: 1px solid rgba(99, 102, 241, .14); background: rgba(255, 255, 255, .7); }
body:not(#_) .hx-bar:focus-within button:focus-visible { outline: 2px solid #22d3ee; outline-offset: 1px; }

body:not(#_) .hx-insight:empty { display: none; }
body:not(#_) .hx-insight { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; padding: 8px 12px; border-radius: 12px; font: 500 12.5px/1.5 Inter, system-ui, sans-serif;
  color: #2d3348; background: linear-gradient(90deg, rgba(34, 211, 238, .09), rgba(139, 92, 246, .06)); border: 1px solid rgba(34, 211, 238, .22); text-align: left; }
body:not(#_) .hx-insight i { color: #f59e0b; margin-top: 3px; }
body:not(#_) .hx-insight b { color: #141a35; font-weight: 800; }

/* sizes: a grid of charts becomes a 6-column grid once someone picks a size (S = 2, M = 3, L = 6 columns) */
body:not(#_) .hx-grid { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 16px !important; align-items: start; }
body:not(#_) .hx-grid > * { min-width: 0; }
@media (max-width: 900px) { body:not(#_) .hx-grid > .hx-card { grid-column: 1 / -1 !important; } }

/* full screen */
body:not(#_) .hx-card:fullscreen { background: #f4f6fb; padding: 24px; overflow: auto; display: flex; flex-direction: column; }
body:not(#_) .hx-card:fullscreen .hx-chart { flex: 1 1 auto; height: auto !important; min-height: 70vh !important; }

@media print { body:not(#_) .hx-bar { display: none !important; } }
body:not(#_) .hx-bar i { color: inherit !important; background: none !important; -webkit-text-fill-color: currentColor !important; filter: none !important; }
body:not(#_) .hx-grid > .hx-card { grid-column: span 3; }   /* cards not resized yet: half width (M) */

/* ── deck mode: dashboards laid out like the Task dashboard (hr-chartdock.js deckify) ── */
body:not(#_) .hx-deck { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; grid-auto-flow: row dense; margin: 0 0 16px; width: 100%; }
body:not(#_) .hx-deckbar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px;
  background: rgba(247, 248, 253, .9); border: 1px solid #e3e7f4; font: 500 12px/1.3 Inter, system-ui, sans-serif; color: #6b7393; }
body:not(#_) .hx-deckbar__label i { color: #6366f1; margin-right: 4px; }
body:not(#_) .hx-deckbar__hidden { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
body:not(#_) .hx-deckbar button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid #e3e7f4; background: #fff; color: #48506e; font: 600 12px Inter, system-ui, sans-serif; }
body:not(#_) .hx-deckbar button:hover { border-color: #a5b4fc; color: #4f46e5; }
body:not(#_) .hx-deckbar__reset { margin-left: auto !important; }

body:not(#_) .hx-deck > .hx-dcard { grid-column: span var(--span, 3) !important; position: relative; display: flex !important; flex-direction: column; min-width: 0; width: auto !important; max-width: none !important;
  margin: 0 !important; padding: 12px 14px 12px !important; border-radius: 18px !important; overflow: hidden; float: none !important;
  background: linear-gradient(160deg, #fff, #f6f7ff) !important; border: 1px solid rgba(99, 102, 241, .16) !important; box-shadow: 0 1px 0 #fff inset, 0 10px 28px rgba(13, 19, 48, .07) !important; transition: box-shadow .18s; }
body:not(#_) .hx-deck > .hx-dcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, #6366f1, #22d3ee, #a855f7); }
body:not(#_) .hx-deck > .hx-dcard:hover { box-shadow: 0 16px 36px rgba(99, 102, 241, .14) !important; }
body:not(#_) .hx-deck > .hx-dcard.is-drag { opacity: .45; }
body:not(#_) .hx-deck > .hx-dcard[draggable="true"] { cursor: grabbing; }
body:not(#_) .hx-deck > .hx-dcard.hx-hidden { display: none !important; }
/* title like the task deck: icon tile + bold title, grab cursor */
body:not(#_) .hx-dcard > :is(h1, h2, h3, h4, h5, .card-title, .chart-title, .x3-card__t, .card-header, .chart-header):first-of-type,
body:not(#_) .hx-dcard :is(h1, h2, h3, h4, h5, .x3-card__t):not(.hx-chart *):first-of-type { display: flex !important; align-items: center; gap: 10px; margin: 0 0 6px !important; padding: 0 !important;
  font: 800 14px/1.3 Inter, system-ui, sans-serif !important; color: #0d1330 !important; text-transform: none !important; letter-spacing: 0 !important; text-align: left !important; background: none !important; border: 0 !important; cursor: grab; }
body:not(#_) .hx-dcard :is(h1, h2, h3, h4, h5):first-of-type > i:first-child, body:not(#_) .hx-dcard .x3-card__t > i:first-child { width: 30px; height: 30px; border-radius: 10px; display: inline-grid; place-items: center; flex: 0 0 auto;
  font-size: 12px; color: #fff !important; -webkit-text-fill-color: #fff; background: conic-gradient(from 210deg, #22d3ee, #6366f1, #8b5cf6, #f472b6, #22d3ee) !important; box-shadow: 0 0 14px rgba(99, 102, 241, .35); }
body:not(#_) .hx-dcard .x3-card__d { margin: 0 0 6px !important; font-size: 12px !important; }
/* tools row: faint until hover (as on the task deck) */
body:not(#_) .hx-deck .hx-bar { opacity: .4; transition: opacity .15s; margin-bottom: 4px; }
body:not(#_) .hx-deck .hx-dcard:hover .hx-bar, body:not(#_) .hx-deck .hx-dcard:focus-within .hx-bar { opacity: 1; }
body:not(#_) .hx-bar .hx-deckonly { display: none; }
body:not(#_) .hx-deck .hx-bar .hx-deckonly { display: inline-grid; }
body:not(#_) .hx-deck .hx-chart { width: 100% !important; flex: 0 0 auto; }
body:not(#_) .hx-emptied { display: none !important; }
@media (max-width: 1100px) { body:not(#_) .hx-deck > .hx-dcard { grid-column: span 3 !important; } body:not(#_) .hx-deck > .hx-dcard.hx-l { grid-column: span 6 !important; } }
@media (max-width: 700px) { body:not(#_) .hx-deck > .hx-dcard { grid-column: span 6 !important; } }
@media print { body:not(#_) .hx-deckbar { display: none !important; } body:not(#_) .hx-deck > .hx-dcard { break-inside: avoid; box-shadow: none !important; } }