/* /Components/AttachmentUploader.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
   AttachmentUploader.razor.css
   Desktop : 6-column CSS grid (thead + rows share same template)
   Mobile  : flex-column card per row, no position:absolute
══════════════════════════════════════════════════════════════════════ */

/* ── Card shell ──────────────────────────────────────────────────────── */
.au-card[b-ss3o65lqu8] { margin-top: 0; overflow: hidden; }

.au-card .section-header[b-ss3o65lqu8] {
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.au-header-icon[b-ss3o65lqu8] {
    background: rgba(99,102,241,.10) !important;
    color: var(--clr-accent) !important;
}

.au-header-text[b-ss3o65lqu8] { flex: 1; min-width: 0; }

.au-header-text h6[b-ss3o65lqu8] { margin-bottom: 3px; font-size: 14px; }

.au-header-text p[b-ss3o65lqu8] {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--clr-text-muted);
}

/* ── Header badge ────────────────────────────────────────────────────── */
.au-badge[b-ss3o65lqu8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 20px;
    line-height: 1.6;
}
.au-badge--ok[b-ss3o65lqu8]      { background: rgba(16,185,129,.12); color: #059669; }
.au-badge--pending[b-ss3o65lqu8] { background: rgba(245,158,11,.12);  color: #d97706; }

/* ── Add button ──────────────────────────────────────────────────────── */
.au-add-btn[b-ss3o65lqu8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--clr-accent);
    background: transparent;
    color: var(--clr-accent);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1;
}
.au-add-btn:hover:not(:disabled)[b-ss3o65lqu8] { background: var(--clr-accent); color: #fff; }
.au-add-btn:disabled[b-ss3o65lqu8]              { opacity: .4; cursor: not-allowed; }

/* ── Required star ───────────────────────────────────────────────────── */
.au-req[b-ss3o65lqu8] { color: var(--clr-danger); font-weight: 800; margin-left: 1px; }

/* ═══════════════════════════════════════════════════════════════════════
   DESKTOP GRID
   thead & au-row share IDENTICAL grid-template-columns — exact alignment.
   Columns: [#40px] [type 1.8fr] [number 1.1fr] [file 1.6fr] [status 82px] [action 38px]
════════════════════════════════════════════════════════════════════════ */
.au-thead[b-ss3o65lqu8],
.au-row[b-ss3o65lqu8] {
    display: grid;
    grid-template-columns: 40px 1.8fr 1.1fr 1.6fr 82px 38px;
    column-gap: 10px;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}

/* ── Column header strip ─────────────────────────────────────────────── */
.au-thead[b-ss3o65lqu8] {
    padding-top: 8px;
    padding-bottom: 8px;
    background: var(--clr-body-bg, #f8fafc);
    border-top: 1px solid var(--clr-card-border);
    border-bottom: 1px solid var(--clr-card-border);
}

.au-th[b-ss3o65lqu8] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--clr-text-muted);
    display: flex;
    align-items: center;
    gap: 3px;
    line-height: 1;
}
.au-th--center[b-ss3o65lqu8] { justify-content: center; }

/* ── Body wrapper ────────────────────────────────────────────────────── */
.au-body[b-ss3o65lqu8] { display: flex; flex-direction: column; }

/* ── Each row ────────────────────────────────────────────────────────── */
.au-row[b-ss3o65lqu8] {
    align-items: center;
    min-height: 58px;
    padding-top: 9px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--clr-card-border);
    transition: background .15s;
}
.au-row:last-child[b-ss3o65lqu8] { border-bottom: none; }
.au-row--ok[b-ss3o65lqu8]        { background: rgba(16,185,129,.025); }
.au-row:not(.au-row--ok):hover[b-ss3o65lqu8] { background: rgba(99,102,241,.018); }

/* ── Cells ───────────────────────────────────────────────────────────── */
.au-cell[b-ss3o65lqu8] {
    display: flex;
    align-items: center;
    min-width: 0;
    width: 100%;
}
.au-cell--num[b-ss3o65lqu8],
.au-cell--status[b-ss3o65lqu8],
.au-cell--action[b-ss3o65lqu8] { justify-content: center; width: auto; }

/* mobile labels — hidden on desktop */
.au-mob-label[b-ss3o65lqu8] { display: none; }

/* ── Row number badge ────────────────────────────────────────────────── */
.au-num-badge[b-ss3o65lqu8] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--clr-accent-soft, rgba(99,102,241,.10));
    color: var(--clr-accent);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Icon + input/select wrapper ─────────────────────────────────────── */
.au-field[b-ss3o65lqu8] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.au-field-ico[b-ss3o65lqu8] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--clr-text-muted);
    pointer-events: none;
    z-index: 2;
    line-height: 1;
}

