
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.notice { padding: 10px; margin-bottom: 15px; border-left: 4px solid; }
.notice.success { border-color: #46b450; background: #ecf7ed; color: #2d6632; }
.notice.error { border-color: #dc3232; background: #fbeaea; color: #8a2424; }

.editor-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.editor-tabs .tab-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
}

.tab-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-color: currentColor;
    vertical-align: middle;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

.learnit-dashboard .card-title .tab-icon {
    width: 22px;
    height: 22px;
    margin-right: 6px;
}

.learnit-dashboard .nav-tabs .tab-icon {
    width: 20px;
    height: 20px;
}

.tab-icon-chat { mask-image: url("../icons/chat-centered-text.svg"); -webkit-mask-image: url("../icons/chat-centered-text.svg"); }
.tab-icon-book { mask-image: url("../icons/book-open-text.svg"); -webkit-mask-image: url("../icons/book-open-text.svg"); }
.tab-icon-question { mask-image: url("../icons/question-mark.svg"); -webkit-mask-image: url("../icons/question-mark.svg"); }
.tab-icon-pencil { mask-image: url("../icons/pencil-line.svg"); -webkit-mask-image: url("../icons/pencil-line.svg"); }
.tab-icon-text { mask-image: url("../icons/text-t.svg"); -webkit-mask-image: url("../icons/text-t.svg"); }
.tab-icon-cards { mask-image: url("../icons/cards.svg"); -webkit-mask-image: url("../icons/cards.svg"); }
.tab-icon-star { mask-image: url("../icons/star.svg"); -webkit-mask-image: url("../icons/star.svg"); }
.tab-icon-acorn { mask-image: url("../icons/acorn.svg"); -webkit-mask-image: url("../icons/acorn.svg"); }
.tab-icon-music { mask-image: url("../icons/music-note.svg"); -webkit-mask-image: url("../icons/music-note.svg"); }
.tab-icon-sheet { mask-image: url("../icons/file-spreadsheet.svg"); -webkit-mask-image: url("../icons/file-spreadsheet.svg"); }
.tab-icon-journal { mask-image: url("../icons/journal-bookmark.svg"); -webkit-mask-image: url("../icons/journal-bookmark.svg"); }
.tab-icon-music-list { mask-image: url("../icons/music-note-list.svg"); -webkit-mask-image: url("../icons/music-note-list.svg"); }
.tab-icon-file-sheet { mask-image: url("../icons/file-earmark-spreadsheet.svg"); -webkit-mask-image: url("../icons/file-earmark-spreadsheet.svg"); }
.tab-icon-info { mask-image: url("../icons/info-square.svg"); -webkit-mask-image: url("../icons/info-square.svg"); }

/* Drag & Drop */
.list-item[draggable="true"], .chapter-item[draggable="true"] { 
    border-left: 4px solid var(--bs-primary);
    transition: all 0.2s ease;
}
.list-item.dragging, .chapter-item.dragging {
    opacity: 0.6;
    background: rgba(148, 163, 184, 0.12);
    border: 2px dashed rgba(148, 163, 184, 0.6);
}
.drag-handle {
    display: inline-flex;
    width: 12px;
    height: 18px;
    margin-right: 12px;
    cursor: grab;
    user-select: none;
    align-self: center;
    flex: 0 0 auto;
    transition: color 0.2s ease;
}
.drag-dots {
    color: inherit;
    opacity: 1;
    background-image: radial-gradient(currentColor 1.3px, transparent 1.3px);
    background-size: 6px 6px;
    background-position: 0 0;
}
.list-item:hover .drag-handle, .chapter-item:hover .drag-handle,
.drag-handle:hover {
    color: var(--bs-body-color) !important;
    opacity: 1;
}

.chapter-item .chapter-actions {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(6px);
    will-change: opacity, transform;
    transition:
        opacity 0.8s ease,
        transform 0.8s ease,
        visibility 0s linear 0.8s;
}

.chapter-item:hover .chapter-actions,
.chapter-item:focus-within .chapter-actions {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    transition-delay: 0s;
}

.list-item .audio-actions {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(6px);
    will-change: opacity, transform;
    transition:
        opacity 0.22s ease,
        transform 0.22s ease,
        visibility 0s linear 0.22s;
}

.list-item:hover .audio-actions,
.list-item:focus-within .audio-actions {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    transition-delay: 0s;
}

label{
    font-weight: 500 !important;
}

.remove-row {
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.remove-row .remove-row-icon {
    display: block;
    line-height: 1;
}

.tts-terminal {
    background: #0b0b0b;
    color: #f5f5f5;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #1f1f1f;
}

.tts-progress {
    width: 100%;
    height: 8px;
    background: #e9ecef;
    border-radius: 999px;
    overflow: hidden;
}

.tts-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #0d6efd, #20c997);
    transition: width 0.2s ease;
}

/* ============================
   LearnIt PRO Dashboard Theme
   ============================ */


