:root {
  --bg: #f6f4ee;
  --surface: #ffffff;
  --surface-2: #f8f6f0;
  --text: #1a1a2e;
  --muted: #7c7a8c;
  --line: #e7e2d4;
  --primary: #b3893f;
  --primary-strong: #96702e;
  --primary-light: #e6c98a;
  --navy: #0c1220;
  --navy-2: #10182c;
  --blue: #2563eb;
  --green: #16a34a;
  --amber: #d97706;
  --violet: #7c3aed;
  --danger: #dc2626;
  --shadow: 0 22px 50px rgba(20, 20, 30, 0.08);
  --shadow-lg: 0 30px 70px rgba(12, 18, 32, 0.14);
  --radius: 14px;
  --radius-sm: 10px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="dark"] {
  --bg: #0c1220;
  --surface: #131a2c;
  --surface-2: #1a2338;
  --text: #f3efe4;
  --muted: #a3a0b0;
  --line: #2a3350;
  --primary: #e6c98a;
  --primary-strong: #d8b76a;
  --shadow: 0 22px 50px rgba(0, 0, 0, 0.38);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.5);
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  scroll-behavior: smooth;
}

/* "overflow: hidden" على مستوى html ينفع بس بصفحات لوحة التحكم (.erp-shell) عشان القائمة
   الجانبية تبقى ثابتة ومحتوى الصفحة يتحرك لحاله — لو طبقناها على كل الصفحات (زي صفحة تسجيل
   الدخول) بتقفل أي تمرير للصفحة كلها، ولو المحتوى أطول من الشاشة (بالموبايل مثلاً) يختفي جزء
   منه (زي زر "دخول") بدون أي طريقة توصله. لذا نربطها بوجود body.erp-shell تحديداً. */
html:has(body.erp-shell) {
  overflow: hidden;
}

body.erp-shell {
  height: 100%;
  overflow: hidden;
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(179, 137, 63, 0.09), transparent 32rem),
    radial-gradient(circle at bottom right, rgba(12, 18, 32, 0.05), transparent 34rem),
    linear-gradient(145deg, var(--bg), var(--surface-2));
  color: var(--text);
  font-family: "Cairo", "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
  letter-spacing: 0.1px;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: color-mix(in srgb, var(--primary) 30%, transparent);
  color: var(--text);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--primary) 35%, var(--line));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

button,
input {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
  transition: transform 160ms var(--ease), background 200ms var(--ease), box-shadow 200ms var(--ease), filter 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}

button:active {
  transform: scale(0.97);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 180ms var(--ease), background 180ms var(--ease), transform 180ms var(--ease);
}

.erp-shell {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  height: 100%;
}

.app-sidebar {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 290px;
  height: 100vh;
  height: 100dvh;
  padding: 24px 18px;
  background:
    radial-gradient(circle at 20% 0%, rgba(230, 201, 138, 0.1), transparent 45%),
    linear-gradient(165deg, #0c1220, #10182c 60%, #101a1a);
  color: #fff;
  border-left: 1px solid rgba(230, 201, 138, 0.12);

  /* القائمة الجانبية (يمين الشاشة بالعربي RTL) عندها سكرول خاص فيها لو محتواها طويل.
     نقلب الاتجاه لـ ltr على الحاوية نفسها فقط عشان شريط التمرير يرسم على يمين الشاشة
     (حافة القائمة الخارجية) بدل ما ينرسم بمنتصف الصفحة، ثم نرجّع rtl على كل العناصر
     الداخلية مباشرة عشان النصوص والترتيب العربي يضلوا طبيعيين تماماً. */
  direction: ltr;
  overflow-y: auto;
  overflow-x: hidden;
}

.app-sidebar > * {
  direction: rtl;
}

.brand-lockup {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: center;
}

.brand-mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  color: #10203a;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: 0 8px 20px rgba(179, 137, 63, 0.35);
}

.brand-lockup strong {
  display: block;
  font-size: 1.02rem;
}

.brand-lockup small,
.sidebar-status small,
.metric-card small,
.repair-item small,
.system-grid small {
  display: block;
  color: var(--muted);
}

