.tbe-dashboard-tools {
  display: flex;
  justify-content: flex-end;
  margin: -8px 0 10px;
}

.tbe-dashboard-customize,
.tbe-dashboard-reset,
.tbe-dashboard-move-button {
  min-height: 31px;
  padding: 5px 9px;
  border: 1px solid var(--line, #cfd8dc);
  border-radius: 3px;
  background: #fff;
  color: var(--ink, #25343c);
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
}

.tbe-dashboard-customize:hover,
.tbe-dashboard-reset:hover,
.tbe-dashboard-move-button:not(:disabled):hover {
  border-color: #9dbbcc;
  background: #f5f8f9;
}

.tbe-dashboard-editor {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid var(--line, #cfd8dc);
  background: #fff;
}

.tbe-dashboard-editor h2 {
  margin: 0;
  font-size: 14px;
}

.tbe-dashboard-editor-hint {
  margin: 0;
  color: var(--muted, #52616a);
  font-size: 12px;
  line-height: 1.4;
}

.tbe-dashboard-widget-list {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.tbe-dashboard-setting-row {
  display: grid;
  grid-template-columns: 20px minmax(150px, 1fr) minmax(120px, 170px) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid #e2e8eb;
  background: #fff;
  cursor: grab;
}

.tbe-dashboard-setting-row:active { cursor: grabbing; }
.tbe-dashboard-setting-row.is-dragging { opacity: .65; }
.tbe-dashboard-setting-row.is-drop-target { border-color: #6d9a91; background: #f4f8f7; }
.tbe-dashboard-drag-mark { color: var(--muted, #52616a); font-size: 13px; letter-spacing: -2px; user-select: none; }

.tbe-dashboard-show-label,
.tbe-dashboard-size-label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--ink, #25343c);
  font-size: 12px;
}

.tbe-dashboard-show-label { cursor: pointer; font-weight: 600; }
.tbe-dashboard-show-label input { flex: 0 0 auto; accent-color: var(--teal-dark, #345e31); }
.tbe-dashboard-size-label { justify-content: space-between; color: var(--muted, #52616a); }
.tbe-dashboard-size-label select { min-width: 0; min-height: 29px; padding: 3px 5px; border: 1px solid var(--line, #cfd8dc); border-radius: 3px; background: #fff; color: var(--ink, #25343c); font-size: 12px; }
.tbe-dashboard-move-controls { display: flex; gap: 4px; }
.tbe-dashboard-move-button { width: 30px; padding: 3px; font-size: 14px; line-height: 1; }
.tbe-dashboard-move-button:disabled { opacity: .45; cursor: not-allowed; }
.tbe-dashboard-editor-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.tbe-dashboard-status { color: var(--muted, #52616a); font-size: 12px; }

.overview-summary-grid.tbe-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
  margin-bottom: 18px;
}

.tbe-dashboard-grid .tbe-dashboard-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 6px;
  min-width: 0;
  min-height: 93px;
  overflow: hidden;
  padding: 15px;
  border: 1px solid var(--line, #cfd8dc);
  border-radius: 3px;
  background: #fff;
  color: var(--ink, #25343c);
  text-align: left;
  text-decoration: none;
}

.tbe-dashboard-grid .tbe-dashboard-card:hover { border-color: #9dbbcc; background: #fbfdfe; }
.tbe-dashboard-grid .tbe-dashboard-card > span { grid-column: 1; grid-row: auto; color: var(--muted, #52616a); font-size: 12px; font-weight: 600; }
.tbe-dashboard-grid .tbe-dashboard-card > strong { grid-column: 1; grid-row: auto; max-width: 100%; overflow: hidden; color: var(--ink, #25343c); font-size: 24px; font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; text-align: left; text-overflow: ellipsis; white-space: normal; }
.tbe-dashboard-grid [data-dashboard-widget="import"] > strong { font-size: 16px; }
.tbe-dashboard-grid .tbe-dashboard-card > small { grid-column: 1; grid-row: auto; max-width: 100%; overflow: hidden; color: var(--muted, #52616a); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; text-overflow: ellipsis; white-space: normal; }
.tbe-dashboard-grid .tbe-dashboard-task > strong { font-size: 16px; }
.tbe-dashboard-grid .tbe-dashboard-size-compact { grid-column: span 4; }
.tbe-dashboard-grid .tbe-dashboard-size-standard { grid-column: span 6; }
.tbe-dashboard-grid .tbe-dashboard-size-wide { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .tbe-dashboard-grid .tbe-dashboard-size-compact,
  .tbe-dashboard-grid .tbe-dashboard-size-standard { grid-column: span 6; }
}

@media (max-width: 700px) {
  .tbe-dashboard-setting-row { grid-template-columns: 18px minmax(0, 1fr) minmax(105px, 140px) auto; gap: 6px; }
  .overview-summary-grid.tbe-dashboard-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
  .tbe-dashboard-grid .tbe-dashboard-size-compact,
  .tbe-dashboard-grid .tbe-dashboard-size-standard { grid-column: span 2; }
  .tbe-dashboard-grid .tbe-dashboard-card { padding: 13px; }
}

@media (max-width: 520px) {
  .tbe-dashboard-tools { margin-top: -7px; }
  .tbe-dashboard-setting-row { grid-template-columns: 16px minmax(0, 1fr) auto; }
  .tbe-dashboard-size-label { grid-column: 2; justify-content: flex-start; }
  .tbe-dashboard-move-controls { grid-column: 3; grid-row: 1 / span 2; }
  .overview-summary-grid.tbe-dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .tbe-dashboard-grid .tbe-dashboard-size-compact,
  .tbe-dashboard-grid .tbe-dashboard-size-standard,
  .tbe-dashboard-grid .tbe-dashboard-size-wide { grid-column: 1 / -1; }
  .tbe-dashboard-grid .tbe-dashboard-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 12px; padding: 13px 14px; }
  .tbe-dashboard-grid .tbe-dashboard-card > span { grid-column: 1; grid-row: 1; }
  .tbe-dashboard-grid .tbe-dashboard-card > strong { grid-column: 2; grid-row: 1 / span 2; max-width: 48vw; font-size: 20px; text-align: right; }
  .tbe-dashboard-grid [data-dashboard-widget="import"] > strong,
  .tbe-dashboard-grid .tbe-dashboard-task > strong { font-size: 14px; }
  .tbe-dashboard-grid .tbe-dashboard-card > small { grid-column: 1 / -1; grid-row: 2; }
  .tbe-dashboard-grid [data-dashboard-widget="import"] > strong,
  .tbe-dashboard-grid .tbe-dashboard-task > strong { grid-row: 1 / span 2; }
}

@media (max-width: 350px) {
  .tbe-dashboard-grid .tbe-dashboard-card { grid-template-columns: minmax(0, 1fr); }
  .tbe-dashboard-grid .tbe-dashboard-card > strong,
  .tbe-dashboard-grid [data-dashboard-widget="import"] > strong,
  .tbe-dashboard-grid .tbe-dashboard-task > strong { grid-column: 1; grid-row: 2; max-width: 100%; text-align: left; }
  .tbe-dashboard-grid .tbe-dashboard-card > small { grid-row: 3; }
}