/* =========================================================
   WORKSHEETS MODULE - CLEAN PRODUCTION CSS
========================================================= */

/* Worksheet-domain accent tokens not already covered by the shared
   Quillstone palette in site.css (--color-primary, --color-secondary,
   --color-secondary-dark, --color-secondary-tint, --color-accent,
   --color-accent-highlight, --color-sage, --color-sage-dark,
   --color-sage-tint, --color-text-primary, --color-text-secondary,
   --color-border). */
:root {
    --ws-color-companion: #2F5C7A;
    --ws-color-companion-bg: #E7EEF3;
    --ws-color-subscription-text: #B5651D;
    --ws-color-subscription-bg: #FCF1E3;
}

/* =========================================================
   WORKSHEET DETAILS PAGE
========================================================= */

.worksheet-heading {
    font-family: var(--font-heading, inherit);
    color: var(--color-primary);
    font-weight: 700;
}

.alert-companion {
    background-color: var(--ws-color-companion-bg);
    border: 1px solid transparent;
    color: var(--ws-color-companion);
}

    .alert-companion .alert-link {
        color: var(--ws-color-companion);
        font-weight: 700;
    }

/* =========================================================
   SEARCH BAR
========================================================= */

.worksheet-search-bar {
    background: #fff;
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.search-form {
    display: flex;
    gap: 10px;
    align-items: center;
}

.search-input {
    flex: 1;
}

/* =========================================================
   FILTER SIDEBAR
========================================================= */

/* Width comes from the shared col-md-3 Bootstrap column (see
   Products/Index.cshtml and the .worksheet-listing responsive-stacking
   override below) — matches .workbook-listing's sidebar exactly, rather
   than maintaining a separate fixed px width here. */
.worksheet-filters {
    position: sticky;
    top: 80px;
    align-self: flex-start;
}

/* Filters card chrome — matches .workbook-listing .card exactly
   (Quillstone Version C) so both listing pages feel like the same
   site: white card, soft border, rounded corners, subtle shadow,
   light-purple header tint. Header corners are rounded explicitly
   rather than via overflow:hidden on the card, which would clip the
   Choices.js dropdown below (see workbooks.css for the same note). */
.worksheet-filters .card {
    background-color: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(30, 67, 86, 0.06) !important;
}

.worksheet-filters .card-header:first-child {
    border-top-left-radius: 13px;
    border-top-right-radius: 13px;
}

    .worksheet-filters .card-header {
        font-family: var(--font-heading);
        font-weight: 700;
       color: var(--color-primary);
        border-bottom: 1px solid var(--color-border);
        /* background-color: #F7F3FB;*/ /* Light purple tint, matches Workbooks */
      /*  background-color: #F1F7F8;*/
        background-color: #E6EDF1;
       /* color: #1E4356;*/
       background-color: var(--color-sage-tint);
    }

.worksheet-filters .form-label {
    font-family: var(--font-family);
    color: var(--color-text-primary);
}

.worksheet-filters .form-select {
    font-family: var(--font-family);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: 10px;
}

    .worksheet-filters .form-select:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 0.2rem rgba(30, 67, 86, 0.12);
        outline: none;
    }

.worksheet-filters .btn-outline-secondary {
    font-family: var(--font-family);
    font-weight: 600;
    color: var(--color-primary);
    background-color: transparent;
    border: 1px solid var(--color-primary);
    border-radius: 999px;
}

    .worksheet-filters .btn-outline-secondary:hover {
        background-color: var(--color-primary);
        color: #FFFFFF;
    }

/* Choices.js dropdown (Level / Subject / Difficulty).
   Native <select> popups in Chromium aren't constrained to the
   control's own width or the viewport, so on narrow screens the
   options list can render wider than the screen regardless of
   the sidebar's own layout. These three selects now use
   Choices.js (already loaded site-wide, applied via the
   .choices-select hook in choices-init.js) so the dropdown is a
   normal in-page element that can never exceed its container's
   width. This styles Choices' generated markup to match the
   .form-select look it replaces. */

