.worksheet-dashboard {
  --dashboard-column-width: 100px;
  height: auto;
  min-height: 0;
  overflow: visible;
  background: inherit;
}
.workbook-content:has(> .worksheet-dashboard) {
  overflow-x: auto;
}
.worksheet-dashboard > .worksheet-dashboard-grid { align-self: flex-start; flex-shrink: 0; }
.worksheet-dashboard-grid,
.worksheet-dashboard .ui-dashboard {
  width: max(100%, calc(var(--dashboard-columns) * var(--dashboard-column-width)));
  min-width: max(100%, calc(var(--dashboard-columns) * var(--dashboard-column-width)));
  max-width: max(100%, calc(var(--dashboard-columns) * var(--dashboard-column-width)));
  min-height: 100%;
  background: inherit;
}
.worksheet-dashboard .ui-dashboard-empty {
  min-height: 180px;
}
.worksheet-dashboard .ui-dashboard-card.is-viewport-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1200;
  box-sizing: border-box;
  width: 100vw !important;
  height: 100dvh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: var(--color-surface);
}
.worksheet-dashboard .ui-dashboard-card.is-viewport-fullscreen .ui-dashboard-card-header {
  border-radius: 0;
  cursor: default;
}
.worksheet-dashboard .ui-dashboard-card.is-viewport-fullscreen .ui-dashboard-card-body {
  min-width: 0;
  min-height: 0;
}
body:has(.worksheet-dashboard .ui-dashboard-card.is-viewport-fullscreen) {
  overflow: hidden;
}
.workbook-content:has(.ui-dashboard-card.is-viewport-fullscreen) {
  overflow: hidden;
}
.dashboard-card-editor .form-group { margin: 0; }
.dashboard-card-editor .form-label { display: block; margin-bottom: 5px; color: var(--color-text-muted); font-size: var(--font-size-small); font-weight: 600; }
.dashboard-parameter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dashboard-result-fields { display: grid; gap: 8px; }
.dashboard-result-field {
  display: grid;
  grid-template-columns: auto minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}
