/* Computer Skills Activities CSS
 * ============================================================================
 * Independent Practice — "Task Brief" card.
 *
 * Markup shape emitted by the course-pipeline generator
 * (`subjects/computer-skills/agents/generate.md`) — renders inline via
 * @Html.Raw(Step.Description) in _LessonContentPartial.cshtml:
 *
 * <div class="independent-practice-card my-3">
 *   <h3 class="ip-title h5 text-uppercase text-primary mb-3">
 *     <i class="fas fa-user-graduate me-2"></i>Independent Practice
 *   </h3>
 *   <div class="alert alert-primary ip-row ip-goal py-2 mb-2">
 *     <i class="fas fa-bullseye me-2"></i><strong>Your goal:</strong> ...
 *   </div>
 *   <div class="alert alert-warning ip-row ip-time py-2 mb-2">
 *     <i class="fas fa-clock me-2"></i><strong>Time:</strong>
 *     <span class="badge bg-warning text-dark ms-1">~20 minutes</span>
 *   </div>
 *   <div class="alert alert-info ip-row ip-task py-2 mb-2">
 *     <i class="fas fa-clipboard-list me-2"></i><strong>Task:</strong> ...
 *     <ol>...</ol>
 *   </div>
 *   <div class="alert alert-success ip-row ip-success py-2 mb-0">
 *     <div class="mb-2"><i class="fas fa-trophy me-2"></i><strong>Success criteria:</strong></div>
 *     <ul class="list-unstyled mb-0 ps-4">...</ul>
 *   </div>
 * </div>
 *
 * Icons are bare `<i>` elements (no `.ip-icon` wrapper); body text flows
 * directly inside the row (no `.ip-content` wrapper). We give each row a
 * position:relative frame and absolutely position the icon as a circular
 * badge on the left, then pad the row to clear it.
 *
 * Utility classes like `py-2 mb-2 me-2` are baked into the markup, so many
 * overrides need !important to win specificity against Bootstrap utilities.
 * ==========================================================================*/

.independent-practice-card {
    /* Scoped design tokens */
    --ip-ink: #1f2937;
    --ip-ink-soft: #475569;

    --ip-goal: #0d6efd;
    --ip-time: #f59e0b;
    --ip-task: #0891b2;
    --ip-success: #198754;

    margin: 1.5rem 0 1.75rem !important;    /* beats .my-3 */
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--ip-ink);
}

/* -- Hero header strip -------------------------------------------------------
 * The generator emits <h3 class="ip-title ... text-primary">. We restyle it
 * into a standalone branded bar sitting flush above the rows. Beats
 * `text-primary !important` with our own !important on color.
 * --------------------------------------------------------------------------*/

