/* ============================================================
   نظام الدعم الفني والعملاء — حلول نت الرقمية | 7LOLL NET
   لوحة الهوية: بنفسجي عميق #310258 · بنفسجي مضيء #5E0BF9 · برتقالي #FF992E
   واجهة عربية من اليمين لليسار
   ============================================================ */

:root {
  /* ---- البنفسجي (اللون الأساسي للهوية) ---- */
  --pur-950:       #1a0130;
  --pur-900:       #230240;
  --pur-800:       #2a0249;
  --pur-700:       #310258;
  --pur-600:       #43077a;
  --violet:        #5e0bf9;
  --violet-2:      #7c3aed;
  --violet-soft:   #ede6ff;
  --violet-pale:   #f5f1ff;
  --violet-line:   #dccbff;

  /* ---- البرتقالي (اللون المكمّل) ---- */
  --orange:        #ff992e;
  --orange-2:      #ffb44f;
  --orange-soft:   #fff3e4;
  --orange-ink:    #2a1400;

  /* ---- المحايدات ---- */
  --ink:           #132330;
  --ink-soft:      #33414f;
  --muted:         #6b7787;
  --muted-light:   #9aa4b2;
  --paper:         #f6f5fb;
  --paper-deep:    #edebf6;
  --card:          #ffffff;
  --line:          #e7e5f0;
  --line-strong:   #d8d4e6;

  /* ---- حالات ---- */
  --success:       #12b76a;
  --success-bg:    #e6f8ef;
  --danger:        #ef4444;
  --danger-bg:     #feecec;
  --warning:       #b26a00;
  --warning-bg:    #fff3e4;
  --info:          #5e0bf9;
  --info-bg:       #ede6ff;

  --radius-lg:     22px;
  --radius:        16px;
  --radius-sm:     10px;
  --shadow:        0 2px 10px rgba(26, 1, 48, .06);
  --shadow-lift:   0 14px 40px rgba(26, 1, 48, .13);
  --shadow-violet: 0 10px 24px rgba(94, 11, 249, .22);

  --sidebar-w:     262px;
  --font: "Tajawal", "IBM Plex Sans Arabic", -apple-system, "Segoe UI", Tahoma, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

body { direction: rtl; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

button, input, select, textarea { font-family: inherit; font-size: inherit; }

::selection { background: var(--violet-soft); color: var(--pur-700); }

/* ---------- شريط التمرير ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 20px; border: 3px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--muted-light); }

/* ============================================================
   التخطيط العام
   ============================================================ */

.shell { display: flex; min-height: 100vh; }

.main {
  flex: 1;
  min-width: 0;
  padding: 0 28px 48px;
}

/* ---------- القائمة الجانبية ---------- */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--card);
  border-inline-start: 1px solid var(--line);
  padding: 22px 16px 18px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 22px;
}

.brand__mark {
  width: 42px; height: 42px;
  border-radius: 13px;
  background: var(--ink);
  display: grid; place-items: center;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(94, 11, 249, .3);
}

.brand__name { font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.brand__sub  { font-size: 11px; color: var(--muted); margin-top: -4px; }

.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.nav__group { margin-bottom: 4px; }

.nav__head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-weight: 700; font-size: 14.5px;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}
.nav__head:hover { background: var(--paper); }
.nav__head .icon { width: 28px; height: 28px; border-radius: 9px; background: var(--violet-soft); color: var(--violet); display: grid; place-items: center; flex-shrink: 0; }
.nav__head .chev { margin-inline-start: auto; color: var(--muted-light); transition: transform .2s; }
.nav__group.is-open .nav__head .chev { transform: rotate(180deg); }

.nav__items { display: none; padding: 2px 0 6px; }
.nav__group.is-open .nav__items { display: block; }

.nav__link {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 14px 8px 12px;
  margin-inline-start: 14px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 14px;
  position: relative;
  transition: color .15s, background .15s;
}
.nav__link::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--line-strong); flex-shrink: 0;
}
.nav__link:hover { color: var(--ink); background: var(--paper); }
.nav__link.is-active { background: var(--violet-soft); color: var(--ink); font-weight: 600; }
.nav__link.is-active::before { background: var(--ink); }
.nav__link .count {
  margin-inline-start: auto;
  background: var(--orange); color: var(--orange-ink);
  font-size: 11px; font-weight: 800;
  padding: 1px 8px; border-radius: 20px;
}

.nav__solo {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  font-weight: 700; font-size: 14.5px;
  transition: background .15s;
}
.nav__solo:hover { background: var(--paper); }
.nav__solo.is-active { background: var(--violet-soft); }
.nav__solo .icon { width: 28px; height: 28px; border-radius: 9px; background: var(--violet-soft); color: var(--violet); display: grid; place-items: center; flex-shrink: 0; }

.sidebar__footer { padding-top: 14px; border-top: 1px solid var(--line); margin-top: 12px; }

.logout-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px; border: 0; cursor: pointer;
  background: var(--danger-bg); color: var(--danger);
  border-radius: var(--radius-sm);
  font-weight: 700; font-size: 14px;
  transition: background .15s;
}
.logout-btn:hover { background: #fbdada; }

.sidebar__copy { text-align: center; font-size: 10.5px; color: var(--muted-light); margin-top: 12px; }

/* ---------- الشريط العلوي ---------- */
.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 0 20px;
  position: sticky; top: 0; z-index: 30;
  background: linear-gradient(var(--paper) 72%, rgba(246, 245, 251, 0));
}

.topbar__title { display: flex; flex-direction: column; }
.topbar__title h1 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.3px; }