.dashboard-result-input { min-width: 0; }
.dashboard-result-style-line {
  display: flex;
  grid-column: 2 / -1;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.dashboard-result-style { max-width: 100%; }
.dashboard-result-controls { display: flex; align-items: center; gap: 2px; }
.dashboard-result-delete,
.dashboard-result-format-action {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  cursor: pointer;
}
.dashboard-result-delete { color: var(--color-danger); }
.dashboard-result-delete:hover,
.dashboard-result-delete:focus-visible { background: var(--color-danger-soft); outline: none; }
.dashboard-result-format-action { color: var(--color-text-muted); }
.dashboard-result-format-action:hover,
.dashboard-result-format-action:focus-visible { background: var(--color-primary-soft); color: var(--color-primary); outline: none; }
.dashboard-result-add { align-self: flex-start; }
@media (max-width: 640px) {
  .dashboard-result-field { grid-template-columns: minmax(0, 1fr); }
  .dashboard-result-style-line { grid-column: 1; }
}
.dashboard-card-editor .form-check { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
 (max-width: 640px) {
  .dashboard-parameter-grid, .dashboard-result-field { grid-template-columns: 1fr; }
}

/* Keep GridStack resize handles centered on the visible card border. */
.worksheet-dashboard .grid-stack-item.is-selected > .ui-dashboard-card {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary), 0 8px 20px color-mix(in srgb, var(--color-primary) 16%, transparent);
}

.worksheet-dashboard .grid-stack-item > .ui-resizable-handle {
  z-index: 11;
}
.worksheet-dashboard .grid-stack-item > .ui-resizable-s {
  left: calc(var(--gs-item-margin-left) + 10px) !important;
  right: calc(var(--gs-item-margin-right) + 10px) !important;
  bottom: var(--gs-item-margin-bottom) !important;
  height: 10px;
  transform: translateY(50%);
}
.worksheet-dashboard .grid-stack-item > .ui-resizable-e {
  top: calc(var(--gs-item-margin-top) + 10px) !important;
  right: var(--gs-item-margin-right) !important;
  bottom: calc(var(--gs-item-margin-bottom) + 10px) !important;
  width: 10px;
  transform: translateX(50%);
}
.worksheet-dashboard .grid-stack-item > .ui-resizable-w {
  top: calc(var(--gs-item-margin-top) + 10px) !important;
  bottom: calc(var(--gs-item-margin-bottom) + 10px) !important;
  left: var(--gs-item-margin-left) !important;
  width: 10px;
  transform: translateX(-50%);
}
.worksheet-dashboard .grid-stack-item > .ui-resizable-se {
  right: var(--gs-item-margin-right) !important;
  bottom: var(--gs-item-margin-bottom) !important;
  transform: translate(50%, 50%);
}
.worksheet-dashboard .grid-stack-item > .ui-resizable-sw {
  bottom: var(--gs-item-margin-bottom) !important;
  left: var(--gs-item-margin-left) !important;
  transform: translate(-50%, 50%);
}

/* Dashboard cards: keep resize hit areas and cursors, hide handle icons. */
.worksheet-dashboard .grid-stack-item > .ui-resizable-ne,
.worksheet-dashboard .grid-stack-item > .ui-resizable-nw,
.worksheet-dashboard .grid-stack-item > .ui-resizable-se,
.worksheet-dashboard .grid-stack-item > .ui-resizable-sw {
  background-image: none !important;
}

.ui-dashboard-card-body.dashboard-table-content { display: flex; align-items: stretch; justify-content: flex-start; padding: 10px; }
.dashboard-table-content > .ui-table-wrapper { width: 100%; height: 100%; align-self: stretch; }
.dashboard-table-content .ui-table-host,
.dashboard-table-content .ui-table { width: 100%; height: 100%; }
.dashboard-table-content .ui-table-scroll { width: 100%; max-width: 100%; height: 100%; align-self: stretch; border-left-width: 1px; border-right-width: 1px; }
.dashboard-table-content .ui-table-inner { min-width: 100% !important; margin-inline: 0; }
.dashboard-table-controls { display: inline-flex; align-items: center; gap: 4px; }
.dashboard-table-controls input { width: 120px; height: 28px; padding: 4px 7px; border: 1px solid var(--color-border-soft); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--font-size-small); outline: none; }
.dashboard-table-controls input:focus { border-color: var(--color-primary); }
.dashboard-table-controls button { width: auto !important; min-width: 0; height: 28px !important; padding: 0 7px !important; border: 1px solid transparent !important; border-radius: 5px !important; font-size: var(--font-size-small) !important; }
.dashboard-table-controls button.active { border-color: var(--color-primary) !important; background: var(--color-primary-soft) !important; color: var(--color-primary); }
.worksheet-dashboard .worksheet-column-function { display: none !important; }
.dashboard-column-actions { display: inline-flex; flex: 0 0 auto; gap: 2px; margin-left: auto; background: transparent; opacity: 0; }
.ui-table-column-header:hover .dashboard-column-actions { opacity: 1; }
.dashboard-column-properties { display: inline-flex; width: 20px; align-items: center; justify-content: center; min-width: 20px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--color-text-muted); font-size: 20px; font-weight: 700; line-height: 1; cursor: pointer; }
.dashboard-column-properties:hover { background: var(--color-border-soft); color: var(--color-primary); }
.dashboard-column-properties:focus,
.dashboard-column-properties:focus-visible { background: transparent; color: var(--color-primary); outline: none; box-shadow: none; }

.dashboard-card-editor {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--color-surface);
}
.dashboard-card-editor-header,
.dashboard-card-editor-footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
}
.dashboard-card-editor-header {
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border-soft);
}
.dashboard-card-editor-header h5 { margin: 0; }
.dashboard-card-editor-close {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 24px;
  line-height: 30px;
  cursor: pointer;
}
.dashboard-card-editor-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  flex-direction: column;
  gap: 8px;
}
.dashboard-card-editor-body > .uifloat:first-child { margin-top: .4rem; }
.dashboard-card-error { margin-top: 8px; color: var(--color-danger); font-size: var(--font-size-small); line-height: 1.4; }
.dashboard-card-editor-footer {
  justify-content: flex-end;
  border-top: 1px solid var(--color-border-soft);
}
.dashboard-card-editor-footer [data-dashboard-card-delete] { margin-right: auto; }

.worksheet-dashboard .ui-dashboard-results {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.worksheet-dashboard .ui-dashboard-results:hover {
  scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
}
.worksheet-dashboard .ui-dashboard-results::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.worksheet-dashboard .ui-dashboard-results::-webkit-scrollbar-track {
  background: transparent;
}
.worksheet-dashboard .ui-dashboard-results::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: var(--radius-pill);
  background-color: transparent;
  background-clip: padding-box;
}
.worksheet-dashboard .ui-dashboard-results:hover::-webkit-scrollbar-thumb {
  background-color: var(--color-scrollbar-thumb);
}
.worksheet-dashboard .ui-dashboard-results:hover::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-scrollbar-thumb-hover);
}
.worksheet-dashboard .ui-dashboard-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 28px;
  align-items: center;
  border-color: var(--color-border-soft);
}
.worksheet-dashboard .ui-dashboard-result-label { color: var(--color-text-secondary); }
.worksheet-dashboard .ui-dashboard-result-value { min-width: 0; color: var(--color-text); }
.worksheet-dashboard .ui-dashboard-result.is-missing .ui-dashboard-result-value { color: var(--color-danger); }
.dashboard-result-format {
  display: inline-flex;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}
