/* ================================================================
   MISHKAH GLOBAL POLISH — mobile-first responsive layer.
   Applied AFTER student-library.css so this wins where they overlap.
   Scoped to body.sl-injected so it only affects shelled pages.
   ================================================================ */

/* --------------------------------------------------------------
   1. Typography — Atkinson Hyperlegible Next site-wide.
   -------------------------------------------------------------- */

body.sl-injected,
body.sl-injected input,
body.sl-injected select,
body.sl-injected textarea,
body.sl-injected button {
    font-family: 'Atkinson Hyperlegible Next',
                 -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Arial, sans-serif !important;
}

/* --------------------------------------------------------------
   2. Color tokens — Mishkah Modern Learning palette.
   The original tokens (--green-dark / --green-mid / --bg / --border)
   already exist in student-library.css; here we refine them to
   match the Stitch design system without breaking anything that
   depends on them.
   -------------------------------------------------------------- */

body.sl-injected {
    --green-dark:   #004428;
    --green-mid:    #165d3b;
    --green-light:  #e8f5ee;
    --bg:           #f8f9ff;
    --white:        #ffffff;
    --border:       #bfc9c0;
    --text:         #0b1c30;
    --text-muted:   #404942;
    --accent:       #fc9910;
    --error:        #ba1a1a;

    --m-radius-sm:  0.5rem;
    --m-radius-md:  0.75rem;
    --m-radius-lg:  1rem;
    --m-shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
    --m-shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.10);
}

/* --------------------------------------------------------------
   3. Shell polish — header, sidebar, layout.
   -------------------------------------------------------------- */

body.sl-injected .sl-hdr {
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}

/* --------------------------------------------------------------
   4. Content cards — the .sl-content-card already exists; just
   make sure it reads cleanly on every page.
   -------------------------------------------------------------- */

body.sl-injected .sl-content-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--m-radius-md);
    box-shadow: var(--m-shadow-sm);
    overflow: visible;
}

body.sl-injected .sl-content-card-head {
    border-bottom: 1px solid var(--border);
    padding: 18px 24px;
}

/* --------------------------------------------------------------
   5. Tables — make every legacy fixed-width table responsive.
   This is the single biggest legacy-shell problem: tables with
   `width="1030"` or pixel widths overflow on mobile.
   -------------------------------------------------------------- */

/* Default: tables fluid up to their content width, never wider
   than their parent. */
body.sl-injected .sl-content-card table,
body.sl-injected .sl-content-body table {
    max-width: 100%;
    border-collapse: collapse;
}

/* Reset the legacy `width="1030"` outer wrappers — they don't
   need to dictate page width once the sl-main container exists. */
body.sl-injected table#table1[width="1030"],
body.sl-injected table#table1[width="980"] {
    width: 100% !important;
    max-width: 100% !important;
}

/* Make legacy fixed-cell-width data tables wrap text instead
   of forcing horizontal scroll. */
body.sl-injected .sl-content-card td,
body.sl-injected .sl-content-card th {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* The cart/data tables inside sl-content-card already get a
   480px min-width in student-library.css below 768px to keep
   columns legible — wrap them in a horizontal scroll container
   only when needed (CSS provides this via overflow:auto on the
   card body, which student-library.css already declares). */

/* --------------------------------------------------------------
   6. Typography polish — headings use Mishkah scale.
   -------------------------------------------------------------- */

body.sl-injected h1 {
    font-size: 28px;
    line-height: 36px;
    font-weight: 700;
    color: var(--green-dark);
    letter-spacing: -0.01em;
}

/* Banner uses a dark-green gradient bg, so headings inside it must be
   white to stay legible — the default green-on-green is invisible. */
body.sl-injected .sl-banner h1,
body.sl-injected .sl-banner h2,
body.sl-injected .sl-banner h3,
body.sl-injected .sl-banner-text h1,
body.sl-injected .sl-banner-text h2,
body.sl-injected .sl-banner-text h3 {
    color: #ffffff !important;
}

body.sl-injected h2 {
    font-size: 22px;
    line-height: 30px;
    font-weight: 700;
    color: var(--text);
}

body.sl-injected h3 {
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
    color: var(--text);
}

/* Legacy <font size="4|5|6"> tags get scaled down so they don't
   feel oversized inside our cards. */
body.sl-injected .sl-content-card font[size="4"],
body.sl-injected .sl-content-card font[size="5"],
body.sl-injected .sl-content-card font[size="6"],
body.sl-injected .sl-content-card font[size="7"] {
    font-size: 18px !important;
    font-weight: 600;
}

/* --------------------------------------------------------------
   7. Section title cells (.title2 / .title3 / .maintitle /
   .maintitel) — the legacy app uses these everywhere as
   pseudo-headings inside table layouts. Standardize them.
   -------------------------------------------------------------- */

body.sl-injected .sl-content-card .maintitel,
body.sl-injected .sl-content-card td.maintitel,
body.sl-injected .sl-content-card .maintitle,
body.sl-injected .sl-content-card td.maintitle {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--green-dark) !important;
    letter-spacing: -0.01em;
    padding: 16px 20px !important;
    border-bottom: 1px solid var(--border) !important;
    background: transparent !important;
    text-align: left !important;
}