.brand-lockup small,
.sidebar-status small {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.74rem;
}

.side-nav {
  display: grid;
  gap: 8px;
}

.side-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 0 13px;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.72);
  transition: 200ms var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .side-nav a:hover {
    background: rgba(230, 201, 138, 0.09);
    color: #fff;
    transform: translateX(-2px);
  }
}

.side-nav a.active {
  background: linear-gradient(90deg, rgba(230, 201, 138, 0.18), rgba(230, 201, 138, 0.04));
  color: var(--primary-light);
  box-shadow: inset 3px 0 0 var(--primary-light);
}

.side-nav b {
  color: rgba(255, 255, 255, 0.32);
  font-size: 0.76rem;
}

.sidebar-user {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 10px;
  align-items: center;
  margin-top: auto;
  padding: 10px;
  border: 1px solid rgba(230, 201, 138, 0.16);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
}

.user-avatar {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  color: #10203a;
  font-weight: 900;
}

.user-meta {
  min-width: 0;
}

.user-meta strong {
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-meta small {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.72rem;
}

.sidebar-user .icon-button.small {
  border-color: rgba(230, 201, 138, 0.25);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.sidebar-status {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(230, 201, 138, 0.16);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 7px rgba(34, 197, 94, 0.13);
}

.app-frame {
  min-width: 0;
  height: 100vh;
  height: 100dvh;
  /* هذا هو سكرول "الصفحة المفتوحة" — مستقل تماماً عن سكرول القائمة الجانبية.
     بما إنه العمود الأيسر بتخطيط RTL، شريط تمريره الطبيعي (بدون أي تعديل اتجاه)
     يرتسم أصلاً على يسار الشاشة تماماً. */
  overflow-y: auto;
  overflow-x: hidden;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 20px 28px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--line);
}

.topbar-kicker,
.eyebrow {
  margin: 0 0 4px;
  color: var(--primary-strong);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.topbar h1 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: 0.2px;
}

.topbar-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.global-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(460px, 34vw);
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: 200ms var(--ease);
}

.global-search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}

.global-search span {
  width: 15px;
  height: 15px;
  border: 2px solid var(--muted);
  border-radius: 50%;
  position: relative;
}

.global-search span::after {
  position: absolute;
  width: 7px;
  height: 2px;
  content: "";
  background: var(--muted);
  transform: rotate(45deg);
  left: -5px;
  bottom: -3px;
}

.global-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}

.primary-action,
.ghost-button,
.command-strip button,
.segmented-actions button,
.report-chips button,
.scan-box button {
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  color: #1a1a2e;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(179, 137, 63, 0.22);
}

.primary-action:hover,
.command-strip button:hover,
.segmented-actions button:hover,
.scan-box button:hover {
  filter: brightness(1.06);
  box-shadow: 0 10px 24px rgba(179, 137, 63, 0.3);
  transform: translateY(-1px);
}

.primary-action {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.ghost-button,
.report-chips button,
.command-strip button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
}

.ghost-button:hover,
.report-chips button:hover {
  border-color: var(--primary);
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  transform: translateY(-1px);
}

.icon-button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
}

.icon-button:hover {
  border-color: var(--primary);
  color: var(--primary-strong);
}

@media (hover: hover) and (pointer: fine) {
  .icon-button:not(.small):hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
  }
}

.icon-button.small {
  width: 36px;
  height: 36px;
}

.theme-sun {
  width: 17px;
  height: 17px;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 12%, transparent);
}

.app-content {
  display: grid;
  gap: 18px;
  padding: 24px 28px 88px;
  min-width: 0;
}

.command-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.command-strip button {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  align-items: center;
}

.metrics-grid,
.lower-grid,
.system-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.metric-card,
.panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: box-shadow 240ms var(--ease);
}

.table-wrap {
  min-width: 0;
}

.metric-card {
  position: relative;
  overflow: hidden;
  padding: 18px;
}

.panel:hover {
  box-shadow: var(--shadow-lg);
}

@media (hover: hover) and (pointer: fine) {
  .metric-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
  }
}

.metric-card::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 5px;
  content: "";
  background: var(--accent);
}