.dashboard-result-format:hover,
.dashboard-result-format:focus-visible { background: var(--color-primary-soft); color: var(--color-primary); outline: none; }

.dashboard-card-modal:has(.dashboard-chart-parameters) .modal-dialog { width: min(720px, calc(100vw - 24px)); max-width: 720px; }
.site-theme[data-theme] .xfor-app-modal .dashboard-chart-editor .modal-body { gap: 8px; }
.dashboard-chart-parameters,
.dashboard-chart-panel,
[data-chart-series] { display: flex; min-width: 0; flex-direction: column; gap: 8px; }
.dashboard-chart-parameters { color: var(--color-text); }
.dashboard-chart-mode-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.dashboard-chart-mode-picker legend { grid-column: 1 / -1; margin-bottom: 2px; color: var(--color-text-strong); font-size: var(--font-size-small); font-weight: 600; }
.dashboard-chart-mode-picker button { display: flex; min-width: 0; min-height: 58px; align-items: center; justify-content: center; flex-direction: column; gap: 4px; padding: 7px; border: 1px solid var(--color-border-soft); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text-muted); font: inherit; font-size: var(--font-size-small); cursor: pointer; }
.dashboard-chart-mode-picker button:hover,
.dashboard-chart-mode-picker button:focus-visible { border-color: var(--color-primary); color: var(--color-primary); outline: none; }
.dashboard-chart-mode-picker button.is-active { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.dashboard-chart-mode-icons { display: inline-flex; align-items: center; justify-content: center; }
.dashboard-chart-mode-icons .uiicon + .uiicon { margin-left: -5px; }
.dashboard-chart-panel { padding-top: 2px; }
.dashboard-chart-section-title { display: flex; align-items: center; gap: 5px; margin: 2px 0 0; color: var(--color-text-strong); font-size: var(--font-size-small); font-weight: 600; line-height: 1.3; }
.dashboard-chart-series-head,
.dashboard-chart-series { display: grid; grid-template-columns: 14px minmax(90px, .85fr) minmax(90px, .85fr) minmax(120px, 1.2fr) 42px 28px; align-items: center; gap: 6px; min-width: 0; }
.dashboard-chart-series-head { padding: 0 2px; color: var(--color-text-muted); font-size: var(--font-size-small); }
.dashboard-chart-series { min-height: 34px; }
.dashboard-chart-series .uifloat { min-width: 0; }
.dashboard-chart-series .ui-float-control { min-height: 32px; padding-top: 5px; padding-bottom: 5px; font-size: var(--font-size-small); }
.dashboard-chart-series-handle { width: 10px; height: 18px; color: var(--color-text-muted); background-image: radial-gradient(circle, currentColor 1.4px, transparent 1.5px); background-position: 0 0; background-size: 5px 5px; opacity: .9; }
.dashboard-chart-parameters .dashboard-parameter-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 8px; }
.dashboard-chart-parameters [hidden] { display: none !important; }
.modal-item-add,
.dashboard-chart-add { display: inline-flex; align-self: flex-start; align-items: center; gap: 5px; min-height: 26px; padding: 2px 0; border: 0; background: transparent; color: var(--color-primary); font: inherit; font-size: var(--font-size-small); cursor: pointer; }
.modal-item-add:hover,
.modal-item-add:focus-visible,
.dashboard-chart-add:hover,
.dashboard-chart-add:focus-visible { color: var(--color-primary-hover); outline: none; }
.dashboard-chart-remove { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-text-muted); cursor: pointer; }
.dashboard-chart-remove:hover,
.dashboard-chart-remove:focus-visible { background: var(--color-danger-soft); color: var(--color-danger); outline: none; }
.dashboard-chart-remove:disabled { opacity: .4; cursor: default; }
.dashboard-chart-remove .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.dashboard-chart-options { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; }
.dashboard-chart-options .form-check { margin-top: 0; }
.dashboard-chart-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.dashboard-chart-choice-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard-chart-choice-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dashboard-chart-choice legend,
.dashboard-chart-color-choice legend { grid-column: 1 / -1; margin: 0 0 2px; color: var(--color-text-strong); font-size: var(--font-size-small); font-weight: 600; }
.dashboard-chart-choice button { display: flex; min-width: 0; min-height: 52px; align-items: center; justify-content: center; flex-direction: column; gap: 3px; padding: 6px; border: 1px solid var(--color-border-soft); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text-muted); font: inherit; font-size: var(--font-size-small); cursor: pointer; }
.dashboard-chart-choice button:hover,
.dashboard-chart-choice button:focus-visible { border-color: var(--color-primary); color: var(--color-primary); outline: none; }
.dashboard-chart-choice button.is-active { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.dashboard-chart-color-choice { display: flex; min-width: 0; margin: 0; padding: 0; border: 0; align-items: center; flex-wrap: wrap; gap: 7px 28px; }
.dashboard-chart-color-choice label { display: inline-flex; align-items: center; gap: 7px; color: var(--color-text); font-size: var(--font-size-small); cursor: pointer; }
[data-chart-items-section],
[data-chart-items] { display: grid; min-width: 0; gap: 6px; }
[data-chart-items] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashboard-chart-item { display: grid; grid-template-columns: 26px minmax(0, 1fr) 28px; min-width: 0; min-height: 30px; align-items: center; gap: 6px; padding: 0 3px; border: 1px solid var(--color-border-soft); border-radius: var(--radius-control); }
.dashboard-chart-item > span { overflow-wrap: anywhere; }
.dashboard-chart-color { width: 26px; min-width: 26px; height: 26px; padding: 3px; border: 1px solid var(--color-border-soft); border-radius: var(--radius-control); background: var(--color-surface); cursor: pointer; }
.dashboard-chart-color::-webkit-color-swatch-wrapper { padding: 0; }
.dashboard-chart-color::-webkit-color-swatch { border: 0; border-radius: calc(var(--radius-control) / 2); }
@media (max-width: 640px) {
  .dashboard-chart-mode-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-chart-mode-picker legend { grid-column: 1 / -1; }
  .dashboard-chart-parameters .dashboard-parameter-grid { grid-template-columns: 1fr; }
  .dashboard-chart-series-head { display: none; }
  .dashboard-chart-series { grid-template-columns: 14px minmax(0, 1fr) minmax(0, 1fr) 28px; padding: 6px 0; border-bottom: 1px solid var(--color-border-soft); }
  .dashboard-chart-series [data-chart-series-type] { grid-column: 2; }
  .dashboard-chart-series [name="aggregation"] { grid-column: 3; }
  .dashboard-chart-series .uifloat:has([name="valueField"]) { grid-column: 2 / 4; }
  .dashboard-chart-series .dashboard-chart-color { grid-column: 2; }
  .dashboard-chart-series .dashboard-chart-remove { grid-column: 4; grid-row: 1; }
  .dashboard-chart-choice-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-chart-items] { grid-template-columns: 1fr; }
}
.dashboard-table-parameters{display:flex;flex-direction:column;gap:8px;min-width:0}
.dashboard-table-columns{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;align-items:center;gap:12px;min-width:0}
.dashboard-table-column-list{display:flex;min-width:0;flex-direction:column;gap:4px}
.dashboard-table-column-list > label{color:var(--color-text-secondary);font-size:12px;font-weight:600}
.dashboard-table-column-list select{width:100%;min-height:180px;overflow:auto}
.dashboard-table-column-actions,.dashboard-table-order-actions{display:flex;flex-direction:column;gap:8px}
.dashboard-table-column-actions .btn,.dashboard-table-order-actions .btn{display:inline-flex;min-width:38px;align-items:center;justify-content:center;padding:7px}
.dashboard-table-arrow-left{transform:rotate(180deg)}
.dashboard-table-options{display:grid;grid-template-columns:minmax(0,1fr) minmax(5.75rem,max-content) minmax(4.5rem,12.5%);gap:8px}
.dashboard-table-parameters .form-check{margin-top:0}
.dashboard-table-parameters > [data-dashboard-conditional-formats]{align-self:flex-start}
@media (max-width:640px){
  .dashboard-table-columns{grid-template-columns:1fr}
  .dashboard-table-column-actions,.dashboard-table-order-actions{flex-direction:row;justify-content:center}
  .dashboard-table-column-actions [data-table-add] .uiicon{transform:rotate(90deg)}
  .dashboard-table-column-actions [data-table-remove] .uiicon{transform:rotate(-90deg)}
  .dashboard-table-options{grid-template-columns:1fr}
}