* { box-sizing: border-box; }
:root{
  /* الألوان الأساسية */
  --primary:#2563eb; --primary-dark:#1d4ed8; --primary-light:#eff4ff; --primary-ring: rgba(37,99,235,.18);
  --bg:#f3f5f9; --card:#ffffff; --surface:#f8fafc;
  --text:#1f2937; --text-strong:#111827; --muted:#6b7280; --muted-light:#9ca3af; --border:#e5e7eb; --border-light:#f1f3f6;
  --success:#16a34a; --success-bg:#ecfdf3; --warning:#d97706; --warning-bg:#fffbeb; --danger:#dc2626; --danger-bg:#fef2f2;

  /* الأبعاد والظلال - موحّدة في كل التطبيق */
  --radius-sm:8px; --radius:12px; --radius-lg:16px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(17,24,39,.05);
  --shadow:0 2px 8px rgba(17,24,39,.06), 0 1px 2px rgba(17,24,39,.04);
  --shadow-md:0 8px 24px rgba(17,24,39,.10);
  --shadow-lg:0 20px 50px rgba(17,24,39,.18);
  --ease: cubic-bezier(.2,.7,.3,1);
}

*::selection { background: var(--primary-ring); }

html { scroll-behavior:smooth; }
body { margin:0; font-family: 'Segoe UI', system-ui, Tahoma, Arial, sans-serif; background:var(--bg); color:var(--text); line-height:1.5; -webkit-font-smoothing:antialiased; }
h1, h2, h3, h4 { color:var(--text-strong); line-height:1.3; }
.hidden { display:none !important; }
button { cursor:pointer; font-family: inherit; }
a { color:var(--primary); }

/* سكرول بار أنعم */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:20px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover { background:#b8c0cc; background-clip:content-box; }

/* تركيز موحّد لإمكانية الوصول */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline:2px solid var(--primary); outline-offset:2px; border-radius:6px;
}

/* ===== شاشة الدخول ===== */
.login-screen {
  min-height:100vh; display:flex; align-items:flex-start; justify-content:center;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(59,130,246,.35), transparent 60%),
    radial-gradient(700px 500px at 110% 110%, rgba(37,99,235,.25), transparent 60%),
    linear-gradient(160deg, #0f172a, #1e293b 55%, #111827);
  padding:40px 20px;
}

/* ===== تخطيط شاشة الدخول: عروض قطع الغيار (يمين) + صندوق الدخول + عروض مراكز الصيانة (يسار) ===== */
.login-layout {
  display:grid; width:100%; max-width:1300px; gap:20px; align-items:stretch;
  grid-template-columns: minmax(320px,420px) minmax(360px,440px) minmax(320px,420px);
  grid-template-areas: "bar bar bar" "parts box services";
}
.login-layout .offers-location-bar { grid-area:bar; }
#offers-panel-parts { grid-area:parts; }
.login-layout .login-box { grid-area:box; margin:0; justify-self:center; display:flex; flex-direction:column; justify-content:center; }
#offers-panel-services { grid-area:services; }

.offers-location-bar {
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(6px);
  border-radius:var(--radius); padding:12px 16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:#e5e9f0;
}
.offers-location-bar .offers-location-label { font-size:13.5px; font-weight:600; white-space:nowrap; }
.offers-location-bar select, .offers-location-bar input {
  padding:8px 12px; border-radius:var(--radius-sm); border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.95);
  font-size:13px; color:var(--text); min-width:150px; font-family:inherit;
}

.offers-panel {
  background:rgba(255,255,255,.97); border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow-lg);
  height:100%; min-height:520px; display:flex; flex-direction:column; animation: pop-in .35s var(--ease);
}
.offers-panel h3 { margin:0 0 14px; font-size:17px; font-weight:700; }
.offers-panel-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.offers-panel-head h3 { margin:0; }
.offers-panel-head .link-btn { font-size:12.5px; white-space:nowrap; }
.offers-car-search { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.offers-car-search input, .offers-car-search select { padding:10px 12px; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-size:14px; background:var(--surface); font-family:inherit; }
.offers-car-search input:focus, .offers-car-search select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-ring); background:#fff; }
.offers-car-search .btn { width:100%; padding:10px 18px; font-size:14px; }
.offers-car-search.hidden { display:none; }

