.legacy-commercial-shell{width:min(1220px,100%);margin:0 auto;color:#111;font-family:Tahoma,Arial,sans-serif}.legacy-original-document-ui[hidden]{display:none!important}.legacy-commercial-tabs{display:flex;justify-content:center;border:1px solid #9aa3a8;background:#eef2f4;margin-bottom:7px;padding:5px}.legacy-commercial-tabs button{min-width:210px;height:34px;border:1px solid #7f9099;background:#fff;font-weight:900}.legacy-commercial-tabs button.active{background:#0b668f;color:#fff}.legacy-document-toolbar,.legacy-archive-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;background:#f4f4f3;border:1px solid #bec5c9;padding:6px;margin-bottom:7px}.legacy-document-toolbar button,.legacy-archive-actions button{height:35px;min-width:100px;border:1px solid #7d8b93;background:#fff;font-weight:900}.legacy-document-toolbar .success,.legacy-commercial-shade .success{color:#075c35;background:#e5f7ed}.legacy-document-toolbar .danger,.legacy-archive-actions .danger{color:#a50d15;background:#fff0f0}.legacy-invoice-paper,.legacy-archive-screen{background:#fff;border:1px solid #6e777c;padding:10px 16px 16px;min-height:610px}.legacy-invoice-header>img,.legacy-archive-screen>header img{display:block;width:100%;max-height:102px;object-fit:contain}.legacy-invoice-head-grid{display:grid;grid-template-columns:1fr 190px 1fr;align-items:center;gap:16px;margin:5px 0 8px}.legacy-invoice-head-grid>label{justify-self:start;display:grid;grid-template-columns:75px 145px;gap:6px;align-items:center}.legacy-invoice-head-grid label span,.legacy-invoice-meta span{font-weight:900;white-space:nowrap}.legacy-invoice-head-grid input,.legacy-invoice-head-grid select,.legacy-invoice-meta input,.legacy-invoice-meta select{width:100%;height:31px;border:1px solid #667b85;background:#c9ecee;padding:3px 7px}.legacy-invoice-head-grid>strong{display:grid;place-items:center;min-height:43px;border-radius:7px;background:#0a628c;color:#fff;font-size:21px}.legacy-doc-number{justify-self:end;display:grid;gap:5px}.legacy-doc-number label{display:grid;grid-template-columns:92px 160px;gap:7px;align-items:center}.legacy-invoice-meta{display:grid;grid-template-columns:minmax(300px,1.5fr) minmax(210px,.7fr) minmax(220px,.8fr);gap:12px;padding:7px;background:#f6f7f7;border:1px solid #c3c9cc;margin-bottom:7px}.legacy-invoice-meta label{display:grid;grid-template-columns:90px 1fr;gap:7px;align-items:center}.legacy-lines-wrap{border:1px solid #657078;overflow:auto}.legacy-lines{border-collapse:collapse;table-layout:fixed;width:100%;min-width:920px}.legacy-lines th{height:34px;background:#667179;color:#fff;border:1px solid #8e989e;padding:5px;text-align:center}.legacy-lines td{height:60px;border:1px solid #9fa8ad;padding:5px;vertical-align:middle}.legacy-lines th:nth-child(1),.legacy-lines td:nth-child(1){width:43px;text-align:center}.legacy-lines th:nth-child(2),.legacy-lines td:nth-child(2){width:auto}.legacy-lines th:nth-child(3),.legacy-lines td:nth-child(3){width:85px}.legacy-lines th:nth-child(4),.legacy-lines td:nth-child(4){width:90px}.legacy-lines th:nth-child(5),.legacy-lines td:nth-child(5){width:108px}.legacy-lines th:nth-child(6),.legacy-lines td:nth-child(6){width:120px}.legacy-lines th:nth-child(7),.legacy-lines td:nth-child(7){width:48px}.legacy-lines input,.legacy-lines textarea{width:100%;min-width:0;border:1px solid #9aa7ad;background:#fff;min-height:33px;padding:5px;text-align:center}.legacy-lines textarea{text-align:right;resize:vertical;min-height:49px;line-height:1.5}.legacy-lines output{display:grid;place-items:center;width:100%;min-height:34px;background:#f5f8f9;border:1px solid #87949a;font-weight:900}.legacy-line-description{display:grid;grid-template-columns:72px minmax(0,1fr);gap:6px}.legacy-line-tools{display:grid;grid-template-columns:1fr 1fr;gap:4px;align-content:center}.legacy-line-tools button{width:32px;height:32px;border:1px solid #376e89;border-radius:4px;padding:0;color:#fff;background:#09658f;font-weight:900}.legacy-line-tools button:last-child{background:#0da253}.legacy-remove-line{display:grid;place-items:center;width:29px;height:29px;margin:auto;padding:0;border:1px solid #bf3036;color:#fff;background:#de2028}.legacy-add-line{display:block;margin:7px 0 0 auto;min-width:115px;height:34px;border:1px solid #075878;background:#08658f;color:#fff;font-weight:900}.legacy-document-bottom{display:grid;grid-template-columns:430px 1fr;gap:18px;align-items:start;margin-top:10px}.legacy-totals{border:1px solid #a18e8e}.legacy-totals label{display:grid;grid-template-columns:1fr 155px;align-items:center;min-height:37px;background:#f8eeee;border-bottom:1px solid #bea9a9}.legacy-totals label>span{padding:6px 10px;font-weight:900}.legacy-totals input,.legacy-totals output{display:grid;place-items:center;width:100%;height:36px;border:0;border-inline-start:1px solid #bea9a9;background:#fff;padding:5px;text-align:center;font-weight:900}.legacy-totals .grand{background:#f6dada;color:#a20d14;font-size:15px}.legacy-totals>b{display:block;padding:8px;color:#086292}.legacy-notes{display:grid;grid-template-columns:80px 1fr;gap:8px;align-items:start;font-weight:900}.legacy-notes textarea{min-height:150px;border:1px solid #89979e;padding:8px;resize:vertical;line-height:1.7}.legacy-archive-screen>header h2{width:min(620px,100%);margin:5px auto 10px;border:1px solid #737d82;text-align:center;padding:6px}.legacy-archive-filter{display:grid;grid-template-columns:1fr 300px;gap:12px;width:min(900px,100%);margin:auto;padding:10px;border:1px solid #c4cbcf;background:#f2f4f5}.legacy-archive-filter label{display:grid;grid-template-columns:70px 1fr;gap:7px;align-items:center;font-weight:900}.legacy-archive-filter input,.legacy-archive-filter select{height:32px;border:1px solid #75868e;background:#e9f6e3;padding:4px 8px}.legacy-archive-count{text-align:left;padding:5px 2px;font-weight:800}.legacy-archive-table-wrap{overflow:auto;border:1px solid #8c979c}.legacy-archive-table{width:100%;min-width:860px;border-collapse:collapse}.legacy-archive-table th,.legacy-archive-table td{height:31px;border:1px solid #a2abb0;padding:5px 7px;text-align:center}.legacy-archive-table th{background:#657078;color:#fff}.legacy-archive-table tbody tr{cursor:pointer}.legacy-archive-table tbody tr:nth-child(even){background:#f7f8f8}.legacy-archive-table tbody tr:hover,.legacy-archive-table tbody tr.selected{background:#d9eef8}.legacy-archive-table th:nth-child(5),.legacy-archive-table td:nth-child(5){text-align:right;width:28%}.legacy-empty{height:80px!important;color:#667}.legacy-commercial-toast{position:fixed;z-index:3000;bottom:42px;left:22px;max-width:430px;padding:11px 16px;border:1px solid #4a876d;background:#e5f8ee;color:#075f39;font-weight:900;opacity:0;transform:translateY(15px);transition:.18s;pointer-events:none}.legacy-commercial-toast[data-type=error]{border-color:#bb5358;background:#ffe5e6;color:#97151b}.legacy-commercial-toast.show{opacity:1;transform:none}.legacy-commercial-shade{position:fixed;z-index:2500;inset:0;display:grid;place-items:center;padding:18px;background:#071829b8}.legacy-commercial-shade>section{width:min(820px,100%);max-height:calc(100vh - 36px);overflow:auto;background:#fff;border:1px solid #68777f;box-shadow:0 18px 55px #0006}.legacy-commercial-shade>section>header{display:flex;align-items:center;border-bottom:1px solid #a8b1b6;background:#f4f8fa;padding:7px 12px}.legacy-commercial-shade h2{flex:1;text-align:center;margin:0;font-size:19px}.legacy-commercial-shade header button{width:32px;height:32px;border:0;background:transparent;color:#d91920;font-size:22px}.legacy-commercial-shade>section>div{padding:13px}.legacy-picker-filters{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:9px}.legacy-picker-filters label,.legacy-dialog-field{display:grid;grid-template-columns:90px 1fr;gap:7px;align-items:center;font-weight:900}.legacy-picker-filters input,.legacy-picker-filters select,.legacy-dialog-field input,.legacy-dialog-field select{height:34px;border:1px solid #6e858f;background:#d7eff0;padding:4px 8px}.legacy-picker-table{max-height:430px;overflow:auto}.legacy-picker-table table{width:100%;border-collapse:collapse}.legacy-picker-table th,.legacy-picker-table td{border:1px solid #9ca6ab;padding:7px}.legacy-picker-table th{background:#687279;color:#fff}.legacy-picker-table tr{cursor:pointer}.legacy-picker-table tr:hover{background:#e4f4f8}.legacy-transfer-name{border:1px solid #b9c8d1;background:#edf6fb;padding:10px;margin-bottom:10px}.legacy-transfer-name span,.legacy-transfer-name strong{display:block}.legacy-transfer-name strong{color:#075f85;margin-top:4px}.legacy-dialog-field{margin:9px 0}.legacy-commercial-shade footer{display:flex;justify-content:flex-end;gap:7px;border-top:1px solid #ccd4d8;margin-top:12px;padding-top:10px}.legacy-commercial-shade footer button{min-width:120px;height:35px;border:1px solid #637983;background:#eef4f7;font-weight:900} @media(max-width:850px){.legacy-invoice-head-grid{grid-template-columns:1fr}.legacy-invoice-head-grid>label,.legacy-invoice-head-grid>strong,.legacy-doc-number{justify-self:stretch}.legacy-invoice-meta,.legacy-document-bottom,.legacy-archive-filter{grid-template-columns:1fr}.legacy-document-toolbar button{min-width:92px}.legacy-invoice-paper{padding:7px}.legacy-picker-filters{grid-template-columns:1fr}} @media print{.app-header,.status-bar,.no-print,.legacy-commercial-tabs,.legacy-original-document-ui,.legacy-commercial-toast{display:none!important}.app-workspace,.page-container,.legacy-commercial-shell{width:100%!important;max-width:none!important;margin:0!important;padding:0!important;background:#fff!important}.legacy-invoice-paper,.legacy-archive-screen{border:1px solid #555;padding:5mm;min-height:275mm}.legacy-invoice-header>img,.legacy-archive-screen>header img{max-height:24mm}.legacy-lines-wrap,.legacy-archive-table-wrap{overflow:visible}.legacy-lines,.legacy-archive-table{min-width:0;font-size:8.5pt}.legacy-lines th,.legacy-lines td,.legacy-archive-table th,.legacy-archive-table td{padding:2px;height:auto}.legacy-lines th:nth-child(1),.legacy-lines td:nth-child(1){width:5%}.legacy-lines th:nth-child(2),.legacy-lines td:nth-child(2){width:54%}.legacy-lines th:nth-child(3),.legacy-lines td:nth-child(3){width:8%}.legacy-lines th:nth-child(4),.legacy-lines td:nth-child(4){width:8%}.legacy-lines th:nth-child(5),.legacy-lines td:nth-child(5){width:11%}.legacy-lines th:nth-child(6),.legacy-lines td:nth-child(6){width:14%}.legacy-lines input,.legacy-lines textarea{border:0!important;background:transparent!important;padding:0;min-height:0;resize:none}.legacy-lines output{border:0;background:transparent;min-height:0}.legacy-document-bottom{grid-template-columns:70mm 1fr;margin-top:3mm}.legacy-notes textarea{border:0;min-height:42mm}.legacy-invoice-meta label:last-child{display:none}.legacy-invoice-head-grid{margin-top:1mm}.legacy-archive-actions{display:none!important}@page{size:A4;margin:8mm}} .document-page:not(.legacy-commercial-mounted)>*{visibility:hidden!important}.document-page:not(.legacy-commercial-mounted){min-height:610px}.legacy-commercial-shell>[hidden]{display:none!important} /* 1.0.3 / GreenEco 438 الفاتورة وعرض السعر: نقل أزرار الصف الأول الفعلي إلى عمود جانبي يمين فقط. لا تغيير في محتوى الفاتورة أو الحقول أو الجداول أو وظائف الأزرار. */ .legacy-commercial-shell .legacy-document-screen{ display:flex !important; flex-direction:row !important; align-items:flex-start !important; gap:8px !important; width:100% !important; min-width:0 !important; } .legacy-commercial-shell .legacy-document-screen > .legacy-document-toolbar{ flex:0 0 165px !important; width:165px !important; min-width:165px !important; display:flex !important; flex-direction:column !important; flex-wrap:nowrap !important; justify-content:flex-start !important; align-items:stretch !important; gap:4px !important; margin:0 !important; padding:5px !important; background:#f4f4f3 !important; border:1px solid #bec5c9 !important; box-sizing:border-box !important; } .legacy-commercial-shell .legacy-document-screen > .legacy-document-toolbar button{ width:100% !important; min-width:0 !important; height:35px !important; margin:0 !important; padding:4px 8px !important; display:flex !important; align-items:center !important; justify-content:flex-start !important; white-space:nowrap !important; } .legacy-commercial-shell .legacy-document-screen > .legacy-invoice-paper{ flex:1 1 auto !important; width:auto !important; min-width:0 !important; margin:0 !important; } /* الشاشات الصغيرة: يبقى العمود يمينًا مع تقليل عرضه فقط. */ @media (max-width:900px){ .legacy-commercial-shell .legacy-document-screen > .legacy-document-toolbar{ flex-basis:145px !important; width:145px !important; min-width:145px !important; } } /* 1.0.4 / GreenEco 439 Print fix: hide invoice/quotation command sidebar completely when printing. */ @media print{ .legacy-commercial-shell .legacy-document-screen{ display:block !important; width:100% !important; } .legacy-commercial-shell .legacy-document-screen > .legacy-document-toolbar{ display:none !important; } .legacy-commercial-shell .legacy-document-screen > .legacy-invoice-paper{ display:block !important; width:100% !important; max-width:none !important; margin:0 !important; } } /* 1.0.5 / GreenEco 440 Invoice / quotation: place the command column at the far right of the available screen area, like the inventory reports side column. */ /* The old commercial shell was capped at 1220px and centered. Remove that cap ONLY while the invoice/quotation document screen is active. */ .legacy-commercial-shell:has(.legacy-document-screen:not([hidden])){ width:100% !important; max-width:none !important; margin-right:0 !important; margin-left:0 !important; } /* Keep the command column on the far right and let the invoice occupy the remaining available width on its left. */ .legacy-commercial-shell .legacy-document-screen:not([hidden]){ width:100% !important; max-width:none !important; margin:0 !important; } .legacy-commercial-shell .legacy-document-screen:not([hidden]) > .legacy-document-toolbar{ flex:0 0 165px !important; width:165px !important; min-width:165px !important; margin-right:0 !important; margin-left:8px !important; } .legacy-commercial-shell .legacy-document-screen:not([hidden]) > .legacy-invoice-paper{ flex:1 1 0 !important; min-width:0 !important; margin:0 !important; } /* Printing remains unchanged: the command column stays hidden. */ @media print{ .legacy-commercial-shell:has(.legacy-document-screen:not([hidden])){ width:100% !important; max-width:none !important; margin:0 !important; } } /* 1.0.6 / GreenEco 441 Invoice / quotation: use the full workspace width so the command sidebar reaches the far-right side like the inventory reports sidebar. No command/function/content changes. */ /* The remaining gap came from .page-container being capped at 1180px. */ .page-container.document-page{ width:100% !important; max-width:none !important; margin-right:0 !important; margin-left:0 !important; } /* Keep the visible commercial document shell flush with that full-width page. */ .page-container.document-page .legacy-commercial-shell:has(.legacy-document-screen:not([hidden])){ width:100% !important; max-width:none !important; margin:0 !important; } /* Right command column stays at the right edge of the expanded workspace. */ .page-container.document-page .legacy-document-screen:not([hidden]) > .legacy-document-toolbar{ margin-right:0 !important; margin-left:8px !important; } /* Invoice body simply uses the remaining area; no internal form changes. */ .page-container.document-page .legacy-document-screen:not([hidden]) > .legacy-invoice-paper{ flex:1 1 0 !important; min-width:0 !important; } /* Print behavior from 439 remains: command sidebar is hidden. */ @media print{ .page-container.document-page{ width:100% !important; max-width:none !important; margin:0 !important; } } /* 1.0.7 / GreenEco 442 Invoice / quotation: - right command column stays fixed while invoice content scrolls - command column gets its own vertical scrollbar - invoice items table gets its own vertical/horizontal scrollbar No functional or data changes. */ /* Keep the right command column visible below the open-screens strip. */ .page-container.document-page .legacy-document-screen:not([hidden]) > .legacy-document-toolbar{ position:sticky !important; top:calc(var(--active-ticker-height,0px) + 108px) !important; align-self:flex-start !important; max-height:calc(100vh - var(--active-ticker-height,0px) - 150px) !important; overflow-y:auto !important; overflow-x:hidden !important; overscroll-behavior:contain !important; scrollbar-gutter:stable !important; z-index:8 !important; } /* The invoice item table scrolls independently when rows increase. */ .page-container.document-page .legacy-lines-wrap{ max-height:300px !important; overflow:auto !important; overscroll-behavior:contain !important; scrollbar-gutter:stable !important; } /* Keep table headings visible while scrolling invoice rows. */ .page-container.document-page .legacy-lines thead th{ position:sticky !important; top:0 !important; z-index:3 !important; } /* Printing remains clean: no command column and no clipped/scrolling items table. */ @media print{ .page-container.document-page .legacy-lines-wrap{ max-height:none !important; overflow:visible !important; scrollbar-gutter:auto !important; } .page-container.document-page .legacy-lines thead th{ position:static !important; } } /* 1.0.8 / GreenEco 443 Fix initial alignment of the sticky invoice command column. .app-workspace is already the scroll container below the app header/open-screens bar, so sticky top must be 0 inside that workspace. */ .page-container.document-page .legacy-document-screen:not([hidden]) > .legacy-document-toolbar{ top:0 !important; } /* Printing remains unchanged. */ @media print{ .page-container.document-page .legacy-document-screen:not([hidden]) > .legacy-document-toolbar{ top:auto !important; } } @media screen{ /* 1.0.9 / GreenEco 444 Invoice / quotation header: date, document type, document number and title in one screen row. Printing rules/commands are intentionally untouched. */ /* Turn the two stacked document labels into normal grid children. */ .page-container.document-page .legacy-document-screen:not([hidden]) .legacy-invoice-head-grid .legacy-doc-number{ display:contents !important; } /* One compact row for the four header items. */ .page-container.document-page .legacy-document-screen:not([hidden]) .legacy-invoice-head-grid{ display:grid !important; grid-template-columns: minmax(190px,1fr) minmax(210px,1fr) minmax(210px,1fr) minmax(190px,1fr) !important; align-items:center !important; gap:10px !important; } /* Date field */ .page-container.document-page .legacy-document-screen:not([hidden]) .legacy-invoice-head-grid > label{ justify-self:stretch !important; display:grid !important; grid-template-columns:72px minmax(0,1fr) !important; gap:6px !important; align-items:center !important; min-width:0 !important; } /* Number + type fields that used to live inside .legacy-doc-number */ .page-container.document-page .legacy-document-screen:not([hidden]) .legacy-invoice-head-grid .legacy-doc-number label{ justify-self:stretch !important; display:grid !important; grid-template-columns:88px minmax(0,1fr) !important; gap:6px !important; align-items:center !important; min-width:0 !important; } /* Keep "عرض سعر" as one item in the same row. */ .page-container.document-page .legacy-document-screen:not([hidden]) .legacy-invoice-head-grid > strong{ width:100% !important; min-width:0 !important; margin:0 !important; } /* Keep controls compact enough to stay on one row on normal desktop widths. */ .page-container.document-page .legacy-document-screen:not([hidden]) .legacy-invoice-head-grid input, .page-container.document-page .legacy-document-screen:not([hidden]) .legacy-invoice-head-grid select{ min-width:0 !important; width:100% !important; } /* On narrower application windows keep the row usable by horizontal scrolling rather than changing invoice fields or commands. */ @media screen and (max-width:1050px){ .page-container.document-page .legacy-document-screen:not([hidden]) .legacy-invoice-head-grid{ min-width:900px !important; } .page-container.document-page .legacy-document-screen:not([hidden]) .legacy-invoice-header{ overflow-x:auto !important; overflow-y:hidden !important; } } /* IMPORTANT: No @media print overrides are added here. Existing invoice print layout and all print commands remain exactly as before. */ } /* 1.0.11 / GreenEco 446 Invoice screen viewport: - keep the first two invoice header rows fixed - keep notes + totals fixed at the bottom - scroll invoice lines only in the middle - DO NOT touch the already-fixed right command column - screen only; printing remains unchanged */ @media screen{ /* Fill the visible workspace instead of making the whole invoice page scroll. */ .page-container.document-page{ height:100% !important; min-height:0 !important; overflow:hidden !important; } .page-container.document-page .legacy-commercial-shell:has(.legacy-document-screen:not([hidden])){ height:100% !important; min-height:0 !important; overflow:hidden !important; } .page-container.document-page .legacy-document-screen:not([hidden]){ height:100% !important; min-height:0 !important; overflow:hidden !important; } /* Invoice itself becomes five fixed/scrolling rows: 1) first header row 2) client/currency/project row 3) scrollable invoice items 4) add-line action 5) notes + totals fixed at the bottom */ .page-container.document-page .legacy-document-screen:not([hidden]) > .legacy-invoice-paper{ height:100% !important; min-height:0 !important; display:grid !important; grid-template-rows:auto auto minmax(0,1fr) auto auto !important; align-content:stretch !important; overflow:hidden !important; } /* First two rows stay in place. */ .page-container.document-page .legacy-invoice-header{ grid-row:1 !important; position:relative !important; z-index:5 !important; background:#fff !important; } .page-container.document-page .legacy-invoice-meta{ grid-row:2 !important; position:relative !important; z-index:5 !important; background:#f6f7f7 !important; } /* Only invoice rows scroll between the fixed header and fixed footer. */ .page-container.document-page .legacy-lines-wrap{ grid-row:3 !important; min-height:0 !important; height:auto !important; max-height:none !important; overflow:auto !important; overscroll-behavior:contain !important; scrollbar-gutter:stable !important; } .page-container.document-page .legacy-add-line{ grid-row:4 !important; flex:0 0 auto !important; } /* Notes + totals remain visible under the invoice table. */ .page-container.document-page .legacy-document-bottom{ grid-row:5 !important; position:relative !important; z-index:5 !important; margin-top:8px !important; background:#fff !important; min-height:0 !important; } /* Keep the fixed footer compact enough for the table to retain useful space. */ .page-container.document-page .legacy-notes textarea{ min-height:104px !important; max-height:104px !important; resize:none !important; overflow:auto !important; } .page-container.document-page .legacy-totals label{ min-height:29px !important; } .page-container.document-page .legacy-totals input, .page-container.document-page .legacy-totals output{ height:28px !important; } .page-container.document-page .legacy-totals > b{ padding:5px 8px !important; } } /* 1.0.12 / GreenEco 447 Show at least five invoice item rows before table scrolling. Screen-only compaction. Sidebar and print rules are untouched. */ @media screen{ /* Use the available invoice height efficiently. */ .page-container.document-page .legacy-document-screen:not([hidden]) > .legacy-invoice-paper{ grid-template-rows:auto auto minmax(270px,1fr) auto auto !important; gap:0 !important; } /* Compact first fixed header row without changing its content. */ .page-container.document-page .legacy-invoice-head-grid{ margin:2px 0 4px !important; gap:7px !important; } .page-container.document-page .legacy-invoice-head-grid input, .page-container.document-page .legacy-invoice-head-grid select{ height:28px !important; } .page-container.document-page .legacy-invoice-head-grid > strong{ min-height:35px !important; font-size:18px !important; } /* Compact second fixed row. */ .page-container.document-page .legacy-invoice-meta{ gap:7px !important; padding:4px 6px !important; margin-bottom:4px !important; } .page-container.document-page .legacy-invoice-meta input, .page-container.document-page .legacy-invoice-meta select{ height:28px !important; } /* Five rows fit before the invoice-lines scrollbar is needed. */ .page-container.document-page .legacy-lines-wrap{ min-height:270px !important; } .page-container.document-page .legacy-lines th{ height:30px !important; padding:3px 5px !important; } .page-container.document-page .legacy-lines td{ height:46px !important; padding:3px 5px !important; } .page-container.document-page .legacy-lines input{ min-height:29px !important; padding:3px 5px !important; } .page-container.document-page .legacy-lines textarea{ min-height:28px !important; height:auto; padding:3px 5px !important; resize:none !important; overflow:hidden !important; } .page-container.document-page .legacy-lines output{ min-height:29px !important; } .page-container.document-page .legacy-line-tools button{ width:29px !important; height:29px !important; } .page-container.document-page .legacy-remove-line{ width:27px !important; height:27px !important; } /* Compact add-line row. */ .page-container.document-page .legacy-add-line{ height:30px !important; min-height:30px !important; margin-top:4px !important; } /* Compact fixed footer: notes + totals stay visible but consume less height. */ .page-container.document-page .legacy-document-bottom{ margin-top:5px !important; gap:10px !important; } .page-container.document-page .legacy-notes textarea{ min-height:76px !important; max-height:76px !important; } .page-container.document-page .legacy-totals label{ min-height:22px !important; } .page-container.document-page .legacy-totals label > span{ padding:2px 8px !important; } .page-container.document-page .legacy-totals input, .page-container.document-page .legacy-totals output{ height:22px !important; min-height:22px !important; padding:2px 5px !important; } .page-container.document-page .legacy-totals > b{ padding:3px 7px !important; } } /* 1.0.13 / GreenEco 448 Invoice screen optimization: - totals + discount + tax + grand total + currency in ONE row before Add Line - compact item rows like the client field - long item descriptions expand the row automatically - screen only; print layout remains exactly as before - right command sidebar is untouched */ @media screen{ /* The invoice now uses: 1 header 2 client/currency/project 3 scrollable lines 4 horizontal totals strip 5 add-line button 6 fixed notes */ .page-container.document-page .legacy-document-screen:not([hidden]) > .legacy-invoice-paper{ grid-template-rows:auto auto minmax(0,1fr) auto auto auto !important; gap:0 !important; } /* Let totals and notes become independent grid rows on screen only. */ .page-container.document-page .legacy-document-bottom{ display:contents !important; } /* One horizontal totals strip before Add Line. */ .page-container.document-page .legacy-totals{ grid-row:4 !important; display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:4px !important; align-items:stretch !important; border:1px solid #a18e8e !important; background:#f8eeee !important; margin-top:4px !important; min-width:0 !important; } .page-container.document-page .legacy-totals label{ display:grid !important; grid-template-columns:auto minmax(64px,1fr) !important; align-items:center !important; gap:4px !important; min-height:32px !important; border:0 !important; border-left:1px solid #bea9a9 !important; background:#f8eeee !important; min-width:0 !important; } .page-container.document-page .legacy-totals label > span{ padding:3px 5px !important; white-space:nowrap !important; font-size:11px !important; } .page-container.document-page .legacy-totals input, .page-container.document-page .legacy-totals output{ height:27px !important; min-height:27px !important; padding:2px 4px !important; border:0 !important; border-inline-start:1px solid #bea9a9 !important; font-size:11px !important; } .page-container.document-page .legacy-totals .grand{ background:#f6dada !important; } .page-container.document-page .legacy-totals > b{ display:flex !important; align-items:center !important; justify-content:center !important; min-width:0 !important; padding:3px 6px !important; border-right:1px solid #bea9a9 !important; background:#fff7f7 !important; color:#086292 !important; font-size:11px !important; white-space:nowrap !important; } /* Add Line sits immediately after the totals strip. */ .page-container.document-page .legacy-add-line{ grid-row:5 !important; height:30px !important; min-height:30px !important; margin:4px 0 0 auto !important; } /* Notes remain fixed at the bottom by themselves. */ .page-container.document-page .legacy-notes{ grid-row:6 !important; width:100% !important; min-width:0 !important; margin-top:4px !important; background:#fff !important; } .page-container.document-page .legacy-notes textarea{ min-height:68px !important; max-height:68px !important; resize:none !important; overflow:auto !important; } /* Compact rows: approximately the same control height as client/currency fields. */ .page-container.document-page .legacy-lines th{ height:29px !important; padding:2px 4px !important; } .page-container.document-page .legacy-lines td{ height:32px !important; padding:2px 4px !important; vertical-align:middle !important; } .page-container.document-page .legacy-lines input, .page-container.document-page .legacy-lines select, .page-container.document-page .legacy-lines output{ height:28px !important; min-height:28px !important; padding:2px 4px !important; } /* Text description starts one-line high, but JS expands it for long names/text. */ .page-container.document-page .legacy-lines textarea{ min-height:28px !important; padding:3px 5px !important; line-height:1.35 !important; resize:none !important; overflow:hidden !important; } .page-container.document-page .legacy-line-description{ align-items:center !important; } .page-container.document-page .legacy-line-tools button{ width:27px !important; height:27px !important; } .page-container.document-page .legacy-remove-line{ width:25px !important; height:25px !important; } /* The line table keeps the remaining available height and scrolls internally. */ .page-container.document-page .legacy-lines-wrap{ grid-row:3 !important; min-height:0 !important; max-height:none !important; overflow:auto !important; } } /* 1.0.14 / GreenEco 449 Invoice item description cleanup: - one-line compact default height - no inner textarea border / focus frame - outer table cell border remains the only visible boundary - long descriptions still auto-expand - screen only; print remains untouched */ @media screen{ .page-container.document-page .legacy-lines td:nth-child(2){ padding:0 4px !important; } .page-container.document-page .legacy-line-description{ min-height:28px !important; align-items:center !important; } .page-container.document-page .legacy-lines textarea[data-line="description"]{ display:block !important; width:100% !important; min-height:28px !important; height:auto; margin:0 !important; padding:4px 5px !important; border:0 !important; outline:0 !important; box-shadow:none !important; border-radius:0 !important; background:transparent !important; line-height:20px !important; resize:none !important; overflow:hidden !important; } .page-container.document-page .legacy-lines textarea[data-line="description"]:focus, .page-container.document-page .legacy-lines textarea[data-line="description"]:focus-visible{ border:0 !important; outline:0 !important; box-shadow:none !important; background:transparent !important; } } /* 1.0.15 / GreenEco 450 PRINT ONLY — invoice refinements requested after 449: 1) remove inner lines/frames under printable field text 2) keep date at the far-left end of the first header row 3) reserve the final ~4 item-row heights for notes at the end of invoice Screen layout and the right command sidebar are untouched. */ @media print{ /* ---------- Clean printable values: no inner underline/frame ---------- */ body.legacy-commercial-print-active .legacy-invoice-paper input, body.legacy-commercial-print-active .legacy-invoice-paper textarea, body.legacy-commercial-print-active .legacy-invoice-paper select, body.legacy-commercial-print-active .legacy-invoice-paper output{ border:0 !important; border-top:0 !important; border-right:0 !important; border-bottom:0 !important; border-left:0 !important; outline:0 !important; box-shadow:none !important; border-radius:0 !important; background:transparent !important; -webkit-appearance:none !important; appearance:none !important; text-decoration:none !important; } body.legacy-commercial-print-active .legacy-lines input, body.legacy-commercial-print-active .legacy-lines textarea, body.legacy-commercial-print-active .legacy-lines select, body.legacy-commercial-print-active .legacy-lines output{ margin:0 !important; padding:0 1mm !important; min-height:0 !important; height:auto !important; line-height:1.25 !important; } /* Hide native spinner/calendar artwork that can print as a small line/box. */ body.legacy-commercial-print-active .legacy-invoice-paper input[type="number"]::-webkit-inner-spin-button, body.legacy-commercial-print-active .legacy-invoice-paper input[type="number"]::-webkit-outer-spin-button, body.legacy-commercial-print-active .legacy-invoice-paper input[type="date"]::-webkit-calendar-picker-indicator{ display:none !important; -webkit-appearance:none !important; } /* ---------- First print header row ---------- */ body.legacy-commercial-print-active .legacy-invoice-head-grid{ direction:ltr !important; display:grid !important; grid-template-columns:minmax(52mm,1fr) 48mm minmax(52mm,1fr) !important; align-items:center !important; gap:5mm !important; width:100% !important; margin:1mm 0 2mm !important; } /* Date is the first DOM child -> far-left print column. */ body.legacy-commercial-print-active .legacy-invoice-head-grid > label{ grid-column:1 !important; justify-self:start !important; direction:rtl !important; display:grid !important; grid-template-columns:auto minmax(28mm,40mm) !important; align-items:center !important; gap:2mm !important; width:auto !important; margin:0 !important; } body.legacy-commercial-print-active .legacy-invoice-head-grid > label input[type="date"]{ width:38mm !important; min-width:38mm !important; max-width:38mm !important; padding:0 !important; margin:0 !important; text-align:center !important; background:transparent !important; border:0 !important; border-bottom:0 !important; } /* Document title stays centered. */ body.legacy-commercial-print-active .legacy-invoice-head-grid > strong{ grid-column:2 !important; justify-self:stretch !important; width:100% !important; } /* Document number stays at the far-right end. */ body.legacy-commercial-print-active .legacy-invoice-head-grid > .legacy-doc-number{ grid-column:3 !important; justify-self:end !important; direction:rtl !important; width:auto !important; margin:0 !important; } body.legacy-commercial-print-active .legacy-doc-number label{ display:grid !important; grid-template-columns:auto minmax(38mm,1fr) !important; gap:2mm !important; align-items:center !important; } body.legacy-commercial-print-active .legacy-doc-number input{ border:0 !important; border-bottom:0 !important; padding:0 !important; background:transparent !important; } /* ---------- Put notes at the END of the printed invoice ---------- */ body.legacy-commercial-print-active .legacy-invoice-paper{ display:flex !important; flex-direction:column !important; min-height:275mm !important; height:auto !important; overflow:visible !important; } /* Flatten only the print bottom wrapper: totals remain immediately after item table; notes become an independent final flex item and can be pushed to the end. */ body.legacy-commercial-print-active .legacy-document-bottom{ display:contents !important; } body.legacy-commercial-print-active .legacy-totals{ flex:0 0 auto !important; width:70mm !important; max-width:70mm !important; align-self:flex-end !important; margin-top:3mm !important; break-inside:avoid !important; page-break-inside:avoid !important; } /* 42mm equals approximately four normal printed item rows in this invoice. margin-top:auto pushes this reserved notes area to the end for short invoices; for long invoices it follows the final content naturally. */ body.legacy-commercial-print-active .legacy-notes{ flex:0 0 42mm !important; width:100% !important; min-height:42mm !important; height:42mm !important; margin-top:auto !important; padding-top:2mm !important; display:grid !important; grid-template-columns:20mm minmax(0,1fr) !important; gap:2mm !important; align-items:start !important; break-inside:avoid !important; page-break-inside:avoid !important; font-weight:900 !important; } body.legacy-commercial-print-active .legacy-notes textarea{ width:100% !important; height:40mm !important; min-height:40mm !important; max-height:40mm !important; margin:0 !important; padding:1mm 0 !important; border:0 !important; border-bottom:0 !important; outline:0 !important; box-shadow:none !important; background:transparent !important; resize:none !important; overflow:hidden !important; } } /* 1.0.16 / GreenEco 451 PRINT ONLY — force invoice totals block to the LEFT side. Nothing else in print or screen layout is changed. */ @media print{ body.legacy-commercial-print-active .legacy-totals{ align-self:auto !important; margin-top:3mm !important; margin-left:0 !important; margin-right:auto !important; justify-self:start !important; } } /* 1.0.17 / GreenEco 452 SCREEN ONLY — align the first invoice row with the second row. Column relationship: [date + blue title] = client group width [document number] = currency group width [document type] = project group width Print and right command sidebar are untouched. */ @media screen{ /* Both header rows use the same three master widths. */ .page-container.document-page .legacy-invoice-meta{ grid-template-columns: minmax(300px,1.5fr) minmax(210px,.7fr) minmax(220px,.8fr) !important; gap:7px !important; } /* Split the first (client-width) master column into two equal parts for date + blue document title, then reuse the currency/project widths. In RTL auto-placement: date | blue title | document number | document type */ .page-container.document-page .legacy-invoice-head-grid{ direction:rtl !important; grid-template-columns: minmax(145px,.75fr) minmax(145px,.75fr) minmax(210px,.7fr) minmax(220px,.8fr) !important; gap:7px !important; margin:2px 0 4px !important; align-items:center !important; } /* Number/type children participate as independent grid cells. */ .page-container.document-page .legacy-invoice-head-grid .legacy-doc-number{ display:contents !important; } /* Make first-row labelled fields use the same caption/value geometry as row two. */ .page-container.document-page .legacy-invoice-head-grid > label, .page-container.document-page .legacy-invoice-head-grid .legacy-doc-number label{ justify-self:stretch !important; width:100% !important; min-width:0 !important; display:grid !important; grid-template-columns:90px minmax(0,1fr) !important; gap:7px !important; align-items:center !important; margin:0 !important; } .page-container.document-page .legacy-invoice-head-grid label > span, .page-container.document-page .legacy-invoice-meta label > span{ min-width:0 !important; padding:0 !important; text-align:right !important; white-space:nowrap !important; line-height:28px !important; } /* Same control height in both rows. */ .page-container.document-page .legacy-invoice-head-grid input, .page-container.document-page .legacy-invoice-head-grid select, .page-container.document-page .legacy-invoice-meta input, .page-container.document-page .legacy-invoice-meta select{ width:100% !important; min-width:0 !important; height:28px !important; min-height:28px !important; margin:0 !important; padding:2px 7px !important; box-sizing:border-box !important; } /* Blue title occupies exactly one half of the client-width master column. */ .page-container.document-page .legacy-invoice-head-grid > strong{ width:100% !important; min-width:0 !important; min-height:28px !important; height:28px !important; margin:0 !important; padding:0 8px !important; display:grid !important; place-items:center !important; line-height:28px !important; font-size:17px !important; box-sizing:border-box !important; } /* Keep date visually compact and equal-height with the blue title. */ .page-container.document-page .legacy-invoice-head-grid > label:first-child{ grid-template-columns:72px minmax(0,1fr) !important; } /* Remove extra vertical drift between the two rows. */ .page-container.document-page .legacy-invoice-header{ margin:0 !important; padding:0 !important; } } /* 1.0.19 / GreenEco 454 SCREEN ONLY — safe dimensional matching. Keep the working 452 layout and only normalize the paired control boxes. No grid re-ordering, no direction changes, no print changes. */ @media screen{ /* Shared exact height for all first/second-row controls. */ .page-container.document-page .legacy-invoice-head-grid input, .page-container.document-page .legacy-invoice-head-grid select, .page-container.document-page .legacy-invoice-meta input, .page-container.document-page .legacy-invoice-meta select{ height:28px !important; min-height:28px !important; max-height:28px !important; box-sizing:border-box !important; } /* Pair 1: رقم المستند ↔ نوع العملة Match the input/select box itself, not the whole group. */ .page-container.document-page .legacy-invoice-head-grid .legacy-doc-number > label:first-child, .page-container.document-page .legacy-invoice-meta > label:nth-child(2){ grid-template-columns:90px minmax(0,1fr) !important; gap:7px !important; width:100% !important; min-width:0 !important; } .page-container.document-page .legacy-invoice-head-grid .legacy-doc-number > label:first-child > input, .page-container.document-page .legacy-invoice-meta > label:nth-child(2) > select{ width:100% !important; min-width:0 !important; max-width:none !important; } /* Pair 2: نوع المستند ↔ المشروع */ .page-container.document-page .legacy-invoice-head-grid .legacy-doc-number > label:nth-child(2), .page-container.document-page .legacy-invoice-meta > label:nth-child(3){ grid-template-columns:90px minmax(0,1fr) !important; gap:7px !important; width:100% !important; min-width:0 !important; } .page-container.document-page .legacy-invoice-head-grid .legacy-doc-number > label:nth-child(2) > select, .page-container.document-page .legacy-invoice-meta > label:nth-child(3) > select{ width:100% !important; min-width:0 !important; max-width:none !important; } /* Date + blue title stay exactly where 452 put them. Only their height is normalized so the first row remains straight. */ .page-container.document-page .legacy-invoice-head-grid > label:first-child, .page-container.document-page .legacy-invoice-head-grid > strong{ min-height:28px !important; height:28px !important; max-height:28px !important; box-sizing:border-box !important; } .page-container.document-page .legacy-invoice-head-grid > strong{ line-height:28px !important; margin:0 !important; } } /* 1.0.20 / GreenEco 455 PRINT ONLY — hide the document-type selector/label completely. The centered blue title (عرض سعر / فاتورة) is sufficient. */ @media print{ body.legacy-commercial-print-active .legacy-invoice-head-grid .legacy-doc-number > label.no-print{ display:none !important; } } /* 1.0.21 / GreenEco 456 HARD FIX — invoice and archive are two mutually exclusive screens. A legacy !important flex rule kept the invoice visible even when [hidden]. These later, higher-specificity rules restore true screen separation. */ /* Hidden always wins, even over the legacy document flex rule. */ .page-container.document-page .legacy-commercial-shell > .legacy-document-screen[hidden], .page-container.document-page .legacy-commercial-shell > .legacy-archive-screen[hidden]{ display:none !important; } /* When archive is active, invoice is forcibly removed from layout. */ .page-container.document-page[data-commercial-view="archive"] .legacy-commercial-shell > .legacy-document-screen{ display:none !important; } /* Archive becomes the only visible full workspace screen. */ .page-container.document-page[data-commercial-view="archive"] .legacy-commercial-shell > .legacy-archive-screen:not([hidden]){ display:block !important; width:100% !important; max-width:none !important; min-height:0 !important; margin:0 !important; } /* When document is active, archive is forcibly removed from layout. */ .page-container.document-page[data-commercial-view="document"] .legacy-commercial-shell > .legacy-archive-screen{ display:none !important; } /* Keep the working invoice flex layout only in document mode. */ .page-container.document-page[data-commercial-view="document"] .legacy-commercial-shell > .legacy-document-screen:not([hidden]){ display:flex !important; } /* Archive view uses the available workspace height and scrolls by itself. */ @media screen{ .page-container.document-page[data-commercial-view="archive"]{ height:100% !important; min-height:0 !important; overflow:hidden !important; } .page-container.document-page[data-commercial-view="archive"] .legacy-commercial-shell{ height:100% !important; min-height:0 !important; overflow:hidden !important; } .page-container.document-page[data-commercial-view="archive"] .legacy-archive-screen:not([hidden]){ height:100% !important; min-height:0 !important; overflow:auto !important; box-sizing:border-box !important; } }