/* ============================================================
   NEW UI – COURSEWORK EDITOR
   Styling for the module/lesson tree toolbar and page-thumbnail
   strip in the Student Coursework editor screen.

   All rules scoped to .is-myincite-ui.nui-modern-pages —
   complements new-ui-pages.css's generic button/form/dropdown
   styling with coursework-editor-specific refinements.

   Palette: brand blue #0074C5, teal #00AEC4, purple #8B5CB0,
   gold #D98E32.
   SCOPING NOTE (added after review): .dropdown-menu/.dropdown-menu-item
   (66 templates), .input-group-clear (17 templates), and .btn-group
   (320 templates app-wide) are all widely shared — every rule below is
   scoped under <e-learning-modules> (confirmed restrict:'E' directive
   in modules.directive.js, so it renders as a literal custom element)
   so only this coursework editor screen is affected.
   ============================================================ */

/* ---------- 1. SPLIT BUTTON DIVIDER ----------
   Clean seam between split-button parts: remove heavy left border,
   use subtle spacing instead. */
.is-myincite-ui.nui-modern-pages e-learning-modules .btn-group .btn.dropdown-toggle {
    border-left: none;
    margin-left: 2px;
    padding-left: 8px;
    padding-right: 8px;
}

/* ---------- 2. DROPDOWN MENUS ----------
   Restyle .dropdown-menu and .dropdown-menu-item to match
   New UI aesthetic: clean white surface, subtle borders,
   consistent item spacing and hover treatment. */
.is-myincite-ui.nui-modern-pages e-learning-modules .dropdown-menu {
    border: 1px solid var(--nui-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .12);
    background-color: #fff;
    margin-top: 4px;
    padding: 6px 0;
}

.is-myincite-ui.nui-modern-pages e-learning-modules .dropdown-menu-item {
    margin: 0;
    padding: 0;
}

.is-myincite-ui.nui-modern-pages e-learning-modules .dropdown-menu-item > a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    color: var(--nui-text-body);
    text-decoration: none;
    transition: background-color .15s ease;
}

.is-myincite-ui.nui-modern-pages e-learning-modules .dropdown-menu-item > a:hover {
    background-color: var(--nui-bg-hover);
}

.is-myincite-ui.nui-modern-pages e-learning-modules .dropdown-menu-item > a i {
    flex-shrink: 0;
}

/* ---------- 3. SEARCH INPUT ----------
   Clean white field with subtle border, soft focus ring. Uses
   same visual language as Select2 trigger fields in New UI. */
.is-myincite-ui.nui-modern-pages e-learning-modules .input-group-clear {
    position: relative;
}

.is-myincite-ui.nui-modern-pages e-learning-modules .input-group-clear .form-control {
    border: 1px solid #e2e8f0;
    background-color: #fff;
    padding-left: 32px;
}

.is-myincite-ui.nui-modern-pages e-learning-modules .input-group-clear .form-control:focus {
    border-color: var(--nui-brand);
    box-shadow: 0 0 0 3px rgba(0, 116, 197, .10);
}

.is-myincite-ui.nui-modern-pages e-learning-modules .input-group-clear > .material-symbols-rounded {
    color: var(--nui-text-muted);
    font-size: 18px;
    line-height: 18px;
}

/* ---------- 4. FILTER BUTTON ACTIVE STATE ----------
   Narrow override for the filter button's active-filter indicator:
   use brand blue filled state instead of danger red (red implies error,
   not "filters are applied"). Targets only the filter button with
   .icofont-filter child. */
.is-myincite-ui.nui-modern-pages e-learning-modules .btn:has(> .icofont-filter).is-btn-danger {
    background-color: var(--nui-brand);
    border-color: var(--nui-brand);
    color: #fff;
}

.is-myincite-ui.nui-modern-pages e-learning-modules .btn:has(> .icofont-filter).is-btn-danger:hover,
.is-myincite-ui.nui-modern-pages e-learning-modules .btn:has(> .icofont-filter).is-btn-danger:focus {
    background-color: color-mix(in srgb, var(--nui-brand) 92%, black);
    border-color: color-mix(in srgb, var(--nui-brand) 92%, black);
    color: #fff;
}

