/*
 * Parents Computer School Management: full-width + mobile layout layer.
 * Loaded only on the plugin's admin pages (body.pcsm-admin-page) and on
 * front-end pages with plugin shortcodes (body.pcsm-front-page).
 * Every rule is screen-only so printed documents keep their exact layout.
 */

@media screen {
    /* ---------- Login forms: always a compact centered box, never full width ---------- */
    .pcsm-login-frame {
        max-width: 420px !important;
        width: 100% !important;
        margin: 40px auto !important;
        box-sizing: border-box !important;
    }

    /* ---------- Space above the page ----------
       A portal drawn by the theme (pcsm_use_app_template turned off) starts
       directly under the site header, so the first card had nothing above it. */
    body.pcsm-front-page .pcsm-portal {
        margin-top: 28px !important;
    }

    /* ---------- Desktop: use the full available width ---------- */
    body.pcsm-admin-page #wpbody-content .wrap {
        max-width: none;
    }

    body.pcsm-front-page .entry-content,
    body.pcsm-front-page .wp-block-post-content,
    body.pcsm-front-page .post-content,
    body.pcsm-front-page .page-content,
    body.pcsm-front-page .site-main,
    body.pcsm-front-page #primary,
    body.pcsm-front-page .content-area,
    body.pcsm-front-page main .is-layout-constrained > :where(:not(.alignleft):not(.alignright)),
    body.pcsm-front-page .entry-content > :where(:not(.alignleft):not(.alignright)) {
        max-width: none !important;
    }

    body.pcsm-front-page .entry-content,
    body.pcsm-front-page .wp-block-post-content {
        width: 100% !important;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }

    /* Login boxes stay a comfortable size on large screens */
    .pcsm-login-frame {
        max-width: 420px !important;
    }
}

/* ---------- Tablets and phones ---------- */
@media screen and (max-width: 960px) {
    body.pcsm-admin-page #wpbody-content :is(div, form, section, fieldset, label, img, input, select, textarea, button, iframe, canvas),
    body.pcsm-front-page :is(.entry-content, .wp-block-post-content, main) :is(div, form, section, fieldset, label, img, input, select, textarea, button, iframe, canvas) {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Side-by-side grids become a single column */
    body.pcsm-admin-page #wpbody-content [style*="grid-template-columns"],
    body.pcsm-admin-page #wpbody-content [class*="grid"],
    body.pcsm-front-page :is(.entry-content, .wp-block-post-content, main) [style*="grid-template-columns"],
    body.pcsm-front-page :is(.entry-content, .wp-block-post-content, main) [class*="grid"],
    body.pcsm-admin-page #wpbody-content .pc-sm-container,
    body.pcsm-front-page .pc-sm-container {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* Grid items that span several columns must not force extra columns */
    body.pcsm-admin-page #wpbody-content [style*="grid-column"],
    body.pcsm-front-page [style*="grid-column"] {
        grid-column: auto !important;
    }

    /* Rows of cards, filters and buttons wrap instead of overflowing */
    body.pcsm-admin-page #wpbody-content :is([style*="display: flex"], [style*="display:flex"], [style*="display: inline-flex"], [style*="display:inline-flex"]),
    body.pcsm-front-page :is(.entry-content, .wp-block-post-content, main) :is([style*="display: flex"], [style*="display:flex"], [style*="display: inline-flex"], [style*="display:inline-flex"]) {
        flex-wrap: wrap;
    }

    /* Wide tables scroll sideways instead of breaking the page */
    /* (a table stays a real table at full width; pcsm-mobile.js puts a too-wide one in a box that scrolls) */
    body.pcsm-admin-page #wpbody-content table:not(.wp-list-table),
    body.pcsm-front-page :is(.entry-content, .wp-block-post-content, main) table {
        width: 100% !important;
    }

    body.pcsm-admin-page #wpbody-content table:not(.wp-list-table) :is(th, td),
    body.pcsm-front-page :is(.entry-content, .wp-block-post-content, main) table :is(th, td) {
        white-space: nowrap;
    }

    /* Fixed-width boxes shrink to the screen */
    body.pcsm-admin-page #wpbody-content [style*="width:"]:not(table *):not(table):not(img):not(input[type="checkbox"]):not(input[type="radio"]),
    body.pcsm-front-page :is(.entry-content, .wp-block-post-content, main) [style*="width:"]:not(table *):not(table):not(img):not(input[type="checkbox"]):not(input[type="radio"]) {
        min-width: 0 !important;
    }
}

/* ---------- Phones ---------- */
@media screen and (max-width: 600px) {
    /* Form fields outside tables take the full row and are easy to tap */
    body.pcsm-admin-page #wpbody-content :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea):not(table *),
    body.pcsm-front-page :is(.entry-content, .wp-block-post-content, main) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea):not(table *) {
        width: 100% !important;
        min-height: 40px;
        font-size: 16px; /* stops iPhone zooming in on focus */
    }

    body.pcsm-admin-page #wpbody-content :is(button, .button, input[type="submit"]):not(table *),
    body.pcsm-front-page :is(.entry-content, .wp-block-post-content, main) :is(button, .button, input[type="submit"]):not(table *) {
        min-height: 40px;
    }

    /* Tighter padding so content gets the screen */
    body.pcsm-admin-page #wpbody-content .wrap {
        margin-left: 4px !important;
        margin-right: 4px !important;
    }

    body.pcsm-admin-page #wpbody-content [style*="padding: 25px"],
    body.pcsm-admin-page #wpbody-content [style*="padding: 30px"],
    body.pcsm-admin-page #wpbody-content [style*="padding:25px"],
    body.pcsm-admin-page #wpbody-content [style*="padding:30px"],
    body.pcsm-front-page [style*="padding: 25px"],
    body.pcsm-front-page [style*="padding: 30px"],
    body.pcsm-front-page [style*="padding:25px"],
    body.pcsm-front-page [style*="padding:30px"] {
        padding: 14px !important;
    }

    /* Tab bars scroll sideways in one line */
    body.pcsm-admin-page #wpbody-content .nav-tab-wrapper,
    .pc-shortcode-nav-tab-wrapper {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        white-space: nowrap;
    }

    body.pcsm-front-page h1 { font-size: 22px; }
    body.pcsm-front-page h2 { font-size: 19px; }
}