.offers-subtabs { display:flex; gap:6px; margin-bottom:14px; background:var(--surface); border-radius:var(--radius-pill); padding:4px; }
.offers-subtab { flex:1; padding:8px 10px; border:none; border-radius:var(--radius-pill); background:transparent; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; transition:background .15s var(--ease), color .15s var(--ease); font-family:inherit; }
.offers-subtab.active { background:var(--primary); color:#fff; }

.offers-list { display:flex; flex-direction:column; gap:12px; overflow-y:auto; flex:1; padding-inline-end:2px; }
.offers-empty { color:var(--muted-light); font-size:13.5px; text-align:center; padding:18px 6px; margin:auto 0; }

.offer-card { border:1px solid var(--border-light); border-radius:var(--radius); overflow:hidden; background:var(--surface); transition:box-shadow .15s var(--ease), transform .15s var(--ease); flex-shrink:0; }
.offer-card.clickable { cursor:pointer; }
.offer-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.offer-card-img { width:100%; height:150px; object-fit:cover; display:block; background:var(--border-light); }
.offer-card-body { padding:14px 16px; }
.offer-card-title { font-size:15px; font-weight:700; color:var(--text-strong); margin-bottom:4px; }
.offer-card-car { font-size:12.5px; color:var(--primary-dark); font-weight:600; margin-bottom:6px; }
.offer-card-category { font-size:12px; color:var(--muted); font-weight:600; margin-bottom:4px; }
.offer-card-desc { font-size:13px; color:var(--muted); margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.offer-card-footer { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:13px; }
.offer-card-price { font-weight:700; color:var(--success); }
.offer-card-garage { color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.offer-card-contact { display:block; margin-top:8px; font-size:13px; color:var(--primary); text-decoration:none; font-weight:600; }
.offer-card-contact:hover { text-decoration:underline; }

@media (max-width: 1300px) {
  .login-layout { max-width:1000px; grid-template-columns: minmax(260px,320px) minmax(340px,420px) minmax(260px,320px); }
}
@media (max-width: 1100px) {
  .login-layout { grid-template-columns:1fr; grid-template-areas:"bar" "box" "parts" "services"; max-width:460px; align-items:stretch; }
  .offers-panel { height:auto; min-height:0; max-height:380px; }
}
.login-box {
  position:relative; background:var(--card); padding:38px 36px; border-radius:var(--radius-lg);
  width:100%; max-width:370px; box-shadow:var(--shadow-lg); text-align:center;
  border:1px solid rgba(255,255,255,.6);
  animation: pop-in .35s var(--ease);
}
@keyframes pop-in { from { opacity:0; transform:translateY(10px) scale(.98); } to { opacity:1; transform:none; } }
.lang-toggle-btn { position:absolute; top:14px; inset-inline-end:14px; width:auto; margin:0 !important; background:transparent !important; border:1px solid var(--border); color:var(--muted) !important; padding:4px 10px; border-radius:var(--radius-pill); font-size:11px; font-weight:600; cursor:pointer; transition:background .15s var(--ease), color .15s var(--ease); }
.lang-toggle-btn:hover { background:var(--primary) !important; color:#fff !important; border-color:var(--primary); }
.user-box .lang-toggle-btn { position:static; background:#1f2937 !important; color:#cbd5e1 !important; border:1px solid #374151; padding:6px 12px; border-radius:var(--radius-sm); font-size:12px; }
.user-box .lang-toggle-btn:hover { background:#374151 !important; color:#fff !important; }
.login-box h1 { margin:0 0 4px; font-size:21px; letter-spacing:-.2px; }
.login-box .sub { color:var(--muted); margin:0 0 20px; font-size:13.5px; }
.login-box form { text-align:start; display:flex; flex-direction:column; gap:6px; }
.login-box label { font-size:12.5px; font-weight:600; color:var(--muted); margin-top:10px; }
.login-box input { padding:11px 12px; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-size:14px; transition:border-color .15s var(--ease), box-shadow .15s var(--ease); background:var(--surface); }
.login-box input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-ring); background:#fff; }
.login-box button[type=submit] { margin-top:18px; padding:12px; background:linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff; border:none; border-radius:var(--radius-sm); font-size:15px; font-weight:700; box-shadow:0 8px 20px rgba(37,99,235,.3); transition:transform .12s var(--ease), box-shadow .12s var(--ease), filter .12s var(--ease); }
.login-box button[type=submit]:hover { filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 10px 24px rgba(37,99,235,.38); }
.login-box button[type=submit]:active { transform:translateY(0); }
.hint { color:var(--muted-light); font-size:12px; margin-top:14px; }
.error-msg { color:var(--danger); font-size:13px; min-height:16px; font-weight:600; }

/* ===== التطبيق: الشريط العلوي ===== */
.app-screen { min-height:100vh; display:flex; flex-direction:column; }
.topbar {
  background:linear-gradient(180deg, #151b2c, #111827); color:#fff; display:flex; align-items:center;
  padding:10px 22px; min-height:58px; gap:22px; flex-wrap:wrap; position:sticky; top:0; z-index:70;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.brand { font-weight:700; white-space:nowrap; letter-spacing:-.2px; }
.main-nav { display:flex; gap:3px; flex:1; flex-wrap:wrap; }
.main-nav > button { background:none; border:none; color:#aeb7c4; padding:9px 14px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:500; white-space:nowrap; transition:background .15s var(--ease), color .15s var(--ease); }
.main-nav > button:hover { background:rgba(255,255,255,.08); color:#fff; }
.main-nav > button.active { background:var(--primary); color:#fff; box-shadow:0 2px 8px rgba(37,99,235,.4); }

.nav-group { position:relative; }
.nav-group-btn { background:none; border:none; color:#aeb7c4; padding:9px 14px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:500; white-space:nowrap; display:inline-flex; align-items:center; gap:5px; transition:background .15s var(--ease), color .15s var(--ease); }
.nav-group-btn::after { content:'▾'; font-size:9px; transition:transform .15s var(--ease); opacity:.8; }
.nav-group.open .nav-group-btn::after { transform:rotate(180deg); }
.nav-group-btn:hover { background:rgba(255,255,255,.08); color:#fff; }
.nav-group-btn.active { background:var(--primary); color:#fff; box-shadow:0 2px 8px rgba(37,99,235,.4); }
.nav-dropdown {
  display:none; position:absolute; top:calc(100% + 6px); inset-inline-start:0; background:#1c2435; border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius); padding:6px; min-width:200px; box-shadow:var(--shadow-lg); z-index:50; flex-direction:column; gap:1px;
}
.nav-group.open .nav-dropdown { display:flex; animation: pop-in .15s var(--ease); }
.nav-dropdown button { background:none; border:none; color:#c2c9d6; padding:9px 12px; border-radius:var(--radius-sm); font-size:13.5px; text-align:start; white-space:nowrap; transition:background .12s var(--ease), color .12s var(--ease); }
.nav-dropdown button:hover { background:rgba(255,255,255,.08); color:#fff; }
.nav-dropdown button.active { background:var(--primary); color:#fff; }
.user-box { display:flex; align-items:center; gap:10px; white-space:nowrap; }
.user-box button { background:rgba(255,255,255,.08); color:#fff; border:none; padding:7px 14px; border-radius:var(--radius-sm); font-size:12.5px; font-weight:600; transition:background .15s var(--ease); }
.user-box button:hover { background:rgba(255,255,255,.16); }

.content { padding:24px; max-width:1300px; width:100%; margin:0 auto; animation: fade-up .25s var(--ease); }
@keyframes fade-up { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

.page-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; flex-wrap:wrap; gap:10px; }
.page-header h2 { margin:0; font-size:19.5px; font-weight:700; letter-spacing:-.2px; }
.toolbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.toolbar input, .toolbar select { padding:8px 12px; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-size:13px; background:var(--card); transition:border-color .15s var(--ease), box-shadow .15s var(--ease); }
.toolbar input:focus, .toolbar select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-ring); }

/* ===== الأزرار ===== */
.btn { padding:9px 18px; border-radius:var(--radius-sm); border:none; font-size:13px; font-weight:600; transition:transform .1s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease), filter .15s var(--ease); letter-spacing:.1px; }
.btn:active { transform:translateY(1px); }
.btn-primary { background:linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff; box-shadow:0 2px 8px rgba(37,99,235,.28); }
.btn-primary:hover { filter:brightness(1.05); box-shadow:0 4px 12px rgba(37,99,235,.35); }
.btn-secondary { background:var(--surface); color:var(--text-strong); border:1.5px solid var(--border); }
.btn-secondary:hover { background:#eef1f5; border-color:#d7dce3; }
.btn-danger { background:var(--danger-bg); color:var(--danger); border:1.5px solid #fecaca; }
.btn-danger:hover { background:#fee2e2; }
.btn-sm { padding:6px 12px; font-size:12px; }
.btn:disabled { opacity:.6; cursor:not-allowed; transform:none !important; }

/* ===== الكروت/بطاقات المؤشرات ===== */
.cards-row { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:14px; margin-bottom:22px; }
.kpi-card { background:var(--card); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow); border:1px solid var(--border-light); border-inline-start:4px solid var(--primary); transition:transform .15s var(--ease), box-shadow .15s var(--ease); }
.kpi-card .label { color:var(--muted); font-size:12.5px; font-weight:600; }
.kpi-card .value { font-size:27px; font-weight:700; margin-top:6px; color:var(--text-strong); letter-spacing:-.3px; }
.kpi-card.danger { border-inline-start-color: var(--danger); }
.kpi-card.warning { border-inline-start-color: var(--warning); }
.kpi-card.success { border-inline-start-color: var(--success); }
.kpi-card.clickable { cursor:pointer; }
.kpi-card.clickable:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }

/* اختصارات سريعة في لوحة التحكم */
.shortcuts-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap:12px; margin-top:10px; }
.shortcut-btn { display:flex; flex-direction:column; align-items:center; gap:8px; background:var(--card); border:1.5px solid var(--border-light); border-radius:var(--radius); padding:18px 10px; font-size:13px; font-weight:600; color:var(--text); box-shadow:var(--shadow-sm); transition:transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease); }
.shortcut-btn:hover { background:var(--primary-light); border-color:var(--primary); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.shortcut-icon { font-size:27px; }

/* ===== الجداول ===== */
.table-wrap { background:var(--card); border-radius:var(--radius); overflow:auto; box-shadow:var(--shadow); border:1px solid var(--border-light); }
table { width:100%; border-collapse:collapse; font-size:13.5px; }
thead th { background:var(--surface); text-align:start; padding:13px 16px; color:var(--muted); font-weight:700; font-size:12.5px; border-bottom:1px solid var(--border); white-space:nowrap; position:sticky; top:0; }
tbody td { padding:12px 16px; border-bottom:1px solid var(--border-light); white-space:nowrap; color:var(--text); }
tbody tr { transition:background .1s var(--ease); }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover { background:var(--surface); }
tbody tr.clickable { cursor:pointer; }
.empty-row td { text-align:center; color:var(--muted-light); padding:40px; font-size:13.5px; }

.badge { display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:var(--radius-pill); font-size:11.5px; font-weight:700; }
.badge-gray { background:#f1f3f5; color:#4b5563; }
.badge-blue { background:#e0ecff; color:#1d4ed8; }
.badge-green { background:var(--success-bg); color:#15803d; }
.badge-yellow { background:var(--warning-bg); color:#b45309; }
.badge-red { background:var(--danger-bg); color:#b91c1c; }

/* ===== المودال ===== */
.modal-overlay { position:fixed; inset:0; background:rgba(15,23,42,.55); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px; animation: fade-in .15s var(--ease); }
@keyframes fade-in { from { opacity:0; } to { opacity:1; } }
.modal-box { background:#fff; border-radius:var(--radius-lg); width:100%; max-width:560px; max-height:90vh; overflow:auto; padding:26px; box-shadow:var(--shadow-lg); animation: pop-in .2s var(--ease); }
.modal-box h3 { margin-top:0; }
.modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.modal-head h3 { margin:0; font-size:17px; }
.modal-close-btn { background:transparent; border:none; font-size:18px; line-height:1; color:var(--muted); cursor:pointer; padding:5px 9px; border-radius:var(--radius-sm); flex-shrink:0; transition:background .12s var(--ease), color .12s var(--ease); }
.modal-close-btn:hover { background:var(--surface); color:var(--text-strong); }
.modal-box .form-row { display:flex; flex-direction:column; gap:5px; margin-bottom:13px; }
.modal-box label { font-size:12.5px; font-weight:600; color:var(--muted); }
.modal-box input, .modal-box select, .modal-box textarea { padding:10px 12px; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-size:14px; width:100%; background:var(--surface); transition:border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease); font-family:inherit; }
.modal-box input:focus, .modal-box select:focus, .modal-box textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-ring); background:#fff; }
.modal-box .two-col { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.modal-box select:disabled { opacity:.55; cursor:not-allowed; }
.modal-box .form-row select + input[type="text"] { margin-top:6px; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; padding-top:16px; border-top:1px solid var(--border-light); }

/* نتائج بحث العميل (اختيار سريع في نماذج المقايسة/أمر الشغل) */
.search-results-dropdown { position:relative; margin-top:5px; border:1px solid var(--border); border-radius:var(--radius-sm); max-height:220px; overflow:auto; background:#fff; box-shadow:var(--shadow-md); }
.search-result-item { padding:9px 12px; font-size:13.5px; cursor:pointer; border-bottom:1px solid var(--border-light); display:flex; align-items:center; gap:8px; flex-wrap:wrap; transition:background .1s var(--ease); }
.search-result-item:last-child { border-bottom:none; }
.search-result-item:hover { background:var(--primary-light); }
.search-result-item.search-result-empty { cursor:default; color:var(--muted); }
.search-result-item.search-result-empty:hover { background:transparent; }

/* لوحة إضافة عميل جديد + مركبته سريعًا من داخل نموذج المقايسة/أمر الشغل */
.quick-add-panel { margin-top:10px; padding:14px; border:1.5px dashed var(--border); border-radius:var(--radius-sm); background:var(--surface); }
.quick-add-panel .two-col { margin-bottom:0; }

.detail-grid { display:grid; grid-template-columns: 2fr 1fr; gap:16px; align-items:start; }
.detail-card { background:var(--card); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); border:1px solid var(--border-light); margin-bottom:16px; }
.detail-card h3 { margin-top:0; font-size:15.5px; font-weight:700; }
.info-list div { display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--border-light); font-size:13.5px; }
.info-list div:last-child { border-bottom:none; }
.info-list div span:first-child { color:var(--muted); }
.info-list div span:last-child { font-weight:600; color:var(--text-strong); text-align:end; }

.items-table input { width:100%; padding:7px 9px; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-size:13px; background:var(--surface); transition:border-color .15s var(--ease); }
.items-table input:focus { outline:none; border-color:var(--primary); background:#fff; }
.link-btn { background:none; border:none; color:var(--primary); text-decoration:underline; font-size:13px; padding:0; font-weight:600; }
.link-btn:hover { color:var(--primary-dark); }

/* مرفقات (صور/فيديوهات موثّقة) */
.attachments-list { display:flex; flex-direction:column; gap:8px; }
.attachment-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; background:var(--surface); border:1px solid var(--border-light); border-radius:var(--radius-sm); flex-wrap:wrap; font-size:13.5px; }

/* قائمة فنيين متعددة الاختيار (checkbox list) */
.tech-checklist { display:flex; flex-direction:column; gap:6px; max-height:180px; overflow:auto; border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px; background:var(--surface); }
.tech-checklist label { display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:400; color:var(--text); margin:0; }

@media (max-width: 900px) {
  html, body { max-width:100%; overflow-x:hidden; }
  .detail-grid { grid-template-columns: 1fr; }

  /* الشريط العلوي على الموبايل: يسمح بالالتفاف بدل التمدد أفقيًا خارج الشاشة */
  .topbar { position:relative; padding:10px 14px; gap:6px 10px; }
  .brand { font-size:14px; }

  /* القائمة الرئيسية: لوحة منسدلة كاملة العرض تُفتح بزرار ☰ بدل ما تختفي تمامًا */
  .nav-toggle-btn { display:inline-flex; align-items:center; justify-content:center; order:1; }
  .main-nav {
    display:none;
    position:absolute; top:100%; inset-inline-start:0; inset-inline-end:0;
    background:#151b2c; flex-direction:column; flex-wrap:nowrap;
    padding:8px; gap:2px; box-shadow:var(--shadow-lg);
    z-index:60; max-height:80vh; overflow:auto;
  }
  .main-nav.open { display:flex; animation: fade-in .12s var(--ease); }
  .nav-group, .nav-group-btn { width:100%; }
  .nav-group-btn { justify-content:space-between; }
  .nav-dropdown { position:static; box-shadow:none; width:100%; margin-top:2px; min-width:0; background:rgba(255,255,255,.04); }

  /* صندوق المستخدم: يلتف على أكثر من سطر بدل ما يدفع الصفحة عرضيًا */
  .user-box { order:2; flex-wrap:wrap; white-space:normal; gap:6px; font-size:12px; width:100%; justify-content:flex-end; }
  .user-box button, .user-box .lang-toggle-btn { font-size:11.5px; padding:6px 10px; white-space:nowrap; }
  #user-name { font-size:12px; font-weight:600; }
  .org-badge { font-size:11px; padding:4px 8px; white-space:normal; }

  .content { padding:16px; }
  .modal-box { padding:20px; }
  .modal-box .two-col { grid-template-columns:1fr; }
}

/* تبويبات الدخول / التسجيل */
.auth-tabs { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:18px; background:var(--surface); border-radius:var(--radius-sm); padding:4px; }
.auth-tabs .auth-tab { flex:1; min-width:46%; background:none; border:none; padding:9px; border-radius:7px; font-size:12.5px; color:var(--muted); font-weight:600; transition:background .15s var(--ease), color .15s var(--ease); }
.auth-tabs .auth-tab.active { background:#fff; color:var(--primary); box-shadow:var(--shadow-sm); }
.auth-form { text-align:start; display:flex; flex-direction:column; gap:6px; }
.auth-form label { font-size:12.5px; font-weight:600; color:var(--muted); margin-top:10px; }
.auth-form input { padding:11px 12px; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-size:14px; background:var(--surface); transition:border-color .15s var(--ease), box-shadow .15s var(--ease); }
.auth-form input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-ring); background:#fff; }
.auth-form button[type=submit] { margin-top:18px; padding:12px; background:linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff; border:none; border-radius:var(--radius-sm); font-size:15px; font-weight:700; box-shadow:0 8px 20px rgba(37,99,235,.3); transition:transform .12s var(--ease), filter .12s var(--ease); }
.auth-form button[type=submit]:hover { filter:brightness(1.06); transform:translateY(-1px); }

/* شارة المنظمة وحالة الاشتراك في الشريط العلوي */
.org-badge { background:rgba(255,255,255,.1); padding:5px 13px; border-radius:var(--radius-pill); font-size:12px; font-weight:600; }
.org-badge.trial { background:#78350f; color:#fde68a; }
.org-badge.warn { background:#7f1d1d; color:#fecaca; }

.subscription-banner { background:var(--warning-bg); color:#92400e; border:1px solid #fde68a; border-radius:var(--radius); padding:12px 18px; margin-bottom:18px; font-size:13.5px; font-weight:500; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }

.btn-secondary-topbar { background:rgba(255,255,255,.08); color:#cbd5e1; border:1px solid rgba(255,255,255,.12); padding:7px 13px; border-radius:var(--radius-sm); font-size:12.5px; font-weight:600; transition:background .15s var(--ease); }
.btn-secondary-topbar:hover { background:rgba(255,255,255,.16); color:#fff; }

/* زرار قائمة الموبايل (☰) - مخفي على الشاشات الكبيرة، يظهر فقط تحت 900px */
.nav-toggle-btn { display:none; background:none; border:none; color:#fff; font-size:22px; line-height:1; padding:6px 10px; border-radius:var(--radius-sm); cursor:pointer; transition:background .15s var(--ease); }
.nav-toggle-btn:hover { background:rgba(255,255,255,.1); }