/* ==========================================================================
   Rovy Foods — الشريط العلوي (Topbar) + قائمة المستخدم
   ========================================================================== */
.topbar.tb2{
  --ink:#3a2417; --gold:#b8925a; --gold-2:#d9bd8c; --ln:#ebe3d7;
  height:76px; padding:0 24px; gap:12px; display:flex; align-items:center;
  background:rgba(250,247,242,.92)!important; border-bottom:1px solid var(--ln);
  backdrop-filter:saturate(1.3) blur(12px)!important; -webkit-backdrop-filter:saturate(1.3) blur(12px)!important;
}
.tb2 .tb-menu,.tb2 .tb-brand,.tb2 .tb-sbtn{display:none}

/* زرار أيقونة */
.tb2 .tb-ib{position:relative; width:40px; height:40px; flex:none; border:0; border-radius:12px; background:transparent; color:#6b5644; display:grid; place-items:center; cursor:pointer; transition:background .15s,color .15s}
.tb2 .tb-ib:hover{background:#f3ece2; color:var(--ink)}
.tb2 .tb-ib svg.i{width:20px; height:20px}
.tb2 .tb-ib .dot{position:absolute; top:3px; left:3px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:#c0473a; color:#fff;
  font:700 10.5px/18px var(--font); text-align:center; box-shadow:0 0 0 2px #fff; display:block}
.tb2 .tb-ib .dot.hidden{display:none}

/* عنوان الصفحة */
.tb2 .tb-title{display:flex; flex-direction:column; justify-content:center; min-width:0; flex:none; max-width:260px}
.tb2 #top-t{font:600 17px/1.3 'Readex Pro',var(--font); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tb2 .crumbs{font-size:11.5px; color:#9a8a78; display:flex; gap:4px; white-space:nowrap}
.tb2 .crumbs b{display:none}

/* البحث */
.tb2 .tb-search{position:relative; flex:1; max-width:520px; margin-inline-start:12px}
.tb2 .tb-search > svg.i{position:absolute; right:14px; top:50%; transform:translateY(-50%); color:#a8957f; width:18px; height:18px; pointer-events:none}
.tb2 .tb-search input{width:100%!important; height:46px; border-radius:14px; border:1px solid var(--ln); background:#fff; padding:0 44px 0 44px; font-size:13.5px; color:var(--ink);
  box-shadow:0 1px 2px rgba(36,22,13,.04); transition:border-color .15s,box-shadow .15s}
.tb2 .tb-search input::placeholder{color:#ad9c88}
.tb2 .tb-search input:focus{border-color:var(--gold)!important; box-shadow:0 0 0 4px rgba(184,146,90,.14)!important; outline:0}
.tb2 .tb-search .kbd-hint{position:absolute; left:10px; top:50%; transform:translateY(-50%); width:26px; height:26px; display:grid; place-items:center; border-radius:8px; border:1px solid var(--ln); background:#faf6f0; color:#9a8a78; font-size:12px}
.tb2 .tb-search .search-results{top:54px}

/* الساعة */
.tb2 .tb-clock{display:flex; align-items:center; gap:10px; height:50px; padding:0 8px 0 14px; margin-inline-start:auto; border:1px solid var(--ln); border-radius:15px; background:#fff; flex:none}
.tb2 .tb-ck-i{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:#f6efe4; color:#8a5a2b}
.tb2 .tb-ck-i svg.i{width:17px; height:17px}
.tb2 .tb-ck-t{display:flex; flex-direction:column; line-height:1.25}
.tb2 .tb-ck-t b{font-size:12.5px; color:var(--ink)}
.tb2 .tb-ck-t small{font-size:11px; color:#9a8a78}
.tb2 .tb-ck-h{font:600 14px 'Readex Pro',var(--font); color:var(--ink); padding-inline-start:10px; border-inline-start:1px solid var(--ln)}

/* مجموعة الأزرار */
.tb2 .tb-pill{display:flex; align-items:center; gap:4px; height:50px; padding:0 5px; border:1px solid var(--ln); border-radius:15px; background:#fff; flex:none}
.tb2 .tb-new{display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 14px; border:0; border-radius:11px; cursor:pointer;
  font:600 13.5px var(--font); color:#fff; background:linear-gradient(180deg,#4a2e1b,#2a1a10); box-shadow:0 8px 16px -10px rgba(36,22,13,.9); transition:filter .15s,transform .12s}
.tb2 .tb-new svg.i{width:17px; height:17px; color:var(--gold-2); stroke-width:2.2}
.tb2 .tb-new:hover{filter:brightness(1.15)}
.tb2 .tb-new:active{transform:translateY(1px)}

/* المستخدم */
.tb2 .tb-user{position:relative; flex:none}
.tb2 .tb-uc{display:flex; align-items:center; gap:10px; height:50px; padding:0 8px 0 12px; border:1px solid var(--ln); border-radius:15px; background:#fff; cursor:pointer; font-family:inherit; transition:border-color .15s,box-shadow .15s}
.tb2 .tb-uc:hover,.tb2 .tb-uc[aria-expanded="true"]{border-color:#d9c9b2; box-shadow:0 8px 20px -14px rgba(36,22,13,.5)}
.tb-av{position:relative; width:36px; height:36px; flex:none; border-radius:50%; display:grid; place-items:center; font:700 13px var(--font); color:#fff;
  background:linear-gradient(145deg,#b8925a,#5a3a22); box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(184,146,90,.45)}
.tb-av.lg{width:46px; height:46px; font-size:16px}
.tb-on{position:absolute; bottom:-1px; left:-1px; width:11px; height:11px; border-radius:50%; background:#2f9e6a; box-shadow:0 0 0 2px #fff}
.tb2 .tb-un{display:flex; flex-direction:column; align-items:flex-start; line-height:1.25; max-width:140px}
.tb2 .tb-un b{font-size:13px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.tb2 .tb-un small{font-size:11px; color:#9a8a78}
.tb2 .tb-chev{width:16px; height:16px; color:#a8957f; transform:rotate(-90deg); transition:transform .2s}
.tb2 .tb-uc[aria-expanded="true"] .tb-chev{transform:rotate(90deg)}

.tb-um{position:absolute; top:calc(100% + 10px); left:0; z-index:80; width:290px; padding:8px; border-radius:18px; background:#fff; border:1px solid #ebe3d7;
  box-shadow:0 30px 60px -24px rgba(36,22,13,.45),0 2px 6px rgba(36,22,13,.06); animation:tbIn .16s cubic-bezier(.2,.8,.2,1); transform-origin:top left}
.tb-um[hidden]{display:none}
@keyframes tbIn{from{opacity:0; transform:translateY(-6px) scale(.98)}to{opacity:1; transform:none}}
.tb-um-h{display:flex; align-items:center; gap:12px; padding:12px; margin-bottom:6px; border-radius:13px; background:linear-gradient(135deg,#f8f2e9,#f2e8da)}
.tb-um-h > div{min-width:0; display:flex; flex-direction:column; line-height:1.35}
.tb-um-h b{font-size:14px; color:#3a2417; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tb-um-h small{font-size:12px; color:#8a7764; direction:ltr; text-align:right}
.tb-role{align-self:flex-start; margin-top:4px; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px; background:#3a2417; color:#d9bd8c}
.tb-um > a,.tb-um > button{display:flex; align-items:center; gap:11px; width:100%; padding:10px 12px; border:0; border-radius:11px; background:none; cursor:pointer;
  font:600 13.5px var(--font); color:#4a3a2c; text-decoration:none; text-align:start}
.tb-um > a:hover,.tb-um > button:hover{background:#f6efe4; color:#3a2417}
.tb-um svg.i{width:18px; height:18px; color:#a8814a}
.tb-um > a > span,.tb-um > button > span{flex:1; min-width:0}
.tb-um .tb-av{flex:none}
.tb-um-n{font-style:normal; font-size:11px; font-weight:700; min-width:22px; height:20px; padding:0 6px; border-radius:10px; background:#fbe9e6; color:#c0473a; display:grid; place-items:center}
.tb-um-sep{height:1px; background:#f0e8dc; margin:6px 4px}
.tb-um .danger,.tb-um .danger svg.i{color:#c0473a}
.tb-um .danger:hover{background:#fcebe8}

/* ---------- لابتوب صغير ---------- */
@media (max-width:1280px){ .tb2 .tb-clock{display:none} .tb2 .tb-un{max-width:110px} }
@media (max-width:1080px) and (min-width:861px){ .tb2 .tb-un,.tb2 .tb-chev{display:none} .tb2 .tb-uc{padding:0 6px} .tb2 .tb-title{max-width:170px} }

/* ---------- موبايل ---------- */
@media (max-width:860px){
  .topbar.tb2{height:calc(64px + env(safe-area-inset-top)); padding:env(safe-area-inset-top) 12px 0; gap:8px; background:rgba(255,255,255,.96)!important}
  .tb2 .tb-title,.tb2 .tb-clock{display:none}
  .tb2 .tb-menu{display:grid; width:42px; height:42px; border:1px solid var(--ln); border-radius:13px; background:#fff}
  .tb2 .tb-brand{display:flex; align-items:center; gap:9px; flex:1; min-width:0; text-decoration:none}
  .tb2 .tb-brand img{width:38px; height:38px; border-radius:11px; flex:none; box-shadow:0 0 0 1px rgba(184,146,90,.35)}
  .tb2 .tb-brand span{display:flex; flex-direction:column; line-height:1.2; min-width:0}
  .tb2 .tb-brand b{font:700 15px 'Readex Pro',var(--font); color:var(--ink); white-space:nowrap}
  .tb2 .tb-brand small{font-size:11px; color:#9a8a78; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .tb2 .tb-sbtn{display:grid}
  .tb2 .tb-pill{height:46px; padding:0 4px; gap:2px; border-radius:15px; box-shadow:0 6px 16px -12px rgba(36,22,13,.45)}
  .tb2 .tb-pill .tb-ib{width:38px; height:38px}
  .tb2 .tb-new{width:38px; height:38px; padding:0; justify-content:center; border-radius:11px}
  .tb2 .tb-new span{display:none}
  .tb2 .tb-uc{height:auto; padding:0; border:0; background:none; box-shadow:none!important}
  .tb2 .tb-un,.tb2 .tb-chev{display:none}
  .tb2 .tb-av{width:40px; height:40px}
  .tb-um{position:fixed; top:calc(70px + env(safe-area-inset-top)); left:12px; right:12px; width:auto; transform-origin:top center}
  /* البحث على الموبايل: بيفتح فوق الشريط */
  .tb2 .tb-search{display:none; position:fixed; top:calc(10px + env(safe-area-inset-top)); right:12px; left:12px; max-width:none; margin:0; z-index:70}
  .tb2.searching .tb-search,.tb2 .tb-search.open{display:block}
  .tb2 .tb-search input{height:46px; padding:0 42px 0 14px!important; color:var(--ink)!important; box-shadow:0 18px 40px -16px rgba(36,22,13,.45)!important}
  .tb2 .tb-search input::placeholder{color:#ad9c88!important}
  .tb2 .tb-search .kbd-hint{display:none}
}
@media (max-width:360px){ .tb2 .tb-brand small{display:none} .tb2 .tb-pill .tb-ib,.tb2 .tb-new{width:34px} }

/* موبايل: خلفية خفيفة ورا قائمة المستخدم */
@media (max-width:860px){
  .tb-um{max-height:calc(100dvh - 90px - env(safe-area-inset-top)); overflow:auto}
  .tb-um{box-shadow:0 0 0 100vmax rgba(20,12,8,.28),0 30px 60px -24px rgba(36,22,13,.45)}
}