/* ============================================================ Font Consistency The entire admin app renders in Outfit. Tailwind's preflight already declares this on , but repeating it here keeps client-side injected components and dynamically built markup in sync. `.font-mono` stays available for codes / IDs / dates. ============================================================ */ html, body { font-family: 'Outfit', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Form controls do not inherit font-family by default, which is a common source of mismatched type between inputs and page copy. */ input, button, select, textarea { font-family: inherit; } /* Custom Scrollbar Utilities */ .custom-scrollbar::-webkit-scrollbar { width: 5px; height: 5px; } .custom-scrollbar::-webkit-scrollbar-track { background: transparent; } .custom-scrollbar::-webkit-scrollbar-thumb { background: #232D42; border-radius: 10px; } .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #475569; } .pattern-bg { background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 32px 32px; } .glow-orb { position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; animation: orbPulse 8s infinite alternate ease-in-out; } /* (Layer closure removed) */ /* Global Base Styles */ a, button, input { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 200ms; } /* (Layer closure removed) */ @keyframes orbPulse { 0% { opacity: 0.5; transform: scale(1) translate(0, 0); } 50% { opacity: 0.7; transform: scale(1.1) translate(2%, 2%); } 100% { opacity: 0.5; transform: scale(1) translate(-2%, -2%); } } /* Page Transitions */ .page-transition { transition: opacity 0.2s ease-in-out; } .page-fade-out { opacity: 0; } .page-fade-in { opacity: 1; } /* Search Dashboard Styles */ #search-results { border: 1px solid rgba(255, 255, 255, 0.05); background-color: rgba(11, 15, 25, 0.95) !important; backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important; z-index: 10 !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05); animation: searchDropdownIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); flex-direction: column; } /* Custom grid cols 5 for dashboard since Tailwind compiled.css lacks it */ @media (min-width: 1024px) { .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .gap-6 { gap: 1.5rem; } .max-w-\[1600px\] { max-width: 1600px; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .py-8 { padding-top: 2rem; padding-bottom: 2rem; } /* ============================================================ Stat Card Values The dashboard stat row is a 5-column grid, so each card is only ~1/5 of the content width. A fixed `text-3xl` value such as "RM 1,234,567.89" is wider than that column and gets clipped by the card's `overflow-hidden`. `.stat-value` is a single-line flex row whose children never shrink, which lets fitStatValue() in dashboard.js measure the natural width (scrollWidth) and scale the font down to fit. ============================================================ */ .stat-value { display: flex; align-items: baseline; gap: 0.25rem; width: 100%; min-width: 0; white-space: nowrap; overflow: hidden; line-height: 1.15; } .stat-value > * { flex: 0 0 auto; } /* Secondary line under a stat value (e.g. "vs. RM 1,234.00 (last yr)") */ .stat-subvalue { max-width: 100%; min-width: 0; overflow-wrap: break-word; } /* Chart Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(2, 6, 23, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .modal-overlay.active { opacity: 1; pointer-events: auto; } .modal-content { background-color: rgba(15, 23, 42, 0.9); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 2rem; width: 90%; max-width: 1400px; height: 85vh; padding: 2.5rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; transform: scale(0.9) translateY(20px); transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .modal-overlay.active .modal-content { transform: scale(1) translateY(0); } .btn-expand { width: 2rem; height: 2rem; border-radius: 0.75rem; background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.05); color: #94a3b8; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; } .btn-expand:hover { background-color: rgba(139, 92, 246, 0.15); color: #a78bfa; border-color: rgba(139, 92, 246, 0.3); transform: scale(1.1); } .modal-header { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2rem; } .modal-toolbar { backdrop-blur-md: 4px; box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.02); } .modal-close { width: 2.5rem; height: 2.5rem; border-radius: 50%; background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.05); color: #94a3b8; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; } .modal-close:hover { background-color: rgba(244, 63, 94, 0.1); color: #fb7185; border-color: rgba(244, 63, 94, 0.2); transform: rotate(90deg); } /* Compact Modal Filters (DOM Re-parenting) */ .modal-compact-filters { background: rgba(255, 255, 255, 0.03) !important; padding: 0.4rem 0.75rem !important; border-radius: 1.25rem !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; flex-direction: row !important; gap: 1rem !important; align-items: center !important; width: auto !important; box-shadow: none !important; } .modal-compact-filters > div { margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; gap: 0.5rem !important; } .modal-compact-filters .custom-select-trigger { padding: 0.35rem 0.6rem !important; font-size: 0.7rem !important; min-height: auto !important; border-radius: 0.6rem !important; min-width: 140px !important; } .modal-compact-filters .ph-caret-down { font-size: 0.75rem !important; } .modal-compact-filters span.uppercase { font-size: 0.65rem !important; opacity: 0.6; } /* Ensure dropdowns are above modal */ .modal-compact-filters .custom-select-dropdown { z-index: 1200 !important; } /* Hide the expand button while in modal */ .modal-compact-filters .btn-expand { display: none !important; } /* Adjust Row 2 (YoY) in modal to be inline */ .modal-compact-filters .self-end, .modal-compact-filters .lg\:self-auto { align-self: center !important; margin: 0 !important; } /* Modal Total Value Badges */ #modal-total-container > div { display: flex; flex-direction: column; justify-content: center; } #modal-total-container span.tracking-widest { letter-spacing: 0.15em !important; margin-bottom: 2px; } #modal-total-container .text-xl { line-height: 1.2; text-shadow: 0 0 20px rgba(255, 255, 255, 0.05); } #search-results:not(.hidden) { display: flex; } @keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } .animate-scale-in { animation: scaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes searchDropdownIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .search-category { padding: 1rem 1.25rem 0.5rem; font-size: 0.65rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.1em; display: flex; align-items: center; gap: 0.75rem; } .search-category::after { content: ''; height: 1px; flex: 1; background-color: rgba(255, 255, 255, 0.05); } .search-item { padding: 0.625rem 1rem; display: flex; align-items: center; gap: 0.875rem; cursor: pointer; transition: all 0.2s ease; margin: 0.125rem 0.625rem; border-radius: 0.75rem; position: relative; overflow: hidden; } .search-item:hover, .search-item.active { background-color: rgba(255, 255, 255, 0.04); } .search-item.active { background-color: rgba(139, 92, 246, 0.1); box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.2); } .search-item-icon { width: 2.25rem; height: 2.25rem; min-width: 2.25rem; border-radius: 0.625rem; background-color: rgba(15, 23, 42, 0.6); border: 1px solid rgba(255, 255, 255, 0.05); display: flex; align-items: center; justify-content: center; color: #94a3b8; transition: all 0.2s ease; } .search-item:hover .search-item-icon, .search-item.active .search-item-icon { color: #a78bfa; border-color: rgba(139, 92, 246, 0.3); background-color: rgba(139, 92, 246, 0.1); } .search-item-title { font-size: 0.8125rem; font-weight: 500; color: #e2e8f0; transition: color 0.2s ease; } .search-item:hover .search-item-title, .search-item.active .search-item-title { color: #ffffff; } .search-item-info { font-size: 0.6875rem; color: #64748b; transition: color 0.2s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-item:hover .search-item-info, .search-item.active .search-item-info { color: #94a3b8; } /* Type Badges */ .search-badge { padding: 0.125rem 0.5rem; border-radius: 0.375rem; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border-width: 1px; border-style: solid; } .badge-page { background-color: rgba(59, 130, 246, 0.1); color: #60a5fa; border-color: rgba(59, 130, 246, 0.2); } .badge-product { background-color: rgba(139, 92, 246, 0.1); color: #a78bfa; border-color: rgba(139, 92, 246, 0.2); } .badge-outlet { background-color: rgba(16, 185, 129, 0.1); color: #34d399; border-color: rgba(16, 185, 129, 0.2); } .badge-user { background-color: rgba(245, 158, 11, 0.1); color: #fbbf24; border-color: rgba(245, 158, 11, 0.2); } .search-empty { padding: 4rem 2rem; text-align: center; } .search-empty i { font-size: 3rem; color: #1e293b; margin-bottom: 1rem; display: block; } .search-empty p { font-size: 0.875rem; color: #64748b; font-weight: 500; } /* Scrollbar refinement for results */ #search-results-content::-webkit-scrollbar { width: 4px; } #search-results-content::-webkit-scrollbar-track { background: transparent; } #search-results-content::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.1); border-radius: 10px; } /* Date Input Indicator Color (White for Dark Mode) */ input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; } /* Custom Searchable Select Styles */ .custom-select-container { position: relative; user-select: none; } .custom-select-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.75rem 1rem; background-color: #0F172A; border: 1px solid #1E293B; border-radius: 0.75rem; font-size: 0.875rem; color: #E2E8F0; cursor: pointer; transition: all 0.2s ease; } .custom-select-trigger:hover { border-color: rgba(139, 92, 246, 0.3); background-color: rgba(139, 92, 246, 0.05); } .custom-select-trigger.active { border-color: #8B5CF6; outline: none; box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.5); } .custom-select-dropdown { position: absolute; top: calc(100% + 0.5rem); left: 0; width: 100%; max-height: 300px; background-color: #0F172A; border: 1px solid #1E293B; border-radius: 0.75rem; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4); z-index: 50; overflow: hidden; display: flex; flex-direction: column; opacity: 0; transform: translateY(-10px) scale(0.98); pointer-events: none; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .custom-select-dropdown.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .custom-select-search-container { padding: 0.5rem; border-bottom: 1px solid #1E293B; background-color: #0F172A; position: sticky; top: 0; z-index: 10; } .custom-select-search { width: 100%; padding: 0.5rem 0.75rem; background-color: #1E293B; border: 1px solid transparent; border-radius: 0.5rem; font-size: 0.8125rem; color: #F8FAFC; outline: none; transition: all 0.2s ease; } .custom-select-search:focus { border-color: #8B5CF6; background-color: #1E293B; } .custom-select-options { flex-grow: 1; overflow-y: auto; padding: 0.25rem; } .custom-select-option { padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-size: 0.8125rem; color: #94A3B8; cursor: pointer; transition: all 0.15s ease; } .custom-select-option:hover { background-color: rgba(139, 92, 246, 0.1); color: #F8FAFC; } .custom-select-option.selected { background-color: rgba(139, 92, 246, 0.2); color: #A78BFA; font-weight: 500; } .custom-select-option.hidden { display: none; } /* Modal Total Value Badges */ #modal-total-container > div { display: flex; flex-direction: column; justify-content: center; } #modal-total-container span.tracking-widest { letter-spacing: 0.15em !important; margin-bottom: 2px; font-size: 9px !important; } #modal-total-container .text-xl { line-height: 1.1; font-size: 1.25rem !important; text-shadow: 0 0 20px rgba(255, 255, 255, 0.05); } /* Product Catalog Card Sizing & Image Masking */ .product-card-group { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .product-card-img-container { position: relative; height: auto !important; aspect-ratio: 1 / 1 !important; /* Forces a perfect square */ width: 100% !important; overflow: hidden !important; flex-shrink: 0 !important; background-color: #0b0f19 !important; } .product-card-img { width: 100% !important; height: 100% !important; object-fit: cover !important; filter: brightness(0.9); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .product-card-group:hover .product-card-img { transform: scale(1.1) !important; filter: brightness(1) !important; } /* Image Carousel Navigation Controls */ .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 1.5rem; height: 1.5rem; border-radius: 9999px; background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; color: #ffffff; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); z-index: 10; opacity: 0; } .product-card-group:hover .carousel-btn { opacity: 0.8; } .carousel-btn:hover { background-color: rgba(0, 0, 0, 0.8) !important; opacity: 1 !important; } .carousel-btn-prev { left: 8px; } .carousel-btn-next { right: 8px; } /* Touch-device optimizations (always show carousel buttons since hover doesn't exist) */ @media (hover: none) { .carousel-btn { opacity: 0.7; } } /* Product Image Upload Preview Card - Cover Badge */ .image-cover-badge { position: absolute !important; top: 8px !important; left: 8px !important; z-index: 20 !important; font-weight: 800 !important; font-size: 8px !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; background-color: #8b5cf6 !important; /* Brand purple */ color: #ffffff !important; padding: 2px 8px !important; border-radius: 4px !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); border: 1px solid rgba(139, 92, 246, 0.3) !important; pointer-events: none !important; } /* Set as Cover button styling */ .btn-set-cover { display: flex; align-items: center; justify-content: center; padding: 0.5rem; background-color: rgba(139, 92, 246, 0.95); color: #ffffff; border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); transition: all 0.2s ease; } .btn-set-cover:hover { background-color: rgb(139, 92, 246); transform: scale(1.1); } /* --- News Detail Modal — Full-Screen Overlay, Half-Width Panel --- */ /* Container: full-screen overlay with centered flex */ .news-modal-container:not(.hidden) { display: flex !important; align-items: center !important; justify-content: center !important; } /* Panel: initially hidden via transform+opacity */ .news-modal-panel { width: 50vw !important; height: 90vh !important; border-radius: 1.25rem !important; border: 1px solid rgba(35, 45, 66, 0.8) !important; transform: scale(0.95) !important; opacity: 0 !important; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; position: relative !important; z-index: 1 !important; overflow: hidden !important; flex-shrink: 0 !important; } /* Panel open state */ .news-modal-panel.desktop-open { transform: scale(1) !important; opacity: 1 !important; } /* Responsive: on small screens use full width */ @media (max-width: 768px) { .news-modal-panel { width: 95vw !important; height: 92vh !important; } } /* Content area padding */ .news-modal-content-area { padding-left: 2.5rem !important; padding-right: 2.5rem !important; padding-top: 2rem !important; padding-bottom: 2rem !important; } .news-modal-header-area { padding-left: 2rem !important; padding-right: 2rem !important; }