/* ============================================================
dashboard-mobile.css — PowerTech role dashboards
Mobile-app UI overlay. INERT on the website.
Every rule is scoped under `.is-native-app` (set on by
dashboard-mobile.js + an inline head guard when running inside
the Capacitor app). The website never gets that class, so the
desktop dashboard styling is left 100% untouched.
Brand = amber/orange to match the rest of the app.
============================================================ */
/* ---- Brand rebrand (override each dashboard's blue/purple) ---- */
.is-native-app {
--primary: #f59e0b !important;
--primary-dark: #ea580c !important;
--accent: #f59e0b !important;
--brand: #f59e0b;
--brand2: #ea580c;
--ink: #0f172a;
--muted: #64748b;
--line: #e2e8f0;
--bg: #f1f5f9;
}
.is-native-app body { background: var(--bg) !important; }
/* ---- App shell: no sidebar gap, off-canvas drawer ---- */
.is-native-app .main-content { margin-left: 0 !important; }
.is-native-app .sidebar {
width: 86% !important;
max-width: 320px;
transform: translateX(-100%) !important;
background: #ffffff !important;
color: var(--ink) !important;
box-shadow: 6px 0 24px rgba(15, 23, 42, 0.18);
border-right: 1px solid var(--line);
}
.is-native-app .sidebar.open { transform: translateX(0) !important; }
.is-native-app .sidebar-header {
background: linear-gradient(135deg, #f59e0b, #ea580c) !important;
color: #fff !important;
padding: 18px 18px 16px !important;
}
.is-native-app .sidebar-header h1,
.is-native-app .sidebar-header h2 { color: #fff !important; }
.is-native-app .sidebar-header p { color: rgba(255, 255, 255, 0.85) !important; }
/* drawer nav rows -> large tappable app rows */
.is-native-app .sidebar-nav a,
.is-native-app .sidebar-nav .nav-item,
.is-native-app .nav-item {
display: flex !important;
align-items: center;
gap: 14px;
min-height: 52px;
padding: 0 16px !important;
font-size: 15px;
font-weight: 600;
color: var(--ink) !important;
border-bottom: 1px solid var(--line);
border-radius: 0;
transition: background 0.15s;
}
.is-native-app .sidebar-nav a:active,
.is-native-app .nav-item:active { background: #fff7ed; }
.is-native-app .sidebar-nav a.active,
.is-native-app .nav-item.active,
.is-native-app .sidebar-nav a[aria-current],
.is-native-app .nav-item.active {
background: #fff7ed !important;
color: #ea580c !important;
border-left: 4px solid #f59e0b;
padding-left: 12px !important;
}
.is-native-app .sidebar-nav a i,
.is-native-app .nav-item i { color: #ea580c; width: 20px; text-align: center; }
.is-native-app .sidebar-stats { display: none; } /* desktop-only mini-stats */
/* unified drawer backdrop (created/reused by dashboard-mobile.js) */
.is-native-app .drawer-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.5);
z-index: 99;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s;
}
.is-native-app:has(.sidebar.open) .drawer-backdrop,
.is-native-app .sidebar.open ~ .drawer-backdrop {
opacity: 1;
visibility: visible;
}
/* ---- Topbar -> clean sticky app bar ---- */
/* Keep the topbar on a single row. The base dashboard CSS wraps .topbar
(flex-wrap:wrap) under 768px, so long section titles ("My Solar Systems",
"Commission Wallet", ...) pushed the bell/shop/user icons onto a second
line below the title. Pin everything to one row: nowrap + a truncating
title that gives up space before the icons do. */
.is-native-app .topbar {
position: fixed !important;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 50;
height: 56px;
padding: 0 14px !important;
gap: 10px;
background: #fff !important;
border-bottom: 1px solid var(--line) !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
flex-wrap: nowrap !important;
overflow: hidden;
}
/* The topbar is now position:fixed (out of flow), so push the content down
by the topbar height or it would sit underneath the fixed bar. Use
html.is-native-app (higher specificity) + !important to beat the
.is-native-app .main-content { padding: 0 !important } rule below. */
html.is-native-app .main-content { padding-top: 56px !important; }
.is-native-app .topbar-left {
min-width: 0;
flex: 1 1 0;
overflow: hidden;
}
.is-native-app .topbar-title { min-width: 0; overflow: hidden; }
.is-native-app .topbar-title h2 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 0 1 auto;
}
.is-native-app .topbar-right {
flex-wrap: nowrap !important;
flex-shrink: 0;
margin-left: auto;
}
.is-native-app .mobile-toggle {
display: flex !important;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
font-size: 20px;
color: var(--ink) !important;
background: none;
border: none;
}
.is-native-app .topbar-title h1,
.is-native-app .topbar-title h2,
.is-native-app .topbar h1,
.is-native-app .topbar h2 { font-size: 17px !important; margin: 0; flex: 1; }
.is-native-app .topbar-title p,
.is-native-app .topbar .subtitle { display: none; }
/* hide desktop-only quick links in the app bar (app shell already has Home/Shop/Calc) */
.is-native-app .topbar-right > a[href$="index.html"],
.is-native-app .topbar-right > a[href$="calculator.html"],
.is-native-app .topbar-right > a[href*="service-tickets"],
.is-native-app .topbar-right .view-site,
.is-native-app .topbar-right .calc-link,
.is-native-app .topbar-right .shop-link { display: none !important; }
.is-native-app .topbar-right .user-info span,
.is-native-app .topbar-right .user-role { display: none; }
/* ---- Content spacing ---- */
.is-native-app .content {
padding: 14px !important;
padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
}
.is-native-app .main-content { padding: 0 !important; }
/* ---- Cards ---- */
.is-native-app .card,
.is-native-app .stat-card,
.is-native-app .kpi {
border-radius: 14px !important;
border: 1px solid var(--line) !important;
box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
padding: 14px !important;
margin-bottom: 14px !important;
}
.is-native-app .card-header { padding: 4px 2px 10px !important; }
.is-native-app .card-header h2,
.is-native-app .card-header h3 { font-size: 16px !important; }
/* ---- Grids -> stacked single column ---- */
.is-native-app .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
.is-native-app .systems-grid,
.is-native-app .product-grid,
.is-native-app .plans-grid,
.is-native-app .share-grid,
.is-native-app .form-row,
.is-native-app .order-detail-grid,
.is-native-app .sub-status-bar,
.is-native-app .filter-bar,
.is-native-app .neg-prices-grid,
.is-native-app .features-grid {
grid-template-columns: 1fr !important;
}
.is-native-app .form-row { display: grid; gap: 10px !important; }
/* inline-styled hard-coded multi-column grids the @media rules miss */
.is-native-app [style*="grid-template-columns:repeat(4"],
.is-native-app [style*="grid-template-columns:repeat(5"],
.is-native-app [style*="grid-template-columns:repeat(6"],
.is-native-app [style*="grid-template-columns:1fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
.is-native-app [style*="grid-template-columns:1fr 1fr 1fr"],
.is-native-app [style*="grid-template-columns:repeat(3"] { grid-template-columns: 1fr 1fr !important; }
/* Wallet withdraw form's inline 2-col field grids (Amount/Bank, Acct#/Acct name)
are cramped side-by-side on a phone -> stack them. Scoped to the wallet
section so we don't touch legit 2-col layouts elsewhere. */
.is-native-app #section-wallet [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
.is-native-app .stat-card .stat-info p,
.is-native-app .stat-card p { font-size: 11px !important; margin: 2px 0 0 !important; }
.is-native-app .stat-card .stat-icon { width: 38px !important; height: 38px !important; font-size: 16px !important; }
.is-native-app .stat-card h3 { font-size: 20px !important; }
/* ---- Forms ---- */
.is-native-app input,
.is-native-app select,
.is-native-app textarea {
width: 100% !important;
min-height: 44px;
font-size: 16px !important;
border-radius: 10px !important;
border: 1px solid var(--line) !important;
}
.is-native-app input:focus,
.is-native-app select:focus,
.is-native-app textarea:focus {
border-color: #f59e0b !important;
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15) !important;
}
/* ---- Buttons -> orange brand ---- */
.is-native-app .btn-primary,
.is-native-app .btn-primary:hover,
.is-native-app button.btn-primary {
background: linear-gradient(135deg, #f59e0b, #ea580c) !important;
color: #fff !important;
border: none !important;
border-radius: 10px !important;
font-weight: 700 !important;
}
.is-native-app .order-filter-tab.active,
.is-native-app .filter-tab.active {
background: linear-gradient(135deg, #f59e0b, #ea580c) !important;
color: #fff !important;
border: none !important;
}
.is-native-app .order-filter-tab { padding: 8px 14px !important; font-size: 13px !important; }
/* ---- Tables -> stacked card lists ----
dashboard-mobile.js marks each data table with .dt-cards and
writes data-label on every | from its | . */
.is-native-app .card-body { overflow-x: visible !important; }
.is-native-app table { min-width: 0 !important; width: 100%; font-size: 14px !important; }
.is-native-app table.dt-cards,
.is-native-app table.dt-cards thead,
.is-native-app table.dt-cards tbody,
.is-native-app table.dt-cards tr,
.is-native-app table.dt-cards th,
.is-native-app table.dt-cards td { display: block; }
.is-native-app table.dt-cards thead { display: none; }
.is-native-app table.dt-cards tr {
background: #fff;
border-radius: 12px;
margin: 0 0 10px;
padding: 10px 14px;
box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
border: 1px solid var(--line);
}
.is-native-app table.dt-cards td {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 6px 0;
border: none;
font-size: 14px;
text-align: right;
}
.is-native-app table.dt-cards td::before {
content: attr(data-label);
font-weight: 700;
color: var(--muted);
margin-right: auto;
text-align: left;
}
.is-native-app table.dt-cards td:empty { display: none; }
/* first cell (usually the row title / id) styled as the card heading */
.is-native-app table.dt-cards td:first-child {
font-weight: 800;
color: var(--ink);
font-size: 15px;
border-bottom: 1px solid var(--line);
padding-bottom: 8px;
margin-bottom: 2px;
}
.is-native-app table.dt-cards td:first-child::before { display: none; }
.is-native-app table.dt-cards td:first-child { text-align: left; }
/* ---- Modals / toasts ---- */
.is-native-app .modal,
.is-native-app .modal-bg .modal,
.is-native-app #productModal,
.is-native-app #compareModal,
.is-native-app #successModal,
.is-native-app #shareModal,
.is-native-app #orderModal {
max-width: 95vw !important;
width: 95vw !important;
max-height: 92vh !important;
border-radius: 16px !important;
}
.is-native-app .toast {
width: calc(100% - 24px) !important;
left: 12px !important;
right: 12px !important;
max-width: none !important;
}
/* ---- Misc polish ---- */
.is-native-app .verification-banner { border-radius: 10px !important; margin-bottom: 12px !important; }
.is-native-app img { max-width: 100%; }
.is-native-app .empty { padding: 40px 16px !important; }
/* ---- Section header rows (Messages, Settings, Portfolio, ...) ----
Each dashboard section opens with a .section-header-row = h2 + a
flex row of action buttons. On a phone that row overflows; wrap it
and make the buttons full-width tappable bars. */
.is-native-app .section-header-row { flex-wrap: wrap; gap: 8px !important; }
.is-native-app .section-header-row h2 { font-size: 18px !important; width: 100%; margin: 0 0 4px; }
.is-native-app .section-header-row > div { width: 100%; display: flex !important; gap: 8px; }
.is-native-app .section-header-row button,
.is-native-app .section-header-row .btn,
.is-native-app .section-header-row a[onclick] {
flex: 1 1 auto; min-height: 42px; justify-content: center; padding: 8px 12px; font-size: 13px;
}
/* ---- Rebrand the inline blue/purple buttons left inside dashboard
sections (Messages Compose/Send, etc.) that don't use .btn-primary.
These use hardcoded #2563eb / #1e40af / #7c3aed backgrounds inline,
which the --primary var override can't reach. ---- */
.is-native-app button[style*="#2563eb"],
.is-native-app a[style*="#2563eb"],
.is-native-app button[style*="#1e40af"],
.is-native-app a[style*="#1e40af"],
.is-native-app button[style*="#7c3aed"],
.is-native-app a[style*="#7c3aed"] {
background: linear-gradient(135deg, #f59e0b, #ea580c) !important;
color: #fff !important;
border: none !important;
}
/* ---- Messages section compose card ---- */
.is-native-app #msg-compose-card { padding: 14px !important; }
.is-native-app #msg-compose-card label { font-size: 13px !important; }
.is-native-app #messages-list,
.is-native-app #msg-notif-list { padding: 0 !important; border: none !important; }
/* ---- Buyer dashboard sub-sections: installer requests, rate installers,
price alerts, notifications, refer & earn, commission wallet, calculator
plans, credit history. These render rich JS content (negotiation cards,
plan cards, notif items, history tables) with inline flex/grid layouts that
overflow on a phone. Force everything to wrap / stack / shrink-to-fit. ---- */
/* 1. No horizontal scroll inside any of these sections. */
.is-native-app #section-installers,
.is-native-app #section-reviews,
.is-native-app #section-alerts,
.is-native-app #section-notifications,
.is-native-app #section-referral,
.is-native-app #section-wallet,
.is-native-app #section-plans,
.is-native-app #section-credits,
.is-native-app #bookings-section { overflow-x: hidden; max-width: 100%; }
/* 2. Every inline-styled flex row wraps so badges/labels never overflow.
Only inline display:flex / display: flex is matched — class-based flex
such as .neg-actions (whose display:flex comes from the base stylesheet,
not the style="" attribute) is NOT matched here, so column action stacks
keep their layout. Adding flex-wrap is a no-op when items already fit. */
.is-native-app #section-installers [style*="display:flex"],
.is-native-app #section-installers [style*="display: flex"],
.is-native-app #bookings-section [style*="display:flex"],
.is-native-app #bookings-section [style*="display: flex"],
.is-native-app #section-reviews [style*="display:flex"],
.is-native-app #section-reviews [style*="display: flex"],
.is-native-app #section-alerts [style*="display:flex"],
.is-native-app #section-alerts [style*="display: flex"],
.is-native-app #section-notifications [style*="display:flex"],
.is-native-app #section-notifications [style*="display: flex"],
.is-native-app #section-referral [style*="display:flex"],
.is-native-app #section-referral [style*="display: flex"],
.is-native-app #section-wallet [style*="display:flex"],
.is-native-app #section-wallet [style*="display: flex"],
.is-native-app #section-plans [style*="display:flex"],
.is-native-app #section-plans [style*="display: flex"],
.is-native-app #section-credits [style*="display:flex"],
.is-native-app #section-credits [style*="display: flex"] { flex-wrap: wrap !important; }
/* 3. Inline-styled grids (incl. the auto-fill/minmax wallet-balance + plan
grids the generic repeat(4/5/6) rules miss) stack to a single column. */
.is-native-app #section-wallet [style*="grid-template-columns"],
.is-native-app #section-plans [style*="grid-template-columns"],
.is-native-app #section-installers [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
/* 4. Negotiation card header: installer block + status badge stack instead
of squeezing side-by-side. */
.is-native-app #section-installers .neg-card-header { flex-wrap: wrap; gap: 8px !important; }
.is-native-app #section-installers .neg-card-header > div:last-child { text-align: left !important; width: 100%; }
/* 5. Price blocks + status badges: stack, wrap long currency/labels. */
.is-native-app #section-installers .neg-prices-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
.is-native-app #section-installers .neg-price-block { justify-content: space-between; }
.is-native-app #section-installers .neg-status-badge { white-space: normal; }
/* 6. Counter-offer input is hardcoded width:200px — let it breathe full-width. */
.is-native-app #section-installers input[style*="width:200px"] { width: 100% !important; max-width: 100%; }
/* 7. Action rows: full-width buttons, wrap, even spacing. */
.is-native-app #section-installers .neg-actions { width: 100%; flex-wrap: wrap; gap: 8px; }
.is-native-app #section-installers .neg-actions .btn { flex: 1 1 auto; min-height: 42px; justify-content: center; }
.is-native-app #section-installers .neg-waiting { width: 100%; text-align: center; }
/* 8. Negotiation timeline: let each entry's badge/detail/time wrap. */
.is-native-app #section-installers .neg-timeline-item > div { flex-wrap: wrap; gap: 6px; }
.is-native-app #section-installers .neg-timeline-time { width: 100%; font-size: 11px; }
/* 9. Card itself: long installer names / notes must not overflow. */
.is-native-app #section-installers .neg-card,
.is-native-app #section-installers .neg-card * { max-width: 100%; }
.is-native-app #section-installers .neg-card { overflow-wrap: anywhere; word-break: break-word; }
/* 10. Notifications: let the body shrink so titles/messages wrap, not overflow. */
.is-native-app #section-notifications .notif-item { display: flex !important; align-items: flex-start; gap: 10px; }
.is-native-app #section-notifications .notif-body { min-width: 0; flex: 1 1 0; }
.is-native-app #section-notifications .notif-body h4,
.is-native-app #section-notifications .notif-body p { word-break: break-word; }
/* 11. Referral: social buttons become full-width tappable bars (2 per row). */
.is-native-app #section-referral .btn-social { flex: 1 1 calc(50% - 10px); min-height: 42px; justify-content: center; }
/* 12. Wallet: withdraw form inputs full width (the 2-col field grids are
already stacked by the #section-wallet 1fr 1fr rule above). */
.is-native-app #section-wallet .form-group input { width: 100% !important; }
/* 13. Plans: each plan card full width; pay buttons stack full-width. */
.is-native-app #section-plans .card { width: 100% !important; }
.is-native-app #section-plans .btn { width: 100%; margin-bottom: 8px; }
/* 14. Card tables (reviews, credit/commission history): un-truncate cells so
the full review text / descriptions show in stacked-card mode instead of
clipping with ellipsis or overflowing. */
.is-native-app table.dt-cards td { white-space: normal !important; max-width: none !important; overflow: visible !important; text-overflow: clip !important; }
/* 15. Empty states: consistent readable spacing. */
.is-native-app .empty-state { padding: 32px 16px !important; text-align: center; } |