.accent-blue { --accent: var(--blue); }
.accent-green { --accent: var(--green); }
.accent-amber { --accent: var(--amber); }
.accent-violet { --accent: var(--violet); }
.accent-red { --accent: var(--danger); }

.metric-label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-weight: 800;
}

.metric-card strong {
  display: block;
  margin-bottom: 4px;
  font-size: 1.45rem;
}

.workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: 14px;
  min-width: 0;
}

.workspace-grid > * {
  min-width: 0;
}

.panel {
  padding: 18px;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.panel-header h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 900;
}

.scan-box {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.scan-box label {
  color: var(--muted);
  font-weight: 800;
}

.scan-box div {
  display: flex;
  gap: 8px;
}

.scan-box input {
  min-width: 0;
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  direction: ltr;
  text-align: left;
}

.cart-list,
.repair-timeline,
.inventory-list,
.finance-bars,
.report-chips {
  display: grid;
  gap: 10px;
}

.cart-row,
.payment-box,
.repair-item,
.inventory-list div,
.system-grid div {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.cart-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
}

.cart-row span {
  min-width: 0;
}

.payment-box {
  display: grid;
  gap: 8px;
  margin: 14px 0;
  padding: 13px;
}

.payment-box div,
.finance-bars div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.payment-box span {
  color: var(--muted);
}

.payment-box .total {
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.payment-box .total strong {
  color: var(--primary);
  font-size: 1.2rem;
}

.segmented-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.segmented-actions button {
  background: var(--surface-2);
  color: var(--text);
}

.segmented-actions .active {
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  color: #1a1a2e;
}

.repair-item {
  padding: 13px;
}

.repair-code {
  display: inline-flex;
  margin-bottom: 7px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.12);
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 900;
  direction: ltr;
}

.repair-item strong {
  display: block;
}

.progress {
  height: 7px;
  margin-top: 11px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 70%, transparent);
}

.progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
}

.progress.complete span {
  background: var(--green);
}

.lower-grid {
  grid-template-columns: 1fr 1fr 1fr;
}

.inventory-list div {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 11px;
}

.stock {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.stock.high { background: var(--green); }
.stock.mid { background: var(--amber); }
.stock.low { background: var(--danger); }

.finance-bars div {
  display: grid;
  grid-template-columns: 78px 1fr 42px;
}

.finance-bars b {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), #38bdf8);
}

.finance-bars strong,
.finance-bars span {
  color: var(--muted);
  font-size: 0.86rem;
}

.report-chips {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.report-chips button {
  white-space: normal;
}

.system-panel {
  box-shadow: none;
}

.pill-success {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.13);
  color: var(--green);
  font-weight: 900;
  white-space: nowrap;
}

.system-grid div {
  padding: 14px;
}

.app-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 0 28px 22px;
  color: var(--muted);
  font-size: 0.86rem;
}

.mobile-nav {
  display: none;
}

.topbar-logout-form {
  display: none;
}

.mobile-menu-toggle {
  display: none;
}

.mobile-sidebar-close {
  display: none;
}

.mobile-nav-backdrop {
  display: none;
}

/* ===== Shared CRUD module styles (Customers, Products, ...) ===== */

.alert-success-bar {
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--green) 35%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--green) 10%, transparent);
  color: var(--green);
  font-weight: 800;
}

.customers-search-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.customers-search-bar input[type="search"] {
  flex: 1;
  min-width: 0;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  transition: 200ms var(--ease);
}

.customers-search-bar input[type="search"]:focus,
.customers-search-bar select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}

.customers-search-bar select {
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  transition: 200ms var(--ease);
}

.empty-state {
  padding: 40px 20px;
  color: var(--muted);
  text-align: center;
}

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  text-align: right;
}

