body.cinematic-embedded {
  --text: #eef6ff;
  --muted: #c6d7ec;
  --border: rgba(210, 230, 255, 0.34);
  --border2: rgba(170, 198, 232, 0.24);
  --card: rgba(20, 33, 54, 0.32);
  --card2: rgba(28, 44, 68, 0.34);
  background-image: url("/bg-aurora.png") !important;
  background-attachment: fixed !important;
  background-size: cover !important;
  background-position: center 16% !important;
  background-repeat: no-repeat !important;
  background-color: #030913 !important;
  color: #eef6ff !important;
  font-family: "Tajawal", "Cairo", "Noto Naskh Arabic", sans-serif !important;
  position: relative;
  isolation: isolate;
}

@font-face {
  font-family: "Amiri";
  src: url("/amiri-font/fonts/Amiri-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Amiri";
  src: url("/amiri-font/fonts/Amiri-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body.cinematic-embedded,
body.cinematic-embedded input,
body.cinematic-embedded select,
body.cinematic-embedded textarea,
body.cinematic-embedded button,
body.cinematic-embedded th,
body.cinematic-embedded td {
  font-family: "Amiri", "Noto Naskh Arabic", "Tajawal", "Cairo", serif !important;
}

body.cinematic-embedded::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(96% 76% at 14% 22%, rgba(132, 255, 230, 0.32), transparent 58%),
    radial-gradient(92% 72% at 84% 70%, rgba(255, 190, 112, 0.28), transparent 60%),
    radial-gradient(120% 86% at 50% -6%, rgba(168, 236, 255, 0.18), transparent 58%),
    radial-gradient(78% 56% at 50% 108%, rgba(255, 195, 126, 0.16), transparent 64%),
    radial-gradient(2px 2px at 22% 25%, rgba(255, 255, 255, 0.14), transparent 62%),
    radial-gradient(2px 2px at 73% 22%, rgba(255, 255, 255, 0.12), transparent 62%),
    radial-gradient(2px 2px at 45% 79%, rgba(255, 255, 255, 0.09), transparent 62%);
  mix-blend-mode: screen;
  z-index: 0;
}

body.cinematic-embedded::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 96% at 50% 45%, rgba(0, 0, 0, 0) 42%, rgba(3, 10, 22, 0.38) 100%),
    linear-gradient(180deg, rgba(4, 10, 20, 0.1), rgba(3, 8, 18, 0.34));
  z-index: 0;
}

body.cinematic-embedded > * {
  position: relative;
  z-index: 1;
}

