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

:root{
    --up-maroon:#7B1113;
    --up-gold:#C9A227;
    --up-green:#1D7A45;

    --bg-light:#F5F7F6;
    --border:#E5E7EB;
    --shadow:0 4px 12px rgba(0,0,0,.08);
    --shadow-hover:0 10px 20px rgba(0,0,0,.15);
}

*{
    box-sizing:border-box;
}

body{
    font-family: "Segoe UI", Arial, sans-serif;
}

/* =========================
   LAYOUT
========================= */

.responsive-container{
    width:90%;
    margin:auto;

    display:flex;
    gap:2rem;
    align-items:flex-start;
}

.left-box{
    flex:0 0 58%;
    padding:0 20px 20px 20px;
    /*background:var(--bg-light);*/
    margin:20px 0;
}

.right-box{
    flex:0 0 40%;

    position:sticky;
    top:20px;

    background:#fff;
    margin:0;
}

/* =========================
   LOGIN PANEL
========================= */

.login-panel{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.login-btn{
    display:flex;
    align-items:center;

    padding:22px;
    border-radius:16px;

    color:#fff;
    text-decoration:none;

    box-shadow:var(--shadow);
    transition:.25s;
}

.login-btn:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-hover);
}

.login-btn .icon{
    width:60px;
    height:60px;

    border-radius:50%;
    background:rgba(255,255,255,.2);

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

    font-size:24px;
}

.login-btn .text{
    flex:1;
    margin-left:18px;
}

.login-btn .text h3{
    margin:0;
    font-size:1.4rem;
}

.login-btn .text p{
    margin:4px 0 0;
    opacity:.9;
    font-size:.9rem;
}

.login-btn .arrow{
    font-size:1.4rem;
}

.student{
    background:linear-gradient(135deg,#7B1113,#B11226);
}

.faculty{
    background:linear-gradient(135deg,#C88A00,#E3A600);
}

.staff{
    background:linear-gradient(135deg,#0F5E2E,#1D7A45);
}

/* =========================
   SIDEBAR
========================= */

.right-box-header{
    padding:40px;
    background:var(--bg-light);
    font-weight:600;
}

.right-box-content{
    padding:20px;
}

.right-box-footer{
    padding:10px;
    text-align:center;
    background:#57290E;
    color:#fff;
    font-size:11px;
}

/* =========================
   FORM CONTROLS
========================= */

.textboxmaroon9B,
.textboxmaroon9BDisabled{
    padding:8px 12px;
    border:1px solid #CCC;
    border-radius:6px;
}

.loginButton{
    width:150px;
    height:36px;

    border:none;
    border-radius:8px;

    background:var(--up-maroon);
    color:#fff;

    font-weight:600;
    cursor:pointer;
}

.loginButton:hover{
    opacity:.9;
}

/* =========================
   MOBILE
========================= */

@media (max-width:980px){

    .responsive-container{
        flex-direction:column;
        width:95%;
    }

    .left-box,
    .right-box{
        width:100%;
    }

    .right-box{
        order:1;
        position:static;
        padding: 20px;
    }

    .left-box{
        order:2;
        margin: -40px 0 0 0;
    }

    .login-btn{
        padding:18px;
    }

    .login-btn .icon{
        width:50px;
        height:50px;
        font-size:20px;
    }

    .login-btn .text h3{
        font-size:1.1rem;
    }

    .login-btn .text p{
        font-size:.8rem;
    }
}

.login-btn{
    font-family:inherit;
}

.login-btn .text{
    text-align:left;
}

.events-table{
    width:100%;
    border-collapse:collapse;
    background:white;
}

.events-table th{
    background:#7B1113;
    color:white;
    text-align:left;
    padding:12px;
}

.events-table td{
    padding:12px;
    border-bottom:1px solid #e5e5e5;
}

.events-table tr:hover{
    background:#f8f8f8;
}