/* ---------- 2.17.0: helper classes set by assets/js/pcsm-mobile.js (phones and tablets) ---------- */
@media screen and (max-width: 782px) {
    .pcsm-m-stack {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
    }
    .pcsm-m-stack > * {
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .pcsm-m-fit {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .pcsm-m-fit:not(input):not(select):not(textarea):not(button) { width: auto !important; }
    /* on phones every tab stays visible: tabs wrap onto a second line */
    body.pcsm-admin-page #wpbody-content .nav-tab-wrapper,
    .pc-shortcode-nav-tab-wrapper,
    body.pcsm-theme .pcsm-t-tabs {
        display: flex !important;
        flex-wrap: wrap !important;
        overflow: visible !important;
        white-space: normal !important;
        row-gap: 6px;
    }
    body.pcsm-admin-page #wpbody-content .nav-tab-wrapper .nav-tab { float: none !important; margin: 0 !important; }
    .pcsm-m-twrap { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table.pcsm-m-tstack, table.pcsm-m-tstack > tbody, table.pcsm-m-tstack > tbody > tr, table.pcsm-m-tstack > tr,
    table.pcsm-m-tstack > tbody > tr > td, table.pcsm-m-tstack > tr > td { display: block !important; width: 100% !important; box-sizing: border-box; padding-left: 0 !important; padding-right: 0 !important; }
    table.pcsm-m-tstack table { display: table !important; width: 100% !important; }
    table.pcsm-m-tscroll { display: table !important; max-width: none !important; }
    table.pcsm-m-tscroll th, table.pcsm-m-tscroll td:last-child { white-space: nowrap; }
    .pcsm-m-wrap { flex-wrap: wrap !important; white-space: normal !important; height: auto !important; row-gap: 6px; }
    .pcsm-m-wrap:not([style*="display: flex"]) { display: flex !important; }
    .pcsm-m-cols-1 { grid-template-columns: minmax(0, 1fr) !important; }
    .pcsm-m-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .pcsm-m-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .pcsm-m-cols-1 > *, .pcsm-m-cols-2 > *, .pcsm-m-cols-3 > * { grid-column: auto !important; min-width: 0 !important; }

    /* printable documents keep their layout on screen and scroll sideways */
    .pcsm-m-docwrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; max-width: 100% !important; }
    .pcsm-m-doc { min-width: 700px !important; }

    /* the admin page itself never scrolls sideways */
    body.pcsm-admin-page #wpbody-content { overflow-x: hidden; }
    body.pcsm-admin-page #wpbody-content .wrap { max-width: 100%; }
    body.pcsm-admin-page #wpbody-content :is(h1, h2, h3, h4) { word-break: normal; overflow-wrap: anywhere; }
    body.pcsm-admin-page #wpbody-content :is(h1, h2) { line-height: 1.3 !important; }
    body.pcsm-admin-page #wpbody-content h1 { font-size: clamp(20px, 6vw, 26px) !important; }

    /* WordPress turns .wp-list-table rows into stacked blocks on small screens; the plugin's
       tables stay real tables (header cells side by side, Action buttons in their own column) */
    body.pcsm-admin-page #wpbody-content table.wp-list-table { display: table !important; table-layout: auto !important; }
    body.pcsm-admin-page #wpbody-content table.wp-list-table thead { display: table-header-group !important; }
    body.pcsm-admin-page #wpbody-content table.wp-list-table tbody { display: table-row-group !important; }
    body.pcsm-admin-page #wpbody-content table.wp-list-table tfoot { display: table-footer-group !important; }
    body.pcsm-admin-page #wpbody-content table.wp-list-table tr { display: table-row !important; }
    body.pcsm-admin-page #wpbody-content table.wp-list-table :is(th, td):not(.hidden):not([style*="display:none"]):not([style*="display: none"]) {
        display: table-cell !important;
        float: none !important;
        position: static !important;
        width: auto;
        padding: 8px 10px !important;
        vertical-align: middle;
    }
    body.pcsm-admin-page #wpbody-content table.wp-list-table :is(th, td)::before { content: none !important; display: none !important; }
    body.pcsm-admin-page #wpbody-content table.wp-list-table .toggle-row { display: none !important; }
    body.pcsm-admin-page #wpbody-content table.wp-list-table td :is(.button, button, a.button) { white-space: nowrap; }

    /* Taking attendance on a phone: one student per row, roll and name on top, big Present / Absent / Late buttons below */
    table.pcsm-att-entry, table.pcsm-att-entry > tbody { display: block !important; width: 100% !important; overflow: visible !important; }
    table.pcsm-att-entry > thead { display: none !important; }
    table.pcsm-att-entry > tbody > tr { display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 10px; padding: 10px 4px; border-bottom: 1px solid #e2e8f0; height: auto !important; }
    table.pcsm-att-entry > tbody > tr > td { display: block !important; border: 0 !important; padding: 0 !important; background: transparent !important; white-space: normal !important; text-align: left !important; }
    table.pcsm-att-student > tbody > tr > td:nth-child(2) { display: none !important; }
    table.pcsm-att-entry > tbody > tr > td:last-child { grid-column: 1 / -1; }
    table.pcsm-att-entry > tbody > tr > td:last-child > div { justify-content: flex-start !important; gap: 8px !important; flex-wrap: wrap; }
    table.pcsm-att-entry > tbody > tr > td:last-child label { flex: 1 1 0; justify-content: center; border: 1px solid #cbd5e1; border-radius: 8px; padding: 9px 6px; background: #fff; font-size: 13.5px !important; min-height: 40px; }
    table.pcsm-att-entry > tbody > tr > td:last-child label:has(input:checked) { background: #f8fafc; background: color-mix(in srgb, currentColor 9%, #fff); border-color: currentColor; box-shadow: 0 0 0 1px currentColor inset; }

    /* Entering marks on a phone (screen only; the printed sheet is unchanged) */
    table.pc-marks-table { table-layout: auto !important; display: block !important; width: 100% !important; }
    table.pc-marks-table > thead { display: none !important; }
    table.pc-marks-table > tbody { display: block !important; }
    table.pc-marks-table > tbody > tr { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 8px; align-items: end; padding: 12px 4px; border-bottom: 1px solid #e2e8f0; }
    table.pc-marks-table > tbody > tr > td { display: block !important; border: 0 !important; padding: 0 !important; white-space: normal !important; width: auto !important; }
    table.pc-marks-table > tbody > tr > td:first-child { grid-column: 1 / 2; font-size: 13px; color: #64748b; }
    table.pc-marks-table > tbody > tr > td:first-child::before { content: "Roll "; font-weight: 400; }
    table.pc-marks-table > tbody > tr > td.pcsm-mk-name { grid-column: 2 / -1; font-size: 14px; }
    table.pc-marks-table > tbody > tr > td.pcsm-mk-adm,
    table.pc-marks-table > tbody > tr > td.pcsm-mk-zero { display: none !important; }
    table.pc-marks-table > tbody > tr > td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 600; color: #64748b; margin-bottom: 3px; text-align: center; }
    table.pc-marks-table .input-mark { max-width: none !important; width: 100% !important; height: 42px; font-size: 16px !important; }
    table.pc-marks-table td.live-total-cell { font-size: 16px !important; line-height: 42px; }
    #pc_bulk_marks_form input[name="pc_save_bulk_marks"] { width: 100%; white-space: normal; padding: 12px 14px !important; }
    table.pc-marks-table td.pcsm-mk-abs label { display: flex; align-items: center; justify-content: center; gap: 4px; height: 42px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; }

    /* table headers never break letter by letter */
    body.pcsm-admin-page #wpbody-content table th,
    body.pcsm-front-page table th { word-break: normal !important; overflow-wrap: normal !important; }
}

/* ---------- Student Management list on tablets and phones (desktop above 1200px is unchanged) ----------
   Each student becomes one card: photo and bio data on the left, ID / class details beside them,
   the subject chips on their own full-width line, and the action buttons with the status at the bottom. */
@media screen and (max-width: 1200px) {
    body.pcsm-admin-page #wpbody-content table.pcsm-stu-list { display: block !important; table-layout: auto !important; width: 100% !important; }
    body.pcsm-admin-page #wpbody-content table.pcsm-stu-list > thead { display: none !important; }
    body.pcsm-admin-page #wpbody-content table.pcsm-stu-list > tbody { display: block !important; }
    body.pcsm-admin-page #wpbody-content table.pcsm-stu-list > tbody > tr.pcsm-clickable-student-row {
        display: grid !important;
        grid-template-columns: 58px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
        gap: 6px 14px;
        align-items: start;
        padding: 12px 14px;
        border-bottom: 1px solid #e2e8f0;
    }
    body.pcsm-admin-page #wpbody-content table.pcsm-stu-list > tbody > tr.pcsm-clickable-student-row > td:not(.pcsm-z1):not(.pcsm-z2):not(.pcsm-z3) {
        display: block !important;
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
        position: static !important;
        float: none !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: normal;
        background: transparent !important;
        box-shadow: none !important;
    }
    body.pcsm-admin-page #wpbody-content table.pcsm-stu-list > tbody > tr > td:nth-child(3):not(.pcsm-z1):not(.pcsm-z2):not(.pcsm-z3) { grid-column: 1; grid-row: 1 / 3; }
    body.pcsm-admin-page #wpbody-content table.pcsm-stu-list > tbody > tr > td:nth-child(3) > div { margin: 0 !important; width: 52px !important; height: 62px !important; }
    body.pcsm-admin-page #wpbody-content table.pcsm-stu-list > tbody > tr > td:nth-child(4):not(.pcsm-z1):not(.pcsm-z2):not(.pcsm-z3) { grid-column: 2; grid-row: 1 / 3; }
    body.pcsm-admin-page #wpbody-content table.pcsm-stu-list > tbody > tr > td:nth-child(5):not(.pcsm-z1):not(.pcsm-z2):not(.pcsm-z3) { grid-column: 3; grid-row: 1; }
    body.pcsm-admin-page #wpbody-content table.pcsm-stu-list > tbody > tr > td:nth-child(6):not(.pcsm-z1):not(.pcsm-z2):not(.pcsm-z3) { grid-column: 4; grid-row: 1; }
    body.pcsm-admin-page #wpbody-content table.pcsm-stu-list > tbody > tr > td:nth-child(2):not(.pcsm-z1):not(.pcsm-z2):not(.pcsm-z3) { grid-column: 3; grid-row: 2; align-self: end; }
    body.pcsm-admin-page #wpbody-content table.pcsm-stu-list > tbody > tr > td:nth-child(8):not(.pcsm-z1):not(.pcsm-z2):not(.pcsm-z3) { grid-column: 4; grid-row: 2; align-self: end; }
    body.pcsm-admin-page #wpbody-content table.pcsm-stu-list > tbody > tr > td:nth-child(1):not(.pcsm-z1):not(.pcsm-z2):not(.pcsm-z3) { grid-column: 1; grid-row: 3; font-size: 12px; color: #64748b; padding-top: 4px !important; }
    body.pcsm-admin-page #wpbody-content table.pcsm-stu-list > tbody > tr > td:nth-child(1):not(.pcsm-z1):not(.pcsm-z2):not(.pcsm-z3)::before { content: "#" !important; display: inline !important; position: static !important; width: auto !important; }
    body.pcsm-admin-page #wpbody-content table.pcsm-stu-list > tbody > tr > td:nth-child(7):not(.pcsm-z1):not(.pcsm-z2):not(.pcsm-z3) { grid-column: 2 / -1; grid-row: 3; }
    body.pcsm-admin-page #wpbody-content table.pcsm-stu-list > tbody > tr > td:nth-child(2) .button { height: 32px !important; min-width: 34px !important; }
    body.pcsm-admin-page #wpbody-content table.pcsm-stu-list > tbody > tr > td:nth-child(7) .pcsm-sub-badge { white-space: normal !important; }
}
@media screen and (max-width: 600px) {
    body.pcsm-admin-page #wpbody-content table.pcsm-stu-list > tbody > tr.pcsm-clickable-student-row { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr); gap: 8px 10px; padding: 12px 10px; }
    body.pcsm-admin-page #wpbody-content table.pcsm-stu-list > tbody > tr > td:nth-child(3):not(.pcsm-z1):not(.pcsm-z2):not(.pcsm-z3) { grid-column: 1; grid-row: 1; }
    body.pcsm-admin-page #wpbody-content table.pcsm-stu-list > tbody > tr > td:nth-child(4):not(.pcsm-z1):not(.pcsm-z2):not(.pcsm-z3) { grid-column: 2 / -1; grid-row: 1; }
    body.pcsm-admin-page #wpbody-content table.pcsm-stu-list > tbody > tr > td:nth-child(5):not(.pcsm-z1):not(.pcsm-z2):not(.pcsm-z3) { grid-column: 1 / 3; grid-row: 2; }
    body.pcsm-admin-page #wpbody-content table.pcsm-stu-list > tbody > tr > td:nth-child(6):not(.pcsm-z1):not(.pcsm-z2):not(.pcsm-z3) { grid-column: 3; grid-row: 2; }
    body.pcsm-admin-page #wpbody-content table.pcsm-stu-list > tbody > tr > td:nth-child(7):not(.pcsm-z1):not(.pcsm-z2):not(.pcsm-z3) { grid-column: 1 / -1; grid-row: 3; }
    body.pcsm-admin-page #wpbody-content table.pcsm-stu-list > tbody > tr > td:nth-child(1):not(.pcsm-z1):not(.pcsm-z2):not(.pcsm-z3) { grid-column: 1; grid-row: 4; align-self: center; padding-top: 0 !important; }
    body.pcsm-admin-page #wpbody-content table.pcsm-stu-list > tbody > tr > td:nth-child(2):not(.pcsm-z1):not(.pcsm-z2):not(.pcsm-z3) { grid-column: 2; grid-row: 4; }
    body.pcsm-admin-page #wpbody-content table.pcsm-stu-list > tbody > tr > td:nth-child(8):not(.pcsm-z1):not(.pcsm-z2):not(.pcsm-z3) { grid-column: 3; grid-row: 4; align-self: center; text-align: right !important; }
}

/* Student Management on phones is for looking students up only: no action buttons, no Bulk Print, no New Admission */
@media screen and (max-width: 782px) {
    body.pcsm-admin-page #wpbody-content #pcsm_global_bulk_print_btn,
    body.pcsm-admin-page #wpbody-content #pcsm_global_admission_btn { display: none !important; }
    body.pcsm-admin-page #wpbody-content table.pcsm-stu-list > tbody > tr > td:nth-child(2):not(.pcsm-z1):not(.pcsm-z2):not(.pcsm-z3) { display: none !important; }
    body.pcsm-admin-page #wpbody-content table.pcsm-stu-list > tbody > tr.pcsm-clickable-student-row { cursor: default !important; }
}