/* ==========================================================================
   1. CSS Reset (මේක CSS ෆයිල් එකේ ඉහළින්ම තිබිය යුතුයි)
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Roboto, Arial, sans-serif;
    
    /* Mobile වල click කරද්දි වැටෙන blue highlight එක සම්පූර්ණයෙන්ම නැති කරයි */
    -webkit-tap-highlight-color: transparent; 
    outline: none;
}

body {
    background-color: #0f0f0f; /* YouTube Dark Background */
}

/* Default: Desktop (පරිගණක) තිර වලදී bottom bar එක සම්පූර්ණයෙන්ම සඟවයි */
.bottom-nav {
    display: none; 
}


/* ==========================================================================
   2. Mobile Responsive Styles (768px හෝ ඊට අඩු තිර සඳහා)
   ========================================================================== */
@media only screen and (max-width: 768px) {
    
    /* 🔴 Layout Fix: බාර් එක නිසා වීඩියෝ කාඩ්ස් යට යන එක නවත්වන්න බොඩි එක යටින් ඉඩක් තබයි */
    body {
        padding-bottom: 65px !important; 
    }

    /* Bottom Nav Bar එක හැමදේටම උඩින් ස්ථාවරව තැබීම */
    .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50px; /* YouTube app layout size */
        background-color: #0f0f0f;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-top: 1px solid #272727; /* YouTube සිහින් border එක */
        z-index: 9999; /* 🔴 අනිත් හැම element එකකටම වඩා උඩින් බාර් එක තබයි */
    }

    /* Individual Tabs (ICT, Hacking, etc.) */
    .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #aaaaaa; /* Select නොවූ විට පෙනෙන අළු පැහැය */
        cursor: pointer;
        flex: 1;
        background: transparent;
    }

    /* Icon Sizes & Thickness */
    .nav-item .material-symbols-rounded {
        font-size: 24px;
        font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    }

    /* Text Sizes */
    .nav-item p {
        font-size: 10px;
        margin-top: 2px;
        font-weight: 400;
    }

    /* ⚪ Click කරලා Active වුණාම සිදුවන වෙනස්කම් (YouTube Style) */
    .nav-item.active {
        color: #ffffff; /* Icon සහ Text එක විතරක් පිරිසිදු සුදු පැහැ වේ */
    }
    
    .nav-item.active .material-symbols-rounded {
        font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; /* Icon එක ඇතුළතින් පාට වේ (Fill) */
    }

    /* මැද තියෙන (+) ලකුණ සහිත Button එක */
    .nav-item.add-btn {
        color: #ffffff; /* මේක හැමවිටම සුදු පැහැතියි */
    }
    
    .nav-item.add-btn .material-symbols-rounded {
        font-size: 36px;
        font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 36;
    }
}