/* ════════════════════════════════════════════════════════════════ Print Hut — Pro UI Layer (v2.0) Loads LAST on every module page. Unifies typography, motion, surfaces, forms, tables, tabs, cards, modals, and login. ════════════════════════════════════════════════════════════════ */ /* Font loaded by phpr-ui-fresh.css (Plus Jakarta Sans) — skip duplicate Inter fetch */ /* ── Design tokens ─────────────────────────────────────────── */ body.phpr-themed-page { --phpr-pro-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --phpr-pro-primary: #059669; --phpr-pro-primary-light: #10b981; --phpr-pro-primary-dark: #047857; --phpr-pro-primary-deep: #064e3b; --phpr-pro-surface: #ffffff; --phpr-pro-surface-2: #f8fafc; --phpr-pro-surface-glass: rgba(255, 255, 255, 0.72); --phpr-pro-border: #e2e8f0; --phpr-pro-border-accent: #a7f3d0; --phpr-pro-text: #0f172a; --phpr-pro-muted: #64748b; --phpr-pro-radius: 16px; --phpr-pro-radius-lg: 24px; --phpr-pro-radius-xl: 28px; --phpr-pro-shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.06); --phpr-pro-shadow: 0 18px 48px rgba(15, 23, 42, 0.09); --phpr-pro-shadow-lg: 0 28px 64px rgba(5, 150, 105, 0.14); --phpr-pro-gradient: linear-gradient(135deg, #10b981 0%, #059669 48%, #047857 100%); --phpr-pro-gradient-mesh: radial-gradient(ellipse 80% 50% at 0% -20%, rgba(16, 185, 129, 0.18), transparent 55%), radial-gradient(ellipse 60% 40% at 100% 0%, rgba(5, 150, 105, 0.12), transparent 50%), radial-gradient(ellipse 50% 30% at 50% 100%, rgba(167, 243, 208, 0.25), transparent 60%), linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 35%, #f8fafc 100%); font-family: var(--phpr-pro-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--phpr-pro-text); } /* Dot grid disabled — position:fixed overlay caused scroll jank (phpr-ui-perf.css) */ body.phpr-themed-page::before { display: none; } body.phpr-themed-page > *:not(.phpr-modal):not(.phpr-disclaimer-overlay):not(.phpr-proof-lightbox):not(.phpr-action-modal):not(#phpr-action-modals-store) { position: relative; z-index: 1; } /* Portaled modals/overlays on must stay viewport-fixed. */ body.phpr-themed-page > .phpr-modal, body.phpr-themed-page > :is( #phpr-job-modal, #phpr-intake-modal, #phpr-machine-picker ), body.phpr-themed-page > .phpr-disclaimer-overlay, body.phpr-themed-page > .phpr-proof-lightbox { position: fixed !important; z-index: 2147483000 !important; } body.phpr-themed-page > .phpr-proof-lightbox { z-index: 2147483600 !important; } body.phpr-themed-page > .phpr-disclaimer-overlay { z-index: 2147483640 !important; } /* ── Motion ────────────────────────────────────────────────── */ @keyframes phprFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes phprScaleIn { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } } @keyframes phprShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @keyframes phprPulseGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.35); } 50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); } } /* All module roots */ body.phpr-themed-page :is( .phpr-control-room, #phpr-staff-app, #mfApp, #fnApp, #deliveryRoom, #adminDash, #phpr-customer-app, #phpr-upload-app, #driverPortal, #qrApp, .phpr-login-page ) { animation: phprFadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; } /* ── Universal module shell ──────────────────────────────────── */ body.phpr-themed-page :is( #fnApp, #phpr-upload-app, #driverPortal, #qrApp ) { max-width: 1520px; margin-left: auto; margin-right: auto; } /* Admin Dashboard — full viewport width */ body.phpr-themed-page #adminDash { max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; } /* Delivery Manager — full viewport width */ body.phpr-themed-page #deliveryRoom { max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; } /* Proof Room — full viewport width */ body.phpr-themed-page #phpr-staff-app { max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; } /* Control Room — full viewport width */ body.phpr-themed-page .phpr-control-room, body.phpr-themed-page #controlRoom { max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; } /* Print Room — full viewport width */ body.phpr-themed-page #mfApp { max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; } /* Print Hut Shops — full viewport width */ body.phpr-themed-page #phShopRoom { max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; } /* Tea's & Cleaning — full viewport width */ body.phpr-themed-page #scApp { max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; } /* Performance Board — full viewport width */ body.phpr-themed-page #phbRoom.phpr-room--performance-board { max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; } /* Customer proof portal — always full viewport width */ body.phpr-themed-page #phpr-customer-app { max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* ── Glass panels & cards ───────────────────────────────────── */ body.phpr-themed-page :is( .phpr-card, .phpr-panel, .phpr-panel--active, .phpr-section, .phpr-table-wrap, .phpr-status-group, .phpr-job-card, .phpr-intake-card, .phpr-archive-card, .phpr-cr-quick, .phpr-qa-panel, .phpr-action-modal__dialog, .phpr-verify-card, .phpr-upload-card ) { background: var(--phpr-pro-surface) !important; border: 1px solid var(--phpr-pro-border) !important; border-radius: var(--phpr-pro-radius) !important; box-shadow: var(--phpr-pro-shadow-sm) !important; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } body.phpr-themed-page .phpr-job-card:hover, body.phpr-themed-page .phpr-intake-card:hover, body.phpr-themed-page .phpr-cr-card:hover { transform: translateY(-3px); box-shadow: var(--phpr-pro-shadow-lg) !important; border-color: var(--phpr-pro-border-accent) !important; } /* Job cards — premium left accent */ body.phpr-themed-page .phpr-job-card { border-left: 4px solid var(--phpr-pro-primary-light) !important; overflow: hidden; position: relative; } body.phpr-themed-page .phpr-job-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.25), transparent); } /* ── Buttons — unified pro treatment ─────────────────────────── */ body.phpr-themed-page .phpr-btn { font-family: var(--phpr-pro-font); font-weight: 600; letter-spacing: 0.01em; border-radius: 12px !important; transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease, background 0.15s ease; } body.phpr-themed-page .phpr-btn--primary { background: var(--phpr-pro-gradient) !important; border: none !important; color: #fff !important; box-shadow: 0 8px 22px rgba(5, 150, 105, 0.32) !important; } body.phpr-themed-page .phpr-btn--primary:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(5, 150, 105, 0.38) !important; } body.phpr-themed-page .phpr-btn--ghost, body.phpr-themed-page .phpr-btn--secondary { background: var(--phpr-pro-surface-glass) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--phpr-pro-border) !important; color: var(--phpr-pro-primary-deep) !important; } body.phpr-themed-page .phpr-btn--ghost:hover, body.phpr-themed-page .phpr-btn--secondary:hover { background: #fff !important; border-color: var(--phpr-pro-border-accent) !important; transform: translateY(-1px); } body.phpr-themed-page .phpr-btn:active:not(:disabled) { transform: scale(0.98) !important; } /* ── Forms & inputs ──────────────────────────────────────────── */ body.phpr-themed-page :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) { font-family: var(--phpr-pro-font); border-radius: 12px !important; border: 1.5px solid var(--phpr-pro-border) !important; background: #fff !important; transition: border-color 0.15s ease, box-shadow 0.15s ease; } body.phpr-themed-page :is(input, select, textarea):focus { border-color: var(--phpr-pro-primary-light) !important; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.14) !important; outline: none !important; } /* Icon inputs — border/background live on .phpr-input-wrap only */ body.phpr-themed-page .phpr-input-wrap :is(input, select, textarea) { border: none !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; -webkit-appearance: none !important; appearance: none !important; } body.phpr-themed-page .phpr-input-wrap:focus-within :is(input, select, textarea) { box-shadow: none !important; } body.phpr-themed-page .phpr-form-group label, body.phpr-themed-page .phpr-field label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--phpr-pro-muted); } /* Search bars */ body.phpr-themed-page :is( .phpr-prod__search, .phpr-search, #phpr-job-search, .phpr-filter-bar input ) { background: var(--phpr-pro-surface-glass) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1.5px solid var(--phpr-pro-border-accent) !important; border-radius: 14px !important; padding: 12px 16px !important; font-size: 14px !important; box-shadow: var(--phpr-pro-shadow-sm); } /* ── Tabs — segmented control style ──────────────────────────── */ body.phpr-themed-page .phpr-tabs { display: flex !important; flex-wrap: wrap; gap: 6px !important; padding: 8px !important; background: var(--phpr-pro-surface-glass) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--phpr-pro-border-accent) !important; border-radius: 16px !important; box-shadow: var(--phpr-pro-shadow-sm); margin-bottom: 20px !important; } body.phpr-themed-page .phpr-tab { border: none !important; background: transparent !important; color: var(--phpr-pro-muted) !important; font-weight: 600 !important; font-size: 13px !important; padding: 10px 18px !important; border-radius: 12px !important; cursor: pointer; transition: all 0.18s ease; } body.phpr-themed-page .phpr-tab:hover { color: var(--phpr-pro-primary-deep) !important; background: rgba(16, 185, 129, 0.08) !important; } body.phpr-themed-page .phpr-tab--active { background: var(--phpr-pro-gradient) !important; color: #fff !important; box-shadow: 0 6px 18px rgba(5, 150, 105, 0.28) !important; } /* Delivery dr2 tabs */ body.phpr-themed-page #deliveryRoom .dr2-tabs { background: var(--phpr-pro-surface-glass) !important; backdrop-filter: blur(12px); border: 1px solid var(--phpr-pro-border-accent) !important; border-radius: 16px !important; padding: 8px !important; gap: 6px !important; } body.phpr-themed-page #deliveryRoom .dr2-tab { border-radius: 12px !important; font-weight: 600 !important; transition: all 0.18s ease; } body.phpr-themed-page #deliveryRoom .dr2-tab--active { background: var(--phpr-pro-gradient) !important; color: #fff !important; box-shadow: 0 6px 18px rgba(5, 150, 105, 0.28) !important; } /* ── Stats — glass metric tiles ──────────────────────────────── */ body.phpr-themed-page .phpr-stat, body.phpr-themed-page .phpr-dr__stat, body.phpr-themed-page #deliveryRoom .dr2-stat { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform 0.2s ease, box-shadow 0.2s ease; } body.phpr-themed-page .phpr-control-room .phpr-stat:hover { transform: translateY(-3px); box-shadow: var(--phpr-pro-shadow) !important; } body.phpr-themed-page :is(.phpr-stat__value, .phpr-stat__num) { font-variant-numeric: tabular-nums; letter-spacing: -0.03em; } /* ── Badges ──────────────────────────────────────────────────── */ body.phpr-themed-page .phpr-badge { font-weight: 700; font-size: 11px; letter-spacing: 0.04em; border-radius: 999px; padding: 4px 10px; } /* ── Tables ──────────────────────────────────────────────────── */ body.phpr-themed-page .phpr-table { border-collapse: separate; border-spacing: 0; } body.phpr-themed-page .phpr-table thead th { background: linear-gradient(180deg, #f8fafc, #f1f5f9) !important; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--phpr-pro-muted) !important; border-bottom: 2px solid var(--phpr-pro-border-accent) !important; padding: 14px 16px !important; } body.phpr-themed-page .phpr-table tbody tr { transition: background 0.12s ease; } body.phpr-themed-page .phpr-table tbody tr:hover { background: rgba(16, 185, 129, 0.04) !important; } body.phpr-themed-page .phpr-table td { padding: 12px 16px !important; border-bottom: 1px solid var(--phpr-pro-border) !important; } /* ── Empty states ────────────────────────────────────────────── */ body.phpr-themed-page :is( .phpr-empty-state, .phpr-prod__empty, .phpr-no-messages, .phpr-no-jobs ) { background: linear-gradient(135deg, #fff 0%, #f0fdf4 100%) !important; border: 2px dashed var(--phpr-pro-border-accent) !important; border-radius: var(--phpr-pro-radius-lg) !important; padding: 48px 32px !important; text-align: center; } body.phpr-themed-page .phpr-empty-state__title { font-size: 18px !important; font-weight: 800 !important; color: var(--phpr-pro-primary-deep) !important; } body.phpr-themed-page .phpr-empty-state__text { color: var(--phpr-pro-muted) !important; font-size: 14px; } /* ── Skeleton loaders ────────────────────────────────────────── */ body.phpr-themed-page .phpr-skeleton, body.phpr-themed-page .phpr-prod__skel-line { background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%) !important; background-size: 200% 100% !important; animation: phprShimmer 1.4s ease-in-out infinite !important; border-radius: 8px; } /* ── Modals — glass + depth ──────────────────────────────────── */ body.phpr-themed-page :is( .phpr-modal__overlay, .phpr-modal__backdrop ) { background: rgba(15, 23, 42, 0.55) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } body.phpr-themed-page :is( .phpr-modal__dialog, .phpr-modal__content, .phpr-action-modal__box ) { border-radius: var(--phpr-pro-radius-lg) !important; border: 1px solid rgba(167, 243, 208, 0.45) !important; box-shadow: 0 32px 80px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.5) inset !important; animation: phprScaleIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both; max-height: 92vh; overflow: auto; } body.phpr-themed-page #phpr-job-modal .phpr-job-modal__panel { overflow: hidden !important; max-height: calc(100vh - 32px) !important; } body.phpr-themed-page .phpr-modal__header, body.phpr-themed-page .phpr-modal-header, body.phpr-themed-page .phpr-action-modal__header { background: var(--phpr-pro-gradient) !important; color: #fff !important; border-bottom: none !important; padding: 18px 22px !important; } body.phpr-themed-page .phpr-modal__header :is(h2, .phpr-modal__title), body.phpr-themed-page .phpr-modal-header h2 { color: #fff !important; font-weight: 800 !important; letter-spacing: -0.02em; } /* ── Control Room — card stagger ─────────────────────────────── */ .phpr-control-room .phpr-cr-card { animation: phprFadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; } .phpr-control-room .phpr-cr-card:nth-child(1) { animation-delay: 0.03s; } .phpr-control-room .phpr-cr-card:nth-child(2) { animation-delay: 0.06s; } .phpr-control-room .phpr-cr-card:nth-child(3) { animation-delay: 0.09s; } .phpr-control-room .phpr-cr-card:nth-child(4) { animation-delay: 0.12s; } .phpr-control-room .phpr-cr-card:nth-child(5) { animation-delay: 0.15s; } .phpr-control-room .phpr-cr-card:nth-child(6) { animation-delay: 0.18s; } .phpr-control-room .phpr-cr-card:nth-child(n+7) { animation-delay: 0.21s; } .phpr-control-room .phpr-cr-card__cta { transition: transform 0.2s ease, gap 0.2s ease; } .phpr-control-room .phpr-cr-card:hover .phpr-cr-card__cta { transform: translateX(5px); } /* ── Staff Proof Room extras ─────────────────────────────────── */ #phpr-staff-app .phpr-status-group__header { background: linear-gradient(90deg, #ecfdf5, #fff) !important; border-radius: 12px 12px 0 0 !important; padding: 10px 14px !important; border-bottom: 1px solid var(--phpr-pro-border-accent) !important; } #phpr-staff-app .phpr-filter-bar { background: var(--phpr-pro-surface-glass) !important; backdrop-filter: blur(10px); border: 1px solid var(--phpr-pro-border-accent) !important; border-radius: 14px !important; padding: 12px 14px !important; margin-bottom: 16px; } /* ── Production queue cards ──────────────────────────────────── */ body.phpr-themed-page .phpr-prod__job { border-radius: var(--phpr-pro-radius) !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; } body.phpr-themed-page .phpr-prod__job:hover { transform: translateY(-2px); box-shadow: var(--phpr-pro-shadow) !important; } body.phpr-themed-page .phpr-prod__job--running { border-color: var(--phpr-pro-primary-light) !important; box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.2), var(--phpr-pro-shadow-sm) !important; } body.phpr-themed-page .phpr-prod__pill--active { background: var(--phpr-pro-gradient) !important; color: #fff !important; box-shadow: 0 6px 16px rgba(5, 150, 105, 0.3) !important; } /* ── Customer portal ─────────────────────────────────────────── */ .phpr-customer-page .phpr-portal-header:not(.phpr-portal-header--customer) { background: var(--phpr-pro-gradient) !important; border-radius: 0 0 var(--phpr-pro-radius-lg) var(--phpr-pro-radius-lg) !important; box-shadow: var(--phpr-pro-shadow) !important; } .phpr-customer-page .phpr-verify-card { animation: phprScaleIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; border: 1px solid var(--phpr-pro-border-accent) !important; box-shadow: var(--phpr-pro-shadow) !important; } .phpr-customer-page .phpr-verify-card__icon { animation: phprPulseGlow 2.5s ease-in-out infinite; } .phpr-customer-page .phpr-viewer__topbar:not(.phpr-viewer__topbar--customer) { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: rgba(255, 255, 255, 0.88) !important; border-bottom: 1px solid var(--phpr-pro-border-accent) !important; } .phpr-customer-page .phpr-lsb { background: var(--phpr-pro-surface) !important; border-right: 1px solid var(--phpr-pro-border) !important; } /* ── Upload portal ───────────────────────────────────────────── */ #phpr-upload-app .phpr-stepper__step--active { background: var(--phpr-pro-gradient) !important; color: #fff !important; } #phpr-upload-app .phpr-upload-card { box-shadow: var(--phpr-pro-shadow) !important; } /* ── Proof action layer — emerald retheme ────────────────────── */ .phpr-qa-panel { border-radius: var(--phpr-pro-radius) !important; overflow: hidden; box-shadow: var(--phpr-pro-shadow-sm) !important; } .phpr-qa-header { background: linear-gradient(180deg, #f0fdf4, #ecfdf5) !important; border-bottom: 1px solid var(--phpr-pro-border-accent) !important; } .phpr-qa-btn { border-radius: 10px !important; font-weight: 600 !important; transition: transform 0.12s ease, box-shadow 0.12s ease; } .phpr-qa-btn:hover { transform: translateY(-1px); } .phpr-qa-btn--primary { background: var(--phpr-pro-gradient) !important; color: #fff !important; border: none !important; } .phpr-back-btn:hover { background: #ecfdf5 !important; border-color: var(--phpr-pro-primary) !important; color: var(--phpr-pro-primary-deep) !important; } /* ── Login — unified split experience ────────────────────────── */ .phpr-login-page { min-height: 85vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; } .phpr-login-split { display: grid; grid-template-columns: 1.05fr 0.95fr; width: 100%; max-width: 1100px; min-height: 560px; border-radius: var(--phpr-pro-radius-xl); overflow: hidden; box-shadow: var(--phpr-pro-shadow-lg); border: 1px solid rgba(255, 255, 255, 0.6); animation: phprScaleIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; } .phpr-login-brand { background: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(167, 243, 208, 0.5), transparent 55%), var(--phpr-pro-gradient); color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: 48px 40px; position: relative; overflow: hidden; } .phpr-login-brand::after { content: ''; position: absolute; inset: auto -80px -80px auto; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%); pointer-events: none; } .phpr-login-brand__logo { background: #fff; padding: 10px 14px; border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); max-height: 56px; width: auto; } .phpr-login-brand__logo--wordmark { background: none !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; height: clamp(40px, 6vw, 56px) !important; max-height: none !important; max-width: min(240px, 70vw) !important; object-fit: contain; filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.22)) !important; margin-bottom: 24px; } .phpr-login-brand__title { font-size: 32px; font-weight: 900; letter-spacing: -0.04em; margin: 20px 0 8px; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.15); } .phpr-login-brand__tagline { font-size: 15px; opacity: 0.92; line-height: 1.5; max-width: 320px; } .phpr-login-form-panel, .phpr-login-form-wrap, .phpr-login-form-inner { background: #fff; display: flex; align-items: center; justify-content: center; padding: 44px 36px; } .phpr-login-form-wrap, .phpr-login-form-inner { flex-direction: column; width: 100%; } .phpr-login-card, .phpr-login-form-inner { width: 100%; max-width: 400px; animation: phprFadeUp 0.4s 0.1s ease both; } .phpr-login-card__header h2, .phpr-login-form__title { font-size: 26px !important; font-weight: 800 !important; letter-spacing: -0.03em; color: var(--phpr-pro-text) !important; margin: 0 0 6px !important; } .phpr-login-card__icon-wrap { width: 60px; height: 60px; border-radius: 18px; background: linear-gradient(135deg, #ecfdf5, #d1fae5); color: var(--phpr-pro-primary); display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 18px; box-shadow: 0 8px 20px rgba(5, 150, 105, 0.15); } .phpr-login-page .phpr-btn--primary, .phpr-login-page #wp-submit, .phpr-login-page input[type="submit"] { width: 100%; padding: 14px 20px !important; font-size: 15px !important; font-weight: 700 !important; border-radius: 14px !important; background: var(--phpr-pro-gradient) !important; border: none !important; color: #fff !important; box-shadow: 0 10px 28px rgba(5, 150, 105, 0.35) !important; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .phpr-login-page .phpr-btn--primary:hover, .phpr-login-page #wp-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(5, 150, 105, 0.42) !important; } .phpr-login-page #loginform input[type="text"], .phpr-login-page #loginform input[type="password"], .phpr-login-page .phpr-login-form input { padding: 13px 16px !important; font-size: 15px !important; border-radius: 12px !important; border: 1.5px solid var(--phpr-pro-border) !important; margin-bottom: 4px; } /* ── Toasts ──────────────────────────────────────────────────── */ .phpr-toast { position: fixed; bottom: 28px; right: 28px; z-index: 99999; background: #0f172a; color: #fff; padding: 14px 20px; border-radius: 14px; font-size: 14px; font-weight: 600; font-family: var(--phpr-pro-font); box-shadow: 0 20px 48px rgba(15, 23, 42, 0.3); animation: phprFadeUp 0.3s ease both; border: 1px solid rgba(255, 255, 255, 0.1); max-width: min(420px, calc(100vw - 32px)); } .phpr-toast--success { background: var(--phpr-pro-gradient); } .phpr-toast--error { background: linear-gradient(135deg, #dc2626, #b91c1c); } .phpr-toast--warn { background: linear-gradient(135deg, #d97706, #b45309); } .phpr-toast.is-out { opacity: 0; transform: translateY(8px); transition: 0.3s ease; } /* ── Back bar polish ─────────────────────────────────────────── */ .phpr-back-bar { box-shadow: var(--phpr-pro-shadow-sm) !important; } /* ── Driver portal header lift ───────────────────────────────── */ #driverPortal .phpr-dp__header { border-radius: var(--phpr-pro-radius-lg) !important; box-shadow: var(--phpr-pro-shadow) !important; } /* ── Admin ops health cards ──────────────────────────────────── */ #adminDash .phpr-ops-health-grid > div, #adminDash [style*="grid-template-columns"] > div { border-radius: var(--phpr-pro-radius) !important; box-shadow: var(--phpr-pro-shadow-sm) !important; transition: transform 0.2s ease; } #adminDash .phpr-ops-health-grid > div:hover { transform: translateY(-2px); } /* ── Quote room ──────────────────────────────────────────────── */ #qrApp .phpr-dashboard__header { border-radius: var(--phpr-pro-radius-lg) !important; } /* ── Notices ─────────────────────────────────────────────────── */ body.phpr-themed-page .phpr-notice, body.phpr-themed-page .phpr-msg { border-radius: 12px !important; font-weight: 600; } body.phpr-themed-page .phpr-msg--error { background: #fef2f2 !important; border: 1px solid #fecaca !important; color: #b91c1c !important; } body.phpr-themed-page .phpr-msg--success { background: #ecfdf5 !important; border: 1px solid var(--phpr-pro-border-accent) !important; color: var(--phpr-pro-primary-deep) !important; } /* ── Responsive ──────────────────────────────────────────────── */ @media (max-width: 768px) { .phpr-login-split { grid-template-columns: 1fr; min-height: auto; margin: 12px; border-radius: var(--phpr-pro-radius-lg); } .phpr-login-brand { padding: 32px 24px; min-height: 200px; } .phpr-login-form-panel, .phpr-login-form-wrap { padding: 28px 20px; } body.phpr-themed-page .phpr-tabs { padding: 6px !important; } body.phpr-themed-page .phpr-tab { padding: 8px 12px !important; font-size: 12px !important; } } @media (prefers-reduced-motion: reduce) { body.phpr-themed-page :is( .phpr-control-room, #phpr-staff-app, #mfApp, #fnApp, #deliveryRoom, #adminDash, #phpr-customer-app, #phpr-upload-app, #driverPortal, #qrApp, .phpr-login-page, .phpr-control-room .phpr-cr-card, .phpr-login-split, .phpr-modal__dialog, .phpr-verify-card, .phpr-toast ) { animation: none !important; } body.phpr-themed-page .phpr-customer-page .phpr-verify-card__icon { animation: none !important; } }