/* MoRAS Shared Mobile CSS — v2 */

/* ── Table wrap ── */
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px;border:1px solid var(--line,#E7E3D8);}
.table-wrap table{min-width:600px;border:none;border-radius:0;}

/* ── Hamburger button ── */
.mob-menu-btn{display:none;background:transparent;border:none;cursor:pointer;padding:6px 8px;border-radius:7px;color:#fff;flex-direction:column;gap:5px;align-items:center;justify-content:center;}
.mob-menu-btn span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:all .25s;}

/* ── Sidebar overlay ── */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(13,24,41,0.6);z-index:99;backdrop-filter:blur(2px);}
.sidebar-overlay.active{display:block;}

/* ── Bottom Nav ── */
.moras-bottom-nav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;height:58px;
  background:var(--navy-dark,#0D1829);
  border-top:1px solid rgba(255,255,255,0.08);
  z-index:98;
  align-items:center;justify-content:space-around;
  padding:0 .25rem;
  padding-bottom:env(safe-area-inset-bottom);
}
.moras-bottom-nav a{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  color:rgba(255,255,255,0.4);font-size:.58rem;font-weight:600;
  padding:.4rem .5rem;border-radius:8px;
  transition:all .15s;text-decoration:none;flex:1;text-align:center;
}
.moras-bottom-nav a.active,.moras-bottom-nav a:hover{color:var(--gold-light,#D9AE5C);}
.moras-bottom-nav a .bn-icon{font-size:1.15rem;line-height:1;}
.moras-bottom-nav a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:54px;}

/* ── Mobile Cards ── */
.mobile-cards-container{padding:.25rem 0;}
.mobile-card{
  background:#fff;border:1px solid var(--line,#E7E3D8);
  border-radius:12px;padding:.85rem;margin-bottom:.65rem;
  box-shadow:0 1px 4px rgba(0,0,0,.07);
}
.mobile-card-title{
  font-weight:700;font-size:.9rem;color:var(--navy,#16243F);
  padding-bottom:.5rem;margin-bottom:.5rem;
  border-bottom:1px solid var(--line,#E7E3D8);
}
.mobile-card-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:.28rem 0;border-bottom:1px solid var(--line,#E7E3D8);font-size:.8rem;
}
.mobile-card-row:last-child{border-bottom:none;}
.mobile-card-label{color:var(--muted,#6B7280);font-size:.72rem;flex-shrink:0;margin-right:.5rem;}
.mobile-card-value{font-weight:600;color:var(--ink,#1C1C1C);text-align:right;word-break:break-word;}

/* ══════════════ MOBILE ≤768px ══════════════ */
@media(max-width:768px){
  /* Bottom nav inaonekana */
  .moras-bottom-nav{display:flex;}
  /* Ongeza nafasi chini ili content isifiche bottom nav */
  body{padding-bottom:62px;}

  /* Hamburger inaonekana */
  .mob-menu-btn{display:flex;}

  /* Sidebar: drawer kutoka kushoto */
  .left{
    position:fixed!important;top:0;left:0;
    height:100vh!important;width:280px!important;
    z-index:100;
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    overflow-y:auto!important;
  }
  .left.open{transform:translateX(0);}

  /* Topbar */
  .topbar{padding:0 12px!important;height:52px!important;}
  .topbar-brand{font-size:0.92rem!important;}
  .user-name,.user-role{display:none;}
  .btn-logout{font-size:0.68rem!important;padding:4px 8px!important;margin-left:4px!important;}

  /* Right panel full width */
  .right{width:100%!important;}
  main{padding:14px 12px 14px!important;}

  /* Module cards */
  .modules-grid{grid-template-columns:1fr 1fr!important;gap:10px!important;}
  .module-card{padding:13px!important;}
  .module-card .m-desc{display:none;}

  /* Stats */
  .stats-grid,.role-stats-grid{grid-template-columns:1fr 1fr!important;gap:8px!important;}

  /* Quick links */
  .quick-grid{flex-wrap:wrap!important;gap:8px!important;}
  .quick-card{font-size:0.72rem!important;padding:7px 11px!important;}

  /* Footer */
  .dash-footer{flex-direction:column!important;gap:5px!important;text-align:center;padding:10px 14px!important;}
  .dash-footer a{margin-left:6px!important;}

  /* Table pages topbar */
  .topbar .brand{font-size:1rem!important;gap:8px!important;}
  .logout-btn{padding:6px 10px!important;font-size:0.75rem!important;}

  /* Page head */
  .page-head{flex-direction:column!important;align-items:flex-start!important;gap:10px!important;}
  .page-head h1{font-size:1.15rem!important;}

  /* Toolbar */
  .toolbar{flex-direction:column!important;gap:8px!important;}
  .toolbar input,.toolbar select{width:100%!important;min-width:unset!important;box-sizing:border-box!important;}

  /* Modal */
  .modal{padding:18px!important;margin:10px!important;max-width:calc(100vw - 20px)!important;}
  .modal-actions{flex-direction:column!important;}
  .modal-actions button,.modal-actions .btn{width:100%!important;}

  /* Subscription banner */
  div[style*="border-left:4px solid"]{flex-direction:column!important;gap:8px!important;align-items:flex-start!important;}

  /* Table pages main padding */
  main[style],main{padding:14px 12px 14px!important;}
}

/* ══════════════ TABLET 769–1024px ══════════════ */
@media(min-width:769px) and (max-width:1024px){
  .left{width:220px!important;padding:20px 16px!important;}
  main{padding:18px!important;}
  .modules-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))!important;}
}

/* ══════════════ VERY SMALL ≤380px ══════════════ */
@media(max-width:380px){
  .modules-grid{grid-template-columns:1fr!important;}
  .stats-grid,.role-stats-grid{grid-template-columns:1fr!important;}
}

/* ── Actions row kwenye mobile cards ── */
.mobile-card-row.is-actions{flex-direction:column;align-items:flex-start;gap:6px;padding-top:.5rem;}
.mobile-card-row.is-actions .mobile-card-label{margin-bottom:2px;}
.mobile-card-row.is-actions .mobile-card-value{text-align:left;display:flex;flex-wrap:wrap;gap:6px;width:100%;}
.mobile-card-row.is-actions .mobile-card-value .btn{flex:1;min-width:72px;text-align:center;}


/* ── Moescience Logo Auto-inject ── */
/* Inatumika tu kwenye .brand ambazo hazina <img> ndani */
.brand:not(:has(img))::before,
.topbar .brand:not(:has(img))::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url('/assets/images/moescience-logo.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  margin-right: 8px;
  flex-shrink: 0;
}
.brand {
  display: flex !important;
  align-items: center !important;
}