body.cinematic-embedded .s-logo,
body.cinematic-embedded .logo {
  background:
    url("/assets/logo-almanar-mark.png?v=20260216-3") center/86% 86% no-repeat,
    linear-gradient(180deg, rgba(22, 35, 58, 0.78), rgba(12, 23, 42, 0.78)) !important;
  border-color: rgba(175, 216, 255, 0.32) !important;
  box-shadow: 0 10px 24px rgba(7, 18, 40, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
}

body.cinematic-embedded .topbar-logo img,
body.cinematic-embedded .head-logo img,
body.cinematic-embedded .top-left-logo img,
body.cinematic-embedded .wmLogo img,
body.cinematic-embedded img[src*="/logo-almanar"] {
  object-fit: contain !important;
  background: transparent !important;
  filter: drop-shadow(0 6px 14px rgba(6, 16, 32, 0.35));
}

body.cinematic-embedded .sheet td.colItem,
body.cinematic-embedded .sheet .colItem .itemName,
body.cinematic-embedded .sheet .colItem .itemBrand,
body.cinematic-embedded table tbody td,
body.cinematic-embedded table tbody td * {
  color: #eef7ff !important;
  opacity: 1 !important;
  text-shadow: 0 1px 0 rgba(3, 10, 22, 0.35);
}

body.cinematic-embedded .page,
body.cinematic-embedded .wrap,
body.cinematic-embedded .container,
body.cinematic-embedded main {
  background: transparent !important;
}

body.cinematic-embedded .card,
body.cinematic-embedded .panel,
body.cinematic-embedded .tableCard,
body.cinematic-embedded .tableWrap,
body.cinematic-embedded .table-wrap,
body.cinematic-embedded .box,
body.cinematic-embedded .modal,
body.cinematic-embedded .modalCard,
body.cinematic-embedded .summary-card,
body.cinematic-embedded .warehouse-sidebar,
body.cinematic-embedded .warehouse-details,
body.cinematic-embedded .items-panel,
body.cinematic-embedded .transfer-panel,
body.cinematic-embedded .items-table-wrap,
body.cinematic-embedded .history-table-wrap,
body.cinematic-embedded .product-table-wrap,
body.cinematic-embedded .cart-card,
body.cinematic-embedded .scroll,
body.cinematic-embedded .kpi,
body.cinematic-embedded .quickAddBar,
body.cinematic-embedded .quickAddRow,
body.cinematic-embedded .resultRow,
body.cinematic-embedded .suggest,
body.cinematic-embedded .content,
body.cinematic-embedded .section,
body.cinematic-embedded .sheet {
  border-color: rgba(210, 230, 255, 0.36) !important;
  background:
    radial-gradient(130% 130% at 0% 0%, rgba(114, 221, 208, 0.18), transparent 55%),
    radial-gradient(130% 130% at 100% 100%, rgba(236, 182, 108, 0.14), transparent 58%),
    linear-gradient(180deg, rgba(28, 40, 61, 0.38), rgba(18, 29, 48, 0.32)) !important;
  box-shadow: 0 16px 36px rgba(2, 8, 19, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 1px rgba(177, 210, 246, 0.13) !important;
  backdrop-filter: blur(18px) saturate(138%);
}

body.cinematic-embedded .btn,
body.cinematic-embedded button,
body.cinematic-embedded .pill,
body.cinematic-embedded .typeBtn,
body.cinematic-embedded .tabBtn,
body.cinematic-embedded a.btn {
  border-color: rgba(214, 234, 255, 0.46) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08)) !important;
  color: #f4fbff !important;
  text-shadow: 0 1px 1px rgba(4, 10, 22, 0.48);
}

body.cinematic-embedded .btn.primary,
body.cinematic-embedded .pill.active,
body.cinematic-embedded .typeBtn.active,
body.cinematic-embedded button.primary {
  border-color: rgba(226, 247, 255, 0.74) !important;
  background:
    radial-gradient(130% 130% at 0% 0%, rgba(135, 246, 224, 0.72), transparent 56%),
    linear-gradient(135deg, rgba(135, 235, 217, 0.72), rgba(160, 189, 255, 0.7)) !important;
  color: #0a2034 !important;
  text-shadow: none;
}

body.cinematic-embedded input,
body.cinematic-embedded select,
body.cinematic-embedded textarea,
body.cinematic-embedded .in,
body.cinematic-embedded .cellInput {
  border-color: rgba(205, 227, 255, 0.44) !important;
  background: rgba(18, 30, 48, 0.42) !important;
  color: #f0f8ff !important;
}

body.cinematic-embedded input::placeholder,
body.cinematic-embedded textarea::placeholder {
  color: rgba(222, 235, 255, 0.78) !important;
}

body.cinematic-embedded table th,
body.cinematic-embedded thead th {
  background: linear-gradient(180deg, rgba(48, 71, 104, 0.46), rgba(37, 58, 88, 0.4)) !important;
  color: #f2f8ff !important;
  border-color: rgba(201, 223, 250, 0.34) !important;
}

body.cinematic-embedded table td,
body.cinematic-embedded tbody td {
  background: rgba(14, 25, 42, 0.3) !important;
  color: #ebf4ff !important;
  border-color: rgba(170, 197, 236, 0.2) !important;
}

