/* ============================================================================ 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'); :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} /* 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}