:root{--ink:#24253d;--muted:#858697;--line:#ececf3;--purple:#6558dc;--purple-dark:#5145bc;--purple-soft:#f0edff;--surface:#f8f9fc;--green:#2b9e80;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px;color:var(--ink);background:var(--surface);font-synthesis:none} *{box-sizing:border-box}body{margin:0;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,a,input,select{outline-offset:4px}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}a{color:inherit;text-decoration:none}h1,h2,h3,h4,p{margin:0}button{border:0}button,.button{transition:background .18s,box-shadow .18s,transform .18s}button:active,.button:active{transform:translateY(1px)}.icon{width:20px;height:20px;flex-shrink:0;vertical-align:middle}.muted{color:var(--muted)}.brand{display:flex;gap:10px;align-items:center;font-size:29px;font-weight:750;letter-spacing:-1.6px}.brand-mark{background:var(--purple);color:#fff;width:36px;height:38px;border-radius:11px;font-size:31px;line-height:36px;text-align:center;position:relative;font-weight:700;letter-spacing:-3px;padding-right:6px}.brand-mark span{font-size:25px;margin-left:1px}.brand-dot{color:var(--purple)}.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:41px;padding:10px 17px;border-radius:8px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid transparent}.primary{background:var(--action-primary,var(--purple));color:var(--action-primary-text,#fff);box-shadow:0 3px 8px var(--action-primary-shadow,color-mix(in srgb,var(--purple) 16%,transparent))}.primary:hover{background:var(--action-primary-hover,var(--purple-dark))}.secondary{background:white;border-color:#e4e4ee;color:#57586c}.secondary:hover{background:#f6f5fc;border-color:#d9d4f5}.white{background:white;color:#6555c3}.white:hover{background:#f5f1ff}.danger{color:#c64a61;border-color:#f1d5db;background:#fff7f8}.text-button{display:inline-flex;gap:6px;align-items:center;background:none;color:var(--purple);padding:0;font-size:12px;font-weight:600}.text-button .icon{width:16px;height:16px}.icon-button{width:35px;height:35px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;background:none;color:#9291a4}.icon-button:hover{background:#f1effb;color:var(--purple)}.full-width{width:100%}.small-button{min-height:32px;padding:7px 11px;font-size:11px}.eyebrow,.section-eyebrow{font-size:10px;font-weight:650;letter-spacing:1.7px}.pill{display:inline-flex;gap:7px;align-items:center;color:var(--purple);background:var(--purple-soft);font-size:9px;letter-spacing:1.1px;font-weight:650;padding:7px 10px;border-radius:5px}.pill .icon{width:14px;height:14px}.avatar,.company-avatar{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:#ede9ff;color:#6b59cf;width:43px;height:43px;border-radius:12px;font-weight:650;font-size:14px}.avatar{border-radius:50%;background:#f0e4da;color:#92705e;font-size:12px;width:35px;height:35px}.avatar.small{width:30px;height:30px;font-size:11px}.avatar.neutral{background:#f0eff8;color:#8982b1}.avatar .icon{width:17px;height:17px}.company-avatar.small{width:34px;height:34px;font-size:11px;border-radius:8px}.status-dot,.demo-dot{display:inline-block;width:6px;height:6px;background:#39af90;border-radius:50%;flex-shrink:0}.inactive{background:#a5a5b4}.status-label{display:inline-flex;gap:6px;align-items:center;font-size:11px}.active-text{color:var(--green)}.role-tag{display:inline-block;border-radius:5px;background:#f0edfd;color:#7b69bd;font-size:9px;font-weight:650;letter-spacing:.5px;padding:5px 8px}.role-tag.subtle{background:#f0f1f5;color:#777b8c}.soft-tag{white-space:nowrap;font-size:8px;letter-spacing:.7px;font-weight:600;padding:6px 8px;background:#f5f4fa;color:#9692ac;border:1px solid #eeecf7;border-radius:5px}.connected-tag{display:inline-flex;gap:6px;align-items:center;color:var(--green);font-size:10px;white-space:nowrap}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* Workspace */ .workspace{display:flex;min-height:100vh}.sidebar{width:228px;background:white;border-right:1px solid var(--line);padding:31px 19px 15px;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:20}.sidebar>.brand{padding-left:11px}.workspace-switch{display:flex;align-items:center;gap:10px;background:#fafafd;border:1px solid var(--line);border-radius:9px;text-align:left;margin:31px 0 26px;padding:10px;width:100%}.workspace-switch>span:nth-child(2){min-width:0;flex:1}.workspace-switch strong{display:block;font-size:11px;color:#45445e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nav-caption{font-size:8px;letter-spacing:1.5px;color:#aaa7bb;font-weight:650;padding:0 12px;margin-bottom:11px}.nav-caption.spaced{margin-top:24px}.nav-link{display:flex;align-items:center;gap:11px;min-height:42px;border-radius:7px;color:#838294;font-size:12px;padding:10px 12px;margin-bottom:4px}.nav-link:hover{background:#f8f7fc;color:var(--purple)}.nav-link .icon{width:18px;height:18px}.nav-link.active{background:#f0edff;color:var(--purple);font-weight:600}.nav-new{font-size:7px;letter-spacing:.4px;color:#a19ab9;border:1px solid #ece8f7;border-radius:4px;margin-left:auto;padding:3px 4px}.sidebar-bottom{margin-top:auto;padding-top:35px}.profile{display:flex;gap:9px;align-items:center;text-align:left;background:none;padding:18px 2px 0;width:100%}.profile>span:nth-child(2){flex:1;min-width:0}.profile strong{font-size:11px;display:block;color:#565267;overflow:hidden;text-overflow:ellipsis}.profile small{text-transform:capitalize;color:#aba4b5;display:block;margin-top:4px;font-size:10px}.profile>.icon{width:14px;color:#a49bad}.main-column{margin-left:228px;min-width:0;flex:1;display:flex;flex-direction:column}.topbar{height:77px;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid var(--line);padding:0 34px;gap:15px}.breadcrumb{color:#a2a0b0;font-size:11px;white-space:nowrap}.breadcrumb span{margin:0 12px;color:#d2cedd}.breadcrumb strong{color:#666174;font-weight:500}.topbar-actions{display:flex;align-items:center;gap:14px}.search-button{display:flex;align-items:center;gap:9px;color:#a7a2b5;background:#fbfbfd;border:1px solid #f0eef6;min-width:233px;padding:8px 10px;border-radius:7px;font-size:10px}.search-button .icon{width:15px;height:15px}.search-button kbd{font-size:9px;font-family:inherit;background:#fff;border:1px solid #edeaf4;border-radius:4px;padding:2px 4px;color:#aaa5b8;margin-left:auto}.topbar-divider{height:22px;width:1px;background:var(--line)}.mobile-menu{display:none}.content{padding:31px 35px 33px;max-width:1600px;width:100%;margin:0 auto;flex:1}.page-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px;gap:15px}.section-eyebrow{font-size:8px;color:#aaa4b8;letter-spacing:1.45px;margin-bottom:8px}.page-heading h1{font-size:27px;letter-spacing:-.9px;font-weight:650;line-height:1.2;margin-bottom:9px}.page-heading p{color:#9a95a8;font-size:11px}.date-label{display:inline-flex;align-items:center;gap:7px;border:1px solid #eae7f1;border-radius:6px;padding:9px 11px;color:#9891a6;background:#fff;font-size:10px}.date-label .icon{width:13px;height:13px}.welcome-banner{position:relative;overflow:hidden;min-height:241px;display:flex;justify-content:space-between;background:#ece9fa;background:linear-gradient(105deg,#ebe6fb 0%,#edeafa 55%,#e8e8fa 100%);border:1px solid #e6e0f7;border-radius:12px;padding:27px 33px;margin-bottom:23px}.welcome-banner .eyebrow{font-size:8px;color:#9184b3;letter-spacing:1.6px}.welcome-banner h2{font-size:31px;line-height:1.22;letter-spacing:-1px;color:#51437c;font-weight:650;margin:10px 0}.welcome-banner p{font-size:10px;line-height:1.8;color:#9a8eaf;margin-bottom:14px}.welcome-banner .button{font-size:10px;min-height:34px;padding:8px 12px}.welcome-banner .button .icon{width:13px;height:13px}.banner-illustration{position:relative;width:43%;max-width:360px;flex-shrink:0;display:flex;align-items:center;justify-content:center}.mini-invoice{width:180px;height:198px;background:#fffefefa;transform:rotate(-9deg);border-radius:11px;box-shadow:0 12px 23px #8572ba14;padding:20px;position:relative;z-index:1;border:1px solid #ffffff;align-self:center}.mini-logo{font-size:25px;color:#8d7abb;font-weight:700;letter-spacing:-2px;line-height:1;margin-bottom:10px}.mini-caption{font-size:6px;letter-spacing:1px;color:#b5a8c9}.mini-line{height:5px;background:#f1edf7;border-radius:2px;width:46px;margin-top:6px}.mini-line.long{width:80px;margin-top:12px}.mini-table{padding:12px 0;border-top:1px solid #f1edf6;border-bottom:1px solid #f1edf6;margin-top:12px}.mini-table span{display:block;width:100%;height:4px;border-radius:2px;background:#f5f1f9;margin-bottom:5px}.mini-table span:last-child{width:70%;margin:0}.mini-total{display:flex;align-items:center;justify-content:space-between;font-size:7px;color:#a08ab6;margin-top:10px}.mini-total .icon{height:13px;width:13px;color:#77bfa6}.floating-circle{position:absolute;top:8px;right:25px;width:53px;height:53px;background:#ffffff70;color:#a69ac7;border-radius:50%;display:flex;align-items:center;justify-content:center;transform:rotate(14deg)}.floating-circle .icon{width:26px;height:26px}.floating-tag{position:absolute;bottom:9px;right:0;z-index:2;display:flex;align-items:center;gap:7px;color:#9d91b4;font-size:8px;background:#fffefa;border:1px solid white;box-shadow:0 4px 10px #9a81ae0b;border-radius:7px;padding:10px;transform:rotate(4deg)}.floating-tag .icon{color:#a39abf;width:14px;height:14px}.banner-illustration:before{content:"";position:absolute;width:230px;height:230px;border:1px solid #ded6f064;border-radius:50%;transform:rotate(-10deg)}.banner-illustration:after{content:"";position:absolute;width:280px;height:280px;border:1px solid #ded6f04a;border-radius:50%}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:23px}.metric-card{background:white;border:1px solid var(--line);border-radius:10px;padding:17px 18px 16px}.metric-top{display:flex;justify-content:space-between;align-items:center;gap:5px}.metric-top>span:first-child{font-size:8px;font-weight:550;letter-spacing:.8px;color:#9f98ad}.metric-icon{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:8px}.metric-icon .icon{width:16px;height:16px}.violet{background:#f1edff;color:#9686ce}.green{background:#eaf7f1;color:#83b7a6}.orange{background:#fff4e8;color:#c9a37a}.blue{background:#edf2fb;color:#90a4d0}.metric-value{display:block;font-size:29px;font-weight:500;line-height:1.3;color:#7d738b;margin:6px 0 9px}.metric-note{font-size:9px;color:#afa8b8}.overview-grid{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(245px,1fr);gap:21px;margin-bottom:21px}.panel{background:white;border:1px solid var(--line);border-radius:10px;overflow:hidden}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:21px 22px}.panel-heading h3{font-size:13px;letter-spacing:-.2px;font-weight:600;color:#5b516b}.panel-heading p{font-size:9px;color:#aaa1b5;margin-top:6px;line-height:1.5}.journey-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;padding:0 20px 21px}.journey-card{padding:13px 12px 12px;border:1px solid #efebf6;border-radius:8px;background:#fdfcfe;transition:background .2s,transform .2s}.journey-card:hover{background:#f6f2fd;transform:translateY(-2px)}.journey-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.journey-top small{font-size:9px;color:#ccc1d9;font-weight:500}.module-icon{width:35px;height:35px;display:inline-flex;align-items:center;justify-content:center;background:#f1edf9;color:#a294c3;border-radius:9px;flex-shrink:0}.module-icon .icon{width:19px;height:19px}.journey-card h4{font-size:10px;line-height:1.5;color:#73617f;font-weight:600}.journey-card p{font-size:9px;color:#b0a3ba;line-height:1.7;margin:7px 0 15px}.journey-link{font-size:8px;font-weight:550;color:#9c87b2;display:flex;align-items:center;justify-content:space-between;gap:4px}.journey-link .icon{width:13px;height:13px}.panel-foot{display:flex;align-items:center;gap:7px;font-size:8px;color:#aaa0b6;padding:13px 21px;border-top:1px solid #f0ecf6;background:#fdfbfe;line-height:1.5}.panel-foot .icon{width:12px;height:12px}.details-panel .panel-heading{padding-bottom:15px}.company-detail{display:flex;align-items:center;gap:12px;padding:0 22px 18px}.company-detail strong{font-size:11px;color:#796584;font-weight:600;display:block}.company-detail small{font-size:9px;display:block;color:#b9aabb;margin-top:5px}.details-panel dl{padding:0 22px;margin:0}.details-panel dl>div{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;font-size:10px}.details-panel dt{color:#b2a4b8}.details-panel dd{margin:0;color:#8f799c}.details-panel dd.active-text{color:#90b8a7;display:flex;align-items:center;gap:5px}.details-panel>.button{width:calc(100% - 44px);margin:0 22px 21px;color:#a18db1;font-size:9px;min-height:32px}.details-panel>.button .icon{width:13px;height:13px}.bottom-note{display:flex;align-items:center;gap:13px;padding:15px 19px;border:1px solid #eee9f4;background:#faf8fd;border-radius:9px;color:#b3a4c0;font-size:10px;line-height:1.6}.note-icon{display:flex;padding:8px;background:#f2edf9;border-radius:9px;color:#b5a4c7}.bottom-note strong{font-size:10px;color:#9e8aad;font-weight:550}.bottom-note p{font-size:9px;color:#bbadca;margin-top:3px}.bottom-note .connected-tag{margin-left:auto;font-size:8px;color:#a1baa8}.app-footer{display:flex;justify-content:space-between;padding:0 35px 20px;color:#bfb6ca;font-size:8px}.app-footer>span:last-child{display:flex;align-items:center;gap:5px}.app-footer .icon{height:11px;width:11px} /* Forms, access and module screens */ input,select{width:100%;border:1px solid #e4e0ed;border-radius:7px;min-height:43px;padding:11px 12px;background:white;color:#65566f;font-size:12px}input:focus,select:focus{outline:2px solid #c8baf4;outline-offset:1px;border-color:#b7a8e5}input::placeholder{color:#b9afc3}input:disabled,input[readonly]{background:#faf8fc;color:#a69ab1}label{display:block;color:#766781;font-size:11px;font-weight:550;margin:19px 0 9px}.form-error{color:#bb526a;font-size:11px;line-height:1.6;min-height:18px;margin:13px 0}.form-error:empty{margin:8px 0;min-height:0}.panel-form{padding:0 23px 22px}.panel-form label:first-child{margin-top:0}.field-note{display:block;font-size:9px;color:#a89ab4;line-height:1.7;margin-top:8px}.form-footer{border-top:1px solid var(--line);padding-top:19px;margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:14px}.form-footer>span{font-size:9px;color:#ad9cb8}.settings-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(240px,1fr);gap:23px}.settings-side{padding:24px;margin-bottom:20px}.settings-side h3{font-size:14px;color:#756181;margin:16px 0 9px}.settings-side p{color:#ab99b7;font-size:11px;line-height:1.8;margin-bottom:20px}.settings-side .pill{font-size:7px}.settings-side .module-icon{width:40px;height:40px}.count-tag{font-size:9px;background:#f1edf7;border-radius:5px;margin-left:6px;padding:4px 6px;color:#a08baf}table{border-collapse:collapse;width:100%;text-align:left;white-space:nowrap}th{font-size:9px;font-weight:500;background:#fcfafd;color:#ab9cb7;padding:13px 22px;border-top:1px solid #f4f0f7;border-bottom:1px solid #f0ebf5}td{padding:17px 22px;border-bottom:1px solid #f4f0f7;font-size:11px;color:#9883a6}.table-scroll{overflow-x:auto}.table-person{display:flex;gap:10px;align-items:center}.table-person strong{font-size:11px;font-weight:550;color:#7b658b;display:block}.table-person small{display:block;font-size:9px;color:#b6a4c2;margin-top:4px}.you-tag{font-size:8px;font-weight:400;color:#b8a7c3;margin-left:5px}.align-right{text-align:right}.pagination{padding:17px 22px;display:flex;justify-content:space-between;align-items:center;gap:12px;color:#b6a4c2;font-size:9px}.pagination>div{display:flex;gap:7px}.self-membership{padding:30px}.self-membership h3{margin:20px 0 10px}.self-membership p{line-height:1.8;margin-top:10px}.module-callout{display:flex;gap:13px;align-items:center;margin-bottom:23px;padding:16px 18px;border:1px solid #eae1f3;border-radius:9px;background:#f3eefb}.module-callout strong{font-size:11px;font-weight:550;color:#9379a7}.module-callout p{font-size:10px;line-height:1.7;color:#b19abe;margin-top:4px}.module-callout>.soft-tag{margin-left:auto}.module-empty{display:flex;align-items:center;flex-direction:column;justify-content:center;text-align:center;padding:60px 25px 65px;min-height:350px}.empty-illustration{position:relative;background:linear-gradient(140deg,#f0e8fc,#f8f5fd);width:78px;height:83px;display:flex;align-items:center;justify-content:center;border-radius:23px;color:#b8a3ce;transform:rotate(-5deg);margin-bottom:25px;border:1px solid #eee5f5;box-shadow:7px 7px 0 #faf6fc}.empty-illustration>.icon{width:36px;height:36px;stroke-width:1.2}.empty-illustration>span{position:absolute;right:-6px;bottom:1px;background:white;width:25px;height:25px;border-radius:50%;border:1px solid #eee7f4;font-size:20px;color:#b29cc9}.module-empty h2{font-size:20px;letter-spacing:-.5px;color:#8a729e;font-weight:550}.module-empty p{color:#b5a0c4;font-size:11px;line-height:1.9;margin:13px 0 22px}.empty-note{display:block;color:#c3b2cf;font-size:9px;margin-top:17px}.next-module-note{display:flex;align-items:center;gap:13px;margin-top:19px;font-size:10px;color:#b5a0c4}.next-module-note>span{font-size:8px;letter-spacing:1px;color:#baa2c9}.next-module-note strong{font-weight:500;color:#a68ab9}.next-module-note p{margin-left:auto;color:#bfaacf;font-size:9px}.error-banner{padding:15px;background:#fff1f2;border:1px solid #f4d3da;border-radius:9px;color:#b46378;font-size:11px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between}.spinner{width:25px;height:25px;display:inline-block;border:2px solid #ebe3f6;border-top-color:var(--purple);border-radius:50%;animation:spin .7s linear infinite}.loading-panel,.full-loading{min-height:350px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;color:#aa96bb;font-size:12px}.full-loading{height:100vh}@keyframes spin{to{transform:rotate(360deg)}} /* Entry screens */ .login-shell{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;background:white}.login-story{display:flex;flex-direction:column;background:#eee9f9;position:relative;padding:45px 56px;overflow:hidden}.login-story .brand{font-size:30px}.login-story-body{margin:auto 0;padding:40px 0}.login-story .eyebrow{color:#a18ab8;font-size:8px;letter-spacing:1.45px}.login-story h1{font-size:clamp(37px,4.3vw,67px);font-weight:550;color:#645072;letter-spacing:-2.7px;line-height:1.13;margin:22px 0}.login-story h1 em{font-style:normal;color:#a88cc3}.login-story p{font-size:12px;color:#ab96ba;line-height:1.9}.login-foot{font-size:9px;color:#b19dc0}.story-art{position:relative;margin-top:48px;max-width:355px}.art-card{display:flex;align-items:center;gap:13px;background:#ffffffb3;border:1px solid white;border-radius:12px;padding:19px;transform:rotate(-3deg);box-shadow:0 10px 30px #876eaa0c}.art-icon{background:#f1e8f9;width:40px;height:44px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#ad95c2}.art-card strong{font-size:11px;color:#9d82af;font-weight:550;display:block}.art-card div>span{font-size:9px;color:#bda8cb;display:block;margin-top:5px}.art-card>.icon{margin-left:auto;color:#96b7a5;width:16px;height:16px}.art-decoration{position:absolute;right:-8px;top:-20px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#f9f5fd;border:1px solid white;border-radius:50%;color:#b29dc9;transform:rotate(13deg)}.login-panel{display:flex;align-items:center;justify-content:center;padding:40px}.login-form-wrap{width:100%;max-width:347px}.login-form-wrap>.pill{margin-bottom:21px}.login-form-wrap>h2{font-size:31px;font-weight:600;letter-spacing:-1px;color:#655373;margin-bottom:10px}.login-form-wrap>.muted{font-size:11px;color:#b09fbc;margin-bottom:30px}.login-form-wrap label{font-size:10px}.login-form-wrap input{min-height:45px;font-size:11px}.label-row{display:flex;align-items:center;justify-content:space-between;margin:19px 0 9px}.label-row label{margin:0}.label-row .text-button{font-size:9px;color:#ab94bd}.password-wrap{position:relative}.password-wrap input{padding-right:60px}.password-wrap .text-button{position:absolute;right:13px;top:16px;font-size:9px;color:#b59dc6}.login-submit{width:100%;margin-top:13px;min-height:45px;font-size:11px;justify-content:space-between;padding-left:16px;padding-right:15px}.login-submit .icon{width:16px;height:16px}.demo-card{display:flex;align-items:center;gap:9px;margin-top:27px;background:#faf8fd;border:1px solid #eee7f5;padding:13px 11px;border-radius:8px}.demo-card strong{font-size:9px;font-weight:550;color:#a68bb8;display:block}.demo-card p{font-size:8px;color:#c0accd;margin-top:4px}.demo-card .text-button{margin-left:auto;font-size:8px;white-space:nowrap;color:#b39ac7}.demo-card .icon{width:12px;height:12px}.demo-dot{width:5px;height:5px;background:#a7bdaa}.login-legal{text-align:center;font-size:9px;color:#c4b2ce;margin-top:26px}.company-picker{min-height:100vh;display:flex;align-items:center;flex-direction:column;padding:45px 25px;background:radial-gradient(ellipse at 50% 10%,#f1edfb 0,transparent 60%),#faf9fd}.picker-content{margin:auto 0;padding:55px 0;max-width:640px;width:100%;text-align:center}.picker-content h1{font-size:30px;letter-spacing:-1px;color:#745c87;margin:19px 0 10px;font-weight:550}.picker-content>p{font-size:12px;color:#b09abe}.company-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;text-align:left;margin:32px 0 22px}.company-card{display:flex;align-items:center;gap:13px;border:1px solid #eae2f1;background:white;padding:21px 17px;border-radius:11px;text-align:left;box-shadow:0 4px 12px #84729405}.company-card:hover{background:#f9f5fd;border-color:#cfc0e5;box-shadow:0 5px 15px #9e80ba10}.company-card>span:nth-child(2){min-width:0}.company-card strong{display:block;font-size:12px;color:#9276a3;font-weight:550}.company-card small{display:block;font-size:9px;color:#bfa8cc;margin-top:6px}.company-card>.icon{margin-left:auto;color:#c1accf;width:15px;height:15px}.color-1{color:#a58a6d;background:#f7f0e5}.color-2{color:#79a290;background:#eef7f1}.picker-signout{display:block;margin:23px auto 0;color:#b49ac7;font-size:10px}.local-footer{font-size:9px;color:#c4b0d1} /* Dialogs */ dialog{border:1px solid #eae1f3;border-radius:16px;padding:30px;max-width:430px;width:calc(100% - 36px);color:var(--ink);box-shadow:0 24px 100px #29213820}dialog::backdrop{background:#29213855;backdrop-filter:blur(3px)}.modal-close{position:absolute;top:12px;right:12px}dialog h2{font-size:22px;letter-spacing:-.6px;color:#846692;font-weight:550;margin:18px 0 10px}dialog>p{font-size:11px;line-height:1.8;margin-bottom:20px;color:#b39abe}dialog label{font-size:10px}dialog .module-icon{width:41px;height:41px}dialog input,dialog select{font-size:11px}.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:23px}.checkbox-label{display:flex;align-items:center;gap:9px}.checkbox-label input{width:15px;height:15px;min-height:0;accent-color:var(--purple)}.account-logout{margin-top:12px}#toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,10px);background:#453b59;color:#f5ecff;font-size:11px;padding:13px 20px;border-radius:9px;box-shadow:0 8px 30px #3d2d6126;z-index:100;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:90vw;line-height:1.6}#toast.visible{opacity:1;transform:translate(-50%,0)}.search-results{display:flex;flex-direction:column;margin-top:15px;gap:4px}.search-result{display:flex;align-items:center;gap:10px;padding:11px 8px;border-radius:7px;font-size:11px;color:#9d7db3}.search-result[hidden]{display:none}.search-result:hover{background:#f7f2fc}.search-result .icon{width:16px;height:16px}.search-result .icon:last-child{margin-left:auto} /* Responsive */ @media(min-width:1500px){.content{padding-top:39px}.welcome-banner{min-height:275px}.welcome-banner h2{font-size:38px}.welcome-banner p{font-size:12px}.metric-card{padding:22px}.metric-value{font-size:33px}.journey-card{padding:20px 17px}.journey-card h4{font-size:12px}.journey-card p{font-size:10px}.journey-link{font-size:10px}.panel-heading h3{font-size:14px}.panel-heading p{font-size:11px}} @media(max-width:1120px){.sidebar{width:200px;padding:27px 13px 15px}.main-column{margin-left:200px}.content{padding:27px 24px}.topbar{padding:0 24px}.overview-grid{grid-template-columns:minmax(0,1fr)}.details-panel{display:none}.search-button{min-width:185px}.metric-grid{gap:10px}.metric-card{padding:14px 12px}.metric-top>span:first-child{font-size:7px}.metric-note{font-size:8px}.app-footer{padding:0 24px 18px}.bottom-note .connected-tag{display:none}} @media(max-width:760px){.sidebar{transform:translateX(-100%);transition:transform .2s;width:228px;box-shadow:10px 0 45px #6558dc15}.sidebar.mobile-open{transform:translateX(0)}.main-column{margin-left:0}.topbar{height:63px;padding:0 18px}.mobile-menu{display:flex}.breadcrumb{margin-right:auto;font-size:10px}.topbar-actions{gap:7px}.search-button{min-width:0;background:none;border:0;padding:7px}.search-button>span,.search-button kbd,.topbar-divider{display:none}.topbar-actions>.avatar{display:none}.content{padding:23px 18px}.page-heading{align-items:flex-start;margin-bottom:20px}.page-heading h1{font-size:24px}.page-heading p{max-width:240px;font-size:10px;line-height:1.6}.heading-aside .date-label{font-size:8px;padding:7px}.date-label .icon{display:none}.welcome-banner{padding:23px;min-height:235px}.welcome-banner h2{font-size:28px}.welcome-banner .eyebrow{font-size:7px;letter-spacing:1.2px}.banner-illustration{width:38%;margin-right:-15px}.mini-invoice{width:125px;height:162px;padding:14px;transform:rotate(-9deg) scale(.95)}.mini-caption{font-size:5px}.mini-table{padding:7px 0}.mini-total{font-size:6px}.floating-circle{width:33px;height:33px;right:0;top:6px}.floating-circle .icon{width:18px;height:18px}.floating-tag{font-size:6px;bottom:3px;padding:7px;right:-3px}.floating-tag .icon{width:11px;height:11px}.banner-illustration:before{width:155px;height:155px}.banner-illustration:after{width:190px;height:190px}.metric-grid{grid-template-columns:1fr 1fr;gap:11px}.metric-card{padding:15px}.metric-top>span:first-child{font-size:8px}.metric-note{font-size:9px}.journey-grid{grid-template-columns:1fr;padding:0 17px 17px}.journey-card{display:grid;grid-template-columns:38px 1fr;column-gap:13px;padding:13px}.journey-top{grid-row:1/4;margin:0;align-self:start}.journey-top small{display:none}.journey-card h4{font-size:11px}.journey-card p{font-size:10px;margin:5px 0 10px}.journey-link{font-size:9px}.panel-heading{padding:19px 17px}.panel-heading h3{font-size:12px}.panel-heading .soft-tag{font-size:6px;padding:5px}.panel-foot{padding:12px 17px}.bottom-note{padding:12px;gap:9px}.bottom-note p{font-size:8px}.bottom-note strong{font-size:9px}.note-icon{padding:6px}.note-icon .icon{width:16px;height:16px}.app-footer{padding:0 18px 18px;font-size:7px}.settings-grid{grid-template-columns:1fr}.settings-side{padding:20px}.module-callout{padding:12px;align-items:flex-start}.module-callout .soft-tag{display:none}.module-callout strong{font-size:10px}.module-callout p{font-size:9px}.module-empty{padding:48px 17px}.module-empty h2{font-size:18px}.next-module-note{flex-wrap:wrap;gap:8px}.next-module-note p{width:100%;margin:2px 0}.panel-form{padding:0 17px 20px}.form-footer>span{font-size:8px}.heading-aside>.button{font-size:9px;padding:8px 10px;min-height:35px}.heading-aside>.button .icon{width:13px}.table-person strong{font-size:10px}td,th{padding:14px 17px}.pagination{padding:15px 17px;font-size:8px}.small-button{font-size:9px}.login-shell{grid-template-columns:1fr}.login-story{display:none}.login-panel{min-height:100vh;padding:30px 24px;background:radial-gradient(ellipse at 100% 0%,#f0eafa,transparent 60%),white}.login-form-wrap>h2{font-size:33px}.company-cards{grid-template-columns:1fr}.picker-content{max-width:400px}.picker-content h1{font-size:26px}.company-picker{padding-top:30px}.company-card{padding:18px}.company-card strong{font-size:13px}} @media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition:none!important}} /* Keep secondary content readable on both the desktop workspace and small screens. */ .brand{gap:10px;font-size:18px;letter-spacing:-.4px;line-height:1.25;min-height:40px}.brand-company-name{overflow-wrap:anywhere;max-width:155px}.brand-logo{width:38px;height:38px;border-radius:9px;font-size:13px;padding:3px;flex-shrink:0}.tenant-logo-image{display:block;width:100%;height:100%;object-fit:contain;border-radius:8px}.company-avatar:has(.tenant-logo-image){background:transparent}.logo-editor{display:flex;gap:18px;align-items:center;padding:15px;background:#faf8fd;border:1px solid var(--line);border-radius:9px;margin-bottom:24px}.logo-preview,.selected-logo-preview{width:70px;height:70px;object-fit:contain;border-radius:10px}.logo-preview{font-size:22px}.logo-controls{flex:1;min-width:0}.logo-controls input[type=file]{font-size:11px;background:white;padding:8px;min-height:38px}.logo-controls input::file-selector-button{font:inherit;color:var(--purple);border:0;background:#f0ebff;border-radius:5px;padding:6px 9px;margin-right:10px;cursor:pointer}.logo-controls .checkbox-label{font-size:10px;margin:12px 0 0}.login-story .brand{font-size:22px}.company-picker .brand-company-name{max-width:260px} .field-error{color:#b43f58;font-size:11px;line-height:1.6;margin:7px 0 0}input[aria-invalid="true"],select[aria-invalid="true"]{border-color:#c65c72;background:#fffafb} .master-data-panel{padding-bottom:8px}.master-data-panel .panel-heading{align-items:flex-start}.master-data-panel .section-eyebrow{display:block;margin-bottom:7px}.master-data-form{padding:0 22px 16px}.master-data-form label{display:block;margin-bottom:7px}.master-data-input{display:flex;gap:9px;align-items:center}.master-data-input input{flex:1;min-width:0}.master-data-input .button{min-height:40px}.master-data-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}.master-data-row{display:flex;align-items:center;gap:10px;padding:13px 22px;border-bottom:1px solid var(--line);font-size:12px;color:#5e526e}.master-data-row>span:first-child{flex:1;font-weight:600}.master-data-row .status-label{font-size:10px}.master-data-row .button{margin-left:5px}.master-data-empty{padding:18px 22px;font-size:11px} .assigned-workspace{cursor:default}.role-demo{display:flex;align-items:center;gap:14px;margin-top:15px;font-size:10px;color:#8b7e99}.role-demo .text-button{font-size:10px}.form-section-title{font-size:12px;font-weight:600;color:#78608b;border-top:1px solid var(--line);padding-top:18px;margin-top:23px}dialog{max-height:calc(100dvh - 36px);overflow-y:auto;overscroll-behavior:contain} :root{--muted:#777487} .page-heading p,.panel-heading p,.metric-note,.journey-card p,.panel-foot,.company-detail small,.details-panel dt,.bottom-note p,.app-footer,.field-note,.form-footer>span,.settings-side p,.module-callout p,.module-empty p,.empty-note,.next-module-note p,.table-person small,.pagination,.login-form-wrap>.muted,.login-form-wrap input::placeholder,.login-legal,.demo-card p,.picker-content>p,.company-card small,.local-footer,.login-foot,dialog>p{color:#7d758b} .nav-caption,.section-eyebrow{color:#8c829c;font-size:9px}.nav-link{font-size:13px}.nav-new{color:#897c9b}.workspace-switch strong,.profile strong{font-size:12px;color:#454054}.profile small{color:#81778f;font-size:10px} .page-heading p{font-size:12px}.page-heading h1{color:#302b40}.panel-heading h3{color:#4e425f;font-size:14px}.panel-heading p{font-size:11px}.metric-top>span:first-child{color:#83778f;font-size:9px}.metric-note{font-size:11px;line-height:1.5}.metric-value{color:#51445f}.journey-card h4{color:#635071;font-size:12px}.journey-card p{font-size:11px}.journey-link{color:#82629f;font-size:10px}.panel-foot{font-size:10px}.company-detail strong{color:#625070;font-size:13px}.company-detail small,.details-panel dl>div{font-size:11px}.details-panel dd{color:#71577f}.bottom-note strong{font-size:11px;color:#766084}.bottom-note p{font-size:10px}.app-footer{font-size:9px}.connected-tag,.bottom-note .connected-tag{color:#42846c;font-size:9px}.welcome-banner h2{color:#514078}.welcome-banner p{color:#807093;font-size:11px}.welcome-banner .eyebrow{color:#7c699a;font-size:9px}.soft-tag{font-size:9px;color:#8c7a9f}.date-label{color:#82738f} .login-form-wrap label,.login-form-wrap input,.login-submit{font-size:12px}.login-form-wrap>.muted{font-size:13px}.login-form-wrap>h2{color:#493c5b}.login-legal{font-size:10px}.demo-card strong{font-size:11px;color:#79618d}.demo-card p{font-size:10px}.demo-card .text-button{font-size:10px;color:#826299}.label-row .text-button,.password-wrap .text-button{font-size:11px;color:#8b72a0}.login-story p{color:#8d789f;font-size:13px}.login-story .eyebrow{color:#8f77a4}.login-story h1{color:#5c4771}.company-card strong{color:#715583;font-size:14px}.company-card small{font-size:11px}.picker-content>p{font-size:13px}.local-footer{font-size:10px}.picker-signout{color:#826098;font-size:12px}.company-card>.icon{color:#9477aa}.module-callout strong{font-size:12px;color:#7a5b91}.module-callout p,.module-empty p{font-size:12px}.module-empty h2{color:#725785}.empty-note{font-size:10px}.settings-side p{font-size:12px}label{font-size:12px}.settings-side h3{color:#6b4e7f}.table-person strong{font-size:12px;color:#6c507e}.table-person small,th,.pagination{font-size:10px}td{font-size:12px}.self-membership p{font-size:13px;line-height:1.8}.role-tag{color:#7d5ca1;background:#f0eafb}.active-text,.details-panel dd.active-text{color:#3d8c72} /* Dedicated master-data workspace */ .master-data-page{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start} @media(max-width:900px){.master-data-page{grid-template-columns:1fr}} /* Internal keys are generated from the field name and are not user-facing. */ #product-field-key,#edit-product-field-key,label[for="product-field-key"],label[for="edit-product-field-key"]{display:none} dialog:has(#record-form[data-kind="products"]){max-width:680px} #record-form textarea{display:block;width:100%;min-height:78px;padding:12px 13px;border:1px solid #ddd8ea;border-radius:8px;resize:vertical;font-size:12px;color:var(--ink);background:#fff} #record-form textarea:focus{outline:2px solid #d9d1ff;border-color:var(--purple)} #expense-form textarea{display:block;width:100%;min-height:96px;padding:12px 13px;border:1px solid #ddd8ea;border-radius:8px;resize:vertical;font:inherit;font-size:12px;line-height:1.5;color:var(--ink);background:#fff} #expense-form textarea:focus{outline:2px solid #d9d1ff;border-color:var(--purple)} #expense-form label{margin-top:20px} #expense-form label:first-of-type{margin-top:0} .detail-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0;padding:14px;border:1px solid #eeeaf5;border-radius:10px;background:#fcfbfe}.detail-summary span{font-size:9px;color:#8d849c;letter-spacing:.05em}.detail-summary strong{display:block;margin-top:5px;color:#4f435f;font-size:13px;letter-spacing:0}.activity-panel{border-top:1px solid var(--line);padding-top:16px;margin-top:8px}.activity-heading{display:flex;justify-content:space-between;align-items:center;color:#4f435f;margin-bottom:10px}.activity-heading span{font-size:10px;color:#9c94aa}.activity-list{list-style:none;padding:0;margin:0;max-height:250px;overflow:auto}.activity-row{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid #f0edf5}.activity-row:last-child{border-bottom:0}.activity-dot{width:8px;height:8px;margin-top:5px;border-radius:50%;background:var(--purple);flex:0 0 auto}.activity-row strong{display:block;font-size:11px;color:#4f435f;text-transform:capitalize}.activity-row small,.activity-row em{display:block;font-size:10px;color:#8d849c;font-style:normal;margin-top:3px}.activity-empty{padding:14px 0;font-size:11px} .clickable-row{cursor:pointer;transition:background .15s ease}.clickable-row:hover{background:#faf8ff}.clickable-row:focus{outline:2px solid #c8baff;outline-offset:-2px;background:#faf8ff} .panel-form textarea{display:block;width:100%;min-height:82px;padding:12px 13px;border:1px solid #ddd8ea;border-radius:8px;resize:vertical;font:inherit;color:var(--ink);background:#fff}.panel-form textarea:focus{outline:2px solid #d9d1ff;border-color:var(--purple)} .select-search{display:block;width:100%;min-height:34px;margin:0 0 6px;padding:8px 11px;border:1px solid #e5e0ef;border-radius:7px;background:#faf9fd;color:var(--ink);font-size:11px}.select-search:focus{outline:2px solid #d9d1ff;border-color:var(--purple)} .searchable-select{position:relative;width:100%}.searchable-select-trigger{display:flex;width:100%;align-items:center;justify-content:space-between;min-height:45px;padding:11px 13px;border:1px solid #ddd8ea;border-radius:8px;background:#fff;color:#665a77;font-size:12px;text-align:left}.searchable-select-trigger:after{content:'⌄';font-size:18px;color:#81708f}.searchable-select-panel{position:absolute;z-index:20;top:calc(100% + 6px);left:0;right:0;overflow:hidden;border:1px solid #e4deef;border-radius:10px;background:#fff;box-shadow:0 12px 30px #49376a1c}.searchable-select-panel[hidden]{display:none}.searchable-select-panel .select-search{margin:0 0 8px;border-radius:7px}.searchable-select-options{max-height:190px;overflow:auto;border-top:1px solid #eee9f4}.searchable-option{display:block;width:100%;padding:11px 14px;background:#fff;color:#25243a;text-align:left;font-size:12px}.searchable-option:hover,.searchable-option.selected{background:#f4f0ff;color:var(--purple)}.searchable-select-add{display:block;width:100%;padding:13px 14px;border-top:1px solid #eee9f4;background:#fff;color:#15966d;text-align:left;font-size:12px;font-weight:600} .quotation-item-row{display:grid;grid-template-columns:1.1fr 2fr .7fr .9fr 34px;gap:8px;align-items:center;margin-bottom:8px}.quotation-item-row input,.quotation-item-row select{min-width:0}.quotation-items-heading{display:flex;justify-content:space-between;align-items:center;margin:20px 0 9px;color:#5b516b}.quotation-items-heading span{font-size:10px;color:#9c94aa}.quotation-totals-input{margin-top:14px}.quotation-preview-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px}.quotation-preview-head h2{margin-top:5px}.quotation-paper{background:#fff;color:#202033;padding:32px;max-width:820px;margin:auto;border:1px solid #ebe8f3;border-radius:8px;box-shadow:0 10px 35px #45356b12}.quotation-paper-header{display:grid;grid-template-columns:64px 1fr auto;gap:16px;border-bottom:2px solid var(--purple);padding-bottom:18px}.quotation-logo{width:58px;height:58px}.quotation-paper-header h2{font-size:18px;margin:0 0 6px}.quotation-paper-header p{font-size:10px;color:#777487;margin:3px 0}.quotation-meta{text-align:right}.quotation-meta strong{display:block;color:var(--purple);font-size:17px;letter-spacing:1px;margin-bottom:10px}.quotation-meta span{display:block;font-size:10px;margin:4px 0}.quotation-recipient{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:20px 0}.quotation-recipient small{display:block;color:#8b8396;font-size:9px;letter-spacing:1px;margin-bottom:6px}.quotation-recipient strong{font-size:12px}.quotation-paper-table{width:100%;border-collapse:collapse;font-size:10px}.quotation-paper-table th{background:#f0edff;color:#5145bc;text-align:left}.quotation-paper-table th,.quotation-paper-table td{border:1px solid #ddd9e8;padding:8px}.quotation-paper-table th:nth-child(n+3),.quotation-paper-table td:nth-child(n+3){text-align:right}.quotation-paper-table tfoot td{border:0;padding:5px 8px;text-align:right}.quotation-paper-table .grand-total td{border-top:2px solid var(--purple);font-size:12px;font-weight:700}.quotation-note{font-size:10px;line-height:1.5;color:#6f687b;margin:18px 0 0}.quotation-note strong{color:var(--ink)} @media(max-width:760px){.quotation-item-row{grid-template-columns:1fr 1fr 34px}.quotation-item-row select{grid-column:1/-1}.quotation-preview-head{align-items:flex-start;flex-direction:column}.quotation-paper{padding:18px}.quotation-paper-header{grid-template-columns:45px 1fr}.quotation-meta{grid-column:1/-1;text-align:left}.quotation-paper-table{font-size:8px}.quotation-paper-table th,.quotation-paper-table td{padding:5px}} /* Quotation preview: keep the customer-facing document inside the dialog at every width. */ dialog:has(#quotation-preview){max-width:1040px;width:calc(100% - 32px);padding:30px;overflow-x:hidden} #quotation-preview{min-width:0;width:100%} #quotation-preview .quotation-paper{width:100%;max-width:none;overflow:hidden} #quotation-preview .quotation-paper-header{grid-template-columns:58px minmax(0,1fr) minmax(132px,auto);align-items:start} #quotation-preview .quotation-paper-header>div:nth-child(2){min-width:0} #quotation-preview .quotation-paper-header h2,#quotation-preview .quotation-paper-header p{overflow-wrap:anywhere;word-break:break-word} #quotation-preview .quotation-meta{min-width:132px} #quotation-preview .quotation-paper-table{table-layout:fixed} #quotation-preview .quotation-paper-table th:first-child,#quotation-preview .quotation-paper-table td:first-child{width:8%} #quotation-preview .quotation-paper-table th:nth-child(2),#quotation-preview .quotation-paper-table td:nth-child(2){width:42%;white-space:normal;overflow-wrap:anywhere;word-break:break-word} #quotation-preview .quotation-paper-table th:nth-child(3),#quotation-preview .quotation-paper-table td:nth-child(3){width:12%} #quotation-preview .quotation-paper-table th:nth-child(4),#quotation-preview .quotation-paper-table td:nth-child(4),#quotation-preview .quotation-paper-table th:nth-child(5),#quotation-preview .quotation-paper-table td:nth-child(5){width:19%} #quotation-preview .quotation-paper-table tfoot td{white-space:nowrap} @media(max-width:760px){dialog:has(#quotation-preview){width:calc(100% - 20px);padding:22px 16px}.quotation-preview-head{gap:12px}.quotation-preview-head>div:last-child,.quotation-preview-head .button{width:100%}#quotation-preview .quotation-paper{padding:16px;border-radius:7px}#quotation-preview .quotation-paper-header{grid-template-columns:46px minmax(0,1fr);gap:10px;padding-bottom:14px}#quotation-preview .quotation-logo{width:46px;height:46px}#quotation-preview .quotation-paper-header h2{font-size:16px}#quotation-preview .quotation-paper-header p{font-size:9px}#quotation-preview .quotation-meta{grid-column:1/-1;min-width:0;text-align:left;display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:baseline;margin-top:8px}#quotation-preview .quotation-meta strong{grid-column:1/-1;font-size:15px;margin-bottom:4px}#quotation-preview .quotation-meta span{font-size:9px}#quotation-preview .quotation-recipient{gap:12px;padding:14px 0}#quotation-preview .quotation-recipient strong{font-size:10px;overflow-wrap:anywhere}#quotation-preview .quotation-paper-table{font-size:8px}#quotation-preview .quotation-paper-table th,#quotation-preview .quotation-paper-table td{padding:5px 4px}#quotation-preview .quotation-paper-table tfoot td{padding:4px;white-space:nowrap}#quotation-preview .quotation-paper-table .grand-total td{font-size:10px}#quotation-preview .quotation-note{font-size:9px;margin-top:14px}} @media print{ @page{size:A4 portrait;margin:10mm} html,body{background:#fff!important} body.printing-quotation{margin:0!important;background:#fff!important;color:#202033!important} body.printing-quotation > :not(#modal){display:none!important} html:has(body.printing-quotation), body.printing-quotation{height:auto!important;min-height:0!important;overflow:visible!important} body.printing-quotation #modal::backdrop{display:none!important} body.printing-quotation #modal, body.printing-quotation #modal *{visibility:visible!important} body.printing-quotation #modal{display:block!important;position:static!important;width:auto!important;max-width:none!important;max-height:none!important;overflow:visible!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important} body.printing-quotation #modal .modal-close, body.printing-quotation .quotation-preview-head{display:none!important} body.printing-quotation #quotation-preview{display:block!important;width:100%!important;margin:0!important} body.printing-quotation #quotation-preview .quotation-paper{ width:100%!important; max-width:none!important; margin:0!important; padding:12mm!important; border:0.35mm solid #d9d4e7!important; border-radius:0!important; box-shadow:none!important; background:#fff!important; box-decoration-break:clone; -webkit-box-decoration-break:clone; } body.printing-quotation #quotation-preview .quotation-paper-header{break-inside:avoid;page-break-inside:avoid} body.printing-quotation #quotation-preview .quotation-recipient{break-inside:avoid;page-break-inside:avoid} body.printing-quotation #quotation-preview .quotation-paper-table{font-size:9.5pt;table-layout:fixed} body.printing-quotation #quotation-preview .quotation-paper-table thead{display:table-header-group} /* Totals follow the items table as a separate block, so they appear only once. */ body.printing-quotation #quotation-preview .quotation-paper-table tr{break-inside:avoid;page-break-inside:avoid} body.printing-quotation #quotation-preview .quotation-paper-table th, body.printing-quotation #quotation-preview .quotation-paper-table td{padding:3.5mm 2.5mm} body.printing-quotation #quotation-preview .quotation-paper-table th:first-child, body.printing-quotation #quotation-preview .quotation-paper-table td:first-child{width:9%} body.printing-quotation #quotation-preview .quotation-paper-table th:nth-child(2), body.printing-quotation #quotation-preview .quotation-paper-table td:nth-child(2){width:43%;white-space:normal;overflow-wrap:anywhere;word-break:break-word} body.printing-quotation #quotation-preview .quotation-paper-table th:nth-child(3), body.printing-quotation #quotation-preview .quotation-paper-table td:nth-child(3){width:12%} body.printing-quotation #quotation-preview .quotation-paper-table th:nth-child(4), body.printing-quotation #quotation-preview .quotation-paper-table td:nth-child(4), body.printing-quotation #quotation-preview .quotation-paper-table th:nth-child(5), body.printing-quotation #quotation-preview .quotation-paper-table td:nth-child(5){width:18%} body.printing-quotation #quotation-preview .quotation-totals{break-inside:avoid;page-break-inside:avoid} body.printing-quotation #quotation-preview .quotation-note{overflow-wrap:anywhere} } /* Quotation form: make every decision explicit and easy to scan. */ dialog:has(#quotation-form){max-width:760px;width:calc(100% - 28px);padding:34px;} #quotation-form{display:flex;flex-direction:column;gap:0} .quotation-form-section{padding:18px 0 20px;border-top:1px solid var(--line)} .quotation-form-section:first-child{border-top:0;padding-top:0} .quotation-section-title{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px;color:#4f435f} .quotation-section-title strong{font-size:14px} .quotation-section-title span{font-size:10px;color:#9c94aa} .quotation-form-section>.field-note{display:block;margin:-3px 0 15px;font-size:10px} .quotation-item-row{grid-template-columns:1.25fr 2fr .8fr 1fr 34px;gap:10px;align-items:end;margin:0;padding:14px 12px;border:1px solid #eeeaf5;border-radius:10px;background:#fcfbfe} .quotation-item-row+.quotation-item-row{margin-top:9px} .quotation-item-field{min-width:0} .quotation-item-field label{display:block;margin:0 0 6px;font-size:10px;color:#766582} .quotation-item-field input,.quotation-item-field select{width:100%;min-width:0} .quotation-remove-item{margin-bottom:4px} .quotation-totals-input{margin-top:0} .quotation-totals-input .field-note{display:block;margin-top:6px;font-size:10px} #quotation-form textarea{display:block;width:100%;min-height:72px;padding:12px 13px;border:1px solid #ddd8ea;border-radius:8px;resize:vertical;font:inherit;font-size:12px;color:var(--ink);background:#fff} #quotation-form textarea:focus{outline:2px solid #d9d1ff;border-color:var(--purple)} #quotation-form .dialog-actions{position:sticky;bottom:-34px;margin:4px -34px -34px;padding:16px 34px 34px;background:linear-gradient(to bottom,rgba(255,255,255,.82),#fff 28%);border-top:1px solid var(--line);z-index:2} @media(max-width:760px){dialog:has(#quotation-form){padding:24px 20px}.quotation-item-row{grid-template-columns:1fr 1fr 34px}.quotation-item-field:first-child,.quotation-item-field:nth-child(2){grid-column:1/-1}.quotation-remove-item{grid-column:3;grid-row:3}.quotation-section-title{display:block}.quotation-section-title span{display:block;margin-top:4px}} /* Customer details in the document stay readable without competing with the name. */ .quotation-recipient strong{display:block} /* Billing composer: give line items room and keep expanded catalog choices from covering the next field. */ dialog:has(#invoice-form){max-width:960px;width:calc(100% - 32px);padding:34px;} #invoice-form{display:flex;flex-direction:column;gap:0} #invoice-form .quotation-form-section{padding:18px 0 20px;border-top:1px solid var(--line)} #invoice-form .quotation-form-section:first-child{border-top:0;padding-top:0} #invoice-form .quotation-section-title{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px} #invoice-form .quotation-item-row{grid-template-columns:minmax(190px,1.25fr) minmax(180px,2fr) minmax(82px,.7fr) minmax(100px,.9fr) 34px;gap:10px;align-items:end;margin:0;padding:14px 12px;border:1px solid #eeeaf5;border-radius:10px;background:#fcfbfe} #invoice-form .quotation-item-field{min-width:0} #invoice-form .quotation-item-field label{display:block;margin:0 0 6px;font-size:10px;color:#766582;white-space:nowrap} #invoice-form .quotation-item-field input{width:100%;min-width:0} #invoice-form .quotation-item-field .searchable-select-trigger{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #invoice-form .quotation-remove-item{margin-bottom:4px} #invoice-form textarea{display:block;width:100%;min-height:82px;padding:12px 13px;border:1px solid #ddd8ea;border-radius:8px;resize:vertical;font:inherit;font-size:12px;line-height:1.5;color:var(--ink);background:#fff} #invoice-form textarea:focus{outline:2px solid #d9d1ff;border-color:var(--purple)} #invoice-form .searchable-select-expanded .searchable-select-options{max-height:150px} #invoice-form .dialog-actions{position:sticky;bottom:-34px;margin:4px -34px -34px;padding:16px 34px 34px;background:linear-gradient(to bottom,rgba(255,255,255,.82),#fff 28%);border-top:1px solid var(--line);z-index:2} @media(max-width:760px){dialog:has(#invoice-form){width:calc(100% - 20px);padding:24px 20px}#invoice-form .quotation-item-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 34px}#invoice-form .quotation-item-field:first-child,#invoice-form .quotation-item-field:nth-child(2){grid-column:1/-1}#invoice-form .quotation-remove-item{grid-column:3;grid-row:3}#invoice-form .quotation-section-title{display:block}#invoice-form .quotation-section-title span{display:block;margin-top:4px}#invoice-form .dialog-actions{bottom:-24px;margin:4px -20px -24px;padding:14px 20px 24px}} .quotation-recipient span{display:block;color:#777487;font-size:10px;line-height:1.45;margin-top:3px;overflow-wrap:anywhere} .quotation-note{overflow-wrap:anywhere} .searchable-select-trigger:focus-visible{outline:2px solid #c8baff;outline-offset:2px} .searchable-option{cursor:pointer} .searchable-option.active{background:#eee9ff;color:var(--purple);outline:2px solid #c8baff;outline-offset:-2px} .searchable-option[aria-disabled="true"]{color:#a69ab1;cursor:not-allowed} .searchable-select-empty{padding:12px 14px;color:#8d849c;font-size:11px} :root[data-theme="herfy"] .searchable-option.active{background:#d1fae5;color:#047857;outline-color:#6ee7b7} /* Filters use one horizontal, collapsible toolbar across register pages. */ .filter-disclosure{padding:0 22px 14px} .filter-toggle{display:inline-flex;align-items:center;gap:8px;white-space:nowrap} .filter-active-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--purple-soft);color:var(--purple);font-size:10px} .filter-disclosure-content{margin-top:10px;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:9px} .filter-disclosure-content[hidden]{display:none} .table-toolbar-form{display:block;min-width:0} .table-filter-toolbar{display:flex;align-items:center;gap:10px;min-height:42px;min-width:0} .table-filter-search{flex:1 1 300px;min-width:120px;min-height:40px} .table-filter-toolbar .filter-toggle{flex:0 0 auto;min-height:40px} .table-filter-toolbar .filter-result-count{flex:0 0 auto;margin-left:auto;color:var(--muted);font-size:11px;white-space:nowrap} .table-filter-advanced{margin-top:10px} .table-filter-controls{display:flex;align-items:flex-end;gap:9px;min-width:0;overflow-x:auto;padding:0 0 3px;scrollbar-width:thin} .table-filter-controls>select,.table-filter-controls>input,.table-filter-controls>.date-filter{flex:0 0 160px;min-width:135px} .table-filter-controls .date-filter{display:flex;flex-direction:column;gap:4px;margin:0;color:var(--muted);font-size:10px;font-weight:600} .table-filter-controls .date-filter input{width:100%;min-width:0} .table-filter-controls>button{flex:0 0 auto;white-space:nowrap} .ledger-panel .table-scroll{margin-top:4px} .ledger-panel table td:last-child{font-variant-numeric:tabular-nums} .payment-heading{align-items:center} .payment-filters select{flex-basis:150px} .payment-method-row{display:grid;grid-template-columns:1fr 1fr 1.5fr 34px;gap:10px;align-items:center;margin:8px 0} .payment-method-row input,.payment-method-row select{width:100%;min-width:0} .payment-invoice-summary{padding:12px 14px;margin:8px 0 18px;border:1px solid #eeeaf5;border-radius:8px;background:#fcfbfe;font-size:12px} .payment-total{display:flex;justify-content:space-between;align-items:center;padding:14px 0;margin-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)} .payment-total strong{font-size:18px;color:var(--ink)} @media(max-width:700px){.payment-method-row{grid-template-columns:1fr 1fr 34px}.payment-method-row input:last-of-type{grid-column:1/-1}} /* Tenant theme tokens: the company API is the source of truth, so every member sees the same palette when this workspace is opened. */ :root[data-theme="herfy"]{--ink:#0f172a;--muted:#64748b;--line:#e2e8f0;--purple:#059669;--purple-dark:#047857;--purple-soft:#d1fae5;--surface:#f0fdf4;--green:#059669;color-scheme:light} :root[data-theme="herfy"] .company-avatar{background:#d1fae5;color:#047857} :root[data-theme="herfy"] .role-tag{background:#d1fae5;color:#047857} :root[data-theme="herfy"] .quotation-paper-table th{background:#d1fae5;color:#047857} :root[data-theme="herfy"] .searchable-select-options .searchable-option:hover, :root[data-theme="herfy"] .searchable-select-options .searchable-option.selected{background:#ecfdf5;color:#047857} :root[data-theme="dails"]{--ink:#302a24;--muted:#756b60;--line:#e6dccd;--purple:#a85232;--purple-dark:#873f29;--purple-soft:#f2e3d5;--surface:#f4efe6;--green:#60764c;--card:#fffdf8;--card-raised:#f8f1e7;--control:#fffefa;--control-text:#302a24;--hover:#f5e9dc;--action-primary:#a85232;--action-primary-hover:#873f29;--action-primary-shadow:rgba(115,57,34,.18);--radius-card:14px;--shadow-card:0 3px 14px rgba(76,54,32,.07);color-scheme:light} :root[data-theme="dails"] body,:root[data-theme="dails"] .workspace,:root[data-theme="dails"] .main-column,:root[data-theme="dails"] .content{background:var(--surface);color:var(--ink)} :root[data-theme="dails"] .sidebar,:root[data-theme="dails"] .topbar,:root[data-theme="dails"] .panel,:root[data-theme="dails"] .metric-card,:root[data-theme="dails"] dialog,:root[data-theme="dails"] .details-panel,:root[data-theme="dails"] .theme-choice,:root[data-theme="dails"] .searchable-select-panel,:root[data-theme="dails"] .searchable-select-options,:root[data-theme="dails"] .filter-disclosure-content{background:var(--card);border-color:var(--line);color:var(--ink)} :root[data-theme="dails"] .workspace-switch,:root[data-theme="dails"] .search-button,:root[data-theme="dails"] .journey-card,:root[data-theme="dails"] .bottom-note,:root[data-theme="dails"] .panel-foot,:root[data-theme="dails"] .filter-active-count,:root[data-theme="dails"] .count-tag,:root[data-theme="dails"] .role-tag,:root[data-theme="dails"] .soft-tag,:root[data-theme="dails"] .pill{background:var(--card-raised);border-color:var(--line);color:var(--muted)} :root[data-theme="dails"] .company-avatar,:root[data-theme="dails"] .profile .avatar{background:#f0e2d1;color:#8b492f} :root[data-theme="dails"] .role-tag{background:#f2e3d5;color:#873f29} :root[data-theme="dails"] .quotation-paper-table th,:root[data-theme="dails"] .table-scroll th,:root[data-theme="dails"] .dashboard-activity th{background:#f3e8d9;color:#684b38} :root[data-theme="dails"] .quotation-paper-table td,:root[data-theme="dails"] .table-scroll td{border-color:var(--line)} :root[data-theme="dails"] .searchable-select-options .searchable-option:hover, :root[data-theme="dails"] .searchable-select-options .searchable-option.selected{background:#f7ecdf;color:#873f29} :root[data-theme="dails"] .sidebar .nav-link:hover{background:#f7ecdf;color:#873f29} :root[data-theme="dails"] .sidebar .nav-link.active{background:#f2e3d5;color:#873f29} :root[data-theme="dails"] .master-data-info{background:#f4f1e6;border-color:#e7dec9;color:#5f604d} :root[data-theme="dails"] .master-data-info-icon{background:#e9ead9;color:#60764c} :root[data-theme="dails"] .master-data-toggle input:checked+span{background:#60764c} .settings-secondary-column{display:grid;align-content:start;gap:18px;min-width:0} .theme-settings{margin:0} .theme-form{padding:0 22px 20px} .theme-form fieldset{display:grid;gap:10px;margin:0;padding:0;border:0} .theme-choice{display:flex;align-items:center;gap:11px;min-height:70px;padding:12px 13px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;transition:border-color .16s,background .16s,box-shadow .16s} .theme-choice:has(input:checked){border-color:var(--purple);background:color-mix(in srgb,var(--purple-soft) 40%,white);box-shadow:0 0 0 2px color-mix(in srgb,var(--purple) 12%,transparent)} .theme-choice>input{width:16px;height:16px;min-height:16px;margin:0;accent-color:var(--purple);flex:0 0 auto} .theme-swatch{width:38px;height:38px;border-radius:11px;flex:0 0 auto;background:#6558dc;box-shadow:inset 0 0 0 1px #0000000b} .default-swatch{background:linear-gradient(135deg,#6558dc 0 50%,#f0edff 50%)} .herfy-swatch{background:linear-gradient(135deg,#059669 0 50%,#d1fae5 50%)} .dails-swatch{background:linear-gradient(135deg,#a85232 0 50%,#f0e2d1 50%)} .theme-choice-copy{display:block;min-width:0;flex:1} .theme-choice strong,.theme-choice small{display:block} .theme-choice strong{color:var(--ink);font-size:12px;font-weight:600} .theme-choice small{margin-top:4px;color:var(--muted);font-size:10px;line-height:1.5} .theme-check{display:grid;place-items:center;width:21px;height:21px;border:1px solid var(--line);border-radius:50%;color:transparent;font-size:12px;flex:0 0 auto} .theme-choice:has(input:checked) .theme-check{border-color:var(--purple);background:var(--purple);color:#fff} .theme-status{min-height:32px;margin:13px 0 0;color:var(--muted);font-size:10px;line-height:1.5} .theme-actions{display:flex;justify-content:flex-end;padding-top:12px;border-top:1px solid var(--line)} .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} @media(max-width:760px){.theme-form{padding:0 17px 19px}.settings-secondary-column{gap:14px}} @media print{html,body{-webkit-print-color-adjust:exact;print-color-adjust:exact}} /* Tenant-scoped owner dashboard */ .dashboard-tenant{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;margin:0 0 18px;background:#fff;border:1px solid var(--line);border-radius:10px}.dashboard-tenant>div{display:flex;align-items:center;gap:11px}.dashboard-tenant strong,.dashboard-tenant small{display:block}.dashboard-tenant strong{font-size:12px;color:var(--ink)}.dashboard-tenant small{font-size:10px;color:var(--muted);margin-top:4px}.dashboard-metric{display:block;color:inherit;text-decoration:none;transition:transform .15s,box-shadow .15s}.dashboard-metric:hover{transform:translateY(-2px);box-shadow:0 8px 22px #31224a10}.dashboard-columns{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(220px,.8fr);gap:18px;margin-top:18px}.dashboard-shortcuts>a{display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--line);color:var(--muted);text-decoration:none;font-size:11px}.dashboard-shortcuts>a:hover{background:#faf8fd;color:var(--ink)}.dashboard-shortcuts>a>.icon:first-child{width:16px;height:16px;color:#8c78ac}.dashboard-shortcuts>a>.icon:last-child{width:14px;height:14px;margin-left:auto}.dashboard-columns .panel{min-width:0}@media(max-width:900px){.dashboard-columns{grid-template-columns:1fr}}@media(max-width:600px){.dashboard-tenant{align-items:flex-start}.dashboard-tenant>.button{white-space:nowrap}.dashboard-tenant small{max-width:160px}} /* The filter controls remain a single horizontal, scrollable row on narrow screens. */ @media(max-width:760px){.filter-disclosure{padding:0 17px 14px}.filter-disclosure-content{margin-top:8px;padding:10px}} /* Organization-wide dark palette. Branding stays tenant-scoped via company.theme. */ :root[data-theme="dark"]{--ink:#eef0f6;--muted:#a4a9b8;--line:#343846;--purple:#9b8cff;--purple-dark:#ad9fff;--purple-soft:#29263d;--surface:#11131a;--green:#4fc3a1;--card:#191c25;--card-raised:#20232e;--control:#20232e;--control-text:#e8eaf2;--hover:#252837;color-scheme:dark;background:var(--surface);color:var(--ink)} :root[data-theme="dark"] body,:root[data-theme="dark"] .workspace,:root[data-theme="dark"] .main-column,:root[data-theme="dark"] .content{background:var(--surface);color:var(--ink)} :root[data-theme="dark"] .sidebar,:root[data-theme="dark"] .topbar,:root[data-theme="dark"] .panel,:root[data-theme="dark"] .metric-card,:root[data-theme="dark"] .dashboard-tenant,:root[data-theme="dark"] .details-panel,:root[data-theme="dark"] .theme-choice,:root[data-theme="dark"] .searchable-select-panel,:root[data-theme="dark"] .searchable-select-options,:root[data-theme="dark"] .filter-disclosure-content{background:var(--card);border-color:var(--line);color:var(--ink)} :root[data-theme="dark"] .workspace-switch,:root[data-theme="dark"] .search-button,:root[data-theme="dark"] .journey-card,:root[data-theme="dark"] .bottom-note,:root[data-theme="dark"] .panel-foot,:root[data-theme="dark"] .filter-active-count,:root[data-theme="dark"] .count-tag,:root[data-theme="dark"] .role-tag,:root[data-theme="dark"] .role-tag.subtle,:root[data-theme="dark"] .soft-tag,:root[data-theme="dark"] .pill,:root[data-theme="dark"] .module-callout{background:var(--card-raised);border-color:var(--line);color:var(--muted)} :root[data-theme="dark"] h1,:root[data-theme="dark"] h2,:root[data-theme="dark"] h3,:root[data-theme="dark"] h4,:root[data-theme="dark"] strong,:root[data-theme="dark"] .page-heading h1,:root[data-theme="dark"] .panel-heading h3,:root[data-theme="dark"] .metric-value,:root[data-theme="dark"] .theme-choice strong,:root[data-theme="dark"] .workspace-switch strong,:root[data-theme="dark"] .profile strong,:root[data-theme="dark"] .table-person strong,:root[data-theme="dark"] .company-detail strong{color:var(--ink)} :root[data-theme="dark"] p,:root[data-theme="dark"] small,:root[data-theme="dark"] label,:root[data-theme="dark"] .muted,:root[data-theme="dark"] .page-heading p,:root[data-theme="dark"] .panel-heading p,:root[data-theme="dark"] .metric-note,:root[data-theme="dark"] .field-note,:root[data-theme="dark"] .theme-choice small,:root[data-theme="dark"] .pagination,:root[data-theme="dark"] .app-footer,:root[data-theme="dark"] .nav-caption,:root[data-theme="dark"] .breadcrumb,:root[data-theme="dark"] .breadcrumb strong{color:var(--muted)} :root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea,:root[data-theme="dark"] .select-search,:root[data-theme="dark"] .searchable-select-trigger{background:var(--control);border-color:var(--line);color:var(--control-text)} :root[data-theme="dark"] input::placeholder,:root[data-theme="dark"] textarea::placeholder{color:#818798} :root[data-theme="dark"] input:disabled,:root[data-theme="dark"] input[readonly],:root[data-theme="dark"] select:disabled{background:#191c24;color:#8f95a5} :root[data-theme="dark"] .secondary,:root[data-theme="dark"] .button.secondary,:root[data-theme="dark"] .searchable-option,:root[data-theme="dark"] .search-result{background:var(--card-raised);border-color:var(--line);color:var(--control-text)} :root[data-theme="dark"] .nav-link{color:#a5a9b8}:root[data-theme="dark"] .nav-link:hover,:root[data-theme="dark"] .nav-link.active,:root[data-theme="dark"] .dashboard-shortcuts>a:hover,:root[data-theme="dark"] .journey-card:hover{background:var(--hover);color:var(--purple)} :root[data-theme="dark"] .nav-link.active{font-weight:650}:root[data-theme="dark"] .table-scroll th{background:#20232e;color:#b8bdcb;border-color:var(--line)}:root[data-theme="dark"] .table-scroll td{color:#c2c6d2;border-color:var(--line)}:root[data-theme="dark"] table{color:var(--ink)} :root[data-theme="dark"] .master-data-row,:root[data-theme="dark"] .dashboard-shortcuts>a,:root[data-theme="dark"] .activity-list>*{border-color:var(--line)} :root[data-theme="dark"] dialog{background:var(--card);border-color:var(--line);color:var(--ink);box-shadow:0 24px 100px #0009}:root[data-theme="dark"] dialog::backdrop{background:#07080dc9}:root[data-theme="dark"] dialog h2{color:var(--ink)}:root[data-theme="dark"] dialog>p{color:var(--muted)} :root[data-theme="dark"] .searchable-option:hover,:root[data-theme="dark"] .searchable-option.selected,:root[data-theme="dark"] .searchable-option.active{background:#302b49;color:#c6bcff}:root[data-theme="dark"] .searchable-select-add{background:#1d2828;color:#69d1b2;border-color:var(--line)} :root[data-theme="dark"] .theme-choice:has(input:checked){background:#29263d}:root[data-theme="dark"] .theme-check{border-color:#4b5060}:root[data-theme="dark"] .dark-swatch{background:linear-gradient(135deg,#11131a 0 50%,#9b8cff 50%)} :root[data-theme="dark"] .quotation-paper,:root[data-theme="dark"] .quotation-preview-head{background:#191c25;color:#eef0f6}:root[data-theme="dark"] .quotation-paper-table th{background:#29263d;color:#d0c9ff}:root[data-theme="dark"] .quotation-paper-table td{color:#d2d5df;border-color:#343846} :root[data-theme="dark"] .error-banner{background:#351f29;border-color:#643543;color:#f1a9b9}:root[data-theme="dark"] .danger{background:#351f29;border-color:#643543;color:#f1a9b9}:root[data-theme="dark"] .connected-tag{color:#62c7a9} :root[data-theme="dark"] .filter-toggle,:root[data-theme="dark"] .text-button{color:var(--purple)}:root[data-theme="dark"] .filter-disclosure-content{box-shadow:0 8px 24px #0002} @media(max-width:760px){.table-filter-toolbar{gap:7px;flex-wrap:wrap}.table-filter-search{flex:1 1 calc(100% - 132px);min-width:0}.table-filter-toolbar .filter-toggle{min-height:38px;padding-inline:10px}.table-filter-toolbar .filter-result-count{flex-basis:100%;margin:0;text-align:right}.table-filter-controls{align-items:stretch}.table-filter-controls>select,.table-filter-controls>input,.table-filter-controls>.date-filter{flex-basis:145px}} :root[data-theme="dark"] .theme-settings .panel-heading,:root[data-theme="dark"] .settings-side,:root[data-theme="dark"] .platform-box{background:var(--card)} :root[data-theme="dark"] .logo-editor{background:#20232e;border-color:var(--line)}:root[data-theme="dark"] .logo-controls input[type="file"]{background:#191c25;color:var(--control-text)}:root[data-theme="dark"] .company-avatar{background:#29263d;color:#c6bcff} .network-status{position:fixed;z-index:120;top:max(12px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(620px,calc(100% - 28px));padding:12px 16px;border:1px solid #e7d49a;border-radius:10px;background:#fff8dc;color:#684f16;box-shadow:0 8px 28px #17121c20;text-align:center;font-size:12px;line-height:1.5}.network-status[hidden]{display:none}:root[data-theme="dark"] .network-status{background:#382f19;border-color:#67552b;color:#f2d98a} .dark-swatch{background:linear-gradient(135deg,#11131a 0 50%,#9b8cff 50%)} /* Table pagination controls stay compact on desktop and wrap cleanly on mobile. */ .pagination{flex-wrap:wrap} .pagination-controls{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap} .pagination-size{display:flex;align-items:center;gap:8px;margin:0;color:var(--muted,#8f8298);font-size:9px;font-weight:500;white-space:nowrap} .pagination-size select{width:auto;min-width:70px;min-height:34px;padding:6px 25px 6px 9px;border-radius:7px;font-size:10px} .pagination-page{white-space:nowrap;padding:0 2px} @media(max-width:760px){.pagination{align-items:flex-start}.pagination-controls{justify-content:flex-start;width:100%;gap:6px}.pagination-size{margin-right:auto}.pagination-controls .small-button{padding:7px 9px}.pagination-page{font-size:8px}} /* Searchable menus float over form fields so opening one never changes the form grid. */ .searchable-select-open{z-index:35} .searchable-select-panel{z-index:36;max-width:min(100%,420px);padding:10px 12px} .searchable-select-open-up .searchable-select-panel{top:auto;bottom:calc(100% + 6px)} #invoice-form .searchable-select-expanded .searchable-select-panel{position:absolute;left:0;right:0;margin-top:0;box-shadow:0 12px 30px #49376a1c} /* Consistent form controls and predictable layouts across dialogs and settings. */ textarea{display:block;width:100%;min-height:88px;padding:11px 12px;border:1px solid #e4e0ed;border-radius:7px;background:#fff;color:var(--ink);font:inherit;font-size:12px;line-height:1.55;resize:vertical} textarea::placeholder{color:#b9afc3} textarea:focus{outline:2px solid #c8baf4;outline-offset:1px;border-color:#b7a8e5} .form-two-column{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start} .form-two-column>div{min-width:0} .form-two-column label{margin-top:0} .form-two-column input,.form-two-column select,.form-two-column textarea{width:100%;min-width:0} .dialog-actions{align-items:center;flex-wrap:wrap} .dialog-actions>.button{min-width:104px} input[type="file"]{width:100%;min-height:43px;padding:7px 9px;background:#fff;border:1px solid #e4e0ed;border-radius:7px;color:var(--muted);font-size:11px} :root[data-theme="dark"] textarea,:root[data-theme="dark"] input[type="file"]{background:var(--control);border-color:var(--line);color:var(--control-text)} @media(max-width:520px){.form-two-column{grid-template-columns:minmax(0,1fr);gap:0}.dialog-actions{gap:8px}.dialog-actions>.button{flex:1;min-width:0}} /* Give data-entry dialogs enough width for multi-field forms without making them full-screen. */ dialog:has(#record-form),dialog:has(#expense-form),dialog:has(#stock-form),dialog:has(#payment-form),dialog:has(#member-form),dialog:has(#new-company-form),dialog:has(#product-field-form),dialog:has(#product-field-edit-form),dialog:has(#customer-field-form){width:min(620px,calc(100% - 32px));max-width:620px} @media(max-width:760px){dialog:has(#record-form),dialog:has(#expense-form),dialog:has(#stock-form),dialog:has(#payment-form),dialog:has(#member-form),dialog:has(#new-company-form),dialog:has(#product-field-form),dialog:has(#product-field-edit-form),dialog:has(#customer-field-form){width:calc(100% - 20px);padding:24px 20px}} /* Improve readability: reduce the overly light antialiasing and strengthen secondary copy. */ body{-webkit-font-smoothing:auto;font-weight:450} :root:not([data-theme="dark"]) .muted, :root:not([data-theme="dark"]) .field-note, :root:not([data-theme="dark"]) .page-heading p, :root:not([data-theme="dark"]) .panel-heading p, :root:not([data-theme="dark"]) .metric-note, :root:not([data-theme="dark"]) .journey-card p, :root:not([data-theme="dark"]) .panel-foot, :root:not([data-theme="dark"]) .company-detail small, :root:not([data-theme="dark"]) .details-panel dt, :root:not([data-theme="dark"]) .bottom-note p, :root:not([data-theme="dark"]) .app-footer, :root:not([data-theme="dark"]) .pagination, :root:not([data-theme="dark"]) dialog>p{color:#625d6d} :root:not([data-theme="dark"]) label{color:#514b5d;font-weight:600} :root:not([data-theme="dark"]) input::placeholder, :root:not([data-theme="dark"]) textarea::placeholder{color:#817b8b;opacity:1} :root:not([data-theme="dark"]) .nav-link, :root:not([data-theme="dark"]) .table-scroll td, :root:not([data-theme="dark"]) .details-panel dd{font-weight:500} :root:not([data-theme="dark"]) th{color:#716a7c;font-weight:600} :root[data-theme="dark"] body{-webkit-font-smoothing:auto;font-weight:450} /* SaaS dashboard layout */ :root:not([data-theme="dark"]) .nav-link.active{background:#e7f8f1;color:#07815e} :root:not([data-theme="dark"]) .nav-link.active .icon{color:#07815e} .topbar-account{display:flex;align-items:center;gap:10px;padding:4px 2px;background:transparent;text-align:left;color:var(--ink);min-width:0} .topbar-account>span:nth-child(2){display:grid;gap:3px;min-width:0} .topbar-account strong{font-size:11px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px} .topbar-account small{font-size:9px;color:var(--muted)} .topbar-company-mark{width:32px;height:32px;border-radius:9px;font-size:10px} .topbar-account .avatar{margin-left:4px} .dashboard-content{max-width:1800px;padding-top:27px} .dashboard-welcome{align-items:center;margin-bottom:19px} .dashboard-welcome h1{font-size:28px;letter-spacing:-.8px;margin-bottom:5px} .dashboard-welcome p{font-size:12px} .dashboard-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:17px} .dashboard-metric{min-height:138px;padding:17px 19px;border-radius:13px;box-shadow:0 3px 13px #202e4510} .dashboard-metric .metric-top>span:first-child{font-size:10px;font-weight:600;letter-spacing:.1px;color:#666a7b;text-transform:none} .dashboard-metric .metric-value{font-size:26px;font-weight:700;letter-spacing:-.5px;line-height:1.25;margin:12px 0 5px;color:#17203d} .dashboard-metric .metric-note{font-size:10px;color:#727b91;line-height:1.45} .dashboard-metric:hover{border-color:#dce6f2;box-shadow:0 8px 22px #263b5616;transform:translateY(-2px)} .dashboard-metric .metric-icon{width:36px;height:36px;border-radius:11px} .dashboard-metric .metric-icon.green{background:#e6f8f1;color:#0b9a73} .dashboard-metric .metric-icon.violet{background:#efedff;color:#6758db} .dashboard-metric .metric-icon.orange{background:#fff3e6;color:#e5812b} .dashboard-metric .metric-icon.rose{background:#fff0f2;color:#e05a74} .dashboard-analytics{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(280px,.92fr);gap:15px;margin-bottom:17px;align-items:stretch} .dashboard-analytics.without-stock{grid-template-columns:minmax(0,1fr)} .dashboard-chart-card,.dashboard-stock,.dashboard-activity,.dashboard-shortcuts{border-radius:13px;box-shadow:0 3px 13px #202e450a;min-width:0} .dashboard-panel-heading{display:flex;align-items:center;gap:11px;padding:17px 18px 14px;min-width:0} .dashboard-panel-heading>div{min-width:0;flex:1} .dashboard-panel-heading h2{font-size:13px;font-weight:700;letter-spacing:-.15px;color:#17203d} .dashboard-panel-heading p{margin-top:4px;font-size:10px;line-height:1.4;color:#737c91} .dashboard-panel-icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto;background:#eaf2ff;color:#2779e7} .dashboard-panel-icon .icon{width:18px;height:18px} .dashboard-panel-icon.violet{background:#f0edff;color:#7656e8} .dashboard-chart-title{flex:1} .dashboard-range-label{margin:0;flex:0 0 auto} .dashboard-range-label select{width:auto;min-width:126px;min-height:34px;padding:6px 26px 6px 10px;border-radius:8px;font-size:10px;color:#46536c} .dashboard-date-toolbar{display:flex;align-items:center;gap:14px;padding:13px 16px;margin:0 0 15px;box-shadow:0 3px 13px #202e4508} .dashboard-date-copy{display:grid;gap:3px;min-width:145px;flex:1} .dashboard-date-copy strong{font-size:11px;font-weight:700;color:var(--ink)} .dashboard-date-copy span{font-size:10px;color:var(--muted)} .dashboard-date-toolbar>label{margin:0;flex:0 0 auto} .dashboard-date-toolbar select{width:auto;min-width:158px;min-height:36px;padding:7px 28px 7px 11px;font-size:11px} .dashboard-custom-range{display:flex;align-items:end;gap:8px;flex-wrap:wrap} .dashboard-custom-range[hidden]{display:none} .dashboard-custom-range label{display:grid;gap:4px;margin:0;font-size:9px;font-weight:650;color:var(--muted)} .dashboard-custom-range input{width:132px;min-height:35px;padding:6px 8px;font-size:10px} .dashboard-custom-range .button{min-height:35px;white-space:nowrap} .dashboard-range-error{flex-basis:100%;font-size:10px;color:var(--danger,#c44b62)} .dashboard-chart-card .dashboard-custom-range{margin-left:auto} .financial-chart{display:block;width:100%;height:auto;min-height:205px;padding:3px 14px 0 8px;overflow:visible} .chart-grid-line{stroke:#e9edf4;stroke-width:1;stroke-dasharray:3 4} .chart-axis-label,.chart-month-label{fill:#68748d;font-family:inherit;font-size:10px} .chart-month-label{font-size:10px} .chart-bar{opacity:.88;transition:opacity .15s} .chart-bar:hover{opacity:1} .chart-sales{fill:#32c49a} .chart-expenses{fill:#a98af5} .chart-collection-line{fill:none;stroke:#293d91;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round} .chart-collection-point{fill:#fff;stroke:#293d91;stroke-width:2.5} .dashboard-legend{display:flex;justify-content:center;gap:20px;padding:0 16px 15px;color:#536079;font-size:10px;font-weight:550} .dashboard-legend span{display:flex;align-items:center;gap:7px} .dashboard-legend i{display:inline-block;width:9px;height:9px;border-radius:50%} .dashboard-legend .legend-sales{background:#32c49a} .dashboard-legend .legend-expenses{background:#a98af5} .dashboard-legend .legend-collections{background:#293d91} .dashboard-chart-empty,.dashboard-chart-loading{min-height:220px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;padding:25px;text-align:center;color:#626c82} .dashboard-chart-empty strong{font-size:12px;color:#38435a} .dashboard-chart-empty p,.dashboard-chart-loading span:last-child{font-size:10px;line-height:1.5;color:#737c91} .dashboard-chart-empty .module-icon{width:38px;height:38px} .dashboard-stock{overflow:hidden} .dashboard-stock .dashboard-panel-heading>a{display:inline-flex;align-items:center;gap:4px;margin-left:auto;color:#246ed0;font-size:10px;font-weight:600;white-space:nowrap} .dashboard-stock .dashboard-panel-heading>a .icon{width:14px;height:14px} .dashboard-stock ul{list-style:none;margin:0;padding:0 17px 8px} .dashboard-stock li{display:flex;align-items:center;gap:9px;min-width:0;padding:9px 0;border-top:1px solid #edf0f5} .stock-product-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:#f1f4f8;color:#7b879a;flex:0 0 auto} .stock-product-icon .icon{width:17px;height:17px} .stock-product-copy{display:grid;gap:3px;min-width:0;flex:1} .stock-product-copy strong{font-size:10px;font-weight:650;color:#2f3850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .stock-product-copy small{font-size:9px;color:#737d92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .stock-state{padding:5px 8px;border-radius:999px;background:#fff0e2;color:#b76718;font-size:8px;font-weight:650;white-space:nowrap} .stock-state.out{background:#fff0f2;color:#c74861} .dashboard-stock-empty{min-height:150px;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:18px;text-align:center} .stock-empty-check{display:grid;place-items:center;width:34px;height:34px;background:#e8f8f1;color:#168b69;border-radius:50%;margin-bottom:10px} .stock-empty-check .icon{width:18px;height:18px} .dashboard-stock-empty strong{font-size:11px;color:#34435a} .dashboard-stock-empty p{font-size:9px;color:#737d92;margin-top:5px} .dashboard-lower{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(280px,.92fr);gap:15px;align-items:start} .dashboard-lower .dashboard-panel-heading{padding-bottom:13px} .dashboard-panel-heading>.button{margin-left:auto} .dashboard-activity .table-scroll{padding:0 17px 14px} .dashboard-activity table{table-layout:auto;white-space:nowrap} .dashboard-activity th{padding:10px 9px;background:#f6f8fb;color:#536079;font-size:9px;font-weight:650;border-color:#edf0f5} .dashboard-activity td{padding:10px 9px;color:#4d5870;font-size:10px;border-color:#edf0f5} .dashboard-activity td strong{color:#303c55} .dashboard-activity .dashboard-activity-description{max-width:220px;overflow:hidden;text-overflow:ellipsis} .dashboard-type,.dashboard-status{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:8px;font-weight:650} .dashboard-type.income{background:#e7f8f1;color:#087957} .dashboard-type.expense{background:#fff0f2;color:#cb4a63} .dashboard-status{background:#e8f8f1;color:#168261;text-transform:capitalize} .dashboard-table-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:27px 12px;text-align:center} .dashboard-table-empty strong{font-size:11px;color:#34435a} .dashboard-table-empty span{font-size:10px;color:#737d92} .dashboard-shortcuts .dashboard-panel-heading{padding-bottom:15px} .dashboard-shortcut-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:0 17px 17px} .dashboard-shortcut{display:flex;align-items:center;gap:8px;min-width:0;min-height:54px;padding:9px 10px;border:1px solid #e9edf4;border-radius:10px;background:#fff;color:#293650;transition:border-color .16s,background .16s,transform .16s} .dashboard-shortcut:hover{border-color:#cfdcf0;background:#f9fbff;transform:translateY(-1px)} .dashboard-shortcut strong{min-width:0;flex:1;font-size:9px;font-weight:650;line-height:1.35} .dashboard-shortcut>.icon{width:13px;height:13px;color:#66758f} .quick-icon{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;flex:0 0 auto;background:#eaf8f2;color:#108968} .quick-icon .icon{width:16px;height:16px} .quick-icon.violet{background:#f0edff;color:#6c5bdd}.quick-icon.rose{background:#fff0f2;color:#d65770}.quick-icon.blue{background:#eaf2ff;color:#2d75d6}.quick-icon.orange{background:#fff3e6;color:#dd872f}.quick-icon.cyan{background:#e7fbfc;color:#198f9a} :root[data-theme="dark"] .dashboard-metric .metric-top>span:first-child,:root[data-theme="dark"] .dashboard-metric .metric-value,:root[data-theme="dark"] .dashboard-panel-heading h2,:root[data-theme="dark"] .stock-product-copy strong,:root[data-theme="dark"] .dashboard-shortcut strong,:root[data-theme="dark"] .dashboard-table-empty strong,:root[data-theme="dark"] .dashboard-chart-empty strong,:root[data-theme="dark"] .dashboard-stock-empty strong{color:var(--ink)} :root[data-theme="dark"] .dashboard-metric .metric-note,:root[data-theme="dark"] .dashboard-panel-heading p,:root[data-theme="dark"] .stock-product-copy small,:root[data-theme="dark"] .dashboard-stock-empty p,:root[data-theme="dark"] .dashboard-table-empty span,:root[data-theme="dark"] .dashboard-chart-empty p{color:var(--muted)} :root[data-theme="dark"] .dashboard-activity th{background:var(--card-raised);color:var(--muted);border-color:var(--line)}:root[data-theme="dark"] .dashboard-activity td,:root[data-theme="dark"] .dashboard-activity td strong{color:var(--control-text);border-color:var(--line)} :root[data-theme="dark"] .dashboard-shortcut{background:var(--card-raised);border-color:var(--line);color:var(--ink)}:root[data-theme="dark"] .dashboard-shortcut:hover{background:var(--hover)}:root[data-theme="dark"] .dashboard-stock li{border-color:var(--line)}:root[data-theme="dark"] .dashboard-chart-empty,:root[data-theme="dark"] .dashboard-chart-loading{color:var(--muted)}:root[data-theme="dark"] .chart-grid-line{stroke:var(--line)}:root[data-theme="dark"] .chart-axis-label,:root[data-theme="dark"] .chart-month-label{fill:var(--muted)}:root[data-theme="dark"] .dashboard-legend{color:var(--muted)} :root[data-theme="dark"] .dashboard-date-toolbar{background:var(--card);border-color:var(--line)}:root[data-theme="dark"] .dashboard-date-copy strong{color:var(--ink)}:root[data-theme="dark"] .dashboard-date-copy span,:root[data-theme="dark"] .dashboard-custom-range label{color:var(--muted)} @media(max-width:1180px){.dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-analytics,.dashboard-lower{grid-template-columns:minmax(0,1.3fr) minmax(255px,.9fr)}} @media(max-width:900px){.dashboard-analytics,.dashboard-lower{grid-template-columns:minmax(0,1fr)}.dashboard-stock{min-height:0}.topbar-account strong{max-width:110px}} @media(max-width:760px){.dashboard-content{padding-top:21px}.dashboard-welcome h1{font-size:24px}.dashboard-welcome p{font-size:11px}.dashboard-metrics{gap:10px}.dashboard-metric{min-height:125px;padding:14px}.dashboard-metric .metric-value{font-size:22px}.dashboard-panel-heading{padding:15px 14px 12px;gap:9px}.dashboard-panel-heading h2{font-size:12px}.dashboard-panel-heading p{font-size:9px}.dashboard-panel-icon{width:32px;height:32px}.dashboard-range-label select{min-width:106px;max-width:120px;font-size:9px}.financial-chart{min-height:170px;padding:0 7px}.chart-axis-label,.chart-month-label{font-size:9px}.dashboard-legend{gap:13px;font-size:9px}.dashboard-stock ul{padding-left:13px;padding-right:13px}.dashboard-activity .table-scroll{padding:0 10px 12px}.dashboard-activity th,.dashboard-activity td{padding:9px 8px}.dashboard-shortcut-grid{padding:0 12px 12px;gap:7px}.dashboard-shortcut{min-height:50px;padding:7px}.dashboard-shortcut strong{font-size:8px}.quick-icon{width:28px;height:28px}.topbar-account{gap:5px}.topbar-company-mark{display:none}.topbar-account strong{max-width:85px}.topbar-account small{font-size:8px}} @media(max-width:480px){.dashboard-metrics{grid-template-columns:minmax(0,1fr)}.dashboard-metric{min-height:0}.dashboard-analytics,.dashboard-lower{gap:11px}.dashboard-shortcut-grid{grid-template-columns:minmax(0,1fr)}.dashboard-welcome{align-items:flex-start}.dashboard-welcome .date-label{max-width:105px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dashboard-chart-card .dashboard-panel-heading{flex-wrap:wrap}.dashboard-range-label{margin-left:auto}.dashboard-legend{gap:9px}.dashboard-stock .dashboard-panel-heading{gap:7px}.stock-state{font-size:7px;padding:4px 6px}} @media(max-width:760px){.dashboard-date-toolbar{align-items:stretch;flex-wrap:wrap;gap:10px}.dashboard-date-copy{flex-basis:calc(100% - 175px)}.dashboard-custom-range{width:100%}.dashboard-chart-card .dashboard-custom-range{margin-left:0}} @media(max-width:480px){.dashboard-date-copy{flex:1 0 100%}.dashboard-date-toolbar>label,.dashboard-date-toolbar select{width:100%}.dashboard-custom-range{align-items:stretch}.dashboard-custom-range label,.dashboard-custom-range input{width:100%}.dashboard-custom-range .button{width:100%}.dashboard-chart-card .dashboard-panel-heading .dashboard-custom-range{flex-basis:100%}} /* Product catalog and product editor */ .products-heading{margin-bottom:24px} .products-heading .section-eyebrow{color:#188663;letter-spacing:1.5px} .products-page .catalog-summary{grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-bottom:18px} .products-page .catalog-summary .metric-card{min-height:118px;padding:17px 19px;border-radius:12px} .products-page .catalog-summary .metric-top>span:first-child{font-size:9px;font-weight:700;letter-spacing:.75px;color:#657087} .products-page .catalog-summary .metric-value{font-size:27px;line-height:1.1;margin:10px 0 6px;color:#202942;font-weight:650} .products-page .catalog-summary .metric-note{font-size:10px;color:#68748a} .products-page .panel{border-radius:12px;border-color:#e6eaf0} .products-page .panel-heading{padding:19px 21px 15px} .products-page .panel-heading h3{color:#29334b;font-size:15px;font-weight:650} .products-page .panel-heading p{color:#69758a;font-size:11px} .products-page .table-scroll{padding-bottom:3px} .products-page th{padding:12px 12px;background:#f6f8fb;color:#536079;border-color:#e8ecf2;font-size:10px;font-weight:650} .products-page td{padding:14px 12px;color:#435069;border-color:#edf0f4;font-size:11px;vertical-align:middle} .products-page tbody tr:hover{background:#f9fbfd} .products-page .table-person{gap:10px} .products-page .table-person .module-icon{width:42px;height:42px;border-radius:10px;background:#f1effb;color:#7666d5} .products-page .table-person strong{font-size:11px;color:#26324a;font-weight:650} .products-page .table-person small{font-size:9px;color:#6b768a} .products-page .status-label{font-size:9px;font-weight:650} .products-page .category-badge{display:inline-flex;padding:5px 8px;border-radius:6px;background:#f0edff;color:#5d54a1;font-size:9px;white-space:nowrap} .products-page .pagination{border-top:1px solid #edf0f4;margin-top:4px;color:#627087} dialog:has(#record-form[data-kind="products"]){width:min(680px,calc(100% - 36px));max-width:680px;padding:34px 36px 28px;border-radius:22px;border-color:#e8e5f0;box-shadow:0 28px 90px #25253a30} .product-dialog{min-width:0} .product-dialog-header{padding:1px 22px 18px 0;margin-bottom:8px;border-bottom:1px solid #edf0f4} .product-dialog-header .module-icon{width:44px;height:44px;border-radius:13px;background:#f0edff;color:#7664d5} .product-dialog-header h2{margin:12px 0 5px;color:#28324a;font-size:25px;font-weight:700;letter-spacing:-.65px} .product-dialog-header p{margin:0;color:#68748a;font-size:11px;line-height:1.6} .product-dialog #record-form{padding-top:8px} .product-dialog label{display:block;margin:16px 0 7px;color:#48536a;font-size:10px;font-weight:650} .product-dialog .required-mark{color:#d14f65} .product-dialog input,.product-dialog select,.product-dialog textarea{width:100%;min-height:43px;border-radius:9px;border-color:#dfe4ed;color:#29344c;font-size:11px} .product-dialog input:focus,.product-dialog select:focus,.product-dialog textarea:focus{border-color:#a4d7c4;outline:2px solid #b9ead8} .product-dialog input::placeholder,.product-dialog textarea::placeholder{color:#919bae} .product-dialog .product-price-fields{gap:14px;margin-top:2px} .product-dialog .currency-input{display:flex;align-items:center;min-height:43px;border:1px solid #dfe4ed;border-radius:9px;background:#fff;overflow:hidden} .product-dialog .currency-input:focus-within{border-color:#a4d7c4;outline:2px solid #b9ead8} .product-dialog .currency-input>span{padding-left:12px;color:#647087;font-size:12px} .product-dialog .currency-input input{border:0;outline:0!important;box-shadow:none;min-width:0} .product-dialog textarea{min-height:84px;resize:vertical} .product-dialog .field-note{display:block;margin-top:7px;color:#68748a;font-size:10px} .product-dialog .dialog-actions{position:sticky;bottom:-28px;padding:14px 0 4px;margin:17px 0 0;background:linear-gradient(to bottom,#fffefa,#fff 25%);border-top:1px solid #edf0f4;z-index:2} .product-dialog .dialog-actions .button{min-height:41px;min-width:104px} :root[data-theme="dark"] .products-page .catalog-summary .metric-value,:root[data-theme="dark"] .products-page .table-person strong,:root[data-theme="dark"] .product-dialog-header h2{color:var(--ink)} :root[data-theme="dark"] .products-page .catalog-summary .metric-top>span:first-child,:root[data-theme="dark"] .products-page .catalog-summary .metric-note,:root[data-theme="dark"] .products-page .panel-heading p,:root[data-theme="dark"] .products-page td,:root[data-theme="dark"] .products-page .table-person small,:root[data-theme="dark"] .product-dialog-header p{color:var(--muted)} :root[data-theme="dark"] .product-dialog .currency-input{background:var(--control);border-color:var(--line);color:var(--control-text)} :root[data-theme="dark"] .product-dialog .currency-input input{background:transparent;color:var(--control-text)} @media(max-width:760px){.products-page .catalog-summary{gap:10px}.products-page .catalog-summary .metric-card{min-height:104px;padding:14px}.products-page .panel-heading{padding:16px 15px 13px}.products-page .filter-disclosure{padding:0 15px 12px}dialog:has(#record-form[data-kind="products"]){width:calc(100% - 20px);max-height:calc(100dvh - 20px);padding:27px 20px 22px;border-radius:18px}.product-dialog-header h2{font-size:22px}.product-dialog .dialog-actions{bottom:-22px;margin:14px -20px -22px;padding:13px 20px 22px}} @media(max-width:520px){.products-page .catalog-summary{grid-template-columns:1fr}.products-page .catalog-summary .metric-card{min-height:90px}.product-dialog .product-price-fields{grid-template-columns:minmax(0,1fr);gap:0}.product-dialog .product-price-fields>div+div{margin-top:1px}.product-dialog .dialog-actions .button{flex:1;min-width:0}.product-dialog .dialog-actions{gap:7px}} /* Keep keyboard focus and row hover readable when the organization uses dark mode. */ :root[data-theme="dark"] .clickable-row:hover, :root[data-theme="dark"] .clickable-row:focus, :root[data-theme="dark"] .clickable-row:focus-visible, :root[data-theme="dark"] .products-page tbody tr:hover{background:var(--hover);color:var(--ink)} :root[data-theme="dark"] .clickable-row:focus, :root[data-theme="dark"] .clickable-row:focus-visible{outline:2px solid #8878ed;outline-offset:-2px} :root[data-theme="dark"] .clickable-row:focus td, :root[data-theme="dark"] .clickable-row:focus-visible td{color:var(--ink)} :root[data-theme="dark"] .clickable-row:focus .table-person strong, :root[data-theme="dark"] .clickable-row:focus-visible .table-person strong{color:var(--ink)} :root[data-theme="dark"] .clickable-row:focus .table-person small, :root[data-theme="dark"] .clickable-row:focus-visible .table-person small{color:var(--muted)} :root[data-theme="dark"] .clickable-row:focus .button.secondary, :root[data-theme="dark"] .clickable-row:focus-visible .button.secondary{background:var(--card-raised);border-color:var(--line);color:var(--control-text)} /* Record detail pages and payment detail modal. */ .detail-page-heading{align-items:flex-end}.detail-page-heading .section-eyebrow{margin-top:12px}.detail-back{display:inline-flex;align-items:center;gap:7px;color:var(--purple);font-size:12px;font-weight:600;margin-bottom:2px}.detail-back .icon{width:15px;height:15px;transform:rotate(180deg)} .detail-page-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}.detail-panel{min-width:0}.detail-definition-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;margin:0;padding:4px 22px 20px}.detail-definition-list>div{min-width:0;padding:12px 0;border-bottom:1px solid var(--line)}.detail-definition-list dt{color:var(--muted);font-size:11px;margin-bottom:5px}.detail-definition-list dd{margin:0;color:var(--ink);font-size:12px;font-weight:550;line-height:1.55;overflow-wrap:anywhere;white-space:pre-wrap}.detail-stock-summary{display:flex;flex-direction:column;padding:16px 22px 20px}.detail-stock-summary strong{color:var(--ink);font-size:32px;line-height:1.1}.detail-stock-summary>span{color:var(--muted);font-size:12px;margin-top:5px}.detail-stock-summary small{color:var(--muted);font-size:11px;margin-top:12px}.detail-panel .activity-list{max-height:360px;padding:0 22px 16px}.detail-panel .activity-row{border-color:var(--line)}.detail-panel .activity-row strong{color:var(--ink)}.detail-panel .activity-row small,.detail-panel .activity-row em{color:var(--muted);line-height:1.5}.detail-panel .activity-row>span:last-child{min-width:0;overflow-wrap:anywhere}.detail-inline-error{margin:0 22px 12px;color:#bd5369;font-size:11px}.detail-page-grid>.customer-financial-history{grid-column:1/-1;display:grid;gap:16px;min-width:0}.customer-financial-history .table-scroll{max-height:430px}.customer-balance-cards{grid-template-columns:repeat(4,minmax(0,1fr));margin:0}.customer-balance-cards .metric-card{min-width:0}.customer-balance-cards .metric-value{font-size:clamp(17px,2vw,25px);overflow-wrap:anywhere}.customer-activity .activity-list{max-height:280px}.payment-detail-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;margin:0;padding:0 20px}.payment-detail-list>div{display:flex;flex-direction:column;gap:5px;min-width:0;padding:10px 0;border-bottom:1px solid var(--line)}.payment-detail-list dt{font-size:10px;color:var(--muted)}.payment-detail-list dd{margin:0;color:var(--ink);font-size:12px;font-weight:550;overflow-wrap:anywhere}.payment-method-list{list-style:none;display:grid;gap:8px;padding:0;margin:0}.payment-method-list li{display:grid;grid-template-columns:1fr auto;gap:5px 12px;padding:12px;border:1px solid var(--line);border-radius:9px;background:var(--surface);font-size:11px}.payment-method-list li>span{font-weight:600;color:var(--ink)}.payment-method-list li>strong{color:var(--ink)}.payment-method-list li>small{grid-column:1/-1;color:var(--muted)}.payment-method-empty{display:block!important;color:var(--muted)}.payment-detail-modal{display:grid;gap:17px}.payment-detail-heading{display:flex;align-items:center;gap:11px;padding-right:30px}.payment-detail-heading>div{min-width:0;flex:1}.payment-detail-heading>div>small{font-size:9px;letter-spacing:1px;color:var(--muted)}.payment-detail-heading h2{margin:3px 0 0;color:var(--ink);font-size:18px;overflow-wrap:anywhere}.payment-detail-heading>.status-label{white-space:nowrap}.payment-amount-card{display:flex;flex-direction:column;gap:5px;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}.payment-amount-card>span{font-size:11px;color:var(--muted)}.payment-amount-card>strong{color:var(--ink);font-size:30px;letter-spacing:-.5px}.payment-amount-card>small{font-size:10px;color:var(--muted)}.payment-detail-section{min-width:0}.payment-detail-section h3{font-size:12px;color:var(--ink);margin:0 0 5px}.payment-notes{font-size:12px;color:var(--muted);line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}.payment-detail-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;padding-top:13px;border-top:1px solid var(--line)}dialog:has(.payment-detail-modal){width:min(560px,calc(100% - 28px));max-width:560px;padding:28px}.payment-detail-modal .status-label{font-size:10px} :root[data-theme="dark"] .detail-definition-list>div,:root[data-theme="dark"] .payment-detail-list>div{border-color:var(--line)}:root[data-theme="dark"] .detail-definition-list dt,:root[data-theme="dark"] .payment-detail-list dt,:root[data-theme="dark"] .payment-amount-card>span,:root[data-theme="dark"] .payment-amount-card>small{color:var(--muted)}:root[data-theme="dark"] .payment-method-list li{background:var(--card-raised);border-color:var(--line)}:root[data-theme="dark"] .payment-detail-actions{border-color:var(--line)} @media(max-width:900px){.customer-balance-cards{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:700px){.detail-page-grid{grid-template-columns:1fr}.detail-page-grid>.customer-financial-history{grid-column:auto}.detail-definition-list{grid-template-columns:1fr;padding-left:16px;padding-right:16px}.detail-panel .activity-list{padding-left:16px;padding-right:16px}.detail-page-heading{align-items:flex-start}.detail-page-heading .heading-aside{width:auto}.customer-balance-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.customer-balance-cards .metric-value{font-size:19px}dialog:has(.payment-detail-modal){padding:23px 18px}.payment-detail-list{grid-template-columns:1fr;padding:0 16px}.payment-detail-heading{align-items:flex-start;flex-wrap:wrap}.payment-detail-heading>.status-label{margin-left:52px}} /* Keep form controls and sticky actions on the dark surface in every modal. */ :root[data-theme="dark"] #record-form textarea, :root[data-theme="dark"] #expense-form textarea, :root[data-theme="dark"] .panel-form textarea, :root[data-theme="dark"] #quotation-form textarea, :root[data-theme="dark"] #invoice-form textarea, :root[data-theme="dark"] .product-dialog textarea{background:var(--control);border-color:var(--line);color:var(--control-text)} :root[data-theme="dark"] #record-form textarea::placeholder, :root[data-theme="dark"] #expense-form textarea::placeholder, :root[data-theme="dark"] .panel-form textarea::placeholder, :root[data-theme="dark"] #quotation-form textarea::placeholder, :root[data-theme="dark"] #invoice-form textarea::placeholder, :root[data-theme="dark"] .product-dialog textarea::placeholder{color:#a4a9b8} :root[data-theme="dark"] .product-dialog input::placeholder{color:#a4a9b8} :root[data-theme="dark"] .product-dialog input[type="checkbox"], :root[data-theme="dark"] #record-form input[type="checkbox"], :root[data-theme="dark"] #expense-form input[type="checkbox"], :root[data-theme="dark"] #quotation-form input[type="checkbox"], :root[data-theme="dark"] #invoice-form input[type="checkbox"]{width:16px;height:16px;min-height:16px;padding:0;flex:0 0 16px;accent-color:var(--purple)} :root[data-theme="dark"] .product-dialog .dialog-actions, :root[data-theme="dark"] #quotation-form .dialog-actions, :root[data-theme="dark"] #invoice-form .dialog-actions{background:linear-gradient(to bottom,rgba(25,28,37,.88),var(--card) 28%);border-color:var(--line)} :root[data-theme="dark"] .quotation-item-row, :root[data-theme="dark"] #invoice-form .quotation-item-row{background:var(--card-raised);border-color:var(--line)} :root[data-theme="dark"] .product-dialog .currency-input{background:var(--control);border-color:var(--line)} :root[data-theme="dark"] .dashboard-welcome .date-label{background:var(--card-raised);border:1px solid var(--line);color:var(--control-text)} /* Master data overview: cards first, management forms on demand. */ .master-data-overview{display:grid;gap:17px}.master-data-info{display:flex;align-items:center;gap:11px;padding:13px 16px;border:1px solid #d9efe6;border-radius:11px;background:#f1faf6;color:#526b62}.master-data-info p{font-size:11px;line-height:1.5}.master-data-info-icon{display:grid;place-items:center;width:29px;height:29px;flex:0 0 29px;border-radius:8px;background:#e2f5ec;color:#168665}.master-data-info-icon .icon{width:16px;height:16px}.master-data-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.master-data-card{display:grid;grid-template-columns:48px minmax(0,1fr) 16px;align-items:start;gap:14px;min-width:0;min-height:156px;padding:20px;border:1px solid var(--line);border-radius:13px;background:var(--card,white)}.master-data-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;flex:0 0 44px}.master-data-icon .icon{width:20px;height:20px}.master-data-icon.violet{background:#f0edff;color:#735fe0}.master-data-icon.green{background:#e5f7ef;color:#15966e}.master-data-icon.blue{background:#e9f3ff;color:#2683df}.master-data-icon.orange{background:#fff1e5;color:#e98626}.master-data-icon.rose{background:#fff0f4;color:#d84b67}.master-data-icon.cyan{background:#e7f8fb;color:#11a2b8}.master-data-card-copy{min-width:0}.master-data-card-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.master-data-card-title h2,.master-data-tax-copy h2{color:var(--ink);font-size:14px;font-weight:650;line-height:1.35}.master-data-card-copy>p,.master-data-tax-copy>p{margin-top:5px;color:var(--muted);font-size:10px;line-height:1.55;max-width:490px}.master-data-count{flex:0 0 auto;padding:6px 8px;border-radius:7px;background:var(--purple-soft);color:var(--purple);font-size:9px;font-weight:600;white-space:nowrap}.master-data-card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:13px}.master-data-card-actions .button{min-height:34px}.master-data-card-arrow{color:var(--muted);padding-top:4px}.master-data-card-arrow .icon{width:16px;height:16px}.master-data-current{display:inline-flex;flex-direction:column;gap:2px;margin-top:10px;padding:8px 11px;border:1px solid var(--line);border-radius:8px;background:var(--surface);min-width:118px}.master-data-current span{color:var(--muted);font-size:9px}.master-data-current strong{color:var(--ink);font-size:11px;font-weight:650}.master-data-tax-card{grid-column:1/-1;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:14px;min-width:0;padding:18px 20px;border:1px solid var(--line);border-radius:13px;background:var(--card,white)}.master-data-tax-form{display:flex;align-items:center;gap:12px}.master-data-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer}.master-data-toggle input{position:absolute;opacity:0;width:1px;height:1px}.master-data-toggle>span{position:relative;width:38px;height:22px;border-radius:99px;background:#9da2b0;transition:background .18s}.master-data-toggle>span:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:white;transition:transform .18s}.master-data-toggle input:checked+span{background:#168f6c}.master-data-toggle input:checked+span:after{transform:translateX(16px)}.master-data-toggle input:focus-visible+span{outline:3px solid #8a78ed;outline-offset:2px}.master-data-toggle b{min-width:22px;color:var(--muted);font-size:10px}.master-data-tax-form .form-error{position:absolute;transform:translateY(28px);font-size:10px}.master-data-manager{max-height:min(76vh,720px);overflow:auto;padding-right:4px}.master-data-manager h2{margin:12px 40px 7px 0;color:var(--ink);font-size:21px}.master-data-manager>.muted{font-size:11px;line-height:1.55;margin-bottom:14px}.master-data-manager .master-data-form{padding:15px 0 17px;border-bottom:1px solid var(--line);margin-bottom:10px}.master-data-manager .master-data-form label:not(.checkbox-label){display:block;margin:10px 0 6px;color:var(--ink);font-size:11px;font-weight:600}.master-data-manager .master-data-form input:not([type=checkbox]),.master-data-manager .master-data-form select{width:100%;min-height:40px;border:1px solid var(--line);border-radius:8px;padding:9px 11px;background:var(--control,white);color:var(--control-text,var(--ink));font-size:12px}.master-data-manager .master-data-input{display:flex;align-items:center;gap:8px}.master-data-manager .master-data-input input{min-width:0;flex:1}.master-data-manager .field-note{display:block;margin:6px 0;color:var(--muted);font-size:10px;line-height:1.5}.master-data-manager .checkbox-label{display:flex;align-items:center;gap:8px;margin-top:12px;color:var(--ink);font-size:11px}.master-data-manager .checkbox-label input{width:16px;height:16px;margin:0;accent-color:var(--green)}.master-data-manager .dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:13px}.master-data-manager .master-data-list{max-height:300px;overflow:auto}.master-data-number-preview{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;margin-bottom:13px;background:var(--surface);border:1px solid var(--line);border-radius:9px}.master-data-number-preview span{color:var(--muted);font-size:10px}.master-data-number-preview strong{color:var(--ink);font-size:15px;letter-spacing:.2px}.master-data-content .master-data-overview{padding-bottom:8px} :root[data-theme="dark"] .master-data-info{background:#182720;border-color:#274637;color:#b5cfc3}:root[data-theme="dark"] .master-data-info-icon{background:#20382d;color:#62d2a8}:root[data-theme="dark"] .master-data-icon.violet{background:#29263d;color:#b1a4ff}:root[data-theme="dark"] .master-data-icon.green{background:#20382d;color:#62d2a8}:root[data-theme="dark"] .master-data-icon.blue{background:#202d43;color:#83b7ff}:root[data-theme="dark"] .master-data-icon.orange{background:#3c2c1d;color:#ffb86d}:root[data-theme="dark"] .master-data-icon.rose{background:#3a2630;color:#ff9bb1}:root[data-theme="dark"] .master-data-icon.cyan{background:#1d3339;color:#76d8e6}:root[data-theme="dark"] .master-data-toggle input:checked+span{background:#168f6c} @media(max-width:900px){.master-data-card-grid{grid-template-columns:1fr}.master-data-tax-card{grid-template-columns:44px minmax(0,1fr)}.master-data-tax-form{grid-column:2;justify-content:flex-start}} @media(max-width:560px){.master-data-info{align-items:flex-start}.master-data-card{grid-template-columns:40px minmax(0,1fr) 14px;gap:10px;padding:15px;min-height:0}.master-data-icon{width:38px;height:38px}.master-data-card-title{align-items:flex-start;flex-wrap:wrap}.master-data-card-title h2{font-size:13px}.master-data-card-actions{gap:6px}.master-data-card-actions .button{padding:8px 10px;font-size:10px}.master-data-tax-card{grid-template-columns:38px minmax(0,1fr);gap:10px;padding:15px}.master-data-tax-form{grid-column:1/-1;justify-content:flex-end}.master-data-manager{max-height:72vh}.master-data-manager .master-data-input{align-items:stretch;flex-direction:column}.master-data-manager .master-data-input .button{width:100%}.master-data-manager .dialog-actions .button{flex:1}} /* Shared UI polish: keep common controls and data surfaces consistent across modules. */ :root { --action-primary: var(--purple); --action-primary-hover: var(--purple-dark); --action-primary-text: #fff; --action-primary-shadow: color-mix(in srgb, var(--action-primary) 16%, transparent); --radius-control: 9px; --radius-card: 12px; --shadow-card: 0 1px 2px rgb(23 25 38 / 4%); --focus-ring: color-mix(in srgb, var(--purple) 28%, transparent); --surface-card: var(--card, #fff); --surface-control: var(--control, #fff); --text-control: var(--control-text, var(--ink)); } body { line-height: 1.5; } .sidebar, .topbar, .panel, .metric-card, dialog { background: var(--surface-card); border-color: var(--line); } .panel, .metric-card { border-radius: var(--radius-card); box-shadow: var(--shadow-card); } .page-heading { margin-bottom: 27px; } .page-heading h1 { font-weight: 700; } .page-heading p, .panel-heading p, .metric-note, .field-note, .table-person small, .pagination, .app-footer { line-height: 1.55; } .nav-link { min-height: 44px; font-weight: 500; } .nav-link.active { font-weight: 650; } input:not([type="checkbox"]):not([type="radio"]), select, textarea, .searchable-select-trigger { border-radius: var(--radius-control); color: var(--text-control); } input:focus-visible, select:focus-visible, textarea:focus-visible, .searchable-select-trigger:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } label:not(.sr-only) { font-size: 12px; font-weight: 600; line-height: 1.4; } textarea { font-family: inherit; font-size: 13px; } input::placeholder, textarea::placeholder { opacity: 1; } .button { min-height: 42px; border-radius: 9px; font-weight: 650; } .small-button { min-height: 34px; border-radius: 8px; font-weight: 600; } .icon-button { border-radius: 9px; } .status-label { font-weight: 550; } .panel-heading { padding-top: 20px; padding-bottom: 20px; } .panel-heading h3 { font-weight: 650; } .table-filter-toolbar .filter-result-count { font-size: 12px; font-weight: 550; } th { padding-top: 14px; padding-bottom: 14px; font-size: 11px; font-weight: 650; } td { padding-top: 15px; padding-bottom: 15px; font-size: 12px; } .table-scroll td > strong { display: block; color: var(--ink); font-size: 12px; font-weight: 650; line-height: 1.4; } .table-scroll td > small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.4; white-space: normal; } .quotation-reference-cell { min-width: 180px; } .quotation-reference { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; } .quotation-reference .quotation-number { display: block; max-width: 100%; color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; } .quotation-reference .quotation-subject { display: block; max-width: 100%; color: var(--muted); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; } .table-scroll tr:last-child td { border-bottom-color: transparent; } .clickable-row:hover { background: color-mix(in srgb, var(--purple-soft) 55%, transparent); } dialog { border-radius: 18px; box-shadow: 0 24px 72px rgb(22 20 38 / 18%); } dialog .dialog-actions { gap: 9px; } dialog .form-error, dialog .field-error { font-size: 12px; } .filter-disclosure-content { border-radius: 10px; } .table-scroll { scrollbar-width: thin; scrollbar-color: var(--line) transparent; } :root[data-theme="dark"] { --shadow-card: 0 1px 2px rgb(0 0 0 / 18%); --focus-ring: color-mix(in srgb, var(--purple) 48%, transparent); } :root[data-theme="dark"] .table-scroll td > strong, :root[data-theme="dark"] .table-scroll td > small { color: var(--ink); } :root[data-theme="dark"] .table-scroll td > small { color: var(--muted); } :root[data-theme="dark"] .clickable-row:hover { background: var(--hover); } :root[data-theme="dark"] .panel, :root[data-theme="dark"] .metric-card, :root[data-theme="dark"] dialog { box-shadow: var(--shadow-card); } @media (max-width: 900px) { .page-heading { align-items: flex-start; gap: 12px; } .page-heading h1 { font-size: 25px; } .page-heading p { font-size: 12px; } .panel-heading { padding: 16px; } th { padding: 12px 14px; } td { padding: 13px 14px; } .pagination { font-size: 11px; } .table-person strong { font-size: 11px; } .metric-top > span:first-child { font-size: 9px; } .metric-note { font-size: 10px; } .app-footer { font-size: 9px; } dialog { border-radius: 16px; } } @media (max-width: 760px) { /* Keep the quotation form's sticky footer inside the dialog's mobile padding. */ #quotation-form .dialog-actions { bottom: -24px; margin: 4px -20px -24px; padding: 14px 20px 24px; } } @media (min-width: 761px) and (max-width: 900px) { .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .metric-grid:not(.customer-balance-cards) > .metric-card:nth-child(3):last-child { grid-column: 1 / -1; } .metric-grid:not(.customer-balance-cards) .metric-value { font-size: clamp(21px, 6vw, 26px); overflow-wrap: anywhere; } } /* Keep summary cards comfortably readable instead of squeezing four into tablet columns. */ @media (min-width: 761px) and (max-width: 1180px) { .metric-grid:not(.customer-balance-cards) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .metric-grid:not(.customer-balance-cards) .metric-card { min-width: 0; min-height: 124px; padding: 17px 18px; } .metric-grid:not(.customer-balance-cards) .metric-value { font-size: clamp(23px, 2.8vw, 29px); overflow-wrap: anywhere; } .metric-grid:not(.customer-balance-cards) > .metric-card:nth-child(3):last-child { grid-column: 1 / -1; } } /* Shared control and keyboard-focus contract across modules and dialogs. */ :root { --control-border: #d9dce6; --control-hover-border: #aab2c3; --control-focus-border: var(--purple); --focus-ring: color-mix(in srgb, var(--purple) 35%, transparent); } :root[data-theme="dark"] { --control-border: #414657; --control-hover-border: #687086; --control-focus-border: #b2a7ff; --focus-ring: color-mix(in srgb, #aa9cff 52%, transparent); } input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea, .searchable-select-trigger, .select-search { border-color: var(--control-border); border-radius: 9px; transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease; } form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), form select, form .searchable-select-trigger { min-height: 44px !important; font-size: 13px !important; } input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover:not(:disabled):not([readonly]), select:hover:not(:disabled), textarea:hover:not(:disabled), .searchable-select-trigger:hover:not(:disabled), .select-search:hover:not(:disabled) { border-color: var(--control-hover-border); } input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus, select:focus, textarea:focus, .searchable-select-trigger:focus, .select-search:focus { border-color: var(--control-focus-border) !important; outline: none !important; box-shadow: 0 0 0 3px var(--focus-ring) !important; } button:focus-visible, a:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .searchable-select-trigger:focus-visible, .select-search:focus-visible, .master-data-toggle input:focus-visible + span { outline: 3px solid var(--focus-ring) !important; outline-offset: 2px !important; } button:focus:not(:focus-visible), a:focus:not(:focus-visible), [role="button"]:focus:not(:focus-visible) { outline: none; } .button { border-radius: 9px; transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease; } .button:not(:disabled):hover { filter: brightness(.97); } :root[data-theme="dark"] .button:not(:disabled):hover { filter: brightness(1.1); } .button:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); } .button.icon-button { border-radius: 9px; } .button:disabled { filter: none; } input[type="checkbox"], input[type="radio"] { accent-color: var(--purple); } input:disabled, select:disabled, textarea:disabled, input[readonly]:not([type="checkbox"]):not([type="radio"]) { cursor: not-allowed; opacity: .72; } /* Readability pass: make supporting copy and dense data easier to scan. */ .section-eyebrow, .nav-caption { font-size: 10px; } .page-heading p, .panel-heading p { font-size: 13px; } .metric-top > span:first-child { font-size: 10px; font-weight: 700; } .metric-note { font-size: 11px; } .table-person strong { font-size: 12px; font-weight: 650; } .table-person small { font-size: 11px; font-weight: 500; line-height: 1.45; } th { font-size: 11px; } td { font-size: 12px; } .field-note, .pagination, .table-filter-toolbar .filter-result-count { font-size: 12px; } .status-label { font-size: 12px; } .searchable-option, .searchable-select-trigger, .select-search { font-size: 13px; } .products-page .catalog-summary .metric-top > span:first-child { font-size: 10px; } .products-page .catalog-summary .metric-note { font-size: 11px; } .products-page .table-person strong { font-size: 12px; } .products-page .table-person small { font-size: 11px; } .products-page .panel-heading p { font-size: 12px; } .dashboard-metric .metric-note, .dashboard-panel-heading p { font-size: 11px; } /* Give the five dashboard summary metrics balanced rows at every breakpoint. */ @media (min-width: 1500px) { .dashboard-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (min-width: 1181px) and (max-width: 1499px) { .dashboard-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1180px) { .dashboard-metrics > .dashboard-metric:nth-child(5):last-child { grid-column: 1 / -1; } } :root[data-theme="dark"] .table-scroll th { color: #c7cbd6; font-size: 11px; } :root[data-theme="dark"] .table-scroll td { color: #d0d3dd; font-size: 12px; } :root[data-theme="dark"] .table-person small { color: #b7bdca; } :root[data-theme="dark"] label:not(.sr-only) { font-size: 12px; font-weight: 600; } :root[data-theme="dark"] .products-page .table-person small { color: #b7bdca; font-size: 11px; } @media (max-width: 760px) { .page-heading p, .panel-heading p { font-size: 12px; } .table-person small { font-size: 11px; } th { font-size: 11px; } td { font-size: 12px; } } /* Keep the fixed sidebar's navigation independently scrollable on short screens. */ .sidebar { width: 228px; overflow: hidden; padding: 20px 14px 14px; } .workspace-switch { min-width: 0; margin: 0 0 17px; padding: 9px; gap: 10px; background: #effaf5; border-color: #dcefe5; border-radius: 10px; } .workspace-switch.assigned-workspace { cursor: default; } .workspace-switch .company-avatar { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; } .workspace-switch > span:nth-child(2) { min-width: 0; flex: 1; } .workspace-switch strong { color: var(--ink); font-size: 12px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; } .sidebar nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; } .sidebar .nav-caption { margin: 10px 0 5px; padding: 0 10px; color: var(--muted); font-size: 9px; letter-spacing: 1.2px; } .sidebar .nav-caption.spaced { margin-top: 13px; } .sidebar .nav-link { min-height: 34px; gap: 9px; margin-bottom: 2px; padding: 7px 10px; color: #687386; font-size: 13px; font-weight: 500; } .sidebar .nav-link .icon { width: 18px; height: 18px; } .sidebar .nav-link:hover { background: #f4f8f6; color: #16845f; } .sidebar .nav-link.active { background: #eaf7f1; color: #12815c; font-weight: 600; } .sidebar-bottom { flex: 0 0 auto; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .sidebar .profile { min-height: 54px; gap: 10px; padding: 8px 6px; border-radius: 10px; color: var(--ink); } .sidebar .profile:hover { background: var(--hover); } .sidebar .profile .avatar { width: 36px; height: 36px; background: #e3f5ed; color: #13815e; font-size: 12px; } .sidebar .profile strong { color: var(--ink); font-size: 12px; } .sidebar .profile small { color: var(--muted); font-size: 10px; } .sidebar .profile > .icon { color: var(--muted); } :root[data-theme="dark"] .workspace-switch { background: var(--card-raised); border-color: var(--line); } :root[data-theme="dark"] .sidebar .nav-link { color: var(--muted); } :root[data-theme="dark"] .sidebar .nav-link:hover { background: var(--hover); color: var(--green); } :root[data-theme="dark"] .sidebar .nav-link.active { background: color-mix(in srgb, var(--green) 18%, var(--card)); color: var(--green); } :root[data-theme="dark"] .sidebar .profile .avatar { background: color-mix(in srgb, var(--green) 20%, var(--card)); color: var(--green); } .sidebar nav::-webkit-scrollbar { width: 6px; } .sidebar nav::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; } /* Responsive table cards: keep every field visible without sideways scrolling. */ @media (max-width: 900px) { #main-content .table-scroll { overflow: visible; max-width: 100%; } #main-content .table-scroll table { display: block; width: 100%; min-width: 0 !important; white-space: normal; border-collapse: separate; } #main-content .table-scroll thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } #main-content .table-scroll tbody { display: grid; gap: 10px; padding: 11px; } #main-content .table-scroll tbody tr { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; padding: 6px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); } #main-content .table-scroll tbody tr.clickable-row { cursor: pointer; } #main-content .table-scroll tbody td { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; padding: 8px 2px; border: 0; text-align: right; white-space: normal; overflow-wrap: anywhere; } #main-content .table-scroll tbody td::before { content: attr(data-label); flex: 0 1 auto; min-width: 0; color: var(--muted); font-size: 10px; font-weight: 600; line-height: 1.45; text-align: left; } #main-content .table-scroll tbody td > * { max-width: 65%; } #main-content .table-scroll tbody td.align-right { text-align: right; } #main-content .table-scroll tbody td:last-child:has(button), #main-content .table-scroll tbody td:only-child { grid-column: 1 / -1; } #main-content .table-scroll tbody td:last-child:has(button) { justify-content: flex-end; } #main-content .table-scroll tbody td:only-child { display: block; text-align: center; } #main-content .table-scroll tbody td:only-child::before { content: none; } #main-content .table-scroll tbody tr.clickable-row:hover { background: var(--hover); } :root[data-theme="dark"] #main-content .table-scroll tbody tr { background: var(--card-raised); } :root[data-theme="dark"] #main-content .table-scroll tbody tr.clickable-row:hover { background: var(--hover); } .dashboard-activity .table-scroll { padding: 0 4px 10px; } } /* Dedicated billing entry page and synchronized customer preview. */ .invoice-create-heading .heading-aside{align-self:flex-start} .invoice-create-heading .heading-aside .button{min-height:42px} .invoice-create-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.8fr);align-items:start;gap:20px} .invoice-create-form,.invoice-preview-panel{min-width:0;padding:22px 24px} #invoice-form .quotation-form-section{padding:22px 0;border-top:1px solid var(--line)} #invoice-form .quotation-form-section:first-child{padding-top:0;border-top:0} .invoice-section-heading{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px} .invoice-section-heading h2{font-size:16px;line-height:1.35;color:var(--ink)} .invoice-section-heading p{margin-top:4px;color:var(--muted);font-size:12px;line-height:1.5} .invoice-step{display:grid;place-items:center;flex:0 0 28px;height:28px;border-radius:50%;background:var(--purple-soft);color:var(--purple);font-weight:700;font-size:12px} .invoice-step.info{background:#eaf4ff;color:#3575be} .invoice-create-form label{display:block;margin:0 0 7px;font-weight:600;color:var(--ink)} .invoice-create-form input,.invoice-create-form select,.invoice-create-form textarea{width:100%} .invoice-create-form .field-note{display:block;margin:6px 0 14px} .optional-label,.field-unit{margin-left:5px;color:var(--muted);font-size:11px;font-weight:500} .invoice-create-items{display:grid;gap:10px;margin:0 0 12px} #invoice-form .invoice-create-items .quotation-item-row{display:grid;grid-template-columns:minmax(150px,1.15fr) minmax(150px,1.2fr) minmax(78px,.55fr) minmax(105px,.75fr) 34px;gap:10px;align-items:end;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)} #invoice-form .invoice-create-items .quotation-item-field{min-width:0} #invoice-form .invoice-create-items .quotation-item-field label{font-size:11px} #invoice-form .invoice-create-items .quotation-remove-item{margin-bottom:3px} .invoice-form-actions{position:sticky;bottom:0;z-index:2;display:flex;justify-content:flex-end;gap:10px;margin:0 -24px -22px;padding:14px 24px;background:color-mix(in srgb,var(--card) 94%,transparent);border-top:1px solid var(--line);backdrop-filter:blur(10px);border-radius:0 0 12px 12px} .invoice-form-actions .invoice-generate{min-width:160px} .invoice-preview-panel{position:sticky;top:18px} .quotation-create-form label{display:block;margin:0 0 7px;font-weight:600;color:var(--ink)} .quotation-create-form input,.quotation-create-form select,.quotation-create-form textarea{width:100%} .quotation-create-form .quotation-form-section{padding:22px 0;border-top:1px solid var(--line)} .quotation-create-form .quotation-form-section:first-child{padding-top:0;border-top:0} .quotation-create-form .invoice-create-items .quotation-item-row{display:grid;grid-template-columns:minmax(140px,1.05fr) minmax(140px,1.2fr) minmax(72px,.55fr) minmax(100px,.75fr) 34px;gap:10px;align-items:end;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)} .quotation-create-form .quotation-item-field{min-width:0} .quotation-create-form .quotation-item-field label{font-size:11px} .quotation-create-form .quotation-remove-item{margin-bottom:3px} .quotation-live-preview-panel #quotation-live-preview{padding-top:16px} #quotation-live-preview .quotation-paper{max-width:none;width:100%;padding:18px;border-radius:9px;box-shadow:none;overflow:hidden} #quotation-live-preview .quotation-paper-header{grid-template-columns:42px minmax(0,1fr);gap:10px;padding-bottom:12px} #quotation-live-preview .quotation-logo{width:40px;height:40px} #quotation-live-preview .quotation-paper-header h2{font-size:14px;overflow-wrap:anywhere} #quotation-live-preview .quotation-paper-header p{font-size:9px;overflow-wrap:anywhere} #quotation-live-preview .quotation-meta{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:4px 10px;text-align:left;margin-top:8px} #quotation-live-preview .quotation-meta strong{grid-column:1/-1;font-size:14px;margin-bottom:2px} #quotation-live-preview .quotation-meta span{font-size:9px} #quotation-live-preview .quotation-recipient{grid-template-columns:1fr 1fr;gap:10px;padding:12px 0} #quotation-live-preview .quotation-recipient strong{font-size:10px;overflow-wrap:anywhere} #quotation-live-preview .quotation-recipient p{font-size:9px;color:var(--muted);margin-top:3px;overflow-wrap:anywhere} #quotation-live-preview .quotation-paper-table{table-layout:fixed;font-size:8px} #quotation-live-preview .quotation-paper-table th,#quotation-live-preview .quotation-paper-table td{padding:5px 3px;overflow-wrap:anywhere} #quotation-live-preview .quotation-paper-table th:first-child,#quotation-live-preview .quotation-paper-table td:first-child{width:8%} #quotation-live-preview .quotation-paper-table th:nth-child(2),#quotation-live-preview .quotation-paper-table td:nth-child(2){width:38%;white-space:normal} #quotation-live-preview .quotation-paper-table th:nth-child(3),#quotation-live-preview .quotation-paper-table td:nth-child(3){width:12%} #quotation-live-preview .quotation-paper-table th:nth-child(4),#quotation-live-preview .quotation-paper-table td:nth-child(4),#quotation-live-preview .quotation-paper-table th:nth-child(5),#quotation-live-preview .quotation-paper-table td:nth-child(5){width:21%} #quotation-live-preview .quotation-paper-table tfoot td{white-space:normal;padding:4px 3px} #quotation-live-preview .quotation-paper-table tfoot td:first-child{overflow:visible} #quotation-live-preview .quotation-note{font-size:9px;overflow-wrap:anywhere} .quotation-preview-placeholder{text-align:center!important;color:var(--muted)} .invoice-preview-title{display:flex;align-items:center;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--line)} .invoice-preview-title h2{font-size:16px;color:var(--ink)} .invoice-preview-title p{margin-top:4px;font-size:12px;color:var(--muted)} .invoice-preview-meta{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)} .invoice-preview-meta>div{display:grid;gap:5px;min-width:0} .invoice-preview-meta span,.invoice-preview-totals span,.invoice-preview-box-note strong{font-size:11px;color:var(--muted)} .invoice-preview-meta strong{font-size:13px;overflow-wrap:anywhere} .invoice-preview-meta small{font-size:11px;color:var(--muted)} .invoice-preview-hint{margin:12px 0 0;padding:10px 12px;border-radius:8px;background:var(--purple-soft);color:var(--muted);font-size:11px;line-height:1.5} .invoice-preview-lines{display:grid;gap:0;max-height:360px;overflow:auto} .invoice-preview-line{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)} .invoice-preview-line>div{display:grid;gap:5px;min-width:0} .invoice-preview-line span{font-size:12px;font-weight:600;overflow-wrap:anywhere} .invoice-preview-line small{font-size:11px;color:var(--muted)} .invoice-preview-line>strong{flex:none;font-size:12px} .invoice-preview-empty{padding:22px 12px;text-align:center;color:var(--muted);font-size:12px;line-height:1.5} .invoice-preview-totals{display:grid;gap:11px;padding:16px 0} .invoice-preview-totals>div{display:flex;align-items:center;justify-content:space-between;gap:12px} .invoice-preview-totals strong{font-size:12px;font-weight:600} .invoice-preview-totals .invoice-preview-grand{padding-top:13px;border-top:2px solid var(--green)} .invoice-preview-grand span,.invoice-preview-grand strong{color:var(--ink);font-size:15px;font-weight:750} .invoice-preview-box-note{display:grid;gap:6px;padding:12px;border:1px solid var(--line);border-radius:9px;background:var(--surface)} .invoice-preview-box-note span{font-size:11px;line-height:1.5;color:var(--muted)} :root[data-theme="dark"] .invoice-create-items .quotation-item-row,:root[data-theme="dark"] .invoice-preview-box-note{background:var(--card-raised)} :root[data-theme="dark"] .invoice-preview-hint{background:#29263d;color:#c3bfd3} @media(max-width:1000px){.invoice-create-layout{grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);gap:14px}.invoice-create-form,.invoice-preview-panel{padding:18px}.invoice-form-actions{margin:0 -18px -18px;padding:12px 18px}} @media(max-width:760px){.invoice-create-layout{grid-template-columns:minmax(0,1fr)}.invoice-preview-panel{position:static;grid-row:1}.invoice-create-items .quotation-item-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;align-items:start!important}.invoice-create-items .quotation-item-linked{grid-column:1/-1}.invoice-create-items .quotation-remove-item{justify-self:end;grid-column:2}.invoice-form-actions{position:sticky;bottom:0}.invoice-create-heading{align-items:flex-start;gap:12px}.invoice-create-heading .heading-aside{width:auto}.invoice-create-heading .heading-aside .button{padding-inline:12px}} @media(max-width:760px){.quotation-create-form .invoice-create-items .quotation-item-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;align-items:start!important}.quotation-create-form .quotation-item-linked{grid-column:1/-1}.quotation-create-form .quotation-remove-item{justify-self:end;grid-column:2}} @media(max-width:480px){.quotation-create-form .invoice-form-actions{display:grid;grid-template-columns:1fr 1fr}.quotation-create-form .quotation-preview-action{grid-column:1/-1;grid-row:1}.quotation-create-form .invoice-generate{grid-column:2;grid-row:2}.quotation-create-form .invoice-form-actions>a{grid-column:1;grid-row:2}} @media(max-width:480px){.invoice-create-form,.invoice-preview-panel{padding:15px}.invoice-form-actions{margin:0 -15px -15px;padding:11px 15px}.invoice-form-actions .button{flex:1;min-width:0;padding-inline:10px}.invoice-create-form .form-two-column{grid-template-columns:1fr;gap:0}.invoice-preview-meta{grid-template-columns:1fr 1fr}.invoice-section-heading p{font-size:11px}} /* Full-page bill composer: structured inputs with a document-like live preview. */ .invoice-create-layout{grid-template-columns:minmax(0,1.7fr) minmax(360px,.95fr);gap:16px} .invoice-create-form,.invoice-preview-panel{padding:20px} .invoice-create-form{border-radius:12px} #invoice-form .quotation-form-section{padding:18px 0;border-top:1px solid var(--line)} #invoice-form .quotation-form-section:first-child{padding-top:0} .invoice-section-heading{align-items:center;margin-bottom:16px} .invoice-section-heading h2{font-size:15px;font-weight:700} .invoice-section-heading p{font-size:12px} .invoice-details-grid{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(170px,.9fr) minmax(220px,1.25fr);gap:12px;align-items:start;margin-bottom:12px} .invoice-details-grid>div{min-width:0} .invoice-details-grid .field-note{font-size:11px} .invoice-customer-control{display:flex;gap:8px;align-items:center} .invoice-customer-control select{min-width:0} .required-mark{color:var(--red,#dc3545)} .invoice-section-with-action{justify-content:space-between} .invoice-section-title-wrap{display:flex;gap:12px;align-items:center} .invoice-items-labels{display:grid;grid-template-columns:28px minmax(150px,1.25fr) minmax(130px,1.15fr) minmax(70px,.55fr) minmax(90px,.7fr) minmax(75px,.55fr) 30px;gap:8px;padding:9px 10px;background:var(--green-soft,var(--purple-soft));color:var(--ink);font-size:10px;font-weight:700;border-radius:8px 8px 0 0} #invoice-form .invoice-create-items{gap:0;margin:0 0 12px} #invoice-form .invoice-create-items .quotation-item-row{grid-template-columns:28px minmax(150px,1.25fr) minmax(130px,1.15fr) minmax(70px,.55fr) minmax(90px,.7fr) minmax(75px,.55fr) 30px;gap:8px;align-items:center;padding:8px 10px;border-radius:0;border-width:0 1px 1px;background:var(--card)} #invoice-form .invoice-create-items .quotation-item-row:first-child{border-top:1px solid var(--line)} #invoice-form .invoice-create-items .quotation-item-row::before{content:counter(invoice-line);counter-increment:invoice-line;color:var(--muted);font-size:11px} #invoice-form .invoice-create-items{counter-reset:invoice-line} #invoice-form .invoice-create-items .quotation-item-field label{display:none} #invoice-form .invoice-create-items .searchable-select-trigger,#invoice-form .invoice-create-items input{min-height:38px;padding:8px 9px;font-size:11px} #invoice-form .invoice-create-items .quotation-remove-item{margin:0} .invoice-notes-grid{gap:12px} .invoice-notes-grid textarea{min-height:68px!important} .invoice-form-actions{margin:0 -20px -20px;padding:12px 20px;border-radius:0 0 12px 12px} .invoice-preview-panel{top:14px;padding:16px} .invoice-preview-title{padding-bottom:13px} .invoice-preview-title h2{font-size:15px} .invoice-preview-title p{font-size:11px} #invoice-live-preview{padding-top:12px} .invoice-preview-paper{padding:15px;border:1px solid var(--line);border-radius:9px;background:#fff;color:#202033;box-shadow:0 8px 22px rgba(24,30,50,.045);font-size:11px;min-width:0} .invoice-paper-header{display:grid;grid-template-columns:48px minmax(0,1fr) minmax(105px,auto);gap:10px;align-items:start;padding-bottom:13px;border-bottom:2px solid var(--primary,var(--purple))} .invoice-paper-logo{width:46px;height:46px;object-fit:contain;border-radius:9px;background:#f5f3fa} .invoice-paper-logo-fallback{display:grid;place-items:center;color:#6657dc} .invoice-paper-logo-fallback svg{width:22px;height:22px} .invoice-paper-company{display:grid;gap:3px;min-width:0;color:#626477;font-size:9px;line-height:1.4;overflow-wrap:anywhere} .invoice-paper-company strong{font-size:12px;color:#22243a} .invoice-paper-title{display:grid;gap:4px;text-align:right;color:#22243a;font-size:9px;white-space:nowrap} .invoice-paper-title strong{color:var(--primary,#5747c7);font-size:13px;letter-spacing:.04em} .invoice-paper-title b{font-size:13px} .invoice-paper-recipient{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:13px 0} .invoice-paper-recipient>div{display:grid;gap:3px;min-width:0} .invoice-paper-recipient small,.invoice-paper-notes small{color:#828397;font-size:8px;font-weight:700;letter-spacing:.08em} .invoice-paper-recipient strong{color:#22243a;font-size:11px;overflow-wrap:anywhere} .invoice-paper-recipient span{color:#626477;font-size:9px;overflow-wrap:anywhere} .invoice-paper-table-wrap{border:1px solid #e6e6ec;border-radius:7px;overflow:hidden} .invoice-paper-table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:9px} .invoice-paper-table th{padding:8px 6px;text-align:left;background:#eaf7f2;color:#173b35;font-size:9px} .invoice-paper-table td{padding:8px 6px;border-top:1px solid #e6e6ec;color:#414357;vertical-align:top;overflow-wrap:anywhere} .invoice-paper-table th:nth-child(n+3),.invoice-paper-table td:nth-child(n+3){text-align:right} .invoice-paper-table th:first-child,.invoice-paper-table td:first-child{width:8%} .invoice-paper-table th:nth-child(2),.invoice-paper-table td:nth-child(2){width:37%;text-align:left} .invoice-paper-table th:nth-child(3),.invoice-paper-table td:nth-child(3){width:13%} .invoice-paper-table th:nth-child(4),.invoice-paper-table td:nth-child(4){width:20%} .invoice-paper-table th:nth-child(5),.invoice-paper-table td:nth-child(5){width:22%} .invoice-paper-table .invoice-paper-empty{text-align:center!important;padding:24px 10px;color:#85869a} .invoice-paper-empty strong,.invoice-paper-empty span{display:block} .invoice-paper-empty strong{color:#414357;margin-bottom:4px} .invoice-paper-totals{display:grid;gap:8px;margin:12px 0 0 auto;max-width:250px;color:#414357;font-size:10px} .invoice-paper-totals>div{display:flex;justify-content:space-between;gap:10px} .invoice-paper-totals strong{color:#22243a;font-weight:600} .invoice-paper-totals .invoice-preview-grand{padding:9px 10px;border-top:2px solid var(--primary,#5747c7);border-radius:0 0 6px 6px;background:#eaf7f2;color:#075d4e;font-weight:700} .invoice-paper-totals .invoice-preview-grand strong{color:#075d4e;font-size:12px} .invoice-paper-notes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid #e6e6ec} .invoice-paper-notes>div{min-width:0} .invoice-paper-notes>div+div{padding-left:12px;border-left:1px solid #e6e6ec} .invoice-paper-notes p{margin:4px 0 0;color:#626477;font-size:9px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere} .invoice-paper-thanks{margin:16px 0 0;color:#22243a;font-size:10px;font-weight:700} :root[data-theme="dark"] .invoice-preview-paper{background:#fff;color:#202033} @media(max-width:1180px){.invoice-create-layout{grid-template-columns:minmax(0,1fr)}.invoice-preview-panel{position:static;grid-row:auto}} @media(max-width:760px){.invoice-details-grid{grid-template-columns:1fr 1fr}.invoice-details-grid .invoice-customer-field{grid-column:1/-1}.invoice-items-labels{display:none}#invoice-form .invoice-create-items .quotation-item-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;align-items:start!important;padding:12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px}#invoice-form .invoice-create-items .quotation-item-row::before{display:none}#invoice-form .invoice-create-items .quotation-item-field label{display:block;font-size:10px}#invoice-form .invoice-create-items .quotation-item-linked{grid-column:1/-1}#invoice-form .invoice-create-items .quotation-remove-item{grid-column:2;justify-self:end}.invoice-preview-panel{grid-row:auto}.invoice-paper-header{grid-template-columns:42px minmax(0,1fr) auto}.invoice-paper-logo{width:40px;height:40px}} @media(max-width:480px){.invoice-create-form,.invoice-preview-panel{padding:14px}.invoice-details-grid{grid-template-columns:1fr}.invoice-details-grid .invoice-customer-field{grid-column:auto}.invoice-customer-control{align-items:stretch;flex-direction:column}.invoice-customer-control .button{width:100%}.invoice-form-actions{margin:0 -14px -14px;padding:10px 14px}.invoice-form-actions .button{font-size:12px}.invoice-paper-header{grid-template-columns:38px minmax(0,1fr)}.invoice-paper-logo{width:36px;height:36px}.invoice-paper-title{grid-column:1/-1;grid-template-columns:auto 1fr;align-items:center;text-align:left;padding-top:8px}.invoice-paper-title strong{grid-column:1/-1}.invoice-paper-recipient{grid-template-columns:1fr}.invoice-paper-notes{grid-template-columns:1fr}.invoice-paper-notes>div+div{padding:10px 0 0;border-left:0;border-top:1px solid #e6e6ec}} /* Keep the mobile workspace header inside narrow viewports. */ @media (max-width: 760px) { .topbar { min-width: 0; gap: 8px; } .mobile-menu { flex: 0 0 32px; } .breadcrumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .topbar-actions { flex: 0 0 auto; } .topbar-account { flex: 0 0 auto; padding: 4px; } .topbar-account > span:nth-child(2) { display: none; } .topbar-account .avatar { margin-left: 0; } } /* Document entry must remain usable between desktop and phone breakpoints. */ @media screen and (max-width: 1180px) { .invoice-create-layout { grid-template-columns: minmax(0, 1fr); } .invoice-create-layout .invoice-preview-panel { position: static; grid-row: auto; } #invoice-form .invoice-create-items .quotation-item-row, .quotation-create-form .invoice-create-items .quotation-item-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; align-items: start !important; } .invoice-create-items .quotation-item-linked { grid-column: 1 / -1; } .invoice-create-items .quotation-remove-item { grid-column: 2; justify-self: end; } } @media screen and (min-width: 1181px) { .quotation-live-preview-panel { max-height: calc(100dvh - 36px); overflow-y: auto; } } .searchable-select-trigger:disabled { cursor: not-allowed; opacity: .65; } .searchable-select-trigger[aria-invalid="true"] { border-color: var(--red, #dc3545); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* Quotation composer follows the Billing page's structured item grid. */ .quotation-details-grid{grid-template-columns:minmax(150px,.85fr) minmax(150px,.75fr) minmax(220px,1.25fr)} .quotation-details-grid>div{min-width:0} .quotation-create-form .quotation-items-labels, .quotation-create-form .invoice-create-items .quotation-item-row{grid-template-columns:28px minmax(135px,1.1fr) minmax(120px,1.1fr) minmax(64px,.48fr) minmax(90px,.72fr) minmax(84px,.68fr) 30px;gap:8px} .quotation-create-form .invoice-create-items{gap:0;margin:0 0 12px;counter-reset:quotation-line} .quotation-create-form .invoice-create-items .quotation-item-row{align-items:center;padding:8px 10px;border-radius:0;border-width:0 1px 1px;background:var(--card)} .quotation-create-form .invoice-create-items .quotation-item-row:first-child{border-top:1px solid var(--line)} .quotation-create-form .invoice-create-items .quotation-item-row::before{content:counter(quotation-line);counter-increment:quotation-line;color:var(--muted);font-size:11px} .quotation-create-form .invoice-create-items .quotation-item-field label{display:none} .quotation-create-form .invoice-create-items .searchable-select-trigger, .quotation-create-form .invoice-create-items input{min-height:38px;padding:8px 9px;font-size:11px} .quotation-create-form .invoice-create-items .quotation-remove-item{margin:0} .quotation-item-amount{min-width:0;text-align:right;color:var(--ink);font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap} @media(max-width:760px){ .quotation-details-grid{grid-template-columns:1fr 1fr} .quotation-details-grid>div:last-child{grid-column:1/-1} .quotation-create-form .quotation-items-labels{display:none} .quotation-create-form .invoice-create-items .quotation-item-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;align-items:start!important;padding:12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px} .quotation-create-form .invoice-create-items .quotation-item-row::before{display:none} .quotation-create-form .invoice-create-items .quotation-item-field label{display:block;font-size:10px} .quotation-create-form .invoice-create-items .quotation-item-linked{grid-column:1/-1} .quotation-create-form .quotation-item-amount{grid-column:1;text-align:left;align-self:end;padding:9px 0} .quotation-create-form .quotation-remove-item{grid-column:2;justify-self:end} } @media(max-width:480px){.quotation-details-grid{grid-template-columns:1fr}.quotation-details-grid>div:last-child{grid-column:auto}} /* Preserve entered formatting and readable customer documents in every theme. */ .quotation-note { white-space: pre-wrap; overflow-wrap: anywhere; } .quotation-paper-table .quotation-totals td { border: 0; padding: 5px 8px; text-align: right; } .quotation-paper-header > div { min-width: 0; } .quotation-paper-header h2, .quotation-paper-header p, .quotation-recipient strong { overflow-wrap: anywhere; } @media print { body.printing-quotation #quotation-preview .quotation-paper, body.printing-quotation #quotation-preview .quotation-paper h2, body.printing-quotation #quotation-preview .quotation-paper strong, body.printing-quotation #quotation-preview .quotation-paper td { color: #202033 !important; } body.printing-quotation #quotation-preview .quotation-paper p, body.printing-quotation #quotation-preview .quotation-recipient small { color: #555565 !important; } body.printing-quotation #quotation-preview .quotation-paper-table th { background: #f1f3f5 !important; color: #202033 !important; } body.printing-quotation #quotation-preview .quotation-paper-table td { background: #fff !important; } body.printing-quotation #quotation-preview .quotation-paper-table th, body.printing-quotation #quotation-preview .quotation-paper-table td { border-color: #d9dce2 !important; } } .quotation-totals{width:min(100%, 360px);margin:14px 0 0 auto;color:#6f687b;break-inside:avoid;page-break-inside:avoid}.quotation-total-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;padding:5px 8px;text-align:right}.quotation-total-row.grand-total{margin-top:4px;padding-top:10px;border-top:2px solid var(--purple);font-size:12px;font-weight:700;color:#202033} /* Scheduled sales reports: scoped to the existing panel in Settings and Master data. */ .sales-report-panel { margin-top:24px; min-width:0; padding:24px; background:var(--card,#fff); border-radius:14px; box-shadow:0 4px 20px #302a2408; color:var(--ink); } .sales-report-panel .report-heading { display:flex; align-items:center; gap:18px; margin-bottom:24px; } .sales-report-panel h2 { font-size:clamp(20px,2vw,28px); line-height:1.25; letter-spacing:-.6px; margin:0 0 5px; } .report-heading > div { min-width:0; flex:1; } .report-heading p { color:var(--muted); font-size:14px; line-height:1.5; } .report-title-icon,.report-info-icon,.report-empty-icon { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; background:color-mix(in srgb,var(--action-primary) 9%,var(--card,#fff)); color:var(--action-primary); } .report-title-icon { width:62px; height:62px; border-radius:14px; } .report-title-icon .icon { width:29px; height:29px; } .sales-report-panel .button { min-height:44px; font-size:13px; } .report-allocation { display:flex; align-items:center; gap:16px; border:1px solid var(--line); background:color-mix(in srgb,var(--action-primary) 3%,var(--card,#fff)); border-radius:9px; padding:16px 18px; } .report-info-icon { width:44px; height:44px; border-radius:50%; } .report-usage { flex-shrink:0; } .report-usage strong { font-size:17px; } .sales-report-panel small { display:block; color:var(--muted); font-size:12px; line-height:1.5; margin-top:4px; } .report-allocation-warning { display:flex; align-items:center; gap:14px; padding-left:24px; margin-left:8px; border-left:1px solid var(--line); color:var(--action-primary); font-size:13px; font-weight:600; line-height:1.6; } .report-schedule { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:12px 0; padding:12px 0; border:1px solid var(--line); border-radius:9px; background:var(--surface); } .report-schedule-item { display:grid; grid-template-columns:44px minmax(0,1fr); align-items:center; gap:5px 16px; padding:0 18px; min-width:0; } .report-schedule-item + .report-schedule-item { border-left:1px solid var(--line); } .report-schedule-item .report-info-icon { grid-column:1; grid-row:1 / 3; } .report-schedule .report-info-icon { background:color-mix(in srgb,var(--ink) 5%,var(--card,#fff)); color:var(--ink); } .report-schedule .is-disabled { color:var(--action-primary); background:color-mix(in srgb,var(--action-primary) 9%,var(--card,#fff)); } .report-schedule dt { display:contents; } .report-config-label { grid-column:2; color:var(--muted); font-size:10px; text-transform:uppercase; } .report-schedule dd { grid-column:2; font-size:14px; font-weight:650; margin:0; overflow-wrap:anywhere; } .report-calculation { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; background:var(--surface); border:1px solid var(--line); border-radius:8px; color:var(--muted); font-size:12px; line-height:1.6; } .report-calculation p { display:flex; align-items:center; gap:12px; } .report-calculation p:first-child { flex:1 1 420px; } .report-last-run { border-left:1px solid var(--line); padding-left:18px; } .report-run-error { padding:12px 0; color:var(--action-primary); overflow-wrap:anywhere; } .report-search { display:flex; gap:12px; margin:16px 0; } .report-search-input { flex:1; position:relative; min-width:0; } .report-search-input > .icon { position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; } .sales-report-panel .report-search input { padding-left:48px; min-height:46px; font-size:14px; background:var(--control,var(--card,#fff)); color:var(--ink); border-color:var(--line); } .sales-report-panel input::placeholder { color:var(--muted); } .sales-report-panel :is(button,input,summary):focus-visible { outline:2px solid var(--action-primary); outline-offset:3px; } .sales-report-panel .secondary { background:var(--card,#fff); color:var(--muted); border-color:var(--line); } .sales-report-panel .secondary:hover { background:var(--surface); } .sales-report-panel .report-recipients { border:1px solid var(--line); border-radius:9px; } .sales-report-panel table { white-space:normal; table-layout:fixed; } .sales-report-panel th { background:color-mix(in srgb,var(--action-primary) 10%,var(--card,#fff)); color:var(--ink); font-weight:600; border:0; padding:16px 20px; font-size:12px; } .sales-report-panel td { padding:16px 20px; color:var(--ink); border-color:var(--line); font-size:13px; overflow-wrap:anywhere; } .sales-report-panel tbody tr:last-child td { border-bottom:0; } .report-row-actions { display:flex; flex-wrap:wrap; gap:8px; } .sales-report-panel .small-button { font-size:12px; } .report-status { display:inline-flex; align-items:center; gap:7px; padding:4px 9px; border-radius:20px; background:var(--surface); font-size:12px; font-weight:600; } .report-status > span { width:6px; height:6px; border-radius:50%; background:currentColor; } .report-status.is-active { color:var(--green); background:color-mix(in srgb,var(--green) 10%,var(--card,#fff)); } .report-status.is-inactive { color:var(--muted); } .report-empty { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; text-align:center; min-height:180px; padding:12px; } .report-empty-icon { width:70px; height:70px; border-radius:50%; margin-bottom:4px; color:var(--muted); } .report-empty-icon .icon { width:32px; height:32px; } .report-empty h3 { font-size:18px; color:var(--ink); } .report-empty p { color:var(--muted); font-size:13px; line-height:1.6; } .report-history { margin-top:12px; border:1px solid var(--line); border-radius:9px; } .report-history summary { cursor:pointer; padding:17px 18px; font-size:15px; font-weight:550; } .report-history summary .icon { margin:0 12px; color:var(--muted); } .report-history-body { padding:0 16px 16px; } .report-history-body > p { color:var(--muted); font-size:12px; line-height:1.6; margin:0 0 16px; } .report-controls { margin-top:16px; border-top:1px solid var(--line); } .report-controls summary { cursor:pointer; padding:16px 0; font-weight:600; } .report-controls form { max-width:660px; } .sales-report-panel .dialog-actions { flex-wrap:wrap; } .master-data-row { flex-wrap:wrap; } .master-data-row>span:first-child { min-width:130px; overflow-wrap:anywhere; } .master-data-actions { display:flex; flex-wrap:wrap; gap:6px; } .master-data-actions .button { margin-left:0; } .master-data-details { display:grid; grid-template-columns:110px minmax(0,1fr); gap:12px 16px; padding:18px 0; } .master-data-details dt { color:var(--muted); font-size:12px; } .master-data-details dd { margin:0; overflow-wrap:anywhere; } @media(max-width:560px) { .master-data-row .master-data-actions { width:100%; } .master-data-details { grid-template-columns:85px minmax(0,1fr); } } /* Bounded master-data browser: persistent controls, independently scrolling rows. */ dialog.master-data-dialog{width:calc(100vw - 48px);max-width:1040px;max-height:calc(100dvh - 48px);height:min(820px,calc(100dvh - 48px));padding:0;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:var(--card,#fff);color:var(--ink);box-shadow:var(--shadow-card,0 24px 90px #24253d30)} dialog.master-data-dialog[open]{display:flex;flex-direction:column} .master-data-dialog .modal-close{top:20px;right:20px;z-index:4;color:var(--muted)} .master-data-browser{display:flex;flex-direction:column;min-height:0;width:100%;height:100%;overflow:hidden} .master-browser-header{display:flex;align-items:flex-start;gap:16px;padding:30px 64px 22px 32px;flex-shrink:0} .master-browser-header .module-icon{width:48px;height:48px;border-radius:13px;background:var(--purple-soft);color:var(--action-primary,var(--purple));flex-shrink:0} .master-browser-header h2{margin:1px 0 7px;font-size:24px;line-height:1.25;font-weight:700;letter-spacing:-.6px;color:var(--ink)} .master-browser-header p{max-width:690px;font-size:13px;line-height:1.65;color:var(--muted)} .master-browser-toolbar{display:flex;align-items:center;gap:12px;padding:0 32px 20px;flex-shrink:0} .master-browser-filters{display:flex;align-items:center;gap:12px;flex:1;min-width:0} .master-search{position:relative;flex:1;min-width:150px} .master-search input{height:46px;width:100%;margin:0;padding:10px 40px;border:1px solid var(--control-border,var(--line));border-radius:11px;background:var(--control,var(--card,#fff));color:var(--ink);font-size:13px} .master-search input::-webkit-search-cancel-button{display:none} .master-search-icon{position:absolute;left:13px;top:13px;color:var(--muted);pointer-events:none} .master-search-icon .icon{width:19px;height:19px} .master-search-clear{position:absolute;right:7px;top:7px;width:31px;height:31px;border-radius:6px;background:transparent;color:var(--muted);font-size:21px} .master-search-clear[hidden]{display:none} .master-browser-filters>select{width:148px;min-width:125px;height:46px;margin:0;padding:10px 13px;border:1px solid var(--control-border,var(--line));border-radius:11px;background:var(--control,var(--card,#fff));color:var(--ink);font-size:13px} .master-browser-add{min-height:46px;white-space:nowrap;padding:10px 18px;font-size:13px;gap:8px} .master-browser-scroll{position:relative;flex:1;min-height:180px;margin:0 32px;overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--card,#fff);overscroll-behavior:contain} .master-browser-table{width:100%;min-width:650px;border-collapse:separate;border-spacing:0;table-layout:auto;text-align:left;font-size:13px;color:var(--ink)} .master-browser-table caption{caption-side:top} .master-browser-table th{position:sticky;top:0;z-index:2;padding:14px 16px;background:var(--surface);border-bottom:1px solid var(--line);text-align:left;white-space:nowrap;font-weight:650;font-size:12px;color:var(--ink)} .master-browser-table td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5} .master-browser-table tbody tr:last-child td{border-bottom:0} .master-browser-table tbody tr:hover{background:var(--hover,var(--surface))} .master-browser-table .master-index{width:48px;color:var(--muted);font-variant-numeric:tabular-nums} .master-browser-table .master-name{min-width:180px;font-weight:550;overflow-wrap:anywhere} .master-name small{display:block;margin-top:4px;color:var(--muted);font-size:11px;font-weight:400} .master-actions-column{min-width:155px} .master-sort{display:flex;align-items:center;gap:7px;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left} .master-sort span{font-size:11px;color:var(--muted)} .master-browser-table th[aria-sort]:not([aria-sort="none"]) .master-sort span{color:var(--action-primary,var(--purple))} .master-status{display:inline-flex;align-items:center;gap:7px;padding:4px 9px;border-radius:9px;font-size:11px;font-weight:650;white-space:nowrap} .master-status>span{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:currentColor} .master-status.is-active{color:var(--green);background:var(--surface);background:color-mix(in srgb,var(--green) 13%,transparent)} .master-status.is-inactive{color:var(--muted);background:var(--surface)} .master-table-actions{display:flex;align-items:flex-start;flex-wrap:wrap;gap:7px;min-width:116px} .master-table-actions .button{min-height:32px;padding:6px 10px;font-size:11px;margin:0;white-space:nowrap} .master-row-menu{min-width:32px} .master-row-menu summary{display:flex;align-items:center;justify-content:center;min-height:32px;min-width:33px;list-style:none;cursor:pointer;border:1px solid var(--line);border-radius:8px;background:var(--card,#fff);color:var(--ink);font-size:10px;letter-spacing:1px} .master-row-menu summary::-webkit-details-marker{display:none} .master-row-menu[open]{flex-basis:100%;max-width:160px} .master-row-menu-items{display:grid;gap:5px;margin-top:5px;padding:6px;border:1px solid var(--line);border-radius:8px;background:var(--card,#fff)} .master-row-menu-items .button{justify-content:flex-start} .master-browser-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:270px;padding:30px 24px;text-align:center} .master-browser-state h3{font-size:16px;color:var(--ink)} .master-browser-state p{max-width:420px;line-height:1.7;font-size:13px;color:var(--muted)} .master-browser-state .button{margin-top:4px} .master-browser-table.is-loading tbody{opacity:.55} .master-refresh-status{position:sticky;top:0;left:0;z-index:3;padding:7px 14px;background:var(--purple-soft);color:var(--ink);font-size:11px} .master-browser-footer{display:grid;grid-template-columns:minmax(180px,1fr) auto auto;align-items:center;gap:16px;padding:20px 32px;flex-shrink:0;background:var(--card,#fff)} .master-result-count{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums} .master-browser-paging{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px} .master-browser-paging select{width:59px;height:35px;margin:0;padding:5px 7px;font-size:11px;border:1px solid var(--line);border-radius:8px;background:var(--control,var(--card,#fff));color:var(--ink)} .master-browser-paging nav{display:flex;align-items:center;gap:5px;max-width:100%;overflow:auto} .master-browser-paging nav button{display:grid;place-items:center;min-width:34px;height:35px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:var(--card,#fff);color:var(--ink);font-size:12px;flex-shrink:0} .master-browser-paging nav button[aria-current="page"]{background:var(--action-primary,var(--purple));border-color:var(--action-primary,var(--purple));color:var(--action-primary-text,#fff)} .master-page-gap{color:var(--muted);font-size:12px} .master-browser-close{min-height:41px;min-width:88px;padding:10px 16px} .master-data-dialog :is(button,input,select,summary):focus-visible{outline:3px solid var(--focus-ring,var(--purple-soft));outline-offset:2px} @media(max-width:760px){dialog.master-data-dialog{width:calc(100vw - 24px);max-height:calc(100dvh - 24px);height:calc(100dvh - 24px);border-radius:18px}.master-browser-header{padding:23px 52px 18px 22px;gap:12px}.master-browser-header h2{font-size:21px}.master-browser-toolbar{padding:0 22px 17px;gap:9px}.master-browser-filters{gap:9px}.master-browser-filters>select{width:125px;min-width:110px}.master-browser-scroll{margin:0 22px}.master-browser-footer{padding:17px 22px;grid-template-columns:1fr auto;gap:12px}.master-browser-paging{grid-column:1/-1;grid-row:2;justify-content:space-between}.master-browser-close{grid-column:2;grid-row:1}.master-browser-table th,.master-browser-table td{padding:12px}} @media(max-width:520px){.master-data-dialog .modal-close{top:12px;right:12px}.master-browser-header{padding:21px 44px 17px 17px;gap:10px}.master-browser-header .module-icon{width:38px;height:38px;border-radius:10px}.master-browser-header h2{font-size:18px;letter-spacing:-.3px}.master-browser-header p{font-size:11px;line-height:1.6}.master-browser-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;padding:0 17px 15px;gap:9px}.master-browser-filters{display:contents}.master-search{grid-column:1/-1;min-width:0}.master-browser-filters>select{width:100%;height:42px;min-width:0}.master-browser-add{min-height:42px;padding:9px 12px;font-size:11px}.master-browser-scroll{margin:0 17px;min-height:120px}.master-browser-footer{padding:15px 17px;gap:10px}.master-result-count{font-size:10px}.master-browser-close{min-width:68px;min-height:36px;font-size:11px}.master-browser-paging nav button{min-width:28px;height:32px;font-size:11px;padding:0 6px}.master-browser-paging nav{gap:4px}.master-browser-state{min-height:220px;padding:24px 18px}} @media (max-width:1100px) { .report-schedule { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 0; } .report-schedule-item:nth-child(3) { border-left:0; } .report-allocation { flex-wrap:wrap; } .report-allocation-warning { flex:1 1 100%; margin:0; padding:12px 0 0; border-left:0; border-top:1px solid var(--line); } } @media (max-width:760px) { .sales-report-panel { padding:16px; } .sales-report-panel .report-heading { flex-wrap:wrap; gap:12px; } .report-title-icon { width:48px; height:48px; border-radius:12px; } .report-heading p { font-size:12px; } .report-heading > .button { width:100%; } .report-schedule-item { grid-template-columns:32px minmax(0,1fr); padding:0 12px; gap:5px 10px; } .report-schedule dd { font-size:12px; } .report-schedule .report-info-icon { width:32px; height:32px; } .report-usage strong { font-size:15px; } .report-allocation { padding:12px; gap:10px; } .report-calculation { padding:12px; } .report-last-run { padding:0; border:0; } .report-search { flex-wrap:wrap; gap:8px; } .report-search-input { flex-basis:100%; } .report-search > .button { flex:1; } #main-content .sales-report-panel .report-empty-row { display:block; border:0; padding:0; background:none; } #main-content .sales-report-panel .report-empty-row td > * { max-width:100%; } #main-content .sales-report-panel .report-row-actions { max-width:100%; } .report-history summary { font-size:13px; padding:16px 10px; } .report-history summary .icon { margin:0 6px; } .report-history-body { padding:0 8px 8px; } }