/* Taska Dialog Studio — Light Console.
 * Loaded after the global design system. It changes visual treatment only:
 * dialog dimensions, DOM order, behavior, and feature workflows stay intact.
 */
:root {
  --dialog-ink: #172033;
  --dialog-slate: #566176;
  --dialog-primary: #0b63ce;
  --dialog-accent: #28a8ff;
  --dialog-frost: #f5f7fa;
  --dialog-paper: #ffffff;
  --dialog-line: #d7dee8;
  --dialog-danger: #b42318;
  --dialog-radius: 14px;
  --dialog-shadow: 0 24px 64px rgba(23, 32, 51, 0.22), 0 8px 24px rgba(23, 32, 51, 0.12);
  --dialog-focus-ring: 0 0 0 4px rgba(11, 99, 206, 0.18);
}

.workspace-dialog,
.tasks-dialog,
.app-ui-dialog,
.documents-export-dialog,
.documents-tree-export-dialog,
.documents-export-format-dialog,
.documents-tree-export-format-dialog,
.profile-password-dialog {
  --sl-input-height-medium: 46px;
  --sl-input-border-radius-medium: 10px;
  --sl-focus-ring-color: rgba(40, 168, 255, 0.42);
}

.workspace-dialog::part(overlay),
.tasks-dialog::part(overlay),
.app-ui-dialog::part(overlay),
.documents-export-dialog::part(overlay),
.documents-tree-export-dialog::part(overlay),
.documents-export-format-dialog::part(overlay),
.documents-tree-export-format-dialog::part(overlay),
.profile-password-dialog::part(overlay) {
  background: rgba(23, 32, 51, 0.56);
  backdrop-filter: blur(6px) saturate(0.82);
}

.workspace-dialog::part(panel),
.tasks-dialog::part(panel),
.app-ui-dialog::part(panel),
.documents-export-dialog::part(panel),
.documents-tree-export-dialog::part(panel),
.documents-export-format-dialog::part(panel),
.documents-tree-export-format-dialog::part(panel),
.profile-password-dialog::part(panel) {
  border: 1px solid var(--dialog-line) !important;
  border-radius: var(--dialog-radius) !important;
  background: var(--dialog-paper);
  box-shadow: var(--dialog-shadow);
  overflow: hidden;
}