.worksheet-filters .choices {
    margin-bottom: 0;
}

.worksheet-filters .choices__inner {
    font-family: var(--font-family);
    color: var(--color-text-primary);
    background-color: #FFFFFF;
    border: 1px solid var(--color-border);
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    border-radius: 10px;
}

.worksheet-filters .choices.is-open .choices__inner,
.worksheet-filters .choices.is-focused .choices__inner {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(30, 67, 86, 0.12);
}

.worksheet-filters .choices__list--dropdown {
    border-color: var(--color-border);
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(30, 67, 86, 0.12);
}

.worksheet-filters .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: var(--color-secondary-tint);
    color: var(--color-primary);
}

/* =========================================================
   WORKSHEETS LISTING — Quillstone Version C
   Scoped under .worksheet-listing (added to the shared
   Products/Index.cshtml container only for the Worksheet
   branch), mirroring .workbook-listing in workbooks.css rule
   for rule, so search bar, chips and pagination look identical
   across both listing pages without affecting any other page
   that reuses these same generic Bootstrap classes.
========================================================= */

.worksheet-listing .form-control {
    font-family: var(--font-family);
    color: var(--color-text-primary);
    background-color: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.6rem 1.1rem;
}

    .worksheet-listing .form-control:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 0.2rem rgba(30, 67, 86, 0.12);
        outline: none;
    }

.worksheet-listing .btn-primary {
    font-family: var(--font-family);
    font-weight: 700;
    color: #FFFFFF;
    background-color: var(--color-accent-highlight);
    border: 1px solid var(--color-accent-highlight);
    border-radius: 999px;
}

    .worksheet-listing .btn-primary:hover {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
        color: #FFFFFF;
    }

.worksheet-listing .results-info,
.worksheet-listing .text-muted {
    color: var(--color-text-secondary) !important;
}

.worksheet-listing .badge.bg-primary {
    background-color: var(--color-secondary-tint) !important;
    color: var(--color-primary) !important;
    border-radius: 999px;
    font-weight: 600;
}

.worksheet-listing .page-link {
    font-family: var(--font-family);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin: 0 2px;
}

    .worksheet-listing .page-link:hover {
        background-color: var(--color-secondary-tint);
        color: var(--color-primary);
        border-color: var(--color-border);
    }

.worksheet-listing .page-item.active .page-link {
    background-color: var(--color-accent-highlight);
    border-color: var(--color-accent-highlight);
    color: #FFFFFF;
}

/* ---------------------------------------------------------
   Responsive fix — filters sidebar

   Mirrors the identical .workbook-listing fix in workbooks.css: Bootstrap
   containers are fixed-width per tier (720px at md), so col-md-3 alone
   would leave the sidebar in a cramped ~180px column between 768-991px.
   Keep both columns full-width (stacked) up to the same 992px breakpoint
   the sidebar's own sticky/grid rules already switch at (see the
   max-width:992px query above), so the Worksheet listing stacks at
   exactly the same point it always has. Desktop (>=992px) is untouched;
   this only widens where each column is *equal* to .workbook-listing's.
--------------------------------------------------------- */