.data-table th {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.data-table tbody tr {
  transition: background 180ms var(--ease);
}

.data-table tbody tr:hover {
  background: color-mix(in srgb, var(--primary) 6%, var(--surface-2));
}

.row-link {
  color: var(--text);
  font-weight: 800;
}

.row-link:hover {
  color: var(--primary-strong);
}

.mono {
  direction: ltr;
  font-family: "Consolas", "Courier New", monospace;
  text-align: left;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.badge-danger {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
}

.debt-groups {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.debt-group {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  overflow: hidden;
}

.debt-group.is-overdue {
  border-color: color-mix(in srgb, var(--danger) 40%, var(--line));
}

.debt-group-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.debt-group-summary::-webkit-details-marker {
  display: none;
}

.debt-group-summary::before {
  content: "›";
  display: inline-block;
  margin-inline-end: 8px;
  font-weight: 900;
  color: var(--muted);
  transition: transform 200ms var(--ease);
}

.debt-group[open] .debt-group-summary::before {
  transform: rotate(90deg);
}

.debt-group-customer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.debt-group-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.debt-group > .table-wrap,
.debt-group > div {
  padding: 0 16px 14px;
}

/* ===== نظام الدردشة الداخلية ===== */

.chat-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 22, 0.45);
  backdrop-filter: blur(1px);
}

.chat-overlay.is-open {
  display: flex;
}

.chat-window {
  display: flex;
  width: min(420px, 92vw);
  height: min(600px, 82vh);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.chat-window-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.chat-contacts {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  overflow-y: auto;
}

.chat-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: 160ms var(--ease);
}

.chat-contact-item:hover {
  background: var(--surface-2);
}

.chat-contact-avatar {
  display: grid;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  color: #10203a;
  font-weight: 900;
}

.chat-contact-meta {
  flex: 1;
  min-width: 0;
}

.chat-contact-meta strong {
  display: block;
  font-size: 0.9rem;
}

.chat-contact-meta small {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-contact-unread {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 900;
}

.chat-thread {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.chat-messages {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  overflow-y: auto;
}

.chat-msg {
  max-width: 78%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 0.88rem;
  line-height: 1.5;
  word-break: break-word;
}

.chat-msg.is-mine {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  background: var(--primary);
  color: #fff;
}

.chat-msg.is-theirs {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  background: var(--surface-2);
  color: var(--text);
}

.chat-msg .chat-msg-meta {
  display: block;
  margin-top: 4px;
  opacity: 0.75;
  font-size: 0.68rem;
  text-align: left;
}

.chat-send-form {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--line);
}

.chat-send-form input {
  flex: 1;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
}

.chat-center-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 95;
  display: flex;
  visibility: hidden;
  align-items: center;
  gap: 12px;
  max-width: min(420px, 90vw);
  padding: 16px 18px;
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
  transition: 220ms var(--ease);
  border: 1px solid rgba(230, 201, 138, 0.3);
  border-inline-start: 5px solid var(--primary-light);
  border-radius: var(--radius);
  background: linear-gradient(135deg, #0c1220, #10182c 55%, #123a34);
  box-shadow: 0 25px 60px rgba(12, 18, 32, 0.45), 0 0 0 1px rgba(230, 201, 138, 0.08);
  color: #fff;
  pointer-events: none;
  cursor: pointer;
}

.chat-center-popup.is-visible {
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
  animation: chatPopupPulse 1.6s var(--ease);
}

@keyframes chatPopupPulse {
  0% { box-shadow: 0 25px 60px rgba(12, 18, 32, 0.45), 0 0 0 0 rgba(230, 201, 138, 0.55); }
  70% { box-shadow: 0 25px 60px rgba(12, 18, 32, 0.45), 0 0 0 16px rgba(230, 201, 138, 0); }
  100% { box-shadow: 0 25px 60px rgba(12, 18, 32, 0.45), 0 0 0 0 rgba(230, 201, 138, 0); }
}

.chat-center-popup-icon {
  display: grid;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  color: #10203a;
  font-size: 1.3rem;
}

.chat-center-popup b {
  display: block;
  color: var(--primary-light);
  font-size: 0.92rem;
}

.chat-center-popup p {
  display: block;
  overflow: hidden;
  margin: 2px 0 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 680px) {
  .chat-window {
    width: 94vw;
    height: 86vh;
  }

  .chat-center-popup {
    width: 92vw;
    max-width: 92vw;
  }
}

.badge-success {
  background: color-mix(in srgb, var(--green) 13%, transparent);
  color: var(--green);
}

.badge-muted {
  background: var(--surface-2);
  color: var(--muted);
}

.table-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.form-panel {
  max-width: 900px;
}

.entity-form .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

.entity-form .span-2 {
  grid-column: 1 / -1;
}

.entity-form textarea {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  resize: vertical;
  transition: 200ms var(--ease);
}

.entity-form input:not([type="radio"]):not([type="checkbox"]),
.entity-form textarea,
.entity-form select {
  border-radius: var(--radius-sm);
}

.entity-form input:focus,
.entity-form textarea:focus,
.entity-form select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}

.checklist-box {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.lock-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.lock-tab {
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.lock-tab.active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
}

.checklist-box .login-remember {
  margin: 0;
}

.login-field select,
.login-field textarea {
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
}

@media (max-width: 680px) {
  .entity-form .form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  .erp-shell {
    grid-template-columns: 1fr;
  }

  /* بدل ما تختفي القائمة الجانبية كلياً بالموبايل/التابلت (وتسبب فقدان الوصول لأغلب
     الصفحات حسب صلاحية المستخدم)، نحولها لـ Drawer ينزلق من يمين الشاشة فوق المحتوى،
     يتفتح بزر ☰ بالأعلى ويتسكر بزر ✕ أو بالنقر على الخلفية المعتمة. */
  .app-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 60;
    width: min(300px, 84vw);
    transform: translateX(100%);
    transition: transform 260ms var(--ease);
    box-shadow: var(--shadow-lg);
  }

  body.mobile-nav-open .app-sidebar {
    transform: translateX(0);
  }

  .mobile-sidebar-close {
    position: absolute;
    top: 18px;
    inset-inline-start: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(230, 201, 138, 0.25);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    z-index: 1;
  }

  .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 55;
    display: none;
    background: rgba(8, 12, 22, 0.55);
    backdrop-filter: blur(1px);
  }

  body.mobile-nav-open .mobile-nav-backdrop {
    display: block;
  }

  body.mobile-nav-open {
    overflow: hidden;
  }

  .mobile-menu-toggle {
    display: inline-flex;
  }

  .global-search {
    width: min(460px, 44vw);
  }

  .mobile-nav {
    position: fixed;
    inset-inline: 10px;
    bottom: 10px;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
  }

  .mobile-nav a {
    display: grid;
    min-height: 38px;
    place-items: center;
    border-radius: 6px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
  }

  .mobile-nav a.active {
    background: var(--primary);
    color: #fff;
  }

  .app-content {
    padding-bottom: 76px;
  }

  .topbar-logout-form {
    display: block;
  }
}