.workspace-dialog[open]::part(panel),
.tasks-dialog[open]::part(panel),
.app-ui-dialog[open]::part(panel),
.profile-password-dialog[open]::part(panel) {
  animation: dialog-studio-enter 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes dialog-studio-enter {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Light control header + two-step work rail: Taska's signature motif. */
.workspace-dialog .workspace-dialog__header,
.tasks-dialog__header,
.tasks-wizard__header,
.documents-history-viewer-dialog__header {
  position: relative;
  min-height: 72px;
  padding: 12px 24px;
  border: 0;
  border-bottom: 1px solid var(--dialog-line);
  color: var(--dialog-ink);
  background: var(--dialog-paper);
}

.workspace-dialog .workspace-dialog__header::after,
.tasks-dialog__header::after,
.tasks-wizard__header::after,
.documents-history-viewer-dialog__header::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  width: 92px;
  height: 3px;
  background: var(--dialog-primary);
  box-shadow: 92px 0 0 var(--dialog-accent);
  pointer-events: none;
}

.workspace-dialog .workspace-dialog__header h2,
.workspace-dialog .workspace-dialog__header h3,
.workspace-dialog .workspace-dialog__title,
.tasks-dialog__header h3,
.tasks-wizard__header h2,
.documents-history-viewer-dialog__title {
  color: var(--dialog-ink);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.tasks-dialog__keypath,
.tasks-wizard__header p { color: var(--dialog-slate); }

.workspace-dialog .workspace-dialog__header .workspace-icon-button::part(base),
.tasks-dialog__header .workspace-icon-button::part(base),
.tasks-wizard__header .workspace-icon-button::part(base),
.tasks-dialog__header .tasks-delete-button::part(base) {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  border: 1px solid var(--dialog-line);
  border-radius: 11px !important;
  color: var(--dialog-slate);
  background: var(--dialog-frost);
  transition: color 180ms var(--ui-ease), background-color 180ms var(--ui-ease), border-color 180ms var(--ui-ease);
}

.workspace-dialog .workspace-dialog__header .workspace-icon-button:hover::part(base),
.tasks-dialog__header .workspace-icon-button:hover::part(base),
.tasks-wizard__header .workspace-icon-button:hover::part(base) {
  border-color: #a8c6eb;
  color: var(--dialog-primary);
  background: #e8f1fc;
}

.tasks-dialog__header .tasks-delete-button::part(base) {
  border-color: #f0c8c4;
  color: var(--dialog-danger);
  background: #fff4f2;
}
.tasks-dialog__header .tasks-delete-button:hover::part(base) {
  border-color: #db8f88;
  color: #8f1d15;
  background: #fee4e2;
}

.tasks-dialog__section-link {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--dialog-slate);
  background: transparent;
  transition: color 180ms var(--ui-ease), background-color 180ms var(--ui-ease), border-color 180ms var(--ui-ease);
}

.tasks-dialog__section-link:hover,
.tasks-dialog__section-link:focus-visible {
  border-color: #b8d0ed;
  color: var(--dialog-primary);
  background: #e8f1fc;
}

/* Shoelace-managed alerts, confirms, prompts, export, and password dialogs. */
.app-ui-dialog::part(header),
.profile-password-dialog::part(header),
.documents-export-format-dialog::part(header),
.documents-tree-export-format-dialog::part(header) {
  min-height: 72px;
  padding: 12px 20px 12px 24px;
  border: 0;
  border-bottom: 1px solid var(--dialog-line);
  color: var(--dialog-ink);
  background: var(--dialog-paper);
}

.app-ui-dialog::part(title),
.profile-password-dialog::part(title),
.documents-export-format-dialog::part(title),
.documents-tree-export-format-dialog::part(title) {
  color: var(--dialog-ink);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.022em;
}

.app-ui-dialog::part(close-button),
.profile-password-dialog::part(close-button),
.documents-export-format-dialog::part(close-button),
.documents-tree-export-format-dialog::part(close-button) {
  width: 44px;
  height: 44px;
  margin-inline-end: -8px;
  border: 1px solid var(--dialog-line);
  border-radius: 11px;
  color: var(--dialog-slate);
  background: var(--dialog-frost);
}

.app-ui-dialog::part(close-button):hover,
.profile-password-dialog::part(close-button):hover,
.documents-export-format-dialog::part(close-button):hover,
.documents-tree-export-format-dialog::part(close-button):hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
}

/* Same tab position, much stronger selected-state hierarchy. */
.workspace-dialog .workspace-tabs,
.workspace-dialog.user-dialog .user-dialog__tabs,
.workspace-dialog.role-dialog .role-dialog__tabs {
  gap: 6px;
  margin: 0;
  padding: 8px 20px;
  border: 0;
  border-block-end: 1px solid var(--dialog-line);
  border-radius: 0;
  background: #e9eff8;
}

.workspace-dialog .workspace-tab,
.workspace-dialog.user-dialog .user-dialog__tab,
.workspace-dialog.role-dialog .role-dialog__tab {
  min-width: 140px;
  margin: 0;
}

.workspace-dialog .workspace-tab::part(base),
.workspace-dialog.user-dialog .user-dialog__tab::part(base),
.workspace-dialog.role-dialog .role-dialog__tab::part(base) {
  min-height: 42px;
  padding: 8px 18px;
  border: 1px solid transparent;
  border-radius: 10px !important;
  color: var(--dialog-slate);
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  font-weight: 600;
  transform: none;
  transition: color 180ms var(--ui-ease), background-color 180ms var(--ui-ease), border-color 180ms var(--ui-ease), box-shadow 180ms var(--ui-ease);
}

