/* ======================== */
/* FULL BOOTSTRAP 5 BUTTON FIX */
/* ======================== */


/* ======================== */
/* FULL BOOTSTRAP 5 DATATABLE FIX */
/* ======================== */

/* ---------------- Fonts & Base Table ---------------- */
.data_table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 0.875rem !important; /* Bootstrap table font */
    color: #212529 !important;
}

    /* ---------------- Table Header ---------------- */
    .data_table thead {
        background-color: #f8f9fa !important; /* light gray header */
        color: #212529 !important;
        font-weight: 500;
    }

    .data_table th {
        border: 1px solid #dee2e6 !important;
        vertical-align: middle !important;
        padding: 0.75rem !important;
        text-align: left;
    }

    /* ---------------- Table Rows ---------------- */
    .data_table tbody tr {
        background-color: #fff !important;
        color: #212529 !important;
    }

        .data_table tbody tr:nth-of-type(odd) {
            background-color: #f8f9fa !important; /* striped rows */
        }

        .data_table tbody tr:hover {
            background-color: #e9ecef !important; /* hover effect */
        }

    .data_table td {
        border: 1px solid #dee2e6 !important;
        vertical-align: middle !important;
        padding: 0.75rem !important;
    }

/* ---------------- Responsive Wrapper ---------------- */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---------------- Pagination Buttons ---------------- */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #0d6efd !important;
    background: none !important;
    border: 1px solid transparent !important;
    cursor: pointer;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        color: #fff !important;
        background-color: #0d6efd !important;
        border: 1px solid #0d6efd !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background-color: #0b5ed7 !important;
        border-color: #0b5ed7 !important;
        color: #fff !important;
    }

/* ---------------- Search Box & Length Dropdown ---------------- */
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
    align-items: center;
    margin-bottom: 1rem !important;
    font-size: 0.875rem !important;
}

    .dataTables_wrapper .dataTables_filter label,
    .dataTables_wrapper .dataTables_length label {
        font-weight: 500;
        margin-right: 0.5rem !important;
    }

    .dataTables_wrapper .dataTables_length select.form-select.form-select-sm[name="data_table_length"] {
        padding-left: 0.5rem !important;
    }

    .dataTables_wrapper .dataTables_filter input,
    .dataTables_wrapper .dataTables_length select {
        height: 2rem !important;
        display: inline-block !important;
        width: auto !important;
        padding: 0.20rem 2rem !important;
        font-size: 0.875rem !important;
        border: 1px solid #ced4da !important;
        border-radius: 0.25rem !important;
    }

/* ---------------- Optional: Sorting Arrow Color ---------------- */
.data_table .sorting_asc::after,
.data_table .sorting_desc::after {
    color: #0d6efd !important;
}

/* ---------------- Optional: Disabled Buttons ---------------- */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    cursor: not-allowed;
    opacity: 0.5 !important;
}


/* ======================== */
/* FULL BOOTSTRAP 5 Form FIX */
/* ======================== */

/* ---------------- Fonts & Forms ---------------- */

.form-select {
    background-position: right .3rem center !important;
}


/* ======================== */
/* DASHBOARD INFO CARD HEIGHT FIX */
/* ======================== */

/* style.css gives .dashboard-info__card-box "height: 100%" but never styles its
   parent .dashboard-info__card, so that parent stays auto-height and the 100%
   resolves to auto - a card whose heading wraps to two lines ("Completed
   Courses") ends up taller than its neighbours. Bootstrap already stretches the
   .col-* to the tallest card in the row, so the only missing link is passing
   that full height down through .dashboard-info__card. Applies to every
   dashboard (user, admin, carer, office staff). */
.dashboard-info__card {
    height: 100%;
}


/* ======================== */
/* DASHBOARD HEADER MENU (top-right account dropdown) */
/* ======================== */

/* The theme ships .dashboard-menu as a full-screen takeover: inset 0 with an
   opaque #f9f9fb background, a 690px white panel and a decorative image, which
   wipes the page out of view while it is open. Every dashboard renders it as a
   small account dropdown instead - the overlay stays transparent and only
   catches outside clicks, and main.js positions the panel under the header's
   toggle button. */