.independent-practice-card .ip-title {
    display: flex;
    align-items: center;
    margin: 0 0 0.75rem !important;
    padding: 0.65rem 1rem;
    background: linear-gradient(135deg, #4338ca 0%, #6366f1 55%, #3b82f6 100%);
    color: #ffffff !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.2;
    border-radius: 8px;
}

/* Swap the generator-emitted graduation-cap glyph for a rocket. We override
 * the existing .fa-user-graduate element's content rather than hiding it and
 * re-emitting — that way we inherit the correct font-family/weight from the
 * FA Kit's own class-based CSS (loaded via kit script in _LayoutCodingClub). */
.independent-practice-card .ip-title i.fa-user-graduate {
    color: #ffffff;
    font-size: 1.05rem;
}

.independent-practice-card .ip-title i.fa-user-graduate::before {
    content: "\f135";                          /* fa-rocket */
}

/* -- Rows --------------------------------------------------------------------
 * Keep Bootstrap's alert-* tinting (it aids scanning) but soften the chrome,
 * drop the hard border, add a coloured left accent bar, and reserve space on
 * the left for an absolute-positioned icon circle.
 * --------------------------------------------------------------------------*/

.independent-practice-card .ip-row.alert {
    position: relative;
    border: 0;
    border-left: 4px solid transparent;
    border-radius: 8px;
    padding: 0.85rem 1rem 0.85rem 3rem !important;  /* override py-2 + reserve icon space */
    margin-bottom: 0.55rem !important;               /* override mb-2 */
    line-height: 1.55;
}

.independent-practice-card .ip-row.alert:last-child {
    margin-bottom: 0 !important;
}

.independent-practice-card .ip-row.ip-goal.alert    { border-left-color: var(--ip-goal); }
.independent-practice-card .ip-row.ip-time.alert    { border-left-color: var(--ip-time); }
.independent-practice-card .ip-row.ip-task.alert    { border-left-color: var(--ip-task); }
.independent-practice-card .ip-row.ip-success.alert { border-left-color: var(--ip-success); }

/* Goal row reads larger — it anchors the task. */
.independent-practice-card .ip-row.ip-goal.alert {
    font-size: 1.05rem;
    font-weight: 500;
    color: #0b1f4a;
}

/* -- Row icon as a circular badge --------------------------------------------
 * The icon is the first <i> inside the row — EXCEPT in .ip-success where it
 * sits inside a nested <div class="mb-2">. Both absolute-position against the
 * .ip-row (which is position:relative).
 * --------------------------------------------------------------------------*/

.independent-practice-card .ip-row > i:first-child,
.independent-practice-card .ip-row.ip-success > div:first-child > i:first-child {
    position: absolute;
    left: 0.7rem;
    top: 0.95rem;
    width: 1.9rem;
    height: 1.9rem;
    margin: 0 !important;                /* override me-2 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.9rem;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(31, 41, 55, 0.15),
                inset 0 0 0 1px rgba(15, 23, 42, 0.05);
}

.independent-practice-card .ip-row.ip-goal    > i:first-child { color: var(--ip-goal); }
.independent-practice-card .ip-row.ip-time    > i:first-child { color: #b45309; }
.independent-practice-card .ip-row.ip-task    > i:first-child { color: var(--ip-task); }
.independent-practice-card .ip-row.ip-success > div:first-child > i:first-child { color: var(--ip-success); }

/* Time row is a single line, so centre its icon vertically instead of anchoring
 * it to a fixed top offset like the multi-line rows. */
.independent-practice-card .ip-row.ip-time > i:first-child {
    top: 50%;
    transform: translateY(-50%);
}

/* Section labels (the <strong> prefix inside each row) */
.independent-practice-card .ip-row strong {
    color: #0f172a;
    font-weight: 700;
    margin-right: 0.3rem;
}

/* -- Time row: tighten and polish the badge ---------------------------------- */

.independent-practice-card .ip-row.ip-time.alert {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding-top: 0.7rem !important;
    padding-bottom: 0.7rem !important;
}

.independent-practice-card .ip-row.ip-time .badge.bg-warning {
    padding: 0.3rem 0.7rem !important;
    font-size: 0.85rem !important;
    font-weight: 600;
    background: #fff4dc !important;        /* softer amber, beats .bg-warning */
    color: #92400e !important;
    border: 1px solid #fcd9a0;
    border-radius: 999px !important;
}

/* -- Task row: inner lists -------------------------------------------------- */

.independent-practice-card .ip-row.ip-task ol,
.independent-practice-card .ip-row.ip-task ul {
    margin-top: 0.5rem !important;
    padding-left: 1.25rem;
}

.independent-practice-card .ip-row.ip-task li {
    margin-bottom: 0.4rem;
}

.independent-practice-card .ip-row.ip-task li:last-child {
    margin-bottom: 0;
}

/* Inline code chips (`.sbs-inline-code`) already styled elsewhere, but give a
 * light tightening so they sit nicely mid-sentence without pushing line-height. */
.independent-practice-card .sbs-inline-code {
    font-size: 0.9em;
    padding: 0.05em 0.4em;
}

/* -- Success criteria panel --------------------------------------------------
 * Lift each criterion onto its own white card-within-card with a solid green
 * check chip, so the list reads as "have I done this?" rather than prose.
 * --------------------------------------------------------------------------*/

.independent-practice-card .ip-row.ip-success.alert {
    padding-top: 0.9rem !important;
    padding-bottom: 0.9rem !important;
}

.independent-practice-card .ip-row.ip-success > div:first-child {
    margin-bottom: 0.6rem !important;
    color: #0f5132;
}

.independent-practice-card .ip-row.ip-success ul.list-unstyled {
    padding-left: 0 !important;            /* override .ps-4 */
    margin: 0 !important;
}

.independent-practice-card .ip-row.ip-success ul.list-unstyled li {
    position: relative;
    padding: 0.55rem 0.75rem 0.55rem 2.4rem;
    margin-bottom: 0.4rem;
    background: #ffffff;
    border: 1px solid #cfe9d8;
    border-radius: 8px;
    font-size: 0.97rem;
    line-height: 1.45;
    color: #0f172a;
    box-shadow: 0 1px 1px rgba(31, 41, 55, 0.03);
}

.independent-practice-card .ip-row.ip-success ul.list-unstyled li:last-child {
    margin-bottom: 0;
}

.independent-practice-card .ip-row.ip-success ul.list-unstyled li::before {
    content: "\2713";                      /* ✓ */
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--ip-success);
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.8rem;
    line-height: 1;
}

/* -- Responsive --------------------------------------------------------------
 * Narrow screens: tighten padding, shrink icon circle.
 * --------------------------------------------------------------------------*/

@media (max-width: 575.98px) {
    .independent-practice-card .ip-title {
        padding: 0.55rem 0.85rem;
        font-size: 0.8rem !important;
    }

    .independent-practice-card .ip-row.alert {
        padding-left: 2.6rem !important;
    }

    .independent-practice-card .ip-row > i:first-child,
    .independent-practice-card .ip-row.ip-success > div:first-child > i:first-child {
        width: 1.6rem;
        height: 1.6rem;
        left: 0.55rem;
        top: 0.85rem;
        font-size: 0.8rem;
    }

    .independent-practice-card .ip-row.ip-goal.alert {
        font-size: 1rem;
    }

    .independent-practice-card .ip-row.ip-success ul.list-unstyled li {
        padding-left: 2.2rem;
        font-size: 0.94rem;
    }
}

/* -- Legacy fallback ---------------------------------------------------------
 * Lessons generated before the Bootstrap-alert shape use `.ip-row` without
 * `.alert`. Keep them styled so they don't regress to unstyled prose.
 * --------------------------------------------------------------------------*/

.independent-practice-card .ip-row:not(.alert) {
    position: relative;
    display: block;
    padding: 0.85rem 1rem 0.85rem 3rem;
    margin-bottom: 0.55rem;
    background: #f8fafc;
    border: 0;
    border-left: 4px solid var(--ip-goal);
    border-radius: 8px;
    line-height: 1.55;
}

.independent-practice-card .ip-row.ip-goal:not(.alert)    { border-left-color: var(--ip-goal); }
.independent-practice-card .ip-row.ip-time:not(.alert)    { border-left-color: var(--ip-time); }
.independent-practice-card .ip-row.ip-task:not(.alert)    { border-left-color: var(--ip-task); }
.independent-practice-card .ip-row.ip-success:not(.alert) { border-left-color: var(--ip-success); }

/* -- Print -------------------------------------------------------------------
 * Flatten gradients, tints, and shadows for clean teacher handouts.
 * --------------------------------------------------------------------------*/

@media print {
    .independent-practice-card {
        background: #ffffff !important;
        box-shadow: none !important;
        border: 1px solid #999 !important;
    }

    .independent-practice-card .ip-title {
        background: #ffffff !important;
        color: #000 !important;
        border-bottom: 2px solid #000 !important;
    }

    .independent-practice-card .ip-title i {
        color: #000 !important;
    }

    .independent-practice-card .ip-row.alert,
    .independent-practice-card .ip-row:not(.alert) {
        background: transparent !important;
        color: #000 !important;
        border: 1px solid #999 !important;
        border-left-width: 4px !important;
    }

    .independent-practice-card .ip-row > i:first-child,
    .independent-practice-card .ip-row.ip-success > div:first-child > i:first-child {
        background: #ffffff !important;
        color: #000 !important;
        border: 1px solid #000 !important;
        box-shadow: none !important;
    }

    .independent-practice-card .badge.bg-warning {
        background: transparent !important;
        color: #000 !important;
        border: 1px solid #999 !important;
    }

    .independent-practice-card .ip-row.ip-success ul.list-unstyled li {
        background: transparent !important;
        border: 1px solid #999 !important;
        box-shadow: none !important;
    }

    .independent-practice-card .ip-row.ip-success ul.list-unstyled li::before {
        background: transparent !important;
        color: #000 !important;
        border: 1px solid #000 !important;
    }
}