/* ============================================================
   NEW UI — HOME DASHBOARD (My Digital Classrooms / "Dashboard AA")
   Brings this board onto the same card language as the My Performance
   board (new-ui-my-performance.css), which in turn follows the AA Design
   System concept. Same surfaces, same header treatment, same tokens.

   WHY IT NEEDED ITS OWN FILE. new-ui-pages.css already cards the New UI's
   widgets, but every one of those rules is scoped
   `.dashboard-widget-area .widget.panel.panel-widget`. This page renders
   through <home-directive> (home-ee6abbec9c.html) on gridstack, so its cards are
   `.panel.panel-default.panel-flex.grid-stack-item-content` with
   `.gs-drag-handle` headers - a completely different chrome that those
   selectors can never reach. That is why the page still showed the legacy
   grey header bars while the rest of the New UI had moved on.

   SCOPE — #dbTop is home.html's own root id (line 17) and appears nowhere
   else in the app, so it anchors these rules to this page. That matters:
   .grid-stack-item-content is also used by
   courses/classrooms/home/home-ee6abbec9c.html and _teach/Courses/MyClasses.html,
   and neither should be restyled from here. Every rule additionally
   requires .is-myincite-ui + .nui-modern-pages, so this is New-UI-only.
   ============================================================ */

/* ==========================================================================
   1. WIDGET CARD
   Matches the My Performance section card: solid white, hairline border,
   --radius-lg, --shadow-md. Replaces the flat bordered panel.
   ========================================================================== */
.is-myincite-ui.nui-modern-pages #dbTop .panel.grid-stack-item-content {
    background: var(--aa-white, #fff);
    border: 1px solid var(--aa-grey-100, #EEF1F2);
    border-radius: var(--radius-lg, 14px);
    box-shadow: var(--shadow-md, 0 2px 6px rgba(26, 26, 26, .08), 0 6px 16px rgba(26, 26, 26, .08));
    overflow: hidden;
}

/* ==========================================================================
   2. WIDGET HEADER
   The legacy chrome is a filled grey bar (.section-title) or a solid blue
   one (.brand-bg-primary, used by the classrooms widgets). Both are
   normalised to the board's header: no fill, hairline rule, uppercase
   13px/700 at .04em on --aa-ink.

   NOTE this drops the blue fill on the "My Digital Classrooms" header. It
   is deliberate - a single header language is the point of the overhaul -
   but it is also the one opinionated call here, so it is isolated to the
   .brand-bg-primary rule below and can be reverted on its own.
   ========================================================================== */
.is-myincite-ui.nui-modern-pages #dbTop .grid-stack-item-content > .gs-drag-handle {
    background: transparent;
    border-bottom: 1px solid var(--aa-grey-100, #EEF1F2);
    padding: 16px 18px 10px;
    min-height: 0;
}
/* .brand-bg-primary paints via a background utility; neutralise it here so
   the classrooms widgets sit in the same language as the rest. */
.is-myincite-ui.nui-modern-pages #dbTop .grid-stack-item-content > .gs-drag-handle.brand-bg-primary {
    background: transparent;
    background-color: transparent;
}
.is-myincite-ui.nui-modern-pages #dbTop .grid-stack-item-content > .gs-drag-handle .panel-title {
    margin: 0;
    font-family: var(--nui-font);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--aa-ink, #222831);
}
/* the info "i" and header controls sat on a coloured bar and were painted
   white; on the flat header they need the normal ink/brand treatment */
.is-myincite-ui.nui-modern-pages #dbTop .grid-stack-item-content > .gs-drag-handle .i-info,
.is-myincite-ui.nui-modern-pages #dbTop .grid-stack-item-content > .gs-drag-handle .is-text-white {
    color: var(--aa-grey-500, #7B8E92) !important;
}
.is-myincite-ui.nui-modern-pages #dbTop .grid-stack-item-content > .gs-drag-handle .i-info:hover {
    color: var(--aa-blue, #0074C5) !important;
}

/* ==========================================================================
   3. WIDGET BODY
   Give the body the same 18px inset the section headers use, so content
   lines up with its own title - the alignment the My Performance board
   settled on.
   ========================================================================== */
.is-myincite-ui.nui-modern-pages #dbTop .grid-stack-item-content > .panel-body {
    padding: 16px 18px 18px;
}
/* widgets that ship their own edge-to-edge content (lists, tables, iframes)
   opt out via the existing p0 / padding:0 markers rather than being forced
   into the inset above */
.is-myincite-ui.nui-modern-pages #dbTop .grid-stack-item-content > .panel-body.p0 {
    padding: 0;
}

/* ==========================================================================
   4. EMPTY STATES
   "There are no events currently." and friends sit as bare text on white.
   Match the board's muted caption treatment.
   ========================================================================== */
.is-myincite-ui.nui-modern-pages #dbTop .grid-stack-item-content .no-data,
.is-myincite-ui.nui-modern-pages #dbTop .grid-stack-item-content .text-center.text-muted {
    color: var(--aa-grey-500, #7B8E92);
    font-size: 13px;
}

/* ==========================================================================
   5. DRAG HANDLE
   .gridstack-drag:after (style.css:41043) paints the six-dot grab handle
   absolutely at left:0, so it ignores this header's padding and sits in the
   card's rounded corner, crowding the title - the odd cluster at each
   card's top-left.

   Inset it to the header's own 18px and centre it vertically, then follow
   the New UI's established affordance pattern (cf. new-ui-theme.css
   "COLLAPSE HANDLE, TAKE 5"): nothing at rest, revealed on hover. Dragging
   is a rearrange gesture, not something that needs advertising on every
   card at all times.

   .gridstack-drag also carries padding-left:30px to clear that handle;
   §2's padding already overrides it, which is why the title was landing at
   18px while the dots stayed at 0.
   ========================================================================== */
.is-myincite-ui.nui-modern-pages #dbTop .grid-stack-item-content > .gs-drag-handle.gridstack-drag::after {
    left: 18px;
    top: 50%;
    height: 14px;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity .12s ease;
}
.is-myincite-ui.nui-modern-pages #dbTop .grid-stack-item-content:hover > .gs-drag-handle.gridstack-drag::after {
    opacity: .55;
}
/* with the handle hidden at rest the title takes the full inset; on hover it
   shifts clear of the dots rather than being overlapped by them */
.is-myincite-ui.nui-modern-pages #dbTop .grid-stack-item-content:hover > .gs-drag-handle.gridstack-drag {
    padding-left: 42px;
}

/* ==========================================================================
   6. ICON BUTTONS
   .btn-circle is a 24px box with line-height:22px (style.css), so the glyph
   rides ~2px high - and FontAwesome's own vertical metrics push it further
   off. Centre it geometrically instead of by line-height, which is exact
   at any icon size.
   ========================================================================== */
.is-myincite-ui.nui-modern-pages #dbTop .btn-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
    padding: 0;
}
.is-myincite-ui.nui-modern-pages #dbTop .btn-circle > i {
    line-height: 1;
    display: block;
}
/* the large round add buttons in the classroom widgets use the same glyph
   at a bigger size - centre those the same way */
.is-myincite-ui.nui-modern-pages #dbTop .btn .fa-plus,
.is-myincite-ui.nui-modern-pages #dbTop a .fa-plus {
    line-height: 1;
    vertical-align: middle;
}