@media (max-width: 960px) {
  .topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .topbar-actions {
    flex-wrap: wrap;
  }

  .global-search {
    width: 100%;
    order: 3;
  }

  .metrics-grid,
  .workspace-grid,
  .lower-grid,
  .system-grid {
    grid-template-columns: 1fr 1fr;
  }

  .workspace-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 680px) {
  .topbar,
  .app-content {
    padding-inline: 14px;
  }

  .topbar h1 {
    font-size: 1.25rem;
  }

  .metrics-grid,
  .lower-grid,
  .system-grid,
  .report-chips {
    grid-template-columns: 1fr;
  }

  .panel-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .segmented-actions {
    grid-template-columns: 1fr 1fr;
  }

  .cart-row,
  .payment-box div {
    align-items: flex-start;
    flex-direction: column;
  }

  .primary-action {
    flex: 1;
    justify-content: center;
  }

  .app-footer {
    display: none;
  }

  .data-table th,
  .data-table td {
    padding: 9px 8px;
    font-size: 0.82rem;
  }

  .data-table th {
    font-size: 0.68rem;
  }

  .table-actions {
    gap: 4px;
  }

  .icon-button.small {
    min-width: 30px;
    min-height: 30px;
  }

  .panel {
    padding: 16px;
  }

  .form-panel {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .data-table th,
  .data-table td {
    padding: 7px 6px;
    font-size: 0.78rem;
  }

  .badge {
    font-size: 0.7rem;
    padding: 0 8px;
    min-height: 22px;
  }

  .mobile-nav a {
    font-size: 0.72rem;
    min-height: 34px;
  }
}