@font-face {
  font-family: 'DIN Next LT Arabic';
  src: url('../PDF/DINNextLTArabic-Regular-3.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DIN Next LT Arabic';
  src: url('../PDF/DINNextLTArabic-Bold-4.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Global Variables & Theme Tokens (DEFAULT: LIGHT MODE)
   ========================================================================== */
:root, [data-theme="light"] {
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f1f5f9;
  --text-main: #000000;
  --text-muted: #64748b;
  --border-color: #e2e8f0;
  --accent-primary: #059669;
  --accent-hover: #047857;
  --accent-secondary: #2563eb;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-card: #1e293b;
  --bg-card-hover: #334155;
  --text-main: #ffffff;
  --text-muted: #ffffff;
  --border-color: rgba(255, 255, 255, 0.1);
  --accent-primary: #10b981;
  --accent-hover: #059669;
  --accent-secondary: #3b82f6;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   Base Styles & Force English Numerals (1234567890)
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-variant-numeric: lining-nums tabular-nums !important;
  font-feature-settings: "lnum" 1, "tnum" 1, "calt" 0 !important;
  -webkit-font-feature-settings: "lnum" 1, "tnum" 1, "calt" 0 !important;
  -moz-font-feature-settings: "lnum" 1, "tnum" 1, "calt" 0 !important;
}

body, select, table, button, div, span, p, td, th, input, textarea, label, option {
  font-family: 'Cairo', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-variant-numeric: lining-nums tabular-nums !important;
  font-feature-settings: "lnum" 1, "tnum" 1, "calt" 0 !important;
  -webkit-font-feature-settings: "lnum" 1, "tnum" 1, "calt" 0 !important;
}

input, select, textarea, .font-mono, [dir="ltr"], [lang="en"] {
  font-variant-numeric: lining-nums tabular-nums !important;
  font-feature-settings: "lnum" 1, "tnum" 1, "calt" 0 !important;
}

select.text-center, .unit-select, td select.text-center {
  text-align: center !important;
  text-align-last: center !important;
  -webkit-text-align-last: center !important;
  -moz-text-align-last: center !important;
  height: 38px !important;
  min-height: 38px !important;
  box-sizing: border-box !important;
}
select.text-center option, .unit-select option {
  text-align: center !important;
  text-align-last: center !important;
}

/* ==========================================================================
   FontAwesome Global Clarity & Sharpness Optimization
   ========================================================================== */
i.fa-solid, i.fa-regular, i.fa-brands, i.fas, i.far, i.fab, .fa {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "FontAwesome" !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
}

/* Enhancing icon clarity, size and contrast across buttons and badges */
button i, .btn i, a i {
  font-size: 1.15em;
  opacity: 1 !important;
  flex-shrink: 0;
  vertical-align: middle;
}

header i {
  font-size: 1.2em;
  opacity: 1 !important;
}

h2 i, h3 i {
  font-size: 1.25em;
  opacity: 1 !important;
}

/* Approval column subheader titles delicate sub-branch styling with scale transform */
.approval-header-subtext {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: scale(0.75) !important;
  -webkit-transform: scale(0.75) !important;
  transform-origin: center center !important;
  white-space: nowrap !important;
  width: max-content !important;
  margin: 0 auto !important;
}

.approval-header-subtext span {
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: rgba(255, 255, 255, 0.9) !important;
}


/* Force English numerals in native date and time inputs */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
  font-family: 'Cairo', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  font-feature-settings: "lnum" 1, "tnum" 1, "calt" 0 !important;
  -webkit-font-feature-settings: "lnum" 1, "tnum" 1, "calt" 0 !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

html, body, #root {
  height: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
}

html {
  font-size: 13px !important;
}

aside, .no-scrollbar {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
aside::-webkit-scrollbar, .no-scrollbar::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-main);
  direction: rtl;
  text-align: right;
  height: 100% !important;
  min-height: 100vh !important;
  line-height: 1.5;
  font-size: 16px !important;
  transition: background-color 0.25s ease, color 0.25s ease;
  overflow: hidden !important;
  zoom: 1;
}

/* ==========================================================================
   Comprehensive System-Wide Extra-Large Font Overrides
   ========================================================================== */
body:not(.printing-mode) div:not(.print-invoice-box):not(#printable-invoice):not(#standalone-print-area) .text-\[9px\],
body:not(.printing-mode) span:not(.print-invoice-box):not(#printable-invoice):not(#standalone-print-area) .text-\[9px\],
body:not(.printing-mode) div:not(.print-invoice-box):not(#printable-invoice):not(#standalone-print-area) .text-\[10px\],
body:not(.printing-mode) span:not(.print-invoice-box):not(#printable-invoice):not(#standalone-print-area) .text-\[10px\] {
  font-size: 15px !important;
}

body:not(.printing-mode) div:not(.print-invoice-box):not(#printable-invoice):not(#standalone-print-area) .text-\[11px\],
body:not(.printing-mode) span:not(.print-invoice-box):not(#printable-invoice):not(#standalone-print-area) .text-\[11px\] {
  font-size: 16px !important;
}

body:not(.printing-mode) label {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #000000 !important;
  margin-bottom: 2px;
}

body:not(.printing-mode) table:not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table) th {
  height: 17mm !important;
  vertical-align: middle !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body:not(.printing-mode) table:not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table) th span,
body:not(.printing-mode) table:not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table) th div {
  font-weight: 700 !important;
  font-size: 16px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body:not(.printing-mode) table:not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table) td {
  font-weight: 400 !important;
  font-size: 16px !important;
  color: #000000 !important;
}

body:not(.printing-mode) input,
body:not(.printing-mode) select,
body:not(.printing-mode) textarea {
  font-weight: 400 !important;
  color: #000000 !important;
}

body:not(.printing-mode) .text-xs {
  font-size: 15px !important;
}

body:not(.printing-mode) .text-sm {
  font-size: 16px !important;
}

body:not(.printing-mode) .text-base {
  font-size: 16px !important;
}

body:not(.printing-mode) .text-lg {
  font-size: 18px !important;
}

body:not(.printing-mode) .text-xl {
  font-size: 21px !important;
}

body:not(.printing-mode) .text-2xl {
  font-size: 25px !important;
}

/* Sidebar Menu List Items: 14px Font Size */
aside nav button, aside nav a, aside nav span {
  font-size: 14px !important;
  font-weight: 400 !important;
}

aside nav button .active,
aside nav button span[style*="font-weight: 700"] {
  font-weight: 700 !important;
}

/* Sidebar Group Title Banners Specific Hierarchy - Elegant & Bold */
aside nav div.bg-\[\#0d3b5e\]\/85,
aside nav div.bg-\[\#0d3b5e\]\/85 *,
aside nav div.bg-\[\#0d3b5e\]\/85 span {
  font-size: 13.5px !important;
  font-weight: 900 !important;
}

main label, form label {
  font-size: 16px !important;
  font-weight: 800 !important;
}

/* Sticky Table Headers across all data screens - No leaking or peeking text */
table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#canvas-live-render table) {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#canvas-live-render table) thead {
  position: sticky !important;
  top: -1px !important;
  z-index: 40 !important;
}

table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#canvas-live-render table) thead tr {
  position: sticky !important;
  top: -1px !important;
  z-index: 40 !important;
}

table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#canvas-live-render table) thead tr th {
  position: sticky !important;
  top: -1px !important;
  z-index: 40 !important;
  background-color: #2b7bb9 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  background-clip: padding-box !important;
  border-left: 1px solid rgba(255, 255, 255, 0.25) !important;
  text-align: center !important;
}

table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#canvas-live-render table) thead tr th * {
  text-align: center !important;
  justify-content: center !important;
}

table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#canvas-live-render table) thead tr th:last-child {
  border-left: none !important;
}

:root:not([data-theme="dark"]) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#canvas-live-render table) thead tr th,
[data-theme="light"] table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#canvas-live-render table) thead tr th {
  background-color: #2b7bb9 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="dark"] table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#canvas-live-render table) thead tr th {
  background-color: #2b7bb9 !important;
  color: #ffffff !important;
}

/* Center table tbody cells by default */
table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table) tbody tr td {
  text-align: center !important;
}
table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table) tbody tr td * {
  justify-content: center !important;
}

/* Exception: Keep Customer names and Product names right-aligned */
table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table) thead tr th.keep-right-align,
table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table) tbody tr td.keep-right-align,
table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table) thead tr th.keep-right-align *,
table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table) tbody tr td.keep-right-align * {
  text-align: right !important;
  justify-content: flex-start !important;
}

table tbody {
  position: relative !important;
  z-index: 1 !important;
}

/* Comfortable Spacious Table Row Heights & Enlarged Table Fonts */
main table:not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table) tr {
  height: auto !important;
}

table:not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table) th {
  font-size: 16px !important;
  font-weight: 600 !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  line-height: 1.4 !important;
  vertical-align: middle !important;
  text-align: right !important;
}

table:not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table) td {
  font-size: 16px !important;
  font-weight: 600 !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  line-height: 1.4 !important;
  vertical-align: middle !important;
  text-align: right !important;
}

body:not(.printing-mode) table:not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table) input,
body:not(.printing-mode) table:not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table) select,
body:not(.printing-mode) table:not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table) textarea {
  font-size: 16px !important;
  font-weight: 600 !important;
}

.text-center, td.text-center, th.text-center {
  text-align: center !important;
}

.text-right, td.text-right, th.text-right {
  text-align: right !important;
}

/* Customer Modal Scoped Styling: Crisp 14px & High Contrast Dark Labels */
.customer-modal-container,
.customer-modal-form {
  direction: rtl !important;
}

