/* ============================================================
   NEW UI – MY DIGITAL CLASSROOM / COURSEWORK TREE
   Styling for the "My Digital Classroom" left sub-nav card, the
   unit/lesson tree rows, and the lock/unlock Read Mode banner on
   the Student Coursework editor screen.

   All rules scoped to .is-myincite-ui.nui-modern-pages (both
   classes live together on #InciteWrapper) — same scoping
   convention used by new-ui-pages.css, new-ui-filters.css, and
   new-ui-coursework-editor.css.

   Palette: brand blue #0074C5, teal #00AEC4, purple #8B5CB0,
   gold #D98E32, green #16a34a.

   Verified against source before writing (see report):
   - public/courses/classrooms/classrooms-980e1f8647.html
   - public/_eLearning/view/modules/tree/nodes-renderer-93a24bd7ff.html
   - public/_eLearning/view/modules/lock-unlock/lock-unlock-c0c39e79e3.html
   - public/css/style-e7be7ab21a.css / public/css/theme-a41afadb40.css (current rules
     for .wh-card-header, .brand-bg-primary, .wh-menu-item,
     .tree-branch*, .is-danger-light/.is-success-light/.is-default-light)
   ============================================================ */

/* ---------- 1. SIDEBAR NAV CARD ----------
   "My Digital Classroom" card: .wh-card.wh-border-1 wrapper with a
   .wh-card-header that currently gets its solid color from the
   .brand-bg-primary utility class (theme.css: background:#BB0000;
   color:rgba(235,235,235,.9) — NOT a rule on .wh-card-header itself).

   SCOPING NOTE: both `.wh-card.wh-border-1` (70+ unrelated templates —
   chat, communities, discussion topics, student profile sections,
   engagement reports, etc.) and `.wh-card-header.brand-bg-primary`
   (16 unrelated templates — discussion-topics lists, communities
   admin, PL course creation, etc.) are widely shared utility
   combinations, NOT specific to this sidebar. A bare override would
   silently reskin (and, worse, strip the border + set overflow:hidden
   on) dozens of unrelated cards app-wide, risking clipped
   dropdowns/popovers on screens never reviewed for this change.

   Scoped instead to the one card whose collapse toggle uses the
   `eCourseNavigatorCollapse1` scope variable (confirmed unique via
   grep to just this sidebar in classrooms.html and the sibling
   course-view.html navigator, which legitimately wants the same
   treatment) via `:has()` / an attribute-value anchor — never the
   bare shared classes. */
.is-myincite-ui.nui-modern-pages .wh-card.wh-border-1:has(> [ng-click*="eCourseNavigatorCollapse1"]) {
    background-color: #fff;
    border: none;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 12px rgba(15, 23, 42, .05);
    overflow: hidden;
}

/* Neutralize the solid brand-bg-primary color bar on this specific
   card's header only, and give it a light divider instead. */
.is-myincite-ui.nui-modern-pages [ng-click*="eCourseNavigatorCollapse1"].wh-card-header.brand-bg-primary {
    background: #fff;
    color: #1e293b;
    border-bottom: 1px solid #f1f5f9;
}

/* Title: Montserrat 700 + gradient tick (::before) instead of
   inheriting the light color from the old solid header bar. */
.is-myincite-ui.nui-modern-pages [ng-click*="eCourseNavigatorCollapse1"].wh-card-header.brand-bg-primary .wh-card-title {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-weight: 700;
    color: #1e293b;
    display: inline-flex;
    align-items: center;
}
.is-myincite-ui.nui-modern-pages [ng-click*="eCourseNavigatorCollapse1"].wh-card-header.brand-bg-primary .wh-card-title::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 14px;
    background: linear-gradient(180deg, #0074C5, #8B5CB0 55%, #D98E32);
    border-radius: 2px;
    margin-right: 8px;
    flex-shrink: 0;
}

