/* UniWeb — Light Mode (default). Applied when */ html[data-theme="light"] { color-scheme: light; } html[data-theme="light"] body.bg-dark-950, html[data-theme="light"] body { background-color: #f1f5f9 !important; color: #0f172a !important; } html[data-theme="light"] .bg-dark-950, html[data-theme="light"] footer.bg-dark-950 { background-color: #ffffff !important; } html[data-theme="light"] .bg-dark-900, html[data-theme="light"] .bg-dark-900\/90, html[data-theme="light"] .bg-dark-900\/95, html[data-theme="light"] .bg-dark-900\/50 { background-color: #ffffff !important; } html[data-theme="light"] .bg-dark-800, html[data-theme="light"] .bg-dark-800\/50 { background-color: #e2e8f0 !important; } html[data-theme="light"] .glass { background: #ffffff !important; border-color: #e2e8f0 !important; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); } html[data-theme="light"] .stat-card { background: #ffffff !important; border-color: #e2e8f0 !important; } html[data-theme="light"] .input-field, html[data-theme="light"] select.input-field, html[data-theme="light"] textarea.input-field { background: #ffffff !important; border-color: #cbd5e1 !important; color: #0f172a !important; } html[data-theme="light"] .input-field::placeholder { color: #94a3b8 !important; } html[data-theme="light"] .sidebar-shell, html[data-theme="light"] .sidebar-footer, html[data-theme="light"] aside { background: #ffffff !important; border-color: #e2e8f0 !important; } html[data-theme="light"] .border-gray-800, html[data-theme="light"] .border-gray-800\/50, html[data-theme="light"] .border-gray-800\/70, html[data-theme="light"] .border-gray-800\/80, html[data-theme="light"] .border-gray-900, html[data-theme="light"] .divide-gray-800 > * { border-color: #e2e8f0 !important; } html[data-theme="light"] .border-gray-700 { border-color: #cbd5e1 !important; } /* Strong readable text — light mode was washing fonts out before */ html[data-theme="light"] .text-white, html[data-theme="light"] .text-gray-100, html[data-theme="light"] .text-gray-200 { color: #0f172a !important; } html[data-theme="light"] .text-gray-300 { color: #1e293b !important; } html[data-theme="light"] .text-gray-400 { color: #334155 !important; } html[data-theme="light"] .text-gray-500 { color: #475569 !important; } html[data-theme="light"] .text-gray-600 { color: #64748b !important; } html[data-theme="light"] .text-gray-700 { color: #334155 !important; } html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3, html[data-theme="light"] .font-bold, html[data-theme="light"] .font-semibold { color: #0f172a; } html[data-theme="light"] .hover\:bg-white\/5:hover, html[data-theme="light"] .hover\:bg-white\/10:hover { background-color: rgba(15, 23, 42, 0.05) !important; } html[data-theme="light"] .bg-white\/5 { background-color: rgba(15, 23, 42, 0.04) !important; } html[data-theme="light"] table thead, html[data-theme="light"] .bg-dark-900\/50 { background-color: #f8fafc !important; } html[data-theme="light"] a.text-white:hover, html[data-theme="light"] .hover\:text-white:hover { color: #0f172a !important; } html[data-theme="light"] .sidebar-link { color: #475569 !important; } html[data-theme="light"] .sidebar-link:hover, html[data-theme="light"] .sidebar-link.active { color: #0f172a !important; background: #f1f5f9 !important; } html[data-theme="light"] nav.glass, html[data-theme="light"] header { background: rgba(255, 255, 255, 0.95) !important; border-color: #e2e8f0 !important; } html[data-theme="light"] footer { background: #ffffff !important; border-color: #e2e8f0 !important; color: #334155 !important; } /* Public homepage: never leave dark gradients behind dark text in light mode. */ html[data-theme="light"] .public-hero { background: linear-gradient(135deg, #f8fafc 0%, #ecfeff 48%, #ecfdf5 100%) !important; } html[data-theme="light"] .public-hero > .absolute.inset-0 { background: linear-gradient(135deg, rgba(16,185,129,.12), #f8fafc 48%, rgba(6,182,212,.12)) !important; } html[data-theme="light"] [class*="from-dark-950"][class*="to-dark-950"], html[data-theme="light"] [class*="via-dark-950"] { background-image: linear-gradient(to bottom, #f8fafc, #ffffff, #f1f5f9) !important; } html[data-theme="light"] footer a { color: #475569 !important; transition: color .15s ease; } html[data-theme="light"] footer a:hover { color: #059669 !important; } html[data-theme="light"] .site-footer-heading { color: #0f172a !important; font-weight: 600; } /* Panel footer readability improvements */ html[data-theme="light"] footer .text-gray-400 { color: #64748b !important; } html[data-theme="light"] footer .text-gray-500, html[data-theme="light"] footer .text-gray-600 { color: #64748b !important; } html[data-theme="light"] footer .font-mono { color: #475569 !important; } /* Public footer text contrast */ html[data-theme="light"] .site-footer-card .text-gray-400 { color: #475569 !important; } /* Four clear footer columns. Desktop: 4 side-by-side; mobile: clean 2 × 2. */ .site-footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } .site-footer-card { min-width: 0; min-height: 13rem; padding: 1.25rem; border: 1px solid #475569; border-radius: .875rem; background: rgba(17, 24, 39, .60); transition: border-color .15s ease, background .15s ease; } .site-footer-card:hover { border-color: #64748b; background: rgba(17, 24, 39, .70); } .site-footer-bottom { padding: 1rem 1.25rem; border: 1px solid #475569; border-radius: .875rem; background: rgba(17, 24, 39, .60); } html[data-theme="light"] .site-footer-card { background: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: 0 1px 3px rgba(15, 23, 42, .08); } html[data-theme="light"] .site-footer-card:hover { border-color: #94a3b8 !important; box-shadow: 0 2px 4px rgba(15, 23, 42, .12); } html[data-theme="light"] .site-footer-bottom { background: #f8fafc !important; border-color: #cbd5e1 !important; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); } @media (max-width: 640px) { .site-footer-wrap { padding-left: .75rem !important; padding-right: .75rem !important; } .site-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } .site-footer-card { min-height: 0; padding: 1rem; } .site-footer-bottom { padding: .875rem; text-align: center; } } html[data-theme="light"] code, html[data-theme="light"] pre { color: inherit; } .theme-toggle-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.6rem; border-radius: 0.6rem; border: 1px solid #cbd5e1; color: inherit; font-size: 0.75rem; background: transparent; cursor: pointer; transition: background 0.15s ease; } .theme-toggle-btn:hover { background: rgba(15, 23, 42, 0.06); } html:not([data-theme="light"]) .theme-toggle-btn { border-color: rgba(255, 255, 255, 0.12); } html:not([data-theme="light"]) .theme-toggle-btn:hover { background: rgba(255, 255, 255, 0.08); } /* Visible file upload zone (works in light + dark) */ .file-drop { display: block; border: 2px dashed #475569; border-radius: 0.75rem; padding: 1.25rem; text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .file-drop:hover { border-color: #059669; background: rgba(5, 150, 105, 0.06); } html[data-theme="light"] .file-drop { border-color: #94a3b8; background: #f8fafc; } html[data-theme="light"] .file-drop:hover { border-color: #059669; background: #ecfdf5; } .file-drop input[type="file"] { display: block; width: 100%; margin-top: 0.75rem; font-size: 0.875rem; color: inherit; } /* Portal readability and icon hardening */ html[data-theme="light"] .bg-gray-800, html[data-theme="light"] .bg-gray-800\/50, html[data-theme="light"] .bg-gray-900 { background-color: #e2e8f0 !important; } html[data-theme="light"] .text-brand-300, html[data-theme="light"] .text-brand-400, html[data-theme="light"] .text-brand-500 { color: #047857 !important; } html[data-theme="light"] .text-sky-300, html[data-theme="light"] .text-sky-400, html[data-theme="light"] .text-sky-500 { color: #0369a1 !important; } html[data-theme="light"] .text-emerald-300, html[data-theme="light"] .text-emerald-400, html[data-theme="light"] .text-emerald-500, html[data-theme="light"] .text-emerald-600 { color: #047857 !important; } html[data-theme="light"] .text-amber-300, html[data-theme="light"] .text-amber-400, html[data-theme="light"] .text-amber-500 { color: #b45309 !important; } html[data-theme="light"] .text-red-300, html[data-theme="light"] .text-red-400, html[data-theme="light"] .text-red-500 { color: #b91c1c !important; } html[data-theme="light"] .text-violet-300, html[data-theme="light"] .text-violet-400 { color: #6d28d9 !important; } html[data-theme="light"] .btn-primary, html[data-theme="light"] button.bg-brand-600, html[data-theme="light"] a.bg-brand-600, html[data-theme="light"] button.bg-emerald-600, html[data-theme="light"] a.bg-emerald-600, html[data-theme="light"] button.bg-red-600, html[data-theme="light"] a.bg-red-600, html[data-theme="light"] button.bg-sky-600, html[data-theme="light"] a.bg-sky-600 { color: #ffffff !important; } .portal-main svg.w-4 { width: 1rem !important; height: 1rem !important; min-width: 1rem; max-width: 1rem; } .portal-main svg.w-5, .sidebar-link svg { width: 1.25rem !important; height: 1.25rem !important; min-width: 1.25rem; max-width: 1.25rem; } .portal-main svg.w-6 { width: 1.5rem !important; height: 1.5rem !important; min-width: 1.5rem; max-width: 1.5rem; } .portal-main svg.w-4, .portal-main svg.w-5, .portal-main svg.w-6, .sidebar-link svg { display: block !important; flex: 0 0 auto !important; overflow: visible !important; } .sidebar-link { overflow: visible !important; min-height: 2.5rem; } .notification-row { display: flex !important; align-items: flex-start; width: 100%; } .notification-row > .flex-1 { min-width: 0; } /* Compact, bordered three-row checkout footer */ .checkout-footer { margin-top: 0 !important; } .checkout-footer-row { display: grid; grid-template-columns: 9rem minmax(0, 1fr); align-items: center; gap: .75rem; min-height: 2.65rem; padding: .5rem .75rem; border: 1px solid #334155; margin-top: -1px; color: #94a3b8; font-size: .7rem; line-height: 1.3; } .checkout-footer-row:first-child { margin-top: 0; border-radius: .75rem .75rem 0 0; } .checkout-footer-row:last-child { border-radius: 0 0 .75rem .75rem; } .checkout-footer-row > strong { color: #e2e8f0; font-size: .7rem; } .checkout-footer-row > div, .checkout-footer-row nav { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .55rem; } .checkout-footer-chip { display: inline-flex; align-items: center; padding: .18rem .45rem; border: 1px solid #334155; border-radius: .4rem; color: #cbd5e1; white-space: nowrap; } .checkout-footer-muted { color: #64748b; } .checkout-footer-legal { grid-template-columns: minmax(0, 1fr) auto; } .checkout-footer-legal a { color: #94a3b8; } .checkout-footer-legal a:hover { color: #38bdf8; } html[data-theme="light"] .checkout-footer { background: #f8fafc !important; border-color: #cbd5e1 !important; } html[data-theme="light"] .checkout-footer-row, html[data-theme="light"] .checkout-footer-chip { border-color: #cbd5e1; } html[data-theme="light"] .checkout-footer-row { color: #475569; background: #ffffff; } html[data-theme="light"] .checkout-footer-row > strong { color: #0f172a; } html[data-theme="light"] .checkout-footer-chip { color: #334155; background: #f8fafc; } html[data-theme="light"] .checkout-footer-legal a { color: #334155; } /* * Mobile layout guard: body is flex-col, and flex items default to * min-width:auto. Wide tables / code / tour thumbs then expand the page * wider than the viewport — zoom-out makes the footer look stuck on one side. */ html { overflow-x: hidden; overflow-x: clip; } body { overflow-x: hidden; overflow-x: clip; width: 100%; max-width: 100%; } body.flex > *:not(script):not(style) { min-width: 0; max-width: 100%; } footer { width: 100%; max-width: 100%; box-sizing: border-box; } pre, table { max-width: 100%; } pre { overflow-x: auto; } /* Consistent public spacing: compact without changing portal cards/forms. */ .site-footer-wrap { width: 100%; max-width: 80rem; box-sizing: border-box; padding-top: 2rem !important; padding-bottom: 2rem !important; } .site-footer-grid { gap: 1rem; } .site-footer-card { min-height: 0; padding: 1.25rem; } .site-footer-bottom { margin-top: 1rem !important; padding: 1rem 1.25rem; } .public-site > section:not(.public-hero) { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; } @media (max-width: 640px) { .site-footer-wrap { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .site-footer-grid { gap: .75rem; } .site-footer-card { padding: 1rem; } .site-footer-bottom { margin-top: .75rem !important; padding: .75rem 1rem; } .checkout-footer-row, .checkout-footer-legal { grid-template-columns: 1fr; gap: .3rem; padding: .55rem .65rem; } .checkout-footer-legal > span { font-size: .62rem; } .public-site > section:not(.public-hero) { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; } } /* Overnight responsive polish — panels / tables (login pages untouched) */ main .overflow-x-auto, .glass > .overflow-x-auto, #merchant-results .overflow-x-auto, #admin-transaction-results .overflow-x-auto, #admin-settlement-results .overflow-x-auto { -webkit-overflow-scrolling: touch; max-width: 100%; } @media (max-width: 640px) { main .stat-card .text-2xl, main .glass .text-2xl { font-size: 1.25rem; line-height: 1.3; } main .btn-primary, main button.btn-primary, main a.btn-primary { min-height: 44px; } /* Keep panel footers readable on laptop/narrow widths */ footer .font-mono { font-size: 0.65rem; } /* Enhanced mobile tap targets and spacing */ footer nav a, footer .site-footer-card a { min-height: 2.25rem; display: inline-flex; align-items: center; } }