/* ── Custom SELECT ───────────────────────────────────────────────────── */
.au-select[b-ss3o65lqu8] {
    width: 100%;
    height: 38px;
    padding: 0 28px 0 32px;   /* left: icon gap | right: chevron gap */
    font-size: 13px;
    font-family: inherit;
    color: var(--clr-text-primary, #1e293b);
    background-color: var(--clr-card-bg, #fff);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7280' d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1.5px solid var(--clr-input-border, #d1d5db);
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.au-select:focus[b-ss3o65lqu8] {
    outline: none;
    border-color: var(--clr-accent);
    box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.au-select:hover:not(:focus)[b-ss3o65lqu8] { border-color: var(--clr-accent); }
.au-select--empty[b-ss3o65lqu8]             { color: var(--clr-text-muted, #9ca3af); }

/* ── Custom INPUT ────────────────────────────────────────────────────── */
.au-input[b-ss3o65lqu8] {
    width: 100%;
    height: 38px;
    padding: 0 10px 0 32px;   /* left: icon gap */
    font-size: 13px;
    font-family: inherit;
    color: var(--clr-text-primary, #1e293b);
    background: var(--clr-card-bg, #fff);
    border: 1.5px solid var(--clr-input-border, #d1d5db);
    border-radius: var(--radius-sm, 6px);
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    display: block;
}
.au-input[b-ss3o65lqu8]::placeholder {
    color: var(--clr-text-muted, #9ca3af);
    font-size: 12px;
}
.au-input:focus[b-ss3o65lqu8] {
    outline: none;
    border-color: var(--clr-accent);
    box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.au-input:hover:not(:focus)[b-ss3o65lqu8] { border-color: var(--clr-accent); }

/* ── Attach / Upload button ──────────────────────────────────────────── */
.au-attach[b-ss3o65lqu8] {
    width: 100%;
    height: 38px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border-radius: var(--radius-sm, 6px);
    border: 1.5px dashed var(--clr-card-border, #e2e8f0);
    background: var(--clr-body-bg, #f8fafc);
    color: var(--clr-text-secondary, #64748b);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    min-width: 0;
}
.au-attach:hover:not(.au-attach--done)[b-ss3o65lqu8] {
    border-style: solid;
    border-color: var(--clr-accent);
    background: var(--clr-accent-soft, rgba(99,102,241,.06));
    color: var(--clr-accent);
}
.au-attach--done[b-ss3o65lqu8] {
    border-style: solid;
    border-color: var(--clr-success, #10b981);
    background: rgba(16,185,129,.06);
    color: #065f46;
}
.au-attach--done:hover[b-ss3o65lqu8] { background: rgba(16,185,129,.12); }

.au-fname[b-ss3o65lqu8] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    min-width: 0;
}
.au-fsize[b-ss3o65lqu8] {
    font-size: 10px;
    font-weight: 600;
    color: var(--clr-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.au-change-lbl[b-ss3o65lqu8] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--clr-accent);
    flex-shrink: 0;
    padding: 2px 5px;
    background: var(--clr-accent-soft, rgba(99,102,241,.08));
    border-radius: 4px;
}

/* ── Status pill ─────────────────────────────────────────────────────── */
.au-pill[b-ss3o65lqu8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}
.au-pill--ok[b-ss3o65lqu8]      { background: rgba(16,185,129,.12); color: #059669; }
.au-pill--pending[b-ss3o65lqu8] { background: rgba(245,158,11,.12);  color: #b45309; }

/* ── Remove button ───────────────────────────────────────────────────── */
.au-remove[b-ss3o65lqu8] {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid rgba(239,68,68,.25);
    background: rgba(239,68,68,.06);
    color: var(--clr-danger, #ef4444);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.au-remove:hover[b-ss3o65lqu8] {
    background: var(--clr-danger, #ef4444);
    border-color: var(--clr-danger, #ef4444);
    color: #fff;
}

/* ── Footer bar ──────────────────────────────────────────────────────── */
.au-footer[b-ss3o65lqu8] {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 10px 16px;
    border-top: 1px solid var(--clr-card-border);
    background: var(--clr-body-bg, #f8fafc);
    font-size: 11.5px;
    color: var(--clr-text-muted);
    flex-wrap: wrap;
}
.au-footer i[b-ss3o65lqu8] { font-size: 13px; flex-shrink: 0; color: var(--clr-accent); margin-top: 1px; }

/* ══════════════════════════════════════════════════════════════════════
   MOBILE  ≤ 768px
   Override the desktop grid entirely.
   Each au-row → vertical flex card.
   Top strip  → [badge]·········[pill]·[remove]   (one flex row)
   Then fields stack below with their own labels.
   Zero position:absolute used anywhere.
══════════════════════════════════════════════════════════════════════ */
@@media (max-width: 768px) {

    /* Hide desktop column headers */
    .au-thead[b-ss3o65lqu8] { display: none; }

    /* Row → card */
    .au-row[b-ss3o65lqu8] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-height: unset;
        padding: 0;
        margin: 8px 12px;
        border: 1px solid var(--clr-card-border);
        border-radius: 8px;
        overflow: hidden;
        column-gap: 0;
    }
    .au-row--ok[b-ss3o65lqu8]   { border-color: rgba(16,185,129,.40); }
    .au-row:last-child[b-ss3o65lqu8] { border-bottom: 1px solid var(--clr-card-border); }

    /* ── Top strip — num + status + remove in a single flex row ──── */
    .au-cell--num[b-ss3o65lqu8],
    .au-cell--status[b-ss3o65lqu8],
    .au-cell--action[b-ss3o65lqu8] {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: auto;
    }

    /* Compose the strip using a wrapper trick:
       All three "meta" cells are flex children of a synthetic strip row.
       We achieve this by making au-row itself the strip for the first
       three children via flex-wrap + forced break. */
    .au-cell--num[b-ss3o65lqu8] {
        padding: 8px 10px;
        border-bottom: 1px solid var(--clr-card-border);
        flex: 0 0 auto;
    }
    .au-cell--status[b-ss3o65lqu8] {
        padding: 8px 10px;
        border-bottom: 1px solid var(--clr-card-border);
        flex: 1 1 auto;
        justify-content: flex-end;
    }
    .au-cell--action[b-ss3o65lqu8] {
        padding: 8px 10px;
        border-bottom: 1px solid var(--clr-card-border);
        flex: 0 0 auto;
        justify-content: center;
    }

    /* Group the first 3 cells in a single row using flex-direction row on them */
    .au-row[b-ss3o65lqu8] {
        flex-flow: row wrap;
        align-items: stretch;
    }

    /* Top 3 cells sit in the first "row" */
    .au-cell--num[b-ss3o65lqu8]    { order: 0; align-self: center; }
    .au-cell--status[b-ss3o65lqu8] { order: 1; align-self: center; }
    .au-cell--action[b-ss3o65lqu8] { order: 2; align-self: center; }

    /* Form fields below, each full-width */
    .au-cell--type[b-ss3o65lqu8],
    .au-cell--number[b-ss3o65lqu8],
    .au-cell--file[b-ss3o65lqu8] {
        order: 10;
        flex: 0 0 100%;
        flex-direction: column;
        align-items: stretch;
        padding: 10px 12px;
        border-bottom: 1px solid var(--clr-card-border);
    }
    .au-cell--file[b-ss3o65lqu8] { border-bottom: none; }

    /* Show labels above each field */
    .au-mob-label[b-ss3o65lqu8] {
        display: block;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--clr-text-muted);
        margin-bottom: 6px;
        line-height: 1;
    }

    /* Field wrapper full width */
    .au-field[b-ss3o65lqu8] { width: 100%; }

    /* Bigger touch targets */
    .au-select[b-ss3o65lqu8],
    .au-input[b-ss3o65lqu8]  { height: 44px; font-size: 14px; padding-left: 34px; }
    .au-attach[b-ss3o65lqu8] { height: 44px; font-size: 14px; width: 100%; }

    /* Add button full width on mobile */
    .au-add-btn[b-ss3o65lqu8] { width: 100%; justify-content: center; margin-top: 2px; }

    .au-footer[b-ss3o65lqu8] { font-size: 11px; padding: 10px 12px; }

    /* Body — remove extra padding that causes double margins */
    .au-body[b-ss3o65lqu8] { padding-bottom: 4px; }
}
/* /Components/MediaPicker.razor.rz.scp.css */
/* ── Overlay & card ─────────────────────────────────────────────────────── */
.cd-overlay[b-m51c8ma5y6] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 320px;
}

.cd-card[b-m51c8ma5y6] {
    background: #fff;
    border-radius: 14px;
    padding: 1.75rem 2rem;
    width: min(420px, 90vw);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .18);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Main view ──────────────────────────────────────────────────────────── */
.cd-main[b-m51c8ma5y6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .85rem;
    text-align: center;
}

.cd-main-icon[b-m51c8ma5y6] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #eff6ff;
    color: #0d6efd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.65rem;
}

.cd-main-title[b-m51c8ma5y6] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.cd-main-sub[b-m51c8ma5y6] {
    font-size: .8rem;
    color: #94a3b8;
    margin: 0;
}

/* ── Option cards ───────────────────────────────────────────────────────── */
.cd-option[b-m51c8ma5y6] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    text-decoration: none;
    transition: border-color .18s, background .18s, box-shadow .18s;
}
.cd-option:hover[b-m51c8ma5y6] {
    border-color: #0d6efd;
    background: #eff6ff;
    box-shadow: 0 2px 10px rgba(13, 110, 253, .1);
}
.cd-option:hover .cd-option-arrow[b-m51c8ma5y6] { color: #0d6efd; }
.cd-option:disabled[b-m51c8ma5y6] {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}

.cd-option-icon[b-m51c8ma5y6] {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.cd-option-icon--upload[b-m51c8ma5y6] { background: rgba(13, 110, 253, .1); color: #0d6efd; }
.cd-option-icon--camera[b-m51c8ma5y6] { background: rgba(25, 135, 84, .1);  color: #198754; }

.cd-option-body[b-m51c8ma5y6] { flex: 1; }
.cd-option-title[b-m51c8ma5y6] { font-size: .88rem; font-weight: 700; color: #1e293b; }
.cd-option-sub[b-m51c8ma5y6]   { font-size: .72rem; color: #94a3b8; margin-top: 2px; }
.cd-option-arrow[b-m51c8ma5y6] { color: #cbd5e1; font-size: .8rem; flex-shrink: 0; }

/* ── Camera view ────────────────────────────────────────────────────────── */
.cd-camera[b-m51c8ma5y6] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cd-camera-header[b-m51c8ma5y6] {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.cd-back-btn[b-m51c8ma5y6] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
}
.cd-back-btn:hover[b-m51c8ma5y6]    { background: #e2e8f0; border-color: #94a3b8; }
.cd-back-btn:disabled[b-m51c8ma5y6] { opacity: .5; cursor: not-allowed; }

.cd-camera-title[b-m51c8ma5y6] {
    font-size: 1rem;
    font-weight: 700;
    color: #343a40;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .4rem;
}

/* ── Video area ─────────────────────────────────────────────────────────── */
.cd-video-area[b-m51c8ma5y6] {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    background: #1a1a2e;
    border: 2px solid #dee2e6;
}

.cd-video[b-m51c8ma5y6] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}
.cd-video--visible[b-m51c8ma5y6] { display: block; }
.cd-canvas-hidden[b-m51c8ma5y6]  { display: none; }

.cd-preview[b-m51c8ma5y6] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* ── Placeholder ────────────────────────────────────────────────────────── */
.cd-placeholder[b-m51c8ma5y6] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: #6c757d;
    font-size: .85rem;
    font-weight: 500;
}
.cd-placeholder-icon[b-m51c8ma5y6] {
    width: 48px;
    height: 48px;
    color: #adb5bd;
}

/* ── Spinner shown while camera initialises ─────────────────────────────── */
.cd-spinner[b-m51c8ma5y6] {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, .25);
    border-top-color: #0d6efd;
    border-radius: 50%;
    animation: cd-spin-b-m51c8ma5y6 .7s linear infinite;
}
.cd-spin-sm[b-m51c8ma5y6] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cd-spin-b-m51c8ma5y6 .7s linear infinite;
    flex-shrink: 0;
}
@keyframes cd-spin-b-m51c8ma5y6 { to { transform: rotate(360deg); } }

/* ── Button row ─────────────────────────────────────────────────────────── */
.cd-btn-row[b-m51c8ma5y6] {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.cd-btn[b-m51c8ma5y6] {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .55rem 1.2rem;
    border-radius: 8px;
    border: none;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s, transform .1s, opacity .15s;
    white-space: nowrap;
}
.cd-btn:disabled[b-m51c8ma5y6]                  { opacity: .55; cursor: not-allowed; }
.cd-btn:not(:disabled):hover[b-m51c8ma5y6]      { filter: brightness(1.07); transform: translateY(-1px); }
.cd-btn:not(:disabled):active[b-m51c8ma5y6]     { transform: translateY(0); }

.cd-btn--primary[b-m51c8ma5y6] { background: #0d6efd; color: #fff; }
.cd-btn--success[b-m51c8ma5y6] { background: #198754; color: #fff; }
.cd-btn--warning[b-m51c8ma5y6] { background: #fd7e14; color: #fff; }
.cd-btn--ghost[b-m51c8ma5y6]   { background: #e9ecef; color: #495057; }
.cd-btn--full[b-m51c8ma5y6]    { width: 100%; flex: none; }

.mt-1[b-m51c8ma5y6] { margin-top: .25rem; }

/* ── Status bar ─────────────────────────────────────────────────────────── */
.cd-status[b-m51c8ma5y6] {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    font-weight: 500;
    padding: .45rem .75rem;
    border-radius: 6px;
    background: #f1f3f5;
    color: #495057;
}
.cd-status--error[b-m51c8ma5y6]   { background: #fff5f5; color: #c0392b; }
.cd-status--success[b-m51c8ma5y6] { background: #f0fdf4; color: #166534; }
.cd-status--info[b-m51c8ma5y6]    { background: #eff6ff; color: #1e40af; }

/* ── MAUI native path ───────────────────────────────────────────────────── */
.cd-native[b-m51c8ma5y6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    width: 100%;
}
.cd-native-preview[b-m51c8ma5y6] {
    max-width: 240px;
    border-radius: 8px;
    border: 2px solid #dee2e6;
}
/* /Pages/Beneficiary/Assessment.razor.rz.scp.css */
.xm-empty-state[b-528yj4mq8u] { text-align: center; padding: 48px 24px; }
.xm-empty-icon[b-528yj4mq8u] { font-size: 4rem; color: var(--clr-accent); opacity: .6; margin-bottom: 16px; }
.xm-empty-title[b-528yj4mq8u] { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; letter-spacing: -.5px; color: var(--clr-text-primary); margin-bottom: 10px; }
.xm-empty-desc[b-528yj4mq8u] { color: var(--clr-text-secondary); max-width: 480px; margin: 0 auto 28px; line-height: 1.65; }
.xm-empty-actions[b-528yj4mq8u] { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

.xm-outcome[b-528yj4mq8u] { text-align: center; padding: 48px 24px; }
.xm-outcome-icon-pass[b-528yj4mq8u] { font-size: 4rem; color: var(--clr-success); margin-bottom: 16px; }
.xm-outcome-icon-fail[b-528yj4mq8u] { font-size: 4rem; color: var(--clr-danger); margin-bottom: 16px; }
.xm-outcome-title-pass[b-528yj4mq8u] { font-family: var(--font-display); font-weight: 800; color: var(--clr-success); margin-bottom: 12px; }
.xm-outcome-title-fail[b-528yj4mq8u] { font-family: var(--font-display); font-weight: 800; color: var(--clr-danger); margin-bottom: 12px; }
.xm-outcome-body[b-528yj4mq8u] { font-size: 15px; color: var(--clr-text-primary); margin-bottom: 6px; }
.xm-outcome-hint[b-528yj4mq8u] { font-size: 13px; color: var(--clr-text-muted); margin-bottom: 20px; }
.xm-outcome-btn[b-528yj4mq8u] { margin: 0 auto; }

.xm-stepper[b-528yj4mq8u] { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: #fafbfd; border-bottom: 1px solid var(--clr-card-border); }
.xm-step[b-528yj4mq8u] { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--clr-text-muted); }
.xm-step.is-active[b-528yj4mq8u] { font-weight: 700; color: var(--clr-accent); }
.xm-step.is-done[b-528yj4mq8u] { color: var(--clr-success); }
.xm-step-num[b-528yj4mq8u] { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--clr-card-border); display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; background: transparent; }
.xm-step.is-active .xm-step-num[b-528yj4mq8u] { border-color: var(--clr-accent); background: var(--clr-accent-soft); }
.xm-step.is-done .xm-step-num[b-528yj4mq8u] { border-color: var(--clr-success); background: rgba(16,185,129,.10); }
.xm-step-divider[b-528yj4mq8u] { flex: 1; height: 1px; background: var(--clr-card-border); margin: 0 6px; }

.xm-body[b-528yj4mq8u] { padding: 24px; background: #fafafa; }
.xm-step-head[b-528yj4mq8u] { border: none; padding: 0 0 16px 0; background: transparent; }

.xm-card-grid-auto[b-528yj4mq8u] { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.xm-lang-grid-auto[b-528yj4mq8u] { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }

.xm-sel-card[b-528yj4mq8u] { border: 2px solid var(--clr-card-border); border-radius: var(--radius-md); padding: 16px; cursor: pointer; background: var(--clr-card-bg); transition: var(--transition); }
.xm-sel-card.is-selected[b-528yj4mq8u] { border-color: var(--clr-accent); background: var(--clr-accent-soft); }
.xm-sel-card-title[b-528yj4mq8u] { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--clr-text-primary); margin-top: 6px; }

.xm-lang-card[b-528yj4mq8u] { border: 2px solid var(--clr-card-border); border-radius: var(--radius-md); padding: 18px; cursor: pointer; background: var(--clr-card-bg); display: flex; align-items: center; gap: 12px; transition: var(--transition); }
.xm-lang-card.is-selected[b-528yj4mq8u] { border-color: var(--clr-accent); background: var(--clr-accent-soft); }
.xm-lang-icon[b-528yj4mq8u] { font-size: 22px; color: var(--clr-text-muted); flex-shrink: 0; }
.xm-lang-card.is-selected .xm-lang-icon[b-528yj4mq8u] { color: var(--clr-accent); }
.xm-lang-name[b-528yj4mq8u] { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--clr-text-primary); }
.xm-lang-sub[b-528yj4mq8u] { font-size: 11px; color: var(--clr-text-muted); }

.xm-camera-wrap[b-528yj4mq8u] { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.xm-camera-frame[b-528yj4mq8u] { width: 100%; max-width: 420px; height: 290px; background: #0f172a; border-radius: var(--radius-lg); border: 2px dashed var(--clr-card-border); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.xm-camera-placeholder[b-528yj4mq8u] { text-align: center; color: #94a3b8; }
.xm-camera-placeholder i[b-528yj4mq8u] { font-size: 3rem; display: block; margin-bottom: 12px; }
.xm-camera-placeholder span[b-528yj4mq8u] { font-size: 13px; }
.xm-camera-captured-badge[b-528yj4mq8u] { position: absolute; bottom: 12px; right: 12px; }

.xm-auto-banner[b-528yj4mq8u] { background: rgba(245,158,11,.10); border: 1px dashed var(--clr-warning); border-radius: var(--radius-md); padding: 10px 16px; text-align: center; margin-bottom: 16px; font-size: 13px; font-weight: 600; color: #b45309; }
.xm-auto-count[b-528yj4mq8u] { font-size: 1.2rem; font-weight: 800; color: var(--clr-danger); font-family: var(--font-display); margin: 0 4px; }
.xm-instr-wrap[b-528yj4mq8u] { max-width: 680px; margin: 0 auto; }
.xm-instr-row[b-528yj4mq8u] { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--clr-card-border); }
.xm-instr-row:last-child[b-528yj4mq8u] { border-bottom: none; }
.xm-instr-icon[b-528yj4mq8u] { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.xm-instr-title[b-528yj4mq8u] { font-weight: 700; font-size: 13px; color: var(--clr-text-primary); margin-bottom: 3px; }
.xm-instr-body[b-528yj4mq8u] { font-size: 12px; color: var(--clr-text-muted); line-height: 1.5; }

.xm-assess-layout[b-528yj4mq8u] { display: grid; grid-template-columns: 1fr 290px; gap: 20px; align-items: start; }
@media (max-width: 767px) { .xm-assess-layout[b-528yj4mq8u] { grid-template-columns: 1fr; } }

.xm-q-header[b-528yj4mq8u] { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; background: #fafbfd; border-bottom: 1px solid var(--clr-card-border); }
.xm-q-timer[b-528yj4mq8u] { display: flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-md); background: rgba(239,68,68,.10); font-size: 16px; font-weight: 700; color: var(--clr-danger); font-family: var(--font-display); }
.xm-q-text[b-528yj4mq8u] { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--clr-text-primary); line-height: 1.55; margin-bottom: 20px; }

.xm-opt[b-528yj4mq8u] { display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--clr-card-border); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 10px; cursor: pointer; background: var(--clr-card-bg); transition: var(--transition); }
.xm-opt.is-selected[b-528yj4mq8u] { border-color: var(--clr-accent); background: var(--clr-accent-soft); }
.xm-opt-indicator[b-528yj4mq8u] { width: 18px; height: 18px; flex-shrink: 0; border: 2px solid var(--clr-card-border); background: transparent; display: flex; align-items: center; justify-content: center; }
.xm-opt-indicator.is-radio[b-528yj4mq8u] { border-radius: 50%; }
.xm-opt-indicator.is-check[b-528yj4mq8u] { border-radius: 4px; }
.xm-opt.is-selected .xm-opt-indicator[b-528yj4mq8u] { border-color: var(--clr-accent); background: var(--clr-accent); }
.xm-opt-text[b-528yj4mq8u] { font-size: 13px; color: var(--clr-text-primary); }
.xm-opt-actions[b-528yj4mq8u] { display: flex; gap: 8px; padding-top: 12px; border-top: 1px dashed var(--clr-card-border); }
.xm-review-btn.is-flagged[b-528yj4mq8u] { background: var(--clr-warning); border-color: var(--clr-warning); color: #fff; }

.xm-palette-header[b-528yj4mq8u] { padding: 11px 14px; border-bottom: 1px solid var(--clr-card-border); font-size: 12px; font-weight: 700; color: var(--clr-text-primary); }
.xm-palette-grid[b-528yj4mq8u] { padding: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.xm-palette-btn[b-528yj4mq8u] { width: 34px; height: 34px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; border: 1.5px solid transparent; transition: var(--transition); color: var(--clr-text-primary); background: #f1f5f9; }
.xm-palette-btn.is-current[b-528yj4mq8u] { background: var(--clr-text-primary); color: #fff; border-color: var(--clr-text-primary); }
.xm-palette-btn.is-review[b-528yj4mq8u] { background: var(--clr-warning); color: #fff; }
.xm-palette-btn.is-answered[b-528yj4mq8u] { background: var(--clr-success); color: #fff; }

.xm-legend[b-528yj4mq8u] { padding: 10px 14px; display: flex; flex-direction: column; gap: 7px; }
.xm-legend-item[b-528yj4mq8u] { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--clr-text-secondary); }
.xm-legend-dot[b-528yj4mq8u] { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; }

.xm-wizard-footer[b-528yj4mq8u] { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-top: 1px solid var(--clr-card-border); background: var(--clr-card-bg); }
.xm-submit-btn[b-528yj4mq8u] { background: var(--clr-danger) !important; border-color: var(--clr-danger) !important; width: 100%; justify-content: center; }
.xm-next-btn-final[b-528yj4mq8u] { background: var(--clr-success) !important; border-color: var(--clr-success) !important; }
/* /Pages/CenterMgr/ReAttempt.razor.rz.scp.css */
/* ── ReAttempt Cards (ra-)  —  append to axonedge.css ─────────────────── */

.ra-card-grid[b-18nec9hpil] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
    padding: 20px;
    background: #f8fafc;
}

.ra-card[b-18nec9hpil] {
    background: var(--clr-card-bg);
    border: 1.5px solid var(--clr-card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    transition: var(--transition);
    overflow: hidden;
}
.ra-card:hover[b-18nec9hpil]        { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.ra-card--selected[b-18nec9hpil]    { border-color: var(--clr-accent); box-shadow: 0 0 0 2px var(--clr-accent-soft); }

.ra-card-head[b-18nec9hpil] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    background: #fafbfd;
    border-bottom: 1px solid var(--clr-card-border);
    flex-wrap: wrap;
}

.ra-card-body[b-18nec9hpil] { padding: 14px; flex: 1; }
.ra-card-foot[b-18nec9hpil] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: #fafbfd;
    border-top: 1px solid var(--clr-card-border);
}

.ra-info-block[b-18nec9hpil] {
    background: #f8fafc;
    border: 1px solid var(--clr-card-border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}
.ra-info-label[b-18nec9hpil] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--clr-text-muted);
    margin-bottom: 4px;
}

.ra-meta-grid[b-18nec9hpil] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
}
.ra-meta-item[b-18nec9hpil] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--clr-text-secondary);
    overflow: hidden;
}
.ra-meta-item i[b-18nec9hpil] { font-size: 12px; color: var(--clr-text-muted); flex-shrink: 0; }

.ra-progress-wrap[b-18nec9hpil] { padding: 10px 12px; background: #f8fafc; border-radius: var(--radius-sm); border: 1px solid var(--clr-card-border); }
.ra-progress-label[b-18nec9hpil] { font-size: 11px; color: var(--clr-text-muted); font-weight: 600; }
.ra-progress-val[b-18nec9hpil]   { font-size: 11px; color: var(--clr-text-secondary); font-weight: 600; }

.ra-enrolled-date[b-18nec9hpil] {
    font-size: 11px;
    color: var(--clr-text-muted);
    font-family: 'Courier New', monospace;
}

.ra-grant-btn[b-18nec9hpil] {
    color: var(--clr-danger);
    border-color: rgba(239,68,68,.35);
    white-space: nowrap;
}
.ra-grant-btn:hover[b-18nec9hpil] { background: rgba(239,68,68,.08); }
/* /Pages/CenterMgr/ReTraining.razor.rz.scp.css */
/* ── ReAttempt Cards (ra-)  —  append to axonedge.css ─────────────────── */

.ra-card-grid[b-1com6h8lj3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
    padding: 20px;
    background: #f8fafc;
}

.ra-card[b-1com6h8lj3] {
    background: var(--clr-card-bg);
    border: 1.5px solid var(--clr-card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    transition: var(--transition);
    overflow: hidden;
}

    .ra-card:hover[b-1com6h8lj3] {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

.ra-card--selected[b-1com6h8lj3] {
    border-color: var(--clr-accent);
    box-shadow: 0 0 0 2px var(--clr-accent-soft);
}

.ra-card-head[b-1com6h8lj3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    background: #fafbfd;
    border-bottom: 1px solid var(--clr-card-border);
    flex-wrap: wrap;
}

.ra-card-body[b-1com6h8lj3] {
    padding: 14px;
    flex: 1;
}

.ra-card-foot[b-1com6h8lj3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: #fafbfd;
    border-top: 1px solid var(--clr-card-border);
}

.ra-info-block[b-1com6h8lj3] {
    background: #f8fafc;
    border: 1px solid var(--clr-card-border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}

.ra-info-label[b-1com6h8lj3] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--clr-text-muted);
    margin-bottom: 4px;
}

.ra-meta-grid[b-1com6h8lj3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
}

.ra-meta-item[b-1com6h8lj3] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--clr-text-secondary);
    overflow: hidden;
}

    .ra-meta-item i[b-1com6h8lj3] {
        font-size: 12px;
        color: var(--clr-text-muted);
        flex-shrink: 0;
    }

.ra-progress-wrap[b-1com6h8lj3] {
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: var(--radius-sm);
    border: 1px solid var(--clr-card-border);
}

.ra-progress-label[b-1com6h8lj3] {
    font-size: 11px;
    color: var(--clr-text-muted);
    font-weight: 600;
}

.ra-progress-val[b-1com6h8lj3] {
    font-size: 11px;
    color: var(--clr-text-secondary);
    font-weight: 600;
}

.ra-enrolled-date[b-1com6h8lj3] {
    font-size: 11px;
    color: var(--clr-text-muted);
    font-family: 'Courier New', monospace;
}

.ra-grant-btn[b-1com6h8lj3] {
    color: var(--clr-danger);
    border-color: rgba(239,68,68,.35);
    white-space: nowrap;
}

    .ra-grant-btn:hover[b-1com6h8lj3] {
        background: rgba(239,68,68,.08);
    }
/* /Pages/SchoolStaff/ReAttempt.razor.rz.scp.css */
/* ── ReAttempt Cards (ra-)  —  append to axonedge.css ─────────────────── */

.ra-card-grid[b-yfj36aiwl0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
    padding: 20px;
    background: #f8fafc;
}

.ra-card[b-yfj36aiwl0] {
    background: var(--clr-card-bg);
    border: 1.5px solid var(--clr-card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    transition: var(--transition);
    overflow: hidden;
}
.ra-card:hover[b-yfj36aiwl0]        { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.ra-card--selected[b-yfj36aiwl0]    { border-color: var(--clr-accent); box-shadow: 0 0 0 2px var(--clr-accent-soft); }

.ra-card-head[b-yfj36aiwl0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    background: #fafbfd;
    border-bottom: 1px solid var(--clr-card-border);
    flex-wrap: wrap;
}

.ra-card-body[b-yfj36aiwl0] { padding: 14px; flex: 1; }
.ra-card-foot[b-yfj36aiwl0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: #fafbfd;
    border-top: 1px solid var(--clr-card-border);
}

.ra-info-block[b-yfj36aiwl0] {
    background: #f8fafc;
    border: 1px solid var(--clr-card-border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}
.ra-info-label[b-yfj36aiwl0] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--clr-text-muted);
    margin-bottom: 4px;
}

.ra-meta-grid[b-yfj36aiwl0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
}
.ra-meta-item[b-yfj36aiwl0] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--clr-text-secondary);
    overflow: hidden;
}
.ra-meta-item i[b-yfj36aiwl0] { font-size: 12px; color: var(--clr-text-muted); flex-shrink: 0; }

.ra-progress-wrap[b-yfj36aiwl0] { padding: 10px 12px; background: #f8fafc; border-radius: var(--radius-sm); border: 1px solid var(--clr-card-border); }
.ra-progress-label[b-yfj36aiwl0] { font-size: 11px; color: var(--clr-text-muted); font-weight: 600; }
.ra-progress-val[b-yfj36aiwl0]   { font-size: 11px; color: var(--clr-text-secondary); font-weight: 600; }

.ra-enrolled-date[b-yfj36aiwl0] {
    font-size: 11px;
    color: var(--clr-text-muted);
    font-family: 'Courier New', monospace;
}

.ra-grant-btn[b-yfj36aiwl0] {
    color: var(--clr-danger);
    border-color: rgba(239,68,68,.35);
    white-space: nowrap;
}
.ra-grant-btn:hover[b-yfj36aiwl0] { background: rgba(239,68,68,.08); }
/* /Pages/SchoolStaff/ReTraining.razor.rz.scp.css */
/* ── ReAttempt Cards (ra-)  —  append to axonedge.css ─────────────────── */

.ra-card-grid[b-pk0ar2d0fo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
    padding: 20px;
    background: #f8fafc;
}

.ra-card[b-pk0ar2d0fo] {
    background: var(--clr-card-bg);
    border: 1.5px solid var(--clr-card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    transition: var(--transition);
    overflow: hidden;
}

    .ra-card:hover[b-pk0ar2d0fo] {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

.ra-card--selected[b-pk0ar2d0fo] {
    border-color: var(--clr-accent);
    box-shadow: 0 0 0 2px var(--clr-accent-soft);
}

.ra-card-head[b-pk0ar2d0fo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    background: #fafbfd;
    border-bottom: 1px solid var(--clr-card-border);
    flex-wrap: wrap;
}

.ra-card-body[b-pk0ar2d0fo] {
    padding: 14px;
    flex: 1;
}

.ra-card-foot[b-pk0ar2d0fo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: #fafbfd;
    border-top: 1px solid var(--clr-card-border);
}

.ra-info-block[b-pk0ar2d0fo] {
    background: #f8fafc;
    border: 1px solid var(--clr-card-border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}

.ra-info-label[b-pk0ar2d0fo] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--clr-text-muted);
    margin-bottom: 4px;
}

.ra-meta-grid[b-pk0ar2d0fo] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
}

.ra-meta-item[b-pk0ar2d0fo] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--clr-text-secondary);
    overflow: hidden;
}

    .ra-meta-item i[b-pk0ar2d0fo] {
        font-size: 12px;
        color: var(--clr-text-muted);
        flex-shrink: 0;
    }

.ra-progress-wrap[b-pk0ar2d0fo] {
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: var(--radius-sm);
    border: 1px solid var(--clr-card-border);
}

.ra-progress-label[b-pk0ar2d0fo] {
    font-size: 11px;
    color: var(--clr-text-muted);
    font-weight: 600;
}

.ra-progress-val[b-pk0ar2d0fo] {
    font-size: 11px;
    color: var(--clr-text-secondary);
    font-weight: 600;
}

.ra-enrolled-date[b-pk0ar2d0fo] {
    font-size: 11px;
    color: var(--clr-text-muted);
    font-family: 'Courier New', monospace;
}

.ra-grant-btn[b-pk0ar2d0fo] {
    color: var(--clr-danger);
    border-color: rgba(239,68,68,.35);
    white-space: nowrap;
}

    .ra-grant-btn:hover[b-pk0ar2d0fo] {
        background: rgba(239,68,68,.08);
    }
/* /Pages/Student/Assessment.razor.rz.scp.css */
.xm-empty-state[b-94nzy17qxc] { text-align: center; padding: 48px 24px; }
.xm-empty-icon[b-94nzy17qxc] { font-size: 4rem; color: var(--clr-accent); opacity: .6; margin-bottom: 16px; }
.xm-empty-title[b-94nzy17qxc] { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; letter-spacing: -.5px; color: var(--clr-text-primary); margin-bottom: 10px; }
.xm-empty-desc[b-94nzy17qxc] { color: var(--clr-text-secondary); max-width: 480px; margin: 0 auto 28px; line-height: 1.65; }
.xm-empty-actions[b-94nzy17qxc] { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

.xm-outcome[b-94nzy17qxc] { text-align: center; padding: 48px 24px; }
.xm-outcome-icon-pass[b-94nzy17qxc] { font-size: 4rem; color: var(--clr-success); margin-bottom: 16px; }
.xm-outcome-icon-fail[b-94nzy17qxc] { font-size: 4rem; color: var(--clr-danger); margin-bottom: 16px; }
.xm-outcome-title-pass[b-94nzy17qxc] { font-family: var(--font-display); font-weight: 800; color: var(--clr-success); margin-bottom: 12px; }
.xm-outcome-title-fail[b-94nzy17qxc] { font-family: var(--font-display); font-weight: 800; color: var(--clr-danger); margin-bottom: 12px; }
.xm-outcome-body[b-94nzy17qxc] { font-size: 15px; color: var(--clr-text-primary); margin-bottom: 6px; }
.xm-outcome-hint[b-94nzy17qxc] { font-size: 13px; color: var(--clr-text-muted); margin-bottom: 20px; }
.xm-outcome-btn[b-94nzy17qxc] { margin: 0 auto; }

.xm-stepper[b-94nzy17qxc] { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: #fafbfd; border-bottom: 1px solid var(--clr-card-border); }
.xm-step[b-94nzy17qxc] { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--clr-text-muted); }
.xm-step.is-active[b-94nzy17qxc] { font-weight: 700; color: var(--clr-accent); }
.xm-step.is-done[b-94nzy17qxc] { color: var(--clr-success); }
.xm-step-num[b-94nzy17qxc] { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--clr-card-border); display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; background: transparent; }
.xm-step.is-active .xm-step-num[b-94nzy17qxc] { border-color: var(--clr-accent); background: var(--clr-accent-soft); }
.xm-step.is-done .xm-step-num[b-94nzy17qxc] { border-color: var(--clr-success); background: rgba(16,185,129,.10); }
.xm-step-divider[b-94nzy17qxc] { flex: 1; height: 1px; background: var(--clr-card-border); margin: 0 6px; }

.xm-body[b-94nzy17qxc] { padding: 24px; background: #fafafa; }
.xm-step-head[b-94nzy17qxc] { border: none; padding: 0 0 16px 0; background: transparent; }

.xm-card-grid-auto[b-94nzy17qxc] { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.xm-lang-grid-auto[b-94nzy17qxc] { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }

.xm-sel-card[b-94nzy17qxc] { border: 2px solid var(--clr-card-border); border-radius: var(--radius-md); padding: 16px; cursor: pointer; background: var(--clr-card-bg); transition: var(--transition); }
.xm-sel-card.is-selected[b-94nzy17qxc] { border-color: var(--clr-accent); background: var(--clr-accent-soft); }
.xm-sel-card-title[b-94nzy17qxc] { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--clr-text-primary); margin-top: 6px; }

.xm-lang-card[b-94nzy17qxc] { border: 2px solid var(--clr-card-border); border-radius: var(--radius-md); padding: 18px; cursor: pointer; background: var(--clr-card-bg); display: flex; align-items: center; gap: 12px; transition: var(--transition); }
.xm-lang-card.is-selected[b-94nzy17qxc] { border-color: var(--clr-accent); background: var(--clr-accent-soft); }
.xm-lang-icon[b-94nzy17qxc] { font-size: 22px; color: var(--clr-text-muted); flex-shrink: 0; }
.xm-lang-card.is-selected .xm-lang-icon[b-94nzy17qxc] { color: var(--clr-accent); }
.xm-lang-name[b-94nzy17qxc] { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--clr-text-primary); }
.xm-lang-sub[b-94nzy17qxc] { font-size: 11px; color: var(--clr-text-muted); }

.xm-camera-wrap[b-94nzy17qxc] { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.xm-camera-frame[b-94nzy17qxc] { width: 100%; max-width: 420px; height: 290px; background: #0f172a; border-radius: var(--radius-lg); border: 2px dashed var(--clr-card-border); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.xm-camera-placeholder[b-94nzy17qxc] { text-align: center; color: #94a3b8; }
.xm-camera-placeholder i[b-94nzy17qxc] { font-size: 3rem; display: block; margin-bottom: 12px; }
.xm-camera-placeholder span[b-94nzy17qxc] { font-size: 13px; }
.xm-camera-captured-badge[b-94nzy17qxc] { position: absolute; bottom: 12px; right: 12px; }

.xm-auto-banner[b-94nzy17qxc] { background: rgba(245,158,11,.10); border: 1px dashed var(--clr-warning); border-radius: var(--radius-md); padding: 10px 16px; text-align: center; margin-bottom: 16px; font-size: 13px; font-weight: 600; color: #b45309; }
.xm-auto-count[b-94nzy17qxc] { font-size: 1.2rem; font-weight: 800; color: var(--clr-danger); font-family: var(--font-display); margin: 0 4px; }
.xm-instr-wrap[b-94nzy17qxc] { max-width: 680px; margin: 0 auto; }
.xm-instr-row[b-94nzy17qxc] { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--clr-card-border); }
.xm-instr-row:last-child[b-94nzy17qxc] { border-bottom: none; }
.xm-instr-icon[b-94nzy17qxc] { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.xm-instr-title[b-94nzy17qxc] { font-weight: 700; font-size: 13px; color: var(--clr-text-primary); margin-bottom: 3px; }
.xm-instr-body[b-94nzy17qxc] { font-size: 12px; color: var(--clr-text-muted); line-height: 1.5; }

.xm-assess-layout[b-94nzy17qxc] { display: grid; grid-template-columns: 1fr 290px; gap: 20px; align-items: start; }
@media (max-width: 767px) { .xm-assess-layout[b-94nzy17qxc] { grid-template-columns: 1fr; } }

.xm-q-header[b-94nzy17qxc] { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; background: #fafbfd; border-bottom: 1px solid var(--clr-card-border); }
.xm-q-timer[b-94nzy17qxc] { display: flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-md); background: rgba(239,68,68,.10); font-size: 16px; font-weight: 700; color: var(--clr-danger); font-family: var(--font-display); }
.xm-q-text[b-94nzy17qxc] { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--clr-text-primary); line-height: 1.55; margin-bottom: 20px; }

.xm-opt[b-94nzy17qxc] { display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--clr-card-border); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 10px; cursor: pointer; background: var(--clr-card-bg); transition: var(--transition); }
.xm-opt.is-selected[b-94nzy17qxc] { border-color: var(--clr-accent); background: var(--clr-accent-soft); }
.xm-opt-indicator[b-94nzy17qxc] { width: 18px; height: 18px; flex-shrink: 0; border: 2px solid var(--clr-card-border); background: transparent; display: flex; align-items: center; justify-content: center; }
.xm-opt-indicator.is-radio[b-94nzy17qxc] { border-radius: 50%; }
.xm-opt-indicator.is-check[b-94nzy17qxc] { border-radius: 4px; }
.xm-opt.is-selected .xm-opt-indicator[b-94nzy17qxc] { border-color: var(--clr-accent); background: var(--clr-accent); }
.xm-opt-text[b-94nzy17qxc] { font-size: 13px; color: var(--clr-text-primary); }
.xm-opt-actions[b-94nzy17qxc] { display: flex; gap: 8px; padding-top: 12px; border-top: 1px dashed var(--clr-card-border); }
.xm-review-btn.is-flagged[b-94nzy17qxc] { background: var(--clr-warning); border-color: var(--clr-warning); color: #fff; }

.xm-palette-header[b-94nzy17qxc] { padding: 11px 14px; border-bottom: 1px solid var(--clr-card-border); font-size: 12px; font-weight: 700; color: var(--clr-text-primary); }
.xm-palette-grid[b-94nzy17qxc] { padding: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.xm-palette-btn[b-94nzy17qxc] { width: 34px; height: 34px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; border: 1.5px solid transparent; transition: var(--transition); color: var(--clr-text-primary); background: #f1f5f9; }
.xm-palette-btn.is-current[b-94nzy17qxc] { background: var(--clr-text-primary); color: #fff; border-color: var(--clr-text-primary); }
.xm-palette-btn.is-review[b-94nzy17qxc] { background: var(--clr-warning); color: #fff; }
.xm-palette-btn.is-answered[b-94nzy17qxc] { background: var(--clr-success); color: #fff; }

.xm-legend[b-94nzy17qxc] { padding: 10px 14px; display: flex; flex-direction: column; gap: 7px; }
.xm-legend-item[b-94nzy17qxc] { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--clr-text-secondary); }
.xm-legend-dot[b-94nzy17qxc] { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; }

.xm-wizard-footer[b-94nzy17qxc] { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-top: 1px solid var(--clr-card-border); background: var(--clr-card-bg); }
.xm-submit-btn[b-94nzy17qxc] { background: var(--clr-danger) !important; border-color: var(--clr-danger) !important; width: 100%; justify-content: center; }
.xm-next-btn-final[b-94nzy17qxc] { background: var(--clr-success) !important; border-color: var(--clr-success) !important; }