/* ===================================================================== VLab Reseller Invoice — Frontend App Shell A fullscreen, theme-independent app. Everything is scoped under #vlab-ri-app-root so it can't leak into (or be leaked into by) the active WordPress theme's styles. ===================================================================== */ #vlab-ri-app-root { --vlab-navy: #16324f; --vlab-navy-dark: #0f2438; --vlab-navy-light: #24476b; --vlab-gold: #c8a250; --vlab-bg: #f4f6f9; --vlab-card: #ffffff; --vlab-border: #e2e6ec; --vlab-text: #2b2f38; --vlab-text-muted: #6b7280; --vlab-danger: #b3413a; --vlab-success: #1f7a4d; --vlab-radius: 10px; --vlab-shadow: 0 2px 10px rgba(20, 30, 50, 0.06); all: initial; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; color: var(--vlab-text); position: fixed; inset: 0; z-index: 999999; background: var(--vlab-bg); display: flex; width: 100vw; height: 100vh; height: 100dvh; } #vlab-ri-app-root *, #vlab-ri-app-root *::before, #vlab-ri-app-root *::after { box-sizing: border-box; font-family: inherit; } /* Hide everything else on the page while the app is active. app.js moves #vlab-ri-app-root to be a direct child of on load (some themes nest shortcode output several levels deep, and this rule only works reliably once our root truly sits directly under ). */ body.vlab-ri-fullscreen-active { margin: 0 !important; padding: 0 !important; height: 100% !important; overflow: hidden !important; } body.vlab-ri-fullscreen-active > *:not(#vlab-ri-app-root) { display: none !important; } html:has(body.vlab-ri-fullscreen-active) { overflow: hidden !important; height: 100%; } /* Fallback for the brief moment before app.js has run (or if JS is disabled): the app still visually covers the full viewport on its own thanks to position:fixed + inset:0 + an opaque background below, so nothing looks broken even if the hide-siblings rule above can't apply yet. */ /* --------------------------------------------------------------------- Sidebar --------------------------------------------------------------------- */ .vlab-ri-sidebar { width: 240px; flex-shrink: 0; background: linear-gradient(180deg, var(--vlab-navy) 0%, var(--vlab-navy-dark) 100%); color: #fff; display: flex; flex-direction: column; height: 100%; transition: transform 0.25s ease; } .vlab-ri-brand { display: flex; align-items: center; gap: 10px; padding: 22px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .vlab-ri-brand-mark { width: 34px; height: 34px; border-radius: 8px; background: var(--vlab-gold); color: var(--vlab-navy-dark); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .vlab-ri-brand-mark-img { background: #fff; padding: 3px; } .vlab-ri-brand-mark-img img { width: 100%; height: 100%; object-fit: contain; border-radius: 4px; } .vlab-ri-auth-card .vlab-ri-brand-mark { width: 56px; height: 56px; border-radius: 12px; font-size: 18px; margin: 0 auto; } .vlab-ri-brand-name { font-weight: 600; font-size: 15px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vlab-ri-brand-centered { justify-content: center; border-bottom: none; padding-bottom: 4px; } .vlab-ri-nav { list-style: none; margin: 12px 0 0 0; padding: 0 10px; flex: 1; } .vlab-ri-nav li { margin-bottom: 2px; } .vlab-ri-nav a { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 8px; color: rgba(255, 255, 255, 0.75); text-decoration: none; font-size: 14px; font-weight: 500; transition: background 0.15s ease, color 0.15s ease; } .vlab-ri-nav a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } .vlab-ri-nav a.is-active { background: var(--vlab-gold); color: var(--vlab-navy-dark); } .vlab-ri-nav-icon { width: 9px; height: 9px; border-radius: 3px; background: currentColor; opacity: 0.85; flex-shrink: 0; } .vlab-ri-icon-reseller { border-radius: 50%; } .vlab-ri-icon-payment { border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; background: transparent; } .vlab-ri-icon-settings { transform: rotate(45deg); } .vlab-ri-sidebar-footer { padding: 16px 20px 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .vlab-ri-user-name { display: block; font-size: 13px; color: rgba(255, 255, 255, 0.6); margin-bottom: 8px; } .vlab-ri-exit-link { color: rgba(255, 255, 255, 0.85); text-decoration: none; font-size: 13px; } .vlab-ri-exit-link:hover { color: #fff; } /* Mobile nav toggle (hamburger) */ .vlab-ri-nav-toggle { display: none; position: fixed; top: 14px; left: 14px; z-index: 10; width: 42px; height: 42px; border-radius: 8px; border: none; background: var(--vlab-navy); flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; } .vlab-ri-nav-toggle span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; } /* --------------------------------------------------------------------- Main content --------------------------------------------------------------------- */ .vlab-ri-main { flex: 1; overflow-y: auto; padding: 32px 40px 60px; -webkit-overflow-scrolling: touch; } .vlab-ri-view-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .vlab-ri-view-header h1 { font-size: 24px; font-weight: 700; color: var(--vlab-navy); margin: 0; } /* --------------------------------------------------------------------- Buttons --------------------------------------------------------------------- */ .vlab-ri-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 7px; border: 1px solid var(--vlab-border); background: #fff; color: var(--vlab-navy); font-size: 13.5px; font-weight: 600; text-decoration: none; cursor: pointer; line-height: 1.4; transition: all 0.15s ease; } .vlab-ri-btn:hover { border-color: var(--vlab-navy); } .vlab-ri-btn-primary { background: var(--vlab-navy); border-color: var(--vlab-navy); color: #fff; } .vlab-ri-btn-primary:hover { background: var(--vlab-navy-dark); } .vlab-ri-btn-whatsapp { background: #25d366; border-color: #25d366; color: #fff; } .vlab-ri-btn-whatsapp:hover { background: #1ebd5a; } .vlab-ri-btn-lg { padding: 12px 28px; font-size: 14.5px; } .vlab-ri-icon-btn { border: none; background: #fdecea; color: var(--vlab-danger); width: 28px; height: 28px; border-radius: 6px; cursor: pointer; font-size: 16px; line-height: 1; } .vlab-ri-inline-link { font-size: 12.5px; color: var(--vlab-navy); margin-left: 8px; } /* --------------------------------------------------------------------- Flash / notes --------------------------------------------------------------------- */ .vlab-ri-flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 13.5px; } .vlab-ri-flash-success { background: #e6f4ec; color: var(--vlab-success); border: 1px solid #bfe3cd; } .vlab-ri-filter-note { font-size: 13.5px; color: var(--vlab-text-muted); margin-bottom: 14px; } .vlab-ri-hint { font-size: 12.5px; color: var(--vlab-text-muted); margin: 4px 0 0; } /* --------------------------------------------------------------------- Toolbar (search/filter) --------------------------------------------------------------------- */ .vlab-ri-toolbar { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; } .vlab-ri-toolbar input[type="search"] { flex: 1; min-width: 200px; } /* --------------------------------------------------------------------- Cards / grid / forms --------------------------------------------------------------------- */ .vlab-ri-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .vlab-ri-card { background: var(--vlab-card); border: 1px solid var(--vlab-border); border-radius: var(--vlab-radius); padding: 22px 24px; box-shadow: var(--vlab-shadow); margin-bottom: 20px; } .vlab-ri-card-narrow { max-width: 620px; } .vlab-ri-card h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--vlab-navy); margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--vlab-border); } .vlab-ri-card h2:not(:first-child) { margin-top: 20px; } .vlab-ri-field { margin-bottom: 14px; } .vlab-ri-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .vlab-ri-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--vlab-text-muted); margin-bottom: 5px; } .vlab-ri-radio { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; margin-right: 16px; } .vlab-ri-checkbox { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; } #vlab-ri-app-root input[type="text"], #vlab-ri-app-root input[type="email"], #vlab-ri-app-root input[type="url"], #vlab-ri-app-root input[type="date"], #vlab-ri-app-root input[type="number"], #vlab-ri-app-root input[type="search"], #vlab-ri-app-root input[type="file"], #vlab-ri-app-root select, #vlab-ri-app-root textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--vlab-border); border-radius: 7px; font-size: 14px; color: var(--vlab-text); background: #fff; } #vlab-ri-app-root input:focus, #vlab-ri-app-root select:focus, #vlab-ri-app-root textarea:focus { outline: none; border-color: var(--vlab-navy); box-shadow: 0 0 0 3px rgba(22, 50, 79, 0.1); } #vlab-ri-app-root textarea { resize: vertical; } .vlab-ri-form-actions { margin-top: 8px; } .vlab-ri-current-logo img { max-height: 70px; display: block; margin-bottom: 8px; background: #fff; padding: 4px; border: 1px solid var(--vlab-border); border-radius: 6px; } .vlab-ri-current-sig { margin-bottom: 10px; } .vlab-ri-current-sig img { max-height: 90px; display: block; margin-bottom: 8px; background: #fff; border: 1px solid var(--vlab-border); border-radius: 6px; } .vlab-ri-sig-canvas { border: 1px solid var(--vlab-border); border-radius: 8px; background: #fff; touch-action: none; cursor: crosshair; max-width: 100%; } /* --------------------------------------------------------------------- Line items table (invoice edit) --------------------------------------------------------------------- */ .vlab-ri-items-scroll { overflow-x: auto; margin-bottom: 14px; } .vlab-ri-items-table { width: 100%; border-collapse: collapse; min-width: 720px; } .vlab-ri-items-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; color: var(--vlab-text-muted); padding: 6px 8px; border-bottom: 2px solid var(--vlab-border); } .vlab-ri-items-table td { padding: 6px 8px; vertical-align: top; } .vlab-ri-line-total { font-weight: 700; padding-top: 14px !important; white-space: nowrap; } .vlab-ri-totals { width: 100%; border-collapse: collapse; margin-top: 10px; } .vlab-ri-totals td { padding: 6px 4px; font-size: 13.5px; border-bottom: 1px solid var(--vlab-border); } .vlab-ri-totals td:last-child { text-align: right; } .vlab-ri-totals-grand td { border-top: 2px solid var(--vlab-navy); border-bottom: none; font-weight: 700; font-size: 16px; color: var(--vlab-navy); padding-top: 10px; } /* --------------------------------------------------------------------- Share bar (invoice edit) --------------------------------------------------------------------- */ .vlab-ri-share-bar { background: var(--vlab-card); border: 1px solid var(--vlab-border); border-radius: var(--vlab-radius); padding: 16px 20px; margin-bottom: 20px; box-shadow: var(--vlab-shadow); } .vlab-ri-share-link { margin-bottom: 12px; } .vlab-ri-share-link label { display: block; font-size: 12px; color: var(--vlab-text-muted); margin-bottom: 5px; } .vlab-ri-share-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* --------------------------------------------------------------------- Tables (invoices / resellers lists) --------------------------------------------------------------------- */ .vlab-ri-table-wrap { background: var(--vlab-card); border: 1px solid var(--vlab-border); border-radius: var(--vlab-radius); box-shadow: var(--vlab-shadow); overflow: hidden; } .vlab-ri-responsive-table { width: 100%; border-collapse: collapse; } .vlab-ri-responsive-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--vlab-text-muted); padding: 12px 16px; background: #f9fafb; border-bottom: 1px solid var(--vlab-border); } .vlab-ri-responsive-table td { padding: 12px 16px; border-bottom: 1px solid var(--vlab-border); font-size: 13.5px; } .vlab-ri-responsive-table tr:last-child td { border-bottom: none; } .vlab-ri-row-actions a { color: var(--vlab-navy); text-decoration: none; margin-right: 10px; font-weight: 600; font-size: 12.5px; } .vlab-ri-row-actions a:hover { text-decoration: underline; } .vlab-ri-danger-link { color: var(--vlab-danger) !important; } .vlab-ri-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; text-transform: uppercase; background: #eceef1; color: #555; } .vlab-ri-badge-draft { background: #eceef1; color: #555; } .vlab-ri-badge-sent { background: #dbe9ff; color: #17509c; } .vlab-ri-badge-signed { background: #d9f2e3; color: var(--vlab-success); } .vlab-ri-badge-partial { background: #fff0c2; color: #805b00; } .vlab-ri-badge-paid { background: var(--vlab-navy); color: #fff; } .vlab-ri-empty { background: var(--vlab-card); border: 1px dashed var(--vlab-border); border-radius: var(--vlab-radius); padding: 40px; text-align: center; color: var(--vlab-text-muted); } /* --------------------------------------------------------------------- Email modal --------------------------------------------------------------------- */ .vlab-ri-modal { position: fixed; inset: 0; background: rgba(15, 25, 40, 0.55); z-index: 10; display: flex; align-items: center; justify-content: center; padding: 20px; } .vlab-ri-modal-content { background: #fff; border-radius: var(--vlab-radius); padding: 26px; width: 480px; max-width: 100%; max-height: calc(100vh - 40px); overflow-y: auto; } .vlab-ri-modal-content h2 { margin-top: 0; font-size: 16px; color: var(--vlab-navy); } .vlab-ri-modal-actions { display: flex; gap: 10px; margin-top: 6px; } #vlab-ri-email-status { margin-top: 10px; font-size: 13px; font-style: italic; color: var(--vlab-navy); } #vlab-ri-receipt-email-status { margin-top: 10px; font-size: 13px; font-style: italic; color: var(--vlab-navy); } /* Payments and receipts */ .vlab-ri-payment-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .vlab-ri-payment-panel-heading h2 { margin: 0; padding: 0; border: 0; } .vlab-ri-payment-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; } .vlab-ri-payment-summary > div { border: 1px solid var(--vlab-border); border-radius: 8px; padding: 13px; background: #f9fafb; } .vlab-ri-payment-summary span, .vlab-ri-payment-summary strong { display: block; } .vlab-ri-payment-summary span { font-size: 11.5px; color: var(--vlab-text-muted); margin-bottom: 5px; text-transform: uppercase; } .vlab-ri-payment-summary strong { font-size: 17px; color: var(--vlab-navy); } .vlab-ri-payment-summary .vlab-ri-balance-due { background: #fffbef; border-color: var(--vlab-gold); } .vlab-ri-paid-in-full { display: inline-block; padding: 5px 12px; border-radius: 20px; background: #d9f2e3; color: var(--vlab-success); font-size: 12px; font-weight: 700; } .vlab-ri-payment-history { width: 100%; min-width: 700px; border-collapse: collapse; } .vlab-ri-payment-history th { text-align: left; color: var(--vlab-text-muted); font-size: 11px; text-transform: uppercase; padding: 9px 8px; border-bottom: 2px solid var(--vlab-border); } .vlab-ri-payment-history td { padding: 10px 8px; border-bottom: 1px solid var(--vlab-border); font-size: 13px; } .vlab-ri-link-button { border: 0; background: none; padding: 0; color: var(--vlab-navy); font-weight: 600; font-size: 12.5px; cursor: pointer; margin-right: 10px; } .vlab-ri-payment-error { padding: 12px 16px; margin: 12px 0; border: 1px solid #efc2bf; border-radius: 8px; background: #fceceb; color: var(--vlab-danger); } .vlab-ri-payment-limit { background: #f5f6f8; border-radius: 7px; padding: 10px 12px; } .vlab-ri-signature-help { margin: 0 0 8px; color: var(--vlab-text-muted); font-size: 12px; } .vlab-ri-payment-signature-pad { display: block; width: 100%; height: 150px; margin-bottom: 9px; border: 1px solid var(--vlab-border); border-radius: 8px; background: #fff; touch-action: none; cursor: crosshair; } /* --------------------------------------------------------------------- Login / access screens --------------------------------------------------------------------- */ .vlab-ri-app-centered { align-items: center; justify-content: center; } .vlab-ri-auth-card { background: #fff; border-radius: 14px; box-shadow: 0 10px 40px rgba(15, 25, 40, 0.15); padding: 40px; width: 380px; max-width: 90vw; text-align: center; } .vlab-ri-auth-card h1 { font-size: 20px; color: var(--vlab-navy); margin: 6px 0; } .vlab-ri-auth-card p { font-size: 13.5px; color: var(--vlab-text-muted); margin-bottom: 20px; } .vlab-ri-auth-card form p { text-align: left; margin-bottom: 12px; } .vlab-ri-auth-card label { display: block; font-size: 12.5px; font-weight: 600; color: var(--vlab-text-muted); margin-bottom: 5px; } .vlab-ri-auth-card input[type="text"], .vlab-ri-auth-card input[type="password"] { width: 100%; padding: 10px 12px; border: 1px solid var(--vlab-border); border-radius: 7px; font-size: 14px; } .vlab-ri-auth-card input[type="submit"] { width: 100%; padding: 11px; border: none; border-radius: 7px; background: var(--vlab-navy); color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; margin-top: 6px; } .vlab-ri-auth-card input[type="submit"]:hover { background: var(--vlab-navy-dark); } .vlab-ri-auth-card .forgetmenot { display: flex; align-items: center; gap: 6px; font-size: 13px; } /* ===================================================================== Responsive breakpoints ===================================================================== */ /* Tablet */ @media (max-width: 1024px) { .vlab-ri-main { padding: 26px 24px 50px; } .vlab-ri-grid-2 { grid-template-columns: 1fr; } } /* Mobile + small tablet: off-canvas sidebar */ @media (max-width: 900px) { .vlab-ri-nav-toggle { display: flex; } .vlab-ri-sidebar { position: fixed; top: 0; left: 0; bottom: 0; transform: translateX(-100%); z-index: 9; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2); } #vlab-ri-app-root.vlab-ri-nav-open .vlab-ri-sidebar { transform: translateX(0); } #vlab-ri-app-root.vlab-ri-nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 8; } .vlab-ri-main { padding: 74px 16px 50px; } .vlab-ri-view-header { flex-direction: column; align-items: flex-start; } .vlab-ri-view-header h1 { font-size: 20px; } .vlab-ri-field-row { grid-template-columns: 1fr; } .vlab-ri-payment-summary { grid-template-columns: 1fr; } /* Responsive "card" tables: hide header row, stack cells as labeled rows */ .vlab-ri-responsive-table thead { display: none; } .vlab-ri-responsive-table, .vlab-ri-responsive-table tbody, .vlab-ri-responsive-table tr, .vlab-ri-responsive-table td { display: block; width: 100%; } .vlab-ri-responsive-table tr { border-bottom: 8px solid var(--vlab-bg); padding: 10px 6px; } .vlab-ri-responsive-table td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 10px; border-bottom: 1px solid var(--vlab-border); text-align: right; } .vlab-ri-responsive-table td:last-child { border-bottom: none; } .vlab-ri-responsive-table td::before { content: attr(data-label); font-size: 11px; text-transform: uppercase; color: var(--vlab-text-muted); font-weight: 600; text-align: left; } .vlab-ri-row-actions { justify-content: flex-start !important; flex-wrap: wrap; } .vlab-ri-row-actions::before { display: none; } .vlab-ri-share-actions { flex-direction: column; align-items: stretch; } .vlab-ri-share-actions .vlab-ri-btn { justify-content: center; } .vlab-ri-auth-card { padding: 28px 22px; } } @media (max-width: 480px) { .vlab-ri-main { padding: 70px 12px 40px; } .vlab-ri-card { padding: 16px 16px; } .vlab-ri-view-header h1 { font-size: 18px; } }