html:not([data-theme="dark"]) .customer-modal-form label {
  color: #000000 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

html:not([data-theme="dark"]) .customer-modal-form input,
html:not([data-theme="dark"]) .customer-modal-form select,
html:not([data-theme="dark"]) .customer-modal-form textarea {
  color: #000000 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

html[data-theme="dark"] .customer-modal-form label {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .customer-modal-form input,
html[data-theme="dark"] .customer-modal-form select,
html[data-theme="dark"] .customer-modal-form textarea {
  color: #ffffff !important;
  background-color: #0f172a !important;
  border-color: #334155 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

/* Force monochrome glyph rendering for emojis */
span, div, h1, h2, h3, h4, p, button {
  font-variant-emoji: text;
}

/* ==========================================================================
   Force English Digits (1234567890) on All Inputs, Numbers, & Chrome Date Pickers
   ========================================================================== */
input, textarea, select, .font-mono, [type="number"], [type="date"], [type="text"] {
  font-variant-numeric: latin lining-nums tabular-nums !important;
  font-feature-settings: "lnum" 1, "tnum" 1 !important;
}

input[type="number"], 
input[type="date"],
input[inputmode="decimal"],
input[inputmode="numeric"],
input.dir-ltr, 
.font-mono {
  font-family: Arial, "Segoe UI", Roboto, Helvetica, system-ui, sans-serif !important;
  direction: ltr !important;
}

input.dir-rtl {
  direction: rtl !important;
  text-align: right !important;
}

input[type="text"]:not(.dir-ltr):not(.text-center):not(.text-center-force),
textarea:not(.dir-ltr):not(.text-center):not(.text-center-force) {
  direction: rtl !important;
  text-align: right !important;
}

input.text-center,
input.text-center-force,
textarea.text-center,
.text-center-force {
  text-align: center !important;
}

/* ==========================================================================
   LIGHT MODE RULES (data-theme="light" or default)
   ========================================================================== */
html[data-theme="light"] body,
html[data-theme="light"] #root,
html[data-theme="light"] .min-h-screen,
html[data-theme="light"] div.min-h-screen,
html[data-theme="light"] main,
html:not([data-theme="dark"]) body,
html:not([data-theme="dark"]) #root,
html:not([data-theme="dark"]) .min-h-screen,
html:not([data-theme="dark"]) div.min-h-screen,
html:not([data-theme="dark"]) main {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

html[data-theme="light"] aside,
html[data-theme="light"] header,
html:not([data-theme="dark"]) aside,
html:not([data-theme="dark"]) header {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html[data-theme="light"] .bg-slate-900,
html[data-theme="light"] .bg-slate-950,
html[data-theme="light"] .bg-slate-900\/80,
html[data-theme="light"] .bg-slate-950\/80,
html[data-theme="light"] .bg-slate-900\/90,
html[data-theme="light"] .bg-slate-900\/60,
html:not([data-theme="dark"]) .bg-slate-900,
html:not([data-theme="dark"]) .bg-slate-950,
html:not([data-theme="dark"]) .bg-slate-900\/80,
html:not([data-theme="dark"]) .bg-slate-950\/80,
html:not([data-theme="dark"]) .bg-slate-900\/90,
html:not([data-theme="dark"]) .bg-slate-900\/60 {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] .bg-slate-800,
html[data-theme="light"] .bg-slate-800\/40,
html[data-theme="light"] .bg-slate-800\/50,
html[data-theme="light"] .bg-slate-800\/60,
html[data-theme="light"] .bg-slate-800\/80,
html:not([data-theme="dark"]) .bg-slate-800,
html:not([data-theme="dark"]) .bg-slate-800\/40,
html:not([data-theme="dark"]) .bg-slate-800\/50,
html:not([data-theme="dark"]) .bg-slate-800\/60,
html:not([data-theme="dark"]) .bg-slate-800\/80 {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

html[data-theme="light"] .from-slate-900,
html[data-theme="light"] .via-slate-900,
html[data-theme="light"] .to-slate-800,
html:not([data-theme="dark"]) .from-slate-900,
html:not([data-theme="dark"]) .via-slate-900,
html:not([data-theme="dark"]) .to-slate-800 {
  --tw-gradient-from: #ffffff !important;
  --tw-gradient-to: #f1f5f9 !important;
  --tw-gradient-stops: #ffffff, #f8fafc, #f1f5f9 !important;
}

html[data-theme="light"] .text-slate-100:not(.print-modal-card *):not(.create-quote-type-modal-card *),
html[data-theme="light"] .text-slate-200:not(.print-modal-card *):not(.create-quote-type-modal-card *),
html[data-theme="light"] .text-slate-300:not(.print-modal-card *):not(.create-quote-type-modal-card *),
html:not([data-theme="dark"]) .text-slate-100:not(.print-modal-card *):not(.create-quote-type-modal-card *),
html:not([data-theme="dark"]) .text-slate-200:not(.print-modal-card *):not(.create-quote-type-modal-card *),
html:not([data-theme="dark"]) .text-slate-300:not(.print-modal-card *):not(.create-quote-type-modal-card *) {
  color: #0f172a !important;
}

html[data-theme="light"] .text-slate-400:not(.print-modal-card *):not(.create-quote-type-modal-card *),
html:not([data-theme="dark"]) .text-slate-400:not(.print-modal-card *):not(.create-quote-type-modal-card *) {
  color: #334155 !important;
}

/* Modal dark headers & CreateQuoteTypeModal text readability fix */
.print-modal-card h3,
.print-modal-card .text-slate-100,
.print-modal-card .text-white {
  color: #ffffff !important;
}

.create-quote-type-modal-card h3,
.create-quote-type-modal-card h4 {
  color: #e2e8f0 !important;
}

.print-modal-card p,
.print-modal-card .text-slate-300,
.print-modal-card .text-slate-400 {
  color: #cbd5e1 !important;
}

.create-quote-type-modal-card p {
  color: #94a3b8 !important;
}

.create-quote-type-modal-card span {
  color: inherit;
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html:not([data-theme="dark"]) input,
html:not([data-theme="dark"]) select,
html:not([data-theme="dark"]) textarea {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

html[data-theme="light"] table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table) thead,
html[data-theme="light"] table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table) thead tr,
html[data-theme="light"] table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table) thead th,
html:not([data-theme="dark"]) table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table) thead,
html:not([data-theme="dark"]) table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table) thead tr,
html:not([data-theme="dark"]) table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table) thead th {
  background-color: #f1f2f2 !important;
  color: #0f172a !important;
  border-bottom: 8px solid #ffffff !important;
}

html[data-theme="light"] table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table) tbody tr:nth-child(odd),
html:not([data-theme="dark"]) table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table) tbody tr:nth-child(odd) {
  background-color: #f9f9f9 !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}

html[data-theme="light"] table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table) tbody tr:nth-child(even),
html:not([data-theme="dark"]) table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table) tbody tr:nth-child(even) {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}

html[data-theme="light"] table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table) tbody tr:hover,
html[data-theme="light"] table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table) tbody tr:hover td,
html:not([data-theme="dark"]) table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table) tbody tr:hover,
html:not([data-theme="dark"]) table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table) tbody tr:hover td {
  background-color: #fdfbe7 !important;
}

/* ==========================================================================
   GLOBAL INVOICE PRINT TABLE STYLES (SCREEN PREVIEW & PRINT MODE - 0.2mm #7c7c7c BORDERS)
   ========================================================================== */
.print-invoice-box table,
#printable-invoice table,
#standalone-print-area table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0.2mm solid #7c7c7c !important;
}

.print-invoice-box table thead,
#printable-invoice table thead,
#standalone-print-area table thead,
.print-invoice-box table tbody,
#printable-invoice table tbody,
#standalone-print-area table tbody,
.print-invoice-box table tr,
#printable-invoice table tr,
#standalone-print-area table tr {
  margin: 0 !important;
  padding: 0 !important;
  border-spacing: 0 !important;
  border-collapse: collapse !important;
}

.print-invoice-box table th,
.print-invoice-box table td,
#printable-invoice table th,
#printable-invoice table td,
#standalone-print-area table th,
#standalone-print-area table td {
  border: 0.2mm solid #7c7c7c !important;
  border-top: 0.2mm solid #7c7c7c !important;
  border-bottom: 0.2mm solid #7c7c7c !important;
  border-left: 0.2mm solid #7c7c7c !important;
  border-right: 0.2mm solid #7c7c7c !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  margin: 0 !important;
}

.print-invoice-box table thead tr,
#printable-invoice table thead tr,
#standalone-print-area table thead tr,
.print-invoice-box table thead th,
#printable-invoice table thead th,
#standalone-print-area table thead th {
  border: 0.2mm solid #7c7c7c !important;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

/* ==========================================================================
   DARK MODE OVERRIDES (data-theme="dark" and .dark) - Universal Pure White Text
   ========================================================================== */
html[data-theme="dark"],
html.dark,
body.dark {
  --text-main: #ffffff !important;
  --text-muted: #ffffff !important;
}

html[data-theme="dark"] body,
html[data-theme="dark"] #root,
html[data-theme="dark"] .min-h-screen,
html[data-theme="dark"] div.min-h-screen,
html[data-theme="dark"] main,
html.dark body,
html.dark #root,
html.dark .min-h-screen,
html.dark div.min-h-screen,
html.dark main,
body.dark,
body.dark #root,
body.dark .min-h-screen,
body.dark div.min-h-screen,
body.dark main {
  background-color: #0f172a !important;
  color: #ffffff !important;
}

