@charset "UTF-8";
/* ==========================================================================
   نظام الألوان — لوحة هادئة ومهنية (Steel Blue + Muted Teal)
   نفس عائلة الألوان في الوضعين الفاتح والداكن:
     • --primary-color : لون "الحبر" (نصوص/أيقونات/حدود) — يُفتَّح في الداكن.
     • --primary-fill  : لون "التعبئة" (أزرار/شارات) — يبقى متوسطًا ليبقى
                         النص الأبيض عليه مقروءًا في الوضعين.
     • --text-on-accent: النص فوق الخلفيات الممتلئة (أبيض دائمًا).
   ========================================================================== */
:root {
  /* Light Theme - Calm Steel Blue & Muted Teal */
  color-scheme: light;
  --primary-color: #2f6f9f;
  --secondary-color: #275b83;
  --primary-fill: #2f6f9f;
  --primary-fill-hover: #275b83;
  --background-color: #f5f7f9;
  --background-opacity: rgb(245, 247, 249, 0.3);
  --surface-color: #ffffff;
  --surface-muted: #eef2f6;
  --hover-background: #e8eef4;
  --accent-color: #4a7c8c;
  --accent-fill: #4a7c8c;
  --accent-soft: rgba(74, 124, 140, 0.12);
  --primary-soft: rgba(47, 111, 159, 0.10);
  --text-color-primary: #1f2a37;
  --text-color-secondary: #64748b;
  --border-color: #dde5ec;
  --shadow-color: rgba(31, 58, 84, 0.08);
  --heading-color: #14202b;
  --content-padding: 10px;
  --nav-height: 90vh;
  --sidebar-width: 300px;
  --header-bg: rgba(255, 255, 255, 0.92);
  --input-bg: #f7f9fb;
  --sidebar-bg: #ffffff;
  --date-color: #1f2a37;
  --submit-button: #2f6f9f;
  --trial-col: #c3d5dd;
  --trial-col-d: #aec5d0;
  --skeleton-base: #e9eef4;
  --skeleton-shine: rgba(255, 255, 255, 0.85);
  /* الحالات (Status) */
  --text-on-accent: #ffffff;
  --success-color: #2f855a;
  --success-soft: #e6f4ec;
  --success-fill: #2f855a;
  --danger-color: #c0392b;
  --danger-soft: #fdecea;
  --danger-fill: #c0392b;
  --warning-color: #b7791f;
  --warning-soft: #fdf6e3;
  --warning-fill: #b7791f;
  --info-color: #2b7a9e;
  --info-soft: #e8f2f7;
  --pink-color: #b3508b;
}

/* 🖥️ عرض القائمة الجانبية في الوضع المصغّر (سطح المكتب) */
html.is-sidebar-collapsed {
  --sidebar-width: 72px;
}

[data-theme=dark] {
  color-scheme: dark;
  --primary-color: #7fb3d5;
  --secondary-color: #a9cbe3;
  --primary-fill: #33698f;
  --primary-fill-hover: #3b78a3;
  --background-color: #0f1419;
  --background-opacity: rgb(15, 20, 25, 0.3);
  --surface-color: #161d24;
  --surface-muted: #1c242c;
  --hover-background: #22303a;
  --accent-color: #86b8ab;
  --accent-fill: #3d6f72;
  --accent-soft: rgba(134, 184, 171, 0.14);
  --primary-soft: rgba(127, 179, 213, 0.14);
  --text-color-primary: #e2e8f0;
  --text-color-secondary: #93a3b1;
  --border-color: #2a3540;
  --shadow-color: rgba(0, 0, 0, 0.45);
  --heading-color: #f1f5f9;
  --header-bg: rgba(22, 29, 36, 0.92);
  --input-bg: #1b232b;
  --sidebar-bg: linear-gradient(180deg, #131a20 0%, #0c1116 100%);
  --date-color: #cbd5e1;
  --submit-button: #33698f;
  --trial-col: #2a4a4d;
  --trial-col-d: #356064;
  --skeleton-base: #1e2731;
  --skeleton-shine: rgba(255, 255, 255, 0.06);
  /* الحالات (Status) */
  --text-on-accent: #ffffff;
  --success-color: #68c79a;
  --success-soft: rgba(104, 199, 154, 0.14);
  --success-fill: #2f7a5c;
  --danger-color: #e98a80;
  --danger-soft: rgba(233, 138, 128, 0.14);
  --danger-fill: #a03a2e;
  --warning-color: #e3bc72;
  --warning-soft: rgba(227, 188, 114, 0.14);
  --warning-fill: #8f6212;
  --info-color: #74b6d4;
  --info-soft: rgba(116, 182, 212, 0.14);
  --pink-color: #d98cbb;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body, html {
  width: 100%;
  height: 100%;
  font-family: "Cairo", sans-serif;
  overflow: hidden;
}

/* Professional Scroll Fix for Guest/Landing Page */
html.is-guest, body.is-guest {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--background-color);
  color: var(--text-color-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}
body.is-guest main {
  position: relative !important;
  height: auto !important;
  min-height: 100dvh !important;
  width: 100% !important;
  z-index: 1;
  display: block !important;
  overflow: visible !important;
}
body main {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
}
body main .form-card-loader {
  position: absolute;
  inset: 0;
  z-index: 900;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
body main .form-card-loader.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
body main .form-card-loader .form-loader-card {
  background: var(--surface-color, #1e293b);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
  border-radius: 16px;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
  transform: scale(0.9);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body main .form-card-loader.is-active .form-loader-card {
  transform: scale(1);
}
body main .form-card-loader .form-spinner-box {
  position: relative;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
}
body main .form-card-loader .form-spinner-box .spinner-ring {
  inset: 0;
  position: absolute;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #7fb3d5;
  border-right-color: rgba(127, 179, 213, 0.3);
  animation: spinClockwise 0.8s linear infinite;
  filter: drop-shadow(0 0 6px rgba(127, 179, 213, 0.5));
}
body main .form-card-loader .form-spinner-box .center-icon {
  font-size: 1.1rem;
  color: #7fb3d5;
  animation: logoGlowPulse 1.5s ease-in-out infinite;
}
body main .form-card-loader .form-loader-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
body main .form-card-loader .form-loader-text .loader-msg {
  font-size: 0.92rem;
  font-weight: 800;
  color: #f8fafc;
}
body main .form-card-loader .form-loader-text .loader-sub {
  font-size: 0.78rem;
  font-weight: 600;
  color: #94a3b8;
}
body main header {
  width: 100%;
  min-height: 58px;
  background-color: transparent;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 8px 24px;
  z-index: 3000;
}
body main header img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-color);
}
body main header #header-rule {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
@media (max-width: 768px) {
  body main header {
    padding: 8px 15px;
  }
  body main header .user-info {
    display: none !important;
  }
}
body main header #display-menu {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--primary-color);
}
body main header #display-menu:hover {
  background: var(--accent-soft);
  transform: translateY(-2px);
}
body main header #display-menu svg {
  width: 25px;
  height: 25px;
  stroke: var(--text-color-primary);
  stroke-width: 1.8px;
}
body main header .header-tools {
  display: flex;
  align-items: center;
  gap: 15px;
}
body main header .header-tools [hidden] {
  display: none !important;
}
body main header .header-tools .theme-toggle, body main header .header-tools #tools-toggle {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--primary-color);
}
body main header .header-tools .theme-toggle:hover, body main header .header-tools #tools-toggle:hover {
  background: var(--accent-soft);
  transform: translateY(-2px);
}
body main header .header-tools .theme-toggle svg, body main header .header-tools #tools-toggle svg {
  width: 20px;
  height: 20px;
  fill: var(--text-color-primary);
  vertical-align: middle;
}
body main header .header-tools .theme-toggle #sun, body main header .header-tools #tools-toggle #sun {
  width: 25px;
  height: 25px;
  stroke: var(--text-color-primary);
}
body main header .header-tools .theme-toggle #moon, body main header .header-tools #tools-toggle #moon {
  fill: var(--text-color-primary);
}
body main header .header-tools .theme-toggle #moon, body main header .header-tools .theme-toggle #desktop, body main header .header-tools #tools-toggle #moon, body main header .header-tools #tools-toggle #desktop {
  stroke: var(--text-color-primary);
  stroke-width: 2px;
}
body main header .header-tools .user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
  padding-right: 15px;
  border-right: 1px solid var(--border-color);
}
body main header .header-tools .user-info small {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-color-secondary);
}
body main header .header-tools .user-info strong {
  font-size: 14px;
  color: var(--primary-color);
  font-weight: 700;
}
body main header {
  /* شريط الأدوات العائم */
}
body main header .tools-panel {
  position: relative;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body main header .tools-panel.is-visible {
  opacity: 1;
  visibility: visible;
  max-height: 100%;
  transform: translateY(0);
}
body main header .tools-panel .tools-panel-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 2px;
  min-width: auto;
  padding: 5px 0;
}
body main header .tools-panel .tools-panel-inner .tools-browser-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px 6px;
}
body main header .tools-panel .tools-panel-inner .tools-browser-nav .tool-item {
  min-width: 58px;
  padding: 4px 6px;
}
body main header .tools-panel .tools-panel-inner .tools-browser-nav .tool-item:disabled {
  opacity: 0.38;
  color: var(--text-color-secondary);
  background: transparent;
  cursor: not-allowed;
  transform: none;
}
body main header .tools-panel .tools-panel-inner .tool-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 10px;
  min-width: 70px;
  border-radius: 12px;
  color: var(--text-color-primary);
  text-decoration: none;
  font-size: 11px;
  font-weight: 300;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s;
}
body main header .tools-panel .tools-panel-inner .tool-item:not(:disabled):hover {
  background: var(--hover-background);
  color: var(--primary-color);
  transform: translateY(-2px);
}
body main header .tools-panel .tools-panel-inner .tool-item i {
  font-size: 14px;
  margin: 0;
}
body main header .tools-panel .tools-panel-inner .tool-item span {
  white-space: nowrap;
}
body main header .tools-panel .tools-panel-inner .tool-item.highlight {
  color: var(--text-color-primary);
}
body main header .tools-panel .tools-panel-inner .tool-item.highlight:hover {
  color: var(--text-on-accent);
}
body main header .tools-panel .tools-panel-inner .tool-divider {
  width: 1px;
  height: 30px;
  background: var(--border-color);
  margin: 0 4px;
}
body main aside.sidebar {
  width: 300px;
  max-height: 100vh;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1100;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg, #ffffff);
  border-left: 1px solid var(--border-color, #e2e8f0);
  box-shadow: -8px 0 35px var(--shadow-color, rgba(15, 23, 42, 0.08));
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  direction: rtl;
}
@media (max-width: 576px) {
  body main aside.sidebar {
    width: 85%;
  }
}
body main aside.sidebar.hide-menu {
  transform: translateX(100%);
}
body main aside.sidebar #user {
  flex-shrink: 0;
  padding: 16px;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
body main aside.sidebar #user .user-pic {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--primary-soft, rgba(47, 111, 159, 0.1));
  padding: 2px;
  border: 1px solid var(--border-color, #dde5ec);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--primary-color, #2f6f9f);
}
body main aside.sidebar #user .user-pic svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  stroke: var(--border-color);
  stroke-width: 2;
}
body main aside.sidebar #user .user-pic img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
body main aside.sidebar #user .user-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
body main aside.sidebar #user .user-name {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-weight: 800;
  color: var(--text-color-primary, #0f172a);
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body main aside.sidebar #user .user-name span {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-color-secondary, #64748b);
}
body main aside.sidebar #user {
  /* شارة الدور الوظيفي */
}
body main aside.sidebar #user .user-role {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--primary-soft, rgba(47, 111, 159, 0.1));
  color: var(--primary-color, #2f6f9f);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body main aside.sidebar #user .user-role::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
body main aside.sidebar #user {
  /* أزرار البطاقة (الملف الشخصي + إعدادات التطبيق الخاصة بي):
     صف مرن يلتف ويتمركز — فيبقى المرتّب سليمًا في الوضع المصغّر (72px) أيضًا. */
}
body main aside.sidebar #user .u88 {
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}
body main aside.sidebar #user .user-settings {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--surface-muted, #eef2f6);
  color: var(--accent-color);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
body main aside.sidebar #user .user-settings svg {
  width: 18px;
  height: 18px;
}
body main aside.sidebar #user .user-settings {
  /* أيقونة خطية (Font Awesome) بنفس حجم أيقونات SVG المجاورة */
}
body main aside.sidebar #user .user-settings i {
  font-size: 15px;
  line-height: 1;
}
body main aside.sidebar #user .user-settings:hover {
  background: var(--hover-background, #e8eef4);
  color: var(--primary-color, #2f6f9f);
}
body main aside.sidebar #user #close-menu {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--surface-muted, #eef2f6);
  cursor: pointer;
  font-size: 13px;
  transition: background 0.2s ease, color 0.2s ease, transform 0.25s ease;
  color: var(--text-color-secondary, #64748b);
}
body main aside.sidebar #user #close-menu:hover {
  background: var(--danger-soft);
  color: var(--danger-color);
  transform: rotate(90deg);
}
body main aside.sidebar nav {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 12px 14px 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}
body main aside.sidebar nav::-webkit-scrollbar {
  width: 4px;
}
body main aside.sidebar nav::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 10px;
}
body main aside.sidebar nav {
  /* ===== أقسام القائمة ===== */
}
body main aside.sidebar nav .nav-section:not(:first-child) {
  margin-top: 16px;
}
body main aside.sidebar nav .nav-section .nav-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 8px 7px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: var(--text-color-secondary, #64748b);
}
body main aside.sidebar nav .nav-section .nav-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-color, #dde5ec);
}
body main aside.sidebar nav .main-menu {
  list-style: none;
  margin: 0 0 2px;
  padding: 0;
}
body main aside.sidebar nav .main-menu li {
  margin-bottom: 3px;
}
body main aside.sidebar nav .main-menu li > span, body main aside.sidebar nav .main-menu li > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 11px;
  color: var(--text-color-primary, #0f172a);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  position: relative;
}
body main aside.sidebar nav .main-menu li > span i, body main aside.sidebar nav .main-menu li > a i {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--surface-muted, #eef2f6);
  color: var(--primary-color, #2f6f9f);
  font-size: 13px;
  transition: background 0.2s ease, color 0.2s ease;
}
body main aside.sidebar nav .main-menu li > span:hover, body main aside.sidebar nav .main-menu li > a:hover {
  background: var(--hover-background, #e8eef4);
  color: var(--primary-color, #2f6f9f);
}
body main aside.sidebar nav .main-menu li > span:hover i, body main aside.sidebar nav .main-menu li > a:hover i {
  background: var(--primary-soft, rgba(47, 111, 159, 0.1));
}
body main aside.sidebar nav .main-menu li > span, body main aside.sidebar nav .main-menu li > a {
  /* الفرع المفتوح حاليًا */
}
body main aside.sidebar nav .main-menu li > span.open, body main aside.sidebar nav .main-menu li > a.open {
  background: var(--primary-soft, rgba(47, 111, 159, 0.1));
  color: var(--primary-color, #2f6f9f);
  font-weight: 800;
}
body main aside.sidebar nav .main-menu li > span.open i, body main aside.sidebar nav .main-menu li > a.open i {
  background: var(--primary-fill, #2f6f9f);
  color: var(--text-on-accent, #ffffff);
}
body main aside.sidebar nav .main-menu li > span, body main aside.sidebar nav .main-menu li > a {
  /* الصفحة الحالية */
}
body main aside.sidebar nav .main-menu li > span.is-current, body main aside.sidebar nav .main-menu li > a.is-current {
  background: var(--primary-soft, rgba(47, 111, 159, 0.1));
  color: var(--primary-color, #2f6f9f);
  font-weight: 800;
}
body main aside.sidebar nav .main-menu li > span.is-current i, body main aside.sidebar nav .main-menu li > a.is-current i {
  background: var(--primary-fill, #2f6f9f);
  color: var(--text-on-accent, #ffffff);
}
body main aside.sidebar nav .main-menu li > span.is-current::before, body main aside.sidebar nav .main-menu li > a.is-current::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 3px;
  background: var(--primary-fill, #2f6f9f);
}
body main aside.sidebar nav .main-menu li > span, body main aside.sidebar nav .main-menu li > a {
  /* مؤشرات لونية اختيارية */
}
body main aside.sidebar nav .main-menu li > span i.danger, body main aside.sidebar nav .main-menu li > a i.danger {
  color: var(--danger-color, #c0392b);
  background: var(--danger-soft, #fdecea);
}
body main aside.sidebar nav .main-menu li > span i.warning, body main aside.sidebar nav .main-menu li > a i.warning {
  color: var(--warning-color, #b7791f);
  background: var(--warning-soft, #fdf6e3);
}
body main aside.sidebar nav .main-menu li > span i.success, body main aside.sidebar nav .main-menu li > a i.success {
  color: var(--success-color, #2f855a);
  background: var(--success-soft, #e6f4ec);
}
body main aside.sidebar nav .main-menu li > span i.info, body main aside.sidebar nav .main-menu li > a i.info {
  color: var(--info-color, #2b7a9e);
  background: var(--info-soft, #e8f2f7);
}
body main aside.sidebar nav .main-menu li > span:after {
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: auto;
  font-size: 11px;
  transition: transform 0.3s;
  opacity: 0.55;
  color: var(--text-color-secondary, #64748b);
}
body main aside.sidebar nav .main-menu li > span.open:after {
  transform: rotate(90deg);
  color: var(--primary-color, #2f6f9f);
  opacity: 1;
}
body main aside.sidebar nav .main-menu li .children {
  list-style: none;
  max-height: 0;
  overflow: hidden;
  margin: 0 25px 0 0;
  padding: 0;
  border-right: 2px solid var(--border-color, #dde5ec);
  border-radius: 0 0 10px 10px;
  background: transparent;
  transition: max-height 0.35s ease;
}
body main aside.sidebar nav .main-menu li .children > li {
  margin-top: 2px;
}
body main aside.sidebar nav .main-menu li .children li > span, body main aside.sidebar nav .main-menu li .children li > a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  padding: 7px 10px;
  color: var(--text-color-secondary, #64748b);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.2s ease, color 0.2s ease;
}
body main aside.sidebar nav .main-menu li .children li > span i, body main aside.sidebar nav .main-menu li .children li > a i {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: transparent;
  color: var(--text-color-secondary, #64748b);
  font-size: 11.5px;
}
body main aside.sidebar nav .main-menu li .children li > span:hover, body main aside.sidebar nav .main-menu li .children li > a:hover {
  background: var(--surface-color, #ffffff);
  color: var(--primary-color, #2f6f9f);
  box-shadow: 0 2px 8px var(--shadow-color);
}
body main aside.sidebar nav .main-menu li .children li > span:hover i, body main aside.sidebar nav .main-menu li .children li > a:hover i {
  color: var(--primary-color, #2f6f9f);
}
body main aside.sidebar nav .main-menu li .children li > span.open, body main aside.sidebar nav .main-menu li .children li > span.is-current, body main aside.sidebar nav .main-menu li .children li > a.open, body main aside.sidebar nav .main-menu li .children li > a.is-current {
  background: var(--primary-soft, rgba(47, 111, 159, 0.1));
  color: var(--primary-color, #2f6f9f);
  font-weight: 800;
}
body main aside.sidebar nav .main-menu li .children li > span.open i, body main aside.sidebar nav .main-menu li .children li > span.is-current i, body main aside.sidebar nav .main-menu li .children li > a.open i, body main aside.sidebar nav .main-menu li .children li > a.is-current i {
  color: var(--primary-color, #2f6f9f);
}
body main aside.sidebar nav .main-menu li .children {
  /* القوائم المتداخلة (شجرة الحسابات) */
}
body main aside.sidebar nav .main-menu li .children .children {
  margin-right: 14px;
  border-right: 1px dashed var(--border-color, #cbd5e1);
  border-radius: 0;
}
body main aside.sidebar nav .main-menu li .children .children li > span, body main aside.sidebar nav .main-menu li .children .children li > a {
  font-size: 12px;
  padding: 6px 8px;
}
body main aside.sidebar nav .main-menu li .children .children li > span i, body main aside.sidebar nav .main-menu li .children .children li > a i {
  width: 18px;
  height: 18px;
  font-size: 11px;
}
body main aside.sidebar nav .main-menu li .children.open-menu {
  max-height: 2000px;
  padding: 6px 8px 10px;
}
body main aside.sidebar nav .main-menu.account-menu {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color, #e2e8f0);
}
body main aside.sidebar nav .main-menu.account-menu .logout-link {
  color: var(--danger-color);
}
body main aside.sidebar nav .main-menu.account-menu .logout-link i {
  color: var(--danger-color);
}
body main aside.sidebar nav .main-menu.account-menu .logout-link:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger-color);
}
body main aside.sidebar nav .main-menu.account-menu .logout-link:hover i {
  color: var(--danger-color);
}
body main aside.sidebar #logout {
  flex-shrink: 0;
  padding: 14px 16px;
  border-top: 1px solid var(--border-color, #e2e8f0);
  background: var(--sidebar-bg, #ffffff);
}
body main aside.sidebar #logout a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  border-radius: 11px;
  background: var(--surface-muted, #eef2f6);
  color: var(--danger-color, #c0392b);
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
body main aside.sidebar #logout a:hover {
  background: var(--danger-soft, #fdecea);
  color: var(--danger-color, #c0392b);
  border-color: var(--danger-color, #c0392b);
}
body main aside.sidebar #logout a svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}
body main aside.sidebar .copyright {
  padding: 16px 20px;
  text-align: center;
  font-size: 11px;
  color: var(--text-color-secondary, #64748b);
  border-top: 1px solid var(--border-color, #e2e8f0);
}
body main aside.sidebar .copyright p {
  margin: 0;
  font-weight: 600;
}
body main #content {
  padding: var(--content-padding);
  height: 100dvh;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding-bottom: 50px;
  transition: padding-bottom 0.3s ease;
  position: relative;
}
body main #content::-webkit-scrollbar {
  width: 8px;
}
body main #content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.02);
  border-radius: 10px;
}
body main #content::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
  transition: all 0.3s;
}
body main #content::-webkit-scrollbar-thumb:hover {
  background: var(--primary-fill-hover);
  background-clip: content-box;
}
body main #content {
  scrollbar-width: thin;
  scrollbar-color: var(--secondary-color) transparent;
}
@media (max-width: 576px) {
  body main #content {
    padding: 10px;
  }
}
.is-guest body main #content {
  height: auto;
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body main #content.has-bottom-bar {
  padding-bottom: 120px;
}
body main #content.has-bottom-bar .pagination, body main #content.has-bottom-bar .pagination-bar,
body main #content.has-bottom-bar .submit-btn:not(.profile-page-wrapper .submit-btn),
body main #content.has-bottom-bar input[type=submit],
body main #content.has-bottom-bar button[type=submit]:not(.login-form button):not(.date-filter-card button):not(.profile-page-wrapper button) {
  display: none !important;
}
body main #content .profile-page-wrapper .submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 18px;
  padding: 14px 22px;
  border: none;
  border-radius: 12px;
  background: var(--primary-fill);
  color: var(--text-on-accent);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 8px 20px rgba(23, 59, 64, 0.18);
}
body main #content .profile-page-wrapper .submit-btn:hover {
  background: var(--primary-fill-hover);
  transform: translateY(-2px);
}
body main #content .profile-page-wrapper .submit-btn:focus-visible {
  outline: 2px solid var(--accent-fill);
  outline-offset: 2px;
}
body main #content .profile-page-wrapper .submit-btn:disabled {
  background: var(--surface-muted);
  color: var(--text-color-secondary);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
body main #content .safe-pass-lock-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 16px;
  border: 1px solid var(--danger-color);
  border-radius: 12px;
  background: var(--danger-soft);
  color: var(--danger-color);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.8;
}
body main #content .safe-pass-lock-note i {
  margin-top: 4px;
  flex: 0 0 auto;
}
body main #content .safe-pass-lock-note strong {
  font-weight: 800;
}
body main #content .login-form {
  width: min(100%, 440px);
  padding: 34px;
  margin: 60px auto;
  direction: rtl;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: var(--surface-color);
  box-shadow: 0 24px 60px var(--shadow-color);
  animation: login-form-in 0.45s ease-out;
}
body main #content .login-form .login-form-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 30px;
}
body main #content .login-form .login-form-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 14px;
  background: var(--primary-fill);
  color: var(--text-on-accent);
  font-size: 24px;
  font-weight: 700;
}
body main #content .login-form .login-form-kicker {
  margin-bottom: 4px;
  color: var(--primary-color);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
body main #content .login-form h1 {
  margin-bottom: 6px;
  color: var(--text-color-primary);
  font-size: 26px;
}
body main #content .login-form .login-form-header p:last-child {
  color: var(--text-color-secondary);
  font-size: 13px;
}
body main #content .login-form .login-form-fields {
  display: grid;
  gap: 9px;
}
body main #content .login-form label {
  margin-top: 8px;
  color: var(--text-color-primary);
  font-size: 13px;
  font-weight: 700;
}
body main #content .login-form input:not([type=hidden]) {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  outline: 0;
  background: var(--surface-color);
  color: var(--text-color-primary);
  font: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
body main #content .login-form input:not([type=hidden]):focus {
  border-color: var(--primary-color);
  background: var(--surface-color);
  box-shadow: 0 0 0 4px rgba(73, 101, 140, 0.12);
}
body main #content .login-form button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 16px;
  padding: 13px 16px;
  border: 0;
  border-radius: 9px;
  background: var(--primary-fill);
  color: var(--text-on-accent);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
body main #content .login-form button:hover {
  background: var(--primary-fill-hover);
  box-shadow: 0 8px 18px rgba(14, 17, 19, 0.18);
  transform: translateY(-1px);
}
body main #content .login-form button:disabled {
  cursor: wait;
  opacity: 0.7;
  transform: none;
}
@keyframes login-form-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
body main #content {
  /* 📝 Global Client Component / Autocomplete Styling */
}
body main #content .clientComponent {
  position: relative;
  display: flex;
  flex-direction: column;
}
body main #content .clientComponent.is-active {
  z-index: 6000;
}
body main #content .clientComponent.is-active .custom-select-dropdown {
  z-index: 6100;
}
body main #content .clientComponent.is-loading::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 19px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--accent-color);
  border-bottom-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  z-index: 10;
  pointer-events: none;
}
body main #content .clientComponent input[type=text] {
  width: 100%;
  z-index: 1;
  padding-left: 40px !important;
}
body main #content .clientComponent .custom-select-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  box-shadow: 0 15px 45px var(--shadow-color);
  max-height: 150px;
  overflow-y: auto;
  display: none;
  z-index: 1000;
  padding: 10px;
  backdrop-filter: blur(10px);
  animation: dropdownFadeIn 0.2s ease-out;
}
body main #content .clientComponent .custom-select-dropdown::-webkit-scrollbar {
  width: 3px;
}
body main #content .clientComponent .custom-select-dropdown::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 10px;
}
@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
body main #content .clientComponent .dropdown-item {
  padding: 5px 7px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
  color: var(--text-color-primary);
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.02);
}
body main #content .clientComponent .dropdown-item:hover {
  background: var(--hover-background);
  border-color: var(--border-color);
  transform: scale(1.02) translateX(-5px);
  box-shadow: 0 4px 12px var(--shadow-color);
}
body main #content .clientComponent .dropdown-item .item-main-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body main #content .clientComponent .dropdown-item .item-main-info .parent-path {
  font-size: 9px;
  color: var(--text-color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
}
body main #content .clientComponent .dropdown-item .item-main-info .item-name {
  font-weight: 500;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 2px;
  text-overflow: ellipsis;
}
body main #content .clientComponent .dropdown-item .item-main-info {
  /* اسم الشخص (المسؤول) أسفل اسم الشركة في قوائم اختيار العملاء */
}
body main #content .clientComponent .dropdown-item .item-main-info .item-person {
  font-size: 10px;
  color: var(--text-color-secondary);
  font-weight: 600;
}
body main #content .clientComponent .dropdown-item .item-meta-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
body main #content .clientComponent .dropdown-item .client-code {
  font-family: "JetBrains Mono", monospace;
  font-weight: 800;
  color: var(--primary-color);
  background: var(--accent-soft);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
}
body main #content .clientComponent .dropdown-item .client-id {
  color: var(--text-color-secondary);
  font-size: 10px;
  opacity: 0.5;
  font-weight: 600;
}
body main #content .clientComponent .dropdown-item .final-tag {
  font-size: 9px;
  background: var(--success-fill);
  color: var(--text-on-accent);
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 4px;
}
body main #content .clientComponent .dropdown-item .final-tag i {
  font-size: 10px;
}
body main #content .clientComponent .dropdown-message {
  padding: 20px;
  text-align: center;
  color: var(--text-color-secondary);
  font-size: 14px;
}
body main #content .clientComponent .sub-level-wrapper {
  margin-top: 8px;
  background: rgba(0, 0, 0, 0.02);
  padding: 8px;
  border-radius: 8px;
  border-right: 2px solid var(--accent-color);
}
body main #content .addTransForm {
  max-width: 1200px;
  margin: 20px auto;
  padding: 24px;
  background: var(--surface-color);
  border-radius: 16px;
  box-shadow: 0 10px 30px var(--shadow-color);
  direction: rtl;
  border: 1px solid var(--border-color);
}
body main #content .addTransForm h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--primary-color);
  font-size: 20px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--surface-muted);
}
body main #content .addTransForm h3 svg {
  width: 24px;
  height: 24px;
  stroke: var(--accent-color);
}
body main #content .addTransForm h3 .date-input-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 320px;
}
body main #content .addTransForm h3 .date-input-wrapper input[type=date] {
  width: 100%;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--primary-color);
  background-color: var(--input-bg);
  border: 1.5px solid var(--border-color);
  border-radius: 9px;
  outline: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease-in-out;
  appearance: none;
}
body main #content .addTransForm h3 .date-input-wrapper input[type=date]:hover {
  border-color: var(--primary-color);
}
body main #content .addTransForm h3 .date-input-wrapper input[type=date]:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
body main #content .addTransForm h3 .date-input-wrapper input[type=date]::-webkit-datetime-edit {
  display: flex;
  gap: 2px;
}
body main #content .addTransForm h3 .date-input-wrapper input[type=date]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.2s;
}
body main #content .addTransForm h3 .date-input-wrapper input[type=date]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  transform: scale(1.1);
}
body main #content .addTransForm .form-content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  text-align: right;
}
body main #content .addTransForm .form-content .col-lg-4 {
  flex: 1 1 calc(33.333% - 14px);
  min-width: 280px;
}
@media (max-width: 768px) {
  body main #content .addTransForm .form-content .col-lg-4 {
    flex: 1 1 100%;
  }
}
body main #content .addTransForm .form-content .col-lg-12 {
  flex: 0 0 100%;
}
body main #content .addTransForm .form-content label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-color-secondary);
  font-size: 14px;
  font-weight: 600;
}
body main #content .addTransForm .form-content input:not([type=radio]):not([type=submit]):not([type=button]):not([type=checkbox]) {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--text-color-primary);
  font-size: 15px;
  transition: all 0.2s ease;
}
body main #content .addTransForm .form-content input:not([type=radio]):not([type=submit]):not([type=button]):not([type=checkbox]):focus {
  outline: none;
  border-color: var(--primary-color);
  background: var(--surface-color);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
body main #content .addTransForm .form-content .radioBox {
  padding: 10px 0;
}
body main #content .addTransForm .form-content .radioBox .radio-options {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}
body main #content .addTransForm .form-content .radioBox .radio-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 10px;
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  background: var(--surface-color);
  cursor: pointer;
}
body main #content .addTransForm .form-content .radioBox .radio-option input[type=radio] {
  position: absolute;
  opacity: 0;
}
body main #content .addTransForm .form-content .radioBox .radio-option .radio-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color-secondary);
}
body main #content .addTransForm .form-content .radioBox .radio-option:has(input:checked) {
  border-color: var(--primary-color);
  background: rgba(23, 59, 64, 0.05);
}
body main #content .addTransForm .form-content .radioBox .radio-option:has(input:checked) .radio-text {
  color: var(--primary-color);
}
body main #content .addTransForm .form-content .radioBox .radio-option:hover:not(:has(input:checked)) {
  border-color: var(--border-color);
  background: var(--surface-muted);
}
body main #content .addTransForm .form-content .submit-btn {
  width: 100%;
  margin-top: 20px;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: var(--primary-fill);
  color: var(--text-on-accent);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
}
body main #content .addTransForm .form-content .submit-btn:hover {
  background: var(--accent-fill);
  transform: translateY(-2px);
}
body main #content .addTransForm .form-content.has-bottom-bar .submit-btn {
  display: none;
}
body main #content {
  /* ═══════════════════════════════════════════════════════════════
     🧾 نموذج تسجيل القيود اليومية
     - رأس واحد (تاريخ + بيان) ثم جانبان متساويان: مدين / دائن.
     - كل سطر شبكة واحدة: الحساب / البيان / المبلغ / حذف، برأس أعمدة
       يظهر مرة واحدة أعلى كل جانب بدل تكرار العناوين في كل سطر.
     - على الشاشات الضيقة يصبح السطر بطاقة من سطرين: الحساب بعرض كامل،
       ثم البيان والمبلغ، وزر الحذف على الحافة.
     - قائمة الحسابات مختصرة (اسم الحساب فقط) في هذا النموذج عبر
       data-autocomplete-display="name" — التفاصيل في تلميح العنصر.
     ═══════════════════════════════════════════════════════════════ */
}
body main #content .journal-entry-container {
  /* شبكة السطر الواحدة: تُستخدم في رأس الأعمدة وفي كل صف لتتطابق الأعمدة */
  --entry-grid: minmax(0, 2.3fr) minmax(0, 1.6fr) minmax(108px, 0.9fr) 32px;
  --entry-gap: 10px;
  max-width: 1180px;
  margin: 16px auto;
  padding: 0 15px;
}
body main #content .journal-entry-container .form-header-card {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: var(--surface-color);
  box-shadow: 0 8px 24px var(--shadow-color);
  margin-bottom: 12px;
}
body main #content .journal-entry-container .form-header-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--primary-color);
  white-space: nowrap;
}
body main #content .journal-entry-container .form-header-card h3 i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: 14px;
  background: var(--accent-soft);
  color: var(--accent-color);
}
body main #content .journal-entry-container .form-header-card .row {
  flex: 1 1 auto;
  max-width: 620px;
  min-width: 0;
  display: grid;
  grid-template-columns: 165px minmax(0, 1fr);
  gap: 12px;
}
body main #content .journal-entry-container .form-header-card .row .col-lg-6 {
  min-width: 0;
  width: 100%;
}
body main #content .journal-entry-container .form-header-card label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-color-secondary);
  font-size: 12px;
  font-weight: 800;
}
body main #content .journal-entry-container .form-header-card input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--text-color-primary);
  font-size: 14px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
body main #content .journal-entry-container .form-header-card input:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
@media (max-width: 992px) {
  body main #content .journal-entry-container .form-header-card {
    flex-direction: column;
    align-items: stretch;
  }
  body main #content .journal-entry-container .form-header-card h3 {
    white-space: normal;
    font-size: 15px;
  }
  body main #content .journal-entry-container .form-header-card .row {
    grid-template-columns: 165px minmax(0, 1fr);
    max-width: none;
  }
}
@media (max-width: 576px) {
  body main #content .journal-entry-container .form-header-card .row {
    grid-template-columns: 1fr;
  }
}
body main #content .journal-entry-container .entry-sides-wrapper {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
body main #content .journal-entry-container .entry-sides-wrapper .entry-side {
  flex: 1;
  min-width: 100%;
}
@media (min-width: 1200px) {
  body main #content .journal-entry-container .entry-sides-wrapper .entry-side {
    min-width: 430px;
  }
}
body main #content .journal-entry-container .entry-sides-wrapper .entry-side {
  display: flex;
  flex-direction: column;
  background: var(--surface-color);
  border-radius: 14px;
  border: 1px solid var(--border-color);
  box-shadow: 0 8px 24px var(--shadow-color);
}
body main #content .journal-entry-container .entry-sides-wrapper .entry-side .side-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color);
  background: var(--surface-muted);
  border-radius: 13px 13px 0 0;
}
body main #content .journal-entry-container .entry-sides-wrapper .entry-side .side-header h4 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text-color-primary);
}
body main #content .journal-entry-container .entry-sides-wrapper .entry-side .side-header h4 i {
  font-size: 13px;
}
body main #content .journal-entry-container .entry-sides-wrapper .entry-side .side-header .add-row-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 9px;
  border: 1px solid var(--border-color);
  background: var(--surface-color);
  color: var(--primary-color);
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
body main #content .journal-entry-container .entry-sides-wrapper .entry-side .side-header .add-row-btn i {
  font-size: 11px;
}
body main #content .journal-entry-container .entry-sides-wrapper .entry-side .side-header .add-row-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent-color);
}
body main #content .journal-entry-container .entry-sides-wrapper .entry-side {
  /* شريط لوني على حافة الرأس يميّز المدين عن الدائن بلا ضجيج */
}
body main #content .journal-entry-container .entry-sides-wrapper .entry-side.debit-side .side-header {
  box-shadow: inset -3px 0 0 var(--success-color);
}
body main #content .journal-entry-container .entry-sides-wrapper .entry-side.credit-side .side-header {
  box-shadow: inset -3px 0 0 var(--danger-color);
}
body main #content .journal-entry-container .entry-sides-wrapper .entry-side .rows-head {
  display: grid;
  grid-template-columns: var(--entry-grid);
  gap: var(--entry-gap);
  padding: 8px 12px 7px;
  border-bottom: 1px solid var(--border-color);
  font-size: 11px;
  font-weight: 800;
  color: var(--text-color-secondary);
}
body main #content .journal-entry-container .entry-sides-wrapper .entry-side .rows-head span:nth-child(3) {
  text-align: center;
}
@media (max-width: 768px) {
  body main #content .journal-entry-container .entry-sides-wrapper .entry-side .rows-head {
    display: none;
  }
}
body main #content .journal-entry-container .entry-sides-wrapper .entry-side .rows-container {
  padding: 0;
  flex: 1;
}
body main #content .journal-entry-container .entry-sides-wrapper .entry-side .rows-container.is-empty {
  display: none;
}
body main #content .journal-entry-container .entry-sides-wrapper .entry-side {
  /* تلميح الفراغ: يظهر فقط قبل إضافة أول سطر (يُدار من JournalManager) */
}
body main #content .journal-entry-container .entry-sides-wrapper .entry-side .rows-hint {
  display: none;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 18px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-color-secondary);
}
body main #content .journal-entry-container .entry-sides-wrapper .entry-side .rows-hint i {
  color: var(--accent-color);
  font-size: 13px;
}
body main #content .journal-entry-container .entry-sides-wrapper .entry-side .rows-container.is-empty + .rows-hint {
  display: flex;
}
body main #content .journal-entry-container .entry-sides-wrapper .entry-divider {
  display: grid;
  place-items: center;
  color: var(--border-color);
  font-size: 20px;
}
@media (max-width: 1200px) {
  body main #content .journal-entry-container .entry-sides-wrapper .entry-divider {
    width: 100%;
    height: 22px;
    transform: rotate(90deg);
  }
}
body main #content .journal-entry-container .entry-row-item {
  position: relative;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  animation: slideIn 0.3s ease-out;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
body main #content .journal-entry-container .entry-row-item:last-child {
  border-bottom: none;
  border-end-start-radius: 13px;
  border-end-end-radius: 13px;
}
body main #content .journal-entry-container .entry-row-item:hover {
  background: var(--hover-background);
}
body main #content .journal-entry-container .entry-row-item:focus-within {
  background: var(--surface-muted);
  box-shadow: inset -3px 0 0 var(--accent-color);
}
body main #content .journal-entry-container .entry-row-item .row-fields {
  display: grid;
  grid-template-columns: var(--entry-grid);
  gap: var(--entry-gap);
  align-items: center;
  min-width: 0;
}
body main #content .journal-entry-container .entry-row-item .account-field,
body main #content .journal-entry-container .entry-row-item .desc-field,
body main #content .journal-entry-container .entry-row-item .amount-field {
  position: relative;
  min-width: 0;
}
body main #content .journal-entry-container .entry-row-item {
  /* حقول السطر موحّدة الارتفاع: تباين واضح بين الاسم والبيان والمبلغ */
}
body main #content .journal-entry-container .entry-row-item input:not([type=hidden]):not([type=checkbox]) {
  width: 100%;
  height: 38px;
  padding: 0 11px;
  border: 1.5px solid var(--border-color);
  border-radius: 9px;
  background: var(--input-bg);
  color: var(--text-color-primary);
  font-size: 13.5px;
  font-weight: 600;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
body main #content .journal-entry-container .entry-row-item input:not([type=hidden]):not([type=checkbox])::placeholder {
  color: var(--text-color-secondary);
  opacity: 0.45;
  font-weight: 500;
}
body main #content .journal-entry-container .entry-row-item input:not([type=hidden]):not([type=checkbox]):focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--surface-color);
}
body main #content .journal-entry-container .entry-row-item .amount-field input {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 15px;
  direction: ltr;
}
body main #content .journal-entry-container .entry-row-item input.debit-amount-input {
  color: var(--success-color);
}
body main #content .journal-entry-container .entry-row-item input.credit-amount-input {
  color: var(--danger-color);
}
body main #content .journal-entry-container .entry-row-item .remove-row-btn {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: var(--surface-color);
  color: var(--danger-color);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
}
body main #content .journal-entry-container .entry-row-item .remove-row-btn:hover {
  background: var(--danger-soft);
  border-color: var(--danger-color);
}
body main #content .journal-entry-container .entry-row-item {
  /* الحقول التحليلية (تفاصيل الحساب) تظهر أسفل السطر بمحاذاة الاسم */
}
body main #content .journal-entry-container .entry-row-item .sub-level-wrapper .clientComponent > label {
  display: block;
  margin-bottom: 5px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text-color-secondary);
}
body main #content .journal-entry-container .entry-row-item {
  /* مؤشّر التحميل داخل حقل أقصر */
}
body main #content .journal-entry-container .entry-row-item .clientComponent.is-loading::after {
  top: 10px;
}
body main #content .journal-entry-container .entry-row-item .entry-link-trans {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-color);
  cursor: pointer;
}
body main #content .journal-entry-container .entry-row-item .entry-link-trans input[type=checkbox].link-transfer-chk {
  cursor: pointer;
}
body main #content .journal-entry-container .entry-row-item .entry-link-trans p {
  margin: 0;
  cursor: pointer;
}
body main #content .journal-entry-container .entry-row-item {
  /* صندوق ربط العهدة/المصروف بنقلة: لوحة هادئة بدل الإطار المتقطع */
}
body main #content .journal-entry-container .entry-row-item .transfer-link-box {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--surface-muted);
  box-shadow: none;
}
body main #content .journal-entry-container .entry-row-item .transfer-link-fields {
  display: none;
  margin-top: 10px;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
body main #content .journal-entry-container .entry-row-item .transfer-link-fields select,
body main #content .journal-entry-container .entry-row-item .transfer-link-fields input[type=date] {
  flex: 1 1 150px;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border: 1.5px solid var(--border-color);
  border-radius: 9px;
  background: var(--surface-color);
  color: var(--text-color-primary);
  font-size: 13px;
  font-weight: 600;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
body main #content .journal-entry-container .entry-row-item .transfer-link-fields select:focus,
body main #content .journal-entry-container .entry-row-item .transfer-link-fields input[type=date]:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
body main #content .journal-entry-container .entry-row-item .transfer-link-fields .transfer-id-select {
  flex: 2 1 230px;
}
body main #content .journal-entry-container .entry-row-item .transfer-link-fields select {
  cursor: pointer;
  appearance: none;
  background-image: url("svg/chevron-select.svg");
  background-repeat: no-repeat;
  background-position: left 12px center;
  background-size: 16px;
  padding-left: 34px;
}
body main #content .journal-entry-container .entry-row-item {
  /* 📱 بطاقة من سطرين على الشاشات الضيقة: لا تصغير مبالغ فيه للحقول */
}
@media (max-width: 768px) {
  body main #content .journal-entry-container .entry-row-item .row-fields {
    grid-template-columns: minmax(0, 1fr) minmax(96px, 0.55fr) 30px;
    grid-template-areas: "account account remove" "desc amount remove";
    align-items: start;
    row-gap: 8px;
  }
  body main #content .journal-entry-container .entry-row-item .row-fields .account-field {
    grid-area: account;
  }
  body main #content .journal-entry-container .entry-row-item .row-fields .desc-field {
    grid-area: desc;
  }
  body main #content .journal-entry-container .entry-row-item .row-fields .amount-field {
    grid-area: amount;
  }
  body main #content .journal-entry-container .entry-row-item .row-fields .remove-row-btn {
    grid-area: remove;
    align-self: center;
    justify-self: end;
  }
}
body main #content .journal-entry-container {
  /* سطح المكتب الواسع: البطاقتان جنبًا إلى جنب فتضيق الأعمدة، لذلك
     يأخذ الحساب سطرًا كاملًا داخل كل بطاقة (نفس منطق الشاشات الضيقة)
     ويُخفى رأس الأعمدة لأن حقول السطر لم تعد على صف واحد. */
}
@media (min-width: 1200px) {
  body main #content .journal-entry-container .entry-sides-wrapper .entry-side .rows-head {
    display: none;
  }
  body main #content .journal-entry-container .entry-sides-wrapper .entry-side .entry-row-item .row-fields {
    grid-template-columns: minmax(0, 1fr) minmax(96px, 0.34fr) 30px;
    grid-template-areas: "account account remove" "desc amount remove";
    align-items: start;
    row-gap: 8px;
  }
  body main #content .journal-entry-container .entry-sides-wrapper .entry-side .entry-row-item .row-fields .account-field {
    grid-area: account;
  }
  body main #content .journal-entry-container .entry-sides-wrapper .entry-side .entry-row-item .row-fields .desc-field {
    grid-area: desc;
  }
  body main #content .journal-entry-container .entry-sides-wrapper .entry-side .entry-row-item .row-fields .amount-field {
    grid-area: amount;
  }
  body main #content .journal-entry-container .entry-sides-wrapper .entry-side .entry-row-item .row-fields .remove-row-btn {
    grid-area: remove;
    align-self: center;
    justify-self: end;
  }
}
body main #content .journal-entry-container {
  /* قائمة الحسابات في هذا النموذج: اسم الحساب فقط، صفوف أوضح ومساحة أكبر */
}
body main #content .journal-entry-container .clientComponent {
  /* الشريط السفلي الثابت z-index:9999 — نرفع القائمة فوقه داخل هذا النموذج فقط */
}
body main #content .journal-entry-container .clientComponent.is-active {
  z-index: 10000;
}
body main #content .journal-entry-container .clientComponent .custom-select-dropdown {
  top: calc(100% + 6px);
  max-height: 260px;
  padding: 6px;
  border-radius: 12px;
}
body main #content .journal-entry-container .clientComponent .dropdown-item {
  padding: 8px 10px;
  border-radius: 8px;
}
body main #content .journal-entry-container .clientComponent .dropdown-item:hover {
  transform: none;
  box-shadow: none;
  background: var(--hover-background);
  border-color: transparent;
}
body main #content .journal-entry-container .clientComponent .dropdown-item .item-name {
  font-size: 13px;
  font-weight: 700;
}
body main #content .journal-entry-container .clientComponent .dropdown-message {
  padding: 14px;
  font-size: 12.5px;
}
body main #content .journal-entry-container .entry-summary-card {
  display: none !important;
}
body main #content {
  /* 📊 Report Styling (Trial Balance, etc.) */
}
body main #content .report-container {
  padding: 15px;
  animation: fadeIn 0.4s ease-out;
  /* ------------------------------------------------------------------
     📊 رأس التقارير الموحّد (كل التقارير: ميزان المراجعة، الدخل،
        المركز المالي، التدفقات النقدية):
     - شبكة ثلث للعنوان والنص التعريفي، وثلثان لأدوات الفلترة.
     - أدوات الفلترة (.report-filters) مدموجة داخل الرأس: بلا خلفية ولا
       حدود ولا هوامش إضافية، لتوفير ارتفاع وإظهار أكبر قدر من البيانات.
     - حقول التاريخ وحدات مضغوطة (شريحة تسمية + الحقل الأصلي)، وتُعرض
       متراكبة عند وجود تاريخين.
     - شريحة الفترة (.period-badge) مخفية على الشاشة (الحقول تكفي)،
       وتظهر عند الطباعة/تصدير PDF لأنها تعرض الفترة المطبَّقة فعلاً.
     ------------------------------------------------------------------ */
}
body main #content .report-container .report-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: center;
  gap: 10px 18px;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 10px;
  /* الجزء الأول (الثلث): العنوان ثم النص التعريفي أسفله */
}
body main #content .report-container .report-header .header-title {
  display: block;
  min-width: 0;
}
body main #content .report-container .report-header .header-title h2 {
  color: var(--primary-color);
  font-size: 19px;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
body main #content .report-container .report-header .header-title p {
  color: var(--text-color-secondary);
  font-size: 11.5px;
  margin: 0;
}
body main #content .report-container .report-header {
  /* شريحة الفترة: مخفية على الشاشة، تظهر في الطباعة */
}
body main #content .report-container .report-header .period-badge {
  display: none;
}
body main #content .report-container .report-header {
  /* الجزء الثاني (الثلثان): أدوات الفلترة */
}
body main #content .report-container .report-header .report-filters {
  min-width: 0;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}
body main #content .report-container .report-header .report-filters .filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}
body main #content .report-container .report-header .report-filters {
  /* حقول التاريخ: عمود مضغوط (تاريخان متراكبان إن وُجدا) */
}
body main #content .report-container .report-header .report-filters .date-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
body main #content .report-container .report-header .report-filters {
  /* وحدة مضغوطة: شريحة التسمية + حقل التاريخ الأصلي */
}
body main #content .report-container .report-header .report-filters .filter-group {
  display: inline-flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  background: var(--input-bg);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body main #content .report-container .report-header .report-filters .filter-group:hover {
  border-color: var(--primary-color);
}
body main #content .report-container .report-header .report-filters .filter-group:focus-within {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
body main #content .report-container .report-header .report-filters .filter-group {
  /* شريحة التسمية: عرض ثابت حتى تتحاذى الحقول رأسيًا */
}
body main #content .report-container .report-header .report-filters .filter-group label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: var(--primary-color);
  background: var(--surface-muted);
  border-inline-end: 1px solid var(--border-color);
  white-space: nowrap;
  cursor: pointer;
}
body main #content .report-container .report-header .report-filters .filter-group input[type=date] {
  width: 96px;
  min-width: 0;
  height: 24px;
  padding: 0 5px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: var(--primary-color);
  appearance: none;
  -webkit-appearance: none;
}
body main #content .report-container .report-header .report-filters .filter-group input[type=date]:focus {
  border: none;
  background: transparent;
  box-shadow: none;
  outline: none;
}
body main #content .report-container .report-header .report-filters .filter-group input[type=date] {
  /* أيقونة التقويم الأصلية: مصغّرة وبشفافية خفيفة */
}
body main #content .report-container .report-header .report-filters .filter-group input[type=date]::-webkit-calendar-picker-indicator {
  margin: 0;
  padding: 0;
  opacity: 0.55;
  transform: scale(0.85);
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
body main #content .report-container .report-header .report-filters .filter-group input[type=date]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  transform: scale(0.95);
}
body main #content .report-container .report-header .report-filters .btn-refresh {
  padding: 6px 25px;
  background: var(--primary-fill);
  color: var(--text-on-accent);
  border: none;
  border-radius: 7px;
  cursor: pointer;
  font-weight: 700;
  transition: 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
}
body main #content .report-container .report-header .report-filters .btn-refresh:hover {
  background: var(--primary-fill-hover);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
body main #content .report-container .report-header .report-filters {
  /* زر الطباعة داخل الرأس بنفس ارتفاع زر التحديث */
}
body main #content .report-container .report-header .report-filters .btn-print {
  padding: 6px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
body main #content .report-container {
  /* الشاشات الضيقة: يعود الرأس إلى عمود واحد (العنوان ثم الأدوات) */
}
@media screen and (max-width: 900px) {
  body main #content .report-container .report-header {
    grid-template-columns: minmax(0, 1fr);
  }
}
body main #content .report-container {
  /* 🖨️ الطباعة/PDF: رأس بعمود واحد كامل العرض مع شريحة الفترة المطبَّقة */
}
@media print {
  body main #content .report-container .report-header {
    grid-template-columns: minmax(0, 1fr);
  }
  body main #content .report-container .report-header .header-title {
    display: block;
  }
  body main #content .report-container .report-header .header-title h2 {
    margin-bottom: 4px;
  }
  body main #content .report-container .report-header .header-title p {
    margin: 0 0 2px;
  }
  body main #content .report-container .report-header .period-badge {
    display: inline-flex !important;
  }
}
body main #content .report-container .card {
  background: var(--surface-color);
  border-radius: 16px;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 20px var(--shadow-color);
  padding: 20px;
  margin-bottom: 25px;
}
body main #content .report-container .report-filters {
  /* ------------------------------------------------------------------
     🔎 مفتاح «عرض الحسابات التفصيلية بالكامل» — أعلى الجدول:
     يستبدل الحسابات التحليلية المجمّعة (العملاء، الموردين، البنوك،
     الصناديق، الشركاء) بصفوف بنودها التفصيلية بنفس نمط المجاميع.
     البنية: label.tb-view-toggle > input + track + text + state
     - كل حالات الشكل مشتقّة من :checked عبر CSS فلا يحتاج JS لهيئته.
     - مربّع الاختيار مخفي بصريًا لكنه يبقى قابلًا للتركيز بلوحة المفاتيح.
     ------------------------------------------------------------------ */
}
body main #content .report-container .report-filters .tb-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: center;
  padding: 5px 12px;
  border-radius: 12px;
  border: 1.5px solid var(--border-color);
  background: var(--input-bg);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body main #content .report-container .report-filters .tb-view-toggle:hover {
  border-color: var(--primary-color);
}
body main #content .report-container .report-filters .tb-view-toggle:focus-within {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px rgba(23, 59, 64, 0.1);
}
body main #content .report-container .report-filters .tb-view-toggle input[type=checkbox] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
body main #content .report-container .report-filters .tb-view-toggle .tb-view-toggle-track {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 20px;
  border-radius: 99px;
  background: var(--border-color);
  transition: background 0.25s ease;
}
body main #content .report-container .report-filters .tb-view-toggle .tb-view-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface-color);
  box-shadow: 0 1px 3px var(--shadow-color);
  transition: inset-inline-start 0.25s ease;
}
body main #content .report-container .report-filters .tb-view-toggle .tb-view-toggle-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
body main #content .report-container .report-filters .tb-view-toggle .tb-view-toggle-text strong {
  font-size: 12px;
  font-weight: 800;
  color: var(--primary-color);
}
body main #content .report-container .report-filters .tb-view-toggle .tb-view-toggle-text small {
  font-size: 10px;
  color: var(--text-color-secondary);
}
body main #content .report-container .report-filters .tb-view-toggle {
  /* وسم الوضع الحالي (نصّه من CSS حسب :checked)
     عرض أدنى ثابت حتى لا يتغيّر عرض العمود عند التبديل */
}
body main #content .report-container .report-filters .tb-view-toggle .tb-view-toggle-state {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
  min-width: 84px;
  text-align: center;
  font-size: 9.5px;
  font-weight: 800;
  background: var(--surface-muted);
  color: var(--text-color-secondary);
  transition: background 0.2s ease, color 0.2s ease;
}
body main #content .report-container .report-filters .tb-view-toggle .tb-view-toggle-state::after {
  content: "مجمّع";
}
body main #content .report-container .report-filters .tb-view-toggle input:checked ~ .tb-view-toggle-track {
  background: var(--accent-fill);
}
body main #content .report-container .report-filters .tb-view-toggle input:checked ~ .tb-view-toggle-track::after {
  inset-inline-start: 20px;
}
body main #content .report-container .report-filters .tb-view-toggle input:checked ~ .tb-view-toggle-state {
  background: var(--accent-soft);
  color: var(--primary-color);
}
body main #content .report-container .report-filters .tb-view-toggle input:checked ~ .tb-view-toggle-state::after {
  content: "تفصيلي بالكامل";
}
body main #content .report-container .report-filters .tb-view-toggle {
  /* 🗂️ مفتاح «العرض حسب الأقسام» محور مختلف عن مفتاح التفصيل
     ⇒ نصّ حالة خاص به (قائمة واحدة ⇄ حسب الأقسام) */
}
body main #content .report-container .report-filters .tb-view-toggle.tb-toggle-grouped .tb-view-toggle-state::after {
  content: "قائمة واحدة";
}
body main #content .report-container .report-filters .tb-view-toggle.tb-toggle-grouped input:checked ~ .tb-view-toggle-state::after {
  content: "حسب الأقسام";
}
body main #content .report-container .report-filters .tb-view-toggle {
  /* لا توجد حسابات تحليلية في الفترة ⇒ المفتاح معطَّل */
}
body main #content .report-container .report-filters .tb-view-toggle.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
body main #content .report-container {
  /* ------------------------------------------------------------------
     🧱 ميزان المراجعة: رأس من سطرين
     1) العنوان بعرض الشاشة كاملًا.
     2) شريط فلترة مقسّم إلى أربعة أعمدة من اليمين:
        حقول التاريخ ← مفاتيح العرض ← تابات التقرير ← زر التطبيق.
     - الفواصل الرأسية تظهر بين الأعمدة فقط (من الثاني فصاعدًا).
     - عند ضيق الشاشة يتحوّل الشريط إلى شبكة عمودين ثم عمود واحد.
     ------------------------------------------------------------------ */
}
body main #content .report-container.trial-balance-report .report-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  /* 1) العنوان: سطر كامل العرض */
}
body main #content .report-container.trial-balance-report .report-header .header-title {
  width: 100%;
  min-width: 0;
}
body main #content .report-container.trial-balance-report {
  /* ℹ️ توضيح نطاق العرض: يفصل بين الأرصدة التراكمية وحركة الفترة.
     تاريخ البداية لا يؤثر في التابين الأول والثاني (عرض تراكمي
     من أول قيد حتى تاريخ النهاية)، وأثره في التاب الثالث فقط. */
}
body main #content .report-container.trial-balance-report .report-scope-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--border-color);
  color: var(--text-color-secondary);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.85;
}
body main #content .report-container.trial-balance-report .report-scope-note i {
  flex: 0 0 auto;
  margin-top: 4px;
  font-size: 0.72rem;
  color: var(--accent-color);
}
body main #content .report-container.trial-balance-report .report-scope-note strong {
  color: var(--text-color-primary);
  font-weight: 800;
}
body main #content .report-container.trial-balance-report {
  /* 2) شريط الفلترة: لوحة خفيفة تجمع الأعمدة الأربعة */
}
body main #content .report-container.trial-balance-report .report-header .report-filters {
  min-width: 0;
  padding: 8px 12px;
  background: var(--surface-muted);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}
body main #content .report-container.trial-balance-report .report-header .report-filters .filter-row {
  display: grid;
  grid-template-columns: auto auto auto auto;
  justify-content: space-between;
  align-items: stretch;
  gap: 0 14px;
}
body main #content .report-container.trial-balance-report .report-header .report-filters {
  /* فاصل رأسي بين كل عمود والذي يسبقه (RTL: على يمين العمود) */
}
body main #content .report-container.trial-balance-report .report-header .report-filters .filter-row > * + * {
  border-inline-start: 1px solid var(--border-color);
  padding-inline-start: 14px;
}
body main #content .report-container.trial-balance-report .report-header .report-filters {
  /* عمود عام: يتمركز رأسيًا ويملأ ارتفاع الشريط ليظهر الفاصل كاملًا */
}
body main #content .report-container.trial-balance-report .report-header .report-filters .tb-filter-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
body main #content .report-container.trial-balance-report .report-header .report-filters {
  /* العمود 1: حقلا التاريخ متراكبان */
}
body main #content .report-container.trial-balance-report .report-header .report-filters .tb-filter-dates .date-fields {
  gap: 6px;
}
body main #content .report-container.trial-balance-report .report-header .report-filters {
  /* العمود 2: مفتاحا العرض فوق بعضهما */
}
body main #content .report-container.trial-balance-report .report-header .report-filters .tb-header-toggles {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
body main #content .report-container.trial-balance-report .report-header .report-filters .tb-header-toggles .tb-view-toggle {
  width: 100%;
  align-self: stretch;
}
body main #content .report-container.trial-balance-report .report-header .report-filters .tb-header-toggles .tb-view-toggle .tb-view-toggle-text {
  flex: 1 1 auto;
  min-width: 0;
}
body main #content .report-container.trial-balance-report .report-header .report-filters {
  /* العمود 3: تابات التقرير — عمودية داخل عمودها (بلا كسر صفوف)
     ارتفاعها ≈ ارتفاع المفتاحين فيبقى الشريط متناسقًا */
}
body main #content .report-container.trial-balance-report .report-header .report-filters .tb-filter-tabs .report-tabs-bar {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
body main #content .report-container.trial-balance-report .report-header .report-filters .tb-filter-tabs .report-tabs-bar .report-tab-btn {
  flex: 0 0 auto;
  justify-content: flex-start;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 11.5px;
  gap: 6px;
  white-space: nowrap;
}
body main #content .report-container.trial-balance-report .report-header .report-filters .tb-filter-tabs .report-tabs-bar .report-tab-btn i {
  font-size: 12px;
}
body main #content .report-container.trial-balance-report .report-header .report-filters {
  /* العمود 4: زر تطبيق الفلترة */
}
body main #content .report-container.trial-balance-report .report-header .report-filters .tb-filter-apply .btn-refresh {
  width: 100%;
  justify-content: center;
  white-space: nowrap;
}
body main #content .report-container.trial-balance-report {
  /* 📱 شاشات متوسطة: عمودان × صفّان (التاريخان والمفتاحان أعلى، التابات والزر أسفلهما) */
}
@media screen and (max-width: 1199px) {
  body main #content .report-container.trial-balance-report .report-header .report-filters .filter-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "dates toggles" "tabs  apply";
    gap: 10px 14px;
  }
  body main #content .report-container.trial-balance-report .report-header .report-filters .filter-row > * + * {
    border-inline-start: none;
    padding-inline-start: 0;
  }
  body main #content .report-container.trial-balance-report .report-header .report-filters .tb-filter-dates {
    grid-area: dates;
  }
  body main #content .report-container.trial-balance-report .report-header .report-filters .tb-header-toggles {
    grid-area: toggles;
  }
  body main #content .report-container.trial-balance-report .report-header .report-filters .tb-filter-tabs {
    grid-area: tabs;
    border-top: 1px solid var(--border-color);
    padding-top: 10px;
    /* عمود عريض هنا ⇒ التابات أفقية بلا كسر */
  }
  body main #content .report-container.trial-balance-report .report-header .report-filters .tb-filter-tabs .report-tabs-bar {
    flex-direction: row;
    flex-wrap: wrap;
  }
  body main #content .report-container.trial-balance-report .report-header .report-filters .tb-filter-tabs .report-tabs-bar .report-tab-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
  body main #content .report-container.trial-balance-report .report-header .report-filters .tb-filter-apply {
    grid-area: apply;
    border-top: 1px solid var(--border-color);
    padding-top: 10px;
  }
}
body main #content .report-container.trial-balance-report {
  /* 📱 شاشات ضيقة: عمود واحد بالترتيب نفسه */
}
@media screen and (max-width: 700px) {
  body main #content .report-container.trial-balance-report .report-header .report-filters .filter-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "dates" "toggles" "tabs" "apply";
    gap: 10px;
  }
  body main #content .report-container.trial-balance-report .report-header .report-filters .filter-row > * + * {
    border-inline-start: none;
    padding-inline-start: 0;
  }
  body main #content .report-container.trial-balance-report .report-header .report-filters .tb-filter-tabs,
  body main #content .report-container.trial-balance-report .report-header .report-filters .tb-filter-apply {
    border-top: 1px solid var(--border-color);
    padding-top: 10px;
  }
  body main #content .report-container.trial-balance-report .report-header .report-filters {
    /* المفتاحان بعرضهما الطبيعي (لا يتمدّدان على عرض العمود) */
  }
  body main #content .report-container.trial-balance-report .report-header .report-filters .tb-header-toggles {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  body main #content .report-container.trial-balance-report .report-header .report-filters .tb-header-toggles .tb-view-toggle {
    width: auto;
    flex: 0 1 auto;
  }
  body main #content .report-container.trial-balance-report .report-header .report-filters {
    /* زر التطبيق: زر مضغوط في بداية العمود لا شريط ممتد */
  }
  body main #content .report-container.trial-balance-report .report-header .report-filters .tb-filter-apply .btn-refresh {
    width: auto;
    min-width: 160px;
    align-self: flex-start;
  }
}
body main #content .report-container .report-table-wrapper {
  overflow-x: auto;
}
body main #content .report-container .report-table-wrapper .report-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
body main #content .report-container .report-table-wrapper .report-table thead {
  background: var(--surface-muted);
}
body main #content .report-container .report-table-wrapper .report-table thead th {
  padding: 4px 10px;
  font-size: 11px;
  color: var(--primary-color);
  border-bottom: 2px solid var(--border-color);
  font-weight: 800;
}
body main #content .report-container .report-table-wrapper .report-table tbody td {
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text-color-primary);
  text-align: center;
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}
body main #content .report-container .report-table-wrapper .report-table tbody td:nth-last-child(1) {
  border-left: 1px solid var(--border-color);
}
body main #content .report-container .report-table-wrapper .report-table tbody tr:hover {
  background: var(--hover-background);
}
body main #content .report-container .report-table-wrapper .report-table tbody .name-cell {
  text-align: right;
  padding-right: 15px;
}
body main #content .report-container .report-table-wrapper .report-table tbody .name-cell .account-name-main {
  font-weight: 700;
  line-height: 1.2;
}
body main #content .report-container .report-table-wrapper .report-table tbody .name-cell .account-note-sub {
  font-size: 10px;
  opacity: 0.5;
  font-weight: 500;
  margin-top: 2px;
  color: var(--text-color-secondary);
}
body main #content .report-container .report-table-wrapper .report-table .total-row {
  background: var(--surface-muted);
  font-weight: 900;
  text-align: center;
  border-top: 2px solid var(--primary-color);
}
body main #content .report-container .report-table-wrapper .report-table .total-row td {
  border: none;
  padding: 6px 10px;
  font-size: 13px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-color-primary);
}
body main #content .report-container .report-table-wrapper .report-table .total-row #totalDebit,
body main #content .report-container .report-table-wrapper .report-table .total-row #totalCredit,
body main #content .report-container .report-table-wrapper .report-table .total-row #grandBalance,
body main #content .report-container .report-table-wrapper .report-table .total-row #text-center {
  text-align: center;
  color: var(--text-color-primary);
}
body main #content .report-container .report-table-wrapper .code-cell {
  font-family: "JetBrains Mono", monospace;
  font-weight: 800;
  color: var(--secondary-color);
  font-size: 11px;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
}
body main #content .report-container .report-table-wrapper .amount-cell {
  text-align: center;
  font-weight: 400;
  font-family: ِ "Arial", "JetBrains Mono", monospace;
  font-size: 14px;
}
body main #content .report-container .report-table-wrapper .debit {
  color: var(--success-color);
}
body main #content .report-container .report-table-wrapper .credit {
  color: var(--danger-color);
}
body main #content .report-container .report-table-wrapper .balance {
  color: var(--warning-color);
}
body main #content .report-container .report-table-wrapper .badge {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 800;
}
body main #content .report-container .report-table-wrapper .badge.debit-status {
  background: var(--success-soft);
  color: var(--success-color);
}
body main #content .report-container .report-table-wrapper .badge.credit-status {
  background: var(--danger-soft);
  color: var(--danger-color);
}
body main #content .report-container .report-table-wrapper {
  /* ---------------- 🔎 عرض الحسابات التفصيلية بالكامل ---------------- */
  /* 🏷️ صفّ تعريف المجموعة (رأس كل مجموعة): كود الحساب ثم اسمه التعريفي فقط
     بلا خلفية ولا حدود ولا تفاعل — ليبل بشريط رفيع يمتد إلى نهاية الصف.
     ليس صف بيانات: لا يُبرَز عند المرور بالمؤشر كما تفعل صفوف الجدول
     (المُحدِّد يحمل .report-table ليغلب قاعدة الهوفر العامة بأولوية أعلى). */
}
body main #content .report-container .report-table-wrapper .report-table tbody tr.tb-group-row:hover {
  background: transparent;
}
body main #content .report-container .report-table-wrapper .report-table tbody tr.tb-group-row td.tb-group-cell {
  padding: 0;
  text-align: start;
  background: transparent;
  border: none;
}
body main #content .report-container .report-table-wrapper .report-table tbody tr.tb-group-row .tb-group-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  /* خط رفيع بجانب الكلمة، متمركز رأسيًا، يمتد إلى نهاية الصف */
}
body main #content .report-container .report-table-wrapper .report-table tbody tr.tb-group-row .tb-group-inner::after {
  content: "";
  flex: 1 1 auto;
  min-width: 12px;
  height: 1px;
  background: var(--border-color);
}
body main #content .report-container .report-table-wrapper .report-table tbody tr.tb-group-row .tb-group-code {
  flex: 0 0 auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-color-secondary);
}
body main #content .report-container .report-table-wrapper .report-table tbody tr.tb-group-row .tb-group-title {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-color-secondary);
}
body main #content .report-container .report-table-wrapper {
  /* صفوف البنود التفصيلية بنفس نمط صفوف المجاميع (نفس الأعمدة والحجم)،
     مع تمييز خفيف: كود الحساب الفرعي باهت + ملاحظة «تفصيل ...» أسفل الاسم. */
}
body main #content .report-container .report-table-wrapper tbody tr.tb-row-detail .code-cell {
  opacity: 0.75;
}
body main #content .report-container .report-table-wrapper {
  /* بند «غير موزّع»: يوضّح الفرق حتى يبقى المجموع مطابقًا لإجمالي الحساب */
}
body main #content .report-container .report-table-wrapper tbody tr.tb-row-remainder .code-cell,
body main #content .report-container .report-table-wrapper tbody tr.tb-row-remainder .name-cell .account-name-main {
  font-style: italic;
}
body main #content .report-container .report-table-wrapper tbody tr.tb-row-remainder > td:first-child {
  box-shadow: inset 3px 0 0 var(--warning-color);
}
body main #content .report-container .report-table-wrapper {
  /* ==========================================================================
     🗂️ العرض حسب الأقسام الرئيسية (كونتينرات ميزان المراجعة)
     - رأس القسم: صف قابل للنقر للطي/الفتح (المنطق في TrialBalanceManager).
     - إجمالي القسم الفرعي: نهاية الكونتينر بخلفية فاتحة.
     - الإجمالي النهائي: إجمالي المدين / إجمالي الدائن بخلفية مميزة.
     ========================================================================== */
}
body main #content .report-container .report-table-wrapper .report-table tbody tr.tb-category-header {
  cursor: pointer;
  user-select: none;
}
body main #content .report-container .report-table-wrapper .report-table tbody tr.tb-category-header:hover {
  background: var(--surface-muted);
}
body main #content .report-container .report-table-wrapper .report-table tbody tr.tb-category-header td.tb-category-cell {
  padding: 10px 12px;
  text-align: start;
  border-top: 2px solid var(--accent-fill);
  border-bottom: 1px solid var(--border-color);
  background: var(--surface-muted);
}
body main #content .report-container .report-table-wrapper .report-table tbody tr.tb-category-header .tb-cat-name {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--primary-color);
}
body main #content .report-container .report-table-wrapper .report-table tbody tr.tb-category-header {
  /* مثلث الطي/الفتح — CSS خالص بلا أيقونات */
}
body main #content .report-container .report-table-wrapper .report-table tbody tr.tb-category-header .tb-cat-chevron {
  display: inline-block;
  width: 0;
  height: 0;
  margin-inline-end: 8px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-inline-start: 7px solid var(--accent-fill);
  transition: transform 0.15s ease;
}
body main #content .report-container .report-table-wrapper .report-table tbody tr.tb-category-header.tb-collapsed .tb-cat-chevron {
  transform: rotate(-90deg);
}
body main #content .report-container .report-table-wrapper {
  /* إجمالي القسم الفرعي (نهاية الكونتينر) */
}
body main #content .report-container .report-table-wrapper .report-table tbody tr.tb-category-total td {
  background: color-mix(in srgb, var(--surface-muted) 55%, transparent);
  font-weight: 700;
}
body main #content .report-container .report-table-wrapper .report-table tbody tr.tb-category-total td .account-name-main,
body main #content .report-container .report-table-wrapper .report-table tbody tr.tb-category-total td.amount-cell {
  font-weight: 800;
  color: var(--primary-color);
}
body main #content .report-container .report-table-wrapper {
  /* الإجمالي النهائي (إجمالي المدين / إجمالي الدائن) */
}
body main #content .report-container .report-table-wrapper .report-table tbody tr.tb-grand-total td {
  background: var(--accent-fill);
  color: #fff;
  font-weight: 800;
  border-top: 2px solid var(--primary-color);
}
body main #content .report-container .report-table-wrapper .report-table tbody tr.tb-grand-total td .account-name-main {
  color: #fff;
  font-size: 13px;
}
body main #content .report-container .report-table-wrapper .report-table tbody tr.tb-grand-total td .badge {
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}
body main #content .report-container .report-table-wrapper {
  /* صفوف مخفية عند طي الكونتينر */
}
body main #content .report-container .report-table-wrapper .report-table tr.tb-row-hidden {
  display: none;
}
body main #content .report-container .btn-print {
  padding: 8px 18px;
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--primary-color);
  border: 1px solid var(--border-color);
  cursor: pointer;
  font-weight: 700;
}
body main #content .report-container .btn-print:hover {
  background: var(--accent-soft);
}
body main #content .report-container .report-tabs-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  background: var(--sidebar-bg, #ffffff);
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--border-color, #e2e8f0);
  box-shadow: 0 4px 20px var(--shadow-color, rgba(15, 23, 42, 0.04));
}
body main #content .report-container .report-tabs-bar .report-tab-btn {
  flex: 1;
  padding: 12px 20px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-color-secondary, #64748b);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
body main #content .report-container .report-tabs-bar .report-tab-btn i {
  font-size: 16px;
  color: var(--text-color-secondary, #64748b);
  transition: all 0.25s ease;
}
body main #content .report-container .report-tabs-bar .report-tab-btn:hover {
  background: var(--surface-muted, #f8fafc);
  color: var(--primary-color, #1272B8);
}
body main #content .report-container .report-tabs-bar .report-tab-btn.active {
  background: var(--primary-fill);
  color: var(--text-on-accent);
  box-shadow: 0 4px 15px rgba(18, 114, 184, 0.25);
}
body main #content .report-container .report-tabs-bar .report-tab-btn.active i {
  color: var(--text-on-accent);
}
body main #content {
  /* 💸 Income Statement Specific Styles */
}
body main #content .income-statement-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 25px;
}
@media (max-width: 992px) {
  body main #content .income-statement-grid {
    grid-template-columns: 1fr;
  }
}
body main #content .income-statement-grid .statement-section {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
body main #content .income-statement-grid .statement-section .section-title {
  padding: 15px 20px;
  font-weight: 800;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
body main #content .income-statement-grid .statement-section .section-title.success {
  background: var(--success-soft);
  color: var(--success-color);
  border-bottom: 2px solid var(--success-soft);
}
body main #content .income-statement-grid .statement-section .section-title.danger {
  background: var(--danger-soft);
  color: var(--danger-color);
  border-bottom: 2px solid var(--danger-soft);
}
body main #content .income-statement-grid .statement-section .section-table {
  flex: 1;
  padding: 10px;
  min-height: 150px;
}
body main #content .income-statement-grid .statement-section .section-table table {
  width: 100%;
  border-collapse: collapse;
}
body main #content .income-statement-grid .statement-section .section-table table th {
  text-align: right;
  font-size: 11px;
  color: var(--text-color-secondary);
  padding: 8px;
  border-bottom: 1px solid var(--border-color);
}
body main #content .income-statement-grid .statement-section .section-table table td {
  padding: 10px 8px;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px dashed var(--border-color);
}
body main #content .income-statement-grid .statement-section .section-footer {
  padding: 15px 20px;
  background: var(--surface-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
body main #content .income-statement-grid .statement-section .section-footer span {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.7;
}
body main #content .income-statement-grid .statement-section .section-footer strong {
  font-size: 18px;
  font-weight: 800;
  font-family: "JetBrains Mono", monospace;
}
body main #content .net-profit-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 40px;
  transition: all 0.3s ease;
  border-width: 2px;
}
body main #content .net-profit-card.profit {
  background: var(--success-fill);
  color: var(--text-on-accent);
  border-color: var(--success-fill);
  box-shadow: 0 10px 30px var(--shadow-color);
}
body main #content .net-profit-card.loss {
  background: var(--danger-fill);
  color: var(--text-on-accent);
  border-color: var(--danger-fill);
  box-shadow: 0 10px 30px var(--shadow-color);
}
body main #content .net-profit-card .profit-info h3 {
  font-size: 20px;
  margin-bottom: 5px;
  font-weight: 800;
}
body main #content .net-profit-card .profit-info p {
  font-size: 13px;
  opacity: 0.8;
}
body main #content .net-profit-card .profit-amount {
  text-align: left;
}
body main #content .net-profit-card .profit-amount span {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.8;
  margin-bottom: 5px;
}
body main #content .net-profit-card .profit-amount strong {
  font-size: 32px;
  font-weight: 900;
  font-family: "JetBrains Mono", monospace;
}
body main #content {
  /* 🌊 Cash Flow Specific Styles */
}
body main #content .cash-flow-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 25px;
}
@media (max-width: 768px) {
  body main #content .cash-flow-summary-grid {
    grid-template-columns: 1fr;
  }
}
body main #content .cash-flow-summary-grid .summary-card {
  background: var(--surface-color);
  border-radius: 14px;
  border: 1px solid var(--border-color);
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: 0 4px 12px var(--shadow-color);
  border-bottom-width: 4px;
}
body main #content .cash-flow-summary-grid .summary-card .icon {
  font-size: 28px;
  opacity: 0.8;
}
body main #content .cash-flow-summary-grid .summary-card .details {
  display: flex;
  flex-direction: column;
}
body main #content .cash-flow-summary-grid .summary-card .details span {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-color-secondary);
}
body main #content .cash-flow-summary-grid .summary-card .details strong {
  font-size: 20px;
  font-weight: 800;
  font-family: "JetBrains Mono", monospace;
}
body main #content .cash-flow-summary-grid .summary-card.inflow {
  border-bottom-color: var(--success-color);
}
body main #content .cash-flow-summary-grid .summary-card.inflow .icon {
  color: var(--success-color);
}
body main #content .cash-flow-summary-grid .summary-card.outflow {
  border-bottom-color: var(--danger-color);
}
body main #content .cash-flow-summary-grid .summary-card.outflow .icon {
  color: var(--danger-color);
}
body main #content .cash-flow-summary-grid .summary-card.net {
  border-bottom-color: var(--primary-color);
}
body main #content .cash-flow-summary-grid .summary-card.net .icon {
  color: var(--primary-color);
}
body main #content .type-badge {
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 800;
  background: var(--surface-muted);
  color: var(--text-color-secondary);
}
body main #content {
  /* 🏦 Balance Sheet Specific Styles */
}
body main #content .balance-sheet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 992px) {
  body main #content .balance-sheet-grid {
    grid-template-columns: 1fr;
  }
}
body main #content .balance-sheet-grid .bs-side-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
body main #content .balance-sheet-grid .bs-side {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
body main #content .balance-sheet-grid .bs-side .side-header {
  padding: 12px 20px;
  font-weight: 800;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
body main #content .balance-sheet-grid .bs-side .side-header.assets {
  background: var(--success-soft);
  color: var(--success-color);
  border-bottom: 2px solid var(--success-soft);
}
body main #content .balance-sheet-grid .bs-side .side-header.liabilities {
  background: var(--danger-soft);
  color: var(--danger-color);
  border-bottom: 2px solid var(--danger-soft);
}
body main #content .balance-sheet-grid .bs-side .side-header.equity {
  background: var(--info-soft);
  color: var(--primary-color);
  border-bottom: 2px solid var(--info-soft);
}
body main #content .balance-sheet-grid .bs-side .side-content {
  flex: 1;
  padding: 10px;
  min-height: 100px;
}
body main #content .balance-sheet-grid .bs-side .side-content table {
  width: 100%;
  border-collapse: collapse;
}
body main #content .balance-sheet-grid .bs-side .side-content table td {
  padding: 8px;
  border-bottom: 1px dashed var(--border-color);
  font-size: 12.5px;
}
body main #content .balance-sheet-grid .bs-side .side-content table .acc-name {
  font-weight: 700;
  color: var(--text-color-primary);
}
body main #content .balance-sheet-grid .bs-side .side-content table .acc-code {
  font-size: 10px;
  opacity: 0.5;
  font-family: monospace;
}
body main #content .balance-sheet-grid .bs-side .side-footer {
  padding: 12px 20px;
  background: var(--surface-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
body main #content .balance-sheet-grid .bs-side .side-footer span {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.8;
}
body main #content .balance-sheet-grid .bs-side .side-footer strong {
  font-size: 18px;
  font-weight: 800;
  font-family: "JetBrains Mono", monospace;
}
body main #content .balance-sheet-grid .total-combined-card {
  background: var(--primary-fill);
  color: var(--text-on-accent);
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(23, 59, 64, 0.2);
}
body main #content .balance-sheet-grid .total-combined-card span {
  font-size: 14px;
  font-weight: 700;
}
body main #content .balance-sheet-grid .total-combined-card strong {
  font-size: 22px;
  font-weight: 900;
  font-family: "JetBrains Mono", monospace;
}
body main #content .balance-indicator-bar {
  padding: 15px 30px;
  display: flex;
  align-items: center;
  gap: 15px;
  font-weight: 700;
  font-size: 14px;
}
body main #content .balance-indicator-bar.balanced {
  border-right: 5px solid var(--success-color);
  color: var(--success-color);
  background: var(--success-soft);
}
body main #content .balance-indicator-bar.unbalanced {
  border-right: 5px solid var(--danger-color);
  color: var(--danger-color);
  background: var(--danger-soft);
}
body main #content {
  /* 🏷️ Global Category Badges & Utility Classes */
}
body main #content .category-badge {
  display: inline-block;
  padding: 2px 5px;
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 400;
  white-space: nowrap;
  min-width: fit-content;
}
body main #content .category-badge.default-badge {
  background: var(--surface-muted, #f0f4f8);
  color: var(--text-color-secondary, #64748b);
  border: 1px solid var(--border-color, #e2e8f0);
}
body main #content .category-badge.badge-asset {
  background: var(--success-soft);
  color: var(--success-color);
  border: 1px solid var(--success-color);
}
body main #content .category-badge.badge-liability {
  background: rgba(239, 68, 68, 0.12);
  color: var(--danger-color);
  border: 1px solid var(--danger-color);
}
body main #content .category-badge.badge-equity {
  background: rgba(6, 182, 212, 0.12);
  color: var(--info-color);
  border: 1px solid var(--info-color);
}
body main #content .category-badge.badge-revenue {
  background: rgba(245, 158, 11, 0.12);
  color: var(--warning-color);
  border: 1px solid var(--warning-color);
}
body main #content .category-badge.badge-expense {
  background: rgba(236, 72, 153, 0.12);
  color: var(--pink-color);
  border: 1px solid var(--pink-color);
}
body main #content .text-success {
  color: var(--success-color) !important;
}
body main #content .text-danger {
  color: var(--danger-color) !important;
}
body main #content .text-info {
  color: var(--info-color) !important;
}
body main #content .text-warning {
  color: var(--warning-color) !important;
}
body main #content .text-pink {
  color: var(--pink-color) !important;
}
body main #content .text-muted {
  color: var(--text-color-secondary, #64748b) !important;
}
body main #content .font-weight-bold {
  font-weight: 800 !important;
}
body main #content {
  /* 🔍 Search Accounts & Statement Styling */
}
body main #content .search-filter-card {
  padding: 8px 12px;
  margin-bottom: 10px;
}
body main #content .search-filter-card .search-bar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
body main #content .search-filter-card .search-bar-row .search-input-group {
  position: relative;
  flex: 1;
  min-width: 280px;
}
body main #content .search-filter-card .search-bar-row .search-input-group .search-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-color-secondary);
  font-size: 1.05rem;
}
body main #content .search-filter-card .search-bar-row .search-input-group input {
  padding: 10px 48px 10px 10px;
  font-size: 0.98rem;
  border-radius: 12px;
  border: 0;
  background-color: var(--border-color);
  width: 100%;
  color: var(--text-color-primary);
}
body main #content .search-filter-card .search-bar-row .search-input-group .clear-btn {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-color-secondary);
  cursor: pointer;
  font-size: 1rem;
}
body main #content .search-filter-card .search-bar-row .search-input-group .clear-btn:hover {
  color: var(--danger-color);
}
body main #content .search-filter-card .search-bar-row .filter-switches-group {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
body main #content .search-filter-card .search-bar-row .filter-switches-group .switch-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-color-primary);
}
body main #content .search-filter-card .category-tabs-wrapper {
  display: inline-block;
  white-space: nowrap;
  overflow-y: auto;
  border-top: 1px solid var(--border-color);
  padding-top: 10px;
}
body main #content .search-filter-card .category-tabs-wrapper .category-tab {
  padding: 10px 15px;
  margin: 0 2.5px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--surface-muted);
  color: var(--text-color-primary);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}
body main #content .search-filter-card .category-tabs-wrapper .category-tab:hover {
  background: var(--hover-background);
  color: var(--primary-color);
  border-color: var(--primary-color);
}
body main #content .search-filter-card .category-tabs-wrapper .category-tab.active {
  background: var(--primary-fill);
  color: var(--text-on-accent);
  border-color: var(--primary-color);
}
body main #content .search-filter-card .category-tabs-wrapper .category-tab.active i {
  color: var(--text-on-accent) !important;
}
body main #content {
  /* 📊 KPI Cards for Account Statement */
}
body main #content .kpi-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin-bottom: 5px;
}
body main #content .kpi-grid-container .kpi-card {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 25px var(--shadow-color);
  transition: transform 0.2s ease;
}
body main #content .kpi-grid-container .kpi-card:hover {
  transform: translateY(-3px);
}
body main #content .kpi-grid-container .kpi-card.period-card {
  border-inline-start: 3px solid var(--accent-color);
}
body main #content .kpi-grid-container .kpi-card .kpi-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--surface-muted);
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  color: var(--primary-color);
}
body main #content .kpi-grid-container .kpi-card .kpi-data {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body main #content .kpi-grid-container .kpi-card .kpi-data .kpi-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-color-secondary);
}
body main #content .kpi-grid-container .kpi-card .kpi-data .kpi-amount {
  font-size: 1rem;
  font-weight: 700;
  font-family: monospace;
  color: var(--primary-color);
}
body main #content .kpi-grid-container .kpi-card .kpi-data .kpi-type {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-color);
}
body main #content {
  /* 📋 Tables Styling — شبكة حدود كاملة داخل إطار البطاقة:
     خط أفقي بين الصفوف (border-bottom) + خط رأسي بين الأعمدة
     (border-inline-end). الحافة الخارجية الأخيرة يوفّرها إطار
     .card-box المحيط بالجدول ⇒ لا خطوط مزدوجة على الحدود.
     على الموبايل (table-cards) يُلغى الخط الرأسي في _mobiles.scss. */
}
body main #content .professional-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
body main #content .professional-table th, body main #content .professional-table td {
  padding: 6px 3px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-color);
  /* فاصل الأعمدة: خط رأسي واحد بين كل عمودين */
  border-inline-end: 1px solid var(--border-color);
}
body main #content .professional-table {
  /* العمود الأخير: بلا فاصل رأسي (إطار البطاقة يوفّر الحافة) */
}
body main #content .professional-table th:last-child,
body main #content .professional-table td:last-child {
  border-inline-end: 0;
}
body main #content .professional-table th {
  background: var(--header-bg);
  color: var(--primary-color);
  font-weight: 800;
  font-size: 0.88rem;
  white-space: nowrap;
}
body main #content .professional-table td {
  font-size: 0.9rem;
  color: var(--text-color-primary);
}
body main #content .professional-table tr:last-child td {
  border-bottom: none;
}
body main #content .professional-table tr:hover td {
  background: var(--hover-background);
}
body main #content .professional-table .acc-code-badge {
  font-family: monospace;
  font-weight: 400;
  color: var(--primary-color);
  background: var(--surface-muted);
  padding: 4px;
  border-radius: 6px;
}
body main #content .professional-table .parent-path {
  font-size: 0.8rem;
  color: var(--text-color-secondary);
  font-weight: 600;
}
body main #content .professional-table .entries-badge {
  font-size: 0.78rem;
  padding: 4px 6px;
  border-radius: 20px;
  background: var(--surface-muted);
  color: var(--primary-color);
  font-weight: 700;
}
body main #content .professional-table .entry-num-badge {
  font-family: monospace;
  font-weight: 800;
  color: var(--primary-color);
  text-decoration: none;
}
body main #content .professional-table .sub-detail-tag {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  background: var(--surface-muted);
  color: var(--accent-color);
  font-weight: 700;
}
body main #content {
  /* Quick Add Styles */
}
body main #content .quick-add-container {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
}
body main #content .quick-add-container .quick-add-card {
  background: var(--surface-color);
  border-radius: 24px;
  border: 1px solid var(--border-color);
  box-shadow: 0 15px 50px var(--shadow-color);
  overflow: hidden;
}
body main #content .quick-add-container .quick-add-card .card-header-main {
  background: linear-gradient(135deg, var(--primary-fill) 0%, var(--accent-fill) 100%);
  padding: 30px 20px;
  text-align: center;
  color: var(--text-on-accent);
}
body main #content .quick-add-container .quick-add-card .card-header-main h3 {
  font-size: 24px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
body main #content .quick-add-container .quick-add-card .card-header-main h3 i {
  color: var(--accent-color);
}
body main #content .quick-add-container .quick-add-card .card-header-main p {
  opacity: 0.8;
  font-size: 14px;
}
body main #content .quick-add-container .quick-add-card .selection-wrapper {
  padding: 30px;
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border-color);
}
body main #content .quick-add-container .quick-add-card .selection-wrapper .custom-select-wrapper {
  max-width: 500px;
  margin: 0 auto;
}
body main #content .quick-add-container .quick-add-card .selection-wrapper .custom-select-wrapper label {
  display: block;
  margin-bottom: 12px;
  font-weight: 700;
  color: var(--primary-color);
  font-size: 15px;
}
body main #content .quick-add-container .quick-add-card .selection-wrapper .custom-select-wrapper .professional-select {
  width: 100%;
  padding: 10px 15px;
  border-radius: 12px;
  border: 2px solid var(--border-color);
  background: var(--surface-color);
  color: var(--text-color-primary);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  appearance: none;
  background-image: url("svg/chevron-select.svg");
  background-repeat: no-repeat;
  background-position: left 15px center;
  background-size: 18px;
}
body main #content .quick-add-container .quick-add-card .selection-wrapper .custom-select-wrapper .professional-select:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
body main #content .quick-add-container .quick-add-card .dynamic-form-wrapper {
  padding: 40px;
  min-height: 300px;
}
body main #content .quick-add-container .quick-add-card .dynamic-form-wrapper .placeholder-content {
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-color-secondary);
  gap: 20px;
  opacity: 0.5;
}
body main #content .quick-add-container .quick-add-card .dynamic-form-wrapper .placeholder-content i {
  font-size: 40px;
}
body main #content .quick-add-container .quick-add-card .dynamic-form-wrapper .placeholder-content p {
  font-weight: 600;
}
body main #content .quick-add-container .quick-add-card .dynamic-form-wrapper #parentLocationSelect {
  width: 100%;
  padding: 10px 15px;
  border-radius: 12px;
  border: 2px solid var(--border-color);
  background: var(--surface-color);
  color: var(--text-color-primary);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  appearance: none;
  background-image: url("svg/chevron-select.svg");
  background-repeat: no-repeat;
  background-position: left 15px center;
  background-size: 18px;
}
body main #content .quick-add-container .quick-add-card .dynamic-form-wrapper #parentLocationSelect:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
body main #content .quick-add-container .quick-add-card .dynamic-form-wrapper .dynamic-add-form {
  animation: fadeIn 0.5s ease-out;
}
body main #content .quick-add-container .quick-add-card .dynamic-form-wrapper .dynamic-add-form .form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  margin-bottom: 30px;
}
body main #content .quick-add-container .quick-add-card .dynamic-form-wrapper .dynamic-add-form .form-group label {
  display: block;
  margin-bottom: 10px;
  font-weight: 700;
  color: var(--text-color-secondary);
  font-size: 13px;
}
body main #content .quick-add-container .quick-add-card .dynamic-form-wrapper .dynamic-add-form .form-group input, body main #content .quick-add-container .quick-add-card .dynamic-form-wrapper .dynamic-add-form .form-group select, body main #content .quick-add-container .quick-add-card .dynamic-form-wrapper .dynamic-add-form .form-group .professional-select {
  width: 100%;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1.5px solid var(--border-color);
  background: var(--input-bg);
  color: var(--text-color-primary);
  font-size: 15px;
  font-weight: 600;
  transition: all 0.2s ease;
  box-sizing: border-box;
}
body main #content .quick-add-container .quick-add-card .dynamic-form-wrapper .dynamic-add-form .form-group input:focus, body main #content .quick-add-container .quick-add-card .dynamic-form-wrapper .dynamic-add-form .form-group select:focus, body main #content .quick-add-container .quick-add-card .dynamic-form-wrapper .dynamic-add-form .form-group .professional-select:focus {
  outline: none;
  border-color: var(--primary-color);
  background: var(--surface-color);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
body main #content .quick-add-container .quick-add-card .dynamic-form-wrapper .dynamic-add-form .form-group select, body main #content .quick-add-container .quick-add-card .dynamic-form-wrapper .dynamic-add-form .form-group .professional-select {
  cursor: pointer;
  appearance: none;
  background-image: url("svg/chevron-select.svg");
  background-repeat: no-repeat;
  background-position: left 15px center;
  background-size: 18px;
}
body main #content .quick-add-container .quick-add-card .dynamic-form-wrapper .dynamic-add-form .form-group select option, body main #content .quick-add-container .quick-add-card .dynamic-form-wrapper .dynamic-add-form .form-group .professional-select option {
  background: var(--surface-color);
  color: var(--text-color-primary);
  padding: 10px;
  font-weight: 600;
}
body main #content .quick-add-container .quick-add-card .dynamic-form-wrapper .dynamic-add-form .submit-btn {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  margin-top: 20px !important;
  padding: 14px 24px !important;
  background: var(--accent-fill) !important;
  color: var(--text-on-accent) !important;
  border: none !important;
  border-radius: 12px !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.25s ease !important;
}
body main #content .quick-add-container .quick-add-card .dynamic-form-wrapper .dynamic-add-form .submit-btn:hover {
  background: var(--primary-hover, #1d4ed8) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2) !important;
}
body main .bottom-bar {
  position: fixed;
  bottom: -100px;
  left: 5%;
  right: 5%;
  padding: 5px 20px;
  background: var(--background-opacity);
  backdrop-filter: blur(1px);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  box-shadow: 0 10px 40px var(--shadow-color);
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  direction: rtl;
}
@media (max-width: 768px) {
  body main .bottom-bar {
    left: 10px;
    right: 10px;
    padding: 0 15px;
    height: 60px;
  }
}
body main .bottom-bar.is-visible {
  bottom: 5px;
}
@media (max-width: 768px) {
  body main .bottom-bar.is-visible {
    bottom: 5px;
  }
}
body main .bottom-bar .bottom-bar-content {
  width: 100%;
  max-width: 1200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
body main .bottom-bar .bottom-bar-content .global-footer-info {
  display: flex;
  align-items: center;
  gap: 15px;
}
body main .bottom-bar .bottom-bar-content .global-footer-info .copyright {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-color-secondary);
}
body main .bottom-bar .bottom-bar-content .global-footer-links {
  display: flex;
  align-items: center;
  gap: 20px;
}
body main .bottom-bar .bottom-bar-content .global-footer-links a {
  text-decoration: none;
  color: var(--primary-color);
  font-size: 13px;
  font-weight: 700;
  transition: color 0.2s;
}
body main .bottom-bar .bottom-bar-content .global-footer-links a:hover {
  color: var(--accent-color);
}
body main .bottom-bar .bottom-bar-content .global-footer-links a.support-link {
  color: var(--success-color);
}
body main .bottom-bar .bottom-bar-content .global-footer-links a.support-link i {
  font-size: 16px;
}
@media (max-width: 768px) {
  body main .bottom-bar .bottom-bar-content {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  body main .bottom-bar .bottom-bar-content .global-footer-info .copyright {
    font-size: 10px;
  }
  body main .bottom-bar .bottom-bar-content .global-footer-links {
    gap: 10px;
  }
  body main .bottom-bar .bottom-bar-content .global-footer-links a {
    font-size: 11px;
  }
}
body main .bottom-bar .bottom-bar-content .bottom-bar-journal-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 20px;
}
@media (max-width: 768px) {
  body main .bottom-bar .bottom-bar-content .bottom-bar-journal-wrapper {
    flex-direction: column;
    gap: 6px;
  }
}
body main .bottom-bar .bottom-bar-content .bottom-bar-journal-wrapper .entry-summary-card {
  display: flex !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  align-items: center;
  gap: 20px;
}
body main .bottom-bar .bottom-bar-content .bottom-bar-journal-wrapper .entry-summary-card .summary-item {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 6px;
}
body main .bottom-bar .bottom-bar-content .bottom-bar-journal-wrapper .entry-summary-card .summary-item span {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-color-secondary);
}
body main .bottom-bar .bottom-bar-content .bottom-bar-journal-wrapper .entry-summary-card .summary-item strong {
  font-size: 18px;
  font-weight: 800;
}
body main .bottom-bar .bottom-bar-content .bottom-bar-journal-wrapper .entry-summary-card .summary-status {
  padding: 6px 14px;
  font-size: 12px;
  border-radius: 8px;
  font-weight: 700;
}
body main .bottom-bar .bottom-bar-content .bottom-bar-journal-wrapper .entry-summary-card .summary-status.unbalanced {
  background: var(--danger-soft);
  color: var(--danger-color);
  border: 1px solid transparent;
}
body main .bottom-bar .bottom-bar-content .bottom-bar-journal-wrapper .entry-summary-card .summary-status.balanced {
  background: var(--success-soft);
  color: var(--success-color);
  border: 1px solid transparent;
}
body main .bottom-bar .bottom-bar-content .bottom-bar-journal-wrapper .entry-summary-card .summary-status.is-loading {
  background: var(--surface-muted, var(--surface-color));
  color: var(--text-color-secondary);
  border: 1px solid var(--border-color);
}
body main .bottom-bar .bottom-bar-content button {
  padding: 6px 14px;
  border: none;
  border-radius: 12px;
  background: var(--primary-fill);
  color: var(--text-on-accent);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}
body main .bottom-bar .bottom-bar-content button:hover {
  background: var(--accent-fill);
  transform: translateY(-2px);
}
body main .bottom-bar .pagination, body main .bottom-bar .pagination-bar {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
body main .bottom-bar .pagination a, body main .bottom-bar .pagination span, body main .bottom-bar .pagination-bar a, body main .bottom-bar .pagination-bar span {
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--primary-color);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: all 0.2s;
}
body main .bottom-bar .pagination a:hover, body main .bottom-bar .pagination span:hover, body main .bottom-bar .pagination-bar a:hover, body main .bottom-bar .pagination-bar span:hover {
  background: var(--accent-soft);
  transform: translateY(-2px);
}
body main .bottom-bar .pagination a.active, body main .bottom-bar .pagination a.current, body main .bottom-bar .pagination span.active, body main .bottom-bar .pagination span.current, body main .bottom-bar .pagination-bar a.active, body main .bottom-bar .pagination-bar a.current, body main .bottom-bar .pagination-bar span.active, body main .bottom-bar .pagination-bar span.current {
  background: var(--primary-fill);
  color: var(--text-on-accent);
}
body main .bottom-bar .submit-btn, body main .bottom-bar button[type=submit], body main .bottom-bar input[type=submit] {
  margin: 0 !important;
  width: auto !important;
  min-width: 240px;
  padding: 14px 40px !important;
  background: var(--primary-fill);
  color: var(--text-on-accent);
  border: none;
  border-radius: 12px;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 8px 20px rgba(23, 59, 64, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
body main .bottom-bar .submit-btn:hover, body main .bottom-bar button[type=submit]:hover, body main .bottom-bar input[type=submit]:hover {
  background: var(--primary-fill-hover);
  transform: translateY(-3px) scale(1.02);
}
body main .bottom-bar .submit-btn:disabled, body main .bottom-bar button[type=submit]:disabled, body main .bottom-bar input[type=submit]:disabled {
  background: var(--surface-muted);
  color: var(--text-color-secondary);
  cursor: not-allowed;
}
body main .bottom-bar .submit-btn::before, body main .bottom-bar button[type=submit]::before, body main .bottom-bar input[type=submit]::before {
  content: "✓";
  font-size: 18px;
}
body main .toast-container {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(90%, 400px);
  pointer-events: none;
}
body main .toast-container .toast {
  pointer-events: auto;
  background: var(--surface-color);
  padding: 16px 20px;
  border-radius: 12px;
  box-shadow: 0 12px 32px var(--shadow-color);
  display: flex;
  align-items: center;
  gap: 12px;
  direction: rtl;
  animation: toast-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  border: 1px solid var(--border-color);
}
body main .toast-container .toast.is-loading {
  border-right: 4px solid var(--primary-color);
}
body main .toast-container .toast.is-success {
  border-right: 4px solid var(--success-color);
}
body main .toast-container .toast.is-success .toast-icon::before {
  content: "✓";
  color: var(--success-color);
}
body main .toast-container .toast.is-error {
  border-right: 4px solid var(--danger-color);
}
body main .toast-container .toast.is-error .toast-icon::before {
  content: "✕";
  color: var(--danger-color);
}
body main .toast-container .toast .toast-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  font-weight: 900;
}
body main .toast-container .toast .toast-text {
  color: var(--text-color-primary);
  font-size: 14px;
  font-weight: 600;
  flex: 1;
}
body main .toast-container .toast.hiding {
  animation: toast-out 0.3s ease forwards;
}
body main .app-footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 82px;
  padding: 18px 28px;
  border-top: 1px solid var(--border-color);
  background: var(--surface-color);
  color: var(--text-color-secondary);
  direction: rtl;
  font-size: 11px;
}
body main .app-footer .app-footer-brand {
  gap: 10px;
  color: var(--primary-color);
  display: flex;
  align-items: center;
}
body main .app-footer .app-footer-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--primary-fill);
  color: var(--accent-soft);
  font-size: 16px;
  font-weight: 800;
}
body main .app-footer .app-footer-brand strong {
  display: block;
  font-size: 13px;
}
body main .app-footer .app-footer-brand div span {
  margin-top: 2px;
  color: var(--text-color-secondary);
  font-size: 10px;
}
body main .app-footer .app-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}
body main .app-footer .app-footer-links a {
  color: var(--text-color-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}
body main .app-footer .app-footer-links a:hover {
  color: var(--accent-color);
}
body main .app-footer .app-footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px 14px;
  text-align: left;
}
body main .app-footer .app-footer-meta strong {
  color: var(--primary-color);
  font-weight: 800;
}
body main .transport-home {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  padding: 40px clamp(20px, 5vw, 80px);
  color: var(--text-color-primary);
  background: radial-gradient(circle at 0% 0%, var(--surface-muted) 0%, transparent 50%), radial-gradient(circle at 100% 100%, var(--accent-soft) 0%, transparent 50%), var(--background-color);
  display: flex;
  flex-direction: column;
  gap: 60px;
  isolation: isolate;
}
body main .transport-home .transport-home-orbit {
  position: absolute;
  z-index: -1;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.3;
}
body main .transport-home .transport-home-orbit-one {
  width: 600px;
  height: 600px;
  top: -200px;
  right: -100px;
  animation: rotateOrbit 60s linear infinite;
}
body main .transport-home .transport-home-orbit-two {
  width: 400px;
  height: 400px;
  bottom: -100px;
  left: -50px;
  animation: rotateOrbit 40s linear infinite reverse;
}
@keyframes rotateOrbit {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
body main .transport-home .transport-home-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
}
body main .transport-home .transport-home-topbar .transport-brand {
  display: flex;
  align-items: center;
  gap: 15px;
  text-decoration: none;
}
body main .transport-home .transport-home-topbar .transport-brand .transport-brand-mark {
  width: 48px;
  height: 48px;
  background: var(--surface-color);
  display: grid;
  place-items: center;
  border-radius: 14px;
  box-shadow: 0 8px 20px var(--shadow-color);
}
body main .transport-home .transport-home-topbar .transport-brand .transport-brand-mark svg {
  width: 50px;
  height: 50px;
}
body main .transport-home .transport-home-topbar .transport-brand strong {
  display: block;
  font-size: 20px;
  color: var(--primary-color);
}
body main .transport-home .transport-home-topbar .transport-brand small {
  font-size: 11px;
  color: var(--text-color-secondary);
  font-weight: 600;
}
body main .transport-home .transport-home-topbar .transport-home-status {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-color-secondary);
  background: var(--surface-color);
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 8px;
}
body main .transport-home .transport-home-topbar .transport-home-status i {
  width: 8px;
  height: 8px;
  background: var(--success-fill);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--success-soft);
  animation: pulseLive 2s infinite;
}
body main .transport-home .transport-home-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 60px;
  align-items: center;
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
}
@media (max-width: 992px) {
  body main .transport-home .transport-home-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
}
body main .transport-home .transport-home-grid .transport-home-copy .transport-eyebrow {
  color: var(--accent-color);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 20px;
  text-transform: uppercase;
}
body main .transport-home .transport-home-grid .transport-home-copy .transport-welcome {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-color-secondary);
  margin-bottom: 10px;
}
body main .transport-home .transport-home-grid .transport-home-copy h1 {
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 1.15;
  color: var(--primary-color);
  font-weight: 900;
  margin-bottom: 30px;
}
body main .transport-home .transport-home-grid .transport-home-copy h1 em {
  font-style: normal;
  color: var(--accent-color);
  position: relative;
  display: inline-block;
}
body main .transport-home .transport-home-grid .transport-home-copy h1 em::after {
  content: "";
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  height: 8px;
  background: var(--accent-soft);
  z-index: -1;
  opacity: 0.5;
}
body main .transport-home .transport-home-grid .transport-home-copy .transport-home-intro {
  font-size: 18px;
  color: var(--text-color-secondary);
  max-width: 550px;
  line-height: 1.8;
  margin-bottom: 40px;
}
@media (max-width: 992px) {
  body main .transport-home .transport-home-grid .transport-home-copy .transport-home-intro {
    margin: 0 auto 40px;
  }
}
body main .transport-home .transport-home-grid .transport-home-copy .transport-home-actions {
  display: flex;
  gap: 20px;
}
@media (max-width: 992px) {
  body main .transport-home .transport-home-grid .transport-home-copy .transport-home-actions {
    justify-content: center;
  }
}
body main .transport-home .transport-home-grid .transport-home-copy .transport-home-actions .transport-primary-action {
  background: var(--primary-fill);
  color: var(--text-on-accent);
  padding: 16px 32px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 15px;
  transition: all 0.3s;
}
body main .transport-home .transport-home-grid .transport-home-copy .transport-home-actions .transport-primary-action:hover {
  transform: translateY(-5px);
  background: var(--primary-fill-hover);
}
body main .transport-home .transport-home-grid .transport-home-copy .transport-home-actions .transport-secondary-action {
  padding: 16px 24px;
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 700;
  border: 2px solid var(--border-color);
  border-radius: 14px;
}
body main .transport-home .transport-home-grid .transport-home-copy .transport-home-actions .transport-secondary-action:hover {
  background: var(--surface-muted);
}
body main .transport-home .transport-home-grid .accounting-visual-card {
  background: var(--surface-color);
  border-radius: 24px;
  border: 1px solid var(--border-color);
  box-shadow: 0 30px 70px var(--shadow-color);
  padding: 25px;
  direction: rtl;
  transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}
body main .transport-home .transport-home-grid .accounting-visual-card:hover {
  transform: perspective(1000px) rotateY(0) rotateX(0);
}
@media (max-width: 992px) {
  body main .transport-home .transport-home-grid .accounting-visual-card {
    transform: none;
    margin: 0 auto;
    max-width: 500px;
  }
}
body main .transport-home .transport-home-grid .accounting-visual-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--surface-muted);
}
body main .transport-home .transport-home-grid .accounting-visual-card .card-header .title-group {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: var(--primary-color);
}
body main .transport-home .transport-home-grid .accounting-visual-card .card-header .live-pulse {
  font-size: 10px;
  font-weight: 800;
  color: var(--success-color);
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.08);
  padding: 4px 10px;
  border-radius: 100px;
}
body main .transport-home .transport-home-grid .accounting-visual-card .card-header .live-pulse i {
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
  animation: pulseLive 2.5s infinite;
}
body main .transport-home .transport-home-grid .accounting-visual-card .main-chart-wrapper {
  background: var(--input-bg);
  border-radius: 16px;
  padding: 10px;
  position: relative;
  margin-bottom: 20px;
  border: 1px solid var(--border-color);
}
body main .transport-home .transport-home-grid .accounting-visual-card .main-chart-wrapper .professional-chart {
  width: 100%;
  height: auto;
  display: block;
}
body main .transport-home .transport-home-grid .accounting-visual-card .main-chart-wrapper .professional-chart .grid-line {
  stroke: var(--border-color);
  stroke-width: 0.5;
  stroke-dasharray: 4;
}
body main .transport-home .transport-home-grid .accounting-visual-card .main-chart-wrapper .professional-chart .chart-area.income {
  fill: rgba(16, 185, 129, 0.1);
}
body main .transport-home .transport-home-grid .accounting-visual-card .main-chart-wrapper .professional-chart .chart-line {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
}
body main .transport-home .transport-home-grid .accounting-visual-card .main-chart-wrapper .professional-chart .chart-line.income {
  stroke: var(--success-color);
}
body main .transport-home .transport-home-grid .accounting-visual-card .main-chart-wrapper .professional-chart .chart-line.expense {
  stroke: var(--primary-color);
  opacity: 0.6;
  stroke-dasharray: 5;
}
body main .transport-home .transport-home-grid .accounting-visual-card .main-chart-wrapper .professional-chart .scanner-line {
  stroke: var(--accent-color);
  stroke-width: 1;
  opacity: 0.4;
  animation: scanChart 6s linear infinite;
}
@keyframes scanChart {
  0% {
    x1: 0;
    x2: 0;
  }
  100% {
    x1: 400;
    x2: 400;
  }
}
body main .transport-home .transport-home-grid .accounting-visual-card .visual-status-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
body main .transport-home .transport-home-grid .accounting-visual-card .visual-status-row .status-spark {
  padding: 10px;
  background: var(--surface-muted);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body main .transport-home .transport-home-grid .accounting-visual-card .visual-status-row .status-spark .spark-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-color-secondary);
}
body main .transport-home .transport-home-grid .accounting-visual-card .visual-status-row .status-spark .sparkline {
  width: 100%;
  height: 30px;
}
body main .transport-home .transport-home-grid .accounting-visual-card .ticker-footer {
  background: var(--primary-fill);
  margin: 0 -25px -25px;
  padding: 10px 0;
  overflow: hidden;
}
body main .transport-home .transport-home-grid .accounting-visual-card .ticker-footer .ticker-content {
  display: flex;
  gap: 40px;
  white-space: nowrap;
  animation: tickerMove 20s linear infinite;
}
body main .transport-home .transport-home-grid .accounting-visual-card .ticker-footer .ticker-content span {
  color: var(--text-on-accent);
  font-size: 9px;
  font-weight: 800;
  font-family: monospace;
}
@keyframes tickerMove {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
body main .transport-home .accounting-features-container {
  max-width: 1300px;
  width: 100%;
  margin: 40px auto 0;
  padding: 60px 0;
  border-top: 1px solid var(--border-color);
}
body main .transport-home .accounting-features-container .section-title {
  text-align: center;
  margin-bottom: 50px;
}
body main .transport-home .accounting-features-container .section-title h2 {
  font-size: 32px;
  color: var(--primary-color);
  font-weight: 900;
}
body main .transport-home .accounting-features-container .section-title p {
  color: var(--text-color-secondary);
  font-size: 16px;
}
body main .transport-home .accounting-features-container .features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
}
body main .transport-home .accounting-features-container .features-grid .feature-card {
  background: var(--surface-color);
  padding: 30px;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
body main .transport-home .accounting-features-container .features-grid .feature-card:hover {
  transform: translateY(-8px);
  border-color: var(--accent-color);
}
body main .transport-home .accounting-features-container .features-grid .feature-card .icon-box {
  width: 50px;
  height: 50px;
  background: var(--input-bg);
  color: var(--primary-color);
  display: grid;
  place-items: center;
  border-radius: 14px;
  font-size: 20px;
}
body main .transport-home .accounting-features-container .features-grid .feature-card h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary-color);
}
body main .transport-home .accounting-features-container .features-grid .feature-card p {
  font-size: 14px;
  color: var(--text-color-secondary);
  line-height: 1.7;
}

/* 🌳 Accounts Management & Chart of Accounts SCSS */
.accounts-page-wrapper {
  padding: 20px;
  max-width: 1300px;
  margin: 0 auto;
  /* ✏️ زر تعديل اسم الحساب — يُستخدم في رأس كشف الحساب (خلية الإجراءات في
     دليل الحسابات أصبحت قائمة منسدلة ⋮). */
}
.accounts-page-wrapper .btn-edit-account {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--accent-color);
  font-weight: 700;
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.accounts-page-wrapper .btn-edit-account:hover {
  background: var(--primary-fill);
  border-color: var(--primary-fill);
  color: var(--text-on-accent);
}
.accounts-page-wrapper .btn-edit-account:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.accounts-page-wrapper {
  /* 🔒 شارة توضيحية للأقسام الرئيسية (غير قابلة للتعديل) */
}
.accounts-page-wrapper .acc-locked {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--text-color-secondary);
  font-size: 0.7rem;
  font-weight: 700;
  cursor: help;
}
.accounts-page-wrapper .page-title-card {
  padding: 10px 14px;
  margin-bottom: 8px;
}
.accounts-page-wrapper .page-title-card h2 {
  margin: 0 0 8px 0;
  font-size: 1.45rem;
  color: var(--primary-color);
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 12px;
}
.accounts-page-wrapper .page-title-card h2 i {
  color: var(--accent-color);
}
.accounts-page-wrapper .page-title-card p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-color-secondary);
}
.accounts-page-wrapper .form-alert-container {
  padding: 14px 20px;
  border-radius: 12px;
  margin-bottom: 24px;
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 12px;
  animation: fadeIn 0.3s ease;
}
.accounts-page-wrapper .form-alert-container.alert-success-style {
  background: rgba(16, 185, 129, 0.12);
  color: var(--success-color);
  border: 1px solid var(--success-color);
}
.accounts-page-wrapper .form-alert-container.alert-error-style {
  background: rgba(239, 68, 68, 0.12);
  color: var(--danger-color);
  border: 1px solid var(--danger-color);
}
.accounts-page-wrapper .accounts-grid-container {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
}
@media (max-width: 992px) {
  .accounts-page-wrapper .accounts-grid-container {
    grid-template-columns: 1fr;
  }
}
.accounts-page-wrapper .card-box {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  box-shadow: 0 12px 35px var(--shadow-color);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.accounts-page-wrapper .card-box .card-header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--border-color);
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.accounts-page-wrapper .card-box .card-header h3 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--primary-color);
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
}
.accounts-page-wrapper .card-box .card-header h3 i {
  color: var(--accent-color);
}
.accounts-page-wrapper .card-box .card-header .header-actions a {
  text-decoration: none;
  font-size: 14px;
  color: var(--text-color-primary);
}
.accounts-page-wrapper .card-box .form-body {
  padding: 24px;
}
.accounts-page-wrapper .card-box .form-group {
  margin-bottom: 20px;
}
.accounts-page-wrapper .card-box .form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-color-primary);
}
.accounts-page-wrapper .card-box .form-group label .required {
  color: var(--danger-color);
}
.accounts-page-wrapper .card-box .form-group .form-control {
  width: 100%;
  padding: 12px 16px;
  font-size: 0.95rem;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--input-bg);
  color: var(--text-color-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}
.accounts-page-wrapper .card-box .form-group .form-control:focus {
  border-color: var(--accent-color);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.accounts-page-wrapper .card-box .form-group .professional-select {
  cursor: pointer;
  width: 100%;
  padding: 10px 15px;
  border-radius: 12px;
  border: 2px solid var(--border-color);
  background: var(--surface-color);
  color: var(--text-color-primary);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  appearance: none;
  background-image: url("svg/chevron-select.svg");
  background-repeat: no-repeat;
  background-position: left 15px center;
  background-size: 18px;
}
.accounts-page-wrapper .card-box .form-group .professional-select:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.accounts-page-wrapper .card-box .form-group .professional-select option {
  background: var(--surface-color);
  color: var(--text-color-primary);
  padding: 8px;
}
.accounts-page-wrapper .card-box .form-group .form-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--text-color-secondary);
}
.accounts-page-wrapper .card-box .auto-code-wrapper {
  padding: 4px 0;
}
.accounts-page-wrapper .card-box .auto-code-wrapper .auto-code-display {
  display: inline-block;
  padding: 10px 22px;
  background: rgba(16, 185, 129, 0.1);
  color: var(--success-color);
  border: 1px dashed var(--success-color);
  border-radius: 10px;
  font-family: monospace;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 1.5px;
}
.accounts-page-wrapper .card-box .category-display-wrapper {
  padding: 4px 0;
}
.accounts-page-wrapper .card-box .category-display-wrapper .category-badge {
  display: inline-block;
  padding: 2px 3px;
  border-radius: 50px;
  font-size: 0.88rem;
  font-weight: 500;
}
.accounts-page-wrapper .card-box .category-display-wrapper .category-badge.default-badge {
  background: var(--surface-muted);
  color: var(--text-color-secondary);
  border: 1px solid var(--border-color);
}
.accounts-page-wrapper .card-box .category-display-wrapper .category-badge.badge-asset {
  background: var(--success-soft);
  color: var(--success-color);
  border: 1px solid var(--success-color);
}
.accounts-page-wrapper .card-box .category-display-wrapper .category-badge.badge-liability {
  background: rgba(239, 68, 68, 0.12);
  color: var(--danger-color);
  border: 1px solid var(--danger-color);
}
.accounts-page-wrapper .card-box .category-display-wrapper .category-badge.badge-equity {
  background: rgba(6, 182, 212, 0.12);
  color: var(--info-color);
  border: 1px solid var(--info-color);
}
.accounts-page-wrapper .card-box .category-display-wrapper .category-badge.badge-revenue {
  background: rgba(245, 158, 11, 0.12);
  color: var(--warning-color);
  border: 1px solid var(--warning-color);
}
.accounts-page-wrapper .card-box .category-display-wrapper .category-badge.badge-expense {
  background: rgba(236, 72, 153, 0.12);
  color: var(--pink-color);
  border: 1px solid var(--pink-color);
}
.accounts-page-wrapper .tree-card .refresh-tree-btn {
  cursor: pointer;
  color: var(--text-color-secondary);
  font-size: 0.9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease;
}
.accounts-page-wrapper .tree-card .refresh-tree-btn:hover {
  color: var(--accent-color);
}
.accounts-page-wrapper .tree-card .tree-preview-body {
  padding: 20px;
  max-height: 560px;
  overflow-y: auto;
}
.accounts-page-wrapper .tree-card .account-tree-view, .accounts-page-wrapper .tree-card .account-tree-view ul {
  list-style: none;
  padding-right: 20px;
  margin: 6px 0;
}
.accounts-page-wrapper .tree-card .account-tree-view {
  padding-right: 0;
}
.accounts-page-wrapper .tree-card .account-tree-view li {
  margin: 6px 0;
  position: relative;
}
.accounts-page-wrapper .tree-card .account-tree-view .tree-item-content {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  transition: background 0.15s ease;
}
.accounts-page-wrapper .tree-card .account-tree-view .tree-item-content:hover {
  background: var(--hover-background);
}
.accounts-page-wrapper .tree-card .account-tree-view .tree-item-content .folder-icon {
  color: var(--warning-color);
}
.accounts-page-wrapper .tree-card .account-tree-view .tree-item-content .file-icon {
  color: var(--primary-color);
}
.accounts-page-wrapper .tree-card .account-tree-view .tree-item-content .acc-code {
  font-weight: 800;
  color: var(--accent-color);
  font-family: monospace;
}
.accounts-page-wrapper .tree-card .account-tree-view .tree-item-content .acc-name {
  color: var(--text-color-primary);
  font-weight: 600;
}
.accounts-page-wrapper .tree-card .account-tree-view .tree-item-content .acc-type-badge {
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 12px;
  margin-right: 8px;
  font-weight: 700;
}
.accounts-page-wrapper .tree-card .account-tree-view .tree-item-content .acc-type-badge.badge-header {
  background: rgba(59, 130, 246, 0.15);
  color: var(--primary-color);
}
.accounts-page-wrapper .tree-card .account-tree-view .tree-item-content .acc-type-badge.badge-leaf {
  background: var(--surface-muted);
  color: var(--text-color-secondary);
}
.accounts-page-wrapper .tree-card .account-tree-view .tree-item-content .acc-type-badge.badge-special {
  background: rgba(168, 85, 247, 0.15);
  color: var(--accent-color);
}

/* 📊 Account Statement Header & Actions */
.accounts-page-wrapper .page-title-card.flex-title-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 5px 24px;
  margin-bottom: 5px;
}
.accounts-page-wrapper .page-title-card.flex-title-card .title-info p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.accounts-page-wrapper .page-title-card.flex-title-card .title-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.accounts-page-wrapper .page-title-card.flex-title-card .btn-primary-action, .accounts-page-wrapper .page-title-card.flex-title-card .btn-secondary-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s ease;
  border: 1px solid transparent;
}
.accounts-page-wrapper .page-title-card.flex-title-card .btn-primary-action {
  background: var(--primary-fill);
  color: var(--text-on-accent);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
}
.accounts-page-wrapper .page-title-card.flex-title-card .btn-primary-action:hover {
  background: var(--primary-fill-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
}
.accounts-page-wrapper .page-title-card.flex-title-card .btn-secondary-action {
  background: var(--surface-muted, #f1f5f9);
  color: var(--text-color-primary, #1e293b);
  border-color: var(--border-color, #e2e8f0);
}
.accounts-page-wrapper .page-title-card.flex-title-card .btn-secondary-action:hover {
  background: var(--hover-background, #e2e8f0);
  color: var(--primary-color, #0f172a);
}
.accounts-page-wrapper {
  /* 📅 Date Filter Card & Inputs Formatting (.date-filter-card) */
}
.accounts-page-wrapper .card-box.date-filter-card, .accounts-page-wrapper .date-filter-card {
  overflow: visible !important;
  position: relative;
  z-index: 50;
  margin-bottom: 12px;
  background: var(--surface-color, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 18px;
  box-shadow: 0 8px 25px var(--shadow-color, rgba(0, 0, 0, 0.05));
  padding: 12px 24px;
}
.accounts-page-wrapper .card-box.date-filter-card .date-filter-form, .accounts-page-wrapper .card-box.date-filter-card .filter-inputs-row, .accounts-page-wrapper .date-filter-card .date-filter-form, .accounts-page-wrapper .date-filter-card .filter-inputs-row {
  overflow: visible !important;
  position: relative;
  width: 100%;
}
.accounts-page-wrapper .card-box.date-filter-card .filter-inputs-row, .accounts-page-wrapper .date-filter-card .filter-inputs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.accounts-page-wrapper .card-box.date-filter-card .filter-group, .accounts-page-wrapper .date-filter-card .filter-group {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: fit-content;
  position: relative;
  z-index: 20;
}
.accounts-page-wrapper .card-box.date-filter-card .filter-group .clientComponent, .accounts-page-wrapper .date-filter-card .filter-group .clientComponent {
  position: relative;
  z-index: 30;
}
.accounts-page-wrapper .card-box.date-filter-card .filter-group .clientComponent .custom-select-dropdown, .accounts-page-wrapper .date-filter-card .filter-group .clientComponent .custom-select-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 9999 !important;
  background: var(--surface-color, #ffffff);
  border: 1px solid var(--border-color, #cbd5e1);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  max-height: 280px;
  overflow-y: auto;
}
.accounts-page-wrapper .card-box.date-filter-card .filter-group.flex-2, .accounts-page-wrapper .date-filter-card .filter-group.flex-2 {
  flex: 2;
  min-width: 150px;
}
.accounts-page-wrapper .card-box.date-filter-card .filter-group.main-account-group, .accounts-page-wrapper .date-filter-card .filter-group.main-account-group {
  flex: 2.5;
  min-width: 150px;
}
.accounts-page-wrapper .card-box.date-filter-card .filter-group.sub-entity-group, .accounts-page-wrapper .date-filter-card .filter-group.sub-entity-group {
  flex: 2;
  min-width: 150px;
}
.accounts-page-wrapper .card-box.date-filter-card .filter-group label, .accounts-page-wrapper .date-filter-card .filter-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-color-primary, #1e293b);
  margin-bottom: 8px;
  white-space: nowrap;
}
.accounts-page-wrapper .card-box.date-filter-card .filter-group label i, .accounts-page-wrapper .date-filter-card .filter-group label i {
  color: var(--accent-color, #2563eb);
}
.accounts-page-wrapper .card-box.date-filter-card .filter-group .form-control, .accounts-page-wrapper .date-filter-card .filter-group .form-control {
  width: 100%;
  padding: 10px 14px;
  font-size: 0.95rem;
  border-radius: 12px;
  border: 1px solid var(--border-color, #cbd5e1);
  background: var(--input-bg, #f8fafc);
  color: var(--text-color-primary, #0f172a);
  transition: all 0.2s ease;
  box-sizing: border-box;
}
.accounts-page-wrapper .card-box.date-filter-card .filter-group .form-control:focus, .accounts-page-wrapper .date-filter-card .filter-group .form-control:focus {
  border-color: var(--accent-color);
  background: var(--surface-color, #ffffff);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(37, 99, 235, 0.15));
}
.accounts-page-wrapper .card-box.date-filter-card .filter-actions-group, .accounts-page-wrapper .date-filter-card .filter-actions-group {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 1px;
}
.accounts-page-wrapper .card-box.date-filter-card .filter-actions-group button, .accounts-page-wrapper .date-filter-card .filter-actions-group button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  transition: all 0.25s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}
.accounts-page-wrapper .card-box.date-filter-card .filter-actions-group .btn-primary-action, .accounts-page-wrapper .date-filter-card .filter-actions-group .btn-primary-action {
  background: var(--primary-fill);
  color: var(--text-on-accent);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}
.accounts-page-wrapper .card-box.date-filter-card .filter-actions-group .btn-primary-action:hover, .accounts-page-wrapper .date-filter-card .filter-actions-group .btn-primary-action:hover {
  background: var(--primary-fill-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);
}
.accounts-page-wrapper .card-box.date-filter-card .filter-actions-group .btn-secondary-action, .accounts-page-wrapper .date-filter-card .filter-actions-group .btn-secondary-action {
  background: var(--surface-muted, #f1f5f9);
  color: var(--text-color-primary, #334155);
  border-color: var(--border-color, #cbd5e1);
}
.accounts-page-wrapper .card-box.date-filter-card .filter-actions-group .btn-secondary-action:hover, .accounts-page-wrapper .date-filter-card .filter-actions-group .btn-secondary-action:hover {
  background: var(--hover-background, #e2e8f0);
  color: var(--primary-color, #0f172a);
}
.accounts-page-wrapper .badge-sub-entity {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: rgba(37, 99, 235, 0.12);
  color: var(--accent-color, #2563eb);
  border: 1px solid rgba(37, 99, 235, 0.3);
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0 6px;
}
.accounts-page-wrapper .statement-table .sub-detail-tag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--surface-muted, #f1f5f9);
  border: 1px solid var(--border-color, #cbd5e1);
  border-radius: 6px;
  font-size: 0.78rem;
  color: var(--text-color-secondary, #64748b);
  margin-right: 6px;
  font-weight: 600;
}

/* 💰 إجماليات أعمدة كشوف الحساب: للطباعة والتصدير فقط، لا تظهر على الشاشة. */
#ownerStatementTable tfoot.statement-print-totals,
#trailerOwnerStatementTable tfoot.statement-print-totals {
  display: none !important;
}

/* 🚚 Transfers Table & Load Badges Styling */
.transfers-table-responsive {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.transfers-limit-filter {
  max-width: 100px;
}

.transfers-sort-filter {
  max-width: 160px;
}

.transfers-pagination {
  display: none;
}
.transfers-pagination.is-visible {
  display: flex;
}

.transfers-table {
  table-layout: auto;
  width: max-content;
  min-width: 100%;
}
.transfers-table thead th {
  padding: 11px 9px;
  font-size: 0.78rem;
  line-height: 1.45;
  vertical-align: middle;
  white-space: normal;
}
.transfers-table tbody tr {
  transition: background-color 0.16s ease;
}
.transfers-table tbody tr:hover {
  background: var(--hover-background, #f8fafc);
}
.transfers-table tbody td {
  padding: 10px 9px;
  font-size: 0.81rem;
  line-height: 1.5;
  vertical-align: middle;
  overflow-wrap: anywhere;
}
.transfers-table .transfer-details-cell {
  vertical-align: middle;
}
.transfers-table .transfer-primary-value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 3px;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.transfers-table .transfer-primary-value > i {
  flex: 0 0 14px;
  font-size: 0.76rem;
  text-align: center;
}
.transfers-table .transfer-subline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
  color: var(--text-color-secondary, #64748b);
  font-size: 0.72rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.transfers-table .transfer-subline > i {
  flex: 0 0 13px;
  font-size: 0.7rem;
  text-align: center;
}
.transfers-table .transfer-date {
  display: inline-block;
  direction: ltr;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.transfers-table .transfer-time {
  justify-content: center;
  white-space: nowrap;
}
.transfers-table .transfer-number-cell {
  white-space: nowrap;
}
.transfers-table .transfer-number {
  font-family: "Cairo", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.transfers-table .transfer-unit {
  color: var(--text-color-secondary, #64748b);
  font-size: 0.68rem;
}
.transfers-table .block-sub {
  display: block;
  margin-top: 3px;
  font-weight: 500;
  opacity: 0.9;
}
.transfers-table .sub-text {
  font-size: 0.8rem;
  color: var(--text-color-secondary, #64748b);
}
.transfers-table .report-tabs-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  background: var(--surface-card, #ffffff);
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--border-color, #e2e8f0);
  box-shadow: 0 4px 20px var(--shadow-color, rgba(15, 23, 42, 0.04));
}
.transfers-table .report-tabs-bar .report-tab-btn {
  flex: 1;
  padding: 12px 20px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-color-secondary, #64748b);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.transfers-table .report-tabs-bar .report-tab-btn i {
  font-size: 16px;
  color: var(--text-color-secondary, #64748b);
  transition: all 0.25s ease;
}
.transfers-table .report-tabs-bar .report-tab-btn:hover {
  background: var(--surface-muted, #f8fafc);
  color: var(--primary-color, #1272B8);
}
.transfers-table .report-tabs-bar .report-tab-btn.active {
  background: var(--primary-fill);
  color: var(--text-on-accent);
  box-shadow: 0 4px 15px rgba(18, 114, 184, 0.25);
}
.transfers-table .report-tabs-bar .report-tab-btn.active i {
  color: var(--text-on-accent);
}
.transfers-table .car-name {
  color: var(--text-color-primary, #0f172a);
}
.transfers-table .badge-load-type {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  border: 1px solid transparent;
}
.transfers-table .badge-load-type.bulk {
  background: rgba(16, 185, 129, 0.12);
  color: var(--success-color);
  border-color: rgba(16, 185, 129, 0.3);
}
.transfers-table .badge-load-type.packed {
  background: rgba(37, 99, 235, 0.12);
  color: var(--primary-color);
  border-color: rgba(37, 99, 235, 0.3);
}
.transfers-table .btn-dropdown-toggle {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-color, #cbd5e1);
  border-radius: 6px;
  background: var(--surface-color, #ffffff);
  color: var(--text-color-secondary, #64748b);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.transfers-table .btn-dropdown-toggle:hover, .transfers-table .btn-dropdown-toggle:focus-visible {
  border-color: var(--accent-color);
  background: var(--surface-muted, #f1f5f9);
  color: var(--accent-color, #2563eb);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(37, 99, 235, 0.12));
}
.transfers-table .table-action-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.transfers-table .table-dropdown-menu {
  display: none;
  position: absolute;
  inset-inline-end: 0;
  inset-inline-start: auto;
  top: calc(100% + 5px);
  min-width: 190px;
  padding: 5px;
  background: var(--surface-color, #ffffff);
  border: 1px solid var(--border-color, #cbd5e1);
  border-radius: 6px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.16);
  z-index: 1500;
  text-align: right;
}
.transfers-table .table-dropdown-menu.is-open {
  display: block;
}
.transfers-table .table-dropdown-menu.is-viewport-positioned {
  position: fixed;
  inset-inline: auto;
  z-index: 2000;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  overflow-y: auto;
}
.transfers-table .table-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 7px 9px;
  border-radius: 4px;
  color: var(--text-color-primary, #1e293b);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  transition: background 0.16s ease, color 0.16s ease;
}
.transfers-table .table-dropdown-menu a:hover, .transfers-table .table-dropdown-menu a:focus-visible {
  background: var(--hover-background, #f1f5f9);
  color: var(--accent-color, #2563eb);
  outline: none;
}
.transfers-table .table-dropdown-menu a > i {
  width: 16px;
  color: var(--accent-color, #2563eb);
  text-align: center;
}
.transfers-table .table-dropdown-menu a + a {
  border-top: 1px solid var(--border-color, #e2e8f0);
}

/* 📑 Professional Journal Entries & Voucher Styling (.entries-table & .voucher-card) */
.entries-table, .voucher-lines-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.entries-table thead th, .voucher-lines-table thead th {
  background: var(--header-bg, #f8fafc);
  color: var(--primary-color, #0f172a);
  font-weight: 800;
  font-size: 0.9rem;
  padding: 14px 16px;
  border-bottom: 2px solid var(--border-color, #e2e8f0);
  white-space: nowrap;
}
.entries-table thead th.col-id, .voucher-lines-table thead th.col-id {
  width: 100px;
}
.entries-table thead th.col-date, .voucher-lines-table thead th.col-date {
  width: 120px;
}
.entries-table thead th.col-desc, .voucher-lines-table thead th.col-desc {
  min-width: 250px;
}
.entries-table thead th.col-amount, .voucher-lines-table thead th.col-amount {
  width: 130px;
}
.entries-table thead th.col-status, .voucher-lines-table thead th.col-status {
  width: 110px;
}
.entries-table thead th.col-user, .voucher-lines-table thead th.col-user {
  width: 120px;
}
.entries-table thead th.col-action, .voucher-lines-table thead th.col-action {
  width: 110px;
}
.entries-table thead th.col-code, .voucher-lines-table thead th.col-code {
  width: 110px;
}
.entries-table thead th.col-account, .voucher-lines-table thead th.col-account {
  min-width: 200px;
}
.entries-table thead th.col-line-desc, .voucher-lines-table thead th.col-line-desc {
  min-width: 180px;
}
.entries-table tbody tr, .voucher-lines-table tbody tr {
  transition: all 0.2s ease;
  border-bottom: 1px solid var(--border-color, #f1f5f9);
}
.entries-table tbody tr:hover, .voucher-lines-table tbody tr:hover {
  background: var(--hover-background, #f8fafc);
}
.entries-table tbody tr td, .voucher-lines-table tbody tr td {
  padding: 14px 16px;
  vertical-align: middle;
  font-size: 0.92rem;
  color: var(--text-color-primary, #1e293b);
}
.entries-table .loading-cell, .voucher-lines-table .loading-cell {
  padding: 40px 16px;
}
.entries-table .entry-id-badge, .voucher-lines-table .entry-id-badge {
  display: inline-block;
  padding: 4px 10px;
  background: var(--surface-muted, #f1f5f9);
  color: var(--accent-color, #2563eb);
  border: 1px solid var(--border-color, #cbd5e1);
  border-radius: 8px;
  font-family: monospace;
  font-weight: 500;
  font-size: 0.8rem;
}
.entries-table .entry-desc-box, .voucher-lines-table .entry-desc-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.entries-table .entry-desc-box .entry-title, .voucher-lines-table .entry-desc-box .entry-title {
  font-weight: 700;
  color: var(--primary-color, #0f172a);
  font-size: 0.98rem;
}
.entries-table .lines-count-tag, .voucher-lines-table .lines-count-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(37, 99, 235, 0.1);
  color: var(--primary-color, #2563eb);
  border: 1px solid rgba(37, 99, 235, 0.25);
}
.entries-table .single-line-tag, .voucher-lines-table .single-line-tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--surface-muted, #f1f5f9);
  color: var(--text-color-secondary, #64748b);
  border: 1px solid var(--border-color, #cbd5e1);
}
.entries-table .cell-debit, .voucher-lines-table .cell-debit {
  color: var(--success-color);
  font-weight: 800;
  font-family: monospace;
  font-size: 0.95rem;
}
.entries-table .cell-credit, .voucher-lines-table .cell-credit {
  color: var(--primary-color);
  font-weight: 800;
  font-family: monospace;
  font-size: 0.95rem;
}
.entries-table .account-code-pill, .voucher-lines-table .account-code-pill {
  display: inline-block;
  padding: 3px 8px;
  background: var(--surface-muted, #f1f5f9);
  color: var(--accent-color, #2563eb);
  border-radius: 6px;
  font-weight: 800;
  font-size: 0.88rem;
}
.entries-table .btn-view-detail, .voucher-lines-table .btn-view-detail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 10px;
  background: var(--surface-color, #ffffff);
  color: var(--accent-color, #2563eb);
  border: 1px solid var(--border-color, #cbd5e1);
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.entries-table .btn-view-detail:hover, .voucher-lines-table .btn-view-detail:hover {
  background: var(--accent-fill);
  color: var(--text-on-accent);
  border-color: var(--accent-fill);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
  transform: translateY(-1px);
}
.entries-table .entry-actions, .voucher-lines-table .entry-actions {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.entries-table .entry-actions > summary, .voucher-lines-table .entry-actions > summary {
  list-style: none;
}
.entries-table .entry-actions > summary::-webkit-details-marker, .voucher-lines-table .entry-actions > summary::-webkit-details-marker {
  display: none;
}
.entries-table .entry-actions__toggle, .voucher-lines-table .entry-actions__toggle {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: var(--surface-color, #ffffff);
  color: var(--text-color-secondary, #64748b);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.entries-table .entry-actions__toggle:hover, .entries-table .entry-actions__toggle:focus-visible, .voucher-lines-table .entry-actions__toggle:hover, .voucher-lines-table .entry-actions__toggle:focus-visible {
  border-color: var(--accent-color);
  color: var(--accent-color, #2563eb);
  outline: none;
}
.entries-table .entry-actions[open] > .entry-actions__toggle, .voucher-lines-table .entry-actions[open] > .entry-actions__toggle {
  background: var(--surface-muted, #f1f5f9);
  border-color: var(--accent-color);
  color: var(--accent-color, #2563eb);
}
.entries-table .entry-actions__menu, .voucher-lines-table .entry-actions__menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 6px);
  z-index: 30;
  display: grid;
  min-width: 220px;
  padding: 5px;
  border: 1px solid var(--border-color, #cbd5e1);
  border-radius: 6px;
  background: var(--surface-color, #ffffff);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.16);
  text-align: start;
}
.entries-table .entry-actions__item, .voucher-lines-table .entry-actions__item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 7px 9px;
  border-radius: 4px;
  color: var(--text-color-primary, #1e293b);
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.entries-table .entry-actions__item:hover, .entries-table .entry-actions__item:focus-visible, .voucher-lines-table .entry-actions__item:hover, .voucher-lines-table .entry-actions__item:focus-visible {
  background: var(--hover-background, #f1f5f9);
  color: var(--accent-color, #2563eb);
  outline: none;
}
.entries-table .entry-actions__item > i, .voucher-lines-table .entry-actions__item > i {
  width: 16px;
  color: var(--accent-color, #2563eb);
  text-align: center;
}
.entries-table .entry-actions__count, .voucher-lines-table .entry-actions__count {
  margin-inline-start: auto;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface-muted, #f1f5f9);
  color: var(--text-color-secondary, #64748b);
  font-size: 0.72rem;
}

/* 🏷️ Status Badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 700;
}
.status-badge.status-balanced {
  background: rgba(16, 185, 129, 0.12);
  color: var(--success-color);
  border: 1px solid var(--success-color);
}
.status-badge.status-unbalanced {
  background: rgba(239, 68, 68, 0.12);
  color: var(--danger-color);
  border: 1px solid var(--danger-color);
}
.status-badge.voucher-badge {
  font-size: 0.9rem;
  padding: 6px 14px;
}

/* 🧾 Voucher Card Styling */
.voucher-card .voucher-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  background: var(--header-bg, #f8fafc);
  border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.voucher-card .voucher-body {
  padding: 24px;
}
.voucher-card .voucher-meta-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 24px;
}
.voucher-card .voucher-meta-grid .meta-item {
  flex: 1;
  min-width: 200px;
}
.voucher-card .voucher-meta-grid .meta-item .meta-label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-color-secondary, #64748b);
  margin-bottom: 4px;
}
.voucher-card .voucher-meta-grid .meta-item .meta-val {
  font-size: 1.05rem;
  color: var(--text-color-primary, #0f172a);
}
.voucher-card .voucher-desc-box {
  background: var(--surface-muted, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 24px;
}
.voucher-card .voucher-desc-box .desc-label {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-color-secondary, #64748b);
  margin-bottom: 6px;
}
.voucher-card .voucher-desc-box .desc-content {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--accent-color, #2563eb);
  margin: 0;
}
.voucher-card .voucher-tfoot-row {
  background: var(--header-bg, #f8fafc);
  font-weight: 800;
}
.voucher-card .voucher-tfoot-row td {
  padding: 14px 16px;
}

/* 📄 Professional Smart Pagination Styling */
.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-color, #e2e8f0);
  background: var(--header-bg, #f8fafc);
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
}
.pagination-container .pagination-summary {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-color-secondary, #64748b);
}
.pagination-container .pagination-summary strong {
  color: var(--accent-color, #2563eb);
  font-weight: 800;
}
.pagination-container .pagination-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pagination-container .btn-page-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 10px;
  border: 1px solid var(--border-color, #cbd5e1);
  background: var(--surface-color, #ffffff);
  color: var(--text-color-primary, #1e293b);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.pagination-container .btn-page-nav:hover:not(:disabled) {
  background: var(--accent-fill);
  color: var(--text-on-accent);
  border-color: var(--accent-fill);
}
.pagination-container .btn-page-nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pagination-container .pagination-numbers {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pagination-container .btn-num-page {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--border-color, #cbd5e1);
  background: var(--surface-color, #ffffff);
  color: var(--text-color-primary, #1e293b);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.pagination-container .btn-num-page:hover:not(.active) {
  background: var(--surface-muted, #f1f5f9);
  border-color: var(--accent-color);
  color: var(--accent-color, #2563eb);
}
.pagination-container .btn-num-page.active {
  background: var(--accent-fill);
  color: var(--text-on-accent);
  border-color: var(--accent-fill);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
}
.pagination-container .page-ellipsis {
  padding: 0 6px;
  color: var(--text-color-secondary, #94a3b8);
  font-weight: 800;
  font-size: 0.95rem;
  user-select: none;
}

::selection {
  background-color: var(--primary-fill);
  border: 1px solid var(--primary-fill);
  color: var(--text-on-accent);
}

.open-menu {
  max-height: 200px;
}

.hide-menu {
  transform: translateX(100%);
}

/* ==========================================================================
   🖨️ نظام الطباعة الاحترافي — نموذج مستند موحّد لكل صفحات البيانات
   البنية (templates/print_header.php، خارج #content فلا يستبدله الـ SPA):
       [شعار + اسم الموقع] .................... [تاريخ ووقت الطباعة]
       ─────────── عنوان الصفحة + الفترة المطبَّقة ───────────
       ثم بيانات الصفحة كاملةً (أغلب الورقة).
   ملاحظة: ألوان الورق مفروضة فاتحة مهما كان ثيم الشاشة، وإلا طُبع النص
   الفاتح (الثيم الداكن) على ورق أبيض فيختفي.
   ========================================================================== */
.print-doc-header {
  display: none;
}

/* ⚠️ لا نُثبّت مقاس الورق هنا عن قصد: أي قيمة غير auto (مثل A4 أو A4 portrait)
   تُلغي قابلية التعديل من المستخدم وتُخفي/تُعطّل خياري «اتجاه الورق» و«حجم الورق»
   في نافذة طباعة المتصفح. القيمة auto تترك القرار كاملًا لنافذة الطباعة،
   ويبقى هامش الورق الموحّد هو ما نحكمه. */
@page {
  size: auto;
  margin: 10mm 8mm 11mm;
}
@media print {
  /* 1) ثيم الورق: تجاوز متغيّرات الثيم الداكن على مستوى الجذر */
  :root,
  html[data-theme=dark] {
    color-scheme: light;
    --primary-color: #1f3b52;
    --secondary-color: #2b4d68;
    --primary-fill: #2f6f9f;
    --primary-fill-hover: #275b83;
    --background-color: #ffffff;
    --background-opacity: #ffffff;
    --surface-color: #ffffff;
    --surface-muted: #f3f6f9;
    --hover-background: transparent;
    --accent-color: #3f6f7c;
    --accent-fill: #4a7c8c;
    --accent-soft: rgba(74, 124, 140, 0.08);
    --primary-soft: rgba(47, 111, 159, 0.08);
    --text-color-primary: #16202a;
    --text-color-secondary: #4b5563;
    --border-color: #b8c4cf;
    --shadow-color: transparent;
    --heading-color: #0f172a;
    --header-bg: #eef2f6;
    --input-bg: #ffffff;
    --sidebar-bg: #ffffff;
    --date-color: #16202a;
    --submit-button: #2f6f9f;
    --trial-col: #c3d5dd;
    --trial-col-d: #aec5d0;
    --skeleton-base: #eef2f6;
    --skeleton-shine: #ffffff;
    --text-on-accent: #ffffff;
    --success-color: #2f855a;
    --success-soft: #e6f4ec;
    --success-fill: #2f855a;
    --danger-color: #b5372a;
    --danger-soft: #fdecea;
    --danger-fill: #b5372a;
    --warning-color: #9a6a12;
    --warning-soft: #fdf6e3;
    --warning-fill: #9a6a12;
    --info-color: #2b6f8e;
    --info-soft: #e8f2f7;
    --pink-color: #a1457e;
  }
  /* 2) الصفحة: بلا تمرير ولا إزاحات شاشة */
  html, body {
    background: #fff !important;
    color: #16202a !important;
    height: auto !important;
    width: 100% !important;
    overflow: visible !important;
    font-size: 10pt;
  }
  main {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  #container {
    display: block !important;
    min-height: 0 !important;
  }
  #content {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  #content::-webkit-scrollbar {
    display: none;
  }
  /* هامش الورق موحّد: هامش @page فقط، فلا إزاحات داخلية متفاوتة
     (كانت 14/15/20px حسب الصفحة) — والترويسة تصطف مع البيانات. */
  .accounts-page-wrapper,
  .report-container,
  .statement-page-wrapper {
    padding: 0 !important;
  }
  /* 3) إخفاء كل عناصر التحكم: يبقى الورق للبيانات */
  header,
  aside.sidebar,
  .bottom-bar,
  .tools-panel,
  .toast-container,
  .notifications-panel,
  .voice-panel,
  .messages-owner-panel,
  .messages-inbox-panel,
  .user-message-popup,
  .app-footer,
  #display-menu,
  .header-tools,
  .nav-mode-card,
  .no-print,
  .date-filter-card,
  .page-header-row,
  .page-title-card,
  .filter-actions-group,
  .title-actions,
  .table-action-dropdown,
  .pagination,
  .pagination-bar,
  .card-header .header-actions,
  .report-filters,
  .report-tabs-bar,
  button,
  [data-tip]::after,
  [data-tip]::before {
    display: none !important;
  }
  [data-tip]::after,
  [data-tip]::before {
    content: none !important;
  }
  /* 4) ترويسة المستند */
  .print-doc-header {
    display: block !important;
    margin: 0 0 6px;
    padding: 0 0 6px;
    border-bottom: 1.5pt solid #1f3b52;
  }
  .print-doc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  /* في RTL: الشعار واسم الموقع على يسار الورقة، والتاريخ/الوقت على يمينها */
  .print-doc-brand {
    order: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  .print-doc-logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex: 0 0 auto;
  }
  .print-doc-names {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    text-align: left;
  }
  .print-doc-site {
    font-size: 14pt;
    font-weight: 800;
    line-height: 1.2;
    color: #0f172a;
  }
  .print-doc-company {
    font-size: 8.5pt;
    color: #4b5563;
    line-height: 1.25;
  }
  .print-doc-meta {
    order: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 9pt;
    text-align: right;
    color: #334155;
  }
  .print-doc-meta-row {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 6px;
  }
  .print-doc-meta-label {
    color: #64748b;
  }
  .print-doc-meta-value {
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
  }
  .print-doc-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
  }
  .print-doc-title {
    margin: 0;
    font-size: 12pt;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
  }
  .print-doc-period {
    font-size: 9pt;
    font-weight: 700;
    color: #334155;
    white-space: nowrap;
  }
  .print-doc-period[hidden] {
    display: none !important;
  }
  /* 5) البطاقات: إطار رفيع فقط بلا ظلال أو زوايا */
  .card-box,
  .card {
    background: #fff !important;
    border: 0.75pt solid #b8c4cf !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin: 0 0 6px !important;
    break-inside: auto;
  }
  .card-header {
    background: #eef2f6 !important;
    border-bottom: 0.75pt solid #b8c4cf !important;
    padding: 5px 10px !important;
    break-after: avoid;
  }
  .card-header h3 {
    font-size: 10.5pt !important;
    gap: 6px;
  }
  .card-header h3 i {
    display: none;
  }
  .card-header .text-muted,
  .card-header-note {
    font-size: 8.5pt !important;
  }
  .kpi-card,
  .summary-card,
  .stat-card {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* 6) الجداول: تملأ عرض الورقة، ويتكرر رأسها في كل صفحة */
  .professional-table,
  .report-table,
  .transfers-table,
  .entries-table,
  .statement-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
  }
  .professional-table thead,
  .report-table thead {
    display: table-header-group !important;
  }
  .professional-table tfoot,
  .report-table tfoot {
    display: table-row-group !important;
  }
  /* 💰 صف إجماليات كشوف الحساب: يظهر على الورق فقط، وفي نهاية الجدول. */
  #ownerStatementTable tfoot.statement-print-totals,
  #trailerOwnerStatementTable tfoot.statement-print-totals {
    display: table-row-group !important;
  }
  #ownerStatementTable tfoot.statement-print-totals td,
  #trailerOwnerStatementTable tfoot.statement-print-totals td {
    padding: 5px 4px !important;
    border-top: 1.5pt solid #1f3b52 !important;
    border-bottom: 0.75pt solid #1f3b52 !important;
    background: #eef2f6 !important;
    color: #0f172a !important;
    font-size: 9pt !important;
    font-weight: 800 !important;
    white-space: nowrap;
  }
  .professional-table th,
  .professional-table td,
  .report-table th,
  .report-table td {
    padding: 3px 4px !important;
    font-size: 8.5pt !important;
    line-height: 1.35 !important;
    border-color: #b8c4cf !important;
    overflow-wrap: anywhere;
  }
  .professional-table thead th,
  .report-table thead th {
    background: #eef2f6 !important;
    color: #1f3b52 !important;
    font-weight: 800 !important;
  }
  .professional-table tbody tr,
  .report-table tbody tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .professional-table tbody tr:hover td {
    background: transparent !important;
  }
  /* عمود الإجراءات (⋮) لا معنى له على الورق: يُخفى رأسه وخلاياه معًا
     (العمود الأخير فقط، وهو موضع قائمة الإجراءات في كل الجداول). */
  .professional-table:has(tbody .table-action-dropdown) > thead > tr > th:last-child,
  .professional-table:has(tbody .table-action-dropdown) > tbody > tr > td:last-child {
    display: none !important;
  }
  /* 7) نماذج الإدخال (تُطبع فقط إن كانت جزءًا من البيانات المعروضة) */
  .addTransForm,
  .journal-entry-container,
  .quick-add-card,
  .form-header-card,
  .entry-side {
    box-shadow: none !important;
    border: 0.75pt solid #b8c4cf !important;
    margin-bottom: 10px !important;
    background: #fff !important;
  }
}
/* 🪟 غلاف المودال الموحّد (بديل آمن لسياسة CSP عن الأنماط المضمّنة).
   يُستخدم مع .card-box لتقديم بطاقة حوار في منتصف الشاشة فوق طبقة تعتيم. */
.entity-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.2s ease;
}

/* بطاقة حوار المودال: تستخدم متغيّرات السمة (فاتح/داكن) بدل اللون الأبيض الثابت. */
.account-modal-card {
  width: 100%;
  max-width: 440px;
  padding: 24px;
  background: var(--surface-color);
  color: var(--text-color-primary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: 0 20px 40px var(--shadow-color);
}
.account-modal-card .account-modal-actions {
  margin-top: 18px;
}

/* حركة الظهور التدريجي — مُستخدَمة في الشاشات/النوافذ/التقارير (نُقلت من ملف صفحة أُلغيت) */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes spin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(359deg);
  }
}
@keyframes spinClockwise {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spinCounterClockwise {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes logoGlowPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 2px #7fb3d5);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.1);
    filter: drop-shadow(0 0 12px #7fb3d5);
    opacity: 1;
  }
}
/* 🚚 Link Owner & Cars Live Panel Styling */
.link-owner-cars-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}

.owner-live-cars-card {
  background: var(--surface-muted);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 15px var(--shadow-color);
}
.owner-live-cars-card .card-header-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--primary-color);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 12px;
}

.owner-cars-list-body {
  min-height: 120px;
  max-height: 250px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.owner-cars-list-body .empty-list-placeholder {
  color: var(--text-color-secondary);
  font-size: 0.85rem;
  text-align: center;
  padding: 30px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0.7;
}
.owner-cars-list-body .car-item-chip {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-color-primary);
  animation: fadeIn 0.3s ease;
}
.owner-cars-list-body .car-item-chip i {
  color: var(--accent-color);
}
.owner-cars-list-body .car-item-chip .car-tag {
  background: var(--accent-soft);
  color: var(--accent-color);
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 800;
}

.btn-edit-action {
  padding: 6px 14px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(37, 99, 235, 0.1);
  color: var(--accent-color);
  font-weight: 700;
  transition: all 0.2s ease;
}
.btn-edit-action:hover {
  background: var(--accent-fill);
  color: var(--text-on-accent);
}

.sub-info-block {
  display: block;
  margin-top: 3px;
  font-size: 0.85rem;
  color: var(--text-color-secondary);
}

.sub-info-time {
  display: block;
  margin-top: 3px;
  font-size: 0.8rem;
  color: var(--text-color-secondary);
}

/* 🚫 Not Found Page Styling */
.error-page-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  padding: 20px;
}

.error-card-container {
  text-align: center;
  max-width: 600px;
  width: 100%;
  padding: 50px 30px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  background: var(--surface-card);
}
.error-card-container .error-code {
  font-size: 7rem;
  font-weight: 900;
  color: var(--accent-color);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 25px;
}
.error-card-container .error-code .zero-wrapper {
  animation: floatSlow 3s ease-in-out infinite;
}
.error-card-container .error-code .zero-wrapper i {
  font-size: 5rem;
  color: var(--text-color-secondary);
  opacity: 0.8;
}
.error-card-container .error-text {
  margin-bottom: 35px;
}
.error-card-container .error-text h2 {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text-color);
  margin-bottom: 12px;
}
.error-card-container .error-text p {
  color: var(--text-color-secondary);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 450px;
  margin: 0 auto;
}
.error-card-container .error-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}
.error-card-container .error-actions a {
  text-decoration: none;
  color: var(--text-on-accent);
  padding: 8px 12px;
  border-radius: 12px;
  background-color: var(--primary-fill);
}
.error-card-container .error-actions button {
  cursor: pointer;
  border: 0;
  color: var(--text-on-accent);
  padding: 10px 12px;
  border-radius: 12px;
  background-color: var(--primary-fill);
  font-weight: 700;
}
.error-card-container .error-bg-decoration {
  position: absolute;
  top: -50px;
  right: -50px;
  width: 150px;
  height: 150px;
  background: var(--accent-fill);
  opacity: 0.05;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(10deg);
  }
}
/* ↔️ حاويات التمرير الأفقي: شريط التمرير مخفي مع إبقاء التمرير والسحب الأفقي
   (السحب بالماوس في scripts/js/classes.js → initHorizontalDragScroll).
   هذه الحاويات بلا ارتفاع محدود فلا تمرير رأسي فعلي فيها، لذا تصفير عرض/ارتفاع
   شريط webkit آمن ولا يمسّ قدرة الحاوية على التمرير. */
.kpi-grid-container.kpi-scroll-row,
.table-responsive,
.transfers-table-responsive,
.report-table-wrapper,
.section-table,
.side-content {
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.kpi-grid-container.kpi-scroll-row::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.transfers-table-responsive::-webkit-scrollbar,
.report-table-wrapper::-webkit-scrollbar,
.section-table::-webkit-scrollbar,
.side-content::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.kpi-grid-container.kpi-scroll-row.is-h-dragging,
.table-responsive.is-h-dragging,
.transfers-table-responsive.is-h-dragging,
.report-table-wrapper.is-h-dragging,
.section-table.is-h-dragging,
.side-content.is-h-dragging {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
  scroll-snap-type: none !important;
  scroll-behavior: auto;
}

/* مؤشر السحب للحاويات الأفقية الدائمة (لا تُطبَّق على .table-responsive لأنها
   غير قابلة للتمرير أفقيًا على سطح المكتب حيث overflow: visible). */
.kpi-grid-container.kpi-scroll-row,
.transfers-table-responsive,
.report-table-wrapper {
  cursor: grab;
}

/* 🔘 Table Action Dropdown Menu Styling */
.table-responsive {
  overflow: visible !important;
}

.table-action-dropdown {
  position: relative;
  display: inline-block;
}
.table-action-dropdown .btn-dropdown-toggle {
  background-color: transparent;
  border: 0;
  border-radius: 8px;
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  color: var(--primary-color);
  transition: all 0.2s ease;
}
.table-action-dropdown .btn-dropdown-toggle:hover {
  background: var(--surface-muted);
  color: var(--accent-color);
  border-color: var(--border-color);
}
.table-action-dropdown .btn-dropdown-toggle svg {
  width: 20px;
  height: 20px;
}
.table-action-dropdown .table-dropdown-menu {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 10px 30px var(--shadow-color);
  z-index: 99999;
  min-width: 170px;
  padding: 6px;
  text-align: right;
}
.table-action-dropdown .table-dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--text-color-primary);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 700;
  transition: background 0.2s ease;
  background: transparent;
  border: none;
  width: 100%;
  cursor: pointer;
  text-align: right;
}
.table-action-dropdown .table-dropdown-menu .dropdown-item:hover {
  background: var(--hover-background);
  color: var(--accent-color);
}
.table-action-dropdown .table-dropdown-menu {
  /* عنصر معلوماتي غير قابل للنقر داخل القائمة (حالة الحساب: محمي/تحليلي) */
}
.table-action-dropdown .table-dropdown-menu .dropdown-note {
  color: var(--text-color-secondary);
  font-size: 0.8rem;
  cursor: default;
}
.table-action-dropdown .table-dropdown-menu .dropdown-note:hover {
  background: transparent;
  color: var(--text-color-secondary);
}

/* 📋 List Directory Page Table Styles */
.col-action-dropdown {
  width: 90px;
  text-align: center;
}

.col-code-id {
  width: 80px;
  text-align: center;
}

/* 🧮 شرائح الأعداد: تمييز أرقام رؤوس البطاقات وعدّادات النشاط داخل صفوف الجداول.
   الأرقام بخط ثابت العرض (tabular-nums) لتصطف على عمود واحد وتسهل المقارنة البصرية. */
.header-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--accent-color);
  font-size: 0.8rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.7;
}

.count-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--accent-color);
  font-size: 0.83rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  /* عدّاد صفري: هادئ بصريًا حتى تبرز الصفوف ذات النشاط من نظرة واحدة */
}
.count-chip.is-zero {
  background: var(--surface-muted);
  color: var(--text-color-secondary);
  font-weight: 700;
}

/* وحدة العملة داخل خلايا المبالغ: صغيرة وهادئة حتى يبقى الرقم هو العنصر البارز */
.amount-unit {
  font-size: 0.72em;
  font-weight: 700;
  opacity: 0.75;
  white-space: nowrap;
}

/* 🗂️ حالة الجدول الفارغة: أيقونة في سطر مستقل أعلى النص مع مساحة رأسية مريحة.
   البادئة `body main #content` مقصودة لمساواة أولوية قواعد `.professional-table td`
   (نفس الدرجة + ترتيب أحدث) حتى تُطبَّق الحشوة والحجم بدل أن تتجاوزها القواعد الأساسية. */
body main #content td.table-empty-state {
  padding: 34px 16px;
  text-align: center;
  color: var(--text-color-secondary);
  font-size: 0.92rem;
}
body main #content td.table-empty-state > i {
  display: block;
  margin-bottom: 10px;
  font-size: 1.9rem;
  color: var(--accent-color);
  opacity: 0.85;
}

/* 📝 ملاحظة صغيرة أسفل عنوان بطاقة الجدول (لتوضيح نطاق الأرقام أو الفترة) */
.card-header-note {
  display: block;
  margin-top: 3px;
  color: var(--text-color-secondary);
  font-size: 0.78rem;
  font-weight: 600;
}

/* 📎 سطر ثانوي صغير داخل خلية الجدول (مثال: وقت التسجيل تحت التاريخ في قائمة المستخدمين).
   نسخة عامة من نمط سطر النقلات الفرعي، لأن ذلك النمط مقيَّد بجدول النقلات وحده. */
.cell-subline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 3px;
  color: var(--text-color-secondary);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.cell-subline > i {
  flex: 0 0 auto;
  font-size: 0.7rem;
}

.btn-list-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  text-decoration: none;
  background: rgba(37, 99, 235, 0.1);
  color: var(--accent-color);
  font-weight: 700;
  transition: all 0.2s ease;
}
.btn-list-action:hover {
  background: var(--accent-fill);
  color: var(--text-on-accent);
}

/* 📄 View Transfer & Modern Card Grid Components */
.transfer-view-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  padding: 20px;
}

.transfer-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  text-align: center;
  margin-bottom: 24px;
}
.transfer-metrics-grid .metric-box {
  background: var(--surface-muted);
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
}
.transfer-metrics-grid .metric-box .metric-label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-color-secondary);
  margin-bottom: 6px;
  font-weight: 700;
}
.transfer-metrics-grid .metric-box .metric-value {
  font-size: 1.3rem;
  font-weight: 900;
  font-family: monospace;
}

/* 📊 Dashboard & Welcome Banner Styling */
.dashboard-welcome-banner {
  background: linear-gradient(135deg, var(--primary-fill) 0%, var(--accent-fill) 100%);
  color: var(--text-on-accent);
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 15px 40px var(--shadow-color);
}
.dashboard-welcome-banner h2 {
  color: var(--text-on-accent);
  font-size: 1.8rem;
  margin-bottom: 8px;
  font-weight: 900;
}
.dashboard-welcome-banner p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.05rem;
  margin: 0;
  line-height: 1.6;
}
.dashboard-welcome-banner .dashboard-banner-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.dashboard-welcome-banner .dashboard-banner-actions .btn-banner-primary {
  background: var(--accent-fill);
  color: var(--text-on-accent);
  padding: 12px 24px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}
.dashboard-welcome-banner .dashboard-banner-actions .btn-banner-primary:hover {
  background: var(--primary-fill);
  transform: translateY(-1px);
}
.dashboard-welcome-banner .dashboard-banner-actions .btn-banner-secondary {
  background: var(--accent-fill);
  color: var(--text-on-accent);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 12px 24px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}
.dashboard-welcome-banner .dashboard-banner-actions .btn-banner-secondary:hover {
  background: var(--primary-fill);
  transform: translateY(-1px);
}

.dashboard-shortcuts-card {
  padding: 24px;
}
.dashboard-shortcuts-card .dashboard-shortcuts-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--primary-color);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dashboard-shortcuts-card .dashboard-shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}
.dashboard-shortcuts-card .dashboard-shortcuts-grid .shortcut-item {
  padding: 15px;
  border-radius: 12px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  background: var(--surface-muted);
  color: var(--text-color-primary);
  border: 1px solid var(--border-color);
  transition: all 0.2s ease;
}
.dashboard-shortcuts-card .dashboard-shortcuts-grid .shortcut-item:hover {
  background: var(--hover-background);
  border-color: var(--accent-color);
  color: var(--accent-color);
  transform: translateY(-2px);
}
.dashboard-shortcuts-card .dashboard-shortcuts-grid .shortcut-item i {
  font-size: 1.2rem;
}

.dashboard-table-header-link {
  font-size: 0.85rem;
  padding: 6px 14px;
  text-decoration: none;
}

/* 📝 تنسيق فورم تعديل الكيانات والعملاء */
#editEntityPageContainer .card-box {
  max-width: 800px;
  margin: 30px auto;
  padding: 30px;
  background: var(--surface-color, #fff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 16px;
  box-shadow: 0 10px 30px var(--shadow-color, rgba(15, 23, 42, 0.05));
}
#editEntityPageContainer .card-box .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--surface-muted, #f1f5f9);
  padding-bottom: 16px;
  margin-bottom: 24px;
}
#editEntityPageContainer .card-box .card-header h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--primary-color, #1272B8);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
#editEntityPageContainer .card-box .card-header .btn-secondary-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--surface-muted, #f1f5f9);
  color: var(--text-color-secondary, #475569);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid var(--border-color, #cbd5e1);
  transition: all 0.25s ease;
}
#editEntityPageContainer .card-box .card-header .btn-secondary-action:hover {
  background: var(--primary-fill);
  color: var(--text-on-accent);
  border-color: var(--primary-fill);
  box-shadow: 0 4px 12px rgba(18, 114, 184, 0.2);
}
#editEntityPageContainer .card-box .form-content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  text-align: right;
}
#editEntityPageContainer .card-box .form-content .col-lg-4 {
  flex: 1 1 calc(33.333% - 14px);
  min-width: 220px;
}
@media (max-width: 768px) {
  #editEntityPageContainer .card-box .form-content .col-lg-4 {
    flex: 1 1 100%;
  }
}
#editEntityPageContainer .card-box .form-content .col-lg-6 {
  flex: 1 1 calc(50% - 12px);
  min-width: 280px;
}
@media (max-width: 768px) {
  #editEntityPageContainer .card-box .form-content .col-lg-6 {
    flex: 1 1 100%;
  }
}
#editEntityPageContainer .card-box .form-content .col-lg-12 {
  flex: 0 0 100%;
}
#editEntityPageContainer .card-box .form-content label {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-color-primary, #0f172a);
  margin-bottom: 8px;
}
#editEntityPageContainer .card-box .form-content .form-control {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1.5px solid var(--border-color, #cbd5e1);
  background: var(--input-bg, #f8fafc);
  color: var(--text-color-primary, #0f172a);
  font-size: 0.95rem;
  font-weight: 600;
  transition: all 0.2s ease;
}
#editEntityPageContainer .card-box .form-content .form-control:focus {
  border-color: var(--primary-color);
  background: var(--surface-color, #fff);
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(18, 114, 184, 0.15));
  outline: none;
}

/* ==========================================================================
   هياكل التحميل — Skeleton Loaders (بنمط فيسبوك)
   تُعرض داخل أماكن البيانات قبل وصولها، ثم تستبدلها البيانات الحقيقية.
   العرض يعتمد على فئات (بدل الأنماط المضمّنة) للتوافق مع سياسة CSP.
   ========================================================================== */
@keyframes skeletonShimmer {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}
.skeleton {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background-color: var(--skeleton-base, #e9eef4);
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background-image: linear-gradient(90deg, transparent 0%, var(--skeleton-shine, rgba(255, 255, 255, 0.85)) 50%, transparent 100%);
  animation: skeletonShimmer 1.4s ease-in-out infinite;
  will-change: transform;
}

.skeleton-line {
  height: 12px;
  border-radius: 6px;
}

.skeleton-title {
  height: 18px;
  border-radius: 8px;
}

.skeleton-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.skeleton-chip {
  width: 64px;
  height: 20px;
  border-radius: 999px;
}

/* نسب العرض */
.sk-w-25 {
  width: 25%;
}

.sk-w-35 {
  width: 35%;
}

.sk-w-45 {
  width: 45%;
}

.sk-w-55 {
  width: 55%;
}

.sk-w-65 {
  width: 65%;
}

.sk-w-75 {
  width: 75%;
}

.sk-w-85 {
  width: 85%;
}

.sk-w-100 {
  width: 100%;
}

/* صفوف الجداول */
tr.skeleton-tr > td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--border-color);
}
tr.skeleton-tr > td .skeleton {
  margin-inline: auto;
}

tr.skeleton-tr:last-child > td {
  border-bottom: 0;
}

/* كتل نصية وقوائم وبطاقات */
.skeleton-lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 6px;
}

.skeleton-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.skeleton-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
  padding: 10px 4px;
}

.skeleton-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--surface-color);
}

/* قيمة رقمية (إحصائية/إجمالي) تُستبدل مؤقتًا بهيكل تحميل حتى وصول الرقم */
.skeleton-value {
  display: inline-block;
  width: 84px;
  height: 14px;
  border-radius: 6px;
  vertical-align: middle;
}
.skeleton-value.is-short {
  width: 46px;
}

/* صفوف نماذج (مثل أسطر فورم القيد) قبل تحميل بياناتها */
.skeleton-form-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 0.8fr;
  align-items: center;
  gap: 12px;
  padding: 14px 12px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--surface-color);
}
@media (max-width: 768px) {
  .skeleton-form-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* غطاء هياكل الحقول لصفحات التعديل أثناء جلب بياناتها */
.form-body.is-data-loading {
  position: relative;
}
.form-body.is-data-loading > .form-content {
  visibility: hidden;
}

.form-skeleton-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--surface-color);
  border-radius: inherit;
  padding: 18px 16px;
  overflow: hidden;
}

.skeleton-form-panel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 18px 16px;
}

.skeleton-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* هيكل الصفحة الكامل الذي يظهر فورًا عند طلب صفحة جديدة (قبل وصول HTML الخاص بها) */
.skeleton-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0 24px;
}

.skeleton-page-title {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--surface-color);
}

.skeleton-page-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--surface-color);
}

.skeleton-page-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.skeleton-page-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.skeleton-page-kpi {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--surface-color);
}

.skeleton-page-table {
  gap: 0;
}

.skeleton-page-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--border-color);
}
.skeleton-page-row:last-child {
  border-bottom: 0;
}

/* حالة تعذّر تحميل الصفحة: لا يبقى محتوى الصفحة السابقة معروضًا */
.page-load-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 45vh;
  padding: 32px 20px;
  text-align: center;
  border: 1px dashed var(--border-color);
  border-radius: 18px;
  background: var(--surface-color);
}
.page-load-error i {
  font-size: 2rem;
  color: var(--danger-color);
}
.page-load-error p {
  margin: 0;
  color: var(--text-color-secondary);
  font-weight: 600;
}

/* ==========================================================================
   🔘 مفاتيح التشغيل الموحّدة (Checkbox → Switch)
   قاعدة عامة تُطبَّق تلقائيًا على كل input[type="checkbox"] في التطبيق — الحالي
   والمستقبلي — بنفس شكل مفتاح ميزان المراجعة (مسار + مؤشّر متحرك).
   المفاتيح المخصّصة (.tb-view-toggle و .setting-switch) تتجاوزها بأنماطها
   الأكثر تخصيصًا فتبقى كما هي. تُغلَّف الحقول بشريحة .switch-pill عند الحاجة.
   ========================================================================== */
input[type=checkbox] {
  -webkit-appearance: none;
  appearance: none;
  inline-size: 38px;
  block-size: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background-color: var(--border-color);
  background-image: radial-gradient(circle at center, var(--surface-color) 0 7.5px, transparent 8px);
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: right 2px center;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color 0.22s ease, background-position 0.22s ease;
}
input[type=checkbox]:checked {
  background-color: var(--accent-fill);
  background-position: left 2px center;
}
input[type=checkbox] {
  /* في السياق اللاتيني ينعكس اتجاه الحركة تلقائيًا */
}
input[type=checkbox]:dir(ltr) {
  background-position: left 2px center;
}
input[type=checkbox]:dir(ltr):checked {
  background-position: right 2px center;
}
input[type=checkbox]:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}
input[type=checkbox]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* شريحة موحّدة حول المفتاح ونصّه (نفس شكل مفتاح ميزان المراجعة) */
.switch-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 5px 12px;
  border: 1.5px solid var(--border-color);
  border-radius: 12px;
  background: var(--input-bg);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.switch-pill:hover {
  border-color: var(--primary-color);
}
.switch-pill:focus-within {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px rgba(23, 59, 64, 0.1);
}

@media (max-width: 768px) {
  .skeleton-page-filters,
  .skeleton-page-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .skeleton-page-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .skeleton-page-row span:nth-child(n+4) {
    display: none;
  }
}
/* ==========================================================================
   📒 قسم الدفاتر وكشوف الحسابات — ترويسة مضغوطة وأزرار أيقونية
   تُفعَّل بإضافة الصنف is-compact-header إلى .accounts-page-wrapper داخل الصفحة،
   فلا تتأثر بقية صفحات التطبيق التي تشترك في نفس البنية.
   الهدف: تقليل ارتفاع (العنوان + البطاقات التجميعية + الفلاتر) مع الحفاظ على كل
   البيانات، وتحويل أزرار الترويسة إلى أيقونات فقط مع تلميح يظهر عند المرور/التركيز.
   ========================================================================== */
.accounts-page-wrapper.is-compact-header {
  padding: 14px;
}
.accounts-page-wrapper.is-compact-header .page-title-card.flex-title-card {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  margin-bottom: 8px;
  border-radius: 14px;
}
.accounts-page-wrapper.is-compact-header .page-title-card.flex-title-card .title-info {
  flex: 1 1 auto;
  min-width: 0;
}
.accounts-page-wrapper.is-compact-header .page-title-card.flex-title-card .title-info h2 {
  margin: 0;
  gap: 8px;
  font-size: 1.1rem;
  line-height: 1.4;
}
.accounts-page-wrapper.is-compact-header .page-title-card.flex-title-card .title-info h2 i {
  font-size: 1rem;
}
.accounts-page-wrapper.is-compact-header .page-title-card.flex-title-card .title-info p {
  margin-top: 3px;
  font-size: 0.78rem;
  line-height: 1.45;
}
.accounts-page-wrapper.is-compact-header .page-title-card.flex-title-card .title-actions {
  flex: 0 0 auto;
  gap: 8px;
}
body main #content .accounts-page-wrapper.is-compact-header {
  /* ---------- (2) البطاقات التجميعية (KPI): أقل ارتفاع + أعمدة متعددة بدل التكديس ----------
     القواعد الأساسية لهذه البطاقات مقيَّدة بـ body main #content (معرِّف)، لذا نطابق قوّتها */
}
body main #content .accounts-page-wrapper.is-compact-header .kpi-grid-container {
  gap: 8px;
  margin-bottom: 8px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
}
body main #content .accounts-page-wrapper.is-compact-header .kpi-grid-container .kpi-card {
  padding: 8px 12px;
  gap: 10px;
  border-radius: 12px;
  box-shadow: 0 4px 14px var(--shadow-color);
}
body main #content .accounts-page-wrapper.is-compact-header .kpi-grid-container .kpi-card:hover {
  transform: none;
}
body main #content .accounts-page-wrapper.is-compact-header .kpi-grid-container .kpi-card .kpi-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 1rem;
}
body main #content .accounts-page-wrapper.is-compact-header .kpi-grid-container .kpi-card .kpi-data {
  gap: 1px;
  min-width: 0;
}
body main #content .accounts-page-wrapper.is-compact-header .kpi-grid-container .kpi-card .kpi-data .kpi-title {
  font-size: 0.72rem;
}
body main #content .accounts-page-wrapper.is-compact-header .kpi-grid-container .kpi-card .kpi-data .kpi-amount {
  font-size: 0.92rem;
}
body main #content .accounts-page-wrapper.is-compact-header .kpi-grid-container .kpi-card .kpi-data .kpi-type {
  font-size: 0.66rem;
}
body main #content .accounts-page-wrapper.is-compact-header {
  /* صف أفقي واحد للبطاقات: يتمدد عند الاتساع، ويُمرَّر أفقيًا عند ضيق المساحة.
     شريط التمرير مخفي (انظر قسم حاويات التمرير الأفقي) ويُسحب بالماوس/اللمس. */
}
body main #content .accounts-page-wrapper.is-compact-header .kpi-grid-container.kpi-scroll-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 3px 2px 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
body main #content .accounts-page-wrapper.is-compact-header .kpi-grid-container.kpi-scroll-row::-webkit-scrollbar {
  width: 0;
  height: 0;
}
body main #content .accounts-page-wrapper.is-compact-header .kpi-grid-container.kpi-scroll-row .kpi-card {
  flex: 1 0 215px;
  min-width: 215px;
  padding: 6px 10px;
  gap: 8px;
  border-radius: 10px;
  scroll-snap-align: start;
}
body main #content .accounts-page-wrapper.is-compact-header .kpi-grid-container.kpi-scroll-row .kpi-card .kpi-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  font-size: 0.95rem;
}
body main #content .accounts-page-wrapper.is-compact-header .kpi-grid-container.kpi-scroll-row .kpi-card .kpi-data {
  gap: 0;
}
body main #content .accounts-page-wrapper.is-compact-header .kpi-grid-container.kpi-scroll-row .kpi-card .kpi-data .kpi-title {
  font-size: 0.69rem;
  line-height: 1.2;
}
body main #content .accounts-page-wrapper.is-compact-header .kpi-grid-container.kpi-scroll-row .kpi-card .kpi-data .kpi-amount {
  font-size: 0.88rem;
  line-height: 1.2;
}
body main #content .accounts-page-wrapper.is-compact-header .kpi-grid-container.kpi-scroll-row .kpi-card .kpi-data .kpi-type {
  font-size: 0.63rem;
  line-height: 1.2;
}
.accounts-page-wrapper.is-compact-header .card-box.date-filter-card, .accounts-page-wrapper.is-compact-header .date-filter-card {
  /* ---------- (3) بطاقة الفلاتر: حقول مضغوطة ---------- */
  padding: 10px 14px;
  margin-bottom: 8px;
  border-radius: 14px;
}
.accounts-page-wrapper.is-compact-header .card-box.date-filter-card .filter-inputs-row, .accounts-page-wrapper.is-compact-header .date-filter-card .filter-inputs-row {
  gap: 8px;
}
.accounts-page-wrapper.is-compact-header .card-box.date-filter-card .filter-group, .accounts-page-wrapper.is-compact-header .date-filter-card .filter-group {
  min-width: 118px;
}
.accounts-page-wrapper.is-compact-header .card-box.date-filter-card .filter-group label, .accounts-page-wrapper.is-compact-header .date-filter-card .filter-group label {
  margin-bottom: 3px;
  font-size: 0.76rem;
  gap: 5px;
}
.accounts-page-wrapper.is-compact-header .card-box.date-filter-card .filter-group label i, .accounts-page-wrapper.is-compact-header .date-filter-card .filter-group label i {
  font-size: 0.78rem;
}
.accounts-page-wrapper.is-compact-header .card-box.date-filter-card .filter-group .form-control, .accounts-page-wrapper.is-compact-header .date-filter-card .filter-group .form-control {
  padding: 7px 10px;
  font-size: 0.84rem;
  border-radius: 10px;
}
.accounts-page-wrapper.is-compact-header .card-box.date-filter-card .filter-actions-group, .accounts-page-wrapper.is-compact-header .date-filter-card .filter-actions-group {
  gap: 8px;
  padding-bottom: 0;
  align-items: flex-end;
  margin-inline-start: auto;
}
.accounts-page-wrapper.is-compact-header .title-actions {
  /* ---------- (4) أزرار الترويسة: أيقونات فقط ---------- */
}
.accounts-page-wrapper.is-compact-header .title-actions .btn-primary-action,
.accounts-page-wrapper.is-compact-header .title-actions .btn-secondary-action {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  gap: 0;
  justify-content: center;
  border-radius: 11px;
  font-size: 0.95rem;
}
.accounts-page-wrapper.is-compact-header {
  /* ---------- (4-ب) زر تطبيق الفلترة: الزر الوحيد داخل بطاقة الفلاتر (بنص ظاهر) ---------- */
}
.accounts-page-wrapper.is-compact-header .date-filter-card .filter-actions-group .btn-primary-action {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  height: 40px;
  padding: 0 18px;
  gap: 8px;
  justify-content: center;
  border-radius: 11px;
  font-size: 0.88rem;
}
.accounts-page-wrapper.is-compact-header .date-filter-card .filter-actions-group .btn-label {
  display: inline;
}
.accounts-page-wrapper.is-compact-header .title-actions [data-tip],
.accounts-page-wrapper.is-compact-header .date-filter-card [data-tip] {
  /* ---------- (5) تلميح احترافي بدون سكربتات (CSS فقط) ---------- */
  position: relative;
}
.accounts-page-wrapper.is-compact-header .title-actions [data-tip]::after,
.accounts-page-wrapper.is-compact-header .date-filter-card [data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, -4px);
  padding: 5px 9px;
  border-radius: 8px;
  background: var(--text-color-primary);
  color: var(--background-color);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: 0 8px 20px var(--shadow-color);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 1200;
}
.accounts-page-wrapper.is-compact-header .title-actions [data-tip]::before,
.accounts-page-wrapper.is-compact-header .date-filter-card [data-tip]::before {
  content: "";
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: var(--text-color-primary);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0.18s;
  z-index: 1200;
}
.accounts-page-wrapper.is-compact-header .title-actions [data-tip]:hover::after, .accounts-page-wrapper.is-compact-header .title-actions [data-tip]:focus-visible::after,
.accounts-page-wrapper.is-compact-header .date-filter-card [data-tip]:hover::after,
.accounts-page-wrapper.is-compact-header .date-filter-card [data-tip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.accounts-page-wrapper.is-compact-header .title-actions [data-tip]:hover::before, .accounts-page-wrapper.is-compact-header .title-actions [data-tip]:focus-visible::before,
.accounts-page-wrapper.is-compact-header .date-filter-card [data-tip]:hover::before,
.accounts-page-wrapper.is-compact-header .date-filter-card [data-tip]:focus-visible::before {
  opacity: 1;
  visibility: visible;
}
.accounts-page-wrapper.is-compact-header .transfers-summary {
  /* ---------- (6) قسم إجماليات النقلات للفترة المحددة ---------- */
  margin-bottom: 8px;
  transition: opacity 0.2s ease;
  /* أثناء جلب البيانات: تخفيت هادئ بدل قفزة في التخطيط */
}
.accounts-page-wrapper.is-compact-header .transfers-summary.is-loading {
  opacity: 0.5;
  pointer-events: none;
}
.accounts-page-wrapper.is-compact-header .transfers-summary .summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
  padding: 0 2px;
}
.accounts-page-wrapper.is-compact-header .transfers-summary .summary-head .summary-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-color-primary);
}
.accounts-page-wrapper.is-compact-header .transfers-summary .summary-head .summary-title i {
  color: var(--accent-color);
  font-size: 0.82rem;
}
.accounts-page-wrapper.is-compact-header .transfers-summary .kpi-grid-container {
  /* البطاقات تأخذ تنسيقها المضغوط من القسم (2) أعلاه */
  margin-bottom: 0;
}

/* عند الطباعة: لا تُطبع أزرار الترويسة الأيقونية (تبقى حقول الفلترة والقيم) */
@media print {
  .accounts-page-wrapper.is-compact-header .title-actions,
  .accounts-page-wrapper.is-compact-header .filter-actions-group {
    display: none !important;
  }
  /* الطباعة: تُطوى البطاقات في صفوف متعددة بدل التمرير الأفقي، لتظهر كل البطاقات */
  body main #content .accounts-page-wrapper.is-compact-header .kpi-grid-container.kpi-scroll-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    padding: 0 !important;
    gap: 4px !important;
    scrollbar-width: none;
  }
  body main #content .accounts-page-wrapper.is-compact-header .kpi-grid-container.kpi-scroll-row::-webkit-scrollbar {
    display: none;
  }
  body main #content .accounts-page-wrapper.is-compact-header .kpi-grid-container.kpi-scroll-row .kpi-card {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 5px 8px !important;
    gap: 6px !important;
    box-shadow: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  body main #content .accounts-page-wrapper.is-compact-header .kpi-grid-container.kpi-scroll-row .kpi-card .kpi-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.8rem !important;
  }
  body main #content .accounts-page-wrapper.is-compact-header .kpi-grid-container.kpi-scroll-row .kpi-card .kpi-data .kpi-title {
    font-size: 8pt !important;
    line-height: 1.15 !important;
  }
  body main #content .accounts-page-wrapper.is-compact-header .kpi-grid-container.kpi-scroll-row .kpi-card .kpi-data .kpi-amount {
    font-size: 9pt !important;
    line-height: 1.15 !important;
  }
  body main #content .accounts-page-wrapper.is-compact-header .kpi-grid-container.kpi-scroll-row .kpi-card .kpi-data .kpi-type {
    font-size: 7pt !important;
    line-height: 1.15 !important;
  }
}
/* الشاشات الصغيرة: شبكة بعمودين للفلاتر بدل عمود واحد طويل */
@media screen and (max-width: 992px) {
  .accounts-page-wrapper.is-compact-header {
    padding: 10px;
  }
  .accounts-page-wrapper.is-compact-header .page-title-card.flex-title-card {
    flex-wrap: wrap;
    padding: 8px 12px;
    gap: 8px;
  }
  .accounts-page-wrapper.is-compact-header .page-title-card.flex-title-card .title-actions {
    width: auto;
    justify-content: flex-end;
  }
  body main #content .accounts-page-wrapper.is-compact-header .kpi-grid-container {
    gap: 6px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  }
  .accounts-page-wrapper.is-compact-header .card-box.date-filter-card, .accounts-page-wrapper.is-compact-header .date-filter-card {
    padding: 10px 12px;
  }
  .accounts-page-wrapper.is-compact-header .card-box.date-filter-card .filter-inputs-row, .accounts-page-wrapper.is-compact-header .date-filter-card .filter-inputs-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: 8px 10px;
  }
  .accounts-page-wrapper.is-compact-header .card-box.date-filter-card .filter-inputs-row .filter-group, .accounts-page-wrapper.is-compact-header .date-filter-card .filter-inputs-row .filter-group {
    flex: initial;
    width: auto;
    min-width: 0;
  }
  .accounts-page-wrapper.is-compact-header .card-box.date-filter-card .filter-inputs-row .filter-group.flex-2, .accounts-page-wrapper.is-compact-header .card-box.date-filter-card .filter-inputs-row .filter-group.main-account-group, .accounts-page-wrapper.is-compact-header .date-filter-card .filter-inputs-row .filter-group.flex-2, .accounts-page-wrapper.is-compact-header .date-filter-card .filter-inputs-row .filter-group.main-account-group {
    grid-column: 1/-1;
  }
  .accounts-page-wrapper.is-compact-header .card-box.date-filter-card .filter-inputs-row .filter-group, .accounts-page-wrapper.is-compact-header .date-filter-card .filter-inputs-row .filter-group {
    /* حقل بعرض الصف كاملاً (يُستخدم لضبط اقتران الحقول في الشبكة) */
  }
  .accounts-page-wrapper.is-compact-header .card-box.date-filter-card .filter-inputs-row .filter-group.is-full-row, .accounts-page-wrapper.is-compact-header .date-filter-card .filter-inputs-row .filter-group.is-full-row {
    grid-column: 1/-1;
  }
  .accounts-page-wrapper.is-compact-header .card-box.date-filter-card .filter-inputs-row, .accounts-page-wrapper.is-compact-header .date-filter-card .filter-inputs-row {
    /* حقول (العرض/الترتيب) في سجل النقلات مقيَّدة بعرض أقصى يناسب صف سطح المكتب فقط */
  }
  .accounts-page-wrapper.is-compact-header .card-box.date-filter-card .filter-inputs-row .transfers-limit-filter,
  .accounts-page-wrapper.is-compact-header .card-box.date-filter-card .filter-inputs-row .transfers-sort-filter, .accounts-page-wrapper.is-compact-header .date-filter-card .filter-inputs-row .transfers-limit-filter,
  .accounts-page-wrapper.is-compact-header .date-filter-card .filter-inputs-row .transfers-sort-filter {
    max-width: none;
  }
  .accounts-page-wrapper.is-compact-header .card-box.date-filter-card .filter-inputs-row .filter-actions-group, .accounts-page-wrapper.is-compact-header .date-filter-card .filter-inputs-row .filter-actions-group {
    grid-column: 1/-1;
    width: 100%;
    margin: 0;
    justify-content: flex-end;
  }
}
/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
    animation: none;
    opacity: 0;
  }
}
/* ==========================================================================
   🔗 ترويسة صفحات القوائم والكشوفات: شريط عنوان رفيع (كتابة فقط) + بطاقة فلاتر بعرض كامل
   البنية المطلوبة في الصفحة (داخل .accounts-page-wrapper):

       <div class="page-header-row">
           <div class="page-title-card flex-title-card">…العنوان والوصف فقط…</div>
           <div class="title-actions">…أزرار الصفحة…</div>
       </div>
       <div class="date-filter-card">…الفلاتر بعرض كامل…</div>

   - شريط العنوان (.page-title-card) خارج حاوي الفلاتر: ارتفاع ثابت رفيع (35px)
     وكتابة فقط (عنوان + وصف مختصر + شريحة الفترة) بخط أصغر، والزائد يُقتطع
     بثلاث نقاط بدل زيادة الارتفاع.
   - أزرار الصفحة (.title-actions) تبقى في نفس صف الشريط وفي طرفه، فلا ترفع
     ارتفاعه ولا تشارك الفلاتر صفّها.
   - بطاقة الفلاتر (.date-filter-card) تستعيد صندوقها الأصلي وتأخذ العرض الكامل
     أسفل الشريط مباشرة.
   - حقول التاريخ وحدات مضغوطة (شريحة تسمية + الحقل) متراكبة رأسيًا، بنفس
     نمط رؤوس التقارير في .report-container.
   - البادئة body main #content تضمن الأولوية على قواعد is-compact-header
     المشتركة بين كل صفحات الدفاتر (وهي أسبق في الملف).
   ========================================================================== */
body main #content .page-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  /* أزرار الصفحة: في طرف صف الشريط، لا تشارك الفلاتر صفّها */
}
body main #content .page-header-row > .title-actions {
  padding: 8px;
}

/* شريط العنوان: رفيع (35px) وكتابة فقط — بلا أزرار */
body main #content .page-header-row > .page-title-card.flex-title-card {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 12px;
  margin: 0;
  gap: 10px;
  overflow: hidden;
}
body main #content .page-header-row > .page-title-card.flex-title-card .title-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-width: 0;
}
body main #content .page-header-row > .page-title-card.flex-title-card .title-info h2 {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body main #content .page-header-row > .page-title-card.flex-title-card .title-info h2 i {
  margin-inline-end: 6px;
  font-size: 0.85rem;
}
body main #content .page-header-row > .page-title-card.flex-title-card .title-info p {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-color-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body main #content .page-header-row > .page-title-card.flex-title-card .title-info p i {
  font-size: 0.72rem;
}
body main #content .page-header-row > .page-title-card.flex-title-card {
  /* شريحة الفترة: تبقى ظاهرة بجانب الوصف وبمقاس مضغوط */
}
body main #content .page-header-row > .page-title-card.flex-title-card .period-badge {
  flex: 0 0 auto;
  margin-top: 0;
  padding: 1px 8px;
  font-size: 0.68rem;
  line-height: 1.6;
}

/* بطاقة الفلاتر: صندوقها الأصلي (من قواعد is-compact-header) والعرض الكامل */
body main #content .date-filter-card .date-filter-form {
  margin: 0;
}
body main #content .date-filter-card {
  /* حقول التاريخ: عمود واحد مضغوط (تاريخان متراكبان) */
}
body main #content .date-filter-card .date-fields {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
body main #content .date-filter-card {
  /* وحدة التاريخ المضغوطة: شريحة التسمية + حقل التاريخ الأصلي */
}
body main #content .date-filter-card .filter-group:has(> input[type=date]) {
  display: inline-flex;
  flex-direction: row;
  align-items: stretch;
  flex: 0 0 auto;
  gap: 0;
  min-width: 0;
  width: fit-content;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  background: var(--input-bg);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body main #content .date-filter-card .filter-group:has(> input[type=date]):hover {
  border-color: var(--primary-color);
}
body main #content .date-filter-card .filter-group:has(> input[type=date]):focus-within {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
body main #content .date-filter-card .filter-group:has(> input[type=date]) {
  /* شريحة التسمية: عرض ثابت حتى تتحاذى الحقول رأسيًا */
}
body main #content .date-filter-card .filter-group:has(> input[type=date]) label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 0 6px;
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: var(--primary-color);
  background: var(--surface-muted);
  border-inline-end: 1px solid var(--border-color);
  white-space: nowrap;
  cursor: pointer;
}
body main #content .date-filter-card .filter-group:has(> input[type=date]) input[type=date] {
  width: 96px;
  min-width: 0;
  height: 24px;
  padding: 0 5px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: var(--primary-color);
  appearance: none;
  -webkit-appearance: none;
}
body main #content .date-filter-card .filter-group:has(> input[type=date]) input[type=date]:focus {
  border: none;
  background: transparent;
  box-shadow: none;
  outline: none;
}
body main #content .date-filter-card .filter-group:has(> input[type=date]) input[type=date] {
  /* أيقونة التقويم الأصلية: مصغّرة وبشفافية خفيفة */
}
body main #content .date-filter-card .filter-group:has(> input[type=date]) input[type=date]::-webkit-calendar-picker-indicator {
  margin: 0;
  padding: 0;
  opacity: 0.55;
  transform: scale(0.85);
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
body main #content .date-filter-card .filter-group:has(> input[type=date]) input[type=date]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  transform: scale(0.95);
}
body main #content .date-filter-card .filter-actions-group {
  padding-bottom: 0;
}

/* ==========================================================================
   🚚 فلتر نوع الحمولة (سائب/معبأ) — كشفا العميل والمورد
   - يظهر فقط عند تفعيل «عرض التشغيل»، ويُخفى بسمة hidden من JavaScript.
   - قاعدة [hidden] صريحة ضرورية لأن .filter-group تضبط display:flex
     فتلغي السلوك الافتراضي لسمة hidden.
   ========================================================================== */
.load-type-filter-group[hidden] {
  display: none !important;
}
.load-type-filter-group select {
  min-width: 130px;
  cursor: pointer;
}

/* كشف المورد: يبقى بعرض محتواه بدل التمدّد على صف كامل، ويشارك الصف مع مفتاح
   «عرض التشغيل» بدل النزول تحته. */
#ownerStatementFilterForm .load-type-filter-group {
  flex: 0 0 auto;
  min-width: 0;
}

/* ==========================================================================
   🧾 كشف حساب العميل — صف فلاتر واحد على سطح المكتب
   - من اليمين: البحث 25% ← التاريخ 30% ← خيارات الشيك بوكس 30%
     ← زر التطبيق «باقي المساحة» (15%).
   - على الشاشات الأضيق يعود العرض إلى صفين ثم إلى عمود واحد.
   مقصور على #customerStatementFilterForm حتى لا تتأثر بقية الصفحات.
   ========================================================================== */
#customerStatementFilterForm .filter-inputs-row {
  display: grid;
  grid-template-columns: minmax(0, 25fr) minmax(0, 30fr) minmax(0, 30fr) minmax(max-content, 15fr);
  grid-template-areas: "search date checks apply";
  align-items: end;
  gap: 10px 12px;
}
#customerStatementFilterForm .filter-inputs-row:not(:has(.customer-search-group)) {
  grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(max-content, 1fr);
  grid-template-areas: "date checks apply";
}
#customerStatementFilterForm .customer-search-group {
  grid-area: search;
  width: 100%;
  max-width: none;
  min-width: 0;
  /* القائمة المنسدلة تبقى أوسع من الحقل الضيق لقراءة أسماء العملاء */
}
#customerStatementFilterForm .customer-search-group .custom-select-dropdown {
  left: auto;
  right: 0;
  min-width: 320px;
  max-width: min(420px, 100vw - 48px);
}
#customerStatementFilterForm .date-fields {
  grid-area: date;
  min-width: 0;
}
#customerStatementFilterForm .customer-checkbox-filters {
  grid-area: checks;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  min-width: 0;
}
#customerStatementFilterForm .customer-transfers-only-filter {
  width: auto;
  min-width: 0;
  justify-content: flex-start;
  padding-top: 0;
  flex: 0 0 auto;
}
#customerStatementFilterForm .load-type-filter-group {
  flex: 0 0 auto;
  min-width: 0;
}
#customerStatementFilterForm .filter-actions-group {
  grid-area: apply;
  width: auto;
  min-width: 0;
  margin-inline-start: 0;
  justify-content: flex-end;
  padding-bottom: 0;
}
#customerStatementFilterForm .payment-method-filter-group {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
#customerStatementFilterForm .payment-method-filter-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-color-secondary, #64748b);
  white-space: nowrap;
}
#customerStatementFilterForm .payment-method-checkboxes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
#customerStatementFilterForm .payment-method-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 3px 8px;
  border: 1px solid var(--border-color, #cbd5e1);
  border-radius: 999px;
  background: var(--input-bg, #f8fafc);
  color: var(--text-color-secondary, #64748b);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
#customerStatementFilterForm .payment-method-chip:hover {
  border-color: var(--primary-color, #0f172a);
}
#customerStatementFilterForm .payment-method-chip:has(input:checked) {
  border-color: var(--primary-color, #0f172a);
  background: var(--accent-soft, rgba(37, 99, 235, 0.12));
  color: var(--primary-color, #0f172a);
}
#customerStatementFilterForm .payment-method-filter-group.is-disabled {
  opacity: 0.55;
}
#customerStatementFilterForm .payment-method-filter-group.is-disabled .payment-method-chip {
  cursor: not-allowed;
}

/* الشاشات المتوسطة: صفان بدل ضغط الأعمدة الأربعة في مساحة ضيقة */
@media screen and (max-width: 1199px) {
  #customerStatementFilterForm .filter-inputs-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "search date" "checks apply";
  }
  #customerStatementFilterForm .filter-inputs-row:not(:has(.customer-search-group)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "date date" "checks apply";
  }
}
/* الهواتف: عمود واحد حتى لا تنضغط العناصر */
@media screen and (max-width: 680px) {
  #customerStatementFilterForm .filter-inputs-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "search search" "date date" "checks checks" "apply apply";
    align-items: end;
    gap: 8px 10px;
  }
  #customerStatementFilterForm .filter-inputs-row:not(:has(.customer-search-group)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "date date" "checks checks" "apply apply";
  }
  #customerStatementFilterForm .customer-search-group {
    grid-area: search;
    width: auto;
    max-width: none;
  }
  #customerStatementFilterForm .date-fields {
    grid-area: date;
  }
  #customerStatementFilterForm .customer-checkbox-filters {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  #customerStatementFilterForm .filter-actions-group {
    grid-area: apply;
    margin-inline-start: 0;
    justify-content: flex-end;
  }
  #customerStatementFilterForm .payment-method-filter-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}
/* الشاشات الضيقة: يبقى الشريط والأزرار في سطر واحد (الشريط يتقلّص ويُقتطع)،
   ويلتفّان إلى سطرين فقط عند ضيق شديد لا يكفي فيه أي عنصر */
@media screen and (max-width: 900px) {
  body main #content .page-header-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  body main #content .page-header-row > .title-actions {
    margin-inline-start: auto;
  }
}
/* ==========================================================================
   🚪 صفحات الضيف (غير مسجَّل الدخول)
   الشريط السفلي جزء من تدفّق الصفحة أسفل المحتوى (غير عائم):
   لا يغطّي المحتوى، ولا نحتاج حجز مسافة له داخل #content.
   النتيجة: إن كان المحتوى أقصر من الشاشة يلتصق الشريط بأسفلها،
   وإن كان أطول يظهر في نهاية المحتوى بعد التمرير.
   ملاحظة: الجلسة المسجَّلة تبقى على الشريط العائم كما هو (الترقيم/حفظ القيد).
   ========================================================================== */
html.is-guest body main #container {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

html.is-guest body main #content {
  flex: 1 0 auto; /* يتمدّد ليدفع الشريط لأسفل الصفحة */
  min-height: 0; /* لا نفرض 100dvh حتى لا يُدفع الشريط خارج الشاشة */
  padding-bottom: calc(var(--content-padding) + 14px);
}

html.is-guest body main .bottom-bar {
  position: static;
  bottom: auto;
  left: auto;
  right: auto;
  height: auto;
  margin: 0;
  padding: 14px clamp(16px, 4vw, 40px);
  background: var(--surface-color);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  border-top: 1px solid var(--border-color);
  border-radius: 0;
  box-shadow: none;
}

/* ==========================================================================
   🖥️ سطح المكتب (شاشات ≥ 993px): قائمة جانبية ثابتة قابلة للتصغير
   ملاحظة: الشاشات الأصغر تبقى على سلوك «الدرج المنزلق» كما هو.
   ========================================================================== */
@media screen and (min-width: 993px) {
  /* ملاحظة: كل القواعد التالية مقصورة على الجلسة المسجَّلة (is-authenticated)
     لأن صفحات الضيوف (الدخول/الرابط الرئيسي) بلا قائمة جانبية وبلا هيدر. */
  /* القائمة ثابتة دائمًا: نتجاهل صنف hide-menu الذي يخص الدرج في الجوال */
  html.is-authenticated body main aside.sidebar {
    width: var(--sidebar-width, 300px);
    transition: width 0.25s ease, box-shadow 0.25s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  html.is-authenticated body main aside.sidebar.hide-menu {
    transform: none;
  }
  /* لا يوجد «درج» على سطح المكتب، فيُخفى زر الإغلاق (زر الهامبرغر يتولى التصغير/التوسيع) */
  html.is-authenticated body main aside.sidebar #user #close-menu {
    display: none;
  }
  /* إزاحة الهيدر وكامل المحتوى بمقدار عرض القائمة حتى لا يختفي أي عنصر */
  html.is-authenticated body main {
    padding-right: var(--sidebar-width, 300px);
    transition: padding-right 0.25s ease;
  }
  /* العناصر العائمة تُزاح أيضًا لتبقى داخل منطقة المحتوى */
  html.is-authenticated body main .bottom-bar {
    right: calc(var(--sidebar-width, 300px) + 5%);
  }
  html.is-authenticated body main .toast-container {
    left: calc(50% - var(--sidebar-width, 300px) / 2);
  }
  /* ---------- الوضع المصغّر (72px): أيقونات فقط ---------- */
  html.is-sidebar-collapsed.is-authenticated body main aside.sidebar #user {
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 12px 8px;
  }
  html.is-sidebar-collapsed.is-authenticated body main aside.sidebar #user .user-pic {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  html.is-sidebar-collapsed.is-authenticated body main aside.sidebar #user .user-meta {
    display: none;
  }
  html.is-sidebar-collapsed.is-authenticated body main aside.sidebar nav {
    padding: 12px 10px 18px;
  }
  html.is-sidebar-collapsed.is-authenticated body main aside.sidebar {
    /* إخفاء نص عنوان القسم مع الإبقاء على الخط الفاصل */
  }
  html.is-sidebar-collapsed.is-authenticated body main aside.sidebar .nav-section-title {
    font-size: 0;
    gap: 0;
    margin: 0 6px 6px;
  }
  html.is-sidebar-collapsed.is-authenticated body main aside.sidebar .nav-section-title::after {
    height: 1px;
  }
  html.is-sidebar-collapsed.is-authenticated body main aside.sidebar .main-menu > li > a,
  html.is-sidebar-collapsed.is-authenticated body main aside.sidebar .main-menu > li > span {
    justify-content: center;
    gap: 0;
    padding: 8px;
    /* إخفاء التسمية والسهم المطوي */
  }
  html.is-sidebar-collapsed.is-authenticated body main aside.sidebar .main-menu > li > a > span,
  html.is-sidebar-collapsed.is-authenticated body main aside.sidebar .main-menu > li > span > span {
    display: none;
  }
  html.is-sidebar-collapsed.is-authenticated body main aside.sidebar .main-menu > li > a:after,
  html.is-sidebar-collapsed.is-authenticated body main aside.sidebar .main-menu > li > span:after {
    display: none;
  }
  html.is-sidebar-collapsed.is-authenticated body main aside.sidebar .main-menu > li > a i,
  html.is-sidebar-collapsed.is-authenticated body main aside.sidebar .main-menu > li > span i {
    width: 34px;
    height: 34px;
    font-size: 14px;
  }
  html.is-sidebar-collapsed.is-authenticated body main aside.sidebar {
    /* القوائم الفرعية لا تُعرض في الوضع المصغّر */
  }
  html.is-sidebar-collapsed.is-authenticated body main aside.sidebar .children {
    display: none !important;
  }
  html.is-sidebar-collapsed.is-authenticated body main aside.sidebar #logout a {
    justify-content: center;
    padding: 10px;
  }
  html.is-sidebar-collapsed.is-authenticated body main aside.sidebar #logout a span {
    display: none;
  }
  /* انعكاس أيقونة الهامبرغر للدلالة على إمكانية التوسيع */
  html.is-sidebar-collapsed.is-authenticated header #display-menu svg {
    transform: rotate(180deg);
  }
  html.is-authenticated header #display-menu svg {
    transition: transform 0.25s ease;
  }
}
/* ==========================================================================
   🔔 تنبيه «شهر مقفل محاسبيًا» — يظهر بجوار حقل التاريخ في نماذج النقلة/القيد.
   - يُضاف عبر attachFiscalLockHint في classes.js (لا يوجد في HTML الأصلي).
   - اللون الكهرماني (warning) للدلالة على منع الكتابة لا على خطأ في البيانات.
   - [hidden] ضروري لأن display:flex يتجاوز سلوك hidden الافتراضي.
   ========================================================================== */
.period-lock-warning {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 8px 0 0;
  padding: 9px 12px;
  border: 1px solid var(--warning-color);
  border-radius: 8px;
  background: var(--warning-soft);
  color: var(--warning-color);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.65;
}
.period-lock-warning > i {
  flex-shrink: 0;
  margin-top: 3px;
}
.period-lock-warning strong {
  font-weight: 800;
}
.period-lock-warning[hidden] {
  display: none;
}

/* تمييز حقل التاريخ نفسه عند وقوعه في شهر مقفل */
input.is-locked-period {
  border-color: var(--warning-color) !important;
  box-shadow: 0 0 0 2px var(--warning-soft);
}

/* 💻 Desktop & Large Screen Styles (Screens >= 601px) */
@media screen and (min-width: 601px) {
  .col-lg-1 {
    width: 8.3333333333%;
    float: right;
  }
  .col-lg-2 {
    width: 16.6666666667%;
    float: right;
  }
  .col-lg-3 {
    width: 25%;
    float: right;
  }
  .col-lg-4 {
    width: 33.3333333333%;
    float: right;
  }
  .col-lg-5 {
    width: 41.6666666667%;
    float: right;
  }
  .col-lg-6 {
    width: 50%;
    float: right;
  }
  .col-lg-7 {
    width: 58.3333333333%;
    float: right;
  }
  .col-lg-8 {
    width: 66.6666666667%;
    float: right;
  }
  .col-lg-9 {
    width: 75%;
    float: right;
  }
  .col-lg-10 {
    width: 83.3333333333%;
    float: right;
  }
  .col-lg-11 {
    width: 91.6666666667%;
    float: right;
  }
  .col-lg-12 {
    width: 100%;
    float: right;
  }
  body main aside.sidebar {
    width: 300px;
  }
  body main #content {
    padding-right: 24px;
    padding-left: 24px;
  }
  body main .transport-home .transport-home-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(330px, 0.9fr);
  }
  .link-owner-cars-wrapper {
    grid-template-columns: 1fr 280px;
  }
}
/* 📱 Responsive Mobile & Tablet Styles (Screens <= 992px) */
@media screen and (max-width: 992px) {
  .col-xs-1 {
    width: 8.3333333333%;
    float: right;
  }
  .col-xs-2 {
    width: 16.6666666667%;
    float: right;
  }
  .col-xs-3 {
    width: 25%;
    float: right;
  }
  .col-xs-4 {
    width: 33.3333333333%;
    float: right;
  }
  .col-xs-5 {
    width: 41.6666666667%;
    float: right;
  }
  .col-xs-6 {
    width: 50%;
    float: right;
  }
  .col-xs-7 {
    width: 58.3333333333%;
    float: right;
  }
  .col-xs-8 {
    width: 66.6666666667%;
    float: right;
  }
  .col-xs-9 {
    width: 75%;
    float: right;
  }
  .col-xs-10 {
    width: 83.3333333333%;
    float: right;
  }
  .col-xs-11 {
    width: 91.6666666667%;
    float: right;
  }
  .col-xs-12 {
    width: 100%;
    float: right;
  }
  body main header {
    min-height: 52px;
    padding: 7px 14px;
  }
  body main aside.sidebar {
    width: min(86vw, 300px);
  }
  body main #content {
    padding: 10px;
    padding-bottom: 150px;
  }
  /* 📱 Universal Mobile Table Responsiveness & Touch Scroll */
  .table-responsive,
  .transfers-table-responsive,
  .report-table-wrapper,
  .section-table,
  .side-content {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 12px;
  }
  table,
  .professional-table,
  .report-table,
  .transfers-table,
  .entries-table,
  .voucher-lines-table,
  .statement-table {
    min-width: 650px !important;
    width: 100% !important;
  }
  .transfers-table {
    width: max-content !important;
    min-width: max-content !important;
  }
  .accounts-page-wrapper {
    padding: 10px;
  }
  .accounts-page-wrapper .accounts-grid-container,
  .accounts-page-wrapper .income-statement-grid,
  .accounts-page-wrapper .balance-sheet-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .accounts-page-wrapper .cash-flow-summary-grid,
  .accounts-page-wrapper .kpi-grid-container {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .accounts-page-wrapper .page-title-card.flex-title-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .accounts-page-wrapper .page-title-card.flex-title-card .title-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .accounts-page-wrapper .date-filter-card {
    padding: 14px;
  }
  .accounts-page-wrapper .date-filter-card .filter-inputs-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .accounts-page-wrapper .date-filter-card .filter-inputs-row .filter-group {
    width: 100%;
    min-width: 100%;
  }
  .accounts-page-wrapper .date-filter-card .filter-inputs-row .filter-actions-group {
    width: 100%;
    justify-content: flex-end;
  }
  body main .login-form {
    padding: 26px 20px;
    border-radius: 14px;
  }
  body main .transport-home {
    padding: 50px 18px 34px;
  }
  body main .transport-home .transport-home-status {
    display: none;
  }
  body main .transport-home .transport-home-grid {
    display: block;
    min-height: auto;
    margin-top: 52px;
  }
  body main .transport-home h1 {
    font-size: clamp(40px, 12vw, 58px);
  }
  body main .transport-home .transport-home-intro {
    font-size: 14px;
  }
  body main .transport-home .transport-command-panel {
    max-width: none;
    margin: 54px 0 36px;
    transform: rotate(0);
  }
  body main .transport-home .transport-capabilities {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  body main .transport-home .transport-capabilities article {
    padding: 0 18px 0 0;
    border-left: 0;
    border-right: 1px solid #c4d2cf;
  }
  body main .bottom-bar {
    left: 10px;
    right: 10px;
    padding: 10px 15px;
    height: auto;
    flex-direction: column;
  }
  body main .bottom-bar .bottom-bar-content {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
  body main .bottom-bar .bottom-bar-content .global-footer-info .copyright {
    font-size: 10px;
  }
  body main .bottom-bar .bottom-bar-content .global-footer-links {
    gap: 10px;
  }
  body main .bottom-bar .bottom-bar-content .global-footer-links a {
    font-size: 11px;
  }
  body main .bottom-bar .bottom-bar-content .bottom-bar-journal-wrapper {
    flex-direction: column;
    gap: 6px;
  }
  body main .app-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
    padding: 20px 16px;
  }
  body main .app-footer .app-footer-links {
    justify-content: flex-start;
    gap: 12px 16px;
  }
  body main .app-footer .app-footer-meta {
    justify-content: flex-start;
    text-align: right;
  }
}
/* 🗂️ جداول متجاوبة (table-cards): على الموبايل يتحوّل كل صف إلى بطاقة رأسية،
   وتظهر عناوين الأعمدة بجانب كل قيمة من data-label ⇒ لا تمرير أفقي إطلاقًا.
   الصف الأول (cell-primary) يصبح رأس البطاقة، وبقية الحقول صفوف (عنوان: قيمة). */
@media screen and (max-width: 992px) {
  body main #content table.professional-table.table-cards {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
  }
  body main #content table.professional-table.table-cards thead {
    display: none;
  }
  body main #content table.professional-table.table-cards tbody {
    display: block;
  }
  body main #content table.professional-table.table-cards tbody tr {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--surface-color);
  }
  body main #content table.professional-table.table-cards {
    /* زوايا البطاقة تُضبط على الخلايا نفسها بدل overflow: hidden
       حتى لا تُقتطع القوائم المنسدلة (⋮) الخارجة عن حدود الصف */
  }
  body main #content table.professional-table.table-cards tbody td:last-child {
    border-end-start-radius: 13px;
    border-end-end-radius: 13px;
  }
  body main #content table.professional-table.table-cards tbody tr:hover td {
    background: transparent;
  }
  body main #content table.professional-table.table-cards tbody td:not([colspan]):not(.table-empty-state) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100% !important;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border-color);
    /* داخل وضع البطاقات لا أعمدة ⇒ لا خط رأسي (أُلغي فاصل الأعمدة
       العام في .professional-table) */
    border-inline-end: 0;
    text-align: start;
    overflow-wrap: break-word;
  }
  body main #content table.professional-table.table-cards tbody td:not([colspan]):not(.table-empty-state)::before {
    content: attr(data-label);
    flex: 0 0 auto;
    max-width: 46%;
    color: var(--text-color-secondary);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.5;
  }
  body main #content table.professional-table.table-cards tbody td:not([colspan]):not(.table-empty-state):last-child {
    border-bottom: 0;
  }
  body main #content table.professional-table.table-cards tbody td:not([colspan]):not(.table-empty-state) > .cell-value {
    min-width: 0;
    text-align: end;
    overflow-wrap: break-word;
  }
  body main #content table.professional-table.table-cards {
    /* خلية الهوية (اسم السجل) = رأس البطاقة بلا عنوان.
       نكرّر :not() لمساواة أولوية القاعدة العامة أعلاه التي تُضيف data-label. */
  }
  body main #content table.professional-table.table-cards tbody td.cell-primary:not([colspan]):not(.table-empty-state) {
    order: -1;
    display: block;
    padding: 11px 14px;
    background: var(--surface-muted);
    border-bottom: 1px solid var(--border-color);
    border-inline-start: 3px solid var(--primary-color);
    border-start-start-radius: 13px;
    border-start-end-radius: 13px;
    text-align: start;
    font-size: 0.97rem;
    color: var(--heading-color);
    overflow-wrap: break-word;
  }
  body main #content table.professional-table.table-cards tbody td.cell-primary:not([colspan]):not(.table-empty-state)::before {
    content: none;
  }
  body main #content table.professional-table.table-cards {
    /* السطور الفرعية داخل القيمة تبقى محاذاة لطرف القيمة */
  }
  body main #content table.professional-table.table-cards tbody td > .cell-value .transfer-subline {
    justify-content: flex-end;
  }
  body main #content table.professional-table.table-cards tbody td > .cell-value .transfer-date {
    display: block;
  }
  body main #content table.professional-table.table-cards {
    /* قائمة إجراءات الصف: تبقى على يسار البطاقة */
  }
  body main #content table.professional-table.table-cards tbody td.transfer-action-cell > .cell-value,
  body main #content table.professional-table.table-cards tbody td[data-label=الإجراء] > .cell-value {
    display: inline-flex;
    align-items: center;
  }
  body main #content table.professional-table.table-cards {
    /* قائمة إجراءات القيد (details) داخل البطاقة: تتمدد داخل الصف
       بدل الخروج عنه فلا تُقتطع بحدود البطاقة أو الشريط السفلي */
  }
  body main #content table.professional-table.table-cards tbody td .entry-actions {
    width: 100%;
    text-align: start;
  }
  body main #content table.professional-table.table-cards tbody td .entry-actions__menu {
    position: static;
    inset-inline-end: auto;
    top: auto;
    min-width: 0;
    width: 100%;
    margin-top: 6px;
  }
  body main #content table.professional-table.table-cards {
    /* صف الإجماليات (tfoot) يتحوّل إلى شريط سفلي بعرض البطاقات */
  }
  body main #content table.professional-table.table-cards tfoot {
    display: block;
  }
  body main #content table.professional-table.table-cards tfoot tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 14px;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--surface-muted);
    font-weight: 800;
  }
  body main #content table.professional-table.table-cards tfoot td {
    display: block;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: start !important;
    font-size: 0.9rem;
  }
  body main #content table.professional-table.table-cards tfoot td[data-label]::before {
    content: attr(data-label);
    margin-inline-end: 6px;
    color: var(--text-color-secondary);
    font-size: 0.76rem;
    font-weight: 800;
  }
  /* إزالة قيد التمرير الأفقي عن حاويات جداول البطاقات (table-cards-wrap):
     الجدول يأخذ 100% من العرض فلا حاجة للمرور الأفقي، وإبقاء overflow
     على الحاوية يقتطع قوائم الإجراءات (⋮) المفتوحة أسفل البطاقة الأخيرة. */
  .table-responsive.table-cards-wrap,
  .transfers-table-responsive.table-cards-wrap {
    overflow: visible !important;
  }
}
/* ==========================================================================
   🗓️ شريحة الفترة الزمنية المطبَّقة — مكوّن مشترك
   تُستخدم في بطاقات العناوين (كشوف الحساب، القيود، الشركاء)، ورؤوس التقارير
   (ميزان المراجعة، قائمة الدخل، التدفقات النقدية، المركز المالي)، وفي قسم
   إجماليات صفحة سجل النقلات والشحنات.
   نصها يُكتب من scripts/js/period-badge.js بالقيم المطبَّقة فعلاً على الاستعلام.
   ========================================================================== */
.period-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-top: 7px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-muted);
  border: 1px solid var(--border-color);
  color: var(--text-color-secondary);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.8;
  white-space: nowrap;
}
.period-badge i {
  font-size: 0.72rem;
  color: var(--accent-color);
}
.period-badge .period-badge-label {
  font-variant-numeric: tabular-nums;
}

/* داخل صف رأسي/أفقي (مثل رأس إجماليات النقلات) لا حاجة لهامش علوي */
.transfers-summary .summary-head .period-badge {
  margin-top: 0;
}

/* ==========================================================================
   🎯 شريحة الفلترة النشطة — تُعرض أعلى صفحة النقلات عند فتحها من رابط
   «عرض النقلات» في قوائم المصانع/المواقع/المدن/السائقين.
   النص والحقول تُبنى من JavaScript (TransfersManager.renderActiveFilter).
   ========================================================================== */
.filter-active-chip {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 10px;
  padding: 5px 12px;
  border-radius: 10px;
  background: var(--surface-muted);
  border: 1px solid var(--border-color);
  color: var(--text-color-primary);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.9;
}
.filter-active-chip[hidden] {
  display: none;
}
.filter-active-chip > i {
  font-size: 0.78rem;
  color: var(--accent-color);
}
.filter-active-chip .filter-active-clear {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-inline-start: 8px;
  border-inline-start: 1px solid var(--border-color);
  color: var(--danger-color);
  font-size: 0.76rem;
  font-weight: 700;
  text-decoration: none;
}
.filter-active-chip .filter-active-clear:hover {
  text-decoration: underline;
}

/* ==========================================================================
   🧭 وضع «الشريط العلوي» (navbar): قائمة رئيسية أفقية بقوائم منسدلة في الهيدر.
   - يعمل على سطح المكتب فقط (شاشات ≥ 993px)؛ وما دون ذلك يبقى على «الدرج الجانبي»
     كما هو في الوضعين (التفضيل يبقى محفوظًا ويُطبَّق عند العودة لسطح المكتب).
   - وسم القائمة نفسه يُنقل من الشريط الجانبي إلى #primary-navbar (راجع nav-mode.js)،
     فلا توجد نسخة مكرّرة من شجرة القوائم في الصفحة.
   - بنية الـ DOM الفعلية: nav > .nav-section > .main-menu > li
     ونستخدم display: contents على الحاويتين ليصبح كل li عنصرًا أفقيًا في الشريط.
   ========================================================================== */
/* الحاوية مخفية افتراضيًا (الوضع الجانبي أو شاشة أصغر من 993px) */
.primary-navbar {
  display: none;
}

/* قائمة المستخدم المنسدلة في الهيدر: تظهر في وضع الشريط العلوي فقط */
#header-user-menu .user-menu-panel {
  display: none;
}

@media screen and (min-width: 993px) {
  /* ---------------- (1) تحويل التخطيط إلى شريط علوي ---------------- */
  html.is-authenticated[data-nav-mode=navbar] body main aside.sidebar {
    display: none;
  }
  /* إلغاء الإزاحة التي كان الشريط الجانبي يفرضها على كامل المحتوى */
  html.is-authenticated[data-nav-mode=navbar] body main {
    padding-right: 0;
  }
  /* العناصر العائمة تعود لمواضعها الافتراضية بعد إخفاء الشريط الجانبي */
  html.is-authenticated[data-nav-mode=navbar] body main .bottom-bar {
    right: 5%;
  }
  html.is-authenticated[data-nav-mode=navbar] body main .toast-container {
    left: 50%;
  }
  /* زر الهامبرغر خاص بالشريط الجانبي (تصغير/توسيع) — نخفي حاويته الفارغة أيضًا */
  html.is-authenticated[data-nav-mode=navbar] header #display-menu,
  html.is-authenticated[data-nav-mode=navbar] header .header-left {
    display: none;
  }
  /* ---------------- (2) حاوية الشريط: صف واحد فلات بعرض الهيدر كاملاً ---------------- */
  /* 🔝 ترتيب الطبقات: الهيدر يحمل z-index: 3000 أصلًا لكن بلا position (فلا أثر لها)،
     و#content داخل same السياق بـ position: relative ⇒ كان المحتوى يُرسم فوق الهيدر
     فيحجب اللوحات المنسدلة. نجعل الترتيب فعّالًا صراحةً في وضع الشريط. */
  html.is-authenticated[data-nav-mode=navbar] header {
    position: relative;
    z-index: 3200;
  }
  /* الصف نفسه: يلتصق بأعلى الهيدر ويمتد على كامل عرضه (نتجاوز الحشو الداخلي 8px 24px)،
     بارتفاع مضغوط وبخلفية وحدّ سفلي ليقرأ كشريط مستقل أعلى الصفحة. */
  html.is-authenticated[data-nav-mode=navbar] header #header-rule {
    align-items: center;
    gap: 10px;
    /* نتجاوز «width: 100%» الأصلية حتى تعمل الهوامش السالبة على التمدد الكامل */
    width: auto;
    align-self: stretch;
    margin: -8px -24px 0;
    padding: 5px 24px;
    min-height: 48px;
    background: transparent;
  }
  html.is-authenticated[data-nav-mode=navbar] .primary-navbar {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
  }
  /* صف واحد بلا التفاف: كل البنود في سطر أفقي واحد */
  html.is-authenticated[data-nav-mode=navbar] .primary-navbar nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    width: 100%;
    padding: 0;
    margin: 0;
  }
  /* إلغاء تغليف الأقسام والقوائم ليصبح كل بند عنصرًا أفقيًا في الشريط */
  html.is-authenticated[data-nav-mode=navbar] .primary-navbar .nav-section,
  html.is-authenticated[data-nav-mode=navbar] .primary-navbar .main-menu {
    display: contents;
  }
  /* عناوين الأقسام لا معنى لها في شريط أفقي */
  html.is-authenticated[data-nav-mode=navbar] .primary-navbar .nav-section-title {
    display: none;
  }
  /* 🏠 كونتينر «الرئيسية + لوحة التحكم»: حبة (pill) مستقلة في بداية الشريط، أيقونات فقط */
  html.is-authenticated[data-nav-mode=navbar] .primary-navbar .nav-section[data-nav-icons] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    padding: 3px;
    margin-inline-end: 6px;
    background: var(--surface-muted);
    border: 1px solid var(--border-color);
    border-radius: 13px;
  }
  html.is-authenticated[data-nav-mode=navbar] .primary-navbar .nav-section[data-nav-icons] > .main-menu > li > a {
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
    border-radius: 10px;
    /* أيقونة فقط في الشريط العلوي (الاسم يظهر في الوضع الجانبي وكتلميح عند المرور) */
  }
  html.is-authenticated[data-nav-mode=navbar] .primary-navbar .nav-section[data-nav-icons] > .main-menu > li > a span {
    display: none;
  }
  html.is-authenticated[data-nav-mode=navbar] .primary-navbar .nav-section[data-nav-icons] > .main-menu > li > a i {
    font-size: 0.92rem;
  }
  html.is-authenticated[data-nav-mode=navbar] .primary-navbar .nav-section[data-nav-icons] > .main-menu > li > a {
    /* الصفحة الحالية داخل الحبة: أيقونة ممتلئة بلون التمييز بدل شريط سفلي */
  }
  html.is-authenticated[data-nav-mode=navbar] .primary-navbar .nav-section[data-nav-icons] > .main-menu > li > a.is-current {
    background: var(--accent-fill);
    color: var(--text-on-accent);
    box-shadow: 0 6px 14px var(--shadow-color);
  }
  html.is-authenticated[data-nav-mode=navbar] .primary-navbar .nav-section[data-nav-icons] > .main-menu > li > a.is-current i {
    color: currentColor;
  }
  /* 💾⚙️ قسم «النظام والأمان» (حصري للـ Big Boss) يخرج من الشريط ويُعرض في قائمة
     المستخدم المنسدلة بالهيدر لتوفير مساحة في الصف الأفقي. */
  html.is-authenticated[data-nav-mode=navbar] .primary-navbar .nav-section[data-nav-boss] {
    display: none;
  }
  /* ---------------- (3) بنود المستوى الأول ---------------- */
  html.is-authenticated[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li {
    position: relative;
    display: flex;
    list-style: none;
    flex: 0 1 auto;
    min-width: 0;
  }
  html[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li > a,
  html[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    font-size: 0.79rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--text-color-primary);
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
  }
  html[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li > a i,
  html[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li > span i {
    font-size: 0.84rem;
    color: var(--accent-color);
  }
  html[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li > a:hover,
  html[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li > span:hover {
    border-bottom: 2px solid var(--primary-color);
    color: var(--primary-color);
  }
  /* عند ضيق المقاس (993–1200px): تتقلّص أسماء البنود باختصار «...» مع بقاء الصف
     الأفقي الواحد بلا التفاف ولا تراكب، والنص الكامل متاح في التلميح (title). */
  html.is-authenticated[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li > a,
  html.is-authenticated[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li > span {
    min-width: 0;
  }
  html.is-authenticated[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li > a > i,
  html.is-authenticated[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li > span > i {
    flex: 0 0 auto;
  }
  html.is-authenticated[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li > a > span,
  html.is-authenticated[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li > span > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html.is-authenticated[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li > a::after,
  html.is-authenticated[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li > span::after {
    flex: 0 0 auto;
  }
  /* كونتينر أيقونات الرئيسية ولوحة التحكم لا يتقلّص أبدًا */
  html.is-authenticated[data-nav-mode=navbar] .primary-navbar .nav-section[data-nav-icons] > .main-menu > li {
    flex: 0 0 auto;
  }
  /* 📐 سطح مكتب ضيق (993–1199px): ضغط بسيط للمقاسات لتقليل الاختصار إلى أدنى حد
     مع الحفاظ على الصف الأفقي الواحد وارتفاعه المضغوط. */
}
@media screen and (min-width: 993px) and (max-width: 1199px) {
  html.is-authenticated[data-nav-mode=navbar] header #header-rule {
    gap: 6px;
    padding-inline: 14px;
  }
  html.is-authenticated[data-nav-mode=navbar] .primary-navbar nav {
    gap: 1px;
  }
  html.is-authenticated[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li > a,
  html.is-authenticated[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li > span {
    gap: 4px;
    padding: 5px 8px;
    font-size: 0.75rem;
  }
  html.is-authenticated[data-nav-mode=navbar] .primary-navbar .nav-section[data-nav-icons] > .main-menu > li > a {
    width: 28px;
    height: 28px;
  }
  html.is-authenticated[data-nav-mode=navbar] .primary-navbar .nav-section[data-nav-icons] > .main-menu > li > a i {
    font-size: 0.84rem;
  }
  /* نافذة أقرب إلى 1000px: ضغط إضافي بسيط يمنع اختصار الأسماء */
}
@media screen and (min-width: 993px) and (max-width: 1199px) and (max-width: 1099px) {
  html.is-authenticated[data-nav-mode=navbar] header #header-rule {
    gap: 4px;
    padding-inline: 8px;
  }
  html.is-authenticated[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li > a,
  html.is-authenticated[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li > span {
    gap: 3px;
    padding: 5px 6px;
    font-size: 0.72rem;
  }
}
@media screen and (min-width: 993px) {
  /* ˅ علامة «يوجد قائمة منسدلة»: chevron مرسوم بالحدود (لا يحتاج أيقونة في الوسم).
     الشكل: مربّع بحدّين متجاورين ثم دوران 45° ⇒ زاوية «˅»؛ والدوران 225° في الحالة
     المفتوحة يقلبها إلى «˄».
     المسافة بين النص والعلامة = margin-inline-start (30px) + gap البند (3–5px حسب
     المقاس) ⇒ لا تقل عن 30px في كل نقاط الكسر.
     ⚠️ translateY يعوّض انزياح مركز الشكل (الحدّان في أسفل/يمين الصندوق) عن مركز
     الصندوق بعد الدوران، وإلا بدت العلامة منخفضة عن منتصف السطر. */
  html[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li > span[data-action=toggle-menu]::after {
    content: "";
    flex: 0 0 auto;
    width: 4px;
    height: 4px;
    margin-inline-start: 22px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: translateY(-1.6px) rotate(45deg);
    opacity: 0.55;
    transition: transform 0.2s ease;
  }
  html[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li > span[data-action=toggle-menu].open::after {
    transform: translateY(-1.6px) rotate(225deg);
  }
  /* ✨ الحالة النشطة للقائمة المفتوحة: امتلاء لوني كامل للزر + ظل خفيف + سهم مقلوب،
     فتظهر القائمة المفتوحة كأنها «موصولة» بزرها لا كبند عابر. */
  html[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li > span[data-action=toggle-menu].open {
    background: var(--accent-fill);
    color: var(--text-on-accent);
    box-shadow: 0 8px 18px var(--shadow-color);
  }
  html[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li > span[data-action=toggle-menu].open i {
    color: currentColor;
  }
  html[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li > span[data-action=toggle-menu].open::after {
    opacity: 0.95;
  }
  /* سهم صغير يربط الزر بِلَوْحته (يرسم فوق حدّ اللوحة فيخفي خط الوصلة) */
  html[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li:has(> .children.open-menu)::after {
    content: "";
    position: absolute;
    top: calc(100% + 3px);
    right: 20px;
    z-index: 3101;
    width: 12px;
    height: 12px;
    pointer-events: none;
    background: var(--surface-color);
    border-block-start: 1px solid var(--border-color);
    border-inline-end: 1px solid var(--border-color);
    transform: rotate(45deg);
  }
  /* البند الذي يحتوي الصفحة الحالية: تمييز واضح بلا فتح اللوحة تلقائيًا */
  html[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li:has(a.is-current) > a,
  html[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li:has(a.is-current) > span {
    background: var(--accent-soft);
    color: var(--primary-color);
  }
  /* ---------------- (4) اللوحات المنسدلة ---------------- */
  html[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li > .children {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 3100;
    display: none;
    min-width: 262px;
    max-width: min(86vw, 420px);
    max-height: min(70vh, 560px);
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 18px 45px var(--shadow-color);
    animation: navDropdownIn 0.15s ease;
  }
  html[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li > .children.open-menu {
    display: block;
  }
  /* 🧵 شريط تمرير اللوحات المنسدلة (أطولها شجرة دليل الحسابات):
     الافتراضي في المتصفح شريط «عائم» سميك يغطي محتوى اللوحة وحوافها المستديرة،
     فنستبدله بشريط رفيع (5px) مخفي تمامًا في الوضع العادي فلا يشتّت البصر،
     ويظهر كمقبض ناعم عند مرور المؤشر على اللوحة فقط.
     التمرير يبقى كامل العمل: العجلة، لوحة المفاتيح، والأجهزة اللمسية. */
  html[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li > .children {
    /* التمرير الزائد لا ينتقل إلى الصفحة خلف اللوحة */
    overscroll-behavior: contain;
    /* ---- Chrome / Edge / Safari (المسار القديم) ---- */
  }
  html[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li > .children::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
  html[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li > .children::-webkit-scrollbar-track, html[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li > .children::-webkit-scrollbar-corner {
    background: transparent;
  }
  html[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li > .children {
    /* مخفي في الوضع العادي */
  }
  html[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li > .children::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 99px;
  }
  html[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li > .children:hover::-webkit-scrollbar-thumb {
    background: var(--border-color);
  }
  html[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li > .children:hover::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color);
  }
  html[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li > .children {
    /* ---- Firefox فقط (لا يفهم ::-webkit-scrollbar) ----
       الحصر بـ @supports ضروري: كروم يتجاهل قواعد -webkit تمامًا
       بمجرد ضبط scrollbar-width، فيصير عرض الشريط 11px بدل 5px. */
  }
  @supports (-moz-appearance: none) {
    html[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li > .children {
      scrollbar-width: thin;
      scrollbar-color: transparent transparent;
    }
    html[data-nav-mode=navbar] .primary-navbar .nav-section > .main-menu > li > .children:hover {
      scrollbar-color: var(--border-color) transparent;
    }
  }
  @keyframes navDropdownIn {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  /* ظهور ناعم للفروع الداخلية (شجرة دليل الحسابات) عند فتحها */
  @keyframes navSubmenuIn {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  /* ---------------- (5) بنود اللوحات (بما فيها الشجرة المحاسبية) ---------------- */
  html[data-nav-mode=navbar] .primary-navbar .children li {
    list-style: none;
  }
  html[data-nav-mode=navbar] .primary-navbar .children {
    /* بنود المستوى الأول داخل اللوحة: روابط القسم وجذور شجرة الحسابات */
  }
  html[data-nav-mode=navbar] .primary-navbar .children > li > a,
  html[data-nav-mode=navbar] .primary-navbar .children > li > span {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--text-color-primary);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease;
  }
  html[data-nav-mode=navbar] .primary-navbar .children > li > a i,
  html[data-nav-mode=navbar] .primary-navbar .children > li > span i {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--accent-color);
  }
  html[data-nav-mode=navbar] .primary-navbar .children > li > a:hover,
  html[data-nav-mode=navbar] .primary-navbar .children > li > span:hover {
    background: var(--hover-background);
    color: var(--primary-color);
  }
  html[data-nav-mode=navbar] .primary-navbar .children > li > a.is-current,
  html[data-nav-mode=navbar] .primary-navbar .children > li > span.is-current {
    position: relative;
    background: var(--accent-soft);
    color: var(--primary-color);
    font-weight: 800;
    /* شريط تمييز رفيع على حافة البند يُقرأ فورًا كـ«أنت هنا» */
  }
  html[data-nav-mode=navbar] .primary-navbar .children > li > a.is-current::before,
  html[data-nav-mode=navbar] .primary-navbar .children > li > span.is-current::before {
    content: "";
    position: absolute;
    inset-inline-start: 2px;
    top: 50%;
    width: 3px;
    height: 18px;
    transform: translateY(-50%);
    border-radius: 99px;
    background: var(--accent-fill);
  }
  html[data-nav-mode=navbar] .primary-navbar .children {
    /* 🌳 الفروع المتداخلة (شجرة دليل الحسابات): نفس منطق القائمة الجانبية —
       دليل رأسي متدرّج وخطوات أصغر كلما تعمّقنا، وتُفتح داخل اللوحة بلا لوحات عائمة. */
  }
  html[data-nav-mode=navbar] .primary-navbar .children .children {
    display: none;
    margin: 0 18px 0 0;
    padding: 6px 8px 10px;
    list-style: none;
    border-right: 2px solid var(--border-color);
    border-radius: 0 0 10px 10px;
    /* نتجاوز السقف العام (.open-menu { max-height: 200px }) فلا تُقتطع شجرة طويلة */
    max-height: none;
  }
  html[data-nav-mode=navbar] .primary-navbar .children .children > li {
    margin-top: 2px;
  }
  html[data-nav-mode=navbar] .primary-navbar .children .children li > a,
  html[data-nav-mode=navbar] .primary-navbar .children .children li > span {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-color-secondary);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
  }
  html[data-nav-mode=navbar] .primary-navbar .children .children li > a i,
  html[data-nav-mode=navbar] .primary-navbar .children .children li > span i {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    font-size: 11.5px;
    color: var(--text-color-secondary);
  }
  html[data-nav-mode=navbar] .primary-navbar .children .children li > a:hover,
  html[data-nav-mode=navbar] .primary-navbar .children .children li > span:hover {
    background: var(--surface-color);
    color: var(--primary-color);
    box-shadow: 0 2px 8px var(--shadow-color);
  }
  html[data-nav-mode=navbar] .primary-navbar .children .children li > a:hover i,
  html[data-nav-mode=navbar] .primary-navbar .children .children li > span:hover i {
    color: var(--primary-color);
  }
  html[data-nav-mode=navbar] .primary-navbar .children .children li > a.open, html[data-nav-mode=navbar] .primary-navbar .children .children li > a.is-current,
  html[data-nav-mode=navbar] .primary-navbar .children .children li > span.open,
  html[data-nav-mode=navbar] .primary-navbar .children .children li > span.is-current {
    background: var(--accent-soft);
    color: var(--primary-color);
    font-weight: 800;
  }
  html[data-nav-mode=navbar] .primary-navbar .children .children li > a.open i, html[data-nav-mode=navbar] .primary-navbar .children .children li > a.is-current i,
  html[data-nav-mode=navbar] .primary-navbar .children .children li > span.open i,
  html[data-nav-mode=navbar] .primary-navbar .children .children li > span.is-current i {
    color: var(--primary-color);
  }
  html[data-nav-mode=navbar] .primary-navbar .children .children {
    /* التدرّج الأعمق: خطوة أضيق + خط متقطّع + خط أصغر */
  }
  html[data-nav-mode=navbar] .primary-navbar .children .children .children {
    margin-right: 12px;
    border-right: 1px dashed var(--border-color);
    border-radius: 0;
  }
  html[data-nav-mode=navbar] .primary-navbar .children .children .children li > a,
  html[data-nav-mode=navbar] .primary-navbar .children .children .children li > span {
    padding: 6px 8px;
    font-size: 12px;
  }
  html[data-nav-mode=navbar] .primary-navbar .children .children .children li > a i,
  html[data-nav-mode=navbar] .primary-navbar .children .children .children li > span i {
    width: 18px;
    height: 18px;
    font-size: 11px;
  }
  html[data-nav-mode=navbar] .primary-navbar .children .children.open-menu {
    display: block;
    animation: navSubmenuIn 0.18s ease;
  }
  html[data-nav-mode=navbar] .primary-navbar .children {
    /* سهم صغير للبنود التي تحتوي فروعًا */
  }
  html[data-nav-mode=navbar] .primary-navbar .children li > span[data-action=toggle-menu] {
    justify-content: space-between;
    /* البند المفتوح داخل اللوحة (مثل جذر الشجرة المحاسبية) يأخذ تمييزًا هادئًا */
  }
  html[data-nav-mode=navbar] .primary-navbar .children li > span[data-action=toggle-menu].open {
    background: var(--accent-soft);
    color: var(--primary-color);
    font-weight: 700;
  }
  html[data-nav-mode=navbar] .primary-navbar .children li > span[data-action=toggle-menu]::after {
    content: "";
    width: 0;
    height: 0;
    border-block-start: 4px solid transparent;
    border-block-end: 4px solid transparent;
    border-inline-start: 5px solid currentColor;
    opacity: 0.5;
    transition: transform 0.2s ease;
  }
  html[data-nav-mode=navbar] .primary-navbar .children li > span[data-action=toggle-menu].open::after {
    transform: rotate(90deg);
  }
  /* ---------------- (6) قائمة المستخدم في الهيدر ---------------- */
  html[data-nav-mode=navbar] header #header-user-menu {
    position: relative;
    cursor: pointer;
  }
  html[data-nav-mode=navbar] header #header-user-menu .user-menu-panel {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 3100;
    min-width: 210px;
    padding: 8px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 18px 45px var(--shadow-color);
  }
  html[data-nav-mode=navbar] header #header-user-menu .user-menu-panel a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-color-primary);
    white-space: nowrap;
    text-decoration: none;
  }
  html[data-nav-mode=navbar] header #header-user-menu .user-menu-panel a i {
    width: 16px;
    color: var(--accent-color);
  }
  html[data-nav-mode=navbar] header #header-user-menu .user-menu-panel a:hover {
    background: var(--hover-background);
    color: var(--primary-color);
  }
  html[data-nav-mode=navbar] header #header-user-menu .user-menu-panel a {
    /* الصفحة الحالية (مثل «النسخ الاحتياطي والأمان») تبقى مميَّزة داخل القائمة */
  }
  html[data-nav-mode=navbar] header #header-user-menu .user-menu-panel a.is-current {
    background: var(--accent-soft);
    color: var(--primary-color);
    font-weight: 800;
  }
  html[data-nav-mode=navbar] header #header-user-menu .user-menu-panel .user-menu-logout {
    color: var(--danger-color, #c0392b);
  }
  html[data-nav-mode=navbar] header #header-user-menu .user-menu-panel .user-menu-logout i {
    color: currentColor;
  }
  html[data-nav-mode=navbar] header #header-user-menu.is-open .user-menu-panel {
    display: block;
  }
  /* إطار تمييز على الصورة الرمزية أثناء فتح قائمة المستخدم */
  html[data-nav-mode=navbar] header #header-user-menu.is-open img {
    box-shadow: 0 0 0 2px var(--accent-color);
  }
}
/* ==========================================================================
   ⚙️ واجهة اختيار شكل القائمة (داخل صفحة إعدادات التطبيق) — لكل المقاسات
   ========================================================================== */
.nav-mode-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 0.85rem;
  line-height: 1.9;
  color: var(--text-color-secondary);
}

.nav-mode-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

/* 🔗 رابط داخل البطاقات الإرشادية (مثل «إعدادات التطبيق العامة») — بلون التمييز
   وبلا خط سفلي مزعج، مع إبراز خفيف عند المرور بالمؤشر. */
.settings-hub-link {
  color: var(--accent-color);
  font-weight: 800;
  text-decoration: none;
}
.settings-hub-link:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

.nav-mode-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.nav-mode-option:hover {
  border-color: var(--accent-color);
}
.nav-mode-option {
  /* حقل اختيار مخفي بصريًا لقارئات الشاشة (يبقى قابلًا للتركيز بلوحة المفاتيح) */
}
.nav-mode-option input[type=radio] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.nav-mode-option:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.nav-mode-option input:focus-visible + .nav-mode-thumb {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}
.nav-mode-option .nav-mode-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.nav-mode-option .nav-mode-meta strong {
  font-size: 0.93rem;
  font-weight: 800;
  color: var(--primary-color);
}
.nav-mode-option .nav-mode-meta small {
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--text-color-secondary);
}

/* مخطط مصغّر يوضّح شكل القائمة لكل خيار */
.nav-mode-thumb {
  position: relative;
  flex-shrink: 0;
  width: 76px;
  height: 54px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--input-bg, var(--surface-muted));
  overflow: hidden;
}
.nav-mode-thumb .thumb-bar {
  position: absolute;
  background: var(--accent-fill, var(--accent-color));
  opacity: 0.85;
}
.nav-mode-thumb .thumb-body {
  position: absolute;
  background: var(--surface-muted);
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

.nav-mode-thumb--sidebar .thumb-bar {
  top: 4px;
  bottom: 4px;
  right: 4px;
  width: 16px;
  border-radius: 5px;
}
.nav-mode-thumb--sidebar .thumb-body {
  top: 6px;
  bottom: 6px;
  right: 24px;
  left: 6px;
}

.nav-mode-thumb--navbar .thumb-bar {
  top: 4px;
  right: 4px;
  left: 4px;
  height: 14px;
  border-radius: 5px;
}
.nav-mode-thumb--navbar .thumb-body {
  top: 22px;
  right: 6px;
  left: 6px;
  bottom: 6px;
}

/* ==========================================================================
   🛎️ الإشعارات الفورية (SSE) — جرس في الهيدر + لوحة قائمة.
   - الجرس: نفس مقاس وأسلوب أزرار الهيدر (30×30) ليأتي متناسقًا معه.
   - اللوحة: تُضاف إلى <body> من scripts/js/notifications.js (لا في الهيدر) لتعلو
     كل المحتوى في وضعي القائمة (جانبي/شريط علوي) وفي كل المقاسات، تمامًا
     كحاوية التنبيهات العائمة. موضعها يُحسب في JS لتبقى ملتصقة بالجرس.
   - كل الألوان من متغيّرات المظهر (تعمل في الفاتح والداكن تلقائيًا).
   ========================================================================== */
body main header .header-tools #notifications-bell {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--primary-color);
  -webkit-tap-highlight-color: transparent;
}
body main header .header-tools #notifications-bell:hover, body main header .header-tools #notifications-bell:focus-visible {
  background: var(--accent-soft);
  transform: translateY(-2px);
}
body main header .header-tools #notifications-bell:focus-visible {
  outline: 2px solid var(--accent-fill);
  outline-offset: 2px;
}
body main header .header-tools #notifications-bell i {
  font-size: 16px;
  line-height: 1;
  pointer-events: none;
}
body main header .header-tools #notifications-bell svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke-width: 1.5;
  stroke: var(--text-color-primary);
  vertical-align: middle;
}
body main header .header-tools #notifications-bell {
  /* 🔄 الحالة تأتي من إعداد التطبيق (site_settings) ويُحدّثها العميل لحظيًا عند الحفظ
     بلا إعادة تحميل. القاعدة هنا (لا في تنسيق خارجي) لتفوز على display: grid أعلاه. */
}
body main header .header-tools #notifications-bell[data-notify-enabled="0"] {
  display: none;
}
body main header .header-tools .notifications-badge {
  position: absolute;
  top: -4px;
  inset-inline-end: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--danger-fill);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 2px 6px var(--shadow-color);
  opacity: 0;
  transform: scale(0.6);
  transform-origin: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
body main header .header-tools .notifications-badge.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* --------------------------------------------------------------------------
   لوحة الإشعارات
   -------------------------------------------------------------------------- */
.notifications-panel {
  position: fixed;
  top: 70px;
  inset-inline-end: 16px;
  z-index: 99998; /* أعلى من المحتوى والقوائم، وأقل من التنبيهات العائمة */
  display: flex;
  flex-direction: column;
  box-sizing: border-box; /* ليطابق حساب الموضع في JS الحجم الظاهر بدقة */
  width: 340px;
  max-height: min(70vh, 520px);
  padding: 4px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--surface-color);
  box-shadow: 0 18px 40px var(--shadow-color);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px) scale(0.98);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}
.notifications-panel.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
.notifications-panel .notifications-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border-color);
}
.notifications-panel .notifications-panel-head strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-color);
}
.notifications-panel .notifications-panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.notifications-panel .notifications-push {
  border: 0;
  background: transparent;
  padding: 2px 6px;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-color-secondary);
  cursor: pointer;
  border-radius: 6px;
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease, background 0.2s ease;
}
.notifications-panel .notifications-push:hover, .notifications-panel .notifications-push:focus-visible {
  color: var(--accent-fill);
  background: var(--accent-soft);
}
.notifications-panel .notifications-push:focus-visible {
  outline: 2px solid var(--accent-fill);
  outline-offset: 1px;
}
.notifications-panel .notifications-push[data-state=enabled] {
  color: var(--success-fill);
}
.notifications-panel .notifications-push[data-state=enabled]:hover, .notifications-panel .notifications-push[data-state=enabled]:focus-visible {
  color: var(--danger-fill);
}
.notifications-panel .notifications-push[data-state=busy] {
  opacity: 0.7;
  cursor: progress;
}
.notifications-panel .notifications-push[data-state=denied], .notifications-panel .notifications-push[data-state=unsupported] {
  opacity: 0.6;
  cursor: not-allowed;
}
.notifications-panel .notifications-clear {
  border: 0;
  background: transparent;
  padding: 2px 4px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-color-secondary);
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
}
.notifications-panel .notifications-clear:hover, .notifications-panel .notifications-clear:focus-visible {
  color: var(--danger-fill);
  background: var(--accent-soft);
}
.notifications-panel .notifications-clear:focus-visible {
  outline: 2px solid var(--accent-fill);
  outline-offset: 1px;
}
.notifications-panel .notifications-list {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 2px;
  padding: 6px 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.notifications-panel .notifications-list::-webkit-scrollbar {
  width: 5px;
}
.notifications-panel .notifications-list::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}
.notifications-panel .notifications-list::-webkit-scrollbar-thumb:hover {
  background: var(--text-color-secondary);
}
.notifications-panel .notifications-list::-webkit-scrollbar-track {
  background: transparent;
}
.notifications-panel .notifications-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 12px;
  border-top: 1px dashed var(--border-color);
  font-size: 10.5px;
  color: var(--text-color-secondary);
}
.notifications-panel .notifications-loading[hidden] {
  display: none;
}
.notifications-panel .notifications-loading::before {
  content: "";
  width: 10px;
  height: 10px;
  border: 2px solid var(--border-color);
  border-top-color: var(--accent-fill);
  border-radius: 50%;
  animation: notifications-spin 0.8s linear infinite;
  flex: none;
}
.notifications-panel .notifications-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  transition: background 0.2s ease;
  animation: notifications-item-in 0.22s ease-out both;
}
.notifications-panel .notifications-item:hover, .notifications-panel .notifications-item:focus-visible {
  background: var(--accent-soft);
}
.notifications-panel .notifications-item:focus-visible {
  outline: 2px solid var(--accent-fill);
  outline-offset: -2px;
}
.notifications-panel .notifications-item {
  /* إشعار بلا وجهة (مثل «تسجيل دخول جديد»): عنصر div لا رابط، فيبقى مؤشّره يدًا */
}
.notifications-panel .notifications-item[role=button] {
  cursor: pointer;
}
.notifications-panel .notifications-item .notifications-item-avatar {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--accent-soft);
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
}
.notifications-panel .notifications-item .notifications-item-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.notifications-panel .notifications-item .notifications-item-avatar.is-fallback {
  background: #ffffff;
}
.notifications-panel .notifications-item .notifications-item-avatar.is-fallback img {
  object-fit: contain;
  padding: 3px;
}
.notifications-panel .notifications-item .notifications-item-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.notifications-panel .notifications-item .notifications-item-body strong {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-color-primary);
}
.notifications-panel .notifications-item .notifications-item-message {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-color-secondary);
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.notifications-panel .notifications-item .notifications-item-meta {
  font-size: 10.5px;
  color: var(--text-color-secondary);
  opacity: 0.85;
}
.notifications-panel .notifications-item .notifications-item-dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--accent-fill);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.notifications-panel .notifications-item {
  /* غير مقروء: نقطة مميّزة فقط (بلا تغيير في الخلفية حفاظًا على الوضوح) */
}
.notifications-panel .notifications-item.is-unread .notifications-item-dot {
  opacity: 1;
}
.notifications-panel .notifications-empty {
  margin: 0;
  padding: 22px 14px;
  text-align: center;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-color-secondary);
}
.notifications-panel .notifications-empty.is-hidden {
  display: none;
}
.notifications-panel .notifications-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--border-color);
  font-size: 10.5px;
  color: var(--text-color-secondary);
}
.notifications-panel .notifications-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-color-secondary);
  flex: none;
}
.notifications-panel .notifications-status[data-state=online]::before {
  background: var(--success-fill);
}
.notifications-panel .notifications-status[data-state=offline]::before {
  background: var(--danger-fill);
}
.notifications-panel .notifications-status[data-state=connecting]::before {
  background: var(--warning-fill);
}
.notifications-panel .notifications-status[data-state=disabled]::before {
  background: var(--text-color-secondary);
}

@keyframes notifications-item-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes notifications-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .notifications-panel .notifications-item,
  .notifications-panel .notifications-loading::before {
    animation: none;
  }
}
/* لا طباعة للإشعارات (اللوحة خارج الهيدر فلا يشملها حجب الطباعة العام) */
@media print {
  .notifications-panel,
  .notifications-badge {
    display: none !important;
  }
}
/* ==========================================================================
   ⚙️ مفتاح تشغيل/إيقاف الإشعارات — داخل بطاقة «الإشعارات الفورية» بصفحة
   إعدادات التطبيق (المالك فقط). البنية في pages/site_settings.php:
       div.setting-switch-group > label.setting-switch
           > input[type=checkbox] + span.setting-switch-track + span.setting-switch-meta
   - كل حالات الشكل مشتقّة من :checked عبر CSS، فلا يحتاج JS لتغيير الهيئة.
   - مربّع الاختيار مخفي بصريًا لكنه يبقى قابلًا للتركيز بلوحة المفاتيح (a11y).
   - الاتجاه: الخصائص الفيزيائية مضبوطة للحالتين (RTL/LTR) بلا اعتماد على
     الانتقال المتحرّك للخصائص المنطقية.
   ========================================================================== */
.setting-switch-group {
  /* صف كامل داخل شبكة النموذج (.u56 ذات العمودين) */
  grid-column: 1/-1;
  max-width: 760px;
  margin-bottom: 0;
}

.setting-switch {
  /* مسافة حركة المؤشّر عند التفعيل: قيمة واحدة تُضبط حسب الاتجاه،
     فيبقى الانتقال معرَّفًا مرة واحدة بلا صراع في الخصوصية. */
  --switch-travel: 20px;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface-muted);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.setting-switch:hover {
  border-color: var(--accent-color);
}
.setting-switch {
  /* مُشغّل مُخفى بصريًا (يبقى في شجرة A11y وفي ترتيب التركيز) */
}
.setting-switch input[type=checkbox] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.setting-switch:has(input:checked) {
  background: var(--surface-color);
}
.setting-switch {
  /* ---------------------------------------------------------------- */
  /* المسار (Track) والمؤشّر (Knob)                                     */
  /* ---------------------------------------------------------------- */
}
.setting-switch .setting-switch-track {
  position: relative;
  flex: none;
  width: 46px;
  height: 26px;
  margin-top: 2px;
  border-radius: 999px;
  background: var(--border-color);
  transition: background 0.25s ease;
}
.setting-switch .setting-switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--text-on-accent);
  box-shadow: 0 1px 3px var(--shadow-color);
  transition: transform 0.25s ease;
}
.setting-switch input:checked ~ .setting-switch-track {
  background: var(--success-fill);
}
.setting-switch input:checked ~ .setting-switch-track::after {
  transform: translateX(var(--switch-travel));
}
.setting-switch input:focus-visible ~ .setting-switch-track {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}
.setting-switch {
  /* ---------------------------------------------------------------- */
  /* النص وحالة المفتاح                                                */
  /* ---------------------------------------------------------------- */
}
.setting-switch .setting-switch-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.setting-switch .setting-switch-meta strong {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--primary-color);
}
.setting-switch .setting-switch-meta small {
  font-size: 0.83rem;
  line-height: 1.85;
  color: var(--text-color-secondary);
}
.setting-switch .setting-switch-state {
  align-self: flex-start;
  padding: 1px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--surface-color);
  color: var(--text-color-secondary);
  font-size: 0.72rem;
  font-weight: 800;
}
.setting-switch .setting-switch-state::after {
  content: "متوقّفة";
}
.setting-switch input:checked ~ .setting-switch-meta .setting-switch-state {
  background: var(--success-soft);
  border-color: var(--success-color);
  color: var(--success-color);
}
.setting-switch input:checked ~ .setting-switch-meta .setting-switch-state::after {
  content: "مفعّلة";
}

/* في RTL تكون «البداية» على اليمين ⇒ المؤشّر يتحرك يسارًا */
html[dir=rtl] .setting-switch {
  --switch-travel: -20px;
}
html[dir=rtl] .setting-switch .setting-switch-track::after {
  left: auto;
  right: 3px;
}

/* ==========================================================================
   🧹 بطاقة «سجل الإشعارات» — صفحة إعدادات التطبيق (المالك فقط).
   البنية في pages/site_settings.php:
       div.card-box.notifications-maintenance
           > p.notifications-log-info + button.notifications-purge-btn
           + small.notifications-log-status

   - الزر من نوع button (لا submit) فلا يأخذه تنسيق زر الحفظ العام، ولذلك يُنسَّق
     هنا صراحةً (إطار أحمر شفّاف يمتلئ عند المرور، فيبدو إجراءً خطرًا بوضوح).
   - الحذف لا يُغيّر شيئًا في الصفحة إلا العدّاد والرسالة؛ لا مصادقة إضافية مطلوبة
     لأن هذا ليس حذفًا ماليًا (البيانات تُحذف تلقائيًا بعد مدّة الاحتفاظ أصلًا).
   ========================================================================== */
.notifications-maintenance .notifications-log-info {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 18px;
  color: var(--text-color-primary);
  font-size: 14px;
  line-height: 1.9;
}
.notifications-maintenance .notifications-log-info > i {
  align-self: center;
}
.notifications-maintenance .notifications-log-info strong {
  color: var(--accent-color);
  font-size: 17px;
  font-weight: 800;
}
.notifications-maintenance .notifications-log-info small {
  font-size: 12px;
}
.notifications-maintenance .notifications-purge-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 240px;
  padding: 14px 32px;
  border: 1px solid var(--danger-fill);
  border-radius: 12px;
  background: transparent;
  color: var(--danger-fill);
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.notifications-maintenance .notifications-purge-btn:hover:not(:disabled) {
  background: var(--danger-fill);
  color: var(--text-on-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--shadow-color);
}
.notifications-maintenance .notifications-purge-btn:disabled {
  border-color: var(--border-color);
  color: var(--text-color-secondary);
  cursor: not-allowed;
  opacity: 0.75;
}
.notifications-maintenance .notifications-log-status {
  display: block;
  min-height: 18px;
  margin-top: 12px;
  color: var(--text-color-secondary);
  font-size: 13px;
  font-weight: 600;
}

/* ==========================================================================
   🎙️ الأوامر الصوتية — زر في شريط الأدوات + لوحة أوامر.
   - الزر: `.tool-item` نفسه (نفس مقاس بقية أزرار الشريط) مع حالة استماع نابضة.
   - اللوحة: تُضاف إلى <body> من scripts/js/voice-commands.js لتعلو كل المحتوى
     في وضعي القائمة، وعلى نمط لوحة الإشعارات (نفس الإحساس البصري).
   - كل الألوان من متغيّرات المظهر (تعمل في الفاتح والداكن تلقائيًا).
   ========================================================================== */
body main header .tools-panel .tools-panel-inner .tool-item.voice-tool i {
  transition: transform 0.2s ease, color 0.2s ease;
}
body main header .tools-panel .tools-panel-inner .tool-item.voice-tool {
  /* 🔴 حالة الاستماع: أيقونة حمراء نابضة */
}
body main header .tools-panel .tools-panel-inner .tool-item.voice-tool.is-listening {
  color: var(--danger-color);
}
body main header .tools-panel .tools-panel-inner .tool-item.voice-tool.is-listening i {
  color: var(--danger-color);
  animation: voiceMicPulse 1.1s ease-in-out infinite;
}

@keyframes voiceMicPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.22);
    opacity: 0.72;
  }
}
/* --------------------------------------------------------------------------
   لوحة الأوامر الصوتية
   -------------------------------------------------------------------------- */
.voice-panel {
  position: fixed;
  top: 70px;
  inset-inline-end: 16px;
  z-index: 99999; /* أعلى من محتوى الصفحة والهيدر، وأقل من التنبيهات العائمة إن وُجدت بعدنا. */
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  width: min(400px, 100vw - 24px);
  max-height: min(78vh, 620px);
  padding: 12px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--surface-color, var(--sidebar-bg));
  box-shadow: 0 18px 40px var(--shadow-color);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
}
.voice-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.voice-panel .voice-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}
.voice-panel .voice-panel-head strong {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  color: var(--heading-color);
}
.voice-panel .voice-panel-head strong i {
  font-size: 13px;
  color: var(--primary-color);
}
.voice-panel .voice-panel-head .voice-panel-close {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-color-secondary);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.voice-panel .voice-panel-head .voice-panel-close:hover {
  background: var(--hover-background);
  color: var(--danger-color);
}
.voice-panel {
  /* صف الميكروفون */
}
.voice-panel .voice-mic-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.voice-panel .voice-mic-row .voice-mic {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border: none;
  border-radius: 50%;
  background: var(--primary-fill);
  color: var(--text-on-accent);
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 8px 18px var(--shadow-color);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.voice-panel .voice-mic-row .voice-mic:hover {
  transform: translateY(-2px);
}
.voice-panel .voice-mic-row .voice-mic.is-listening {
  background: var(--danger-fill);
  animation: voiceMicPulse 1.1s ease-in-out infinite;
}
.voice-panel .voice-mic-row .voice-status {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-color-secondary);
}
.voice-panel .voice-mic-row .voice-status.is-listening {
  color: var(--danger-color);
  font-weight: 700;
}
.voice-panel .voice-mic-row .voice-status.is-error {
  color: var(--danger-color);
  font-weight: 600;
}
.voice-panel .voice-transcript {
  padding: 8px 10px;
  border: 1px dashed var(--border-color);
  border-radius: 10px;
  background: var(--input-bg);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color-primary);
  text-align: center;
}
.voice-panel {
  /* حقل الكتابة (بديل يعمل بلا ميكروفون) */
}
.voice-panel .voice-form {
  display: flex;
  align-items: center;
  gap: 6px;
}
.voice-panel .voice-form .voice-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--text-color-primary);
  font-family: inherit;
  font-size: 12.5px;
}
.voice-panel .voice-form .voice-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.voice-panel .voice-form .voice-submit {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 10px;
  background: var(--accent-fill);
  color: var(--text-on-accent);
  cursor: pointer;
  transition: transform 0.2s ease;
}
.voice-panel .voice-form .voice-submit:hover {
  transform: translateY(-2px);
}
.voice-panel .voice-result {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-color-primary);
}
.voice-panel .voice-result.is-ok > span {
  color: var(--success-color);
  font-weight: 700;
}
.voice-panel .voice-result.is-error > span {
  color: var(--danger-color);
  font-weight: 700;
}
.voice-panel .voice-suggestions,
.voice-panel .voice-examples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.voice-panel .voice-examples-title {
  font-size: 11px;
  font-weight: 300;
  color: var(--text-color-secondary);
}
.voice-panel .voice-chip {
  padding: 5px 10px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--input-bg);
  color: var(--text-color-primary);
  font-family: inherit;
  font-size: 11.5px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.voice-panel .voice-chip:hover {
  background: var(--primary-soft);
  border-color: var(--primary-color);
  color: var(--primary-color);
}
.voice-panel .voice-chip {
  /* أمثلة سياقية لأوامر النموذج (تُميَّز عن أمثلة فتح الصفحات) */
}
.voice-panel .voice-chip.voice-chip--form {
  background: var(--primary-soft);
  border-color: var(--primary-color);
  color: var(--primary-color);
  font-weight: 700;
}
.voice-panel {
  /* حقول النموذج الحالي (تُملأ عند وجود نموذج حفظ في الصفحة) */
}
.voice-panel .voice-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--input-bg);
}
.voice-panel .voice-fields .voice-fields-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-color-secondary);
}
.voice-panel .voice-fields .voice-fields-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 168px;
  overflow-y: auto;
}
.voice-panel .voice-fields .voice-field-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 7px;
  font-size: 11.5px;
}
.voice-panel .voice-fields .voice-field-row + .voice-field-row {
  border-top: 1px solid var(--border-color);
}
.voice-panel .voice-fields .voice-field-row.is-invalid {
  background: var(--danger-soft, transparent);
  color: var(--danger-color);
  font-weight: 700;
}
.voice-panel .voice-fields .voice-field-row .voice-field-name {
  flex: 1 1 auto;
  color: var(--text-color-secondary);
}
.voice-panel .voice-fields .voice-field-row .voice-field-value {
  flex: 0 1 auto;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--text-color-primary);
}
.voice-panel .voice-hint {
  margin: 0;
  padding: 6px 8px;
  border-inline-start: 3px solid var(--primary-color);
  border-radius: 6px;
  background: var(--primary-soft);
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--text-color-secondary);
}
.voice-panel .voice-options {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
}
.voice-panel .voice-options .voice-option-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: transparent;
  color: var(--text-color-secondary);
  font-family: inherit;
  font-size: 11.5px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.voice-panel .voice-options .voice-option-btn:hover {
  color: var(--primary-color);
  border-color: var(--primary-color);
}
.voice-panel .voice-options .voice-option-btn.is-active {
  background: var(--primary-soft);
  border-color: var(--primary-color);
  color: var(--primary-color);
  font-weight: 700;
}
.voice-panel .voice-note {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--text-color-secondary);
  opacity: 0.9;
}
.voice-panel {
  /* 🧵 شريط تمرير رفيع ومنسّق للوحة الميكروفون وقائمة الحقول:
     المسار شفاف والمقبض من متغيّرات المظهر، ويقوى عند المرور عليه. */
}
.voice-panel,
.voice-panel .voice-fields-list {
  overscroll-behavior: contain;
  /* ---- Chrome / Edge / Safari ---- */
}
.voice-panel::-webkit-scrollbar,
.voice-panel .voice-fields-list::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.voice-panel::-webkit-scrollbar-track, .voice-panel::-webkit-scrollbar-corner,
.voice-panel .voice-fields-list::-webkit-scrollbar-track,
.voice-panel .voice-fields-list::-webkit-scrollbar-corner {
  background: transparent;
}
.voice-panel::-webkit-scrollbar-thumb,
.voice-panel .voice-fields-list::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 99px;
}
.voice-panel::-webkit-scrollbar-thumb:hover,
.voice-panel .voice-fields-list::-webkit-scrollbar-thumb:hover {
  background: var(--text-color-secondary);
}
.voice-panel,
.voice-panel .voice-fields-list {
  /* ---- Firefox فقط: الحصر بـ @supports حتى لا يتجاهل كروم قواعد -webkit ---- */
}
@supports (-moz-appearance: none) {
  .voice-panel,
  .voice-panel .voice-fields-list {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
  }
}

/* في الشاشات الصغيرة: اللوحة تمتد بعرض الشاشة أسفل الهيدر */
@media (max-width: 480px) {
  .voice-panel {
    top: auto;
    bottom: 12px;
    inset-inline: 8px;
    width: auto;
    max-height: 72vh;
  }
}
/* ==========================================================================
   📨 رسائل «Big Boss» — نافذة شات للمالك + رسالة منبثقة للمستلمين.
   - نافذة المالك تُضاف إلى <body> في scripts/js/user-messages.js وتُفتح من زر الهيدر.
   - الرسالة المنبثقة تظهر أسفل الصفحة، وتُغلق يدويًا أو تختفي بعد 10 ثوانٍ.
   - كل الألوان من متغيّرات المظهر، وتعمل في الفاتح والداكن تلقائيًا.
   ========================================================================== */
body main header .header-tools #messages-owner-trigger,
body main header .header-tools #messages-inbox-trigger {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--accent-fill);
  -webkit-tap-highlight-color: transparent;
}
body main header .header-tools #messages-owner-trigger:hover, body main header .header-tools #messages-owner-trigger:focus-visible, body main header .header-tools #messages-owner-trigger.is-open,
body main header .header-tools #messages-inbox-trigger:hover,
body main header .header-tools #messages-inbox-trigger:focus-visible,
body main header .header-tools #messages-inbox-trigger.is-open {
  background: var(--accent-soft);
  transform: translateY(-2px);
}
body main header .header-tools #messages-owner-trigger:focus-visible,
body main header .header-tools #messages-inbox-trigger:focus-visible {
  outline: 2px solid var(--accent-fill);
  outline-offset: 2px;
}
body main header .header-tools #messages-owner-trigger i,
body main header .header-tools #messages-inbox-trigger i {
  font-size: 16px;
  line-height: 1;
  pointer-events: none;
}
body main header .header-tools #messages-owner-trigger svg,
body main header .header-tools #messages-inbox-trigger svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke-width: 1.5;
  stroke: var(--text-color-primary);
  vertical-align: middle;
}
body main header .header-tools #messages-owner-trigger #envelope,
body main header .header-tools #messages-inbox-trigger #envelope {
  fill: var(--text-color-primary);
}
body main header .header-tools #messages-inbox-trigger .messages-inbox-badge {
  position: absolute;
  top: -4px;
  inset-inline-end: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  border: 2px solid var(--surface-color);
  border-radius: 999px;
  background: var(--danger-color);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 12px;
  text-align: center;
  pointer-events: none;
}
body main header .header-tools #messages-inbox-trigger .messages-inbox-badge[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   نافذة المالك (شات خفيف)
   -------------------------------------------------------------------------- */
.messages-owner-panel {
  position: fixed;
  bottom: 24px;
  inset-inline-end: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  width: min(390px, 100vw - 32px);
  max-height: min(78vh, 680px);
  box-sizing: border-box;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: var(--surface-color);
  box-shadow: 0 24px 60px var(--shadow-color);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
.messages-owner-panel.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
.messages-owner-panel .messages-owner-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border-radius: 17px 17px 0 0;
  background: linear-gradient(135deg, var(--primary-fill), var(--accent-fill));
  color: var(--text-on-accent);
}
.messages-owner-panel .messages-owner-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.messages-owner-panel .messages-owner-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.18);
  color: var(--text-on-accent);
  font-size: 14px;
  flex: 0 0 auto;
}
.messages-owner-panel .messages-owner-title-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}
.messages-owner-panel .messages-owner-title-text strong {
  font-size: 14px;
  font-weight: 800;
}
.messages-owner-panel .messages-owner-title-text small {
  font-size: 10px;
  opacity: 0.85;
}
.messages-owner-panel .messages-owner-close {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 0.2s ease;
}
.messages-owner-panel .messages-owner-close:hover, .messages-owner-panel .messages-owner-close:focus-visible {
  background: rgba(255, 255, 255, 0.18);
}
.messages-owner-panel .messages-owner-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 15px 16px;
  overflow-y: auto;
  min-height: 0;
}
.messages-owner-panel .messages-audience {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--surface-muted);
}
.messages-owner-panel .messages-audience-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-color-secondary);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.messages-owner-panel .messages-audience-tab.is-active {
  background: var(--surface-color);
  color: var(--primary-color);
  box-shadow: 0 2px 8px var(--shadow-color);
}
.messages-owner-panel .messages-audience-tab i {
  font-size: 11px;
}
.messages-owner-panel .messages-recipients {
  padding: 9px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--input-bg);
}
.messages-owner-panel .messages-recipients[hidden] {
  display: none;
}
.messages-owner-panel .messages-recipients-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.messages-owner-panel .messages-recipients-search {
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: var(--surface-color);
  color: var(--text-color-primary);
  font-family: inherit;
  font-size: 11px;
}
.messages-owner-panel .messages-recipients-search:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.messages-owner-panel .messages-select-all {
  gap: 6px;
  min-height: 30px;
  padding: 4px 8px;
  font-size: 10px;
  white-space: nowrap;
}
.messages-owner-panel .messages-recipients-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 152px;
  overflow-y: auto;
}
.messages-owner-panel .messages-recipient {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.18s ease;
}
.messages-owner-panel .messages-recipient:hover {
  background: var(--accent-soft);
}
.messages-owner-panel .messages-recipient > input[type=checkbox] {
  flex: 0 0 auto;
}
.messages-owner-panel .messages-recipient-avatar {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--primary-color);
  font-size: 11px;
  font-weight: 800;
  flex: 0 0 auto;
}
.messages-owner-panel .messages-recipient-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.messages-owner-panel .messages-recipient-info strong {
  overflow: hidden;
  color: var(--text-color-primary);
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.messages-owner-panel .messages-recipient-info small {
  color: var(--text-color-secondary);
  font-size: 9px;
}
.messages-owner-panel .messages-recipients-empty {
  padding: 10px 6px;
  color: var(--text-color-secondary);
  font-size: 10px;
  text-align: center;
}
.messages-owner-panel .messages-recipients-empty.is-error {
  color: var(--danger-color);
  font-weight: 700;
}
.messages-owner-panel .messages-selected-count {
  margin-top: 6px;
  color: var(--accent-fill);
  font-size: 9px;
  font-weight: 700;
  text-align: end;
}
.messages-owner-panel .messages-compose-wrap {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.messages-owner-panel .messages-compose-box {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1.5px solid var(--border-color);
  border-radius: 14px;
  background: var(--input-bg);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.messages-owner-panel .messages-compose-box:focus-within {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.messages-owner-panel .messages-compose-tools {
  display: flex;
  align-items: center;
  gap: 4px;
}
.messages-owner-panel .messages-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-color-secondary);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.messages-owner-panel .messages-icon-btn i {
  font-size: 14px;
  line-height: 1;
}
.messages-owner-panel .messages-icon-btn:hover, .messages-owner-panel .messages-icon-btn:focus-visible, .messages-owner-panel .messages-icon-btn.is-open {
  background: var(--accent-soft);
  color: var(--primary-color);
}
.messages-owner-panel .messages-icon-btn:focus-visible {
  outline: 2px solid var(--accent-fill);
  outline-offset: 2px;
}
.messages-owner-panel .messages-icon-btn:active {
  transform: scale(0.95);
}
.messages-owner-panel .messages-icon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.messages-owner-panel .messages-record-toggle.is-recording {
  background: var(--danger-soft, var(--accent-soft));
  color: var(--danger-color);
}
.messages-owner-panel .messages-record-toggle.is-recording i {
  animation: messages-record-pulse 1.1s ease-in-out infinite;
}
.messages-owner-panel .messages-recorder {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px 10px;
  border: 1px dashed var(--border-color);
  border-radius: 12px;
  background: var(--surface-muted);
}
.messages-owner-panel .messages-recorder[hidden] {
  display: none;
}
.messages-owner-panel .messages-recorder.is-recording {
  border-color: var(--danger-color);
}
.messages-owner-panel .messages-recorder-head {
  display: flex;
  align-items: center;
  gap: 7px;
}
.messages-owner-panel .messages-recorder-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-color-secondary);
}
.messages-owner-panel .messages-recorder.is-recording .messages-recorder-dot {
  background: var(--danger-color);
  animation: messages-record-pulse 1.1s ease-in-out infinite;
}
.messages-owner-panel .messages-recorder-status {
  flex: 1;
  color: var(--text-color-secondary);
  font-size: 10px;
  line-height: 1.5;
}
.messages-owner-panel .messages-recorder-time {
  color: var(--primary-color);
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}
.messages-owner-panel .messages-recorder-actions {
  display: flex;
  justify-content: flex-end;
}
.messages-owner-panel .messages-recorder-cancel {
  padding: 4px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--danger-color);
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s ease;
}
.messages-owner-panel .messages-recorder-cancel:hover, .messages-owner-panel .messages-recorder-cancel:focus-visible {
  background: var(--surface-color);
}
.messages-owner-panel .messages-recorder-cancel[hidden] {
  display: none;
}
.messages-owner-panel .messages-emoji-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--surface-muted);
}
.messages-owner-panel .messages-emoji-picker[hidden] {
  display: none;
}
.messages-owner-panel .messages-emoji-tabs {
  display: flex;
  gap: 3px;
  overflow-x: auto;
  scrollbar-width: none;
}
.messages-owner-panel .messages-emoji-tabs::-webkit-scrollbar {
  display: none;
}
.messages-owner-panel .messages-emoji-tab {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 14px;
  line-height: 1;
  opacity: 0.55;
  cursor: pointer;
  transition: all 0.18s ease;
}
.messages-owner-panel .messages-emoji-tab:hover, .messages-owner-panel .messages-emoji-tab:focus-visible {
  background: var(--accent-soft);
  opacity: 1;
}
.messages-owner-panel .messages-emoji-tab.is-active {
  background: var(--surface-color);
  opacity: 1;
  box-shadow: 0 1px 4px var(--shadow-color);
}
.messages-owner-panel .messages-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 2px;
  max-height: 130px;
  overflow-y: auto;
}
.messages-owner-panel .messages-emoji-item {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1/1;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.messages-owner-panel .messages-emoji-item:hover, .messages-owner-panel .messages-emoji-item:focus-visible {
  background: var(--accent-soft);
  transform: scale(1.1);
}
.messages-owner-panel .messages-compose {
  width: 100%;
  min-height: 74px;
  max-height: 168px;
  box-sizing: border-box;
  padding: 12px 14px 6px;
  border: 0;
  background: transparent;
  color: var(--text-color-primary);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.65;
  resize: none;
  overflow-y: auto;
  scrollbar-width: thin;
}
.messages-owner-panel .messages-compose:focus {
  outline: none;
}
.messages-owner-panel .messages-compose::placeholder {
  color: var(--text-color-secondary);
}
.messages-owner-panel .messages-compose-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 8px 8px;
}
.messages-owner-panel .messages-compose-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 14px;
  color: var(--text-color-secondary);
  font-size: 9px;
}
.messages-owner-panel .messages-counter.is-near-limit {
  color: var(--danger-color);
  font-weight: 700;
}
.messages-owner-panel .messages-counter {
  direction: ltr;
  unicode-bidi: isolate;
}
.messages-owner-panel .messages-error {
  color: var(--danger-color);
  font-weight: 700;
  text-align: end;
}
.messages-owner-panel .messages-send {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--accent-fill);
  color: var(--text-on-accent);
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28);
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.messages-owner-panel .messages-send i {
  grid-area: 1/1;
  font-size: 14px;
  line-height: 1;
}
.messages-owner-panel .messages-send .messages-send-spinner {
  display: none;
}
.messages-owner-panel .messages-send:hover:not(:disabled) {
  background: var(--primary-fill-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.34);
}
.messages-owner-panel .messages-send:active:not(:disabled) {
  transform: scale(0.96);
}
.messages-owner-panel .messages-send:focus-visible {
  outline: 2px solid var(--accent-fill);
  outline-offset: 2px;
}
.messages-owner-panel .messages-send:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.messages-owner-panel .messages-send.is-loading .fa-paper-plane {
  display: none;
}
.messages-owner-panel .messages-send.is-loading .messages-send-spinner {
  display: inline-block;
  animation: messages-send-spin 0.8s linear infinite;
}

/* --------------------------------------------------------------------------
   📬 قائمة «رسائلي» — سجل الوارد الشخصي الدائم
   -------------------------------------------------------------------------- */
.messages-inbox-panel {
  position: fixed;
  bottom: 24px;
  inset-inline-end: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  width: min(420px, 100vw - 32px);
  max-height: min(78vh, 680px);
  box-sizing: border-box;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: var(--surface-color);
  box-shadow: 0 24px 60px var(--shadow-color);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
.messages-inbox-panel.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
.messages-inbox-panel .messages-inbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border-radius: 17px 17px 0 0;
  background: linear-gradient(135deg, var(--primary-fill), var(--accent-fill));
  color: var(--text-on-accent);
}
.messages-inbox-panel .messages-inbox-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.messages-inbox-panel .messages-inbox-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.18);
  color: var(--text-on-accent);
  font-size: 14px;
  flex: 0 0 auto;
}
.messages-inbox-panel .messages-inbox-title-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}
.messages-inbox-panel .messages-inbox-title-text strong {
  font-size: 14px;
  font-weight: 800;
}
.messages-inbox-panel .messages-inbox-title-text small {
  font-size: 10px;
  opacity: 0.85;
}
.messages-inbox-panel .messages-inbox-close {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 0.2s ease;
}
.messages-inbox-panel .messages-inbox-close:hover, .messages-inbox-panel .messages-inbox-close:focus-visible {
  background: rgba(255, 255, 255, 0.18);
}
.messages-inbox-panel .messages-inbox-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 12px 13px;
  overflow-y: auto;
}
.messages-inbox-panel .messages-inbox-state {
  padding: 28px 14px;
  color: var(--text-color-secondary);
  font-size: 11px;
  line-height: 1.7;
  text-align: center;
}
.messages-inbox-panel .messages-inbox-state.is-error {
  color: var(--danger-color);
  font-weight: 700;
}
.messages-inbox-panel .messages-inbox-item {
  padding: 10px 11px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--surface-color);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.messages-inbox-panel .messages-inbox-item.is-new {
  border-color: var(--accent-fill);
  background: var(--accent-soft);
}
.messages-inbox-panel .messages-inbox-item-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.messages-inbox-panel .messages-inbox-item-avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-fill), var(--accent-fill));
  color: var(--text-on-accent);
  font-size: 11px;
  font-weight: 900;
  flex: 0 0 auto;
}
.messages-inbox-panel .messages-inbox-item-meta {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.messages-inbox-panel .messages-inbox-item-meta strong {
  overflow: hidden;
  color: var(--primary-color);
  font-size: 11.5px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.messages-inbox-panel .messages-inbox-item-meta span {
  color: var(--text-color-secondary);
  font-size: 9px;
}
.messages-inbox-panel .messages-inbox-new {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent-fill);
  color: var(--text-on-accent);
  font-size: 9px;
  font-weight: 800;
}
.messages-inbox-panel .messages-inbox-text {
  margin: 7px 0 0;
  color: var(--text-color-primary);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}
.messages-inbox-panel .messages-inbox-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 13px 11px;
  border-top: 1px solid var(--border-color);
}
.messages-inbox-panel .messages-inbox-count {
  color: var(--text-color-secondary);
  font-size: 9.5px;
}
.messages-inbox-panel .messages-inbox-refresh {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 8px;
  padding: 5px 8px;
  background: var(--surface-muted);
  color: var(--primary-color);
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.messages-inbox-panel .messages-inbox-refresh:hover:not(:disabled), .messages-inbox-panel .messages-inbox-refresh:focus-visible {
  background: var(--accent-soft);
}
.messages-inbox-panel .messages-inbox-refresh:disabled {
  opacity: 0.55;
  cursor: default;
}
.messages-inbox-panel .messages-inbox-refresh i {
  font-size: 10px;
}

/* --------------------------------------------------------------------------
   الرسالة المنبثقة للمستلم
   -------------------------------------------------------------------------- */
.user-message-popup {
  position: fixed;
  bottom: 24px;
  inset-inline-start: 24px;
  z-index: 100000;
  width: min(380px, 100vw - 32px);
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--surface-color);
  box-shadow: 0 24px 60px var(--shadow-color);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px) scale(0.97);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
}
.user-message-popup.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
.user-message-popup.is-leaving {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
}
.user-message-popup .user-message-accent {
  height: 4px;
  background: linear-gradient(90deg, var(--accent-fill), var(--primary-color));
}
.user-message-popup .user-message-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 8px;
}
.user-message-popup .user-message-avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-fill), var(--accent-fill));
  color: var(--text-on-accent);
  font-size: 15px;
  font-weight: 900;
  flex: 0 0 auto;
}
.user-message-popup .user-message-meta {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.user-message-popup .user-message-meta strong {
  color: var(--primary-color);
  font-size: 12.5px;
  font-weight: 800;
}
.user-message-popup .user-message-meta span {
  color: var(--text-color-secondary);
  font-size: 9.5px;
}
.user-message-popup .user-message-close {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-color-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.user-message-popup .user-message-close:hover, .user-message-popup .user-message-close:focus-visible {
  background: var(--surface-muted);
  color: var(--danger-color);
}
.user-message-popup .user-message-body {
  max-height: 180px;
  overflow-y: auto;
  margin: 0;
  padding: 0 14px 10px;
  color: var(--text-color-primary);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}
.user-message-popup .user-message-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 0 14px 8px;
  color: var(--text-color-secondary);
  font-size: 9px;
}
.user-message-popup .user-message-timer {
  height: 3px;
  background: var(--surface-muted);
}
.user-message-popup .user-message-timer span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent-fill);
  transform-origin: right center;
}
.user-message-popup.is-counting .user-message-timer span {
  animation: user-message-countdown 10s linear forwards;
}

/* --------------------------------------------------------------------------
   🎙️ مشغّل الرسائل الصوتية — عنصر <audio> أصلي، بعرض كامل داخل فقاعات الرسائل.
   -------------------------------------------------------------------------- */
.messages-audio-player {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 36px;
  margin-top: 8px;
  border-radius: 10px;
  background: var(--surface-muted);
  color-scheme: light dark;
  accent-color: var(--accent-fill);
}
.messages-audio-player[hidden] {
  display: none;
}

.messages-recorder-preview {
  margin-top: 0;
}

.user-message-audio {
  padding: 0 14px 10px;
}
.user-message-audio[hidden] {
  display: none;
}
.user-message-audio .messages-audio-player {
  margin-top: 0;
}

.messages-inbox-audio {
  height: 34px;
}

@keyframes messages-record-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.82);
  }
}
@keyframes messages-send-spin {
  to {
    transform: rotate(360deg);
  }
}
/* --------------------------------------------------------------------------
   📜 شريط تمرير موحّد لحاويات الرسائل (النافذة، قائمة المستخدمين، السجل،
   شبكة الإيموجي، ونص الرسالة المنبثقة):
   رفيع وشفاف المسار، ويستخدم متغيّرات المظهر في الفاتح والداكن.
   -------------------------------------------------------------------------- */
.messages-owner-body,
.messages-inbox-body,
.messages-recipients-list,
.messages-emoji-grid,
.user-message-body {
  overscroll-behavior: contain;
  /* ---- Chrome / Edge / Safari ---- */
}
.messages-owner-body::-webkit-scrollbar,
.messages-inbox-body::-webkit-scrollbar,
.messages-recipients-list::-webkit-scrollbar,
.messages-emoji-grid::-webkit-scrollbar,
.user-message-body::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.messages-owner-body::-webkit-scrollbar-track, .messages-owner-body::-webkit-scrollbar-corner,
.messages-inbox-body::-webkit-scrollbar-track,
.messages-inbox-body::-webkit-scrollbar-corner,
.messages-recipients-list::-webkit-scrollbar-track,
.messages-recipients-list::-webkit-scrollbar-corner,
.messages-emoji-grid::-webkit-scrollbar-track,
.messages-emoji-grid::-webkit-scrollbar-corner,
.user-message-body::-webkit-scrollbar-track,
.user-message-body::-webkit-scrollbar-corner {
  background: transparent;
}
.messages-owner-body::-webkit-scrollbar-thumb,
.messages-inbox-body::-webkit-scrollbar-thumb,
.messages-recipients-list::-webkit-scrollbar-thumb,
.messages-emoji-grid::-webkit-scrollbar-thumb,
.user-message-body::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 99px;
}
.messages-owner-body::-webkit-scrollbar-thumb:hover,
.messages-inbox-body::-webkit-scrollbar-thumb:hover,
.messages-recipients-list::-webkit-scrollbar-thumb:hover,
.messages-emoji-grid::-webkit-scrollbar-thumb:hover,
.user-message-body::-webkit-scrollbar-thumb:hover {
  background: var(--text-color-secondary);
}
.messages-owner-body,
.messages-inbox-body,
.messages-recipients-list,
.messages-emoji-grid,
.user-message-body {
  /* ---- Firefox فقط: الحصر بـ @supports حتى لا يتجاهل كروم قواعد -webkit ---- */
}
@supports (-moz-appearance: none) {
  .messages-owner-body,
  .messages-inbox-body,
  .messages-recipients-list,
  .messages-emoji-grid,
  .user-message-body {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
  }
}

@keyframes user-message-countdown {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}
@media (max-width: 600px) {
  .messages-owner-panel,
  .messages-inbox-panel,
  .user-message-popup {
    inset-inline: 12px;
    bottom: 12px;
    width: auto;
    max-height: 82vh;
  }
}
/* ==========================================================================
   🧩 حوض العناصر العائمة أسفل يسار الشاشة
   - يجمع لوحة الأوامر الصوتية ونافذة رسائل الشات في صف واحد.
   - الترتيب من اليسار: الميكروفون أولًا ثم الشات.
   - عند إغلاق العنصر الأول يتحرك التالي إلى مكانه تلقائيًا (Flex).
   - المنطق في scripts/js/floating-dock.js.
   ========================================================================== */
.floating-dock {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 99999;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 12px;
  width: max-content;
  max-width: calc(100vw - 32px);
  /* ترتيب فيزيائي من اليسار مهما كان اتجاه الصفحة (RTL) */
  direction: ltr;
  pointer-events: none;
}

.floating-dock > .voice-panel,
.floating-dock > .messages-owner-panel,
.floating-dock > .messages-inbox-panel {
  position: relative;
  inset: auto;
  z-index: auto;
  display: none;
  flex: 0 1 auto;
  min-width: 0;
  direction: rtl;
}

/* الحوض نفسه شفاف للنقرات، لكن اللوحة المفتوحة تستقبلها. */
.floating-dock > .voice-panel.is-open,
.floating-dock > .messages-owner-panel.is-open,
.floating-dock > .messages-inbox-panel.is-open {
  pointer-events: auto;
}

/* على الشاشات الضيقة: فوق بعضهما بدل التزاحم أفقيًا،
   مع بقاء الميكروفون في الأسفل (column-reverse). */
@media (max-width: 600px) {
  .floating-dock {
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    max-width: none;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 8px;
  }
  .floating-dock > .voice-panel,
  .floating-dock > .messages-owner-panel,
  .floating-dock > .messages-inbox-panel {
    width: 100%;
    max-height: 45vh;
  }
}
/* ==========================================================================
   ⚙️ إعدادات التطبيق — نموذج بعمودين
   - العمود الأول (يمين في RTL): اسم الإعداد ووصفه المختصر.
   - العمود الثاني: حقل الإدخال أو مفتاح التشغيل المقابل لنفس السطر.
   - تقليل الحشو الداخلي قدر الإمكان مع إبقاء الصفوف واضحة ومقروءة.
   - على الشاشات الصغيرة يتحول الصف إلى عمود واحد (التسمية فوق الحقل).
   ========================================================================== */
.site-settings-page-wrapper .card-box .card-header {
  padding: 14px 18px;
}
.site-settings-page-wrapper .card-box .form-body {
  padding: 16px 18px;
}
.site-settings-page-wrapper #siteSettingsForm .settings-group + .settings-group {
  margin-top: 16px;
}
.site-settings-page-wrapper #siteSettingsForm .settings-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--primary-color);
}
.site-settings-page-wrapper #siteSettingsForm .settings-group-title i {
  color: var(--accent-color);
}
.site-settings-page-wrapper #siteSettingsForm .settings-fields-grid {
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--surface-color);
}
.site-settings-page-wrapper #siteSettingsForm .setting-row {
  display: grid;
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  align-items: start;
  gap: 12px;
  padding: 8px 12px;
  border-top: 1px solid var(--border-color);
}
.site-settings-page-wrapper #siteSettingsForm .setting-row:first-child {
  border-top: 0;
}
.site-settings-page-wrapper #siteSettingsForm .setting-row-label {
  min-width: 0;
  padding-top: 3px;
}
.site-settings-page-wrapper #siteSettingsForm .setting-row-label label {
  display: block;
  margin: 0;
  font-size: 0.89rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-color-primary);
}
.site-settings-page-wrapper #siteSettingsForm .setting-row-label .text-danger {
  color: var(--danger-color);
}
.site-settings-page-wrapper #siteSettingsForm .setting-row-hint {
  display: block;
  margin-top: 2px;
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--text-color-secondary);
}
.site-settings-page-wrapper #siteSettingsForm .setting-row-control {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 34px;
}
.site-settings-page-wrapper #siteSettingsForm .setting-row-control .form-control {
  width: 100%;
  padding: 8px 10px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text-color-primary);
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.site-settings-page-wrapper #siteSettingsForm .setting-row-control .form-control:focus {
  border-color: var(--accent-color);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.site-settings-page-wrapper #siteSettingsForm .setting-row-control textarea.form-control {
  min-height: 88px;
  line-height: 1.7;
  resize: vertical;
}
.site-settings-page-wrapper #siteSettingsForm .setting-row-control-textarea {
  align-items: stretch;
}
.site-settings-page-wrapper #siteSettingsForm .setting-row-control-switch {
  min-height: 30px;
}
.site-settings-page-wrapper #siteSettingsForm .setting-row-control .setting-switch {
  gap: 8px;
  align-items: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.site-settings-page-wrapper #siteSettingsForm .setting-row-control .setting-switch:hover {
  border-color: transparent;
}
.site-settings-page-wrapper #siteSettingsForm .setting-row-control .setting-switch:has(input:checked) {
  background: transparent;
}
.site-settings-page-wrapper #siteSettingsForm .setting-row-control .setting-switch .setting-switch-track {
  margin-top: 0;
}
.site-settings-page-wrapper #siteSettingsForm .setting-row-control .setting-switch .setting-switch-meta {
  flex-direction: row;
  align-items: center;
  gap: 0;
}
.site-settings-page-wrapper #siteSettingsForm .setting-row-control .setting-switch .setting-switch-state {
  align-self: center;
}
.site-settings-page-wrapper #siteSettingsForm .settings-notes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 10px 0 2px;
}
.site-settings-page-wrapper #siteSettingsForm .settings-notes small {
  line-height: 1.6;
}
.site-settings-page-wrapper #siteSettingsForm .settings-save-btn {
  margin-top: 4px;
  padding: 9px 20px;
  font-size: 14px;
}

@media screen and (max-width: 680px) {
  .site-settings-page-wrapper .card-box .card-header {
    padding: 12px 14px;
  }
  .site-settings-page-wrapper .card-box .form-body {
    padding: 12px 14px;
  }
  .site-settings-page-wrapper #siteSettingsForm .settings-group + .settings-group {
    margin-top: 14px;
  }
  .site-settings-page-wrapper #siteSettingsForm .setting-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 8px 10px;
  }
  .site-settings-page-wrapper #siteSettingsForm .setting-row-label {
    padding-top: 0;
  }
  .site-settings-page-wrapper #siteSettingsForm .setting-row-control {
    min-height: 0;
  }
  .site-settings-page-wrapper #siteSettingsForm .settings-save-btn {
    width: 100% !important;
    justify-content: center;
  }
}
/* ==========================================================================
   🧨 صيانة جداول قاعدة البيانات
   - قائمة أقسام، ولكل جدول صفّ مستقل: الاسم والوصف والاعتماديات وعدد الصفوف.
   - زر التفريغ أحمر واضح، ويُعطَّل إذا كان الجدول محميًا أو مرتبطًا بصفوف تابعة.
   ========================================================================== */
.site-settings-page-wrapper .database-maintenance .database-maintenance-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 10px;
  padding: 12px 14px;
  border: 1px solid var(--danger-color);
  border-radius: 10px;
  background: var(--danger-soft);
  color: var(--danger-color);
  font-size: 13px;
  line-height: 1.8;
}
.site-settings-page-wrapper .database-maintenance .database-maintenance-warning i {
  margin-top: 3px;
  flex: 0 0 auto;
}
.site-settings-page-wrapper .database-maintenance .database-maintenance-warning code {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.06);
  color: inherit;
  font-size: 11px;
  direction: ltr;
}
.site-settings-page-wrapper .database-maintenance .database-maintenance-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 16px;
  color: var(--text-color-secondary);
  font-size: 12.5px;
  line-height: 1.7;
}
.site-settings-page-wrapper .database-maintenance .database-maintenance-note i {
  margin-top: 2px;
  flex: 0 0 auto;
}
.site-settings-page-wrapper .database-maintenance .database-maintenance-error,
.site-settings-page-wrapper .database-maintenance .database-maintenance-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--background-color);
  color: var(--text-color-secondary);
  font-size: 13px;
  line-height: 1.7;
}
.site-settings-page-wrapper .database-maintenance .database-maintenance-error {
  border-color: var(--danger-color);
  background: var(--danger-soft);
  color: var(--danger-color);
}
.site-settings-page-wrapper .database-maintenance {
  /* 📌 نتيجة آخر عملية تفريغ — تُحدَّث من JS في مكانها بلا إعادة تحميل.
     فارغة افتراضيًا فلا تأخذ مساحة قبل أول عملية. */
}
.site-settings-page-wrapper .database-maintenance .database-maintenance-status {
  display: block;
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.7;
}
.site-settings-page-wrapper .database-maintenance .database-maintenance-status:empty {
  display: none;
}
.site-settings-page-wrapper .database-maintenance .database-maintenance-status.is-success {
  color: var(--success-color);
}
.site-settings-page-wrapper .database-maintenance .database-maintenance-status.is-error {
  color: var(--danger-color);
}
.site-settings-page-wrapper .database-maintenance .database-table-group + .database-table-group {
  margin-top: 16px;
}
.site-settings-page-wrapper .database-maintenance .database-table-group-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 6px;
  color: var(--text-color-primary);
  font-size: 13.5px;
  font-weight: 800;
}
.site-settings-page-wrapper .database-maintenance .database-table-group-title i {
  color: var(--accent-color);
}
.site-settings-page-wrapper .database-maintenance .database-table-list {
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--sidebar-bg, #fff);
}
.site-settings-page-wrapper .database-maintenance .database-table-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  padding: 11px 13px;
  border-top: 1px solid var(--border-color);
}
.site-settings-page-wrapper .database-maintenance .database-table-row:first-child {
  border-top: 0;
}
.site-settings-page-wrapper .database-maintenance .database-table-row.is-protected {
  background: var(--background-color);
}
.site-settings-page-wrapper .database-maintenance .database-table-row.is-blocked {
  box-shadow: inset 3px 0 0 var(--danger-color);
}
.site-settings-page-wrapper .database-maintenance .database-table-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.site-settings-page-wrapper .database-maintenance .database-table-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}
.site-settings-page-wrapper .database-maintenance .database-table-title strong {
  color: var(--text-color-primary);
  font-size: 13.5px;
  font-weight: 800;
}
.site-settings-page-wrapper .database-maintenance .database-table-title code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--background-color);
  color: var(--text-color-secondary);
  font-size: 10.5px;
  direction: ltr;
}
.site-settings-page-wrapper .database-maintenance .database-table-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--background-color);
  color: var(--text-color-secondary);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.6;
}
.site-settings-page-wrapper .database-maintenance .database-table-badge.is-danger {
  background: var(--danger-soft);
  color: var(--danger-color);
}
.site-settings-page-wrapper .database-maintenance .database-table-badge.is-warning {
  background: var(--warning-soft);
  color: var(--warning-color);
}
.site-settings-page-wrapper .database-maintenance .database-table-badge.is-normal {
  background: var(--info-soft);
  color: var(--info-color);
}
.site-settings-page-wrapper .database-maintenance .database-table-badge.is-protected {
  background: var(--hover-background);
  color: var(--text-color-secondary);
}
.site-settings-page-wrapper .database-maintenance .database-table-description {
  color: var(--text-color-secondary);
  font-size: 12px;
  line-height: 1.6;
}
.site-settings-page-wrapper .database-maintenance .database-table-dependencies {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  color: var(--text-color-secondary);
  font-size: 11.5px;
  line-height: 1.5;
}
.site-settings-page-wrapper .database-maintenance .database-table-dependencies > i {
  color: var(--accent-color);
}
.site-settings-page-wrapper .database-maintenance .database-table-dependency {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--background-color);
  white-space: nowrap;
}
.site-settings-page-wrapper .database-maintenance .database-table-dependency.is-blocking {
  background: var(--danger-soft);
  color: var(--danger-color);
  font-weight: 700;
}
.site-settings-page-wrapper .database-maintenance .database-table-blocked {
  color: var(--danger-color);
  font-size: 11.5px;
  line-height: 1.5;
}
.site-settings-page-wrapper .database-maintenance .database-table-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  min-width: 145px;
}
.site-settings-page-wrapper .database-maintenance .database-table-count {
  color: var(--text-color-secondary);
  font-size: 12px;
  white-space: nowrap;
}
.site-settings-page-wrapper .database-maintenance .database-table-count strong {
  color: var(--text-color-primary);
  font-size: 14px;
  font-weight: 800;
}
.site-settings-page-wrapper .database-maintenance {
  /* 🔒 صفوف لا يشملها التفريغ (مثل الحسابات الرئيسية). */
}
.site-settings-page-wrapper .database-maintenance .database-table-preserved {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--success-color);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
.site-settings-page-wrapper .database-maintenance .database-table-autoinc {
  color: var(--text-color-secondary);
  font-size: 10.5px;
  white-space: nowrap;
}
.site-settings-page-wrapper .database-maintenance .database-table-truncate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 3px;
  padding: 6px 12px;
  border: 1px solid var(--danger-color);
  border-radius: 8px;
  background: transparent;
  color: var(--danger-color);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.site-settings-page-wrapper .database-maintenance .database-table-truncate:hover:not(:disabled) {
  background: var(--danger-fill);
  color: #fff;
}
.site-settings-page-wrapper .database-maintenance .database-table-truncate:disabled {
  border-color: var(--border-color);
  background: var(--background-color);
  color: var(--text-color-secondary);
  cursor: not-allowed;
  opacity: 0.65;
}
.site-settings-page-wrapper {
  /* 🔒 قفل الفترات المحاسبية (شهري): شبكة أشهر + زر قفل/فتح لكل شهر.
     - الأخضر = مفتوحة (قابلة للتعديل)، الكهرماني = مقفلة (لا كتابة مالية).
     - البطاقة مستقلة عن نموذج الإعدادات، لذا لا تحتوي أي حقل يُحفظ. */
}
.site-settings-page-wrapper .fiscal-periods .card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.site-settings-page-wrapper .fiscal-periods .fiscal-periods-year {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-color-secondary);
  font-size: 12.5px;
  font-weight: 700;
}
.site-settings-page-wrapper .fiscal-periods .fiscal-periods-year select {
  padding: 5px 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--background-color);
  color: var(--text-color-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.site-settings-page-wrapper .fiscal-periods .fiscal-periods-year select:disabled {
  cursor: default;
  opacity: 0.75;
}
.site-settings-page-wrapper .fiscal-periods .fiscal-periods-intro,
.site-settings-page-wrapper .fiscal-periods .fiscal-periods-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0 0 12px;
  color: var(--text-color-secondary);
  font-size: 12.5px;
  line-height: 1.7;
}
.site-settings-page-wrapper .fiscal-periods .fiscal-periods-intro > i,
.site-settings-page-wrapper .fiscal-periods .fiscal-periods-note > i {
  flex-shrink: 0;
  margin-top: 3px;
}
.site-settings-page-wrapper .fiscal-periods .fiscal-periods-note {
  margin: 12px 0 0;
}
.site-settings-page-wrapper .fiscal-periods .fiscal-periods-status {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 700;
}
.site-settings-page-wrapper .fiscal-periods .fiscal-periods-status:empty {
  display: none;
}
.site-settings-page-wrapper .fiscal-periods .fiscal-periods-status[data-tone=success] {
  color: var(--success-color);
}
.site-settings-page-wrapper .fiscal-periods .fiscal-periods-status[data-tone=error] {
  color: var(--danger-color);
}
.site-settings-page-wrapper .fiscal-periods .fiscal-periods-status[data-tone=info] {
  color: var(--text-color-secondary);
}
.site-settings-page-wrapper .fiscal-periods .fiscal-periods-error,
.site-settings-page-wrapper .fiscal-periods .fiscal-periods-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.6;
}
.site-settings-page-wrapper .fiscal-periods .fiscal-periods-error {
  border: 1px solid var(--danger-color);
  background: var(--danger-soft);
  color: var(--danger-color);
}
.site-settings-page-wrapper .fiscal-periods .fiscal-periods-empty {
  justify-content: center;
  border: 1px dashed var(--border-color);
  background: var(--background-color);
  color: var(--text-color-secondary);
}
.site-settings-page-wrapper .fiscal-periods .fiscal-periods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
.site-settings-page-wrapper .fiscal-periods .fiscal-period {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--background-color);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.site-settings-page-wrapper .fiscal-periods .fiscal-period.is-locked {
  border-color: var(--warning-color);
  background: var(--warning-soft);
}
.site-settings-page-wrapper .fiscal-periods .fiscal-period.is-locked .fiscal-period-badge {
  background: var(--warning-soft);
  color: var(--warning-color);
}
.site-settings-page-wrapper .fiscal-periods .fiscal-period.is-locked .fiscal-period-toggle {
  border-color: var(--warning-color);
  color: var(--warning-color);
}
.site-settings-page-wrapper .fiscal-periods .fiscal-period.is-locked .fiscal-period-toggle:hover:not(:disabled) {
  background: var(--warning-fill);
  color: #fff;
}
.site-settings-page-wrapper .fiscal-periods .fiscal-period-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.site-settings-page-wrapper .fiscal-periods .fiscal-period-name {
  color: var(--text-color-primary);
  font-size: 13.5px;
  font-weight: 800;
}
.site-settings-page-wrapper .fiscal-periods .fiscal-period-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--success-soft);
  color: var(--success-color);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.7;
  white-space: nowrap;
}
.site-settings-page-wrapper .fiscal-periods .fiscal-period-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 17px;
  color: var(--text-color-secondary);
  font-size: 11.5px;
  line-height: 1.5;
}
.site-settings-page-wrapper .fiscal-periods .fiscal-period-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 2px;
  padding: 6px 12px;
  border: 1px solid var(--primary-color);
  border-radius: 8px;
  background: transparent;
  color: var(--primary-color);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.site-settings-page-wrapper .fiscal-periods .fiscal-period-toggle:hover:not(:disabled) {
  background: var(--primary-color);
  color: #fff;
}
.site-settings-page-wrapper .fiscal-periods .fiscal-period-toggle:disabled {
  border-color: var(--border-color);
  background: var(--background-color);
  color: var(--text-color-secondary);
  cursor: not-allowed;
  opacity: 0.65;
}

@media screen and (max-width: 680px) {
  .site-settings-page-wrapper .fiscal-periods .fiscal-period {
    padding: 10px 12px;
  }
  .site-settings-page-wrapper .fiscal-periods .fiscal-period-toggle {
    width: 100%;
  }
  .site-settings-page-wrapper .database-maintenance .database-table-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .site-settings-page-wrapper .database-maintenance .database-table-actions {
    align-items: stretch;
    min-width: 0;
  }
  .site-settings-page-wrapper .database-maintenance .database-table-truncate {
    width: 100%;
  }
}
/* ==========================================================================
   🛠️ وضع الصيانة — صفحة كاملة تُعرض عند إغلاق التطبيق مؤقتًا.
   - لا تعتمد على الهيدر/السايدبار أو سكربتات التطبيق.
   - تستخدم متغيّرات الألوان نفسها (فاتح/داكن) لتبدو جزءًا من النظام.
   ========================================================================== */
body.maintenance-mode {
  margin: 0;
  min-height: 100vh;
  background: var(--background-color);
}
body.maintenance-mode main {
  display: block;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

/* في جلسة مسجّلة، قواعد سطح المكتب تُزيح main بمقدار عرض القائمة الجانبية.
   نُلغي هذه الإزاحة هنا لأن صفحة الصيانة لا تحتوي قائمة جانبية أصلًا. */
html.is-authenticated body.maintenance-mode main,
html.is-authenticated[data-nav-mode=navbar] body.maintenance-mode main {
  padding-right: 0;
}

.maintenance-page-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 28px 18px;
  overflow: hidden;
  background: radial-gradient(circle at 18% 18%, var(--accent-soft), transparent 42%), radial-gradient(circle at 82% 82%, var(--primary-soft), transparent 42%), var(--background-color);
}

.maintenance-card {
  position: relative;
  z-index: 1;
  width: min(100%, 640px);
  padding: clamp(24px, 5vw, 42px);
  text-align: center;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: var(--surface-color);
  box-shadow: 0 24px 70px var(--shadow-color);
}

.maintenance-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-color);
  font-size: 30px;
}

.maintenance-kicker {
  margin: 0 0 6px;
  color: var(--accent-color);
  font-size: 12px;
  font-weight: 800;
}

.maintenance-card h1 {
  margin: 0 0 14px;
  color: var(--text-color-primary);
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.35;
}

.maintenance-message {
  max-width: 52ch;
  margin: 0 auto 20px;
  color: var(--text-color-secondary);
  font-size: clamp(15px, 2.2vw, 17px);
  line-height: 2;
}

.maintenance-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 22px;
}
.maintenance-status span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--background-color);
  color: var(--text-color-secondary);
  font-size: 12px;
  line-height: 1.6;
}
.maintenance-status i {
  color: var(--accent-color);
}

.maintenance-actions {
  display: flex;
  justify-content: center;
}

.maintenance-login-link,
.maintenance-logout-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border: 1px solid var(--primary-fill);
  border-radius: 10px;
  background: var(--primary-fill);
  color: var(--text-on-accent);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.maintenance-login-link:hover,
.maintenance-logout-form button:hover {
  background: var(--primary-fill-hover);
  transform: translateY(-1px);
}

.maintenance-logout-form {
  margin: 0;
}

.maintenance-contact {
  margin: 18px 0 0;
  color: var(--text-color-secondary);
  font-size: 12px;
  line-height: 1.7;
}

@media screen and (max-width: 520px) {
  .maintenance-page-wrapper {
    padding: 18px 12px;
  }
  .maintenance-card {
    padding: 24px 18px;
    border-radius: 14px;
  }
  .maintenance-status {
    flex-direction: column;
    align-items: center;
  }
}
/* ==========================================================================
   🚚 company_start.php — صفحة بداية بهوية شركة نقل ولوجستيات
   --------------------------------------------------------------------------
   • كل الأنماط مقيَّدة بـ body main .company-home حتى لا تمسّ start.php
     ولا أي صفحة أخرى.
   • تعتمد على متغيّرات الثيم العامة في _joint.scss + متغيّرات محلية --ch-*
     لألوان الهوية (ذهبي الشعار + كحلي الشركة)، مع نسخة للوضع الداكن.
   • لا أنماط سطرية إطلاقًا (CSP: style-src 'self').
   ========================================================================== */
body main .company-home {
  /* 🎨 هوية الصفحة: ذهبي الشعار + كحلي الشركة */
  --ch-gold: #c39b54;
  --ch-gold-strong: #a97f3c;
  --ch-gold-soft: rgba(195, 155, 84, 0.16);
  --ch-navy: #0f385b;
  --ch-navy-soft: #16486f;
  --ch-radius-lg: 22px;
  --ch-radius-md: 16px;
  --ch-radius-sm: 11px;
  --ch-shadow: 0 20px 50px rgba(15, 56, 91, 0.10);
  --ch-shadow-sm: 0 10px 26px rgba(15, 56, 91, 0.07);
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  padding: clamp(14px, 2.4vw, 32px) clamp(14px, 3vw, 44px) clamp(28px, 4vw, 56px);
  color: var(--text-color-primary);
  background: radial-gradient(1100px 520px at 100% -8%, var(--ch-gold-soft), transparent 68%), radial-gradient(900px 480px at 0% 0%, var(--primary-soft), transparent 62%), var(--background-color);
  /* شبكة خفيفة توحي بخريطة مسارات — زخرفية فقط */
}
body main .company-home::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
  background-image: linear-gradient(to left, var(--border-color) 1px, transparent 1px), linear-gradient(to bottom, var(--border-color) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(1200px 620px at 50% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(1200px 620px at 50% 0%, #000 0%, transparent 78%);
}
body main .company-home {
  /* ----------------------------------------------------------------------
     🧭 الشريط العلوي
     ---------------------------------------------------------------------- */
}
body main .company-home .ch-topbar {
  position: sticky;
  top: 8px;
  z-index: 30;
  /* عزل صريح عن القواعد العامة body main header في _joint.scss
     (تجعل الهيدر عموديًا بارتفاع ثابت وتستهدف صوره) */
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  min-height: 0;
  gap: 14px;
  width: 100%;
  max-width: 1260px;
  margin: 0 auto clamp(22px, 3.4vw, 40px);
  padding: 9px clamp(12px, 1.6vw, 18px);
  border: 1px solid var(--border-color);
  border-radius: var(--ch-radius-md);
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--ch-shadow-sm);
}
body main .company-home .ch-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
body main .company-home .ch-brand .ch-brand-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 13px;
  background: #fff;
}
body main .company-home .ch-brand .ch-brand-mark img {
  display: block;
  width: 38px;
  height: 38px;
  /* عزل عن body main header img (حد دائري + قص) */
  border: 0;
  border-radius: 8px;
  object-fit: contain;
}
body main .company-home .ch-brand .ch-brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
body main .company-home .ch-brand .ch-brand-text strong {
  font-size: 17px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--primary-color);
}
body main .company-home .ch-brand .ch-brand-text small {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-color-secondary);
}
body main .company-home .ch-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
body main .company-home .ch-nav a {
  position: relative;
  padding: 7px 11px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-color-secondary);
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
}
body main .company-home .ch-nav a::after {
  content: "";
  position: absolute;
  inset-inline: 11px;
  bottom: 3px;
  height: 2px;
  border-radius: 99px;
  background: var(--ch-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.22s ease;
}
body main .company-home .ch-nav a:hover, body main .company-home .ch-nav a:focus-visible {
  color: var(--primary-color);
  background: var(--surface-muted);
}
body main .company-home .ch-nav a:hover::after, body main .company-home .ch-nav a:focus-visible::after {
  transform: scaleX(1);
}
body main .company-home .ch-topbar-side {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
body main .company-home .ch-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: 99px;
  background: var(--surface-color);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  color: var(--text-color-secondary);
}
body main .company-home .ch-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success-fill);
  box-shadow: 0 0 0 4px var(--success-soft);
  animation: ch-pulse 2.4s ease-in-out infinite;
}
body main .company-home {
  /* ☎️ شريحة الاتصال في الشريط العلوي — تظهر فقط عند ضبط هاتف في الإعدادات */
}
body main .company-home .ch-call {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid rgba(195, 155, 84, 0.38);
  border-radius: 99px;
  background: var(--ch-gold-soft);
  font-size: 11px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ch-gold-strong);
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
body main .company-home .ch-call i {
  font-size: 11px;
}
body main .company-home .ch-call:hover, body main .company-home .ch-call:focus-visible {
  background: rgba(195, 155, 84, 0.26);
  transform: translateY(-1px);
}
body main .company-home .ch-user {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 5px 11px;
  border: 1px solid var(--border-color);
  border-radius: 99px;
  background: var(--surface-muted);
  font-size: 11px;
  font-weight: 800;
  color: var(--primary-color);
}
body main .company-home .ch-user i {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--ch-gold-strong);
}
body main .company-home .ch-user span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body main .company-home {
  /* ----------------------------------------------------------------------
     🎯 الواجهة الرئيسية
     ---------------------------------------------------------------------- */
}
body main .company-home .ch-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  align-items: center;
  gap: clamp(26px, 4vw, 60px);
  width: 100%;
  max-width: 1260px;
  margin-inline: auto;
}
body main .company-home .ch-hero-copy {
  min-width: 0;
}
body main .company-home .ch-hero-copy .ch-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(195, 155, 84, 0.35);
  border-radius: 99px;
  background: var(--ch-gold-soft);
  font-size: 11.5px;
  font-weight: 800;
  color: var(--ch-gold-strong);
}
body main .company-home .ch-hero-copy .ch-eyebrow i {
  font-size: 11px;
}
body main .company-home .ch-hero-copy .ch-welcome {
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-color-secondary);
}
body main .company-home .ch-hero-copy h1 {
  margin: 14px 0 0;
  font-size: clamp(30px, 4.4vw, 54px);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.4px;
  color: var(--heading-color);
}
body main .company-home .ch-hero-copy h1 em {
  position: relative;
  display: inline-block;
  font-style: normal;
  color: var(--ch-gold-strong);
}
body main .company-home .ch-hero-copy h1 em::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 6px;
  z-index: -1;
  height: 9px;
  border-radius: 3px;
  background: var(--ch-gold-soft);
}
body main .company-home .ch-hero-copy .ch-lead {
  max-width: 56ch;
  margin: 16px 0 0;
  font-size: clamp(13.5px, 1.2vw, 15.5px);
  line-height: 1.95;
  color: var(--text-color-secondary);
}
body main .company-home .ch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
body main .company-home .ch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
body main .company-home .ch-btn i {
  font-size: 13px;
}
body main .company-home .ch-btn.is-primary {
  background: var(--primary-fill);
  color: var(--text-on-accent);
  box-shadow: 0 12px 26px rgba(47, 111, 159, 0.28);
}
body main .company-home .ch-btn.is-primary:hover {
  background: var(--primary-fill-hover);
  transform: translateY(-2px);
}
body main .company-home .ch-btn.is-ghost {
  border-color: var(--border-color);
  background: var(--surface-color);
  color: var(--primary-color);
}
body main .company-home .ch-btn.is-ghost:hover {
  background: var(--surface-muted);
  transform: translateY(-2px);
}
body main .company-home .ch-btn.is-light {
  background: #fff;
  color: var(--ch-navy);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
}
body main .company-home .ch-btn.is-light:hover {
  transform: translateY(-2px);
}
body main .company-home .ch-btn.is-outline {
  border-color: rgba(255, 255, 255, 0.45);
  background: transparent;
  color: #fff;
}
body main .company-home .ch-btn.is-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}
body main .company-home .ch-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
body main .company-home .ch-points li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-color-secondary);
}
body main .company-home .ch-points li i {
  font-size: 12px;
  color: var(--success-color);
}
body main .company-home {
  /* ----------------------------------------------------------------------
     🛰️ بطاقة متابعة رحلة (العنصر البصري في الواجهة)
     ---------------------------------------------------------------------- */
}
body main .company-home .ch-trip {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 18px;
  border: 1px solid var(--border-color);
  border-radius: var(--ch-radius-lg);
  background: var(--surface-color);
  box-shadow: var(--ch-shadow);
}
body main .company-home .ch-trip::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 4px;
  background: linear-gradient(to left, var(--ch-gold), var(--ch-gold-strong), var(--ch-navy));
}
body main .company-home .ch-trip::after {
  content: "";
  position: absolute;
  top: -110px;
  inset-inline-end: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ch-gold-soft), transparent 70%);
  pointer-events: none;
}
body main .company-home .ch-trip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
body main .company-home .ch-trip-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
body main .company-home .ch-trip-title .ch-trip-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--ch-gold-soft);
  font-size: 16px;
  color: var(--ch-gold-strong);
}
body main .company-home .ch-trip-title strong {
  display: block;
  font-size: 14px;
  font-weight: 900;
  color: var(--primary-color);
}
body main .company-home .ch-trip-title small {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-color-secondary);
}
body main .company-home .ch-trip-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 99px;
  background: var(--success-soft);
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
  color: var(--success-color);
}
body main .company-home .ch-trip-badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: ch-pulse 2s ease-in-out infinite;
}
body main .company-home .ch-trip-route {
  position: relative;
  margin-top: 20px;
}
body main .company-home .ch-trip-stops {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* خط المسار بين أول نقطة وآخرها */
}
body main .company-home .ch-trip-stops::before {
  content: "";
  position: absolute;
  top: 5px;
  inset-inline: 16.6666666667%;
  height: 3px;
  border-radius: 99px;
  background: var(--border-color);
}
body main .company-home .ch-trip-stops {
  /* الجزء المقطوع من المسار */
}
body main .company-home .ch-trip-stops::after {
  content: "";
  position: absolute;
  top: 5px;
  inset-inline-start: 16.6666666667%;
  width: 45.3333333333%;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(to left, var(--ch-gold-strong), var(--ch-gold));
}
body main .company-home .ch-trip-stops li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
  padding-top: 19px;
  text-align: center;
}
body main .company-home .ch-trip-stops li::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  margin-inline: auto;
  box-sizing: border-box;
  width: 13px;
  height: 13px;
  border: 3px solid var(--border-color);
  border-radius: 50%;
  background: var(--surface-color);
}
body main .company-home .ch-trip-stops li strong {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-color-secondary);
}
body main .company-home .ch-trip-stops li small {
  font-size: 9.5px;
  font-weight: 700;
  opacity: 0.8;
  color: var(--text-color-secondary);
}
body main .company-home .ch-trip-stops li.is-done::before, body main .company-home .ch-trip-stops li.is-current::before {
  border-color: var(--ch-gold);
  background: var(--ch-gold);
}
body main .company-home .ch-trip-stops li.is-done strong, body main .company-home .ch-trip-stops li.is-current strong {
  color: var(--primary-color);
}
body main .company-home .ch-trip-stops li.is-current::before {
  box-shadow: 0 0 0 5px var(--ch-gold-soft);
}
body main .company-home .ch-trip-truck {
  position: absolute;
  top: -14px;
  inset-inline-start: calc(62% - 15px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary-fill);
  font-size: 12px;
  color: var(--text-on-accent);
  box-shadow: 0 6px 14px rgba(47, 111, 159, 0.35), 0 0 0 3px var(--surface-color);
  animation: ch-truck-bob 2.6s ease-in-out infinite;
}
body main .company-home .ch-trip-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
}
body main .company-home .ch-trip-meta > div {
  padding: 9px 11px;
  border-radius: var(--ch-radius-sm);
  background: var(--surface-muted);
}
body main .company-home .ch-trip-meta dt {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 800;
  color: var(--text-color-secondary);
}
body main .company-home .ch-trip-meta dt i {
  font-size: 10px;
  color: var(--ch-gold-strong);
}
body main .company-home .ch-trip-meta dd {
  margin: 0;
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-color-primary);
}
body main .company-home .ch-trip-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px dashed var(--border-color);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-color-secondary);
}
body main .company-home .ch-trip-foot .ch-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  color: var(--success-color);
}
body main .company-home .ch-trip-foot .ch-live i {
  font-size: 11px;
  animation: ch-pulse 2.4s ease-in-out infinite;
}
body main .company-home {
  /* ----------------------------------------------------------------------
     📊 شريط المؤشرات
     ---------------------------------------------------------------------- */
}
body main .company-home .ch-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 1260px;
  margin: clamp(26px, 4vw, 44px) auto 0;
  padding: 0;
  list-style: none;
}
body main .company-home .ch-stats li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--ch-radius-md);
  background: var(--surface-color);
  box-shadow: var(--ch-shadow-sm);
}
body main .company-home .ch-stats li > i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--primary-soft);
  font-size: 14px;
  color: var(--primary-color);
}
body main .company-home .ch-stats li strong {
  display: block;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.1;
  color: var(--heading-color);
}
body main .company-home .ch-stats li span {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-color-secondary);
}
body main .company-home {
  /* ----------------------------------------------------------------------
     🧩 الأقسام العامة
     ---------------------------------------------------------------------- */
}
body main .company-home .ch-section {
  width: 100%;
  max-width: 1260px;
  margin: clamp(38px, 5.5vw, 72px) auto 0;
}
body main .company-home .ch-section[id] {
  scroll-margin-top: 84px;
}
body main .company-home .ch-section-head {
  max-width: 720px;
  margin-bottom: clamp(18px, 2.4vw, 28px);
}
body main .company-home .ch-section-head .ch-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.4px;
  color: var(--ch-gold-strong);
}
body main .company-home .ch-section-head .ch-kicker::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 99px;
  background: var(--ch-gold);
}
body main .company-home .ch-section-head h2 {
  margin: 7px 0 0;
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 900;
  line-height: 1.25;
  color: var(--heading-color);
}
body main .company-home .ch-section-head p {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.85;
  color: var(--text-color-secondary);
}
body main .company-home {
  /* 🚛 الخدمات */
}
body main .company-home .ch-services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
body main .company-home .ch-service {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--border-color);
  border-radius: var(--ch-radius-md);
  background: var(--surface-color);
  box-shadow: var(--ch-shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
body main .company-home .ch-service::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  border-radius: var(--ch-radius-md) var(--ch-radius-md) 0 0;
  background: linear-gradient(to left, var(--ch-gold), transparent);
  opacity: 0;
  transition: opacity 0.22s ease;
}
body main .company-home .ch-service:hover {
  transform: translateY(-4px);
  border-color: rgba(195, 155, 84, 0.45);
  box-shadow: var(--ch-shadow);
}
body main .company-home .ch-service:hover::before {
  opacity: 1;
}
body main .company-home .ch-service .ch-service-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--ch-gold-soft);
  font-size: 17px;
  color: var(--ch-gold-strong);
}
body main .company-home .ch-service h3 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 900;
  color: var(--primary-color);
}
body main .company-home .ch-service p {
  margin: 0;
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-color-secondary);
}
body main .company-home {
  /* 🚚 الأسطول */
}
body main .company-home .ch-fleet {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
body main .company-home .ch-fleet-card {
  display: flex;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--border-color);
  border-radius: var(--ch-radius-md);
  background: linear-gradient(135deg, var(--surface-color), var(--surface-muted));
  box-shadow: var(--ch-shadow-sm);
}
body main .company-home .ch-fleet-card .ch-fleet-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--primary-fill);
  font-size: 20px;
  color: var(--text-on-accent);
  box-shadow: 0 10px 22px rgba(47, 111, 159, 0.25);
}
body main .company-home .ch-fleet-card h3 {
  margin: 0 0 4px;
  font-size: 14.5px;
  font-weight: 900;
  color: var(--primary-color);
}
body main .company-home .ch-fleet-card p {
  margin: 0 0 10px;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-color-secondary);
}
body main .company-home .ch-fleet-card ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body main .company-home .ch-fleet-card ul li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--border-color);
  border-radius: 99px;
  background: var(--surface-color);
  font-size: 9.5px;
  font-weight: 800;
  color: var(--text-color-secondary);
}
body main .company-home .ch-fleet-card ul li i {
  font-size: 9px;
  color: var(--success-color);
}
body main .company-home {
  /* 🗺️ التغطية */
}
body main .company-home .ch-coverage {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
}
body main .company-home .ch-coverage-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
body main .company-home .ch-coverage-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-color-primary);
}
body main .company-home .ch-coverage-list li i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--success-soft);
  font-size: 11px;
  color: var(--success-color);
}
body main .company-home .ch-network {
  padding: 18px;
  border: 1px dashed rgba(195, 155, 84, 0.55);
  border-radius: var(--ch-radius-lg);
  background: radial-gradient(circle at 100% 0%, var(--ch-gold-soft), transparent 60%), var(--surface-color);
  box-shadow: var(--ch-shadow-sm);
}
body main .company-home .ch-network .ch-network-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
body main .company-home .ch-network .ch-network-head strong {
  font-size: 12px;
  font-weight: 900;
  color: var(--primary-color);
}
body main .company-home .ch-network .ch-network-head span {
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--ch-gold-soft);
  font-size: 10px;
  font-weight: 800;
  color: var(--ch-gold-strong);
}
body main .company-home .ch-network .ch-network-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
body main .company-home .ch-network .ch-network-chips span {
  padding: 6px 11px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: var(--surface-muted);
  font-size: 11px;
  font-weight: 800;
  color: var(--text-color-primary);
}
body main .company-home {
  /* ⭐ لماذا نحن */
}
body main .company-home .ch-why {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
body main .company-home .ch-why-item {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border: 1px solid var(--border-color);
  border-radius: var(--ch-radius-md);
  background: var(--surface-color);
}
body main .company-home .ch-why-item .ch-why-num {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 14px;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  color: var(--ch-gold);
  opacity: 0.16;
}
body main .company-home .ch-why-item .ch-why-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 10px;
  border-radius: 11px;
  background: var(--primary-soft);
  font-size: 15px;
  color: var(--primary-color);
}
body main .company-home .ch-why-item h3 {
  margin: 0 0 5px;
  font-size: 14px;
  font-weight: 900;
  color: var(--primary-color);
}
body main .company-home .ch-why-item p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.8;
  color: var(--text-color-secondary);
}
body main .company-home {
  /* 🔁 خطوات التشغيل */
}
body main .company-home .ch-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ch-step;
}
body main .company-home .ch-steps::before {
  content: "";
  position: absolute;
  top: 21px;
  inset-inline: 12.5%;
  height: 2px;
  background: linear-gradient(to left, var(--border-color), var(--ch-gold-soft), var(--border-color));
}
body main .company-home .ch-steps li {
  position: relative;
  padding: 0 4px;
  text-align: center;
}
body main .company-home .ch-steps li .ch-step-num {
  counter-increment: ch-step;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0 auto 10px;
  border: 2px solid var(--ch-gold);
  border-radius: 50%;
  background: var(--surface-color);
  font-size: 13px;
  font-weight: 900;
  color: var(--ch-gold-strong);
}
body main .company-home .ch-steps li .ch-step-num::before {
  content: counter(ch-step, decimal-leading-zero);
}
body main .company-home .ch-steps li h3 {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 900;
  color: var(--primary-color);
}
body main .company-home .ch-steps li p {
  margin: 0;
  font-size: 11px;
  line-height: 1.7;
  color: var(--text-color-secondary);
}
body main .company-home {
  /* ----------------------------------------------------------------------
     ☎️ بيانات التواصل
     ---------------------------------------------------------------------- */
}
body main .company-home .ch-contact {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: stretch;
  gap: clamp(14px, 2.2vw, 26px);
}
body main .company-home .ch-contact-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body main .company-home .ch-contact-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--border-color);
  border-radius: var(--ch-radius-md);
  background: var(--surface-color);
  box-shadow: var(--ch-shadow-sm);
}
body main .company-home .ch-contact-list .ch-contact-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--ch-gold-soft);
  font-size: 15px;
  color: var(--ch-gold-strong);
}
body main .company-home .ch-contact-list li > div {
  min-width: 0;
}
body main .company-home .ch-contact-list li > div strong {
  display: block;
  margin-bottom: 2px;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--text-color-secondary);
}
body main .company-home .ch-contact-list li > div span,
body main .company-home .ch-contact-list li > div a {
  display: block;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.65;
  color: var(--text-color-primary);
  text-decoration: none;
}
body main .company-home .ch-contact-list li > div a {
  color: var(--primary-color);
  font-variant-numeric: tabular-nums;
}
body main .company-home .ch-contact-list li > div a:hover, body main .company-home .ch-contact-list li > div a:focus-visible {
  color: var(--ch-gold-strong);
  text-decoration: underline;
}
body main .company-home .ch-contact-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: clamp(18px, 2.6vw, 26px);
  border-radius: var(--ch-radius-lg);
  background: radial-gradient(420px 170px at 100% 0%, rgba(195, 155, 84, 0.3), transparent 72%), linear-gradient(135deg, var(--ch-navy), var(--ch-navy-soft));
  color: #fff;
  box-shadow: 0 22px 54px rgba(15, 56, 91, 0.24);
}
body main .company-home .ch-contact-card .ch-contact-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.13);
  font-size: 10.5px;
  font-weight: 900;
  color: #f0d9a8;
}
body main .company-home .ch-contact-card > strong {
  font-size: clamp(15px, 1.7vw, 19px);
  font-weight: 900;
  line-height: 1.35;
  color: #fff;
}
body main .company-home .ch-contact-card p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.78);
}
body main .company-home .ch-contact-card .ch-btn {
  margin-top: auto;
}
body main .company-home {
  /* ----------------------------------------------------------------------
     📣 شريط الدعوة الختامي
     ---------------------------------------------------------------------- */
}
body main .company-home .ch-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  overflow: hidden;
  width: 100%;
  max-width: 1260px;
  margin: clamp(38px, 5vw, 70px) auto 0;
  padding: clamp(20px, 3vw, 34px);
  border-radius: var(--ch-radius-lg);
  background: radial-gradient(600px 200px at 100% 0%, rgba(195, 155, 84, 0.28), transparent 70%), linear-gradient(135deg, var(--ch-navy), var(--ch-navy-soft));
  color: #fff;
  box-shadow: 0 24px 60px rgba(15, 56, 91, 0.28);
}
body main .company-home .ch-cta .ch-cta-copy {
  min-width: 0;
}
body main .company-home .ch-cta .ch-cta-copy span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.6px;
  color: #e8c98a;
}
body main .company-home .ch-cta .ch-cta-copy h2 {
  margin: 7px 0 6px;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 900;
  line-height: 1.3;
  color: #fff;
}
body main .company-home .ch-cta .ch-cta-copy p {
  max-width: 60ch;
  margin: 0;
  font-size: 12px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.78);
}
body main .company-home .ch-cta .ch-cta-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 10px;
}
body main .company-home {
  /* ----------------------------------------------------------------------
     🦶 التذييل
     ---------------------------------------------------------------------- */
}
body main .company-home .ch-footer {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto auto;
  align-items: center;
  gap: 14px 28px;
  width: 100%;
  max-width: 1260px;
  margin: clamp(28px, 4vw, 44px) auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--border-color);
}
body main .company-home .ch-footer .ch-footer-identity {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}
body main .company-home .ch-footer .ch-footer-brand {
  display: flex;
  align-items: center;
  gap: 9px;
}
body main .company-home .ch-footer .ch-footer-brand img {
  width: 28px;
  height: 28px;
  padding: 2px;
  border: 0;
  border-radius: 8px;
  object-fit: contain;
  background: #fff;
}
body main .company-home .ch-footer .ch-footer-brand strong {
  display: block;
  font-size: 12px;
  font-weight: 900;
  color: var(--primary-color);
}
body main .company-home .ch-footer .ch-footer-brand small {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-color-secondary);
}
body main .company-home .ch-footer .ch-footer-contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
body main .company-home .ch-footer .ch-footer-contact span {
  display: inline-flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--text-color-secondary);
}
body main .company-home .ch-footer .ch-footer-contact i {
  margin-top: 2px;
  font-size: 10px;
  color: var(--ch-gold-strong);
}
body main .company-home .ch-footer .ch-footer-contact a {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-color-secondary);
  text-decoration: none;
}
body main .company-home .ch-footer .ch-footer-contact a:hover, body main .company-home .ch-footer .ch-footer-contact a:focus-visible {
  color: var(--ch-gold-strong);
  text-decoration: underline;
}
body main .company-home .ch-footer .ch-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
body main .company-home .ch-footer .ch-footer-links a {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-color-secondary);
  text-decoration: none;
}
body main .company-home .ch-footer .ch-footer-links a:hover {
  color: var(--ch-gold-strong);
}
body main .company-home .ch-footer .ch-footer-copy {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-color-secondary);
}
body main .company-home {
  /* ----------------------------------------------------------------------
     🎞️ حركات
     ---------------------------------------------------------------------- */
}
@keyframes ch-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
@keyframes ch-truck-bob {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}
body main .company-home {
  /* ----------------------------------------------------------------------
     📱 الاستجابة
     ---------------------------------------------------------------------- */
}
@media screen and (max-width: 1100px) {
  body main .company-home .ch-services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body main .company-home .ch-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 12px;
  }
  body main .company-home .ch-steps::before {
    display: none;
  }
}
@media screen and (max-width: 992px) {
  body main .company-home .ch-nav {
    display: none;
  }
  body main .company-home .ch-hero {
    grid-template-columns: minmax(0, 1fr);
  }
  body main .company-home .ch-trip {
    max-width: 560px;
  }
  body main .company-home .ch-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body main .company-home .ch-coverage {
    grid-template-columns: minmax(0, 1fr);
  }
  body main .company-home .ch-contact {
    grid-template-columns: minmax(0, 1fr);
  }
  body main .company-home .ch-footer {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
  body main .company-home .ch-cta {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media screen and (max-width: 720px) {
  body main .company-home .ch-services,
  body main .company-home .ch-fleet,
  body main .company-home .ch-why {
    grid-template-columns: minmax(0, 1fr);
  }
  body main .company-home .ch-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  body main .company-home .ch-status {
    display: none;
  }
  body main .company-home {
    /* ☎️ يبقى الاتصال متاحًا على الهاتف كزر أيقونة فقط */
  }
  body main .company-home .ch-call {
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
  }
  body main .company-home .ch-call span {
    display: none;
  }
  body main .company-home .ch-user {
    max-width: 46%;
  }
  body main .company-home .ch-user span {
    min-width: 0;
  }
  body main .company-home .ch-brand .ch-brand-text small {
    display: none;
  }
}
@media screen and (max-width: 480px) {
  body main .company-home .ch-stats {
    grid-template-columns: minmax(0, 1fr);
  }
  body main .company-home .ch-actions .ch-btn {
    flex: 1 1 auto;
  }
  body main .company-home .ch-trip-meta {
    grid-template-columns: minmax(0, 1fr);
  }
  body main .company-home .ch-trip-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body main .company-home .ch-status i,
  body main .company-home .ch-trip-badge i,
  body main .company-home .ch-trip-truck,
  body main .company-home .ch-trip-foot .ch-live i {
    animation: none;
  }
  body main .company-home .ch-btn,
  body main .company-home .ch-service {
    transition: none;
  }
}

/* 🌙 الوضع الداكن: رفع سطوع الذهبي قليلًا ليبقى مقروءًا على الخلفية الداكنة */
[data-theme=dark] body main .company-home {
  --ch-gold: #d9b978;
  --ch-gold-strong: #e2c48c;
  --ch-gold-soft: rgba(217, 185, 120, 0.16);
  --ch-navy: #0b2438;
  --ch-navy-soft: #10344f;
  --ch-shadow: 0 20px 50px rgba(0, 0, 0, 0.34);
  --ch-shadow-sm: 0 10px 26px rgba(0, 0, 0, 0.26);
}

/* ==========================================================================
   🎛️ كونتينر الفلاتر الموحّد (.filter-panel)
   --------------------------------------------------------------------------
   الهدف: توحيد «صندوق» أدوات الفلترة في كل صفحات الويب على شكل شريط فلترة
   ميزان المراجعة نفسه:

       - خلفية هادئة (--surface-muted) بدل البطاقة البيضاء.
       - حد رفيع 1px وزوايا 12px بدل الظل الكبير وزوايا 18px.
       - حشو مضغوط (8px 12px) يوفّر ارتفاعًا ويُظهر مساحة أكبر للبيانات.
       - حقول بارتفاع واحد (32px) وتسمية صغيرة فوق الحقل.
       - إجراءات الفلترة في طرف الشريط.

   كيف يُستخدم:
       <div class="date-filter-card filter-panel">…</div>
       <div class="card-box search-filter-card filter-panel">…</div>
       <div class="report-filters filter-panel">…</div>

   ملاحظات:
   - الكلاسات القديمة (date-filter-card / search-filter-card / report-filters)
     تبقى كما هي لأن JS وأنماطًا أخرى تعتمد عليها؛ هذا الملف يضيف طبقة مظهر
     فقط ولا يغيّر أي بنية أو سلوك.
   - #customerStatementFilterForm له شبكة أعمدة خاصة به (grid-template-areas)
     فيُستثنى من شبكة الصف العامة حتى لا تتأثر أعمدته الأربعة.
   - الطباعة تُخفي الفلاتر أصلًا عبر .date-filter-card / .report-filters /
     .no-print في كتلة @media print داخل _joint.scss.
   - البادئة body main #content مطلوبة للتغلّب على قواعد .date-filter-card
     الأقدم في _joint.scss (بطاقة بيضاء + ظل + زوايا 18px).
   ========================================================================== */
body main #content {
  /* ---------- 1) الصندوق: نفس شكل شريط فلترة ميزان المراجعة ---------- */
}
body main #content .filter-panel,
body main #content .filter-panel.date-filter-card,
body main #content .filter-panel.search-filter-card,
body main #content .report-container .report-header .report-filters.filter-panel {
  position: relative;
  z-index: 50;
  overflow: visible;
  margin: 0 0 10px;
  padding: 8px 12px;
  background: var(--surface-muted);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: none;
}
body main #content .filter-panel .date-filter-form {
  margin: 0;
}
body main #content .filter-panel {
  /* ---------- 2) صف الحقول: شبكة تتكيّف مع عرض الشاشة ----------
     كشف حساب العميل (#customerStatementFilterForm) مستثنى لأنه يملك
     شبكة أعمدة/مناطق خاصة به في _joint.scss. */
}
body main #content .filter-panel .date-filter-form:not(#customerStatementFilterForm) .filter-inputs-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  align-items: end;
  gap: 8px 14px;
}
body main #content .filter-panel {
  /* ---------- 3) وحدة حقل واحدة ---------- */
}
body main #content .filter-panel .filter-inputs-row > .filter-group,
body main #content .filter-panel .date-fields > .filter-group {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  width: 100%;
  max-width: none;
}
body main #content .filter-panel .filter-inputs-row > .filter-group > label,
body main #content .filter-panel .date-fields > .filter-group > label {
  margin: 0 0 3px;
  padding: 0;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-color-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body main #content .filter-panel .filter-inputs-row > .filter-group > label i,
body main #content .filter-panel .date-fields > .filter-group > label i {
  margin-inline-end: 4px;
  font-size: 0.72rem;
  color: var(--accent-color);
}
body main #content .filter-panel .filter-inputs-row > .filter-group .form-control,
body main #content .filter-panel .date-fields > .filter-group .form-control {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: var(--input-bg);
  color: var(--text-color-primary);
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body main #content .filter-panel .filter-inputs-row > .filter-group .form-control:focus,
body main #content .filter-panel .date-fields > .filter-group .form-control:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}
body main #content .filter-panel .filter-inputs-row > .filter-group select.form-control,
body main #content .filter-panel .date-fields > .filter-group select.form-control {
  padding-inline-end: 8px;
  cursor: pointer;
}
body main #content .filter-panel {
  /* حقول التاريخ تبقى وحدات مضغوطة (شريحة تسمية + الحقل) كما في التقارير */
}
body main #content .filter-panel .date-fields {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}
body main #content .filter-panel {
  /* حقل يمتد على عمودين (بحث عام / حساب رئيسي) */
}
body main #content .filter-panel .date-filter-form:not(#customerStatementFilterForm) .filter-inputs-row > .filter-group.flex-2,
body main #content .filter-panel .date-filter-form:not(#customerStatementFilterForm) .filter-inputs-row > .filter-group.main-account-group {
  grid-column: span 2;
}
body main #content .filter-panel {
  /* ---------- 4) إجراءات الفلترة: في طرف الشريط (العمود الأخير) ---------- */
}
body main #content .filter-panel .date-filter-form:not(#customerStatementFilterForm) .filter-actions-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  grid-column: -2/-1;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}
body main #content .filter-panel .date-filter-form:not(#customerStatementFilterForm) .filter-actions-group .btn-primary-action,
body main #content .filter-panel .date-filter-form:not(#customerStatementFilterForm) .filter-actions-group .btn-secondary-action {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  height: 32px;
  padding: 0 16px;
  gap: 7px;
  justify-content: center;
  border-radius: 9px;
  font-size: 0.8rem;
}
body main #content .filter-panel .date-filter-form:not(#customerStatementFilterForm) .filter-actions-group .btn-label {
  display: inline;
}
body main #content .filter-panel .date-filter-form:not(#customerStatementFilterForm) .filter-actions-group {
  /* مجموعتان أو أكثر من الأزرار تحتاج عمودين حتى لا تلتفّ فوق بعضها */
}
body main #content .filter-panel .date-filter-form:not(#customerStatementFilterForm) .filter-actions-group:has(> :nth-child(2)) {
  grid-column: -3/-1;
}
body main #content .filter-panel {
  /* ---------- 5) بطاقة البحث في دليل الحسابات ---------- */
}
body main #content .filter-panel.search-filter-card .search-bar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0 0 8px;
}
body main #content .filter-panel.search-filter-card .search-bar-row .search-input-group {
  flex: 1 1 260px;
  min-width: 0;
}
body main #content .filter-panel.search-filter-card .search-bar-row .search-input-group .search-icon {
  right: 12px;
  font-size: 0.9rem;
}
body main #content .filter-panel.search-filter-card .search-bar-row .search-input-group input {
  height: 32px;
  padding: 0 36px 0 32px;
  font-size: 0.84rem;
  font-weight: 600;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: var(--input-bg);
  color: var(--text-color-primary);
}
body main #content .filter-panel.search-filter-card .search-bar-row .search-input-group input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}
body main #content .filter-panel.search-filter-card .search-bar-row .search-input-group .clear-btn {
  left: 10px;
  font-size: 0.85rem;
}
body main #content .filter-panel.search-filter-card .search-bar-row .filter-switches-group {
  gap: 12px;
}
body main #content .filter-panel.search-filter-card .search-bar-row .filter-switches-group .switch-label {
  font-size: 0.78rem;
}
body main #content .filter-panel.search-filter-card .category-tabs-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
  white-space: normal;
  overflow: visible;
}
body main #content .filter-panel.search-filter-card .category-tabs-wrapper .category-tab {
  margin: 0;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
}
body main #content {
  /* ---------- 6) الشاشات المتوسطة: عمودان ---------- */
}
@media screen and (max-width: 992px) {
  body main #content .filter-panel .date-filter-form:not(#customerStatementFilterForm) .filter-inputs-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
  }
  body main #content .filter-panel .date-filter-form:not(#customerStatementFilterForm) .filter-inputs-row > .filter-group.flex-2,
  body main #content .filter-panel .date-filter-form:not(#customerStatementFilterForm) .filter-inputs-row > .filter-group.main-account-group,
  body main #content .filter-panel .date-filter-form:not(#customerStatementFilterForm) .filter-inputs-row > .filter-group.is-full-row {
    grid-column: 1/-1;
  }
  body main #content .filter-panel .date-filter-form:not(#customerStatementFilterForm) .filter-inputs-row > .filter-actions-group {
    grid-column: 1/-1;
    justify-self: stretch;
    justify-content: flex-end;
  }
}
body main #content {
  /* ---------- 7) الشاشات الضيقة: عمود واحد ---------- */
}
@media screen and (max-width: 560px) {
  body main #content .filter-panel {
    padding: 8px 10px;
  }
  body main #content .filter-panel .date-filter-form:not(#customerStatementFilterForm) .filter-inputs-row {
    grid-template-columns: minmax(0, 1fr);
  }
  body main #content .filter-panel .date-filter-form:not(#customerStatementFilterForm) .filter-inputs-row > .filter-group {
    grid-column: 1/-1;
  }
}