/*
=============================================================================
ChilledTutor Fixed Universal Footer 9.5.4
-----------------------------------------------------------------------------
A shared fixed footer for every standard ChilledTutor / EduSuite page that uses
the common header/footer shell. The footer remains visible at the bottom of the
viewport while a dynamically sized spacer prevents it from covering page content.
Compact and immersive layouts receive their own safe-height rules.
=============================================================================
*/

.ct-dashboard-footer {
    position: fixed;
    z-index: 1025;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    min-width: 0;
    margin: 0;
    border-top: 1px solid rgba(8, 38, 83, .12);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(247, 250, 255, .99));
    box-shadow: 0 -10px 30px rgba(15, 36, 66, .08);
    color: #39506f;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.ct-dashboard-footer__frame {
    display: grid;
    grid-template-columns: minmax(260px, 1.25fr) minmax(360px, 1.5fr) minmax(240px, .85fr);
    align-items: center;
    gap: clamp(14px, 2vw, 28px);
    width: 100%;
    max-width: 2200px;
    margin: 0 auto;
    padding:
        16px
        max(var(--dashboard-page-gutter, 20px), env(safe-area-inset-right))
        calc(16px + env(safe-area-inset-bottom))
        max(var(--dashboard-page-gutter, 20px), env(safe-area-inset-left));
}

.ct-dashboard-footer__brand-group {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 12px;
}

.ct-dashboard-footer__brand {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    text-decoration: none;
}

.ct-dashboard-footer__brand img {
    display: block;
    width: auto;
    height: 32px;
    max-width: 148px;
    object-fit: contain;
}

.ct-dashboard-footer__brand-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
    line-height: 1.25;
}

.ct-dashboard-footer__brand-copy strong {
    overflow: hidden;
    color: #082653;
    font-size: .82rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ct-dashboard-footer__brand-copy span {
    color: #70839d;
    font-size: .72rem;
    font-weight: 600;
}

.ct-dashboard-footer__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 10px;
    min-width: 0;
}

