/*
 * Coding Ireland proprietary interactive activity
 * Copyright (c) 2017-2026 Coding Ireland. All rights reserved.
 *
 * Part of the Coding Ireland online learning platform. Licensed for use only
 * as delivered on the platform. Copying, redistributing, or adapting this
 * file, in whole or in part, for use in any other product or service is not
 * permitted. Ref: CI-digital-media-literacy-list-builder
 */
/* list-builder — build a shared class list (Digital Media Literacy: charter, checklist).
 * Builds on activity-common.css + maths-activity.css. Component styles below. */

.lb-stage { display: flex; flex-direction: column; gap: 16px; padding: 4px 2px 8px; }

.lb-scenario {
    background: #eef3f8;
    border-left: 5px solid #457b9d;
    border-radius: 10px;
    padding: 12px 16px;
    font-weight: 700;
    color: #1d3557;
}

/* One line above the list: how to mark a line (teacher), or that the teacher is
   building it on the board (a pupil on a teacher-built list). */
.lb-note { color: #34495e; font-size: .95rem; }
.lb-note.is-pupil {
    background: #fff8e6;
    border-left: 5px solid #e9a23b;
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: 700;
}
.lb-starter-list { margin: 2px 0 0; padding-left: 18px; }

/* The line saying this list started from an earlier lesson's (carryFrom), and the short
   message after Copy. */
.lb-carry {
    background: #eef6fb;
    border-left: 5px solid #457b9d;
    border-radius: 10px;
    padding: 10px 14px;
    color: #1d3557;
    font-weight: 700;
}
.lb-status {
    align-self: flex-start;
    background: #e7f6f3;
    border: 1px solid #9ad9cd;
    border-radius: 999px;
    padding: 5px 14px;
    color: #1f6f63;
    font-weight: 700;
    font-size: .92rem;
}
/* `hidden` must win over the shared button and box styles. */
#lbPrintButton[hidden], #lbCopyButton[hidden], .lb-carry[hidden], .lb-status[hidden], .lb-inbox[hidden] { display: none !important; }

/* pupilSuggest: the teacher's inbox of suggestions from pupils' devices (a count until Show),
   and a pupil's Send box with what they have sent. */
.lb-inbox {
    background: #f3f0fb;
    border-left: 5px solid #6c5ba7;
    border-radius: 10px;
    padding: 10px 14px;
    color: #2e2550;
}
.lb-inbox-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lb-inbox-title { font-weight: 800; }
.lb-inbox-count { color: #5a4e86; font-weight: 700; }
.lb-inbox-toggle {
    margin-left: auto;
    border: 2px solid #6c5ba7; background: #fff; color: #6c5ba7;
    border-radius: 999px; padding: 4px 14px; font-weight: 700; cursor: pointer;
}
.lb-inbox-group { margin-top: 10px; }
.lb-inbox-heading { font-weight: 800; color: #1d3557; margin-bottom: 4px; }
.lb-inbox-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lb-inbox-item {
    display: flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid #d9d2ee; border-radius: 10px; padding: 7px 10px;
}
.lb-keep, .lb-drop {
    border: none; border-radius: 8px; padding: 5px 10px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.lb-keep { background: #1f6f63; color: #fff; }
.lb-keep:hover { background: #185a50; }
.lb-drop { background: #f6e3e8; color: #a8344f; }
.lb-drop:hover { background: #efd0d8; }
.lb-sent { font-size: .9rem; color: #34495e; }
.lb-sent ul { list-style: none; margin: 2px 0 0; padding: 0; }
.lb-sent li { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
body.display-mode .lb-inbox-item, body.display-mode .lb-inbox-title { font-size: 1.15rem; }

.lb-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    align-items: start;
}

.lb-section {
    background: #fff;
    border: 2px solid #d9e2ec;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 4px 12px rgba(29, 53, 87, .06);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lb-section-head { font-weight: 800; color: #1d3557; font-size: 1.08rem; }

.lb-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.lb-item-empty { color: #8597a8; font-style: italic; font-size: .92rem; }
.lb-item {
    display: flex; align-items: flex-start; gap: 9px;
    background: #f6f9fc;
    border: 1px solid #e1e9f1;
    border-radius: 10px;
    padding: 8px 10px;
}
.lb-item.is-agreed { background: #e7f6f3; border-color: #9ad9cd; }
.lb-tick { border: none; background: transparent; color: #9bb1c9; cursor: pointer; font-size: 1.1rem; padding: 0; line-height: 1.3; }
.lb-item.is-agreed .lb-tick { color: #2a9d8f; }
.lb-text { flex: 1 1 auto; color: #20303f; line-height: 1.35; }
.lb-remove { border: none; background: transparent; color: #c2738a; cursor: pointer; font-size: 1rem; padding: 0 2px; line-height: 1.3; }
.lb-remove:hover { color: #a8344f; }

.lb-add { display: flex; gap: 7px; }
.lb-input {
    flex: 1 1 auto;
    border: 2px solid #c7d4e2;
    border-radius: 10px;
    padding: 8px 11px;
    font: inherit;
    color: #20303f;
}
.lb-input:focus { outline: none; border-color: #457b9d; }
.lb-add-btn {
    border: none; background: #1d3557; color: #fff;
    border-radius: 10px; padding: 8px 14px; font-weight: 700; cursor: pointer;
    white-space: nowrap;
}
.lb-add-btn:hover { background: #16314f; }

.lb-starters { font-size: .85rem; color: #5b6b7b; line-height: 1.9; }
.lb-starters-label { font-weight: 700; color: #44607a; }
.lb-starter {
    border: 1px dashed #b9c8d8; background: #fff; color: #44607a;
    border-radius: 999px; padding: 3px 10px; cursor: pointer; font-size: .85rem;
}
.lb-starter:hover { border-color: #457b9d; color: #1d3557; background: #eef3f8; }

.lb-discuss { border-top: 1px dashed #cdd9e5; padding-top: 12px; }
.lb-discuss-btn {
    border: 2px solid #457b9d; background: #fff; color: #457b9d;
    border-radius: 999px; padding: 8px 16px; font-weight: 700; cursor: pointer;
}
.lb-discuss-list { margin: 10px 0 0; padding-left: 20px; color: #34495e; }
.lb-discuss-list li { margin: 4px 0; }

.lb-empty { text-align: center; color: #5b6b7b; padding: 40px 0; font-style: italic; }

.lb-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

/* Display mode (IWB): bigger for whole-class building; framework hides header. */
body.display-mode .lb-section-head { font-size: 1.35rem; }
body.display-mode .lb-text { font-size: 1.25rem; }
body.display-mode .lb-input, body.display-mode .lb-add-btn { font-size: 1.15rem; }

/* Print: the list alone, filled by Print (or the browser's own Print) into #lbPrint. Without
   that content (a pupil's read-only view) the page prints as it is. */
.lb-print { display: none; }
@media print {
    @page { margin: 16mm; }
    html, body { background: #fff !important; height: auto !important; min-height: 0 !important; }
    body.lb-has-print { margin: 0 !important; padding: 0 !important; }
    body.lb-has-print .activity-container { display: none !important; }
    body.lb-has-print .lb-print { display: block !important; }
    .lb-print { color: #000; font-family: 'Nunito', Arial, sans-serif; }
    .lb-print-title { font-size: 20pt; font-weight: 800; margin: 0 0 4pt; color: #1d3557; }
    .lb-print-sub { font-size: 11.5pt; color: #333; margin: 0 0 14pt; }
    .lb-print-section { break-inside: avoid; page-break-inside: avoid; margin: 0 0 14pt; }
    .lb-print-section h2 {
        font-size: 13.5pt; font-weight: 800; margin: 0 0 6pt; padding-bottom: 3pt; color: #1d3557;
        border-bottom: 1.2pt solid #1d3557;
    }
    .lb-print-section ul { list-style: none; margin: 0; padding: 0; }
    .lb-print-section li { display: flex; gap: 7pt; margin: 0 0 5pt; font-size: 12pt; line-height: 1.35; }
    .lb-print-section li.is-agreed { font-weight: 700; }
    .lb-print-mark { flex: 0 0 12pt; text-align: center; font-weight: 800; }
    .lb-print-empty { font-style: italic; color: #555; margin: 0; font-size: 11.5pt; }
    .lb-print-key { margin: 6pt 0 0; font-size: 10.5pt; color: #333; }
}