/* نظام إدارة المقاولات — CSS نهائي */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'Cairo','Segoe UI',Tahoma,sans-serif;background:#f1f5f9;color:#0f172a}

/* ════════════════════════════════════════════
   LAYOUT — الحل الصحيح للـ RTL/LTR sidebar
   
   #app يبقى direction:ltr دائماً حتى يعمل
   flex row/row-reverse بشكل صحيح.
   
   النص داخل #content يأخذ dir من html.
   ════════════════════════════════════════════ */
#app{
  display:flex;
  height:100vh;
  overflow:hidden;
  direction:ltr;  /* مهم: يجعل row-reverse يعمل صح */
  flex-direction:row-reverse; /* افتراضي: عربي = sidebar يمين */
}

/* عندما يكون المستخدم يتبدل للإنجليزي — JS يضيف class هذا */
#app.ltr{flex-direction:row}

/* ════════════════════════════════════════════ */

/* SIDEBAR */
#sidebar{
  width:242px;min-width:242px;
  background:linear-gradient(180deg,#0f172a,#1e293b);
  color:#fff;display:flex;flex-direction:column;
  overflow:hidden;z-index:100;transition:width .25s;
  direction:rtl; /* sidebar دائماً عربي التخطيط */
}
#sidebar.collapsed{width:0;min-width:0}

/* ظل حسب الاتجاه */
#app:not(.ltr) #sidebar{box-shadow:-3px 0 18px rgba(0,0,0,.3)}
#app.ltr #sidebar{box-shadow:3px 0 18px rgba(0,0,0,.3);direction:ltr}