.workspace-dialog .workspace-tab:hover::part(base),
.workspace-dialog.user-dialog .user-dialog__tab:hover::part(base),
.workspace-dialog.role-dialog .role-dialog__tab:hover::part(base) {
  border-color: #c5d2e5;
  color: var(--dialog-ink);
  background: rgba(255, 255, 255, 0.7);
}

.workspace-dialog .workspace-tab.is-active::part(base),
.workspace-dialog.user-dialog .user-dialog__tab.is-active::part(base),
.workspace-dialog.role-dialog .role-dialog__tab.is-active::part(base) {
  border-color: var(--dialog-primary);
  color: #ffffff;
  background: var(--dialog-primary);
  box-shadow: 0 5px 14px rgba(11, 99, 206, 0.2);
  font-weight: 600;
  transform: none;
}

/* Form canvas and instrument-like fields. */
.workspace-dialog .workspace-dialog__body,
.workspace-dialog .workspace-dialog__scroll,
.tasks-dialog__body,
.tasks-dialog__scroll,
.app-ui-dialog::part(body),
.profile-password-dialog::part(body) {
  color: var(--dialog-ink);
  background: var(--dialog-paper);
}

.workspace-dialog .workspace-dialog__scroll,
.tasks-dialog__scroll {
  padding: 22px 24px 24px;
  scrollbar-color: #8392aa transparent;
  scrollbar-width: thin;
}

.workspace-dialog .workspace-dialog__scroll::-webkit-scrollbar,
.tasks-dialog__scroll::-webkit-scrollbar { width: 10px; }

.workspace-dialog .workspace-dialog__scroll::-webkit-scrollbar-thumb,
.tasks-dialog__scroll::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: #8392aa;
  background-clip: padding-box;
}

