/* SPDash — customizable widget dashboards (assets/js/sp-dash.js): commerce + every workspace */
/* Two columns of widgets. Main holds full-width or half-width cards; side stacks narrow cards. */
.db-grid { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.db-col { min-width: 0; gap: 16px; }
.db-main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
.db-side { display: flex; flex-direction: column; }
.db-w { min-width: 0; display: flex; flex-direction: column; }
.db-w > .sp-card { flex: 1 1 auto; }
.db-main > .db-w { grid-column: span 2; }
.db-main > .db-w[data-size="half"] { grid-column: span 1; }
@media (max-width: 1199.98px) { .db-grid { grid-template-columns: minmax(0, 1fr); } .db-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
@media (max-width: 767.98px) { .db-main > .db-w[data-size="half"] { grid-column: span 2; } }

.db-w.is-new > .sp-card { animation: sp-pop .35s var(--sp-ease); }

/* ── Customize mode ─────────────────────────────── */
.db-editbar { position: sticky; top: calc(var(--sp-topbar-h) + 8px); z-index: var(--sp-z-sticky); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; padding: 10px 14px; border: 1px solid var(--sp-primary-soft-2); border-radius: var(--sp-radius-lg); background: color-mix(in srgb, var(--sp-primary-soft) 88%, var(--sp-surface)); box-shadow: var(--sp-shadow-lg); animation: sp-pop .25s var(--sp-ease); }
.db-editbar[hidden] { display: none; }
.db-editbar-text { flex: 1 1 260px; margin: 0; font-size: var(--sp-fs-sm); color: var(--sp-text-2); }
.db-editbar-text iconify-icon { vertical-align: -2px; }
.db-editbar-acts { display: flex; gap: 8px; margin-left: auto; }
#dbEdit[aria-pressed="true"] { border-color: var(--sp-primary); color: var(--sp-primary); }
/* phones: keep the bar to its buttons; the help text stays for screen readers */
@media (max-width: 575.98px) {
  .db-editbar { padding: 8px 10px; }
  .db-editbar > .sp-ico-tile { display: none; }
  .db-editbar-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .db-editbar-acts { flex: 1; }
  .db-editbar-acts .btn { flex: 1; }
}

.db-w { position: relative; }
.db-w-bar { display: none; align-items: center; gap: 4px; margin-bottom: 6px; }
.is-editing .db-w-bar, .db-w.is-dragging .db-w-bar { display: flex; }
.db-w-grip { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 4px; border: 0; border-radius: var(--sp-radius-xs); background: transparent; color: var(--sp-text); font-size: var(--sp-fs-sm); font-weight: 600; text-align: left; cursor: grab; touch-action: none; }
.db-w-grip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-w-grip iconify-icon { flex-shrink: 0; font-size: 18px; color: var(--sp-muted); }
.db-w-grip:hover, .db-w-grip:focus-visible { background: var(--sp-primary-soft); }
.db-w-btn { width: 30px; height: 30px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--sp-border); border-radius: var(--sp-radius-xs); background: var(--sp-surface); color: var(--sp-muted); font-size: 15px; }
.db-w-btn:hover:not(:disabled) { color: var(--sp-primary); border-color: var(--sp-primary); }
.db-w-btn:disabled { opacity: .4; }
.db-w-btn.is-danger:hover { color: var(--sp-danger); border-color: var(--sp-danger); }
.db-side .db-w-size { display: none; }
@media (max-width: 767.98px) { .db-w-size { display: none; } }

.is-editing .db-w > .sp-card { pointer-events: none; user-select: none; outline: 1.5px dashed var(--sp-border-strong); outline-offset: 3px; }
@media (pointer: fine) { .is-editing .db-w > .sp-card { cursor: grab; } }
.is-editing .db-col { min-height: 160px; padding: 6px; margin: -6px; border-radius: calc(var(--sp-radius-lg) + 6px); transition: background-color .15s; }
.is-editing .db-col.is-over { background: color-mix(in srgb, var(--sp-primary) 5%, transparent); }
.db-col-empty { display: none; }
.is-editing .db-col > .db-col-empty:only-child { display: flex; grid-column: 1 / -1; min-height: 148px; align-items: center; justify-content: center; border: 1.5px dashed var(--sp-border-strong); border-radius: var(--sp-radius-lg); color: var(--sp-muted); font-size: var(--sp-fs-sm); }

.db-ph { border: 2px dashed var(--sp-primary); border-radius: var(--sp-radius-lg); background: color-mix(in srgb, var(--sp-primary) 6%, transparent); }
.db-w.is-dragging { position: fixed; z-index: var(--sp-z-top); margin: 0; pointer-events: none; transform: rotate(1.2deg) scale(1.02); transform-origin: top left; opacity: .96; }
.db-w.is-dragging > .sp-card { box-shadow: var(--sp-shadow-lg); outline: 2px solid var(--sp-primary); outline-offset: 0; }
.db-dragging, .db-dragging * { cursor: grabbing !important; user-select: none; }
.db-w.is-moved > .sp-card { animation: db-flash .9s var(--sp-ease); }
@keyframes db-flash { 0% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp-primary) 45%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .db-w.is-dragging { transform: none; } .db-w.is-moved > .sp-card, .db-editbar { animation: none; } }

/* ── Drag from the Add Widget drawer ────────────── */
.db-drawer-tip { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding: 10px 12px; border-radius: var(--sp-radius-sm); background: var(--sp-primary-soft); color: var(--sp-text-2); font-size: var(--sp-fs-xs); }
.db-drawer-tip iconify-icon { flex-shrink: 0; font-size: 18px; color: var(--sp-primary); }
#dbWidgetList .sp-widget-prev { position: relative; }
#dbWidgetList .sp-widget-opt:not(.is-added) .sp-widget-prev { cursor: grab; }
.db-opt-grip { position: absolute; top: 6px; left: 6px; z-index: 1; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--sp-radius-xs); background: var(--sp-surface); border: 1px solid var(--sp-border); color: var(--sp-muted); font-size: 16px; touch-action: none; cursor: grab; }
.db-ghost > .sp-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px; text-align: center; }
.db-ghost-art { display: flex; align-items: center; justify-content: center; height: 76px; }
.db-ghost small { color: var(--sp-muted); font-size: var(--sp-fs-2xs); }

/* Card footer: a note and a link */
.db-w-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--sp-divider); font-size: var(--sp-fs-xs); color: var(--sp-muted); }
.db-w-foot a { font-weight: 600; text-decoration: none; }

/* Workspace dashboards: a long workflow scrolls sideways inside its card instead of wrapping */
.db-w .spm-hflow { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(118px, 1fr); overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: thin; }
/* phones: module segments two per row instead of running off the card */
@media (max-width: 575.98px) { .db-w .sp-segs { flex-wrap: wrap; row-gap: 8px; } .db-w .sp-seg { min-width: calc(50% - 4px); } }