/* Microlearning wizard / builder shared styling (matches the My Status page) */
.microlearning-builder {
    --b: #41B9CC; --bd: #2a9aad; --grn: #78CF70; --pur: #CB62F0;
    --txt: #1a2332; --txt2: #5a6a7e; --mut: #8fa0b4; --bdr: #e4eaf1; --bg: #f5f8fc;
}
.microlearning-builder [hidden] { display: none !important; }

.microlearning-header { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1rem; }
.microlearning-header .microlearning-header-icon { width: 50px; height: 50px; min-width: 50px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.microlearning-header h2 { font-size: 1.25rem; font-weight: 700; color: var(--txt); margin: 0; }

.microlearning-card { background: #fff; border: 1px solid var(--bdr); border-radius: 14px; box-shadow: 0 1px 3px rgba(26,35,50,0.06); padding: 1.6rem 1.75rem; position: relative; overflow: visible; }
.microlearning-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 4px 0 0 4px; }
.microlearning-accent-purple::before { background: var(--pur); }
.microlearning-accent-green::before { background: var(--grn); }
.microlearning-accent-teal::before { background: var(--b); }

.microlearning-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem 1.35rem; }
.microlearning-field { display: flex; flex-direction: column; }
.microlearning-field.full { grid-column: 1 / -1; }
.microlearning-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--txt2); margin-bottom: 0.4rem; }
.microlearning-label.not-approved { color: #e85d5d; }

/* Question text flagged as not yet approved during moderation */
.microlearning-question-text.not-approved { color: #e85d5d; text-decoration: underline wavy #e85d5d; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Quill editor for a question flagged as not approved: outline the whole editor (toolbar + body) in red */
.microlearning-field.not-approved .ql-toolbar.ql-snow,
.microlearning-field.not-approved .ql-container.ql-snow { border-color: #e85d5d; }

/* Activity-table moderation status badge (shows how many items are not yet approved) */
.mod-status-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.7rem; border-radius: 50px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
.mod-status-badge.not-approved { background: #fdecec; color: #d64545; }
.mod-status-badge.approved { background: #eafaf0; color: #2f9e5d; }
.mod-status-badge.loading { background: #eef2f7; color: #8fa0b4; }

.microlearning-builder input.form-control, .microlearning-builder select.form-control, .microlearning-builder textarea.form-control {
    background: var(--bg); border: 1px solid var(--bdr); border-radius: 8px;
    padding: 0.6rem 0.85rem; font-size: 0.92rem; color: var(--txt); width: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.microlearning-builder input.form-control:focus, .microlearning-builder select.form-control:focus, .microlearning-builder textarea.form-control:focus {
    border-color: var(--b); box-shadow: 0 0 0 3px rgba(65,185,204,0.12); outline: none;
}
.microlearning-builder .input-not-approved { border-color: #e85d5d !important; }

.microlearning-builder .ql-toolbar.ql-snow { border: 1px solid var(--bdr); border-radius: 8px 8px 0 0; background: #fbfdfe; }
.microlearning-builder .ql-container.ql-snow { border: 1px solid var(--bdr); border-top: none; border-radius: 0 0 8px 8px; height: auto; min-height: 200px; background: #fff; }
.microlearning-builder .ql-container .ql-editor { min-height: 200px; }
.microlearning-builder .ql-editor { font-family: Verdana, sans-serif; font-size: 14px; }

.microlearning-builder .select2-container { width: 100% !important; }
.microlearning-builder .select2-container--default .select2-selection--single { background: var(--bg); border: 1px solid var(--bdr); border-radius: 8px; height: 42px; display: flex; align-items: center; }
.microlearning-builder .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: normal; color: var(--txt); padding-left: 0.85rem; }
.microlearning-builder .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; }

.microlearning-checkbox { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; color: var(--txt2); margin: 0; cursor: pointer; }

/* Moderation: field label paired with an "Approve" checkbox on the right */
.microlearning-mod-labelrow { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.4rem; min-height: 1.1rem; }
.microlearning-approve-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; color: #56B74D; white-space: nowrap; gap: 0.4rem; }
.microlearning-approve-label input[type="checkbox"] { accent-color: #56B74D; width: 15px; height: 15px; }

.microlearning-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.6rem; flex-wrap: wrap; }
.microlearning-button-primary { background: var(--b); color: #fff; border: none; border-radius: 8px; padding: 0.6rem 1.5rem; font-size: 0.92rem; font-weight: 700; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; display: inline-flex; align-items: center; gap: 0.45rem; }
.microlearning-button-primary:hover { background: var(--bd); transform: translateY(-1px); color: #fff; }
.microlearning-button-outline { background: #fff; color: var(--b); border: 1px solid var(--b); border-radius: 8px; padding: 0.6rem 1.4rem; font-size: 0.92rem; font-weight: 700; cursor: pointer; transition: all 0.15s ease; display: inline-flex; align-items: center; gap: 0.45rem; }
.microlearning-button-outline:hover { background: var(--b); color: #fff; }
.microlearning-button-muted { background: #eef2f7; color: #5a6a7e; border: none; border-radius: 8px; padding: 0.6rem 1.4rem; font-size: 0.92rem; font-weight: 700; cursor: pointer; transition: all 0.15s ease; display: inline-flex; align-items: center; gap: 0.45rem; }
.microlearning-button-muted:hover { background: #e2e8f0; color: #5a6a7e; }

.microlearning-builder .dropzone { border: 2px dashed var(--bdr); border-radius: 10px; background: var(--bg); min-height: 150px; }
.microlearning-builder .dropzone:hover { border-color: var(--b); }

/* Answer-options repeater (quiz questions) */
.microlearning-answers-header { display: flex; gap: 1rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--txt2); margin-bottom: 0.5rem; }

/* ── List panel + table (activities, questions, media) ── */
.microlearning-table-panel { border: 1px solid #e4eaf1; border-radius: 14px; box-shadow: 0 1px 3px rgba(26,35,50,0.06); overflow: hidden; }
.microlearning-table { width: 100%; border-collapse: collapse; margin: 0; }
.microlearning-table thead tr { background: linear-gradient(90deg, #41B9CC 0%, #2a9aad 100%); }
.microlearning-table thead th { padding: 0.8rem 1.1rem; color: #fff; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border: none; }
.microlearning-table tbody tr { border-bottom: 1px solid #eef2f7; transition: background 0.15s ease; }
.microlearning-table tbody tr:last-child { border-bottom: none; }
.microlearning-table tbody tr:hover { background: #f0fbfc; }
.microlearning-table tbody td { padding: 0.85rem 1.1rem; font-size: 0.92rem; color: #5a6a7e; vertical-align: middle; border: none; }
.microlearning-type-badge { display: inline-block; padding: 0.2rem 0.7rem; border-radius: 50px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: #eef6ff; color: #2a7fb8; }
.microlearning-linked-yes { color: #56B74D; font-weight: 600; }
.microlearning-linked-no { color: #8fa0b4; }
.microlearning-icon-button { width: 36px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid; background: #fff; cursor: pointer; transition: all 0.15s ease; }
.microlearning-icon-button.view { border-color: #41B9CC; color: #41B9CC; }
.microlearning-icon-button.view:hover { background: #41B9CC; color: #fff; }
.microlearning-icon-button.delete { border-color: #e85d5d; color: #e85d5d; }
.microlearning-icon-button.delete:hover { background: #e85d5d; color: #fff; }
.microlearning-table-empty { padding: 2.5rem 1rem; text-align: center; color: #8fa0b4; }
.microlearning-table-empty i, .microlearning-table-empty svg { color: #cfd9e6; margin-bottom: 0.6rem; display: block; margin-left: auto; margin-right: auto; }
.microlearning-add-button { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1.4rem; background: #41B9CC; color: #fff; border: none; border-radius: 8px; font-size: 0.92rem; font-weight: 700; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; }
.microlearning-add-button:hover { background: #2a9aad; transform: translateY(-1px); color: #fff; }
.microlearning-tabs .nav-link { font-weight: 600; color: #5a6a7e; }
.microlearning-tabs .nav-link.active { color: #41B9CC; }

@media (max-width: 768px) { .microlearning-field-grid { grid-template-columns: 1fr; } }