/*
Theme Name: T&T Privae High School
Theme URI: https://example.com
Description: Child Theme for Astra
Author: Pyae Phyo Thaw
Version: 1.0
Template: astra
Text Domain: ppt-child
*/
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
#primary {
    margin: 0;
}

html,
body {
    height: 100vh;
    overflow: hidden; /* Prevents the body from scrolling up or down */
}

body{
    font-family:'Inter',sans-serif;
    background:#eef2f7;
    color:#111827;
}
a {
    text-decoration: none;
}

/* ===================================
   LAYOUT
=================================== */
.dashboard-layout {
    display: flex;
    height: 100vh;   
    overflow: hidden;
}

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

.mobile-menu-btn{
    display:none;
}

.mobile-close-btn{
    display:none;
}

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

.sidebar{
    width:300px;
    height: 100vh;          /* 1. Locks the sidebar exactly to the screen height */
    position: sticky;       /* 2. Pins the sidebar to the viewport */
    top: 0;                 /* 3. Holds it safely at the very top edge */
    background:#2f63e0;
    color:#fff;
    display:flex;
    flex-direction:column;
    transition:all .3s ease;
    overflow-y: auto;       /* 4. Keeps the sidebar items scrollable if the screen is tiny */
    /*width:300px;*/
    /*min-height:100vh;*/
    /*background:#2f63e0;*/
    /*color:#fff;*/
    /*display:flex;*/
    /*flex-direction:column;*/
    /*transition:all .3s ease;*/
    /*overflow:hidden;*/
    /*position:relative;*/
}

.sidebar.collapsed{
    width:70px;
}

/* ===================================
   HEADER
=================================== */

.sidebar-header{
    display:flex;
    align-items:center;
    gap:12px;
    padding:24px 20px;
}

.sidebar-header img{
    width:42px;
    height:42px;
    border-radius:50%;
    object-fit:cover;
    flex-shrink:0;
}

.user-info h4{
    font-size:20px;
    font-weight:600;
    margin: 0;
}

.user-info span{
    font-size:13px;
    opacity:.8;
}

/* ===================================
   MENU LABEL
=================================== */

.menu-label{
    padding:0 20px;
    margin-bottom:10px;
    font-size:11px;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;
    opacity:.7;
}

/* ===================================
   MENU
=================================== */

.sidebar-menu {
    padding: 0 10px;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    color: rgba(255, 255, 255, 0.75); /* Muted white so the hover effect actually "pops" */
    text-decoration: none;
    padding: 14px;
    border-radius: 12px;
    margin-bottom: 8px;
    /* Smoother transition explicitly targeting background and color */
    transition: background-color 0.3s ease, color 0.3s ease; 
}

/* Hover state */
.menu-item:hover {
    background: rgba(255, 255, 255, 0.10); /* Soft white background with 10% opacity */
    color: #ffffff !important; /* Forces text to pure, bright white */
}

/* Active/Selected state */
.menu-item.active {
    background: rgba(255, 255, 255, 0.18); /* Slightly brighter background for active item */
    color: #ffffff;
}

.menu-item i {
    min-width: 20px;
    text-align: center;
    font-size: 18px;
    color: inherit; /* Forces the icon to match the text color transitions perfectly */
}

.badge{
    margin-left:auto;
    background:rgba(255,255,255,.15);
    padding:3px 10px;
    border-radius:20px;
    font-size:12px;
}

/* ===================================
   FOOTER
=================================== */