html[data-theme="dark"] aside,
html[data-theme="dark"] header,
html.dark aside,
html.dark header,
body.dark aside,
body.dark header {
  background-color: #0f172a !important;
  border-color: #1e293b !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .bg-slate-900,
html[data-theme="dark"] .bg-slate-950,
html[data-theme="dark"] .bg-slate-900\/80,
html[data-theme="dark"] .bg-slate-950\/80,
html[data-theme="dark"] .bg-slate-900\/90,
html[data-theme="dark"] .bg-slate-900\/60,
html.dark .bg-slate-900,
html.dark .bg-slate-950,
body.dark .bg-slate-900,
body.dark .bg-slate-950 {
  background-color: #1e293b !important;
  color: #ffffff !important;
  border-color: #334155 !important;
}

html[data-theme="dark"] .bg-white:not(.print-invoice-box):not(.print-invoice-box *):not(#printable-invoice):not(#printable-invoice *):not(#standalone-print-area):not(#standalone-print-area *):not(#printable-invoice-modal-content):not(#printable-invoice-modal-content *):not(.print-page *):not(.clock-hour-hand):not(.clock-center-pin),
html.dark .bg-white:not(.print-invoice-box):not(.print-invoice-box *):not(#printable-invoice):not(#printable-invoice *):not(#standalone-print-area):not(#standalone-print-area *):not(#printable-invoice-modal-content):not(#printable-invoice-modal-content *):not(.print-page *):not(.clock-hour-hand):not(.clock-center-pin),
body.dark .bg-white:not(.print-invoice-box):not(.print-invoice-box *):not(#printable-invoice):not(#printable-invoice *):not(#standalone-print-area):not(#standalone-print-area *):not(#printable-invoice-modal-content):not(#printable-invoice-modal-content *):not(.print-page *):not(.clock-hour-hand):not(.clock-center-pin),
html[data-theme="dark"] .bg-slate-50:not(.print-invoice-box *):not(#printable-invoice *):not(#standalone-print-area *),
html[data-theme="dark"] .bg-slate-100:not(.print-invoice-box *):not(#printable-invoice *):not(#standalone-print-area *),
html.dark .bg-slate-50:not(.print-invoice-box *):not(#printable-invoice *):not(#standalone-print-area *),
html.dark .bg-slate-100:not(.print-invoice-box *):not(#printable-invoice *):not(#standalone-print-area *) {
  background-color: #1e293b !important;
  color: #ffffff !important;
  border-color: #334155 !important;
}

html[data-theme="dark"] .bg-blue-50:not(.print-invoice-box *):not(#printable-invoice *):not(#standalone-print-area *),
html[data-theme="dark"] .bg-sky-50:not(.print-invoice-box *):not(#printable-invoice *):not(#standalone-print-area *),
html[data-theme="dark"] .bg-blue-100:not(.print-invoice-box *):not(#printable-invoice *):not(#standalone-print-area *),
html[data-theme="dark"] .bg-sky-100:not(.print-invoice-box *):not(#printable-invoice *):not(#standalone-print-area *),
html.dark .bg-blue-50:not(.print-invoice-box *):not(#printable-invoice *):not(#standalone-print-area *),
html.dark .bg-sky-50:not(.print-invoice-box *):not(#printable-invoice *):not(#standalone-print-area *),
html.dark .bg-blue-100:not(.print-invoice-box *):not(#printable-invoice *):not(#standalone-print-area *),
html.dark .bg-sky-100:not(.print-invoice-box *):not(#printable-invoice *):not(#standalone-print-area *),
body.dark .bg-blue-50:not(.print-invoice-box *):not(#printable-invoice *):not(#standalone-print-area *),
body.dark .bg-sky-50:not(.print-invoice-box *):not(#printable-invoice *):not(#standalone-print-area *),
body.dark .bg-blue-100:not(.print-invoice-box *):not(#printable-invoice *):not(#standalone-print-area *),
body.dark .bg-sky-100:not(.print-invoice-box *):not(#printable-invoice *):not(#standalone-print-area *) {
  background-color: #172554 !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
}

/* Sidebar Analog Clock Hands in all modes */
.clock-hour-hand,
html[data-theme="dark"] .clock-hour-hand,
html.dark .clock-hour-hand,
body.dark .clock-hour-hand {
  background-color: #ffffff !important;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.8) !important;
}

.clock-minute-hand,
html[data-theme="dark"] .clock-minute-hand,
html.dark .clock-minute-hand,
body.dark .clock-minute-hand {
  background-color: #7dd3fc !important;
  box-shadow: 0 0 6px rgba(125, 211, 252, 0.5), 0 2px 4px rgba(0, 0, 0, 0.8) !important;
}

.clock-second-hand,
html[data-theme="dark"] .clock-second-hand,
html.dark .clock-second-hand,
body.dark .clock-second-hand {
  background-color: #f43f5e !important;
}

.clock-center-pin,
html[data-theme="dark"] .clock-center-pin,
html.dark .clock-center-pin,
body.dark .clock-center-pin {
  background-color: #ffffff !important;
  border-color: #f43f5e !important;
}

html[data-theme="dark"] .bg-slate-800,
html[data-theme="dark"] .bg-slate-800\/40,
html[data-theme="dark"] .bg-slate-800\/50,
html[data-theme="dark"] .bg-slate-800\/60,
html[data-theme="dark"] .bg-slate-800\/80,
html.dark .bg-slate-800,
body.dark .bg-slate-800 {
  background-color: #334155 !important;
  color: #ffffff !important;
  border-color: #475569 !important;
}

html[data-theme="dark"] input:not(.print-invoice-box input):not(#printable-invoice input):not(#standalone-print-area input),
html[data-theme="dark"] select:not(.print-invoice-box select):not(#printable-invoice select):not(#standalone-print-area select),
html[data-theme="dark"] textarea:not(.print-invoice-box textarea):not(#printable-invoice textarea):not(#standalone-print-area textarea),
html.dark input:not(.print-invoice-box input):not(#printable-invoice input):not(#standalone-print-area input),
html.dark select:not(.print-invoice-box select):not(#printable-invoice select):not(#standalone-print-area select),
html.dark textarea:not(.print-invoice-box textarea):not(#printable-invoice textarea):not(#standalone-print-area textarea),
body.dark input:not(.print-invoice-box input):not(#printable-invoice input):not(#standalone-print-area input),
body.dark select:not(.print-invoice-box select):not(#printable-invoice select):not(#standalone-print-area select),
body.dark textarea:not(.print-invoice-box textarea):not(#printable-invoice textarea):not(#standalone-print-area textarea) {
  background-color: #1e293b !important;
  color: #ffffff !important;
  border-color: #334155 !important;
}

/* Table Headers in Dark Mode (شريط الترويسة الأزرق بالكامل في الوضع الداكن) */
html[data-theme="dark"] table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table):not(.print-page table) thead,
html[data-theme="dark"] table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table):not(.print-page table) thead tr,
html[data-theme="dark"] table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table):not(.print-page table) thead th,
html.dark table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table):not(.print-page table) thead,
html.dark table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table):not(.print-page table) thead tr,
html.dark table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table):not(.print-page table) thead th,
body.dark table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table):not(.print-page table) thead,
body.dark table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table):not(.print-page table) thead tr,
body.dark table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table):not(.print-page table) thead th {
  background-color: #2b7bb9 !important;
  color: #ffffff !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.25) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="dark"] table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table):not(.print-page table) thead th *,
html.dark table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table):not(.print-page table) thead th *,
body.dark table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table):not(.print-page table) thead th * {
  color: #ffffff !important;
}

/* Dark Mode Table Alternating Row Shading (سطور مظللة وسط وفاتح) */
html[data-theme="dark"] table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table):not(.print-page table) tbody tr:nth-child(odd),
html.dark table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table):not(.print-page table) tbody tr:nth-child(odd),
body.dark table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table):not(.print-page table) tbody tr:nth-child(odd) {
  background-color: #1e293b !important; /* مظلل وسط */
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table):not(.print-page table) tbody tr:nth-child(odd) td,
html.dark table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table):not(.print-page table) tbody tr:nth-child(odd) td,
body.dark table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table):not(.print-page table) tbody tr:nth-child(odd) td {
  background-color: transparent !important;
  color: #ffffff !important;
}

html[data-theme="dark"] table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table):not(.print-page table) tbody tr:nth-child(even),
html.dark table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table):not(.print-page table) tbody tr:nth-child(even),
body.dark table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table):not(.print-page table) tbody tr:nth-child(even) {
  background-color: #2b3b52 !important; /* مظلل فاتح */
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table):not(.print-page table) tbody tr:nth-child(even) td,
html.dark table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table):not(.print-page table) tbody tr:nth-child(even) td,
body.dark table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table):not(.print-page table) tbody tr:nth-child(even) td {
  background-color: transparent !important;
  color: #ffffff !important;
}

/* Dark Mode Hover Row Highlight */
html[data-theme="dark"] table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table):not(.print-page table) tbody tr:hover,
html[data-theme="dark"] table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table):not(.print-page table) tbody tr:hover td,
html.dark table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table):not(.print-page table) tbody tr:hover,
html.dark table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table):not(.print-page table) tbody tr:hover td,
body.dark table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table):not(.print-page table) tbody tr:hover,
body.dark table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table):not(.print-page table) tbody tr:hover td {
  background-color: #3b4e6b !important;
}

html[data-theme="dark"] table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table) tbody td,
html[data-theme="dark"] table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table) tbody td *,
html.dark table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table) tbody td,
html.dark table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table) tbody td *,
body.dark table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table) tbody td,
body.dark table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table) tbody td * {
  color: #ffffff !important;
}

/* Dark Mode table input styling to let row zebra shading look natural */
html[data-theme="dark"] table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table) tbody tr input,
html[data-theme="dark"] table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table) tbody tr select,
html.dark table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table) tbody tr input,
html.dark table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table) tbody tr select {
  background-color: rgba(15, 23, 42, 0.45) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table) tbody tr input:focus,
html[data-theme="dark"] table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table) tbody tr select:focus,
html.dark table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table) tbody tr input:focus,
html.dark table:not(.print-invoice-box table):not(#printable-invoice table):not(#standalone-print-area table) tbody tr select:focus {
  background-color: rgba(15, 23, 42, 0.85) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
}