@media (max-width: 991.98px) {
    .worksheet-listing .row > .col-md-3,
    .worksheet-listing .row > .col-md-9 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* =========================================================
   GRID
========================================================= */

/* Width comes from the shared col-md-9 Bootstrap column (see
   Products/Index.cshtml) — no longer needs its own flex sizing. */
.worksheet-grid .grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

/* =========================================================
   EMPTY STATE
========================================================= */

.no-results {
    padding: 20px;
    color: var(--color-text-secondary);
    background: #fafafa;
    border: 1px dashed var(--color-border);
    border-radius: 8px;
}

/* =========================================================
   WORKSHEET CARD (CORE)
========================================================= */

/* .worksheet-card {
    border: 1px solid #f1f3f5;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}


    .worksheet-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    } */

    .worksheet-card {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
    background-color: var(--color-sage-tint); /* very light green tint, Workbooks-equivalent card uses light purple */
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 2px 10px rgba(30, 67, 86, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.worksheet-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-sage-dark);
    box-shadow: 0 12px 26px rgba(30, 67, 86, 0.12);
}

/* =========================================================
   BADGES
========================================================= */

.card-badges {
    padding: 10px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

    .card-badges .badge {
        border-radius: 999px;
        padding: 6px 10px;
        font-size: 0.72rem;
        font-weight: 600;
        background: #FFFFFF;
        color: #2E7D32;
        border: 1px solid #D9E7DC;
    }

/* ==========================================
   QUILLSTONE COLOUR SYSTEM FOR WORKSHEET BADGES,
   PRICE TEXT AND ACTION BUTTONS.
   Not scoped to .worksheet-card so the Worksheet Details
   page can reuse the same classes as the card component.
   ========================================== */

/* Badges */
.badge-free,
.badge-paid,
.badge-subscription,
.badge-companion {
    font-weight: 700;
    border: 1px solid transparent;
}

.badge-free {
   /* background-color: var(--color-sage-tint) !important;*/
    color: var(--color-sage-dark) !important;
}

.badge-paid {
    background-color: var(--color-secondary-tint) !important;
    color: var(--color-secondary-dark) !important;
}

.badge-subscription {
    background-color: var(--ws-color-subscription-bg) !important;
    color: var(--ws-color-subscription-text) !important;
}

.badge-companion {
    background-color: var(--ws-color-companion-bg) !important;
    color: var(--ws-color-companion) !important;
}

.badge-workbook {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
}

/* Dynamic Subject Metadata Colors
   Colour/weight match the Workbooks card's Grade/Subject subtitle exactly
   (.workbook-listing .product-card-subtitle in workbooks.css) — the source
   of truth is --color-text-secondary at normal weight, not a subject tint. */
.meta-math {
    color: var(--color-text-secondary) !important;
}

.meta-english {
    color: var(--color-text-secondary) !important;
}

/* Price Text Colors
   Colour matches the Workbooks listing price exactly (.workbook-listing
   .product-card-price in workbooks.css / .product-card-price in site.css),
   which is the source of truth — #16a34a, not the state-based tokens. */
.worksheet-price .free {
    color: #16a34a !important;
    font-weight: 700;
}

.worksheet-price .paid {
    color: #16a34a !important;
    font-weight: 700;
}

.worksheet-price .subscription {
    color: #16a34a !important;
    font-weight: 700;
}

.worksheet-price .companion {
    color: #16a34a !important;
    font-weight: 700;
}

/* Footer / Action Buttons — Quillstone Version C.
   Preview is the card's secondary action (teal outline, matches
   .workbook-listing .product-card .btn-outline-primary). The single
   primary action per state (Download/Open/Add to Cart/Subscribe/
   View Workbook) is always the orange solid CTA, matching the
   Workbooks card's "View" button — state is already communicated by
   the badge, so the action button stays one consistent primary style. */
.btn-preview {
    color: var(--color-primary) !important;
    background-color: transparent !important;
    border: 1px solid var(--color-primary) !important;
    font-weight: 600;
}

    .btn-preview:hover {
        background-color: var(--color-primary) !important;
        color: #ffffff !important;
    }

/* Primary Button Action Variants */
.btn-action-free,
.btn-action-open,
.btn-action-cart,
.btn-action-sub,
.btn-action-companion {
    background-color: var(--color-accent-highlight) !important;
    color: #ffffff !important;
    border: 1px solid var(--color-accent-highlight) !important;
    font-weight: 600;
}

.btn-action-free:hover,
.btn-action-open:hover,
.btn-action-cart:hover,
.btn-action-sub:hover,
.btn-action-companion:hover {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}


/* =========================================================
   PREVIEW IMAGE
========================================================= */

/*.card-preview {
    position: relative;
    height: 260px;
    background: #f8f9fa;
    overflow: hidden;
    cursor: pointer;
}

    .card-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
*/



/* =========================================================
   PREVIEW IMAGE
========================================================= */

.card-preview {
    position: relative;
    height: 190px;
    background-color: #FFFFFF;
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .card-preview img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        padding: 8px;
    }
/* placeholder */

.placeholder-preview {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #999;
    font-size: 14px;
}


/* =========================================================
   CONTENT AREA
========================================================= */

.card-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px 14px 10px 14px;
    flex-grow: 1;
}

/* TITLE — font size/line-height match the Workbooks card title exactly
   (.workbook-listing .product-card-title in workbooks.css); colour/weight
   already matched. */
.worksheet-title {
    font-family: var(--font-heading, inherit);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    color: var(--color-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    /* Title links to the worksheet's own /worksheets/{slug} details page —
       inherits the heading's colour/weight rather than default link blue,
       so this reads as the same title, just now clickable. */
    .worksheet-title a {
        color: inherit;
        text-decoration: none;
    }

        .worksheet-title a:hover,
        .worksheet-title a:focus-visible {
            text-decoration: underline;
        }

        .worksheet-title a:focus-visible {
            outline: 2px solid var(--color-primary);
            outline-offset: 2px;
            border-radius: 2px;
        }

/* META */
/*.worksheet-meta {
    font-size: 0.88rem;
    color: #6c757d;
    margin-bottom: 4px;
}*/

/* AGE */
/*.worksheet-age-range {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 8px;
}*/

.card-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    /* Matches the Workbooks card's Grade/Subject subtitle font size exactly
       (.workbook-listing .product-card-subtitle in workbooks.css). */
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}


/* keep age slightly softer */
    .worksheet-age {
        color: var(--color-text-secondary);
        font-size: 0.85rem;
    }
    /* =========================================================
   PRICE (UI HIERARCHY IMPORTANT)
========================================================= */

        .worksheet-price {
            /* Font size matches the Workbooks listing price exactly — the
               source of truth is .product-card-price wrapped in Bootstrap's
               .small (0.875em) at the site's 16px base, i.e. 0.875rem. */
            font-size: 0.875rem;
            font-weight: 700;
            margin-top: 3px;
            line-height: 1.15;
        }
    /* Price text colours (.free/.paid/.subscription/.companion) are
       defined once, above, in the Quillstone colour system section. */
    /* =========================================================
   ACTION BUTTONS
========================================================= */

    .card-actions {
        display: flex;
        gap: 10px;
        padding: 14px;
        border-top: 1px solid var(--color-border);
        margin-top: auto;
    }

        .card-actions .btn {
            min-height: 34px;
            font-weight: 600;
            border-radius: 999px;
            font-size: 0.86rem;
            padding: 6px 12px;
            transition: all 0.15s ease;
        }
            .card-actions .btn:hover {
                transform: translateY(-1px);
                transition: all 0.15s ease;
            }
        /* =========================================
          CTA HIERARCHY
        ========================================= */

        /* Secondary action */
        .card-actions .btn-preview {
            flex: 0.9;
        }

        /* Primary action */
        .card-actions .btn-primary-action {
            flex: 1.2;
        }

    /* =========================================================
   VIEW DETAILS LINK
   Subtle secondary navigation to the worksheet's own details page
   (/worksheets/{slug}), kept visually minimal — small, muted text, no
   button chrome — so Preview and the primary action button stay the
   dominant calls to action on the card.
========================================================= */

    .card-view-details {
        text-align: center;
        padding: 0 14px 12px;
    }

        .card-view-details .view-details-link {
            display: inline-block;
            font-size: 0.78rem;
            font-weight: 600;
            color: var(--color-text-secondary);
            text-decoration: none;
        }

            .card-view-details .view-details-link:hover,
            .card-view-details .view-details-link:focus-visible {
                color: var(--color-primary);
                text-decoration: underline;
            }

            .card-view-details .view-details-link:focus-visible {
                outline: 2px solid var(--color-primary);
                outline-offset: 2px;
                border-radius: 2px;
            }

    /* =========================================================
   PAGINATION
========================================================= */

    .pagination {
        margin-top: 20px;
    }
    /* =========================================================
   RESPONSIVE
========================================================= */

    /* Sidebar/content stacking itself now comes from the col-md-3/col-md-9
       responsive-stacking override below (matches .workbook-listing) — this
       just undoes the sticky offset once the sidebar is no longer beside
       the grid, and keeps the worksheet-card grid at 2 columns. */
    @media (max-width: 992px) {

        .worksheet-filters {
            position: relative;
            top: auto;
        }

        .worksheet-grid .grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 576px) {

        .worksheet-grid .grid {
            grid-template-columns: 1fr;
        }

        .search-form {
            flex-direction: column;
            align-items: stretch;
        }
    }


.card-preview.is-locked {
    position: relative;
    filter: grayscale(0.2);
}

    .card-preview.is-locked::after {
        content: "Locked";
        position: absolute;
        top: 10px;
        right: 10px;
        background: rgba(0, 0, 0, 0.75);
        color: #fff;
        font-size: 0.75rem;
        padding: 4px 8px;
        border-radius: 6px;
    }

/* ==========================================
   Global Image Preview Modal Carousel
   ========================================== */
#globalImageModal .modal-body {
    background: transparent;
}

#globalImageModal .carousel-item {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
}