.sidebar-footer{
    margin-top:auto;
    padding: 25px 15px 50px 15px;
    border-top:1px solid rgba(255,255,255,.15);
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.footer-left{
    display:flex;
    align-items:center;
    gap:12px;
    cursor:pointer;
}

.logo-box{
    width:40px;
    height:40px;
    color:#2f63e0;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.footer-info strong{
    display:block;
    font-size:14px;
}

.footer-info small{
    display:block;
    margin-top:2px;
    font-size:12px;
    opacity:.7;
}

.collapse-btn{
    background:none;
    border:none;
    color:#fff;
    cursor:pointer;
    font-size:16px;
}

/* ===================================
   COLLAPSED
=================================== */

.sidebar.collapsed .user-info,
.sidebar.collapsed .menu-label,
.sidebar.collapsed .text,
.sidebar.collapsed .badge,
.sidebar.collapsed .footer-info{
    display:none;
}

.sidebar.collapsed .sidebar-header{
    justify-content:center;
}

.sidebar.collapsed .menu-item{
    justify-content:center;
}

.sidebar.collapsed .sidebar-footer{
    justify-content:center;
}

.sidebar.collapsed .footer-left{
    width:100%;
    /*justify-content:center;*/
}

.sidebar.collapsed .collapse-btn{
    display:none;
}

/* ===================================
   CONTENT
=================================== */

.content {
    flex: 1;
    height: 100vh;
    overflow-y: auto;
    padding: 20px 32px;
}

@media (max-width: 767px) {
    .content {
        padding: 60px 32px 0 32px;
    }
}

.content h1{
    font-size:48px;
    margin-bottom:8px;
}

.content > p{
    color:#667085;
}

/* ===================================
   CARDS
=================================== */

.cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:30px;
}

.card{
    background:#fff;
    border-radius:16px;
    padding:24px;
    border:1px solid #e5e7eb;
}

.card span{
    color:#667085;
}

.card h2{
    margin-top:10px;
    font-size:40px;
}

/* ===================================
   ACTIVITY CARD
=================================== */

.activity-card{
    margin-top:25px;
    background:#fff;
    border-radius:16px;
    padding:25px;
    border:1px solid #e5e7eb;
}

.activity-card h2{
    margin-bottom:10px;
}

.activity-card p{
    color:#667085;
}

.activity-card ul{
    margin-top:20px;
    padding-left:20px;
}

.activity-card li{
    margin-bottom:12px;
}

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

@media (max-width:768px){

    .sidebar{
        position:fixed;
        top:0;
        left:-100%;
        width:100%;
        height:100vh;
        z-index:9999;
        transition:left .3s ease;
        overflow-y:auto;
    }

    .sidebar.mobile-open{
        left:0;
    }

    .sidebar.collapsed{
        width:100%;
    }

    /* Header */

    .sidebar-header{
        flex-direction:column;
        justify-content:center;
        text-align:center;
        padding:80px 20px 30px;
        gap:12px;
    }

    .sidebar-header img{
        width:80px;
        height:80px;
    }

    .user-info{
        display:block !important;
    }

    .user-info h4{
        font-size:28px;
    }

    .user-info span{
        font-size:16px;
    }

    /* Menu */

    .menu-label{
        display:block !important;
        padding:0 25px;
        margin-bottom:15px;
    }

    .sidebar-menu{
        padding:0 15px;
    }

    .menu-item{
        height:60px;
        font-size:20px;
        margin-bottom:10px;
    }

    .text{
        display:block !important;
    }

    .badge{
        display:flex !important;
        margin-left:auto;
    }

    /* Footer */

    .footer-info{
        display:block !important;
    }

    .sidebar-footer{
        margin-top:50px;
    }

    /* Desktop collapse remove */

    .collapse-btn{
        display:none !important;
    }

    /* Mobile close */

    .mobile-close-btn{
        display:flex;
        position:absolute;
        top:15px;
        right:15px;
        width:48px;
        height:48px;
        border:none;
        border-radius:12px;
        background:rgba(255,255,255,.15);
        color:#fff;
        justify-content:center;
        align-items:center;
        font-size:22px;
    }

    /* Hamburger */

    .mobile-menu-btn{
        display:flex;
        position:fixed;
        top:15px;
        right:15px;
        width:48px;
        height:48px;
        border:none;
        border-radius:12px;
        background:#2f63e0;
        color:#fff;
        justify-content:center;
        align-items:center;
        font-size:22px;
        z-index:10000;
    }

    /* Content */




    .cards{
        grid-template-columns:1fr;
    }
}

.sidebar-menu p{
    margin:0;
}

.sidebar-menu br{
    display:none;
}

.ast-single-post .entry-content a,
.ast-comment-content a:not(.ast-comment-edit-reply-wrap a) {
    text-decoration: none !important;
}

/* Hover style */
.ast-single-post .entry-content a:hover,
.ast-comment-content a:hover:not(.ast-comment-edit-reply-wrap a) {
    text-decoration: none !important;
    opacity: 0.8; /* optional nice effect */
}