body.cinematic-embedded h1,
body.cinematic-embedded h2,
body.cinematic-embedded h3,
body.cinematic-embedded h4,
body.cinematic-embedded h5,
body.cinematic-embedded h6,
body.cinematic-embedded .title,
body.cinematic-embedded .sectionTitle,
body.cinematic-embedded .kpi .v {
  color: #f4f9ff !important;
}

body.cinematic-embedded p,
body.cinematic-embedded span,
body.cinematic-embedded label,
body.cinematic-embedded li,
body.cinematic-embedded td,
body.cinematic-embedded th,
body.cinematic-embedded .muted,
body.cinematic-embedded .sub,
body.cinematic-embedded .note {
  color: rgba(228, 240, 255, 0.94) !important;
}

/* Force glass on all deep subpages/tables, even against strong local !important rules. */
body.cinematic-embedded.cinematic-embedded [class*="card"],
body.cinematic-embedded.cinematic-embedded [class*="panel"],
body.cinematic-embedded.cinematic-embedded [class*="wrap"],
body.cinematic-embedded.cinematic-embedded [class*="table"],
body.cinematic-embedded.cinematic-embedded [class*="modal"],
body.cinematic-embedded.cinematic-embedded [class*="box"],
body.cinematic-embedded.cinematic-embedded section,
body.cinematic-embedded.cinematic-embedded article {
  border-color: rgba(210, 230, 255, 0.36) !important;
  background:
    radial-gradient(130% 130% at 0% 0%, rgba(114, 221, 208, 0.18), transparent 56%),
    radial-gradient(130% 130% at 100% 100%, rgba(236, 182, 108, 0.14), transparent 58%),
    linear-gradient(180deg, rgba(22, 34, 54, 0.34), rgba(14, 25, 42, 0.28)) !important;
  box-shadow: 0 14px 32px rgba(2, 8, 18, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(18px) saturate(138%);
}

body.cinematic-embedded.cinematic-embedded table,
body.cinematic-embedded.cinematic-embedded thead,
body.cinematic-embedded.cinematic-embedded tbody,
body.cinematic-embedded.cinematic-embedded tr {
  background: transparent !important;
}

body.cinematic-embedded.cinematic-embedded table th,
body.cinematic-embedded.cinematic-embedded thead th,
body.cinematic-embedded.cinematic-embedded .tableWrap th,
body.cinematic-embedded.cinematic-embedded .table-wrap th,
body.cinematic-embedded.cinematic-embedded [class*="table"] th {
  background: linear-gradient(180deg, rgba(45, 68, 102, 0.44), rgba(31, 53, 85, 0.38)) !important;
  color: #f1f8ff !important;
  border-color: rgba(192, 217, 251, 0.36) !important;
}

body.cinematic-embedded.cinematic-embedded table td,
body.cinematic-embedded.cinematic-embedded tbody td,
body.cinematic-embedded.cinematic-embedded .tableWrap tbody tr td,
body.cinematic-embedded.cinematic-embedded .table-wrap tbody tr td,
body.cinematic-embedded.cinematic-embedded .product-table-wrap tbody tr td,
body.cinematic-embedded.cinematic-embedded .history-table-wrap tbody tr td,
body.cinematic-embedded.cinematic-embedded .items-table-wrap tbody tr td,
body.cinematic-embedded.cinematic-embedded [class*="table"] tbody tr td {
  background: rgba(12, 24, 42, 0.24) !important;
  color: #eaf4ff !important;
  border-color: rgba(166, 195, 236, 0.24) !important;
}

body.cinematic-embedded.cinematic-embedded tbody tr:nth-child(even) td,
body.cinematic-embedded.cinematic-embedded .tableWrap tbody tr:nth-child(even) td,
body.cinematic-embedded.cinematic-embedded .table-wrap tbody tr:nth-child(even) td,
body.cinematic-embedded.cinematic-embedded .product-table-wrap tbody tr:nth-child(even) td,
body.cinematic-embedded.cinematic-embedded .history-table-wrap tbody tr:nth-child(even) td,
body.cinematic-embedded.cinematic-embedded .items-table-wrap tbody tr:nth-child(even) td,
body.cinematic-embedded.cinematic-embedded [class*="table"] tbody tr:nth-child(even) td {
  background: rgba(16, 29, 49, 0.3) !important;
}

body.cinematic-embedded.cinematic-embedded tbody tr:hover td,
body.cinematic-embedded.cinematic-embedded [class*="table"] tbody tr:hover td {
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(118, 236, 212, 0.18), transparent 56%),
    linear-gradient(180deg, rgba(26, 42, 66, 0.48), rgba(20, 34, 56, 0.42)) !important;
}

