/* =====================================================================
   AM-REDESIGN · تجربة الجوال (شريط تنقّل سفلي + جداول متجاوبة)
   ===================================================================== */

/* ---- شريط التنقّل السفلي (يظهر على الجوال فقط) ---- */
#am-bottom-nav { display: none; }

@media (max-width: 991.98px) {
  #am-bottom-nav {
    display: flex;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1040;
    background: var(--am-surface, #fff);
    box-shadow: 0 -6px 22px rgba(15, 18, 38, .12);
    padding: 6px 6px env(safe-area-inset-bottom, 6px);
    border-top: 1px solid var(--am-border, #e6e8ef);
  }
  #am-bottom-nav a {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 2px;
    font-size: 11px;
    font-weight: 600;
    color: var(--am-text-muted, #6b7280);
    text-decoration: none;
    border-radius: var(--am-radius-sm, 9px);
    min-height: 52px;
    transition: color .2s, background .2s;
  }
  #am-bottom-nav a i { font-size: 19px; }
  #am-bottom-nav a:active { background: var(--am-brand-soft, rgba(233,69,96,.12)); }
  #am-bottom-nav a.am-active { color: var(--am-brand, #e94560); }

  /* مساحة سفلية حتى لا يغطّي الشريطُ المحتوى */
  body.am-has-bottom-nav { padding-bottom: 64px; }
  body.am-has-bottom-nav .onesignal-bell-launcher { bottom: 72px !important; }
}

/* ---- جداول متجاوبة: تتحول لبطاقات على الجوال ---- */
@media (max-width: 767.98px) {
  .am-cards-on-mobile thead { display: none; }
  .am-cards-on-mobile tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid var(--am-border, #e6e8ef);
    border-radius: var(--am-radius-sm, 9px);
    padding: 8px 12px;
    background: var(--am-surface, #fff);
    box-shadow: var(--am-shadow-sm);
  }
  .am-cards-on-mobile td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 0 !important;
    padding: 7px 0 !important;
    text-align: start;
  }
  .am-cards-on-mobile td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--am-text-muted, #6b7280);
    margin-inline-end: 12px;
  }
}