/* ==========================================================================
   Digital Classroom UI cleanup
   The page mixes three card languages: the left "My Digital Classroom" rail
   is already the target .wh-card look (classrooms-rail.css), the content
   area is a square-cornered bootstrap .panel.panel-default, and the home
   tab's grid-stack widgets use .edin-panel (heavy shadow, 24px radius via
   --panel-radius). This file brings the content panel + widgets to the same
   14px-radius/1px-border/soft-shadow language as the rail, modernizes the
   legacy bootstrap-toggle switches and "x" clear glyphs on the Profile
   roster, and cleans up the coursework-progress tree rows.

   Scoped to .cls-page throughout (root element of
   public/courses/classrooms/classrooms-980e1f8647.html) so nothing outside Digital
   Classroom is touched. Tokens reference new-ui/aa-tokens.css's --aa-*
   custom properties (defined at :root, always loaded via index.html) with
   the literal hex as fallback for safety.
   ========================================================================== */

/* ---------- 1a. Content panel + widget cards ----------
   Markup (classrooms.html):
     .page-content-wSidebar > .panel.panel-default.panel-flex   (most tabs)
     .page-content-woSidebar > .panel.panel-default.panel-flex  (wide tabs,
       rail collapsed)
   style.css ships .panel{border-radius:2px; border:1px solid #d4d4d5;
   box-shadow:0 1px 1px rgba(0,0,0,.05)} - square corners, visible border,
   a faint shadow. None of those declarations carry !important, so no
   !important is needed here either. */
.nui-on .cls-page .page-content-wSidebar > .panel,