/* ---------- 5. PAGE THUMBNAIL CHIPS ----------
   Restyle the page-thumbnail strip chips into a cleaner segmented
   page-navigator: rounded chips, subtle border, hover tint, and
   a brand-tinted active state. Keeps existing icon colors
   (.is-text-page, .is-text-assignment, .is-text-discussion) intact.

   SCOPING NOTE: .is-btn-white.is-wb-white is a widely shared generic
   white-button utility (24+ unrelated templates — chat modals,
   header.html, trackers, session views, etc.) — a bare override would
   silently reskin buttons across the whole app. Scoped instead to the
   real booklet thumbnail-strip container
   (`[ui-sortable="bookletCtrl.sortableOptions"]`, confirmed in
   materials/booklet/booklet.html and materials-view/booklet/booklet.html)
   so only the page-navigator chips are touched. */
.is-myincite-ui.nui-modern-pages e-learning-modules [ui-sortable="bookletCtrl.sortableOptions"] a.btn.is-btn-white.is-wb-white {
    background-color: #fff;
    border: 1px solid var(--nui-border);
    border-radius: 6px;
    padding: 6px 9px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: background-color .15s ease, border-color .15s ease;
}

.is-myincite-ui.nui-modern-pages e-learning-modules [ui-sortable="bookletCtrl.sortableOptions"] a.btn.is-btn-white.is-wb-white:hover {
    background-color: var(--nui-bg-hover);
    border-color: var(--nui-border);
}

/* Active chip: brand-tinted background with bold page number */
.is-myincite-ui.nui-modern-pages e-learning-modules [ui-sortable="bookletCtrl.sortableOptions"] a.btn.is-btn-white.is-wb-white.is-btn-lightest-gray {
    background-color: color-mix(in srgb, var(--nui-brand) 12%, white);
    border-color: var(--nui-brand);
    color: var(--nui-brand);
}

.is-myincite-ui.nui-modern-pages e-learning-modules [ui-sortable="bookletCtrl.sortableOptions"] a.btn.is-btn-white.is-wb-white.is-btn-lightest-gray strong {
    font-weight: 700;
}

/* Ensure icon colors are readable on active chip background.
   Icons inherit .is-text-page / .is-text-assignment / .is-text-discussion
   classes which are scoped outside this file; we only adjust the chip
   background/border to maintain contrast. */
.is-myincite-ui.nui-modern-pages e-learning-modules [ui-sortable="bookletCtrl.sortableOptions"] a.btn.is-btn-white.is-wb-white.is-btn-lightest-gray i {
    opacity: 1;
}

/* ---------- 6. REDUCED MOTION ----------
   Disable transitions for users preferring reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .is-myincite-ui.nui-modern-pages e-learning-modules .btn-group .btn.dropdown-toggle,
    .is-myincite-ui.nui-modern-pages e-learning-modules .dropdown-menu-item > a,
    .is-myincite-ui.nui-modern-pages e-learning-modules .input-group-clear .form-control,
    .is-myincite-ui.nui-modern-pages e-learning-modules [ui-sortable="bookletCtrl.sortableOptions"] a.btn.is-btn-white.is-wb-white {
        transition: none;
    }
}

/* ==========================================================================
   Material pane: lock banner + title row (New UI, body.nui-on)
   The read/edit banner (lock-unlock + generic-lock-unlock, both replace:true,
   so only their classes exist in the DOM: .is-danger-light locked /
   .is-success-light unlocked) was a full-width red bar with a red square
   button, over a title row with an oversized input, a green Save and a grey
   gear, all inside an orange "cannot edit" outline. Same elements, quieter:
   a slim grey strip with a round lock mark, a brand-blue Save, a soft outline.
   Author content (.fr-view) is not touched. <e-learning-modules> is replace:true,
   so the hook is .nui-modules-view on the root of modules.html.
   ========================================================================== */