.dashboard-menu--compact {
    background-color: transparent;
    background-image: none;
    transition: opacity 0.15s ease-in-out;
    transition-delay: 0s;
    /* The theme parks .dashboard-menu at z-index 999, which several page
       elements tie - the exam page's sticky timer bar is also 999 - and a tie
       is settled by document order, so the page content painted straight
       through the open dropdown. 1035 clears every in-page layer while staying
       under Bootstrap's offcanvas backdrop (1040) / offcanvas (1045), modal
       backdrop (1050) / modal (1055) and SweetAlert (1060), all of which must
       still cover the header. Toasts sit above everything at their own
       z-index - see #toast-container in the layouts. */
    z-index: 1035;
}

/* While the menu is open its overlay lies over the whole viewport
   - including the toggle button - so hovering the button showed the overlay's
   default arrow instead of the button's own pointer, and the hover state was
   lost. Lift the button just above the overlay so it keeps its cursor and
   receives the click itself (main.js then toggles the menu shut). It has to
   track the overlay's z-index above - one step up, and still under the
   offcanvas / modal / SweetAlert layers. */
.dashboard-header__toggle {
    position: relative;
    z-index: 1036;
}

/* The toggle highlights only while it is actually engaged: hovered, focused
   from the keyboard, or holding the dropdown open (.is-active, set by main.js).
   Once the panel closes and the pointer leaves it drops straight back to the
   default transparent background. */
.dashboard-header__toggle .btn-toggle {
    background-color: transparent;
    /* !important beats the transition custom.css forces onto .btn-hover-lift. */
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease !important;
}

    .dashboard-header__toggle .btn-toggle:hover,
    .dashboard-header__toggle .btn-toggle:focus-visible,
    .dashboard-header__toggle .btn-toggle.is-active {
        background-color: #eaf2fd;
        border-color: #0071dc;
        color: #0071dc;
        /* custom.css's .btn-hover-lift paints a dark inset overlay on hover and
           focus; it would muddy the tint above, so the tint replaces it. */
        box-shadow: none !important;
    }

    /* A clicked button keeps focus, so without this the pressed look from
       .btn-hover-lift stayed on after the toggle closed the menu. Keyboard
       focus still shows it through :focus-visible above. */
    .dashboard-header__toggle .btn-toggle:focus:not(:focus-visible):not(:hover):not(.is-active) {
        transform: none !important;
        box-shadow: none !important;
    }

.dashboard-menu--compact .dashboard-menu__panel {
    position: fixed;
    top: 90px;
    right: 24px;
    width: 290px;
    max-width: calc(100vw - 32px);
    background: #ffffff;
    border: 1px solid #e9edf5;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(23, 63, 142, 0.16);
    padding: 8px;
}

