/* ============================================================
   TES (Teaching Evaluation System) module styles
   ZABDESK Components / TES
   v20260915a — responsive, accessible, performance-optimized
   ============================================================ */

/* Reset / base */
html,
body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    color: #333;
    background: #f2f5f9;
    min-height: 100%;
}

/* The shared zn-topbar is fixed/sticky; push content below it */
body.zn-has-topbar {
    padding-top: 64px;
}

/* Focus indicator for keyboard navigation */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid #0c54a3;
    outline-offset: 2px;
}

/* Skip link */
.zn-skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #0c54a3;
    color: #fff;
    padding: 8px 12px;
    text-decoration: none;
    z-index: 10000;
    border-radius: 0 0 4px 0;
}
.zn-skip-link:focus { top: 0; }

/* Main page wrapper */
.zn-page-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px 48px;
    box-sizing: border-box;
}

/* Cards */
.zn-tes-card {
    background: #fff;
    border: 1px solid #dce3f2;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(10, 47, 90, 0.08);
    padding: 24px;
    margin-bottom: 24px;
}

.zn-tes-card-header {
    border-bottom: 1px solid #e8edf5;
    padding-bottom: 16px;
    margin-bottom: 20px;
}

.zn-tes-card-header h1,
.zn-tes-card-header h2 {
    margin: 0 0 6px;
    color: #0a2f5a;
    font-size: 22px;
    font-weight: 700;
}

.zn-tes-card-header .zn-subtitle {
    color: #5a6a8a;
    font-size: 14px;
}

.zn-tes-card-body {
    color: #333;
    font-size: 14px;
    line-height: 1.6;
}

/* Student info line / greeting card */
.zn-tes-student {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #eef4ff;
    border: 1px solid #d4e0f7;
    border-left: 4px solid #0c54a3;
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 16px;
    color: #0a2f5a;
}

.zn-tes-student .zn-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #0c54a3;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    flex: none;
}

.zn-tes-student .zn-greeting {
    display: block;
    font-weight: 700;
    font-size: 15px;
}

.zn-tes-student .zn-greeting-hint {
    display: block;
    font-size: 12px;
    color: #5a6a8a;
    font-weight: 400;
    margin-top: 2px;
}

.zn-tes-privacy {
    color: #5a6a8a;
    font-style: italic;
    font-size: 13px;
    margin-bottom: 16px;
}

