/* REGAB personnel calm UI — 20260929-personnelcalm3 */

/* Shared theme tokens for training / settings overlays (body class drives theme). */
:root,
body.theme-light {
  --ps-surface: #ffffff;
  --ps-surface-2: #f4f7fa;
  --ps-surface-3: #eef3f8;
  --ps-border: #d5dee8;
  --ps-text: #122033;
  --ps-muted: #6a7c8f;
  --ps-accent: #1f6feb;
  --ps-accent-soft: #e8f0fe;
  --ps-input: #ffffff;
  --ps-danger: #b34855;
  --ps-footer: rgba(255, 255, 255, 0.94);
  --ps-shadow: 0 10px 28px rgba(18, 38, 58, 0.08);
}

html.theme-dark,
html[data-theme="dark"],
body.theme-dark,
body.force-dark {
  --ps-surface: #0d2137;
  --ps-surface-2: #102842;
  --ps-surface-3: #143554;
  --ps-border: #1f3f61;
  --ps-text: #edf6ff;
  --ps-muted: #9fb5cc;
  --ps-accent: #5a9cff;
  --ps-accent-soft: rgba(90, 156, 255, 0.16);
  --ps-input: #071827;
  --ps-danger: #f098a2;
  --ps-footer: rgba(10, 29, 49, 0.95);
  --ps-shadow: none;
}

/* Keep tool CSS vars in sync with the active theme (fixes light cards on dark pages). */
html.theme-dark,
html[data-theme="dark"],
body.theme-dark,
body.force-dark {
  --regab-tool-page: #081a2a;
  --regab-tool-surface: #0d2238;
  --regab-tool-soft: #10283f;
  --regab-tool-soft-strong: #142f49;
  --regab-tool-border: #294a68;
  --regab-tool-border-strong: #365b7b;
  --regab-tool-text: #f2f6fa;
  --regab-tool-muted: #9fb0c3;
  --regab-tool-input: #091d30;
  --regab-tool-accent: #5b96ff;
  --regab-tool-accent-soft: #122f50;
  --regab-tool-success: #5fd0a2;
  --regab-tool-success-soft: #123a32;
  --regab-tool-danger: #f098a2;
  --regab-tool-footer: rgba(10, 29, 49, 0.95);
  --regab-tool-shadow: none;
}

body.theme-light {
  --regab-tool-page: #f4f7fa;
  --regab-tool-surface: #fff;
  --regab-tool-soft: #f7f9fc;
  --regab-tool-soft-strong: #edf3f9;
  --regab-tool-border: #d8e2ec;
  --regab-tool-border-strong: #c4d2df;
  --regab-tool-text: #172638;
  --regab-tool-muted: #64758a;
  --regab-tool-input: #fff;
  --regab-tool-accent: #3478f6;
  --regab-tool-accent-soft: #edf4ff;
  --regab-tool-success: #17845b;
  --regab-tool-success-soft: #e8f7f0;
  --regab-tool-danger: #b34855;
  --regab-tool-footer: rgba(255, 255, 255, 0.94);
  --regab-tool-shadow: 0 10px 30px rgba(27, 52, 77, 0.07);
}

/* Settings picker: one calm vertical list, larger shell */
.regab-settings-launcher-calm {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  max-width: none;
  margin: 8px auto 0;
}

.regab-settings-picker-modal .regab-trainings-card {
  width: min(920px, calc(100vw - 28px)) !important;
  max-height: min(92vh, 900px) !important;
}

.regab-settings-panel-modal .regab-trainings-card {
  width: min(1480px, calc(100vw - 28px)) !important;
  max-height: min(94vh, 1080px) !important;
}

.regab-settings-panel-modal .regab-trainings-card-scroll {
  min-height: min(72vh, 820px) !important;
}

.regab-trainings-tool-modal:not(body.rtw-tool-page *) .regab-trainings-card,
.regab-trainings-modal.regab-trainings-tool-modal .regab-trainings-card {
  width: min(1180px, calc(100vw - 28px)) !important;
  max-height: min(92vh, 960px) !important;
}

.regab-settings-picker-modal .regab-trainings-card-head h2 {
  margin: 0 0 4px;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}

