/* ================================================================
   MISHKAH TABLES — responsive data-table transformation.
   - Desktop: standard table layout (untouched).
   - Mobile (<=640px): each <tr> becomes a card with stacked
     label-value pairs. Header row is hidden; column labels are
     injected as ::before content keyed off the table class.
   - Hover effects removed on flagged tables.

   Pages using these classes:
     - coursesmap.php             → .m-table.m-courses
     - subject/results.php        → .m-table.m-results
     - subject/transscript.php    → .m-table.m-transcript
   ================================================================ */

/* ---- Shared base (desktop too) ------------------------------- */

body.sl-injected .m-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
}
body.sl-injected .m-table td,
body.sl-injected .m-table th {
    vertical-align: middle;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}
body.sl-injected .m-table tr:last-child td { border-bottom: none; }

/* Remove all hover effects on .m-table — including any from the
   parent stylesheets that try to highlight rows on hover. */
body.sl-injected .m-table tr:hover,
body.sl-injected .m-table tr:hover > td,
body.sl-injected .m-table tr:hover > th,
body.sl-injected .m-table a:hover,
body.sl-injected .m-table td:hover {
    background: inherit !important;
    color: inherit !important;
    cursor: pointer; /* rows in results.php remain clickable */
}

/* ---- MOBILE CARDS (<= 640px) -------------------------------- */

@media (max-width: 640px) {
    /* The table itself becomes a vertical stack of cards.
       Header (title3 row) is hidden — labels are injected in cells. */
    body.sl-injected .m-table,
    body.sl-injected .m-table > tbody,
    body.sl-injected .m-table > tbody > tr {
        display: block !important;
        width: 100% !important;
    }

    /* Hide the original column-header row(s). The PHP-rendered tables
       use different markers for "this is the column header":
         - explicit class="m-thead" (added in coursesmap.php)
         - title3-only cells (results.php pattern)
         - the transscript header table is its own <table class="m-transcript-head"> */
    body.sl-injected .m-table > tbody > tr.m-thead,
    body.sl-injected .m-table.m-results > tbody > tr:has(> td.title3) {
        display: none !important;
    }
    body.sl-injected .m-table.m-transcript-head {
        display: none !important;
    }

    /* Each row becomes a card */
    body.sl-injected .m-table > tbody > tr {
        background: var(--white) !important;
        border: 1px solid var(--border) !important;
        border-radius: 12px !important;
        padding: 14px 16px !important;
        margin-bottom: 10px;
        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04);
        position: relative;
    }

    /* The legacy striping is killed on mobile — every card looks
       identical for clarity. */
    body.sl-injected .m-table > tbody > tr[bgcolor] {
        background: var(--white) !important;
    }

    /* Each cell becomes a label-value row */
    body.sl-injected .m-table > tbody > tr > td {
        display: grid !important;
        grid-template-columns: minmax(110px, 40%) 1fr;
        align-items: baseline;
        gap: 8px;
        padding: 6px 0 !important;
        border: none !important;
        text-align: left !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        color: var(--text);
        width: 100% !important;
    }

    /* The injected label */
    body.sl-injected .m-table > tbody > tr > td::before {
        content: attr(data-label);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    /* When data-label is missing, fall back to nth-child labels
       below. ::before with empty content takes no space. */
    body.sl-injected .m-table > tbody > tr > td[data-label=""]::before {
        content: "";
        display: none;
    }

    /* The first column on each card (typically subject name / # or code)
       becomes a "headline" — full width, big and bold. */
    body.sl-injected .m-table.m-headline-first > tbody > tr > td:first-child {
        grid-template-columns: 1fr !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        color: var(--green-dark) !important;
        margin-bottom: 4px;
        padding-bottom: 8px !important;
        border-bottom: 1px solid var(--border) !important;
    }
    body.sl-injected .m-table.m-headline-first > tbody > tr > td:first-child::before {
        display: none;
    }

    /* Inner <center>, <font>, <b> tags shouldn't reset alignment */
    body.sl-injected .m-table > tbody > tr > td center,
    body.sl-injected .m-table > tbody > tr > td font {
        display: inline;
        text-align: left;
    }

    /* Hidden the "small icon" column entirely on mobile */
    body.sl-injected .m-table .m-hide-mobile,
    body.sl-injected .m-table img[src*="m_icon"] { display: none !important; }
}

/* ---- Per-table column labels (mobile only) ------------------ */