.dashboard-menu--compact .dashboard-menu__menu-link {
    padding: 0;
    margin: 0;
    list-style: none;
}

    /* Overrides the theme's 48px display-size menu links. Text and icon colours follow the left sidebar menu
       (navy text, each icon in its own .ic-N colour - the same variables as .dash-sb6 in custom.css). */
    .dashboard-menu--compact .dashboard-menu__menu-link > li > a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.4;
        color: var(--color-navy);
        border-radius: 8px;
        text-decoration: none;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

        .dashboard-menu--compact .dashboard-menu__menu-link > li > a > i {
            width: 18px;
            flex-shrink: 0;
            font-size: 15px;
            text-align: center;
            color: var(--ic, var(--color-primary));
            transition: transform .18s ease;
        }

        .dashboard-menu--compact .dashboard-menu__menu-link > li > a:hover,
        .dashboard-menu--compact .dashboard-menu__menu-link > li > a:focus-visible {
            background-color: rgba(var(--color-navy-rgb), .06);
            color: var(--color-theme-dark);
        }

        /* the icon grows on hover, as in the sidebar */
        .dashboard-menu--compact .dashboard-menu__menu-link > li > a:hover > i,
        .dashboard-menu--compact .dashboard-menu__menu-link > li > a:focus-visible > i { transform: scale(1.3); }

    .dashboard-menu--compact .dashboard-menu__menu-link > li > a.ic-1 { --ic: var(--color-primary); }
    .dashboard-menu--compact .dashboard-menu__menu-link > li > a.ic-2 { --ic: var(--color-accent-orange); }
    .dashboard-menu--compact .dashboard-menu__menu-link > li > a.ic-3 { --ic: var(--color-success); }
    .dashboard-menu--compact .dashboard-menu__menu-link > li > a.ic-4 { --ic: var(--color-lead); }
    .dashboard-menu--compact .dashboard-menu__menu-link > li > a.ic-5 { --ic: var(--color-danger); }
    .dashboard-menu--compact .dashboard-menu__menu-link > li > a.ic-6 { --ic: var(--color-gold-dark); }

    /* email and phone first (filled by main.js), then a divider, then the menu links. Icons keep the colours the header chips had. */
    .dashboard-menu--compact .dashboard-menu__contact { display: grid; gap: 4px; padding: 6px 4px 8px; }
    .dashboard-menu--compact .dashboard-menu__crow { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 4px 8px; }
    .dashboard-menu--compact .dashboard-menu__crow > i { width: 18px; flex: none; text-align: center; font-size: var(--fs-16); }
    .dashboard-menu--compact .dashboard-menu__crow:nth-child(1) > i { color: var(--color-illus-blue-soft); }
    .dashboard-menu--compact .dashboard-menu__crow:nth-child(2) > i { color: var(--color-mint); }
    .dashboard-menu--compact .dashboard-menu__ctxt { min-width: 0; }
    .dashboard-menu--compact .dashboard-menu__ctxt small { display: block; font-size: var(--fs-10); font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--color-text-muted); }
    .dashboard-menu--compact .dashboard-menu__ctxt span { display: block; font-size: var(--fs-13); font-weight: 600; color: var(--color-navy); overflow-wrap: anywhere; }
    .dashboard-menu--compact .dashboard-menu__sep { height: 1px; margin: 0 4px 6px; background: var(--color-border-divider); }
    /* name and role: only on small screens, where the header bar hides them (the mass user has no role) */
    .dashboard-menu--compact .dashboard-menu__who { display: none; }
    .dashboard-menu--compact .dashboard-menu__name { font-size: var(--fs-16); font-weight: 700; line-height: 1.25; color: var(--color-navy); overflow-wrap: anywhere; }
    .dashboard-menu--compact .dashboard-menu__role { align-self: flex-start; padding: 1px 10px; border-radius: 99px; background: var(--color-gold); color: var(--color-navy); font-size: var(--fs-10); font-weight: 700; line-height: 1.5; }
    .dashboard-menu--compact .dashboard-menu__role[hidden] { display: none; }
    @media (max-width: 575px) {
        .dashboard-menu--compact .dashboard-menu__who:not([hidden]) { display: flex; flex-direction: column; gap: 4px; margin: 0 4px 6px; padding: 8px 8px 10px; border-bottom: 1px solid var(--color-border-divider); }
    }
    .dashboard-menu--compact .dashboard-menu__contact[hidden], .dashboard-menu--compact .dashboard-menu__sep[hidden] { display: none; }

    .dashboard-menu--compact .dashboard-menu__menu-link > li.dashboard-menu__divider {
        height: 1px;
        margin: 6px 4px;
        background: #eef1f6;
    }


/* ======================== */
/* DASHBOARD INFO CARD HOVER */
/* ======================== */

/* Only the tiles that actually go somewhere react to the pointer, and they
   react the way the course, bundle and category cards on the public pages do:
   a small lift, a deeper shadow and a primary-coloured border. Every rule is
   scoped to a.dashboard-info__card-box on purpose - the dashboards also render
   tiles as a plain <div> when there is no destination page yet, and those must
   stay completely inert under the cursor. Applies to every dashboard (user,
   admin, carer, office staff). */
a.dashboard-info__card-box {
    cursor: pointer;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

    a.dashboard-info__card-box:hover,
    a.dashboard-info__card-box:focus-visible {
        transform: translateY(-4px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
        border-color: #0071dc;
    }

a.dashboard-info__card-box .dashboard-info__card-icon {
    transition: transform 0.3s ease-in-out;
}

a.dashboard-info__card-box:hover .dashboard-info__card-icon {
    transform: scale(1.06);
}

a.dashboard-info__card-box .dashboard-info__card-value,
a.dashboard-info__card-box .dashboard-info__card-heading {
    transition: color 0.3s ease-in-out;
}

a.dashboard-info__card-box:hover .dashboard-info__card-value {
    color: #0071dc;
}

/* style.css turns the heading blue on hover for EVERY tile. Take that back for
   the ones that are not links: a tile that leads nowhere must not change at
   all under the cursor, text colour included. */
.dashboard-info__card-box:not(a):hover .dashboard-info__card-heading {
    color: #333;
}