/* MODULE CANVAS V1: one restrained layout language for every command-center module. */
.module-canvas-toolbar {
  position: relative;
  z-index: 2;
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;
  margin: 0 0 12px;
  padding: 8px 11px 8px 13px;
  border: 1px solid color-mix(in srgb, var(--product-line, #4a6870) 72%, transparent);
  border-radius: 2px;
  background: color-mix(in srgb, var(--product-surface, #10242d) 84%, transparent);
  box-shadow: 0 10px 24px rgb(4 18 22 / 8%);
}

.module-canvas-toolbar-title,
.module-canvas-toolbar-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.module-canvas-toolbar-title strong {
  color: var(--product-text, #d9e9e5);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.module-canvas-kicker,
.module-canvas-status {
  color: var(--product-muted, #82a29f);
  font: 10px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .08em;
  white-space: nowrap;
}

.module-canvas-status {
  padding-left: 9px;
  border-left: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  letter-spacing: .01em;
}

.module-canvas-status[data-status="editing"] { color: #d5ad68; }
.module-canvas-status[data-status="saved"] { color: #79c7ae; }
.module-canvas-status[data-status="error"] { color: #e29b87; }

.module-canvas-toolbar-actions .mini-action {
  min-height: 29px;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--product-line, #4a6870) 72%, transparent);
  background: color-mix(in srgb, var(--product-surface, #10242d) 68%, transparent);
  color: var(--product-muted, #9bb6b1);
  font-size: 11px;
  white-space: nowrap;
}

.module-canvas-toolbar-actions .mini-action:hover:not(:disabled),
.module-canvas-toolbar-actions .mini-action:focus-visible {
  border-color: color-mix(in srgb, #d5ad68 72%, var(--product-line, #4a6870));
  color: #f0d49c;
}

.module-canvas-toolbar-actions .module-canvas-edit {
  border-color: color-mix(in srgb, #d5ad68 58%, var(--product-line, #4a6870));
  color: #e2bf7d;
}

.module-canvas-toolbar-actions .module-canvas-edit[aria-pressed="true"] {
  background: #c69d5c;
  color: #13252a;
}

.module-canvas-toolbar-actions .mini-action:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.module-canvas-grid {
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(84px, auto) !important;
  align-items: stretch;
  gap: 12px !important;
  min-width: 0;
  min-height: 0;
  overflow-x: clip;
}

.module-canvas-grid::before {
  position: absolute;
  z-index: -1;
  inset: -5px 0 0;
  content: "";
  pointer-events: none;
  border-top: 1px solid color-mix(in srgb, var(--product-line, #4a6870) 36%, transparent);
  opacity: .56;
}

html[data-theme="night"] .module-canvas-toolbar {
  border-color: rgb(128 199 192 / 25%);
  background: rgb(9 25 32 / 84%);
  box-shadow: inset 0 1px rgb(255 255 255 / 3%), 0 14px 30px rgb(0 5 8 / 18%);
}

html[data-theme="night"] .module-canvas-grid::before {
  border-top-color: rgb(116 200 232 / 26%);
}

html[data-theme="day"] .module-canvas-toolbar {
  border-color: rgb(47 89 89 / 22%);
  background: rgb(250 252 247 / 88%);
  box-shadow: 0 10px 22px rgb(43 72 67 / 8%);
}

html[data-theme="day"] .module-canvas-toolbar-title strong { color: #23484a; }
html[data-theme="day"] .module-canvas-kicker,
html[data-theme="day"] .module-canvas-status { color: #6b8581; }
html[data-theme="day"] .module-canvas-toolbar-actions .mini-action {
  border-color: rgb(47 89 89 / 22%);
  color: #426668;
  background: rgb(255 255 255 / 68%);
}
html[data-theme="day"] .module-canvas-toolbar-actions .module-canvas-edit {
  border-color: rgb(153 113 47 / 50%);
  color: #87631f;
}

.module-canvas-widget {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  transition: opacity .2s ease, transform .2s ease;
}

.module-canvas-widget > .panel,
.module-canvas-widget > [data-ai-pane],
.module-canvas-widget > [data-module-canvas-block] {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: auto;
}

.ai-workbench__columns.module-canvas-grid > .module-canvas-widget:not(:first-child) > [data-ai-pane] {
  border-left: 1px solid var(--cc-line, #d9e0dc);
}

body.owner-shell-v1:not(.auth-required) .ai-workbench__columns.module-canvas-grid > .module-canvas-widget:not(:first-child) > [data-ai-pane] {
  background: rgb(255 255 252 / 34%);
}

html[data-theme="night"] body.owner-shell-v1:not(.auth-required) .ai-workbench__columns.module-canvas-grid > .module-canvas-widget:not(:first-child) > [data-ai-pane] {
  border-left-color: rgb(130 184 175 / 17%);
  background: rgb(17 35 36 / 54%);
}

.module-canvas-widget.is-dragging,
.module-canvas-widget.is-resizing {
  z-index: 10;
  opacity: .92;
}

.module-canvas-grid.is-editing {
  outline: 1px solid color-mix(in srgb, #8bcfc1 42%, transparent);
  outline-offset: 7px;
  background-image:
    repeating-linear-gradient(90deg, rgb(112 196 182 / 8%) 0 1px, transparent 1px 8.333%),
    repeating-linear-gradient(0deg, rgb(112 196 182 / 7%) 0 1px, transparent 1px 84px);
}

.module-canvas-grid.is-editing .module-canvas-widget > .panel,
.module-canvas-grid.is-editing .module-canvas-widget > [data-ai-pane],
.module-canvas-grid.is-editing .module-canvas-widget > [data-module-canvas-block] {
  border-style: dashed;
  border-color: color-mix(in srgb, #8bcfc1 60%, var(--product-line, #4a6870));
}

.module-canvas-widget.is-selected > .panel,
.module-canvas-widget.is-selected > [data-ai-pane],
.module-canvas-widget.is-selected > [data-module-canvas-block] {
  border-color: #d5ad68;
  box-shadow: 0 0 0 2px rgb(213 173 104 / 18%), 0 16px 30px rgb(0 0 0 / 18%);
}

[data-module-canvas-drag-handle],
[data-module-canvas-resize-handle] {
  position: absolute;
  z-index: 4;
  display: none;
  margin: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, #8bcfc1 54%, transparent);
  color: #9fd2c5;
  background: rgb(8 29 36 / 90%);
}

.module-canvas-grid.is-editing [data-module-canvas-drag-handle],
.module-canvas-grid.is-editing [data-module-canvas-resize-handle] { display: block; }

[data-module-canvas-drag-handle] {
  top: 7px;
  right: 32px;
  width: 28px;
  height: 20px;
  font: 14px/12px ui-monospace, Consolas, monospace;
  letter-spacing: 2px;
  cursor: grab;
}

[data-module-canvas-drag-handle]:active { cursor: grabbing; }

[data-module-canvas-resize-handle] {
  right: 5px;
  bottom: 5px;
  width: 17px;
  height: 17px;
  border-top: 0;
  border-left: 0;
  cursor: nwse-resize;
}

[data-module-canvas-resize-handle]::before,
[data-module-canvas-resize-handle]::after {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 8px;
  height: 1px;
  content: "";
  transform: rotate(-45deg);
  background: currentColor;
}

[data-module-canvas-resize-handle]::after { right: 2px; bottom: 7px; width: 5px; }

@media (max-width: 1180px) {
  .module-canvas-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .module-canvas-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
    padding: 9px 10px;
  }

  .module-canvas-toolbar-title {
    width: 100%;
    flex-wrap: wrap;
    gap: 6px;
  }

  .module-canvas-toolbar-actions { display: none; }

  .module-canvas-grid,
  html[data-theme="night"] .module-canvas-grid,
  html[data-theme="day"] .module-canvas-grid {
    display: flex !important;
    flex-direction: column;
    gap: 10px !important;
    min-height: 0;
  }

  .module-canvas-widget,
  .module-canvas-widget > .panel:not(.items-v2__update-panel),
  .module-canvas-widget > [data-ai-pane],
  .module-canvas-widget > [data-module-canvas-block]:not(.items-v2__update-panel) {
    width: 100% !important;
    height: auto !important;
    min-height: 0;
  }

  .module-canvas-widget > .panel:not(.items-v2__update-panel),
  .module-canvas-widget > [data-ai-pane],
  .module-canvas-widget > [data-module-canvas-block]:not(.items-v2__update-panel) { overflow: visible; }

  .ai-workbench__columns.module-canvas-grid > .module-canvas-widget:not(:first-child) > [data-ai-pane] {
    border-left: 0;
  }

  [data-module-canvas-drag-handle],
  [data-module-canvas-resize-handle],
  .module-canvas-grid.is-editing [data-module-canvas-drag-handle],
  .module-canvas-grid.is-editing [data-module-canvas-resize-handle] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .module-canvas-toolbar,
  .module-canvas-widget { transition: none; }
}