body.sl-injected .sl-content-card .title1,
body.sl-injected .sl-content-card td.title1 {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    letter-spacing: -0.005em;
    padding: 12px 16px !important;
    background: transparent !important;
}

body.sl-injected .sl-content-card .title2,
body.sl-injected .sl-content-card td.title2 {
    font-size: 14px !important;
    color: var(--text) !important;
    padding: 10px 16px !important;
    background: transparent !important;
}

body.sl-injected .sl-content-card .title3,
body.sl-injected .sl-content-card td.title3 {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 14px 16px 8px !important;
    background: transparent !important;
}

/* --------------------------------------------------------------
   8. Form inputs — uniform polish, touch-friendly height.
   -------------------------------------------------------------- */

body.sl-injected .sl-content-card input[type="text"],
body.sl-injected .sl-content-card input[type="email"],
body.sl-injected .sl-content-card input[type="password"],
body.sl-injected .sl-content-card input[type="search"],
body.sl-injected .sl-content-card input[type="tel"],
body.sl-injected .sl-content-card input[type="number"],
body.sl-injected .sl-content-card input[type="date"],
body.sl-injected .sl-content-card input[type="file"],
body.sl-injected .sl-content-card select,
body.sl-injected .sl-content-card textarea {
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--m-radius-sm);
    background: var(--white);
    font-size: 15px;
    color: var(--text);
    line-height: 1.4;
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
    max-width: 100%;
}

body.sl-injected .sl-content-card input[type="text"]:focus,
body.sl-injected .sl-content-card input[type="email"]:focus,
body.sl-injected .sl-content-card input[type="password"]:focus,
body.sl-injected .sl-content-card input[type="search"]:focus,
body.sl-injected .sl-content-card input[type="tel"]:focus,
body.sl-injected .sl-content-card input[type="number"]:focus,
body.sl-injected .sl-content-card input[type="date"]:focus,
body.sl-injected .sl-content-card select:focus,
body.sl-injected .sl-content-card textarea:focus {
    border-color: var(--green-dark);
    box-shadow: 0 0 0 1px var(--green-dark);
    outline: none;
}

body.sl-injected .sl-content-card textarea {
    min-height: 96px;
    resize: vertical;
}

/* --------------------------------------------------------------
   9. Buttons — uniform polish across pages.
   -------------------------------------------------------------- */

body.sl-injected .sl-content-card input[type="submit"],
body.sl-injected .sl-content-card input[type="button"],
body.sl-injected .sl-content-card button {
    min-height: 40px;
    padding: 9px 22px;
    border-radius: var(--m-radius-sm);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    font-family: inherit;
    border: none;
    background: var(--green-dark);
    color: var(--white);
    cursor: pointer;
    box-shadow: var(--m-shadow-sm);
    transition: background .15s, box-shadow .15s, transform .1s;
}

body.sl-injected .sl-content-card input[type="submit"]:hover,
body.sl-injected .sl-content-card input[type="button"]:hover,
body.sl-injected .sl-content-card button:hover {
    background: var(--green-mid);
    box-shadow: var(--m-shadow-md);
}

body.sl-injected .sl-content-card input[type="submit"]:active,
body.sl-injected .sl-content-card input[type="button"]:active,
body.sl-injected .sl-content-card button:active {
    transform: scale(0.98);
}

body.sl-injected .sl-content-card input[type="reset"] {
    background: var(--white);
    color: var(--text);
    border: 1px solid var(--border);
}

body.sl-injected .sl-content-card input[type="reset"]:hover {
    background: var(--bg);
    color: var(--text);
}