@media (max-width: 640px) {

    /* coursesmap.php — Remaining Subjects table
       Columns: # | Name | Code | Credit Hours | Type */
    body.sl-injected .m-table.m-courses > tbody > tr > td:nth-child(1) { display: none !important; } /* hide the "#" — meaningless on a card */
    body.sl-injected .m-table.m-courses > tbody > tr > td:nth-child(2) {
        grid-template-columns: 1fr !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        color: var(--green-dark) !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid var(--border) !important;
        margin-bottom: 4px;
    }
    body.sl-injected .m-table.m-courses > tbody > tr > td:nth-child(2)::before { display: none; }
    body.sl-injected .m-table.m-courses > tbody > tr > td:nth-child(3)::before { content: "Code"; }
    body.sl-injected .m-table.m-courses > tbody > tr > td:nth-child(4)::before { content: "Credit Hours"; }
    body.sl-injected .m-table.m-courses > tbody > tr > td:nth-child(5)::before { content: "Type"; }

    /* Hide the program-name title row (colspan=5) — we'll show the
       program as a section heading outside the table. */
    body.sl-injected .m-table.m-courses > tbody > tr:has(> td[colspan]) {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 16px 0 8px !important;
        margin-bottom: 0 !important;
    }
    body.sl-injected .m-table.m-courses > tbody > tr:has(> td[colspan]) > td {
        display: block !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
        color: var(--text-muted) !important;
        padding: 0 !important;
    }
    body.sl-injected .m-table.m-courses > tbody > tr:has(> td[colspan]) > td::before {
        display: none !important;
    }

    /* results.php — 8 columns:
       icon | Subject | Semester | Exam | Research | Attendance | Notes | %
       Index:  1        2          3        4         5            6        7        8 */
    body.sl-injected .m-table.m-results > tbody > tr > td:nth-child(1) { display: none !important; }
    body.sl-injected .m-table.m-results > tbody > tr > td:nth-child(2) {
        grid-template-columns: 1fr !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        color: var(--green-dark) !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid var(--border) !important;
        margin-bottom: 4px;
        text-align: left !important;
    }
    body.sl-injected .m-table.m-results > tbody > tr > td:nth-child(2)::before { display: none; }
    body.sl-injected .m-table.m-results > tbody > tr > td:nth-child(3)::before { content: "Semester"; }
    body.sl-injected .m-table.m-results > tbody > tr > td:nth-child(4)::before { content: "Exam"; }
    body.sl-injected .m-table.m-results > tbody > tr > td:nth-child(5)::before { content: "Research"; }
    body.sl-injected .m-table.m-results > tbody > tr > td:nth-child(6)::before { content: "Attendance"; }
    body.sl-injected .m-table.m-results > tbody > tr > td:nth-child(7)::before { content: "Notes"; }
    body.sl-injected .m-table.m-results > tbody > tr > td:nth-child(8)::before { content: "Percentage"; }

    /* The percentage cell gets a "pill" treatment for emphasis */
    body.sl-injected .m-table.m-results > tbody > tr > td:nth-child(8) {
        font-size: 15px !important;
        font-weight: 700 !important;
    }
    body.sl-injected .m-table.m-results > tbody > tr > td:nth-child(8) font[color] {
        background: rgb(217 119 6 / 0.10);
        color: #b45309 !important;
        padding: 2px 10px;
        border-radius: 999px;
        font-weight: 700;
    }

    /* transscript.php — Code | Subject | Credit Hours | GPA | Degree */
    body.sl-injected .m-table.m-transcript > tbody > tr > td:nth-child(1) {
        grid-template-columns: 1fr !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text-muted) !important;
        padding-bottom: 0 !important;
    }
    body.sl-injected .m-table.m-transcript > tbody > tr > td:nth-child(1)::before { display: none; }
    body.sl-injected .m-table.m-transcript > tbody > tr > td:nth-child(2) {
        grid-template-columns: 1fr !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        color: var(--green-dark) !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid var(--border) !important;
        margin-bottom: 4px;
        text-align: left !important;
    }
    body.sl-injected .m-table.m-transcript > tbody > tr > td:nth-child(2)::before { display: none; }
    body.sl-injected .m-table.m-transcript > tbody > tr > td:nth-child(3)::before { content: "Credit Hours"; }
    body.sl-injected .m-table.m-transcript > tbody > tr > td:nth-child(4)::before { content: "GPA"; }
    body.sl-injected .m-table.m-transcript > tbody > tr > td:nth-child(5)::before { content: "Degree"; }
}

/* ---- GLOBAL TABLE HOVER REMOVAL (student-facing pages) -------- */
/* Cancel hover side-effects on every table inside the shell — applies
   to every student-end page, not just the .no-hover-flagged ones.
   Striped rows use `tr[bgcolor]>td` rules (no :hover); leaving those
   untouched means the row's resting stripe color persists on hover. */

body.sl-injected .sl-content-body table tr:hover > td,
body.sl-injected .sl-content-body table tr:hover > th,
body.sl-injected .sl-content-card table tr:hover > td,
body.sl-injected .sl-content-card table tr:hover > th,
body.sl-injected .sl-content-body table#table4 tbody tr:hover > td,
body.sl-injected .sl-content-card table#table4 tbody tr:hover > td,
body.sl-injected table#table4 tbody tr:hover > td {
    background: inherit !important;
    background-color: inherit !important;
    color: inherit !important;
    transition: none !important;
    filter: none !important;
}

/* Restore striping colour on hover for tr[bgcolor] rows so the row
   keeps its striped background instead of going transparent. */
body.sl-injected tr[bgcolor="#e9e9e9"]:hover > td,
body.sl-injected tr[bgcolor="#E9E9E9"]:hover > td,
body.sl-injected tr[BGCOLOR="#e9e9e9"]:hover > td,
body.sl-injected tr[BGCOLOR="#E9E9E9"]:hover > td {
    background-color: #fafafa !important;
}

