/* =========================================================
   نظام وكالة طيف للدعاية والإعلان
   عروض الأسعار • المراسلات والخطابات الرسمية • التقارير
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800;900&family=Tajawal:wght@300;400;500;700;800&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Almarai:wght@300;400;700;800&display=swap');

/* Official SST Arabic Font definition with safe local and web fallbacks */
@font-face {
  font-family: 'SST Arabic';
  src: local('SST Arabic'), local('SST Arabic Roman'), local('SST Arabic Medium'), local('SST Arabic Bold'),
       local('SSTArabic-Roman'), local('SSTArabic-Medium'), local('SSTArabic-Bold'),
       local('SST'), local('SST-Roman'), local('SST-Medium'), local('SST-Bold');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --primary-color: #5F1828;
  --primary-hover: #48111e;
  --primary-light: #faf4f5;
  --primary-border: #ebd2d7;
  --secondary-color: #0f172a;
  --accent-gold: #c59b27;
  --font-family: 'SST Arabic', 'SST', 'IBM Plex Sans Arabic', 'Cairo', 'Tajawal', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* {
  box-sizing: border-box;
  font-family: var(--font-family);
  letter-spacing: normal !important;
}

/* Font Classes for Live Switching */
.font-sst { font-family: 'SST Arabic', 'SST', 'IBM Plex Sans Arabic', 'Cairo', sans-serif !important; }
.font-ibm { font-family: 'IBM Plex Sans Arabic', 'Cairo', sans-serif !important; }
.font-cairo { font-family: 'Cairo', sans-serif !important; }
.font-tajawal { font-family: 'Tajawal', sans-serif !important; }
.font-almarai { font-family: 'Almarai', sans-serif !important; }

body {
  margin: 0;
  padding: 0;
  background-color: #f1f5f9;
  color: #1e293b;
  direction: rtl;
  text-align: right;
  min-height: 100vh;
}

/* BiDi & LTR (English) Support Rules - Scoped strictly to application UI, never to printable sheets */
html[dir="ltr"]:not([data-export-rtl="true"]) body:not(.printing-a4) {
  direction: ltr !important;
  text-align: left !important;
}

html[dir="ltr"]:not([data-export-rtl="true"]) table.text-right:not(.quotation-sheet *):not(.letter-sheet *):not(.report-sheet *):not(.statement-sheet *),
html[dir="ltr"]:not([data-export-rtl="true"]) th.text-right:not(.quotation-sheet *):not(.letter-sheet *):not(.report-sheet *):not(.statement-sheet *),
html[dir="ltr"]:not([data-export-rtl="true"]) td.text-right:not(.quotation-sheet *):not(.letter-sheet *):not(.report-sheet *):not(.statement-sheet *),
html[dir="ltr"]:not([data-export-rtl="true"]) div.text-right:not(.ltr-keep-right):not(.quotation-sheet *):not(.letter-sheet *):not(.report-sheet *):not(.statement-sheet *),
html[dir="ltr"]:not([data-export-rtl="true"]) p.text-right:not(.ltr-keep-right):not(.quotation-sheet *):not(.letter-sheet *):not(.report-sheet *):not(.statement-sheet *),
html[dir="ltr"]:not([data-export-rtl="true"]) span.text-right:not(.ltr-keep-right):not(.quotation-sheet *):not(.letter-sheet *):not(.report-sheet *):not(.statement-sheet *),
html[dir="ltr"]:not([data-export-rtl="true"]) button.text-right:not(.ltr-keep-right):not(.quotation-sheet *):not(.letter-sheet *):not(.report-sheet *):not(.statement-sheet *) {
  text-align: left !important;
}

html[dir="ltr"]:not([data-export-rtl="true"]) .border-r:not(.quotation-sheet *):not(.letter-sheet *):not(.report-sheet *):not(.statement-sheet *) {
  border-right-width: 0 !important;
  border-left-width: 1px !important;
}
html[dir="ltr"]:not([data-export-rtl="true"]) .border-r-2:not(.quotation-sheet *):not(.letter-sheet *):not(.report-sheet *):not(.statement-sheet *) {
  border-right-width: 0 !important;
  border-left-width: 2px !important;
}
html[dir="ltr"]:not([data-export-rtl="true"]) .border-r-4:not(.quotation-sheet *):not(.letter-sheet *):not(.report-sheet *):not(.statement-sheet *) {
  border-right-width: 0 !important;
  border-left-width: 4px !important;
}
html[dir="ltr"]:not([data-export-rtl="true"]) .border-l:not(.quotation-sheet *):not(.letter-sheet *):not(.report-sheet *):not(.statement-sheet *) {
  border-left-width: 0 !important;
  border-right-width: 1px !important;
}
html[dir="ltr"]:not([data-export-rtl="true"]) .border-l-2:not(.quotation-sheet *):not(.letter-sheet *):not(.report-sheet *):not(.statement-sheet *) {
  border-left-width: 0 !important;
  border-right-width: 2px !important;
}
html[dir="ltr"]:not([data-export-rtl="true"]) .border-l-4:not(.quotation-sheet *):not(.letter-sheet *):not(.report-sheet *):not(.statement-sheet *) {
  border-left-width: 0 !important;
  border-right-width: 4px !important;
}

/* Explicit RTL protection for all printable documents */
.quotation-sheet, .letter-sheet, .report-sheet, .statement-sheet, .voucher-sheet, .po-sheet, .delivery-sheet {
  direction: rtl;
  text-align: right;
  unicode-bidi: embed;
}
.quotation-sheet[dir="rtl"], .quotation-sheet[dir="rtl"] table,
.letter-sheet[dir="rtl"], .report-sheet[dir="rtl"], .statement-sheet[dir="rtl"],
.voucher-sheet[dir="rtl"], .po-sheet[dir="rtl"], .delivery-sheet[dir="rtl"] {
  direction: rtl;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Luxury Glass & Shadows */
.card-shadow {
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 2px 6px -1px rgba(0, 0, 0, 0.03);
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease-in-out;
}

/* Badge styles */
.badge-draft, .badge-sent, .badge-accepted, .badge-paid, .badge-declined, .badge-invoiced, .badge-work-order {
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  line-height: 1.2 !important;
}
.badge-draft { background-color: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.badge-sent { background-color: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.badge-accepted { background-color: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.badge-work-order { background-color: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.badge-paid { background-color: #fefce8; color: #a16207; border: 1px solid #fef08a; }
.badge-declined { background-color: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.badge-invoiced { background-color: #faf5ff; color: #6b21a8; border: 1px solid #d8b4fe; }

/* Official Paper Sheets (Quotations, Letters, Vouchers, POs, Delivery Notes & Financial Reports) */
.quotation-sheet, .letter-sheet, .report-sheet, .voucher-sheet, .po-sheet, .delivery-sheet {
  width: 210mm;
  max-width: 210mm;
  min-height: auto;
  padding: 8mm 12mm;
  margin: 0 auto;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  color: #000000;
  position: relative;
  font-size: 12.5px;
  line-height: 1.45;
  box-sizing: border-box;
}

/* Specific export style to guarantee clean single-page PDF rendering */
.pdf-single-page-export {
  padding: 6mm 8mm !important;
  margin: 0 !important;
  width: 794px !important;
  max-width: 794px !important;
  min-height: auto !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  page-break-after: avoid !important;
  page-break-inside: avoid !important;
  box-sizing: border-box !important;
}

.pdf-single-page-export * {
  page-break-inside: avoid !important;
}

/* Multi-page Report PDF Export with clean section flow */
.report-pdf-export {
  padding: 6mm 8mm !important;
  margin: 0 !important;
  width: 794px !important;
  max-width: 794px !important;
  min-height: auto !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}

.report-section-break {
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}

/* Guarantee unified Arabic cursive ligatures across PDF rendering */
.report-sheet,
.quotation-sheet,
.letter-sheet,
.voucher-sheet,
.po-sheet,
.delivery-sheet {
  letter-spacing: normal !important;
  word-spacing: normal !important;
}

.report-sheet *,
.quotation-sheet *,
.letter-sheet *,
.voucher-sheet *,
.po-sheet *,
.delivery-sheet * {
  letter-spacing: normal !important;
  word-break: normal;
  overflow-wrap: normal;
}

/* Print Specific Rules for True A4 Alignment & Style Preservation */
@media print {
  @page {
    size: A4 portrait;
    margin: 10mm 12mm;
  }
  html, body {
    background: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    color: #000000 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  main {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .no-print, header, nav, aside, .mobile-bottom-bar, #mobile-drawer, #mobile-drawer-backdrop {
    display: none !important;
  }
  .paper-scroll-wrapper {
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
  .quotation-sheet, .letter-sheet, .report-sheet, .statement-sheet, .word-editor-sheet, .voucher-sheet, .po-sheet, .delivery-sheet {
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    box-sizing: border-box !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  /* Enforce distinct borders for each quotation template during printing */
  .template-classic {
    border-top: 4px solid #111827 !important;
  }
  .template-modern {
    border-top: 8px solid #5F1828 !important;
    border-bottom: 4px solid #0f172a !important;
  }
  .template-luxury {
    border: 2px solid #5F1828 !important;
    outline: 1px solid #c59b27 !important;
    outline-offset: -6px !important;
  }
  .template-minimal {
    border: 1px solid #e2e8f0 !important;
  }
  .report-sheet {
    page-break-inside: auto !important;
    padding: 4mm 6mm !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .report-section-break, 
  .report-sheet tr, 
  .report-sheet .avoid-break, 
  .report-sheet .report-card,
  .report-sheet .report-header,
  .report-sheet .report-footer,
  .bank-card {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  .report-sheet table {
    page-break-inside: auto !important;
    border-collapse: collapse !important;
    width: 100% !important;
  }
  .report-sheet thead {
    display: table-header-group !important;
  }
  .report-sheet tfoot {
    display: table-footer-group !important;
  }
}

/* Custom Table Styles */
.quotation-table th,
.quotation-table td,
.modern-table th,
.modern-table td,
.luxury-table th,
.luxury-table td,
.minimal-table th,
.minimal-table td {
  vertical-align: top !important;
}

.quotation-table th {
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
  padding: 8px 10px;
  font-weight: 700;
  color: #000000;
  background-color: #fafafa;
}

.quotation-table td {
  border-bottom: 1px solid #e5e7eb;
  padding: 8px 10px;
  color: #000000;
}

.quotation-table tr:last-child td {
  border-bottom: 1px solid #000000;
}

/* Item Technical Description inside quotation table */
.item-desc-text {
  font-size: 10px;
  color: #475569;
  line-height: 1.55;
  margin-top: 4px;
  padding-right: 8px;
  border-right: 2px solid #cbd5e1;
  white-space: pre-line;
  font-weight: 400;
}

/* Bank Account Card */
.bank-card {
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
}

/* Official Stamp & Signature simulation */
.stamp-seal {
  width: 110px;
  height: 110px;
  border: 3px double #5F1828;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #5F1828;
  font-weight: 800;
  font-size: 10.5px;
  transform: rotate(-8deg);
  opacity: 0.88;
  margin: 0 auto;
  user-select: none;
  background: rgba(95, 24, 40, 0.05);
}

/* Quotation Form Templates Styles */

/* Template 1: Classic Official */
.template-classic {
  border-top: 4px solid #111827;
}

/* Template 2: Modern Corporate */
.template-modern {
  border-top: 8px solid #5F1828;
  border-bottom: 4px solid #0f172a;
}
.template-modern .modern-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 14px;
}
.template-modern .modern-table th {
  background: #0f172a;
  color: #ffffff;
  border: none;
  padding: 9px 12px;
}
.template-modern .modern-table td {
  border-bottom: 1px solid #f1f5f9;
  padding: 9px 12px;
}
.template-modern .modern-table tr:nth-child(even) td {
  background: #fbfcfd;
}

/* Template 3: Luxury Executive */
.template-luxury {
  border: 2px solid #5F1828;
  outline: 1px solid #c59b27;
  outline-offset: -6px;
}
.template-luxury .luxury-table th {
  background: #5F1828;
  color: #ffffff;
  border: none;
  padding: 10px 12px;
}

/* Template 4: Minimalist Clean */
.template-minimal {
  border: 1px solid #e2e8f0;
}
.template-minimal .minimal-table th {
  background: #f8fafc;
  color: #334155;
  border-top: 1px solid #e2e8f0;
  border-bottom: 2px solid #cbd5e1;
  padding: 9px 12px;
}

/* Enforce connected Arabic ligatures and prevent broken characters */
h1, h2, h3, h4, h5, h6, .arabic-title, .quotation-sheet * {
  letter-spacing: normal !important;
  font-feature-settings: "liga" 1, "calt" 1;
}

/* =========================================================
   Mobile, Tablet & PC Responsiveness Utilities
   ========================================================= */

/* No Scrollbar Utility for smooth horizontal tab swiping */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Touch paper viewport wrapper */
.paper-scroll-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1.5rem;
  display: flex;
  justify-content: flex-start;
}

@media screen and (min-width: 850px) {
  .paper-scroll-wrapper {
    justify-content: center;
  }
}

/* Prevent auto-zoom on iOS Safari when tapping inputs & enhance mobile touch */
@media screen and (max-width: 768px) {
  input[type="text"],
  input[type="number"],
  input[type="date"],
  input[type="email"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important;
  }
  
  /* Touch target optimization */
  button, input, select {
    touch-action: manipulation;
  }

  /* Compact paper margins on mobile */
  .quotation-sheet, .letter-sheet, .report-sheet {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    border-radius: 12px;
  }
}

/* Safe area support for notched phones (iPhone X/11/12/13/14/15/16) */
.mobile-bottom-bar {
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
}

/* Responsive Table Touch Scrolling */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Financial metrics overflow and boundary guard */
.metric-cell {
  min-width: 0;
  overflow: hidden;
}
.metric-val {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Official Voucher Sheet (سندات القبض والصرف) */
.voucher-sheet {
  border-top: 8px solid #5F1828;
  border-bottom: 4px solid #5F1828;
  background: #ffffff;
}
.voucher-title-badge,
.voucher-sheet .voucher-title-badge,
.po-sheet .voucher-title-badge,
.delivery-sheet .voucher-title-badge,
.statement-sheet .voucher-title-badge {
  background-color: #5F1828 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  padding: 6px 18px;
  border-radius: 9999px;
  font-weight: 900;
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.3px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.po-meta-box,
.voucher-meta-box,
.statement-meta-box {
  display: block !important;
  width: 285px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background: #faf4f5 !important;
  border: 1px solid #ebd2d7 !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  margin-right: auto !important;
  margin-left: 0 !important;
  text-align: right !important;
}

.delivery-meta-box {
  display: block !important;
  width: 295px !important;
  min-width: 290px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background: #faf4f5 !important;
  border: 1px solid #ebd2d7 !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  margin-right: auto !important;
  margin-left: 0 !important;
  text-align: right !important;
}

/* Official Purchase Order Sheet (أمر الشراء الرسمي PO) */
.po-sheet {
  border-top: 8px solid #5F1828;
  border-bottom: 4px solid #0f172a;
  background: #ffffff;
}

/* Official Delivery Note Sheet (سند تسليم البضاعة والمواد) */
.delivery-sheet {
  width: 210mm !important;
  max-width: 210mm !important;
  min-height: 297mm !important;
  padding: 10mm 13mm !important;
  margin: 0 auto !important;
  background: #ffffff !important;
  border-top: 8px solid #5F1828 !important;
  border-bottom: 4px solid #0f172a !important;
  box-sizing: border-box !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
  position: relative !important;
  direction: rtl !important;
  text-align: right !important;
}

/* Delivery Note Live In-Place Editable Elements */
.delivery-sheet [contenteditable="true"] {
  outline: none;
  cursor: text;
  border-radius: 4px;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
  padding: 1px 4px;
}
.delivery-sheet [contenteditable="true"]:hover {
  background-color: #fdf2f4;
  box-shadow: 0 0 0 1px #d493a0;
}
.delivery-sheet [contenteditable="true"]:focus {
  background-color: #ffffff;
  box-shadow: 0 0 0 2px #5F1828;
}

@media print {
  .delivery-sheet {
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    padding: 8mm 10mm !important;
  }
  .delivery-sheet [contenteditable="true"]:hover,
  .delivery-sheet [contenteditable="true"]:focus {
    background-color: transparent !important;
    box-shadow: none !important;
  }
}

/* Stamp & Signature Box for Client / Receiver */
.receiver-stamp-box {
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #94a3b8;
  font-size: 10.5px;
  font-weight: 700;
  background: #f8fafc;
  padding: 6px;
}

/* Official Report 5x5 cm Stamp Styling */
.report-stamp-container {
  width: 5cm;
  height: 5cm;
  max-width: 5cm;
  max-height: 5cm;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.report-stamp-img {
  width: 5cm !important;
  height: 5cm !important;
  max-width: 5cm !important;
  max-height: 5cm !important;
  object-fit: contain !important;
}

@media print {
  .report-stamp-container {
    width: 5cm !important;
    height: 5cm !important;
    max-width: 5cm !important;
    max-height: 5cm !important;
  }
  .report-stamp-img {
    width: 5cm !important;
    height: 5cm !important;
    max-width: 5cm !important;
    max-height: 5cm !important;
    object-fit: contain !important;
  }
}

/* Custom Number Input Styling - ensure digits are completely visible without obstruction */
input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button { 
  opacity: 0.25;
  margin-left: 2px;
}
input[type="number"]:hover::-webkit-inner-spin-button,
input[type="number"]:hover::-webkit-outer-spin-button {
  opacity: 0.8;
}

/* Report Table Enhanced Borders & Alignment */
.report-sheet table {
  border-collapse: collapse !important;
}
.report-sheet table th,
.report-sheet table td {
  border-color: #cbd5e1 !important;
}