*{box-sizing:border-box}
:root{--navy:#0a192f;--navy-2:#112240;--blue:#2563eb;--blue-soft:#eff6ff;--gold:#d97706;--bg:#f1f5f9;--panel:#ffffff;--line:#e2e8f0;--text:#334155;--muted:#64748b;--green:#16a34a;--green-soft:#f0fdf4;--red:#dc2626;--shadow:0 10px 30px -5px rgba(0,0,0,.1),0 4px 10px -5px rgba(0,0,0,.04);--glass-bg:rgba(255, 255, 255, 0.7);--glass-border:rgba(255, 255, 255, 0.3)}
html{direction:rtl;min-height:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Inter","Segoe UI",Tahoma,Arial,sans-serif;font-size:14px;line-height:1.6;transition:background-color 0.3s ease}
a{color:var(--blue);transition:color 0.2s ease}button,input,select,textarea{font:inherit;transition:all 0.2s ease}.app-shell{min-height:100vh;display:flex;flex-direction:column}
.topbar{min-height:72px;background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;display:flex;align-items:center;gap:22px;padding:10px 24px;box-shadow:var(--shadow);position:relative;z-index:30;backdrop-filter:blur(10px)}.brand{display:flex;align-items:center;gap:12px;min-width:210px;font-size:20px;font-weight:800;white-space:nowrap;letter-spacing:-0.5px}.brand small{display:block;font-size:11px;font-weight:500;color:#94a3b8;margin-top:2px}.brand-mark-mini{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--gold),#b45309);color:#fff;font-weight:900;font-size:21px;box-shadow:0 4px 10px rgba(217,119,6,0.3)}
.top-actions{display:flex;align-items:center;gap:12px;margin-right:auto}.company-name{color:#e2e8f0;font-size:14px;font-weight:500}.user-chip{padding:6px 12px;border:1px solid rgba(255,255,255,0.1);border-radius:20px;background:rgba(255,255,255,0.05);backdrop-filter:blur(5px);transition:background 0.3s ease}.user-chip:hover{background:rgba(255,255,255,0.1)}.top-logout{color:#fff!important;border-color:rgba(255,255,255,0.2)!important;background:rgba(255,255,255,0.05)!important;border-radius:20px}
.quick-search{position:relative;display:flex;align-items:center;gap:7px;width:min(450px,38vw);margin-right:auto}.quick-search input{width:100%;height:42px;border:1px solid rgba(255,255,255,0.2);border-radius:21px;background:rgba(255,255,255,0.08);color:#fff;padding:0 40px 0 60px;outline:0;transition:all 0.3s ease;backdrop-filter:blur(5px)}.quick-search input::placeholder{color:#94a3b8}.quick-search input:focus{border-color:var(--blue);background:#fff;color:var(--text);box-shadow:0 0 0 4px rgba(37,99,235,0.2)}.quick-search-icon{position:absolute;right:15px;color:#94a3b8;font-size:22px;line-height:1;transition:color 0.3s ease}.quick-search input:focus ~ .quick-search-icon{color:var(--blue)}.quick-search kbd{position:absolute;left:10px;color:#94a3b8;border:1px solid rgba(255,255,255,0.2);border-radius:6px;padding:2px 6px;font-size:11px;background:rgba(255,255,255,0.1)}.quick-results{position:absolute;top:50px;right:0;left:0;max-height:360px;overflow:auto;background:var(--glass-bg);backdrop-filter:blur(15px);border:1px solid var(--glass-border);border-radius:12px;box-shadow:var(--shadow);padding:8px;z-index:80;animation:fadeIn 0.2s ease-out}.quick-result{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:8px;color:var(--text);text-decoration:none;transition:all 0.2s ease}.quick-result:hover,.quick-result.active{background:var(--blue-soft);color:var(--blue);transform:translateX(-4px)}.quick-result small{color:var(--muted);font-size:12px}
@keyframes fadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.open-pages{display:flex;align-items:center;gap:12px;min-height:50px;background:var(--glass-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:6px 24px;overflow:hidden}.open-pages-title{font-size:12px;color:var(--muted);font-weight:700;white-space:nowrap;letter-spacing:0.5px;text-transform:uppercase}.open-pages-list{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}.open-pages-list::-webkit-scrollbar{display:none}.open-page{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid transparent;border-radius:20px;background:#f8fafc;color:#475467;text-decoration:none;white-space:nowrap;font-size:13px;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);box-shadow:0 2px 4px rgba(0,0,0,0.02)}.open-page:hover{background:#f1f5f9;transform:translateY(-1px);box-shadow:0 4px 6px rgba(0,0,0,0.04)}.open-page.active{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600;box-shadow:0 4px 12px rgba(37,99,235,0.3)}.open-page-close{border:0;background:transparent;color:inherit;opacity:0.6;cursor:pointer;padding:0;font-size:16px;line-height:1;transition:all 0.2s ease}.open-page-close:hover{opacity:1;transform:scale(1.1);color:var(--red)}
.layout{display:flex;flex:1;direction:rtl;min-height:0}.sidebar{width:260px;flex:0 0 260px;background:var(--panel);border-left:1px solid var(--line);padding:20px 12px;direction:rtl;overflow-y:auto;overflow-x:hidden;transition:width 0.3s ease}.sidebar-heading{display:flex;align-items:center;justify-content:space-between;padding:0 12px 14px;font-weight:800;color:var(--navy);border-bottom:1px solid var(--line);margin-bottom:14px}.sidebar-toggle{border:0;background:var(--blue-soft);color:var(--blue);border-radius:8px;width:32px;height:32px;cursor:pointer;transition:all 0.2s ease}.sidebar-toggle:hover{background:var(--blue);color:#fff}.menu-group h3{font-size:12px;color:var(--muted);margin:20px 12px 10px;text-transform:uppercase;letter-spacing:0.5px}.side-link{display:flex;align-items:center;padding:10px 14px;border-radius:10px;color:var(--text);text-decoration:none;margin:4px 0;transition:all 0.2s ease;font-weight:500}.side-link:hover{background:var(--bg);color:var(--blue);transform:translateX(-4px)}.side-link.active{background:var(--blue-soft);color:var(--blue);font-weight:700;box-shadow:inset -4px 0 0 var(--blue)}.sidebar-collapsed .sidebar{width:80px;flex-basis:80px;padding-left:8px;padding-right:8px}.sidebar-collapsed .sidebar-heading span,.sidebar-collapsed .menu-group h3,.sidebar-collapsed .side-link span{display:none}.sidebar-collapsed .side-link{font-size:0;text-align:center;padding:12px;justify-content:center}.sidebar-collapsed .side-link:before{content:'•';font-size:24px;color:var(--blue);line-height:0}
.content{direction:rtl;flex:1;min-width:0;padding:22px 26px;overflow:auto}.page-head{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}.actions{justify-content:flex-start}.page-head h1{font-size:24px;margin:0;color:var(--navy);letter-spacing:-.3px}.page-head p{margin:5px 0 0;color:var(--muted);line-height:1.8}.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 1px 2px #1018280d;margin-bottom:17px;overflow:hidden}.card-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 17px;border-bottom:1px solid var(--line);font-weight:800;color:var(--navy);background:#fbfcfe}.card-body{padding:17px}.grid{display:grid;gap:14px}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.stat{padding:15px;border:1px solid var(--line);border-radius:9px;background:#fff}.stat .label{color:var(--muted);font-size:12px}.stat .value{font-size:24px;font-weight:800;color:var(--navy);margin-top:7px}
.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:separate;border-spacing:0;min-width:700px}.data-table th{background:#f3f6fa;color:#475467;font-weight:800;white-space:nowrap}.data-table td,.data-table th{border-bottom:1px solid var(--line);padding:10px 11px;text-align:right}.data-table th:first-child{border-radius:0 8px 0 0}.data-table th:last-child{border-radius:8px 0 0 0}.data-table tbody tr:hover{background:#f8fbfe}.data-table tbody tr:last-child td{border-bottom:0}
.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 14px}.field{display:flex;align-items:center;gap:8px}.field label{font-weight:700;color:#344054;font-size:13px;width:105px;flex-shrink:0;text-align:left}.field input,.field select,.field textarea{flex:1;min-width:0;border:1px solid #cbd5e1;border-radius:5px;padding:5px 8px;background:#fff;color:var(--text);font:inherit;min-height:34px}.field textarea{min-height:82px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid #7cb2e033;border-color:var(--blue)}.span-2{grid-column:span 2}.span-3{grid-column:span 3}.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #c7d0dc;border-radius:7px;padding:8px 14px;text-decoration:none;background:#fff;color:#344054;cursor:pointer;font:inherit;min-height:38px}.btn:hover{filter:brightness(.97);transform:translateY(-1px)}.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}.btn.success{background:var(--green);border-color:var(--green);color:#fff}.btn.danger{background:#fff;border-color:#d92d20;color:var(--red)}.btn.small{padding:5px 9px;font-size:12px;min-height:30px}.full{width:100%}.alert{border-radius:8px;padding:10px 12px;margin:0 0 14px}.alert.success{background:var(--green-soft);border:1px solid #abefc6;color:#067647}.alert.danger{background:#fef3f2;border:1px solid #fecdca;color:var(--red)}.alert.info{background:#eff8ff;border:1px solid #b2ddff;color:#175cd3}.badge{display:inline-block;padding:4px 8px;border-radius:20px;font-size:12px}.badge.green{background:var(--green-soft);color:#067647}.badge.orange{background:#fffaeb;color:#b54708}.badge.red{background:#fef3f2;color:#b42318}.badge.gray{background:#f2f4f7;color:#475467}.number{text-align:left!important;direction:ltr}.footer{padding:10px 22px;background:#fff;border-top:1px solid var(--line);color:var(--muted);font-size:12px;display:flex;justify-content:space-between}.toolbar{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);background:#fbfcfe}.toolbar form{display:flex;gap:8px;flex-wrap:wrap}.summary{display:flex;justify-content:flex-start;gap:28px;align-items:center;flex-wrap:wrap;padding:15px 17px;background:#f8fafc;border-top:1px solid #e5e7eb}.summary strong{color:#0f4c81;font-size:17px}.empty{text-align:center;color:var(--muted);padding:35px}
.smart-picker{position:relative;display:flex;min-width:0;flex:1}.smart-picker input[data-picker-input]{width:100%;padding-left:10px}.picker-results{position:absolute;z-index:50;top:calc(100% + 4px);right:0;left:0;background:#fff;border:1px solid #d8dee8;border-radius:9px;box-shadow:0 12px 30px rgba(15,23,42,.14);max-height:280px;overflow:auto}.picker-option{display:flex;flex-direction:column;gap:3px;width:100%;padding:10px 12px;border:0;background:#fff;text-align:right;cursor:pointer}.picker-option:hover,.picker-option.active{background:#eef5ff;color:#0f4c81}.picker-option small,.picker-empty{color:#64748b;font-size:12px}.picker-empty{padding:14px;text-align:center}.field-with-action{display:flex;align-items:stretch;gap:4px;flex:1;min-width:0}.field-with-action>.smart-picker,.field-with-action>select{flex:1;min-width:0}.add-btn{width:34px;min-width:34px;padding:0;border:1px solid #9fc3e3;border-radius:5px;background:var(--blue-soft);color:#15518d;font-size:20px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;text-decoration:none}.add-btn:hover{background:#d8ebfa}.hint{display:block;margin-top:5px;color:#64748b;font-size:12px}.invoice-lines td{vertical-align:top}.invoice-lines .compact{min-width:95px}.invoice-lines input{min-height:34px;padding:5px 7px}.invoice-lines td{padding:5px 7px}.invoice-lines th{padding:7px}.invoice-lines .field-with-action{gap:3px}.invoice-lines .line-no{width:42px;color:var(--muted);font-weight:700}.invoice-shell{max-width:1500px}.invoice-context{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(300px,.7fr);gap:14px;align-items:start;position:sticky;top:0;z-index:20;background:var(--bg);padding-top:4px}.invoice-context .card{box-shadow:0 5px 12px rgba(15,35,58,.08)}.invoice-product-info{background:#fffdf5;border:1px solid #f2dfad;border-radius:8px;padding:12px;margin-top:14px}.invoice-product-info dl{margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:6px 12px;font-size:12px}.invoice-product-info dt{color:#725b22;font-weight:700}.invoice-product-info dd{margin:0;color:#344054}.invoice-bottom{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);padding:10px 26px;box-shadow:0 -4px 12px rgba(0,0,0,0.04);display:flex;justify-content:flex-start;gap:12px;align-items:center;z-index:40;margin:-22px -26px 0}.payment-methods{display:flex;gap:8px}.payment-methods label{display:flex;align-items:center;gap:5px;padding:6px 12px;border:1px solid var(--line);border-radius:6px;cursor:pointer;background:#f8fafc;font-weight:700;user-select:none}.payment-methods label:has(input:checked){background:var(--blue-soft);border-color:var(--blue);color:var(--blue)}.payment-methods input{margin:0}.invoice-main-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}.invoice-main-fields .important-field{grid-column:span 2}.invoice-primary{border:1px solid #bad3e9;background:linear-gradient(180deg,#fbfdff,#f5faff)}.invoice-primary .card-header{background:#eef7ff}.invoice-total{font-size:22px!important}.invoice-footer-actions{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap}.invoice-help{padding:11px 14px;background:#fffdf5;border:1px solid #f2dfad;border-radius:8px;color:#725b22}.section-kicker{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.4px}.check{display:flex;align-items:center;gap:7px;min-height:40px}.check input{accent-color:var(--blue)}
.login-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 20% 10%,#2f6fb033,transparent 35%),linear-gradient(135deg,#16243a,#253e61)}.login-card{width:min(430px,calc(100% - 32px));background:#fff;padding:32px;border-radius:10px;box-shadow:0 18px 50px #0005}.login-card h1{text-align:center;color:var(--navy);margin:8px 0}.login-card p{text-align:center;color:var(--muted);line-height:1.8}.brand-mark{width:58px;height:58px;border-radius:12px;background:var(--gold);color:#fff;display:grid;place-items:center;font-size:34px;font-weight:800;margin:0 auto}.login-card .field{margin:14px 0}
.modal-backdrop{display:none;position:fixed;inset:0;background:#11182799;z-index:100;align-items:center;justify-content:center}.modal-backdrop.open{display:flex}.modal{width:min(780px,calc(100% - 32px));max-height:90vh;overflow:auto;background:#fff;border-radius:10px}.modal-header{display:flex;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);font-weight:700}.modal-body{padding:16px}
@media(max-width:1100px){.quick-search{width:34vw}.sidebar{width:225px;flex-basis:225px}.grid-4{grid-template-columns:repeat(2,1fr)}.form-grid,.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.topbar{flex-wrap:wrap;padding:10px 14px}.brand{min-width:auto}.quick-search{order:3;width:100%;margin:0}.top-actions{margin-right:auto}.company-name{display:none}.open-pages{padding:5px 10px}.invoice-context{grid-template-columns:1fr}.invoice-main-fields{grid-template-columns:1fr}.invoice-main-fields .important-field{grid-column:auto}}
@media(max-width:700px){.layout{display:block}.sidebar{width:100%;border-left:0;border-bottom:1px solid var(--line);display:block;max-height:260px}.menu-groups{display:flex;gap:8px;overflow:auto}.menu-group{min-width:170px}.menu-group h3{margin-top:7px}.content{padding:14px}.grid-4,.grid-3,.grid-2,.form-grid{grid-template-columns:1fr}.span-2,.span-3{grid-column:span 1}.page-head{flex-direction:column}.page-head .btn{align-self:stretch}.data-table{min-width:700px}.toolbar{align-items:stretch;flex-direction:column}.footer{flex-direction:column;gap:4px}.summary{align-items:stretch;flex-direction:column;gap:7px}.summary input{max-width:100%!important}.top-actions{gap:5px}.user-chip{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}

.filter-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;padding:15px}.filter-grid label{display:flex;flex-direction:column;gap:5px;font-weight:700;color:#344054}.filter-grid input,.filter-grid select{min-height:38px;border:1px solid #cbd5e1;border-radius:7px;padding:8px;background:#fff;font:inherit}.filter-actions{display:flex;align-items:end;gap:8px}.pagination{display:flex;align-items:center;justify-content:center;gap:10px;padding:15px;border-top:1px solid var(--line)}.muted,.text-muted{display:block;color:var(--muted);font-size:12px}.tabs{grid-column:1 / -1}.tab-list{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:8px}.tab-btn{border:1px solid var(--line);border-radius:7px;background:#fff;color:#475467;padding:7px 11px;cursor:pointer}.tab-btn.active{background:var(--blue-soft);border-color:#9fc3e3;color:#124e7d;font-weight:700}.tab-content{display:none;padding:14px 0}.tab-content.active{display:grid;gap:12px}.compact-form{grid-template-columns:1fr}.text-muted{line-height:1.7}@media(max-width:1100px){.filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:700px){.filter-grid{grid-template-columns:1fr}.filter-actions{align-items:stretch}}

/* Invoice workspace — legacy compact layout inspired by the previous sales system */
.invoice-form-page{width:100%;max-width:1700px;margin:0 auto;padding:0 0 8px}.invoice-page-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 7px;padding:0 2px}.invoice-page-heading h1{font-size:19px;margin:0;color:var(--navy)}.invoice-page-heading .section-kicker{font-size:10px}.compact-alert{margin-bottom:7px;padding:7px 10px;font-size:12px}
.legacy-invoice-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:minmax(560px,calc(100vh - 235px)) auto;gap:8px;direction:ltr;align-items:stretch}.invoice-side-panel,.invoice-work-panel,.legacy-footer-bar{background:#fff;border:1px solid #d5dee8;border-radius:7px;box-shadow:0 2px 7px rgba(15,35,58,.06);direction:rtl}.invoice-side-panel{grid-column:2;grid-row:1;display:flex;flex-direction:column;overflow:hidden}.invoice-work-panel{grid-column:1;grid-row:1;display:flex;flex-direction:column;min-width:0;overflow:visible}.legacy-panel-title{background:#f8fafc;border-bottom:1px solid #dbe3ec;padding:10px 13px;font-weight:800;color:#1f2937;font-size:14px}.invoice-side-content{padding:10px;display:flex;flex-direction:column;gap:10px;overflow:auto}.legacy-form-group{display:flex;flex-direction:column;gap:4px}.legacy-form-group>label{font-weight:800;color:#344054;font-size:12px}.legacy-form-group select,.legacy-form-group input,.legacy-form-group textarea{width:100%;min-height:32px;padding:5px 8px;border:1px solid #c8d2de;border-radius:5px;background:#fff;color:#26384a}.legacy-form-group textarea{min-height:63px;resize:vertical}.legacy-form-group select:focus,.legacy-form-group input:focus,.legacy-form-group textarea:focus{outline:2px solid #b8d8f4;border-color:#2d8dcc}.required-mark{display:inline-block;background:#fff4d8;color:#9a6500;border-radius:10px;padding:2px 5px;font-size:10px}.legacy-input-action{display:flex;align-items:stretch;gap:4px}.legacy-input-action>.smart-picker,.legacy-input-action>select{flex:1;min-width:0}.legacy-add-btn{width:30px;min-width:30px;border:0;border-radius:4px;background:#087f5b;color:#fff;text-decoration:none;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:19px;line-height:1}.legacy-add-btn:hover{background:#066b4c}.legacy-form-group .smart-picker input[data-picker-input]{min-height:32px}.legacy-hidden-payment{display:none}.legacy-search-strip{position:relative;z-index:30;background:#fff3e0;border-bottom:2px solid #2084c6;padding:8px 12px;display:flex;flex-direction:column;gap:4px;overflow:visible}.legacy-search-strip label{font-size:11px;font-weight:800;color:#c2410c}.legacy-search-strip input{width:100%;height:48px;border:2px solid #2188c8;border-radius:2px;background:#fff;font-size:22px;font-weight:700;padding:5px 12px;direction:rtl}.legacy-search-strip input:focus{background:#fff9ed;outline:0;border-color:#c8c8c8;box-shadow:0 0 7px rgba(230,81,0,.28)}.legacy-search-strip small{font-size:10px;color:#c2410c;font-weight:700}.legacy-search-menu{position:absolute;top:calc(100% - 2px);right:12px;left:12px;z-index:100;background:#fff;border:1px solid #cbd5e1;border-radius:6px;box-shadow:0 12px 28px rgba(0,0,0,.18);max-height:240px;overflow:auto}.legacy-search-menu[hidden]{display:none}.legacy-search-option{display:block;width:100%;border:0;border-bottom:1px solid #eef2f6;background:#fff;text-align:right;padding:8px 11px;cursor:pointer}.legacy-search-option:hover,.legacy-search-option.active{background:#eff7ff}.legacy-search-option strong{display:block;font-size:12px;color:#18324b}.legacy-search-option small{display:block;font-size:10px;color:#66788c;font-weight:400}.legacy-table-wrap{flex:1;min-height:0;overflow:auto}.legacy-invoice-table{width:100%;min-width:970px;border-collapse:collapse;table-layout:fixed;direction:rtl}.legacy-invoice-table th{position:sticky;top:0;z-index:10;background:#18324b;color:#fff;font-size:10px;font-weight:800;padding:7px 3px;text-align:center;white-space:nowrap;border:1px solid #27465f}.legacy-invoice-table td{height:35px;padding:0;border:1px solid #d9e1e9;background:#fff;text-align:center;vertical-align:middle}.legacy-invoice-table tbody tr:hover td{background:#f4f9fd}.legacy-invoice-table tbody tr.row-highlight td{background:#fff4c6}.legacy-invoice-table th.action-col,.legacy-invoice-table td.action-col{width:48px}.legacy-invoice-table th.product-col{width:19%}.legacy-invoice-table th:nth-child(2){width:11%}.legacy-invoice-table th:nth-child(4){width:9%}.legacy-invoice-table th:nth-child(5){width:8%}.legacy-invoice-table th:nth-child(6){width:10%}.legacy-invoice-table th:nth-child(7){width:10%}.legacy-invoice-table th:nth-child(n+8){width:8%}.legacy-cell{width:100%;height:34px;border:0!important;border-radius:0!important;padding:4px 5px!important;background:transparent!important;color:#243447;text-align:center;font-size:11px;min-height:34px!important}.legacy-cell:focus{outline:2px solid #2f80ed!important;outline-offset:-2px;background:#fff!important;position:relative;z-index:3}.product-name-cell{text-align:right!important}.readonly-cell{background:#eef1f4!important;color:#66788a!important;font-size:10px}.legacy-product-picker{width:100%;position:relative}.legacy-product-picker .picker-results{top:36px;right:0;left:0;z-index:80;border-radius:5px}.legacy-number{font-weight:800;color:#253443;background:#fffced!important;font-size:11px;direction:ltr}.legacy-delete-btn{width:27px;height:25px;border:0;border-radius:4px;background:#d92d20;color:#fff;cursor:pointer;font-weight:800}.legacy-delete-btn:hover{background:#b42318}.discount-hidden{display:none!important}.legacy-product-inspector{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:6px 10px;background:#fffdf5;border-top:1px solid #f1dfb0;color:#725b22;font-size:10px;min-height:39px}.legacy-product-inspector dl{display:flex;align-items:center;gap:11px;margin:0}.legacy-product-inspector dt{font-weight:800}.legacy-product-inspector dd{margin:0;color:#344054;font-weight:700;direction:ltr}.legacy-footer-bar{grid-column:1 / -1;grid-row:2;display:flex;align-items:center;gap:7px;padding:8px 10px;direction:rtl;min-height:56px}.legacy-total-box{display:flex;align-items:center;gap:7px;background:#fff3bf;border:1px solid #edc84f;border-radius:5px;padding:6px 12px;min-width:185px;margin-left:auto}.legacy-total-box span{font-weight:800;color:#344054;font-size:12px}.legacy-total-box strong{color:#d92d20;font-size:20px;direction:ltr}.legacy-footer-field{display:flex;align-items:center;gap:4px;white-space:nowrap}.legacy-footer-field label{font-size:10px;font-weight:800;color:#344054}.legacy-footer-field input{width:69px;height:31px;text-align:center;border:1px solid #c9d3de;border-radius:4px;background:#fff;padding:4px;font-size:11px}.legacy-footer-field input[readonly]{background:#eef1f4}.legacy-actions{display:flex;align-items:center;gap:5px;margin-right:3px}.legacy-actions .btn{min-height:34px;padding:5px 10px;border-radius:5px;font-size:11px;font-weight:800}.legacy-actions .btn.danger{background:#e63946;color:#fff;border-color:#e63946}.legacy-actions .btn.success{background:#087f5b;color:#fff;border-color:#087f5b}.legacy-actions .muted-action{background:#5f6b73;color:#fff;border-color:#5f6b73}.legacy-actions .btn:not(.danger):not(.success):not(.muted-action){background:#087f5b;color:#fff;border-color:#087f5b}.legacy-actions .btn:hover{transform:none;filter:brightness(.96)}
@media(max-width:1100px){.legacy-invoice-layout{grid-template-columns:minmax(0,1fr) 260px;grid-template-rows:minmax(540px,calc(100vh - 235px)) auto}.legacy-footer-bar{flex-wrap:wrap}.legacy-total-box{margin-left:0}.legacy-actions{margin-right:auto}}
@media(max-width:820px){.invoice-page-heading{align-items:flex-start}.legacy-invoice-layout{display:flex;flex-direction:column;height:auto}.invoice-side-panel,.invoice-work-panel{min-height:auto}.invoice-side-panel{order:1}.invoice-work-panel{order:2;min-height:580px}.legacy-footer-bar{order:3}.legacy-product-inspector{align-items:flex-start;flex-direction:column}.legacy-product-inspector dl{flex-wrap:wrap}.legacy-search-strip input{font-size:17px}.legacy-actions{width:100%;justify-content:stretch}.legacy-actions .btn{flex:1}}
@media print{.topbar,.open-pages,.sidebar,.invoice-page-heading,.legacy-footer-bar .legacy-actions,.legacy-search-strip,.invoice-product-inspector{display:none!important}.content{padding:0!important}.legacy-invoice-layout{display:block;height:auto}.invoice-side-panel,.invoice-work-panel,.legacy-footer-bar{box-shadow:none;border:1px solid #777}.invoice-side-panel{display:block;margin-bottom:8px}.invoice-work-panel{display:block;min-height:0}.legacy-table-wrap{overflow:visible}.legacy-invoice-table{min-width:0}.legacy-footer-bar{display:flex!important;margin-top:8px}.legacy-footer-field{display:none}.legacy-total-box{margin-left:auto}}

/* Invoice list and detail screens */
.invoice-list-page,.invoice-detail-page{max-width:1600px;margin:0 auto}.invoice-list-head{margin-bottom:7px}.invoice-list-head h1{font-size:20px}.invoice-list-page .card,.invoice-detail-page .card{border-radius:7px;margin-bottom:8px}.invoice-list-page .filter-grid{gap:7px;padding:9px}.invoice-list-page .filter-grid label{font-size:11px;gap:3px}.invoice-list-page .filter-grid input,.invoice-list-page .filter-grid select{min-height:31px;padding:4px 7px;border-radius:5px;font-size:12px}.invoice-list-page .toolbar{padding:7px 9px}.invoice-list-page .data-table{min-width:820px}.invoice-list-page .data-table td,.invoice-list-page .data-table th{padding:6px 8px;font-size:12px}.invoice-list-page .data-table th{background:#18324b;color:#fff}.invoice-list-page .btn{min-height:31px;padding:5px 9px;font-size:11px}.invoice-detail-page .page-head{margin-bottom:7px}.invoice-detail-page .grid{gap:7px}.invoice-detail-page .card-body{padding:10px}.invoice-detail-page .card-header{padding:8px 11px;font-size:13px}.invoice-detail-page .data-table{min-width:720px}.invoice-detail-page .data-table td,.invoice-detail-page .data-table th{padding:6px 8px;font-size:11px}.invoice-detail-page .summary{padding:9px 11px;gap:18px}.invoice-detail-page .summary strong{font-size:16px}.invoice-detail-page textarea{min-height:60px}

/* Main category navigation and focused daily sidebar */
.topbar-center{display:flex;align-items:center;gap:10px;flex:1;min-width:0;margin-right:auto}.topbar-center .quick-search{flex:0 1 300px;width:auto;margin:0}.category-bar{display:flex;align-items:center;gap:5px;min-width:0;overflow-x:auto;scrollbar-width:thin}.category-item{position:relative;flex:0 0 auto}.category-button{display:flex;align-items:center;gap:5px;border:1px solid #ffffff33;border-radius:8px;background:#ffffff12;color:#fff;padding:7px 9px;cursor:pointer;white-space:nowrap;font-size:12px;font-weight:700}.category-button:hover,.category-button[aria-expanded="true"]{background:#fff;color:var(--navy)}.category-button span{font-size:12px;color:#c7d8e9}.category-button[aria-expanded="true"] span{color:var(--navy)}.category-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:205px;max-height:380px;overflow:auto;padding:6px;background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 18px 40px #0f274533;z-index:90}.category-menu[hidden]{display:none}.category-menu a{display:block;color:var(--text);text-decoration:none;padding:8px 10px;border-radius:6px;font-size:12px;white-space:nowrap}.category-menu a:hover{background:var(--blue-soft);color:#124e7d;font-weight:700}.sidebar .menu-groups{display:flex;flex-direction:column;gap:2px}.sidebar .side-link{font-size:12px;padding:7px 10px;margin:0}.sidebar .side-link.active{border-right:3px solid var(--blue);padding-right:7px}
@media(max-width:1250px){.topbar{gap:12px;padding-left:14px;padding-right:14px}.brand{min-width:175px;font-size:16px}.topbar-center{flex-direction:column;align-items:stretch;gap:6px}.topbar-center .quick-search{flex-basis:auto;width:100%}.category-bar{width:100%}.category-menu{position:fixed;top:108px;right:auto;left:auto;max-width:calc(100vw - 24px)}}
@media(max-width:820px){.topbar-center{order:3;flex-basis:100%}.category-bar{padding-bottom:2px}.category-button{font-size:11px;padding:6px 8px}.category-menu{top:150px}.sidebar .menu-groups{display:flex;flex-direction:row;overflow:auto}.sidebar .side-link{min-width:145px}}
@media(max-width:700px){.topbar-center{width:100%}.category-bar{overflow-x:auto}.category-menu{position:absolute;top:calc(100% + 6px);right:0;left:auto}.sidebar .menu-groups{display:flex;flex-direction:row}.sidebar .side-link{min-width:140px}.sidebar{max-height:175px}}

.payment-buttons{display:flex;gap:5px;flex-wrap:wrap}.payment-button{flex:1;border:1px solid #c8d2de;border-radius:5px;background:#f8fafc;color:#344054;padding:7px 8px;cursor:pointer;font-size:12px;font-weight:800}.payment-button:hover,.payment-button.active{background:#e5f2ff;border-color:#2385c5;color:#0d5b8b}.static-value{min-height:32px;padding:5px 8px;border:1px solid #c8d2de;border-radius:5px;background:#eef4f8;font-weight:800}.unit-cell{cursor:pointer;background:#fff!important}.legacy-cell.editable-total{background:#fffdf0!important;font-weight:800;color:#9a6700}.legacy-extra-costs{display:flex;align-items:center;gap:5px;flex-wrap:wrap;border:1px solid #f0d99c;background:#fffaf0;padding:5px 7px;border-radius:5px}.legacy-extra-costs label{font-size:10px;font-weight:800;color:#725b22}.legacy-extra-costs select,.legacy-extra-costs input{height:29px;border:1px solid #d8c28d;border-radius:4px;padding:3px 5px;font-size:10px;min-width:80px}.legacy-extra-costs input{width:125px}.legacy-product-inspector dl{flex-wrap:wrap}

/* التعديلات التراكمية: تخطيط ثابت للفواتير، جدول مرن، وقوائم علوية قابلة للفتح */
.topbar,.topbar-center,.category-bar{overflow:visible!important}.category-bar{position:relative;z-index:200}.category-menu{z-index:300!important}.page-head .section-kicker,.invoice-page-heading .section-kicker{display:none!important}.datagrid-focused{background:#fff9e6!important;box-shadow:inset 0 0 0 2px #2f80ed!important}.legacy-invoice-layout{height:calc(100vh - 222px);grid-template-rows:minmax(0,1fr) auto}.invoice-side-panel{height:100%;min-height:0}.invoice-work-panel{height:100%;min-height:0;overflow:hidden}.legacy-table-wrap{min-height:0;flex:1;overflow:auto}.legacy-footer-bar{direction:ltr;justify-content:flex-start;min-height:54px;flex-shrink:0}.legacy-total-box{order:1;margin:0 0 0 0;direction:rtl}.legacy-footer-field{order:2;direction:rtl}.legacy-actions{order:3;margin-left:auto;margin-right:0;direction:rtl}.legacy-footer-bar .legacy-extra-costs{order:2;direction:rtl}.legacy-footer-bar .legacy-total-box strong{direction:ltr}.legacy-footer-bar input:focus,.legacy-footer-bar select:focus,.legacy-extra-costs input:focus,.legacy-extra-costs select:focus{outline:2px solid #2f80ed;outline-offset:-1px}
.extra-cost-heading{display:flex;align-items:center;gap:6px;width:100%}.extra-cost-add{border:1px solid #d2a541;background:#fff8dc;color:#825b00;border-radius:4px;padding:3px 6px;font-size:10px;cursor:pointer}.extra-cost-lines{display:flex;flex-direction:column;gap:3px}.extra-cost-line{display:flex;gap:3px;align-items:center}.extra-cost-line input:first-child{width:130px}.extra-cost-line input[data-extra-cost-amount]{width:75px}.extra-cost-line button{border:0;background:#b42318;color:#fff;border-radius:4px;width:22px;height:23px;cursor:pointer}.extra-cost-controls{display:flex;align-items:center;gap:4px}.extra-cost-controls input[readonly]{background:#eef1f4}
@media(max-width:1100px){.legacy-invoice-layout{height:calc(100vh - 245px)}.legacy-footer-bar{flex-wrap:nowrap;overflow:auto}.legacy-extra-costs{max-width:310px}.legacy-actions{margin-left:auto;flex-shrink:0}}
@media(max-width:820px){.legacy-invoice-layout{height:auto;min-height:0}.invoice-side-panel,.invoice-work-panel{height:auto}.invoice-work-panel{min-height:580px}.legacy-footer-bar{direction:rtl;flex-wrap:wrap;overflow:visible}.legacy-total-box{order:1;margin-left:auto}.legacy-footer-field,.legacy-extra-costs{order:2}.legacy-actions{order:3;width:100%;margin:0;justify-content:flex-start}}

.payment-inline-summary{display:flex;justify-content:space-between;gap:8px;margin-top:5px;padding:5px 7px;border:1px solid #d8e1eb;border-radius:4px;background:#f7fafc;color:#475467;font-size:11px}.payment-inline-summary b{color:#0f4c81;direction:ltr;display:inline-block}.product-entry-card{max-width:1200px;margin-inline:auto}.product-entry-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 15px}.product-entry-grid .field{display:flex;align-items:center;gap:7px}.product-entry-grid .field label{width:86px;flex:0 0 86px;font-weight:800;color:#344054;font-size:12px}.product-entry-grid .field input,.product-entry-grid .field select{flex:1;min-width:0;min-height:36px;border:1px solid #c8d2de;border-radius:5px;padding:5px 8px;background:#fff}.product-entry-grid .product-name-field{grid-column:span 2}.product-entry-grid .field-with-action{display:flex;flex:1;min-width:0}.product-entry-grid .field-with-action select{width:100%}.product-entry-grid input:focus,.product-entry-grid select:focus{outline:2px solid #2f80ed;border-color:#2f80ed}@media(max-width:1000px){.product-entry-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.product-entry-grid .product-name-field{grid-column:span 2}}@media(max-width:600px){.product-entry-grid{grid-template-columns:1fr}.product-entry-grid .product-name-field{grid-column:auto}.product-entry-grid .field label{width:105px;flex-basis:105px}}

/* Smart account and settings controls */
.account-picker,.smart-field{position:relative;display:flex;flex:1;min-width:0}.account-picker input[data-account-input],.smart-field input[data-account-input]{width:100%;min-height:34px}.smart-results{position:absolute;top:calc(100% + 3px);right:0;left:0;z-index:120;background:#fff;border:1px solid var(--line);border-radius:7px;box-shadow:0 12px 28px rgba(15,35,58,.16);max-height:240px;overflow:auto}.smart-results:empty{display:none}.picker-result{display:block;width:100%;border:0;border-bottom:1px solid #eef2f6;background:#fff;text-align:right;padding:8px 10px;cursor:pointer;color:var(--text)}.picker-result:hover{background:var(--blue-soft);color:#124e7d}.permissions-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0}.permission-item{display:flex;flex-direction:column;gap:2px;padding:9px;border:1px solid var(--line);border-radius:7px;background:#fbfcfe;font-size:12px}.permission-item small{color:var(--muted);font-size:10px;direction:ltr;text-align:right}.role-editor{border-top:1px solid var(--line);padding:10px 0}.role-editor summary{font-weight:800;cursor:pointer}@media(max-width:700px){.permissions-grid{grid-template-columns:1fr}}

/* واجهة الإدخال الجديدة */
.field-with-action{display:flex;align-items:center;gap:6px}.field-with-action select,.field-with-action input{flex:1;min-width:0}.add-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;background:#166534;color:#fff;text-decoration:none;font-size:20px;font-weight:700}.add-btn:hover{background:#14532d}.invoice-stock-availability{margin:10px 0;padding:10px 14px;background:#fff7c2;border:1px solid #eab308;border-radius:8px;color:#713f12;font-weight:700}.account-balance-hint{display:block;margin-top:4px;color:#075985;background:#e0f2fe;border-radius:5px;padding:4px 7px;font-size:12px}.last-login{display:block;font-size:11px;color:#64748b;margin-top:2px}.user-chip{display:inline-flex;flex-direction:column;align-items:flex-start}.expired{color:#b91c1c!important;font-weight:700}
@media print{.invoice-stock-availability{background:#fff!important;color:#000;border:1px solid #777}}
.smart-select{position:relative;width:100%}.smart-select>select{display:none!important}.smart-select-input{width:100%;min-height:34px;padding:6px 9px;border:1px solid #c8d2de;border-radius:5px;background:#fff;color:var(--text,#26384a);font:inherit}.smart-select-input:focus{outline:2px solid #2f80ed;border-color:#2f80ed}.smart-select-menu{position:absolute;top:calc(100% + 3px);right:0;left:0;max-height:280px;overflow:auto;background:#fff;border:1px solid #cbd5e1;border-radius:6px;box-shadow:0 14px 30px rgba(15,39,67,.18);z-index:500}.smart-select-menu[hidden]{display:none}.smart-select-option{display:block;width:100%;padding:8px 10px;border:0;border-bottom:1px solid #eef2f6;background:#fff;text-align:right;cursor:pointer;font:inherit;font-size:12px}.smart-select-option:hover,.smart-select-option.active{background:#eef7ff}.universal-context-menu{position:fixed;min-width:210px;max-width:290px;padding:5px;background:#fff;border:1px solid #cbd5e1;border-radius:7px;box-shadow:0 18px 42px rgba(15,39,67,.22);z-index:2000}.universal-context-menu[hidden]{display:none}.universal-context-menu button{display:block;width:100%;padding:8px 10px;border:0;border-bottom:1px solid #eef2f6;background:#fff;text-align:right;cursor:pointer;font:inherit;font-size:12px}.universal-context-menu button:hover{background:#eef7ff;color:#124e7d;font-weight:700}

.simple-journal-grid{display:grid;grid-template-columns:2fr 2fr 1fr;gap:8px;padding:10px}.simple-journal-grid .field{min-width:0}@media(max-width:800px){.simple-journal-grid{grid-template-columns:1fr}}

/* Keyboard-first, compact desktop accounting layout */
.form-focus-right,.form-right-focus{display:flex;flex-direction:column;align-items:stretch}.form-focus-right .form-grid,.form-right-focus .form-grid{grid-template-columns:minmax(320px,1fr) minmax(280px,1fr) minmax(240px,1fr)}.form-focus-right .field:first-child,.form-right-focus .field:first-child{grid-column:1}.form-focus-right input,.form-focus-right select,.form-focus-right textarea{min-height:34px}.form-focus-right .actions{align-items:center}.picker-results,.smart-select-menu{font-size:12px}.picker-option,.picker-result,.smart-select-option{min-height:34px}.compact{max-width:130px}.number{font-variant-numeric:tabular-nums}.keyboard-hint{font-size:11px;color:var(--muted)}

.context-help{font-size:11px;color:var(--muted);margin-top:3px}.form-focus-right{max-width:1400px;margin-inline:auto}.form-focus-right .form-grid,.form-right-focus .form-grid{align-items:start}.smart-picker:focus-within,.account-picker:focus-within{z-index:600}

.merge-product-box{display:grid;grid-template-columns:minmax(220px,1fr) minmax(260px,420px) auto;gap:10px;align-items:end;margin-top:14px;padding:12px;border:1px solid var(--line);border-radius:10px;background:#fafcff}.merge-product-box .hint{margin:4px 0 0}@media(max-width:800px){.merge-product-box{grid-template-columns:1fr}.merge-product-box .btn{width:100%}}

/* Stage 2: unified desktop-style data-entry density */
.form-focus-right,.journal-form,.card[data-standalone-create],.product-entry-card{direction:rtl}
.form-focus-right .form-grid,.journal-form .form-grid,.card[data-standalone-create] .form-grid{gap:7px 10px}
.form-focus-right .field,.journal-form .field,.card[data-standalone-create] .field{gap:4px}
.form-focus-right .field label,.journal-form .field label,.card[data-standalone-create] .field label{margin-bottom:0;font-size:12px;font-weight:800}
.form-focus-right input,.form-focus-right select,.form-focus-right textarea,.journal-form input,.journal-form select,.journal-form textarea,.card[data-standalone-create] input,.card[data-standalone-create] select,.card[data-standalone-create] textarea{min-height:33px;padding:5px 8px}
.form-focus-right .card-body,.journal-form .card-body,.card[data-standalone-create] .card-body{padding:10px 12px}
.data-table th,.data-table td{padding:6px 7px}
.actions .btn.small{min-height:29px;padding:4px 8px}

/* Compact product extras and image preview */
.product-extra-details{grid-column:1 / -1;border:1px solid var(--border,#ddd);border-radius:8px;padding:8px 10px;background:var(--surface-muted,#fafafa)}
.product-extra-details>summary{cursor:pointer;font-weight:700;list-style:none}
.product-extra-details>summary::-webkit-details-marker{display:none}
.compact-extra-grid{margin-top:10px}
.product-image-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);z-index:2000}
.product-image-modal[hidden]{display:none}
.product-image-dialog{background:#fff;padding:12px;border-radius:10px;max-width:min(760px,90vw);max-height:85vh;overflow:auto}
.product-image-dialog img{max-width:700px;max-height:70vh;display:block;margin:0 auto}
.product-image-actions{text-align:center;margin-top:10px}

.settings-toggle-grid{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:8px}
.settings-toggle-grid label{min-width:170px}

/* Stage 6: consistent desktop accounting forms — important fields stay compact and visually grouped on the right. */
.page-head{margin-bottom:8px}.page-head h1{margin-bottom:2px}.page-head p{margin:0;font-size:12px}
.form-focus-right .form-grid{grid-template-columns:minmax(220px,300px) minmax(260px,1fr) minmax(260px,1fr);align-items:start}
.form-focus-right .field{min-width:0}.form-focus-right .field input,.form-focus-right .field select,.form-focus-right .field textarea{width:100%}
.form-focus-right .actions{justify-content:flex-start}
.context-menu-note{font-size:11px;color:var(--muted);padding:4px 8px}
@media(max-width:900px){.form-focus-right .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.form-focus-right .form-grid{grid-template-columns:1fr}}


/* UI Phase: unified desktop-first entry experience */
.ui-standard-form{direction:rtl}
.ui-standard-form .form-grid{display:grid;grid-template-columns:minmax(220px,300px) minmax(280px,1fr) minmax(280px,1fr);gap:6px 10px;align-items:start}
.ui-standard-form .field{min-width:0;gap:5px;min-height:34px}
.ui-standard-form .field label{width:82px;flex:0 0 82px;font-size:12px;font-weight:800;line-height:1.35;color:#344054;text-align:right}
.ui-standard-form .field input,.ui-standard-form .field select,.ui-standard-form .field textarea{min-height:33px;padding:5px 8px;border-radius:5px}
.ui-standard-form .field:focus-within label{color:#124e7d}
.ui-standard-form .span-2{grid-column:span 2}
.ui-standard-form .span-3{grid-column:span 3}
.ui-standard-form .form-grid>.field:nth-child(-n+3){order:0}
.ui-standard-form .form-grid>.field .hint,.ui-standard-form .field .hint-inline{font-size:10px}
.ui-standard-form .actions{margin-top:6px;padding-top:8px;border-top:1px solid var(--line)}
.ui-standard-form .actions .btn{min-height:34px;padding:6px 11px}
.ui-standard-form .card-body{padding:10px 12px}
.ui-standard-form .card{margin-bottom:10px}
.ui-standard-form .smart-picker input,.ui-standard-form .smart-select-input{min-height:33px}

/* Strong visual priority for the first/right-most fields without making the rest noisy. */
.ui-standard-form .focus-primary{grid-column:1;grid-row:auto}
.ui-standard-form .focus-primary input,.ui-standard-form .focus-primary select{font-weight:700;background:#fcfeff;border-color:#aec8df}

/* Keyboard-first affordance */
[data-keyboard-first="1"] .ui-standard-form input:focus,
[data-keyboard-first="1"] .ui-standard-form select:focus,
[data-keyboard-first="1"] .ui-standard-form textarea:focus,
[data-keyboard-first="1"] .smart-picker input:focus,
[data-keyboard-first="1"] .smart-select-input:focus{outline:2px solid #2f80ed;outline-offset:-1px}
.keyboard-shortcuts{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:10px;white-space:nowrap}
.keyboard-shortcuts kbd{border:1px solid #cbd5e1;border-bottom-width:2px;border-radius:4px;padding:1px 5px;background:#f8fafc;color:#475467;font:inherit}

/* Context menus behave like compact desktop application menus. */
.universal-context-menu{border-radius:6px;padding:4px;min-width:225px}
.universal-context-menu button{min-height:34px;padding:7px 10px}
.universal-context-menu button:first-child{border-radius:5px 5px 0 0}
.universal-context-menu button:last-child{border-bottom:0;border-radius:0 0 5px 5px}

@media(max-width:1100px){
  .ui-standard-form .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ui-standard-form .span-3{grid-column:span 2}
}
@media(max-width:700px){
  .ui-standard-form .form-grid{grid-template-columns:1fr}
  .ui-standard-form .span-2,.ui-standard-form .span-3{grid-column:span 1}
  .ui-standard-form .field label{width:95px;flex-basis:95px}
}

.ui-standard-form .important-field{grid-column:1!important}
.ui-standard-form .important-field.focus-primary{position:relative}
.ui-standard-form .important-field.focus-primary::before{content:'';position:absolute;inset:-2px -3px -2px -3px;border-right:2px solid #9fc3e3;border-radius:5px;pointer-events:none;opacity:.35}
.category-button:focus-visible,.category-menu a:focus-visible,.side-link:focus-visible,.btn:focus-visible,.top-notifications:focus-visible{outline:2px solid #8ec5f4;outline-offset:2px}
@media(max-width:1100px){.ui-standard-form .important-field{grid-column:1!important}}
@media(max-width:700px){.ui-standard-form .important-field{grid-column:1!important}}
.topbar-center>.keyboard-shortcuts{color:#d8e5f3;padding:2px 4px}
.topbar-center>.keyboard-shortcuts kbd{border-color:#ffffff38;background:#ffffff12;color:#e5eef8}
@media(max-width:1250px){.topbar-center>.keyboard-shortcuts{align-self:flex-start}}

/* UI Phase: project-wide visual rhythm */
.content{padding:14px 18px}
.card{border-radius:7px;margin-bottom:10px}
.card-header{padding:9px 12px;font-size:13px}
.card-body{padding:10px 12px}
.toolbar{padding:8px 10px}
.data-table th,.data-table td{padding:6px 7px}
.page-head{margin-bottom:8px}
.btn{min-height:34px;padding:6px 11px;border-radius:6px}
.side-link{padding:7px 9px}
.open-pages{min-height:38px;padding:4px 16px}
.open-page{padding:5px 8px}

/* Final UI review pass: make legacy invoice/workspace feel like the same desktop application. */
.legacy-invoice-layout .legacy-form-group{gap:3px}
.legacy-invoice-layout .legacy-form-group>label{font-size:11px;line-height:1.25}
.legacy-invoice-layout .legacy-form-group input,.legacy-invoice-layout .legacy-form-group select,.legacy-invoice-layout .legacy-form-group textarea,.legacy-invoice-layout .smart-picker input,.legacy-invoice-layout .smart-select-input{min-height:31px;height:31px;padding:4px 7px}
.legacy-invoice-layout .invoice-side-content{gap:7px;padding:8px}
.legacy-invoice-layout .legacy-search-strip{padding:7px 10px}
.legacy-invoice-layout .legacy-search-strip input{height:43px;font-size:19px}
.legacy-invoice-layout .legacy-invoice-table th{padding:5px 3px}
.legacy-invoice-layout .legacy-invoice-table td,.legacy-invoice-layout .legacy-cell{height:32px;min-height:32px!important}
.legacy-invoice-layout .legacy-footer-bar{gap:6px;padding:6px 8px}
.legacy-invoice-layout .legacy-footer-field input{height:29px}
.legacy-invoice-layout .legacy-actions .btn{min-height:32px}

/* Context menus now work consistently on all smart reference fields. */
.smart-select .smart-select-input{cursor:default}
.smart-select .smart-select-input:focus{box-shadow:inset 0 0 0 1px #2f80ed}
.smart-select-menu .smart-select-option strong{display:block}
.smart-select-menu .smart-select-option small{display:block;color:#66788a;font-size:10px;margin-top:2px}

/* Keep primary information visually concentrated in the right-most column on desktop. */
@media(min-width:1101px){
  .ui-standard-form .important-field{grid-column:1!important}
  .ui-standard-form .important-field~.important-field{grid-column:1!important}
  .ui-standard-form .form-grid{grid-auto-flow:row}
}

/* Desktop data-entry rows: compact, stable focus state and less visual noise. */
.ui-standard-form .field input:disabled,.ui-standard-form .field select:disabled,.ui-standard-form .field textarea:disabled{background:#f3f5f7;color:#7a8695}
.ui-standard-form .field input[readonly],.ui-standard-form .field select[readonly],.ui-standard-form .field textarea[readonly]{background:#f5f7f9}

/* Desktop-reference affordances: F4 opens the active picker; Shift+F10 opens its context menu. */
.smart-select-input::after{content:''}
/* Dense desktop-style party summary */
.summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:8px 0}
.summary-card{border:1px solid var(--border,#d8dee6);background:var(--card,#fff);border-radius:6px;padding:10px 12px;display:flex;flex-direction:column;gap:3px;min-height:72px}
.summary-card small{font-size:12px;opacity:.72}.summary-card strong{font-size:21px;line-height:1.15}.summary-card span{font-size:12px;opacity:.7}
@media (max-width:900px){.summary-grid{grid-template-columns:1fr}.summary-card{min-height:auto}}

.legacy-extra-cost-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:11px;font-weight:800;white-space:nowrap}.legacy-extra-cost-toggle input{margin:0}.legacy-extra-cost-toggle .hint-inline{font-weight:400}.form-grid>*{min-width:0}.table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.actions{flex-wrap:wrap}@media(max-width:700px){.legacy-extra-cost-toggle{width:100%;white-space:normal}.form-grid{grid-template-columns:1fr!important}.form-grid .span-2,.form-grid .span-3{grid-column:auto!important}.btn{max-width:100%}}

.unit-management-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.unit-management-head h3{margin:0 0 4px}.unit-management-head p{margin:0}.unit-management-table td{vertical-align:middle}.unit-editor-card{margin-top:12px}.unit-editor-card .form-grid{align-items:end}@media(max-width:700px){.unit-management-head{flex-direction:column;align-items:stretch}.unit-management-head .btn{width:100%}.unit-management-table{min-width:760px}}
.branch-access-box{grid-column:1/-1}.branch-access-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin-top:8px}.branch-access-grid.compact{min-width:360px;margin:8px 0}.branch-access-item{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--border,#ddd);border-radius:10px;padding:8px 10px;background:var(--surface,#fff)}.branch-write-toggle{font-size:12px;white-space:nowrap}.branch-access-item input{vertical-align:middle}@media(max-width:700px){.branch-access-grid.compact{min-width:0;grid-template-columns:1fr}}

/* Final business UI standardization */
.branch-context{display:flex;align-items:center}.branch-switch-form{margin:0}.branch-switch-form select{height:32px;min-width:150px;border:1px solid var(--line);border-radius:6px;background:#fff;padding:4px 8px;font:inherit}.current-branch{font-size:12px;font-weight:800;color:#344054;background:#f8fafc;border:1px solid var(--line);border-radius:6px;padding:7px 9px}.stock-transfer-lines .legacy-cell{font-size:11px}.stock-transfer-lines td{height:36px}.stock-transfer-lines .readonly-cell{background:#eef1f4!important}.stock-transfer-lines tbody tr.row-highlight td{background:#fff8d6}.check input,.permission-item input,.branch-access-item input{width:15px!important;height:15px!important;min-width:15px!important;min-height:15px!important;margin:0!important}.legacy-footer-bar{position:sticky;bottom:0;z-index:25}@media(min-width:1200px){.content{width:100%;max-width:none}.legacy-invoice-layout{grid-template-columns:minmax(0,1fr) 320px}}@media(max-width:800px){.top-actions{flex-wrap:wrap}.branch-switch-form select{min-width:120px}.legacy-footer-bar{flex-wrap:wrap}.legacy-total-box{width:100%;margin-left:0}.legacy-actions{flex-wrap:wrap}.stock-transfer-lines{min-width:760px}}

/* Final unified controls / branch context / invoice action bar */
.form-grid select:focus,.form-grid input:focus,.data-table input:focus,.data-table select:focus{outline:2px solid rgba(0,0,0,.12);outline-offset:1px}
.field-with-action{display:flex;gap:6px;align-items:stretch}.field-with-action>select,.field-with-action>.smart-picker{flex:1;min-width:0}.field-with-action .add-btn{flex:0 0 38px}
.invoice-footer-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
@media (min-width:1500px){.content{max-width:none}.layout{width:100%;}.form-grid{grid-template-columns:repeat(6,minmax(150px,1fr));}.card{width:100%;}}
@media (max-width:900px){.invoice-footer-actions{position:static}.invoice-footer-actions .btn{flex:1 1 180px}.data-table{min-width:720px}.table-wrap{overflow-x:auto}}
.uom-conversion-result{display:flex;align-items:center;min-height:44px;padding:0 12px;border:1px solid var(--border-color,#ddd);border-radius:10px;font-weight:700}

.auto-note{min-height:34px;padding:7px 10px;border:1px dashed #c8d2de;border-radius:6px;background:#f8fbfd;font-size:12px;line-height:1.6}.auto-note .badge{margin-inline-end:6px}

/* Final responsive/control normalization: compact native controls across the application. */
input[type="checkbox"],input[type="radio"]{width:15px!important;height:15px!important;min-width:15px!important;min-height:15px!important;padding:0!important;accent-color:var(--blue);vertical-align:middle;box-shadow:none!important}
label:has(> input[type="checkbox"]),label:has(> input[type="radio"]){display:inline-flex;align-items:center;gap:6px}
.purchase-extra-cost-section .legacy-extra-cost-toggle input[type="checkbox"]{flex:0 0 15px}
.legacy-footer-bar{margin-top:6px;box-shadow:0 -4px 14px rgba(16,24,40,.05);background:#fff}
.legacy-footer-bar .legacy-actions{margin-inline-start:auto;align-items:center}
.legacy-footer-bar .legacy-actions .btn{white-space:nowrap}
@media(min-width:1400px){.content{padding-inline:32px}}
@media(max-width:600px){.content{padding:12px}.legacy-footer-bar{padding:7px}.legacy-actions .btn{flex:1 1 140px}.legacy-footer-field{flex:1 1 120px}}


.portal-popup{position:fixed!important;z-index:100000!important;box-sizing:border-box;isolation:isolate;}
.smart-select-menu.portal-popup,.picker-results.portal-popup,.legacy-search-menu.portal-popup,.quick-results.portal-popup{background:#fff;overflow:auto;}.legacy-search-menu.portal-popup,.legacy-product-picker .picker-results.portal-popup,.legacy-invoice-table .picker-results.portal-popup{inset-inline:auto;transform:none;pointer-events:auto;} .portal-popup[hidden]{display:none!important;}

/* Settings navigation: grouped administrative tabs and compact management links. */
.settings-tabs-card .tabs{width:100%}
.settings-tabs-card .tab-list{margin-bottom:2px;position:sticky;top:0;z-index:5;background:var(--surface,#fff);padding-top:2px}
.settings-tabs-card .tab-btn{font-weight:600}
.settings-tabs-card .tab-content{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
.settings-tabs-card .tab-content .field{min-width:0}
.settings-tabs-card .tab-content .span-3{grid-column:1 / -1}
.settings-link-grid{display:flex;flex-wrap:wrap;gap:8px}
.alert.warning{background:#fffaeb;border:1px solid #fedf89;color:#92400e}
@media(max-width:900px){.settings-tabs-card .tab-content{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.settings-tabs-card .tab-list{overflow-x:auto;flex-wrap:nowrap}.settings-tabs-card .tab-btn{white-space:nowrap}.settings-tabs-card .tab-content{grid-template-columns:1fr}.settings-tabs-card .tab-content .span-3{grid-column:1}.settings-link-grid .btn{flex:1 1 180px}}

/* Crystal POS 8-Pillar Visual Polish */
tr.selected-line td { background-color: #e8f2ff !important; border-top: 1px solid #70a1ff; border-bottom: 1px solid #70a1ff; }
tr.selected-line td:first-child { border-inline-start: 4px solid #1e90ff; }
.legacy-search-menu.portal-popup, .picker-results.portal-popup {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  padding: 4px;
}
.legacy-search-option.active, .picker-option.active {
  background-color: #2563eb !important;
  color: #ffffff !important;
}
.legacy-search-option.active strong, .legacy-search-option.active small,
.picker-option.active strong, .picker-option.active small {
  color: #ffffff !important;
}
select[data-unit-select]:focus {
  outline: 2px solid #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

/* =====================================================
   Page Breadcrumb / Unified Page Title Bar
   ===================================================== */
.page-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  background: linear-gradient(90deg, #f0f6ff, #f8fafc);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
  min-height: 34px;
  position: sticky;
  top: 0;
  z-index: 15;
}
.page-breadcrumb .breadcrumb-title {
  font-weight: 800;
  color: var(--navy);
  font-size: 14px;
}
.page-breadcrumb .breadcrumb-sep { color: #c0c9d6; font-size: 11px; }
.page-breadcrumb .breadcrumb-home { color: var(--blue); text-decoration: none; font-weight: 600; }
.page-breadcrumb .breadcrumb-home:hover { text-decoration: underline; }

/* =====================================================
   Toast Notification System
   ===================================================== */
#toast-container {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: 380px;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14), 0 2px 6px rgba(0,0,0,0.08);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  pointer-events: all;
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  transition: opacity 0.28s ease, transform 0.28s ease;
  direction: rtl;
  text-align: right;
  min-width: 240px;
}
.toast.toast-show { opacity: 1; transform: translateY(0) scale(1); }
.toast-success { border-right: 4px solid #16a34a; }
.toast-danger  { border-right: 4px solid #dc2626; }
.toast-warning { border-right: 4px solid #d97706; }
.toast-info    { border-right: 4px solid #2563eb; }
.toast-icon {
  font-size: 18px;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}
.toast-success .toast-icon { color: #16a34a; }
.toast-danger  .toast-icon { color: #dc2626; }
.toast-warning .toast-icon { color: #d97706; }
.toast-info    .toast-icon { color: #2563eb; }
.toast-msg { flex: 1; line-height: 1.5; }
.toast-close {
  border: none;
  background: none;
  cursor: pointer;
  color: #94a3b8;
  font-size: 18px;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
  transition: color 0.2s;
}
.toast-close:hover { color: var(--text); }

/* =====================================================
   Fix: important-field should NOT reflow grid on focus
   Use visual highlight only — no grid-column override
   ===================================================== */
.ui-standard-form .important-field { /* visual marker only */ }
.ui-standard-form .important-field-highlighted input,
.ui-standard-form .important-field-highlighted select {
  background: #fcfeff !important;
  border-color: #aec8df !important;
}
/* Remove old focus-primary grid placement rule that caused jump */
.ui-standard-form .focus-primary { grid-column: unset !important; }

/* =====================================================
   Fix: portal-popup must never inherit RTL from parent
   It is always positioned absolutely via fixed coords
   ===================================================== */
.portal-popup {
  position: fixed !important;
  z-index: 100000 !important;
  box-sizing: border-box;
  isolation: isolate;
  direction: rtl;
  text-align: right;
}
.portal-popup[hidden] { display: none !important; }

/* =====================================================
   Table rows: Edit & Delete action buttons
   ===================================================== */
.row-actions { display: flex; gap: 4px; align-items: center; justify-content: center; white-space: nowrap; }
.row-actions .btn { min-height: 26px; padding: 3px 8px; font-size: 11px; }
.row-actions .btn-edit  { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.row-actions .btn-edit:hover  { background: #dbeafe; }
.row-actions .btn-delete { background: #fff1f1; border-color: #fca5a5; color: #b91c1c; }
.row-actions .btn-delete:hover { background: #fee2e2; }
.data-table td.actions-cell { white-space: nowrap; text-align: center; }
.data-table th.actions-cell { text-align: center; }

/* =====================================================
   Duplicate detection warning
   ===================================================== */
.duplicate-hint {
  display: none;
  color: #b45309;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  margin-top: 3px;
}
.duplicate-hint.visible { display: block; }

/* =====================================================
   Professional Invoice Print Layout
   ===================================================== */
@media print {
  /* Hide all UI chrome */
  .topbar,
  .open-pages,
  .sidebar,
  .category-bar,
  .page-breadcrumb,
  .invoice-page-heading,
  .legacy-footer-bar .legacy-actions,
  .legacy-search-strip,
  .invoice-product-inspector,
  .legacy-product-inspector,
  [data-sidebar-toggle],
  #toast-container,
  .btn,
  nav,
  .no-print { display: none !important; }

  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { font-family: 'Arial', sans-serif !important; background: #fff !important; color: #000 !important; font-size: 11pt; }
  .content { padding: 0 !important; }
  .layout { display: block !important; }
  .sidebar { display: none !important; }

  /* === PROFESSIONAL INVOICE PRINT: hide screen layout, show print template === */
  .legacy-invoice-layout,
  .invoice-page-heading,
  .invoice-detail-page .page-head,
  .invoice-detail-page section { display: none !important; }

  /* Show the dedicated print invoice block */
  .invoice-print-block { display: block !important; }
}

/* =====================================================
   Invoice Print Block (screen: hidden, print: visible)
   ===================================================== */
.invoice-print-block {
  display: none;
  direction: rtl;
  font-family: 'Arial', 'Tahoma', sans-serif;
  font-size: 11pt;
  color: #1a1a2e;
  max-width: 210mm;
  margin: 0 auto;
  padding: 8mm 10mm;
}
.ipb-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 3px solid #1e3a5f;
  padding-bottom: 6mm;
  margin-bottom: 5mm;
}
.ipb-company { text-align: right; }
.ipb-company h2 { font-size: 20pt; color: #1e3a5f; margin: 0 0 4px; font-weight: 900; }
.ipb-company p { font-size: 9pt; color: #555; margin: 2px 0; }
.ipb-logo { width: 28mm; height: 28mm; object-fit: contain; border-radius: 4mm; }
.ipb-meta { text-align: left; background: #f0f7ff; border: 1px solid #bdd7f0; border-radius: 3mm; padding: 4mm 5mm; min-width: 55mm; }
.ipb-meta .inv-title { font-size: 15pt; font-weight: 900; color: #1e3a5f; margin: 0 0 4px; }
.ipb-meta p { font-size: 9pt; margin: 2px 0; }
.ipb-meta strong { color: #1e3a5f; }
.ipb-party {
  display: flex;
  gap: 6mm;
  background: linear-gradient(90deg,#f0f7ff,#f8fbff);
  border: 1px solid #c8ddf0;
  border-radius: 3mm;
  padding: 4mm 5mm;
  margin-bottom: 5mm;
}
.ipb-party-col { flex: 1; }
.ipb-party-col h4 { font-size: 9pt; color: #1e3a5f; border-bottom: 1px solid #c8ddf0; padding-bottom: 1mm; margin: 0 0 2mm; font-weight: 800; }
.ipb-party-col p { font-size: 9pt; margin: 1px 0; }
.ipb-table { width: 100%; border-collapse: collapse; margin-bottom: 5mm; }
.ipb-table thead th {
  background: #1e3a5f;
  color: #fff;
  padding: 5px 8px;
  font-size: 9.5pt;
  text-align: right;
  white-space: nowrap;
}
.ipb-table tbody td {
  border-bottom: 1px solid #e2e8f0;
  padding: 5px 8px;
  font-size: 9.5pt;
  vertical-align: top;
}
.ipb-table tbody tr:nth-child(even) td { background: #f6f9fc; }
.ipb-table tfoot td { background: #eaf0f8; font-weight: 700; padding: 5px 8px; border-top: 2px solid #1e3a5f; }
.ipb-totals {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 5mm;
}
.ipb-totals-table { width: 65mm; border: 1px solid #c8ddf0; border-radius: 2mm; overflow: hidden; }
.ipb-totals-table table { width: 100%; border-collapse: collapse; }
.ipb-totals-table td { padding: 4px 8px; font-size: 9.5pt; border-bottom: 1px solid #e8eef5; }
.ipb-totals-table td:first-child { color: #555; }
.ipb-totals-table td:last-child { font-weight: 700; text-align: left; direction: ltr; }
.ipb-totals-table tr.grand-total td { background: #1e3a5f; color: #fff; font-size: 11pt; font-weight: 900; border-bottom: none; }
.ipb-totals-table tr.grand-total td:first-child { color: #fff; }
.ipb-payment { display: flex; gap: 5mm; margin-bottom: 5mm; font-size: 9.5pt; }
.ipb-payment-item { flex: 1; background: #f8fafc; border: 1px solid #dce5ef; border-radius: 2mm; padding: 3mm 4mm; text-align: center; }
.ipb-payment-item strong { display: block; font-size: 12pt; color: #1e3a5f; }
.ipb-notes { background: #fffbeb; border: 1px solid #fcd34d; border-radius: 2mm; padding: 3mm 4mm; font-size: 9pt; margin-bottom: 5mm; }
.ipb-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid #c8ddf0;
  padding-top: 4mm;
  font-size: 8.5pt;
  color: #666;
}
.ipb-sig { text-align: center; }
.ipb-sig-line { width: 45mm; border-top: 1px solid #aaa; margin: 0 auto 2px; }
.ipb-watermark { text-align: center; color: #aab6c8; font-size: 7.5pt; margin-top: 4mm; }

/* =====================================================
   Page Title / Breadcrumb Unified Bar — enhanced
   ===================================================== */
.page-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  background: linear-gradient(90deg, #edf4ff 0%, #f5f9ff 60%, #f8fafc 100%);
  border-bottom: 2px solid #dce8f8;
  font-size: 13px;
  color: var(--muted);
  min-height: 40px;
  position: sticky;
  top: 0;
  z-index: 15;
  box-shadow: 0 2px 6px rgba(37,99,235,0.07);
}
.page-breadcrumb .breadcrumb-icon {
  width: 24px; height: 24px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px;
  flex-shrink: 0;
}
.page-breadcrumb .breadcrumb-title {
  font-weight: 800;
  color: var(--navy);
  font-size: 15px;
  letter-spacing: -0.2px;
}
.page-breadcrumb .breadcrumb-sep { color: #b0bfd4; font-size: 14px; }
.page-breadcrumb .breadcrumb-home { color: #2563eb; text-decoration: none; font-weight: 600; font-size: 12px; }
.page-breadcrumb .breadcrumb-home:hover { text-decoration: underline; }
.print-watermark { text-align: center; color: #94a3b8; font-size: 8pt; margin-top: 5mm; }

/* =====================================================
   Accounting System Style — Compact Grouped Fields
   مشابه لبرامج المحاسبة C# (Peachtree / QuickBooks)
   ===================================================== */

/* --- General compact form density for all standard forms --- */
.field {
  gap: 5px;
  align-items: center;
  min-height: 30px;
}
.field label {
  font-size: 12px;
  font-weight: 700;
  color: #2d3748;
  min-width: 90px;
  flex-shrink: 0;
}
.field input, .field select, .field textarea {
  min-height: 30px;
  padding: 4px 7px;
  border: 1px solid #b8c5d3;
  border-radius: 4px;
  font-size: 13px;
  color: #1a202c;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.12);
  outline: none;
}
.form-grid {
  gap: 6px 10px;
}

/* --- Card header compact style --- */
.card-header {
  font-size: 12.5px;
  font-weight: 800;
  padding: 8px 12px;
  background: linear-gradient(to left, #f8fafc, #f0f6ff);
  border-bottom: 1px solid #dce8f5;
  color: #1e3a5f;
  letter-spacing: 0.1px;
}

/* --- Data table compact style — accounting style --- */
.data-table {
  font-size: 12px;
}
.data-table th {
  background: #1e3a5f;
  color: #e8f0fe;
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 8px;
  white-space: nowrap;
  border-color: #2a4a6f;
}
.data-table td {
  padding: 5px 7px;
  font-size: 12px;
  border-bottom: 1px solid #e8eef5;
  color: #2d3748;
}
.data-table tbody tr:hover td {
  background: #f0f7ff;
}
.data-table tbody tr:nth-child(even) td {
  background: #fafcff;
}

/* --- Invoice table: accounting density --- */
.legacy-invoice-table {
  font-size: 11.5px;
}
.legacy-invoice-table th {
  background: #1e3a5f;
  color: #e8f0fe;
  font-size: 10.5px;
  font-weight: 700;
}
.legacy-invoice-table td {
  height: 30px;
}
.legacy-cell {
  font-size: 11.5px;
  min-height: 30px !important;
  height: 30px;
}

/* --- Page heading compact style --- */
.page-head h1 {
  font-size: 19px;
  color: #1e3a5f;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.page-head p.muted {
  font-size: 12px;
  margin-top: 2px;
}

/* --- Panel title in invoice --- */
.legacy-panel-title {
  font-size: 12px;
  padding: 7px 12px;
  font-weight: 800;
  color: #1e3a5f;
  background: linear-gradient(to left, #f5f9ff, #edf4ff);
  border-bottom: 1px solid #cde0f5;
}

/* --- Summary bar at bottom of invoice table --- */
.summary {
  background: linear-gradient(to left, #f0f7ff, #f8fbff);
  border-top: 2px solid #cde0f5;
  padding: 8px 14px;
  gap: 20px;
  font-size: 12.5px;
}
.summary strong {
  font-size: 15px;
  color: #1e3a5f;
}

/* --- Invoice total box --- */
.legacy-total-box {
  background: linear-gradient(135deg, #fff4b2, #fff9cc);
  border: 2px solid #e6b800;
  border-radius: 6px;
  padding: 5px 14px;
}
.legacy-total-box strong {
  font-size: 19px;
  color: #b45309;
}

/* --- Action buttons: accounting style --- */
.legacy-actions .btn.success {
  background: linear-gradient(135deg, #087f5b, #066b4c);
  color: #fff;
  border-color: #066b4c;
  font-weight: 800;
  letter-spacing: 0.3px;
}
.legacy-actions .btn.danger {
  background: linear-gradient(135deg, #e63946, #c1121f);
  color: #fff;
  border-color: #c1121f;
  font-weight: 800;
}
.legacy-actions .btn:hover {
  filter: brightness(1.08);
  transform: none;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

/* --- Search strip: highlighted, prominent --- */
.legacy-search-strip {
  background: linear-gradient(to left, #fff8e8, #fff5de);
  border-bottom: 3px solid #1e6fb6;
  padding: 7px 12px;
}
.legacy-search-strip input {
  border: 2px solid #1e6fb6;
  border-radius: 3px;
  background: #fff;
  font-size: 20px;
  font-weight: 700;
  height: 46px;
}
.legacy-search-strip input:focus {
  background: #fffbf0;
  border-color: #0d5b8b;
  box-shadow: 0 0 0 3px rgba(30,111,182,0.15);
}

/* --- Sidebar compact style --- */
.side-link {
  font-size: 12.5px;
  padding: 7px 10px;
  border-radius: 6px;
  font-weight: 500;
}
.side-link.active {
  background: linear-gradient(to left, #eff6ff, #dbeafe);
  color: #1d4ed8;
  font-weight: 700;
  border-right: 3px solid #2563eb;
}
.side-link:hover {
  background: #f0f7ff;
  color: #1d4ed8;
}

/* --- Status badges: cleaner accounting style --- */
.badge.green {
  background: #d1fae5;
  color: #065f46;
  font-weight: 700;
  font-size: 11px;
  padding: 3px 8px;
}
.badge.orange {
  background: #fef3c7;
  color: #92400e;
  font-weight: 700;
  font-size: 11px;
  padding: 3px 8px;
}
.badge.red {
  background: #fee2e2;
  color: #991b1b;
  font-weight: 700;
  font-size: 11px;
  padding: 3px 8px;
}

/* --- Filter grid: accounting toolbar style --- */
.filter-grid {
  background: linear-gradient(to left, #f5f9ff, #f8fbff);
  border-bottom: 1px solid #dce8f5;
  padding: 10px 14px;
  gap: 8px;
}
.filter-grid label {
  font-size: 11.5px;
  font-weight: 700;
  color: #2d3748;
  gap: 4px;
}
.filter-grid input, .filter-grid select {
  min-height: 30px;
  padding: 4px 7px;
  border: 1px solid #b8c5d3;
  border-radius: 4px;
  font-size: 12px;
}
.filter-grid input:focus, .filter-grid select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.12);
  outline: none;
}

/* --- Compact payment buttons --- */
.payment-button {
  font-size: 11.5px;
  padding: 6px 10px;
  border-radius: 4px;
  font-weight: 700;
  border: 1px solid #b8c5d3;
  background: #f8fafc;
}
.payment-button.active {
  background: linear-gradient(to left, #dbeafe, #eff6ff);
  border-color: #2563eb;
  color: #1d4ed8;
  box-shadow: inset 0 1px 3px rgba(37,99,235,0.1);
}

/* --- Alert messages: accounting style --- */
.alert {
  border-radius: 5px;
  padding: 8px 12px;
  font-size: 12.5px;
  border-left: none;
  border-right: 3px solid;
}
.alert.success { border-right-color: #16a34a; }
.alert.danger  { border-right-color: #dc2626; }
.alert.warning { border-right-color: #d97706; }
.alert.info    { border-right-color: #2563eb; }

/* --- Smart select styling --- */
.smart-select-input {
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid #b8c5d3;
  font-size: 12.5px;
}
.smart-select-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.12);
  outline: none;
}
.smart-select-menu {
  border-radius: 5px;
  box-shadow: 0 8px 24px rgba(15,39,67,0.18);
  border: 1px solid #c8d8ec;
}
.smart-select-option {
  font-size: 12px;
  min-height: 30px;
  padding: 6px 10px;
}
.smart-select-option:hover, .smart-select-option.active {
  background: #dbeafe;
  color: #1d4ed8;
}

/* --- Picker options --- */
.picker-option {
  font-size: 12px;
  min-height: 30px;
  padding: 6px 10px;
}
.picker-option strong {
  font-size: 12.5px;
}
.picker-option small {
  font-size: 10.5px;
  color: #64748b;
}
.picker-option:hover, .picker-option.active {
  background: #dbeafe;
  color: #1d4ed8;
}

/* --- Open pages tabs: thinner, more compact --- */
.open-pages {
  min-height: 36px;
  padding: 3px 16px;
  background: #f0f6ff;
  border-bottom: 1px solid #dce8f5;
}
.open-page {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px 4px 0 0;
  background: #fff;
  border: 1px solid #d4e0ed;
  border-bottom: none;
  color: #475467;
}
.open-page.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
  font-weight: 700;
}

/* --- Topbar compact --- */
.topbar {
  min-height: 60px;
}
.brand {
  font-size: 17px;
  font-weight: 800;
}

/* --- Invoice side panel form groups --- */
.legacy-form-group > label {
  color: #344054;
  font-size: 11.5px;
  font-weight: 700;
}
.legacy-form-group select,
.legacy-form-group input,
.legacy-form-group textarea {
  min-height: 30px;
  padding: 4px 7px;
  border: 1px solid #b8c5d3;
  border-radius: 4px;
  font-size: 12.5px;
}
.legacy-form-group select:focus,
.legacy-form-group input:focus,
.legacy-form-group textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.12);
  outline: none;
}

/* --- Footer bar compact --- */
.legacy-footer-bar {
  min-height: 50px;
  padding: 6px 10px;
  background: #f5f9ff;
  border-top: 2px solid #cde0f5;
}

/* --- Buttons primary/success consistent --- */
.btn.primary {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-color: #1d4ed8;
  color: #fff;
  font-weight: 700;
}
.btn.primary:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
}
.btn.success {
  background: linear-gradient(135deg, #087f5b, #066b4c);
  border-color: #066b4c;
  color: #fff;
  font-weight: 700;
}

/* --- Row actions in tables --- */
.row-actions .btn {
  min-height: 24px;
  padding: 2px 7px;
  font-size: 11px;
  border-radius: 4px;
}

/* --- Invoice detail page summary row --- */
.invoice-detail-page .summary {
  gap: 16px;
}
.invoice-detail-page .summary span {
  font-size: 12px;
  color: #475467;
}
.invoice-detail-page .summary strong {
  font-size: 14px;
  color: #1e3a5f;
}

/* --- Responsive: accounting grid stays compact --- */
@media (min-width: 1400px) {
  .form-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .legacy-invoice-layout {
    grid-template-columns: minmax(0, 1fr) 310px;
  }
}

/* =====================================================
   Sidebar icon styles
   ===================================================== */
.side-link {
  display: flex;
  align-items: center;
  gap: 8px;
}
.side-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
}
.timeline p {
  padding: 8px 0;
  border-bottom: 1px solid #eef2f7;
  margin: 0;
  font-size: 12.5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.timeline p strong { color: #1e3a5f; font-size: 13px; }
.timeline p small { color: #64748b; font-size: 11px; display: block; }
.quick-result { font-size: 12.5px; padding: 9px 14px; border-bottom: 1px solid #eef2f7; }
.quick-result:hover, .quick-result.active { background: #dbeafe; color: #1d4ed8; transform: none; }
.category-button { font-size: 12.5px; padding: 6px 10px; font-weight: 700; }
.category-menu a { font-size: 12.5px; padding: 7px 12px; }
.category-menu a:hover { background: #dbeafe; color: #1d4ed8; font-weight: 700; }
.modal { border-radius: 8px; }
.modal-header { background: linear-gradient(to left, #f0f6ff, #edf4ff); color: #1e3a5f; border-bottom: 2px solid #cde0f5; font-size: 14px; font-weight: 800; }
@media print { .page-breadcrumb { display: none !important; } .open-pages { display: none !important; } }