/* ---- HOVER REMOVAL on flagged pages -------------------------- */
/* When pages add body.no-hover (set in PHP for the 3 problem pages),
   strip ALL hover/focus side effects so the design stays static on
   pointer move (per request). */

body.sl-injected.no-hover *:hover,
body.sl-injected.no-hover a:hover,
body.sl-injected.no-hover button:hover,
body.sl-injected.no-hover tr:hover,
body.sl-injected.no-hover tr:hover > td,
body.sl-injected.no-hover .sl-content-card a:hover {
    background: inherit !important;
    background-color: inherit !important;
    color: inherit !important;
    text-decoration: none !important;
    transform: none !important;
    box-shadow: inherit !important;
    filter: none !important;
}

/* ---- HOVER REMOVAL (mirror specificity of the polish file)
   The default polish.css applies :hover styles to inputs, buttons,
   links, .button/.btn etc — those have higher specificity than the
   universal `*:hover` rule above and beat it even with !important.
   Mirror the polish selectors here under body.no-hover so we win. */

body.sl-injected.no-hover .sl-content-card input[type="submit"]:hover,
body.sl-injected.no-hover .sl-content-card input[type="button"]:hover,
body.sl-injected.no-hover .sl-content-card button:hover {
    background: var(--green-dark) !important;
    box-shadow: var(--m-shadow-sm) !important;
    transform: none !important;
    filter: none !important;
}
body.sl-injected.no-hover .sl-content-card input[type="reset"]:hover {
    background: var(--white) !important;
    color: var(--text) !important;
    transform: none !important;
}
body.sl-injected.no-hover .sl-content-card .button:hover,
body.sl-injected.no-hover .sl-content-card .btn:hover,
body.sl-injected.no-hover .sl-content-card a.button:hover,
body.sl-injected.no-hover .sl-content-card a.btn:hover {
    background: var(--green-dark) !important;
    color: var(--white) !important;
    transform: none !important;
    box-shadow: var(--m-shadow-sm) !important;
}
body.sl-injected.no-hover .sl-content-card a:hover {
    color: var(--green-mid) !important;
    text-decoration: none !important;
    background: transparent !important;
}

/* Table-row hover suppression with high specificity */
body.sl-injected.no-hover .sl-content-card table tr:hover,
body.sl-injected.no-hover .sl-content-card table tr:hover > td,
body.sl-injected.no-hover .sl-content-card .m-table tr:hover,
body.sl-injected.no-hover .sl-content-card .m-table tr:hover > td,
body.sl-injected.no-hover .sl-content-card table:has(> tbody > tr > td.title3) tr:hover,
body.sl-injected.no-hover .sl-content-card table:has(> tbody > tr > td.title3) tr:hover > td {
    background: inherit !important;
    background-color: inherit !important;
    color: inherit !important;
    transition: none !important;
}

/* Beat student-library.css line 438 — its `#table4` ID gives it higher
   specificity than the class-only no-hover rules above. Mirror the ID
   here so we win on specificity. */
body.sl-injected.no-hover .sl-content-body table#table4 tbody tr:hover > td,
body.sl-injected.no-hover .sl-content-body table#table4 tr:hover > td,
body.sl-injected.no-hover .sl-content-card table#table4 tbody tr:hover > td,
body.sl-injected.no-hover .sl-content-card table#table4 tr:hover > td,
body.sl-injected.no-hover table#table4 tbody tr:hover > td,
body.sl-injected.no-hover table#table4 tr:hover > td {
    background: transparent !important;
    background-color: transparent !important;
    color: inherit !important;
    transition: none !important;
}

/* Stitch tab hover suppression */
body.sl-injected.no-hover .sl-content-card ul.tab-list > li > a.tab-item:hover {
    background: transparent !important;
    color: var(--text-muted, #404942) !important;
}
body.sl-injected.no-hover .sl-content-card ul.tab-list > li > a.tab-item.tab-active:hover {
    background: var(--green-dark, #004428) !important;
    color: #fff !important;
}

/* Disable CSS transitions entirely so even color/box-shadow doesn't
   animate on hover for these pages */
body.sl-injected.no-hover .sl-content-card *,
body.sl-injected.no-hover .sl-content-card *::before,
body.sl-injected.no-hover .sl-content-card *::after {
    transition: none !important;
}

/* Keep cursor pointer on clickable rows even with hover suppressed */
body.sl-injected.no-hover tr[onclick],
body.sl-injected.no-hover [onclick] { cursor: pointer; }

/* ---- Visual polish that applies on both desktop & mobile ---- */

/* Section divider row (program-name header inside coursesmap table) */
body.sl-injected .m-table.m-courses td[colspan] {
    background: var(--bg);
    font-weight: 700;
    color: var(--green-dark);
    letter-spacing: 0.02em;
}

/* Percentage badge on desktop too */
body.sl-injected .m-table.m-results td:last-child font[color] {
    font-weight: 700;
}