body.cinematic-embedded.cinematic-embedded .btn,
body.cinematic-embedded.cinematic-embedded button,
body.cinematic-embedded.cinematic-embedded [class*="badge"],
body.cinematic-embedded.cinematic-embedded [class*="tag"],
body.cinematic-embedded.cinematic-embedded [class*="pill"] {
  border-color: rgba(212, 232, 255, 0.48) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1)) !important;
  color: #f4fbff !important;
}

body.cinematic-embedded.cinematic-embedded a:not(.btn) {
  color: #7bdcff !important;
}

/* Accounting page hard override: keep cards/tables in glass mode even with local page CSS. */
body.cinematic-embedded .wrap {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.cinematic-embedded #panel-clients,
body.cinematic-embedded #panel-invoices,
body.cinematic-embedded #panel-treasury,
body.cinematic-embedded #panel-expenses,
body.cinematic-embedded #pay-edit-modal-mask .modal {
  border-color: rgba(210, 230, 255, 0.38) !important;
  background:
    radial-gradient(130% 130% at 0% 0%, rgba(114, 221, 208, 0.2), transparent 56%),
    radial-gradient(130% 130% at 100% 100%, rgba(236, 182, 108, 0.16), transparent 58%),
    linear-gradient(180deg, rgba(24, 36, 57, 0.44), rgba(15, 27, 45, 0.36)) !important;
  box-shadow: 0 18px 40px rgba(2, 8, 20, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 1px rgba(174, 210, 248, 0.14) !important;
  backdrop-filter: blur(18px) saturate(140%);
}

body.cinematic-embedded #panel-clients .grid,
body.cinematic-embedded #panel-invoices .grid,
body.cinematic-embedded #panel-treasury .grid,
body.cinematic-embedded #panel-expenses .grid,
body.cinematic-embedded #pay-edit-client-list {
  border-color: rgba(192, 217, 251, 0.34) !important;
  background: rgba(12, 24, 42, 0.24) !important;
}

body.cinematic-embedded #panel-clients table,
body.cinematic-embedded #panel-invoices table,
body.cinematic-embedded #panel-treasury table,
body.cinematic-embedded #panel-expenses table,
body.cinematic-embedded #pay-edit-client-list table {
  background: transparent !important;
}

body.cinematic-embedded #panel-clients thead th,
body.cinematic-embedded #panel-invoices thead th,
body.cinematic-embedded #panel-treasury thead th,
body.cinematic-embedded #panel-expenses thead th {
  background: linear-gradient(180deg, rgba(46, 70, 103, 0.46), rgba(31, 53, 85, 0.4)) !important;
  color: #f3f9ff !important;
  border-color: rgba(195, 219, 251, 0.36) !important;
}

body.cinematic-embedded #panel-clients tbody td,
body.cinematic-embedded #panel-invoices tbody td,
body.cinematic-embedded #panel-treasury tbody td,
body.cinematic-embedded #panel-expenses tbody td {
  background: rgba(12, 24, 42, 0.28) !important;
  color: #ecf5ff !important;
  border-color: rgba(166, 195, 236, 0.24) !important;
}

body.cinematic-embedded #panel-clients tbody tr:nth-child(even) td,
body.cinematic-embedded #panel-invoices tbody tr:nth-child(even) td,
body.cinematic-embedded #panel-treasury tbody tr:nth-child(even) td,
body.cinematic-embedded #panel-expenses tbody tr:nth-child(even) td {
  background: rgba(16, 29, 49, 0.32) !important;
}

