/* ==========================================
NEXUS SMART CLASS - CHAMELEON CSS (THE SKIN)
File: assets/css/responsive.css
========================================== 
Ye CSS seedha PHP ke banaye hue body classes ko padhti hai aur 
device ke hisaab se UI badal deti hai.
*/

/* ==========================================
   1. DIGITAL BOARD OPTIMIZATION (Tere 75-inch Epson ke liye)
========================================== */
body.device-board {
    /* Class ke peeche baithe bacche ko bhi clearly dikhe */
    font-size: 1.4rem; 
}

body.device-board .nexus-sidebar {
    width: 350px; /* Sidebar chouda kar diya */
}

body.device-board .nexus-topbar {
    height: 90px; /* Upar ka bar bada kar diya */
}

body.device-board button, 
body.device-board .role-box,
body.device-board input {
    /* Teacher ko screen par touch karne mein aasaani ho */
    padding: 20px 25px;
    font-size: 1.5rem;
    border-radius: 15px;
}

body.device-board .nexus-content {
    padding: 50px;
}

/* ==========================================
   2. MOBILE OPTIMIZATION (Phones ke liye)
========================================== */
body.device-mobile .nexus-wrapper {
    flex-direction: column;
}

body.device-mobile .nexus-sidebar {
    /* Mobile mein sidebar ko "Bottom Navigation" (Niche patti) bana diya */
    width: 100%;
    height: 70px;
    flex-direction: row;
    position: fixed;
    bottom: 0;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.05);
    z-index: 1000;
}

body.device-mobile .nexus-main {
    /* Niche menu ke liye jagah chhod di taaki content chhupe nahi */
    padding-bottom: 70px; 
}

body.device-mobile .nexus-topbar {
    height: 60px;
    padding: 0 15px;
}

body.device-mobile .nexus-content {
    padding: 15px;
}

/* ==========================================
   3. TABLET OPTIMIZATION (iPad ya Android Tabs)
========================================== */
body.device-tablet .nexus-sidebar {
    width: 80px; /* Sirf icons dikhenge, text chup jayega */
}

body.device-tablet .nexus-content {
    padding: 20px;
}

/* ==========================================
   4. TOUCH vs MOUSE SMART LOGIC
========================================== */

/* Agar Mouse hai (no-touch), tabhi hover animation chalega */
body.no-touch button:hover,
body.no-touch .role-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(30, 91, 223, 0.2);
    transition: all 0.3s ease;
}

/* Agar Ungli se chal raha hai (is-touch), toh hover disable, sirf dabane (active) par effect aayega */
body.is-touch button:active,
body.is-touch .role-box:active {
    transform: scale(0.96); /* Dabane par halka sa andar jayega */
    transition: all 0.1s;
}

/* Scrollbar ko touch screen par hide kar dete hain, native accha lagta hai */
body.is-touch ::-webkit-scrollbar {
    width: 5px;
}