/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */
.notyf__ripple{
    height:600px !important;
}

.notyf__message {
    white-space: pre-line !important;
}

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
  color: #0366d6;
}

/*.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}*/

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px; /* Vertically center the text there */
}

/* Default Avatar Styles
-------------------------------------------------- */
.default-avatar {
    max-width: 40px;
    height: 40px;
    width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ccc;
    border-radius: 50%;
    font-family: sans-serif;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
}

.default-avatar-30 {
    max-width: 30px;
    height: 30px;
    width: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ccc;
    border-radius: 50%;
    font-family: sans-serif;
    color: #fff;
    font-weight: bold;
    font-size: 13px;
}

.default-avatar-130 {
    max-width: 130px;
    height: 130px;
    width: 130px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ccc;
    border-radius: 50%;
    font-family: sans-serif;
    color: #fff;
    font-weight: bold;
    font-size: 32px;
}

.default-avatar-30 {
    display: inline-flex
}

.default-avatar-30 + span {
    margin-left: 10px;
}

.default-avatar-30 + a {
    margin-left: 10px;
}

.rounded-circle-inline-30 {
    width: 30px;
    height: 30px;
    display: inline-flex;
}

.rounded-circle + span {
    margin-left: 10px;
}

.rounded-circle + a {
    margin-left: 10px;
}

.card-body {
    color: darkslategrey !important;
}

/* Status Type Styles */
.request-status-type-id-1 {
    background: #007bff linear-gradient(180deg, #268fff, #007bff) repeat-x !important;
    color: #ffffff;
}

.request-status-type-id-2 {
    color: #ffffff;
    background: #dc3545 linear-gradient(180deg, #e15361, #dc3545) repeat-x !important;
}

.request-status-type-id-4 {
    color: #ffffff;
    background: #ff751e linear-gradient(180deg, #ff902f, #ff751e) repeat-x !important;
}

.request-status-type-id-5 {
    color: #ffffff;
    background: #6610f2 repeat-x !important;
}

.request-priority-type-id-bl-1 {
    margin-left: 1px;
    border-left: none;
    /*border-left: 1px solid #28a745 !important;*/
}

.request-priority-type-id-bl-2 {
    margin-left: 1px;
    border-left: 5px solid #dc3545 !important;
    -webkit-animation: request-priority-type-id-bl-4 linear 1s infinite;
    animation: request-priority-type-id-bl-4 linear 1s infinite;
}

.request-priority-type-id-bl-4 {
    margin-left: 1px;
    border-left: 5px solid #ff751e !important;
    -webkit-animation: request-priority-type-id-bl-4 linear 1s infinite;
    animation: request-priority-type-id-bl-4 linear 1s infinite;
}

.request-priority-type-id-bl-5 {
    margin-left: 1px;
    border-left: 5px solid #6610f2 !important;
    -webkit-animation: request-priority-type-id-bl-4 linear 1s infinite;
    animation: request-priority-type-id-bl-4 linear 1s infinite;
}


.request .request-user-block {
    float: left;
    padding-bottom: 1rem !important;
    padding-left: 0.25rem !important;
    width: 100%;
}

    .request .request-user-block img {
        float: left;
        height: 40px;
        width: 40px;
        margin-right: 5px;
        object-fit: cover;
    }

    .request .request-user-block .request-user-block-name {
        font-size: 0.875rem !important;
    }

    .request .request-user-block .request-user-block-description {
        font-size: 13px;
        margin-top: -3px;
        display: block;
    }

.request .request-header-text {
    display: block;
    font-size: 16px;
    font-weight: 400;
    padding-bottom: 3px;
}

.request-header-text-line {
    display: flex !important;
    align-items: center;
    flex-basis: 100%;
}

    .request-header-text-line > .line {
        border-top: 1px solid grey;
        flex-grow: 1;
        margin: 0 10px;
    }

