/* Quill editor in admin form */ .task-cert #description-editor { min-height: 160px; background: #fff; } .task-cert #description-editor .ql-editor { min-height: 140px; font-size: var(--fs-400, 0.875rem); line-height: 1.6; } .task-cert .ql-toolbar.ql-snow { border-radius: var(--tc-radius, 6px) var(--tc-radius, 6px) 0 0; border-color: var(--tc-border-color, #ccc); } .task-cert .ql-container.ql-snow { border-radius: 0 0 var(--tc-radius, 6px) var(--tc-radius, 6px); border-color: var(--tc-border-color, #ccc); } .task-cert.task-cert-admin-form hr { border: 0; border-top: 1px solid var(--border, #e5e5e5); margin: 14px 0; } .task-cert.task-cert-admin-form .task-cert-form-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; } .task-cert.task-cert-admin-form .task-cert-form-header h2 { margin: 0; } .task-cert .task-cert-title-wrap { display: inline-flex; align-items: center; gap: 8px; } .task-cert .task-cert-back-link { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--border, #e5e5e5); border-radius: 999px; color: inherit; text-decoration: none; font-size: 0.95rem; line-height: 1; background: var(--blur_elevated, var(--bg-white, #fff)); } .task-cert .task-cert-back-link:hover, .task-cert .task-cert-back-link:focus-visible { border-color: var(--blue-accent, #1b66b3); outline: 0; } .task-cert.task-cert-admin-form .task-cert-form-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; } .task-cert.task-cert-admin-form .task-cert-form-header-actions .btn.task-cert-btn-success, .task-cert.task-cert-admin-list .task-cert-toolbar-right .btn { background: #14b814; border-color: #14b814; color: #fff; } .task-cert.task-cert-admin-form .task-cert-form-header-actions .btn.task-cert-btn-success:hover, .task-cert.task-cert-admin-form .task-cert-form-header-actions .btn.task-cert-btn-success:focus-visible, .task-cert.task-cert-admin-list .task-cert-toolbar-right .btn:hover, .task-cert.task-cert-admin-list .task-cert-toolbar-right .btn:focus-visible { background: #119e11; border-color: #119e11; color: #fff; } .task-cert .task-cert-admin-toolbar { margin-bottom: 12px; } .task-cert .task-cert-admin-toolbar-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .task-cert .task-cert-admin-toolbar-title { margin: 0; } .task-cert .task-cert-admin-toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .task-cert .task-cert-admin-toolbar-nav { width: 100%; } .task-cert .task-cert-admin-nav { display: flex; align-items: center; gap: 0; border-bottom: 1px solid var(--border, #e5e5e5); flex: 1 1 auto; min-width: 0; overflow-x: auto; white-space: nowrap; } .task-cert .task-cert-admin-nav-link { display: inline-flex; align-items: center; padding: 8px 12px; border-bottom: 2px solid transparent; color: inherit; text-decoration: none; font-weight: var(--fw-medium, 500); } .task-cert .task-cert-admin-nav-link:hover, .task-cert .task-cert-admin-nav-link:focus-visible { text-decoration: none; } .task-cert .task-cert-admin-nav-link.is-active { border-bottom-color: var(--blue-accent, #1b66b3); border-bottom-width: 3px; font-weight: var(--fw-bold, 700); } .task-cert .task-cert-admin-list-search { margin-bottom: 10px; } .task-cert .task-cert-admin-list-search label { display: block; margin-bottom: 4px; font-weight: var(--fw-medium, 500); } .task-cert .task-cert-admin-list-search-row { display: flex; align-items: center; gap: 8px; } .task-cert .task-cert-admin-list-search-row input[type='search'] { flex: 1 1 320px; min-width: 180px; } .task-cert.task-cert-admin-categories .task-cert-admin-category-create-form .task-cert-admin-list-search-row input[type='text'] { flex: 1 1 260px; min-width: 160px; } /* ── admin list: grid + sections ── */ .task-cert .task-cert-admin-list-grid { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 1024px) { .task-cert .task-cert-admin-list-grid { grid-template-columns: 1fr; } .task-cert .task-cert-admin-list-section, .task-cert .task-cert-admin-contact-search-section { max-width: none; width: 100%; } } .task-cert .task-cert-admin-list-section { min-width: 0; border: 1px solid var(--border, #e5e5e5); border-radius: var(--br, 8px); background: var(--blur_elevated, var(--bg-white, #fff)); padding: 14px; display: flex; flex-direction: column; gap: 8px; } .task-cert .task-cert-admin-list-section .task-cert-table-wrap { max-height: 420px; overflow-y: auto; } .task-cert .task-cert-admin-table-filter { width: 100%; padding: 6px 10px; border: 1px solid var(--tc-border-color, #ccc); border-radius: var(--tc-radius, 6px); font-size: var(--fs-400, 0.875rem); } .task-cert .task-cert-admin-contact-search-section { margin-top: 24px; border: 1px solid var(--border, #e5e5e5); border-radius: var(--br, 8px); background: var(--blur_elevated, var(--bg-white, #fff)); padding: 14px; } .task-cert .task-cert-admin-contact-search-section .task-cert-table-wrap { max-height: 500px; overflow-y: auto; } .task-cert .task-cert-admin-contact-search-form { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } /* ── recurrence badges ── */ .task-cert .task-cert-recurrence-badge { display: inline-block; font-size: var(--fs-300, 0.8125rem); font-weight: 500; border-radius: var(--br, 8px); padding: 1px 8px; white-space: nowrap; } .task-cert .task-cert-recurrence-badge.is-calendar { color: #1565c0; background: #e3f2fd; border: 1px solid #90caf9; } .task-cert .task-cert-recurrence-badge.is-completion { color: #6a1b9a; background: #f3e5f5; border: 1px solid #ce93d8; } .task-cert .task-cert-recurrence-badge.is-onetime { color: var(--fc-dark-8, #666); background: var(--border-light, #f0f0f0); border: 1px solid var(--border, #e5e5e5); } /* ── sticky table headers in scrollable panels ── */ .task-cert .task-cert-admin-list-section .task-cert-table thead th, .task-cert .task-cert-admin-contact-search-section .task-cert-table thead th { position: sticky; top: 0; background: var(--bg-white, #fff); z-index: 1; } /* ── escalation config UI ── */ .task-cert .task-cert-escalation-toggle { margin-bottom: 12px; } .task-cert .task-cert-escalation-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 8px; } .task-cert .task-cert-input-with-suffix { display: flex; align-items: center; gap: 6px; } .task-cert .task-cert-input-with-suffix input { width: 80px; flex-shrink: 0; } .task-cert .task-cert-input-with-suffix span { font-size: var(--fs-300, 0.8125rem); color: var(--fc-dark-8, #666); white-space: nowrap; } .task-cert .task-cert-escalation-timeline { border: 1px solid var(--border, #e5e5e5); border-radius: var(--br, 8px); background: var(--blur_elevated, var(--bg-white, #fff)); padding: 14px 20px 8px; margin-bottom: 16px; } .task-cert .task-cert-escalation-timeline-track { position: relative; height: 48px; margin-bottom: 4px; } .task-cert .task-cert-escalation-timeline-bar { position: absolute; top: 18px; left: 0; right: 0; height: 6px; border-radius: 3px; display: flex; overflow: hidden; background: var(--border-light, #f0f0f0); } .task-cert .task-cert-escalation-timeline-segment { height: 100%; transition: width 0.2s ease; } .task-cert .task-cert-escalation-timeline-segment.is-grace { background: #a5d6a7; } .task-cert .task-cert-escalation-timeline-segment.is-overdue { background: #ef9a9a; } .task-cert .task-cert-escalation-timeline-marker { position: absolute; top: 0; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); white-space: nowrap; } .task-cert .task-cert-escalation-timeline-marker-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; position: relative; z-index: 1; margin-bottom: 2px; } .task-cert .task-cert-escalation-timeline-marker.is-due .task-cert-escalation-timeline-marker-dot { background: #2e7d32; } .task-cert .task-cert-escalation-timeline-marker.is-level .task-cert-escalation-timeline-marker-dot { background: #d93a3a; } .task-cert .task-cert-escalation-timeline-marker-line { width: 1px; height: 8px; background: var(--border, #ccc); } .task-cert .task-cert-escalation-timeline-marker-label { font-size: 0.6875rem; line-height: 1.2; text-align: center; color: var(--fc-dark-8, #666); margin-top: 1px; } .task-cert .task-cert-escalation-timeline-marker.is-due .task-cert-escalation-timeline-marker-label { color: #2e7d32; font-weight: 600; } .task-cert .task-cert-escalation-timeline-marker.is-level .task-cert-escalation-timeline-marker-label { color: #b52828; font-weight: 600; } .task-cert .task-cert-escalation-divider { border: 0; border-top: 1px solid var(--border, #e5e5e5); margin: 16px 0; } /* ── cron heartbeat status ── */ .task-cert .task-cert-admin-cron-status { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--border-light, #f0f0f0); display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: var(--fs-200, 0.75rem); font-style: italic; color: var(--fc-dark-8, #999); } .task-cert .task-cert-admin-cron-status em { color: #b52828; } .task-cert .task-cert-contact-autocomplete { position: relative; flex: 1; max-width: 400px; } .task-cert .task-cert-contact-autocomplete-input { width: 100%; padding: 6px 10px; border: 1px solid var(--tc-border-color, #ccc); border-radius: var(--tc-radius, 6px); font-size: var(--fs-400, 0.875rem); box-sizing: border-box; } .task-cert .task-cert-contact-autocomplete-dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 100; margin: 2px 0 0; padding: 0; list-style: none; background: #fff; border: 1px solid var(--tc-border-color, #ccc); border-radius: var(--tc-radius, 6px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); max-height: 260px; overflow-y: auto; } .task-cert .task-cert-contact-autocomplete-dropdown.is-open { display: block; } .task-cert .task-cert-contact-autocomplete-item { padding: 8px 12px; cursor: pointer; font-size: var(--fs-400, 0.875rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .task-cert .task-cert-contact-autocomplete-item:hover, .task-cert .task-cert-contact-autocomplete-item.is-highlighted { background: var(--tc-primary-light, #e8f0fe); } .task-cert .task-cert-admin-cycle-reset-bar { display: flex; justify-content: flex-end; margin-bottom: 10px; } .task-cert .task-cert-grace-badge { display: inline-block; font-size: var(--fs-300, 0.8125rem); color: #7c5e00; background: #fff8e1; border: 1px solid #ffe082; border-radius: var(--br, 8px); padding: 2px 8px; white-space: nowrap; } .task-cert .task-cert-cycle-switch-inline { display: inline-flex; align-items: center; } .task-cert .task-cert-cycle-switch-inline select { padding: 6px 10px; border: 1px solid var(--tc-border-color, #ccc); border-radius: var(--tc-radius, 6px); font-size: var(--fs-400, 0.875rem); background: var(--bg-white, #fff); cursor: pointer; } .task-cert .task-cert-admin-list-section-title { font-size: var(--fs-500, 1.125rem); font-weight: 600; margin: 0 0 10px 0; color: var(--fc-dark, #222); } .task-cert.task-cert-admin-categories .task-cert-admin-category-protected-label { color: var(--fc-dark-8, #666); margin-left: 6px; } .task-cert.task-cert-admin-categories .task-cert-admin-category-inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .task-cert.task-cert-admin-categories .task-cert-admin-category-inline-form input[type='text'] { flex: 1 1 200px; min-width: 140px; } .task-cert.task-cert-admin-categories .task-cert-admin-category-inline-form small { flex: 0 0 auto; } .task-cert.task-cert-admin-categories .task-cert-admin-category-delete-form { display: inline-flex; } .task-cert.task-cert-admin-categories td select[form^='task-cert-category-update-'] { min-width: 120px; } .task-cert.task-cert-admin-form .task-cert-wizard-tabs, .task-cert.task-cert-admin-form .task-cert-wizard-step { margin-bottom: 10px; } .task-cert.task-cert-admin-form .task-cert-wizard-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border, #e5e5e5); overflow-x: auto; white-space: nowrap; } .task-cert.task-cert-admin-form .task-cert-wizard-tab { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; padding: 8px 12px; cursor: pointer; color: inherit; text-align: center; font-weight: var(--fw-medium, 500); } .task-cert.task-cert-admin-form .task-cert-wizard-tab.is-active { border-bottom-color: var(--blue-accent, #1b66b3); border-bottom-width: 3px; font-weight: var(--fw-bold, 700); } .task-cert.task-cert-admin-form .task-cert-wizard-tab:focus-visible { outline: 0; border-bottom-color: var(--blue-accent, #1b66b3); } .task-cert.task-cert-admin-form .task-cert-step-intro { display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--border, #e5e5e5); border-radius: var(--br, 8px); background: var(--clr-light, #f5f5f5); padding: 10px; margin-bottom: 10px; } .task-cert.task-cert-admin-form .task-cert-step-intro span { color: var(--fc-dark-8, #666); } .task-cert.task-cert-admin-form .task-cert-danger-block { border-color: #efc4c4; background: #fff7f7; } .task-cert.task-cert-admin-form .task-cert-danger-block h3 { color: #9d1f1f; } .task-cert.task-cert-admin-form .task-cert-block-inset { margin-top: 10px; border-color: var(--border, #e5e5e5); background: var(--clr-light, #f5f5f5); } .task-cert.task-cert-admin-form .task-cert-block-inset h4 { margin: 0 0 8px; } .task-cert.task-cert-admin-form .task-cert-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 10px; } .task-cert.task-cert-admin-form .task-cert-wizard-step { display: none; } .task-cert.task-cert-admin-form .task-cert-wizard-step.is-active { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px 14px; align-items: start; } .task-cert.task-cert-admin-form .task-cert-wizard-step .task-cert-step-main { min-width: 0; order: 1; } .task-cert.task-cert-admin-form .task-cert-wizard-step .task-cert-step-intro { order: 2; margin-bottom: 0; position: sticky; top: 8px; align-self: start; } .task-cert.task-cert-admin-form .task-cert-recurrence-inline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .task-cert.task-cert-admin-form .task-cert-recurrence-inline[hidden] { display: none !important; } .task-cert.task-cert-admin-form .task-cert-deadline-mode { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; margin-bottom: 10px; } .task-cert.task-cert-admin-form .task-cert-deadline-choice { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; border: 1px solid var(--border, #e5e5e5); border-radius: var(--br, 8px); background: var(--blur_elevated, var(--bg-white, #fff)); padding: 9px; } .task-cert.task-cert-admin-form .task-cert-deadline-choice.is-disabled { opacity: 0.55; } .task-cert.task-cert-admin-form .task-cert-deadline-choice input[type='radio'] { width: auto; margin: 0 auto 4px; } .task-cert.task-cert-admin-form .task-cert-deadline-choice-title { font-weight: var(--fw-medium, 600); font-size: var(--fs-550, 1.0625rem); line-height: 1.3; } .task-cert.task-cert-admin-form .task-cert-deadline-choice-text { color: var(--fc-dark-8, #666); font-size: var(--fs-450, 0.9375rem); line-height: 1.4; } .task-cert.task-cert-admin-form .task-cert-deadline-group { border: 1px dashed var(--border, #e5e5e5); border-radius: var(--br, 8px); background: var(--blur_elevated, var(--bg-white, #fff)); padding: 10px; } .task-cert.task-cert-admin-form .task-cert-deadline-group>div { margin-bottom: 8px; } .task-cert.task-cert-admin-form .task-cert-deadline-group>div:last-child { margin-bottom: 0; } .task-cert.task-cert-admin-form .task-cert-deadline-preview { margin-top: 10px; } .task-cert.task-cert-admin-form .task-cert-method-section { border: 1px solid var(--border, #e5e5e5); border-radius: var(--br, 8px); background: var(--blur_elevated, var(--bg-white, #fff)); padding: 10px; margin-bottom: 10px; } .task-cert.task-cert-admin-form .task-cert-method-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .task-cert.task-cert-admin-form .task-cert-method-header label { display: inline-flex; align-items: center; gap: 6px; margin: 0; } .task-cert.task-cert-admin-form .task-cert-method-details { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border, #e5e5e5); } .task-cert.task-cert-admin-form .task-cert-method-details[hidden] { display: none !important; } .task-cert.task-cert-admin-form .task-cert-form-row { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; padding: 8px; border: 1px solid var(--border, #e5e5e5); border-radius: var(--br, 8px); background: var(--clr-light, #f5f5f5); } .task-cert.task-cert-admin-form .task-cert-form-row-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .task-cert.task-cert-admin-form .task-cert-form-row-title { font-size: var(--fs-300, 0.8125rem); color: var(--fc-dark-8, #666); } .task-cert.task-cert-admin-form .task-cert-form-row-grid { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(130px, 0.8fr) auto; gap: 8px; align-items: end; } .task-cert.task-cert-admin-form .task-cert-form-row-grid-secondary { grid-template-columns: 1fr; } .task-cert.task-cert-admin-form .task-cert-form-cell { min-width: 0; } .task-cert.task-cert-admin-form .task-cert-form-cell label { display: block; margin: 0 0 4px; font-weight: var(--fw-medium, 500); } .task-cert.task-cert-admin-form .task-cert-form-required label { display: inline-flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; } .task-cert.task-cert-admin-form .task-cert-form-field-options { border-top: 1px dashed var(--border, #e5e5e5); padding-top: 8px; } .task-cert.task-cert-admin-form .task-cert-form-field-options[hidden] { display: none !important; } .task-cert.task-cert-admin-form .task-cert-quiz-row { display: grid; gap: 8px; margin: 8px 0; padding: 8px; border: 1px solid var(--border, #e5e5e5); border-radius: var(--br, 8px); background: var(--clr-light, #f5f5f5); } .task-cert.task-cert-admin-form .task-cert-quiz-question, .task-cert.task-cert-admin-form .task-cert-quiz-correct, .task-cert.task-cert-admin-form .task-cert-quiz-answer { min-width: 0; } .task-cert.task-cert-admin-form .task-cert-quiz-question label, .task-cert.task-cert-admin-form .task-cert-quiz-correct label, .task-cert.task-cert-admin-form .task-cert-quiz-answer label { display: block; margin: 0 0 4px; font-weight: var(--fw-medium, 500); } .task-cert.task-cert-admin-form .task-cert-quiz-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .task-cert.task-cert-admin-form .task-cert-quiz-footer { display: flex; align-items: flex-end; gap: 8px; } .task-cert.task-cert-admin-form .task-cert-quiz-correct { flex: 1 1 220px; } .task-cert.task-cert-admin-form .task-cert-quiz-remove { display: flex; align-items: flex-end; } .task-cert.task-cert-admin-list .task-cert-table tr td:last-child, .task-cert.task-cert-admin-approval .task-cert-table tr td:last-child { min-width: 220px; } .task-cert.task-cert-admin-escalation .task-cert-table tr td:last-child { font-weight: var(--fw-bold, 700); } .task-cert.task-cert-admin-detail .task-cert-form-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; } .task-cert.task-cert-admin-detail .task-cert-form-header h2 { margin: 0; } .task-cert.task-cert-admin-detail .task-cert-toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .task-cert.task-cert-admin-detail .task-cert-wizard-tabs, .task-cert.task-cert-admin-detail .task-cert-wizard-step { margin-bottom: 10px; } .task-cert.task-cert-admin-detail .task-cert-wizard-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border, #e5e5e5); overflow-x: auto; white-space: nowrap; } .task-cert.task-cert-admin-detail .task-cert-wizard-tab { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; padding: 8px 12px; cursor: pointer; color: inherit; text-align: center; font-weight: var(--fw-medium, 500); } .task-cert.task-cert-admin-detail .task-cert-wizard-tab.is-active { border-bottom-color: var(--blue-accent, #1b66b3); border-bottom-width: 3px; font-weight: var(--fw-bold, 700); } .task-cert.task-cert-admin-detail .task-cert-wizard-tab:focus-visible { outline: 0; border-bottom-color: var(--blue-accent, #1b66b3); } .task-cert.task-cert-admin-detail .task-cert-step-intro { display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--border, #e5e5e5); border-radius: var(--br, 8px); background: var(--clr-light, #f5f5f5); padding: 10px; margin-bottom: 10px; } .task-cert.task-cert-admin-detail .task-cert-step-intro span { color: var(--fc-dark-8, #666); } .task-cert.task-cert-admin-detail .task-cert-wizard-step { display: none; } .task-cert.task-cert-admin-detail .task-cert-wizard-step.is-active { display: block; } .task-cert.task-cert-admin-detail .task-cert-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 12px; } .task-cert.task-cert-admin-detail .task-cert-detail-description { margin-top: 10px; border-top: 1px solid var(--border, #e5e5e5); padding-top: 10px; } .task-cert.task-cert-admin-detail .task-cert-detail-section { margin-top: 10px; } .task-cert.task-cert-admin-detail .task-cert-detail-list { margin: 6px 0 0; padding-left: 18px; } .task-cert.task-cert-admin-detail .task-cert-status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; } .task-cert.task-cert-admin-detail .task-cert-status-item { border: 1px solid var(--border, #e5e5e5); border-radius: var(--br, 8px); background: var(--blur_elevated, var(--bg-white, #fff)); padding: 8px 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; } .task-cert.task-cert-admin-monitoring .task-cert-monitoring-filters { border: 1px solid var(--border, #e5e5e5); border-radius: var(--br, 8px); background: var(--clr-light, #f5f5f5); padding: 10px; margin-bottom: 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; align-items: end; } .task-cert.task-cert-admin-monitoring .task-cert-monitoring-filter-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* ── overview: progress bar ── */ .task-cert.task-cert-admin-monitoring .task-cert-overview-progress { border: 1px solid var(--border, #e5e5e5); border-radius: var(--br, 8px); background: var(--blur_elevated, var(--bg-white, #fff)); padding: 14px 16px; margin-bottom: 12px; display: flex; align-items: center; gap: 12px; } .task-cert.task-cert-admin-monitoring .task-cert-overview-progress-text { white-space: nowrap; font-size: var(--fs-400, 0.875rem); } .task-cert.task-cert-admin-monitoring .task-cert-overview-progress-bar { flex: 1; height: 10px; background: var(--border-light, #f0f0f0); border-radius: 5px; overflow: hidden; } .task-cert.task-cert-admin-monitoring .task-cert-overview-progress-fill { height: 100%; background: #2e7d32; border-radius: 5px; transition: width 0.3s ease; } .task-cert.task-cert-admin-monitoring .task-cert-overview-progress-rate { font-weight: 700; font-size: var(--fs-500, 1.125rem); white-space: nowrap; } /* ── overview: action cards ── */ .task-cert.task-cert-admin-monitoring .task-cert-overview-actions { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; } .task-cert.task-cert-admin-monitoring .task-cert-overview-action-card { border: 1px solid var(--border, #e5e5e5); border-radius: var(--br, 8px); padding: 10px 16px; display: flex; align-items: center; gap: 8px; } .task-cert.task-cert-admin-monitoring .task-cert-overview-action-card strong { font-size: var(--fs-600, 1.25rem); line-height: 1; } .task-cert.task-cert-admin-monitoring .task-cert-overview-action-card span { font-size: var(--fs-300, 0.8125rem); color: var(--fc-dark-8, #666); } .task-cert.task-cert-admin-monitoring .task-cert-overview-action-card.is-danger { border-color: #d93a3a; background: #fff8f8; } .task-cert.task-cert-admin-monitoring .task-cert-overview-action-card.is-danger strong { color: #b52828; } .task-cert.task-cert-admin-monitoring .task-cert-overview-action-card.is-warning { border-color: #ffe082; background: #fff8e1; } .task-cert.task-cert-admin-monitoring .task-cert-overview-action-card.is-warning strong { color: #7c5e00; } .task-cert.task-cert-admin-monitoring .task-cert-status-badge { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 2px 8px; border: 1px solid var(--border, #e5e5e5); background: var(--blur_elevated, var(--bg-white, #fff)); white-space: nowrap; } .task-cert.task-cert-admin-monitoring .task-cert-status-badge.status-overdue { border-color: #d93a3a; color: #b52828; background: #ffecec; } .task-cert.task-cert-admin-monitoring .task-cert-status-badge.status-completed { border-color: #14b814; color: #0c7f0c; background: #ecffec; } .task-cert.task-cert-admin-monitoring .task-cert-status-badge.status-approval_pending { border-color: #c08a00; color: #815c00; background: #fff7e1; } .task-cert.task-cert-admin-monitoring .task-cert-status-badge.status-rejected, .task-cert.task-cert-admin-monitoring .task-cert-status-badge.status-expired { border-color: #707070; color: #4f4f4f; background: #f2f2f2; } .task-cert.task-cert-admin-monitoring .task-cert-inline-approval-form { display: flex; flex-direction: column; gap: 6px; min-width: 220px; } .task-cert.task-cert-admin-monitoring .task-cert-inline-approval-form textarea { width: 100%; min-height: 52px; } .task-cert.task-cert-admin-monitoring .task-cert-inline-approval-actions { display: flex; gap: 6px; align-items: center; } .task-cert.task-cert-admin-monitoring .task-cert-inline-approval-actions .btn { flex: 1 1 auto; } .task-cert.task-cert-admin-monitoring .task-cert-inline-reset-form { display: inline-flex; align-items: center; } .task-cert.task-cert-admin-monitoring .task-cert-monitoring-answer-items { margin: 8px 0; display: grid; gap: 4px; } .task-cert.task-cert-admin-monitoring details summary { cursor: pointer; } @media (max-width: 1024px) { .task-cert.task-cert-admin-form .task-cert-wizard-step.is-active { display: block; } .task-cert.task-cert-admin-form .task-cert-wizard-step .task-cert-step-intro { margin-bottom: 10px; position: static; } } @media (max-width: 768px) { .task-cert .task-cert-admin-toolbar-head { flex-direction: column; align-items: flex-start; } .task-cert .task-cert-admin-toolbar-actions { width: 100%; justify-content: flex-start; } .task-cert .task-cert-admin-toolbar-actions .btn { width: 100%; } .task-cert.task-cert-admin-form .task-cert-form-header { flex-direction: column; align-items: flex-start; } .task-cert.task-cert-admin-form .task-cert-form-header-actions { margin-left: 0; width: 100%; } .task-cert.task-cert-admin-form .task-cert-form-header-actions .btn { margin-left: 0; width: 100%; } .task-cert.task-cert-admin-form .task-cert-method-header { flex-direction: column; align-items: flex-start; } .task-cert .task-cert-admin-list-search-row { flex-direction: column; align-items: stretch; } .task-cert .task-cert-admin-list-search-row .btn { width: 100%; } .task-cert.task-cert-admin-form .task-cert-form-row-grid { grid-template-columns: 1fr; } .task-cert.task-cert-admin-form .task-cert-form-row-head { flex-direction: column; align-items: flex-start; } .task-cert.task-cert-admin-form .task-cert-form-row-head .btn { width: 100%; } .task-cert.task-cert-admin-form .task-cert-recurrence-inline { grid-template-columns: 1fr; } .task-cert.task-cert-admin-form .task-cert-quiz-answers { grid-template-columns: 1fr; } .task-cert.task-cert-admin-form .task-cert-quiz-footer { flex-direction: column; align-items: stretch; } .task-cert.task-cert-admin-form .task-cert-quiz-remove .btn { width: 100%; } .task-cert.task-cert-admin-detail .task-cert-form-header { flex-direction: column; align-items: flex-start; } .task-cert.task-cert-admin-detail .task-cert-toolbar-right { width: 100%; } .task-cert.task-cert-admin-detail .task-cert-toolbar-right .btn { width: 100%; } .task-cert.task-cert-admin-monitoring .task-cert-monitoring-filter-actions { flex-direction: column; align-items: stretch; } .task-cert.task-cert-admin-monitoring .task-cert-monitoring-filter-actions .btn { width: 100%; text-align: center; } } /* ── KPI-Tiles ────────────────────────────────────────────────── */ .task-cert.task-cert-admin-monitoring .task-cert-kpi-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; } .task-cert.task-cert-admin-monitoring .task-cert-kpi-tile { background: #fff; border-radius: var(--tc-radius, 8px); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04); padding: 16px; display: flex; flex-direction: column; gap: 2px; } .task-cert.task-cert-admin-monitoring .task-cert-kpi-tile .task-cert-kpi-value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: var(--tc-text, #272727); } .task-cert.task-cert-admin-monitoring .task-cert-kpi-tile .task-cert-kpi-label { font-size: 0.8125rem; color: var(--tc-muted, #666); margin-top: 4px; } @media (max-width: 640px) { .task-cert.task-cert-admin-monitoring .task-cert-kpi-tiles { grid-template-columns: repeat(2, 1fr); } } /* ── Grid.js Übersicht-Tabelle ────────────────────────────────── */ .task-cert.task-cert-admin-monitoring .task-cert-overview-grid-toolbar { display: flex; align-items: center; gap: 10px; margin: 16px 0 8px; flex-wrap: wrap; } .task-cert.task-cert-admin-monitoring .task-cert-overview-grid-toolbar input[type="text"] { width: 220px; padding: 6px 10px; } .task-cert.task-cert-admin-monitoring .task-cert-overview-grid-toolbar select { width: auto; padding: 6px 8px; } .task-cert.task-cert-admin-monitoring .task-cert-overview-grid-toolbar .task-cert-toolbar-reset-form { margin: 0 0 0 auto; } .task-cert.task-cert-admin-monitoring .task-cert-overview-grid-toolbar .task-cert-toolbar-reset-form .btn { font-size: var(--tc-font-size, 0.875rem); padding: 5px 12px; } /* Grid.js Theme-Overrides zum Angleichen an bestehendes Design */ .task-cert.task-cert-admin-monitoring .gridjs-wrapper { border: 1px solid var(--tc-border-color, #e5e5e5); border-radius: var(--tc-radius, 8px); overflow-x: auto; } .task-cert.task-cert-admin-monitoring .gridjs-table { font-family: var(--tc-font-family, sans-serif); font-size: var(--tc-font-size, 0.875rem); color: var(--tc-text, #272727); } .task-cert.task-cert-admin-monitoring th.gridjs-th { background: var(--tc-bg-soft, #f5f5f5); border-color: var(--tc-border-color, #e5e5e5); padding: 8px; font-weight: 600; font-size: var(--tc-font-size, 0.875rem); white-space: nowrap; } .task-cert.task-cert-admin-monitoring td.gridjs-td { border-color: var(--tc-border-color, #e5e5e5); padding: 8px; vertical-align: top; } .task-cert.task-cert-admin-monitoring .gridjs-footer { border-top: 1px solid var(--tc-border-color, #e5e5e5); padding: 8px; } .task-cert.task-cert-admin-monitoring .gridjs-pagination .gridjs-pages button { border: 1px solid var(--tc-border-color, #e5e5e5); border-radius: var(--tc-radius, 8px); padding: 4px 10px; font-size: var(--tc-font-size, 0.875rem); background: var(--tc-bg, #fff); color: var(--tc-text, #272727); cursor: pointer; } .task-cert.task-cert-admin-monitoring .gridjs-pagination .gridjs-pages button.gridjs-currentPage { background: var(--tc-accent, #1b66b3); color: #fff; border-color: var(--tc-accent, #1b66b3); } /* Gruppen-Badges */ .task-cert-row-group-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; } .task-cert-row-group-badge.is-todo { background: #e8f0fe; color: #1b66b3; } .task-cert-row-group-badge.is-completed { background: var(--tc-success-bg, #edf9ed); color: var(--tc-success, #0f7a0f); } .task-cert-row-group-badge.is-overdue { background: var(--tc-error-bg, #fff1f1); color: var(--tc-error, #cc0000); } /* Inline-Reset-Formular innerhalb Grid.js-Zellen */ .task-cert.task-cert-admin-monitoring td.gridjs-td .task-cert-inline-reset-form { margin: 0; } .task-cert.task-cert-admin-monitoring td.gridjs-td .task-cert-inline-reset-form .btn { font-size: 0.75rem; padding: 3px 8px; } /* Small button variant for grid action cells */ .task-cert .task-cert-btn-sm { font-size: 0.75rem; padding: 3px 8px; } /* ── Toast-Container (fix oben rechts) ── */ .task-cert-toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; max-width: 420px; pointer-events: none; } .task-cert-toast { pointer-events: auto; padding: 10px 14px; border-radius: var(--tc-radius, 6px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); opacity: 0; transform: translateX(20px); transition: opacity 0.2s ease, transform 0.2s ease; cursor: pointer; font-size: 0.9rem; line-height: 1.4; } .task-cert-toast.is-visible { opacity: 1; transform: translateX(0); } /* ── Admin: Mark Completed Dialog ── */ .task-cert-dialog { border: none; border-radius: var(--tc-radius, 6px); padding: 0; max-width: 600px; width: 90vw; max-height: 85vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); } .task-cert-dialog::backdrop { background: rgba(0, 0, 0, 0.45); } .task-cert-dialog-inner { padding: 20px 24px; } .task-cert-dialog-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .task-cert-dialog-header h3 { margin: 0; font-size: 1.1rem; } .task-cert-dialog-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; padding: 0 4px; line-height: 1; color: var(--tc-muted, #6c757d); } .task-cert-dialog-close:hover { color: var(--tc-text, #333); } .task-cert-dialog-info { margin-bottom: 16px; } .task-cert-dialog .task-cert-info-table { width: 100%; border-collapse: collapse; } .task-cert-dialog .task-cert-info-table th, .task-cert-dialog .task-cert-info-table td { padding: 4px 8px; border-bottom: 1px solid var(--tc-border-color, #dee2e6); text-align: left; vertical-align: top; font-size: 0.875rem; } .task-cert-dialog .task-cert-info-table th { width: 100px; color: var(--tc-muted, #6c757d); font-weight: 600; } .task-cert-dialog-methods { margin-bottom: 16px; } .task-cert-dialog-methods h4, .task-cert-dialog-note h4 { margin: 0 0 6px; font-size: 0.95rem; } .task-cert-dialog-method { border: 1px solid var(--tc-border-color, #dee2e6); border-radius: calc(var(--tc-radius, 6px) - 2px); padding: 10px 12px; margin-bottom: 10px; } .task-cert-dialog-method.is-fulfilled { opacity: 0.55; } .task-cert-dialog-method legend { font-weight: 600; font-size: 0.875rem; display: flex; align-items: center; gap: 8px; } .task-cert-admin-fulfilled-badge { display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 1px 7px; border-radius: 10px; background: var(--tc-success-bg, #d4edda); color: var(--tc-success, #14b814); } .task-cert-dialog-fields { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; } .task-cert-dialog-field label { display: block; font-weight: 600; margin-bottom: 2px; font-size: 0.825rem; } .task-cert-dialog-field input, .task-cert-dialog-field textarea, .task-cert-dialog-field select { width: 100%; padding: 5px 7px; border: 1px solid var(--tc-border-color, #dee2e6); border-radius: calc(var(--tc-radius, 6px) - 2px); font-size: inherit; font-family: inherit; box-sizing: border-box; } .task-cert-dialog-checkbox-group, .task-cert-dialog-radio-group { display: flex; flex-direction: column; gap: 3px; margin-top: 3px; } .task-cert-dialog-check-label { display: flex; align-items: center; gap: 5px; font-weight: normal; cursor: pointer; font-size: 0.875rem; } .task-cert-dialog-note { margin-bottom: 16px; } .task-cert-dialog-note textarea { width: 100%; padding: 5px 7px; border: 1px solid var(--tc-border-color, #dee2e6); border-radius: calc(var(--tc-radius, 6px) - 2px); font-size: inherit; font-family: inherit; box-sizing: border-box; } .task-cert-dialog-actions { display: flex; gap: 8px; justify-content: flex-end; } .task-cert-dialog .task-cert-error { margin-top: 12px; } /* Vorschau-Tab: iframe der User-Detailseite */ .task-cert-preview-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .task-cert-preview-frame { width: 100%; height: 70vh; min-height: 480px; border: 1px solid var(--border, #e5e5e5); border-radius: var(--tc-radius, 6px); background: var(--bg-white, #fff); }