.workspace-dialog :where(.workspace-field, .databases-field) > :where(span, label):first-child,
.workspace-dialog sl-input::part(form-control-label),
.workspace-dialog sl-select::part(form-control-label),
.workspace-dialog sl-textarea::part(form-control-label),
.workspace-dialog sl-radio-group::part(form-control-label),
.tasks-dialog sl-input::part(form-control-label),
.tasks-dialog sl-select::part(form-control-label),
.tasks-dialog sl-textarea::part(form-control-label) {
  margin-block-end: 7px;
  color: #43516a;
  font-family: var(--ui-font-data);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.workspace-dialog sl-input::part(base),
.workspace-dialog sl-select::part(combobox),
.workspace-dialog sl-textarea::part(base),
.app-ui-dialog sl-input::part(base),
.app-ui-dialog sl-textarea::part(base),
.profile-password-dialog sl-input::part(base) {
  border: 1px solid #b7c5d9;
  border-radius: 10px;
  color: var(--dialog-ink);
  background: #f8faff;
  box-shadow: inset 0 1px 0 rgba(14, 27, 54, 0.03);
  transition: border-color 180ms var(--ui-ease), background-color 180ms var(--ui-ease), box-shadow 180ms var(--ui-ease);
}

.workspace-dialog sl-input:not([disabled]):hover::part(base),
.workspace-dialog sl-select:not([disabled]):hover::part(combobox),
.workspace-dialog sl-textarea:not([disabled]):hover::part(base),
.app-ui-dialog sl-input:not([disabled]):hover::part(base),
.app-ui-dialog sl-textarea:not([disabled]):hover::part(base) {
  border-color: #7f91ad;
  background: #ffffff;
}

.workspace-dialog sl-input:focus-within::part(base),
.workspace-dialog sl-select:focus-within::part(combobox),
.workspace-dialog sl-textarea:focus-within::part(base),
.app-ui-dialog sl-input:focus-within::part(base),
.app-ui-dialog sl-textarea:focus-within::part(base),
.profile-password-dialog sl-input:focus-within::part(base) {
  border-color: var(--dialog-primary);
  background: #ffffff;
  box-shadow: var(--dialog-focus-ring);
}

.workspace-dialog sl-input[disabled]::part(base),
.workspace-dialog sl-select[disabled]::part(combobox),
.workspace-dialog sl-textarea[disabled]::part(base) {
  border-color: #d5deeb;
  color: #64728a;
  background: #edf1f7;
  opacity: 1;
}

.workspace-dialog sl-input[disabled]::part(input),
.workspace-dialog sl-textarea[disabled]::part(textarea) {
  color: #64728a;
  -webkit-text-fill-color: #64728a;
  opacity: 1;
}

/* Segmented choices read as one precise instrument. */
.workspace-dialog .workspace-status-group::part(form-control-input) {
  display: inline-flex;
  gap: 4px;
  width: fit-content;
  padding: 4px;
  border: 1px solid #c8d3e3;
  border-radius: 12px;
  background: #e9eff8;
}

.workspace-dialog .workspace-status-group sl-radio-button::part(base) {
  min-height: 40px;
  border: 0;
  border-radius: 9px;
}

.workspace-dialog .workspace-status-group sl-radio-button::part(button) {
  min-height: 40px;
  padding-inline: 18px;
  border: 0;
  border-radius: 9px;
  color: var(--dialog-slate);
  background: transparent;
  box-shadow: none;
  font-weight: 600;
}

.workspace-dialog .workspace-status-group sl-radio-button[checked]::part(button),
.workspace-dialog .workspace-status-group sl-radio-button::part(button--checked) {
  color: #ffffff;
  background: var(--dialog-primary);
  box-shadow: 0 5px 12px rgba(10, 102, 232, 0.22);
}

/* Blueprint upload well: the one patterned surface in the system. */
.workspace-dialog .avatar-dropzone { cursor: pointer; }

.workspace-dialog .avatar-dropzone__surface,
.workspace-dialog.user-dialog .user-dialog__dropzone .avatar-dropzone__surface {
  position: relative;
  min-height: 190px;
  padding: 22px;
  border: 1px dashed #76a8e9;
  border-radius: 15px;
  background-color: #f3f8ff;
  background-image: radial-gradient(circle, rgba(10, 102, 232, 0.13) 1px, transparent 1.25px);
  background-size: 18px 18px;
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.66);
  transition: border-color 180ms var(--ui-ease), background-color 180ms var(--ui-ease), box-shadow 180ms var(--ui-ease);
}

.workspace-dialog .avatar-dropzone:hover .avatar-dropzone__surface,
.workspace-dialog .avatar-dropzone:focus-within .avatar-dropzone__surface {
  border-color: var(--dialog-primary);
  background-color: #eaf3ff;
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.82), var(--dialog-focus-ring);
}

.workspace-dialog .avatar-dropzone.is-dragover .avatar-dropzone__surface {
  border-style: solid;
  border-color: var(--dialog-primary);
  background-color: #e4f0ff;
}

.workspace-dialog .avatar-dropzone__media--large,
.workspace-dialog.user-dialog .user-dialog__dropzone .avatar-dropzone__media--large {
  width: 104px;
  height: 104px;
  border: 6px solid #ffffff;
  border-radius: 26px;
  background: #dce9fa;
  box-shadow: 0 14px 30px rgba(14, 27, 54, 0.2), 0 0 0 1px rgba(14, 27, 54, 0.08);
}

.workspace-dialog .avatar-dropzone__hint {
  gap: 3px;
  color: #5e6d85;
  text-align: center;
}

.workspace-dialog .avatar-dropzone__hint strong {
  color: var(--dialog-primary);
  font-weight: 600;
}

.user-dialog__roles sl-checkbox,
.permission-matrix-table-wrap,
.documents-export-format-card {
  border-color: #ccd7e6;
  border-radius: 11px;
  background: #f8faff;
}