.nui-on .cls-page .page-content-woSidebar > .panel {
    border-radius: var(--radius-lg, 14px);
    border: 1px solid var(--aa-grey-100, #EEF1F2);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(26, 26, 26, .06), 0 1px 3px rgba(26, 26, 26, .08));
    overflow: hidden;
}

/* Any bootstrap .panel-heading inside that content panel (panel-default's
   own heading is a flat white bar with a 1px #ebebeb underline per
   style.css) gets the off-white/ink treatment instead. */
.nui-on .cls-page .page-content-wSidebar > .panel > .panel-heading,

.nui-on .cls-page .page-content-woSidebar > .panel > .panel-heading {
    background: var(--aa-off-white, #F7F9FA);
    color: var(--aa-ink, #222831);
}

/* Home tab's grid-stack widgets (courses/classrooms/home/home-e9a48ca199.html):
   .grid-stack-item-content.edin-panel. style.css's .edin-panel sets
   background-color with !important, which this rule does not touch -
   only radius/border/shadow are overridden, so no !important is needed
   here. */
.nui-on .cls-page .edin-panel {
    border-radius: var(--radius-lg, 14px);
    border: 1px solid var(--aa-grey-100, #EEF1F2);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(26, 26, 26, .06), 0 1px 3px rgba(26, 26, 26, .08));
}
.nui-on .cls-page .edin-panel-header {
    background: var(--aa-off-white, #F7F9FA);
    color: var(--aa-ink, #222831);
}

/* ---------- 1b. Profile roster: legacy toggle + clear glyphs ----------
   Component root confirmed in _teach/Courses/teachProfile/teachProfile.html
   line 1: <div class="... teachprofile-cmp">, already used by that file's
   own scoped <style> block for the same purpose - reused here instead of
   the <teachprofile> element (which replace:true swaps out, though the
   class would still land on the replacement root either way).

   Toggle: line 463-468, <toggle-button custom-class="btn-toggle-primary"
   class="btn-sm f00auto">. shared/components/toggle-button/toggle-button.html
   is a bootstrap_component (replace:true), so it renders as
   <div class="btn-toggle btn-sm f00auto btn-toggle-primary">. Structure:
     .btn-toggle > .btn-toggle-cbox (hidden checkbox)
                 > .btn-toggle-knob (the moving dot, ::before paints it)
                 > .btn-toggle-bg   (the track)
                 > .tbLabel > .tbOn / .tbOff (text, on/off state) */
.nui-on .cls-page .teachprofile-cmp .btn-toggle {
    height: 20px;
    width: 36px;
    border-radius: var(--radius-pill, 999px);
}
/* Text labels don't fit a 20px pill at a readable size - the pill's own
   color already carries the on/off state, so the labels are hidden here
   rather than shrunk past legibility. */
.nui-on .cls-page .teachprofile-cmp .btn-toggle .tbLabel {
    display: none;
}
.nui-on .cls-page .teachprofile-cmp .btn-toggle .btn-toggle-bg {
    background-color: var(--aa-grey-300, #C5CDD0);
    box-shadow: none;
}
/* style.css's .btn-toggle-primary .btn-toggle-cbox:checked ~ .btn-toggle-bg
   sets box-shadow:inset 0 0 0 1px var(--primary) !important - that
   !important forces the matching !important below to win it back. */
.nui-on .cls-page .teachprofile-cmp .btn-toggle-primary .btn-toggle-cbox:checked ~ .btn-toggle-bg {
    background-color: var(--aa-blue, #0074C5);
    box-shadow: none !important;
}
/* style.css's .btn-toggle-primary .btn-toggle-cbox:checked ~ .btn-toggle-knob:before
   sets background-color:var(--primary) !important - matched here. */
.nui-on .cls-page .teachprofile-cmp .btn-toggle-primary .btn-toggle-cbox:checked ~ .btn-toggle-knob:before {
    background-color: var(--aa-white, #fff) !important;
}
.nui-on .cls-page .teachprofile-cmp .btn-toggle-knob:before {
    background-color: var(--aa-white, #fff);
}

/* Clear ("x") glyphs on the Start Date / End Date cells, lines 505 and 523:
   <i class="fa fa-times c-pointer p-absolute" style="right:12px;color:#999"
   ng-click="...clearStartDate/clearEndDate...">. The inline style="color:#999"
   forces !important to override it. */
.nui-on .cls-page .teachprofile-cmp td .fa-times.c-pointer {
    color: var(--aa-grey-500, #7B8E92) !important;
    transition: color .12s ease;
}
.nui-on .cls-page .teachprofile-cmp td .fa-times.c-pointer:hover {
    color: var(--status-error, #C0392B) !important;
}

/* ---------- 1c. Coursework progress tree rows ----------
   Template: public/_eLearning/view/reporting/progress-detailed/progress-report/
   progress-tree/progress-tree.html (used by the eLearningModulesNavigator
   directive, _eLearning/view/modules/modules-tree-view.directive.js).

   IMPORTANT - this template's root <div> carries no class of its own, and
   its only confirmed real usage (<progress-report> in progress-report.html,
   itself used from progress-detailed.html) is opened via
   progressTrackerService.openProgressTrackerModal -> BetterModal, which
   appends its markup straight to <body> (better-modal/better-modal-f0736466dc.js:
   `$document.find("body").append(this.elem)`). That puts this tree OUTSIDE
   the .cls-page subtree entirely, and progressTrackerService is also used
   from shared/components/student-profile/sections/academics - a page that
   has nothing to do with Digital Classroom. A bare `.cls-page` prefix on
   these rules would therefore never match in the one place this tree is
   known to render.
   Both prefixes are kept: `.cls-page` per the brief (in case a future/
   unseen usage nests it there), and `.better-modal:has(progress-report)`
   (same :has() scoping pattern already used in
   new-ui/new-ui-coursework.css) so the fix actually takes effect for the
   real usage without touching every BetterModal in the app. See report for
   the full writeup of this mismatch. */
.nui-on .cls-page .tree-branch-hollow,

.nui-on .better-modal:has(progress-report) .tree-branch-hollow {
    min-height: 32px;
    font-size: 12px;
}
.nui-on .cls-page .tree-branch-title,

.nui-on .better-modal:has(progress-report) .tree-branch-title {
    font-size: 12px;
}

/* Module/folder header rows - any row whose expand/collapse trigger
   (.tree-branch-action, shown only when node.nodes.length > 0 - see
   progress-tree.html's nodes_renderer.html template) is present - get a
   subtle off-white band and bolder title so they read as group headers
   rather than blending into the leaf rows under them. */
.nui-on .cls-page .tree-branch-hollow:has(> .d-flex > .progress-data > .tree-branch-action),

.nui-on .better-modal:has(progress-report) .tree-branch-hollow:has(> .d-flex > .progress-data > .tree-branch-action) {
    background-color: var(--aa-off-white, #F7F9FA);
}
.nui-on .cls-page .tree-branch-hollow:has(> .d-flex > .progress-data > .tree-branch-action) .tree-branch-title,

.nui-on .better-modal:has(progress-report) .tree-branch-hollow:has(> .d-flex > .progress-data > .tree-branch-action) .tree-branch-title {
    font-weight: 600;
}

/* NOTE on the brief's "kebab, visible only on hover" and "green + per
   module header, add a tooltip": neither exists in this template. The
   only always-visible per-row control is .tree-branch-action, the
   edico-burger icon that EXPANDS/COLLAPSES a module (ng-click="toggle(this)")
   - it is the row's only way to open a module, not an overflow/kebab menu,
   so hiding it on hover would remove the ability to tell which rows are
   expandable. There is no "+" button, green or otherwise, anywhere in this
   file (confirmed by grep for plus/add/material-symbols/icofont and by
   reading nodes_renderer.html in full) and no second template reused by
   this directive. The component that DOES have a real "+ / kebab" actions
   group - .tree-branch-actions-group, already handled by
   new-ui/new-ui-coursework.css - is a different file,
   _eLearning/view/modules/tree/nodes-renderer.html, which is out of scope
   here (not in the file list for this task, and already owned by that
   other stylesheet). Skipped rather than inventing markup/behavior that
   isn't there; see report. */

/* ---------- 1d. Progress Tracker internal filter panel ----------
   Template: public/_eLearning/view/reporting/progress-tracker-1ca6877774.html (read-only).
   Sidebar: <aside class="animation_hide-sidebar" ng-class="{'page-sidebar
   h100 overflauto': !progressCtrl.hidePageSidebar, 'page-sidebar-hidden':
   progressCtrl.hidePageSidebar}"> - an <aside>, distinct from the outer
   Digital Classroom rail's <div class="animation_hide-sidebar ...">, so it
   could be targeted on its own via `.cls-page aside.page-sidebar` without
   touching the rail.
   In its EXPANDED state this aside already inherits style.css's
   `.page-sidebar{width:320px}`, plenty of room for "Unit / All Units /
   Module / All Modules" - no clipping there. The ~24px sliver only shows up
   in the COLLAPSED state, which is `progressCtrl.hidePageSidebar` (a
   component-owned boolean, toggled by the button in progress-tracker.html)
   combined with classrooms-rail.css's existing, intentionally broad
   `.cls-page .animation_hide-sidebar.page-sidebar-hidden{width:64px}` rail
   rule - which this same <aside> also matches, because it reuses the
   rail's exact class names. Widening the collapsed state back out would
   fight both the component's own collapse toggle and the rail styling
   that classrooms-rail.css already owns for every other collapsible
   sidebar on this page. Per the brief: skipped rather than fought. No rule
   added for this section. */