.logo-box + .brand-text{display:none!important}.logo-box{height:48px!important;max-width:200px;background:#fff!important;border-radius:8px;padding:3px 8px}.logo-box img{object-fit:contain!important}img[src="/media/salemax-logo.png"]{object-fit:contain!important;background:#fff;border-radius:8px} .MuiDrawer-paper img[src="/media/salemax-logo.png"]{max-width:180px} @media(max-width:600px){.logo-box{height:38px!important;max-width:150px}} /* Consistent, accessible controls for 7Network's source-maintained native forms. */ #root form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), #root form select, #root form textarea{box-sizing:border-box;max-width:100%;font:inherit;color:#17212f} #root form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), #root form select, #root form textarea{border-radius:9px} #root form input:focus-visible, #root form select:focus-visible, #root form textarea:focus-visible, #root form button:focus-visible{outline:3px solid #1768d4;outline-offset:2px} #root form input[type="checkbox"],#root form input[type="radio"]{accent-color:#1768d4} #root form button{max-width:100%;min-height:40px;border-radius:9px} #root form :disabled{cursor:not-allowed} #sx-finance-screen #sx-invoice-create-workspace:not([hidden]){position:fixed!important;z-index:1600!important;inset:0!important;display:grid!important;place-items:center;padding:clamp(12px,3vw,32px);box-sizing:border-box;background:rgba(16,24,40,.58);backdrop-filter:blur(4px)} #sx-finance-screen #sx-invoice-create-workspace[hidden],#sx-finance-screen [hidden]{display:none!important} #sx-finance-screen #sx-invoice-create-workspace .sx-invoice-create{--sx-invoice-dialog-padding:clamp(18px,3vw,32px);width:min(100%,960px);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;margin:0;padding:var(--sx-invoice-dialog-padding);border:1px solid #e4e7ec;border-radius:20px;background:#fff;box-shadow:0 28px 80px rgba(16,24,40,.25)} #sx-finance-screen #sx-invoice-create-workspace .sx-invoice-create[role="dialog"]:focus{outline:none} #sx-finance-screen #sx-generator-invoice{display:grid;gap:18px} #sx-finance-screen #sx-generator-invoice .sx-invoice-submit-bar{position:sticky;bottom:calc(-1 * var(--sx-invoice-dialog-padding));z-index:3;display:grid;gap:8px;margin:0 calc(-1 * var(--sx-invoice-dialog-padding)) calc(-1 * var(--sx-invoice-dialog-padding));padding:12px var(--sx-invoice-dialog-padding) var(--sx-invoice-dialog-padding);border-top:1px solid #e4e7ec;background:rgba(255,255,255,.97);backdrop-filter:blur(10px)} #sx-finance-screen #sx-generator-invoice .sx-invoice-submit-bar>button[type="submit"]{width:100%;min-height:46px;font-weight:700;box-shadow:0 4px 12px rgba(23,104,212,.16)} #sx-finance-screen #sx-generator-invoice fieldset{display:grid;gap:14px;min-width:0;margin:0;padding:18px;border:1px solid #e4e7ec;border-radius:14px;background:#fff} #sx-finance-screen #sx-generator-invoice legend{padding:0 8px;font-weight:700;color:#344054} #sx-finance-screen #sx-generator-invoice .actions label{display:flex;align-items:center;gap:10px;min-height:50px;padding:10px 14px;border:1px solid #e4e7ec;border-radius:12px;background:#f8fafc;cursor:pointer;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease} #sx-finance-screen #sx-generator-invoice .actions label:has(input:checked){border-color:#d88ca7;background:#fff5f8;box-shadow:0 0 0 2px rgba(23,104,212,.08)} #sx-finance-screen #sx-generator-invoice .actions label:focus-within{outline:2px solid #1768d4;outline-offset:2px} #sx-finance-screen #sx-generator-invoice .actions input[type="radio"]{flex:0 0 18px;width:18px;height:18px;min-height:18px;margin:0;padding:0} #sx-finance-screen #sx-generator-invoice .sx-invoice-customer-fields{margin-top:12px} #sx-finance-screen #sx-reminder-settings-form .sx-reminder-offset-picker{grid-column:1/-1;display:grid;gap:10px;min-width:0;padding:16px;border:1px solid #e4e7ec;border-radius:14px;background:#f8fafc} #sx-finance-screen #sx-reminder-settings-form .sx-reminder-offset-picker h4{margin:0;color:#344054} #sx-finance-screen #sx-reminder-settings-form .sx-reminder-offset-chips{display:flex;flex-wrap:wrap;gap:8px;min-height:34px;align-items:center} #sx-finance-screen #sx-reminder-settings-form .sx-reminder-offset-chip{display:inline-flex;align-items:center;gap:8px;padding:5px 8px 5px 12px;border:1px solid #b3d6f8;border-radius:999px;background:#f4f8ff;color:#11385e;font-weight:600} #sx-finance-screen #sx-reminder-settings-form .sx-reminder-offset-chip button{display:grid;place-items:center;width:24px;min-height:24px;padding:0;border:0;border-radius:50%;background:#e1efff;color:#11385e;font-size:18px;line-height:1} #sx-finance-screen #sx-reminder-settings-form [data-offset-choice]{max-width:460px} #sx-finance-screen #sx-generator-invoice [hidden]{display:none!important} @media(max-width:600px){#sx-finance-screen #sx-invoice-create-workspace:not([hidden]){padding:10px}#sx-finance-screen #sx-invoice-create-workspace .sx-invoice-create{--sx-invoice-dialog-padding:16px;max-height:calc(100dvh - 20px);padding:var(--sx-invoice-dialog-padding);border-radius:14px}#sx-finance-screen #sx-generator-invoice fieldset{padding:14px}} @media(max-width:360px),(max-height:700px){#sx-finance-screen #sx-generator-invoice .sx-invoice-submit-bar{position:static;bottom:auto;z-index:auto}} /* Keep saved invoice plans compact and legible inside the scrollable invoice dialog. */ #sx-finance-screen #sx-generator-settings{display:grid;gap:12px;min-width:0} #sx-finance-screen #sx-generator-settings>.notice{margin:0;padding:12px 14px;border-radius:10px} #sx-finance-screen #sx-generator-settings>label.full{display:grid;gap:6px;min-width:0} #sx-finance-screen #sx-generator-settings>label.full textarea{width:100%;min-height:76px;resize:vertical} #sx-finance-screen #sx-generator-settings h4{margin:4px 0 0;color:#344054} #sx-finance-screen #sx-generator-plans{display:grid;gap:10px;min-width:0} #sx-finance-screen #sx-generator-plans .sx-invoice-plan{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(100px,.7fr) minmax(130px,.8fr) auto;align-items:end;gap:10px;min-width:0;padding:12px;border:1px solid #e4e7ec;border-radius:12px;background:#f8fafc} #sx-finance-screen #sx-generator-plans .sx-invoice-plan label{display:grid;gap:6px;min-width:0;color:#344054;font-size:13px;font-weight:600} #sx-finance-screen #sx-generator-plans .sx-invoice-plan input{box-sizing:border-box;width:100%;min-width:0} #sx-finance-screen #sx-generator-plans .sx-invoice-plan [data-remove-plan]{width:auto;min-width:76px;min-height:40px;padding:8px 12px;align-self:end} #sx-finance-screen #sx-generator-settings>#sx-generator-add-plan{justify-self:start;min-height:40px} #sx-finance-screen #sx-generator-settings>button.primary{justify-self:end;min-height:42px} /* Keep the invoice register heading and its primary/secondary actions readable on phones. */ @media(max-width:760px){ #sx-finance-screen #sx-invoice-register>.toolbar{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:10px} #sx-finance-screen #sx-invoice-register>.toolbar>div{min-width:0} #sx-finance-screen #sx-invoice-register>.toolbar>.actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%} #sx-finance-screen #sx-invoice-register>.toolbar>.actions>#sx-invoice-create{grid-column:1/-1} } /* Preserve readable Phonebook labels on phones and keep its wide catalogue inside the grid scroller. */ @media(max-width:760px){ #root .MuiDataGrid-root:has(.MuiDataGrid-columnHeader[data-field="phonebook_name"]) .MuiDataGrid-columnHeader[data-field="name"], #root .MuiDataGrid-root:has(.MuiDataGrid-columnHeader[data-field="phonebook_name"]) .MuiDataGrid-cell[data-field="name"]{flex:0 0 120px!important;width:120px!important;min-width:120px!important;max-width:120px!important} #root .MuiDataGrid-root:has(.MuiDataGrid-columnHeader[data-field="phonebook_name"]) .MuiDataGrid-columnHeader[data-field="phonebook_name"], #root .MuiDataGrid-root:has(.MuiDataGrid-columnHeader[data-field="phonebook_name"]) .MuiDataGrid-cell[data-field="phonebook_name"]{flex:0 0 140px!important;width:140px!important;min-width:140px!important;max-width:140px!important} #root .MuiDataGrid-root:has(.MuiDataGrid-columnHeader[data-field="phonebook_name"]) .MuiDataGrid-columnHeader[data-field="mobile"], #root .MuiDataGrid-root:has(.MuiDataGrid-columnHeader[data-field="phonebook_name"]) .MuiDataGrid-cell[data-field="mobile"]{flex:0 0 160px!important;width:160px!important;min-width:160px!important;max-width:160px!important} #root .MuiDataGrid-root:has(.MuiDataGrid-columnHeader[data-field="phonebook_name"]) .MuiDataGrid-columnHeader[data-field^="var"], #root .MuiDataGrid-root:has(.MuiDataGrid-columnHeader[data-field="phonebook_name"]) .MuiDataGrid-cell[data-field^="var"]{flex:0 0 110px!important;width:110px!important;min-width:110px!important;max-width:110px!important} #root .MuiDataGrid-root:has(.MuiDataGrid-columnHeader[data-field="phonebook_name"]) .MuiDataGrid-columnHeader[data-field="createdAt"], #root .MuiDataGrid-root:has(.MuiDataGrid-columnHeader[data-field="phonebook_name"]) .MuiDataGrid-cell[data-field="createdAt"]{flex:0 0 120px!important;width:120px!important;min-width:120px!important;max-width:120px!important} #root .MuiDataGrid-root:has(.MuiDataGrid-columnHeader[data-field="phonebook_name"]) .MuiDataGrid-columnHeadersInner, #root .MuiDataGrid-root:has(.MuiDataGrid-columnHeader[data-field="phonebook_name"]) .MuiDataGrid-virtualScrollerContent, #root .MuiDataGrid-root:has(.MuiDataGrid-columnHeader[data-field="phonebook_name"]) .MuiDataGrid-virtualScrollerRenderZone, #root .MuiDataGrid-root:has(.MuiDataGrid-columnHeader[data-field="phonebook_name"]) .MuiDataGrid-row{width:1140px!important;min-width:1140px!important} } @media(max-width:760px){#sx-finance-screen #sx-generator-plans .sx-invoice-plan{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}#sx-finance-screen #sx-generator-plans .sx-invoice-plan>label:first-child{grid-column:1/-1}#sx-finance-screen #sx-generator-plans .sx-invoice-plan [data-remove-plan]{grid-column:1/-1;justify-self:end;min-width:96px;min-height:40px}#sx-finance-screen #sx-generator-settings>#sx-generator-add-plan,#sx-finance-screen #sx-generator-settings>button.primary{grid-column:1/-1;justify-self:stretch;width:100%;min-height:44px}#sx-finance-screen #sx-aging-filter label:has(input[name="q"]){flex:1 0 100%;min-width:0}#sx-finance-screen #sx-aging-filter label:has(input[name="q"]) input{width:100%}}