/* All-courses page (/courses) styles: the grid, course cards, status badges,
   and the delete-confirmation dialog. Loads after shell.css (which owns
   .main's flex/min-width/padding and the mobile `.app .main` override). */

.container { max-width: 760px; margin: 0 auto; }
h1 { font-family: var(--display); font-weight: 500; font-size: 1.5rem; color: var(--text); margin-bottom: 1.5rem; }

.empty {
    text-align: center; color: var(--text-3); padding: 4rem 1rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.empty a { color: var(--accent); text-decoration: none; }
.empty a:hover { text-decoration: underline; }
.course-list { display: flex; flex-direction: column; gap: .75rem; }
.course-item {
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    padding: 1rem 1.25rem;
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
/* Keep the info column readable; when a multi-language course has too
   many action buttons to sit beside it, the whole actions block wraps
   to the next line (card flex-wrap) instead of overflowing the card. */
.course-info { flex: 1 1 240px; min-width: 240px; }
.course-name {
    font-size: .95rem; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.course-meta { font-size: .8rem; color: var(--text-3); margin-top: .25rem; display: flex; align-items: center; gap: .5rem; }
/* The completed-card action cluster is the shared .course-toolbar
   (renderCourseActions + styles in shell.js/shell.css); this rule only sits
   it in the card row. flex:1 1 auto + min-width:0 (NOT flex-shrink:0): lets
   the block be constrained to the available width so its own flex-wrap
   actually wraps instead of expanding to one long overflowing row.
   .course-actions remains for the in-flight cards' cancel button. */
.course-item .course-toolbar { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
.course-actions { display: flex; gap: .5rem; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
.course-msg { font-size: .78rem; margin-top: .4rem; }
.course-msg.ok { color: var(--ok); }
.course-msg.err { color: var(--error); }

/* Status badges */
.status-badge {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
}
.status-running { background: #E0EBE9; color: var(--accent); }
.status-queued { background: var(--sidebar); color: var(--text-2); }

/* Mini progress bar */
.course-progress { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mini-progress-bar {
    width: 80px; height: 4px; background: var(--hairline);
    border-radius: 2px; overflow: hidden;
}
.mini-progress-fill { height: 100%; background: var(--accent); transition: width 0.5s ease; }
.mini-progress-text { font-size: .8rem; color: var(--text-3); min-width: 32px; text-align: right; }

/* Token & cost display */
.course-stats { font-size: .75rem; color: var(--text-2); }
.course-stats span { display: inline-block; margin-right: 1rem; }

.btn-cancel-generation {
    padding: .4rem .85rem; border-radius: 999px;
    font-size: .8rem; font-weight: 500; cursor: pointer;
    transition: border-color .2s, background .2s;
    background: var(--surface); border: 1px solid var(--border); color: var(--error);
}
.btn-cancel-generation:hover { border-color: var(--error); background: rgba(179,38,30,.06); }
.btn-cancel-generation:disabled { opacity: .6; cursor: default; }

/* Confirmation-dialog styles (dialog.confirm / .confirm-*) moved to shell.css:
   the home page's preset dialog reuses them and doesn't load this file. */