.ct-dashboard-footer__links a,
.ct-dashboard-footer__status {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    gap: 7px;
    padding: 7px 10px;
    border-radius: 10px;
    color: #536a88;
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.ct-dashboard-footer__links a {
    transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.ct-dashboard-footer__links a:hover,
.ct-dashboard-footer__links a:focus-visible {
    background: rgba(23, 113, 202, .08);
    color: #075ea9;
    outline: none;
}

.ct-dashboard-footer__links a:focus-visible {
    box-shadow: 0 0 0 3px rgba(23, 113, 202, .16);
}

.ct-dashboard-footer__links i {
    font-size: .95rem;
}

.ct-dashboard-footer__status {
    background: rgba(32, 163, 95, .08);
    color: #147a48;
}

.ct-dashboard-footer__status-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #20a35f;
    box-shadow: 0 0 0 3px rgba(32, 163, 95, .12);
}

.ct-dashboard-footer__legal {
    justify-self: end;
    color: #71839b;
    font-size: .70rem;
    font-weight: 600;
    line-height: 1.45;
    text-align: right;
}

html[data-theme="dark"] .ct-dashboard-footer {
    border-top-color: rgba(164, 190, 224, .14);
    background: linear-gradient(180deg, rgba(12, 30, 54, .97), rgba(9, 24, 44, .99));
    color: #c4d1e2;
}

html[data-theme="dark"] .ct-dashboard-footer__brand-copy strong {
    color: #f5f8fc;
}

html[data-theme="dark"] .ct-dashboard-footer__brand-copy span,
html[data-theme="dark"] .ct-dashboard-footer__legal,
html[data-theme="dark"] .ct-dashboard-footer__links a {
    color: #aebed3;
}

html[data-theme="dark"] .ct-dashboard-footer__links a:hover,
html[data-theme="dark"] .ct-dashboard-footer__links a:focus-visible {
    background: rgba(91, 166, 238, .12);
    color: #dcecff;
}

html[data-theme="dark"] .ct-dashboard-footer__status {
    background: rgba(41, 190, 113, .12);
    color: #8ce2b4;
}

/* Compact dashboards use the actual visible browser viewport. The fixed footer
   follows the same compact gutter without introducing another sidebar offset. */
body.dashboard-compact-page.dashboard-force-compact .ct-dashboard-footer__frame {
    max-width: none;
    padding-right: max(var(--dashboard-compact-gutter, 12px), env(safe-area-inset-right));
    padding-left: max(var(--dashboard-compact-gutter, 12px), env(safe-area-inset-left));
}

/* This spacer is the same measured height as the fixed footer. It stays in normal
   document flow so the last card, form action, table row or page control can always
   scroll completely above the footer. */
.ct-system-footer-spacer {
    display: block;
    width: 100%;
    height: var(--ct-system-footer-height, 78px);
    min-height: var(--ct-system-footer-height, 78px);
    flex: 0 0 var(--ct-system-footer-height, 78px);
    pointer-events: none;
    visibility: hidden;
}

.ct-system-footer {
    position: fixed !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    clear: both;
    max-width: 100%;
    margin: 0 !important;
    overflow-x: clip;
}

/* Immersive virtual-room layout is exactly viewport-height. Shrink it by the
   measured footer height instead of letting the fixed footer cover meeting controls. */
body:has(.native-meeting) .ct-system-footer-spacer {
    display: none;
}

body:has(.native-meeting) .native-meeting {
    height: calc(100vh - var(--ct-system-footer-height, 78px));
    height: calc(100dvh - var(--ct-system-footer-height, 78px));
}

@media (max-width: 1199.98px) {
    .ct-dashboard-footer__frame {
        grid-template-columns: minmax(220px, .9fr) minmax(0, 1.35fr) auto;
        gap: 10px 14px;
        padding-top: 10px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }

    .ct-dashboard-footer__legal {
        font-size: .64rem;
    }
}

/* The user's compact browser viewport can be much smaller than the physical
   monitor. Keep a fixed footer useful without consuming a large part of 725x585. */
@media (max-width: 820px), (max-height: 650px) {
    .ct-dashboard-footer__frame {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 8px 12px;
        padding:
            7px
            max(10px, env(safe-area-inset-right))
            calc(7px + env(safe-area-inset-bottom))
            max(10px, env(safe-area-inset-left));
    }

    .ct-dashboard-footer__brand-group {
        gap: 7px;
    }

    .ct-dashboard-footer__brand {
        min-height: 34px;
    }

    .ct-dashboard-footer__brand img {
        height: 26px;
        max-width: 112px;
    }

    .ct-dashboard-footer__brand-copy {
        display: none;
    }

    .ct-dashboard-footer__links {
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: 3px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
    }

    .ct-dashboard-footer__links::-webkit-scrollbar {
        display: none;
    }

    .ct-dashboard-footer__links a,
    .ct-dashboard-footer__status {
        min-height: 34px;
        padding: 5px 7px;
        border-radius: 9px;
        font-size: .68rem;
    }

    .ct-dashboard-footer__legal {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .ct-dashboard-footer__frame {
        gap: 5px;
        padding-top: 6px;
        padding-bottom: calc(6px + env(safe-area-inset-bottom));
    }

    .ct-dashboard-footer__brand img {
        height: 24px;
        max-width: 96px;
    }

    .ct-dashboard-footer__links {
        gap: 2px;
    }

    .ct-dashboard-footer__links a,
    .ct-dashboard-footer__status {
        width: 34px;
        min-width: 34px;
        height: 34px;
        min-height: 34px;
        justify-content: center;
        padding: 0;
    }

    .ct-dashboard-footer__links a > span,
    .ct-dashboard-footer__status-label {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ct-dashboard-footer__links a {
        transition: none;
    }
}
