@font-face {
  font-family: 'Tajawal';
  font-weight: 400;
  font-display: swap;
  src: url('vendor/fonts/tajawal-arabic-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Tajawal';
  font-weight: 700;
  font-display: swap;
  src: url('vendor/fonts/tajawal-arabic-700-normal.woff2') format('woff2');
}

:root {
  --bs-body-font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --bs-body-font-size: 0.975rem;
}

body { -webkit-tap-highlight-color: transparent; }

.login-bg { background: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%); }

/* شبكة الأصناف */
.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: .75rem;
  padding: 2px;
}
@media (min-width: 992px) {
  .item-grid { max-height: calc(100vh - 220px); overflow-y: auto; }
}
.item-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: 1rem .5rem;
  background: var(--bs-body-bg);
  border: 2px dashed var(--bs-border-color);
  border-radius: 1rem;
  color: var(--bs-body-color);
  transition: transform .12s, border-color .12s, box-shadow .12s;
  user-select: none;
}
.item-tile:hover, .item-tile:focus-visible {
  border-color: var(--bs-primary);
  box-shadow: 0 .25rem .75rem rgba(13, 110, 253, .15);
  transform: translateY(-2px);
  outline: none;
}
.item-tile:active { transform: scale(.97); }
.item-icon { font-size: 2.6rem; line-height: 1; }
.item-name { font-weight: 700; font-size: .95rem; text-align: center; }

/* السلة */
@media (min-width: 992px) {
  .cart-card { position: sticky; top: 72px; }
  .cart-lines { max-height: 34vh; overflow-y: auto; }
}
.qty-group input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.qty-group input::-webkit-outer-spin-button,
.qty-group input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pay-btn { font-weight: 700; }

#custResults { top: 100%; max-height: 300px; overflow-y: auto; }

.emoji-pick { font-size: 1.4rem; cursor: pointer; }

.table > :not(caption) > * > * { white-space: nowrap; }
.table td .small, .table td small { white-space: normal; }

@media print {
  .navbar, .toast-container, .btn, form.d-print-none { display: none !important; }
  .card { box-shadow: none !important; border: 1px solid #ccc; }
}

/* الجدول والبطاقات */
.view-switch[data-view="table"] .view-cards,
.view-switch[data-view="cards"] .view-table,
.view-switch:not([data-view]) .view-cards { display: none !important; }
.c-card .c-head {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  background: none; border: 0; padding: .75rem 1rem; text-align: start; color: inherit;
}
.c-card .c-head::after {
  content: "\F282"; font-family: bootstrap-icons; margin-inline-start: auto; transition: transform .2s; color: var(--bs-secondary-color);
}
.c-card .c-head[aria-expanded="true"]::after { transform: rotate(180deg); }
.c-card .c-head .c-main { flex: 1; min-width: 0; }
.c-card .c-head .c-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-card .c-body { border-top: 1px solid var(--bs-border-color); }
.c-icon { font-size: 2rem; line-height: 1; }
.wa-link { color: #128c7e; text-decoration: none; }
.wa-link:hover { text-decoration: underline; }

/* معاينة رسالة واتساب */
.wa-preview { background: #e5ddd5; border-radius: .75rem; padding: 1rem; min-height: 100%; }
.wa-bubble {
  background: #dcf8c6; color: #111; border-radius: .6rem; padding: .6rem .8rem;
  max-width: 95%; box-shadow: 0 1px 1px rgba(0,0,0,.15); font-size: .9rem; line-height: 1.7; word-wrap: break-word;
}

/* لوحة التحكم: تدرجات */
.g-blue   { background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%); }
.g-violet { background: linear-gradient(135deg, #7c3aed 0%, #c026d3 100%); }
.g-green  { background: linear-gradient(135deg, #059669 0%, #84cc16 100%); }
.g-red    { background: linear-gradient(135deg, #e11d48 0%, #f97316 100%); }
.g-orange { background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%); }
.g-teal   { background: linear-gradient(135deg, #0d9488 0%, #22d3ee 100%); }
.g-pink   { background: linear-gradient(135deg, #db2777 0%, #a855f7 100%); }
.g-slate  { background: linear-gradient(135deg, #334155 0%, #64748b 100%); }

.kpi {
  position: relative; overflow: hidden; color: #fff; border-radius: 1.1rem;
  padding: 1.1rem 1.2rem; min-height: 128px; height: 100%;
  box-shadow: 0 .6rem 1.4rem -.6rem rgba(15, 23, 42, .45);
  transition: transform .18s ease, box-shadow .18s ease;
}
a .kpi:hover { transform: translateY(-3px); box-shadow: 0 1rem 1.8rem -.7rem rgba(15, 23, 42, .55); }
.kpi::before {
  content: ""; position: absolute; inset: auto -30% -60% auto; width: 160px; height: 160px;
  border-radius: 50%; background: rgba(255, 255, 255, .14);
}
.kpi-bg { position: absolute; left: .6rem; bottom: -.4rem; font-size: 4.6rem; opacity: .18; }
.kpi-label { font-size: .9rem; opacity: .92; }
.kpi-value { font-size: 1.75rem; font-weight: 700; line-height: 1.3; margin-top: .25rem; position: relative; }
.kpi-sub { font-size: .8rem; opacity: .88; position: relative; }

.dash-card { border: 0; border-radius: 1rem; box-shadow: 0 .25rem 1rem rgba(15, 23, 42, .07); }
.dash-card > .card-header { background: transparent; font-weight: 700; border-bottom: 1px solid var(--bs-border-color-translucent); padding: .9rem 1rem; }
.dash-card .list-group-item { background: transparent; }
.min-w-0 { min-width: 0; }

/* الرسم البياني */
.bar-chart { display: flex; align-items: stretch; gap: 3px; height: 240px; overflow-x: auto; padding-top: 8px; }
.bar-col { flex: 1 0 18px; display: flex; flex-direction: column; align-items: center; min-width: 18px; }
.bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; border-bottom: 1px solid var(--bs-border-color); }
.bar { width: 42%; max-width: 14px; min-height: 2px; border-radius: 4px 4px 0 0; transition: opacity .15s; }
.bar-col:hover .bar { opacity: .75; }
.bar-label { font-size: .65rem; color: var(--bs-secondary-color); margin-top: 4px; white-space: nowrap; }
.bg-sales { background: linear-gradient(180deg, #8b5cf6, #6366f1); }
.bg-cash  { background: linear-gradient(180deg, #34d399, #059669); }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; }