/* brand-app.css — مكوّنات الهوية المشتركة لصفحات التطبيق (/app/*.html).
 *
 * ينربط بآخر الـ head (بعد ستايل الصفحة) لأن الشريط السفلي والشرائح
 * منسوخة بكل صفحة بستايلها الخاص. الألوان كلها من brand.css.
 */

/* ═══ الشريط السفلي — حبة كحلية عائمة، العناصر بيضاء والفعّال أزرق ═══ */
.bottom-nav{
  position: fixed !important;
  left: 12px !important; right: 12px !important;
  bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  height: 68px !important;
  padding: 0 6px !important;
  background: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  border-radius: var(--r-pill) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  max-width: 560px; margin-inline: auto;
}
.bottom-nav .nav-item{color: #FFFFFF !important; position: relative;}
.bottom-nav .nav-item:hover{color: var(--brand-hover) !important;}
.bottom-nav .nav-item.active{color: var(--brand) !important;}
.bottom-nav .nav-item i{font-size: 22px !important;}
.bottom-nav .nav-item span{font-size: 11px !important; letter-spacing: 0 !important; text-transform: none !important;}
.bottom-nav .nav-item.active::before{
  background: var(--brand) !important;
  bottom: -6px !important; left: 50%; transform: translateX(-50%);
}
.bottom-nav .nav-dot{background: var(--brand) !important;}

/* ═══ الشرائح — الفعّالة بيضاء والباقي كحلي ═══ */
.cats .cat{
  background: var(--ink) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--ink) !important;
  border-radius: var(--r-pill) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
.cats .cat:hover:not(.active){background: var(--surface-dark) !important; color: #FFFFFF !important;}
.cats .cat.active{
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}

/* ═══ أيقونات التطبيقات بالقوائم ═══ */
.app-row .app-icon, .sk-row .app-icon{border-radius: var(--r-icon) !important;}