/* =========================================================
   SESSION WARNING MODAL
========================================================= */

#sessionWarningModal{
    z-index:12000;
    display:none;
    position:fixed;
    inset:0;

    justify-content:center;
    align-items:center;

    padding:20px;

    background:rgba(0,0,0,.55);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
}

#sessionWarningModal.show{
    display:flex;
}

#sessionWarningModal .modal-content{

    width:100%;
    max-width:420px;

    padding:24px;

    border:none;
    border-radius:14px;

    text-align:center;

    background:#fff;

    box-shadow:
        0 18px 45px rgba(0,0,0,.28);
}

#sessionWarningText{

    margin:0;

    font-size:18px;

    font-weight:600;

    color:#222;
}

#modalSessionTimer{

    margin:20px 0;

    padding:12px;

    border-radius:10px;

    background:#fff4d6;

    border:1px solid #ffd86b;

    color:#8b5a00;

    font-size:24px;

    font-weight:700;

    letter-spacing:1px;
}

#sessionWarningModal button{

    width:100%;

    margin-top:10px;

    padding:12px;

    border:none;

    border-radius:8px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    transition:.2s;
}

#sessionWarningModal .btn-primary{

    background:#198754;

    color:#fff;
}

#sessionWarningModal .btn-primary:hover{

    background:#157347;
}

#sessionWarningModal .btn-secondary{

    background:#dc3545;

    color:#fff;
}

#sessionWarningModal .btn-secondary:hover{

    background:#bb2d3b;
}

/* =========================================================
   GLOBAL SESSION LAYOUT
========================================================= */

:root{

    --app-header-height:60px;
    --app-input-height:56px;
    --app-status-height:36px;

}

/* ---------------------------------------------------------
   Bottom Status Bar
--------------------------------------------------------- */

#bottomStatusBar{

    position:fixed;

    left:0;
    right:0;
    bottom:0;

    height:var(--app-status-height);

    display:flex;

    justify-content:space-evenly;
    align-items:center;

    padding:0 12px;

    background:#212529;

    color:#fff;

    border-top:1px solid rgba(255,255,255,.08);

    box-shadow:0 -3px 12px rgba(0,0,0,.25);

    z-index:11000;

}

.status-section{

    display:flex;

    align-items:center;

    gap:6px;

    white-space:nowrap;

    font-size:13px;

    font-weight:600;

}

/* ---------------------------------------------------------
   Session Timer
--------------------------------------------------------- */

#fixedSessionTimer{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:60px;

    font-weight:700;

    color:#fff;

}

#fixedSessionTimer.warning{

    color:#ffc107;

    animation:sessionPulse 1s infinite;

}

#fixedSessionTimer.expired{

    color:#ff6b6b;

}

@keyframes sessionPulse{

    0%{transform:scale(1);}
    50%{transform:scale(1.08);}
    100%{transform:scale(1);}

}

/* ---------------------------------------------------------
   Chat Layout
--------------------------------------------------------- */

.chat-input-container{

    position:fixed;

    left:0;

    right:0;

    bottom:var(--app-status-height);

    height:var(--app-input-height);

    background:var(--bg-color);

    border-top:1px solid var(--bubble-border);

    z-index:1000;

}


#chatMessages{

    height:calc(
        100vh
        - var(--app-header-height)
        - var(--app-input-height)
        - var(--app-status-height)
    );
    
    overflow-y:auto;
    
    padding:5px;
    
    box-sizing:border-box;

}

#userList{

    height:calc(
        100vh
        - var(--app-header-height)
        - var(--app-input-height)
        - var(--app-status-height)
    );

    overflow-y:auto;
    
    padding:5px;
    
    box-sizing:border-box;

}

/* ---------------------------------------------------------
   Floating Controls
--------------------------------------------------------- */

#bottomMenu{

    bottom:0;

}

.submenu{

    bottom:calc(
        var(--app-status-height)
        + 10px
    );

}

#scrollToLatestBtn{

    top:calc(
        var(--app-header-height)
        + 5px
    );

}

#scrollToTopBtn{

    bottom:calc(
        var(--app-status-height)
        + var(--app-input-height)
        + 5px
    );

}

#scrollToLatestBtn,
#scrollToTopBtn {
    position: fixed;
    right: 0;
    
    width: 24px;
    height: 28px;

    border: none;
    border-radius: 40%;

    background: #0d6efd;
    color: #fff;

    font-size: 18px;
    font-weight: bold;

    cursor: pointer;

    display: none;

    z-index: 99999;

    box-shadow: 0 4px 12px rgba(0,0,0,.25);

    transition:
        opacity .25s,
        transform .25s,
        background .2s;
}

#scrollToTopBtn:hover {
    background: #0b5ed7;
    transform: translateY(+10px);
}