/* Force All Elements & Children to #ffffff in Dark Mode (Excluding Print Invoices and Specific Danger Badges) */
html[data-theme="dark"] *:not(.print-invoice-box):not(.print-invoice-box *):not(#printable-invoice):not(#printable-invoice *):not(#standalone-print-area):not(#standalone-print-area *):not(#printable-invoice-modal-content):not(#printable-invoice-modal-content *):not(.print-page):not(.print-page *):not(.delete-target-item-name),
html.dark *:not(.print-invoice-box):not(.print-invoice-box *):not(#printable-invoice):not(#printable-invoice *):not(#standalone-print-area):not(#standalone-print-area *):not(#printable-invoice-modal-content):not(#printable-invoice-modal-content *):not(.print-page):not(.print-page *):not(.delete-target-item-name),
body.dark *:not(.print-invoice-box):not(.print-invoice-box *):not(#printable-invoice):not(#printable-invoice *):not(#standalone-print-area):not(#standalone-print-area *):not(#printable-invoice-modal-content):not(#printable-invoice-modal-content *):not(.print-page):not(.print-page *):not(.delete-target-item-name) {
  color: #ffffff !important;
}

/* Preserve High-Impact Danger Red Text for Delete Confirmation Names */
.delete-target-item-name,
html[data-theme="dark"] .delete-target-item-name,
html.dark .delete-target-item-name,
body.dark .delete-target-item-name {
  color: #ef4444 !important;
  font-weight: 900 !important;
}

/* Custom Scrollbar - Prominent & Visible */
::-webkit-scrollbar {
  width: 12px !important;
  height: 12px !important;
}
::-webkit-scrollbar-track {
  background: #f1f5f9 !important;
  border-radius: 6px !important;
}
::-webkit-scrollbar-thumb {
  background: #94a3b8 !important;
  border-radius: 6px !important;
  border: 2px solid #f1f5f9 !important;
}
::-webkit-scrollbar-thumb:hover {
  background: #059669 !important;
}

/* Print Rules for A4 Invoice */
@media print {
  @page {
    size: A4 portrait;
    margin: 0mm !important;
  }

  html, body {
    background: #ffffff !important;
    color: #000000 !important;
    direction: rtl !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Hide root application UI and modal overlays */
  body > *:not(#standalone-print-area) {
    display: none !important;
  }

  header,
  aside,
  nav,
  main,
  #auto-save-bar,
  .toast-container,
  .no-print,
  .no-print * {
    display: none !important;
  }

  /* Outer print area wrapper */
  #standalone-print-area,
  #printable-invoice,
  #printable-invoice-modal-content {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 210mm !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background-color: #ffffff !important;
    transform: none !important;
    overflow: visible !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Each individual A4 page box inside print area */
  .print-invoice-box {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    width: 210mm !important;
    height: 296.5mm !important;
    max-height: 296.8mm !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  .print-invoice-box:not(:last-child) {
    page-break-after: always !important;
    break-after: page !important;
  }

  /* Last page strictly avoids extra trailing page break */
  .print-invoice-box:last-child {
    page-break-after: avoid !important;
    break-after: avoid !important;
  }

  /* Make ALL inner invoice data fields, tables, text, stamps & images visible */
  #standalone-print-area *,
  .print-invoice-box *,
  #printable-invoice *,
  #printable-invoice-modal-content * {
    visibility: visible !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Ensure print tables have zero gap and complete solid PURE BLACK 4-side cell borders */
  #standalone-print-area table,
  .print-invoice-box table,
  #printable-invoice table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0.2mm solid #7c7c7c !important;
  }

  #standalone-print-area table thead,
  .print-invoice-box table thead,
  #printable-invoice table thead,
  #standalone-print-area table tbody,
  .print-invoice-box table tbody,
  #printable-invoice table tbody,
  #standalone-print-area table tr,
  .print-invoice-box table tr,
  #printable-invoice table tr {
    margin: 0 !important;
    padding: 0 !important;
    border-spacing: 0 !important;
    border-collapse: collapse !important;
  }

  #standalone-print-area table th,
  #standalone-print-area table td,
  .print-invoice-box table th,
  .print-invoice-box table td,
  #printable-invoice table th,
  #printable-invoice table td {
    border: 0.2mm solid #7c7c7c !important;
    border-top: 0.2mm solid #7c7c7c !important;
    border-bottom: 0.2mm solid #7c7c7c !important;
    border-left: 0.2mm solid #7c7c7c !important;
    border-right: 0.2mm solid #7c7c7c !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    margin: 0 !important;
  }

  #standalone-print-area table thead tr,
  .print-invoice-box table thead tr,
  #printable-invoice table thead tr {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  #standalone-print-area table thead th,
  .print-invoice-box table thead th,
  #printable-invoice table thead th {
    border: 0.2mm solid #7c7c7c !important;
    border-top: 0.2mm solid #7c7c7c !important;
    border-bottom: 0.2mm solid #7c7c7c !important;
    border-left: 0.2mm solid #7c7c7c !important;
    border-right: 0.2mm solid #7c7c7c !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Target ONLY background image to cover A4 paper */
  .invoice-bg-img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
    z-index: 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Content images (signatures, stamps, logo) retain their exact container dimensions */
  #standalone-print-area img:not(.invoice-bg-img),
  .print-invoice-box img:not(.invoice-bg-img),
  #printable-invoice img:not(.invoice-bg-img),
  #printable-invoice-modal-content img:not(.invoice-bg-img) {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    max-width: 100% !important;
    object-fit: contain !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
}

/* ==========================================================================
   PERMANENT ENGLISH NUMBERS FIX: Force Arial / Segoe UI on ALL inputs & numbers
   ========================================================================== */
input[type="number"], 
input[type="date"], 
input[inputmode="decimal"],
input[inputmode="numeric"],
.font-mono,
.dir-ltr {
  font-family: Arial, "Segoe UI", Roboto, system-ui, sans-serif !important;
  font-variant-numeric: latin lining-nums tabular-nums !important;
  font-feature-settings: "lnum" 1, "tnum" 1 !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

select, option {
  direction: rtl !important;
  text-align: right !important;
}

/* Generic High Priority Alignment Classes */
.keep-right-align,
td.keep-right-align,
th.keep-right-align {
  text-align: right !important;
}
.keep-right-align *,
td.keep-right-align *,
th.keep-right-align * {
  text-align: right !important;
  justify-content: flex-start !important;
}

/* Custom 16px font size for Products Screen only */
.items-view-container table td,
.items-view-container table th,
.items-view-container table td *,
.items-view-container table th *,
.items-view-container .text-black,
.items-view-container span,
.items-view-container button,
.items-view-container input,
.items-view-container select {
  font-size: 16px !important;
  font-weight: 400 !important;
}
.items-view-container table td,
.items-view-container table td *,
.items-view-container input,
.items-view-container select {
  color: #000000 !important;
}

/* Custom 16px font size for Customers Screen only */
.customers-view-container table td,
.customers-view-container table th,
.customers-view-container table td *,
.customers-view-container table th *,
.customers-view-container .text-black,
.customers-view-container span,
.customers-view-container button,
.customers-view-container input,
.customers-view-container select {
  font-size: 16px !important;
  font-weight: 400 !important;
}
.customers-view-container table td,
.customers-view-container table td *,
.customers-view-container input,
.customers-view-container select {
  color: #000000 !important;
}

/* Fix Font Awesome Icons rendering issues (prevent Cairo and font-weight overrides from showing missing glyph box) */
.fa, .fa-solid, .fas, .fa-regular, .far, .fa-brands, .fab,
body * i.fa, body * i.fa-solid, body * i.fas, body * i.fa-regular, body * i.far, body * i.fa-brands, body * i.fab,
body table th i, body table td i {
  font-family: "Font Awesome 6 Free" !important;
}
.fa-solid, .fas, body * i.fa-solid, body * i.fas, body table th i.fa-solid, body table td i.fa-solid {
  font-weight: 900 !important;
}
.fa-regular, .far, body * i.fa-regular, body * i.far, body table th i.fa-regular, body table td i.fa-regular {
  font-weight: 400 !important;
}
.fa-brands, .fab, body * i.fa-brands, body * i.fab, body table th i.fa-brands, body table td i.fa-brands {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}

/* All Delete/Trash Buttons (Rectangles) in RED with WHITE trash icons across entire program */
button:has(.fa-trash),
button:has(.fa-trash-can),
button:has(.fa-trash-alt),
.btn-delete,
.btn-danger,
button.bg-red-600,
button.bg-red-700,
button.bg-rose-600,
button.bg-rose-700 {
  background-color: #dc2626 !important;
  color: #ffffff !important;
}

button:has(.fa-trash) *,
button:has(.fa-trash-can) *,
button:has(.fa-trash-alt) *,
button.bg-red-600 *,
button.bg-red-700 *,
button.bg-rose-600 *,
button.bg-rose-700 *,
.btn-delete *,
.btn-danger *,
i.fa-trash.text-white,
i.fa-trash-can.text-white,
i.fa-trash-alt.text-white {
  color: #ffffff !important;
}

/* Universal Disabled State for Permissions & Actions */
button:disabled,
button[disabled],
input:disabled,
input[disabled],
select:disabled,
select[disabled],
.btn-disabled,
.disabled-action {
  opacity: 0.85 !important;
  cursor: not-allowed !important;
  pointer-events: auto !important;
  box-shadow: none !important;
  transform: none !important;
}

button:disabled:hover,
button[disabled]:hover,
.btn-disabled:hover {
  transform: none !important;
  box-shadow: none !important;
  opacity: 0.85 !important;
}

.btn-action-disabled,
button.btn-action-disabled:disabled {
  opacity: 1 !important;
  color: #0f172a !important;
  background-color: #e2e8f0 !important;
  border: 1.5px solid #94a3b8 !important;
  font-weight: 800 !important;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.animate-shake {
  animation: shake 0.4s ease-in-out;
}

/* ==========================================================================
   Comprehensive Mobile, Tablet & Small Screen Responsive Optimization
   Strictly scoped to screens <= 768px (Desktop view > 768px remains 100% untouched)
   ========================================================================== */
@media (max-width: 1024px) {
  html {
    font-size: 12px !important;
  }
}

@media (max-width: 768px) {
  html, body {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
  }

  html {
    font-size: 11px !important;
  }

  body {
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
  }

  #root,
  .app-root-wrapper {
    height: auto !important;
    min-height: 100% !important;
    min-height: 100dvh !important;
    overflow: visible !important;
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Release inner containers from 100% height locks on mobile */
  .app-root-wrapper > div:not(header):not(.fixed):not([role="dialog"]) {
    height: auto !important;
    min-height: auto !important;
    flex: 1 1 auto !important;
    overflow: visible !important;
  }

  /* Prevent text line collision and prevent Arabic descender clipping */
  p, span, h1, h2, h3, h4, label, button, input, select, textarea {
    line-height: 1.55 !important;
    word-break: normal;
  }

  /* --------------------------------------------------------------------------
     1. Mobile Header (البار العلوي في الموبايل) مع إظهار اسم المنشأة كاملاً دون قص
     -------------------------------------------------------------------------- */
  header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: auto !important;
    padding: 8px 10px !important;
    padding-top: max(8px, env(safe-area-inset-top, 8px)) !important;
    gap: 7px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
  }

  /* Row 1: Menu Button + Logo + Full Unclipped Company Name */
  header > div:first-child {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  header > div:first-child .bg-white\/95 {
    padding: 6px 12px !important;
    min-height: 38px !important;
    border-radius: 12px !important;
    width: auto !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
  }

  header > div:first-child h1 {
    font-size: 13px !important;
    line-height: 1.4 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    word-break: normal !important;
    color: #000000 !important;
    font-weight: 900 !important;
    text-align: right !important;
  }

  /* Row 2: Quick Tools (Calculator, Calendar, Theme) + Exit Button */
  header > div:last-child {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 8px !important;
  }

  header > div:last-child .bg-slate-900 {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    justify-content: space-around !important;
    padding: 3px 6px !important;
    border-radius: 12px !important;
    gap: 4px !important;
  }

  header > div:last-child .bg-slate-900 button {
    padding: 5px 12px !important;
    min-height: 34px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
  }

  header > div:last-child button.bg-rose-600 {
    padding: 5px 16px !important;
    min-height: 34px !important;
    font-size: 12px !important;
    border-radius: 12px !important;
    flex-shrink: 0 !important;
  }

  /* --------------------------------------------------------------------------
     2. Mobile Sidebar Navigation Drawer (البار الجانبي في الموبايل)
     -------------------------------------------------------------------------- */
  aside {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    width: 285px !important;
    max-width: 85vw !important;
    z-index: 9999 !important;
    box-shadow: -6px 0 28px rgba(0, 0, 0, 0.6) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Hide huge analog clock in mobile sidebar to make navigation menu clean & reachable */
  aside .relative.w-48.h-48 {
    display: none !important;
  }

  /* Compact padding in sidebar footer */
  aside .p-3.pb-3.bg-\[\#0f4167\] {
    padding: 10px 8px !important;
    gap: 6px !important;
  }

  /* --------------------------------------------------------------------------
     3. Main Content Area & Layout Elements (العناصر داخل الصفحات)
     -------------------------------------------------------------------------- */
  main {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    padding: 16px 10px !important;
    padding-bottom: 95px !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* Make fixed-width action buttons flexible on mobile */
  .min-w-\[185px\],
  .min-w-\[175px\],
  .min-w-\[160px\],
  .min-w-\[150px\] {
    min-width: 0 !important;
  }

  /* Totals card on mobile quote builder - prevent horizontal overflow */
  .w-full.md\:w-\[378px\],
  .w-full.md\:w-\[370px\],
  .w-full.md\:w-\[350px\],
  .w-full.md\:w-\[390px\],
  [style*="marginInlineEnd"],
  [style*="margin-inline-end"] {
    margin-inline-end: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Dashboard Tabs Strip - smooth horizontal touch scroll on mobile */
  div:has(> button[onClick*="analytics"]),
  .dashboard-tabs-strip {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 4px 6px !important;
  }

  div:has(> button[onClick*="analytics"])::-webkit-scrollbar,
  .dashboard-tabs-strip::-webkit-scrollbar {
    display: none !important;
  }

  div:has(> button[onClick*="analytics"]) button,
  .dashboard-tabs-strip button {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 7px 12px !important;
    min-height: 38px !important;
    font-size: 11.5px !important;
  }

  /* --------------------------------------------------------------------------
     4. Tables Mobile Responsiveness (جداول البيانات في الموبايل)
     -------------------------------------------------------------------------- */
  .overflow-x-auto {
    width: 100% !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    touch-action: pan-x pan-y !important;
  }

  /* Table headers mobile reset (override 17mm desktop height) */
  body table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table) thead tr th {
    height: auto !important;
    min-height: 30px !important;
    padding: 5px 4px !important;
    font-size: 11px !important;
  }

  body table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table) tbody tr td {
    padding: 5px 4px !important;
    font-size: 11px !important;
  }

  body table thead th div {
    padding: 3px 4px !important;
    font-size: 10.5px !important;
  }

  /* Custom table cells inside Products, Customers & Frames views */
  .items-view-container table td,
  .items-view-container table th,
  .items-view-container table td *,
  .items-view-container table th *,
  .customers-view-container table td,
  .customers-view-container table th,
  .customers-view-container table td *,
  .customers-view-container table th *,
  .frames-view-container table td,
  .frames-view-container table th,
  .frames-view-container table td *,
  .frames-view-container table th * {
    font-size: 11px !important;
  }

  /* --------------------------------------------------------------------------
     5. Form Controls & Touch Targets (المدخلات والأزرار باللمس)
     -------------------------------------------------------------------------- */
  input[type="text"],
  input[type="number"],
  input[type="date"],
  input[type="password"],
  select,
  textarea {
    font-size: 12.5px !important;
    min-height: 36px !important;
    touch-action: manipulation !important;
  }

  .rounded-2xl {
    border-radius: 12px !important;
  }

  .rounded-3xl {
    border-radius: 14px !important;
  }

  /* Scale icons cleanly with proper spacing */
  i.fa-solid, i.fa-regular, i.fas, i.far {
    font-size: 0.9em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* --------------------------------------------------------------------------
     6. Modals & Popups on Mobile (النوافذ المنبثقة)
     -------------------------------------------------------------------------- */
  .modal-container,
  [role="dialog"],
  .fixed.inset-0 > div.border,
  .fixed.inset-0 > div.shadow-2xl {
    max-width: 95vw !important;
    width: 95vw !important;
    max-height: 90vh !important;
    max-height: 90dvh !important;
    margin: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 16px !important;
  }

  /* Optimize card paddings on mobile so elements have maximum breathing room */
  .p-6, .p-8 {
    padding: 14px !important;
  }
  .p-5 {
    padding: 12px !important;
  }

  /* Universal bounds protection on mobile: no box or text may spill out of viewport */
  main *,
  header *,
  aside *,
  .modal-container * {
    box-sizing: border-box !important;
  }

  /* Top View Action Buttons Groups: full-width wrap, flexible, no text clipping */
  .flex.items-center.gap-2\.5.flex-wrap,
  .flex.items-center.gap-2.flex-wrap,
  .flex.items-center.gap-3.flex-wrap {
    width: 100% !important;
    justify-content: stretch !important;
  }

  .flex.items-center.gap-2\.5.flex-wrap > button,
  .flex.items-center.gap-2.flex-wrap > button,
  .flex.items-center.gap-3.flex-wrap > button {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
    padding: 9px 12px !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* Form controls fill containers on mobile */
  form input[type="text"],
  form select {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Template Editor & Print Modal preview scaling on mobile */
  .print-modal-scale {
    transform: scale(0.38) !important;
    transform-origin: top center !important;
    margin-bottom: -520px !important;
    max-width: 100vw !important;
  }

  div:has(> #canvas-live-render),
  div:has(> div > #canvas-live-render) {
    transform: scale(0.42) !important;
    transform-origin: top center !important;
    margin-bottom: -460px !important;
    max-width: 100vw !important;
  }

  /* Searchable dropdown menus & date pickers stay within mobile screen */
  .searchable-dropdown-menu,
  div:has(> input[placeholder*="ابحث"]),
  div:has(> div > .fa-calendar) {
    max-width: 92vw !important;
    min-width: 0 !important;
  }

  /* Universal button & badge bounds protection */
  button, a, input, select, textarea {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* All Modals & Dialogs Bounds */
  .fixed.inset-0 {
    padding: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow-y: auto !important;
  }

  .fixed.inset-0 > div {
    max-width: 96vw !important;
    width: 96vw !important;
    max-height: 92dvh !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  /* Specific fix for floating Draggable Calculator on mobile */
  div[style*="position: fixed"],
  div.fixed.z-50.w-96,
  div.fixed.z-50[style*="left"] {
    left: 4vw !important;
    right: 4vw !important;
    top: 5vh !important;
    width: 92vw !important;
    max-width: 92vw !important;
    max-height: 90dvh !important;
    overflow-y: auto !important;
  }

  /* Approvals cards in QuoteBuilder on mobile */
  .lg\:col-span-5,
  .lg\:col-span-4,
  .lg\:col-span-3 {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* QuoteBuilder Approvals boxes responsive text & layout */
  .lg\:col-span-5 > div > div {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* Ensure no table wrapper or grid extends past 100% of its card */
  .overflow-x-auto {
    overflow-x: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* --------------------------------------------------------------------------
     7. Specific Optimization for QuoteListView on Mobile
     -------------------------------------------------------------------------- */
  .quote-list-view-container {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Sticky controls wrapper: cancel sticky on mobile & remove excessive spacing */
  .quote-list-view-container .sticky.top-0 {
    position: static !important;
    top: auto !important;
    padding-top: 0 !important;
    padding-bottom: 2px !important;
    margin-bottom: 4px !important;
  }

  /* Card 1 (Title & Action Buttons) - Super Compact on Mobile */
  .quote-list-view-container .sticky.top-0 > div:first-child {
    padding: 8px 10px !important;
    border-radius: 12px !important;
    gap: 6px !important;
  }

  .quote-list-view-container .sticky.top-0 > div:first-child h2 {
    font-size: 13px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }

  /* Hide lengthy subtitle on mobile to save vertical space */
  .quote-list-view-container .sticky.top-0 > div:first-child p {
    display: none !important;
  }

  /* Place the 2 buttons side-by-side in one compact row on mobile */
  .quote-list-view-container .sticky.top-0 > div:first-child .flex.items-center.gap-2 {
    width: 100% !important;
    flex-direction: row !important;
    gap: 6px !important;
    margin-top: 4px !important;
  }

  .quote-list-view-container .sticky.top-0 > div:first-child button {
    flex: 1 1 50% !important;
    width: 50% !important;
    min-width: 0 !important;
    padding: 6px 6px !important;
    min-height: 34px !important;
    font-size: 11px !important;
    border-radius: 10px !important;
    gap: 4px !important;
  }

  .quote-list-view-container .sticky.top-0 > div:first-child button i {
    font-size: 11px !important;
  }

  /* Card 2 (Search & Filters Toolbar) - Super Compact on Mobile */
  .quote-list-view-container .sticky.top-0 > div:last-child {
    padding: 8px 10px !important;
    border-radius: 12px !important;
    gap: 6px !important;
  }

  .quote-list-view-container .sticky.top-0 > div:last-child input[type="text"] {
    width: 100% !important;
    min-height: 32px !important;
    padding: 4px 28px 4px 8px !important;
    font-size: 11.5px !important;
    border-radius: 8px !important;
  }

  .quote-list-view-container .sticky.top-0 > div:last-child select {
    min-height: 30px !important;
    padding: 3px 6px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
  }

  .quote-list-view-container .sticky.top-0 > div:last-child .flex.flex-wrap {
    gap: 5px !important;
  }

  /* Hide redundant "فرز الفواتير حسب" badge on mobile to save vertical space */
  .quote-list-view-container .sticky.top-0 > div:last-child .bg-blue-50,
  .quote-list-view-container .sticky.top-0 > div:last-child .bg-blue-950\/80 {
    display: none !important;
  }

  /* Filter items in 2 columns on mobile */
  .quote-list-view-container .sticky.top-0 > div:last-child .flex.flex-wrap.items-center.gap-2\.5 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .quote-list-view-container .sticky.top-0 > div:last-child .flex.flex-wrap.items-center.gap-2\.5 > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    width: 100% !important;
  }

  .quote-list-view-container .sticky.top-0 > div:last-child .flex.flex-wrap.items-center.gap-2\.5 > div span {
    font-size: 10px !important;
  }

  .quote-list-view-container .sticky.top-0 > div:last-child .flex.flex-wrap.items-center.gap-2\.5 > div select {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Reset button spans full width on mobile */
  .quote-list-view-container .sticky.top-0 > div:last-child button {
    grid-column: 1 / -1 !important;
    justify-content: center !important;
    min-height: 30px !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
  }

  /* Table action buttons in QuoteListView */
  .quote-list-view-container table td button {
    padding: 5px 6px !important;
    min-width: 28px !important;
    min-height: 28px !important;
  }

  /* --------------------------------------------------------------------------
     8. Specific Optimization for CustomersView on Mobile
     -------------------------------------------------------------------------- */
  .customers-view-container {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Unstick controls header on mobile */
  .customers-view-container .sticky.top-0 {
    position: static !important;
    top: auto !important;
    padding-top: 0 !important;
    padding-bottom: 2px !important;
    margin-bottom: 4px !important;
  }

  /* Card 1 (Title & Action Buttons) - Compact Height */
  .customers-view-container .sticky.top-0 > div:first-child {
    padding: 8px 10px !important;
    border-radius: 12px !important;
    gap: 6px !important;
  }

  .customers-view-container .sticky.top-0 > div:first-child h2 {
    font-size: 13px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }

  /* Hide subtitle on mobile to save vertical space */
  .customers-view-container .sticky.top-0 > div:first-child p {
    display: none !important;
  }

  /* Button group in CustomersView: compact grid on mobile */
  .customers-view-container .sticky.top-0 > div:first-child .flex.items-center.gap-2\.5 {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    margin-top: 4px !important;
  }

  .customers-view-container .sticky.top-0 > div:first-child button {
    min-width: 0 !important;
    width: 100% !important;
    padding: 6px 6px !important;
    min-height: 34px !important;
    font-size: 11px !important;
    border-radius: 10px !important;
    gap: 4px !important;
  }

  /* Return to dashboard button spans full width below the two action buttons */
  .customers-view-container .sticky.top-0 > div:first-child button:first-child {
    grid-column: 1 / -1 !important;
    order: 3 !important;
    min-height: 32px !important;
  }

  /* Card 2 (Search & Items per page) - Beautifully Arranged & Compact */
  .customers-view-container .sticky.top-0 > div:last-child {
    padding: 8px 10px !important;
    border-radius: 12px !important;
    gap: 6px !important;
    flex-direction: row !important;
    align-items: center !important;
  }

  .customers-view-container .sticky.top-0 > div:last-child .relative.w-full {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .customers-view-container .sticky.top-0 > div:last-child input[type="text"] {
    width: 100% !important;
    min-height: 34px !important;
    padding: 4px 30px 4px 8px !important;
    font-size: 11.5px !important;
    border-radius: 8px !important;
  }

  .customers-view-container .sticky.top-0 > div:last-child select {
    min-height: 32px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
  }

  .customers-view-container .sticky.top-0 > div:last-child .flex.items-center.gap-2.text-xs {
    flex-shrink: 0 !important;
    gap: 4px !important;
    font-size: 11px !important;
  }

  /* --------------------------------------------------------------------------
     9. Specific Optimization for ItemsView (المخزون والمنتجات) on Mobile
     -------------------------------------------------------------------------- */
  .items-view-container {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    gap: 8px !important;
  }

  /* Card 1 (Title & Action Buttons) - Compact Height */
  .items-view-container > div:first-child {
    padding: 8px 10px !important;
    border-radius: 12px !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
  }

  .items-view-container > div:first-child h2 {
    font-size: 13px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }

  /* Hide subtitle on mobile to save vertical space */
  .items-view-container > div:first-child p {
    display: none !important;
  }

  /* Button group in ItemsView: compact grid on mobile */
  .items-view-container > div:first-child .flex.items-center.gap-2\.5 {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    margin-top: 4px !important;
  }

  .items-view-container > div:first-child button {
    min-width: 0 !important;
    width: 100% !important;
    padding: 6px 6px !important;
    min-height: 34px !important;
    font-size: 11px !important;
    border-radius: 10px !important;
    gap: 4px !important;
  }

  /* Return to dashboard button spans full width below the two action buttons */
  .items-view-container > div:first-child button:first-child {
    grid-column: 1 / -1 !important;
    order: 3 !important;
    min-height: 32px !important;
  }

  /* Card 2 (Search & Items per page) - Beautifully Arranged & Compact */
  .items-view-container > div:nth-child(2) {
    padding: 8px 10px !important;
    border-radius: 12px !important;
    gap: 6px !important;
    flex-direction: row !important;
    align-items: center !important;
    margin-bottom: 6px !important;
  }

  .items-view-container > div:nth-child(2) .relative.w-full {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .items-view-container > div:nth-child(2) input[type="text"] {
    width: 100% !important;
    min-height: 34px !important;
    padding: 4px 30px 4px 8px !important;
    font-size: 11.5px !important;
    border-radius: 8px !important;
  }

  .items-view-container > div:nth-child(2) select {
    min-height: 32px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
  }

  .items-view-container > div:nth-child(2) .flex.items-center.gap-2.text-xs {
    flex-shrink: 0 !important;
    gap: 4px !important;
    font-size: 11px !important;
  }

  /* --------------------------------------------------------------------------
     10. Specific Optimization for FramesView (الأعواد والبراويز) on Mobile
     -------------------------------------------------------------------------- */
  .frames-view-container {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    gap: 8px !important;
  }

  /* Card 1 (Title & Action Buttons) - Compact Height */
  .frames-view-container > div:first-child {
    padding: 8px 10px !important;
    border-radius: 12px !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
  }

  .frames-view-container > div:first-child h2 {
    font-size: 13px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }

  /* Hide subtitle on mobile to save vertical space */
  .frames-view-container > div:first-child p {
    display: none !important;
  }

  /* Button group in FramesView: compact grid on mobile */
  .frames-view-container > div:first-child .flex.items-center.gap-2\.5 {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    margin-top: 4px !important;
  }

  .frames-view-container > div:first-child button {
    min-width: 0 !important;
    width: 100% !important;
    padding: 6px 6px !important;
    min-height: 34px !important;
    font-size: 11px !important;
    border-radius: 10px !important;
    gap: 4px !important;
  }

  /* Return to dashboard button spans full width below the two action buttons */
  .frames-view-container > div:first-child button:first-child {
    grid-column: 1 / -1 !important;
    order: 3 !important;
    min-height: 32px !important;
  }

  /* Card 2 (Search & Items per page) - Beautifully Arranged & Compact */
  .frames-view-container > div:nth-child(2) {
    padding: 6px 10px !important;
    border-radius: 12px !important;
    gap: 8px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 6px !important;
  }

  .frames-view-container > div:nth-child(2) .relative.w-full {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
  }

  .frames-view-container > div:nth-child(2) input[type="text"] {
    width: 100% !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 4px 28px 4px 8px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
  }

  .frames-view-container > div:nth-child(2) select {
    min-height: 32px !important;
    height: 32px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
  }

  .frames-view-container > div:nth-child(2) .flex.items-center.gap-1\.5,
  .frames-view-container > div:nth-child(2) .flex.items-center.gap-2,
  .frames-view-container > div:nth-child(2) .flex.items-center.gap-3 {
    flex-shrink: 0 !important;
    gap: 4px !important;
    font-size: 11px !important;
  }

  /* Prevent trailing 'عنصر' from flipping or cluttering search cards on mobile */
  .items-view-container > div:nth-child(2) .flex.items-center.gap-2.text-xs span:last-child,
  .customers-view-container .sticky.top-0 > div:last-child .flex.items-center.gap-2.text-xs span:last-child {
    display: none !important;
  }

  /* Table card and pagination in FramesView on Mobile */
  .frames-view-container > div:nth-child(3) {
    padding: 8px !important;
    border-radius: 16px !important;
  }

  .frames-view-container table th,
  .frames-view-container table td {
    padding: 6px 8px !important;
    font-size: 11px !important;
    vertical-align: middle !important;
  }

  .frames-view-container table td button {
    padding: 4px 6px !important;
    min-height: 28px !important;
    min-width: 28px !important;
  }
}


@media (max-width: 480px) {
  html {
    font-size: 10.5px !important;
  }

  header {
    padding: 6px 8px !important;
  }

  header span.select-none {
    display: none !important;
  }

  /* Toast alerts on small screens */
  .fixed.bottom-5.left-5 {
    bottom: 10px !important;
    left: 6px !important;
    right: 6px !important;
  }
}

/* ==========================================================================
   ERP ACCOUNTING TABLE THEME (all data tables, light mode)
   header #c5c8cc, zebra rows, amber hover, footer #d2d5d9
   ========================================================================== */
html:not([data-theme="dark"]) body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) { border-collapse: separate !important; border-spacing: 0 !important; }
html:not([data-theme="dark"]) body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) thead,
html:not([data-theme="dark"]) body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) thead tr { background-color: #c5c8cc !important; }
html:not([data-theme="dark"]) body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) thead tr th {
  background-color: #c5c8cc !important; color: #111827 !important;
  font-weight: 700 !important; font-size: 13px !important; height: 40px !important;
  padding: 8px !important; white-space: nowrap !important;
  border-left: 1px solid #9ca3af !important; border-bottom: 2px solid #9ca3af !important;
  box-shadow: none !important; text-align: center !important;
}
html:not([data-theme="dark"]) body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) thead tr th:last-child { border-left: none !important; }
html:not([data-theme="dark"]) body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) thead tr th * { color: #111827 !important; font-size: 13px !important; font-weight: 700 !important; }
html:not([data-theme="dark"]) body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) tbody tr { height: 40px !important; border-bottom: 1px solid #e5e7eb !important; transition: background-color .15s ease !important; }
html:not([data-theme="dark"]) body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) tbody tr:nth-child(odd) { background-color: #ffffff !important; }
html:not([data-theme="dark"]) body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) tbody tr:nth-child(even) { background-color: rgba(248, 250, 252, 0.5) !important; }
html:not([data-theme="dark"]) body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) tbody tr:hover,
html:not([data-theme="dark"]) body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) tbody tr:hover td { background-color: rgba(254, 249, 227, 0.75) !important; }
html:not([data-theme="dark"]) body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) tbody tr td {
  font-size: 13px !important; padding: 8px !important;
  border-bottom: 1px solid #e5e7eb !important; border-left: 1px solid #e5e7eb !important;
}
html:not([data-theme="dark"]) body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) tbody tr td:last-child { border-left: none !important; }
html:not([data-theme="dark"]) body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) tfoot, html:not([data-theme="dark"]) body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) tfoot tr, html:not([data-theme="dark"]) body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) tfoot td, html:not([data-theme="dark"]) body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) tfoot th {
  background-color: #d2d5d9 !important; color: #111827 !important; font-weight: 700 !important;
  height: 44px !important; border-top: 2px solid #9ca3af !important;
  border-left: 1px solid #9ca3af !important; text-align: center !important;
}

/* Mobile: compact, horizontally scrollable tables */
@media (max-width: 768px) {
  .overflow-x-auto { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; max-width: 100%; }
  .overflow-x-auto > table, .overflow-auto > table { min-width: 640px; }
  html:not([data-theme="dark"]) body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) thead tr th,
  html:not([data-theme="dark"]) body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) thead tr th * { font-size: 12px !important; }
  html:not([data-theme="dark"]) body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) tbody tr td { font-size: 12px !important; padding: 6px 5px !important; }
  html:not([data-theme="dark"]) body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) tbody tr { height: 36px !important; }
  html:not([data-theme="dark"]) body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) tbody tr td button { min-width: 32px; min-height: 32px; }
}

