/* ==========================================================================
   هوية صدف — غزال، فرو، وخلفية كريمية مستوحاة من الكوب
   ========================================================================== */
:root {
  --ink: #39241a;
  --ink-2: #573a2a;
  --teal-950: #2b190f;
  --teal-900: #3c2517;
  --teal-800: #4d2e1b;
  --teal-700: #603a22;
  --teal-600: #754a2d;
  --teal-500: #91613f;
  --teal-300: #c9a986;
  --teal-200: #e6d1b7;
  --teal-100: #f2e7d8;
  --teal-50: #faf4ea;

  --sand-50: #fdf9f1;
  --sand-100: #f8f1e5;
  --sand-200: #f0e4d3;
  --sand-300: #e3cfb2;
  --sand-400: #c9a77a;

  --coral-700: #84472b;
  --coral-600: #9f5834;
  --coral-500: #b97246;
  --coral-300: #deb491;
  --coral-100: #f7e9dc;

  --gold-700: #82612f;
  --gold-600: #a17b44;
  --gold-500: #bd9960;
  --gold-300: #ddc49d;
  --gold-100: #f4ebda;

  --cream: #f6f0e6;
  --paper: #fffdf8;
  --muted: #8e7b6b;
  --muted-2: #ad9d8f;
  --line: rgba(72, 43, 27, 0.12);
  --line-strong: rgba(72, 43, 27, 0.2);

  --success: #5f764c;
  --success-bg: #eef3e7;
  --danger: #a34932;
  --danger-bg: #f9eae4;
  --warning: #966728;
  --warning-bg: #f8efdf;
  --info: #71624f;
  --info-bg: #f0ebe2;
  --violet: #785844;
  --violet-bg: #f2e9df;
}

/* نسيج فرو الغزال — الصورة مأخوذة من تصميم الكوب */
.fur-image-fill,
.sidebar-fur,
.onboarding-fur,
.start-fur {
  background-image: url("../assets/gazelle-fur-clean.jpg");
  background-position: center 45%;
  background-size: cover;
  background-repeat: no-repeat;
}

body.landing {
  background:
    radial-gradient(1000px 700px at 88% -5%, rgba(246, 233, 213, 0.95) 0%, rgba(247, 242, 233, 0) 60%),
    radial-gradient(800px 560px at 3% 20%, rgba(229, 208, 181, 0.55) 0%, rgba(247, 242, 233, 0) 68%),
    linear-gradient(180deg, #fbf6ec 0%, #f7f0e5 55%, #f3ebde 100%);
}

.page-grain { opacity: 0.026; }

::selection { background: var(--teal-200); color: var(--teal-950); }

/* ==========================================================================
   الشعار
   ========================================================================== */
.brand-gazelle {
  gap: 12px;
}

.brand-lockup {
  width: auto;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 5px 10px rgba(80, 45, 24, 0.08));
  transition: transform 0.3s var(--ease), height 0.3s var(--ease);
}

.brand:hover .brand-lockup { transform: translateY(-1px) scale(1.015); }

.site-header.is-scrolled .brand-lockup { height: 47px; }

.brand-caption {
  color: #8d7867;
  border-right: 1px solid rgba(90, 55, 33, 0.17);
}

.brand-mark,
.brand-text,
.sidebar-word { display: none; }

.hero-brand {
  display: flex;
  align-items: flex-end;
  gap: 15px;
  margin: 0 0 17px -2px;
}

.hero-brand img {
  width: auto;
  height: 92px;
  filter: drop-shadow(0 12px 20px rgba(72, 42, 24, 0.1));
}

.hero-brand-note {
  font-size: 10px;
  color: #9b8572;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(112, 73, 45, 0.2);
  white-space: nowrap;
}

.loading-mark {
  width: 152px;
  height: 140px;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  margin-bottom: 4px;
}

.loading-mark img {
  width: auto;
  height: 132px;
  object-fit: contain;
  animation: none;
}

