/* ============================================ Marketplace CSS - Onlinecer (Professional) ============================================ *//* Dashboard body - remove body padding on dash pages */body.dash-page { padding-top: 0;}/* ============================================ Dashboard Layout ============================================ */.dash-layout { display: flex; min-height: 100vh; background: #f1f5f9;}/* ============================================ Sidebar (Full Height - Top to Bottom) ============================================ */.dash-sidebar { width: 260px; min-width: 260px; background: #ffffff; color: #0f172a; position: fixed; top: 0; left: 0; bottom: 0; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; z-index: 1000; box-shadow: 4px 0 24px rgba(15, 23, 42, 0.08); border-right: 1px solid #e2e8f0; display: flex; flex-direction: column;}.dash-sidebar::-webkit-scrollbar { display: none; width: 0; height: 0;}/* Sidebar Brand (Logo at top) */.dash-sidebar-brand { padding: 20px; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: space-between;}.dash-sidebar-brand .logo-img { height: 40px; width: auto; object-fit: contain;}.dash-sidebar-brand .sidebar-close { display: none; width: 36px; height: 36px; border-radius: 10px; background: #f1f5f9; border: 1px solid #e2e8f0; color: #64748b; cursor: pointer; align-items: center; justify-content: center; font-size: 14px; transition: all 0.25s ease;}.dash-sidebar-brand .sidebar-close:hover { background: #eef2ff; color: #4f46e5;}/* Sidebar User Profile */.dash-sidebar-user { padding: 20px; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; gap: 12px;}.dash-sidebar-user .avatar,.dash-sidebar-user .avatar-initials { border: 2px solid #e2e8f0; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08); flex-shrink: 0;}.dash-sidebar-user-info { flex: 1; min-width: 0;}.dash-sidebar-user-info strong { display: block; font-size: 14px; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}.dash-sidebar-user-info small { display: block; color: #64748b; font-size: 12px; margin-top: 2px;}/* Sidebar Menu */.dash-sidebar .sidebar-menu { list-style: none; padding: 12px 0; margin: 0; flex: 1;}.dash-sidebar .sidebar-menu .sidebar-group-label { padding: 16px 22px 6px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: #94a3b8;}.dash-sidebar .sidebar-menu .sidebar-group-label:first-child { padding-top: 4px;}.dash-sidebar .sidebar-menu li a { display: flex; align-items: center; gap: 12px; padding: 11px 20px; color: #475569; font-size: 14px; font-weight: 500; text-decoration: none; transition: all 0.25s ease; margin: 2px 10px; border-radius: 12px; position: relative;}.dash-sidebar .sidebar-menu li a:hover { background: #f1f5f9; color: #4f46e5; transform: translateX(3px);}.dash-sidebar .sidebar-menu li a.active { background: linear-gradient(90deg, rgba(79, 70, 229, 0.12) 0%, rgba(79, 70, 229, 0.04) 100%); color: #4f46e5; font-weight: 600;}.dash-sidebar .sidebar-menu li a.active::before { content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; border-radius: 0 4px 4px 0; background: linear-gradient(135deg, #4f46e5, #6366f1);}.dash-sidebar .sidebar-menu li a i { width: 20px; text-align: center; font-size: 15px; opacity: 0.75; transition: all 0.25s ease;}.dash-sidebar .sidebar-menu li a:hover i { opacity: 1; color: #4f46e5;}.dash-sidebar .sidebar-menu li a.active i { opacity: 1; color: #4f46e5;}.dash-sidebar .sidebar-menu .badge { margin-left: auto; background: linear-gradient(135deg, #ef4444, #f87171); color: #fff; font-size: 10px; padding: 3px 8px; border-radius: 12px; font-weight: 700; line-height: 1.4; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);}/* Sidebar Footer */.dash-sidebar-footer { padding: 16px 20px; border-top: 1px solid #e2e8f0;}.dash-sidebar-footer a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; color: #64748b; font-size: 13px; font-weight: 500; text-decoration: none; transition: all 0.25s ease;}.dash-sidebar-footer a:hover { background: #f1f5f9; color: #4f46e5;}.dash-sidebar-footer a i { width: 20px; text-align: center; font-size: 14px;}/* ============================================ Main Content Area (Right of Sidebar) ============================================ */.dash-main { flex: 1; margin-left: 260px; min-height: 100vh; background: #f1f5f9; display: flex; flex-direction: column;}/* Topbar (Sticky at top of main area) */.dash-topbar { position: fixed; top: 0; left: 260px; right: 0; z-index: 1001; height: 74px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid rgba(226, 232, 240, 0.8); box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06); display: flex; align-items: center;}.dash-topbar-inner { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 24px;}.dash-topbar-search { flex: 1; max-width: 520px; display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 44px; border-radius: 12px; background: #f1f5f9; border: 1px solid #e2e8f0; transition: all 0.25s ease;}.dash-topbar-search:focus-within { border-color: #4f46e5; background: #fff; box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.08);}.dash-topbar-search i { color: #64748b; font-size: 14px;}.dash-topbar-search input { width: 100%; background: transparent; border: none; color: #0f172a; outline: none; font-family: inherit; font-size: 14px;}.dash-topbar-search input::placeholder { color: #94a3b8;}.dash-topbar-actions { display: flex; align-items: center; gap: 10px;}.dash-topbar-icon,.dash-topbar-pill { height: 42px; padding: 0 14px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #475569; background: #f1f5f9; border: 1px solid #e2e8f0; position: relative; transition: all 0.25s ease; font-weight: 600; font-size: 13px; text-decoration: none;}.dash-topbar-icon:hover,.dash-topbar-pill:hover { background: #eef2ff; color: #4f46e5; border-color: #c7d2fe; transform: translateY(-1px);}.dash-topbar-icon i,.dash-topbar-pill i { font-size: 14px;}.dash-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: linear-gradient(135deg, #ef4444, #fb7185); color: #fff; font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);}/* Content Wrapper */.dash-content { padding: 104px 30px 30px; flex: 1;}.dash-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; flex-wrap: wrap; gap: 15px; padding: 22px 24px; border-radius: 20px; background: rgba(255,255,255,0.9); border: 1px solid rgba(226, 232, 240, 0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);}.dash-header h1 { font-size: 28px; color: #0f172a; font-weight: 800; letter-spacing: -0.5px;}.dash-header p { color: #64748b; font-size: 14px; margin-top: 4px;}/* ============================================ Stats Cards ============================================ */.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 30px;}.stat-card { background: #fff; border-radius: 18px; padding: 26px 24px; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05); display: flex; align-items: center; gap: 18px; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid rgba(226, 232, 240, 0.7); position: relative; overflow: hidden;}.stat-card::after { content: ''; position: absolute; top: 0; right: 0; width: 80px; height: 80px; background: radial-gradient(circle, rgba(79, 70, 229, 0.06) 0%, transparent 70%); border-radius: 50%; transition: all 0.35s ease;}.stat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1); border-color: rgba(79, 70, 229, 0.15);}.stat-card:hover::after { transform: scale(1.8);}.stat-card-icon { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; flex-shrink: 0; position: relative; z-index: 1; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15);}.stat-card-icon.blue { background: linear-gradient(135deg, #4f46e5, #6366f1); box-shadow: 0 8px 20px rgba(79, 70, 229, 0.35); }.stat-card-icon.cyan { background: linear-gradient(135deg, #06b6d4, #22d3ee); box-shadow: 0 8px 20px rgba(6, 182, 212, 0.35); }.stat-card-icon.green { background: linear-gradient(135deg, #10b981, #34d399); box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35); }.stat-card-icon.purple { background: linear-gradient(135deg, #8b5cf6, #a78bfa); box-shadow: 0 8px 20px rgba(139, 92, 246, 0.35); }.stat-card-icon.orange { background: linear-gradient(135deg, #f59e0b, #fbbf24); box-shadow: 0 8px 20px rgba(245, 158, 11, 0.35); }.stat-card-icon.red { background: linear-gradient(135deg, #ef4444, #f87171); box-shadow: 0 8px 20px rgba(239, 68, 68, 0.35); }.stat-card-info h3 { font-size: 28px; font-weight: 800; color: #0f172a; line-height: 1.2; letter-spacing: -0.5px;}.stat-card-info p { color: #64748b; font-size: 13px; margin-top: 3px; font-weight: 500;}/* ============================================ Content Card ============================================ */.content-card { background: #fff; border-radius: 18px; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05); border: 1px solid rgba(226, 232, 240, 0.7); margin-bottom: 24px; overflow: hidden; transition: all 0.3s ease;}.content-card:hover { box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);}.content-card-header { padding: 20px 24px; border-bottom: 1px solid rgba(226, 232, 240, 0.7); display: flex; justify-content: space-between; align-items: center; background: linear-gradient(180deg, #f8fafc, #f1f5f9);}.content-card-header h2 { font-size: 18px; font-weight: 700; color: #0f172a; display: flex; align-items: center; gap: 10px; letter-spacing: -0.2px;}.content-card-header h2 i { color: #4f46e5; background: rgba(79, 70, 229, 0.08); width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 14px;}.content-card-body { padding: 24px; }/* ============================================ Tables ============================================ */.dash-table { width: 100%; border-collapse: collapse;}.dash-table thead th { background: #0f172a; color: #fff; padding: 14px 16px; text-align: left; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; white-space: nowrap; border-bottom: none;}.dash-table thead th:first-child { border-radius: 8px 0 0 8px;}.dash-table thead th:last-child { border-radius: 0 8px 8px 0;}.dash-table tbody tr { border-bottom: 1px solid #f1f5f9; transition: background 0.2s;}.dash-table tbody tr:last-child { border-bottom: none;}.dash-table tbody tr:hover { background: #f8fafc;}.dash-table tbody tr:hover td { color: #4f46e5;}.dash-table td { padding: 14px 16px; font-size: 14px; color: #334155; vertical-align: middle; font-weight: 500;}/* ============================================ Badges ============================================ */.badge-status { display: inline-block; padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; white-space: nowrap; letter-spacing: 0.2px;}.badge-open { background: #d1fae5; color: #065f46; }.badge-in_progress, .badge-in-progress { background: #dbeafe; color: #1e40af; }.badge-completed { background: #ecfdf5; color: #047857; box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.15); }.badge-cancelled, .badge-closed { background: #fee2e2; color: #991b1b; }.badge-pending { background: #fef3c7; color: #92400e; }.badge-accepted { background: #d1fae5; color: #065f46; }.badge-rejected { background: #fee2e2; color: #991b1b; }.badge-delivered { background: #ede9fe; color: #5b21b6; }.badge-disputed { background: #fef2f2; color: #b91c1c; }.badge-active { background: #d1fae5; color: #065f46; }.badge-blocked { background: #fee2e2; color: #991b1b; }/* ============================================ Project Cards ============================================ */.project-card { background: #fff; border-radius: 16px; border: 1px solid rgba(226, 232, 240, 0.7); padding: 24px; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); margin-bottom: 16px; position: relative;}.project-card:hover { box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1); border-color: rgba(79, 70, 229, 0.2); transform: translateY(-2px);}.project-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; gap: 15px;}.project-card-header h3 { font-size: 18px; color: #0f172a; font-weight: 700; letter-spacing: -0.2px;}.project-card-header h3 a { color: inherit; text-decoration: none; transition: all 0.2s ease;}.project-card-header h3 a:hover { color: #4f46e5;}.project-card-meta { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 12px; font-size: 13px; color: #64748b;}.project-card-meta i { margin-right: 5px; color: #4f46e5;}.project-card-desc { color: #475569; font-size: 14px; line-height: 1.6; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}.project-card-skills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;}.skill-tag { background: rgba(79, 70, 229, 0.06); color: #4f46e5; padding: 5px 14px; border-radius: 50px; font-size: 12px; font-weight: 600; border: 1px solid rgba(79, 70, 229, 0.1); transition: all 0.2s ease;}.skill-tag:hover { background: #4f46e5; color: #fff;}.project-card-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #f1f5f9; padding-top: 14px;}.project-budget { font-size: 16px; font-weight: 700; color: #10b981;}.project-budget small { font-size: 11px; font-weight: 600; color: #94a3b8; margin-left: 2px;}.project-deadline { font-size: 12.5px; color: #94a3b8; display: flex; align-items: center; gap: 6px;}/* ============================================ Buttons (Dashboard) ============================================ */.btn-primary-sm { background: linear-gradient(135deg, #4f46e5, #6366f1); color: #fff; border: none; padding: 10px 20px; border-radius: 10px; font-weight: 600; font-size: 13px; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25); font-family: inherit; line-height: 1.4;}.btn-primary-sm:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(79, 70, 229, 0.35); color: #fff;}.btn-outline-sm { background: transparent; color: #4f46e5; border: 2px solid #4f46e5; padding: 8px 18px; border-radius: 10px; font-weight: 600; font-size: 13px; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; line-height: 1.4;}.btn-outline-sm:hover { background: #4f46e5; color: #fff;}.btn-success-sm { background: #10b981; color: #fff; border: 2px solid #10b981; padding: 8px 18px; border-radius: 10px; font-weight: 600; font-size: 13px; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; line-height: 1.4;}.btn-success-sm:hover { background: #059669; border-color: #059669; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35); color: #fff;}.btn-danger-sm { background: #ef4444; color: #fff; border: 2px solid #ef4444; padding: 8px 18px; border-radius: 10px; font-weight: 600; font-size: 13px; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; line-height: 1.4;}.btn-danger-sm:hover { background: #dc2626; border-color: #dc2626; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(239, 68, 68, 0.35); color: #fff;}/* ============================================ Filter Bar (Public Marketplace Pages) ============================================ */.filter-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #fff; border: 1px solid rgba(226, 232, 240, 0.8); border-radius: 16px; padding: 16px; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05); margin-bottom: 24px;}.filter-bar input,.filter-bar select { padding: 11px 16px; border: 2px solid #e2e8f0; border-radius: 10px; font-size: 14px; font-family: inherit; background: #f8fafc; color: #0f172a; outline: none; transition: all 0.25s ease;}.filter-bar input { flex: 1; min-width: 180px;}.filter-bar select { min-width: 150px; cursor: pointer;}.filter-bar input:focus,.filter-bar select:focus { border-color: #4f46e5; background: #fff; box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.08);}.filter-bar .btn { white-space: nowrap;}/* ============================================ Public Marketplace Page Sections ============================================ */.market-section { padding: 60px 0; background: #fff;}.market-section-alt { background: #f8fafc;}.market-heading { text-align: center; margin-bottom: 48px;}.market-heading h1 { font-size: 36px; font-weight: 800; color: #0f172a; margin-bottom: 8px; letter-spacing: -0.5px;}.market-heading h1 span { background: linear-gradient(135deg, #4f46e5, #06b6d4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}.market-heading p { color: #64748b; font-size: 16px;}/* Project cards on public pages */.market-section .project-card { box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);}.market-section .project-card:hover { box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);}/* Empty state icon (direct usage) */.empty-state i { font-size: 40px; color: #4f46e5; background: rgba(79, 70, 229, 0.08); width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;}/* ============================================ Profile Page (Public Freelancer Profile) ============================================ */.sidebar-info { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f1f5f9; gap: 12px;}.sidebar-info:last-child { border-bottom: none;}.sidebar-info .label { font-size: 13px; color: #64748b; font-weight: 500; white-space: nowrap;}.sidebar-info .value { font-size: 14px; color: #0f172a; font-weight: 600; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}/* Profile Hero */.profile-page { padding: 40px 0 60px; background: #f8fafc; min-height: 60vh;}.profile-hero { background: radial-gradient(circle at 85% 20%, rgba(79, 70, 229, 0.35) 0%, transparent 45%), radial-gradient(circle at 10% 90%, rgba(6, 182, 212, 0.22) 0%, transparent 40%), linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #1e1b4b 100%); color: #fff; padding: 44px 42px 38px; margin-bottom: 30px; border-radius: 22px; box-shadow: 0 16px 48px rgba(15, 23, 42, 0.22); position: relative; overflow: hidden;}.profile-hero::before { content: ''; position: absolute; top: -70px; right: -70px; width: 320px; height: 320px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 50%; pointer-events: none;}.profile-hero::after { content: ''; position: absolute; top: -30px; right: -30px; width: 240px; height: 240px; border: 1px dashed rgba(255, 255, 255, 0.1); border-radius: 50%; pointer-events: none;}.profile-hero-main { display: flex; gap: 26px; align-items: center; position: relative; z-index: 1; flex-wrap: wrap;}.profile-hero .avatar,.profile-hero .avatar-initials { border: 4px solid rgba(255, 255, 255, 0.25); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35); flex-shrink: 0;}.profile-hero .profile-info { flex: 1; min-width: 220px;}.profile-hero h1 { font-size: 30px; font-weight: 800; margin-bottom: 4px; letter-spacing: -0.5px;}.profile-hero .title { color: #a5b4fc; font-size: 16px; margin-bottom: 6px; font-weight: 500;}.profile-hero .profile-badge { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); color: #d1fae5;}.profile-hero .profile-badge-busy { color: #fde68a; }.profile-hero .profile-badge-unavailable { color: #cbd5e1; }.profile-hero-actions { flex-shrink: 0;}.profile-hero-stats { display: flex; gap: 14px; margin-top: 30px; position: relative; z-index: 1; flex-wrap: wrap;}.profile-hero .stat-chip { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(8px); padding: 14px 24px; border-radius: 14px; min-width: 150px;}.profile-hero .stat-chip h3 { font-size: 21px; font-weight: 800; display: flex; align-items: center; gap: 6px;}.profile-hero .stat-chip p { font-size: 12px; color: #94a3b8; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px;}.profile-content { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; align-items: start;}@media (max-width: 768px) { .profile-content { grid-template-columns: 1fr; } .profile-hero { padding: 32px 24px 28px; } .profile-hero-main { flex-direction: column; text-align: center; } .profile-hero .profile-info { min-width: 0; } .profile-hero-stats { justify-content: center; } .profile-hero .stat-chip { min-width: 120px; padding: 12px 16px; }} /* ============================================ Messages / Chat - Premium VIP Design ============================================ */ /* Hide dash-topbar only on chat pages - handled by inline styles in messages.php */ /* --- Chat Page Wrapper (WhatsApp-style: full screen, no topbar) --- */ .dash-content:has(.chat-page-content), .dash-content.chat-page-content { padding: 0 !important; flex: 1 !important; min-height: 0 !important; overflow: hidden; } .chat-page-content { display: flex; flex-direction: column; height: 100%; overflow: hidden; } .chat-topbar { display: none; } .chat-topbar-title { display: none; } .chat-topbar-actions { display: none; } .chat-page-content .chat-wrapper { flex: 1; min-height: 0; margin: 0; border-radius: 0; overflow: hidden; display: flex; background: transparent; box-shadow: none; } /* --- Sidebar (light) --- */ .chat-page-content .chat-sidebar { width: 360px; min-width: 360px; background: #ffffff; border-right: 1px solid #e2e8f0; display: flex; flex-direction: column; overflow: hidden; border-radius: 0; } .chat-sidebar-header { padding: 20px 20px 16px; border-bottom: 1px solid #e2e8f0; background: #ffffff; } .chat-sidebar-header .chat-sidebar-title { font-size: 22px; font-weight: 800; color: #0f172a; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; letter-spacing: -0.3px; } .chat-sidebar-header .chat-sidebar-title i { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, #6366f1, #8b5cf6); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; box-shadow: 0 4px 12px rgba(99,102,241,0.35); } .chat-search-input { width: 100%; padding: 11px 16px 11px 40px; border: 1px solid #e2e8f0; border-radius: 12px; font-size: 13px; font-family: inherit; background: #f8fafc; color: #0f172a; outline: none; transition: all 0.3s ease; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 12px center; background-size: 18px; } .chat-search-input::placeholder { color: #94a3b8; } .chat-search-input:focus { border-color: #6366f1; background-color: #fff; box-shadow: 0 0 0 3px rgba(99,102,241,0.1); } /* --- Conversation List --- */ .chat-list { flex: 1; overflow-y: auto; padding: 8px 10px; scrollbar-width: thin; scrollbar-color: #e2e8f0 transparent; } .chat-list::-webkit-scrollbar { width: 4px; } .chat-list::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; } .chat-list-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; text-decoration: none; transition: all 0.25s ease; margin-bottom: 2px; position: relative; border: 1px solid transparent; } .chat-list-item:hover { background: #f1f5f9; border-color: #f1f5f9; } .chat-list-item.active { background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.05)); border-color: rgba(99,102,241,0.2); } .chat-list-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 24px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #6366f1, #8b5cf6); } .chat-list-item .avatar-initials, .chat-list-item .avatar { flex-shrink: 0; border: 2px solid #e2e8f0; } .chat-list-item.active .avatar-initials, .chat-list-item.active .avatar { border-color: rgba(99,102,241,0.4); } .chat-info { flex: 1; min-width: 0; } .chat-name { font-weight: 600; font-size: 14px; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-list-item.active .chat-name { color: #4f46e5; } .chat-preview { font-size: 12px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; line-height: 1.4; } .chat-list-item.active .chat-preview { color: #64748b; } .chat-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; } .chat-time { font-size: 11px; color: #94a3b8; white-space: nowrap; flex-shrink: 0; } .chat-list-item.active .chat-time { color: #4f46e5; } .chat-unread-dot { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, #6366f1, #8b5cf6); box-shadow: 0 0 8px rgba(99,102,241,0.5); animation: notifPulse 2s ease-in-out infinite; } @keyframes notifPulse { 0%, 100% { box-shadow: 0 0 8px rgba(99,102,241,0.5); } 50% { box-shadow: 0 0 16px rgba(99,102,241,0.8); } } /* --- Empty state in sidebar --- */ .chat-empty-state { padding: 60px 20px; text-align: center; color: #94a3b8; } .chat-empty-state i { font-size: 40px; margin-bottom: 14px; display: block; opacity: 0.3; } .chat-empty-state p { font-size: 13px; color: #94a3b8; } /* --- Chat Main Area (WhatsApp flex column) --- */ .chat-page-content .chat-main { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; min-width: 0; background: #f8fafc; border-radius: 0; box-shadow: none; } /* --- Chat Header (fixed at top, never scrolls) --- */ .chat-page-content .chat-header { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid #e2e8f0; background: #fff; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.03); } .chat-page-content .chat-header .avatar-initials, .chat-page-content .chat-header .avatar { border: 2px solid #e2e8f0; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .chat-page-content .chat-header h3 { font-size: 16px; color: #0f172a; font-weight: 700; margin: 0; } .chat-page-content .chat-header small { color: #64748b; font-size: 12px; display: flex; align-items: center; gap: 6px; } /* --- Messages Area (scrollable between header & input) --- */ .chat-page-content .chat-messages { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px; background: linear-gradient(180deg, #f1f5f9 0%, #f8fafc 100%); display: flex; flex-direction: column; gap: 6px; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; -webkit-overflow-scrolling: touch; } .chat-page-content .chat-messages::-webkit-scrollbar { width: 5px; } .chat-page-content .chat-messages::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 5px; } /* --- Message Bubbles --- */ .chat-msg { max-width: 60%; padding: 12px 18px; border-radius: 20px; font-size: 14px; line-height: 1.55; position: relative; word-wrap: break-word; animation: msgIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes msgIn { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .chat-msg small { display: block; font-size: 10.5px; margin-top: 6px; opacity: 0.55; font-weight: 500; } .chat-msg.sent { background: linear-gradient(135deg, #4f46e5, #6366f1); color: #fff; align-self: flex-end; border-bottom-right-radius: 6px; box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25); } .chat-msg.sent small { color: rgba(255,255,255,0.6); } .chat-msg.received { background: #fff; color: #1e293b; border: 1px solid #e2e8f0; align-self: flex-start; border-bottom-left-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); } .chat-msg.received small { color: #94a3b8; } /* --- Chat Input Bar (fixed at bottom, never scrolls) --- */ .chat-page-content .chat-input { display: flex; gap: 10px; padding: 12px 20px; border-top: 1px solid #e2e8f0; background: #fff; align-items: center; flex-shrink: 0; } .chat-page-content .chat-input input[type="text"] { flex: 1; padding: 13px 20px; border: 2px solid #e2e8f0; border-radius: 16px; font-size: 14px; font-family: inherit; background: #f8fafc; color: #0f172a; outline: none; transition: all 0.3s ease; } .chat-page-content .chat-input input[type="text"]::placeholder { color: #94a3b8; } .chat-page-content .chat-input input[type="text"]:focus { border-color: #6366f1; background: #fff; box-shadow: 0 0 0 4px rgba(99,102,241,0.08); } .chat-attach-btn { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: #f1f5f9; color: #64748b; cursor: pointer; transition: all 0.25s ease; flex-shrink: 0; font-size: 17px; border: 1px solid #e2e8f0; } .chat-attach-btn:hover { background: #eef2ff; color: #4f46e5; border-color: #c7d2fe; transform: scale(1.05); } .chat-page-content .chat-input button { width: auto; min-width: 50px; height: 46px; padding: 0 24px; border-radius: 14px; font-size: 14px; font-weight: 700; background: linear-gradient(135deg, #4f46e5, #6366f1); border: none; color: #fff; cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 4px 14px rgba(79,70,229,0.3); } .chat-page-content .chat-input button:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(79,70,229,0.4); } /* --- Attachment Chips --- */ .chat-attachment { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.2); border-radius: 10px; padding: 8px 14px; margin-top: 8px; font-size: 12px; color: inherit; text-decoration: none; backdrop-filter: blur(10px); transition: background 0.2s; } .chat-attachment:hover { background: rgba(255,255,255,0.35); } /* --- Empty State (no conversation selected) --- */ .chat-page-content .chat-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #94a3b8; gap: 12px; background: linear-gradient(135deg, #f8fafc, #f1f5f9); } .chat-empty-icon { width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(135deg, #eef2ff, #e0e7ff); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; box-shadow: 0 8px 30px rgba(99,102,241,0.12); } .chat-empty-icon i { font-size: 36px; color: #6366f1; opacity: 0.7; } .chat-page-content .chat-empty h3 { font-size: 20px; color: #1e293b; font-weight: 800; letter-spacing: -0.3px; } .chat-page-content .chat-empty p { font-size: 14px; color: #94a3b8; max-width: 280px; text-align: center; line-height: 1.5; } /* --- Date Separator --- */ .chat-date-sep { text-align: center; padding: 12px 0; position: relative; } .chat-date-sep span { background: #e2e8f0; color: #64748b; font-size: 11px; font-weight: 600; padding: 4px 14px; border-radius: 20px; letter-spacing: 0.3px; } /* ============================================ Chat Responsive — Mobile First ============================================ */ /* --- Mobile Sidebar Toggle --- */ .chat-back-btn { display: none; width: 36px; height: 36px; border-radius: 10px; border: 1px solid #e2e8f0; background: #fff; cursor: pointer; align-items: center; justify-content: center; font-size: 14px; color: #4f46e5; flex-shrink: 0; transition: all 0.2s; } .chat-back-btn:hover { background: #eef2ff; } /* --- Voice Message Bubble --- */ .chat-msg-voice { display: flex; align-items: center; gap: 10px; padding: 4px 0; } .chat-msg-voice audio { max-width: 220px; height: 36px; border-radius: 20px; } .chat-msg-voice .voice-duration { font-size: 12px; opacity: 0.6; font-weight: 500; } /* --- Typing Indicator --- */ .typing-indicator { padding: 6px 20px; font-size: 12px; color: #94a3b8; font-style: italic; display: none; align-items: center; gap: 6px; flex-shrink: 0; } .typing-indicator.active { display: flex; } .typing-indicator .dots { display: flex; gap: 3px; } .typing-indicator .dots span { width: 5px; height: 5px; border-radius: 50%; background: #94a3b8; animation: typingDot 1.4s infinite; } .typing-indicator .dots span:nth-child(2) { animation-delay: 0.2s; } .typing-indicator .dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes typingDot { 0%,60%,100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } /* --- Online Status Dots --- */ .online-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px; flex-shrink: 0; } .online-dot.online { background: #10b981; box-shadow: 0 0 6px rgba(16,185,129,0.5); } .online-dot.offline { background: #cbd5e1; } /* --- Call Buttons in Header --- */ .call-btn { width: 38px; height: 38px; border-radius: 12px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: all 0.25s ease; } .call-btn:hover { transform: scale(1.08); } .call-btn.voice { background: linear-gradient(135deg, #10b981, #059669); color: #fff; box-shadow: 0 4px 12px rgba(16,185,129,0.3); } .call-btn.video { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; box-shadow: 0 4px 12px rgba(59,130,246,0.3); } /* --- Voice Record Button --- */ .record-btn { width: 42px; height: 42px; border-radius: 50%; border: 2px solid #e2e8f0; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #6366f1; transition: all 0.25s ease; flex-shrink: 0; } .record-btn:hover { border-color: #6366f1; background: #eef2ff; } .record-btn.recording { background: #ef4444; color: #fff; border-color: #ef4444; animation: recPulse 1s infinite; } @keyframes recPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); } 50% { box-shadow: 0 0 0 10px rgba(239,68,68,0); } } /* ============================================ Incoming Call Overlay ============================================ */ .incoming-call-overlay { display: none; position: fixed; inset: 0; background: linear-gradient(180deg, rgba(15,23,42,0.95), rgba(30,41,59,0.98)); z-index: 99999; flex-direction: column; align-items: center; justify-content: center; color: #fff; backdrop-filter: blur(20px); } .incoming-call-overlay.active { display: flex; } .incoming-call-overlay .caller-avatar { width: 110px; height: 110px; border-radius: 50%; margin-bottom: 20px; border: 3px solid rgba(255,255,255,0.2); animation: ringPulse 2s infinite; } @keyframes ringPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(99,102,241,0.4); } 50% { box-shadow: 0 0 0 20px rgba(99,102,241,0); } } .incoming-call-overlay .caller-name { font-size: 26px; font-weight: 800; margin-bottom: 6px; font-family: 'Poppins', sans-serif; } .incoming-call-overlay .call-type-text { font-size: 14px; color: rgba(255,255,255,0.6); margin-bottom: 40px; } .incoming-call-overlay .incoming-actions { display: flex; gap: 40px; } .incoming-call-overlay .call-action-btn { width: 68px; height: 68px; border-radius: 50%; border: none; cursor: pointer; font-size: 24px; display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; color: #fff; } .incoming-call-overlay .btn-decline { background: linear-gradient(135deg, #ef4444, #dc2626); box-shadow: 0 8px 24px rgba(239,68,68,0.4); } .incoming-call-overlay .btn-accept { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 8px 24px rgba(16,185,129,0.4); animation: acceptBounce 1.5s infinite; } @keyframes acceptBounce { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } } .incoming-call-overlay .call-action-btn:hover { transform: scale(1.1); } /* ============================================ Active Call Overlay ============================================ */ .call-overlay { display: none; position: fixed; inset: 0; background: linear-gradient(180deg, #0f172a, #1e293b); z-index: 99999; flex-direction: column; align-items: center; justify-content: center; color: #fff; } .call-overlay.active { display: flex; } .call-overlay .caller-name { font-size: 22px; font-weight: 800; margin-bottom: 6px; font-family: 'Poppins', sans-serif; } .call-overlay .call-status { font-size: 14px; color: rgba(255,255,255,0.5); margin-bottom: 10px; } .call-overlay .call-timer { font-size: 20px; font-family: 'Courier New', monospace; font-weight: 700; color: #10b981; margin-bottom: 20px; letter-spacing: 2px; } .call-video-container { position: relative; width: 90%; max-width: 800px; height: 60vh; background: #0f172a; border-radius: 20px; overflow: hidden; margin-bottom: 24px; border: 2px solid rgba(255,255,255,0.1); } .call-video-container video { width: 100%; height: 100%; object-fit: cover; } .call-video-container .local-video { position: absolute; bottom: 16px; right: 16px; width: 140px; height: 105px; border-radius: 14px; object-fit: cover; border: 2px solid rgba(255,255,255,0.3); z-index: 2; } .call-overlay .call-actions { display: flex; gap: 16px; margin-top: 10px; } .call-overlay .call-action-btn { width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; color: #fff; background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); } .call-overlay .call-action-btn:hover { background: rgba(255,255,255,0.2); transform: scale(1.08); } .call-overlay .btn-end { background: linear-gradient(135deg, #ef4444, #dc2626); width: 64px; height: 64px; font-size: 22px; box-shadow: 0 8px 24px rgba(239,68,68,0.4); } .call-overlay .btn-end:hover { transform: scale(1.1); } .call-overlay .btn-mute.muted, .call-overlay .btn-camera.off { background: rgba(239,68,68,0.3); } .call-overlay .btn-screen.sharing { background: rgba(16,185,129,0.3); } /* ============================================ Mobile Responsive — All Breakpoints ============================================ */ @media (max-width: 1024px) { .dash-sidebar { width: 240px; min-width: 240px; } .chat-page-content .chat-sidebar { width: 300px; min-width: 300px; } } @media (max-width: 768px) { /* Main content — remove sidebar offset, prevent horizontal overflow */ .dash-main { margin-left: 0 !important; width: 100% !important; max-width: 100vw !important; overflow-x: hidden; } .dash-layout { overflow-x: hidden; } .dash-layout { overflow-x: hidden; } /* Sidebar becomes overlay */ .dash-sidebar { transform: translateX(-100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); z-index: 9999; } .dash-sidebar.active { transform: translateX(0) !important; left: 0 !important; } .sidebar-toggle { display: flex !important; position: static !important; width: 40px; height: 40px; min-width: 40px; border-radius: 12px; background: linear-gradient(135deg, #4f46e5, #6366f1); border: none; align-items: center; justify-content: center; cursor: pointer; font-size: 17px; color: #fff; flex-shrink: 0; box-shadow: 0 4px 14px rgba(79,70,229,0.3); transition: all 0.25s ease; } .sidebar-toggle:hover { transform: scale(1.05); box-shadow: 0 6px 18px rgba(79,70,229,0.4); } .sidebar-close { display: flex !important; } /* Let the dashboard topbar participate in layout on mobile so it does not overlap content */ .dash-topbar { position: relative; left: auto; right: auto; top: auto; height: auto; padding: 12px 0 10px; z-index: 1001; } .dash-topbar-inner { flex-wrap: nowrap; align-items: center; gap: 10px; padding: 0 16px; } .dash-topbar-actions { width: auto; margin-left: auto; justify-content: flex-end; gap: 8px; flex-shrink: 0; } .dash-topbar-icon { height: 38px; padding: 0 12px; border-radius: 10px; font-size: 12px; } .dash-topbar-search { display: none; } .dash-content { padding: 16px 16px 24px !important; } .dash-content.chat-page-content { padding: 0 !important; } /* Chat topbar - only show when conversation active */ .chat-topbar.chat-topbar-active { display: flex !important; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; border-bottom: 1px solid #e2e8f0; min-height: 50px; } .chat-topbar.chat-topbar-active .chat-topbar-title { display: flex !important; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: #0f172a; } .chat-sidebar-toggle { width: 38px; height: 38px; border-radius: 10px; background: #f1f5f9; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; color: #0f172a; flex-shrink: 0; } /* Sidebar overlay backdrop */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9998; backdrop-filter: blur(4px); } .sidebar-overlay.active { display: block; } /* Chat layout - stack vertically */ .chat-page-content { height: 100%; margin-top: 0; } .chat-page-content .chat-wrapper { flex-direction: column; position: relative; } .chat-page-content .chat-sidebar { width: 100%; min-width: 100%; position: absolute; inset: 0; z-index: 50; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .chat-page-content .chat-sidebar.hidden-mobile { transform: translateX(-100%); pointer-events: none; } .chat-page-content .chat-main { width: 100%; } .chat-back-btn { display: flex; } /* Chat elements mobile sizing */ .chat-msg { max-width: 88%; font-size: 13.5px; padding: 10px 14px; } .chat-page-content .chat-messages { padding: 14px; gap: 4px; } .chat-page-content .chat-input { padding: 10px 14px; gap: 8px; flex-wrap: nowrap; } .chat-page-content .chat-input input[type="text"] { padding: 10px 14px; font-size: 13px; border-radius: 12px; } .chat-page-content .chat-header { padding: 10px 14px; gap: 10px; } .chat-page-content .chat-header h3 { font-size: 14px; } .chat-page-content .chat-header small { font-size: 11px; } /* Dashboard cards and grids stack cleanly on smaller screens */ .dash-header { flex-direction: column; align-items: stretch !important; gap: 12px; padding: 16px !important; margin-bottom: 18px; } .dash-header h1 { font-size: 20px; line-height: 1.25; } .dash-header p { font-size: 13px; } .admin-dash-page .dash-header > div:last-child .btn, .admin-dash-page .dash-header > div:last-child .btn-outline-sm { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; } .dash-header .btn, .dash-header .btn-outline-sm { width: 100%; justify-content: center; } .quick-actions { flex-direction: column !important; gap: 10px !important; } .quick-action { width: 100% !important; flex: none !important; justify-content: center; padding: 12px 14px; font-size: 13px; } .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; } .stat-card { padding: 16px; gap: 12px; } .stat-card-icon { width: 42px; height: 42px; font-size: 16px; border-radius: 10px; } .stat-card-info h3 { font-size: 20px; } .content-card { border-radius: 14px; } .content-card-header { flex-direction: column; align-items: stretch !important; gap: 10px; padding: 14px 16px !important; } .content-card-header h2 { font-size: 16px; } .content-card-body { padding: 14px 16px !important; } .content-card-header .btn-outline-sm, .content-card-header .btn-primary-sm { width: 100%; justify-content: center; } .dash-two-col, .dash-three-col, .admin-grid-2, .admin-grid-3, .settings-grid, .dispute-meta-grid, .partial-split-form { grid-template-columns: 1fr !important; } .filter-bar { flex-direction: column; align-items: stretch; gap: 10px; } .filter-bar input, .filter-bar select, .filter-bar .btn { width: 100%; } .project-card { padding: 18px !important; } .project-card-header, .project-card-footer { flex-direction: column; align-items: flex-start !important; } .project-card-meta { gap: 10px; } .mini-row { padding: 10px 12px; gap: 10px; } .mini-row .mini-body strong, .mini-row .mini-body span { white-space: normal; } /* Admin shell: keep action buttons compact and readable */ .admin-dash-page .dash-header > div:last-child { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; width: 100%; } .admin-dash-page .dash-header .btn, .admin-dash-page .dash-header .btn-outline-sm { width: auto !important; min-height: 40px; padding-top: 0 !important; padding-bottom: 0 !important; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; } .admin-dash-page .dash-header > div:first-child { min-width: 0; } .admin-dash-page .dash-header > div:last-child .btn, .admin-dash-page .dash-header > div:last-child .btn-outline-sm { flex: 0 0 auto; } .admin-users-page .filter-bar { align-items: stretch; gap: 10px; } .admin-users-page .filter-bar input, .admin-users-page .filter-bar select { min-width: 0; flex: 1 1 180px; } .admin-users-page .filter-bar .btn, .admin-users-page .filter-bar a { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; } .admin-users-page .user-actions { display: flex; gap: 6px; flex-wrap: wrap; } .admin-users-page .users-table-wrap { max-width: 100%; } .admin-users-page .dash-table { display: table; width: auto; min-width: 900px; white-space: nowrap; } .admin-users-page .dash-table th, .admin-users-page .dash-table td { white-space: nowrap; } .admin-users-page .dash-table td:first-child { min-width: 240px; } .admin-users-page .dash-table td:nth-child(2) { min-width: 100px; } .admin-users-page .dash-table td:nth-child(3) { min-width: 100px; } .admin-users-page .dash-table td:nth-child(4) { min-width: 140px; } .admin-users-page .dash-table td:nth-child(5) { min-width: 110px; } .admin-users-page .dash-table td:nth-child(6) { min-width: 200px; } .admin-users-page .dash-table td:first-child .avatar, .admin-users-page .dash-table td:first-child .avatar-initials { width: 38px !important; height: 38px !important; min-width: 38px !important; flex-shrink: 0 !important; } /* Chat input buttons */ .chat-page-content .chat-input button[type="submit"] { padding: 0 16px; height: 40px; font-size: 13px; border-radius: 12px; } .record-btn { width: 38px; height: 38px; font-size: 14px; } .chat-attach-btn { width: 38px; height: 38px; font-size: 14px; border-radius: 10px; } /* Call buttons in header */ .call-btn { width: 34px; height: 34px; font-size: 13px; border-radius: 10px; } /* Voice audio player */ .chat-msg-voice audio { max-width: 180px; height: 32px; } /* Call overlay mobile */ .call-video-container { height: 50vh; border-radius: 14px; width: 95%; } .call-video-container .local-video { width: 100px; height: 75px; bottom: 10px; right: 10px; } .call-overlay .call-action-btn { width: 50px; height: 50px; font-size: 16px; } .call-overlay .btn-end { width: 58px; height: 58px; font-size: 20px; } .call-overlay .caller-name { font-size: 18px; } .call-overlay .call-timer { font-size: 16px; } /* Incoming call mobile */ .incoming-call-overlay .caller-avatar { width: 90px; height: 90px; } .incoming-call-overlay .caller-name { font-size: 22px; } .incoming-call-overlay .call-action-btn { width: 60px; height: 60px; font-size: 20px; } /* ===== Inline Grid Overrides (override inline style grid-template-columns) ===== */ .dash-two-col, .dash-three-col, .admin-grid-2, .admin-grid-3, .admin-grid-4, .settings-grid, .dispute-meta-grid, .partial-split-form, .report-grid { grid-template-columns: 1fr !important; gap: 16px !important; } /* Tables scroll horizontally - min-width ensures all columns visible */ .dash-table { min-width: 900px; } .dash-table .avatar, .dash-table .avatar-initials { flex-shrink: 0 !important; } .content-card-body { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ===== Button Mobile Rules ===== */ .btn { padding: 10px 16px; font-size: 13px; white-space: nowrap; } .btn-primary { width: 100%; justify-content: center; } /* ===== Form Mobile Rules ===== */ .form-input { padding: 11px 14px; font-size: 14px; } .form-label { font-size: 12px; } /* ===== Flex Container Wrap Rules ===== */ .dash-header > div:last-child, .content-card-header > div:last-child { flex-wrap: wrap; gap: 8px; } } @media (max-width: 480px) { .dash-content { padding: 14px 12px 20px !important; } .dash-topbar-inner { padding: 0 12px; flex-wrap: nowrap; } .dash-topbar-actions { justify-content: flex-end; flex-wrap: nowrap; } .dash-topbar-icon { flex: 1 1 0; min-width: 0; justify-content: center; } .chat-msg { max-width: 92%; padding: 9px 12px; font-size: 13px; } .chat-page-content .chat-messages { padding: 10px; } .chat-page-content .chat-input { padding: 8px 10px; gap: 6px; } .chat-page-content .chat-input input[type="text"] { padding: 9px 12px; font-size: 12.5px; } .chat-page-content .chat-input button[type="submit"] { padding: 0 12px; height: 38px; font-size: 12px; } .record-btn { width: 36px; height: 36px; font-size: 13px; } .chat-attach-btn { width: 36px; height: 36px; font-size: 13px; } .call-btn { width: 32px; height: 32px; font-size: 12px; } .chat-msg-voice audio { max-width: 160px; height: 30px; } .dash-header { padding: 14px; } .dash-header h1 { font-size: 18px; } .stats-grid { grid-template-columns: 1fr !important; } .stat-card { padding: 14px; align-items: center; } .quick-action { justify-content: flex-start; } .content-card-header, .content-card-body { padding-left: 14px; padding-right: 14px; } .admin-dash-page .dash-header > div:last-child { justify-content: flex-start; } .admin-dash-page .dash-header .btn, .admin-dash-page .dash-header .btn-outline-sm { padding-left: 12px; padding-right: 12px; font-size: 13px; } .admin-users-page .filter-bar .btn, .admin-users-page .filter-bar a { width: 100%; } .admin-users-page .dash-table, .admin-users-page .users-table-wrap { overflow-x: auto; } .admin-users-page .dash-table { min-width: 900px; } /* Sidebar full width on very small */ .chat-page-content .chat-sidebar { width: 100%; min-width: 100%; } } /* ============================================ Admin / Dashboard Mobile Rules ============================================ */ @media (max-width: 768px) { /* Filter bar - stack on mobile */ .filter-bar { flex-direction: column; gap: 10px; } .filter-bar input[type="search"], .filter-bar select { width: 100%; } .filter-bar .btn { width: 100%; justify-content: center; } /* Admin grids - 1 column on mobile */ .admin-grid-2, .admin-grid-3 { grid-template-columns: 1fr !important; } /* Settings grid */ .settings-grid { grid-template-columns: 1fr !important; } /* Dispute meta grid */ .dispute-meta-grid { grid-template-columns: 1fr !important; } /* Stats grid - 2 cols on mobile */ .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } /* Content card */ .content-card { border-radius: 14px; } .content-card-header { padding: 14px 16px; } .content-card-body { padding: 14px 16px; overflow-x: auto; } /* Dash table - horizontal scroll */ .dash-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } .dash-table .avatar, .dash-table .avatar-initials { width: 38px !important; height: 38px !important; min-width: 38px !important; flex-shrink: 0 !important; } /* Dash header */ .dash-header { padding: 16px; } .dash-header h1 { font-size: 20px; } /* Stat cards */ .stat-card { padding: 16px; gap: 12px; } .stat-card-icon { width: 42px; height: 42px; font-size: 16px; border-radius: 10px; } .stat-card-info h3 { font-size: 20px; } /* Sidebar info (order detail) */ .sidebar-info { display: grid; grid-template-columns: 1fr; gap: 12px; } /* Partial split form */ .partial-split-form { grid-template-columns: 1fr; } /* Empty state */ .empty-state { padding: 40px 16px !important; } .empty-state i { font-size: 36px; } .empty-state h3 { font-size: 18px; } /* Buttons */ .btn-outline-sm { white-space: nowrap; } /* Notifications page */ .notification-item { padding: 12px 14px; } .notification-item .notif-text { font-size: 13px; } /* Logs page */ .log-entry { padding: 10px 14px; } /* Pagination */ .pagination { flex-wrap: wrap; gap: 4px; } .pagination a, .pagination span { min-width: 36px; height: 36px; font-size: 13px; } } /* ============================================ Client / Freelancer Mobile Rules (768px) ============================================ */ @media (max-width: 768px) { /* ---- Dashboard Layout ---- */ .dash-two-col { grid-template-columns: 1fr !important; } .dash-three-col { grid-template-columns: 1fr !important; } /* ---- Quick Actions ---- */ .quick-actions { flex-wrap: wrap; gap: 8px; } .quick-action { flex: 1 1 calc(50% - 4px); min-width: 0; padding: 10px 12px; font-size: 12px; text-align: center; } .quick-action i { display: block; margin-bottom: 4px; } /* ---- Mini Row (dashboard lists) ---- */ .mini-row { padding: 10px 12px; gap: 10px; } .mini-row .ms-icon { width: 34px; height: 34px; min-width: 34px; font-size: 14px; } .mini-row .mini-body { font-size: 12.5px; min-width: 0; } .mini-row .mini-time { font-size: 11px; } /* ---- Completion Bar ---- */ .completion-bar { gap: 6px; } .completion-check { font-size: 12px; padding: 6px 0; } /* ---- Project Card ---- */ .project-card { padding: 16px; } .project-card-header { flex-direction: column; align-items: flex-start; gap: 6px; } .project-card-meta { flex-wrap: wrap; gap: 4px 10px; font-size: 12px; } .project-card-desc { font-size: 13px; line-height: 1.5; -webkit-line-clamp: 3; } .project-card-skills { flex-wrap: wrap; gap: 4px; } .skill-tag { font-size: 11px; padding: 3px 8px; } .project-card-footer { flex-direction: column; align-items: flex-start; gap: 10px; } .project-budget { font-size: 16px; } /* ---- Offer Card (Client) ---- */ .coffer-card { padding: 16px; } .coffer-main { flex-direction: column; gap: 12px; } .coffer-avatar { width: 100%; display: flex; align-items: center; gap: 12px; } .coffer-avatar img { width: 44px; height: 44px; } .coffer-meta { flex-wrap: wrap; gap: 6px; } .coffer-actions { flex-direction: column; gap: 8px; } .coffer-actions .btn { width: 100%; justify-content: center; } /* ---- Offer Card (Freelancer) ---- */ .offer-card { padding: 16px; } .offer-main { flex-direction: column; gap: 12px; } .offer-avatar { width: 100%; display: flex; align-items: center; gap: 12px; } .offer-avatar img { width: 44px; height: 44px; } .offer-meta { flex-wrap: wrap; gap: 6px; } .offer-actions { flex-direction: column; gap: 8px; } .offer-actions .btn { width: 100%; justify-content: center; } /* ---- Favorites / Saved ---- */ .fav-list { gap: 12px; } .fav-card { flex-direction: column; gap: 12px; padding: 14px; } .fav-avatar { width: 100%; display: flex; align-items: center; gap: 12px; } .fav-avatar img { width: 44px; height: 44px; } .fav-info { flex: 1; } .fav-meta { flex-wrap: wrap; gap: 4px 10px; font-size: 12px; } .fav-skills { flex-wrap: wrap; gap: 4px; } .fav-actions { flex-direction: row; gap: 8px; } .fav-actions .btn { flex: 1; } /* ---- Portfolio Grid ---- */ .portfolio-grid { grid-template-columns: 1fr !important; } .portfolio-item-img { height: 180px; } /* ---- Profile Hero ---- */ .profile-hero-main { flex-direction: column; text-align: center; gap: 14px; } .profile-hero-main img { margin: 0 auto; } .profile-info { text-align: center; } /* ---- Skills List / Skill Row ---- */ .skills-list { grid-template-columns: 1fr !important; } .skill-row { padding: 8px 10px; gap: 8px; } .section-tab { font-size: 12px; padding: 8px 12px; } /* ---- Education Items ---- */ .edu-item { padding: 12px; flex-direction: column; gap: 8px; } /* ---- Form Row ---- */ .form-row { grid-template-columns: 1fr !important; } /* ---- Settings Section ---- */ .settings-section { padding: 14px 0; } /* ---- Toggle Row ---- */ .toggle-row { padding: 10px 0; gap: 10px; } /* ---- Avatar Upload ---- */ .avatar-upload { flex-direction: column; align-items: center; gap: 12px; } .current-avatar { width: 80px; height: 80px; } /* ---- Star Rating Input ---- */ .star-rating-input { gap: 6px; } .star-btn { width: 34px; height: 34px; font-size: 16px; } /* ---- Review Form Card ---- */ .review-form-card { padding: 16px; } /* ---- Earnings / Charts ---- */ .earnings-chart { gap: 6px; align-items: flex-end; } .chart-col { flex: 1; min-width: 0; } .chart-value { font-size: 10px; } .chart-bar { min-height: 4px; } .chart-label { font-size: 10px; } /* ---- Rating Summary ---- */ .rating-summary { flex-direction: column; align-items: center; gap: 16px; } .rating-avg { font-size: 36px; } .rating-bar { width: 100%; } /* ---- Invoice ---- */ .invoice-sheet { padding: 16px; border-radius: 12px; } .invoice-head { flex-direction: column; gap: 10px; } .invoice-meta { font-size: 13px; } /* ---- Orders Split Layout ---- */ .partial-split-form { grid-template-columns: 1fr; } /* ---- Dashboard Sidebar Info ---- */ .sidebar-info { grid-template-columns: 1fr; } /* ---- Alerts ---- */ .alert { padding: 12px 14px; font-size: 13px; gap: 8px; } /* ---- Buttons ---- */ .btn-success-sm { padding: 6px 14px; font-size: 12px; } .btn-danger-sm { padding: 6px 14px; font-size: 12px; } .icon-btn { width: 36px; height: 36px; font-size: 14px; } /* ---- Browse-Jobs Sidebar (if any) ---- */ .pm-filter { flex-direction: column; gap: 10px; } .pm-field, .pm-field.pm-field-sm { min-width: 100%; flex: 1; } .pm-rate-wrap { min-width: 100%; } .pm-rate-wrap .pm-field { flex: 1; } .pm-btn { width: 100%; justify-content: center; } .pm-grid { grid-template-columns: 1fr !important; } .pm-hero h1 { font-size: 26px; } .pm-hero-stats { flex-direction: column; gap: 10px; } .pm-hero-stat { padding: 8px 0; } .pm-hero-stat + .pm-hero-stat { border-left: none; border-top: 1px solid rgba(255,255,255,.12); } .pm-toolbar { flex-direction: column; align-items: flex-start; } .pm-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; } /* ---- Profile Hero Padding (inline override) ---- */ [style*="padding: 32px"][class*="profile-hero"], .profile-hero-main[style*="padding: 32px"] { padding: 20px 16px !important; } /* ---- Content Card Body with Tables (padding:0 inline) ---- */ .content-card-body[style*="padding: 0"], .content-card-body[style*="padding:0"] { padding: 0 !important; } .content-card-body[style*="padding: 0"] .dash-table, .content-card-body[style*="padding:0"] .dash-table { margin: 0; } /* ---- Milestone Items ---- */ .milestone-item { min-width: 0 !important; } .milestone-item > div[style*="min-width: 180px"] { min-width: 0 !important; flex: 1 1 100% !important; } /* ---- Flex Rows - add wrapping ---- */ .disputes-card > div:first-child, .disputes-card > div[style*="display:flex"][style*="justify-content:space-between"] { flex-wrap: wrap; } /* ---- Review Items ---- */ .order-review-item { flex-wrap: wrap; gap: 10px; } .rating-bar-container, div[style*="min-width:250px"] { min-width: 0 !important; flex: 1 1 100% !important; } /* ---- Invoice Button Row ---- */ .invoice-head + div[style*="display:flex"], div[style*="display:flex;gap:10px;"][style*="justify-content:space-between"] { flex-wrap: wrap; } /* ---- Freelancer Profile Avatar Row ---- */ div[style*="display: flex; gap: 30px; margin-bottom: 24px"] { flex-direction: column !important; gap: 16px !important; align-items: center !important; } div[style*="display: flex; gap: 30px; margin-bottom: 24px"] > div:first-child { width: 80px !important; height: 80px !important; } /* ---- Proposals Comparison Table ---- */ div[style*="overflow-x:auto"] table[style*="min-width:170px"] th, div[style*="overflow-x:auto"] table th[style*="min-width:170px"] { min-width: 120px !important; } /* ---- Call History Page (local styles override) ---- */ .call-history-page { padding: 14px !important; } .ch-header h2 { font-size: 20px !important; } /* ---- Co-ffer / Offer Message ---- */ .coffer-message, .offer-message { flex-direction: column; gap: 8px; } } /* ============================================ Client / Freelancer Extra-Small (480px) ============================================ */ @media (max-width: 480px) { .quick-action { flex: 1 1 100%; } .fav-card { padding: 12px; } .offer-card, .coffer-card { padding: 12px; } .project-card { padding: 12px; } .portfolio-grid { grid-template-columns: 1fr; } .pm-hero h1 { font-size: 22px; } /* ---- Extra-small tables: scroll horizontal ---- */ .dash-table { min-width: 900px; } /* ---- Invoice sheet ---- */ .invoice-sheet { padding: 12px; } /* ---- Modal boxes ---- */ .modal-box { margin: 10px; max-width: calc(100vw - 20px) !important; } /* ---- Profile hero even tighter ---- */ .profile-hero-main[style*="padding: 32px"] { padding: 16px 12px !important; } /* ---- Quick action icons bigger touch target ---- */ .quick-action { padding: 14px 10px; min-height: 56px; } } /* ============================================ Missing Button Classes ============================================ */ .btn-success { background: #10b981; color: #fff; border: 2px solid #10b981; padding: 10px 20px; border-radius: 10px; font-weight: 600; font-size: 13px; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; line-height: 1.4; } .btn-success:hover { background: #059669; border-color: #059669; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35); color: #fff; } .btn-warning-sm { background: #f59e0b; color: #fff; border: 2px solid #f59e0b; padding: 8px 18px; border-radius: 10px; font-weight: 600; font-size: 13px; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; line-height: 1.4; } .btn-warning-sm:hover { background: #d97706; border-color: #d97706; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(245, 158, 11, 0.35); color: #fff; } .btn-warning { background: #f59e0b; color: #fff; border: 2px solid #f59e0b; padding: 10px 20px; border-radius: 10px; font-weight: 600; font-size: 13px; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; line-height: 1.4; } .btn-warning:hover { background: #d97706; border-color: #d97706; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(245, 158, 11, 0.35); color: #fff; } /* ============================================ Pagination ============================================ */.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 24px;}.pagination a,.pagination span { min-width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: #64748b; background: #fff; border: 1px solid #e2e8f0; transition: all 0.25s ease; text-decoration: none;}.pagination a:hover { background: rgba(79, 70, 229, 0.06); color: #4f46e5; border-color: #4f46e5;}.pagination .active { background: linear-gradient(135deg, #4f46e5, #6366f1); color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3);}.pagination .page-ellipsis { border: none; background: transparent; min-width: 24px; cursor: default;}/* ============================================ Form Styles (Dashboard) ============================================ */.form-input { width: 100%; padding: 13px 18px; border: 2px solid #e2e8f0; border-radius: 12px; font-size: 14px; font-family: inherit; background: #f8fafc; color: #0f172a; transition: all 0.3s ease;}.form-input:focus { outline: none; border-color: #4f46e5; background: #fff; box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.08);}.form-label { display: block; font-weight: 600; font-size: 13px; color: #334155; margin-bottom: 6px;}/* ============================================ Alerts Messages ============================================ */.alert { padding: 16px 20px; border-radius: 12px; font-size: 14px; font-weight: 500; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; border: 1px solid transparent;}.alert-success { background: #ecfdf5; color: #065f46; border-color: #a7f3d0;}.alert-error { background: #fef2f2; color: #991b1b; border-color: #fecaca;}.alert-info { background: #eff6ff; color: #1e40af; border-color: #bfdbfe;}.alert-warning { background: #fffbeb; color: #92400e; border-color: #fde68a;}.alert i { font-size: 18px;}/* ============================================ Empty States ============================================ */.empty-state { text-align: center; padding: 60px 20px;}.empty-state-icon { width: 80px; height: 80px; background: rgba(79, 70, 229, 0.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 32px; color: #4f46e5;}.empty-state h3 { font-size: 20px; color: #0f172a; font-weight: 700; margin-bottom: 8px;}.empty-state p { color: #64748b; font-size: 14px; margin-bottom: 20px;}/* ============================================ Reviews / Ratings ============================================ */.review-item { background: #f8fafc; border-radius: 14px; padding: 20px; margin-bottom: 16px; border: 1px solid #e2e8f0; transition: all 0.3s ease;}.review-item:hover { box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); border-color: rgba(79, 70, 229, 0.15);}.review-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;}.review-item-header h4 { font-size: 15px; color: #0f172a; font-weight: 700;}.review-item-header .stars { color: #f59e0b; font-size: 14px;}.review-item p { color: #475569; font-size: 14px; line-height: 1.6;}/* ============================================ Sidebar Toggle (Mobile) ============================================ */.sidebar-toggle { display: none; position: fixed; top: 16px; left: 12px; z-index: 1100; width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, #4f46e5, #6366f1); color: #fff; border: none; cursor: pointer; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 6px 20px rgba(79, 70, 229, 0.3); transition: all 0.3s ease;}.sidebar-toggle:hover { transform: scale(1.05); box-shadow: 0 8px 24px rgba(79, 70, 229, 0.4);}/* ============================================ Responsive ============================================ */@media (max-width: 1024px) { .dash-sidebar { width: 240px; min-width: 240px; } .dash-main { margin-left: 240px; } .dash-topbar-search { max-width: 360px; }}@media (max-width: 768px) { .sidebar-toggle { display: flex; } .dash-sidebar { left: -100%; width: 280px; min-width: 280px; transition: left 0.4s ease; z-index: 1100; box-shadow: 8px 0 30px rgba(15, 23, 42, 0.2); } .dash-sidebar.active { left: 0; } .dash-sidebar-brand .sidebar-close { display: flex; } .dash-main { margin-left: 0; } .dash-topbar { left: 0; height: auto; padding: 12px 0; } .dash-topbar-inner { flex-wrap: wrap; padding: 0 16px; } .dash-topbar-search { order: 3; width: 100%; max-width: none; } .dash-content { padding: 20px; } .dash-header { padding: 18px; } .dash-header h1 { font-size: 22px; } .stats-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; } .stat-card { padding: 20px; gap: 14px; } .stat-card-icon { width: 46px; height: 46px; font-size: 18px; border-radius: 12px; } .stat-card-info h3 { font-size: 22px; } .content-card { border-radius: 14px; } .content-card-header { padding: 16px 18px; } .content-card-body { padding: 18px; } .dash-table { display: block; overflow-x: auto; white-space: nowrap; } .project-card { padding: 20px; }}@media (max-width: 480px) { .dash-content { padding: 16px; } .stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .stat-card { flex-direction: column; align-items: flex-start; padding: 18px; }}/* ============================================ Home Page Marketplace Sections ============================================ */.section-bg-light { background: #f8fafc;}.text-muted { color: #64748b;}.center-btn { text-align: center; margin-top: 40px;}.project-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;}.project-cards-grid .project-card { display: flex; flex-direction: column; margin-bottom: 0;}.project-cards-grid .project-card-header { gap: 10px;}.project-cards-grid .project-card-header h3 { flex: 1; min-width: 0; font-size: 16px; line-height: 1.4;}.project-cards-grid .project-card-header .badge-status { flex-shrink: 0; font-size: 11px; padding: 4px 12px;}.project-cards-grid .project-card-desc { -webkit-line-clamp: 2; flex: 1;}.project-cards-grid .project-card-skills { margin-bottom: 0;}.freelancer-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;}.freelancer-cards-grid .project-card { display: flex; flex-direction: column; margin-bottom: 0;}.freelancer-cards-grid .project-card-skills { margin-bottom: 0; margin-top: auto;}.freelancer-card-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px;}.freelancer-card-top .avatar,.freelancer-card-top .avatar-initials { flex-shrink: 0; border: 2px solid #e2e8f0;}.freelancer-card-info { flex: 1; min-width: 0;}.freelancer-card-info h3 { font-size: 16px; font-weight: 700; color: #0f172a;}.freelancer-card-info h3 a { color: inherit; text-decoration: none; transition: color 0.2s ease;}.freelancer-card-info h3 a:hover { color: #4f46e5;}.freelancer-card-info p { font-size: 13px; color: #64748b; margin-top: 2px;}.freelancer-card-rate { text-align: right; flex-shrink: 0;}.freelancer-card-rate .project-budget { font-size: 15px; white-space: nowrap;}.freelancer-card-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #64748b; padding-bottom: 14px; border-bottom: 1px solid #f1f5f9; margin-bottom: 14px;}.rating-stars { color: #f59e0b; font-weight: 600; display: inline-flex; align-items: center; gap: 4px;}@media (max-width: 992px) { .project-cards-grid, .freelancer-cards-grid { grid-template-columns: repeat(2, 1fr); }}@media (max-width: 640px) { .project-cards-grid, .freelancer-cards-grid { grid-template-columns: 1fr; }}/* ============================================ Public Profile - Portfolio & Extras ============================================ */.portfolio-items-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;}.portfolio-item-card { border-radius: 12px; overflow: hidden; border: 1px solid #e2e8f0; background: #fff; transition: all 0.3s ease; display: flex; flex-direction: column;}.portfolio-item-card:hover { box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12); transform: translateY(-3px); border-color: #c7d2fe;}.portfolio-item-thumb { height: 150px; background: linear-gradient(135deg, #eef2ff, #e0e7ff); display: flex; align-items: center; justify-content: center; color: #4f46e5; font-size: 34px; overflow: hidden;}.portfolio-item-thumb img { width: 100%; height: 100%; object-fit: cover;}.portfolio-item-body { padding: 14px 16px;}.portfolio-item-body h4 { font-size: 14px; font-weight: 700; color: #0f172a; margin-bottom: 4px;}.portfolio-item-body p { font-size: 12.5px; color: #64748b; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}.profile-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 50px; font-size: 12px; font-weight: 600; margin-top: 8px;}.profile-badge-available { background: rgba(16, 185, 129, 0.15); color: #10b981; }.profile-badge-busy { background: rgba(245, 158, 11, 0.15); color: #d97706; }.profile-badge-unavailable { background: rgba(100, 116, 139, 0.15); color: #64748b; }@media (max-width: 640px) { .portfolio-items-grid { grid-template-columns: repeat(2, 1fr); }}/* ============================================ Flash Alerts (Modern + Close Button) ============================================ */.alert { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 52px 14px 18px; border-radius: 12px; font-size: 14px; font-weight: 500; margin-bottom: 18px; animation: alertSlideIn 0.35s ease; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1); transition: opacity 0.3s ease, transform 0.3s ease;}.alert .alert-close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 8px; border: none; background: rgba(15, 23, 42, 0.08); color: inherit; font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; padding: 0;}.alert .alert-close:hover { background: rgba(15, 23, 42, 0.16); transform: translateY(-50%) scale(1.08);}@keyframes alertSlideIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); }}/* ============================================ Sidebar Text Brand (Admin) ============================================ */.sidebar-text-brand strong { display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.3px; background: linear-gradient(135deg, #4f46e5, #7c3aed, #06b6d4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.2;}.sidebar-text-brand small { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #94a3b8; margin-top: 2px;}/* ============================================ Freelancer Module — Extra Statuses & Widgets ============================================ */.badge-shortlisted { background: #e0e7ff; color: #3730a3; }.badge-withdrawn { background: #f1f5f9; color: #475569; }.badge-revision_requested, .badge-revision-requested { background: #ffedd5; color: #9a3412; }.badge-processing { background: #dbeafe; color: #1e40af; }.badge-approved { background: #d1fae5; color: #065f46; }.badge-paid { background: #ecfdf5; color: #047857; box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.15); }.badge-under_review, .badge-under-review { background: #fef3c7; color: #92400e; }.badge-resolved { background: #d1fae5; color: #065f46; }.badge-failed { background: #fee2e2; color: #991b1b; }.badge-refunded { background: #f1f5f9; color: #475569; }/* Profile completion progress */.completion-bar { background: #e2e8f0; border-radius: 20px; height: 10px; overflow: hidden; }.completion-bar span { display: block; height: 100%; border-radius: 20px; background: linear-gradient(90deg, #4f46e5, #7c3aed); transition: width 0.4s ease; }.completion-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #64748b; padding: 4px 0; }.completion-check i { width: 18px; text-align: center; }.completion-check.done { color: #059669; }/* Earnings monthly chart (pure CSS bars) */.earnings-chart { display: flex; align-items: flex-end; gap: 10px; height: 180px; padding: 10px 4px 0; }.earnings-chart .chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }.earnings-chart .chart-bar { width: 100%; max-width: 46px; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, #6366f1, #4f46e5); min-height: 4px; position: relative; }.earnings-chart .chart-bar.zero { background: #e2e8f0; }.earnings-chart .chart-label { font-size: 11px; color: #64748b; font-weight: 600; }.earnings-chart .chart-value { font-size: 10px; color: #94a3b8; }/* Quick action buttons on dashboard */.quick-actions { display: flex; gap: 12px; flex-wrap: wrap; }.quick-action { display: flex; align-items: center; gap: 10px; padding: 14px 20px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; text-decoration: none; color: #0f172a; font-weight: 600; font-size: 14px; transition: all 0.2s; }.quick-action i { width: 20px; text-align: center; color: #4f46e5; }.quick-action:hover { border-color: #4f46e5; box-shadow: 0 6px 18px rgba(79, 70, 229, 0.12); transform: translateY(-2px); }/* Mini list rows (recent messages / notifications / deadlines) */.mini-row { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid #f1f5f9; }.mini-row:last-child { border-bottom: none; }.mini-row .mini-body { flex: 1; min-width: 0; }.mini-row .mini-body strong { display: block; font-size: 13.5px; color: #0f172a; }.mini-row .mini-body span { display: block; font-size: 12.5px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.mini-row .mini-time { font-size: 11.5px; color: #94a3b8; white-space: nowrap; }.mini-row.unread strong { color: #4f46e5; }/* Star rating summary */.rating-summary { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }.rating-summary .rating-avg { font-size: 42px; font-weight: 800; color: #0f172a; line-height: 1; }.rating-bar { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #64748b; }.rating-bar .track { flex: 1; height: 6px; background: #e2e8f0; border-radius: 6px; overflow: hidden; min-width: 90px; }.rating-bar .track span { display: block; height: 100%; background: #f59e0b; } /* ============================================ Premium Marketplace Pages — Find Work / Find Talent / Proposals (v1.7) ============================================ */ /* ---- Hero Banner ---- */ .pm-hero { position: relative; padding: 160px 0 150px; overflow: hidden; background: #0b1120; } .pm-hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .3; filter: saturate(1.15); } .pm-hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(120deg, rgba(8,11,26,.97) 0%, rgba(15,23,42,.9) 45%, rgba(49,46,129,.78) 100%); } .pm-hero::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size: 26px 26px; pointer-events: none; } .pm-hero-glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; } .pm-hero-glow-1 { width: 440px; height: 440px; background: rgba(79,70,229,.55); top: -140px; right: -80px; } .pm-hero-glow-2 { width: 380px; height: 380px; background: rgba(6,182,212,.35); bottom: -180px; left: -110px; } .pm-hero .container { position: relative; z-index: 2; text-align: center; } .pm-hero-breadcrumb { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(8px); padding: 8px 18px; border-radius: 50px; font-size: 13px; font-weight: 500; } .pm-hero-breadcrumb a { color: #c7d2fe; text-decoration: none; transition: color .2s; } .pm-hero-breadcrumb a:hover { color: #fff; } .pm-hero-breadcrumb .sep { color: rgba(255,255,255,.35); } .pm-hero-breadcrumb .current { color: #fff; font-weight: 600; } .pm-hero h1 { font-family: 'Poppins', sans-serif; font-size: 46px; font-weight: 800; color: #fff; margin: 20px 0 14px; letter-spacing: -1px; line-height: 1.15; } .pm-hero h1 span { background: linear-gradient(135deg, #a5b4fc 0%, #67e8f9 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .pm-hero-sub { color: rgba(226,232,240,.82); font-size: 16.5px; max-width: 580px; margin: 0 auto 32px; line-height: 1.7; } .pm-hero-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13); border-radius: 18px; backdrop-filter: blur(10px); width: fit-content; margin: 0 auto; padding: 20px 8px; } .pm-hero-stat { padding: 0 36px; text-align: center; } .pm-hero-stat + .pm-hero-stat { border-left: 1px solid rgba(255,255,255,.12); } .pm-hero-stat strong { display: block; font-size: 27px; font-weight: 800; color: #fff; font-family: 'Poppins', sans-serif; letter-spacing: -.5px; } .pm-hero-stat span { font-size: 12.5px; color: rgba(226,232,240,.62); font-weight: 500; letter-spacing: .3px; } /* ---- Listing Section + Floating Filter ---- */ .pm-listing { background: #f6f8fc; padding: 0 0 80px; } .pm-filter { background: #fff; border: 1px solid rgba(226,232,240,.9); border-radius: 18px; padding: 18px; box-shadow: 0 24px 48px -12px rgba(15,23,42,.16); margin-top: -60px; position: relative; z-index: 5; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .pm-field { position: relative; flex: 2; min-width: 220px; } .pm-field.pm-field-sm { flex: 1; min-width: 160px; } .pm-field > .pm-field-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 13px; pointer-events: none; transition: color .2s; z-index: 1; } .pm-field input, .pm-field select { width: 100%; padding: 12px 14px 12px 40px; border: 1.5px solid #e2e8f0; border-radius: 12px; font-size: 14px; font-family: inherit; background: #f8fafc; color: #0f172a; outline: none; transition: all .25s ease; appearance: none; -webkit-appearance: none; } .pm-field select { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; cursor: pointer; } .pm-field input:focus, .pm-field select:focus { border-color: #4f46e5; background: #fff; box-shadow: 0 0 0 4px rgba(79,70,229,.1); } .pm-field:focus-within > .pm-field-icon { color: #4f46e5; } .pm-rate-wrap { flex: 1.4; min-width: 210px; display: flex; gap: 10px; } .pm-rate-wrap .pm-field { flex: 1; min-width: 0; } .pm-btn { background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff; border: none; padding: 12px 26px; border-radius: 12px; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; box-shadow: 0 8px 20px rgba(79,70,229,.3); transition: all .3s ease; white-space: nowrap; line-height: 1.4; } .pm-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(79,70,229,.42); color: #fff; } .pm-btn-lg { padding: 14px 30px; font-size: 15px; border-radius: 14px; } .pm-clear { padding: 12px 14px; color: #64748b; font-size: 13.5px; text-decoration: none; font-weight: 600; white-space: nowrap; border-radius: 12px; transition: all .2s; display: inline-flex; align-items: center; gap: 6px; } .pm-clear:hover { color: #e11d48; background: #fff1f2; } /* ---- Toolbar + Chips ---- */ .pm-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin: 28px 0 20px; } .pm-count { font-size: 14.5px; color: #475569; font-weight: 500; } .pm-count strong { color: #0f172a; font-weight: 800; font-size: 16.5px; } .pm-chips { display: flex; gap: 8px; flex-wrap: wrap; } .pm-chip { display: inline-flex; align-items: center; gap: 7px; background: #eef2ff; color: #4f46e5; border: 1px solid #e0e7ff; padding: 6px 8px 6px 14px; border-radius: 50px; font-size: 12.5px; font-weight: 600; } .pm-chip i { font-size: 10px; opacity: .7; } /* ---- Project Cards ---- */ .pm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .pm-project-card { position: relative; background: #fff; border: 1px solid rgba(226,232,240,.9); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; transition: all .35s cubic-bezier(.4,0,.2,1); overflow: hidden; } .pm-project-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #4f46e5, #06b6d4); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.4,0,.2,1); } .pm-project-card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -14px rgba(15,23,42,.18); border-color: #c7d2fe; } .pm-project-card:hover::before { transform: scaleX(1); } .pm-pc-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; } .pm-pc-type { font-size: 10.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; padding: 5px 12px; border-radius: 8px; } .pm-pc-type.fixed { background: #eef2ff; color: #4f46e5; } .pm-pc-type.hourly { background: #ecfeff; color: #0891b2; } .pm-pc-time { font-size: 12.5px; color: #94a3b8; font-weight: 500; white-space: nowrap; } .pm-pc-title { font-size: 17.5px; font-weight: 700; color: #0f172a; line-height: 1.45; margin-bottom: 12px; font-family: 'Poppins', sans-serif; letter-spacing: -.2px; } .pm-pc-title a { color: inherit; text-decoration: none; transition: color .2s; } .pm-project-card:hover .pm-pc-title a { color: #4f46e5; } .pm-pc-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: #64748b; margin-bottom: 14px; } .pm-pc-meta i { color: #94a3b8; margin-right: 5px; } .pm-pc-desc { font-size: 13.5px; color: #64748b; line-height: 1.6; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .pm-pc-skills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; } .pm-pc-skills .skill-tag { font-size: 11px; padding: 4px 10px; border-radius: 6px; background: #f1f5f9; color: #475569; font-weight: 500; } .pm-pc-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 14px; border-top: 1px solid #f1f5f9; } .pm-pc-budget { font-size: 18px; font-weight: 800; color: #0f172a; font-family: 'Poppins', sans-serif; } .pm-pc-budget small { font-size: 11px; color: #94a3b8; font-weight: 500; display: block; margin-top: 2px; } .pm-pc-bid-btn { background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff; border: none; padding: 8px 20px; border-radius: 10px; font-weight: 600; font-size: 13px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; transition: all .3s ease; } .pm-pc-bid-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(79,70,229,.3); color: #fff; }