:root { --primary: #ee9f0d; --primary-bg: #fffbf0; --dark: #0f172a; --gray: #64748b; --light-gray: #f8fafc; --border: #e2e8f0; --white: #ffffff; --success: #10b981; --danger: #ef4444; --blue: #3b82f6; --font-head: "Manrope", sans-serif; --font-body: "Manrope", sans-serif; --radius: 24px; --card-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.05); --hover-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.1); --sidebar-width: 280px; --sidebar-collapsed-width: 88px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-body); background-color: #f1f5f9; color: var(--dark); display: flex; min-height: 100vh; overflow-x: hidden; } /* ========================================= SIDEBAR (Fixed & Responsive) ========================================= */ .sidebar { width: var(--sidebar-width); background: var(--white); border-radius: 30px; height: 100vh; position: fixed; top: 0; left: 0; border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: 1000; transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Only animate width */ white-space: nowrap; } /* --- LOGIC 4 FIX: HTML Class Based Collapsing --- */ /* এই ক্লাসটি স্ক্রিপ্ট দ্বারা যোগ করা হয়, তাই রিফ্রেশে নড়াচড়া হবে না */ html.sidebar-closed .sidebar, .sidebar.collapsed { width: var(--sidebar-collapsed-width); } /* Hide Text Elements when Collapsed */ html.sidebar-closed .sidebar .logout-text, html.sidebar-closed .sidebar .nav-item span, .sidebar.collapsed .logout-text, .sidebar.collapsed .nav-item span { display: none; opacity: 0; } /* Adjust Nav Items when collapsed */ html.sidebar-closed .sidebar .nav-item a, .sidebar.collapsed .nav-item a { justify-content: center; padding: 15px; } html.sidebar-closed .sidebar .nav-item a i, .sidebar.collapsed .nav-item a i { margin: 0; font-size: 1.3rem; } /* Brand Section (Cleaned) */ /* Brand Section (Cleaned) */ .brand { padding: 30px 25px; display: flex; align-items: center; justify-content: center; height: 90px; } /* Brand Logo - Base Style */ .brand-logo { font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; white-space: nowrap; letter-spacing: -0.5px; color: var(--dark); text-decoration: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Animation */ display: flex; /* Flex to manage span */ align-items: center; justify-content: center; } /* "Ali" - Default Dark */ .brand-logo { background: none; -webkit-background-clip: unset; background-clip: unset; color: var(--dark); } /* "Embroidery" - Gradient & Animatable */ .brand-logo span { background: linear-gradient(to right, #ff6a00, #f8a203, #ff6a00); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% auto; animation: gradientAnimation 3s linear infinite; /* Transition Props */ display: inline-block; max-width: 200px; /* Arbitrary large width */ opacity: 1; transform: translateX(0); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); margin-left: 6px; } /* COLLAPSED STATE LOGIC */ html.sidebar-closed .sidebar .brand-logo, .sidebar.collapsed .brand-logo { margin: 0; text-align: center; font-size: 1.5rem; /* Turn "Ali" into Gradient */ background: linear-gradient(to right, #ff6a00, #f8a203, #ff6a00); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% auto; animation: gradientAnimation 3s linear infinite; } html.sidebar-closed .sidebar .brand-logo span, .sidebar.collapsed .brand-logo span { /* Smooth Hide */ max-width: 0; opacity: 0; margin-left: 0; transform: translateX(-10px); pointer-events: none; } .nav-menu { flex: 1; padding: 20px 15px; display: flex; flex-direction: column; gap: 8px; list-style: none; overflow-y: auto; overflow-x: hidden; } .nav-item a { display: flex; align-items: center; gap: 14px; padding: 14px 20px; color: var(--gray); text-decoration: none; font-weight: 600; border-radius: 16px; transition: all 0.2s ease; } .nav-item.active a { background: var(--primary-bg); color: var(--primary); } /* FORCE Active State to stay same on Hover */ .nav-item.active a:hover { background: var(--primary-bg); color: var(--primary); cursor: pointer; /* User Requested: Keep Hand Cursor */ } .nav-item a:hover { background: var(--light-gray); color: var(--dark); } .nav-item a i { width: 24px; text-align: center; font-size: 1.1rem; transition: margin 0.3s; } /* Expense Text - User Requested: Red Color */ .expense-text { color: var(--danger) !important; } /* --- LOGIC 1 FIX: Premium Logout Button --- */ /* --- LOGIC 1 FIX: Premium Logout Button (Footer Position, Nav Alignment) --- */ .sidebar-footer { padding: 20px 15px; /* Match .nav-menu padding */ border-top: 1px solid var(--border); background: #ffffff; display: flex; margin-top: auto; /* Push to bottom */ } /* Identical sizing/spacing to .nav-item a, but fit-content width */ .premium-logout-btn { width: fit-content; /* User Requirement: Only wrap content */ min-width: 0; /* Allow shrinking */ display: flex; align-items: center; justify-content: flex-start; /* Left align content */ gap: 14px; /* Match .nav-item a gap */ padding: 14px 20px; /* Match .nav-item a padding */ background: #fff5f5; /* Light Red Background */ border: none; /* User Requested: Clean, no border */ outline: none; color: var(--danger); font-family: var(--font-body); font-weight: 600; font-size: 1rem; border-radius: 16px; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; } .premium-logout-btn i { width: 24px; /* Match .nav-item a i width */ text-align: center; font-size: 1.1rem; transition: margin 0.3s; } /* Hover State */ .premium-logout-btn:hover { background: #fee2e2; color: #dc2626; } /* Active/Click State */ .premium-logout-btn:active { background: #fecaca; } /* ========================================= RESPONSIVE / COLLAPSED STATE ========================================= */ html.sidebar-closed .sidebar .premium-logout-btn, .sidebar.collapsed .premium-logout-btn { width: 50px; /* Fixed width for circle */ height: 50px; /* Fixed height for circle */ padding: 0; /* Remove padding to center icon */ justify-content: center; border-radius: 16px; /* User Requested: Match expanded radius (Rounded Square) */ } /* Hide Text in Collapsed Mode */ html.sidebar-closed .sidebar .premium-logout-btn span, .sidebar.collapsed .premium-logout-btn span { display: none; } /* Icon adjustment for collapsed state */ html.sidebar-closed .sidebar .premium-logout-btn i, .sidebar.collapsed .premium-logout-btn i { margin: 0; font-size: 1.2rem; /* Adjusted for visual balance in circle */ } /* Hover/Active State for Collapsed */ html.sidebar-closed .sidebar .premium-logout-btn:hover, .sidebar.collapsed .premium-logout-btn:hover { background: #fee2e2; color: #dc2626; } html.sidebar-closed .sidebar .premium-logout-btn:active, .sidebar.collapsed .premium-logout-btn:active { background: #fecaca; } /* Ensure centering in footer for collapsed state */ html.sidebar-closed .sidebar .sidebar-footer, .sidebar.collapsed .sidebar-footer { display: flex; justify-content: center; padding-left: 0; padding-right: 0; } /* ========================================= MAIN CONTENT AREA ========================================= */ .main-content { margin-left: var(--sidebar-width); width: calc(100% - var(--sidebar-width)); padding: 30px 40px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); min-height: 100vh; } /* Apply collapsed style via HTML class immediately */ html.sidebar-closed .main-content, .main-content.expanded { margin-left: var(--sidebar-collapsed-width); width: calc(100% - var(--sidebar-collapsed-width)); } /* ========================================= PREMIUM DASHBOARD HEADER ========================================= */ .premium-dashboard-header { background: var(--white); border-radius: var(--radius); padding: 18px 25px; /* Perfectly balanced and slimmed */ margin-bottom: 5px; box-shadow: var(--card-shadow); border: 1px solid rgba(255, 255, 255, 0.5); } /* ========================================= FORM CARD — Header-to-Form Spacing ========================================= */ .form-card { margin-top: 32px; } @media (max-width: 992px) { .form-card { margin-top: 24px; } } @media (max-width: 768px) { .form-card { margin-top: 20px; } } @media (max-width: 480px) { .form-card { margin-top: 16px; } } .topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0; /* Ensures vertical centering inside the header card */ gap: 20px; } .subheader-external { display: flex; justify-content: flex-end; margin-top: 25px; /* Symmetrical balance from header */ margin-bottom: 25px; /* Symmetrical balance from content below */ padding-right: 5px; /* Desktop alignment */ } .topbar-left { display: flex; align-items: center; gap: 20px; } .menu-toggle-btn { background: var(--white); border: 1px solid var(--border); width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--gray); font-size: 1.1rem; transition: all 0.2s; } .menu-toggle-btn:hover { border-color: var(--primary); color: var(--primary); } .page-title { margin-left: 15px; } .page-title h1 { font-family: var(--font-head); font-size: 1.8rem; font-weight: 800; background: linear-gradient(to right, #ff6a00, #f8a203, #ff6a00); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% auto; animation: gradientAnimation 3s linear infinite; display: inline-block; } @keyframes gradientAnimation { 0% { background-position: 200% 50%; } 100% { background-position: 0% 50%; } } .page-title p { color: var(--gray); font-size: 0.9rem; margin-top: 2px; } .date-badge { background: var(--light-gray); padding: 8px 18px; border-radius: 50px; font-size: 0.85rem; font-weight: 600; color: var(--dark); display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); } .date-badge i { color: var(--primary); } .topbar-right { display: flex; align-items: center; } .profile-wrapper { position: relative; z-index: 1001; } .profile-container { display: flex; align-items: center; gap: 12px; background: transparent; /* Completely clean as requested */ padding: 4px; border-radius: var(--radius); border: none; /* Removed border */ cursor: pointer; transition: opacity 0.2s ease; user-select: none; } .profile-container:hover { opacity: 0.8; /* Subtle feedback instead of color change */ background: transparent; transform: none; } .profile-avatar { width: 44px; /* Slightly larger */ height: 44px; border-radius: 50%; /* Fully round */ overflow: hidden; background: #f8fafc; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } .profile-img { width: 100%; height: 100%; object-fit: cover; } .profile-container.active { background: transparent; } .profile-text { display: flex; align-items: center; gap: 12px; /* Increased gap for better clarity */ } .profile-name { font-family: var(--font-head); font-size: 0.9rem; font-weight: 700; color: var(--dark); letter-spacing: 0.2px; } .dropdown-arrow { font-size: 0.75rem; color: #94a3b8; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .profile-container.active .dropdown-arrow { transform: rotate(180deg); color: var(--primary); } .profile-dropdown { position: absolute; top: calc(100% + 12px); right: 0; width: 280px; background: var(--white); border-radius: 20px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12); border: 1px solid var(--border); opacity: 0; visibility: hidden; transform: translateY(15px); transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; z-index: 1002; } .profile-dropdown.active { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-header { padding: 18px 20px; background: linear-gradient( 135deg, rgba(238, 159, 13, 0.04), rgba(215, 53, 2, 0.04) ); display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #f1f5f9; } .dropdown-avatar { width: 52px; /* Slightly larger */ height: 52px; border-radius: 50%; /* Fully round */ border: 2px solid var(--white); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); object-fit: cover; } .user-info { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; /* Tighter line-height like index.html */ align-items: flex-start !important; /* Force left-alignment for flex children */ text-align: left !important; /* Force left-alignment for text block */ } .dropdown-user-name { display: block; font-family: var(--font-head), "Manrope", sans-serif !important; font-size: 0.95rem; font-weight: 700; color: var(--dark) !important; text-align: left !important; } .dropdown-user-email { display: block; font-family: var(--font-body), "Manrope", sans-serif !important; font-size: 0.75rem; color: var(--gray) !important; font-weight: 500; opacity: 0.8; /* Slightly muted as in reference */ text-align: left !important; } .dropdown-menu { list-style: none; display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 0 10px; /* Added 10px top padding */ } .dropdown-menu li a, .dropdown-logout { display: flex; align-items: center; gap: 12px; padding: 12px 15px; border-radius: 12px; color: var(--gray); text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: all 0.2s; width: 100%; background: none; border: 1px solid transparent; /* default transparent border */ cursor: pointer; font-family: inherit; } .dropdown-menu li a:hover { background: var(--primary-bg); color: var(--primary); } .dropdown-menu li a i, .dropdown-logout i { font-size: 1.1rem; width: 20px; text-align: center; } .divider { height: 1px; background: #f1f5f9; margin: 10px 10px; width: calc(100% - 20px); } .dropdown-logout { color: #ef4444; /* Standard Danger Red */ margin-top: 5px; margin-bottom: 8px; /* Extra space at the bottom */ } .dropdown-logout:hover { background: #fef2f2; color: #dc2626; border-color: transparent; /* Completely clean, no stroke */ } @media (max-width: 768px) { .premium-dashboard-header { padding: 15px 20px; margin-bottom: 25px; } .topbar { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 10px; } .topbar-left { display: flex; align-items: center; gap: 10px; } .page-title h1 { font-size: 1.2rem; } .page-title p { font-size: 0.75rem; } .topbar-right { margin-top: 0; } .profile-container { width: auto; padding: 0; gap: 8px; } .profile-name { display: none; } .dropdown-arrow { font-size: 0.8rem; } .date-badge { padding: 6px 12px; font-size: 0.7rem; box-shadow: none; border: 1px solid var(--border); } .header-divider { display: none; } .subheader-external { padding-right: 15px; /* Align with stat cards on mobile */ margin-top: 25px; /* Symmetrical mobile balance */ margin-bottom: 25px; /* Symmetrical mobile balance */ } } /* ========================================= MOBILE PROFILE BOTTOM SHEET Only active on mobile (≤768px) ========================================= */ /* Backdrop Overlay */ .profile-sheet-backdrop { display: none; position: fixed; inset: 0; z-index: 9998; background: rgba(15, 23, 42, 0); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); transition: background 0.38s cubic-bezier(0.4, 0, 0.2, 1), backdrop-filter 0.38s ease; } .profile-sheet-backdrop.active { display: block; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Bottom Sheet Panel */ .profile-bottom-sheet { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: #ffffff; border-radius: 28px 28px 0 0; box-shadow: 0 -16px 70px rgba(0, 0, 0, 0.2); transform: translateY(100%); transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1); /* Balanced height — tall but not overly empty */ min-height: 70vh; /* Bottom padding for phones with home indicator */ padding-bottom: env(safe-area-inset-bottom, 20px); will-change: transform; touch-action: none; /* Internal scroll if content overflows */ overflow-y: auto; scrollbar-width: none; } .profile-bottom-sheet::-webkit-scrollbar { display: none; } .profile-bottom-sheet.sheet-visible { display: block; } .profile-bottom-sheet.sheet-open { transform: translateY(0); } /* ---- Drag Handle ---- */ .sheet-drag-handle { display: flex; flex-direction: column; align-items: center; padding: 16px 20px 8px 20px; cursor: grab; user-select: none; flex-shrink: 0; } .sheet-drag-handle:active { cursor: grabbing; } .sheet-drag-bar { width: 44px; height: 5px; background: #9ca3af; border-radius: 100px; transition: background 0.2s ease, width 0.2s ease; } /* Slightly darker when open — stays neutral, no orange */ .profile-bottom-sheet.sheet-open .sheet-drag-bar { background: #6b7280; width: 48px; } /* ---- Sheet Header (User Info) ---- */ .sheet-user-header { display: flex; align-items: center; gap: 16px; padding: 18px 24px 20px 24px; background: linear-gradient( 135deg, rgba(238, 159, 13, 0.06), rgba(215, 53, 2, 0.04) ); border-bottom: 1px solid #f1f5f9; flex-shrink: 0; } .sheet-user-avatar { width: 62px; height: 62px; border-radius: 50%; border: 3px solid #ffffff; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); object-fit: cover; flex-shrink: 0; } .sheet-user-info { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; } .sheet-user-name { font-family: var(--font-head); font-size: 1.1rem; font-weight: 800; color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.2px; } .sheet-user-email { font-family: var(--font-body); font-size: 0.8rem; color: var(--gray); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- Sheet Menu ---- */ .sheet-menu { list-style: none; padding: 8px 16px; display: flex; flex-direction: column; gap: 0; } .sheet-menu li a, .sheet-menu li button.sheet-menu-btn { display: flex; align-items: center; gap: 16px; padding: 17px 16px; border-radius: 14px; color: #374151; text-decoration: none; font-family: var(--font-body); font-weight: 600; font-size: 1rem; transition: background 0.18s ease, color 0.18s ease; width: 100%; background: none; border: none; cursor: pointer; text-align: left; } .sheet-menu li a:hover, .sheet-menu li a:active, .sheet-menu li button.sheet-menu-btn:hover, .sheet-menu li button.sheet-menu-btn:active { background: var(--primary-bg); color: var(--primary); } .sheet-menu li a:active, .sheet-menu li button.sheet-menu-btn:active { transform: scale(0.98); } .sheet-menu li a i, .sheet-menu li button.sheet-menu-btn i { font-size: 1.1rem; width: 22px; text-align: center; color: #6b7280; transition: color 0.18s ease; flex-shrink: 0; } .sheet-menu li a:hover i, .sheet-menu li button.sheet-menu-btn:hover i { color: var(--primary); } /* Chevron right indicator */ .sheet-menu li a .sheet-chevron { margin-left: auto; font-size: 0.75rem; color: #d1d5db; } /* ---- Sheet Divider ---- */ .sheet-divider { height: 1px; background: #f1f5f9; margin: 4px 14px; } /* ---- Logout button in sheet ---- */ .sheet-logout-btn { color: #ef4444 !important; } .sheet-logout-btn i { color: #ef4444 !important; } .sheet-logout-btn:hover, .sheet-logout-btn:active { background: #fef2f2 !important; color: #dc2626 !important; } .sheet-logout-btn:hover i { color: #dc2626 !important; } /* ---- Empty spacer at bottom ---- */ .sheet-bottom-spacer { height: 40px; } /* On desktop: hide the sheet elements entirely */ @media (min-width: 769px) { .profile-sheet-backdrop, .profile-bottom-sheet { display: none !important; } } /* On mobile: hide the old dropdown */ @media (max-width: 768px) { .profile-dropdown { display: none !important; } /* Keep the profile trigger clean on mobile */ .profile-wrapper { z-index: 100; /* lower than sheet which is 9999 */ } } /* ========================================= STAT CARDS & CHARTS ========================================= */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 25px; margin-bottom: 40px; } .stat-card { background: var(--white); padding: 25px; border-radius: var(--radius); box-shadow: var(--card-shadow); border: 1px solid rgba(255, 255, 255, 0.5); display: flex; flex-direction: column; gap: 15px; } .stat-card:hover { box-shadow: var(--hover-shadow); } .stat-top { display: flex; justify-content: space-between; align-items: center; } .stat-icon-box { width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; } .orders-bg { background: #eff6ff; color: var(--blue); } .expense-bg { background: #fef2f2; color: var(--danger); } .net-bg { background: #ecfdf5; color: var(--success); } .stat-middle .stat-label { font-size: 0.9rem; color: var(--gray); font-weight: 600; display: block; margin-bottom: 5px; } .stat-middle .stat-value { font-family: var(--font-head); font-size: 2rem; font-weight: 700; display: flex; align-items: center; gap: 5px; } .stat-bottom { display: flex; gap: 8px; align-items: center; font-size: 0.85rem; } .trend { padding: 4px 10px; border-radius: 20px; font-weight: 700; display: flex; align-items: center; gap: 4px; } .trend.up { background: #ecfdf5; color: var(--success); } .trend.down { background: #fef2f2; color: var(--danger); } .trend.neutral { background: #f1f5f9; color: var(--gray); } .trend-text { color: var(--gray); } .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .section-header h3 { font-family: var(--font-head); font-size: 1.2rem; font-weight: 700; } .analytics-grid-premium { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 25px; } .analytics-card-premium { background: var(--white); padding: 30px; border-radius: var(--radius); box-shadow: var(--card-shadow); display: flex; flex-direction: column; border: 1px solid var(--border); } .chart-header { display: flex; justify-content: space-between; margin-bottom: 25px; } .chart-title-box h5 { font-size: 1rem; font-weight: 700; margin-bottom: 4px; text-transform: uppercase; color: var(--blue); letter-spacing: 0.5px; } .chart-subtitle { font-family: var(--font-head); font-size: 1.1rem; color: var(--dark); font-weight: 600; } .chart-badge { padding: 6px 14px; border-radius: 30px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; height: fit-content; } .chart-badge.gold { background: var(--primary-bg); color: var(--primary); } .chart-badge.blue { background: #eff6ff; color: var(--blue); } .chart-canvas-box { flex: 1; min-height: 300px; position: relative; width: 100%; } .chart-footer { margin-top: 20px; padding-top: 20px; border-top: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: flex-end; } .total-label { font-size: 0.9rem; color: var(--gray); margin-bottom: 5px; font-weight: 500; } .total-amount { font-family: var(--font-head); font-size: 1.8rem; font-weight: 800; display: flex; align-items: center; gap: 5px; color: var(--dark); } /* ========================================= MOBILE RESPONSIVE ========================================= */ .bottom-nav { display: none; } .mobile-menu-btn { display: none; } .overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 999; display: none; backdrop-filter: blur(4px); } .overlay.active { display: block; } @media (max-width: 992px) { /* Tablet & Small Laptop: Sidebar acts as Mobile Drawer */ .sidebar { transform: translateX(-100%); width: 280px; box-shadow: 5px 0 25px rgba(0, 0, 0, 0.1); } .sidebar.active { transform: translateX(0); } .main-content { margin-left: 0; width: 100%; } /* Mobile doesn't respect collapsed state from desktop */ html.sidebar-closed .main-content, .main-content.expanded { margin-left: 0; width: 100%; } /* Toggle Buttons */ .menu-toggle-btn { display: none; } .mobile-menu-btn { display: none !important; /* Hide old top menu button */ } /* SIDEBAR: Completely hide on mobile now */ .sidebar { display: none !important; } /* ENABLE NATIVE-LIKE PAGE TRANSITIONS */ @view-transition { navigation: auto; } /* BOTTOM NAVIGATION BAR - Floating Dock Style */ .bottom-nav { position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 400px; background: #ffffff; height: 70px; /* Taller for text */ display: flex; justify-content: space-between; /* Spread out */ align-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); z-index: 1000; border-radius: 40px; padding: 0 15px; /* More padding */ border: 1px solid rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px); box-sizing: border-box; } /* The Sliding Circle - Perfect Round Shape */ .nav-indicator { position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 50px; width: 50px; /* Force Fixed Width for Circle */ background: #fff4e0; /* Light Orange */ border-radius: 50%; /* Perfect Circle */ z-index: 1; box-shadow: none; transition: left 0.5s cubic-bezier(0.25, 1, 0.5, 1); /* Position Only */ pointer-events: none; opacity: 0; will-change: left; border: 1px solid #ffeebb; } .nav-item-mobile { display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: var(--gray); padding: 0; height: 100%; flex: 1; border-radius: 50%; /* Round touch target */ background: transparent; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 0.3s ease; position: relative; z-index: 2; } .nav-item-mobile i { font-size: 1.4rem; /* Slightly larger icon since no text */ z-index: 2; position: relative; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Pop Scaling */ } /* Hide Text Labels for Cleaner Look */ .nav-item-mobile span { display: none; } /* Active State */ /* Active State - Force Color Persist on Hover/Click */ .nav-item-mobile.active:hover, .nav-item-mobile.active:active, .nav-item-mobile.active:focus, .nav-item-mobile.fake-active:hover, .nav-item-mobile.fake-active:active { color: var(--primary) !important; background: transparent !important; /* No background change */ transform: none !important; opacity: 1 !important; } .nav-item-mobile.active, .nav-item-mobile.fake-active { color: var(--primary); /* Orange Icon */ transform: none; } /* Scale Active Icon */ .nav-item-mobile.active i, .nav-item-mobile.fake-active i { transform: scale(1.3); /* Big Pop */ } /* Premium Logout Button - Modern Minimalist */ .nav-item-mobile.logout-trigger { flex: 0 0 50px; margin-left: 5px; margin-right: -5px; background: transparent; border-radius: 50%; height: 50px; width: 50px; box-shadow: none; border: 1px solid transparent; transition: all 0.3s ease; } .nav-item-mobile.logout-trigger i { color: #ef4444; /* Force RED as requested */ font-size: 1.2rem; } .nav-item-mobile.logout-trigger:active, .nav-item-mobile.logout-trigger:hover { background: #fef2f2; border-color: #fee2e2; } /* TOGGLE ARROW - "More" Option */ .nav-toggle { background: transparent; border: none; color: #94a3b8; width: 40px; height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; margin-right: 2px; /* Spacing on Right now */ margin-left: 0; border-radius: 15px; transition: all 0.3s ease; z-index: 5; } .nav-toggle i { font-size: 1rem; } .nav-toggle:active { transform: scale(0.9); background: #f8fafc; } /* === SUPER NAV ANIMATION (COLLAPSIBLE) === */ .bottom-nav { /* Smooth, Direct Physics (No Swelling) */ transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), height 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1), left 0.4s cubic-bezier(0.4, 0, 0.2, 1), /* Sync with width */ transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease; overflow: hidden; } /* MINIMIZED STATE - Corner Bubble (LEFT) */ .bottom-nav.minimized { width: 60px; height: 60px; padding: 0; border-radius: 50%; /* Position Logic: Move to Bottom LEFT */ left: 20px; /* Snap to Left */ bottom: 25px; transform: none; /* No translateX needed for Left alignment */ justify-content: center; /* Style: Match Desktop Active (Light Orange BG, Orange Icon) */ background: #fff4e0; border: 1px solid #ffeebb; box-shadow: 0 5px 15px rgba(238, 159, 13, 0.15); /* Subtle shadow */ cursor: pointer; } /* Hide Elements in Minimized Mode */ .bottom-nav.minimized .nav-item-mobile, .bottom-nav.minimized .logout-trigger, .bottom-nav.minimized .nav-toggle, .bottom-nav.minimized .nav-indicator { display: none !important; opacity: 0; pointer-events: none; } /* SHOW ACTIVE ICON in Minimized Mode */ .bottom-nav.minimized .nav-item-mobile.active { display: flex !important; opacity: 1; width: 100%; height: 100%; position: absolute; top: 0; left: 0; color: var(--primary); /* Orange Icon (#ee9f0d) */ z-index: 100; } .bottom-nav.minimized .nav-item-mobile.active i { transform: scale(1.2); font-size: 1.5rem; } /* Adjust Main Content padding */ .main-content { padding-bottom: 110px !important; } /* When active, the indicator follows, so we lift the icon to stay centered in the lifted indicator? Actually, if we lift the ITEM, the indicator (absolute) won't lift with it unless indicator is INSIDE item. But indicator is sibling. So JS must position indicator. Let's simplify: The indicator slides horizontally. The Active Icon moves UP slightly? Or stays centered? User said "Round animation... inside it... swipe". If the circle slides, the icon should probably just change color. Bouncing UP implies the circle moves up too. Let's move 'top' of indicator in CSS if needed, or just keep centered. Correction: Let's keep the circle centered vertically, and just slide left/right. The icon can just turn white. No vertical pop for now to keep it clean, OR pop both. If I pop the item, the icon moves. The indicator is separate. Let's keep the .nav-item-mobile.active transform: translateY(-8px) and ALSO move the indicator up? No, simpler is better for "Sliding". Keep everything centered. */ .nav-item-mobile.active { transform: none; /* Reset pop for seamless slide */ } /* But user liked the Pop. Let's try to match. If I want the circle to pop up, I need to animate 'top' or 'transform' of indicator based on active state? No, the indicator is ONE element. It can't be "at active state" differently than "at inactive". So, let's just slide horizontally. It's cleaner. */ /* Logout Specific */ .nav-item-mobile.logout-trigger { color: #ef4444; } /* Adjust Main Content padding for floating nav */ .main-content { padding-bottom: 100px !important; } .analytics-grid-premium { grid-template-columns: repeat( 2, 1fr ) !important; /* Force 2 columns on mobile */ gap: 10px !important; } .analytics-card-premium { padding: 10px !important; /* Reduce padding to fit */ } .chart-title-box h5 { font-size: 0.8rem !important; /* Smaller title */ } .chart-subtitle { font-size: 0.7rem !important; } .chart-badge { display: none !important; /* Hide badge on mobile to save space if needed, or keep small */ } .total-amount { font-size: 1.2rem !important; } } @media (max-width: 768px) { .main-content { padding: 15px 10px; /* Reduced padding for more space */ } /* Rest of responsive styles... */ .stats-grid { grid-template-columns: 1fr !important; /* Stacked */ gap: 15px !important; margin-bottom: 25px !important; padding: 0 15px !important; /* Add spacing on sides as requested */ } .stat-card { padding: 20px !important; /* Restore standard padding */ border-radius: 20px !important; gap: 10px !important; min-height: auto !important; } .stat-top { justify-content: space-between; /* Restore standard layout */ margin-bottom: 0; } .stat-icon-box { width: 45px !important; height: 45px !important; font-size: 1.2rem !important; border-radius: 12px; } .stat-middle .stat-label { font-size: 0.85rem !important; white-space: normal; text-align: left; } .stat-middle .stat-value { font-size: 1.6rem !important; justify-content: flex-start; } /* Show Trend again */ .stat-bottom { display: flex !important; } /* ANALYTICS: Revert to 1 Column Stacked (Standard) */ .income-analytics-section .section-header h3 { font-size: 1.1rem; margin-bottom: 15px; padding: 0 15px; /* Also align header text */ } .analytics-grid-premium { display: grid !important; grid-template-columns: 1fr !important; /* Stacked */ gap: 15px !important; width: 100% !important; padding: 0 15px !important; /* Side padding as requested to match stats */ } .analytics-card-premium { padding: 20px !important; /* Restore padding */ border-radius: 20px; width: 100% !important; overflow: visible !important; } .chart-header { margin-bottom: 15px; flex-direction: row; /* Restore row layout */ justify-content: space-between; align-items: center; gap: 10px; } .chart-title-box { width: auto; } .chart-title-box h5 { font-size: 0.9rem !important; margin-bottom: 4px; white-space: normal; } .chart-subtitle { font-size: 1rem !important; display: block; } .chart-badge { display: block !important; /* show badge again */ } /* Restore Normal Chart Size */ .chart-canvas-box { height: auto !important; min-height: 250px !important; width: 100% !important; } .chart-footer { margin-top: 15px; padding-top: 15px; flex-direction: row; /* Restore row layout */ justify-content: space-between; align-items: flex-end; } .total-label { font-size: 0.9rem; margin-bottom: 5px; } .total-amount { font-size: 1.5rem !important; } } /* Premium Liquid Footer Design */ .premium-footer { margin-top: 40px; margin-bottom: 32px; position: relative; text-align: center; padding: 0 16px; } .footer-content { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 16px; background: linear-gradient( 135deg, rgba(238, 159, 13, 0.08), rgba(215, 53, 2, 0.06) ); border: 1px solid rgba(238, 159, 13, 0.2); border-radius: 20px; position: relative; overflow: hidden; backdrop-filter: blur(10px); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); min-height: 36px; } .footer-content::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(238, 159, 13, 0.1), transparent ); transition: left 0.6s ease; } .footer-content:hover::before { left: 100%; } .footer-content:hover { transform: translateY(-2px); border-color: rgba(238, 159, 13, 0.4); box-shadow: 0 8px 25px rgba(238, 159, 13, 0.15); } .footer-brand { display: flex; align-items: center; gap: 6px; } .brand-icon { font-size: 0.9rem; filter: hue-rotate(20deg); animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 0.8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } } .brand-text { font-size: 0.7rem; color: #666; font-weight: 500; font-family: "Manrope", sans-serif; } .brand-link { font-size: 0.75rem; color: #ee9f0d; font-weight: 700; text-decoration: none; position: relative; transition: all 0.3s ease; font-family: "Manrope", sans-serif; } .brand-link::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, #ee9f0d, #d48c0c); transition: width 0.3s ease; } .brand-link:hover::after { width: 100%; } .brand-link:hover { color: #d48c0c; transform: translateY(-1px); } .footer-version { display: flex; align-items: center; gap: 3px; padding: 3px 8px; background: rgba(215, 53, 2, 0.1); border-radius: 12px; border: 1px solid rgba(215, 53, 2, 0.2); } .version-text { font-size: 0.65rem; color: #888; font-weight: 500; font-family: "Manrope", sans-serif; } .version-number { font-size: 0.7rem; color: #d73502; font-weight: 700; font-family: "Manrope", sans-serif; } .footer-decoration { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 40px; height: 3px; background: linear-gradient( 90deg, transparent, rgba(238, 159, 13, 0.3), transparent ); border-radius: 2px; } /* Premium Footer Mobile Responsive */ @media (max-width: 768px) { .premium-footer { margin-top: 48px; margin-bottom: 20px; padding: 0 12px; } .footer-content { gap: 10px; padding: 7px 14px; border-radius: 18px; min-height: 32px; } .brand-text { font-size: 0.65rem; } .brand-link { font-size: 0.7rem; } .version-text { font-size: 0.6rem; } .version-number { font-size: 0.65rem; } .brand-icon { font-size: 0.8rem; } } @media (max-width: 480px) { .premium-footer { margin-top: 60px; margin-bottom: 16px; padding: 0 8px; } .footer-content { gap: 8px; padding: 6px 12px; border-radius: 16px; min-height: 28px; } .footer-version { padding: 2px 6px; border-radius: 10px; } .brand-text { font-size: 0.6rem; } .brand-link { font-size: 0.65rem; } .version-text { font-size: 0.55rem; } .version-number { font-size: 0.6rem; } .brand-icon { font-size: 0.75rem; } } @media (max-width: 360px) { .premium-footer { margin-top: 80px; margin-bottom: 12px; } .footer-content { gap: 6px; padding: 5px 10px; border-radius: 14px; min-height: 24px; } .footer-version { padding: 1px 5px; border-radius: 8px; } .brand-text { font-size: 0.55rem; } .brand-link { font-size: 0.6rem; } .version-text { font-size: 0.5rem; } .version-number { font-size: 0.55rem; } .brand-icon { font-size: 0.7rem; } .footer-decoration { width: 25px; height: 2px; } } /* ========================================= NEW: REVENUE / INCOME SECTION STYLES (Paste this at the bottom of dashboard.css) ========================================= */ /* 2. Titles & Text Colors for Income */ .income-title { color: #059669 !important; /* Dark Green Title */ } /* 3. New Badges for Income */ .chart-badge.green { background: #dcfce7; color: #15803d; } .chart-badge.purple { background: #f3e8ff; color: #7e22ce; } /* 5. Mobile Adjustments for Income Section */ @media (max-width: 768px) { .income-analytics-section { margin-top: 30px; } } /* 2. Titles & Text Colors for Unpaid */ .unpaid-title { color: #b91c1c !important; /* Dark Red Title */ font-weight: 800 !important; /* Thicker, denser text */ letter-spacing: 0.5px; } /* 3. Badges for Unpaid */ .chart-badge.red { background: #fee2e2; color: #991b1b; } .chart-badge.dark-red { background: #fecaca; color: #7f1d1d; } /* 4. NEW: Titles & Badges for Pending/Orange Theme (Monthly Unpaid) */ .pending-title { color: #c2410c !important; /* Orange 700 Title */ } .chart-badge.orange { background: #ffedd5; /* Orange 100 */ color: #b45309; /* Orange 700 */ } /* --- Premium Pagination --- */ .pagination-container { display: flex; justify-content: center; align-items: center; margin-top: 30px; padding: 15px 5px; flex-wrap: wrap; gap: 12px; position: sticky; /* Sticky horizontally on mobile */ left: 0; width: 100%; z-index: 10; background: inherit; /* Matches card background */ } .pagination-controls { display: flex; align-items: center; gap: 12px; /* Increased from 10px for better breathing room */ } .pagination-btn { min-width: 40px; /* Slightly wider */ height: 40px; /* Slightly taller */ padding: 0 14px; border: 1px solid #e2e8f0; background: #ffffff; color: #0f172a; border-radius: 10px; /* More rounded */ font-size: 0.88rem; font-weight: 700; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02); /* Subtle base shadow */ } .pagination-btn:hover:not(:disabled) { border-color: #ee9f0d; color: #ee9f0d; background: #fffbf0; transform: translateY(-2px) scale(1.02); box-shadow: 0 5px 15px rgba(238, 159, 13, 0.1); } .pagination-btn.active { background: #ee9f0d; color: #ffffff; border-color: #ee9f0d; box-shadow: 0 6px 18px rgba(238, 159, 13, 0.25); transform: scale(1.08); /* Stronger pop for active */ z-index: 2; } .pagination-btn.btn-prev { margin-right: 25px; /* Larger gap from numbers */ } .pagination-btn.btn-next { margin-left: 25px; /* Larger gap from numbers */ } .pagination-btn:disabled { opacity: 0.4; cursor: not-allowed; background: #f8fafc; } .pagination-btn i { font-size: 0.75rem; } .pagination-ellipsis { color: #94a3b8; padding: 0 8px; font-weight: 600; font-size: 0.9rem; display: inline-flex; align-items: center; justify-content: center; } @media (max-width: 640px) { .pagination-container { flex-direction: column; text-align: center; } .pagination-info { order: 2; } .pagination-controls { order: 1; } } /* Service Unavailable Modal */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .modal-overlay.active { opacity: 1; visibility: visible; } .modal-content { background: var(--white); padding: 40px; border-radius: 24px; width: 90%; max-width: 400px; text-align: center; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.1); transform: scale(0.85); transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .modal-overlay.active .modal-content { transform: scale(1); } .modal-icon { width: 70px; height: 70px; background: #fff7ed; /* Light orange tint */ color: #f97316; /* Professional orange */ border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin: 0 auto 20px; } @keyframes pulseIcon { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(238, 159, 13, 0.4); } 70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(238, 159, 13, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(238, 159, 13, 0); } } .modal-content h2 { font-family: var(--font-head); font-size: 1.5rem; color: var(--dark); margin-bottom: 12px; } .modal-content p { color: var(--gray); line-height: 1.6; font-size: 0.95rem; margin-bottom: 30px; } .modal-btn { background: #ffedd5; /* Solid light orange background */ color: #c2410c; /* High contrast dark orange text */ border: none; /* No stroke as requested */ padding: 12px 35px; border-radius: 12px; font-weight: 700; font-size: 0.95rem; cursor: pointer; width: auto; min-width: 140px; margin-top: 10px; /* No transitions or animations as requested */ } .modal-btn:hover { background: #fed7aa; /* Slightly darker light orange on hover */ } /* Blur main content when modal active */ body.modal-active #sidebar, body.modal-active #mainContent, body.modal-active .premium-dashboard-header, body.modal-active .subheader-external { filter: blur(4px); pointer-events: none; }