/* ========================= GLOBAL RESET + MODERN UI ========================= */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', 'Lato', 'Segoe UI', sans-serif; background: linear-gradient(145deg, #e9eef5 0%, #f5f7fb 100%); color: #1e293b; line-height: 1.5; min-height: 100vh; } /* smooth transitions */ * { transition: all 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1); } /* ========================= GLOBAL STACKING FIX (IMPORTANT) ========================= */ /* MAIN CONTENT - LOWEST */ .center-col { position: relative; z-index: 1; } /* SIDEBAR - MIDDLE LAYER */ .left-col { width: 20%; min-width: 160px; max-width: 260px; background: rgba(255, 255, 255, 0.65); border-radius: 28px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(255, 255, 255, 0.6); padding: 20px 12px; border: 1px solid rgba(255, 255, 255, 0.8); position: relative; z-index: 10; overflow: visible !important; transform: none !important; } /* ========================= LAYOUT CONTAINER ========================= */ .layout-container { position: relative; z-index: 1; display: flex; gap: 24px; padding: 24px 24px 24px 0; max-width: 1400px; margin: 0 auto; } /* CONTENT CARD */ .center-col { flex: 1; background: rgba(255, 255, 255, 0.9); border-radius: 28px; padding: 28px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05); border: 1px solid rgba(255, 255, 255, 0.6); } .center-col:hover { box-shadow: 0 20px 35px rgba(0, 0, 0, 0.08); } /* ========================= SIDEBAR MENU ========================= */ .site-menu { display: flex; flex-direction: column; gap: 8px; } .site-menu li { list-style: none; position: relative; } /* LINKS */ .site-menu a { display: block; padding: 12px 16px; border-radius: 20px; background: rgba(255, 255, 255, 0.3); color: #1d2126; text-decoration: none; font-weight: 600; border: 1px solid transparent; } .site-menu a:hover { background: rgba(62, 122, 221, 0.85); color: white; transform: translateX(6px) scale(1.02); box-shadow: 0 6px 14px rgba(62, 122, 221, 0.3); } /* ========================= SUBMENU FIX (IMPORTANT) ========================= */ .site-menu li.sub-parent { position: relative; } /* SUBMENU MUST FLOAT ABOVE SIDEBAR */ .sub-menu { position: absolute; z-index: 500 !important; background: rgba(255, 255, 255, 0.95); border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.15); padding: 8px 0; } /* ========================= USER PANEL - TOPMOST LAYER FIX ========================= */ #user_panel_widget { position: relative; z-index: 999999 !important; } #user_panel_widget .member-panel { position: relative; z-index: 999999 !important; } /* dropdown */ #user_panel_widget .panel-user-info {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;

    z-index: 1000000 !important;

    background: #fff !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.25) !important;
    border-radius: 16px !important;

    width: 280px !important;   /* prevents full screen spread */
    max-width: 90vw !important;
}
 /* ========================= HEADER IMAGE ========================= */ #header_cell img { width: 100%; border-radius: 24px; box-shadow: 0 12px 25px -8px rgba(0, 0, 0, 0.2); } #header_cell img:hover { transform: scale(1.01); } /* ========================= BUTTONS ========================= */ .ce-button { border-radius: 40px !important; padding: 12px 24px !important; font-weight: 700; background: #a15b4c; /* background: linear-gradient(135deg, #3E7ADD 0%, #2b5bb5 100%); */ color: white; border: none; cursor: pointer; } .ce-button:hover { transform: translateY(-3px) scale(1.02); } /* ========================= FORM FIELDS ========================= */ input, select, textarea { width: 100%; padding: 14px 16px; border-radius: 24px; border: 1px solid rgba(0, 0, 0, 0.1); background: rgba(255, 255, 255, 0.7); } input:focus, select:focus, textarea:focus { border-color: #3E7ADD; box-shadow: 0 0 0 4px rgba(62, 122, 221, 0.2); background: white; } ========================= MOBILE MENU BUTTON ========================= */ .menutoggle { display: none !important; position: fixed; top: 16px; left: 16px; z-index: 2000; background: #000 !important; color: white !important; width: 48px; height: 48px; border-radius: 30px !important; } /* ========================= RESPONSIVE ========================= */ @media (max-width: 768px) { .layout-container { flex-direction: column; margin-top: 70px; } .left-col { width: 100% !important; z-index: 100; } .menutoggle { display: flex !important; } .site-menu { flex-direction: row; flex-wrap: wrap; } } /* ========================= BOTTOM IMAGE ========================= */ .bottom-container img { width: 100%; border-radius: 20px; } #page_content h1 { color: #a15b4c !important; }



.menutoggle {
    background: #000 !important;
    color: #fff !important;
    transition: background 0.2s ease;
}

.menutoggle:hover {
    background: #222 !important;
}