/** * Customer portal — dark theme (Bootstrap 5 + custom layout) * Load after bootstrap.min.css with */ html[data-bs-theme="dark"] { color-scheme: dark; } html[data-bs-theme="dark"] body.portal-app, html[data-bs-theme="dark"] body.login-page-body { --portal-bg: #0a0a12; --portal-card: #12121f; --portal-surface: #12121f; --portal-surface-2: #1a1a2e; --portal-border: #2d2d48; --portal-text: #ececf4; --portal-muted: #b4b4c8; --portal-faint: #8b8ba3; color: var(--portal-text); } /* ── App shell ── */ body.portal-app { min-height: 100vh; background: var(--portal-bg); color: #ececf4; font-family: 'Segoe UI', system-ui, sans-serif; } .portal-impersonation-banner { position: sticky; top: 0; z-index: 1045; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding: 0.55rem 1rem; background: linear-gradient(90deg, #92400e, #b45309); color: #fffbeb; font-size: 0.85rem; border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .portal-impersonation-banner .btn-warning { color: #78350f; font-weight: 600; } .portal-mobile-header { position: sticky; top: 0; z-index: 1030; background: var(--portal-card); border-bottom: 1px solid var(--portal-border); padding: 0.5rem 0.65rem; gap: 0.5rem; align-items: center; } .portal-mobile-brand { min-width: 0; line-height: 1.25; text-align: center; padding: 0 0.25rem; } .portal-mobile-brand .portal-mobile-name { font-size: 0.9rem; font-weight: 600; color: #fff; letter-spacing: 0.01em; } .portal-mobile-brand .portal-mobile-phone { font-size: 0.75rem; font-weight: 500; color: var(--portal-muted); margin-top: 0.1rem; letter-spacing: 0.02em; } .portal-mobile-header .btn-menu { flex-shrink: 0; width: 2.5rem; height: 2.5rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--portal-border); background: rgba(99, 102, 241, 0.15); color: #e8e8f0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .portal-mobile-header .btn-menu:hover { background: rgba(99, 102, 241, 0.28); color: #fff; } .portal-mobile-header .btn-menu .fa-times { display: none; } .portal-mobile-header .btn-menu[aria-expanded="true"] .fa-bars { display: none; } .portal-mobile-header .btn-menu[aria-expanded="true"] .fa-times { display: inline-block; } .portal-mobile-header-spacer { width: 2.5rem; } .portal-mobile-nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 1040; } .portal-mobile-nav-backdrop.active { display: block; } .portal-mobile-nav { position: fixed; top: 0; left: 0; width: min(280px, 88vw); height: 100vh; height: 100dvh; background: var(--portal-card); color: #ececf4; z-index: 1045; transform: translateX(-100%); transition: transform 0.3s ease; overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: none; } .portal-mobile-nav.open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.45); } body.portal-menu-open { overflow: hidden; } .portal-sidebar { width: 240px; min-height: 100vh; background: var(--portal-card); border-right: 1px solid var(--portal-border); position: fixed; left: 0; top: 0; padding: 1.25rem; } .portal-sidebar strong { color: #fff; } .portal-nav-links a { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.75rem; border-radius: 10px; color: #c4c4d4; text-decoration: none; margin-bottom: 4px; } .portal-nav-links a:hover, .portal-nav-links a.active { background: rgba(99, 102, 241, 0.2); color: #fff; } .portal-nav-links .notif-badge { margin-left: auto; font-size: 0.7rem; line-height: 1; min-width: 1.15rem; text-align: center; border-radius: 999px; padding: 0.2rem 0.35rem; background: #22d3ee; color: #0f172a; font-weight: 700; } .portal-nav-links a.text-danger { color: #fca5a5 !important; } .portal-nav-links a.text-danger:hover { color: #fecaca !important; } .portal-mobile-nav .portal-nav-links a { cursor: pointer; touch-action: manipulation; } .portal-mobile-nav-head { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 0.75rem; padding: 1rem 1rem 0.85rem; border-bottom: 1px solid var(--portal-border); } .portal-mobile-nav-profile { flex: 1; min-width: 0; padding-top: 0.15rem; } .portal-mobile-nav-profile-inner { display: flex; align-items: flex-start; gap: 0.65rem; } .portal-mobile-nav-profile-icon { flex-shrink: 0; font-size: 2.25rem; line-height: 1; color: #818cf8; margin-top: 0.05rem; } .portal-mobile-nav-profile-name { font-size: 1rem; font-weight: 600; color: #fff; line-height: 1.35; word-wrap: break-word; overflow-wrap: anywhere; } .portal-mobile-nav-profile-phone { font-size: 0.82rem; font-weight: 500; color: var(--portal-muted); margin-top: 0.2rem; line-height: 1.35; letter-spacing: 0.02em; } .portal-mobile-nav-close { filter: invert(1); opacity: 0.7; margin: 0; flex-shrink: 0; padding: 0.5rem; transform: translate(0.25rem, -0.15rem); } .portal-mobile-nav-body { padding: 1rem; } .portal-main { margin-left: 240px; padding: 1.5rem 2rem; max-width: 1100px; } @media (max-width: 767.98px) { .portal-main { margin-left: 0; padding: 1rem 1rem 1.5rem; } } /* ── Typography ── */ .portal-main h1, .portal-main h2, .portal-main h3, .portal-main h4, .portal-main h5, .portal-main h6, .portal-main p, .portal-main li, .portal-main .form-label, .portal-main label { color: var(--portal-text); } .portal-main > h2, .portal-main .portal-card > h2, .portal-main .portal-card > h3, .portal-main .portal-card .h5, .portal-main .portal-card .h6 { color: #fff; } .portal-main .text-muted, .portal-sidebar .text-muted, .portal-sidebar .small, .portal-mobile-nav .text-muted, .portal-mobile-nav .small { color: var(--portal-muted) !important; } .portal-main .portal-lead, .portal-main > p.small { color: var(--portal-muted); } .portal-main a:not(.btn) { color: #a5b4fc; } .portal-main a:not(.btn):hover { color: #c7d2fe; } /* ── Cards & panels ── */ .portal-card { background: var(--portal-card); border: 1px solid var(--portal-border); border-radius: 16px; padding: 1.5rem; color: #ececf4; } .portal-card .text-muted { color: var(--portal-muted) !important; } .portal-card > p.mb-0:not(.text-muted) { color: #c8c8dc; } .portal-wallet-balance-banner { background: linear-gradient(145deg, rgba(99, 102, 241, 0.1), rgba(24, 24, 40, 0.95)); } .portal-summary-box { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--portal-border); border-radius: 12px; padding: 1rem; } .portal-pending-banner { border-color: rgba(234, 179, 8, 0.4) !important; background: rgba(234, 179, 8, 0.08) !important; } .portal-pending-banner p { color: #fef3c7 !important; } /* ── Alerts ── */ .portal-alert, .portal-main .alert, .login-page-body .alert { border-width: 1px; border-style: solid; } .alert-success.portal-alert, .portal-main .alert-success, .login-page-body .alert-success { background: rgba(34, 197, 94, 0.18); border-color: rgba(74, 222, 128, 0.45); color: #bbf7d0; } .alert-danger.portal-alert, .portal-main .alert-danger, .login-page-body .alert-danger { background: rgba(239, 68, 68, 0.15); border-color: rgba(248, 113, 113, 0.5); color: #fecaca; } .alert-warning.portal-alert, .portal-main .alert-warning, .login-page-body .alert-warning { background: rgba(234, 179, 8, 0.15); border-color: rgba(250, 204, 21, 0.45); color: #fef08a; } .portal-main .alert .btn-close { filter: invert(1) grayscale(1); opacity: 0.65; } /* ── Tables ── */ .table-dark-custom { --bs-table-color: #ececf4; --bs-table-bg: transparent; --bs-table-border-color: var(--portal-border, #2d2d48); color: #ececf4 !important; border-color: var(--portal-border); } .table-dark-custom thead th { color: #d4d4e8 !important; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom-color: var(--portal-border, #2d2d48) !important; background: rgba(0, 0, 0, 0.2); } .table-dark-custom tbody td, .table-dark-custom tfoot th, .table-dark-custom tfoot td { color: #ececf4 !important; border-color: var(--portal-border, #2d2d48) !important; } .table-dark-custom code { color: #93c5fd !important; } .portal-col-actions { width: 90px; } /* ── Forms ── */ .portal-main .form-control, .portal-main .form-select, .modal .form-control, .modal .form-select { background-color: #0f0f1c; border-color: var(--portal-border, #2d2d48); color: #ececf4; } .portal-main .form-control:focus, .portal-main .form-select:focus, .modal .form-control:focus, .modal .form-select:focus { background-color: #141428; border-color: #6366f1; color: #fff; box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25); } .portal-main .form-control::placeholder, .modal .form-control::placeholder { color: #6b6b86; } .portal-main .form-control[readonly], .modal .form-control[readonly] { background-color: rgba(15, 15, 28, 0.65); color: var(--portal-muted); } .portal-main .input-group-text, .modal .input-group-text { background-color: #141428; border-color: var(--portal-border, #2d2d48); color: var(--portal-muted); } .portal-main .form-text, .modal .form-text { color: var(--portal-faint) !important; } .portal-main dl dt.text-muted, .portal-main dl dd { color: var(--portal-text); } .portal-main dl dt.text-muted { color: var(--portal-muted) !important; } /* ── Modals ── */ .modal-content.text-bg-dark, .modal-content.bg-dark { background-color: #15152a !important; color: #ececf4 !important; border-color: var(--portal-border, #2d2d48) !important; } .modal-content .modal-title { color: #fff !important; } .modal-content .form-label { color: #d4d4e8 !important; } .modal-content .btn-close { filter: invert(1) grayscale(1); opacity: 0.75; } /* ── Dashboard stat cards ── */ .portal-stat-card { background: linear-gradient(145deg, rgba(99, 102, 241, 0.12), rgba(24, 24, 40, 0.95)); border: 1px solid var(--portal-border, #2d2d48); border-radius: 16px; padding: 1.25rem 1.35rem; height: 100%; } .portal-stat-card .stat-value { font-size: 1.75rem; font-weight: 800; color: #fff; letter-spacing: -0.02em; } .portal-stat-card .stat-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--portal-muted); } .portal-stat-card .stat-icon { font-size: 1.35rem; opacity: 0.85; color: #a5b4fc; } a.portal-stat-card-link { display: block; height: 100%; text-decoration: none !important; color: inherit !important; border-radius: 16px; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, filter 0.2s ease; } a.portal-stat-card-link:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); } a.portal-stat-card-link:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 3px; } a.portal-stat-card-link .portal-stat-card { height: 100%; margin: 0; transition: border-color 0.2s ease, background 0.2s ease; } a.portal-stat-card-link:hover .portal-stat-card { border-color: rgba(255, 255, 255, 0.22); } .portal-stat-card--contacts { background: linear-gradient(145deg, rgba(34, 211, 238, 0.18), rgba(15, 23, 42, 0.92)); border-color: rgba(34, 211, 238, 0.35); } a.portal-stat-card-link:hover .portal-stat-card--contacts { background: linear-gradient(145deg, rgba(34, 211, 238, 0.28), rgba(15, 23, 42, 0.88)); border-color: rgba(103, 232, 249, 0.55); } .portal-stat-card--contacts .stat-icon { color: #67e8f9; } .portal-stat-card--orders { background: linear-gradient(145deg, rgba(99, 102, 241, 0.22), rgba(24, 24, 40, 0.95)); border-color: rgba(129, 140, 248, 0.4); } a.portal-stat-card-link:hover .portal-stat-card--orders { background: linear-gradient(145deg, rgba(99, 102, 241, 0.32), rgba(24, 24, 40, 0.9)); border-color: rgba(165, 180, 252, 0.55); } .portal-stat-card--orders .stat-icon { color: #a5b4fc; } .portal-stat-card--delivered { background: linear-gradient(145deg, rgba(34, 197, 94, 0.2), rgba(15, 30, 24, 0.95)); border-color: rgba(74, 222, 128, 0.38); } a.portal-stat-card-link:hover .portal-stat-card--delivered { background: linear-gradient(145deg, rgba(34, 197, 94, 0.3), rgba(15, 30, 24, 0.9)); border-color: rgba(134, 239, 172, 0.55); } .portal-stat-card--delivered .stat-icon { color: #86efac; } .portal-stat-card--pending { background: linear-gradient(145deg, rgba(245, 158, 11, 0.22), rgba(30, 24, 12, 0.95)); border-color: rgba(251, 191, 36, 0.42); } a.portal-stat-card-link:hover .portal-stat-card--pending { background: linear-gradient(145deg, rgba(245, 158, 11, 0.32), rgba(30, 24, 12, 0.9)); border-color: rgba(253, 224, 71, 0.55); } .portal-stat-card--pending .stat-icon { color: #fcd34d; } .portal-stat-card--spend { background: linear-gradient(145deg, rgba(192, 132, 252, 0.2), rgba(28, 18, 40, 0.95)); border-color: rgba(216, 180, 254, 0.38); } a.portal-stat-card-link:hover .portal-stat-card--spend { background: linear-gradient(145deg, rgba(192, 132, 252, 0.3), rgba(28, 18, 40, 0.9)); border-color: rgba(233, 213, 255, 0.5); } .portal-stat-card--spend .stat-icon { color: #e9d5ff; } .portal-stat-card--spend .stat-value { font-size: 1.35rem; } /* ── Order history filters ── */ .portal-history-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; } .portal-history-filters a { display: inline-flex; align-items: center; padding: 0.4rem 0.85rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; text-decoration: none; color: #c4c4d8 !important; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--portal-border, #2d2d48); transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s; } .portal-history-filters a:hover { color: #fff !important; background: rgba(99, 102, 241, 0.2); border-color: rgba(129, 140, 248, 0.45); transform: translateY(-1px); } .portal-history-filters a.active { color: #fff !important; background: linear-gradient(135deg, rgba(99, 102, 241, 0.45), rgba(139, 92, 246, 0.35)); border-color: rgba(165, 180, 252, 0.55); } /* ── Hero & quick actions ── */ .portal-hero { background: linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(139, 92, 246, 0.12) 50%, rgba(15, 15, 28, 0.9) 100%); border: 1px solid var(--portal-border, #2d2d48); border-radius: 20px; padding: 1.75rem 1.5rem; margin-bottom: 1.5rem; } .portal-hero h2 { color: #fff !important; font-weight: 800; } .portal-hero p { color: #c8c8dc !important; max-width: 42rem; } .portal-quick-action { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.15rem; border-radius: 14px; border: 1px solid var(--portal-border, #2d2d48); background: rgba(255, 255, 255, 0.03); text-decoration: none; color: #ececf4 !important; transition: background 0.2s, border-color 0.2s, transform 0.15s; } .portal-quick-action:hover { background: rgba(99, 102, 241, 0.15); border-color: rgba(129, 140, 248, 0.45); color: #fff !important; transform: translateY(-1px); } .portal-quick-action .qa-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(99, 102, 241, 0.25); color: #c7d2fe; font-size: 1.1rem; } .portal-quick-action .qa-title { font-weight: 700; color: #fff; } .portal-quick-action .qa-desc { font-size: 0.85rem; color: var(--portal-muted) !important; } /* ── Payment options ── */ .portal-payment-options-card { background: linear-gradient(145deg, rgba(99, 102, 241, 0.08), rgba(18, 18, 31, 0.98)); } .portal-payment-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } @media (min-width: 768px) { .portal-payment-options { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .portal-payment-option { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 0.9rem; border-radius: 12px; border: 1px solid var(--portal-border, #2d2d48); background: rgba(255, 255, 255, 0.03); min-height: 100%; } .portal-payment-option-img { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; border-radius: 10px; } .portal-payment-option-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .portal-payment-option-label { font-size: 0.85rem; font-weight: 700; color: #fff; line-height: 1.2; } .portal-payment-option-desc { font-size: 0.72rem; color: var(--portal-muted); line-height: 1.3; } .portal-payment-option--wallet { border-color: rgba(99, 102, 241, 0.35); background: rgba(99, 102, 241, 0.1); } .portal-payment-option--momo { border-color: rgba(34, 197, 94, 0.35); background: rgba(34, 197, 94, 0.08); } .portal-payment-option--visa { border-color: rgba(26, 31, 113, 0.45); background: rgba(26, 31, 113, 0.15); } .portal-payment-option--mastercard { border-color: rgba(235, 0, 27, 0.3); background: rgba(235, 0, 27, 0.08); } .portal-tip-box { border-radius: 14px; border: 1px solid rgba(34, 197, 94, 0.35); background: rgba(34, 197, 94, 0.08); padding: 1rem 1.15rem; } .portal-tip-box h3 { font-size: 0.95rem; font-weight: 700; color: #86efac !important; margin-bottom: 0.5rem; } .portal-tip-box p, .portal-tip-box li { color: #d1fae5 !important; font-size: 0.9rem; margin-bottom: 0.35rem; } /* ── Notifications list ── */ .portal-notif-body { color: #d0d0e0; } .portal-main .list-group-item { color: var(--portal-text); } /* ── Badges ── */ .portal-main .badge.bg-secondary { background-color: #3f3f5c !important; color: #ececf4 !important; } /* ── Login page ── */ .login-page-body { min-height: 100vh; background: var(--portal-bg); background-image: radial-gradient(ellipse 90% 60% at 50% -15%, rgba(129, 140, 248, 0.22), transparent), radial-gradient(ellipse 50% 40% at 100% 100%, rgba(192, 132, 252, 0.12), transparent); color: #ececf4; font-family: 'Segoe UI', system-ui, sans-serif; } .login-page-body .text-muted, .login-page-body .form-label.text-muted, .login-page-body label.text-muted { color: #b4b4c8 !important; } .login-page-body .brand p.small, .login-page-body .step-hint { color: #b4b4c8 !important; } .login-page-body #phoneMasked { color: #f8f8ff !important; } .login-page-body .login-card { max-width: 420px; margin: 3rem auto; background: var(--portal-card); border: 1px solid var(--portal-border); border-radius: 20px; padding: 2.25rem; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45); color: #ececf4; } .login-page-body .brand { text-align: center; margin-bottom: 1.75rem; } .login-page-body .brand h1 { font-size: 1.35rem; font-weight: 700; background: linear-gradient(135deg, #818cf8, #c084fc); -webkit-background-clip: text; background-clip: text; color: transparent; } .login-page-body .brand-logo { object-fit: contain; } .login-page-body .form-control, .login-page-body .form-control:focus { background: #0f0f1c; border-color: var(--portal-border); color: #ececf4; border-radius: 12px; } .login-page-body .form-control:focus { box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.25); } .login-page-body .form-label { color: #d4d4e8 !important; } .login-page-body .btn-primary { border: none; border-radius: 12px; padding: 0.65rem 1.25rem; font-weight: 600; background: linear-gradient(135deg, #6366f1, #8b5cf6); } .login-page-body .btn-primary:hover { filter: brightness(1.08); } .login-page-body .btn-outline-light { border-radius: 12px; border-color: var(--portal-border); color: #c4c4d8; } .login-page-body .btn-outline-light:hover { color: #fff; background: rgba(255, 255, 255, 0.08); } .login-page-body .step-hint { font-size: 0.9rem; } .login-page-body .benefits, .login-page-body .benefits li { color: #b4b4c8 !important; } .login-page-body .benefits { font-size: 0.85rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--portal-border); } .login-page-body .benefits li { margin-bottom: 0.4rem; color: #c8c8dc !important; } .login-page-body a.back-shop { color: #a5b4fc !important; text-decoration: none; font-size: 0.9rem; } .login-page-body a.back-shop:hover { color: #e0e7ff !important; text-decoration: underline; }