/* Accounting amount column (grand total): navy bold on soft amber */
html:not([data-theme="dark"]) body:not(.printing-mode) table tbody tr td.acc-total,
html:not([data-theme="dark"]) body:not(.printing-mode) table tbody tr td.acc-total * {
  color: #1e3a8a !important;
  font-weight: 700 !important;
}
html:not([data-theme="dark"]) body:not(.printing-mode) table tbody tr td.acc-total {
  background-color: rgba(255, 251, 235, 0.7) !important;
}

/* Pagination bar (ERP style) */
html:not([data-theme="dark"]) .erp-pager {
  background-color: #ffffff;
  border-top: 1px solid #e5e7eb;
  padding: 12px;
  border-radius: 0 0 12px 12px;
}
@media (max-width: 768px) {
  .erp-pager > div:last-child { width: 100%; justify-content: space-between; }
  .erp-pager button { min-height: 36px; }
}

/* ERP table theme - dark mode */
html[data-theme="dark"] body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) thead, html[data-theme="dark"] body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) thead tr, html[data-theme="dark"] body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) thead tr th { background-color: #334155 !important; color: #f1f5f9 !important; }
html[data-theme="dark"] body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) thead tr th { border-left: 1px solid #475569 !important; border-bottom: 2px solid #475569 !important; font-weight: 700 !important; box-shadow: none !important; }
html[data-theme="dark"] body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) thead tr th:last-child { border-left: none !important; }
html[data-theme="dark"] body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) thead tr th * { color: #f1f5f9 !important; }
html[data-theme="dark"] body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) tbody tr:nth-child(odd) { background-color: #0f172a !important; }
html[data-theme="dark"] body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) tbody tr:nth-child(even) { background-color: #162033 !important; }
html[data-theme="dark"] body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) tbody tr:hover, html[data-theme="dark"] body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) tbody tr:hover td { background-color: rgba(245, 158, 11, 0.18) !important; }
html[data-theme="dark"] body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) tbody tr td { border-bottom: 1px solid #1e293b !important; border-left: 1px solid #1e293b !important; }
html[data-theme="dark"] body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) tbody tr td:last-child { border-left: none !important; }
html[data-theme="dark"] body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) tfoot, html[data-theme="dark"] body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) tfoot tr, html[data-theme="dark"] body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) tfoot td, html[data-theme="dark"] body:not(.printing-mode) table:not(.print-page table):not(.print-invoice-box table):not(#printable-invoice table):not(#printable-invoice-modal-content table):not(#standalone-print-area table):not(#canvas-live-render table) tfoot th { background-color: #1e293b !important; color: #f1f5f9 !important; font-weight: 700 !important; border-top: 2px solid #475569 !important; }
html[data-theme="dark"] body:not(.printing-mode) table tbody tr td.acc-total,
html[data-theme="dark"] body:not(.printing-mode) table tbody tr td.acc-total * { color: #93c5fd !important; font-weight: 700 !important; }

/* Shared TablePager buttons */
.erp-pager-btn {
  min-width: 32px; height: 32px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #e5e7eb; border-radius: 6px; background: #f9fafb; color: #374151;
  font-size: 12px; font-weight: 700; cursor: pointer; transition: background-color .15s;
}
.erp-pager-btn:hover:not(:disabled) { background: #fef3c7; }
.erp-pager-btn:disabled { opacity: .35; cursor: not-allowed; }
.erp-pager-btn.is-active { background: #b49b6c !important; border-color: #b49b6c; color: #fff !important; }
html[data-theme="dark"] .erp-pager-btn { background: #1e293b; border-color: #334155; color: #e2e8f0; }
html[data-theme="dark"] .erp-pager-btn:hover:not(:disabled) { background: #334155; }
.erp-pager { padding: 10px 12px; }
html[data-theme="dark"] .erp-pager { border-top: 1px solid #334155; }

/* ==========================================================================
   QUOTE BUILDER — ITEMS TABLE (بنود عرض السعر)
   المعرّف مكرر عمداً (#qb-items×5) ليتغلب على قواعد الجداول العامة أعلاه
   التي تحمل 4 معرّفات داخل :not() مع !important — النطاق محصور بهذا الجدول فقط.
   ========================================================================== */
.qb-items-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: #0f172a; }
.qb-items-title-icon { width: 30px; height: 30px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: #eff6ff; color: #2563eb; font-size: 13px; }
.qb-items-count { font-size: 11px; font-weight: 700; color: #1d4ed8; background: #dbeafe; border-radius: 999px; padding: 2px 10px; }
.qb-items-wrap { border: 1px solid #e2e8f0; border-radius: 16px; background: #ffffff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }

table#qb-items#qb-items#qb-items#qb-items#qb-items { border-collapse: separate !important; border-spacing: 0 !important; }
table#qb-items#qb-items#qb-items#qb-items#qb-items thead,
table#qb-items#qb-items#qb-items#qb-items#qb-items thead tr { background: #f8fafc !important; }
table#qb-items#qb-items#qb-items#qb-items#qb-items thead tr th {
  background: #f8fafc !important; color: #475569 !important;
  font-size: 12px !important; font-weight: 700 !important; text-align: center !important;
  padding: 11px 8px !important; white-space: nowrap;
  border: none !important; border-bottom: 1px solid #e2e8f0 !important; box-shadow: none !important;
}
table#qb-items#qb-items#qb-items#qb-items#qb-items thead tr th * { color: #475569 !important; font-size: 12px !important; }
table#qb-items#qb-items#qb-items#qb-items#qb-items thead tr th.qb-th-name { text-align: right !important; padding-right: 52px !important; }
table#qb-items#qb-items#qb-items#qb-items#qb-items thead tr th:first-child { border-top-right-radius: 16px; }
table#qb-items#qb-items#qb-items#qb-items#qb-items thead tr th:last-child { border-top-left-radius: 16px; }
table#qb-items#qb-items#qb-items#qb-items#qb-items thead tr th:last-child i { color: #94a3b8 !important; }

table#qb-items#qb-items#qb-items#qb-items#qb-items tbody tr,
table#qb-items#qb-items#qb-items#qb-items#qb-items tbody tr:nth-child(odd),
table#qb-items#qb-items#qb-items#qb-items#qb-items tbody tr:nth-child(even),
table#qb-items#qb-items#qb-items#qb-items#qb-items tbody tr td { background: #ffffff !important; color: #0f172a !important; }
table#qb-items#qb-items#qb-items#qb-items#qb-items tbody tr { height: auto !important; border: none !important; }
table#qb-items#qb-items#qb-items#qb-items#qb-items tbody tr td {
  padding: 7px 5px !important; font-size: 12px !important; vertical-align: middle;
  border: none !important; border-bottom: 1px solid #f1f5f9 !important;
}
table#qb-items#qb-items#qb-items#qb-items#qb-items tbody tr:last-child td { border-bottom: none !important; }
table#qb-items#qb-items#qb-items#qb-items#qb-items tbody tr:hover,
table#qb-items#qb-items#qb-items#qb-items#qb-items tbody tr:hover td { background: #f5f9ff !important; }

table#qb-items#qb-items#qb-items#qb-items#qb-items .qb-index {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px;
  background: #f1f5f9; color: #475569 !important; font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

table#qb-items#qb-items#qb-items#qb-items#qb-items .qb-field {
  background: #f8fafc !important; color: #0f172a !important;
  border: 1px solid #e2e8f0 !important; border-radius: 10px !important;
  font-size: 13px !important; font-weight: 600 !important;
  box-shadow: none !important; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
table#qb-items#qb-items#qb-items#qb-items#qb-items .qb-field:hover { border-color: #cbd5e1 !important; background: #ffffff !important; }
table#qb-items#qb-items#qb-items#qb-items#qb-items .qb-field:focus {
  background: #ffffff !important; border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important; outline: none !important;
}
table#qb-items#qb-items#qb-items#qb-items#qb-items .qb-field:disabled,
table#qb-items#qb-items#qb-items#qb-items#qb-items input.qb-field[readonly] { background: #f1f5f9 !important; color: #64748b !important; opacity: 1 !important; }
table#qb-items#qb-items#qb-items#qb-items#qb-items .qb-field option { background: #ffffff !important; color: #0f172a !important; }

table#qb-items#qb-items#qb-items#qb-items#qb-items .qb-total {
  background: #eff6ff !important; border: 1px solid #bfdbfe !important; border-radius: 10px !important;
  color: #1e3a8a !important; font-size: 13px !important; font-weight: 800 !important;
  font-variant-numeric: tabular-nums; box-shadow: none !important;
}

table#qb-items#qb-items#qb-items#qb-items#qb-items .qb-add-btn {
  background: #eff6ff !important; color: #2563eb !important; border: 1px solid #bfdbfe !important;
  border-radius: 10px !important; box-shadow: none !important;
}
table#qb-items#qb-items#qb-items#qb-items#qb-items .qb-add-btn:hover:not(:disabled) { background: #2563eb !important; color: #ffffff !important; border-color: #2563eb !important; }
table#qb-items#qb-items#qb-items#qb-items#qb-items .qb-add-btn i { color: inherit !important; }

table#qb-items#qb-items#qb-items#qb-items#qb-items .qb-del-btn {
  background: #fef2f2 !important; color: #dc2626 !important; border: 1px solid #fecaca !important;
  border-radius: 10px !important; box-shadow: none !important;
}
table#qb-items#qb-items#qb-items#qb-items#qb-items .qb-del-btn:hover:not(:disabled) { background: #dc2626 !important; color: #ffffff !important; border-color: #dc2626 !important; }
table#qb-items#qb-items#qb-items#qb-items#qb-items .qb-del-btn i { color: inherit !important; }

/* الوضع الداكن */
html[data-theme="dark"] .qb-items-title { color: #f1f5f9; }
html[data-theme="dark"] .qb-items-title-icon { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
html[data-theme="dark"] .qb-items-count { background: rgba(59, 130, 246, 0.2); color: #93c5fd; }
html[data-theme="dark"] .qb-items-wrap { background: #0f172a; border-color: #1e293b; }
html[data-theme="dark"] table#qb-items#qb-items#qb-items#qb-items#qb-items thead,
html[data-theme="dark"] table#qb-items#qb-items#qb-items#qb-items#qb-items thead tr,
html[data-theme="dark"] table#qb-items#qb-items#qb-items#qb-items#qb-items thead tr th { background: #1e293b !important; border-bottom-color: #334155 !important; }
html[data-theme="dark"] table#qb-items#qb-items#qb-items#qb-items#qb-items thead tr th,
html[data-theme="dark"] table#qb-items#qb-items#qb-items#qb-items#qb-items thead tr th * { color: #cbd5e1 !important; }
html[data-theme="dark"] table#qb-items#qb-items#qb-items#qb-items#qb-items tbody tr,
html[data-theme="dark"] table#qb-items#qb-items#qb-items#qb-items#qb-items tbody tr:nth-child(odd),
html[data-theme="dark"] table#qb-items#qb-items#qb-items#qb-items#qb-items tbody tr:nth-child(even),
html[data-theme="dark"] table#qb-items#qb-items#qb-items#qb-items#qb-items tbody tr td { background: #0f172a !important; color: #f1f5f9 !important; border-bottom-color: #1e293b !important; }
html[data-theme="dark"] table#qb-items#qb-items#qb-items#qb-items#qb-items tbody tr:hover,
html[data-theme="dark"] table#qb-items#qb-items#qb-items#qb-items#qb-items tbody tr:hover td { background: #162033 !important; }
html[data-theme="dark"] table#qb-items#qb-items#qb-items#qb-items#qb-items .qb-index { background: #1e293b; color: #cbd5e1 !important; }
html[data-theme="dark"] table#qb-items#qb-items#qb-items#qb-items#qb-items .qb-field { background: #1e293b !important; color: #f1f5f9 !important; border-color: #334155 !important; }
html[data-theme="dark"] table#qb-items#qb-items#qb-items#qb-items#qb-items .qb-field:hover,
html[data-theme="dark"] table#qb-items#qb-items#qb-items#qb-items#qb-items .qb-field:focus { background: #0f172a !important; }
html[data-theme="dark"] table#qb-items#qb-items#qb-items#qb-items#qb-items .qb-field option { background: #0f172a !important; color: #f1f5f9 !important; }
html[data-theme="dark"] table#qb-items#qb-items#qb-items#qb-items#qb-items .qb-total { background: rgba(59, 130, 246, 0.12) !important; border-color: rgba(59, 130, 246, 0.35) !important; color: #93c5fd !important; }
html[data-theme="dark"] table#qb-items#qb-items#qb-items#qb-items#qb-items .qb-add-btn { background: rgba(59, 130, 246, 0.15) !important; color: #60a5fa !important; border-color: rgba(59, 130, 246, 0.35) !important; }
html[data-theme="dark"] table#qb-items#qb-items#qb-items#qb-items#qb-items .qb-del-btn { background: rgba(220, 38, 38, 0.12) !important; color: #f87171 !important; border-color: rgba(220, 38, 38, 0.35) !important; }

/* ===== التنقل بلوحة المفاتيح (Tab): إطار واضح حول العنصر الحالي في جميع أقسام البرنامج =====
   :focus-visible يظهر عند التنقل بالكيبورد فقط (لا عند النقر بالماوس على الأزرار)،
   و!important لتجاوز outline-none المنتشرة في الواجهة. */
button:focus-visible,
a:focus-visible,
select:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
input[type="file"]:focus-visible {
  outline: 2px solid #2563eb !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.25) !important;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus-visible,
textarea:focus-visible {
  outline: 2px solid #2563eb !important;
  outline-offset: 0 !important;
}
html[data-theme="dark"] :is(button, a, select, summary, [role="button"], [tabindex]:not([tabindex="-1"]), input, textarea):focus-visible,
html.dark :is(button, a, select, summary, [role="button"], [tabindex]:not([tabindex="-1"]), input, textarea):focus-visible {
  outline-color: #60a5fa !important;
}

/* ===== شاشة الدخول: الخلفية الملوّنة تنتقل مع الحقل المحدد (Tab) =====
   الحقل غير المحدد أبيض حتى لو عبّأه المتصفح تلقائياً (autofill)، والمحدد أزرق فاتح بإطار أزرق. */
input.login-field,
input.login-field:-webkit-autofill {
  background-color: #ffffff !important;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #000000 !important;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
input.login-field:not(.border-rose-400):focus,
input.login-field:not(.border-rose-400):focus:-webkit-autofill {
  background-color: #e8f0fe !important;
  border-color: #2563eb !important;
  -webkit-box-shadow: 0 0 0 1000px #e8f0fe inset, 0 0 0 3px rgba(37, 99, 235, 0.3) !important;
  box-shadow: 0 0 0 1000px #e8f0fe inset, 0 0 0 3px rgba(37, 99, 235, 0.3) !important;
  outline: none !important;
}