/* Legacy `class="button"` and `class="btn"` styled links/inputs */
body.sl-injected .sl-content-card .button,
body.sl-injected .sl-content-card .btn,
body.sl-injected .sl-content-card a.button,
body.sl-injected .sl-content-card a.btn {
    display: inline-block;
    padding: 9px 22px;
    border-radius: var(--m-radius-sm);
    font-size: 14px;
    font-weight: 600;
    background: var(--green-dark) !important;
    color: var(--white) !important;
    text-decoration: none !important;
    box-shadow: var(--m-shadow-sm);
    transition: background .15s;
}

body.sl-injected .sl-content-card .button:hover,
body.sl-injected .sl-content-card .btn:hover,
body.sl-injected .sl-content-card a.button:hover,
body.sl-injected .sl-content-card a.btn:hover {
    background: var(--green-mid) !important;
}

/* --------------------------------------------------------------
   10. Links polish — keep the brand color, remove underline by
   default, add it on hover.
   -------------------------------------------------------------- */

body.sl-injected .sl-content-card a {
    color: var(--green-mid);
    text-decoration: none;
    transition: color .15s;
}

body.sl-injected .sl-content-card a:hover {
    color: var(--green-dark);
    text-decoration: underline;
}

/* --------------------------------------------------------------
   11. MOBILE-FIRST RESPONSIVE OVERRIDES
   -------------------------------------------------------------- */

/* Tablet */
@media (max-width: 1024px) {
    body.sl-injected .sl-main {
        padding: 16px;
    }
    body.sl-injected .sl-content-card {
        padding: 0;
    }
}

/* Mobile */
@media (max-width: 768px) {
    body.sl-injected .sl-main {
        padding: 12px;
    }

    /* Card content gets tighter padding */
    body.sl-injected .sl-content-card-head {
        padding: 14px 16px;
    }

    body.sl-injected .sl-content-card .maintitel,
    body.sl-injected .sl-content-card td.maintitel,
    body.sl-injected .sl-content-card .maintitle,
    body.sl-injected .sl-content-card td.maintitle {
        font-size: 17px !important;
        padding: 12px 16px !important;
    }

    /* H1/H2 scale down on phones */
    body.sl-injected h1 { font-size: 24px; line-height: 32px; }
    body.sl-injected h2 { font-size: 19px; line-height: 26px; }
    body.sl-injected h3 { font-size: 16px; line-height: 22px; }

    /* Force tables to live inside a horizontally scrollable
       container — the card itself becomes that container. */
    body.sl-injected .sl-content-body {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Reduce text size inside data tables so columns fit. */
    body.sl-injected .sl-content-card td,
    body.sl-injected .sl-content-card th {
        font-size: 13px;
        padding: 10px 12px;
    }
}

/* Very small phones */
@media (max-width: 480px) {
    body.sl-injected .sl-main {
        padding: 8px;
    }
    body.sl-injected .sl-content-card td,
    body.sl-injected .sl-content-card th {
        font-size: 12.5px;
        padding: 8px 10px;
    }
}

/* --------------------------------------------------------------
   12. Touch targets — keep all interactive elements ≥40px
   -------------------------------------------------------------- */

@media (pointer: coarse), (max-width: 768px) {
    body.sl-injected .sl-content-card a,
    body.sl-injected .sl-content-card button,
    body.sl-injected .sl-content-card input[type="submit"],
    body.sl-injected .sl-content-card input[type="button"] {
        min-height: 40px;
    }
    body.sl-injected .sl-content-card input[type="radio"],
    body.sl-injected .sl-content-card input[type="checkbox"] {
        width: 18px;
        height: 18px;
    }
}

/* --------------------------------------------------------------
   13. Never let the page produce a horizontal scrollbar.
   -------------------------------------------------------------- */

html, body.sl-injected {
    overflow-x: hidden;
    max-width: 100vw;
}

body.sl-injected #sl-shell,
body.sl-injected .sl-layout,
body.sl-injected .sl-main {
    min-width: 0;
    max-width: 100%;
}

/* --------------------------------------------------------------
   14. Tiny utility classes a few pages will want to use.
   -------------------------------------------------------------- */

body.sl-injected .m-stack { display: flex; flex-direction: column; gap: 16px; }
body.sl-injected .m-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
body.sl-injected .m-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
body.sl-injected .m-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 768px) {
    body.sl-injected .m-grid-2,
    body.sl-injected .m-grid-3 { grid-template-columns: 1fr; }
}