.zn-tes-privacy strong { color: #0a2f5a; }

/* Faculty/course info on TES.aspx — identity cards */
.zn-tes-class {
    margin: 0 0 16px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.zn-tes-class > span { display: contents; }
.zn-tes-class-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 12px 14px 12px 16px;
    background: #fff;
    border: 1px solid #d4e0f7;
    border-left: 4px solid #0c54a3;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(12, 84, 163, 0.10);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.zn-tes-class-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(12, 84, 163, 0.16);
}
.zn-tes-class-card:nth-child(2) { border-left-color: #15803d; }
.zn-tes-class-card:nth-child(3) { border-left-color: #b45309; }
.zn-tes-class-key {
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 700;
    color: #5a6a8a;
}
.zn-tes-class-val {
    font-size: 15px;
    font-weight: 700;
    color: #0a2f5a;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* Status messages */
.zn-tes-success {
    color: #2e7d32;
    font-weight: 700;
    text-align: center;
    padding: 20px;
}

.zn-tes-error {
    color: #c62828;
    font-weight: 700;
    padding: 12px;
    background: #ffebee;
    border-left: 4px solid #c62828;
    border-radius: 4px;
    margin-bottom: 12px;
}
/* v20260916g: lblError and lblError1 are rendered on every TES page but are EMPTY
   until something fails. This rule still painted a 4px red bar + pink block, so
   every evaluation form showed a stray red mark (top of the card and again under
   the Submit button) that looked like a broken error. Hide it when it is empty. */
.zn-tes-error:empty { display: none; }

/* Tables shared */
.zn-tes-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 14px;
}

.zn-tes-table th,
.zn-tes-table td {
    padding: 12px;
    border: 1px solid #c8d2e5;
    text-align: left;
    vertical-align: top;
}

.zn-tes-table th {
    /* v20260917 (S80): was #5d7b9d.  White on #5d7b9d measures 4.39:1, just under
       the 4.5:1 WCAG AA floor for normal text (the cell text is 13-14px, so the
       large-text 3:1 allowance does not apply even though it is bold).  Measured
       live on /TES/Default.aspx as BOTH-FAIL.  #54718f keeps the same slate hue
       and measures 5.08:1. */
    background: #54718f;
    color: #fff;
    font-weight: 700;
}

.zn-tes-table tr:nth-child(even) td { background: #f7f9fc; }

/* Course list table (Default.aspx) */
.zn-course-list th,
.zn-course-list td { text-align: left; }

.zn-course-list td:last-child,
.zn-course-list th:last-child { text-align: center; width: 110px; }

.zn-course-list tbody tr { transition: background 0.15s ease; }
.zn-course-list tbody tr:hover td { background: #eef4ff; }

.zn-course-list a {
    display: inline-block;
    padding: 8px 18px;
    background: #0c54a3;
    color: #fff !important;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 2px 4px rgba(12, 84, 163, 0.25);
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.zn-course-list a:visited { color: #fff !important; }

.zn-course-list a:hover {
    background: #0a4790;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(12, 84, 163, 0.30);
}

.zn-course-list a:active { color: #fff !important; transform: translateY(0); }

/* Evaluation form table (TES.aspx) */
.zn-eval-table { margin-bottom: 18px; border-collapse: separate; border-spacing: 0; }

.zn-eval-table thead th {
    background: linear-gradient(180deg, #123a63 0%, #0a2f5a 100%);
    color: #fff;
    text-align: center;
    font-size: 13px;
    letter-spacing: .02em;
    border-color: #0a2f5a;
    position: sticky;
    top: 0;
    z-index: 3;
}

/* A/B/C/D column headers carry their Likert rank as a coloured underline */
.zn-eval-table thead th:nth-of-type(3) { box-shadow: inset 0 -4px 0 #15803d; } /* A */
.zn-eval-table thead th:nth-of-type(4) { box-shadow: inset 0 -4px 0 #4d7c0f; } /* B */
.zn-eval-table thead th:nth-of-type(5) { box-shadow: inset 0 -4px 0 #b45309; } /* C */
.zn-eval-table thead th:nth-of-type(6) { box-shadow: inset 0 -4px 0 #b91c1c; } /* D */

.zn-eval-table td:first-child {
    width: 46px;
    text-align: center;
    font-weight: 700;
    color: #0a2f5a;
}

.zn-eval-table td:nth-child(2) { text-align: left; }

.zn-eval-table td.option {
    width: 62px;
    text-align: center;
    vertical-align: middle;
}

/* Radio buttons (styled for ASP.NET RadioButton output).
   ASP.NET renders each control as <input type=radio id=x><label for=x> .</label>.
   The label is the visible circle (and, via for=, the click target); the native
   input is kept on top, invisible but focusable, so keyboard + screen readers
   work. Standard ~22px size (was 32px, which the owner flagged as too large). */
.zn-radio-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 22px;
    height: 22px;
    vertical-align: middle;
}

.zn-radio-wrap input[type="radio"] {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 22px;
    height: 22px;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}

.zn-radio-wrap label {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 2px solid #9aa8c3;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    text-indent: -9999px;   /* the RadioButton Text is a placeholder " ." */
    overflow: hidden;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

/* the filled dot, scales in when checked */
.zn-radio-wrap label::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #9aa8c3;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.12s ease, background 0.15s ease;
}

.zn-radio-wrap label:hover {
    border-color: #0c54a3;
    background: #f4f8ff;
}

.zn-radio-wrap input[type="radio"]:checked + label {
    border-color: #0c54a3;
    background: #fff;
}

.zn-radio-wrap input[type="radio"]:checked + label::after {
    transform: translate(-50%, -50%) scale(1);
}

.zn-radio-wrap input[type="radio"]:focus + label {
    box-shadow: 0 0 0 4px rgba(12, 84, 163, 0.25);
}

/* ---------------------------------------------------------------------------
   v20260915 (fix): keep the native radio INVISIBLE inside .zn-radio-wrap.

   TES.aspx loads BOTH /css/zn_student.css and this file. zn_student.css carries
   an UNSCOPED, !important-laden rule that was written for the course-registration
   checkboxes:

       input[type="checkbox"],
       input[type="radio"],
       .zpr-section input[type="checkbox"], ... {
           appearance: checkbox !important;
           -webkit-appearance: checkbox !important;
           opacity: 1 !important;
           width: 18px !important;  height: 18px !important;
           border: 1px solid #12304f !important;
           border-radius: 2px;
           background: #FFFFFF !important;
       }

   Because that selector list is unscoped, it also matched every evaluation radio
   here and (a) forced `appearance: checkbox`, so a radio rendered as a SQUARE,
   and (b) forced `opacity: 1`, which beat the `opacity: 0` declared above and made
   the native control VISIBLE. The result was a visible 18px checkbox square drawn
   on top of this file's custom 32px circle - i.e. "the option button and a
   checkbox appear together" on the evaluation form.

   The declarations below must carry !important to win, and the selector is one
   step more specific than zn_student.css's (0,2,1 vs 0,1,1), so it also wins the
   !important-vs-!important contest on specificity.
   --------------------------------------------------------------------------- */
.zn-radio-wrap input[type="radio"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    /* Invisible but still focusable and clickable (sits above the label, z-index 2). */
    opacity: 0 !important;
    cursor: pointer;
    z-index: 2;
}

/* ---------------------------------------------------------------------------
   v20260915 (fix): stop the legacy checks.png SPRITE from painting on top of
   this file's custom circle.

   The "Older sprite fallback" block further down (search for checks.png) targets

       input[type=radio]:not(old) + label

   `:not(old)` matches EVERY radio, so that rule also matched this file's own
   custom labels and applied

       margin-left: -28px;  padding-left: 28px;
       background: url('../images/checks.png') no-repeat 0 0;

   The sprite cell at 0 0 is an unchecked CHECKBOX graphic, so a rounded-square
   sprite was painted underneath the circular border - the second half of the
   "option button and a checkbox appear together" defect. The -28px margin also
   pulled the label off the wrapper, leaving the invisible input mis-aligned by
   ~14px.

   This rule must stay ABOVE the sprite block (equal specificity, so !important
   plus later position wins) and must NOT be removed - the sprite block is kept
   for any legacy page that still uses it.
   --------------------------------------------------------------------------- */
.zn-radio-wrap input[type="radio"] + label {
    background-image: none !important;
    background-color: #fff !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Row highlight on hover for evaluation table */
.zn-eval-table tbody tr { transition: background 0.15s ease; }
.zn-eval-table tbody tr:hover td { background: #f4f8ff; }

/* Older sprite fallback for pages still using the checks.png sprite */
input[type=radio]:not(old),
input[type=checkbox]:not(old) {
    width: 28px;
    margin: 0;
    padding: 0;
    opacity: 0;
    vertical-align: middle;
}

input[type=radio]:not(old) + label,
input[type=checkbox]:not(old) + label {
    display: inline-block;
    margin-left: -28px;
    padding-left: 28px;
    background: url('../images/checks.png') no-repeat 0 0;
    line-height: 24px;
    vertical-align: middle;
}

input[type=checkbox]:not(old):checked + label {
    background-position: 0 -24px;
}

input[type=radio]:not(old):checked + label {
    background-position: 0 -48px;
}

/* Legend / scale bar */
.zn-scale-legend {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #5a6a8a;
    font-weight: 600;
}

.zn-scale-legend span {
    min-width: 80px;
    text-align: center;
    padding: 6px 10px;
    background: #f7f9fc;
    border: 1px solid #d4e0f7;
    border-radius: 4px;
}

.zn-scale-legend span:first-child { border-left-color: #0c54a3; }

/* Section headings */
.zn-section-title {
    background: #eef2f8;
    color: #0a2f5a;
    font-weight: 700;
    padding: 14px;
    text-align: center;
    border: 1px solid #c8d2e5;
    border-bottom: 0;
    font-size: 15px;
    border-radius: 6px 6px 0 0;
}

/* Comments */
.zn-comments-wrap {
    background: #f7f9fc;
    border: 1px solid #c8d2e5;
    border-radius: 4px;
    padding: 16px;
    margin: 20px 0;
}

.zn-comments-wrap label {
    display: block;
    font-weight: 700;
    color: #0a2f5a;
    margin-bottom: 8px;
}

.zn-comments-wrap textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    border: 1px solid #b0bdd4;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
    resize: vertical;
}

.zn-comments-wrap textarea:focus {
    border-color: #0c54a3;
    box-shadow: 0 0 0 3px rgba(12, 84, 163, 0.12);
}

/* Buttons */
.zn-tes-btn {
    display: inline-block;
    padding: 12px 28px;
    background: #0c54a3;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease;
}

.zn-tes-btn:hover { background: #0a4790; }

.zn-tes-btn-secondary {
    background: #6c757d;
}
.zn-tes-btn-secondary:hover { background: #545b62; }

.zn-tes-actions { text-align: center; margin: 24px 0; }

/* Empty state */
.zn-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #5a6a8a;
}

.zn-empty-state p { font-size: 16px; margin-bottom: 16px; }

/* Print */
@media print {
    .zn-topbar,
    .znf-inner,
    .znf-bottom,
    .zn-tes-actions,
    .zn-skip-link { display: none !important; }
    body { background: #fff; padding-top: 0; }
    .zn-page-content { padding: 0; }
    .zn-tes-card { border: none; box-shadow: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* Responsive */
@media (max-width: 900px) {
    body.zn-has-topbar { padding-top: 56px; }
    .zn-page-content { padding: 16px 12px 32px; }
    .zn-tes-card { padding: 16px; }
    .zn-tes-card-header h1,
    .zn-tes-card-header h2 { font-size: 20px; }
}

@media (max-width: 640px) {
    body { font-size: 14px; }
    .zn-tes-card { padding: 14px; border-radius: 10px; }
    .zn-tes-card-header { margin-bottom: 16px; }
    .zn-tes-table th,
    .zn-tes-table td { padding: 10px 8px; font-size: 13px; }

    /* Non-evaluation wide tables (course list, results) scroll horizontally */
    .zn-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        border: 1px solid #c8d2e5;
        border-radius: 6px;
    }
    .zn-tes-table:not(.zn-eval-table) { min-width: 560px; }

    .zn-scale-legend {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    .zn-scale-legend span { min-width: 0; flex: 1 1 auto; font-size: 12px; padding: 5px 8px; }
    .zn-tes-class { text-align: left; grid-template-columns: 1fr; }
}

/* Phones: the evaluation matrix becomes a stacked survey — one card per
   question, the four options as a 4-up pill row (A/B/C/D). The label fills
   the pill so the whole pill is the tap target, and it fits a 320px iPhone SE. */
@media (max-width: 620px) {
    .zn-eval-table { min-width: 0; width: 100%; border-collapse: separate; }
    .zn-eval-table thead { display: none; }
    .zn-eval-table,
    .zn-eval-table tbody,
    .zn-eval-table tr,
    .zn-eval-table td { display: block; width: auto; }

    .zn-eval-table tr {
        display: grid;
        grid-template-columns: 1.75rem repeat(4, 1fr);
        grid-template-rows: auto auto;
        column-gap: 8px;
        row-gap: 10px;
        align-items: center;
        border: 1px solid #dbe3f0;
        border-radius: 12px;
        background: #fff;
        padding: 12px;
        margin-bottom: 12px;
    }
    .zn-eval-table td { border: none; padding: 0; background: transparent !important; }
    .zn-eval-table td:nth-of-type(1) {
        grid-column: 1; grid-row: 1;
        display: block; width: auto; text-align: left;
        color: #0a2f5a; font-weight: 800; font-size: 15px;
    }
    .zn-eval-table td:nth-of-type(1)::after { content: "."; }
    .zn-eval-table td:nth-of-type(2) {
        grid-column: 2 / -1; grid-row: 1;
        display: block; font-weight: 600; text-align: left; line-height: 1.35;
        white-space: normal;
    }

    .zn-eval-table td.option {
        grid-row: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        min-height: 46px;
        margin-top: 0;
        border: 1.5px solid #cbd5e1 !important;
        border-radius: 10px;
        background: #fff;
        font-weight: 800;
        color: #475569;
    }
    .zn-eval-table td.option:nth-of-type(3) { grid-column: 2; }
    .zn-eval-table td.option:nth-of-type(4) { grid-column: 3; }
    .zn-eval-table td.option:nth-of-type(5) { grid-column: 4; }
    .zn-eval-table td.option:nth-of-type(6) { grid-column: 5; }
    .zn-eval-table td.option::before { content: "A"; }
    .zn-eval-table td.option:nth-of-type(4)::before { content: "B"; }
    .zn-eval-table td.option:nth-of-type(5)::before { content: "C"; }
    .zn-eval-table td.option:nth-of-type(6)::before { content: "D"; }

    /* the radio fills the pill so the whole pill is clickable */
    .zn-eval-table td.option .zn-radio-wrap { position: absolute; inset: 0; width: auto; height: auto; }
    .zn-eval-table td.option .zn-radio-wrap label {
        position: absolute; inset: 0; width: auto; height: auto;
        border: none; background: transparent !important; border-radius: 10px;
    }
    .zn-eval-table td.option .zn-radio-wrap label::after { display: none; }
    .zn-eval-table td.option .zn-radio-wrap input[type="radio"] { width: 100% !important; height: 100% !important; }

    .zn-eval-table td.option:has(input[type="radio"]:checked) {
        background: var(--rank-tint) !important;
        border-color: var(--rank) !important;
        color: var(--rank);
    }
    .zn-eval-table td.option:has(input[type="radio"]:focus-visible) {
        outline: 3px solid #0c54a3; outline-offset: 2px;
    }
}

@media (max-width: 400px) {
    .zn-tes-card { padding: 12px; }
    .zn-tes-table th,
    .zn-tes-table td { padding: 8px 6px; font-size: 12px; }
}

/* ============================================================
   Staff dashboard pages (Select, Report, BelowThreshold, etc.)
   ============================================================ */

/* Staff dashboard buttons */
.zn-staff-actions {
    text-align: center;
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.zn-staff-btn {
    display: inline-block;
    padding: 12px 24px;
    background: #0c54a3;
    color: #fff !important;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    min-width: 280px;
    max-width: 100%;
    text-align: center;
    transition: background 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.zn-staff-btn:hover { background: #0a4790; }

.zn-staff-btn:disabled {
    background: #adb5bd;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Semester link tabs */
.zn-semester-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.zn-semester-list a {
    display: inline-block;
    padding: 14px 28px;
    background: #0c54a3;
    color: #fff !important;
    text-decoration: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    transition: background 0.2s ease;
    white-space: nowrap;
}

.zn-semester-list a:hover { background: #0a4790; }

/* Report accordion (jQuery UI accordion override) */
#accordion {
    margin: 20px 0;
}

#accordion .ui-accordion-header {
    background: #eef2f8 !important;
    border: 1px solid #c8d2e5 !important;
    border-radius: 4px;
    padding: 12px 16px !important;
    font-size: 15px;
    font-weight: 700;
    color: #0a2f5a !important;
    cursor: pointer;
    margin: 0 0 4px;
}

#accordion .ui-accordion-header.ui-state-active {
    background: #0c54a3 !important;
    color: #fff !important;
    border-color: #0c54a3 !important;
    border-radius: 4px 4px 0 0;
    margin-bottom: 0;
}

#accordion .ui-accordion-content {
    background: #fff !important;
    border: 1px solid #c8d2e5 !important;
    border-top: none !important;
    padding: 0 !important;
    margin-bottom: 8px;
}

/* Report table inside accordion */
.zn-report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.zn-report-table th {
    /* v20260917 (S80): same fix as .zn-tes-table th above - #5d7b9d gave 4.39:1
       with white text, under the 4.5:1 AA floor.  #54718f measures 5.08:1. */
    background: #54718f;
    color: #fff;
    padding: 8px;
    text-align: left;
    font-weight: 700;
    border: 1px solid #4a6585;
}

.zn-report-table td {
    padding: 8px;
    border: 1px solid #d0d8e8;
    vertical-align: top;
}

.zn-report-table tr:nth-child(even) td { background: #f7f9fc; }

.zn-score-below { background: #ff9f9f !important; }
.zn-score-ok { background: #fff !important; }
.zn-status-done { background: #2CC990 !important; }

.zn-report-table a {
    color: #0c54a3;
    text-decoration: none;
    font-weight: 600;
}

.zn-report-table a:hover { text-decoration: underline; }

/* FormView evaluation results */
.zn-formview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 16px;
}

.zn-formview-table th {
    background: #4a6585;
    color: #fff;
    padding: 10px;
    text-align: center;
    border: 1px solid #3a5070;
    font-weight: 700;
}

.zn-formview-table td {
    padding: 8px 10px;
    border: 1px solid #c8d2e5;
    vertical-align: middle;
}

.zn-formview-table tr td:first-child {
    text-align: center;
    font-weight: 700;
    width: 50px;
}

.zn-formview-table tr td:nth-child(2) {
    text-align: left;
    width: auto;
}

.zn-formview-table tr td.option {
    text-align: center;
    width: 80px;
}

.zn-formview-table tfoot td {
    background: #eef2f8;
    font-weight: 700;
    color: #0a2f5a;
}

/* Comments sections in FormView */
.zn-comment-section {
    margin: 20px 0;
    padding: 16px;
    background: #f7f9fc;
    border: 1px solid #c8d2e5;
    border-radius: 6px;
}

.zn-comment-section h3 {
    margin: 0 0 12px;
    color: #0a2f5a;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
}

.zn-comment-section textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    border: 1px solid #b0bdd4;
    border-radius: 4px;
    font-family: inherit;
    font-size: 13px;
    box-sizing: border-box;
    resize: vertical;
}

.zn-comment-section textarea:focus {
    border-color: #0c54a3;
    box-shadow: 0 0 0 3px rgba(12, 84, 163, 0.12);
    outline: none;
}

.zn-comment-section textarea:disabled {
    background: #e9ecef;
    color: #6c757d;
}

/* Search box */
.zn-search-box {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 20px 0;
    flex-wrap: wrap;
}

.zn-search-box input[type="text"] {
    flex: 1;
    min-width: 200px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

.zn-search-box input[type="text"]:focus {
    border-color: #0c54a3;
    outline: none;
    box-shadow: 0 0 0 3px rgba(12, 84, 163, 0.12);
}

/* Student comments list in FormView */
.zn-student-comments {
    margin: 0;
    padding-left: 20px;
}

.zn-student-comments li {
    padding: 6px 0;
    border-bottom: 1px solid #e8edf5;
    font-size: 13px;
    color: #333;
}

/* Info grid for FormView header */
.zn-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin: 16px 0;
}

.zn-info-grid > div {
    padding: 8px 12px;
}

.zn-info-grid strong {
    color: #0a2f5a;
    display: inline-block;
    min-width: 90px;
}

/* Scale legend for FormView */
.zn-formview-scale {
    display: flex;
    margin: 12px 0;
    border: 1px solid #c8d2e5;
    border-radius: 4px;
    overflow: hidden;
}

.zn-formview-scale > div {
    flex: 1;
    text-align: center;
    padding: 8px;
    background: #eef2f8;
    border-right: 1px solid #c8d2e5;
    font-size: 13px;
    font-weight: 700;
    color: #0a2f5a;
}

.zn-formview-scale > div:last-child { border-right: none; }

/* Responsive for staff pages */
@media (max-width: 640px) {
    .zn-staff-btn { min-width: auto; width: 100%; }
    .zn-semester-list { flex-direction: column; }
    .zn-semester-list a { width: 100%; text-align: center; }
    .zn-info-grid { grid-template-columns: 1fr; }
    .zn-formview-scale { flex-direction: column; }
    .zn-formview-scale > div { border-right: none; border-bottom: 1px solid #c8d2e5; }
    .zn-formview-scale > div:last-child { border-bottom: none; }
    .zn-search-box { flex-direction: column; }
    .zn-search-box input[type="text"] { width: 100%; }
}

/* ==========================================================================
   S429 (2026-10-20) - survey look: Likert rank colour, coloured scale legend,
   answered-progress bar, and Windows High Contrast support for TES.aspx.
   ========================================================================== */

/* Rank per option column: A green, B lime, C amber, D red (all AA-safe as an
   ink on their own tint). nth-of-type(3..6) are the A/B/C/D cells of a row. */
.zn-eval-table td.option:nth-of-type(3) { --rank: #15803d; --rank-tint: #dcfce7; }
.zn-eval-table td.option:nth-of-type(4) { --rank: #4d7c0f; --rank-tint: #ecfccb; }
.zn-eval-table td.option:nth-of-type(5) { --rank: #b45309; --rank-tint: #fef3c7; }
.zn-eval-table td.option:nth-of-type(6) { --rank: #b91c1c; --rank-tint: #fee2e2; }

/* Desktop: the selected radio's dot + border take the column rank, and the
   whole option cell tints so the chosen rank reads at a glance. :has() is a
   progressive enhancement; the dot/border use :checked + label and work
   everywhere. */
.zn-eval-table td.option .zn-radio-wrap label::after { background: var(--rank); }
.zn-eval-table td.option .zn-radio-wrap:hover label { border-color: var(--rank); }
.zn-eval-table td.option .zn-radio-wrap input[type="radio"]:checked + label { border-color: var(--rank); }
.zn-eval-table td.option:has(input[type="radio"]:checked) { background: var(--rank-tint); }

/* Scale legend chips carry the same rank colour so A/B/C/D mapping is obvious */
.zn-scale-legend { flex-wrap: wrap; }
.zn-scale-legend span {
    border: 1px solid #d4e0f7;
    border-left-width: 4px;
    border-radius: 6px;
    font-weight: 700;
}
.zn-scale-legend span:nth-child(1) { border-left-color: #15803d; background: #dcfce7; color: #14532d; }
.zn-scale-legend span:nth-child(2) { border-left-color: #4d7c0f; background: #ecfccb; color: #3f6212; }
.zn-scale-legend span:nth-child(3) { border-left-color: #b45309; background: #fef3c7; color: #92400e; }
.zn-scale-legend span:nth-child(4) { border-left-color: #b91c1c; background: #fee2e2; color: #991b1b; }

/* Answered-progress bar (updated by the inline script in TES.aspx) */
.zn-tes-progress { margin: 2px 0 20px; }
.zn-tes-progress-track {
    height: 8px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}
.zn-tes-progress-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #0c54a3, #15803d);
    border-radius: 999px;
    transition: width 0.25s ease;
}
.zn-tes-progress-text {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #5a6a8a;
}

/* Windows High Contrast / forced colours - the estate's "dark mode".
   Rank backgrounds are stripped by forced-colours, so selection is shown with
   the system accent (Highlight) and a border, both guaranteed visible. */
@media (forced-colors: active) {
    .zn-radio-wrap label { border-color: CanvasText; background: Canvas; }
    .zn-radio-wrap label::after { background: Highlight; forced-color-adjust: none; }
    .zn-radio-wrap input[type="radio"]:checked + label { border-color: Highlight; }
    .zn-radio-wrap input[type="radio"]:focus + label { outline: 2px solid Highlight; outline-offset: 2px; box-shadow: none; }

    .zn-eval-table td.option:has(input[type="radio"]:checked) {
        outline: 2px solid Highlight;
        background: Canvas;
    }
    .zn-eval-table thead th { background: Canvas; color: CanvasText; }
    .zn-eval-table thead th:nth-of-type(3),
    .zn-eval-table thead th:nth-of-type(4),
    .zn-eval-table thead th:nth-of-type(5),
    .zn-eval-table thead th:nth-of-type(6) { box-shadow: inset 0 -4px 0 CanvasText; }

    .zn-scale-legend span { background: Canvas; color: CanvasText; border-color: CanvasText; }
    .zn-section-title { background: Canvas; color: CanvasText; border-color: CanvasText; }
    .zn-tes-progress-bar { background: Highlight; forced-color-adjust: none; }
    .zn-tes-btn { background: ButtonFace; color: ButtonText; border: 2px solid ButtonText; }

    /* mobile pills: keep the selected one obvious without colour */
    .zn-eval-table td.option:has(input[type="radio"]:checked) { border-color: Highlight !important; }

    /* identity cards: drop the coloured stripe to a guaranteed-visible border */
    .zn-tes-class-card { background: Canvas; border: 1px solid CanvasText; border-left: 4px solid CanvasText; box-shadow: none; }
    .zn-tes-class-key,
    .zn-tes-class-val { color: CanvasText; }

    /* course-list "Start" button */
    .zn-course-list a { background: ButtonFace; color: ButtonText !important; border: 2px solid ButtonText; }
    .zn-course-list a:hover { background: Highlight; color: HighlightText !important; border-color: Highlight; }
}