.activities {
    padding: 0;
}

    .activities .activity {
    }

        .activities .activity .activity-body {
            display: block;
            margin: 0;
            overflow: hidden;
        }

            .activities .activity .activity-body .activity-body-content {
                text-align: right;
                position: relative;
                display: block;
                float: right;
                padding: 3px 5px;
                margin: 0;
                clear: both;
                color: var(--dark);
                background-color: #E5E5F0;
                border-radius: 4px;
            }

        .activities .activity.activity-left .activity-body .activity-body-content {
            text-align: left;
            float: left;
            margin: 0 0 5px 0;
            color: var(--dark);
            background-color: #f3f2f1;
        }

        .activities .activity .activity-body .activity-body-content p {
            margin: 0;
            font-size: 80%;
            font-weight: 400;
        }

        .activities .activity .activity-avatar {
            float: right;
            margin-top: 8px;
        }

        .activities .activity.activity-left .activity-avatar {
            float: left;
            margin-top: 8px;
        }

        .activities .activity .activity-avatar .avatar {
            width: 50px;
            margin-top: -10px;
        }

            .activities .activity .activity-avatar .avatar img {
                width: 30px;
                height: 30px;
                object-fit: cover;
            }


.dropdown-menu.dropdown-filter > a.active > i {
    display: inline !important;
}

/* Provide allows for large images imbeded from RTE to size on small displays */
img.inline_resize {
    max-width: 100%;
    height: auto;
}

.k-switch-md {
    width: 61px !important;
}

.badge-diabetic {
    color: #fff;
    background-color: #6610f2;
}

/* ── Kendo dropdowns inside create/edit modals ──────────────────────────────────
   Their popups are appended to #create-form; if the form isn't a positioned containing
   block the absolutely-positioned popup offsets from its input ("dropdowns misaligned").
   Make the form a containing block and ensure the widgets fill the column like the
   Bootstrap inputs beside them. */
#create-form { position: relative; }
#create-form .k-dropdownlist,
#create-form .k-picker,
#create-form .k-datepicker,
#create-form .k-timepicker,
#create-form .k-numerictextbox {
    width: 100%;
}

/* ════════════════════════════════════════════════════════════════════════════════
   DARK MODE — Wellness custom components
   ────────────────────────────────────────────────────────────────────────────────
   LeeStack.Core signals dark mode with the `.dark-mode` class on <body> (AdminLTE
   style; it auto-swaps Kendo to its -dark theme and ships leestack.darkmode.css for
   Bootstrap/AdminLTE). These rules cover the Wellness app's own hardcoded-light
   components so they follow the theme. Scoped under `.dark-mode` → inert in light mode,
   and the extra class beats the base (and inline <style>) rules on specificity.
   Surfaces track AdminLTE dark (#343a40 card / #454d55 border / #e9ecef text).
   ════════════════════════════════════════════════════════════════════════════════ */

