:root {

        --dole-red: #dc2626;

        --dole-blue: #1e40af;

        --dole-dark-blue: #1e3a8a;

        --dole-pink: #fda4af;

        --glass: rgba(255, 255, 255, 0.95);

        --text-dark: #1e293b;

        --sidebar-width: 260px;

        --nav-height: 70px;

        --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    }



    * {

        box-sizing: border-box;

        -webkit-tap-highlight-color: transparent;

    }



    body, html {

        margin: 0;

        padding: 0;

        height: 100%;

        font-family: 'Inter', system-ui, -apple-system, sans-serif;

        color: var(--text-dark);

        background-color: #f1f5f9;

        overflow-x: hidden;

    }



    /* --- Animations --- */

    @keyframes slideInTop {

        from { opacity: 0; transform: translateY(-10px); }

        to { opacity: 1; transform: translateY(0); }

    }



    @keyframes fadeInScale {

        from { opacity: 0; transform: scale(0.98) translateY(10px); }

        to { opacity: 1; transform: scale(1) translateY(0); }

    }



    /* --- Layout Structure --- */

    .main-wrapper {

        display: flex;

        min-height: 100vh;

    }



    .sidebar {

        width: var(--sidebar-width);

        background: linear-gradient(180deg, var(--dole-blue) 0%, var(--dole-dark-blue) 100%);

        color: white;

        padding: 30px 20px;

        display: flex;

        flex-direction: column;

        position: sticky;

        top: 0;

        height: 100vh;

        z-index: 1000;

        box-shadow: 4px 0 15px rgba(0,0,0,0.05);

    }



    .sidebar-logo {

        font-weight: 900;

        font-size: 22px;

        letter-spacing: -1px;

        margin-bottom: 40px;

        display: flex;

        align-items: center;

        gap: 10px;

    }



    .nav-links {

        list-style: none;

        padding: 0;

        margin: 0;

        display: flex;

        flex-direction: column;

        gap: 8px;

        height: 100%;

    }



    .nav-link {

        display: flex;

        align-items: center;

        gap: 12px;

        padding: 14px 18px;

        color: rgba(255, 255, 255, 0.6);

        text-decoration: none;

        border-radius: 12px;

        font-weight: 600;

        font-size: 14px;

        transition: var(--transition);

    }



    .nav-link ion-icon { font-size: 20px; transition: var(--transition); }

    .nav-link:hover { background: rgba(255, 255, 255, 0.08); color: white; transform: translateX(5px); }

    .nav-link.active { background: white; color: var(--dole-blue) !important; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }

    .nav-link.active ion-icon { color: var(--dole-blue); transform: scale(1.1); }



    .content-area {

        flex: 1;

        padding: 30px;

        animation: fadeInScale 0.5s ease-out;

    }



    /* --- DROPDOWN SYSTEM --- */

    .user-profile-wrapper {

        position: relative;

    }



    .avatar-trigger {

        width: 38px;

        height: 38px;

        background: var(--dole-dark-blue);

        color: white;

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

        font-weight: 800;

        font-size: 14px;

        cursor: pointer;

        border: 2px solid transparent;

        transition: var(--transition);

        box-shadow: 0 4px 6px rgba(0,0,0,0.1);

    }



    .avatar-trigger:active { transform: scale(0.9); border-color: var(--dole-pink); }



    .profile-dropdown {

        position: absolute;

        right: 0;

        top: 50px;

        width: 200px;

        background: white;

        border-radius: 15px;

        border: 1px solid #e2e8f0;

        box-shadow: 0 15px 30px rgba(0,0,0,0.15);

        display: none;

        flex-direction: column;

        overflow: hidden;

        z-index: 2000;

    }



    .profile-dropdown.show {

        display: flex;

        animation: slideInTop 0.2s ease-out;

    }



    .dropdown-header {

        padding: 15px;

        background: #f8fafc;

        border-bottom: 1px solid #f1f5f9;

    }



    .dropdown-header span {

        display: block;

        font-size: 10px;

        color: #94a3b8;

        font-weight: 800;

        text-transform: uppercase;

        letter-spacing: 0.5px;

    }



    .dropdown-item {

        padding: 12px 15px;

        text-decoration: none;

        color: #475569;

        font-size: 14px;

        font-weight: 600;

        display: flex;

        align-items: center;

        gap: 12px;

        transition: all 0.2s;

    }



    .dropdown-item ion-icon { font-size: 18px; }

    .dropdown-item:hover { background: #fff1f2; color: var(--dole-red); }



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

    @media (max-width: 480px) {

        .sidebar {

            position: fixed;

            bottom: 0;

            top: auto;

            width: 100%;

            height: var(--nav-height);

            flex-direction: row;

            padding: 0 10px;

            background: var(--glass);

            backdrop-filter: blur(15px);

            border-top: 1px solid rgba(0,0,0,0.05);

            box-shadow: 0 -10px 25px rgba(0,0,0,0.05);

        }



        .sidebar-logo, .nav-item[style*="margin-top: auto"] { display: none; }



        .nav-links {

            flex-direction: row;

            justify-content: space-around;

            align-items: center;

            width: 100%;

            gap: 0;

        }



        .nav-link {

            flex-direction: column;

            gap: 4px;

            padding: 8px 0;

            font-size: 10px;

            border-radius: 0;

            flex: 1;

            text-align: center;

            color: #94a3b8;

        }



        .nav-link.active {

            background: transparent;

            color: var(--dole-blue) !important;

            border-top: 3px solid var(--dole-blue);

            box-shadow: none;

            transform: translateY(-2px);

        }



        .content-area { padding: 20px 15px 100px 15px; }

        .top-header h1 { font-size: 18px !important; }

    }