.crumbs { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.crumbs a:hover { color: var(--ink); }

.topbar__tools { margin-inline-start: auto; display: flex; align-items: center; gap: 9px; }

.icon-btn {
  width: 40px; height: 40px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: var(--card);
  display: grid; place-items: center;
  cursor: pointer; position: relative;
  color: var(--ink-soft);
  transition: border-color .15s, background .15s, transform .12s;
}
.icon-btn:hover { border-color: var(--line-strong); background: var(--paper-deep); }
.icon-btn:active { transform: scale(.95); }

.icon-btn__dot {
  position: absolute; top: -4px; inset-inline-start: -4px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 20px;
  background: var(--danger); color: #fff;
  font-size: 10.5px; font-weight: 700;
  display: grid; place-items: center;
  border: 2px solid var(--paper);
}

.user-chip {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 6px 5px 14px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 40px; cursor: pointer;
  transition: border-color .15s;
}
.user-chip:hover { border-color: var(--line-strong); }
.user-chip__name { font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.user-chip__uid  { font-size: 11px; color: var(--muted); line-height: 1.2; }

.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--violet), var(--violet-2));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: 13px;
  flex-shrink: 0; position: relative;
}
.avatar--lg { width: 62px; height: 62px; font-size: 22px; border-radius: 20px; }
.avatar--online::after {
  content: ""; position: absolute; bottom: 0; inset-inline-end: 0;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--success); border: 2px solid var(--card);
}

/* القائمة المنسدلة */
.dropdown { position: relative; }
.dropdown__panel {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0;
  min-width: 260px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: 8px; z-index: 60;
  display: none;
}
.dropdown.is-open .dropdown__panel { display: block; animation: pop .16s ease; }

@keyframes pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.dropdown__item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px;
  font-size: 14px; color: var(--ink-soft);
}
.dropdown__item:hover { background: var(--paper); color: var(--ink); }
.dropdown__sep { height: 1px; background: var(--line); margin: 6px 4px; }

.notif-item { display: block; padding: 10px 12px; border-radius: 12px; }
.notif-item:hover { background: var(--paper); }
.notif-item.is-unread { background: var(--violet-soft); }
.notif-item__title { font-size: 13.5px; font-weight: 700; }
.notif-item__body  { font-size: 12.5px; color: var(--muted); }
.notif-item__time  { font-size: 11px; color: var(--muted-light); }

/* ============================================================
   البطاقات
   ============================================================ */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow);
}

