/* ============================================================ Sales Manager – Mobile-First Complete Stylesheet v3 Target: https://ppm.rajnet.co.in ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=Rajdhani:wght@500;600;700&display=swap'); /* ── CSS Variables ─────────────────────────────────────────── */ :root { --primary: #1a3c5e; --primary-dark: #0f2540; --primary-light: #2563a8; --accent: #f97316; --accent-dark: #ea6c0a; --success: #16a34a; --danger: #dc2626; --warning: #d97706; --info: #0284c7; --bg: #f0f4f8; --text: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 2px 12px rgba(26,60,94,0.09); --shadow-md: 0 4px 24px rgba(26,60,94,0.12); --shadow-lg: 0 8px 40px rgba(26,60,94,0.16); --radius: 14px; --radius-sm: 10px; --radius-xs: 7px; --font: 'Nunito', sans-serif; --font-display: 'Rajdhani', sans-serif; --transition: all 0.22s cubic-bezier(0.4,0,0.2,1); --sidebar-w: 256px; --topbar-h: 60px; } /* ── Reset ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* KEY: html and body must never have overflow:hidden or overflow:auto The browser scrolls by default — never interfere with that. */ html { -webkit-text-size-adjust: 100%; /* Allow normal scroll on all devices */ overflow-x: hidden; scroll-behavior: smooth; } body { font-family: var(--font); color: var(--text); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; /* Never set overflow or height on body — breaks mobile scroll */ background: var(--bg); } img { max-width: 100%; display: block; } a { color: inherit; } /* ================================================================ AUTH PAGES — background painted on body, layout in .auth-wrap ================================================================ */ .auth-body { /* Only paint the gradient background — nothing else */ background: linear-gradient(145deg, var(--primary-dark) 0%, var(--primary) 55%, var(--primary-light) 100%); /* min-height so short pages still fill screen */ min-height: 100vh; /* decorative circles use fixed so they don't affect scroll */ position: relative; } .auth-body::before { content: ''; position: fixed; top: -80px; right: -80px; width: 280px; height: 280px; border-radius: 50%; background: rgba(249,115,22,0.13); pointer-events: none; z-index: 0; } .auth-body::after { content: ''; position: fixed; bottom: -80px; left: -80px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255,255,255,0.04); pointer-events: none; z-index: 0; } /* .auth-wrap — the actual flex layout container. For SHORT pages (login, forgot-pw): center vertically. For LONG pages (signup, business-signup): start at top — scroll naturally. CRITICAL: do NOT set min-height:100vh on auth-top — it forces the container taller than content and blocks scroll on iOS Safari. */ .auth-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; /* short pages fill screen */ padding: 28px 16px 48px; width: 100%; max-width: 100%; position: relative; z-index: 1; /* Prevent horizontal overflow when browser renders at desktop width */ overflow-x: hidden; } /* Long forms start at top — NO min-height so iOS can scroll freely */ .auth-wrap.auth-top { justify-content: flex-start; min-height: unset; /* ← critical fix for iOS scroll */ padding-top: 32px; padding-bottom: 60px; } /* ── Logo ──────────────────────────────────────────────────── */ .logo-wrap { display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; z-index: 1; width: 100%; } .logo-icon { width: 64px; height: 64px; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); border-radius: 18px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 28px; font-weight: 700; color: white; box-shadow: 0 6px 24px rgba(249,115,22,0.4); margin-bottom: 8px; } .logo-icon svg { width: 36px; height: 36px; } .logo-name { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: white; letter-spacing: 2px; } .logo-tagline { font-size: 11px; color: rgba(255,255,255,0.55); letter-spacing: 2.5px; text-transform: uppercase; margin-top: 2px; } /* ── Auth card ─────────────────────────────────────────────── */ .auth-card { background: white; border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 24px 20px; width: 100%; max-width: 460px; position: relative; z-index: 1; animation: slideUp 0.3s ease; } /* Business signup card is wider */ .auth-card.auth-card-wide { max-width: 580px; } @media (max-width: 480px) { .auth-card { padding: 20px 14px; border-radius: 12px; } } @keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .auth-title { font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--primary); margin-bottom: 3px; } .auth-subtitle { color: var(--text-muted); font-size: 13px; margin-bottom: 20px; } .auth-links { display: flex; gap: 8px; justify-content: center; margin-top: 18px; flex-wrap: wrap; z-index: 1; width: 100%; max-width: 460px; } .auth-links a { color: rgba(255,255,255,0.82); text-decoration: none; font-size: 13px; font-weight: 600; padding: 6px 14px; border: 1px solid rgba(255,255,255,0.28); border-radius: 20px; transition: var(--transition); } .auth-links a:hover { background: rgba(255,255,255,0.14); color: white; } /* ================================================================ FORM CONTROLS ================================================================ */ .form-group { margin-bottom: 14px; } .form-label { display: block; font-weight: 700; font-size: 11px; color: var(--primary); margin-bottom: 5px; letter-spacing: 0.5px; text-transform: uppercase; } .form-label .req { color: var(--danger); margin-left: 2px; } .input-wrap { position: relative; } .input-wrap .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 15px; pointer-events: none; line-height: 1; /* prevent icon from intercepting touch */ z-index: 0; } .form-control { width: 100%; padding: 11px 12px 11px 40px; border: 2px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font); font-size: 15px; /* 15px prevents iOS zoom-on-focus */ color: var(--text); background: #f8fafc; transition: var(--transition); outline: none; -webkit-appearance: none; appearance: none; min-height: 48px; /* good touch target */ position: relative; z-index: 1; } .form-control:focus { border-color: var(--primary-light); background: white; box-shadow: 0 0 0 3px rgba(37,99,168,0.10); } .form-control.no-icon { padding-left: 12px; } .form-control.is-invalid { border-color: var(--danger); } .form-control.is-valid { border-color: var(--success); } select.form-control { cursor: pointer; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } /* FIX: Disabled selects are INVISIBLE to Tab and arrow keys. Instead of disabled, we use a "locked" visual state via CSS only. JS will set pointer-events and aria-disabled instead. */ select.form-control[disabled], select.form-control.select-locked { background-color: #f1f5f9; color: var(--text-muted); cursor: not-allowed; border-color: var(--border); /* Still FOCUSABLE — just visually muted */ pointer-events: none; } /* When actually loaded and ready */ select.form-control:not([disabled]):not(.select-locked) { pointer-events: auto; color: var(--text); } textarea.form-control { padding-top: 10px; min-height: 80px; resize: vertical; line-height: 1.5; } .toggle-pass { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 8px; display: flex; align-items: center; min-width: 40px; min-height: 40px; justify-content: center; z-index: 2; } /* Mobile: stack form rows */ .form-row { display: flex; gap: 10px; flex-wrap: wrap; } .form-row .form-group { flex: 1; min-width: 140px; } @media (max-width: 420px) { .form-row { flex-direction: column; gap: 0; } .form-row .form-group { min-width: 100%; } } .form-text { font-size: 12px; color: var(--text-muted); margin-top: 4px; } .invalid-feedback { font-size: 12px; color: var(--danger); margin-top: 4px; display: none; } .form-control.is-invalid ~ .invalid-feedback { display: block; } /* ── Section labels ─────────────────────────────────────────── */ .section-label { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--primary); margin-bottom: 12px; } .section-box { background: #f8fafc; border-radius: 10px; padding: 16px; margin-bottom: 14px; } /* ================================================================ BUTTONS ================================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 22px; border-radius: var(--radius-sm); font-family: var(--font); font-size: 14px; font-weight: 700; border: 2px solid transparent; cursor: pointer; transition: var(--transition); text-decoration: none; letter-spacing: 0.2px; white-space: nowrap; min-height: 48px; /* proper touch target */ -webkit-tap-highlight-color: transparent; position: relative; z-index: 1; } .btn-primary { background: linear-gradient(135deg,var(--primary-light),var(--primary)); color: white; box-shadow: 0 3px 12px rgba(37,99,168,0.28); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 5px 18px rgba(37,99,168,0.38); } .btn-accent { background: linear-gradient(135deg,var(--accent),var(--accent-dark)); color: white; box-shadow: 0 3px 12px rgba(249,115,22,0.28); } .btn-accent:hover { transform: translateY(-1px); box-shadow: 0 5px 18px rgba(249,115,22,0.38); } .btn-success { background: linear-gradient(135deg,#22c55e,#16a34a); color: white; } .btn-danger { background: linear-gradient(135deg,#f87171,#dc2626); color: white; } .btn-warning { background: linear-gradient(135deg,#fbbf24,#d97706); color: white; } .btn-info { background: linear-gradient(135deg,#38bdf8,#0284c7); color: white; } .btn-outline { background: transparent; border-color: var(--primary-light); color: var(--primary-light); } .btn-outline:hover { background: var(--primary-light); color: white; } .btn-light { background: white; border-color: var(--border); color: var(--text); } .btn-sm { padding: 8px 16px; font-size: 13px; border-radius: var(--radius-xs); min-height: 38px; } .btn-xs { padding: 5px 10px; font-size: 12px; border-radius: 6px; min-height: 32px; } .btn-full { width: 100%; } .btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; box-shadow: none !important; } /* ================================================================ CHECKBOX ================================================================ */ .check-wrap { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; user-select: none; padding: 4px 0; } .check-wrap input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--primary-light); cursor: pointer; flex-shrink: 0; margin-top: 1px; } .check-wrap span { font-size: 13px; color: var(--text-muted); line-height: 1.5; } /* ================================================================ ALERTS ================================================================ */ .alert { padding: 12px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; margin-bottom: 14px; display: flex; align-items: flex-start; gap: 10px; animation: slideUp 0.25s ease; line-height: 1.5; } .alert-danger { background: #fef2f2; color: #991b1b; border-left: 4px solid var(--danger); } .alert-success { background: #f0fdf4; color: #166534; border-left: 4px solid var(--success); } .alert-info { background: #eff6ff; color: #1e40af; border-left: 4px solid var(--info); } .alert-warning { background: #fffbeb; color: #92400e; border-left: 4px solid var(--warning); } .divider { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: var(--text-muted); font-size: 12px; font-weight: 600; } .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* ================================================================ DASHBOARD LAYOUT ================================================================ */ .app-layout { display: flex; min-height: 100vh; } /* ── Sidebar ─────────────────────────────────────────────────────── */ .sidebar { width: var(--sidebar-w); background: linear-gradient(180deg, var(--primary-dark) 0%, var(--primary) 100%); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 200; overflow-y: auto; overflow-x: hidden; transition: transform 0.28s cubic-bezier(0.4,0,0.2,1); -webkit-overflow-scrolling: touch; transform: translateX(-100%); /* hidden by default on all screens */ } @media (min-width: 1024px) { .sidebar { transform: translateX(0); } } .sidebar.open { transform: translateX(0); } .sidebar-logo { padding: 18px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); flex-shrink: 0; } .sidebar-logo-icon { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg,var(--accent),var(--accent-dark)); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 16px; font-weight: 700; color: white; flex-shrink: 0; } .sidebar-logo-text { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: white; letter-spacing: 1px; } .sidebar-logo-sub { font-size: 10px; color: rgba(255,255,255,0.45); letter-spacing: 2px; text-transform: uppercase; } .sidebar-nav { padding: 12px 0; flex: 1; } .nav-section { padding: 10px 16px 4px; font-size: 10px; font-weight: 800; letter-spacing: 1.8px; color: rgba(255,255,255,0.32); text-transform: uppercase; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 11px 18px; color: rgba(255,255,255,0.72); text-decoration: none; font-size: 13.5px; font-weight: 600; transition: var(--transition); border-left: 3px solid transparent; margin: 1px 0; min-height: 46px; } .nav-item:hover { color: white; background: rgba(255,255,255,0.07); } .nav-item.active { color: white; background: rgba(249,115,22,0.18); border-left-color: var(--accent); } .nav-item svg { width: 17px; height: 17px; flex-shrink: 0; } .sidebar-footer { padding: 12px; border-top: 1px solid rgba(255,255,255,0.1); flex-shrink: 0; } /* ── Overlay ─────────────────────────────────────────────────────── */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.52); z-index: 199; } .sidebar-overlay.show { display: block; } /* ── Topbar ──────────────────────────────────────────────────────── */ .topbar { height: var(--topbar-h); background: white; border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 16px; gap: 12px; position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 6px rgba(0,0,0,0.06); } .topbar-menu-btn { background: none; border: none; cursor: pointer; padding: 8px; color: var(--text); display: flex; align-items: center; border-radius: 8px; min-width: 40px; min-height: 40px; justify-content: center; } .topbar-menu-btn:hover { background: var(--bg); } @media (min-width: 1024px) { .topbar-menu-btn { display: none !important; } } .topbar-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--primary); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-user { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .user-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg,var(--primary-light),var(--primary)); display: flex; align-items: center; justify-content: center; color: white; font-weight: 800; font-size: 14px; flex-shrink: 0; } .user-name { font-weight: 700; font-size: 13px; line-height: 1.2; } .user-role { font-size: 11px; color: var(--text-muted); } /* ── Main content ────────────────────────────────────────────────── */ .main-content { flex: 1; display: flex; flex-direction: column; min-height: 100vh; margin-left: 0; transition: margin-left 0.28s ease; /* Prevent horizontal overflow on main content */ overflow-x: hidden; min-width: 0; } @media (min-width: 1024px) { .main-content { margin-left: var(--sidebar-w); } } .page-content { padding: 16px; flex: 1; } @media (min-width: 640px) { .page-content { padding: 20px; } } @media (min-width: 1024px) { .page-content { padding: 24px; } } /* ================================================================ CARDS ================================================================ */ .card { background: white; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .card + .card { margin-top: 16px; } .card-header { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .card-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--primary); } .card-body { padding: 16px; } /* ================================================================ STAT CARDS ================================================================ */ .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; } @media (min-width: 900px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1200px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } } .stat-card { background: white; border-radius: var(--radius); padding: 14px 16px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow); transition: var(--transition); } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .stat-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .stat-icon.blue { background: #eff6ff; } .stat-icon.orange { background: #fff7ed; } .stat-icon.green { background: #f0fdf4; } .stat-icon.red { background: #fef2f2; } .stat-icon.purple { background: #f5f3ff; } .stat-value { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--text); line-height: 1; } .stat-label { font-size: 12px; color: var(--text-muted); font-weight: 600; margin-top: 3px; } /* ================================================================ TABLES → CARD LIST on mobile ================================================================ */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { width: 100%; border-collapse: collapse; } thead th { background: #f8fafc; padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 800; color: var(--text-muted); letter-spacing: 0.5px; text-transform: uppercase; border-bottom: 2px solid var(--border); white-space: nowrap; } tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; } tbody tr:last-child td { border-bottom: none; } tbody tr:hover { background: #f8fafc; } @media (max-width: 639px) { .mobile-cards table, .mobile-cards thead { display: none; } .mobile-cards tbody { display: flex; flex-direction: column; gap: 10px; padding: 12px; } .mobile-cards tbody tr { display: block; background: white; border-radius: var(--radius-sm); border: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; } .mobile-cards tbody td { display: flex; align-items: flex-start; padding: 9px 14px; border-bottom: 1px solid var(--border); font-size: 13px; gap: 8px; } .mobile-cards tbody td:last-child { border-bottom: none; } .mobile-cards tbody td::before { content: attr(data-label); font-size: 11px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; min-width: 80px; flex-shrink: 0; padding-top: 1px; } .mobile-cards td.hide-xs { display: none; } .table-wrap.mobile-cards { overflow-x: visible; } } /* ================================================================ BADGES ================================================================ */ .badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; white-space: nowrap; } .badge-success { background: #dcfce7; color: #166534; } .badge-danger { background: #fee2e2; color: #991b1b; } .badge-warning { background: #fef3c7; color: #92400e; } .badge-info { background: #dbeafe; color: #1e40af; } .badge-secondary { background: #f1f5f9; color: #475569; } /* ================================================================ PAGINATION ================================================================ */ .pagination { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; } .page-btn { min-width: 36px; height: 36px; border: 1px solid var(--border); background: white; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; text-decoration: none; } .page-btn:hover, .page-btn.active { background: var(--primary-light); color: white; border-color: var(--primary-light); } /* ================================================================ GRID LAYOUTS ================================================================ */ .grid-2col { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 768px) { .grid-2col { grid-template-columns: 1fr 1fr; } } .grid-main-side { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 900px) { .grid-main-side { grid-template-columns: 1fr 300px; } } .grid-dash { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 16px; } @media (min-width: 1024px) { .grid-dash { grid-template-columns: 1fr 320px; } } .detail-grid { display: grid; grid-template-columns: 1fr; gap: 0; } @media (min-width: 480px) { .detail-grid { grid-template-columns: 1fr 1fr; } } .detail-item { padding: 10px 0; border-bottom: 1px solid var(--border); } .detail-item:last-child { border-bottom: none; } .detail-label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-bottom: 2px; } .detail-value { font-size: 13px; font-weight: 700; color: var(--text); word-break: break-word; } /* ================================================================ SEARCH / FILTER BAR ================================================================ */ .search-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .search-bar .form-control { min-width: 0; flex: 1; } .search-bar .btn { flex-shrink: 0; } @media (max-width: 480px) { .search-bar { flex-direction: column; align-items: stretch; } .search-bar .form-control, .search-bar select { width: 100%; max-width: 100% !important; } } /* ================================================================ PLAN CARDS ================================================================ */ .plan-cards { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 20px; } @media (min-width: 480px) { .plan-cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .plan-cards { grid-template-columns: repeat(3, 1fr); } } .plan-card { background: white; border-radius: var(--radius); border: 2px solid var(--border); padding: 20px; cursor: pointer; transition: var(--transition); position: relative; } .plan-card:hover { border-color: var(--primary-light); box-shadow: var(--shadow); } .plan-card.selected { border-color: var(--primary-light); box-shadow: 0 0 0 3px rgba(37,99,168,0.12); } .plan-card.featured { border-color: var(--accent); } .plan-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--accent); color: white; font-size: 10px; font-weight: 800; padding: 2px 12px; border-radius: 20px; white-space: nowrap; } .plan-name { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--primary); } .plan-price { font-size: 28px; font-weight: 900; color: var(--text); line-height: 1.2; margin: 6px 0; } .plan-price span { font-size: 13px; color: var(--text-muted); font-weight: 600; } .plan-features { list-style: none; margin-top: 12px; } .plan-features li { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; color: var(--text-muted); padding: 3px 0; line-height: 1.4; } .plan-features li::before { content: '✓'; color: var(--success); font-weight: 800; font-size: 13px; flex-shrink: 0; } /* ================================================================ DROPDOWN USER MENU ================================================================ */ .user-dropdown { position: relative; } .user-dropdown-menu { position: absolute; top: calc(100% + 6px); right: 0; background: white; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); min-width: 170px; overflow: hidden; border: 1px solid var(--border); display: none; z-index: 300; } .user-dropdown:hover .user-dropdown-menu, .user-dropdown.open .user-dropdown-menu { display: block; } .dropdown-item { display: flex; align-items: center; gap: 9px; padding: 11px 14px; font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none; transition: var(--transition); min-height: 44px; } .dropdown-item:hover { background: var(--bg); } .dropdown-item.danger { color: var(--danger); } /* ================================================================ EMPTY STATE / FEED / SPINNER / TABS ================================================================ */ .empty-state { text-align: center; padding: 48px 16px; color: var(--text-muted); } .empty-state .empty-icon { font-size: 48px; opacity: 0.4; margin-bottom: 12px; } .empty-state h3 { font-size: 15px; font-weight: 700; margin-bottom: 6px; } .feed-item { padding: 12px 14px; border-bottom: 1px solid var(--border); display: flex; gap: 10px; } .feed-item:last-child { border-bottom: none; } .feed-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; } .feed-body { flex: 1; min-width: 0; } .feed-name { font-size: 13px; font-weight: 700; } .feed-meta { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .feed-time { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .spinner { display: inline-block; width: 18px; height: 18px; border: 3px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .tab-nav { display: flex; gap: 4px; background: white; padding: 6px; border-radius: 12px; box-shadow: var(--shadow); width: fit-content; max-width: 100%; overflow-x: auto; margin-bottom: 20px; -webkit-overflow-scrolling: touch; } .tab-btn { padding: 8px 14px; border-radius: 8px; font-weight: 700; font-size: 13px; cursor: pointer; color: var(--text-muted); border: none; background: none; white-space: nowrap; transition: var(--transition); min-height: 36px; font-family: var(--font); } .tab-btn.active { background: var(--primary); color: white; } .tab-btn:hover:not(.active) { background: var(--bg); color: var(--primary); } /* ================================================================ PASSWORD STRENGTH ================================================================ */ .strength-track { height: 4px; border-radius: 2px; background: var(--border); margin-top: 6px; overflow: hidden; } .strength-bar { height: 100%; width: 0; border-radius: 2px; transition: all 0.3s; } /* ================================================================ UTILITIES ================================================================ */ .d-flex { display: flex; } .align-center { align-items: center; } .justify-between { justify-content: space-between; } .flex-wrap { flex-wrap: wrap; } .gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 14px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 14px; } .mb-4 { margin-bottom: 20px; } .fw-bold { font-weight: 700; } .text-center { text-align: center; } .text-right { text-align: right; } .text-success { color: var(--success); } .text-danger { color: var(--danger); } .text-warning { color: var(--warning); } .text-muted { color: var(--text-muted); } .text-primary { color: var(--primary-light); } .text-sm { font-size: 12px; } .text-xs { font-size: 11px; } .w-100 { width: 100%; } .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hide-mobile { display: none !important; } @media (min-width: 768px) { .hide-mobile { display: flex !important; } .hide-desktop { display: none !important; } } /* Focus ring for keyboard accessibility */ :focus-visible { outline: 2px solid var(--primary-light); outline-offset: 2px; }