/* ============================================================================ Umano AI — clean periwinkle skin v6 Professional SaaS layout: a full-width white header welded to the top edge (NOT a floating pill), content in a wide centered container below (NOT a shrunk box). Periwinkle accent, Fraunces serif headings. No warm/peach. This file MUST load last in so it overrides app-nav.css / app-layout.css. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap'); :root{ --surface:#f3f3fb!important; --soft:#eceCf6!important; --bg:#f3f3fb!important; --ink:#23252f!important; --muted:#787a8a!important; --line:#e8e8f2!important; --card:#ffffff!important; --paper:#ffffff!important; --ok:#2f855a!important; --danger:#c0492f!important; --ui-accent:#5f68d6!important; --ui-accent-hover:#4d56c4!important; --ui-accent-soft:#ececfb!important; --ui-accent-softer:#f5f5fd!important; --ui-on-accent:#ffffff!important; --ui-blue:#5f68d6!important; --blue:#5f68d6!important; --blue-hover:#4d56c4!important; --ui-nav-active:#23252f!important; --ui-on-nav-active:#ffffff!important; --ui-focus-ring:rgba(95,104,214,.20)!important; --ops-line:#e8e8f2!important; --ops-paper:#ffffff!important; --ops-surface:#f3f3fb!important; --ops-muted:#787a8a!important; --ops-ink:#23252f!important; --ops-soft:#f1f1f8!important; } html{overflow-x:hidden!important} /* bottom tab bar is mobile-only — hidden by default, shown inside the phone media query below (see .has-mobile-tabbar .mobile-tabbar) */ .mobile-tabbar{display:none!important} /* Bottom "More" sheet — hidden until opened from the More tab (mobile only, but the hidden state is unconditional so it never shows on desktop). */ .mobile-sheet-backdrop{position:fixed!important;inset:0!important;z-index:998!important; background:rgba(20,22,40,.42)!important;opacity:0!important;visibility:hidden!important; transition:opacity .2s ease,visibility .2s ease!important;-webkit-tap-highlight-color:transparent!important} .mobile-sheet-backdrop.open{opacity:1!important;visibility:visible!important} .mobile-sheet{position:fixed!important;left:0!important;right:0!important;bottom:0!important;z-index:999!important; background:#ffffff!important;border-radius:22px 22px 0 0!important; padding:8px 16px calc(20px + env(safe-area-inset-bottom,0px))!important; box-shadow:0 -12px 44px rgba(20,22,40,.26)!important;max-height:86vh!important;overflow-y:auto!important; transform:translateY(100%)!important;transition:transform .26s cubic-bezier(.2,.8,.2,1)!important} .mobile-sheet.open{transform:translateY(0)!important} .mobile-sheet-handle{width:42px!important;height:4px!important;border-radius:999px!important;background:#d6d6e2!important;margin:8px auto 12px!important} .mobile-sheet-title{font-family:'Fraunces',Georgia,serif!important;font-size:22px!important;font-weight:600!important;color:#23252f!important;margin:0 4px 14px!important} .mobile-sheet-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important} .mobile-sheet-tile{display:flex!important;flex-direction:column!important;gap:10px!important; padding:16px 14px!important;min-height:88px!important;justify-content:center!important; border:1px solid #e8e8f2!important;border-radius:15px!important;background:#ffffff!important; text-decoration:none!important;color:#23252f!important;-webkit-tap-highlight-color:transparent!important} .mobile-sheet-tile svg{width:24px!important;height:24px!important;color:#5f68d6!important;stroke:#5f68d6!important;display:block!important;max-width:none!important} .mobile-sheet-tile span{font-size:14px!important;font-weight:600!important;line-height:1.2!important;color:#23252f!important} .mobile-sheet-tile:active{background:#f4f4fb!important} .mobile-sheet-tile.is-active{border-color:#c9ccf5!important;background:#f5f5fd!important} .mobile-sheet-signout{width:100%!important;margin-top:12px!important;min-height:50px!important; border:1px solid #f0d5cf!important;border-radius:12px!important;background:#ffffff!important; color:#c0492f!important;font:inherit!important;font-weight:700!important;font-size:15px!important;cursor:pointer!important} html.mobile-sheet-open,html.mobile-sheet-open body{overflow:hidden!important} /* Hide the floating "Finish setup" pill whenever ANY menu / dropdown / sheet is open, so it never hovers over or under an open menu. */ html:has(.floating-exp-menu, .status-change-menu, .record-menu.open, .customer-menu.open, .nav-more-menu:not([hidden]), .floating-menu, .operations-menu.open, .operations-menu.active) .ko-guide, html.mobile-sheet-open .ko-guide{display:none!important} /* removed: Website colors / button-color picker (kept in DOM hidden so JS won't break) */ .settings-nav-item[data-target="colors"]{display:none!important} .section[data-panel="colors"]{display:none!important} /* pin Danger zone apart at the bottom of settings nav */ .settings-nav-danger{margin-top:10px!important;padding-top:12px!important;border-top:1px solid #ececf4!important} /* ===== Invoice preview: fused into Customize invoice as a button + modal ===== */ .branding-preview-cta{margin-top:18px} .preview-theme-card{display:none!important} .inv-preview-overlay{position:fixed!important;inset:0!important;z-index:900!important;background:rgba(20,22,40,.34)!important;backdrop-filter:blur(6px)!important;display:none!important;align-items:flex-start!important;justify-content:center!important;padding:38px 16px!important;overflow:auto!important} .inv-preview-overlay.open{display:flex!important} .inv-preview-dialog{background:#fff!important;border:1px solid #e8e8f2!important;border-radius:16px!important;max-width:780px!important;width:100%!important;box-shadow:0 30px 80px rgba(20,22,40,.3)!important;overflow:hidden!important} .inv-preview-head{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:15px 22px!important;border-bottom:1px solid #ececf4!important} .inv-preview-head h2{margin:0!important;font-family:'Fraunces',Georgia,serif!important;font-size:20px!important} .inv-preview-body{padding:22px!important;max-height:80vh!important;overflow:auto!important} /* sample invoice mockup */ .si-box{border:1px solid #e6e6f0;border-radius:12px;padding:26px;background:#fff;color:#23252f;font-size:14px} .si-box.si-spacious{padding:34px}.si-box.si-compact{padding:18px} .si-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px} .si-box.si-centered .si-top{flex-direction:column;align-items:center;text-align:center} .si-brand{display:flex;gap:14px;align-items:center;min-width:0} .si-box.si-centered .si-brand{flex-direction:column} .si-logo{max-height:56px;width:auto;object-fit:contain} .si-logo-small{max-height:40px}.si-logo-large{max-height:78px} .si-co{font-weight:800;font-size:17px} .si-contact{color:#787a8a;font-size:12.5px;margin-top:3px;white-space:pre-line} .si-title{text-align:right;flex-shrink:0}.si-box.si-centered .si-title{text-align:center} .si-title strong{font-size:20px;letter-spacing:1px} .si-title div{color:#787a8a;font-size:12.5px} .si-billto{margin-bottom:16px} .si-billto span{display:block;color:#787a8a;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px} .si-table{width:100%;border-collapse:collapse;margin-bottom:16px} .si-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#787a8a;padding:8px;border-bottom:2px solid #23252f} .si-table td{padding:9px 8px;border-bottom:1px solid #eef0f6} .si-box.si-boxed .si-table th,.si-box.si-boxed .si-table td{border:1px solid #e6e6f0} .si-totals{margin-left:auto;width:260px} .si-totals>div{display:flex;justify-content:space-between;padding:6px 0} .si-total{border-top:2px solid #23252f;margin-top:4px;font-weight:800;font-size:16px} .si-notes{margin-top:16px} .si-notes span{display:block;color:#787a8a;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px} .si-notes p{margin:0;color:#55555c;white-space:pre-wrap} .si-pay{margin-top:18px} .si-pay-btn{display:inline-block;background:#1c1d24;color:#fff;padding:11px 20px;border-radius:9px;font-weight:700} /* primary / filled buttons -> black (periwinkle stays for links & accents) */ /* body-prefixed so it always beats the theme style tag regardless of load order */ body .btn-primary,body .btn-dark,body .pay-link,body #confirm-invoice,body .confirm-actions .btn-primary,body .theme-button-preview, body #toolbar-add-customer,body #open-price-editor,body #open-payment-entry-choice,body #record-payment,body #save-settings, body #save-customer,body #save-edit-customer,body #save-price,body #create-draft,body #use-draft,body #apply-payment-ai-draft,body .summary-action .btn, body .quick-primary,body .cust-add-btn,body .pay-add-btn,body .inv-add-btn,body .dash-actions-primary .btn-primary, body .integration-connect-btn,body .btn-dark,body .record-payment{ background:#1c1d24!important;background-color:#1c1d24!important;border-color:#1c1d24!important;color:#fff!important} body .btn-primary:hover,body .btn-dark:hover,body .pay-link:hover,body #confirm-invoice:hover,body .summary-action .btn:hover, body .quick-primary:hover,body .cust-add-btn:hover,body .pay-add-btn:hover,body .inv-add-btn:hover,body .dash-actions-primary .btn-primary:hover{ background:#000000!important;border-color:#000000!important} /* remaining solid-periwinkle buttons / action bars -> black */ body .wizard-step-btn.active,body .bulk-bar{background:#1c1d24!important;background-color:#1c1d24!important;border-color:#1c1d24!important;color:#fff!important} html,body{background:#f3f3fb!important;color:#23252f;margin:0!important; font-family:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif!important; -webkit-font-smoothing:antialiased} /* editorial serif headings */ h1,h2,h3,.card-head h2,.card-head h3,.ops-head h2,.panel h2,.brand h1,.ops-brand h1, #welcome-title,.cust-empty-title,.inv-empty-title,.greet,.hub-title{ font-family:'Fraunces',Georgia,'Times New Roman',serif!important;font-weight:600!important;letter-spacing:-.3px} /* ============ wide content container (NOT a shrunk card) ============ */ .page,.ops-page{ max-width:min(1640px, calc(100vw - 40px))!important;width:auto!important;min-height:100vh!important; margin:0 auto!important; background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important; overflow:visible!important; padding:18px 28px 56px!important} /* operations: hide the 4 metric cards above Estimates/Jobs/Schedule (kept in DOM for JS) */ .ops-stats{display:none!important} /* ====== header sits directly ON TOP of the content, split by a black line ====== */ /* kills app-nav.css's floating pill (no radius/shadow/margin/blur); attached, no gap */ .topbar,.ops-topbar{ min-height:0!important; width:auto!important; margin:0!important; padding:14px 22px!important; background:#ffffff!important;background-color:#ffffff!important; border:0!important;border-bottom:2px solid #1c1d24!important;border-radius:0!important; box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important; position:relative!important;z-index:400!important} /* the very next block (welcome / workspace) attaches straight under the line */ .topbar + *,.ops-topbar + *{margin-top:0!important} .welcome{margin-top:0!important} /* clean header: logo only — drop the kicker + page title next to the logo (all pages) */ .topbar .brand>div,.ops-topbar .ops-brand>div,.ops-brand>div{display:none!important} .topbar .brand span,.topbar .brand h1,.ops-brand span,.ops-brand h1{display:none!important} /* active nav tab: bold + underline instead of a pill */ .topbar .actions a.nav-active,.topbar .actions a[aria-current="page"], .ops-topbar .actions a.nav-active,.ops-topbar .actions a[aria-current="page"], .topbar .top-actions a.nav-active,.topbar .top-actions a[aria-current="page"]{ background:transparent!important;background-color:transparent!important; color:#23252f!important;border-color:transparent!important;box-shadow:none!important; border-radius:0!important;font-weight:800!important; text-decoration:underline!important;text-underline-offset:6px!important; text-decoration-thickness:2px!important;text-decoration-color:#5f68d6!important} .topbar .actions a.nav-active:hover,.topbar .actions a[aria-current="page"]:hover, .ops-topbar .actions a.nav-active:hover,.ops-topbar .actions a[aria-current="page"]:hover{ background:transparent!important;color:#23252f!important} /* white content cards on the soft page */ .card,.stat,.panel,.ops-panel,.customer-card,.mini-card,.est-builder-shell, .hub-card,.settings-nav,.operations-sidebar,.confirm-dialog,.edit-panel, .needs-action-list,.audit-summary,.chart-card,.insights .card{ background:#ffffff!important;border:1px solid #e8e8f2!important;box-shadow:none!important} .card,.panel,.ops-panel,.stat,.est-builder-shell,.confirm-dialog,.chart-card{border-radius:15px!important} .btn,.hub-card{border-radius:11px!important} /* menus/modals float with a soft shadow */ .menu-list,.record-menu-list,.nav-more-menu,.kp-modal,.mem-modal,.ai-float-panel{ background:#ffffff!important;border:1px solid #e7e7f1!important;box-shadow:0 14px 40px rgba(30,32,60,.16)!important} /* inputs */ input,select,textarea{border-radius:11px!important;border:1px solid #e7e7f1!important;background:#ffffff!important;color:#23252f!important} input:focus,select:focus,textarea:focus{border-color:#5f68d6!important;box-shadow:0 0 0 3px rgba(95,104,214,.16)!important} /* secondary / soft buttons -> clean outline */ .btn-soft,.row-actions button,.table-actions button,.customer-actions button, .record-actions .btn,.est-step{background:#ffffff!important;border:1px solid #e7e7f1!important;color:#23252f!important} .btn-soft:hover,.row-actions button:hover,.table-actions button:hover{background:#f4f4fb!important} /* links & accents */ a:not(.btn),.customer-name-link,.price-name{color:#5f68d6!important} /* tables */ .invoice-table th,.customer-table th{color:#787a8a!important;background:#f7f7fc!important;border-color:#ececf4!important} .invoice-table td,.customer-table td{border-color:#f0f0f6!important} .invoice-table tbody tr:nth-child(even){background:#fbfbff!important} .customer-table tbody tr:hover,.record-row:hover{background:#f6f6fd!important} /* loader */ .app-loader{background:#f3f3fb!important} .app-loader-ring{border-color:rgba(35,37,47,.14)!important;border-top-color:#5f68d6!important} /* muted / labels */ label,.stat span,.mini-card span,.brand span,.ops-brand span,.card-head p,.ops-head p,.chart-subtitle{color:#787a8a!important} /* ===== Umano bot icon = the app logo (floating tab, chat header, chat avatars) ===== */ .ai-side-tab .ai-tab-icon img{width:24px!important;height:24px!important;display:block!important;object-fit:contain!important;border-radius:6px!important} #ai-side-title{display:flex!important;align-items:center!important;gap:8px!important} #ai-side-title img.ai-title-mark{width:22px!important;height:22px!important;object-fit:contain!important;border-radius:5px!important;flex-shrink:0!important} .ai-avatar-logo{background:transparent!important;box-shadow:none!important;overflow:hidden!important;padding:0!important} .message.ai .msg-avatar.ai-avatar-logo{background:transparent!important;box-shadow:none!important} .ai-avatar-logo img{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important;border-radius:7px!important} /* welcome panels: natural height (no forced empty box) */ .welcome{align-items:start!important} .welcome .panel{display:flex!important;flex-direction:column!important} /* "Needs your attention" moved under the greeting — clean divider block */ .welcome-attention{margin-top:22px!important;padding-top:20px!important;border-top:1px solid #ececf4!important} .welcome-attention-head{display:flex!important;align-items:center!important;justify-content:space-between!important;margin-bottom:12px!important} .welcome-attention-head h3{font-size:16px!important;margin:0!important;font-family:'Fraunces',Georgia,serif!important} .welcome-attention-head span{font-size:13px!important;color:#787a8a!important;font-family:'Hanken Grotesk',sans-serif!important} .welcome-attention .needs-action-list{display:grid!important;gap:10px!important} .attention-empty{display:flex!important;align-items:center!important;gap:11px!important;padding:14px 2px 4px!important;color:#787a8a!important;font-size:14px!important;line-height:1.5!important} .attention-empty-check{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:26px!important;height:26px!important;border-radius:50%!important;background:#e6f4ec!important;color:#2f855a!important;font-weight:700!important;font-size:14px!important;flex-shrink:0!important} /* ================= Focused dashboard ================= */ /* header: greeting left, primary + "New" menu right (no button wall) */ .welcome.dash-header{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:20px!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin-bottom:22px!important} .dash-greet{min-width:0!important} .dash-greet h2{margin:0 0 4px!important} .dash-greet p{margin:0!important;color:#787a8a!important} .dash-actions{display:flex!important;flex-direction:column!important;align-items:flex-end!important;gap:12px!important;flex-shrink:0!important} .dash-actions-primary{display:flex!important;align-items:center!important;gap:10px!important} .dash-actions-primary .btn{min-height:42px!important} .dash-vittor{display:inline-flex!important;align-items:center!important;gap:8px!important;background:#fff!important;border:1px solid #e0def7!important;color:#23252f!important} .dash-vittor:hover{background:#faf9ff!important;border-color:#c8c3f5!important} .dash-vittor svg{width:16px!important;height:16px!important;flex-shrink:0!important} .dash-actions-links{display:flex!important;flex-wrap:wrap!important;justify-content:flex-end!important;gap:6px 16px!important;max-width:380px!important} .dash-actions-links a,.dash-actions-links button{background:transparent!important;border:0!important;padding:0!important;font:inherit!important;font-weight:600!important;font-size:13px!important;color:#23252f!important;cursor:pointer!important;text-decoration:none!important;white-space:nowrap!important} .dash-actions-links a:hover,.dash-actions-links button:hover{text-decoration:underline!important;text-decoration-color:#1c1d24!important} /* Today panel */ .today-card{margin-bottom:22px!important} .today-list{display:grid!important;gap:8px!important} .today-item{display:grid!important;grid-template-columns:88px 1fr auto!important;align-items:center!important;gap:14px!important;padding:12px 14px!important;border:1px solid #ececf4!important;border-radius:12px!important;text-decoration:none!important;color:inherit!important;background:#fff!important} .today-item:hover{background:#f6f6fd!important} .today-time{font-weight:700!important;color:#5f68d6!important;font-size:14px!important} .today-main{display:flex!important;flex-direction:column!important;min-width:0!important} .today-main strong{font-size:14.5px!important} .today-main span{color:#787a8a!important;font-size:13px!important} .today-status{font-size:12px!important;font-weight:600!important;color:#787a8a!important;background:#f1f1f8!important;padding:4px 10px!important;border-radius:999px!important;white-space:nowrap!important} .today-empty{display:flex!important;align-items:center!important;gap:11px!important;padding:6px 2px!important;color:#787a8a!important;font-size:14px!important} .today-empty a{color:#5f68d6!important} .today-empty-check{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:26px!important;height:26px!important;border-radius:50%!important;background:#e6f4ec!important;color:#2f855a!important;font-weight:700!important;flex-shrink:0!important} /* dashboard home: only 3 KPIs (scoped so it never hits the Invoices page) */ .dash-stats .stat-link:nth-child(4),.dash-stats .stat-link:nth-child(5){display:none!important} /* ===== compact KPI strip: one light bar with dividers (not chunky cards) ===== */ .stats{display:flex!important;flex-wrap:wrap!important;gap:0!important; background:#ffffff!important;border:1px solid #e8e8f2!important;border-radius:14px!important; box-shadow:none!important;overflow:hidden!important;margin-bottom:20px!important; grid-template-columns:none!important} .stats>*{flex:1 1 0!important;min-width:150px!important;border-left:1px solid #eef0f6!important} .stats>*:first-child{border-left:0!important} .stats .stat{background:transparent!important;border:0!important;border-radius:0!important; box-shadow:none!important;padding:14px 20px!important;height:100%!important} .stats .stat-link{text-decoration:none!important;color:inherit!important} .stats .stat span{font-size:12px!important;letter-spacing:.03em!important} .stats .stat strong{font-size:22px!important;margin-top:3px!important} .stats .stat small{margin-top:2px!important} /* ===== consistent list-page header (Invoices layout on every page) ===== */ /* title on the left, action buttons grouped on the right */ .card-head,.feed-head,.activity-head{ display:flex!important;align-items:flex-start!important;justify-content:space-between!important; gap:16px!important;flex-wrap:wrap!important} .invoice-head-actions,.feed-head-actions,.activity-head-actions,.cust-head-actions{ display:flex!important;align-items:center!important;gap:8px!important;flex-shrink:0!important;flex-wrap:wrap!important} /* settings: give the panel real breathing room below the nav (was jammed/clipped) */ .page>.settings-shell,.settings-shell{margin-top:26px!important} .settings-content .card{overflow:visible!important} /* make the main panel container a proper padded card (matches Invoice preview / Export) */ .settings-content .grid>main.card{background:#ffffff!important;border:1px solid #e8e8f2!important;border-radius:15px!important;box-shadow:none!important} .settings-content .grid>main.card>.card-body{padding:24px 26px!important} /* hide that main card entirely when its panel isn't the active one (kills the stray empty "stripe" on preview/export/danger tabs) */ .settings-content .grid>main.card:not(:has(.panel-active)){display:none!important} .settings-content .section[data-panel].panel-active{margin-top:0!important;padding-top:0!important;border-top:0!important} /* keep the generic main card-head hidden (each panel shows its own h3) */ .settings-content .grid>main.card>.card-head{display:none!important} /* standalone settings cards (preview / export / danger) keep a stacked header */ .card[data-panel="preview"]>.card-head,.card[data-panel="export"]>.card-head,.card[data-panel="danger"]>.card-head{display:block!important} .card[data-panel="preview"]>.card-head p,.card[data-panel="export"]>.card-head p,.card[data-panel="danger"]>.card-head p{margin-top:5px!important;max-width:680px!important} /* search + filters sit on their own row beneath the header */ .expenses-toolbar{display:flex!important;margin-top:14px!important} .expenses-toolbar-left{display:flex!important;gap:10px!important;flex:1 1 auto!important;min-width:0!important} .activity-panel>.filters,.feed .expenses-toolbar{margin-top:14px!important} /* ===== Operations overview: slim, scannable cards (one big number + status + button) ===== */ .operations-feature .ops-panel-body{display:flex!important;flex-direction:column!important;gap:10px!important;min-height:0!important} /* first metric = the single big number, stacked (number on top, label below) */ .operations-feature .operations-metric:first-of-type{order:0!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:1px!important;border:0!important;padding:0!important;margin:0!important} .operations-feature .operations-metric:first-of-type strong{order:0!important;font-family:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif!important;font-weight:700!important;font-size:34px!important;line-height:1.05!important;color:#23252f!important;letter-spacing:-.01em!important} .operations-feature .operations-metric:first-of-type span{order:1!important;color:#787a8a!important;font-size:12.5px!important;font-weight:600!important;text-transform:none!important} /* hide the second metric — it's already in Pipeline health */ .operations-feature .operations-metric ~ .operations-metric{display:none!important} /* short muted status line */ .operations-feature .feature-live-copy{order:1!important;color:#787a8a!important;font-size:13.5px!important;line-height:1.45!important;margin:0!important;font-weight:500!important} .operations-feature .feature-live-copy span{display:block!important;font-size:12.5px!important;margin-top:1px!important;color:#9a9aa8!important} /* one button, pinned to the bottom-left */ .operations-feature .btn{order:2!important;margin-top:4px!important;align-self:flex-start!important} /* one hero chart; move mix/audit/at-a-glance off the home screen */ .insights{grid-template-columns:1fr!important} .insights>.card:nth-child(2){display:none!important} .audit-summary{display:none!important} .layout>aside{display:none!important} /* ============ tables fit the screen — no horizontal cutoff ============ */ .customer-table,.invoice-table,.payment-table{ min-width:0!important;width:100%!important;table-layout:auto!important} .customer-table th,.customer-table td, .invoice-table th,.invoice-table td{width:auto!important} /* let long emails/addresses wrap instead of forcing the table wider */ .customer-table .customer-cell,.customer-name-link{ white-space:normal!important;overflow:visible!important;text-overflow:clip!important; overflow-wrap:anywhere!important;max-width:none!important} .customer-cell.address{overflow-wrap:anywhere!important;max-width:none!important} /* keep money on one line */ .balance-amount,.customer-table td .balance-amount{white-space:nowrap!important} /* the wrapper no longer needs to scroll horizontally */ .customer-table-wrap,.customers-shell .customer-table-wrap,.table-wrap{overflow-x:visible!important} /* a touch more density (less "zoomed") */ .customer-table td{height:auto!important;padding-top:12px!important;padding-bottom:12px!important} .customer-table th{padding-top:10px!important;padding-bottom:10px!important} /* ============================================================ MOBILE (<=760px) — this file has no media queries and loads AFTER mobile.css, so its unconditional !important layouts win on phones. Re-stack + right-size everything here so the phone view is clean and organized, not sparse or oversized. ============================================================ */ /* Phones in BOTH orientations: portrait matches max-width; landscape phones are wider than 760px but very short, so max-height catches them (keeps the bottom tab bar + mobile shell from vanishing on rotate). */ @media (max-width:760px), (max-height:500px){ /* Container: tighter side padding + real room at the bottom for the docked button and setup pill. (umano's .page rule above otherwise forces 28px sides and only 56px bottom on phones.) */ .page,.ops-page{padding:12px 14px calc(94px + env(safe-area-inset-bottom,0px))!important;max-width:none!important} /* ===== Sticky app-bar header — same treatment as the invoice flow. Welds the white header to the top edge, bleeds it past the page's side padding so it spans the full screen width, and pins it while scrolling so navigation is always one tap away. Applies to every page (both the .page and .ops-page shells share this .topbar). */ .topbar,.ops-topbar{ position:sticky!important;top:0!important;z-index:500!important; margin:-12px -14px 14px!important; padding:10px 14px!important; min-height:56px!important; background:rgba(255,255,255,.9)!important;background-color:rgba(255,255,255,.9)!important; -webkit-backdrop-filter:saturate(180%) blur(16px)!important; backdrop-filter:saturate(180%) blur(16px)!important; border:0!important;border-bottom:1px solid rgba(28,29,36,.12)!important;border-radius:0!important; box-shadow:0 4px 16px rgba(28,29,36,.06)!important} /* the expanded hamburger menu keeps a solid backdrop (not glass) so the links behind it never bleed through when it's open */ .topbar.nav-open,.ops-topbar.nav-open{background:#ffffff!important;background-color:#ffffff!important} /* ===================================================================== Mobile nav = ONE hamburger that opens a single popup list. No tabs are ever shown inline on a phone; every destination lives in the dropdown so the header stays uncluttered. Lives here (last-loaded) so it beats mobile.css's 2-column grid + app-nav.css's inline row. ===================================================================== */ /* the toggle app-mobile.js injects becomes an icon-only hamburger */ .mobile-nav-toggle{ display:inline-flex!important;align-items:center!important;justify-content:center!important; width:46px!important;min-width:46px!important;max-width:46px!important; height:44px!important;min-height:44px!important;padding:0!important;gap:0!important; border:1px solid #e0e0ea!important;border-radius:12px!important; background:#ffffff!important;color:#23252f!important;font:inherit!important;box-shadow:none!important} .mobile-nav-toggle span,.mobile-nav-toggle strong{ position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important; overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important} .mobile-nav-toggle::before{content:"\2630"!important;font-size:23px!important;line-height:1!important;color:#23252f!important} .topbar.nav-open .mobile-nav-toggle::before,.ops-topbar.nav-open .mobile-nav-toggle::before{content:"\2715"!important;font-size:19px!important} /* The tab row becomes a floating popup, hidden until the hamburger is tapped. Every selector below is prefixed with `.topbar ` — the ops header carries BOTH `topbar` and `ops-topbar`, so this one prefix covers every page AND adds a class of specificity so these rules beat app-nav.css (.actions .btn), app-operations.css (.ops-topbar .actions) and the runtime-injected theme