/* Combined CSS from dashboard.html */
:root {
            --bg-color: #F0F4FA;
            --white: #FFFFFF;
            --primary-blue: #5F8DFF;
            --text-dark: #1F2937;
            --text-gray: #9CA3AF;
            --accent-green: #2EC4B6;
            --accent-pink: #FF6B81;
            --radius: 24px;
            --shadow: 0 4px 20px rgba(0,0,0,0.03);
            --shadow-float: 0 20px 40px rgba(0,0,0,0.08);
            
            /* Status Colors */
            --st-green-bg: #E6F7F5; --st-green-text: #00A991;
            --st-purple-bg: #F3E5F5; --st-purple-text: #9C27B0;
            --st-blue-bg: #E3F2FD; --st-blue-text: #1976D2;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
        
        body {
            background-color: var(--bg-color);
            color: var(--text-dark);
            height: 100vh;
            overflow: hidden;
        }

        /* UTILITY */
        .hidden { display: none !important; }
        .fade-in { animation: fadeIn 0.4s ease-in-out; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* LAYOUT */
        .container {
            display: grid; grid-template-columns: 200px 1fr 380px; height: 100vh;
            transition: grid-template-columns 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        }
        .container.expand-main { grid-template-columns: 200px 1fr 0px; }

        /* SIDEBAR */
        .sidebar {
            background: var(--white); display: flex; flex-direction: column; align-items: stretch;
            padding: 20px; border-right: 1px solid #eee; z-index: 50; position: relative; width: 180px;
        }
        .logo-icon {
            font-size: 28px; margin: 0 auto 40px; color: var(--text-dark);
            background: #eee; width: 48px; height: 48px; border-radius: 14px;
            display: flex; align-items: center; justify-content: center;
        }
        .desktop-nav-item {
            width: 100%; height: 48px; display: flex; align-items: center; justify-content: flex-start;
            border-radius: 16px; color: var(--text-gray); cursor: pointer;
            text-decoration: none; font-size: 20px; transition: 0.3s; margin: 0 0 12px; position: relative;
            gap: 12px; padding: 0 14px;
        }
        .desktop-nav-item .nav-text { font-size: 13px; font-weight: 600; color: var(--text-dark); }
        .desktop-nav-item:hover, .desktop-nav-item.active {
            background-color: var(--primary-blue); color: white;
            box-shadow: 0 8px 15px rgba(95, 141, 255, 0.3);
        }
        .desktop-nav-item:hover .nav-text, .desktop-nav-item.active .nav-text { color: white; }
        .sidebar-bottom { margin-top: auto; display: flex; flex-direction: column; }

        /* MAIN CONTENT */
        .main-content { padding: 30px 40px; overflow-y: auto; scrollbar-width: none; }
        .main-content::-webkit-scrollbar { display: none; }

        header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
        .welcome h1 { font-size: 28px; font-weight: 600; letter-spacing: -0.5px; }
        .welcome p { color: var(--text-gray); font-size: 14px; margin-top: 5px; }
        .header-actions { display: flex; align-items: center; gap: 12px; }
        .search-box {
            background: var(--white); padding: 12px 25px; border-radius: 30px;
            display: flex; align-items: center; width: 350px; box-shadow: var(--shadow);
        }
        .search-box input { border: none; outline: none; margin-left: 10px; width: 100%; font-size: 14px; }
        
        .btn-toggle-desktop, .btn-toggle-mobile {
            background: var(--white); border: 1px solid #e5e7eb; width: 44px; height: 44px; border-radius: 12px;
            box-shadow: var(--shadow); cursor: pointer; display: flex; align-items: center; justify-content: center;
            font-size: 18px; transition: 0.3s; color: var(--text-dark);
        }
        .btn-toggle-desktop:hover { background: var(--primary-blue); color: white; border-color: transparent; }
        .btn-toggle-mobile { display: none; }

        /* --- NOTIFICATION STYLES --- */
        .notification-menu {
            position: absolute; top: 80px; right: 90px;
            background: var(--white); width: 360px; border-radius: 20px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.15); z-index: 160;
            display: none; flex-direction: column; overflow: hidden;
            animation: fadeIn 0.2s ease-in-out; border: 1px solid #f0f0f0;
        }
        .notification-menu.active { display: flex; }
        .notif-header { padding: 15px 20px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center; background: #fff; }
        .notif-header h3 { font-size: 16px; font-weight: 600; margin: 0; }
        .notif-read-all { font-size: 12px; color: var(--primary-blue); cursor: pointer; font-weight: 500; }
        .notif-list { max-height: 400px; overflow-y: auto; }
        .notif-item { padding: 15px 20px; display: flex; gap: 15px; border-bottom: 1px solid #f9f9f9; cursor: pointer; transition: 0.2s; position: relative; }
        .notif-item:hover { background: #F9FAFB; }
        .notif-item.unread { background: #F0F7FF; }
        .notif-item.unread::after { content: ''; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; background: var(--accent-pink); border-radius: 50%; }
        .notif-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; }
        .ni-blue { background: #E3F2FD; color: var(--primary-blue); }
        .ni-green { background: #E8F5E9; color: var(--accent-green); }
        .ni-purple { background: #F3E5F5; color: #9C27B0; }
        .notif-content { flex-grow: 1; }
        .notif-title { font-size: 13px; font-weight: 600; margin-bottom: 2px; color: var(--text-dark); display: block; }
        .notif-desc { font-size: 12px; color: var(--text-gray); line-height: 1.4; display: block; }
        .notif-time { font-size: 11px; color: #aaa; margin-top: 5px; display: block; }
        .has-notif { position: relative; }
        .has-notif::after { content: ''; position: absolute; top: 12px; right: 12px; width: 8px; height: 8px; background: var(--accent-pink); border-radius: 50%; border: 2px solid white; }

        /* --- MANAGEMENT MENU (NEW) --- */
        .management-menu {
            position: absolute; left: 100px; top: 260px;
            background: var(--white); padding: 10px; border-radius: 16px;
            width: 200px; box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            z-index: 150; display: none; flex-direction: column; gap: 5px;
            animation: fadeIn 0.2s ease-in-out;
        }
        .management-menu.active { display: flex; }
        .management-menu::before {
            content: ''; position: absolute; left: -6px; top: 20px;
            width: 12px; height: 12px; background: var(--white);
            transform: rotate(45deg);
        }

        /* DASHBOARD GRID */
        .dashboard-grid { display: grid; grid-template-columns: 1.1fr 1.3fr; gap: 25px; }
        .col-left, .col-right { display: flex; flex-direction: column; gap: 25px; }
        .card { background: var(--white); padding: 25px; border-radius: var(--radius); box-shadow: var(--shadow); position: relative; }

        /* CALENDAR STYLES */
        .cal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
        .cal-nav { display: flex; align-items: center; gap: 20px; }
        .cal-nav h2 { font-size: 20px; font-weight: 600; min-width: 150px; text-align: center; }
        .cal-btn-icon { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-dark); }
        .cal-btn-text { background: none; border: none; font-size: 14px; cursor: pointer; color: var(--text-gray); font-weight: 500; }
        .cal-view-toggle { background: #F5F7FA; border-radius: 12px; padding: 4px; display: flex; }
        .cal-view-btn { padding: 6px 16px; border-radius: 10px; border: none; font-size: 12px; cursor: pointer; background: transparent; color: var(--text-gray); font-weight: 500; transition: 0.2s; }
        .cal-view-btn.active { background: var(--white); color: var(--primary-blue); box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
        .cal-grid-header { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
        .cal-day-name { text-align: right; padding-right: 10px; font-size: 12px; font-weight: 600; color: var(--text-gray); text-transform: uppercase; }
        .cal-grid-body { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(100px, 1fr); gap: 1px; background: #eee; border: 1px solid #eee; flex-grow: 1; }
        .cal-cell { background: var(--white); padding: 10px; position: relative; min-height: 100px; display: flex; flex-direction: column; gap: 5px; }
        .cal-date { text-align: right; font-size: 12px; color: var(--text-dark); font-weight: 500; margin-bottom: 5px; }
        .cal-cell.other-month .cal-date { color: #ddd; }
        .cal-event { font-size: 10px; padding: 4px 8px; border-radius: 4px; color: white; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; margin-bottom: 2px; }
        .ev-purple { background: #E1BEE7; color: #7B1FA2; border-left: 3px solid #7B1FA2; }
        .ev-pink { background: #FFCDD2; color: #C62828; border-left: 3px solid #C62828; }
        .ev-blue { background: #BBDEFB; color: #1565C0; border-left: 3px solid #1565C0; }
        .ev-orange { background: #FFE0B2; color: #EF6C00; border-left: 3px solid #EF6C00; }

        /* PROFILE & OTHER STYLES */
        .profile-card { background: linear-gradient(120deg, #8EB5FF 0%, #6895FF 100%); color: white; height: 280px; padding: 25px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }
        .profile-card::before { content: ''; position: absolute; top: -50px; right: -50px; width: 200px; height: 200px; background: rgba(255,255,255,0.1); border-radius: 50%; }
        .profile-top { display: flex; justify-content: space-between; align-items: flex-start; z-index: 2; }
        .profile-img-large { width: 110px; height: 130px; border-radius: 20px; object-fit: cover; box-shadow: 0 10px 20px rgba(0,0,0,0.15); }
        .profile-details { text-align: right; }
        .profile-details h2 { font-size: 22px; font-weight: 600; line-height: 1.2; }
        .circle-progress { width: 60px; height: 60px; background: conic-gradient(#A3D139 95%, rgba(255,255,255,0.2) 0deg); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-left: auto; position: relative; }
        .circle-progress::after { content: '95%'; position: absolute; width: 50px; height: 50px; background: #6895FF; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
        .profile-badge { background: rgba(255,255,255,0.95); color: var(--text-dark); padding: 12px 20px; border-radius: 15px; font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 10px; width: fit-content; cursor: pointer; z-index: 2; }
        .section-header { display: flex; justify-content: space-between; margin-bottom: 20px; align-items: center; }
        .team-row { display: flex; justify-content: space-around; text-align: center; }
        .team-av { width: 50px; height: 50px; border-radius: 50%; margin-bottom: 8px; border: 2px solid white; box-shadow: 0 5px 10px rgba(0,0,0,0.05); }
        .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        .stat-val { font-size: 28px; font-weight: 700; margin: 10px 0 5px 0; }
        .progress-bg { height: 8px; background: #eee; border-radius: 4px; overflow: hidden; }
        .progress-active { height: 100%; background: #A3D139; border-radius: 4px; }
        .chart-container { display: flex; justify-content: space-between; align-items: flex-end; height: 120px; padding: 0 10px; }
        .bar { width: 14px; background: #EFF3F9; border-radius: 10px; transition: 0.3s; }
        .bar.active { background: #A3D139; box-shadow: 0 0 15px rgba(163, 209, 57, 0.4); }
        
        /* PROJECTS */
        .projects-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; margin-top: 20px; }
        .project-card { background: var(--white); border-radius: 24px; padding: 30px 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); display: flex; flex-direction: column; align-items: flex-start; position: relative; transition: transform 0.3s; cursor: pointer; }
        .project-card:hover { transform: translateY(-5px); }
        .p-icon-wrap { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; box-shadow: 0 8px 15px rgba(0,0,0,0.1); }
        .p-icon-wrap i { font-size: 24px; color: white; }
        .p-title { font-size: 16px; font-weight: 600; color: var(--text-dark); margin-bottom: 5px; }
        .p-subtitle { font-size: 12px; color: var(--text-gray); display: flex; align-items: center; gap: 5px; margin-bottom: 15px; }
        .p-time { font-size: 12px; color: var(--text-gray); font-weight: 500; margin-bottom: 25px; display: block; }
        .divider { width: 100%; height: 1px; background: #f0f0f0; margin-bottom: 20px; }
        .p-bottom { width: 100%; display: flex; justify-content: space-between; align-items: center; }
        .p-team { display: flex; }
        .p-team img { width: 30px; height: 30px; border-radius: 50%; border: 2px solid white; margin-right: -10px; object-fit: cover; }
        .p-progress { font-size: 14px; font-weight: 600; color: var(--text-dark); }
        .bg-pink { background: var(--accent-pink); }
        .bg-green { background: var(--accent-green); }
        .bg-blue { background: var(--primary-blue); }
        .bg-orange { background: #FF9F43; }

        /* PROFILE VIEW */
        .profile-banner-card { width: 100%; height: 240px; background: linear-gradient(135deg, #FF9A9E 0%, #FECFEF 100%); border-radius: 24px; position: relative; z-index: 1; }
        .profile-info-card { background: var(--white); border-radius: 24px; padding: 30px 40px; margin-top: -100px; margin-left: 30px; margin-right: 30px; position: relative; z-index: 5; box-shadow: var(--shadow-float); }
        .profile-header-flex { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px; }
        .profile-user-left { display: flex; align-items: flex-end; gap: 25px; }
        .profile-avatar-float { width: 130px; height: 130px; border-radius: 50%; border: 6px solid var(--white); object-fit: cover; background: #ddd; margin-top: -65px; }
        .btn-edit-profile { padding: 10px 24px; border-radius: 30px; border: 1px solid #eee; background: white; font-weight: 600; font-size: 14px; cursor: pointer; transition: 0.3s; display: flex; gap: 8px; align-items: center; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
        .profile-content-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 40px; margin-top: 10px; }
        .info-label { font-size: 12px; color: var(--text-gray); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
        .info-row { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; font-size: 14px; color: var(--text-dark); }
        .skill-tag { display: inline-block; padding: 8px 16px; background: #F0F4FA; border-radius: 20px; font-size: 12px; font-weight: 600; color: #555; margin-right: 8px; margin-bottom: 10px; }

        /* RIGHT PANEL */
        .right-panel { background: var(--white); padding: 35px 30px; border-left: 1px solid #eee; overflow-y: auto; transition: opacity 0.3s; }
        .container.expand-main .right-panel { opacity: 0; pointer-events: none; padding: 0; overflow: hidden; }
        .filter-tabs { display: flex; gap: 10px; margin-top: 20px; margin-bottom: 20px; background: #F5F7FA; padding: 5px; border-radius: 20px; width: fit-content; }
        .tab { padding: 6px 16px; font-size: 12px; border-radius: 15px; cursor: pointer; color: var(--text-gray); transition: 0.3s; }
        .tab.active { background: var(--white); color: var(--text-dark); box-shadow: 0 2px 5px rgba(0,0,0,0.05); font-weight: 600; }
        .tab-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
        .tab-list { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
        .month-filter { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #F9FAFB; border: 1px solid #eee; border-radius: 12px; }
        .month-filter label { font-size: 12px; color: var(--text-gray); font-weight: 600; }
        .month-filter select { border: none; background: transparent; font-size: 13px; color: var(--text-dark); outline: none; min-width: 140px; }
        .task-list { margin-top: 15px; }
        .task-item { display: flex; gap: 15px; padding: 15px 0; border-bottom: 1px solid #f5f5f5; }
        .task-check { width: 22px; height: 22px; border: 2px solid #ddd; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
        .task-check.checked { background: var(--primary-blue); border-color: var(--primary-blue); color: white; }
        .task-body h4 { font-size: 14px; font-weight: 500; margin-bottom: 5px; }
        .task-meta { font-size: 11px; color: var(--text-gray); display: flex; align-items: center; gap: 8px; }

        /* MODAL */
        .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: 0.3s; }
        .modal-overlay.active { opacity: 1; visibility: visible; }
.modal-content { background: var(--white); width: 420px; max-width: 95%; border-radius: 24px; padding: 26px; box-shadow: 0 20px 50px rgba(0,0,0,0.2); transform: translateY(20px); transition: 0.3s; max-height: 90vh; overflow-y: auto; }
#taskEditModal .modal-content { width: 720px; max-width: 95%; }
        .modal-overlay.active .modal-content { transform: translateY(0); }
        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
        .modal-header h3 { font-size: 20px; font-weight: 700; }
        .btn-close-modal { background: none; border: none; font-size: 24px; cursor: pointer; color: var(--text-gray); }
        .form-group { margin-bottom: 20px; }
        .form-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-gray); margin-bottom: 8px; }
        .form-input { width: 100%; padding: 12px 15px; border-radius: 12px; border: 1px solid #eee; font-family: 'Poppins', sans-serif; font-size: 14px; background: #F9FAFB; outline: none; transition: 0.3s; }
        .form-textarea { resize: vertical; min-height: 80px; }
        .modal-footer { display: flex; justify-content: flex-end; gap: 15px; margin-top: 30px; }
        .btn-cancel { padding: 10px 20px; background: #f0f0f0; border-radius: 12px; border: none; font-weight: 600; cursor: pointer; }
        .btn-save { padding: 10px 25px; background: var(--primary-blue); color: white; border-radius: 12px; border: none; font-weight: 600; cursor: pointer; box-shadow: 0 5px 15px rgba(95, 141, 255, 0.3); }

        /* SETTINGS MENU */
        .settings-menu { position: absolute; left: 80px; bottom: 20px; background: var(--white); padding: 10px; border-radius: 16px; width: 200px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); z-index: 150; display: none; flex-direction: column; gap: 5px; animation: fadeIn 0.2s ease-in-out; }
        .settings-menu.active { display: flex; }
        .settings-item { padding: 10px 15px; border-radius: 10px; font-size: 14px; color: var(--text-dark); cursor: pointer; display: flex; align-items: center; gap: 10px; transition: 0.2s; }
        .settings-item:hover { background: #F0F4FA; color: var(--primary-blue); }
        .settings-item.danger:hover { color: #FF6B81; background: #FFF0F0; }

        /* PROJECT DETAIL */
        .project-detail-grid { display: grid; grid-template-columns: 280px 1fr; gap: 30px; }
        .pd-sidebar-card { background: var(--white); padding: 30px 20px; border-radius: 20px; box-shadow: var(--shadow); }
        .pd-status-badge { background: #E6F7F5; color: #00A991; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; display: inline-block; margin-bottom: 20px; }
        .pd-info-item { margin-bottom: 20px; }
        .pd-info-label { font-size: 11px; color: var(--text-gray); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; }
        .pd-info-val { font-size: 14px; font-weight: 500; color: var(--text-dark); }
        .pd-add-on-btn { background: #E3F2FD; color: #1976D2; font-size: 12px; padding: 8px 15px; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; margin-top: 10px; width: 100%; }
        .pd-pic-wrap { display: flex; align-items: center; gap: 10px; }
        .pd-pic-img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
        .pd-main-card { background: var(--white); padding: 30px; border-radius: 20px; box-shadow: var(--shadow); }
        .pd-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
        .pd-title h2 { font-size: 24px; margin-bottom: 5px; }
        .pd-title p { color: var(--text-gray); font-size: 14px; }
        .pd-header-actions { display: flex; gap: 10px; }
        .btn-action { padding: 8px 16px; border-radius: 10px; border: none; font-size: 12px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 5px; }
        .btn-blue { background: var(--primary-blue); color: white; }
        .btn-purple { background: #9C27B0; color: white; }
        .pd-tabs { display: flex; gap: 30px; border-bottom: 1px solid #eee; margin-bottom: 25px; }
        .pd-tab { padding-bottom: 10px; cursor: pointer; font-size: 14px; color: var(--text-gray); font-weight: 500; position: relative; transition: 0.3s; }
        .pd-tab.active { color: var(--primary-blue); }
        .pd-tab.active::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background: var(--primary-blue); }
        .activity-timeline { position: relative; padding-left: 20px; margin-top: 20px; }
        .activity-timeline::before { content: ''; position: absolute; left: 6px; top: 5px; bottom: 0; width: 2px; background: #eee; }
        .act-item { position: relative; margin-bottom: 30px; padding-left: 25px; }
        .act-dot { position: absolute; left: 0; top: 5px; width: 14px; height: 14px; background: var(--white); border: 3px solid var(--primary-blue); border-radius: 50%; z-index: 2; }
        .act-head { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
        .act-user { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
        .act-name { font-size: 13px; font-weight: 600; }
        .act-time { font-size: 11px; color: #999; }
        .act-desc { font-size: 13px; color: #555; background: #F9FAFB; padding: 10px 15px; border-radius: 10px; display: inline-block; margin-top: 5px; }
        .thread-input-wrap { display: flex; gap: 15px; margin-bottom: 30px; background: #F9FAFB; padding: 15px; border-radius: 15px; }
        .thread-user { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
        .thread-form { flex-grow: 1; }
        .thread-textarea { width: 100%; border: 1px solid #eee; border-radius: 12px; padding: 10px; font-family: 'Poppins'; font-size: 13px; resize: none; margin-bottom: 10px; outline: none; }
        .thread-textarea:focus { border-color: var(--primary-blue); background: white; }
        .thread-btn { background: var(--primary-blue); color: white; border: none; padding: 8px 20px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; float: right; }
        .thread-list { margin-top: 20px; }
        .thread-item { border-bottom: 1px solid #f0f0f0; padding-bottom: 20px; margin-bottom: 20px; }
        .th-header { display: flex; gap: 10px; margin-bottom: 10px; }
        .th-content { font-size: 14px; color: #333; margin-bottom: 10px; line-height: 1.6; padding-left: 50px; }
        .th-actions { padding-left: 50px; display: flex; gap: 20px; }
        .th-action-btn { color: var(--text-gray); font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 5px; }
        .th-action-btn:hover { color: var(--primary-blue); }
        .comment-section { margin-top: 15px; padding-left: 50px; background: #F9FAFB; padding: 15px; border-radius: 10px; display: none; }
        .comment-section.active { display: block; }
        .comment-item { display: flex; gap: 10px; margin-bottom: 15px; }
        .com-user { width: 24px; height: 24px; border-radius: 50%; }
        .com-bubble { background: white; padding: 8px 12px; border-radius: 0 10px 10px 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.02); font-size: 12px; flex-grow: 1; }
        .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { font-size: 12px; color: var(--text-gray); margin-bottom: 15px; }
        .dataTables_wrapper .dataTables_filter input { border: 1px solid #eee; border-radius: 8px; padding: 5px 10px; outline: none; margin-left: 5px; }
        table.dataTable.no-footer { border-bottom: 1px solid #eee !important; }
        table.dataTable thead th, table.dataTable thead td { border-bottom: 1px solid #eee !important; font-size: 12px; color: var(--text-gray); font-weight: 600; text-transform: uppercase; }
        table.dataTable tbody td { padding: 15px 10px !important; font-size: 13px; color: var(--text-dark); border-top: 1px solid #f9f9f9; vertical-align: middle; }
        .badge { padding: 4px 10px; border-radius: 6px; font-size: 10px; font-weight: 600; display: inline-block; margin-right: 5px; }
        .badge-green { background: var(--st-green-bg); color: var(--st-green-text); }
        .badge-purple { background: var(--st-purple-bg); color: var(--st-purple-text); }
        .badge-blue { background: var(--st-blue-bg); color: var(--st-blue-text); }
        .table-progress { width: 100px; height: 6px; background: #eee; border-radius: 3px; overflow: hidden; display: inline-block; vertical-align: middle; margin-right: 5px; }
        .tp-fill { height: 100%; background: var(--primary-blue); }
        .table-link { color: var(--primary-blue); text-decoration: none; font-size: 12px; font-weight: 500; }
        .table-action { background: #f5f5f5; border: none; width: 24px; height: 24px; border-radius: 4px; color: #999; cursor: pointer; }
        .back-btn { margin-bottom: 20px; display: inline-flex; align-items: center; gap: 5px; font-size: 14px; color: var(--text-gray); cursor: pointer; border: none; background: none; }
        .back-btn:hover { color: var(--primary-blue); }
        
        /* MOBILE NAV */
        .mobile-nav-container { display: none; position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 400px; height: 75px; background: var(--white); border-radius: 25px; box-shadow: 0 10px 40px rgba(0,0,0,0.1); z-index: 1000; justify-content: space-around; align-items: center; padding: 0 20px; }
.mobile-nav-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); width: 50px; height: 50px; }
.mobile-nav-item { text-decoration: none; }
.mobile-nav-item i { font-size: 24px; color: var(--text-gray); z-index: 2; transition: 0.3s; }
        .mobile-nav-item::before { content: ''; position: absolute; width: 55px; height: 55px; background: var(--text-dark); border-radius: 50%; opacity: 0; transform: scale(0.5); transition: 0.3s; z-index: 1; box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
        .mobile-nav-item.active { transform: translateY(-25px); }
        .mobile-nav-item.active::before { opacity: 1; transform: scale(1); }
        .mobile-nav-item.active i { color: var(--white); }
.mobile-nav-item#mob-nav-project i,
.mobile-nav-item#mob-nav-client i,
.mobile-nav-item#mob-nav-users i,
.mobile-nav-item#mob-nav-format i,
.mobile-nav-item#mob-nav-profile i { font-size: 22px; }

.mobile-management-menu {
    position: fixed;
    bottom: 90px;
    right: 16px;
    left: auto;
    background: var(--white);
    border: 1px solid #eee;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.1);
    display: none;
    flex-direction: column;
    min-width: 200px;
    z-index: 1200;
    overflow: hidden;
}
.mobile-management-menu a {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-dark);
    text-decoration: none;
    font-size: 13px;
    border-bottom: 1px solid #f5f5f5;
}
.mobile-management-menu a:last-child { border-bottom: none; }
.mobile-management-menu a.active { background: #F0F4FA; color: var(--primary-blue); }
.mobile-management-menu.active { display: flex; }

        /* MEDIA QUERIES */
        @media (max-width: 1200px) { .projects-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 1024px) {
            .container { grid-template-columns: 200px 1fr 0; }
            .right-panel { position: fixed; top: 0; right: 0; width: 320px; height: 100%; z-index: 1100; transform: translateX(100%); box-shadow: -5px 0 30px rgba(0,0,0,0.1); opacity: 1 !important; pointer-events: auto !important; padding: 35px 30px !important; }
            .right-panel.show { transform: translateX(0); }
            .btn-toggle-desktop { display: none; }
            .btn-toggle-mobile { display: flex; }
            .project-detail-grid { grid-template-columns: 1fr; }
        }
        @media (max-width: 768px) {
            body { overflow: auto; padding-bottom: 100px; }
            .container { display: block; height: auto; }
            .sidebar { display: none; }
            .mobile-nav-container { display: flex; }
            .main-content { padding: 20px; overflow: visible; }
            header { flex-direction: column-reverse; gap: 20px; align-items: flex-start; }
            .header-actions { width: 100%; justify-content: space-between; }
            .search-box { width: 100%; }
            .dashboard-grid, .projects-grid { grid-template-columns: 1fr; gap: 20px; }
            .profile-card { height: auto; min-height: 250px; }
            .btn-toggle-mobile { display: flex; background: white; border: none; width: 45px; height: 45px; border-radius: 50%; box-shadow: var(--shadow); align-items: center; justify-content: center; font-size: 20px; }
            .profile-info-card { margin-left: 0; margin-right: 0; padding: 20px; margin-top: -80px; }
            .profile-header-flex { flex-direction: column; align-items: center; text-align: center; gap: 15px; }
            .profile-user-left { flex-direction: column; align-items: center; gap: 10px; }
            .profile-avatar-float { margin-top: -60px; }
            .profile-content-grid { grid-template-columns: 1fr; gap: 30px; }
            .pd-tabs { gap: 15px; overflow-x: auto; white-space: nowrap; }
            .th-content, .th-actions, .comment-section { padding-left: 0; }
            .cal-grid-body { overflow-x: auto; }
            .cal-grid-header, .cal-grid-body { min-width: 600px; }
            .notification-menu { right: 20px; left: 20px; width: auto; top: 120px; }
            
            /* Management Menu Mobile */
            .management-menu { left: 50%; transform: translateX(-50%); top: auto; bottom: 90px; width: 250px; box-shadow: 0 -5px 20px rgba(0,0,0,0.1); }
            .management-menu::before { display: none; }
        }
        @media (max-width: 600px) {
            .main-content { padding: 16px; }
            .dashboard-grid { gap: 14px; }
            .card { padding: 16px; }
            .profile-card { padding: 18px; }
            .stats-grid { grid-template-columns: 1fr; }
            .header-actions { gap: 10px; }
            .search-box { padding: 10px 16px; }
            .btn-toggle-mobile { width: 40px; height: 40px; font-size: 18px; }
            .cal-grid-header, .cal-grid-body { min-width: 480px; }
            .team-row { gap: 10px; flex-wrap: wrap; }
            .team-av { width: 36px; height: 36px; }
        }

/* Extra CSS from users.html */
:root {
            --bg-color: #F0F4FA;
            --white: #FFFFFF;
            --primary-blue: #5F8DFF;
            --text-dark: #1F2937;
            --text-gray: #9CA3AF;
            --accent-pink: #FF6B81;
            --radius: 24px;
            --shadow: 0 4px 20px rgba(0,0,0,0.03);
            
            --st-green-bg: #E6F7F5; --st-green-text: #00A991;
            --st-blue-bg: #E3F2FD; --st-blue-text: #1976D2;
            --st-red-bg: #FFEBEE; --st-red-text: #D32F2F;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
        
        body {
            background-color: var(--bg-color);
            color: var(--text-dark);
            height: 100vh;
            overflow: hidden;
        }

        /* --- LAYOUT & SIDEBAR (Tetap) --- */
        .container { display: grid; grid-template-columns: 200px 1fr 380px; height: 100vh; transition: 0.3s; }
        .sidebar { background: var(--white); display: flex; flex-direction: column; align-items: stretch; padding: 20px; border-right: 1px solid #eee; z-index: 50; width: 180px; }
        .logo-icon { font-size: 28px; margin-bottom: 40px; color: var(--text-dark); background: #eee; width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
        .nav-item { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 16px; color: var(--text-gray); cursor: pointer; text-decoration: none; font-size: 20px; transition: 0.3s; margin-bottom: 15px; }
        .nav-item:hover, .nav-item.active { background-color: var(--primary-blue); color: white; box-shadow: 0 8px 15px rgba(95, 141, 255, 0.3); }
        .sidebar-bottom { margin-top: auto; display: flex; flex-direction: column; }

        /* --- MAIN CONTENT --- */
        .main-content { padding: 30px 40px; overflow-y: auto; scrollbar-width: none; }
        
        /* HEADER (Disamakan dengan Dashboard) */
        header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
        .page-title h1 { font-size: 24px; font-weight: 600; }
        .page-title p { color: var(--text-gray); font-size: 14px; margin-top: 5px; }
        
        .header-actions { display: flex; align-items: center; gap: 20px; }
        
        /* Search Box Style */
        .search-box {
            background: var(--white); padding: 12px 25px; border-radius: 30px;
            display: flex; align-items: center; width: 300px; box-shadow: var(--shadow);
        }
        .search-box input { border: none; outline: none; margin-left: 10px; width: 100%; font-size: 14px; color: var(--text-dark); }

        /* Notif Button Style */
        .btn-notif {
            background: var(--white); border: none; width: 45px; height: 45px; border-radius: 50%;
            box-shadow: var(--shadow); cursor: pointer; display: flex; align-items: center; justify-content: center;
            font-size: 18px; transition: 0.3s; color: var(--text-dark); position: relative;
        }
        .btn-notif::after { content: ''; position: absolute; top: 10px; right: 11px; width: 10px; height: 10px; background: var(--accent-pink); border-radius: 50%; border: 2px solid white; }

        /* Add Staff Button (Styled to fit header) */
        .btn-add-staff {
            background: var(--primary-blue); color: white; border: none; padding: 10px 24px;
            border-radius: 30px; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px;
            cursor: pointer; transition: 0.3s; box-shadow: 0 5px 15px rgba(95, 141, 255, 0.3); height: 45px;
        }
        .btn-add-staff:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(95, 141, 255, 0.4); }

        /* TABLE Styles */
        .table-card { background: var(--white); padding: 30px; border-radius: var(--radius); box-shadow: var(--shadow); animation: fadeIn 0.4s ease-in-out; }
        table.dataTable thead th { border-bottom: 1px solid #eee !important; color: var(--text-gray); font-weight: 600; font-size: 13px; text-transform: uppercase; }
        table.dataTable tbody td { padding: 15px 10px !important; border-top: 1px solid #f9f9f9; vertical-align: middle; font-size: 14px; }
        table.dataTable.no-footer { border-bottom: none !important; }

        .user-info { display: flex; align-items: center; gap: 12px; }
        .user-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
        .user-text h4 { font-size: 14px; font-weight: 600; margin: 0; }
        .user-text span { font-size: 12px; color: var(--text-gray); }

        .role-badge { padding: 5px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; }
        .role-admin { background: #FFEBEE; color: #D32F2F; }
        .role-editor { background: #E3F2FD; color: #1976D2; }
        .role-viewer { background: #F5F5F5; color: #757575; }

        .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; }
        .st-active { background: #00A991; }
        .st-inactive { background: #ccc; }

        .action-btn { background: #f5f7fa; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; color: #666; transition: 0.2s; }
        .action-btn:hover { background: var(--primary-blue); color: white; }
        .action-flex { display: flex; gap: 8px; }

        /* MANAGEMENT MENU (Floating) */
        .management-menu { position: absolute; left: 100px; top: 260px; background: var(--white); padding: 10px; border-radius: 16px; width: 200px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); z-index: 150; display: none; flex-direction: column; gap: 5px; }
        .management-menu.active { display: flex; }

        /* --- MOBILE NAV (Disamakan dengan Dashboard) --- */
        .mobile-nav-container { display: none; position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 400px; height: 75px; background: var(--white); border-radius: 25px; box-shadow: 0 10px 40px rgba(0,0,0,0.1); z-index: 1000; justify-content: space-around; align-items: center; padding: 0 20px; }
        .mobile-nav-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); width: 50px; height: 50px; }
        .mobile-nav-item i { font-size: 24px; color: var(--text-gray); z-index: 2; transition: 0.3s; }
        .mobile-nav-item::before { content: ''; position: absolute; width: 55px; height: 55px; background: var(--text-dark); border-radius: 50%; opacity: 0; transform: scale(0.5); transition: 0.3s; z-index: 1; box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
        .mobile-nav-item.active { transform: translateY(-25px); }
        .mobile-nav-item.active::before { opacity: 1; transform: scale(1); }
        .mobile-nav-item.active i { color: var(--white); }


        /* --- NEW: RIGHT SIDEBAR SLIDER (Pengganti Popup) --- */
        .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2000; opacity: 0; visibility: hidden; transition: 0.3s; }
        .overlay.active { opacity: 1; visibility: visible; }

        .right-sidebar-panel {
            position: fixed; top: 0; right: 0; height: 100%;
            width: 850px; /* Lebar panel */
            max-width: 90%;
            background: var(--white);
            z-index: 2001;
            box-shadow: -5px 0 30px rgba(0,0,0,0.15);
            transform: translateX(100%); /* Hidden by default */
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex; flex-direction: column;
        }
        .right-sidebar-panel.active { transform: translateX(0); }

        .panel-header { padding: 30px 40px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
        .panel-header h2 { font-size: 22px; font-weight: 700; }
        .btn-close-panel { background: none; border: none; font-size: 24px; cursor: pointer; color: var(--text-gray); transition: 0.2s; }
        .btn-close-panel:hover { color: var(--text-dark); transform: rotate(90deg); }

        .panel-content { flex-grow: 1; overflow-y: auto; padding: 40px; }
        
        .panel-footer { padding: 25px 40px; border-top: 1px solid #eee; display: flex; justify-content: flex-end; gap: 15px; background: #fff; }

        /* Form Styles inside Sidebar */
        .modal-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 50px; }
        .modal-col-right { border-left: 1px solid #f0f0f0; padding-left: 50px; }
        
        .modal-section-title { font-size: 16px; font-weight: 700; margin-bottom: 5px; color: var(--text-dark); display: flex; align-items: center; gap: 10px; }
        .modal-section-desc { font-size: 12px; color: #999; margin-bottom: 25px; font-weight: 400; }
        .modal-divider { margin: 8px 0; border-left: 3px solid var(--text-dark); padding-left: 10px; height: 16px; line-height: 16px; }

        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
        .form-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-dark); margin-bottom: 8px; }
        .form-label span.req { color: var(--accent-pink); }
        .form-input, .form-select { width: 100%; padding: 12px 15px; border-radius: 8px; border: 1px solid #eee; background: #F9FAFB; font-family: 'Poppins'; font-size: 13px; color: #555; outline: none; transition: 0.2s; }
        .form-input:focus, .form-select:focus { border-color: var(--primary-blue); background: #fff; }
        
        .file-upload-wrapper { display: flex; border: 1px solid #eee; border-radius: 8px; overflow: hidden; background: #F9FAFB; }
        .file-upload-btn { background: #f5f5f5; border: none; padding: 12px 20px; font-size: 13px; font-weight: 600; cursor: pointer; color: #555; border-right: 1px solid #eee; }
        .file-upload-text { padding: 12px 15px; font-size: 13px; color: #999; display: flex; align-items: center; }

.btn-cancel { background: #F9FAFB; color: var(--text-dark); border: none; padding: 12px 25px; border-radius: 12px; font-weight: 600; cursor: pointer; }
.btn-save { background: var(--primary-blue); color: white; border: none; padding: 12px 25px; border-radius: 12px; font-weight: 600; cursor: pointer; box-shadow: 0 6px 16px rgba(95, 141, 255, 0.3); }
.btn-report {
    background: #e8f4ff;
    color: #2b6cb0;
    border: none;
    padding: 12px 16px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 16px rgba(43, 108, 176, 0.15);
}
.btn-addon {
    background: linear-gradient(135deg,#5f8dff,#3c6ef5);
    color: #fff;
    border: none;
    padding: 12px 18px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(95,141,255,0.3);
}
.btn-insight {
    background: linear-gradient(135deg,#c850c0,#8e44ad);
    color: #fff;
    border: none;
    padding: 12px 18px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(200,80,192,0.25);
}
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
    position: absolute;
    right: 0;
    top: 110%;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    min-width: 160px;
    padding: 6px 0;
    display: none;
    z-index: 20;
}
.dropdown.open .dropdown-menu { display: block; }
.dropdown-item {
    display: block;
    padding: 8px 14px;
    font-size: 13px;
    color: #374151;
    text-decoration: none;
}
.dropdown-item:hover { background: #f5f7fb; color: #111; }
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: #f0f4ff; padding: 6px 10px; border-radius: 12px; font-size: 12px; color: #374151; }
.chip-close { background: none; border: none; color: #6b7280; cursor: pointer; font-size: 14px; line-height: 1; }
.ms-field { position: relative; }
.ms-toggle {
    padding: 12px 14px;
    border: 1px solid #eee;
    border-radius: 12px;
    background: #F9FAFB;
    cursor: pointer;
    font-size: 13px;
    color: #374151;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
}
.ms-toggle:after { content: "▼"; font-size: 10px; color: #9CA3AF; }
.ms-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    display: none;
    z-index: 30;
    padding: 10px;
}
.ms-dropdown.open { display: block; }
.ms-search { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid #eee; margin-bottom: 8px; font-size: 13px; }
.ms-options { max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.ms-option { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #374151; }
.ms-option input { accent-color: var(--primary-blue); }
.st-gray { background:#e5e7eb; color:#4b5563; }
.st-yellow { background:#fff7e6; color:#b45309; }
.st-red { background:#ffe4e6; color:#b91c1c; }
.st-green { background:#e6f7f5; color:#047857; }
.badge-count { background:#ff6b81; color:#fff; padding:2px 6px; border-radius:10px; font-size:11px; margin-left:6px; vertical-align:middle; }
.table-card .display th,
.table-card .display td {
    font-size: 12px;
}
/* remove table borders as requested */
.table-card .display { border: none; }
.table-card .display th, .table-card .display td { border: none; }
/* Mobile-friendly modal tweaks */
@media (max-width: 600px) {
    .modal-content {
        width: 95%;
        max-width: 95%;
        margin: 0 auto;
        padding: 18px;
        border-radius: 16px;
        max-height: 90vh;
        overflow-y: auto;
    }
#statusModal {
        align-items: flex-start;
        padding: 12px;
    }
    #statusModal .modal-content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 14px;
        padding: 16px;
    }
    #taskEditModal {
        align-items: flex-start;
        padding: 12px;
    }
    #taskEditModal .modal-content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 14px;
        padding: 16px;
    }
    .top-info-grid { grid-template-columns: 1fr; }
    .ms-dropdown {
        position: relative;
        top: 6px;
        box-shadow: none;
    }
    .ms-options { max-height: 200px; }
    .modal-header {
        padding-bottom: 10px;
    }
    .modal-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .modal-footer .btn-save,
    .modal-footer .btn-cancel {
        width: 100%;
        justify-content: center;
    }
}
.btn-upload-report {
    background: #f0f4ff;
    color: #2d4cb3;
    border: 1px solid #d8e3ff;
    padding: 11px 14px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(45,76,179,0.1);
}
.btn-upload-report:hover { background: #e5edff; }
.btn-new-session {
    background: #fdf2f8;
    color: #be185d;
    border: 1px solid #f9c6da;
    padding: 11px 14px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(190,24,93,0.12);
}
.btn-new-session:hover { background: #fbe4ef; }
 .project-show-grid { grid-template-columns: 1fr; gap: 16px; }
.top-info-grid { display: grid; grid-template-columns: 0.8fr 0.2fr; gap: 16px; }
.info-content-card { display: flex; flex-direction: column; justify-content: space-between; }

        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* --- RESPONSIVE CSS --- */
        @media (max-width: 768px) {
            body { overflow: auto; padding-bottom: 100px; }
    .container { display: block; height: auto; }
    .sidebar { display: none; }
    .mobile-nav-container { display: flex; }
    .main-content { padding: 20px; overflow: visible; }
    .project-show-grid { grid-template-columns: 1fr !important; }
    .dashboard-grid .right-card { order: 1; }
    .dashboard-grid .left-card { order: 2; margin-top: 15px; }
    .tab-row { flex-direction: column; align-items: flex-start; }
    .tab-list { width: 100%; }
    .month-filter { width: 100%; justify-content: space-between; }
    .month-filter select { width: 60%; }
            
            /* Header Responsive: Stack Title and Actions */
            header { flex-direction: column-reverse; align-items: flex-start; gap: 20px; }
            .header-actions { width: 100%; justify-content: space-between; }
            .search-box { width: 100%; } /* Search box full width */
            
            /* Mobile Table Card View */
            table.dataTable thead { display: none; }
            table.dataTable tbody tr { display: block; margin-bottom: 20px; border: 1px solid #eee; border-radius: 16px; background: white; box-shadow: 0 4px 10px rgba(0,0,0,0.03); padding: 10px; }
            table.dataTable tbody td { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f5f5f5; text-align: right; padding: 12px 10px !important; }
            table.dataTable tbody td:last-child { border-bottom: none; }
            table.dataTable tbody td::before { content: attr(data-label); font-weight: 600; font-size: 12px; color: #999; text-transform: uppercase; text-align: left; }
            table.dataTable tbody td:first-child { background: #F9FAFB; border-radius: 10px; margin-bottom: 10px; justify-content: flex-start; gap: 15px; }
            table.dataTable tbody td:first-child::before { display: none; }
            .mobile-hide { display: none !important; }
            
            .management-menu { left: 50%; transform: translateX(-50%); top: auto; bottom: 90px; width: 250px; }

            /* Right Sidebar Mobile Response */
            .right-sidebar-panel { width: 100%; max-width: 100%; }
            .panel-header { padding: 20px; }
            .panel-content { padding: 20px; }
            .modal-grid { grid-template-columns: 1fr; gap: 0; }
            .modal-col-right { border-left: none; padding-left: 0; border-top: 1px solid #eee; padding-top: 30px; margin-top: 20px; }
            .form-row { grid-template-columns: 1fr; gap: 10px; }
        }

/* Extra CSS from client.html */
/* --- CORE STYLES (SAMA DENGAN USERS.HTML) --- */
        :root {
            --bg-color: #F0F4FA;
            --white: #FFFFFF;
            --primary-blue: #5F8DFF;
            --text-dark: #1F2937;
            --text-gray: #9CA3AF;
            --accent-pink: #FF6B81;
            --radius: 24px;
            --shadow: 0 4px 20px rgba(0,0,0,0.03);
            
            --st-green-bg: #E6F7F5; --st-green-text: #00A991;
            --st-blue-bg: #E3F2FD; --st-blue-text: #1976D2;
            --st-red-bg: #FFEBEE; --st-red-text: #D32F2F;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
        
        body {
            background-color: var(--bg-color);
            color: var(--text-dark);
            height: 100vh;
            overflow: hidden;
        }

        /* LAYOUT */
        .container { display: grid; grid-template-columns: 200px 1fr 380px; height: 100vh; transition: 0.3s; }
        
        /* SIDEBAR */
        .sidebar { background: var(--white); display: flex; flex-direction: column; align-items: stretch; padding: 20px; border-right: 1px solid #eee; z-index: 50; width: 180px; }
        .logo-icon { font-size: 28px; margin: 0 auto 40px; color: var(--text-dark); background: #eee; width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
        .nav-item { width: 100%; height: 48px; display: flex; align-items: center; justify-content: flex-start; border-radius: 16px; color: var(--text-gray); cursor: pointer; text-decoration: none; font-size: 20px; transition: 0.3s; margin: 0 0 12px; gap: 12px; padding: 0 14px; }
        .nav-item:hover, .nav-item.active { background-color: var(--primary-blue); color: white; box-shadow: 0 8px 15px rgba(95, 141, 255, 0.3); }
        .sidebar-bottom { margin-top: auto; display: flex; flex-direction: column; }

        /* MAIN CONTENT */
        .main-content { padding: 30px 40px; overflow-y: auto; scrollbar-width: none; }
        
        /* HEADER */
        header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
        .page-title h1 { font-size: 24px; font-weight: 600; }
        .page-title p { color: var(--text-gray); font-size: 14px; margin-top: 5px; }
        
        .header-actions { display: flex; align-items: center; gap: 20px; }
        .search-box { background: var(--white); padding: 12px 25px; border-radius: 30px; display: flex; align-items: center; width: 300px; box-shadow: var(--shadow); }
        .search-box input { border: none; outline: none; margin-left: 10px; width: 100%; font-size: 14px; color: var(--text-dark); }
        
        .btn-notif {
            background: var(--white); border: 1px solid #e5e7eb; width: 44px; height: 44px; border-radius: 12px;
            box-shadow: var(--shadow); cursor: pointer; display: flex; align-items: center; justify-content: center;
            font-size: 18px; transition: 0.3s; color: var(--text-dark); position: relative; padding: 0;
        }
        .btn-notif::after { content: none; }
        .btn-notif:hover { transform: translateY(-1px); border-color: transparent; }

        .btn-add-client {
            background: var(--primary-blue); color: white; border: none; padding: 10px 24px;
            border-radius: 30px; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px;
            cursor: pointer; transition: 0.3s; box-shadow: 0 5px 15px rgba(95, 141, 255, 0.3); height: 45px;
        }
        .btn-add-client:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(95, 141, 255, 0.4); }

        /* TABLE */
        .table-card { background: var(--white); padding: 30px; border-radius: var(--radius); box-shadow: var(--shadow); animation: fadeIn 0.4s ease-in-out; }
        table.dataTable thead th { border-bottom: 1px solid #eee !important; color: var(--text-gray); font-weight: 600; font-size: 13px; text-transform: uppercase; }
        table.dataTable tbody td { padding: 15px 10px !important; border-top: 1px solid #f9f9f9; vertical-align: middle; font-size: 14px; }
        table.dataTable.no-footer { border-bottom: none !important; }

        .client-info { display: flex; align-items: center; gap: 12px; }
        .client-avatar { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; } /* Kotak rounded untuk client */
        .client-text h4 { font-size: 14px; font-weight: 600; margin: 0; }
        .client-text span { font-size: 12px; color: var(--text-gray); }

        .status-badge { padding: 5px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; }
        .st-active { background: #E6F7F5; color: #00A991; }
        .st-inactive { background: #FFEBEE; color: #D32F2F; }

        .action-btn { background: #f5f7fa; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; color: #666; transition: 0.2s; }
        .action-btn:hover { background: var(--primary-blue); color: white; }
        .action-flex { display: flex; gap: 8px; }

        /* MENU & SIDEBAR PANEL */
        .management-menu { position: absolute; left: 100px; top: 260px; background: var(--white); padding: 10px; border-radius: 16px; width: 200px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); z-index: 150; display: none; flex-direction: column; gap: 5px; }
        .management-menu.active { display: flex; }

        .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2000; opacity: 0; visibility: hidden; transition: 0.3s; }
        .overlay.active { opacity: 1; visibility: visible; }

        .right-sidebar-panel {
            position: fixed; top: 0; right: 0; height: 100%; width: 850px; max-width: 90%;
            background: var(--white); z-index: 2001; box-shadow: -5px 0 30px rgba(0,0,0,0.15);
            transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex; flex-direction: column;
        }
        .right-sidebar-panel.active { transform: translateX(0); }

        .panel-header { padding: 30px 40px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
        .panel-header h2 { font-size: 22px; font-weight: 700; }
        .btn-close-panel { background: none; border: none; font-size: 24px; cursor: pointer; color: var(--text-gray); transition: 0.2s; }
        .panel-content { flex-grow: 1; overflow-y: auto; padding: 40px; }
        .panel-footer { padding: 25px 40px; border-top: 1px solid #eee; display: flex; justify-content: flex-end; gap: 15px; background: #fff; }

        /* FORM STYLES (MATCHING IMAGE) */
        .modal-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 50px; }
        .modal-col-right { border-left: 1px solid #f0f0f0; padding-left: 50px; }
        
        .modal-section-title { font-size: 18px; font-weight: 700; margin-bottom: 5px; color: var(--text-dark); display: flex; align-items: center; gap: 10px; }
        .modal-section-desc { font-size: 12px; color: #999; margin-bottom: 25px; font-weight: 400; }
        
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
        .form-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-dark); margin-bottom: 8px; }
        .form-label span.req { color: var(--accent-pink); }
        .form-input { width: 100%; padding: 12px 15px; border-radius: 8px; border: 1px solid #eee; background: #F9FAFB; font-family: 'Poppins'; font-size: 13px; color: #555; outline: none; transition: 0.2s; }
        .form-input:focus { border-color: var(--primary-blue); background: #fff; }
        
        .file-upload-wrapper { display: flex; border: 1px solid #eee; border-radius: 8px; overflow: hidden; background: #F9FAFB; }
        .file-upload-btn { background: #f5f5f5; border: none; padding: 12px 20px; font-size: 13px; font-weight: 600; cursor: pointer; color: #555; border-right: 1px solid #eee; }
        .file-upload-text { padding: 12px 15px; font-size: 13px; color: #999; display: flex; align-items: center; }

        .btn-cancel { background: #F9FAFB; color: var(--text-dark); border: none; padding: 12px 25px; border-radius: 12px; font-weight: 600; cursor: pointer; }
        .btn-save { background: var(--primary-blue); color: white; border: none; padding: 12px 25px; border-radius: 12px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 10px rgba(95, 141, 255, 0.3); }

        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* MOBILE NAV */
        .mobile-nav-container { display: none; position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); width: 82%; max-width: 340px; height: 65px; background: var(--white); border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.1); z-index: 1000; justify-content: space-around; align-items: center; padding: 0 12px; }
        .mobile-nav-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; width: 46px; height: 46px; }
        .mobile-nav-item i { font-size: 22px; color: var(--text-gray); transition: 0.3s; }
        .mobile-nav-item.active i { color: var(--primary-blue); }

        /* RESPONSIVE */
        @media (max-width: 768px) {
            body { overflow: auto; padding-bottom: 100px; }
            .container { display: block; height: auto; }
            .sidebar { display: none; }
            .mobile-nav-container { display: flex; }
            .main-content { padding: 20px; overflow: visible; }
            
            header { flex-direction: column-reverse; align-items: flex-start; gap: 20px; }
            .header-actions { width: 100%; justify-content: space-between; }
            .search-box { width: 100%; }

            table.dataTable thead { display: none; }
            table.dataTable tbody tr { display: block; margin-bottom: 20px; border: 1px solid #eee; border-radius: 16px; background: white; box-shadow: 0 4px 10px rgba(0,0,0,0.03); padding: 10px; }
            table.dataTable tbody td { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f5f5f5; text-align: right; padding: 12px 10px !important; }
            table.dataTable tbody td:last-child { border-bottom: none; }
            table.dataTable tbody td::before { content: attr(data-label); font-weight: 600; font-size: 12px; color: #999; text-transform: uppercase; text-align: left; }
            table.dataTable tbody td:first-child { background: #F9FAFB; border-radius: 10px; margin-bottom: 10px; justify-content: flex-start; gap: 15px; }
            table.dataTable tbody td:first-child::before { display: none; }
            
            .management-menu { left: 50%; transform: translateX(-50%); top: auto; bottom: 90px; width: 250px; }
            
            .right-sidebar-panel { width: 100%; max-width: 100%; }
            .modal-grid { grid-template-columns: 1fr; gap: 0; }
            .modal-col-right { border-left: none; padding-left: 0; border-top: 1px solid #eee; padding-top: 30px; margin-top: 20px; }
            .form-row { grid-template-columns: 1fr; gap: 10px; }
        }

/* Extra CSS from format.html */
/* --- CORE STYLES (SAMA DENGAN DASHBOARD LAIN) --- */
        :root {
            --bg-color: #F0F4FA;
            --white: #FFFFFF;
            --primary-blue: #5F8DFF; /* Warna utama biru */
            --text-dark: #1F2937;
            --text-gray: #9CA3AF;
            --accent-pink: #FF6B81; /* Digunakan untuk tombol Hapus */
            --radius: 24px;
            --shadow: 0 4px 20px rgba(0,0,0,0.03);
            
            --st-blue-bg: #E3F2FD; 
            --st-blue-text: #1976D2;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
        
        body {
            background-color: var(--bg-color);
            color: var(--text-dark);
            height: 100vh;
            overflow: hidden;
        }

        /* LAYOUT */
        .container { display: grid; grid-template-columns: 200px 1fr 380px; height: 100vh; transition: 0.3s; }
        .sidebar { background: var(--white); display: flex; flex-direction: column; align-items: stretch; padding: 20px; border-right: 1px solid #eee; z-index: 50; width: 180px; }
        .logo-icon { font-size: 28px; margin: 0 auto 40px; color: var(--text-dark); background: #eee; width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
        .nav-item { width: 100%; height: 48px; display: flex; align-items: center; justify-content: flex-start; border-radius: 16px; color: var(--text-gray); cursor: pointer; text-decoration: none; font-size: 20px; transition: 0.3s; margin: 0 0 12px; gap: 12px; padding: 0 14px; }
        .nav-item:hover, .nav-item.active { background-color: var(--primary-blue); color: white; box-shadow: 0 8px 15px rgba(95, 141, 255, 0.3); }
        .sidebar-bottom { margin-top: auto; display: flex; flex-direction: column; }

        /* MAIN CONTENT */
        .main-content { padding: 30px 40px; overflow-y: auto; scrollbar-width: none; }
        
        /* HEADER */
        header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
        .page-title h1 { font-size: 24px; font-weight: 600; }
        .page-title p { color: var(--text-gray); font-size: 14px; margin-top: 5px; }
        .header-actions { display: flex; align-items: center; gap: 20px; }
        .btn-notif { background: var(--white); border: none; width: 45px; height: 45px; border-radius: 50%; box-shadow: var(--shadow); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--text-dark); position: relative; }

        /* --- STYLES KHUSUS HALAMAN INI (FORMAT CONTENT) --- */
        
        /* Grid 2 Kolom untuk Card */
.config-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dua kolom sama lebar */
    gap: 30px;
}

        .config-card {
            background: var(--white);
            padding: 30px;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            animation: fadeIn 0.4s ease-in-out;
        }

        /* Header Card (Judul + Subjudul) */
.card-header-flex {
    margin-bottom: 25px;
}
.card-title { font-size: 18px; font-weight: 700; color: var(--text-dark); display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.card-subtitle { font-size: 12px; color: var(--text-gray); font-weight: 400; }

        /* Form Tambah Baru (Bagian Atas) */
        .add-row-wrapper {
            display: flex;
            gap: 15px;
            margin-bottom: 30px;
            align-items: stretch;
        }
        .input-new {
            flex-grow: 1;
            background: #F9FAFB;
            border: 1px solid #eee;
            border-radius: 12px;
            padding: 0 15px;
            height: 45px;
            font-family: 'Poppins';
            font-size: 13px;
            outline: none;
        }
        .input-new:focus { border-color: var(--primary-blue); background: #fff; }
        
        .btn-add-new {
            background: var(--primary-blue);
            color: white;
            border: none;
            border-radius: 12px;
            width: 80px;
            font-weight: 600;
            font-size: 12px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            line-height: 1.2;
            transition: 0.2s;
        }
        .btn-add-new:hover { opacity: 0.9; transform: translateY(-2px); }

        /* Header List (NAMA - AKSI) */
        .list-header {
            display: flex;
            justify-content: space-between;
            font-size: 11px;
            color: var(--text-gray);
            font-weight: 700;
            text-transform: uppercase;
            margin-bottom: 15px;
            padding: 0 5px;
        }

        /* List Items */
        .list-container {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .list-item {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .input-item {
            flex-grow: 1;
            background: #F9FAFB;
            border: 1px solid transparent; /* Border transparan agar rapi */
            border-radius: 10px;
            padding: 10px 15px;
            font-family: 'Poppins';
            font-size: 13px;
            color: var(--text-dark);
            outline: none;
            transition: 0.2s;
        }
        .input-item:focus {
            background: #fff;
            border-color: var(--primary-blue);
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        /* Tombol Aksi (Simpan & Hapus) */
        .action-group {
            display: flex;
            gap: 10px;
            flex-shrink: 0; /* Mencegah tombol mengecil */
        }

        .btn-simpan {
            background: var(--st-blue-bg);
            color: var(--st-blue-text);
            border: none;
            padding: 8px 16px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: 0.2s;
        }
        .btn-simpan:hover { background: #d0e7ff; }

        .btn-hapus {
            background: var(--accent-pink); /* Merah/Pink sesuai gambar */
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: 0.2s;
        }
.btn-hapus:hover { opacity: 0.9; }

        /* MANAGEMENT MENU (Dropdown) */
        .management-menu { position: absolute; left: 100px; top: 260px; background: var(--white); padding: 10px; border-radius: 16px; width: 200px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); z-index: 150; display: none; flex-direction: column; gap: 5px; }
        .management-menu.active { display: flex; }

        /* MOBILE NAV */
        .mobile-nav-container { display: none; position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 400px; height: 75px; background: var(--white); border-radius: 25px; box-shadow: 0 10px 40px rgba(0,0,0,0.1); z-index: 1000; justify-content: space-around; align-items: center; padding: 0 20px; }
        .mobile-nav-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; width: 50px; height: 50px; }
        .mobile-nav-item i { font-size: 24px; color: var(--text-gray); transition: 0.3s; }
        .mobile-nav-item.active i { color: var(--primary-blue); }

        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* --- RESPONSIVE CSS --- */
@media (max-width: 900px) {
    .config-grid { grid-template-columns: 1fr; } /* Stack cards on tablet/mobile */
    .config-card { padding: 20px; }
    .add-row-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .add-row-wrapper .input-new {
        width: 100%;
    }
    .add-row-wrapper .btn-add-new {
        width: 100%;
        justify-content: center;
    }
    .list-item {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .action-group {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (max-width: 768px) {
    body { overflow: auto; padding-bottom: 100px; }
    .container { display: block; height: auto; }
            .sidebar { display: none; }
            .mobile-nav-container { display: flex; }
            .main-content { padding: 20px; overflow: visible; }
            
            header { flex-direction: column-reverse; align-items: flex-start; gap: 20px; }
            .header-actions { width: 100%; justify-content: flex-end; }
            
            .management-menu { left: 50%; transform: translateX(-50%); top: auto; bottom: 90px; width: 250px; }
            
            /* Adjust buttons on very small screens */
            .btn-simpan, .btn-hapus { padding: 8px 12px; }
        }


/* Login page styles */
.login-body {
    background-color: var(--bg-color);
    font-family: 'Poppins', sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.login-wrapper {
    background: var(--white);
    border-radius: 24px;
    box-shadow: var(--shadow-float);
    padding: 40px 35px;
    width: 100%;
    max-width: 420px;
}
.login-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 5px;
    text-align: center;
}
.login-subtitle {
    font-size: 13px;
    color: var(--text-gray);
    margin-bottom: 25px;
    text-align: center;
}
.login-form-group {
    margin-bottom: 18px;
}
.login-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 6px;
    display: block;
}
.login-input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #eee;
    background: #F9FAFB;
    font-size: 13px;
    outline: none;
    transition: 0.2s;
}
.login-input:focus {
    border-color: var(--primary-blue);
    background: #fff;
}
.login-button {
    width: 100%;
    border: none;
    border-radius: 999px;
    background: var(--primary-blue);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    padding: 12px 16px;
    cursor: pointer;
    margin-top: 10px;
    box-shadow: 0 8px 20px rgba(95, 141, 255, 0.4);
    transition: 0.2s;
}
.login-button:hover {
    transform: translateY(-1px);
}
.login-footer-text {
    margin-top: 18px;
    font-size: 12px;
    color: var(--text-gray);
    text-align: center;
}

/* Layout override: keep right sidebar docked on the right */
.container {
    display: grid;
    grid-template-columns: 200px 1fr 380px;
    height: 100vh;
    transition: grid-template-columns 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.container.expand-main {
    grid-template-columns: 200px 1fr 0;
}

.right-panel {
    grid-column: 3;
}

@media (max-width: 1024px) {
    .container {
        grid-template-columns: 200px 1fr 0;
    }
}

@media (max-width: 768px) {
    .container {
        display: block;
        height: auto;
    }
}

/* Users panel form */
.table-header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 15px;
}
.alert-success {
    margin-bottom: 12px;
    background: #e8f5e9;
    color: #2e7d32;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
}
.alert-danger {
    margin-bottom: 12px;
    background: #fff5f5;
    color: #c62828;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
}
.alert-danger ul {
    margin: 6px 0 0 18px;
    padding: 0;
}
.panel-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.panel-section-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}
.panel-section-sub {
    font-size: 12px;
    color: var(--text-gray);
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.form-input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #eee;
    background: #F9FAFB;
    font-size: 13px;
    outline: none;
    transition: 0.2s;
}
.form-input:focus {
    border-color: var(--primary-blue);
    background: #fff;
    box-shadow: 0 2px 8px rgba(95, 141, 255, 0.1);
}
.input-hint {
    color: #9CA3AF;
    font-size: 11px;
}
.panel-content {
    padding: 30px 30px 10px 30px;
}
.panel-footer {
    padding: 20px 30px;
}
.modal-col-right .form-group {
    margin-bottom: 12px;
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }
    .panel-content {
        padding: 20px;
    }
    .panel-footer {
        padding: 15px 20px;
    }

    /* Project show responsiveness */
    .dashboard-grid { grid-template-columns: 1fr; }
    .panel-section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
    .btn-addon, .btn-insight { width: 100%; justify-content: center; }
    .btn-report { width: 100%; text-align: center; }
}

/* Overrides to improve overlays and panel usability */
.overlay {
    z-index: 1000; /* keep above content but below sliding panels */
}

.right-sidebar-panel {
    overflow: hidden; /* contain scroll inside panel */
}

.panel-content {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}

@media (max-width: 768px) {
    .right-sidebar-panel {
        width: 100%;
        max-width: 100%;
        height: 100vh;
    }
    .panel-content {
        max-height: calc(100vh - 130px);
        padding: 16px;
    }
    .panel-footer {
        padding: 16px;
    }
}