#globalImageModal .slide-content {
    background: transparent;
    padding: 6px;
    border-radius: 6px;
    box-shadow: none;
}

#globalImageModal .carousel-image {
    max-height: 85vh;
    width: auto;
    height: auto;
    display: block;
    touch-action: none;
}

#globalImageModal .zoom-controls {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 1050;
    display: flex;
    gap: 6px;
}

#globalImageModal .btn-close,
#localImageModal .btn-close {
    z-index: 3000;
    pointer-events: auto;
}

#globalImageModal .zoom-controls button {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #e9ecef;
}

#globalImageModal .carousel-control-prev,
#globalImageModal .carousel-control-next {
    z-index: 1040;
}

@media (max-width: 576px) {
    #globalImageModal .slide-content {
        padding: 6px;
    }
}

/* =========================================================
   RELATED WORKSHEETS (compact card variant)
   Scoped to .related-worksheets so only the Related Worksheets
   section on the worksheet Details page is affected — the
   Worksheets Index page grid/cards are untouched.
========================================================= */

.related-worksheets .grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.related-worksheets .card-preview {
    height: 150px;
}

.related-worksheets .card-content {
    gap: 4px;
    padding: 10px 10px 8px 10px;
}

.related-worksheets .worksheet-title {
    font-size: 1.2rem;
    line-height: 1.3;
}

.related-worksheets .card-meta-row,
.related-worksheets .worksheet-age {
    font-size: 0.85rem;
}

.related-worksheets .worksheet-price {
    font-size: 0.92rem;
}

.related-worksheets .card-badges {
    padding: 8px;
    gap: 5px;
}

    .related-worksheets .card-badges .badge {
        padding: 5px 9px;
        font-size: 0.75rem;
    }

.related-worksheets .card-actions {
    padding: 10px;
    gap: 8px;
}

    .related-worksheets .card-actions .btn {
        min-height: 32px;
        font-size: 0.82rem;
        padding: 6px 10px;
    }

.related-worksheets .card-view-details {
    padding: 0 10px 10px;
}

    .related-worksheets .card-view-details .view-details-link {
        font-size: 0.74rem;
    }

/* Worksheet preview modal: fade-in + delayed loading indicator */
#worksheetPreviewFrame {
    opacity: 1;
    transition: opacity 0.25s ease-in;
}

    #worksheetPreviewFrame.is-loaded {
        opacity: 1;
    }

.worksheet-preview-spinner {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}
/*
.worksheet-preview-spinner {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.9);
}*/