/** * ═══════════════════════════════════════════════════════════════ * 🌐 UNIFIED PORTAL CSS — आकाश सहकारी * ═══════════════════════════════════════════════════════════════ * फाइल: assets/css/unified-portal.css * * यो एउटै CSS फाइलले Public Website, Admin, Member र Verify * Portal — सबैको shared base styles handle गर्छ। * * Load order (सबै portal को मा यही क्रममा): * 1. Bootstrap 5 (CDN) * 2. Font Awesome (CDN) * 3. assets/css/unified-portal.css ← यो फाइल * 4. assets/css/global-theme.php ← DB colors inject * 5. Portal-specific CSS (admin.css / member.css / etc.) * * ⚠️ यो फाइलमा कुनै पनि color hardcode नगर्नुस्। * सधैं CSS variables (--primary-color, etc.) प्रयोग गर्नुस्। * ═══════════════════════════════════════════════════════════════ * Version: 2.0 | Unified across all portals * ═══════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════ 1. FONT IMPORTS ════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Mukta:wght@300;400;500;600;700&family=Noto+Sans+Devanagari:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap'); /* ════════════════════════════════════════════════════════════ 2. BASE RESET & BODY ════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-primary, 'Mukta', 'Noto Sans Devanagari', 'Inter', sans-serif); font-size: var(--font-size-base, 0.9375rem); line-height: 1.7; color: var(--text-primary, #1a2e1f); background-color: var(--bg-page, #f8faf9); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; } /* Headings */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-primary); font-weight: 700; line-height: 1.3; color: var(--text-primary); margin-bottom: 0.5em; } h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); } h2 { font-size: clamp(1.35rem, 3vw, 1.9rem); } h3 { font-size: clamp(1.15rem, 2.5vw, 1.5rem); } h4 { font-size: clamp(1.05rem, 2vw, 1.25rem); } h5 { font-size: 1.05rem; } h6 { font-size: 0.95rem; } a { color: var(--primary-color); text-decoration: none; transition: color var(--transition-fast, 0.15s ease); } a:hover { color: var(--primary-dark); } img { max-width: 100%; height: auto; } input, select, textarea, button { font-family: inherit; } ::selection { background: var(--primary-color); color: var(--text-on-primary, #fff); } /* ════════════════════════════════════════════════════════════ 3. LAYOUT UTILITIES ════════════════════════════════════════════════════════════ */ .container-coop { max-width: var(--container-max, 1280px); margin: 0 auto; padding: 0 var(--container-pad, 20px); width: 100%; } .page-wrapper { min-height: 100vh; display: flex; flex-direction: column; } .page-content { flex: 1; padding: var(--space-lg, 24px) 0; } /* Grid helpers */ .coop-grid { display: grid; gap: var(--space-md, 16px); } .coop-grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .coop-grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .coop-grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } /* ════════════════════════════════════════════════════════════ 4. CARDS — सबै portal मा एकरूप ════════════════════════════════════════════════════════════ */ .card { background: var(--bg-card, #fff); border: 1px solid var(--border-soft, #f0f0f0); border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-sm, 0 1px 4px rgba(0,0,0,.08)); transition: box-shadow var(--transition-base, 0.25s ease), transform var(--transition-base, 0.25s ease); overflow: hidden; } .card:hover { box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,.10)); } .card-header { background: var(--bg-soft, #f5faf6); border-bottom: 1px solid var(--border-soft, #f0f0f0); padding: 0.9rem 1.25rem; font-weight: 600; font-size: var(--font-size-base); border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; } .card-body { padding: 1.25rem; } .card-footer { background: var(--bg-soft, #f5faf6); border-top: 1px solid var(--border-soft, #f0f0f0); padding: 0.75rem 1.25rem; border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important; } /* Stat Card — dashboard numbers */ .stat-card { background: var(--bg-card, #fff); border-radius: var(--radius-lg); padding: var(--space-lg, 24px); border: 1px solid var(--border-soft); box-shadow: var(--shadow-sm); display: flex; align-items: flex-start; gap: var(--space-md); transition: box-shadow var(--transition-base), transform var(--transition-base); } .stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .stat-card-icon { width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--bg-muted, #e8f5e9); display: flex; align-items: center; justify-content: center; color: var(--primary-color); font-size: 1.3rem; flex-shrink: 0; } .stat-card-value { font-size: var(--font-size-2xl, 1.5rem); font-weight: 700; color: var(--text-primary); line-height: 1.2; } .stat-card-label { font-size: var(--font-size-sm, 0.8125rem); color: var(--text-muted, #6b7280); margin-top: 2px; } /* Clickable card */ a.card, .card-link { display: block; color: inherit; text-decoration: none; } a.card:hover { color: inherit; } /* ════════════════════════════════════════════════════════════ 5. BUTTONS — सबै panel मा एकरूप ════════════════════════════════════════════════════════════ */ .btn { font-family: var(--font-primary); font-weight: 500; border-radius: var(--radius-md, 10px); padding: 0.45rem 1.1rem; font-size: var(--font-size-sm, 0.8125rem); transition: all var(--transition-base, 0.25s ease); letter-spacing: 0.01em; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border: 1.5px solid transparent; line-height: 1.5; } .btn-sm { padding: 0.28rem 0.75rem; font-size: var(--font-size-xs, 0.75rem); } .btn-lg { padding: 0.65rem 1.6rem; font-size: var(--font-size-md, 1rem); } /* Primary */ .btn-primary { background: var(--primary-color) !important; border-color: var(--primary-color) !important; color: var(--text-on-primary, #fff) !important; } .btn-primary:hover, .btn-primary:focus { background: var(--primary-dark) !important; border-color: var(--primary-dark) !important; color: var(--text-on-primary, #fff) !important; box-shadow: 0 4px 12px rgba(var(--primary-rgb, 26,95,42), 0.3) !important; transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); } /* Outline primary */ .btn-outline-primary { background: transparent !important; color: var(--primary-color) !important; border-color: var(--primary-color) !important; } .btn-outline-primary:hover { background: var(--primary-color) !important; color: var(--text-on-primary, #fff) !important; } /* Danger */ .btn-danger { background: var(--color-danger, #dc2626) !important; border-color: var(--color-danger) !important; color: #fff !important; } .btn-danger:hover { background: #b91c1c !important; border-color: #b91c1c !important; color: #fff !important; } .btn-outline-danger { color: var(--color-danger) !important; border-color: var(--color-danger) !important; background: transparent !important; } .btn-outline-danger:hover { background: var(--color-danger) !important; color: #fff !important; } /* Warning */ .btn-warning { background: var(--color-warning, #d97706) !important; border-color: var(--color-warning) !important; color: #fff !important; } .btn-warning:hover { background: #b45309 !important; border-color: #b45309 !important; color: #fff !important; } /* Success */ .btn-success { background: var(--color-success, #16a34a) !important; border-color: var(--color-success) !important; color: #fff !important; } .btn-success:hover { background: #15803d !important; border-color: #15803d !important; color: #fff !important; } /* Info */ .btn-info { background: var(--color-info, #0891b2) !important; border-color: var(--color-info) !important; color: #fff !important; } .btn-info:hover { background: #0e7490 !important; border-color: #0e7490 !important; color: #fff !important; } /* Secondary */ .btn-secondary { background: #6b7280 !important; border-color: #6b7280 !important; color: #fff !important; } .btn-secondary:hover { background: #4b5563 !important; border-color: #4b5563 !important; color: #fff !important; } /* Ghost / Muted */ .btn-ghost { background: transparent; color: var(--text-secondary); border-color: var(--border-color); } .btn-ghost:hover { background: var(--bg-soft); color: var(--text-primary); } /* ════════════════════════════════════════════════════════════ 6. FORMS — सबै portal मा एकरूप ════════════════════════════════════════════════════════════ */ .form-label { font-weight: 500; font-size: var(--font-size-sm, 0.8125rem); color: var(--text-secondary, #4a5a4f); margin-bottom: 0.35rem; } .form-label .text-danger { font-size: 0.7em; margin-left: 2px; } .form-control, .form-select { font-family: var(--font-primary); font-size: var(--font-size-base, 0.9375rem); border: 1.5px solid var(--border-color, #e5e7eb); border-radius: var(--radius-md, 10px); padding: 10px 14px; min-height: 44px; color: var(--text-primary, #1a2e1f); background-color: var(--bg-card, #fff); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); line-height: 1.5; width: 100%; } .form-control-sm, .form-select-sm { min-height: 36px; padding: 0.32rem 0.75rem; font-size: var(--font-size-sm); } .form-control:focus, .form-select:focus { outline: none; border-color: var(--primary-color); box-shadow: var(--shadow-focus, 0 0 0 3px rgba(26,95,42,0.18)); background-color: #fff; } .form-control::placeholder { color: var(--text-light, #9ca3af); font-size: var(--font-size-sm); } .form-control.is-invalid, .form-select.is-invalid { border-color: var(--color-danger) !important; } .form-control.is-valid, .form-select.is-valid { border-color: var(--color-success) !important; } textarea.form-control { min-height: 100px; resize: vertical; } .input-group-text { background: var(--bg-soft, #f5faf6); border: 1.5px solid var(--border-color, #e5e7eb); color: var(--text-muted); font-size: var(--font-size-sm); min-height: 44px; padding: 10px 14px; border-radius: var(--radius-md); } /* Checkbox / Radio */ .form-check { padding-left: 1.85em !important; min-height: 1.6rem !important; margin-bottom: 0.35rem !important; } .form-check .form-check-input { margin-left: -1.85em !important; margin-top: 0.2em !important; flex-shrink: 0; } .form-check-label { cursor: pointer; line-height: 1.45; padding-left: 4px; } .form-check-inline { display: inline-flex !important; align-items: center !important; margin-right: 1.1rem !important; padding-left: 1.85em !important; } .form-switch { padding-left: 2.8em !important; } .form-switch .form-check-input { margin-left: -2.8em !important; width: 2.2em !important; height: 1.15em !important; } /* Form section card — सबै portal मा एउटै */ .form-section { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: var(--shadow-sm); } .form-section-title { font-size: var(--font-size-lg, 1.125rem); font-weight: 600; color: var(--primary-color); padding-bottom: 0.6rem; border-bottom: 2px solid var(--bg-muted, #e8f5e9); margin-bottom: 1.2rem; display: flex; align-items: center; gap: 8px; } .form-section-title i { color: var(--primary-color); } /* ════════════════════════════════════════════════════════════ 7. TABLES — सबै panel मा एकरूप ════════════════════════════════════════════════════════════ */ .table { font-size: var(--font-size-sm, 0.8125rem); color: var(--text-primary); margin-bottom: 0; } .table th { background: var(--bg-soft, #f5faf6); font-weight: 600; font-size: var(--font-size-xs, 0.75rem); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary, #4a5a4f); border-bottom: 2px solid var(--border-color, #e5e7eb); padding: 0.75rem 1rem; white-space: nowrap; vertical-align: middle; } .table td { padding: 0.7rem 1rem; vertical-align: middle; border-color: var(--border-soft, #f0f0f0); } .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(var(--primary-rgb, 26,95,42), 0.025); } .table-hover > tbody > tr:hover > * { background-color: rgba(var(--primary-rgb, 26,95,42), 0.05); transition: background var(--transition-fast); } /* Responsive table wrapper */ .table-responsive { border-radius: var(--radius-lg); overflow: hidden; } .table-card { background: var(--bg-card); border-radius: var(--radius-lg); border: 1px solid var(--border-soft); box-shadow: var(--shadow-sm); overflow: hidden; } .table-card .table { margin-bottom: 0; } /* ════════════════════════════════════════════════════════════ 8. BADGES & STATUS CHIPS — सबै panel मा एकरूप ════════════════════════════════════════════════════════════ */ .badge { font-family: var(--font-primary); font-weight: 600; border-radius: var(--radius-full, 9999px); padding: 3px 10px; font-size: 0.72em; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 4px; } /* Soft pill badges (preferred over filled) */ .badge-soft-primary { background: var(--bg-muted); color: var(--primary-color); border: 1px solid rgba(var(--primary-rgb),0.2); } .badge-soft-success { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success-border); } .badge-soft-warning { background: var(--color-warning-bg); color: var(--color-warning); border: 1px solid var(--color-warning-border); } .badge-soft-danger { background: var(--color-danger-bg); color: var(--color-danger); border: 1px solid var(--color-danger-border); } .badge-soft-info { background: var(--color-info-bg); color: var(--color-info); border: 1px solid var(--color-info-border); } .badge-soft-muted { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; } /* Workflow/Request status — सबैतिर एकनासो — .badge base extend गर्छ */ .status-pending, .status-approved, .status-rejected, .status-review, .status-active, .status-inactive { display: inline-flex; align-items: center; border-radius: var(--radius-full); padding: 3px 10px; font-size: 0.72em; font-weight: 600; border-width: 1px; border-style: solid; line-height: 1.4; } .status-pending { background: var(--color-warning-bg); color: var(--color-warning); border-color: var(--color-warning-border); } .status-approved { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success-border); } .status-rejected { background: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger-border); } .status-review { background: var(--color-info-bg); color: var(--color-info); border-color: var(--color-info-border); } .status-active { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success-border); } .status-inactive { background: #f1f5f9; color: #64748b; border-color: #cbd5e1; } /* Active/Inactive dot indicator */ .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; } .status-dot.active { background: var(--color-success); } .status-dot.inactive { background: #94a3b8; } .status-dot.pending { background: var(--color-warning); } /* ════════════════════════════════════════════════════════════ 9. ALERTS — सबै panel मा एकरूप ════════════════════════════════════════════════════════════ */ .alert { border-radius: var(--radius-md, 10px); border-width: 1px; font-size: var(--font-size-sm); padding: 0.85rem 1rem; display: flex; align-items: flex-start; gap: 10px; } .alert-success { background: var(--color-success-bg) !important; color: var(--color-success) !important; border-color: var(--color-success-border) !important; } .alert-warning { background: var(--color-warning-bg) !important; color: var(--color-warning) !important; border-color: var(--color-warning-border) !important; } .alert-danger, .alert-error { background: var(--color-danger-bg) !important; color: var(--color-danger) !important; border-color: var(--color-danger-border) !important; } .alert-info, .alert-primary { background: var(--color-info-bg) !important; color: var(--color-info) !important; border-color: var(--color-info-border) !important; } /* coop-alert — panel-uniform.php को coopAlert() ले generate गर्ने */ .coop-alert { border-radius: var(--radius-md); padding: 12px 16px; display: flex; align-items: center; gap: 10px; margin: 12px 0; box-shadow: var(--shadow-sm); font-family: var(--font-primary); font-size: var(--font-size-sm); position: relative; } .coop-alert-close { background: none; border: none; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 4px; opacity: 0.7; transition: opacity var(--transition-fast); margin-left: auto; } .coop-alert-close:hover { opacity: 1; } /* ════════════════════════════════════════════════════════════ 10. MODALS — सबै panel मा एकरूप ════════════════════════════════════════════════════════════ */ .modal-content { border: none; border-radius: var(--radius-xl, 24px); box-shadow: var(--shadow-xl); overflow: hidden; } .modal-header { background: var(--bg-soft); border-bottom: 1px solid var(--border-soft); padding: 1.1rem 1.5rem; border-radius: var(--radius-xl) var(--radius-xl) 0 0; } .modal-header .modal-title { font-weight: 700; font-size: var(--font-size-lg); color: var(--primary-color); } .modal-body { padding: 1.5rem; } .modal-footer { background: var(--bg-soft); border-top: 1px solid var(--border-soft); padding: 1rem 1.5rem; border-radius: 0 0 var(--radius-xl) var(--radius-xl); } .modal-backdrop.show { opacity: 0.5; } /* ════════════════════════════════════════════════════════════ 11. PAGE BANNER — सबै public pages मा एकरूप ════════════════════════════════════════════════════════════ */ .page-banner { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%); padding: 24px 0 28px; position: relative; overflow: hidden; text-align: center; } .page-banner::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; } .page-banner::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(to right, transparent 0%, #c8860a 15%, #f5c518 40%, #ffd700 50%, #f5c518 60%, #c8860a 85%, transparent 100%); } .page-banner .container { position: relative; z-index: 1; } .page-banner h1 { color: #fff; font-size: clamp(1.25rem, 3vw, 1.75rem); margin-bottom: 6px; text-shadow: 0 1px 6px rgba(0,0,0,0.2); } .page-banner p { color: rgba(255,255,255,0.8); margin-bottom: 0; } .page-banner .breadcrumb { margin-bottom: 0; background: transparent; padding: 0; justify-content: center; } .page-banner .breadcrumb-item a { color: rgba(255,255,255,0.8); } .page-banner .breadcrumb-item a:hover { color: #fff; } .page-banner .breadcrumb-item.active { color: rgba(255,255,255,0.95); } .page-banner .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.45); } /* ════════════════════════════════════════════════════════════ 12. SECTION HEADER — सबै pages मा एकरूप ════════════════════════════════════════════════════════════ */ .section-header { margin-bottom: 2rem; text-align: center; } .section-header h2, .section-header h3 { font-weight: 700; color: var(--primary-dark); margin-bottom: 0.5rem; } .section-header p { color: var(--text-muted); font-size: var(--font-size-base); margin-bottom: 0; } .section-divider { width: 60px; height: 3px; background: linear-gradient(to right, var(--primary-color), var(--secondary-color)); margin: 0.5rem auto 1rem; border-radius: var(--radius-full); } /* ════════════════════════════════════════════════════════════ 13. MOBILE-FIRST RESPONSIVE — सबै portal एकरूप ════════════════════════════════════════════════════════════ */ /* Mobile sidebar overlay */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: var(--z-overlay, 300); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .sidebar-overlay.active { display: block; } /* Mobile bottom nav — App-like experience */ .mobile-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg-card, #fff); border-top: 1px solid var(--border-soft); box-shadow: 0 -4px 20px rgba(0,0,0,0.08); z-index: var(--z-sticky, 200); padding: 6px 0 max(6px, env(safe-area-inset-bottom)); height: 62px; } .mobile-bottom-nav .nav-items { display: flex; align-items: center; justify-content: space-around; height: 100%; } .mobile-bottom-nav .nav-item-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; padding: 4px 10px; color: var(--text-muted); text-decoration: none; font-size: 0.62rem; font-weight: 500; transition: color var(--transition-fast); min-width: 52px; border: none; background: none; border-radius: var(--radius-md); } .mobile-bottom-nav .nav-item-btn i { font-size: 1.2rem; } .mobile-bottom-nav .nav-item-btn.active, .mobile-bottom-nav .nav-item-btn:hover { color: var(--primary-color); } @media (max-width: 768px) { .mobile-bottom-nav { display: flex; } body.has-bottom-nav { padding-bottom: 70px; } .hide-mobile { display: none !important; } .show-mobile { display: block !important; } .coop-grid-3, .coop-grid-4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .table-responsive { font-size: var(--font-size-xs); } .table th, .table td { padding: 0.5rem 0.75rem; } .card-body { padding: 1rem; } .form-section { padding: 1rem; } .modal-dialog { margin: 0.5rem; } .modal-content { border-radius: var(--radius-lg); } } @media (max-width: 480px) { .btn-group-mobile-stack { flex-direction: column !important; width: 100%; } .btn-group-mobile-stack .btn { width: 100%; justify-content: center; } h1 { font-size: 1.5rem; } h2 { font-size: 1.25rem; } } /* ════════════════════════════════════════════════════════════ 14. UTILITY CLASSES ════════════════════════════════════════════════════════════ */ /* Text */ .text-primary-coop { color: var(--primary-color) !important; } .text-muted-coop { color: var(--text-muted) !important; } .text-nepali { font-family: var(--font-nepali) !important; } .text-english { font-family: var(--font-english) !important; } /* Background */ .bg-primary-coop { background: var(--primary-color) !important; color: var(--text-on-primary) !important; } .bg-soft-coop { background: var(--bg-soft) !important; } .bg-muted-coop { background: var(--bg-muted) !important; } /* Borders */ .border-primary-coop { border-color: var(--primary-color) !important; } .border-left-primary { border-left: 4px solid var(--primary-color) !important; } /* Spacing shortcuts */ .gap-xs { gap: var(--space-xs); } .gap-sm { gap: var(--space-sm); } .gap-md { gap: var(--space-md); } .gap-lg { gap: var(--space-lg); } /* Shadows */ .shadow-coop-sm { box-shadow: var(--shadow-sm) !important; } .shadow-coop-md { box-shadow: var(--shadow-md) !important; } .shadow-coop-lg { box-shadow: var(--shadow-lg) !important; } /* Radius */ .rounded-coop { border-radius: var(--radius-md) !important; } .rounded-coop-lg { border-radius: var(--radius-lg) !important; } /* Visibility — mobile responsive (defined in section 13 media query above) */ /* hide-mobile: mobile ma hidden, desktop ma visible — @media block ma override huncha */ /* show-mobile: desktop ma hidden, mobile ma visible — @media block ma override huncha */ /* Flex helpers */ .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-start { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-sm); } /* Divider */ .divider-coop { border: none; border-top: 1px solid var(--border-soft); margin: var(--space-md) 0; } /* Empty state */ .empty-state { text-align: center; padding: var(--space-2xl) var(--space-lg); color: var(--text-muted); } .empty-state-icon { font-size: 3rem; color: var(--text-light); margin-bottom: var(--space-md); } .empty-state-title { font-weight: 600; color: var(--text-secondary); margin-bottom: var(--space-sm); } .empty-state-desc { font-size: var(--font-size-sm); } /* Loading spinner */ .coop-spinner { width: 2rem; height: 2rem; border: 3px solid var(--bg-muted); border-top-color: var(--primary-color); border-radius: 50%; animation: coop-spin 0.7s linear infinite; display: inline-block; } @keyframes coop-spin { to { transform: rotate(360deg); } } /* Tooltip */ .coop-tooltip { position: relative; display: inline-block; } .coop-tooltip:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #1a2e1f; color: #fff; font-size: var(--font-size-xs); padding: 5px 10px; border-radius: var(--radius-sm); white-space: nowrap; z-index: var(--z-tooltip, 600); pointer-events: none; } /* Nepali prose content */ .coop-prose { font-family: var(--font-nepali); line-height: 1.9; color: var(--text-primary); font-size: var(--font-size-base); } .coop-prose p { margin-bottom: 1em; } .coop-prose h1, .coop-prose h2, .coop-prose h3 { color: var(--primary-color); } /* Print utilities */ @media print { .no-print, .mobile-bottom-nav, .sidebar-overlay { display: none !important; } .page-banner { background: var(--primary-color) !important; -webkit-print-color-adjust: exact; } .card { box-shadow: none !important; border: 1px solid #ccc !important; } }