/* CertFlow Lecturer Portal — screens unique to this portal. */

/* ===== "Happening today" card ===== */
.certflow-portal-shell .cf-lect-now  {
    background: #fff; border: 1px solid var(--cf-accent);
    border-radius: var(--cf-r-container); padding: 15px 16px; margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(var(--cf-accent-rgb), .14);
}
.certflow-portal-shell .cf-lect-now-kicker  {
    font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
    color: var(--cf-accent); font-weight: 700;
}
.certflow-portal-shell .cf-lect-now h3  { font-size: 16px; margin: 5px 0 3px; }
.certflow-portal-shell .cf-lect-now-meta  { font-size: 13px; color: #6b7280; margin-bottom: 10px; }
.certflow-portal-shell .cf-lect-now-actions  { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }

/* ===== Header: Scan QR =====
   .certflow-portal-header is justify-content: flex-start, so the action block
   needs to claim the gap itself rather than relying on space-between. */
.certflow-portal-shell .certflow-portal-header-actions { margin-left: auto; }
.certflow-portal-shell .cf-lect-checkin-link {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.certflow-portal-shell .cf-lect-checkin-link .cf-icon { width: 18px; height: 18px; }

@media (max-width: 600px) {
    /* Below this the identity block and the button stop fitting side by side;
       the button takes its own full-width row rather than squeezing the name. */
    .certflow-portal-shell .certflow-portal-header { flex-wrap: wrap; }
    .certflow-portal-shell .certflow-portal-header-actions { margin-left: 0; width: 100%; }
    .certflow-portal-shell .cf-lect-checkin-link { width: 100%; justify-content: center; }
}

/* ===== Roster checklist ===== */
.certflow-portal-shell .cf-lect-tick  {
    width: 34px; height: 34px; border-radius: 50%;
    border: 2px solid #d1d5db; color: transparent;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; flex: 0 0 34px;
}
.certflow-portal-shell tr.is-present .cf-lect-tick  { background: #16a34a; border-color: #16a34a; color: #fff; }
.certflow-portal-shell tr.is-present  { background: #f0fdf4; }
.certflow-portal-shell tr.is-pending { opacity: .75; }

.certflow-portal-shell .cf-lect-qr-chip  {
    width: 32px; height: 32px; border-radius: var(--cf-r-control);
    border: 1px solid #d8dce3; padding: 0; overflow: hidden; background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.certflow-portal-shell .cf-lect-qr-chip img  { width: 100%; height: 100%; display: block; }
.certflow-portal-shell .cf-lect-qr-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.certflow-portal-shell .cf-lect-qr-cell  { text-align: center; font-size: 12px; color: #374151; }
.certflow-portal-shell .cf-lect-qr-cell img  { width: 100%; height: auto; border: 1px solid #e5e7eb; border-radius: var(--cf-r-control); }
.certflow-portal-shell .cf-lect-qr-unavailable  {
    font-size: 11px; color: #92400e; background: #fef3c7;
    border-radius: var(--cf-r-chip); padding: 3px 7px; display: inline-block;
}

.certflow-portal-shell .cf-lect-pending-badge  { font-size: 12px; color: #92400e; font-weight: 600; }

/* ===== Documents panel =====
   Ported from the retired lecturer-portal.js onto the shared modal contract
   (.certflow-portal-modal-overlay > .certflow-portal-modal). */
.certflow-portal-shell .cf-lect-doc-item  {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 9px 0; border-top: 1px solid #f1f2f4;
}
.certflow-portal-shell .cf-lect-doc-item:first-child  { border-top: none; }
.certflow-portal-shell .cf-lect-doc-info  { min-width: 0; flex: 1 1 auto; }
.certflow-portal-shell .cf-lect-doc-name  {
    display: flex; align-items: center; gap: 6px;
    font-size: 14px; color: #1a1a2e; word-break: break-word;
}
.certflow-portal-shell .cf-lect-doc-meta  { display: block; font-size: 12px; color: #6b7280; margin-top: 2px; }
.certflow-portal-shell .cf-lect-doc-actions  { display: flex; gap: 6px; flex-wrap: wrap; }
.certflow-portal-shell .cf-lect-doc-upload  { margin-top: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* The picker is a real <button> that clicks a hidden <input type="file">, not a
   <label> wrapping one. public.css carries `.certflow-portal .certflow-portal-modal
   label { display: block; color: gray }` at (0,3,1), which outranks any button
   class and would have flattened a <label>-based picker into grey block text. */
.certflow-portal-shell .cf-lect-doc-upload-progress  { font-size: 13px; color: #6b7280; }
.certflow-portal-shell .cf-lect-doc-count  {
    font-size: 12px; color: #4b5563; background: #f3f4f6;
    border-radius: var(--cf-r-chip); padding: 1px 6px;
}

/* ===== Attendee signature (S4) =====
   The sign control shares the Attendance <td> with the tick — NOT a new
   column. On phones .is-stacked turns every <td> into one card row, and the
   schedule rules in portal.css warn that a taller roster card regresses the
   tick-down-the-list workflow; the card stays six rows. */
.certflow-portal-shell .cf-lect-att-cell  { display: inline-flex; align-items: center; gap: 8px; }
.certflow-portal-shell .cf-lect-sign  { white-space: nowrap; }
.certflow-portal-shell .cf-lect-sign .cf-icon  { width: 16px; height: 16px; }
.certflow-portal-shell .cf-lect-signed  {
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    min-height: 36px; padding: 0 10px; cursor: pointer;
    font-size: 12px; font-weight: 600; color: #166534;
    background: #dcfce7; border: 1px solid #bbf7d0; border-radius: var(--cf-r-chip);
}
.certflow-portal-shell .cf-lect-signed .cf-icon  { width: 15px; height: 15px; }

/* The signing sheet: FULL SCREEN. The phone is in the attendee's hand, so
   nothing of the roster may show. Id-qualified selectors (1,2,0) outrank the
   shared dialog's caps — portal.css max-width 520px / max-height 90vh,
   public.css 500px / 80vh / width 90% — and the ≤480px bottom-sheet rule. */
.certflow-portal-shell#cf-lect-sign-modal.certflow-portal-modal-overlay  { padding: 0; align-items: stretch; }
.certflow-portal-shell#cf-lect-sign-modal .certflow-portal-modal  {
    width: 100%; height: 100%; max-width: none; max-height: none;
    border-radius: 0; display: flex; flex-direction: column;
}
.certflow-portal-shell#cf-lect-sign-modal .certflow-portal-modal-body  { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.certflow-portal-shell .cf-lect-sign-who  { font-size: 18px; font-weight: 600; color: #1a1a2e; margin: 4px 0 6px; }
.certflow-portal-shell .cf-lect-sign-attest  { font-size: 14px; color: #374151; margin: 0 0 14px; }
/* max-width caps the BITMAP, not just the box. The sign endpoint refuses PNGs
   wider than 2400px and the pad renders at up to 2× devicePixelRatio, so a
   full-width sheet on a 1440px retina laptop would post a 2880px image.
   720 × 2 = 1440. */
.certflow-portal-shell .cf-lect-sign-pad-wrap  {
    max-width: 720px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.certflow-portal-shell .cf-lect-sign-canvas  {
    display: block; width: 100%; height: clamp(180px, 40vh, 320px);
    background: #fff; border: 1px dashed #9ca3af; border-radius: var(--cf-r-control);
    touch-action: none;   /* the finger draws; the page must not scroll under it */
}
.certflow-portal-shell .cf-lect-sign-clear  {
    background: none; border: none; box-shadow: none; padding: 6px 4px; min-height: 0;
    font-size: 13px; color: #6b7280; text-decoration: underline; cursor: pointer;
}
/* Borderless control → the same (0,3,0) rule shape as portal.css's Layer-4
   allowlist (:128-146). A base-state `border: none` at (0,2,0) does NOT hold
   against a host theme's button:hover border — .certflow-portal-modal-close
   has the identical base rule and still needed this — and without it Clear
   grows by 1px on hover/focus and shifts the row under the pad. */
.certflow-portal-shell .cf-lect-sign-clear:hover,
.certflow-portal-shell .cf-lect-sign-clear:focus  { border: 0; }
.certflow-portal-shell .cf-lect-sign-image  {
    display: block; width: 100%; height: auto; background: #fff;
    border: 1px solid #e5e7eb; border-radius: var(--cf-r-control);
}
.certflow-portal-shell .cf-lect-sign-meta  { font-size: 13px; color: #6b7280; margin: 10px 0 0; }
/* The rotate hint is in the DOM on every device and shown ONLY where it
   applies — a portrait phone. Rotating clears the pad (the bitmap is resized),
   so the attendee is told before they start, not after. */
.certflow-portal-shell .cf-lect-sign-rotate-hint  { display: none; font-size: 12px; color: #92400e; margin: 8px 0 0; }
@media (orientation: portrait) and (max-width: 480px) {
    .certflow-portal-shell .cf-lect-sign-rotate-hint  { display: block; }
}
/* While the sheet is up, the portal's OWN toasts stay hidden (an Undo from a
   tick made a moment earlier). They are position:fixed at z-index 100001 in
   the root stacking context and would float over the sheet (overlay z-index
   100000). The sheet cannot simply be raised above them: confirmDialog()
   appends to <body> at 100000 too and would then sit BEHIND the sheet it
   belongs to. Toasts the sheet raises for itself go into the overlay
   ($root: $modal) and are unaffected. */
.certflow-portal-shell.cf-lect-signing > .certflow-portal-notice  { visibility: hidden; }

/* Schedule-row actions: Roster, plus Finish where the session allows it.

   ⛔ THE FLEX LIVES ON AN INNER WRAPPER, NEVER ON THE <td>. `display: flex` on a
   table cell takes it out of the table layout algorithm — it stops sizing with
   its column, stops inheriting the row background and stops contributing to row
   height. The visible result was an actions column that overhung the table's
   right edge and painted a white block across the row tint. (The responsive
   block in portal.css DOES set `display: flex` on `td`, but only inside
   max-width: 768px, where the whole <tr> is already `display: block` and table
   layout has been abandoned on purpose. That is not a precedent for doing it at
   every width.)

   ⚠️ Specificity, checked rather than assumed: the stacked-card rule is
   `.certflow-portal-shell .certflow-portal-table-responsive.is-stacked td`
   (0,3,1), which outranks this selector (0,2,1) — so the phone layout keeps its
   `display: flex` on the cell and this rule cannot fight it.

   No `vertical-align` here: table cells already default to `middle` (the UA
   sheet gives `td` vertical-align:inherit and `table` middle), and the base
   `.certflow-portal-table td` rule does not override it. Restating it would
   imply it was doing work. */
.certflow-portal-shell td.cf-lect-row-actions {
    text-align: right;
}

/* Column, so the two buttons never crowd each other in a narrow cell, and
   `stretch` so they share one width instead of stepping raggedly. inline-flex
   keeps the group shrink-to-fit, which is what lets the cell's text-align push
   it to the right edge. */
.certflow-portal-shell .cf-lect-row-actions-inner {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.certflow-portal-shell .cf-lect-row-actions-inner .certflow-portal-btn {
    white-space: nowrap;
}

@media (max-width: 768px) {
    /* Stacked-card mode: the cell is already a flex row with its label on the
       left, so the group sits right and the buttons go back to their natural
       widths rather than stretching across the card. */
    .certflow-portal-shell .cf-lect-row-actions-inner {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
    }
}

/* ===== Finish session ===== */
/* The badge's colours come from portal.css's .certflow-portal-shell-scoped
   .certflow-portal-badge-info -- that is the rule that wins inside this portal,
   NOT public.css's bare one. Only the alignment is ours. */
.certflow-portal-shell .cf-lect-finished-badge  { align-self: center; }

/* The Finish button's busy state. portal.css already dims
   .certflow-portal-btn[disabled]; this spins the loader glyph.

   The span exists because P.icon() takes at most ONE argument here: passing a
   class as its second argument would emit a duplicate `class` attribute on the
   <svg> (the mapped markup already opens `<svg class="cf-icon"`), parsers keep
   the FIRST, and .cf-icon's width/height would be dropped -- an unsized
   spinner. So the size lives on the span and the inner svg fills it.

   ⚠️ `certflow-portal-spin` is a NEW keyframe name. The similarly-named
   `.certflow-portal-spinner` in public.css is an unrelated element class. */
.certflow-portal-shell .cf-lect-spin {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1em; height: 1em; vertical-align: -0.125em;
    animation: certflow-portal-spin 1s linear infinite;
}
.certflow-portal-shell .cf-lect-spin svg { width: 1em; height: 1em; display: block; }
@keyframes certflow-portal-spin { 100% { transform: rotate(360deg); } }

@media (max-width: 768px) {
    .certflow-portal-shell .cf-lect-now-actions .certflow-portal-btn { flex: 1 1 100%; }

    /* Export is wrapped in .certflow-portal-export-menu, so it is the WRAPPER
       that is the flex child here -- the rule above reaches the <button> inside
       it but never the box around it, which is why Export alone stayed
       content-width while every sibling went full width. */
    .certflow-portal-shell .cf-lect-now-actions .certflow-portal-export-menu { flex: 1 1 100%; }
    .certflow-portal-shell .cf-lect-now-actions .certflow-portal-export-trigger {
        width: 100%; justify-content: center;
    }
    .certflow-portal-shell .cf-lect-tick { width: 44px; height: 44px; flex-basis: 44px; }
    /* Same 44px target as the tick beside them. */
    .certflow-portal-shell .cf-lect-sign,
    .certflow-portal-shell .cf-lect-signed { min-height: 44px; }

    /* The attendance toast is position:fixed at bottom:20px and, under 480px,
       spans the full width - so it sits over roughly the bottom 65px of the
       viewport. Mid-list that is harmless (scroll the row up), but the LAST
       rows have nothing below them to scroll and would stay permanently under
       an Undo button the lecturer is trying to tap past. This reserves the
       band so the end of the roster can always be scrolled clear. */
    .certflow-portal-shell #cf-lect-roster-panel { padding-bottom: 84px; }
}