.user-dialog__roles sl-checkbox {
  position: relative;
  min-height: 48px;
  padding: 12px 14px;
  overflow: hidden;
  transition: border-color 180ms var(--ui-ease), background-color 180ms var(--ui-ease), box-shadow 180ms var(--ui-ease);
}

.user-dialog__roles sl-checkbox:hover { border-color: #8da2bf; background: #ffffff; }
.user-dialog__roles sl-checkbox[checked] {
  border-color: #82afea;
  background: #edf5ff;
  box-shadow: inset 4px 0 var(--dialog-primary);
}

.documents-export-format-card:hover,
.documents-export-format-card:focus-visible,
.documents-export-format-card.is-selected {
  border-color: var(--dialog-primary);
  background: #edf5ff;
  box-shadow: inset 4px 0 var(--dialog-primary), 0 8px 20px rgba(10, 102, 232, 0.1);
}

/* Content and action deck. */
.app-ui-dialog::part(body),
.profile-password-dialog::part(body) {
  padding: 22px 24px 24px;
  background: var(--dialog-paper);
}

.app-ui-dialog__message,
.app-ui-dialog__lead,
.app-ui-dialog__list-item {
  color: var(--dialog-ink);
  font-size: 14px;
  line-height: 1.6;
}

.app-ui-dialog__section,
.documents-export-format-dialog__body {
  border: 1px solid #d4deeb;
  border-radius: 12px;
  background: #f8faff;
}

.workspace-dialog .workspace-dialog__actions,
.workspace-dialog .workspace-dialog__footer,
.app-ui-dialog::part(footer),
.profile-password-dialog::part(footer),
.documents-history-viewer-dialog__footer {
  min-height: 76px;
  padding: 14px 24px;
  border: 0;
  border-block-start: 1px solid var(--dialog-line);
  color: var(--dialog-ink);
  background: var(--dialog-frost);
  box-shadow: inset 0 3px 0 #ffffff;
}

.workspace-dialog .workspace-dialog__actions sl-button::part(base),
.workspace-dialog .workspace-dialog__footer sl-button::part(base),
.app-ui-dialog__actions sl-button::part(base),
.workspace-dialog__footer-actions sl-button::part(base),
.profile-password-dialog sl-button::part(base) {
  min-height: 44px;
  padding-inline: 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  transition: color 180ms var(--ui-ease), background-color 180ms var(--ui-ease), border-color 180ms var(--ui-ease), box-shadow 180ms var(--ui-ease);
}

.workspace-dialog sl-button[variant="primary"]::part(base),
.tasks-dialog sl-button[variant="primary"]::part(base),
.app-ui-dialog sl-button[variant="primary"]::part(base),
.profile-password-dialog sl-button[variant="primary"]::part(base) {
  border-color: var(--dialog-primary);
  color: #ffffff;
  background: var(--dialog-primary);
  box-shadow: 0 8px 18px rgba(10, 102, 232, 0.22);
}

.workspace-dialog sl-button[variant="primary"]:hover::part(base),
.tasks-dialog sl-button[variant="primary"]:hover::part(base),
.app-ui-dialog sl-button[variant="primary"]:hover::part(base),
.profile-password-dialog sl-button[variant="primary"]:hover::part(base) {
  border-color: #0757c6;
  background: #0757c6;
  box-shadow: 0 10px 22px rgba(10, 102, 232, 0.3);
}

.workspace-dialog sl-button[variant="default"]::part(base),
.app-ui-dialog sl-button[variant="default"]::part(base),
.profile-password-dialog sl-button[variant="default"]::part(base) {
  border-color: #bdc9da;
  color: var(--dialog-ink);
  background: #ffffff;
}

#user-delete-button,
#role-delete-button { margin-inline-end: auto; }

#user-delete-button::part(base),
#role-delete-button::part(base),
.app-ui-dialog sl-button[variant="danger"]::part(base) {
  border-color: #efc7c4;
  color: var(--dialog-danger);
  background: #fff8f7;
}

#user-delete-button:hover::part(base),
#role-delete-button:hover::part(base),
.app-ui-dialog sl-button[variant="danger"]:hover::part(base) {
  border-color: var(--dialog-danger);
  color: #ffffff;
  background: var(--dialog-danger);
}

.documents-history-viewer-dialog {
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: var(--dialog-radius);
  box-shadow: var(--dialog-shadow);
}

.documents-history-viewer-dialog::backdrop {
  background: rgba(23, 32, 51, 0.56);
  backdrop-filter: blur(6px) saturate(0.82);
}

@media (max-width: 640px) {
  .workspace-dialog,
  .tasks-dialog,
  .app-ui-dialog,
  .profile-password-dialog { --sl-input-height-medium: 48px; }

  .workspace-dialog::part(panel),
  .tasks-dialog::part(panel),
  .app-ui-dialog::part(panel),
  .profile-password-dialog::part(panel) { border-radius: 16px !important; }

  .workspace-dialog .workspace-dialog__header,
  .tasks-dialog__header,
  .tasks-wizard__header,
  .app-ui-dialog::part(header),
  .profile-password-dialog::part(header) {
    min-height: 64px;
    padding: 10px 14px 10px 16px;
  }

  .workspace-dialog .workspace-dialog__header h2,
  .workspace-dialog .workspace-dialog__header h3,
  .workspace-dialog .workspace-dialog__title,
  .tasks-dialog__header h3,
  .app-ui-dialog::part(title),
  .profile-password-dialog::part(title) { font-size: 18px; }

  .workspace-dialog .workspace-tabs,
  .workspace-dialog.user-dialog .user-dialog__tabs,
  .workspace-dialog.role-dialog .role-dialog__tabs {
    gap: 4px;
    padding: 7px 12px;
    overflow-x: auto;
  }

  .workspace-dialog .workspace-tab,
  .workspace-dialog.user-dialog .user-dialog__tab,
  .workspace-dialog.role-dialog .role-dialog__tab { min-width: max-content; }

  .workspace-dialog .workspace-tab::part(base),
  .workspace-dialog.user-dialog .user-dialog__tab::part(base),
  .workspace-dialog.role-dialog .role-dialog__tab::part(base) {
    min-height: 44px;
    padding-inline: 16px;
  }

  .workspace-dialog .workspace-dialog__scroll,
  .tasks-dialog__scroll { padding: 18px 14px 20px; }

  .workspace-dialog .avatar-dropzone__surface,
  .workspace-dialog.user-dialog .user-dialog__dropzone .avatar-dropzone__surface {
    min-height: 152px;
    padding: 16px;
  }

  .workspace-dialog .avatar-dropzone__media--large,
  .workspace-dialog.user-dialog .user-dialog__dropzone .avatar-dropzone__media--large {
    width: 88px;
    height: 88px;
    border-width: 5px;
    border-radius: 22px;
  }

  .workspace-dialog .workspace-dialog__actions,
  .workspace-dialog .workspace-dialog__footer,
  .app-ui-dialog::part(footer),
  .profile-password-dialog::part(footer) {
    min-height: 72px;
    padding: 12px 14px;
  }

  .app-ui-dialog__actions,
  .workspace-dialog__footer-actions { width: 100%; }

  .app-ui-dialog__actions sl-button,
  .workspace-dialog__footer-actions sl-button {
    flex: 1 1 0;
    min-width: 0;
  }

  #user-delete-button,
  #role-delete-button { margin-inline-end: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-dialog[open]::part(panel),
  .tasks-dialog[open]::part(panel),
  .app-ui-dialog[open]::part(panel),
  .profile-password-dialog[open]::part(panel) { animation: none !important; }
}