#scrollToTopBtn.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width:600px){

    #scrollToTopBtn{
        right:0;
        width:24px;
        height:28px;
        font-size:18px;
    }
    
    #scrollToTopBtn:hover {
     background: #0b5ed7;
     transform: translateY(+10px);
    }
}

/* ---------------------------------------------------------
   Mobile
--------------------------------------------------------- */

@media(max-width:600px){

    :root{

        --app-header-height:60px;
        --app-input-height:52px;
        --app-status-height:32px;

    }

    #bottomStatusBar{

        padding:0 8px;

    }

    .status-section{

        gap:4px;

        font-size:11px;

    }

    #sessionWarningModal .modal-content{

        max-width:95vw;

        padding:18px;

    }

}

#sessionLoader{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(2px);
    z-index:999999;
}

#sessionLoader .loader-box{
    text-align:center;
    padding:24px 32px;
    background:#fff;
    border-radius:12px;
    box-shadow:0 8px 30px rgba(0,0,0,.15);
    min-width:260px;
}

#sessionLoader .loader-spinner{
    width:48px;
    height:48px;
    margin:0 auto 16px;
    border:4px solid #e5e5e5;
    border-top-color:#0d6efd;
    border-radius:50%;
    animation:loaderSpin .8s linear infinite;
}

#sessionLoader .loader-text{
    font-size:15px;
    font-weight:500;
    color:#333;
}

.loader-text {
    white-space: pre-line;
}

@keyframes loaderSpin{
    to{
        transform:rotate(360deg);
    }
}

/* =========================================================
   GLOBAL LOADER
========================================================= */

#globalLoader{
    position:fixed;
    inset:0;

    display:none;
    justify-content:center;
    align-items:center;

    background:rgba(255,255,255,.85);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);

    z-index:999999;
}

#globalLoader.show{
    display:flex;
}

#globalLoader .loader-box{
    min-width:260px;

    padding:24px 32px;

    text-align:center;

    background:#fff;

    border-radius:12px;

    box-shadow:0 8px 30px rgba(0,0,0,.15);
}

#globalLoader .spinner{
    width:48px;
    height:48px;

    margin:0 auto 16px;

    border:4px solid #e5e5e5;
    border-top-color:#0d6efd;
    border-radius:50%;

    animation:globalLoaderSpin .8s linear infinite;
}

#globalLoader .loader-message{
    font-size:15px;
    font-weight:500;
    color:#333;
    white-space:pre-line;
}

@keyframes globalLoaderSpin{
    to{
        transform:rotate(360deg);
    }
}

@media (max-width:600px){

    #globalLoader .loader-box{
        min-width:220px;
        width:90vw;

        padding:20px 24px;
    }

    #globalLoader .spinner{
        width:42px;
        height:42px;
    }

}

/* =========================================================
   RESOURCE ATTENDANCE — REAL TOGGLE SWITCH
========================================================= */

.resource-attendance-switch {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 5px 10px 5px 6px;

    border: 1px solid #d1d5db;
    border-radius: 999px;

    background: #f3f4f6;
    color: #374151;

    cursor: pointer;

    font: inherit;
    font-size: 13px;
    font-weight: 600;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        opacity 0.2s ease;

    user-select: none;
}

.resource-attendance-switch:hover {
    border-color: #9ca3af;
}

.resource-attendance-switch:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.resource-attendance-switch:disabled {
    cursor: wait;
    opacity: 0.65;
}


/* ---------------------------------------------------------
   SWITCH TRACK
--------------------------------------------------------- */

.attendance-switch-track {
    position: relative;

    width: 38px;
    height: 22px;

    flex: 0 0 38px;

    border-radius: 999px;

    background: #9ca3af;

    transition:
        background 0.2s ease;
}


/* ---------------------------------------------------------
   SWITCH THUMB
--------------------------------------------------------- */

.attendance-switch-thumb {
    position: absolute;

    top: 3px;
    left: 3px;

    width: 16px;
    height: 16px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.25);

    transition:
        transform 0.2s ease;
}


/* ---------------------------------------------------------
   OFFLINE
--------------------------------------------------------- */

.resource-attendance-switch.offline {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #4b5563;
}

.resource-attendance-switch.offline
.attendance-switch-track {
    background: #9ca3af;
}

.resource-attendance-switch.offline
.attendance-switch-thumb {
    transform: translateX(0);
}


/* ---------------------------------------------------------
   ONLINE
--------------------------------------------------------- */

.resource-attendance-switch.online {
    background: #ecfdf5;
    border-color: #86efac;
    color: #15803d;
}

.resource-attendance-switch.online
.attendance-switch-track {
    background: #22c55e;
}

.resource-attendance-switch.online
.attendance-switch-thumb {
    transform: translateX(16px);
}


/* ---------------------------------------------------------
   LABEL
--------------------------------------------------------- */

.attendance-switch-label {
    min-width: 48px;
    text-align: left;
    line-height: 1;
}