/* ═══════════════════════════════════════════════════════════
   IndoGerman Ops - styles added in 1.4
   Country picker + course rows, employee management,
   multi-file document lists.
   ═══════════════════════════════════════════════════════════ */

/* ═══════════ COUNTRY PICKER ═══════════ */

.igop-picker { padding: 8px 0 24px; }
.igop-picker-head { text-align: center; max-width: 640px; margin: 0 auto 30px; }
.igop-picker-head h1 { font-size: 2em; margin-bottom: 10px; }
.igop-picker-head p { color: var(--muted); font-size: .95em; }

.igop-country-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px;
}
.igop-country-card {
    background: #fff; border: 1px solid var(--line); border-radius: 16px;
    padding: 26px 18px; cursor: pointer; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    font-family: inherit; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.igop-country-card:hover {
    transform: translateY(-5px); border-color: var(--navy);
    box-shadow: 0 16px 32px rgba(62, 73, 115, .14);
}
.igop-country-flag { font-size: 2.6em; line-height: 1; }
.igop-country-name { font-size: 1.1em; font-weight: 800; color: var(--ink); }
.igop-country-count {
    font-size: .78em; font-weight: 700; color: var(--orange);
    background: #fff7ed; padding: 3px 12px; border-radius: 999px;
}
.igop-country-go { font-size: .82em; font-weight: 700; color: var(--navy); opacity: 0; transition: opacity .2s; }
.igop-country-card:hover .igop-country-go { opacity: 1; }

.igop-picker-all { text-align: center; margin-top: 26px; }

/* ═══════════ BROWSE BAR ═══════════ */

.igop-browse-bar {
    background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 14px 18px; margin-bottom: 16px;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.igop-browse-title { display: flex; align-items: center; gap: 9px; font-size: 1.2em; }
.igop-browse-title strong { color: var(--ink); }
.igop-browse-title span { font-size: 1.25em; line-height: 1; }
.igop-browse-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.igop-browse-right .igop-input { min-width: 190px; }

.igop-btn-clear {
    background: #fef2f2; color: var(--danger); border-color: var(--danger-border);
}
.igop-btn-clear:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

.igop-score-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.igop-score-grid-2 .igop-input { padding: 9px 11px; font-size: .85em; }

/* ═══════════ COURSE ROWS ═══════════ */

.igop-course-list { display: grid; gap: 12px; }

.igop-crow {
    background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
    display: grid; grid-template-columns: minmax(0, 1fr) 210px;
    overflow: hidden; transition: box-shadow .18s;
}
.igop-crow:hover { box-shadow: 0 10px 26px rgba(15, 23, 42, .1); }
.igop-crow.is-requested { border-left: 3px solid var(--ok); }

.igop-crow-main { padding: 18px 20px; min-width: 0; }
.igop-crow-title { font-size: 1.12em; margin-bottom: 3px; }
.igop-crow-uni { font-size: .87em; color: var(--muted); margin-bottom: 12px; }

.igop-crow-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; }
.igop-ctag {
    background: #eef2f7; color: #475569; border-radius: 8px;
    padding: 5px 11px; font-size: .78em; font-weight: 600; white-space: nowrap;
}
.igop-ctag-level { background: #e0e7ff; color: #3730a3; }

.igop-crow-tests { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.igop-ctest {
    border: 1px solid var(--line); border-radius: 8px;
    padding: 5px 11px; font-size: .76em; color: var(--muted); white-space: nowrap;
}
.igop-ctest strong { color: var(--ink); font-weight: 700; }

.igop-crow-entry {
    background: #f8fafc; border-radius: 10px; padding: 11px 14px;
    border-left: 3px solid var(--line);
}
.igop-crow-entry-label {
    display: block; font-size: .68em; font-weight: 800; letter-spacing: .5px;
    text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
}
.igop-crow-entry p { font-size: .84em; color: #475569; line-height: 1.5; }
.igop-crow-entry em { color: var(--warn); font-style: normal; font-weight: 700; }

.igop-crow-side {
    background: #f8fafc; border-left: 1px solid var(--line);
    padding: 18px 16px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 5px; text-align: center;
}
.igop-crow-fee-label {
    font-size: .66em; font-weight: 800; letter-spacing: .6px;
    text-transform: uppercase; color: var(--muted);
}
.igop-crow-fee { font-size: 1.55em; font-weight: 800; color: var(--ink); line-height: 1.15; }
.igop-crow-fee-free { font-size: 1.05em; color: var(--ok); }
.igop-crow-appfee, .igop-crow-deadline { font-size: .74em; color: var(--muted); }
.igop-crow-deadline { color: var(--warn); font-weight: 700; }

.igop-btn-apply {
    background: var(--orange); color: #fff; width: 100%; margin-top: 8px;
    padding: 12px; font-weight: 800; border: none; border-radius: 9px;
    cursor: pointer; font-family: inherit; font-size: .88em; transition: .18s;
}
.igop-btn-apply:hover { background: var(--orange-dark); transform: translateY(-1px); }

@media (max-width: 780px) {
    .igop-crow { grid-template-columns: 1fr; }
    .igop-crow-side {
        border-left: none; border-top: 1px solid var(--line);
        flex-direction: row; flex-wrap: wrap; justify-content: space-between; text-align: left;
    }
    .igop-btn-apply { width: 100%; }
    .igop-browse-right { width: 100%; margin-left: 0; }
    .igop-browse-right .igop-input { flex: 1; min-width: 0; }
}

/* ═══════════ EMPLOYEE MANAGEMENT ═══════════ */

.igop-emp-form-card { border-left: 4px solid var(--orange); }

.igop-emp-list { display: grid; gap: 12px; }

.igop-emp-card {
    background: #fff; border-radius: var(--radius); padding: 18px;
    box-shadow: var(--shadow); border-top: 3px solid var(--navy);
}
.igop-emp-card.is-flagged { border-top-color: var(--danger); }

.igop-emp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.igop-emp-id { flex: 1; min-width: 0; }
.igop-emp-id h3 { font-size: 1.02em; }

.igop-emp-meta {
    display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px;
    padding-top: 12px; border-top: 1px solid var(--line);
    font-size: .8em; color: var(--muted);
}
.igop-emp-meta a { color: var(--navy); font-weight: 600; text-decoration: underline; }

.igop-emp-actions {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}

.igop-emp-doc {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px 0; border-bottom: 1px solid #f1f5f9; flex-wrap: wrap;
}
.igop-emp-doc:last-of-type { border-bottom: none; }
.igop-emp-doc .igop-input { max-width: 230px; }

.igop-terms { display: grid; gap: 1px; background: var(--line); border-radius: 10px; overflow: hidden; }
.igop-term {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 15px; background: #fff; font-size: .87em;
}
.igop-term span { color: var(--muted); }
.igop-term strong { color: var(--ink); text-align: right; }

/* ═══════════ MULTI-FILE DOCUMENTS ═══════════ */

.igop-multi-pill { font-size: .62em; vertical-align: middle; margin-left: 5px; }

.igop-filelist { list-style: none; margin: 7px 0 0; padding: 0; display: grid; gap: 5px; }
.igop-filelist li {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: #f8fafc; border-radius: 8px; padding: 6px 11px; font-size: .8em;
}
.igop-filelist a { color: var(--navy); font-weight: 600; text-decoration: underline; }

@media (max-width: 680px) {
    .igop-emp-actions { flex-direction: column; align-items: stretch; }
    .igop-emp-actions .igop-btn { width: 100%; }
    .igop-emp-doc .igop-input { max-width: 100%; }
    .igop-country-grid { grid-template-columns: 1fr 1fr; gap: 11px; }
    .igop-country-card { padding: 18px 12px; }
    .igop-country-flag { font-size: 2.1em; }
    .igop-picker-head h1 { font-size: 1.5em; }
}

/* ═══════════ ATTENDANCE ═══════════ */

.igop-att-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.igop-att-sheet {
    position: fixed; inset: 0; z-index: 99995; background: var(--bg);
    display: flex; flex-direction: column;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.igop-att-sheet-head {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 14px 20px; background: #fff; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.igop-att-sheet-head h2 { font-size: 1.1em; }
.igop-att-sheet-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.igop-att-saved { font-size: .78em; font-weight: 700; color: var(--ok); }
.igop-att-saved.is-saving { color: var(--warn); }

.igop-att-totals {
    display: flex; gap: 10px; padding: 12px 20px; background: #fff;
    border-bottom: 1px solid var(--line); overflow-x: auto;
}
.igop-att-stat {
    background: var(--surface, #f6f8fb); border-radius: 10px; padding: 9px 16px;
    display: flex; flex-direction: column; min-width: 104px; flex-shrink: 0;
}
.igop-att-stat strong { font-size: 1.15em; font-weight: 800; color: var(--ink); line-height: 1.2; }
.igop-att-stat span { font-size: .7em; color: var(--muted); font-weight: 600; }
.igop-att-stat.is-net { background: #dcfce7; }
.igop-att-stat.is-net strong { color: var(--ok); }

.igop-att-body { flex: 1; overflow: auto; padding: 16px 20px 40px; }

.igop-att-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; font-size: .86em; }
.igop-att-table th {
    background: var(--ink); color: #fff; padding: 11px 12px; text-align: left;
    font-size: .8em; text-transform: uppercase; letter-spacing: .4px;
    position: sticky; top: 0; z-index: 2;
}
.igop-att-table td { padding: 7px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.igop-att-table input, .igop-att-table select {
    width: 100%; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px;
    font-family: inherit; font-size: .95em; background: #fff; color: var(--ink);
}
.igop-att-table input:focus, .igop-att-table select:focus {
    outline: none; border-color: var(--navy); box-shadow: 0 0 0 2px rgba(62,73,115,.12);
}
.igop-att-table input:disabled, .igop-att-table select:disabled { background: #f1f5f9; color: var(--muted); }

.igop-att-row.is-leave { background: #fffbeb; }
.igop-att-row.is-holiday { background: #eff6ff; }
.igop-att-date { font-weight: 700; white-space: nowrap; }
.igop-att-day, .igop-att-shift { color: var(--muted); white-space: nowrap; font-size: .92em; }
.igop-att-short { font-weight: 700; color: var(--danger); white-space: nowrap; }

/* ── Report card ── */
.igop-modal-wide { max-width: 760px; }

.igop-attcard-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.igop-attcard-score { text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.igop-attdonut {
    width: 84px; height: 84px; border-radius: 50%;
    background: conic-gradient(var(--perf) calc(var(--pct) * 1%), #e6e9ef 0);
    display: flex; align-items: center; justify-content: center; position: relative;
}
.igop-attdonut::before { content: ''; position: absolute; inset: 9px; background: #fff; border-radius: 50%; }
.igop-attdonut span { position: relative; font-weight: 800; font-size: 1.05em; color: var(--ink); }

.igop-attcard-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.igop-attcard-stats div { background: #f6f8fb; border-radius: 10px; padding: 12px; text-align: center; }
.igop-attcard-stats span { display: block; font-size: 1.3em; font-weight: 800; color: var(--ink); }
.igop-attcard-stats em { font-size: .68em; color: var(--muted); font-style: normal; font-weight: 600; }

.igop-attstrip { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.igop-attday {
    width: 26px; height: 26px; border-radius: 6px; display: inline-flex;
    align-items: center; justify-content: center; font-size: .62em; font-weight: 700; color: #fff;
}
.igop-attday.is-ok { background: #22c55e; }
.igop-attday.is-short { background: #f59e0b; }
.igop-attday.is-leave { background: #ef4444; }
.igop-attday.is-holiday { background: #3b82f6; }
.igop-attlegend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .72em; color: var(--muted); margin-bottom: 18px; }
.igop-attlegend .igop-attday { width: 13px; height: 13px; margin-left: 8px; }

.igop-attpay { border-top: 1px solid var(--line); padding-top: 16px; }
.igop-attpay h4 { font-size: .95em; margin-bottom: 10px; }
.igop-attpay-rows { display: grid; gap: 1px; background: var(--line); border-radius: 10px; overflow: hidden; }
.igop-attpay-rows > div {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px 14px; background: #fff; font-size: .87em;
}
.igop-attpay-rows span { color: var(--muted); }
.igop-attpay-net { background: #f0fdf4 !important; }
.igop-attpay-net strong { color: var(--ok); font-size: 1.15em; }
.igop-attpay-bank { margin-top: 10px; }
.igop-attcard-actions { display: flex; gap: 9px; margin-top: 18px; flex-wrap: wrap; }

@media (max-width: 780px) {
    .igop-att-table { font-size: .8em; min-width: 720px; }
    .igop-att-body { padding: 12px; }
    .igop-attcard-stats { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   PRINTING THE ATTENDANCE CARD

   The card lives inside a modal, and that modal carries
   `max-height: 90vh; overflow-y: auto`. On screen that is right; on paper it
   CLIPS — everything below the fold is simply cut away, which is why the salary
   section never printed and the page stopped part-way through the day strip.
   Every ancestor therefore has its height and overflow released here.

   The layout is also tightened so a full cycle fits one A4 sheet rather than
   spilling a few rows onto a second page.
   ═══════════════════════════════════════════════════════════ */

@media print {
    @page { size: A4 portrait; margin: 10mm 12mm; }

    body * { visibility: hidden !important; }
    #igop-attcard-print, #igop-attcard-print * { visibility: visible !important; }

    /* Release every wrapper between the page and the card. Without this the
       modal's own scroll box decides how much of the card reaches the printer. */
    html, body,
    .igop-modal-backdrop,
    .igop-modal,
    .igop-modal-wide,
    #igop-att-card-modal,
    #igop-att-card-body {
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        position: static !important;
        background: #fff !important;
        backdrop-filter: none !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        display: block !important;
        animation: none !important;
    }

    #igop-attcard-print {
        position: absolute !important;
        left: 0; top: 0; width: 100%;
        padding: 0 !important;
        font-size: 10.2pt;
        color: #16203a;
    }

    .igop-noprint { display: none !important; }

    /* ── Fit one page ── */
    .igop-attcard-head { margin-bottom: 8px !important; }
    .igop-attcard-head h3 { font-size: 16pt !important; }

    .igop-attcard-score { transform: scale(.82); transform-origin: right center; }

    .igop-attcard-stats {
        display: grid !important; grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important; margin: 8px 0 !important;
    }
    .igop-attcard-stats > div { padding: 9px 11px !important; }
    .igop-attcard-stats > div span { font-size: 15pt !important; }
    .igop-attcard-stats > div em { font-size: 8pt !important; }

    .igop-attstrip { gap: 3px !important; margin: 8px 0 4px !important; }
    .igop-attday { width: 21px !important; height: 21px !important; font-size: 7.4pt !important; }
    .igop-attlegend { font-size: 8pt !important; margin-bottom: 10px !important; }

    .igop-atthours { margin: 8px 0 !important; }
    .igop-atthours h4 { font-size: 11.5pt !important; margin-bottom: 6px !important; }
    .igop-atthours-sub { margin: 9px 0 4px !important; font-size: 7.6pt !important; }
    .igop-atthours-row { padding: 8px 12px !important; }
    .igop-atthours-row.is-small { padding: 6px 12px !important; }
    .igop-atthours-row > span { font-size: 9.4pt !important; }
    .igop-atthours-row > span em { font-size: 8.1pt !important; }
    .igop-atthours-row > strong { font-size: 10.2pt !important; }
    .igop-atthours-note { font-size: 8.1pt !important; margin-top: 8px !important; }

    .igop-attpay { margin-top: 10px !important; }
    .igop-attpay h4 { font-size: 11.5pt !important; margin-bottom: 6px !important; }
    .igop-attpay-rows > div { padding: 7px 0 !important; font-size: 9.4pt !important; }
    .igop-attpay-rows > div > span em { font-size: 8.1pt !important; }
    .igop-attpay-sum { padding: 7px 0 3px !important; }
    .igop-attpay .igop-alert { font-size: 8.6pt !important; padding: 9px 11px !important; margin-top: 9px !important; }

    /* Never split a block across the fold. */
    .igop-attcard-head,
    .igop-attcard-stats,
    .igop-attstrip,
    .igop-atthours,
    .igop-atthours-grid,
    .igop-attpay { page-break-inside: avoid; break-inside: avoid; }

    /* Backgrounds and the score ring must survive the printer. */
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}

/* ═══════════════════════════════════════════════════════════
   [hidden] MUST WIN
   The browser hides [hidden] elements with `display: none`, but that is a
   user-agent rule and ANY author `display:` beats it. Several components here
   set `display: flex`, so `element.hidden = true` silently did nothing — the
   attendance sheet stayed on screen and refused to close.
   Scoped to this plugin's own containers so the theme is untouched.
   ═══════════════════════════════════════════════════════════ */

.igop [hidden],
.igop[hidden],
.igop-chat [hidden],
.igop-chat[hidden],
.igop-att-sheet[hidden] {
    display: none !important;
}

/* ═══════════ CLICKABLE STAT + TASK MANAGER ═══════════ */

.igop-stat-btn {
    text-align: center; padding: 9px 4px; background: #f8fafc;
    border: none; border-radius: 9px; cursor: pointer; font-family: inherit;
    transition: .16s; position: relative;
}
.igop-stat-btn:hover { background: var(--navy); }
.igop-stat-btn:hover span, .igop-stat-btn:hover em { color: #fff; }
.igop-stat-btn span { display: block; font-size: 1.15em; font-weight: 800; color: var(--ink); }
.igop-stat-btn em { font-size: .68em; color: var(--muted); font-style: normal; font-weight: 600; }
.igop-stat-btn.is-danger { background: var(--danger-bg); }
.igop-stat-btn.is-danger span { color: var(--danger); }
.igop-stat-btn.is-danger:hover { background: var(--danger); }

.igop-tm-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 14px; margin-bottom: 14px; flex-wrap: wrap;
}
.igop-tm-head h3 { font-size: 1.1em; }

.igop-tm-bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 11px 13px; background: #f8fafc; border-radius: 10px; margin-bottom: 12px;
}
.igop-tm-bar .igop-check { margin: 0; }
.igop-tm-bulk { margin-left: auto; display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.igop-tm-bulk .igop-input { min-width: 150px; }
.igop-tm-count { font-weight: 700; }

.igop-tm-list { display: grid; gap: 7px; max-height: 46vh; overflow-y: auto; padding-right: 3px; }

.igop-tm-row {
    display: flex; align-items: flex-start; gap: 11px;
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
    padding: 11px 13px; transition: .16s;
}
.igop-tm-row:hover { border-color: var(--navy); }
.igop-tm-row.is-late { border-left: 3px solid var(--danger); }
.igop-tm-pick { flex-shrink: 0; padding-top: 2px; }
.igop-tm-body { flex: 1; min-width: 0; }
.igop-tm-title { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 3px; }
.igop-tm-title strong { font-size: .9em; }
.igop-tm-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: .76em; color: var(--muted); }
.igop-tm-actions { flex-shrink: 0; display: flex; gap: 10px; align-items: center; }

.igop-tm-editor {
    margin-top: 14px; padding-top: 14px; border-top: 2px solid var(--line);
}

@media (max-width: 680px) {
    .igop-tm-bulk { margin-left: 0; width: 100%; }
    .igop-tm-bulk .igop-input, .igop-tm-bulk .igop-btn { flex: 1; }
    .igop-tm-row { flex-wrap: wrap; }
    .igop-tm-actions { width: 100%; padding-left: 28px; }
    .igop-tm-list { max-height: 52vh; }
}

/* ═══════════ COURSE MANAGER — YES/NO FIELDS ═══════════ */

.igop-checkrow {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 4px 18px; margin: 6px 0 18px;
}
.igop-checkbox {
    display: flex; align-items: center; gap: 9px; cursor: pointer;
    font-size: .88em; color: var(--body); padding: 8px 0;
}
.igop-checkbox input {
    width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--orange); cursor: pointer;
}
.igop-checkbox:hover span { color: var(--ink); }

/* ═══════════ COLLAPSIBLE HELP ═══════════ */

.igop-help {
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--surface, #f6f8fb); margin: 4px 0 20px;
}
.igop-help > summary {
    cursor: pointer; padding: 12px 16px; font-size: .88em; font-weight: 700;
    color: var(--navy); list-style: none;
}
.igop-help > summary::-webkit-details-marker { display: none; }
.igop-help > summary::before { content: '▸ '; display: inline-block; transition: transform .16s; }
.igop-help[open] > summary::before { content: '▾ '; }
.igop-help > summary:hover { color: var(--ink); }

.igop-help-list {
    list-style: disc; padding: 0 20px 16px 36px; margin: 0;
    font-size: .84em; color: var(--body); line-height: 1.6;
}
.igop-help-list li { margin-bottom: 7px; }
.igop-help-list code {
    background: #fff; border: 1px solid var(--line); border-radius: 4px;
    padding: 1px 5px; font-size: .92em;
}

/* Neutral, informational variant of the alert box. */
.igop-alert-info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.igop-alert-info a { color: #1d4ed8; font-weight: 700; }

/* Resolved level group shown beside the raw wording in the course list. */
.igop-lvltag {
    display: inline-block; margin-top: 3px; padding: 2px 8px; border-radius: 999px;
    font-size: .72em; font-weight: 800; letter-spacing: .01em;
    background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-border);
}
.igop-lvltag.is-none {
    background: var(--warn-bg); color: #92400e; border-color: var(--warn-border);
    cursor: help;
}

/* ═══════════════════════════════════════════════════════════
   POSTING AN UPDATE  (employee → student)
   Composer, picture thumbnails, and the visibility switch.
   ═══════════════════════════════════════════════════════════ */

.igop-note-previews {
    display: flex; flex-wrap: wrap; gap: 9px; margin: 11px 0 4px;
}
.igop-note-thumb {
    position: relative; width: 78px; height: 78px; border-radius: 10px;
    overflow: hidden; border: 1px solid var(--line); background: #f6f8fb; flex-shrink: 0;
}
.igop-note-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.igop-note-thumb-x {
    position: absolute; top: 3px; right: 3px; width: 21px; height: 21px;
    border: none; border-radius: 50%; background: rgba(15, 23, 42, .78); color: #fff;
    font-family: inherit; font-size: 15px; line-height: 1; cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.igop-note-thumb-x:hover { background: var(--danger); }

.igop-note-actions {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 11px;
}
.igop-note-actions .igop-note-save { margin-left: auto; }

.igop-note-attach {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    padding: 8px 13px; border-radius: 9px; border: 1px dashed var(--line);
    font-size: .82em; font-weight: 700; color: var(--body); transition: .16s;
}
.igop-note-attach:hover { border-color: var(--navy); color: var(--navy); background: #f8fafc; }

.igop-note-share {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    font-size: .84em; font-weight: 600; color: var(--body);
}
.igop-note-share input {
    width: 16px; height: 16px; accent-color: var(--orange); cursor: pointer; flex-shrink: 0;
}
.igop-note-share:hover span { color: var(--ink); }

.igop-note-hint { margin-top: 9px; line-height: 1.5; }

/* Pictures attached to a timeline entry */
.igop-tl-shots { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 4px; }
.igop-tl-shot {
    display: block; width: 74px; height: 74px; border-radius: 9px; overflow: hidden;
    border: 1px solid var(--line); transition: transform .15s, box-shadow .15s;
}
.igop-tl-shot:hover { transform: scale(1.05); box-shadow: 0 6px 16px rgba(15, 23, 42, .16); }
.igop-tl-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Who can see this entry */
.igop-seen-tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .92em; font-weight: 700; color: var(--muted);
}
.igop-seen-tag.is-shared { color: var(--ok); }

/* ═══════════ STUDENT SIDE — the update feed ═══════════ */

.igop-feed { display: grid; gap: 12px; margin-bottom: 26px; }

.igop-feed-item {
    background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--navy);
    border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow);
}
.igop-feed-head { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; }
.igop-feed-avatar {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    background: var(--navy); color: #fff; font-size: .76em; font-weight: 800;
    display: flex; align-items: center; justify-content: center; letter-spacing: .02em;
}
.igop-feed-head strong { display: block; font-size: .9em; color: var(--ink); line-height: 1.3; }
.igop-feed-when { font-size: .76em; color: var(--muted); }

.igop-feed-text { font-size: .9em; color: var(--body); line-height: 1.6; margin: 0; }

.igop-feed-shots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.igop-feed-shot {
    display: block; width: 108px; height: 108px; border-radius: 10px; overflow: hidden;
    border: 1px solid var(--line); transition: transform .15s, box-shadow .15s;
}
.igop-feed-shot:hover { transform: scale(1.04); box-shadow: 0 8px 20px rgba(15, 23, 42, .16); }
.igop-feed-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 680px) {
    .igop-note-actions .igop-note-save { margin-left: 0; width: 100%; }
    .igop-feed-shot { width: calc(50% - 4px); height: 130px; }
}

/* Informational toast (neither success nor failure). */
.igop-toast.is-info { background: var(--navy); }

/* ═══════════════════════════════════════════════════════════
   STUDENT UPDATES — SLIDE-OUT PANEL
   Kept out of the page flow so a growing list of updates never
   pushes the applications further down the page.
   ═══════════════════════════════════════════════════════════ */

.igop-updates-tab {
    position: fixed; right: 0; top: 42%; z-index: 1200;
    display: flex; align-items: center; gap: 8px;
    padding: 13px 15px 13px 17px;
    border: none; border-radius: 12px 0 0 12px;
    background: var(--ink); color: #fff; cursor: pointer;
    font-family: inherit; font-size: .84em; font-weight: 700;
    box-shadow: -4px 4px 18px rgba(15, 23, 42, .22);
    transition: background .16s, transform .16s, padding-right .16s;
}
.igop-updates-tab:hover { background: var(--navy); padding-right: 20px; }
.igop-updates-tab.has-new { background: var(--orange); }
.igop-updates-tab-icon { font-size: 1.05em; line-height: 1; }

.igop-updates-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: #fff; color: var(--danger); font-size: .78em; font-weight: 800;
}
.igop-updates-tab.has-new .igop-updates-count { animation: igop-pop .35s ease-out; }
@keyframes igop-pop { 0% { transform: scale(.5); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }

.igop-updates-backdrop {
    position: fixed; inset: 0; z-index: 1210;
    background: rgba(15, 23, 42, .45);
    opacity: 0; visibility: hidden; transition: opacity .22s, visibility .22s;
}
.igop-updates-backdrop.is-open { opacity: 1; visibility: visible; }

.igop-updates-panel {
    position: fixed; top: 0; right: 0; z-index: 1220;
    width: 430px; max-width: 92vw; height: 100vh;
    background: var(--surface, #f6f8fb);
    display: flex; flex-direction: column;
    box-shadow: -10px 0 40px rgba(15, 23, 42, .2);
    transform: translateX(102%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.igop-updates-panel.is-open { transform: translateX(0); }

.igop-updates-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 20px 22px 16px; background: #fff; border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}
.igop-updates-head h2 { font-size: 1.02em; color: var(--ink); margin: 0 0 3px; }

.igop-updates-close {
    width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px;
    border: 1px solid var(--line); background: #fff; color: var(--body);
    font-family: inherit; font-size: 22px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: .16s;
}
.igop-updates-close:hover { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }

.igop-updates-body {
    flex: 1; overflow-y: auto; padding: 18px;
    display: grid; gap: 12px; align-content: start;
}

/* An update that arrived since the panel was last opened. */
.igop-feed-item.is-new { border-left-color: var(--orange); background: #fffdf7; }
.igop-feed-new {
    margin-left: auto; align-self: flex-start; flex-shrink: 0;
    background: var(--orange); color: #fff; border-radius: 999px;
    padding: 2px 9px; font-size: .68em; font-weight: 800; letter-spacing: .03em;
}

@media (max-width: 680px) {
    .igop-updates-tab {
        top: auto; bottom: 84px; border-radius: 12px 0 0 12px; padding: 11px 13px;
    }
    .igop-updates-tab-label { display: none; }
    .igop-updates-panel { width: 100%; max-width: 100%; }
}

/* ═══════════ LIVE ACTIVITY NUDGE ═══════════
   Task lists and timelines get edited in place, so they are never swapped out
   underneath someone. They are told instead, and refresh when it suits them. */

.igop-livebar {
    position: fixed; left: 50%; bottom: 22px; z-index: 1150;
    display: flex; align-items: center; gap: 12px;
    padding: 11px 12px 11px 18px; border-radius: 12px;
    background: var(--ink); color: #fff; font-size: .85em; font-weight: 600;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .3);
    transform: translate(-50%, 140%); transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    max-width: calc(100vw - 32px);
}
.igop-livebar.is-up { transform: translate(-50%, 0); }

.igop-livebar-go {
    border: none; border-radius: 8px; padding: 7px 14px; cursor: pointer;
    background: #fff; color: var(--ink); font-family: inherit;
    font-size: .95em; font-weight: 800; white-space: nowrap; transition: .15s;
}
.igop-livebar-go:hover { background: var(--orange); color: #fff; }

.igop-livebar-x {
    border: none; background: none; color: rgba(255, 255, 255, .65);
    font-family: inherit; font-size: 20px; line-height: 1; cursor: pointer;
    padding: 0 4px; transition: color .15s;
}
.igop-livebar-x:hover { color: #fff; }

/* ═══════════ DOCUMENT SECTION — BULK CONTROL ═══════════ */

/* The heading now carries a section-level action, so the title and the button
   sit at opposite ends rather than the button trailing the text. */
.igop-doc-group h4 > span:first-child {
    display: inline-flex; align-items: center; gap: 8px; min-width: 0;
}

.igop-doc-group-btn {
    margin-left: auto; flex-shrink: 0; white-space: nowrap;
    font-size: .95em; font-weight: 700;
}

@media (max-width: 560px) {
    .igop-doc-group h4 { flex-wrap: wrap; gap: 6px; }
    .igop-doc-group-btn { margin-left: 0; }
}

/* ═══════════ CATALOGUE SWITCH (public / internal) ═══════════ */

.igop-catswitch {
    display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 14px;
    background: var(--surface, #f1f5f9); border-radius: 11px;
}
.igop-catbtn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: 8px; text-decoration: none;
    font-size: .86em; font-weight: 700; color: var(--body); transition: .16s;
}
.igop-catbtn:hover { background: rgba(255, 255, 255, .7); color: var(--ink); }
.igop-catbtn span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: #e2e8f0; color: var(--muted); font-size: .82em; font-weight: 800;
}
.igop-catbtn.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(15, 23, 42, .1); }
.igop-catbtn.is-active span { background: var(--navy); color: #fff; }

/* ═══════════ MULTI-ASSIGNMENT (up to 3 per student) ═══════════ */

.igop-assign-set { display: grid; gap: 4px; min-width: 160px; }
.igop-assign-set .igop-assign-select { width: 100%; }
.igop-assign-set .igop-assign-select[data-slot="1"],
.igop-assign-set .igop-assign-select[data-slot="2"] {
    /* Support slots read as secondary to the main counsellor above them. */
    font-size: .92em; opacity: .85;
}
.igop-assign-set .igop-assign-select[data-slot="1"]:focus,
.igop-assign-set .igop-assign-select[data-slot="2"]:focus { opacity: 1; }

/* ═══════════ STAFF NAV BAR ═══════════ */

.igop-navbar {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    flex-wrap: wrap; padding: 9px 14px; margin-bottom: 14px;
    background: var(--ink); border-radius: 11px;
}
.igop-navbar-links, .igop-navbar-user { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.igop-navbar-user { gap: 12px; }
.igop-navbar-user .igop-muted { color: rgba(255, 255, 255, .6); }

.igop-navlink {
    display: inline-flex; align-items: center; padding: 7px 13px; border-radius: 8px;
    color: rgba(255, 255, 255, .82); text-decoration: none;
    font-size: .84em; font-weight: 600; transition: .15s; white-space: nowrap;
}
.igop-navlink:hover { background: rgba(255, 255, 255, .13); color: #fff; }
.igop-navlink-out {
    background: rgba(255, 255, 255, .1); color: #fff;
}
.igop-navlink-out:hover { background: var(--danger); }

.igop-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ═══════════ EVERY-STUDENT ROSTER ═══════════ */

.igop-roster td { vertical-align: middle; }
.igop-roster-actions { display: flex; align-items: center; gap: 10px; }

.igop-mini-prog {
    height: 6px; border-radius: 999px; background: #e8edf5; overflow: hidden; margin-bottom: 3px;
}
.igop-mini-prog i { display: block; height: 100%; background: var(--navy); border-radius: 999px; }
.igop-mini-prog i.is-ok { background: var(--ok); }

.igop-sp-head-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.igop-cv-print { white-space: nowrap; }

@media (max-width: 680px) {
    .igop-navbar { padding: 8px 10px; }
    .igop-navlink { padding: 6px 10px; font-size: .8em; }
    .igop-roster-actions { flex-direction: column; align-items: flex-start; gap: 5px; }
}

/* ═══════════ SHIFT NOTICES ═══════════ */

.igop-shiftnotes { display: grid; gap: 9px; margin-bottom: 16px; }

.igop-shiftnote {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 14px 16px; border-radius: 11px;
    border: 1px solid var(--line); border-left: 4px solid var(--navy);
    background: #fff; box-shadow: var(--shadow);
}
.igop-shiftnote.is-good { border-left-color: var(--ok);     background: var(--ok-bg); border-color: var(--ok-border); }
.igop-shiftnote.is-warn { border-left-color: var(--orange); background: var(--warn-bg); border-color: var(--warn-border); }

.igop-shiftnote-body { flex: 1; min-width: 0; }
.igop-shiftnote-body strong { display: block; color: var(--ink); font-size: .96em; margin-bottom: 3px; }
.igop-shiftnote-body p { margin: 0; font-size: .86em; color: var(--body); line-height: 1.5; }

.igop-shiftnote-acts { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.igop-shiftnote-x {
    border: none; background: none; color: var(--muted); cursor: pointer;
    font-family: inherit; font-size: 20px; line-height: 1; padding: 0 4px; transition: color .15s;
}
.igop-shiftnote-x:hover { color: var(--danger); }

/* ═══════════ COMPLETED WORK ═══════════ */

.igop-filterbar {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 14px;
}
.igop-ffield { display: flex; flex-direction: column; gap: 3px; min-width: 118px; }
.igop-ffield-wide { flex: 1; min-width: 190px; }
.igop-ffield .igop-label { margin: 0; }

.igop-done-stats { margin-bottom: 14px; }
.igop-done-list { display: grid; gap: 8px; }

.igop-done {
    display: flex; gap: 12px; padding: 13px 16px;
    background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--ok);
    border-radius: 10px;
}
.igop-done.is-late { border-left-color: var(--danger); }
.igop-done-main { flex: 1; min-width: 0; }
.igop-done-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.igop-done-top h4 { font-size: .95em; color: var(--ink); margin: 0; }
.igop-done-note { font-size: .85em; color: var(--body); margin: 3px 0 5px; line-height: 1.5; }
.igop-done-meta {
    display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .78em; color: var(--muted);
}
.igop-done-meta a { color: var(--navy); font-weight: 700; }

/* ═══════════ GRIEVANCES ═══════════ */

.igop-griev-list { display: grid; gap: 12px; }

.igop-griev {
    background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--muted);
    border-radius: 11px; padding: 15px 17px;
}
.igop-griev-open        { border-left-color: var(--orange); }
.igop-griev-in_progress { border-left-color: var(--navy); }
.igop-griev-resolved    { border-left-color: var(--ok); }
.igop-griev-declined    { border-left-color: var(--line); opacity: .78; }

.igop-griev-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.igop-griev-head h4 { font-size: .97em; color: var(--ink); margin: 0 0 2px; }

.igop-griev-status {
    flex-shrink: 0; padding: 3px 11px; border-radius: 999px;
    font-size: .74em; font-weight: 800; letter-spacing: .02em;
    background: #f1f5f9; color: var(--muted);
}
.igop-griev-status.is-open        { background: var(--warn-bg); color: #b45309; }
.igop-griev-status.is-in_progress { background: #eef2ff; color: var(--navy); }
.igop-griev-status.is-resolved    { background: var(--ok-bg); color: var(--ok); }

.igop-griev-body { font-size: .87em; color: var(--body); line-height: 1.6; margin: 9px 0 0; }

.igop-griev-shots { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.igop-griev-shot {
    display: block; width: 84px; height: 84px; border-radius: 9px; overflow: hidden;
    border: 1px solid var(--line); transition: transform .15s;
}
.igop-griev-shot:hover { transform: scale(1.06); }
.igop-griev-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.igop-griev-reply {
    margin-top: 12px; padding: 11px 13px; border-radius: 9px;
    background: var(--surface, #f6f8fb); border-left: 3px solid var(--navy);
}
.igop-griev-reply-lab {
    display: block; font-size: .72em; font-weight: 800; letter-spacing: .07em;
    text-transform: uppercase; color: var(--navy); margin-bottom: 4px;
}
.igop-griev-reply p { margin: 0 0 3px; font-size: .87em; color: var(--body); line-height: 1.55; }

.igop-griev-form { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.igop-griev-actions { display: flex; gap: 9px; margin-top: 8px; flex-wrap: wrap; }
.igop-griev-actions select { max-width: 190px; }

@media (max-width: 680px) {
    .igop-shiftnote { flex-direction: column; gap: 10px; }
    .igop-shiftnote-acts { width: 100%; justify-content: space-between; }
    .igop-ffield, .igop-ffield-wide { min-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   LEADERBOARD
   ═══════════════════════════════════════════════════════════ */

.igop-lb-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 14px; margin-bottom: 16px;
}
.igop-lb-head h2 { font-size: 1.2em; color: var(--ink); margin: 0 0 2px; }
.igop-lb-note { line-height: 1.55; margin: 10px 0; }

/* Your own standing, above the table */
.igop-lb-mine {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 18px; border-radius: 12px; margin-bottom: 14px;
    border: 1px solid var(--line); border-left: 4px solid var(--navy); background: #fff;
}
.igop-lb-mine.is-gold { border-left-color: #d97706; background: #fffbeb; border-color: #fcd34d; }
.igop-lb-mine.is-good { border-left-color: var(--ok); background: var(--ok-bg); border-color: var(--ok-border); }
.igop-lb-mine.is-ok   { border-left-color: var(--navy); background: #f8fafc; }
.igop-lb-mine.is-warn { border-left-color: var(--orange); background: var(--warn-bg); border-color: var(--warn-border); }
.igop-lb-mine.is-bad  { border-left-color: var(--danger); background: var(--danger-bg); border-color: var(--danger-border); }

.igop-lb-mine-pos {
    width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%;
    background: var(--ink); color: #fff; font-size: 1.5em; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.igop-lb-mine.is-gold .igop-lb-mine-pos { background: #d97706; }
.igop-lb-mine.is-bad  .igop-lb-mine-pos { background: var(--danger); }
.igop-lb-mine > div:nth-child(2) { flex: 1; min-width: 0; }
.igop-lb-mine strong { display: block; color: var(--ink); font-size: 1.02em; margin-bottom: 3px; }
.igop-lb-mine p { margin: 0; font-size: .87em; color: var(--body); line-height: 1.55; }

.igop-lb-mine-score { text-align: center; flex-shrink: 0; }
.igop-lb-mine-score span { display: block; font-size: 1.5em; font-weight: 800; color: var(--ink); }
.igop-lb-mine-score em { font-style: normal; font-size: .7em; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* The table */
.igop-lb-table th { font-size: .74em; vertical-align: bottom; }
.igop-lb-table .igop-lb-fcol { text-align: center; width: 74px; }
.igop-lb-table th.igop-lb-fcol span {
    display: block; font-weight: 600; opacity: .65; font-size: .9em; margin-top: 2px;
}
.igop-lb-table tr.is-me td { background: #eef2ff; }
.igop-lb-table tr.is-me strong { color: var(--navy); }

.igop-lb-rank {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: #eef2f7; color: var(--body); font-weight: 800; font-size: .86em;
}
.igop-lb-rank.is-top { color: #fff; }
.igop-lb-rank.is-r1 { background: #d97706; }
.igop-lb-rank.is-r2 { background: #64748b; }
.igop-lb-rank.is-r3 { background: #a16207; }

.igop-lb-who { display: flex; align-items: center; gap: 10px; }
.igop-lb-who strong { display: block; font-size: .9em; color: var(--ink); }
.igop-lb-score { font-size: 1.02em; color: var(--ink); }

.igop-lb-cell {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; padding: 3px 7px; border-radius: 6px;
    font-size: .82em; font-weight: 800;
}
.igop-lb-cell.is-good { background: var(--ok-bg); color: var(--ok); }
.igop-lb-cell.is-mid  { background: var(--warn-bg); color: #b45309; }
.igop-lb-cell.is-bad  { background: var(--danger-bg); color: var(--danger); }
.igop-lb-na { color: #cbd5e1; font-size: .8em; }

/* The once-a-day card */
.igop-rank-card { max-width: 440px; text-align: center; }
.igop-rank-badge {
    width: 78px; height: 78px; margin: 0 auto 16px; border-radius: 50%;
    background: var(--ink); color: #fff; font-size: 2.1em; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.igop-rank-badge.is-gold { background: #d97706; }
.igop-rank-badge.is-good { background: var(--ok); }
.igop-rank-badge.is-ok   { background: var(--navy); }
.igop-rank-badge.is-warn { background: var(--orange); }
.igop-rank-badge.is-bad  { background: var(--danger); }
.igop-rank-card h2 { font-size: 1.28em; color: var(--ink); margin: 0 0 8px; }
.igop-rank-card p { font-size: .92em; color: var(--body); line-height: 1.6; margin: 0 0 6px; }
.igop-rank-card .igop-modal-actions { justify-content: center; margin-top: 20px; }

button.igop-navlink { border: none; font-family: inherit; cursor: pointer; }

@media (max-width: 900px) {
    /* The seven factor columns are the detail; the standing is the point.
       Hiding them leaves three columns, which then need no min-width and so
       no sideways scrolling on a phone. */
    .igop-lb-table .igop-lb-fcol { display: none; }
    .igop-lb-table { min-width: 0; }
    .igop-lb-mine { flex-wrap: wrap; }
    .igop-lb-mine > div:nth-child(2) { flex-basis: 100%; order: 3; }
}

/* ═══════════ UNI SHORTLIST ═══════════ */

.igop-sl-table td { vertical-align: middle; }

.igop-roster-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
/* The search no longer takes the whole row — the CSV upload sits beside it. */
.igop-roster-bar #igop-roster-search { flex: 1 1 260px; min-width: 200px; }

.igop-sl-import { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.igop-sl-pick { cursor: pointer; white-space: nowrap; }
.igop-sl-file { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* What the student sees */
.igop-updates-tabs {
    display: flex; gap: 4px; padding: 10px 14px 0; background: #fff;
    border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.igop-utab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 13px; border: none; background: none; cursor: pointer;
    font-family: inherit; font-size: .85em; font-weight: 700; color: var(--muted);
    border-bottom: 2px solid transparent; transition: .15s;
}
.igop-utab:hover { color: var(--ink); }
.igop-utab.is-active { color: var(--navy); border-bottom-color: var(--navy); }
.igop-utab span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: #e2e8f0; color: var(--muted); font-size: .78em; font-weight: 800;
}
.igop-utab.is-active span { background: var(--navy); color: #fff; }

/* Only the selected panel shows. */
.igop-updates-panel .igop-updates-body { display: none; }
.igop-updates-panel .igop-updates-body.is-active { display: grid; }

.igop-slcard {
    background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--navy);
    border-radius: 11px; padding: 14px 16px;
}
.igop-slcard h4 { font-size: .95em; color: var(--ink); margin: 0 0 2px; }
.igop-slcard-uni { font-size: .85em; color: var(--body); margin: 0 0 8px; }
.igop-slcard-meta {
    display: grid; gap: 4px; font-size: .8em; color: var(--muted); line-height: 1.5;
}
.igop-slcard-meta strong { color: var(--ink); }

/* ── The one status card ──────────────────────────────────────────────
   The journey line and the three figures used to be two cards. Numbers
   that are really links are styled as links, not as statistics: no bars,
   no tiles, no second progress system competing with the line above. */
.igop-status .igop-track { margin-bottom: 2px; }
.igop-status-facts {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
    border-top: 1px solid var(--line); padding-top: 12px; margin-top: 14px;
}
.igop-fact {
    display: grid; gap: 1px; text-decoration: none; color: inherit;
    border-radius: 9px; padding: 7px 9px; transition: background .15s;
}
.igop-fact:hover, .igop-fact:focus-visible { background: #f1f5f9; text-decoration: none; }
.igop-fact strong {
    font-size: 1.45em; font-weight: 800; line-height: 1.15; color: var(--navy);
}
.igop-fact strong.is-ok { color: var(--ok); }
.igop-fact span { font-size: .78em; color: var(--muted); line-height: 1.35; }

@media (max-width: 560px) {
    /* Three narrow columns turn "Documents still needed" into four lines.
       Stacked, the number and its label sit on one row and stay readable. */
    .igop-status-facts { grid-template-columns: 1fr; gap: 0; }
    .igop-fact {
        display: flex; align-items: baseline; gap: 9px;
        padding: 9px; border-radius: 0; border-bottom: 1px solid var(--line);
    }
    .igop-fact:last-child { border-bottom: 0; }
    .igop-fact strong { font-size: 1.1em; min-width: 42px; }
    .igop-fact span { font-size: .85em; }
}

/* ── An application's paperwork, folded away ──────────────────────────
   Native <details>: no JavaScript, so it still opens if a script fails. */
.igop-sapp-more { margin: 12px 0 0; }
.igop-sapp-more > summary {
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    font-size: .82em; font-weight: 700; color: var(--navy);
    padding: 5px 10px; border: 1px solid var(--line); border-radius: 7px;
    list-style: none; user-select: none;
}
.igop-sapp-more > summary::-webkit-details-marker { display: none; }
.igop-sapp-more > summary::marker { content: ''; }
.igop-sapp-more > summary::after { content: '▾'; font-size: .95em; }
.igop-sapp-more[open] > summary::after { content: '▴'; }
.igop-sapp-more > summary:hover { border-color: var(--navy); background: #f8fafc; }
.igop-sapp-more[open] > summary { margin-bottom: 12px; }

/* A student's own portal logins. Two plain rows, because this gets read on a
   phone while somebody is on the line telling them to log in. */
.igop-mycred-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 7px 0; border-top: 1px solid var(--line); font-size: .85em;
}
.igop-mycred-row:first-of-type { border-top: 0; padding-top: 4px; }
.igop-mycred-lbl {
    flex: 0 0 74px; color: var(--muted); text-transform: uppercase;
    letter-spacing: .04em; font-size: .78em; font-weight: 700;
}
.igop-mycred-val {
    flex: 1 1 140px; min-width: 0; color: var(--ink); font-weight: 600;
    /* anywhere, not break-all: a long email wraps, but an ordinary word is
       not split down the middle. */
    overflow-wrap: anywhere;
}
/* The two password buttons stay side by side and wrap as a pair. */
.igop-mycred-acts { flex: 0 0 auto; display: flex; gap: 6px; }
/* A password is read one character at a time, so it gets a typeface where a
   1 and an l are not the same shape. */
.igop-mycred-secret { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: .02em; }
.igop-mycred-secret.is-shown { background: #fef9c3; border-radius: 4px; padding: 1px 5px; }
.igop-mycred-val.is-none { font-weight: 500; color: var(--muted); font-style: italic; }
.igop-mycred-btn {
    flex: 0 0 auto; border: 1px solid var(--line); background: #fff; color: var(--body);
    border-radius: 7px; padding: 4px 11px; font-size: .95em; font-weight: 600;
    cursor: pointer; line-height: 1.5;
}
.igop-mycred-btn:hover { border-color: var(--navy); color: var(--navy); }
.igop-mycred-btn:disabled { opacity: .55; cursor: default; }
.igop-mycred-note { margin: 8px 0 0; }

@media (max-width: 460px) {
    /* The label stops holding a column of its own and sits above the value,
       so a long username is not squeezed into 90px. */
    .igop-mycred-lbl { flex-basis: 100%; margin-bottom: -3px; }
}

@media (max-width: 680px) {
    .igop-sl-import { margin-left: 0; width: 100%; }
    .igop-roster-bar #igop-roster-search { flex-basis: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   ATTENDANCE — THE WORKING-HOURS SUM
   Shown in full so a deduction is never a number nobody can check.
   ═══════════════════════════════════════════════════════════ */

.igop-atthours { margin: 20px 0; }
.igop-atthours h4 { font-size: 1em; color: var(--ink); margin: 0 0 10px; }
.igop-atthours-sub {
    font-size: .78em; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    color: var(--muted); margin: 16px 0 8px;
}

.igop-atthours-grid {
    display: grid; gap: 1px; background: var(--line);
    border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
.igop-atthours-row {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 11px 15px; background: #fff;
}
.igop-atthours-row > span { font-size: .88em; color: var(--body); }
.igop-atthours-row > span em {
    display: block; font-style: normal; font-size: .82em; color: var(--muted); margin-top: 1px;
}
.igop-atthours-row > strong {
    font-size: 1.02em; font-weight: 800; color: var(--ink); white-space: nowrap;
}
.igop-atthours-row.is-small { padding: 8px 15px; }
.igop-atthours-row.is-small > span { font-size: .84em; }
.igop-atthours-row.is-small > strong { font-size: .92em; }

.igop-atthours-row.is-net { background: var(--surface, #f6f8fb); }
.igop-atthours-row.is-net.is-bad  { background: var(--danger-bg); }
.igop-atthours-row.is-net.is-bad  > strong { color: var(--danger); }
.igop-atthours-row.is-net.is-good { background: var(--ok-bg); }
.igop-atthours-row.is-net.is-good > strong { color: var(--ok); }

.igop-atthours-note { line-height: 1.6; margin-top: 10px; }

.igop-ok-text { color: var(--ok); }

/* The headline tiles pick up the same good/bad reading. */
.igop-attcard-stats > div.is-bad span  { color: var(--danger); }
.igop-attcard-stats > div.is-good span { color: var(--ok); }

/* A day with nothing filled in is not the same as a clean day. */
.igop-attday.is-blank {
    background: #fff; border: 1px dashed var(--line); color: var(--muted);
}

/* Deduction rows now carry a sub-line explaining the rate used. */
.igop-attpay-rows > div > span em {
    display: block; font-style: normal; font-size: .8em; color: var(--muted); margin-top: 1px;
}

/* The deductions subtotal is money lost, so it must not borrow the green
   "net payable" treatment — that reads as money received. */
.igop-attpay-sum {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 11px 0 4px; margin-top: 4px; border-top: 1px solid var(--line);
    font-weight: 700;
}
.igop-attpay-sum > span { font-size: .9em; color: var(--ink); }
.igop-attpay-sum > strong { font-size: 1.02em; }

/* ═══════════════════════════════════════════════════════════
   THE PUNCH CLOCK
   ═══════════════════════════════════════════════════════════ */

.igop-punchcard { border-left: 4px solid var(--navy); margin-bottom: 14px; }
.igop-punchcard[data-in="1"][data-out="0"] { border-left-color: var(--ok); }
.igop-punchcard[data-out="1"] { border-left-color: var(--muted); }

.igop-punch-main {
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; flex-wrap: wrap;
}
.igop-punch-status { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.igop-punch-status strong { font-size: 1.05em; color: var(--ink); }
.igop-punch-status em {
    font-style: normal; font-size: .86em; color: var(--muted);
    flex-basis: 100%; margin-left: 25px;
}

.igop-punch-dot {
    width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
    background: #cbd5e1; box-shadow: 0 0 0 4px rgba(203, 213, 225, .3);
}
.igop-punch-dot.is-on {
    background: var(--ok); box-shadow: 0 0 0 4px rgba(21, 128, 61, .18);
    animation: igop-pulse 2s ease-in-out infinite;
}
.igop-punch-dot.is-done { background: var(--navy); box-shadow: 0 0 0 4px rgba(35, 48, 92, .16); }
@keyframes igop-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(21, 128, 61, .18); }
    50%      { box-shadow: 0 0 0 8px rgba(21, 128, 61, .08); }
}

.igop-punch-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.igop-punch-btn { min-width: 150px; padding: 13px 22px; font-size: .95em; font-weight: 800; }

.igop-btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.igop-btn-danger:hover { background: #991b1b; border-color: #991b1b; }

.igop-punch-note { margin-top: 12px; line-height: 1.55; }
.igop-punch-missed { margin-top: 12px; }

/* The sheet's in/out columns are now read-only text. */
.igop-att-time { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.igop-att-time em { font-style: normal; color: var(--muted); font-weight: 400; }
.igop-att-missed { color: var(--danger) !important; font-size: .88em; }
.igop-att-byhand { color: var(--navy) !important; cursor: help; }

/* ═══════════ FORGOTTEN PUNCH-OUTS (admin) ═══════════ */

.igop-missout { border-left: 4px solid var(--orange); margin-bottom: 16px; }
.igop-missout h3 { display: flex; align-items: center; gap: 9px; font-size: 1.05em; margin-bottom: 4px; }

.igop-punchfix-form { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.igop-punchfix-form input[type="time"] { max-width: 120px; }
.igop-punchfix-form input[type="text"] { flex: 1; min-width: 110px; }

/* The finish time an employee stated on a report. */
.igop-griev-fix {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 11px; padding: 10px 13px; border-radius: 9px;
    background: var(--warn-bg); border: 1px solid var(--warn-border); flex-wrap: wrap;
}
.igop-griev-fix.is-done { background: var(--ok-bg); border-color: var(--ok-border); }
.igop-griev-fix-lab {
    display: block; font-size: .7em; font-weight: 800; letter-spacing: .07em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 2px;
}
.igop-griev-fix strong { font-size: .92em; color: var(--ink); }

@media (max-width: 680px) {
    .igop-punch-main { flex-direction: column; align-items: stretch; }
    .igop-punch-actions { width: 100%; }
    .igop-punch-btn { flex: 1; }
}

/* ═══════════════════════════════════════════════════════════
   FLOATING PUNCH WIDGET
   Bottom LEFT on purpose — the site's WhatsApp bubble sits bottom
   right and the two would sit on top of each other.
   ═══════════════════════════════════════════════════════════ */

.igop-fab {
    position: fixed; left: 20px; bottom: 20px; z-index: 99990;
    font-family: inherit;
}

.igop-fab-btn {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 22px 14px 18px; border: none; border-radius: 999px;
    background: var(--orange); color: #fff; cursor: pointer; font-family: inherit;
    box-shadow: 0 10px 30px rgba(232, 89, 12, .42);
    transition: transform .18s, box-shadow .18s;
    animation: igop-fab-pulse 2.6s ease-in-out infinite;
}
.igop-fab-btn:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 16px 38px rgba(232, 89, 12, .5);
    animation: none;
}
.igop-fab-icon { font-size: 1.1em; line-height: 1; }
.igop-fab-text { text-align: left; line-height: 1.25; }
.igop-fab-text strong { display: block; font-size: 1em; font-weight: 800; }
.igop-fab-text em { font-style: normal; font-size: .76em; opacity: .9; }

/* Draws the eye without being frantic — this is the one thing that must not
   be forgotten, and it only pulses while nobody has pressed it. */
@keyframes igop-fab-pulse {
    0%, 100% { box-shadow: 0 10px 30px rgba(232, 89, 12, .42); }
    50%      { box-shadow: 0 10px 30px rgba(232, 89, 12, .42), 0 0 0 14px rgba(232, 89, 12, .10); }
}

/* On shift */
.igop-fab-live {
    display: flex; align-items: center; gap: 14px;
    padding: 11px 12px 11px 17px; border-radius: 999px;
    background: var(--ink); color: #fff; box-shadow: 0 10px 30px rgba(15, 23, 42, .35);
}
.igop-fab-clock { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.igop-fab-clock strong {
    font-size: 1.12em; font-weight: 800; font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}
.igop-fab-clock em {
    flex-basis: 100%; font-style: normal; font-size: .72em; opacity: .7; margin-left: 20px;
}
.igop-fab-dot {
    width: 11px; height: 11px; border-radius: 50%; background: var(--ok); flex-shrink: 0;
    animation: igop-pulse 2s ease-in-out infinite;
}
.igop-fab-out {
    border: none; border-radius: 999px; padding: 10px 16px; cursor: pointer;
    background: rgba(255, 255, 255, .14); color: #fff;
    font-family: inherit; font-size: .82em; font-weight: 800; white-space: nowrap;
    transition: background .16s;
}
.igop-fab-out:hover { background: var(--danger); }

/* Past the rostered hours */
.igop-fab.is-complete .igop-fab-live { background: var(--ok); }
.igop-fab.is-complete .igop-fab-dot { background: #fff; animation: none; }
.igop-fab.is-complete .igop-fab-out { background: rgba(255, 255, 255, .22); }
.igop-fab-done {
    flex-basis: auto !important; margin-left: 6px !important; opacity: 1 !important;
    background: rgba(255, 255, 255, .2); border-radius: 999px; padding: 2px 9px;
    font-size: .68em !important; font-weight: 800; letter-spacing: .03em;
}

/* Admin students table — the same actions employees get. */
.igop-allot-actions {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 8px;
}

@media (max-width: 680px) {
    .igop-fab { left: 12px; bottom: 12px; right: 12px; }
    .igop-fab-btn { width: 100%; justify-content: center; }
    .igop-fab-live { justify-content: space-between; }
    .igop-fab-clock em { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   UNI SHORTLIST — STATUS AND DOCUMENTS

   The panel used to hold a six-column table, which already scrolled sideways
   inside a drawer this narrow. Adding a status control and a file list to each
   row would have made that worse, so one entry is now one card: everything
   about a single university sits together and nothing runs off the edge.
   ═══════════════════════════════════════════════════════════ */

/* ── status pill: one colour vocabulary, used on both dashboards ── */
.igop-slpill {
    display: inline-flex; align-items: center; flex-shrink: 0;
    padding: 4px 11px; border-radius: 999px; white-space: nowrap;
    font-size: .72em; font-weight: 800; letter-spacing: .02em;
    border: 1px solid transparent;
}
.igop-slpill.is-plain { background: #f1f5f9; color: var(--muted);  border-color: var(--line); }
.igop-slpill.is-info  { background: #eff6ff; color: #1d4ed8;       border-color: #bfdbfe; }
.igop-slpill.is-warn  { background: var(--warn-bg);   color: var(--warn);   border-color: var(--warn-border); }
.igop-slpill.is-ok    { background: var(--ok-bg);     color: var(--ok);     border-color: var(--ok-border); }
.igop-slpill.is-bad   { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }

/* ── filter chips ── */
.igop-slfilters { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 12px; }
.igop-slchip {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line);
    background: #fff; color: var(--muted);
    font-family: inherit; font-size: .78em; font-weight: 700;
    transition: border-color .15s, color .15s, background .15s;
}
.igop-slchip span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
    background: #eef2f7; color: var(--muted); font-size: .88em; font-weight: 800;
}
.igop-slchip:hover { color: var(--ink); border-color: #cbd5e1; }
.igop-slchip.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.igop-slchip.is-active span { background: rgba(255, 255, 255, .22); color: #fff; }

/* ── one entry ── */
.igop-sl-list { display: grid; gap: 12px; }
.igop-sl-list .igop-slrow[hidden] { display: none; }

.igop-slrow {
    display: grid; gap: 10px;
    background: #fff; border: 1px solid var(--line); border-left: 3px solid #cbd5e1;
    border-radius: 12px; padding: 14px 16px;
}
.igop-slrow.is-info { border-left-color: #3b82f6; }
.igop-slrow.is-warn { border-left-color: #f59e0b; }
.igop-slrow.is-ok   { border-left-color: var(--ok); }
.igop-slrow.is-bad  { border-left-color: var(--danger); }

.igop-slrow-head { display: flex; align-items: flex-start; gap: 10px; justify-content: space-between; }
.igop-slrow-titles { min-width: 0; }
.igop-slrow-titles strong { display: block; font-size: .95em; color: var(--ink); line-height: 1.3; }
.igop-slrow-titles em { font-style: normal; font-size: .84em; color: var(--muted); }

.igop-slrow-meta {
    display: flex; flex-wrap: wrap; gap: 4px 14px;
    font-size: .78em; color: var(--muted);
}

/* Status and upload sit on one line and wrap together on a phone. */
.igop-slrow-controls {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
    padding-top: 10px; border-top: 1px dashed var(--line);
}
.igop-slstatus { display: grid; gap: 4px; flex: 0 1 230px; min-width: 160px; }
.igop-slstatus .igop-label { margin: 0; }
.igop-slstatus select { padding: 8px 10px; font-size: .85em; font-weight: 700; }

.igop-slfile-btn {
    display: inline-flex; align-items: center; cursor: pointer; flex-shrink: 0;
    padding: 9px 14px; border-radius: 9px;
    border: 1px dashed #cbd5e1; background: #f8fafc;
    font-size: .8em; font-weight: 700; color: var(--navy);
    transition: border-color .15s, background .15s, color .15s;
}
.igop-slfile-btn:hover { border-color: var(--navy); background: #eef2ff; }
.igop-slfile-btn input[type="file"] { display: none; }
.igop-slfile-btn.is-busy { opacity: .65; pointer-events: none; }

.igop-slrow-note:empty { display: none; }

.igop-slrow-hint {
    font-size: .76em; color: var(--warn);
    background: var(--warn-bg); border: 1px solid var(--warn-border);
    border-radius: 8px; padding: 7px 10px;
}

/* ── attached files ── */
.igop-slfiles { display: grid; gap: 6px; }
.igop-slfile {
    display: flex; align-items: center; gap: 9px; min-width: 0;
    background: #f8fafc; border: 1px solid var(--line); border-radius: 8px;
    padding: 7px 10px;
}
.igop-slfile a {
    display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1;
    color: var(--navy); font-size: .82em; font-weight: 700; text-decoration: none;
}
.igop-slfile a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.igop-slfile a:hover { color: var(--orange); text-decoration: underline; }
.igop-slfile em {
    font-style: normal; font-size: .72em; color: var(--muted); white-space: nowrap; flex-shrink: 0;
}
.igop-slfile-x {
    border: none; background: none; cursor: pointer; flex-shrink: 0;
    color: #94a3b8; font-size: 1.15em; line-height: 1; padding: 0 2px;
}
.igop-slfile-x:hover { color: var(--danger); }
.igop-slfile-x:disabled { opacity: .4; cursor: default; }

/* Sits on the same line as the controls: with twenty universities on a list,
   a row of its own per card is a lot of scrolling for a rarely used link. */
.igop-slrow-foot { margin-left: auto; padding-bottom: 2px; }
.igop-slempty-filter { font-size: .82em; color: var(--muted); padding: 14px 2px; }

/* ═══════════ the student's side of the same thing ═══════════ */

.igop-sltally { margin-bottom: 2px; }

.igop-slcard.is-info { border-left-color: #3b82f6; }
.igop-slcard.is-warn { border-left-color: #f59e0b; }
.igop-slcard.is-ok   { border-left-color: var(--ok); }
.igop-slcard.is-bad  { border-left-color: var(--danger); }
.igop-slcard.is-plain { border-left-color: #cbd5e1; }

.igop-slcard-top {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 10px; margin-bottom: 8px;
}
.igop-slcard-top h4 { margin-bottom: 2px; }
.igop-slcard-top .igop-slcard-uni { margin: 0; }

.igop-slcard-files {
    display: grid; gap: 5px; margin-top: 10px;
    padding-top: 10px; border-top: 1px dashed var(--line);
}
.igop-slcard-files > strong { font-size: .74em; color: var(--muted); letter-spacing: .03em; }
.igop-slcard-files a {
    display: flex; align-items: center; gap: 7px; min-width: 0;
    background: #f8fafc; border: 1px solid var(--line); border-radius: 8px;
    padding: 7px 10px; color: var(--navy); font-size: .8em; font-weight: 700;
    text-decoration: none;
}
.igop-slcard-files a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.igop-slcard-files a em {
    font-style: normal; font-size: .88em; color: var(--muted); font-weight: 600; flex-shrink: 0;
}
.igop-slcard-files a:hover { border-color: var(--navy); color: var(--orange); }

/* A non-image attachment quoted into the updates feed. */
.igop-feed-files { display: grid; gap: 5px; margin-top: 8px; }
.igop-feed-files a {
    display: flex; align-items: center; gap: 7px;
    background: #f8fafc; border: 1px solid var(--line); border-radius: 8px;
    padding: 7px 10px; color: var(--navy); font-size: .8em; font-weight: 700;
    text-decoration: none;
}
.igop-feed-files a:hover { border-color: var(--navy); color: var(--orange); }

@media (max-width: 680px) {
    .igop-slrow-controls { align-items: stretch; }
    .igop-slfile-btn { justify-content: center; flex: 1 1 100%; }
    .igop-slfile em { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   THE TASK BOARD

   The tracker this replaces drew every cell as a bordered input box — eight
   boxes to a row, all the same weight, nothing scannable. Here the ink does the
   work instead of the boxes: one strong thing per row (the task), one coloured
   thing (the status), and a 3px left edge that says whether the row needs
   attention.

   Measured in the browser, a row carrying a title AND a student name AND its
   tags is 45px, against the old table's 57px of mostly empty input box. Rows
   that are running late come out at 53px because they carry one extra fact —
   that difference is deliberate and worth the pixels.
   ═══════════════════════════════════════════════════════════ */

.igop-board { display: grid; gap: 12px; }

/* ── filter bar ── */
.igop-board-bar {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
    background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
}
.igop-bfield { display: grid; gap: 3px; }
.igop-bfield .igop-label {
    margin: 0; font-size: .66em; letter-spacing: .07em; text-transform: uppercase;
    color: var(--muted); font-weight: 800;
}
.igop-bfield .igop-input { padding: 7px 10px; font-size: .85em; height: auto; }
.igop-bfield select.igop-input { min-width: 128px; }

.igop-bfield-search { position: relative; flex: 1 1 260px; min-width: 200px; align-self: flex-end; }
.igop-bfield-search .igop-input { padding-left: 32px; width: 100%; }
.igop-bsearch-icon {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    font-size: .82em; opacity: .55; pointer-events: none;
}
.igop-board-bar > .igop-btn { align-self: flex-end; }

/* ── day-range shortcuts ── */
.igop-board-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.igop-bquick {
    border: 1px solid var(--line); background: #fff; color: var(--muted);
    border-radius: 999px; padding: 5px 12px; cursor: pointer;
    font-family: inherit; font-size: .76em; font-weight: 700; transition: .15s;
}
.igop-bquick:hover { color: var(--ink); border-color: #cbd5e1; }
.igop-bquick.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ── status chips: a filter and a tally in one control ── */
.igop-board-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.igop-bchip {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    border: 1px solid var(--line); background: #fff; color: var(--muted);
    border-radius: 9px; padding: 7px 12px;
    font-family: inherit; font-size: .8em; font-weight: 700; transition: .15s;
}
.igop-bchip span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px;
    background: #eef2f7; color: var(--muted); font-size: .86em; font-weight: 800;
}
.igop-bchip:hover { border-color: #cbd5e1; color: var(--ink); }
.igop-bchip.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.igop-bchip.is-active span { background: rgba(255, 255, 255, .24); color: #fff; }
.igop-bchip.is-overdue.is-active { background: var(--danger); border-color: var(--danger); }
.igop-bchip.is-done.is-active { background: var(--ok); border-color: var(--ok); }

.igop-board-summary { margin: 0; }

/* ── the table ── */
#igop-board-wrap.is-busy { opacity: .45; pointer-events: none; transition: opacity .12s; }

.igop-board-scroll {
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    overflow: auto; max-height: 74vh;
}
.igop-board-table { width: 100%; border-collapse: collapse; font-size: .86em; }

.igop-board-table thead th {
    position: sticky; top: 0; z-index: 3;
    height: 34px; padding: 0 14px; text-align: left; white-space: nowrap;
    background: #fbfcfe; border-bottom: 1px solid var(--line);
    font-size: .74em; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    color: var(--muted);
}

/* The day a row belongs to, named once and kept on screen while you scroll. */
.igop-board-band td {
    position: sticky; top: 34px; z-index: 2;
    background: #f4f7fb; border-bottom: 1px solid var(--line); border-top: 1px solid var(--line);
    padding: 6px 14px;
}
.igop-board-band span { font-size: .88em; font-weight: 800; color: var(--ink); }
.igop-board-band em {
    font-style: normal; font-size: .74em; color: var(--muted); margin-left: 7px;
    text-transform: uppercase; letter-spacing: .06em;
}

.igop-brow { cursor: pointer; transition: background .12s; }
.igop-brow > td { padding: 6px 14px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.igop-brow:hover > td { background: #f8fafc; }
.igop-brow.is-open > td { background: #f1f5f9; border-bottom-color: transparent; }

/* One 3px edge carries the whole state of the row. */
.igop-brow > td:first-child { box-shadow: inset 3px 0 0 transparent; }
.igop-brow.is-overdue > td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.igop-brow.is-urgent > td:first-child { box-shadow: inset 3px 0 0 #b91c1c; }
.igop-brow.is-high > td:first-child { box-shadow: inset 3px 0 0 var(--orange); }
.igop-brow.is-done > td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
.igop-brow.is-missed > td:first-child { box-shadow: inset 3px 0 0 #94a3b8; }

.igop-bcol-n { width: 44px; color: #94a3b8; font-size: .84em; font-variant-numeric: tabular-nums; }
.igop-bcol-when { width: 118px; white-space: nowrap; }
.igop-bcol-due  { width: 92px; white-space: nowrap; }
.igop-bcol-when strong, .igop-bcol-due strong { font-size: .94em; font-weight: 700; color: var(--ink); }
.igop-bcol-due strong { display: block; }
.igop-bcol-when em, .igop-bcol-due em { font-style: normal; font-size: .8em; color: var(--muted); }
.igop-bcol-when em { margin-left: 4px; }
.igop-bcol-who { width: 150px; }
.igop-bcol-by { width: 96px; color: var(--muted); font-size: .88em; white-space: nowrap; }
.igop-bcol-status { width: 96px; }
.igop-bcol-x { width: 34px; text-align: right; }

/* The task is the one thing on the row that should catch the eye. */
.igop-bcell-task { max-width: 440px; }
.igop-btitle {
    display: block; font-weight: 650; color: var(--ink); line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.igop-bmeta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
    margin-top: 1px; line-height: 1.25;
}
.igop-bstudent {
    font-size: .82em; color: var(--muted); line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px;
}
.igop-btag {
    border-radius: 4px; padding: 0 5px; line-height: 1.5;
    font-size: .68em; font-weight: 800; letter-spacing: .05em; white-space: nowrap;
}
.igop-btag.is-urgent { background: #fee2e2; color: #b91c1c; }
.igop-btag.is-high { background: #ffedd5; color: var(--orange-dark); }
.igop-btag.is-weekly { background: #ede9fe; color: #6d28d9; }
.igop-btag.is-carry { background: #fef3c7; color: var(--warn); }
.igop-btag.is-proof { background: #e0f2fe; color: #0369a1; }

.igop-bwho { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.igop-bwho i {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--navy); color: #fff;
    font-style: normal; font-size: .66em; font-weight: 800; letter-spacing: .02em;
}

.igop-bpill {
    display: inline-block; border-radius: 999px; padding: 3px 10px;
    font-size: .74em; font-weight: 800; white-space: nowrap;
}
.igop-bpill.is-pending { background: #eff6ff; color: #1d4ed8; }
.igop-bpill.is-done { background: var(--ok-bg); color: var(--ok); }
.igop-bpill.is-missed { background: #f1f5f9; color: #64748b; }

.igop-bopen {
    border: none; background: none; cursor: pointer; padding: 2px 4px;
    color: #94a3b8; font-size: 1.15em; line-height: 1;
    transition: transform .15s, color .15s;
}
.igop-brow:hover .igop-bopen { color: var(--navy); }
.igop-brow.is-open .igop-bopen { transform: rotate(90deg); color: var(--navy); }

/* ── the row, opened ── */
.igop-bdetail > td {
    background: #f8fafc; border-bottom: 1px solid var(--line);
    padding: 4px 14px 16px 20px;
}
.igop-bdetail-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px;
}
.igop-bdetail-block h5 {
    margin: 0 0 5px; font-size: .74em; font-weight: 800;
    letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.igop-bdetail-block p { font-size: .9em; color: #334155; line-height: 1.5; }
.igop-bdetail-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.igop-bdetail-list li { font-size: .84em; color: var(--muted); }
.igop-bdetail-list strong { color: var(--ink); font-weight: 700; }

/* ── pager ── */
.igop-board-pager {
    display: flex; align-items: center; justify-content: center; gap: 14px; padding: 4px 0 2px;
}
.igop-board-pager .igop-btn:disabled { opacity: .4; cursor: default; }

@media (max-width: 1100px) {
    .igop-bcol-by { display: none; }
    .igop-bcell-task { max-width: 300px; }
}
@media (max-width: 820px) {
    .igop-bcol-n { display: none; }
    .igop-bcol-when em { display: none; }
    .igop-bfield select.igop-input { min-width: 108px; }
    .igop-board-scroll { max-height: none; }
}

/* ═══════════════════════════════════════════════════════════
   THE DOCUMENT LIBRARY

   Cards, not table rows: a form is a thing you pick out, and a card has room
   for the one line that says WHEN to use it — which is the part people get
   wrong. The four actions sit on the card itself because finding the form and
   sending it to a student are one motion, not two screens.
   ═══════════════════════════════════════════════════════════ */

.igop-doclib { display: grid; gap: 14px; }

.igop-doclib-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.igop-doclib-bar .igop-bfield-search { flex: 1 1 280px; }

/* ── category filter ── */
.igop-doc-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.igop-dcat {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    border: 1px solid var(--line); background: #fff; color: var(--muted);
    border-radius: 999px; padding: 6px 13px;
    font-family: inherit; font-size: .78em; font-weight: 700; transition: .15s;
}
.igop-dcat span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
    background: #eef2f7; color: var(--muted); font-size: .86em; font-weight: 800;
}
.igop-dcat:hover { border-color: #cbd5e1; color: var(--ink); }
.igop-dcat.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.igop-dcat.is-active span { background: rgba(255, 255, 255, .24); color: #fff; }

/* ── the shelf ── */
.igop-doc-grid {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}
/* A category heading spans the whole shelf rather than sitting in one column. */
.igop-doc-cat-head {
    grid-column: 1 / -1; margin: 8px 0 -2px;
    font-size: .74em; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted);
}
.igop-doc-cat-head:first-child { margin-top: 0; }

.igop-doccard {
    display: flex; flex-direction: column; gap: 9px;
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    padding: 14px 16px; transition: border-color .15s, box-shadow .15s;
}
.igop-doccard:hover { border-color: #cbd5e1; box-shadow: 0 6px 20px rgba(15, 23, 42, .06); }

.igop-doccard-top { display: flex; align-items: flex-start; gap: 11px; }
.igop-docicon {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f1f5f9; font-size: 1.1em;
}
.igop-doccard-head { min-width: 0; flex: 1; }
.igop-doccard-head h5 {
    margin: 0 0 3px; font-size: .95em; font-weight: 700; color: var(--ink); line-height: 1.3;
}
.igop-docmeta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-size: .76em; color: var(--muted);
}
.igop-dockind {
    background: #eef2f7; border-radius: 4px; padding: 1px 6px;
    font-weight: 800; letter-spacing: .04em; color: #475569;
}
.igop-docnew, .igop-docprivate {
    flex-shrink: 0; border-radius: 999px; padding: 2px 8px;
    font-size: .64em; font-weight: 800; letter-spacing: .05em;
}
.igop-docnew { background: var(--ok-bg); color: var(--ok); }
.igop-docprivate { background: #fef3c7; color: var(--warn); }

.igop-docdesc { font-size: .84em; color: #475569; line-height: 1.45; }

.igop-docactions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin-top: auto; padding-top: 10px; border-top: 1px solid #f1f5f9;
}
.igop-docactions .igop-btn { padding: 6px 11px; font-size: .78em; }

/* Icon-only: the label is on the tooltip, the meaning is in the glyph. */
.igop-docbtn {
    width: 32px; padding: 6px 0 !important;
    display: inline-flex; align-items: center; justify-content: center;
}
.igop-doccopy.is-copied {
    width: auto; padding: 6px 10px !important;
    color: var(--ok); border-color: var(--ok-border); background: var(--ok-bg);
}
.igop-docadmin {
    display: inline-flex; align-items: center; gap: 10px;
    margin-left: auto; padding-left: 8px;
}

/* ── the admin's form ── */
.igop-docform { border-left: 3px solid var(--navy); }
.igop-docpick {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin-top: 12px; padding: 11px 13px;
    background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 10px;
}
.igop-docpick-name { min-width: 0; overflow-wrap: anywhere; }
.igop-docform-actions { display: flex; gap: 8px; margin-top: 14px; }

@media (max-width: 680px) {
    .igop-doc-grid { grid-template-columns: 1fr; }
    .igop-docadmin { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════
   THE PROFILE BUILDER

   One stage on screen at a time. The old form was five stacked cards and
   forty-odd fields; on a phone that is a wall, and a wall does not get
   finished. Everything here is sized for a thumb first and a mouse second.
   ═══════════════════════════════════════════════════════════ */

.igop-cv { max-width: 860px; margin: 0 auto; }

.igop-cv-top {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
}
.igop-cv-top h1 { font-size: 1.5em; margin: 0 0 3px; }

/* ── the stepper, which is also the navigation ── */
.igop-steps {
    display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 16px;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.igop-step {
    display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; cursor: pointer;
    border: 1px solid var(--line); background: #fff; border-radius: 999px;
    padding: 7px 14px 7px 8px; font-family: inherit; font-size: .82em;
    font-weight: 700; color: var(--muted); transition: .15s;
}
.igop-step-n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    background: #eef2f7; color: var(--muted); font-size: .82em; font-weight: 800;
}
.igop-step:hover { color: var(--ink); border-color: #cbd5e1; }
.igop-step.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.igop-step.is-active .igop-step-n { background: rgba(255, 255, 255, .24); color: #fff; }
.igop-step.is-done .igop-step-n { background: var(--ok); color: #fff; }

/* ── one stage ── */
.igop-stage {
    display: none;
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    padding: 22px 24px 26px;
}
.igop-stage.is-active { display: block; }
.igop-stage-title { font-size: 1.2em; margin: 0 0 4px; }
.igop-stage-sub { font-size: .88em; color: var(--muted); line-height: 1.5; margin: 0 0 18px; }
.igop-stage-sub strong { color: var(--ink); }

.igop-sub-h {
    font-size: .78em; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    color: var(--muted); margin: 26px 0 8px;
}
.igop-sub-note { margin-bottom: 10px; }

/* ── a repeating row ── */
.igop-rows { display: grid; gap: 12px; }
.igop-row {
    border: 1px solid var(--line); border-left: 3px solid #cbd5e1;
    border-radius: 11px; padding: 14px 16px; background: #fcfdff;
}
.igop-row-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 10px;
    font-size: .76em; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted);
}
.igop-row-head b { color: var(--ink); }

.igop-row-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--line);
}
.igop-ongoing { margin: 0; }
.igop-evid { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.igop-evid .igop-label { margin: 0; white-space: nowrap; font-size: .78em; }
.igop-evid select { min-width: 150px; }

.igop-row-add { margin-top: 12px; }

/* A disabled end date reads as "ongoing", not as broken. */
.igop-input:disabled { background: #f1f5f9; color: #94a3b8; cursor: not-allowed; }

/* ── the footer ── */
.igop-cv-foot {
    position: sticky; bottom: 0; z-index: 5;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 16px; padding: 12px 16px;
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 -4px 20px rgba(15, 23, 42, .06);
}
.igop-cv-state { flex: 1; min-width: 120px; }
.igop-cv-foot .igop-cv-next { margin-left: auto; }

@media (max-width: 640px) {
    .igop-stage { padding: 18px 15px 22px; border-radius: 12px; }
    .igop-step-l { display: none; }          /* numbers only — seven pills fit */
    .igop-step { padding: 7px; }
    .igop-step.is-active .igop-step-l { display: inline; padding-right: 6px; }
    .igop-evid { margin-left: 0; width: 100%; }
    .igop-evid select { flex: 1; min-width: 0; }
    /* Three buttons in one row, and the save state as a thin line above them:
       wrapped onto three lines this footer ate a third of a phone screen. */
    .igop-cv-foot { padding: 9px 10px; gap: 7px; }
    .igop-cv-state { order: -1; flex-basis: 100%; text-align: center; min-width: 0; }
    .igop-cv-foot .igop-btn { flex: 1; padding: 10px 8px; text-align: center; }
    .igop-cv-foot .igop-cv-next { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════
   THE TIMELINE REPORT
   ═══════════════════════════════════════════════════════════ */

.igop-gap { display: grid; gap: 18px; }

.igop-gap-head {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 16px 18px; border-radius: 12px;
    background: #f8fafc; border: 1px solid var(--line); border-left: 4px solid var(--muted);
}
.igop-gap-head.is-ok   { border-left-color: var(--ok); background: var(--ok-bg); }
.igop-gap-head.is-warn { border-left-color: var(--warn); background: var(--warn-bg); }
.igop-gap-head.is-bad  { border-left-color: var(--danger); background: var(--danger-bg); }

.igop-gap-score { text-align: center; flex-shrink: 0; }
.igop-gap-score strong { display: block; font-size: 2.1em; font-weight: 800; line-height: 1; color: var(--ink); }
.igop-gap-score em { font-style: normal; font-size: .68em; color: var(--muted); }
.igop-gap-headline h3 { font-size: 1.05em; margin: 0 0 3px; }

/* ── one block per month: a bar chart of totals would hide WHERE the hole is ── */
.igop-gap-strip-wrap { display: grid; gap: 9px; }
.igop-gap-strip {
    display: flex; gap: 2px; flex-wrap: wrap;
    padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 11px;
}
.igop-gm {
    width: 13px; height: 22px; border-radius: 3px; flex-shrink: 0;
    background: #cbd5e1;
}
.igop-gm.is-covered     { background: var(--navy); }
.igop-gm.is-explained   { background: #34d399; }
.igop-gm.is-partial     { background: #fbbf24; }
.igop-gm.is-transition  { background: #cbd5e1; }
.igop-gm.is-unexplained { background: var(--danger); }

.igop-gap-legend {
    display: flex; flex-wrap: wrap; gap: 6px 16px;
    font-size: .76em; color: var(--muted);
}
.igop-gap-legend span { display: inline-flex; align-items: center; gap: 6px; }
.igop-gap-legend .igop-gm { width: 11px; height: 11px; border-radius: 3px; }

.igop-gap-h {
    font-size: .78em; font-weight: 800; letter-spacing: .07em;
    text-transform: uppercase; color: var(--muted); margin: 4px 0 -6px;
}

/* ── one gap ── */
.igop-gap-list { display: grid; gap: 10px; }
.igop-gapcard {
    background: #fff; border: 1px solid var(--line); border-left: 3px solid #cbd5e1;
    border-radius: 11px; padding: 13px 15px;
}
.igop-gapcard.is-bad  { border-left-color: var(--danger); }
.igop-gapcard.is-warn { border-left-color: #f59e0b; }
.igop-gapcard.is-ok   { border-left-color: var(--ok); }
.igop-gapcard header {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 6px;
}
.igop-gapcard header strong { font-size: .93em; color: var(--ink); }
.igop-gapcard header em { font-style: normal; font-size: .8em; color: var(--muted); }
.igop-gappill {
    border-radius: 999px; padding: 2px 9px;
    font-size: .7em; font-weight: 800; letter-spacing: .03em;
}
.igop-gappill.is-bad   { background: var(--danger-bg); color: var(--danger); }
.igop-gappill.is-warn  { background: var(--warn-bg); color: var(--warn); }
.igop-gappill.is-ok    { background: var(--ok-bg); color: var(--ok); }
.igop-gappill.is-plain { background: #f1f5f9; color: var(--muted); }
.igop-gap-fill { font-size: .82em; color: #475569; margin-bottom: 4px; }
.igop-gap-do { font-size: .82em; color: var(--muted); line-height: 1.5; }

/* ── notes and the arithmetic ── */
.igop-gap-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.igop-gap-notes li {
    font-size: .85em; line-height: 1.5; padding: 9px 12px 9px 14px;
    border-radius: 9px; border-left: 3px solid #cbd5e1; background: #f8fafc; color: #334155;
}
.igop-gap-notes li.is-bad  { border-left-color: var(--danger); background: var(--danger-bg); }
.igop-gap-notes li.is-warn { border-left-color: var(--warn); background: var(--warn-bg); }
.igop-gap-notes li.is-ok   { border-left-color: var(--ok); background: var(--ok-bg); }

.igop-gap-maths {
    background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 12px 15px;
}
.igop-gap-maths summary {
    cursor: pointer; font-size: .84em; font-weight: 700; color: var(--navy);
}
.igop-gap-maths ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 5px; }
.igop-gap-maths li {
    display: flex; justify-content: space-between; gap: 14px;
    font-size: .84em; color: #475569;
    padding-bottom: 5px; border-bottom: 1px solid #f1f5f9;
}
.igop-gap-maths li span { min-width: 0; }

@media (max-width: 640px) {
    .igop-gm { width: 10px; height: 18px; }
    .igop-gap-score strong { font-size: 1.7em; }
}

/* ── CSV export, in the course manager ── */
.igop-export-card { border-left: 3px solid var(--navy); margin-bottom: 16px; }
.igop-export-row { display: flex; flex-wrap: wrap; gap: 9px; margin: 14px 0 10px; }
.igop-export-row .igop-btn { display: inline-flex; align-items: center; gap: 8px; }
.igop-export-n {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px;
    background: rgba(255, 255, 255, .22); font-size: .82em; font-weight: 800;
}
.igop-btn-ghost .igop-export-n { background: #eef2f7; color: var(--muted); }
.igop-export-note { line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════
   WHAT WE NEED FROM YOU  (student dashboard)
   One item in full, the rest folded away. Nine equally loud
   boxes get none of them done.
   ═══════════════════════════════════════════════════════════ */

.igop-nudge {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 18px; flex-wrap: wrap;
    padding: 15px 16px; border-radius: 12px;
    border: 1px solid #ddd6fe; background: linear-gradient(135deg, #faf5ff 0%, #f5f3ff 100%);
}
.igop-nudge-body { flex: 1 1 300px; min-width: 0; }
.igop-nudge-title { display: block; font-size: 1em; color: var(--ink); margin-bottom: 3px; }
.igop-nudge-detail { margin: 0; font-size: .87em; color: #475569; line-height: 1.55; }
.igop-nudge-acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex: 0 0 auto; }

.igop-nudge-more { margin-top: 14px; }
.igop-nudge-more summary {
    cursor: pointer; font-size: .82em; color: var(--muted); font-weight: 600;
}
.igop-nudge-list { margin-top: 10px; }

/* ═══════════════════════════════════════════════════════════
   TASK PROMPTS  (employee dashboard)
   Three answers; two of them open one more field, because
   "waiting" and "can't" mean nothing without the detail.
   ═══════════════════════════════════════════════════════════ */

.igop-tp { text-align: left; max-height: 88vh; display: flex; flex-direction: column; }
.igop-tp-head { flex: 0 0 auto; }
.igop-tp-head h3 { margin: 0 0 4px; }
.igop-tp-head p  { margin: 0; }

.igop-tp-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 16px -4px 0; padding: 2px 4px; }

.igop-tp-item {
    border: 1px solid var(--line); border-radius: 12px;
    padding: 14px 15px; margin-bottom: 10px; background: #fff;
}
.igop-tp-item.is-answered { border-color: var(--ok-border); background: var(--ok-bg); }

.igop-tp-task { display: flex; flex-direction: column; gap: 3px; margin-bottom: 11px; }
.igop-tp-task strong { font-size: .95em; color: var(--ink); line-height: 1.4; }
.igop-tp-meta { font-size: .78em; color: var(--muted); }
.igop-tp-note {
    font-size: .82em; color: #334155; font-style: italic;
    border-left: 3px solid #cbd5e1; padding-left: 9px; margin-top: 4px;
}

.igop-tp-answers { display: flex; gap: 8px; flex-wrap: wrap; }
.igop-tp-a.is-picked { outline: 2px solid var(--navy); outline-offset: 1px; }

.igop-tp-form { margin-top: 13px; padding-top: 13px; border-top: 1px dashed var(--line); }
.igop-tp-form .igop-label { margin-top: 8px; }
.igop-tp-form .igop-btn  { margin-top: 10px; }

.igop-tp-result {
    font-size: .88em; font-weight: 650; color: var(--ok); line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════
   WHERE THE WORK IS STUCK  (admin)
   ═══════════════════════════════════════════════════════════ */

.igop-pileup { margin-bottom: 18px; }
.igop-pileup-head { margin-bottom: 12px; }
.igop-pileup-head p { margin: 3px 0 0; }
.igop-pileup-note  { margin: 10px 0 0; line-height: 1.55; }

.igop-pileup-table td, .igop-pileup-table th { white-space: nowrap; }
.igop-table .igop-num { text-align: right; font-variant-numeric: tabular-nums; }

/* the task board's own additions */
.igop-bwait   { display: block; font-size: .72em; color: var(--warn); margin-top: 3px; }
.igop-bpill.is-waiting {
    background: var(--warn-bg); color: var(--warn); border-color: var(--warn-border);
}
.igop-bnotified {
    display: block; font-size: .7em; color: var(--muted); margin-top: 4px; line-height: 1.35;
}
.igop-notify, .igop-notify-all { display: inline-block; margin-top: 4px; }

@media (max-width: 680px) {
    .igop-nudge { flex-direction: column; }
    /* Once the card stacks, flex-basis is read as a HEIGHT, and 300px of it
       opened a blank hole between the text and the button. Same trap as the
       CV banner. In a column the body should take the room it needs. */
    .igop-nudge-body { flex: 0 0 auto; width: 100%; }
    .igop-nudge-acts { width: 100%; }
    .igop-nudge-acts .igop-btn { width: 100%; }
    .igop-tp-answers .igop-btn { width: 100%; }
    .igop-tp-list { max-height: 58vh; }
}