.regab-settings-picker-modal .regab-trainings-card-head .muted {
  margin: 0;
  font-size: 0.92rem;
}

.regab-settings-launcher-calm .regab-settings-picker-card {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 4px 14px;
  padding: 18px 20px !important;
  border-radius: 12px !important;
  transform: none !important;
}

.regab-settings-launcher-calm .regab-settings-picker-card.is-primary {
  border-color: var(--ps-accent, #1f6feb);
  background: var(--ps-accent-soft, #e8f1ff);
}

.regab-settings-launcher-calm .regab-settings-picker-card.is-quiet {
  opacity: 0.78;
  border-style: dashed;
}

.regab-settings-launcher-calm .regab-settings-picker-card:hover {
  transform: none !important;
  opacity: 1;
}

.regab-settings-picker-step {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--ps-surface, #fff);
  border: 1px solid var(--ps-border, #d5dee8);
  color: var(--ps-muted, #6b7c8f);
  font-size: 0.85rem;
  font-weight: 750;
}

.regab-settings-launcher-calm .is-primary .regab-settings-picker-step {
  background: var(--ps-accent, #1f6feb);
  border-color: var(--ps-accent, #1f6feb);
  color: #fff;
}

.regab-settings-picker-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.regab-settings-picker-copy strong {
  font-size: 1rem !important;
}

.regab-settings-picker-copy .muted {
  font-size: 0.82rem !important;
  line-height: 1.35 !important;
}

.regab-settings-picker-go {
  color: var(--ps-muted, #6b7c8f);
  font-size: 1.1rem;
  justify-self: end;
}

.regab-settings-panel-modal .regab-trainings-card-head p.muted {
  max-width: 52ch;
}

/* Template rows: one primary action + optional Mehr menu */
.regab-trainings-row-calm .regab-trainings-row-actions {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px !important;
  padding-left: 52px;
}

.regab-settings-panel-modal .regab-trainings-has-actions .regab-trainings-row-actions {
  justify-content: flex-start;
}

.regab-trainings-row-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px dashed var(--ps-border, #d5dee8);
}

.regab-trainings-row-menu[hidden] {
  display: none !important;
}

.regab-trainings-row-more {
  min-width: 76px;
}

.regab-settings-panel-modal .regab-trainings-hub-groups,
.personnel-settings-modal .regab-trainings-hub-groups {
  display: none !important;
}

.regab-training-status-toggle,
.regab-training-status-page-panel {
  display: none !important;
}

/* Funktionen: breathing room + tiles in a row */
.regab-settings-panel-modal .regab-settings-section[data-section="functions"] .personnel-function-form,
.regab-settings-panel-modal .regab-settings-section[data-section="functions"] .personnel-record-type-form,
body.rtw-functions-page .regab-settings-panel-modal .personnel-function-form,
body.rtw-functions-page .regab-settings-panel-modal .personnel-record-type-form {
  margin: 0 0 28px !important;
  padding: 18px 18px 16px !important;
}

.regab-settings-panel-modal .regab-settings-section[data-section="functions"] .personnel-record-type-list,
body.rtw-functions-page .regab-settings-panel-modal .personnel-record-type-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 14px !important;
  max-height: none !important;
  overflow: visible !important;
  margin-top: 8px !important;
}

.regab-settings-panel-modal .regab-settings-section[data-section="functions"] .personnel-record-type-list > .regab-personnel-setting-row,
.regab-settings-panel-modal .regab-settings-section[data-section="functions"] .personnel-record-type-list > div:not(.document-empty),
body.rtw-functions-page .regab-settings-panel-modal .personnel-record-type-list > .regab-personnel-setting-row,
body.rtw-functions-page .regab-settings-panel-modal .personnel-record-type-list > div:not(.document-empty) {
  grid-template-columns: 40px minmax(0, 1fr) !important;
  min-height: 72px !important;
  align-content: center;
}

/* Theme-safe overlays: --ps-* now defined on body; cards follow active theme */
.regab-trainings-tool-modal .regab-trainings-card,
.regab-instruction-app-modal .regab-instruction-app-card,
.regab-settings-panel-modal .regab-trainings-card,
.regab-settings-picker-modal .regab-trainings-card,
.regab-trainings-modal .regab-trainings-card {
  background: var(--ps-surface) !important;
  color: var(--ps-text) !important;
  border-color: var(--ps-border) !important;
  box-shadow: var(--ps-shadow) !important;
}

.regab-trainings-tool-modal .regab-trainings-actions,
.regab-instruction-app-modal .regab-instruction-app-actions,
.regab-settings-panel-modal .regab-trainings-actions,
.regab-settings-picker-modal .regab-trainings-actions {
  background: var(--ps-surface-2) !important;
  border-color: var(--ps-border) !important;
  color: var(--ps-text) !important;
}

.regab-trainings-tool-modal .regab-quiz-settings,
.regab-trainings-tool-modal .regab-trainings-quiz-q,
.regab-trainings-tool-modal .regab-trainings-choice,
.regab-instruction-app-modal .regab-instruction-app-options > label,
.regab-settings-panel-modal .personnel-function-form,
.regab-settings-panel-modal .personnel-record-type-form,
.regab-settings-panel-modal .personnel-record-type-list > .regab-personnel-setting-row,
.regab-settings-panel-modal .personnel-record-type-list > div:not(.document-empty) {
  background: var(--ps-surface-2) !important;
  border-color: var(--ps-border) !important;
  color: var(--ps-text) !important;
}

/* Consistent calm buttons in training / settings overlays */
.regab-trainings-modal button:not(.icon-button):not(.rtw-close):not(.regab-quiz-remove-choice):not(.regab-quiz-add-choice),
.regab-instruction-app-modal button:not(.icon-button),
.regab-settings-panel-modal .regab-ps-action,
.regab-training-workspace .rtw-primary,
.regab-training-workspace .rtw-secondary,
.regab-training-workspace .rtw-card-actions button,
.regab-training-workspace .rtw-form-actions button {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--ps-border);
  background: var(--ps-surface);
  color: var(--ps-text);
  font-weight: 700;
  box-shadow: none;
}

.regab-trainings-modal .regab-trainings-actions .primary,
.regab-trainings-modal button.primary,
.regab-instruction-app-modal button.primary,
.regab-settings-panel-modal .regab-ps-action.is-primary,
.regab-training-workspace .rtw-primary,
.regab-training-workspace .rtw-card-actions .primary,
.regab-training-workspace .rtw-form-actions .rtw-primary {
  border-color: var(--ps-accent) !important;
  background: var(--ps-accent) !important;
  color: #fff !important;
}

.regab-trainings-modal .regab-trainings-actions button:not(.primary),
.regab-instruction-app-modal .regab-instruction-app-actions button:not(.primary),
.regab-training-workspace .rtw-secondary {
  background: var(--ps-surface-2) !important;
  color: var(--ps-text) !important;
  border-color: var(--ps-border) !important;
}

.regab-trainings-modal .regab-trainings-actions,
.regab-instruction-app-modal .regab-instruction-app-actions {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px !important;
  padding: 14px 18px !important;
}

.regab-trainings-modal input:not([type="checkbox"]):not([type="radio"]),
.regab-trainings-modal textarea,
.regab-trainings-modal select,
.regab-instruction-app-modal input:not([type="checkbox"]):not([type="radio"]),
.regab-instruction-app-modal textarea,
.regab-instruction-app-modal select {
  border-color: var(--ps-border) !important;
  background: var(--ps-input) !important;
  color: var(--ps-text) !important;
}

/* Tool page shell: inherit body theme tokens */
body.rtw-tool-page .regab-trainings-tool-modal,
body.rtw-tool-page .regab-instruction-app-modal,
body.rtw-functions-page .regab-settings-panel-modal {
  background: var(--regab-tool-page, var(--ps-surface-2)) !important;
  color: var(--regab-tool-text, var(--ps-text)) !important;
}

body.rtw-tool-page .regab-trainings-tool-modal .regab-trainings-card,
body.rtw-tool-page .regab-instruction-app-modal .regab-instruction-app-card,
body.rtw-functions-page .regab-settings-panel-modal .regab-trainings-card {
  background: var(--regab-tool-page, var(--ps-surface-2)) !important;
  color: var(--regab-tool-text, var(--ps-text)) !important;
  box-shadow: none !important;
}

/* Submissions: single entry instead of 4 tiles */
.regab-submissions-bar {
  padding: 14px 16px !important;
}

.regab-submissions-bar-calm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.regab-submissions-bar-calm h2 {
  margin: 0;
  font-size: 16px;
}

.regab-submissions-bar-calm p {
  margin: 2px 0 0;
  color: var(--detail-muted, #718294);
  font-size: 12px;
  font-weight: 650;
}

.regab-submissions-open-btn {
  position: relative;
  appearance: none;
  flex: 0 0 auto;
  min-height: 42px;
  min-width: 112px;
  padding: 0 18px;
  border-radius: 11px;
  border: 1px solid var(--detail-accent, #3977ed);
  background: var(--detail-accent, #3977ed);
  color: #fff;
  font: 750 14px "DM Sans", system-ui, sans-serif;
  cursor: pointer;
}

.regab-submissions-open-btn:hover {
  filter: brightness(1.05);
}

.regab-submissions-open-btn .regab-submissions-dot {
  top: 6px;
  right: 6px;
}

html.theme-dark .regab-submissions-open-btn,
body.theme-dark .regab-submissions-open-btn {
  border-color: var(--detail-accent, #5b93f5);
  background: var(--detail-accent, #5b93f5);
  color: #0b1a2b;
}

/* Unterweisungen workspace: quieter entry + theme-aware surfaces */
.regab-training-workspace .rtw-eyebrow,
.regab-training-workspace .rtw-side-label {
  display: none !important;
}

.regab-training-workspace > header p {
  max-width: 42ch;
}

.regab-training-workspace .rtw-layout nav button small {
  display: none !important;
}

.regab-training-workspace .rtw-view-head p {
  font-size: 12px !important;
  opacity: 0.9;
}

.regab-training-workspace,
.rtw-new-menu section,
.rtw-inline-editor form,
.rtw-template-editor form {
  background: var(--ps-surface) !important;
  color: var(--ps-text) !important;
  border-color: var(--ps-border) !important;
}

.regab-training-workspace > header,
.rtw-layout > aside,
.rtw-form-actions,
.rtw-view-head {
  border-color: var(--ps-border) !important;
}

.rtw-layout > aside {
  background: var(--ps-surface-2) !important;
}

.rtw-layout > main,
.rtw-backdrop {
  background: var(--ps-surface-2) !important;
}

.rtw-layout nav button {
  color: var(--ps-muted) !important;
}

.rtw-layout nav button.active {
  border-color: var(--ps-accent) !important;
  background: var(--ps-accent-soft) !important;
  color: var(--ps-accent) !important;
}

.rtw-toolbar input,
.rtw-toolbar select,
.rtw-person-search,
.rtw-close,
.rtw-new-menu button,
.rtw-template,
.rtw-form-grid input,
.rtw-form-grid select {
  border-color: var(--ps-border) !important;
  background: var(--ps-input) !important;
  color: var(--ps-text) !important;
}

.rtw-card-actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px !important;
}

.rtw-card-actions.has-tools {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
  gap: 8px !important;
}

.rtw-new-menu section h3 {
  font-size: 1.05rem !important;
}

.rtw-new-menu section button span {
  font-size: 12px !important;
}

.rtw-form-actions {
  background: var(--ps-surface-2) !important;
  gap: 10px !important;
}

@media (max-width: 640px) {
  .regab-submissions-bar-calm {
    flex-direction: column;
    align-items: stretch;
  }
  .regab-submissions-open-btn {
    width: 100%;
  }
}


/* App-Inhalt: toggle is a control row, not a boxed field card */
.regab-instruction-app-modal .regab-instruction-app-options > label.regab-instruction-app-toggle,
.regab-instruction-app-embed .regab-instruction-app-options > label.regab-instruction-app-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 44px !important;
  padding: 0 12px !important;
  background: var(--ps-surface) !important;
}
.regab-instruction-app-modal .regab-instruction-media-btn,
.regab-instruction-app-embed .regab-instruction-media-btn,
.regab-training-workspace .regab-instruction-media-btn {
  min-height: 34px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
}