body.cinematic-embedded #panel-clients tbody tr:hover td,
body.cinematic-embedded #panel-invoices tbody tr:hover td,
body.cinematic-embedded #panel-treasury tbody tr:hover td,
body.cinematic-embedded #panel-expenses tbody tr:hover td {
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(118, 236, 212, 0.18), transparent 56%),
    linear-gradient(180deg, rgba(26, 42, 66, 0.5), rgba(20, 34, 56, 0.44)) !important;
}

body.cinematic-embedded #panel-clients .tab,
body.cinematic-embedded #panel-invoices .tab,
body.cinematic-embedded #panel-treasury .tab,
body.cinematic-embedded #panel-expenses .tab,
body.cinematic-embedded #panel-clients .btn,
body.cinematic-embedded #panel-invoices .btn,
body.cinematic-embedded #panel-treasury .btn,
body.cinematic-embedded #panel-expenses .btn,
body.cinematic-embedded #panel-clients .inline-actions button,
body.cinematic-embedded #panel-invoices .inline-actions button,
body.cinematic-embedded #panel-treasury .inline-actions button,
body.cinematic-embedded #panel-expenses .inline-actions button {
  border-color: rgba(214, 234, 255, 0.48) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1)) !important;
  color: #f4fbff !important;
}

body.cinematic-embedded #panel-clients input,
body.cinematic-embedded #panel-invoices input,
body.cinematic-embedded #panel-treasury input,
body.cinematic-embedded #panel-expenses input,
body.cinematic-embedded #panel-clients select,
body.cinematic-embedded #panel-invoices select,
body.cinematic-embedded #panel-treasury select,
body.cinematic-embedded #panel-expenses select,
body.cinematic-embedded #panel-clients textarea,
body.cinematic-embedded #panel-invoices textarea,
body.cinematic-embedded #panel-treasury textarea,
body.cinematic-embedded #panel-expenses textarea {
  border-color: rgba(205, 227, 255, 0.44) !important;
  background: rgba(18, 30, 48, 0.46) !important;
  color: #f0f8ff !important;
}

body.cinematic-embedded #panel-clients .muted,
body.cinematic-embedded #panel-invoices .muted,
body.cinematic-embedded #panel-treasury .muted,
body.cinematic-embedded #panel-expenses .muted {
  color: rgba(224, 237, 255, 0.9) !important;
}

/* Order / sales-quote page (brand grid + qty table) */
body.cinematic-embedded {
  --bg: #050d19 !important;
  --bg0: #060f1c !important;
  --bg1: #091326 !important;
  --surface: rgba(14, 25, 43, 0.5) !important;
  --card: rgba(16, 29, 49, 0.42) !important;
  --card2: rgba(26, 42, 66, 0.42) !important;
  --text: #edf6ff !important;
  --muted: #c3d5ea !important;
  --border: rgba(205, 227, 255, 0.34) !important;
  --border2: rgba(182, 210, 245, 0.24) !important;
  --primary: #78d8ff !important;
  --primary2: #83f3d8 !important;
}

body.cinematic-embedded .app,
body.cinematic-embedded #pageMain,
body.cinematic-embedded .main,
body.cinematic-embedded .sidebar,
body.cinematic-embedded .topbar,
body.cinematic-embedded .card,
body.cinematic-embedded .sheet,
body.cinematic-embedded .status,
body.cinematic-embedded .mobileBar {
  border-color: rgba(206, 228, 255, 0.36) !important;
  background:
    radial-gradient(130% 130% at 0% 0%, rgba(114, 221, 208, 0.16), transparent 56%),
    radial-gradient(130% 130% at 100% 100%, rgba(236, 182, 108, 0.14), transparent 58%),
    linear-gradient(180deg, rgba(20, 33, 54, 0.42), rgba(14, 26, 46, 0.34)) !important;
  box-shadow: 0 16px 36px rgba(2, 8, 20, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 1px rgba(171, 208, 248, 0.12) !important;
  backdrop-filter: blur(18px) saturate(138%);
}

body.cinematic-embedded .toolbar,
body.cinematic-embedded .toolbar .left,
body.cinematic-embedded .toolbar .right,
body.cinematic-embedded .brands-wrap,
body.cinematic-embedded .search-row,
body.cinematic-embedded .list,
body.cinematic-embedded .table-wrap {
  background: transparent !important;
}

body.cinematic-embedded .brandGrid {
  background: transparent !important;
  gap: 8px !important;
}

body.cinematic-embedded .brandChip {
  border-color: rgba(209, 230, 255, 0.44) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.1)) !important;
  color: #f4fbff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 20px rgba(2, 8, 20, 0.3) !important;
}