.loading-ring { display: none; }
.loading-word { display: none; }
.loading-caption { font-size: 12px; color: #8e7b6b; margin-top: 3px; }
.fatal-card img,
.fatal-logo { width: auto; height: 110px; margin: 0 auto 14px; object-fit: contain; }

.sidebar-logo {
  width: auto;
  height: 66px;
  object-fit: contain;
  flex: none;
  filter: drop-shadow(0 6px 9px rgba(83, 50, 28, 0.08));
}

.sidebar-brand {
  flex-direction: row !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 0 4px 11px !important;
}

.sidebar-brand-text {
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 5px !important;
  min-width: 0;
}

.sidebar-tagline {
  color: #8e7a68 !important;
  font-size: 9.5px !important;
  margin: 0 !important;
  white-space: nowrap;
}

.sidebar-version {
  color: #9f8b79 !important;
  border-color: rgba(109, 75, 48, 0.22) !important;
  margin: 0 !important;
  align-self: flex-start !important;
  font-size: 7px !important;
  line-height: 1.4;
}

.sidebar-fur {
  height: 14px;
  border-radius: 3px;
  margin: 0 4px 15px;
  opacity: 0.92;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 5px rgba(70, 42, 24, 0.08);
  position: relative;
  z-index: 3;
  flex: none;
}

.mobile-brand img {
  width: auto !important;
  height: 37px !important;
  object-fit: contain;
}

/* أيقونات صغيرة داخل العناوين والسطور */
.card-title > svg,
.kpi-label > svg,
.today-badge > svg,
.sale-profit-preview > svg,
.report-period-label > svg,
.chart-note > svg,
.settings-save-row span > svg {
  width: 15px !important;
  height: 15px !important;
  flex: none;
}

.kpi-label > svg { width: 13px !important; height: 13px !important; opacity: 0.78; }
.today-badge { flex: none; white-space: nowrap; }
.sale-profit-preview svg { width: 12px !important; height: 12px !important; color: #9b6a45; flex: none; }
.report-period-label > svg { width: 13px !important; height: 13px !important; color: #8c603f; }
.card-title > svg { color: #86603f; }

/* ==========================================================================
   لمسات الفرو في الصفحة الرئيسية
   ========================================================================== */
.fur-swipe {
  position: absolute;
  pointer-events: none;
  background-image: url("../assets/gazelle-fur-clean.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.28;
  filter: saturate(0.75) contrast(0.9);
  z-index: 0;
}

.fur-swipe-top {
  top: -110px;
  left: -130px;
  width: 480px;
  height: 350px;
  border-radius: 48% 52% 62% 38%;
  transform: rotate(-14deg);
  mask-image: linear-gradient(135deg, #000 0%, rgba(0, 0, 0, 0.8) 32%, transparent 76%);
  -webkit-mask-image: linear-gradient(135deg, #000 0%, rgba(0, 0, 0, 0.8) 32%, transparent 76%);
}

.fur-swipe-side {
  right: -150px;
  bottom: 8%;
  width: 380px;
  height: 300px;
  border-radius: 55% 45% 40% 60%;
  transform: rotate(16deg);
  opacity: 0.16;
  mask-image: linear-gradient(300deg, #000, transparent 74%);
  -webkit-mask-image: linear-gradient(300deg, #000, transparent 74%);
}

.hero {
  isolation: isolate;
}

.hero-copy,
.hero-visual { position: relative; z-index: 2; }

.hero-aura-one { background: rgba(225, 206, 181, 0.45) !important; }
.hero-aura-two { background: rgba(199, 163, 126, 0.2) !important; }

.hero-wave path:first-child { fill: #efe5d7 !important; }
.hero-wave path:last-child { fill: #f8f1e7 !important; }

.eyebrow {
  color: #634127;
  background: rgba(255, 250, 242, 0.7);
  border-color: rgba(95, 58, 33, 0.1);
}

.eyebrow-spark {
  background: #f0e2d1;
  color: #6e452b;
}

.eyebrow-line { background: #d0af8c; }

.hero-title {
  color: #2f1b10;
  font-size: clamp(40px, 4.2vw, 62px);
}

.title-accent { color: #684024; }

.title-accent::after {
  background: linear-gradient(90deg, rgba(178, 128, 82, 0.32), rgba(132, 82, 48, 0.24), rgba(213, 186, 146, 0.2));
}

.title-accent::before { background: #9e6b42; box-shadow: 0 0 0 5px rgba(158, 107, 66, 0.13); }

.hero-lede { color: #726052; }

.cta-shell { background: rgba(255, 250, 242, 0.13); }
.hero-trust svg { color: #956644; }

.local-dot { background: #7a4a2c; box-shadow: 0 0 0 3px rgba(122, 74, 44, 0.12); }

/* أزرار وأسطح دافئة */
.btn-primary {
  background: #4a2b18;
  color: #fffaf1;
  box-shadow: 0 8px 20px rgba(66, 37, 20, 0.19);
}

.btn-primary:hover {
  background: #5d3720;
  box-shadow: 0 12px 26px rgba(66, 37, 20, 0.24);
}

.btn-coral {
  background: #b66f43;
  color: #2d1a0d;
  box-shadow: 0 8px 20px rgba(140, 81, 44, 0.18);
}

.btn-coral:hover { background: #5b3721; color: #fff8ee; }

.btn-soft {
  background: #f8f0e3;
  color: #5a371f;
  border-color: rgba(105, 64, 36, 0.13);
}

.btn-soft:hover { background: #f2e5d2; }

.btn-ghost { color: #5b3d2a; border-color: rgba(90, 58, 36, 0.15); }
.btn-ghost:hover { background: rgba(104, 66, 40, 0.06); border-color: rgba(90, 58, 36, 0.26); }

.btn-danger { background: #f9eae4; color: #9d4530; border-color: rgba(163, 73, 50, 0.15); }
.btn-danger:hover { background: #a34932; color: #fff8f4; }

.topbar-sale,
.header-cta {
  background: #4a2b18;
  color: #fffaf1;
}

/* ترويسة الصفحة الرئيسية */
.site-header.is-scrolled {
  background: rgba(250, 245, 237, 0.9);
  border-bottom-color: rgba(89, 55, 32, 0.09);
  box-shadow: 0 8px 30px rgba(73, 42, 23, 0.05);
}

.local-pill { background: rgba(255, 251, 245, 0.63); border-color: rgba(90, 56, 33, 0.09); color: #8c7866; }

.nav-links a::after { background: #7d4a2b; }
.nav-links a:hover { color: #5b351e; }

/* معاينة التطبيق داخل الصفحة الرئيسية */
.visual-halo {
  background: radial-gradient(closest-side, rgba(255, 250, 241, 0.96), rgba(248, 237, 222, 0.45) 52%, transparent 72%);
}

.preview-frame {
  background: linear-gradient(140deg, rgba(255, 252, 246, 0.98), rgba(238, 224, 205, 0.8));
  box-shadow:
    0 50px 100px -34px rgba(51, 29, 15, 0.38),
    0 18px 36px -20px rgba(70, 39, 20, 0.2),
    inset 0 1px 0 #fff;
}

.preview-window { background: #f7f1e7; border-color: rgba(77, 47, 28, 0.11); }

.preview-rail {
  background:
    radial-gradient(100px 140px at 20% 0%, rgba(255, 255, 255, 0.08), transparent 65%),
    linear-gradient(180deg, #5f3a23, #3d2516 52%, #2d190d);
}

.preview-logo { background: rgba(255, 249, 240, 0.09); }
.preview-logo img { width: 27px; height: 27px; }

.rail-item span { border-color: rgba(255, 249, 240, 0.38); }
.rail-item span::after { background: rgba(255, 249, 240, 0.27); }
.rail-item.active { background: rgba(255, 249, 240, 0.13); box-shadow: inset 2px 0 0 #d6b99a; }
.rail-item.active span { border-color: rgba(255, 249, 240, 0.82); }

.preview-stage {
  background:
    radial-gradient(circle at 100% 0%, rgba(230, 208, 184, 0.45), transparent 42%),
    #f7f2e9;
}

.preview-kicker { color: #988474; }
.preview-date { background: #fffaf1; border-color: rgba(89, 55, 32, 0.09); color: #8b7867; }
.preview-add { background: #5b3721; box-shadow: 0 3px 8px rgba(76, 43, 23, 0.2); }
.preview-kpi { background: #fffaf2; border-color: rgba(94, 60, 36, 0.09); }
.preview-kpi.primary {
  background: linear-gradient(145deg, #715039, #4b2d19 70%, #3f2413);
  box-shadow: 0 8px 18px -8px rgba(50, 27, 12, 0.5);
}
.pk-trend { color: #f0dcc3; background: rgba(255, 249, 238, 0.11); }
.pk-glow { background: rgba(225, 189, 150, 0.2); }
.preview-chart-card, .preview-best, .preview-recent { background: #fffaf2; border-color: rgba(94, 60, 36, 0.08); }
.mini-link { color: #83502f; }
.mini-legend i { background: #805233; }
.best-emoji, .recent-pay { background: #f7efe3; }
.best-bar i { background: linear-gradient(90deg, #c7a783, #7c4c2c); }
.best-info span, .recent-name span, .chart-days, .pk-muted, .mini-legend { color: #9b8b7d; }
.recent-avatar { background: #f2e4d4; color: #69422a; }
.recent-avatar.alt { background: #f5e5d7; color: #915333; }
.recent-amount { color: #3b2417; }
.recent-amount small { color: #9d8c7d; }
.float-card {
  background: rgba(255, 250, 242, 0.88);
  border-color: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 40px -16px rgba(53, 29, 14, 0.3), 0 1px 0 #fff inset;
}
.float-icon.profit { background: #f2e5d6; color: #70452a; }
.float-icon.order { background: #f6e4d4; color: #935531; }
.float-badge { color: #5f764c; background: #eef3e7; }
.float-order-amount { color: #8e4f2e; }
.visual-note { color: #a08f80; }
.visual-note::before { background: #b49068; }

.floating .online-dot { background: #7e4a2b; }

/* أقسام الصفحة الرئيسية */
.section-kicker { color: #9b5e38; }
.section-kicker.light { color: #ddba98; }
.soft-accent { color: #75472a; }
.section-heading h2, .start-card h2 { color: #2f1c11; }

.features-section {
  background:
    radial-gradient(900px 550px at 100% 20%, rgba(241, 229, 214, 0.55), transparent 62%),
    transparent;
}

.feature-card {
  background: rgba(255, 252, 246, 0.85);
  border-color: rgba(255, 255, 255, 0.98);
  box-shadow: 0 2px 4px rgba(65, 38, 21, 0.025), inset 0 1px 0 #fff;
}

.feature-card::after { background: radial-gradient(closest-side, rgba(232, 213, 191, 0.55), transparent); }
.feature-card:hover { background: #fffdf8; box-shadow: 0 25px 50px -28px rgba(62, 35, 19, 0.27); }
.feature-icon.teal { background: #f7efe3; color: #6d4329; border-color: rgba(109, 67, 41, 0.08); }
.feature-icon.gold { background: #f6eddd; color: #8a6332; }
.feature-icon.coral { background: #f8e9dd; color: #9b5a34; }
.feature-icon.violet { background: #f4ebe2; color: #785844; }
.feature-icon.blue { background: #f0ebe2; color: #71624f; }
.feature-card h3, .feature-content h3 { color: #2f1c11; }
.feature-card > p, .feature-content p { color: #827062; }
.feature-wide { background: radial-gradient(160% 120% at 100% 0%, rgba(255, 255, 252, 0.98), rgba(248, 239, 227, 0.86)), #fffdf8; }
.sale-visual::before { background: radial-gradient(closest-side, rgba(234, 217, 197, 0.65), transparent 72%); }
.sale-visual::after { background-image: radial-gradient(rgba(79, 47, 28, 0.16) 0.7px, transparent 0.7px); }
.mini-receipt { background: #fffdf8; border-color: rgba(76, 44, 24, 0.09); box-shadow: 0 22px 45px -20px rgba(53, 29, 14, 0.36); }
.receipt-head span { color: #3f2717; }
.receipt-head i { color: #9f8d7d; }
.receipt-line { color: #796655; }
.receipt-line b { color: #3f2818; }
.receipt-total b { color: #56341f; }
.receipt-ok { background: #eef3e7; color: #5f764c; }
.feature-metric { background: #fbf6ee; border-color: rgba(85, 51, 29, 0.06); }
.feature-metric strong { color: #57331e; }
.stock-line b { background: linear-gradient(90deg, #d3b492, #7c4a2b); }
.stock-line.low b { background: linear-gradient(90deg, #d6a77f, #b36f45); }
.feature-tags span { background: #f8f2e8; color: #7a6655; border-color: rgba(91, 56, 32, 0.07); }
.order-steps span { background: #f7f2e9; color: #9d8b7b; }
.order-steps span.done { background: #f8f0e4; color: #6c4328; }
.order-steps span.active { background: #f7e7da; color: #94542f; }

.how-shell {
  background:
    radial-gradient(760px 500px at 100% 0%, rgba(145, 97, 58, 0.46), transparent 58%),
    radial-gradient(700px 500px at 0% 100%, rgba(222, 179, 139, 0.17), transparent 62%),
    linear-gradient(145deg, #5a351f 0%, #3b2415 55%, #2d190e 100%);
  box-shadow: 0 45px 80px -45px rgba(45, 25, 12, 0.52);
}

.how-shell::after {
  background-image: url("../assets/gazelle-fur-clean.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.18;
  filter: saturate(0.8);
  width: 460px;
  height: 300px;
  bottom: -150px;
  right: -40px;
  border-radius: 50%;
  mask-image: linear-gradient(120deg, #000, transparent 70%);
  -webkit-mask-image: linear-gradient(120deg, #000, transparent 70%);
  filter: blur(1px) saturate(0.8);
}

.how-intro h2 { color: #fffaf2; }
.how-intro p { color: rgba(247, 235, 221, 0.66); }
.step-item { background: rgba(255, 250, 242, 0.055); border-color: rgba(255, 250, 242, 0.085); }
.step-item:hover { background: rgba(255, 250, 242, 0.085); border-color: rgba(255, 250, 242, 0.13); }
.step-icon { background: rgba(255, 250, 242, 0.08); border-color: rgba(255, 250, 242, 0.09); color: #e1bf9a; }
.step-item h3 { color: rgba(255, 250, 243, 0.95); }
.step-item p { color: rgba(239, 226, 212, 0.54); }

.start-section { padding-top: 0; }
.start-card {
  background:
    radial-gradient(650px 400px at 50% -10%, rgba(255, 255, 252, 0.98), transparent 62%),
    radial-gradient(600px 360px at 92% 100%, rgba(238, 225, 208, 0.8), transparent 55%),
    radial-gradient(540px 340px at 6% 100%, rgba(247, 233, 217, 0.72), transparent 55%),
    #faf4ea;
  border-color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 30px 70px -45px rgba(54, 30, 15, 0.25);
  padding-top: 96px;
}

.start-card::before,
.start-card::after { border-color: rgba(80, 47, 26, 0.08); }

.start-fur {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  opacity: 0.92;
  mask-image: linear-gradient(to bottom, #000 0 72%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 72%, transparent 100%);
}

.start-ornament {
  width: 128px;
  height: 110px;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  margin-bottom: 4px;
}

.start-ornament img {
  width: auto;
  height: 102px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(69, 39, 20, 0.09));
}

.start-card h2 span { color: #714327; }
.start-card > p { color: #7c695a; }
.start-note { color: #9d8a79; }
.start-note svg { color: #966746; }

.site-footer { border-top-color: rgba(74, 43, 25, 0.08); background: rgba(248, 242, 233, 0.65); }
.footer-brand img { width: auto; height: 50px; object-fit: contain; }
.footer-brand .brand-name { display: none; }
.footer-brand span:not(.brand-name) { font-size: 9px; color: #9a8775; }
.footer-links a:hover { color: #6f4328; }
.footer-copy { color: #9f8d7c; }

/* ==========================================================================
   التطبيق — خلفية كريم وفرو
   ========================================================================== */
body.app-body {
  background:
    radial-gradient(900px 600px at 86% -10%, rgba(239, 225, 208, 0.7), transparent 62%),
    radial-gradient(760px 520px at 0% 100%, rgba(245, 228, 208, 0.48), transparent 60%),
    #f6f0e6;
}

.app-backdrop::after {
  content: "";
  position: absolute;
  top: -80px;
  right: -140px;
  width: 440px;
  height: 300px;
  background-image: url("../assets/gazelle-fur-clean.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.08;
  border-radius: 50%;
  transform: rotate(12deg);
  mask-image: linear-gradient(120deg, #000, transparent 72%);
  -webkit-mask-image: linear-gradient(120deg, #000, transparent 72%);
  filter: saturate(0.7);
}

.glow-a { background: #ecdcc6; }
.glow-b { background: #d8b995; opacity: 0.23; }

.app-loading {
  background:
    radial-gradient(780px 520px at 50% 17%, rgba(255, 253, 248, 0.9), transparent 68%),
    #f8f2e8;
}

.app-fatal { background: #f8f2e8; }
.fatal-card { background: #fffdf8; border-color: rgba(83, 49, 28, 0.11); box-shadow: 0 30px 80px rgba(60, 34, 17, 0.08); }

/* الشريط الجانبي — كريم مع شريط فرو */
.sidebar {
  background:
    radial-gradient(680px 460px at 105% -10%, rgba(255, 253, 247, 0.9), transparent 64%),
    radial-gradient(540px 460px at -15% 105%, rgba(234, 215, 190, 0.5), transparent 60%),
    linear-gradient(178deg, #fbf6ed 0%, #f5ebde 54%, #efe3d3 100%) !important;
  color: var(--ink) !important;
  border-left: 1px solid rgba(88, 54, 31, 0.1);
  box-shadow: -12px 0 46px rgba(72, 42, 23, 0.035);
}

.sidebar::before {
  border-color: rgba(116, 75, 44, 0.09) !important;
  box-shadow: 0 0 0 48px rgba(102, 64, 38, 0.025), 0 0 0 96px rgba(102, 64, 38, 0.016) !important;
}

.sidebar::after {
  background-image: url("../assets/gazelle-fur-clean.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
  opacity: 0.045 !important;
  filter: saturate(0.7) !important;
  width: 260px !important;
  height: 180px !important;
  left: -30px !important;
  bottom: 34px !important;
  border-radius: 50% !important;
  mask-image: linear-gradient(135deg, #000, transparent 74%);
  -webkit-mask-image: linear-gradient(135deg, #000, transparent 74%);
}

.sidebar-store {
  background: rgba(255, 252, 246, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 4px 14px rgba(75, 43, 24, 0.035);
}

.store-avatar {
  background: linear-gradient(145deg, #6c4329, #442817) !important;
  color: #fff8ed !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

.store-meta strong { color: #4a2f1d !important; }
.store-meta span { color: #94806f !important; }
.status-dot { background: #6f875e !important; box-shadow: 0 0 0 2px rgba(111, 135, 94, 0.13) !important; }

.nav-label { color: #a08d7b !important; font-size: 9px !important; letter-spacing: 0.2px; }

.nav-item { color: #6f5948 !important; }
.nav-item:hover { background: rgba(255, 252, 246, 0.64) !important; color: #3e2717 !important; }
.nav-icon { color: #866b55 !important; }
.nav-item.active {
  background: linear-gradient(135deg, #5d3822, #422817) !important;
  color: #fff9f0 !important;
  box-shadow: 0 9px 20px -9px rgba(64, 34, 16, 0.46) !important;
}
.nav-item.active .nav-icon { background: rgba(255, 250, 243, 0.13) !important; color: #fff7eb !important; box-shadow: none !important; }
.nav-count { background: #f2e6d5 !important; color: #7d5b42 !important; }
.nav-item.active .nav-count { background: rgba(255, 250, 243, 0.16) !important; color: #fff8ed !important; }
.nav-alert { background: #a65533 !important; }

.sidebar-help {
  background: rgba(255, 252, 247, 0.56) !important;
  border-color: rgba(255, 255, 255, 0.82) !important;
}
.help-icon { background: #f1e3d2 !important; color: #8a5634 !important; }
.sidebar-help strong { color: #5a3b26 !important; }
.sidebar-help span:not(.help-icon) { color: #9a8776 !important; }
.help-open { color: #967d68 !important; }
.help-open:hover { background: #f2e5d4 !important; color: #5a3821 !important; }
.sidebar-bottom {
  border-top-color: rgba(92, 57, 33, 0.1) !important;
}
.local-note { color: #9a8877 !important; }
.local-note svg { color: #8a5c3c !important; }
.back-home { color: #987f69 !important; border-bottom-color: rgba(106, 70, 44, 0.24) !important; }
.back-home:hover { color: #573621 !important; }
.sidebar-bottom-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}
.sidebar-logout {
  border-bottom: 0 !important;
  color: #9d6245 !important;
}
.sidebar-logout::before {
  content: "";
  width: 1px;
  height: 8px;
  display: inline-block;
  margin-inline-end: 8px;
  background: rgba(105, 69, 44, 0.18);
  vertical-align: middle;
}

.mobile-brand span { color: #3a2416 !important; }

/* الترويسة والمحتوى */
.topbar {
  background: rgba(248, 243, 235, 0.84) !important;
  border-bottom-color: rgba(87, 52, 29, 0.08) !important;
}
.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background-image: url("../assets/gazelle-fur-clean.jpg");
  background-size: 220px auto;
  background-position: center 45%;
  opacity: 0.48;
  pointer-events: none;
}
.page-eyebrow { color: #958170 !important; }
.page-heading h1 { color: #2f1c10 !important; }
.topbar-date { background: rgba(255, 252, 246, 0.56) !important; border-color: rgba(89, 55, 32, 0.09) !important; color: #94806f !important; }
.topbar-date b { color: #5b3d28 !important; }
.notif-btn { background: rgba(255, 252, 246, 0.66) !important; border-color: rgba(88, 53, 30, 0.1) !important; color: #5c3d28 !important; }

.demo-banner {
  background: rgba(249, 240, 225, 0.88) !important;
  border-color: rgba(152, 104, 61, 0.2) !important;
  color: #735035 !important;
}
.demo-pill { color: #80562f !important; background: rgba(187, 144, 92, 0.17) !important; border-color: rgba(152, 104, 61, 0.16) !important; }

.view { color: #3b271a; }
.app-footer { color: #a59484 !important; }

/* بطاقة الترحيب الأولى — كريم وفرو */
.onboarding-card {
  background:
    radial-gradient(720px 320px at 100% 0%, rgba(255, 252, 246, 0.9), transparent 62%),
    radial-gradient(480px 300px at 0% 120%, rgba(238, 221, 201, 0.7), transparent 62%),
    #fbf4e8 !important;
  color: #3b2617 !important;
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 18px 45px -36px rgba(61, 34, 17, 0.34);
  padding-top: 30px;
  overflow: hidden;
}

.onboarding-card::before {
  border-color: rgba(92, 58, 34, 0.09) !important;
  box-shadow: 0 0 0 40px rgba(101, 64, 39, 0.025) !important;
}

.onboarding-fur {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 16px;
  opacity: 0.94;
  mask-image: linear-gradient(to bottom, #000 0 68%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 68%, transparent 100%);
}

.onboarding-copy { position: relative; z-index: 2; }
.onboarding-kicker { color: #9a5e38 !important; }
.onboarding-copy h3 { color: #3a2415 !important; }
.onboarding-copy h3 span { color: #704224 !important; }
.onboarding-copy p { color: #7d6a59 !important; }
.onboarding-step { color: #a38f7c !important; }
.onboarding-step i { color: #947a63 !important; border-color: rgba(98, 61, 36, 0.19) !important; }
.onboarding-step-line { background: rgba(92, 57, 33, 0.14) !important; }
.onboarding-actions .btn-primary { background: #4a2b18 !important; color: #fff9ef !important; }
.onboarding-actions .btn-primary:hover { background: #5d3720 !important; }
.onboarding-actions .btn-ghost { color: #79573e !important; border-color: rgba(100, 63, 38, 0.2) !important; background: rgba(255, 252, 247, 0.5) !important; }
.onboarding-actions .btn-ghost:hover { background: #fffaf1 !important; color: #4e2f1b !important; }

/* المؤشرات والبطاقات */
.kpi-card {
  background: rgba(255, 252, 246, 0.86) !important;
  border-color: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 2px 4px rgba(64, 36, 19, 0.018), inset 0 1px 0 #fff !important;
}

.kpi-card.primary {
  background:
    radial-gradient(150px 115px at 12% 0%, rgba(255, 249, 240, 0.14), transparent 72%),
    linear-gradient(140deg, #694127 0%, #4c2e1a 66%, #3e2514 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 16px 32px -18px rgba(45, 24, 11, 0.44) !important;
}

.kpi-card.primary::before { border-color: rgba(255, 249, 238, 0.07); box-shadow: 0 0 0 26px rgba(255, 249, 238, 0.018); }
.kpi-card.primary .kpi-value { color: #fffaf2; }
.kpi-card.primary .kpi-value small { color: rgba(255, 250, 242, 0.54); }
.kpi-card.primary .kpi-label { color: rgba(255, 248, 238, 0.68); }
.kpi-card.primary .kpi-foot { color: rgba(245, 234, 220, 0.52); }
.kpi-card.primary .trend.up { background: rgba(219, 235, 201, 0.15); color: #dce9cd; }
.kpi-card.primary .trend.down { background: rgba(239, 178, 152, 0.14); color: #f1c0a8; }
.kpi-card.primary .trend.flat { background: rgba(255, 249, 241, 0.08); color: rgba(255, 250, 242, 0.55); }
.kpi-icon { background: #f8f0e5; color: #755037; }
.kpi-label { color: #8c7867; }
.kpi-value { color: #332014; }
.kpi-foot { color: #9b8877; }

.card,
.stat-tile,
.toolbar-card,
.order-card,
.report-kpi:not(.net),
.product-card {
  background: rgba(255, 252, 246, 0.86) !important;
  border-color: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 2px 4px rgba(64, 36, 19, 0.016), inset 0 1px 0 #fff !important;
}

.card-title { color: #352115 !important; }
.card-subtitle { color: #978473 !important; }
.card-dot { background: #9b6a45; }

.segmented { background: #f4eadd !important; border-color: rgba(88, 54, 31, 0.06) !important; }
.segmented button.active { color: #4f311d !important; box-shadow: 0 2px 6px rgba(66, 39, 22, 0.1) !important; }

.chart-axis-label, .sales-svg text, .report-chart-svg text { fill: #9b8877 !important; }
.chart-legend { color: #8e7a69 !important; }
.chart-legend i { background: #734a2d !important; }
.chart-legend i.profit-line { background: #bd7a49 !important; }
.chart-total strong { color: #3d2817; }
.chart-no-data { color: #9d8b7b; }

.best-rank { color: #b3a18f; }
.best-name { color: #443024; }
.best-meta { color: #998574; }
.best-qty { color: #74482c; }
.best-bar-wrap { background: #f2e9de; }
.best-item:first-child .best-bar-wrap span { background: linear-gradient(90deg, #d8be9b, #91613f); }

.data-table th { color: #a08e7e !important; border-bottom-color: #f0e7dc !important; }
.data-table td { border-bottom-color: #f5eee4 !important; }
.data-table tbody tr:hover { background: #fffcfa !important; }
.cell-strong { color: #3b281a !important; }
.cell-muted { color: #9d8a79 !important; }
.invoice-no { color: #70492e !important; background: #faf1e4 !important; border-color: rgba(118, 77, 47, 0.1) !important; }
.cell-money { color: #50331f !important; }
.payment-chip { color: #927e6d !important; }
.avatar-xs { background: #f8f0e4 !important; color: #6f4a31 !important; }
.avatar-xs.alt { background: #f8ebe0 !important; color: #955937 !important; }

.side-empty { color: #9c8876; }
.side-empty svg { color: #b18e6d; }
.side-empty.ok svg { color: #70865d; }
.mini-row { border-bottom-color: #f5eee4; }
.mini-info strong { color: #3d2a1d; }
.mini-info span { color: #9b8876; }
.mini-avatar { background: #f9f2e7; border-color: rgba(80, 48, 27, 0.04); }
.mini-avatar.letter { background: #f9f1e5; color: #754d33; }
.mini-action { color: #a79483; }
.mini-action:hover { background: #faf2e7; color: #6e452b; }
.stock-badge.ok { background: #eef3e7; color: #5f764c; }
.stock-badge.low { background: #f8efdf; color: #966728; }
.stock-badge.out { background: #f9eae4; color: #a34932; }
.stock-badge.archived { background: #f3eee7; color: #8c7d70; }

/* صفحات المبيعات والمنتجات والطلبات */
.search-box input,
.toolbar-select,
.settings-form .input,
.settings-form .select,
.settings-form .textarea,
.modal-form .input,
.modal-form .select,
.modal-form .textarea,
.sale-fields .input,
.sale-fields .select {
  background: #fffcf7 !important;
  border-color: rgba(90, 56, 33, 0.14) !important;
  color: #3c2819 !important;
}

.search-box input:focus,
.toolbar-select:focus,
.input:focus,
.select:focus,
.textarea:focus {
  border-color: #94613d !important;
  box-shadow: 0 0 0 3px rgba(132, 83, 49, 0.11) !important;
}

.toolbar-card { box-shadow: 0 2px 4px rgba(64, 36, 19, 0.016), inset 0 1px 0 #fff !important; }
.stat-tile-info span { color: #978472; }
.stat-tile-info strong { color: #3a2618; }
.stat-tile-icon { background: #f8f0e4; color: #70482e; }
.stat-tile-icon.coral { background: #f7e8dc; color: #985834; }
.stat-tile-icon.gold { background: #f6eddd; color: #896331; }
.stat-tile-icon.info { background: #f1ece3; color: #74644f; }

.order-tabs { background: rgba(255, 252, 246, 0.72) !important; border-color: rgba(255, 255, 255, 0.95) !important; }
.order-tab { color: #8f7b69; }
.order-tab:hover { color: #4c2f1d; background: rgba(255, 252, 247, 0.72); }
.order-tab.active { background: #4a2b18 !important; color: #fff9ef !important; box-shadow: 0 3px 8px rgba(65, 36, 19, 0.22) !important; }
.order-tab .tab-count { background: rgba(84, 50, 29, 0.07); color: #7d5c43; }
.order-tab.active .tab-count { background: rgba(255, 250, 243, 0.16); color: #fff8ed; }

.product-emoji { background: linear-gradient(145deg, #fdf8f0, #f4e9da); border-color: rgba(86, 52, 29, 0.06); }
.product-name { color: #392519; }
.product-meta { color: #9a8776; }
.product-pricing { background: #fbf6ee; border-color: rgba(84, 50, 29, 0.055); }
.price-block strong { color: #57351f; }
.price-block.cost strong { color: #8f7b69; }
.margin-chip { background: #eef3e7; color: #5f764c; }
.stock-inline strong { color: #3c281a; }
.stock-inline { color: #937f6e; }
.stock-meter { background: #f2eae0; }
.product-foot span { color: #a18e7d; }
.hint-row { background: #fbf4e9; border-color: rgba(152, 104, 61, 0.13); color: #866946; }

.order-avatar { background: #f8f0e4; color: #704a30; border-color: rgba(100, 63, 38, 0.06); }
.order-avatar.coral { background: #f8e9dd; color: #985834; }
.order-avatar.gold { background: #f6eddd; color: #896331; }
.order-customer-info strong { color: #3a2618; }
.order-customer-info span { color: #9b8876; }
.order-customer-info .order-no { color: #8a5c3b; }
.order-total-cell strong { color: #53331f; }
.order-date-cell strong { color: #5a3d28; }
.order-status-badge { font-weight: 500; }

.status-new { background: #eef1e5; color: #64704d; }
.status-processing { background: #f8efdf; color: #966728; }
.status-ready { background: #f4ebe2; color: #785844; }
.status-completed { background: #eef3e7; color: #5f764c; }
.status-cancelled { background: #f2eee8; color: #897c70; }

/* التقارير */
.month-nav { background: rgba(255, 252, 246, 0.78) !important; border-color: rgba(86, 52, 29, 0.13) !important; }
.month-nav button { color: #927d6b; }
.month-nav button:hover { background: #f8f0e4 !important; color: #6d4329 !important; }
.month-nav input { color: #4d3322; }
.report-period-label { color: #998574; }
.report-period-label strong { color: #644630; }
.report-kpi.net {
  background: linear-gradient(135deg, #5d3822, #3f2514) !important;
  box-shadow: 0 13px 30px -22px rgba(53, 28, 12, 0.45);
}
.report-kpi.net.loss { background: linear-gradient(135deg, #8f4531, #603022) !important; }
.report-kpi-top span { color: #8c7867; }
.report-kpi strong { color: #322014; }
.report-kpi .note { color: #a08d7c; }
.pnl-row { border-bottom-color: #f4ece2; }
.pnl-row span { color: #8f7b69; }
.pnl-row strong { color: #432d1e; }
.pnl-row.total { background: #faf2e6 !important; }
.pnl-row.total span, .pnl-row.total strong { color: #5c3a22; }
.pnl-formula { background: #fbf4e9; color: #866a47; }
.expense-icon { background: #f8e8db; color: #975632; }
.expense-info span { color: #9f8c7b; }
.expense-amount { color: #8f4f2e; }
.rank-chip { background: #f5eee4; color: #8f7c6a; }
.rank-chip.first { background: #f4ead7; color: #85612e; }
.rank-chip.second { background: #f3ede5; color: #7d6a58; }
.rank-chip.third { background: #f8e9dc; color: #975734; }

/* الإعدادات */
.settings-action-icon { background: #fbf4e9; color: #70482e; }
.settings-action-row { border-bottom-color: #f4ede3; }
.settings-action-info strong { color: #3d281a; }
.settings-save-row { border-top-color: #f2eae0; }
.about-card {
  background:
    radial-gradient(320px 230px at 100% 0%, rgba(145, 97, 58, 0.55), transparent 66%),
    linear-gradient(135deg, #5f3a23, #3e2514) !important;
}
.about-brand strong { display: none; }
.about-brand img { width: auto; height: 58px; object-fit: contain; }
.about-brand span { color: rgba(255, 248, 238, 0.52) !important; }
.about-card p { color: rgba(255, 246, 235, 0.58); }
.about-meta { border-top-color: rgba(255, 249, 240, 0.1); color: rgba(255, 248, 238, 0.4); }
.danger-card { background: rgba(255, 251, 246, 0.9) !important; border-color: rgba(163, 73, 50, 0.14) !important; }
.settings-help-text { font-size: 10px; color: #907d6b; line-height: 1.9; margin-bottom: 12px; }

/* النوافذ */
.modal {
  background: #fbf6ee !important;
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 40px 100px -25px rgba(43, 23, 11, 0.58);
}
.modal-head { background: rgba(255, 252, 246, 0.62) !important; border-bottom-color: rgba(86, 52, 29, 0.08) !important; }
.modal-title { color: #382316; }
.modal-subtitle { color: #978473; }
.modal-eyebrow { color: #9d5f38; }
.modal-close { color: #987f6c; background: rgba(88, 53, 30, 0.045); border-color: rgba(88, 53, 30, 0.06); }
.modal-close:hover { background: #f9eae4; color: #a34932; }
.modal-foot { background: rgba(255, 252, 246, 0.5) !important; border-top-color: rgba(86, 52, 29, 0.08) !important; }
.modal-body { background: transparent; }
.sale-catalog { background: #f7efe3 !important; border-left-color: rgba(86, 52, 29, 0.08) !important; }
.sale-cart { background: rgba(255, 252, 246, 0.65) !important; }
.sale-product { background: #fffdf8 !important; border-color: rgba(86, 52, 29, 0.075) !important; }
.sale-product:hover:not(:disabled) { border-color: rgba(130, 82, 48, 0.32) !important; box-shadow: 0 5px 13px -8px rgba(58, 32, 16, 0.24) !important; }
.sale-product-emoji, .sale-line-emoji { background: #faf2e7 !important; }
.sale-product-info strong { color: #3d2819; }
.sale-product-info span { color: #9b8876; }
.sale-product-price { color: #644027; }
.sale-product-add { background: #f8f0e4; color: #70482e; }
.sale-product:disabled .sale-product-add { background: #f9eae4; color: #a34932; }
.sale-line { background: #fffdf8 !important; border-color: #f3ebe1 !important; }
.sale-line-info strong { color: #3f2a1b; }
.sale-line-price-input { background: #fbf6ee !important; border-color: #f0e5d8 !important; color: #5b3b25; }
.qty-stepper { background: #f8f2e9 !important; border-color: #f1e7db !important; }
.qty-stepper button { color: #917b68; }
.qty-stepper button:hover { color: #6d4329; background: #f8efe3 !important; }
.line-total { color: #5e3c24 !important; }
.sale-discount-row { background: #faf4ea !important; }
.sale-totals { background: #faf4e9 !important; border-color: rgba(88, 54, 31, 0.06) !important; }
.sale-total-row { color: #917d6b; }
.sale-total-row strong { color: #553823; }
.sale-total-row.grand strong { color: #4b2f1c; }
.sale-profit-preview strong { color: #5f764c; }
.sale-lines-empty { border-color: #e3d6c6; background: rgba(253, 249, 242, 0.7); color: #a08d7c; }
.sale-lines-empty svg { color: #c0a78e; }
.order-builder .sale-totals { background: #f6efe4 !important; }
.sale-form-error { background: #f9eae4; color: #a34932; }
.modal-form .field > label { color: #6c5140; }
.modal-form .input, .modal-form .select, .modal-form .textarea { background: #fffdf8 !important; }
.emoji-picker { background: #fffdf8 !important; border-color: rgba(86, 52, 29, 0.13) !important; }
.emoji-choice.active { background: #f9f1e5 !important; border-color: #c9a986 !important; }
.product-preview-card { background: #fbf5eb !important; border-color: #f1e6d8 !important; }
.preview-margin { background: #eef3e7; color: #5f764c; }

.invoice-modal .modal-body { background: #f6efe4 !important; }
.invoice-sheet { background: #fffdf8 !important; border-color: rgba(86, 52, 29, 0.07); }
.invoice-top { border-bottom-color: #f0e8dd; }
.invoice-brand { align-items: center; gap: 10px; }
.invoice-logo { width: auto; height: 62px; object-fit: contain; }
.invoice-brand strong { color: #3a2416 !important; font-family: var(--font); font-size: 12px; }
.invoice-brand span { color: #998574 !important; }
.invoice-meta .inv-no { color: #6b4228; }
.invoice-meta .paid-badge { background: #eef3e7; color: #5f764c; }
.invoice-items th { background: #faf4ea !important; color: #8d7867; border-bottom-color: #f1e8dc; }
.invoice-items td { color: #523a29; border-bottom-color: #f5eee5; }
.invoice-items tbody tr:last-child td { border-bottom-color: #f1e8dc; }
.invoice-bottom .invoice-note span { color: #a08b79; }
.invoice-bottom .invoice-note p { color: #7a6756; }
.invoice-total-row { color: #927d6b; }
.invoice-total-row strong { color: #47301f; }
.invoice-total-row.grand { border-top-color: #eee6db; }
.invoice-total-row.grand strong { color: #5b3a22; }
.invoice-foot { border-top-color: #eee6db; }
.invoice-foot p { color: #a08d7c; }
.invoice-heart { color: #795038; }

.order-status-timeline { background: #faf4ea !important; }
.timeline-step { color: #ad9b8b; }
.timeline-step.active { color: #644027; }
.timeline-step.active i { background: #5b3721 !important; border-color: #5b3721 !important; }
.timeline-step.done { color: #8a5e40; }
.timeline-step.done i { background: #faf2e6 !important; border-color: #d6b99a !important; color: #7b4e31; }
.timeline-line { background: #ece1d5; }
.order-detail-items { border-color: #f1e8dc; }
.order-detail-item { border-bottom-color: #f7f0e7; }
.order-detail-item .emoji { background: #faf3e9; }
.order-detail-item .name span, .order-detail-item .qty { color: #9a8776; }
.order-detail-summary { background: #faf2e6 !important; }
.order-detail-summary span { color: #644027; }
.order-detail-summary strong { color: #51331f; }
.order-detail-note { background: #fbf5ec; color: #7d6b5b; }
.order-detail-actions { border-top-color: #f1e8de; }
.confirm-highlight { background: #fbf5eb; border-color: #f2e7da; color: #6a4d37; }
.confirm-content h3 { color: #382316; }
.confirm-content p { color: #8e7b69; }
.help-step { background: #fcf7f0 !important; border-color: #f2e9de !important; }
.help-step-num { background: #5a3720 !important; }
.help-step p { color: #8e7b69; }
.help-tip { background: #faf2e6 !important; color: #6d4a31; }

.toast { background: #fffdf8; border-color: rgba(86, 52, 29, 0.11); box-shadow: 0 18px 50px -20px rgba(46, 25, 12, 0.4); }
.toast-content strong { color: #3c2718; }
.toast-content span { color: #917d6c; }
.notif-panel { background: #fffdf8; border-color: rgba(86, 52, 29, 0.11); box-shadow: 0 24px 60px -20px rgba(49, 27, 13, 0.26); }
.notif-head { border-bottom-color: #f2ebe1; }
.notif-item { border-bottom-color: #f7f1e9; }
.notif-item:hover { background: #fcf8f1; }
.notif-item strong { color: #3d2819; }
.notif-footer { background: #fbf6ee; border-top-color: #f2ebe1; color: #6f452b; }
.notif-head strong { color: #3e291a; }

.mobile-nav { background: rgba(255, 252, 247, 0.96) !important; border-top-color: rgba(87, 52, 29, 0.1) !important; box-shadow: 0 -10px 30px rgba(62, 35, 18, 0.05) !important; }
.mobile-nav-item { color: #9b8775; }
.mobile-nav-item.active { color: #56341f; background: #f8f0e4; }

.demo-banner .btn { color: #65452e; border-color: rgba(105, 65, 38, 0.15); }

/* ==========================================================================
   تحسين أحجام الخط داخل التطبيق — للقراءة على الشاشات الكبيرة
   ========================================================================== */
.app-body { font-size: 15px; }

.sidebar-tagline { font-size: 10.5px !important; }
.sidebar-version { font-size: 8px !important; }
.nav-label { font-size: 9.5px !important; }
.nav-item { font-size: 14px !important; min-height: 46px; }
.nav-icon svg { width: 18px; height: 18px; }
.store-meta strong { font-size: 13px !important; }
.store-meta span { font-size: 8.5px !important; }
.sidebar-help strong { font-size: 11px !important; }
.sidebar-help span:not(.help-icon) { font-size: 8px !important; }
.local-note, .back-home { font-size: 8.5px !important; }

.page-eyebrow { font-size: 11px !important; }
.page-heading h1 { font-size: 25px !important; }
.topbar-date { font-size: 11.5px !important; }
.topbar-sale { font-size: 13px !important; min-height: 43px; }
.notif-btn { width: 43px; height: 43px; }

.welcome-copy h2 { font-size: 28px !important; }
.welcome-copy p { font-size: 12.5px !important; }
.today-badge { font-size: 10px !important; }
.quick-link { font-size: 11px !important; min-height: 38px; }
.quick-link svg { width: 15px; height: 15px; }

.onboarding-copy h3 { font-size: 22px !important; }
.onboarding-copy h3 span { font-size: 26px !important; }
.onboarding-copy p { font-size: 11.5px !important; max-width: 620px; }
.onboarding-kicker { font-size: 9.5px !important; }
.onboarding-step { font-size: 9px !important; }
.onboarding-actions .btn { font-size: 11px !important; min-height: 38px; }

.kpi-card { min-height: 146px; }
.kpi-label { font-size: 11px !important; }
.kpi-icon { width: 32px; height: 32px; }
.kpi-icon svg { width: 16px; height: 16px; }
.kpi-value { font-size: 29px !important; }
.kpi-value small { font-size: 10px !important; }
.kpi-foot { font-size: 9.5px !important; margin-top: 10px; }
.trend { font-size: 9px !important; }
.trend svg { width: 10px; height: 10px; }

.card-title { font-size: 15px !important; }
.card-subtitle { font-size: 10px !important; }
.link-btn { font-size: 10px !important; }
.segmented button { font-size: 9.5px !important; padding: 4px 9px; }
.best-name { font-size: 11.5px !important; }
.best-meta { font-size: 9px !important; }
.best-qty { font-size: 10.5px !important; }
.best-qty small { font-size: 7.5px; }
.best-rank { font-size: 9px; }
.best-avatar { width: 38px; height: 38px; font-size: 18px; }
.chart-legend { font-size: 9px !important; }
.chart-total { font-size: 10px !important; }
.chart-total strong { font-size: 14px !important; }
.chart-total small { font-size: 8px !important; }
.chart-footer { padding-top: 7px; }

.data-table { font-size: 11px !important; }
.data-table th { font-size: 9px !important; padding: 9px 11px; }
.data-table td { padding: 11px 11px; }
.cell-strong { font-size: 11px !important; }
.cell-muted { font-size: 9px !important; }
.invoice-no { font-size: 9.5px !important; padding: 3px 6px; }
.customer-cell .avatar-xs { width: 28px; height: 28px; font-size: 9px; }
.payment-chip { font-size: 9px !important; }
.payment-chip svg { width: 12px; height: 12px; }
.item-stack-emoji { width: 23px; height: 23px; font-size: 11px; }
.best-list .money-cur { font-size: 7px !important; }

.side-card .card-title { font-size: 13.5px !important; }
.mini-info strong { font-size: 10.5px !important; }
.mini-info span { font-size: 8.5px !important; }
.mini-avatar { width: 34px; height: 34px; font-size: 16px; }
.order-mini-status { font-size: 8px !important; padding: 3px 6px; }
.side-empty { font-size: 9.5px !important; }

.page-head-copy h2 { font-size: 21px !important; }
.page-head-copy p { font-size: 11.5px !important; }
.eyebrow-small { font-size: 9.5px !important; }
.stat-tile { padding: 14px 15px; }
.stat-tile-icon { width: 36px; height: 36px; }
.stat-tile-icon svg { width: 17px; height: 17px; }
.stat-tile-info span { font-size: 9px !important; }
.stat-tile-info strong { font-size: 18px !important; }
.stat-tile-info strong small, .stat-tile-info strong .unit { font-size: 8px !important; }
.toolbar-card { padding: 12px 14px; }
.search-box input { min-height: 38px; font-size: 10.5px !important; }
.toolbar-select { min-height: 38px; font-size: 10px !important; }
.result-count { font-size: 9px !important; }

.product-name { font-size: 13px !important; }
.product-meta { font-size: 8.5px !important; }
.product-emoji { width: 47px; height: 47px; font-size: 23px; }
.price-block span { font-size: 8px !important; }
.price-block strong { font-size: 15px !important; }
.price-block.cost strong { font-size: 11px !important; }
.margin-chip { font-size: 8px !important; }
.stock-inline { font-size: 9px !important; }
.stock-inline strong { font-size: 13px !important; }
.stock-inline small, .stock-inline .threshold { font-size: 8px !important; }
.stock-badge { font-size: 8px !important; padding: 3px 6px; }
.product-foot span { font-size: 8px !important; }
.product-foot .btn { font-size: 8.5px !important; min-height: 27px; }
.product-card { padding: 17px; }

.data-table.sales-table { min-width: 860px; }
.sales-table td { padding: 12px; }
.order-card { padding: 15px 17px; }
.order-customer-info strong { font-size: 11.5px !important; }
.order-customer-info span { font-size: 8.5px !important; }
.order-avatar { width: 39px; height: 39px; font-size: 13px; }
.order-items-summary { font-size: 9px !important; }
.order-items-names { font-size: 8.5px !important; }
.order-total-cell span { font-size: 8px !important; }
.order-total-cell strong { font-size: 13px !important; }
.order-date-cell span { font-size: 8px !important; }
.order-date-cell strong { font-size: 9px !important; }
.order-primary-action { font-size: 8.5px !important; min-height: 30px; }
.order-status-badge { font-size: 8.5px !important; }
.order-tab { font-size: 9.5px !important; padding: 6px 11px; }

.report-kpi-top span { font-size: 9px !important; }
.report-kpi strong { font-size: 21px !important; }
.report-kpi .note { font-size: 8px !important; }
.report-kpis { gap: 10px; }
.pnl-row { font-size: 10px !important; padding: 9px 0; }
.pnl-row strong { font-size: 10px !important; }
.pnl-row.total strong { font-size: 16px !important; }
.pnl-formula { font-size: 8.5px !important; }
.daily-table td { font-size: 10px !important; }
.expense-info strong { font-size: 10px !important; }
.expense-info span { font-size: 8.5px !important; }
.expense-amount { font-size: 10.5px !important; }
.report-period-label { font-size: 9.5px !important; }
.month-nav input { font-size: 10.5px !important; }
.report-actions .btn { font-size: 9.5px !important; min-height: 34px; }

.settings-form .field > label { font-size: 10.5px !important; }
.settings-form .input, .settings-form .select, .settings-form .textarea { font-size: 12px !important; min-height: 41px; }
.settings-action-info strong { font-size: 10px !important; }
.settings-action-info span { font-size: 8.5px !important; }
.settings-action-row .btn { font-size: 9px !important; min-height: 30px; }
.settings-save-row span { font-size: 8.5px !important; }
.about-card p { font-size: 9.5px !important; }
.about-meta { font-size: 8px !important; }
.danger-card p { font-size: 9.5px !important; }
.settings-help-text { font-size: 10.5px !important; }

.modal-head { padding: 20px 22px 15px; }
.modal-title { font-size: 18px !important; }
.modal-subtitle { font-size: 9.5px !important; }
.modal-eyebrow { font-size: 9px !important; }
.modal-body { padding: 19px 22px; }
.modal-close { width: 32px; height: 32px; }
.modal-close svg { width: 15px; height: 15px; }
.modal-form .field > label, .sale-fields .field > label { font-size: 9.5px !important; }
.modal-form .input, .modal-form .select, .modal-form .textarea { font-size: 12px !important; min-height: 42px; }
.sale-fields .input, .sale-fields .select { font-size: 10.5px !important; min-height: 38px; }
.sale-panel-head h3 { font-size: 13px !important; }
.sale-panel-head span { font-size: 8.5px !important; }
.sale-product-info strong { font-size: 10.5px !important; }
.sale-product-info span { font-size: 8px !important; }
.sale-product-price { font-size: 10.5px !important; }
.sale-line-info strong { font-size: 9.5px !important; }
.sale-line-price-input { font-size: 9px !important; width: 63px; }
.qty-stepper span { font-size: 9px !important; }
.line-total { font-size: 9px !important; min-width: 50px; }
.sale-items-head span, .sale-total-row { font-size: 9px !important; }
.sale-total-row strong { font-size: 9.5px !important; }
.sale-total-row.grand span { font-size: 10px !important; }
.sale-total-row.grand strong { font-size: 18px !important; }
.sale-profit-preview { font-size: 8.5px !important; }
.sale-discount-row label { font-size: 9px !important; }
.sale-submit-row .btn { min-height: 41px; font-size: 11px !important; }
.sale-product, .sale-line { padding: 8px; }
.sale-cart { padding: 18px 19px; }
.sale-catalog { padding: 18px 19px; }
.sale-product-list { max-height: 390px; }
.sale-lines { max-height: 230px; }
.emoji-choice { width: 34px; height: 34px; font-size: 18px; }
.product-preview-card strong { font-size: 11.5px; }
.product-preview-card span { font-size: 8.5px; }
.invoice-modal .modal-title { font-size: 18px !important; }
.invoice-brand strong { font-size: 13px !important; }
.invoice-meta .inv-no { font-size: 11px; }
.invoice-items td { font-size: 10px; }
.invoice-items th { font-size: 8px; }
.order-detail-customer h3 { font-size: 15px; }
.order-detail-customer p { font-size: 9px; }
.timeline-step { font-size: 8.5px; }
.order-detail-item { font-size: 10px; padding: 9px 11px; }
.order-detail-item .name strong { font-size: 9.5px; }
.order-detail-note { font-size: 9px; }
.order-detail-summary { font-size: 9.5px; }
.confirm-content h3 { font-size: 17px; }
.confirm-content p { font-size: 10.5px; }
.confirm-actions .btn { font-size: 10px; min-height: 35px; }
.help-step strong { font-size: 11.5px; }
.help-step p { font-size: 9.5px; }
.help-tip { font-size: 9.5px; }
.toast-content strong { font-size: 10.5px; }
.toast-content span { font-size: 9px; }

body.modal-open { overflow: hidden; }

/* منع انفصال رمز العملة عن الرقم */
.money-cur {
  display: inline;
  font-size: 0.68em !important;
  font-weight: 400 !important;
  color: var(--muted) !important;
  white-space: nowrap;
  letter-spacing: 0;
  line-height: 1;
  margin-inline-start: 2px;
}

.kpi-card.primary .money-cur { color: rgba(255, 250, 242, 0.5) !important; }
.report-kpi.net .money-cur { color: rgba(255, 250, 242, 0.48) !important; }
.pnl-row.total .money-cur { color: #8d6d54 !important; }
.about-card .money-cur { color: rgba(255, 250, 242, 0.5) !important; }

.kpi-value,
.price-block strong,
.order-total-cell strong,
.cell-money,
.pnl-row strong,
.report-kpi strong,
.invoice-total-row strong,
.sale-total-row strong,
.expense-amount,
.stat-tile-info strong {
  white-space: nowrap;
}

.price-block strong,
.order-total-cell strong,
.cell-money,
.invoice-total-row strong,
.sale-total-row strong {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  justify-content: flex-start;
}

.order-total-cell strong { justify-content: flex-end; }
.cell-money { justify-content: flex-start; }
.pnl-row strong { display: inline-flex; align-items: baseline; justify-content: flex-end; }
.report-kpi strong { flex-wrap: nowrap; }

/* شبكة بطاقة الطلب: ستة أعمدة بدل التفاف الإجراءات */
@media (min-width: 1181px) {
  .order-card {
    grid-template-columns: minmax(170px, 1.35fr) minmax(100px, 0.9fr) 92px 88px 86px auto !important;
  }
}

@media (min-width: 1025px) and (max-width: 1180px) {
  .order-card {
    grid-template-columns: minmax(145px, 1fr) 82px 78px 74px auto !important;
  }
}

@media (min-width: 861px) and (max-width: 1024px) {
  .order-card {
    grid-template-columns: minmax(150px, 1fr) 85px 80px 78px auto !important;
  }
  .order-items-cell { display: none; }
}

@media (max-width: 1320px) and (min-width: 1181px) {
  .order-card {
    grid-template-columns: minmax(150px, 1.2fr) minmax(88px, 0.72fr) 78px 78px 78px auto !important;
    gap: 9px;
  }
}

/* استجابة الهوية الجديدة */
@media (max-width: 980px) {
  .hero-brand { justify-content: center; }
  .hero-brand img { height: 82px; }
  .hero-brand-note { display: none; }
  .sheet-brand-note { display: none; }
}

@media (max-width: 760px) {
  .site-header { padding: 9px 0; }
  .brand-lockup { height: 44px; }
  .site-header.is-scrolled .brand-lockup { height: 38px; }
  .brand-caption { display: none; }
  .hero-brand { margin: 0 0 10px; }
  .hero-brand img { height: 72px; }
  .hero-title { font-size: clamp(33px, 8.8vw, 45px) !important; }
  .preview-logo img { width: 25px; height: 25px; }
  .start-card { padding-top: 75px; }
  .start-ornament { width: 104px; height: 92px; }
  .start-ornament img { height: 84px; }
  .start-fur { height: 15px; }
  .footer-brand img { height: 44px; }
  .fur-swipe-top { width: 310px; height: 230px; opacity: 0.18; }
  .fur-swipe-side { display: none; }
  .sidebar-fur { display: none; }
  .mobile-brand img { height: 34px !important; }
  .topbar::after { height: 2px; background-size: 160px auto; opacity: 0.4; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .kpi-card { min-height: 132px; }
  .kpi-value { font-size: 23px !important; }
  .welcome-copy h2 { font-size: 23px !important; }
  .view { padding-top: 18px; }
  .onboarding-copy h3 { font-size: 19px !important; }
  .onboarding-copy h3 span { font-size: 23px !important; }
  .onboarding-copy p { font-size: 10.5px !important; }
  .page-heading h1 { font-size: 20px !important; }
  .page-head-copy h2 { font-size: 18px !important; }
  .card-title { font-size: 13px !important; }
  .data-table { font-size: 10px !important; }
  .sale-catalog, .sale-cart { padding: 13px 14px; }
  .modal-head { padding: 16px 17px 12px; }
  .modal-body { padding: 15px 17px; }
  .sale-fields .input, .sale-fields .select { min-height: 36px; }
  .report-kpi strong { font-size: 18px !important; }
  .stat-tile-info strong { font-size: 15px !important; }
  .topbar-sale { min-height: 39px; font-size: 11.5px !important; }
}

@media (max-width: 420px) {
  .brand-lockup { height: 40px; }
  .hero-brand img { height: 62px; }
  .kpi-value { font-size: 21px !important; }
  .onboarding-copy h3 { font-size: 18px !important; }
  .onboarding-copy h3 span { font-size: 21px !important; }
  .page-heading h1 { font-size: 18px !important; }
  .topbar-sale { width: 39px; }
  .modal-title { font-size: 16px !important; }
  .invoice-logo { height: 48px; }
  .product-name { font-size: 11.5px !important; }
  .product-pricing { flex-wrap: wrap; }
}