.sb-logo{padding:18px 16px 14px;border-bottom:1px solid rgba(255,255,255,.08);white-space:nowrap;overflow:hidden}
.sb-logo h2{font-size:14px;font-weight:800}
.sb-logo small{font-size:10px;color:#64748b}
.sb-user{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.04);display:flex;align-items:center;gap:10px}
.sb-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.sb-info{min-width:0}
.sb-name{font-size:13px;font-weight:700;color:#f1f5f9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-role{font-size:10px;color:#64748b}
#sb-nav{flex:1;overflow-y:auto;padding:8px 7px}
.nav-btn[draggable="true"]{cursor:grab}
.nav-btn[draggable="true"]:active{cursor:grabbing}
.nav-btn.drag-over{background:rgba(37,99,235,.25)!important;outline:2px dashed #60a5fa;border-radius:10px;transform:scale(1.02)}
.nav-btn{width:100%;padding:9px 12px;border-radius:10px;border:none;cursor:pointer;background:transparent;color:#94a3b8;display:flex;align-items:center;gap:9px;font-size:13px;font-family:inherit;font-weight:500;margin-bottom:2px;transition:all .15s;white-space:nowrap;text-align:right}
#app.ltr .nav-btn{text-align:left}
.nav-btn:hover{background:rgba(255,255,255,.07);color:#e2e8f0}
.nav-btn.active{background:#2563eb;color:#fff;font-weight:700}
.nav-icon{font-size:17px;flex-shrink:0}
.sb-foot{padding:8px 7px 12px;border-top:1px solid rgba(255,255,255,.08)}
.lang-btn{width:100%;padding:7px 12px;border-radius:9px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:#94a3b8;cursor:pointer;font-family:inherit;font-size:12px;font-weight:700;margin-bottom:6px;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .15s}
.lang-btn:hover{background:rgba(255,255,255,.12);color:#fff}
.logout-btn{width:100%;padding:9px 12px;border-radius:10px;border:none;background:rgba(239,68,68,.12);color:#fca5a5;cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px;transition:all .15s}
.logout-btn:hover{background:#ef4444;color:#fff}

/* MAIN */
#main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}

/* CONTENT — يأخذ اتجاهه من html */
#content{flex:1;overflow-y:auto;padding:22px;direction:inherit}
html[dir="rtl"] #content{direction:rtl;text-align:right}
html[dir="ltr"]  #content{direction:ltr;text-align:left}

/* TOPBAR */
#topbar{height:56px;padding:0 20px;background:#fff;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e2e8f0;box-shadow:0 1px 3px rgba(0,0,0,.05);flex-shrink:0;z-index:50;direction:ltr}
html[dir="rtl"] #topbar{direction:rtl}
#topbar-title{font-size:15px;font-weight:800;color:#0f172a;margin:0}
.topbar-right{display:flex;align-items:center;gap:8px}
.saving-badge{background:#f0fdf4;border:1px solid #86efac;border-radius:20px;padding:3px 11px;font-size:11px;color:#16a34a;display:none;align-items:center;gap:4px}
.saving-badge.show{display:flex}
.alert-badge-btn{background:#fef3c7;border:1px solid #fbbf24;border-radius:20px;padding:3px 11px;font-size:12px;color:#92400e;font-weight:700;cursor:pointer;display:none}
.alert-badge-btn.show{display:flex;align-items:center;gap:4px}
.prof-wrap{position:relative}
.prof-btn{display:flex;align-items:center;gap:8px;padding:6px 14px;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:22px;cursor:pointer;font-family:inherit;transition:all .15s}
.prof-btn:hover{border-color:#94a3b8;background:#f1f5f9}
.prof-btn-name{font-size:12px;font-weight:700;color:#0f172a;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prof-dd{position:fixed;top:56px;left:0;right:0;margin:8px 12px;background:#fff;border-radius:16px;box-shadow:0 8px 40px rgba(0,0,0,.18);border:1px solid #e2e8f0;z-index:9999;display:none;overflow:hidden;direction:rtl;max-width:320px}
html[dir="rtl"] .prof-dd{right:12px;left:auto;margin:0}
html[dir="ltr"] .prof-dd{left:12px;right:auto;margin:0;direction:ltr}
.prof-dd.open{display:block;animation:ddSlide .2s ease}
@keyframes ddSlide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.prof-dd-head{padding:14px 16px;border-bottom:1px solid #f0f0f0;background:linear-gradient(135deg,#f8fafc,#fff)}
.prof-dd-name{font-size:14px;font-weight:800}
.prof-dd-role{font-size:12px;color:#64748b;margin-top:2px}
.prof-dd-body{padding:10px}

/* BOTTOM NAV */







/* MODAL */
.moverlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:999;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;transition:opacity .2s;pointer-events:none}
.moverlay.open{opacity:1;pointer-events:all}
.moverlay.open .mbox{transform:translateY(0);opacity:1}
.mbox{background:#fff;border-radius:18px;width:100%;max-width:640px;max-height:92vh;overflow-y:auto;box-shadow:0 24px 60px rgba(0,0,0,.25);transform:translateY(20px);opacity:0;transition:all .2s;margin:auto}
.mhead{padding:16px 20px;border-bottom:1px solid #f0f0f0;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:#fff;border-radius:18px 18px 0 0;z-index:1}
html[dir="rtl"] .mhead{direction:rtl}
html[dir="ltr"] .mhead{direction:ltr}
.mhead h3{font-size:16px;font-weight:800}
.mbody{padding:20px}
html[dir="rtl"] .mbody{direction:rtl;text-align:right}
html[dir="ltr"] .mbody{direction:ltr;text-align:left}
.mclose{background:#f3f4f6;border:none;border-radius:8px;width:32px;height:32px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* CARDS */
.card{background:#fff;border-radius:14px;border:1px solid #e2e8f0;padding:18px;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.card-title{font-size:15px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:14px;margin-bottom:22px}
.stat-card{background:#fff;border-radius:13px;border:1px solid #e2e8f0;padding:16px;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.stat-lbl{font-size:11px;color:#64748b;margin-bottom:4px}
.stat-val{font-size:21px;font-weight:900}
.stat-sub{font-size:11px;color:#94a3b8;margin-top:3px}

/* TABLES */
.table-wrap{overflow-x:auto;border-radius:12px;border:1px solid #e2e8f0}
table.dt{width:100%;border-collapse:collapse;font-size:13px}
table.dt thead tr{background:#f8fafc;border-bottom:2px solid #e2e8f0}
table.dt th{padding:11px 14px;font-weight:700;color:#374151;white-space:nowrap}
html[dir="rtl"] table.dt th{text-align:right}
html[dir="ltr"] table.dt th{text-align:left}
table.dt tbody tr{background:#fff;transition:background .1s}
table.dt tbody tr:nth-child(even){background:#fafafa}
table.dt tbody tr:hover{background:#eff6ff}
table.dt td{padding:11px 14px;border-bottom:1px solid #f0f0f0;vertical-align:middle;line-height:1.5}
html[dir="rtl"] table.dt td{text-align:right}
html[dir="ltr"] table.dt td{text-align:left}

/* BADGES */
.badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:12px;font-weight:700;white-space:nowrap}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:5px;padding:9px 18px;border:none;border-radius:10px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:opacity .15s;white-space:nowrap}
.btn:hover{opacity:.85}.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:#1d4ed8;color:#fff}
.btn-success{background:#16a34a;color:#fff}
.btn-danger{background:#dc2626;color:#fff}
.btn-warn{background:#d97706;color:#fff}
.btn-ghost{background:#f1f5f9;color:#374151}
.btn-sm{padding:5px 12px;font-size:12px}
.btn-full{width:100%;justify-content:center}

/* PAGE HEADER */
.ph{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:10px}
.ph h2{font-size:20px;font-weight:800}

/* FORMS */
.fg{margin-bottom:14px}
.fl{display:block;font-weight:700;font-size:13px;color:#374151;margin-bottom:5px}
.fi,.fs,.ft{width:100%;padding:9px 13px;border:1.5px solid #e2e8f0;border-radius:10px;font-size:14px;font-family:inherit;background:#f8fafc;outline:none;transition:border-color .15s;color:#0f172a}
html[dir="rtl"] .fi,html[dir="rtl"] .fs,html[dir="rtl"] .ft{text-align:right}
html[dir="ltr"] .fi,html[dir="ltr"] .fs,html[dir="ltr"] .ft{text-align:left}
.fi:focus,.fs:focus,.ft:focus{border-color:#2563eb;background:#fff}
.ft{resize:vertical;min-height:80px}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ALERTS */
.alert{border-radius:12px;padding:12px 16px;margin-bottom:14px;font-size:13px;line-height:1.6}
.alert-warn{background:#fef3c7;border:1px solid #fbbf24;color:#92400e}
.alert-danger{background:#fef2f2;border:1px solid #fca5a5;color:#dc2626}
.alert-success{background:#f0fdf4;border:1px solid #86efac;color:#166534}
.alert-info{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af}

/* PROGRESS */
.pbar{background:#e2e8f0;border-radius:6px;height:8px;overflow:hidden}
.pfill{height:8px;border-radius:6px;transition:width .5s}

/* RESPONSIVE */
@media(max-width:768px){
  #sidebar{display:none!important}
  
  #content{padding:14px;padding-bottom:74px}
  .stat-grid{grid-template-columns:1fr 1fr}
  .fr{grid-template-columns:1fr}
  .mbox{max-width:100%;border-radius:18px 18px 0 0;position:fixed;bottom:0;left:0;right:0;max-height:92vh;margin:0}
  .moverlay{align-items:flex-end;padding:0}
  table.dt thead{display:none}
  table.dt tbody tr{display:block;margin-bottom:10px;border:1px solid #e2e8f0;border-radius:12px;padding:12px;background:#fff}
  table.dt td{display:flex;justify-content:space-between;align-items:flex-start;padding:6px 0;border-bottom:1px solid #f8f8f8;font-size:13px}
  table.dt td:last-child{border-bottom:none}
  table.dt td::before{content:attr(data-label);font-weight:700;color:#9ca3af;font-size:11px;flex-shrink:0;max-width:45%}
  html[dir="rtl"] table.dt td::before{margin-left:10px}
  html[dir="ltr"] table.dt td::before{margin-right:10px}
  .ph h2{font-size:17px}
  .hide-mobile{display:none!important}
}

/* ════════════════════════════════════════════
   MOBILE IMPROVEMENTS — تحسينات الهاتف
   ════════════════════════════════════════════ */

/* توافق عام */
img { max-width: 100%; }
input, select, textarea, button { -webkit-appearance: none; appearance: none; }
input[type="date"], input[type="number"] { -webkit-appearance: none; }

/* Bottom nav أكبر وأوضح */
@media(max-width:768px){

  /* الشريط السفلي */
  
  .bnav-btn { min-width: 56px; padding: 4px 6px; font-size: 9px; }
  .bnav-icon { font-size: 22px; }

  /* الـ topbar */
  #topbar { height: 52px; padding: 0 12px; }
  #topbar-title { font-size: 14px; }
  .topbar-right { gap: 5px; }
  .prof-btn { padding: 5px 8px; border-radius: 50%; width: 38px; height: 38px; justify-content: center; }
  .prof-btn-name { display: none; }
  .prof-dd { left: auto !important; right: 8px !important; left: 8px !important; margin: 0 !important; max-width: calc(100vw - 16px) !important; }
  .alert-badge-btn { font-size: 11px; padding: 3px 8px; }

  /* المحتوى */
  #content { padding: 12px; padding-bottom: 80px; }

  /* البطاقات */
  .card { padding: 14px; border-radius: 12px; }
  .card-title { font-size: 14px; margin-bottom: 12px; }

  /* الأزرار */
  .btn { padding: 8px 14px; font-size: 13px; }
  .btn-sm { padding: 5px 10px; font-size: 11px; }
  .ph { margin-bottom: 14px; }
  .ph h2 { font-size: 16px; }
  .ph .btn { padding: 8px 14px; font-size: 13px; }

  /* الإحصائيات */
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
  .stat-card { padding: 12px 10px; border-radius: 11px; }
  .stat-val { font-size: 18px; }

  /* الجداول على الهاتف */
  .table-wrap { border-radius: 10px; }

  /* الـ modal على الهاتف */
  .mbox { max-height: 88vh; }
  .mhead { padding: 14px 16px; }
  .mhead h3 { font-size: 15px; }
  .mbody { padding: 14px 16px; }

  /* الفورم */
  .fi, .fs, .ft { font-size: 16px; padding: 10px 12px; } /* 16px يمنع zoom في iOS */
  .fg { margin-bottom: 12px; }
  .fl { font-size: 12px; margin-bottom: 4px; }
  .fr { grid-template-columns: 1fr; gap: 0; }

  /* الـ page header في الموبايل */
  .ph { flex-direction: row; align-items: center; gap: 8px; }

  /* بطاقات العقود والتقارير */
  div[style*="grid-template-columns:repeat"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* إصلاح الأزرار المتراصة */
  div[style*="display:flex"][style*="gap"] {
    flex-wrap: wrap;
  }

  /* الـ modal يفتح من الأسفل */
  .moverlay { align-items: flex-end; padding: 0; }
  .mbox {
    border-radius: 20px 20px 0 0 !important;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    max-height: 90vh;
    margin: 0;
    transform: translateY(100%);
  }
  .moverlay.open .mbox { transform: translateY(0); }

  /* إخفاء عناصر كبيرة لا تناسب الهاتف */
  .hide-mobile { display: none !important; }

  /* الـ select افضل على الهاتف */
  .fs { 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%236b7280' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 10px center;
    padding-left: 30px;
  }
  html[dir="rtl"] .fs {
    background-position: right 10px center;
    padding-right: 30px;
    padding-left: 12px;
  }

  /* scrollbar أنحف */
  ::-webkit-scrollbar { width: 4px; height: 4px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
}

/* iPhone notch safe area */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media(max-width:768px){
    
    #content { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  }
}

/* تابلت */
@media(min-width:769px) and (max-width:1024px){
  #sidebar { width: 200px; min-width: 200px; }
  .nav-btn { font-size: 12px; padding: 8px 10px; }
  #content { padding: 16px; }
  .fr { grid-template-columns: 1fr 1fr; }
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── زر المستخدم والقائمة المنسدلة ── */
.prof-wrap{position:relative}
.prof-btn{display:flex;align-items:center;gap:7px;padding:5px 12px 5px 10px;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:22px;cursor:pointer;font-family:inherit;transition:all .15s}
.prof-btn:hover{border-color:#94a3b8;background:#f1f5f9}
.prof-av{width:28px;height:28px;background:#1e3a5f;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.prof-btn-name{font-size:12px;font-weight:700;color:#0f172a;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prof-dd{position:absolute;top:calc(100% + 8px);background:#fff;border-radius:16px;box-shadow:0 8px 40px rgba(0,0,0,.15);border:1px solid #e2e8f0;min-width:220px;z-index:9999;display:none;overflow:hidden;direction:rtl}
html[dir="ltr"] .prof-dd{direction:ltr;left:0}
html[dir="rtl"] .prof-dd{right:0}
.prof-dd.open{display:block;animation:ddIn .15s ease}
@keyframes ddIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.prof-dd-head{padding:14px 16px;border-bottom:1px solid #f0f0f0;background:linear-gradient(135deg,#f8fafc,#fff);display:flex;align-items:center;gap:10px}
.prof-dd-av{width:38px;height:38px;background:#1e3a5f;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.prof-dd-name{font-size:14px;font-weight:800}
.prof-dd-role{font-size:11px;color:#64748b;margin-top:2px}
.prof-dd-body{padding:8px}
.prof-dd-item{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;background:transparent;border:none;border-radius:10px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;color:#374151;text-align:right;transition:background .12s}
.prof-dd-item:hover{background:#f8fafc}
.prof-dd-logout{color:#dc2626!important}
.prof-dd-logout:hover{background:#fef2f2!important}

/* ── زر المستخدم على الهاتف ── */
@media(max-width:768px){
  /* الزر — دائري صغير */
  .prof-btn{
    padding:0;
    width:38px;height:38px;
    border-radius:50%;
    border:none;
    background:#f1f5f9;
    display:flex;align-items:center;justify-content:center;
  }
  .prof-btn-name{display:none !important}

  /* القائمة — تنزل من الأعلى بعرض كامل */
  .prof-dd{
    position:fixed;
    top:58px;
    right:8px !important;
    left:8px !important;
    width:calc(100% - 16px) !important;
    max-width:420px;
    margin:0 auto;
    border-radius:18px;
    box-shadow:0 12px 40px rgba(0,0,0,.18);
  }

  /* RTL — تنبثق من اليمين */
  html[dir="rtl"] .prof-dd{
    right:8px !important;
    left:auto !important;
    width:calc(100% - 16px) !important;
    text-align:right;
  }
  /* LTR — تنبثق من اليسار */
  html[dir="ltr"] .prof-dd{
    left:8px !important;
    right:auto !important;
    width:calc(100% - 16px) !important;
    text-align:left;
  }

  .prof-dd-head{
    padding:16px;
    display:flex;
    align-items:center;
    gap:12px;
  }
  .prof-dd-av{
    width:44px;height:44px;
    font-size:22px;
    flex-shrink:0;
  }
  .prof-dd-name{font-size:15px}
  .prof-dd-item{
    padding:14px 16px;
    font-size:14px;
    border-radius:12px;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .prof-dd-logout{
    margin-top:4px;
    background:#fef2f2 !important;
  }
}




/* عند RTL — البداية من اليمين */

/* العربي: عكس ترتيب الأزرار */



/* ══ زر المستخدم والقائمة — يطابق الصورة ══ */

/* الزر الدائري في الـ topbar */
.prof-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  border: 2.5px solid #e2e8f0;
  background: #fff;
  cursor: pointer;
  font-size: 22px;
  transition: border-color .15s;
}
.prof-btn:hover { border-color: #94a3b8; }
.prof-btn-name { display: none; }

/* القائمة المنسدلة */
.prof-dd {
  position: fixed;
  top: 60px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.15);
  border: 1px solid #e2e8f0;
  z-index: 9999;
  display: none;
  overflow: hidden;
  min-width: 260px;
}
html[dir="rtl"] .prof-dd { right: 10px; left: auto; }
html[dir="ltr"] .prof-dd { left: 10px; right: auto; }

.prof-dd.open { display: block; animation: ddIn .18s ease; }
@keyframes ddIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }

/* رأس القائمة — صورة + اسم + دور */
.prof-dd-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f8fafc;
  border-bottom: 1px solid #f0f0f0;
  direction: inherit;
}
.prof-dd-av {
  width: 46px; height: 46px;
  background: #1e3a5f;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}
.prof-dd-name { font-size: 15px; font-weight: 800; color: #0f172a; }
.prof-dd-role { font-size: 12px; color: #7c3aed; margin-top: 2px; font-weight: 600; }

/* عناصر القائمة */
.prof-dd-body { padding: 8px; }
.prof-dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  transition: background .12s;
}
html[dir="rtl"] .prof-dd-item { text-align: right; flex-direction: row-reverse; }
html[dir="ltr"] .prof-dd-item { text-align: left; flex-direction: row; }
.prof-dd-item:hover { background: #f8fafc; }
.prof-dd-logout { color: #dc2626 !important; }
.prof-dd-logout:hover { background: #fef2f2 !important; }

/* على الهاتف — القائمة بعرض أكبر */
@media(max-width: 768px) {
  .prof-dd {
    right: 8px !important;
    left: 8px !important;
    min-width: unset;
    border-radius: 18px;
  }
  html[dir="rtl"] .prof-dd { right: 8px !important; left: 8px !important; }
  html[dir="ltr"] .prof-dd { left: 8px !important; right: 8px !important; }
  .prof-dd-item { padding: 14px 16px; font-size: 15px; }
}


/* ════════════════════════════════════
   BOTTOM NAV — بناء من الصفر
   ════════════════════════════════════ */

#bottom-nav::-webkit-scrollbar { display: none; }

/* bnav مجرد wrapper flex داخلي */

/* زر bnav */
.bnav-btn:active { background: #f1f5f9; }
.bnav-btn.active .bnav-icon {
  filter: drop-shadow(0 0 4px rgba(37,99,235,.4));
}

/* safe area لـ iPhone */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  
}

/* إظهار على الهاتف */
@media (max-width: 768px) {
  
  #sidebar { display: none !important; }
  #content { padding-bottom: 76px; }
}






/* ════ BOTTOM NAV — Original Working Version ════ */
#bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;height:62px;background:#fff;border-top:1px solid #e2e8f0;z-index:500;overflow-x:scroll;overflow-y:hidden;-webkit-overflow-scrolling:touch;direction:ltr;touch-action:pan-x;-ms-overflow-style:-ms-autohiding-scrollbar;scrollbar-width:none}
#bottom-nav::-webkit-scrollbar{display:none}
.bnav{display:-webkit-box;display:-webkit-flex;display:flex;height:100%;width:max-content;min-width:100%;-webkit-flex-shrink:0;flex-shrink:0}
.bnav-btn{-webkit-flex:0 0 auto;flex:0 0 auto;min-width:66px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;gap:2px;border:none;background:transparent;cursor:pointer;padding:6px 8px;font-family:inherit;color:#6b7280;font-size:9px;font-weight:500;white-space:nowrap;transition:color .15s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.bnav-btn.active{color:#2563eb;font-weight:700}
.bnav-btn.active .bnav-icon{transform:scale(1.1)}
.bnav-icon{font-size:21px;line-height:1;display:block;margin-bottom:1px}
@media(max-width:768px){
  #bottom-nav{display:block}
  #sidebar{display:none!important}
  #content{padding-bottom:70px}
}
@supports(padding-bottom:env(safe-area-inset-bottom)){
  @media(max-width:768px){
    #bottom-nav{height:calc(62px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}
    #content{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  }
}