.nui-on .nui-modules-view .b1.is-wb-warning.c-notAllowed {
    border-color: var(--aa-grey-300, #D7DDE0) !important;
    border-radius: 10px;
}

/* the strip */
.nui-on .nui-modules-view .is-danger-light,
.nui-on .nui-modules-view .is-success-light {
    display: flex;
    align-items: center;
    min-height: 40px;
    margin: 0 0 8px;
    padding: 4px 8px !important;
    background: var(--aa-off-white, #F7F9FA) !important;
    border: 1px solid var(--aa-grey-300, #D7DDE0);
    border-radius: 10px;
    color: var(--aa-grey-700, #4A5358);
}
.nui-on .nui-modules-view .is-danger-light > div,
.nui-on .nui-modules-view .is-success-light > div {
    flex: 1 1 auto;
}
.nui-on .nui-modules-view lock-unlock > .row,
.nui-on .nui-modules-view .p-sticky > .row {
    margin: 0;                                  /* bootstrap's -15px gutter */
}
.nui-on .nui-modules-view .is-danger-light p,
.nui-on .nui-modules-view .is-success-light p {
    margin: 0 0 0 10px !important;
    font-family: var(--font-display, "Montserrat", sans-serif);
    font-size: 12px;
    font-weight: 600;
    color: var(--aa-grey-700, #4A5358);
}
/* lock / unlock / refresh marks: 30px rounds */
.nui-on .nui-modules-view .is-danger-light .btn,
.nui-on .nui-modules-view .is-success-light .btn {
    width: 30px;
    height: 30px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    font-size: 13px;
    line-height: 1;
    box-shadow: none !important;
}
.nui-on .nui-modules-view .is-danger-light .btn.is-btn-danger,
.nui-on .nui-modules-view .is-danger-light .btn.btn-warning {
    background: var(--aa-white, #fff) !important;
    border: 1px solid var(--aa-grey-300, #D7DDE0) !important;
    color: var(--aa-grey-700, #4A5358) !important;
}
.nui-on .nui-modules-view .is-danger-light .btn.is-btn-danger:hover {
    border-color: var(--aa-blue, #0074C5) !important;
    color: var(--aa-blue, #0074C5) !important;
}
.nui-on .nui-modules-view .is-success-light .btn.btn-success {
    background: rgba(0, 174, 196, .14) !important;
    border: 1px solid transparent !important;
    color: var(--aa-teal, #00AEC4) !important;
}
.nui-on .nui-modules-view .is-success-light .btn.btn-success:hover {
    background: rgba(0, 174, 196, .24) !important;
}

/* title row */
.nui-on .nui-modules-view .form-group .form-control.input-lg {
    height: 40px;
    padding: 0 12px;
    font-family: var(--font-display, "Montserrat", sans-serif);
    font-size: 16px;
    font-weight: 600;
    color: var(--aa-ink, #222831);
    border: 1px solid var(--aa-grey-300, #D7DDE0);
    border-radius: 8px;
    box-shadow: none;
}
.nui-on .nui-modules-view .form-group .form-control.input-lg:focus {
    border-color: var(--aa-blue, #0074C5);
    box-shadow: 0 0 0 3px rgba(0, 116, 197, .12);
}
.nui-on .nui-modules-view .form-group .btn.btn-success {
    height: 36px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display, "Montserrat", sans-serif);
    font-size: 13px;
    font-weight: 600;
    background: var(--aa-blue, #0074C5) !important;
    border: 1px solid var(--aa-blue, #0074C5) !important;
    color: #fff !important;
    border-radius: 8px;
    box-shadow: none !important;
}
.nui-on .nui-modules-view .form-group .btn.btn-success[disabled] {
    opacity: .45;
}
.nui-on .nui-modules-view .form-group .btn.is-btn-white.dropdown-toggle {
    height: 36px;
    width: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
    border: 1px solid var(--aa-grey-300, #D7DDE0) !important;
    color: var(--aa-grey-700, #4A5358);
    box-shadow: none !important;
}
.nui-on .nui-modules-view .form-group .btn.btn-toggle-sidebar {
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50% !important;
    border: 1px solid var(--aa-grey-300, #D7DDE0) !important;
    background: var(--aa-white, #fff);
    color: var(--aa-grey-500, #7B8E92);
    font-size: 12px;
    line-height: 22px;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(34, 40, 49, .06));
}
/* unlocked: the component shows only the mark, so the strip names the state */
.nui-on .nui-modules-view .is-success-light .d-flex::after {
    content: "Editing - click the lock when you are done";
    margin-left: 10px;
    font-family: var(--font-display, "Montserrat", sans-serif);
    font-size: 12px;
    font-weight: 600;
    color: var(--aa-grey-700, #4A5358);
}