/* The collapse chevron/icon in the header no longer sits on a dark
   bar — recolor to a neutral slate so it stays visible on white. */
.is-myincite-ui.nui-modern-pages [ng-click*="eCourseNavigatorCollapse1"].wh-card-header.brand-bg-primary > .fas {
    color: #64748b;
}

/* ---------- 2. ACTIVE NAV ITEM ----------
   .wh-menu-item.active — the background/color actually lives on the
   nested anchor per style.css/theme.css (`.wh-menu-item.active > a`),
   so the tinted-pill treatment is applied there, matching the
   tinted-pill + left-accent-bar language used elsewhere in New UI
   (e.g. new-ui-theme.css .nui-second-sidebar .nui-ss-btn.active).

   SCOPING NOTE: `.wh-menu-item` is a shared left-nav list pattern also
   used by student-profile.html and staff-profile.html (unrelated,
   high-traffic screens) plus several other panels — scoped to the
   same eCourseNavigatorCollapse1-anchored card as Section 1 so only
   the "My Digital Classroom" nav list is touched. */
.is-myincite-ui.nui-modern-pages .wh-card.wh-border-1:has(> [ng-click*="eCourseNavigatorCollapse1"]) .wh-menu-item.active > a {
    background: color-mix(in srgb, #0074C5 14%, transparent);
    color: #0074C5;
    border-radius: 8px;
    box-shadow: inset 3px 0 0 #0074C5;
}
.is-myincite-ui.nui-modern-pages .wh-card.wh-border-1:has(> [ng-click*="eCourseNavigatorCollapse1"]) .wh-menu-item.active > a .wh-menu-icon {
    background-color: transparent;
    color: #0074C5;
}

/* Non-active item hover: subtle gray tint only, no border changes. */
.is-myincite-ui.nui-modern-pages .wh-card.wh-border-1:has(> [ng-click*="eCourseNavigatorCollapse1"]) .wh-menu-item:hover > a {
    background-color: rgba(15, 23, 42, .04);
    border-radius: 8px;
}

/* ---------- 3. TREE ROWS ----------
   Confirmed nesting from nodes-renderer.html + style.css:
     <li class="tree-branch" ng-class="node.cssClasses.active()">  (li gets class "active" when selected — cssClasses.active() returns {active: bool})
       <div class="tree-branch-hollow">
         <div class="d-flex ...">
           ...tree-branch-action / tree-branch-flower...
           <a class="tree-branch-title">...</a>
           <div class="tree-branch-actions-group">  (+ button, kebab menu)
         </div>
       </div>
     </li>
   style.css already establishes `.tree-branch.active .tree-branch-hollow`
   (active) and `.tree-branch:hover > .tree-branch-hollow` (hover) as the
   row-level trigger selectors — reused here for consistency. */

/* 3a. Active/selected row — same tinted-pill + left-accent-bar recipe
   as section 2. */
.is-myincite-ui.nui-modern-pages .tree-branch.active .tree-branch-hollow {
    background-color: color-mix(in srgb, #0074C5 14%, transparent) !important;
    box-shadow: inset 3px 0 0 #0074C5;
}
.is-myincite-ui.nui-modern-pages .tree-branch.active .tree-branch-title {
    color: #0074C5;
}

/* 3b. Hover (non-active): subtle background tint, no layout shift. */
.is-myincite-ui.nui-modern-pages .tree-branch:hover > .tree-branch-hollow {
    background-color: rgba(15, 23, 42, .04);
}

/* 3c. Row breathing room + rounded corners — background/color/radius/
   padding only. Indentation, icon sizes, and nesting are untouched
   (driven by --tree-icon-size and .tree-branch padding-left, which
   this file never overrides). */
.is-myincite-ui.nui-modern-pages .tree-branch-hollow {
    border-radius: 8px;
    padding: 6px;
}

/* 3d. Hover-reveal for the always-visible + / kebab action buttons.
   Row-level hover trigger confirmed against style.css's own
   `.tree-branch:hover > .tree-branch-hollow` rule — the actions
   group sits two levels deep (li.tree-branch > .tree-branch-hollow >
   .d-flex > .tree-branch-actions-group), so a descendant selector
   off .tree-branch:hover is used. Opacity only — never display:none —
   so the buttons stay in the DOM and clickable throughout. */
.is-myincite-ui.nui-modern-pages .tree-branch-actions-group {
    opacity: 0;
    transition: opacity .12s ease;
}
.is-myincite-ui.nui-modern-pages .tree-branch:hover .tree-branch-actions-group {
    opacity: 1;
}

/* ---------- 4. LOCK/UNLOCK BANNER ----------
   Scoped strictly to the <lock-unlock> custom element (component
   selector confirmed in lock-unlock.component.js: `selector:
   'lock-unlock'`) so shared utility classes .is-danger-light /
   .is-success-light / .is-default-light are left untouched anywhere
   else in the app.

   Current values found in style.css before this change:
     .is-danger-light   { background:#FFC8BD; color:#B51E00 !important; }
     .is-success-light  { background:#e3f5d7; color:#4B9120 !important; }
     .is-default-light  { background:#ebebeb; color:#5a595b !important; }

   Layout (position: sticky) is untouched — colors/typography only. */

/* 4a. Locked/read-only — was an alarming red/pink "error" banner for
   a normal, expected state. Restyle to a calm, informational slate
   treatment. */
.is-myincite-ui.nui-modern-pages lock-unlock .is-danger-light {
    background: #f1f5f9;
    color: #475569 !important;
}
.is-myincite-ui.nui-modern-pages lock-unlock .is-danger-light .icofont-lock {
    color: #D98E32;
}

/* 4b. Unlocked/editable — legitimately positive state, stays green.
   Retuned to sit better with the New UI palette (was a dated
   #e3f5d7 / #4B9120 combo). */
.is-myincite-ui.nui-modern-pages lock-unlock .is-success-light {
    background: #dcfce7;
    color: #15803d !important;
}
.is-myincite-ui.nui-modern-pages lock-unlock .is-success-light .icofont-unlocked {
    color: #16a34a;
}

/* 4c. Booklet-parent-locked — light neutral gray, consistent with
   4a's calmer language. */
.is-myincite-ui.nui-modern-pages lock-unlock .is-default-light {
    background: #f1f5f9;
    color: #475569 !important;
}

/* 4d. BOOKLET DOUBLE-BANNER — a booklet page renders TWO lock-unlock
   instances stacked: the outer one for the page/booklet title
   (embed.html: <lock-unlock simple="...">) and the inner one for the
   currently-open booklet page itself (booklet.html:
   <lock-unlock is-booklet="true">, no `simple` attribute). Both used
   the identical full-size banner, reading as two duplicate warnings.
   The `simple` attribute is a real, stable, always-present-verbatim
   HTML attribute (AngularJS keeps the raw attribute string on the
   element even for a `=?` scope binding) — used here purely as a
   selector hook to identify "the outer/less-important one", not for
   its original behavioral meaning. Compress it into a slim strip;
   the inner is-booklet banner stays the full prominent treatment
   since that's the state that actually matters (can I edit THIS page). */
.is-myincite-ui.nui-modern-pages lock-unlock[simple] .row > div {
    padding: 4px 9px;
}
.is-myincite-ui.nui-modern-pages lock-unlock[simple] .row > div .d-flex button {
    width: 22px;
    height: 22px;
    min-width: 22px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.is-myincite-ui.nui-modern-pages lock-unlock[simple] .row > div .d-flex button i {
    font-size: 11px;
}
.is-myincite-ui.nui-modern-pages lock-unlock[simple] .row > div p {
    font-size: 12px;
    margin-left: 9px !important;
}

/* ---------- 5. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
    .is-myincite-ui.nui-modern-pages .tree-branch-actions-group {
        transition: none;
    }
}