.card--flat { box-shadow: none; }
.card--brand {
  background: linear-gradient(160deg, var(--pur-900), var(--pur-700) 58%, var(--pur-600));
  border-color: transparent; color: #fff;
  box-shadow: 0 14px 40px rgba(49, 2, 88, .28);
}
.card--brand .card__title, .card--brand strong { color: #fff; }
.card--brand .text-muted, .card--brand .card__sub { color: #cbb9e6; }
.card--pad-sm { padding: 16px 18px; }

.card__head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.card__title { font-size: 16px; font-weight: 800; margin: 0; }
.card__sub { font-size: 12.5px; color: var(--muted); margin: 2px 0 0; }
.card__actions { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; }

/* بطاقة الاختصار الكبيرة */
.tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  display: flex; flex-direction: column;
  min-height: 196px;
  box-shadow: var(--shadow);
  transition: transform .18s, box-shadow .18s;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.tile--brand {
  background: linear-gradient(160deg, var(--pur-900), var(--pur-700) 58%, var(--pur-600));
  border-color: transparent; color: #fff;
  box-shadow: 0 14px 40px rgba(49, 2, 88, .28);
  position: relative; overflow: hidden;
}
/* نقوش خفيفة مستوحاة من واجهة حلول نت */
.tile--brand::after {
  content: ""; position: absolute; inset: 0; opacity: .45; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(80% 80% at 70% 20%, #000, transparent 75%);
          mask-image: radial-gradient(80% 80% at 70% 20%, #000, transparent 75%);
}
.tile--brand > * { position: relative; z-index: 1; }

.tile__top { display: flex; align-items: flex-start; }
.tile__label { font-size: 13px; color: var(--muted); font-weight: 600; }
.tile--brand .tile__label { color: #c9b6e8; }
.tile__num { font-size: 34px; font-weight: 800; line-height: 1; margin-inline-start: auto; letter-spacing: -1px; }

.tile__mid { display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; }
.tile__name { font-size: 26px; font-weight: 800; letter-spacing: -.6px; }
.tile__icon { margin-inline-start: auto; }

.tile__desc { font-size: 13px; color: var(--muted); }
.tile--brand .tile__desc { color: var(--orange-2); font-weight: 600; }

.tile__foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; flex-wrap: wrap; }

.tile__go {
  width: 44px; height: 40px; border-radius: 12px;
  background: var(--violet); color: #fff; display: grid; place-items: center;
  margin-inline-end: auto;
  box-shadow: var(--shadow-violet);
  transition: background .15s, transform .15s;
}
.tile--brand .tile__go { background: var(--orange); color: var(--orange-ink); box-shadow: 0 10px 24px rgba(255,153,46,.32); }
.tile__go:hover { background: var(--violet-2); transform: translateY(-2px); }
.tile--brand .tile__go:hover { background: var(--orange-2); }

/* ============================================================
   الأزرار
   ============================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 20px;
  border-radius: 40px;
  border: 1px solid var(--line-strong);
  background: var(--card); color: var(--ink);
  font-weight: 700; font-size: 13.5px;
  cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .12s, box-shadow .15s;
}
.btn:hover { background: var(--paper-deep); border-color: var(--muted-light); }
.btn:active { transform: scale(.97); }

.btn--primary { background: var(--violet); border-color: var(--violet); color: #fff; box-shadow: var(--shadow-violet); }
.btn--primary:hover { background: var(--violet-2); border-color: var(--violet-2); }

.btn--dark { background: var(--pur-700); border-color: var(--pur-700); color: #fff; }
.btn--dark:hover { background: var(--pur-600); border-color: var(--pur-600); }

/* زر الإضافة/الإبراز — التدرّج البرتقالي في هوية حلول نت */
.btn--brand, .btn--orange {
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  border-color: transparent; color: var(--orange-ink);
  box-shadow: 0 10px 24px rgba(255, 153, 46, .3);
}
.btn--brand:hover, .btn--orange:hover { filter: brightness(1.05); }

.btn--ghost { background: transparent; border-color: var(--line); }
.btn--danger { background: var(--danger-bg); border-color: transparent; color: var(--danger); }
.btn--danger:hover { background: #fbdada; }
.btn--sm { padding: 6px 14px; font-size: 12.5px; }
.btn--lg { padding: 13px 28px; font-size: 15px; }
.btn--block { width: 100%; }
.btn--icon { padding: 9px; width: 38px; height: 38px; border-radius: 12px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ============================================================
   الشارات والحالات
   ============================================================ */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px;
  border-radius: 30px;
  font-size: 12px; font-weight: 700;
  white-space: nowrap;
}
.badge--success { background: var(--success-bg); color: var(--success); }
.badge--danger  { background: var(--danger-bg);  color: var(--danger); }
.badge--warning { background: var(--warning-bg); color: #b47516; }
.badge--info    { background: var(--info-bg);    color: var(--info); }
.badge--muted   { background: var(--paper-deep); color: var(--muted); }
.badge--brand   { background: var(--violet-soft);  color: var(--violet); }
.badge--orange  { background: var(--orange-soft);  color: #b26a00; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 30px;
  background: var(--paper-deep); color: var(--ink-soft);
  font-size: 12px; font-weight: 600;
}

.dot-status { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-status--active { background: var(--success); }
.dot-status--warn { background: var(--warning); }
.dot-status--danger { background: var(--danger); }

/* ============================================================
   الشبكات
   ============================================================ */

.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--dash { grid-template-columns: repeat(3, 1fr); }
.grid--sidebar { grid-template-columns: 1.7fr 1fr; align-items: start; }

.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.spacer { margin-inline-start: auto; }

/* بطاقات الإحصاء العلوية */
.stat {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px;
  display: flex; align-items: center; gap: 14px;
}
.stat__num { font-size: 26px; font-weight: 800; line-height: 1.1; }
.stat__label { font-size: 13.5px; font-weight: 700; }
.stat__sub { font-size: 11.5px; color: var(--muted); }
.stat__icon {
  width: 42px; height: 42px; border-radius: 13px;
  display: grid; place-items: center; flex-shrink: 0;
  margin-inline-start: auto;
  background: var(--paper-deep); color: var(--ink-soft);
}
.stat__icon--brand { background: var(--violet-soft); color: var(--violet); }
.stat__icon--danger { background: var(--danger-bg); color: var(--danger); }
.stat__icon--warning { background: var(--warning-bg); color: #b47516; }
.stat__icon--info { background: var(--info-bg); color: var(--info); }

/* ============================================================
   الجداول
   ============================================================ */

.table-wrap {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

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

.table thead th {
  background: var(--paper);
  padding: 13px 18px;
  font-size: 12.5px; font-weight: 700; color: var(--muted);
  text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}

.table tbody td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: var(--paper); }

.table .t-main { font-weight: 700; font-size: 14px; }
.table .t-sub  { font-size: 12px; color: var(--muted); }
.table .t-num  { font-variant-numeric: tabular-nums; font-weight: 700; }
.table--center td, .table--center th { text-align: center; }

.table-scroll { overflow-x: auto; }

/* حالة فارغة */
.empty {
  padding: 54px 24px; text-align: center;
}
.empty__icon {
  width: 74px; height: 74px; margin: 0 auto 16px;
  border-radius: 24px; background: var(--paper-deep);
  display: grid; place-items: center; color: var(--muted-light);
}
.empty__title { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.empty__text  { font-size: 13.5px; color: var(--muted); margin-bottom: 18px; }

/* ============================================================
   النماذج
   ============================================================ */

.form { display: flex; flex-direction: column; gap: 16px; }

.field { display: flex; flex-direction: column; gap: 7px; }
.field__label { font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.field__label .req { color: var(--danger); }
.field__hint { font-size: 11.5px; color: var(--muted); }
.field__error { font-size: 12px; color: var(--danger); font-weight: 600; }

.input, .select, .textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fcfcfe;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s, background .15s;
  outline: none;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--violet);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(94, 11, 249, .12);
}
.input::placeholder, .textarea::placeholder { color: var(--muted-light); }
.input.is-error, .select.is-error, .textarea.is-error { border-color: var(--danger); }
.input.is-ok { border-color: var(--success); }
.input[readonly], .input[disabled] { background: var(--paper); color: var(--muted); }

.textarea { min-height: 130px; resize: vertical; line-height: 1.8; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7787' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 16px center;
  padding-left: 42px;
}

/* حقل الجوال مع بادئة الدولة */
.phone-field { display: flex; flex-direction: row-reverse; }
.phone-field .input { border-start-end-radius: 0; border-end-end-radius: 0; }
.phone-field__cc {
  display: flex; align-items: center; gap: 6px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-inline-start: 0;
  border-start-start-radius: 14px; border-end-start-radius: 14px;
  background: var(--paper);
  font-size: 13px; font-weight: 700; color: var(--muted);
  white-space: nowrap;
}

.input-group { position: relative; }
.input-group .input { padding-inline-start: 46px; }
.input-group__icon {
  position: absolute; inset-inline-start: 16px; top: 50%;
  transform: translateY(-50%); color: var(--muted-light);
  pointer-events: none; display: flex;
}
.input-group__btn {
  position: absolute; inset-inline-start: 8px; top: 50%;
  transform: translateY(-50%);
  background: none; border: 0; cursor: pointer;
  color: var(--muted); padding: 6px; display: flex;
}

.checkbox { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: 13.5px; }
.checkbox input { width: 18px; height: 18px; accent-color: var(--violet); margin-top: 2px; flex-shrink: 0; }

.switch { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { display: none; }
.switch__track {
  width: 44px; height: 25px; border-radius: 20px;
  background: var(--line-strong); position: relative;
  transition: background .2s;
}
.switch__track::after {
  content: ""; position: absolute; top: 3px; inset-inline-end: 3px;
  width: 19px; height: 19px; border-radius: 50%;
  background: #fff; transition: transform .2s;
}
.switch input:checked + .switch__track { background: var(--violet); }
.switch input:checked + .switch__track::after { transform: translateX(-19px); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid--3 { grid-template-columns: repeat(3, 1fr); }
.form-grid .span-2 { grid-column: span 2; }

.fieldset {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; margin: 0;
}
.fieldset legend { padding: 0 8px; font-weight: 800; font-size: 13.5px; }

/* منطقة رفع الملفات */
.dropzone {
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 22px; text-align: center;
  color: var(--muted); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--violet); background: var(--violet-soft); }
.dropzone input { display: none; }
.file-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.file-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 10px;
  background: var(--paper); font-size: 12.5px;
}

/* ============================================================
   صفحات الدخول
   ============================================================ */

.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.auth__aside {
  background:
    radial-gradient(900px 420px at 85% -5%, rgba(94, 11, 249, .55), transparent 60%),
    radial-gradient(700px 400px at 10% 110%, rgba(255, 153, 46, .22), transparent 60%),
    linear-gradient(160deg, var(--pur-900), var(--pur-700) 55%, var(--pur-600));
  color: #fff;
  padding: 44px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
/* نقوش نقطية مطابقة لواجهة حلول نت */
.auth__aside::after {
  content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent 78%);
          mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent 78%);
}
.auth__brand { display: flex; align-items: center; gap: 12px; }
.auth__brand .brand__name { color: #fff; }
.auth__brand .brand__sub { color: var(--orange); font-weight: 600; }

.auth__pitch { margin: auto 0; position: relative; z-index: 2; }
.auth__pitch h2 { font-size: 34px; font-weight: 800; line-height: 1.4; margin: 0 0 14px; letter-spacing: -.8px; }
.auth__pitch h2 span { color: var(--orange); }
.auth__pitch p { color: rgba(255,255,255,.62); font-size: 15px; max-width: 420px; margin: 0; }

.auth__features { display: flex; flex-direction: column; gap: 13px; margin-top: 30px; }
.auth__feature { display: flex; align-items: center; gap: 11px; font-size: 14px; color: rgba(255,255,255,.85); }
.auth__feature i {
  width: 30px; height: 30px; border-radius: 10px;
  background: rgba(255,153,46,.16); color: var(--orange);
  display: grid; place-items: center; flex-shrink: 0;
}

.auth__foot { position: relative; z-index: 2; font-size: 12px; color: rgba(255,255,255,.35); }

.auth__main {
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px; overflow-y: auto;
}

.auth__box { width: 100%; max-width: 430px; }
.auth__box--wide { max-width: 560px; }

.auth__title { font-size: 27px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.5px; }
.auth__text { color: var(--muted); font-size: 14px; margin: 0 0 26px; }

.auth__mobile-brand { display: none; }

.auth__sep {
  display: flex; align-items: center; gap: 12px;
  color: var(--muted-light); font-size: 12px; margin: 22px 0;
}
.auth__sep::before, .auth__sep::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

.auth__alt { text-align: center; font-size: 13.5px; color: var(--muted); }
.auth__alt a { font-weight: 700; color: var(--violet); border-bottom: 2px solid var(--violet-line); }

/* حقول رمز التحقق */
.otp { display: flex; gap: 10px; justify-content: center; direction: ltr; }
.otp input {
  width: 52px; height: 60px;
  text-align: center; font-size: 24px; font-weight: 800;
  border: 1px solid var(--line-strong); border-radius: 14px;
  background: var(--card); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.otp input:focus { border-color: var(--violet); box-shadow: 0 0 0 4px var(--violet-soft); }

/* مؤشر قوة كلمة المرور */
.pw-meter { display: flex; gap: 5px; margin-top: 8px; }
.pw-meter span { height: 4px; flex: 1; border-radius: 4px; background: var(--line); transition: background .2s; }
.pw-meter.s1 span:nth-child(1) { background: var(--danger); }
.pw-meter.s2 span:nth-child(-n+2) { background: var(--warning); }
.pw-meter.s3 span:nth-child(-n+3) { background: var(--violet); }
.pw-meter.s4 span { background: var(--success); }

/* ============================================================
   التنبيهات
   ============================================================ */

.alerts { position: fixed; top: 18px; left: 18px; right: auto; z-index: 90; display: flex; flex-direction: column; gap: 10px; max-width: 380px; }

.alert {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
  font-size: 13.5px; font-weight: 600;
  animation: slide-in .25s ease;
}
@keyframes slide-in { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }

.alert__icon { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.alert--success .alert__icon { background: var(--success-bg); color: var(--success); }
.alert--error   .alert__icon { background: var(--danger-bg);  color: var(--danger); }
.alert--warning .alert__icon { background: var(--warning-bg); color: #b47516; }
.alert--info    .alert__icon { background: var(--info-bg);    color: var(--info); }
.alert__close { margin-inline-start: auto; background: none; border: 0; cursor: pointer; color: var(--muted-light); padding: 0; }

.inline-alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 16px; border-radius: 14px;
  font-size: 13.5px; margin-bottom: 16px;
}
.inline-alert--info    { background: var(--info-bg);    color: #23557f; }
.inline-alert--warning { background: var(--warning-bg); color: #8a5a10; }
.inline-alert--danger  { background: var(--danger-bg);  color: #a02020; }
.inline-alert--success { background: var(--success-bg); color: #1d6b2c; }

/* ============================================================
   المحادثة (التذاكر)
   ============================================================ */

.thread { display: flex; flex-direction: column; gap: 16px; }

.msg { display: flex; gap: 12px; }
.msg__avatar {
  width: 40px; height: 40px; border-radius: 13px;
  display: grid; place-items: center; flex-shrink: 0;
  font-weight: 800; font-size: 13px;
  background: var(--paper-deep); color: var(--ink-soft);
}
.msg--staff .msg__avatar { background: var(--pur-700); color: var(--orange); }
.msg--client .msg__avatar { background: var(--violet-soft); color: var(--violet); }
.msg--internal .msg__avatar { background: var(--warning-bg); color: #b47516; }

.msg__body { flex: 1; min-width: 0; }
.msg__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.msg__author { font-weight: 800; font-size: 14px; }
.msg__time { font-size: 11.5px; color: var(--muted-light); }

.msg__text {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; border-start-end-radius: 4px;
  padding: 14px 18px; font-size: 14px; line-height: 1.9;
  white-space: pre-wrap; word-break: break-word;
}
.msg--staff .msg__text { background: var(--violet-soft); border-color: #e2f2bd; }
.msg--internal .msg__text { background: var(--warning-bg); border-color: #f6e4c2; }

.msg__files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.msg__file {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 30px;
  background: var(--paper); border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 600;
}
.msg__file:hover { background: var(--paper-deep); }

/* شريط معلومات جانبي */
.meta-list { display: flex; flex-direction: column; }
.meta-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 0; border-bottom: 1px dashed var(--line);
  font-size: 13.5px;
}
.meta-row:last-child { border-bottom: 0; }
.meta-row__key { color: var(--muted); }
.meta-row__val { margin-inline-start: auto; font-weight: 700; text-align: left; }

/* ============================================================
   الفواتير
   ============================================================ */

.invoice-paper {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 34px;
}
.invoice-head { display: flex; gap: 20px; align-items: flex-start; padding-bottom: 22px; border-bottom: 2px solid var(--ink); }
.invoice-head__brand { font-size: 24px; font-weight: 800; }
.invoice-head__meta { margin-inline-start: auto; text-align: left; font-size: 13px; }

.invoice-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 22px 0; }
.invoice-party__label { font-size: 11.5px; color: var(--muted); font-weight: 700; margin-bottom: 6px; }

.invoice-total { margin-inline-start: auto; width: 320px; margin-top: 18px; }
.invoice-total__row { display: flex; padding: 8px 0; font-size: 14px; }
.invoice-total__row span:last-child { margin-inline-start: auto; font-variant-numeric: tabular-nums; font-weight: 700; }
.invoice-total__row--grand {
  border-top: 2px solid var(--ink); margin-top: 8px; padding-top: 14px;
  font-size: 18px; font-weight: 800;
}

.stamp {
  display: inline-block; padding: 8px 22px;
  border: 3px solid currentColor; border-radius: 12px;
  font-size: 19px; font-weight: 800; transform: rotate(-8deg);
  opacity: .82;
}
.stamp--paid { color: var(--success); }
.stamp--unpaid { color: var(--danger); }

/* ============================================================
   ترقيم الصفحات والفلاتر
   ============================================================ */

.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 16px; }
.pagination a, .pagination span {
  min-width: 36px; height: 36px; padding: 0 10px;
  border-radius: 11px; border: 1px solid var(--line);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: var(--ink-soft);
  background: var(--card);
}
.pagination a:hover { background: var(--paper-deep); }
.pagination .is-current { background: var(--ink); border-color: var(--ink); color: #fff; }
.pagination .is-disabled { opacity: .4; pointer-events: none; }

.filters {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}
.filters .input, .filters .select { padding: 9px 14px; border-radius: 12px; font-size: 13.5px; }
.filters .select { padding-left: 38px; }
/* الحقول المباشرة داخل شريط الفلاتر تأخذ عرضها الطبيعي حتى تبقى في سطر واحد */
.filters > .input, .filters > .select { width: auto; flex: 0 0 auto; min-width: 150px; }
.filters > input[type="date"] { min-width: 158px; }
.search-box { position: relative; flex: 1; min-width: 200px; max-width: 380px; }
.search-box .input { padding-inline-start: 42px; }
.search-box__icon { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--muted-light); display: flex; }

.tabs { display: flex; gap: 6px; padding: 4px; background: var(--paper-deep); border-radius: 30px; }
.tab {
  padding: 8px 18px; border-radius: 30px;
  font-size: 13.5px; font-weight: 700; color: var(--muted);
  transition: background .15s, color .15s;
}
.tab:hover { color: var(--ink); }
.tab.is-active { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }

/* ============================================================
   النافذة المنبثقة
   ============================================================ */

.modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(22,24,26,.45);
  display: none; align-items: center; justify-content: center;
  padding: 20px; backdrop-filter: blur(3px);
}
.modal.is-open { display: flex; animation: fade .15s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.modal__box {
  background: var(--card); border-radius: var(--radius-lg);
  width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
  padding: 26px; box-shadow: var(--shadow-lift);
  animation: pop .2s ease;
}
.modal__title { font-size: 18px; font-weight: 800; margin: 0 0 6px; }
.modal__text { color: var(--muted); font-size: 13.5px; margin: 0 0 20px; }
.modal__foot { display: flex; gap: 10px; justify-content: flex-start; margin-top: 22px; }

/* ============================================================
   أدوات مساعدة
   ============================================================ */

.text-muted { color: var(--muted); }
.text-sm { font-size: 12.5px; }
.text-lg { font-size: 17px; }
.text-bold { font-weight: 800; }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-warning { color: #b47516; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: embed; }
td.num, th.num { display: table-cell; }
span.num, b.num, strong.num { display: inline-block; }
.ltr { direction: ltr; text-align: right; unicode-bidi: embed; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.hidden { display: none !important; }
.divider { height: 1px; background: var(--line); margin: 18px 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.progress { height: 7px; border-radius: 10px; background: var(--paper-deep); overflow: hidden; }
.progress__bar { height: 100%; background: var(--violet); border-radius: 10px; transition: width .3s; }
.progress__bar--danger { background: var(--danger); }
.progress__bar--warning { background: var(--warning); }

.skeleton { background: linear-gradient(90deg, var(--paper-deep) 25%, var(--paper) 50%, var(--paper-deep) 75%); background-size: 200% 100%; animation: shine 1.4s infinite; border-radius: 8px; }
@keyframes shine { to { background-position: -200% 0; } }

/* زر واتساب العائم */
.wa-float {
  position: fixed; bottom: 22px; inset-inline-start: 22px; z-index: 50;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25d366; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(37,211,102,.4);
  transition: transform .18s;
}
.wa-float:hover { transform: scale(1.08); }

/* زر القائمة للجوال */
.menu-toggle { display: none; }

/* ============================================================
   الاستجابة للشاشات
   ============================================================ */

@media (max-width: 1180px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--dash { grid-template-columns: repeat(2, 1fr); }
  .grid--sidebar { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .auth { grid-template-columns: 1fr; }
  .auth__aside { display: none; }
  .auth__mobile-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .invoice-parties { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  /* القائمة المنزلقة خارج الشاشة يجب ألا تُنشئ تمريراً أفقياً */
  html, body { overflow-x: hidden; max-width: 100%; }
  .shell { overflow-x: clip; }

  /* تُثبَّت على الحافة اليمنى (خصائص فيزيائية: RTL يعكس inset-inline) */
  .sidebar {
    position: fixed; top: 0; bottom: 0; right: 0; left: auto;
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 80; box-shadow: var(--shadow-lift);
  }
  .sidebar.is-open { transform: none; }
  .main { padding: 0 16px 40px; }
  .menu-toggle { display: grid; }
  .grid--2, .grid--3, .grid--4, .grid--dash { grid-template-columns: 1fr; }
  .form-grid, .form-grid--3 { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
  .user-chip__info { display: none; }
  .user-chip { padding: 5px; }
  .topbar__title h1 { font-size: 18px; }
  .invoice-paper { padding: 20px; }
  .invoice-total { width: 100%; }
  .alerts { left: 12px; right: 12px; max-width: none; }
}

.scrim {
  position: fixed; inset: 0; background: rgba(22,24,26,.4);
  z-index: 70; display: none;
}
.scrim.is-open { display: block; }

/* ============================================================
   الطباعة
   ============================================================ */

@media print {
  .sidebar, .topbar, .alerts, .no-print, .wa-float { display: none !important; }
  body { background: #fff; }
  .main { padding: 0; }
  .invoice-paper { border: 0; padding: 0; }
  .card { box-shadow: none; border-color: #ddd; }
  @page { margin: 14mm; }   /* الفواتير لها إعدادها الخاص في invoice.css */
}

/* ============================================================
   البيانات المحجوبة عن الموظفين غير المصرّح لهم
   ============================================================ */
.masked {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 10px; border-radius: 20px;
  background: var(--paper-deep); color: var(--muted-light);
  font-size: 12px; font-weight: 600; letter-spacing: 1px;
  user-select: none;
}

/* شبكة الصلاحيات */
.perm-grid { display: grid; gap: 10px; }
.perm-row {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; background: var(--card);
}
.perm-row__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.perm-row__title { font-weight: 800; font-size: 14px; }
.perm-row__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.perm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 30px;
  border: 1px solid var(--line-strong); background: var(--card);
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.perm-chip input { display: none; }
.perm-chip:hover { border-color: var(--violet); color: var(--violet); }
.perm-chip:has(input:checked) {
  background: var(--violet-soft); border-color: var(--violet); color: var(--violet);
}
.perm-chip--extra:has(input:checked) {
  background: var(--orange-soft); border-color: var(--orange); color: #b26a00;
}

/* بطاقات باقات المتجر */
.plan-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 22px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  position: relative; overflow: hidden;
}
.plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: transparent; }
.plan-card__ribbon {
  position: absolute; top: 16px; inset-inline-start: -30px;
  background: var(--orange); color: var(--orange-ink);
  font-size: 11px; font-weight: 800; padding: 4px 34px;
  transform: rotate(-38deg);
}
.plan-card__name { font-size: 17px; font-weight: 800; }
.plan-card__price { display: flex; align-items: baseline; gap: 8px; margin: 4px 0; }
.plan-card__price b { font-size: 26px; font-weight: 800; color: var(--pur-700); }
.plan-card__price del { color: var(--muted-light); font-size: 14px; }
.plan-card__features { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; }
.plan-card__features span { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; color: var(--ink-soft); }
.plan-card__features svg { color: var(--success); flex-shrink: 0; margin-top: 3px; }

/* ============================================================
   بوابة دخول فريق العمل — تصميم مستقل عن بوابة العملاء
   ============================================================ */
.staff-auth {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 32px 18px;
  background:
    radial-gradient(760px 420px at 50% -10%, rgba(94, 11, 249, .5), transparent 62%),
    radial-gradient(620px 380px at 85% 110%, rgba(255, 153, 46, .18), transparent 62%),
    linear-gradient(170deg, var(--pur-950), var(--pur-800) 60%, var(--pur-700));
  position: relative; overflow: hidden;
}
.staff-auth::before {
  content: ""; position: absolute; inset: 0; opacity: .45; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 40%, #000, transparent 76%);
          mask-image: radial-gradient(60% 60% at 50% 40%, #000, transparent 76%);
}

.staff-auth__box { width: 100%; max-width: 430px; position: relative; z-index: 2; }

.staff-auth__brand { display: flex; align-items: center; gap: 13px; margin-bottom: 22px; justify-content: center; }
.staff-auth__title { font-size: 19px; font-weight: 800; color: #fff; }
.staff-auth__sub   { font-size: 12.5px; color: var(--orange); font-weight: 600; }

.staff-auth__card {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  box-shadow: 0 30px 70px rgba(26, 1, 48, .4);
}
.staff-auth__card h1 { margin: 0 0 6px; font-size: 22px; font-weight: 800; }
.staff-auth__card p  { margin: 0 0 24px; font-size: 13.5px; color: var(--muted); }

.staff-auth__note {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 20px; padding: 12px 14px;
  background: var(--paper); border-radius: var(--radius-sm);
  font-size: 12px; color: var(--muted); line-height: 1.8;
}

.staff-auth__back {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 18px; font-size: 13px; color: rgba(255, 255, 255, .6);
}
.staff-auth__back:hover { color: #fff; }

/* ============================================================
   الشعار المرفوع
   ============================================================ */
.brand__mark--img {
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: none;
  padding: 4px;
}
.brand__mark--img img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ============================================================
   جرس الإشعارات — عدّاد أحمر متحرّك
   ============================================================ */
.icon-btn__dot {
  background: #e5484d;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 0 0 2px var(--paper), 0 2px 8px rgba(229, 72, 77, .5);
  animation: badge-pop .35s cubic-bezier(.3, 1.6, .5, 1);
}
.icon-btn--alert { border-color: #f4b8ba; background: #fff5f5; }
.icon-btn--alert svg { color: #e5484d; }

/* نبض حول الجرس عند وجود جديد */
.icon-btn--alert::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 15px;
  border: 2px solid rgba(229, 72, 77, .55);
  animation: bell-pulse 1.9s ease-out infinite;
  pointer-events: none;
}
.icon-btn--alert .ico { animation: bell-swing 2.4s ease-in-out infinite; transform-origin: 50% 12%; }

@keyframes badge-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes bell-pulse {
  0%   { transform: scale(.92); opacity: .9; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}
@keyframes bell-swing {
  0%, 70%, 100% { transform: rotate(0); }
  75% { transform: rotate(11deg); }
  80% { transform: rotate(-9deg); }
  85% { transform: rotate(6deg); }
  90% { transform: rotate(-4deg); }
  95% { transform: rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .icon-btn--alert::after, .icon-btn--alert .ico, .icon-btn__dot { animation: none; }
}

/* ============================================================
   تذكرة بها رد جديد — خلفية مميزة كاملة
   ============================================================ */
.table tbody tr.has-new {
  background: linear-gradient(90deg, var(--orange-soft), #fffaf3 70%);
  box-shadow: inset 4px 0 0 var(--orange);
}
.table tbody tr.has-new:hover { background: #fff3e4; }
.table tbody tr.has-new .t-main { color: #8a4b00; }

.new-flag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px;
  background: var(--orange); color: var(--orange-ink);
  font-size: 11px; font-weight: 800;
  animation: badge-pop .35s cubic-bezier(.3, 1.6, .5, 1);
}
.new-flag::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; animation: bell-pulse 1.8s ease-out infinite;
}

/* بطاقة التذكرة في القوائم المختصرة */
.ticket-row.has-new {
  background: var(--orange-soft);
  border-color: var(--orange) !important;
}

/* شريط تنبيه أعلى التذكرة عند وجود رد جديد */
.new-reply-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  color: var(--orange-ink); font-weight: 700; font-size: 14px;
  margin-bottom: 16px;
  box-shadow: 0 10px 24px rgba(255, 153, 46, .28);
}

/* آخر رسالة جديدة داخل المحادثة */
.msg.is-new .msg__text {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 153, 46, .14);
}

/* ============================================================
   تقييم النجوم
   ============================================================ */
.stars { display: inline-flex; align-items: center; gap: 2px; }
.stars svg { color: var(--line-strong); }
.stars svg.is-on { color: #f5a623; fill: #f5a623; }
.stars--lg svg { width: 20px; height: 20px; }

.rate-picker { display: flex; flex-direction: row-reverse; justify-content: center; gap: 4px; }
.rate-picker input { display: none; }
.rate-picker label { cursor: pointer; color: var(--line-strong); transition: transform .12s, color .12s; }
.rate-picker label:hover { transform: scale(1.15); }
.rate-picker input:checked ~ label,
.rate-picker label:hover,
.rate-picker label:hover ~ label { color: #f5a623; }
.rate-picker svg { width: 30px; height: 30px; }
.rate-picker input:checked ~ label svg,
.rate-picker label:hover svg,
.rate-picker label:hover ~ label svg { fill: #f5a623; }

.rating-bar { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.rating-bar__track { flex: 1; height: 7px; border-radius: 10px; background: var(--paper-deep); overflow: hidden; }
.rating-bar__fill { height: 100%; background: #f5a623; border-radius: 10px; }

/* ============================================================
   الرسائل الصوتية
   ============================================================ */
.voice-box {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: var(--radius);
  background: var(--violet-soft); border: 1px solid var(--violet-line);
}
.voice-box audio { flex: 1; height: 38px; }
.voice-box__meta { font-size: 12px; color: var(--violet); font-weight: 700; white-space: nowrap; }

.recorder {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; border: 1px dashed var(--line-strong);
  border-radius: var(--radius); background: var(--paper);
}
.recorder.is-recording { border-color: var(--danger); background: #fff5f5; }

.rec-btn {
  width: 46px; height: 46px; border-radius: 50%;
  border: 0; cursor: pointer; flex-shrink: 0;
  background: var(--danger); color: #fff;
  display: grid; place-items: center;
  transition: transform .15s, background .15s;
}
.rec-btn:hover { transform: scale(1.06); }
.rec-btn.is-active { background: var(--ink); animation: rec-pulse 1.4s ease-out infinite; }

@keyframes rec-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(229, 72, 77, .5); }
  100% { box-shadow: 0 0 0 16px rgba(229, 72, 77, 0); }
}

.rec-time { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 16px; direction: ltr; }
.rec-wave { display: flex; align-items: center; gap: 3px; height: 26px; }
.rec-wave span {
  width: 3px; border-radius: 3px; background: var(--danger);
  animation: wave 1s ease-in-out infinite;
}
.rec-wave span:nth-child(1) { height: 30%; animation-delay: 0s; }
.rec-wave span:nth-child(2) { height: 70%; animation-delay: .12s; }
.rec-wave span:nth-child(3) { height: 100%; animation-delay: .24s; }
.rec-wave span:nth-child(4) { height: 60%; animation-delay: .36s; }
.rec-wave span:nth-child(5) { height: 85%; animation-delay: .48s; }
.rec-wave span:nth-child(6) { height: 40%; animation-delay: .6s; }
@keyframes wave { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }

/* ============================================================
   توقيع المشرف داخل الرد
   ============================================================ */
.signature {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px dashed var(--line-strong);
  font-size: 12.5px; color: var(--muted); line-height: 1.8;
  white-space: pre-wrap;
}

/* ============================================================
   التقويم المالي
   ============================================================ */
.fin-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.fin-month {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .18s, box-shadow .18s, border-color .18s;
  position: relative; overflow: hidden;
}
.fin-month:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: transparent; }
.fin-month--empty { opacity: .55; }
.fin-month--future { opacity: .4; background: var(--paper); }
.fin-month--current { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-soft); }

.fin-month__head { display: flex; align-items: center; gap: 8px; }
.fin-month__name { font-weight: 800; font-size: 15px; }
.fin-month__count {
  margin-inline-start: auto; font-size: 11px; font-weight: 700;
  padding: 2px 9px; border-radius: 20px;
  background: var(--paper-deep); color: var(--muted);
}

.fin-bars { display: flex; flex-direction: column; gap: 6px; }
.fin-bar { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.fin-bar__label { color: var(--muted); width: 52px; flex-shrink: 0; }
.fin-bar__track { flex: 1; height: 8px; border-radius: 10px; background: var(--paper-deep); overflow: hidden; }
.fin-bar__fill { height: 100%; border-radius: 10px; transition: width .4s; }
.fin-bar__fill--collected { background: linear-gradient(90deg, #12b76a, #3ddc97); }
.fin-bar__fill--due       { background: linear-gradient(90deg, var(--orange), var(--orange-2)); }
.fin-bar__fill--overdue   { background: linear-gradient(90deg, #e5484d, #f87171); }
.fin-bar__val { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; min-width: 74px; text-align: left; }

.fin-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.fin-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fin-legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }

.fin-total {
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 18px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--card);
}
.fin-total__val { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fin-total__label { font-size: 12.5px; color: var(--muted); }

@media (max-width: 1180px) { .fin-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .fin-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .fin-grid { grid-template-columns: 1fr; } }

/* ============================================================
   مؤشّر مدة الخدمة
   ============================================================ */
.term { display: flex; flex-direction: column; gap: 6px; }
.term__bar { height: 8px; border-radius: 10px; background: var(--paper-deep); overflow: hidden; }
.term__fill { height: 100%; border-radius: 10px; transition: width .4s; }
.term__fill--ok      { background: linear-gradient(90deg, #12b76a, #3ddc97); }
.term__fill--notice  { background: linear-gradient(90deg, var(--violet), var(--violet-2)); }
.term__fill--warning { background: linear-gradient(90deg, var(--orange), var(--orange-2)); }
.term__fill--danger  { background: linear-gradient(90deg, #e5484d, #f87171); }
.term__meta { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); }

/* حالة تعذّر التسجيل */
.recorder.is-unavailable { opacity: .75; border-style: solid; border-color: var(--danger-bg); background: #fffafa; }
.recorder.is-unavailable .rec-btn { opacity: .4; cursor: not-allowed; }
.recorder.is-unavailable .rec-time, .recorder.is-unavailable .rec-wave { display: none !important; }

/* صفوف الحسابات البنكية في الإعدادات */
.bank-row {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 10px; background: var(--paper);
}
.bank-row + .bank-row { margin-top: 0; }

/* ============================================================
   اختيار نوع المستند (فاتورة / فاتورة ضريبية)
   ============================================================ */
.doc-type { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.doc-type__opt { cursor: pointer; }
.doc-type__opt input { display: none; }

.doc-type__box {
  display: flex; flex-direction: column; gap: 5px;
  padding: 14px 16px;
  border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--card);
  transition: border-color .15s, background .15s, box-shadow .15s;
  height: 100%;
}
.doc-type__opt:hover .doc-type__box { border-color: var(--line-strong); }

.doc-type__opt input:checked + .doc-type__box {
  border-color: var(--violet);
  background: var(--violet-pale);
  box-shadow: 0 0 0 3px var(--violet-soft);
}

.doc-type__title {
  display: flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 14.5px;
}
.doc-type__opt input:checked + .doc-type__box .doc-type__title { color: var(--violet); }
.doc-type__desc { font-size: 12px; color: var(--muted); line-height: 1.7; }

@media (max-width: 700px) { .doc-type { grid-template-columns: 1fr; } }