/* =============================================================================
   AlignED — main styles
   ============================================================================= */

/* --- Layout --- */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main {
    flex: 1;
}

/* --- Quill editor output cleanup --- */
/* Hide the ql-ui placeholder spans Quill injects */
.ql-ui {
    display: none;
}
/* Quill wraps bullet lists in <ol> with data-list="bullet" — show disc markers */
ol > li[data-list="bullet"] {
    list-style-type: disc;
}

/* --- Navbar --- */
.navbar-brand {
    font-size: 1.3rem;
    letter-spacing: .05em;
}

/* --- Footer --- */
.al-footer {
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    padding: 1rem 0;
    font-size: .85rem;
    color: #6c757d;
}
.al-footer a {
    color: #6c757d;
    text-decoration: none;
}
.al-footer a:hover {
    text-decoration: underline;
}

/* --- Resource Cards --- */
.al-card {
    transition: box-shadow .15s;
    border: 1px solid #e9ecef;
}
.al-card:hover {
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.08);
}

.al-badge-lesson   { background-color: #0d6efd; }
.al-badge-activity { background-color: #198754; }
.al-badge-link     { background-color: #6f42c1; }
.al-badge-document { background-color: #fd7e14; }

/* --- Vote buttons --- */
.al-vote-btn {
    border: none;
    background: none;
    cursor: pointer;
    padding: .25rem .5rem;
    border-radius: .25rem;
    font-size: .9rem;
}
.al-vote-btn:hover {
    background: #f0f0f0;
}
.al-vote-btn.active-up {
    color: #198754;
    background: #d1e7dd;
}
.al-vote-btn.active-down {
    color: #dc3545;
    background: #f8d7da;
}
.al-vote-btn.disabled,
.al-thumb-btn.disabled {
    opacity: .45;
    cursor: default;
    pointer-events: none;
}

/* --- Bookmark (legacy, kept for non-resource pages) --- */
.al-bookmark-btn {
    border: none;
    background: none;
    cursor: pointer;
    color: #6c757d;
    font-size: 1.1rem;
}
.al-bookmark-btn.active {
    color: #ffc107;
}

/* --- Uniform action pills (sidebar) --- */
.al-action-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid #dee2e6;
    background: #fff;
    color: #555;
    padding: .35rem .7rem;
    border-radius: 2rem;
    font-size: .8rem;
    cursor: pointer;
    transition: all .15s;
    text-decoration: none;
    white-space: nowrap;
}
.al-action-pill:hover {
    border-color: #adb5bd;
    color: #333;
    background: #f8f9fa;
    text-decoration: none;
}
.al-action-pill.active {
    background: #d1e7dd;
    border-color: #198754;
    color: #198754;
}
.al-action-pill.disabled {
    opacity: .45;
    cursor: default;
    pointer-events: none;
}
a.al-action-pill,
.al-action-pill.w-100 {
    justify-content: center;
}

/* --- Filter sidebar --- */
.al-filter-section {
    margin-bottom: 1.25rem;
}
.al-filter-section h6 {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6c757d;
    margin-bottom: .5rem;
}

/* --- Alignment score bar --- */
.al-score-bar {
    display: inline-block;
    width: 60px;
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    vertical-align: middle;
}
.al-score-bar-fill {
    height: 100%;
    border-radius: 4px;
}
.al-score-1 { background: #dc3545; width: 20%; }
.al-score-3 { background: #ffc107; width: 60%; }
.al-score-4 { background: #0dcaf0; width: 80%; }
.al-score-5 { background: #198754; width: 100%; }

/* --- Alignment rating buttons --- */
.al-rating-btn {
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: .25rem;
    border: 1px solid #dee2e6;
    cursor: pointer;
    font-size: .85rem;
    font-weight: 600;
    transition: all .15s;
}
.al-rating-btn:hover {
    border-color: #0d6efd;
    background: #e7f1ff;
}
.al-rating-btn.selected {
    color: #fff;
}
.al-rating-btn.selected[data-rating="1"] { background: #dc3545; border-color: #dc3545; }
.al-rating-btn.selected[data-rating="3"] { background: #ffc107; border-color: #ffc107; color: #333; }
.al-rating-btn.selected[data-rating="4"] { background: #0dcaf0; border-color: #0dcaf0; }
.al-rating-btn.selected[data-rating="5"] { background: #198754; border-color: #198754; }

/* --- Collapsible section headers (shared: submit + resource view) --- */
.al-sec-header {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 0;
    user-select: none;
}
.al-sec-header .bi-chevron-right {
    transition: transform 0.15s;
    font-size: 0.75em;
}
.al-sec-header:not(.collapsed) .bi-chevron-right {
    transform: rotate(90deg);
}
.al-sec-header .fw-semibold { cursor: pointer; }

/* --- Step display (resource detail view) --- */
.al-res-step {
    border-left: 3px solid #dee2e6;
    padding: .5rem 0 .5rem 1rem;
    margin-bottom: .5rem;
}
.al-impl-note-display {
    background: #fff8e1;
    border-radius: .25rem;
    padding: .5rem .75rem;
    font-size: .85rem;
    color: #6c5700;
    border-left: 3px solid #ffc107;
}

/* Hide implementation notes div inside stored HTML (rendered separately) */
.al-impl-note {
    display: none;
}

/* --- Grade/subject pills on cards --- */
.al-pill {
    display: inline-block;
    font-size: .7rem;
    padding: .15rem .5rem;
    border-radius: 1rem;
    background: #f0f0f0;
    color: #555;
    margin-right: .25rem;
}

/* ==========================================================================
   Star Rating System
   ========================================================================== */

/* --- Rating panel (contains all dimensions for a target) --- */
.al-rating-panel {
    border-top: 1px solid #e9ecef;
    padding-top: .75rem;
    margin-top: .75rem;
}

/* --- Single dimension row --- */
.al-star-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
}
.al-star-row-label {
    font-size: .95rem;
    font-weight: 600;
    color: #333;
    min-width: 120px;
    flex-shrink: 0;
}
.al-star-row-label .badge {
    font-size: .6rem;
    vertical-align: middle;
}

/* --- Star buttons --- */
.al-stars {
    display: inline-flex;
    gap: 2px;
}
.al-star {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 1.2rem;
    color: #d0d0d0;
    transition: color .15s, transform .1s;
    line-height: 1;
}
.al-star:hover {
    transform: scale(1.2);
}
.al-star.filled {
    color: #f5a623;
}
.al-star.hovered {
    color: #f5c563;
}

/* --- Aggregate display (small text after stars) --- */
.al-star-avg {
    font-size: .75rem;
    color: #888;
    margin-left: .25rem;
}

/* --- Comment field --- */
.al-comment-field {
    width: 100%;
    font-size: .8rem;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
    padding: .35rem .5rem;
    margin-top: .35rem;
    resize: vertical;
    min-height: 2.5rem;
    transition: border-color .15s;
}
.al-comment-field:focus {
    border-color: #86b7fe;
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
}
.al-comment-field.low-score {
    border-color: #ffc107;
    background: #fffdf0;
}

/* --- Rater's own saved comment (yellow callout, click to edit) --- */
.al-mycomment-display {
    margin-top: .35rem;
    padding: .5rem .6rem;
    background: #fff8e1;
    border-left: 3px solid #ffc107;
    border-radius: .25rem;
    font-size: .8rem;
    color: #5a4500;
    white-space: pre-wrap;
    cursor: pointer;
    transition: background .15s;
}
.al-mycomment-display:hover {
    background: #fff2c4;
}

/* --- Compact, stacked rating panel for narrow left column on crosswalk cards --- */
.al-cw-rating-col .al-rating-panel {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
    background: #f8f9fa;
    border-radius: .35rem;
    padding: .6rem;
}
.al-cw-rating-col .al-star-row {
    flex-wrap: wrap;
    gap: .25rem;
    margin-bottom: .35rem;
}
/* Separator between dimension blocks (Pairing / Rationale / Picture this) */
.al-cw-rating-col .al-star-row:not(:first-child) {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #d5d8dc;
}
.al-cw-rating-col .al-star-row-label {
    flex-basis: 100%;
    min-width: 0;
    font-weight: 600;
    color: #444;
    margin-bottom: .1rem;
}
.al-cw-rating-col .al-star {
    font-size: 1.05rem;
}
.al-cw-rating-col .al-star-avg {
    margin-left: .35rem;
}

/* --- Clear-my-rating X button --- */
.al-star-clear {
    background: none;
    border: none;
    padding: 0 .15rem;
    color: #adb5bd;
    cursor: pointer;
    font-size: .85rem;
    margin-left: .15rem;
    transition: color .15s;
}
.al-star-clear:hover {
    color: #dc3545;
}

/* --- Cell-level "published lessons" badge (top-left of every cell).
   Muted blue pill that opens the lessons-by-row+subject modal. */
.al-cell-lessons {
    background: #e9eef9;
    color: #4a6da3;
    font-size: .7em;
    font-weight: 500;
}
.al-cell-lessons:hover { background: #dbe4f5; }

/* --- Per-pair "N ideas" pill (light bulb, muted amber). Mirrors the
   per-pair "N lessons" outlined-blue pill but links directly to the
   pair's pair.php page where ideas can be fleshed out. */
.al-pair-idea-pill {
    background: #fcf3d6;
    color: #8a6a1a;
    border: 1px solid #ead08a;
    text-decoration: none;
}
.al-pair-idea-pill:hover {
    background: #f7e6a7;
    color: #6e521a;
    border-color: #d6b94a;
    text-decoration: none;
}

/* --- Per-pair thumb tracker on coverage cells (tri-state) ---
   Lets registered users mark which crosswalk pairs they've personally
   considered. is-none (default) = soft grey thumbs-up outline, is-up =
   bright yellow filled thumbs-up, is-down = red filled thumbs-down. */
.al-pair-thumb {
    line-height: 1;
    text-decoration: none;
    transition: color .12s, transform .12s;
    font-size: .95rem;
}
.al-pair-thumb:hover    { transform: scale(1.15); text-decoration: none; }
.al-pair-thumb.is-none  { color: #b0b6bc; }
.al-pair-thumb.is-none:hover { color: #6c757d; }
.al-pair-thumb.is-up    { color: #f6b800; }   /* bright yellow */
.al-pair-thumb.is-down  { color: #dc3545; }   /* bootstrap red */
.al-pair-thumb:disabled { opacity: .5; cursor: wait; }

/* --- Low-confidence eye on coverage rows ---
   Was Bootstrap's text-warning yellow; recolored to a muted slate-blue so
   the per-pair yellow thumbs-up is the only yellow signal in the row. */
.al-eye-low { color: #7e94aa; }

/* --- "I've taught this" thumb button --- */
.al-thumb-btn {
    border: 1px solid #dee2e6;
    background: #fff;
    cursor: pointer;
    padding: .3rem .6rem;
    border-radius: 1rem;
    font-size: .8rem;
    color: #666;
    transition: all .15s;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.al-thumb-btn:hover {
    border-color: #198754;
    color: #198754;
}
.al-thumb-btn.active {
    background: #d1e7dd;
    border-color: #198754;
    color: #198754;
}

/* --- Rating comments in edit view --- */
.al-rating-comments {
    margin-top: .5rem;
    padding: .5rem 0 .5rem .5rem;
    border-left: 2px solid #dee2e6;
    font-size: .8rem;
}
.al-rating-comments .comment-item {
    margin-bottom: .4rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid #eee;
}
.al-rating-comments .comment-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.al-rating-comments .comment-author {
    font-weight: 600;
    color: #495057;
}
.al-rating-comments .comment-score {
    color: #f5a623;
}
.al-comments-block {
    margin-top: .35rem;
}
.al-comments-toggle {
    font-size: .75rem;
    text-decoration: none;
    color: #6c757d;
}
.al-comments-toggle:hover {
    color: #0d6efd;
}
.al-comments-caret {
    transition: transform .15s;
}

/* --- Needs-review (rater has been asked to re-rate) --- */
.al-star-row.needs-review .al-star.filled {
    color: #dc3545;
}
.al-star-row.needs-review .al-star.filled i {
    color: #dc3545;
}
.al-rerate-hint {
    font-size: .7rem;
    color: #dc3545;
    margin-left: .5rem;
    font-style: italic;
}
.al-rerate-hint i {
    margin-right: .15rem;
}

/* --- Editable field block (Rationale / Picture this) --- */
.al-field-block .al-field-header {
    display: flex;
    align-items: center;
    gap: .25rem;
}
.al-field-actions {
    margin-left: .5rem;
    opacity: 0;
    transition: opacity .15s;
}
.al-field-block:hover .al-field-actions {
    opacity: 1;
}
.al-field-actions .btn-link {
    padding: 0 .25rem;
    color: #6c757d;
    text-decoration: none;
}
.al-field-actions .btn-link:hover {
    color: #0d6efd;
}
.al-field-actions .al-field-rerate:hover {
    color: #dc3545;
}
.al-field-editor {
    font-size: .9rem;
}

/* --- Baseline table styling inside lesson/companion bodies.
       Safety net so older content (or AI output that omits inline styles)
       still renders with readable borders and header rows. Inline styles
       from the generator prompts win over these. --- */
#resourceDetail table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
}
#resourceDetail th,
#resourceDetail td {
    border: 1px solid #ccc;
    padding: 6px 10px;
    text-align: left;
    vertical-align: top;
}
#resourceDetail th {
    background: #f4f6f8;
    font-weight: 600;
}