body.cinematic-embedded .brandChip.active {
  border-color: rgba(236, 250, 255, 0.74) !important;
  background:
    radial-gradient(130% 130% at 0% 0%, rgba(136, 246, 222, 0.72), transparent 56%),
    linear-gradient(135deg, rgba(133, 235, 216, 0.74), rgba(160, 188, 255, 0.72)) !important;
  color: #0a2034 !important;
  box-shadow: 0 0 0 1px rgba(175, 241, 225, 0.36), 0 16px 32px rgba(6, 22, 38, 0.44), 0 0 24px rgba(136, 246, 222, 0.28) !important;
}

body.cinematic-embedded .sheet table,
body.cinematic-embedded .sheet thead,
body.cinematic-embedded .sheet tbody,
body.cinematic-embedded .sheet tr {
  background: transparent !important;
}

body.cinematic-embedded .sheet thead th {
  background: linear-gradient(180deg, rgba(47, 71, 104, 0.46), rgba(31, 53, 85, 0.4)) !important;
  color: #f3f9ff !important;
  border-color: rgba(194, 219, 251, 0.36) !important;
}

body.cinematic-embedded .sheet tbody td {
  background: rgba(12, 24, 42, 0.28) !important;
  color: #eaf4ff !important;
  border-color: rgba(166, 195, 236, 0.24) !important;
}

body.cinematic-embedded .sheet tbody tr:nth-child(even) td {
  background: rgba(16, 29, 49, 0.32) !important;
}

body.cinematic-embedded .sheet tbody tr:hover td {
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(118, 236, 212, 0.18), transparent 56%),
    linear-gradient(180deg, rgba(26, 42, 66, 0.5), rgba(20, 34, 56, 0.44)) !important;
}

body.cinematic-embedded .qty,
body.cinematic-embedded input.qty,
body.cinematic-embedded input,
body.cinematic-embedded select,
body.cinematic-embedded textarea {
  border-color: rgba(205, 227, 255, 0.44) !important;
  background: rgba(18, 30, 48, 0.46) !important;
  color: #f0f8ff !important;
}

/* Fix unreadable text when legacy white cards/headers appear */
body.cinematic-embedded [style*="background:#fff"],
body.cinematic-embedded [style*="background: #fff"],
body.cinematic-embedded [style*="background:#ffffff"],
body.cinematic-embedded [style*="background: #ffffff"],
body.cinematic-embedded [style*="background-color:#fff"],
body.cinematic-embedded [style*="background-color: #fff"],
body.cinematic-embedded [style*="background-color:#ffffff"],
body.cinematic-embedded [style*="background-color: #ffffff"],
body.cinematic-embedded .tableWrap,
body.cinematic-embedded .chartCard {
  border-color: rgba(206, 228, 255, 0.36) !important;
  background:
    radial-gradient(130% 130% at 0% 0%, rgba(114, 221, 208, 0.16), transparent 56%),
    radial-gradient(130% 130% at 100% 100%, rgba(236, 182, 108, 0.14), transparent 58%),
    linear-gradient(180deg, rgba(20, 33, 54, 0.42), rgba(14, 26, 46, 0.34)) !important;
  color: #eef7ff !important;
}

