/* App-level overrides on top of the backend_theme (loaded after style.css). */

/* The theme sizes every .card to fill its column (height: calc(100% - 30px)),
   which is right for a grid tile (the only child of its column) but stretches
   cards stacked inside another card to the full column height. */
.card .card:not(.row > * > .card:only-child) { height: auto; }

/* The theme's .bg-light is a mid grey (#c8c8c8); pages want a pale neutral panel. */
.bg-soft { background-color: #f5f6fa !important; }

/* The theme's own logo is a small square icon mark (.logo-abbr) plus a
   separate wordmark SVG (.brand-title), sized independently. Ours is one
   flat wordmark image, but .brand-logo img still carries the theme's
   width:11rem rule meant for that icon mark — forcing our much wider image
   into a square-ish box and squashing it. Size it from its own aspect ratio
   instead. */
.brand-logo img.logo-full {
    width: auto !important;
    height: 40px;
    max-height: none;
}

.money { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Sidebar items that are both a real page and an expandable parent (Classes,
   Courses — see includes/sidebar_new.php) carry two direct-child <a>: the
   label link and a separate .has-arrow caret. MetisMenu requires both to stay
   direct children of the <li> (it binds via $li.children(...)), so they can't
   be wrapped in a flex row together — the caret is laid over the label's row
   instead, the same way the theme already lays its :after chevron over a
   single link. */
.mm-caret-wrap { position: relative; }
.mm-caret-wrap > a.has-arrow {
    position: absolute;
    top: 0;
    right: 0;
    width: 3.125rem;
    height: 100%;
    padding: 0 !important;
}

/* dlab-cource tiles (stat_tile() in page_shell.php) decorate their corner with
   a themed PNG per demo page (bulb.png, bookmarks.png, ...); we have neither
   fixed art nor a fixed set of tiles, so the same corner accent is drawn from
   each widget's own icon instead — same position/opacity/hover rule as the
   theme's img (.dlab-cource:hover img { transform: scale(1.3) }). */
.dlab-cource-decor {
    position: absolute;
    top: .5rem;
    right: .75rem;
    opacity: .3;
    font-size: 2.75rem;
    color: #fff;
    transition: transform .5s;
}
.dlab-cource:hover .dlab-cource-decor { transform: scale(1.3); }

/* The theme's DataTables skin (style.css) targets DataTables 1.x's class names
   (.dataTables_wrapper, .dataTables_paginate, .paginate_button, ...). We load
   DataTables 2.0.8 (see PAGE_SHELL_ASSETS['datatables']), which renders
   completely different class names (.dt-container, .dt-paging-button, ...) —
   so none of the theme's own DataTables CSS ever matched, and every list page
   was left to hand-roll its own pagination look (inconsistently, page to
   page). This re-targets the theme's exact visual spec (colors, sizing,
   0.625rem radius, rgba-primary-1 fill) at DataTables 2's real classes, once,
   so every list page matches without a per-page override. */
/* DataTables' own CSS ships every one of its own rules on the identical
   ".dt-paging .dt-paging-button[...]" selector we need (same specificity),
   and re-inserts itself in the DOM during init — so source order can't be
   relied on to make ours win. !important is the only way to reliably beat
   a same-specificity vendor rule whose own DOM position we don't control. */
.dt-search .dt-input,
.dt-length .dt-input {
    border: 1px solid #e2e2e2 !important;
    padding: .4rem .75rem !important;
    color: #6e6e6e !important;
    border-radius: .3125rem !important;
}
.dt-length { margin-bottom: .9375rem; }

.dt-paging { display: flex; align-items: center; flex-flow: wrap; gap: .3125rem; }
.dt-paging .dt-paging-button {
    /* DataTables renders plain <button> elements (no .btn class), so without
       this they keep native OS button chrome — appearance:button (set by the
       theme's own reboot CSS) overrides any background/border/radius set here. */
    appearance: none !important;
    -webkit-appearance: none !important;
    height: 2.8125rem !important;
    min-width: 2.8125rem !important;
    padding: 0 .45rem !important;
    border: 0 !important;
    border-radius: .625rem !important;
    background: var(--rgba-primary-1) !important;
    color: var(--primary) !important;
    font-size: 1rem !important;
}
.dt-paging .dt-paging-button.previous,
.dt-paging .dt-paging-button.next,
.dt-paging .dt-paging-button.first,
.dt-paging .dt-paging-button.last {
    background: transparent !important;
}
.dt-paging .dt-paging-button:hover:not(.disabled),
.dt-paging .dt-paging-button.current {
    background: var(--primary) !important;
    color: #fff !important;
}
.dt-paging .dt-paging-button.disabled { color: #A5AAB4 !important; cursor: not-allowed; }

.dt-info { color: #A5AAB4; font-size: .875rem; }

/* The theme styles selects as .form-control, whose background leaves no dropdown caret. */
select.form-control:not([multiple]):not([size]) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: 14px 10px;
    padding-right: 2.5rem;
}

/* Desktop uses the theme's own slide-in notification drawer (full height of the
   right panel). On a phone the panel isn't a tall dock any more, so there the
   drawer becomes a fixed-size popover, hidden until Bootstrap's .show. */
@media only screen and (max-width: 47.9375rem) {
    .notification_dropdown .dropdown-menu-end {
        display: none !important;
        position: absolute !important;
        top: 0 !important;
        right: calc(100% + .5rem) !important;
        left: auto !important;
        height: auto !important;
        min-width: 23.375rem;
        max-width: calc(100vw - 2rem);
        padding-right: 0;
        border-radius: .75rem;
        box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .15);
        transform: none !important;
    }
    .notification_dropdown .dropdown-menu-end.show {
        display: block !important;
    }
    .notification_dropdown .dropdown-menu-end .widget-timeline,
    .notification_dropdown .dropdown-menu-end .widget-media {
        height: auto !important;
        max-height: 23.125rem;
        overflow-y: auto;
    }
}

/* On a phone the theme shrinks .nav-header to 5rem and hides its own
   wordmark, leaving just its square icon mark — but ours is a single wide
   wordmark, so it overflowed that box, clipped off the left edge of the
   screen and running under the hamburger. The page title is hidden at this
   width, so there's room to give the logo a strip of its own; the hamburger
   is positioned against .nav-header and follows it across. */
@media only screen and (max-width: 47.9375rem) {
    .nav-header {
        width: 9.375rem;
    }
    .brand-logo img.logo-full {
        height: 32px;
    }
}

/* With the sidebar collapsed to its icon rail (the theme's own layout from
   768px up, and whenever the user collapses it), .nav-header is pinned to
   the rail's 6.25rem so the two line up — so here the logo has to scale
   down into that box rather than the box widening for it. */
@media only screen and (min-width: 48rem) {
    [data-sidebar-style="mini"] .brand-logo img.logo-full {
        height: auto;
        max-width: 100%;
    }
}

/* Phone only — the theme drops its fixed icon dock into the header row here. */
@media only screen and (max-width: 47.9375rem) {
    /* The bell and avatar are one <ul> of two <li> (as in the theme's own
       markup), which the theme lays out in a row here — this just centers
       that row in the header instead of letting it overhang top and bottom. */
    .header-right .dlab-side-menu .sidebar-social-link {
        display: flex;
        align-items: center;
    }
    .header-right .dlab-side-menu .sidebar-social-link > ul {
        align-items: center;
        margin-bottom: 0;
    }

    /* Opening to the left of the dock leaves no room on a phone. The dock
       isn't positioned at this width (the theme unsets it), so there's no
       useful box to anchor to either — pin the panel to the viewport just
       under the header instead, inset from both edges. */
    .notification_dropdown .dropdown-menu-end {
        position: fixed !important;
        top: 5.25rem !important;
        right: .75rem !important;
        left: .75rem !important;
        width: auto;
        min-width: 0;
        max-width: none;
    }
}

/* The nav-header is blue now (data-nav-headerbg="color_6"). Our logo is one
   wordmark image with its own light background, so it sits on a white rounded
   plate there instead of being recoloured. */
[data-nav-headerbg="color_6"] .brand-logo img.logo-full {
    background: #fff;
    border-radius: .5rem;
    padding: .2rem .6rem;
    height: 44px;
    box-sizing: border-box;
}

/* Split login card (auth_split_head): the body is only as tall as its content, so
   the theme's h-100 rows can't centre it vertically. Make the body a full-height
   flex box instead. */
body.h-100 {
    min-height: 100vh;
    display: flex;
    align-items: center;
}
body.h-100 > .container {
    width: 100%;
}

/* ── Right-hand panel (profile + notifications) ───────────────────────────
   The panel is the theme's own full-height dock (fixed to the right edge, from
   just under the top to just above the bottom). */
@media (min-width: 48rem) {
    /* Profile at the top of the panel, notifications at the bottom. */
    .dlab-side-menu .sidebar-social-link {
        width: 100%;
        height: 100%;
    }
    .dlab-side-menu .sidebar-social-link > ul {
        height: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
}

.header-right .dlab-side-menu .header-profile .nav-link {
    padding: 0;
}
.header-right .dlab-side-menu .header-profile .nav-link img {
    width: 2.75rem;
    height: 2.75rem;
    padding: 2px;
    background: #fff;
    border: 2px solid var(--primary);
    border-radius: .75rem !important;
    object-fit: cover;
}
.header-right .dlab-side-menu .notification_dropdown .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    margin: 0;
    background: var(--rgba-primary-7);
    color: #fff;
}
.header-right .dlab-side-menu .notification_dropdown .nav-link i {
    color: #fff;
}
.header-right .dlab-side-menu .notification_dropdown .badge {
    position: absolute;
    top: -.4rem;
    right: -.4rem;
}

/* ── Equal-height catalogue cards ─────────────────────────────────────────
   catalogue_card(), catalogue_card_generic() and dash_class_card() all render
   `.card.all-crs-wid.h-auto`. h-auto (which is !important) stops the theme's
   own `.card { height: calc(100% - margin) }`, so each card shrank to its own
   content and a row came out ragged — a card with an objectives block was
   taller than its neighbours. Restore the theme's height so every card
   fills its (already equal-height) column, then pin the button row to the
   card's floor so the buttons line up too. */
.card.all-crs-wid.h-auto {
    height: calc(100% - 1.875rem) !important;
}
@media only screen and (max-width: 35.9375rem) {
    .card.all-crs-wid.h-auto {
        height: calc(100% - 0.938rem) !important;
    }
}
.all-crs-wid > .card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.all-crs-wid .courses-bx,
.all-crs-wid .dlab-info {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.all-crs-wid .dlab-info > :last-child {
    margin-top: auto;
}