/* Program cards (Views/EmployeeWellnessPrograms/_ProgramCards.cshtml) */
.dark-mode .program-card {
    background: #343a40;
    border-color: #4b545c;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.dark-mode .program-card:hover {
    box-shadow: 0 8px 22px rgba(0,0,0,0.55);
}
.dark-mode .program-card-title { color: #f1f3f5; }
.dark-mode .program-card-desc { color: #c2c9d0; }
.dark-mode .program-card-meta { color: #c2c9d0; }
.dark-mode .program-card-footer { border-top-color: #4b545c; }
.dark-mode .program-card-details { color: #9ec5ff; }
.dark-mode .program-card-tag {
    /* Light text on a dark accent-tinted pill — the same accent as text would fail AA. The
       group's color identity stays visible via the pill tint + the card's accent top-border. */
    background: color-mix(in srgb, var(--card-accent, #6c757d) 30%, #15181c);
    color: #e9ecef;
}
.dark-mode .program-card-status.enrolled {
    background: #1e3a2a; color: #87d6a3; border-color: #2c5240;
}
.dark-mode .program-card-status.waitlist {
    background: #4a3f12; color: #e7c66b; border-color: #6b5b1c;
}

/* Group tiles + external link tiles (Index.cshtml) */
.dark-mode .group-tile {
    background: #343a40;
    border-color: #4b545c;
    color: #e9ecef;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.dark-mode .group-tile:hover { color: #e9ecef; box-shadow: 0 10px 24px rgba(0,0,0,0.55); }
.dark-mode .group-tile-name { color: #f1f3f5; }
.dark-mode .group-tile-count { color: #9aa3ab; }
.dark-mode .group-tile-icon {
    /* Near-black base so the saturated accent glyph keeps contrast (large icon → AA 3:1). */
    background: color-mix(in srgb, var(--group-accent, #6c757d) 16%, #15181c);
}
.dark-mode .link-tile {
    background: #343a40;
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}

/* Shared empty-state cards (program lists, group index) */
.dark-mode .programs-empty h5 { color: #dee2e6; }
.dark-mode .programs-empty p { color: #9aa3ab; }

/* Description tooltips (Classes / Schedules / Instructor Dashboard). The light card is
   driven by `.k-tooltip:has(.app-tooltip)` (see _GridStylesAndFormating); darken it and
   its header/body here. High specificity via :has() beats the per-view light rules. */
.dark-mode .k-tooltip:has(.app-tooltip) {
    background: #343a40;
    color: #e9ecef;
    border-color: #4b545c;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.dark-mode .k-tooltip:has(.app-tooltip) .app-tooltip-header {
    background: #3f474e;
    color: #c2c9d0;
    border-bottom-color: #4b545c;
}
.dark-mode .k-tooltip:has(.app-tooltip) .app-tooltip-body { color: #e9ecef; }

/* Schedule preview modal (_PreviewModal.cshtml) */
.dark-mode .schedule-preview .preview-header { border-bottom-color: #4b545c; }
.dark-mode .schedule-preview .preview-title { color: #f1f3f5; }
.dark-mode .schedule-preview .meta-row { color: #c2c9d0; }
.dark-mode .schedule-preview .description-block,
.dark-mode .schedule-preview .stat-card {
    background: #3f474e;
    border-color: #4b545c;
    color: #e9ecef;
}
.dark-mode .schedule-preview .stat-card .stat-num { color: #f1f3f5; }
.dark-mode .schedule-preview .day-pill {
    background: #3f474e; color: #9aa3ab; border-color: #4b545c;
}
.dark-mode .schedule-preview .day-pill.on {
    background: #11314f; color: #9ec5ff; border-color: #1c4a73;
}

/* Group drill-in hero keeps its accent gradient (white text on color is fine in both
   themes); just soften the shadow. */
.dark-mode .group-hero,
.dark-mode .wellness-hero { box-shadow: 0 6px 18px rgba(0,0,0,0.5); }

/* ════════════════════════════════════════════════════════════════════════════════
   DARK MODE — ADA / WCAG AA contrast for pills, badges & infographics
   ────────────────────────────────────────────────────────────────────────────────
   Status pills and infographic text across the app use Bootstrap contextual utilities
   (text-*, *-subtle) and inline semantic colors. Without Bootstrap's data-bs-theme,
   those keep their light / over-saturated light-mode values, which fail AA on dark
   surfaces (e.g. text-success #198754 ≈ 3:1, bg-success-subtle stays pale). Remap the
   contextual text utilities and the Bootstrap 5.3 "subtle" variables to the AA-checked
   accent palette LeeStack uses for dark badges (≈5.98:1–11.21:1 on #343a40 / #454d55).
   ════════════════════════════════════════════════════════════════════════════════ */

/* Contextual text utilities — drive capacity text ("3 seats left"), status icons,
   badge text on subtle pills, link-colored hints, etc. */
.dark-mode .text-primary   { color: #9ec5ff !important; }
.dark-mode .text-success   { color: #87d6a3 !important; }
.dark-mode .text-danger    { color: #f1929b !important; }
.dark-mode .text-warning,
.dark-mode .text-warning-emphasis { color: #ffd451 !important; }
.dark-mode .text-info      { color: #7adcef !important; }
.dark-mode .text-secondary { color: #ced4da !important; }

/* Bootstrap 5.3 "subtle" utilities (the app's status pills: My Class Record statuses,
   instructor certifications, schedule-preview badges, etc.). Redefining the variables
   tints every bg-*-subtle / border-*-subtle / text-*-emphasis at once, AA-compliant. */
.dark-mode {
    --bs-primary-bg-subtle: #11314f;   --bs-primary-border-subtle: #1c4a73;   --bs-primary-text-emphasis: #9ec5ff;
    --bs-secondary-bg-subtle: #3a4047; --bs-secondary-border-subtle: #565e66; --bs-secondary-text-emphasis: #ced4da;
    --bs-success-bg-subtle: #1e3a2a;   --bs-success-border-subtle: #2c5240;   --bs-success-text-emphasis: #87d6a3;
    --bs-danger-bg-subtle: #4a2326;    --bs-danger-border-subtle: #6b3338;    --bs-danger-text-emphasis: #f1929b;
    --bs-warning-bg-subtle: #3d3413;   --bs-warning-border-subtle: #6b5b1c;   --bs-warning-text-emphasis: #ffd451;
    --bs-info-bg-subtle: #0c3a42;      --bs-info-border-subtle: #14545f;      --bs-info-text-emphasis: #7adcef;
}
/* The app's status pills pair a subtle background with the *solid* contextual text class
   (e.g. bg-success-subtle text-success). The .text-* overrides above already lift those to
   the AA accent, but pin the common pairs explicitly so they win regardless of class order. */
.dark-mode .badge.bg-primary-subtle,
.dark-mode .badge.bg-success-subtle,
.dark-mode .badge.bg-danger-subtle,
.dark-mode .badge.bg-warning-subtle,
.dark-mode .badge.bg-info-subtle,
.dark-mode .badge.bg-secondary-subtle { border-color: rgba(255,255,255,0.10); }

/* Attendance toggle icons (present/absent infographic). */
.dark-mode .attendance-toggle.attended { color: #87d6a3; }
.dark-mode .attendance-toggle.absent   { color: #f1929b; }

/* Capacity-status icons inside cards use text-* utilities (handled above). The decorative
   empty-state glyphs (rgb(200,204,209)) are non-text graphics and read fine on dark. */

/* Dashboard summary cards (Views/Dashboard/Index.cshtml) — white card + dark text in light
   mode; theme the surface and lift the brand-colored icons. The icon color is an inline
   per-card hex, so brighten the rendered glyph with a filter (no per-color !important needed)
   to clear AA 3:1 for the large icon on the dark card. */
.dark-mode .dashboard-card {
    background: #343a40;
    border-color: #4b545c;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.dark-mode .dashboard-card:hover,
.dark-mode .dashboard-card-active { box-shadow: 0 4px 12px rgba(0,0,0,0.55); }
.dark-mode .dashboard-card-label { color: #b8c0c9; }
.dark-mode .dashboard-card-value { color: #f1f3f5; }
.dark-mode .dashboard-card-icon { filter: brightness(1.25) saturate(1.05); }

/* "Inactive" grid row highlight is a light blue (#aae2ff) that hides the light Kendo-dark
   row text. Use a dark tint that keeps the light text readable. */
.dark-mode #dashboardGrid tr.dashboard-row-inactive,
.dark-mode #dashboardGrid tr.dashboard-row-inactive.k-alt {
    background-color: #103a4a !important;
}

/* Allows for scollbar to still be there when validation fails in modal. */
#form-modal {
    overflow-y: auto;
}

/* ─── Enrollment confirmation popups (Wellness Programs) ─────────────────────────────
   These SweetAlert2 popups render email-template HTML verbatim — the same copy the
   confirmation email sends. That HTML is authored for email clients: the template editor
   exposes a "View HTML" tool (there is no image button), so admins paste in <img>/<table>
   markup sized in fixed pixels for a ~600px email body. The swal popup is a fixed
   width: 32em, so oversized media doesn't widen it — it overflows the html container,
   which scrolls (overflow: auto), leaving the image clipped behind a horizontal bar.
   Clamping the media to the container is what actually fits it to the popup.

   Applied via customClass.popup at every Swal.fire that shows popupHtml — see
   _ProgramCards.cshtml, Class.cshtml, and _WellnessCenterEnrollModal.cshtml. */
.wellness-email-popup {
    /* ~640px, matching the width email templates are typically designed against, so most
       images need little or no downscaling. Shrinks to fit narrow screens. Wins on
       specificity alone — swal wraps its own selectors in :where(), which scores zero —
       so !important here is only a guard against future base-CSS changes. */
    width: min(92vw, 40rem) !important;
}

/* !important IS load-bearing on these two rules: pasted email markup carries its own
   width/height attributes and inline styles, and an inline style beats any selector. */
.wellness-email-popup .swal2-html-container img {
    max-width: 100% !important;
    /* Cap tall/banner art so it can't push the message text below the fold. */
    max-height: 45vh !important;
    /* Both axes are clamped, so releasing the authored height keeps the aspect ratio. */
    height: auto !important;
}

/* Email HTML is usually table-based at a fixed width; let those tables shrink. Width is
   left alone so a 600px layout table still renders at min(600px, popup) rather than
   collapsing to shrink-to-fit. */
.wellness-email-popup .swal2-html-container table {
    max-width: 100% !important;
}

/* A long template scrolls inside the popup instead of growing past the viewport and
   taking the OK button with it. */
.wellness-email-popup .swal2-html-container {
    max-height: 65vh;
    overflow-x: hidden;
}