body.cinematic-embedded .k,
body.cinematic-embedded .v,
body.cinematic-embedded .muted,
body.cinematic-embedded th,
body.cinematic-embedded td {
  color: #eaf5ff !important;
}

/* Client order lock: flat light visual like the reference screenshot. */
body.cinematic-embedded.client-fixed-light,
body.perf-lite.cinematic-embedded.client-fixed-light {
  --bg: #eef3f9 !important;
  --bg0: #f4f7fc !important;
  --bg1: #e9f0f9 !important;
  --surface: #ffffff !important;
  --card: #ffffff !important;
  --card2: #f3f7fc !important;
  --text: #0f1f36 !important;
  --muted: #667f9f !important;
  --border: #cfdaea !important;
  --border2: #dbe5f2 !important;
  --primary: #3d72da !important;
  --primary2: #335fbe !important;
  background-color: #eef3f9 !important;
  background-image: linear-gradient(180deg, #f4f7fc, #e9f0f9) !important;
  color: #0f1f36 !important;
}

body.cinematic-embedded.client-fixed-light::before,
body.cinematic-embedded.client-fixed-light::after,
body.perf-lite.cinematic-embedded.client-fixed-light::before,
body.perf-lite.cinematic-embedded.client-fixed-light::after {
  content: none !important;
}

body.cinematic-embedded.client-fixed-light .app,
body.cinematic-embedded.client-fixed-light #pageMain,
body.cinematic-embedded.client-fixed-light .main {
  background: transparent !important;
}

body.cinematic-embedded.client-fixed-light .sidebar,
body.cinematic-embedded.client-fixed-light .topbar,
body.cinematic-embedded.client-fixed-light .card,
body.cinematic-embedded.client-fixed-light .sheet,
body.cinematic-embedded.client-fixed-light .status,
body.cinematic-embedded.client-fixed-light .mobileBar,
body.cinematic-embedded.client-fixed-light .table-wrap,
body.cinematic-embedded.client-fixed-light .tableWrap,
body.cinematic-embedded.client-fixed-light .items-table-wrap,
body.cinematic-embedded.client-fixed-light .history-table-wrap,
body.cinematic-embedded.client-fixed-light .product-table-wrap,
body.cinematic-embedded.client-fixed-light .summary-card {
  background: #ffffff !important;
  border-color: #d3deec !important;
  color: #0f1f36 !important;
  box-shadow: 0 10px 20px rgba(24, 43, 75, 0.08) !important;
  backdrop-filter: none !important;
}

body.cinematic-embedded.client-fixed-light .topbar .t1,
body.cinematic-embedded.client-fixed-light .topbar .t2,
body.cinematic-embedded.client-fixed-light #status,
body.cinematic-embedded.client-fixed-light #reviewStatus {
  color: #102743 !important;
  text-shadow: none !important;
}

body.cinematic-embedded.client-fixed-light .pill,
body.cinematic-embedded.client-fixed-light #kpiPill {
  background: #f3f7fc !important;
  border-color: #d1dced !important;
  color: #1a3558 !important;
  text-shadow: none !important;
}

body.cinematic-embedded.client-fixed-light .brandChip {
  border-color: #c8d7ea !important;
  background: #f2f6fb !important;
  color: #0f2848 !important;
  box-shadow: none !important;
}

