.opx-page {
  --opx-navy: #12304a;
  --opx-teal: #0f8b80;
  --opx-teal-soft: #e8f7f4;
  --opx-blue-soft: #edf5ff;
  --opx-border: color-mix(in srgb, var(--ink-faint, #64748b) 24%, transparent);
}

.opx-page-head { align-items: flex-start; gap: 16px; }
.opx-page-head h1 { margin-bottom: 4px; }
.opx-page-head p,
.opx-modal-head p { margin: 0; color: var(--ink-faint); font-size: 13px; line-height: 1.7; }
.opx-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.opx-effect-strip {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  min-height: 54px;
  padding: 10px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--opx-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface, #fff) 88%, var(--brand-tint, #eef8f6));
  color: var(--ink-muted, #475569);
  font-size: 12.5px;
}
.opx-effect {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}
.opx-effect.neutral { color: #33536f; background: #e9f2f8; }
.opx-effect.stock { color: #08635b; background: #dff5ef; }
.opx-effect.finance { color: #1e4f9a; background: #e6efff; }
.opx-effect.frozen { color: #765611; background: #fff2cb; }

.opx-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.opx-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 220px;
  margin: 0;
}
.opx-search > i { position: absolute; inset-inline-start: 14px; color: var(--ink-faint); pointer-events: none; }
.opx-search input { min-height: 44px; padding-inline-start: 42px; margin: 0; }

.opx-table-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid var(--opx-border, rgba(100,116,139,.22));
  border-radius: 16px;
  background: var(--surface, #fff);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .05);
}
.opx-table-wrap table { min-width: 840px; margin: 0; border: 0; }
.opx-table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--surface, #fff) 86%, var(--brand-tint, #edf7f5));
  color: var(--ink, #0f172a);
  white-space: nowrap;
}
.opx-table-wrap td { vertical-align: middle; }
.opx-table-wrap td small { display: block; margin-top: 3px; color: var(--ink-faint); font-size: 11px; }
.opx-check { width: 48px; text-align: center !important; }
.opx-check input { width: 18px; height: 18px; accent-color: var(--brand, #0f8b80); }

.opx-status {
  display: inline-flex;
  align-items: center;
  min-height: 29px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.opx-status.draft { color: #7b4d0b; background: #fff4d7; }
.opx-status.frozen { color: #5c4d78; background: #f0eafe; }
.opx-status.done { color: #166534; background: #dcfce7; }
.opx-status.stock { color: #08635b; background: #dff5ef; }
.opx-status.neutral { color: #33536f; background: #e9f2f8; }
.opx-small { min-height: 36px !important; padding: 6px 11px !important; font-size: 11px !important; }

.opx-standard-modal { max-width: 940px; max-height: min(90vh, 820px); overflow: auto; }
.opx-document-modal { width: min(1180px, calc(100vw - 36px)) !important; max-width: 1180px !important; height: min(92vh, 900px) !important; }
.opx-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--opx-border, rgba(100,116,139,.22));
}
.opx-modal-head h2 { margin: 0 0 4px; font-size: 20px; color: var(--ink, #0f172a); }
.opx-document-modal .fs-sticky-header.opx-modal-head { margin: 0; padding: 16px 20px; }
.opx-close {
  display: inline-grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--opx-border, #d6dee6);
  border-radius: 12px;
  background: var(--surface, #fff);
  color: var(--ink, #0f172a);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.opx-close:hover { color: var(--danger, #dc2626); border-color: currentColor; }
.opx-close:focus-visible,
.opx-page button:focus-visible,
.opx-standard-modal button:focus-visible,
.opx-document-modal button:focus-visible,
.opx-page input:focus-visible,
.opx-page select:focus-visible,
.opx-standard-modal input:focus-visible,
.opx-standard-modal select:focus-visible,
.opx-document-modal input:focus-visible,
.opx-document-modal select:focus-visible,
.opx-document-modal textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand, #0f8b80) 30%, transparent) !important;
  outline-offset: 2px;
}

.opx-mini-effects { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 7px; }
.opx-mini-effects span { padding: 4px 9px; border-radius: 999px; background: #edf3f7; color: #36536b; font-size: 11px; font-weight: 800; }
.opx-mini-effects span.stock { background: #dff5ef; color: #08635b; }

.opx-form-grid { display: grid; gap: 12px; margin-bottom: 15px; }
.opx-form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opx-form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opx-form-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.opx-form-grid .field { margin: 0; min-width: 0; }
.opx-form-grid label,
.opx-line-entry > label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 800; color: var(--ink-muted, #334155); }
.opx-form-grid input,
.opx-form-grid select,
.opx-search-add input { min-height: 44px; }

.opx-line-entry {
  padding: 14px;
  margin: 5px 0 14px;
  border: 1px solid color-mix(in srgb, var(--brand, #0f8b80) 24%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, var(--brand-tint, #edf7f5) 58%, var(--surface, #fff));
}
.opx-search-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.opx-lines { max-height: 48vh; }
.opx-lines table { min-width: 900px; }
.opx-lines input,
.opx-lines textarea { min-width: 92px; min-height: 42px; margin: 0; padding: 8px; font-size: 12px; }
.opx-lines textarea { min-width: 150px; resize: vertical; }
.opx-lines .opx-qty { width: 150px; }
.opx-remove {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #fecaca;
  border-radius: 11px;
  background: #fff1f2;
  color: #be123c;
  font-size: 19px;
  cursor: pointer;
}
.opx-na { color: var(--ink-faint); font-size: 11px; white-space: nowrap; }
.opx-footer-total { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-bottom: 8px; color: var(--ink-muted, #334155); }
.opx-footer-total strong { min-width: 150px; color: var(--brand-dark, #0f675f); font-size: 20px; text-align: end; font-variant-numeric: tabular-nums; }

.opx-selection-list { display: grid; gap: 8px; max-height: 420px; overflow: auto; margin: 14px 0; }
.opx-select-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 10px 13px;
  border: 1px solid var(--opx-border, #d6dee6);
  border-radius: 13px;
  background: var(--surface, #fff);
  cursor: pointer;
}
.opx-select-card:has(input:checked) { border-color: var(--brand, #0f8b80); background: color-mix(in srgb, var(--brand-tint, #edf7f5) 74%, #fff); }
.opx-select-card input { width: 19px; height: 19px; accent-color: var(--brand, #0f8b80); }
.opx-select-card span { display: grid; gap: 4px; }
.opx-select-card strong { color: var(--ink, #0f172a); }
.opx-select-card small { color: var(--ink-faint); }
.opx-empty-card { padding: 28px; border: 1px dashed var(--opx-border, #d6dee6); border-radius: 14px; color: var(--ink-faint); text-align: center; }

.opx-print-root { display: none; }

@media (max-width: 950px) {
  .opx-form-grid.four,
  .opx-form-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opx-page-head { flex-direction: column; }
  .opx-head-actions { width: 100%; }
  .opx-head-actions > button { flex: 1; }
}

@media (max-width: 620px) {
  .opx-toolbar { align-items: stretch; flex-direction: column; }
  .opx-toolbar > button { width: 100%; min-height: 44px; }
  .opx-form-grid.two,
  .opx-form-grid.three,
  .opx-form-grid.four { grid-template-columns: 1fr; }
  .opx-search-add { grid-template-columns: 1fr; }
  .opx-search-add button { min-height: 44px; }
  .opx-document-modal { width: 100vw !important; max-width: none !important; height: 100dvh !important; max-height: none !important; border-radius: 0 !important; }
  .opx-standard-modal { width: calc(100vw - 20px) !important; max-height: 94dvh; }
  .opx-page-head .btn-primary { width: 100%; }
  .opx-effect-strip { align-items: flex-start; }
}

@media print {
  @page { size: A4 portrait; margin: 10mm; }
  html, body { width: 100%; min-height: 100%; background: #fff !important; }
  body.opx-print-voucher > *:not(#opxPrintRoot) { display: none !important; }
  #opxPrintRoot {
    display: block !important;
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    color: #111827 !important;
    background: #fff !important;
    font-family: Tahoma, Arial, sans-serif !important;
  }
  .opx-voucher-paper {
    display: flex;
    flex-direction: column;
    min-height: 267mm;
    padding: 10mm;
    border: 1.2px solid #1f2937;
    color: #111827;
    background: #fff;
  }
  .opx-voucher-paper header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10mm;
    padding-bottom: 6mm;
    border-bottom: 2.5px solid #12304a;
  }
  .opx-company-mark { display: flex; align-items: center; gap: 5mm; }
  .opx-company-mark img,
  .opx-logo-placeholder { width: 22mm; height: 22mm; object-fit: contain; }
  .opx-logo-placeholder { display: grid; place-items: center; border: 1px solid #12304a; color: #12304a; font-size: 17pt; font-weight: 900; }
  .opx-company-mark h1 { margin: 0 0 2mm; font-size: 17pt; }
  .opx-company-mark p { margin: .8mm 0; color: #4b5563; font-size: 8.5pt; }
  .opx-doc-title { display: grid; min-width: 55mm; padding: 5mm; border: 1.4px solid #12304a; text-align: center; }
  .opx-doc-title span { font-size: 20pt; font-weight: 900; color: #12304a; }
  .opx-doc-title small { margin-top: 2mm; color: #4b5563; letter-spacing: .8px; }
  .opx-voucher-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 7mm 0; border: 1px solid #9ca3af; }
  .opx-voucher-meta > div { display: grid; gap: 2mm; padding: 4mm; border-inline-start: 1px solid #d1d5db; }
  .opx-voucher-meta > div:last-child { border-inline-start: 0; }
  .opx-voucher-meta label,
  .opx-formal-line label,
  .opx-formal-grid label { color: #4b5563; font-size: 8.5pt; font-weight: 700; }
  .opx-voucher-meta strong { font-size: 11pt; }
  .opx-voucher-body { border: 1px solid #9ca3af; }
  .opx-formal-line { display: grid; grid-template-columns: 48mm 1fr; align-items: center; min-height: 17mm; padding: 3mm 5mm; border-bottom: 1px solid #d1d5db; }
  .opx-formal-line strong { font-size: 12pt; }
  .opx-number-box { width: max-content; min-width: 52mm; padding: 3mm 5mm; border: 1.5px solid #12304a; color: #12304a; text-align: center; }
  .opx-formal-grid { display: grid; grid-template-columns: 1fr 1fr; }
  .opx-formal-grid > div { display: grid; gap: 2mm; min-height: 21mm; padding: 4mm 5mm; border-inline-start: 1px solid #d1d5db; border-bottom: 1px solid #d1d5db; }
  .opx-formal-grid > div:nth-child(even) { border-inline-start: 0; }
  .opx-formal-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
  .opx-formal-grid strong { font-size: 10.5pt; }
  .opx-voucher-paper footer { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7mm; margin-top: auto; padding-top: 15mm; }
  .opx-voucher-paper footer > div { display: grid; gap: 13mm; text-align: center; font-size: 9pt; font-weight: 800; }
  .opx-voucher-paper footer i { display: block; border-bottom: 1px solid #4b5563; }
  .opx-company-footer { margin-top: 9mm; padding-top: 4mm; border-top: 1px solid #9ca3af; color: #6b7280; font-size: 8pt; text-align: center; }
}

/* شاشات التقارير المستقلة ولوحة المطعم */
.opx-management-report-page .opx-page-head h1{display:flex;align-items:center;gap:10px;}
.opx-management-report-page .opx-page-head h1 i{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--brand-tint,#e9f7f5);color:var(--brand,#0f8b80);font-size:18px;}
.opx-report-context{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:11px 13px;border:1px solid color-mix(in srgb,var(--brand,#0f8b80) 28%,transparent);border-radius:12px;background:color-mix(in srgb,var(--brand-tint,#e9f7f5) 65%,var(--surface,#fff));color:var(--ink-muted,#40545a);font-size:13px;line-height:1.7;}
.opx-report-context i{color:var(--brand,#0f8b80);}
.opx-report-filters{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;padding:12px;margin-bottom:14px;border:1px solid var(--opx-border,#d6dee6);border-radius:14px;background:var(--surface,#fff);}
.opx-report-filters .field{min-width:150px;margin:0;}
.opx-report-filters input,.opx-report-filters select,.opx-report-filters button{min-height:44px;}
.opx-report-filters .opx-run-management-report{min-width:150px;}
.opx-report-result{min-height:180px;}
.opx-report-placeholder,.opx-report-error{padding:28px;border:1px dashed var(--opx-border,#d6dee6);border-radius:14px;color:var(--ink-faint);text-align:center;background:var(--surface,#fff);}
.opx-report-error{border-style:solid;border-color:#fecaca;color:#b91c1c;background:#fff1f2;}
.opx-report-error .opx-retry-report{display:block;margin:12px auto 0;min-height:44px;}
.opx-report-loading::before{content:"";display:inline-block;width:18px;height:18px;margin-inline-end:9px;border:2px solid color-mix(in srgb,var(--brand,#0f8b80) 25%,transparent);border-top-color:var(--brand,#0f8b80);border-radius:50%;vertical-align:middle;animation:opx-report-spin .8s linear infinite;}
@keyframes opx-report-spin{to{transform:rotate(360deg)}}
.opx-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:10px;margin-bottom:14px;}
.opx-summary-card{display:grid;gap:7px;min-height:92px;padding:14px;border:1px solid var(--opx-border,#d6dee6);border-radius:14px;background:var(--surface,#fff);}
.opx-summary-card span{color:var(--ink-faint);font-size:12px;font-weight:700;}
.opx-summary-card strong{color:var(--ink,#0f172a);font-size:21px;}
.opx-summary-card.positive{border-inline-start:4px solid #0f8b80;}.opx-summary-card.positive strong{color:#0f766e;}
.opx-summary-card.negative{border-inline-start:4px solid #dc2626;}.opx-summary-card.negative strong{color:#b91c1c;}
.opx-journal-list{display:grid;gap:12px;}.opx-journal-card{padding:14px;border:1px solid var(--opx-border,#d6dee6);border-radius:15px;background:var(--surface,#fff);}
.opx-journal-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}.opx-journal-card>header>div{display:grid;gap:4px;}.opx-journal-card>header span,.opx-journal-card>p{color:var(--ink-faint);font-size:12px;}
.opx-dashboard-columns{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(420px,1.4fr);gap:14px;}.opx-dashboard-columns>section{padding:15px;border:1px solid var(--opx-border,#d6dee6);border-radius:15px;background:var(--surface,#fff);}.opx-dashboard-columns h2{margin:0 0 13px;font-size:15px;}
.opx-status-bars{display:grid;gap:11px;}.opx-status-bars>div{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center;}.opx-status-bars i{grid-column:1/-1;display:block;height:8px;border-radius:99px;background:linear-gradient(90deg,var(--brand,#0f8b80) var(--value),var(--paper,#eef2f5) var(--value));}.opx-delay{color:#b91c1c;font-weight:800;}

/* بحث الصنف الموحد والمسافات المدمجة لفواتير البيع والشراء */
.opx-purchase-product-search{margin:8px 0 10px;padding:10px 12px;border:1px solid var(--opx-border,#d6dee6);border-radius:13px;background:color-mix(in srgb,var(--brand-tint,#edf7f5) 45%,#fff);}
.opx-purchase-product-search>label{display:block;margin-bottom:6px;color:var(--ink,#0f172a);font-size:12px;font-weight:800;}
.opx-missing-product{margin-top:8px;padding:9px 11px;border:1px solid #f59e0b;border-radius:10px;background:#fffbeb;color:#92400e;font-size:12px;}
.opx-missing-product button{min-height:40px;margin-inline-start:8px;}
#purchaseInvoiceModal .invoice-lines th,#purchaseInvoiceModal .invoice-lines td,#salesInvoiceModal .invoice-lines th,#salesInvoiceModal .invoice-lines td{padding-block:4px!important;}
#purchaseInvoiceModal .invoice-lines input,#purchaseInvoiceModal .invoice-lines select,#salesInvoiceModal .invoice-lines input,#salesInvoiceModal .invoice-lines select{min-height:44px!important;padding-block:6px!important;}
#purchaseInvoiceModal .fs-sticky-footer,#purchaseInvoiceModal .modal-actions,#salesInvoiceModal .fs-sticky-footer,#salesInvoiceModal .modal-actions{padding-block:8px!important;margin-top:6px!important;}
#purchaseInvoiceModal .modal-box,#salesInvoiceModal .modal-box{max-height:96dvh!important;}
#transferModal .field{grid-template-columns:repeat(2,minmax(0,1fr))!important;}

@media(max-width:850px){.opx-dashboard-columns{grid-template-columns:1fr}.opx-report-filters>*{width:100%}.opx-report-filters .field{min-width:0}.opx-management-report-page .opx-page-head{align-items:flex-start}.opx-management-report-page .opx-page-head>button{width:100%;min-height:44px}}

@media(prefers-reduced-motion:reduce){.opx-report-loading::before{animation:none}}

@media print{
  body.opx-print-management-report>*{display:none!important}body.opx-print-management-report>.opx-print-active-page{display:block!important;position:static!important;margin:0!important;padding:0!important}body.opx-print-management-report .opx-print-active-page .page-head button,body.opx-print-management-report .opx-report-context,body.opx-print-management-report .opx-report-filters{display:none!important}body.opx-print-management-report .opx-report-result{display:block!important}body.opx-print-management-report .opx-table-wrap{overflow:visible!important}body.opx-print-management-report table{font-size:9pt!important}
  body.opx-vat-receipt-print>*{display:none!important}body.opx-vat-receipt-print #page-reports{display:block!important;position:static!important;width:72mm!important;margin:0!important;padding:0!important}body.opx-vat-receipt-print #page-reports .page-head,body.opx-vat-receipt-print #reportTabs,body.opx-vat-receipt-print #reportFilters{display:none!important}body.opx-vat-receipt-print #reportResult{display:block!important;width:72mm!important;font-size:9pt!important}body.opx-vat-receipt-print #reportResult table{width:100%!important;font-size:7.5pt!important}body.opx-vat-receipt-print #reportResult th,body.opx-vat-receipt-print #reportResult td{padding:2mm 1mm!important;white-space:normal!important}
}
body.opx-vat-receipt-print{page:vatreceipt}
@page vatreceipt{size:80mm auto;margin:4mm}