body.cinematic-embedded.client-fixed-light .brandChip.active {
  border-color: #3a6ccd !important;
  background: linear-gradient(135deg, #4b80e5, #3769ca) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 20px rgba(56, 97, 184, 0.24) !important;
}

body.cinematic-embedded.client-fixed-light .btn,
body.cinematic-embedded.client-fixed-light button,
body.cinematic-embedded.client-fixed-light .typeBtn,
body.cinematic-embedded.client-fixed-light .tabBtn,
body.cinematic-embedded.client-fixed-light a.btn {
  background: #ffffff !important;
  border-color: #c8d7ea !important;
  color: #0f1f36 !important;
  text-shadow: none !important;
  box-shadow: 0 8px 16px rgba(24, 43, 75, 0.10) !important;
}

body.cinematic-embedded.client-fixed-light .btn.primary,
body.cinematic-embedded.client-fixed-light button.primary,
body.cinematic-embedded.client-fixed-light .pill.active,
body.cinematic-embedded.client-fixed-light .typeBtn.active {
  border-color: #3769ca !important;
  background: linear-gradient(135deg, #4b80e5, #3769ca) !important;
  color: #ffffff !important;
}

body.cinematic-embedded.client-fixed-light input,
body.cinematic-embedded.client-fixed-light select,
body.cinematic-embedded.client-fixed-light textarea,
body.cinematic-embedded.client-fixed-light .qty,
body.cinematic-embedded.client-fixed-light input.qty {
  background: #ffffff !important;
  border-color: #c8d7ea !important;
  color: #0f1f36 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

body.cinematic-embedded.client-fixed-light input::placeholder,
body.cinematic-embedded.client-fixed-light textarea::placeholder {
  color: #758eac !important;
}

body.cinematic-embedded.client-fixed-light table,
body.cinematic-embedded.client-fixed-light .sheet table {
  background: #ffffff !important;
}

body.cinematic-embedded.client-fixed-light table th,
body.cinematic-embedded.client-fixed-light thead th {
  background: #d9e2ee !important;
  border-color: #c9d5e6 !important;
  color: #1b3659 !important;
  text-shadow: none !important;
}

body.cinematic-embedded.client-fixed-light table td,
body.cinematic-embedded.client-fixed-light tbody td {
  background: #ffffff !important;
  border-color: #e1e9f4 !important;
  color: #0f1f36 !important;
  text-shadow: none !important;
}

body.cinematic-embedded.client-fixed-light tbody tr:nth-child(even) td {
  background: #ffffff !important;
}

body.cinematic-embedded.client-fixed-light tbody tr:hover td {
  background: #f3f8ff !important;
}

body.cinematic-embedded.client-fixed-light .sheet td.colItem,
body.cinematic-embedded.client-fixed-light .sheet .colItem .itemName,
body.cinematic-embedded.client-fixed-light .sheet .colItem .itemBrand,
body.cinematic-embedded.client-fixed-light table tbody td,
body.cinematic-embedded.client-fixed-light table tbody td * {
  color: #0f1f36 !important;
  text-shadow: none !important;
}

body.cinematic-embedded.client-fixed-light .muted,
body.cinematic-embedded.client-fixed-light .sub,
body.cinematic-embedded.client-fixed-light .note {
  color: #667f9f !important;
}

/* Sidebar/menu readability on client order light mode */
body.cinematic-embedded.client-fixed-light .s-title,
body.cinematic-embedded.client-fixed-light .s-sub,
body.cinematic-embedded.client-fixed-light .nav a,
body.cinematic-embedded.client-fixed-light .nav a span:not(.dot) {
  color: #111827 !important;
  text-shadow: none !important;
  font-family: "Tajawal", "Cairo", "Noto Sans Arabic", "Segoe UI", Arial, sans-serif !important;
  font-weight: 700 !important;
}

/* Low-latency fallback for embedded pages. */
body.perf-lite.cinematic-embedded {
  background-image: linear-gradient(180deg, #070b14, #0b1220) !important;
  background-attachment: scroll !important;
}
body.perf-lite.cinematic-embedded.client-fixed-light {
  background-image: linear-gradient(180deg, #eef3fb, #e4ecf8) !important;
}
body.perf-lite.cinematic-embedded::before,
body.perf-lite.cinematic-embedded::after {
  content: none !important;
}
body.perf-lite.cinematic-embedded,
body.perf-lite.cinematic-embedded *,
body.perf-lite.cinematic-embedded *::before,
body.perf-lite.cinematic-embedded *::after {
  animation: none !important;
  transition: none !important;
  text-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  mix-blend-mode: normal !important;
}